@oruga-ui/theme-oruga 0.0.1

package/dist/scss/components/_carousel.scss

@@ -0,0 +1,256 @@
+/* @docs */
+$carousel-arrow-background: $white !default;
+$carousel-arrow-color: $primary !default;
+$carousel-arrow-icon-spaced: 1.5rem !default;
+$carousel-arrow-top: 50% !default;
+$carousel-arrow-size: 1.5rem !default;
+$carousel-arrow-border-radius: $base-rounded-border-radius !default;
+$carousel-arrow-border: 1px solid $carousel-arrow-background !default;
+$carousel-arrow-transition: $speed-slow $easing !default;
+$carousel-indicators-background: rgba($white, 0.5) !default;
+$carousel-indicators-padding: 0.5rem !default;
+$carousel-indicator-margin: 0 0.5rem 0 0 !default;
+$carousel-indicator-color: $primary !default;
+$carousel-indicator-background: $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: $speed-slow $easing !default;
+$carousel-indicator-size: 10px !default;
+$carousel-indicator-dots-border-radius: $base-border-radius !default;
+$carousel-indicator-lines-height: 5px !default;
+$carousel-indicator-lines-width: 25px !default;
+$carousel-items-transition: all $speed-slower ease-out 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;
+
+    @include avariable(
+      "background-color",
+      "carousel-overlay-background",
+      $carousel-overlay-background
+    );
+    @include avariable(
+      "z-index",
+      "carousel-overlay-zindex",
+      $carousel-overlay-zindex
+    );
+  }
+
+  &__scene {
+    position: relative;
+    width: 100%;
+  }
+
+  &__items {
+    display: flex;
+    width: 100%;
+
+    &:not(&--dragging) {
+      @include avariable(
+        "transition",
+        "carousel-items-transition",
+        $carousel-items-transition
+      );
+    }
+  }
+
+  &__item {
+    @include avariable("border", "carousel-item-border", $carousel-item-border);
+    flex-shrink: 0;
+  }
+
+  &__indicators {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    @include avariable(
+      "padding",
+      "carousel-indicators-padding",
+      $carousel-indicators-padding
+    );
+    @include avariable(
+      "background",
+      "carousel-indicators-background",
+      $carousel-indicators-background
+    );
+
+    &--inside {
+      position: absolute;
+
+      &--bottom {
+        bottom: 0;
+      }
+
+      &--top {
+        top: 0;
+      }
+    }
+  }
+
+  &__indicator {
+    &:not(:last-child) {
+      @include avariable(
+        "margin",
+        "carousel-indicator-margin",
+        $carousel-indicator-margin
+      );
+    }
+
+    &__item {
+      display: block;
+
+      @include avariable(
+        "border",
+        "carousel-indicator-border",
+        $carousel-indicator-border
+      );
+      @include avariable(
+        "background",
+        "carousel-indicator-background",
+        $carousel-indicator-background
+      );
+      @include avariable(
+        "transition",
+        "carousel-indicator-transition",
+        $carousel-indicator-transition
+      );
+
+      &--active,
+      :hover {
+        @include avariable(
+          "background",
+          "carousel-indicator-active-background",
+          $carousel-indicator-active-background
+        );
+        @include avariable(
+          "border",
+          "carousel-indicator-active-border",
+          $carousel-indicator-active-border
+        );
+      }
+
+      &--boxes {
+        @include avariable(
+          "width",
+          "carousel-indicator-size",
+          $carousel-indicator-size
+        );
+        @include avariable(
+          "height",
+          "carousel-indicator-size",
+          $carousel-indicator-size
+        );
+      }
+
+      &--dots {
+        @include avariable(
+          "border-radius",
+          "carousel-indicator-dots-border-radius",
+          $carousel-indicator-dots-border-radius
+        );
+        @include avariable(
+          "width",
+          "carousel-indicator-size",
+          $carousel-indicator-size
+        );
+        @include avariable(
+          "height",
+          "carousel-indicator-size",
+          $carousel-indicator-size
+        );
+      }
+
+      &---lines {
+        @include avariable(
+          "width",
+          "carousel-indicator-lines-height",
+          $carousel-indicator-lines-height
+        );
+        @include avariable(
+          "height",
+          "carousel-indicator-lines-width",
+          $carousel-indicator-lines-width
+        );
+      }
+    }
+  }
+
+  &__arrow__icon {
+    cursor: pointer;
+
+    @include avariable(
+      "background",
+      "carousel-arrow-background",
+      $carousel-arrow-background
+    );
+    @include avariable("color", "carousel-arrow-color", $carousel-arrow-color);
+    @include avariable("width", "carousel-arrow-size", $carousel-arrow-size);
+    @include avariable("height", "carousel-arrow-size", $carousel-arrow-size);
+    @include avariable(
+      "border-radius",
+      "carousel-arrow-border-radius",
+      $carousel-arrow-border-radius
+    );
+    @include avariable(
+      "border",
+      "carousel-arrow-border",
+      $carousel-arrow-border
+    );
+    @include avariable(
+      "transition",
+      "carousel-arrow-transition",
+      $carousel-arrow-transition
+    );
+  }
+
+  &__arrow__icon-prev,
+  &__arrow__icon-next {
+    position: absolute;
+
+    @include avariable("top", "carousel-arrow-top", $carousel-arrow-top);
+    @include evariable(
+      "transform",
+      "translateY($length)",
+      eparam("$length", variable("carousel-arrow-top", -$carousel-arrow-top))
+    );
+    z-index: 1;
+  }
+
+  &__arrow__icon-prev {
+    @include avariable(
+      "left",
+      "carousel-arrow-icon-spaced",
+      $carousel-arrow-icon-spaced
+    );
+  }
+
+  &__arrow__icon-next {
+    @include avariable(
+      "right",
+      "carousel-arrow-icon-spaced",
+      $carousel-arrow-icon-spaced
+    );
+  }
+}

package/dist/scss/components/_checkbox.scss

@@ -0,0 +1,183 @@
+@use "sass:list";
+
+/* @docs */
+$checkbox-active-background-color: $primary !default;
+$checkbox-background-color: $primary !default;
+$checkbox-border-color: $primary !default;
+$checkbox-border-radius: $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: $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 */
+
+@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}");
+}
+@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 {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+
+  @include unselectable;
+  @include avariable(
+    "line-height",
+    "checkbox-line-height",
+    $checkbox-line-height
+  );
+  @include avariable(
+    "margin-right",
+    "checkbox-margin-sibiling",
+    $checkbox-margin-sibiling
+  );
+
+  &__check {
+    @include avariable("width", "checkbox-size", $checkbox-size);
+    @include avariable("height", "checkbox-size", $checkbox-size);
+    outline: none;
+    margin: 0;
+    vertical-align: top;
+    background-position: center;
+    background-size: contain;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+    flex-shrink: 0;
+    cursor: pointer;
+    background-repeat: no-repeat;
+
+    @include avariable(
+      "background-color",
+      "checkbox-background-color",
+      $checkbox-background-color
+    );
+    @include avariable(
+      "border-radius",
+      "checkbox-border-radius",
+      $checkbox-border-radius
+    );
+    @include avariable(
+      "border-width",
+      "checkbox-border-width",
+      $checkbox-border-width
+    );
+    @include avariable(
+      "border-color",
+      "checkbox-border-color",
+      $checkbox-border-color
+    );
+    border-style: solid;
+    transition-property: background;
+
+    @include avariable(
+      "transition-duration",
+      "transition-duration",
+      $speed-slow
+    );
+    @include avariable(
+      "transition-timing-function",
+      "transition-timing",
+      $easing
+    );
+
+    &--checked {
+      @include avariable(
+        "background-color",
+        "checkbox-active-background-color",
+        $checkbox-active-background-color
+      );
+      @include avariable(
+        "border-color",
+        "checkbox-active-background-color",
+        $checkbox-active-background-color
+      );
+      background-image: url(svg_checkmark(
+        variable("checkbox-checkmark-color", $checkbox-checkmark-color)
+      ));
+    }
+
+    &--indeterminate {
+      @include avariable(
+        "background-color",
+        "checkbox-active-background-color",
+        $checkbox-active-background-color
+      );
+      @include avariable(
+        "border-color",
+        "checkbox-active-background-color",
+        $checkbox-active-background-color
+      );
+      background-image: url(svg_indeterminate(
+        variable("checkbox-checkmark-color", $checkbox-checkmark-color)
+      ));
+    }
+  }
+
+  &__label {
+    @include avariable(
+      "padding",
+      "checkbox-label-padding",
+      $checkbox-label-padding
+    );
+  }
+
+  &--disabled {
+    @include avariable(
+      "opacity",
+      "checkbox-disabled-opacity",
+      $checkbox-disabled-opacity
+    );
+  }
+
+  @each $name, $value in $sizes {
+    &--#{$name} {
+      @include avariable(
+        "font-size",
+        ("checkbox-font-size-" + #{$name}),
+        $value
+      );
+    }
+  }
+  @each $name, $pair in $colors {
+    $color: list.nth($pair, 1);
+    $color-invert: list.nth($pair, 2);
+    &--#{$name} {
+      .o-chk__check {
+        @include avariable("border-color", ("variant-" + #{$name}), $color);
+        @include avariable("background-color", ("variant-" + #{$name}), $color);
+      }
+
+      .o-chk__check--checked {
+        background-image: url(svg_checkmark(
+          variable(("variant-invert-" + #{$name}), $color-invert)
+        ));
+      }
+
+      .o-chk__check--indeterminate {
+        background-image: url(svg_indeterminate(
+          variable(("variant-invert-" + #{$name}), $color-invert)
+        ));
+      }
+    }
+  }
+}

package/dist/scss/components/_collapse.scss

@@ -0,0 +1,12 @@
+/* @docs */
+/* @docs */
+
+.o-clps {
+  &__trigger {
+    cursor: pointer;
+  }
+
+  &__content {
+    display: inherit;
+  }
+}