spacedeck-open/styles/color.scss

251 lines
4.8 KiB
SCSS
Raw Normal View History

2017-04-07 01:29:05 +02:00
@import "vars";
@import "mixins";
#color-toggles {
background-size: 40px;
border-radius: $radius;
background-color: $dark;
background-image: url('../images/opacity-grid.png');
}
.color-picker {
margin: 6px;
margin-bottom: 0;
width: 256px;
@include backface-visibility(hidden);
&.out .fader-selector {
opacity: 0;
}
.color {
position: relative;
width: 100%;
background-color: #2ecc71;
display: block;
border-top-left-radius: $radius;
border-top-right-radius: $radius;
&:before{
content: "";
display: block;
padding-top: 100%; /* initial ratio of 1:1*/
}
> div {
top: 0;
display: block;
width: 100%;
height: 100%;
position: absolute;
border-top-left-radius: $radius;
border-top-right-radius: $radius;
&.mask {
background-image: url('../images/huevalue.png');
}
}
}
.color-hue {
position: relative;
width: 100%;
&:before{
content: "";
display: block;
padding-top: 40px; /* initial ratio of 1:1*/
}
background-size: 100% 100%;
background-image: url('../images/hue.png');
}
.color-opacity {
&:before{
content: "";
display: block;
padding-top: 40px; /* initial ratio of 1:1*/
}
position: relative;
width: 100%;
background-size: cover;
background-image: url('../images/opacity-strip.png');
}
}
.color-indicator {
box-shadow: inset 0 0 3px rgba(0,0,0,0.1);
border: 2px solid rgba(0,0,0,0.2);
background-clip: padding-box;
}
.fader-selector {
padding: 0px;
background-color: transparent;
border: none;
border: 18px solid $dark;
border: 8px solid $dark;
height: 44px;
width: 44px;
margin: -2px;
position: absolute;
top: 0px;
left: 0px;
border-radius: 100%;
box-shadow: 0 0 10px 1px rgba(255,255,255,0.2), inset 0 0 10px 1px rgba(255,255,255,0.2);
@include transition( border 0.125s ease-in-out);
@include user-select(none);
@include scale(1,1);
&:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin-top: -1px;
margin-left: -1px;
height: 2px;
width: 2px;
background-color: white;
pointer-events: none !important;
border-radius: 100%;
}
&:hover,
&:focus,
&:active {
outline: none;
border: 8px solid $light;
}
&:active {
background-color: white;
}
}
.color-palette {
width: 600px;
text-align: center;
.overflow-y-scroll {
padding-top: 10px;
padding-bottom: 15px;
overflow-y: auto;
.btn {
display: inline-block;
height: 40px;
width: 40px;
min-width: 0;
min-height: 0;
margin-left: 4px;
margin-right: 4px;
margin-top: 8px;
padding: 0px;
// background-color: rgba(255,255,255,0.05);
background-clip: padding-box;
border: 2px solid rgba(0,0,0,0.1);
border-radius: 100%;
background-color: transparent;
background-color: rgba(255,255,255,0.025);
/* aspect ratio without spacer image */
&.active,
&:active {
background-clip: border-box;
border: 2px solid white;
}
.icon {
position: absolute;
left: -3.5px;
top: -2px;
@include icon-md;
}
}
}
}
.color .fader-selector { z-index: 10; left: 120px; top: 120px; margin: -22px; cursor: move; }
.color-hue .fader-selector { z-index: 10; left: 0px; margin: -2px -22px; cursor: ew-resize;}
.color-opacity .fader-selector { z-index: 10; left: 120px; margin: -2px -22px; cursor: ew-resize;}
#colors {
#color-target {
text-align: center;
display: block;
}
@include clearfix;
#color-hex {
@include clearfix;
position: relative;
#color-hash {
position: relative;
margin-left: 40px;
width: 196px;
}
.btn {
position: absolute;
z-index: 100;
}
#add-remove-color {
left: 0px;
}
#color-options-toggle {
right: 0px;
}
div {
position: relative;
width: 100%;
.input {
height: 50px;
line-height: 70px;
}
label {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 30px;
line-height: 32px;
font-size: 16px;
opacity: 0.35;
color: #888;
z-index: 10;
text-align: center;
}
}
}
#color-rgba {
position: relative;
@include clearfix;
label {
display: block;
width: 100%;
height: 20px;
line-height: 22px;
font-size: 16px;
opacity: 0.35;
color: #888;
z-index: 10;
text-align: center;
margin-bottom: -14px;
margin-top: 10px;
}
.input {
line-height: 48px;
width: 38px;
}
}
}
.font-size-swatches {
line-height: 50px;
}