Permalink
Fetching contributors…
Cannot retrieve contributors at this time
101 lines (77 sloc) 2.2 KB
/// Global namespace for calendar component
/// @access public
/// @group calendar
/// @type string
$DBcalendar-namespace: "c-calendar";
/// Global namespace for datepicker component
/// @access public
/// @group calendar
/// @type string
$DBdatepicker-namespace: "c-datepicker";
.#{$DBdatepicker-namespace} {
position: relative;
box-sizing: border-box;
background-color: color(white);
.#{$DBcalendar-namespace} {
position: absolute;
top: 100%;
left: 0;
}
}
.#{$DBcalendar-namespace} {
display: inline-block;
z-index: 1;
border-radius: 5px;
background-color: color(gray, x-light);
.#{$DBcalendar-namespace}__header {
padding-bottom: 4px;
font-size: 0.6em;
letter-spacing: 0.05em;
text-transform: uppercase;
color: color(gray, medium);
}
.#{$DBcalendar-namespace}__date {
box-sizing: border-box;
padding: 4px 8px;
// This assumes that the `date` element is a child nested inside a `td`
width: 100%;
min-width: 32px;
text-align: center;
color: color(blue);
border: 1px solid color(gray, x-light);
background-color: color(white);
cursor: pointer;
appearance: none;
tr:first-child td:first-child & {
border-top-left-radius: 4px;
}
tr:first-child td:last-child & {
border-top-right-radius: 4px;
}
tr:last-child td:first-child & {
border-bottom-left-radius: 4px;
}
tr:last-child td:last-child & {
border-bottom-right-radius: 4px;
}
&:hover {
background-color: color(blue, x-light);
}
&:hover, &:focus:not([class*="--disabled"]) {
text-decoration: underline;
}
&.is-selected {
color: color(white);
background-color: color(blue);
}
&.is-in-range {
color: color(white);
background-color: color(blue, medium);
}
&--disabled, &--disabled:hover {
color: color(gray, light);
background-color: color(gray, x-light);
cursor: default;
}
}
}