@oruga-ui/theme-oruga 0.0.1 → 0.2.0

package/src/assets/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;
+  }
+}