stargazer-ui 1.5.11 → 1.5.13

package/src/styles/_ModalOld.scss

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

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

@@ -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,33 @@
+.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

@@ -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;
+      }
+    }
+  }
+}
+*/