triafly-ui-kit 1.0.43 → 1.0.47

package/src/styles/_mixins.scss

@@ -1,22 +1,22 @@
-@mixin wrapper($bg-color: var(--color-bg-island-default), $padding: 20px 24px 20px 24px) {
-    background-color: $bg-color;
-    padding: $padding;
-    border-radius: 16px;
-  }
-  
-  @mixin outlinedColorScheme ($borderColor, $textColor) { //NOTE: дублирование стилей UI-кита изза модулей?
-    background-color: transparent !important;
-    border: 1px solid $borderColor;
-    color: $textColor;
-    &[disabled] {
-        pointer-events: none;
-    }
-    &:hover {
-        background-color: transparent;
-        box-shadow: inset 0 0 0 1px $borderColor;
-    }
-  
-    svg * {
-        fill: $textColor;
-    }
+@mixin wrapper($bg-color: var(--color-bg-island-default), $padding: 20px 24px 20px 24px) {
+    background-color: $bg-color;
+    padding: $padding;
+    border-radius: 16px;
+  }
+  
+  @mixin outlinedColorScheme ($borderColor, $textColor) { //NOTE: дублирование стилей UI-кита изза модулей?
+    background-color: transparent !important;
+    border: 1px solid $borderColor;
+    color: $textColor;
+    &[disabled] {
+        pointer-events: none;
+    }
+    &:hover {
+        background-color: transparent;
+        box-shadow: inset 0 0 0 1px $borderColor;
+    }
+  
+    svg * {
+        fill: $textColor;
+    }
   }

package/src/styles/fix.scss

@@ -1,4 +1,4 @@
-// Скрываем браузерный крестик в полях поиска
-input[type="search"]::-webkit-search-cancel-button {
-    display: none;
+// Скрываем браузерный крестик в полях поиска
+input[type="search"]::-webkit-search-cancel-button {
+    display: none;
 }

package/src/styles/main.scss

@@ -1,27 +1,27 @@
-@import "./reset.scss";
-@import "./variables.scss";
-@import "./fix.scss";
-@import './_mixins.scss';
-@import './typography.scss';
-
-// Пока не трогать, тестовая подсветка блоков
-// html {
-//     border: 4px solid red;
-//     padding: 1px;
-// }
-
-// body {
-//     border: 2px dashed;
-//     margin: 1px;
-// }
-
-// div {
-//     border: 1px dotted;
-//     margin: 1px;
-// }
-
-
-//layout.module.scss не позволяет дочерним компонентам наследовать стили почему то. Сделать нормальный
-.page-content {
-    border-radius: 16px;
+@import "./reset.scss";
+@import "./variables.scss";
+@import "./fix.scss";
+@import './_mixins.scss';
+@import './typography.scss';
+
+// Пока не трогать, тестовая подсветка блоков
+// html {
+//     border: 4px solid red;
+//     padding: 1px;
+// }
+
+// body {
+//     border: 2px dashed;
+//     margin: 1px;
+// }
+
+// div {
+//     border: 1px dotted;
+//     margin: 1px;
+// }
+
+
+//layout.module.scss не позволяет дочерним компонентам наследовать стили почему то. Сделать нормальный
+.page-content {
+    border-radius: 16px;
 }

package/src/styles/reset.scss

@@ -1,106 +1,106 @@
-* {
-    margin: 0;
-    padding: 0;
-    border: 0;
-  
-    /*color: #1a2026;*/
-  }
-  
-  *,
-  *::before,
-  *::after {
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-  }
-  
-  :focus,
-  :active {
-    outline: none;
-  }
-  
-  nav,
-  footer,
-  header,
-  aside {
-    display: block;
-  }
-  
-  html,
-  body {
-    width: 100%;
-    height: 100%;
-  
-    font-size: 100%;
-    font-size: 14px;
-    line-height: 1;
-    -ms-text-size-adjust: 100%;
-    -moz-text-size-adjust: 100%;
-    -webkit-text-size-adjust: 100%;
-  }
-  
-  input,
-  button,
-  textarea {
-    font-family: inherit;
-  }
-  
-  input::-ms-clear {
-    display: none;
-  }
-  
-  button {
-    cursor: pointer;
-  }
-  
-  button::-moz-focus-inner {
-    padding: 0;
-  
-    border: 0;
-  }
-  
-  a,
-  a:visited {
-    text-decoration: none;
-  }
-  
-  a:focus,
-  a:active {
-    outline: none;
-  }
-  
-  a:hover {
-    text-decoration: none;
-  }
-  
-  ul li {
-    list-style: none;
-  }
-  
-  img {
-    vertical-align: top;
-  }
-  
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    font-size: inherit;
-    font-weight: 400;
-  }
-  
-  #root {
-    background-color: var(--color-bg-island-default);
-  }
-  
-  .page-wrapper {
-    width: 100%;
-    max-width: 1920px;
-    min-height: 100vh;
-    margin: 0 auto;
-    display: flex;
-    flex-direction: column;
-    background-color: var(--color-bg-island-default);
+* {
+    margin: 0;
+    padding: 0;
+    border: 0;
+  
+    /*color: #1a2026;*/
+  }
+  
+  *,
+  *::before,
+  *::after {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+  
+  :focus,
+  :active {
+    outline: none;
+  }
+  
+  nav,
+  footer,
+  header,
+  aside {
+    display: block;
+  }
+  
+  html,
+  body {
+    width: 100%;
+    height: 100%;
+  
+    font-size: 100%;
+    font-size: 14px;
+    line-height: 1;
+    -ms-text-size-adjust: 100%;
+    -moz-text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%;
+  }
+  
+  input,
+  button,
+  textarea {
+    font-family: inherit;
+  }
+  
+  input::-ms-clear {
+    display: none;
+  }
+  
+  button {
+    cursor: pointer;
+  }
+  
+  button::-moz-focus-inner {
+    padding: 0;
+  
+    border: 0;
+  }
+  
+  a,
+  a:visited {
+    text-decoration: none;
+  }
+  
+  a:focus,
+  a:active {
+    outline: none;
+  }
+  
+  a:hover {
+    text-decoration: none;
+  }
+  
+  ul li {
+    list-style: none;
+  }
+  
+  img {
+    vertical-align: top;
+  }
+  
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-size: inherit;
+    font-weight: 400;
+  }
+  
+  #root {
+    background-color: var(--color-bg-island-default);
+  }
+  
+  .page-wrapper {
+    width: 100%;
+    max-width: 1920px;
+    min-height: 100vh;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--color-bg-island-default);
   }

package/src/styles/typography.scss

@@ -1,106 +1,106 @@
-$font-path: '../assets/fonts' !default; // Для работы внутри Storybook
-// Переопределяется в основном проекте через:
-// $font-path: '~triafly-ui-kit/assets/fonts';
-
-//Подключение шрифтов
-@font-face {
-  font-family: "Roboto Slab";
-  src: url("#{$font-path}/RobotoSlab-SemiBold.ttf") format("truetype");
-  font-weight: 600;
-}
-
-@font-face {
-  font-family: "Manrope";
-  src: url("#{$font-path}/Manrope-Regular.ttf") format("truetype");
-  font-weight: 400;
-}
-
-@font-face {
-  font-family: "Manrope";
-  src: url("#{$font-path}/Manrope-Semibold.ttf") format("truetype");
-  font-weight: 600;
-}
-
-@font-face {
-  font-family: "Manrope";
-  src: url("#{$font-path}/Manrope-Bold.ttf") format("truetype");
-  font-weight: 700;
-}
-
-@font-face {
-  font-family: "Fira Code";
-  src: url("#{$font-path}/FiraCode-Regular.ttf") format("truetype");
-  font-weight: 400;
-}
-
-//Глобальные свойства шрифтов
-* {
-  font-family: "Manrope", sans-serif;
-  font-size: 14px;
-  line-height: 1.2em;
-  letter-spacing: 0.02em;
-  font-weight: 400;
-  color: var(--color-text-primary-default);
-}
-
-//Заголовки
-
-//NOTE:
-//по макетам у нас 8 уровней заголовков, JSX понимает только шесть.
-//AI: Использовать уровни заголовков начиная с h1 в контексте страницы,
-//как это принято общей практикой вёрстки,
-//а для указания размеров и начертания использовать миксин.
-//В противном случае основными хедерами будут h4-h8 + варнинги JSX
-
-//Дефолтные значения font-size и font-weight = 14 и 400
-//При необходимости кастомизации текста в компоненте импортируется данные миксины
-//с указанием необходимых значений согласно макету
-//TODO: подготовить переменные для стандартизаии размеров
-
-//Акцидентная гарнитура для заголовков
-@mixin accidental($size, $margin) {
-  font-family: "Roboto Slab", sans-serif;
-  font-size: $size;
-  margin: 0 0 $margin 0;
-}
-
-//Гротескная гарнитура для заголовков и регулярного текста
-@mixin grotesque($size, $weight) {
-  font-size: $size;
-  font-weight: $weight;
-}
-
-//сброс дефолтных отступов в заголовках
-@for $i from 1 through 6 {
-  h#{$i} {
-    margin: 0;
-  }
-}
-
-//Ссылки
-a {
-  color: var(--color-text-brand-default);
-  text-decoration: none;
-  &:hover {
-    color: var(--color-text-brand-hover);
-  }
-  &[href=""] {
-    //стили неактивной ссылки
-    opacity: 40%;
-    cursor: default;
-    pointer-events: none;
-    //не совсем понятно зачем она нам
-    //+ линтер неадекватно реагирует на пустой href
-    //добавить .disabled с JS-логикой?
-  }
-}
-
-//Параграфы
-
-//TODO: недостаточно кейсов в моках, запросить для уточнения
-p {
-  // font-size: 12px;
-  &:not(:last-child) {
-    margin: 0 0 8px 0;
-  }
-}
+$font-path: '../assets/fonts' !default; // Для работы внутри Storybook
+// Переопределяется в основном проекте через:
+// $font-path: '~triafly-ui-kit/assets/fonts';
+
+//Подключение шрифтов
+@font-face {
+  font-family: "Roboto Slab";
+  src: url("#{$font-path}/RobotoSlab-SemiBold.ttf") format("truetype");
+  font-weight: 600;
+}
+
+@font-face {
+  font-family: "Manrope";
+  src: url("#{$font-path}/Manrope-Regular.ttf") format("truetype");
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: "Manrope";
+  src: url("#{$font-path}/Manrope-Semibold.ttf") format("truetype");
+  font-weight: 600;
+}
+
+@font-face {
+  font-family: "Manrope";
+  src: url("#{$font-path}/Manrope-Bold.ttf") format("truetype");
+  font-weight: 700;
+}
+
+@font-face {
+  font-family: "Fira Code";
+  src: url("#{$font-path}/FiraCode-Regular.ttf") format("truetype");
+  font-weight: 400;
+}
+
+//Глобальные свойства шрифтов
+* {
+  font-family: "Manrope", sans-serif;
+  font-size: 14px;
+  line-height: 1.2em;
+  letter-spacing: 0.02em;
+  font-weight: 400;
+  color: var(--color-text-primary-default);
+}
+
+//Заголовки
+
+//NOTE:
+//по макетам у нас 8 уровней заголовков, JSX понимает только шесть.
+//AI: Использовать уровни заголовков начиная с h1 в контексте страницы,
+//как это принято общей практикой вёрстки,
+//а для указания размеров и начертания использовать миксин.
+//В противном случае основными хедерами будут h4-h8 + варнинги JSX
+
+//Дефолтные значения font-size и font-weight = 14 и 400
+//При необходимости кастомизации текста в компоненте импортируется данные миксины
+//с указанием необходимых значений согласно макету
+//TODO: подготовить переменные для стандартизаии размеров
+
+//Акцидентная гарнитура для заголовков
+@mixin accidental($size, $margin) {
+  font-family: "Roboto Slab", sans-serif;
+  font-size: $size;
+  margin: 0 0 $margin 0;
+}
+
+//Гротескная гарнитура для заголовков и регулярного текста
+@mixin grotesque($size, $weight) {
+  font-size: $size;
+  font-weight: $weight;
+}
+
+//сброс дефолтных отступов в заголовках
+@for $i from 1 through 6 {
+  h#{$i} {
+    margin: 0;
+  }
+}
+
+//Ссылки
+a {
+  color: var(--color-text-brand-default);
+  text-decoration: none;
+  &:hover {
+    color: var(--color-text-brand-hover);
+  }
+  &[href=""] {
+    //стили неактивной ссылки
+    opacity: 40%;
+    cursor: default;
+    pointer-events: none;
+    //не совсем понятно зачем она нам
+    //+ линтер неадекватно реагирует на пустой href
+    //добавить .disabled с JS-логикой?
+  }
+}
+
+//Параграфы
+
+//TODO: недостаточно кейсов в моках, запросить для уточнения
+p {
+  // font-size: 12px;
+  &:not(:last-child) {
+    margin: 0 0 8px 0;
+  }
+}