@weavy/uikit-react 11.0.1 → 12.1.0

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

@@ -0,0 +1,5 @@
+// plain text 
+.wy-content-text {
+  word-break: break-word;
+  white-space: pre-wrap;
+}

package/src/scss/theme/_preview.scss

@@ -0,0 +1,105 @@
+@use "config" as *;
+@use "mixins/backdrop";
+@use "sass:math";
+
+.wy-preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: calc(100% - $appbar-height - $border-width);
+  position: relative;
+}
+
+.wy-nav-prev, .wy-nav-next {
+  position: fixed;
+  top: 50%;
+  z-index: $zindex-dropdown;
+
+   .wy-button-icon {
+     background-color: $light;
+
+     .wy-dark & {
+      background-color: rgba($dark, $opacity-backdrop);
+     }
+   }
+}
+
+.wy-nav-prev {
+  left: .5rem;
+}
+
+.wy-nav-next {
+  right: .5rem;
+} 
+
+.wy-document {
+  align-self: flex-start;
+  background-color: $body-bg;
+  color: color-contrast($body-bg);
+  padding: 2rem 3rem;
+  width: 100%;
+  min-height: 100%;
+  // approximate A4 dimensions (h/w = sqrt(2) = 1.4142...)
+  @include media-breakpoint-up(md) {
+    padding: 3rem 4rem;
+    margin: 2rem 3.5rem;
+    border-radius: $border-radius-sm;
+    box-shadow: $box-shadow-sm;
+    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 &, &.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;
+    }
+  }
+}
+
+
+.wy-tool {
+  display: flex;
+  align-items: center;
+  margin: 0 .5rem;
+}

package/src/scss/theme/_reactions.scss

@@ -0,0 +1,58 @@
+@use "config" as *;
+@use "bs/dropdown";
+@use "tables";
+
+
+.wy-reaction-count {
+  margin: 0 .25rem;
+  line-height: 1;
+  color: $text-muted;
+  font-size: $font-size-sm;
+}
+
+.wy-reaction-menu {
+  padding: .5rem;
+  font-size: 1.125rem;
+  border-radius: 2.5rem;
+}
+
+.wy-reaction-picker {
+  display: flex;
+
+  .wy-reaction-button {
+    color: unset;
+  }
+}
+
+.wy-reactions {
+  display: inline-flex;
+  align-items: center;
+  column-gap: .125rem;
+
+  // hidden when empty
+  &:empty {
+    display: none;
+  }
+}
+
+.wy-table-reactions {
+  @extend %table, %table-icons;
+
+  // avatar
+  td:first-child {
+    width: 2rem;
+    padding-left: 0;
+  }
+
+  // name
+  td:nth-child(2) {
+    width: 100%;
+    @include text-truncate();
+  }
+
+  // reaction
+  td:last-child {
+    width: 2rem;
+    padding-right: 0;
+  }
+}

package/src/scss/theme/_reboot.scss

@@ -0,0 +1,41 @@
+@use "sass:selector";
+@use "variables" as *;
+
+// General style reboot selector for all classes starting with wy-
+[class^="wy-"], [class*=" wy-"] {
+  // Cherry-picked and ported from bootstrap/scss/reboot
+  &, & * {
+
+    &, &::before, &::after {
+      box-sizing: border-box;
+    }
+
+    &[hidden] {
+      display: none !important;
+    }
+
+    &[role="button"] {
+      cursor: pointer;
+    }
+  }
+
+  #{selector.append("a", &)}, & a {
+    text-decoration: $link-decoration;
+
+    &:hover {
+      text-decoration: $link-hover-decoration;
+    }
+
+    &:not([href]):not([class]) {
+
+      &, &:hover {
+        text-decoration: none;
+      }
+    }
+  }
+
+  #{selector.append("p", &)}, & p {
+    margin-top: 0;
+    margin-bottom: $paragraph-margin-bottom;
+  }
+}

package/src/scss/theme/_root.scss

@@ -0,0 +1,2 @@
+@import "config";
+@import "bootstrap/root";

package/src/scss/theme/_scroll.scss

@@ -0,0 +1,55 @@
+@use "sass:selector";
+@use "mixins/scrollbar";
+
+.wy-scroll-y {
+  @include scrollbar.scroll-y;
+
+  &:not(.wy-scroll-x) {
+    overflow-x: hidden;
+    touch-action: pan-y;
+  }
+}
+
+.wy-scroll-x {
+  @include scrollbar.scroll-x;
+
+  &:not(.wy-scroll-y) {
+    overflow-y: hidden;
+    touch-action: pan-x;
+  }
+}
+
+.wy-scrollbars {
+  // custom scrollbar styling
+  // use overlay scrollbars if supported
+
+  &.wy-scroll-y, .wy-scroll-y {
+    @supports (overflow-y: overlay) {
+      overflow-y: overlay;
+    }
+
+    @include scrollbar.custom-scrollbar;
+
+    // scrollbar offsets
+    @include scrollbar.scrollbar-top-padding(#{'var(--wy-scrollbar-adjust-top, 0)'});
+    @include scrollbar.scrollbar-bottom-padding(#{'var(--wy-scrollbar-adjust-bottom, 0)'});
+  }
+}
+
+// prevent scroll when opening modals etc.
+.wy-block-scroll {
+  overflow: hidden !important;
+}
+
+// element for detecting scrollbar capabilities (visibility, overlay etc.)
+.wy-scrollbar-detection {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 8rem;
+  height: 8rem;
+  overflow: scroll;
+  z-index: -99999;
+  pointer-events: none;
+  visibility: hidden;
+}

package/src/scss/theme/_search.scss

@@ -0,0 +1,68 @@
+@use "config" as *;
+@use "bs/forms";
+@use "icons";
+@use "spinner";
+@use "tables";
+
+input[type="search"]::-webkit-search-cancel-button {
+  // REVIEW: can we use close.svg?
+  -webkit-appearance: none;
+}
+
+.wy-search-form {
+  position: relative;
+  padding-top: .5rem;
+  padding-bottom: .5rem;
+
+  [type=reset] {
+    display: none;
+  }
+
+  .wy-button-icon {
+    position: absolute;
+    top: .25rem;
+    border-radius: 50%;
+    top: .5rem;
+    //left: .5rem;
+    padding: 0.25rem;
+    z-index: 4;
+  }
+}
+
+.wy-search-input {
+  @extend %form-control, %form-control-sm;
+  background: $light;
+  border-color: transparent;
+  padding-left: 2rem;
+
+  &:focus {
+    background: $light;
+    border-color: transparent;
+  }
+
+}
+
+.wy-searching .wy-search-form,
+.wy-searching.wy-search-form {
+  [type=reset] {
+    display: inline;
+  }
+
+  [type=submit] {
+    display: none;
+  }
+}
+
+.wy-search-result-table {
+  @extend %table,
+  %table-icons;
+
+  td:nth-child(2) {
+    @include text-truncate();
+  }
+}
+
+.wy-search-no-result {
+  color: $text-muted;
+  text-align: center;
+}

package/src/scss/theme/_spinner.scss

@@ -0,0 +1,63 @@
+@use "colors" as *;
+
+$spinner-offset: 187 !default;
+$spinner-duration: 1.4s !default;
+
+svg.wy-spinner {
+
+  circle {
+    stroke-dasharray: 1, 100;
+    stroke-dashoffset: 0;
+    transform-origin: center;
+  }
+
+  &.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;
+    }
+  }
+}
+
+@keyframes wy-rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes wy-dash {
+  0% {
+    stroke-dasharray: 1, 100;
+    stroke-dashoffset: 0;
+  }
+
+  50% {
+    stroke-dasharray: 44.5, 100;
+    stroke-dashoffset: -17.5;
+  }
+
+  100% {
+    stroke-dasharray: 44.5, 100;
+    stroke-dashoffset: -62;
+  }
+}
+
+@keyframes wy-color {
+  0%, 100% {
+    stroke: $blue;
+  }
+
+  25% {
+    stroke: $red;
+  }
+
+  50% {
+    stroke: $yellow;
+  }
+
+  75% {
+    stroke: $green;
+  }
+}

package/src/scss/theme/_tables.scss

@@ -0,0 +1,53 @@
+@use "config" as *;
+@use "bs/tables";
+
+
+// table with avatar/icon in first and last column
+%table-icons {
+  table-layout: fixed;
+
+  th, td {
+    // cell with img or icon
+    &:first-child, &:last-child {
+      color: $icon-color !important;
+      vertical-align: middle;
+      text-align: center;
+      padding: $table-cell-padding-y-sm $table-cell-padding-x;
+      width: 2rem + $table-cell-padding-x;
+      // reset th styles (for dropdown menus in th)
+      font-size: $font-size-base;
+      font-weight: $font-weight-base;
+      text-transform: none;
+      letter-spacing: normal;
+    }
+
+    &:first-child {
+      padding-right: 0;
+    }
+
+    &:last-child {
+      padding-left: 0;
+    }
+  }
+}
+
+
+.wy-table-trashed {
+  th, td {
+    color: $text-muted;
+    text-decoration: line-through;
+    &:not(:last-child) {
+      opacity: $btn-disabled-opacity;
+    }
+
+    > a {
+      color: $text-muted;
+    }
+  }
+
+  &:hover {
+    th, td {
+      opacity: 1;
+    }
+  }
+}

package/src/scss/theme/_toasts.scss

@@ -0,0 +1,47 @@
+@use "sass:map";
+@use "variables" as *;
+
+.wy-toasts {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  pointer-events: none;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: $zindex-fixed;
+}
+
+.wy-toast {
+  margin: 0 0 1rem;
+}
+
+.wy-toast-body {
+  padding: $toast-padding-y $toast-padding-x;
+}
+
+.wy-button-toast {
+  font-weight: $font-weight-normal;
+  text-decoration: $link-decoration;
+
+  &:hover {
+    color: $btn-link-hover-color;
+    text-decoration: $link-hover-decoration;
+  }
+
+  &:focus {
+    text-decoration: $link-hover-decoration;
+    box-shadow: none;
+  }
+
+  &:disabled,
+  &.wy-disabled {
+    color: $btn-link-disabled-color;
+  }
+
+  color: map.get($utilities-text-colors, "info");
+  text-transform: uppercase;
+  font-weight: 500;
+}

package/src/scss/theme/_turbo.scss

@@ -0,0 +1,17 @@
+@use "colors" as *;
+
+.turbo-progress-bar {
+  background-color: $primary;
+  height: .25rem;
+}
+
+[data-turbo-link] {
+  cursor: pointer;
+}
+
+
+html[data-turbo-preview] {
+  main {
+    opacity: .6;
+  }
+}

package/src/scss/theme/_typing.scss

@@ -0,0 +1,26 @@
+.wy-typing-show {
+  font-style: italic;
+  display: none;
+}
+
+.wy-typing-active {
+  .wy-typing-show {
+    display: block;
+  }
+
+  .wy-typing-hide {
+    display: none;
+  }
+}
+
+.wy-appbar {
+  .wy-typing-hide {
+    position: relative;
+    padding: 0 1.25rem;
+
+    .wy-presence.wy-presence-active {
+      top: .375rem;
+      left: .25rem;
+    }
+  }
+}

package/src/scss/theme/_variables.scss

@@ -0,0 +1,139 @@
+// 1. Introduce Weavy theme variables
+@import "colors"; // weavy color system
+
+$appbar-height: 3rem;
+$footerbar-height: 3.5rem;
+
+$opacity-backdrop: .95;
+
+// TODO: remove the following $client- variables (used in dropin-js)
+$client-panel-width: 24rem; // 384px, previously 375px;
+$client-zindex: 2147483647; // max possible z-index
+$client-border-radius: .25rem;
+$client-icon-size: 2.5rem;
+$client-alert-background: $primary-200;
+$client-alert-color: $primary-800;
+
+// Additional font sizes and weights
+//$font-size-xxs: .625rem; // 7.5pt/10px
+$font-size-xs: .75rem; // 9pt/12px
+//$font-weight-thin: 100;
+//$font-weight-extralight: 200;
+$font-weight-medium: 500;
+//$font-weight-extrabold: 800;
+//$font-weight-black: 900;
+//$font-weight-extrablack: 950;
+
+// Material design buttons and icons
+$btn-hover-bg: rgba(0, 0, 0, .04);
+$btn-active-bg: rgba(0, 0, 0, .12);
+$icon-color: rgba(0, 0, 0, .54);
+$icon-hover-color: rgba(0, 0, 0, .87);
+$icon-light-color: rgba(255, 255, 255, .70);
+$icon-light-hover-color: rgba(255, 255, 255, 1);
+$icon-color-primary: rgba($primary-700, .87);
+$icon-hover-color-primary: rgba($primary-700, 1);
+$icon-light-color-primary: rgba($primary-300, .87);
+$icon-light-hover-color-primary: rgba($primary-300, 1);
+
+// Material design animation and shadows from https://fezvrasta.github.io/bootstrap-material-design/
+$md-animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1);
+$md-animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1);
+$md-animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1);
+$md-animation-curve-default: $md-animation-curve-fast-out-slow-in;
+$md-animation-duration: .2s;
+$md-animation-duration-fast: .1s;
+$md-shadow-umbra-opacity: 0.2;
+$md-shadow-penumbra-opacity: 0.14;
+$md-shadow-ambient-opacity: 0.12;
+$md-shadow-focus: 0 0 .5rem rgba($black, .18), 0 .5rem 1rem rgba($black, .36);
+$md-shadow-2dp: 0 .125rem .125rem 0 rgba($black, $md-shadow-penumbra-opacity), 0 .1875rem .0625rem -.125rem rgba($black, $md-shadow-umbra-opacity), 0 .0625rem .3125rem 0 rgba($black, $md-shadow-ambient-opacity);
+$md-shadow-3dp: 0 .1875rem .25rem 0 rgba($black, $md-shadow-penumbra-opacity), 0 .1875rem .1875rem -.125rem rgba($black, $md-shadow-umbra-opacity), 0 .0625rem .5rem 0 rgba($black, $md-shadow-ambient-opacity);
+$md-shadow-4dp: 0 .25rem .3125rem 0 rgba($black, $md-shadow-penumbra-opacity), 0 .0625rem .625rem 0 rgba($black, $md-shadow-ambient-opacity), 0 .125rem .25rem -.0625rem rgba($black, $md-shadow-umbra-opacity);
+$md-shadow-6dp: 0 .375rem .625rem 0 rgba($black, $md-shadow-penumbra-opacity), 0 .0625rem 1.5rem 0 rgba($black, $md-shadow-ambient-opacity), 0 .1875rem .3125rem -.0625rem rgba($black, $md-shadow-umbra-opacity);
+$md-shadow-8dp: 0 .5rem .625rem .0625rem rgba($black, $md-shadow-penumbra-opacity), 0 .1875rem 1.25rem .125rem rgba($black, $md-shadow-ambient-opacity), 0 .3125rem .3125rem -.1875rem rgba($black, $md-shadow-umbra-opacity);
+$md-shadow-16dp: 0 1rem 2.25rem .125rem rgba($black, $md-shadow-penumbra-opacity), 0 .375rem 1.875rem .3125rem rgba($black, $md-shadow-ambient-opacity), 0 .5rem .625rem -.3125rem rgba($black, $md-shadow-umbra-opacity);
+$md-shadow-24dp: 0 .5625rem 4.375rem .5rem rgba($black, $md-shadow-penumbra-opacity), 0 1.0625rem 1.3125rem -.4375rem rgba($black, $md-shadow-ambient-opacity), 0 2.25rem 3.5rem .1875rem rgba($black, $md-shadow-umbra-opacity);
+
+// 2. Override bootstrap variables
+
+// Options
+$enable-shadows: true;
+$enable-smooth-scroll: false;
+$enable-grid-classes: false;
+
+// Prefix for :root CSS variables
+$prefix: wy-;
+
+// Body
+$body-color: $gray-950;
+
+// Links
+$link-decoration: none;
+
+// Components
+$border-color: $gray-200;
+
+$box-shadow: $md-shadow-8dp;
+$box-shadow-sm: $md-shadow-4dp;
+$box-shadow-lg: $md-shadow-16dp;
+$box-shadow-inset: 0;
+
+$component-active-color: $gray-900; // $white
+$component-active-bg: $gray-100; // $primary
+
+// Tables
+$table-hover-bg: $light;
+$table-border-color: $gray-100;
+
+// Buttons
+$btn-box-shadow: unset; 
+$btn-focus-box-shadow: unset;
+$btn-active-box-shadow: unset;
+
+// Forms
+$input-focus-border-color: tint-color($primary, 50%);
+
+// Navbar
+$navbar-padding-x: .5rem;
+
+$navbar-dark-color: rgba($white, .62);
+$navbar-dark-hover-color: rgba($white, .95);
+
+$navbar-light-color: rgba($black, .69);
+$navbar-light-hover-color: rgba($black, .88);
+$navbar-light-active-color: $black;
+
+// Dropdowns
+$dropdown-padding-y: .25rem;
+$dropdown-spacer: .25rem;
+$dropdown-border-width: 0;
+$dropdown-divider-margin-y: .25rem;
+$dropdown-box-shadow: $md-shadow-2dp;
+
+$dropdown-link-color: $body-color;
+$dropdown-link-hover-bg: $light;
+
+$dropdown-item-padding-y: .75rem;
+$dropdown-item-padding-x: .75rem;
+
+// Cards
+$card-cap-bg: $white;
+
+// Toasts
+$toast-max-width: auto;
+$toast-font-size: 1rem;
+$toast-color: $gray-200;
+$toast-background-color: $gray-800;
+
+// Modals
+$modal-header-border-width: 0;
+
+// List group
+$list-group-hover-bg: $light;
+
+$list-group-action-active-color: $component-active-color;
+$list-group-action-active-bg: $component-active-bg;
+
+// 3. Import default bootstrap variables
+@import "bootstrap/variables";