Skip to content

Commit 1e3ce00

Browse files
lazdlazd
committed
feat: make Icon support RTL
1 parent df527ae commit 1e3ce00

File tree

2 files changed

+83
-83
lines changed

2 files changed

+83
-83
lines changed

‎components/icon/ui-icons.css

Lines changed: 68 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -48,138 +48,138 @@ governing permissions and limitations under the License.
4848

4949
/* UI Icons */
5050
.spectrum-UIIcon-AlertMedium {
51-
width: var(--spectrum-icon-alert-medium-width);
52-
height: var(--spectrum-icon-alert-medium-height);
51+
inline-size: var(--spectrum-icon-alert-medium-width);
52+
block-size: var(--spectrum-icon-alert-medium-height);
5353
}
5454
.spectrum-UIIcon-AlertSmall {
55-
width: var(--spectrum-icon-alert-small-width);
56-
height: var(--spectrum-icon-alert-small-height);
55+
inline-size: var(--spectrum-icon-alert-small-width);
56+
block-size: var(--spectrum-icon-alert-small-height);
5757
}
5858
.spectrum-UIIcon-ArrowDownSmall {
59-
width: var(--spectrum-icon-arrow-down-small-width);
60-
height: var(--spectrum-icon-arrow-down-small-height);
59+
inline-size: var(--spectrum-icon-arrow-down-small-width);
60+
block-size: var(--spectrum-icon-arrow-down-small-height);
6161
}
6262
.spectrum-UIIcon-ArrowLeftMedium {
63-
width: var(--spectrum-icon-arrow-left-medium-width);
64-
height: var(--spectrum-icon-arrow-left-medium-height);
63+
inline-size: var(--spectrum-icon-arrow-left-medium-width);
64+
block-size: var(--spectrum-icon-arrow-left-medium-height);
6565
}
6666
.spectrum-UIIcon-Asterisk {
67-
width: var(--spectrum-fieldlabel-asterisk-size);
68-
height: var(--spectrum-fieldlabel-asterisk-size);
67+
inline-size: var(--spectrum-fieldlabel-asterisk-size);
68+
block-size: var(--spectrum-fieldlabel-asterisk-size);
6969
}
7070
.spectrum-UIIcon-CheckmarkMedium {
71-
width: var(--spectrum-icon-checkmark-medium-width);
72-
height: var(--spectrum-icon-checkmark-medium-height);
71+
inline-size: var(--spectrum-icon-checkmark-medium-width);
72+
block-size: var(--spectrum-icon-checkmark-medium-height);
7373
}
7474
.spectrum-UIIcon-CheckmarkSmall {
75-
width: var(--spectrum-icon-checkmark-small-width);
76-
height: var(--spectrum-icon-checkmark-small-height);
75+
inline-size: var(--spectrum-icon-checkmark-small-width);
76+
block-size: var(--spectrum-icon-checkmark-small-height);
7777
}
7878
.spectrum-UIIcon-ChevronDownMedium {
79-
width: var(--spectrum-icon-chevron-down-medium-width);
80-
height: var(--spectrum-icon-chevron-down-medium-height);
79+
inline-size: var(--spectrum-icon-chevron-down-medium-width);
80+
block-size: var(--spectrum-icon-chevron-down-medium-height);
8181
}
8282
.spectrum-UIIcon-ChevronDownSmall {
83-
width: var(--spectrum-icon-chevron-down-small-width);
84-
height: var(--spectrum-icon-chevron-down-small-height);
83+
inline-size: var(--spectrum-icon-chevron-down-small-width);
84+
block-size: var(--spectrum-icon-chevron-down-small-height);
8585
}
8686
.spectrum-UIIcon-ChevronLeftLarge {
87-
width: var(--spectrum-icon-chevron-left-large-width);
88-
height: var(--spectrum-icon-chevron-left-large-height);
87+
inline-size: var(--spectrum-icon-chevron-left-large-width);
88+
block-size: var(--spectrum-icon-chevron-left-large-height);
8989
}
9090
.spectrum-UIIcon-ChevronLeftMedium {
91-
width: var(--spectrum-icon-chevron-left-medium-width);
92-
height: var(--spectrum-icon-chevron-left-medium-height);
91+
inline-size: var(--spectrum-icon-chevron-left-medium-width);
92+
block-size: var(--spectrum-icon-chevron-left-medium-height);
9393
}
9494
.spectrum-UIIcon-ChevronRightLarge {
95-
width: var(--spectrum-icon-chevron-right-large-width);
96-
height: var(--spectrum-icon-chevron-right-large-height);
95+
inline-size: var(--spectrum-icon-chevron-right-large-width);
96+
block-size: var(--spectrum-icon-chevron-right-large-height);
9797
}
9898
.spectrum-UIIcon-ChevronRightMedium {
99-
width: var(--spectrum-icon-chevron-right-medium-width);
100-
height: var(--spectrum-icon-chevron-right-medium-height);
99+
inline-size: var(--spectrum-icon-chevron-right-medium-width);
100+
block-size: var(--spectrum-icon-chevron-right-medium-height);
101101
}
102102
.spectrum-UIIcon-ChevronRightSmall {
103-
width: var(--spectrum-icon-chevron-right-small-width);
104-
height: var(--spectrum-icon-chevron-right-small-height);
103+
inline-size: var(--spectrum-icon-chevron-right-small-width);
104+
block-size: var(--spectrum-icon-chevron-right-small-height);
105105
}
106106
.spectrum-UIIcon-ChevronUpSmall {
107-
width: var(--spectrum-icon-chevron-up-small-width);
108-
height: var(--spectrum-icon-chevron-up-small-height);
107+
inline-size: var(--spectrum-icon-chevron-up-small-width);
108+
block-size: var(--spectrum-icon-chevron-up-small-height);
109109
}
110110
.spectrum-UIIcon-CornerTriangle {
111-
width: var(--spectrum-icon-cornertriangle-width);
112-
height: var(--spectrum-icon-cornertriangle-height);
111+
inline-size: var(--spectrum-icon-cornertriangle-width);
112+
block-size: var(--spectrum-icon-cornertriangle-height);
113113
}
114114
.spectrum-UIIcon-CrossLarge {
115-
width: var(--spectrum-icon-cross-large-width);
116-
height: var(--spectrum-icon-cross-large-height);
115+
inline-size: var(--spectrum-icon-cross-large-width);
116+
block-size: var(--spectrum-icon-cross-large-height);
117117
}
118118
.spectrum-UIIcon-CrossMedium {
119-
width: var(--spectrum-icon-cross-medium-width);
120-
height: var(--spectrum-icon-cross-medium-height);
119+
inline-size: var(--spectrum-icon-cross-medium-width);
120+
block-size: var(--spectrum-icon-cross-medium-height);
121121
}
122122
.spectrum-UIIcon-CrossSmall {
123-
width: var(--spectrum-icon-cross-small-width);
124-
height: var(--spectrum-icon-cross-small-height);
123+
inline-size: var(--spectrum-icon-cross-small-width);
124+
block-size: var(--spectrum-icon-cross-small-height);
125125
}
126126
.spectrum-UIIcon-DashSmall {
127-
width: var(--spectrum-icon-dash-small-width);
128-
height: var(--spectrum-icon-dash-small-height);
127+
inline-size: var(--spectrum-icon-dash-small-width);
128+
block-size: var(--spectrum-icon-dash-small-height);
129129
}
130130
.spectrum-UIIcon-DoubleGripper {
131-
width: var(--spectrum-icon-doublegripper-width);
132-
height: var(--spectrum-icon-doublegripper-height);
131+
inline-size: var(--spectrum-icon-doublegripper-width);
132+
block-size: var(--spectrum-icon-doublegripper-height);
133133
}
134134
.spectrum-UIIcon-FolderBreadcrumb {
135-
width: var(--spectrum-icon-folderbreadcrumb-width);
136-
height: var(--spectrum-icon-folderbreadcrumb-height);
135+
inline-size: var(--spectrum-icon-folderbreadcrumb-width);
136+
block-size: var(--spectrum-icon-folderbreadcrumb-height);
137137
}
138138
.spectrum-UIIcon-HelpMedium {
139-
width: var(--spectrum-icon-info-medium-width);
140-
height: var(--spectrum-icon-info-medium-height);
139+
inline-size: var(--spectrum-icon-info-medium-width);
140+
block-size: var(--spectrum-icon-info-medium-height);
141141
}
142142
.spectrum-UIIcon-HelpSmall {
143-
width: var(--spectrum-icon-info-small-width);
144-
height: var(--spectrum-icon-info-small-height);
143+
inline-size: var(--spectrum-icon-info-small-width);
144+
block-size: var(--spectrum-icon-info-small-height);
145145
}
146146
.spectrum-UIIcon-InfoMedium {
147-
width: var(--spectrum-icon-info-medium-width);
148-
height: var(--spectrum-icon-info-medium-height);
147+
inline-size: var(--spectrum-icon-info-medium-width);
148+
block-size: var(--spectrum-icon-info-medium-height);
149149
}
150150
.spectrum-UIIcon-InfoSmall {
151-
width: var(--spectrum-icon-info-small-width);
152-
height: var(--spectrum-icon-info-small-height);
151+
inline-size: var(--spectrum-icon-info-small-width);
152+
block-size: var(--spectrum-icon-info-small-height);
153153
}
154154
.spectrum-UIIcon-Magnifier {
155-
width: var(--spectrum-icon-magnifier-width);
156-
height: var(--spectrum-icon-magnifier-height);
155+
inline-size: var(--spectrum-icon-magnifier-width);
156+
block-size: var(--spectrum-icon-magnifier-height);
157157
}
158158
.spectrum-UIIcon-SkipLeft {
159-
width: var(--spectrum-icon-skip-left-width);
160-
height: var(--spectrum-icon-skip-left-height);
159+
inline-size: var(--spectrum-icon-skip-left-width);
160+
block-size: var(--spectrum-icon-skip-left-height);
161161
}
162162
.spectrum-UIIcon-SkipRight {
163-
width: var(--spectrum-icon-skip-right-width);
164-
height: var(--spectrum-icon-skip-right-height);
163+
inline-size: var(--spectrum-icon-skip-right-width);
164+
block-size: var(--spectrum-icon-skip-right-height);
165165
}
166166
.spectrum-UIIcon-Star {
167-
width: var(--spectrum-icon-star-width);
168-
height: var(--spectrum-icon-star-height);
167+
inline-size: var(--spectrum-icon-star-width);
168+
block-size: var(--spectrum-icon-star-height);
169169
}
170170
.spectrum-UIIcon-StarOutline {
171-
width: var(--spectrum-icon-star-outline-width);
172-
height: var(--spectrum-icon-star-outline-height);
171+
inline-size: var(--spectrum-icon-star-outline-width);
172+
block-size: var(--spectrum-icon-star-outline-height);
173173
}
174174
.spectrum-UIIcon-SuccessMedium {
175-
width: var(--spectrum-icon-success-medium-width);
176-
height: var(--spectrum-icon-success-medium-height);
175+
inline-size: var(--spectrum-icon-success-medium-width);
176+
block-size: var(--spectrum-icon-success-medium-height);
177177
}
178178
.spectrum-UIIcon-SuccessSmall {
179-
width: var(--spectrum-icon-success-small-width);
180-
height: var(--spectrum-icon-success-small-height);
179+
inline-size: var(--spectrum-icon-success-small-width);
180+
block-size: var(--spectrum-icon-success-small-height);
181181
}
182182
.spectrum-UIIcon-TripleGripper {
183-
width: var(--spectrum-icon-triplegripper-width);
184-
height: var(--spectrum-icon-triplegripper-height);
183+
inline-size: var(--spectrum-icon-triplegripper-width);
184+
block-size: var(--spectrum-icon-triplegripper-height);
185185
}

‎components/icon/workflow-icons.css

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -24,61 +24,61 @@ governing permissions and limitations under the License.
2424
&,
2525
img,
2626
svg {
27-
height: var(--spectrum-icon-size-xxs);
28-
width: var(--spectrum-icon-size-xxs);
27+
block-size: var(--spectrum-icon-size-xxs);
28+
inline-size: var(--spectrum-icon-size-xxs);
2929
}
3030
}
3131

3232
.spectrum-Icon--sizeXS {
3333
&,
3434
img,
3535
svg {
36-
height: var(--spectrum-icon-size-xs);
37-
width: var(--spectrum-icon-size-xs);
36+
block-size: var(--spectrum-icon-size-xs);
37+
inline-size: var(--spectrum-icon-size-xs);
3838
}
3939
}
4040

4141
.spectrum-Icon--sizeS {
4242
&,
4343
img,
4444
svg {
45-
height: var(--spectrum-icon-size-s);
46-
width: var(--spectrum-icon-size-s);
45+
block-size: var(--spectrum-icon-size-s);
46+
inline-size: var(--spectrum-icon-size-s);
4747
}
4848
}
4949

5050
.spectrum-Icon--sizeM {
5151
&,
5252
img,
5353
svg {
54-
height: var(--spectrum-icon-size-m);
55-
width: var(--spectrum-icon-size-m);
54+
block-size: var(--spectrum-icon-size-m);
55+
inline-size: var(--spectrum-icon-size-m);
5656
}
5757
}
5858

5959
.spectrum-Icon--sizeL {
6060
&,
6161
img,
6262
svg {
63-
height: var(--spectrum-icon-size-l);
64-
width: var(--spectrum-icon-size-l);
63+
block-size: var(--spectrum-icon-size-l);
64+
inline-size: var(--spectrum-icon-size-l);
6565
}
6666
}
6767

6868
.spectrum-Icon--sizeXL {
6969
&,
7070
img,
7171
svg {
72-
height: var(--spectrum-icon-size-xl);
73-
width: var(--spectrum-icon-size-xl);
72+
block-size: var(--spectrum-icon-size-xl);
73+
inline-size: var(--spectrum-icon-size-xl);
7474
}
7575
}
7676

7777
.spectrum-Icon--sizeXXL {
7878
&,
7979
img,
8080
svg {
81-
height: var(--spectrum-icon-size-xxl);
82-
width: var(--spectrum-icon-size-xxl);
81+
block-size: var(--spectrum-icon-size-xxl);
82+
inline-size: var(--spectrum-icon-size-xxl);
8383
}
84-
}
84+
}

0 commit comments

Comments
 (0)