mirror of
https://github.com/penpot/penpot.git
synced 2025-08-02 11:08:22 +02:00
✨ New options in color picker (harmony & hsv)
This commit is contained in:
alonso.torres
parent
08b537a158
commit
2c31b074c8
11 changed files with 947 additions and 447 deletions
2
frontend/resources/images/icons/picker-harmony.svg
Normal file
2
frontend/resources/images/icons/picker-harmony.svg
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" height="500" width="500"><path d="M330.902 0c-86.375 0-156.677 70.242-156.677 156.617 0 86.376 70.302 156.676 156.677 156.676 86.375 0 156.616-70.3 156.616-156.676C487.518 70.242 417.278 0 330.902 0zm-.562 36.625a120.87 120.87 0 01.342 0 120.87 120.87 0 01120.87 120.87 120.87 120.87 0 01-120.87 120.87 120.87 120.87 0 01-120.87-120.87A120.87 120.87 0 01330.34 36.624zM126.557 271.852c-62.798 0-114.075 51.275-114.075 114.074C12.482 448.724 63.76 500 126.557 500S240.63 448.724 240.63 385.926c0-62.799-51.276-114.074-114.074-114.074zm-.268 38.396a76.236 76.236 0 01.074 0 76.236 76.236 0 0176.237 76.236 76.236 76.236 0 01-76.237 76.237 76.236 76.236 0 01-76.236-76.237 76.236 76.236 0 0176.162-76.236z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 775 B |
1
frontend/resources/images/icons/picker-hsv.svg
Normal file
1
frontend/resources/images/icons/picker-hsv.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" height="500" width="500"><path d="M164.617 17.078c-49.266 0-90.208 37.515-95.681 85.381h-49.47A19.467 19.467 0 000 121.928a19.467 19.467 0 0019.467 19.467h53.025c12.073 39.418 48.894 68.306 92.125 68.306 43.23 0 80.054-28.888 92.127-68.306h223.79A19.467 19.467 0 00500 121.928a19.467 19.467 0 00-19.467-19.469H260.301c-5.474-47.866-46.418-85.38-95.684-85.38zm-.787 37.004a60.924 60.924 0 0160.924 60.924 60.924 60.924 0 01-60.924 60.924 60.924 60.924 0 01-60.924-60.924 60.924 60.924 0 0160.924-60.924zm171.553 236.217c-49.267 0-90.21 37.518-95.684 85.385H19.467A19.467 19.467 0 000 395.148a19.467 19.467 0 0019.467 19.467h223.789c12.073 39.42 48.896 68.307 92.127 68.307 43.23 0 80.052-28.888 92.125-68.307h53.025A19.467 19.467 0 00500 395.148a19.467 19.467 0 00-19.467-19.464h-49.469c-5.472-47.867-46.414-85.385-95.681-85.385zm1.119 36.148a60.924 60.924 0 0160.924 60.924 60.924 60.924 0 01-60.924 60.924 60.924 60.924 0 01-60.924-60.924 60.924 60.924 0 0160.924-60.924z"/></svg>
|
||||
|
After Width: | Height: | Size: 1 KiB |
1
frontend/resources/images/icons/picker-ramp.svg
Normal file
1
frontend/resources/images/icons/picker-ramp.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" height="500" width="500"><path d="M24.7-.203C11.421-.203.001 11.217.001 24.494v451.012c0 13.277 11.417 24.695 24.691 24.697h450.608c13.28 0 24.697-11.42 24.697-24.697V24.494c0-13.276-11.42-24.697-24.697-24.697H24.699zm4.142 31.35h442.316v437.707H28.842V31.146z"/></svg>
|
||||
|
After Width: | Height: | Size: 332 B |
|
|
@ -1 +1,4 @@
|
|||
<svg height="500" viewBox="0 0 500.00001 500.00001" width="500" xmlns="http://www.w3.org/2000/svg"><path d="m11.402 498.536c-4.64-1.613-8.317-5.335-9.896-10.02-.732-2.168-.824-7.17-.824-44.7 0-45.853-.04-45.148 2.807-49.542.653-1.01 53.238-53.866 116.855-117.46 63.617-63.59 115.667-115.852 115.667-116.134s-11.486-11.997-25.524-26.033-25.524-25.75-25.524-26.034c0-.283 14.816-15.328 32.924-33.434l32.924-32.922 29.607 29.59 29.607 29.592 44.286-44.17c32.81-32.726 45.278-44.843 48.115-46.76 7.434-5.025 16.28-8.752 24.758-10.432 5.316-1.053 18.308-.91 23.737.26 25.043 5.4 44.058 24.808 49.064 50.08.927 4.68.927 17.78 0 22.46-1.68 8.48-5.407 17.326-10.432 24.76-1.917 2.836-14.034 15.303-46.76 48.114l-44.17 44.286 29.59 29.608 29.592 29.608-32.92 32.923c-18.107 18.108-33.152 32.924-33.435 32.924s-11.998-11.485-26.034-25.523-25.75-25.524-26.033-25.524c-.282 0-52.543 52.05-116.135 115.667-63.593 63.617-116.45 116.202-117.46 116.856-4.4 2.85-3.662 2.81-49.686 2.783-37.102-.023-42.692-.126-44.702-.824zm188.236-144.766c62.962-62.96 114.477-114.7 114.477-114.98 0-.67-52.165-52.838-52.834-52.838-.282 0-52.026 51.515-114.986 114.477l-114.475 114.475v26.057c0 19.588.153 26.21.614 26.67.46.462 7.084.614 26.67.614h26.056l114.48-114.475z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16">
|
||||
<path fill="#fff" d="M.607 13.076v2.401l2.224.025 7.86-7.405s-.05-.885-.253-1.087c-.202-.202-2.25-1.744-2.25-1.744z"/>
|
||||
<path fill="#000" d="M.343 15.974a.514.514 0 01-.317-.321c-.023-.07-.026-.23-.026-1.43 0-1.468-.001-1.445.09-1.586.02-.032 1.703-1.724 3.74-3.759a596.805 596.805 0 003.7-3.716c0-.009-.367-.384-.816-.833a29.9 29.9 0 01-.817-.833c0-.01.474-.49 1.054-1.07l1.053-1.053.948.946.947.947 1.417-1.413C12.366.806 12.765.418 12.856.357c.238-.161.52-.28.792-.334.17-.034.586-.03.76.008.801.173 1.41.794 1.57 1.603.03.15.03.569 0 .718a2.227 2.227 0 01-.334.793c-.061.09-.45.49-1.496 1.54L12.734 6.1l.947.948.947.947-1.053 1.054c-.58.58-1.061 1.054-1.07 1.054-.01 0-.384-.368-.833-.817-.45-.45-.824-.817-.834-.817-.009 0-1.68 1.666-3.716 3.701a493.093 493.093 0 01-3.759 3.74c-.14.091-.117.09-1.59.089-1.187 0-1.366-.004-1.43-.027zm6.024-4.633a592.723 592.723 0 003.663-3.68c0-.02-1.67-1.69-1.69-1.69-.01 0-1.666 1.648-3.68 3.663L.996 13.297v.834c0 .627.005.839.02.854.015.014.227.02.854.02h.833l3.664-3.664z"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.1 KiB |
|
|
@ -6,257 +6,487 @@
|
|||
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
|
||||
.colorpicker {
|
||||
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
|
||||
background-color: $color-white;
|
||||
}
|
||||
|
||||
.colorpicker-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0.5rem;
|
||||
|
||||
& > * {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.top-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0.5rem;
|
||||
background-color: $color-white;
|
||||
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
|
||||
margin-bottom: 0.25rem;
|
||||
justify-content: space-between;
|
||||
|
||||
& > * {
|
||||
width: 200px;
|
||||
.picker-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
||||
&.active,
|
||||
&:hover svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gradients-buttons {
|
||||
.gradient {
|
||||
cursor: pointer;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 1px solid $color-gray-20;
|
||||
border-radius: 2px;
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
.top-actions {
|
||||
display: flex;
|
||||
margin-bottom: 0.25rem;
|
||||
|
||||
.picker-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
||||
&.active,
|
||||
&:hover svg {
|
||||
fill: $color-primary;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
.active {
|
||||
border-color: $color-primary;
|
||||
}
|
||||
|
||||
.picker-detail-wrapper {
|
||||
position: relative;
|
||||
.linear-gradient {
|
||||
background: linear-gradient(180deg, $color-gray-20, transparent);
|
||||
}
|
||||
|
||||
.center-circle {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 2px solid $color-white;
|
||||
border-radius: 8px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-7px, -7px);
|
||||
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
|
||||
}
|
||||
.radial-gradient {
|
||||
background: radial-gradient(transparent, $color-gray-20);
|
||||
}
|
||||
#picker-detail {
|
||||
border: 1px solid $color-gray-10;
|
||||
}
|
||||
|
||||
.gradient-stops {
|
||||
height: 10px;
|
||||
display: flex;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.gradient-background {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border: 1px solid $color-gray-10;
|
||||
}
|
||||
|
||||
.gradient-stop-wrapper {
|
||||
position: absolute;
|
||||
width: calc(100% - 2rem);
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.gradient-stop {
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid $color-gray-20;
|
||||
margin-top: -2px;
|
||||
margin-left: -7px;
|
||||
box-shadow: 0 2px 2px rgb(0 0 0 / 15%);
|
||||
|
||||
.selected {
|
||||
border-color: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.picker-detail-wrapper {
|
||||
position: relative;
|
||||
|
||||
.center-circle {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 2px solid $color-white;
|
||||
border-radius: 8px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-7px, -7px);
|
||||
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
|
||||
}
|
||||
}
|
||||
|
||||
#picker-detail {
|
||||
border: 1px solid $color-gray-10;
|
||||
}
|
||||
|
||||
.slider-selector {
|
||||
--gradient-direction: 90deg;
|
||||
--background-repeat: left;
|
||||
|
||||
&.vertical {
|
||||
--gradient-direction: 0deg;
|
||||
--background-repeat: top;
|
||||
}
|
||||
|
||||
border: 1px solid $color-gray-10;
|
||||
|
||||
background: linear-gradient(var(--gradient-direction), rgba(var(--color), 0) 0%, rgba(var(--color), 1.0) 100%);
|
||||
align-self: center;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
width: 100%;
|
||||
height: calc(0.5rem + 1px);
|
||||
|
||||
&.vertical {
|
||||
width: calc(0.5rem + 1px);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&.hue {
|
||||
background: linear-gradient(
|
||||
var(--gradient-direction),
|
||||
#f00 0%, #ff0 17%, #0f0 33%, #0ff 50%,
|
||||
#00f 67%, #f0f 83%, #f00 100%);
|
||||
}
|
||||
|
||||
&.saturation {
|
||||
background: linear-gradient(
|
||||
var(--gradient-direction),
|
||||
var(--saturation-grad-from) 0%,
|
||||
var(--saturation-grad-to) 100%
|
||||
)
|
||||
}
|
||||
|
||||
&.opacity {
|
||||
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=") var(--background-repeat) center;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(var(--gradient-direction), rgba(var(--color), 0) 0%, rgba(var(--color), 1.0) 100%);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.value {
|
||||
background: linear-gradient(var(--gradient-direction), #FFF 0%, #000 100%);
|
||||
}
|
||||
|
||||
|
||||
.handler {
|
||||
background-color: $color-white;;
|
||||
box-shadow: rgba(0, 0, 0, 0.37) 0px 1px 4px 0px;
|
||||
transform: translate(-6px, -2px);
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 6px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&.vertical .handler {
|
||||
transform: translate(-6px, 6px);
|
||||
}
|
||||
}
|
||||
|
||||
.value-saturation-selector {
|
||||
background-color: rgba(var(--hue-rgb));
|
||||
position: relative;
|
||||
height: 6.75rem;
|
||||
cursor: pointer;
|
||||
|
||||
.handler {
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 6px;
|
||||
z-index: 1;
|
||||
border: 1px solid $color-white;
|
||||
box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px inset, rgb(0 0 0 / 0.25) 0px 4px 4px inset, rgb(0 0 0 / 0.25) 0px 4px 4px;
|
||||
transform: translate(-6px, -6px);
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(to right, #fff, rgba(255,255,255,0));
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(to top, #000, rgba(0,0,0,0));
|
||||
}
|
||||
}
|
||||
|
||||
.color-bullet {
|
||||
grid-area: color;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: rgba(var(--color));
|
||||
border-radius: 12px;
|
||||
border: 1px solid $color-gray-10;
|
||||
}
|
||||
|
||||
.shade-selector {
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
grid-template-areas: "color hue"
|
||||
"color opacity";
|
||||
grid-template-columns: 2.5rem 1fr;
|
||||
height: 3.5rem;
|
||||
grid-row-gap: 0.5rem;
|
||||
cursor: pointer;
|
||||
margin-bottom: 0.25rem;
|
||||
|
||||
.slider-selector.hue {
|
||||
grid-area: "hue";
|
||||
align-self: end;
|
||||
}
|
||||
|
||||
.slider-selector.opacity {
|
||||
grid-area: "opacity";
|
||||
align-self: start;
|
||||
}
|
||||
}
|
||||
|
||||
.color-values {
|
||||
display: grid;
|
||||
grid-template-columns: 3.5rem repeat(4, 1fr);
|
||||
grid-row-gap: 0.25rem;
|
||||
justify-items: center;
|
||||
grid-column-gap: 0.25rem;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
border: 1px solid $color-gray-10;
|
||||
border-radius: 2px;
|
||||
font-size: $fs11;
|
||||
height: 1.5rem;
|
||||
padding: 0 $x-small;
|
||||
color: $color-gray-40;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: $fs11;
|
||||
}
|
||||
}
|
||||
|
||||
.libraries {
|
||||
border-top: 1px solid $color-gray-10;
|
||||
padding-top: 0.5rem;
|
||||
margin-top: 0.25rem;
|
||||
width: 200px;
|
||||
|
||||
select {
|
||||
background-image: url(/images/icons/arrow-down.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 95% 48%;
|
||||
background-size: 10px;
|
||||
margin: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
width: 100%;
|
||||
padding: 2px 0.25rem;
|
||||
font-size: 0.75rem;
|
||||
color: $color-gray-40;
|
||||
border-color: $color-gray-10;
|
||||
border-radius: 2px;
|
||||
|
||||
option {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.selected-colors {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, 1fr);
|
||||
justify-content: space-between;
|
||||
margin-right: -8px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
max-height: 5.5rem;
|
||||
}
|
||||
|
||||
|
||||
.selected-colors::after {
|
||||
content: "";
|
||||
flex: auto;
|
||||
}
|
||||
|
||||
.selected-colors .color-bullet {
|
||||
grid-area: auto;
|
||||
margin-bottom: 0.25rem;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
border-color: $color-primary;
|
||||
}
|
||||
|
||||
&.button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&.button svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
fill: $color-gray-30;
|
||||
}
|
||||
|
||||
&.plus-button svg {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
fill: $color-black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-top: 0.5rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
|
||||
.btn-primary {
|
||||
height: 1.5rem;
|
||||
padding: 0 2.5rem;
|
||||
font-size: $fs12;
|
||||
}
|
||||
}
|
||||
|
||||
.harmony-selector {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
.hue-wheel-wrapper {
|
||||
position: relative;
|
||||
|
||||
.hue-wheel {
|
||||
width: 152px;
|
||||
height: 152px;
|
||||
}
|
||||
|
||||
.handler {
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 6px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.value-selector {
|
||||
background-color: rgba(var(--hue));
|
||||
position: relative;
|
||||
height: 6.75rem;
|
||||
cursor: pointer;
|
||||
|
||||
.handler {
|
||||
box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px inset;
|
||||
transform: translate(-6px, -6px);
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.value-selector::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(to right, #fff, rgba(255,255,255,0));
|
||||
}
|
||||
|
||||
.value-selector::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(to top, #000, rgba(0,0,0,0));
|
||||
}
|
||||
|
||||
.shade-selector {
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
grid-template-areas: "color hue" "color opacity";
|
||||
grid-template-columns: 2.5rem 1fr;
|
||||
height: 3.5rem;
|
||||
grid-row-gap: 0.5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.color-bullet {
|
||||
grid-area: color;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: rgba(var(--color));
|
||||
border-radius: 12px;
|
||||
border: 1px solid $color-gray-10;
|
||||
}
|
||||
|
||||
.hue-selector {
|
||||
align-self: end;
|
||||
grid-area: hue;
|
||||
height: 0.5rem;
|
||||
width: 100%;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
#f00 0%, #ff0 17%, #0f0 33%, #0ff 50%,
|
||||
#00f 67%, #f0f 83%, #f00 100%);
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hue-selector .handler,
|
||||
.opacity-selector .handler {
|
||||
background-color: rgb(248, 248, 248);
|
||||
box-shadow: rgba(0, 0, 0, 0.37) 0px 1px 4px 0px;
|
||||
transform: translate(-6px, -2px);
|
||||
border: 1px solid $color-white;
|
||||
box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px inset, rgb(0 0 0 / 0.25) 0px 4px 4px inset, rgb(0 0 0 / 0.25) 0px 4px 4px;
|
||||
transform: translate(-6px, -6px);
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.handler.complement {
|
||||
background-color: $color-white;
|
||||
box-shadow: rgb(0 0 0 / 0.25) 0px 4px 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.opacity-selector {
|
||||
align-self: start;
|
||||
grid-area: opacity;
|
||||
height: 0.5rem;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=") left center;
|
||||
}
|
||||
|
||||
.opacity-selector::after {
|
||||
content: "";
|
||||
background: linear-gradient(to right, rgba(var(--color), 0) 0%, rgba(var(--color), 1.0) 100%);
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
.handlers-wrapper {
|
||||
height: 152px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-grow: 1;
|
||||
justify-content: space-around;
|
||||
padding-top: 0.5rem;
|
||||
|
||||
& > * {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hsva-selector {
|
||||
display: grid;
|
||||
padding: 0.25rem;
|
||||
grid-template-columns: 20px 1fr;
|
||||
grid-template-rows: repeat(4, 2rem);
|
||||
grid-row-gap: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
.hue,
|
||||
.saturation,
|
||||
.value,
|
||||
.opacity {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.color-values {
|
||||
display: grid;
|
||||
grid-template-columns: 3.5rem repeat(4, 1fr);
|
||||
grid-row-gap: 0.25rem;
|
||||
justify-items: center;
|
||||
grid-column-gap: 0.25rem;
|
||||
.hsva-selector-label {
|
||||
grid-column: 1;
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
border: 1px solid $color-gray-10;
|
||||
border-radius: 2px;
|
||||
font-size: $fs11;
|
||||
height: 1.5rem;
|
||||
padding: 0 $x-small;
|
||||
color: $color-gray-40;
|
||||
}
|
||||
.colorpicker-tooltip {
|
||||
border-radius: $br-small;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
left: 1400px;
|
||||
top: 100px;
|
||||
position: absolute;
|
||||
z-index: 11;
|
||||
width: auto;
|
||||
|
||||
label {
|
||||
font-size: $fs11;
|
||||
}
|
||||
span {
|
||||
color: $color-gray-20;
|
||||
font-size: $fs12;
|
||||
}
|
||||
|
||||
.inputs-area {
|
||||
|
||||
.input-text {
|
||||
color: $color-gray-60;
|
||||
font-size: $fs13;
|
||||
margin: 5px;
|
||||
padding: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.libraries {
|
||||
border-top: 1px solid $color-gray-10;
|
||||
padding-top: 0.5rem;
|
||||
margin-top: 0.25rem;
|
||||
width: 200px;
|
||||
|
||||
select {
|
||||
background-image: url(/images/icons/arrow-down.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 95% 48%;
|
||||
background-size: 10px;
|
||||
margin: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
width: 100%;
|
||||
padding: 2px 0.25rem;
|
||||
font-size: 0.75rem;
|
||||
color: $color-gray-40;
|
||||
border-color: $color-gray-10;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
option {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.colorpicker-tabs {
|
||||
display: flex;
|
||||
margin-top: 0.25rem;
|
||||
height: 2rem;
|
||||
background-color: $color-gray-10;
|
||||
|
||||
.selected-colors {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, 1fr);
|
||||
justify-content: space-between;
|
||||
margin-right: -8px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
max-height: 5.5rem;
|
||||
}
|
||||
|
||||
|
||||
.selected-colors::after {
|
||||
content: "";
|
||||
flex: auto;
|
||||
}
|
||||
|
||||
.selected-colors .color-bullet {
|
||||
grid-area: auto;
|
||||
margin-bottom: 0.25rem;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
border-color: $color-primary;
|
||||
}
|
||||
|
||||
&.button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&.button svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
fill: $color-gray-30;
|
||||
}
|
||||
|
||||
&.plus-button svg {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
fill: $color-black;
|
||||
}
|
||||
}
|
||||
.active {
|
||||
background-color: $color-white;
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-top: 0.5rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
.colorpicker-tab {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.btn-primary {
|
||||
height: 1.5rem;
|
||||
padding: 0 2.5rem;
|
||||
font-size: $fs12;
|
||||
}
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
fill: $color-gray-30;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.color-data {
|
||||
|
|
@ -265,8 +495,8 @@
|
|||
position: relative;
|
||||
|
||||
.color-name {
|
||||
font-size: $fs13;
|
||||
margin: 5px 6px 0px 6px;
|
||||
font-size: $fs13;
|
||||
margin: 5px 6px 0px 6px;
|
||||
}
|
||||
|
||||
.color-info {
|
||||
|
|
@ -310,30 +540,3 @@
|
|||
}
|
||||
}
|
||||
|
||||
.colorpicker-tooltip {
|
||||
border-radius: $br-small;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
left: 1400px;
|
||||
top: 100px;
|
||||
position: absolute;
|
||||
z-index: 11;
|
||||
width: auto;
|
||||
|
||||
span {
|
||||
color: $color-gray-20;
|
||||
font-size: $fs12;
|
||||
}
|
||||
|
||||
.inputs-area {
|
||||
|
||||
.input-text {
|
||||
color: $color-gray-60;
|
||||
font-size: $fs13;
|
||||
margin: 5px;
|
||||
padding: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue