@tetacom/ng-components 1.0.3 → 1.0.7

package/style/layout.scss

@@ -0,0 +1,109 @@
+@import "util/color-util";
+
+@function widthCol($n) {
+  @return (100% / $columns-count) * $n
+}
+
+body {
+  color: getColorVar('text', '90');
+}
+
+.app {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.row {
+  display: flex;
+
+  &_auto {
+    flex-grow: 1;
+    min-width: 0;
+    min-height: 0;
+  }
+
+  &_fixed {
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+
+  @for $n from 1 through $columns-count {
+    &_#{$n} {
+      flex: 1 1 widthCol($n);
+      min-width: 0;
+      min-height: 0;
+    }
+  }
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+
+  &_auto {
+    flex-grow: 1;
+    min-width: 0;
+    min-height: 0;
+  }
+
+  &_fixed {
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+
+  @for $n from 0 through $columns-count {
+    &_#{$n} {
+      flex: 1 1 widthCol($n);
+      min-width: 0;
+      min-height: 0;
+    }
+  }
+}
+
+.overlay-container {
+  position: fixed;
+  z-index: 10;
+  width: 0;
+  height: 0;
+}
+
+.popup-content {
+  position: fixed;
+  z-index: 10;
+}
+
+.gap {
+  grid-gap: 8px
+}
+
+.grid {
+  display: grid;
+}
+
+.inline-grid {
+  display: inline-grid;
+}
+
+.grid-auto-flow-column {
+  grid-auto-flow: column;
+}
+
+.grid-auto-flow-row {
+  grid-auto-flow: row;
+}
+
+.grid-auto-max {
+  grid-auto-columns: max-content;
+}
+
+.grid-auto-min {
+  grid-auto-columns: min-content;
+}
+
+.content-block {
+  border: solid 0;
+  border-radius: 2px;
+  overflow: hidden;
+  background: getColorVar('background', 50);
+}

package/style/library.scss

@@ -0,0 +1,208 @@
+.clear {
+  clear: both;
+  height: 0;
+  line-height: 0;
+}
+.float {
+  &__right {
+    float: right;
+  }
+
+  &__left {
+    float: left;
+  }
+}
+.position {
+  &-relative {
+    position: relative;
+  }
+
+  &-absolute {
+    position: absolute;
+  }
+
+  &-fixed {
+    position: fixed;
+  }
+}
+.display {
+  &-block {
+    display: flex !important;
+  }
+
+  &-inline-block {
+    display: inline-block !important;
+  }
+
+  &-flex {
+    display: flex !important;
+  }
+
+  &-inline-flex {
+    display: inline-flex !important;
+  }
+
+  &-inline {
+    display: inline !important;
+  }
+}
+
+.flex {
+  display: flex !important;
+
+  &-column {
+    flex-direction: column !important;
+  }
+
+  &-wrap {
+    flex-wrap: wrap !important;
+  }
+
+  &-nowrap {
+    flex-wrap: nowrap !important;
+  }
+}
+.align {
+  &-center {
+    align-items: center;
+  }
+
+  &-start {
+    align-items: flex-start;
+  }
+
+  &-end {
+    align-items: flex-end;
+  }
+
+  &-stretch {
+    align-items: stretch;
+  }
+
+  &-baseline {
+    align-items: baseline;
+  }
+}
+.align-self {
+  &-center {
+    align-self: center;
+  }
+
+  &-start {
+    align-self: flex-start;
+  }
+
+  &-end {
+    align-self: flex-end;
+  }
+
+  &-stretch {
+    align-self: stretch;
+  }
+
+  &-baseline {
+    align-self: baseline;
+  }
+}
+.justify-content {
+  &-between {
+    justify-content: space-between;
+  }
+
+  &-around {
+    justify-content: space-around;
+  }
+
+  &-start {
+    justify-content: flex-start;
+  }
+
+  &-end {
+    justify-content: flex-end;
+  }
+
+  &-center {
+    justify-content: center;
+  }
+}
+.justify-self {
+  &-center {
+    justify-self: center;
+  }
+
+  &-start {
+    justify-self: flex-start;
+  }
+
+  &-end {
+    justify-self: flex-end;
+  }
+}
+.nowrap {
+  white-space: nowrap;
+}
+.overflow {
+  &-hidden {
+    overflow: hidden;
+  }
+
+  &-auto {
+    overflow: auto;
+  }
+
+  &-scroll {
+    overflow: scroll;
+  }
+
+  &-x-hidden {
+    overflow-x: hidden;
+  }
+
+  &-x-auto {
+    overflow-x: auto;
+  }
+
+  &-x-scroll {
+    overflow-x: scroll;
+  }
+
+  &-y-hidden {
+    overflow-y: hidden;
+  }
+
+  &-y-auto {
+    overflow-y: auto;
+  }
+
+  &-y-scroll {
+    overflow-y: scroll;
+  }
+}
+.text-align {
+  &-center {
+    text-align: center;
+  }
+
+  &-left {
+    text-align: left;
+  }
+
+  &-right {
+    text-align: right;
+  }
+}
+.cursor-pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
+.text-overflow {
+  &-ellipsis {
+    text-overflow: ellipsis;
+  }
+}
+.text-decoration {
+  &-none {
+    text-decoration: none;
+  }
+}

package/style/list.scss

@@ -0,0 +1,70 @@
+@import "util/color-util.scss";
+@import "util/font-util.scss";
+
+.list {
+  padding: 4px 0;
+  display: inline-flex;
+  flex-direction: column;
+  border-radius: 2px;
+  color: getColorVar('text', '90');
+  background-color: getColorVar('background', '50');
+  @include getFont($fonts, 'body-3');
+  position: relative;
+
+  &-item {
+    min-height: 24px;
+    display: inline-flex;
+    align-items: center;
+    padding: 0 12px;
+    white-space: nowrap;
+    background-color: transparent;
+    transition: background 0.4s;
+    grid-gap: 8px;
+
+    &-xl {
+      min-height: 44px;
+      padding: 0 16px;
+    }
+
+    &_interactive {
+      background-color: transparent;
+      transition: background 0.4s;
+
+      &:hover:not(&_disabled) {
+        background-color: getColorVar('text', '5');
+        cursor: pointer;
+      }
+    }
+
+    &_interactive#{&}_active {
+      background-color: getColorVar('text', '10');
+    }
+
+    &:hover > .sublist {
+      display: inherit;
+    }
+  }
+
+  &-divider {
+    height: 1px;
+    flex-shrink: 0;
+    margin: 4px 0;
+    background-color: getColorVar('text', '5');
+  }
+
+  &-title {
+    color: getColorVar('text', '50');
+    @include getFont($fonts, 'overline');
+  }
+}
+
+.sublist {
+  position: absolute;
+  top: -5px;
+  left: 100%;
+  display: none;
+
+  &:hover {
+    cursor: default;
+  }
+}

package/style/loader.scss

@@ -0,0 +1,40 @@
+@import "util/color-util.scss";
+
+.loader {
+  position: fixed;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:before {
+    margin-left: -25px;
+    margin-top: -25px;
+    content: '';
+    display: block;
+    box-sizing: border-box;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    border: 5px solid getColorVar('primary', '50');
+    border-top-color: transparent;
+    animation: spinner 1.5s linear infinite;
+  }
+}
+
+@keyframes spinner {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.loader-icon {
+  display: block;
+  box-sizing: border-box;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: 2px solid;
+  border-top-color: transparent;
+  animation: spinner 1.5s linear infinite;
+}

package/style/message.scss

@@ -0,0 +1,51 @@
+@import "util/shadow-util.scss";
+
+.message {
+  @include shadow(5);
+  display: inline-flex;
+  flex-direction: column;
+  padding: 8px;
+  margin: 8px;
+  border: solid 0;
+  border-radius: 4px;
+  color: getColorVar('white', '50');
+  width: 240px;
+  @each $paletteName in $palettes {
+    &-#{$paletteName} {
+      background-color: getColorVar($paletteName, '50');
+    }
+  }
+}
+
+.message-host {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  z-index: 101;
+
+  &_left {
+    left: 0;
+  }
+
+  &_right {
+    right: 0;
+  }
+
+  &_center {
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  &_top {
+    left: 0;
+  }
+
+  &_bottom {
+    bottom: 0;
+  }
+
+  &_vertical-center {
+    top: 50%;
+    transform: translateY(-50%);
+  }
+}

package/style/modal.scss

@@ -0,0 +1,29 @@
+@import "util/color-util.scss";
+@import "util/shadow-util.scss";
+
+.modal {
+  &__backdrop {
+    background: getColorVar('backdrop', '50');
+    z-index: 99;
+  }
+
+  &__window {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__container {
+    @include shadow(5);
+    background-color: getColorVar('background', '50');
+
+    &_resize {
+      resize: both;
+    }
+  }
+}

package/style/navigation.scss

@@ -0,0 +1,26 @@
+@import "util/color-util.scss";
+@import "util/font-util.scss";
+
+.navigation {
+  &-item {
+    padding: 0 12px;
+    grid-gap: 8px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    @include getFont($fonts, 'title-3');
+  }
+
+  @each $paletteName in $palettes {
+    &-#{$paletteName} {
+      background: getColorVar($paletteName, '50');
+    }
+    &-#{$paletteName} &-item:hover {
+      background: getColorVar($paletteName, '40');
+      cursor: pointer;
+    }
+    &-#{$paletteName} &-item_active {
+      background: getColorVar($paletteName, '30');
+    }
+  }
+}

package/style/presets/color-presets.scss

@@ -0,0 +1,151 @@
+$themes: (
+  'default': (
+    'text': (
+      '90': rgba(57,65,71,1),
+      '80': rgba(76,87,94,1),
+      '70': rgba(93,106,115,1),
+      '60': rgba(111,127,137,1),
+      '50': rgba(125,143,154,1),
+      '40': rgba(145,160,170,1),
+      '30': rgba(165,178,187,1),
+      '20': rgba(191,201,207,1),
+      '10': rgba(215,222,227,1),
+      '5': rgba(225,231,236,1),
+    ),
+    'primary': (
+      '90': rgba(0,49,86,1),
+      '80': rgba(0,68,120,1),
+      '70': rgba(7,91,154,1),
+      '60': rgba(20,115,188,1),
+      '50': rgba(37,142,222,1),
+      '40': rgba(58,169,255,1),
+      '30': rgba(102,189,255,1),
+      '20': rgba(146,208,255,1),
+      '10': rgba(191,227,255,1),
+      '5': rgba(235,246,255,1),
+    ),
+    'red': (
+      '90': rgba(168,46,38,1),
+      '80': rgba(183,56,49,1),
+      '70': rgba(194,63,56,1),
+      '60': rgba(212,72,62,1),
+      '50': rgba(226,82,65,1),
+      '40': rgba(222,94,86,1),
+      '30': rgba(215,121,118,1),
+      '20': rgba(227,158,156,1),
+      '10': rgba(247,207,211,1),
+      '5': rgba(252,236,238,1),
+    ),
+    'green': (
+      '90': rgba(40,95,27,1),
+      '80': rgba(55,126,48,1),
+      '70': rgba(66,142,59,1),
+      '60': rgba(78,160,70,1),
+      '50': rgba(89,174,80,1),
+      '40': rgba(111,187,105,1),
+      '30': rgba(136,198,131,1),
+      '20': rgba(169,214,166,1),
+      '10': rgba(203,230,201,1),
+      '5': rgba(233,245,233,1),
+    ),
+    'yellow': (
+      '90': rgba(238,104,0,1),
+      '80': rgba(238,136,0,1),
+      '70': rgba(238,152,0,1),
+      '60': rgba(238,171,0,1),
+      '50': rgba(237,184,0,1),
+      '40': rgba(239,194,27,1),
+      '30': rgba(241,206,72,1),
+      '20': rgba(245,219,126,1),
+      '10': rgba(249,233,177,1),
+      '5': rgba(252,247,225,1),
+    ),
+    'background': (
+      '50': rgba(255,255,255,1),
+      '0': rgba(247,248,251,1),
+    ),
+    'white': (
+      '50': rgba(255,255,255,1)
+    ),
+    'backdrop': (
+      '50': rgba(144,148,153,0.4)
+    )
+  ),
+  'dark': (
+    'primary': (
+      '90': rgba(0,49,86,1),
+      '80': rgba(0,68,120,1),
+      '70': rgba(7,91,154,1),
+      '60': rgba(20,115,188,1),
+      '50': rgba(37,142,222,1),
+      '40': rgba(58,169,255,1),
+      '30': rgba(102,189,255,1),
+      '20': rgba(146,208,255,1),
+      '10': rgba(191,227,255,1),
+      '5': rgba(235,246,255,1),
+    ),
+    'text': (
+      '90': rgba(239,239,241,1),
+      '80': rgba(215,216,221,1),
+      '70': rgba(189,189,198,1),
+      '60': rgba(162,163,174,1),
+      '50': rgba(142,143,157,1),
+      '40': rgba(122,123,139,1),
+      '30': rgba(107,109,123,1),
+      '20': rgba(88,90,101,1),
+      '10': rgba(71,71,81,1),
+      '5': rgba(57,57,65,1),
+    ),
+    'red': (
+      '90': rgba(168,46,38,1),
+      '80': rgba(183,56,49,1),
+      '70': rgba(194,63,56,1),
+      '60': rgba(212,72,62,1),
+      '50': rgba(226,82,65,1),
+      '40': rgba(222,94,86,1),
+      '30': rgba(215,121,118,1),
+      '20': rgba(227,158,156,1),
+      '10': rgba(247,207,211,1),
+      '5': rgba(252,236,238,1),
+      '0': rgba(255,244,246,1),
+    ),
+    'green': (
+      '90': rgba(40,95,27,1),
+      '80': rgba(55,126,48,1),
+      '70': rgba(66,142,59,1),
+      '60': rgba(78,160,70,1),
+      '50': rgba(89,174,80,1),
+      '40': rgba(111,187,105,1),
+      '30': rgba(136,198,131,1),
+      '20': rgba(169,214,166,1),
+      '10': rgba(203,230,201,1),
+      '5': rgba(233,245,233,1),
+      '0': rgba(244,252,244,1),
+    ),
+    'yellow': (
+      '90': rgba(238,104,0,1),
+      '80': rgba(238,136,0,1),
+      '70': rgba(238,152,0,1),
+      '60': rgba(238,171,0,1),
+      '50': rgba(237,184,0,1),
+      '40': rgba(239,194,27,1),
+      '30': rgba(241,206,72,1),
+      '20': rgba(245,219,126,1),
+      '10': rgba(249,233,177,1),
+      '5': rgba(252,247,225,1),
+    ),
+    'background': (
+      '0': rgba(33,33,39,1),
+      '50': rgba(41,41,48,1)
+    ),
+    'white': (
+      '50': rgba(255, 255, 255, 1)
+    ),
+    'backdrop': (
+      '50': rgba(144,148,153,0.4)
+    )
+  )
+);
+
+$palettes: 'primary', 'text', 'red', 'green', 'yellow', 'background', 'white', 'backdrop';
+$grades: '90', '80', '70', '60', '50', '40', '30', '20', '10', '5', '0';