elbe-ui 0.2.23 → 0.2.30

package/style/components.scss

@@ -1,476 +0,0 @@
-// =============== MARKUP ===============
-
-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;}
-
-// =============== SPACING ===============
-
-.padded {padding: 1rem;}
-.padding-none {padding: 0rem;}
-
-.margined {margin: 1rem;}
-.margined-none {margin: 0rem;}
-
-// =============== FLEX-Layouts ===============
-
-.flex {
-  display: flex;
-  flex-direction: column;
-}
-
-@for $i from 1 through 12 {
-  .flex-#{$i} {
-    @extend .flex;
-    flex: $i;
-  }
-}
-
-.centered {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.column {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1rem;
-}
-
-.row {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 1rem;
-
-  &.wrap {flex-wrap: wrap;}
-}
-
-.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;}
-  }
-}
-
-.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;}
-}
-
-// =============== conditionals ===============
-
-.if-wide {
-  @media (max-width: 700px) {
-    & {display: none;}
-  }
-}
-
-.if-narrow {
-  @media (min-width: 700px) {
-    & {display: none;}
-  }
-}
-
-// =============== element style ===============
-
-.sharp {border-radius: 0;}
-.rounded {border-radius: $g-radius;}
-.round {border-radius: 50%;}
-
-img.round,
-img.rounded {object-fit: cover;}
-
-.borderless {border: none;}
-.raised {box-shadow: 0 0.1rem 1rem #00000033;}
-
-.scrollbars-none {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  &::-webkit-scrollbar {display: none;}
-}
-
-.pointer {cursor: pointer;}
-
-.text-centered {text-align: center;}
-.text-start {text-align: start;}
-.text-end {text-align: end;}
-
-body:has(dialog[open=""]) {overflow: hidden;}
-
-
-// =============== animations ===============
-
-.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);}
-}
-
-// =============== COMPONENTS ===============
-
-.box {
-  @extend .padded;
-  @extend .text-m;
-  @extend .primary;
-
-  &.primary {@extend .primary;}
-  &.secondary {@extend .secondary;}
-  &.inverse {@extend .inverse;}
-}
-
-.card {
-  @extend .box;
-  border-width: 2px;
-  border-style: solid;
-  border-radius: $g-radius;
-  //overflow: hidden;
-}
-
-
-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;
-    }
-  }
-}
-
-.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%);
-}
-
-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%;
-}
-
-
-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;
-    }
-  }
-}
-
-.expandable {
-  max-height: 0px;
-  transition: max-height 0.25s ease-out;
-  overflow: hidden;
-}
-
-.expandable:has(*) {
-  max-height: 500px;
-  transition: max-height 0.25s ease-in;
-}
-
-.header {
-	@extend .box;
-	@extend .row;
-	width: 100%;
-	position: fixed;
-	left: 0;
-	top: 0;
-	display: flex;
-	font-size: larger;
-	font-weight: 900;
-	border-width: 20px;
-	border-style: solid;
-	border-width: 0 0 2px 0;
-	//border-width: 0 0 2px 0;
-
-	background-color: #ffffff70;
-	backdrop-filter: blur(10px);
-	-webkit-backdrop-filter: blur(10px);
-	z-index: 20;
-	// place border inside the element:
-	box-sizing: border-box;
-	height: 4.5rem;
-	justify-content: space-between;
-	align-items: center;
-  }
-
-// =============== INPUTS ===============
-
-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%;
-}
-
-input[type="range"] {
-  -webkit-appearance: none;
-  appearance: none;
-  background: transparent;
-  cursor: pointer;
-  width: 15rem;
-
-  &::-moz-range-track{
-    background-color: #707070;
-    border-radius: 100px;
-    border: none;
-    height: 0.5rem;
-  }
-
-  &::-webkit-slider-runnable-track
-  {
-    @extend .secondary;
-    border-radius: 100px;
-    border: none;
-    height: 0.5rem;
-  }
-
-  &::-webkit-slider-thumb
-  {
-    @extend .accent;
-    border: none;
-    -webkit-appearance: none; // Override default look
-    appearance: none;
-    margin-top: -6px;
-    border-radius: 100px;
-    height: 1.2rem;
-    width: 1.2rem;
-  }
-}
-
-
-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;
-}
-
-// =============== TOOLTIP ===============
-
-
-[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;
-}
-
-// =============== LAYOUT ===============
-
-
-.base-limited {
-  @extend .box;
-  max-width: 700px;
-  width: 100%;
-  margin: 0 auto;
-}

package/style/root.scss

@@ -1,50 +0,0 @@
-:root {
-  /*font-family: "apple color emoji", "segoe ui emoji", "noto color emoji",
-    "android emoji", "emojisymbols", "emojione mozilla", "twemoji mozilla",
-    "segoe ui symbol", $t-font-body;*/
-  font-family: $t-font-body, "Noto Color Emoji";
-  line-height: 1.3;
-
-  color: #222;
-  background-color: #ffffff;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-  box-sizing: border-box;
-  font-size: 16px;
-  border-collapse: separate;
-}
-
-@media (orientation: portrait) {
-  :root {
-    font-size: 13px;
-  }
-}
-
-*,
-*:before,
-*:after {
-  box-sizing: inherit;
-  font-family: inherit;
-  font-weight: inherit;
-}
-
-body,
-#app,
-.elbe-base {
-  margin: 0;
-  display: block;
-  min-height: 100vh;
-  background-color: white;
-}
-
-body:has(.no-page-scroll) {
-  overflow: hidden;
-}
-
-.debug {
-  display: none;
-}

package/style/type_style.scss

@@ -1,22 +0,0 @@
-@each $style, $size in $t-styles {
-  .text-#{$style} {
-    font-size: $size;
-  }
-}
-
-@each $name, $size in $t-headers {
-  .header-#{$name} {
-    @extend .b;
-    line-height: 1;
-    font-size: $size;
-    font-family: $t-font-accent;
-  }
-
-  h#{$name} {
-    @extend .header-#{$name};
-  }
-}
-
-.text-accent {
-  font-family: $t-font-accent;
-}