@taiga-ui/legacy 5.1.0 → 5.2.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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@taiga-ui/legacy",
3
- "version": "5.1.0",
3
+ "version": "5.2.0",
4
4
  "description": "Legacy Taiga UI entities from the previous major release to simplify migration",
5
5
  "keywords": [
6
6
  "legacy",
@@ -59,8 +59,8 @@
59
59
  },
60
60
  "peerDependencies": {
61
61
  "@angular/core": ">=19.0.0",
62
- "@taiga-ui/cdk": "5.1.0",
63
- "@taiga-ui/core": "5.1.0",
62
+ "@taiga-ui/cdk": "5.2.0",
63
+ "@taiga-ui/core": "5.2.0",
64
64
  "@taiga-ui/polymorpheus": "^5.0.0"
65
65
  },
66
66
  "module": "fesm2022/taiga-ui-legacy.mjs",
@@ -0,0 +1,19 @@
1
+ @keyframes tuiReveal {
2
+ from {
3
+ transform: scale(0);
4
+ }
5
+
6
+ to {
7
+ transform: scale(1);
8
+ }
9
+ }
10
+
11
+ @keyframes tuiFadeIn {
12
+ from {
13
+ opacity: var(--tui-fade-start, 0);
14
+ }
15
+
16
+ to {
17
+ opacity: var(--tui-fade-end, 1);
18
+ }
19
+ }
@@ -0,0 +1,72 @@
1
+ html {
2
+ block-size: 100%;
3
+ font-size: 16px;
4
+ }
5
+
6
+ body {
7
+ block-size: 100%;
8
+ min-block-size: 100%;
9
+ text-rendering: optimizeLegibility;
10
+ -webkit-font-smoothing: antialiased;
11
+ -moz-osx-font-smoothing: grayscale;
12
+ }
13
+
14
+ html,
15
+ body {
16
+ -webkit-overflow-scrolling: touch;
17
+ }
18
+
19
+ ul,
20
+ ol {
21
+ list-style: none;
22
+ padding: 0;
23
+ margin: 0;
24
+ }
25
+
26
+ table {
27
+ border-collapse: collapse;
28
+ border-spacing: 0;
29
+ }
30
+
31
+ input,
32
+ button,
33
+ select,
34
+ textarea {
35
+ font-family: inherit;
36
+ color: inherit;
37
+ }
38
+
39
+ iframe {
40
+ border: none;
41
+ }
42
+
43
+ // Resolve bug with use elements in IE11
44
+ // https://stackoverflow.com/questions/30653533/ie-11-crashes-when-using-dynamic-svg-elements
45
+ svg use {
46
+ pointer-events: none;
47
+ }
48
+
49
+ ::selection {
50
+ background-color: var(--tui-service-selection-background);
51
+ }
52
+
53
+ ::-ms-clear {
54
+ display: none;
55
+ }
56
+
57
+ ::-ms-reveal {
58
+ display: none;
59
+ }
60
+
61
+ // @note: only safari 16+
62
+ @supports (-webkit-hyphens: none) and (text-align-last: right) {
63
+ /**
64
+ * @descriptions:
65
+ * Safari 16 has bug when for some reason,
66
+ * the ::after blocks aren't removed
67
+ * after the destruction of the parent class
68
+ */
69
+ ::after {
70
+ content: none;
71
+ }
72
+ }
@@ -0,0 +1,61 @@
1
+ .tui-container {
2
+ margin-inline-end: auto;
3
+ margin-inline-start: auto;
4
+
5
+ &.tui-container_adaptive {
6
+ @media @tui-desktop-lg-min {
7
+ inline-size: 69rem;
8
+ }
9
+
10
+ @media @tui-desktop {
11
+ inline-size: 51.5rem;
12
+ }
13
+
14
+ @media @tui-mobile {
15
+ inline-size: 100%;
16
+ padding: 0 1rem;
17
+ box-sizing: border-box;
18
+ }
19
+ }
20
+
21
+ @media @tui-desktop-lg-min {
22
+ inline-size: 69rem;
23
+ }
24
+
25
+ @media @tui-desktop {
26
+ inline-size: 51.5rem;
27
+ padding: 0 3rem;
28
+ }
29
+
30
+ &_menu {
31
+ @media @tui-desktop-lg-min {
32
+ inline-size: 69rem;
33
+ }
34
+
35
+ @media @tui-desktop-interval {
36
+ inline-size: 51.5rem;
37
+ }
38
+
39
+ @media @tui-mobile {
40
+ inline-size: auto;
41
+ padding: 0 1rem;
42
+ box-sizing: border-box;
43
+ }
44
+ }
45
+
46
+ &_fullwidth {
47
+ inline-size: auto;
48
+ padding: 0 1.5rem;
49
+
50
+ @media @tui-mobile {
51
+ padding: 0 1rem;
52
+ box-sizing: border-box;
53
+ }
54
+ }
55
+
56
+ &_fixed {
57
+ @media @tui-desktop {
58
+ inline-size: 69rem;
59
+ }
60
+ }
61
+ }
@@ -0,0 +1,146 @@
1
+ @fields-space: 1.25rem;
2
+ @fields-space-mobile: 1rem;
3
+ @fields-space-large: 2rem;
4
+ @fields-space-large-mobile: 1.5rem;
5
+
6
+ .tui-form {
7
+ &__header {
8
+ font: var(--tui-typography-heading-h5);
9
+ margin-block-start: @fields-space-large;
10
+ margin-block-end: @fields-space;
11
+
12
+ @media @tui-mobile {
13
+ font: var(--tui-typography-body-l);
14
+ font-weight: bold;
15
+ margin-block-end: @fields-space-mobile;
16
+ }
17
+
18
+ // TODO: drop in v5
19
+ &_margin-top_none,
20
+ &_margin-block-start_none {
21
+ margin-block-start: 0;
22
+ }
23
+
24
+ // TODO: drop in v5
25
+ &_margin-bottom_none,
26
+ &_margin-block-end_none {
27
+ margin-block-end: 0;
28
+ }
29
+
30
+ // TODO: drop in v5
31
+ &_margin-bottom_small,
32
+ &_margin-block-end_small {
33
+ margin-block-end: @fields-space - 0.25rem;
34
+
35
+ @media @tui-mobile {
36
+ margin-block-end: @fields-space-mobile - 0.25rem;
37
+ }
38
+ }
39
+ }
40
+
41
+ &__row {
42
+ margin-block-start: @fields-space;
43
+
44
+ &:first-child {
45
+ margin-block-start: 0;
46
+ }
47
+
48
+ &_multi-fields {
49
+ display: flex;
50
+
51
+ @media @tui-mobile {
52
+ flex-wrap: wrap;
53
+ }
54
+ }
55
+
56
+ &_half-width {
57
+ inline-size: ~'calc(50% - (@{fields-space} / 2))';
58
+
59
+ @media @tui-mobile {
60
+ inline-size: 100%;
61
+ }
62
+ }
63
+
64
+ &_checkboxes {
65
+ display: flex;
66
+ flex-wrap: wrap;
67
+ }
68
+
69
+ @media @tui-mobile {
70
+ margin-block-start: @fields-space-mobile;
71
+ }
72
+ }
73
+
74
+ &__multi-field {
75
+ flex: 1 1 0;
76
+ min-inline-size: 0;
77
+ margin-inline-start: @fields-space;
78
+
79
+ &:first-child {
80
+ margin-inline-start: 0;
81
+ }
82
+
83
+ @media @tui-mobile {
84
+ flex-basis: 100%;
85
+ margin-block-start: @fields-space-mobile;
86
+ margin-inline-start: 0;
87
+
88
+ &:first-child {
89
+ margin-block-start: 0;
90
+ }
91
+ }
92
+ }
93
+
94
+ &__field-note {
95
+ font: var(--tui-typography-body-s);
96
+ margin-block-start: 0.25rem;
97
+ color: var(--tui-text-secondary);
98
+ }
99
+
100
+ &__field-checkbox {
101
+ margin-block-start: 0.5rem;
102
+ }
103
+
104
+ &__checkbox {
105
+ flex: ~'1 1 calc(50% - 0.625rem)';
106
+
107
+ &:nth-child(even) {
108
+ margin-inline-start: 1.25rem;
109
+ }
110
+
111
+ &:nth-child(n + 3) {
112
+ margin-block-start: 1rem;
113
+ }
114
+ }
115
+
116
+ &__buttons {
117
+ display: flex;
118
+ margin-block-start: @fields-space-large;
119
+
120
+ &_align_end {
121
+ justify-content: flex-end;
122
+ }
123
+
124
+ &_align_center {
125
+ justify-content: center;
126
+ }
127
+
128
+ @media @tui-mobile {
129
+ flex-direction: column;
130
+ margin-block-start: @fields-space-large-mobile;
131
+ }
132
+ }
133
+
134
+ &__button {
135
+ margin-inline-start: 0.75rem;
136
+
137
+ &:first-child {
138
+ margin-inline-start: 0;
139
+ }
140
+
141
+ @media @tui-mobile {
142
+ margin-block-start: 0.5rem;
143
+ margin-inline-start: 0;
144
+ }
145
+ }
146
+ }
@@ -0,0 +1,200 @@
1
+ @padding: 1rem;
2
+ @padding-large: 1.25rem;
3
+
4
+ .tui-island {
5
+ position: relative;
6
+ display: block;
7
+ border-radius: var(--tui-radius-xl);
8
+ background-color: var(--tui-background-base);
9
+ overflow-wrap: break-word;
10
+ text-decoration: none;
11
+ color: var(--tui-text-primary);
12
+ outline: none;
13
+ box-sizing: content-box;
14
+
15
+ &:not(&_hoverable)::before {
16
+ .fullsize();
17
+
18
+ content: '';
19
+ box-sizing: border-box;
20
+ border: 1px solid var(--tui-border-normal);
21
+ border-radius: inherit;
22
+ pointer-events: none;
23
+ }
24
+
25
+ &:focus,
26
+ &:hover:focus {
27
+ &::before {
28
+ border-color: var(--tui-border-focus);
29
+ }
30
+ }
31
+
32
+ &_hoverable {
33
+ .transition();
34
+
35
+ background: var(--tui-background-elevation-2);
36
+ box-shadow: var(--tui-shadow-small);
37
+ cursor: pointer;
38
+ transition-property: transform, box-shadow;
39
+ will-change: transform, box-shadow;
40
+
41
+ &:hover {
42
+ box-shadow: var(--tui-shadow-small-hover);
43
+ transform: translateY(-0.25rem);
44
+ }
45
+ }
46
+
47
+ &_transparent {
48
+ background-color: transparent;
49
+ }
50
+
51
+ &_size_s {
52
+ --tui-radius-xl: calc(4 * var(--tui-radius-l) / 3);
53
+
54
+ font: var(--tui-typography-body-s);
55
+ padding: @padding;
56
+ }
57
+
58
+ &_size_m {
59
+ --tui-radius-xl: calc(5 * var(--tui-radius-l) / 3);
60
+
61
+ font: var(--tui-typography-body-m);
62
+ padding: @padding;
63
+ }
64
+
65
+ &_size_l {
66
+ font: var(--tui-typography-body-m);
67
+ padding: @padding-large;
68
+ }
69
+
70
+ &_text-align_left {
71
+ text-align: start;
72
+ }
73
+
74
+ &_text-align_center {
75
+ text-align: center;
76
+ }
77
+
78
+ &_text-align_right {
79
+ text-align: end;
80
+ }
81
+
82
+ &__content {
83
+ display: flex;
84
+ justify-content: space-between;
85
+
86
+ .tui-island_text-align_center & {
87
+ display: block;
88
+ }
89
+
90
+ & > * {
91
+ min-inline-size: 0;
92
+ }
93
+ }
94
+
95
+ &__category {
96
+ font-size: 0.6875rem;
97
+ line-height: 1rem;
98
+ text-transform: uppercase;
99
+ letter-spacing: 0.075em;
100
+ margin: 0 0 0.5rem;
101
+ color: var(--tui-text-secondary);
102
+
103
+ .tui-island_size_l & {
104
+ margin: 0 0 0.75rem;
105
+ }
106
+ }
107
+
108
+ &__title {
109
+ font: var(--tui-typography-body-m);
110
+ margin: 0 0 0.5rem;
111
+
112
+ .tui-island_size_m & {
113
+ font: var(--tui-typography-heading-h6);
114
+ margin: 0 0 0.75rem;
115
+ }
116
+
117
+ .tui-island_size_l & {
118
+ font: var(--tui-typography-heading-h6);
119
+ }
120
+ }
121
+
122
+ &__paragraph {
123
+ margin: 0;
124
+ color: var(--tui-text-secondary);
125
+
126
+ &_link.tui-island__paragraph {
127
+ margin-block-start: 1rem;
128
+
129
+ .tui-island_size_l & {
130
+ margin: 1rem 0 0;
131
+ }
132
+ }
133
+
134
+ &_button.tui-island__paragraph {
135
+ margin-block-start: 1.25rem;
136
+
137
+ .tui-island_size_l & {
138
+ margin: 1.25rem 0 0;
139
+ }
140
+ }
141
+ }
142
+
143
+ &__figure {
144
+ display: flex;
145
+ justify-content: center;
146
+ order: 1;
147
+ flex-shrink: 0;
148
+ margin: 0 0 0 1rem;
149
+
150
+ .tui-island_size_l & {
151
+ margin-inline-start: 2.25rem;
152
+ }
153
+
154
+ .tui-island_text-align_center & {
155
+ margin: 0 0 0.75rem;
156
+ }
157
+ }
158
+
159
+ &__carousel-controls {
160
+ display: flex;
161
+ padding-block-end: 1rem;
162
+ margin-block-end: 1rem;
163
+ border-block-end: 1px solid var(--tui-border-normal);
164
+ white-space: nowrap;
165
+ }
166
+
167
+ &__carousel-pages {
168
+ margin-inline-start: auto;
169
+ color: var(--tui-text-secondary);
170
+ }
171
+
172
+ &__carousel-button {
173
+ margin-inline-end: 0.5rem;
174
+ }
175
+
176
+ .tui-island &__footer-button {
177
+ display: block;
178
+ max-inline-size: unset;
179
+ inline-size: ~'calc(100% + 1.875rem);'; // margin compensation
180
+ margin: @padding calc(-1rem + 1px) calc(-1rem + 1px); // 1px is compensations of border
181
+ border-block-start: 1px solid var(--tui-border-normal);
182
+ border-radius: 0 0 var(--tui-radius-xl) var(--tui-radius-xl);
183
+ }
184
+
185
+ .tui-island_size_l &__footer-button {
186
+ inline-size: ~'calc(100% + 2.375rem);'; // margin compensation
187
+ margin: @padding-large calc(-1.25rem + 1px) calc(-1.25rem + 1px); // 1px is compensations of border
188
+ }
189
+
190
+ &__marker {
191
+ &:first-child:not(:only-child) {
192
+ margin-inline-end: 1.25rem;
193
+ }
194
+
195
+ &:not(:first-child),
196
+ &:only-child {
197
+ margin-inline-start: 1.25rem;
198
+ }
199
+ }
200
+ }
@@ -0,0 +1,136 @@
1
+ .tui-list {
2
+ font: var(--tui-typography-body-m);
3
+ line-height: 1.5rem;
4
+ list-style-type: none;
5
+ color: var(--tui-text-primary);
6
+
7
+ &_large {
8
+ font: var(--tui-typography-body-l);
9
+ line-height: 1.75rem;
10
+ }
11
+
12
+ &_small,
13
+ &_extra-small {
14
+ font: var(--tui-typography-body-s);
15
+ line-height: 1.25rem;
16
+ }
17
+
18
+ &_nested {
19
+ margin: 0.75rem 0 0.75rem 1.25rem;
20
+ color: var(--tui-text-secondary);
21
+
22
+ .tui-list_large & {
23
+ margin-inline-start: 0.75rem;
24
+ }
25
+
26
+ .tui-list_small & {
27
+ margin-block-start: 0.5rem;
28
+ margin-block-end: 0.5rem;
29
+ }
30
+ }
31
+
32
+ &_ordered {
33
+ counter-reset: counter;
34
+ }
35
+
36
+ &__item {
37
+ position: relative;
38
+ padding-inline-start: 1.5rem;
39
+ overflow-wrap: break-word;
40
+ margin-block-start: 0.75rem;
41
+
42
+ &:first-child {
43
+ margin-block-start: 0;
44
+ }
45
+
46
+ &::before {
47
+ content: '';
48
+ position: absolute;
49
+ inset-inline-start: 0;
50
+ inset-block-start: 0.5rem;
51
+ inline-size: 0.5rem;
52
+ block-size: 0.5rem;
53
+ border-radius: 100%;
54
+ background-color: var(--tui-background-accent-1);
55
+
56
+ .tui-list_large > & {
57
+ inset-block-start: 0.625rem;
58
+ }
59
+
60
+ .tui-list_small > & {
61
+ inset-block-start: 0.375rem;
62
+ }
63
+ }
64
+
65
+ .tui-list_extra-small > & {
66
+ margin-block-start: 0.5rem;
67
+ }
68
+
69
+ .tui-list_linear & {
70
+ padding-inline-start: 1.75rem;
71
+
72
+ &::before {
73
+ content: '\2014';
74
+ inset-inline-start: 0;
75
+ inset-block-start: auto;
76
+ inline-size: auto;
77
+ block-size: auto;
78
+ background-color: transparent;
79
+ }
80
+ }
81
+
82
+ .tui-list_ordered & {
83
+ padding-inline-start: 1.25rem;
84
+
85
+ &::before {
86
+ content: counter(counter) '.';
87
+ inset-inline-start: 0;
88
+ inset-block-start: auto;
89
+ counter-increment: counter;
90
+ inline-size: auto;
91
+ block-size: auto;
92
+ color: var(--tui-text-tertiary);
93
+ background-color: transparent;
94
+ }
95
+ }
96
+
97
+ .tui-list_triangle > & {
98
+ padding-inline-start: 1.75rem;
99
+
100
+ &::before {
101
+ content: '\25E4'; // represent symbol '◤'
102
+ inset-inline-start: 0;
103
+ inset-block-start: 1px;
104
+ inline-size: auto;
105
+ block-size: auto;
106
+ background-color: transparent;
107
+ color: var(--tui-text-tertiary);
108
+ font-size: 0.75rem;
109
+ }
110
+ }
111
+ }
112
+
113
+ &__item-title {
114
+ font: var(--tui-typography-heading-h5);
115
+ margin: 0;
116
+
117
+ .tui-list_small & {
118
+ line-height: 1.25rem;
119
+ font-weight: bold;
120
+ }
121
+ }
122
+
123
+ &__description {
124
+ margin: 0.5rem 0 0;
125
+ color: var(--tui-text-secondary);
126
+
127
+ .tui-list_small & {
128
+ margin-block-start: 0.25rem;
129
+ }
130
+
131
+ .tui-list_large & {
132
+ line-height: 1.75rem;
133
+ margin-block-start: 0.75rem;
134
+ }
135
+ }
136
+ }
@@ -0,0 +1,5 @@
1
+ @media not @tui-mobile {
2
+ .tui-mobile-only {
3
+ display: none !important;
4
+ }
5
+ }
@@ -0,0 +1,13 @@
1
+ .tui-required {
2
+ &::after {
3
+ content: '*';
4
+ }
5
+
6
+ &_float::after {
7
+ position: absolute;
8
+ }
9
+
10
+ &_spacing::after {
11
+ content: '\0000a0*';
12
+ }
13
+ }
@@ -0,0 +1,137 @@
1
+ @space-small: 0.5rem;
2
+ @space-normal: 1.25rem;
3
+ @space-large: 1.5rem;
4
+
5
+ .generate-columns(@infix, @n, @padding, @i: 1) when (@i =< @n) {
6
+ &_@{infix}-@{i} {
7
+ inline-size: (@i * 100% / @n);
8
+ padding-inline-start: @padding;
9
+ padding-inline-end: @padding;
10
+ box-sizing: border-box;
11
+ }
12
+
13
+ .generate-columns(@infix, @n, @padding, (@i + 1));
14
+ }
15
+
16
+ .generate-offset-columns(@infix, @n, @i: 1) when (@i =< @n) {
17
+ &_@{infix}-@{i} {
18
+ margin-inline-start: (@i * 100% / @n);
19
+ }
20
+
21
+ .generate-offset-columns(@infix, @n, (@i + 1));
22
+ }
23
+
24
+ .generate-sme-columns(@n, @padding, @i: 1) when (@i =< @n) {
25
+ &_@{i} {
26
+ inline-size: (@i * 100% / @n);
27
+ padding-inline-start: @padding;
28
+ padding-inline-end: @padding;
29
+ box-sizing: border-box;
30
+ }
31
+
32
+ .generate-sme-columns(@n, @padding, (@i + 1));
33
+ }
34
+
35
+ .generate-sme-offset-columns(@n, @i: 1) when (@i =< @n) {
36
+ &_@{i} {
37
+ margin-inline-start: (@i * 100% / @n);
38
+ }
39
+
40
+ .generate-sme-offset-columns(@n, (@i + 1));
41
+ }
42
+
43
+ .tui-row {
44
+ display: flex;
45
+ flex-wrap: wrap;
46
+
47
+ &_align_center {
48
+ align-items: center;
49
+ }
50
+
51
+ &_align_start {
52
+ align-items: flex-start;
53
+ }
54
+
55
+ &_align_end {
56
+ align-items: flex-end;
57
+ }
58
+
59
+ &_adaptive.tui-row {
60
+ @media @tui-desktop-lg-min {
61
+ margin-inline-start: -@space-large;
62
+ margin-inline-end: -@space-large;
63
+ }
64
+
65
+ @media @tui-desktop {
66
+ margin-inline-start: -@space-normal;
67
+ margin-inline-end: -@space-normal;
68
+ }
69
+
70
+ @media @tui-mobile {
71
+ margin-inline-start: -@space-small;
72
+ margin-inline-end: -@space-small;
73
+ }
74
+ }
75
+
76
+ &_temporary.tui-row {
77
+ margin-inline-start: -@space-normal;
78
+ margin-inline-end: -@space-normal;
79
+ }
80
+
81
+ @media @tui-desktop-lg-min {
82
+ margin-inline-start: -@space-large;
83
+ margin-inline-end: -@space-large;
84
+ }
85
+
86
+ @media @tui-desktop {
87
+ margin-inline-start: -@space-normal;
88
+ margin-inline-end: -@space-normal;
89
+ }
90
+ }
91
+
92
+ .tui-col {
93
+ .generate-sme-columns(12, @space-normal);
94
+ .generate-columns(md, 12, @space-normal);
95
+
96
+ &_stretch {
97
+ display: flex;
98
+ }
99
+
100
+ .tui-row_adaptive & {
101
+ @media @tui-desktop-lg-min {
102
+ .generate-columns(lg, 12, @space-large);
103
+ }
104
+
105
+ @media @tui-desktop {
106
+ .generate-columns(md, 12, @space-normal);
107
+ }
108
+
109
+ @media @tui-mobile {
110
+ .generate-columns(xs, 12, @space-small);
111
+ }
112
+ }
113
+
114
+ .tui-row_temporary & {
115
+ .generate-sme-columns(12, @space-normal);
116
+ }
117
+
118
+ @media @tui-desktop-lg-min {
119
+ .generate-sme-columns(12, @space-large);
120
+ }
121
+ }
122
+
123
+ .tui-col-offset {
124
+ .generate-sme-offset-columns(12);
125
+
126
+ @media @tui-mobile-interval {
127
+ .generate-offset-columns(xs, 12);
128
+ }
129
+
130
+ @media @tui-desktop {
131
+ .generate-offset-columns(md, 12);
132
+ }
133
+
134
+ @media @tui-desktop-lg-min {
135
+ .generate-offset-columns(lg, 12);
136
+ }
137
+ }
@@ -0,0 +1,43 @@
1
+ .tui-skeleton {
2
+ position: relative;
3
+ color: transparent !important;
4
+ background: transparent !important;
5
+ pointer-events: none;
6
+ user-select: none;
7
+
8
+ &::after {
9
+ .fullsize();
10
+
11
+ content: '';
12
+ background-color: var(--tui-background-neutral-2);
13
+ animation: tuiSkeletonVibe ease-in-out 1s infinite alternate;
14
+ border-radius: var(--tui-skeleton-radius, 0);
15
+ }
16
+
17
+ &_light::after {
18
+ background-color: fade(#fff, 24%);
19
+ }
20
+
21
+ &_rounded::after {
22
+ border-radius: inherit;
23
+ }
24
+
25
+ &_short::after {
26
+ inline-size: 40%;
27
+ }
28
+
29
+ &_center::after {
30
+ .center-left();
31
+
32
+ inline-size: 40%;
33
+ }
34
+
35
+ &_text::before {
36
+ content: '\a0';
37
+ }
38
+
39
+ & * {
40
+ opacity: 0;
41
+ visibility: hidden;
42
+ }
43
+ }
@@ -0,0 +1,52 @@
1
+ @sizes: 16;
2
+
3
+ .generate-space(@direction, @i: 0) when (@i =< @sizes) {
4
+ .generate-space(@direction, @i + 1);
5
+
6
+ &_@{direction}-@{i}&_@{direction}-@{i} {
7
+ & when (@direction = all) {
8
+ margin: 0.25rem * @i;
9
+ }
10
+
11
+ & when (@direction = top) {
12
+ margin-block-start: 0.25rem * @i;
13
+ }
14
+
15
+ & when (@direction = bottom) {
16
+ margin-block-end: 0.25rem * @i;
17
+ }
18
+
19
+ & when (@direction = vertical) {
20
+ margin-block-start: 0.25rem * @i;
21
+ margin-block-end: 0.25rem * @i;
22
+ }
23
+
24
+ & when (@direction = left) {
25
+ margin-inline-start: 0.25rem * @i;
26
+ }
27
+
28
+ & when (@direction = right) {
29
+ margin-inline-end: 0.25rem * @i;
30
+ }
31
+
32
+ & when (@direction = horizontal) {
33
+ margin-inline-end: 0.25rem * @i;
34
+ margin-inline-start: 0.25rem * @i;
35
+ }
36
+ }
37
+ }
38
+
39
+ .tui-space {
40
+ .generate-space(all);
41
+ .generate-space(top);
42
+ .generate-space(bottom);
43
+ .generate-space(vertical);
44
+ .generate-space(left);
45
+ .generate-space(right);
46
+ .generate-space(horizontal);
47
+
48
+ &_auto {
49
+ margin-inline-start: auto;
50
+ margin-inline-end: auto;
51
+ }
52
+ }
@@ -0,0 +1,184 @@
1
+ @height-cell-large: 5rem;
2
+
3
+ .tui-table {
4
+ inline-size: 100%;
5
+
6
+ &_layout_fixed {
7
+ table-layout: fixed;
8
+ }
9
+
10
+ &__tr {
11
+ .transition(background);
12
+
13
+ outline: none;
14
+
15
+ &:not(&_hover_disabled):hover {
16
+ background: var(--tui-background-base-alt);
17
+ }
18
+
19
+ &:not(&_border_none) {
20
+ border-block-end: 1px solid var(--tui-border-normal);
21
+ }
22
+
23
+ &_border_top {
24
+ border-block-start: 1px solid var(--tui-border-normal);
25
+ }
26
+
27
+ &_cursor_pointer {
28
+ cursor: pointer;
29
+ }
30
+ }
31
+
32
+ &__th {
33
+ .text-overflow();
34
+
35
+ font: var(--tui-typography-body-s);
36
+ padding: 0.5rem 1rem;
37
+ vertical-align: middle;
38
+ block-size: 2.5rem;
39
+ color: var(--tui-text-secondary);
40
+ background: inherit;
41
+
42
+ &_font-size_l,
43
+ .tui-table_font-size_l & {
44
+ font: var(--tui-typography-body-m);
45
+ }
46
+ }
47
+
48
+ &__td {
49
+ font: var(--tui-typography-body-m);
50
+ padding: 1rem 1rem 0.875rem;
51
+ vertical-align: top;
52
+ overflow-wrap: break-word;
53
+ block-size: 3.4375rem;
54
+ color: var(--tui-text-primary);
55
+ background: inherit;
56
+
57
+ &_size_l,
58
+ .tui-table_size_l & {
59
+ block-size: @height-cell-large - 0.0625rem;
60
+ }
61
+
62
+ &_font-size_l,
63
+ .tui-table_font-size_l & {
64
+ font: var(--tui-typography-body-l);
65
+ }
66
+
67
+ &_font-size_s,
68
+ .tui-table_font-size_s & {
69
+ font: var(--tui-typography-body-s);
70
+ }
71
+
72
+ &_align_center {
73
+ vertical-align: middle;
74
+ }
75
+ }
76
+
77
+ &__td,
78
+ &__th {
79
+ box-sizing: border-box;
80
+ text-align: start;
81
+
82
+ .tui-table_size_l &::before {
83
+ inline-size: 1rem;
84
+ border-top-left-radius: 1rem;
85
+ border-bottom-left-radius: 1rem;
86
+ }
87
+
88
+ &_first::before,
89
+ &_last::before {
90
+ content: '';
91
+ position: absolute;
92
+ inset-block-start: 0;
93
+ inline-size: 0.75rem;
94
+ block-size: 100%;
95
+ background: inherit;
96
+ border-top-left-radius: 0.75rem;
97
+ border-bottom-left-radius: 0.75rem;
98
+ }
99
+
100
+ &_first {
101
+ position: relative;
102
+ padding-inline-start: 0;
103
+ overflow: visible;
104
+
105
+ &::before {
106
+ inset-inline-end: 100%;
107
+ }
108
+ }
109
+
110
+ &_last {
111
+ position: relative;
112
+ padding-inline-end: 0;
113
+ overflow: visible;
114
+
115
+ &::before {
116
+ inset-inline-start: 100%;
117
+ transform: scaleX(-1);
118
+ }
119
+ }
120
+
121
+ &_text_center {
122
+ text-align: center;
123
+ }
124
+
125
+ &_text_right {
126
+ text-align: end;
127
+ }
128
+
129
+ &_text_overflow {
130
+ .text-overflow();
131
+ }
132
+ }
133
+
134
+ &__subtext {
135
+ font: var(--tui-typography-body-s);
136
+ margin: 0.25rem 0 0;
137
+ color: var(--tui-text-tertiary);
138
+ }
139
+
140
+ &__sort {
141
+ .button-clear();
142
+ .transition(color);
143
+
144
+ position: relative;
145
+ display: inline-flex;
146
+ align-items: center;
147
+ outline: none;
148
+ cursor: pointer;
149
+
150
+ &:hover {
151
+ color: var(--tui-text-primary);
152
+ }
153
+
154
+ &_active {
155
+ color: var(--tui-text-action);
156
+
157
+ &:hover {
158
+ color: var(--tui-text-action-hover);
159
+ }
160
+ }
161
+ }
162
+
163
+ &__sort-icon {
164
+ .center-top();
165
+
166
+ inset-inline-start: 100%;
167
+ margin-inline-start: 0.125rem;
168
+ inline-size: 1rem;
169
+ block-size: 1rem;
170
+ flex-shrink: 0;
171
+ opacity: 0;
172
+
173
+ .tui-table__sort_active &,
174
+ .tui-table__sort:hover & {
175
+ .transition(transform);
176
+
177
+ opacity: 1;
178
+ }
179
+
180
+ .tui-table__sort_active.tui-table__sort_up & {
181
+ transform: rotate(180deg) translateY(50%);
182
+ }
183
+ }
184
+ }
@@ -0,0 +1,57 @@
1
+ .tui-text {
2
+ &_h1 {
3
+ font: var(--tui-typography-heading-h1);
4
+ }
5
+
6
+ &_h2 {
7
+ font: var(--tui-typography-heading-h2);
8
+ }
9
+
10
+ &_h3 {
11
+ font: var(--tui-typography-heading-h3);
12
+ }
13
+
14
+ &_h4 {
15
+ font: var(--tui-typography-heading-h4);
16
+ }
17
+
18
+ &_h5 {
19
+ font: var(--tui-typography-heading-h5);
20
+ }
21
+
22
+ &_h6 {
23
+ font: var(--tui-typography-heading-h6);
24
+ }
25
+
26
+ &_body-l {
27
+ font: var(--tui-typography-body-l);
28
+ }
29
+
30
+ &_body-l-2 {
31
+ font: var(--tui-typography-ui-l);
32
+ }
33
+
34
+ &_body-m {
35
+ font: var(--tui-typography-body-m);
36
+ }
37
+
38
+ &_body-m-2 {
39
+ font: var(--tui-typography-ui-m);
40
+ }
41
+
42
+ &_body-s {
43
+ font: var(--tui-typography-body-s);
44
+ }
45
+
46
+ &_body-s-2 {
47
+ font: var(--tui-typography-ui-s);
48
+ }
49
+
50
+ &_body-xs {
51
+ font: var(--tui-typography-body-xs);
52
+ }
53
+
54
+ &_bold {
55
+ font-weight: bold;
56
+ }
57
+ }
@@ -0,0 +1,14 @@
1
+ @import '@taiga-ui/styles/utils.less';
2
+ @import 'basic/keyframes.less';
3
+ @import 'basic/main.less';
4
+ @import 'markup/tui-container.less';
5
+ @import 'markup/tui-form.less';
6
+ @import 'markup/tui-island.less';
7
+ @import 'markup/tui-list.less';
8
+ @import 'markup/tui-mobile-only.less';
9
+ @import 'markup/tui-required.less';
10
+ @import 'markup/tui-row.less';
11
+ @import 'markup/tui-skeleton.less';
12
+ @import 'markup/tui-space.less';
13
+ @import 'markup/tui-table.less';
14
+ @import 'markup/tui-text.less';