stargazer-ui 1.1.0 → 1.2.1

package/src/styles/_InputGroup.scss

@@ -0,0 +1,71 @@
+.sg-input-group {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: stretch;
+    width: 100%;
+    //padding-bottom: 0.5rem;
+    > .sg-form-control,
+    > .sg-form-control-plaintext,
+    > .sg-form-select,
+    > .sg-form-select-tag
+    {
+        flex: 1 1 auto;
+        width: 1%;
+        min-width: 5rem;
+    }
+
+    > .sg-button, > button {
+        position: relative;
+        z-index: 2;
+    }
+
+    > :not(:first-child):not(:last-child) {
+        border-radius: 0;
+    }
+    > :first-child {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+    > :last-child {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+}
+.sg-input-group-text {
+    display: flex;
+    flex: 0 1 auto;
+    overflow: auto;
+    width: fit-content;
+    max-width: 8rem;
+    align-items: center;
+    text-align: center;
+    font-size: 0.85rem;
+
+    padding: $input-padding-x $input-padding-y;
+
+    white-space: nowrap;
+
+    background-color: $input-border-color;
+    color: $input-text-color;
+    border: $input-border-width outset $input-border-color;
+    border-right-width: 0;
+    border-radius: $input-border-radius;
+}
+.sg-form-control + .sg-input-group-text {
+    border-left-width: 0;
+    border-right-width: $input-border-width;
+}
+
+.sg-input-group-grid {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    align-items: stretch;
+    padding-bottom: 0.5rem;
+    > .sg-input-group, > .sg-form-floating {
+        flex: 1 1 auto;
+        width: 1%;
+        min-width: 13rem;
+        padding-bottom: 0;
+    }
+}

package/src/styles/_List.scss

@@ -0,0 +1,62 @@
+.sg-list {
+    --padding: 0rem;
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    padding-left: var(--padding);
+
+    span {
+        display: list-item;
+    }
+
+    .sg-list {
+        --padding: 0.5rem;
+    }
+}
+
+
+.sg-sublist {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+}
+
+.sg-list-label {
+    background-color: black;
+}
+
+.sg-list-item {
+    margin: 0;
+    background-color: black;
+
+    > * {
+        user-select: inherit;
+    }
+}
+
+.moving {
+    position:absolute;
+    top: 0;
+    left: 0;
+    z-index: $zindex-popover;
+}
+
+.phantom {
+    position: relative;
+    display: list-item;
+
+    border: 1px solid transparent;
+
+    margin-left: calc( (var(--depth) - 1) * 0.5rem );
+
+    transition: all 0.2s ease-in-out;
+    outline: 2px solid red;
+
+    animation: size 0.3s ease-in-out
+}
+
+@keyframes size {
+    from {
+        height: 10px;
+    }
+}

package/src/styles/_Modal.scss

@@ -0,0 +1,234 @@
+@use "sass:color";
+@use "mixins";
+
+$sg-modal-margin: 0.5rem;
+$sg-modal-background-color: $sg-body-bg;// #2e3236;
+$sg-modal-text-color: white;
+$sg-modal-radius: 0.5rem;
+$sg-modal-transition: transform .3s ease-out;
+
+.sg-modal-tag::backdrop {
+    z-index: calc($zindex-modal);
+    background: hsla(0, 0%, 0%);
+    opacity: 0.75;
+    animation-name: fadeInBackdrop;
+    animation-duration: 0.3s;
+    animation-timing-function: ease-in-out;
+    animation-fill-mode: forwards;
+    &.close {
+      background: transparent;
+      opacity: 0;
+      animation-name: fadeInBackdrop;
+      animation-duration: 0.3s;
+      animation-timing-function: ease-in-out;
+      animation-fill-mode: backwards;
+    }
+}
+@keyframes fadeInBackdrop {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 0.5;
+  }
+}
+@keyframes fadeOutBackdrop {
+  from {
+    opacity: 0.5;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+.sg-modal-tag { //shell to position modal with bottom-padding
+  --height: fit-content;
+  z-index: calc($zindex-modal + 1);
+
+  padding: 0;
+  top: 10%;
+  height: var(--height);
+  max-height: 80%;
+  margin-right: auto;
+  margin-left: auto;
+
+  color: $sg-modal-text-color;
+  background-color: $sg-modal-background-color;
+  background-clip: padding-box;
+  border: 2px outset color-mix(in oklab, $sg-modal-background-color, currentColor 60%);// 1px solid $sg-modal-text-color;
+  //border-radius: $sg-modal-radius;
+  flex-direction: column;
+  overflow: auto;
+
+  &[open=""] {
+    display: grid;
+    width: 100%;
+    grid-template-rows: [header-start] auto [header-end body-start] 1fr [body-end footer-start] auto [footer-end] ;// auto 1fr auto;
+    animation-name: slide-in-up;
+    animation-duration: .3s;
+    animation-timing-function: ease-in-out;
+    animation-fill-mode: forwards;
+  }
+
+  &.close {
+    animation: scale-down 0.3s ease-in-out;
+    animation-fill-mode: forwards;
+  }
+
+  > form {
+    display: grid;
+    grid-template-rows: [body-start] 1fr [body-end footer-start] auto [footer-end];
+    @supports (grid-template-rows: subgrid) {
+      grid-row-start: body-start;
+      grid-row-end: footer-end;
+      grid-template-rows: subgrid;
+    }
+    .sg-modal-body {
+      grid-row: body;
+    }
+    .sg-moda-footer {
+      grid-row: footer;
+    }
+  }
+}
+@keyframes scale-down {
+  to { transform: translateY(10%); opacity: 0;}
+}
+@keyframes slide-in-up {
+  from {transform: translateY(-10%); opacity: 0.5;}
+}
+
+
+.sg-modal-fill {
+  margin: auto;
+  top: 0;
+  height: 100%;
+  width: 100%;
+}
+
+.sg-modal-header {
+  grid-row: header;// 1 / span 1;
+  display: flex;
+  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);
+
+  margin: 0;
+
+  .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: 0;
+}
+.sg-modal-body {
+  grid-row: body;// 2 / span 1;
+  position: relative;
+  padding: 1rem;
+  background-color: color-mix(in oklab, $sg-modal-background-color, currentColor 5%);
+
+  min-height: fit-content;
+  
+  overflow: auto;
+  p {
+    margin: 0;
+  }
+}
+.sg-modal-footer {
+  grid-row: footer;// 3 / span 1;
+  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-background-color; //$sg-modal-text-color;
+  //@include border-bottom-radius($sg-modal-radius);
+
+  gap: 0.5rem;
+}
+
+
+$modal-sm: 300px !default;
+$modal-md: 500px !default;
+$modal-lg: 700px !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;
+//300, 500, 800
+.sg-modal-sm {
+  max-width: $modal-sm;
+}
+.sg-modal-md {
+  max-width: $modal-md;
+}
+.sg-modal-lg {
+  max-width: $modal-lg;
+}
+@media (max-width: 324px) {
+  .sg-modal-tag {
+    margin: auto;
+    top: 0;
+    width: 100%;
+  }
+}
+@media (min-width: 325px) and (max-width: 575px) {
+  .sg-modal-md, .sg-modal-lg {
+    max-width: $modal-sm;
+  }
+}
+@media (min-width: 576px) and (max-width:767px) {
+  .sg-modal-lg {
+    max-width: $modal-md;
+  }
+}
+@media (min-width: 768px) {
+  .sg-modal-lg {
+    max-width: $modal-lg;
+  }
+}
+
+
+
+/*
+@each $breakpoint, $value in $grid-breakpoints {
+  @if $breakpoint == "xs" {
+    @media (max-width: 575px) {
+      .sg-modal-tag {
+        margin: 0.5rem auto;
+      }
+    }
+  }
+  @if $breakpoint == "sm" {
+    @media (min-width: 576px) {
+      .sg-modal-tag {
+        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/_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;
+}