@weavy/uikit-react 11.2.0 → 12.1.0

package/src/scss/theme/_attachments.scss

@@ -0,0 +1,74 @@
+@use "config" as *;
+@use "bs/list-group";
+
+
+.wy-attachments,
+.wy-meetings {
+  border: none;
+  border-radius: $border-radius-sm;
+  flex: 1 1 100%;
+  min-width: 0;
+
+  .wy-attachment,
+  .wy-meeting {
+    border-left: none;
+    border-right: none;
+  }
+
+  > * {
+    padding: .25rem .5rem;
+  }
+
+  > :first-child {
+    border-top: none;
+  }
+
+  > :last-child {
+    //border-top: variables.$border-width solid variables.$border-color;
+    border-bottom: none;
+  }
+}
+
+.wy-attachment,
+.wy-meeting {
+  @extend 
+  %list-group-item, 
+  %list-group-item-action;
+
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.wy-attachment-icon {
+  flex: 0 0 auto;
+  display: flex;
+
+  .wy-icon, .wy-icon-stack {
+    width: 3rem;
+    height: 3rem;
+  }
+}
+
+.wy-attachment-content {
+  flex: 1 1 100%;
+  min-width: 0;
+  margin-left: .5rem;
+  margin-right: .5rem;
+}
+
+.wy-attachment-title {
+  font-family: $headings-font-family;
+  font-style: $headings-font-style;
+  font-weight: $headings-font-weight;
+  color: $headings-color;
+  @include text-truncate();
+  @include font-size($h6-font-size);
+  margin: 0;
+}
+
+.wy-attachment-meta {
+  @include text-truncate();
+  @include font-size($small-font-size);
+  color: $text-muted;
+}

package/src/scss/theme/_avatar.scss

@@ -0,0 +1,54 @@
+@use "config" as *;
+@use "bs/forms";
+
+.wy-avatar {
+  border-radius: 50%;
+}
+
+.wy-avatar-header {
+  padding: 1.5rem;
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+}
+
+.wy-avatar-input {
+  @extend %form-control, %form-control-sm;
+  background: $light;
+  border-color: transparent;
+  text-align: center;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 1.5rem;
+}
+
+.wy-avatar-presence {
+  position: relative;
+}
+
+.wy-avatar-display-name {
+  font-size: $h4-font-size;
+  font-weight: $display-font-weight;
+  line-height: $display-line-height;
+  text-align: center;
+}
+
+
+// presence indicator
+.wy-presence {
+  display: none; // initially hidden
+  background-color: $gray-100;
+  width: .75rem;
+  height: .75rem;
+  border-radius: 50%;
+  outline: .125rem solid $white;
+  position: absolute;
+  bottom: 0;
+  right: -5%;
+}
+
+// online
+.wy-presence-active {
+  background-color: $green-400;
+  display: block;
+}

package/src/scss/theme/_badge.scss

@@ -0,0 +1,47 @@
+@use "config" as *;
+@use "bs/badge";
+
+
+.wy-badge {
+  @extend %badge;
+  border-radius: 50rem;
+  background-color: $primary;
+}
+
+.wy-badge-success {
+  background-color: $success;
+}
+
+.wy-badge-warning {
+  background-color: $warning;
+}
+
+.wy-badge-danger {
+  background-color: $danger;
+}
+
+.wy-button {
+  position: relative; // so that we can position .badge
+
+  // badge, e.g. notification count
+  .wy-badge {
+    font-size: $font-size-xs;
+    position: absolute;
+    right: 0;
+    top: 0;
+    border-radius: 1rem;
+    margin: 0;
+    padding: .25rem;
+    min-width: 1rem;
+    max-width: 2rem;
+    height: 1rem;
+    line-height: .5rem;
+    display: block;
+    text-align: center;
+    @include text-truncate();
+
+    &:empty {
+      display: none;
+    }
+  }
+}

package/src/scss/theme/_buttons.scss

@@ -0,0 +1,96 @@
+@use "config" as *;
+@use "bs/buttons";
+
+// basic unstyled button with support for icon and text
+.wy-button {
+  @extend %btn;
+  
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: .25rem;
+
+  // align icons
+  &:not(.wy-button-icon) {
+    .wy-icon {
+      &:first-child {
+        margin-left: -.25rem;
+      }
+
+      &:last-child {
+        margin-right: -.25rem;
+      }
+    }
+  }
+ 
+}
+
+// default button
+.wy-button:not(.wy-button-link, .wy-button-primary) {
+    --#{$prefix}btn-hover-border-color: transparent;
+    --#{$prefix}btn-active-border-color: transparent;
+    --#{$prefix}btn-hover-color: var(--#{$prefix}btn-color);
+    --#{$prefix}btn-hover-bg: #{$btn-hover-bg};
+    --#{$prefix}btn-focus-bg: #{$btn-hover-bg};
+    --#{$prefix}btn-active-color: var(--#{$prefix}btn-color);
+    --#{$prefix}btn-active-bg: #{$btn-active-bg};
+
+     // dark mode
+    .wy-dark & {
+      color: var(--#{$prefix}white);
+    }
+}
+
+// button with only icon (no text)
+.wy-button-icon {  
+  width: 2rem;
+  height: 2rem;
+  padding: .25rem;
+  line-height: 1;
+  border-radius: 50%;
+  border-width: 0;
+}
+
+// default icon button
+.wy-button-icon:not(.wy-button-primary) {
+  color: $icon-color;
+
+  &:hover {
+    .wy-icon {
+      color: $icon-hover-color;
+    }
+  }
+  
+  // dark mode
+  .wy-dark & {
+    color: $icon-light-color;
+    .wy-icon {
+      color: $icon-light-color;
+    }
+
+    &:hover {
+      color: $icon-light-hover-color;
+      .wy-icon {
+        color: $icon-light-hover-color;
+      }
+    }
+  }
+}
+
+// primary button
+.wy-button-primary {
+    @extend %btn-primary;
+}
+
+// button that looks and behaves like a link
+.wy-button-link {
+  @extend %btn-link;
+}
+
+// container for proper spacing and alignment of buttons
+.wy-buttons {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: .5rem;
+}

package/src/scss/theme/_card.scss

@@ -0,0 +1,7 @@
+.wy-card-header {
+  border-bottom: none;
+}
+
+.wy-card-footer {
+  border-top: none;
+}

package/src/scss/theme/_checkbox.scss

@@ -0,0 +1,56 @@
+@use "config" as *;
+
+// Include mixin in the relative class that should be suffixed with -check
+@mixin button-check {
+
+  // From bootstrap/scss/forms/_form_check
+  &-check {
+    position: absolute;
+    clip: rect(0, 0, 0, 0);
+    pointer-events: none;
+  
+    &[disabled] + &,
+    &:disabled + & {
+      pointer-events: none;
+      filter: none;
+      opacity: $form-check-btn-check-disabled-opacity;
+    }
+  }
+
+  // From bootstrap/scss/_buttons
+  &-check:focus + &,
+  &:focus {
+    outline: 0;
+    box-shadow: $btn-focus-box-shadow;
+  }
+  &-check:checked + &,
+  &-check:active + & {
+    @include box-shadow($btn-active-box-shadow);
+  
+    &:focus {
+      @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
+    }
+  }
+
+  // Custom icons
+  &-check + .#{wy}-button-icon {
+    svg:last-child {
+      display: none;
+    }
+  }
+
+  &-check:checked + .#{wy}-button-icon {
+    svg:first-child {
+      display: none;
+    }
+  
+    svg:last-child {
+      display: inline-block;
+    }
+  }
+}
+
+// Create a suffixed subclass from .wy-button -> .wy-button-check
+.wy-button {
+  @include button-check;
+}

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

@@ -0,0 +1,42 @@
+@use "config" as *;
+@use "mixins/scrollbar";
+@use "message-editor";
+
+.ͼ1 .cm-scroller {
+    font-family: unset;
+    line-height: 1.25;
+}
+
+.ͼ1 .cm-widgetBuffer {
+  vertical-align: unset;
+}
+
+.cm-editor {
+  @extend %message-editor-textfield;
+
+  &.cm-focused {
+    /* default theme in codemirror seems difficult to override */
+    outline: $light solid 1px !important;
+  }
+
+  .cm-content {
+    @extend %message-editor-textcontent;
+  }
+
+  .cm-scroller {
+    overflow: auto;
+
+    .wy-scrollbars & {
+      @include scrollbar.custom-scrollbar;
+    }
+  }
+}
+
+textarea.is-invalid + [data-editor-target] .cm-editor {
+  padding-right: $input-height-inner;
+  background-image: escape-svg($form-feedback-icon-invalid);
+  background-repeat: no-repeat;
+  background-position: right $input-height-inner-quarter top $input-height-inner-quarter;
+  background-size: $input-height-inner-half $input-height-inner-half;
+  outline-color: $form-feedback-invalid-color !important;
+}

package/src/scss/theme/_code.scss

@@ -0,0 +1,115 @@
+@use "config" as *;
+
+// custom theme for syntax highlighting with Prism
+code[class*="language-"], pre[class*="language-"] {
+  color: $pre-color;
+  font-family: $font-family-code;
+  font-size: 1em;
+  direction: ltr;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  line-height: $line-height-base;
+  tab-size: 4;
+  hyphens: none;
+} 
+
+pre[class*="language-"] {
+  background: $white;
+  font-size: $code-font-size;
+  padding: 1rem;
+  margin: 0.5rem 0;
+  overflow: auto;
+}
+
+// token colors from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-vs.css
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #008000;
+  font-style: italic;
+}
+
+.token.namespace {
+  opacity: .7;
+}
+
+.token.string {
+  color: #A31515;
+}
+
+.token.punctuation,
+.token.operator {
+  color: $pre-color;
+}
+
+.token.url,
+.token.symbol,
+.token.number,
+.token.boolean,
+.token.variable,
+.token.constant,
+.token.inserted {
+  color: #36acaa;
+}
+
+.token.atrule,
+.token.keyword,
+.token.attr-value,
+.language-autohotkey .token.selector,
+.language-json .token.boolean,
+.language-json .token.number,
+code[class*="language-css"] {
+  color: #0000ff;
+}
+
+.token.function {
+  color: $pre-color;
+}
+
+.token.deleted,
+.language-autohotkey .token.tag {
+  color: #9a050f;
+}
+
+.token.selector,
+.language-autohotkey .token.keyword {
+  color: #00009f;
+}
+
+.token.important {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: $font-weight-bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.class-name,
+.language-json .token.property {
+  color: #2B91AF;
+}
+
+.token.tag,
+.token.selector {
+  color: #800000;
+}
+
+.token.attr-name,
+.token.property,
+.token.regex,
+.token.entity {
+  color: #ff0000;
+}
+
+.token.directive.tag .tag {
+  background: #ffff00;
+  color: $pre-color;
+}