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

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

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