@oruga-ui/theme-oruga 0.0.1

package/src/assets/scss/components/_tabs.scss

@@ -0,0 +1,385 @@
+/* @docs */
+$tabs-disabled-opacity: $base-disabled-opacity !default;
+$tabs-font-size: $base-font-size !default;
+$tabs-icon-margin: 0.5em !default;
+$tabs-content-padding: 1rem !default;
+$tabs-margin-bottom: 1.5rem !default;
+$tabs-border-bottom-color: $grey-lighter !default;
+$tabs-border-bottom-style: solid !default;
+$tabs-border-bottom-width: 1px !default;
+$tabs-link-color: hsl(0, 0%, 29%) !default;
+$tabs-link-active-border-bottom-color: $primary !default;
+$tabs-link-active-color: $primary !default;
+$tabs-link-line-height: $base-line-height !default;
+$tabs-link-padding: 0.5em 1em !default;
+$tabs-boxed-link-radius: $base-border-radius !default;
+$tabs-boxed-link-hover-background-color: hsl(0, 0%, 96%) !default;
+$tabs-boxed-link-hover-border-bottom-color: hsl(0, 0%, 86%) !default;
+$tabs-boxed-link-active-background-color: hsl(0, 0%, 100%) !default;
+$tabs-boxed-link-active-border-color: hsl(0, 0%, 86%) !default;
+$tabs-boxed-link-active-border-bottom-color: transparent !default;
+$tabs-toggle-link-border-color: hsl(0, 0%, 86%) !default;
+$tabs-toggle-link-border-style: solid !default;
+$tabs-toggle-link-border-width: 1px !default;
+$tabs-toggle-link-hover-background-color: hsl(0, 0%, 96%) !default;
+$tabs-toggle-link-hover-border-color: hsl(0, 0%, 71%) !default;
+$tabs-toggle-link-radius: $base-border-radius !default;
+$tabs-toggle-link-active-background-color: $primary !default;
+$tabs-toggle-link-active-border-color: $primary !default;
+$tabs-toggle-link-active-color: $primary-invert !default;
+/* @docs */
+
+@mixin item {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  border: 1px solid transparent;
+  background-color: transparent;
+  align-items: center;
+  line-height: $tabs-link-line-height;
+
+  @include avariable("font-size", "tabs-font-size", $tabs-font-size);
+  @include avariable(
+    "border-bottom-color",
+    "tabs-border-bottom-color",
+    $tabs-border-bottom-color
+  );
+  @include avariable(
+    "border-bottom-style",
+    "tabs-border-bottom-style",
+    $tabs-border-bottom-style
+  );
+  @include avariable(
+    "border-bottom-width",
+    "tabs-border-bottom-width",
+    $tabs-border-bottom-width
+  );
+  @include avariable("color", "tabs-link-color", $tabs-link-color);
+  display: flex;
+  justify-content: center;
+  margin-bottom: -1px;
+
+  @include avariable("padding", "tabs-link-padding", $tabs-link-padding);
+  vertical-align: top;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.o-tabs {
+  &--fullwidth {
+    width: 100%;
+
+    .o-tabs__nav-item-wrapper {
+      flex-grow: 1;
+      flex-shrink: 0;
+    }
+
+    .o-tabs__nav-item-default,
+    .o-tabs__nav-item-boxed,
+    .o-tabs__nav-item-toggle {
+      height: 100%;
+    }
+  }
+
+  &--vertical {
+    display: flex;
+    flex-direction: row;
+
+    .o-tabs__nav {
+      flex-direction: column;
+      align-items: stretch;
+      flex-grow: 0;
+      border-bottom: none;
+    }
+
+    .o-tabs__nav-item-boxed {
+      border-bottom-color: transparent;
+
+      @include avariable(
+        "border-right-color",
+        "tabs-border-bottom-color",
+        $tabs-border-bottom-color
+      );
+      @include avariable(
+        "border-radius",
+        "tabs-border-bottom-color",
+        #{$tabs-toggle-link-radius} 0 0 #{$tabs-toggle-link-radius}
+      );
+
+      &--active {
+        @include avariable(
+          "border-bottom-color",
+          "tabs-border-bottom-color",
+          $tabs-border-bottom-color
+        );
+        border-right-color: transparent;
+      }
+    }
+  }
+
+  &--right {
+    flex-direction: row-reverse;
+
+    .o-tabs__nav-item-boxed {
+      border-bottom-color: transparent;
+      border-right-color: transparent;
+
+      @include avariable(
+        "border-left-color",
+        "tabs-border-bottom-color",
+        $tabs-border-bottom-color
+      );
+      @include avariable(
+        "border-radius",
+        "tabs-border-bottom-color",
+        0 #{$tabs-boxed-link-radius} #{$tabs-boxed-link-radius} 0
+      );
+
+      &--active {
+        @include avariable(
+          "border-bottom-color",
+          "tabs-border-bottom-color",
+          $tabs-border-bottom-color
+        );
+        @include avariable(
+          "border-right-color",
+          "tabs-border-bottom-color",
+          $tabs-border-bottom-color
+        );
+        border-left-color: transparent;
+      }
+    }
+  }
+
+  &__nav {
+    @include unselectable;
+    margin: 0;
+    padding: 0;
+    align-items: center;
+    display: flex;
+    flex-grow: 1;
+    flex-shrink: 0;
+    justify-content: flex-start;
+    overflow-x: auto;
+    // padding bottom to keep showing the border-bottom
+    @include avariable(
+      "padding-bottom",
+      "tabs-border-bottom-width",
+      $tabs-border-bottom-width
+    );
+    @include avariable("font-size", "tabs-font-size", $tabs-font-size);
+
+    @each $name, $value in $sizes {
+      &--#{$name} {
+        @include avariable("font-size", ("tabs-font-size-" + #{$name}), $value);
+      }
+    }
+
+    &--centered {
+      justify-content: center;
+    }
+
+    &--right {
+      justify-content: flex-end;
+    }
+
+    &-item {
+      &-icon {
+        @include avariable(
+          "margin-right",
+          "tabs-icon-margin",
+          $tabs-icon-margin
+        );
+      }
+
+      &-default {
+        @include item;
+
+        &--active {
+          @include avariable(
+            "border-bottom-color",
+            "tabs-link-active-border-bottom-color",
+            $tabs-link-active-border-bottom-color
+          );
+          @include avariable(
+            "color",
+            "tabs-link-active-color",
+            $tabs-link-active-color
+          );
+        }
+
+        &--disabled {
+          pointer-events: none;
+          cursor: not-allowed;
+
+          @include avariable(
+            "opacity",
+            "tabs-disabled-opacity",
+            $tabs-disabled-opacity
+          );
+        }
+
+        &:hover:not(.o-tabs__nav-item-default--active) {
+          @include avariable(
+            "background-color",
+            "tabs-link-hover-background-color",
+            $tabs-boxed-link-hover-background-color
+          );
+          @include avariable(
+            "border-bottom-color",
+            "tabs-link-hover-border-bottom-color",
+            $tabs-boxed-link-hover-border-bottom-color
+          );
+        }
+      }
+
+      &-boxed {
+        @include item;
+        @include avariable(
+          "border-radius",
+          "tabs-border-bottom-color",
+          #{$tabs-boxed-link-radius} #{$tabs-boxed-link-radius} 0 0
+        );
+        border-bottom-color: transparent;
+
+        &--active {
+          @include avariable(
+            "border-bottom-color",
+            "tabs-link-active-border-bottom-color",
+            $tabs-link-active-border-bottom-color
+          );
+          @include avariable(
+            "color",
+            "tabs-link-active-color",
+            $tabs-link-active-color
+          );
+          @include avariable(
+            "background-color",
+            "tabs-boxed-link-active-background-color",
+            $tabs-boxed-link-active-background-color
+          );
+          @include avariable(
+            "border-color",
+            "tabs-boxed-link-active-border-color",
+            $tabs-boxed-link-active-border-color
+          );
+          @include avariable(
+            "border-bottom-color",
+            "tabs-boxed-link-active-border-bottom-color",
+            $tabs-boxed-link-active-border-bottom-color
+          );
+        }
+
+        &--disabled {
+          pointer-events: none;
+          cursor: not-allowed;
+
+          @include avariable(
+            "opacity",
+            "tabs-disabled-opacity",
+            $tabs-disabled-opacity
+          );
+        }
+
+        &:hover:not(.o-tabs__nav-item-boxed--active) {
+          @include avariable(
+            "background-color",
+            "tabs-boxed-link-hover-background-color",
+            $tabs-boxed-link-hover-background-color
+          );
+        }
+      }
+
+      &-toggle {
+        @include item;
+        @include avariable(
+          "border-color",
+          "tabs-toggle-link-border-color",
+          $tabs-toggle-link-border-color
+        );
+        @include avariable(
+          "border-style",
+          "tabs-toggle-link-border-style",
+          $tabs-toggle-link-border-style
+        );
+        @include avariable(
+          "border-width",
+          "tabs-toggle-link-border-width",
+          $tabs-toggle-link-border-width
+        );
+        margin-bottom: 0;
+        position: relative;
+
+        &--active {
+          @include avariable(
+            "background-color",
+            "tabs-toggle-link-active-background-color",
+            $tabs-toggle-link-active-background-color
+          );
+          @include avariable(
+            "border-color",
+            "tabs-toggle-link-active-border-color",
+            $tabs-toggle-link-active-border-color
+          );
+          @include avariable(
+            "color",
+            "tabs-toggle-link-active-color",
+            $tabs-toggle-link-active-color
+          );
+        }
+
+        &--disabled {
+          pointer-events: none;
+          cursor: not-allowed;
+
+          @include avariable(
+            "opacity",
+            "tabs-disabled-opacity",
+            $tabs-disabled-opacity
+          );
+        }
+
+        &:hover:not(.o-tabs__nav-item-toggle--active) {
+          @include avariable(
+            "background-color",
+            "tabs-toggle-link-hover-background-color",
+            $tabs-toggle-link-hover-background-color
+          );
+          @include avariable(
+            "border-color",
+            "tabs-toggle-link-hover-border-color",
+            $tabs-toggle-link-hover-border-color
+          );
+        }
+      }
+    }
+  }
+
+  &__content {
+    position: relative;
+    overflow: visible;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+
+    @include avariable(
+      "padding",
+      "tabs-content-padding",
+      $tabs-content-padding
+    );
+
+    &--transitioning {
+      overflow: hidden;
+    }
+  }
+
+  &:not(:last-child) {
+    @include avariable(
+      "margin-bottom",
+      "tabs-margin-bottom",
+      $tabs-margin-bottom
+    );
+  }
+}

package/src/assets/scss/components/_timepicker.scss

@@ -0,0 +1,116 @@
+/* @docs */
+$timepicker-font-size: $base-font-size !default;
+$timepicker-box-line-height: $base-line-height !default;
+$timepicker-box-padding: 0.375rem 1rem !default;
+$timepicker-footer-padding: 0 0.5rem !default;
+$timepicker-footer-margin: 0.875rem 0 0 0 !default;
+$timepicker-select-line-height: $base-line-height !default;
+$timepicker-select-padding: $control-padding-vertical
+  $control-padding-horizontal !default;
+$timepicker-select-color: #363636 !default;
+$timepicker-select-font-weight: 600 !default;
+$timepicker-select-placeholder-opacity: $base-disabled-opacity !default;
+$timepicker-separator-font-weight: 600 !default;
+/* @docs */
+
+.o-tpck {
+  @include avariable(
+    "font-size",
+    "timepicker-font-size",
+    $timepicker-font-size
+  );
+
+  @each $name, $value in $sizes {
+    &--#{$name} {
+      @include avariable(
+        "font-size",
+        ("timepicker-font-size-" + #{$name}),
+        $value
+      );
+    }
+  }
+
+  &__dropdown {
+    width: 100%;
+  }
+
+  &__box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    @include avariable(
+      "line-height",
+      "timepicker-box-line-height",
+      $timepicker-box-line-height
+    );
+    @include avariable(
+      "padding",
+      "timepicker-box-padding",
+      $timepicker-box-padding
+    );
+  }
+
+  &__select {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    display: inline-block;
+    position: relative;
+    vertical-align: top;
+    cursor: pointer;
+    justify-content: flex-start;
+    align-items: center;
+    border: 0;
+    font-size: inherit;
+
+    @include avariable(
+      "font-weight",
+      "timepicker-select-font-weight",
+      $timepicker-select-font-weight
+    );
+    @include avariable(
+      "line-height",
+      "timepicker-select-line-height",
+      $timepicker-select-line-height
+    );
+    @include avariable(
+      "padding",
+      "timepicker-select-padding",
+      $timepicker-select-padding
+    );
+    @include avariable(
+      "color",
+      "timepicker-select-color",
+      $timepicker-select-color
+    );
+  }
+
+  &__select-placeholder {
+    @include avariable(
+      "opacity",
+      "timepicker-select-placeholder-opacity",
+      $timepicker-select-placeholder-opacity
+    );
+  }
+
+  &__separator {
+    @include avariable(
+      "font-weight",
+      "timepicker-separator-font-weight",
+      $timepicker-separator-font-weight
+    );
+  }
+
+  &__footer {
+    @include avariable(
+      "padding",
+      "timepicker-header-padding",
+      $timepicker-footer-padding
+    );
+    @include avariable(
+      "margin",
+      "timepicker-header-margin",
+      $timepicker-footer-margin
+    );
+  }
+}