refactor: improve style for A11y

taiga-family · Aug 8, 2024 · 0145adc · 0145adc
1 parent 7a1a6ca
commit 0145adc
Show file tree

Hide file tree

Showing 178 changed files with 745 additions and 748 deletions.
diff --git a/projects/addon-charts/components/arc-chart/arc-chart.style.less b/projects/addon-charts/components/arc-chart/arc-chart.style.less
@@ -74,7 +74,7 @@
     left: 25%;
     bottom: 11%;
     display: flex;
-    width: 50%;
+    inline-size: 50%;
     justify-content: space-between;
     font: var(--tui-font-text-xs);
     color: var(--tui-text-secondary);

diff --git a/projects/addon-charts/components/axes/axes.style.less b/projects/addon-charts/components/axes/axes.style.less
@@ -7,7 +7,7 @@
 .t-wrapper {
     display: flex;
     flex: 1;
-    height: 100%;
+    block-size: 100%;
     flex-direction: column;
 }
 
@@ -84,7 +84,7 @@
     color: var(--tui-text-secondary);
 
     &_primary {
-        text-align: right;
+        text-align: end;
         padding-right: 0.75rem;
     }
 
@@ -106,7 +106,7 @@
         &_secondary {
             left: auto;
             right: 0.25rem;
-            text-align: right;
+            text-align: end;
         }
     }
 }
@@ -115,28 +115,28 @@
     position: relative;
     display: flex;
     font: var(--tui-font-text-xs);
-    border-right: 1px solid transparent;
+    border-inline-end: 1px solid transparent;
     color: var(--tui-text-secondary);
 }
 
 .t-label-x {
-    height: 0.4375rem;
-    border-left: 1px solid var(--tui-border-normal);
+    block-size: 0.4375rem;
+    border-inline-start: 1px solid var(--tui-border-normal);
     flex: 1;
     margin-bottom: 1.5625rem;
 
     &::before {
         content: '';
         display: block;
-        height: 0.5625rem;
+        block-size: 0.5625rem;
     }
 
     &_transparent {
         border-color: transparent;
     }
 
     :host._centered & {
-        height: 2rem;
+        block-size: 2rem;
         text-align: center;
         border: none;
         margin: 0;
@@ -146,8 +146,8 @@
         &:last-child:not(:first-child) {
             position: absolute;
             right: 0;
-            text-align: right;
-            border-left: none;
+            text-align: end;
+            border-inline-start: none;
         }
     }
 }

diff --git a/projects/addon-charts/components/bar-chart/bar-chart.style.less b/projects/addon-charts/components/bar-chart/bar-chart.style.less
@@ -3,7 +3,7 @@
 :host {
     display: flex;
     flex: 1;
-    height: 100%;
+    block-size: 100%;
 }
 
 .t-wrapper {
@@ -14,7 +14,7 @@
     flex: 1;
     align-items: flex-end;
     justify-content: center;
-    height: 100%;
+    block-size: 100%;
 
     &_hoverable {
         cursor: pointer;

diff --git a/projects/addon-charts/components/bar-set/bar-set.style.less b/projects/addon-charts/components/bar-set/bar-set.style.less
@@ -1,15 +1,15 @@
 :host {
     position: relative;
     display: flex;
-    height: 100%;
+    block-size: 100%;
     align-items: flex-end;
     justify-content: center;
 }
 
 .t-wrapper {
     display: flex;
     flex: 1;
-    height: 100%;
+    block-size: 100%;
     align-items: flex-end;
 
     &:first-of-type {
@@ -30,8 +30,8 @@
     }
 
     &&_flexible {
-        max-width: none;
-        width: 75%;
+        max-inline-size: none;
+        inline-size: 75%;
         margin: 0 auto;
     }
 }

diff --git a/projects/addon-charts/components/bar/bar.style.less b/projects/addon-charts/components/bar/bar.style.less
@@ -1,26 +1,26 @@
 :host {
     display: flex;
-    min-width: 0.125rem;
+    min-inline-size: 0.125rem;
     flex-direction: column-reverse;
-    border-top-left-radius: var(--tui-radius-l);
-    border-top-right-radius: var(--tui-radius-l);
+    border-start-start-radius: var(--tui-radius-l);
+    border-start-end-radius: var(--tui-radius-l);
     overflow: hidden;
 
     &[data-size='l'] {
-        width: 1rem;
-        max-width: 1rem;
+        inline-size: 1rem;
+        max-inline-size: 1rem;
         margin: 0 0.1875rem;
     }
 
     &[data-size='m'] {
-        width: 0.5rem;
-        max-width: 0.5rem;
+        inline-size: 0.5rem;
+        max-inline-size: 0.5rem;
         margin: 0 0.1875rem;
     }
 
     &[data-size='s'] {
-        width: 0.25rem;
-        max-width: 0.5rem;
+        inline-size: 0.25rem;
+        max-inline-size: 0.5rem;
         margin: 0 0.125rem;
     }
 }
diff --git a/projects/addon-charts/components/legend-item/legend-item.style.less b/projects/addon-charts/components/legend-item/legend-item.style.less
@@ -3,11 +3,11 @@
 }
 
 .t-button {
-    height: 2rem;
+    block-size: 2rem;
     font-weight: bold;
 
     :host[data-size='m'] & {
-        height: 2.25rem;
+        block-size: 2.25rem;
         font: var(--tui-font-text-m);
         font-weight: bold;
     }
@@ -24,8 +24,8 @@
 }
 
 .t-dot {
-    width: 0.5rem;
-    height: 0.5rem;
+    inline-size: 0.5rem;
+    block-size: 0.5rem;
     border-radius: 100%;
     flex-shrink: 0;
 

diff --git a/projects/addon-charts/components/line-chart/line-chart.style.less b/projects/addon-charts/components/line-chart/line-chart.style.less
@@ -2,8 +2,8 @@
 
 :host {
     display: flex;
-    width: 100%;
-    height: 100%;
+    inline-size: 100%;
+    block-size: 100%;
     pointer-events: none;
 }
 
@@ -14,14 +14,14 @@
 .t-column {
     position: absolute;
     top: 0;
-    height: 100%;
+    block-size: 100%;
     pointer-events: auto;
 }
 
 .t-dot {
     position: absolute;
-    width: 0.375rem;
-    height: 0.375rem;
+    inline-size: 0.375rem;
+    block-size: 0.375rem;
     border-radius: 100%;
     background: currentColor;
     margin: -0.1875rem;
@@ -31,8 +31,8 @@
 .t-host {
     position: absolute;
     left: 50%;
-    width: 0.5rem;
-    height: 0.5rem;
+    inline-size: 0.5rem;
+    block-size: 0.5rem;
     border-radius: 100%;
     opacity: 0;
     background: #fff;
@@ -60,13 +60,13 @@
         top: 0;
         bottom: 0;
         left: 50%;
-        width: 1px;
+        inline-size: 1px;
     }
 
     &_horizontal {
         z-index: -1;
-        width: 100%;
-        height: 1px;
+        inline-size: 100%;
+        block-size: 1px;
     }
 
     :host[style^='z-index: 0'] .t-column_hovered &,
@@ -83,7 +83,7 @@
     position: absolute;
     box-shadow: var(--tui-shadow-small);
     font: var(--tui-font-text-xs);
-    height: 1.25rem;
+    block-size: 1.25rem;
     line-height: 1.25rem;
     margin-bottom: -0.625rem;
     padding: 0 0.375rem;

diff --git a/projects/addon-charts/components/pie-chart/pie-chart.style.less b/projects/addon-charts/components/pie-chart/pie-chart.style.less
@@ -9,8 +9,8 @@
 :host {
     position: relative;
     display: block;
-    width: var(--t-size);
-    height: var(--t-size);
+    inline-size: var(--t-size);
+    block-size: var(--t-size);
 
     &[data-size='xs'] {
         --t-size: @size-xs;

diff --git a/projects/addon-charts/components/ring-chart/ring-chart.style.less b/projects/addon-charts/components/ring-chart/ring-chart.style.less
@@ -9,8 +9,8 @@
 :host {
     position: relative;
     display: block;
-    width: var(--t-size);
-    height: var(--t-size);
+    inline-size: var(--t-size);
+    block-size: var(--t-size);
     flex-shrink: 0;
 
     &[data-size='xs'] {
@@ -39,7 +39,7 @@
 
     display: flex;
     font: var(--tui-font-text-m);
-    max-height: 100%;
+    max-block-size: 100%;
     flex-direction: column;
     justify-content: center;
     text-align: center;
@@ -80,6 +80,6 @@
 }
 
 .t-chart {
-    width: 100%;
-    height: 100%;
+    inline-size: 100%;
+    block-size: 100%;
 }
diff --git a/projects/addon-commerce/components/input-card-group/input-card-group.style.less b/projects/addon-commerce/components/input-card-group/input-card-group.style.less
@@ -10,27 +10,27 @@
 :host {
     position: relative;
     display: block;
-    height: var(--tui-height-l);
-    width: @width-full;
+    block-size: var(--tui-height-l);
+    inline-size: @width-full;
     border-radius: var(--tui-radius-l);
     overflow: clip;
 
     :host-context(tui-root._mobile) {
-        width: @width-mobile;
+        inline-size: @width-mobile;
     }
 }
 
 .t-outline {
-    height: 100%;
-    width: 100%;
+    block-size: 100%;
+    inline-size: 100%;
 }
 
 .t-wrapper {
     .transition(transform);
 
     position: absolute;
-    width: 100%;
-    height: 100%;
+    inline-size: 100%;
+    block-size: 100%;
 
     &_cvc {
         margin-left: @offset-full;
@@ -55,8 +55,8 @@
 }
 
 .t-card {
-    width: 2rem;
-    height: 2rem;
+    inline-size: 2rem;
+    block-size: 2rem;
 }
 
 .t-collapsed {
@@ -83,8 +83,8 @@
     position: absolute;
     top: 0;
     display: block;
-    width: 100%;
-    height: 100%;
+    inline-size: 100%;
+    block-size: 100%;
     overflow: hidden;
 }
 
@@ -163,7 +163,7 @@
     right: 0.75rem;
     display: flex;
     align-items: center;
-    height: 100%;
+    block-size: 100%;
 }
 
 .t-icon-outlet {