@oruga-ui/theme-oruga 0.4.0 → 0.4.2

package/dist/oruga.css

@@ -1,4 +1,4 @@
-/*! Oruga v0.4.0 | MIT License | github.com/oruga-ui/oruga */
+/*! Oruga v0.4.2 | MIT License | github.com/oruga-ui/oruga */
 
 /*************************************
 *   Oruga Default Theme Full Build
@@ -341,15 +341,18 @@ body {
   line-height: var(--oruga-button-line-height, var(--oruga-base-line-height));
   margin: var(--oruga-button-margin, 0);
   height: var(--oruga-button-height, 2.25em);
+  /* size variants*/
+  /* color variants*/
+  /* focus effect*/
 }
 .o-btn__wrapper {
-  margin-left: -0.1875em;
-  margin-right: -0.1875em;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   position: relative;
   width: 100%;
+  margin-left: -0.1875em;
+  margin-right: -0.1875em;
 }
 .o-btn__wrapper > * {
   margin-left: 0.1875em;
@@ -385,6 +388,8 @@ body {
   color: var(--oruga-variant-invert-primary, #ffffff);
 }
 .o-btn--primary:hover {
+  /* background-color: darken($color, 2.5%)*/
+  /* IE 11 needs polyfill*/
   filter: brightness(97.5%);
 }
 .o-btn--secondary {
@@ -394,6 +399,8 @@ body {
   color: var(--oruga-variant-invert-secondary, #ffffff);
 }
 .o-btn--secondary:hover {
+  /* background-color: darken($color, 2.5%)*/
+  /* IE 11 needs polyfill*/
   filter: brightness(97.5%);
 }
 .o-btn--success {
@@ -403,6 +410,8 @@ body {
   color: var(--oruga-variant-invert-success, #ffffff);
 }
 .o-btn--success:hover {
+  /* background-color: darken($color, 2.5%)*/
+  /* IE 11 needs polyfill*/
   filter: brightness(97.5%);
 }
 .o-btn--info {
@@ -412,6 +421,8 @@ body {
   color: var(--oruga-variant-invert-info, #ffffff);
 }
 .o-btn--info:hover {
+  /* background-color: darken($color, 2.5%)*/
+  /* IE 11 needs polyfill*/
   filter: brightness(97.5%);
 }
 .o-btn--warning {
@@ -421,6 +432,8 @@ body {
   color: var(--oruga-variant-invert-warning, #000000);
 }
 .o-btn--warning:hover {
+  /* background-color: darken($color, 2.5%)*/
+  /* IE 11 needs polyfill*/
   filter: brightness(97.5%);
 }
 .o-btn--danger {
@@ -430,6 +443,8 @@ body {
   color: var(--oruga-variant-invert-danger, #ffffff);
 }
 .o-btn--danger:hover {
+  /* background-color: darken($color, 2.5%)*/
+  /* IE 11 needs polyfill*/
   filter: brightness(97.5%);
 }
 .o-btn--outlined {
@@ -532,6 +547,8 @@ body {
   color: var(--oruga-button-background-color, var(--oruga-primary));
 }
 .o-btn--inverted:hover {
+  /* background-color: darken($color-invert, 5%)*/
+  /* IE 11 needs polyfill*/
   filter: brightness(95%);
 }
 .o-btn--inverted-primary {
@@ -541,6 +558,8 @@ body {
   color: var(--oruga-variant-primary, #445e00);
 }
 .o-btn--inverted-primary:focus, .o-btn--inverted-primary:hover {
+  /* background-color: darken($color-invert, 5%)*/
+  /* IE 11 needs polyfill*/
   filter: brightness(95%);
 }
 .o-btn--inverted-secondary {
@@ -550,6 +569,8 @@ body {
   color: var(--oruga-variant-secondary, #6c757d);
 }
 .o-btn--inverted-secondary:focus, .o-btn--inverted-secondary:hover {
+  /* background-color: darken($color-invert, 5%)*/
+  /* IE 11 needs polyfill*/
   filter: brightness(95%);
 }
 .o-btn--inverted-success {
@@ -559,6 +580,8 @@ body {
   color: var(--oruga-variant-success, #006724);
 }
 .o-btn--inverted-success:focus, .o-btn--inverted-success:hover {
+  /* background-color: darken($color-invert, 5%)*/
+  /* IE 11 needs polyfill*/
   filter: brightness(95%);
 }
 .o-btn--inverted-info {
@@ -568,6 +591,8 @@ body {
   color: var(--oruga-variant-info, #005c98);
 }
 .o-btn--inverted-info:focus, .o-btn--inverted-info:hover {
+  /* background-color: darken($color-invert, 5%)*/
+  /* IE 11 needs polyfill*/
   filter: brightness(95%);
 }
 .o-btn--inverted-warning {
@@ -577,6 +602,8 @@ body {
   color: var(--oruga-variant-warning, #f4c300);
 }
 .o-btn--inverted-warning:focus, .o-btn--inverted-warning:hover {
+  /* background-color: darken($color-invert, 5%)*/
+  /* IE 11 needs polyfill*/
   filter: brightness(95%);
 }
 .o-btn--inverted-danger {
@@ -586,6 +613,8 @@ body {
   color: var(--oruga-variant-danger, #b60000);
 }
 .o-btn--inverted-danger:focus, .o-btn--inverted-danger:hover {
+  /* background-color: darken($color-invert, 5%)*/
+  /* IE 11 needs polyfill*/
   filter: brightness(95%);
 }
 .o-btn:focus, .o-btn:focus-within {
@@ -762,12 +791,24 @@ body {
 .o-chk--small {
   font-size: var(--oruga-checkbox-font-size-small, 0.75rem);
 }
+.o-chk--small .o-chk__input {
+  width: var(--oruga-checkbox-font-size-small, 0.75rem);
+  height: var(--oruga-checkbox-font-size-small, 0.75rem);
+}
 .o-chk--medium {
   font-size: var(--oruga-checkbox-font-size-medium, 1.25rem);
 }
+.o-chk--medium .o-chk__input {
+  width: var(--oruga-checkbox-font-size-medium, 1.25rem);
+  height: var(--oruga-checkbox-font-size-medium, 1.25rem);
+}
 .o-chk--large {
   font-size: var(--oruga-checkbox-font-size-large, 1.5rem);
 }
+.o-chk--large .o-chk__input {
+  width: var(--oruga-checkbox-font-size-large, 1.5rem);
+  height: var(--oruga-checkbox-font-size-large, 1.5rem);
+}
 .o-chk--primary {
   --oruga-focus: rgba(68, 94, 0, 0.25);
 }
@@ -1009,7 +1050,7 @@ body {
   border-top-right-radius: var(--oruga-datepicker-item-selected-border-radius, 0);
 }
 .o-dpck__table__cell--within-hovered, .o-dpck__month__cell--within-hovered {
-  background-color: var(--oruga-datepicker-item-hovered-within-background-color, rgba(var(--oruga-grey), 0.5));
+  background-color: var(--oruga-datepicker-item-hovered-within-background-color, rgb(from var(--oruga-grey) r g b/50%));
   color: var(--oruga-datepicker-item-hovered-color, var(--oruga-grey-lighter));
   border-radius: var(--oruga-datepicker-item-selected-border-radius, 0);
 }
@@ -1030,7 +1071,7 @@ body {
   border-top-right-radius: var(--oruga-datepicker-item-selected-border-radius, 0);
 }
 .o-dpck__table__cell--within-selected:not(.o-dpck__table__cell--first-hovered, .o-dpck__month__cell--first-hovered):not(.o-dpck__table__cell--within-hovered, .o-dpck__month__cell--within-hovered):not(.o-dpck__table__cell--last-hovered, .o-dpck__month__cell--last-hovered), .o-dpck__month__cell--within-selected:not(.o-dpck__table__cell--first-hovered, .o-dpck__month__cell--first-hovered):not(.o-dpck__table__cell--within-hovered, .o-dpck__month__cell--within-hovered):not(.o-dpck__table__cell--last-hovered, .o-dpck__month__cell--last-hovered) {
-  background-color: var(--oruga-datepicker-item-selected-within-background-color, rgba(var(--oruga-primary), 0.5));
+  background-color: var(--oruga-datepicker-item-selected-within-background-color, rgb(from var(--oruga-primary) r g b/50%));
   border-radius: var(--oruga-datepicker-item-selected-border-radius, 0);
 }
 .o-dpck__table__cell--last-selected:not(.o-dpck__table__cell--first-hovered, .o-dpck__month__cell--first-hovered):not(.o-dpck__table__cell--within-hovered, .o-dpck__month__cell--within-hovered):not(.o-dpck__table__cell--last-hovered, .o-dpck__month__cell--last-hovered), .o-dpck__month__cell--last-selected:not(.o-dpck__table__cell--first-hovered, .o-dpck__month__cell--first-hovered):not(.o-dpck__table__cell--within-hovered, .o-dpck__month__cell--within-hovered):not(.o-dpck__table__cell--last-hovered, .o-dpck__month__cell--last-hovered) {
@@ -1211,7 +1252,7 @@ body {
 .o-drop__menu--bottom-right {
   right: 0;
   left: auto;
-  top: calc(100% + var(--oruga- "dropdown-menu-spacer", 0px));
+  top: calc(100% + var(--oruga-dropdown-menu-spacer, 0px));
   bottom: auto;
 }
 .o-drop__menu--bottom-left {
@@ -2211,6 +2252,15 @@ body {
   margin: var(--oruga-skeleton-margin, 0.5rem 0 0 0);
   line-height: var(--oruga-skeleton-font-size, 1rem);
 }
+.o-sklt__item--small {
+  line-height: var(--oruga-skeleton-font-size-small, 0.75rem);
+}
+.o-sklt__item--medium {
+  line-height: var(--oruga-skeleton-font-size-medium, 1.25rem);
+}
+.o-sklt__item--large {
+  line-height: var(--oruga-skeleton-font-size-large, 1.5rem);
+}
 .o-sklt__item--rounded {
   border-radius: var(--oruga-skeleton-border-radius, var(--oruga-base-border-radius));
 }
@@ -2223,15 +2273,6 @@ body {
 .o-sklt__item::after {
   content: " ";
 }
-.o-sklt__item--small {
-  line-height: var(--oruga-skeleton-font-size-small, 0.75rem);
-}
-.o-sklt__item--medium {
-  line-height: var(--oruga-skeleton-font-size-medium, 1.25rem);
-}
-.o-sklt__item--large {
-  line-height: var(--oruga-skeleton-font-size-large, 1.5rem);
-}
 .o-sklt--centered {
   align-items: center;
 }
@@ -2377,7 +2418,7 @@ body {
   height: 100%;
   box-shadow: var(--oruga-slider-track-shadow, 0px 0px 0px var(--oruga-grey));
   background: var(--oruga-slider-fill-background, var(--oruga-primary));
-  border-radius: var(--oruga-slider-track-radius var(--oruga-base-border-radius));
+  border-radius: var(--oruga-slider-track-radius, var(--oruga-base-border-radius));
   border: var(--oruga-slider-track-border, 0px solid var(--oruga-grey));
   top: 50%;
   transform: translateY(-50%);
@@ -3384,6 +3425,9 @@ body {
   flex-grow: 0;
   border-bottom: none;
 }
+.o-tabs--vertical .o-tabs__nav-item-default {
+  border-radius: 0;
+}
 .o-tabs--vertical .o-tabs__nav-item-boxed {
   border-bottom-color: transparent;
   border-right-color: var(--oruga-tabs-border-bottom-color, var(--oruga-grey-lighter));
@@ -3438,15 +3482,7 @@ body {
 .o-tabs__nav--right {
   justify-content: flex-end;
 }
-.o-tabs__nav-item-icon {
-  margin-right: var(--oruga-tabs-icon-margin, 0.5em);
-}
-.o-tabs__nav-item:focus, .o-tabs__nav-item:focus-within {
-  box-shadow: 0 0 0 0.25rem var(--oruga-focus);
-  outline: 0;
-  border-radius: var(--oruga-base-border-radius);
-}
-.o-tabs__nav-item-default {
+.o-tabs__nav-item {
   -moz-appearance: none;
   -webkit-appearance: none;
   width: 100%;
@@ -3468,6 +3504,14 @@ body {
   color: var(--oruga-tabs-link-color, hsl(0, 0%, 29%));
   padding: var(--oruga-tabs-link-padding, 0.5em 1em);
 }
+.o-tabs__nav-item-icon {
+  margin-right: var(--oruga-tabs-icon-margin, 0.5em);
+}
+.o-tabs__nav-item:focus, .o-tabs__nav-item:focus-within {
+  box-shadow: 0 0 0 0.25rem var(--oruga-focus);
+  outline: 0;
+  border-radius: var(--oruga-base-border-radius);
+}
 .o-tabs__nav-item-default--active {
   border-bottom-color: var(--oruga-tabs-link-active-border-bottom-color, var(--oruga-primary));
   color: var(--oruga-tabs-link-active-color, var(--oruga-primary));
@@ -3482,27 +3526,6 @@ body {
   border-bottom-color: var(--oruga-tabs-link-hover-border-bottom-color, hsl(0, 0%, 86%));
 }
 .o-tabs__nav-item-boxed {
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  width: 100%;
-  margin: 0;
-  border: 1px solid transparent;
-  background-color: transparent;
-  align-items: center;
-  line-height: var(--oruga-base-line-height);
-  display: flex;
-  justify-content: center;
-  margin-bottom: -1px;
-  vertical-align: top;
-  cursor: pointer;
-  text-decoration: none;
-  font-size: var(--oruga-tabs-font-size, var(--oruga-base-font-size));
-  border-bottom-color: var(--oruga-tabs-border-bottom-color, var(--oruga-grey-lighter));
-  border-bottom-style: var(--oruga-tabs-border-bottom-style, solid);
-  border-bottom-width: var(--oruga-tabs-border-bottom-width, 1px);
-  color: var(--oruga-tabs-link-color, hsl(0, 0%, 29%));
-  padding: var(--oruga-tabs-link-padding, 0.5em 1em);
-  border-bottom-color: transparent;
   border-radius: var(--oruga-tabs-border-bottom-color, var(--oruga-base-border-radius) var(--oruga-base-border-radius) 0 0);
 }
 .o-tabs__nav-item-boxed--active {
@@ -3520,31 +3543,9 @@ body {
   background-color: var(--oruga-tabs-boxed-link-hover-background-color, hsl(0, 0%, 96%));
 }
 .o-tabs__nav-item-toggle {
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  width: 100%;
-  margin: 0;
-  border: 1px solid transparent;
-  background-color: transparent;
-  align-items: center;
-  line-height: var(--oruga-base-line-height);
-  display: flex;
-  justify-content: center;
-  margin-bottom: -1px;
-  vertical-align: top;
-  cursor: pointer;
-  text-decoration: none;
-  font-size: var(--oruga-tabs-font-size, var(--oruga-base-font-size));
-  border-bottom-color: var(--oruga-tabs-border-bottom-color, var(--oruga-grey-lighter));
-  border-bottom-style: var(--oruga-tabs-border-bottom-style, solid);
-  border-bottom-width: var(--oruga-tabs-border-bottom-width, 1px);
-  color: var(--oruga-tabs-link-color, hsl(0, 0%, 29%));
-  padding: var(--oruga-tabs-link-padding, 0.5em 1em);
-  position: relative;
   border-color: var(--oruga-tabs-toggle-link-border-color, hsl(0, 0%, 86%));
   border-style: var(--oruga-tabs-toggle-link-border-style, solid);
   border-width: var(--oruga-tabs-toggle-link-border-width, 1px);
-  margin-bottom: 0;
 }
 .o-tabs__nav-item-toggle--active {
   background-color: var(--oruga-tabs-toggle-link-active-background-color, var(--oruga-primary));
@@ -3560,6 +3561,14 @@ body {
   background-color: var(--oruga-tabs-toggle-link-hover-background-color, hsl(0, 0%, 96%));
   border-color: var(--oruga-tabs-toggle-link-hover-border-color, hsl(0, 0%, 71%));
 }
+.o-tabs__nav-item-pills {
+  border-radius: var(--oruga-tabs-boxed-link-radius, var(--oruga-base-border-radius));
+  border-color: transparent;
+}
+.o-tabs__nav-item-pills--active {
+  background-color: var(--oruga-tabs-toggle-link-active-background-color, var(--oruga-primary));
+  color: var(--oruga-tabs-toggle-link-active-color, var(--oruga-primary-invert));
+}
 .o-tabs__content {
   position: relative;
   overflow: visible;