@itfin/components 1.2.31 → 1.2.34

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

package/src/components/wizard/Step.vue

@@ -100,11 +100,6 @@
     </itf-form>
   </div>
 </template>
-<style lang="scss" scoped>
-.itf-wizard-step {
-
-}
-</style>
 <script>
 import { Vue, Component, Prop, Emit, Inject } from 'vue-property-decorator';
 import itfForm from '../form/Form';

package/src/components/wizard/Wizard.vue

@@ -4,7 +4,6 @@ import {
 } from 'vue-property-decorator';
 import itfWizardStep from './Step';
 import itfWizardSidebar from './Sidebar';
-import './wizard.scss';
 
 export default @Component({
   name: 'itfWizard',

package/src/directives/visible.js

@@ -1,5 +1,5 @@
 import 'intersection-observer'
-import debug from "debug"
+import debug from 'debug'
 const log = debug("app:directives/visible")
 
 const instances = new WeakMap();

package/src/index.stories.js

@@ -2,6 +2,7 @@ import { storiesOf } from '@storybook/vue';
 import tooltip from './directives/tooltip';
 import loading from './directives/loading';
 import itfApp from './components/app/App.vue';
+import './assets/scss/main.scss';
 
 storiesOf('Common', module)
   .add('Typography', () => ({

package/src/components/pdf-viewer/styles/index.scss

@@ -1,4 +0,0 @@
-@import "text_layer_builder.scss";
-@import "annotation_layer_builder.scss";
-@import "pdf_viewer.scss";
-@import "viewer.scss";