@oruga-ui/theme-oruga 0.4.2 → 0.5.0

package/src/assets/scss/utils/_animations.scss

@@ -1,233 +0,0 @@
-// Some of the animations are from animate.css (https://daneden.github.io/animate.css)
-
-// Fade out
-@keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-
-  to {
-    opacity: 0;
-  }
-}
-
-.fadeOut {
-  animation-name: fadeOut;
-}
-
-@keyframes fadeOutDown {
-  from {
-    opacity: 1;
-  }
-
-  to {
-    opacity: 0;
-    transform: translate3d(0, 100%, 0);
-  }
-}
-
-.fadeOutDown {
-  animation-name: fadeOutDown;
-}
-
-@keyframes fadeOutUp {
-  from {
-    opacity: 1;
-  }
-
-  to {
-    opacity: 0;
-    transform: translate3d(0, -100%, 0);
-  }
-}
-
-.fadeOutUp {
-  animation-name: fadeOutUp;
-}
-
-// Fade In
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-.fadeIn {
-  animation-name: fadeIn;
-}
-
-@keyframes fadeInDown {
-  from {
-    opacity: 0;
-    transform: translate3d(0, -100%, 0);
-  }
-
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-
-.fadeInDown {
-  animation-name: fadeInDown;
-}
-
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translate3d(0, 100%, 0);
-  }
-
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-
-.fadeInUp {
-  animation-name: fadeInUp;
-}
-
-@keyframes append-animate {
-  from {
-    transform: scale(0);
-    opacity: 0;
-  }
-
-  to {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
-/**
- * Vue Transitions
- */
-
-// Fade
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity $animation-speed $animation-timing;
-}
-
-.fade-enter,
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-
-// Zoom In
-.zoom-in-enter-active,
-.zoom-in-leave-active {
-  transition: opacity $animation-speed $animation-timing;
-
-  .animation-content {
-    transition: transform $animation-speed $animation-timing;
-  }
-}
-
-.zoom-in-enter,
-.zoom-in-enter-from,
-.zoom-in-leave-active {
-  opacity: 0;
-
-  .animation-content {
-    transform: scale(0.95);
-  }
-}
-
-// Zoom Out
-.zoom-out-enter-active,
-.zoom-out-leave-active {
-  transition: opacity $animation-speed $animation-timing;
-
-  .animation-content {
-    transition: transform $animation-speed $animation-timing;
-  }
-}
-
-.zoom-out-enter,
-.zoom-out-enter-from,
-.zoom-out-leave-active {
-  opacity: 0;
-
-  .animation-content {
-    transform: scale(1.05);
-  }
-}
-
-// Slide
-.slide-next-enter-active,
-.slide-next-leave-active,
-.slide-prev-enter-active,
-.slide-prev-leave-active {
-  transition: transform $animation-speed-fast
-    cubic-bezier(0.785, 0.135, 0.15, 0.86);
-}
-
-.slide-prev-leave-to,
-.slide-next-enter,
-.slide-next-enter-from {
-  transform: translate3d(-100%, 0, 0);
-  position: absolute;
-  width: 100%;
-}
-
-.slide-prev-enter,
-.slide-prev-enter-from,
-.slide-next-leave-to {
-  transform: translate3d(100%, 0, 0);
-  position: absolute;
-  width: 100%;
-}
-
-.slide-down-enter-active,
-.slide-down-leave-active,
-.slide-up-enter-active,
-.slide-up-leave-active {
-  transition: transform $animation-speed-fast
-    cubic-bezier(0.785, 0.135, 0.15, 0.86);
-}
-
-.slide-down-enter,
-.slide-up-leave-to,
-.slide-down-enter-from {
-  transform: translate3d(0, -100%, 0);
-  position: absolute;
-  height: 100%;
-}
-
-.slide-up-enter,
-.slide-up-enter-from,
-.slide-down-leave-to {
-  transform: translate3d(0, 100%, 0);
-  position: absolute;
-  height: 100%;
-}
-
-.slide-enter-active {
-  transition: $animation-speed $animation-timing;
-}
-
-.slide-leave-active {
-  transition: $animation-speed $animation-timing;
-  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
-}
-
-.slide-leave,
-.slide-enter-to,
-.slide-leave-from {
-  max-height: 100px;
-  overflow: hidden;
-}
-
-.slide-enter,
-.slide-enter-from,
-.slide-leave-to {
-  overflow: hidden;
-  max-height: 0;
-}

package/src/assets/scss/utils/_base.scss

@@ -1,31 +0,0 @@
-*,
-:after,
-:before {
-  box-sizing: inherit;
-}
-
-html {
-  box-sizing: border-box;
-}
-
-body {
-  margin: 0;
-  padding: 0;
-
-  font-family: var(--#{$prefix}base-font-family, $base-font-family);
-  font-size: var(--#{$prefix}base-font-size, $base-font-size);
-  font-weight: var(--#{$prefix}base-font-weight, $base-font-weight);
-  line-height: var(--#{$prefix}base-line-height, $base-line-height);
-}
-
-.o-noscroll {
-  position: fixed;
-  width: 100%;
-  bottom: 0;
-  overflow-x: hidden;
-  overflow-y: scroll;
-}
-
-.o-clipped {
-  overflow: hidden;
-}

package/src/assets/scss/utils/_helpers.scss

@@ -1,113 +0,0 @@
-@use "sass:string";
-@use "sass:math";
-@use "sass:color";
-
-/**********************************
-*   Utility mixins and functions
-***********************************/
-
-/// Replaces characters in a string
-///
-/// @param {string} $string
-///   String where the replace happens
-/// @param {string} $search
-///   Portion of string to find and replace
-/// @param {string} $replace
-///   Replacement. Default is ''.
-/// @return {string} string with characters replaced.
-@function str-replace($string, $search, $replace: "") {
-  $index: string.index($string, $search);
-
-  @return if(
-    $index,
-    string.slice($string, 1, $index - 1) + $replace +
-      str-replace(
-        string.slice($string, $index + string.length($search)),
-        $search,
-        $replace
-      ),
-    $string
-  );
-}
-
-/// Encodes an inline svg. Original source code: http://codepen.io/jakob-e/pen/doMoML
-///
-/// @param {string} $svg
-///   Inline svg to encode
-/// @return {string} encoded svg.
-@function svg-encode($svg) {
-  // Chunk up string in order to avoid "stack level too deep" error
-  $encoded: "";
-  $slice: 2000;
-  $index: 0;
-  $loops: math.ceil(divide(string.length($svg), $slice));
-
-  @for $i from 1 through $loops {
-    $chunk: string.slice($svg, $index, $index + $slice - 1);
-    // Encode
-    $chunk: str-replace($chunk, '"', "'");
-    $chunk: str-replace($chunk, "%", "%25");
-    $chunk: str-replace($chunk, "#", "%23");
-    $chunk: str-replace($chunk, "{", "%7B");
-    $chunk: str-replace($chunk, "}", "%7D");
-    $chunk: str-replace($chunk, "<", "%3C");
-    $chunk: str-replace($chunk, ">", "%3E");
-
-    $encoded: #{$encoded}#{$chunk};
-    $index: $index + $slice;
-  }
-
-  @return "data:image/svg+xml,#{$encoded}";
-}
-
-@mixin unselectable {
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-@mixin side-flex-gap($gap) {
-  //flex-wrap: wrap;
-  margin-left: -$gap;
-  margin-right: -$gap;
-
-  & > * {
-    margin-left: $gap;
-    margin-right: $gap;
-  }
-}
-
-// Custom divide function by @mdo from https://github.com/twbs/bootstrap/pull/34245
-// Replaces old slash division deprecated in Dart Sass
-@function divide($dividend, $divisor, $precision: 10) {
-  $sign: if($dividend > 0 and $divisor > 0, 1, -1);
-  $dividend: math.abs($dividend);
-  $divisor: math.abs($divisor);
-  $quotient: 0;
-  $remainder: $dividend;
-  @if $dividend == 0 {
-    @return 0;
-  }
-  @if $divisor == 0 {
-    @error "Cannot divide by 0";
-  }
-  @if $divisor == 1 {
-    @return $dividend;
-  }
-
-  @while $remainder >= $divisor {
-    $quotient: $quotient + 1;
-    $remainder: $remainder - $divisor;
-  }
-  @if $remainder > 0 and $precision > 0 {
-    $remainder: divide($remainder * 10, $divisor, $precision - 1) * 0.1;
-  }
-
-  @return ($quotient + $remainder) * $sign;
-}
-
-// create a focus color based on a given color
-@function createFocus($color) {
-  @return color.adjust($color, $alpha: -0.75);
-}

package/src/assets/scss/utils/_root.scss

@@ -1,54 +0,0 @@
-@use "sass:list";
-@use "sass:meta";
-
-@mixin root() {
-  $host-selector: if($enable-host, ":host", ":root");
-
-  #{$host-selector} {
-    @content;
-  }
-}
-
-/*******************************
-*   Root variables extensions
-********************************/
-
-@include root() {
-  // define color variables
-  @each $name, $color in $colors {
-    @if meta.type-of($color) == list {
-      --#{$prefix}#{$name}: #{list.nth($color, 1)};
-      --#{$prefix}#{$name}-invert: #{list.nth($color, 2)};
-    } @else {
-      --#{$prefix}#{$name}: $color;
-    }
-  }
-
-  // define additional colors
-  --#{$prefix}white: #{$white};
-  --#{$prefix}black: #{$black};
-  --#{$prefix}grey: #{$grey};
-  --#{$prefix}grey-light: #{$grey-light};
-  --#{$prefix}grey-lighter: #{$grey-lighter};
-  --#{$prefix}grey-dark: #{$grey-dark};
-  --#{$prefix}focus: #{createFocus($primary)};
-
-  // define size variables
-  @each $name, $size in $sizes {
-    --#{$prefix}size-#{$name}: #{$size};
-  }
-
-  // define base variables
-  --#{$prefix}base-font-family: #{$base-font-family};
-  --#{$prefix}base-font-size: #{$base-font-size};
-  --#{$prefix}base-font-weight: #{$base-font-weight};
-  --#{$prefix}base-line-height: #{$base-line-height};
-
-  --#{$prefix}base-border-radius: #{$base-border-radius};
-  --#{$prefix}base-border-radius-rounded: #{$base-border-radius-rounded};
-  --#{$prefix}base-line-height: #{$base-line-height};
-  --#{$prefix}base-disabled-opacity: #{$base-disabled-opacity};
-
-  --#{$prefix}transition-duration: #{$animation-speed};
-  --#{$prefix}transition-timing: #{$animation-timing};
-}

package/src/assets/scss/utils/_variables.scss

@@ -1,103 +0,0 @@
-/*********************
-*   Theme Variables
-**********************/
-
-// Settings
-$prefix: "oruga-" !default;
-$enable-host: false !default;
-
-// Animations
-$animation-speed: 150ms !default;
-$animation-speed-fast: 300ms !default;
-$animation-timing: ease-out !default;
-
-// Font
-$base-font-family: 
-// Cross-platform generic font family (default user interface font)
-  system-ui,
-  // Safari for macOS and iOS (San Francisco)
-  -apple-system,
-  // Windows
-  "Segoe UI",
-  // Android
-  Roboto,
-  // older macOS and iOS
-  "Helvetica Neue",
-  // Linux
-  "Noto Sans",
-  "Liberation Sans",
-  // Basic web fallback
-  Arial,
-  // Sans serif fallback
-  sans-serif !default;
-$base-font-size: 1rem !default;
-$base-font-weight: 400 !default;
-$base-line-height: 1.5 !default;
-
-// Base Style
-$base-border-radius: 4px !default;
-$base-border-radius-rounded: 9999px !default;
-$base-line-height: 1.5 !default;
-$base-disabled-opacity: 0.5 !default;
-
-$control-border-width: 1px !default;
-$control-height: 2.25em !default;
-$control-padding-vertical: calc(0.375em - #{$control-border-width});
-$control-padding-horizontal: calc(0.625em - #{$control-border-width});
-$control-box-shadow: inset 0 1px 2px hsla(0, 0%, 4%, 0.1);
-
-// Sizes
-$sizes: (
-  "small": 0.75rem,
-  "medium": 1.25rem,
-  "large": 1.5rem,
-) !default;
-
-// Colors
-$white: #ffffff !default;
-$black: #000000 !default;
-$grey: #7a7a7a !default;
-$grey-light: #b5b5b5 !default;
-$grey-lighter: #dbdbdb !default;
-$grey-dark: #4a4a4a !default;
-
-$primary: #445e00 !default;
-$primary-invert: $white !default;
-$secondary: #6c757d !default;
-$secondary-invert: $white !default;
-
-$success: #006724 !default;
-$success-invert: $white !default;
-$info: #005c98 !default;
-$info-invert: $white !default;
-$warning: #f4c300 !default;
-$warning-invert: $black !default;
-$danger: #b60000 !default;
-$danger-invert: $white !default;
-
-$colors: (
-  "primary": (
-    $primary,
-    $primary-invert,
-  ),
-  "secondary": (
-    $secondary,
-    $secondary-invert,
-  ),
-  "success": (
-    $success,
-    $success-invert,
-  ),
-  "info": (
-    $info,
-    $info-invert,
-  ),
-  "warning": (
-    $warning,
-    $warning-invert,
-  ),
-  "danger": (
-    $danger,
-    $danger-invert,
-  ),
-) !default;