@itfin/components 1.2.33 → 1.2.35

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/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/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';

package/src/components/datepicker/PeriodPicker.vue

@@ -72,103 +72,6 @@
     </div>
   </div>
 </template>
-<style lang="scss">
-@import '../../assets/scss/variables';
-
-.itf-periodpicker {
-  .form-control {
-    background-color: $input-bg;
-
-    &:focus {
-      background-color: $body-bg;
-    }
-  }
-
-  .air-datepicker {
-    --adp-font-family: #{$font-family-base};
-    --adp-color-current-date: #{$primary};
-    --adp-cell-background-color-selected: #{$primary};
-    --adp-cell-background-color-selected-hover: #{lighten($primary, 10%)};
-    --adp-day-name-color: #{$secondary};
-  }
-
-  &__quarters {
-    gap: 5px;
-  }
-  &__quarters, &__months {
-    display: flex;
-  }
-
-  &__month {
-    flex: 1 1 auto;
-    border-radius: 0;
-    justify-content: center;
-    padding-left: 0;
-    padding-right: 0;
-    font-size: 14px;
-  }
-
-  &__quarter {
-    flex: 1 1 33.3%;
-    cursor: pointer;
-    color: var(--grey);
-    background-color: rgba(0, 0, 0, 0.04);
-    height: 125px;
-    width: 125px;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    border-radius: $input-border-radius;
-    overflow: hidden;
-    text-align: right;
-
-    &:hover {
-      background-color: rgba(9, 30, 66, 0.08);
-    }
-    &.active-inside {
-      background-color: rgba(9, 30, 66, 0.08);
-    }
-    &.active {
-      background-color: $primary;
-      color: #fff;
-
-      .itf-periodpicker__month {
-        color: #fff;
-      }
-    }
-
-    .quarter-number {
-      font-size: 36px;
-    }
-  }
-
-  &__dropdown {
-    padding: 10px 15px;
-    min-width: 400px;
-    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;
-    }
-
-    .btn-whole {
-      background-color: rgba(0, 0, 0, 0.04);
-    }
-  }
-}
-</style>
 <script>
 import { Vue, Component, Prop, Inject } from 'vue-property-decorator';
 import { DateTime } from 'luxon';

package/src/components/dropdown/Dropdown.vue

@@ -21,20 +21,6 @@
   </div>
 
 </template>
-<style lang="scss">
-@import '../../assets/scss/variables';
-//@import '~bootstrap/scss/dropdown';
-//@import '~bootstrap/scss/transitions';
-
-.itf-dropdown {
-  display: inline-block;
-
-  &__menu.dropdown-menu {
-    border: 0 none;
-    padding: 0;
-  }
-}
-</style>
 <script>
 import { Vue, Component, Prop, Watch, PropSync } from 'vue-property-decorator';
 import itfButton from '../button/Button';

package/src/components/form/Form.vue

@@ -3,10 +3,6 @@
     <slot :valid="valid" :validate="doValidation" :reset="resetValidation"/>
   </div>
 </template>
-<style lang="scss">
-@import '../../assets/scss/variables';
-//@import '~bootstrap/scss/forms';
-</style>
 <script>
 import { Vue, Component, Watch, Model } from 'vue-property-decorator';
 import * as validators from '../../helpers/validators';

package/src/components/form/Label.vue

@@ -23,30 +23,6 @@
   </div>
 
 </template>
-<style lang="scss" scoped>
-@import '../../assets/scss/variables';
-
-.itf-label {
-  &.no-details {
-    margin-bottom: .5rem;
-  }
-  &__label {
-    .star {
-      color: $danger;
-    }
-  }
-  &__errors {
-    min-height: 21px;
-    margin-top: 4px;
-    font-size: 0.75rem;
-    opacity: .5;
-
-    &.valid-feedback, &.invalid-feedback {
-      opacity: 1;
-    }
-  }
-}
-</style>
 <script>
 import { Component, Prop, Inject, Mixins } from 'vue-property-decorator';
 import ValidatableMixin from '../../mixins/ValidatableMixin';

package/src/components/icon/Icon.vue

@@ -3,14 +3,6 @@
     <component @click="$emit('click')" :style="style" :is="iconComponent"></component>
   </div>
 </template>
-<style lang="scss" scoped>
-@import '../../assets/scss/variables';
-
-.itf-icon {
-  display: inline-block;
-  pointer-events: none;
-}
-</style>
 <script>
 import { Vue, Prop, Component } from 'vue-property-decorator';
 import icons from './icons';

package/src/components/modal/Modal.vue

@@ -23,19 +23,6 @@
   </div>
 
 </template>
-<style lang="scss">
-@import '../../assets/scss/variables';
-//@import '~bootstrap/scss/modal';
-//@import '~bootstrap/scss/transitions';
-
-.itf-modal {
-  .modal-header {
-    .btn-close {
-      margin-right: 0;
-    }
-  }
-}
-</style>
 <script>
 import { Vue, Component, Prop, Watch, PropSync, Inject } from 'vue-property-decorator';
 import itfButton from '../button/Button';

package/src/components/pagination/Pagination.vue

@@ -25,20 +25,6 @@
   </nav>
 
 </template>
-<style lang="scss">
-@import '../../assets/scss/variables';
-
-.itf-pagination.pagination {
-  padding-left: 0;
-
-  .page-item {
-    margin-right: 3px;
-    .page-link {
-      border-radius: .5rem;
-    }
-  }
-}
-</style>
 <script>
 import { Vue, Component, Model, Prop } from 'vue-property-decorator';
 import itfIcon from '../icon/Icon.vue';

package/src/components/pdf-viewer/PdfViewerSpa.vue

@@ -1013,9 +1013,6 @@
     <slot v-bind="slotProps" name="footer"></slot>
   </div>
 </template>
-<style lang="scss">
-@import './styles/index.scss';
-</style>
 <script>
 import {
   Component, Prop, Vue, Watch,

package/src/components/popover/ConfirmPopover.vue

@@ -18,11 +18,6 @@
     </div>
   </itf-popover>
 </template>
-<style lang="scss">
-.nopadding .popover-body {
-  padding: 0;
-}
-</style>
 <script>
 import { Vue, Component, Prop, PropSync } from 'vue-property-decorator';
 import itfPopover from './Popover';

package/src/components/popover/Popover.vue

@@ -9,41 +9,6 @@
   </div>
 
 </template>
-<style lang="scss">
-@import '../../assets/scss/variables';
-
-.itf-popover {
-  display: none;
-
-  .popover-body > & {
-    display: block;
-  }
-  .border-right {
-    border-right: 1px solid #eee;
-  }
-}
-.itf-popover-container {
-  display: inline-block;
-}
-
-[data-theme="dark"] {
-  .itf-popover {
-    .border-right {
-      border-color: $dark-border-color;
-    }
-  }
-  .popover {
-    background-color: $dark-body-bg;
-    border-color: $dark-border-color;
-  }
-  .bs-popover-bottom > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after {
-    border-bottom-color: $dark-border-color;
-  }
-  .popover-body {
-    color: $dark-body-color;
-  }
-}
-</style>
 <script>
 import {
   Vue, Component, Prop, Watch, PropSync,

package/src/components/segmented-control/SegmentedControl.vue

@@ -29,146 +29,6 @@
     </div>
   </div>
 </template>
-<style lang="scss">
-@import '../../assets/scss/variables';
-
-.itf-segmeneted-control {
-  --itf-segmeneted-control--background: #{$input-bg};
-  --itf-segmeneted-control--border-radius: #{$border-radius};
-  --itf-segmeneted-control--shadow: 0 1px 3px rgba(0,0,0,0.1);
-
-  cursor: pointer;
-  background: var(--itf-segmeneted-control--background);
-  border-radius: var(--itf-segmeneted-control--border-radius);
-  margin: 0;
-  padding: 2px;
-  border: none;
-  outline: none;
-  display: inline-grid;
-  grid-auto-flow: column;
-  grid-auto-columns: 1fr;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  overflow: hidden;
-
-  .option {
-    position: relative;
-    cursor: pointer;
-
-    &:hover input:not(:checked) + label span,
-    &:active input:not(:checked) + label span,
-    &:focus input:not(:checked) + label span {
-      /*opacity: .2;*/
-      color: var(--v-primary-base);
-    }
-    &:active input:not(:checked) + label span {
-      transform: scale(.95);
-    }
-    &:first-of-type {
-      grid-column: 1;
-      grid-row: 1;
-      box-shadow: none;
-
-      label::before {
-        opacity: 0;
-      }
-      label::after {
-        opacity: 0;
-      }
-    }
-    &:last-of-type {
-      label::after {
-        opacity: 0;
-      }
-    }
-    label {
-      justify-content: center;
-      height: 100%;
-      align-items: center;
-      display: flex;
-      cursor: pointer;
-      position: relative;
-      text-align: center;
-      padding: .25rem 1.5rem;
-      background: rgba(255, 255, 255, 0);
-      color: rgba(0, 0, 0, 1);
-
-      &::before,
-      &::after {
-        content: '';
-        width: 1px;
-        background: rgba(142, 142, 147, .15);
-        position: absolute;
-        top: 14%;
-        bottom: 14%;
-        border-radius: var(--itf-segmeneted-control--border-radius);
-        will-change: background;
-        -webkit-transition: background .2s ease;
-        transition: background .2s ease;
-      }
-      &::before {
-        left: 0;
-        transform: translateX(-.5px);
-      }
-      &::after {
-        right: 0;
-        transform: translateX(.5px);
-      }
-      span {
-        display: block;
-        position: relative;
-        z-index: 2;
-        -webkit-transition: all .2s ease;
-        transition: all .2s ease;
-        will-change: transform;
-      }
-    }
-
-    input {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      width: 100%;
-      height: 100%;
-      padding: 0;
-      margin: 0;
-      -webkit-appearance: none;
-      -moz-appearance: none;
-      appearance: none;
-      outline: none;
-      border: none;
-      opacity: 0;
-
-      &:checked + label {
-        cursor: default;
-      }
-      &:checked + label::before,
-      &:checked + label::after {
-        background: var(--itf-segmeneted-control--background);
-        z-index: 1;
-      }
-    }
-  }
-  .selection {
-    margin-right: 1px;
-    background: rgba(255, 255, 255, 1);
-    border: .5px solid rgba(0, 0, 0, 0.04);
-    box-shadow: var(--itf-segmeneted-control--shadow);
-    /*box-shadow: 0 3px 8px 0 rgba(0,0,0,0.12), 0 3px 1px 0 rgba(0,0,0,0.04);*/
-    border-radius: var(--itf-segmeneted-control--border-radius);
-    grid-column: 1;
-    grid-row: 1;
-    z-index: 2;
-    will-change: transform;
-    -webkit-transition: transform .2s ease;
-    transition: transform .2s ease;
-  }
-}
-</style>
 <script>
 import { Vue, Component, Model, Prop, Watch } from 'vue-property-decorator';
 import itfSelect from '../select/Select';