@factoringplus/pl-components-pack-v3 2.0.0-pre-optimized-20-icons → 2.0.0-pre-optimized-21-icons

package/src/styles/customBootstrap.scss

@@ -0,0 +1,742 @@
+@use './tokens';
+@use 'sass:list';
+@use '@/styles/tokens_scss/typeface_mixins' as *;
+
+$default-spacer: 4px;
+$spacers: (
+  0: $default-spacer * 0,
+  // 0px // 0: 0, // 0px
+  1: $default-spacer * 1,
+  // 4px // '05': $spacer * 0.25, // 4px
+  2: $default-spacer * 2,
+  // 8px // 1: $spacer * 0.5, // 8px
+  3: $default-spacer * 3,
+  // 12px // 2: $spacer * 0.75, // 12px
+  4: $default-spacer * 4,
+  // 16px // 3: $spacer, // 16px
+  6: $default-spacer * 6,
+  // 24px // 4: $spacer * 1.5, // 24px
+  8: $default-spacer * 8,
+  // 32px // 5: $spacer * 2, // 32px
+  10: $default-spacer * 10,
+  // 40px // 6: $spacer * 2.5, // 40px
+  12: $default-spacer * 12,
+  // 48px // 7: $spacer * 3, // 48px
+  14: $default-spacer * 14,
+  // 56px // 8: $spacer * 3.5, // 56px
+  16: $default-spacer * 16,
+  // 64px // 9: $spacer * 4, // 64px
+  18: $default-spacer * 18,
+  // 72px // 10: $spacer * 4.5, // 72px
+  20: $default-spacer * 20,
+  // 80px // 11: $spacer * 5, // 80px
+);
+
+@mixin respond-to($breakpoint) {
+  @if $breakpoint == phone-320 {
+    @media only screen and (width <= 429px) {
+      @content;
+    }
+  } @else if $breakpoint == phone-430 {
+    @media only screen and (width < 768px) {
+      @content;
+    }
+  } @else if $breakpoint == laptop {
+    @media only screen and (width >= 768px) and (width < 1024px) {
+      @content;
+    }
+  } @else if $breakpoint == desktop-medium {
+    @media only screen and (width <= 1199px) {
+      @content;
+    }
+  } @else if $breakpoint == mobile-table {
+    @media only screen and (width < 1024px) {
+      @content;
+    }
+  } @else if $breakpoint == desktop-minW {
+    @media only screen and (width >= 1440px) {
+      @content;
+    }
+  } @else if $breakpoint == desktop {
+    @media only screen and (width <= 1439px) {
+      @content;
+    }
+  } @else if $breakpoint == min730 {
+    @media only screen and (width >= 768px) {
+      @content;
+    }
+  }
+}
+
+$breakpoints: (
+  md: phone-430,
+  sm: phone-320,
+  lg: laptop,
+  xl: desktop-medium,
+  xxl: desktop-minw,
+  xxxl: desktop,
+  desk: min730,
+  md-table: mobile-table,
+);
+
+@mixin generate-classes {
+  @each $spacer-name, $spacer-value in $spacers {
+    .gap-#{$spacer-name} {
+      gap: $spacer-value;
+    }
+    .row-gap-#{$spacer-name} {
+      row-gap: $spacer-value;
+    }
+    .col-gap-#{$spacer-name} {
+      column-gap: $spacer-value;
+    }
+
+    .p-#{$spacer-name} {
+      padding: $spacer-value;
+    }
+    .pt-#{$spacer-name} {
+      padding-top: $spacer-value;
+    }
+    .pb-#{$spacer-name} {
+      padding-bottom: $spacer-value;
+    }
+    .ps-#{$spacer-name},
+    .pl-#{$spacer-name} {
+      padding-left: $spacer-value;
+    }
+    .pe-#{$spacer-name},
+    .pr-#{$spacer-name} {
+      padding-right: $spacer-value;
+    }
+    .px-#{$spacer-name} {
+      padding-right: $spacer-value;
+      padding-left: $spacer-value;
+    }
+    .py-#{$spacer-name} {
+      padding-top: $spacer-value;
+      padding-bottom: $spacer-value;
+    }
+
+    .m-#{$spacer-name} {
+      margin: $spacer-value;
+    }
+    .mt-#{$spacer-name} {
+      margin-top: $spacer-value;
+    }
+    .mb-#{$spacer-name} {
+      margin-bottom: $spacer-value;
+    }
+    .ms-#{$spacer-name},
+    .ml-#{$spacer-name} {
+      margin-left: $spacer-value;
+    }
+    .me-#{$spacer-name},
+    .mr-#{$spacer-name} {
+      margin-right: $spacer-value;
+    }
+    .mx-#{$spacer-name} {
+      margin-right: $spacer-value;
+      margin-left: $spacer-value;
+    }
+    .my-#{$spacer-name} {
+      margin-top: $spacer-value;
+      margin-bottom: $spacer-value;
+    }
+
+    .m-n#{$spacer-name} {
+      margin: $spacer-value * -1;
+    }
+    .mt-n#{$spacer-name} {
+      margin-top: $spacer-value * -1;
+    }
+    .mb-n#{$spacer-name} {
+      margin-bottom: $spacer-value * -1;
+    }
+    .ms-n#{$spacer-name},
+    .ml-n#{$spacer-name} {
+      margin-left: $spacer-value * -1;
+    }
+    .me-n#{$spacer-name},
+    .mr-n#{$spacer-name} {
+      margin-right: $spacer-value * -1;
+    }
+    .mx-n#{$spacer-name} {
+      margin-right: $spacer-value * -1;
+      margin-left: $spacer-value * -1;
+    }
+    .my-n#{$spacer-name} {
+      margin-top: $spacer-value * -1;
+      margin-bottom: $spacer-value * -1;
+    }
+  }
+}
+
+@include generate-classes;
+
+@mixin generate-adaptive {
+  @each $breakpoint-name, $breakpoint-value in $breakpoints {
+    @include respond-to($breakpoint-value) {
+      .m-#{$breakpoint-name}-auto {
+        margin: auto !important;
+      }
+      .mx-#{$breakpoint-name}-auto {
+        margin-right: auto !important;
+        margin-left: auto !important;
+      }
+      .my-#{$breakpoint-name}-auto {
+        margin-top: auto !important;
+        margin-bottom: auto !important;
+      }
+      .ms-#{$breakpoint-name}-auto,
+      .ml-#{$breakpoint-name}-auto {
+        margin-left: auto !important;
+      }
+      .me-#{$breakpoint-name}-auto,
+      .mr-#{$breakpoint-name}-auto {
+        margin-right: auto !important;
+      }
+      .mt-#{$breakpoint-name}-auto {
+        margin-top: auto !important;
+      }
+      .mb-#{$breakpoint-name}-auto {
+        margin-top: auto !important;
+      }
+      .d-#{$breakpoint-name}-grid {
+        display: grid !important;
+      }
+      .d-#{$breakpoint-name}-flex {
+        display: flex !important;
+      }
+      .d-#{$breakpoint-name}-flex-col {
+        display: flex !important;
+        flex-direction: column !important;
+      }
+      .d-#{$breakpoint-name}-inline-flex {
+        display: inline-flex !important;
+      }
+      .flex-#{$breakpoint-name}-grow-1 {
+        flex-grow: 1 !important;
+      }
+      .align-#{$breakpoint-name}-items-start {
+        align-items: flex-start !important;
+      }
+      .align-#{$breakpoint-name}-items-center {
+        align-items: center !important;
+      }
+      .align-#{$breakpoint-name}-items-end {
+        align-items: flex-end !important;
+      }
+      .align-#{$breakpoint-name}-content-start {
+        align-content: flex-start !important;
+      }
+      .align-#{$breakpoint-name}-content-center {
+        align-content: center !important;
+      }
+      .align-#{$breakpoint-name}-content-end {
+        align-content: flex-end !important;
+      }
+      .justify-#{$breakpoint-name}-content-start {
+        justify-content: flex-start !important;
+      }
+      .justify-#{$breakpoint-name}-content-between {
+        justify-content: space-between !important;
+      }
+      .justify-#{$breakpoint-name}-content-around {
+        justify-content: space-around !important;
+      }
+      .justify-#{$breakpoint-name}-content-end {
+        justify-content: flex-end !important;
+      }
+      .justify-#{$breakpoint-name}-content-center {
+        justify-content: center !important;
+      }
+      .flex-#{$breakpoint-name}-nowrap {
+        flex-wrap: nowrap !important;
+      }
+      .flex-#{$breakpoint-name}-wrap {
+        flex-wrap: wrap !important;
+      }
+
+      .flex-#{$breakpoint-name}-row {
+        flex-direction: row !important;
+      }
+
+      .flex-#{$breakpoint-name}-column {
+        flex-direction: column !important;
+      }
+
+      .flex-#{$breakpoint-name}-row-reverse {
+        flex-direction: row-reverse !important;
+      }
+
+      .flex-#{$breakpoint-name}-column-reverse {
+        flex-direction: column-reverse !important;
+      }
+
+      .align-#{$breakpoint-name}-self-center {
+        align-self: center !important;
+      }
+
+      .text-#{$breakpoint-name}-truncate {
+        overflow: hidden !important;
+        text-overflow: ellipsis !important;
+        white-space: nowrap !important;
+      }
+      .text-#{$breakpoint-name}-start {
+        text-align: left !important;
+      }
+      .text-#{$breakpoint-name}-end {
+        text-align: right !important;
+      }
+      .text-#{$breakpoint-name}-center {
+        text-align: center !important;
+      }
+      .pe-#{$breakpoint-name}-none {
+        pointer-events: none !important;
+      }
+      .cursor-#{$breakpoint-name}-pointer {
+        cursor: pointer !important;
+      }
+      .w-#{$breakpoint-name}-100 {
+        width: 100% !important;
+      }
+      .w-#{$breakpoint-name}-50 {
+        width: 50% !important;
+      }
+      .h-#{$breakpoint-name}-100 {
+        height: 100% !important;
+      }
+      .h-#{$breakpoint-name}-50 {
+        height: 50% !important;
+      }
+
+      .position-#{$breakpoint-name} {
+        &-relative {
+          position: relative !important;
+        }
+
+        &-absolute {
+          position: absolute !important;
+        }
+
+        &-fixed {
+          position: fixed !important;
+        }
+
+        &-sticky {
+          position: sticky !important;
+        }
+      }
+
+      @each $spacer-name, $spacer-value in $spacers {
+        .gap-#{$breakpoint-name}-#{$spacer-name} {
+          gap: $spacer-value !important;
+        }
+        .row-gap-#{$breakpoint-name}-#{$spacer-name} {
+          row-gap: $spacer-value !important;
+        }
+        .col-gap-#{$breakpoint-name}-#{$spacer-name} {
+          column-gap: $spacer-value !important;
+        }
+
+        .p-#{$breakpoint-name}-#{$spacer-name} {
+          padding: $spacer-value !important;
+        }
+        .pt-#{$breakpoint-name}-#{$spacer-name} {
+          padding-top: $spacer-value !important;
+        }
+        .pb-#{$breakpoint-name}-#{$spacer-name} {
+          padding-bottom: $spacer-value !important;
+        }
+        .ps-#{$breakpoint-name}-#{$spacer-name},
+        .pl-#{$breakpoint-name}-#{$spacer-name} {
+          padding-left: $spacer-value !important;
+        }
+        .pe-#{$breakpoint-name}-#{$spacer-name},
+        .pr-#{$breakpoint-name}-#{$spacer-name} {
+          padding-right: $spacer-value !important;
+        }
+        .px-#{$breakpoint-name}-#{$spacer-name} {
+          padding-right: $spacer-value !important;
+          padding-left: $spacer-value !important;
+        }
+        .py-#{$breakpoint-name}-#{$spacer-name} {
+          padding-top: $spacer-value !important;
+          padding-bottom: $spacer-value !important;
+        }
+
+        .m-#{$breakpoint-name}-#{$spacer-name} {
+          margin: $spacer-value !important;
+        }
+        .mt-#{$breakpoint-name}-#{$spacer-name} {
+          margin-top: $spacer-value !important;
+        }
+        .mb-#{$breakpoint-name}-#{$spacer-name} {
+          margin-bottom: $spacer-value !important;
+        }
+        .ms-#{$breakpoint-name}-#{$spacer-name},
+        .ml-#{$breakpoint-name}-#{$spacer-name} {
+          margin-left: $spacer-value !important;
+        }
+        .me-#{$breakpoint-name}-#{$spacer-name},
+        .mr-#{$breakpoint-name}-#{$spacer-name} {
+          margin-right: $spacer-value !important;
+        }
+        .mx-#{$breakpoint-name}-#{$spacer-name} {
+          margin-right: $spacer-value !important;
+          margin-left: $spacer-value !important;
+        }
+        .my-#{$breakpoint-name}-#{$spacer-name} {
+          margin-top: $spacer-value !important;
+          margin-bottom: $spacer-value !important;
+        }
+
+        .m-#{$breakpoint-name}-n#{$spacer-name} {
+          margin: $spacer-value * -1 !important;
+        }
+        .mt-#{$breakpoint-name}-n#{$spacer-name} {
+          margin-top: $spacer-value * -1 !important;
+        }
+        .mb-#{$breakpoint-name}-n#{$spacer-name} {
+          margin-bottom: $spacer-value * -1 !important;
+        }
+        .ms-#{$breakpoint-name}-n#{$spacer-name},
+        .ml-#{$breakpoint-name}-n#{$spacer-name} {
+          margin-left: $spacer-value * -1 !important;
+        }
+        .me-#{$breakpoint-name}-n#{$spacer-name},
+        .mr-#{$breakpoint-name}-n#{$spacer-name} {
+          margin-right: $spacer-value * -1 !important;
+        }
+        .mx-#{$breakpoint-name}-n#{$spacer-name} {
+          margin-right: $spacer-value * -1 !important;
+          margin-left: $spacer-value * -1 !important;
+        }
+        .my-#{$breakpoint-name}-n#{$spacer-name} {
+          margin-top: $spacer-value * -1 !important;
+          margin-bottom: $spacer-value * -1 !important;
+        }
+      }
+    }
+  }
+}
+
+@include generate-adaptive;
+
+.flex-row {
+  flex-direction: row;
+}
+
+.flex-column {
+  flex-direction: column;
+}
+
+.flex-row-reverse {
+  flex-direction: row-reverse;
+}
+
+.flex-column-reverse {
+  flex-direction: column-reverse;
+}
+
+.align-self-center {
+  align-self: center;
+}
+
+input,
+button,
+select,
+optgroup,
+textarea {
+  font-family: inherit;
+}
+
+.m-auto {
+  margin: auto;
+}
+
+.mx-auto {
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.my-auto {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+.ms-auto,
+.ml-auto {
+  margin-left: auto;
+}
+
+.me-auto,
+.mr-auto {
+  margin-right: auto;
+}
+
+.mt-auto {
+  margin-top: auto;
+}
+
+.mb-auto {
+  margin-top: auto;
+}
+
+.d-grid {
+  display: grid;
+}
+
+.d-block {
+  display: block;
+}
+
+.d-flex {
+  display: flex;
+}
+
+.d-flex-col {
+  display: flex;
+  flex-direction: column;
+}
+
+.d-inline-flex {
+  display: inline-flex;
+}
+
+.flex-grow-1 {
+  flex-grow: 1;
+}
+
+.align-items-start {
+  align-items: flex-start;
+}
+
+.align-items-center {
+  align-items: center;
+}
+
+.align-items-end {
+  align-items: flex-end;
+}
+
+.align-content-start {
+  align-content: flex-start;
+}
+
+.align-content-center {
+  align-content: center;
+}
+
+.align-content-end {
+  align-content: flex-end;
+}
+
+.justify-content-start {
+  justify-content: flex-start;
+}
+
+.justify-content-between {
+  justify-content: space-between;
+}
+
+.justify-content-around {
+  justify-content: space-around;
+}
+
+.justify-content-end {
+  justify-content: flex-end;
+}
+
+.justify-content-center {
+  justify-content: center;
+}
+
+.flex-nowrap {
+  flex-wrap: nowrap;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.two-lines-text {
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: pre-line;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.word-break-all {
+  word-break: break-all;
+}
+
+.word-break {
+  word-break: break-word;
+}
+
+.white-space-pre {
+  white-space: pre;
+}
+
+.white-space-nowrap {
+  white-space: nowrap;
+}
+
+.word-wrap-any-pre {
+  word-wrap: anywhere;
+  white-space: pre-wrap;
+}
+
+@mixin text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.text-start {
+  text-align: left;
+}
+
+.text-end {
+  text-align: right;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.pe-none {
+  pointer-events: none;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.not-allowed {
+  cursor: not-allowed;
+}
+
+.w-100 {
+  width: 100% !important;
+}
+
+.w-50 {
+  width: 50%;
+}
+
+.h-100 {
+  height: 100%;
+}
+
+.h-50 {
+  height: 50%;
+}
+
+.position {
+  &-relative {
+    position: relative;
+  }
+
+  &-absolute {
+    position: absolute;
+  }
+
+  &-fixed {
+    position: fixed;
+  }
+
+  &-sticky {
+    position: sticky;
+  }
+}
+
+// reboot
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+body {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-family: Inter, Arial, Helvetica, sans-serif;
+}
+
+hr {
+  margin: 1rem 0;
+  color: inherit;
+  background-color: currentcolor;
+  border: 0;
+  opacity: 0.25;
+}
+
+hr:not([size]) {
+  height: 1px;
+}
+
+h1 {
+  @include typography-headline-h1-semi-bold;
+}
+
+h2 {
+  @include typography-headline-h2-semi-bold;
+}
+
+h3 {
+  @include typography-headline-h3-semi-bold;
+}
+
+h4 {
+  @include typography-headline-h4-semi-bold;
+}
+
+h5 {
+  @include typography-title-t1-semi-bold;
+}
+
+h6 {
+  @include typography-subtitle-s1-semi-bold;
+}
+
+p,
+li {
+  @include typography-body-b1-regular;
+}
+
+pre {
+  font-size: 16px;
+}
+
+code {
+  font-weight: 400;
+  color: #d63384;
+  word-wrap: break-word;
+}
+
+.sb-show-main.sb-main-padded {
+  padding: 0 !important;
+}
+
+.tabs__wrap--hidden-default {
+  scrollbar-width: none;
+}
+
+.tabs__wrap {
+  overflow: auto;
+}
+
+.pl-color-text-icons-primary {
+  // TODO: вернуть с задачей, в которой будет произведен рефакторинг во внутренних компонентах
+  // color: var(--color-text-icons-primary)
+}