stargazer-ui 1.2.1 → 1.2.2

package/src/styles/_variables.scss

@@ -1,146 +0,0 @@
-@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-navbar:						990 !default;
-$zindex-dropdown:                   1000 !default;
-$zindex-popover:                    1010 !default;
-$zindex-sticky:                     1020 !default;
-$zindex-fixed:                      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);
-
-/* Input and forms */
-$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%);
-
-
-/* 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;
-}
-
-/* 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);
-
-/* 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%);
-
-/* 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: black;
-$sg-arrow-fill: black;

package/src/styles/forms/_FormCheck.scss

@@ -1,269 +0,0 @@
-$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 {
-    box-shadow: 0 0 4px 2px var(--input-border-color-invalid);
-  }
-}
-
-.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

@@ -1,102 +0,0 @@
-@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 {
-    //outline: 2px solid $input-border-color-invalid;
-    box-shadow: 0 0 4px 2px var(--input-border-color-invalid);
-  }
-}
-
-.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
-
-  

package/src/styles/forms/_FormGroup.scss

@@ -1,21 +0,0 @@
-.sg-form-group {
-    padding-bottom: 0.5rem;
-    display: flex;
-    flex-direction: column;
-    label {
-        margin-bottom: 0.5rem;
-    }
-    &.sg-form-group-vertical {
-        flex-direction: row;
-        align-items: center;
-        label {
-            min-width: max-content;
-            margin-right: 0.5rem;
-            margin-bottom: 0;
-        }
-    }
-
-    .sg-form-check {
-        padding-bottom: 0;
-    }
-}

package/src/styles/forms/_FormLabel.scss

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

package/src/styles/forms/_FormSelect.scss

@@ -1,164 +0,0 @@
-
-.sg-form-select-tag {
-    --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};
-
-    position: relative;
-    display: block;
-    width: 100%;
-    padding-block: $input-padding-x;
-    padding-inline: $input-padding-y calc(3 * $input-padding-y);
-    color: var(--input-text-color);
-
-    background-color: var(--input-background-color);
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
-    background-repeat: no-repeat;
-    background-position: right $input-padding-x center;
-    background-size: 1em 0.75em;
-
-    border: $input-border-width $input-border-style var(--input-border-color);
-    border-radius: $input-border-radius;
-
-    appearance: none;
-
-    &:focus-visible, &:focus {
-        //@include sg-focus-visible()
-        border-color: var(--input-border-color-focus);
-        outline: 0;
-        box-shadow: 0;
-    }
-    &[multiple], &[size]:not([size="1"]) {
-        padding-right: $input-padding-x;
-        background-image: none;
-    }
-    &: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;
-    }
-    &.invalid, &:user-invalid {
-        box-shadow: 0 0 4px 2px var(--input-border-color-invalid);
-    }
-}
-
-
-.sg-form-select {
-    --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};
-    position: relative;
-    display: block;
-    width: 100%;
-    color: $input-text-color;
-
-    
-}
-
-.sg-select-control {
-    width: 100%;
-    height: fit-content;
-    padding-block: $input-padding-x;
-    padding-inline: $input-padding-y calc(3 * $input-padding-y);
-    color: inherit;
-
-    background-color: $input-background-color;
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
-    background-repeat: no-repeat;
-    background-position: right $input-padding-x center;
-    background-size: 1em 0.75em;
-
-    border: $input-border-width solid $input-border-color;
-    border-radius: $input-border-radius;
-
-    &:focus-within {
-        //@include sg-focus-visible()
-        border-color: $input-border-color-focus;
-        outline: 0;
-        box-shadow: 0;
-    }
-    &.invalid {
-        border-color: $input-border-color-invalid;
-    }
-}
-
-.sg-select-input {
-    background-color: inherit;
-    border: none;
-    height: 100%;
-    max-width: 80%;
-    color: inherit;
-
-    &[multiple], &[size]:not([size="1"]) {
-        padding-right: $input-padding-x;
-        background-image: none;
-    }
-    &:disabled {
-        color: inherit;
-        background-color: inherit;
-        opacity: 1;
-    }
-    &:focus, &:focus-within, &:focus-visible {
-        border-color: transparent;
-        outline: none;
-    }
-    &::placeholder {
-        color: $input-placeholder-color;
-        opacity: 1;
-      }
-    
-}
-
-.sg-select-list {
-    --bg-color: #{$input-background-color};
-    --txt-color: black;
-
-    background-color: var(--bg-color);
-    color: inherit;
-
-    position: absolute;
-    top: calc(100% + 1px);
-    width: 100%;
-    padding: 0;
-
-    border-radius: 0;// 0.375rem;
-    //border: 1px solid color-mix(in srgb, currentColor, white);
-    border: 2px outset color-mix(in oklab, $sg-body-bg, white 60%);
-
-    list-style-type: none;
-}
-
-.sg-select-list-item {
-    padding: 0.25rem 0.5rem;
-    font-size: 0.85rem;
-    border: 2px solid transparent;
-    
-
-    &.focus {
-        //background-color: color-mix(in srgb, var(--bg-color) 80%, black);
-        background-color: color-mix(in oklab, $danger, transparent 50%);
-        border: 2px outset color-mix(in oklab, $danger, currentColor 20%);
-        &:active {
-            //background-color: color-mix(in srgb, var(--bg-color) 60%, black);
-            background-color: color-mix(in oklab, $danger, transparent 60%);
-            border: 2px outset color-mix(in oklab, $danger, currentColor 30%);
-        }
-    }
-
-    &:first-child {
-        border-top-right-radius: inherit;
-        border-top-left-radius: inherit;
-    }
-    &:last-child {
-        border-bottom-left-radius: inherit;
-        border-bottom-right-radius: inherit;
-    }
-}