@itfin/components 1.2.33 → 1.2.34

package/src/assets/scss/components/_toaster.scss

@@ -0,0 +1,97 @@
+@import '../variables';
+
+.itf-toast-container.toast-container {
+  position: fixed;
+  z-index: $zindex-tooltip;
+  pointer-events: none;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  padding: 15px;
+
+  &.is-top-left,
+  &.is-top-center,
+  &.is-top-right {
+    width: 100%;
+    top: 0;
+    left: 0;
+  }
+  &.is-top-left {
+    align-items: flex-start;
+  }
+  &.is-top-center {
+    align-items: center;
+  }
+  &.is-top-right {
+    align-items: flex-end;
+  }
+  &.is-center {
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    align-items: center;
+    justify-content: center;
+  }
+  &.is-bottom-left,
+  &.is-bottom-center,
+  &.is-bottom-right {
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    justify-content: flex-end;
+  }
+  &.is-bottom-left {
+    align-items: flex-start;
+  }
+  &.is-bottom-center {
+    align-items: center;
+  }
+  &.is-bottom-right {
+    align-items: flex-end;
+  }
+  &.has-mask {
+    background-color: rgba(255, 255, 255, 0.5);
+    width: 100%;
+    height: 100%;
+    pointer-events: all;
+  }
+}
+
+
+.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;
+  }
+}
+
+.itf-toast-message {
+  z-index: $zindex-toaster;
+}

package/src/assets/scss/components/_tree-view.scss

@@ -0,0 +1,17 @@
+@import '../variables';
+
+.itf-tree-view {
+  .itf-button {
+    &.depth-0 {
+      padding-left: $spacer;
+    }
+
+    &.depth-1 {
+      padding-left: $spacer * 2;
+    }
+
+    &.depth-2 {
+      padding-left: $spacer * 3;
+    }
+  }
+}

package/src/{components/wizard/wizard.scss → assets/scss/components/_wizard.scss}

@@ -1,4 +1,4 @@
-@import '../../assets/scss/variables';
+@import '../variables';
 
 .itf-wizard {
 

package/src/{components/pdf-viewer/styles → assets/scss/components/pdf-viewer}/_colors.scss

@@ -1,5 +1,5 @@
 @import "variables.scss";
-@import "../../../assets/scss/variables.scss";
+@import "../../variables.scss";
 
 .pdf-app {
   --pdf-app-background-color: #{$pdf-app-background-color};

package/src/{components/pdf-viewer/styles → assets/scss/components/pdf-viewer}/_pdf_viewer.scss

@@ -25,7 +25,7 @@
   overflow: visible;
   border: 9px solid transparent;
   background-clip: content-box;
-  border-image: url(./images/shadow.png) 9 9 repeat;
+  border-image: url(/3rdparty/pdf-viewer/shadow.png) 9 9 repeat;
   background-color: rgba(255, 255, 255, 1);
 }
 
@@ -102,7 +102,7 @@
   top: 0;
   right: 0;
   bottom: 0;
-  background: url(./images/loading-icon.svg) center no-repeat;
+  background: url(/3rdparty/pdf-viewer/loading-icon.svg) center no-repeat;
 }
 
 .pdf-app .pdfPresentationMode .pdfViewer {

package/src/{components/pdf-viewer/styles → assets/scss/components/pdf-viewer}/_viewer.scss

@@ -371,7 +371,7 @@ html[dir="rtl"] .pdf-app .findbar {
 }
 .pdf-app #findInput[data-status="pending"] {
   background-size: 16px;
-  background-image: url(./images/loading-icon.svg);
+  background-image: url(/3rdparty/pdf-viewer/loading-icon.svg);
   background-repeat: no-repeat;
   background-position: right;
 }
@@ -795,7 +795,7 @@ html[dir="rtl"] .pdf-app .verticalToolbarSeparator {
 }
 
 .pdf-app .toolbarField.pageNumber.visiblePageIsLoading {
-  background-image: url(./images/loading-icon.svg);
+  background-image: url(/3rdparty/pdf-viewer/loading-icon.svg);
   background-repeat: no-repeat;
   background-position: 1px;
   background-size: 16px;
@@ -953,12 +953,12 @@ html[dir="rtl"] .pdf-app .attachmentsItem > button {
   color: rgba(255, 255, 255, 0.5);
 }
 .pdf-app .outlineItemToggler::before {
-  content: url(./images/treeitem-expanded.png);
+  content: url(/3rdparty/pdf-viewer/treeitem-expanded.png);
   display: inline-block;
   position: absolute;
 }
 .pdf-app .outlineItemToggler.outlineItemsHidden::before {
-  content: url(./images/treeitem-collapsed.png);
+  content: url(/3rdparty/pdf-viewer/treeitem-collapsed.png);
 }
 html[dir="rtl"] .pdf-app .outlineItemToggler.outlineItemsHidden::before {
   transform: scaleX(-1);
@@ -1254,10 +1254,10 @@ html[dir="rtl"] .pdf-app #documentPropertiesOverlay .row > * {
   .pdf-app .outlineItemToggler::before {
     transform: scale(0.5);
     top: -1px;
-    content: url(./images/treeitem-expanded@2x.png);
+    content: url(/3rdparty/pdf-viewer/treeitem-expanded@2x.png);
   }
   .pdf-app .outlineItemToggler.outlineItemsHidden::before {
-    content: url(./images/treeitem-collapsed@2x.png);
+    content: url(/3rdparty/pdf-viewer/treeitem-collapsed@2x.png);
   }
   html[dir="rtl"] .pdf-app .outlineItemToggler.outlineItemsHidden::before {
     transform: scaleX(-1) scale(0.5);

package/src/assets/scss/components/{_selected.scss → select/_selected.scss}

@@ -1,4 +1,4 @@
-@import '../variables';
+@import '../../variables';
 
 /* Selected Tags */
 .vs__selected, .badge.vs__selected {

package/src/assets/scss/main.scss

@@ -2,7 +2,28 @@
 @import './fonts.scss';
 @import './dark-theme.scss';
 @import './scrollbar';
-@import '../../components/datepicker/datepicker.scss';
+@import './components/toaster';
+@import './components/avatar';
+@import './components/button';
+@import './components/card';
+@import './components/checkbox';
+@import './components/datepicker';
+@import './components/dropdown';
+@import './components/form';
+@import './components/icon';
+@import './components/modal';
+@import './components/pagination';
+@import './components/pdf-viewer';
+@import './components/popover';
+@import './components/segmeneted-control';
+@import './components/select';
+@import './components/table';
+@import './components/tabs';
+@import './components/text-field';
+@import './components/tree-view';
+@import './components/wizard';
+@import './directives/loading';
+@import './directives/tooltip';
 
 .form-control {
   min-height: 2.5rem;

package/src/components/app/App.vue

@@ -3,72 +3,6 @@
     <slot></slot>
   </div>
 </template>
-<style lang="scss">
-@import '../../assets/scss/main';
-//@import '~bootstrap/scss/reboot';
-//@import '~bootstrap/scss/type';
-//@import '~bootstrap/scss/root';
-//@import '~bootstrap/scss/toasts';
-//@import '~bootstrap/scss/close';
-
-.itf-toast-container.toast-container {
-  position: fixed;
-  z-index: $zindex-tooltip;
-  pointer-events: none;
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  padding: 15px;
-
-  &.is-top-left,
-  &.is-top-center,
-  &.is-top-right {
-    width: 100%;
-    top: 0;
-    left: 0;
-  }
-  &.is-top-left {
-    align-items: flex-start;
-  }
-  &.is-top-center {
-    align-items: center;
-  }
-  &.is-top-right {
-    align-items: flex-end;
-  }
-  &.is-center {
-    width: 100%;
-    height: 100%;
-    left: 0;
-    top: 0;
-    align-items: center;
-    justify-content: center;
-  }
-  &.is-bottom-left,
-  &.is-bottom-center,
-  &.is-bottom-right {
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    justify-content: flex-end;
-  }
-  &.is-bottom-left {
-    align-items: flex-start;
-  }
-  &.is-bottom-center {
-    align-items: center;
-  }
-  &.is-bottom-right {
-    align-items: flex-end;
-  }
-  &.has-mask {
-    background-color: rgba(255, 255, 255, 0.5);
-    width: 100%;
-    height: 100%;
-    pointer-events: all;
-  }
-}
-</style>
 <script>
 import { Vue, Component } from 'vue-property-decorator';
 import Message from './message';

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