@oruga-ui/theme-oruga 0.4.2 → 0.5.0

package/src/assets/scss/components/_carousel.scss

@@ -1,233 +0,0 @@
-/* @docs */
-$carousel-arrow-background: var(--#{$prefix}white) !default;
-$carousel-arrow-color: var(--#{$prefix}primary) !default;
-$carousel-arrow-icon-spaced: 1.5rem !default;
-$carousel-arrow-top: 50% !default;
-$carousel-arrow-size: 1.5rem !default;
-$carousel-arrow-border-radius: var(
-  --#{$prefix}base-border-radius-rounded
-) !default;
-$carousel-arrow-border: 1px solid $carousel-arrow-background !default;
-$carousel-arrow-transition: var(--#{$prefix}transition-duration)
-  var(--#{$prefix}transition-timing) !default;
-$carousel-indicators-background: rgba(var(--#{$prefix}white), 0.5) !default;
-$carousel-indicators-padding: 0.5rem !default;
-$carousel-indicator-margin: 0 0.5rem 0 0 !default;
-$carousel-indicator-color: var(--#{$prefix}primary) !default;
-$carousel-indicator-background: var(--#{$prefix}white) !default;
-$carousel-indicator-border: 1px solid $carousel-indicator-color !default;
-$carousel-indicator-active-background: $carousel-indicator-color !default;
-$carousel-indicator-active-border: 1px solid $carousel-indicator-color !default;
-$carousel-indicator-transition: var(--#{$prefix}transition-duration)
-  var(--#{$prefix}transition-timing) !default;
-$carousel-indicator-size: 10px !default;
-$carousel-indicator-dots-border-radius: var(
-  --#{$prefix}base-border-radius
-) !default;
-$carousel-indicator-lines-height: 5px !default;
-$carousel-indicator-lines-width: 25px !default;
-$carousel-items-transition: all var(--#{$prefix}transition-duration)
-  var(--#{$prefix}transition-timing) 0s !default;
-$carousel-item-border: 2px solid transparent !default;
-$carousel-overlay-background: hsla(0, 0%, 4%, 0.86) !default;
-$carousel-overlay-zindex: 40 !default;
-/* @docs */
-
-.o-car {
-  @include unselectable;
-  position: relative;
-  overflow: hidden;
-  width: 100%;
-
-  &__overlay {
-    bottom: 0;
-    left: 0;
-    right: 0;
-    top: 0;
-    align-items: center;
-    flex-direction: column;
-    justify-content: center;
-    display: flex;
-    max-height: 100vh;
-    position: fixed;
-
-    background-color: var(
-      --#{$prefix}carousel-overlay-background,
-      $carousel-overlay-background
-    );
-    z-index: var(--#{$prefix}carousel-overlay-zindex, $carousel-overlay-zindex);
-  }
-
-  &__wrapper {
-    position: relative;
-    width: 100%;
-  }
-
-  &__items {
-    display: flex;
-    width: 100%;
-
-    &:not(&--dragging) {
-      transition: var(
-        --#{$prefix}carousel-items-transition,
-        $carousel-items-transition
-      );
-    }
-  }
-
-  &__item {
-    border: var(--#{$prefix}carousel-item-border, $carousel-item-border);
-    flex-shrink: 0;
-
-    &--clickable {
-      cursor: pointer;
-    }
-  }
-
-  &__indicators {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    padding: var(
-      --#{$prefix}carousel-indicators-padding,
-      $carousel-indicators-padding
-    );
-    background: var(
-      --#{$prefix}carousel-indicators-background,
-      $carousel-indicators-background
-    );
-
-    &--inside {
-      position: absolute;
-
-      &--bottom {
-        bottom: 0;
-      }
-
-      &--top {
-        top: 0;
-      }
-    }
-  }
-
-  &__indicator {
-    &:not(:last-child) {
-      margin: var(
-        --#{$prefix}carousel-indicator-margin,
-        $carousel-indicator-margin
-      );
-    }
-
-    &__item {
-      display: block;
-
-      border: var(
-        --#{$prefix}carousel-indicator-border,
-        $carousel-indicator-border
-      );
-      background: var(
-        --#{$prefix}carousel-indicator-background,
-        $carousel-indicator-background
-      );
-      transition: var(
-        --#{$prefix}carousel-indicator-transition,
-        $carousel-indicator-transition
-      );
-
-      &--active,
-      :hover {
-        background: var(
-          --#{$prefix}carousel-indicator-active-background,
-          $carousel-indicator-active-background
-        );
-        border: var(
-          --#{$prefix}carousel-indicator-active-border,
-          $carousel-indicator-active-border
-        );
-      }
-
-      &--boxes {
-        width: var(
-          --#{$prefix}carousel-indicator-size,
-          $carousel-indicator-size
-        );
-        height: var(
-          --#{$prefix}carousel-indicator-size,
-          $carousel-indicator-size
-        );
-      }
-
-      &--dots {
-        border-radius: var(
-          --#{$prefix}carousel-indicator-dots-border-radius,
-          $carousel-indicator-dots-border-radius
-        );
-        width: var(
-          --#{$prefix}carousel-indicator-size,
-          $carousel-indicator-size
-        );
-        height: var(
-          --#{$prefix}carousel-indicator-size,
-          $carousel-indicator-size
-        );
-      }
-
-      &--lines {
-        width: var(
-          --#{$prefix}carousel-indicator-lines-width,
-          $carousel-indicator-lines-width
-        );
-        height: var(
-          --#{$prefix}carousel-indicator-lines-height,
-          $carousel-indicator-lines-height
-        );
-      }
-    }
-  }
-
-  &__arrow__icon {
-    cursor: pointer;
-    background: var(
-      --#{$prefix}carousel-arrow-background,
-      $carousel-arrow-background
-    );
-    color: var(--#{$prefix}carousel-arrow-color, $carousel-arrow-color);
-    width: var(--#{$prefix}carousel-arrow-size, $carousel-arrow-size);
-    height: var(--#{$prefix}carousel-arrow-size, $carousel-arrow-size);
-    border-radius: var(
-      --#{$prefix}carousel-arrow-border-radius,
-      $carousel-arrow-border-radius
-    );
-    border: var(--#{$prefix}carousel-arrow-border, $carousel-arrow-border);
-    transition: var(
-      --#{$prefix}carousel-arrow-transition,
-      $carousel-arrow-transition
-    );
-  }
-
-  &__arrow__icon-prev,
-  &__arrow__icon-next {
-    position: absolute;
-    top: var(--#{$prefix}carousel-arrow-top, $carousel-arrow-top);
-    transform: translateY(
-      var(--#{$prefix}carousel-arrow-top, -$carousel-arrow-top)
-    );
-    z-index: 1;
-  }
-
-  &__arrow__icon-prev {
-    left: var(
-      --#{$prefix}carousel-arrow-icon-spaced,
-      $carousel-arrow-icon-spaced
-    );
-  }
-
-  &__arrow__icon-next {
-    right: var(
-      --#{$prefix}carousel-arrow-icon-spaced,
-      $carousel-arrow-icon-spaced
-    );
-  }
-}

package/src/assets/scss/components/_checkbox.scss

@@ -1,171 +0,0 @@
-@use "sass:list";
-
-/* @docs */
-$checkbox-active-background-color: var(--#{$prefix}primary) !default;
-$checkbox-background-color: var(--#{$prefix}primary) !default;
-$checkbox-box-shadow: $control-box-shadow !default;
-$checkbox-border-color: var(--#{$prefix}primary) !default;
-$checkbox-border-style: solid !default;
-$checkbox-border-radius: var(--#{$prefix}base-border-radius) !default;
-$checkbox-border-width: 2px !default;
-$checkbox-checked-box-shadow-length: 0 0 0.5em !default;
-$checkbox-checked-box-shadow-opacity: 0.8 !default;
-$checkbox-checkmark-color: $primary-invert !default;
-$checkbox-disabled-opacity: var(--#{$prefix}base-disabled-opacity) !default;
-$checkbox-label-padding: 0 0 0 0.5em !default;
-$checkbox-margin-sibiling: 0.5em !default;
-$checkbox-size: 1rem !default;
-$checkbox-line-height: 1.5 !default;
-/* @docs */
-
-// checkmark svg calculation
-@function svg_checkmark($color) {
-  $start: '<svg width="100%" height="100%" viewBox="0 0 234 225" 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-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">';
-  $content: '<g transform="matrix(4.16667,0,0,4.16667,0,0)"><g transform="matrix(3.13817,0,0,3.13817,-69.2796,-49.5156)"><path style="fill:#{$color}" d="M22.504,26.219L28.637,32.386L39.494,18.284L37.348,16.379L28,27.725L24.46,24.196L22.504,26.219Z"></path></g></g>';
-  $end: "</svg>";
-
-  @return svg-encode("#{$start}#{$content}#{$end}");
-}
-
-// indeterminate svg calculation
-@function svg_indeterminate($color) {
-  $start: '<svg width="100%" height="100%" viewBox="0 0 417 417" 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.16667,0,0,4.16667,0,0)"><g transform="matrix(6.96176,0,0,20.5682,-118.661,-806.753)"><path style="fill:#{$color}" d="M31.265,41.654C31.265,41.324 30.474,41.057 29.5,41.057L18.953,41.057C17.979,41.057 17.188,41.324 17.188,41.654C17.188,41.984 17.979,42.252 18.953,42.252L29.5,42.252C30.474,42.252 31.265,41.984 31.265,41.654Z"/></g></g>';
-  $end: "</svg>";
-
-  @return svg-encode("#{$start}#{$content}#{$end}");
-}
-
-.o-chk {
-  @include unselectable;
-  display: inline-flex;
-  align-items: center;
-  cursor: pointer;
-  position: relative;
-
-  line-height: var(--#{$prefix}checkbox-line-height, $checkbox-line-height);
-  margin-right: var(
-    --#{$prefix}checkbox-margin-sibiling,
-    $checkbox-margin-sibiling
-  );
-
-  &__input {
-    width: var(--#{$prefix}checkbox-size, $checkbox-size);
-    height: var(--#{$prefix}checkbox-size, $checkbox-size);
-    margin: 0;
-    outline: none;
-    vertical-align: top;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    -webkit-print-color-adjust: exact;
-    print-color-adjust: exact;
-    flex-shrink: 0;
-    cursor: pointer;
-
-    box-shadow: var(--#{$prefix}checkbox-box-shadow, $checkbox-box-shadow);
-    background-color: var(
-      --#{$prefix}checkbox-background-color,
-      $checkbox-background-color
-    );
-    background-position: center;
-    background-size: contain;
-    background-repeat: no-repeat;
-
-    transition: background var(--#{$prefix}transition-duration)
-      var(--#{$prefix}transition-timing);
-
-    border-radius: var(
-      --#{$prefix}checkbox-border-radius,
-      $checkbox-border-radius
-    );
-    border-width: var(
-      --#{$prefix}checkbox-border-width,
-      $checkbox-border-width
-    );
-    border-color: var(
-      --#{$prefix}checkbox-border-color,
-      $checkbox-border-color
-    );
-    border-style: var(
-      --#{$prefix}checkbox-border-style,
-      $checkbox-border-style
-    );
-
-    &--checked {
-      background-color: var(
-        --#{$prefix}checkbox-active-background-color,
-        $checkbox-active-background-color
-      );
-      border-color: var(
-        --#{$prefix}checkbox-active-background-color,
-        $checkbox-active-background-color
-      );
-      background-image: url(svg_checkmark($checkbox-checkmark-color));
-    }
-
-    &--indeterminate {
-      background-color: var(
-        --#{$prefix}checkbox-active-background-color,
-        $checkbox-active-background-color
-      );
-      border-color: var(
-        --#{$prefix}checkbox-active-background-color,
-        $checkbox-active-background-color
-      );
-      background-image: url(svg_indeterminate($checkbox-checkmark-color));
-    }
-  }
-
-  &__label {
-    padding: var(--#{$prefix}checkbox-label-padding, $checkbox-label-padding);
-  }
-
-  &--disabled {
-    opacity: var(
-      --#{$prefix}checkbox-disabled-opacity,
-      $checkbox-disabled-opacity
-    );
-  }
-
-  // size variants
-  @each $name, $value in $sizes {
-    &--#{$name} {
-      font-size: var(--#{$prefix}checkbox-font-size-#{$name}, $value);
-
-      .o-chk__input {
-        width: var(--#{$prefix}checkbox-font-size-#{$name}, $value);
-        height: var(--#{$prefix}checkbox-font-size-#{$name}, $value);
-      }
-    }
-  }
-
-  // color variants
-  @each $name, $pair in $colors {
-    $color: list.nth($pair, 1);
-    $color-invert: list.nth($pair, 2);
-
-    &--#{$name} {
-      --#{$prefix}focus: #{createFocus($color)};
-
-      .o-chk__input {
-        border-color: var(--#{$prefix}variant-#{$name}, $color);
-        background-color: var(--#{$prefix}variant-#{$name}, $color);
-      }
-
-      .o-chk__input--checked {
-        background-image: url(svg_checkmark($color-invert));
-      }
-
-      .o-chk__input--indeterminate {
-        background-image: url(svg_indeterminate($color-invert));
-      }
-    }
-  }
-
-  // focus effect
-  &:focus &__input,
-  &:focus-within &__input {
-    box-shadow: 0 0 0 0.25rem var(--#{$prefix}focus);
-  }
-}

package/src/assets/scss/components/_collapse.scss

@@ -1,15 +0,0 @@
-/* @docs */
-/* @docs */
-
-.o-clps {
-  width: 100%;
-
-  &__trigger {
-    cursor: pointer;
-    display: inline-block;
-  }
-
-  &__content {
-    display: inherit;
-  }
-}