@oruga-ui/theme-oruga 0.4.2 → 0.5.1

package/src/assets/scss/components/_tooltip.scss

@@ -1,453 +0,0 @@
-@use "sass:list";
-
-/* @docs */
-$tooltip-arrow-margin: 2px !default;
-$tooltip-arrow-size: 5px !default;
-$tooltip-background-color: var(--#{$prefix}primary) !default;
-$tooltip-color: var(--#{$prefix}primary-invert) !default;
-$tooltip-content-box-shadow: 0px 1px 2px 1px rgba(0, 1, 0, 0.2) !default;
-$tooltip-content-font-size: 0.85rem !default;
-$tooltip-content-max-width: 300px !default;
-$tooltip-content-multiline-width: 300px !default;
-$tooltip-content-padding: 0.35rem 0.75rem !default;
-$tooltip-content-radius-large: 6px !default;
-$tooltip-content-weight-normal: 400 !default;
-$tooltip-content-zindex: 38 !default;
-/* @docs */
-
-// Base
-.o-tip {
-  position: relative;
-  display: inline-flex;
-
-  &__arrow {
-    position: absolute;
-    content: "";
-    pointer-events: none;
-
-    z-index: var(--#{$prefix}tooltip-content-zindex, $tooltip-content-zindex);
-    color: var(--#{$prefix}tooltip-background-color, $tooltip-background-color);
-
-    // variants
-    @each $name, $pair in $colors {
-      $color: list.nth($pair, 1);
-      $color-invert: list.nth($pair, 2);
-
-      &--#{$name} {
-        color: var(--#{$prefix}variant-#{$name}, $color);
-      }
-    }
-
-    // position
-    &--bottom {
-      top: auto;
-      right: auto;
-      bottom: 100%;
-      left: 50%;
-      transform: translateX(-50%);
-
-      // arrow
-      border-bottom-style: solid;
-      border-right-style: solid;
-      border-right-color: transparent;
-      border-left-style: solid;
-      border-left-color: transparent;
-
-      border-bottom-width: var(
-        --#{$prefix}tooltip-arrow-size,
-        $tooltip-arrow-size
-      );
-      border-right-width: var(
-        --#{$prefix}tooltip-arrow-size,
-        $tooltip-arrow-size
-      );
-      border-left-width: var(
-        --#{$prefix}tooltip-arrow-size,
-        $tooltip-arrow-size
-      );
-    }
-
-    &--top {
-      top: 100%;
-      right: auto;
-      bottom: auto;
-      left: 50%;
-      transform: translateX(-50%);
-
-      // arrow
-      border-top-style: solid;
-      border-right-style: solid;
-      border-right-color: transparent;
-      border-left-style: solid;
-      border-left-color: transparent;
-
-      border-top-width: var(
-        --#{$prefix}tooltip-arrow-size,
-        $tooltip-arrow-size
-      );
-      border-right-width: var(
-        --#{$prefix}tooltip-arrow-size,
-        $tooltip-arrow-size
-      );
-      border-left-width: var(
-        --#{$prefix}tooltip-arrow-size,
-        $tooltip-arrow-size
-      );
-    }
-
-    &--left {
-      top: 50%;
-      right: auto;
-      bottom: auto;
-      left: 100%;
-      transform: translateY(-50%);
-
-      border-left-style: solid;
-      border-top-style: solid;
-      border-top-color: transparent;
-      border-bottom-style: solid;
-      border-bottom-color: transparent;
-
-      border-left-width: var(
-        --#{$prefix}tooltip-arrow-size,
-        $tooltip-arrow-size
-      );
-      border-top-width: var(
-        --#{$prefix}tooltip-arrow-size,
-        $tooltip-arrow-size
-      );
-      border-bottom-width: var(
-        --#{$prefix}tooltip-arrow-size,
-        $tooltip-arrow-size
-      );
-    }
-
-    &--right {
-      top: 50%;
-      right: 100%;
-      bottom: auto;
-      left: auto;
-      transform: translateY(-50%);
-
-      border-right-style: solid;
-      border-top-style: solid;
-      border-top-color: transparent;
-      border-bottom-style: solid;
-      border-bottom-color: transparent;
-
-      border-right-width: var(
-        --#{$prefix}tooltip-arrow-size,
-        $tooltip-arrow-size
-      );
-      border-top-width: var(
-        --#{$prefix}tooltip-arrow-size,
-        $tooltip-arrow-size
-      );
-      border-bottom-width: var(
-        --#{$prefix}tooltip-arrow-size,
-        $tooltip-arrow-size
-      );
-    }
-
-    &--top-right {
-      top: 100%;
-      right: auto;
-      bottom: auto;
-      left: 50%;
-      transform: translateX(-50%);
-
-      // arrow
-      border-top-style: solid;
-      border-right-style: solid;
-      border-right-color: transparent;
-      border-left-style: solid;
-      border-left-color: transparent;
-
-      border-top-width: var(
-        --#{$prefix}tooltip-arrow-size,
-        $tooltip-arrow-size
-      );
-      border-right-width: calc(
-        var(--#{$prefix}tooltip-arrow-size, $tooltip-arrow-size) * 2
-      );
-      border-left-width: 0;
-    }
-
-    &--top-left {
-      top: 100%;
-      right: auto;
-      bottom: auto;
-      left: 50%;
-      transform: translateX(-50%);
-
-      // arrow
-      border-top-style: solid;
-      border-right-style: solid;
-      border-right-color: transparent;
-      border-left-style: solid;
-      border-left-color: transparent;
-
-      border-top-width: var(
-        --#{$prefix}tooltip-arrow-size,
-        $tooltip-arrow-size
-      );
-      border-left-width: calc(
-        var(--#{$prefix}tooltip-arrow-size, $tooltip-arrow-size) * 2
-      );
-      border-right-width: 0;
-    }
-
-    &--bottom-left {
-      top: auto;
-      right: auto;
-      bottom: 100%;
-      left: 50%;
-      transform: translateX(-50%);
-
-      // arrow
-      border-bottom-style: solid;
-      border-right-style: solid;
-      border-right-color: transparent;
-      border-left-style: solid;
-      border-left-color: transparent;
-
-      border-bottom-width: var(
-        --#{$prefix}tooltip-arrow-size,
-        $tooltip-arrow-size
-      );
-      border-left-width: calc(
-        var(--#{$prefix}tooltip-arrow-size, $tooltip-arrow-size) * 2
-      );
-      border-right-width: 0;
-    }
-
-    &--bottom-right {
-      top: auto;
-      right: auto;
-      bottom: 100%;
-      left: 50%;
-      transform: translateX(-50%);
-
-      // arrow
-      border-bottom-style: solid;
-      border-right-style: solid;
-      border-right-color: transparent;
-      border-left-style: solid;
-      border-left-color: transparent;
-
-      border-bottom-width: var(
-        --#{$prefix}tooltip-arrow-size,
-        $tooltip-arrow-size
-      );
-      border-right-width: calc(
-        var(--#{$prefix}tooltip-arrow-size, $tooltip-arrow-size) * 2
-      );
-      border-left-width: 0;
-    }
-  }
-
-  &__content {
-    position: absolute;
-    white-space: nowrap;
-
-    max-width: var(
-      --#{$prefix}tooltip-content-max-width,
-      $tooltip-content-max-width
-    );
-    padding: var(--#{$prefix}tooltip-content-padding, $tooltip-content-padding);
-    border-radius: var(
-      --#{$prefix}tooltip-content-radius-large,
-      $tooltip-content-radius-large
-    );
-    font-size: var(
-      --#{$prefix}tooltip-content-font-size,
-      $tooltip-content-font-size
-    );
-    font-weight: var(
-      --#{$prefix}tooltip-content-weight-normal,
-      $tooltip-content-weight-normal
-    );
-    box-shadow: var(
-      --#{$prefix}tooltip-content-box-shadow,
-      $tooltip-content-box-shadow
-    );
-    z-index: var(--#{$prefix}tooltip-content-zindex, $tooltip-content-zindex);
-    background-color: var(
-      --#{$prefix}tooltip-background-color,
-      $tooltip-background-color
-    );
-    color: var(--#{$prefix}tooltip-color, $tooltip-color);
-
-    // variants
-    @each $name, $pair in $colors {
-      $color: list.nth($pair, 1);
-      $color-invert: list.nth($pair, 2);
-
-      &--#{$name} {
-        background: var(--#{$prefix}variant-#{$name}, $color);
-        color: var(--#{$prefix}variant-invert-#{$name}, $color-invert);
-      }
-    }
-
-    // position
-    &--top {
-      top: auto;
-      right: auto;
-
-      bottom: calc(
-        (
-            var(--#{$prefix}tooltip-arrow-size, $tooltip-arrow-size) +
-              var(--#{$prefix}tooltip-arrow-margin, $tooltip-arrow-margin)
-          ) + 100%
-      );
-      left: 50%;
-      transform: translateX(-50%);
-    }
-
-    &--bottom {
-      top: calc(
-        (
-            var(--#{$prefix}tooltip-arrow-size, $tooltip-arrow-size) +
-              var(--#{$prefix}tooltip-arrow-margin, $tooltip-arrow-margin)
-          ) + 100%
-      );
-      right: auto;
-      bottom: auto;
-      left: 50%;
-      transform: translateX(-50%);
-    }
-
-    &--right {
-      top: 50%;
-      right: auto;
-      bottom: auto;
-      left: calc(
-        (
-            var(--#{$prefix}tooltip-arrow-size, $tooltip-arrow-size) +
-              var(--#{$prefix}tooltip-arrow-margin, $tooltip-arrow-margin)
-          ) + 100%
-      );
-      transform: translateY(-50%);
-    }
-
-    &--left {
-      top: 50%;
-      right: calc(
-        (
-            var(--#{$prefix}tooltip-arrow-size, $tooltip-arrow-size) +
-              var(--#{$prefix}tooltip-arrow-margin, $tooltip-arrow-margin)
-          ) + 100%
-      );
-      bottom: auto;
-      left: auto;
-      transform: translateY(-50%);
-    }
-
-    &--top-right {
-      left: auto;
-      top: auto;
-      bottom: calc(
-        (
-            var(--#{$prefix}tooltip-arrow-size, $tooltip-arrow-size) +
-              var(--#{$prefix}tooltip-arrow-margin, $tooltip-arrow-margin)
-          ) + 100%
-      );
-      transform: translateX(50%);
-    }
-
-    &--top-left {
-      right: auto;
-      top: auto;
-      bottom: calc(
-        (
-            var(--#{$prefix}tooltip-arrow-size, $tooltip-arrow-size) +
-              var(--#{$prefix}tooltip-arrow-margin, $tooltip-arrow-margin)
-          ) + 100%
-      );
-      transform: translateX(-50%);
-    }
-
-    &--bottom-right {
-      left: auto;
-      bottom: auto;
-      top: calc(
-        (
-            var(--#{$prefix}tooltip-arrow-size, $tooltip-arrow-size) +
-              var(--#{$prefix}tooltip-arrow-margin, $tooltip-arrow-margin)
-          ) + 100%
-      );
-      transform: translateX(50%);
-    }
-
-    &--bottom-left {
-      left: auto;
-      bottom: auto;
-      top: calc(
-        (
-            var(--#{$prefix}tooltip-arrow-size, $tooltip-arrow-size) +
-              var(--#{$prefix}tooltip-arrow-margin, $tooltip-arrow-margin)
-          ) + 100%
-      );
-      transform: translateX(-50%);
-    }
-
-    &--always {
-      opacity: 1;
-      visibility: visible;
-    }
-
-    &--multiline {
-      text-align: center;
-      white-space: normal;
-      width: var(
-        --#{$prefix}tooltip-content-multiline-width,
-        $tooltip-content-multiline-width
-      );
-    }
-  }
-
-  &--teleport {
-    .o-tip__content {
-      // position
-      &--top,
-      &--top-left,
-      &--top-right {
-        margin-top: calc(
-          -1 * (var(--#{$prefix}tooltip-arrow-size, $tooltip-arrow-size) +
-                var(--#{$prefix}tooltip-arrow-margin, $tooltip-arrow-margin))
-        );
-      }
-
-      &--bottom,
-      &--bottom-left,
-      &--bottom-right {
-        margin-top: calc(
-          (
-            var(--#{$prefix}tooltip-arrow-size, $tooltip-arrow-size) +
-              var(--#{$prefix}tooltip-arrow-margin, $tooltip-arrow-margin)
-          )
-        );
-      }
-
-      &--right {
-        margin-left: calc(
-          (
-            var(--#{$prefix}tooltip-arrow-size, $tooltip-arrow-size) +
-              var(--#{$prefix}tooltip-arrow-margin, $tooltip-arrow-margin)
-          )
-        );
-      }
-
-      &--left {
-        margin-left: calc(
-          -1 * (var(--#{$prefix}tooltip-arrow-size, $tooltip-arrow-size) +
-                var(--#{$prefix}tooltip-arrow-margin, $tooltip-arrow-margin))
-        );
-      }
-    }
-  }
-
-  &__trigger {
-    width: 100%;
-  }
-}

package/src/assets/scss/components/_upload.scss

@@ -1,69 +0,0 @@
-@use "sass:list";
-
-/* @docs */
-$upload-draggable-border: 1px dashed var(--#{$prefix}grey-light) !default;
-$upload-draggable-border-radius: var(--#{$prefix}base-border-radius) !default;
-$upload-draggable-disabled-opacity: var(
-  --#{$prefix}base-disabled-opacity
-) !default;
-$upload-draggable-hover-border-color: var(--#{$prefix}grey) !default;
-$upload-draggable-padding: 0.25em !default;
-/* @docs */
-
-.o-upl {
-  position: relative;
-  display: inline-flex;
-
-  &--disabled {
-    opacity: var(
-      --#{$prefix}upload-draggable-disabled-opacity,
-      $upload-draggable-disabled-opacity
-    );
-    cursor: not-allowed;
-  }
-
-  &--expanded {
-    width: 100%;
-  }
-
-  &__draggable {
-    cursor: pointer;
-    width: 100%;
-
-    padding: var(
-      --#{$prefix}upload-draggable-padding,
-      $upload-draggable-padding
-    );
-    border: var(--#{$prefix}upload-draggable-border, $upload-draggable-border);
-    border-radius: var(
-      --#{$prefix}upload-draggable-border-radius,
-      $upload-draggable-border-radius
-    );
-
-    &--hovered {
-      border-color: var(
-        --#{$prefix}upload-draggable-hover-border-color,
-        $upload-draggable-hover-border-color
-      );
-
-      @each $name, $pair in $colors {
-        $color: list.nth($pair, 1);
-
-        &-#{$name} {
-          border-color: var(--#{$prefix}variant-#{$name}, $color);
-        }
-      }
-    }
-  }
-
-  input[type="file"] {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-    cursor: pointer;
-    z-index: -1;
-  }
-}

package/src/assets/scss/oruga-build.scss

@@ -1,9 +0,0 @@
-/*************************************
-*   Oruga Default Theme Full Build
-**************************************/
-
-// import Ourga theme variables
-@import "utils/variables";
-
-// import Oruga theme styles
-@import "./oruga";

package/src/assets/scss/oruga.scss

@@ -1,41 +0,0 @@
-/******************
-*   Oruga Theme 
-*******************/
-
-// import globals, helpers and functions
-@import "utils/animations";
-@import "utils/helpers";
-@import "utils/root";
-
-@import "utils/base";
-
-// import Oruga components
-@import "components/autocomplete";
-@import "components/button";
-@import "components/carousel";
-@import "components/checkbox";
-@import "components/collapse";
-@import "components/datepicker";
-@import "components/datetimepicker";
-@import "components/dropdown";
-@import "components/field";
-@import "components/icon";
-@import "components/input";
-@import "components/loading";
-@import "components/menu";
-@import "components/modal";
-@import "components/notification";
-@import "components/pagination";
-@import "components/radio";
-@import "components/select";
-@import "components/skeleton";
-@import "components/sidebar";
-@import "components/slider";
-@import "components/steps";
-@import "components/switch";
-@import "components/table";
-@import "components/tabs";
-@import "components/taginput";
-@import "components/timepicker";
-@import "components/tooltip";
-@import "components/upload";