@weavy/uikit-react 11.2.0 → 12.1.0

package/src/scss/theme/_dropdown.scss

@@ -0,0 +1,86 @@
+@use "config" as *;
+@use "bs/dropdown";
+
+.wy-dropdown,
+.wy-dropup {
+  position: relative
+}
+
+.wy-dropup {
+  .wy-dropdown-menu {
+    top: auto;
+    bottom: 100%;
+    margin-top: 0;
+    margin-bottom: $dropdown-spacer;
+  }
+}
+
+
+.wy-dropdown-toggle {
+  white-space: nowrap;
+}
+
+.wy-dropdown-menu {
+  @extend %dropdown-menu;
+
+  display: block;
+
+  .wy-dropup & {
+      top: auto;
+      bottom: 100%;
+      margin-top: 0;
+      margin-bottom: $dropdown-spacer;
+  }
+
+  // Bootstrap compatibility
+  [data-bs-toggle="dropdown"] ~ & {
+    &:not(.show) {
+      display: none;
+    }
+
+    &[hidden].show {
+        display: block !important;
+    }
+  }
+}
+
+.#{wy}-dropdown-menu-end {
+  right: 0;
+}
+
+.#{wy}-dropdown-item {
+  @extend %dropdown-item;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+
+  > img, .#{wy}-icon {
+    margin-right: .5rem;
+    color: $icon-color;
+  }
+
+  &:active {
+    > .#{wy}-icon {
+      $c: color-contrast($component-active-bg);
+      color: if($c == $color-contrast-light, $icon-light-color!important, $icon-color);
+    }
+  }
+
+  // dropdown item with icon for marking selection option
+  &.#{wy}-option {
+    .wy-icon {
+      visibility: hidden;
+    }
+    &.#{wy}-selected {
+      .wy-icon {
+        visibility: visible;
+      } 
+    }
+  }
+
+}
+
+.#{wy}-dropdown-divider {
+  @extend %dropdown-divider;
+}
+

package/src/scss/theme/_emoji.scss

@@ -0,0 +1,5 @@
+.wy-emoji {
+  width: 1.25rem;
+  height: 1.25rem;
+  vertical-align: -.25rem;
+}

package/src/scss/theme/_filebrowser.scss

@@ -0,0 +1,26 @@
+// External filebrowsers
+.wy-filebrowser {
+  pointer-events: none;
+  width: auto;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  max-width: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.wy-filebrowser-frame {
+  pointer-events: all;
+  display: none;
+  width: 100%;
+  height: 100%;
+  z-index: 99999999;
+  position: absolute;
+  top: 0;
+  left: 0;
+  border: 0;
+  background: rgba(0,0,0,.5)
+}

package/src/scss/theme/_files.scss

@@ -0,0 +1,140 @@
+@use "config" as *;
+@use "tables";
+
+.wy-files-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 $primary;
+    font-weight: $font-weight-bold;
+    z-index: 10000;
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+}
+
+.wy-upload-progress{  
+  display: flex;
+  
+
+  progress{    
+    visibility: hidden;
+    flex: 1;
+    border-radius: 0;    
+    height: 0.5rem;
+    position: fixed;
+    width: 100%;
+
+    &::-webkit-progress-value{
+      background-color: $primary;
+    }
+  }
+}
+
+.wy-file-upload-errors{
+  display:flex;
+  flex-direction: column;
+
+  .wy-upload-error-row{
+    display:flex;
+    margin-bottom: 0.5rem;
+    align-items: center;
+    column-gap: 1rem;
+
+    .wy-upload-error-row-title{
+      flex: 1;
+      overflow:hidden; 
+      white-space: nowrap;
+      text-overflow: ellipsis; 
+    }
+
+    .wy-upload-error-row-conflict{
+      color: $warning;
+    }
+
+    .wy-upload-error-row-error{
+      color: $danger;
+    }
+  }
+}
+
+.wy-table-files {
+  @extend %table, %table-hover, %table-icons;
+
+  thead {
+    display: none;
+  }
+
+  tr[data-preview-url-param] {
+    cursor: pointer;
+  }
+
+  td {
+    vertical-align: middle;
+  }
+
+  td:nth-child(2) {
+    // make room for rename form
+    padding: 0 $table-cell-padding-x;
+  }
+
+  // filename
+  td:nth-child(2),
+  th:nth-child(2) {
+    width: 100%;
+    @include text-truncate();
+  }
+
+  // modified
+  td:nth-child(3),
+  th:nth-child(3) {
+    display: none;
+    width: 7rem;
+    @include text-truncate();
+  }
+
+  // kind
+  td:nth-child(4),
+  th:nth-child(4) {
+    display: none;
+    width: 7.5rem;
+    text-align: right;
+    @include text-truncate();
+  }
+
+  // size
+  td:nth-child(5),
+  th:nth-child(5) {
+    display: none;
+    width: 7rem;
+    text-align: right;
+    @include text-truncate();
+  }
+
+  @include media-breakpoint-up(sm) {
+    thead {
+      display: revert;
+    }
+
+    td:nth-child(5),
+    th:nth-child(5) {
+      display: table-cell;
+    }
+  }
+
+  @include media-breakpoint-up(md) {
+
+    td:nth-child(3),
+    th:nth-child(3),
+    td:nth-child(4),
+    th:nth-child(4) {
+      display: table-cell;
+    }
+  }
+}

package/src/scss/theme/_icons.scss

@@ -0,0 +1,62 @@
+@use "variables" as *;
+
+.wy-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  position: relative;
+
+  &:not([width]) {
+    width: 1.5rem;
+  }
+
+  &:not([height]) {
+    height: 1.5rem;
+  }
+}
+
+.wy-icon-overlay {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  background: var(--#{$prefix}white);
+  border-radius: 50%;
+  border: 1px solid var(--#{$prefix}white);
+}
+
+// stacked icons (icon+overlay icon)
+.wy-icon-stack {
+  display: inline-block;
+  position: relative;
+  line-height: 1;
+  width: 1.5rem;
+  height: 1.5rem;
+
+  .wy-icon:first-child {
+    width: 100%;
+    height: 100%;
+  }
+
+  .wy-icon:last-child {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 50%;
+    height: 50%;
+    background-color: var(--#{$prefix}body-bg);
+    border-radius: 50%;
+  }
+}
+
+// icons normally inherit the text color of its parent
+.wy-icon:not([class*="wy-icon-"]) * {
+  fill: currentColor;
+}
+
+// colored icons
+@each $color, $value in $theme-colors {
+  .wy-icon-#{$color} * {
+    fill: var(--#{$prefix}#{$color});
+  }
+}

package/src/scss/theme/_image-grid.scss

@@ -0,0 +1,63 @@
+@use "variables";
+
+$body-bg: variables.$body-bg !default;
+$border-radius: variables.$border-radius !default;
+$border-width: variables.$border-width !default;
+
+// images in posts, messages and comments
+.wy-image-grid {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  position: relative;
+  border-radius: $border-radius;
+  overflow: hidden;
+  //background-color: $body-bg;
+  column-gap: $border-width;
+  row-gap: $border-width;
+
+  .wy-image {
+    padding: 0;
+    width: 50%;
+    position: relative;
+    flex: auto;
+    background-color: inherit;
+    background-clip: content-box;
+    min-width: max(25%, 4rem);
+    min-height: 4rem;
+
+    // 1 of not 2
+    &:first-of-type:not(:nth-last-of-type(2)) {
+      flex-basis: 100% !important;
+    }
+  }
+
+  .wy-image-area {
+    display: block;
+    height: 100%;
+    cursor: pointer;
+
+    img {
+      position: absolute;
+      height: 100%;
+      width: 100%;
+      // TODO: scale down only for small images like icons (with inline style?)
+      object-fit: contain;
+    }
+  }
+
+  .wy-more {
+    position: absolute;
+    line-height: 100%;
+    color: #fff;
+    background: rgba(0,0,0,0.5);
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5rem;
+  }
+}

package/src/scss/theme/_inputs.scss

@@ -0,0 +1,28 @@
+@use "config";
+@use "bs/forms";
+
+@mixin input {
+  // @extend %form-control, %form-control-sm;
+  // background: colors.$light;
+  // border-color: transparent;
+}
+
+.wy-input {
+  @extend %form-control;
+}
+
+.wy-input-sm {
+  @extend %form-control, %form-control-sm;
+}
+
+.wy-is-invalid {
+  @extend %form-invalid;
+}
+
+.wy-description {
+  @extend %form-text
+}
+
+.wy-label {
+  @extend %form-label;
+}

package/src/scss/theme/_message-editor.scss

@@ -0,0 +1,90 @@
+@use "config" as *;
+@use "mixins/backdrop";
+@use "mixins/position";
+
+.wy-message-editor {
+  @include position.sticky-bottom;
+  @include backdrop.filter;
+
+  background-color: rgba($light, $opacity-backdrop);
+}
+
+.wy-message-form {
+  .wy-spinner {
+    display: none;
+  }
+
+  &.wy-uploading {
+    .wy-spinner {
+      display: block;
+    }
+
+    .wy-icon-attachment {
+      display: none;
+    }
+  }
+
+  .wy-picker-list:not(:empty) {
+    border-top: $border-width solid $border-color;
+  }
+}
+
+.wy-message-editor-inputs {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  border-top: $border-width solid rgba($gray-200, $opacity-backdrop);
+  padding: .5rem;
+  min-height: 3rem;
+
+  > :not(:last-child) {
+    margin-right: .5rem;
+  }
+}
+
+.wy-message-editor-buttons {
+  flex: 1 0 auto;
+}
+
+.wy-message-editor-text {
+  flex: 1 1 100%;
+  display: flex;
+  flex-direction: column;
+}
+%message-editor-textfield,
+.wy-message-editor-textfield {
+  flex: 1 1 100%;
+  outline: $light solid 1px;
+  max-height: 10.2rem;
+  background-color: $input-bg;
+  border-radius: $border-radius-xl;
+  border: none;
+}
+
+%message-editor-textcontent,
+.wy-message-editor-textcontent {
+  font-family: $font-family-base;
+  font-size: $font-size-base;
+  padding: $input-padding-y $input-padding-x;
+}
+
+%message-editor-grow,
+.#{wy}-message-editor-grow {
+    display: grid;
+
+    &::after, > textarea {
+        @extend %message-editor-textfield;
+        grid-area: 1 / 1 / 2 / 2;
+    }
+
+    &::after {
+        content: attr(data-replicated-value) " ";
+        white-space: pre-wrap;
+        visibility: hidden;
+    }
+
+    > textarea {
+        resize: none;
+        overflow: hidden;
+    }
+}