@oruga-ui/theme-oruga 0.0.1

package/dist/scss/components/_pagination.scss

@@ -0,0 +1,256 @@
+/* @docs */
+$pagination-disabled-opacity: $base-disabled-opacity !default;
+$pagination-ellipsis-color: $grey-light !default;
+$pagination-link-border-color: $grey-lighter !default;
+$pagination-link-border-radius: $base-border-radius !default;
+$pagination-link-border: 1px solid transparent !default;
+$pagination-link-color: #363636 !default;
+$pagination-link-current-background-color: $primary !default;
+$pagination-link-current-border-color: $primary !default; // !!!
+$pagination-link-current-color: #fff !default;
+$pagination-link-height: 2.25em !default;
+$pagination-link-hover-border-color: $grey-light !default;
+$pagination-link-line-height: $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: $base-rounded-border-radius !default;
+/* @docs */
+
+.o-pag {
+  align-items: center;
+  display: flex;
+  text-align: center;
+  justify-content: space-between;
+
+  @include avariable("font-size", "base-font-size", $base-font-size);
+  @include avariable("margin", "pagination-margin", $pagination-margin);
+
+  @each $name, $value in $sizes {
+    &--#{$name} {
+      @include avariable(
+        "font-size",
+        ("pagination-font-size-" + #{$name}),
+        $value
+      );
+    }
+  }
+
+  &__link {
+    -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;
+
+    @include unselectable;
+    @include avariable(
+      "line-height",
+      "pagination-link-line-height",
+      $pagination-link-line-height
+    );
+    @include avariable(
+      "border",
+      "pagination-link-border",
+      $pagination-link-border
+    );
+    @include avariable(
+      "border-radius",
+      "pagination-link-border-radius",
+      $pagination-link-border-radius
+    );
+    @include avariable(
+      "border-color",
+      "pagination-link-border-color",
+      $pagination-link-border-color
+    );
+    @include avariable(
+      "color",
+      "pagination-link-color",
+      $pagination-link-color
+    );
+    @include avariable(
+      "min-width",
+      "pagination-link-min-width",
+      $pagination-link-min-width
+    );
+    @include avariable(
+      "height",
+      "pagination-link-height",
+      $pagination-link-height
+    );
+    @include avariable(
+      "padding",
+      "pagination-link-padding",
+      $pagination-link-padding
+    );
+    @include avariable(
+      "margin",
+      "pagination-link-margin",
+      $pagination-link-margin
+    );
+
+    &:hover {
+      text-decoration: none;
+
+      @include avariable(
+        "border-color",
+        "pagination-link-hover-border-color",
+        $pagination-link-hover-border-color
+      );
+    }
+
+    &--rounded {
+      @include avariable(
+        "border-radius",
+        "pagination-rounded-border-radius",
+        $pagination-rounded-border-radius
+      );
+    }
+
+    &--disabled {
+      pointer-events: none;
+
+      @include avariable(
+        "opacity",
+        "pagination-disabled-opacity",
+        $pagination-disabled-opacity
+      );
+    }
+
+    &--current {
+      pointer-events: none;
+
+      @include avariable(
+        "background-color",
+        "pagination-link-current-background-color",
+        $pagination-link-current-background-color
+      );
+      @include avariable(
+        "border-color",
+        "pagination-link-current-border-color",
+        $pagination-link-current-border-color
+      );
+      @include avariable(
+        "color",
+        "pagination-link-current-color",
+        $pagination-link-current-color
+      );
+    }
+  }
+
+  &__ellipsis {
+    justify-content: center;
+    text-align: center;
+    pointer-events: none;
+
+    @include avariable(
+      "margin",
+      "pagination-link-margin",
+      $pagination-link-margin
+    );
+    @include avariable(
+      "color",
+      "pagination-ellipsis-color",
+      $pagination-ellipsis-color
+    );
+  }
+
+  &--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;
+    }
+  }
+
+  &__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;
+  }
+
+  &--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/dist/scss/components/_radio.scss

@@ -0,0 +1,121 @@
+@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-disabled-opacity: $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 */
+
+$HALF_MARGIN_EXPRESSION: "calc($margin * 0.5)";
+
+@function svg_radio_fill($color, $background-color: "transparent") {
+  $start: '<svg width="100%" height="100%" viewBox="0 0 100 100" 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.38544,0,0,4.38544,-94.4336,-58.9876)"><path d="M32.935,13.679C39.102,13.679 44.108,18.685 44.108,24.852C44.108,31.019 39.102,36.025 32.935,36.025C26.768,36.025 21.761,31.019 21.761,24.852C21.761,18.685 26.768,13.679 32.935,13.679ZM32.798,17.05C37.105,17.05 40.601,20.546 40.601,24.852C40.601,29.158 37.105,32.655 32.798,32.655C28.492,32.655 24.996,29.158 24.996,24.852C24.996,20.546 28.492,17.05 32.798,17.05Z" style="fill:#{$color};"/><circle cx="32.84" cy="24.8" r="7.9" style="fill:#{$background-color};"/></g>';
+  $end: "</svg>";
+
+  @return svg-encode("#{$start}#{$content}#{$end}");
+}
+@function svg_radio_empty($color) {
+  $start: '<svg width="100%" height="100%" viewBox="0 0 100 100" 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(10.1032,0,0,10.1032,-255.068,-313.298)"><circle cx="30.195" cy="35.959" r="4.85" style="fill:#{$color};"/></g>';
+  $end: "</svg>";
+
+  @return svg-encode("#{$start}#{$content}#{$end}");
+}
+
+.o-radio {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+
+  @include unselectable;
+  @include avariable("line-height", "radio-line-height", $radio-line-height);
+  @include avariable(
+    "margin-right",
+    "radio-margin-sibiling",
+    $radio-margin-sibiling
+  );
+
+  &__check {
+    @include avariable("width", "radio-size", $radio-size);
+    @include avariable("height", "radio-size", $radio-size);
+    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;
+    border-radius: 50%;
+    cursor: pointer;
+    background-repeat: no-repeat;
+    transition-property: background;
+
+    @include avariable(
+      "transition-duration",
+      "transition-duration",
+      $speed-slow
+    );
+    @include avariable(
+      "transition-timing-function",
+      "transition-timing",
+      $easing
+    );
+
+    background-image: url(svg_radio_empty(
+      variable("radio-active-background-color", $radio-active-background-color)
+    ));
+
+    &--checked {
+      background-image: url(svg_radio_fill(
+        variable(
+          "radio-active-background-color",
+          $radio-active-background-color
+        )
+      ));
+    }
+  }
+
+  &__label {
+    @include avariable("padding", "radio-label-padding", $radio-label-padding);
+  }
+
+  &--disabled {
+    @include avariable(
+      "opacity",
+      "radio-disabled-opacity",
+      $radio-disabled-opacity
+    );
+  }
+
+  @each $name, $value in $sizes {
+    &--#{$name} {
+      @include avariable("font-size", ("radio-font-size-" + #{$name}), $value);
+    }
+  }
+  @each $name, $pair in $colors {
+    $color: list.nth($pair, 1);
+    $color-invert: list.nth($pair, 2);
+    &--#{$name} {
+      .o-radio__check {
+        background-image: url(svg_radio_empty(
+          variable(("variant-" + #{$name}), $color)
+        ));
+      }
+
+      .o-radio__check--checked {
+        background-image: url(svg_radio_fill(
+          variable(("variant-" + #{$name}), $color),
+          variable(("variant-invert-" + #{$name}), $color-invert)
+        ));
+      }
+    }
+  }
+}

package/dist/scss/components/_select.scss

@@ -0,0 +1,168 @@
+@use "sass:list";
+
+/* @docs */
+$select-background-color: #fff !default;
+$select-border-color: $grey-lighter !default;
+$select-border-width: 1px !default;
+$select-border-style: solid !default;
+$select-border-radius: $base-border-radius !default;
+$select-rounded-border-radius: $base-rounded-border-radius !default;
+$select-box-shadow: none !default;
+$select-color: #363636 !default;
+$select-icon-zindex: 4 !default;
+$select-height: $control-height !default;
+$select-arrow-size: 1rem !default;
+$select-line-height: $base-line-height !default;
+$select-margin: 0 !default;
+$select-max-width: 100% !default;
+$select-width: 100% !default;
+$select-placeholder-opacity: $base-disabled-opacity !default;
+$select-padding: $control-padding-vertical $control-padding-horizontal !default;
+/* @docs */
+
+@function svg_arrow($color) {
+  $start: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:serif="http://www.serif.com/" width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">';
+  $content: '<g transform="matrix(5.70052,0,0,5.70052,-1329.79,-547.054)"><path d="M233.451,101.749L235.617,99.422L242.013,105.565L248.463,99.422L250.642,101.749L242.013,110.052L233.451,101.749Z" style="fill:#{$color};stroke:white;stroke-width:0.18px;"/></g>';
+  $end: "</svg>";
+
+  @return svg-encode("#{$start}#{$content}#{$end}");
+}
+
+.o-ctrl-sel {
+  display: inline-flex;
+  position: relative;
+
+  &--expanded {
+    width: 100%;
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
+}
+
+.o-sel {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  display: inline-block;
+  position: relative;
+  vertical-align: top;
+  cursor: pointer;
+  justify-content: flex-start;
+  align-items: center;
+
+  @include avariable("font-size", "base-font-size", $base-font-size);
+  @include avariable("max-width", "select-max-width", $select-max-width);
+  @include avariable("width", "select-width", $select-width);
+  @include avariable(
+    "background-color",
+    "select-background-color",
+    $select-background-color
+  );
+  @include avariable(
+    "border-color",
+    "select-border-color",
+    $select-border-color
+  );
+  @include avariable(
+    "border-width",
+    "select-border-width",
+    $select-border-width
+  );
+  @include avariable(
+    "border-style",
+    "select-border-style",
+    $select-border-style
+  );
+  @include avariable(
+    "border-radius",
+    "select-border-radius",
+    $select-border-radius
+  );
+  @include avariable("color", "select-color", $select-color);
+  @include avariable("margin", "select-margin", $select-margin);
+  @include avariable("box-shadow", "select-box-shadow", $select-box-shadow);
+  @include avariable("line-height", "select-line-height", $select-line-height);
+  @include avariable("padding", "select-padding", $select-padding);
+  @include avariable("height", "select-height", $select-height);
+
+  &-arrow {
+    background-image: url(svg_arrow(
+      variable("select-arrow-color", $select-color)
+    ));
+    background-repeat: no-repeat;
+
+    @include avariable(
+      "background-size",
+      "select-arrow-size",
+      $select-arrow-size
+    );
+    @include evariable(
+      "background-position",
+      "calc(100% - $param * 0.5) center",
+      eparam("$param", variable("select-arrow-size", $select-arrow-size))
+    );
+    @include evariable(
+      "padding-right",
+      "calc($param * 2)",
+      eparam("$param", variable("select-arrow-size", $select-arrow-size))
+    );
+  }
+
+  &-iconspace-left {
+    @include avariable("padding-left", "select-height", $select-height);
+  }
+
+  &-iconspace-right {
+    @include avariable("padding-right", "select-height", $select-height);
+  }
+
+  @each $name, $value in $sizes {
+    &--#{$name} {
+      @include avariable("font-size", ("select-font-size-" + #{$name}), $value);
+    }
+  }
+  @each $name, $pair in $colors {
+    $color: list.nth($pair, 1);
+    &--#{$name} {
+      @include avariable("border-color", ("variant-" + #{$name}), $color);
+    }
+  }
+
+  &--rounded {
+    @include avariable(
+      "border-radius",
+      "select-rounded-border-radius",
+      $select-rounded-border-radius
+    );
+  }
+
+  &--multiple {
+    height: auto;
+    padding: 0;
+  }
+
+  &--placeholder {
+    @include avariable(
+      "opacity",
+      "select-placeholder-opacity",
+      $select-placeholder-opacity
+    );
+  }
+
+  &__icon-left,
+  &__icon-right {
+    position: absolute;
+    top: 0;
+    height: 100%;
+
+    @include avariable("width", "select-height", $select-height);
+    @include avariable("z-index", "select-icon-zindex", $select-icon-zindex);
+  }
+
+  &__icon-right {
+    right: 0;
+  }
+
+  &__icon-left {
+    left: 0;
+  }
+}

package/dist/scss/components/_sidebar.scss

@@ -0,0 +1,112 @@
+@use "sass:list";
+
+/* @docs */
+$sidebar-overlay: hsla(0, 0%, 4%, 0.86) !default;
+$sidebar-box-shadow: 5px 0px 13px 3px rgba($black, 0.1) !default;
+$sidebar-content-background-color: $grey-lighter !default;
+$sidebar-mobile-width: 80px !default;
+$sidebar-width: 260px !default;
+$sidebar-zindex: 38 !default;
+/* @docs */
+
+.o-side {
+  &__content {
+    @include avariable(
+      "background-color",
+      "sidebar-content-background-color",
+      $sidebar-content-background-color
+    );
+    @include avariable("box-shadow", "sidebar-box-shadow", $sidebar-box-shadow);
+    @include avariable("width", "sidebar-width", $sidebar-width);
+    @include evariable(
+      "z-index",
+      "calc($z-index + 1)",
+      eparam("$z-index", variable("sidebar-zindex", $sidebar-zindex))
+    );
+
+    @each $name, $pair in $colors {
+      $color: list.nth($pair, 1);
+      &--#{$name} {
+        @include avariable("background-color", ("variant-" + #{$name}), $color);
+      }
+    }
+
+    &--fixed {
+      position: fixed;
+      left: 0;
+      top: 0;
+    }
+
+    &--absolute {
+      position: absolute;
+      left: 0;
+      top: 0;
+    }
+
+    &--right {
+      left: auto;
+      right: 0;
+    }
+
+    &--mini {
+      @include avariable(
+        "width",
+        "sidebar-mobile-width",
+        $sidebar-mobile-width
+      );
+    }
+
+    &--mini-expand {
+      &:hover {
+        transition: width;
+
+        @include avariable(
+          "transition-duration",
+          "transition-duration",
+          $speed-slow
+        );
+        @include avariable(
+          "transition-timing-function",
+          "transition-timing",
+          $easing
+        );
+        @include avariable("width", "sidebar-width", $sidebar-width);
+      }
+    }
+
+    &--static {
+      position: static;
+    }
+
+    &--absolute,
+    &--static {
+      transition: width $speed-slow $easing;
+    }
+
+    &--fullwidth {
+      width: 100%;
+      max-width: 100%;
+    }
+
+    &--fullheight {
+      height: 100%;
+      max-height: 100%;
+      overflow: hidden;
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+      align-content: stretch;
+    }
+  }
+
+  &__overlay {
+    bottom: 0;
+    left: 0;
+    right: 0;
+    top: 0;
+    position: fixed;
+
+    @include avariable("background", "sidebar-overlay", $sidebar-overlay);
+    @include avariable("z-index", "sidebar-zindex", $sidebar-zindex);
+  }
+}