chayns-components
Version:
A set of beautiful React components for developing chayns® applications.
64 lines • 1.88 kB
CSS
.cc__color-picker {
display: flex;
align-items: center;
cursor: pointer;
}
.cc__color-picker__slider-container__without-transparency {
width: 100%;
}
.cc__color-picker__slider-container__with-transparency {
width: calc(100% - 40px - 10px - 5px);
}
.cc__color-picker__color-square {
height: 40px;
width: 40px;
margin: 10px 10px 0 5px;
border-radius: 2px;
}
.cc__color-picker__color-square:before {
content: "";
background-color: #ffffff;
background-image: linear-gradient(45deg, #a0a0a0 25%, transparent 25%), linear-gradient(-45deg, #a0a0a0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #a0a0a0 75%), linear-gradient(-45deg, transparent 75%, #a0a0a0 75%);
background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
background-size: 8px 8px;
background-repeat: repeat;
width: inherit;
height: inherit;
position: absolute;
border-radius: inherit;
z-index: -1;
}
.cc__color-picker__color-square:after {
content: "";
background-color: inherit;
}
.cc__color-picker__color-circle {
width: 15px;
height: 15px;
border-radius: 100%;
margin-right: 5px;
}
.cc__color-picker__color-circle:before {
content: "";
background-color: #ffffff;
background-image: linear-gradient(45deg, #a0a0a0 25%, transparent 25%), linear-gradient(-45deg, #a0a0a0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #a0a0a0 75%), linear-gradient(-45deg, transparent 75%, #a0a0a0 75%);
background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
background-size: 8px 8px;
background-repeat: repeat;
width: inherit;
height: inherit;
position: absolute;
border-radius: inherit;
z-index: -1;
}
.cc__color-picker__color-circle:after {
content: "";
background-color: inherit;
}
.cc__color-picker__color-link {
border-bottom-width: 1px;
border-bottom-style: dashed;
}
.cc__color-picker__bubble-content {
overflow: hidden;
}