elbe-ui 0.2.5 → 0.2.11

package/style/color_style.scss

@@ -0,0 +1,148 @@
+@function contrast($colorA, $colorB) {
+  $yiqA: calc(
+    ((red($colorA) * 299) + (green($colorA) * 587) + (blue($colorA) * 114)) /
+      1000
+  );
+  $yiqB: calc(
+    ((red($colorB) * 299) + (green($colorB) * 587) + (blue($colorB) * 114)) /
+      1000
+  );
+  @return abs($yiqA - $yiqB);
+}
+
+@function mg($map, $value) {
+  @return map-get($map, $value);
+}
+
+@function ifn($a, $b) {
+  @return if($a ==null, $b, $a);
+}
+
+@function inter($colorA, $colorB: #888888, $weight: 50%) {
+  @return mix($colorA, $colorB, $weight);
+}
+
+@mixin colored($back, $front, $border) {
+  color: $front;
+  background-color: $back;
+  border-color: $border;
+}
+
+@mixin blinking($length: 1s) {
+  animation: blinker $length linear infinite;
+}
+
+@keyframes blinker {
+  50% {
+    opacity: 0;
+  }
+}
+
+// SHOW WHEN THE STYLES ARE NOT BEING USED WITHIN A MODE
+@each $style, $s_colors in $c-styles {
+  .#{$style} {
+    @include blinking();
+    @include colored(rgb(255, 55, 0), white, transparent);
+  }
+}
+
+//COLORS
+
+@each $mode, $m_colors in $c-modes {
+  .#{$mode} {
+    $mode_back: mg($m_colors, back);
+    $mode_front: mg($m_colors, front);
+    $mode_border: mg($m_colors, border);
+    @include colored($mode_back, $mode_front, $mode_border);
+
+    .plain {
+      @include colored(transparent, $mode_front, $mode_border);
+    }
+
+    .plain-opaque {
+      @include colored($mode_back, $mode_front, $mode_border);
+    }
+
+    & {
+      --c-mode: #{$mode};
+    }
+
+    @each $style, $s_colors in $c-styles {
+      $back: mg($s_colors, back);
+      $border: ifn(mg($s_colors, border), $back);
+
+      $effectiveBack: ifn(
+        if(mg($s_colors, back) == transparent, $mode_back, mg($s_colors, back)),
+        $mode_back
+      );
+      $front: ifn(
+        mg($s_colors, front),
+        if(contrast($mode_front, $effectiveBack) > 128, $mode_front, $mode_back)
+      );
+
+      & {
+        --c-#{$style}: #{$back};
+      }
+
+      .#{$style} {
+        animation: none;
+
+        @include colored($back, $front, $border);
+
+        &.minor {
+          $mback: inter(mg($s_colors, back), mg($m_colors, back), 25%);
+          $mfront: mg($s_colors, back);
+          $mborder: ifn(mg($s_colors, border), $mfront);
+
+          @include colored($mback, $mfront, $mborder);
+
+          &.hovered {
+            $hback: inter($mback, $mfront, 90%);
+            @include colored($hback, $mfront, $mborder);
+          }
+
+          &.pressed {
+            $pback: inter($mback, $mfront, 75%);
+            @include colored($pback, $mfront, $mborder);
+          }
+
+          &.disabled {
+            $disback: grayscale($mback);
+            $disfront: grayscale($mfront);
+            $disborder: if($mborder ==null, null, grayscale($mborder));
+
+            @include colored($disback, $disfront, $disborder);
+          }
+        }
+
+        &.hovered {
+          $hback: inter($back, $front, 95%);
+          $hborder: if(
+            $border ==transparent,
+            transparent,
+            inter($border, $front, 95%)
+          );
+          @include colored($hback, $front, $hborder);
+        }
+
+        &.pressed {
+          $pback: inter($back, $front, 85%);
+          $pborder: if(
+            $border ==transparent,
+            transparent,
+            inter($border, $front, 85%)
+          );
+          @include colored($pback, $front, $pborder);
+        }
+
+        &.disabled {
+          @include colored(
+            grayscale($back),
+            grayscale($front),
+            grayscale($back)
+          );
+        }
+      }
+    }
+  }
+}

package/style/components.scss

@@ -0,0 +1,574 @@
+#hide-site {
+  position: fixed;
+  left: 0px;
+  right: 0px;
+  top: 0px;
+  bottom: 0px;
+  background-color: white;
+  z-index: 99; /* Higher than anything else in the document */
+}
+
+.margin-none {
+  margin: 0;
+}
+
+.padded {
+  padding: 1rem;
+}
+
+.padding-none {
+  padding: 0rem;
+}
+
+.padded_v {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.padded_h {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.margined {
+  margin: 1rem;
+}
+
+.margined_v {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.margined_h {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
+.box {
+  @extend .padded;
+
+  @extend .text-m;
+
+  @extend .primary;
+
+  &.primary {
+    @extend .primary;
+  }
+
+  &.secondary {
+    @extend .secondary;
+  }
+
+  &.inverse {
+    @extend .inverse;
+  }
+}
+
+.flex {
+  display: flex;
+  flex-direction: column;
+}
+
+.card {
+  @extend .box;
+  border-width: 2px;
+  border-style: solid;
+  border-radius: $g-radius;
+  //overflow: hidden;
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 1rem;
+
+  &.wrap {
+    flex-wrap: wrap;
+  }
+}
+
+.if-wide {
+  @media (max-width: 700px) {
+    & {
+      display: none;
+    }
+  }
+}
+
+.if-narrow {
+  @media (min-width: 700px) {
+    & {
+      display: none;
+    }
+  }
+}
+
+.row-resp,
+.row-resp-rev {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: start;
+  gap: 1rem;
+
+  @media (max-width: 700px) {
+    & {
+      flex-direction: column;
+      justify-content: start;
+      align-items: stretch;
+    }
+
+    &.row-resp-rev {
+      flex-direction: column-reverse;
+    }
+  }
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+
+// ================ GAP ================
+
+.gap-none {
+  gap: 0;
+}
+
+.gap-quarter {
+  gap: 0.25rem;
+}
+
+.gap-half {
+  gap: 0.5rem;
+}
+
+.gap {
+  gap: 1rem;
+}
+
+@for $i from 0 through 6 {
+  .gap-#{$i} {
+    gap: #{$i}rem;
+  }
+}
+
+$cross_modes: (stretch, start, end, center);
+
+@each $name in $cross_modes {
+  .cross-#{$name} {
+    align-items: $name;
+  }
+}
+
+$main_modes: (stretch, start, end, center, space-between);
+
+@each $name in $main_modes {
+  .main-#{$name} {
+    justify-content: $name;
+  }
+}
+
+.column.cross-stretch-fill {
+  align-items: stretch;
+  width: 100%;
+}
+
+@for $i from 1 through 12 {
+  .flex-#{$i} {
+    @extend .flex;
+    flex: $i;
+  }
+}
+
+.i {
+  font-style: italic;
+}
+b,
+.b {
+  font-weight: bold;
+}
+
+.u {
+  text-decoration: underline;
+}
+
+.ni {
+  font-style: normal;
+}
+
+.nb {
+  font-weight: normal;
+}
+
+.nu {
+  text-decoration: none;
+}
+
+.striked {
+  text-decoration: line-through;
+}
+
+.code {
+  font-family: monospace;
+}
+
+.header {
+  @extend .box;
+  @extend .row;
+  width: 100%;
+  position: fixed;
+  left: 0;
+  top: 0;
+  display: flex;
+  border-width: 20px;
+  border-style: solid;
+  border-width: 0 0 2px 0;
+  //border-width: 0 0 2px 0;
+  background-color: transparent;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  z-index: 20;
+  // place border inside the element:
+  box-sizing: border-box;
+  height: 4rem;
+}
+
+.centered {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sharp {
+  border-radius: 0;
+}
+
+.rounded {
+  border-radius: $g-radius;
+}
+
+.round {
+  border-radius: 50%;
+}
+
+img.round,
+img.rounded {
+  object-fit: cover;
+}
+
+.base-limited {
+  @extend .box;
+  max-width: 700px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+.scrollbars-none {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+button {
+  @extend .card;
+  @extend .accent;
+  @extend .row;
+  @extend .text-m;
+  @extend .b;
+  justify-content: center;
+  padding: 0.25rem 0.75rem;
+  gap: 0.5rem;
+  min-height: 3rem;
+  cursor: pointer;
+
+  &:hover:not(&:disabled, .disabled) {
+    @extend .hovered;
+  }
+
+  &:active:not(&:disabled, .disabled) {
+    @extend .pressed;
+  }
+
+  &:disabled,
+  &.disabled {
+    @extend .disabled;
+    cursor: not-allowed;
+
+    &.action {
+      opacity: 0.7;
+      filter: grayscale(1);
+    }
+  }
+
+  & > .lucide {
+    & + div {
+      text-align: center;
+      flex: 1;
+      text-align: center;
+    }
+  }
+
+  &.text-left {
+    text-align: left;
+    div {
+      margin-left: 0.25rem;
+      text-align: left;
+    }
+  }
+}
+
+input[type="text"],
+input[type="number"],
+input[type="password"],
+input[type="email"],
+input[type="date"],
+input[type="time"] {
+  @extend .card;
+  padding: 0 0.75rem;
+  height: 3rem;
+  min-width: 12rem;
+  width: 100%;
+}
+
+select {
+  @extend .card;
+  padding: 0 0.75rem;
+  height: 3rem;
+  min-width: 12rem;
+  width: 100%;
+}
+
+textarea {
+  @extend .card;
+  height: 6rem;
+  padding: 0.6rem 0.75rem;
+  resize: vertical;
+  min-height: 3rem;
+  min-width: 12rem;
+  width: 100%;
+}
+
+.text-centered {
+  text-align: center;
+}
+
+.text-left {
+  text-align: left;
+}
+
+body:has(dialog[open=""]) {
+  overflow: hidden;
+}
+
+dialog {
+  @extend .column;
+  @extend .cross-center;
+  @extend .main-center;
+
+  z-index: 100;
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+
+  border: none;
+
+  pointer-events: none;
+
+  background-color: transparent;
+
+  transition: background-color 0.3s ease-in-out;
+  transition: backdrop-filter 0.3s ease-in-out;
+
+  & > * {
+    display: none;
+  }
+
+  &[open=""] {
+    background-color: rgba(0, 0, 0, 0.2);
+    backdrop-filter: blur(5px);
+    pointer-events: all;
+    & > * {
+      display: unset;
+    }
+  }
+}
+
+.raised {
+  box-shadow: 0 0.1rem 1rem #00000033;
+}
+
+.icon {
+  aspect-ratio: 1;
+  border-radius: 25%;
+  object-fit: cover;
+}
+
+.toast {
+  @extend .card;
+  @extend .inverse;
+  @extend .b;
+  @extend .raised;
+  position: fixed;
+  bottom: 1rem;
+  right: 1rem;
+  z-index: 200;
+  left: 50%;
+  width: min(40rem, 90%);
+  transform: translateX(-50%);
+}
+
+.borderless {
+  border: none;
+}
+
+input[type="range"] {
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+  cursor: pointer;
+  width: 15rem;
+
+  &::-webkit-slider-runnable-track,
+  &::-moz-range-track {
+    @extend .secondary;
+    border-radius: 100px;
+    border: none;
+    height: 0.5rem;
+  }
+
+  &::-webkit-slider-thumb,
+  &::-moz-range-thumb {
+    @extend .accent;
+    border: none;
+    -webkit-appearance: none; /* Override default look */
+    appearance: none;
+    margin-top: -12px;
+    border-radius: 100px;
+    height: 1.2rem;
+    width: 1.2rem;
+  }
+}
+
+// ============ CHECKBOXES ============
+
+input[type="checkbox"] {
+  -webkit-appearance: none;
+  appearance: none;
+  margin: 0;
+
+  font: inherit;
+  color: black;
+  //margin: 0.6rem 0.6rem;
+  width: 1.8rem;
+  height: 1.8rem;
+  border: 0.16em solid black;
+  border-radius: 25%;
+  transform: translateY(-0.075em);
+
+  display: grid;
+  place-content: center;
+  outline: none;
+}
+
+input[type="checkbox"]::before {
+  content: "";
+  width: 0.95rem;
+  height: 0.75rem;
+  clip-path: polygon(10% 41%, 37% 75%, 91% 0, 100% 13%, 38% 100%, 0 55%);
+  // check tick clip path outlined:
+  transform: scale(0);
+  transform-origin: center;
+  transition: 0.2s transform ease-in-out;
+  background-color: black;
+  //box-shadow: inset 1em 1em green;
+}
+
+input[type="checkbox"]:checked {
+  @extend .loud;
+  @extend .minor;
+  border-color: $c-accent !important;
+  &::before {
+    transform: scale(1);
+    background-color: $c-accent;
+  }
+}
+
+input[type="checkbox"]:focus {
+  outline: max(2px, 0.15em) solid blue;
+  outline-offset: 0;
+}
+
+input[type="checkbox"]:disabled {
+  //--form-control-color: var(--form-control-disabled);
+
+  color: gray;
+  cursor: not-allowed;
+}
+
+.code {
+  @extend .card;
+  @extend .secondary;
+  padding: 0.4rem 0.5rem;
+  font-family: monospace;
+  white-space: pre-wrap;
+}
+
+.rotate-box {
+  @extend .rotate;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.rotate {
+  animation: rotation 1.5s infinite linear;
+}
+
+@keyframes rotation {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(359deg);
+  }
+}
+
+[data-tooltip]:hover:after {
+  opacity: 1;
+  transition: all 0.1s ease 0.8s;
+  visibility: visible;
+}
+
+[data-tooltip]:after {
+  @extend .inverse;
+  content: attr(data-tooltip);
+  position: absolute;
+  bottom: -1.6em;
+  left: 50%;
+  transform: translateX(-50%);
+  white-space: nowrap;
+  box-shadow: 0 0.125rem 0.5rem 0.2rem #00000022;
+  padding: 0.25em 0.5em;
+  border-radius: 0.25em;
+  opacity: 0;
+  z-index: 999;
+  visibility: hidden;
+  pointer-events: none;
+}
+[data-tooltip] {
+  position: relative;
+}