stargazer-ui 1.5.13 → 1.5.15

package/src/styles/_ModalOld.scss

@@ -1,242 +0,0 @@
-@use "sass:color";
-@use "mixins";
-
-$sg-modal-margin: 0.5rem;
-$sg-modal-background-color: #2e3236;
-$sg-modal-text-color: white;
-$sg-modal-radius: 0.5rem;
-$sg-modal-transition: transform .3s ease-out;
-/*
-.sg-modal-open {
-  overflow: hidden;
-}
-
-.sg-modal-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-modal { //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-modal-dialog { //shell to position modal with bottom-padding
-  z-index: calc($zindex-modal + 1);
-  position: relative;
-  width: auto;
-  margin: calc(4 * $sg-modal-margin);
-  // allow clicks to pass through for custom click handling to close modal
-  pointer-events: none;
-
-  // slide down animation
-  .sg-modal.fadeIn & {
-    animation-name: fadeIn;
-    animation-duration: .3s;
-    animation-timing-function: ease-out;
-    animation-fill-mode: forwards;
-    //transition: $sg-modal-transition;
-    //transform: translate(0, -50px);
-  }
-  .sg-modal.fadeOut & {
-    animation-name: fadeOut;
-    animation-duration: .3s;
-    animation-timing-function: ease-out;
-    animation-fill-mode: forwards;
-    //transition: $sg-modal-transition;
-    //transform: translate(0, -50px);
-  }
-  @keyframes fadeIn {
-    0% {
-      opacity: 0;
-      top: -50px;
-    }
-    100% {
-      opacity: 1;
-      top: 0px;
-    }
-  }
-  
-  @keyframes fadeOut {
-    0% {
-      opacity: 1;
-      top: 0px;
-    }
-    100% {
-      opacity: 0;
-      top: -50px;
-    }
-  }
-
-  // make modal flash onBlur if static backdrop
-  .sg-modal.sg-modal-static & {
-    transition: $sg-modal-transition;
-    transform: scale(1.02);
-  }
-}
-
-.sg-modal-dialog-scrollable {
-  height: calc(100% - $sg-modal-margin * 2);
-
-  .sg-modal-content {
-    max-height: 100%;
-    overflow: hidden;
-  }
-
-  .sg-modal-body {
-    overflow-y: auto;
-  }
-}
-.sg-modal-dialog-centered {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100dvh;
-  max-width: 100dvw;
-  margin:0;
-}
-
-.sg-modal-content {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
-  // counteract the pointer-events: none; in the .modal-dialog
-  color: $sg-modal-text-color;
-  pointer-events: auto;
-  background-color: $sg-modal-background-color;
-  background-clip: padding-box;
-  border: 1px solid $sg-modal-text-color;
-  border-radius: $sg-modal-radius;
-  // Remove focus outline from opened modal
-  outline: 0;
-}
-
-.sg-modal-header {
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
-  padding: 0.75rem;
-  border-bottom: 1px solid $sg-modal-text-color;
-  @include border-top-radius($sg-modal-radius);
-
-  .sg-button-close {
-    padding: 0.5rem 0.5rem;
-    margin: calc(-.5 * $sg-modal-margin) calc(-.5 * $sg-modal-margin) calc(-.5 * $sg-modal-margin) auto;
-  }
-}
-.sg-modal-title {
-  margin-bottom: 0;
-}
-
-.sg-modal-body {
-  position: relative;
-  flex: 1 1 auto;
-  padding: 1rem;
-  background-color: color.mix(white,$sg-modal-background-color, 10%);
-}
-.sg-modal-footer {
-  display: flex;
-  flex-shrink: 0;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: flex-end;
-  padding: 0.75rem;
-  background-color: $sg-modal-background-color;
-  border-top: 1px solid $sg-modal-text-color;
-  @include border-bottom-radius($sg-modal-radius);
-
-  gap: 0.5rem;
-}
-
-$modal-lg: 800px !default;
-$modal-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-modal-dialog {
-        margin: 0.5rem;
-      }
-    }
-  }
-  @if $breakpoint == "sm" {
-    @media (min-width: 576px) {
-      .sg-modal-dialog {
-        max-width: 500px;
-        margin-right: auto;
-        margin-left: auto;
-      }
-      .sg-modal-sm {
-        max-width: 300px
-      }
-    }
-  }
-  @else if $breakpoint == "lg" {
-    @media (min-width: 992px) {
-      .modal-lg, .modal-xl {
-        max-width: 800px;
-      }
-    }
-  }
-  @else if $breakpoint == "xl" {
-    @media (min-width: 1200px) {
-      .modal-xl {
-        max-width: 1140px;
-      }
-    }
-  }
-}
-*/

package/src/styles/_Nav.scss

@@ -1,36 +0,0 @@
-.sg-nav {
-  display: flex;
-  flex-wrap: wrap;
-  padding-left: 0;
-  margin-bottom: 0;
-  list-style: none;
-}
-  
-.sg-nav-link {
-  padding: 0.25rem 0.5rem;
-  text-decoration: none;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-block: auto;
-  color: var(--sg-navbar-link-color);
-  font-size: 0.85rem;
-
-  &:hover {
-    color: var(--sg-navbar-hover-color);
-  }
-  // Disabled state lightens text
-  &.disabled {
-    pointer-events: none;
-    cursor: default;
-  }
-}
-[data-navdropdown="true"] .sg-nav-link {
-  color: var(--sg-navbar-hover-color);
-  font-size: 0.85rem;
-  text-decoration: none;
-}
-
-.sg-nav-item {
-  margin-block: auto;
-}

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,33 +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: none;
-    cursor: pointer;
-    font-family: inherit;
-    //transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
-  
-    &:hover {
-        background-color: transparent;//color.mix(black, #4c5055, 15%);
-        color: var(--sg-navbar-hover-color);
-    }
-    &:active {
-        background-color: transparent;//color.mix(black, #4c5055, 20%);
-    }
-    &:focus-visible, &:focus {
-        color: var(--sg-navbar-hover-color);
-    }
-    &[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;
-      }
-    }
-  }
-}
-*/