@tetacom/ng-components 1.0.3 → 1.0.7

package/style/table.scss

@@ -0,0 +1,226 @@
+@import "util/color-util.scss";
+@import "util/font-util.scss";
+@import "util/scroll-util.scss";
+
+.table {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  min-height: 0;
+  min-width: 0;
+  color: getColorVar('text', '90');
+  @include getFont($fonts, 'title-3');
+
+  &-head {
+    display: grid;
+    overflow: hidden;
+    flex-shrink: 0;
+    border-bottom: solid 1px getColorVar('text', '5');
+    @include getFont($fonts, 'table-header');
+
+    &_locked {
+      display: grid;
+      position: sticky;
+      left: 0;
+      background-color: getColorVar('background', '50');
+      z-index: 1;
+      border-right: solid 1px getColorVar('text', '30');
+    }
+
+    &__group {
+      min-height: 24px;
+      flex-shrink: 0;
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      text-overflow: ellipsis;
+      border-right: solid 1px getColorVar('text', '5');
+
+      &:last-child {
+        border-right: 0;
+      }
+
+      &__container {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        min-width: 0;
+      }
+
+      &__caption {
+        display: flex;
+        flex-grow: 1;
+        min-height: 24px;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        border-bottom: solid 1px getColorVar('text', '5');
+      }
+
+      &__children {
+        display: grid;
+        flex-direction: row;
+        flex-grow: 1;
+      }
+    }
+
+    &__cell {
+      position: relative;
+      min-height: 24px;
+      display: flex;
+      flex-grow: 1;
+      justify-content: center;
+      min-width: 0;
+      padding: 0;
+
+      &__menu {
+        position: absolute;
+        right: 0;
+        //top: 0;
+        //bottom: 0;
+        display: none;
+
+        &:hover {
+          cursor: pointer;
+        }
+      }
+
+      &:hover &__menu, &__menu_open {
+        display: flex;
+      }
+
+      &__wrapper {
+        flex-grow: 1;
+        display: flex;
+        padding: 0;
+        min-width: 0;
+        position: relative;
+        justify-content: center;
+        align-items: center;
+        grid-gap: 8px;
+      }
+
+      &__component {
+        display: flex;
+        flex-wrap: nowrap;
+        min-width: 0;
+      }
+
+      &__text {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 100%;
+      }
+
+      &__resize {
+        position: absolute;
+        top: 0;
+        right: -4px;
+        bottom: 0;
+        width: 8px;
+        background: transparent;
+        z-index: 10;
+
+        &:hover {
+          background-color: getColorVar('text', '10');
+        }
+      }
+    }
+
+    &__dropdown {
+      position: fixed;
+      z-index: 2;
+      text-align: left;
+      display: flex;
+      flex-direction: column;
+      min-width: 250px;
+      padding: 12px;
+    }
+  }
+
+  &-body {
+    display: flex;
+    flex-grow: 1;
+    overflow: hidden;
+    @include getFont($fonts, 'body-3');
+
+    &-container {
+      display: grid;
+      flex-grow: 1;
+      @include scrollable();
+
+      &-virtual {
+        display: flex;
+        flex-grow: 1;
+        flex-direction: column;
+      }
+    }
+  }
+
+  &-row {
+    display: contents;
+    background-color: getColorVar('background', '50');
+
+    &:hover .cell {
+      background-color: getColorVar('text', '5');
+    }
+
+    &_locked {
+      background-color: inherit;
+      display: grid;
+      position: sticky;
+      left: 0;
+
+      & .cell:last-child {
+        border-right: solid 1px getColorVar('text', '30');
+      }
+    }
+
+    &_virtual {
+      display: grid;
+    }
+
+    &_active {
+      background-color: getColorVar('text', '10');
+    }
+  }
+}
+
+.cell {
+  display: flex;
+  white-space: nowrap;
+  height: 24px;
+  border-bottom: solid 1px getColorVar('text', '5');
+  border-right: solid 1px getColorVar('text', '5');
+  padding: 0;
+  background-color: inherit;
+
+  &:last-child {
+    border-right: 0;
+  }
+
+
+  &:focus {
+    box-shadow: inset 0 0 0 1px getColorVar('primary', '50');
+  }
+
+  &-component {
+    display: flex;
+    flex-grow: 1;
+    min-width: 0;
+    align-items: center;
+  }
+
+  &-text {
+    display: flex;
+    min-width: 0;
+    padding: 0 8px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    &_numeric {
+      text-align: right;
+    }
+  }
+}

package/style/tabs.scss

@@ -0,0 +1,64 @@
+@import "util/color-util.scss";
+@import "util/font-util.scss";
+
+.tabs {
+  display: flex;
+  flex-direction: column;
+
+  &-head {
+    display: flex;
+    flex-grow: 1;
+    flex-shrink: 0;
+    height: 40px;
+
+    &-item {
+      display: flex;
+      align-items: center;
+      padding: 0 12px;
+      white-space: nowrap;
+      @include getFont($fonts, 'body-3');
+      color: getColorVar('text', '40');
+      fill: getColorVar('text', '40');
+
+      &_disabled, &[disabled] {
+        color: getColorVar('text', '20');
+        fill: getColorVar('text', '20');
+      }
+
+      &:hover:not([disabled]):not(&_disabled) {
+        cursor: pointer;
+        color: getColorVar('text', '70');
+        fill: getColorVar('text', '70');
+      }
+
+      &_active {
+        position: relative;
+        color: getColorVar('text', '90');
+        fill: getColorVar('text', '70');
+
+        &::after {
+          content: '';
+          position: absolute;
+          height: 2px;
+          background-color: getColorVar('primary', '50');
+          border: solid 0 transparent;
+          left: 0;
+          right: 0;
+          bottom: 0;
+        }
+      }
+    }
+  }
+
+  &-title {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  &-content {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    overflow-y: overlay;
+  }
+}

package/style/toggle.scss

@@ -0,0 +1,70 @@
+@import "util/color-util.scss";
+
+
+.toggle {
+  display: inline-flex;
+  align-items: center;
+  grid-gap: 8px;
+  flex-grow: 1;
+
+  &_disabled &-button {
+    background: getColorVar('text', '5') !important;
+  }
+
+  &-button {
+    position: relative;
+    width: 24px;
+    height: 16px;
+    border: none;
+    border-radius: 10px;
+    background: getColorVar('text', 5);
+    box-shadow: inset 0 0 0 1px getColorVar('text', 20);
+
+    &-circle {
+      position: absolute;
+      top: 4px;
+      left: 4px;
+      width: 8px;
+      height: 8px;
+      border: none;
+      border-radius: 4px;
+      background: getColorVar('white', 50);
+      box-shadow: 0 0 0 1px getColorVar('text', 20);
+    }
+
+    $button: &;
+
+
+    &-on {
+      box-shadow: none;
+      #{$button}-circle {
+        left: unset;
+        right: 4px;
+        box-shadow: none;
+      }
+
+      @each $paletteName in $palettes {
+        &#{$button}-#{$paletteName} {
+          background: getColorVar($paletteName, '50');
+
+          &:hover:not(.toggle_disabled) {
+            background: getColorVar($paletteName, '40');
+          }
+
+          &:active {
+            background: getColorVar($paletteName, '70');
+          }
+        }
+      }
+    }
+  }
+
+  &:not(&_disabled):hover &-button:not(.toggle-button-on) {
+    background: getColorVar('text', 10);
+  }
+
+  &:hover:not(&_disabled) {
+    cursor: pointer;
+  }
+}
+

package/style/toolbar.scss

@@ -0,0 +1,23 @@
+@import "util/font-util.scss";
+@import "util/color-util.scss";
+
+.toolbar {
+  height: 40px;
+  display: flex;
+  grid-gap: 8px;
+  min-width: 0;
+  overflow: hidden;
+  flex-shrink: 0;
+  align-items: center;
+  @include getFont($fonts, 'title-3');
+
+  &_panel {
+    padding: 0 8px;
+  }
+
+  @each $paletteName in $palettes {
+    &.toolbar-#{$paletteName} {
+      background-color: getColorVar($paletteName, '50');
+    }
+  }
+}

package/style/tooltip.scss

@@ -0,0 +1,60 @@
+@import "util/shadow-util.scss";
+@import "util/color-util.scss";
+
+.tooltip {
+  @include shadow(1);
+  font-weight: normal;
+  padding: 12px;
+  white-space: nowrap;
+  z-index: 1;
+  background-color: getColorVar('white', '50');
+  color: getColorVar('text', '50');
+
+  &::before, &::after {
+    position: absolute;
+    display: block;
+    content: '';
+    width: 0;
+    height: 0;
+  }
+
+  &_top {
+    &::before {
+      bottom: -12px;
+      left: 50%;
+      transform: translate(-50%, 0);
+      border-left: 12px solid transparent;
+      border-right: 12px solid transparent;
+      border-top: 12px solid getColorVar('white', '50');
+    }
+
+    &::after {
+      bottom: -11px;
+      left: 50%;
+      transform: translate(-50%, 0);
+      border-left: 12px solid transparent;
+      border-right: 12px solid transparent;
+      border-top: 12px solid getColorVar('white', '50');
+    }
+  }
+
+  &_bottom {
+    &::before {
+      top: -12px;
+      left: 50%;
+      transform: translate(-50%, 0);
+      border-left: 12px solid transparent;
+      border-right: 12px solid transparent;
+      border-bottom: 12px solid getColorVar('white', '50');
+    }
+
+    &::after {
+      top: -11px;
+      left: 50%;
+      transform: translate(-50%, 0);
+      border-left: 12px solid transparent;
+      border-right: 12px solid transparent;
+      border-bottom: 12px solid getColorVar('white', '50');
+    }
+  }
+}

package/style/tree.scss

@@ -0,0 +1,60 @@
+@import "util/color-util.scss";
+@import "util/font-util.scss";
+
+.tree {
+  display: inline-flex;
+  flex-direction: column;
+  @include getFont($fonts, 'body-3');
+
+  &__item-container {
+    display: flex;
+    flex-direction: column;
+    white-space: nowrap;
+  }
+
+  &__item {
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+    height: 24px;
+    color: getColorVar('text', '90');
+    transition: background 0.4s;
+    padding: 0 12px;
+    min-width: 0;
+    grid-gap: 8px;
+
+    &_content {
+      display: flex;
+      align-items: center;
+      height: 24px;
+
+      @for $depth from 0 through 20 {
+        &-#{$depth} .tree__item {
+          padding-left: 12px + (12px * $depth);
+        }
+      }
+    }
+
+    &:hover {
+      cursor: pointer;
+      background-color: getColorVar('text', '5');
+    }
+
+    &_active {
+      background-color: getColorVar('text', '10');
+    }
+  }
+
+  &__icon {
+    fill: getColorVar('text', '70');
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  &__children {
+    display: flex;
+    flex-direction: column;
+  }
+}

package/style/util/button-util.scss

@@ -0,0 +1,58 @@
+@import "./color-util.scss";
+
+@mixin generateButtonForPalette($paletteName) {
+  .button_primary.button-#{$paletteName} {
+    background-color: getColorVar($paletteName, '50');
+    background-position: center;
+    transition: background 0.8s;
+
+    &:hover {
+      background: getColorVar($paletteName, '60') radial-gradient(circle, transparent 1%, getColorVar($paletteName, '60') 1%) center/15000%;
+    }
+
+    &:active {
+      background-color: getColorVar($paletteName, '70');
+      background-size: 100%;
+      transition: background 0s;
+    }
+  }
+
+  .button_ghost.button-#{$paletteName} {
+    color: getColorVar($paletteName, '50');
+    fill: getColorVar($paletteName, '50');
+    background-color: transparent;
+    background-position: center;
+    transition: background 0.8s;
+
+    &:hover {
+      background: getColorVar($paletteName, '5') radial-gradient(circle, transparent 1%, getColorVar($paletteName, '5') 1%) center/15000%;
+    }
+
+    &:active {
+      background-color: getColorVar($paletteName, '10');
+      background-size: 100%;
+      transition: background 0s;
+    }
+  }
+
+  .button_outline.button-#{$paletteName} {
+    color: getColorVar($paletteName, '50');
+    fill: getColorVar($paletteName, '50');
+    border-color: getColorVar($paletteName, '50');
+    border-style: solid;
+    border-width: 1px;
+    background-color: transparent;
+    background-position: center;
+    transition: background 0.8s;
+
+    &:hover {
+      background: getColorVar($paletteName, '5') radial-gradient(circle, transparent 1%, getColorVar($paletteName, '5') 1%) center/15000%;
+    }
+
+    &:active {
+      background-color: getColorVar($paletteName, '10');
+      background-size: 100%;
+      transition: background 0s;
+    }
+  }
+}

package/style/util/color-util.scss

@@ -0,0 +1,3 @@
+@function getColorVar($palette, $grade) {
+  @return var(--color-#{$palette}-#{$grade});
+}

package/style/util/font-util.scss

@@ -0,0 +1,11 @@
+@use "sass:map";
+
+@mixin getFontDescription($fontObject) {
+  @each $key, $value in $fontObject {
+    #{$key}: #{$value};
+  }
+}
+
+@mixin getFont($fonts, $fontName) {
+  @include getFontDescription(map.get($fonts, $fontName));
+}

package/style/util/scroll-util.scss

@@ -0,0 +1,4 @@
+@mixin scrollable() {
+  overflow-x: auto;
+  overflow-y: overlay;
+}

package/style/util/shadow-util.scss

@@ -0,0 +1,3 @@
+@mixin shadow($shadowName) {
+  box-shadow: var(--shadow-#{$shadowName});
+}