@oruga-ui/theme-oruga 0.4.1 → 0.5.0

package/src/assets/scss/components/_tabs.scss

@@ -1,333 +0,0 @@
-/* @docs */
-$tabs-disabled-opacity: var(--#{$prefix}base-disabled-opacity) !default;
-$tabs-font-size: var(--#{$prefix}base-font-size) !default;
-$tabs-icon-margin: 0.5em !default;
-$tabs-content-padding: 1rem !default;
-$tabs-margin-bottom: 1.5rem !default;
-$tabs-border-bottom-color: var(--#{$prefix}grey-lighter) !default;
-$tabs-border-bottom-style: solid !default;
-$tabs-border-bottom-width: 1px !default;
-$tabs-link-color: hsl(0, 0%, 29%) !default;
-$tabs-link-active-border-bottom-color: var(--#{$prefix}primary) !default;
-$tabs-link-active-color: var(--#{$prefix}primary) !default;
-$tabs-link-line-height: var(--#{$prefix}base-line-height) !default;
-$tabs-link-padding: 0.5em 1em !default;
-$tabs-boxed-link-radius: var(--#{$prefix}base-border-radius) !default;
-$tabs-boxed-link-hover-background-color: hsl(0, 0%, 96%) !default;
-$tabs-boxed-link-hover-border-bottom-color: hsl(0, 0%, 86%) !default;
-$tabs-boxed-link-active-background-color: hsl(0, 0%, 100%) !default;
-$tabs-boxed-link-active-border-color: hsl(0, 0%, 86%) !default;
-$tabs-boxed-link-active-border-bottom-color: transparent !default;
-$tabs-toggle-link-border-color: hsl(0, 0%, 86%) !default;
-$tabs-toggle-link-border-style: solid !default;
-$tabs-toggle-link-border-width: 1px !default;
-$tabs-toggle-link-hover-background-color: hsl(0, 0%, 96%) !default;
-$tabs-toggle-link-hover-border-color: hsl(0, 0%, 71%) !default;
-$tabs-toggle-link-active-background-color: var(--#{$prefix}primary) !default;
-$tabs-toggle-link-active-border-color: var(--#{$prefix}primary) !default;
-$tabs-toggle-link-active-color: var(--#{$prefix}primary-invert) !default;
-/* @docs */
-
-@mixin item {
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  width: 100%;
-  margin: 0;
-  border: 1px solid transparent;
-  background-color: transparent;
-  align-items: center;
-  line-height: $tabs-link-line-height;
-  display: flex;
-  justify-content: center;
-  margin-bottom: -1px;
-  vertical-align: top;
-  cursor: pointer;
-  text-decoration: none;
-  font-size: var(--#{$prefix}tabs-font-size, $tabs-font-size);
-  border-bottom-color: var(
-    --#{$prefix}tabs-border-bottom-color,
-    $tabs-border-bottom-color
-  );
-  border-bottom-style: var(
-    --#{$prefix}tabs-border-bottom-style,
-    $tabs-border-bottom-style
-  );
-  border-bottom-width: var(
-    --#{$prefix}tabs-border-bottom-width,
-    $tabs-border-bottom-width
-  );
-  color: var(--#{$prefix}tabs-link-color, $tabs-link-color);
-  padding: var(--#{$prefix}tabs-link-padding, $tabs-link-padding);
-}
-
-.o-tabs {
-  &--fullwidth {
-    width: 100%;
-
-    .o-tabs__nav-item-wrapper {
-      flex-grow: 1;
-      flex-shrink: 0;
-    }
-
-    .o-tabs__nav-item-default,
-    .o-tabs__nav-item-boxed,
-    .o-tabs__nav-item-toggle {
-      height: 100%;
-    }
-  }
-
-  &--vertical {
-    display: flex;
-    flex-direction: row;
-
-    .o-tabs__nav {
-      flex-direction: column;
-      align-items: stretch;
-      flex-grow: 0;
-      border-bottom: none;
-    }
-
-    .o-tabs__nav-item-boxed {
-      border-bottom-color: transparent;
-      border-right-color: var(
-        --#{$prefix}tabs-border-bottom-color,
-        $tabs-border-bottom-color
-      );
-      border-radius: var(
-        --#{$prefix}tabs-border-bottom-color,
-        #{$tabs-boxed-link-radius} 0 0 #{$tabs-boxed-link-radius}
-      );
-
-      &--active {
-        border-right-color: transparent;
-        border-bottom-color: var(
-          --#{$prefix}tabs-border-bottom-color,
-          $tabs-border-bottom-color
-        );
-      }
-    }
-  }
-
-  &--right {
-    flex-direction: row-reverse;
-
-    .o-tabs__nav-item-boxed {
-      border-bottom-color: transparent;
-      border-right-color: transparent;
-      border-left-color: var(
-        --#{$prefix}tabs-border-bottom-color,
-        $tabs-border-bottom-color
-      );
-      border-radius: var(
-        --#{$prefix}tabs-border-bottom-color,
-        0 #{$tabs-boxed-link-radius} #{$tabs-boxed-link-radius} 0
-      );
-
-      &--active {
-        border-left-color: transparent;
-        border-right-color: var(
-          --#{$prefix}tabs-border-bottom-color,
-          $tabs-border-bottom-color
-        );
-        border-bottom-color: var(
-          --#{$prefix}tabs-border-bottom-color,
-          $tabs-border-bottom-color
-        );
-      }
-    }
-  }
-
-  &__nav {
-    @include unselectable;
-    margin: 0;
-    padding: 0;
-    align-items: center;
-    display: flex;
-    flex-grow: 1;
-    flex-shrink: 0;
-    justify-content: flex-start;
-    // padding bottom to keep showing the border-bottom
-    padding-bottom: var(
-      --#{$prefix}tabs-border-bottom-width,
-      $tabs-border-bottom-width
-    );
-    font-size: var(--#{$prefix}tabs-font-size, $tabs-font-size);
-
-    @each $name, $value in $sizes {
-      &--#{$name} {
-        font-size: var(--#{$prefix}tabs-font-size-#{$name}, $value);
-      }
-    }
-
-    &--centered {
-      justify-content: center;
-    }
-
-    &--right {
-      justify-content: flex-end;
-    }
-
-    &-item {
-      &-icon {
-        margin-right: var(--#{$prefix}tabs-icon-margin, $tabs-icon-margin);
-      }
-
-      // focus effect
-      &:focus,
-      &:focus-within {
-        box-shadow: 0 0 0 0.25rem var(--#{$prefix}focus);
-        outline: 0;
-        border-radius: #{$tabs-boxed-link-radius};
-      }
-
-      &-default {
-        @include item;
-
-        &--active {
-          border-bottom-color: var(
-            --#{$prefix}tabs-link-active-border-bottom-color,
-            $tabs-link-active-border-bottom-color
-          );
-          color: var(
-            --#{$prefix}tabs-link-active-color,
-            $tabs-link-active-color
-          );
-        }
-
-        &--disabled {
-          pointer-events: none;
-          cursor: not-allowed;
-          opacity: var(
-            --#{$prefix}tabs-disabled-opacity,
-            $tabs-disabled-opacity
-          );
-        }
-
-        &:hover:not(.o-tabs__nav-item-default--active) {
-          background-color: var(
-            --#{$prefix}tabs-link-hover-background-color,
-            $tabs-boxed-link-hover-background-color
-          );
-          border-bottom-color: var(
-            --#{$prefix}tabs-link-hover-border-bottom-color,
-            $tabs-boxed-link-hover-border-bottom-color
-          );
-        }
-      }
-
-      &-boxed {
-        @include item;
-        border-bottom-color: transparent;
-        border-radius: var(
-          --#{$prefix}tabs-border-bottom-color,
-          #{$tabs-boxed-link-radius} #{$tabs-boxed-link-radius} 0 0
-        );
-
-        &--active {
-          color: var(
-            --#{$prefix}tabs-link-active-color,
-            $tabs-link-active-color
-          );
-          background-color: var(
-            --#{$prefix}tabs-boxed-link-active-background-color,
-            $tabs-boxed-link-active-background-color
-          );
-          border-color: var(
-            --#{$prefix}tabs-boxed-link-active-border-color,
-            $tabs-boxed-link-active-border-color
-          );
-          border-bottom-color: var(
-            --#{$prefix}tabs-boxed-link-active-border-bottom-color,
-            $tabs-boxed-link-active-border-bottom-color
-          );
-        }
-
-        &--disabled {
-          pointer-events: none;
-          cursor: not-allowed;
-          opacity: var(
-            --#{$prefix}tabs-disabled-opacity,
-            $tabs-disabled-opacity
-          );
-        }
-
-        &:hover:not(.o-tabs__nav-item-boxed--active) {
-          background-color: var(
-            --#{$prefix}tabs-boxed-link-hover-background-color,
-            $tabs-boxed-link-hover-background-color
-          );
-        }
-      }
-
-      &-toggle {
-        @include item;
-        position: relative;
-        border-color: var(
-          --#{$prefix}tabs-toggle-link-border-color,
-          $tabs-toggle-link-border-color
-        );
-        border-style: var(
-          --#{$prefix}tabs-toggle-link-border-style,
-          $tabs-toggle-link-border-style
-        );
-        border-width: var(
-          --#{$prefix}tabs-toggle-link-border-width,
-          $tabs-toggle-link-border-width
-        );
-        margin-bottom: 0;
-
-        &--active {
-          background-color: var(
-            --#{$prefix}tabs-toggle-link-active-background-color,
-            $tabs-toggle-link-active-background-color
-          );
-          border-color: var(
-            --#{$prefix}tabs-toggle-link-active-border-color,
-            $tabs-toggle-link-active-border-color
-          );
-          color: var(
-            --#{$prefix}tabs-toggle-link-active-color,
-            $tabs-toggle-link-active-color
-          );
-        }
-
-        &--disabled {
-          pointer-events: none;
-          cursor: not-allowed;
-          opacity: var(
-            --#{$prefix}tabs-disabled-opacity,
-            $tabs-disabled-opacity
-          );
-        }
-
-        &:hover:not(.o-tabs__nav-item-toggle--active) {
-          background-color: var(
-            --#{$prefix}tabs-toggle-link-hover-background-color,
-            $tabs-toggle-link-hover-background-color
-          );
-          border-color: var(
-            --#{$prefix}tabs-toggle-link-hover-border-color,
-            $tabs-toggle-link-hover-border-color
-          );
-        }
-      }
-    }
-  }
-
-  &__content {
-    position: relative;
-    overflow: visible;
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    padding: var(--#{$prefix}tabs-content-padding, $tabs-content-padding);
-
-    &--transitioning {
-      overflow: hidden;
-    }
-  }
-
-  &:not(:last-child) {
-    margin-bottom: var(--#{$prefix}tabs-margin-bottom, $tabs-margin-bottom);
-  }
-}

package/src/assets/scss/components/_taginput.scss

@@ -1,117 +0,0 @@
-@use "sass:list";
-
-/* @docs */
-$taginput-counter-font-size: 0.75rem !default;
-$taginput-counter-margin: 0.25rem 0 0 0.5rem !default;
-$taginput-item-background-color: var(--#{$prefix}primary) !default;
-$taginput-item-color: var(--#{$prefix}primary-invert) !default;
-$taginput-item-border-radius: var(--#{$prefix}base-border-radius) !default;
-$taginput-item-margin: 0.275em !default;
-$taginput-item-padding: 0 0.75em 0 0.75em !default;
-$taginput-margin-icon-to-text: 0.1875em !default;
-/* @docs */
-
-.o-taginput {
-  display: flex;
-
-  &__container {
-    display: flex;
-    flex-wrap: wrap;
-
-    box-shadow: var(--#{$prefix}input-box-shadow, $input-box-shadow);
-    background-color: var(
-      --#{$prefix}input-background-color,
-      $input-background-color
-    );
-    border-color: var(--#{$prefix}input-border-color, $input-border-color);
-    border-style: var(--#{$prefix}input-border-style, $input-border-style);
-    border-width: var(--#{$prefix}input-border-width, $input-border-width);
-    border-radius: var(--#{$prefix}input-border-radius, $input-border-radius);
-    color: var(--#{$prefix}input-color, $input-color);
-    font-size: var(--#{$prefix}base-font-size, $base-font-size);
-    line-height: var(--#{$prefix}input-line-height, $input-line-height);
-    margin: var(--#{$prefix}input-margin, $input-margin);
-    width: var(--#{$prefix}taginput-width, inherit);
-
-    // size variants
-    @each $name, $value in $sizes {
-      &--#{$name} {
-        font-size: var(--#{$prefix}taginput-font-size-#{$name}, $value);
-      }
-    }
-  }
-
-  &__autocomplete {
-    flex-grow: 1;
-    flex-shrink: 1;
-    width: auto;
-  }
-
-  &__input {
-    border: none;
-    box-shadow: none;
-    width: 100%;
-  }
-
-  &__item {
-    display: inline-flex;
-    margin: var(--#{$prefix}taginput-item-margin, $taginput-item-margin);
-    padding: var(--#{$prefix}taginput-item-padding, $taginput-item-padding);
-    color: var(--#{$prefix}taginput-item-color, $taginput-item-color);
-    background-color: var(
-      --#{$prefix}taginput-item-background-color,
-      $taginput-item-background-color
-    );
-    border-radius: var(
-      --#{$prefix}taginput-item-border-radius,
-      $taginput-item-border-radius
-    );
-
-    // color variants
-    @each $name, $pair in $colors {
-      $color: list.nth($pair, 1);
-      $color-invert: list.nth($pair, 2);
-
-      &--#{$name} {
-        --#{$prefix}focus: #{createFocus($color)};
-
-        background-color: var(--#{$prefix}variant-#{$name}, $color);
-        color: var(--#{$prefix}variant-invert-#{$name}, $color-invert);
-      }
-    }
-
-    // focus effect
-    &:focus,
-    &:focus-within {
-      box-shadow: 0 0 0 0.25rem var(--#{$prefix}focus);
-      outline: 0;
-    }
-  }
-
-  &__counter {
-    display: block;
-    float: right;
-    font-size: var(
-      --#{$prefix}taginput-counter-font-size,
-      $taginput-counter-font-size
-    );
-    margin: var(--#{$prefix}taginput-counter-margin, $taginput-counter-margin);
-  }
-
-  &--expanded {
-    width: 100%;
-    flex-grow: 1;
-    flex-shrink: 1;
-  }
-
-  // // focus effect
-  // &:focus &__container,
-  // &:focus-within &__container {
-  //   box-shadow: 0 0 0 0.25rem var(--#{$prefix}focus);
-
-  //   // disable focus effect for inner input
-  //   .o-input {
-  //     --#{$prefix}focus: transparent;
-  //   }
-  // }
-}

package/src/assets/scss/components/_timepicker.scss

@@ -1,92 +0,0 @@
-/* @docs */
-$timepicker-font-size: var(--#{$prefix}base-font-size) !default;
-$timepicker-box-line-height: var(--#{$prefix}base-line-height) !default;
-$timepicker-box-padding: 0.375rem 1rem !default;
-$timepicker-footer-padding: 0 0.5rem !default;
-$timepicker-footer-margin: 0.875rem 0 0 0 !default;
-$timepicker-select-line-height: var(--#{$prefix}base-line-height) !default;
-$timepicker-select-padding: $control-padding-vertical
-  $control-padding-horizontal !default;
-$timepicker-select-color: #363636 !default;
-$timepicker-select-font-weight: 600 !default;
-$timepicker-select-placeholder-opacity: var(
-  --#{$prefix}base-disabled-opacity
-) !default;
-$timepicker-separator-font-weight: 600 !default;
-/* @docs */
-
-.o-tpck {
-  font-size: var(--#{$prefix}timepicker-font-size, $timepicker-font-size);
-
-  @each $name, $value in $sizes {
-    &--#{$name} {
-      font-size: var(--#{$prefix}timepicker-font-size-#{$name}, $value);
-    }
-  }
-
-  &__dropdown {
-    width: 100%;
-  }
-
-  &__box {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    line-height: var(
-      --#{$prefix}timepicker-box-line-height,
-      $timepicker-box-line-height
-    );
-    padding: var(--#{$prefix}timepicker-box-padding, $timepicker-box-padding);
-  }
-
-  &__select {
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    display: inline-block;
-    position: relative;
-    vertical-align: top;
-    cursor: pointer;
-    justify-content: flex-start;
-    align-items: center;
-    border: 0;
-    font-size: inherit;
-    font-weight: var(
-      --#{$prefix}timepicker-select-font-weight,
-      $timepicker-select-font-weight
-    );
-    line-height: var(
-      --#{$prefix}timepicker-select-line-height,
-      $timepicker-select-line-height
-    );
-    color: var(--#{$prefix}timepicker-select-color, $timepicker-select-color);
-    padding: var(
-      --#{$prefix}timepicker-select-padding,
-      $timepicker-select-padding
-    );
-  }
-
-  &__select-placeholder {
-    opacity: var(
-      --#{$prefix}timepicker-select-placeholder-opacity,
-      $timepicker-select-placeholder-opacity
-    );
-  }
-
-  &__separator {
-    font-weight: var(
-      --#{$prefix}timepicker-separator-font-weight,
-      $timepicker-separator-font-weight
-    );
-  }
-
-  &__footer {
-    padding: var(
-      --#{$prefix}timepicker-header-padding,
-      $timepicker-footer-padding
-    );
-    margin: var(
-      --#{$prefix}timepicker-header-margin,
-      $timepicker-footer-margin
-    );
-  }
-}