stargazer-ui 1.5.11 → 1.5.13

package/src/styles/_variables.scss

@@ -0,0 +1,164 @@
+@use "sass:color";
+
+:root {
+	--sg-body-bg: #212529;
+  	--sg-body-color: white;
+}
+
+$body-line-height: 1.4em !default;
+$sg-body-bg: #212529;
+$sg-body-bg-dark: #ffffff;
+$sg-body-color: white;
+
+$sg-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
+$sg-highlight-bg: #fff3cd;
+
+$primary: #4995d5;
+$secondary: #6c757d;
+$success: #1fad61; //hsl(148, 50%, 46%) //#2ae293
+$info: #9184bd;
+$warning: hsl(48, 75%, 52%);
+$danger: rgb(252, 95, 95);
+$light: #f8f9fa;
+$dark: #212529;
+
+
+
+$sg-nav-color: rgb(26, 27, 29);
+
+/* Grid variables */
+$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px ) !default;
+$container-max-widths: ( sm: 540px, md: 720px, lg: 960px, xl: 1140px, xxl: 1320px ) !default;
+
+/* z indices */
+$zindex-sticky:                     1010 !default;
+$zindex-navbar:						1010 !default;
+$zindex-fixed:                      1010 !default;
+$zindex-dropdown:                   1020 !default;
+$zindex-popover:                    1020 !default;
+$zindex-offcanvas-backdrop:         1030 !default;
+$zindex-offcanvas:                  1040 !default;
+$zindex-modal-backdrop:             1050 !default;
+$zindex-modal:                      1060 !default;
+$zindex-tooltip:                    1080 !default;
+$zindex-toast:                      1090 !default;
+
+/* Button */
+//$colors: ("red": #E15554, "green": #3BB273, "yellow": #E1BC29, "blue": #4D9DE0, "purple": #7768AE);
+$colors: ("primary": #0d6efd, "secondary": #6c757d, "success": #198754, "info": #0dcaf0, "warning": #ffc107, "danger": #dc3545, "light": #f8f9fa, "dark": #212529);
+$colors: ("primary": #4D9DE0, "secondary": #6c757d, "success": #3BB273, "info": #7768AE, "warning": #E1BC29, "danger": #E15554, "light": #f8f9fa, "dark": #212529);
+$colors: ("primary": $danger, "secondary": $secondary, "success": $success, "info": $info, "warning": $warning, "danger": $primary, "light": $light, "dark": $dark);
+
+
+/* Card */
+$card-bg-color: color-mix(in hsl, #212529, white 5%) !default;
+$card-header-bg-color: color-mix(in hsl, white 3%, #212529) !default;
+$card-text-color: white !default;
+$card-border-color: white !default;
+
+.popover-header {
+	background-color: var(--nav-color);
+	color: white;
+}
+.popover-body {
+	background-color: var(--background-color);
+	color: var(--text-color);
+	border-bottom-right-radius: 0.5em;
+	border-bottom-left-radius: 0.5em;
+    max-height: 30em;
+    overflow: auto;
+}
+
+
+/* Dropdown */
+$sg-dropdown-list-bg: #343a40;
+
+$sg-dropdown-item-hover-bg: color.mix(black, $sg-dropdown-list-bg, 15%);
+$sg-dropdown-item-action-bg: color.mix(black, $sg-dropdown-list-bg, 20%);
+$sg-dropdown-item-disabled-bg: color.mix(white, $sg-dropdown-list-bg, 15%);
+
+
+/* Form */
+$input-text-color: white;// #212529;
+$input-text-color-dark: black;
+
+$input-line-height: $body-line-height;
+
+$input-padding-x: 0.375em;
+$input-padding-y: 0.5em;
+
+$input-border-width: 2px;
+$input-border-radius: 0;// 0.375em;
+
+$input-border-color: color-mix(in oklab, $sg-nav-color, white 25%) ;// #ced4da;
+$input-border-color-dark: color-mix(in oklab, white, $sg-nav-color 25%) ;
+$input-border-color-focus: $danger;
+$input-border-color-focus-dark: color-mix(in oklab, $danger, black 25%);
+$input-border-color-invalid: $warning;
+$input-border-color-invalid-dark: color-mix(in oklab, $warning, black 25%);
+$input-border-style: outset;// solid;
+
+$input-background-color: $sg-nav-color;
+$input-background-color-dark: $sg-body-bg-dark;// white;
+$input-disabled-color: #e9ecef;
+$input-placeholder-color: rgba(255, 255, 255, 0.336);// #6c757d;
+
+$input-group-text-background-color: #e9ecef;
+$input-group-text-border-color: color.mix(black, $input-group-text-background-color, 5%);// #ced4da;
+
+$input-height: calc($input-line-height + $input-padding-x * 2 + 2*$input-border-width);
+
+$slider-height: 1.75rem;
+$slider-thumb-width: 1.5rem;
+$slider-thumb-height: 0.5rem;
+$slider-border-width: 1px;
+
+$slider-filled-color: $danger;
+$slider-filled-hover-color: color-mix(in oklab, $slider-filled-color, black 15%);
+$slider-filled-border-color: color-mix(in oklab, $slider-filled-color, black 20%);
+$slider-filled-border-hover-color: color-mix(in oklab, $slider-filled-color, black 35%);
+
+$slider-empty-color: $input-background-color;
+$slider-empty-bover-color: color-mix(in oklab, $input-background-color, black 15%);
+$slider-empty-border-color: color-mix(in oklab, $input-border-color, black 15%);
+$slider-empty-border-hover-color: color-mix(in oklab, $input-border-color, black 25%);
+
+
+/* Nav */
+$sg-link-color: $danger;// #4D9DE0;// #0d6efd;
+$sg-link-hover-color: white;//color.mix(black, #E15554, 15%);// #62a4da;// #0a58ca;
+$sg-link-disable-color: rgb(180, 180, 180);
+
+
+/* Overlay */
+$sg-arrow-border: white;
+$sg-arrow-fill: rgb(26, 27, 29);
+$tooltip-arrow-filter: brightness(66.666666%);
+
+$tooltip-text-color: white;
+$tooltip-background-color: rgb(26, 27, 29);
+
+
+$tooltip-font-size: 0.75rem;
+$tooltip-max-width: 12rem;
+
+$tooltip-padding-x: 0.375em;
+$tooltip-padding-y: 0.5em;
+
+$tooltip-border-color: color-mix(in oklab, $sg-nav-color, white 25%) ;
+$tooltip-border-radius: 0;
+$tooltip-border-width: 2px;
+$tooltip-border-style: inset;
+$tooltip-border-color: $tooltip-text-color;
+
+
+/* Table */
+$sg-table-padding: 0.5rem;
+$sg-table-padding-sm: 0.25rem;
+
+/* Tabs */
+$sg-tab-controls-bg: #212529;
+
+$sg-tab-button-color: $danger;
+$sg-tab-button-hover: color-mix(in srgb, black 15%, $sg-tab-controls-bg);
+$sg-tab-button-active: color-mix(in srgb, black 25%, $sg-tab-controls-bg);

package/src/styles/forms/_FormCheck.scss

@@ -0,0 +1,270 @@
+$form-switch-width: 2em;
+$form-switch-color: rgba(black, .25);
+
+.sg-form-check {
+  --input-background-color: #{$input-background-color};
+  --input-border-color: #{$input-border-color};
+  --input-border-color-focus: #{$input-border-color-focus};
+  --input-border-color-invalid: #{$input-border-color-invalid};
+
+  display: block;
+  min-height: $input-line-height;
+  padding-bottom: 0.5rem;
+
+  .sg-form-check-input {
+      float: left;
+  }
+}
+.sg-form-check-reverse {
+  display: block;
+  min-height: $input-line-height;
+  padding-right: $input-line-height;
+  padding-bottom: 0.5rem;
+  text-align: right;
+
+  .sg-form-check-input {
+    float: right;
+    margin-right: $input-line-height * -1;
+    margin-left: 0;
+  }
+}
+/*
+@media (prefers-color-scheme: dark) {
+  .sg-form-check {
+    --input-background-color: #{$input-background-color-dark};
+    --input-border-color: #{$input-border-color-dark};
+    --input-border-color-focus: #{$input-border-color-focus-dark};
+    --input-border-color-invalid: #{$input-border-color-invalid-dark};
+  }
+
+}
+  */
+
+.sg-form-check-input {
+  margin-right: 1ch;
+  width: calc($input-line-height - 2px);
+  height: calc($input-line-height - 2px);
+
+  background-color: var(--input-background-color);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  appearance: none;
+  print-color-adjust: exact; // Keep themed appearance for print
+  border: $input-border-width $input-border-style var(--input-border-color);
+
+  &[type="checkbox"] {
+    border-radius: $input-border-radius;
+    background-clip: padding-box;
+    
+
+    &:indeterminate {
+      background-color: var(--input-border-color-focus);
+      border-color: var(--input-border-color-focus);
+  
+      background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$input-background-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>");
+    }
+  }
+
+  &[type="radio"] {
+    // stylelint-disable-next-line property-disallowed-list
+    border-radius: 50%;
+  }
+  &[type="color"] {
+    width: 3em;
+    height: $input-height;
+    padding: $input-padding-x;
+
+    &:not(:disabled):not([readonly]) {
+      cursor: pointer;
+    }
+
+    &::-moz-color-swatch {
+      border: 0 !important; // stylelint-disable-line declaration-no-important
+      border-radius: $input-border-radius;
+    }
+
+    &::-webkit-color-swatch {
+      border-radius: $input-border-radius;
+    }
+  }
+
+  &:active {
+    filter: brightness(90%);
+  }
+
+  &:focus-visible {
+    border-color: var(--input-border-color-focus);
+    outline: 0;
+    box-shadow: 0;
+  }
+
+  &:checked {
+    $currentColor: $input-border-color-focus;
+
+    &[type="checkbox"] {
+      background-image: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><polygon style='fill:#{$currentColor};' points='11.941,28.877 0,16.935 5.695,11.24 11.941,17.486 26.305,3.123 32,8.818'/></svg>");
+    }
+
+    &[type="radio"] {
+      background-image: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='-4 -4 8 8'><circle r='2' fill='#{$currentColor}' /></svg>");
+    }
+    
+  }
+
+  &:disabled, .disabled {
+    --input-background-color: rgba(255, 255, 255, 0.04);
+    --input-text-color: color-mix(in oklab, #{$input-placeholder-color}, white 40%);
+    cursor:not-allowed;
+    filter: none;
+    opacity: 0.5;
+  }
+
+  // Use disabled attribute in addition of :disabled pseudo-class
+  // See: https://github.com/twbs/bootstrap/issues/28247
+  &[disabled],
+  &:disabled {
+    ~ .form-check-label {
+      cursor: default;
+      opacity: 0.5;
+    }
+  }
+
+  &:user-invalid, &.invalid, &[aria-invalid="true"] {
+    box-shadow: 0 0 4px 2px var(--input-border-color-invalid);
+    z-index: 2;
+  }
+}
+
+.sg-form-check-label {
+    cursor: null;
+    display: grid;
+    grid-template-columns: auto 1fr;
+    align-items: center;
+}
+
+
+.sg-form-switch {
+  .sg-form-check-input {
+    width: $form-switch-width;
+    margin-right: 1ch;
+    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$input-border-color}'/></svg>");
+    background-position: left center;
+    border-radius: $form-switch-width;
+    transition: background-position .15s ease-in-out;
+
+    &:focus-visible {
+      border-color: var(--input-border-color-focus);
+      outline: 0;
+      box-shadow: 0;
+    }
+
+    &:checked {
+        background-position: right center;
+        background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$input-border-color-focus}'/></svg>");
+    }
+  }
+}
+
+
+.sg-form-check-border {
+  //--spin-degree: 40deg;
+  position: relative;
+  padding: 2px;
+  width: fit-content;
+  height: fit-content;
+
+  margin-right: 1ch;
+  //border: 2px solid transparent;
+  overflow: hidden;
+  --border-opacity: 0;
+  &:focus-within {
+    --border-opacity: 1;
+    
+  }
+  box-shadow: 50% 50% 0 white;
+  
+  &::before {
+    content: "";
+    opacity: var(--border-opacity);
+    display: block;
+    position: absolute;
+    top: 25%;// -8px;
+    left: -25%;// -8px;
+    width: 150%;// calc(16px + 100%);
+    height: 50%;// calc(16px + 100%);
+    background-image: conic-gradient(from 0deg, white, white 50%);
+    z-index: -2;
+    animation: spin 3s linear;
+    animation-direction: forwards;
+    animation-iteration-count: infinite;
+  }
+  &::after {
+    content: "";
+    opacity: var(--border-opacity);
+    display: block;
+    position: absolute;
+    top: -3px;
+    left: -3px;
+    width: calc(4px + 100%);
+    height: calc(4px + 100%);
+    background-color: transparent;
+    clip-path: rect( -2px 100% 100% -2px);
+    z-index: -1;
+  }
+  
+
+  
+    //animation: spin 3s ease-in-out infinite forwards;
+
+  &:has(:focus-visible) {
+    
+  }
+}
+@keyframes spin {
+  0% {
+    transform: rotate(-45deg);
+  }
+  50% {
+    transform: rotate(45deg);
+  }
+  100% {
+    transform: rotate(-45deg);
+  }
+}
+
+.sg-input-group-grid {
+  > .sg-form-check {
+    position: relative;
+    padding-bottom: 0;
+    > .sg-form-check-label {
+      display: block;
+    }
+    .sg-form-check-input {
+      margin: 0;
+      height: 100%;
+      width:auto;
+      aspect-ratio: 1;
+    }
+    span {
+      display: flex;
+      flex: 0 1 auto;
+      overflow: auto;
+      width: fit-content;
+      max-width: 8rem;
+      align-items: center;
+      text-align: center;
+      font-size: 0.85rem;
+
+      padding: $input-padding-x $input-padding-y;
+
+      white-space: nowrap;
+
+      background-color: $input-border-color;
+      color: $input-text-color;
+      border: $input-border-width outset $input-border-color;
+      border-right-width: 0;
+      border-radius: $input-border-radius;
+    }
+  }
+}

package/src/styles/forms/_FormControl.scss

@@ -0,0 +1,135 @@
+@use "sass:color";
+
+.sg-form-control {
+  --input-text-color: #{$input-text-color};
+  --input-background-color: #{$input-background-color};
+  --input-border-color: #{$input-border-color};
+  --input-border-color-focus: #{$input-border-color-focus};
+  --input-border-color-invalid: #{$input-border-color-invalid};
+  --input-disabled-color: #{$input-disabled-color};
+  --input-placeholder-color: #{$input-placeholder-color};
+
+  position: relative;
+  display: block;
+  width: 100%;
+  min-width: 5rem;
+  padding: $input-padding-x $input-padding-y;
+  color: var(--input-text-color);
+  background-color: var(--input-background-color);
+  border: $input-border-width $input-border-style var(--input-border-color);
+  //appearance: none;
+  border-radius: $input-border-radius;
+
+  caret-color: white;
+
+  transition: border-color .15s ease-in-out;
+
+  &[type="file"] {
+    overflow: hidden; // prevent pseudo element button overlap
+
+    &:not(:disabled):not([readonly]) {
+      cursor: pointer;
+    }
+  }
+
+  &:focus-visible {
+    //@include sg-focus-visible()
+    border-color: var(--input-border-color-focus);
+    outline: 0;
+    box-shadow: 0;
+  }
+
+  &::-webkit-date-and-time-value {
+    height: $input-line-height;
+  }
+
+  &::placeholder {
+    color: var(--input-placeholder-color);
+    opacity: 1;
+  }
+
+  &:disabled, .disabled {
+    --input-background-color: rgba(255, 255, 255, 0.04);
+    --input-placeholder-color: color-mix(in oklab, #{$input-placeholder-color}, white 40%);
+    --input-text-color: color-mix(in oklab, #{$input-placeholder-color}, white 40%);
+    cursor: not-allowed;
+    opacity: 1;
+  }
+
+  // File input buttons theming
+  &::file-selector-button {
+    padding: $input-padding-x $input-padding-y;
+    margin: (-$input-padding-x) (-$input-padding-y);
+    margin-inline-end:$input-padding-x;
+    pointer-events: none;
+    border-color: inherit;
+    border-style: solid;
+    border-width: 0;
+    border-inline-end-width: $input-border-width;
+    border-radius: 0; // stylelint-disable-line property-disallowed-list
+    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
+  }
+
+  &:hover:not(:disabled):not([readonly])::file-selector-button {
+    background-color: color-mix(in oklab, var(--input-text-color) , black 5%);
+  }
+
+  &:user-invalid, &.invalid, &[aria-invalid="true"] {
+    //outline: 2px solid $input-border-color-invalid;
+    box-shadow: 0 0 4px 2px var(--input-border-color-invalid);
+    z-index: 2;
+  }
+}
+
+.sg-form-control-plaintext {
+  display: block;
+  width: 100%;
+  padding: $input-padding-x 0;
+  margin-bottom: 0; // match inputs if this class comes on inputs with default margins
+  color: var(--input-text-color);
+  background-color: transparent;
+  border: solid transparent;
+  border-width: $input-border-width 0;
+}
+
+textarea {
+  &.sg-form-control {
+    min-height: $input-height;
+    margin: 0;
+  }
+}
+  // stylelint-enable selector-no-qualifying-type
+
+.sg-form-control-error, .sg-form-control-hint {
+    max-width: 100%;
+    word-break: break-word;
+    margin: 0;
+    color: var(--text-color, white);
+    display: flex;
+    align-items:center;
+    font-size: 0.8rem;
+    .sg-form-control-error-icon {
+        color: currentColor;
+        margin-right: 0.5ch;
+    }
+}
+.sg-form-control-error {
+    --text-color: #{$input-border-color-invalid};
+}
+.sg-form-control-hint {
+    --text-color: #{$input-text-color};
+}
+
+.sg-form-control-description {
+    margin-top: var(--error-message-margin, 0.25rem);
+    &.tooltip {
+        --error-message-margin: 0;
+        .sg-form-control-error-icon {
+            align-self: last baseline;
+        }
+    }
+
+    &:empty {
+        display: none;
+    }
+}

package/src/styles/forms/_FormGroup.scss

@@ -0,0 +1,26 @@
+.sg-form-group {
+    --error-message-margin: 0rem;
+    padding-bottom: 0.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+    label {
+        margin: 0;
+    }
+    &.sg-form-group-vertical {
+        flex-direction: row;
+        align-items: center;
+        label {
+            min-width: max-content;
+        }
+    }
+
+    .sg-form-check {
+        padding-bottom: 0;
+    }
+
+    .sg-form-control-error-icon {
+        color: currentColor;
+        margin-right: 0.5ch;
+    }
+}

package/src/styles/forms/_FormLabel.scss

@@ -0,0 +1,3 @@
+.sg-form-label {
+    margin-bottom: 0.5em;
+}