feat(app): add responsive utility attributes by screen size (#11228)

- moves breakpoint mixins to the ionic.mixins file
- adds responsive attributes for text alignment, transform, and
floating elements
- adds ability to turn these off so they don’t get added to the css
file using sass variables

references #10904
closes #10567

src/components/app/app.scss

@@ -2,6 +2,7 @@
 // Globals
 // --------------------------------------------------
 @import "../../themes/ionic.globals";
+@import "../../themes/ionic.mixins";
 
 
 // Normalize
@@ -49,6 +50,36 @@ $h5-font-size:                 1.8rem !default;
 $h6-font-size:                 1.6rem !default;
 
 
+// Responsive Utilities
+// --------------------------------------------------
+
+/// @prop - Whether to include all of the responsive utility attributes
+$include-responsive-utilities:          true !default;
+
+/// @prop - Whether to include all of the responsive text alignment attributes
+$include-text-alignment-utilities:      $include-responsive-utilities !default;
+
+/// @prop - Whether to include all of the responsive text transform attributes
+$include-text-transform-utilities:      $include-responsive-utilities !default;
+
+/// @prop - Whether to include all of the responsive float attributes
+$include-float-element-utilities:       $include-responsive-utilities !default;
+
+
+// Screen Breakpoints
+// --------------------------------------------------
+
+/// @prop - The minimum dimensions at which your layout will change,
+/// adapting to different screen sizes, for use in media queries
+$screen-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px
+) !default;
+
+
 // App Structure
 // --------------------------------------------------
 
@@ -293,77 +324,128 @@ ion-footer {
 // Text Alignment
 // --------------------------------------------------
 
-[text-left] {
-  text-align: left;
-}
-
-[text-center] {
-  text-align: center;
-}
-
-[text-right] {
-  text-align: right;
-}
-
-[text-start] {
-  text-align: start;
-}
-
-[text-end] {
-  text-align: end;
-}
-
-[text-justify] {
-  text-align: justify;
-}
-
-[text-nowrap] {
-  white-space: nowrap;
-}
-
-[text-wrap] {
-  white-space: normal;
+@if ($include-text-alignment-utilities == true) {
+  // Creates text alignment attributes 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 `[text-{bp}]` attributes for aligning the text based
+      // on the breakpoint
+      [text#{$infix}-center] {
+        // scss-lint:disable ImportantRule
+        text-align: center !important;
+      }
+
+      [text#{$infix}-justify] {
+        // scss-lint:disable ImportantRule
+        text-align: justify !important;
+      }
+
+      [text#{$infix}-start] {
+        // scss-lint:disable ImportantRule
+        text-align: start !important;
+      }
+
+      [text#{$infix}-end] {
+        // scss-lint:disable ImportantRule
+        text-align: end !important;
+      }
+
+      [text#{$infix}-left] {
+        // scss-lint:disable ImportantRule
+        text-align: left !important;
+      }
+
+      [text#{$infix}-right] {
+        // scss-lint:disable ImportantRule
+        text-align: right !important;
+      }
+
+      [text#{$infix}-nowrap] {
+        // scss-lint:disable ImportantRule
+        white-space: nowrap !important;
+      }
+
+      [text#{$infix}-wrap] {
+        // scss-lint:disable ImportantRule
+        white-space: normal !important;
+      }
+    }
+  }
 }
 
 
 // Text Transformation
 // --------------------------------------------------
 
-[text-uppercase] {
-  text-transform: uppercase;
-}
-
-[text-lowercase] {
-  text-transform: lowercase;
+@if ($include-text-transform-utilities == true) {
+  // Creates text transform attributes 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 `[text-{bp}]` attributes for transforming the text based
+      // on the breakpoint
+      [text#{$infix}-uppercase] {
+        // scss-lint:disable ImportantRule
+        text-transform: uppercase !important;
+      }
+
+      [text#{$infix}-lowercase] {
+        // scss-lint:disable ImportantRule
+        text-transform: lowercase !important;
+      }
+
+      [text#{$infix}-capitalize] {
+        // scss-lint:disable ImportantRule
+        text-transform: capitalize !important;
+      }
+    }
+  }
 }
 
-[text-capitalize] {
-  text-transform: capitalize;
-}
 
-// Float
+// Float Elements
 // --------------------------------------------------
 
-[pull-left] {
-  float: left;
-}
-
-[pull-right] {
-  float: right;
-}
-
-[pull-start] {
-  float: left;
-}
-
-[pull-end] {
-  float: right;
-}
-
-[dir="rtl"] [pull-start] {
-  float: right;
-}
-
-[dir="rtl"] [pull-end] {
-  float: left;
+@if ($include-float-element-utilities == true) {
+  // Creates text transform attributes 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 `[pull-{bp}]` attributes for floating the element based
+      // on the breakpoint
+      [pull#{$infix}-left] {
+        // scss-lint:disable ImportantRule
+        float: left !important;
+      }
+
+      [pull#{$infix}-right] {
+        // scss-lint:disable ImportantRule
+        float: right !important;
+      }
+
+      [pull#{$infix}-start] {
+        // scss-lint:disable ImportantRule
+        float: left !important;
+      }
+
+      [pull#{$infix}-end] {
+        // scss-lint:disable ImportantRule
+        float: right !important;
+      }
+
+      [dir="rtl"] [pull#{$infix}-start] {
+        // scss-lint:disable ImportantRule
+        float: right !important;
+      }
+
+      [dir="rtl"] [pull#{$infix}-end] {
+        // scss-lint:disable ImportantRule
+        float: left !important;
+      }
+    }
+  }
 }

src/components/app/test/utilities/app/app.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+import { RootPage } from '../pages/root-page/root-page';
+
+@Component({
+  template: `<ion-nav [root]="root"></ion-nav>`
+})
+export class AppComponent {
+  root = RootPage;
+}

src/components/app/test/utilities/app/app.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../..';
+
+import { AppComponent } from './app.component';
+import { RootPage } from '../pages/root-page/root-page';
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    RootPage
+  ],
+  entryComponents: [
+    RootPage
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent, { statusbarPadding: true })
+  ],
+  bootstrap: [IonicApp],
+})
+export class AppModule {}

src/components/app/test/utilities/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);