@oruga-ui/theme-oruga 0.5.1 → 0.7.0

package/dist/scss/components/_tag.scss

@@ -0,0 +1,84 @@
+@use "sass:list";
+
+/* @docs */
+$tag-color: var(--#{$prefix}grey-dark) !default;
+$tag-background-color: $control-brackground-color !default;
+$tag-border-radius: var(--#{$prefix}base-border-radius) !default;
+$tag-rounded-border-radius: var(
+    --#{$prefix}base-border-radius-rounded
+) !default;
+$tag-padding: 0 0.75em !default;
+$tag-icon-margin: 0.5em !default;
+/* @docs */
+
+.o-tag {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1.5;
+    white-space: nowrap;
+    color: var(--#{$prefix}tag-color, $tag-color);
+    background-color: var(
+        --#{$prefix}tag-background-color,
+        $tag-background-color
+    );
+    border-radius: var(--#{$prefix}tag-border-radius, $tag-border-radius);
+    padding: var(--#{$prefix}tag-padding, $tag-padding);
+
+    &:empty {
+        width: 1em;
+        height: 1em;
+        padding-right: 0;
+    }
+
+    &--rounded {
+        border-radius: var(
+            --#{$prefix}tag-rounded-border-radius,
+            $tag-rounded-border-radius
+        );
+    }
+
+    &--badge {
+        position: absolute;
+        top: 0;
+        left: 100%;
+        transform: translate(-50%, -50%);
+    }
+
+    &__icon {
+        margin-right: var(--#{$prefix}tag-icon-margin, $tag-icon-margin);
+    }
+
+    &__close {
+        margin-left: var(--#{$prefix}tag-icon-margin, $tag-icon-margin);
+    }
+
+    // size variants
+    @each $name, $value in $sizes {
+        &--#{$name} {
+            font-size: var(--#{$prefix}tag-font-size-#{$name}, $value);
+        }
+    }
+
+    // color variants
+    @each $name, $pair in $colors {
+        $color: list.nth($pair, 1);
+        $color-invert: list.nth($pair, 2);
+
+        &--#{$name} {
+            background-color: var(--#{$prefix}variant-#{$name}, $color);
+            border-color: var(
+                --#{$prefix}variant-invert-#{$name},
+                $color-invert
+            );
+            color: var(--#{$prefix}variant-invert-#{$name}, $color-invert);
+
+            &:focus,
+            &:hover {
+                /* background-color: darken($color-invert, 5%)*/
+                /* IE 11 needs polyfill*/
+                filter: brightness(95%);
+            }
+        }
+    }
+}

package/dist/scss/components/_taginput.scss

@@ -1,117 +1,75 @@
 @use "sass:list";
 
 /* @docs */
-$taginput-counter-font-size: 0.75rem !default;
+$taginput-counter-font-size: 0.75em !default;
 $taginput-counter-margin: 0.25rem 0 0 0.5rem !default;
-$taginput-item-background-color: var(--#{$prefix}primary) !default;
-$taginput-item-color: var(--#{$prefix}primary-invert) !default;
-$taginput-item-border-radius: var(--#{$prefix}base-border-radius) !default;
 $taginput-item-margin: 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: flex;
-
-  &__container {
     display: flex;
-    flex-wrap: wrap;
-
-    box-shadow: var(--#{$prefix}input-box-shadow, $input-box-shadow);
-    background-color: var(
-      --#{$prefix}input-background-color,
-      $input-background-color
-    );
-    border-color: var(--#{$prefix}input-border-color, $input-border-color);
-    border-style: var(--#{$prefix}input-border-style, $input-border-style);
-    border-width: var(--#{$prefix}input-border-width, $input-border-width);
-    border-radius: var(--#{$prefix}input-border-radius, $input-border-radius);
-    color: var(--#{$prefix}input-color, $input-color);
-    font-size: var(--#{$prefix}base-font-size, $base-font-size);
-    line-height: var(--#{$prefix}input-line-height, $input-line-height);
-    margin: var(--#{$prefix}input-margin, $input-margin);
-    width: var(--#{$prefix}taginput-width, inherit);
 
-    // size variants
-    @each $name, $value in $sizes {
-      &--#{$name} {
-        font-size: var(--#{$prefix}taginput-font-size-#{$name}, $value);
-      }
+    &__container {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+
+        box-shadow: var(--#{$prefix}input-box-shadow, $input-box-shadow);
+        background-color: var(
+            --#{$prefix}input-background-color,
+            $input-background-color
+        );
+        border-color: var(--#{$prefix}input-border-color, $input-border-color);
+        border-style: var(--#{$prefix}input-border-style, $input-border-style);
+        border-width: var(--#{$prefix}input-border-width, $input-border-width);
+        border-radius: var(
+            --#{$prefix}input-border-radius,
+            $input-border-radius
+        );
+        color: var(--#{$prefix}input-color, $input-color);
+        line-height: var(--#{$prefix}input-line-height, $input-line-height);
+        margin: var(--#{$prefix}input-margin, $input-margin);
+        width: var(--#{$prefix}taginput-width, inherit);
     }
-  }
-
-  &__autocomplete {
-    flex-grow: 1;
-    flex-shrink: 1;
-    width: auto;
-  }
-
-  &__input {
-    border: none;
-    box-shadow: none;
-    width: 100%;
-  }
-
-  &__item {
-    display: inline-flex;
-    margin: var(--#{$prefix}taginput-item-margin, $taginput-item-margin);
-    padding: var(--#{$prefix}taginput-item-padding, $taginput-item-padding);
-    color: var(--#{$prefix}taginput-item-color, $taginput-item-color);
-    background-color: var(
-      --#{$prefix}taginput-item-background-color,
-      $taginput-item-background-color
-    );
-    border-radius: var(
-      --#{$prefix}taginput-item-border-radius,
-      $taginput-item-border-radius
-    );
-
-    // color variants
-    @each $name, $pair in $colors {
-      $color: list.nth($pair, 1);
-      $color-invert: list.nth($pair, 2);
 
-      &--#{$name} {
-        --#{$prefix}focus: #{createFocus($color)};
-
-        background-color: var(--#{$prefix}variant-#{$name}, $color);
-        color: var(--#{$prefix}variant-invert-#{$name}, $color-invert);
-      }
+    &__autocomplete {
+        flex-grow: 1;
+        flex-shrink: 1;
+        width: auto;
     }
 
-    // focus effect
-    &:focus,
-    &:focus-within {
-      box-shadow: 0 0 0 0.25rem var(--#{$prefix}focus);
-      outline: 0;
+    &__input {
+        border: none;
+        box-shadow: none;
     }
-  }
 
-  &__counter {
-    display: block;
-    float: right;
-    font-size: var(
-      --#{$prefix}taginput-counter-font-size,
-      $taginput-counter-font-size
-    );
-    margin: var(--#{$prefix}taginput-counter-margin, $taginput-counter-margin);
-  }
+    // size variants
+    @each $name, $value in $sizes {
+        &--#{$name} {
+            font-size: var(--#{$prefix}taginput-font-size-#{$name}, $value);
+        }
+    }
 
-  &--expanded {
-    width: 100%;
-    flex-grow: 1;
-    flex-shrink: 1;
-  }
+    &__item {
+        margin: var(--#{$prefix}taginput-item-margin, $taginput-item-margin);
+    }
 
-  // // focus effect
-  // &:focus &__container,
-  // &:focus-within &__container {
-  //   box-shadow: 0 0 0 0.25rem var(--#{$prefix}focus);
+    &__counter {
+        display: block;
+        float: right;
+        font-size: var(
+            --#{$prefix}taginput-counter-font-size,
+            $taginput-counter-font-size
+        );
+        margin: var(
+            --#{$prefix}taginput-counter-margin,
+            $taginput-counter-margin
+        );
+    }
 
-  //   // disable focus effect for inner input
-  //   .o-input {
-  //     --#{$prefix}focus: transparent;
-  //   }
-  // }
+    &--expanded {
+        width: 100%;
+        flex-grow: 1;
+        flex-shrink: 1;
+    }
 }

package/dist/scss/components/_timepicker.scss

@@ -6,87 +6,93 @@ $timepicker-footer-padding: 0 0.5rem !default;
 $timepicker-footer-margin: 0.875rem 0 0 0 !default;
 $timepicker-select-line-height: var(--#{$prefix}base-line-height) !default;
 $timepicker-select-padding: $control-padding-vertical
-  $control-padding-horizontal !default;
+    $control-padding-horizontal !default;
 $timepicker-select-color: #363636 !default;
 $timepicker-select-font-weight: 600 !default;
 $timepicker-select-placeholder-opacity: var(
-  --#{$prefix}base-disabled-opacity
+    --#{$prefix}base-disabled-opacity
 ) !default;
 $timepicker-separator-font-weight: 600 !default;
 /* @docs */
 
-.o-tpck {
-  font-size: var(--#{$prefix}timepicker-font-size, $timepicker-font-size);
+.o-timepicker {
+    font-size: var(--#{$prefix}timepicker-font-size, $timepicker-font-size);
 
-  @each $name, $value in $sizes {
-    &--#{$name} {
-      font-size: var(--#{$prefix}timepicker-font-size-#{$name}, $value);
+    @each $name, $value in $sizes {
+        &--#{$name} {
+            font-size: var(--#{$prefix}timepicker-font-size-#{$name}, $value);
+        }
     }
-  }
 
-  &__dropdown {
-    width: 100%;
-  }
+    &__dropdown {
+        width: 100%;
+    }
 
-  &__box {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    line-height: var(
-      --#{$prefix}timepicker-box-line-height,
-      $timepicker-box-line-height
-    );
-    padding: var(--#{$prefix}timepicker-box-padding, $timepicker-box-padding);
-  }
+    &__box {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        line-height: var(
+            --#{$prefix}timepicker-box-line-height,
+            $timepicker-box-line-height
+        );
+        padding: var(
+            --#{$prefix}timepicker-box-padding,
+            $timepicker-box-padding
+        );
+    }
 
-  &__select {
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    display: inline-block;
-    position: relative;
-    vertical-align: top;
-    cursor: pointer;
-    justify-content: flex-start;
-    align-items: center;
-    border: 0;
-    font-size: inherit;
-    font-weight: var(
-      --#{$prefix}timepicker-select-font-weight,
-      $timepicker-select-font-weight
-    );
-    line-height: var(
-      --#{$prefix}timepicker-select-line-height,
-      $timepicker-select-line-height
-    );
-    color: var(--#{$prefix}timepicker-select-color, $timepicker-select-color);
-    padding: var(
-      --#{$prefix}timepicker-select-padding,
-      $timepicker-select-padding
-    );
-  }
+    &__select {
+        -moz-appearance: none;
+        -webkit-appearance: none;
+        display: inline-block;
+        position: relative;
+        vertical-align: top;
+        cursor: pointer;
+        justify-content: flex-start;
+        align-items: center;
+        border: 0;
+        font-size: inherit;
+        font-weight: var(
+            --#{$prefix}timepicker-select-font-weight,
+            $timepicker-select-font-weight
+        );
+        line-height: var(
+            --#{$prefix}timepicker-select-line-height,
+            $timepicker-select-line-height
+        );
+        color: var(
+            --#{$prefix}timepicker-select-color,
+            $timepicker-select-color
+        );
+        padding: var(
+            --#{$prefix}timepicker-select-padding,
+            $timepicker-select-padding
+        );
+    }
 
-  &__select-placeholder {
-    opacity: var(
-      --#{$prefix}timepicker-select-placeholder-opacity,
-      $timepicker-select-placeholder-opacity
-    );
-  }
+    &__select-placeholder {
+        opacity: var(
+            --#{$prefix}timepicker-select-placeholder-opacity,
+            $timepicker-select-placeholder-opacity
+        );
+    }
 
-  &__separator {
-    font-weight: var(
-      --#{$prefix}timepicker-separator-font-weight,
-      $timepicker-separator-font-weight
-    );
-  }
+    &__separator {
+        font-weight: var(
+            --#{$prefix}timepicker-separator-font-weight,
+            $timepicker-separator-font-weight
+        );
+    }
 
-  &__footer {
-    padding: var(
-      --#{$prefix}timepicker-header-padding,
-      $timepicker-footer-padding
-    );
-    margin: var(
-      --#{$prefix}timepicker-header-margin,
-      $timepicker-footer-margin
-    );
-  }
+    &__footer {
+        padding: var(
+            --#{$prefix}timepicker-header-padding,
+            $timepicker-footer-padding
+        );
+        margin: var(
+            --#{$prefix}timepicker-header-margin,
+            $timepicker-footer-margin
+        );
+    }
 }