stargazer-ui 1.2.0 → 1.2.1

package/src/styles/_Card.scss

@@ -0,0 +1,166 @@
+.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

@@ -0,0 +1,51 @@
+@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

@@ -0,0 +1,132 @@
+@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

@@ -0,0 +1,120 @@
+@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

@@ -0,0 +1,56 @@
+.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

@@ -0,0 +1,7 @@
+@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

@@ -0,0 +1,178 @@
+@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;
+        }
+      }
+    }
+  }
+}