|
47 | 47 |
|
48 | 48 | // Flex column reordering |
49 | 49 |
|
50 | | - .col-xs-first { order: -1; } |
51 | | - .col-xs-last { order: 1; } |
52 | | - |
53 | | - @include media-breakpoint-up(sm) { |
54 | | - .col-sm-first { order: -1; } |
55 | | - .col-sm-last { order: 1; } |
56 | | - } |
57 | | - @include media-breakpoint-up(md) { |
58 | | - .col-md-first { order: -1; } |
59 | | - .col-md-last { order: 1; } |
60 | | - } |
61 | | - @include media-breakpoint-up(lg) { |
62 | | - .col-lg-first { order: -1; } |
63 | | - .col-lg-last { order: 1; } |
64 | | - } |
65 | | - @include media-breakpoint-up(xl) { |
66 | | - .col-xl-first { order: -1; } |
67 | | - .col-xl-last { order: 1; } |
| 50 | + @each $breakpoint in map-keys($grid-breakpoints) { |
| 51 | + @include media-breakpoint-up($breakpoint) { |
| 52 | + .col-#{$breakpoint}-first { order: -1; } |
| 53 | + .col-#{$breakpoint}-last { order: 1; } |
| 54 | + } |
68 | 55 | } |
69 | 56 |
|
70 | 57 | // Alignment for every column in row |
71 | 58 |
|
72 | | - .row-xs-top { align-items: flex-start; } |
73 | | - .row-xs-center { align-items: center; } |
74 | | - .row-xs-bottom { align-items: flex-end; } |
75 | | - |
76 | | - @include media-breakpoint-up(sm) { |
77 | | - .row-sm-top { align-items: flex-start; } |
78 | | - .row-sm-center { align-items: center; } |
79 | | - .row-sm-bottom { align-items: flex-end; } |
80 | | - } |
81 | | - @include media-breakpoint-up(md) { |
82 | | - .row-md-top { align-items: flex-start; } |
83 | | - .row-md-center { align-items: center; } |
84 | | - .row-md-bottom { align-items: flex-end; } |
85 | | - } |
86 | | - @include media-breakpoint-up(lg) { |
87 | | - .row-lg-top { align-items: flex-start; } |
88 | | - .row-lg-center { align-items: center; } |
89 | | - .row-lg-bottom { align-items: flex-end; } |
90 | | - } |
91 | | - @include media-breakpoint-up(xl) { |
92 | | - .row-xl-top { align-items: flex-start; } |
93 | | - .row-xl-center { align-items: center; } |
94 | | - .row-xl-bottom { align-items: flex-end; } |
| 59 | + @each $breakpoint in map-keys($grid-breakpoints) { |
| 60 | + @include media-breakpoint-up($breakpoint) { |
| 61 | + .row-#{$breakpoint}-top { align-items: flex-start; } |
| 62 | + .row-#{$breakpoint}-center { align-items: center; } |
| 63 | + .row-#{$breakpoint}-bottom { align-items: flex-end; } |
| 64 | + } |
95 | 65 | } |
96 | 66 |
|
97 | 67 | // Alignment per column |
98 | 68 |
|
99 | | - .col-xs-top { align-self: flex-start; } |
100 | | - .col-xs-center { align-self: center; } |
101 | | - .col-xs-bottom { align-self: flex-end; } |
102 | | - |
103 | | - @include media-breakpoint-up(sm) { |
104 | | - .col-sm-top { align-self: flex-start; } |
105 | | - .col-sm-center { align-self: center; } |
106 | | - .col-sm-bottom { align-self: flex-end; } |
107 | | - } |
108 | | - @include media-breakpoint-up(md) { |
109 | | - .col-md-top { align-self: flex-start; } |
110 | | - .col-md-center { align-self: center; } |
111 | | - .col-md-bottom { align-self: flex-end; } |
112 | | - } |
113 | | - @include media-breakpoint-up(lg) { |
114 | | - .col-lg-top { align-self: flex-start; } |
115 | | - .col-lg-center { align-self: center; } |
116 | | - .col-lg-bottom { align-self: flex-end; } |
117 | | - } |
118 | | - @include media-breakpoint-up(xl) { |
119 | | - .col-xl-top { align-self: flex-start; } |
120 | | - .col-xl-center { align-self: center; } |
121 | | - .col-xl-bottom { align-self: flex-end; } |
| 69 | + @each $breakpoint in map-keys($grid-breakpoints) { |
| 70 | + @include media-breakpoint-up($breakpoint) { |
| 71 | + .col-#{$breakpoint}-top { align-self: flex-start; } |
| 72 | + .col-#{$breakpoint}-center { align-self: center; } |
| 73 | + .col-#{$breakpoint}-bottom { align-self: flex-end; } |
| 74 | + } |
122 | 75 | } |
123 | 76 |
|
124 | 77 | } |
0 commit comments