@oruga-ui/theme-oruga 0.0.1

package/src/assets/scss/components/_switch.scss

@@ -0,0 +1,171 @@
+@use "sass:list";
+
+/* @docs */
+$switch-active-background-color: $primary !default;
+$switch-action-background: #f5f5f5 !default;
+$switch-background: $grey-light !default;
+$switch-border-radius: $base-border-radius !default;
+$switch-box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05),
+  0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05) !default;
+$switch-disabled-opacity: $base-disabled-opacity !default;
+$switch-margin-label: 0.5em !default;
+$switch-padding: 0.2em !default;
+$switch-rounded-border-radius: $base-rounded-border-radius !default;
+$switch-width: 2.75 * 1em !default;
+/* @docs */
+
+.o-switch {
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+
+  @include unselectable;
+
+  @each $name, $pair in $colors {
+    $color: list.nth($pair, 1);
+    &--#{$name} {
+      .o-switch__check--checked {
+        @include avariable("background", ("variant-" + #{$name}), $color);
+      }
+    }
+    &--#{$name}-passive {
+      .o-switch__check:not(.o-switch__check--checked) {
+        @include avariable("background", ("variant-" + #{$name}), $color);
+      }
+    }
+  }
+  @each $name, $value in $sizes {
+    &--#{$name} {
+      @include avariable("font-size", ("font-size-" + #{name}), $value);
+    }
+  }
+
+  &__label {
+    @include avariable(
+      "margin-left",
+      "switch-margin-label",
+      $switch-margin-label
+    );
+  }
+
+  &--left {
+    flex-direction: row-reverse;
+
+    .o-switch__label {
+      margin-left: 0;
+
+      @include avariable(
+        "margin-right",
+        "switch-margin-label",
+        $switch-margin-label
+      );
+    }
+  }
+
+  &__check-switch {
+    content: "";
+    display: block;
+
+    @include evariable(
+      "height",
+      "calc(($width - $padding * 2) * 0.5)",
+      eparam("$width", variable("switch-width", $switch-width)),
+      eparam("$padding", variable("switch-padding", $switch-padding))
+    );
+    @include evariable(
+      "width",
+      "calc(($width - $padding * 2) * 0.5)",
+      eparam("$width", variable("switch-width", $switch-width)),
+      eparam("$padding", variable("switch-padding", $switch-padding))
+    );
+    @include avariable(
+      "background",
+      "switch-action-background",
+      $switch-action-background
+    );
+    @include avariable("box-shadow", "switch-box-shadow", $switch-box-shadow);
+    transition-property: transform;
+
+    @include avariable(
+      "transition-duration",
+      "transition-duration",
+      $speed-slow
+    );
+    @include avariable(
+      "transition-timing-function",
+      "transition-timing",
+      $easing
+    );
+    will-change: transform;
+    transform-origin: left;
+  }
+
+  &__check {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+
+    @include avariable("width", "switch-width", $switch-width);
+    @include evariable(
+      "height",
+      "calc($width * 0.5 + $padding)",
+      eparam("$width", variable("switch-width", $switch-width)),
+      eparam("$padding", variable("switch-padding", $switch-padding))
+    );
+    @include avariable("padding", "switch-padding", $switch-padding);
+    @include avariable("background", "switch-background", $switch-background);
+    @include avariable(
+      "border-radius",
+      "switch-border-radius",
+      $switch-border-radius
+    );
+    transition-property: background;
+
+    @include avariable(
+      "transition-duration",
+      "transition-duration",
+      $speed-slow
+    );
+    @include avariable(
+      "transition-timing-function",
+      "transition-timing",
+      $easing
+    );
+
+    &--checked {
+      @include avariable(
+        "background",
+        "switch-active-background-color",
+        $switch-active-background-color
+      );
+
+      .o-switch__check-switch {
+        transform: translate3d(100%, 0, 0);
+      }
+    }
+  }
+
+  &__input {
+    position: absolute;
+    left: 0;
+    opacity: 0;
+    z-index: -1;
+  }
+
+  &--rounded {
+    @include avariable(
+      "border-radius",
+      "switch-rounded-border-radius",
+      $switch-rounded-border-radius
+    );
+  }
+
+  &--disabled {
+    @include avariable(
+      "opacity",
+      "switch-disabled-opacity",
+      $switch-disabled-opacity
+    );
+  }
+}

package/src/assets/scss/components/_table.scss

@@ -0,0 +1,481 @@
+@use "sass:list";
+
+/* @docs */
+$table-background-color: #fff !default;
+$table-background: #f5f5f5 !default;
+$table-boder: 1px solid transparent !default;
+$table-border-radius: $base-border-radius !default;
+$table-card-box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default;
+$table-card-cell-font-weight: 600 !default;
+$table-card-cell-padding: 0 0.5em 0 0 !default;
+$table-card-cell-text-align: left !default;
+$table-card-detail-margin: -1rem 0 0 0;
+$table-card-margin: 0 0 1rem 0;
+$table-color: black !default;
+$table-current-sort-border-color: $grey !default;
+$table-current-sort-font-weight: 700 !default;
+$table-current-sort-hover-border-color: $grey !default;
+$table-detail-background: #fafafa !default;
+$table-detail-box-shadow: inset 0 1px 3px $grey !default;
+$table-detail-chevron-color: $primary !default;
+$table-detail-chevron-width: 40px !default;
+$table-detail-padding: 1rem !default;
+$table-focus-border-color: $primary !default;
+$table-focus-box-shadow: 0 0 0 0.125em rgba($primary, 0.25) !default;
+$table-hoverable-background-color: #fafafa !default;
+$table-narrow-padding: 0.25em 0.5em !default;
+$table-row-active-background-color: $primary !default;
+$table-row-active-color: $primary-invert !default;
+$table-sticky-header-height: 300px !default;
+$table-sticky-zindex: 1 !default;
+$table-striped-background-color: #fafafa !default;
+$table-td-border: 1px solid $grey-lighter !default;
+$table-td-padding: 0.5em 0.75em !default;
+$table-th-border: 2px solid $grey-lighter !default;
+$table-th-checkbox-width: 40px !default;
+$table-th-color: #363636 !default;
+$table-th-detail-width: 14px !default;
+$table-th-font-weight: 600 !default;
+$table-th-padding: 0.5em 0.75em !default;
+/* @docs */
+
+$SUM_EXPRESSION: "calc($param + $factor)";
+
+.o-table {
+  display: table;
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+
+  @include avariable("border", "table-boder", $table-boder);
+  @include avariable(
+    "border-radius",
+    "table-border-radius",
+    $table-border-radius
+  );
+  @include avariable(
+    "background-color",
+    "table-background-color",
+    $table-background-color
+  );
+  @include avariable("color", "table-color", $table-color);
+
+  &__root {
+    position: relative;
+  }
+
+  &__wrapper {
+    transition: opacity $speed $easing;
+    position: relative;
+
+    &--sticky-header {
+      @include avariable(
+        "height",
+        "table-sticky-header-height",
+        $table-sticky-header-height
+      );
+      overflow-y: auto;
+
+      th {
+        position: -webkit-sticky;
+        position: sticky;
+        left: 0;
+        top: 0;
+
+        @include avariable(
+          "background",
+          "table-background-color",
+          $table-background-color
+        );
+      }
+    }
+
+    &--scrollable {
+      -webkit-overflow-scrolling: touch;
+      overflow-x: auto;
+      max-width: 100%;
+    }
+
+    &--mobile {
+      overflow-x: auto;
+
+      .o-table__mobile-sort {
+        display: block;
+      }
+      // cards
+      .o-table {
+        background-color: transparent;
+      }
+
+      thead {
+        tr {
+          box-shadow: none;
+          border-width: 0;
+
+          th {
+            display: none;
+          }
+
+          .o-table-th-checkbox {
+            display: block;
+            width: 100%;
+            text-align: right;
+            border: 0;
+          }
+        }
+      }
+
+      tfoot {
+        th {
+          border: 0;
+          display: inherit;
+        }
+      }
+
+      tr {
+        @include avariable(
+          "box-shadow",
+          "table-card-box-shadow",
+          $table-card-box-shadow
+        );
+        max-width: 100%;
+        position: relative;
+        display: block;
+
+        td {
+          border: 0;
+          display: inherit;
+
+          &:last-child {
+            border-bottom: 0;
+          }
+        }
+
+        &:not(:last-child) {
+          @include avariable("margin", "table-card-margin", $table-card-margin);
+        }
+
+        &:not(.o-table__tr--selected) {
+          background: inherit;
+          background: $table-background-color;
+
+          &:hover {
+            background-color: inherit;
+            background-color: $table-background-color;
+          }
+        }
+
+        &.o-table--detailed {
+          @include avariable(
+            "margin",
+            "table-card-detail-margin",
+            $table-card-detail-margin
+          );
+        }
+      }
+
+      tr:not(.o-table--detailed):not(.o-table--empty):not(.o-table__footer) {
+        td {
+          display: flex;
+          width: auto;
+          justify-content: space-between;
+          text-align: right;
+
+          @include avariable(
+            "border-bottom",
+            "table-background",
+            ($table-background 1px solid)
+          );
+
+          &:before {
+            content: attr(data-label);
+
+            @include avariable(
+              "font-weight",
+              "table-card-cell-font-weight",
+              $table-card-cell-font-weight
+            );
+            @include avariable(
+              "padding-right",
+              "table-card-cell-padding",
+              $table-card-cell-padding
+            );
+            @include avariable(
+              "text-align",
+              "table-card-cell-text-align",
+              $table-card-cell-text-align
+            );
+          }
+        }
+      }
+    }
+  }
+
+  &__mobile-sort {
+    display: none;
+  }
+
+  &__th {
+    vertical-align: top;
+    text-align: left;
+    position: relative;
+
+    @include avariable(
+      "font-weight",
+      "table-th-font-weight",
+      $table-th-font-weight
+    );
+    @include avariable("color", "table-th-color", $table-th-color);
+    @include avariable("border-bottom", "table-th-border", $table-th-border);
+    @include avariable("padding", "table-th-padding", $table-th-padding);
+
+    &--centered {
+      text-align: center;
+    }
+
+    &--right {
+      text-align: right;
+    }
+
+    &__sort-icon {
+      position: absolute;
+      right: 0;
+    }
+
+    &-checkbox {
+      @include avariable(
+        "width",
+        "table-th-checkbox-width",
+        $table-th-checkbox-width
+      );
+    }
+
+    &-current-sort {
+      @include avariable(
+        "border-color",
+        "table-current-sort-border-color",
+        $table-current-sort-border-color
+      );
+      @include avariable(
+        "font-weight",
+        "table-current-sort-font-weight",
+        $table-current-sort-font-weight
+      );
+    }
+
+    &--sortable {
+      cursor: pointer;
+
+      &:hover {
+        @include avariable(
+          "border-color",
+          "table-current-sort-hover-border-color",
+          $table-current-sort-hover-border-color
+        );
+      }
+    }
+
+    &--sticky {
+      position: -webkit-sticky;
+      position: sticky;
+      left: 0;
+      top: 0;
+
+      @include evariable(
+        "z-index",
+        $SUM_EXPRESSION,
+        eparam("$param", variable("table-sticky-zindex", $table-sticky-zindex)),
+        eparam("$factor", 2)
+      );
+      @include avariable(
+        "background",
+        "table-background-color",
+        $table-background-color
+      );
+    }
+
+    &--unselectable {
+      @include unselectable;
+    }
+
+    &--detailed {
+      @include avariable(
+        "width",
+        "table-th-detail-width",
+        $table-th-detail-width
+      );
+    }
+  }
+
+  &__td {
+    vertical-align: top;
+    text-align: left;
+
+    @include avariable("border-bottom", "table-td-border", $table-td-border);
+    @include avariable("padding", "table-td-padding", $table-td-padding);
+
+    &--sticky {
+      position: -webkit-sticky;
+      position: sticky;
+      left: 0;
+
+      @include avariable(
+        "z-index",
+        "table-sticky-zindex",
+        $table-sticky-zindex
+      );
+      @include avariable(
+        "background",
+        "table-background-color",
+        $table-background-color
+      );
+    }
+
+    &--right {
+      text-align: right;
+    }
+
+    &--centered {
+      text-align: center;
+    }
+
+    &-chevron {
+      vertical-align: middle;
+
+      @include avariable(
+        "width",
+        "table-detail-chevron-width",
+        $table-detail-chevron-width
+      );
+      @include avariable(
+        "color",
+        "table-detail-chevron-color",
+        $table-detail-chevron-color
+      );
+    }
+  }
+
+  &:focus {
+    @include avariable(
+      "border-color",
+      "table-focus-border-color",
+      $table-focus-border-color
+    );
+    @include avariable(
+      "box-shadow",
+      "table-focus-box-shadow",
+      $table-focus-box-shadow
+    );
+  }
+
+  &--bordered {
+    tr:last-child {
+      td,
+      th {
+        @include avariable("border", "table-td-border", $table-td-border);
+      }
+    }
+
+    td,
+    th {
+      @include avariable("border", "table-td-border", $table-td-border);
+    }
+  }
+
+  &--striped {
+    tbody tr:not(.o-table__tr--selected):nth-child(2n) {
+      @include avariable(
+        "background-color",
+        "table-striped-background-color",
+        $table-striped-background-color
+      );
+    }
+  }
+
+  &--narrowed {
+    td,
+    th {
+      @include avariable(
+        "padding",
+        "table-narrow-padding",
+        $table-narrow-padding
+      );
+    }
+  }
+
+  &--hoverable {
+    tbody tr:not(.o-table__tr--selected):hover {
+      @include avariable(
+        "background-color",
+        "table-hoverable-background-color",
+        $table-hoverable-background-color
+      );
+    }
+  }
+
+  &__detail {
+    @include avariable(
+      "box-shadow",
+      "table-detail-box-shadow",
+      $table-detail-box-shadow
+    );
+    @include avariable(
+      "background",
+      "table-detail-background",
+      $table-detail-background
+    );
+
+    td {
+      @include avariable(
+        "padding",
+        "table-detail-padding",
+        $table-detail-padding
+      );
+    }
+  }
+
+  &__tr--selected {
+    background-color: $table-row-active-background-color;
+    color: $table-row-active-color;
+
+    @each $name, $pair in $colors {
+      $color: list.nth($pair, 1);
+      $color-invert: list.nth($pair, 2);
+      &-#{$name} {
+        background-color: $color;
+        color: $color-invert;
+      }
+    }
+  }
+
+  &__pagination {
+    align-items: center;
+    justify-content: space-between;
+    display: flex;
+    // left
+    > div:first-child {
+      align-items: center;
+      justify-content: flex-start;
+    }
+    // right
+    > div:last-child {
+      align-items: center;
+      justify-content: flex-end;
+
+      > div {
+        align-items: center;
+        display: flex;
+        flex-basis: auto;
+        flex-grow: 0;
+        flex-shrink: 0;
+        justify-content: center;
+      }
+    }
+    // left - right
+    > div {
+      flex-basis: auto;
+      flex-grow: 0;
+      flex-shrink: 0;
+    }
+  }
+}