@tetacom/ng-components 1.0.25 → 1.0.28

package/dist/style/layout.scss

@@ -1,109 +0,0 @@
-@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/dist/style/library.scss

@@ -1,208 +0,0 @@
-.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/dist/style/list.scss

@@ -1,70 +0,0 @@
-@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/dist/style/loader.scss

@@ -1,40 +0,0 @@
-@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/dist/style/message.scss

@@ -1,51 +0,0 @@
-@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/dist/style/modal.scss

@@ -1,29 +0,0 @@
-@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/dist/style/navigation.scss

@@ -1,26 +0,0 @@
-@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/dist/style/presets/color-presets.scss

@@ -1,151 +0,0 @@
-$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';