release/0.5
HerrHase 9 months ago
parent fe0a3ef49c
commit 54c28c85ca
  1. 9569
      package-lock.json
  2. 17
      package.json
  3. 16390
      public/plain-ui.css
  4. 14
      public/spritemap.js
  5. 2
      public/symbol-defs.svg
  6. 211
      src/includes/_grid.scss
  7. 71
      src/includes/_variables.scss
  8. 24
      src/scss/_mixins.scss
  9. 62
      src/scss/_variables.scss
  10. 2
      src/scss/components/_table.scss
  11. 14
      src/scss/core/_container.scss
  12. 2
      src/scss/core/_heading.scss
  13. 6
      src/scss/helpers/_sizing.scss
  14. 1
      src/scss/helpers/_typography.scss
  15. 3
      src/scss/layouts/_flex.scss
  16. 220
      src/scss/layouts/_grid.scss
  17. 215
      src/scss/layouts/grid/_helpers.scss
  18. 357
      src/scss/layouts/grid/_mixins.scss
  19. 4
      src/scss/plain-ui.scss
  20. 18
      webpack.mix.js
  21. 5458
      yarn.lock

9569
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -9,17 +9,16 @@
"author": "Björn Hase",
"license": "MIT",
"devDependencies": {
"laravel-mix": "^6.0.16",
"laravel-mix": "^6.0.43",
"laravel-mix-purgecss": "^6.0.0",
"postcss-css-variables": "^0.17.0",
"resolve-url-loader": "^3.1.2",
"sass": "^1.32.8",
"sass-loader": "^11.0.1",
"svg-spritemap-webpack-plugin": "^3.9.1",
"svgo": "^1.3.2"
"postcss-css-variables": "^0.18.0",
"resolve-url-loader": "^5.0.0",
"sass": "^1.49.9",
"sass-loader": "^12.6.0",
"svg-spritemap-webpack-plugin": "^4.4.0",
"svgo": "^2.8.0"
},
"dependencies": {
"normalize.css": "^8.0.1",
"reflex-grid": "^2.0.7"
"normalize.css": "^8.0.1"
}
}

File diff suppressed because one or more lines are too long

@ -1,13 +1 @@
(self["webpackChunk_tiny_components_plain_ui"] = self["webpackChunk_tiny_components_plain_ui"] || []).push([["spritemap"],{
/***/ "?4e0c":
/*!******************************!*\
!*** spritemap-dummy-module ***!
\******************************/
/***/ (() => {
/***/ })
}]);
(self.webpackChunk_tiny_components_plain_ui=self.webpackChunk_tiny_components_plain_ui||[]).push([[355],{256:()=>{}}]);

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 66 KiB

After

Width:  |  Height:  |  Size: 74 KiB

@ -0,0 +1,211 @@
// --------------------------------------------------
// reflex containers
// --------------------------------------------------
.#{$reflex-prefix}container,
.#{$reflex-prefix}container-full {
@include box-sizing(border-box);
width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: ($reflex-grid-spacing * 2);
padding-left: ($reflex-grid-spacing * 2);
.#{$reflex-prefix}grid {
margin-right: -$reflex-grid-spacing;
margin-left: -$reflex-grid-spacing;
}
}
.#{$reflex-prefix}container {
@media (min-width: $reflex-xs) {
max-width: $reflex-xs;
}
@media (min-width: $reflex-sm) {
max-width: $reflex-sm;
}
@media (min-width: $reflex-md) {
max-width: $reflex-md;
}
@media (min-width: $reflex-lg) {
max-width: $reflex-lg;
}
@media (min-width: $reflex-xlg) {
max-width: $reflex-xlg;
}
}
// --------------------------------------------------
// reflex grid
// --------------------------------------------------
.#{$reflex-prefix}grid {
@include box-sizing(border-box);
display: block;
@include display-flex();
@include flex-wrap();
padding: 0;
margin: 0 auto;
position: relative;
@include setup-whitespace();
&::before,
&::after {
@include box-sizing(border-box);
@include reset-whitespace();
}
// handle when lists are used as a grid
list-style-type: none;
}
// --------------------------------------------------
// reflex col defaults
// --------------------------------------------------
[class*="#{$reflex-prefix}col-"] {
@include box-sizing(border-box);
@include reset-whitespace();
position: relative;
width: 100%;
vertical-align: top;
padding: $reflex-grid-spacing;
&::before,
&::after {
@include box-sizing(border-box);
@include reset-whitespace();
}
// handle grids nested in columns
.#{$reflex-prefix}grid {
@include flex(1, 1, auto);
margin: -$reflex-grid-spacing;
}
@if $legacy-support == true {
display: inline-block;
*display: inline;
zoom: 1;
}
}
// --------------------------------------------------
// reflex grid generation
// --------------------------------------------------
@include make-reflex-grid(col-);
@media (min-width: $reflex-xs) {
@include make-reflex-grid(col-xs-);
}
@media (min-width: $reflex-sm) {
@include make-reflex-grid(col-sm-);
}
@media (min-width: $reflex-md) {
@include make-reflex-grid(col-md-);
}
@media (min-width: $reflex-lg) {
@include make-reflex-grid(col-lg-);
}
@media (min-width: $reflex-xlg) {
@include make-reflex-grid(col-xlg-);
}
// --------------------------------------------------
// reflex col-auto
// --------------------------------------------------
.#{$reflex-prefix}col-auto {
@include setup-auto-cols();
}
@media (min-width: $reflex-xs) {
.#{$reflex-prefix}col-xs-auto {
@include setup-auto-cols();
}
}
@media (min-width: $reflex-sm) {
.#{$reflex-prefix}col-sm-auto {
@include setup-auto-cols();
}
}
@media (min-width: $reflex-md) {
.#{$reflex-prefix}col-md-auto {
@include setup-auto-cols();
}
}
@media (min-width: $reflex-lg) {
.#{$reflex-prefix}col-lg-auto {
@include setup-auto-cols();
}
}
@media (min-width: $reflex-xlg) {
.#{$reflex-prefix}col-xlg-auto {
@include setup-auto-cols();
}
}
// --------------------------------------------------
// reflex order helpers generation
// --------------------------------------------------
@include make-order-helpers();
@media (min-width: $reflex-xs) {
@include loop-order-helpers($reflex-columns, '-xs');
}
@media (min-width: $reflex-sm) {
@include loop-order-helpers($reflex-columns, '-sm');
}
@media (min-width: $reflex-md) {
@include loop-order-helpers($reflex-columns, '-md');
}
@media (min-width: $reflex-lg) {
@include loop-order-helpers($reflex-columns, '-lg');
}
@media (min-width: $reflex-xlg) {
@include loop-order-helpers($reflex-columns, '-xlg');
}
// --------------------------------------------------
// reflex offset helpers generation
// --------------------------------------------------
@include make-offset-helpers();
@media (min-width: $reflex-xs) {
@include loop-offset-helpers($reflex-columns - 1, '-xs');
}
@media (min-width: $reflex-sm) {
@include loop-offset-helpers($reflex-columns - 1, '-sm');
}
@media (min-width: $reflex-md) {
@include loop-offset-helpers($reflex-columns - 1, '-md');
}
@media (min-width: $reflex-lg) {
@include loop-offset-helpers($reflex-columns - 1, '-lg');
}
@media (min-width: $reflex-xlg) {
@include loop-offset-helpers($reflex-columns - 1, '-xlg');
}

@ -0,0 +1,71 @@
// --------------------------------------------------
// reflex variables
// --------------------------------------------------
// Prefix
// -------------------------
// You can optionally namespace reflex classes to avoid clashing with other css frameworks
// e.g. setting $reflex-prefix as "reflex-" here would cause col-sm-6 to become reflex-col-sm-6
// Example: $reflex-prefix: reflex-;
// By default this is an empty string
$reflex-prefix: null !default;
// Legacy support
// -------------------------
// Reflex adds a lot of css propertie to support older browsers that don't support flexbox layout.
// If you prefer to use this as a purely flexbox grid without legacy support then set this to false
$legacy-support: true !default;
// Responsive visibility helpers
// -------------------------
// Reflex has some generic visibility classes to hide elements at different breakpoints.
// If you want to disable these then set this to false
$visibility-helpers: true !default;
// Grid
// -------------------------
$reflex-columns: 12 !default; // number of columns
// Breakpoints
// -------------------------
$reflex-xs: 576px !default;
$reflex-sm: 768px !default;
$reflex-md: 992px !default;
$reflex-lg: 1200px !default;
$reflex-xlg: 1600px !default;
$reflex-xxs-max: ($reflex-xs - 1);
$reflex-xs-max: ($reflex-sm - 1);
$reflex-sm-max: ($reflex-md - 1);
$reflex-md-max: ($reflex-lg - 1);
$reflex-lg-max: ($reflex-xlg - 1);
$reflex-breakpoints: (
xxs: 0px,
xs: $reflex-xs,
sm: $reflex-sm,
md: $reflex-md,
lg: $reflex-lg,
xlg: $reflex-xlg
);
// Spacing
// -------------------------
$reflex-grid-spacing: 15px !default;
// Custom properties so others can reference the variables.
:root {
--reflex-columns: #{ $reflex-columns };
--reflex-grid-spacing: #{ $reflex-grid-spacing };
--reflex-xs: #{ $reflex-xs };
--reflex-sm: #{ $reflex-sm };
--reflex-md: #{ $reflex-md };
--reflex-lg: #{ $reflex-lg };
--reflex-xlg: #{ $reflex-xlg };
--reflex-xxs-max: #{ $reflex-xxs-max };
--reflex-xs-max: #{ $reflex-xs-max };
--reflex-sm-max: #{ $reflex-sm-max };
--reflex-md-max: #{ $reflex-md-max };
--reflex-lg-max: #{ $reflex-lg-max };
}

@ -56,73 +56,73 @@
*/
@mixin media-xs() {
@media only screen and (min-width: $breakpoint__xs) {
@media only screen and (min-width: $grid__xs) {
@content;
}
}
@mixin media-sm() {
@media only screen and (min-width: $breakpoint__sm) {
@media only screen and (min-width: $grid__sm) {
@content;
}
}
@mixin media-md() {
@media only screen and (min-width: $breakpoint__md) {
@media only screen and (min-width: $grid__md) {
@content;
}
}
@mixin media-lg() {
@media only screen and (min-width: $breakpoint__lg) {
@media only screen and (min-width: $grid__lg) {
@content;
}
}
@mixin media-xlg() {
@media only screen and (min-width: $breakpoint__xlg) {
@media only screen and (min-width: $grid__xlg) {
@content;
}
}
@mixin media-xxs-only() {
@media only screen and (max-width: $breakpoint__xs) {
@media only screen and (max-width: $grid__xs) {
@content;
}
}
@mixin media-xxs-only() {
@media only screen and (max-width: $breakpoint__xs - 1) {
@media only screen and (max-width: $grid__xs - 1) {
@content;
}
}
@mixin media-xs-only() {
@media only screen and (min-width: $breakpoint__xs) and (max-width: $breakpoint__sm - 1) {
@media only screen and (min-width: $grid__xs) and (max-width: $grid__sm - 1) {
@content;
}
}
@mixin media-sm-only() {
@media only screen and (min-width: $breakpoint__sm) and (max-width: $breakpoint__md - 1) {
@media only screen and (min-width: $grid__sm) and (max-width: $grid__md - 1) {
@content;
}
}
@mixin media-md-only() {
@media only screen and (min-width: $breakpoint__md) and (max-width: $breakpoint__lg - 1) {
@media only screen and (min-width: $grid__md) and (max-width: $grid__lg - 1) {
@content;
}
}
@mixin media-lg-only() {
@media only screen and (min-width: $breakpoint__lg) and (max-width: $breakpoint__xlg - 1) {
@media only screen and (min-width: $grid__lg) and (max-width: $grid__xlg - 1) {
@content;
}
}
@mixin media-xlg-only() {
@media only screen and (min-width: $breakpoint__xlg) {
@media only screen and (min-width: $grid__xlg) {
@content;
}
}

@ -10,16 +10,52 @@
*/
/**
* breakpoints
*
*/
$breakpoint__xs : 576px !default;
$breakpoint__sm : 768px !default;
$breakpoint__md : 992px !default;
$breakpoint__lg : 1200px !default;
$breakpoint__xlg: 1600px !default;
/**
* grid
*
*/
$grid__columns: 12 !default; // number of columns
$grid__xs: 576px !default;
$grid__sm: 768px !default;
$grid__md: 992px !default;
$grid__lg: 1200px !default;
$grid__xlg: 1600px !default;
$grid__xxs-max: ($grid__xs - 1);
$grid__xs-max: ($grid__sm - 1);
$grid__sm-max: ($grid__md - 1);
$grid__md-max: ($grid__lg - 1);
$grid__lg-max: ($grid__xlg - 1);
$grid__breakpoints: (
xxs: 0px,
xs: $grid__xs,
sm: $grid__sm,
md: $grid__md,
lg: $grid__lg,
xlg: $grid__xlg
);
$grid__spacing: 15px !default;
// Custom properties so others can reference the variables.
:root {
--grid-columns: #{ $grid__columns };
--grid-grid-spacing: #{ $grid__spacing };
--grid-xs: #{ $grid__xs };
--grid-sm: #{ $grid__sm };
--grid-md: #{ $grid__md };
--grid-lg: #{ $grid__lg };
--grid-xlg: #{ $grid__xlg };
--grid-xxs-max: #{ $grid__xxs-max };
--grid-xs-max: #{ $grid__xs-max };
--grid-sm-max: #{ $grid__sm-max };
--grid-md-max: #{ $grid__md-max };
--grid-lg-max: #{ $grid__lg-max };
}
/**
@ -34,7 +70,7 @@ $font-weight: normal !default;
$font-size: 0.9rem !default;
$font-size-breakpoints: (
$breakpoint__md: 1rem
$grid__md: 1rem
) !default;
$font-sizes: (
@ -47,7 +83,7 @@ $font-sizes: (
$line-height: 1.618;
$line-height__breakpoints: (
$breakpoint__md: 1.8
$grid__md: 1.8
) !default;
@ -122,7 +158,7 @@ $colors: (
$margin: 0 0 1rem !default;
$margin-breakpoints: (
$breakpoint__md: 0 0 1.2rem
$grid__md: 0 0 1.2rem
) !default;
@ -133,7 +169,7 @@ $margin-breakpoints: (
$padding: 0.6rem 0.8rem !default;
$padding-breakpoints: (
$breakpoint__md: 0.7rem 1rem 0.9rem
$grid__md: 0.7rem 1rem 0.9rem
) !default;

@ -7,7 +7,7 @@
*/
$table__padding-breakpoints: (
$breakpoint__md: 0.5em 1.25em
$grid__md: 0.5em 1.25em
) !default;
$table__striped-background-color: lighten($color__primary, 65%) !default;

@ -1,14 +0,0 @@
/**
* Container
*
*
* @author Björn Hase, Tentakelfabrik
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://github.com/tentakelfabrik/crispy-css
*
*/
.container--app {
max-width: 100%;
padding: 15px 30px;
}

@ -31,7 +31,7 @@ $heading__font-sizes: (
) !default;
$heading__font-sizes-breakpoints: (
$breakpoint__md: (
$grid__md: (
'h1': 2.75rem,
'h2': 2.5rem,
'h3': 2rem,

@ -72,14 +72,14 @@ $sizing_steps: 99 !default;
.h-auto { height: auto; }
@include sizing_breakpoints('h', 'height', 'auto', auto);
@for $i from 1 through $reflex-columns
@for $i from 1 through $grid__columns
{
$value: percentage(($i / $reflex-columns));
$value: percentage(($i / $grid__columns));
@include sizing('w-col', 'width', $i, $value);
@include sizing_breakpoints('w-col', 'width', $i, $value);
$value: percentage(($i / $reflex-columns));
$value: percentage(($i / $grid__columns));
@include sizing('h-col', 'height', $i, $value);
@include sizing_breakpoints('h-col', 'height', $i, $value);

@ -4,7 +4,6 @@
*
*/
@mixin media-add-typography($class) {
.#{$class} {
@content;

@ -1,3 +0,0 @@
@import 'reflex-grid';
$legacy-support: false;

@ -0,0 +1,220 @@
@import
'grid/mixins',
'grid/helpers';
.container,
.container-full {
@include box-sizing(border-box);
width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: ($grid__spacing * 2);
padding-left: ($grid__spacing * 2);
.grid {
margin-right: -$grid__spacing;
margin-left: -$grid__spacing;
}
}
.container {
@media (min-width: $grid__xs) {
max-width: $grid__xs;
}
@media (min-width: $grid__sm) {
max-width: $grid__sm;
}
@media (min-width: $grid__md) {
max-width: $grid__md;
}
@media (min-width: $grid__lg) {
max-width: $grid__lg;
}
@media (min-width: $grid__xlg) {
max-width: $grid__xlg;
}
}
.grid {
display: block;
@include box-sizing(border-box);
@include display-flex();
@include flex-wrap();
padding: 0;
margin: 0 auto;
position: relative;
&::after,
&::before {
@include box-sizing(border-box);
}
// handle when lists are used as a grid
list-style-type: none;
}
.col-grid {
@include box-sizing(border-box);
position: relative;
width: 100%;
vertical-align: top;
padding: $grid__spacing;
&::after,
&::before {
@include box-sizing(border-box);
}
// handle grids nested in columns
.grid {
@include flex(1, 1, auto);
margin: -$grid__spacing;
}
}
@for $i from 1 through $grid__columns {
.col-#{$i} {
@extend .col-grid;
}
}
/**
* grid generation
*
*
*/
@include grid-make(col-);
@media (min-width: $grid__xs) {
@include grid-make(col-xs-);
}
@media (min-width: $grid__sm) {
@include grid-make(col-sm-);
}
@media (min-width: $grid__md) {
@include grid-make(col-md-);
}
@media (min-width: $grid__lg) {
@include grid-make(col-lg-);
}
@media (min-width: $grid__xlg) {
@include grid-make(col-xlg-);
}
/**
* col-auto
*
*
*/
.col-auto {
@extend .col-grid;
@include grid-setup-auto-cols();
}
.col-xs-auto, .col-sm-auto, .col-lg-auto, .col-xlg-auto {
@extend .col-grid;
}
@media (min-width: $grid__xs) {
.col-xs-auto {
@include grid-setup-auto-cols();
}
}
@media (min-width: $grid__sm) {
.col-sm-auto {
@include grid-setup-auto-cols();
}
}
@media (min-width: $grid__md) {
.col-md-auto {
@include grid-setup-auto-cols();
}
}
@media (min-width: $grid__lg) {
.col-lg-auto {
@include grid-setup-auto-cols();
}
}
@media (min-width: $grid__xlg) {
.col-xlg-auto {
@include grid-setup-auto-cols();
}
}
/**
* order helpers generation
*
*
*/
@include grid-make-order-helpers();
@media (min-width: $grid__xs) {
@include grid-loop-order-helpers($grid__columns, '-xs');
}
@media (min-width: $grid__sm) {
@include grid-loop-order-helpers($grid__columns, '-sm');
}
@media (min-width: $grid__md) {
@include grid-loop-order-helpers($grid__columns, '-md');
}
@media (min-width: $grid__lg) {
@include grid-loop-order-helpers($grid__columns, '-lg');
}
@media (min-width: $grid__xlg) {
@include grid-loop-order-helpers($grid__columns, '-xlg');
}
/**
* offset helpers generation
*
*
*/
@include grid-make-offset-helpers();
@media (min-width: $grid__xs) {
@include grid-loop-offset-helpers($grid__columns - 1, '-xs');
}
@media (min-width: $grid__sm) {
@include grid-loop-offset-helpers($grid__columns - 1, '-sm');
}
@media (min-width: $grid__md) {
@include grid-loop-offset-helpers($grid__columns - 1, '-md');
}
@media (min-width: $grid__lg) {
@include grid-loop-offset-helpers($grid__columns - 1, '-lg');
}
@media (min-width: $grid__xlg) {
@include grid-loop-offset-helpers($grid__columns - 1, '-xlg');
}

@ -0,0 +1,215 @@
// --------------------------------------------------
// grid modifiers
// --------------------------------------------------
// --------------------------------------------------
// flex-wrap
// --------------------------------------------------
.wrap {
@include flex-wrap(wrap);
}
.no-wrap {
@include flex-wrap(nowrap);
// This is mostly needed to stop the grid contents overflowing in the
// ie10 implementation of flexbox but it can't hurt in other browsers
// as it is the desired behaviour of non wrapping flex items
[class*="col-"] {
@include flex-shrink(1);
}
}
.wrap-reverse {
@include flex-wrap(wrap-reverse);
}
// --------------------------------------------------
// flex-direction
// --------------------------------------------------
.direction-row {
@include flex-direction(row);
}
.direction-row-reverse {
@include flex-direction(row-reverse);
}
.direction-column {
@include flex-direction(column);
}
.direction-column-reverse {
@include flex-direction(column-reverse);
}
// --------------------------------------------------
// align items (cross axis)
// --------------------------------------------------
.align-start {
@include align-items(flex-start);
}
.align-end {
@include align-items(flex-end);
}
.align-center {
@include align-items(center);
}
.align-baseline {
@include align-items(baseline);
}
// --------------------------------------------------
// align content (cross axis)
// --------------------------------------------------
.align-content-start {
@include align-content(flex-start);
}
.align-content-end {
@include align-content(flex-end);
// fallback to legacy vertical-align
[class*="col-"] {
vertical-align: bottom;
}
}
.align-content-center {
@include align-content(center);
}
.align-content-space-between {
@include align-content(space-between);
}
.align-content-space-around {
@include align-content(space-around);
}
// --------------------------------------------------
// align-self
// --------------------------------------------------
.align-self-stretch {
@include align-self(stretch);
}
.align-self-start {
@include align-self(flex-start);
}
.align-self-end {
@include align-self(flex-end);
vertical-align: bottom;
}
.align-self-center {
@include align-self(center);
vertical-align: middle;
}
.align-self-baseline {
@include align-self(baseline);
vertical-align: baseline;
}
// --------------------------------------------------
// justify-content (main axis)
// --------------------------------------------------
.justify-start {
@include justify-content-start();
}
.justify-end {
@include justify-content-end();
}
.justify-center {
@include justify-content-center();
}
.justify-space-between {
@include justify-content-space-between();
}
.justify-space-around {
@include justify-content-space-around();
}
// --------------------------------------------------
// cosmetic grid modifiers
// --------------------------------------------------
// Removes internal padding from all columns in a grid
.grid-bleed {
[class*="col-"] {
padding: 0;
}
}
// --------------------------------------------------
// col modifiers
// --------------------------------------------------
// Makes a column element into a flexbox column
.col-grid {
@include display-flex();
@include flex-direction(column);
&.direction-row {
@include flex-direction(row);
}
}
// Removes internal padding from all columns in a grid
.col-bleed {
padding: 0;
}
// Removes horizontal padding from all columns in a grid
.col-bleed-x {
padding: $grid__spacing 0;
}
// Removes vertical padding from all columns in a grid
.col-bleed-y {
padding: 0 $grid__spacing;
}
// --------------------------------------------------
// col-grid contents
// --------------------------------------------------
.flex-img {
display: block;
@include flex(0, 0, auto);
max-width: 100%;
height: auto;
width: 100%;
}
.flex-footer {
width: 100%;
margin-top: auto;
margin-bottom: 0;
> :last-child {
margin-bottom: 0;
}
}
// --------------------------------------------------
// Responsive visibility modifiers
// --------------------------------------------------
@include grid-responsive-visibility-helpers();

@ -0,0 +1,357 @@
/**
* mixin
*
*
*
*/
@mixin grid-make($class) {
@include grid-loop-columns($grid__columns, $class, width);
}
@mixin grid-calc-columns($index, $class, $type) {
@if $type == width and $index > 0 {
.#{$class}#{$index} {
width: percentage(($index / $grid__columns));
}
}
}
@mixin grid-loop-columns($index, $class, $type) {
@if $index >= 0 {
@include grid-calc-columns($index, $class, $type);
// next iteration
@include grid-loop-columns(($index - 1), $class, $type);
}
}
// defaults for auto cols
@mixin grid-setup-auto-cols() {
@include flex(1, 0, 0px); // a unit on last value is required by IE10-11
}
@mixin grid-reset-text-align() {
//
// We want to reset any text-align properties set by the grid
// (required for the inline-block fallback)
// but we don't want to override any text-align properties
// set on the individual col-x element
// or on any of it's child elements
//
// 1) set to left by default (works everywhere)
// 2) set to start (respects right to left text)
//
//
text-align: left;
text-align: start;
-moz-text-align-last: left;
-moz-text-align-last: start;
text-align-last: left;
text-align-last: start;
}
/**
* order class generation mixins
*
*/
@mixin order($order: 0) {
-webkit-order: $order;
order: $order;
}
@mixin grid-make-order-helpers() {
@include grid-loop-order-helpers($grid__columns);
}
@mixin grid-loop-order-helpers($index, $breakpoint: null) {
@if $index >= 0 {
.order#{$breakpoint}-#{$index} {
@include order($index);
}
// next iteration
@include grid-loop-order-helpers(($index - 1), $breakpoint);
}
}
/**
* offset class generation mixins
*
*/
@mixin grid-offset($index: 0) {
$offset: ($index / $grid__columns);
// convert to percentage only if not zero
@if $offset != 0 {
$offset: percentage($offset);
}
margin-left: $offset;
}
@mixin grid-make-offset-helpers() {
@include grid-loop-offset-helpers($grid__columns - 1);
}
@mixin grid-loop-offset-helpers($index, $breakpoint: null) {
@if $index > 0 and $breakpoint == null {
.offset#{$breakpoint}-#{$index} {
@include grid-offset($index);
}
// next iteration
@include grid-loop-offset-helpers(($index - 1), $breakpoint);
} @else if $index >= 0 and $breakpoint != null {
.offset#{$breakpoint}-#{$index} {
@include grid-offset($index);
}
// next iteration
@include grid-loop-offset-helpers(($index - 1), $breakpoint);
}
}
/**
* modifier mixins
*
*/
@mixin display-flex() {
display: -webkit-flex;
display: flex;
}
@mixin flex($grow: 0, $shrink: 1, $basis: auto) {
-webkit-flex: $grow $shrink $basis;
flex: $grow $shrink $basis;
}
@mixin flex-grow($grow:1) {
-webkit-flex-grow: $grow;
flex-grow: $grow;
}
@mixin flex-shrink($shrink:1) {
-webkit-flex-shrink: $shrink;
flex-shrink: $shrink;
}
@mixin flex-basis($basis:auto) {
-webkit-flex-basis: $basis;
flex-basis: $basis;
}
@mixin flex-flow($direction: row, $wrap: nowrap) {
-webkit-flex-flow: $direction $wrap;
flex-flow: $direction $wrap;
}
@mixin flex-wrap($wrap: wrap) {
-webkit-flex-wrap: $wrap;
flex-wrap: $wrap;
}
@mixin flex-direction($direction: row) {
-webkit-flex-direction: $direction;
flex-direction: $direction;
}
@mixin align-items($align: stretch) {
-webkit-align-items: $align;
align-items: $align;
}
@mixin align-self($align: stretch) {
-webkit-align-self: $align;
align-self: $align;
}
@mixin align-content($align: stretch) {
-webkit-align-content: $align;
align-content: $align;
}
/**
* justify-content
*
* Uses "text-align" for the fallback inline-block grid
* "text-align" is globally supported and works on all rows except the last
* "text-align-last", where supported, handles the last line (and, happily, grids with only one row)
*
*/
@mixin justify-content-start() {
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
@mixin justify-content-end() {
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
@mixin justify-content-center() {
-webkit-justify-content: center;
justify-content: center;
}
@mixin justify-content-space-between() {
-webkit-justify-content: space-between;
justify-content: space-between;
}
@mixin justify-content-space-around() {
-webkit-justify-content: space-around;
justify-content: space-around;
}
/**
* Responsible Visibility
*
*/
@mixin grid-responsive-visibility-helpers() {
// We need to handle xxs and xlg breakpoints differently
$grid__map-breakpoints: map-remove($grid__breakpoints, xxs, xlg);
.hidden-xxs {
@include media-breakpoint-only('xxs') {
display: none;
}
}
@each $bp in map-keys($grid__map-breakpoints)
{
.hidden-#{$bp}-up {
@include media-breakpoint-up($bp) {
display: none;
}
}
.hidden-#{$bp}-down {
@include media-breakpoint-down($bp) {
display: none;
}
}
.hidden-#{$bp} {
@include media-breakpoint-only($bp) {
display: none;
}
}
}
.hidden-xlg {
@include media-breakpoint-only('xlg') {
display: none;
}
}
}
/**
* Breakpoint viewport sizes and media queries
*
* Breakpoints are defined as a map of (name: minimum width), order from small to large:
* (xs: 576px, sm: 768px, md: 992px)
* The map defined in the `$reflex-breakpoints` global variable is used as the `$breakpoints` argument by default.
* Name of the next breakpoint, or null for the last breakpoint.
* >> breakpoint-next(sm) -> md
* >> breakpoint-next(sm, $breakpoints: (xs: 576px, sm: 768px, md: 992px)) -> md
* >> breakpoint-next(sm, $breakpoint-names: (xs sm md)) -> md
*
*/
@function breakpoint-next($name, $breakpoints: $grid__breakpoints, $breakpoint-names: map-keys($breakpoints)) {
$n: index($breakpoint-names, $name);
@return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
}
/**
* Minimum breakpoint width. Null for the smallest (first) breakpoint.
* breakpoint-min(sm, (xs: 576px, sm: 768px, md: 992px)) -> 768px
*
*/
@function breakpoint-min($name, $breakpoints: $grid__breakpoints) {
$min: map-get($breakpoints, $name);
@return if($min !=0, $min, null);
}
// Maximum breakpoint width. Null for the largest (last) breakpoint.
// The maximum value is calculated as the minimum of the next one less 0.1.
// >> breakpoint-max(sm, (xs: 576px, sm: 768px, md: 992px)) -> 991px
@function breakpoint-max($name, $breakpoints: $grid__breakpoints) {
$next: breakpoint-next($name, $breakpoints);
@return if($next, breakpoint-min($next, $breakpoints) - 1, null);
}
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
// Makes the @content apply to the given breakpoint and wider.
@mixin media-breakpoint-up($name, $breakpoints: $grid__breakpoints) {
$min: breakpoint-min($name, $breakpoints);
@if $min {
@media (min-width: $min) {
@content;
}
}
@else {
@content;
}
}
/**
* Media of at most the maximum breakpoint width. No query for the largest breakpoint.
* Makes the @content apply to the given breakpoint and narrower.
*
*/
@mixin media-breakpoint-down($name, $breakpoints: $grid__breakpoints) {