framework7/components/calendar/calendar-rtl.css

Full featured mobile HTML framework for building iOS & Android apps

:root{--f7-calendar-height:340px;--f7-calendar-sheet-landscape-height:220px;--f7-calendar-popover-width:320px;--f7-calendar-popover-height:320px;--f7-calendar-modal-height:420px;--f7-calendar-modal-max-width:380px;--f7-calendar-week-header-bg-color:transparent;--f7-calendar-footer-padding:0 8px;--f7-calendar-week-header-font-size:11px;--f7-calendar-disabled-text-color:#d4d4d4;--f7-calendar-event-dot-size:4px;--f7-calendar-time-selector-height:28px;--f7-calendar-picker-pressed-bg-color:rgba(0, 0, 0, 0.1);--f7-calendar-picker-hover-bg-color:rgba(0, 0, 0, 0.03);--f7-calendar-time-selector-bg-color:rgba(0, 0, 0, 0.05)}:root .dark,:root.dark{--f7-calendar-picker-pressed-bg-color:rgba(255, 255, 255, 0.08);--f7-calendar-picker-hover-bg-color:rgba(255, 255, 255, 0.03);--f7-calendar-time-selector-bg-color:rgba(255, 255, 255, 0.1)}.ios{--f7-calendar-selected-text-color:#fff;--f7-calendar-header-height:44px;--f7-calendar-header-font-size:17px;--f7-calendar-header-font-weight:600;--f7-calendar-header-padding:0 8px;--f7-calendar-footer-height:44px;--f7-calendar-footer-font-size:17px;--f7-calendar-week-header-height:18px;--f7-calendar-day-font-size:15px;--f7-calendar-day-size:30px;--f7-calendar-picker-font-size:17px;--f7-calendar-time-selector-font-size:17px;--f7-calendar-modal-border-radius:4px;--f7-calendar-modal-box-shadow:0px 11px 15px -7px rgba(0, 0, 0, 0.2),0px 24px 38px 3px rgba(0, 0, 0, 0.14),0px 9px 46px 8px rgba(0, 0, 0, 0.12);--f7-calendar-prev-next-text-color:#c8c8c8;--f7-calendar-sheet-border-color:#929499;--f7-calendar-sheet-bg-color:#fff;--f7-calendar-week-header-text-color:#5e5e5e;--f7-calendar-modal-bg-color:#fff;--f7-calendar-day-text-color:#000;--f7-calendar-today-text-color:#000;--f7-calendar-today-bg-color:#e3e3e3}.ios .dark,.ios.dark{--f7-calendar-prev-next-text-color:#5e5e5e;--f7-calendar-sheet-border-color:var(--f7-bars-border-color);--f7-calendar-sheet-bg-color:#121212;--f7-calendar-week-header-text-color:#aaa;--f7-calendar-modal-bg-color:#121212;--f7-calendar-day-text-color:#fff;--f7-calendar-today-text-color:#fff;--f7-calendar-today-bg-color:#333}.md{--f7-calendar-sheet-border-color:transparent;--f7-calendar-header-height:64px;--f7-calendar-header-font-size:24px;--f7-calendar-header-font-weight:400;--f7-calendar-header-padding:0 24px;--f7-calendar-footer-height:56px;--f7-calendar-footer-font-size:14px;--f7-calendar-week-header-height:24px;--f7-calendar-day-font-size:14px;--f7-calendar-today-bg-color:none;--f7-calendar-day-size:32px;--f7-calendar-picker-font-size:14px;--f7-calendar-time-selector-font-size:14px;--f7-calendar-modal-border-radius:28px;--f7-calendar-modal-box-shadow:none}.md,.md .dark,.md [class*=color-]{--f7-calendar-sheet-bg-color:var(--f7-md-surface-1);--f7-calendar-selected-text-color:var(--f7-md-on-primary);--f7-calendar-week-header-text-color:var(--f7-md-on-surface-variant);--f7-calendar-day-text-color:var(--f7-md-on-surface);--f7-calendar-prev-next-text-color:rgba(var(--f7-md-on-surface-variant-rgb), 0.55);--f7-calendar-today-text-color:var(--f7-theme-color);--f7-calendar-modal-bg-color:var(--f7-md-surface-1)}.calendar{overflow:hidden;height:var(--f7-calendar-height);width:100%;display:flex;flex-direction:column}.calendar.modal-in{display:flex}@media (orientation:landscape) and (max-height:415px){.calendar.calendar-sheet{height:var(--f7-calendar-sheet-landscape-height)}.calendar.calendar-modal{height:calc(100vh - var(--f7-navbar-height))}}.calendar.calendar-inline,.calendar.calendar-popover .calendar{position:relative}.calendar-sheet{--f7-sheet-border-color:var(--f7-calendar-sheet-border-color);background:var(--f7-calendar-sheet-bg-color);padding-bottom:var(--f7-safe-area-bottom);height:calc(var(--f7-calendar-height) + var(--f7-safe-area-bottom))}.calendar-sheet:before{z-index:600}.calendar-modal .toolbar:before,.calendar-popover .toolbar:before,.calendar-sheet .toolbar:before{display:none}.calendar-popover{width:var(--f7-calendar-popover-width)}.calendar-popover .calendar-header,.calendar-popover .toolbar-top{border-radius:var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0;overflow:hidden}.calendar-popover .calendar-header+.toolbar-top{border-radius:0}.calendar-popover .calendar-footer,.calendar-popover .toolbar-bottom{border-radius:0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius)}.calendar-popover .calendar{height:var(--f7-calendar-popover-height);position:relative;z-index:1}.calendar-popover .calendar-month-picker,.calendar-popover .calendar-time-picker,.calendar-popover .calendar-year-picker{border-radius:var(--f7-popover-border-radius)}.calendar-popover .calendar-month-picker .picker,.calendar-popover .calendar-time-picker .picker,.calendar-popover .calendar-year-picker .picker{height:100%;display:flex;flex-direction:column}.calendar-header{width:100%;position:relative;overflow:hidden;flex-shrink:0;white-space:nowrap;text-overflow:ellipsis;box-sizing:border-box;padding:var(--f7-calendar-header-padding);background-color:var(--f7-calendar-header-bg-color,var(--f7-bars-bg-color));color:var(--f7-calendar-header-text-color,var(--f7-bars-text-color));height:var(--f7-calendar-header-height);line-height:var(--f7-calendar-header-height);font-size:var(--f7-calendar-header-font-size);font-weight:var(--f7-calendar-header-font-weight)}.calendar-header a{color:var(--f7-calendar-header-link-color,var(--f7-bars-link-color,var(--f7-theme-color)))}.calendar-footer{width:100%;flex-shrink:0;padding:var(--f7-calendar-footer-padding);background-color:var(--f7-calendar-footer-bg-color,var(--f7-bars-bg-color));color:var(--f7-calendar-footer-text-color,var(--f7-bars-text-color));height:var(--f7-calendar-footer-height);font-size:var(--f7-calendar-header-font-size);display:flex;justify-content:flex-end;box-sizing:border-box;align-items:center;position:relative}.calendar-footer a{color:var(--f7-calendar-footer-link-color,var(--f7-bars-link-color,var(--f7-theme-color)))}.calendar-footer:before{content:'';position:absolute;background-color:var(--f7-calendar-footer-border-color,var(--f7-bars-border-color));display:block;z-index:15;top:0;right:auto;bottom:auto;left:0;height:1px;width:100%;transform-origin:50% 0%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.calendar-modal{position:absolute;height:var(--f7-calendar-modal-height);overflow:hidden;top:50%;left:50%;min-width:300px;max-width:var(--f7-calendar-modal-max-width);transform:translate3d(-50%,100vh,0);transition-property:transform;display:flex;z-index:13500;background:var(--f7-calendar-modal-bg-color);width:90%;border-radius:var(--f7-calendar-modal-border-radius);box-shadow:var(--f7-calendar-modal-box-shadow);transition-timing-function:cubic-bezier(0,1,0.2,1)}.calendar-modal.modal-in,.calendar-modal.modal-out{transition-duration:.4s}.calendar-modal.modal-in{transform:translate3d(-50%,-50%,0)}.calendar-modal.modal-out{transform:translate3d(-50%,100vh,0)}.calendar-week-header{display:flex;box-sizing:border-box;position:relative;font-size:var(--f7-calendar-week-header-font-size);background-color:var(--f7-calendar-week-header-bg-color,var(--f7-bars-bg-color));color:var(--f7-calendar-week-header-text-color,var(--f7-bars-text-color));height:var(--f7-calendar-week-header-height);padding-left:var(--f7-safe-area-left);padding-right:var(--f7-safe-area-right)}.calendar-week-header .calendar-week-day{flex-shrink:1;width:calc(100% / 7);text-align:center;line-height:var(--f7-calendar-week-header-height)}.calendar-months{width:100%;height:100%;overflow:hidden;position:relative;flex-shrink:10}.calendar-months-wrapper{position:relative;width:100%;height:100%;transition:.3s}.calendar-month{display:flex;flex-direction:column;width:100%;height:100%;position:absolute;left:0;top:0}.calendar-row{height:16.66666667%;display:flex;flex-shrink:1;width:100%;position:relative;box-sizing:border-box;padding-left:var(--f7-safe-area-left);padding-right:var(--f7-safe-area-right)}.calendar-modal .calendar-months:first-child .calendar-row:first-child:before,.calendar-popover .calendar-months:first-child .calendar-row:first-child:before{display:none!important}.calendar-day{flex-shrink:1;display:flex;justify-content:center;align-items:center;box-sizing:border-box;width:14.28571429%;text-align:center;cursor:pointer;z-index:20;color:var(--f7-calendar-day-text-color);height:100%;font-size:var(--f7-calendar-day-font-size)}.calendar-day-today .calendar-day-number{color:var(--f7-calendar-today-text-color,var(--f7-theme-color));background-color:var(--f7-calendar-today-bg-color)}.calendar-day-next,.calendar-day-prev{color:var(--f7-calendar-prev-next-text-color)}.calendar-day-disabled{color:var(--f7-calendar-disabled-text-color);cursor:auto}.calendar-day-selected .calendar-day-number{color:var(--f7-calendar-selected-text-color);background-color:var(--f7-calendar-selected-bg-color,var(--f7-theme-color))}.calendar-day-number{display:inline-block;border-radius:50%;position:relative;width:var(--f7-calendar-day-size);height:var(--f7-calendar-day-size);line-height:var(--f7-calendar-day-size)}.calendar-day-events{position:absolute;display:flex;left:0;width:100%;top:100%;align-items:center;justify-content:center;margin-top:1px}.calendar-day-event{width:var(--f7-calendar-event-dot-size);height:var(--f7-calendar-event-dot-size);border-radius:calc(var(--f7-calendar-event-dot-size)/ 2);background-color:var(--f7-calendar-event-bg-color)}.calendar-day-event+.calendar-day-event{margin-left:2px}.calendar-day-selected-left,.calendar-day-selected-range,.calendar-day-selected-right{position:relative}.calendar-day-selected-left:before,.calendar-day-selected-range:before,.calendar-day-selected-right:before{width:100%;height:var(--f7-calendar-day-size);content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);z-index:-1;background-color:var(--f7-calendar-selected-bg-color,var(--f7-theme-color));opacity:.2}.calendar-day-selected-left:before,.calendar-day-selected-range:first-child:before{left:auto;right:0;width:calc(50% + var(--f7-calendar-day-size)/ 2);border-radius:var(--f7-calendar-day-size) 0 0 var(--f7-calendar-day-size)}.calendar-day-selected-range:last-child:before,.calendar-day-selected-right:before{width:calc(50% + var(--f7-calendar-day-size)/ 2);border-radius:0 var(--f7-calendar-day-size) var(--f7-calendar-day-size) 0}.calendar-day-selected-left:last-child:before,.calendar-day-selected-right:first-child:before{display:none}.calendar-day-selected-left.calendar-day-selected-right:before{content:none;display:none}.calendar-day-selected-range .calendar-day-number{background-color:transparent;color:inherit}.calendar-month-selector,.calendar-year-selector{display:flex;justify-content:space-between;align-items:center;width:50%;max-width:200px;flex-shrink:10;margin-left:auto;margin-right:auto}.calendar-month-selector .calendar-day-number,.calendar-year-selector .calendar-day-number{flex-shrink:1;position:relative;overflow:hidden;text-overflow:ellipsis}.calendar-month-selector a.icon-only,.calendar-year-selector a.icon-only{min-width:36px}.calendar-month-picker,.calendar-time-picker,.calendar-year-picker{position:relative;width:100%;height:100%;-webkit-user-select:none;user-select:none;background:0 0}.calendar-month-picker .picker-columns,.calendar-year-picker .picker-columns{text-align:center}.calendar-month-picker-item,.calendar-year-picker-item{display:flex;justify-content:center;align-items:center;position:relative;overflow:hidden;cursor:pointer;transition-duration:.1s;box-sizing:border-box}.calendar-month-picker-item span,.calendar-year-picker-item span{white-space:nowrap;text-overflow:ellipsis;box-sizing:border-box;position:relative;overflow:hidden;pointer-events:none}.calendar-month-picker-item.active-state,.calendar-year-picker-item.active-state{background:var(--f7-calendar-picker-pressed-bg-color)}.calendar-month-picker-item{padding:5px}.sheet-modal .calendar-month-picker-item{width:25%;height:33.33333333%}.sheet-modal .calendar-month-picker-item:nth-child(4n+1):before{display:none!important}.sheet-modal .calendar-month-picker-item:nth-child(n+9):after{display:none!important}.calendar-modal .calendar-month-picker-item,.popover .calendar-month-picker-item{width:33.33333333%;height:25%}.calendar-modal .calendar-month-picker-item:nth-child(3n+1):before,.popover .calendar-month-picker-item:nth-child(3n+1):before{display:none!important}.calendar-modal .calendar-month-picker-item:nth-child(n+10):after,.popover .calendar-month-picker-item:nth-child(n+10):after{display:none!important}.calendar-month-picker-item-current,.calendar-year-picker-item-current{color:var(--f7-calendar-picker-selected-text-color,var(--f7-theme-color))}.calendar-year-picker{overflow:auto;--webkit-overflow-scrolling:touch}.calendar-year-picker-item{height:34px;line-height:34px;width:100%}.calendar-time-selector{flex-shrink:0;font-size:var(--f7-calendar-time-selector-font-size);position:relative;display:flex;justify-content:space-between;align-items:center;padding:12px 16px}.calendar-time-selector a{overflow:hidden;position:relative;justify-content:center;align-items:center;display:flex;box-sizing:border-box;height:var(--f7-calendar-time-selector-height);background-color:var(--f7-calendar-time-selector-bg-color);padding:0 16px;border-radius:8px}.calendar-time-selector>span{font-weight:500}.calendar-time-selector .segmented{margin-left:8px}.calendar-month-picker-popover,.calendar-time-picker-popover,.calendar-year-picker-popover{height:240px;width:240px}.calendar-month-picker-popover .popover-inner,.calendar-time-picker-popover .popover-inner,.calendar-year-picker-popover .popover-inner{height:100%;overflow:hidden}.calendar-time-picker{--f7-picker-popover-height:100%;--f7-picker-inline-height:100%}.calendar-time-picker .toolbar{flex-shrink:0;top:0!important}.calendar-time-picker .picker{height:100%;display:flex;flex-direction:column}