@oruga-ui/theme-oruga 0.5.1 → 0.6.0

package/dist/scss/components/_menu.scss

@@ -1,5 +1,6 @@
 /* @docs */
 $menu-item-color: var(--#{$prefix}grey-dark) !default;
+$menu-item-background-color: transparent !default;
 $menu-item-hover-color: var(--#{$prefix}black) !default;
 $menu-item-hover-background-color: var(--#{$prefix}grey-light) !default;
 $menu-item-active-color: var(--#{$prefix}primary-invert) !default;
@@ -9,7 +10,7 @@ $menu-list-border-left: 1px solid var(--#{$prefix}primary) !default;
 $menu-list-border-radius: var(--#{$prefix}base-border-radius) !default;
 $menu-list-line-height: 1.25em !default;
 $menu-item-padding: 0.5em 0.75em !default;
-$menu-nested-list-margin: 0.75em !default;
+$menu-nested-list-margin: 0.75em 1.25em !default;
 $menu-nested-list-padding-left: 0.75em !default;
 $menu-label-color: $grey !default;
 $menu-label-font-size: 0.75em !default;
@@ -18,80 +19,116 @@ $menu-icon-spacer: 0.5rem !default;
 /* @docs */
 
 .o-menu {
-  @each $name, $value in $sizes {
-    &--#{$name} {
-      font-size: var(--#{$prefix}menu-font-size-#{$name}, $value);
+    // size variants
+    @each $name, $value in $sizes {
+        &--#{$name} {
+            font-size: var(--#{$prefix}menu-font-size-#{$name}, $value);
+        }
     }
-  }
 
-  &__list,
-  &__item {
-    list-style: none;
-  }
+    &__list,
+    &__item {
+        list-style: none;
+    }
 
-  &__list {
-    line-height: var(--#{$prefix}menu-list-line-height, $menu-list-line-height);
-  }
+    &__list {
+        padding: unset;
+        line-height: var(
+            --#{$prefix}menu-list-line-height,
+            $menu-list-line-height
+        );
+        padding-left: var(
+            --#{$prefix}menu-nested-list-padding-left,
+            $menu-nested-list-padding-left
+        );
+    }
 
-  &__item__submenu {
-    border-left: var(--#{$prefix}menu-list-border-left, $menu-list-border-left);
-    padding-left: var(
-      --#{$prefix}menu-nested-list-padding-left,
-      $menu-nested-list-padding-left
-    );
-    margin: var(--#{$prefix}menu-nested-list-margin, $menu-nested-list-margin);
-  }
+    &__item__submenu {
+        border-left: var(
+            --#{$prefix}menu-list-border-left,
+            $menu-list-border-left
+        );
+        padding-left: var(
+            --#{$prefix}menu-nested-list-padding-left,
+            $menu-nested-list-padding-left
+        );
+        margin: var(
+            --#{$prefix}menu-nested-list-margin,
+            $menu-nested-list-margin
+        );
+    }
 
-  &__label {
-    text-transform: uppercase;
-    color: var(--#{$prefix}menu-label-color, $menu-label-color);
-    font-size: var(--#{$prefix}menu-label-font-size, $menu-label-font-size);
+    &__label {
+        text-transform: uppercase;
+        color: var(--#{$prefix}menu-label-color, $menu-label-color);
+        font-size: var(--#{$prefix}menu-label-font-size, $menu-label-font-size);
 
-    &:not(:first-child) {
-      margin-top: var(--#{$prefix}menu-label-spacing, $menu-label-spacing);
-    }
+        &:not(:first-child) {
+            margin-top: var(
+                --#{$prefix}menu-label-spacing,
+                $menu-label-spacing
+            );
+        }
 
-    &:not(:last-child) {
-      margin-bottom: var(--#{$prefix}menu-label-spacing, $menu-label-spacing);
+        &:not(:last-child) {
+            margin-bottom: var(
+                --#{$prefix}menu-label-spacing,
+                $menu-label-spacing
+            );
+        }
     }
-  }
 
-  &__item__button {
-    display: block;
-    list-style: none;
-    color: var(--#{$prefix}menu-item-color, $menu-item-color);
-    padding: var(--#{$prefix}menu-item-padding, $menu-item-padding);
-    font-size: var(--#{$prefix}menu-item-size, $base-font-size);
-    border-radius: var(
-      --#{$prefix}menu-list-border-radius,
-      $menu-list-border-radius
-    );
+    &__item__button {
+        -moz-appearance: none;
+        -webkit-appearance: none;
+        display: block;
+        list-style: none;
+        cursor: pointer;
+        border: transparent;
+        background-color: var(
+            --#{$prefix}menu-item-background-color,
+            $menu-item-background-color
+        );
+        color: var(--#{$prefix}menu-item-color, $menu-item-color);
+        padding: var(--#{$prefix}menu-item-padding, $menu-item-padding);
+        font-size: var(--#{$prefix}menu-item-size, $base-font-size);
+        border-radius: var(
+            --#{$prefix}menu-list-border-radius,
+            $menu-list-border-radius
+        );
 
-    &:hover:not(&--active):not(&--disabled) {
-      color: var(--#{$prefix}menu-item-hover-color, $menu-item-hover-color);
-      background-color: var(
-        --#{$prefix}menu-item-hover-background-color,
-        $menu-item-hover-background-color
-      );
-    }
+        &:hover:not(&--active):not(&--disabled) {
+            color: var(
+                --#{$prefix}menu-item-hover-color,
+                $menu-item-hover-color
+            );
+            background-color: var(
+                --#{$prefix}menu-item-hover-background-color,
+                $menu-item-hover-background-color
+            );
+        }
 
-    &--icon .o-icon {
-      margin-right: var(--#{$prefix}menu-icon-spacer, $menu-icon-spacer);
-    }
+        &--icon .o-icon {
+            margin-right: var(--#{$prefix}menu-icon-spacer, $menu-icon-spacer);
+        }
 
-    &--active {
-      color: var(--#{$prefix}menu-item-active-color, $menu-item-active-color);
-      background-color: var(
-        --#{$prefix}menu-item-active-background-color,
-        $menu-item-active-background-color
-      );
-    }
+        &--active {
+            color: var(
+                --#{$prefix}menu-item-active-color,
+                $menu-item-active-color
+            );
+            background-color: var(
+                --#{$prefix}menu-item-active-background-color,
+                $menu-item-active-background-color
+            );
+        }
 
-    &--disabled {
-      color: var(
-        --#{$prefix}menu-item-disabled-color,
-        $menu-item-disabled-color
-      );
+        &--disabled {
+            cursor: inherit;
+            color: var(
+                --#{$prefix}menu-item-disabled-color,
+                $menu-item-disabled-color
+            );
+        }
     }
-  }
 }

package/dist/scss/components/_modal.scss

@@ -3,7 +3,7 @@ $modal-content-background-color: var(--#{$prefix}white) !default;
 $modal-content-border-radius: var(--#{$prefix}base-border-radius) !default;
 $modal-overlay-background-color: hsla(0, 0%, 4%, 0.86) !default;
 $modal-close-border-radius: var(
-  --#{$prefix}base-border-radius-rounded
+    --#{$prefix}base-border-radius-rounded
 ) !default;
 $modal-close-right: 20px !default;
 $modal-close-top: 20px !default;
@@ -16,79 +16,79 @@ $modal-zindex: 40 !default;
 /* @docs */
 
 .o-modal {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  overflow: hidden;
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  top: 0;
-  z-index: var(--#{$prefix}modal-zindex, $modal-zindex);
-
-  &__overlay {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    position: fixed;
     bottom: 0;
     left: 0;
-    position: absolute;
     right: 0;
     top: 0;
-    background-color: var(
-      --#{$prefix}modal-overlay-background-color,
-      $modal-overlay-background-color
-    );
-  }
+    z-index: var(--#{$prefix}modal-zindex, $modal-zindex);
+
+    &__overlay {
+        bottom: 0;
+        left: 0;
+        position: absolute;
+        right: 0;
+        top: 0;
+        background-color: var(
+            --#{$prefix}modal-overlay-background-color,
+            $modal-overlay-background-color
+        );
+    }
 
-  &__content {
-    overflow: auto;
-    position: relative;
-    margin: var(--#{$prefix}modal-content-margin, $modal-content-margin);
-    max-height: var(
-      --#{$prefix}modal-content-max-height,
-      $modal-content-max-height
-    );
-    background-color: var(
-      --#{$prefix}modal-content-background-color,
-      $modal-content-background-color
-    );
-    border-radius: var(
-      --#{$prefix}modal-content-border-radius,
-      $modal-content-border-radius
-    );
+    &__content {
+        overflow: auto;
+        position: relative;
+        margin: var(--#{$prefix}modal-content-margin, $modal-content-margin);
+        max-height: var(
+            --#{$prefix}modal-content-max-height,
+            $modal-content-max-height
+        );
+        background-color: var(
+            --#{$prefix}modal-content-background-color,
+            $modal-content-background-color
+        );
+        border-radius: var(
+            --#{$prefix}modal-content-border-radius,
+            $modal-content-border-radius
+        );
 
-    &--full-screen {
-      width: 100%;
-      height: 100%;
-      max-height: 100vh;
-      margin: 0;
-      background-color: var(
-        --#{$prefix}modal-content-fullscreen-background-color,
-        $modal-content-fullscreen-background-color
-      );
+        &--full-screen {
+            width: 100%;
+            height: 100%;
+            max-height: 100vh;
+            margin: 0;
+            background-color: var(
+                --#{$prefix}modal-content-fullscreen-background-color,
+                $modal-content-fullscreen-background-color
+            );
+        }
     }
-  }
 
-  &__close {
-    background: none;
-    position: fixed;
-    border: none;
-    display: inline-block;
-    vertical-align: top;
-    border-radius: var(
-      --#{$prefix}modal-close-border-radius,
-      $modal-close-border-radius
-    );
-    right: var(--#{$prefix}modal-close-right, $modal-close-right);
-    top: var(--#{$prefix}modal-close-top, $modal-close-top);
-    height: var(--#{$prefix}modal-close-size, $modal-close-size);
-    width: var(--#{$prefix}modal-close-size, $modal-close-size);
-    color: var(--#{$prefix}modal-close-color, $modal-close-color);
-  }
+    &__close {
+        background: none;
+        position: fixed;
+        border: none;
+        display: inline-block;
+        vertical-align: top;
+        border-radius: var(
+            --#{$prefix}modal-close-border-radius,
+            $modal-close-border-radius
+        );
+        right: var(--#{$prefix}modal-close-right, $modal-close-right);
+        top: var(--#{$prefix}modal-close-top, $modal-close-top);
+        height: var(--#{$prefix}modal-close-size, $modal-close-size);
+        width: var(--#{$prefix}modal-close-size, $modal-close-size);
+        color: var(--#{$prefix}modal-close-color, $modal-close-color);
+    }
 
-  &--mobile {
-    .o-modal__content {
-      width: 100%;
+    &--mobile {
+        .o-modal__content {
+            width: 100%;
+        }
     }
-  }
 }

package/dist/scss/components/_notification.scss

@@ -8,7 +8,7 @@ $notification-margin-bottom: 1.5rem !default;
 $notification-animantion: append-animate 0.3s linear !default;
 $notification-color: var(--#{$prefix}white) !default;
 $notification-close-border-radius: var(
-  --#{$prefix}base-border-radius-rounded
+    --#{$prefix}base-border-radius-rounded
 ) !default;
 $notification-close-right: 0.5rem !default;
 $notification-close-top: 0.5rem !default;
@@ -21,155 +21,167 @@ $notification-notices-zindex: 1000 !default;
 /* @docs */
 
 .o-notification {
-  position: relative;
-  transform-origin: 50% 0;
-  // Modifiers
-  background-color: var(
-    --#{$prefix}notification-background-color,
-    $notification-background-color
-  );
-  color: var(--#{$prefix}notification-color, $notification-color);
-  border-radius: var(
-    --#{$prefix}notification-border-radius,
-    $notification-border-radius
-  );
-  padding: var(--#{$prefix}notification-padding, $notification-padding);
-  margin-bottom: var(
-    --#{$prefix}notification-margin-bottom,
-    $notification-margin-bottom
-  );
-
-  &__content {
-    flex-basis: auto;
-    flex-grow: 1;
-    flex-shrink: 1;
-    text-align: inherit;
-    overflow-y: hidden;
-    overflow-x: auto;
-  }
-
-  &__wrapper {
-    align-items: flex-start;
-    display: flex;
-    text-align: inherit;
-    padding-top: 0;
-    border: 0;
-  }
-
-  &__icon {
-    flex-basis: auto;
-    flex-grow: 0;
-    flex-shrink: 0;
-    margin-right: var(
-      --#{$prefix}notification-icon-margin-right,
-      $notification-icon-margin-right
-    );
-  }
-
-  &__close {
-    position: absolute;
-    border: none;
-    cursor: pointer;
-    pointer-events: auto;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-grow: 0;
-    flex-shrink: 0;
-    vertical-align: top;
+    position: relative;
+    transform-origin: 50% 0;
+    // Modifiers
     background-color: var(
-      --#{$prefix}notification-close-background-color,
-      $notification-close-background-color
+        --#{$prefix}notification-background-color,
+        $notification-background-color
     );
+    color: var(--#{$prefix}notification-color, $notification-color);
     border-radius: var(
-      --#{$prefix}notification-close-border-radius,
-      $notification-close-border-radius
+        --#{$prefix}notification-border-radius,
+        $notification-border-radius
     );
-    right: var(--#{$prefix}notification-close-right, $notification-close-right);
-    top: var(--#{$prefix}notification-close-top, $notification-close-top);
-    height: var(--#{$prefix}notification-close-size, $notification-close-size);
-    width: var(--#{$prefix}notification-close-size, $notification-close-size);
-    color: var(--#{$prefix}notification-close-color, $notification-close-color);
-  }
-
-  @each $name, $pair in $colors {
-    $color: list.nth($pair, 1);
-    $color-invert: list.nth($pair, 2);
-    &--#{$name} {
-      border-color: transparent;
-      background-color: var(--#{$prefix}variant-#{$name}, $color);
-      color: var(--#{$prefix}variant-invert-#{$name}, $color-invert);
-
-      &:hover {
-        // background-color: darken($color, 2.5%)
-        // IE 11 needs polyfill
-        filter: brightness(97.5%);
-      }
-    }
-  }
-}
-
-.o-notices {
-  position: fixed;
-  display: flex;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  overflow: hidden;
-  pointer-events: none;
-  padding: var(
-    --#{$prefix}notification-notices-padding,
-    $notification-notices-padding
-  );
-  z-index: var(
-    --#{$prefix}notification-notices-zindex,
-    $notification-notices-zindex
-  );
-
-  .o-notification {
-    pointer-events: stroke;
-    max-width: 600px;
-    animation: var(
-      --#{$prefix}notification-animantion,
-      $notification-animantion
+    padding: var(--#{$prefix}notification-padding, $notification-padding);
+    margin-bottom: var(
+        --#{$prefix}notification-margin-bottom,
+        $notification-margin-bottom
     );
 
-    &--top,
-    &--bottom {
-      align-self: center;
+    &__content {
+        flex-basis: auto;
+        flex-grow: 1;
+        flex-shrink: 1;
+        text-align: inherit;
+        overflow-y: hidden;
+        overflow-x: auto;
     }
 
-    &--top-right,
-    &--bottom-right {
-      align-self: flex-end;
+    &__wrapper {
+        align-items: center;
+        display: flex;
+        text-align: inherit;
+        padding-top: 0;
+        border: 0;
     }
 
-    &--top-left,
-    &--bottom-left {
-      align-self: flex-start;
+    &__icon {
+        flex-basis: auto;
+        flex-grow: 0;
+        flex-shrink: 0;
+        margin-right: var(
+            --#{$prefix}notification-icon-margin-right,
+            $notification-icon-margin-right
+        );
     }
-  }
 
-  &--top {
-    flex-direction: column;
-  }
+    &__close {
+        position: absolute;
+        border: none;
+        cursor: pointer;
+        pointer-events: auto;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-grow: 0;
+        flex-shrink: 0;
+        vertical-align: top;
+        background-color: var(
+            --#{$prefix}notification-close-background-color,
+            $notification-close-background-color
+        );
+        border-radius: var(
+            --#{$prefix}notification-close-border-radius,
+            $notification-close-border-radius
+        );
+        right: var(
+            --#{$prefix}notification-close-right,
+            $notification-close-right
+        );
+        top: var(--#{$prefix}notification-close-top, $notification-close-top);
+        height: var(
+            --#{$prefix}notification-close-size,
+            $notification-close-size
+        );
+        width: var(
+            --#{$prefix}notification-close-size,
+            $notification-close-size
+        );
+        color: var(
+            --#{$prefix}notification-close-color,
+            $notification-close-color
+        );
+    }
+
+    @each $name, $pair in $colors {
+        $color: list.nth($pair, 1);
+        $color-invert: list.nth($pair, 2);
+        &--#{$name} {
+            border-color: transparent;
+            background-color: var(--#{$prefix}variant-#{$name}, $color);
+            color: var(--#{$prefix}variant-invert-#{$name}, $color-invert);
+
+            &:hover {
+                // background-color: darken($color, 2.5%)
+                // IE 11 needs polyfill
+                filter: brightness(97.5%);
+            }
+        }
+    }
+}
 
-  &--bottom {
-    flex-direction: column-reverse;
+.o-notices {
+    position: fixed;
+    display: flex;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    overflow: hidden;
+    pointer-events: none;
+    padding: var(
+        --#{$prefix}notification-notices-padding,
+        $notification-notices-padding
+    );
+    z-index: var(
+        --#{$prefix}notification-notices-zindex,
+        $notification-notices-zindex
+    );
 
-    // Since the columns are reversed, we need to reverse the margin logic from
-    // :not(:last-child) to :not(:first-child)
     .o-notification {
-      margin-bottom: 0;
+        pointer-events: stroke;
+        max-width: 600px;
+        animation: var(
+            --#{$prefix}notification-animantion,
+            $notification-animantion
+        );
+
+        &--top,
+        &--bottom {
+            align-self: center;
+        }
+
+        &--top-right,
+        &--bottom-right {
+            align-self: flex-end;
+        }
+
+        &--top-left,
+        &--bottom-left {
+            align-self: flex-start;
+        }
+    }
 
-      &:not(:first-child) {
-        margin-bottom: $notification-margin-bottom;
-      }
+    &--top {
+        flex-direction: column;
     }
-  }
 
-  &__custom-container {
-    position: absolute;
-  }
+    &--bottom {
+        flex-direction: column-reverse;
+
+        // Since the columns are reversed, we need to reverse the margin logic from
+        // :not(:last-child) to :not(:first-child)
+        .o-notification {
+            margin-bottom: 0;
+
+            &:not(:first-child) {
+                margin-bottom: $notification-margin-bottom;
+            }
+        }
+    }
+
+    &__custom-container {
+        position: absolute;
+    }
 }