Skip to content

Commit cf24057

Browse files
brandyscarneybrandyscarney
authored
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
1 parent f9012e1 commit cf24057

File tree

8 files changed

+416
-111
lines changed

8 files changed

+416
-111
lines changed

‎src/components/app/app.scss

Lines changed: 144 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
// Globals
33
// --------------------------------------------------
44
@import "../../themes/ionic.globals";
5+
@import "../../themes/ionic.mixins";
56

67

78
// Normalize
@@ -49,6 +50,36 @@ $h5-font-size: 1.8rem !default;
4950
$h6-font-size: 1.6rem !default;
5051

5152

53+
// Responsive Utilities
54+
// --------------------------------------------------
55+
56+
/// @prop - Whether to include all of the responsive utility attributes
57+
$include-responsive-utilities: true !default;
58+
59+
/// @prop - Whether to include all of the responsive text alignment attributes
60+
$include-text-alignment-utilities: $include-responsive-utilities !default;
61+
62+
/// @prop - Whether to include all of the responsive text transform attributes
63+
$include-text-transform-utilities: $include-responsive-utilities !default;
64+
65+
/// @prop - Whether to include all of the responsive float attributes
66+
$include-float-element-utilities: $include-responsive-utilities !default;
67+
68+
69+
// Screen Breakpoints
70+
// --------------------------------------------------
71+
72+
/// @prop - The minimum dimensions at which your layout will change,
73+
/// adapting to different screen sizes, for use in media queries
74+
$screen-breakpoints: (
75+
xs: 0,
76+
sm: 576px,
77+
md: 768px,
78+
lg: 992px,
79+
xl: 1200px
80+
) !default;
81+
82+
5283
// App Structure
5384
// --------------------------------------------------
5485

@@ -293,77 +324,128 @@ ion-footer {
293324
// Text Alignment
294325
// --------------------------------------------------
295326

296-
[text-left] {
297-
text-align: left;
298-
}
299-
300-
[text-center] {
301-
text-align: center;
302-
}
303-
304-
[text-right] {
305-
text-align: right;
306-
}
307-
308-
[text-start] {
309-
text-align: start;
310-
}
311-
312-
[text-end] {
313-
text-align: end;
314-
}
315-
316-
[text-justify] {
317-
text-align: justify;
318-
}
319-
320-
[text-nowrap] {
321-
white-space: nowrap;
322-
}
323-
324-
[text-wrap] {
325-
white-space: normal;
327+
@if ($include-text-alignment-utilities == true) {
328+
// Creates text alignment attributes based on screen size
329+
@each $breakpoint in map-keys($screen-breakpoints) {
330+
$infix: breakpoint-infix($breakpoint, $screen-breakpoints);
331+
332+
@include media-breakpoint-up($breakpoint, $screen-breakpoints) {
333+
// Provide `[text-{bp}]` attributes for aligning the text based
334+
// on the breakpoint
335+
[text#{$infix}-center] {
336+
// scss-lint:disable ImportantRule
337+
text-align: center !important;
338+
}
339+
340+
[text#{$infix}-justify] {
341+
// scss-lint:disable ImportantRule
342+
text-align: justify !important;
343+
}
344+
345+
[text#{$infix}-start] {
346+
// scss-lint:disable ImportantRule
347+
text-align: start !important;
348+
}
349+
350+
[text#{$infix}-end] {
351+
// scss-lint:disable ImportantRule
352+
text-align: end !important;
353+
}
354+
355+
[text#{$infix}-left] {
356+
// scss-lint:disable ImportantRule
357+
text-align: left !important;
358+
}
359+
360+
[text#{$infix}-right] {
361+
// scss-lint:disable ImportantRule
362+
text-align: right !important;
363+
}
364+
365+
[text#{$infix}-nowrap] {
366+
// scss-lint:disable ImportantRule
367+
white-space: nowrap !important;
368+
}
369+
370+
[text#{$infix}-wrap] {
371+
// scss-lint:disable ImportantRule
372+
white-space: normal !important;
373+
}
374+
}
375+
}
326376
}
327377

328378

329379
// Text Transformation
330380
// --------------------------------------------------
331381

332-
[text-uppercase] {
333-
text-transform: uppercase;
334-
}
335-
336-
[text-lowercase] {
337-
text-transform: lowercase;
382+
@if ($include-text-transform-utilities == true) {
383+
// Creates text transform attributes based on screen size
384+
@each $breakpoint in map-keys($screen-breakpoints) {
385+
$infix: breakpoint-infix($breakpoint, $screen-breakpoints);
386+
387+
@include media-breakpoint-up($breakpoint, $screen-breakpoints) {
388+
// Provide `[text-{bp}]` attributes for transforming the text based
389+
// on the breakpoint
390+
[text#{$infix}-uppercase] {
391+
// scss-lint:disable ImportantRule
392+
text-transform: uppercase !important;
393+
}
394+
395+
[text#{$infix}-lowercase] {
396+
// scss-lint:disable ImportantRule
397+
text-transform: lowercase !important;
398+
}
399+
400+
[text#{$infix}-capitalize] {
401+
// scss-lint:disable ImportantRule
402+
text-transform: capitalize !important;
403+
}
404+
}
405+
}
338406
}
339407

340-
[text-capitalize] {
341-
text-transform: capitalize;
342-
}
343408

344-
// Float
409+
// Float Elements
345410
// --------------------------------------------------
346411

347-
[pull-left] {
348-
float: left;
349-
}
350-
351-
[pull-right] {
352-
float: right;
353-
}
354-
355-
[pull-start] {
356-
float: left;
357-
}
358-
359-
[pull-end] {
360-
float: right;
361-
}
362-
363-
[dir="rtl"] [pull-start] {
364-
float: right;
365-
}
366-
367-
[dir="rtl"] [pull-end] {
368-
float: left;
412+
@if ($include-float-element-utilities == true) {
413+
// Creates text transform attributes based on screen size
414+
@each $breakpoint in map-keys($screen-breakpoints) {
415+
$infix: breakpoint-infix($breakpoint, $screen-breakpoints);
416+
417+
@include media-breakpoint-up($breakpoint, $screen-breakpoints) {
418+
// Provide `[pull-{bp}]` attributes for floating the element based
419+
// on the breakpoint
420+
[pull#{$infix}-left] {
421+
// scss-lint:disable ImportantRule
422+
float: left !important;
423+
}
424+
425+
[pull#{$infix}-right] {
426+
// scss-lint:disable ImportantRule
427+
float: right !important;
428+
}
429+
430+
[pull#{$infix}-start] {
431+
// scss-lint:disable ImportantRule
432+
float: left !important;
433+
}
434+
435+
[pull#{$infix}-end] {
436+
// scss-lint:disable ImportantRule
437+
float: right !important;
438+
}
439+
440+
[dir="rtl"] [pull#{$infix}-start] {
441+
// scss-lint:disable ImportantRule
442+
float: right !important;
443+
}
444+
445+
[dir="rtl"] [pull#{$infix}-end] {
446+
// scss-lint:disable ImportantRule
447+
float: left !important;
448+
}
449+
}
450+
}
369451
}

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { Component } from '@angular/core';
2+
3+
import { RootPage } from '../pages/root-page/root-page';
4+
5+
@Component({
6+
template: `<ion-nav [root]="root"></ion-nav>`
7+
})
8+
export class AppComponent {
9+
root = RootPage;
10+
}

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { NgModule } from '@angular/core';
2+
import { BrowserModule } from '@angular/platform-browser';
3+
import { IonicApp, IonicModule } from '../../../../..';
4+
5+
import { AppComponent } from './app.component';
6+
import { RootPage } from '../pages/root-page/root-page';
7+
8+
@NgModule({
9+
declarations: [
10+
AppComponent,
11+
RootPage
12+
],
13+
entryComponents: [
14+
RootPage
15+
],
16+
imports: [
17+
BrowserModule,
18+
IonicModule.forRoot(AppComponent, { statusbarPadding: true })
19+
],
20+
bootstrap: [IonicApp],
21+
})
22+
export class AppModule {}

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
2+
3+
import { AppModule } from './app.module';
4+
5+
platformBrowserDynamic().bootstrapModule(AppModule);

0 commit comments

Comments
 (0)