Skip to content

Commit 5aa6551

Browse files
brandyscarneybrandyscarney
committed
feat(css): add new flex utils css classes and test
1 parent 3e8a888 commit 5aa6551

File tree

2 files changed

+300
-88
lines changed

2 files changed

+300
-88
lines changed

‎core/src/css/flex-utils.scss

Lines changed: 200 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,99 +1,211 @@
1-
// Flex Utilities
2-
// --------------------------------------------------
3-
// Creates flex classes to align flex containers
4-
// and items
5-
6-
// Align Self
7-
// --------------------------------------------------
8-
9-
.ion-align-self-start {
10-
align-self: flex-start !important;
11-
}
12-
13-
.ion-align-self-end {
14-
align-self: flex-end !important;
15-
}
16-
17-
.ion-align-self-center {
18-
align-self: center !important;
19-
}
1+
@import "../themes/ionic.globals";
2+
@import "../themes/ionic.mixins";
203

21-
.ion-align-self-stretch {
22-
align-self: stretch !important;
23-
}
24-
25-
.ion-align-self-baseline {
26-
align-self: baseline !important;
27-
}
28-
29-
.ion-align-self-auto {
30-
align-self: auto !important;
31-
}
32-
33-
34-
// Flex Wrap
35-
// --------------------------------------------------
36-
37-
.ion-wrap {
38-
flex-wrap: wrap !important;
39-
}
40-
41-
.ion-nowrap {
42-
flex-wrap: nowrap !important;
43-
}
44-
45-
.ion-wrap-reverse {
46-
flex-wrap: wrap-reverse !important;
47-
}
48-
49-
50-
// Justify Content
51-
// --------------------------------------------------
52-
53-
.ion-justify-content-start {
54-
justify-content: flex-start !important;
55-
}
56-
57-
.ion-justify-content-center {
58-
justify-content: center !important;
59-
}
60-
61-
.ion-justify-content-end {
62-
justify-content: flex-end !important;
63-
}
64-
65-
.ion-justify-content-around {
66-
justify-content: space-around !important;
67-
}
68-
69-
.ion-justify-content-between {
70-
justify-content: space-between !important;
71-
}
72-
73-
.ion-justify-content-evenly {
74-
justify-content: space-evenly !important;
4+
// Flex Utilities
5+
// ------------------------------------------------------------------
6+
// Provides utility classes to control flexbox layout, alignment,
7+
// and sizing of elements. Includes responsive variants for managing
8+
// flex direction, alignment, justification, wrapping, growth,
9+
// shrinking, and ordering at different breakpoints.
10+
11+
// Align Content
12+
// ------------------------------------------------------------------
13+
14+
$align-content-values: (
15+
start: flex-start,
16+
end: flex-end,
17+
center: center,
18+
between: space-between,
19+
around: space-around,
20+
stretch: stretch
21+
);
22+
23+
@each $breakpoint in map-keys($screen-breakpoints) {
24+
$infix: breakpoint-infix($breakpoint, $screen-breakpoints);
25+
@include media-breakpoint-up($breakpoint, $screen-breakpoints) {
26+
@each $key, $value in $align-content-values {
27+
.ion-align-content#{$infix}-#{$key} {
28+
align-content: #{$value} !important;
29+
}
30+
}
31+
}
7532
}
7633

77-
7834
// Align Items
79-
// --------------------------------------------------
80-
81-
.ion-align-items-start {
82-
align-items: flex-start !important;
35+
// ------------------------------------------------------------------
36+
37+
$align-items-values: (
38+
start,
39+
end,
40+
center,
41+
stretch,
42+
baseline
43+
);
44+
45+
@each $breakpoint in map-keys($screen-breakpoints) {
46+
$infix: breakpoint-infix($breakpoint, $screen-breakpoints);
47+
@include media-breakpoint-up($breakpoint, $screen-breakpoints) {
48+
@each $value in $align-items-values {
49+
.ion-align-items#{$infix}-#{$value} {
50+
align-items: #{$value} !important;
51+
}
52+
}
53+
}
8354
}
8455

85-
.ion-align-items-center {
86-
align-items: center !important;
87-
}
88-
89-
.ion-align-items-end {
90-
align-items: flex-end !important;
56+
// Align Self
57+
// ------------------------------------------------------------------
58+
59+
$align-self-values: (
60+
start,
61+
end,
62+
center,
63+
stretch,
64+
baseline,
65+
auto
66+
);
67+
68+
@each $breakpoint in map-keys($screen-breakpoints) {
69+
$infix: breakpoint-infix($breakpoint, $screen-breakpoints);
70+
@include media-breakpoint-up($breakpoint, $screen-breakpoints) {
71+
@each $value in $align-self-values {
72+
.ion-align-self#{$infix}-#{$value} {
73+
align-self: #{$value} !important;
74+
}
75+
}
76+
}
9177
}
9278

93-
.ion-align-items-stretch {
94-
align-items: stretch !important;
79+
// Justify Content
80+
// ------------------------------------------------------------------
81+
82+
$justify-content-values: (
83+
start: flex-start,
84+
end: flex-end,
85+
center: center,
86+
between: space-between,
87+
around: space-around,
88+
evenly: space-evenly
89+
);
90+
91+
@each $breakpoint in map-keys($screen-breakpoints) {
92+
$infix: breakpoint-infix($breakpoint, $screen-breakpoints);
93+
@include media-breakpoint-up($breakpoint, $screen-breakpoints) {
94+
@each $key, $value in $justify-content-values {
95+
.ion-justify-content#{$infix}-#{$key} {
96+
justify-content: #{$value} !important;
97+
}
98+
}
99+
}
100+
}
101+
102+
// Flex Direction
103+
// ------------------------------------------------------------------
104+
105+
$flex-direction-values: (
106+
row,
107+
row-reverse,
108+
column,
109+
column-reverse
110+
);
111+
112+
@each $breakpoint in map-keys($screen-breakpoints) {
113+
$infix: breakpoint-infix($breakpoint, $screen-breakpoints);
114+
@include media-breakpoint-up($breakpoint, $screen-breakpoints) {
115+
@each $value in $flex-direction-values {
116+
.ion-flex#{$infix}-#{$value} {
117+
flex-direction: #{$value} !important;
118+
}
119+
}
120+
}
95121
}
96122

97-
.ion-align-items-baseline {
98-
align-items: baseline !important;
123+
// Flex Wrap
124+
// ------------------------------------------------------------------
125+
126+
$flex-wrap-values: (
127+
wrap,
128+
nowrap,
129+
wrap-reverse
130+
);
131+
132+
@each $value in $flex-wrap-values {
133+
// TODO(FW-6697): remove ion-wrap, ion-nowrap, ion-wrap-reverse
134+
// in favor of the new ion-flex-wrap, ion-flex-nowrap, and
135+
// ion-flex-wrap-reverse classes
136+
.ion-#{$value} {
137+
flex-wrap: #{$value} !important;
138+
}
139+
}
140+
141+
@each $breakpoint in map-keys($screen-breakpoints) {
142+
$infix: breakpoint-infix($breakpoint, $screen-breakpoints);
143+
@include media-breakpoint-up($breakpoint, $screen-breakpoints) {
144+
@each $value in $flex-wrap-values {
145+
.ion-flex#{$infix}-#{$value} {
146+
flex-wrap: #{$value} !important;
147+
}
148+
}
149+
}
150+
}
151+
152+
// Flex Fill
153+
// ------------------------------------------------------------------
154+
155+
$flex-fill-values: (
156+
1,
157+
auto,
158+
initial,
159+
none
160+
);
161+
162+
@each $breakpoint in map-keys($screen-breakpoints) {
163+
$infix: breakpoint-infix($breakpoint, $screen-breakpoints);
164+
@include media-breakpoint-up($breakpoint, $screen-breakpoints) {
165+
@each $value in $flex-fill-values {
166+
.ion-flex#{$infix}-#{$value} {
167+
flex: #{$value} !important;
168+
}
169+
}
170+
}
171+
}
172+
173+
// Flex Grow and Shrink
174+
// ------------------------------------------------------------------
175+
176+
@each $breakpoint in map-keys($screen-breakpoints) {
177+
$infix: breakpoint-infix($breakpoint, $screen-breakpoints);
178+
@include media-breakpoint-up($breakpoint, $screen-breakpoints) {
179+
.ion-flex#{$infix}-grow-0 {
180+
flex-grow: 0 !important;
181+
}
182+
183+
.ion-flex#{$infix}-grow-1 {
184+
flex-grow: 1 !important;
185+
}
186+
187+
.ion-flex#{$infix}-shrink-0 {
188+
flex-shrink: 0 !important;
189+
}
190+
191+
.ion-flex#{$infix}-shrink-1 {
192+
flex-shrink: 1 !important;
193+
}
194+
}
195+
}
196+
197+
// Flex Order
198+
// ------------------------------------------------------------------
199+
200+
@each $breakpoint in map-keys($screen-breakpoints) {
201+
$infix: breakpoint-infix($breakpoint, $screen-breakpoints);
202+
@include media-breakpoint-up($breakpoint, $screen-breakpoints) {
203+
.ion-order#{$infix}-first { order: -1 !important; }
204+
205+
@for $i from 0 through 12 {
206+
.ion-order#{$infix}-#{$i} { order: #{$i} !important; }
207+
}
208+
209+
.ion-order#{$infix}-last { order: 13 !important; }
210+
}
99211
}

0 commit comments

Comments
 (0)