@oruga-ui/theme-oruga 0.5.1 → 0.7.0

package/dist/scss/components/_field.scss

@@ -6,127 +6,128 @@ $field-label-font-weight: 600 !default;
 $field-margin-bottom: 0.75rem !default;
 $field-message-font-size: 0.75rem !default;
 $field-message-margin-top: 0.25rem !default;
-$field-margin-right: 0.37rem !default;
-$field-horizontal-label-margin: 0 1.5rem 0 0 !default;
+$field-spacer: 0.5rem !default;
+$field-horizontal-spacer: 0 1.5rem 0 0 !default;
 /* @docs */
 
 .o-field {
-  flex-grow: 1;
-
-  &:not(:last-child) {
-    margin-bottom: var(--#{$prefix}field-margin-bottom, $field-margin-bottom);
-  }
-
-  &__label {
-    display: block;
-    color: var(--#{$prefix}field-label-color, $field-label-color);
-    font-size: var(--#{$prefix}base-font-size, $base-font-size);
-    font-weight: var(
-      --#{$prefix}field-label-font-weight,
-      $field-label-font-weight
-    );
-
-    @each $name, $value in $sizes {
-      &-#{$name} {
-        font-size: var(--#{$prefix}field-font-size-#{$name}, $value);
-      }
-    }
-  }
-
-  &__message {
-    display: block;
-    font-size: var(
-      --#{$prefix}field-message-font-size,
-      $field-message-font-size
-    );
-    margin-top: var(
-      --#{$prefix}field-message-margin-top,
-      $field-message-margin-top
-    );
-
-    @each $name, $pair in $colors {
-      $color: list.nth($pair, 1);
-      &-#{$name} {
-        color: var(--#{$prefix}variant-#{$name}, $color);
-      }
-    }
-  }
-
-  &--addons {
-    display: flex;
-    justify-content: flex-start;
-
-    > button:first-child,
-    > *:first-child:not(:only-child) button,
-    > input:first-child,
-    > *:first-child:not(:only-child) input,
-    > select:first-child,
-    > *:first-child:not(:only-child) select {
-      border-bottom-right-radius: 0;
-      border-top-right-radius: 0;
-    }
+    flex-grow: 1;
 
-    > button:last-child,
-    > *:last-child:not(:only-child) button,
-    > input:last-child,
-    > *:last-child:not(:only-child) input,
-    > select:last-child,
-    > *:last-child:not(:only-child) select {
-      border-bottom-left-radius: 0;
-      border-top-left-radius: 0;
+    &:not(:last-child) {
+        margin-bottom: var(
+            --#{$prefix}field-margin-bottom,
+            $field-margin-bottom
+        );
     }
 
-    > *:not(:first-child):not(:last-child) button,
-    > button:not(:first-child):not(:last-child),
-    > *:not(:first-child):not(:last-child) input,
-    > input:not(:first-child):not(:last-child),
-    > *:not(:first-child):not(:last-child) select,
-    > select:not(:first-child):not(:last-child) {
-      border-radius: 0;
+    &__label {
+        display: block;
+        color: var(--#{$prefix}field-label-color, $field-label-color);
+        font-size: var(--#{$prefix}base-font-size, $base-font-size);
+        font-weight: var(
+            --#{$prefix}field-label-font-weight,
+            $field-label-font-weight
+        );
+
+        @each $name, $value in $sizes {
+            &--#{$name} {
+                font-size: var(--#{$prefix}field-font-size-#{$name}, $value);
+            }
+        }
     }
-  }
 
-  &--grouped {
-    display: flex;
+    &__message {
+        display: block;
+        font-size: var(
+            --#{$prefix}field-message-font-size,
+            $field-message-font-size
+        );
+        margin-top: var(
+            --#{$prefix}field-message-margin-top,
+            $field-message-margin-top
+        );
+
+        @each $name, $pair in $colors {
+            $color: list.nth($pair, 1);
+            &--#{$name} {
+                color: var(--#{$prefix}variant-#{$name}, $color);
+            }
+        }
+    }
 
-    @include side-flex-gap($field-margin-right);
-  }
+    &--addons {
+        display: flex;
+        justify-content: flex-start;
+
+        > button:first-child,
+        > *:first-child:not(:only-child) button,
+        > input:first-child,
+        > *:first-child:not(:only-child) input,
+        > select:first-child,
+        > *:first-child:not(:only-child) select {
+            border-bottom-right-radius: 0;
+            border-top-right-radius: 0;
+        }
+
+        > button:last-child,
+        > *:last-child:not(:only-child) button,
+        > input:last-child,
+        > *:last-child:not(:only-child) input,
+        > select:last-child,
+        > *:last-child:not(:only-child) select {
+            border-bottom-left-radius: 0;
+            border-top-left-radius: 0;
+        }
+
+        > *:not(:first-child):not(:last-child) button,
+        > button:not(:first-child):not(:last-child),
+        > *:not(:first-child):not(:last-child) input,
+        > input:not(:first-child):not(:last-child),
+        > *:not(:first-child):not(:last-child) select,
+        > select:not(:first-child):not(:last-child) {
+            border-radius: 0;
+        }
+    }
 
-  &--grouped-multiline {
-    flex-wrap: wrap;
+    &--grouped {
+        display: flex;
+        gap: var(--#{$prefix}field-spacer, $field-spacer);
+    }
 
-    &:last-child {
-      margin-bottom: var(--#{$prefix}field-margin-bottom, $field-margin-bottom);
+    &--multiline {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--#{$prefix}field-spacer, $field-spacer);
     }
-  }
 
-  &__horizontal-body {
-    display: flex;
-    flex-basis: 0;
-    flex-grow: 5;
-    flex-shrink: 1;
+    &__horizontal-body {
+        display: flex;
+        flex-basis: 0;
+        flex-grow: 5;
+        flex-shrink: 1;
+    }
 
-    @include side-flex-gap($field-margin-right);
-  }
+    &--horizontal {
+        display: flex;
+    }
 
-  &--horizontal {
-    display: flex;
-  }
+    &__horizontal-label {
+        flex-basis: 0;
+        flex-grow: 1;
+        flex-shrink: 0;
+        margin: var(
+            --#{$prefix}field-horizontal-spacer,
+            $field-horizontal-spacer
+        );
+        text-align: right;
+    }
 
-  &__horizontal-label {
-    flex-basis: 0;
-    flex-grow: 1;
-    flex-shrink: 0;
-    margin: $field-horizontal-label-margin;
-    text-align: right;
-  }
-
-  &--mobile {
-    &.o-field--horizontal,
-    .o-field__horizontal-label,
-    .o-field__horizontal-body {
-      display: block;
-      text-align: inherit;
+    &--mobile {
+        &.o-field--horizontal,
+        .o-field__horizontal-label,
+        .o-field__horizontal-body {
+            display: block;
+            text-align: inherit;
+        }
     }
-  }
 }

package/dist/scss/components/_icon.scss

@@ -5,49 +5,53 @@ $icon-spin-duration: 2s !default;
 /* @docs */
 
 @keyframes icon-spin {
-  0% {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-
-  100% {
-    -webkit-transform: rotate(359deg);
-    transform: rotate(359deg);
-  }
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotate(359deg);
+        transform: rotate(359deg);
+    }
 }
 
 .o-icon {
-  align-items: center;
-  display: inline-flex;
-  justify-content: center;
-  transition:
-    transform $animation-speed $animation-timing,
-    opacity $animation-speed-fast $animation-timing;
-
-  @each $name, $value in $sizes {
-    &--#{$name} {
-      font-size: var(--#{$prefix}icon-font-size-#{$name}, $value);
+    align-items: center;
+    display: inline-flex;
+    justify-content: center;
+    transition:
+        transform $animation-speed $animation-timing,
+        opacity $animation-speed-fast $animation-timing;
+
+    // sizes
+    @each $name, $value in $sizes {
+        &--#{$name} {
+            font-size: var(--#{$prefix}icon-font-size-#{$name}, $value);
+        }
+    }
+
+    // color variants
+    @each $name, $pair in $colors {
+        $color: list.nth($pair, 1);
+
+        &--#{$name} {
+            color: var(--#{$prefix}variant-#{$name}, $color);
+        }
     }
-  }
-  @each $name, $pair in $colors {
-    $color: list.nth($pair, 1);
-    &--#{$name} {
-      color: var(--#{$prefix}variant-#{$name}, $color);
+
+    &--clickable {
+        pointer-events: auto;
+        cursor: pointer;
+    }
+
+    &--spin {
+        animation-name: icon-spin;
+        animation-iteration-count: infinite;
+        animation-timing-function: linear;
+        animation-duration: var(
+            --#{$prefix}icon-spin-duration,
+            $icon-spin-duration
+        );
     }
-  }
-
-  &--clickable {
-    pointer-events: auto;
-    cursor: pointer;
-  }
-
-  &--spin {
-    animation-name: icon-spin;
-    animation-iteration-count: infinite;
-    animation-timing-function: linear;
-    animation-duration: var(
-      --#{$prefix}icon-spin-duration,
-      $icon-spin-duration
-    );
-  }
 }

package/dist/scss/components/_input.scss

@@ -7,7 +7,7 @@ $input-border-style: solid !default;
 $input-border-width: 1px !default;
 $input-border-radius: var(--#{$prefix}base-border-radius) !default;
 $input-rounded-border-radius: var(
-  --#{$prefix}base-border-radius-rounded
+    --#{$prefix}base-border-radius-rounded
 ) !default;
 $input-box-shadow: $control-box-shadow !default;
 $input-color: #363636 !default;
@@ -17,133 +17,148 @@ $input-line-height: var(--#{$prefix}base-line-height) !default;
 $input-margin: 0 !default;
 $input-padding: $control-padding-vertical $control-padding-horizontal !default;
 $input-counter-font-size: 0.75rem !default;
-$input-counter-margin: 0.25rem 0 0 0.5rem !default;
+$input-counter-margin: 0.25rem 0.5rem !default;
 $input-textarea-max-height: 600px !default;
 $input-textarea-min-height: 120px !default;
 $input-textarea-padding: 0.625em !default;
 /* @docs */
 
 .o-input {
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  display: inline-flex;
-  position: relative;
-  vertical-align: top;
-
-  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);
-  height: var(--#{$prefix}input-height, $input-height);
-  line-height: var(--#{$prefix}input-line-height, $input-line-height);
-  padding: var(--#{$prefix}input-padding, $input-padding);
-  margin: var(--#{$prefix}input-margin, $input-margin);
-
-  &__wrapper {
     display: inline-block;
     position: relative;
 
-    &--expanded {
-      width: 100%;
-      flex-grow: 1;
-      flex-shrink: 1;
+    &__input {
+        -moz-appearance: none;
+        -webkit-appearance: none;
+        display: inline-flex;
+        position: relative;
+        vertical-align: top;
+
+        color: var(--#{$prefix}input-color, $input-color);
+        font-size: var(--#{$prefix}base-font-size, $base-font-size);
+        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
+        );
+
+        height: var(--#{$prefix}input-height, $input-height);
+        line-height: var(--#{$prefix}input-line-height, $input-line-height);
+        padding: var(--#{$prefix}input-padding, $input-padding);
+        margin: var(--#{$prefix}input-margin, $input-margin);
+
+        &--iconspace-left {
+            padding-left: var(--#{$prefix}input-height, $input-height);
+        }
+
+        &--iconspace-right {
+            padding-right: var(--#{$prefix}input-height, $input-height);
+        }
+
+        &[disabled] {
+            cursor: inherit;
+        }
+    }
 
-      .o-input {
-        width: 100%;
-      }
+    &--textarea textarea {
+        display: block;
+        max-width: 100%;
+        min-width: 100%;
+        height: auto;
+        resize: vertical;
+        padding: var(
+            --#{$prefix}input-textarea-padding,
+            $input-textarea-padding
+        );
+
+        &:not([rows]) {
+            max-height: var(
+                --#{$prefix}input-textarea-max-height,
+                $input-textarea-max-height
+            );
+            min-height: var(
+                --#{$prefix}input-textarea-min-height,
+                $input-textarea-min-height
+            );
+        }
     }
-  }
-
-  &__textarea {
-    display: block;
-    max-width: 100%;
-    min-width: 100%;
-    height: auto;
-    resize: vertical;
-    padding: var(--#{$prefix}input-textarea-padding, $input-textarea-padding);
-
-    &:not([rows]) {
-      max-height: var(
-        --#{$prefix}input-textarea-max-height,
-        $input-textarea-max-height
-      );
-      min-height: var(
-        --#{$prefix}input-textarea-min-height,
-        $input-textarea-min-height
-      );
+
+    // size variants
+    @each $name, $value in $sizes {
+        &--#{$name} .o-input__input {
+            font-size: var(--#{$prefix}input-font-size-#{$name}, $value);
+        }
     }
-  }
-
-  &__counter {
-    display: block;
-    float: right;
-    font-size: var(
-      --#{$prefix}input-counter-font-size,
-      $input-counter-font-size
-    );
-    margin: var(--#{$prefix}input-counter-margin, $input-counter-margin);
-  }
-
-  &__icon-left,
-  &__icon-right {
-    position: absolute;
-    top: 0;
-    height: 100%;
-    width: var(--#{$prefix}input-height, $input-height);
-    z-index: var(--#{$prefix}input-icon-zindex, $input-icon-zindex);
-  }
-
-  &__icon-right {
-    right: 0;
-  }
-
-  &__icon-left {
-    left: 0;
-  }
-
-  &--iconspace-left {
-    padding-left: var(--#{$prefix}input-height, $input-height);
-  }
-
-  &--iconspace-right {
-    padding-right: var(--#{$prefix}input-height, $input-height);
-  }
-
-  &--rounded {
-    border-radius: var(
-      --#{$prefix}input-rounded-border-radius,
-      $input-rounded-border-radius
-    );
-  }
-
-  // size variants
-  @each $name, $value in $sizes {
-    &--#{$name} {
-      font-size: var(--#{$prefix}input-font-size-#{$name}, $value);
+
+    // colar variants
+    @each $name, $pair in $colors {
+        $color: list.nth($pair, 1);
+
+        &--#{$name} .o-input__input {
+            --#{$prefix}focus: #{createFocus($color)};
+
+            border-color: var(--#{$prefix}variant-#{$name}, $color);
+        }
     }
-  }
 
-  // colar variants
-  @each $name, $pair in $colors {
-    $color: list.nth($pair, 1);
+    &--rounded .o-input__input {
+        border-radius: var(
+            --#{$prefix}input-rounded-border-radius,
+            $input-rounded-border-radius
+        );
+    }
 
-    &--#{$name} {
-      --#{$prefix}focus: #{createFocus($color)};
+    &--expanded {
+        width: 100%;
+        flex-grow: 1;
+        flex-shrink: 1;
 
-      border-color: var(--#{$prefix}variant-#{$name}, $color);
+        .o-input__input {
+            width: 100%;
+        }
     }
-  }
 
-  // focus effect
-  &:focus,
-  &:focus-within {
-    box-shadow: 0 0 0 0.25rem var(--#{$prefix}focus);
-  }
+    &__counter {
+        display: block;
+        float: right;
+        font-size: var(
+            --#{$prefix}input-counter-font-size,
+            $input-counter-font-size
+        );
+        margin: var(--#{$prefix}input-counter-margin, $input-counter-margin);
+    }
+
+    &__icon-left,
+    &__icon-right {
+        position: absolute;
+        top: 0;
+        height: 100%;
+        width: var(--#{$prefix}input-height, $input-height);
+        z-index: var(--#{$prefix}input-icon-zindex, $input-icon-zindex);
+    }
+
+    &__icon-right {
+        right: 0;
+    }
+
+    &__icon-left {
+        left: 0;
+    }
+
+    // focus effect
+    &:focus,
+    &:focus-visible,
+    &:focus-within {
+        .o-input__input {
+            box-shadow: 0 0 0 0.25rem var(--#{$prefix}focus);
+            outline: none;
+        }
+    }
 }

package/dist/scss/components/_loading.scss

@@ -5,33 +5,36 @@ $loading-zindex: 29 !default;
 $loading-fullpage-zindex: 999 !default;
 /* @docs */
 
-.o-load {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  top: 0;
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  overflow: hidden;
-  z-index: var(--#{$prefix}loading-zindex, $loading-zindex);
-
-  &--fullpage {
-    position: fixed;
-    z-index: var(--#{$prefix}loading-fullpage-zindex, $loading-fullpage-zindex);
-  }
-
-  &__overlay {
+.o-loading {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     top: 0;
-    background: var(
-      --#{$prefix}loading-overlay-legacy,
-      $loading-overlay-legacy
-    );
-    background: var(--#{$prefix}loading-overlay, $loading-overlay);
-  }
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    overflow: hidden;
+    z-index: var(--#{$prefix}loading-zindex, $loading-zindex);
+
+    &--fullpage {
+        position: fixed;
+        z-index: var(
+            --#{$prefix}loading-fullpage-zindex,
+            $loading-fullpage-zindex
+        );
+    }
+
+    &__overlay {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        top: 0;
+        background: var(
+            --#{$prefix}loading-overlay-legacy,
+            $loading-overlay-legacy
+        );
+        background: var(--#{$prefix}loading-overlay, $loading-overlay);
+    }
 }