@oruga-ui/theme-oruga 0.0.1

package/src/assets/scss/components/_dropdown.scss

@@ -0,0 +1,241 @@
+/* @docs */
+$dropdown-disabled-opacity: $base-disabled-opacity !default;
+$dropdown-item-active-background-color: $primary !default;
+$dropdown-item-active-color: $primary-invert !default;
+$dropdown-item-color: #000000 !default;
+$dropdown-item-disabled-opacity: $base-disabled-opacity !default;
+$dropdown-item-font-size: $base-font-size !default;
+$dropdown-item-hover-background-color: #f5f5f5 !default;
+$dropdown-item-hover-color: #000000 !default;
+$dropdown-item-line-height: $base-line-height !default;
+$dropdown-item-padding: 0.375rem 1rem !default;
+$dropdown-item-font-weight: 400 !default;
+$dropdown-menu-background: #ffffff !default;
+$dropdown-menu-border-radius: $base-border-radius !default;
+$dropdown-menu-box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1),
+  0 0 0 1px rgba(10, 10, 10, 0.02) !default;
+$dropdown-menu-margin: 0 !default;
+$dropdown-menu-padding: 0.5rem 0 0.5rem 0 !default;
+$dropdown-menu-width: 12rem !default;
+$dropdown-menu-zindex: 20 !default;
+$dropdown-mobile-max-height: calc(100vh - 120px) !default;
+$dropdown-mobile-max-width: 460px !default;
+$dropdown-mobile-overlay-color: rgba(#000000, 0.86) !default;
+$dropdown-mobile-overlay-zindex: 40 !default;
+$dropdown-mobile-width: calc(100vw - 40px) !default;
+$dropdown-mobile-zindex: 50 !default;
+/* @docs */
+
+.o-drop {
+  display: inline-flex;
+  position: relative;
+  vertical-align: top;
+
+  &--inline {
+    display: inline;
+
+    .o-drop__menu {
+      position: static;
+      display: inline-block;
+      padding: 0;
+    }
+  }
+
+  &__overlay {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    top: 0;
+    cursor: pointer;
+    display: none;
+
+    @include avariable(
+      "background-color",
+      "dropdown-mobile-overlay-color",
+      $dropdown-mobile-overlay-color
+    );
+    @include avariable(
+      "z-index",
+      "dropdown-mobile-overlay-zindex",
+      $dropdown-mobile-overlay-zindex
+    );
+  }
+
+  &__trigger {
+    width: 100%;
+  }
+
+  &__menu {
+    position: absolute;
+    left: 0;
+    top: 100%;
+    display: block;
+
+    @include avariable(
+      "min-width",
+      "dropdown-menu-width",
+      $dropdown-menu-width
+    );
+    @include avariable(
+      "z-index",
+      "dropdown-menu-zindex",
+      $dropdown-menu-zindex
+    );
+    @include avariable(
+      "background-color",
+      "dropdown-menu-background",
+      $dropdown-menu-background
+    );
+    @include avariable(
+      "border-radius",
+      "dropdown-menu-border-radius",
+      $dropdown-menu-border-radius
+    );
+    @include avariable(
+      "box-shadow",
+      "dropdown-menu-box-shadow",
+      $dropdown-menu-box-shadow
+    );
+    @include avariable(
+      "padding",
+      "dropdown-menu-padding",
+      $dropdown-menu-padding
+    );
+    @include avariable("margin", "dropdown-menu-margin", $dropdown-menu-margin);
+
+    &--top-left {
+      top: auto;
+      bottom: 100%;
+      right: 0;
+      left: auto;
+    }
+
+    &--bottom-left {
+      right: 0;
+      left: auto;
+    }
+
+    &--top-right {
+      top: auto;
+      bottom: 100%;
+    }
+  }
+
+  &__item {
+    display: block;
+    position: relative;
+    cursor: pointer;
+
+    @include avariable("color", "dropdown-item-color", $dropdown-item-color);
+    @include avariable(
+      "font-size",
+      "dropdown-item-font-size",
+      $dropdown-item-font-size
+    );
+    @include avariable(
+      "font-weight",
+      "dropdown-item-font-weight",
+      $dropdown-item-font-weight
+    );
+    @include avariable(
+      "line-height",
+      "dropdown-item-line-height",
+      $dropdown-item-line-height
+    );
+    @include avariable(
+      "padding",
+      "dropdown-item-padding",
+      $dropdown-item-padding
+    );
+
+    &--disabled {
+      @include avariable(
+        "opacity",
+        "dropdown-item-disabled-opacity",
+        $dropdown-item-disabled-opacity
+      );
+      pointer-events: none;
+    }
+
+    &--active {
+      @include avariable(
+        "background-color",
+        "dropdown-item-active-background-color",
+        $dropdown-item-active-background-color
+      );
+      @include avariable(
+        "color",
+        "dropdown-item-active-color",
+        $dropdown-item-active-color
+      );
+    }
+
+    &:hover:not(&--active) {
+      @include avariable(
+        "background-color",
+        "dropdown-item-hover-background-color",
+        $dropdown-item-hover-background-color
+      );
+      @include avariable(
+        "color",
+        "dropdown-item-hover-color",
+        $dropdown-item-hover-color
+      );
+    }
+  }
+
+  &--expanded {
+    width: 100%;
+
+    .o-drop__menu {
+      width: 100%;
+    }
+  }
+
+  &--disabled {
+    @include avariable(
+      "opacity",
+      "dropdown-disabled-opacity",
+      $dropdown-disabled-opacity
+    );
+    pointer-events: none;
+  }
+
+  &--mobile {
+    > .o-drop__menu {
+      position: fixed;
+      top: 25%;
+      left: 50%;
+      bottom: auto;
+      right: auto;
+      transform: translate3d(-50%, -25%, 0);
+      overflow-y: auto;
+
+      @include avariable(
+        "width",
+        "dropdown-mobile-width",
+        $dropdown-mobile-width
+      );
+      @include avariable(
+        "max-width",
+        "dropdown-mobile-max-width",
+        $dropdown-mobile-max-width
+      );
+      @include avariable(
+        "max-height",
+        "dropdown-mobile-max-height",
+        $dropdown-mobile-max-height
+      );
+      @include avariable(
+        "z-index",
+        "dropdown-mobile-zindex",
+        $dropdown-mobile-zindex
+      );
+    }
+
+    > .o-drop__overlay {
+      display: block;
+    }
+  }
+}

package/src/assets/scss/components/_field.scss

@@ -0,0 +1,154 @@
+@use "sass:list";
+
+/* @docs */
+$field-label-color: #363636 !default;
+$field-label-font-weight: 600 !default;
+$field-margin-bottom: 0.75rem !default;
+$field-message-font-size: 0.75rem !default;
+$field-message-margin-top: 0.25rem !default;
+$field-margin-right: 0.37rem !default;
+$field-horizontal-label-margin: 0 1.5rem 0 0 !default;
+/* @docs */
+
+.o-field {
+  flex-grow: 1;
+
+  &:not(:last-child) {
+    @include avariable(
+      "margin-bottom",
+      "field-margin-bottom",
+      $field-margin-bottom
+    );
+  }
+
+  &__label {
+    display: block;
+
+    @include avariable("color", "field-label-color", $field-label-color);
+    @include avariable("font-size", "base-font-size", $base-font-size);
+    @include avariable(
+      "font-weight",
+      "field-label-font-weight",
+      $field-label-font-weight
+    );
+
+    @each $name, $value in $sizes {
+      &-#{$name} {
+        @include avariable(
+          "font-size",
+          ("field-font-size-" + #{$name}),
+          $value
+        );
+      }
+    }
+  }
+
+  &__message {
+    display: block;
+
+    @include avariable(
+      "font-size",
+      "field-message-font-size",
+      $field-message-font-size
+    );
+    @include avariable(
+      "margin-top",
+      "field-message-margin-top",
+      $field-message-margin-top
+    );
+
+    @each $name, $pair in $colors {
+      $color: list.nth($pair, 1);
+      &-#{$name} {
+        @include avariable("color", ("variant-" + #{$name}), $color);
+      }
+    }
+  }
+
+  &--addons {
+    display: flex;
+    justify-content: flex-start;
+
+    > *:first-child:not(:only-child) button,
+    > button:first-child,
+    > *:first-child:not(:only-child) input,
+    > input:first-child,
+    > *:first-child:not(:only-child) select,
+    > select:first-child {
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+    }
+
+    > *:last-child:not(:only-child) button,
+    > button:last-child,
+    > *:last-child:not(:only-child) input,
+    > input:last-child,
+    > *:last-child:not(:only-child) select,
+    > select:last-child {
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+    }
+
+    > *:not(:first-child):not(:last-child) button,
+    > button:not(:first-child):not(:last-child),
+    > *:not(:first-child):not(:last-child) input,
+    > input:not(:first-child):not(:last-child),
+    > *:not(:first-child):not(:last-child) select,
+    > select:not(:first-child):not(:last-child) {
+      border-radius: 0;
+    }
+  }
+
+  &--grouped {
+    display: flex;
+
+    @include side-flex-gap($field-margin-right);
+  }
+
+  &--grouped-multiline {
+    flex-wrap: wrap;
+
+    &:last-child {
+      @include avariable(
+        "margin-bottom",
+        "field-margin-bottom",
+        -$field-margin-bottom
+      );
+    }
+  }
+
+  &__horizontal-body {
+    display: flex;
+    flex-basis: 0;
+    flex-grow: 5;
+    flex-shrink: 1;
+
+    @include side-flex-gap($field-margin-right);
+  }
+
+  &--horizontal {
+    display: flex;
+  }
+
+  &__horizontal-label {
+    flex-basis: 0;
+    flex-grow: 1;
+    flex-shrink: 0;
+    margin: $field-horizontal-label-margin;
+    text-align: right;
+  }
+
+  &--mobile {
+    .o-field__horizontal-body {
+      all: unset;
+    }
+
+    &.o-field--horizontal {
+      all: unset;
+    }
+
+    .o-field__horizontal-label {
+      all: unset;
+    }
+  }
+}

package/src/assets/scss/components/_icon.scss

@@ -0,0 +1,53 @@
+@use "sass:list";
+
+/* @docs */
+$icon-spin-duration: 2s !default;
+/* @docs */
+
+@keyframes icon-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+
+.o-icon {
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+  transition: transform $speed-slow $easing, opacity $speed $easing;
+
+  @each $name, $value in $sizes {
+    &--#{$name} {
+      @include avariable("font-size", ("icon-font-size-" + #{$name}), $value);
+    }
+  }
+  @each $name, $pair in $colors {
+    $color: list.nth($pair, 1);
+    &--#{$name} {
+      @include avariable("color", ("variant-" + #{$name}), $color);
+    }
+  }
+
+  &--clickable {
+    pointer-events: auto;
+    cursor: pointer;
+  }
+
+  &--spin {
+    animation-name: icon-spin;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+
+    @include avariable(
+      "animation-duration",
+      "icon-spin-duration",
+      $icon-spin-duration
+    );
+  }
+}

package/src/assets/scss/components/_input.scss

@@ -0,0 +1,153 @@
+@use "sass:list";
+
+/* @docs */
+$input-background-color: #ffffff !default;
+$input-border-color: $grey-lighter !default;
+$input-border-style: solid !default;
+$input-border-width: 1px !default;
+$input-border-radius: $base-border-radius !default;
+$input-rounded-border-radius: $base-rounded-border-radius !default;
+$input-box-shadow: inset 0 1px 2px hsla(0, 0%, 4%, 0.1) !default;
+$input-color: #363636 !default;
+$input-icon-zindex: 4 !default;
+$input-counter-font-size: 0.75rem !default;
+$input-counter-margin: 0.25rem 0 0 0.5rem !default;
+$input-height: $control-height !default;
+$input-line-height: $base-line-height !default;
+$input-margin: 0 !default;
+$input-padding: $control-padding-vertical $control-padding-horizontal !default;
+$input-textarea-max-height: 600px !default;
+$input-textarea-min-height: 120px !default;
+$input-textarea-padding: 0.625em !default;
+// @deprecated
+$input-width: 100% !default;
+// @deprecated
+$input-max-width: 100% !default;
+/* @docs */
+
+.o-ctrl-input {
+  display: block;
+  position: relative;
+
+  &--expanded {
+    width: 100%;
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
+}
+
+.o-input {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  display: inline-flex;
+  position: relative;
+  vertical-align: top;
+  width: $input-width;
+
+  @include avariable("box-shadow", "input-box-shadow", $input-box-shadow);
+  @include avariable("max-width", "input-max-width", $input-max-width);
+  @include avariable(
+    "background-color",
+    "input-background-color",
+    $input-background-color
+  );
+  @include avariable("border-color", "input-border-color", $input-border-color);
+  @include avariable("border-style", "input-border-style", $input-border-style);
+  @include avariable("border-width", "input-border-width", $input-border-width);
+  @include avariable(
+    "border-radius",
+    "input-border-radius",
+    $input-border-radius
+  );
+  @include avariable("color", "input-color", $input-color);
+  @include avariable("font-size", "base-font-size", $base-font-size);
+  @include avariable("height", "input-height", $input-height);
+  @include avariable("line-height", "input-line-height", $input-line-height);
+  @include avariable("padding", "input-padding", $input-padding);
+  @include avariable("margin", "input-margin", $input-margin);
+
+  &-iconspace-left {
+    @include avariable("padding-left", "input-height", $input-height);
+  }
+
+  &-iconspace-right {
+    @include avariable("padding-right", "input-height", $input-height);
+  }
+
+  &--rounded {
+    @include avariable(
+      "border-radius",
+      "input-rounded-border-radius",
+      $input-rounded-border-radius
+    );
+  }
+
+  @each $name, $value in $sizes {
+    &--#{$name} {
+      @include avariable("font-size", ("input-font-size-" + #{$name}), $value);
+    }
+  }
+  @each $name, $pair in $colors {
+    $color: list.nth($pair, 1);
+    &--#{$name} {
+      @include avariable("border-color", ("variant-" + #{$name}), $color);
+    }
+  }
+
+  &__textarea {
+    display: block;
+    max-width: 100%;
+    min-width: 100%;
+    height: auto;
+    resize: vertical;
+
+    @include avariable(
+      "padding",
+      "input-textarea-padding",
+      $input-textarea-padding
+    );
+
+    &:not([rows]) {
+      @include avariable(
+        "max-height",
+        "input-textarea-max-height",
+        $input-textarea-max-height
+      );
+      @include avariable(
+        "min-height",
+        "input-textarea-min-height",
+        $input-textarea-min-height
+      );
+    }
+  }
+
+  &__counter {
+    display: block;
+    float: right;
+
+    @include avariable(
+      "font-size",
+      "input-counter-font-size",
+      $input-counter-font-size
+    );
+    @include avariable("margin", "input-counter-margin", $input-counter-margin);
+  }
+
+  &__icon-left,
+  &__icon-right {
+    position: absolute;
+    top: 0;
+    height: 100%;
+
+    @include avariable("width", "input-height", $input-height);
+    @include avariable("z-index", "input-icon-zindex", $input-icon-zindex);
+  }
+
+  &__icon-right {
+    right: 0;
+  }
+
+  &__icon-left {
+    left: 0;
+  }
+}