@oruga-ui/theme-oruga 0.4.2 → 0.5.0

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

@@ -1,494 +0,0 @@
-@use "sass:list";
-
-/* @docs */
-$datepicker-font-size: var(--#{$prefix}base-font-size) !default;
-$datepicker-box-line-height: var(--#{$prefix}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 var(--#{$prefix}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 var(--#{$prefix}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 var(--#{$prefix}grey-lighter) !default;
-$datepicker-table-head-item-color: var(--#{$prefix}grey) !default;
-$datepicker-table-head-item-font-weight: 600 !default;
-$datepicker-item-today-border: solid 1px rgba(var(--#{$prefix}primary), 0.5) !default;
-$datepicker-item-selectable-color: var(--#{$prefix}grey-dark) !default;
-$datepicker-item-disabled-color: var(--#{$prefix}grey-light) !default;
-$datepicker-item-border-radius: var(--#{$prefix}base-border-radius) !default;
-$datepicker-item-padding: 0.5rem 0.75rem !default;
-$datepicker-item-selected-color: var(--#{$prefix}primary-invert) !default;
-$datepicker-item-selected-background-color: var(--#{$prefix}primary) !default;
-$datepicker-item-selected-border-radius: 0 !default;
-$datepicker-item-selected-within-background-color: rgb(
-  from $datepicker-item-selected-background-color r g b / 50%
-) !default;
-$datepicker-item-hovered-background-color: var(--#{$prefix}grey) !default;
-$datepicker-item-hovered-color: var(--#{$prefix}grey-lighter) !default;
-$datepicker-item-hovered-background-color: #f5f5f5 !default;
-$datepicker-item-hovered-within-background-color: rgb(
-  from $datepicker-item-hovered-background-color r g b / 50%
-) !default;
-$datepicker-item-nearby-color: var(--#{$prefix}grey-light) !default;
-$datepicker-events-item-padding: 0.3rem 0.75rem 0.75rem !default;
-$datepicker-event-background-color: var(--#{$prefix}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: var(--#{$prefix}grey-lighter) !default;
-$datepicker-btn-border-radius: var(--#{$prefix}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: var(--#{$prefix}grey-light) !default;
-$datepicker-btn-hover-color: #363636 !default;
-$datepicker-btn-line-height: var(--#{$prefix}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 {
-  font-size: var(--#{$prefix}datepicker-font-size, $datepicker-font-size);
-
-  // size variants
-  @each $name, $value in $sizes {
-    &--#{$name} {
-      font-size: var(--#{$prefix}datepicker-font-size-#{$name}, $value);
-    }
-  }
-
-  &__dropdown {
-    width: 100%;
-  }
-
-  &__box {
-    --#{$prefix}dropdown-item-line-height: #{$datepicker-box-line-height};
-    --#{$prefix}dropdown-item-padding: #{$datepicker-box-padding};
-  }
-
-  &__header {
-    padding: var(
-      --#{$prefix}datepicker-header-padding,
-      $datepicker-header-padding
-    );
-    margin: var(
-      --#{$prefix}datepicker-header-margin,
-      $datepicker-header-margin
-    );
-    border-bottom: var(
-      --#{$prefix}datepicker-header-border-bottom,
-      $datepicker-header-border-bottom
-    );
-
-    &__buttons {
-      align-items: center;
-      display: flex;
-      justify-content: center;
-      text-align: center;
-
-      // size variants
-      @each $name, $value in $sizes {
-        &--#{$name} {
-          font-size: var(--#{$prefix}datepicker-font-size-#{$name}, $value);
-        }
-      }
-    }
-
-    &__previous {
-      order: 1;
-    }
-
-    &__next {
-      order: 3;
-    }
-
-    &__previous,
-    &__next {
-      @include unselectable;
-      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;
-      line-height: var(
-        --#{$prefix}datepicker-btn-line-height,
-        $datepicker-btn-line-height
-      );
-      border: var(--#{$prefix}datepicker-btn-border, $datepicker-btn-border);
-      border-radius: var(
-        --#{$prefix}datepicker-btn-border-radius,
-        $datepicker-btn-border-radius
-      );
-      border-color: var(
-        --#{$prefix}datepicker-btn-border-color,
-        $datepicker-btn-border-color
-      );
-      color: var(--#{$prefix}datepicker-btn-color, $datepicker-btn-color);
-      min-width: var(
-        --#{$prefix}datepicker-btn-min-width,
-        $datepicker-btn-min-width
-      );
-      height: var(--#{$prefix}datepicker-btn-height, $datepicker-btn-height);
-      padding: var(--#{$prefix}datepicker-btn-padding, $datepicker-btn-padding);
-      margin: var(--#{$prefix}datepicker-btn-margin, $datepicker-btn-margin);
-
-      &:hover {
-        text-decoration: none;
-        border-color: var(
-          --#{$prefix}datepicker-btn-hover-border-color,
-          $datepicker-btn-hover-border-color
-        );
-        color: var(
-          --#{$prefix}datepicker-btn-hover-color,
-          $datepicker-btn-hover-color
-        );
-      }
-    }
-
-    &__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 {
-    padding: var(
-      --#{$prefix}datepicker-header-padding,
-      $datepicker-footer-padding
-    );
-    margin: var(
-      --#{$prefix}datepicker-header-margin,
-      $datepicker-footer-margin
-    );
-    border-top: var(
-      --#{$prefix}datepicker-header-border-top,
-      $datepicker-footer-border-top
-    );
-  }
-
-  &__table,
-  &__month {
-    display: table;
-    margin: 0 auto 0 auto;
-
-    &__head {
-      display: table-header-group;
-      padding: var(
-        --#{$prefix}datepicker-table-head-padding,
-        $datepicker-table-head-padding
-      );
-      margin: var(
-        --#{$prefix}datepicker-table-head-margin,
-        $datepicker-table-head-margin
-      );
-      border-bottom: var(
-        --#{$prefix}datepicker-table-head-border-bottom,
-        $datepicker-table-head-border-bottom
-      );
-    }
-
-    &__body {
-      display: table-row-group;
-    }
-
-    &__row {
-      display: table-row;
-    }
-
-    &__head-cell {
-      padding: var(
-        --#{$prefix}datepicker-table-head-item-padding,
-        $datepicker-table-head-item-color
-      );
-      font-weight: var(
-        --#{$prefix}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;
-      border-radius: var(
-        --#{$prefix}datepicker-item-border-radius,
-        $datepicker-item-border-radius
-      );
-      padding: var(
-        --#{$prefix}datepicker-item-padding,
-        $datepicker-item-padding
-      );
-
-      &--unselectable {
-        color: var(
-          --#{$prefix}datepicker-item-disabled-color,
-          $datepicker-item-disabled-color
-        );
-      }
-
-      &--today {
-        border: var(
-          --#{$prefix}datepicker-item-today-border,
-          $datepicker-item-today-border
-        );
-      }
-
-      &--selectable {
-        cursor: pointer;
-        color: var(
-          --#{$prefix}datepicker-item-selectable-color,
-          $datepicker-item-selectable-color
-        );
-      }
-
-      &--first-hovered {
-        background-color: var(
-          --#{$prefix}datepicker-item-hovered-background-color,
-          $datepicker-item-hovered-background-color
-        );
-        color: var(
-          --#{$prefix}datepicker-item-hovered-color,
-          $datepicker-item-hovered-color
-        );
-        border-bottom-right-radius: var(
-          --#{$prefix}datepicker-item-selected-border-radius,
-          $datepicker-item-selected-border-radius
-        );
-        border-top-right-radius: var(
-          --#{$prefix}datepicker-item-selected-border-radius,
-          $datepicker-item-selected-border-radius
-        );
-      }
-
-      &--within-hovered {
-        background-color: var(
-          --#{$prefix}datepicker-item-hovered-within-background-color,
-          $datepicker-item-hovered-within-background-color
-        );
-        color: var(
-          --#{$prefix}datepicker-item-hovered-color,
-          $datepicker-item-hovered-color
-        );
-        border-radius: var(
-          --#{$prefix}datepicker-item-selected-border-radius,
-          $datepicker-item-selected-border-radius
-        );
-      }
-
-      &--last-hovered {
-        background-color: var(
-          --#{$prefix}datepicker-item-hovered-background-color,
-          $datepicker-item-hovered-background-color
-        );
-        color: var(
-          --#{$prefix}datepicker-item-hovered-color,
-          $datepicker-item-hovered-color
-        );
-        border-bottom-left-radius: var(
-          --#{$prefix}datepicker-item-selected-border-radius,
-          $datepicker-item-selected-border-radius
-        );
-        border-top-left-radius: var(
-          --#{$prefix}datepicker-item-selected-border-radius,
-          $datepicker-item-selected-border-radius
-        );
-      }
-
-      &--selected:not(&--first-hovered):not(&--within-hovered):not(
-          &--last-hovered
-        ) {
-        background-color: var(
-          --#{$prefix}datepicker-item-selected-background-color,
-          $datepicker-item-selected-background-color
-        );
-        color: var(
-          --#{$prefix}datepicker-item-selected-color,
-          $datepicker-item-selected-color
-        );
-      }
-
-      &--first-selected:not(&--first-hovered):not(&--within-hovered):not(
-          &--last-hovered
-        ) {
-        background-color: var(
-          --#{$prefix}datepicker-item-selected-background-color,
-          $datepicker-item-selected-background-color
-        );
-        color: var(
-          --#{$prefix}datepicker-item-selected-color,
-          $datepicker-item-selected-color
-        );
-        border-bottom-right-radius: var(
-          --#{$prefix}datepicker-item-selected-border-radius,
-          $datepicker-item-selected-border-radius
-        );
-        border-top-right-radius: var(
-          --#{$prefix}datepicker-item-selected-border-radius,
-          $datepicker-item-selected-border-radius
-        );
-      }
-
-      &--within-selected:not(&--first-hovered):not(&--within-hovered):not(
-          &--last-hovered
-        ) {
-        background-color: var(
-          --#{$prefix}datepicker-item-selected-within-background-color,
-          $datepicker-item-selected-within-background-color
-        );
-        border-radius: var(
-          --#{$prefix}datepicker-item-selected-border-radius,
-          $datepicker-item-selected-border-radius
-        );
-      }
-
-      &--last-selected:not(&--first-hovered):not(&--within-hovered):not(
-          &--last-hovered
-        ) {
-        background-color: var(
-          --#{$prefix}datepicker-item-selected-background-color,
-          $datepicker-item-selected-background-color
-        );
-        color: var(
-          --#{$prefix}datepicker-item-selected-color,
-          $datepicker-item-selected-color
-        );
-        border-bottom-left-radius: var(
-          --#{$prefix}datepicker-item-selected-border-radius,
-          $datepicker-item-selected-border-radius
-        );
-        border-top-left-radius: var(
-          --#{$prefix}datepicker-item-selected-border-radius,
-          $datepicker-item-selected-border-radius
-        );
-      }
-
-      &--nearby:not(&--selected) {
-        color: var(
-          --#{$prefix}datepicker-item-nearby-color,
-          $datepicker-item-nearby-color
-        );
-      }
-
-      &--invisible {
-        visibility: hidden;
-      }
-
-      &--events {
-        position: relative;
-        padding: var(
-          --#{$prefix}datepicker-events-item-padding,
-          $datepicker-events-item-padding
-        );
-      }
-    }
-
-    &__events {
-      display: flex;
-      justify-content: center;
-      position: absolute;
-      width: 100%;
-      left: 0;
-      bottom: 15%;
-    }
-
-    &__event {
-      background-color: var(
-        --#{$prefix}datepicker-event-background-color,
-        $datepicker-event-background-color
-      );
-
-      // color variants
-      @each $name, $pair in $colors {
-        $color: list.nth($pair, 1);
-        &--#{$name} {
-          background-color: $color;
-          background-color: var(--#{$prefix}variant-#{$name}, $color);
-        }
-      }
-
-      &--dots {
-        border-radius: 50%;
-        margin: var(
-          --#{$prefix}datepicker-event-dots-margin,
-          $datepicker-event-dots-margin
-        );
-        height: var(
-          --#{$prefix}datepicker-event-dots-size,
-          $datepicker-event-dots-size
-        );
-        width: var(
-          --#{$prefix}datepicker-event-dots-size,
-          $datepicker-event-dots-size
-        );
-      }
-
-      &--bars {
-        height: var(
-          --#{$prefix}datepicker-event-bars-height,
-          $datepicker-event-bars-height
-        );
-        width: 100%;
-      }
-    }
-  }
-
-  &__month__table {
-    display: inline-flex;
-    flex-wrap: wrap;
-    flex-direction: row;
-    width: 17rem;
-  }
-
-  &__month__cell {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 33.33%;
-    height: 2.5rem;
-  }
-
-  &--expanded {
-    width: 100%;
-    flex-grow: 1;
-  }
-
-  &--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

@@ -1,13 +0,0 @@
-/* @docs */
-/* @docs */
-
-.o-dtpck {
-  &__time {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    // override time dropdown shadow
-    --#{$prefix}dropdown-menu-box-shadow: 0,0,0,0;
-  }
-}