283 lines
5.9 KiB
SCSS
283 lines
5.9 KiB
SCSS
// Responsive attributes
|
|
// ------------------------------
|
|
|
|
// hide means hide everywhere
|
|
/* Sizes:
|
|
0 <= size <= 600 Phone
|
|
600 <= size <= 960 Tablet
|
|
960 <= size <= 1200 Tablet-Landscape
|
|
1200 <= size PC
|
|
*/
|
|
|
|
[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; }
|