@itfin/components 1.2.33 → 1.2.35

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="dropdown" :style="{ width: `${dropdownWidth}px` }">
+  <div class="air-dropdown" :style="{ width: `${dropdownWidth}px` }">
     <input
       v-if="searchable"
       class="dropdownInput"
@@ -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>

package/src/components/select/Select.vue

@@ -143,84 +143,6 @@
     <slot name="footer" v-bind="scope.footer" />
   </div>
 </template>
-<style lang="scss">
-@import '../../assets/scss/variables';
-@import '../../assets/scss/directives/loading';
-@import '../../assets/scss/components/variables';
-@import '../../assets/scss/components/component';
-@import '../../assets/scss/components/animations';
-@import '../../assets/scss/components/states';
-
-@import '../../assets/scss/components/dropdown-toggle';
-@import '../../assets/scss/components/open-indicator';
-@import '../../assets/scss/components/clear';
-@import '../../assets/scss/components/dropdown-menu';
-@import '../../assets/scss/components/dropdown-option';
-@import '../../assets/scss/components/selected';
-@import '../../assets/scss/components/search-input';
-@import '../../assets/scss/components/spinner';
-
-[data-theme="dark"] {
-  .itf-select {
-    &.vs--open .form-control {
-      box-shadow: 0 0 0 0.125rem $dark-input-focus-border;
-      border-color: $dark-input-focus-border-color;
-      background: $dark-input-focus-border-color;
-    }
-    &__dropdown-menu {
-      background-color: $dark-body-bg;
-      border-color: $dark-input-focus-border;
-
-      .dropdown-item {
-        color: $dark-body-color;
-
-        &.active, &:active {
-          background-color: $dark-primary;
-          color: $dark-body-bg;
-        }
-      }
-    }
-  }
-}
-
-.itf-select {
-  cursor: pointer;
-
-  .form-control {
-    padding: 0.3125rem 0.75rem;
-
-    &.is-valid, &.is-invalid {
-      background-image: none;
-    }
-    &.is-invalid .vs__open-indicator {
-      color: $danger;
-    }
-    &.is-valid .vs__open-indicator {
-      color: $success;
-    }
-  }
-  &.vs--multiple .form-control {
-    padding-top: 0.125rem;
-    padding-bottom: 0.125rem;
-  }
-  &.vs--open .form-control {
-    box-shadow: 0 0 0 0.125rem $input-focus-border;
-    border-color: $body-bg;
-    background: $body-bg;
-  }
-  &__dropdown-menu {
-    background-color: $body-bg;
-    //border: 2px solid $input-focus-border;
-    border: 0 none;
-    padding-left: 0.125rem !important;
-    padding-right: 0.125rem !important;
-    left: -2px;
-    right: -2px;
-    width: auto;
-    box-shadow: rgb(9 30 66 / 25%) 0px 4px 8px -2px, rgb(9 30 66 / 31%) 0px 0px 1px;
-  }
-}
-</style>
 <script>
 import pointerScroll from '../../mixins/pointerScroll';
 import typeAheadPointer from '../../mixins/typeAheadPointer';

package/src/components/table/Table.vue

@@ -68,285 +68,6 @@
   </div>
 
 </template>
-<style lang="scss">
-@import '../../assets/scss/variables';
-
-:root {
-  --itf-table-background-color: #fff;
-  --itf-table-sticky-top: 0;
-  --itf-table-border-color: #e1e4e7;
-  --itf-table-hover-color: #f0f0f0;
-  --itf-table-strip-color: #f8f8f8;//#dadce033;
-  --itf-table-sorted-color: #f8f8f8;//#dadce033;
-  --itf-table-shadow-width: 3px;
-  --itf-table-row-cursor: default;
-  --itf-table-sticky-shadow1: rgb(0 0 0 / 16%);
-  --itf-table-sticky-shadow2: rgb(0 0 0 / 23%);
-}
-
-[data-theme="dark"] {
-  --itf-table-background-color: #{$dark-body-bg};
-  --itf-table-border-color: #666;
-  --itf-table-hover-color: #111;
-  --itf-table-strip-color: #222;
-  --itf-table-sorted-color: #444;
-  --itf-table-sticky-shadow1: rgb(255 255 255 / 16%);
-  --itf-table-sticky-shadow2: rgb(255 255 255 / 23%);
-}
-
-.itf-table {
-  width: 100%;
-  grid-template-columns: [col-start] auto [col-end];
-  grid-template-rows: [header-start] 56px [header-end row-start] auto [row-end];
-
-  &__wrapper {
-    margin-top: 10px;
-    margin-right: -30px;
-    background-color: var(--itf-table-background-color);
-    padding-right: 0;
-    //overflow: hidden;
-    width: 100%;
-  }
-
-  &__headers {
-    .scroller {
-      overflow-x: hidden;
-      overflow-y: visible;
-      padding-bottom: 1px;
-    }
-    .itf-table__header-row {
-      display: grid;
-      grid-template-columns: var(--itf-table-template);
-    }
-    .itf-table__header.align-left > span {
-      justify-content: flex-start;
-      text-align: left;
-    }
-  }
-  &__rows {
-    display: grid;
-    overflow: auto;
-    grid-template-columns: var(--itf-table-template);
-    padding-bottom: 10px;
-
-    & > .itf-table__row {
-      display: contents;
-
-      &:not(.itf-table__summary-row) {
-        cursor: var(--itf-table-row-cursor);
-      }
-    }
-  }
-
-  &--striped &__row:nth-child(even) &__cell {
-    background-color: var(--itf-table-strip-color);
-  }
-
-  &__cell.itf-table__cell--sorted {
-    background-color: var(--itf-table-sorted-color);
-  }
-  &--hoverable &__rows{
-    & > .itf-table__row:not(.itf-table__summary-row) {
-      &:hover > .itf-table__cell,
-      &:hover > .itf-table__cell--sorted {
-        background-color: var(--itf-table-hover-color);
-      }
-    }
-  }
-
-  .itf-table__sticky-header &__headers {
-    position: sticky;
-    top: var(--itf-table-sticky-top);
-    z-index: 4;
-
-    .itf-table__header-row:last-child .itf-table__header {
-      &:after {
-        display: block;
-        content: ' ';
-        border-top: 1px solid var(--itf-table-border-color);
-        left: 0;
-        bottom: 0;
-        right: 0;
-        height: 0;
-      }
-    }
-  }
-
-  &__header {
-    background-color: var(--itf-table-background-color);
-    grid-row: header;
-    font-weight: 500;
-    &--sortable {
-      cursor: pointer;
-    }
-    &--sorted {
-      background-color: var(--itf-table-sorted-color);
-    }
-
-    & > span {
-      text-overflow: ellipsis;
-      overflow: hidden;
-      height: 100%;
-      display: block;
-      padding: 8px 10px;
-      text-align: right;
-
-      &:hover .com-table-sort-btn {
-        opacity: 1;
-      }
-    }
-
-    &:first-child > span {
-      text-align: left;
-    }
-  }
-
-  &__small &__header span, &__small &__cell {
-    padding: 4px 5px;
-  }
-
-  &__summary-row &__cell {
-    padding-top: 2rem;
-    border-bottom: 1px solid var(--itf-table-border-color);
-
-    &:first-child {
-      font-weight: 500;
-    }
-  }
-
-  &--borders &__cell {
-    border-bottom: 1px solid var(--itf-table-border-color);
-  }
-
-  &__cell {
-    background-color: var(--itf-table-background-color);
-    padding: 8px 10px;
-    //border-left: 1px solid var(--itf-table-border-color);
-    align-items: center;
-    display: flex;
-    justify-content: end;
-    text-align: right;
-    word-break: break-word;
-
-    &:first-child, &.align-left {
-      justify-content: flex-start;
-      text-align: left;
-    }
-  }
-
-  // First column sticky
-  &__sticky-column & {
-    .itf-table__header:nth-child(1) {
-      position: sticky;
-      left: 0;
-      z-index: 5;
-      border-right: solid 1px var(--itf-table-border-color);
-    }
-    .itf-table__cell:nth-child(1) {
-      position: sticky;
-      left: 0;
-      z-index: 3;
-      border-right: solid 1px var(--itf-table-border-color);
-    }
-  }
-  &__sticky-column &__header, &__sticky-column &__cell {
-    &:first-child {
-      &:before {
-        content: " ";
-        display: block;
-        //background: rgba(0, 0, 0, .1);
-        top: 0;
-        left: 100%;
-        width: 1px;
-        box-shadow: var(--itf-table-sticky-shadow1) 2px 0px 3px, var(--itf-table-sticky-shadow2) 2px 0px 3px;
-        height: 100%;
-        bottom: 0;
-        position: absolute;
-        opacity: 0;
-        transition: opacity .25s ease-in-out;
-      }
-    }
-  }
-  .scrolled-x & {
-    .itf-table__header, .itf-table__cell {
-      &:first-child {
-        &:before {
-          opacity: 1;
-        }
-      }
-    }
-  }
-
-  // Last column sticky
-  &__sticky-last-column & {
-    .itf-table__header:last-child {
-      position: sticky;
-      right: 0;
-      z-index: 5;
-      border-left: solid 1px var(--itf-table-border-color);
-    }
-    .itf-table__cell:last-child {
-      position: sticky;
-      right: 0;
-      z-index: 3;
-      border-left: solid 1px var(--itf-table-border-color);
-    }
-  }
-  &__sticky-last-column &__header, &__sticky-column &__cell {
-    &:last-child {
-      &:before {
-        content: " ";
-        display: block;
-        //background: rgba(0, 0, 0, .1);
-        top: 0;
-        left: 0;
-        width: 1px;
-        box-shadow: var(--itf-table-sticky-shadow1) -2px 0px 3px, var(--itf-table-sticky-shadow2) -2px 0px 3px;
-        height: 100%;
-        bottom: 0;
-        position: absolute;
-        opacity: 1;
-        transition: opacity .25s ease-in-out;
-      }
-    }
-  }
-  .scrolled-right & {
-    .itf-table__header, .itf-table__cell {
-      &:last-child {
-        &:before {
-          opacity: 0;
-        }
-      }
-    }
-  }
-
-  .scrolled-y & {
-    .scroller {
-      .itf-table__header {
-        border-top: 1px solid var(--itf-table-border-color);
-      }
-      &:after {
-        content: " ";
-        display: block;
-        left: 0;
-        right: 0;
-        background: rgba(0, 0, 0, .1);
-        height: calc(var(--itf-table-shadow-width) - 1px); // subtract 1px border-top
-        top: 100%;
-        position: absolute;
-      }
-    }
-  }
-}
-
-.table2.table-retrieve tbody tr td.value {
-  border: solid 1px transparent; }
-
-.table2.table-border-hover tbody tr:hover td.value:hover,
-.table2.table-retrieve tbody tr:hover td.value:hover {
-  border: solid 1px #64abdc !important;
-  cursor: pointer; }
-</style>
 <script>
 import { Vue, Component, Prop, PropSync } from 'vue-property-decorator';
 import itfButton from '../button/Button.vue';

package/src/components/tabs/Tab.vue

@@ -3,11 +3,6 @@
     <span><slot /></span>
   </a>
 </template>
-<style lang="scss" scoped>
-.itf-tab {
-
-}
-</style>
 <script>
 import { Vue, Component, Prop, Inject } from 'vue-property-decorator';
 

package/src/components/tabs/TabContent.vue

@@ -3,11 +3,6 @@
     <slot />
   </div>
 </template>
-<style lang="scss" scoped>
-.itf-tab-content {
-
-}
-</style>
 <script>
 import { Vue, Component, Prop, Inject } from 'vue-property-decorator';
 

package/src/components/tabs/Tabs.vue

@@ -3,7 +3,6 @@ import {
   Vue, Component, Model, Emit, Prop
 } from 'vue-property-decorator';
 import itfTab from './Tab';
-import './tabs.scss';
 
 export default @Component({
   name: 'itfTabs',

package/src/components/text-field/TextField.vue

@@ -42,21 +42,6 @@
   </div>
 
 </template>
-<style lang="scss" scoped>
-@import '../../assets/scss/variables';
-//@import '~bootstrap/scss/button-group';
-@import '../../assets/scss/input-addon';
-
-.itf-text-field {
-  &__input {
-    border-radius: $input-border-radius !important;
-  }
-  .addon-end {
-    pointer-events: all;
-    padding-right: 0.25rem;
-  }
-}
-</style>
 <script>
 import { Vue, Component, Model, Inject, Prop } from 'vue-property-decorator';
 import itfIcon from '../icon/Icon';

package/src/components/text-field/Textarea.vue

@@ -26,36 +26,6 @@
   </div>
 
 </template>
-<style lang="scss" scoped>
-@import '../../assets/scss/variables';
-//@import '~bootstrap/scss/button-group';
-@import '../../assets/scss/input-addon';
-
-.itf-textarea {
-  position: relative;
-
-  &__input {
-    border-radius: $input-border-radius !important;
-    resize: none;
-  }
-  &__autogrow &__input {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    height: 100%;
-    width: 100%;
-  }
-  &__autogrow &__autogrow-text {
-    white-space: pre-line;
-    visibility: hidden;
-    min-height: 4rem;
-    max-height: 75vh; // жалувались, що коли багато тексту,
-                      // то поле за межі вікна виходить і не зручно
-  }
-}
-</style>
 <script>
 import { Vue, Component, Model, Inject, Prop } from 'vue-property-decorator';
 import itfIcon from '../icon/Icon';

package/src/components/tooltip/Tooltip.vue

@@ -7,7 +7,6 @@
 <script>
 import { Vue, Component, Model, Inject, Prop } from 'vue-property-decorator';
 import tippy from 'tippy.js';
-import '../../assets/scss/directives/tooltip.scss';
 
 export default @Component({
   name: 'itfTooltip',

package/src/components/tree/TreeView.vue

@@ -18,25 +18,6 @@
   </div>
 
 </template>
-<style lang="scss">
-@import '../../assets/scss/variables';
-
-.itf-tree-view {
-  .itf-button {
-    &.depth-0 {
-      padding-left: $spacer;
-    }
-
-    &.depth-1 {
-      padding-left: $spacer * 2;
-    }
-
-    &.depth-2 {
-      padding-left: $spacer * 3;
-    }
-  }
-}
-</style>
 <script>
 import { Vue, Component, Model, Inject, Prop } from 'vue-property-decorator';
 import itfIcon from '../icon/Icon';

package/src/components/wizard/Sidebar.vue

@@ -20,10 +20,6 @@
   </div>
 
 </template>
-<style lang="scss">
-.itf-wizard-sidebar {
-}
-</style>
 <script>
 import { Vue, Component, Prop } from 'vue-property-decorator';
 import itfIcon from '../icon/Icon';