@weavy/uikit-react 12.1.0 → 14.0.0

package/src/scss/theme/bs/_forms.scss

@@ -1,161 +0,0 @@
-@use "../config" as *;
-
-%form-control {
-  display: block;
-  width: 100%;
-  padding: $input-padding-y $input-padding-x;
-  font-family: $input-font-family;
-  @include font-size($input-font-size);
-  font-weight: $input-font-weight;
-  line-height: $input-line-height;
-  color: $input-color;
-  background-color: $input-bg;
-  background-clip: padding-box;
-  border: $input-border-width solid $input-border-color;
-  appearance: none; // Fix appearance for date inputs in Safari
-
-  // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
-  @include border-radius($input-border-radius, 0);
-
-  @include box-shadow($input-box-shadow);
-  @include transition($input-transition);
-
-  &[type="file"] {
-    overflow: hidden; // prevent pseudo element button overlap
-
-    &:not(:disabled):not([readonly]) {
-      cursor: pointer;
-    }
-  }
-
-  // Customize the `:focus` state to imitate native WebKit styles.
-  &:focus {
-    color: $input-focus-color;
-    background-color: $input-focus-bg;
-    border-color: $input-focus-border-color;
-    outline: 0;
-    @if $enable-shadows {
-      @include box-shadow($input-box-shadow, $input-focus-box-shadow);
-    } @else {
-      // Avoid using mixin so we can pass custom focus shadow properly
-      box-shadow: $input-focus-box-shadow;
-    }
-  }
-
-  // Add some height to date inputs on iOS
-  // https://github.com/twbs/bootstrap/issues/23307
-  // TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
-  &::-webkit-date-and-time-value {
-    // Multiply line-height by 1em if it has no unit
-    height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);
-  }
-
-  // Placeholder
-  &::placeholder {
-    color: $input-placeholder-color;
-    // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
-    opacity: 1;
-  }
-
-  // Disabled and read-only inputs
-  //
-  // HTML5 says that controls under a fieldset > legend:first-child won't be
-  // disabled if the fieldset is disabled. Due to implementation difficulty, we
-  // don't honor that edge case; we style them as disabled anyway.
-  &:disabled,
-  &[readonly] {
-    background-color: $input-disabled-bg;
-    border-color: $input-disabled-border-color;
-    // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
-    opacity: 1;
-  }
-
-  // File input buttons theming
-  &::file-selector-button {
-    padding: $input-padding-y $input-padding-x;
-    margin: (-$input-padding-y) (-$input-padding-x);
-    margin-inline-end: $input-padding-x;
-    color: $form-file-button-color;
-    @include gradient-bg($form-file-button-bg);
-    pointer-events: none;
-    border-color: inherit;
-    border-style: solid;
-    border-width: 0;
-    border-inline-end-width: $input-border-width;
-    border-radius: 0; // stylelint-disable-line property-disallowed-list
-    @include transition($btn-transition);
-  }
-
-  &:hover:not(:disabled):not([readonly])::file-selector-button {
-    background-color: $form-file-button-hover-bg;
-  }
-
-  &::-webkit-file-upload-button {
-    padding: $input-padding-y $input-padding-x;
-    margin: (-$input-padding-y) (-$input-padding-x);
-    margin-inline-end: $input-padding-x;
-    color: $form-file-button-color;
-    @include gradient-bg($form-file-button-bg);
-    pointer-events: none;
-    border-color: inherit;
-    border-style: solid;
-    border-width: 0;
-    border-inline-end-width: $input-border-width;
-    border-radius: 0; // stylelint-disable-line property-disallowed-list
-    @include transition($btn-transition);
-  }
-
-  &:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
-    background-color: $form-file-button-hover-bg;
-  }
-}
-
-// Form control sizing
-//
-// Build on `.form-control` with modifier classes to decrease or increase the
-// height and font-size of form controls.
-//
-// Repeated in `_input_group.scss` to avoid Sass extend issues.
-
-%form-control-sm {
-  min-height: $input-height-sm;
-  padding: $input-padding-y-sm $input-padding-x-sm;
-  //@include font-size($input-font-size-sm);
-  @include font-size($input-font-size);
-  @include border-radius($input-border-radius-sm);
-
-  &::file-selector-button {
-    padding: $input-padding-y-sm $input-padding-x-sm;
-    margin: (-$input-padding-y-sm) (-$input-padding-x-sm);
-    margin-inline-end: $input-padding-x-sm;
-  }
-
-  &::-webkit-file-upload-button {
-    padding: $input-padding-y-sm $input-padding-x-sm;
-    margin: (-$input-padding-y-sm) (-$input-padding-x-sm);
-    margin-inline-end: $input-padding-x-sm;
-  }
-}
-
-%form-text {
-  margin-top: $form-text-margin-top;
-  @include font-size($form-text-font-size);
-  font-style: $form-text-font-style;
-  font-weight: $form-text-font-weight;
-  color: $form-text-color;
-}
-
-%form-label {
-  margin-bottom: $form-label-margin-bottom;
-  @include font-size($form-label-font-size);
-  font-style: $form-label-font-style;
-  font-weight: $form-label-font-weight;
-  color: $form-label-color;
-}
-
-%form-invalid {
-  border-color: $danger;
-  &:focus {
-    border-color: $danger;
-  }
-}

package/src/scss/theme/bs/_list-group.scss

@@ -1,73 +0,0 @@
-@use "../config" as *;
-
-// Interactive list items
-//
-// Use anchor or button elements instead of `li`s or `div`s to create interactive
-// list items. Includes an extra `.active` modifier class for selected items.
-
-%list-group-item-action {
-    width: 100%; // For `<button>`s (anchors become 100% by default though)
-    color: $list-group-action-color;
-    text-align: inherit; // For `<button>`s (anchors inherit)
-  
-    // Hover state
-    &:hover,
-    &:focus {
-      z-index: 1; // Place hover/focus items above their siblings for proper border styling
-      color: $list-group-action-hover-color;
-      text-decoration: none;
-      background-color: $list-group-hover-bg;
-    }
-  
-    &:active {
-      color: $list-group-action-active-color;
-      background-color: $list-group-action-active-bg;
-    }
-  }
-  
-  
-  // Individual list items
-  //
-  // Use on `li`s or `div`s within the `.list-group` parent.
-  
-  %list-group-item {
-    position: relative;
-    display: block;
-    padding: $list-group-item-padding-y $list-group-item-padding-x;
-    color: $list-group-color;
-    text-decoration: if($link-decoration == none, null, none);
-    background-color: $list-group-bg;
-    border: $list-group-border-width solid $list-group-border-color;
-  
-    &:first-child {
-      @include border-top-radius(inherit);
-    }
-  
-    &:last-child {
-      @include border-bottom-radius(inherit);
-    }
-  
-    &.disabled,
-    &:disabled {
-      color: $list-group-disabled-color;
-      pointer-events: none;
-      background-color: $list-group-disabled-bg;
-    }
-  
-    // Include both here for `<a>`s and `<button>`s
-    &.active {
-      z-index: 2; // Place active items above their siblings for proper border styling
-      color: $list-group-active-color;
-      background-color: $list-group-active-bg;
-      border-color: $list-group-active-border-color;
-    }
-  
-    & + & {
-      border-top-width: 0;
-  
-      &.active {
-        margin-top: -$list-group-border-width;
-        border-top-width: $list-group-border-width;
-      }
-    }
-  }

package/src/scss/theme/bs/_tables.scss

@@ -1,46 +0,0 @@
-@use "../config" as *;
-
-%table {
-  --#{$variable-prefix}table-bg: #{$table-bg};
-  --#{$variable-prefix}table-accent-bg: #{$table-accent-bg};
-  --#{$variable-prefix}table-striped-color: #{$table-striped-color};
-  --#{$variable-prefix}table-striped-bg: #{$table-striped-bg};
-  --#{$variable-prefix}table-active-color: #{$table-active-color};
-  --#{$variable-prefix}table-active-bg: #{$table-active-bg};
-  --#{$variable-prefix}table-hover-color: #{$table-hover-color};
-  --#{$variable-prefix}table-hover-bg: #{$table-hover-bg};
-
-  width: 100%;
-  margin-bottom: $spacer;
-  color: $table-color;
-  vertical-align: $table-cell-vertical-align;
-  border-color: $table-border-color;
-
-  // Target th & td
-  // We need the child combinator to prevent styles leaking to nested tables which doesn't have a `.table` class.
-  // We use the universal selectors here to simplify the selector (else we would need 6 different selectors).
-  // Another advantage is that this generates less code and makes the selector less specific making it easier to override.
-  // stylelint-disable-next-line selector-max-universal
-  > :not(caption) > * > * {
-    padding: $table-cell-padding-y $table-cell-padding-x;
-    background-color: var(--#{$variable-prefix}table-bg);
-    border-bottom-width: $table-border-width;
-    box-shadow: inset 0 0 0 9999px var(--#{$variable-prefix}table-accent-bg);
-  }
-
-  > tbody {
-    vertical-align: inherit;
-  }
-
-  > thead {
-    vertical-align: bottom;
-  }
-
-}
-
-%table-hover {
-  > tbody > tr:hover > * {
-    --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-hover-bg);
-    color: var(--#{$variable-prefix}table-hover-color);
-  }
-}

package/src/scss/theme/fonts/_index.scss

@@ -1,2 +0,0 @@
-@import 'fontmapping-roboto';
-@import 'fontmapping-segoe-ui'; // Needed by Firefox

package/src/scss/theme/mixins/_palette.scss

@@ -1,165 +0,0 @@
-@use "sass:map";
-@use "sass:list";
-@use "sass:string";
-@use "sass:math";
-@use "sass:color";
-
-// RYB COLOR WHEEL
-// HSL mapping based on http://computergraphics.stackexchange.com/questions/1748/function-to-convert-hsv-angle-to-ryb-angle
-// Matching bootstrap and MD colors
-$color-names: (
-    "red": null,
-    "deep-orange": null,
-    "orange": null,
-    "amber": null,
-    "yellow": null,
-    "lime": null,
-    "light-green": null,
-    "green": null,
-    "teal": null,
-    "cyan": null,
-    "light-blue": null,
-    "blue": null,
-    "indigo": null,
-    "deep-purple": null,
-    "purple": null,
-    "pink": null
-) !default;
-
-// Matching MD shades
-// Added 950 for dark theme compatibility
-$color-shades: (
-    "50": 95,
-    "100": 90,
-    "200": 80,
-    "300": 70,
-    "400": 60,
-    "500": 50,
-    "600": 42,
-    "700": 36,
-    "800": 28,
-    "900": 22,
-    "950": 16
-) !default;
-
-// color mapping
-$ryb-rgb-mapping: (
-  (0, 0) // Red
-  (50, 35) // Orange
-  (110, 60) // Yellow
-  (165, 120) // Green
-  (210, 180) // Cyan
-  (285, 240) // Blue
-  (330, 300) // Purple
-  (360, 360) // Red (same as 0)
-) !default;
-
-// saturation mapping
-$hue-sat-mapping: (
-  (0, 85) // Red
-  (110, 100) // Yellow
-  (165, 60) // Green
-  (210, 88) // Cyan
-  (285, 97) // Blue
-  (330, 65) // Purple
-  (360, 85) // Red (same as 0)
-) !default;
-
-@function ryb-hue($h, $reverse: false) {
-  $deg: $h % 360;
-
-  $from: 1;
-  $to: 2;
-
-  @if $reverse {
-      $from: 2;
-      $to: 1;
-  }
-
-  $lower: 1;
-  $upper: 2;
-
-  @while $deg > list.nth(list.nth($ryb-rgb-mapping, $upper), $from) {
-      $lower: $upper;
-      $upper: $upper + 1;
-  }
-
-  $lower-from: list.nth(list.nth($ryb-rgb-mapping, $lower), $from);
-  $lower-to: list.nth(list.nth($ryb-rgb-mapping, $lower), $to);
-  $upper-from: list.nth(list.nth($ryb-rgb-mapping, $upper), $from);
-  $upper-to: list.nth(list.nth($ryb-rgb-mapping, $upper), $to);
-
-  $percent: math.div(($deg - $lower-from), ($upper-from - $lower-from));
-  $hue: $lower-to + ($upper-to - $lower-to) * $percent;
-
-  @return $hue;
-}
-
-@function ryb-saturation($rybHue, $saturation, $reverse: false) {
-  $deg: $rybHue % 360;
-  $sat: math.clamp(0, $saturation, 100);
-
-  $index: 1;
-  $value: 2;
-
-  $lower: 1;
-  $upper: 2;
-
-  @while $deg > list.nth(list.nth($hue-sat-mapping, $upper), $index) {
-      $lower: $upper;
-      $upper: $upper + 1;
-  }
-
-  $lower-index: list.nth(list.nth($hue-sat-mapping, $lower), $index);
-  $upper-index: list.nth(list.nth($hue-sat-mapping, $upper), $index);
-  $lower-value: list.nth(list.nth($hue-sat-mapping, $lower), $value);
-  $upper-value: list.nth(list.nth($hue-sat-mapping, $upper), $value);
-
-  $percent: math.div(($deg - $lower-index), ($upper-index - $lower-index));
-  $interpolation: math.div(($lower-value + ($upper-value - $lower-value) * $percent), 100);
-
-  @if $reverse {
-    @return math.div($sat, $interpolation);
-  } @else {
-    @return $sat * $interpolation;
-  }
-
-}
-
-@function hsl-to-ryb-as-hsl($h, $s, $l) {
-    $hue: math.floor(ryb-hue($h));
-    $saturation: ryb-saturation($h, $s) * 1%;
-    $lightness: $l * 1%;
-    @return hsl($hue, $saturation, $lightness);
-}
-
-@function generate-colors($base-color) {
-    $h: ryb-hue(math.div(hue($base-color), 1deg), true);
-    $divisions: list.length($color-names);
-
-    // 33% is minimum threshold to not get all colors gray
-    $normalizedS: math.clamp(ryb-saturation($h, 33), math.div(saturation($base-color), 1%), ryb-saturation($h, 100));
-    $s: ryb-saturation($h, $normalizedS, true);
-
-    $distance: math.div(360, $divisions);
-
-    $start-offset: $h % $distance;
-
-    // Clone
-    $generated-colors: map.merge($color-names, ());
-
-    @for $i from 1 through $divisions  {
-      $ih: $start-offset + ($i - 1) * $distance;
-      $il: map.get($color-shades, "500");
-      $iname: list.nth(map.keys($color-names), $i);
-      $icolor: hsl-to-ryb-as-hsl($ih, $s, $il);
-      //@debug $iname $icolor;
-      $generated-colors: map.set($generated-colors, $iname, $icolor);
-    }
-
-    @return $generated-colors;
-}
-
-@function color-shade($color, $shade, $shades: $color-shades) {
-  @return color.change($color, $lightness: map.get($shades, $shade) * 1%)
-}

package/src/scss/theme/mixins/_scrollbar.scss

@@ -1,110 +0,0 @@
-@use "../colors";
-
-@mixin scroll-y {
-  overflow-y: auto;
-  touch-action: pan-y, pan-x;
-
-  // to enable HW acceleration and not cause repaint on scroll
-  // opacity needed for custom scrollbar to paint
-  will-change: scroll-position, opacity;
-  backface-visibility: hidden;
-
-  // ios momentum scrolling on iOS <= 12, cannot be used on the <body> element!
-  &:not(body) {
-    -webkit-overflow-scrolling: touch;
-  }
-
-  max-height: 100%;
-}
-
-@mixin scroll-x {
-  overflow-x: auto;
-  touch-action: pan-y, pan-x;
-
-  // to enable HW acceleration and not cause repaint on scroll
-  will-change: scroll-position, opacity;
-  backface-visibility: hidden;
-  max-width: 100%;
-}
-
-// custom scrollbar styling
-@mixin custom-scrollbar {
-  // custom scrollbar for webkit browsers
-  // reference https://webkit.org/blog/363/styling-scrollbars/
-
-  &::-webkit-scrollbar {
-    height: .625rem;
-    width: .625rem;
-    background: transparent;
-    z-index: 999;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: rgba(colors.$gray-500, 0.75);
-    border: .125rem solid transparent;
-    border-radius: .5rem;
-    background-clip: padding-box;
-
-    &:hover {
-      background-color: rgba(colors.$gray-700, 0.75);
-    }
-
-    &:window-inactive {
-      background-color: rgba(colors.$gray-500, 0.5);
-    }
-  }
-
-  // custom scrollbar for firefox
-  scrollbar-width: thin;
-  scrollbar-color: rgba(colors.$gray-500, 0.75) transparent;
-}
-
-// custom scrollbar styling
-@mixin thin-scrollbar {
-  // custom scrollbar for webkit browsers
-  &::-webkit-scrollbar {
-    height: .375rem;
-    width: .375rem;
-    background: transparent;
-    z-index: 999;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: rgba(colors.$gray-700, 0.75);
-    border: 0 solid transparent;
-    border-radius: 0;
-    background-clip: padding-box;
-
-    &:hover {
-      background-color: rgba(colors.$gray-500, 0.75);
-    }
-
-    &:window-inactive {
-      background-color: rgba(colors.$gray-500, 0.5);
-    }
-  }
-  
-  // custom scrollbar for firefox
-  scrollbar-width: thin;
-  scrollbar-color: rgba(colors.$gray-700, 0.75) transparent;
-}
-
-@mixin scrollbar-top-padding($scrollbar-padding) {
-  &::-webkit-scrollbar-button:vertical:start {
-    height: $scrollbar-padding;
-  }
-}
-
-@mixin scrollbar-bottom-padding($scrollbar-padding) {
-  &::-webkit-scrollbar-button:vertical:end {
-    height: $scrollbar-padding;
-  }
-}