ColorCodes: swatches are links to color picker, alignment
parent
04ed31bec2
commit
70e94aa7d7
|
@ -88,13 +88,15 @@ sub create_output {
|
|||
. "Complementary: #$complementary\n"
|
||||
. "Analogous: ".(join ", ", map { "#".uc $_ } @analogous_colors);
|
||||
|
||||
my $comps = "<div class='cols_column'><span class='mini-color circle' style='background: #".$complementary.";'> </span></div>"
|
||||
my $comps = "<div class='cols_column'>"
|
||||
. "<a href='/?q=color%20picker%20%23$complementary' class='mini-color circle' style='background: #$complementary'>"
|
||||
. "</a></div>"
|
||||
. "<div class='desc_column'><p class='no_vspace'>Complementary #:</p><p class='no_vspace'>"
|
||||
. qq[<a onclick='document.x.q.value="#$complementary";document.x.q.focus();' href='javascript:' class='tx-clr--lt'>$complementary</a>]
|
||||
. "</p></div>";
|
||||
|
||||
my $analogs = "<div class='cols_column'>"
|
||||
. (join "", map { "<span class='mini-color circle' style='background: #" . $_ . "'> </span>"; } @analogous_colors)
|
||||
. (join "", map { "<a href='/?q=color%20picker%20%23".$_."' class='mini-color circle' style='background: #" . $_ . "'> </a>"; } @analogous_colors)
|
||||
. "</div>"
|
||||
. "<div class='desc_column'><p class='no_vspace'>Analogous #:</p><p class='no_vspace'>" . (join ", ", map { qq[<a onclick='document.x.q.value="#] .(uc $_). qq[";document.x.q.focus();' href='javascript:' class='tx-clr--lt'>].(uc $_).'</a>' } @analogous_colors) . "</p></div>";
|
||||
|
||||
|
@ -181,9 +183,11 @@ handle matches => sub {
|
|||
my ($text, $html_text) = create_output(%outdata);
|
||||
|
||||
return $text,
|
||||
html => '<div class="zci--color-codes"><div class="colorcodesbox circle" style="background:#' . $hex_code . '"></div>'
|
||||
. $html_text
|
||||
. "</div>";
|
||||
html => '<div class="zci--color-codes"><a href="/?q=color%20picker%20%23' . $hex_code . '" '
|
||||
. 'class="colorcodesbox circle" style="background:#' . $hex_code . '">'
|
||||
. '</a>'
|
||||
. $html_text
|
||||
. "</div>";
|
||||
};
|
||||
|
||||
1;
|
||||
|
|
|
@ -6,6 +6,7 @@
|
|||
margin-top: 4px;
|
||||
margin-left: 0px;
|
||||
float: left;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.zci--answer .zci--color-codes .circle {
|
||||
|
@ -18,6 +19,7 @@
|
|||
width: 32px;
|
||||
height: 32px;
|
||||
border: 1px solid rgba(0,0,0,0.15);
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.zci--answer .zci--color-codes p.no_vspace {
|
||||
|
|
Loading…
Reference in New Issue