adata-ui 2.1.40-beta.16 → 2.1.40-beta.18

package/assets/styles/index.scss

@@ -1,166 +1,104 @@
-
-@use './modules/typography' as *;
-@use "./modules/base" as *;
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-
-html {
-  scrollbar-gutter: stable;
-}
-
-.dark {
-  color-scheme: dark;
-}
-
-body {
-  padding: 0 !important;
-  color: #2C3E50;
-  background-color: #F4F5F6;
-}
-
-.dark body {
-  color: #E3E5E8;
-  background-color: #161617;
-}
-
-html::-webkit-scrollbar {
-  width: 15px;
-}
-
-html::-webkit-scrollbar-thumb {
-  background: #c4c4c4;
-}
-
-.no-scrollbar::-webkit-scrollbar {
-  display: none;
-}
-
-/* Hide scrollbar for IE, Edge and Firefox */
-.no-scrollbar {
-  -ms-overflow-style: none;  /* IE and Edge */
-  scrollbar-width: none;  /* Firefox */
-}
-
-@media (min-width: 320px) and (max-width: 767px) {
-  .a-container {
-    padding: 0
-  }
-  .mobile-padding {
-    padding: 16px;
-  }
-}
-@media (prefers-color-scheme: dark) {
-  .bg-gradient-blue {
-    background: linear-gradient(236.46deg, #4FBDFF -2.39%, #1B98E2 79.1%);
-  }
-}
-@media (prefers-color-scheme: light) {
-  .bg-gradient-blue {
-    background: linear-gradient(236.46deg, #479FFF -2.39%, #0070EB 79.1%);
-  }
-}
-
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-.Toastify__toast-container {
-  z-index: 10002 !important;
-}
-
-@media (min-width: 481px) {
-  .Toastify__toast-container {
-    width: 600px;
-  }
-}
-
-.Toastify__toast-container .Toastify__toast {
-  min-height: 71px;
-  padding: 14px 16px;
-  border: 1px solid transparent;
-  border-left-width: 4px; /* акцентная полоса слева */
-  border-radius: 12px;
-  box-shadow: none;
-}
-
-.Toastify__toast-container .Toastify__toast-body {
-  margin: 0;
-  padding: 0;
-  gap: 12px;
-  align-items: center;
-  font-size: 16px;
-  font-weight: 500;
-  line-height: 24px;
-}
-
-.Toastify__toast-container .Toastify__toast-icon {
-  width: 24px;
-  height: 24px;
-  margin-inline-end: 0;
-}
-
-.Toastify__toast-container .Toastify__toast-icon svg {
-  width: 24px;
-  height: 24px;
-}
-
-.Toastify__toast-container .Toastify__close-button {
-  align-self: center;
-  color: #2c3e50;
-  opacity: 0.6;
-}
-
-.Toastify__toast-container .Toastify__close-button:hover {
-  opacity: 1;
-}
-
-.Toastify__toast-container .Toastify__toast--info    { background: #eff6ff; border-color: #068dff; color: #068dff; }
-.Toastify__toast-container .Toastify__toast--success { background: #f0fdf4; border-color: #00a63e; color: #00a63e; }
-.Toastify__toast-container .Toastify__toast--warning { background: #fffbeb; border-color: #e17100; color: #e17100; }
-.Toastify__toast-container .Toastify__toast--error   { background: #fef2f2; border-color: #e7000b; color: #e7000b; }
-
-.Toastify__toast-container .Toastify__toast--info    .Toastify__progress-bar { background: #068dff; }
-.Toastify__toast-container .Toastify__toast--success .Toastify__progress-bar { background: #00a63e; }
-.Toastify__toast-container .Toastify__toast--warning .Toastify__progress-bar { background: #e17100; }
-.Toastify__toast-container .Toastify__toast--error   .Toastify__progress-bar { background: #e7000b; }
-
-/* Тёмная тема (нежная): фон = тинт solid-хекса тона /10, но непрозрачный (тост плавает
-   над контентом) — композит поверх #161617; бордер rgba(solid,0.4); текст/иконка -400. */
-.dark .Toastify__toast-container .Toastify__close-button { color: #e3e5e8; }
-
-.dark .Toastify__toast-container .Toastify__toast--info    { background: #14222e; border-color: rgba(6, 141, 255, 0.4); color: #43afed; }
-.dark .Toastify__toast-container .Toastify__toast--success { background: #14241b; border-color: rgba(0, 166, 62, 0.4); color: #6bbd6e; }
-.dark .Toastify__toast-container .Toastify__toast--warning { background: #2a1f15; border-color: rgba(225, 113, 0, 0.4); color: #ffc31e; }
-.dark .Toastify__toast-container .Toastify__toast--error   { background: #2b1416; border-color: rgba(231, 0, 11, 0.4); color: #f47e75; }
-
-input[type="search"]::-webkit-search-cancel-button {
-  -webkit-appearance: none;
-  appearance: none;
-}
-
-input[type="search"]::-ms-clear {
-  display: none;
-  width: 0;
-  height: 0;
-}
-/* Firefox */
-input[type=number] {
-  -moz-appearance: textfield;
-}
-
-.visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  border: 0;
-  padding: 0;
-  white-space: nowrap;
-  clip-path: inset(100%);
-  clip: rect(0 0 0 0);
-  overflow: hidden;
-}
+
+@use './modules/typography' as *;
+@use "./modules/base" as *;
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+html {
+  scrollbar-gutter: stable;
+}
+
+.dark {
+  color-scheme: dark;
+}
+
+body {
+  padding: 0 !important;
+  color: #2C3E50;
+  background-color: #F4F5F6;
+}
+
+.dark body {
+  color: #E3E5E8;
+  background-color: #161617;
+}
+
+html::-webkit-scrollbar {
+  width: 15px;
+}
+
+html::-webkit-scrollbar-thumb {
+  background: #c4c4c4;
+}
+
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.no-scrollbar {
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+
+@media (min-width: 320px) and (max-width: 767px) {
+  .a-container {
+    padding: 0
+  }
+  .mobile-padding {
+    padding: 16px;
+  }
+}
+@media (prefers-color-scheme: dark) {
+  .bg-gradient-blue {
+    background: linear-gradient(236.46deg, #4FBDFF -2.39%, #1B98E2 79.1%);
+  }
+}
+@media (prefers-color-scheme: light) {
+  .bg-gradient-blue {
+    background: linear-gradient(236.46deg, #479FFF -2.39%, #0070EB 79.1%);
+  }
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.toast__body{
+  padding:0 16px 0 0 !important;
+  margin:0 !important;
+  align-items: stretch !important;
+}
+.Toastify__toast-container {
+  z-index: 10002 !important;
+}
+input[type="search"]::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  appearance: none;
+}
+input[type="search"]::-ms-clear {
+  display: none;
+  width: 0;
+  height: 0;
+}
+/* Firefox */
+input[type=number] {
+  -moz-appearance: textfield;
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  border: 0;
+  padding: 0;
+  white-space: nowrap;
+  clip-path: inset(100%);
+  clip: rect(0 0 0 0);
+  overflow: hidden;
+}

package/assets/styles/modules/_base.scss

@@ -1,5 +1,5 @@
-@layer components {
-  .a-container {
-    @apply  container mx-auto px-4 2xl:px-16;
-  }
-}
+@layer components {
+  .a-container {
+    @apply  container mx-auto px-4 2xl:px-16;
+  }
+}

package/assets/styles/modules/_typography.scss

@@ -1,152 +1,152 @@
-// Visit https://www.figma.com/file/nJY45RLoow0IsmpMZ35aTR/DE blue-defaultSIGN-SYSTEM-NEW?type=design&node-id=619-53613&mode=design&t=tY2NLdArlQhUP9d3-0
-// for more information on typography styles
-// And see https://tailwindcss.com/docs/adding-custom-styles for more information on adding custom styles
-
-@layer components {
-
-  // Headings
-  .heading-01 {
-    @apply font-bold text-[2rem] leading-10;
-  }
-
-  .heading-02 {
-    @apply font-bold text-2xl leading-8;
-  }
-
-  .heading-03 {
-    @apply font-semibold text-xl leading-6;
-  }
-
-  .heading-04 {
-    @apply font-semibold text-base leading-5;
-  }
-
-  .heading-05 {
-    @apply font-semibold text-sm leading-5;
-  }
-
-  // Body
-  .body-400 {
-    @apply font-normal text-sm leading-5;
-  }
-
-  .body-500 {
-    @apply font-medium text-sm leading-5;
-  }
-
-  .body-600 {
-    @apply font-semibold text-sm leading-5
-  }
-
-  .body-s-400 {
-    @apply font-normal text-sm leading-4;
-  }
-
-  .body-s-500 {
-    @apply font-medium text-sm leading-4;
-  }
-
-  // Caption
-  .caption-400 {
-    @apply font-normal text-[0.625rem] leading-4;
-  }
-
-  .caption-500 {
-    @apply font-medium text-[0.625rem] leading-4;
-  }
-
-  .caption-700 {
-    @apply font-bold text-[0.625rem] leading-4;
-  }
-
-  // Form
-  .label-400 {
-    @apply font-normal text-sm leading-5;
-  }
-
-  .label-600 {
-    @apply font-semibold text-sm leading-5;
-  }
-
-  .label-s-400 {
-    @apply font-normal text-xs leading-4;
-  }
-
-  .label-s-700 {
-    @apply font-bold text-xs leading-4;
-  }
-
-  .optional-i-700 {
-    @apply font-bold italic text-sm leading-5;
-  }
-
-  .placeholder-300 {
-    @apply font-light text-sm leading-5;
-  }
-
-  .description-400 {
-    @apply font-normal text-xs leading-5;
-  }
-
-  //  Link
-  .link-400 {
-    @apply text-blue-500 font-normal text-sm leading-5;
-  }
-
-  .link-stroke-400 {
-    @apply text-blue-500 font-normal text-sm leading-5;
-  }
-
-  .link-s-400 {
-    @apply text-blue-500 font-normal text-sm leading-4;
-  }
-
-  .link-s-stroke-400 {
-    @apply text-blue-500 font-normal text-sm leading-4;
-  }
-
-  .link-small-800 {
-    @apply text-blue-500 font-bold text-sm leading-4;
-  }
-
-  //  Special Styles
-  .display-80-700 {
-    @apply font-bold text-[5rem] leading-[6.5rem];
-  }
-
-  .display-80-400 {
-    @apply font-normal text-[5rem] leading-[6.5rem];
-  }
-
-  .display-60-700 {
-    @apply font-bold text-[3.75rem] leading-[4.750rem];
-  }
-
-  .display-60-400 {
-    @apply font-normal text-[3.75rem] leading-[4.750rem];
-  }
-
-  .display-48-700 {
-    @apply font-bold text-[3rem] leading-[4rem];
-  }
-
-  .display-48-400 {
-    @apply font-normal text-[3rem] leading-[4rem];
-  }
-
-  .numbers-60-700 {
-    @apply font-bold text-[3.75rem] leading-[3.5rem];
-  }
-
-  .numbers-60-400 {
-    @apply font-normal text-[3.75rem] leading-[3.5rem];
-  }
-
-  .numbers-40-700 {
-    @apply font-bold text-[2.5rem] leading-[3.375rem];
-  }
-
-  .numbers-40-400 {
-    @apply font-normal text-[2.5rem] leading-[3.375rem];
-  }
-}
+// Visit https://www.figma.com/file/nJY45RLoow0IsmpMZ35aTR/DE blue-defaultSIGN-SYSTEM-NEW?type=design&node-id=619-53613&mode=design&t=tY2NLdArlQhUP9d3-0
+// for more information on typography styles
+// And see https://tailwindcss.com/docs/adding-custom-styles for more information on adding custom styles
+
+@layer components {
+
+  // Headings
+  .heading-01 {
+    @apply font-bold text-[2rem] leading-10;
+  }
+
+  .heading-02 {
+    @apply font-bold text-2xl leading-8;
+  }
+
+  .heading-03 {
+    @apply font-semibold text-xl leading-6;
+  }
+
+  .heading-04 {
+    @apply font-semibold text-base leading-5;
+  }
+
+  .heading-05 {
+    @apply font-semibold text-sm leading-5;
+  }
+
+  // Body
+  .body-400 {
+    @apply font-normal text-sm leading-5;
+  }
+
+  .body-500 {
+    @apply font-medium text-sm leading-5;
+  }
+
+  .body-600 {
+    @apply font-semibold text-sm leading-5
+  }
+
+  .body-s-400 {
+    @apply font-normal text-sm leading-4;
+  }
+
+  .body-s-500 {
+    @apply font-medium text-sm leading-4;
+  }
+
+  // Caption
+  .caption-400 {
+    @apply font-normal text-[0.625rem] leading-4;
+  }
+
+  .caption-500 {
+    @apply font-medium text-[0.625rem] leading-4;
+  }
+
+  .caption-700 {
+    @apply font-bold text-[0.625rem] leading-4;
+  }
+
+  // Form
+  .label-400 {
+    @apply font-normal text-sm leading-5;
+  }
+
+  .label-600 {
+    @apply font-semibold text-sm leading-5;
+  }
+
+  .label-s-400 {
+    @apply font-normal text-xs leading-4;
+  }
+
+  .label-s-700 {
+    @apply font-bold text-xs leading-4;
+  }
+
+  .optional-i-700 {
+    @apply font-bold italic text-sm leading-5;
+  }
+
+  .placeholder-300 {
+    @apply font-light text-sm leading-5;
+  }
+
+  .description-400 {
+    @apply font-normal text-xs leading-5;
+  }
+
+  //  Link
+  .link-400 {
+    @apply text-blue-500 font-normal text-sm leading-5;
+  }
+
+  .link-stroke-400 {
+    @apply text-blue-500 font-normal text-sm leading-5;
+  }
+
+  .link-s-400 {
+    @apply text-blue-500 font-normal text-sm leading-4;
+  }
+
+  .link-s-stroke-400 {
+    @apply text-blue-500 font-normal text-sm leading-4;
+  }
+
+  .link-small-800 {
+    @apply text-blue-500 font-bold text-sm leading-4;
+  }
+
+  //  Special Styles
+  .display-80-700 {
+    @apply font-bold text-[5rem] leading-[6.5rem];
+  }
+
+  .display-80-400 {
+    @apply font-normal text-[5rem] leading-[6.5rem];
+  }
+
+  .display-60-700 {
+    @apply font-bold text-[3.75rem] leading-[4.750rem];
+  }
+
+  .display-60-400 {
+    @apply font-normal text-[3.75rem] leading-[4.750rem];
+  }
+
+  .display-48-700 {
+    @apply font-bold text-[3rem] leading-[4rem];
+  }
+
+  .display-48-400 {
+    @apply font-normal text-[3rem] leading-[4rem];
+  }
+
+  .numbers-60-700 {
+    @apply font-bold text-[3.75rem] leading-[3.5rem];
+  }
+
+  .numbers-60-400 {
+    @apply font-normal text-[3.75rem] leading-[3.5rem];
+  }
+
+  .numbers-40-700 {
+    @apply font-bold text-[2.5rem] leading-[3.375rem];
+  }
+
+  .numbers-40-400 {
+    @apply font-normal text-[2.5rem] leading-[3.375rem];
+  }
+}

package/components/elements/README.md

@@ -1 +1 @@
-# button, alerts, dropdown
+# button, alerts, dropdown