@weavy/uikit-react 13.0.0 → 14.0.0

package/src/scss/theme/_post.scss

@@ -0,0 +1,83 @@
+@use "base/colors";
+@use "base/vars";
+
+.wy-post {
+  --wy-component-background-color: #{colors.$surface-1};
+  --wy-component-color: #{colors.$on-surface};
+  background-color: var(--wy-component-background-color);
+  color: var(--wy-component-color);
+  // REVIEW: box-shadow instead of border?
+  //box-shadow: vars.$md-shadow-2dp;
+
+  //border-color: #{colors.$outline-variant};
+  //border-style: solid;
+  //border-width: 1px 0;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  margin: 1rem .75rem;
+
+  --wy-component-border-radius: #{vars.$border-radius};
+  border-radius: var(--wy-component-border-radius);
+
+  .wy-image-grid {
+    border-radius: 0;
+    margin-bottom: 1rem;
+  }
+
+  .wy-embed {
+    margin-bottom: 1rem;
+  }
+
+  .wy-comments {
+    margin: .5rem .75rem;
+    border-top: 1px solid #{colors.$outline-variant};
+    padding: .75rem 0 0;
+  }
+  
+}
+
+.wy-post-body {
+  padding: 0 1rem;
+
+  &:empty {
+    display: none;
+  }
+
+  .wy-content {
+    margin-bottom: 1rem;
+  }
+
+  .wy-list {
+    margin-bottom: 1rem;
+  }
+
+  .wy-poll {
+    margin-bottom: 1rem;
+  }
+}
+
+.wy-post-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0 .5rem .5rem;
+}
+
+.wy-post-dragging {
+  &::after {
+    content: "Drop files here to upload.";
+    background-color: rgba(255, 255, 255, .5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 2px dashed colors.$primary;
+    font-weight: vars.$font-weight-bold;
+    z-index: 10000;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+}

package/src/scss/theme/_preview-code.scss

@@ -1,5 +1,14 @@
+@use "base/colors";
+
 .wy-content-code {
+  /*--wy-component-background-color: #{colors.$surface-1};
+  --wy-component-color: #{colors.$on-surface};
+
+  background-color: var(--wy-component-background-color);
+  color: var(--wy-component-color);
+  */
+
   align-self: flex-start;
   width: 100%;
-  padding: 1rem 3rem;
-}
+  padding: 2rem 3.5rem;
+}

package/src/scss/theme/_preview-embed.scss

@@ -1,4 +1,4 @@
-@use "variables" as *;
+@use "base/colors";
 
 // Embedded iframes
 
@@ -7,10 +7,16 @@
   display: block;
   width: 100%;
   height: 100%;
+  top: 0;
+  left: 0;
   flex: 1 1 100%;
 
   &.wy-loaded {
-    background: $white;
+    --wy-component-background-color: #{colors.$surface-1};
+    --wy-component-color: #{colors.$on-surface};
+
+    background-color: var(--wy-component-background-color);
+    color: var(--wy-component-color);
 
     ~ .wy-content-iframe-fallback, ~ .wy-spinner {
       display: none;

package/src/scss/theme/_preview-image.scss

@@ -1,4 +1,4 @@
-@use "variables" as *;
+@use "base/vars";
 
 .wy-content-image {
   min-width: 0;
@@ -9,38 +9,20 @@
   margin: auto;
   max-height: 100%;
   max-width: 100%;
-
-  &.wy-intrinsic-image {
+  /*&.wy-intrinsic-image {
     object-fit: scale-down;
-  }
-
-  &:not(.wy-intrinsic-image) {
-    height: 100%;
-    width: 100%;
-    // Similar to object-fit: contain; but works for divs. Must subtract margins.
-    --max-width: #{'min(calc((100vh - 3rem) * (var(--width) / var(--height))), calc(var(--width) * 1px), 100%)'};
-    --max-height: #{'min(calc(100vw * (var(--height) / var(--width))), calc(var(--height) * 1px), 100%)'};
-/*     // With sidebar
-    body.controller-content & {
-      --max-width: #{'min(calc((100vh - 6rem) * (var(--width) / var(--height))), calc(var(--width) * 1px), 100%)'};
-      --max-height: #{'min(calc(100vw * (var(--height) / var(--width))), calc(var(--height) * 1px), 100%)'};
-
-      @include bs.media-breakpoint-up(lg) {
-        --max-width: #{'min(calc((100vh - 3rem) * (var(--width) / var(--height))), calc(var(--width) * 1px), 100%)'};
-        --max-height: #{'min(calc((100vw - 20rem) * (var(--height) / var(--width))), calc(var(--height) * 1px), 100%)'};
-      }
-    } */
+  }*/
 
-    max-width: var(--max-width);
-    max-height: var(--max-height);
-    transition: transform $md-animation-duration $md-animation-curve-default, transform-origin $md-animation-duration step-end;
+  /*&:not(.wy-intrinsic-image) {
+    transition: transform vars.$transition, transform-origin vars.$transition-duration step-end;
     //cursor: zoom-in;
-  }
+  }*/
+  transition: transform vars.$transition, transform-origin vars.$transition-duration step-end;
 
 
   &.wy-zoom {
     cursor: zoom-out;
-    transition: transform $md-animation-duration $md-animation-curve-default, transform-origin $md-animation-duration step-start;
+    transition: transform vars.$transition, transform-origin vars.$transition-duration step-start;
   }
 
   img {

package/src/scss/theme/_preview-media.scss

@@ -4,6 +4,7 @@
     min-height: 0;
     max-width: 100%;
     max-height: 100%;
+    flex: 1 1 auto;
   }
 }
 

package/src/scss/theme/_preview-pdf.scss

@@ -1,13 +1,8 @@
-@use "config" as *;
-@use "inputs";
-@use "mixins/backdrop";
-@use "mixins/scrollbar";
+@use "base/vars";
+@use "base/colors";
+@use "base/scroll";
 
-$zindex-fixed: $zindex-fixed !default;
-$border-radius: $border-radius !default;
-$opacity-backdrop: $opacity-backdrop !default;
-
-:root {
+:root, :host > * {
   --pdfViewer-padding-bottom: 0;
   --page-margin: 2rem auto;
   --page-border: none;
@@ -18,7 +13,7 @@ $opacity-backdrop: $opacity-backdrop !default;
 
 // How to test?
 @media screen and (forced-colors: active) {
-  :root {
+  :root, :host > * {
     --pdfViewer-padding-bottom: 9px;
     --page-margin: 9px auto 0;
     --page-border: none;
@@ -51,11 +46,11 @@ $opacity-backdrop: $opacity-backdrop !default;
     bottom: 0;
     left: 0;
 
-    @include scrollbar.scroll-y;
-    @include scrollbar.scroll-x;
+    @include scroll.scroll-y;
+    @include scroll.scroll-x;
 
     .wy-scrollbars & {
-      @include scrollbar.custom-scrollbar;
+      @include scroll.custom-scrollbar;
 
       @supports (overflow-y: overlay) {
         overflow-y: overlay;
@@ -732,8 +727,8 @@ $opacity-backdrop: $opacity-backdrop !default;
     border: var(--page-border);
     background-clip: content-box;
     //border-image: url(/images/pdf/shadow.png) 9 9 repeat;
-    box-shadow: $box-shadow-sm;
-    background-color: rgba(255, 255, 255, 1);
+    box-shadow: vars.$shadow-level2;
+    background-color: colors.$white;
   }
 
   .pdfViewer .dummyPage {

package/src/scss/theme/_preview.scss

@@ -1,32 +1,58 @@
-@use "config" as *;
-@use "mixins/backdrop";
 @use "sass:math";
+@use "base/vars";
+@use "base/colors";
+@use "base/backdrop";
+@use "base/breakpoints";
+
+.wy-main {
+  display: flex;
+  height: calc(100vh - vars.$appbar-height);
+
+  @include breakpoints.media-breakpoint-down(md) {
+    flex-direction: column;
+  }
+}
 
 .wy-preview {
+  --wy-component-background-color: #{colors.$background};
+  --wy-component-color: #{colors.$on-background};
+  background-color: var(--wy-component-background-color);
+  color: var(--wy-component-color);
+
   display: flex;
+  flex-direction: column;
+
   align-items: center;
-  justify-content: center;
-  height: calc(100% - $appbar-height - $border-width);
+  justify-content: space-around;
   position: relative;
-  background-color: $body-bg;
+  flex: 1 1 100%;
 
-  .wy-dark &, &.wy-dark {
-    background-color: $dark;
-  }
+  min-width: 16rem;
+  min-height: 16rem;
+  max-height: 100%;
+  max-width: 100%;
+}
+
+.wy-preview-area {
+  min-width: 0;
+  min-height: 0;
+  width: 100%;
+  height: 100%;
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
 }
 
 .wy-nav-prev, .wy-nav-next {
-  position: fixed;
+  --wy-component-background-color: #{colors.$surface-variant};
+  --wy-component-color: #{colors.$on-surface-variant};
+  
+  background-color: var(--wy-component-background-color);
+  
+  position: absolute;
   top: 50%;
-  z-index: $zindex-dropdown;
-
-   .wy-button-icon {
-     background-color: $light;
-
-     .wy-dark & {
-      background-color: rgba($dark, $opacity-backdrop);
-     }
-   }
+  z-index: vars.$zindex-dropdown;
+  border-radius: 50%;
 }
 
 .wy-nav-prev {
@@ -35,76 +61,28 @@
 
 .wy-nav-next {
   right: .5rem;
-} 
+}
 
 .wy-document {
+  // always black on white
+  --wy-component-background-color: var(--wy-white);
+  --wy-component-color: var(--wy-on-background);
+  background-color: var(--wy-component-background-color);
+  color: var(--wy-component-color);
   align-self: flex-start;
-  background-color: $body-bg;
-  color: color-contrast($body-bg);
-  padding: 2rem 3rem;
+  padding: 2rem 3.5rem;
   width: 100%;
   min-height: 100%;
+  flex: 1 0 auto;
   // approximate A4 dimensions (h/w = sqrt(2) = 1.4142...)
-  @include media-breakpoint-up(md) {
+  // TODO: REMOVE BREAKPOINTS
+  @include breakpoints.media-breakpoint-up(md) {
     padding: 3rem 4rem;
-    margin: 2rem 3.5rem;
+    margin: 2rem auto;
     border-radius: .125rem;
-    box-shadow: $box-shadow-sm;
+    box-shadow: vars.$shadow-level2;
     width: 120ch;
     min-height: 170ch;
-    max-width: 100%;
-  }
-}
-
-// floating toolbar (mainly for pdf preview, but can be also be used for other things)
-.wy-toolbar {
-  position: fixed;
-  z-index: $zindex-fixed;
-  bottom: math.div($appbar-height, 2);
-  left: 0;
-  right: 0;
-  height: $appbar-height;
-  display: flex;
-  justify-content: center;
-
-  span {
-    margin-left: .25rem;
-  }
-
-  .wy-input {
-    text-align: center;
-    border-color: transparent;
-  }
-}
-
-.wy-tools {
-  background-color: rgba($light, $opacity-backdrop);
-  color: color-contrast($light);
-  border-radius: $border-radius;
-  display: flex;
-  align-items: center;
-
-  @include backdrop.filter;
-
-  // dark theme
-  .wy-dark & {
-    background-color: rgba($dark, $opacity-backdrop);
-    color: $navbar-dark-color;
-
-    .wy-icon {
-      color: $navbar-dark-color;
-    }
-
-    .wy-input {
-      background-color: rgba(0, 0, 0, 0.5);
-      color: $navbar-dark-color;
-    }
+    max-width: calc(100% - 3.5rem);
   }
 }
-
-
-.wy-tool {
-  display: flex;
-  align-items: center;
-  margin: 0 .5rem;
-}

package/src/scss/theme/_reactions.scss

@@ -1,17 +1,17 @@
-@use "config" as *;
-@use "bs/dropdown";
-@use "tables";
-
+@use "base/colors";
+@use "base/vars";
+@use "buttons"; // Ensures correct order, since buttons is needed by reactions
+@use "dropdown"; // Ensures correct order, since dropdown is needed by reactions
 
 .wy-reaction-count {
-  margin: 0 .25rem;
+  margin: 0 0.5rem 0 .125rem;
   line-height: 1;
-  color: $text-muted;
-  font-size: $font-size-sm;
+  //color: vars.$text-muted;
+  font-size: vars.$font-size-sm;
 }
 
 .wy-reaction-menu {
-  padding: .5rem;
+  padding: .25rem;
   font-size: 1.125rem;
   border-radius: 2.5rem;
 }
@@ -36,23 +36,54 @@
 }
 
 .wy-table-reactions {
-  @extend %table, %table-icons;
-
   // avatar
   td:first-child {
-    width: 2rem;
-    padding-left: 0;
+    width: 3rem;
   }
 
   // name
   td:nth-child(2) {
     width: 100%;
-    @include text-truncate();
   }
 
-  // reaction
-  td:last-child {
-    width: 2rem;
-    padding-right: 0;
+  tr:last-child td {
+    box-shadow: none;
+  }
+}
+
+
+
+.wy-reactions-line {  
+  display: flex;  
+  align-items: center;
+
+  /*> * {
+    position: relative;
+  }*/
+
+  .wy-reactions {
+    background: var(--wy-component-background-color);
+    color: currentColor;
+    border-radius: vars.$border-radius-pill;
+    display: flex;
+    width: auto;
+    background-clip: content-box;
+
+    > .wy-emoji {
+      &:first-child {
+        margin-left: .125rem;
+      }
+
+      &:last-child {
+        margin-right: .125rem;
+      }
+    }
+  }
+
+  .wy-reaction-menu-button {
+    background: var(--wy-component-background-color);
+    color: currentColor;
+    border-radius: vars.$border-radius-pill;
+    background-clip: content-box;
   }
 }

package/src/scss/theme/_sheet.scss

@@ -0,0 +1,59 @@
+@use "base/vars";
+@use "base/colors";
+@use "base/scroll";
+
+.wy-sheet {
+  // Reset scrollbar adjust
+  --wy-scrollbar-adjust-top: 0;
+  --wy-scrollbar-adjust-bottom: 0;
+
+  --wy-component-background-color: #{colors.$surface-3};
+  --wy-component-color: #{colors.$on-surface};
+
+  background-color: var(--wy-component-background-color);
+  color: var(--wy-component-color);
+
+  position: fixed;
+  z-index: vars.$zindex-modal;
+  display: flex;
+  flex-direction: column;
+  
+  bottom: .5rem;
+  left: .5rem;
+  right: .5rem;
+  max-height: max(50vh, 50%);
+  min-height: 3rem;
+  margin: .5rem auto;
+  max-width: 32rem;
+
+  // transition hide
+  transition: opacity vars.$transition;
+
+  border-radius: vars.$border-radius;
+  box-shadow: vars.$shadow-level1;
+
+  > .wy-appbars, > .wy-appbar {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+}
+
+.wy-sheet-body {
+  overflow: hidden;
+  padding: .5rem;
+}
+
+// Transitions
+.wy-sheet {
+  &:not(.wy-show) {
+    opacity: 0;
+    transform: translateY(32rem);
+  }
+
+  &.wy-show {
+    opacity: 1;
+    transform: none;
+    // transition show
+    transition: transform vars.$transition, opacity vars.$transition;
+  }
+}

package/src/scss/theme/_sidebar.scss

@@ -0,0 +1,86 @@
+@use "base/vars";
+@use "base/colors";
+@use "base/breakpoints";
+
+.wy-sidebar {
+  --wy-component-background-color: #{colors.$surface-2};
+  --wy-component-color: #{colors.$on-surface};
+  background: var(--wy-component-background-color);
+  color: var(--wy-component-color);
+  min-width: 0;
+  min-height: 0;
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 18rem;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  transition: flex-basis #{vars.$transition};
+  position: relative;
+  order: 9999;
+
+  > * {
+    transition: opacity #{vars.$transition-fast} calc(#{vars.$transition-duration} - #{vars.$transition-duration-fast});
+    min-width: 18rem;
+  }
+
+  &[hidden] {
+    display: flex !important;
+    flex-basis: 0;
+
+    > * {
+      transition: opacity #{vars.$transition-fast};
+      opacity: 0;
+    }
+  }
+
+  @include breakpoints.media-breakpoint-up(md) {
+    > * {
+      min-width: 18rem;
+    }
+
+    .wy-sidebar-handle {
+        display: none;
+    }
+  }
+
+  @include breakpoints.media-breakpoint-down(md) {
+    transition: flex-basis #{vars.$transition}, margin-top #{vars.$transition};
+    border-top-left-radius: vars.$border-radius-lg;
+    border-top-right-radius: vars.$border-radius-lg;
+    flex-basis: 50vh;
+
+    &:not([hidden]) {
+      margin-top: calc(-1 * var(--wy-border-radius-lg));
+
+      &.wy-maximized {
+        flex-basis: calc(100vh - #{vars.$appbar-height} * 1.5);
+        margin-top: calc(-50vh + #{vars.$appbar-height} * 1.5 - var(--wy-border-radius-lg));
+
+        ~ * .wy-nav-prev,
+        ~ * .wy-nav-next {
+          display: none;
+        }
+      }
+    }
+
+    > * {
+      min-height: vars.$appbar-height;
+    }
+  }
+}
+
+.wy-sidebar-handle {
+  width: 4rem;
+  background-clip: content-box;
+  background-color: #{colors.$on-surface-variant};
+  height: 1rem;
+  border: .375rem solid transparent;
+  position: absolute;
+  top: 0rem;
+  z-index: 2;
+  left: 50%;
+  margin-left: -2rem;
+  border-radius: #{vars.$border-radius-pill};
+  cursor: pointer;
+}

package/src/scss/theme/_spinner.scss

@@ -1,20 +1,24 @@
-@use "colors" as *;
+@use "base/colors";
 
 $spinner-offset: 187 !default;
 $spinner-duration: 1.4s !default;
 
-svg.wy-spinner {
+.wy-spinner, .wy-icon[data-icon=spinner] {
+  align-self: center;
+  justify-self: center;
+  margin: auto;
 
   circle {
     stroke-dasharray: 1, 100;
     stroke-dashoffset: 0;
     transform-origin: center;
+    fill:none !important;
   }
 
   &.wy-spin {
     // add class .wy-spin to animate the spinner (otherwise it will not be visible)
     animation: wy-rotate $spinner-duration linear infinite;
-  
+
     circle {
       animation: wy-dash $spinner-duration ease-in-out infinite, wy-color ($spinner-duration*2) ease-in-out infinite;
     }
@@ -46,18 +50,18 @@ svg.wy-spinner {
 
 @keyframes wy-color {
   0%, 100% {
-    stroke: $blue;
+    stroke: colors.$primary;
   }
 
   25% {
-    stroke: $red;
+    stroke: colors.$primary;
   }
 
   50% {
-    stroke: $yellow;
+    stroke: transparent;
   }
 
   75% {
-    stroke: $green;
+    stroke: colors.$primary;
   }
 }