UNPKG

@adobe/spectrum-css

Version:

The Spectrum CSS top-level backwards compatible package

208 lines (188 loc) 5.19 kB
.spectrum-Calendar { width: 336px; 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: 22px; 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 4px; } .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: 40px; border-bottom: none !important; font-size: 13px; font-weight: 500; text-transform: uppercase; text-decoration: none !important; 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: 40px; width: 40px; padding: 4px; } .spectrum-Calendar-tableCell:focus { outline: 0; } .spectrum-Calendar-date { position: absolute; display: block; top: 0; left: 0; box-sizing: border-box; height: 40px; width: 40px; margin: 4px; border-radius: 40px; border: 2px solid transparent; font-size: 17px; line-height: 36px; 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% - 20px); left: calc(50% - 20px); box-sizing: border-box; width: 40px; height: 40px; border-radius: 40px; 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: 40px; border-radius: 0; width: 48px; } .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: 44px; } .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: 40px; width: 40px; border-radius: 40px; 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: 40px 0 0 40px; } .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 40px 40px 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: 40px; border-radius: 40px; }