@oruga-ui/theme-oruga 0.0.1

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

@@ -0,0 +1,231 @@
+// 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 $speed-slow $easing;
+}
+
+.fade-enter,
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+// Zoom In
+.zoom-in-enter-active,
+.zoom-in-leave-active {
+  transition: opacity $speed-slow $easing;
+
+  .animation-content {
+    transition: transform $speed-slow $easing;
+  }
+}
+
+.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 $speed-slow $easing;
+
+  .animation-content {
+    transition: transform $speed-slow $easing;
+  }
+}
+
+.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 $speed-slower 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 $speed-slower 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: $speed-slow $easing;
+}
+
+.slide-leave-active {
+  transition: $speed-slow $easing;
+  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

@@ -0,0 +1,31 @@
+*,
+:after,
+:before {
+  box-sizing: inherit;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+
+  @include avariable("font-family", "base-font-family", $base-font-family);
+  @include avariable("font-size", "base-font-size", $base-font-size);
+  @include avariable("font-weight", "base-font-weight", $base-font-weight);
+  @include avariable("line-height", "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

@@ -0,0 +1,211 @@
+@use "sass:list";
+@use "sass:string";
+@use "sass:math";
+
+/// 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,
+    str-slice($string, 1, $index - 1) + $replace +
+      str-replace(
+        str-slice($string, $index + str-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}";
+}
+
+/// Appends a list of variables to $whitelist and return a new whitelist.
+///
+/// @param {...} $variables
+///   Variables to whitelist
+/// @return {list} new whitelist.
+///
+/// Example (in components/_radio.scss)
+/// $whitelist: add-to-whitelist('radio-active-background-color','radio-focus-sibiling-box-shadow');
+@function add-to-whitelist($variables...) {
+  @return list.join($whitelist, $variables);
+}
+
+/// Checks if a variable is in $whitelist.
+///
+/// @param {string} $variable
+///   Variable to check if present in whitelist
+/// @return {boolean} true if $variable is in $whitelist, else false.
+@function is-in-whitelist($variable) {
+  @return list.index($whitelist, $variable) != null;
+}
+
+/// Checks if $whitelist is empty
+///
+/// @return {boolean} true if $whitelist is empty, else false.
+@function is-empty-whitelist() {
+  @return list.length($whitelist) == 0;
+}
+
+/// Returns a variable.
+///
+/// @param {string} $name
+///   Variable name
+/// @param {string} $value
+///   Variable value
+/// @param {string} $forceval
+///   By default is `false`, if `true` it allows to bypass whitelist and set the value
+/// @return {string} the variable or null if not in whitelist when $css-vars == false.
+@function variable($name, $value, $forceval: false) {
+  @if $css-vars {
+    @if is-empty-whitelist() or is-in-whitelist($name) {
+      @return var(--#{$prefix}#{$name}, #{$value});
+    }
+  } @else if $sass-vars {
+    @if is-empty-whitelist() or is-in-whitelist($name) {
+      @return #{$value};
+    }
+  } @else if $forceval {
+    @return #{$value};
+  }
+
+  @return null;
+}
+
+/// Returns a pair of `(key,value)` to pass to `evariable` function.
+///
+/// @param {string} $key
+///   Key of the parameter
+/// @param {string} $value
+///   Value of the parameter
+/// @return {list} list of two elements representing an `eparam` `(key, value)`.
+@function eparam($key, $value) {
+  @return $key, $value;
+}
+
+/// Assigns a specific expression to an attribute
+///
+/// @param {string} $attribute
+///   The attribute we want to include
+/// @param {string} $expression
+///   The body of the function we want to write (e.g. `calc($width/$height)`)
+/// @param {...} $parameters
+///   List of `eparam` to apply to the function
+@mixin evariable($attribute, $expression, $parameters...) {
+  $is_valid: true;
+
+  @each $parameter in $parameters {
+    @if not list.nth($parameter, 2) {
+      $is_valid: false;
+    }
+    @if str-slice(list.nth($parameter, 1), 0, 1) != "$" {
+      @error "Parameter #{list.nth($parameter, 1)} should start with $.";
+    }
+    $expression: str-replace(
+      $expression,
+      list.nth($parameter, 1),
+      list.nth($parameter, 2)
+    );
+  }
+  @if $is_valid {
+    #{$attribute}: #{$expression};
+  }
+}
+
+/// Assigns a specific variable to an attribute
+///
+/// @param {string} $attribute
+///   The attribute we want to include
+/// @param {string} $name
+///   Variable name
+/// @param {string} $value
+///   Variable value
+@mixin avariable($attribute, $name, $value) {
+  $variable: variable($name, $value);
+  @if $variable {
+    #{$attribute}: $variable;
+  }
+}
+@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;
+}

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

@@ -0,0 +1,28 @@
+@use "sass:list";
+
+:root {
+  @if $css-vars {
+    // generate color variables
+    @each $name, $color in $colors {
+      --#{$prefix}#{$name}: #{list.nth($color, 1)};
+      --#{$prefix}#{$name}-invert: #{list.nth($color, 2)};
+    }
+
+    --#{$prefix}white: #{$white};
+    --#{$prefix}black: #{$black};
+    --#{$prefix}grey: #{$grey};
+    --#{$prefix}grey-light: #{$grey-light};
+    --#{$prefix}grey-lighter: #{$grey-lighter};
+    --#{$prefix}grey-dark: #{$grey-dark};
+
+    // generate size variables
+    @each $name, $size in $sizes {
+      --#{$prefix}size-#{$name}: #{$size};
+    }
+
+    --#{$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};
+  }
+}

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

@@ -0,0 +1,105 @@
+/*********************
+*   Theme Variables
+**********************/
+
+// Settings
+$whitelist: () !default;
+$sass-vars: true !default;
+$css-vars: true !default;
+$prefix: "oruga-" !default;
+
+// Animations
+$speed: 300ms !default;
+$speed-slow: 150ms !default;
+$speed-slower: 250ms !default;
+$easing: 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-rounded-border-radius: 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});
+
+// 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;