stargazer-ui 1.5.21 → 1.5.23

package/src/styles/_OverLay.scss

@@ -0,0 +1,79 @@
+.sg-overlay-wrapper {
+    max-width: 100%; 
+    max-height: 100%;
+    z-index: $zindex-popover;
+}
+
+.sg-overlay-arrow {
+    --width: 10px;
+    --height: 20px;
+    --_arrow-border: #{$sg-arrow-border};
+    --_arrow-border-stroke: 2;
+    --_arrow-fill: #{$sg-arrow-fill};
+    //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>');
+    overflow: hidden;
+    position: relative;
+    background-color: var(--_arrow-border);
+    clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
+
+    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);
+    }
+    &::after {
+        content: "";
+        display: block;
+        width: 100%;
+        height: 100%;
+        background-color: var(--_arrow-fill, --_arrow-border);
+        clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
+        translate: calc(var(--_arrow-border-stroke) * -1px);
+    }
+}
+.sg-tooltip-arrow {
+    --_text-color: #{$tooltip-text-color};
+    --_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

@@ -0,0 +1,75 @@
+.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/_Resizable.scss

@@ -0,0 +1,64 @@
+.sg-resizable-container {
+    &:focus-visible {
+        z-index: 2;
+    }
+    height: 100%;
+    max-height: 100%;
+    width: 100%;
+    max-width: 100%;
+    display: grid;
+    grid-template-rows: var(--rows-template);
+    grid-template-columns: var(--columns-template, 1fr);
+    grid-auto-flow: column;
+    &[data-vertical="false"] {
+        --columns-template: 1fr auto 1fr;
+        --rows-template: 1fr;
+        grid-auto-flow: row;
+        width: unset;
+        height: 100%;
+        .sg-resizable-separator {
+            --indicator-rotation: 90deg;
+            --cursor-type: col-resize;
+        }
+    }
+}
+
+.sg-resizable-separator {
+    --indicator-rotation: 0deg;
+    --cursor-type: row-resize;
+    cursor: var(--cursor-type);
+    position: relative;
+    width: 100%;
+    align-self: normal;
+    overflow: visible;
+    display: grid;
+    border: 1px solid white;
+    &::after {
+        content: "";
+        position: absolute;
+        inset-block: -0.5rem;
+        height: 1rem;
+        inset-inline: 0;
+    }
+    
+    .indicator {
+        position: absolute;
+        justify-self: center;
+        align-self: center;
+        z-index: 3;
+        padding: 0;
+        height: 1rem;
+        display: grid;
+        justify-content: center;
+        align-content: center;
+        rotate: var(--indicator-rotation);
+    }
+    &:focus-visible {
+        outline: none;
+        box-shadow: none;
+        .indicator {
+            box-shadow: 0 0 0 3px white;
+            outline: 2px solid #0060df;
+        }
+    }
+}

package/src/styles/_Spinner.scss

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

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

@@ -0,0 +1,129 @@
+.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;
+    }
+}