Skip to content

Commit 7be7c08

Browse files
authored
feat(css): add new utility-classes (#30186)
Issue number: internal --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> Added new utility-classes related to: - flex - position - size ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. -->
1 parent 839969e commit 7be7c08

File tree

2 files changed

+44
-0
lines changed

2 files changed

+44
-0
lines changed

core/src/css/display.scss

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,3 +37,23 @@
3737
}
3838
}
3939
}
40+
41+
// Size
42+
// --------------------------------------------------
43+
.ion-full-height {
44+
height: 100% !important;
45+
}
46+
47+
.ion-full-width {
48+
width: 100% !important;
49+
}
50+
51+
// Position
52+
// --------------------------------------------------
53+
.ion-position-absolute {
54+
position: absolute !important;
55+
}
56+
57+
.ion-position-relative {
58+
position: relative !important;
59+
}

core/src/css/flex-utils.scss

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,3 +94,27 @@
9494
.ion-align-items-baseline {
9595
align-items: baseline !important;
9696
}
97+
98+
// Flex Direction
99+
// --------------------------------------------------
100+
.ion-flex-direction-column {
101+
flex-direction: column !important;
102+
}
103+
104+
.ion-flex-direction-column-reverse {
105+
flex-direction: column-reverse !important;
106+
}
107+
108+
.ion-flex-direction-row {
109+
flex-direction: row !important;
110+
}
111+
112+
.ion-flex-direction-row-reverse {
113+
flex-direction: row-reverse !important;
114+
}
115+
116+
// Flex Container
117+
// --------------------------------------------------
118+
.ion-flex-1 {
119+
flex: 1 !important;
120+
}

0 commit comments

Comments
 (0)