@morozeckiy/dd-lib 0.7.63 → 0.7.64

package/assets/scss/common.scss

@@ -0,0 +1,395 @@
+@use '../scss/mixins' as *;
+@use '../scss/fonts' as *;
+@use '../scss/vars' as *;
+@use '../scss/grid' as *;
+
+html {
+  font-family: 'ALS_Sirius', Roboto, Helvetica, Arial, san-serif, serif; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+  color: var(--light-black-color);
+}
+
+.root-container {
+  min-height: calc(100vh - var(--header-height));
+  background-color: var(--main-bgc);
+  //overflow: hidden; //выпадашка поиска в подписка гор воды закатывается под футер
+}
+
+.main-width {
+  width: 100%;
+  max-width: var(--main-body-width);
+  margin: 0 auto;
+}
+
+.g-container {
+  max-width: var(--main-body-width);
+  margin: 0 auto;
+
+  @include below($mini-desktop) {
+    padding-left: var(--side-padding);
+    padding-right: var(--side-padding);
+  }
+
+  @include below($mobile) {
+    padding-left: var(--side-padding-mobile);
+    padding-right: var(--side-padding-mobile);
+  }
+}
+
+.g-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  width: 100%;
+  height: 100%;
+  background: #251c2cb2;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+
+.g-table {
+  border: 1px solid var(--gray-color-200);
+  border-radius: 24px;
+  overflow: hidden;
+
+  @include below($tablet) {
+    border: none;
+    border-radius: 0;
+  }
+
+  &__body {
+    overflow: auto;
+  }
+
+  &__header,
+  &__item {
+    display: flex;
+    padding: 12px 20px;
+    font-size: 14px;
+    line-height: 24px;
+    color: var(--light-black-color);
+
+    &:not(:last-child) {
+      border-bottom: 1px solid var(--gray-color-200);
+
+      @include below($tablet) {
+        margin-bottom: 16px;
+      }
+    }
+
+    @include below($tablet) {
+      position: relative;
+      display: block;
+      padding: 16px;
+      border-radius: 24px;
+      border: 1px solid var(--disabled-bgc);
+      background-color: var(--gray-color-300);
+    }
+  }
+
+  &__header {
+    color: var(--second-gray-color);
+    background-color: var(--gray-bgc-2);
+  }
+
+  &__cell {
+    &.numb {
+      width: 5%;
+
+      @include below($tablet) {
+        display: inline-flex;
+        margin-bottom: 8px;
+        padding: 0 8px;
+        border-radius: 10px;
+        width: auto;
+        height: 32px;
+        line-height: 32px;
+        background-color: var(--disabled-color);
+        color: var(--white-color);
+      }
+    }
+  }
+}
+
+.half-width {
+  width: 50%;
+}
+
+
+.full-width {
+  width: 100%;
+}
+
+.full-height {
+  height: 100%;
+}
+
+.full-size {
+  height: 100%;
+  width: 100%;
+}
+
+.pos-relative {
+  position: relative;
+}
+
+.pos-absolute {
+  position: absolute;
+}
+
+.d-block {
+  display: block;
+}
+
+.d-inline-flex {
+  display: inline-flex;
+}
+
+.d-flex {
+  display: flex;
+
+  &.f-1 {
+    flex: 1;
+  }
+}
+
+.d-grid {
+  display: grid;
+}
+
+.flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+.flex-gap-column {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.align-center {
+  align-items: center;
+}
+
+.align-start {
+  align-items: flex-start;
+}
+
+.align-end {
+  align-items: flex-end;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.justify-end {
+  justify-content: flex-end;
+}
+
+.justify-start {
+  justify-content: flex-start;
+}
+
+.justify-around {
+  justify-content: space-around;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.fixed {
+  position: fixed;
+}
+
+::-webkit-scrollbar {
+  width: 4px;
+  margin-bottom: 15px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: var(--input-gray-bgc);
+  margin-bottom: 15px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: rgba(130, 129, 129, 0.47);
+  border-radius: 20px;
+}
+
+.gray-svg {
+  filter: contrast(0);
+}
+
+.opacity-3 {
+  opacity: 0.3;
+}
+
+.black-svg {
+  filter: brightness(0);
+}
+
+.disabled {
+  pointer-events: none;
+  cursor: auto;
+}
+
+.bg-center,
+.bg-contain,
+.bg-cover {
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.bg-contain {
+  background-size: contain;
+}
+
+.bg-cover {
+  background-size: cover;
+}
+
+.empty-photo {
+  background: url('../images/svg/user-empty.svg') no-repeat center;
+  width: 100px;
+  height: 100px;
+}
+
+.cdk-overlay-pane {
+  &.right {
+    margin-left: 35px;
+  }
+
+  &.left {
+    margin-right: 35px;
+  }
+
+  &.top {
+    margin-bottom: 16px;
+  }
+
+  &.bottom {
+    margin-top: 16px;
+  }
+
+  &.toast-top {
+    margin-top: -20px;
+  }
+}
+
+.column-tablet {
+  @include below($tablet) {
+    flex-direction: column;
+    align-items: baseline;
+  }
+}
+
+.show-tablet {
+  display: none !important;
+
+  @include below($tablet) {
+    display: block !important;
+  }
+}
+
+.column-mobile {
+  @include below($mobile) {
+    flex-direction: column;
+    align-items: baseline;
+  }
+}
+
+.show-mobile {
+  display: none !important;
+
+  @include below($mobile) {
+    display: block !important;
+  }
+}
+
+.tablet-flex {
+  @include below($tablet) {
+    display: flex !important;
+  }
+}
+
+.mobile-flex {
+  @include below($mobile) {
+    display: flex !important;
+  }
+}
+
+.hide-tablet {
+  @include below($tablet) {
+    display: none !important;
+  }
+}
+
+.hide-mobile {
+  @include below($mobile) {
+    display: none !important;
+  }
+}
+
+.cup {
+  cursor: pointer;
+}
+
+.dd-default-table {
+  border-radius: 24px;
+  border: 1px solid var(--shared-bgc);
+  overflow: auto;
+
+  &__header {
+    padding: 12px 20px;
+    display: flex;
+    background-color: var(--gray-bgc-2);
+    color: var(--second-gray-color);
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 24px;
+    text-align: left;
+  }
+
+  &__item {
+    padding: 12px 20px;
+    display: flex;
+  }
+}
+
+.dd-default-table-cell {
+  &:nth-child(1) {
+    width: 5%;
+  }
+
+  &:nth-child(2) {
+    width: 35%;
+  }
+
+  &:nth-child(3) {
+    width: 30%;
+  }
+
+  &:nth-child(4) {
+    width: 30%;
+  }
+}
+
+@include offsets('');
+@include grid('', $col-count);
+
+@include below($tablet) {
+  @include offsets('t-');
+}
+
+@include below($mobile) {
+  @include offsets('m-');
+}

package/assets/scss/fonts.scss

@@ -0,0 +1,23 @@
+@font-face {
+  font-family: 'ALS_Sirius';
+  src: url('../fonts/ALS_Sirius_Regular_0.95.otf');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'ALS_Sirius';
+  src: url('../fonts/ALS_Sirius_Medium_1.6.otf');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'ALS_Sirius';
+  src: url('../fonts/ALS_Sirius_Bold_0.95.otf');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}

package/assets/scss/grid.scss

@@ -0,0 +1,158 @@
+
+/* autoprefixer grid: autoplace */
+$col-count: 3;
+$col-md-count: 6;
+$col-lg-count: 12;
+
+@mixin grid($prefix, $col-count) {
+  @for $i from 1 through $col-count {
+    .col#{$prefix}-#{$i} {
+      /* autoprefixer grid: ignore next */
+      grid-column-end: span $i;
+      -ms-grid-column-span: $i * 2 - 1 ;
+      min-width: 0; // fix for overflow hidden in ff
+    }
+  }
+
+  @for $i from 1 through $col-count - 1 {
+    .push#{$prefix}-#{$i} {
+      /* autoprefixer grid: ignore next */
+      grid-column-start: $i + 1;
+      -ms-grid-column: $i * 2;
+    }
+  }
+}
+
+
+.container {
+  box-sizing: border-box;
+  padding: 0 16px;
+  margin: 0 auto;
+}
+
+.grid-row {
+  display: grid;
+  grid-template-columns: repeat($col-count, 1fr);
+  grid-template-rows: auto;
+  grid-gap: 32px;
+
+  @include grid('', $col-count);
+}
+
+.grid-none {
+  display: block;
+}
+
+.masonry {
+  display: grid;
+  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    display: -ms-grid;
+  }
+  column-gap: 32px;
+  row-gap: 16px;
+}
+
+
+@media all and (min-width: 768px) {
+  .container {
+    padding: 0 64px;
+  }
+
+  .grid-row,
+  .grid-row-md {
+    display: grid;
+    grid-template-columns: repeat($col-md-count, 1fr);
+    grid-template-rows: auto;
+    grid-gap: 32px;
+
+    @include grid('-md', $col-md-count);
+  }
+
+  .grid-none-md {
+    display: block;
+  }
+
+  .masonry {
+    grid-template-columns: repeat(1, minmax(566px,1fr));
+    -ms-grid-columns: minmax(400px, 1fr) minmax(400px, 1fr);
+
+    &.masonry-ie {
+      content: '';
+      display: table;
+      clear: both;
+      .masonry-brick {
+        float: left;
+        width: 46%;
+        margin: 0 2% 32px 2%;
+      }
+    }
+  }
+}
+
+@media all and (min-width: 1140px) {
+  .container, .container-lg {
+    max-width: 1366px;
+    padding: 0 72px;
+    margin: 0 auto;
+  }
+
+  .grid-row,
+  .grid-row-lg {
+    display: grid;
+    grid-template-columns: repeat($col-lg-count, 1fr);
+    grid-template-rows: auto;
+    grid-gap: 32px;
+
+    &.base-9 {
+      display: grid;
+      grid-template-columns: repeat(9, 1fr);
+      grid-template-rows: auto;
+    }
+
+    @include grid('-lg', $col-lg-count);
+  }
+
+  .grid-none-lg {
+    display: block;
+  }
+
+  .masonry {
+    grid-template-columns: repeat(2, minmax(300px,1fr));
+  }
+}
+
+@media print {
+  @mixin grid($prefix, $col-count) {
+    @for $i from 1 through $col-count {
+      .col#{$prefix}-#{$i} {
+        /* autoprefixer grid: ignore next */
+        grid-column-end: span $i;
+        -ms-grid-column-span: $i * 2 - 1 ;
+      }
+    }
+
+    @for $i from 1 through $col-count - 1 {
+      .push#{$prefix}-#{$i} {
+        /* autoprefixer grid: ignore next */
+        grid-column-start: $i + 1;
+        -ms-grid-column: $i * 2;
+      }
+    }
+  }
+
+
+  .container {
+    box-sizing: border-box;
+    padding: 0 16px;
+    margin: 0;
+  }
+
+  .grid-row {
+    display: grid;
+    grid-template-columns: repeat($col-count, 1fr);
+    grid-template-rows: auto;
+    grid-gap: 32px;
+
+    @include grid('', $col-count);
+  }
+}

package/assets/scss/keyframes.scss

@@ -0,0 +1,26 @@
+@keyframes shift {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes filter-show {
+  0% {
+    transform: translateY(-10%);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/assets/scss/mixins.scss

@@ -0,0 +1,123 @@
+// =============================================================================
+// Медиа запросы
+// =============================================================================
+
+// меньше указанной величины (по умолчанию ширина)
+@mixin below($width, $orientation: 'width') {
+  @media screen and (max-#{$orientation}: $width) {
+    @content;
+  }
+}
+
+// больше указанной величины (по умолчанию ширина)
+@mixin above($width, $orientation: 'width') {
+  @media screen and (min-#{$orientation}: $width) {
+    @content;
+  }
+}
+
+// между первой и второй величиной (по умолчанию ширина)
+@mixin between($minWidth, $maxWidth, $orientation: 'width') {
+  @media screen and (min-#{$orientation}: $minWidth) and (max-#{$orientation}: $maxWidth) {
+    @content;
+  }
+}
+
+// =============================================================================
+// String Replace (вспомогательный миксин для font-face)
+// =============================================================================
+
+@function str-replace($string, $search, $replace: '') {
+  $index: str-index($string, $search);
+
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace +
+      str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+
+  @return $string;
+}
+
+// =============================================================================
+// Font Face
+// =============================================================================
+
+// $name - название для font-family
+// $path - путь к шрифту без формата
+// $weight - font-weight
+// $style - font-style
+// $exts - форматы шрифта, которые используются
+@mixin font-face($name, $path, $weight: null, $style: null, $exts: otf eot woff2 woff ttf svg) {
+  $src: null;
+
+  $extmods: (
+    eot: '?',
+    svg: '#' + str-replace($name, ' ', '_'),
+  );
+
+  $formats: (
+    otf: 'opentype',
+    ttf: 'truetype',
+  );
+
+  @each $ext in $exts {
+    $extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext);
+    $format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext);
+    $src: append($src, url(quote($path + '.' + $extmod)) format(quote($format)), comma);
+  }
+
+  @font-face {
+    font-family: quote($name);
+    font-style: $style;
+    font-weight: $weight;
+    src: $src;
+  }
+}
+
+@mixin offsets($prefix) {
+  @for $i from 0 through 24 {
+    .#{$prefix}mt-#{$i * 4} {
+      margin-top: #{$i * 4}px;
+    }
+
+    .#{$prefix}mb-#{$i * 4} {
+      margin-bottom: #{$i * 4}px;
+    }
+
+    .#{$prefix}ml-#{$i * 4} {
+      margin-left: #{$i * 4}px;
+    }
+
+    .#{$prefix}mr-#{$i * 4} {
+      margin-right: #{$i * 4}px;
+    }
+
+    .#{$prefix}m-#{$i * 4} {
+      margin: #{$i * 4}px;
+    }
+
+    .#{$prefix}pt-#{$i * 4} {
+      padding-top: #{$i * 4}px;
+    }
+
+    .#{$prefix}pb-#{$i * 4} {
+      padding-bottom: #{$i * 4}px;
+    }
+
+    .#{$prefix}pl-#{$i * 4} {
+      padding-left: #{$i * 4}px;
+    }
+
+    .#{$prefix}pr-#{$i * 4} {
+      padding-right: #{$i * 4}px;
+    }
+
+    .#{$prefix}p-#{$i * 4} {
+      padding: #{$i * 4}px;
+    }
+
+    .#{$prefix}gap-#{$i * 4} {
+      gap: #{$i * 4}px;
+    }
+  }
+}