@weavy/uikit-react 11.2.0 → 12.1.0

package/src/scss/theme/_panels.scss

@@ -0,0 +1,137 @@
+@use "config" as *;
+@use "mixins/backdrop";
+
+.wy-panels {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overscroll-behavior: contain;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+.wy-panel {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    pointer-events: none;
+    overflow: hidden;
+    background-color: rgba(mix($white, #FFF), $opacity-backdrop);
+    display: flex;
+    flex-direction: column;
+
+    .wy-controls {
+        top: .5rem;
+        left: .5rem;
+        min-width: 2rem;
+        width: auto;
+        display: flex;
+        z-index: 10000;
+        order: -1;
+        flex-direction: row-reverse;
+
+        &:empty {
+            display: none;
+        }
+
+        .wy-icon {
+            color: $icon-color;
+        }
+
+        border-bottom: 1px solid $border-color;
+    }
+
+    .wy-panel-frame {
+        transition: opacity .1s .2s $md-animation-curve-default;
+        opacity: 1;
+    }
+
+    &:not(.wy-loaded) .wy-panel-frame {
+        opacity: 0;
+        transition: opacity .2s .1s step-start;
+    }
+
+    &.wy-open {
+        pointer-events: all;
+        z-index: 5;
+
+        &[data-title]::before {
+            content: attr(data-title);
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: ($appbar-height - .0625rem);
+            opacity: 0;
+            pointer-events: none;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: rgba($gray-50, $opacity-backdrop);
+            color: $navbar-light-color;
+            border-bottom: $border-width solid $border-color;
+            transition: opacity .1s .2s step-end;
+            font-family: $font-family-base;
+            line-height: $line-height-base;
+            font-weight: $font-weight-base;
+
+            @include backdrop.filter;
+        }
+
+        &::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            pointer-events: none;
+            opacity: 0;
+            transition: opacity $md-animation-duration $md-animation-curve-default 0s;
+        }
+
+        &.wy-loading {
+            &[data-title]::before {
+                transition: opacity $md-animation-duration $md-animation-curve-default;
+                opacity: 1;
+            }
+
+            &::after {
+                transition: opacity $md-animation-duration $md-animation-curve-default .5s;
+                opacity: 1;
+                // spinner.svg encoded with https://codepen.io/jakob-e/pen/doMoML
+                background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cstyle type='text/css'%3Eg%7Banimation:rotate 2s linear infinite;transform-origin:center center%7Dcircle%7Bstroke-dasharray:1,100;stroke-dashoffset:0;animation:dash 1.5s ease-in-out infinite,color 6s ease-in-out infinite%7D@keyframes rotate%7B100%25%7Btransform:rotate(360deg)%7D%7D@keyframes dash%7B0%25%7Bstroke-dasharray:1,100;stroke-dashoffset:0%7D50%25%7Bstroke-dasharray:44.5,100;stroke-dashoffset:-17.5px%7D100%25%7Bstroke-dasharray:44.5,100;stroke-dashoffset:-62px%7D%7D@keyframes color%7B0%25,100%25%7Bstroke:%23216eb4%7D40%25%7Bstroke:%2328b7cf%7D66%25%7Bstroke:%23216eb4%7D80%25,90%25%7Bstroke:%2328b7cf%7D%7D%3C/style%3E%3Cg%3E%3Ccircle fill='none' cx='12' cy='12' r='11' stroke-linecap='butt' stroke-width='2' /%3E%3C/g%3E%3C/svg%3E");
+                background-repeat: no-repeat;
+                background-position: 50%;
+                background-size: rem(2);
+                background-color: transparent;
+            }
+        }
+    }
+}
+
+// Transitions
+.wy-panel {
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity $md-animation-duration-fast $md-animation-curve-default .01s, transform $md-animation-duration-fast $md-animation-curve-default .01s, visibility .01s step-end $md-animation-duration-fast;
+
+    &.wy-open {
+        transition: opacity $md-animation-duration $md-animation-curve-default, transform $md-animation-duration $md-animation-curve-default, visibility $md-animation-duration step-start;
+        visibility: visible;
+
+        &.wy-transition {
+            opacity: 1;
+            transform: none;
+        }
+    }
+}
+
+.wy-panel-frame {
+    flex: 1 1 100%;
+    border: 0;
+}

package/src/scss/theme/_picker-list.scss

@@ -0,0 +1,37 @@
+@use "config" as *;
+
+
+.wy-picker-list {
+  border: none;
+
+  > .wy-picker-list-item:first-child, > :first-child .wy-picker-list-item {
+    border-top: none;
+  }
+
+  > .wy-picker-list-item:last-child, > :last-child .wy-picker-list-item {
+    //border-top: $border-width solid $border-color;
+    border-bottom: none;
+  }
+}
+
+.wy-picker-list-item {
+  display: flex;
+  align-items: center;
+  padding: .25rem .5rem;
+
+  > .wy-icon {
+    margin-left: .25rem;
+    margin-right: .25rem;
+    flex: 0 0 auto;
+  }
+
+  > button {
+    margin-block-start: auto;
+    flex: 0 0 auto;
+  }
+}
+
+.wy-picker-list-item-title {
+  flex-grow: 1;
+  @include text-truncate();
+}

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

@@ -0,0 +1,38 @@
+@use "variables" as *;
+
+// Embedded iframes
+
+.wy-content-iframe, [data-controller~="embed"] {
+  border: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  flex: 1 1 100%;
+
+  &:not(.wy-loading):not([data-controller~="embed"]), &[data-controller~="embed"].wy-loaded {
+    background: $white;
+
+    ~ .wy-content-iframe-fallback, ~ .wy-spinner {
+      display: none;
+    }
+  }
+
+  &.wy-loading:not(.wy-loaded), &[data-controller~="embed"]:not(.wy-loaded) {
+    position: absolute;
+    visibility: hidden;
+    z-index: -1;
+    pointer-events: none;
+
+    &:not(.wy-fallback) ~ .wy-content-iframe-fallback {
+      display: none;
+    }
+
+    &.wy-fallback ~ .wy-spinner {
+      display: none;
+    }
+  }
+
+  ~ .wy-spinner {
+    margin: auto;
+  }
+}

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

@@ -0,0 +1,7 @@
+// markdown or code with syntax highlighting
+.wy-content-html {
+  pre, code {    
+    word-break: break-word;
+    white-space: pre-wrap;
+  }
+}

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

@@ -0,0 +1,41 @@
+@use "variables" as *;
+
+
+// big file type icon
+.wy-content-icon {
+  background-color: $body-bg;
+  border-radius: $border-radius-lg;
+
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  
+  text-align: center;
+  padding: 1rem 2rem;
+
+  .wy-icon-stack, .wy-icon {
+    width: 8rem;
+    height: 8rem;    
+  }
+
+  .wy-dark & {
+    background-color: rgba($dark, $opacity-backdrop);
+    color: $navbar-dark-color;
+
+    a {
+      color: $primary-300;
+    }
+    .wy-icon {
+      color: $icon-light-color;
+    }
+
+    .wy-icon-stack {
+      .wy-icon:last-child {
+        background-color: rgba($dark, $opacity-backdrop);
+      }
+    }
+
+  }
+
+}
+  

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

@@ -0,0 +1,86 @@
+@use "variables" as *;
+
+.wy-content-image {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  margin: auto;
+  max-height: 100%;
+  max-width: 100%;
+
+  &.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 - 1px) * (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;
+    //cursor: zoom-in;
+  }
+
+
+  &.wy-zoom {
+    cursor: zoom-out;
+    transition: transform $md-animation-duration $md-animation-curve-default, transform-origin $md-animation-duration step-start;
+  }
+
+  img {
+    //object-fit: contain;
+    min-width: 0;
+    min-height: 0;
+    width: 100%;
+    height: 100%;
+
+    &:not(.wy-loading-transition):not([data-controller~="image"]) ~ .wy-spinner {
+      display: none;
+    }
+
+    &.wy-loading, &[data-controller~="image"] {
+      transition: opacity 0.15s ease-out;
+      opacity: 0;
+
+      &.wy-loaded {
+        opacity: 1;
+        transition: opacity 0.15s ease-out;
+
+        ~ img {
+          // hide any previous images/thumbs, wait for loaded image transition
+          transition-delay: 0.15s;
+          opacity: 0;
+        }
+
+        ~ .wy-spinner {
+          display: none;
+        }
+      }
+    }
+
+    &.wy-responsive-image-thumb {
+      position: absolute;
+      z-index: -1;
+    }
+
+    ~ .wy-spinner {
+      position: absolute;
+    }
+  }
+}

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

@@ -0,0 +1,28 @@
+// Video and audio
+.wy-content-video {
+  &:not(.wy-error) {
+    min-height: 0;
+    max-width: 100%;
+    max-height: 100%;
+  }
+}
+
+.wy-content-video, .wy-content-audio {
+  margin: auto;
+
+  &.wy-loading, &[data-controller~="media"] {
+    &:not(.wy-loaded) {
+      visibility: hidden;
+    }
+
+    &.wy-loaded {
+      ~ .wy-spinner {
+        display: none;
+      }
+    }
+  }
+
+  &:focus {
+    outline: none;
+  }
+}