@oruga-ui/theme-oruga 0.0.1 → 0.2.1

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

@@ -15,226 +15,8 @@ $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;
 
@@ -254,6 +36,7 @@ $TBLR_CALC_EXPRESSION: "calc(($size + $margin) + 100%)";
       $tooltip-background-color
     );
 
+    // variants
     @each $name, $pair in $colors {
       $color: list.nth($pair, 1);
       $color-invert: list.nth($pair, 2);
@@ -261,6 +44,237 @@ $TBLR_CALC_EXPRESSION: "calc(($size + $margin) + 100%)";
         @include avariable("color", ("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;
+
+      @include avariable(
+        "border-bottom-width",
+        "tooltip-arrow-size",
+        $tooltip-arrow-size
+      );
+      @include avariable(
+        "border-right-width",
+        "tooltip-arrow-size",
+        $tooltip-arrow-size
+      );
+      @include avariable(
+        "border-left-width",
+        "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;
+
+      @include avariable(
+        "border-top-width",
+        "tooltip-arrow-size",
+        $tooltip-arrow-size
+      );
+      @include avariable(
+        "border-right-width",
+        "tooltip-arrow-size",
+        $tooltip-arrow-size
+      );
+      @include avariable(
+        "border-left-width",
+        "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;
+
+      @include avariable(
+        "border-left-width",
+        "tooltip-arrow-size",
+        $tooltip-arrow-size
+      );
+      @include avariable(
+        "border-top-width",
+        "tooltip-arrow-size",
+        $tooltip-arrow-size
+      );
+      @include avariable(
+        "border-bottom-width",
+        "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;
+
+      @include avariable(
+        "border-right-width",
+        "tooltip-arrow-size",
+        $tooltip-arrow-size
+      );
+      @include avariable(
+        "border-top-width",
+        "tooltip-arrow-size",
+        $tooltip-arrow-size
+      );
+      @include avariable(
+        "border-bottom-width",
+        "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;
+
+      @include avariable(
+        "border-top-width",
+        "tooltip-arrow-size",
+        $tooltip-arrow-size
+      );
+      @include evariable(
+        "border-right-width",
+        "calc($size *2)",
+        eparam("$size", variable("tooltip-arrow-size", $tooltip-arrow-size))
+      );
+      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;
+
+      @include avariable(
+        "border-top-width",
+        "tooltip-arrow-size",
+        $tooltip-arrow-size
+      );
+      @include evariable(
+        "border-left-width",
+        "calc($size *2)",
+        eparam("$size", variable("tooltip-arrow-size", $tooltip-arrow-size))
+      );
+      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;
+
+      @include avariable(
+        "border-bottom-width",
+        "tooltip-arrow-size",
+        $tooltip-arrow-size
+      );
+      @include evariable(
+        "border-left-width",
+        "calc($size *2)",
+        eparam("$size", variable("tooltip-arrow-size", $tooltip-arrow-size))
+      );
+      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;
+
+      @include avariable(
+        "border-bottom-width",
+        "tooltip-arrow-size",
+        $tooltip-arrow-size
+      );
+      @include evariable(
+        "border-right-width",
+        "calc($size *2)",
+        eparam("$size", variable("tooltip-arrow-size", $tooltip-arrow-size))
+      );
+      border-left-width: 0;
+    }
   }
 
   &__content {
@@ -309,6 +323,7 @@ $TBLR_CALC_EXPRESSION: "calc(($size + $margin) + 100%)";
     );
     @include avariable("color", "tooltip-color", $tooltip-color);
 
+    // variants
     @each $name, $pair in $colors {
       $color: list.nth($pair, 1);
       $color-invert: list.nth($pair, 2);
@@ -322,6 +337,138 @@ $TBLR_CALC_EXPRESSION: "calc(($size + $margin) + 100%)";
       }
     }
 
+    // position
+    &--top {
+      top: auto;
+      right: auto;
+
+      @include evariable(
+        "bottom",
+        "calc(($size + $margin) + 100%)",
+        eparam("$size", variable("tooltip-arrow-size", $tooltip-arrow-size)),
+        eparam(
+          "$margin",
+          variable("tooltip-arrow-margin", $tooltip-arrow-margin)
+        )
+      );
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    &--bottom {
+      @include evariable(
+        "top",
+        "calc(($size + $margin) + 100%)",
+        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%);
+    }
+
+    &--right {
+      top: 50%;
+      right: auto;
+      bottom: auto;
+
+      @include evariable(
+        "left",
+        "calc(($size + $margin) + 100%)",
+        eparam("$size", variable("tooltip-arrow-size", $tooltip-arrow-size)),
+        eparam(
+          "$margin",
+          variable("tooltip-arrow-margin", $tooltip-arrow-margin)
+        )
+      );
+      transform: translateY(-50%);
+    }
+
+    &--left {
+      top: 50%;
+
+      @include evariable(
+        "right",
+        "calc(($size + $margin) + 100%)",
+        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%);
+    }
+
+    &--top-right {
+      left: auto;
+      top: auto;
+
+      @include evariable(
+        "bottom",
+        "calc(($size + $margin) + 100%)",
+        eparam("$size", variable("tooltip-arrow-size", $tooltip-arrow-size)),
+        eparam(
+          "$margin",
+          variable("tooltip-arrow-margin", $tooltip-arrow-margin)
+        )
+      );
+      transform: translateX(50%);
+    }
+
+    &--top-left {
+      right: auto;
+      top: auto;
+
+      @include evariable(
+        "bottom",
+        "calc(($size + $margin) + 100%)",
+        eparam("$size", variable("tooltip-arrow-size", $tooltip-arrow-size)),
+        eparam(
+          "$margin",
+          variable("tooltip-arrow-margin", $tooltip-arrow-margin)
+        )
+      );
+      transform: translateX(-50%);
+    }
+
+    &--bottom-right {
+      left: auto;
+      bottom: auto;
+
+      @include evariable(
+        "top",
+        "calc(($size + $margin) + 100%)",
+        eparam("$size", variable("tooltip-arrow-size", $tooltip-arrow-size)),
+        eparam(
+          "$margin",
+          variable("tooltip-arrow-margin", $tooltip-arrow-margin)
+        )
+      );
+      transform: translateX(50%);
+    }
+
+    &--bottom-left {
+      left: auto;
+      bottom: auto;
+
+      @include evariable(
+        "top",
+        "calc(($size + $margin) + 100%)",
+        eparam("$size", variable("tooltip-arrow-size", $tooltip-arrow-size)),
+        eparam(
+          "$margin",
+          variable("tooltip-arrow-margin", $tooltip-arrow-margin)
+        )
+      );
+      transform: translateX(-50%);
+    }
+
     &--always {
       opacity: 1;
       visibility: visible;
@@ -339,6 +486,63 @@ $TBLR_CALC_EXPRESSION: "calc(($size + $margin) + 100%)";
     }
   }
 
+  &--teleport {
+    .o-tip__content {
+      // position
+      &--top,
+      &--top-left,
+      &--top-right {
+        @include evariable(
+          "margin-top",
+          "calc(-1 * ($size + $margin))",
+          eparam("$size", variable("tooltip-arrow-size", $tooltip-arrow-size)),
+          eparam(
+            "$margin",
+            variable("tooltip-arrow-margin", $tooltip-arrow-margin)
+          )
+        );
+      }
+
+      &--bottom,
+      &--bottom-left,
+      &--bottom-right {
+        @include evariable(
+          "margin-top",
+          "calc($size + $margin)",
+          eparam("$size", variable("tooltip-arrow-size", $tooltip-arrow-size)),
+          eparam(
+            "$margin",
+            variable("tooltip-arrow-margin", $tooltip-arrow-margin)
+          )
+        );
+      }
+
+      &--right {
+        @include evariable(
+          "margin-left",
+          "calc($size + $margin)",
+          eparam("$size", variable("tooltip-arrow-size", $tooltip-arrow-size)),
+          eparam(
+            "$margin",
+            variable("tooltip-arrow-margin", $tooltip-arrow-margin)
+          )
+        );
+      }
+
+      &--left {
+        @include evariable(
+          "margin-left",
+          "calc(-1 * ($size + $margin))",
+          eparam("$size", variable("tooltip-arrow-size", $tooltip-arrow-size)),
+          eparam(
+            "$margin",
+            variable("tooltip-arrow-margin", $tooltip-arrow-margin)
+          )
+        );
+      }
+    }
+  }
+
   &__trigger {
     width: 100%;
   }

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

@@ -17,7 +17,6 @@
 @import "components/field";
 @import "components/icon";
 @import "components/input";
-@import "components/inputitems";
 @import "components/loading";
 @import "components/menu";
 @import "components/modal";
@@ -32,6 +31,7 @@
 @import "components/switch";
 @import "components/table";
 @import "components/tabs";
+@import "components/taginput";
 @import "components/timepicker";
 @import "components/tooltip";
 @import "components/upload";