@adobe/spectrum-css
Version:
The Spectrum CSS top-level backwards compatible package
208 lines (188 loc) • 5.19 kB
CSS
.spectrum-Calendar {
width: 280px;
display: inline-block;
}
.spectrum-Calendar--padded {
margin: 32px 24px;
}
.spectrum-Calendar-header {
display: -ms-flexbox;
display: flex;
width: 100%;
-ms-flex-align: center;
align-items: center;
}
.spectrum-Calendar-title {
font-size: 18px;
font-weight: bold;
line-height: 32px;
margin: 0;
-ms-flex-order: 1;
order: 1;
-ms-flex-positive: 1;
flex-grow: 1;
text-align: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.spectrum-Calendar .spectrum-Calendar-prevMonth,
.spectrum-Calendar .spectrum-Calendar-nextMonth {
margin: 0 3px;
}
.spectrum-Calendar-prevMonth {
-ms-flex-order: 0;
order: 0;
}
.spectrum-Calendar-nextMonth {
-ms-flex-order: 2;
order: 2;
}
.spectrum-Calendar-dayOfWeek {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: end;
justify-content: flex-end;
height: 100%;
width: 32px;
border-bottom: none ;
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
text-decoration: none ;
cursor: default;
}
.spectrum-Calendar-dayOfWeek[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted;
}
.spectrum-Calendar-body {
outline: none;
}
.spectrum-Calendar-table {
table-layout: fixed;
border-collapse: collapse;
border-spacing: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.spectrum-Calendar-tableCell {
text-align: center;
padding: 0;
position: relative;
box-sizing: content-box;
height: 32px;
width: 32px;
padding: 4px;
}
.spectrum-Calendar-tableCell:focus {
outline: 0;
}
.spectrum-Calendar-date {
position: absolute;
display: block;
top: 0;
left: 0;
box-sizing: border-box;
height: 32px;
width: 32px;
margin: 4px;
border-radius: 32px;
border: 2px solid transparent;
font-size: 14px;
line-height: 28px;
cursor: pointer;
transition: background 130ms ease-in-out,
color 130ms ease-in-out,
border-color 130ms ease-in-out;
}
.spectrum-Calendar-date.is-disabled {
cursor: default;
pointer-events: none;
}
.spectrum-Calendar-date.is-outsideMonth {
visibility: hidden;
}
.spectrum-Calendar-date:before {
content: '';
position: absolute;
top: calc(50% - 16px);
left: calc(50% - 16px);
box-sizing: border-box;
width: 32px;
height: 32px;
border-radius: 32px;
border: 2px solid transparent;
}
.spectrum-Calendar-date.is-selected:not(.is-range-selection) {
font-weight: 700;
}
.spectrum-Calendar-date.is-selected:not(.is-range-selection):before {
display: none;
}
.spectrum-Calendar-date.is-today {
font-weight: 700;
}
.spectrum-Calendar-date.is-range-selection {
margin: 4px 0;
border-width: 0;
line-height: 32px;
border-radius: 0;
width: 40px;
}
.spectrum-Calendar-date.is-range-selection.is-range-start,
.spectrum-Calendar-date.is-range-selection.is-range-end,
.spectrum-Calendar-date.is-range-selection.is-selection-start,
.spectrum-Calendar-date.is-range-selection.is-selection-end {
width: 36px;
}
.spectrum-Calendar-date.is-range-selection.is-selection-start,
.spectrum-Calendar-date.is-range-selection.is-selection-end {
font-weight: 700;
}
.spectrum-Calendar-date.is-range-selection.is-selection-start:after, .spectrum-Calendar-date.is-range-selection.is-selection-end:after {
position: absolute;
top: 0;
display: block;
height: 32px;
width: 32px;
border-radius: 32px;
content: '';
}
.spectrum-Calendar-date.is-range-selection.is-range-start,
.spectrum-Calendar-date.is-range-selection.is-selection-start {
padding-right: 4px;
margin-left: 4px;
border-radius: 32px 0 0 32px;
}
.spectrum-Calendar-date.is-range-selection.is-range-start:before,
.spectrum-Calendar-date.is-range-selection.is-range-start:after,
.spectrum-Calendar-date.is-range-selection.is-selection-start:before,
.spectrum-Calendar-date.is-range-selection.is-selection-start:after {
left: 0;
}
.spectrum-Calendar-date.is-range-selection.is-range-end,
.spectrum-Calendar-date.is-range-selection.is-selection-end {
padding-left: 4px;
margin-right: 4px;
border-radius: 0 32px 32px 0;
}
.spectrum-Calendar-date.is-range-selection.is-range-end:before,
.spectrum-Calendar-date.is-range-selection.is-range-end:after,
.spectrum-Calendar-date.is-range-selection.is-selection-end:before,
.spectrum-Calendar-date.is-range-selection.is-selection-end:after {
left: auto;
right: 0;
}
.spectrum-Calendar-date.is-range-selection.is-selection-start.is-selection-end,
.spectrum-Calendar-date.is-range-selection.is-selection-start.is-range-end,
.spectrum-Calendar-date.is-range-selection.is-selection-end.is-range-start,
.spectrum-Calendar-date.is-range-selection.is-range-start.is-range-end {
width: 32px;
border-radius: 32px;
}