@oruga-ui/theme-oruga 0.0.1

package/src/assets/scss/components/_datepicker.scss

@@ -0,0 +1,592 @@
+@use "sass:list";
+
+/* @docs */
+$datepicker-font-size: $base-font-size !default;
+$datepicker-box-line-height: $base-line-height !default;
+$datepicker-box-padding: 0.375rem 1rem !default;
+$datepicker-header-padding: 0 0 0.875rem 0 !default;
+$datepicker-header-margin: 0 0 0.875rem 0 !default;
+$datepicker-header-border-bottom: 1px solid $grey-lighter !default;
+$datepicker-footer-padding: 0.875rem 0.5rem 0 0.5rem !default;
+$datepicker-footer-margin: 0.875rem 0 0.875rem 0 !default;
+$datepicker-footer-border-top: 1px solid $grey-lighter !default;
+$datepicker-table-head-padding: 0 0 0.875rem 0 !default;
+$datepicker-table-head-margin: 0 0 0.875rem 0 !default;
+$datepicker-table-head-border-bottom: 1px solid $grey-lighter !default;
+$datepicker-table-head-item-color: $grey !default;
+$datepicker-table-head-item-font-weight: 600 !default;
+$datepicker-item-today-border: solid 1px rgba($primary, 0.5) !default;
+$datepicker-item-selectable-color: $grey-dark !default;
+$datepicker-item-disabled-color: $grey-light !default;
+$datepicker-item-border-radius: $base-border-radius !default;
+$datepicker-item-padding: 0.5rem 0.75rem !default;
+$datepicker-item-selected-color: $primary-invert !default;
+$datepicker-item-selected-background-color: $primary !default;
+$datepicker-item-selected-border-radius: 0 !default;
+$datepicker-item-selected-within-background-color: rgba(
+  $datepicker-item-selected-background-color,
+  0.5
+) !default;
+$datepicker-item-hovered-background-color: $grey !default;
+$datepicker-item-hovered-color: $grey-lighter !default;
+$datepicker-item-hovered-background-color: #f5f5f5 !default;
+$datepicker-item-hovered-within-background-color: rgba(
+  $datepicker-item-hovered-background-color,
+  0.5
+) !default;
+$datepicker-item-nearby-color: $grey-light !default;
+$datepicker-events-item-padding: 0.3rem 0.75rem 0.75rem !default;
+$datepicker-event-background-color: $grey-light !default;
+$datepicker-event-dots-size: 0.35em !default;
+$datepicker-event-dots-margin: 0 0.1em !default;
+$datepicker-event-bars-height: 0.25em !default;
+$datepicker-btn-border-color: $grey-lighter !default;
+$datepicker-btn-border-radius: $base-border-radius !default;
+$datepicker-btn-border: 1px solid transparent !default;
+$datepicker-btn-color: #363636 !default;
+$datepicker-btn-height: 2.25em !default;
+$datepicker-btn-hover-border-color: $grey-light !default;
+$datepicker-btn-hover-color: #363636 !default;
+$datepicker-btn-line-height: $base-line-height !default;
+$datepicker-btn-margin: 0.25rem !default;
+$datepicker-btn-min-width: 2.25em !default;
+$datepicker-btn-padding: 0.5em 0.5em !default;
+/* @docs */
+
+.o-dpck {
+  @include avariable(
+    "font-size",
+    "datepicker-font-size",
+    $datepicker-font-size
+  );
+
+  @each $name, $value in $sizes {
+    &--#{$name} {
+      @include avariable(
+        "font-size",
+        ("datepicker-font-size-" + #{$name}),
+        $value
+      );
+    }
+  }
+
+  &__dropdown {
+    width: 100%;
+  }
+
+  &__box {
+    display: block;
+    position: relative;
+
+    @include avariable(
+      "line-height",
+      "datepicker-box-line-height",
+      $datepicker-box-line-height
+    );
+    @include avariable(
+      "padding",
+      "datepicker-box-padding",
+      $datepicker-box-padding
+    );
+  }
+
+  &__header {
+    @include avariable(
+      "padding",
+      "datepicker-header-padding",
+      $datepicker-header-padding
+    );
+    @include avariable(
+      "margin",
+      "datepicker-header-margin",
+      $datepicker-header-margin
+    );
+    @include avariable(
+      "border-bottom",
+      "datepicker-header-border-bottom",
+      $datepicker-header-border-bottom
+    );
+
+    &__buttons {
+      align-items: center;
+      display: flex;
+      justify-content: center;
+      text-align: center;
+
+      @each $name, $value in $sizes {
+        &--#{$name} {
+          @include avariable(
+            "font-size",
+            ("datepicker-font-size-" + #{$name}),
+            $value
+          );
+        }
+      }
+    }
+
+    &__previous,
+    &__next {
+      justify-content: center;
+      text-align: center;
+      text-decoration: none;
+      cursor: pointer;
+      -moz-appearance: none;
+      -webkit-appearance: none;
+      align-items: center;
+      box-shadow: none;
+      display: inline-flex;
+      position: relative;
+      vertical-align: top;
+
+      @include unselectable;
+      @include avariable(
+        "line-height",
+        "datepicker-btn-line-height",
+        $datepicker-btn-line-height
+      );
+      @include avariable(
+        "border",
+        "datepicker-btn-border",
+        $datepicker-btn-border
+      );
+      @include avariable(
+        "border-radius",
+        "datepicker-btn-border-radius",
+        $datepicker-btn-border-radius
+      );
+      @include avariable(
+        "border-color",
+        "datepicker-btn-border-color",
+        $datepicker-btn-border-color
+      );
+      @include avariable(
+        "color",
+        "datepicker-btn-color",
+        $datepicker-btn-color
+      );
+      @include avariable(
+        "min-width",
+        "datepicker-btn-min-width",
+        $datepicker-btn-min-width
+      );
+      @include avariable(
+        "height",
+        "datepicker-btn-height",
+        $datepicker-btn-height
+      );
+      @include avariable(
+        "padding",
+        "datepicker-btn-padding",
+        $datepicker-btn-padding
+      );
+      @include avariable(
+        "margin",
+        "datepicker-btn-margin",
+        $datepicker-btn-margin
+      );
+
+      &:hover {
+        text-decoration: none;
+
+        @include avariable(
+          "border-color",
+          "datepicker-btn-hover-border-color",
+          $datepicker-btn-hover-border-color
+        );
+        @include avariable(
+          "color",
+          "datepicker-btn-hover-color",
+          $datepicker-btn-hover-color
+        );
+      }
+    }
+
+    &__previous {
+      order: 1;
+    }
+
+    &__next {
+      order: 3;
+    }
+
+    &__list {
+      order: 2;
+      align-items: center;
+      display: flex;
+      justify-content: center;
+      text-align: center;
+      list-style: none;
+      flex-wrap: wrap;
+      margin: 0;
+      padding: 0;
+
+      @include side-flex-gap($datepicker-btn-margin * 0.5);
+    }
+  }
+
+  &__footer {
+    @include avariable(
+      "padding",
+      "datepicker-header-padding",
+      $datepicker-footer-padding
+    );
+    @include avariable(
+      "margin",
+      "datepicker-header-margin",
+      $datepicker-footer-margin
+    );
+    @include avariable(
+      "border-top",
+      "datepicker-header-border-top",
+      $datepicker-footer-border-top
+    );
+  }
+
+  &__table,
+  &__molist.nth {
+    display: table;
+    margin: 0 auto 0 auto;
+
+    &__head {
+      display: table-header-group;
+
+      @include avariable(
+        "padding",
+        "datepicker-table-head-padding",
+        $datepicker-table-head-padding
+      );
+      @include avariable(
+        "margin",
+        "datepicker-table-head-margin",
+        $datepicker-table-head-margin
+      );
+      @include avariable(
+        "border-bottom",
+        "datepicker-table-head-border-bottom",
+        $datepicker-table-head-border-bottom
+      );
+    }
+
+    &__body {
+      display: table-row-group;
+    }
+
+    &__row {
+      display: table-row;
+    }
+
+    &__head-cell {
+      @include avariable(
+        "padding",
+        "datepicker-table-head-item-padding",
+        $datepicker-table-head-item-color
+      );
+      @include avariable(
+        "font-weight",
+        "datepicker-table-head-item-font-weight",
+        $datepicker-table-head-item-font-weight
+      );
+    }
+
+    &__cell {
+      text-align: center;
+      vertical-align: middle;
+      display: table-cell;
+      text-decoration: none;
+
+      @include avariable(
+        "border-radius",
+        "datepicker-item-border-radius",
+        $datepicker-item-border-radius
+      );
+      @include avariable(
+        "padding",
+        "datepicker-item-padding",
+        $datepicker-item-padding
+      );
+
+      &--unselectable {
+        @include avariable(
+          "color",
+          "datepicker-item-disabled-color",
+          $datepicker-item-disabled-color
+        );
+      }
+
+      &--today {
+        @include avariable(
+          "border",
+          "datepicker-item-today-border",
+          $datepicker-item-today-border
+        );
+      }
+
+      &--selectable {
+        @include avariable(
+          "color",
+          "datepicker-item-selectable-color",
+          $datepicker-item-selectable-color
+        );
+      }
+
+      &--first-hovered {
+        @include avariable(
+          "background-color",
+          "datepicker-item-hovered-background-color",
+          $datepicker-item-hovered-background-color
+        );
+        @include avariable(
+          "color",
+          "datepicker-item-hovered-color",
+          $datepicker-item-hovered-color
+        );
+        @include avariable(
+          "border-bottom-right-radius",
+          "datepicker-item-selected-border-radius",
+          $datepicker-item-selected-border-radius
+        );
+        @include avariable(
+          "border-top-right-radius",
+          "datepicker-item-selected-border-radius",
+          $datepicker-item-selected-border-radius
+        );
+      }
+
+      &--within-hovered {
+        @include avariable(
+          "background-color",
+          "datepicker-item-hovered-within-background-color",
+          $datepicker-item-hovered-within-background-color
+        );
+        @include avariable(
+          "color",
+          "datepicker-item-hovered-color",
+          $datepicker-item-hovered-color
+        );
+        @include avariable(
+          "border-radius",
+          "datepicker-item-selected-border-radius",
+          $datepicker-item-selected-border-radius
+        );
+      }
+
+      &--last-hovered {
+        @include avariable(
+          "background-color",
+          "datepicker-item-hovered-background-color",
+          $datepicker-item-hovered-background-color
+        );
+        @include avariable(
+          "color",
+          "datepicker-item-hovered-color",
+          $datepicker-item-hovered-color
+        );
+        @include avariable(
+          "border-bottom-left-radius",
+          "datepicker-item-selected-border-radius",
+          $datepicker-item-selected-border-radius
+        );
+        @include avariable(
+          "border-top-left-radius",
+          "datepicker-item-selected-border-radius",
+          $datepicker-item-selected-border-radius
+        );
+      }
+
+      &--selected:not(&--first-hovered):not(&--within-hovered):not(
+          &--last-hovered
+        ) {
+        @include avariable(
+          "background-color",
+          "datepicker-item-selected-background-color",
+          $datepicker-item-selected-background-color
+        );
+        @include avariable(
+          "color",
+          "datepicker-item-selected-color",
+          $datepicker-item-selected-color
+        );
+      }
+
+      &--first-selected:not(&--first-hovered):not(&--within-hovered):not(
+          &--last-hovered
+        ) {
+        @include avariable(
+          "background-color",
+          "datepicker-item-selected-background-color",
+          $datepicker-item-selected-background-color
+        );
+        @include avariable(
+          "color",
+          "datepicker-item-selected-color",
+          $datepicker-item-selected-color
+        );
+        @include avariable(
+          "border-bottom-right-radius",
+          "datepicker-item-selected-border-radius",
+          $datepicker-item-selected-border-radius
+        );
+        @include avariable(
+          "border-top-right-radius",
+          "datepicker-item-selected-border-radius",
+          $datepicker-item-selected-border-radius
+        );
+      }
+
+      &--within-selected:not(&--first-hovered):not(&--within-hovered):not(
+          &--last-hovered
+        ) {
+        @include avariable(
+          "background-color",
+          "datepicker-item-selected-within-background-color",
+          $datepicker-item-selected-within-background-color
+        );
+        @include avariable(
+          "border-radius",
+          "datepicker-item-selected-border-radius",
+          $datepicker-item-selected-border-radius
+        );
+      }
+
+      &--last-selected:not(&--first-hovered):not(&--within-hovered):not(
+          &--last-hovered
+        ) {
+        @include avariable(
+          "background-color",
+          "datepicker-item-selected-background-color",
+          $datepicker-item-selected-background-color
+        );
+        @include avariable(
+          "color",
+          "datepicker-item-selected-color",
+          $datepicker-item-selected-color
+        );
+        @include avariable(
+          "border-bottom-left-radius",
+          "datepicker-item-selected-border-radius",
+          $datepicker-item-selected-border-radius
+        );
+        @include avariable(
+          "border-top-left-radius",
+          "datepicker-item-selected-border-radius",
+          $datepicker-item-selected-border-radius
+        );
+      }
+
+      &--nearby:not(&--selected) {
+        @include avariable(
+          "color",
+          "datepicker-item-nearby-color",
+          $datepicker-item-nearby-color
+        );
+      }
+
+      &--invisible {
+        visibility: hidden;
+      }
+
+      &--events {
+        @include avariable(
+          "padding",
+          "datepicker-events-item-padding",
+          $datepicker-events-item-padding
+        );
+        position: relative;
+      }
+    }
+
+    &__events {
+      display: flex;
+      justify-content: center;
+      position: absolute;
+      width: 100%;
+      left: 0;
+      bottom: 15%;
+    }
+
+    &__event {
+      @include avariable(
+        "background-color",
+        "datepicker-event-background-color",
+        $datepicker-event-background-color
+      );
+
+      @each $name, $pair in $colors {
+        $color: list.nth($pair, 1);
+        &--#{$name} {
+          background-color: $color;
+
+          @include avariable(
+            "background-color",
+            ("variant-" + #{$name}),
+            $color
+          );
+        }
+      }
+
+      &--dots {
+        border-radius: 50%;
+
+        @include avariable(
+          "margin",
+          "datepicker-event-dots-margin",
+          $datepicker-event-dots-margin
+        );
+        @include avariable(
+          "height",
+          "datepicker-event-dots-size",
+          $datepicker-event-dots-size
+        );
+        @include avariable(
+          "width",
+          "datepicker-event-dots-size",
+          $datepicker-event-dots-size
+        );
+      }
+
+      &--bars {
+        @include avariable(
+          "height",
+          "datepicker-event-bars-height",
+          $datepicker-event-bars-height
+        );
+        width: 100%;
+      }
+    }
+  }
+
+  &__molist.nth__table {
+    display: inline-flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    width: 17rem;
+  }
+
+  &__molist.nth__cell {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 33.33%;
+    height: 2.5rem;
+  }
+
+  &--mobile {
+    .o-dpck__header__previous {
+      order: 1;
+      flex-grow: 1;
+      flex-shrink: 1;
+    }
+
+    .o-dpck__header__next {
+      order: 3;
+      flex-grow: 1;
+      flex-shrink: 1;
+    }
+
+    .o-dpck__header__list {
+      order: 2;
+      flex-grow: 1;
+      flex-shrink: 1;
+    }
+  }
+}

package/src/assets/scss/components/_datetimepicker.scss

@@ -0,0 +1,10 @@
+/* @docs */
+/* @docs */
+
+.o-dtpck {
+  &__time {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}