feat: apply changes for oruga v0.9.0 (#77)

* default Button style changed
* Datepicker padding changed
* default class or different component changed
* control padding changed

src/assets/scss/components/_button.scss

@@ -1,10 +1,12 @@
 @use "sass:list";
 
 /* @docs */
-$button-background-color: var(--#{$prefix}primary) !default;
-$button-color: var(--#{$prefix}primary-invert) !default;
+$button-background-color: transparent !default;
+$button-color: var(--#{$prefix}black) !default;
 $button-border-radius: var(--#{$prefix}base-border-radius) !default;
-$button-border: 1px solid $button-background-color !default;
+
+$button-border-color: var(--#{$prefix}grey-lighter) !default;
+$button-border: 1px solid $button-border-color !default;
 $button-box-shadow: none !default;
 $button-font-weight: 400 !default;
 $button-line-height: var(--#{$prefix}base-line-height) !default;
@@ -17,6 +19,7 @@ $button-rounded-border-radius: var(
 ) !default;
 $button-disabled-opacity: var(--#{$prefix}#{base-disabled-opacity}) !default;
 $button-outlined-background-color: transparent !default;
+$button-outlined-border-color: var(--#{$prefix}grey-light) !default;
 /* @docs */
 
 @keyframes spinAround {
@@ -118,22 +121,11 @@ $button-outlined-background-color: transparent !default;
   }
 
   &--outlined {
-    background-color: var(
-      --#{$prefix}button-outlined-background-color,
-      $button-outlined-background-color
-    );
-    border-color: var(
-      --#{$prefix}button-background-color,
-      $button-background-color
-    );
-    color: var(--#{$prefix}button-background-color, $button-background-color);
-
+    &:focus,
     &:hover {
-      border-color: transparent;
-
       background-color: var(
-        --#{$prefix}button-background-color,
-        $button-background-color
+        --#{$prefix}button-border-color,
+        $button-border-color
       );
       color: var(--#{$prefix}button-color, $button-color);
     }
@@ -162,30 +154,10 @@ $button-outlined-background-color: transparent !default;
     }
   }
 
-  &--loading {
-    color: transparent !important;
-    pointer-events: none;
-  }
-
-  &--loading::after {
-    -webkit-animation: spinAround 500ms infinite linear;
-    left: calc(50% - 0.5em);
-    top: calc(50% - 0.5em);
-    position: absolute !important;
-    border: 2px solid #dbdbdb;
-    border-radius: 9999px;
-    border-right-color: transparent;
-    border-top-color: transparent;
-    content: "";
-    display: block;
-    height: 1em;
-    width: 1em;
-  }
-
   &--inverted {
     background-color: var(--#{$prefix}button-color, $button-color);
     border-color: var(--#{$prefix}button-color, $button-color);
-    color: var(--#{$prefix}button-background-color, $button-background-color);
+    color: var(--#{$prefix}button-border-color, $button-border-color);
 
     &:hover {
       /* background-color: darken($color-invert, 5%)*/
@@ -223,4 +195,24 @@ $button-outlined-background-color: transparent !default;
     box-shadow: 0 0 0 0.25rem var(--#{$prefix}focus);
     outline: 0;
   }
+
+  &--loading {
+    color: transparent !important;
+    pointer-events: none;
+  }
+
+  &--loading::after {
+    -webkit-animation: spinAround 500ms infinite linear;
+    left: calc(50% - 0.5em);
+    top: calc(50% - 0.5em);
+    position: absolute !important;
+    border: 2px solid #dbdbdb;
+    border-radius: 9999px;
+    border-right-color: transparent;
+    border-top-color: transparent;
+    content: "";
+    display: block;
+    height: 1em;
+    width: 1em;
+  }
 }

src/assets/scss/components/_datepicker.scss

@@ -2,13 +2,12 @@
 
 /* @docs */
 $datepicker-font-size: var(--#{$prefix}base-font-size) !default;
-$datepicker-box-line-height: var(--#{$prefix}base-line-height) !default;
-$datepicker-box-padding: 0.375rem 1rem !default;
-$datepicker-header-padding: 0 0 0.875rem 0 !default;
-$datepicker-header-margin: 0 0 0.875rem 0 !default;
+$datepicker-box-padding: 0.5rem 1rem !default;
+$datepicker-header-padding: 0.5rem 0 !default;
+$datepicker-header-margin: 0 0 0.5rem 0 !default;
 $datepicker-header-border-bottom: 1px solid var(--#{$prefix}grey-lighter) !default;
-$datepicker-footer-padding: 0.875rem 0.5rem 0 0.5rem !default;
-$datepicker-footer-margin: 0.875rem 0 0.875rem 0 !default;
+$datepicker-footer-padding: 0.5rem 0.5rem 0 0.5rem !default;
+$datepicker-footer-margin: 0.5rem 0 !default;
 $datepicker-footer-border-top: 1px solid var(--#{$prefix}grey-lighter) !default;
 $datepicker-table-head-padding: 0 0 0.875rem 0 !default;
 $datepicker-table-head-margin: 0 0 0.875rem 0 !default;
@@ -38,6 +37,7 @@ $datepicker-event-background-color: var(--#{$prefix}grey-light) !default;
 $datepicker-event-dots-size: 0.35em !default;
 $datepicker-event-dots-margin: 0 0.1em !default;
 $datepicker-event-bars-height: 0.25em !default;
+$datepicker-btn-background-color: transparent !default;
 $datepicker-btn-border-color: var(--#{$prefix}grey-lighter) !default;
 $datepicker-btn-border-radius: var(--#{$prefix}base-border-radius) !default;
 $datepicker-btn-border: 1px solid transparent !default;
@@ -66,8 +66,7 @@ $datepicker-btn-padding: 0.5em 0.5em !default;
   }
 
   &__box {
-    --#{$prefix}dropdown-item-line-height: #{$datepicker-box-line-height};
-    --#{$prefix}dropdown-item-padding: #{$datepicker-box-padding};
+    padding: var(--#{$prefix}datepicker-box-padding, $datepicker-box-padding);
   }
 
   &__header {
@@ -124,6 +123,10 @@ $datepicker-btn-padding: 0.5em 0.5em !default;
         --#{$prefix}datepicker-btn-line-height,
         $datepicker-btn-line-height
       );
+      background-color: var(
+        --#{$prefix}datepicker-btn-background-color,
+        $datepicker-btn-background-color
+      );
       border: var(--#{$prefix}datepicker-btn-border, $datepicker-btn-border);
       border-radius: var(
         --#{$prefix}datepicker-btn-border-radius,
@@ -490,5 +493,9 @@ $datepicker-btn-padding: 0.5em 0.5em !default;
       flex-grow: 1;
       flex-shrink: 1;
     }
+
+    .o-drop__menu {
+      padding: 0;
+    }
   }
 }

src/assets/scss/components/_dropdown.scss

@@ -236,7 +236,7 @@ $dropdown-mobile-zindex: 60 !default;
     pointer-events: none;
   }
 
-  &--mobile {
+  &--modal:not(.o-drop--inline):not(.o-drop--hoverable) {
     > .o-drop__menu {
       position: fixed;
       top: 25%;

src/assets/scss/components/_menu.scss

@@ -6,6 +6,7 @@ $menu-item-active-color: var(--#{$prefix}primary-invert) !default;
 $menu-item-active-background-color: var(--#{$prefix}primary) !default;
 $menu-item-disabled-color: var(--#{$prefix}grey-light) !default;
 $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;
@@ -24,7 +25,7 @@ $menu-icon-spacer: 0.5rem !default;
   }
 
   &__list,
-  &__item__wrapper {
+  &__item {
     list-style: none;
   }
 
@@ -55,12 +56,16 @@ $menu-icon-spacer: 0.5rem !default;
     }
   }
 
-  &__item {
+  &__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
+    );
 
     &:hover:not(&--active):not(&--disabled) {
       color: var(--#{$prefix}menu-item-hover-color, $menu-item-hover-color);
@@ -70,7 +75,7 @@ $menu-icon-spacer: 0.5rem !default;
       );
     }
 
-    &--icon-text .o-icon {
+    &--icon .o-icon {
       margin-right: var(--#{$prefix}menu-icon-spacer, $menu-icon-spacer);
     }
 

src/assets/scss/components/_pagination.scss

@@ -34,7 +34,7 @@ $pagination-rounded-border-radius: var(
     }
   }
 
-  &__link {
+  &__btn {
     @include unselectable;
     -moz-appearance: none;
     -webkit-appearance: none;
@@ -120,11 +120,11 @@ $pagination-rounded-border-radius: var(
     );
   }
 
-  &__next {
+  &__btn-next {
     order: 3;
   }
 
-  &__previous {
+  &__btn-previous {
     order: 2;
   }
 
@@ -149,11 +149,11 @@ $pagination-rounded-border-radius: var(
   &--centered {
     justify-content: center;
 
-    .o-pag__previous {
+    .o-pag__btn-previous {
       order: 1;
     }
 
-    .o-pag__next {
+    .o-pag__btn-next {
       order: 3;
     }
 
@@ -166,11 +166,11 @@ $pagination-rounded-border-radius: var(
   &--right {
     justify-content: flex-end;
 
-    .o-pag__previous {
+    .o-pag__btn-previous {
       order: 1;
     }
 
-    .o-pag__next {
+    .o-pag__btn-next {
       order: 2;
     }
 
@@ -184,18 +184,18 @@ $pagination-rounded-border-radius: var(
     justify-content: flex-start;
     flex-wrap: wrap;
 
-    .o-pag__link {
+    .o-pag__btn {
       flex-grow: 1;
       flex-shrink: 1;
     }
 
-    .o-pag__previous {
+    .o-pag__btn-previous {
       flex-grow: 1;
       flex-shrink: 1;
       order: 0;
     }
 
-    .o-pag__next {
+    .o-pag__btn-next {
       flex-grow: 1;
       flex-shrink: 1;
       order: 0;