file reordering
This commit is contained in:
Raphael Goetter
parent
e2fde95ba5
commit
5da87c3e99
6 changed files with 274 additions and 274 deletions
|
|
@ -16,6 +16,7 @@
|
|||
- Utilities (width and spacers helpers)
|
||||
- Responsive helpers
|
||||
- WordPress reset (disabled by default)
|
||||
- Grillade (Grid System)
|
||||
3- Components :
|
||||
- Media object
|
||||
- Autogrid object
|
||||
|
|
@ -28,7 +29,6 @@
|
|||
- Tags
|
||||
- Badges
|
||||
- Alerts
|
||||
- Grillade (Grid System)
|
||||
*/
|
||||
*,
|
||||
*::before,
|
||||
|
|
@ -1664,6 +1664,228 @@ ul.is-unstyled, ul.unstyled {
|
|||
}
|
||||
}
|
||||
|
||||
/* --------------------------------------- */
|
||||
/* ==Grillade : ultra light Grid System */
|
||||
/* --------------------------------------- */
|
||||
@media (min-width: 480px) {
|
||||
[class*=" grid-"],
|
||||
[class^="grid-"] {
|
||||
display: grid;
|
||||
grid-auto-flow: dense;
|
||||
}
|
||||
[class*=" grid-"].has-gutter,
|
||||
[class^="grid-"].has-gutter {
|
||||
grid-gap: 1rem;
|
||||
}
|
||||
[class*=" grid-"].has-gutter-l,
|
||||
[class^="grid-"].has-gutter-l {
|
||||
grid-gap: 2rem;
|
||||
}
|
||||
[class*=" grid-"].has-gutter-xl,
|
||||
[class^="grid-"].has-gutter-xl {
|
||||
grid-gap: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
[class*="grid-1"] {
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
}
|
||||
|
||||
[class*="grid-2"] {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
[class*="grid-3"] {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
[class*="grid-4"] {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
[class*="grid-5"] {
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
}
|
||||
|
||||
[class*="grid-6"] {
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
}
|
||||
|
||||
[class*="grid-7"] {
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
}
|
||||
|
||||
[class*="grid-8"] {
|
||||
grid-template-columns: repeat(8, 1fr);
|
||||
}
|
||||
|
||||
[class*="grid-9"] {
|
||||
grid-template-columns: repeat(9, 1fr);
|
||||
}
|
||||
|
||||
[class*="grid-10"] {
|
||||
grid-template-columns: repeat(10, 1fr);
|
||||
}
|
||||
|
||||
[class*="grid-11"] {
|
||||
grid-template-columns: repeat(11, 1fr);
|
||||
}
|
||||
|
||||
[class*="grid-12"] {
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
}
|
||||
|
||||
[class*="col-1"] {
|
||||
grid-column: auto/span 1;
|
||||
}
|
||||
|
||||
[class*="row-1"] {
|
||||
grid-row: auto/span 1;
|
||||
}
|
||||
|
||||
[class*="col-2"] {
|
||||
grid-column: auto/span 2;
|
||||
}
|
||||
|
||||
[class*="row-2"] {
|
||||
grid-row: auto/span 2;
|
||||
}
|
||||
|
||||
[class*="col-3"] {
|
||||
grid-column: auto/span 3;
|
||||
}
|
||||
|
||||
[class*="row-3"] {
|
||||
grid-row: auto/span 3;
|
||||
}
|
||||
|
||||
[class*="col-4"] {
|
||||
grid-column: auto/span 4;
|
||||
}
|
||||
|
||||
[class*="row-4"] {
|
||||
grid-row: auto/span 4;
|
||||
}
|
||||
|
||||
[class*="col-5"] {
|
||||
grid-column: auto/span 5;
|
||||
}
|
||||
|
||||
[class*="row-5"] {
|
||||
grid-row: auto/span 5;
|
||||
}
|
||||
|
||||
[class*="col-6"] {
|
||||
grid-column: auto/span 6;
|
||||
}
|
||||
|
||||
[class*="row-6"] {
|
||||
grid-row: auto/span 6;
|
||||
}
|
||||
|
||||
[class*="col-7"] {
|
||||
grid-column: auto/span 7;
|
||||
}
|
||||
|
||||
[class*="row-7"] {
|
||||
grid-row: auto/span 7;
|
||||
}
|
||||
|
||||
[class*="col-8"] {
|
||||
grid-column: auto/span 8;
|
||||
}
|
||||
|
||||
[class*="row-8"] {
|
||||
grid-row: auto/span 8;
|
||||
}
|
||||
|
||||
[class*="col-9"] {
|
||||
grid-column: auto/span 9;
|
||||
}
|
||||
|
||||
[class*="row-9"] {
|
||||
grid-row: auto/span 9;
|
||||
}
|
||||
|
||||
[class*="col-10"] {
|
||||
grid-column: auto/span 10;
|
||||
}
|
||||
|
||||
[class*="row-10"] {
|
||||
grid-row: auto/span 10;
|
||||
}
|
||||
|
||||
[class*="col-11"] {
|
||||
grid-column: auto/span 11;
|
||||
}
|
||||
|
||||
[class*="row-11"] {
|
||||
grid-row: auto/span 11;
|
||||
}
|
||||
|
||||
[class*="col-12"] {
|
||||
grid-column: auto/span 12;
|
||||
}
|
||||
|
||||
[class*="row-12"] {
|
||||
grid-row: auto/span 12;
|
||||
}
|
||||
|
||||
/* intermediate breakpoints */
|
||||
@media (min-width: 480px) and (max-width: 767px) {
|
||||
[class*="grid-"][class*="-small-1"] {
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
}
|
||||
[class*="col-"][class*="-small-1"] {
|
||||
grid-column: auto/span 1;
|
||||
}
|
||||
[class*="grid-"][class*="-small-2"] {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
[class*="col-"][class*="-small-2"] {
|
||||
grid-column: auto/span 2;
|
||||
}
|
||||
[class*="grid-"][class*="-small-3"] {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
[class*="col-"][class*="-small-3"] {
|
||||
grid-column: auto/span 3;
|
||||
}
|
||||
[class*="grid-"][class*="-small-4"] {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
[class*="col-"][class*="-small-4"] {
|
||||
grid-column: auto/span 4;
|
||||
}
|
||||
[class*="-small-all"] {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
.item-first {
|
||||
-webkit-box-ordinal-group: 0;
|
||||
-ms-flex-order: -1;
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.item-last {
|
||||
-webkit-box-ordinal-group: 2;
|
||||
-ms-flex-order: 1;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.grid-offset {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.col-all {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.row-all {
|
||||
grid-row: 1 / -1;
|
||||
}
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==Media object */
|
||||
/* ----------------------------- */
|
||||
|
|
@ -2632,225 +2854,3 @@ button:focus {
|
|||
.alert:empty, .alert--primary:empty, .alert--success:empty, .alert--info:empty, .alert--warning:empty, .alert--danger:empty, .alert--inverse:empty, .alert--ghost:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* --------------------------------------- */
|
||||
/* ==Grillade : ultra light Grid System */
|
||||
/* --------------------------------------- */
|
||||
@media (min-width: 480px) {
|
||||
[class*=" grid-"],
|
||||
[class^="grid-"] {
|
||||
display: grid;
|
||||
grid-auto-flow: dense;
|
||||
}
|
||||
[class*=" grid-"].has-gutter,
|
||||
[class^="grid-"].has-gutter {
|
||||
grid-gap: 1rem;
|
||||
}
|
||||
[class*=" grid-"].has-gutter-l,
|
||||
[class^="grid-"].has-gutter-l {
|
||||
grid-gap: 2rem;
|
||||
}
|
||||
[class*=" grid-"].has-gutter-xl,
|
||||
[class^="grid-"].has-gutter-xl {
|
||||
grid-gap: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
[class*="grid-1"] {
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
}
|
||||
|
||||
[class*="grid-2"] {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
[class*="grid-3"] {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
[class*="grid-4"] {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
[class*="grid-5"] {
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
}
|
||||
|
||||
[class*="grid-6"] {
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
}
|
||||
|
||||
[class*="grid-7"] {
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
}
|
||||
|
||||
[class*="grid-8"] {
|
||||
grid-template-columns: repeat(8, 1fr);
|
||||
}
|
||||
|
||||
[class*="grid-9"] {
|
||||
grid-template-columns: repeat(9, 1fr);
|
||||
}
|
||||
|
||||
[class*="grid-10"] {
|
||||
grid-template-columns: repeat(10, 1fr);
|
||||
}
|
||||
|
||||
[class*="grid-11"] {
|
||||
grid-template-columns: repeat(11, 1fr);
|
||||
}
|
||||
|
||||
[class*="grid-12"] {
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
}
|
||||
|
||||
[class*="col-1"] {
|
||||
grid-column: auto/span 1;
|
||||
}
|
||||
|
||||
[class*="row-1"] {
|
||||
grid-row: auto/span 1;
|
||||
}
|
||||
|
||||
[class*="col-2"] {
|
||||
grid-column: auto/span 2;
|
||||
}
|
||||
|
||||
[class*="row-2"] {
|
||||
grid-row: auto/span 2;
|
||||
}
|
||||
|
||||
[class*="col-3"] {
|
||||
grid-column: auto/span 3;
|
||||
}
|
||||
|
||||
[class*="row-3"] {
|
||||
grid-row: auto/span 3;
|
||||
}
|
||||
|
||||
[class*="col-4"] {
|
||||
grid-column: auto/span 4;
|
||||
}
|
||||
|
||||
[class*="row-4"] {
|
||||
grid-row: auto/span 4;
|
||||
}
|
||||
|
||||
[class*="col-5"] {
|
||||
grid-column: auto/span 5;
|
||||
}
|
||||
|
||||
[class*="row-5"] {
|
||||
grid-row: auto/span 5;
|
||||
}
|
||||
|
||||
[class*="col-6"] {
|
||||
grid-column: auto/span 6;
|
||||
}
|
||||
|
||||
[class*="row-6"] {
|
||||
grid-row: auto/span 6;
|
||||
}
|
||||
|
||||
[class*="col-7"] {
|
||||
grid-column: auto/span 7;
|
||||
}
|
||||
|
||||
[class*="row-7"] {
|
||||
grid-row: auto/span 7;
|
||||
}
|
||||
|
||||
[class*="col-8"] {
|
||||
grid-column: auto/span 8;
|
||||
}
|
||||
|
||||
[class*="row-8"] {
|
||||
grid-row: auto/span 8;
|
||||
}
|
||||
|
||||
[class*="col-9"] {
|
||||
grid-column: auto/span 9;
|
||||
}
|
||||
|
||||
[class*="row-9"] {
|
||||
grid-row: auto/span 9;
|
||||
}
|
||||
|
||||
[class*="col-10"] {
|
||||
grid-column: auto/span 10;
|
||||
}
|
||||
|
||||
[class*="row-10"] {
|
||||
grid-row: auto/span 10;
|
||||
}
|
||||
|
||||
[class*="col-11"] {
|
||||
grid-column: auto/span 11;
|
||||
}
|
||||
|
||||
[class*="row-11"] {
|
||||
grid-row: auto/span 11;
|
||||
}
|
||||
|
||||
[class*="col-12"] {
|
||||
grid-column: auto/span 12;
|
||||
}
|
||||
|
||||
[class*="row-12"] {
|
||||
grid-row: auto/span 12;
|
||||
}
|
||||
|
||||
/* intermediate breakpoints */
|
||||
@media (min-width: 480px) and (max-width: 767px) {
|
||||
[class*="grid-"][class*="-small-1"] {
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
}
|
||||
[class*="col-"][class*="-small-1"] {
|
||||
grid-column: auto/span 1;
|
||||
}
|
||||
[class*="grid-"][class*="-small-2"] {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
[class*="col-"][class*="-small-2"] {
|
||||
grid-column: auto/span 2;
|
||||
}
|
||||
[class*="grid-"][class*="-small-3"] {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
[class*="col-"][class*="-small-3"] {
|
||||
grid-column: auto/span 3;
|
||||
}
|
||||
[class*="grid-"][class*="-small-4"] {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
[class*="col-"][class*="-small-4"] {
|
||||
grid-column: auto/span 4;
|
||||
}
|
||||
[class*="-small-all"] {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
.item-first {
|
||||
-webkit-box-ordinal-group: 0;
|
||||
-ms-flex-order: -1;
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.item-last {
|
||||
-webkit-box-ordinal-group: 2;
|
||||
-ms-flex-order: 1;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.grid-offset {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.col-all {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.row-all {
|
||||
grid-row: 1 / -1;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,11 +1,11 @@
|
|||
// Config file and project variables
|
||||
|
||||
// ----------------
|
||||
// breakpoints zone
|
||||
// Breakpoints zone
|
||||
// ----------------
|
||||
|
||||
// warning: you should use your own values, regardless of the devices
|
||||
// best practise is Mobile First: (min-width: $breakpoint)
|
||||
// Warning: you should use your own values, regardless of the devices
|
||||
// Best practise is Mobile First: (min-width: $breakpoint)
|
||||
$tiny : 480px !default; // or 'em' if you prefer, of course
|
||||
$small : 576px !default;
|
||||
$medium : 768px !default;
|
||||
|
|
@ -13,15 +13,15 @@ $large : 992px !default;
|
|||
$extra-large : 1200px !default;
|
||||
|
||||
// ----------
|
||||
// fonts zone
|
||||
// Fonts zone
|
||||
// ----------
|
||||
|
||||
// font families
|
||||
// Font families
|
||||
$font-family-base : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !default; // system font stack
|
||||
$font-family-headings : sans-serif !default; // font for h1, h2.. h6
|
||||
$font-family-monospace : consolas, courier, monospace !default; // font for code and samples
|
||||
|
||||
// font sizes (1.6rem value is "16px" equivalent)
|
||||
// Font sizes (1.6rem value is "16px" equivalent)
|
||||
$font-size-base : 1.6rem !default;
|
||||
|
||||
$font-sizes: (
|
||||
|
|
@ -55,17 +55,17 @@ $font-sizes: (
|
|||
)
|
||||
) !default;
|
||||
|
||||
// line heights
|
||||
// Line heights
|
||||
$line-height-s : 1.3 !default;
|
||||
$line-height-base : 1.5 !default;
|
||||
$line-height-l : 1.7 !default;
|
||||
|
||||
// default margin-bottom
|
||||
// Default margin-bottom
|
||||
$margin-bottom-base : 1rem !default;
|
||||
$headings-margin-bottom : $margin-bottom-base /2 !default;
|
||||
$paragraph-margin-bottom: $margin-bottom-base !default;
|
||||
|
||||
// font weights
|
||||
// Font weights
|
||||
$weight-light : 200 !default;
|
||||
$weight-book : 300 !default;
|
||||
$weight-regular : 400 !default;
|
||||
|
|
@ -73,17 +73,17 @@ $weight-medium : 500 !default;
|
|||
$weight-bold : 700 !default;
|
||||
|
||||
// ------------
|
||||
// spacing zone
|
||||
// Spacing zone
|
||||
// ------------
|
||||
|
||||
// grid gutters (for .has-gutter-* classes)
|
||||
// Grid gutters (for .has-gutter-* classes)
|
||||
$grid-gutters: (
|
||||
'': 1rem,
|
||||
'-l': 2rem,
|
||||
'-xl': 4rem
|
||||
) !default;
|
||||
|
||||
// spacings
|
||||
// Spacings
|
||||
$spacer-tiny : .5rem !default;
|
||||
$spacer-tiny-plus : .7rem !default;
|
||||
$spacer-small : 1rem !default;
|
||||
|
|
@ -107,10 +107,10 @@ $zindex-notification : 6000 !default;
|
|||
$zindex-debug : 7000 !default;
|
||||
|
||||
// ----------
|
||||
// color zone
|
||||
// Color zone
|
||||
// ----------
|
||||
|
||||
// color names
|
||||
// Color names
|
||||
$white : #fff !default;
|
||||
$gray-100 : #f8f9fa !default;
|
||||
$gray-200 : #e7e9ed !default;
|
||||
|
|
@ -129,7 +129,7 @@ $green-500 : #5CB85C !default;
|
|||
$orange-500 : #F0AD4E !default;
|
||||
$red-500 : #D9534F !default;
|
||||
|
||||
// semantic colors
|
||||
// Semantic colors
|
||||
$color-brand : $green-500;
|
||||
$color-primary : $blue-500;
|
||||
$color-success : $green-500;
|
||||
|
|
@ -151,19 +151,19 @@ $link-decoration-hover : underline;
|
|||
$forms-color : $gray-800;
|
||||
|
||||
// ---------------
|
||||
// components zone
|
||||
// Components zone
|
||||
// ---------------
|
||||
|
||||
// global border-radius
|
||||
// Global border-radius
|
||||
$border-radius: 0 !default;
|
||||
|
||||
// component: quotes
|
||||
// Component: quotes
|
||||
$quote-color : $gray-200;
|
||||
|
||||
// component: arrows
|
||||
// Component: arrows
|
||||
$arrow-color : $black;
|
||||
|
||||
// component: checkboxes, radios, switches
|
||||
// Components: checkboxes, radios, switches
|
||||
$checkbox-color : $gray-800;
|
||||
$checkbox-size : 2rem;
|
||||
$checkbox-border-radius : 4px;
|
||||
|
|
@ -171,7 +171,7 @@ $switch-color : $gray-800;
|
|||
$switch-size : 2rem;
|
||||
$switch-border-radius : 3em;
|
||||
|
||||
// component: tables
|
||||
// Component: tables
|
||||
$table-border : $gray-500;
|
||||
$table-caption-color : $gray-800;
|
||||
$table-background : transparent;
|
||||
|
|
@ -180,8 +180,8 @@ $table-head-background : transparent;
|
|||
$table-footer-color : $color-base;
|
||||
$table-footer-background : transparent;
|
||||
|
||||
// component: buttons, badges, alerts color variants list
|
||||
// name - background-color - color - border
|
||||
// Components: buttons, badges, alerts color variants list
|
||||
// Convention is: name - background-color - color - border
|
||||
$variants-list: (
|
||||
(primary, $color-primary, $white, none),
|
||||
(success, $color-success, $white, none),
|
||||
|
|
@ -192,7 +192,7 @@ $variants-list: (
|
|||
(ghost, $color-ghost, $white, 0 0 0 1px $white inset)
|
||||
) !default;
|
||||
|
||||
// component: tabs
|
||||
// Component: tabs
|
||||
$tabs-border : $gray-200;
|
||||
$tabs-active-border : $gray-800;
|
||||
$tabs-color : $color-base;
|
||||
|
|
@ -201,7 +201,7 @@ $tabs-background : transparent;
|
|||
$tabs-active-background : transparent;
|
||||
$tabs-border-radius : 0;
|
||||
|
||||
// component: nav burger button
|
||||
// Component: nav burger button
|
||||
$burger-color : $gray-800;
|
||||
$burger-background : transparent;
|
||||
$burger-hover-background : transparent;
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@
|
|||
- Utilities (width and spacers helpers)
|
||||
- Responsive helpers
|
||||
- WordPress reset (disabled by default)
|
||||
- Grillade (Grid System)
|
||||
3- Components :
|
||||
- Media object
|
||||
- Autogrid object
|
||||
|
|
@ -29,7 +30,6 @@
|
|||
- Tags
|
||||
- Badges
|
||||
- Alerts
|
||||
- Grillade (Grid System)
|
||||
*/
|
||||
|
||||
@import "_vendor/_reboot"; // Bootstrap reboot (basic reset)
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
|
||||
@import "_config/_mixins.scss";
|
||||
|
||||
// Libraries
|
||||
// Core Libraries
|
||||
@import "_library/_base.scss"; // basic styles
|
||||
@import "_library/_print.scss"; // print quick reset
|
||||
@import "_library/_misc.scss"; // skip links, hyphens
|
||||
|
|
@ -49,6 +49,10 @@
|
|||
@import "_library/_responsive.scss"; // Responsive Web Design helpers
|
||||
// @import "_library/_wordpress.scss"; // WordPress reset and basic styles
|
||||
|
||||
// New Grid System by default (Grid Layout). If you prefer old "Flexbox" Grid System, replace file with "_library/grillade-flex.scss"
|
||||
// Note that none of these file is prefixed by an underscore, in order to compile them.
|
||||
@import "_library/grillade-grid.scss"; // grid system with Grid Layout
|
||||
|
||||
// Components
|
||||
@import "components/_media.scss"; // media object
|
||||
@import "components/_autogrid.scss"; // media autogrid
|
||||
|
|
@ -62,7 +66,3 @@
|
|||
@import "components/tags.scss"; // tags styles
|
||||
@import "components/_badges.scss"; // badges styles
|
||||
@import "components/_alerts.scss"; // alerts styles
|
||||
|
||||
// New Grid System by default (Grid Layout). If you prefer old "Flexbox" Grid System, replace file with "components/grillade-flex.scss"
|
||||
// Note that none of these file is prefixed by an underscore, in order to compile them.
|
||||
@import "components/grillade-grid.scss"; // grid system with Grid Layout
|
||||
|
|
|
|||
Loading…
Reference in a new issue