@oruga-ui/theme-oruga 0.0.1 → 0.2.1

package/src/assets/scss/components/_input.scss

@@ -19,33 +19,16 @@ $input-padding: $control-padding-vertical $control-padding-horizontal !default;
 $input-textarea-max-height: 600px !default;
 $input-textarea-min-height: 120px !default;
 $input-textarea-padding: 0.625em !default;
-// @deprecated
-$input-width: 100% !default;
-// @deprecated
-$input-max-width: 100% !default;
 /* @docs */
 
-.o-ctrl-input {
-  display: block;
-  position: relative;
-
-  &--expanded {
-    width: 100%;
-    flex-grow: 1;
-    flex-shrink: 1;
-  }
-}
-
 .o-input {
   -moz-appearance: none;
   -webkit-appearance: none;
   display: inline-flex;
   position: relative;
   vertical-align: top;
-  width: $input-width;
 
   @include avariable("box-shadow", "input-box-shadow", $input-box-shadow);
-  @include avariable("max-width", "input-max-width", $input-max-width);
   @include avariable(
     "background-color",
     "input-background-color",
@@ -66,31 +49,18 @@ $input-max-width: 100% !default;
   @include avariable("padding", "input-padding", $input-padding);
   @include avariable("margin", "input-margin", $input-margin);
 
-  &-iconspace-left {
-    @include avariable("padding-left", "input-height", $input-height);
-  }
+  &__wrapper {
+    display: inline-block;
+    position: relative;
 
-  &-iconspace-right {
-    @include avariable("padding-right", "input-height", $input-height);
-  }
-
-  &--rounded {
-    @include avariable(
-      "border-radius",
-      "input-rounded-border-radius",
-      $input-rounded-border-radius
-    );
-  }
+    &--expanded {
+      width: 100%;
+      flex-grow: 1;
+      flex-shrink: 1;
 
-  @each $name, $value in $sizes {
-    &--#{$name} {
-      @include avariable("font-size", ("input-font-size-" + #{$name}), $value);
-    }
-  }
-  @each $name, $pair in $colors {
-    $color: list.nth($pair, 1);
-    &--#{$name} {
-      @include avariable("border-color", ("variant-" + #{$name}), $color);
+      .o-input {
+        width: 100%;
+      }
     }
   }
 
@@ -150,4 +120,32 @@ $input-max-width: 100% !default;
   &__icon-left {
     left: 0;
   }
+
+  &--iconspace-left {
+    @include avariable("padding-left", "input-height", $input-height);
+  }
+
+  &--iconspace-right {
+    @include avariable("padding-right", "input-height", $input-height);
+  }
+
+  &--rounded {
+    @include avariable(
+      "border-radius",
+      "input-rounded-border-radius",
+      $input-rounded-border-radius
+    );
+  }
+
+  @each $name, $value in $sizes {
+    &--#{$name} {
+      @include avariable("font-size", ("input-font-size-" + #{$name}), $value);
+    }
+  }
+  @each $name, $pair in $colors {
+    $color: list.nth($pair, 1);
+    &--#{$name} {
+      @include avariable("border-color", ("variant-" + #{$name}), $color);
+    }
+  }
 }

package/src/assets/scss/components/_menu.scss

@@ -23,21 +23,21 @@ $menu-label-spacing: 1em !default;
       @include avariable("font-size", ("menu-font-size-" + #{$name}), $value);
     }
   }
-}
-
-.o-menu-list {
-  @include avariable(
-    "line-height",
-    ("menu-list-line-height"),
-    $menu-list-line-height
-  );
 
-  .o-menu-list,
-  .o-menu-item__wrapper {
+  &__list,
+  &__item__wrapper {
     list-style: none;
   }
 
-  .o-menu-item__submenu {
+  &__list {
+    @include avariable(
+      "line-height",
+      ("menu-list-line-height"),
+      $menu-list-line-height
+    );
+  }
+
+  &__item__submenu {
     @include avariable(
       "border-left",
       ("menu-list-border-left"),
@@ -54,71 +54,71 @@ $menu-label-spacing: 1em !default;
       $menu-nested-list-margin
     );
   }
-}
-
-.o-menu-label {
-  @include avariable("color", ("menu-label-color"), $menu-label-color);
-  @include avariable(
-    "font-size",
-    ("menu-label-font-size"),
-    $menu-label-font-size
-  );
-  text-transform: uppercase;
 
-  &:not(:first-child) {
+  &__label {
+    @include avariable("color", ("menu-label-color"), $menu-label-color);
     @include avariable(
-      "margin-top",
-      ("menu-label-spacing"),
-      $menu-label-spacing
+      "font-size",
+      ("menu-label-font-size"),
+      $menu-label-font-size
     );
-  }
+    text-transform: uppercase;
 
-  &:not(:last-child) {
-    @include avariable(
-      "margin-bottom",
-      ("menu-label-spacing"),
-      $menu-label-spacing
-    );
+    &:not(:first-child) {
+      @include avariable(
+        "margin-top",
+        ("menu-label-spacing"),
+        $menu-label-spacing
+      );
+    }
+
+    &:not(:last-child) {
+      @include avariable(
+        "margin-bottom",
+        ("menu-label-spacing"),
+        $menu-label-spacing
+      );
+    }
   }
-}
 
-.o-menu-item {
-  @include avariable("color", ("menu-item-color"), $menu-item-color);
-  @include avariable("padding", ("menu-item-padding"), $menu-item-padding);
-  display: block;
-  list-style: none;
+  &__item {
+    @include avariable("color", ("menu-item-color"), $menu-item-color);
+    @include avariable("padding", ("menu-item-padding"), $menu-item-padding);
+    display: block;
+    list-style: none;
 
-  &:hover:not(&--active):not(&--disabled) {
-    @include avariable(
-      "color",
-      ("menu-item-hover-color"),
-      $menu-item-hover-color
-    );
-    @include avariable(
-      "background-color",
-      ("menu-item-hover-background-color"),
-      $menu-item-hover-background-color
-    );
-  }
+    &:hover:not(&--active):not(&--disabled) {
+      @include avariable(
+        "color",
+        ("menu-item-hover-color"),
+        $menu-item-hover-color
+      );
+      @include avariable(
+        "background-color",
+        ("menu-item-hover-background-color"),
+        $menu-item-hover-background-color
+      );
+    }
 
-  &--active {
-    @include avariable(
-      "color",
-      ("menu-item-active-color"),
-      $menu-item-active-color
-    );
-    @include avariable(
-      "background-color",
-      ("menu-item-active-background-color"),
-      $menu-item-active-background-color
-    );
-  }
+    &--active {
+      @include avariable(
+        "color",
+        ("menu-item-active-color"),
+        $menu-item-active-color
+      );
+      @include avariable(
+        "background-color",
+        ("menu-item-active-background-color"),
+        $menu-item-active-background-color
+      );
+    }
 
-  &--disabled {
-    @include avariable(
-      "color",
-      ("menu-item-disabled-color"),
-      $menu-item-disabled-color
-    );
+    &--disabled {
+      @include avariable(
+        "color",
+        ("menu-item-disabled-color"),
+        $menu-item-disabled-color
+      );
+    }
   }
 }

package/src/assets/scss/components/_pagination.scss

@@ -163,6 +163,28 @@ $pagination-rounded-border-radius: $base-rounded-border-radius !default;
     );
   }
 
+  &__next {
+    order: 3;
+  }
+
+  &__previous {
+    order: 2;
+  }
+
+  &__list {
+    align-items: center;
+    display: flex;
+    text-align: center;
+    list-style: none;
+    flex-wrap: wrap;
+    margin: 0;
+    padding: 0;
+    flex-grow: 1;
+    flex-shrink: 1;
+    justify-content: flex-start;
+    order: 1;
+  }
+
   &--simple {
     justify-content: normal;
   }
@@ -201,28 +223,6 @@ $pagination-rounded-border-radius: $base-rounded-border-radius !default;
     }
   }
 
-  &__next {
-    order: 3;
-  }
-
-  &__previous {
-    order: 2;
-  }
-
-  &__list {
-    align-items: center;
-    display: flex;
-    text-align: center;
-    list-style: none;
-    flex-wrap: wrap;
-    margin: 0;
-    padding: 0;
-    flex-grow: 1;
-    flex-shrink: 1;
-    justify-content: flex-start;
-    order: 1;
-  }
-
   &--mobile {
     justify-content: flex-start;
     flex-wrap: wrap;

package/src/assets/scss/components/_radio.scss

@@ -11,8 +11,6 @@ $radio-size: 1rem !default;
 $radio-line-height: 1.25 !default;
 /* @docs */
 
-$HALF_MARGIN_EXPRESSION: "calc($margin * 0.5)";
-
 @function svg_radio_fill($color, $background-color: "transparent") {
   $start: '<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">';
   $content: '<g transform="matrix(4.38544,0,0,4.38544,-94.4336,-58.9876)"><path d="M32.935,13.679C39.102,13.679 44.108,18.685 44.108,24.852C44.108,31.019 39.102,36.025 32.935,36.025C26.768,36.025 21.761,31.019 21.761,24.852C21.761,18.685 26.768,13.679 32.935,13.679ZM32.798,17.05C37.105,17.05 40.601,20.546 40.601,24.852C40.601,29.158 37.105,32.655 32.798,32.655C28.492,32.655 24.996,29.158 24.996,24.852C24.996,20.546 28.492,17.05 32.798,17.05Z" style="fill:#{$color};"/><circle cx="32.84" cy="24.8" r="7.9" style="fill:#{$background-color};"/></g>';
@@ -41,7 +39,7 @@ $HALF_MARGIN_EXPRESSION: "calc($margin * 0.5)";
     $radio-margin-sibiling
   );
 
-  &__check {
+  &__input {
     @include avariable("width", "radio-size", $radio-size);
     @include avariable("height", "radio-size", $radio-size);
     margin: 0;
@@ -104,17 +102,17 @@ $HALF_MARGIN_EXPRESSION: "calc($margin * 0.5)";
     $color: list.nth($pair, 1);
     $color-invert: list.nth($pair, 2);
     &--#{$name} {
-      .o-radio__check {
+      .o-radio__input {
         background-image: url(svg_radio_empty(
           variable(("variant-" + #{$name}), $color)
         ));
-      }
 
-      .o-radio__check--checked {
-        background-image: url(svg_radio_fill(
-          variable(("variant-" + #{$name}), $color),
-          variable(("variant-invert-" + #{$name}), $color-invert)
-        ));
+        &--checked {
+          background-image: url(svg_radio_fill(
+            variable(("variant-" + #{$name}), $color),
+            variable(("variant-invert-" + #{$name}), $color-invert)
+          ));
+        }
       }
     }
   }

package/src/assets/scss/components/_sidebar.scss

@@ -4,25 +4,38 @@
 $sidebar-overlay: hsla(0, 0%, 4%, 0.86) !default;
 $sidebar-box-shadow: 5px 0px 13px 3px rgba($black, 0.1) !default;
 $sidebar-content-background-color: $grey-lighter !default;
-$sidebar-mobile-width: 80px !default;
+$sidebar-border-radius: $base-border-radius !default;
+$sidebar-border-width: 1px !default;
+$sidebar-border-color: rgba(0, 0, 0, 0.175) !default;
+$sidebar-reduced-width: 80px !default;
 $sidebar-width: 260px !default;
-$sidebar-zindex: 38 !default;
+$sidebar-zindex: 100 !default;
 /* @docs */
 
 .o-side {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  display: none;
+
+  @include avariable("z-index", "sidebar-zindex", $sidebar-zindex);
+
   &__content {
+    position: absolute;
+
     @include avariable(
       "background-color",
       "sidebar-content-background-color",
       $sidebar-content-background-color
     );
-    @include avariable("box-shadow", "sidebar-box-shadow", $sidebar-box-shadow);
-    @include avariable("width", "sidebar-width", $sidebar-width);
-    @include evariable(
-      "z-index",
-      "calc($z-index + 1)",
-      eparam("$z-index", variable("sidebar-zindex", $sidebar-zindex))
+    @include avariable(
+      "border-radius",
+      "sidebar-border-radius",
+      $sidebar-border-radius
     );
+    @include avariable("box-shadow", "sidebar-box-shadow", $sidebar-box-shadow);
 
     @each $name, $pair in $colors {
       $color: list.nth($pair, 1);
@@ -31,56 +44,134 @@ $sidebar-zindex: 38 !default;
       }
     }
 
-    &--fixed {
-      position: fixed;
-      left: 0;
-      top: 0;
+    // position
+    &--right,
+    &--left {
+      @include avariable(
+        "transition-duration",
+        "transition-duration",
+        $speed-slow
+      );
+      @include avariable(
+        "transition-timing-function",
+        "transition-timing",
+        $easing
+      );
+      @include avariable("width", "sidebar-width", $sidebar-width);
+      transition: width;
     }
 
-    &--absolute {
-      position: absolute;
-      left: 0;
-      top: 0;
+    &--top,
+    &--bottom {
+      @include avariable(
+        "transition-duration",
+        "transition-duration",
+        $speed-slow
+      );
+      @include avariable(
+        "transition-timing-function",
+        "transition-timing",
+        $easing
+      );
+      @include avariable("height", "sidebar-width", $sidebar-width);
+      transition: height;
     }
 
     &--right {
       left: auto;
       right: 0;
+
+      @include evariable(
+        "border-left",
+        "$width solid $color",
+        eparam(
+          "$width",
+          variable("sidebar-border-width", $sidebar-border-width)
+        ),
+        eparam(
+          "$color",
+          variable("sidebar-border-color", $sidebar-border-color)
+        )
+      );
     }
 
-    &--mini {
-      @include avariable(
-        "width",
-        "sidebar-mobile-width",
-        $sidebar-mobile-width
+    &--left {
+      left: 0;
+      right: auto;
+
+      @include evariable(
+        "border-right",
+        "$width solid $color",
+        eparam(
+          "$width",
+          variable("sidebar-border-width", $sidebar-border-width)
+        ),
+        eparam(
+          "$color",
+          variable("sidebar-border-color", $sidebar-border-color)
+        )
       );
     }
 
-    &--mini-expand {
-      &:hover {
-        transition: width;
-
-        @include avariable(
-          "transition-duration",
-          "transition-duration",
-          $speed-slow
-        );
-        @include avariable(
-          "transition-timing-function",
-          "transition-timing",
-          $easing
-        );
-        @include avariable("width", "sidebar-width", $sidebar-width);
-      }
+    &--top {
+      top: 0;
+      bottom: auto;
+
+      @include evariable(
+        "border-bottom",
+        "$width solid $color",
+        eparam(
+          "$width",
+          variable("sidebar-border-width", $sidebar-border-width)
+        ),
+        eparam(
+          "$color",
+          variable("sidebar-border-color", $sidebar-border-color)
+        )
+      );
     }
 
-    &--static {
-      position: static;
+    &--bottom {
+      top: auto;
+      bottom: 0;
+
+      @include evariable(
+        "border-top",
+        "$width solid $color",
+        eparam(
+          "$width",
+          variable("sidebar-border-width", $sidebar-border-width)
+        ),
+        eparam(
+          "$color",
+          variable("sidebar-border-color", $sidebar-border-color)
+        )
+      );
     }
 
-    &--absolute,
-    &--static {
-      transition: width $speed-slow $easing;
+    &--reduced {
+      @include avariable(
+        "width",
+        "sidebar-reduced-width",
+        $sidebar-reduced-width
+      );
+
+      &-expand {
+        &:hover {
+          @include avariable(
+            "transition-duration",
+            "transition-duration",
+            $speed-slow
+          );
+          @include avariable(
+            "transition-timing-function",
+            "transition-timing",
+            $easing
+          );
+          @include avariable("width", "sidebar-width", $sidebar-width);
+          transition: width;
+        }
+      }
     }
 
     &--fullwidth {
@@ -91,22 +182,32 @@ $sidebar-zindex: 38 !default;
     &--fullheight {
       height: 100%;
       max-height: 100%;
-      overflow: hidden;
-      overflow-y: auto;
-      display: flex;
-      flex-direction: column;
-      align-content: stretch;
     }
   }
 
   &__overlay {
+    position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     top: 0;
-    position: fixed;
 
     @include avariable("background", "sidebar-overlay", $sidebar-overlay);
-    @include avariable("z-index", "sidebar-zindex", $sidebar-zindex);
+  }
+
+  &--active {
+    display: block;
+  }
+
+  &--inline {
+    position: relative;
+
+    .o-side__overlay {
+      position: absolute;
+    }
+
+    .o-side__content {
+      position: relative;
+    }
   }
 }

package/src/assets/scss/components/_switch.scss

@@ -5,8 +5,10 @@ $switch-active-background-color: $primary !default;
 $switch-action-background: #f5f5f5 !default;
 $switch-background: $grey-light !default;
 $switch-border-radius: $base-border-radius !default;
-$switch-box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05),
-  0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05) !default;
+$switch-box-shadow:
+  0 3px 1px 0 rgba(0, 0, 0, 0.05),
+  0 2px 2px 0 rgba(0, 0, 0, 0.1),
+  0 3px 3px 0 rgba(0, 0, 0, 0.05) !default;
 $switch-disabled-opacity: $base-disabled-opacity !default;
 $switch-margin-label: 0.5em !default;
 $switch-padding: 0.2em !default;