@react-ui-org/react-ui 0.44.1 → 0.47.0

package/src/lib/styles/tools/_transition.scss

@@ -1,70 +1,68 @@
-@use 'sass:list';
-@use 'sass:meta';
-@use 'sass:string';
-@use '../settings/animations';
+@use "sass:list";
+@use "sass:meta";
+@use "sass:string";
+@use "../settings/animations";
 
 $_allowed-transitions: (
-  border-color,
-  background-color,
-  background-position,
-  box-shadow,
-  color,
-  opacity,
-  transform,
-  visibility,
+    border-color,
+    background-color,
+    background-position,
+    box-shadow,
+    color,
+    opacity,
+    transform,
+    visibility,
 );
 
 $_reduced-motion-disallowed-transitions: (transform);
 
 @function _validate-transitions($properties) {
-  @each $property in $properties {
-    $is-allowed: list.index($_allowed-transitions, $property);
+    @each $property in $properties {
+        $is-allowed: list.index($_allowed-transitions, $property);
 
-    @if not $is-allowed {
-      @return false;
+        @if not $is-allowed {
+            @return false;
+        }
     }
-  }
 
-  @return true;
+    @return true;
 }
 
 @function _reduce-motion-transitions($properties) {
-  $reduced-properties: ();
-  $separator: list.separator($properties);
+    $reduced-properties: ();
+    $separator: list.separator($properties);
 
-  @each $property in $properties {
-    @if not list.index($_reduced-motion-disallowed-transitions, $property) {
-      $reduced-properties: list.append($reduced-properties, $property, $separator: $separator);
+    @each $property in $properties {
+        @if not list.index($_reduced-motion-disallowed-transitions, $property) {
+            $reduced-properties: list.append($reduced-properties, $property, $separator: $separator);
+        }
     }
-  }
 
-  @return $reduced-properties;
+    @return $reduced-properties;
 }
 
 @mixin add($properties, $duration: 150ms) {
-  $property-list: ();
+    $property-list: ();
 
-  @if meta.type-of($properties) != 'string' and meta.type-of($properties) != 'list' {
-    @error "Transition properties must be a string or a Sass list, `#{$properties}` given.";
-  }
-
-  $property-list: list.join($property-list, $properties);
+    @if meta.type-of($properties) != "string" and meta.type-of($properties) != "list" {
+        @error "Transition properties must be a string or a Sass list, `#{$properties}` given.";
+    }
 
-  @if not _validate-transitions($property-list) {
-    @error "Only [#{$_allowed-transitions}] transitions are allowed, [#{$properties}] given.";
-  }
+    $property-list: list.join($property-list, $properties);
 
-  @else {
-    $reduced-property-list: _reduce-motion-transitions($property-list);
+    @if not _validate-transitions($property-list) {
+        @error "Only [#{$_allowed-transitions}] transitions are allowed, [#{$properties}] given.";
+    } @else {
+        $reduced-property-list: _reduce-motion-transitions($property-list);
 
-    transition-property: $property-list;
-    transition-duration: $duration;
-    transition-timing-function: animations.$standard-timing-function;
+        transition-property: $property-list;
+        transition-duration: $duration;
+        transition-timing-function: animations.$standard-timing-function;
 
-    @if (list.length($reduced-property-list) > 0) {
-      @media (prefers-reduced-motion: reduce) {
-        transition-property: $reduced-property-list;
-      }
+        @if list.length($reduced-property-list) > 0 {
+            @media (prefers-reduced-motion: reduce) {
+                transition-property: $reduced-property-list;
+            }
+        }
     }
-  }
 }

package/src/lib/styles/tools/_utilities.scss

@@ -1,30 +1,30 @@
 // Utility generator
 // Inspired by Bootstrap 4
 
-@use 'sass:list';
-@use 'sass:map';
-@use 'sass:meta';
+@use "sass:list";
+@use "sass:map";
+@use "sass:meta";
 
 @mixin generate($utility, $infix) {
-  $values: map.get($utility, values);
+    $values: map.get($utility, values);
 
-  // If the values are a list or string, convert it into a map
-  @if meta.type-of($values) == 'string' or meta.type-of(list.nth($values, 1)) != 'list' {
-    $values: list.zip($values, $values);
-  }
+    // If the values are a list or string, convert it into a map
+    @if meta.type-of($values) == "string" or meta.type-of(list.nth($values, 1)) != "list" {
+        $values: list.zip($values, $values);
+    }
 
-  @each $key, $value in $values {
-    $properties: map.get($utility, property);
-    $property-class: map.get($utility, class);
+    @each $key, $value in $values {
+        $properties: map.get($utility, property);
+        $property-class: map.get($utility, class);
 
-    // Don't prefix if value key is null (e.g. with shadow class)
-    $property-class-modifier: if($key, '-' + $key, '');
+        // Don't prefix if value key is null (e.g. with shadow class)
+        $property-class-modifier: if($key, "-" + $key, "");
 
-    :global(.#{$property-class + $infix + $property-class-modifier}) {
-      @each $property in $properties {
-        // stylelint-disable-next-line declaration-no-important
-        #{$property}: $value !important;
-      }
+        :global(.#{$property-class + $infix + $property-class-modifier}) {
+            @each $property in $properties {
+                // stylelint-disable-next-line declaration-no-important
+                #{$property}: $value !important;
+            }
+        }
     }
-  }
 }

package/src/lib/styles/tools/form-fields/_box-field-elements.scss

@@ -4,121 +4,121 @@
 // 3. Let inputs properly fit various layout scenarios.
 // 4. Leave out space for SelectField caret.
 
-@use '../../settings/form-fields' as settings;
-@use '../../theme/form-fields' as theme;
-@use '../../tools/caret';
-@use '../spacing';
-@use '../transition';
+@use "../../settings/form-fields" as settings;
+@use "../../theme/form-fields" as theme;
+@use "../../tools/caret";
+@use "../spacing";
+@use "../transition";
 
 @mixin input-container() {
-  position: relative; // 1.
-  display: inline-flex;
-  min-width: 0; // 3.
-  max-width: 100%; // 3.
+    position: relative; // 1.
+    display: inline-flex;
+    min-width: 0; // 3.
+    max-width: 100%; // 3.
 }
 
 @mixin input() {
-  @include transition.add((opacity, color, border-color, background-color, box-shadow));
-
-  appearance: none;
-  width: theme.$box-input-width;
-  min-width: theme.$box-input-min-width;
-  max-width: 100%; // 3.
-  height: var(--rui-local-height);
-  padding: var(--rui-local-padding-y) var(--rui-local-padding-x);
-  font-weight: settings.$box-input-font-weight;
-  font-size: var(--rui-local-font-size);
-  line-height: settings.$box-input-line-height;
-  font-family: settings.$box-input-font-family;
-  vertical-align: middle;
-  color: var(--rui-local-color);
-  border: theme.$box-border-width solid var(--rui-local-border-color);
-  border-radius: theme.$box-border-radius;
-  background: var(--rui-local-background);
-  box-shadow: var(--rui-local-box-shadow);
-
-  &::placeholder {
-    color: theme.$box-placeholder-color;
-    opacity: 1;
-  }
+    @include transition.add((opacity, color, border-color, background-color, box-shadow));
+
+    appearance: none;
+    width: theme.$box-input-width;
+    min-width: theme.$box-input-min-width;
+    max-width: 100%; // 3.
+    height: var(--rui-local-height);
+    padding: var(--rui-local-padding-y) var(--rui-local-padding-x);
+    font-weight: settings.$box-input-font-weight;
+    font-size: var(--rui-local-font-size);
+    line-height: settings.$box-input-line-height;
+    font-family: settings.$box-input-font-family;
+    vertical-align: middle;
+    color: var(--rui-local-color);
+    border: theme.$box-border-width solid var(--rui-local-border-color);
+    border-radius: theme.$box-border-radius;
+    background: var(--rui-local-background);
+    box-shadow: var(--rui-local-box-shadow);
+
+    &::placeholder {
+        color: theme.$box-placeholder-color;
+        opacity: 1;
+    }
 }
 
 @mixin input-size() {
-  width:
-    calc(
-      1ch * var(--rui-custom-input-size)
-      + var(--rui-local-arrows-width, 0)
-      + 2 * var(--rui-local-padding-x)
-      + 2 * #{theme.$box-border-width}
-    ); // 2.
-
-  min-width: auto; // 2.
-
-  &[type="number"] {
-    --rui-local-arrows-width: #{settings.$box-field-input-number-arrows-width};
-  }
+    width:
+        calc(
+            1ch * var(--rui-custom-input-size)
+            + var(--rui-local-arrows-width, 0)
+            + 2 * var(--rui-local-padding-x)
+            + 2 * #{theme.$box-border-width}
+        ); // 2.
+
+    min-width: auto; // 2.
+
+    &[type="number"] {
+        --rui-local-arrows-width: #{settings.$box-field-input-number-arrows-width};
+    }
 }
 
 @mixin input-textarea() {
-  resize: vertical;
+    resize: vertical;
 
-  &[cols] {
-    min-width: auto;
-  }
+    &[cols] {
+        min-width: auto;
+    }
 }
 
 @mixin input-select() {
-  appearance: none;
-  padding-right: calc(#{settings.$box-field-caret-size} + #{spacing.of(2)}); // 4.
+    appearance: none;
+    padding-right: calc(#{settings.$box-field-caret-size} + #{spacing.of(2)}); // 4.
 
-  &::-ms-expand {
-    display: none;
-  }
+    &::-ms-expand {
+        display: none;
+    }
 }
 
 @mixin input-select-option() {
-  option:disabled {
-    color: theme.$box-select-option-disabled-color;
-  }
+    option:disabled {
+        color: theme.$box-select-option-disabled-color;
+    }
 }
 
 @mixin caret() {
-  @include transition.add((border-color));
-
-  position: absolute; // 1.
-  top: theme.$box-border-width;
-  right: theme.$box-border-width;
-  bottom: theme.$box-border-width;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: calc(#{settings.$box-field-caret-size} - 2 * #{theme.$box-border-width});
-  border-top-right-radius: theme.$box-border-radius;
-  border-bottom-right-radius: theme.$box-border-radius;
-  pointer-events: none;
+    @include transition.add((border-color));
+
+    position: absolute; // 1.
+    top: theme.$box-border-width;
+    right: theme.$box-border-width;
+    bottom: theme.$box-border-width;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: calc(#{settings.$box-field-caret-size} - 2 * #{theme.$box-border-width});
+    border-top-right-radius: theme.$box-border-radius;
+    border-bottom-right-radius: theme.$box-border-radius;
+    pointer-events: none;
 }
 
 @mixin caret-icon() {
-  @include caret.create();
+    @include caret.create();
 
-  border-color: var(--rui-local-color);
+    border-color: var(--rui-local-color);
 }
 
 @mixin bottom-line() {
-  @include transition.add((transform, opacity), 180ms);
-
-  position: absolute; // 1.
-  bottom: 0;
-  width: 100%;
-  height: settings.$box-field-bottom-line-height;
-  opacity: 0;
-  transform: scaleX(0);
-  transform-origin: center center;
-  pointer-events: none;
-
-  .input:focus ~ & {
-    background-color: var(--rui-local-border-color);
-    opacity: 1;
-    transform: scaleX(1);
-  }
+    @include transition.add((transform, opacity), 180ms);
+
+    position: absolute; // 1.
+    bottom: 0;
+    width: 100%;
+    height: settings.$box-field-bottom-line-height;
+    opacity: 0;
+    transform: scaleX(0);
+    transform-origin: center center;
+    pointer-events: none;
+
+    .input:focus ~ & {
+        background-color: var(--rui-local-border-color);
+        opacity: 1;
+        transform: scaleX(1);
+    }
 }