Skip to content

Commit f558b07

Browse files
brandyscarneybrandyscarney
committed
feat(css): add new flex util classes
1 parent 3e3e3ef commit f558b07

File tree

2 files changed

+433
-110
lines changed

2 files changed

+433
-110
lines changed

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

Lines changed: 198 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,99 +1,209 @@
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 $breakpoint in map-keys($screen-breakpoints) {
133+
$infix: breakpoint-infix($breakpoint, $screen-breakpoints);
134+
@include media-breakpoint-up($breakpoint, $screen-breakpoints) {
135+
@each $value in $flex-wrap-values {
136+
.ion-flex#{$infix}-#{$value} {
137+
flex-wrap: #{$value} !important;
138+
}
139+
140+
// TODO(FW-6697): remove ion-wrap, ion-nowrap, ion-wrap-reverse
141+
// in favor of the new ion-flex-wrap, ion-flex-nowrap, and
142+
// ion-flex-wrap-reverse classes
143+
.ion#{$infix}-#{$value} {
144+
flex-wrap: #{$value} !important;
145+
}
146+
}
147+
}
148+
}
149+
150+
// Flex Fill
151+
// ------------------------------------------------------------------
152+
153+
$flex-fill-values: (
154+
1,
155+
auto,
156+
initial,
157+
none
158+
);
159+
160+
@each $breakpoint in map-keys($screen-breakpoints) {
161+
$infix: breakpoint-infix($breakpoint, $screen-breakpoints);
162+
@include media-breakpoint-up($breakpoint, $screen-breakpoints) {
163+
@each $value in $flex-fill-values {
164+
.ion-flex#{$infix}-#{$value} {
165+
flex: #{$value} !important;
166+
}
167+
}
168+
}
169+
}
170+
171+
// Flex Grow and Shrink
172+
// ------------------------------------------------------------------
173+
174+
@each $breakpoint in map-keys($screen-breakpoints) {
175+
$infix: breakpoint-infix($breakpoint, $screen-breakpoints);
176+
@include media-breakpoint-up($breakpoint, $screen-breakpoints) {
177+
.ion-flex#{$infix}-grow-0 {
178+
flex-grow: 0 !important;
179+
}
180+
181+
.ion-flex#{$infix}-grow-1 {
182+
flex-grow: 1 !important;
183+
}
184+
185+
.ion-flex#{$infix}-shrink-0 {
186+
flex-shrink: 0 !important;
187+
}
188+
189+
.ion-flex#{$infix}-shrink-1 {
190+
flex-shrink: 1 !important;
191+
}
192+
}
193+
}
194+
195+
// Flex Order
196+
// ------------------------------------------------------------------
197+
198+
@each $breakpoint in map-keys($screen-breakpoints) {
199+
$infix: breakpoint-infix($breakpoint, $screen-breakpoints);
200+
@include media-breakpoint-up($breakpoint, $screen-breakpoints) {
201+
.ion-order#{$infix}-first { order: -1 !important; }
202+
203+
@for $i from 0 through 12 {
204+
.ion-order#{$infix}-#{$i} { order: #{$i} !important; }
205+
}
206+
207+
.ion-order#{$infix}-last { order: 13 !important; }
208+
}
99209
}

0 commit comments

Comments
 (0)