elbe-ui 0.2.23 → 0.2.30

package/dist/elbe.css

@@ -0,0 +1,621 @@
+/* BUILD CSS BY:
+- npm install -g sass
+- sass style/elbe.scss dist/elbe.css
+*/
+@import url("https://fonts.googleapis.com/css2?display=swap&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Calistoga&family=Noto+Color+Emoji");
+/* ========= SPACING ========= */
+.padded,
+.card,
+button,
+.toast,
+select,
+input[type=text],
+input[type=number],
+input[type=password],
+input[type=email],
+input[type=date],
+input[type=time],
+textarea {
+  padding: var(--g-padding);
+}
+
+.padding-none {
+  padding: 0rem;
+}
+
+.margined {
+  margin: var(--g-padding);
+}
+
+.margined-none {
+  margin: 0rem;
+}
+
+/* ========= ELEMENT_STYLE ========= */
+.sharp {
+  border-radius: 0;
+}
+
+.rounded,
+.card,
+button,
+.toast,
+select,
+input[type=text],
+input[type=number],
+input[type=password],
+input[type=email],
+input[type=date],
+input[type=time],
+textarea {
+  border-radius: var(--g-radius);
+  border-color: inherit;
+  overflow: hidden;
+}
+
+.round {
+  border-radius: 50%;
+}
+
+img.round,
+img.rounded {
+  object-fit: cover;
+}
+
+.borderless {
+  border: none;
+}
+
+.raised, .toast {
+  box-shadow: 0 0.1rem 1rem rgba(0, 0, 0, 0.2);
+}
+
+.scrollbars-none {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.scrollbars-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;
+}
+
+.transparent {
+  background-color: transparent;
+}
+
+.disabled {
+  cursor: not-allowed;
+}
+
+/* ========= CARD ========= */
+.box, .header, .base-limited,
+.card,
+button,
+.toast,
+select,
+input[type=text],
+input[type=number],
+input[type=password],
+input[type=email],
+input[type=date],
+input[type=time],
+textarea {
+  border-style: solid;
+  border-width: var(--g-border-width);
+}
+
+/* ========= UTIL ========= */
+.action {
+  cursor: pointer;
+}
+
+.base-limited {
+  max-width: 700px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+/* ========= MARKUP ========= */
+i,
+.i {
+  font-style: italic;
+}
+
+b,
+.b,
+button,
+.toast {
+  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;
+  white-space: pre-wrap;
+}
+
+/* ========= ANIMATIONS ========= */
+.rotate {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: rotation 1.5s infinite linear;
+}
+
+@keyframes rotation {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+}
+.column, dialog,
+.row,
+button,
+.header,
+.row-resp {
+  display: flex;
+  justify-content: start;
+  align-items: stretch;
+  gap: 1rem;
+}
+
+.column, dialog {
+  flex-direction: column;
+}
+
+.row, button, .header {
+  flex-direction: row;
+  align-items: center;
+}
+
+.centered {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* ========== GAP =========== */
+.gap-none {
+  gap: 0;
+}
+
+.gap-quarter {
+  gap: 0.25rem;
+}
+
+.gap-half {
+  gap: 0.5rem;
+}
+
+.gap-one {
+  gap: 1rem;
+}
+
+.gap-double {
+  gap: 2rem;
+}
+
+.gap-triple {
+  gap: 3rem;
+}
+
+/* ========== EXPAND =========== */
+.flex-none {
+  flex: 0 0 auto;
+}
+
+.flex-1 {
+  flex: 1 1 0%;
+}
+
+.flex-2 {
+  flex: 2 2 0%;
+}
+
+.flex-3 {
+  flex: 3 3 0%;
+}
+
+.flex-4 {
+  flex: 4 4 0%;
+}
+
+.flex-5 {
+  flex: 5 5 0%;
+}
+
+.flex-6 {
+  flex: 6 6 0%;
+}
+
+.flex-7 {
+  flex: 7 7 0%;
+}
+
+.flex-8 {
+  flex: 8 8 0%;
+}
+
+.flex-9 {
+  flex: 9 9 0%;
+}
+
+.flex-10 {
+  flex: 10 10 0%;
+}
+
+.flex-11 {
+  flex: 11 11 0%;
+}
+
+.flex-12 {
+  flex: 12 12 0%;
+}
+
+/* ========== ALIGN =========== */
+.cross-start {
+  align-items: flex-start;
+}
+
+.cross-center, dialog {
+  align-items: center;
+}
+
+.cross-end {
+  align-items: flex-end;
+}
+
+.cross-stretch {
+  align-items: stretch;
+}
+
+.cross-baseline {
+  align-items: baseline;
+}
+
+/* ========== JUSTIFY =========== */
+.main-start {
+  justify-content: flex-start;
+}
+
+.main-center, dialog {
+  justify-content: center;
+}
+
+.main-end {
+  justify-content: flex-end;
+}
+
+.main-between {
+  justify-content: space-between;
+}
+
+.main-around {
+  justify-content: space-around;
+}
+
+.main-evenly {
+  justify-content: space-evenly;
+}
+
+/* ========== RESPONSIVE =========== */
+@media (max-width: 700px) {
+  .row-resp {
+    flex-direction: column;
+  }
+  .if-wide {
+    display: none;
+  }
+}
+@media (min-width: 700px) {
+  .if-narrow {
+    display: none;
+  }
+}
+.wrap {
+  flex-wrap: wrap;
+}
+
+.c_from_context, input[type=text],
+input[type=number],
+input[type=password],
+input[type=email],
+input[type=date],
+input[type=time],
+textarea, select {
+  background-color: var(--c-context-back);
+  color: var(--c-context-front);
+  border: var(--g-border-width) solid var(--c-context-border);
+}
+
+.borderless {
+  border: none;
+}
+
+.bordered {
+  border: var(--g-border-width) solid var(--c-context-border);
+}
+
+button {
+  justify-content: center;
+  padding: 0.25rem 0.75rem;
+  gap: 0.5rem;
+  min-height: 3rem;
+  cursor: pointer;
+  color: inherit;
+  background-color: inherit;
+  /*& > .lucide {
+    & + div {
+      text-align: center;
+      flex: 1;
+      text-align: center;
+    }
+  }
+
+  &.text-left {
+    text-align: left;
+    div {
+      margin-left: 0.25rem;
+      text-align: left;
+    }
+  }*/
+}
+button:not(.dummy_class_001) {
+  border: none;
+}
+
+.icon {
+  aspect-ratio: 1;
+  border-radius: 25%;
+  object-fit: cover;
+}
+
+.toast {
+  position: fixed;
+  bottom: 1rem;
+  right: 1rem;
+  z-index: 200;
+  left: 50%;
+  width: min(40rem, 90%);
+  transform: translateX(-50%);
+}
+
+select {
+  padding: 0 0.75rem;
+  height: 3rem;
+  min-width: 12rem;
+  width: 100%;
+}
+
+dialog {
+  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;
+}
+dialog > * {
+  display: none;
+}
+dialog[open=""] {
+  background-color: rgba(0, 0, 0, 0.2);
+  backdrop-filter: blur(5px);
+  pointer-events: all;
+}
+dialog[open=""] > * {
+  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 {
+  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;
+  padding: 0 0.75rem;
+  background-color: color-mix(in srgb, var(--c-context-back) 50%, transparent);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  z-index: 20;
+  box-sizing: border-box;
+  height: 4.5rem;
+  justify-content: space-between;
+  align-items: center;
+}
+
+input[type=text],
+input[type=number],
+input[type=password],
+input[type=email],
+input[type=date],
+input[type=time],
+textarea {
+  padding: 0 0.75rem;
+  height: 3rem;
+  min-width: 12rem;
+  width: 100%;
+}
+
+textarea {
+  height: 6rem;
+  padding: 0.6rem 0.75rem;
+  resize: vertical;
+  min-height: 3rem;
+}
+
+input[type=range] {
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+  cursor: pointer;
+  width: 15rem;
+}
+input[type=range]::-moz-range-track {
+  background-color: var(--c-context-border);
+  border-radius: 100px;
+  border: none;
+  height: 0.5rem;
+}
+input[type=range]::-webkit-slider-runnable-track {
+  border-radius: 100px;
+  border: none;
+  height: 0.5rem;
+}
+input[type=range]::-webkit-slider-thumb {
+  border: none;
+  -webkit-appearance: none;
+  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;
+  width: 1.8rem;
+  height: 1.8rem;
+  border: 0.16em solid var(--c-context-border);
+  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%);
+  transform: scale(0);
+  transform-origin: center;
+  transition: 0.2s all ease-in-out;
+}
+
+input[type=checkbox]:checked {
+  border-color: var(--c-accent);
+  background: color-mix(in srgb, var(--c-accent) 20%, transparent);
+}
+input[type=checkbox]:checked::before {
+  transform: scale(1);
+  background-color: var(--c-accent);
+}
+
+input[type=checkbox]:focus {
+  outline: max(2px, 0.15em) solid var(--c-accent);
+  outline-offset: 0;
+}
+
+input[type=checkbox]:not(:checked):disabled {
+  cursor: not-allowed;
+  border: 0.16em solid var(--c-context-border);
+}
+
+:root {
+  --g-size: 1rem;
+  --g-radius: 0.75rem;
+  --g-padding: 1rem;
+  --g-border-width: 0.125rem;
+  --c-context-back: #ffffff;
+  --c-context-front: #000;
+  --c-context-border: #000;
+  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: 1rem;
+  border-collapse: separate;
+  font-family: "Inter", sans-serif;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+  font-size: inherit;
+  font-family: inherit;
+  font-weight: inherit;
+  border-color: inherit;
+}
+
+body,
+#app {
+  margin: 0;
+  display: block;
+  min-height: 100vh;
+  background-color: white;
+}
+
+/*# sourceMappingURL=elbe.css.map */