@oruga-ui/theme-oruga 0.0.1

package/src/assets/scss/components/_inputitems.scss

@@ -0,0 +1,175 @@
+@use "sass:list";
+
+/* @docs */
+$inputitems-background-color: $input-background-color !default;
+$inputitems-height: calc(2em - 1px) !default;
+$inputitems-padding: calc(0.275em - 1px) 0 0 !default;
+$inputitems-border-color: $grey-lighter !default;
+$inputitems-border-style: solid !default;
+$inputitems-border-width: 1px !default;
+$inputitems-border-radius: $base-border-radius !default;
+$inputitems-color: #363636 !default;
+$inputitems-line-height: $base-line-height !default;
+$inputitems-box-shadow: inset 0 1px 2px hsla(0, 0%, 4%, 0.1) !default;
+$inputitems-max-width: 100% !default;
+$inputitems-width: 100% !default;
+$inputitems-counter-font-size: 0.75rem !default;
+$inputitems-counter-margin: 0.25rem 0 0 0.5rem !default;
+$inputitems-item-background-color: $primary !default;
+$inputitems-item-color: $primary-invert !default;
+$inputitems-item-border-radius: $base-border-radius !default;
+$inputitems-item-margin: 0 0 0 0.275em !default;
+$inputitems-item-padding: 0 0.75em 0 0.75em !default;
+$inputitems-margin-icon-to-text: 0.1875em !default;
+/* @docs */
+
+.o-inputit {
+  display: block;
+
+  &__container {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    position: relative;
+    vertical-align: top;
+    flex-wrap: wrap;
+
+    @include avariable(
+      "max-width",
+      "inputitems-max-width",
+      $inputitems-max-width
+    );
+    @include avariable("width", "inputitems-width", $inputitems-width);
+    @include avariable("padding", "inputitems-padding", $inputitems-padding);
+    @include avariable(
+      "background-color",
+      "inputitems-background-color",
+      $inputitems-background-color
+    );
+    @include avariable(
+      "border-color",
+      "inputitems-border-color",
+      $inputitems-border-color
+    );
+    @include avariable(
+      "border-style",
+      "inputitems-border-style",
+      $inputitems-border-style
+    );
+    @include avariable(
+      "border-width",
+      "inputitems-border-width",
+      $inputitems-border-width
+    );
+    @include avariable(
+      "border-radius",
+      "inputitems-border-radius",
+      $inputitems-border-radius
+    );
+    @include avariable("color", "inputitems-color", $inputitems-color);
+    @include avariable("font-size", "base-font-size", $base-font-size);
+    @include avariable(
+      "line-height",
+      "inputitems-line-height",
+      $inputitems-line-height
+    );
+    @include avariable(
+      "box-shadow",
+      "inputitems-box-shadow",
+      $inputitems-box-shadow
+    );
+
+    @each $name, $value in $sizes {
+      &--#{$name} {
+        @include avariable(
+          "font-size",
+          ("inputitems-font-size-" + #{$name}),
+          $value
+        );
+      }
+    }
+  }
+
+  &__autocomplete {
+    position: static;
+    flex: 1;
+  }
+
+  &__input {
+    border: none;
+    box-shadow: none;
+
+    &:focus {
+      box-shadow: none;
+    }
+  }
+
+  &__item {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+
+    @include side-flex-gap($inputitems-margin-icon-to-text);
+    @include avariable(
+      "background-color",
+      "inputitems-item-background-color",
+      $inputitems-item-background-color
+    );
+    @include avariable(
+      "color",
+      "inputitems-item-color",
+      $inputitems-item-color
+    );
+    @include avariable(
+      "border-radius",
+      "inputitems-item-border-radius",
+      $inputitems-item-border-radius
+    );
+    @include avariable(
+      "margin",
+      "inputitems-item-margin",
+      $inputitems-item-margin
+    );
+    @include avariable(
+      "padding",
+      "inputitems-item-padding",
+      $inputitems-item-padding
+    );
+
+    @each $name, $pair in $colors {
+      $color: list.nth($pair, 1);
+      $color-invert: list.nth($pair, 2);
+      &--#{$name} {
+        @include avariable("background-color", ("variant-" + #{$name}), $color);
+        @include avariable(
+          "color",
+          ("variant-invert-" + #{$name}),
+          $color-invert
+        );
+      }
+    }
+  }
+
+  &__counter {
+    display: block;
+    float: right;
+
+    @include avariable(
+      "font-size",
+      "inputitems-counter-font-size",
+      $inputitems-counter-font-size
+    );
+    @include avariable(
+      "margin",
+      "inputitems-counter-margin",
+      $inputitems-counter-margin
+    );
+  }
+
+  &--expanded {
+    width: 100%;
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
+}

package/src/assets/scss/components/_loading.scss

@@ -0,0 +1,45 @@
+/* @docs */
+$loading-overlay-legacy: #7f7f7f !default;
+$loading-overlay: rgba(255, 255, 255, 0.5) !default;
+$loading-zindex: 29 !default;
+$loading-fullpage-zindex: 999 !default;
+/* @docs */
+
+.o-load {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  top: 0;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+
+  @include avariable("z-index", "loading-zindex", $loading-zindex);
+
+  &--fullpage {
+    position: fixed;
+
+    @include avariable(
+      "z-index",
+      "loading-fullpage-zindex",
+      $loading-fullpage-zindex
+    );
+  }
+
+  &__overlay {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    top: 0;
+
+    @include avariable(
+      "background",
+      "loading-overlay-legacy",
+      $loading-overlay-legacy
+    );
+    @include avariable("background", "loading-overlay", $loading-overlay);
+  }
+}

package/src/assets/scss/components/_menu.scss

@@ -0,0 +1,124 @@
+/* @docs */
+$menu-item-color: $grey-dark !default;
+$menu-item-hover-color: $black !default;
+$menu-item-hover-background-color: $grey-light !default;
+$menu-item-active-color: $primary-invert !default;
+$menu-item-active-background-color: $primary !default;
+$menu-item-disabled-color: $grey-light !default;
+$menu-list-border-left: 1px solid $primary !default;
+$menu-list-line-height: 1.25em !default;
+$menu-item-padding: 0.5em 0.75em !default;
+$menu-nested-list-margin: 0.75em !default;
+$menu-nested-list-padding-left: 0.75em !default;
+$menu-label-color: $grey !default;
+$menu-label-font-size: 0.75em !default;
+$menu-label-spacing: 1em !default;
+/* @docs */
+
+.o-menu {
+  @include avariable("font-size", "base-font-size", $base-font-size);
+
+  @each $name, $value in $sizes {
+    &--#{$name} {
+      @include avariable("font-size", ("menu-font-size-" + #{$name}), $value);
+    }
+  }
+}
+
+.o-menu-list {
+  @include avariable(
+    "line-height",
+    ("menu-list-line-height"),
+    $menu-list-line-height
+  );
+
+  .o-menu-list,
+  .o-menu-item__wrapper {
+    list-style: none;
+  }
+
+  .o-menu-item__submenu {
+    @include avariable(
+      "border-left",
+      ("menu-list-border-left"),
+      $menu-list-border-left
+    );
+    @include avariable(
+      "padding-left",
+      ("menu-nested-list-padding-left"),
+      $menu-nested-list-padding-left
+    );
+    @include avariable(
+      "margin",
+      ("menu-nested-list-margin"),
+      $menu-nested-list-margin
+    );
+  }
+}
+
+.o-menu-label {
+  @include avariable("color", ("menu-label-color"), $menu-label-color);
+  @include avariable(
+    "font-size",
+    ("menu-label-font-size"),
+    $menu-label-font-size
+  );
+  text-transform: uppercase;
+
+  &:not(:first-child) {
+    @include avariable(
+      "margin-top",
+      ("menu-label-spacing"),
+      $menu-label-spacing
+    );
+  }
+
+  &:not(:last-child) {
+    @include avariable(
+      "margin-bottom",
+      ("menu-label-spacing"),
+      $menu-label-spacing
+    );
+  }
+}
+
+.o-menu-item {
+  @include avariable("color", ("menu-item-color"), $menu-item-color);
+  @include avariable("padding", ("menu-item-padding"), $menu-item-padding);
+  display: block;
+  list-style: none;
+
+  &:hover:not(&--active):not(&--disabled) {
+    @include avariable(
+      "color",
+      ("menu-item-hover-color"),
+      $menu-item-hover-color
+    );
+    @include avariable(
+      "background-color",
+      ("menu-item-hover-background-color"),
+      $menu-item-hover-background-color
+    );
+  }
+
+  &--active {
+    @include avariable(
+      "color",
+      ("menu-item-active-color"),
+      $menu-item-active-color
+    );
+    @include avariable(
+      "background-color",
+      ("menu-item-active-background-color"),
+      $menu-item-active-background-color
+    );
+  }
+
+  &--disabled {
+    @include avariable(
+      "color",
+      ("menu-item-disabled-color"),
+      $menu-item-disabled-color
+    );
+  }
+}

package/src/assets/scss/components/_modal.scss

@@ -0,0 +1,103 @@
+/* @docs */
+$modal-content-background-color: $white !default;
+$modal-content-border-radius: $base-border-radius !default;
+$modal-overlay-background-color: hsla(0, 0%, 4%, 0.86) !default;
+$modal-close-border-radius: $base-rounded-border-radius !default;
+$modal-close-right: 20px !default;
+$modal-close-top: 20px !default;
+$modal-close-size: 32px !default;
+$modal-close-color: $white !default;
+$modal-content-fullscreen-background-color: #f5f5f5 !default;
+$modal-content-max-height: calc(100vh - 160px) !default;
+$modal-content-margin: 0 auto !default;
+$modal-zindex: 40 !default;
+/* @docs */
+
+.o-modal {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  top: 0;
+
+  @include avariable("z-index", "modal-zindex", $modal-zindex);
+
+  &__overlay {
+    bottom: 0;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+
+    @include avariable(
+      "background-color",
+      "modal-overlay-background-color",
+      $modal-overlay-background-color
+    );
+  }
+
+  &__content {
+    overflow: auto;
+    position: relative;
+
+    @include avariable("margin", "modal-content-margin", $modal-content-margin);
+    @include avariable(
+      "max-height",
+      "modal-content-max-height",
+      $modal-content-max-height
+    );
+    @include avariable(
+      "background-color",
+      "modal-content-background-color",
+      $modal-content-background-color
+    );
+    @include avariable(
+      "border-radius",
+      "modal-content-border-radius",
+      $modal-content-border-radius
+    );
+
+    &--full-screen {
+      width: 100%;
+      height: 100%;
+      max-height: 100vh;
+      margin: 0;
+
+      @include avariable(
+        "background-color",
+        "modal-content-fullscreen-background-color",
+        $modal-content-fullscreen-background-color
+      );
+    }
+  }
+
+  &__close {
+    background: none;
+    position: fixed;
+    border: none;
+    display: inline-block;
+    vertical-align: top;
+
+    @include avariable(
+      "border-radius",
+      "modal-close-border-radius",
+      $modal-close-border-radius
+    );
+    @include avariable("right", "modal-close-right", $modal-close-right);
+    @include avariable("top", "modal-close-top", $modal-close-top);
+    @include avariable("height", "modal-close-size", $modal-close-size);
+    @include avariable("width", "modal-close-size", $modal-close-size);
+    @include avariable("color", "modal-close-color", $modal-close-color);
+  }
+
+  &--mobile {
+    .o-modal__content {
+      width: 100%;
+    }
+  }
+}

package/src/assets/scss/components/_notification.scss

@@ -0,0 +1,212 @@
+@use "sass:list";
+
+/* @docs */
+$notification-background-color: $primary !default;
+$notification-border-radius: 4px !default;
+$notification-padding: 1.75em 1.75em !default;
+$notification-margin-bottom: 1.5rem !default;
+$notification-animantion: append-animate 0.3s linear !default;
+$notification-color: $white !default;
+$notification-close-border-radius: $base-rounded-border-radius !default;
+$notification-close-right: 0.5rem !default;
+$notification-close-top: 0.5rem !default;
+$notification-close-size: 20px !default;
+$notification-close-color: $white !default;
+$notification-close-background-color: hsla(0, 0%, 4%, 0.2) !default;
+$notification-icon-margin-right: 1rem !default;
+$notification-notices-padding: 2em !default;
+$notification-notices-zindex: 1000 !default;
+/* @docs */
+
+.o-notification {
+  // Modifiers
+  @include avariable(
+    "background-color",
+    "notification-background-color",
+    $notification-background-color
+  );
+  @include avariable("color", "notification-color", $notification-color);
+  @include avariable(
+    "border-radius",
+    "notification-border-radius",
+    $notification-border-radius
+  );
+  @include avariable("padding", "notification-padding", $notification-padding);
+  @include avariable(
+    "margin-bottom",
+    "notification-margin-bottom",
+    $notification-margin-bottom
+  );
+
+  position: relative;
+  transform-origin: 50% 0;
+
+  &__content {
+    flex-basis: auto;
+    flex-grow: 1;
+    flex-shrink: 1;
+    text-align: inherit;
+    overflow-y: hidden;
+    overflow-x: auto;
+  }
+
+  &__wrapper {
+    align-items: flex-start;
+    display: flex;
+    text-align: inherit;
+    padding-top: 0;
+    border: 0;
+  }
+
+  &__icon {
+    flex-basis: auto;
+    flex-grow: 0;
+    flex-shrink: 0;
+
+    @include avariable(
+      "margin-right",
+      "notification-icon-margin-right",
+      $notification-icon-margin-right
+    );
+  }
+
+  &__close {
+    position: absolute;
+    border: none;
+    cursor: pointer;
+    pointer-events: auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-grow: 0;
+    flex-shrink: 0;
+    vertical-align: top;
+
+    @include avariable(
+      "background-color",
+      "notification-close-background-color",
+      $notification-close-background-color
+    );
+    @include avariable(
+      "border-radius",
+      "notification-close-border-radius",
+      $notification-close-border-radius
+    );
+    @include avariable(
+      "right",
+      "notification-close-right",
+      $notification-close-right
+    );
+    @include avariable(
+      "top",
+      "notification-close-top",
+      $notification-close-top
+    );
+    @include avariable(
+      "height",
+      "notification-close-size",
+      $notification-close-size
+    );
+    @include avariable(
+      "width",
+      "notification-close-size",
+      $notification-close-size
+    );
+    @include avariable(
+      "color",
+      "notification-close-color",
+      $notification-close-color
+    );
+  }
+
+  @each $name, $pair in $colors {
+    $color: list.nth($pair, 1);
+    $color-invert: list.nth($pair, 2);
+    &--#{$name} {
+      border-color: transparent;
+
+      @include avariable("background-color", ("variant-" + #{$name}), $color);
+      @include avariable(
+        "color",
+        ("variant-invert-" + #{$name}),
+        $color-invert
+      );
+
+      &:hover {
+        // background-color: darken($color, 2.5%)
+        // IE 11 needs polyfill
+        filter: brightness(97.5%);
+      }
+    }
+  }
+}
+
+.o-notices {
+  position: fixed;
+  display: flex;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  overflow: hidden;
+  pointer-events: none;
+
+  @include avariable(
+    "padding",
+    "notification-notices-padding",
+    $notification-notices-padding
+  );
+  @include avariable(
+    "z-index",
+    "notification-notices-zindex",
+    $notification-notices-zindex
+  );
+
+  .o-notification {
+    pointer-events: stroke;
+    max-width: 600px;
+
+    @include avariable(
+      "animation",
+      "notification-animantion",
+      $notification-animantion
+    );
+
+    &--top,
+    &--bottom {
+      align-self: center;
+    }
+
+    &--top-right,
+    &--bottom-right {
+      align-self: flex-end;
+    }
+
+    &--top-left,
+    &--bottom-left {
+      align-self: flex-start;
+    }
+  }
+
+  &--top {
+    flex-direction: column;
+  }
+
+  &--bottom {
+    flex-direction: column-reverse;
+
+    // Since the columns are reversed, we need to reverse the margin logic from
+    // :not(:last-child) to :not(:first-child)
+    .o-notification {
+      margin-bottom: 0;
+
+      &:not(:first-child) {
+        margin-bottom: $notification-margin-bottom;
+      }
+    }
+  }
+
+  &__custom-container {
+    position: absolute;
+  }
+}