assets/stylesheets/common/forms/color-picker.scss
@import "../../variables/mixins";
@import "../../variables/colors";
@import "../../variables/sizes";
// New color picker input styled
//
// <button class="ColorPicker" style="background:red">
// <span class="ColorPicker-handle">
// <b class="ColorPicker-handleTriangle"></b>
// </span>
// </button>
//
// --------------------------------------------------------------------------------------------------------------------
$size: 40px;
$br: 3px;
.ColorPicker {
display: inline-block;
position: relative;
width: $size;
height: $size;
border-radius: $br;
&::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: $size - 2;
height: $size - 2;
border: 1px solid rgba(black, 0.2);
border-radius: $br;
}
}
.UserSettings-ColorPicker {
display: inline-block;
position: relative;
width: 100px;
height: 40px;
border-radius: $br;
&::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 98px;
height: 38px;
border: 1px solid rgba(black, 0.2);
border-radius: $br;
}
}