Skip to content
Permalink
Browse files

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

fixes #17569
  • Loading branch information...
brandyscarney committed Feb 22, 2019
1 parent 60aef2e commit c49276c477bdcc6d796314cafe683b92ed7b12f3
Showing with 28 additions and 4 deletions.
  1. +21 −1 core/src/css/flex-utils.scss
  2. +7 −3 core/src/css/float-elements.scss
@@ -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;
}
@@ -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);
}

0 comments on commit c49276c

Please sign in to comment.
You can’t perform that action at this time.