adding #7
parent
fe0a3ef49c
commit
54c28c85ca
File diff suppressed because it is too large
Load Diff
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"],{
|
(self.webpackChunk_tiny_components_plain_ui=self.webpackChunk_tiny_components_plain_ui||[]).push([[355],{256:()=>{}}]);
|
||||||
|
|
||||||
/***/ "?4e0c":
|
|
||||||
/*!******************************!*\
|
|
||||||
!*** spritemap-dummy-module ***!
|
|
||||||
\******************************/
|
|
||||||
/***/ (() => {
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/***/ })
|
|
||||||
|
|
||||||
}]);
|
|
||||||
|
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 };
|
||||||
|
}
|
||||||
@ -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;
|
|
||||||
}
|
|
||||||
@ -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) {
|
||||||
|
$max: breakpoint-max($name, $breakpoints);
|
||||||
|
|
||||||
|
@if $max {
|
||||||
|
@media (max-width: $max) {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@else {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Media between the breakpoint's minimum and maximum widths.
|
||||||
|
* No minimum for the smallest breakpoint, and no maximum for the largest one.
|
||||||
|
* Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
@mixin media-breakpoint-only($name, $breakpoints: $grid__breakpoints) {
|
||||||
|
@include media-breakpoint-up($name, $breakpoints) {
|
||||||
|
@include media-breakpoint-down($name, $breakpoints) {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin box-sizing($boxmodel) {
|
||||||
|
-webkit-box-sizing: $boxmodel;
|
||||||
|
-moz-box-sizing: $boxmodel;
|
||||||
|
box-sizing: $boxmodel;
|
||||||
|
}
|
||||||
Loading…
Reference in new issue