@tetacom/ng-components 1.0.3 → 1.0.7

package/style/presets/font-presets.scss

@@ -0,0 +1,132 @@
+$fonts: (
+  h-1: (
+    font-size:92px,
+    font-family:"Open Sans",
+    font-style:normal,
+    font-weight: 300,
+    letter-spacing: 0.15px
+  ),
+  h-2: (
+    font-size:60px,
+    font-family:"Open Sans",
+    font-style:normal,
+    font-weight: 300,
+    letter-spacing: 0.15px
+  ),
+  h-3: (
+    font-size:48px,
+    font-family:"Open Sans",
+    font-style:normal,
+    line-height:60px,
+    font-weight: 400,
+    letter-spacing: 0.15px
+  ),
+  h-4: (
+    font-size:35px,
+    font-family:"Open Sans",
+    font-weight: 400,
+    font-style:normal,
+    line-height:44px,
+    letter-spacing: 0.15px
+  ),
+  h-5: (
+    font-size:28px,
+    font-family:"Open Sans",
+    line-height:36px,
+    font-weight: 600,
+    letter-spacing: 0.15px
+  ),
+  h-6: (
+    font-size:20px,
+    font-family:"Open Sans",
+    line-height:28px,
+    font-weight: 600,
+    letter-spacing: 0.15px
+  ),
+  title-1: (
+    font-size:15px,
+    font-family:"Open Sans",
+    line-height:24px,
+    font-weight: 600,
+    letter-spacing: 0.15px
+  ),
+  title-2: (
+    font-size:13px,
+    font-family:"Open Sans",
+    line-height:16px,
+    font-weight: 600,
+  ),
+  title-3: (
+    font-size:11px,
+    font-family:"Open Sans",
+    line-height:16px,
+    font-weight: 600,
+  ),
+  body-1: (
+    font-size:15px,
+    font-family:"Open Sans",
+    font-style:normal,
+    line-height:24px,
+    font-weight: 400,
+  ),
+  body-2: (
+    font-size:13px,
+    font-family:"Open Sans",
+    font-style:normal,
+    line-height:20px,
+    font-weight: 400,
+  ),
+  body-3: (
+    font-size:11px,
+    font-family:"Open Sans",
+    font-style:normal,
+    line-height:16px,
+    font-weight: 400,
+  ),
+  button-1: (
+    font-size:13px,
+    font-family:"Open Sans",
+    line-height:20px,
+    font-weight: 600,
+  ),
+  button-2: (
+    font-size:11px,
+    font-family:"Open Sans",
+    line-height:16px,
+    font-weight: 600,
+  ),
+  button-3: (
+    font-size:10px,
+    font-family:"Open Sans",
+    line-height:14px,
+    font-weight: 600,
+  ),
+  caption: (
+    font-size:10px,
+    font-family:"Open Sans",
+    font-style:normal,
+    line-height:14px,
+    font-weight: 400,
+  ),
+  error-message: (
+    font-size:10px,
+    font-family:"Open Sans",
+    font-style:normal,
+    line-height:12px,
+    font-weight: 400,
+  ),
+  table-header: (
+    font-size:11px,
+    font-family:"Open Sans",
+    line-height:16px,
+    font-weight: 600,
+  ),
+  overline: (
+    text-transform: uppercase,
+    font-size:10px,
+    font-family:"Open Sans",
+    line-height:12px,
+    font-weight: 600,
+    letter-spacing: 1.5px
+  )
+);

package/style/presets/layout-presets.scss

@@ -0,0 +1 @@
+$columns-count: 12;

package/style/presets/shadow-presets.scss

@@ -0,0 +1,16 @@
+$shadows: (
+  'default': (
+    '1': 0px 4px 6px rgba(39, 39, 39, 0.26),
+    '2': 0px 6px 12px rgba(39, 39, 39, 0.26),
+    '3': 0px 8px 16px rgba(39, 39, 39, 0.26),
+    '4': 0px 12px 24px rgba(39, 39, 39, 0.26),
+    '5': 0px 16px 32px rgba(39, 39, 39, 0.26),
+  ),
+  'dark': (
+    '1': 0px 4px 6px rgba(0, 0, 0, 0.4),
+    '2': 0px 6px 12px rgba(0, 0, 0, 0.4),
+    '3': 0px 8px 16px rgba(0, 0, 0, 0.4),
+    '4': 0px 12px 24px rgba(0, 0, 0, 0.4),
+    '5': 0px 16px 32px rgba(0, 0, 0, 0.4),
+  )
+);

package/style/presets/spacing-presets.scss

@@ -0,0 +1,2 @@
+$spaceStep: 4px;
+$spacingLength: 15;

package/style/progress.scss

@@ -0,0 +1,28 @@
+@import "util/color-util.scss";
+
+.progress {
+  width: 100%;
+  height: 4px;
+  display: flex;
+  background: getColorVar('text', '10');
+  position: relative;
+
+  &-bar {
+    background: getColorVar('primary', '20');
+  }
+
+  &-slider {
+    position: absolute;
+    height: 8px;
+    width: 8px;
+    border: solid 0;
+    margin-left: -2px;
+    margin-top: -2px;
+    border-radius: 4px;
+    background: getColorVar('primary', '50');
+  }
+
+  &:hover &-slider, &-slider_visible {
+    cursor: grab;
+  }
+}

package/style/radio.scss

@@ -0,0 +1,56 @@
+@import "util/color-util.scss";
+
+.radio {
+  display: grid;
+  grid-gap: 12px;
+  grid-auto-rows: max-content;
+
+  &-button {
+    grid-gap: 4px;
+    display: inline-flex;
+    align-items: center;
+
+    &_disabled {
+      filter: grayscale(50%);
+      color: getColorVar('text', '40');
+    }
+
+    &-icon {
+      height: 16px;
+      width: 16px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border: solid 1px getColorVar('text', '30');
+      border-radius: 8px;
+    }
+
+    &_disabled &-icon {
+      background-color: getColorVar('text', '5');
+      color: getColorVar('text', '40');
+    }
+
+    &-small-icon {
+      height: 8px;
+      width: 8px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border: solid 0 transparent;
+      border-radius: 4px;
+      background-color: getColorVar('primary', '50');
+    }
+
+    &_disabled &-small-icon {
+      background-color: getColorVar('text', '30');
+    }
+
+    &:hover:not(&_disabled) {
+      cursor: pointer;
+    }
+
+    &:hover:not(&_disabled) &-icon {
+      border: solid 1px getColorVar('text', '50');
+    }
+  }
+}

package/style/reset.scss

@@ -0,0 +1,35 @@
+html {
+  font-size: 10px;
+}
+
+*, *::after, *::before {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+:focus {
+  outline: none;
+}
+
+body {
+  font-kerning: normal;
+  height: 100vh;
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  font-size: 100%;
+  margin: 0;
+  background: transparent;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+  fill: inherit;
+}

package/style/resize-panel.scss

@@ -0,0 +1,58 @@
+@import "util/color-util.scss";
+
+.resize {
+  &-panel {
+    position: relative;
+  }
+
+  &-grab {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    fill: getColorVar('text', '20');
+    z-index: 10;
+
+    &_active, &:hover {
+      fill: getColorVar('text', '90');
+    }
+
+    &_left, &_right, &_vertical {
+      width: 8px;
+      height: 100%;
+      top: 0;
+    }
+
+    &_left {
+      left: -8px;
+    }
+
+    &_right {
+      left: 100%;
+    }
+
+    &_top, &_bottom {
+      height: 8px;
+      width: 100%;
+      left: 0;
+    }
+
+    &_top {
+      top: -8px;
+    }
+
+    &_bottom {
+      top: 100%;
+    }
+  }
+
+  &-drag {
+    &_horizontal:hover, &_horizontal#{&}_active {
+      cursor: row-resize;
+    }
+
+    &_vertical:hover, &_vertical#{&}_active {
+      cursor: col-resize;
+    }
+  }
+}

package/style/scroll.scss

@@ -0,0 +1,51 @@
+@import "util/color-util.scss";
+@import "util/scroll-util.scss";
+
+::-webkit-scrollbar-button {
+  width: 4px;
+  height: 4px;
+}
+
+::-webkit-scrollbar {
+  height: 12px;
+  width: 12px;
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-thumb {
+  border: 4px solid transparent;
+  //border-radius: 4px;
+  background-clip: padding-box;
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-track:hover {
+  &::-webkit-scrollbar-thumb {
+    background-color: getColorVar('primary', '50');
+    border: 2px solid transparent;
+    //border-radius: 4px;
+  }
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: getColorVar('text', '10');
+  //border-radius: 4px;
+
+  &:hover {
+    background-color: getColorVar('primary', '50');
+    border: 2px solid transparent;
+    //border-radius: 4px;
+  }
+}
+
+::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+.scrollable {
+  @include scrollable();
+}

package/style/select.scss

@@ -0,0 +1,108 @@
+@import "util/color-util.scss";
+@import "util/font-util.scss";
+
+.select {
+  display: inline-flex;
+  height: 24px;
+  width: 100%;
+
+  &_multiple {
+    min-height: 24px;
+    height: unset;
+  }
+
+  &_disabled &-head {
+    background-color: getColorVar('text', 5);
+    border: 0;
+    color: getColorVar('text', 40);
+  }
+
+  &-head {
+    background-color: getColorVar('background', '50');
+    border: solid 1px getColorVar('text', '20');
+    color: getColorVar('text', '90');
+    fill: getColorVar('text', '40');
+    border-radius: 2px;
+    align-items: center;
+    white-space: nowrap;
+    padding: 0 4px;
+    @include getFont($fonts, 'body-3');
+    transition: border-color 0.4s;
+    overflow: hidden;
+
+    &_invalid {
+      border-color: getColorVar('red', '50');
+    }
+  }
+
+  $p: &;
+
+  &:hover:not(&_disabled) {
+    #{$p}-head {
+      cursor: pointer;
+      border-color: getColorVar('text', '40');
+    }
+  }
+
+  &-chip-field {
+    margin-top: 8px;
+    padding: 4px 12px 0 12px;
+    border-top: solid 1px getColorVar('text', 10);
+  }
+
+  &-table &-head {
+    border-radius: 0;
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    &-icon {
+      position: absolute;
+      left: 12px;
+    }
+
+    &-arrow {
+      position: absolute;
+      right: 12px;
+    }
+  }
+
+  &:focus:not(&_disabled) &-head, &_open &-head {
+    border-color: getColorVar('primary', '50');
+  }
+
+  &-search {
+    display: inline-flex;
+    align-items: center;
+    flex: 1;
+    padding-bottom: 4px;
+
+    teta-text-field {
+      border: none;
+    }
+  }
+
+  &-list {
+    margin-top: 2px;
+    padding: 8px 0;
+    display: inline-flex;
+    flex-direction: column;
+    border-radius: 2px;
+    background-color: getColorVar('background', '50');
+    @include getFont($fonts, 'body-3');
+
+    &-item {
+      padding: 0 8px 0 32px;
+      white-space: nowrap;
+
+      .icon {
+        fill: getColorVar('primary', 50) !important;
+      }
+
+      &_active {
+        padding: 0 8px 0 8px;
+      }
+    }
+  }
+}

package/style/shadow.scss

@@ -0,0 +1,23 @@
+@use "sass:map";
+@use "sass:list";
+@import "util/shadow-util.scss";
+
+body {
+  @each $shadowName, $shadow in map.get($shadows, "default") {
+    --shadow-#{$shadowName}: #{$shadow};
+  }
+}
+
+@each $themeName, $theme in $shadows {
+  .theme-#{$themeName} {
+    @each $shadowName, $shadow in $theme {
+      --shadow-#{$shadowName}: #{$shadow};
+    }
+  }
+}
+
+@for $i from 1 through 5 {
+  .shadow-#{$i} {
+    @include shadow($i);
+  }
+}

package/style/sidebar.scss

@@ -0,0 +1,40 @@
+@import "util/shadow-util.scss";
+@import "util/color-util.scss";
+
+.sidebar {
+  position: fixed;
+  @include shadow(5);
+
+  &-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: getColorVar('backdrop', '50');
+  }
+
+  &-left {
+    left: 0;
+    top: 0;
+    height: 100%;
+  }
+
+  &-right {
+    right: 0;
+    top: 0;
+    height: 100%;
+  }
+
+  &-top {
+    top: 0;
+    left: 0;
+    width: 100%;
+  }
+
+  &-bottom {
+    bottom: 0;
+    left: 0;
+    width: 100%;
+  }
+}

package/style/sizing.scss

@@ -0,0 +1,12 @@
+@import "common.scss";
+
+@for $i from 0 through $spacingLength {
+  .height-#{$i} {
+    height: $spaceStep * $i;
+    flex-shrink: 0;
+  }
+  .width-#{$i} {
+    width: $spaceStep * $i;
+    flex-shrink: 0;
+  }
+}

package/style/spacing.scss

@@ -0,0 +1,45 @@
+@import "common.scss";
+
+$spacingTypes: margin, padding;
+
+@each $spacingType in $spacingTypes {
+  @for $i from 0 through $spacingLength {
+    .#{$spacingType}-h-#{$i} {
+      #{$spacingType}-left: $i * $spaceStep !important;
+      #{$spacingType}-right: $i * $spaceStep !important;
+    }
+    .#{$spacingType}-v-#{$i} {
+      #{$spacingType}-top: $i * $spaceStep !important;
+      #{$spacingType}-bottom: $i * $spaceStep !important;
+    }
+    @each $dir in $directions {
+      .#{$spacingType}-#{$dir}-#{$i} {
+        #{$spacingType}-#{$dir}: $i * $spaceStep !important;
+      }
+    }
+  }
+}
+
+@each $spacingType in $spacingTypes {
+  @for $i from 0 through $spacingLength {
+    .#{$spacingType}-#{$i} {
+      #{$spacingType}: $i * $spaceStep !important;
+    }
+  }
+}
+
+.margin-left-auto {
+  margin-left: auto;
+}
+
+.margin-right-auto {
+  margin-right: auto;
+}
+
+.margin-top-auto {
+  margin-top: auto;
+}
+
+.margin-bottom-auto {
+  margin-bottom: auto;
+}

package/style/switch.scss

@@ -0,0 +1,36 @@
+@import "util/font-util.scss";
+@import "util/color-util.scss";
+
+.switch {
+  display: inline-flex;
+  border: solid 0;
+  border-radius: 2px;
+  height: 24px;
+  @include getFont($fonts, 'button-2');
+  background: getColorVar('text', '5');
+  color: getColorVar('text', '90');
+  fill: getColorVar('text', '90');
+  overflow: hidden;
+
+  &-button {
+    display: inline-flex;
+    padding: 0 8px;
+    align-items: center;
+    justify-content: center;
+
+    &:hover {
+      cursor: pointer;
+    }
+    &:hover:not(&_active) {
+      background: getColorVar('text', '10');
+    }
+
+    &_active {
+      border: solid 0;
+      border-radius: 2px;
+      background: getColorVar('primary', '50');
+      fill: getColorVar('white', '50');
+      color: getColorVar('white', '50');
+    }
+  }
+}