@oruga-ui/theme-oruga 0.5.1 → 0.7.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,11 +6,11 @@
 @import "utils/animations";
 @import "utils/helpers";
 @import "utils/root";
-
 @import "utils/base";
 
 // import Oruga components
 @import "components/autocomplete";
+@import "components/breadcrumb";
 @import "components/button";
 @import "components/carousel";
 @import "components/checkbox";
@@ -35,6 +35,7 @@
 @import "components/switch";
 @import "components/table";
 @import "components/tabs";
+@import "components/tag";
 @import "components/taginput";
 @import "components/timepicker";
 @import "components/tooltip";

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);
 }
 
-.o-noscroll {
-  position: fixed;
-  width: 100%;
-  bottom: 0;
-  overflow-x: hidden;
-  overflow-y: scroll;
+img,
+video {
+    max-width: 100%;
+    height: auto;
 }
 
-.o-clipped {
-  overflow: hidden;
+input,
+button,
+select,
+optgroup,
+textarea {
+    margin: 0;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+}
+
+.o-scroll-keep {
+    position: fixed;
+    width: 100%;
+    bottom: 0;
+    overflow-x: hidden;
+    overflow-y: scroll;
+}
+
+.o-scroll-clip {
+    overflow: hidden;
 }