stargazer-ui 1.5.13 → 1.5.15

package/src/styles/_Grid.scss

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

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

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

@@ -1,234 +0,0 @@
-@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;
-      }
-    }
-  }
-}
-*/