@trebco/treb 23.6.2 → 25.0.0-rc1

package/treb-embed/style/spinner.scss

@@ -0,0 +1,92 @@
+/*
+ * This file is part of TREB.
+ *
+ * TREB is free software: you can redistribute it and/or modify it under the 
+ * terms of the GNU General Public License as published by the Free Software 
+ * Foundation, either version 3 of the License, or (at your option) any 
+ * later version.
+ *
+ * TREB is distributed in the hope that it will be useful, but WITHOUT ANY 
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS 
+ * FOR A PARTICULAR PURPOSE. See the GNU General Public License for more 
+ * details.
+ *
+ * You should have received a copy of the GNU General Public License along 
+ * with TREB. If not, see <https://www.gnu.org/licenses/>. 
+ *
+ * Copyright 2022-2023 trebco, llc. 
+ * info@treb.app
+ * 
+ */
+
+.treb-layout {
+
+  .treb-spinner {
+
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    background: transparent;
+    width: 100%;
+    height: 100%;
+    z-index: 1000;
+    align-items: center;
+    justify-content: center;
+    transition: visibility .25s, opacity .25s ease;
+    opacity: 0;
+    display: flex;
+    visibility: collapse;
+
+    &.visible {
+      opacity: 1;
+      transition: visibility 0s, opacity 1s ease;
+      visibility: visible;
+    }
+
+    &>div {
+
+      display: inline-block;
+      position: relative;
+      width: 80px;
+      height: 80px;
+
+      div {
+        box-sizing: border-box;
+        display: block;
+        position: absolute;
+        width: 64px;
+        height: 64px;
+        margin: 8px;
+        border: 8px solid #fff;
+        border-radius: 50%;
+        animation: treb-spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+        border-color: var(--treb-spinner-color, currentColor) transparent transparent transparent;
+      }
+
+      div:nth-child(1) {
+        animation-delay: -0.45s;
+      }
+
+      div:nth-child(2) {
+        animation-delay: -0.3s;
+      }
+
+      div:nth-child(3) {
+        animation-delay: -0.15s;
+      }
+
+      @keyframes treb-spinner {
+        0% {
+          transform: rotate(0deg);
+        }
+
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+
+    }
+
+  }
+
+}

package/treb-embed/style/tab-bar.scss

@@ -0,0 +1,228 @@
+/*
+ * This file is part of TREB.
+ *
+ * TREB is free software: you can redistribute it and/or modify it under the 
+ * terms of the GNU General Public License as published by the Free Software 
+ * Foundation, either version 3 of the License, or (at your option) any 
+ * later version.
+ *
+ * TREB is distributed in the hope that it will be useful, but WITHOUT ANY 
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS 
+ * FOR A PARTICULAR PURPOSE. See the GNU General Public License for more 
+ * details.
+ *
+ * You should have received a copy of the GNU General Public License along 
+ * with TREB. If not, see <https://www.gnu.org/licenses/>. 
+ *
+ * Copyright 2022-2023 trebco, llc. 
+ * info@treb.app
+ * 
+ */
+
+.treb-layout {
+
+  .treb-spreadsheet-footer {
+
+    grid-area: 3/1/4/2;
+
+    &,
+    .treb-spreadsheet-tabs {
+      display: flex;
+      flex-direction: row;
+      z-index: 1;
+      max-width: 100%;
+      height: 2.2em;
+      color: var(--treb-ui-color, inherit);
+      list-style-type: none;
+      padding-inline-start: 0;
+    }
+
+    &[hidden] {
+      display: none;
+    }
+
+    align-items: center;
+
+    & .treb-spreadsheet-tabs>li {
+      display: inline-block;
+      position: relative;
+    }
+
+    & .treb-spreadsheet-tabs>li,
+    & .treb-add-tab {
+
+      font-size: inherit;
+      padding: .25em .75em;
+      padding: 0 .75em;
+      height: 100%;
+      overflow: hidden;
+
+      color: var(--treb-tab-bar-tab-color, var(--treb-ui-color, #fff));
+
+      cursor: default;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+
+      border-bottom-left-radius: 5px;
+      border-bottom-right-radius: 5px;
+      border: 1px solid var(--treb-tab-bar-tab-border-color, var(--treb-ui-border-color, #ccc));
+      border-top-width: 0px;
+      z-index: 1;
+      margin-right: -2px;
+
+    }
+
+    & .treb-scale-control {
+      font-size: inherit;
+      height: 2.2em;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      width: 5em;
+
+      & .treb-scale-input {
+        font-size: inherit;
+        font-family: inherit;
+        width: 4em;
+        text-align: center;
+        border: 1px solid transparent;
+        transition: border-color .25s ease, background-color .25s ease;
+        border-radius: 2px;
+        color: inherit;
+        background: transparent;
+        padding: initial;
+      }
+
+      & .treb-slider-container {
+        position: absolute;
+
+        border: 1px solid var(--treb-scale-slider-border-color, var(--treb-ui-border-color, #ccc));
+        background: var(--treb-scale-slider-background, #fff);
+        accent-color: var(--treb-scale-slider-accent-color, undefined);
+
+        width: 10em;
+        height: 4em;
+        top: 0em;
+        left: .5em;
+        transform-origin: left top;
+        transform: rotate(-90deg);
+        z-index: $z-index-scale-popup;
+        opacity: 0;
+        transition: opacity .25s ease;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        pointer-events: none;
+      }
+
+      &:hover .treb-scale-input,
+      .treb-scale-input:focus {
+        border-color: var(--treb-ui-border-color, #ccc);
+      }
+
+      .treb-slider-container>input[type=range] {
+        width: 8.5em;
+      }
+
+      & .treb-scale-input:focus+.treb-slider-container,
+      & .treb-slider-container:focus-within,
+      &:hover .treb-slider-container {
+        opacity: .85;
+        pointer-events: initial;
+      }
+
+    }
+
+    & .treb-delete-tab {
+
+      font-size: inherit;
+      padding: .25em .75em;
+      cursor: default;
+      display: inline-flex;
+      align-items: center;
+      flex-direction: row;
+
+      border-bottom-left-radius: 5px;
+      border-bottom-right-radius: 5px;
+
+      /* border: 1px solid #ccc; */
+      border-top-width: 0px;
+      z-index: 1;
+      margin-right: -2px;
+      /* margin-right: 1em; */
+
+      svg {
+        width: 1em;
+        height: 1em;
+        opacity: .75;
+        pointer-events: none;
+        transition: opacity .125s ease-in-out;
+      }
+
+      &:hover svg {
+        opacity: .75;
+      }
+
+      path {
+        stroke: currentColor;
+        stroke-width: 1.5px;
+        stroke-linecap: round;
+      }
+
+    }
+
+    .treb-stats-panel {
+
+      /** 
+       * instead of having a junk node with flex-grow to take up space,
+       * we can use margin:auto to consume all available space -- as long
+       * as this node is in the layout. 
+       *
+       * in the declarative layout, we always have this node, but if it's
+       * not used it will just be empty.
+       */
+      margin-left: auto;
+
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      // > * + * {
+      >* {
+        margin-left: .5em;
+      }
+
+      .treb-stats-value {
+        border: 1px solid var(--treb-stats-value-border-color, var(--treb-ui-border-color, #ddd));
+        background: var(--treb-stats-value-background, #f8f8ff);
+        padding: 0 .3em;
+        border-radius: 3px;
+      }
+    }
+
+    /** don't overflow/ellipsis the add tab button */
+
+    /**
+     * for ellipsis to work, it seems like it has to be inside
+     * a span in the tab. since we are not using it atm I removed
+     * that span, but if we want ellpisis it will need to come back.
+     */
+
+    & .treb-spreadsheet-tabs>li {
+
+      white-space: nowrap;
+      overflow-x: hidden;
+
+      &[selected] {
+        z-index: 2;
+      }
+
+    }
+
+  }
+
+}

package/treb-embed/style/table.scss

@@ -0,0 +1,80 @@
+/*
+ * This file is part of TREB.
+ *
+ * TREB is free software: you can redistribute it and/or modify it under the 
+ * terms of the GNU General Public License as published by the Free Software 
+ * Foundation, either version 3 of the License, or (at your option) any 
+ * later version.
+ *
+ * TREB is distributed in the hope that it will be useful, but WITHOUT ANY 
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS 
+ * FOR A PARTICULAR PURPOSE. See the GNU General Public License for more 
+ * details.
+ *
+ * You should have received a copy of the GNU General Public License along 
+ * with TREB. If not, see <https://www.gnu.org/licenses/>. 
+ *
+ * Copyright 2022-2023 trebco, llc. 
+ * info@treb.app
+ * 
+ */
+
+.treb-layout {
+
+  .treb-sort-button {
+
+    z-index: $z-index-note;
+    border: 1px solid #ccc;
+    background: #fff;
+    border-radius: 2px;
+    width: 1em;
+    height: 1em;
+    position: absolute;
+    top: 100px;
+    left: 100px;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity .1s ease;
+
+    &::after {
+      box-sizing: border-box;
+    }
+
+    &.asc {
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -25%);
+        width: .8em;
+        height: .8em;
+        border: .4em solid transparent;
+        border-top-color: currentColor;
+        opacity: .5;
+      }
+
+    }
+
+    &.desc {
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -80%);
+        width: .8em;
+        height: .8em;
+        border: .4em solid transparent;
+        border-bottom-color: currentColor;
+        opacity: .5;
+      }
+
+    }
+
+  }
+
+}
+