@fkui/design 6.9.0 → 6.11.0

package/src/components/calendar-deprecated/_calendar-deprecated.scss

@@ -1,628 +0,0 @@
-@use "../../core/size";
-
-$CALENDAR_SELECTOR: ".calendar" !default;
-$calendar-color-highlight-primary: var(--f-background-calendar-selected) !default;
-$calendar-color-today: #666666 !default;
-$calendar-color-background-primary: var(--f-background-calendar-default) !default;
-$calendar-color-background-secondary: #fff !default;
-$calendar-color-background-hover: var(--f-background-calendar-hover) !default;
-$calendar-color-font-black: #1b1e23 !default;
-$calendar-color-border-primary: #767676 !default;
-$calendar-color-border-secondary: #dddddd !default;
-$calendar-color-border-tertiary: #adadad !default;
-$calendar-color-monthitem-circle: #ccc !default;
-$calendar-color-dayitem-line: #99a2a2 !default;
-$calendar-color-link: var(--f-text-color-link) !default;
-$calendar-color-button-icon: var(--f-icon-color-primary) !default;
-$calendar-color-tabs-selected: var(--f-background-tab-active) !default;
-$calendar-color-tabs-unselected: var(--f-background-tab-inactive) !default;
-$calendar-font-size: var(--f-font-size-standard) !default;
-$calendar-font-size-small: 0.875rem !default;
-$calendar-font-size-big: 1.125rem !default;
-$calendar-font-size-added-day: 3rem !default;
-$calendar-size-addedday-padding: 2.5rem !default;
-$calendar-size-day: 2.75rem !default;
-$calendar-size-day-responsive: 15% !default;
-$calendar-size-number-circle: 1.6rem !default;
-$calendar-size-month-item: 33% !default;
-$calendar-size-padding: 0.25rem !default;
-$calendar-size-padding-period: 1rem !default;
-$calendar-size-padding-editbox: 1rem !default;
-$calendar-size-padding-navbar: 0.5rem !default;
-$calendar-size-calendar-margin-day: 0.05rem !default;
-$calendar-size-calendar-margin-month: 0.25rem !default;
-$calendar-size-tab-height: 4rem !default;
-$calendar-size-addedmonth-padding: 0.75rem !default;
-$calendar-size-daycount-padding: 1.5rem !default;
-$calendar-border-size: 1px !default;
-$calendar-editbox-border-size: 2px !default;
-$calendar-editbox-border-size-arrow: calc(#{$calendar-editbox-border-size} + 1px) !default;
-$calendar-border-size-middle: 2px !default;
-$calendar-border-size-item: 2px !default;
-$calendar-border-size-radius: 6px !default;
-$calendar-arrow-size: 1.75rem !default;
-$calendar-device-sm: 460px !default;
-
-#{$CALENDAR_SELECTOR} {
-    font-size: $calendar-font-size;
-    display: inline-block;
-    width: 100%;
-    max-width: 27.5rem;
-
-    &__container {
-        background: $calendar-color-background-secondary;
-        margin-bottom: 1.5rem;
-    }
-
-    button:focus {
-        z-index: 2;
-    }
-
-    &__tabs {
-        position: relative;
-        height: $calendar-size-tab-height;
-        padding: 0;
-        margin: 0;
-        list-style: none;
-
-        &-tab {
-            width: calc(50% + #{$calendar-border-size});
-            color: $calendar-color-button-icon;
-            font-size: $calendar-font-size;
-            font-weight: bold;
-            border: $calendar-border-size solid $calendar-color-border-primary;
-            height: 100%;
-            position: absolute;
-            background: $calendar-color-tabs-unselected;
-            .button__icon {
-                width: #{$calendar-arrow-size};
-                height: #{$calendar-arrow-size};
-                margin-right: calc(#{$calendar-font-size} / 2);
-            }
-
-            .button__icon,
-            span {
-                display: inline-block;
-                vertical-align: middle;
-            }
-
-            span {
-                max-width: 7rem;
-                text-align: left;
-            }
-
-            &--left {
-                left: 0;
-                box-shadow: inset -3px -1px 5px $calendar-color-border-tertiary;
-            }
-            &--right {
-                right: 0;
-                box-shadow: inset 3px -1px 5px $calendar-color-border-tertiary;
-            }
-
-            &--selected {
-                background: $calendar-color-tabs-selected;
-                z-index: 1;
-                border-bottom: 0;
-                box-shadow: unset;
-            }
-        }
-    }
-
-    &__period {
-        border: $calendar-border-size solid $calendar-color-border-primary;
-        border-top: 0;
-        padding: $calendar-size-padding-period;
-    }
-
-    &__navbar {
-        text-align: center;
-        border-right: $calendar-border-size solid $calendar-color-border-primary;
-        border-left: $calendar-border-size solid $calendar-color-border-primary;
-        border-bottom-color: $calendar-color-border-secondary;
-        position: relative;
-
-        button,
-        .button {
-            font-size: 100%;
-            border: 0;
-            background-color: transparent;
-
-            &:hover,
-            &:focus {
-                color: $calendar-color-border-primary;
-                background-color: transparent;
-            }
-        }
-
-        &-middle {
-            padding: calc(#{$calendar-size-padding-navbar} * 2);
-            position: relative;
-            color: $calendar-color-link;
-
-            span {
-                font-size: $calendar-font-size-big;
-                font-weight: bold;
-                border-bottom: $calendar-border-size-middle solid;
-                padding-bottom: $calendar-border-size-middle;
-                transition: all 0.15s ease-in-out;
-
-                &:hover {
-                    padding-bottom: calc(#{$calendar-border-size-middle} * 2);
-                }
-            }
-        }
-
-        &-arrow {
-            color: $calendar-color-border-primary;
-            position: absolute;
-            padding: 0 $calendar-size-padding-navbar;
-            height: 100%;
-
-            span,
-            .button__icon {
-                display: inline-block;
-                vertical-align: middle;
-            }
-
-            .button__icon {
-                color: $calendar-color-button-icon;
-                width: #{$calendar-arrow-size};
-                height: #{$calendar-arrow-size};
-            }
-
-            &--left {
-                left: 0;
-                text-align: left;
-
-                .button__icon {
-                    transform: rotate(180deg);
-                }
-            }
-
-            &--right {
-                right: 0;
-                text-align: right;
-            }
-        }
-    }
-
-    &__monthview,
-    &__yearview {
-        padding: $calendar-size-padding;
-        border: $calendar-border-size solid $calendar-color-border-primary;
-        border-top: 0;
-    }
-
-    &__row {
-        display: flex;
-        button,
-        .button {
-            &:focus,
-            &:hover {
-                color: #1b1e23;
-            }
-
-            &:focus {
-                background-color: $calendar-color-background-primary;
-            }
-
-            &:hover {
-                background-color: $calendar-color-background-hover;
-            }
-
-            &.calendar__item--added {
-                &:focus {
-                    background-color: $calendar-color-highlight-primary;
-                    color: $calendar-color-background-primary;
-                }
-            }
-
-            &.calendar__item--selected {
-                &:focus {
-                    background-color: #fff;
-                    color: $calendar-color-highlight-primary;
-                }
-            }
-
-            &.calendar__item--added,
-            &.calendar__item--selected {
-                &:hover {
-                    background-color: $calendar-color-background-hover;
-                    color: $calendar-color-highlight-primary;
-                }
-            }
-        }
-    }
-
-    &__item {
-        height: $calendar-size-day;
-        width: $calendar-size-day-responsive;
-        margin: $calendar-size-calendar-margin-day;
-        padding: 0;
-        border: $calendar-border-size-item solid transparent;
-    }
-
-    &__item--week {
-        background-color: transparent;
-        border: 0 solid transparent;
-        font-size: $calendar-font-size;
-        text-align: center;
-        line-height: $calendar-size-day;
-    }
-
-    &__item--date {
-        color: $calendar-color-font-black;
-        background-color: $calendar-color-background-primary;
-        font-weight: bold;
-        font-size: $calendar-font-size;
-        position: relative;
-
-        &:hover {
-            background-color: $calendar-color-background-hover;
-        }
-    }
-
-    &__item--today {
-        .calendar__item__number {
-            background: $calendar-color-today;
-            color: $calendar-color-background-primary;
-            display: inline-block;
-            width: $calendar-size-number-circle;
-            line-height: $calendar-size-number-circle;
-            border-radius: $calendar-size-number-circle;
-        }
-
-        &.calendar__item--added,
-        &.calendar__item--selected {
-            .calendar__item__number {
-                width: calc(#{$calendar-size-number-circle} + 0.2rem);
-            }
-        }
-
-        &.calendar__item--added .calendar__item__number {
-            background: $calendar-color-highlight-primary;
-            border: $calendar-border-size-item solid $calendar-color-background-secondary;
-        }
-
-        &.calendar__item--selected .calendar__item__number {
-            background: $calendar-color-background-secondary;
-            color: $calendar-color-highlight-primary;
-            border: $calendar-border-size-item solid $calendar-color-highlight-primary;
-        }
-    }
-
-    &__item--added {
-        background-color: $calendar-color-highlight-primary;
-        color: $calendar-color-background-primary;
-
-        &:hover {
-            border-color: $calendar-color-highlight-primary;
-            color: $calendar-color-highlight-primary;
-        }
-    }
-
-    &__item--selected {
-        background-color: $calendar-color-background-secondary;
-        border-color: $calendar-color-highlight-primary;
-        color: $calendar-color-highlight-primary;
-    }
-
-    &__item--disabled {
-        color: $calendar-color-border-primary;
-        cursor: not-allowed;
-
-        &::before {
-            content: "";
-            position: absolute;
-            border-top: $calendar-border-size-item solid $calendar-color-dayitem-line;
-            top: 50%;
-            margin-left: 25%;
-            width: 50%;
-            left: 0;
-        }
-    }
-
-    &__item--disabled:hover {
-        background-color: $calendar-color-background-primary;
-    }
-
-    &__editbox {
-        border: $calendar-editbox-border-size solid $calendar-color-border-primary;
-        border-radius: $calendar-border-size-radius;
-        position: relative;
-        background-color: white;
-        margin-bottom: 1.5rem;
-
-        &::before,
-        &::after {
-            content: "";
-            display: block;
-            position: absolute;
-            left: calc(50% - 1rem);
-            width: 0;
-            height: 0;
-            border: $calendar-size-padding-editbox solid transparent;
-        }
-
-        &::before {
-            bottom: 100%;
-            border-bottom-color: $calendar-color-border-primary;
-        }
-
-        &::after {
-            bottom: calc(100% - #{$calendar-editbox-border-size-arrow});
-            border-bottom-color: $calendar-color-background-secondary;
-        }
-
-        &-header {
-            text-align: center;
-            border-bottom: $calendar-border-size solid $calendar-color-border-primary;
-            padding: 1.5rem;
-        }
-
-        &-content {
-            padding: $calendar-size-padding-editbox;
-        }
-    }
-
-    &-submit-button {
-        margin-top: calc(#{$calendar-size-padding-editbox} * 2);
-        margin-bottom: $calendar-size-padding-editbox;
-    }
-
-    &__month-item {
-        color: $calendar-color-font-black;
-        background-color: $calendar-color-background-primary;
-        border: $calendar-border-size-item solid transparent;
-        font-weight: bold;
-        font-size: $calendar-font-size-small;
-        width: $calendar-size-month-item;
-        height: $calendar-size-day;
-        margin: $calendar-size-calendar-margin-month;
-        padding: $calendar-size-padding calc(#{$calendar-size-padding} * 2);
-        display: inline-block;
-        text-align: left;
-
-        &:hover {
-            background-color: $calendar-color-background-hover;
-        }
-    }
-
-    &__month-item--name {
-        float: left;
-        text-align: center;
-        line-height: $calendar-size-number-circle;
-
-        &-sm {
-            display: none;
-        }
-    }
-
-    &__month-item--days {
-        float: right;
-        background: $calendar-color-monthitem-circle;
-        text-align: center;
-        width: $calendar-size-number-circle;
-        line-height: $calendar-size-number-circle;
-        border-radius: $calendar-size-number-circle;
-    }
-
-    &__month-item--has-days {
-        border: $calendar-border-size-item solid $calendar-color-highlight-primary;
-        color: $calendar-color-highlight-primary;
-
-        .calendar__month-item--days {
-            background: $calendar-color-highlight-primary;
-            color: white;
-        }
-    }
-
-    &__addedmonth-wrapper {
-        background-color: $calendar-color-background-secondary;
-        border-radius: $calendar-border-size-radius;
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-    }
-
-    &__addedmonth {
-        border-top: $calendar-border-size solid $calendar-color-border-primary;
-        &-header {
-            display: flex;
-            flex-wrap: wrap;
-            padding: 0.5rem;
-            &-edit {
-                margin-left: auto;
-            }
-
-            &-expand {
-                margin-right: auto;
-                font-size: 1rem;
-                background: none;
-                border: none;
-                cursor: pointer;
-
-                &:hover,
-                &:focus {
-                    background-color: #fff;
-                }
-            }
-
-            &-expand-icon {
-                display: inline-block;
-                position: relative;
-                width: 2rem;
-                height: 2rem;
-                border-radius: 50%;
-                background-color: $calendar-color-highlight-primary;
-                box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-
-                &::before,
-                &::after {
-                    content: " ";
-                    display: block;
-                    position: absolute;
-                    top: 50%;
-                    left: 50%;
-                    transform: translate(-50%, -50%);
-                    background-color: #fff;
-                }
-
-                &::before {
-                    width: 1rem;
-                    height: 0.125rem;
-                    transition: all 0.5s ease;
-                }
-
-                &::after {
-                    width: 1rem;
-                    height: 0.125rem;
-                }
-            }
-
-            &-expand-text {
-                color: $calendar-color-font-black;
-                display: inline-block;
-                font-weight: normal;
-                padding-left: $calendar-size-padding;
-                text-align: left;
-            }
-
-            &-expand-days {
-                display: block;
-                font-weight: bold;
-            }
-        }
-
-        &-collapsable {
-            display: block;
-            height: auto;
-            transition: height 0.4s cubic-bezier(0.46, 0.03, 0.52, 0.96);
-        }
-
-        &--collapsed {
-            .calendar__addedmonth-header-expand-icon::before {
-                transform: translate(-50%, -50%) rotate(90deg);
-            }
-
-            .calendar__addedmonth-collapsable {
-                overflow: hidden;
-                height: 0;
-            }
-        }
-
-        .button--discrete {
-            margin-bottom: 0;
-        }
-
-        .button__icon {
-            color: $calendar-color-link;
-        }
-    }
-
-    &__addedmonth:first-child {
-        border-top: none;
-    }
-
-    &__addedsummary {
-        margin-bottom: size.$margin-150;
-
-        &-days {
-            text-align: center;
-            background-color: $calendar-color-background-secondary;
-            padding: size.$padding-150;
-            margin-bottom: size.$margin-150;
-            border-radius: $calendar-border-size-radius;
-            font-size: $calendar-font-size-big;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-        }
-    }
-
-    &__addedday {
-        border-top: $calendar-border-size solid $calendar-color-border-tertiary;
-        position: relative;
-        width: 100%;
-        display: flex;
-
-        &-date {
-            background-color: $calendar-color-background-primary;
-            color: $calendar-color-highlight-primary;
-            text-align: center;
-            padding: 10px;
-            min-width: 90px;
-
-            &-day {
-                font-weight: bold;
-                font-size: $calendar-font-size-added-day;
-            }
-        }
-
-        &-content {
-            padding: 0.5rem;
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-        }
-
-        &-text {
-            margin-bottom: 1rem;
-        }
-    }
-
-    &__addedmonth-collapsable > div:first-child .calendar__addedday {
-        border-top: $calendar-border-size solid $calendar-color-border-primary;
-    }
-
-    &__collapsed {
-        visibility: hidden;
-    }
-
-    @media (max-width: $calendar-device-sm) {
-        &__tabs {
-            height: calc(#{$calendar-size-tab-height} + 1rem);
-
-            &-tab {
-                span {
-                    text-align: center;
-                }
-            }
-        }
-
-        &__monthview,
-        &__yearview {
-            padding: 0;
-        }
-
-        &__item--week:first-child {
-            display: none;
-        }
-
-        &__month-item--name-lg {
-            display: none;
-        }
-        &__month-item--name-sm {
-            display: inline-block;
-        }
-    }
-
-    @media (max-width: 355px) {
-        &__tabs {
-            height: calc(#{$calendar-size-tab-height} + 2rem);
-        }
-
-        &__navbar-arrow--month {
-            span {
-                display: none;
-            }
-        }
-    }
-
-    &--hide-tabs {
-        #{$CALENDAR_SELECTOR}__tabs {
-            display: none;
-        }
-
-        #{$CALENDAR_SELECTOR}__navbar {
-            border-top: $calendar-border-size solid $calendar-color-border-primary;
-        }
-    }
-}