@morozeckiy/dd-lib 0.9.8 → 0.9.10

package/assets/scss/common.scss

@@ -1,402 +1,402 @@
-@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 */
-}
-
-.root-container {
-  min-height: calc(100vh - var(--header-height));
-  //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 {
-  svg path {
-    stroke: var(--light-black-color);
-  }
-}
-
-.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;
-}
-
-.photo-img {
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-  object-fit: cover;
-}
-
-.cdk-overlay-pane {
-  &.right {
-    margin-left: 8px;
-  }
-
-  &.left {
-    margin-right: 8px;
-  }
-
-  &.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-');
-}
+@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 */
+}
+
+.root-container {
+  min-height: calc(100vh - var(--header-height));
+  //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 {
+  svg path {
+    stroke: var(--light-black-color);
+  }
+}
+
+.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;
+}
+
+.photo-img {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.cdk-overlay-pane {
+  &.right {
+    margin-left: 8px;
+  }
+
+  &.left {
+    margin-right: 8px;
+  }
+
+  &.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-');
+}