stargazer-ui 1.2.0 → 1.2.1

package/src/styles/_NavBar.scss

@@ -0,0 +1,116 @@
+.sg-navbar {
+  // scss-docs-start sg-navbar-css-vars
+  --sg-navbar-bg: #{$sg-nav-color};
+  --sg-navbar-text-color: #{$sg-link-hover-color};
+  --sg-navbar-link-color: #{$sg-link-color};
+  --sg-navbar-hover-color: #{$sg-link-hover-color};
+  --sg-navbar-disabled-color: #{$sg-link-disable-color};
+  --sg-navbar-active-color: #{$sg-link-hover-color};
+
+  --sg-navbar-zindex: $zindex-navbar;
+  // scss-docs-end sg-navbar-css-vars
+  background-color: var(--sg-navbar-bg);
+  background: linear-gradient(71deg, 
+            var(--sg-navbar-bg), 
+            color-mix(in srgb, var(--sg-navbar-bg), var(--sg-navbar-hover-color) 5%),
+            var(--sg-navbar-bg),
+            color-mix(in srgb, var(--sg-navbar-bg), var(--sg-navbar-hover-color) 5%),
+            var(--sg-navbar-bg)
+        );
+
+  width: 100%;
+  min-height: fit-content;
+  z-index: $zindex-navbar;
+  box-sizing: border-box;
+  border: 2px outset color-mix(in srgb, white 5%, var(--sg-navbar-bg));
+  border-bottom: 2px solid var(--sg-navbar-link-color);
+
+  display: flex;
+  flex-wrap: wrap; // allow us to do the line break for collapsing content
+  align-items: center;
+  padding: 0.5rem 0rem;
+
+  position: sticky;
+  top: 0;
+  left: 0;
+
+  // Because flex properties aren't inherited
+  %container-flex-properties {
+    display: flex;
+    flex-wrap: inherit;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  > .sg-container,
+  > .sg-container-fluid {
+    @extend %container-flex-properties;
+  }
+
+  @each $breakpoint, $container-max-width in $container-max-widths {
+    > .container-#{$breakpoint} {
+      @extend %container-flex-properties;
+    }
+  }
+}
+
+.sg-navbar-brand {
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+    margin-inline: 1rem;
+    margin-block: auto;
+    color: var(--sg-navbar-link-color);
+    text-decoration: none;
+    white-space: nowrap;
+  
+    &:hover,
+    &:focus {
+      color: var(--sg-navbar-hover-color);
+      text-decoration: none;
+    }
+}
+
+.sg-navbar-nav {
+  // scss-docs-start sg-navbar-nav-css-vars
+  --nav-link-padding-x: 0;
+  --nav-link-padding-y: 0.5rem;
+  --nav-link-color: $sg-link-color;
+  --nav-link-hover-color: $sg-link-hover-color;
+  --nav-link-disabled-color: $sg-link-disable-color;
+  // scss-docs-end sg-navbar-nav-css-vars
+  margin: 0;
+  display: flex;
+  flex-direction: row; // cannot use `inherit` to get the `.sg-navbar`s value
+  flex-wrap: wrap;
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+
+  .show > .nav-link,
+  .nav-link.active {
+    color: var(--sg-navbar-active-color);
+  }
+
+  .dropdown-menu {
+    position: static;
+  }
+}
+  
+.sg-navbar-text {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  color: var(--sg-navbar-active-color);
+
+  a,
+  a:hover,
+  a:focus  {
+    color: var(--sg-navbar-active-color);
+  }
+}
+
+.nav-item {
+  a {
+    color: white;
+    text-decoration: none;
+  }
+}

package/src/styles/_NavDropdown.scss

@@ -0,0 +1,34 @@
+.sg-nav-dropdown-toggle {
+    background-color: transparent;//#4c5055;
+    display: block;
+    padding: 0.5em 1em;
+    color: var(--sg-navbar-link-color);
+    text-decoration: none;
+    border-radius: 0;
+    border: 1px solid transparent;
+    cursor: pointer;
+    //transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
+  
+    &:hover,
+    &:focus {
+        background-color: transparent;//color.mix(black, #4c5055, 15%);
+        border: 1px solid transparent;
+        color: var(--sg-navbar-hover-color);
+    }
+    &:active {
+        background-color: transparent;//color.mix(black, #4c5055, 20%);
+    }
+    &:focus-visible, &:focus {
+        border: 1px solid transparent;
+    }
+    &[aria-expanded="true"] {
+        color:var(--sg-navbar-hover-color);
+    }
+  
+    // Disabled state lightens text
+    &.disabled {
+        color: rgba(0, 0, 0, 0.24);
+        pointer-events: none;
+        cursor: default;
+    }
+}

package/src/styles/_OffCanvas.scss

@@ -0,0 +1,260 @@
+@use "sass:color";
+@use "mixins";
+
+$sg-offCanvas-margin: 0.5em;
+$sg-offCanvas-background-color: #2e3236;
+$sg-offCanvas-text-color: white;
+$sg-offCanvas-radius: 0.5em;
+$sg-offCanvas-transition: transform .3s ease-out;
+
+.sg-offCanvas-open {
+  overflow: hidden;
+}
+
+.sg-offCanvas-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: $zindex-modal-backdrop;
+  width: 100vw;
+  height: 100vh;
+  background-color: black;
+
+  // Fade for backdrop
+  &.fadeIn {
+    animation-name: fadeInBackdrop;
+    animation-duration: .3s;
+    animation-timing-function: ease-out;
+    animation-fill-mode: forwards;
+  }
+  &.fadeOut {
+    animation-name: fadeOutBackdrop;
+    animation-duration: .3s;
+    animation-timing-function: ease-out;
+    animation-fill-mode: forwards;
+  }
+}
+@keyframes fadeInBackdrop {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0.5;
+  }
+}
+@keyframes fadeOutBackdrop {
+  0% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.sg-offCanvas { //scroll ocntainer
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: $zindex-modal;
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  // Prevent Chrome on Windows from adding a focus outline. For details, see
+  // https://github.com/twbs/bootstrap/pull/10951.
+  outline: 0;
+  // We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
+  // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
+  // See also https://github.com/twbs/bootstrap/issues/17695
+}
+
+.sg-offCanvas-dialog { //shell to position offCanvas with bottom-padding
+  z-index: calc($zindex-modal + 1);
+  position: relative;
+  width: auto;
+  max-height: 100vh;
+  // allow clicks to pass through for custom click handling to close offCanvas
+  pointer-events: none;
+
+  // slide down animation
+  .sg-offCanvas.fadeIn & {
+    animation-name: fadeIn;
+    animation-duration: .6s;
+    animation-timing-function: ease-out;
+    animation-fill-mode: forwards;
+    //transition: $sg-offCanvas-transition;
+    //transform: translate(0, -50px);
+  }
+  .sg-offCanvas.fadeOut & {
+    animation-name: fadeOut;
+    animation-duration: .3s;
+    animation-timing-function: ease-out;
+    animation-fill-mode: forwards;
+    //transition: $sg-offCanvas-transition;
+    //transform: translate(0, -50px);
+  }
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  
+  @keyframes fadeOut {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+
+  // make offCanvas flash onBlur if static backdrop
+}
+
+.sg-offCanvas-content {
+    --sg-offcanvas-size: 478px;
+    position: fixed;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    max-width: 100%; // Ensure `.offCanvas-content` extends the full width of the parent `.offCanvas-dialog`
+    max-height: 100%;
+    // counteract the pointer-events: none; in the .offCanvas-dialog
+    color: $sg-offCanvas-text-color;
+    pointer-events: auto;
+    background-color: $sg-offCanvas-background-color;
+    background-clip: padding-box;
+    // Remove focus outline from opened offCanvas
+    outline: 0;
+    //visibility: hidden;
+    transition: transform 0.3s ease-in-out;
+
+    &.sg-offcanvas-start {
+        top: 0;
+        left: 0;
+        width: var(--sg-offcanvas-size);
+        border-right: 1px solid $sg-offCanvas-background-color;
+        transform: translateX(-100%);
+    }
+
+    &.sg-offcanvas-end {
+        top: 0;
+        right: 0;
+        width: var(--sg-offcanvas-size);
+        border-left: 1px solid $sg-offCanvas-background-color;
+        transform: translateX(100%);
+    }
+
+    &.sg-offcanvas-top {
+        top: 0;
+        right: 0;
+        left: 0;
+        height: var(--sg-offcanvas-size);
+        max-height: 100%;
+        border-bottom: 1px solid $sg-offCanvas-background-color;
+        transform: translateY(-100%);
+    }
+
+    &.sg-offcanvas-bottom {
+        right: 0;
+        left: 0;
+        height: var(--sg-offcanvas-size);
+        max-height: 100%;
+        border-top: 1px solid $sg-offCanvas-background-color;
+        transform: translateY(100%);
+    }
+    &.sg-slide-in {
+        transform: none;
+    }
+    &.sg-offCanvas-static {
+        transition: $sg-offCanvas-transition;
+        transform: scaleX(1.02);
+    }
+
+
+    .sg-offCanvas-header {
+        display: flex;
+        flex-shrink: 0;
+        align-items: center;
+        justify-content: space-between; // Put offCanvas header elements (title and dismiss) on opposite ends
+        padding: 1em;
+        //border-bottom: 1px solid $sg-offCanvas-text-color;  
+        .sg-button-close {
+        padding: 0.5em 0.5em;
+        margin: calc(-.5 * $sg-offCanvas-margin) calc(-.5 * $sg-offCanvas-margin) calc(-.5 * $sg-offCanvas-margin) auto;
+        }
+    }
+    .sg-offCanvas-title {
+        margin-bottom: 0;
+    }
+    .sg-offCanvas-body {
+        position: relative;
+        flex: 1 1 auto;
+        padding: 1em;
+        background-color: color.mix(white,$sg-offCanvas-background-color, 10%);
+        overflow: auto;
+    }
+    /*
+    &.sg-offCanvas-footer {
+        display: flex;
+        flex-shrink: 0;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: flex-end;
+        padding: 0.75em;
+        background-color: $sg-offCanvas-background-color;
+        border-top: 1px solid $sg-offCanvas-text-color;
+        @include border-bottom-radius($sg-offCanvas-radius);
+    
+        gap: 0.5em;
+    }
+    */
+}
+
+/*
+$offCanvas-lg: 800px !default;
+$offCanvas-xl: 1140px !default;
+
+$container-max-widths: ( sm: 540px, md: 720px, lg: 960px, xl: 1140px, xxl: 1320px ) !default;
+$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px ) !default;
+
+@each $breakpoint, $value in $grid-breakpoints {
+  @if $breakpoint == "xs" {
+    @media (max-width: 575px) {
+      .sg-offCanvas-dialog {
+        margin: 0.5em;
+      }
+    }
+  }
+  @if $breakpoint == "sm" {
+    @media (min-width: 576px) {
+      .sg-offCanvas-dialog {
+        max-width: 500px;
+        margin-right: auto;
+        margin-left: auto;
+      }
+      .sg-offCanvas-sm {
+        max-width: 300px
+      }
+    }
+  }
+  @else if $breakpoint == "lg" {
+    @media (min-width: 992px) {
+      .offCanvas-lg, .offCanvas-xl {
+        max-width: 800px;
+      }
+    }
+  }
+  @else if $breakpoint == "xl" {
+    @media (min-width: 1200px) {
+      .offCanvas-xl {
+        max-width: 1140px;
+      }
+    }
+  }
+}
+*/

package/src/styles/_OverLay.scss

@@ -0,0 +1,56 @@
+.sg-overlay-wrapper {
+    max-width: 100%; 
+    max-height: 100%;
+    z-index: $zindex-popover;
+}
+
+.sg-overlay-arrow {
+    --width: 15px;
+    --height: 20px;
+    //points="1,6 1,16, 13,15.5, 13,20, 29,10, 13,1 13,6" 
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20"> <polygon points="1,1 1,19, 14,10" fill="#{$sg-arrow-fill}" stroke-width="1.5" stroke="#{$sg-arrow-border}" /> </svg>');
+    background-repeat: no-repeat no-repeat;
+    background-position: center center;
+    background-size: cover;
+    height: var(--height);
+    width: var(--width);
+    z-index: $zindex-popover;
+    &.overlay-position-right {
+        transform: rotate(180deg);
+    }
+    &.overlay-position-left {
+        transform: rotate(0deg);
+    }
+    &.overlay-position-top {
+        transform: rotate(90deg);
+    }
+    &.overlay-position-bottom {
+        transform: rotate(270deg);
+    }
+}
+.sg-tooltip-arrow {
+    --width: 10px;
+    --heigth: 15px;
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 15 15"> <polygon points="1,1 1,14, 9,7" fill="#{$sg-arrow-fill}" stroke-width="1.5" stroke="#{$sg-arrow-border}" /> </svg>');
+}
+
+.sg-tooltip-wrapper {
+    --input-text-color: #{$input-text-color};
+    --input-background-color: #{$input-background-color};
+    --input-border-color: #{$input-border-color};
+    font-size: 0.8rem;
+    > * {
+        font-size: 0.8rem;
+    }
+    display: flex;
+    flex-wrap: wrap;
+    max-width: 12rem;
+    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;
+}
+
+//<svg width="40" height="24" xmlns="http://www.w3.org/2000/svg"> <defs> <marker id="arrowhead" markerWidth="2" markerHeight="4" refX="0" refY="2" orient="auto"><polygon points="0 1, 1.8 2, 0 3" /></marker></defs> <line x1="0" y1="12" x2="25" y2="12" style="fill:rgb(0,0,255);stroke-width:8;stroke:rgb(0,0,0)" marker-end="url(#arrowhead)"/> </svg>

package/src/styles/_Popout.scss

@@ -0,0 +1,75 @@
+.sg-moveable-popout {
+    --popout-index: #{$zindex-popover};
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    border-radius: 0.375em;
+
+    padding: 0;
+    margin: 0;
+
+    border: 1px solid white;
+    width: 15rem;
+    min-width: min(18rem, 100%);
+    min-height: min(9rem, 100%);
+
+    box-shadow: 0 0 0.5rem #ffffff60;
+    color: white;
+
+    overflow: hidden;
+
+    z-index: var(--popout-index);
+    & .sg-popout-header {
+        user-select: inherit;
+        margin-bottom: 0;
+        padding: 0.25em 0.5em;
+
+        background-color: $card-header-bg-color;
+        border-bottom: 1px solid $card-border-color;
+        > *{
+            margin:0;
+        }
+
+        &:first-child {
+            border-radius: 0.375em 0.375em 0 0;
+        }
+    }
+    &[data-move="true"] {
+        touch-action: none;
+        & .sg-popout-header {
+            cursor: move;
+        }
+    }
+    & .sg-popout-body {
+        flex: 1 1 auto;
+        padding: 0.5em;
+        user-select: inherit;
+        background-color: color-mix(in srgb, white 4%, $card-header-bg-color);
+    }
+    & .sg-popout-footer {
+        user-select: inherit;
+        padding: 0.25em 0.5em;
+
+        background-color: $card-header-bg-color;
+        border-top: 1px solid $card-border-color;
+        &:last-child {
+            border-radius: 0 0 0.375em 0.375em;
+        }
+    }
+    & .sg-popout-text:last-child {
+        margin-bottom: 0;
+    }
+    &[data-resize="true"] {
+        resize: both;
+        &::before {
+            content: "";
+            position: absolute;
+            bottom: 0;
+            right: 0;
+            z-index: calc( var(--popout-index) + 1 );
+            width: 1em;
+            height: 1em;
+            background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="208" y1="128" x2="128" y2="208" fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="192" y1="40" x2="40" y2="192" fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>');
+        }
+    }
+}

package/src/styles/_Spinner.scss

@@ -0,0 +1,19 @@
+.sg-spinner {
+    display: inline-block;
+    border-radius: 50%;
+    width: 1em;
+    height: 1em;
+    border: 0.2em solid white;
+    border-right-color: transparent;
+    margin: auto;
+    animation-name: spinny;
+    animation-duration: 0.5s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+}
+
+@keyframes spinny {
+    100% {
+        transform: rotate(360deg);
+    }
+}

package/src/styles/_Table.scss

@@ -0,0 +1,34 @@
+.sg-table {
+    --sg-table-padding: $sg-table-padding;
+    width: 100%;
+    margin-bottom: 1rem;
+    color: black;
+    vertical-align: top;
+    border-color: black;
+
+    > :not(caption) > * > * {
+        padding: $sg-table-padding $sg-table-padding;
+        background-color: transparent;
+        border-bottom-width: 1px;
+        box-shadow: inset 0 0 0 9999px transparent;
+    }
+
+    > tbody {
+    vertical-align: inherit;
+    }
+
+    > thead {
+    vertical-align: bottom;
+    }
+}
+
+.sg-caption-top {
+    caption-side: top;
+}
+
+.sg-table-sm {
+    // stylelint-disable-next-line selector-max-universal
+    > :not(caption) > * > * {
+      padding: $sg-table-padding-sm $sg-table-padding-sm;
+    }
+}