Examples
Range start date selected, end date hovered
Month
| Sunday | Monday | Tuesday | Wednesday | Thursday | Friday | Saturday |
|---|---|---|---|---|---|---|
Range end date selected, start date focused
Month
| Sunday | Monday | Tuesday | Wednesday | Thursday | Friday | Saturday |
|---|---|---|---|---|---|---|
Documentation
Accessibility
Attribute | Applied to | Outcome |
|---|---|---|
aria-hidden="true" | .pf-v5-c-calendar-month__header-nav-control > button > [icon] | Hides the nav control icon from assistive technologies. Required |
aria-hidden="true" | .pf-v5-c-calendar-month__day > span | Hides the visual day of the month label from assistive technologies. Required |
.pf-v5-screen-reader | .pf-v5-c-calendar-month__day > span | Hides the full day of the month text visually. Required |
aria-label="[Prev/Next] month" | .pf-v5-c-calendar-month__header-nav-control | Provides an accessible label for the nav controls. Required |
disabled | .pf-v5-c-calendar-month__date | Indicates that a date is selected. Required when the parent is .pf-v5-c-calendar-month__dates-cell.pf-m-disabled |
aria-label="[date] [month] [year]" | .pf-v5-c-calendar-month__date | Provides an accessible label for the date button. Required |
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-v5-c-calendar-month | <div> | Initiates the calendar month component. Required |
.pf-v5-c-calendar-month__header | <div> | Initiates the calendar month header. Required |
.pf-v5-c-calendar-month__header-nav-control | <div> | Initiates a nav control for navigating by month. Required |
.pf-v5-c-calendar-month__header-month | <div> | Initiates the month select. Required |
.pf-v5-c-calendar-month__header-year | <div> | Initiates the year input. Required |
.pf-v5-c-calendar-month__calendar | <table> | Initiates the calendar. Required |
.pf-v5-c-calendar-month__days | <thead> | Initiates the calendar days section. Required |
.pf-v5-c-calendar-month__days-row | <tr> | Initiates the calendar days row. Required |
.pf-v5-c-calendar-month__day | <th> | Initiates a calendar day. Required |
.pf-v5-c-calendar-month__dates | <tbody> | Initiates the calendar dates section. Required |
.pf-v5-c-calendar-month__dates-row | <tr> | Initiates a calendar dates row. Required |
.pf-v5-c-calendar-month__dates-cell | <td> | Initiates a calendar date cell. Required |
.pf-v5-c-calendar-month__date | <button> | Initiates a calendar date. Required |
.pf-m-prev-month | .pf-v5-c-calendar-month__header-nav-control | Indicates a nav control is the previous month. Required |
.pf-m-next-month | .pf-v5-c-calendar-month__header-nav-control | Indicates a nav control is the next month. Required |
.pf-m-current | .pf-v5-c-calendar-month__dates-cell | Indicates a date is the current day. Required |
.pf-m-selected | .pf-v5-c-calendar-month__dates-cell | Indicates a date is selected. |
.pf-m-start-range | .pf-v5-c-calendar-month__dates-cell | Indicates a date is the start of a range. |
.pf-m-in-range | .pf-v5-c-calendar-month__dates-cell | Indicates a date is in a range. |
.pf-m-end-range | .pf-v5-c-calendar-month__dates-cell | Indicates a date is the end of a range. |
.pf-m-adjacent-month | .pf-v5-c-calendar-month__dates-cell | Indicates a date is in an adjacent month. |
.pf-m-disabled | .pf-v5-c-calendar-month__dates-cell | Indicates a date is disabled and unavailable. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v5-c-calendar-month | --pf-v5-global--Color--100 | #151515 | ||
--pf-v5-global--Color--100 --pf-v5-global--Color--dark-100 $pf-v5-global--Color--dark-100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-calendar-month | --pf-v5-global--Color--200 | #6a6e73 | ||
--pf-v5-global--Color--200 --pf-v5-global--Color--dark-200 $pf-v5-global--Color--dark-200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-calendar-month | --pf-v5-global--BorderColor--100 | #d2d2d2 | ||
--pf-v5-global--BorderColor--100 --pf-v5-global--BorderColor--dark-100 $pf-v5-global--BorderColor--dark-100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-calendar-month | --pf-v5-global--primary-color--100 | #06c | ||
--pf-v5-global--primary-color--100 --pf-v5-global--primary-color--dark-100 $pf-v5-global--primary-color--dark-100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-calendar-month | --pf-v5-global--link--Color | #06c | ||
--pf-v5-global--link--Color --pf-v5-global--link--Color--dark $pf-v5-global--link--Color--dark $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-calendar-month | --pf-v5-global--link--Color--hover | #004080 | ||
--pf-v5-global--link--Color--hover --pf-v5-global--link--Color--dark--hover $pf-v5-global--link--Color--dark--hover $pf-v5-global--primary-color--200 $pf-v5-color-blue-500 #004080 | ||||
| .pf-v5-c-calendar-month | --pf-v5-global--BackgroundColor--100 | #fff | ||
--pf-v5-global--BackgroundColor--100 --pf-v5-global--BackgroundColor--light-100 $pf-v5-global--BackgroundColor--light-100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-calendar-month | --pf-v5-global--icon--Color--light | #6a6e73 | ||
--pf-v5-global--icon--Color--light --pf-v5-global--icon--Color--light--dark $pf-v5-global--icon--Color--light--dark $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-calendar-month | --pf-v5-global--icon--Color--dark | #151515 | ||
--pf-v5-global--icon--Color--dark --pf-v5-global--icon--Color--dark--dark $pf-v5-global--icon--Color--dark--dark $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month--BackgroundColor | #fff | ||
--pf-v5-c-calendar-month--BackgroundColor --pf-v5-global--BackgroundColor--100 $pf-v5-global--BackgroundColor--100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month--PaddingTop | 1.5rem | ||
--pf-v5-c-calendar-month--PaddingTop --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month--PaddingRight | 1.5rem | ||
--pf-v5-c-calendar-month--PaddingRight --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month--PaddingBottom | 1rem | ||
--pf-v5-c-calendar-month--PaddingBottom --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month--PaddingLeft | 1.5rem | ||
--pf-v5-c-calendar-month--PaddingLeft --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month--FontSize | 0.875rem | ||
--pf-v5-c-calendar-month--FontSize --pf-v5-global--FontSize--sm $pf-v5-global--FontSize--sm pf-font-prem(14px) 0.875rem | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__header--MarginBottom | 1rem | ||
--pf-v5-c-calendar-month__header--MarginBottom --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__header-year--Width | 8.5ch | ||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__header-nav-control--MarginRight | 0 | ||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__header-nav-control--MarginLeft | 0 | ||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__header-nav-control--m-prev-month--MarginRight | 0 | ||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__header-nav-control--m-prev-month--MarginLeft | 0 | ||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__header-nav-control--m-next-month--MarginRight | 0 | ||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__header-nav-control--m-next-month--MarginLeft | 0 | ||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__days--BorderBottomWidth | 1px | ||
--pf-v5-c-calendar-month__days--BorderBottomWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__days--BorderBottomColor | #d2d2d2 | ||
--pf-v5-c-calendar-month__days--BorderBottomColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__day--PaddingBottom | 1rem | ||
--pf-v5-c-calendar-month__day--PaddingBottom --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__day--FontWeight | 400 | ||
--pf-v5-c-calendar-month__day--FontWeight --pf-v5-global--FontWeight--normal $pf-v5-global--FontWeight--normal 400 | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__dates-cell--PaddingTop | 0.125rem | ||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__dates-cell--PaddingRight | 0.125rem | ||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__dates-cell--PaddingBottom | 0.125rem | ||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__dates-cell--PaddingLeft | 0.125rem | ||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__dates-row--first-child__dates-cell--PaddingTop | 0.5rem | ||
--pf-v5-c-calendar-month__dates-row--first-child__dates-cell--PaddingTop --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__dates-cell--m-current__date--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-calendar-month__dates-cell--m-current__date--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__dates-cell--m-selected__date--BackgroundColor | #06c | ||
--pf-v5-c-calendar-month__dates-cell--m-selected__date--BackgroundColor --pf-v5-global--active-color--100 $pf-v5-global--active-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__dates-cell--m-selected__date--hover--BackgroundColor | #06c | ||
--pf-v5-c-calendar-month__dates-cell--m-selected__date--hover--BackgroundColor --pf-v5-global--active-color--100 $pf-v5-global--active-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__dates-cell--m-selected__date--focus--BackgroundColor | #004080 | ||
--pf-v5-c-calendar-month__dates-cell--m-selected__date--focus--BackgroundColor --pf-v5-global--primary-color--200 $pf-v5-global--primary-color--200 $pf-v5-color-blue-500 #004080 | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__dates-cell--m-selected__date--focus--after--BorderColor | #004080 | ||
--pf-v5-c-calendar-month__dates-cell--m-selected__date--focus--after--BorderColor --pf-v5-global--primary-color--200 $pf-v5-global--primary-color--200 $pf-v5-color-blue-500 #004080 | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__dates-cell--m-selected__date--focus--BoxShadow | 0 0 0.3125rem #06c | ||
--pf-v5-c-calendar-month__dates-cell--m-selected__date--focus--BoxShadow 0 0 0.3125rem --pf-v5-global--primary-color--100 0 0 0.3125rem $pf-v5-global--primary-color--100 0 0 0.3125rem $pf-v5-color-blue-400 0 0 0.3125rem #06c | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__dates-cell--m-selected__date--Color | #fff | ||
--pf-v5-c-calendar-month__dates-cell--m-selected__date--Color --pf-v5-global--Color--light-100 $pf-v5-global--Color--light-100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__dates-cell--before--BackgroundColor | transparent | ||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__dates-cell--before--Top | 0 | ||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__dates-cell--before--Right | 0 | ||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__dates-cell--before--Bottom | 0.125rem | ||
--pf-v5-c-calendar-month__dates-cell--before--Bottom --pf-v5-c-calendar-month__dates-cell--PaddingBottom 0.125rem | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__dates-cell--before--Left | 0 | ||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__dates-cell--m-in-range--before--BackgroundColor | #e7f1fa | ||
--pf-v5-c-calendar-month__dates-cell--m-in-range--before--BackgroundColor --pf-v5-global--palette--blue-50 $pf-v5-color-blue-50 #e7f1fa | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__dates-cell--m-in-range--m-start-range--before--Left | 50% | ||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__dates-cell--m-in-range--m-end-range--before--Right | 50% | ||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__dates-cell--m-in-range__date--hover--BackgroundColor | #bee1f4 | ||
--pf-v5-c-calendar-month__dates-cell--m-in-range__date--hover--BackgroundColor --pf-v5-global--palette--blue-100 $pf-v5-color-blue-100 #bee1f4 | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__dates-cell--m-in-range__date--focus--BackgroundColor | #bee1f4 | ||
--pf-v5-c-calendar-month__dates-cell--m-in-range__date--focus--BackgroundColor --pf-v5-global--palette--blue-100 $pf-v5-color-blue-100 #bee1f4 | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__dates-cell--m-adjacent-month__date--Color | #6a6e73 | ||
--pf-v5-c-calendar-month__dates-cell--m-adjacent-month__date--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__date--Width | 4ch | ||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__date--Height | 4ch | ||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__date--BorderRadius | 30em | ||
--pf-v5-c-calendar-month__date--BorderRadius --pf-v5-global--BorderRadius--lg $pf-v5-global--BorderRadius--lg 30em | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__date--Color | #151515 | ||
--pf-v5-c-calendar-month__date--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__date--BackgroundColor | transparent | ||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__date--disabled--Color | #d2d2d2 | ||
--pf-v5-c-calendar-month__date--disabled--Color --pf-v5-global--disabled-color--200 $pf-v5-global--disabled-color--200 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__date--after--BorderWidth | 2px | ||
--pf-v5-c-calendar-month__date--after--BorderWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__date--after--BorderColor | transparent | ||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__date--hover--BackgroundColor | #e7f1fa | ||
--pf-v5-c-calendar-month__date--hover--BackgroundColor --pf-v5-global--palette--blue-50 $pf-v5-color-blue-50 #e7f1fa | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__date--focus--BackgroundColor | #e7f1fa | ||
--pf-v5-c-calendar-month__date--focus--BackgroundColor --pf-v5-global--palette--blue-50 $pf-v5-color-blue-50 #e7f1fa | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__date--focus--after--BorderColor | #06c | ||
--pf-v5-c-calendar-month__date--focus--after--BorderColor --pf-v5-global--active-color--100 $pf-v5-global--active-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-calendar-month | --pf-v5-c-calendar-month__date--focus--BoxShadow | none | ||
| .pf-v5-c-calendar-month__header-nav-control.pf-m-prev-month | --pf-v5-c-calendar-month__header-nav-control--MarginRight | 0 | ||
--pf-v5-c-calendar-month__header-nav-control--MarginRight --pf-v5-c-calendar-month__header-nav-control--m-prev-month--MarginRight 0 | ||||
| .pf-v5-c-calendar-month__header-nav-control.pf-m-prev-month | --pf-v5-c-calendar-month__header-nav-control--MarginLeft | 0 | ||
--pf-v5-c-calendar-month__header-nav-control--MarginLeft --pf-v5-c-calendar-month__header-nav-control--m-prev-month--MarginLeft 0 | ||||
| .pf-v5-c-calendar-month__header-nav-control.pf-m-next-month | --pf-v5-c-calendar-month__header-nav-control--MarginRight | 0 | ||
--pf-v5-c-calendar-month__header-nav-control--MarginRight --pf-v5-c-calendar-month__header-nav-control--m-next-month--MarginRight 0 | ||||
| .pf-v5-c-calendar-month__header-nav-control.pf-m-next-month | --pf-v5-c-calendar-month__header-nav-control--MarginLeft | 0 | ||
--pf-v5-c-calendar-month__header-nav-control--MarginLeft --pf-v5-c-calendar-month__header-nav-control--m-next-month--MarginLeft 0 | ||||
| .pf-v5-c-calendar-month__dates-row:first-child | --pf-v5-c-calendar-month__dates-cell--PaddingTop | 0.5rem | ||
--pf-v5-c-calendar-month__dates-cell--PaddingTop --pf-v5-c-calendar-month__dates-row--first-child__dates-cell--PaddingTop --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-calendar-month__dates-cell | --pf-v5-c-calendar-month__dates-cell--before--Top | 0.125rem | ||
--pf-v5-c-calendar-month__dates-cell--before--Top --pf-v5-c-calendar-month__dates-cell--PaddingTop 0.125rem | ||||
| .pf-v5-c-calendar-month__dates-cell.pf-m-current | --pf-v5-c-calendar-month__date--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-calendar-month__date--BackgroundColor --pf-v5-c-calendar-month__dates-cell--m-current__date--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-calendar-month__dates-cell.pf-m-in-range | --pf-v5-c-calendar-month__dates-cell--before--BackgroundColor | #e7f1fa | ||
--pf-v5-c-calendar-month__dates-cell--before--BackgroundColor --pf-v5-c-calendar-month__dates-cell--m-in-range--before--BackgroundColor --pf-v5-global--palette--blue-50 $pf-v5-color-blue-50 #e7f1fa | ||||
| .pf-v5-c-calendar-month__dates-cell.pf-m-in-range | --pf-v5-c-calendar-month__date--hover--BackgroundColor | #bee1f4 | ||
--pf-v5-c-calendar-month__date--hover--BackgroundColor --pf-v5-c-calendar-month__dates-cell--m-in-range__date--hover--BackgroundColor --pf-v5-global--palette--blue-100 $pf-v5-color-blue-100 #bee1f4 | ||||
| .pf-v5-c-calendar-month__dates-cell.pf-m-in-range | --pf-v5-c-calendar-month__date--focus--BackgroundColor | #bee1f4 | ||
--pf-v5-c-calendar-month__date--focus--BackgroundColor --pf-v5-c-calendar-month__dates-cell--m-in-range__date--focus--BackgroundColor --pf-v5-global--palette--blue-100 $pf-v5-color-blue-100 #bee1f4 | ||||
| .pf-v5-c-calendar-month__dates-cell.pf-m-start-range | --pf-v5-c-calendar-month__dates-cell--before--Left | 50% | ||
--pf-v5-c-calendar-month__dates-cell--before--Left --pf-v5-c-calendar-month__dates-cell--m-in-range--m-start-range--before--Left 50% | ||||
| .pf-v5-c-calendar-month__dates-cell.pf-m-end-range | --pf-v5-c-calendar-month__dates-cell--before--Right | 50% | ||
--pf-v5-c-calendar-month__dates-cell--before--Right --pf-v5-c-calendar-month__dates-cell--m-in-range--m-end-range--before--Right 50% | ||||
| .pf-v5-c-calendar-month__dates-cell.pf-m-adjacent-month | --pf-v5-c-calendar-month__date--Color | #6a6e73 | ||
--pf-v5-c-calendar-month__date--Color --pf-v5-c-calendar-month__dates-cell--m-adjacent-month__date--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-calendar-month__dates-cell.pf-m-selected | --pf-v5-c-calendar-month__date--BackgroundColor | #06c | ||
--pf-v5-c-calendar-month__date--BackgroundColor --pf-v5-c-calendar-month__dates-cell--m-selected__date--BackgroundColor --pf-v5-global--active-color--100 $pf-v5-global--active-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-calendar-month__dates-cell.pf-m-selected | --pf-v5-c-calendar-month__date--hover--BackgroundColor | #06c | ||
--pf-v5-c-calendar-month__date--hover--BackgroundColor --pf-v5-c-calendar-month__dates-cell--m-selected__date--hover--BackgroundColor --pf-v5-global--active-color--100 $pf-v5-global--active-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-calendar-month__dates-cell.pf-m-selected | --pf-v5-c-calendar-month__date--focus--BackgroundColor | #004080 | ||
--pf-v5-c-calendar-month__date--focus--BackgroundColor --pf-v5-c-calendar-month__dates-cell--m-selected__date--focus--BackgroundColor --pf-v5-global--primary-color--200 $pf-v5-global--primary-color--200 $pf-v5-color-blue-500 #004080 | ||||
| .pf-v5-c-calendar-month__dates-cell.pf-m-selected | --pf-v5-c-calendar-month__date--focus--after--BorderColor | #004080 | ||
--pf-v5-c-calendar-month__date--focus--after--BorderColor --pf-v5-c-calendar-month__dates-cell--m-selected__date--focus--after--BorderColor --pf-v5-global--primary-color--200 $pf-v5-global--primary-color--200 $pf-v5-color-blue-500 #004080 | ||||
| .pf-v5-c-calendar-month__dates-cell.pf-m-selected | --pf-v5-c-calendar-month__date--focus--BoxShadow | 0 0 0.3125rem #06c | ||
--pf-v5-c-calendar-month__date--focus--BoxShadow --pf-v5-c-calendar-month__dates-cell--m-selected__date--focus--BoxShadow 0 0 0.3125rem --pf-v5-global--primary-color--100 0 0 0.3125rem $pf-v5-global--primary-color--100 0 0 0.3125rem $pf-v5-color-blue-400 0 0 0.3125rem #06c | ||||
| .pf-v5-c-calendar-month__dates-cell.pf-m-selected | --pf-v5-c-calendar-month__date--Color | #fff | ||
--pf-v5-c-calendar-month__date--Color --pf-v5-c-calendar-month__dates-cell--m-selected__date--Color --pf-v5-global--Color--light-100 $pf-v5-global--Color--light-100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-calendar-month__dates-cell.pf-m-disabled | --pf-v5-c-calendar-month__dates-cell--before--BackgroundColor | transparent | ||
| .pf-v5-c-calendar-month__dates-cell.pf-m-disabled | --pf-v5-c-calendar-month__date--BackgroundColor | transparent | ||
| .pf-v5-c-calendar-month__date:hover | --pf-v5-c-calendar-month__date--BackgroundColor | #e7f1fa | ||
--pf-v5-c-calendar-month__date--BackgroundColor --pf-v5-c-calendar-month__date--hover--BackgroundColor --pf-v5-global--palette--blue-50 $pf-v5-color-blue-50 #e7f1fa | ||||
| .pf-v5-c-calendar-month__date:focus | --pf-v5-c-calendar-month__date--BackgroundColor | #e7f1fa | ||
--pf-v5-c-calendar-month__date--BackgroundColor --pf-v5-c-calendar-month__date--focus--BackgroundColor --pf-v5-global--palette--blue-50 $pf-v5-color-blue-50 #e7f1fa | ||||
| .pf-v5-c-calendar-month__date:focus | --pf-v5-c-calendar-month__date--after--BorderColor | #06c | ||
--pf-v5-c-calendar-month__date--after--BorderColor --pf-v5-c-calendar-month__date--focus--after--BorderColor --pf-v5-global--active-color--100 $pf-v5-global--active-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-calendar-month__date:disabled | --pf-v5-c-calendar-month__date--Color | #d2d2d2 | ||
--pf-v5-c-calendar-month__date--Color --pf-v5-c-calendar-month__date--disabled--Color --pf-v5-global--disabled-color--200 $pf-v5-global--disabled-color--200 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-calendar-month__date:disabled | --pf-v5-c-calendar-month__date--hover--focus--BorderColor | transparent | ||
View source on GitHub
