@oruga-ui/theme-oruga 0.4.2 → 0.5.0

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

@@ -1,268 +0,0 @@
-/* @docs */
-$dropdown-disabled-opacity: var(--#{$prefix}base-disabled-opacity) !default;
-$dropdown-item-active-background-color: var(--#{$prefix}primary) !default;
-$dropdown-item-active-color: var(--#{$prefix}primary-invert) !default;
-$dropdown-item-color: #000000 !default;
-$dropdown-item-disabled-opacity: var(
-  --#{$prefix}base-disabled-opacity
-) !default;
-$dropdown-item-font-size: var(--#{$prefix}base-font-size) !default;
-$dropdown-item-hover-background-color: #f5f5f5 !default;
-$dropdown-item-hover-color: #000000 !default;
-$dropdown-item-line-height: var(--#{$prefix}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: var(--#{$prefix}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-spacer: 0px !default;
-$dropdown-menu-margin: 0 !default;
-$dropdown-menu-padding: 0.5rem 0 0.5rem 0 !default;
-$dropdown-menu-width: 12rem !default;
-$dropdown-menu-zindex: 50 !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: 55 !default;
-$dropdown-mobile-width: calc(100vw - 40px) !default;
-$dropdown-mobile-zindex: 60 !default;
-/* @docs */
-
-.o-drop {
-  display: inline-flex;
-  position: relative;
-  vertical-align: top;
-
-  &__overlay {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    top: 0;
-    cursor: pointer;
-    display: none;
-
-    background-color: var(
-      --#{$prefix}dropdown-mobile-overlay-color,
-      $dropdown-mobile-overlay-color
-    );
-    z-index: var(
-      --#{$prefix}dropdown-mobile-overlay-zindex,
-      $dropdown-mobile-overlay-zindex
-    );
-  }
-
-  &__trigger {
-    width: 100%;
-  }
-
-  &__menu {
-    position: absolute;
-    display: block;
-
-    min-width: var(--#{$prefix}dropdown-menu-width, $dropdown-menu-width);
-    z-index: var(--#{$prefix}dropdown-menu-zindex, $dropdown-menu-zindex);
-    background-color: var(
-      --#{$prefix}dropdown-menu-background,
-      $dropdown-menu-background
-    );
-    border-radius: var(
-      --#{$prefix}dropdown-menu-border-radius,
-      $dropdown-menu-border-radius
-    );
-    box-shadow: var(
-      --#{$prefix}dropdown-menu-box-shadow,
-      $dropdown-menu-box-shadow
-    );
-    padding: var(--#{$prefix}dropdown-menu-padding, $dropdown-menu-padding);
-    margin: var(--#{$prefix}dropdown-menu-margin, $dropdown-menu-margin);
-
-    &--bottom {
-      left: 50%;
-      right: auto;
-      top: calc(
-        100% + var(--#{$prefix}dropdown-menu-spacer, $dropdown-menu-spacer)
-      );
-      bottom: auto;
-      transform: translateX(-50%);
-    }
-
-    &--top {
-      left: 50%;
-      right: auto;
-      top: auto;
-      bottom: calc(
-        100% + var(--#{$prefix}dropdown-menu-spacer, $dropdown-menu-spacer)
-      );
-      transform: translateX(-50%);
-    }
-
-    &--left {
-      right: calc(
-        100% + var(--#{$prefix}dropdown-menu-spacer, $dropdown-menu-spacer)
-      );
-      left: auto;
-      top: 50%;
-      bottom: auto;
-      transform: translateY(-50%);
-    }
-
-    &--right {
-      right: auto;
-      left: calc(
-        100% + var(--#{$prefix}dropdown-menu-spacer, $dropdown-menu-spacer)
-      );
-      top: 50%;
-      bottom: auto;
-      transform: translateY(-50%);
-    }
-
-    &--top-right {
-      right: 0;
-      left: auto;
-      top: auto;
-      bottom: calc(
-        100% + var(--#{$prefix}dropdown-menu-spacer, $dropdown-menu-spacer)
-      );
-    }
-
-    &--top-left {
-      right: auto;
-      left: 0;
-      top: auto;
-      bottom: calc(
-        100% + var(--#{$prefix}dropdown-menu-spacer, $dropdown-menu-spacer)
-      );
-    }
-
-    &--bottom-right {
-      right: 0;
-      left: auto;
-      top: calc(
-        100% + var(--#{$prefix}dropdown-menu-spacer, $dropdown-menu-spacer)
-      );
-      bottom: auto;
-    }
-
-    &--bottom-left {
-      right: auto;
-      left: 0;
-      top: calc(
-        100% + var(--#{$prefix}dropdown-menu-spacer, $dropdown-menu-spacer)
-      );
-      bottom: auto;
-    }
-  }
-
-  &__item {
-    display: block;
-    position: relative;
-
-    color: var(--#{$prefix}dropdown-item-color, $dropdown-item-color);
-    font-size: var(
-      --#{$prefix}dropdown-item-font-size,
-      $dropdown-item-font-size
-    );
-    font-weight: var(
-      --#{$prefix}dropdown-item-font-weight,
-      $dropdown-item-font-weight
-    );
-    line-height: var(
-      --#{$prefix}dropdown-item-line-height,
-      $dropdown-item-line-height
-    );
-    padding: var(--#{$prefix}dropdown-item-padding, $dropdown-item-padding);
-
-    &--disabled {
-      opacity: var(
-        --#{$prefix}dropdown-item-disabled-opacity,
-        $dropdown-item-disabled-opacity
-      );
-      pointer-events: none;
-    }
-
-    &--active {
-      background-color: var(
-        --#{$prefix}dropdown-item-active-background-color,
-        $dropdown-item-active-background-color
-      );
-      color: var(
-        --#{$prefix}dropdown-item-active-color,
-        $dropdown-item-active-color
-      );
-    }
-
-    &--clickable {
-      cursor: pointer;
-    }
-
-    &--clickable:not(&--active):hover {
-      background-color: var(
-        --#{$prefix}dropdown-item-hover-background-color,
-        $dropdown-item-hover-background-color
-      );
-      color: var(
-        --#{$prefix}dropdown-item-hover-color,
-        $dropdown-item-hover-color
-      );
-    }
-  }
-
-  &--inline {
-    display: inline;
-
-    .o-drop__menu {
-      position: static;
-      display: inline-block;
-      padding: 0;
-    }
-  }
-
-  &--expanded {
-    width: 100%;
-
-    .o-drop__menu {
-      width: 100%;
-    }
-  }
-
-  &--disabled {
-    opacity: var(
-      --#{$prefix}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;
-      width: var(--#{$prefix}dropdown-mobile-width, $dropdown-mobile-width);
-      max-width: var(
-        --#{$prefix}dropdown-mobile-max-width,
-        $dropdown-mobile-max-width
-      );
-      max-height: var(
-        --#{$prefix}dropdown-mobile-max-height,
-        $dropdown-mobile-max-height
-      );
-      z-index: var(--#{$prefix}dropdown-mobile-zindex, $dropdown-mobile-zindex);
-    }
-
-    > .o-drop__overlay {
-      display: block;
-    }
-  }
-
-  &--teleport {
-    width: unset;
-  }
-}

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

@@ -1,132 +0,0 @@
-@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) {
-    margin-bottom: var(--#{$prefix}field-margin-bottom, $field-margin-bottom);
-  }
-
-  &__label {
-    display: block;
-    color: var(--#{$prefix}field-label-color, $field-label-color);
-    font-size: var(--#{$prefix}base-font-size, $base-font-size);
-    font-weight: var(
-      --#{$prefix}field-label-font-weight,
-      $field-label-font-weight
-    );
-
-    @each $name, $value in $sizes {
-      &-#{$name} {
-        font-size: var(--#{$prefix}field-font-size-#{$name}, $value);
-      }
-    }
-  }
-
-  &__message {
-    display: block;
-    font-size: var(
-      --#{$prefix}field-message-font-size,
-      $field-message-font-size
-    );
-    margin-top: var(
-      --#{$prefix}field-message-margin-top,
-      $field-message-margin-top
-    );
-
-    @each $name, $pair in $colors {
-      $color: list.nth($pair, 1);
-      &-#{$name} {
-        color: var(--#{$prefix}variant-#{$name}, $color);
-      }
-    }
-  }
-
-  &--addons {
-    display: flex;
-    justify-content: flex-start;
-
-    > button:first-child,
-    > *:first-child:not(:only-child) button,
-    > input:first-child,
-    > *:first-child:not(:only-child) input,
-    > select:first-child,
-    > *:first-child:not(:only-child) select {
-      border-bottom-right-radius: 0;
-      border-top-right-radius: 0;
-    }
-
-    > button:last-child,
-    > *:last-child:not(:only-child) button,
-    > input:last-child,
-    > *:last-child:not(:only-child) input,
-    > select:last-child,
-    > *:last-child:not(:only-child) select {
-      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 {
-      margin-bottom: var(--#{$prefix}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,
-    .o-field__horizontal-label,
-    .o-field__horizontal-body {
-      display: block;
-      text-align: inherit;
-    }
-  }
-}

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

@@ -1,53 +0,0 @@
-@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 $animation-speed $animation-timing,
-    opacity $animation-speed-fast $animation-timing;
-
-  @each $name, $value in $sizes {
-    &--#{$name} {
-      font-size: var(--#{$prefix}icon-font-size-#{$name}, $value);
-    }
-  }
-  @each $name, $pair in $colors {
-    $color: list.nth($pair, 1);
-    &--#{$name} {
-      color: var(--#{$prefix}variant-#{$name}, $color);
-    }
-  }
-
-  &--clickable {
-    pointer-events: auto;
-    cursor: pointer;
-  }
-
-  &--spin {
-    animation-name: icon-spin;
-    animation-iteration-count: infinite;
-    animation-timing-function: linear;
-    animation-duration: var(
-      --#{$prefix}icon-spin-duration,
-      $icon-spin-duration
-    );
-  }
-}

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

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

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

@@ -1,37 +0,0 @@
-/* @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;
-  z-index: var(--#{$prefix}loading-zindex, $loading-zindex);
-
-  &--fullpage {
-    position: fixed;
-    z-index: var(--#{$prefix}loading-fullpage-zindex, $loading-fullpage-zindex);
-  }
-
-  &__overlay {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    top: 0;
-    background: var(
-      --#{$prefix}loading-overlay-legacy,
-      $loading-overlay-legacy
-    );
-    background: var(--#{$prefix}loading-overlay, $loading-overlay);
-  }
-}