@morozeckiy/dd-lib 0.1.1

package/assets/scss/common.scss

@@ -0,0 +1,229 @@
+@import '../scss/mixins';
+@import '../scss/fonts';
+@import '../scss/vars';
+
+.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);
+  }
+}
+
+.no-wrap-text {
+  white-space: nowrap;
+}
+
+.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-end {
+  align-items: flex-end;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.justify-around {
+  justify-content: space-around;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.text-center {
+  display: block;
+  text-align: center;
+}
+
+.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;
+}
+
+.empty-photo {
+  background: url('../../assets/images/users/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;
+  }
+}
+
+//a {
+//  color: var(--primary-green-color);
+//  text-decoration: underline;
+//  &:hover {
+//    text-decoration: none;
+//  }
+//}
+.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%;
+  }
+}

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/mixins.scss

@@ -0,0 +1,75 @@
+// =============================================================================
+// Медиа запросы
+// =============================================================================
+
+// меньше указанной величины (по умолчанию ширина)
+@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;
+  }
+}

package/assets/scss/modal.scss

@@ -0,0 +1,89 @@
+$z-index: 1999999999;
+
+html.modal-opened {
+  overflow: hidden;
+}
+
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  min-width: 100%;
+  min-height: 100%;
+  background: #251c2cb2;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  transition: background 0.25s;
+  z-index: 1999999998;
+}
+
+.popup-wrapper {
+  position: fixed;
+  z-index: $z-index;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+}
+
+.popup {
+  min-height: 100%;
+  background: #fff;
+  overflow: hidden;
+
+  .close {
+    position: absolute;
+    top: 24px;
+    right: 24px;
+    width: 20px;
+    height: 20px;
+    border: none;
+    background: transparent;
+
+    &:after {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 20px;
+      height: 20px;
+      background: url(../images/svg/clear.svg) 0 0 no-repeat;
+      cursor: pointer;
+    }
+  }
+
+  .title {
+    padding-right: 40px;
+    padding-bottom: 24px;
+    border-bottom: 1px solid #99b1e6;
+  }
+}
+
+@media all and (min-width: 768px) {
+  .popup-wrapper {
+    &.popup-wrapper-scroll {
+      overflow-y: auto;
+    }
+  }
+
+  .popup {
+    position: absolute;
+    overflow-y: visible;
+    top: 50%;
+    left: 50%;
+    max-width: var(--main-body-width);
+    min-height: auto;
+    max-height: 100%;
+    transform: translate3d(-50%, -50%, 0);
+    border-radius: 24px;
+
+    &.popup-scroll {
+      margin: 96px 0;
+      top: 0;
+      max-height: none;
+      min-height: 293px;
+      transform: translate3d(-50%, 0, 0);
+    }
+  }
+}