javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-09 08:09:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(css): add the missing css classes to flex and float utils (#17570)

Browse Source 
fixes #17569
This commit is contained in:
Brandy Carney
2019-02-22 11:54:46 -05:00
committed by GitHub
parent 60aef2e418
commit c49276c477
2 changed files with 28 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
core/src/css/flex-utils.scss
View File

@ -1,31 +1,37 @@
// Flex Utilities
// --------------------------------------------------
// Creates flex attributes to align flex containers
// Creates flex classes to align flex containers
// and items
// Align Self
// --------------------------------------------------
.ion-align-self-start,
[align-self-start] {
align-self: flex-start !important;
}
.ion-align-self-end,
[align-self-end] {
align-self: flex-end !important;
}
.ion-align-self-center,
[align-self-center] {
align-self: center !important;
}
.ion-align-self-stretch,
[align-self-stretch] {
align-self: stretch !important;
}
.ion-align-self-baseline,
[align-self-baseline] {
align-self: baseline !important;
}
.ion-align-self-auto,
[align-self-auto] {
align-self: auto !important;
}
@ -34,14 +40,17 @@
// Flex Wrap
// --------------------------------------------------
.ion-wrap,
[wrap] {
flex-wrap: wrap !important;
}
.ion-nowrap,
[nowrap] {
flex-wrap: nowrap !important;
}
.ion-wrap-reverse,
[wrap-reverse] {
flex-wrap: wrap-reverse !important;
}
@ -50,26 +59,32 @@
// Justify Content
// --------------------------------------------------
.ion-justify-content-start,
[justify-content-start] {
justify-content: flex-start !important;
}
.ion-justify-content-center,
[justify-content-center] {
justify-content: center !important;
}
.ion-justify-content-end,
[justify-content-end] {
justify-content: flex-end !important;
}
.ion-justify-content-around,
[justify-content-around] {
justify-content: space-around !important;
}
.ion-justify-content-between,
[justify-content-between] {
justify-content: space-between !important;
}
.ion-justify-content-evenly,
[justify-content-evenly] {
justify-content: space-evenly !important;
}
@ -78,22 +93,27 @@
// Align Items
// --------------------------------------------------
.ion-align-items-start,
[align-items-start] {
align-items: flex-start !important;
}
.ion-align-items-center,
[align-items-center] {
align-items: center !important;
}
.ion-align-items-end,
[align-items-end] {
align-items: flex-end !important;
}
.ion-align-items-stretch,
[align-items-stretch] {
align-items: stretch !important;
}
.ion-align-items-baseline,
[align-items-baseline] {
align-items: baseline !important;
}

10
core/src/css/float-elements.scss
View File

@ -3,26 +3,30 @@
// Float Elements
// --------------------------------------------------
// Creates float attributes based on screen size
// Creates float classes based on screen size
@each $breakpoint in map-keys($screen-breakpoints) {
$infix: breakpoint-infix($breakpoint, $screen-breakpoints);
@include media-breakpoint-up($breakpoint, $screen-breakpoints) {
// Provide `[float-{bp}]` attributes for floating the element based
// on the breakpoint
// Provide `.ion-float-{bp}-{side}` classes for floating the element based
// on the breakpoint and side
.ion-float#{$infix}-left,
[float#{$infix}-left] {
@include float(left, !important);
}
.ion-float#{$infix}-right,
[float#{$infix}-right] {
@include float(right, !important);
}
.ion-float#{$infix}-start,
[float#{$infix}-start] {
@include float(start, !important);
}
.ion-float#{$infix}-end,
[float#{$infix}-end] {
@include float(end, !important);
}