@weavy/uikit-react 11.0.1 → 12.1.0

package/src/scss/theme/_messages.scss

@@ -0,0 +1,238 @@
+@use "sass:color";
+@use "config" as *;
+@use "reactions";
+
+.wy-messages {
+  padding: 1rem 1rem 0 .75rem;
+  flex: 1 1 100%;
+
+}
+
+.wy-message-placeholder {
+  opacity: .5;
+}
+
+.wy-date-separator {
+  font-size: $font-size-xs;
+  pointer-events: none;
+  margin: .5rem;
+  text-align: center;
+  position: sticky;
+  top: 1.5rem;
+  z-index: 2;
+
+  time {
+    background: $light;
+    padding: .25rem .5rem;
+    border-radius: $border-radius;
+    display: inline-block;
+  }
+}
+
+.wy-appbars + .wy-pane-body .wy-date-separator {
+  top: $appbar-height + 1.5rem;
+}
+
+
+.wy-message {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  margin-bottom: 1rem;
+
+  .wy-image-grid,
+  .wy-attachments {
+    border-radius: $border-radius-lg;
+  }
+
+  &:hover {
+    .wy-message-buttons {
+      opacity: 1;
+    }
+  }
+
+  .wy-reaction-menu {
+    right: 0;
+  }
+}
+
+.wy-message-meta {
+  font-size: $font-size-xs;
+  margin: 0 0 .25rem .25rem;
+  color: $text-muted;
+}
+
+.wy-message-bubble {
+  background-color: $gray-50;
+  border-radius: $border-radius-xl;
+  display: flex; //inline-block;
+  flex-direction: row;
+  flex-wrap: wrap;
+  padding: .75rem;
+  max-width: min(32rem, calc(100% - 2rem));
+  min-width: 10rem;
+
+  > div {
+    // message section (images, attachments, embeds etc.)
+    margin-bottom: .5rem;
+    flex: 1 1 100%;
+
+    &:last-of-type {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.wy-message-text {
+  overflow-wrap: break-word;
+  min-width: 0;
+
+  // inline code
+  :not(pre) > code {
+    overflow-wrap: inherit;
+  }
+
+  // code block
+  pre, pre > code {
+    white-space: pre-wrap;
+  }
+
+  :last-child {
+    margin-bottom: 0;
+  }
+
+  &:empty {
+    display: none;
+  }
+}
+
+.wy-message-author {
+  margin: 1.375rem .5rem 0 0;
+}
+
+.wy-message-content {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  min-width: 0;
+  position: relative; // so that we can position reactions
+
+  .wy-reactions {
+    position: absolute;
+    bottom: -.75rem;
+    left: .75rem;
+    background: $gray-50;
+    border-radius: 1.5rem;
+    border: $border-width solid $gray-50;
+    padding: .125rem;
+  }
+}
+
+.wy-message-content-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  max-width: 100%;
+}
+
+.wy-message-buttons {
+  display: flex;
+  flex-direction: row;
+  column-gap: .25rem;
+  margin: .25rem;
+  opacity: 0;
+}
+
+// override some styles for message by current user
+.wy-message-me {
+  margin-right: 0;
+  margin-left: 2.5rem;
+  align-items: flex-end;
+
+  .wy-message-meta {
+    margin: 0 .25rem .25rem 0;
+  }
+
+  .wy-message-content {
+    align-items: flex-end;
+  }
+
+  .wy-message-content-row {
+    flex-direction: row-reverse;
+  }
+
+  .wy-message-buttons {
+    flex-direction: row-reverse;
+  }
+
+  .wy-message-bubble {
+    background-color: $primary-50;
+  }
+
+  .wy-reaction-menu {
+    justify-content: flex-start;
+    right: auto;
+  }
+
+  .wy-reactions {
+    background: $primary-50;
+    border-color: $primary-50;
+    left: auto;
+    right: .75rem;
+  }
+}
+
+// override some styles for message that contains only emoji
+.wy-message-emoji {
+  .wy-message-bubble {
+    background: none;
+    padding: 0;
+  }
+
+  .wy-message-text {
+    .wy-emoji {
+      width: 3rem;
+      height: 3rem;
+      margin: 0;
+    }
+  }
+}
+
+// message status indicator (sending, sent, delivered, read)
+.wy-readby-status {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: -.5rem;
+  margin-bottom: .75rem;
+
+  > * {
+    margin-left: .25rem;
+  }
+}
+
+.wy-message-toaster {
+  position: sticky;
+  top: 3.5rem;
+  bottom: 3.5rem;
+  cursor: pointer;
+  z-index: 3;
+  border-radius: 50rem;
+  background-color: $primary;
+  color: $white;
+  padding: .5rem 1rem;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: .5rem;
+  font-size: $font-size-sm;
+  width: max-content;
+  align-self: center;
+  text-align: center;
+  color: $white;
+}
+
+.wy-message-readmore {
+  justify-self: center;
+  text-align: center;
+}

package/src/scss/theme/_nav.scss

@@ -0,0 +1,52 @@
+@use "variables" as *;
+
+.wy-nav-tabs {
+  border-bottom: none;
+  padding: 0 .5rem;
+
+  .wy-nav-link {
+    margin-bottom: 0;
+    border: none;
+    border-bottom: .125rem solid transparent;
+    text-transform: uppercase;
+    font-size: $font-size-xs;
+    font-weight: $font-weight-bold;
+    letter-spacing: .05em;
+
+    &:hover,
+    &:focus {
+      border-color: transparent;
+    }
+
+    &.wy-disabled {
+      background-color: transparent;
+      border-color: transparent;
+    }
+
+    &.wy-active {
+      color: $link-color;
+      background-color: transparent;
+      border-color: $link-color;
+    }
+  }
+}
+
+.wy-nav-dark {
+  .wy-nav-link, .wy-button-link {
+    color: $navbar-dark-color;
+
+    &.wy-active {
+      color: $navbar-dark-active-color;
+      border-color: $navbar-dark-active-color;
+    }
+
+    &:hover,
+    &:focus {
+      color: $navbar-dark-hover-color;
+    }
+
+    &.wy-disabled {
+      color: $navbar-dark-disabled-color;
+    }
+  }
+}

package/src/scss/theme/_overlays.scss

@@ -0,0 +1,157 @@
+@use "config" as *;
+
+.wy-viewport {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 2147483647; /* max possible z-index */;
+    pointer-events: none;
+}
+
+// Overlays
+
+.wy-overlays {
+    pointer-events: none;
+    width: auto;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    max-width: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transform-style: preserve-3d;
+    overflow-y: initial;
+    overflow-x: initial;
+    perspective: 100rem;
+    perspective-origin: center center;
+
+    .wy-panel {
+        background-color: rgba(mix($white, #FFF), $opacity-backdrop);
+        //max-height: 100vh; // Causes height error in safari
+
+        &:not(.wy-transition) {
+            transform: translateZ(-4rem) !important;
+        }
+
+        .wy-controls {
+            position: absolute;
+            border-bottom: none;
+            flex-direction: row;
+            transition: opacity .1s .2s step-end;
+
+
+            .wy-icon {
+                color: $icon-color;
+            }
+        }
+
+        &.wy-loaded {
+            .wy-controls {
+                pointer-events: none;
+                opacity: 0;
+            }
+        }
+
+        .wy-panel-frame {
+            background-color: transparent;
+        }
+
+        &.wy-controls-light {
+            .wy-icon {
+                color: $icon-color;
+            }
+        }
+
+        &.wy-light {
+            background-color: rgba(mix($white, #FFF), $opacity-backdrop);
+
+            .wy-icon {
+                color: $icon-color;
+            }
+        }
+
+        &.wy-controls-dark {
+            .wy-icon {
+                color: $navbar-dark-color;
+
+                &:hover, &:focus {
+                    color: $navbar-dark-hover-color;
+                }
+
+                &:active {
+                    color: $navbar-dark-active-color;
+                }
+            }
+        }
+
+        &.wy-dark {
+            background-color: rgba(mix($dark, #000), $opacity-backdrop);
+
+            .wy-icon {
+                color: $navbar-dark-color;
+
+                &:hover, &:focus {
+                    color: $navbar-dark-hover-color;
+                }
+
+                &:active {
+                    color: $navbar-dark-active-color;
+                }
+            }
+
+            &.wy-open[data-title]::before {
+                background: rgba($dark, $opacity-backdrop);
+                color: $navbar-dark-color;
+                border-bottom: $border-width #000 solid;
+            }
+        }
+
+        &.wy-floating {
+            @include media-breakpoint-up(md, $grid-breakpoints) {
+                left: 1rem;
+                top: 1rem;
+                right: 1rem;
+                bottom: 1rem;
+                border-radius: .1875rem;
+                box-shadow: $md-shadow-16dp;
+                &:not(.wy-scroll-y) {
+                    overflow: hidden;
+                }
+            }
+        }
+
+        &.wy-modal {
+            background-color: rgba(mix($white, #FFF), $opacity-backdrop);
+
+            @include media-breakpoint-up(md, $grid-breakpoints) {
+                left: auto;
+                right: auto;
+                top: 2rem;
+                bottom: 3.2rem;
+                margin-left: 4rem;
+                margin-top: auto;
+                margin-right: 4rem;
+                margin-bottom: auto;
+                border-radius: .25rem;
+                box-shadow: $md-shadow-16dp;
+                width: 32rem;
+                max-height: 32rem;
+                &:not(.wy-scroll-y) {
+                    overflow: hidden;
+                }
+            }
+        }
+
+        &.wy-loading {
+            .wy-controls {
+                transition: opacity $md-animation-duration $md-animation-curve-default;
+                //transition: opacity .2s .2s variables.$md-animation-curve-default;
+                opacity: 1;
+            }
+        }
+    }
+}

package/src/scss/theme/_pager.scss

@@ -0,0 +1,19 @@
+.wy-pager {
+  pointer-events: none;
+}
+
+a.wy-pager {
+  display: block;
+  text-align: center;
+  margin: 1rem auto;
+}
+
+tr.wy-pager td {
+  text-align: center;
+  border: 0;
+
+  .wy-spinner {
+    display: inline;
+    margin: 1rem auto;
+  }
+}

package/src/scss/theme/_palette.scss

@@ -0,0 +1,165 @@
+@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/_pane.scss

@@ -0,0 +1,16 @@
+.wy-pane {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.wy-pane-body {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.wy-pane-group {
+  padding: .5rem;
+}