@oruga-ui/theme-oruga 0.4.1 → 0.5.0

package/src/assets/scss/components/_select.scss

@@ -1,156 +0,0 @@
-@use "sass:list";
-
-/* @docs */
-$select-background-color: #fff !default;
-$select-border-color: var(--#{$prefix}grey-lighter) !default;
-$select-border-style: solid !default;
-$select-border-width: 1px !default;
-$select-border-radius: var(--#{$prefix}base-border-radius) !default;
-$select-rounded-border-radius: var(
-  --#{$prefix}base-border-radius-rounded
-) !default;
-$select-box-shadow: $control-box-shadow !default;
-$select-color: #363636 !default;
-$select-icon-zindex: 4 !default;
-$select-height: $control-height !default;
-$select-line-height: var(--#{$prefix}base-line-height) !default;
-$select-margin: 0 !default;
-$select-padding: $control-padding-vertical $control-padding-horizontal !default;
-$select-arrow-color: $select-color !default;
-$select-arrow-size: 1rem !default;
-$select-placeholder-opacity: var(--#{$prefix}base-disabled-opacity) !default;
-/* @docs */
-
-@function svg_arrow($color) {
-  $start: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:serif="http://www.serif.com/" width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">';
-  $content: '<g transform="matrix(5.70052,0,0,5.70052,-1329.79,-547.054)"><path d="M233.451,101.749L235.617,99.422L242.013,105.565L248.463,99.422L250.642,101.749L242.013,110.052L233.451,101.749Z" style="fill:#{$color};stroke:white;stroke-width:0.18px;"/></g>';
-  $end: "</svg>";
-
-  @return svg-encode("#{$start}#{$content}#{$end}");
-}
-
-.o-ctrl-sel {
-  display: inline-flex;
-  position: relative;
-
-  &--expanded {
-    width: 100%;
-    flex-grow: 1;
-
-    .o-sel {
-      width: 100%;
-    }
-  }
-}
-
-.o-sel {
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  display: inline-block;
-  position: relative;
-  vertical-align: top;
-  cursor: pointer;
-  justify-content: flex-start;
-  align-items: center;
-
-  box-shadow: var(--#{$prefix}select-box-shadow, $select-box-shadow);
-  background-color: var(
-    --#{$prefix}select-background-color,
-    $select-background-color
-  );
-  border-color: var(--#{$prefix}select-border-color, $select-border-color);
-  border-width: var(--#{$prefix}select-border-width, $select-border-width);
-  border-style: var(--#{$prefix}select-border-style, $select-border-style);
-  border-radius: var(--#{$prefix}select-border-radius, $select-border-radius);
-  color: var(--#{$prefix}select-color, $select-color);
-  font-size: var(--#{$prefix}base-font-size, $base-font-size);
-  height: var(--#{$prefix}select-height, $select-height);
-  line-height: var(--#{$prefix}select-line-height, $select-line-height);
-  padding: var(--#{$prefix}select-padding, $select-padding);
-  margin: var(--#{$prefix}select-margin, $select-margin);
-
-  &-arrow {
-    background-image: url(svg_arrow($select-arrow-color));
-    background-repeat: no-repeat;
-    background-size: var(--#{$prefix}select-arrow-size, $select-arrow-size);
-    background-position: calc(
-        100% - var(--#{$prefix}select-arrow-size, $select-arrow-size) * 0.5
-      )
-      center;
-    padding-right: calc(
-      var(--#{$prefix}select-arrow-size, $select-arrow-size) * 2
-    );
-  }
-
-  &-iconspace-left {
-    padding-left: var(--#{$prefix}select-height, $select-height);
-  }
-
-  &-iconspace-right {
-    padding-right: var(--#{$prefix}select-height, $select-height);
-  }
-
-  // size variants
-  @each $name, $value in $sizes {
-    &--#{$name} {
-      font-size: var(--#{$prefix}select-font-size-#{$name}, $value);
-    }
-  }
-
-  // color variants
-  @each $name, $pair in $colors {
-    $color: list.nth($pair, 1);
-
-    &--#{$name} {
-      --#{$prefix}focus: #{createFocus($color)};
-
-      border-color: var(--#{$prefix}variant-#{$name}, $color);
-    }
-  }
-
-  &--rounded {
-    border-radius: var(
-      --#{$prefix}select-rounded-border-radius,
-      $select-rounded-border-radius
-    );
-  }
-
-  &--multiple {
-    height: auto;
-    padding: 0;
-  }
-
-  &--placeholder {
-    opacity: var(
-      --#{$prefix}select-placeholder-opacity,
-      $select-placeholder-opacity
-    );
-  }
-
-  &__icon-left,
-  &__icon-right {
-    position: absolute;
-    top: 0;
-    height: 100%;
-    width: var(--#{$prefix}select-height, $select-height);
-    z-index: var(--#{$prefix}select-icon-zindex, $select-icon-zindex);
-  }
-
-  &__icon-right {
-    right: 0;
-  }
-
-  &__icon-left {
-    left: 0;
-  }
-
-  &[disabled] {
-    cursor: inherit;
-  }
-
-  // focus effect
-  &:focus,
-  &:focus-within {
-    box-shadow: 0 0 0 0.25rem var(--#{$prefix}focus);
-  }
-}

package/src/assets/scss/components/_sidebar.scss

@@ -1,139 +0,0 @@
-@use "sass:list";
-
-/* @docs */
-$sidebar-overlay: hsla(0, 0%, 4%, 0.86) !default;
-$sidebar-box-shadow: 5px 0px 13px 3px rgba(var(--#{$prefix}black), 0.1) !default;
-$sidebar-content-background-color: var(--#{$prefix}grey-lighter) !default;
-$sidebar-border-radius: var(--#{$prefix}base-border-radius) !default;
-$sidebar-border-width: 1px !default;
-$sidebar-border-color: rgba(0, 0, 0, 0.175) !default;
-$sidebar-reduced-width: 80px !default;
-$sidebar-width: 260px !default;
-$sidebar-zindex: 100 !default;
-/* @docs */
-
-.o-side {
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  display: none;
-
-  &__content {
-    position: absolute;
-    background-color: var(
-      --#{$prefix}sidebar-content-background-color,
-      $sidebar-content-background-color
-    );
-    border-radius: var(
-      --#{$prefix}sidebar-border-radius,
-      $sidebar-border-radius
-    );
-    box-shadow: var(--#{$prefix}sidebar-box-shadow, $sidebar-box-shadow);
-
-    @each $name, $pair in $colors {
-      $color: list.nth($pair, 1);
-      &--#{$name} {
-        background-color: var(--#{$prefix}variant-#{$name}), $color;
-      }
-    }
-
-    // position
-    &--right,
-    &--left {
-      transition: width var(--#{$prefix}transition-duration)
-        var(--#{$prefix}transition-timing);
-      width: var(--#{$prefix}sidebar-width, $sidebar-width);
-    }
-
-    &--top,
-    &--bottom {
-      transition: height var(--#{$prefix}transition-duration)
-        var(--#{$prefix}transition-timing);
-      height: var(--#{$prefix}sidebar-width, $sidebar-width);
-    }
-
-    &--right {
-      left: auto;
-      right: 0;
-      border-left: var(--#{$prefix}sidebar-border-width, $sidebar-border-width)
-        solid var(--#{$prefix}sidebar-border-color, $sidebar-border-color);
-    }
-
-    &--left {
-      left: 0;
-      right: auto;
-      border-right: var(--#{$prefix}sidebar-border-width, $sidebar-border-width)
-        solid var(--#{$prefix}sidebar-border-color, $sidebar-border-color);
-    }
-
-    &--top {
-      top: 0;
-      bottom: auto;
-      border-bottom: var(
-          --#{$prefix}sidebar-border-width,
-          $sidebar-border-width
-        )
-        solid var(--#{$prefix}sidebar-border-color, $sidebar-border-color);
-    }
-
-    &--bottom {
-      top: auto;
-      bottom: 0;
-      border-top: var(--#{$prefix}sidebar-border-width, $sidebar-border-width)
-        solid var(--#{$prefix}sidebar-border-color, $sidebar-border-color);
-    }
-
-    &--reduced {
-      width: var(--#{$prefix}sidebar-reduced-width, $sidebar-reduced-width);
-
-      &-expand {
-        &:hover {
-          transition: width var(--#{$prefix}transition-duration)
-            var(--#{$prefix}transition-timing);
-          width: var(--#{$prefix}sidebar-width, $sidebar-width);
-        }
-      }
-    }
-
-    &--fullwidth {
-      width: 100%;
-      max-width: 100%;
-    }
-
-    &--fullheight {
-      height: 100%;
-      max-height: 100%;
-    }
-  }
-
-  &__overlay {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    top: 0;
-    background: var(--#{$prefix}sidebar-overlay, $sidebar-overlay);
-  }
-
-  &--active {
-    display: block;
-  }
-
-  &--inline {
-    position: relative;
-
-    .o-side__overlay {
-      position: absolute;
-    }
-
-    .o-side__content {
-      position: relative;
-    }
-  }
-
-  &:not(&--inline) {
-    z-index: var(--#{$prefix}sidebar-zindex, $sidebar-zindex);
-  }
-}

package/src/assets/scss/components/_skeleton.scss

@@ -1,80 +0,0 @@
-/* @docs */
-$skeleton-background: linear-gradient(
-  90deg,
-  $grey-lighter 25%,
-  rgba($grey-lighter, 0.5) 50%,
-  $grey-lighter 75%
-) !default;
-$skeleton-border-radius: var(--#{$prefix}base-border-radius) !default;
-$skeleton-duration: 1.5s !default;
-$skeleton-margin: 0.5rem 0 0 0 !default;
-/* @docs */
-
-@keyframes skeleton-loading {
-  0% {
-    background-position: 100% 50%;
-  }
-
-  100% {
-    background-position: 0 50%;
-  }
-}
-
-@mixin steps-size($size, $name: null) {
-  @if $name {
-    line-height: var(--#{$prefix}skeleton-font-size-#{$name}, $size);
-  } @else {
-    line-height: var(--#{$prefix}skeleton-font-size, $size);
-  }
-}
-
-.o-sklt {
-  display: inline-flex;
-  flex-direction: column;
-  vertical-align: middle;
-  width: 100%;
-
-  &__item {
-    width: 100%;
-    background: var(--#{$prefix}skeleton-background, $skeleton-background);
-    margin: var(--#{$prefix}skeleton-margin, $skeleton-margin);
-
-    @include steps-size($base-font-size);
-
-    @each $name, $value in $sizes {
-      &--#{$name} {
-        @include steps-size($value, $name);
-      }
-    }
-
-    &--rounded {
-      border-radius: var(
-        --#{$prefix}skeleton-border-radius,
-        $skeleton-border-radius
-      );
-    }
-
-    &--animated {
-      background-size: 400% 100%;
-      animation-name: skeleton-loading;
-      animation-iteration-count: infinite;
-      animation-duration: var(
-        --#{$prefix}skeleton-duration,
-        $skeleton-duration
-      );
-    }
-
-    &::after {
-      content: "\00a0";
-    }
-  }
-
-  &--centered {
-    align-items: center;
-  }
-
-  &--right {
-    align-items: flex-end;
-    margin: var(--#{$prefix}skeleton-margin, $skeleton-margin);
-  }
-}

package/src/assets/scss/components/_slider.scss

@@ -1,199 +0,0 @@
-@use "sass:list";
-
-/* @docs */
-$slider-background: transparent !default;
-$slider-margin: 1em 0 !default;
-$slider-mark-size: 0.75rem !default;
-$slider-font-size: var(--#{$prefix}base-font-size) !default;
-$slider-rounded-borded-radius: var(
-  --#{$prefix}base-border-radius-rounded
-) !default;
-$slider-thumb-background: var(--#{$prefix}white) !default;
-$slider-thumb-border: 1px solid var(--#{$prefix}grey-light) !default;
-$slider-thumb-radius: var(--#{$prefix}base-border-radius) !default;
-$slider-thumb-shadow: none !default;
-$slider-thumb-to-track-ratio: 2 !default;
-$slider-thumb-transform: scale(1.25) !default;
-$slider-tick-background: var(--#{$prefix}primary) !default;
-$slider-tick-radius: var(--#{$prefix}base-border-radius) !default;
-$slider-tick-to-track-ratio: 0.5 !default;
-$slider-tick-width: 3px !default;
-$slider-track-background: var(--#{$prefix}grey-lighter) !default;
-$slider-fill-background: var(--#{$prefix}primary) !default;
-$slider-track-border-radius: var(--#{$prefix}base-border-radius) !default;
-$slider-track-border: 0px solid var(--#{$prefix}grey) !default;
-$slider-track-disabled: 0.5 !default;
-$slider-track-radius: var(--#{$prefix}base-border-radius) !default;
-$slider-track-shadow: 0px 0px 0px var(--#{$prefix}grey) !default;
-/* @docs */
-
-@mixin slider-size($size, $name: null) {
-  $track-height: calc($size / $slider-thumb-to-track-ratio);
-  $tick-height: calc($track-height * $slider-tick-to-track-ratio);
-  $thumb-size: $size;
-
-  .o-slide__track {
-    @if $name {
-      height: var(--#{$prefix}slider-track-height-#{$name}, $track-height);
-    } @else {
-      height: var(--#{$prefix}slider-track-height, $track-height);
-    }
-  }
-
-  .o-slide__thumb {
-    @if $name {
-      height: var(--#{$prefix}slider-thumb-size-#{$name}, $thumb-size);
-      width: var(--#{$prefix}slider-thumb-size-#{$name}, $thumb-size);
-    } @else {
-      height: var(--#{$prefix}slider-thumb-size, $thumb-size);
-      width: var(--#{$prefix}slider-thumb-size, $thumb-size);
-    }
-  }
-
-  .o-slide__tick {
-    @if $name {
-      height: var(--#{$prefix}slider-tick-height-#{$name}, $tick-height);
-    } @else {
-      height: var(--#{$prefix}slider-tick-height, $tick-height);
-    }
-  }
-
-  .o-slide__tick-label {
-    @if $name {
-      font-size: var(--#{$prefix}slider-mark-size-#{$name}, $slider-mark-size);
-    } @else {
-      font-size: var(--#{$prefix}slider-mark-size $slider-mark-size);
-    }
-
-    position: absolute;
-    top: calc(
-      var(--#{$prefix}slider-tick-label-top-#{$name}, $track-height) * 0.5 + 2px
-    );
-    left: 50%;
-    transform: translateX(-50%);
-  }
-}
-
-.o-slide {
-  width: 100%;
-  margin: var(--#{$prefix}slider-margin, $slider-margin);
-  background: var(--#{$prefix}slider-background, $slider-background);
-
-  &__thumb {
-    box-shadow: var(--#{$prefix}slider-thumb-shadow, $slider-thumb-shadow);
-    border: var(--#{$prefix}slider-thumb-border, $slider-thumb-border);
-    border-radius: var(--#{$prefix}slider-thumb-radius, $slider-thumb-radius);
-    background: var(
-      --#{$prefix}slider-thumb-background,
-      $slider-thumb-background
-    );
-
-    &:focus {
-      transform: var(
-        --#{$prefix}slider-thumb-transform,
-        $slider-thumb-transform
-      );
-    }
-
-    &--rounded {
-      border-radius: var(
-        --#{$prefix}slider-rounded-borded-radius,
-        $slider-rounded-borded-radius
-      );
-    }
-
-    &--dragging {
-      cursor: grabbing;
-      filter: brightness(0.8);
-    }
-  }
-
-  &__track {
-    display: flex;
-    align-items: center;
-    position: relative;
-    cursor: pointer;
-    background: var(
-      --#{$prefix}slider-track-background,
-      $slider-track-background
-    );
-    border-radius: var(
-      --#{$prefix}slider-track-border-radius,
-      $slider-track-border-radius
-    );
-  }
-
-  &__fill {
-    position: absolute;
-    height: 100%;
-    box-shadow: var(--#{$prefix}slider-track-shadow, $slider-track-shadow);
-    background: var(
-      --#{$prefix}slider-fill-background,
-      $slider-fill-background
-    );
-    border-radius: var(--#{$prefix}slider-track-radius, $slider-track-radius);
-    border: var(--#{$prefix}slider-track-border, $slider-track-border);
-    // Fix alignment in IE 11. Cancel out for others
-    top: 50%;
-    transform: translateY(-50%);
-
-    @each $name, $pair in $colors {
-      $color: list.nth($pair, 1);
-
-      &--#{$name} {
-        background: var(--#{$prefix}variant-#{$name}, $color);
-
-        + .o-slide__thumb-wrapper {
-          --#{$prefix}focus: #{createFocus($color)};
-        }
-      }
-    }
-  }
-
-  @include slider-size($slider-font-size);
-
-  @each $name, $value in $sizes {
-    &--#{$name} {
-      @include slider-size($value, $name);
-    }
-  }
-
-  &__tick {
-    position: absolute;
-    transform: translate(-50%, -50%);
-    top: 50%;
-    width: var(--#{$prefix}slider-tick-width, $slider-tick-width);
-    background: var(
-      --#{$prefix}slider-tick-background,
-      $slider-tick-background
-    );
-    border-radius: var(--#{$prefix}slider-tick-radius, $slider-tick-radius);
-
-    &--hidden {
-      background: transparent;
-    }
-  }
-
-  &__thumb-wrapper {
-    display: inline-flex;
-    align-items: center;
-    position: absolute;
-    cursor: grab;
-    transform: translate(-50%, -50%);
-    top: 50%;
-    flex-direction: column; // Fix shrinked thumb at the end in IE 11
-  }
-
-  &--disabled {
-    cursor: not-allowed;
-    pointer-events: none;
-    opacity: var(--#{$prefix}slider-track-disabled, $slider-track-disabled);
-  }
-
-  // focus effect
-  &:active &__thumb,
-  &:focus &__thumb,
-  &:focus-within &__thumb {
-    box-shadow: 0 0 0 0.25rem var(--#{$prefix}focus);
-  }
-}