@oruga-ui/theme-oruga 0.4.2 → 0.5.0

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

@@ -1,92 +0,0 @@
-/* @docs */
-$menu-item-color: var(--#{$prefix}grey-dark) !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;
-$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-line-height: 1.25em !default;
-$menu-item-padding: 0.5em 0.75em !default;
-$menu-nested-list-margin: 0.75em !default;
-$menu-nested-list-padding-left: 0.75em !default;
-$menu-label-color: $grey !default;
-$menu-label-font-size: 0.75em !default;
-$menu-label-spacing: 1em !default;
-$menu-icon-spacer: 0.5rem !default;
-/* @docs */
-
-.o-menu {
-  @each $name, $value in $sizes {
-    &--#{$name} {
-      font-size: var(--#{$prefix}menu-font-size-#{$name}, $value);
-    }
-  }
-
-  &__list,
-  &__item__wrapper {
-    list-style: none;
-  }
-
-  &__list {
-    line-height: var(--#{$prefix}menu-list-line-height, $menu-list-line-height);
-  }
-
-  &__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);
-
-    &: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);
-    }
-  }
-
-  &__item {
-    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);
-
-    &: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-text .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
-      );
-    }
-
-    &--disabled {
-      color: var(
-        --#{$prefix}menu-item-disabled-color,
-        $menu-item-disabled-color
-      );
-    }
-  }
-}

package/src/assets/scss/components/_modal.scss

@@ -1,94 +0,0 @@
-/* @docs */
-$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
-) !default;
-$modal-close-right: 20px !default;
-$modal-close-top: 20px !default;
-$modal-close-size: 32px !default;
-$modal-close-color: var(--#{$prefix}white) !default;
-$modal-content-fullscreen-background-color: #f5f5f5 !default;
-$modal-content-max-height: calc(100vh - 160px) !default;
-$modal-content-margin: 0 auto !default;
-$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 {
-    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
-    );
-
-    &--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);
-  }
-
-  &--mobile {
-    .o-modal__content {
-      width: 100%;
-    }
-  }
-}

package/src/assets/scss/components/_notification.scss

@@ -1,175 +0,0 @@
-@use "sass:list";
-
-/* @docs */
-$notification-background-color: var(--#{$prefix}primary) !default;
-$notification-border-radius: 4px !default;
-$notification-padding: 1.75em 1.75em !default;
-$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
-) !default;
-$notification-close-right: 0.5rem !default;
-$notification-close-top: 0.5rem !default;
-$notification-close-size: 20px !default;
-$notification-close-color: var(--#{$prefix}white) !default;
-$notification-close-background-color: hsla(0, 0%, 4%, 0.2) !default;
-$notification-icon-margin-right: 1rem !default;
-$notification-notices-padding: 2em !default;
-$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;
-    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%);
-      }
-    }
-  }
-}
-
-.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
-    );
-
-    &--top,
-    &--bottom {
-      align-self: center;
-    }
-
-    &--top-right,
-    &--bottom-right {
-      align-self: flex-end;
-    }
-
-    &--top-left,
-    &--bottom-left {
-      align-self: flex-start;
-    }
-  }
-
-  &--top {
-    flex-direction: column;
-  }
-
-  &--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;
-  }
-}

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

@@ -1,213 +0,0 @@
-/* @docs */
-$pagination-disabled-opacity: var(--#{$prefix}base-disabled-opacity) !default;
-$pagination-ellipsis-color: var(--#{$prefix}grey-light) !default;
-$pagination-link-border-color: var(--#{$prefix}grey-lighter) !default;
-$pagination-link-border-radius: var(--#{$prefix}base-border-radius) !default;
-$pagination-link-border: 1px solid transparent !default;
-$pagination-link-color: #363636 !default;
-$pagination-link-current-background-color: var(--#{$prefix}primary) !default;
-$pagination-link-current-border-color: var(--#{$prefix}primary) !default;
-$pagination-link-current-color: #fff !default;
-$pagination-link-height: 2.25em !default;
-$pagination-link-hover-border-color: var(--#{$prefix}grey-light) !default;
-$pagination-link-line-height: var(--#{$prefix}base-line-height) !default;
-$pagination-link-margin: 0.25rem !default;
-$pagination-link-min-width: 2.25em !default;
-$pagination-link-padding: 0.5em 0.5em !default;
-$pagination-margin: -0.25rem !default;
-$pagination-rounded-border-radius: var(
-  --#{$prefix}base-border-radius-rounded
-) !default;
-/* @docs */
-
-.o-pag {
-  align-items: center;
-  display: flex;
-  text-align: center;
-  justify-content: space-between;
-  font-size: var(--#{$prefix}base-font-size, $base-font-size);
-  margin: var(--#{$prefix}pagination-margin, $pagination-margin);
-
-  @each $name, $value in $sizes {
-    &--#{$name} {
-      font-size: var(--#{$prefix}pagination-font-size-#{$name}, $value);
-    }
-  }
-
-  &__link {
-    @include unselectable;
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    align-items: center;
-    box-shadow: none;
-    display: inline-flex;
-    position: relative;
-    vertical-align: top;
-    justify-content: center;
-    text-align: center;
-    text-decoration: none;
-    cursor: pointer;
-    line-height: var(
-      --#{$prefix}pagination-link-line-height,
-      $pagination-link-line-height
-    );
-    border: var(--#{$prefix}pagination-link-border, $pagination-link-border);
-    border-radius: var(
-      --#{$prefix}pagination-link-border-radius,
-      $pagination-link-border-radius
-    );
-    border-color: var(
-      --#{$prefix}pagination-link-border-color,
-      $pagination-link-border-color
-    );
-    color: var(--#{$prefix}pagination-link-color, $pagination-link-color);
-    min-width: var(
-      --#{$prefix}pagination-link-min-width,
-      $pagination-link-min-width
-    );
-    height: var(--#{$prefix}pagination-link-height, $pagination-link-height);
-    padding: var(--#{$prefix}pagination-link-padding, $pagination-link-padding);
-    margin: var(--#{$prefix}pagination-link-margin, $pagination-link-margin);
-
-    &:hover {
-      text-decoration: none;
-      border-color: var(
-        --#{$prefix}pagination-link-hover-border-color,
-        $pagination-link-hover-border-color
-      );
-    }
-
-    &--rounded {
-      border-radius: var(
-        --#{$prefix}pagination-rounded-border-radius,
-        $pagination-rounded-border-radius
-      );
-    }
-
-    &--disabled {
-      pointer-events: none;
-      opacity: var(
-        --#{$prefix}pagination-disabled-opacity,
-        $pagination-disabled-opacity
-      );
-    }
-
-    &--current {
-      pointer-events: none;
-      background-color: var(
-        --#{$prefix}pagination-link-current-background-color,
-        $pagination-link-current-background-color
-      );
-      border-color: var(
-        --#{$prefix}pagination-link-current-border-color,
-        $pagination-link-current-border-color
-      );
-      color: var(
-        --#{$prefix}pagination-link-current-color,
-        $pagination-link-current-color
-      );
-    }
-  }
-
-  &__ellipsis {
-    justify-content: center;
-    text-align: center;
-    pointer-events: none;
-    margin: var(--#{$prefix}pagination-link-margin, $pagination-link-margin);
-    color: var(
-      --#{$prefix}pagination-ellipsis-color,
-      $pagination-ellipsis-color
-    );
-  }
-
-  &__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;
-  }
-
-  &--centered {
-    justify-content: center;
-
-    .o-pag__previous {
-      order: 1;
-    }
-
-    .o-pag__next {
-      order: 3;
-    }
-
-    .o-pag__list {
-      justify-content: center;
-      order: 2;
-    }
-  }
-
-  &--right {
-    justify-content: flex-end;
-
-    .o-pag__previous {
-      order: 1;
-    }
-
-    .o-pag__next {
-      order: 2;
-    }
-
-    .o-pag__list {
-      justify-content: flex-end;
-      order: 2;
-    }
-  }
-
-  &--mobile {
-    justify-content: flex-start;
-    flex-wrap: wrap;
-
-    .o-pag__link {
-      flex-grow: 1;
-      flex-shrink: 1;
-    }
-
-    .o-pag__previous {
-      flex-grow: 1;
-      flex-shrink: 1;
-      order: 0;
-    }
-
-    .o-pag__next {
-      flex-grow: 1;
-      flex-shrink: 1;
-      order: 0;
-    }
-
-    .o-pag__ellipsis {
-      flex-grow: 1;
-      flex-shrink: 1;
-    }
-
-    .o-pag__list {
-      order: 0;
-    }
-  }
-}

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

@@ -1,112 +0,0 @@
-@use "sass:list";
-
-/* @docs */
-$radio-active-background-color: $primary !default;
-$radio-checked-box-shadow-length: 0 0 0.5em !default;
-$radio-checked-box-shadow-opacity: 0.8 !default;
-$radio-box-shadow: $control-box-shadow !default;
-$radio-disabled-opacity: var(--#{$prefix}base-disabled-opacity) !default;
-$radio-label-padding: 0 0 0 0.5em !default;
-$radio-margin-sibiling: 0.5em !default;
-$radio-size: 1rem !default;
-$radio-line-height: 1.25 !default;
-/* @docs */
-
-// filled svg calculation
-@function svg_radio_fill() {
-  $start: '<svg width="100%" height="100%" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="#e11919" stroke="#000" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">';
-  $content: '<g id="SVGRepo_bgCarrier" stroke-width="0"></g>' +
-    '<g id="SVGRepo_iconCarrier">' +
-    '<path d="M483 260c0-123-100-223-223-223S37 137 37 260s100 223 223 223S483 383 483 260Z" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:64px"></path>' +
-    '<circle cx="256" cy="256" r="144"></circle>' + "</g>";
-
-  $end: "</svg>";
-
-  @return svg-encode("#{$start}#{$content}#{$end}");
-}
-
-// empty svg calculation
-@function svg_radio_empty() {
-  $start: '<svg width="100%" height="100%" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="#000" stroke="#000" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">';
-  $content: '<g id="SVGRepo_bgCarrier" stroke-width="0"></g>' +
-    '<g id="SVGRepo_iconCarrier">' +
-    '<path d="M483 260c0-123-100-223-223-223S37 137 37 260s100 223 223 223S483 383 483 260Z" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:64px"></path>' +
-    "</g>";
-  $end: "</svg>";
-
-  @return svg-encode("#{$start}#{$content}#{$end}");
-}
-
-.o-radio {
-  @include unselectable;
-  display: inline-flex;
-  align-items: center;
-  cursor: pointer;
-  line-height: var(--#{$prefix}radio-line-height, $radio-line-height);
-  margin-right: var(--#{$prefix}radio-margin-sibiling, $radio-margin-sibiling);
-
-  &__input {
-    font-size: var(--#{$prefix}radio-font-size, inherit);
-    width: var(--#{$prefix}radio-size, $radio-size);
-    height: var(--#{$prefix}radio-size, $radio-size);
-    margin: 0;
-    vertical-align: top;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    -webkit-print-color-adjust: exact;
-    print-color-adjust: exact;
-    cursor: pointer;
-    box-shadow: var(--#{$prefix}radio-box-shadow, $radio-box-shadow);
-    border-radius: 50%;
-    background: var(
-      --#{$prefix}radio-active-background-color,
-      $radio-active-background-color
-    );
-    mask-image: url(svg_radio_empty());
-    background-image: none;
-    background-position: center;
-    background-size: contain;
-    background-repeat: no-repeat;
-
-    transition: background var(--#{$prefix}transition-duration)
-      var(--#{$prefix}transition-timing);
-
-    &--checked {
-      mask-image: url(svg_radio_fill());
-    }
-  }
-
-  &__label {
-    padding: var(--#{$prefix}radio-label-padding, $radio-label-padding);
-  }
-
-  &--disabled {
-    opacity: var(--#{$prefix}radio-disabled-opacity, $radio-disabled-opacity);
-  }
-
-  // size variants
-  @each $name, $value in $sizes {
-    &--#{$name} {
-      --#{$prefix}radio-font-size: #{$value};
-      --#{$prefix}radio-size: #{$value};
-    }
-  }
-
-  // color variants
-  @each $name, $pair in $colors {
-    $color: list.nth($pair, 1);
-    $color-invert: list.nth($pair, 2);
-
-    &--#{$name} {
-      --#{$prefix}focus: #{createFocus($color)};
-      --#{$prefix}radio-active-background-color: #{$color};
-    }
-  }
-
-  // focus effect
-  &:focus &__input,
-  &:focus-within &__input {
-    box-shadow: 0 0 0 0.25rem var(--#{$prefix}focus);
-  }
-}