@oruga-ui/theme-oruga 0.0.1

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

@@ -0,0 +1,345 @@
+@use "sass:list";
+
+/* @docs */
+$tooltip-arrow-margin: 2px !default;
+$tooltip-arrow-size: 5px !default;
+$tooltip-background-color: $primary !default;
+$tooltip-color: $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 */
+
+$TBLR_CALC_EXPRESSION: "calc(($size + $margin) + 100%)";
+
+@mixin tooltip-arrow($direction, $name, $color) {
+  @if ($direction == "top") {
+    border-top-style: solid;
+
+    @include avariable(
+      "border-top-width",
+      "tooltip-arrow-size",
+      $tooltip-arrow-size
+    );
+    border-right-style: solid;
+    border-right-color: transparent;
+    border-left-style: solid;
+    border-left-color: transparent;
+
+    @include avariable(
+      "border-right-width",
+      "tooltip-arrow-size",
+      $tooltip-arrow-size
+    );
+    @include avariable(
+      "border-left-width",
+      "tooltip-arrow-size",
+      $tooltip-arrow-size
+    );
+  } @else if ($direction == "bottom") {
+    border-bottom-style: solid;
+
+    @include avariable(
+      "border-bottom-width",
+      "tooltip-arrow-size",
+      $tooltip-arrow-size
+    );
+    border-right-style: solid;
+    border-right-color: transparent;
+    border-left-style: solid;
+    border-left-color: transparent;
+
+    @include avariable(
+      "border-right-width",
+      "tooltip-arrow-size",
+      $tooltip-arrow-size
+    );
+    @include avariable(
+      "border-left-width",
+      "tooltip-arrow-size",
+      $tooltip-arrow-size
+    );
+  } @else if ($direction == "right") {
+    border-right-style: solid;
+
+    @include avariable(
+      "border-right-width",
+      "tooltip-arrow-size",
+      $tooltip-arrow-size
+    );
+    border-top-style: solid;
+    border-top-color: transparent;
+    border-bottom-style: solid;
+    border-bottom-color: transparent;
+
+    @include avariable(
+      "border-top-width",
+      "tooltip-arrow-size",
+      $tooltip-arrow-size
+    );
+    @include avariable(
+      "border-bottom-width",
+      "tooltip-arrow-size",
+      $tooltip-arrow-size
+    );
+  } @else if ($direction == "left") {
+    border-left-style: solid;
+
+    @include avariable(
+      "border-left-width",
+      "tooltip-arrow-size",
+      $tooltip-arrow-size
+    );
+    border-top-style: solid;
+    border-top-color: transparent;
+    border-bottom-style: solid;
+    border-bottom-color: transparent;
+
+    @include avariable(
+      "border-top-width",
+      "tooltip-arrow-size",
+      $tooltip-arrow-size
+    );
+    @include avariable(
+      "border-bottom-width",
+      "tooltip-arrow-size",
+      $tooltip-arrow-size
+    );
+  }
+}
+@mixin tooltip($direction) {
+  &__arrow {
+    @if ($direction == "bottom") {
+      &--bottom {
+        top: auto;
+        right: auto;
+        bottom: 100%;
+        left: 50%;
+        transform: translateX(-50%);
+
+        @include tooltip-arrow($direction, null, $tooltip-background-color);
+      }
+    } @else if ($direction == "top") {
+      &--top {
+        top: 100%;
+        right: auto;
+        bottom: auto;
+        left: 50%;
+        transform: translateX(-50%);
+
+        @include tooltip-arrow($direction, null, $tooltip-background-color);
+      }
+    } @else if ($direction == "left") {
+      &--left {
+        top: 50%;
+        right: auto;
+        bottom: auto;
+        left: 100%;
+        transform: translateY(-50%);
+
+        @include tooltip-arrow($direction, null, $tooltip-background-color);
+      }
+    } @else if ($direction == "right") {
+      &--right {
+        top: 50%;
+        right: 100%;
+        bottom: auto;
+        left: auto;
+        transform: translateY(-50%);
+
+        @include tooltip-arrow($direction, null, $tooltip-background-color);
+      }
+    }
+  }
+
+  &__content {
+    @if ($direction == "top") {
+      &--top {
+        top: auto;
+        right: auto;
+
+        @include evariable(
+          "bottom",
+          $TBLR_CALC_EXPRESSION,
+          eparam("$size", variable("tooltip-arrow-size", $tooltip-arrow-size)),
+          eparam(
+            "$margin",
+            variable("tooltip-arrow-margin", $tooltip-arrow-margin)
+          )
+        );
+        left: 50%;
+        transform: translateX(-50%);
+      }
+    } @else if ($direction == "bottom") {
+      &--bottom {
+        @include evariable(
+          "top",
+          $TBLR_CALC_EXPRESSION,
+          eparam("$size", variable("tooltip-arrow-size", $tooltip-arrow-size)),
+          eparam(
+            "$margin",
+            variable("tooltip-arrow-margin", $tooltip-arrow-margin)
+          )
+        );
+        right: auto;
+        bottom: auto;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+    } @else if ($direction == "right") {
+      &--right {
+        top: 50%;
+        right: auto;
+        bottom: auto;
+
+        @include evariable(
+          "left",
+          $TBLR_CALC_EXPRESSION,
+          eparam("$size", variable("tooltip-arrow-size", $tooltip-arrow-size)),
+          eparam(
+            "$margin",
+            variable("tooltip-arrow-margin", $tooltip-arrow-margin)
+          )
+        );
+        transform: translateY(-50%);
+      }
+    } @else if ($direction == "left") {
+      &--left {
+        top: 50%;
+
+        @include evariable(
+          "right",
+          $TBLR_CALC_EXPRESSION,
+          eparam("$size", variable("tooltip-arrow-size", $tooltip-arrow-size)),
+          eparam(
+            "$margin",
+            variable("tooltip-arrow-margin", $tooltip-arrow-margin)
+          )
+        );
+        bottom: auto;
+        left: auto;
+        transform: translateY(-50%);
+      }
+    }
+  }
+}
+
+// Base
+.o-tip {
+  @include tooltip("top");
+  @include tooltip("right");
+  @include tooltip("bottom");
+  @include tooltip("left");
+  position: relative;
+  display: inline-flex;
+
+  &__arrow {
+    position: absolute;
+    content: "";
+    pointer-events: none;
+
+    @include avariable(
+      "z-index",
+      "tooltip-content-zindex",
+      $tooltip-content-zindex
+    );
+    @include avariable(
+      "color",
+      "tooltip-background-color",
+      $tooltip-background-color
+    );
+
+    @each $name, $pair in $colors {
+      $color: list.nth($pair, 1);
+      $color-invert: list.nth($pair, 2);
+      &--#{$name} {
+        @include avariable("color", ("variant-" + #{$name}), $color);
+      }
+    }
+  }
+
+  &__content {
+    position: absolute;
+    white-space: nowrap;
+
+    @include avariable(
+      "max-width",
+      "tooltip-content-max-width",
+      $tooltip-content-max-width
+    );
+    @include avariable(
+      "padding",
+      "tooltip-content-padding",
+      $tooltip-content-padding
+    );
+    @include avariable(
+      "border-radius",
+      "tooltip-content-radius-large",
+      $tooltip-content-radius-large
+    );
+    @include avariable(
+      "font-size",
+      "tooltip-content-font-size",
+      $tooltip-content-font-size
+    );
+    @include avariable(
+      "font-weight",
+      "tooltip-content-weight-normal",
+      $tooltip-content-weight-normal
+    );
+    @include avariable(
+      "box-shadow",
+      "tooltip-content-box-shadow",
+      $tooltip-content-box-shadow
+    );
+    @include avariable(
+      "z-index",
+      "tooltip-content-zindex",
+      $tooltip-content-zindex
+    );
+    @include avariable(
+      "background-color",
+      "tooltip-background-color",
+      $tooltip-background-color
+    );
+    @include avariable("color", "tooltip-color", $tooltip-color);
+
+    @each $name, $pair in $colors {
+      $color: list.nth($pair, 1);
+      $color-invert: list.nth($pair, 2);
+      &--#{$name} {
+        @include avariable("background", ("variant-" + #{$name}), $color);
+        @include avariable(
+          "color",
+          ("variant-invert-" + #{$name}),
+          $color-invert
+        );
+      }
+    }
+
+    &--always {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    &--multiline {
+      text-align: center;
+      white-space: normal;
+
+      @include avariable(
+        "width",
+        "tooltip-content-multiline-width",
+        $tooltip-content-multiline-width
+      );
+    }
+  }
+
+  &__trigger {
+    width: 100%;
+  }
+}

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

@@ -0,0 +1,74 @@
+@use "sass:list";
+
+/* @docs */
+$upload-draggable-border: 1px dashed $grey-light !default;
+$upload-draggable-border-radius: $base-border-radius !default;
+$upload-draggable-disabled-opacity: $base-disabled-opacity !default;
+$upload-draggable-hover-border-color: $grey !default;
+$upload-draggable-padding: 0.25em !default;
+/* @docs */
+
+.o-upl {
+  position: relative;
+  display: inline-flex;
+
+  &--disabled {
+    @include avariable(
+      "opacity",
+      "upload-draggable-disabled-opacity",
+      $upload-draggable-disabled-opacity
+    );
+    cursor: not-allowed;
+  }
+
+  &--expanded {
+    width: 100%;
+  }
+
+  &__draggable {
+    cursor: pointer;
+    width: 100%;
+
+    @include avariable(
+      "padding",
+      "upload-draggable-padding",
+      $upload-draggable-padding
+    );
+    @include avariable(
+      "border",
+      "upload-draggable-border",
+      $upload-draggable-border
+    );
+    @include avariable(
+      "border-radius",
+      "upload-draggable-border-radius",
+      $upload-draggable-border-radius
+    );
+
+    &--hovered {
+      @include avariable(
+        "border-color",
+        "upload-draggable-hover-border-color",
+        $upload-draggable-hover-border-color
+      );
+
+      @each $name, $pair in $colors {
+        $color: list.nth($pair, 1);
+        &-#{$name} {
+          @include avariable("border-color", ("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-common.scss

@@ -0,0 +1,37 @@
+// 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/inputitems";
+@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/timepicker";
+@import "components/tooltip";
+@import "components/upload";

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

@@ -0,0 +1,9 @@
+/************************************
+*   Oruga Default Theme Full Style
+*************************************/
+
+// Import Oruga Theme variables
+@import "utils/variables";
+
+// Import Oruga Theme styles
+@import "./oruga-common";

package/src/assets/scss/oruga.scss

@@ -0,0 +1,197 @@
+/***************************************
+*   Oruga Default Theme Minimal Style
+****************************************/
+
+// Define empty Maps
+$colors: () !default;
+$sizes: () !default;
+
+// Import Ourga Theme variables
+@import "utils/variables";
+@import "utils/helpers";
+
+// Autocomplete
+$whitelist: add-to-whitelist(
+  "autocomplete-menu-background",
+  "autocomplete-menu-zindex"
+);
+
+// Button
+$whitelist: add-to-whitelist(
+  "button-background-color",
+  "button-color",
+  "button-disabled-opacity",
+  "button-outlined-background-color"
+);
+
+// Carousel
+$whitelist: add-to-whitelist(
+  "carousel-overlay-zindex",
+  "carousel-indicator-size",
+  "carousel-indicator-background",
+  "carousel-indicator-border",
+  "carousel-indicator-active-background",
+  "carousel-indicator-active-border",
+  "carousel-indicator-size",
+  "carousel-indicator-dots-border-radius",
+  "carousel-arrow-size",
+  "carousel-arrow-background",
+  "carousel-arrow-color",
+  "carousel-arrow-top",
+  "carousel-arrow-icon-spaced"
+);
+
+// Checkbox
+$whitelist: add-to-whitelist(
+  "checkbox-size",
+  "checkbox-active-background-color",
+  "checkbox-checkmark-color",
+  "checkbox-border-color",
+  "checkbox-disabled-opacity"
+);
+
+// Datepicker
+$whitelist: add-to-whitelist(
+  "datepicker-item-disabled-color",
+  "datepicker-item-selectable-color",
+  "datepicker-btn-border-color",
+  "datepicker-btn-color",
+  "datepicker-item-hovered-background-color",
+  "datepicker-item-hovered-color",
+  "datepicker-item-selected-background-color",
+  "datepicker-item-selected-color",
+  "datepicker-item-selected-within-background-color",
+  "datepicker-event-background-color"
+);
+
+// Dropdown
+$whitelist: add-to-whitelist(
+  "dropdown-menu-background",
+  "dropdown-mobile-overlay-color",
+  "dropdown-disabled-opacity",
+  "dropdown-menu-zindex",
+  "dropdown-mobile-overlay-zindex",
+  "dropdown-mobile-zindex",
+  "dropdown-item-active-background-color",
+  "dropdown-item-active-color",
+  "dropdown-item-disabled-opacity"
+);
+
+// Icon
+$whitelist: add-to-whitelist("icon-spin-duration");
+
+// Input
+$whitelist: add-to-whitelist();
+
+// Inputitems
+$whitelist: add-to-whitelist(
+  "inputitems-border-style",
+  "inputitems-border-color",
+  "inputitems-border-width",
+  "inputitems-color",
+  "inputitems-item-color",
+  "inputitems-item-background-color"
+);
+
+// Modal
+$whitelist: add-to-whitelist(
+  "modal-zindex",
+  "modal-content-background-color",
+  "modal-overlay-background-color",
+  "moda-close-size",
+  "modal-close-top",
+  "modal-close-right"
+);
+
+// Notification
+$whitelist: add-to-whitelist(
+  "notification-background-color",
+  "notification-color",
+  "notification-close-right",
+  "notification-close-top",
+  "notification-notices-padding",
+  "notification-notices-zindex"
+);
+
+// Pagination
+$whitelist: add-to-whitelist(
+  "pagination-link-current-background-color",
+  "pagination-link-current-border-color",
+  "pagination-link-current-color"
+);
+
+// Radio
+$whitelist: add-to-whitelist(
+  "radio-size",
+  "radio-active-background-color",
+  "radio-disabled-opacity"
+);
+
+// Select
+$whitelist: add-to-whitelist("select-arrow-size");
+
+// Sidebar
+$whitelist: add-to-whitelist(
+  "sidebar-zindex",
+  "sidebar-overlay",
+  "sidebar-content-background-color"
+);
+
+// Slider
+$whitelist: add-to-whitelist(
+  "slider-track-background",
+  "slider-tick-background",
+  "slider-fill-background",
+  "slider-thumb-size",
+  "slider-thumb-background",
+  "slider-thumb-border",
+  "slider-background",
+  "slider-tick-width",
+  "slider-track-height"
+);
+
+// Skeleton
+$whitelist: add-to-whitelist("skeleton-background", "skeleton-duration");
+
+// Steps
+$whitelist: add-to-whitelist(
+  "steps-marker-color",
+  "steps-marker-border",
+  "steps-marker-background",
+  "steps-previous-color",
+  "steps-active-color",
+  "steps-details-background-color"
+);
+
+// Switch
+$whitelist: add-to-whitelist(
+  "switch-width",
+  "switch-padding",
+  "switch-background",
+  "switch-action-background",
+  "switch-active-background-color",
+  "switch-disabled-opacity",
+  "switch-rounded-border-radius"
+);
+
+// Tabs
+$whitelist: add-to-whitelist(
+  "tabs-disabled-opacity",
+  "tabs-link-active-color",
+  "tabs-link-active-border-bottom-color",
+  "tabs-link-color"
+);
+
+// Timepicker
+$whitelist: add-to-whitelist("timepicker-select-placeholder-opacity");
+
+// Tooltip
+$whitelist: add-to-whitelist(
+  "tooltip-arrow-size",
+  "tooltip-arrow-margin",
+  "tooltip-content-zindex",
+  "tooltip-background-color"
+);
+
+// Import Oruga Theme styles
+@import "./oruga-common";