stargazer-ui 1.5.21 → 1.5.23

package/src/styles/_Grid.scss

@@ -0,0 +1,178 @@
+@use 'sass:math';
+
+$grid-columns: 12 !default;
+$grid-gutter-width: 1.5rem !default;
+$grid-row-columns: 6 !default;
+$container-padding-x: $grid-gutter-width !default;
+
+
+@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
+    @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
+  }
+@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
+    $min: map-get($breakpoints, $name);
+    @return if($min != 0, $min, null);
+}
+
+@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
+    $min: breakpoint-min($name, $breakpoints);
+    @if $min {
+        @media (min-width: $min) {
+            @content;
+        }
+    } @else {
+        @content;
+    }
+}
+@mixin row-cols($count) {
+    > * {
+      flex: 0 0 auto;
+      width: math.div(100%, $count);
+    }
+}
+@mixin make-col-auto() {
+    flex: 0 0 auto;
+    width: auto;
+}
+@mixin make-col($size: false, $columns: $grid-columns) {
+    @if $size {
+      flex: 0 0 auto;
+      width: percentage(math.div($size, $columns));
+  
+    } @else {
+      flex: 1 1 0;
+      max-width: 100%;
+    }
+}
+@mixin make-col-offset($size, $columns: $grid-columns) {
+  $num: math.div($size, $columns);
+  margin-left: if($num == 0, 0, percentage($num));
+}
+
+@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
+  @each $breakpoint in map-keys($breakpoints) {
+    $infix: breakpoint-infix($breakpoint, $breakpoints);
+
+    @include media-breakpoint-up($breakpoint, $breakpoints) {
+      // Provide basic `.col-{bp}` classes for equal-width flexbox columns
+      .sg-col#{$infix} {
+        flex: 1 0 0%; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
+      }
+
+      .sg-row-cols#{$infix}-auto > * {
+        @include make-col-auto();
+      }
+
+      @if $grid-row-columns > 0 {
+        @for $i from 1 through $grid-row-columns {
+          .sg-row-cols#{$infix}-#{$i} {
+            @include row-cols($i);
+          }
+        }
+      }
+
+      .sg-col#{$infix}-auto {
+        @include make-col-auto();
+      }
+      
+      @if $columns > 0 {
+        @for $i from 1 through $columns {
+          .sg-col#{$infix}-#{$i} {
+            @include make-col($i, $columns);
+          }
+        }
+        
+        
+        // `$columns - 1` because offsetting by the width of an entire row isn't possible
+        @for $i from 0 through ($columns - 1) {
+          @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
+            .sg-offset#{$infix}-#{$i} {
+              @include make-col-offset($i, $columns);
+            }
+          }
+        }
+      }
+      
+    }
+  }
+}
+@mixin make-row($gutter: $grid-gutter-width) {
+    --sg-gutter-x: #{$gutter};
+    --sg-gutter-y: 0;
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: calc(-1 * var(--sg-gutter-y)); // stylelint-disable-line function-disallowed-list
+    margin-right: calc(-.5 * var(--sg-gutter-x)); // stylelint-disable-line function-disallowed-list
+    margin-left: calc(-.5 * var(--sg-gutter-x)); // stylelint-disable-line function-disallowed-list
+}
+  
+@mixin make-col-ready() {
+    // Add box sizing if only the grid is loaded
+    // Prevent columns from becoming too narrow when at smaller grid tiers by
+    // always setting `width: 100%;`. This works because we set the width
+    // later on to override this initial width.
+    flex-shrink: 0;
+    width: 100%;
+    max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
+    padding-right: calc(var(--sg-gutter-x) * .5); // stylelint-disable-line function-disallowed-list
+    padding-left: calc(var(--sg-gutter-x) * .5); // stylelint-disable-line function-disallowed-list
+    margin-top: var(--sg-gutter-y);
+}
+
+
+
+.sg-row {
+    @include make-row();
+
+    > * {
+      @include make-col-ready();
+    }
+}
+
+@include make-grid-columns();
+
+
+/* Containers */
+
+@mixin make-container($gutter: $container-padding-x) {
+  --sg-gutter-x: #{$gutter};
+  --sg-gutter-y: 0;
+  width: 100%;
+  padding-right: calc(var(--sg-gutter-x) * .5); // stylelint-disable-line function-disallowed-list
+  padding-left: calc(var(--sg-gutter-x) * .5); // stylelint-disable-line function-disallowed-list
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.sg-container,             // Single container class with breakpoint max-widths
+.sg-container-fluid {      // 100% wide container at all breakpoints
+  @include make-container();
+}
+// Responsive containers that are 100% wide until a breakpoint
+@each $breakpoint, $container-max-width in $container-max-widths {
+  .sg-container-#{$breakpoint} {
+    @extend .sg-container-fluid;
+  }
+
+  @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
+    %responsive-sg-container-#{$breakpoint} {
+      max-width: $container-max-width;
+    }
+
+    // Extend each breakpoint which is smaller or equal to the current breakpoint
+    $extend-breakpoint: true;
+
+    @each $name, $width in $grid-breakpoints {
+      @if ($extend-breakpoint) {
+        .sg-container#{breakpoint-infix($name, $grid-breakpoints)} {
+          @extend %responsive-sg-container-#{$breakpoint};
+        }
+
+        // Once the current breakpoint is reached, stop extending
+        @if ($breakpoint == $name) {
+          $extend-breakpoint: false;
+        }
+      }
+    }
+  }
+}

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.5;
+    animation-name: fade-in-backdrop;
+    animation-duration: 0.3s;
+    animation-timing-function: ease-in-out;
+    animation-fill-mode: forwards;
+    &.close {
+      background: transparent;
+      opacity: 0;
+      animation-name: fade-out-backdrop;
+      animation-duration: 0.3s;
+      animation-timing-function: ease-in-out;
+      animation-fill-mode: backwards;
+    }
+}
+@keyframes fade-in-backdrop {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 0.5;
+  }
+}
+@keyframes fade-out-backdrop {
+  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: fade-in-modal;
+    animation-duration: .3s;
+    animation-timing-function: ease-in-out;
+    animation-fill-mode: forwards;
+  }
+
+  &.close {
+    animation: fade-out-modal 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 fade-out-modal {
+  to { transform: translateY(10%); opacity: 0;}
+}
+@keyframes fade-in-modal {
+  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;
+      }
+    }
+  }
+}
+*/