@taiga-ui/styles 4.4.1 → 4.5.0-canary.d55e3ee

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 (9) hide show
  1. package/basic/main.less +4 -4
  2. package/markup/tui-container.less +10 -10
  3. package/markup/tui-form.less +3 -3
  4. package/markup/tui-island.less +8 -8
  5. package/markup/tui-list.less +8 -8
  6. package/markup/tui-row.less +2 -2
  7. package/markup/tui-skeleton.less +2 -2
  8. package/markup/tui-table.less +17 -17
  9. package/package.json +3 -3
package/basic/main.less CHANGED
@@ -1,12 +1,12 @@
1
1
  html {
2
- height: 100%;
2
+ block-size: 100%;
3
3
  /* stylelint-disable-next-line */
4
4
  font-size: 16px;
5
5
  }
6
6
 
7
7
  body {
8
- height: 100%;
9
- min-height: 100%;
8
+ block-size: 100%;
9
+ min-block-size: 100%;
10
10
  text-rendering: optimizeLegibility;
11
11
  -webkit-font-smoothing: antialiased;
12
12
  -moz-osx-font-smoothing: grayscale;
@@ -39,7 +39,7 @@ textarea {
39
39
 
40
40
  hr {
41
41
  margin: 0;
42
- height: 1px;
42
+ block-size: 1px;
43
43
  border: none;
44
44
  background: var(--tui-border-normal);
45
45
  }
package/markup/tui-container.less CHANGED
@@ -6,47 +6,47 @@
6
6
 
7
7
  &.tui-container_adaptive {
8
8
  @media @tui-desktop-lg-min {
9
- width: 69rem;
9
+ inline-size: 69rem;
10
10
  }
11
11
 
12
12
  @media @tui-desktop {
13
- width: 51.5rem;
13
+ inline-size: 51.5rem;
14
14
  }
15
15
 
16
16
  @media @tui-mobile {
17
- width: 100%;
17
+ inline-size: 100%;
18
18
  padding: 0 1rem;
19
19
  box-sizing: border-box;
20
20
  }
21
21
  }
22
22
 
23
23
  @media @tui-desktop-lg-min {
24
- width: 69rem;
24
+ inline-size: 69rem;
25
25
  }
26
26
 
27
27
  @media @tui-desktop {
28
- width: 51.5rem;
28
+ inline-size: 51.5rem;
29
29
  padding: 0 3rem;
30
30
  }
31
31
 
32
32
  &_menu {
33
33
  @media @tui-desktop-lg-min {
34
- width: 69rem;
34
+ inline-size: 69rem;
35
35
  }
36
36
 
37
37
  @media @tui-desktop-interval {
38
- width: 51.5rem;
38
+ inline-size: 51.5rem;
39
39
  }
40
40
 
41
41
  @media @tui-mobile {
42
- width: auto;
42
+ inline-size: auto;
43
43
  padding: 0 1rem;
44
44
  box-sizing: border-box;
45
45
  }
46
46
  }
47
47
 
48
48
  &_fullwidth {
49
- width: auto;
49
+ inline-size: auto;
50
50
  padding: 0 1.5rem;
51
51
 
52
52
  @media @tui-mobile {
@@ -57,7 +57,7 @@
57
57
 
58
58
  &_fixed {
59
59
  @media @tui-desktop {
60
- width: 69rem;
60
+ inline-size: 69rem;
61
61
  }
62
62
  }
63
63
  }
package/markup/tui-form.less CHANGED
@@ -50,10 +50,10 @@
50
50
  }
51
51
 
52
52
  &_half-width {
53
- width: ~'calc(50% - (@{fields-space} / 2))';
53
+ inline-size: ~'calc(50% - (@{fields-space} / 2))';
54
54
 
55
55
  @media @tui-mobile {
56
- width: 100%;
56
+ inline-size: 100%;
57
57
  }
58
58
  }
59
59
 
@@ -69,7 +69,7 @@
69
69
 
70
70
  &__multi-field {
71
71
  flex: 1 1 0;
72
- min-width: 0;
72
+ min-inline-size: 0;
73
73
  margin-left: @fields-space;
74
74
 
75
75
  &:first-child {
package/markup/tui-island.less CHANGED
@@ -68,7 +68,7 @@
68
68
  }
69
69
 
70
70
  &_text-align_left {
71
- text-align: left;
71
+ text-align: start;
72
72
  }
73
73
 
74
74
  &_text-align_center {
@@ -76,7 +76,7 @@
76
76
  }
77
77
 
78
78
  &_text-align_right {
79
- text-align: right;
79
+ text-align: end;
80
80
  }
81
81
 
82
82
  &__content {
@@ -88,7 +88,7 @@
88
88
  }
89
89
 
90
90
  & > * {
91
- min-width: 0;
91
+ min-inline-size: 0;
92
92
  }
93
93
  }
94
94
 
@@ -160,7 +160,7 @@
160
160
  display: flex;
161
161
  padding-bottom: 1rem;
162
162
  margin-bottom: 1rem;
163
- border-bottom: 1px solid var(--tui-border-normal);
163
+ border-block-end: 1px solid var(--tui-border-normal);
164
164
  white-space: nowrap;
165
165
  }
166
166
 
@@ -175,15 +175,15 @@
175
175
 
176
176
  .tui-island &__footer-button {
177
177
  display: block;
178
- max-width: unset;
179
- width: ~'calc(100% + 1.875rem);'; // margin compensation
178
+ max-inline-size: unset;
179
+ inline-size: ~'calc(100% + 1.875rem);'; // margin compensation
180
180
  margin: @padding calc(-1rem + 1px) calc(-1rem + 1px); // 1px is compensations of border
181
- border-top: 1px solid var(--tui-border-normal);
181
+ border-block-start: 1px solid var(--tui-border-normal);
182
182
  border-radius: 0 0 var(--tui-radius-xl) var(--tui-radius-xl);
183
183
  }
184
184
 
185
185
  .tui-island_size_l &__footer-button {
186
- width: ~'calc(100% + 2.375rem);'; // margin compensation
186
+ inline-size: ~'calc(100% + 2.375rem);'; // margin compensation
187
187
  margin: @padding-large calc(-1.25rem + 1px) calc(-1.25rem + 1px); // 1px is compensations of border
188
188
  }
189
189
 
package/markup/tui-list.less CHANGED
@@ -48,8 +48,8 @@
48
48
  position: absolute;
49
49
  left: 0;
50
50
  top: 0.5rem;
51
- width: 0.5rem;
52
- height: 0.5rem;
51
+ inline-size: 0.5rem;
52
+ block-size: 0.5rem;
53
53
  border-radius: 100%;
54
54
  background-color: var(--tui-background-accent-1);
55
55
 
@@ -73,8 +73,8 @@
73
73
  content: '\2014';
74
74
  left: 0;
75
75
  top: auto;
76
- width: auto;
77
- height: auto;
76
+ inline-size: auto;
77
+ block-size: auto;
78
78
  background-color: transparent;
79
79
  }
80
80
  }
@@ -87,8 +87,8 @@
87
87
  left: 0;
88
88
  top: auto;
89
89
  counter-increment: counter;
90
- width: auto;
91
- height: auto;
90
+ inline-size: auto;
91
+ block-size: auto;
92
92
  color: var(--tui-text-tertiary);
93
93
  background-color: transparent;
94
94
  }
@@ -101,8 +101,8 @@
101
101
  content: '\25E4'; // represent symbol '◤'
102
102
  left: 0;
103
103
  top: 1px;
104
- width: auto;
105
- height: auto;
104
+ inline-size: auto;
105
+ block-size: auto;
106
106
  background-color: transparent;
107
107
  color: var(--tui-text-tertiary);
108
108
  font-size: 0.75rem;
package/markup/tui-row.less CHANGED
@@ -5,7 +5,7 @@
5
5
  /* stylelint-disable order/order */
6
6
  .generate-columns(@infix, @n, @padding, @i: 1) when (@i =< @n) {
7
7
  &_@{infix}-@{i} {
8
- width: (@i * 100% / @n);
8
+ inline-size: (@i * 100% / @n);
9
9
  padding-left: @padding;
10
10
  padding-right: @padding;
11
11
  box-sizing: border-box;
@@ -24,7 +24,7 @@
24
24
 
25
25
  .generate-sme-columns(@n, @padding, @i: 1) when (@i =< @n) {
26
26
  &_@{i} {
27
- width: (@i * 100% / @n);
27
+ inline-size: (@i * 100% / @n);
28
28
  padding-left: @padding;
29
29
  padding-right: @padding;
30
30
  box-sizing: border-box;
package/markup/tui-skeleton.less CHANGED
@@ -23,13 +23,13 @@
23
23
  }
24
24
 
25
25
  &_short::after {
26
- width: 40%;
26
+ inline-size: 40%;
27
27
  }
28
28
 
29
29
  &_center::after {
30
30
  .center-left();
31
31
 
32
- width: 40%;
32
+ inline-size: 40%;
33
33
  }
34
34
 
35
35
  &_text::before {
package/markup/tui-table.less CHANGED
@@ -1,7 +1,7 @@
1
1
  @height-cell-large: 5rem;
2
2
 
3
3
  .tui-table {
4
- width: 100%;
4
+ inline-size: 100%;
5
5
 
6
6
  &_layout_fixed {
7
7
  table-layout: fixed;
@@ -17,11 +17,11 @@
17
17
  }
18
18
 
19
19
  &:not(&_border_none) {
20
- border-bottom: 1px solid var(--tui-border-normal);
20
+ border-block-end: 1px solid var(--tui-border-normal);
21
21
  }
22
22
 
23
23
  &_border_top {
24
- border-top: 1px solid var(--tui-border-normal);
24
+ border-block-start: 1px solid var(--tui-border-normal);
25
25
  }
26
26
 
27
27
  &_cursor_pointer {
@@ -35,7 +35,7 @@
35
35
  font: var(--tui-font-text-s);
36
36
  padding: 0.5rem 1rem;
37
37
  vertical-align: middle;
38
- height: 2.5rem;
38
+ block-size: 2.5rem;
39
39
  color: var(--tui-text-secondary);
40
40
  background: inherit;
41
41
 
@@ -50,13 +50,13 @@
50
50
  padding: 1rem 1rem 0.875rem;
51
51
  vertical-align: top;
52
52
  word-wrap: break-word;
53
- height: 3.4375rem;
53
+ block-size: 3.4375rem;
54
54
  color: var(--tui-text-primary);
55
55
  background: inherit;
56
56
 
57
57
  &_size_l,
58
58
  .tui-table_size_l & {
59
- height: @height-cell-large - 0.0625rem;
59
+ block-size: @height-cell-large - 0.0625rem;
60
60
  }
61
61
 
62
62
  &_font-size_l,
@@ -77,12 +77,12 @@
77
77
  &__td,
78
78
  &__th {
79
79
  box-sizing: border-box;
80
- text-align: left;
80
+ text-align: start;
81
81
 
82
82
  .tui-table_size_l &::before {
83
- width: 1rem;
84
- border-top-left-radius: 1rem;
85
- border-bottom-left-radius: 1rem;
83
+ inline-size: 1rem;
84
+ border-start-start-radius: 1rem;
85
+ border-end-start-radius: 1rem;
86
86
  }
87
87
 
88
88
  &_first::before,
@@ -90,11 +90,11 @@
90
90
  content: '';
91
91
  position: absolute;
92
92
  top: 0;
93
- width: 0.75rem;
94
- height: 100%;
93
+ inline-size: 0.75rem;
94
+ block-size: 100%;
95
95
  background: inherit;
96
- border-top-left-radius: 0.75rem;
97
- border-bottom-left-radius: 0.75rem;
96
+ border-start-start-radius: 0.75rem;
97
+ border-end-start-radius: 0.75rem;
98
98
  }
99
99
 
100
100
  &_first {
@@ -123,7 +123,7 @@
123
123
  }
124
124
 
125
125
  &_text_right {
126
- text-align: right;
126
+ text-align: end;
127
127
  }
128
128
 
129
129
  &_text_overflow {
@@ -165,8 +165,8 @@
165
165
 
166
166
  left: 100%;
167
167
  margin-left: 0.125rem;
168
- width: 1rem;
169
- height: 1rem;
168
+ inline-size: 1rem;
169
+ block-size: 1rem;
170
170
  flex-shrink: 0;
171
171
  opacity: 0;
172
172
 
package/package.json CHANGED
@@ -1,10 +1,10 @@
1
1
  {
2
2
  "name": "@taiga-ui/styles",
3
- "version": "4.4.1",
3
+ "version": "4.5.0-canary.d55e3ee",
4
4
  "description": "Global Styles for Taiga UI",
5
5
  "peerDependencies": {
6
- "@taiga-ui/cdk": "^4.4.1",
7
- "@taiga-ui/core": "^4.4.1",
6
+ "@taiga-ui/cdk": "^4.5.0-canary.d55e3ee",
7
+ "@taiga-ui/core": "^4.5.0-canary.d55e3ee",
8
8
  "tslib": "^2.7.0"
9
9
  }
10
10
  }