stargazer-ui 1.5.13 → 1.5.14

package/src/styles/_OverLay.scss

@@ -1,64 +0,0 @@
-.sg-overlay-wrapper {
-    max-width: 100%; 
-    max-height: 100%;
-    z-index: $zindex-popover;
-}
-
-.sg-overlay-arrow {
-    --width: 15px;
-    --height: 20px;
-    //points="1,6 1,16, 13,15.5, 13,20, 29,10, 13,1 13,6" 
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 15 20"> <polygon points="1,1 1,19, 14,10" fill="#{$sg-arrow-fill}" stroke-width="1.5" stroke="#{$sg-arrow-border}" /> </svg>');
-    background-repeat: no-repeat no-repeat;
-    background-position: center center;
-    background-size: cover;
-    height: var(--height);
-    width: var(--width);
-    z-index: calc( $zindex-popover);
-    &.overlay-position-right {
-        transform: rotate(180deg);
-    }
-    &.overlay-position-left {
-        transform: rotate(0deg);
-    }
-    &.overlay-position-top {
-        transform: rotate(90deg);
-    }
-    &.overlay-position-bottom {
-        transform: rotate(270deg);
-    }
-}
-.sg-tooltip-arrow {
-    --_brightness-filter: #{$tooltip-arrow-filter};
-    --width: 10px;
-    --height: 20px;
-    background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 10 20"> <polygon points="1,1 1,19, 9,10" fill="#{$sg-arrow-fill}" stroke-width="2" stroke="#{$sg-arrow-fill}" /><polyline points="0,0 9,10 0,20" fill="none" stroke-width="2" stroke="#{$sg-arrow-border}" /> </svg>');
-    //filter: brightness(66.666666%);
-}
-
-.sg-tooltip-wrapper {
-    --_text-color: #{$tooltip-text-color};
-    --_background-color: #{$tooltip-background-color};
-    --_font-size: #{$tooltip-font-size};
-    --_max-width: #{$tooltip-max-width};
-    --_padding-x: #{$tooltip-padding-x};
-    --_padding-y: #{$tooltip-padding-y};
-    --_border-radius: calc #{$tooltip-border-radius};
-    --_border-width: #{$tooltip-border-width};
-    --_border-style: #{$tooltip-border-style};
-    --_border-color: #{$tooltip-border-color};
-
-    font-size: var(--_font-size);
-
-    display: flex;
-    flex-wrap: wrap;
-    max-width: 12rem;
-    padding: var(--_padding-x) var(--_padding-y);
-    color: var(--_text-color);
-    background-color: var(--_background-color);
-    border: var(--_border-width) var(--_border-style) var(--_border-color);
-    //appearance: none;
-    border-radius: #{--_border-radius};
-}
-
-//<svg width="40" height="24" xmlns="http://www.w3.org/2000/svg"> <defs> <marker id="arrowhead" markerWidth="2" markerHeight="4" refX="0" refY="2" orient="auto"><polygon points="0 1, 1.8 2, 0 3" /></marker></defs> <line x1="0" y1="12" x2="25" y2="12" style="fill:rgb(0,0,255);stroke-width:8;stroke:rgb(0,0,0)" marker-end="url(#arrowhead)"/> </svg>

package/src/styles/_Popout.scss

@@ -1,75 +0,0 @@
-.sg-moveable-popout {
-    --popout-index: #{$zindex-popover};
-    position: absolute;
-    display: flex;
-    flex-direction: column;
-    border-radius: 0.375em;
-
-    padding: 0;
-    margin: 0;
-
-    border: 1px solid white;
-    width: 15rem;
-    min-width: min(18rem, 100%);
-    min-height: min(9rem, 100%);
-
-    box-shadow: 0 0 0.5rem #ffffff60;
-    color: white;
-
-    overflow: hidden;
-
-    z-index: var(--popout-index);
-    & .sg-popout-header {
-        user-select: inherit;
-        margin-bottom: 0;
-        padding: 0.25em 0.5em;
-
-        background-color: $card-header-bg-color;
-        border-bottom: 1px solid $card-border-color;
-        > *{
-            margin:0;
-        }
-
-        &:first-child {
-            border-radius: 0.375em 0.375em 0 0;
-        }
-    }
-    &[data-move="true"] {
-        touch-action: none;
-        & .sg-popout-header {
-            cursor: move;
-        }
-    }
-    & .sg-popout-body {
-        flex: 1 1 auto;
-        padding: 0.5em;
-        user-select: inherit;
-        background-color: color-mix(in srgb, white 4%, $card-header-bg-color);
-    }
-    & .sg-popout-footer {
-        user-select: inherit;
-        padding: 0.25em 0.5em;
-
-        background-color: $card-header-bg-color;
-        border-top: 1px solid $card-border-color;
-        &:last-child {
-            border-radius: 0 0 0.375em 0.375em;
-        }
-    }
-    & .sg-popout-text:last-child {
-        margin-bottom: 0;
-    }
-    &[data-resize="true"] {
-        resize: both;
-        &::before {
-            content: "";
-            position: absolute;
-            bottom: 0;
-            right: 0;
-            z-index: calc( var(--popout-index) + 1 );
-            width: 1em;
-            height: 1em;
-            background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="208" y1="128" x2="128" y2="208" fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="192" y1="40" x2="40" y2="192" fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>');
-        }
-    }
-}

package/src/styles/_Spinner.scss

@@ -1,19 +0,0 @@
-.sg-spinner {
-    display: inline-block;
-    border-radius: 50%;
-    width: 1em;
-    height: 1em;
-    border: 0.2em solid white;
-    border-right-color: transparent;
-    margin: auto;
-    animation-name: spinny;
-    animation-duration: 0.5s;
-    animation-timing-function: linear;
-    animation-iteration-count: infinite;
-}
-
-@keyframes spinny {
-    100% {
-        transform: rotate(360deg);
-    }
-}

package/src/styles/_Table.scss

@@ -1,34 +0,0 @@
-.sg-table {
-    --sg-table-padding: $sg-table-padding;
-    width: 100%;
-    margin-bottom: 1rem;
-    color: black;
-    vertical-align: top;
-    border-color: black;
-
-    > :not(caption) > * > * {
-        padding: $sg-table-padding $sg-table-padding;
-        background-color: transparent;
-        border-bottom-width: 1px;
-        box-shadow: inset 0 0 0 9999px transparent;
-    }
-
-    > tbody {
-    vertical-align: inherit;
-    }
-
-    > thead {
-    vertical-align: bottom;
-    }
-}
-
-.sg-caption-top {
-    caption-side: top;
-}
-
-.sg-table-sm {
-    // stylelint-disable-next-line selector-max-universal
-    > :not(caption) > * > * {
-      padding: $sg-table-padding-sm $sg-table-padding-sm;
-    }
-}

package/src/styles/_Tabs.scss

@@ -1,129 +0,0 @@
-.sg-tabs {
-    width: 100%;
-    display: grid;
-    grid-template-rows: [control-start] auto [control-end page-start] 100% [page-end];
-}
-
-.sg-tabs-controls {
-    --border-bottom-color: white;
-    --border-width: 2px;
-    grid-row: control;
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    background-color: $sg-tab-controls-bg;
-    
-    &::before {
-        content: "";
-        position: absolute;
-        bottom: 0;
-        width: 100%;
-        height: var(--border-width);
-        background-color: var(--border-bottom-color);
-    }
-
-    overflow-x: auto;
-    scrollbar-width: none;
-    @media (prefers-reduce-motion: no-preference) {
-        scroll-behavior: smooth;
-    }
-    > * {
-        flex: 0 0 auto;
-    }
-}
-
-.sg-tabs-button {
-    --border-color: #{$sg-tab-controls-bg};
-    --text-color: #{$sg-tab-button-color};
-    --background-color: #{$sg-tab-controls-bg};
-    --hover-background-color: #{$sg-tab-button-hover};
-    --active-background-color: #{$sg-tab-button-active};
-
-    position: relative;
-    display: block;
-    color: var(--text-color);
-    background-color: var(--background-color);
-    padding: 0.375rem 0.75rem;
-    border: var(--border-width) solid var(--border-color);
-    border-bottom-color: var(--border-bottom-color);
-    font-size: 0.85rem;
-    //transition: all 0.2s ease-in-out;
-
-    &::after, &::before {
-        content: "";
-        position: absolute;
-        width: var(--border-width);
-        height: var(--border-width);
-        bottom: calc(-1 * var(--border-width));
-        left: calc(-1 * var(--border-width));
-        background-color: var(--border-bottom-color);
-        z-index: 2;
-    }
-    &::after {
-        left: unset;
-        right: calc(-1 * var(--border-width));
-    }
-    
-    &:hover {
-        background-color: var(--hover-background-color);
-    }
-    &:active {
-        
-        background-color: var(--active-background-color);
-    }
-
-    &.sg-active {
-        border: 2px solid var(--border-bottom-color);
-        border-bottom: 2px solid var(--sg-body-bg);
-        //color: white;
-    }
-    
-    &.sg-tabs-scroll-button {
-        position: sticky;
-        left: 0;
-        height: 100%;
-        aspect-ratio: 1;
-        padding: 0;
-        z-index: 2;
-        svg {
-            position: relative;
-            top: 0;
-            left: 0;
-        }
-        &[data-position="right"] {
-            position: sticky;
-            left: unset;
-            right: 0;
-        }
-
-        &:first-child {
-            border-right-color: var(--border-bottom-color);
-            &::after {
-                bottom: unset;
-                top: calc(-1 * var(--border-width));
-            }
-        }
-        &:last-child {
-            border-left-color: var(--border-bottom-color);
-            &::before {
-                bottom: unset;
-                top: calc(-1 * var(--border-width));
-            }
-        }
-    }
-}
-
-.sg-tabs-content {
-    width: 100%;
-    grid-row: page;
-}
-
-.sg-tabs-page {
-    display: none;
-    &.sg-active {
-        display: flex;
-        flex-wrap: wrap;
-        flex-direction: column;
-        padding-block: 1rem;
-    }
-}