@webitel/ui-sdk 0.1.2 → 0.1.3-vite

package/src/css/components/atoms/wt-loader/_variables.scss

@@ -1,8 +0,0 @@
-
-:root {
-  --loader-size: 44px;
-  --loader-dot-size: 6px;
-  --loader-path-color: var(--main-primary-accent-color);
-  --loader-dot-color: var(--main-accent-color);
-  --loader-animation-duration: 3s;
-}

package/src/css/components/atoms/wt-tooltip/_variables.scss

@@ -1,10 +0,0 @@
-
-:root {
-  --tooltip-padding: 10px 20px;
-  --tooltip-z-index: 100;
-
-  --tooltip-light-text-color: #000;
-  --tooltip-light-bg-color: #fff;
-  --tooltip-dark-text-color: #fff;
-  --tooltip-dark-bg-color: #464858;
-}

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

@@ -1,4 +0,0 @@
-
-:root {
-  --checkbox-icon-margin: 10px;
-}

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

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

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

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

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

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

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

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

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

@@ -1,6 +0,0 @@
-
-:root {
-  --input-padding: 9px;
-  --input-border: 1px solid;
-  --input-icon-margin: 10px;
-}

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

@@ -1,10 +0,0 @@
-
-: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 +0,0 @@
-
-: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);
-}

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

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

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

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

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

@@ -1,5 +0,0 @@
-
-: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 +0,0 @@
-
-:root {
-  --timepicker-input-margin: 10px;
-}

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

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

package/src/css/fonts.scss

@@ -1,9 +0,0 @@
-@font-face {
-  font-family: 'Montserrat Semi';
-  src: url('./fonts/Montserrat/Montserrat-SemiBold.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'Montserrat Regular';
-  src: url('./fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
-}

package/src/css/styleguide/styleguide.scss

@@ -1,3 +0,0 @@
-@import './scroll';
-@import '../typography/typography';
-@import '../colors/colors';

package/src/css/typography/_typography.scss

@@ -1,72 +0,0 @@
-
-%typo-heading-lg {
-  font: {
-    family: 'Montserrat Semi', monospace;
-    size: 24px;
-  }
-  line-height: 30px;
-}
-
-%typo-heading-md {
-  font: {
-    family: 'Montserrat Semi', monospace;
-    size: 20px;
-  }
-  line-height: 30px;
-}
-
-%typo-heading-sm {
-  font: {
-    family: 'Montserrat Semi', monospace;
-    size: 18px;
-  }
-  line-height: 24px;
-}
-
-%typo-strong-lg {
-  font: {
-    family: 'Montserrat Semi', monospace;
-    size: 14px;
-  }
-  line-height: 18px;
-}
-
-%typo-strong-md {
-  font: {
-    family: 'Montserrat Semi', monospace;
-    size: 12px;
-  }
-  line-height: 14px;
-}
-
-%typo-strong-sm {
-  font: {
-    family: 'Montserrat Semi', monospace;
-    size: 10px;
-  }
-  line-height: 12px;
-}
-
-%typo-body-lg {
-  font: {
-    family: 'Montserrat Regular', monospace;
-    size: 14px;
-  }
-  line-height: 18px;
-}
-
-%typo-body-md {
-  font: {
-    family: 'Montserrat Regular', monospace;
-    size: 12px;
-  }
-  line-height: 14px;
-}
-
-%typo-body-sm {
-  font: {
-    family: 'Montserrat Regular', monospace;
-    size: 10px;
-  }
-  line-height: 12px;
-}

package/src/install.js

@@ -1,15 +0,0 @@
-import Components from './components'; // init all components
-import Directives from './directives'; // init all directives
-import './css/fonts.scss';
-
-export default {
-  install(Vue, options) {
-    console.info('webitel-sdk-options', options);
-    Object.keys(Components).forEach((name) => {
-      Vue.component(name, Components[name]);
-    });
-    Object.keys(Components).forEach((name) => {
-      Vue.directive(name, Directives[name]);
-    });
-  },
-};

package/src/main.js

@@ -1,14 +0,0 @@
-import Vue from 'vue';
-import App from './the-app.vue';
-import './components'; // init all components
-import './directives'; // init all directives
-import i18n from './locale/i18n';
-
-import './css/fonts.scss';
-
-Vue.config.productionTip = false;
-
-new Vue({
-  i18n,
-  render: (h) => h(App),
-}).$mount('#app');