3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-29 00:16:12 +02:00
Code Issues Projects Releases Packages Wiki Activity

add new colorpicker styles

Browse source
This commit is contained in:
elhombretecla 2016-05-19 15:57:57 +02:00 • committed by Andrey Antukh
parent fce1e6b362
commit 249414c051
No known key found for this signature in database
GPG key ID: 4DFEBCB8316A8B95
2 changed files with 52 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

46
resources/styles/partials/colorpicker.scss
View file

@ -33,12 +33,32 @@
.inputs-area { .inputs-area {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
width: 200px;
.row-flex{
margin: 0;
}
> input { > input {
width: 50%; width: 50%;
} }
.input-text {
color: $intense-ui-text;
font-size: $fs13;
margin: 5px;
padding: 5px;
width: 100%;
}
} }
span {
color: $medium-ui-text;
font-size: $fs12;
}
/* Default skin */ /* Default skin */
&.theme-default { &.theme-default {
@ -75,9 +95,11 @@
border-radius: 4px; border-radius: 4px;
background-color: white; background-color: white;
} }
.inputs-area { .inputs-area {
width: 230px; width: 230px;
} }
} }
/* Small skin */ /* Small skin */
@ -114,11 +136,9 @@
border-radius: 4px; border-radius: 4px;
background-color: white; background-color: white;
} }
.inputs-area {
width: 170px;
}
} }
} }
/* NEW COLOR PICKER */ /* NEW COLOR PICKER */
@ -155,5 +175,23 @@
padding: $small; padding: $small;
position: absolute; position: absolute;
z-index: 11; z-index: 11;
width: 210px; width: auto;
span {
color: $medium-ui-text;
font-size: $fs12;
}
.inputs-area {
.input-text {
color: $intense-ui-text;
font-size: $fs13;
margin: 5px;
padding: 5px;
width: 100%;
}
}
} }

13
src/uxbox/ui/colorpicker.cljs
View file

@ -189,9 +189,16 @@
:type "text" :type "text"
:value value :value value
:on-change on-hex-changed}] :on-change on-hex-changed}]
[:input.input-text [:div.row-flex
{:placeholder "RGB" [:input.input-text
:type "text"}]]])))) {:placeholder "R"
:type "text"}]
[:input.input-text
{:placeholder "G"
:type "text"}]
[:input.input-text
{:placeholder "B"
:type "text"}]]]]))))