.#{$prefix}color-picker {
|
width: ($colorpicker-item-width * $colorpicker-columns) + horizontal($colorpicker-border-width);
|
height: ($colorpicker-item-height * $colorpicker-rows) + vertical($colorpicker-border-width);
|
background-color: $colorpicker-background-color;
|
border-color: $colorpicker-border-color;
|
border-width: $colorpicker-border-width;
|
border-style: $colorpicker-border-style;
|
}
|
|
.#{$prefix}color-picker-item {
|
width: $colorpicker-item-width;
|
height: $colorpicker-item-height;
|
border-width: $colorpicker-item-border-width;
|
border-color: $colorpicker-item-border-color;
|
border-style: $colorpicker-item-border-style;
|
background-color: $colorpicker-item-background-color;
|
cursor: $colorpicker-item-cursor;
|
padding: $colorpicker-item-padding;
|
@if $include-content-box {
|
.#{$prefix}content-box & {
|
width: $colorpicker-item-width - horizontal($colorpicker-item-border-width) - horizontal($colorpicker-item-padding);
|
height: $colorpicker-item-height - vertical($colorpicker-item-border-width) - vertical($colorpicker-item-padding);
|
}
|
}
|
}
|
|
// include the element name since :hover causes performance issues in IE7 and 8 otherwise
|
a.#{$prefix}color-picker-item:hover {
|
border-color: $colorpicker-item-border-color-over;
|
background-color: $colorpicker-item-background-color-over;
|
}
|
|
.#{$prefix}color-picker-selected {
|
border-color: $colorpicker-item-border-color-selected;
|
background-color: $colorpicker-item-background-color-selected;
|
}
|
|
.#{$prefix}color-picker-item-inner {
|
line-height: $colorpicker-item-height - vertical($colorpicker-item-padding) - vertical($colorpicker-item-border-width) - vertical($colorpicker-item-inner-border-width);
|
border-color: $colorpicker-item-inner-border-color;
|
border-width: $colorpicker-item-inner-border-width;
|
border-style: $colorpicker-item-inner-border-style;
|
}
|
