@formixru/b2b-ui 1.0.0

package/src/components/sidebar/index.scss

@@ -0,0 +1,398 @@
+@use '../../variables' as *;
+
+$b: '.sidebar';
+
+#{$b} {
+    background-color: $sidebar-bg;
+    height: calc(100% - var(--tab-bar-height));
+    position: fixed;
+    right: 0;
+    top: 0;
+    width: calc(100% - 56px);
+    z-index: 910;
+
+    @media (--tablet-landscape-up) {
+        height: 100%;
+        width: 320px;
+    }
+
+    &_left {
+        left: 0;
+        right: auto;
+    }
+
+    &_l {
+        @media (--tablet-landscape-up) {
+            width: 640px;
+        }
+    }
+
+    &_xl {
+        @media (--tablet-landscape-up) {
+            width: 960px;
+        }
+    }
+
+    &__aside {
+        align-items: flex-end;
+        display: flex;
+        flex-direction: column;
+        position: absolute;
+        right: 100%;
+        top: 0;
+
+        #{$b}_left & {
+            align-items: flex-start;
+            left: 100%;
+            right: auto;
+        }
+    }
+
+    &__button {
+        align-items: center;
+        background-color: $sidebar-disabled-button-bg;
+        color: $sidebar-disabled-button-color;
+        display: flex;
+        height: 4px * 14;
+        justify-content: center;
+        position: relative;
+        transition-duration: var(--duration-micro-s);
+        transition-property: background-color, color;
+        transition-timing-function: var(--easing-standard);
+        width: 4px * 14;
+
+        #{$b}_catalog & {
+            @media (--tablet-landscape-up) {
+                background-color: $sidebar-catalog-disabled-button-bg;
+                color: $sidebar-catalog-disabled-button-color;
+            }
+        }
+
+        &:enabled,
+        &:any-link {
+            background-color: $sidebar-button-bg;
+            color: $sidebar-button-color;
+            cursor: pointer;
+
+            &:hover,
+            &:focus-visible {
+                background-color: $sidebar-active-button-bg;
+                color: $sidebar-active-button-color;
+            }
+        }
+
+        &[data-notification] {
+            &::before {
+                align-items: center;
+                background-color: $sidebar-notification-bg;
+                border-radius: 50%;
+                color: $sidebar-notification-color;
+                content: attr(data-notification);
+                display: flex;
+                height: 4px * 4;
+                justify-content: center;
+                position: absolute;
+                right: 4px * 3;
+                top: 4px * 3;
+                width: 4px * 4;
+
+                @include font($sidebar-notification-font);
+            }
+        }
+
+        &[data-sidebar-close] {
+            background-color: $sidebar-close-bg;
+            color: $sidebar-close-color;
+
+            #{$b}_catalog & {
+                @media (--tablet-landscape-up) {
+                    align-self: flex-start;
+                    transform: translateX(-100%);
+                }
+            }
+        }
+
+        &_big {
+            color: $sidebar-disabled-button-label-color;
+            height: auto;
+            justify-content: flex-start;
+            min-height: 4px * 14;
+            min-width: 4px * 28;
+            padding: 4px * 4;
+            width: 100%;
+
+            @include font($sidebar-button-label-font);
+
+            &:enabled,
+            &:any-link {
+                color: $sidebar-button-label-color;
+
+                &:hover,
+                &:focus-visible {
+                    color: $sidebar-active-button-label-color;
+                }
+            }
+
+            #{$b}_catalog & {
+                @media (--tablet-landscape-up) {
+                    min-width: 4px * 56;
+                }
+            }
+        }
+    }
+
+    &__button-icon {
+        fill: currentcolor;
+        height: 4px * 6;
+        width: 4px * 6;
+
+        [data-sidebar-close] & {
+            height: 4px * 5;
+            width: 4px * 5;
+        }
+    }
+
+    &__tabs {
+    }
+
+    &__tab {
+    }
+
+    &__wrapper {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        overflow: auto;
+        -webkit-overflow-scrolling: touch;
+
+        #{$b}_catalog & {
+            @media (--tablet-landscape-up) {
+                height: calc(100% - (4px * 14 + 1px));
+            }
+        }
+    }
+
+    &__container {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+    }
+
+    &__header {
+        align-items: center;
+        border-bottom: $sidebar-header-separator-width solid $sidebar-header-separator-color;
+        display: flex;
+        flex-direction: column;
+        flex-shrink: 0;
+        justify-content: center;
+        margin-bottom: 4px * 4;
+        min-height: 4px * 14;
+        padding-bottom: 4px * 4;
+        padding-left: 4px * 4;
+        padding-right: 4px * 4;
+        padding-top: 4px * 4 + 1px;
+
+        #{$b}_catalog & {
+            @media (--tablet-landscape-up) {
+                background-color: $sidebar-catalog-header-bg;
+                left: -4px * 56;
+                margin-bottom: 0;
+                padding-left: 4px * 2;
+                position: relative;
+                width: calc(100% + 4px * 56);
+                z-index: 1;
+            }
+        }
+    }
+
+    &__header-icon-wrapper {
+        align-items: center;
+        border: $sidebar-header-icon-border-width solid $sidebar-header-icon-border-color;
+        border-radius: 50%;
+        display: flex;
+        height: 4px * 6;
+        justify-content: center;
+        position: relative;
+        width: 4px * 6;
+
+        @media (--tablet-landscape-up) {
+            background-color: $sidebar-header-icon-bg;
+            border-style: none;
+            height: 4px * 12;
+            width: 4px * 12;
+        }
+    }
+
+    &__header-icon {
+        fill: $sidebar-header-icon-color;
+        height: 4px * 4;
+        width: 4px * 4;
+
+        @media (--tablet-landscape-up) {
+            height: 4px * 6;
+            width: 4px * 6;
+        }
+    }
+
+    &__header-title {
+        color: $sidebar-header-title-color;
+        text-align: center;
+
+        @include font($sidebar-header-title-font);
+
+        @media (--tablet-landscape-up) {
+            margin-top: 4px * 2;
+        }
+    }
+
+    &__title-wrapper {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+
+        @media (--tablet-landscape-up) {
+            align-items: baseline;
+            flex-direction: row;
+            justify-content: space-between;
+        }
+
+        &:not(:first-child) {
+            margin-top: 4px * 2;
+        }
+
+        &:first-child:last-child {
+            margin-bottom: -2px;
+            margin-top: -3px;
+        }
+    }
+
+    &__title {
+        text-align: center;
+        width: 100%;
+
+        @include font($sidebar-title-mobile-font);
+
+        @media (--tablet-landscape-up) {
+            @include font($sidebar-title-desktop-font);
+        }
+
+        &:not(:first-child) {
+            margin-top: 4px * 2;
+        }
+
+        &:first-child:last-child {
+            margin-bottom: -2px;
+            margin-top: -3px;
+        }
+
+        #{$b}__title-wrapper & {
+            text-align: left;
+
+            @media (--tablet-landscape-up) {
+                margin-left: 4px * 2;
+                margin-right: 4px * 2;
+            }
+        }
+    }
+
+    &__header-link {
+        margin-top: 4px * 2;
+
+        @media (--tablet-landscape-up) {
+            flex-shrink: 0;
+            margin-left: 4px * 2;
+            margin-top: 0;
+        }
+    }
+
+    &__sub-title {
+        background-color: $sidebar-sub-title-bg;
+        color: $sidebar-sub-title-color;
+        margin-bottom: 4px * 4;
+        padding: 4px * 2 4px * 4;
+        text-align: center;
+
+        @include font($sidebar-sub-title-font);
+
+        #{$b}__header + & {
+            margin-top: -4px * 4;
+
+            @media (--tablet-landscape-up) {
+                margin-top: -4px * 8;
+            }
+        }
+    }
+
+    &__specs {
+        &:last-child {
+            margin-bottom: 4px * 6;
+        }
+    }
+
+    &__action-list {
+        margin-top: 4px * 6;
+        padding: 0 4px * 4;
+
+        &:last-child {
+            margin-bottom: 4px * 6;
+        }
+    }
+
+    &__action-item {
+        width: 100%;
+
+        &:not(:first-child) {
+            margin-top: 4px * 4;
+        }
+    }
+
+    &__descr {
+        color: $sidebar-descr-color;
+        margin-top: 4px * 2;
+        width: 100%;
+
+        @include font($sidebar-descr-font);
+    }
+
+    &__descr-icon {
+        display: inline-block;
+        margin-left: 2px;
+        position: relative;
+        top: 2px;
+
+        > svg {
+            display: block;
+            fill: $sidebar-descr-icon-color;
+            height: 4px * 4;
+            width: 4px * 4;
+        }
+    }
+
+    &__content {
+        flex-grow: 1;
+    }
+
+    &__footer {
+        flex-shrink: 0;
+        margin-top: 4px * 4;
+    }
+
+    &__toggle-wrapper {
+        @media (--tablet-landscape-up) {
+            align-items: center;
+            display: flex;
+        }
+    }
+
+    &__toggle {
+        margin-bottom: 4px * 2;
+        margin-top: 4px * 4;
+
+        @media (--tablet-landscape-up) {
+            flex-shrink: 0;
+            margin-bottom: 0;
+            margin-left: 4px * 4;
+            margin-top: 0;
+        }
+    }
+}

package/src/components/simple-page/index.scss

@@ -0,0 +1,32 @@
+@use '../../variables' as *;
+
+$b: '.simple-page';
+
+#{$b} {
+    display: flex;
+    flex-direction: column;
+
+    @media (--tablet-landscape-up) {
+        align-items: flex-start;
+        flex-direction: row;
+    }
+
+    &__content {
+        width: 100%;
+
+        @media (--tablet-landscape-up) {
+            width: calc(75% - 32px);
+        }
+    }
+
+    &__aside {
+        margin-top: 4px * 8;
+        width: 100%;
+
+        @media (--tablet-landscape-up) {
+            margin-left: 4px * 8;
+            margin-top: 0;
+            width: 25%;
+        }
+    }
+}

package/src/components/slider-nav/index.scss

@@ -0,0 +1,82 @@
+@use '../../variables' as *;
+
+$b: '.slider-nav';
+
+#{$b} {
+    &__button {
+        align-items: center;
+        background-color: $slider-nav-button-bg;
+        border: $slider-nav-button-border-width solid $slider-nav-button-border-color;
+        border-radius: $slider-nav-button-radius;
+        cursor: pointer;
+        display: flex;
+        height: 4px * 8;
+        justify-content: center;
+        opacity: 1;
+        transition-duration: var(--duration-micro-s);
+        transition-property: border-color, color, opacity;
+        transition-timing-function: var(--easing-standard);
+        width: 4px * 8;
+
+        @media (--tablet-portrait-down) {
+            display: none;
+        }
+
+        @media (--tablet-landscape-up) {
+            height: 4px * 12;
+            width: 4px * 12;
+        }
+
+        &_disabled {
+            cursor: default;
+            opacity: 0.5;
+        }
+
+        &_lock {
+            display: none;
+        }
+
+        &_prev {
+        }
+
+        &_next {
+        }
+
+        &_autohide {
+            .swiper:not(:hover) & {
+                opacity: 0;
+            }
+        }
+
+        &_fill-white {
+            background-color: $slider-nav-button-fill-white-bg;
+            border-color: $slider-nav-button-fill-white-border-color;
+            box-shadow: $slider-nav-button-fill-white-shadow;
+            color: $slider-nav-button-fill-white-color;
+
+            &:not(#{$b}__button_disabled):hover,
+            &:not(#{$b}__button_disabled):focus-visible {
+                color: $slider-nav-button-fill-white-active-color;
+            }
+        }
+    }
+
+    &__icon {
+        fill: currentcolor;
+        height: 4px * 4;
+        width: 4px * 4;
+
+        @media (--tablet-landscape-up) {
+            height: 4px * 6;
+            width: 4px * 6;
+        }
+
+        #{$b}__button_prev & {
+            transform: translateX(-2px);
+        }
+
+        #{$b}__button_next & {
+            transform: translateX(1px);
+        }
+    }
+}

package/src/components/slider-pagination/index.scss

@@ -0,0 +1,130 @@
+@use 'sass:math';
+@use '../../variables' as *;
+
+$b: '.slider-pagination';
+
+#{$b} {
+    display: flex;
+    justify-content: center;
+
+    &_lock {
+        display: none;
+    }
+
+    &_clickable {
+    }
+
+    &_light {
+    }
+
+    &_dark {
+    }
+
+    &.swiper-pagination-bullets-dynamic {
+        justify-content: flex-start;
+        overflow: visible;
+        position: relative;
+    }
+
+    &__bullet {
+        border: 1px solid transparent;
+        border-radius: 50%;
+        display: block;
+        flex-shrink: 0;
+        height: $slider-pagination-bullet-size;
+        margin-left: math.div($slider-pagination-bullet-gap, 2);
+        margin-right: math.div($slider-pagination-bullet-gap, 2);
+        opacity: 1;
+        transition-duration: var(--duration-micro-s);
+        transition-property: background-color, border-color, left, transform;
+        transition-timing-function: var(--easing-standard);
+        width: $slider-pagination-bullet-size;
+
+        #{$b}_clickable &:hover,
+        #{$b}_clickable &:focus-visible {
+            cursor: pointer;
+            transform: scale(1.5);
+        }
+
+        #{$b}.swiper-pagination-bullets-dynamic & {
+            position: relative;
+            transform: scale(0);
+        }
+
+        &_active {
+            transform: scale(1.5);
+
+            #{$b}_clickable &:hover,
+            #{$b}_clickable &:focus-visible {
+                cursor: default;
+                transform: scale(1.5);
+            }
+
+            #{$b}.swiper-pagination-bullets-dynamic & {
+                transform: scale(1.5);
+
+                &-next,
+                &-prev {
+                    transform: scale(1);
+                }
+
+                &-next-next,
+                &-prev-prev {
+                    transform: scale(0.5);
+                }
+            }
+        }
+
+        #{$b}_light & {
+            background-color: $slider-pagination-bullet-light-bg;
+            border-color: $slider-pagination-bullet-light-border-color;
+
+            &_active {
+                background-color: $slider-pagination-bullet-light-selected-bg;
+                border-color: $slider-pagination-bullet-light-selected-border-color;
+            }
+        }
+
+        #{$b}_light#{$b}_clickable & {
+            &:hover,
+            &:focus-visible {
+                background-color: $slider-pagination-bullet-light-active-bg;
+                border-color: $slider-pagination-bullet-light-active-border-color;
+            }
+
+            &_active {
+                &:hover,
+                &:focus-visible {
+                    background-color: $slider-pagination-bullet-light-selected-bg;
+                    border-color: $slider-pagination-bullet-light-selected-border-color;
+                }
+            }
+        }
+
+        #{$b}_dark & {
+            background-color: $slider-pagination-bullet-dark-bg;
+            border-color: $slider-pagination-bullet-dark-border-color;
+
+            &_active {
+                background-color: $slider-pagination-bullet-dark-selected-bg;
+                border-color: $slider-pagination-bullet-dark-selected-border-color;
+            }
+        }
+
+        #{$b}_dark#{$b}_clickable & {
+            &:hover,
+            &:focus-visible {
+                background-color: $slider-pagination-bullet-dark-active-bg;
+                border-color: $slider-pagination-bullet-dark-active-border-color;
+            }
+
+            &_active {
+                &:hover,
+                &:focus-visible {
+                    background-color: $slider-pagination-bullet-dark-selected-bg;
+                    border-color: $slider-pagination-bullet-dark-selected-border-color;
+                }
+            }
+        }
+    }
+}

package/src/components/spinner/index.scss

@@ -0,0 +1,35 @@
+@use '../../variables' as *;
+
+@keyframes spinner {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+$b: '.spinner';
+
+#{$b} {
+    animation-duration: $spinner-speed;
+    animation-iteration-count: infinite;
+    animation-name: spinner;
+    animation-timing-function: linear;
+    border: $spinner-size solid $spinner-color;
+    border-bottom-color: transparent;
+    border-radius: 50%;
+    display: block;
+    height: 100%;
+    width: 100%;
+
+    @container (width >= #{$spinner-l-container-size}) {
+        border-width: $spinner-l-size;
+    }
+
+    &_inverted {
+        border-color: $spinner-inverted-color;
+        border-bottom-color: transparent;
+    }
+}

package/src/components/sr-only/index.scss

@@ -0,0 +1,25 @@
+@use '../../variables' as *;
+
+// https://allyjs.io/tutorials/hiding-elements.html#2017-edition-of-visuallyhidden
+
+.sr-only {
+    border-bottom-style: none;
+    border-left-style: none;
+    border-right-style: none;
+    border-top-style: none;
+    clip: rect(0 0 0 0);
+    clip-path: inset(100%);
+    height: 1px;
+    margin-bottom: -1px;
+    margin-left: -1px;
+    margin-right: -1px;
+    margin-top: -1px;
+    overflow: hidden;
+    padding-bottom: 0;
+    padding-left: 0;
+    padding-right: 0;
+    padding-top: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+}