stargazer-ui 1.2.1 → 1.2.2

package/src/styles/_NavBar.scss

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

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

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

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

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

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

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