stargazer-ui 1.5.13 → 1.5.15

package/src/index.ts

@@ -1,21 +0,0 @@
-export * from "./Button"
-export * from "./ButtonGroup"
-export * from "./Card"
-export * from "./CloseButton"
-export * from "./Dropdown"
-export * from "./FloatingLabel"
-export * from "./Form"
-//export * from "./Grid"
-export * from "./InputGroup"
-export * from "./Modal"
-export * from "./Nav"
-export * from "./NavBar"
-export * from "./NavDropdown"
-//export * from "./OffCanvas"
-//export * from "./Overlay"
-export * from "./Popout"
-export * from "./Spinner"
-export * from "./Table"
-export * from "./Tabs"
-export * from "./ToggleButton"
-export * from "./utils/BaseTypes"

package/src/styles/_Card.scss

@@ -1,166 +0,0 @@
-.sg-card {
-    --card-border-radius: 0rem;
-    --border-width: -2px;
-
-    --border-gradient-color: color-mix(in srgb, #{$card-header-bg-color}, white 3%);
-    --border-gradient-mix-color: color-mix(in srgb, #{$card-header-bg-color}, white 3%);
-
-    --background-gradient-color: #{$sg-nav-color};
-    --background-gradient-mix-color: color-mix(in srgb, #{$card-header-bg-color}, white 3%);
-
-    --divider-color: #{$card-border-color};
-
-    display: flex;
-    flex-direction: column;
-    border: calc(var(--border-width) * -1) solid transparent;// $card-border-color;
-    position: relative;
-    
-    border-radius: var(--card-border-radius);
-    background: linear-gradient(71deg, 
-            var(--background-gradient-color), 
-            var(--background-gradient-mix-color), 
-            var(--background-gradient-color)
-        );
-    background-clip: padding-box;
-    &.sg-card-overlay {
-        color: $card-text-color;
-        border: 1px solid $card-border-color;
-    }
-
-    .sg-card-body {
-        flex: 1 1 auto;
-        padding: 1em;
-    }
-    
-    .sg-card-header {
-        margin-bottom: 0;
-        padding: 0.5em 1em;
-        border-bottom: 1px solid var(--divider-color);
-
-
-        &:first-child {
-            border-top-left-radius: var(--card-border-radius);
-            border-top-right-radius: var(--card-border-radius);
-        }
-    }
-    .sg-card-title {
-        margin: 0;
-    }
-
-    .sg-card-footer {
-        padding: 0.5em 1em;
-        border-top: 1px solid var(--divider-color);
-        &:last-child {
-            border-bottom-left-radius: var(--card-border-radius);
-            border-bottom-right-radius: var(--card-border-radius);
-        }
-    }
-    
-    .sg-card-text:last-child {
-        margin-bottom: 0;
-    }
-}
-
-.sg-card::after {
-    position: absolute;
-    content: "";
-    top: var(--border-width);
-    bottom: var(--border-width);
-    right: var(--border-width);
-    left: var(--border-width);
-    z-index: -1;
-    border-radius: var(--card-border-radius);
-    background: linear-gradient(71deg, 
-            var(--border-gradient-color), 
-            var(--border-gradient-mix-color),
-            var(--border-gradient-color)
-        );
-}
-
-@mixin invertedColor($color) {
-    --border-gradient-color: color-mix(in srgb, #{$color}, black 30%);
-    --border-gradient-mix-color: #{$color};
-
-    --background-gradient-color:  color-mix(in srgb, #{$color}, black 0%);
-    --background-gradient-mix-color: #{$color};
-
-    --divider-color: color-mix(in srgb, #{$color}, black 15%);
-    //text-shadow: 2px -2px $color, 2px 2px $color, -2px 2px $color, -2px -2px $color;
-    /*
-    > h1, h2, h3, h4, h5, h6, span, p, small {
-        background-color: $color;
-        box-shadow: 1px -1px 10px $color, 1px 1px 10px $color, -1px 1px 10px $color, -1px -1px 10px $color;
-    }
-    */
-}
-
-.primary {
-    --border-gradient-mix-color: #{$danger};
-    grid-column:  2 / 3;
-    grid-row: 1;
-    &.inverted {
-        @include invertedColor($danger);
-        color: black;
-    }
-}
-.secondary {
-    --border-gradient-mix-color: #{$secondary};
-    grid-column:  4 / 5;
-    grid-row: 1;
-    &.inverted {
-        @include invertedColor($secondary);
-    }
-}
-.success {
-    --border-gradient-mix-color: #{$success};
-    grid-column:  6 / 7;
-    grid-row: 1;
-    &.inverted {
-        @include invertedColor($success);
-        color: black;
-    }
-}
-.info {
-    --border-gradient-mix-color: #{$info};
-    grid-column:  8 / 9;
-    grid-row: 1;
-    &.inverted {
-        @include invertedColor($info);
-        color: black;
-    }
-}
-.warning {
-    --border-gradient-mix-color: #{$warning};
-    grid-column:  2 / 3;
-    grid-row: 2;
-    &.inverted {
-        @include invertedColor($warning);
-        color: black;
-    }
-}
-.danger {
-    --border-gradient-mix-color: #{$primary};
-    grid-column:  4 / 5;
-    grid-row: 2;
-    &.inverted {
-        @include invertedColor($primary);
-        color: black;
-    }
-}
-.light {
-    --border-gradient-mix-color: #{$light};
-    grid-column:  6 / 7;
-    grid-row: 2;
-    &.inverted {
-        @include invertedColor($light);
-        color: black;
-    }
-}
-.dark {
-    --border-gradient-mix-color: #{$dark};
-    grid-column: 8 / 9;
-    grid-row: 2;
-    &.inverted {
-        @include invertedColor($dark);
-    }
-}

package/src/styles/_CloseButton.scss

@@ -1,51 +0,0 @@
-@use "functions";
-
-$sg-button-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{black}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>") !default;
-
-.sg-button-close {
-    box-sizing: content-box;
-    width: 1rem;
-    height: 1rem;
-    padding: 0.25rem 0.25rem;
-    color: black;
-    background: transparent $sg-button-close-bg center / 1rem auto no-repeat; // include transparent for button elements
-    border: 0; // for button elements
-    border-radius: 0.125rem;
-    opacity: 0.5;
-  
-    // Override <a>'s hover style
-    &:hover {
-      color: black;
-      text-decoration: none;
-      opacity: 0.75;
-    }
-    &:focus-visible, &:focus:not(:focus-visible) {
-        box-shadow: 0 0 0 3px black;
-        outline: 2px solid white;
-        opacity: 1;
-        z-index: 5;
-    }
-
-    &:disabled,
-    &.disabled {
-      pointer-events: none;
-      user-select: none;
-      opacity:0.25;
-    }
-  }
-  
-  .sg-button-close-white {
-    filter: invert(1) grayscale(100%) brightness(200%);
-  }
-
-.sg-close-visually-hidden-label {
-	position: absolute !important;
-	width: 1px !important;
-	height: 1px !important;
-	padding: 0 !important;
-	margin: -1px !important;
-	overflow: hidden !important;
-	clip: rect(0,0,0,0) !important;
-	white-space: nowrap !important;
-	border: 0 !important;
-}

package/src/styles/_CustomButton.scss

@@ -1,134 +0,0 @@
-@use "sass:string";
-@use "sass:color";
-@use "sass:list";
-
-
-.sg-button {
-    --text-color: black;
-    --text-contrast: white;
-    --bg-color: rgb(252, 95, 95);
-    --border-color: var(--bg-color);
-    --bg-hover-color: color-mix(in oklab, var(--bg-color), var(--text-contrast) 15%) ;// color.mix(var(--text-color), var(--bg-color), 15%);
-    --border-hover-color: color-mix(in oklab, var(--bg-color), var(--text-contrast) 15%);
-    --bg-active-color: color-mix(in oklab, var(--bg-color), var(--text-contrast) 20%);
-    --border-active-color: color-mix(in oklab, var(--bg-color), var(--text-contrast) 20%);
-    --focus-visible-border-color: var(--text-contrast);
-    --focus-visible-outline-color: var(--bg-color);
-    --focus-visible-boxshadow-color: var(--text-contrast);
-
-    //border-radius: 0.375rem;
-    min-width: fit-content;
-    display: inline-block;
-    text-align: center;
-    vertical-align: middle;
-    padding: 0.375em 0.5em;
-    font-size: 0.85rem;
-
-    background-color: var(--bg-color);
-    border: 2px outset color-mix(in oklab, var(--bg-color), var(--text-color) 20%);// 1px solid /*inset*/ var(--border-color);
-    color: var(--text-color);
-    &:hover {
-        background-color: var(--bg-hover-color);
-        border-color: var(--border-hover-color);
-    }
-    &:active{
-        background-color: var(--bg-active-color);
-        border-color: var(--border-active-color);
-        border-style: inset;
-    }
-    /*
-    &:focus-visible {
-        box-shadow: 0 0 0 3px var(--focus-visible-boxshadow-color);
-        border: 1px solid var(--focus-visible-border-color);
-        outline: 2px solid var(--focus-visible-outline-color);
-        z-index: 5;
-    }
-    */
-}
-
-@each $name, $color in $colors {
-    $text-color: color-contrast($color);
-    $hover-background: if($text-color == $color-contrast-light, color.mix(black, $color, 15%), color.mix(white, $color, 15%));
-    $active-background: if($text-color == $color-contrast-light, color.mix(black, $color, 20%), color.mix(white, $color, 20%));
-    .sg-button-#{$name} {
-        --text-color: #{$text-color};
-        --bg-color: #{$color};
-        --border-color: #{$color};
-        --bg-hover-color: #{$hover-background};
-        --border-hover-color: #{$hover-background};
-        --bg-active-color: #{$active-background};
-        --border-active-color: #{$active-background};
-        --focus-visible-border-color: #{$text-color};
-        --focus-visible-outline-color: #{$color};
-        --focus-visible-boxshadow-color: #{$text-color};
-    }
-    .sg-button-group > .btn-#{$name} {
-        position: relative;
-        flex: 1 1 auto;
-    }
-}
-
-.sg-button-group, .sg-button-group-vertical {
-    position: relative;
-    display: inline-flex;
-    vertical-align: middle;
-    //width: 100%;
-    border-radius: 0.375rem;
-    //width: 100%;
-    > .sg-button {
-        position: relative;
-        flex: 1 1 auto;
-    }
-}
-.sg-button-group {
-    // Prevent double borders when buttons are next to each other
-    > :not(.sg-button-check:first-child) + .sg-button, > .sg-button-group:not(:first-child) {
-        margin-left: -1px;
-    }
-
-    // Reset rounded corners
-    > .sg-button:not(:last-child), > .sg-button-group:not(:last-child) > .sg-button {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-    }
-
-    // The left radius should be 0 if the button is:
-    // - the "third or more" child
-    // - the second child and the previous element isn't `.btn-check` (making it the first child visually)
-    // - part of a btn-group which isn't the first child
-    > .sg-button:nth-child(n + 3), > :not(.sg-button-check) + .sg-button, > .sg-button-group:not(:first-child) > .sg-button {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-    }
-}
-
-.sg-button-group-vertical {
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: center;
-  
-    
-    > .sg-button,
-    > .sg-button-group {
-      width: 100%;
-    }
-    
-    > .sg-button:not(:first-child),
-    > .sg-button-group:not(:first-child) {
-      margin-top: -1px;
-    }
-  
-    // Reset rounded corners
-    > .sg-button:not(:last-child):not(.dropdown-toggle),
-    > .sg-button-group:not(:last-child) > .sg-button {
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-    }
-  
-    > .sg-button ~ .sg-button,
-    > .sg-button-group:not(:first-child) > .sg-button {
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-    }
-  }
-

package/src/styles/_Dropdown.scss

@@ -1,127 +0,0 @@
-@use "sass:color";
-
-.dropup,
-.dropend,
-.dropdown,
-.dropstart,
-.dropup-center,
-.dropdown-center {
-  position: relative;
-}
-
-.sg-dropdown {
-  --sg-dropdown-list-bg: ${$sg-dropdown-list-bg};
-}
-
-.sg-dropdown-list {
-    --sg-dropdown-list-bg: #{$sg-dropdown-list-bg};
-    position: absolute;
-    z-index: $zindex-dropdown;
-    display: none; // none by default, but block on "open" of the menu
-    min-width: 10rem;
-    padding: 0;
-    margin: 0; // Override default margin of ul
-    text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
-    list-style: none;
-    background-color: $sg-body-bg; //$sg-dropdown-list-bg;
-    color: white;
-    background-clip: padding-box;
-    border: 2px outset color-mix(in oklab, $sg-body-bg, white 60%);// white;
-  //border-radius: 0.375rem;
-}
-.sg-dropdown-list.show {
-  display: block;
-}
-
-.sg-dropdown-toggle {
-    position: relative;
-    white-space: nowrap;
-    
-    &::after {
-        display: inline-block;
-        margin-left: calc(0.3em * 0.85);
-        vertical-align: calc(0.3em * 0.85);
-        content: "";
-        border-top: 0.3em solid;
-        border-right: 0.3em solid transparent;
-        border-bottom: 0;
-        border-left: 0.3em solid transparent;
-    }
-    &[data-drop="up"]::after {
-      transform: rotate(180deg);
-    }
-    &[data-drop="right"]::after {
-      transform: rotate(270deg);
-    }
-    
-    &[data-drop="left"]::after {
-      display: none;
-    }
-    &[data-drop="left"]::before {
-      display: inline-block;
-      margin-right: calc(0.3em * 0.85);
-      vertical-align: calc(0.3em * 0.85);
-      content: "";
-      border-top: 0.3em solid;
-      border-right: 0.3em solid transparent;
-      border-bottom: 0;
-      border-left: 0.3em solid transparent;
-      transform: rotate(90deg);
-    }
-}
-
-.sg-dropdown-divider {
-  --line-color: rgba(0, 0, 0, 0.175);
-  height: 0;
-  margin: 0.5rem 0;
-  overflow: hidden;
-  border-top: 1px solid var(--line-color);
-  opacity: 1; // Revisit in v6 to de-dupe styles that conflict with <hr> element
-}
-  
-  // Links, buttons, and more within the dropdown menu
-  //
-  // `<button>`-specific styles are denoted with `// For <button>s`
-.sg-dropdown-item {
-  display: block;
-  width: 100%; // For `<button>`s
-  padding: 0.25rem 0.5rem;
-  clear: both;
-  text-align: inherit; // For `<button>`s
-  white-space: nowrap; // prevent links from randomly breaking onto new lines
-  background-color: transparent; // For `<button>`s
-  color: inherit;
-  border: 2px solid transparent; // For `<button>`s
-
-  &.active,
-  &:active {
-      background-color: $sg-dropdown-item-action-bg;
-  }
-
-  &.disabled,
-  &:disabled {
-      background-color: $sg-dropdown-item-disabled-bg;
-      opacity: 0.5;
-  }
-  &.sg-dropdown-item-visual-focus {
-    /*
-    background-color: $sg-dropdown-item-hover-bg;
-    border-top: 1px solid white;
-    border-bottom: 1px solid white;
-    */
-    background-color: color-mix(in oklab, $input-background-color, white 20%);
-    &:active {
-        background-color: color-mix(in oklab, $input-background-color, white 25%);
-    }
-    //background-color: color-mix(in oklab, $danger, transparent 50%);
-    //border: 2px outset color-mix(in oklab, $danger, currentColor 20%)
-    //@include sg-focus-visible();
-  }
-}
-a.sg-dropdown-item {
-  cursor: pointer;
-  text-decoration: none;
-}
-[data-nav="true"] .sg-dropdown-item {
-  font-size: 0.85rem;
-}

package/src/styles/_FloatingLabel.scss

@@ -1,56 +0,0 @@
-.sg-form-floating {
-    position: relative;
-    --height: calc(3rem + 2px);
-    --text-color: #{$input-text-color};
-
-    > .sg-form-control, > .sg-form-control-plaintext, > .sg-form-select, > .sg-form-select-tag {
-        height: var(--height);
-        padding-inline: 1.25rem;
-        &::placeholder {
-            color: transparent;
-        }
-        &:focus, &:not(:placeholder-shown) {
-            padding-top: 1.25rem;
-        }
-        // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
-        &:-webkit-autofill {
-            padding-top: 1.25rem;
-        }
-    }
-
-    > .sg-form-floating-label {
-        position: absolute;
-        top: 0;
-        left: 0;
-        color: var(--text-color);
-        width: 100%;
-        height: 100%; // allow textareas
-        padding-inline: 1rem;
-        padding-block: 0.75rem;
-        pointer-events: none;
-        transition: transform 0.1s ease-in-out;
-        transform-origin: 0 0;
-        z-index: 5;
-
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-    > .sg-form-select {
-        padding-inline: 1rem;
-        padding-block: 1.5rem 0.5rem;
-    }
-
-    > .sg-form-control:focus, 
-    > .sg-form-control:not(:placeholder-shown), 
-    > .sg-form-control-plaintext, 
-    > .sg-form-select,
-    > .sg-form-select-tag {
-        ~ .sg-form-floating-label {
-            font-size: 0.75rem;
-            height: fit-content;
-            padding: 0.5rem 0.5rem;
-            transform: translate(0, -0.25rem);
-            opacity: 0.75;
-        }
-    }
-}

package/src/styles/_Forms.scss

@@ -1,7 +0,0 @@
-@import "forms/FormCheck";
-@import "forms/FormControl";
-@import "forms/FormGroup";
-@import "forms/FormLabel";
-@import "forms/FormSlider";
-@import "forms/FormSelect";
-@import "forms/FormText";