@fkui/design 5.36.0

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

@@ -0,0 +1,628 @@
+@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;
+        }
+    }
+}

package/src/components/card/_card.scss

@@ -0,0 +1,51 @@
+@use "../../core/size";
+@use "../../core/utils/functions" as *;
+
+$CARD_SELECTOR: ".card" !default;
+
+#{$CARD_SELECTOR} {
+    padding: densify(size.$padding-100) size.$padding-100;
+    margin: densify(size.$margin-100) 0;
+
+    &--default {
+        border-radius: var(--f-border-radius-medium);
+        border: var(--f-border-width-medium) solid var(--f-border-color-card);
+    }
+
+    &__content {
+        > p,
+        > div {
+            &:last-child {
+                margin-bottom: 0;
+
+                > *:last-child {
+                    // Disable eventually margin from vue-components (wraps all components in an extra div)
+                    margin-bottom: 0;
+                }
+            }
+        }
+    }
+
+    &__header {
+        &-label {
+            color: var(--f-text-color-default);
+            font-size: var(--f-font-size-large);
+            font-weight: var(--f-font-weight-bold);
+            line-height: var(--f-line-height-large);
+            margin-bottom: densify(size.$margin-025);
+            display: block;
+        }
+    }
+
+    &__footer {
+        padding-top: densify(size.$padding-125);
+
+        > .button-group {
+            margin-bottom: 0;
+
+            .button-group__item {
+                margin-bottom: 0 !important;
+            }
+        }
+    }
+}

package/src/components/checkbox/_all.scss

@@ -0,0 +1,2 @@
+@import "checkbox-group";
+@import "checkbox";

package/src/components/checkbox/_checkbox-group.scss

@@ -0,0 +1,18 @@
+@use "../../core/size";
+@use ".././radio-button/item";
+
+$CHECKBOX_GROUP_SELECTOR: ".checkbox-group" !default;
+
+#{$CHECKBOX_GROUP_SELECTOR} {
+    &__content {
+        display: flex;
+        flex-direction: column;
+    }
+    &--border {
+        #{$CHECKBOX_GROUP_SELECTOR}__content {
+            .checkbox {
+                @extend %selectable-item;
+            }
+        }
+    }
+}