@oruga-ui/theme-oruga 0.0.1 → 0.2.1

package/dist/scss/components/_table.scss

@@ -5,7 +5,9 @@ $table-background-color: #fff !default;
 $table-background: #f5f5f5 !default;
 $table-boder: 1px solid transparent !default;
 $table-border-radius: $base-border-radius !default;
-$table-card-box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default;
+$table-card-box-shadow:
+  0 2px 3px rgba($black, 0.1),
+  0 0 0 1px rgba($black, 0.1) !default;
 $table-card-cell-font-weight: 600 !default;
 $table-card-cell-padding: 0 0.5em 0 0 !default;
 $table-card-cell-text-align: left !default;
@@ -39,8 +41,6 @@ $table-th-font-weight: 600 !default;
 $table-th-padding: 0.5em 0.75em !default;
 /* @docs */
 
-$SUM_EXPRESSION: "calc($param + $factor)";
-
 .o-table {
   display: table;
   width: 100%;
@@ -102,6 +102,7 @@ $SUM_EXPRESSION: "calc($param + $factor)";
       .o-table__mobile-sort {
         display: block;
       }
+
       // cards
       .o-table {
         background-color: transparent;
@@ -283,7 +284,7 @@ $SUM_EXPRESSION: "calc($param + $factor)";
 
       @include evariable(
         "z-index",
-        $SUM_EXPRESSION,
+        "calc($param + $factor)",
         eparam("$param", variable("table-sticky-zindex", $table-sticky-zindex)),
         eparam("$factor", 2)
       );
@@ -452,11 +453,20 @@ $SUM_EXPRESSION: "calc($param + $factor)";
     align-items: center;
     justify-content: space-between;
     display: flex;
+
+    // left - right
+    > div {
+      flex-basis: auto;
+      flex-grow: 0;
+      flex-shrink: 0;
+    }
+
     // left
     > div:first-child {
       align-items: center;
       justify-content: flex-start;
     }
+
     // right
     > div:last-child {
       align-items: center;
@@ -471,11 +481,5 @@ $SUM_EXPRESSION: "calc($param + $factor)";
         justify-content: center;
       }
     }
-    // left - right
-    > div {
-      flex-basis: auto;
-      flex-grow: 0;
-      flex-shrink: 0;
-    }
   }
 }

package/dist/scss/components/_taginput.scss

@@ -0,0 +1,163 @@
+@use "sass:list";
+
+/* @docs */
+$taginput-background-color: $input-background-color !default;
+$taginput-height: calc(2em - 1px) !default;
+$taginput-padding: calc(0.275em - 1px) 0 0 !default;
+$taginput-border-color: $grey-lighter !default;
+$taginput-border-style: solid !default;
+$taginput-border-width: 1px !default;
+$taginput-border-radius: $base-border-radius !default;
+$taginput-color: #363636 !default;
+$taginput-line-height: $base-line-height !default;
+$taginput-box-shadow: inset 0 1px 2px hsla(0, 0%, 4%, 0.1) !default;
+$taginput-max-width: 100% !default;
+$taginput-width: 100% !default;
+$taginput-counter-font-size: 0.75rem !default;
+$taginput-counter-margin: 0.25rem 0 0 0.5rem !default;
+$taginput-item-background-color: $primary !default;
+$taginput-item-color: $primary-invert !default;
+$taginput-item-border-radius: $base-border-radius !default;
+$taginput-item-margin: 0 0 0 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: block;
+
+  &__container {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    position: relative;
+    vertical-align: top;
+    flex-wrap: wrap;
+
+    @include avariable("max-width", "taginput-max-width", $taginput-max-width);
+    @include avariable("width", "taginput-width", $taginput-width);
+    @include avariable("padding", "taginput-padding", $taginput-padding);
+    @include avariable(
+      "background-color",
+      "taginput-background-color",
+      $taginput-background-color
+    );
+    @include avariable(
+      "border-color",
+      "taginput-border-color",
+      $taginput-border-color
+    );
+    @include avariable(
+      "border-style",
+      "taginput-border-style",
+      $taginput-border-style
+    );
+    @include avariable(
+      "border-width",
+      "taginput-border-width",
+      $taginput-border-width
+    );
+    @include avariable(
+      "border-radius",
+      "taginput-border-radius",
+      $taginput-border-radius
+    );
+    @include avariable("color", "taginput-color", $taginput-color);
+    @include avariable("font-size", "base-font-size", $base-font-size);
+    @include avariable(
+      "line-height",
+      "taginput-line-height",
+      $taginput-line-height
+    );
+    @include avariable(
+      "box-shadow",
+      "taginput-box-shadow",
+      $taginput-box-shadow
+    );
+
+    @each $name, $value in $sizes {
+      &--#{$name} {
+        @include avariable(
+          "font-size",
+          ("taginput-font-size-" + #{$name}),
+          $value
+        );
+      }
+    }
+  }
+
+  &__autocomplete {
+    position: static;
+    flex: 1;
+  }
+
+  &__input {
+    border: none;
+    box-shadow: none;
+
+    &:focus {
+      box-shadow: none;
+    }
+  }
+
+  &__item {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+
+    @include side-flex-gap($taginput-margin-icon-to-text);
+    @include avariable(
+      "background-color",
+      "taginput-item-background-color",
+      $taginput-item-background-color
+    );
+    @include avariable("color", "taginput-item-color", $taginput-item-color);
+    @include avariable(
+      "border-radius",
+      "taginput-item-border-radius",
+      $taginput-item-border-radius
+    );
+    @include avariable("margin", "taginput-item-margin", $taginput-item-margin);
+    @include avariable(
+      "padding",
+      "taginput-item-padding",
+      $taginput-item-padding
+    );
+
+    @each $name, $pair in $colors {
+      $color: list.nth($pair, 1);
+      $color-invert: list.nth($pair, 2);
+      &--#{$name} {
+        @include avariable("background-color", ("variant-" + #{$name}), $color);
+        @include avariable(
+          "color",
+          ("variant-invert-" + #{$name}),
+          $color-invert
+        );
+      }
+    }
+  }
+
+  &__counter {
+    display: block;
+    float: right;
+
+    @include avariable(
+      "font-size",
+      "taginput-counter-font-size",
+      $taginput-counter-font-size
+    );
+    @include avariable(
+      "margin",
+      "taginput-counter-margin",
+      $taginput-counter-margin
+    );
+  }
+
+  &--expanded {
+    width: 100%;
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
+}