Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-08-26 01:23:49 +00:00
Code Issues Actions Projects Releases Wiki Activity

add sass/scratch.scss and associated sass files

Browse Source
This commit is contained in:
Tchama
2018-12-18 17:46:30 +01:00
parent e31560f622
commit 472eda01e4
123 changed files with 8932 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
Resources/public/sass/contrib/gridle/_grid-settings.scss Normal file
View File

@@ -0,0 +1,23 @@
// Import gridle :
@import 'gridle/gridle';
// setup the grid (required) :
@include gridle_setup((
context : 12,
gutter-width : 20px,
debug : true
));
// register special columns :
@include gridle_register_column("1on5", 1, 5);
// clear each classes :
@include gridle_register_clear_each(2, left);
@include gridle_register_clear_each(12, both);
// register states :
@include gridle_register_default_states();
@include gridle_register_state(ipad-landscape, (
query : "only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)",
gutter-width : 0
));

48
Resources/public/sass/contrib/gridle/grid-bootstrap.scss Normal file
View File

@@ -0,0 +1,48 @@
// Import gridle :
@import 'gridle/gridle';
// basic configuration :
@include gridle_setup( (
context : 12,
gutter-width : 30px,
html-states-classes : true
) );
// register states :
@include gridle_register_default_mobile_first_states();
/*
* Optional :
* Change generation class names pattern (for example to match bootstrap naming conventions or generate with your own names) :
* Check documentation (http://gridle.org/documentation#name-pattern) for full list
*
* %- = separator sign (configurable by $gridle-class-separator) (no need to add separators if you doesn't want them)
* %state = the state name (mobile, ipad, etc...)
* %count = the column count (1, 2, 3, 4, etc...)
*/
$gridle-grid-name-pattern : ('col','%-','%state','%-','%count');
$gridle-parent-name-pattern : ('row','%-','%state');
$gridle-prefix-name-pattern : ('col','%-','%state','%-','offset','%-','%count');
$gridle-push-name-pattern : ('col','%-','%state','%-','push','%-','%count');
$gridle-pull-name-pattern : ('col','%-','%state','%-','pull','%-','%count');
$gridle-show-name-pattern : ('visible','%-','%state');
$gridle-hide-name-pattern : ('hidden','%-','%state');
/**
* Mobile first approach :
*/
[class*="col-"] {
width:100%; // 100% by default
}
// Generate classes :
@include gridle_generate_classes();
// Max size :
.container {
margin:0 auto;
max-width:1200px;
}

24
Resources/public/sass/contrib/gridle/grid.scss Normal file
View File

@@ -0,0 +1,24 @@
// Import grid settings :
@import 'grid-settings';
// Generate classes :
@include gridle_generate_classes();
// you can generate classes separately if you need :
// @include gridle_generate_classes(default); // default is the base state always registered
// @include gridle_generate_classes(mobile, (grid, push, pull)) // generate only the grid, push and pull classes for mobile
// etc...
// generate a center custom class for all the states :
@include gridle_generate_custom_class( ('center','%-','%state') ) {
text-align:center;
}
// this will produces classes : center, center-mobile, center-tablet, center-ipad-landscape
// for separators, you can use the %- (replaced by the $gridle-class-separator option), or -, --, _, __
// Max size :
.container {
margin:0 auto;
max-width:960px;
@include gridle_grid_background();
}

124
Resources/public/sass/contrib/gridle/gridle/_common-mixins.scss Normal file
View File

@@ -0,0 +1,124 @@
// |------------------------------------------------------
// |------------------------------------------------------
// | Common mixins
// |------------------------------------------------------
// |------------------------------------------------------
@mixin _gridle_container_common(
$state : default
) {
@extend %gridle-simple-clearfix;
@extend %gridle-container-common;
// debug part
$debug : _gridle_get_var_value(debug, $state);
@if ($debug == true) {
#{$gridle-debug-selector} {
@extend %gridle-container-debug-common;
}
}
}
$_gridle-already-generated : ();
@mixin _gridle_grid_common() {
@extend %gridle-grid-common;
// default values
$default-gutter-width : _gridle_get_var_value(gutter-width, default);
$default-direction : _gridle_get_var_value(direction, default);
// loop on each states :
@each $stateName, $state in $_gridle-states
{
// selector key to be used in map
$key : "#{$stateName} #{&}";
// check if already generated classes
$already-generated : map-has-key($_gridle-already-generated, $key);
// vars
$direction : _gridle_get_var_value(direction, $state);
$classes : _gridle_get_var_value(classes, $state);
$gutter-width : _gridle_get_var_value(gutter-width, $state);
$debug : _gridle_get_var_value(debug, $state);
@if $already-generated != true and $classes and ( ($default-direction != $direction or $default-gutter-width != $gutter-width) or $stateName == default)
{
// set that we have already generated css for this selector
$_gridle-already-generated : map-set($_gridle-already-generated, $key, true) !global;
// generate the css for this element
@include gridle_state($state) {
@if $direction != $default-direction or $stateName == default {
// content : "#{$key}";
@if $direction == rtl {
float:right;
direction:rtl;
} @else {
float:left;
direction:ltr;
}
}
@if $gutter-width != $default-gutter-width or $stateName == default {
padding-left:$gutter-width/2;
padding-right:$gutter-width/2;
}
}
@if $debug == true {
#{$gridle-debug-selector} {
@extend %gridle-grid-debug-common;
}
}
}
}
}
@mixin _gridle_parent_common() {
@extend %gridle-clearfix;
@extend %gridle-parent-common;
}
@mixin _gridle_push_common(
$state : default
) {
$debug : _gridle_get_var_value(debug, $state);
// extend common :
@extend %gridle-push-pull-common;
@if $debug == true {
#{$gridle-debug-selector} {
@extend %gridle-push-pull-debug-background-common;
background-color:#f4efdf !important;
}
}
}
@mixin _gridle_pull_common(
$state : default
) {
$debug : _gridle_get_var_value(debug, $state);
@extend %gridle-push-pull-common;
@if $debug == true {
#{$gridle-debug-selector} {
@extend %gridle-push-pull-debug-background-common;
background-color:#cfe4d5 !important;
}
}
}
@mixin _gridle_prefix_common(
$state : default
) {
$debug : _gridle_get_var_value(debug, $state);
@if $debug == true {
#{$gridle-debug-selector} {
@extend %gridle-prefix-debug-common;
}
}
}
@mixin _gridle_suffix_common(
$state : default
) {
$debug : _gridle_get_var_value(debug, $state);
@if $debug == true {
#{$gridle-debug-selector} {
@extend %gridle-suffix-debug-common;
}
}
}

35
Resources/public/sass/contrib/gridle/gridle/_default-states.scss Normal file
View File

@@ -0,0 +1,35 @@
// |------------------------------------------------------
// |------------------------------------------------------
// | Default states
// |------------------------------------------------------
// |------------------------------------------------------
// retina
@include gridle_register_state("retina", (
query : "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)",
classes : false
) );
// tv
@include gridle_register_state("tv", (
query : "only tv",
classes : false
) );
// print
@include gridle_register_state("print", (
query : "only print",
classes : false
) );
// portrait
@include gridle_register_state("portrait", (
query : "only screen and (orientation: portrait)",
classes : false
) );
// landscape
@include gridle_register_state("landscape", (
query : "only screen and (orientation: landscape)",
classes : false
) );

387
Resources/public/sass/contrib/gridle/gridle/_functions.scss Normal file
View File

@@ -0,0 +1,387 @@
// |------------------------------------------------------
// |------------------------------------------------------
// | Functions
// |------------------------------------------------------
// |------------------------------------------------------
/**
* Str replace
*
* @param {string} $string String that you want to replace
* @param {string} $substr String that is to be replaced by `$newsubstr`
* @param {string} $newsubstr String that replaces `$substr`
* @param {number*} $all Flag for replaceing all (1+) or not (0)
* @return {string}
*/
@function str-replace($string, $substr, $newsubstr, $all: 0) {
$position-found: str-index($string, $substr);
$processed: ();
@while ($position-found and $position-found > 0) {
$length-substr: str-length($substr);
$processed: append($processed, str-slice($string, 0, $position-found - 1));
$processed: append($processed, $newsubstr);
$string: str-slice($string, $position-found + $length-substr);
$position-found: 0;
@if ($all > 0) {
$position-found: str-index($string, $substr);
}
}
$processed: append($processed, $string);
$string: "";
@each $s in $processed {
$string: #{$string}#{$s};
}
@return $string;
}
/**
* Map set
*
* @param Map $map The map to use
* @param String $key The key to update
* @param Mixed $value The new value
* @return Map The new map
*/
@function map-set($map, $key, $value) {
$new: ($key: $value);
@return map-merge($map, $new);
}
/**
* Get the column width in percent for the global or a specific context
*
* @param int $columns The number of columns to calculate
* @param int $context : $gridle-columns-count The context to use
* @return percentage The width in percent
*/
@function gridle_get_column_width(
$columns : 1,
$stateMap-or-stateName : null
) {
@return percentage(1 / $context * $columns);
}
/**
* Get a state map
*
* @param string $name The name of the state to get
* @return map A state map object
*/
@function _gridle_get_state(
$stateMap-or-stateName
) {
// check if has a state named like this
@if (type-of($stateMap-or-stateName) == string
and map-has-key($_gridle_states, unquote("#{$stateMap-or-stateName}")))
{
@return map-get($_gridle_states, unquote("#{$stateMap-or-stateName}"));
}
// a map is passed, so it's a state himself
@if $stateMap-or-stateName
and type-of($stateMap-or-stateName) == map
{
@return map-merge($_gridle-settings, $stateMap-or-stateName);
}
// return the default one if exist
@if map-has-key($_gridle_states, default)
{
@return map-get($_gridle_states, default);
}
// nothing finded, return the default state
@return $_gridle-settings;
}
/**
* Check if a state exist :
*
* @param string $name The name of the state to check
* @return Boolean true is exist
*/
@function _gridle_has_state(
$stateName
) {
@if map-has-key($_gridle_states, unquote("#{$stateName}")) {
@return true;
} @else {
@return false;
}
}
/**
* Get the media queries variables :
*
* @param int $index The media query indes
* @param String $var The media query variable name
* @return String|int The variable value
*/
@function _gridle_get_state_var(
$stateName,
$var : "name"
) {
// get the state :
$state : _gridle_get_state($stateName);
// check ig state and if has the variable :
@if $state
and map-has-key($state,unquote("#{$var}"))
{
@return map-get($state,unquote("#{$var}"));
}
// nothing getted :
@return null;
}
/**
* Get a variable
*
* @param String $varName The variable name
* @param String $stateMap-or-stateName The state name or a map state value
* @return Mixed The finded value
*/
@function _gridle_get_var_value(
$varName,
$stateMap-or-stateName : null
) {
// if is a state :
$state : null;
// get the state (if no state find, return the default one) :
$state : _gridle_get_state($stateMap-or-stateName);
// extend default state with given state :
$props : map-merge($_gridle-settings, $state);
@if map-has-key($props, unquote("#{$varName}")) {
@return map-get($state, unquote("#{$varName}"));
}
// nothing finded :
@return null;
}
/**
* Set a variable in a state
* @param Mixed $stateName-or-stateIndex The state name of state index
* @param String $var Variable name to assign
* @param Mixed $newValue The new value to assign
* @return List The states list (full)
*/
@function _gridle_set_state_var(
$stateName,
$var,
$newValue
) {
// get the state :
$state : _gridle_get_state($stateName);
// check ig state and if has the variable :
@if $state
and map-has-key($state,unquote("#{$var}"))
{
// set new value in state :
$state : map-set($state, unquote("#{$var}"), $newValue);
// set states :
$_gridle_states : map-set($_gridle_states, unquote("#{$stateName}"), $state);
// return new state :
@return $state;
}
// nothing getted :
@return null;
}
/**
* Generate a column
*
* @param String $name The column name (often count)
* @param int $columns The column count that the column will take
* @param int $context The context on witch the with will be calculed
* @param Boolean $generateClasses Set if the column has to be generated in css
*/
@function _gridle_create_column(
$name,
$columns,
$context,
$name-multiplicator : 1 // used to extend the state on custom registered columns
) {
@return (
name : $name,
columns : $columns,
context : $context,
name-multiplicator : $name-multiplicator
);
}
/**
* Generate classname
*
* @param List $parrern The pattern to use to generate classname
* @param String $state The state
* @param int $count The column count
*/
@function _gridle_classname(
$pattern,
$state : null,
$count : null
) {
// init selector :
$sel : ".";
// delete default :
@if unquote("#{$state}") == default {
$state : null;
}
// add class prefix :
@if $gridle-class-prefix and $gridle-class-prefix != '' {
$sel : "#{$sel}#{$gridle-class-prefix}";
@if $gridle-class-separator {
$sel : "#{$sel}#{$gridle-class-separator}";
}
}
// construct class name :
$i : 1;
@each $var in $pattern {
// replace tokens :
@if $var == '%state' and $state {
$sel : "#{$sel}#{$state}";
}
@if $var == '%count' and $count {
$sel : "#{$sel}#{$count}";
}
@if $var != '%state' and $var != '%count' and $var != '%-' and $var != '-' and $var != '--' and $var != '_' and $var != '__' and $var != '%prefix' {
$sel : "#{$sel}#{$var}";
}
// handle separators :
@if ($var == '%-' or $var == '-' or $var == '--' or $var == '_' or $var == '__') and $i < length($pattern) {
$index : $i + 1;
$value : nth($pattern, $index);
@if $value != '%state' and $value != '%count' and $value != '%-' and $value != '-' and $value != '--' and $value != '_' and $value != '__' and $value != '%prefix' {
@if $var == '%-' {
$sel : "#{$sel}#{$gridle-class-separator}";
} @else {
$sel : "#{$sel}#{$var}";
}
}
@if $value == '%state' and $state {
@if $var == '%-' {
$sel : "#{$sel}#{$gridle-class-separator}";
} @else {
$sel : "#{$sel}#{$var}";
}
}
@if $value == '%count' and $count {
@if $var == '%-' {
$sel : "#{$sel}#{$gridle-class-separator}";
} @else {
$sel : "#{$sel}#{$var}";
}
}
}
// update i :
$i : $i + 1;
}
// return generated class :
@return $sel;
}
/**
* Get the media query for a particular state, or with, etc...
*
* @param Mixed $state-or-min-width The state name of the min with
* @param Mixed $max-width The max width if first param is a min width
* @return String The media query string without the @media
*/
@function _gridle_get_media_query(
$state-or-settings
) {
// check if is a string :
$state : null;
@if type-of($state-or-settings) == string
{
$state : _gridle_get_state($state-or-settings);
}
@else if $state-or-settings == null
{
$state : $_gridle-settings;
}
@else
{
$state : map-merge($_gridle-settings, $state-or-settings);
}
// if it's some settings or a state :
@if $state {
// get vars :
$name : map-get($state, name);
$min-width : map-get($state, min-width);
$max-width : map-get($state, max-width);
$query : map-get($state, query);
// direct query :
@if $query
{
@return $query;
}
@else if $min-width and $max-width
{
@return "screen and (min-width: #{$min-width}) and (max-width: #{$max-width})";
}
@else if $min-width
{
@return "screen and (min-width: #{$min-width})";
}
@else if $max-width
{
@return "screen and (max-width: #{$max-width})";
}
@else
{
@return null;
}
}
@else
{
@return null;
}
}
/**
* Get states count
*
* @return int The number of states defined
*/
@function _gridle_get_states_count() {
@return length($_gridle_states) / length($_gridle_states_vars_pattern);
}

624
Resources/public/sass/contrib/gridle/gridle/_generate-mixins.scss Normal file
View File

@@ -0,0 +1,624 @@
// |------------------------------------------------------
// |------------------------------------------------------
// | Generate mixins
// |------------------------------------------------------
// |------------------------------------------------------
/**
* Generate a custom class for all the states
*
* @param list $pattern The name pattern of the class
* @param list $statesNames The states names to generate
*/
@mixin gridle_generate_custom_class(
$pattern,
$statesNames : null
) {
// manage states to generate :
$states : ();
@if $statesNames == null {
// loop on each states to generate names list :
@each $stateName, $state in $_gridle_states {
$states : append($states, $stateName);
}
} @else {
$states : $statesNames;
}
// loop on each states :
@each $stateName in $states
{
// manage statename :
@if type-of($stateName) != string {
$stateName : map-get($stateName, name);
}
// classes :
$classes : _gridle_get_var_value(classes, $stateName);
// genrate the classname :
@if $classes
{
@include gridle_state($stateName, false) {
#{_gridle_classname($pattern, $stateName)} {
@content;
}
}
}
}
}
// Generate all helpers classes
// All the classes generated are not wrapper in gridle_state
// in this mixin... Just the names are generated accordingly to the
// requested state
@mixin _gridle_generate_helper_classes (
$state : null,
$what : null
) {
// helpers :
@if $what == null or index($what, float) or index($what, helpers) {
#{_gridle_classname($gridle-float-left-name-pattern, $state)} {
@include gridle_float(left);
}
#{_gridle_classname($gridle-float-right-name-pattern, $state)} {
@include gridle_float(right);
}
}
@if $what == null or index($what, clear) or index($what, helpers) {
#{_gridle_classname($gridle-clear-name-pattern, $state)} {
@include gridle_clear(both);
}
#{_gridle_classname($gridle-clear-left-name-pattern, $state)} {
@include gridle_clear(left);
}
#{_gridle_classname($gridle-clear-right-name-pattern, $state)} {
@include gridle_clear(right);
}
}
@if $what == null or index($what, no_gutter) or index($what, no_margin) or index($what, helpers) {
#{_gridle_classname($gridle-no-gutter-name-pattern, $state)},
#{_gridle_classname($gridle-no-margin-name-pattern, $state)} {
@include gridle_no_margin();
}
#{_gridle_classname($gridle-no-gutter-left-name-pattern, $state)},
#{_gridle_classname($gridle-no-margin-left-name-pattern, $state)} {
@include gridle_no_margin(left);
}
#{_gridle_classname($gridle-no-gutter-right-name-pattern, $state)},
#{_gridle_classname($gridle-no-margin-right-name-pattern, $state)} {
@include gridle_no_margin(right);
}
#{_gridle_classname($gridle-no-gutter-top-name-pattern, $state)},
#{_gridle_classname($gridle-no-margin-top-name-pattern, $state)} {
@include gridle_no_margin(top);
}
#{_gridle_classname($gridle-no-gutter-bottom-name-pattern, $state)},
#{_gridle_classname($gridle-no-margin-bottom-name-pattern, $state)} {
@include gridle_no_margin(bottom);
}
}
@if $what == null or index($what, gutter) or index($what, margin) or index($what, helpers) {
#{_gridle_classname($gridle-gutter-name-pattern, $state)},
#{_gridle_classname($gridle-margin-name-pattern, $state)} {
@include gridle_margin(left right);
}
#{_gridle_classname($gridle-gutter-left-name-pattern, $state)},
#{_gridle_classname($gridle-margin-left-name-pattern, $state)} {
@include gridle_margin(left);
}
#{_gridle_classname($gridle-gutter-right-name-pattern, $state)},
#{_gridle_classname($gridle-margin-right-name-pattern, $state)} {
@include gridle_margin(right);
}
#{_gridle_classname($gridle-gutter-top-name-pattern, $state)},
#{_gridle_classname($gridle-margin-top-name-pattern, $state)} {
@include gridle_margin(top);
}
#{_gridle_classname($gridle-gutter-bottom-name-pattern, $state)},
#{_gridle_classname($gridle-margin-bottom-name-pattern, $state)} {
@include gridle_margin(bottom);
}
}
@if $what == null or index($what, auto_height) or index($what, helpers) {
#{_gridle_classname($gridle-auto-height-name-pattern, $state)} {
height:inherit;
}
}
@if $what == null or index($what, centered) or index($what, helpers) {
#{_gridle_classname($gridle-centered-name-pattern, $state)} {
@include gridle_centered(null);
}
}
@if $what == null or index($what, parent) or index($what, helpers) {
#{_gridle_classname($gridle-parent-name-pattern, $state)} {
@include _gridle_parent();
}
}
@if $what == null or index($what, vertical_align) or index($what, helpers) {
#{_gridle_classname($gridle-vertical-align-middle-name-pattern, $state)} {
@include _gridle_vertical_align();
}
#{_gridle_classname($gridle-vertical-align-top-name-pattern, $state)} {
@include _gridle_vertical_align(top);
}
#{_gridle_classname($gridle-vertical-align-bottom-name-pattern, $state)} {
@include _gridle_vertical_align(bottom);
}
}
/**
* Visible, hide, etc...
*/
@if $what == null or index($what, hide) or index($what, helpers) {
#{_gridle_classname($gridle-hide-name-pattern, $state)} {
@include gridle_hide(null);
}
}
@if $what == null or index($what, not_visible) or index($what, helpers) {
#{_gridle_classname($gridle-not-visible-name-pattern, $state)} {
@include gridle_not_visible(null);
}
}
@if $what == null or index($what, show) or index($what, helpers) {
#{_gridle_classname($gridle-show-name-pattern, $state)} {
@include gridle_show(null);
}
#{_gridle_classname($gridle-show-inline-name-pattern, $state)} {
@include gridle_show_inline(null);
}
}
@if $what == null or index($what, visible) or index($what, helpers) {
#{_gridle_classname($gridle-visible-name-pattern, $state)} {
@include gridle_visible(null);
}
}
/**
* Clear each class :
*/
@if $what == null or index($what, clear_each) or index($what, helpers) {
@each $clearName, $clearMap in $_gridle_clear_classes {
// get count :
$clearCount : map-get($clearMap, clearEach);
// what to clear :
$clearWhat : map-get($clearMap, clearWhat);
// generate the class :
#{_gridle_classname($gridle-clear-each-pattern, $state, $clearCount)} {
@include _gridle_clear_each($clearCount, $clearWhat);
}
}
}
// debug colors :
$debug : _gridle_get_var_value(debug, $state);
@if $debug and ( $what == null or index($what, debug_colors) or index($what, helpers) ) {
// debug color classes :
#{_gridle_classname($gridle-debug-color-name-pattern, $state, 1)} {
#{$gridle-debug-selector} {
background-color : #edeeb2;
}
}
#{_gridle_classname($gridle-debug-color-name-pattern, $state, 2)} {
#{$gridle-debug-selector} {
background-color : #fae4a7;
}
}
#{_gridle_classname($gridle-debug-color-name-pattern, $state, 3)} {
#{$gridle-debug-selector} {
background-color : #f5eacc;
}
}
#{_gridle_classname($gridle-debug-color-name-pattern, $state, 4)} {
#{$gridle-debug-selector} {
background-color : #eebdb2;
}
}
#{_gridle_classname($gridle-debug-color-name-pattern, $state, 5)} {
#{$gridle-debug-selector} {
background-color : #d4b2ee;
}
}
#{_gridle_classname($gridle-debug-color-name-pattern, $state, 6)} {
#{$gridle-debug-selector} {
background-color : #b2d8ee;
}
}
}
}
// generate settings json :
@mixin gridle_generate_json_settings() {
// settings content :
$gridle-settings-states : "{";
// generate all classes for differents media queries :
$statesCount : length($_gridle_states);
$i : 0;
@each $stateName, $state in $_gridle_states {
$name : $stateName;
$gridle-settings-states : "#{$gridle-settings-states} \"#{$name}\":{";
@each $varName, $var in $state {
$value : null;
@if $varName == "query" {
$value : _gridle_get_media_query($stateName);
} @else {
$value : map-get($state,$varName);
}
@if $value == null {
$gridle-settings-states : "#{$gridle-settings-states} \"#{$varName}\" : null,";
} @elseif type-of($value) == bool {
$gridle-settings-states : "#{$gridle-settings-states} \"#{$varName}\" : #{$value},";
} @else {
$gridle-settings-states : "#{$gridle-settings-states} \"#{$varName}\" : \"#{$value}\",";
}
}
$gridle-settings-states : "#{$gridle-settings-states} \"_gridle\" : true";
@if $i >= $statesCount - 1 {
$gridle-settings-states : "#{$gridle-settings-states} }";
} @else {
$gridle-settings-states : "#{$gridle-settings-states} },";
}
// update i :
$i : $i + 1;
}
// generate settings json :
$gridle-settings-states : "#{$gridle-settings-states}}";
$gridle-settings : "{";
$gridle-settings : "#{$gridle-settings} \"version\" : \"#{$_gridle-version}\"";
// states :
$gridle-settings : "#{$gridle-settings}, \"states\" : #{$gridle-settings-states}";
// debug devices :
$debug_devices : $_gridle_states_debug_devices;
@if length($_gridle_states_debug_devices) <= 0 {
$debug_devices : null;
}
// $gridle-settings : "#{$gridle-settings}, \"debugDevices\" : { #{$debug_devices} }";
// settings :
// $gridle-settings : "#{$gridle-settings}, \"classPrefix\" : \"#{$gridle-class-prefix}\"";
$gridle-settings : "#{$gridle-settings} }";
#gridle-settings {
content : $gridle-settings;
}
}
// gridle mixin :
// Generate all the classes needed for a grid
@mixin gridle_generate_classes(
$stateName : null,
$what : null,
$scope : null
) {
// if the what parameter is not null, mean that we need to generate only certain classes in a certain order :
@if $what
{
// loop on each what item to generate the corresponding classes :
@each $w in $what
{
// check if a scope exist :
@if $scope {
// wrapp grid into scope :
.#{$scope} {
@include _gridle_generate_classes($stateName, ( $w ), true);
}
} @else {
// generate classes :
@include _gridle_generate_classes($stateName, ( $w ), false);
}
}
}
@else
{
// don't have any "what" parameter so generate all the classes
// check if a scope exist :
@if $scope {
// wrapp grid into scope :
.#{$scope} {
@include _gridle_generate_classes($stateName, null, true);
}
} @else {
// generate classes :
@include _gridle_generate_classes($stateName, null, false);
}
}
}
$_gridle_generateOnlyOnce : true; // keep track of generate once classes
@mixin _gridle_generate_classes(
$stateName : null,
$what : null,
$has-parent : false
) {
// generate these classes only once :
@if $_gridle_generateOnlyOnce
{
// update status :
$_gridle_generateOnlyOnce : false;
// | ------------------------
// | Windows 8 fix
// | ------------------------
// Windows 8 fix for snap mode :
@media screen and (max-width: 400px) {
@-ms-viewport { width: device-width; }
}
// | ------------------------
// | Container
// | ------------------------
// generate container class :
@if $what == null or index($what, container) or index($what, default)
{
$container-selector : ();
$container-selector : append( $container-selector, unquote("#{_gridle_classname($gridle-container-name-pattern)}"), comma);
#{$container-selector} {
@include gridle_container();
}
}
// | ------------------------
// | Parent selector
// | ------------------------
// parent common css :
@if $what == null or index($what, parent) or index($what, default)
{
$parentSelector : _gridle_classname($gridle-parent-name-pattern,null,null);
#{$parentSelector} {
@extend %gridle-clearfix;
@extend %gridle-parent-common;
}
}
// // | ------------------------
// // | JSON Settings
// // | ------------------------
// // generate json settings :
@if $gridle-generate-json-settings
{
@include gridle_generate_json_settings();
}
}
// | ------------------------
// | Set the list of states to generate
// | ------------------------
$states : $_gridle_states;
@if $stateName and _gridle_has_state($stateName) {
$states : map-set((), $stateName, _gridle_get_state($stateName));
}
// | ------------------------
// | Store all the generated common selectors
// | ------------------------
// generate all selector for extends :
$grid-common-selector : ();
$push-common-selector : ();
$pull-common-selector : ();
$prefix-common-selector : ();
$suffix-common-selector : ();
// | ------------------------
// | Media queries classes common selectors
// | ------------------------
// generate all classes for media queries :
@each $stateName, $state in $states {
// setup vars :
$media : $stateName;
$classes : map-get($state, classes);
$context : map-get($state, context);
$name-multiplicator : map-get($state, name-multiplicator);
$generate-push-classes : _gridle_get_var_value(generate-push-classes, $state);
$generate-pull-classes : _gridle_get_var_value(generate-pull-classes, $state);
$generate-prefix-classes : _gridle_get_var_value(generate-prefix-classes, $state);
$generate-suffix-classes : _gridle_get_var_value(generate-suffix-classes, $state);
// generate classes :
@if $classes == true and $context {
// get specials columns :
$columnsMap : map-merge((), $_gridle_columns);
// register each default columns :
@for $j from 0 through $context {
// name :
$columnName : "#{$j*$name-multiplicator}";
$columnWidth : $j * $name-multiplicator;
// // create a column :
$col : _gridle_create_column($columnName, $columnWidth, $context, $name-multiplicator);
// // add column in columns map :
$columnsMap : map-set($columnsMap, $columnName, $col);
}
// loop on each columns to generate common selector :
@each $columnName, $column in $columnsMap {
// add selector :
@if $what == null or index($what, grid) or index($what, default) {
$grid-common-selector : append( $grid-common-selector, unquote("#{_gridle_classname($gridle-grid-name-pattern, $media, $columnName)}"), comma );
}
@if $generate-push-classes and ($what == null or index($what, push) or index($what, default)) {
$push-common-selector : append( $push-common-selector, unquote("#{_gridle_classname($gridle-push-name-pattern, $media, $columnName)}"), comma );
}
@if $generate-pull-classes and ($what == null or index($what, pull) or index($what, default)) {
$pull-common-selector : append( $pull-common-selector, unquote("#{_gridle_classname($gridle-pull-name-pattern, $media, $columnName)}"), comma );
}
@if $generate-prefix-classes and ($what == null or index($what, prefix) or index($what, default)) {
$prefix-common-selector : append( $prefix-common-selector, unquote("#{_gridle_classname($gridle-prefix-name-pattern, $media, $columnName)}"), comma );
}
@if $generate-suffix-classes and ($what == null or index($what, suffix) or index($what, default)) {
$suffix-common-selector : append( $suffix-common-selector, unquote("#{_gridle_classname($gridle-suffix-name-pattern, $media, $columnName)}"), comma );
}
}
}
}
// common css :
@if $what == null or index($what, grid) or index($what, default) {
#{$grid-common-selector} {
@include _gridle_grid_common();
}
}
@if $what == null or index($what, push) or index($what, default) {
#{$push-common-selector} {
@include _gridle_push_common();
}
}
@if $what == null or index($what, pull) or index($what, default) {
#{$pull-common-selector} {
@include _gridle_pull_common();
}
}
@if $what == null or index($what, prefix) or index($what, default) {
#{$prefix-common-selector} {
@include _gridle_prefix_common();
}
}
@if $what == null or index($what, suffix) or index($what, default) {
#{$suffix-common-selector} {
@include _gridle_suffix_common();
}
}
// | ------------------------
// | Media queries classes
// | ------------------------
// generate all classes for differents media queries :
@each $stateName, $state in $states {
// setup vars :
$classes : _gridle_get_var_value(classes, $state);
$context : _gridle_get_var_value(context, $state);
$name-multiplicator : _gridle_get_var_value(name-multiplicator, $state);
$generate-push-classes : _gridle_get_var_value(generate-push-classes, $state);
$generate-pull-classes : _gridle_get_var_value(generate-pull-classes, $state);
$generate-prefix-classes : _gridle_get_var_value(generate-prefix-classes, $state);
$generate-suffix-classes : _gridle_get_var_value(generate-suffix-classes, $state);
$generate-helpers-classes : _gridle_get_var_value(generate-helpers-classes, $state);
// generate all media queries grid classes :
@if $classes == true {
// parent common css :
$parentSelector : _gridle_classname($gridle-parent-name-pattern,$stateName,null);
#{$parentSelector} {
@extend %gridle-clearfix;
@extend %gridle-parent-common;
}
// generate all the classes :
@include gridle_state($stateName, $has-parent) {
// get specials columns :
$columnsMap : map-merge((), $_gridle_columns);
// register each default columns :
@for $j from 0 through $context {
// name :
$columnName : "#{$j*$name-multiplicator}";
$columnWidth : $j * $name-multiplicator;
// // create a column :
$col : _gridle_create_column($columnName, $columnWidth, $context, $name-multiplicator);
// // add column in columns map :
$columnsMap : map-set($columnsMap, $columnName, $col);
}
// generate all classes for columns :
@each $columnName, $column in $columnsMap {
// variables :
$columnsCount : map-get($column, columns);
$columnsContext : map-get($column, context);
$columnsNameMultiplicator : map-get($column, name-multiplicator);
// extend context in state (for columns) :
$extendedState : map-merge($state, (
context : $columnsContext,
name-multiplicator : $columnsNameMultiplicator // inject the name multiplicator here getted from column to handle custom registered columns
));
// classes :
@if $what == null or index($what, grid) or index($what, default) {
#{_gridle_classname($gridle-grid-name-pattern, $stateName, $columnName)} {
@include _gridle($columnsCount, $extendedState);
}
}
@if $generate-push-classes == true and ($what == null or index($what, push) or index($what, default)) {
#{_gridle_classname($gridle-push-name-pattern, $stateName, $columnName)} {
@include _gridle_push($columnsCount, $extendedState);
}
}
@if $generate-pull-classes == true and ($what == null or index($what, pull) or index($what, default)) {
#{_gridle_classname($gridle-pull-name-pattern, $stateName, $columnName)} {
@include _gridle_pull($columnsCount, $extendedState);
}
}
@if $generate-prefix-classes == true and ($what == null or index($what, prefix) or index($what, default)) {
#{_gridle_classname($gridle-prefix-name-pattern, $stateName, $columnName)} {
@include _gridle_prefix($columnsCount, $extendedState);
}
}
@if $generate-suffix-classes == true and ($what == null or index($what, suffix) or index($what, default)) {
#{_gridle_classname($gridle-suffix-name-pattern, $stateName, $columnName)} {
@include _gridle_suffix($columnsCount, $extendedState);
}
}
}
// media queries helpers classes :
@if $generate-helpers-classes == true {
@include _gridle_generate_helper_classes($stateName, $what);
}
}
}
}
}

141
Resources/public/sass/contrib/gridle/gridle/_gridle.scss Normal file
View File

@@ -0,0 +1,141 @@
// |------------------------------------------------------
// |------------------------------------------------------
// Gridle (.scss)
// Gridle is an one and unique grid system file that allows you to generate almost all
// grid you've ever dreamt about.
// |------------------------------------------------------
// |------------------------------------------------------
// |------------------------------------------------------
// |------------------------------------------------------
// Copyright (c) 2014 Olivier Bossel
// Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
// documentation files (the "Software"), to deal in the Software without restriction, including without limitation
// the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software,
// and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
// The above copyright notice and this permission notice shall be included in all copies or substantial portions
// of the Software.
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
// TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
// CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
// IN THE SOFTWARE.
// |------------------------------------------------------
// |------------------------------------------------------
// |------------------------------------------------------
// |------------------------------------------------------
// @created 25.03.13
// @updated 09.06.15
// @author Olivier Bossel <olivier.bossel@gmail.com>
// @version 1.3.40
// |------------------------------------------------------
// |------------------------------------------------------
$_gridle-version : "1.3.40";
// |------------------------------------------------------
// |------------------------------------------------------
// | Variables
// |------------------------------------------------------
// |------------------------------------------------------
$_gridle_settings : (); // the default settings
$_gridle_states : (); // the variable map for each states
$_gridle_clear_classes :(); // store each automatic clear count
$_gridle_columns : (); // store the registered special columns
$_gridle_states_debug_devices : (); // save the debug states devices
// |------------------------------------------------------
// |------------------------------------------------------
// | Settings
// |------------------------------------------------------
// |------------------------------------------------------
@import 'settings';
// |------------------------------------------------------
// |------------------------------------------------------
// | Silent classes
// |------------------------------------------------------
// |------------------------------------------------------
@import 'silent-classes';
// |------------------------------------------------------
// |------------------------------------------------------
// | Common mixins
// |------------------------------------------------------
// |------------------------------------------------------
@import 'common-mixins';
// |------------------------------------------------------
// |------------------------------------------------------
// | Functions
// |------------------------------------------------------
// |------------------------------------------------------
@import 'functions';
// |------------------------------------------------------
// |------------------------------------------------------
// | Settings mixins
// |------------------------------------------------------
// |------------------------------------------------------
@import 'settings-mixins';
// |------------------------------------------------------
// |------------------------------------------------------
// | Mixins
// |------------------------------------------------------
// |------------------------------------------------------
@import 'mixins';
// |------------------------------------------------------
// |------------------------------------------------------
// | Generate mixins
// |------------------------------------------------------
// |------------------------------------------------------
@import 'generate-mixins';
// |------------------------------------------------------
// |------------------------------------------------------
// | Default states
// |------------------------------------------------------
// |------------------------------------------------------
@import 'default-states';

831
Resources/public/sass/contrib/gridle/gridle/_mixins.scss Normal file
View File

@@ -0,0 +1,831 @@
// |------------------------------------------------------
// |------------------------------------------------------
// | Mixins
// |------------------------------------------------------
// |------------------------------------------------------
// Helper to apply multiple config for a certain state with one mixin
@mixin gridle_set(
$settings,
$state : default
) {
// loop on each settings
@each $settingName, $settingValue in $settings
{
$sn : unquote("#{$settingName}");
$sv : $settingValue;
// check if setting name is a state :
@if _gridle_has_state($sn) {
// process the state
@include gridle_set($sv, $sn);
} @else {
@if $sn == container {
@include gridle_container($state);
} @else if $sn == grid {
@include gridle($sv, $state);
} @else if $sn == push {
@include gridle_push($sv, $state);
} @else if $sn == pull {
@include gridle_pull($sv, $state);
} @else if $sn == prefix {
@include gridle_prefix($sv, $state);
} @else if $sn == suffix {
@include gridle_suffix($sv, $state);
} @else if $sn == pull {
@include gridle_pull($sv, $state);
} @else if $sn == clear_each {
@include gridle_clear_each(nth($sv,1), nth($sv,2), $state);
} @else if $sn == centered {
@include gridle_centered($state);
} @else if $sn == parent {
@include gridle_parent($state);
} @else if $sn == vertical_align {
@include gridle_vertical_align($sv, $state);
} @else if $sn == hide {
@if $sv == true {
@include gridle_hide($state);
} @else {
@include gridle_show($state);
}
} @else if $sn == show {
@if $sv == true {
@include gridle_show($state);
} @else {
@include gridle_hide($state);
}
} @else if $sn == visible {
@if $sv == true {
@include gridle_visible($state);
} @else {
@include gridle_not_visible($state);
}
} @else if $sn == not_visible {
@if $sv == true {
@include gridle_not_visible($state);
} @else {
@include gridle_visible($state);
}
} @else if $sn == show_inline {
@if $sv == true {
@include gridle_show_inline($state);
} @else {
@include gridle_hide($state);
}
} @else if $sn == float {
@include gridle_float($sv, $state);
} @else if $sn == clear {
@include gridle_clear($sv, $state);
} @else if $sn == no_gutter
or $sn == no_margin {
@include gridle_no_gutter($sv, $state);
} @else if $sn == gutter
or $sn == margin {
@include gridle_gutter($sv, $state);
} @else {
// we do nothing
}
}
}
}
// Responsive helpers mixins :
@mixin gridle_state(
$states,
$has-parent : true
) {
// check first param if is a state :
$firstState : nth($states,1);
@if _gridle_has_state($firstState) {
// loop on each states :
@each $state in $states
{
// variables :
$html-states-classes : _gridle_get_var_value(html-states-classes, $state);
$debug : _gridle_get_var_value(debug, $state);
$stateName : _gridle_get_var_value(name, $state);
// check if is a state :
@if ($html-states-classes or $debug)
and $stateName {
// html class :
@if $has-parent {
html#{_gridle_classname("#{$stateName}")} & { @content; }
} @else {
html#{_gridle_classname("#{$stateName}")} { @content; }
}
}
// get the media query :
$q : _gridle_get_media_query($state);
// make the media query if a query exist :
@if $q {
@media #{$q} {
@content;
}
}
@else
{
@content;
}
}
} @else {
// variables :
$html-states-classes : _gridle_get_var_value(html-states-classes, $states);
$debug : _gridle_get_var_value(debug, $states);
$stateName : _gridle_get_var_value(name, $states);
// check if is a state :
@if ($html-states-classes or $debug)
and $stateName {
// html class :
@if $has-parent {
html#{_gridle_classname("#{$stateName}")} & { @content; }
} @else {
html#{_gridle_classname("#{$stateName}")} { @content; }
}
}
// get the media query :
$q : _gridle_get_media_query($states);
// make the media query if a query exist :
@if $q {
@media #{$q} {
@content;
}
}
@else
{
@content;
}
}
}
// Container mixin :
@mixin gridle_container(
$state : default
) {
@include _gridle_container_common($state);
}
// Grid mixin :
// Set the width of the specified grid column :
@mixin gridle(
$columns,
$state-or-context : default,
$state : default
) {
// manage state and context :
$context : null;
@if type-of($state-or-context) == number {
$context : $state-or-context;
} @else {
$state : $state-or-context;
}
// common :
@include _gridle_grid_common();
// check if need media query :
@if $state {
@include gridle_state($state) {
@include _gridle($columns, $state, $context);
}
} @else {
@include _gridle($columns, $state, $context);
}
}
@mixin _gridle(
$columns,
$state : default,
$context : null
) {
// vars :
$name : _gridle_get_var_value(name, $state);
@if type-of($context) != number {
$context : _gridle_get_var_value(context, $state);
}
$name-multiplicator : _gridle_get_var_value(name-multiplicator, $state);
$gutter-width : _gridle_get_var_value(gutter-width, $state);
$ie7-support : _gridle_get_var_value(ie7-support, $state);
$debug : _gridle_get_var_value(debug, $state);
$debug-show-class-names : _gridle_get_var_value(debug-show-class-names, $state);
// manage columns
@if type-of($columns) != number and map-has-key($_gridle_columns, $columns) {
// the columns is a saved one, get the context and column value
$column : map-get($_gridle_columns, $columns);
$context : map-get($column, context);
$columns : map-get($column, columns);
} @else if type-of($columns) == number {
$columns : $columns / $name-multiplicator;
} @else {
@error "the column #{$columns} does not exist...";
}
// vars :
$width : percentage(1 / $context * $columns);
// set value :
width:$width;
// ie7 support :
@if $ie7-support == true {
*width: expression((this.parentNode.clientWidth/#{$context}*#{($columns / $name-multiplicator)} - parseInt(this.currentStyle['paddingLeft']) - parseInt(this.currentStyle['paddingRight'])) + 'px');
}
// debug :
@if $debug == true and $debug-show-class-names == true {
#{$gridle-debug-selector} {
&:before {
@if $name == default {
content:"grid-#{$name}-#{$columns}";
} @else {
content:"grid-#{$name}-#{$columns}" !important;
}
}
&.parent:before {
@if $name == default {
content:"grid-parent-#{$name}-#{$columns}";
} @else {
content:"grid-parent-#{$name}-#{$columns}" !important;
}
}
}
}
}
// push :
// Push the element of the count of column wanted
@mixin gridle_push(
$columns,
$state-or-context : default,
$state : default
) {
// manage state and context
$context : null;
@if type-of($state-or-context) == number {
$context : $state-or-context;
} @else {
$state : $state-or-context;
}
// common :
@include _gridle_push_common($state);
// check if need media query :
@if $state {
@include gridle_state($state) {
@include _gridle_push($columns, $state, $context);
}
} @else {
@include _gridle_push($columns, $state, $context);
}
}
@mixin _gridle_push(
$columns,
$state : default,
$context : null
) {
// variables :
$name : _gridle_get_var_value(name, $state);
@if type-of($context) != number {
$context : _gridle_get_var_value(context, $state);
}
$direction : _gridle_get_var_value(direction, $state);
$name-multiplicator : _gridle_get_var_value(name-multiplicator, $state);
$debug : _gridle_get_var_value(debug, $state);
$debug-show-class-names : _gridle_get_var_value(debug-show-class-names, $state);
// vars :
$width : percentage(1 / $context) * ($columns / $name-multiplicator);
@if $direction == rtl { $width : $width*-1; }
left:$width;
// debug css :
@if $debug == true and $debug-show-class-names == true {
#{$gridle-debug-selector} {
&:after {
@if $name == default {
content:"push-#{$name}-#{$columns}";
} @else {
content:"push-#{$name}-#{$columns}" !important;
}
}
}
}
}
// pull :
// Pull the element of the count of column wanted
@mixin gridle_pull(
$columns,
$state : default
) {
// common :
@include _gridle_pull_common($state);
// check if need media query :
@if $state {
@include gridle_state($state) {
@include _gridle_pull($columns,$state);
}
} @else {
@include _gridle_pull($columns,$state);
}
}
@mixin _gridle_pull(
$columns,
$state : default
) {
// vars :
$name : _gridle_get_var_value(name, $state);
$context : _gridle_get_var_value(context, $state);
$direction : _gridle_get_var_value(direction, $state);
$name-multiplicator : _gridle_get_var_value(name-multiplicator, $state);
$debug : _gridle_get_var_value(debug, $state);
$debug-show-class-names : _gridle_get_var_value(debug-show-class-names, $state);
// vars :
$width : percentage(1 / $context) * ($columns / $name-multiplicator);
@if $direction == rtl { $width : $width*-1; }
right:$width;
// debug css :
@if $debug == true and $debug-show-class-names == true {
#{$gridle-debug-selector} {
&:after {
@if $name == default {
content:"pull-#{$name}-#{$columns}";
} @else {
content:"pull-#{$name}-#{$columns}" !important;
}
}
}
}
}
// push :
// Push the element of the count of column wanted
@mixin gridle_prefix(
$columns,
$state : default
) {
// common :
@include _gridle_prefix_common($state);
// check if need media query :
@if $state {
@include gridle_state($state) {
@include _gridle_prefix($columns,$state);
}
} @else {
@include _gridle_prefix($columns,$state);
}
}
@mixin _gridle_prefix(
$columns,
$state : default
) {
// vars :
$name : _gridle_get_var_value(name, $state);
$context : _gridle_get_var_value(context, $state);
$direction : _gridle_get_var_value(direction, $state);
$gutter-width : _gridle_get_var_value(gutter-width, $state);
$name-multiplicator : _gridle_get_var_value(name-multiplicator, $state);
$debug : _gridle_get_var_value(debug, $state);
$debug-show-class-names : _gridle_get_var_value(debug-show-class-names, $state);
// vars :
$width : percentage(1 / $context) * ($columns / $name-multiplicator);
// set value :
@if $direction == rtl { margin-right:$width; }
@else { margin-left:$width; }
// debug css :
@if $debug == true and $debug-show-class-names == true {
#{$gridle-debug-selector} {
&:after {
@if $name == default {
content:"prefix-#{$name}-#{$columns}";
} @else {
content:"prefix-#{$name}-#{$columns}" !important;
}
}
}
}
}
// pull :
// Pull the element of the count of column wanted
@mixin gridle_suffix(
$columns,
$state : default
) {
// common :
@include _gridle_suffix_common($state);
// check if need media query :
@if $state {
@include gridle_state($state) {
@include _gridle_suffix($columns,$state);
}
} @else {
@include _gridle_suffix($columns,$state);
}
}
@mixin _gridle_suffix(
$columns,
$state : default
) {
// vars :
$name : _gridle_get_var_value(name, $state);
$context : _gridle_get_var_value(context, $state);
$direction : _gridle_get_var_value(direction, $state);
$gutter-width : _gridle_get_var_value(gutter-width, $state);
$name-multiplicator : _gridle_get_var_value(name-multiplicator, $state);
$debug : _gridle_get_var_value(debug, $state);
$debug-show-class-names : _gridle_get_var_value(debug-show-class-names, $state);
// vars :
$width : percentage(1 / $context) * ($columns / $name-multiplicator);
// set value :
@if $direction == rtl { margin-left:$width; }
@else { margin-right:$width; }
// debug css :
@if $debug == true and $debug-show-class-names == true {
#{$gridle-debug-selector} {
&:after {
@if $name == default {
content:"suffix-#{$name}-#{$columns}";
} @else {
content:"suffix-#{$name}-#{$columns}" !important;
}
}
}
}
}
// grid background :
// Display the grid background debug
@mixin gridle_grid_background(
$state : default
) {
// check if need media query :
@if $state {
@include gridle_state($state) {
@include _gridle_grid_background($state);
}
} @else {
@include _gridle_grid_background($state);
}
}
@mixin _gridle_grid_background(
$state : default
) {
// variables :
$context : _gridle_get_var_value(context, $state);
position:relative;
z-index:9999;
&:before {
content:'';
position:absolute;
top:0; left:0;
width:100%; height:100% !important;
// vars :
$width : percentage(1 / $context);
background: linear-gradient(to right, rgba(0,0,0,.01) 50% , rgba(0,0,0,.04) 50%); /* Standard syntax */
background-size:($width*2) 100%;
// background-position:$gridle-gutter-width/2 0;
}
}
/**
* Parent clear each
*/
// Grid mixin :
// Set the width of the specified grid column :
@mixin gridle_clear_each(
$clearEach,
$clearWhat : both,
$state : default
) {
// check if need media query :
@if $state {
@include gridle_state($state) {
@include _gridle_clear_each($clearEach, $clearWhat);
}
} @else {
@include _gridle_clear_each($clearEach, $clearWhat);
}
}
@mixin _gridle_clear_each(
$clearEach,
$clearWhat
) {
> *:nth-child(#{$clearEach}n+1) {
clear : $clearWhat;
}
}
// Grid centered :
@mixin gridle_centered(
$state : default
) {
// check if need media query :
@if $state {
@include gridle_state($state) {
@include _gridle_centered();
}
} @else {
@include _gridle_centered();
}
}
@mixin _gridle_centered() {
display:block !important;
float:none !important;
margin-left:auto !important;
margin-right:auto !important;
clear:both !important;
}
// Grid parent :
@mixin gridle_parent(
$state : default
) {
// common :
@include _gridle_parent_common();
// check if need media query :
@if $state {
@include gridle_state($state) {
@include _gridle_parent();
}
} @else {
@include _gridle_parent();
}
}
@mixin _gridle_parent() {
@include gridle_no_gutter();
}
/**
* Vertical align :
*/
@mixin gridle_vertical_align(
$align : middle,
$state : default
) {
// check if need media query :
@if $state {
@include gridle_state($state) {
@include _gridle_vertical_align($align);
}
} @else {
@include _gridle_vertical_align($align);
}
}
@mixin _gridle_vertical_align(
$align : middle
) {
font-size:0;
clear:both;
> * {
display:inline-block;
float:none !important;
vertical-align:$align;
font-size:1rem;
}
}
// Hide on :
// @param String $media On what state
@mixin gridle_hide(
$state : default
) {
// check if need media query :
@if $state {
@include gridle_state($state) {
@include _gridle_hide();
}
} @else {
@include _gridle_hide();
}
}
@mixin _gridle_hide() {
display:none;
}
// Not visible on :
// @param String $media What to hide (one of the 3 state classes name)
@mixin gridle_not_visible(
$state : default
) {
// check if need media query :
@if $state {
@include gridle_state($state) {
@include _gridle_not_visible();
}
} @else {
@include _gridle_not_visible();
}
}
@mixin _gridle_not_visible() {
visibility:hidden;
}
// Show on
// @param String $media What to hide (one of the 3 state classes name)
@mixin gridle_show(
$state : default
) {
// check if need media query :
@if $state {
@include gridle_state($state) {
@include _gridle_show();
}
} @else {
@include _gridle_show();
}
}
@mixin _gridle_show() {
display:block;
}
/**
* Show inline
*
* @param String $state The state name
*/
@mixin gridle_show_inline(
$state : default
) {
// check if need media query :
@if $state {
@include gridle_state($state) {
@include _gridle_show_inline();
}
} @else {
@include _gridle_show_inline();
}
}
@mixin _gridle_show_inline() {
display:inline-block;
}
// Visible on :
// @param String $media On what state
@mixin gridle_visible(
$state : default
) {
// check if need media query :
@if $state {
@include gridle_state($state) {
@include _gridle_visible();
}
} @else {
@include _gridle_visible();
}
}
@mixin _gridle_visible() {
visibility:visible;
}
// Gridle Right :
@mixin gridle_float(
$float-direction : left,
$state : default
) {
// check if need media query :
@if $state {
@include gridle_state($state) {
@include _gridle_float($float-direction);
}
} @else {
@include _gridle_float($float-direction);
}
}
@mixin _gridle_float(
$float-direction : left
) {
float:#{$float-direction};
}
// Gridle clear :
// @param String $clear-direction The direction to clear
// @param String $state The state
@mixin gridle_clear(
$clear-direction : both,
$state : default
) {
// check if need media query :
@if $state {
@include gridle_state($state) {
@include _gridle_clear($clear-direction);
}
} @else {
@include _gridle_clear($clear-direction);
}
}
@mixin _gridle_clear(
$clear-direction : both
) {
clear:#{$clear-direction};
}
// Gridle no gutter :
// @param String $side The side to clear
// @param String $state The state
@mixin gridle_no_gutter(
$side : left right,
$state : default
) {
// check if need media query :
@if $state {
@include gridle_state($state) {
@include _gridle_no_gutter($side);
}
} @else {
@include _gridle_no_gutter($side);
}
}
@mixin gridle_no_margin(
$side : left right,
$state : default
) {
@include gridle_no_gutter($side, $state);
}
@mixin _gridle_no_gutter(
$side : left right
) {
@each $s in $side {
padding-#{$s} : 0;
}
}
// Gridle gutter :
// @param String $side The side to clear
// @param String $state The state
@mixin gridle_gutter(
$side : left right,
$state : default
) {
// check if need media query :
@if $state {
@include gridle_state($state) {
@include _gridle_gutter($side);
}
} @else {
@include _gridle_gutter($side);
}
}
// shortcut :
@mixin gridle_margin(
$side : left right,
$state : default
) {
@include gridle_gutter($side, $state);
}
@mixin _gridle_gutter(
$side : left right,
$state : default
) {
$gutter-width : _gridle_get_var_value(gutter-width, $state);
@each $s in $side {
padding-#{$s} : $gutter-width / 2;
}
}

139
Resources/public/sass/contrib/gridle/gridle/_settings-mixins.scss Normal file
View File

@@ -0,0 +1,139 @@
// |------------------------------------------------------
// |------------------------------------------------------
// | Settings mixins
// |------------------------------------------------------
// |------------------------------------------------------
/**
* Setup
*/
@mixin gridle_setup(
$settings : ()
) {
$_gridle-settings : map-merge((
name : default,
min-width : null,
max-width : null,
query : null,
classes : true,
context : 12,
gutter-width : 20px,
direction : ltr,
name-multiplicator : 1,
debug : false,
debug-show-class-names : true,
ie7-support : false,
html-states-classes : false,
generate-push-classes : true,
generate-pull-classes : true,
generate-prefix-classes : true,
generate-suffix-classes : true,
generate-helpers-classes : true
), $settings) !global;
// register default state :
@include gridle_register_state(default, $_gridle-settings);
}
// Register an state :
@mixin gridle_register_state(
$name,
$settings
) {
// settings :
$settings : map-merge($_gridle-settings, $settings);
// set name :
$settings : map-set($settings, name, $name);
// add state in maps :
$_gridle_states : map-set($_gridle_states, $name, $settings) !global;
}
/**
* Register a clear each class
*/
@mixin gridle_register_clear_each(
$count,
$clearWhat
) {
// create the clear map :
$classMap : (
clearEach : $count,
clearWhat : $clearWhat
);
// append to map :
$_gridle_clear_classes : map-set($_gridle_clear_classes, $count, $classMap) !global;
}
/**
* Register a special class
*/
@mixin gridle_register_column(
$name,
$columns,
$context
) {
// create a column :
$col : _gridle_create_column($name, $columns, $context);
// add column in maps :
$_gridle_columns : map-set($_gridle_columns, $name, $col) !global;
}
/**
* Register default states
*/
@mixin gridle_register_default_states() {
@include gridle_register_state(mobile, (
max-width : 480px
));
@include gridle_register_state(tablet, (
min-width : 481px,
max-width : 1024px
));
}
/**
* Register default mobile first states :
*/
@mixin gridle_register_default_mobile_first_states() {
@include gridle_register_state(xs, (
max-width : 768px
));
@include gridle_register_state(sm, (
min-width : 768px
));
@include gridle_register_state(md, (
min-width : 992px
));
@include gridle_register_state(lg, (
min-width : 1200px
));
}
/**
* Set the debug device (not used for now)
*
* @param String $state The state to update
* @para m String $device The device to use (iphone, etc...)
*/
@mixin gridle_set_debug_device(
$state : default,
$device : null
) {
// check params :
@if $state and $device {
// set the state device :
$_gridle_states_debug_devices : append($_gridle_states_debug_devices, unquote("\"#{$state}\" : \"#{$device}\""), comma);
}
}

69
Resources/public/sass/contrib/gridle/gridle/_settings.scss Normal file
View File

@@ -0,0 +1,69 @@
// |------------------------------------------------------
// |------------------------------------------------------
// | Settings
// |------------------------------------------------------
// |------------------------------------------------------
$gridle-generate-json-settings : true !default;
$gridle-debug-selector : ".gridle-debug &, &.gridle-debug" !default;
$gridle-class-prefix : '' !default;
$gridle-class-separator : '-' !default;
$gridle-container-name-pattern : ('container') !default;
$gridle-grid-name-pattern : ('grid','%-','%state','%-','%count') !default;
$gridle-push-name-pattern : ('push','%-','%state','%-','%count') !default;
$gridle-pull-name-pattern : ('pull','%-','%state','%-','%count') !default;
$gridle-prefix-name-pattern : ('prefix','%-','%state','%-','%count') !default;
$gridle-suffix-name-pattern : ('suffix','%-','%state','%-','%count') !default;
$gridle-parent-name-pattern : ('parent','%-','%state') !default;
$gridle-centered-name-pattern : ('centered','%-','%state') !default;
$gridle-vertical-align-middle-name-pattern : ('vertical','%-','align','%-','%state','%-','middle') !default;
$gridle-vertical-align-top-name-pattern : ('vertical','%-','align','%-','%state','%-','top') !default;
$gridle-vertical-align-bottom-name-pattern : ('vertical','%-','align','%-','%state','%-','bottom') !default;
$gridle-hide-name-pattern : ('hide','%-','%state') !default;
$gridle-show-name-pattern : ('show','%-','%state') !default;
$gridle-show-inline-name-pattern : ('show','%-','inline','%-','%state') !default;
$gridle-not-visible-name-pattern : ('not','%-','visible','%-','%state') !default;
$gridle-visible-name-pattern : ('visible','%-','%state') !default;
$gridle-float-left-name-pattern : ('float','%-','%state','%-','left') !default;
$gridle-float-right-name-pattern : ('float','%-','%state','%-','right') !default;
$gridle-clear-name-pattern : ('clear','%-','%state') !default;
$gridle-clear-left-name-pattern : ('clear','%-','%state','%-','left') !default;
$gridle-clear-right-name-pattern : ('clear','%-','%state','%-','right') !default;
$gridle-clear-each-pattern : ('clear','%-','each','%-','%state','%-','%count') !default;
$gridle-no-gutter-name-pattern : ('no','%-','gutter','%-','%state') !default;
$gridle-no-gutter-left-name-pattern : ('no','%-','gutter','%-','%state','%-','left') !default;
$gridle-no-gutter-right-name-pattern : ('no','%-','gutter','%-','%state','%-','right') !default;
$gridle-no-gutter-top-name-pattern : ('no','%-','gutter','%-','%state','%-','top') !default;
$gridle-no-gutter-bottom-name-pattern : ('no','%-','gutter','%-','%state','%-','bottom') !default;
$gridle-no-margin-name-pattern : ('no','%-','margin','%-','%state') !default;
$gridle-no-margin-left-name-pattern : ('no','%-','margin','%-','%state','%-','left') !default;
$gridle-no-margin-right-name-pattern : ('no','%-','margin','%-','%state','%-','right') !default;
$gridle-no-margin-top-name-pattern : ('no','%-','margin','%-','%state','%-','top') !default;
$gridle-no-margin-bottom-name-pattern : ('no','%-','margin','%-','%state','%-','bottom') !default;
$gridle-gutter-name-pattern : ('gutter','%-','%state') !default;
$gridle-gutter-left-name-pattern : ('gutter','%-','%state','%-','left') !default;
$gridle-gutter-right-name-pattern : ('gutter','%-','%state','%-','right') !default;
$gridle-gutter-top-name-pattern : ('gutter','%-','%state','%-','top') !default;
$gridle-gutter-bottom-name-pattern : ('gutter','%-','%state','%-','bottom') !default;
$gridle-margin-name-pattern : ('margins','%-','%state') !default;
$gridle-margin-left-name-pattern : ('margin','%-','%state','%-','left') !default;
$gridle-margin-right-name-pattern : ('margin','%-','%state','%-','right') !default;
$gridle-margin-top-name-pattern : ('margin','%-','%state','%-','top') !default;
$gridle-margin-bottom-name-pattern : ('margin','%-','%state','%-','bottom') !default;
$gridle-auto-height-name-pattern : ('auto','%-','height','%-','%state') !default;
$gridle-debug-color-name-pattern : ('debug','%-','color','%-','%state','%-','%count') !default;

106
Resources/public/sass/contrib/gridle/gridle/_silent-classes.scss Normal file
View File

@@ -0,0 +1,106 @@
// |------------------------------------------------------
// |------------------------------------------------------
// | Silent classes
// |------------------------------------------------------
// |------------------------------------------------------
%gridle-pie-clearfix {
&:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
& {
display: inline-block;
}
html[xmlns] & {
display: block;
}
* html & {
height: 1%;
}
}
%gridle-simple-clearfix {
&:after {
content: "";
display: table;
clear: both;
border-spacing:0;
}
}
%gridle-clearfix {
// For modern browser
&:before,
&:after {
content:"";
display:table;
border-spacing:0;
}
&:after {
clear:both;
}
// For IE 6/7 (trigger hasLayout
& {
zoom:1;
}
}
%gridle-push-pull-debug-background-common {
background-size:50px 90%;
background-position:0 50%;
background-repeat:repeat-x;
}
%gridle-push-pull-common {
position:relative;
}
%gridle-container-common {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
%gridle-parent-common {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
%gridle-container-debug-common {
background-color:#f5f5f5;
}
%gridle-grid-debug-common {
&:before,
&:after {
content:"";
display:block;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowRkEzNzVFNTg1NjgxMUUyOUI4RjhEMzg4QzM4QjZFOCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowRkEzNzVFNjg1NjgxMUUyOUI4RjhEMzg4QzM4QjZFOCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjBGQTM3NUUzODU2ODExRTI5QjhGOEQzODhDMzhCNkU4IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjBGQTM3NUU0ODU2ODExRTI5QjhGOEQzODhDMzhCNkU4Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8++5+BhQAAAA9JREFUeNpiYGBgkAIIMAAAHwAbZIBtGgAAAABJRU5ErkJggg==);
margin:10px 0;
padding:5px 0;
text-align:center;
color:white;
font-size:11px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display:block !important;
}
background-color:#daeff5;
}
%gridle-grid-common {
display:inline-block;
min-height:1px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
%gridle-prefix-debug-common {
background-color:#dae7e9 !important;
}
%gridle-suffix-debug-common {
background-color:#dae7e9 !important;
}

11
Resources/public/sass/contrib/gridle/style-bootstrap.scss Normal file
View File

@@ -0,0 +1,11 @@
/**
* Bootstrap style :
*/
.row {
margin:20px 0; // adding margin to rows
}
.thumb {
background:#eee;
width:100%; height:0;
padding-bottom:56%;
}

76
Resources/public/sass/contrib/gridle/style.scss Normal file
View File

@@ -0,0 +1,76 @@
/**
* Imports :
*/
@import 'compass/reset';
/**
* Import grid settings :
* This to be able to use gridle mixins, etc...
*/
@import 'grid-settings';
/**
* Medias :
*/
ul#medias {
background:black;
text-align:center;
margin-bottom:30px;
li {
display:inline-block;
height:50px;
line-height:50px;
padding:0 30px;
color:white;
font-size:16px;
cursor:pointer;
margin:0;
&.active,
&:hover {
background:white;
color:black;
}
}
@include gridle_state((
max-width : 620px
)) {
display:none;
}
}
/**
* Basic formatting :
*/
html {
font:11px/1.5 'Helvetica Neue', Verdana, sans-serif;
}
body {
@include gridle_state(mobile tablet) {
text-align:center;
}
@include gridle_state(ipad-landscape) {
font-size:16px;
}
}
/**
* Gridle set sample :
*/
#myCoolItem {
@include gridle_set((
grid : 8,
push : 2,
tablet : (
grid : 12,
push : 0
),
mobile : (
visible : false
)
));
}

280
Resources/public/sass/contrib/gridle/tests.scss Normal file
View File

@@ -0,0 +1,280 @@
// Import grid settings :
@import 'grid-settings';
// standard grid mixins :
.grid-12 {
@include gridle(12);
}
.grid-1on5 {
@include gridle("1on5");
}
.grid-12-on-100 {
@include gridle(12, 100);
}
.grid-15-on-100-on-mobile {
@include gridle(15, 100, mobile);
}
.grid-30-on-100-on-mobile-and-tablet {
@include gridle(30, 100);
@include gridle(30, 100, mobile tablet);
}
// parent
.grid-parent {
@include gridle_parent();
}
.grid-parent-set {
@include gridle_set((
parent : true
));
}
// clear each
.clear-each-2 {
@include gridle_clear_each(2);
}
.clear-each-2-left {
@include gridle_clear_each(2, left);
}
.clear-each-2-left-mobile {
@include gridle_clear_each(2, left, mobile);
}
.clear-each-2-set {
@include gridle_set((
clear_each : ( 2, left )
));
}
// centered
.centered {
@include gridle_centered();
}
.centered-mobile {
@include gridle_centered(mobile);
}
// certical align
.vertical-align {
@include gridle_vertical_align();
}
.vertical-align-bottom {
@include gridle_vertical_align(bottom);
}
.vertical-align-top-mobile {
@include gridle_vertical_align(top, mobile);
}
.vertical-align-set {
@include gridle_set((
vertical_align : middle
));
}
// push
.push-6 {
@include gridle_push(6);
}
.push-12-mobile {
@include gridle_push(12, mobile);
}
.push-set {
@include gridle_set((
push : 3
));
}
// pull
.pull-6 {
@include gridle_pull(6);
}
.pull-12-mobile {
@include gridle_pull(12, mobile);
}
.pull-set {
@include gridle_set((
pull : 3
));
}
// prefix
.prefix-6 {
@include gridle_prefix(6);
}
.prefix-12-mobile {
@include gridle_prefix(12, mobile);
}
.prefix-set {
@include gridle_set((
prefix : 3
));
}
// suffix
.suffix-6 {
@include gridle_suffix(6);
}
.suffix-12-mobile {
@include gridle_suffix(12, mobile);
}
.suffix-set {
@include gridle_set((
suffix : 3
));
}
// hide
.hide {
@include gridle_hide();
}
.hide-mobile {
@include gridle_hide(mobile);
}
.hide-set {
@include gridle_set((
hide : true
));
}
// show
.show {
@include gridle_show();
}
.show-mobile {
@include gridle_show(mobile);
}
.show-set {
@include gridle_set((
show : false
));
}
// show_inline
.show_inline {
@include gridle_show_inline();
}
.show_inline-mobile {
@include gridle_show_inline(mobile);
}
.show_inline-set {
@include gridle_set((
show_inline : true
));
}
// not_visible
.not_visible {
@include gridle_not_visible();
}
.not_visible-mobile {
@include gridle_not_visible(mobile);
}
.not_visible-set {
@include gridle_set((
not_visible : true
));
}
// visible
.visible {
@include gridle_visible();
}
.visible-mobile {
@include gridle_visible(mobile);
}
.visible-set {
@include gridle_set((
visible : false
));
}
// gridle state
.gridle-state {
background: red;
@include gridle_state(mobile tablet) {
background: pink;
}
@include gridle_state((
query : "only print"
)) {
background: yellow;
}
@include gridle_state((
max-width : 200px
)) {
background: green;
}
}
// gridle set
.gridle-set {
@include gridle_set((
grid : 6,
push : 2,
tablet : (
grid : 8,
push : 0,
),
clear : left,
mobile : (
grid : 12,
push : 0,
pull : 0
)
));
}
.gridle-set-multiple {
@include gridle_set((
grid : 6
));
@include gridle_set((
grid : 12
), mobile tablet);
}
// float-right
.float-right {
@include gridle_float(right);
}
.float-left-mobile {
@include gridle_float(left, mobile);
}
.float-set {
@include gridle_set((
float : right
));
}
// clear
.clear {
@include gridle_clear();
}
.clear-left-mobile {
@include gridle_clear(left, mobile);
}
.clear-set {
@include gridle_set((
clear : left
));
}
// gutters
.gutters {
@include gridle_gutter();
}
.gutters-left {
@include gridle_gutter(left);
}
.gutters-side-mobile {
@include gridle_gutter(left right, mobile);
}
// no-gutter
.no-gutter {
@include gridle_no_gutter();
}
.no-gutter-left {
@include gridle_no_gutter(left);
}
.no-gutter-side-mobile {
@include gridle_no_gutter(left right, mobile);
}