@webitel/ui-sdk 0.1.13 → 0.1.100

package/src/css/components/molecules/wt-datepicker/_variables.scss

@@ -1,20 +1,20 @@
-
-:root {
-  --datepicker-padding: 9px 44px;
-  --datepicker-icon-margin: 10px;
-  --datepicker-border: 1px solid;
-
-  --datepicker-cell-size: 38px;
-  --datepicker-cell-margin: 1px;
-  --datepicker-calendar-padding: 10px;
-  --datepicker-calendar-header-margin: 20px;
-  --datepicker-width: calc(
-          7 * var(--datepicker-cell-size)
-          + 2 * var(--datepicker-calendar-padding)
-          + 2px
-          + 7 * 2 * var(--datepicker-cell-margin)); // 7 cells * 2 sides
-
-  --datepicker-selected-cell-text-color: var(--main-primary-color);
-  --datepicker-selected-cell-bg-color: var(--main-accent-color);
-  --datepicker-cell--hover-color: #F9F9F9;
-}
+
+:root {
+  --datepicker-padding: 9px 44px;
+  --datepicker-icon-margin: 10px;
+  --datepicker-border: 1px solid;
+
+  --datepicker-cell-size: 38px;
+  --datepicker-cell-margin: 1px;
+  --datepicker-calendar-padding: 10px;
+  --datepicker-calendar-header-margin: 20px;
+  --datepicker-width: calc(
+          7 * var(--datepicker-cell-size)
+          + 2 * var(--datepicker-calendar-padding)
+          + 8px
+          + 7 * 2 * var(--datepicker-cell-margin)); // 7 cells * 2 sides
+
+  --datepicker-selected-cell-text-color: var(--main-primary-color);
+  --datepicker-selected-cell-bg-color: var(--main-accent-color);
+  --datepicker-cell--hover-color: #F9F9F9;
+}

package/src/css/components/molecules/wt-datepicker/datepicker-calendar.scss

@@ -1,100 +1,101 @@
-.vdp-datepicker__calendar {
-  width: var(--datepicker-width);
-  right: 0;
-  padding: var(--datepicker-calendar-padding);
-  line-height: var(--datepicker-cell-size);
-  border-radius: var(--border-radius);
-
-  header {
-    display: flex;
-    justify-content: space-between;
-    align-content: flex-end;
-    margin-bottom: var(--datepicker-calendar-header-margin);
-    line-height: 0;
-
-    .day__month_btn {
-      @extend %typo-strong-lg;
-      padding-top: 5px;
-    }
-
-    .prev, .next {
-      float: none;
-      text-indent: 0;
-      color: transparent;
-      cursor: pointer;
-
-      &:hover {
-        background-color: transparent !important;
-      }
-
-      &:after {
-        content: '';
-        position: absolute;
-        top: 5px;
-        width: 24px;
-        height: 24px;
-        background: url("../../../assets/icons/arrow-down--md.svg") center center;
-        background-size: contain;
-        border: none !important; // hide default arrows
-        transform: translateX(-50%) rotate(90deg);
-      }
-
-      &:hover:after {
-        background: url("../../../assets/icons/arrow-down--active--md.svg") center center;
-      }
-    }
-
-    .next:after {
-      transform: translateX(-50%) rotate(-90deg);
-    }
-  }
-
-  .cell {
-    @extend %typo-body-lg;
-    width: var(--datepicker-cell-size);
-    height: var(--datepicker-cell-size);
-    padding: 0;
-    line-height: var(--datepicker-cell-size);
-    transition: var(--transition);
-
-    &.day-header {
-      @extend %typo-body-sm;
-      height: auto;
-      letter-spacing: 0.4px;
-      color: var(--form-label-color);
-    }
-
-    &.day {
-      border-radius: var(--border-radius);
-      margin: 1px;
-
-      &.selected {
-        @extend %typo-strong-lg;
-        color: var(--datepicker-selected-cell-text-color);
-        background: var(--datepicker-selected-cell-bg-color) !important;
-        line-height: var(--datepicker-cell-size);
-      }
-
-      &:not(.blank):not(.disabled).day:hover,
-      &:not(.blank):not(.disabled).month:hover,
-      &:not(.blank):not(.disabled).year:hover {
-        background: var(--datepicker-cell--hover-color);
-        border-color: transparent;
-      }
-    }
-
-    &.month {
-      &.selected {
-        &:hover {
-          background: var(--datepicker-selected-cell-bg-color) !important;
-        }
-      }
-
-      &:not(.blank):not(.disabled).day:hover,
-      &:not(.blank):not(.disabled).month:hover,
-      &:not(.blank):not(.disabled).year:hover {
-        background: var(--datepicker-selected-cell-bg-color) !important;
-      }
-    }
-  }
-}
+.vdp-datepicker__calendar {
+  width: var(--datepicker-width);
+  right: 0;
+  padding: var(--datepicker-calendar-padding);
+  line-height: var(--datepicker-cell-size);
+  border-radius: var(--border-radius);
+
+  header {
+    display: flex;
+    justify-content: space-between;
+    align-content: flex-end;
+    margin-bottom: var(--datepicker-calendar-header-margin);
+    line-height: 0;
+
+    .day__month_btn {
+      @extend %typo-strong-lg;
+      padding-top: 5px;
+    }
+
+    .prev, .next {
+      float: none;
+      text-indent: 0;
+      color: transparent;
+      cursor: pointer;
+
+      &:hover {
+        background-color: transparent !important;
+      }
+
+      &:after {
+        content: '';
+        position: absolute;
+        top: 5px;
+        width: 24px;
+        height: 24px;
+        background: url("../../../assets/icons/arrow-down--md.svg") center center;
+        background-size: contain;
+        border: none !important; // hide default arrows
+        transform: translateX(-50%) rotate(90deg);
+      }
+
+      &:hover:after {
+        background: url("../../../assets/icons/arrow-down--active--md.svg") center center;
+      }
+    }
+
+    .next:after {
+      transform: translateX(-50%) rotate(-90deg);
+    }
+  }
+
+  .cell {
+    @extend %typo-body-lg;
+    width: var(--datepicker-cell-size);
+    height: var(--datepicker-cell-size);
+    margin: 1px;
+    padding: 0;
+    border: none;
+    line-height: var(--datepicker-cell-size);
+    transition: var(--transition);
+
+    &.day-header {
+      @extend %typo-body-sm;
+      height: auto;
+      letter-spacing: 0.4px;
+      color: var(--form-label-color);
+    }
+
+    &.day {
+      border-radius: var(--border-radius);
+
+      &.selected {
+        @extend %typo-strong-lg;
+        color: var(--datepicker-selected-cell-text-color);
+        background: var(--datepicker-selected-cell-bg-color) !important;
+        line-height: var(--datepicker-cell-size);
+      }
+
+      &:not(.blank):not(.disabled).day:hover,
+      &:not(.blank):not(.disabled).month:hover,
+      &:not(.blank):not(.disabled).year:hover {
+        background: var(--datepicker-cell--hover-color);
+        border-color: transparent;
+      }
+    }
+
+    &.month {
+      &.selected {
+        &:hover {
+          background: var(--datepicker-selected-cell-bg-color) !important;
+        }
+      }
+
+      &:not(.blank):not(.disabled).day:hover,
+      &:not(.blank):not(.disabled).month:hover,
+      &:not(.blank):not(.disabled).year:hover {
+        background: var(--datepicker-selected-cell-bg-color) !important;
+      }
+    }
+  }
+}

package/src/css/components/molecules/wt-datetimepicker/_variables.scss

@@ -1,12 +1,12 @@
-
-:root {
-  --datetimepicker-padding: 9px 44px;
-  --datetimepicker-icon-margin: 10px;
-  --datetimepicker-border: 1px solid;
-
-  --datetimepicker-form-padding: 10px;
-  --datetimepicker-form-bg-color: var(--main-primary-color);
-  --datetimepicker-form-z-index: 1;
-
-  --datetimepicker-form-content-margin: 10px;
+
+:root {
+  --datetimepicker-padding: 9px 44px;
+  --datetimepicker-icon-margin: 10px;
+  --datetimepicker-border: 1px solid;
+
+  --datetimepicker-form-padding: 10px;
+  --datetimepicker-form-bg-color: var(--main-primary-color);
+  --datetimepicker-form-z-index: 5; // overflow selects' arrow
+
+  --datetimepicker-form-content-margin: 10px;
 }

package/src/css/components/molecules/wt-icon-btn/_variables.scss

@@ -1,3 +1,3 @@
-
-:root {
+
+:root {
 }

package/src/css/components/molecules/wt-input/_variables.scss

@@ -1,6 +1,8 @@
-
-:root {
-  --input-padding: 9px;
-  --input-border: 1px solid;
-  --input-icon-margin: 10px;
+
+:root {
+  --input-padding: 9px;
+  --input-border: 1px solid;
+  --input-icon-margin: 10px;
+
+  --input-after-wrapper-gap: var(--spacing--xs);
 }

package/src/css/components/molecules/wt-notification/_variables.scss

@@ -1,10 +1,10 @@
-
-:root {
-  --notification-min-width: 30vw;
-  --notification-max-width: 40vw;
-  --notification-padding: 10px;
-  --notification-icon-margin: 10px;
-
-  --notification-text-color: #000;
-  --notification-bg-color: #fff;
+
+:root {
+  --notification-min-width: 30vw;
+  --notification-max-width: 40vw;
+  --notification-padding: 10px;
+  --notification-icon-margin: 10px;
+
+  --notification-text-color: #000;
+  --notification-bg-color: #fff;
 }

package/src/css/components/molecules/wt-popup/_variables.scss

@@ -1,11 +1,12 @@
-
-:root {
-  --popup-wrapper-z-index: 110;
-  --popup-shadow-opacity: 0.8;
-  --popup-max-height: 80vh;
-  --popup-padding: 10px;
-  --popup-header-padding: 0;
-  --popup-main-padding: 10px 20px;
-  --popup-actions-padding: 10px 20px;
-  --popup-bg-color: var(--main-primary-color);
+
+:root {
+  --popup-wrapper-z-index: 11;
+  --popup-shadow-opacity: 0.8;
+  --popup-max-height: 80vh;
+  --popup-padding: 10px;
+  --popup-header-padding: 0;
+  --popup-header-title-padding: 15px 20px 0;
+  --popup-main-padding: 10px 20px;
+  --popup-actions-padding: 10px 20px;
+  --popup-bg-color: var(--main-primary-color);
 }

package/src/css/components/molecules/wt-progress-bar/_variables.scss

@@ -0,0 +1,11 @@
+
+:root {
+  --progress-bar-height: 16px;
+  --progress-bar-padding: 2px;
+  --progress-bar-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.05), inset -1px -1px 1px rgba(255, 255, 255, 0.5), inset 0px 0px 8px rgba(0, 0, 0, 0.1);
+
+  --progress-bar-bg-color--primary: var(--accent-color);
+  --progress-bar-bg-color--secondary: var(--secondary-color);
+  --progress-bar-bg-color--success: var(--true-color);
+  --progress-bar-bg-color--danger: var(--false-color);
+}

package/src/css/components/molecules/wt-radio/_variables.scss

@@ -1,7 +1,7 @@
-
-:root {
-  --radio-icon-margin: 10px;
-  --radio-checkmark-size: 18px;
-  --radio-bullet-size: 8px;
-  --radio-border: 2px solid;
+
+:root {
+  --radio-icon-margin: 10px;
+  --radio-checkmark-size: 18px;
+  --radio-bullet-size: 8px;
+  --radio-border: 2px solid;
 }

package/src/css/components/molecules/wt-search-bar/_variables.scss

@@ -1,4 +1,4 @@
-
-:root {
-  --search-bar-padding: 9px 35px 9px 43px; // sides 10px + 24/16px icon + 10px margin
+
+:root {
+  --search-bar-padding: 9px 35px 9px 43px; // sides 10px + 24/16px icon + 10px margin
 }

package/src/css/components/molecules/wt-select/_variables.scss

@@ -1,23 +1,25 @@
-
-:root {
-  --select-caret-top-pos: 7px;
-  --select-caret-right-pos: 10px;
-  --select-caret-z-index: 1;
-
-  --select-clear-top-pos: 11px;
-  --select-clear-right-pos: calc(10px + (24px + 10px)); // 7px + arrow icon
-  --select-clear-z-index: var(--select-caret-z-index);
-
-  --select-tags-min-height: 38px;
-  --select-tags-padding: 9px 70px 9px 9px; // 66px = 10 + 24 + 10 + 16 + 10
-  --select-tags-border: var(--input-border);
-
-  --select-input-min-height: 18px;
-  --select-badge-right-pos: 70px;
-  --select-badge-z-index: 1;
-
-  --select-options-padding: var(--input-padding);
-
-  --select-option--hover-color: var(--main-secondary-accent-color);
-  --select-option--active-color: #FFF9E6;
-}
+
+:root {
+  --select-caret-top-pos: 7px;
+  --select-caret-right-pos: 10px;
+  --select-caret-z-index: 1;
+
+  --select-clear-top-pos: 11px;
+  --select-clear-right-pos: calc(10px + (var(--icon-md-size) + var(--select-caret-right-pos))); // 10px spacing + caret icon + caret right pos
+  --select-clear-z-index: var(--select-caret-z-index);
+
+  --select-tags-min-height: 38px;
+  --select-tags-padding: 9px calc(10px + var(--icon-md-size) + var(--select-caret-right-pos)) 9px 9px; // right pos = 10px spacing + caret icon size + caret offset
+  --select-tags-padding--clearable: 9px calc(10px + var(--icon-sm-size) + var(--select-clear-right-pos)) 9px 9px; // right pos = 10px spacing + clear icon size + clear offset
+  --select-tags-border: var(--input-border);
+
+  --select-input-min-height: 18px;
+  --select-badge-right-pos: 44px;
+  --select-badge-right-pos--clearable: 70px;
+  --select-badge-z-index: 1;
+
+  --select-options-padding: var(--input-padding);
+
+  --select-option--hover-color: var(--main-secondary-accent-color);
+  --select-option--active-color: var(--main-option-hover-color);
+}

package/src/css/components/molecules/wt-slider/_variables.scss

@@ -0,0 +1,15 @@
+
+:root {
+  --wt-slider-box-sizing: border-box;
+  --wt-slider-width: 100%;
+  --wt-slider-height: 8px;
+  --wt-slider-border: 1px solid var(--secondary-color);
+
+  --wt-slider-pointer-size: 16px;
+  --wt-slider-pointer-radius: 50%;
+
+  --wt-slider-vertical-container-width: 20px;
+  --wt-slider-vertical-container-translation: translate(2px);
+  --wt-slider-vertical-transform: translate(-100%, 0) rotate(-90deg);
+  --wt-slider-vertical-transform-origin: 100% 0;
+}

package/src/css/components/molecules/wt-switcher/_variables.scss

@@ -1,14 +1,17 @@
-
-:root {
-  --switcher-icon-margin: 10px;
-  --switcher-width: 40px;
-  --switcher-height: 22px;
-  --switcher-checkmark-size: 14px;
-  --switcher-checkmark-margin: 4px;
-  --switcher-checkmark-translateX: 17px;
-  --switcher-bg-color: var(--icon-outline-color);
-  --switcher-checkmark-color: var(--main-primary-color);
-  --switcher-checkmark--hover-color: var(--icon-outline--hover-color);
-  --switcher-checkmark--active-color: var(--main-accent-color);
-  --switcher-border-radius: 24px;
-}
+
+:root {
+  --switcher-icon-margin: 10px;
+  --switcher-width: 40px;
+  --switcher-height: 22px;
+  --switcher-cicle-size: 14px;
+  --switcher-cicle-margin: 4px;
+  --switcher-cicle-translateX: 17px;
+  --switcher-bg-color--off: hsla(var(--_icon-color), var(--_opacity--default));
+  --switcher-bg-color--on: hsla(var(--_accent-color), var(--_opacity--default));
+  --switcher-bg-color--off--hover: hsla(var(--_icon-color), var(--_opacity--hover));
+  --switcher-bg-color--on--hover: hsla(var(--_accent-color), var(--_opacity--hover));
+  --switcher-bg-color--off--disabled: hsla(var(--_icon-color), var(--_opacity--disabled));
+  --switcher-bg-color--on--disabled: hsla(var(--_accent-color), var(--_opacity--disabled));
+  --switcher-circle-bg-color: var(--main-color);
+  --switcher-border-radius: 24px;
+}

package/src/css/components/molecules/wt-tabs/_variables.scss

@@ -1,14 +1,14 @@
-
-:root {
-  --tabs-underiline-height: 1px;
-  --tabs-underiline-color: transparent;
-
-  --tab-padding: 20px 0;
-  --tab-margin: 0 5px;
-  --tab-color: var(--text-outline-color);
-  --tab--hover-color: var(--text-primary-color);
-  --tab--active-color: var(--text-primary-color);
-  --tab-border: 2px solid;
-  --tab--active-border-color: var(--main-accent-color);
-  --tab-z-index: 1;
+
+:root {
+  --tabs-underiline-height: 1px;
+  --tabs-underiline-color: transparent;
+
+  --tab-padding: 20px 0;
+  --tab-margin: 0 5px;
+  --tab-color: var(--text-outline-color);
+  --tab--hover-color: var(--text-primary-color);
+  --tab--active-color: var(--text-primary-color);
+  --tab-border: 2px solid;
+  --tab--active-border-color: var(--main-accent-color);
+  --tab-z-index: 1;
 }

package/src/css/components/molecules/wt-tags-input/_variables.scss

@@ -0,0 +1,25 @@
+
+:root {
+  --tags-input-min-height: 40px; // 38px + border-box
+  --tags-input-padding: 5px 10px;
+  --tags-input-border: var(--input-border);
+  --tags-input-border-color: var(--form-border-color);
+
+  --tags-input-tag-spacing-margin: 10px;
+  --tags-input-tag-text-color: var(--text-primary-color);
+  --tags-input-tag-bg-color: var(--main-secondary-accent-color);
+  --tags-input-tag-border-radius: 20px;
+  --tags-input-tag-actions-margin-left: var(--tags-input-tag-spacing-margin);
+
+  --tags-input-tag-text-color--deletion: var(--text-contrast-color);
+  --tags-input-tag-bg-color--deletion: var(--false-color);
+
+  --tags-input-autocomplete-max-height: 300px;
+  --tags-input-autocomplete-border: var(--input-border);
+  --tags-input-autocomplete-border-color: var(--form-border-color);
+  --tags-input-autocomplete-option-padding: var(--input-padding);
+  --tags-input-autocomplete-option--text-color: var(--form-placeholder-color);
+
+  --tags-input-option-bg-color--hover: var(--main-secondary-accent-color);
+  --tags-input-option-text-color--hover: var(--text-primary-color);
+}

package/src/css/components/molecules/wt-textarea/_variables.scss

@@ -1,5 +1,5 @@
-
-:root {
-  --textarea-min-height: 100px;
-  --textarea-padding: 9px 35px 9px 9px; // right reset icon 16px
+
+:root {
+  --textarea-min-height: 100px;
+  --textarea-padding: 9px 35px 9px 9px; // right reset icon 16px
 }

package/src/css/components/molecules/wt-timepicker/_variables.scss

@@ -1,4 +1,5 @@
-
-:root {
-  --timepicker-input-margin: 10px;
+
+:root {
+  --timepicker-input-width: 75px;
+  --timepicker-input-margin: 10px;
 }

package/src/css/components/organisms/wt-app-header/_variables.scss

@@ -0,0 +1,20 @@
+
+:root {
+  --wt-app-header-min-height: 54px;
+  --wt-app-header-padding: 8px 60px;
+
+  --wt-app-header-content-gap: var(--component-padding);
+  --wt-app-header-content-panel-margin: 5px;
+  --wt-app-header-content-bg-color: var(--main-primary-color);
+  --wt-app-header-content-z-index: 11;
+
+  --wt-app-navigator-max-height: 80vh;
+  --wt-app-navigator-item-size: 120px;
+  --wt-app-navigator-item-border: 1px solid;
+  --wt-app-navigator-item-border-color: var(--main-outline-color);
+  --wt-app-navigator-item-border-color--hover: var(--main-accent-color);
+
+  --wt-header-actions-min-width: 120px;
+  --wt-header-actions-action-bg-color--hover: var(--main-page-bg-color);
+  --wt-header-actions-action-link-padding: 10px var(--wt-app-header-content-gap);
+}

package/src/css/components/organisms/wt-headline/_variables.scss

@@ -0,0 +1,7 @@
+
+:root {
+  --headline-min-height: 64px;
+  --headline-padding: 12px 30px;
+  --headline-title-margin: 20px;
+  --headline-background: var(--main-primary-color);
+}

package/src/css/components/organisms/wt-navigation-bar/_variables.scss

@@ -0,0 +1,14 @@
+:root {
+  --navigation-bar-width: 350px;
+  --navigation-bar-z-index: 10;
+  --navigation-bar-bg-color: var(--main-primary-color);
+  --navigation-bar-verical-padding: 15px;
+  --navigation-bar-horizontal-padding: 10px;
+
+  --navigation-bar-header-padding: var(--navigation-bar-verical-padding) 15px;
+  --navigation-bar-list-padding: var(--navigation-bar-verical-padding) var(--navigation-bar-horizontal-padding);
+  --navigation-bar-link-padding: var(--navigation-bar-verical-padding) var(--navigation-bar-horizontal-padding);
+  --navigation-bar-subnav-padding-left: 40px;
+  --navigation-bar-active-expansion-flag-width: 5px;
+  --navigation-bar-active-expansion-name-max-width: calc(100% - 24px - 10px); // 100% - icon - icon margin
+}

package/src/css/components/organisms/wt-notifications-bar/_variables.scss

@@ -0,0 +1,7 @@
+
+:root {
+  --notifications-bar-max-height: 60%;
+  --notifications-bar-corner-margin: 10px;
+  --notifications-bar-notifications-margin: 0 10px 10px auto;
+  --notifications-bar-z-index: 101;
+}

package/src/css/components/organisms/wt-page-wrapper/_variables.scss

@@ -0,0 +1,5 @@
+:root {
+  --page-wrapper-padding: 20px 30px;
+  --page-wrapper-section-margin: 20px;
+  --page-wrapper-main-section-padding: 20px 30px 30px;
+}

package/src/css/components/organisms/wt-pagination/_variables.scss

@@ -1,7 +1,7 @@
-
-:root {
-  --pagination-margin-right: 10px;
-  --pagination-size-text-margin-right: 10px;
-  --pagination-size-input-width: 70px;
-  --pagination-page-controls-margin: 10px;
+
+:root {
+  --pagination-margin-right: 10px;
+  --pagination-size-text-margin-right: 10px;
+  --pagination-size-input-width: 70px;
+  --pagination-page-controls-margin: 10px;
 }

package/src/css/components/organisms/wt-player/_variables.scss

@@ -0,0 +1,8 @@
+.wt-player {
+  --plyr-color-main: var(--main-accent-color);
+  --plyr-audio-control-color: var(--icon-primary-color);
+  // --plyr-control-toggle-checked-background: var(--main-primary-color);
+  --player-close-icon-transform-translate-x: var(--spacing--sm);
+  // "-1 * var" for use the negative value of a variable
+  --player-close-icon-transform-translate-y: calc(-1 * var(--spacing--md));
+}

package/src/css/components/organisms/wt-status-select/_variables.scss

@@ -0,0 +1,6 @@
+
+:root {
+  --status-select-select-tags-padding: 9px 34px 9px 9px; // 34px = 24 + 10
+  --status-select--hover-color: var(--form-input-color);
+  --status-select-bg--hover-color: #F9F9F9; // zebra-like
+}