@itfin/components 1.2.31 → 1.2.34

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/datepicker/index.stories.js

@@ -49,28 +49,28 @@ storiesOf('Common', module)
         {{date}}
 
         <br />
-        <itf-date-picker-inline :custom-days="customDays" :value="date" v-model.lazy="date"></itf-date-picker-inline>
+        <itf-date-picker-inline value-format="yyyy-MM-dd" :custom-days="customDays" :value="date" v-model.lazy="date"></itf-date-picker-inline>
 
         <br />
         <br />
 
-        <itf-date-picker-inline only-calendar :custom-days="customDays" :value="date" v-model.lazy="date"></itf-date-picker-inline>
+        <itf-date-picker-inline value-format="yyyy-MM-dd" only-calendar :custom-days="customDays" :value="date" v-model.lazy="date"></itf-date-picker-inline>
 
         <br />
         <br />
 
-        <itf-date-picker :value="date" v-model.lazy="date"></itf-date-picker>
+        <itf-date-picker value-format="yyyy-MM-dd" :value="date" v-model.lazy="date"></itf-date-picker>
 
         <br />
         <br />
-        <itf-date-picker start-view="years" only-calendar :value="date" v-model.lazy="date"></itf-date-picker>
+        <itf-date-picker value-format="yyyy-MM-dd" start-view="years" only-calendar :value="date" v-model.lazy="date"></itf-date-picker>
 
 
         <h2>Range</h2>
 
-        <itf-date-range-picker v-model="dateRange"></itf-date-range-picker>
+        <itf-date-range-picker value-format="yyyy-MM-dd" v-model="dateRange"></itf-date-range-picker>
 
-        <itf-date-range-picker-inline v-model="dateRange"></itf-date-range-picker-inline>
+        <itf-date-range-picker-inline value-format="yyyy-MM-dd" v-model="dateRange"></itf-date-range-picker-inline>
 
         <h2>Month</h2>
 

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

package/src/components/select/AirSelect.vue

@@ -245,116 +245,3 @@ class itfAirSelect extends Vue {
   }
 }
 </script>
-
-<style lang="scss" scoped>
-@import '../../assets/scss/variables';
-.select {
-  position: relative;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 14px;
-  transition: background 0.1s;
-  &:focus {
-    outline: none;
-  }
-}
-.valueContainer {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  min-height: 32px;
-  justify-content: space-between;
-}
-.valueMulti {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  // padding-top: 5px;
-}
-.valueMultiItem {
-  height: 22px;
-  overflow: hidden;
-  border-radius: 3px;
-  display: flex;
-  align-items: center;
-  user-select: none;
-  background: #f0f0f0;
-  font-size: 14px;
-  .valueMultiItemLabel {
-    flex: auto;
-    padding: 0 4px;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    border-right: 1px solid #ddd;
-  }
-  .valueMultiItemClose {
-    border-left: none;
-    overflow: hidden;
-    padding: 0 2px;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    &:hover {
-      background: #ff4757;
-      color: white;
-    }
-    .icon {
-      width: 18px;
-      height: 18px;
-      fill: currentColor;
-    }
-  }
-}
-.addMore {
-  font-size: 12.5px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  color: #0052cc;
-  &:hover,
-  &:visited,
-  &:active {
-    color: #0052cc;
-  }
-  &:hover {
-    text-decoration: underline;
-  }
-  .icon {
-    width: 16px;
-    height: 16px;
-    fill: currentColor;
-    margin-right: 2px;
-  }
-}
-
-[data-theme="dark"] .select.normal {
-  border-color: $dark-input-focus-border-color;
-  background: $dark-input-focus-border-color;
-}
-.select.normal {
-  width: 100%;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  border-width: 1px;
-  border-color: #dfe1e6;
-  background-color: #f4f5f7;
-  position: relative;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 14px;
-  -webkit-transition: background .1s;
-  transition: background .1s;
-}
-.select.normal:hover {
-  @apply bg-backgroundLight;
-}
-.select.normal:focus {
-  @apply border border-borderInputFocus bg-white text-borderInputFocus;
-  box-shadow: 0 0 0 1px currentColor;
-}
-.select.empty {
-  display: inline-block;
-}
-</style>

package/src/components/select/Dropdown.vue

@@ -214,73 +214,3 @@ class itfDropdown extends Vue {
   }
 }
 </script>
-
-<style scoped lang="scss">
-@import '../../assets/scss/variables';
-.dropdown {
-  z-index: 101;
-  position: absolute;
-  top: calc(100% + 4px);
-  left: -1px;
-  border-radius: 0 0 4px 4px;
-  background: #fff;
-  box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px,
-  rgba(9, 30, 66, 0.31) 0px 0px 1px;
-  width: 100%;
-}
-
-[data-theme="dark"] .dropdown {
-  background: $dark-input-focus-border-color;
-
-  .option {
-    &.select-option-is-active {
-      background: $dark-border-color;
-    }
-  }
-}
-
-.dropdownInput {
-  padding: 10px 14px 8px;
-  width: 100%;
-  border: none;
-  color: #172b4d;
-  background: none;
-
-  &:focus {
-    outline: none;
-  }
-}
-
-.options {
-  padding: 5px 0;
-  max-height: 200px;
-  overflow-x: hidden;
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-  // &::-webkit-scrollbar {
-  //   width: 7px;
-  // }
-  // &::-webkit-scrollbar-track {
-  //   background: none;
-  // }
-  // &::-webkit-scrollbar-thumb {
-  //   // border-radius: 99px;
-  //   background: #d1d1d1;
-  // }
-}
-
-.option {
-  padding: 8px 14px;
-  word-break: break-word;
-  cursor: pointer;
-
-  &.select-option-is-active {
-    background: #e8ecee;
-  }
-}
-
-.optionsNoResults {
-  padding: 0px 15px 10px;
-  color: #8993a4;
-}
-</style>