mekari-ui-toolkit
Version:
Mekari ui toolkit
1 lines • 5.76 kB
Source Map (JSON)
{"version":3,"sources":["../../../scss/components/config/_date-picker.scss"],"names":[],"mappings":"AAAA,uBACE,SAAA,SACA,QAAA,GACA,MAAA,MACA,OAAA,KAGF,2BAAA,2BACE,SAAA,SACA,MAAA,MACA,QAAA,EAAA,KACA,iBAAA,KACA,gBAAA,WACA,OAAA,IAAA,MAAA,QACA,cAAA,IACA,WAAA,EAAA,IAAA,IAAA,EAAA,oBAAA,CAAA,EAAA,IAAA,IAAA,EAAA,qBAGF,2BAEE,OAAA,KACA,WAAA,MAGF,2BAEE,OAAA,KACA,WAAA,MAGF,oBACE,QAAA,KACA,YAAA,OACA,OAAA,KACA,WAAA,OAGF,0BACE,UAAA,EACA,YAAA,IACA,OAAA,QAGF,6BACE,UAAA,EACA,cAAA,KACA,WAAA,KAHF,uCAMM,OAAA,QAKN,yBACE,UAAA,EACA,aAAA,KACA,WAAA,MAHF,mCAMM,OAAA,QAKN,uEAAA,yEAAA,uEACE,cAAA,KAGA,WAAA,MAAA,EAAA,EAAA,EAAA,IAAA,QAGF,wEAAA,0EAAA,wEACE,MAAA,eACA,iBAAA,kBACA,cAAA,KAGF,wEAAA,0EAAA,wEACE,MAAA,kBACA,iBAAA,sBACA,cAAA,KAEA,8EAAA,gFAAA,8EACE,OAAA,QAIJ,gEAAA,iEAAA,gEAAA,gEACE,MAAA,QACA,OAAA,QACA,iBAAA,QACA,cAAA,KAGA,WAAA,KAGF,iBACE,QAAA,KACA,UAAA,KAFF,mCAII,KAAA,EAAA,EAAA,EACA,OAAA,IAAA,EACA,WAAA,OANJ,0DAQM,MAAA,KACA,OAAA,KACA,OAAA,EAAA,KACA,YAAA,KAXN,2DA0BM,MAAA,KACA,OAAA,KACA,OAAA,EAAA,KACA,cAAA,KACA,YAAA,KA9BN,0DA6CM,MAAA,KACA,OAAA,KACA,OAAA,EAAA,KACA,cAAA,IACA,YAAA,KAsBN,2BACE,QAAA,KACA,cAAA,KAFF,4CAII,KAAA,EAAA,EAAA,EACA,MAAA,KACA,WAAA,OAIJ,6BACE,MAAA,MACA,QAAA,KAAA,EACA,MAAA,KACA,WAAA,OACA,OAAA,QALF,sCAOI,MAAA,QACA,OAAA,YAIJ,mBACE,WAAA,KACA,OAAA,EAGF,yBACE,QAAA","sourcesContent":[".date-picker-container {\n position: absolute;\n z-index: 11;\n width: 392px;\n height: auto;\n}\n\n%date-picker-calendar {\n position: absolute;\n width: 392px;\n padding: 0 16px;\n background-color: $white;\n background-clip: border-box;\n border: 1px solid $smoke;\n border-radius: 4px; // stylelint-disable-line property-blacklist\n box-shadow: 0 2px 4px 0 rgba($slate, .1), 0 4px 8px 0 rgba($slate, .2);\n}\n\n.date-picker-calendar-view {\n @extend %date-picker-calendar;\n height: auto;\n min-height: 284px;\n}\n\n.date-picker-collapse-view {\n @extend %date-picker-calendar;\n height: auto;\n min-height: 244px;\n}\n\n.date-picker-header {\n display: flex;\n align-items: center;\n height: 52px;\n text-align: center;\n}\n\n.date-picker-header-title {\n flex-grow: 5;\n font-weight: $font-weight-bold;\n cursor: pointer;\n}\n\n.date-picker-previous-button {\n flex-grow: 1;\n padding-right: 16px;\n text-align: left;\n .ic {\n &:hover {\n cursor: pointer;\n }\n }\n}\n\n.date-picker-next-button {\n flex-grow: 1;\n padding-left: 16px;\n text-align: right;\n .ic {\n &:hover {\n cursor: pointer;\n }\n }\n}\n\n%cell-current-state {\n border-radius: 100%; // stylelint-disable-line property-blacklist\n -webkit-box-shadow: inset 0 0 0 1px $primary; // stylelint-disable-line property-no-vendor-prefix\n -moz-box-shadow: inset 0 0 0 1px $primary; // stylelint-disable-line property-no-vendor-prefix\n box-shadow: inset 0 0 0 1px $primary;\n}\n\n%cell-selected-state {\n color: $white !important; // stylelint-disable-line declaration-no-important\n background-color: $primary !important; // stylelint-disable-line declaration-no-important\n border-radius: 100%; // stylelint-disable-line property-blacklist\n}\n\n%cell-disabled-state {\n color: $muted !important; // stylelint-disable-line declaration-no-important\n background-color: transparent !important; // stylelint-disable-line declaration-no-important\n border-radius: 100%; // stylelint-disable-line property-blacklist\n\n &:hover {\n cursor: default;\n }\n}\n\n%cell-hover {\n color: $dark;\n cursor: pointer;\n background-color: $cloud;\n border-radius: 100%; // stylelint-disable-line property-blacklist\n -webkit-box-shadow: none; // stylelint-disable-line property-no-vendor-prefix\n -moz-box-shadow: none; // stylelint-disable-line property-no-vendor-prefix\n box-shadow: none; // stylelint-disable-line property-no-vendor-prefix\n}\n\n.date-picker-row {\n display: flex;\n flex-wrap: wrap;\n .date-picker-cell {\n flex: 1 1 0;\n margin: 2px 0;\n text-align: center;\n .date-picker-date-cell {\n width: 32px;\n height: 32px;\n margin: 0 auto;\n line-height: 32px;\n &.current-date {\n @extend %cell-current-state;\n }\n &.selected-date {\n @extend %cell-selected-state;\n }\n &.disabled-date {\n @extend %cell-disabled-state;\n }\n &:hover {\n @extend %cell-hover;\n }\n }\n .date-picker-month-cell {\n width: 40px;\n height: 40px;\n margin: 0 auto;\n margin-bottom: 12px;\n line-height: 40px;\n &.current-month {\n @extend %cell-current-state;\n }\n &.selected-month {\n @extend %cell-selected-state;\n }\n &.disabled-month {\n @extend %cell-disabled-state;\n }\n &:hover {\n @extend %cell-hover;\n }\n }\n .date-picker-year-cell {\n width: 48px;\n height: 48px;\n margin: 0 auto;\n margin-bottom: 4px;\n line-height: 48px;\n &.current-year {\n @extend %cell-current-state;\n }\n &.selected-year {\n @extend %cell-selected-state;\n }\n &.disabled-year {\n @extend %cell-disabled-state;\n }\n &:hover {\n @extend %cell-hover;\n }\n }\n &:hover {\n .date-picker-date-cell {\n @extend %cell-hover;\n }\n }\n }\n}\n\n.date-picker-day-container {\n display: flex;\n margin-bottom: 16px;\n .date-picker-day {\n flex: 1 1 0;\n color: $slate;\n text-align: center;\n }\n}\n\n.date-picker-shortcut-button {\n width: 360px;\n padding: 16px 0;\n color: $slate;\n text-align: center;\n cursor: pointer;\n &.disabled {\n color: $muted;\n cursor: not-allowed;\n }\n}\n\n.date-picker-break {\n flex-basis: 100%;\n height: 0;\n}\n\n.date-picker--no-outline {\n outline: none;\n}\n"]}