Add a utility to replace attributes without values by classes
iRouge
Francis Lachapelle
parent
04132023e6
commit
3054c04261
|
|
@ -1,282 +1,15 @@
|
|||
// Responsive attributes
|
||||
// Import from sources for extends
|
||||
// ------------------------------
|
||||
@import "../../angular-material/src/core/style/layout";
|
||||
|
||||
// hide means hide everywhere
|
||||
/* Sizes:
|
||||
0 <= size <= 600 Phone
|
||||
600 <= size <= 960 Tablet
|
||||
960 <= size <= 1200 Tablet-Landscape
|
||||
1200 <= size PC
|
||||
*/
|
||||
// Utility classes to compensate for the the xml mandatory attribute values
|
||||
// ------------------------------------------------------------------------
|
||||
$selectors: layout, layout-sm, layout-gt-sm, layout-md, layout-gt-md, layout-lg, layout-gt-lg,
|
||||
layout-align,layout-align-sm, layout-align-gt-sm, layout-align-md, layout-align-gt-md, layout-align-lg, layout-align-gt-lg,
|
||||
layout-padding,
|
||||
layout-margin,
|
||||
layout-wrap,
|
||||
layout-fill,
|
||||
flex, flex-sm, flex-gt-sm, flex-md, flex-gt-md, flex-lg, flex-gt-lg, hide, hide-sm, hide-gt-sm, hide-md, hide-gt-md, hide-lg, hide-gt-lg, show, show-sm, show-gt-sm, show-md, show-gt-md, show-lg, show-gt-lg;
|
||||
|
||||
[layout] {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
[layout=column] {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
[layout=row] {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
[layout-padding],
|
||||
[layout-padding] > [flex] {
|
||||
padding: $layout-gutter-width / 2;
|
||||
}
|
||||
[layout-margin],
|
||||
[layout-margin] > [flex] {
|
||||
margin: $layout-gutter-width / 2;
|
||||
}
|
||||
|
||||
[layout-wrap] {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
[layout-fill] {
|
||||
margin: 0;
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
@-moz-document url-prefix() {
|
||||
[layout-fill] {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
min-height: auto;
|
||||
height: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin layout-for-name($name) {
|
||||
[layout-#{$name}] {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
}
|
||||
[layout-#{$name}=column] {
|
||||
flex-direction: column;
|
||||
}
|
||||
[layout-#{$name}=row] {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin flex-properties-for-name($name: null) {
|
||||
$flexName: 'flex';
|
||||
@if $name != null {
|
||||
$flexName: 'flex-#{$name}';
|
||||
}
|
||||
|
||||
[#{$flexName}] {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
|
||||
// (0-20) * 5 = 0-100%
|
||||
@for $i from 0 through 20 {
|
||||
[#{$flexName}="#{$i * 5}"] {
|
||||
flex: 0 0 #{$i * 5 + '%'};
|
||||
}
|
||||
[layout="row"] > [#{$flexName}="#{$i * 5}"] {
|
||||
max-width: #{$i * 5 + '%'};
|
||||
}
|
||||
[layout="column"] > [#{$flexName}="#{$i * 5}"] {
|
||||
max-height: #{$i * 5 + '%'};
|
||||
}
|
||||
}
|
||||
|
||||
[layout="row"] {
|
||||
> [#{$flexName}="33"], > [#{$flexName}="34"] {
|
||||
flex: 0 0 33.33%;
|
||||
max-width: 33.33%;
|
||||
}
|
||||
> [#{$flexName}="66"], > [#{$flexName}="67"] {
|
||||
flex: 0 0 66.66%;
|
||||
max-width: 66.66%;
|
||||
}
|
||||
}
|
||||
[layout="column"] {
|
||||
> [#{$flexName}="33"], > [#{$flexName}="34"] {
|
||||
flex: 0 0 33.33%;
|
||||
max-height: 33.33%;
|
||||
}
|
||||
> [#{$flexName}="66"], > [#{$flexName}="67"] {
|
||||
flex: 0 0 66.66%;
|
||||
max-height: 66.66%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Alignment attributes for layout containers' children
|
||||
// Arrange on the Main Axis
|
||||
// center, start, end, space-between, space-around
|
||||
// flex-start is the default for justify-content
|
||||
// ------------------------------
|
||||
|
||||
@mixin layout-align-for-name($suffix: null) {
|
||||
$name: 'layout-align';
|
||||
@if $suffix != null {
|
||||
$name: 'layout-align-#{$suffix}';
|
||||
}
|
||||
|
||||
// Main Axis Center
|
||||
[#{$name}="center"], //stretch
|
||||
[#{$name}="center center"],
|
||||
[#{$name}="center start"],
|
||||
[#{$name}="center end"] {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
// Main Axis End
|
||||
[#{$name}="end"], //stretch
|
||||
[#{$name}="end center"],
|
||||
[#{$name}="end start"],
|
||||
[#{$name}="end end"] {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
// Main Axis Space Around
|
||||
[#{$name}="space-around"], //stretch
|
||||
[#{$name}="space-around center"],
|
||||
[#{$name}="space-around start"],
|
||||
[#{$name}="space-around end"] {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
// Main Axis Space Between
|
||||
[#{$name}="space-between"], //stretch
|
||||
[#{$name}="space-between center"],
|
||||
[#{$name}="space-between start"],
|
||||
[#{$name}="space-between end"] {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
|
||||
// Arrange on the Cross Axis
|
||||
// center, start, end
|
||||
// stretch is the default for align-items
|
||||
// ------------------------------
|
||||
|
||||
// Cross Axis Center
|
||||
[#{$name}="center center"],
|
||||
[#{$name}="start center"],
|
||||
[#{$name}="end center"],
|
||||
[#{$name}="space-between center"],
|
||||
[#{$name}="space-around center"] {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// Cross Axis Start
|
||||
[#{$name}="center start"],
|
||||
[#{$name}="start start"],
|
||||
[#{$name}="end start"],
|
||||
[#{$name}="space-between start"],
|
||||
[#{$name}="space-around start"] {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
// Cross Axis End
|
||||
[#{$name}="center end"],
|
||||
[#{$name}="start end"],
|
||||
[#{$name}="end end"],
|
||||
[#{$name}="space-between end"],
|
||||
[#{$name}="space-around end"] {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Flex attributes for layout children
|
||||
// ------------------------------
|
||||
|
||||
@include flex-properties-for-name();
|
||||
@include layout-align-for-name();
|
||||
|
||||
[hide]:not([show]) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: $layout-breakpoint-sm) {
|
||||
[hide-sm], [hide] {
|
||||
&:not([show-sm]) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include layout-align-for-name(sm);
|
||||
@include layout-for-name(sm);
|
||||
@include flex-properties-for-name(sm);
|
||||
}
|
||||
@media (min-width: $layout-breakpoint-sm) {
|
||||
[hide-gt-sm], [hide] {
|
||||
&:not([show-gt-sm]):not([show-md]):not([show-gt-md]):not([show-lg]):not([show-gt-lg]) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include layout-align-for-name(gt-sm);
|
||||
@include layout-for-name(gt-sm);
|
||||
@include flex-properties-for-name(gt-sm);
|
||||
}
|
||||
|
||||
@media (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md) {
|
||||
[hide-md], [hide] {
|
||||
&:not([show-md]) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include layout-align-for-name(md);
|
||||
@include layout-for-name(md);
|
||||
@include flex-properties-for-name(md);
|
||||
}
|
||||
@media (min-width: $layout-breakpoint-md) {
|
||||
[hide-gt-md], [hide] {
|
||||
&:not([show-gt-md]):not([show-lg]):not([show-gt-lg]) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include layout-align-for-name(gt-md);
|
||||
@include layout-for-name(gt-md);
|
||||
@include flex-properties-for-name(gt-md);
|
||||
}
|
||||
|
||||
@media (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg) {
|
||||
[hide-lg], [hide] {
|
||||
&:not([show-lg]) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include layout-align-for-name(lg);
|
||||
@include layout-for-name(lg);
|
||||
@include flex-properties-for-name(lg);
|
||||
}
|
||||
@media (min-width: $layout-breakpoint-lg) {
|
||||
[hide-gt-lg], [hide] {
|
||||
&:not([show-gt-lg]) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include layout-align-for-name(gt-lg);
|
||||
@include layout-for-name(gt-lg);
|
||||
@include flex-properties-for-name(gt-lg);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Order attributes for layout children
|
||||
// ------------------------------
|
||||
[flex-order="0"] { order: 0; }
|
||||
[flex-order="1"] { order: 1; }
|
||||
[flex-order="2"] { order: 2; }
|
||||
[flex-order="3"] { order: 3; }
|
||||
[flex-order="4"] { order: 4; }
|
||||
[flex-order="5"] { order: 5; }
|
||||
[flex-order="6"] { order: 6; }
|
||||
[flex-order="7"] { order: 7; }
|
||||
[flex-order="8"] { order: 8; }
|
||||
[flex-order="9"] { order: 9; }
|
||||
@include attributesToClasses($selectors);
|
||||
|
|
|
|||
|
|
@ -17,3 +17,14 @@
|
|||
color: $color;
|
||||
}
|
||||
}
|
||||
// Utility to compensate for the the xml mandatory attribute values
|
||||
// Creates classes extending layout attributes with no values
|
||||
// ----------------------------------------------------------------
|
||||
@mixin attributesToClasses($selectors) {
|
||||
@each $selector in $selectors {
|
||||
.md-#{$selector} {
|
||||
// no syntax error here
|
||||
@extend [#{$selector}] !optional
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue