3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-04 06:48:33 +02:00
Code Issues Projects Releases Packages Wiki Activity

🎉 Changes options to display the color name

Browse source
This commit is contained in:
alonso.torres 2020-09-07 11:33:16 +02:00 • committed by Andrey Antukh
parent 6c74f74bb5
commit 73dbad9c58
7 changed files with 84 additions and 222 deletions
Download patch file Download diff file Expand all files Collapse all files

157
frontend/resources/styles/main/partials/colorpicker.scss
View file

@ -5,7 +5,7 @@
// Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
.colorpicker-v2 {
.colorpicker {
display: flex;
flex-direction: column;
width: 13rem;
@ -215,153 +215,16 @@
}
}
.color-picker {
display: flex;
flex-direction: column;
.picker-area {
display: flex;
/* Common stuff */
.picker-wrapper,
.slide-wrapper {
position: relative;
}
.picker-indicator,
.slide-indicator {
position: absolute;
left: 0;
top: 0;
pointer-events: none;
transition: none;
}
.picker,
.slide {
cursor: crosshair;
svg {
transition: none;
}
}
}
.inputs-area {
display: flex;
justify-content: space-around;
width: 200px;
.row-flex{
margin: 0;
}
> input {
width: 50%;
}
.input-text {
color: $color-gray-60;
font-size: $fs13;
margin: 5px;
padding: 5px;
width: 100%;
}
}
span {
color: $color-gray-20;
font-size: $fs12;
}
/* Default skin */
&.theme-default {
padding: 4px;
border-radius: 2px;
width: 230px;
.picker {
width: 200px;
height: 200px;
}
.slide {
width: 20px;
height: 200px;
}
.slide-wrapper {
margin-left: 4px;
}
.picker-indicator {
width: 5px;
height: 5px;
border: 2px solid darkblue;
border-radius: 4px;
opacity: .5;
background-color: white;
}
.slide-indicator {
width: 28px;
height: 10px;
left: -4px;
opacity: .6;
border: 4px solid lightblue;
border-radius: 4px;
background-color: white;
}
.inputs-area {
width: 230px;
}
}
/* Small skin */
&.theme-small {
border-radius: 2px;
.picker {
width: 170px;
height: 170px;
}
.slide {
width: 20px;
height: 170px;
}
.slide-wrapper {
margin-left: 4px;
}
.picker-indicator {
width: 5px;
height: 5px;
border: 2px solid darkblue;
border-radius: 4px;
opacity: .5;
background-color: white;
}
.slide-indicator {
width: 28px;
height: 10px;
left: -4px;
opacity: .6;
border: 4px solid lightblue;
border-radius: 4px;
background-color: white;
}
}
}
/* NEW COLOR PICKER */
/* color th */
.color-data {
align-items: center;
display: flex;
position: relative;
.color-name {
font-size: $fs13;
margin: 5px 6px 0px 6px;
}
.color-info {
input {
background-color: $color-gray-50;
@ -430,11 +293,3 @@
}
}
.chrome-picker {
font-family: inherit !important;
input {
margin-bottom: auto;
}
}