@oruga-ui/theme-oruga 0.5.0 → 0.6.0

package/dist/scss/components/_upload.scss

@@ -4,66 +4,69 @@
 $upload-draggable-border: 1px dashed var(--#{$prefix}grey-light) !default;
 $upload-draggable-border-radius: var(--#{$prefix}base-border-radius) !default;
 $upload-draggable-disabled-opacity: var(
-  --#{$prefix}base-disabled-opacity
+    --#{$prefix}base-disabled-opacity
 ) !default;
 $upload-draggable-hover-border-color: var(--#{$prefix}grey) !default;
-$upload-draggable-padding: 0.25em !default;
+$upload-draggable-padding: 2em !default;
 /* @docs */
 
-.o-upl {
-  position: relative;
-  display: inline-flex;
+.o-upload {
+    position: relative;
+    display: inline-flex;
 
-  &--disabled {
-    opacity: var(
-      --#{$prefix}upload-draggable-disabled-opacity,
-      $upload-draggable-disabled-opacity
-    );
-    cursor: not-allowed;
-  }
+    &--disabled {
+        opacity: var(
+            --#{$prefix}upload-draggable-disabled-opacity,
+            $upload-draggable-disabled-opacity
+        );
+        cursor: not-allowed;
+    }
 
-  &--expanded {
-    width: 100%;
-  }
+    &--expanded {
+        width: 100%;
+    }
 
-  &__draggable {
-    cursor: pointer;
-    width: 100%;
+    &__draggable {
+        cursor: pointer;
+        width: 100%;
 
-    padding: var(
-      --#{$prefix}upload-draggable-padding,
-      $upload-draggable-padding
-    );
-    border: var(--#{$prefix}upload-draggable-border, $upload-draggable-border);
-    border-radius: var(
-      --#{$prefix}upload-draggable-border-radius,
-      $upload-draggable-border-radius
-    );
+        padding: var(
+            --#{$prefix}upload-draggable-padding,
+            $upload-draggable-padding
+        );
+        border: var(
+            --#{$prefix}upload-draggable-border,
+            $upload-draggable-border
+        );
+        border-radius: var(
+            --#{$prefix}upload-draggable-border-radius,
+            $upload-draggable-border-radius
+        );
 
-    &--hovered {
-      border-color: var(
-        --#{$prefix}upload-draggable-hover-border-color,
-        $upload-draggable-hover-border-color
-      );
+        &--hovered {
+            border-color: var(
+                --#{$prefix}upload-draggable-hover-border-color,
+                $upload-draggable-hover-border-color
+            );
 
-      @each $name, $pair in $colors {
-        $color: list.nth($pair, 1);
+            @each $name, $pair in $colors {
+                $color: list.nth($pair, 1);
 
-        &-#{$name} {
-          border-color: var(--#{$prefix}variant-#{$name}, $color);
+                &-#{$name} {
+                    border-color: var(--#{$prefix}variant-#{$name}, $color);
+                }
+            }
         }
-      }
     }
-  }
 
-  input[type="file"] {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-    cursor: pointer;
-    z-index: -1;
-  }
+    input[type="file"] {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        opacity: 0;
+        cursor: pointer;
+        z-index: -1;
+    }
 }

package/dist/scss/oruga.scss

@@ -6,7 +6,6 @@
 @import "utils/animations";
 @import "utils/helpers";
 @import "utils/root";
-
 @import "utils/base";
 
 // import Oruga components

package/dist/scss/utils/_animations.scss

@@ -2,106 +2,106 @@
 
 // Fade out
 @keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
+    from {
+        opacity: 1;
+    }
 
-  to {
-    opacity: 0;
-  }
+    to {
+        opacity: 0;
+    }
 }
 
 .fadeOut {
-  animation-name: fadeOut;
+    animation-name: fadeOut;
 }
 
 @keyframes fadeOutDown {
-  from {
-    opacity: 1;
-  }
+    from {
+        opacity: 1;
+    }
 
-  to {
-    opacity: 0;
-    transform: translate3d(0, 100%, 0);
-  }
+    to {
+        opacity: 0;
+        transform: translate3d(0, 100%, 0);
+    }
 }
 
 .fadeOutDown {
-  animation-name: fadeOutDown;
+    animation-name: fadeOutDown;
 }
 
 @keyframes fadeOutUp {
-  from {
-    opacity: 1;
-  }
+    from {
+        opacity: 1;
+    }
 
-  to {
-    opacity: 0;
-    transform: translate3d(0, -100%, 0);
-  }
+    to {
+        opacity: 0;
+        transform: translate3d(0, -100%, 0);
+    }
 }
 
 .fadeOutUp {
-  animation-name: fadeOutUp;
+    animation-name: fadeOutUp;
 }
 
 // Fade In
 @keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
+    from {
+        opacity: 0;
+    }
 
-  to {
-    opacity: 1;
-  }
+    to {
+        opacity: 1;
+    }
 }
 
 .fadeIn {
-  animation-name: fadeIn;
+    animation-name: fadeIn;
 }
 
 @keyframes fadeInDown {
-  from {
-    opacity: 0;
-    transform: translate3d(0, -100%, 0);
-  }
+    from {
+        opacity: 0;
+        transform: translate3d(0, -100%, 0);
+    }
 
-  to {
-    opacity: 1;
-    transform: none;
-  }
+    to {
+        opacity: 1;
+        transform: none;
+    }
 }
 
 .fadeInDown {
-  animation-name: fadeInDown;
+    animation-name: fadeInDown;
 }
 
 @keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translate3d(0, 100%, 0);
-  }
+    from {
+        opacity: 0;
+        transform: translate3d(0, 100%, 0);
+    }
 
-  to {
-    opacity: 1;
-    transform: none;
-  }
+    to {
+        opacity: 1;
+        transform: none;
+    }
 }
 
 .fadeInUp {
-  animation-name: fadeInUp;
+    animation-name: fadeInUp;
 }
 
 @keyframes append-animate {
-  from {
-    transform: scale(0);
-    opacity: 0;
-  }
+    from {
+        transform: scale(0);
+        opacity: 0;
+    }
 
-  to {
-    transform: scale(1);
-    opacity: 1;
-  }
+    to {
+        transform: scale(1);
+        opacity: 1;
+    }
 }
 
 /**
@@ -111,53 +111,53 @@
 // Fade
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity $animation-speed $animation-timing;
+    transition: opacity $animation-speed $animation-timing;
 }
 
 .fade-enter,
 .fade-enter-from,
 .fade-leave-to {
-  opacity: 0;
+    opacity: 0;
 }
 
 // Zoom In
 .zoom-in-enter-active,
 .zoom-in-leave-active {
-  transition: opacity $animation-speed $animation-timing;
+    transition: opacity $animation-speed $animation-timing;
 
-  .animation-content {
-    transition: transform $animation-speed $animation-timing;
-  }
+    .animation-content {
+        transition: transform $animation-speed $animation-timing;
+    }
 }
 
 .zoom-in-enter,
 .zoom-in-enter-from,
 .zoom-in-leave-active {
-  opacity: 0;
+    opacity: 0;
 
-  .animation-content {
-    transform: scale(0.95);
-  }
+    .animation-content {
+        transform: scale(0.95);
+    }
 }
 
 // Zoom Out
 .zoom-out-enter-active,
 .zoom-out-leave-active {
-  transition: opacity $animation-speed $animation-timing;
+    transition: opacity $animation-speed $animation-timing;
 
-  .animation-content {
-    transition: transform $animation-speed $animation-timing;
-  }
+    .animation-content {
+        transition: transform $animation-speed $animation-timing;
+    }
 }
 
 .zoom-out-enter,
 .zoom-out-enter-from,
 .zoom-out-leave-active {
-  opacity: 0;
+    opacity: 0;
 
-  .animation-content {
-    transform: scale(1.05);
-  }
+    .animation-content {
+        transform: scale(1.05);
+    }
 }
 
 // Slide
@@ -165,69 +165,69 @@
 .slide-next-leave-active,
 .slide-prev-enter-active,
 .slide-prev-leave-active {
-  transition: transform $animation-speed-fast
-    cubic-bezier(0.785, 0.135, 0.15, 0.86);
+    transition: transform $animation-speed-fast
+        cubic-bezier(0.785, 0.135, 0.15, 0.86);
 }
 
 .slide-prev-leave-to,
 .slide-next-enter,
 .slide-next-enter-from {
-  transform: translate3d(-100%, 0, 0);
-  position: absolute;
-  width: 100%;
+    transform: translate3d(-100%, 0, 0);
+    position: absolute;
+    width: 100%;
 }
 
 .slide-prev-enter,
 .slide-prev-enter-from,
 .slide-next-leave-to {
-  transform: translate3d(100%, 0, 0);
-  position: absolute;
-  width: 100%;
+    transform: translate3d(100%, 0, 0);
+    position: absolute;
+    width: 100%;
 }
 
 .slide-down-enter-active,
 .slide-down-leave-active,
 .slide-up-enter-active,
 .slide-up-leave-active {
-  transition: transform $animation-speed-fast
-    cubic-bezier(0.785, 0.135, 0.15, 0.86);
+    transition: transform $animation-speed-fast
+        cubic-bezier(0.785, 0.135, 0.15, 0.86);
 }
 
 .slide-down-enter,
 .slide-up-leave-to,
 .slide-down-enter-from {
-  transform: translate3d(0, -100%, 0);
-  position: absolute;
-  height: 100%;
+    transform: translate3d(0, -100%, 0);
+    position: absolute;
+    height: 100%;
 }
 
 .slide-up-enter,
 .slide-up-enter-from,
 .slide-down-leave-to {
-  transform: translate3d(0, 100%, 0);
-  position: absolute;
-  height: 100%;
+    transform: translate3d(0, 100%, 0);
+    position: absolute;
+    height: 100%;
 }
 
 .slide-enter-active {
-  transition: $animation-speed $animation-timing;
+    transition: $animation-speed $animation-timing;
 }
 
 .slide-leave-active {
-  transition: $animation-speed $animation-timing;
-  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
+    transition: $animation-speed $animation-timing;
+    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
 }
 
 .slide-leave,
 .slide-enter-to,
 .slide-leave-from {
-  max-height: 100px;
-  overflow: hidden;
+    max-height: 100px;
+    overflow: hidden;
 }
 
 .slide-enter,
 .slide-enter-from,
 .slide-leave-to {
-  overflow: hidden;
-  max-height: 0;
+    overflow: hidden;
+    max-height: 0;
 }

package/dist/scss/utils/_base.scss

@@ -1,31 +1,48 @@
 *,
 :after,
 :before {
-  box-sizing: inherit;
+    box-sizing: inherit;
 }
 
 html {
-  box-sizing: border-box;
+    box-sizing: border-box;
 }
 
 body {
-  margin: 0;
-  padding: 0;
+    margin: 0;
+    padding: 0;
 
-  font-family: var(--#{$prefix}base-font-family, $base-font-family);
-  font-size: var(--#{$prefix}base-font-size, $base-font-size);
-  font-weight: var(--#{$prefix}base-font-weight, $base-font-weight);
-  line-height: var(--#{$prefix}base-line-height, $base-line-height);
+    font-family: var(--#{$prefix}base-font-family, $base-font-family);
+    font-size: var(--#{$prefix}base-font-size, $base-font-size);
+    font-weight: var(--#{$prefix}base-font-weight, $base-font-weight);
+    line-height: var(--#{$prefix}base-line-height, $base-line-height);
+}
+
+img,
+video {
+    max-width: 100%;
+    height: auto;
+}
+
+input,
+button,
+select,
+optgroup,
+textarea {
+    margin: 0;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
 }
 
 .o-noscroll {
-  position: fixed;
-  width: 100%;
-  bottom: 0;
-  overflow-x: hidden;
-  overflow-y: scroll;
+    position: fixed;
+    width: 100%;
+    bottom: 0;
+    overflow-x: hidden;
+    overflow-y: scroll;
 }
 
 .o-clipped {
-  overflow: hidden;
+    overflow: hidden;
 }

package/dist/scss/utils/_helpers.scss

@@ -16,18 +16,18 @@
 ///   Replacement. Default is ''.
 /// @return {string} string with characters replaced.
 @function str-replace($string, $search, $replace: "") {
-  $index: string.index($string, $search);
+    $index: string.index($string, $search);
 
-  @return if(
-    $index,
-    string.slice($string, 1, $index - 1) + $replace +
-      str-replace(
-        string.slice($string, $index + string.length($search)),
-        $search,
-        $replace
-      ),
-    $string
-  );
+    @return if(
+        $index,
+        string.slice($string, 1, $index - 1) + $replace +
+            str-replace(
+                string.slice($string, $index + string.length($search)),
+                $search,
+                $replace
+            ),
+        $string
+    );
 }
 
 /// Encodes an inline svg. Original source code: http://codepen.io/jakob-e/pen/doMoML
@@ -36,78 +36,78 @@
 ///   Inline svg to encode
 /// @return {string} encoded svg.
 @function svg-encode($svg) {
-  // Chunk up string in order to avoid "stack level too deep" error
-  $encoded: "";
-  $slice: 2000;
-  $index: 0;
-  $loops: math.ceil(divide(string.length($svg), $slice));
+    // Chunk up string in order to avoid "stack level too deep" error
+    $encoded: "";
+    $slice: 2000;
+    $index: 0;
+    $loops: math.ceil(divide(string.length($svg), $slice));
 
-  @for $i from 1 through $loops {
-    $chunk: string.slice($svg, $index, $index + $slice - 1);
-    // Encode
-    $chunk: str-replace($chunk, '"', "'");
-    $chunk: str-replace($chunk, "%", "%25");
-    $chunk: str-replace($chunk, "#", "%23");
-    $chunk: str-replace($chunk, "{", "%7B");
-    $chunk: str-replace($chunk, "}", "%7D");
-    $chunk: str-replace($chunk, "<", "%3C");
-    $chunk: str-replace($chunk, ">", "%3E");
+    @for $i from 1 through $loops {
+        $chunk: string.slice($svg, $index, $index + $slice - 1);
+        // Encode
+        $chunk: str-replace($chunk, '"', "'");
+        $chunk: str-replace($chunk, "%", "%25");
+        $chunk: str-replace($chunk, "#", "%23");
+        $chunk: str-replace($chunk, "{", "%7B");
+        $chunk: str-replace($chunk, "}", "%7D");
+        $chunk: str-replace($chunk, "<", "%3C");
+        $chunk: str-replace($chunk, ">", "%3E");
 
-    $encoded: #{$encoded}#{$chunk};
-    $index: $index + $slice;
-  }
+        $encoded: #{$encoded}#{$chunk};
+        $index: $index + $slice;
+    }
 
-  @return "data:image/svg+xml,#{$encoded}";
+    @return "data:image/svg+xml,#{$encoded}";
 }
 
 @mixin unselectable {
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 }
 @mixin side-flex-gap($gap) {
-  //flex-wrap: wrap;
-  margin-left: -$gap;
-  margin-right: -$gap;
+    //flex-wrap: wrap;
+    margin-left: -$gap;
+    margin-right: -$gap;
 
-  & > * {
-    margin-left: $gap;
-    margin-right: $gap;
-  }
+    & > * {
+        margin-left: $gap;
+        margin-right: $gap;
+    }
 }
 
 // Custom divide function by @mdo from https://github.com/twbs/bootstrap/pull/34245
 // Replaces old slash division deprecated in Dart Sass
 @function divide($dividend, $divisor, $precision: 10) {
-  $sign: if($dividend > 0 and $divisor > 0, 1, -1);
-  $dividend: math.abs($dividend);
-  $divisor: math.abs($divisor);
-  $quotient: 0;
-  $remainder: $dividend;
-  @if $dividend == 0 {
-    @return 0;
-  }
-  @if $divisor == 0 {
-    @error "Cannot divide by 0";
-  }
-  @if $divisor == 1 {
-    @return $dividend;
-  }
+    $sign: if($dividend > 0 and $divisor > 0, 1, -1);
+    $dividend: math.abs($dividend);
+    $divisor: math.abs($divisor);
+    $quotient: 0;
+    $remainder: $dividend;
+    @if $dividend == 0 {
+        @return 0;
+    }
+    @if $divisor == 0 {
+        @error "Cannot divide by 0";
+    }
+    @if $divisor == 1 {
+        @return $dividend;
+    }
 
-  @while $remainder >= $divisor {
-    $quotient: $quotient + 1;
-    $remainder: $remainder - $divisor;
-  }
-  @if $remainder > 0 and $precision > 0 {
-    $remainder: divide($remainder * 10, $divisor, $precision - 1) * 0.1;
-  }
+    @while $remainder >= $divisor {
+        $quotient: $quotient + 1;
+        $remainder: $remainder - $divisor;
+    }
+    @if $remainder > 0 and $precision > 0 {
+        $remainder: divide($remainder * 10, $divisor, $precision - 1) * 0.1;
+    }
 
-  @return ($quotient + $remainder) * $sign;
+    @return ($quotient + $remainder) * $sign;
 }
 
 // create a focus color based on a given color
 @function createFocus($color) {
-  @return color.adjust($color, $alpha: -0.75);
+    @return color.adjust($color, $alpha: -0.75);
 }