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

Add input fields to colorpicker.

Browse source
This commit is contained in:
Andrey Antukh 2016-05-18 20:49:05 +03:00
parent 615586ec89
commit b3f50928d4
No known key found for this signature in database
GPG key ID: 4DFEBCB8316A8B95
4 changed files with 167 additions and 126 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -7,95 +7,109 @@
.color-picker {
display: flex;
flex-direction: column;
/* Common stuff */
.picker-wrapper,
.slide-wrapper {
position: relative;
}
.picker-indicator,
.slide-indicator {
position: absolute;
left: 0;
top: 0;
pointer-events: none;
}
.picker,
.slide {
cursor: crosshair;
}
}
.picker-area {
display: flex;
/* Default skin */
.color-picker-default {
padding: 4px;
border-radius: 2px;
.picker {
width: 200px;
height: 200px;
/* Common stuff */
.picker-wrapper,
.slide-wrapper {
position: relative;
}
.picker-indicator,
.slide-indicator {
position: absolute;
left: 0;
top: 0;
pointer-events: none;
}
.picker,
.slide {
cursor: crosshair;
}
}
.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;
}
}
/* Small skin */
.color-picker-small {
border-radius: 2px;
.picker {
width: 170px;
height: 170px;
.inputs-area {
display: flex;
justify-content: space-around;
}
.slide {
width: 20px;
height: 170px;
/* 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;
}
}
.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;
/* 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;
}
}
}