@itfin/components 1.2.31 → 1.2.34

package/src/components/app/ToastContainer.vue

@@ -28,41 +28,6 @@
     </div>
   </transition>
 </template>
-<style lang="scss">
-.itf-toast-wrapper {
-  max-width: 100%;
-}
-.itf-toast-fade-enter-active {
-  animation: itf-toast-fade-in-down 0.3s;
-}
-
-.itf-toast-fade-leave-active {
-  animation: itf-toast-fade-out 0.3s;
-}
-
-@keyframes itf-toast-fade-in-down {
-  0% {
-    opacity: 0;
-    transform: translateY(-20px);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0px);
-  }
-}
-
-@keyframes itf-toast-fade-out {
-  0% {
-    opacity: 1;
-    margin-top: 0;
-  }
-  100% {
-    opacity: 0;
-    margin-top: -45px;
-  }
-}
-
-</style>
 <script>
 import { Vue, Component, Watch } from 'vue-property-decorator';
 import ToastMessage from './ToastMessage.vue';

package/src/components/app/ToastMessage.vue

@@ -28,13 +28,6 @@
     </div>
   </div>
 </template>
-<style lang="scss" scoped>
-@import '../../assets/scss/variables';
-
-.itf-toast-message {
-  z-index: $zindex-toaster;
-}
-</style>
 <script>
 import { Vue, Component, Prop, Emit } from 'vue-property-decorator';
 import itfButton from '../button/Button';

package/src/components/avatar/Avatar.vue

@@ -28,44 +28,6 @@
     </div>
   </div>
 </template>
-<style lang="scss" scoped>
-@import '../../assets/scss/variables';
-
-.itf-avatar {
-  --positive: #{$green};
-
-  position: relative;
-  display: inline-block;
-  font-size: 0;
-  line-height: 0;
-  vertical-align: middle;
-
-  .shadow {
-    stroke-width: 2;
-    stroke: rgba(0, 0, 0, 0.1);
-    fill: none;
-  }
-
-  .status-badge {
-    position: absolute;
-    pointer-events: none;
-    border-radius: 50%;
-    background-color: var(--positive);
-  }
-
-  .feature-icon {
-    width: 3rem;
-    height: 3rem;
-    border-radius: 0.5rem;
-    overflow: hidden;
-
-    img {
-      max-width: 100%;
-      max-height: 100%;
-    }
-  }
-}
-</style>
 <script>
 import { Vue, Component, Watch, Prop } from 'vue-property-decorator';
 

package/src/components/button/Button.vue

@@ -1,145 +1,3 @@
-<style lang="scss">
-@import '../../assets/scss/main';
-
-:root {
-  --itf-button-basic-bg-color: rgba(9, 30, 66, 0.08);
-}
-
-[data-theme="dark"] {
-  --itf-button-basic-bg-color: rgba(246, 225, 189, 0.08);
-
-  .itf-button.btn {
-    &.btn-secondary {
-      &, &.disabled {
-        background-color: $dark-btn-secondary-color;
-        border-color: $dark-btn-secondary-color;
-      }
-
-      &:active, &:focus {
-        background-color: lighten($dark-btn-secondary-color, 5%);
-        border-color: lighten($dark-btn-secondary-color, 5%);
-      }
-      &:hover {
-        background-color: lighten($dark-btn-secondary-color, 10%);
-        border-color: lighten($dark-btn-secondary-color, 10%);
-      }
-    }
-    &.btn-primary {
-      &, &.disabled {
-        background-color: $dark-btn-primary-color;
-        border-color: $dark-btn-primary-color;
-        color: $body-color;
-      }
-
-      &:active, &:focus {
-        color: $body-color;
-        background-color: darken($dark-btn-primary-color, 5%);
-        border-color: darken($dark-btn-primary-color, 5%);
-        box-shadow: 0 0 0 0.125rem mix($dark-btn-primary-color, $dark-body-bg, 50%);
-      }
-      &:hover {
-        color: $body-color;
-        background-color: darken($dark-btn-primary-color, 10%);
-        border-color: darken($dark-btn-primary-color, 10%);
-      }
-    }
-  }
-}
-
-.itf-button.btn {
-  display: inline-flex;
-  align-items: center;
-  position: relative;
-
-  &.btn-primary {
-    color: #fff; // @todo remove when remove vuetify
-  }
-  &.itf-button__block {
-    display: block;
-    width: 100%;
-  }
-  & > div {
-    pointer-events: none;
-  }
-  .itf-spinner {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    margin: -0.75rem;
-  }
-
-  &.loading {
-    cursor: progress;
-    pointer-events: none;
-    color: transparent;
-
-    &.btn-sm .itf-spinner {
-      width: 1rem;
-      height: 1rem;
-      margin: -0.5rem;
-    }
-    &.btn-lg .itf-spinner {
-      width: 1.75rem;
-      height: 1.75rem;
-      margin: -0.875rem;
-    }
-  }
-  &.btn-basic {
-    &:hover, &.active {
-      background-color: var(--itf-button-basic-bg-color);
-    }
-  }
-  &.btn-icon {
-    padding: 0.25rem;
-    svg {
-      width: 1.5rem;
-      height: 1.5rem;
-    }
-    &.btn-sm {
-      svg {
-        width: 1.3125rem;
-        height: 1.3125rem;
-      }
-    }
-    &.btn-lg {
-      svg {
-        width: 1.875rem;
-        height: 1.875rem;
-      }
-    }
-  }
-}
-</style>
-<!---template>
-
-  <nuxt-link
-    @click.native="$emit('click', $event)"
-    :disabled="disabled"
-    :target="target"
-    :tag="isLink ? 'a' : 'button'"
-    :event="isLink ? 'click' : []"
-    :class="{
-      [`btn-${color}`]: color,
-      'itf-button__block': block,
-      'labeled': labeled,
-      'disabled': disabled || loading,
-      'btn-primary': primary,
-      'btn-basic': !primary && !secondary && !color,
-      'btn-secondary': secondary,
-      'btn-sm': small,
-      'btn-lg': large,
-      // 'px-3': small && !icon,
-      // 'px-5': large && !icon,
-      // 'px-4': !icon && !large && !small,
-      'btn-icon': icon,
-      'loading': loading
-    }">
-    <div class="itf-spinner" :class="{'itf-spinner__white': primary}" v-if="loading"></div>
-    <div v-if="loading && loadingText">{{loadingText}}</div>
-    <slot v-else></slot>
-  </nuxt-link>
-
-</template-->
 <script>
 import { Vue, Component, Prop } from 'vue-property-decorator';
 

package/src/components/card/Card.vue

@@ -5,16 +5,6 @@
   </div>
 
 </template>
-<style lang="scss">
-@import '../../assets/scss/variables';
-//@import '~bootstrap/scss/card';
-
-.card {
-  & > .itf-loading {
-    border-radius: $card-border-radius;
-  }
-}
-</style>
 <script>
 import { Vue, Component } from 'vue-property-decorator';
 

package/src/components/card/CardBody.vue

@@ -5,9 +5,6 @@
   </div>
 
 </template>
-<style lang="scss">
-@import '../../assets/scss/variables';
-</style>
 <script>
 import { Vue, Component } from 'vue-property-decorator';
 

package/src/components/checkbox/Checkbox.vue

@@ -11,60 +11,6 @@
   </div>
 
 </template>
-<style lang="scss">
-@import '../../assets/scss/variables';
-
-.itf-checkbox {
-  .form-check-input, .form-check-label {
-    cursor: pointer;
-  }
-  &__large.form-check {
-    padding-left: $form-check-padding-start * 2;
-    min-height: 2.5rem;
-
-    .form-check-label {
-      padding-top: 0.25rem;
-    }
-    .form-check-input {
-      margin-top: 0;
-      width: $form-check-input-width * 2;
-      height: $form-check-input-width * 2;
-      margin-left: -$form-check-padding-start * 2;
-      border-radius: 0.75rem;
-    }
-    &.form-switch {
-      padding-left: $form-switch-padding-start * 2;
-
-      .form-check-input {
-        width: $form-switch-width * 2;
-        margin-left: -$form-switch-padding-start * 2;
-        border-radius: 100px;
-      }
-    }
-  }
-  &__medium.form-check {
-    padding-left: $form-check-padding-start * 1.5;
-    min-height: 2rem;
-
-    .form-check-input {
-      margin-top: 0;
-      width: $form-check-input-width * 1.5;
-      height: $form-check-input-width * 1.5;
-      margin-left: -$form-check-padding-start * 1.5;
-      border-radius: 0.5rem;
-    }
-    &.form-switch {
-      padding-left: $form-switch-padding-start * 1.5;
-
-      .form-check-input {
-        width: $form-switch-width * 1.5;
-        margin-left: -$form-switch-padding-start * 1.5;
-        border-radius: 100px;
-      }
-    }
-  }
-}
-</style>
 <script>
 import { Vue, Component, Prop, Model, Inject } from 'vue-property-decorator';
 

package/src/components/checkbox/CheckboxGroup.vue

@@ -5,9 +5,6 @@
   </div>
 
 </template>
-<style>
-
-</style>
 <script>
   import { Vue, Component, Prop, Model } from 'vue-property-decorator';
 

package/src/components/checkbox/Radio.vue

@@ -1,5 +1,4 @@
 <template>
-
   <div class="itf-radio form-check" :class="{ 'itf-radio__large': large, 'itf-radio__medium': medium }">
     <input class="form-check-input" :id="id" type="radio" :name="radioName" v-model="isChecked" :value="true" :disabled="disabled" />
     <label :for="id" slot="label" class="form-check-label">
@@ -7,42 +6,7 @@
       <slot name="icon"></slot>
     </label>
   </div>
-
 </template>
-<style lang="scss">
-@import '../../assets/scss/variables';
-
-.itf-radio {
-  .form-check-input, .form-check-label {
-    cursor: pointer;
-  }
-  &__large.form-check {
-    padding-left: $form-check-padding-start * 2;
-    min-height: 2.5rem;
-
-    .form-check-label {
-      padding-top: 0.25rem;
-    }
-    .form-check-input {
-      margin-top: 0;
-      width: $form-check-input-width * 2;
-      height: $form-check-input-width * 2;
-      margin-left: -$form-check-padding-start * 2;
-    }
-  }
-  &__medium.form-check {
-    padding-left: $form-check-padding-start * 1.5;
-    min-height: 2rem;
-
-    .form-check-input {
-      margin-top: 0;
-      width: $form-check-input-width * 1.5;
-      height: $form-check-input-width * 1.5;
-      margin-left: -$form-check-padding-start * 1.5;
-    }
-  }
-}
-</style>
 <script>
 import { Vue, Component, Prop, Model, Inject } from 'vue-property-decorator';
 

package/src/components/checkbox/RadioGroup.vue

@@ -5,9 +5,6 @@
   </fieldset>
 
 </template>
-<style>
-
-</style>
 <script>
 import { Vue, Component, Prop, Model } from 'vue-property-decorator';
 

package/src/components/datepicker/DatePicker.vue

@@ -49,45 +49,6 @@
     </div>
   </div>
 </template>
-<style lang="scss">
-@import '../../assets/scss/variables';
-@import '../../assets/scss/directives/tooltip';
-@import '../../assets/scss/input-addon';
-
-[data-theme="dark"] {
-  .itf-datepicker {
-    &__dropdown {
-      background-color: $dark-body-bg;
-      border-color: $dark-border-color;
-      box-shadow: 0 0 0 2px $dark-input-focus-border;
-    }
-  }
-}
-
-.itf-datepicker {
-  &.with-addon .addon-end {
-    pointer-events: all;
-    padding-right: 0.25rem;
-  }
-  .form-control {
-    border-radius: $input-border-radius !important;
-  }
-
-  &__dropdown {
-    width: max-content;
-    border: $input-border-width solid $input-border-color;
-    border-radius: $input-border-radius;
-    background-color: $body-bg;
-    overflow: hidden;
-    @if $enable-shadows {
-      @include box-shadow($input-box-shadow, $input-btn-focus-box-shadow);
-    } @else {
-      // Avoid using mixin so we can pass custom focus shadow properly
-      box-shadow: $input-btn-focus-box-shadow;
-    }
-  }
-}
-</style>
 <script>
 import {
   Vue, Component, Prop, Inject

package/src/components/datepicker/DatePickerInline.vue

@@ -20,51 +20,9 @@
     </div>
   </div>
 </template>
-<style lang="scss">
-@import '../../assets/scss/variables';
-//@import '~bootstrap/scss/nav';
-//@import '~bootstrap/scss/buttons';
-@import './datepicker.scss';
-
-.itf-datepicker-inline {
-  display: inline-flex;
-
-  @include media-breakpoint-down(sm) {
-    display: inline-block !important;
-  }
-
-  [data-theme="dark"] & {
-    .btn-outline-primary {
-      &.active {
-        color: $dark-body-bg;
-        background-color: $dark-primary;
-        border-color: $dark-primary;
-      }
-      &:hover {
-        color: $dark-body-bg;
-        background-color: darken($dark-primary, 10%);
-        border-color: darken($dark-primary, 10%);
-      }
-    }
-  }
-
-  .air-datepicker-title {
-    padding: 0 0.75rem;
-    height: 32px;
-    line-height: 32px;
-    color: var(--adp-nav-color-secondary);
-  }
-  .btn {
-    border-color: transparent;
-  }
-}
-</style>
 <script>
 import { Vue, Component, Prop } from 'vue-property-decorator';
 import { DateTime } from 'luxon';
-import AirDatepicker from 'air-datepicker';
-import localeEn from 'air-datepicker/locale/en';
-import localeUk from 'air-datepicker/locale/uk';
 import ITFSettings from '../../ITFSettings';
 
 export default @Component({
@@ -104,11 +62,21 @@ class itfDatePickerInline extends Vue {
     this.createCalendar();
   }
 
-  createCalendar() {
+  async createCalendar() {
     if (this.calendar) {
       this.destroyCalendar();
     }
 
+    const [
+      { default: AirDatepicker },
+      { default: localeEn },
+      { default: localeUk }
+    ] = await Promise.all([
+      import('babel-loader!air-datepicker/air-datepicker.js'),
+      import('babel-loader!air-datepicker/locale/en'),
+      import('babel-loader!air-datepicker/locale/uk')
+    ]);
+
     this.calendar = new AirDatepicker(this.$refs.calendar, {
       locale: this.$i18n.locale === 'en' ? localeEn : localeUk,
       firstDay: 1,

package/src/components/datepicker/DateRangePicker.vue

@@ -68,64 +68,6 @@
     </div>
   </div>
 </template>
-<style lang="scss">
-@import '../../assets/scss/variables';
-@import '../../assets/scss/input-addon';
-
-.itf-daterange-picker {
-  display: flex;
-  .input-group-text.hidden {
-    visibility: hidden;
-  }
-
-  &.with-addon .addon-end {
-    pointer-events: all;
-    padding-right: 0.25rem;
-  }
-  &__dropdown {
-    width: max-content;
-    overflow: hidden;
-    border: $input-border-width solid $input-border-color;
-    border-radius: $input-border-radius;
-    background-color: $body-bg;
-    @if $enable-shadows {
-      @include box-shadow($input-box-shadow, $input-btn-focus-box-shadow);
-    } @else {
-      // Avoid using mixin so we can pass custom focus shadow properly
-      box-shadow: $input-btn-focus-box-shadow;
-    }
-  }
-
-  .form-control.focused, .form-control.focused input.form-control {
-    background-color: $input-focus-border-color;
-  }
-  [data-theme="dark"] & {
-    &__dropdown {
-      box-shadow: 0 0 0 2px $dark-input-focus-border;
-    }
-    .form-control.focused, .form-control.focused input.form-control {
-      background-color: $dark-input-focus-border-color;
-    }
-    .input-group-text {
-      color: #fff;
-    }
-  }
-  .form-control input.form-control {
-    border: 0 none;
-    padding: 0;
-    max-width: 100px;
-
-    &:focus, &:active {
-      border: 0;
-      box-shadow: none;
-    }
-  }
-  .input-group-text {
-    border: 0 none;
-    background: transparent;
-  }
-}
-</style>
 <script>
 import { Vue, Component, Prop, Inject } from 'vue-property-decorator';
 import { IMask, IMaskComponent } from 'vue-imask';

package/src/components/datepicker/DateRangePickerInline.vue

@@ -20,47 +20,9 @@
     </div>
   </div>
 </template>
-<style lang="scss">
-@import '../../assets/scss/variables';
-//@import '~bootstrap/scss/nav';
-//@import '~bootstrap/scss/buttons';
-@import './datepicker.scss';
-
-.itf-datepicker-inline {
-  display: inline-flex;
-
-  [data-theme="dark"] & {
-    .btn-outline-primary {
-      &.active {
-        color: $dark-body-bg;
-        background-color: $dark-primary;
-        border-color: $dark-primary;
-      }
-      &:hover {
-        color: $dark-body-bg;
-        background-color: darken($dark-primary, 10%);
-        border-color: darken($dark-primary, 10%);
-      }
-    }
-  }
-
-  .air-datepicker-title {
-    padding: 0 0.75rem;
-    height: 32px;
-    line-height: 32px;
-    color: var(--adp-nav-color-secondary);
-  }
-  .btn {
-    border-color: transparent;
-  }
-}
-</style>
 <script>
 import { Vue, Component, Prop } from 'vue-property-decorator';
 import { DateTime } from 'luxon';
-import AirDatepicker from 'air-datepicker/air-datepicker.js';
-import localeEn from 'air-datepicker/locale/en';
-import localeUk from 'air-datepicker/locale/uk';
 import ITFSettings from '../../ITFSettings';
 
 export default @Component({
@@ -98,10 +60,19 @@ class itfDatePickerInline extends Vue {
     this.createCalendar();
   }
 
-  createCalendar() {
+  async createCalendar() {
     if (this.calendar) {
       this.destroyCalendar();
     }
+    const [
+      { default: AirDatepicker },
+      { default: localeEn },
+      { default: localeUk }
+    ] = await Promise.all([
+      import('babel-loader!air-datepicker/air-datepicker.js'),
+      import('babel-loader!air-datepicker/locale/en'),
+      import('babel-loader!air-datepicker/locale/uk')
+    ]);
 
     this.calendar = new AirDatepicker(this.$refs.calendar, {
       firstDay: 1,

package/src/components/datepicker/MonthPicker.vue

@@ -31,40 +31,6 @@
     </div>
   </div>
 </template>
-<style lang="scss">
-@import '../../assets/scss/variables';
-@import '../../assets/scss/directives/tooltip';
-@import '../../assets/scss/input-addon';
-
-.itf-monthpicker {
-  .form-control {
-    background-color: $input-bg;
-
-    &:focus {
-      background-color: $body-bg;
-    }
-  }
-  &__dropdown {
-    width: max-content;
-    border: $input-border-width solid $input-border-color;
-    border-radius: $input-border-radius;
-    background-color: $body-bg;
-    overflow: hidden;
-    @if $enable-shadows {
-      @include box-shadow($input-box-shadow, $input-btn-focus-box-shadow);
-    } @else {
-      // Avoid using mixin so we can pass custom focus shadow properly
-      box-shadow: $input-btn-focus-box-shadow;
-    }
-
-    [data-theme="dark"] & {
-      background-color: $dark-body-bg;
-      border-color: $dark-border-color;
-      box-shadow: 0 0 0 2px $dark-input-focus-border;
-    }
-  }
-}
-</style>
 <script>
 import { Vue, Component, Prop, Inject } from 'vue-property-decorator';
 import { DateTime } from 'luxon';