stargazer-ui 1.2.1 → 1.2.2

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,132 +0,0 @@
-@use "sass:string";
-@use "sass:color";
-@use "sass:list";
-
-
-.sg-button {
-    --text-color: white;
-    --bg-color: #0d6efd;
-    --border-color: #0d6efd;
-    --bg-hover-color: color.mix(white, #0d6efd, 15%);
-    --border-hover-color: color.mix(white, #0d6efd, 15%);
-    --bg-active-color: color.mix(white, #0d6efd, 20%);
-    --border-active-color: color.mix(white, #0d6efd, 20%);
-    --focus-visible-border-color: white;
-    --focus-visible-outline-color: #0d6efd;
-    --focus-visible-boxshadow-color: white;
-
-    //border-radius: 0.375rem;
-    min-width: fit-content;
-    display: inline-block;
-    text-align: center;
-    vertical-align: middle;
-    padding: 0.375rem 0.75rem;
-
-    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, &:focus {
-        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,120 +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 {
-  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 {
-    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, $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";

package/src/styles/_Grid.scss

@@ -1,178 +0,0 @@
-@use 'sass:math';
-
-$grid-columns: 12 !default;
-$grid-gutter-width: 1.5rem !default;
-$grid-row-columns: 6 !default;
-$container-padding-x: $grid-gutter-width !default;
-
-
-@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
-    @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
-  }
-@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
-    $min: map-get($breakpoints, $name);
-    @return if($min != 0, $min, null);
-}
-
-@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
-    $min: breakpoint-min($name, $breakpoints);
-    @if $min {
-        @media (min-width: $min) {
-            @content;
-        }
-    } @else {
-        @content;
-    }
-}
-@mixin row-cols($count) {
-    > * {
-      flex: 0 0 auto;
-      width: math.div(100%, $count);
-    }
-}
-@mixin make-col-auto() {
-    flex: 0 0 auto;
-    width: auto;
-}
-@mixin make-col($size: false, $columns: $grid-columns) {
-    @if $size {
-      flex: 0 0 auto;
-      width: percentage(math.div($size, $columns));
-  
-    } @else {
-      flex: 1 1 0;
-      max-width: 100%;
-    }
-}
-@mixin make-col-offset($size, $columns: $grid-columns) {
-  $num: math.div($size, $columns);
-  margin-left: if($num == 0, 0, percentage($num));
-}
-
-@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
-  @each $breakpoint in map-keys($breakpoints) {
-    $infix: breakpoint-infix($breakpoint, $breakpoints);
-
-    @include media-breakpoint-up($breakpoint, $breakpoints) {
-      // Provide basic `.col-{bp}` classes for equal-width flexbox columns
-      .sg-col#{$infix} {
-        flex: 1 0 0%; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
-      }
-
-      .sg-row-cols#{$infix}-auto > * {
-        @include make-col-auto();
-      }
-
-      @if $grid-row-columns > 0 {
-        @for $i from 1 through $grid-row-columns {
-          .sg-row-cols#{$infix}-#{$i} {
-            @include row-cols($i);
-          }
-        }
-      }
-
-      .sg-col#{$infix}-auto {
-        @include make-col-auto();
-      }
-      
-      @if $columns > 0 {
-        @for $i from 1 through $columns {
-          .sg-col#{$infix}-#{$i} {
-            @include make-col($i, $columns);
-          }
-        }
-        
-        
-        // `$columns - 1` because offsetting by the width of an entire row isn't possible
-        @for $i from 0 through ($columns - 1) {
-          @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
-            .sg-offset#{$infix}-#{$i} {
-              @include make-col-offset($i, $columns);
-            }
-          }
-        }
-      }
-      
-    }
-  }
-}
-@mixin make-row($gutter: $grid-gutter-width) {
-    --sg-gutter-x: #{$gutter};
-    --sg-gutter-y: 0;
-    display: flex;
-    flex-wrap: wrap;
-    margin-top: calc(-1 * var(--sg-gutter-y)); // stylelint-disable-line function-disallowed-list
-    margin-right: calc(-.5 * var(--sg-gutter-x)); // stylelint-disable-line function-disallowed-list
-    margin-left: calc(-.5 * var(--sg-gutter-x)); // stylelint-disable-line function-disallowed-list
-}
-  
-@mixin make-col-ready() {
-    // Add box sizing if only the grid is loaded
-    // Prevent columns from becoming too narrow when at smaller grid tiers by
-    // always setting `width: 100%;`. This works because we set the width
-    // later on to override this initial width.
-    flex-shrink: 0;
-    width: 100%;
-    max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
-    padding-right: calc(var(--sg-gutter-x) * .5); // stylelint-disable-line function-disallowed-list
-    padding-left: calc(var(--sg-gutter-x) * .5); // stylelint-disable-line function-disallowed-list
-    margin-top: var(--sg-gutter-y);
-}
-
-
-
-.sg-row {
-    @include make-row();
-
-    > * {
-      @include make-col-ready();
-    }
-}
-
-@include make-grid-columns();
-
-
-/* Containers */
-
-@mixin make-container($gutter: $container-padding-x) {
-  --sg-gutter-x: #{$gutter};
-  --sg-gutter-y: 0;
-  width: 100%;
-  padding-right: calc(var(--sg-gutter-x) * .5); // stylelint-disable-line function-disallowed-list
-  padding-left: calc(var(--sg-gutter-x) * .5); // stylelint-disable-line function-disallowed-list
-  margin-right: auto;
-  margin-left: auto;
-}
-
-.sg-container,             // Single container class with breakpoint max-widths
-.sg-container-fluid {      // 100% wide container at all breakpoints
-  @include make-container();
-}
-// Responsive containers that are 100% wide until a breakpoint
-@each $breakpoint, $container-max-width in $container-max-widths {
-  .sg-container-#{$breakpoint} {
-    @extend .sg-container-fluid;
-  }
-
-  @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
-    %responsive-sg-container-#{$breakpoint} {
-      max-width: $container-max-width;
-    }
-
-    // Extend each breakpoint which is smaller or equal to the current breakpoint
-    $extend-breakpoint: true;
-
-    @each $name, $width in $grid-breakpoints {
-      @if ($extend-breakpoint) {
-        .sg-container#{breakpoint-infix($name, $grid-breakpoints)} {
-          @extend %responsive-sg-container-#{$breakpoint};
-        }
-
-        // Once the current breakpoint is reached, stop extending
-        @if ($breakpoint == $name) {
-          $extend-breakpoint: false;
-        }
-      }
-    }
-  }
-}