@taiga-ui/styles 4.43.0 → 4.44.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/markup/tui-container.less +2 -2
  2. package/markup/tui-form.less +28 -28
  3. package/markup/tui-island.less +9 -9
  4. package/markup/tui-list.less +12 -12
  5. package/markup/tui-row.less +18 -18
  6. package/markup/tui-space.less +10 -10
  7. package/markup/tui-table.less +3 -3
  8. package/package.json +3 -3
package/markup/tui-container.less CHANGED
@@ -1,8 +1,8 @@
1
1
  // width - conscious choice
2
2
  /* stylelint-disable order/order */
3
3
  .tui-container {
4
- margin-right: auto;
5
- margin-left: auto;
4
+ margin-inline-end: auto;
5
+ margin-inline-start: auto;
6
6
 
7
7
  &.tui-container_adaptive {
8
8
  @media @tui-desktop-lg-min {
package/markup/tui-form.less CHANGED
@@ -7,38 +7,38 @@
7
7
  /* stylelint-disable */
8
8
  &__header {
9
9
  font: var(--tui-font-heading-5);
10
- margin-top: @fields-space-large;
11
- margin-bottom: @fields-space;
10
+ margin-block-start: @fields-space-large;
11
+ margin-block-end: @fields-space;
12
12
 
13
13
  @media @tui-mobile {
14
14
  font: var(--tui-font-text-l);
15
15
  font-weight: bold;
16
- margin-bottom: @fields-space-mobile;
16
+ margin-block-end: @fields-space-mobile;
17
17
  }
18
18
 
19
- &_margin-top_none {
20
- margin-top: 0;
19
+ &_margin-block-start_none {
20
+ margin-block-start: 0;
21
21
  }
22
22
 
23
- &_margin-bottom_none {
24
- margin-bottom: 0;
23
+ &_margin-block-end_none {
24
+ margin-block-end: 0;
25
25
  }
26
26
 
27
- &_margin-bottom_small {
28
- margin-bottom: @fields-space - 0.25rem;
27
+ &_margin-block-end_small {
28
+ margin-block-end: @fields-space - 0.25rem;
29
29
 
30
30
  @media @tui-mobile {
31
- margin-bottom: @fields-space-mobile - 0.25rem;
31
+ margin-block-end: @fields-space-mobile - 0.25rem;
32
32
  }
33
33
  }
34
34
  }
35
35
  /* stylelint-enable */
36
36
 
37
37
  &__row {
38
- margin-top: @fields-space;
38
+ margin-block-start: @fields-space;
39
39
 
40
40
  &:first-child {
41
- margin-top: 0;
41
+ margin-block-start: 0;
42
42
  }
43
43
 
44
44
  &_multi-fields {
@@ -63,55 +63,55 @@
63
63
  }
64
64
 
65
65
  @media @tui-mobile {
66
- margin-top: @fields-space-mobile;
66
+ margin-block-start: @fields-space-mobile;
67
67
  }
68
68
  }
69
69
 
70
70
  &__multi-field {
71
71
  flex: 1 1 0;
72
72
  min-inline-size: 0;
73
- margin-left: @fields-space;
73
+ margin-inline-start: @fields-space;
74
74
 
75
75
  &:first-child {
76
- margin-left: 0;
76
+ margin-inline-start: 0;
77
77
  }
78
78
 
79
79
  @media @tui-mobile {
80
80
  flex-basis: 100%;
81
- margin-top: @fields-space-mobile;
82
- margin-left: 0;
81
+ margin-block-start: @fields-space-mobile;
82
+ margin-inline-start: 0;
83
83
 
84
84
  &:first-child {
85
- margin-top: 0;
85
+ margin-block-start: 0;
86
86
  }
87
87
  }
88
88
  }
89
89
 
90
90
  &__field-note {
91
91
  font: var(--tui-font-text-s);
92
- margin-top: 0.25rem;
92
+ margin-block-start: 0.25rem;
93
93
  color: var(--tui-text-secondary);
94
94
  }
95
95
 
96
96
  &__field-checkbox {
97
- margin-top: 0.5rem;
97
+ margin-block-start: 0.5rem;
98
98
  }
99
99
 
100
100
  &__checkbox {
101
101
  flex: ~'1 1 calc(50% - 0.625rem)';
102
102
 
103
103
  &:nth-child(even) {
104
- margin-left: 1.25rem;
104
+ margin-inline-start: 1.25rem;
105
105
  }
106
106
 
107
107
  &:nth-child(n + 3) {
108
- margin-top: 1rem;
108
+ margin-block-start: 1rem;
109
109
  }
110
110
  }
111
111
 
112
112
  &__buttons {
113
113
  display: flex;
114
- margin-top: @fields-space-large;
114
+ margin-block-start: @fields-space-large;
115
115
 
116
116
  &_align_end {
117
117
  justify-content: flex-end;
@@ -123,20 +123,20 @@
123
123
 
124
124
  @media @tui-mobile {
125
125
  flex-direction: column;
126
- margin-top: @fields-space-large-mobile;
126
+ margin-block-start: @fields-space-large-mobile;
127
127
  }
128
128
  }
129
129
 
130
130
  &__button {
131
- margin-left: 0.75rem;
131
+ margin-inline-start: 0.75rem;
132
132
 
133
133
  &:first-child {
134
- margin-left: 0;
134
+ margin-inline-start: 0;
135
135
  }
136
136
 
137
137
  @media @tui-mobile {
138
- margin-top: 0.5rem;
139
- margin-left: 0;
138
+ margin-block-start: 0.5rem;
139
+ margin-inline-start: 0;
140
140
  }
141
141
  }
142
142
  }
package/markup/tui-island.less CHANGED
@@ -124,7 +124,7 @@
124
124
  color: var(--tui-text-secondary);
125
125
 
126
126
  &_link.tui-island__paragraph {
127
- margin-top: 1rem;
127
+ margin-block-start: 1rem;
128
128
 
129
129
  .tui-island_size_l & {
130
130
  margin: 1rem 0 0;
@@ -132,7 +132,7 @@
132
132
  }
133
133
 
134
134
  &_button.tui-island__paragraph {
135
- margin-top: 1.25rem;
135
+ margin-block-start: 1.25rem;
136
136
 
137
137
  .tui-island_size_l & {
138
138
  margin: 1.25rem 0 0;
@@ -148,7 +148,7 @@
148
148
  margin: 0 0 0 1rem;
149
149
 
150
150
  .tui-island_size_l & {
151
- margin-left: 2.25rem;
151
+ margin-inline-start: 2.25rem;
152
152
  }
153
153
 
154
154
  .tui-island_text-align_center & {
@@ -158,19 +158,19 @@
158
158
 
159
159
  &__carousel-controls {
160
160
  display: flex;
161
- padding-bottom: 1rem;
162
- margin-bottom: 1rem;
161
+ padding-block-end: 1rem;
162
+ margin-block-end: 1rem;
163
163
  border-block-end: 1px solid var(--tui-border-normal);
164
164
  white-space: nowrap;
165
165
  }
166
166
 
167
167
  &__carousel-pages {
168
- margin-left: auto;
168
+ margin-inline-start: auto;
169
169
  color: var(--tui-text-secondary);
170
170
  }
171
171
 
172
172
  &__carousel-button {
173
- margin-right: 0.5rem;
173
+ margin-inline-end: 0.5rem;
174
174
  }
175
175
 
176
176
  .tui-island &__footer-button {
@@ -189,12 +189,12 @@
189
189
 
190
190
  &__marker {
191
191
  &:first-child:not(:only-child) {
192
- margin-right: 1.25rem;
192
+ margin-inline-end: 1.25rem;
193
193
  }
194
194
 
195
195
  &:not(:first-child),
196
196
  &:only-child {
197
- margin-left: 1.25rem;
197
+ margin-inline-start: 1.25rem;
198
198
  }
199
199
  }
200
200
  }
package/markup/tui-list.less CHANGED
@@ -20,12 +20,12 @@
20
20
  color: var(--tui-text-secondary);
21
21
 
22
22
  .tui-list_large & {
23
- margin-left: 0.75rem;
23
+ margin-inline-start: 0.75rem;
24
24
  }
25
25
 
26
26
  .tui-list_small & {
27
- margin-top: 0.5rem;
28
- margin-bottom: 0.5rem;
27
+ margin-block-start: 0.5rem;
28
+ margin-block-end: 0.5rem;
29
29
  }
30
30
  }
31
31
 
@@ -35,12 +35,12 @@
35
35
 
36
36
  &__item {
37
37
  position: relative;
38
- padding-left: 1.5rem;
38
+ padding-inline-start: 1.5rem;
39
39
  overflow-wrap: break-word;
40
- margin-top: 0.75rem;
40
+ margin-block-start: 0.75rem;
41
41
 
42
42
  &:first-child {
43
- margin-top: 0;
43
+ margin-block-start: 0;
44
44
  }
45
45
 
46
46
  &::before {
@@ -63,11 +63,11 @@
63
63
  }
64
64
 
65
65
  .tui-list_extra-small > & {
66
- margin-top: 0.5rem;
66
+ margin-block-start: 0.5rem;
67
67
  }
68
68
 
69
69
  .tui-list_linear & {
70
- padding-left: 1.75rem;
70
+ padding-inline-start: 1.75rem;
71
71
 
72
72
  &::before {
73
73
  content: '\2014';
@@ -80,7 +80,7 @@
80
80
  }
81
81
 
82
82
  .tui-list_ordered & {
83
- padding-left: 1.25rem;
83
+ padding-inline-start: 1.25rem;
84
84
 
85
85
  &::before {
86
86
  content: counter(counter) '.';
@@ -95,7 +95,7 @@
95
95
  }
96
96
 
97
97
  .tui-list_triangle > & {
98
- padding-left: 1.75rem;
98
+ padding-inline-start: 1.75rem;
99
99
 
100
100
  &::before {
101
101
  content: '\25E4'; // represent symbol '◤'
@@ -125,12 +125,12 @@
125
125
  color: var(--tui-text-secondary);
126
126
 
127
127
  .tui-list_small & {
128
- margin-top: 0.25rem;
128
+ margin-block-start: 0.25rem;
129
129
  }
130
130
 
131
131
  .tui-list_large & {
132
132
  line-height: 1.75rem;
133
- margin-top: 0.75rem;
133
+ margin-block-start: 0.75rem;
134
134
  }
135
135
  }
136
136
  }
package/markup/tui-row.less CHANGED
@@ -6,8 +6,8 @@
6
6
  .generate-columns(@infix, @n, @padding, @i: 1) when (@i =< @n) {
7
7
  &_@{infix}-@{i} {
8
8
  inline-size: (@i * 100% / @n);
9
- padding-left: @padding;
10
- padding-right: @padding;
9
+ padding-inline-start: @padding;
10
+ padding-inline-end: @padding;
11
11
  box-sizing: border-box;
12
12
  }
13
13
 
@@ -16,7 +16,7 @@
16
16
 
17
17
  .generate-offset-columns(@infix, @n, @i: 1) when (@i =< @n) {
18
18
  &_@{infix}-@{i} {
19
- margin-left: (@i * 100% / @n);
19
+ margin-inline-start: (@i * 100% / @n);
20
20
  }
21
21
 
22
22
  .generate-offset-columns(@infix, @n, (@i + 1));
@@ -25,8 +25,8 @@
25
25
  .generate-sme-columns(@n, @padding, @i: 1) when (@i =< @n) {
26
26
  &_@{i} {
27
27
  inline-size: (@i * 100% / @n);
28
- padding-left: @padding;
29
- padding-right: @padding;
28
+ padding-inline-start: @padding;
29
+ padding-inline-end: @padding;
30
30
  box-sizing: border-box;
31
31
  }
32
32
 
@@ -35,7 +35,7 @@
35
35
 
36
36
  .generate-sme-offset-columns(@n, @i: 1) when (@i =< @n) {
37
37
  &_@{i} {
38
- margin-left: (@i * 100% / @n);
38
+ margin-inline-start: (@i * 100% / @n);
39
39
  }
40
40
 
41
41
  .generate-sme-offset-columns(@n, (@i + 1));
@@ -60,34 +60,34 @@
60
60
 
61
61
  &_adaptive.tui-row {
62
62
  @media @tui-desktop-lg-min {
63
- margin-left: -@space-large;
64
- margin-right: -@space-large;
63
+ margin-inline-start: -@space-large;
64
+ margin-inline-end: -@space-large;
65
65
  }
66
66
 
67
67
  @media @tui-desktop {
68
- margin-left: -@space-normal;
69
- margin-right: -@space-normal;
68
+ margin-inline-start: -@space-normal;
69
+ margin-inline-end: -@space-normal;
70
70
  }
71
71
 
72
72
  @media @tui-mobile {
73
- margin-left: -@space-small;
74
- margin-right: -@space-small;
73
+ margin-inline-start: -@space-small;
74
+ margin-inline-end: -@space-small;
75
75
  }
76
76
  }
77
77
 
78
78
  &_temporary.tui-row {
79
- margin-left: -@space-normal;
80
- margin-right: -@space-normal;
79
+ margin-inline-start: -@space-normal;
80
+ margin-inline-end: -@space-normal;
81
81
  }
82
82
 
83
83
  @media @tui-desktop-lg-min {
84
- margin-left: -@space-large;
85
- margin-right: -@space-large;
84
+ margin-inline-start: -@space-large;
85
+ margin-inline-end: -@space-large;
86
86
  }
87
87
 
88
88
  @media @tui-desktop {
89
- margin-left: -@space-normal;
90
- margin-right: -@space-normal;
89
+ margin-inline-start: -@space-normal;
90
+ margin-inline-end: -@space-normal;
91
91
  }
92
92
  }
93
93
 
package/markup/tui-space.less CHANGED
@@ -9,29 +9,29 @@
9
9
  }
10
10
 
11
11
  & when (@direction = top) {
12
- margin-top: 0.25rem * @i;
12
+ margin-block-start: 0.25rem * @i;
13
13
  }
14
14
 
15
15
  & when (@direction = bottom) {
16
- margin-bottom: 0.25rem * @i;
16
+ margin-block-end: 0.25rem * @i;
17
17
  }
18
18
 
19
19
  & when (@direction = vertical) {
20
- margin-top: 0.25rem * @i;
21
- margin-bottom: 0.25rem * @i;
20
+ margin-block-start: 0.25rem * @i;
21
+ margin-block-end: 0.25rem * @i;
22
22
  }
23
23
 
24
24
  & when (@direction = left) {
25
- margin-left: 0.25rem * @i;
25
+ margin-inline-start: 0.25rem * @i;
26
26
  }
27
27
 
28
28
  & when (@direction = right) {
29
- margin-right: 0.25rem * @i;
29
+ margin-inline-end: 0.25rem * @i;
30
30
  }
31
31
 
32
32
  & when (@direction = horizontal) {
33
- margin-right: 0.25rem * @i;
34
- margin-left: 0.25rem * @i;
33
+ margin-inline-end: 0.25rem * @i;
34
+ margin-inline-start: 0.25rem * @i;
35
35
  }
36
36
  }
37
37
  }
@@ -46,7 +46,7 @@
46
46
  .generate-space(horizontal);
47
47
 
48
48
  &_auto {
49
- margin-left: auto;
50
- margin-right: auto;
49
+ margin-inline-start: auto;
50
+ margin-inline-end: auto;
51
51
  }
52
52
  }
package/markup/tui-table.less CHANGED
@@ -99,7 +99,7 @@
99
99
 
100
100
  &_first {
101
101
  position: relative;
102
- padding-left: 0;
102
+ padding-inline-start: 0;
103
103
  overflow: visible;
104
104
 
105
105
  &::before {
@@ -109,7 +109,7 @@
109
109
 
110
110
  &_last {
111
111
  position: relative;
112
- padding-right: 0;
112
+ padding-inline-end: 0;
113
113
  overflow: visible;
114
114
 
115
115
  &::before {
@@ -164,7 +164,7 @@
164
164
  .center-top();
165
165
 
166
166
  left: 100%;
167
- margin-left: 0.125rem;
167
+ margin-inline-start: 0.125rem;
168
168
  inline-size: 1rem;
169
169
  block-size: 1rem;
170
170
  flex-shrink: 0;
package/package.json CHANGED
@@ -1,10 +1,10 @@
1
1
  {
2
2
  "name": "@taiga-ui/styles",
3
- "version": "4.43.0",
3
+ "version": "4.44.0",
4
4
  "description": "Global Styles for Taiga UI",
5
5
  "peerDependencies": {
6
- "@taiga-ui/cdk": "^4.43.0",
7
- "@taiga-ui/core": "^4.43.0",
6
+ "@taiga-ui/cdk": "^4.44.0",
7
+ "@taiga-ui/core": "^4.44.0",
8
8
  "tslib": ">=2.8.1"
9
9
  }
10
10
  }