sugarcss 1.0.0

data/stylesheets/sugar/_sugar.scss

@@ -0,0 +1,606 @@
+//
+// colors helpers
+// font helpers
+// - rem function
+// **
+
+//
+// Vendors
+//
+@import 'vendors/sassdash/sassdash';
+@import 'vendors/animatecss/animate.scss';
+@import 'vendors/cssgram/cssgram.scss';
+@import 'vendors/modularscale/modular-scale';
+@import 'vendors/fontawesome/font-awesome';
+
+//
+// Functions
+//
+@import 'functions';
+
+//
+// Units
+//
+@import 'units';
+
+//
+// Math
+//
+@import 'tools/math';
+
+//
+// Map
+//
+@import 'tools/map';
+
+//
+// List
+//
+@import 'tools/list';
+
+//
+// String
+//
+@import 'tools/string';
+
+//
+// Arrow
+//
+@import 'tools/arrow';
+
+//
+// BEM
+//
+@import 'BEM';
+
+//
+// Clearfix
+//
+@import 'clearfix';
+
+//
+// Forms
+//
+@import 'forms';
+
+//
+// Lists
+//
+@import 'lists';
+
+//
+// Images
+//
+@import 'images';
+
+//
+// Icons
+//
+@import 'icons';
+
+//
+// Animations
+//
+@import 'animations';
+
+//
+// Filters
+//
+@import 'filters';
+
+//
+// Effects
+//
+@import 'effects';
+
+//
+// Helpers functions
+//
+@import 'helper-functions';
+
+//
+// Helpers mixins
+//
+@import 'helper-mixins';
+
+//
+// Medias
+//
+@import 'medias';
+
+//
+// Typo
+//
+@import 'typo';
+
+//
+// Color
+//
+@import 'colors';
+
+//
+// Shapes
+//
+@import 'shapes';
+
+//
+// Reset
+//
+@import 'reset';
+
+//
+// Variables
+//
+$sugar-animatecss : () !default; 					// store all the icons wanted from animate.css package
+$_sugar-settings : (								// store all the settings
+	reset 						: true, 			// by default, a reset will be applied
+	border-box 					: true, 			// set if need to set all as border box model
+	typo 						: (
+		font-size 					: 16px, 			// default font-size
+		font-sizes 					: null, 			// map of font-sizes by media (size : media)
+		font-family 				: 'Helvetica,Verdana,Arial,sans-serif', 			// default font family to use. If match a registered font, use that font instead
+		line-letters-count			: 55,				// optimal letters count in a line
+		vertical-rhythme 			: ( 				// Vertical rhythme options
+			scope-class 				: typeset 			// the class in which the vertical rhythme will be applied
+									),
+		font-format 				: ( 				// font format used in font-face
+			eot 						: embedded-opentype,
+			woff2 						: woff2,
+			woff 						: woff,
+			ttf 						: truetype,
+			otf 						: opentype,
+			svg 						: svg,
+			svgz 						: svgz
+
+									)
+								),
+	BEM 						: ( 				// BEM settings
+		standelone-modifier			: false, 			// set if by default need to extend base element
+		element-separator 			: '__', 			// element separator
+		modifier-separator 			: '--' 				// modifier separator
+								),
+	modular-scale 				: ( 				// Modular scale settings
+		base 						: 1rem, 			// the modular scale base
+		ratio 						: $golden, 			// the ratio to use
+		range 						: null, 			// range
+		fluid 						: false 			// is fluid modular scale
+	),
+	animate-css 				: ( 				// store the animatecss settings
+		duration 					: 1s, 				// default animatecss duration
+		ease 						: ease-in-out, 		// default animatecss ease
+		fill-mode					: both 				// defaull animatecss fill mode
+	),
+	font-awesome 				: ( 				// font awesome settings
+		font-path 					: '../fonts/font-awesome', 		// path to dont without trailing slash
+		version 					: 4.4.0, 			// font-awesome version
+		classes 					: null, 		// list of icons to generate
+								),
+	sizes 						: (), 				// store all the sizes available
+	colors 						: (					// store all the colors
+		classes 					: (
+			color 						: 'c-{color}',
+			color-modifier 				: 'c-{color}--{modifier}',
+			bkg 						: 'bkg-{color}',
+			bkg-modifier 				: 'bkg-{color}--{modifier}'
+									)
+								), 				
+	fonts  						: (), 				// store all the fonts
+	filters 					: (), 				// store all the registered filters
+	transition 					: ( 				// store all the transition settings
+		duration 					: .2s, 				// default transition duration
+		ease 						: ease-in-out, 		// default easing function 
+		delay 						: 0s, 				// default delay
+		property 					: all, 				// default property
+		transitions 				: () 				// store all registered transitions
+	), 
+	helper-classes 				: ()
+);		
+
+//
+// Sugar mixin
+//
+@mixin sugar(
+	$what...
+) {
+	@if type-of(nth($what,1)) == map {
+		// setup
+		@include s-setup(nth($what,1));
+		// init
+		@include s-init();
+	} @else if nth($what,1) == classes {
+		// classes
+		$packages : null;
+		@if length($what) == 2 {
+			$packages : nth($what,2);
+		}
+		@include s-classes($packages);
+	}
+}
+@mixin s(
+	$what...
+) {
+	@include sugar($what...);
+}
+
+//
+// Sugar function
+//
+@function sugar(
+	$what
+) {
+	@if type-of($what) == string and str-index($what, "settings.") {
+		// get a configuration
+		@return s-setting(str-slice($what,10));
+	}
+}
+@function s(
+	$what
+) {
+	@return sugar($what);
+}
+
+//
+// Get a configuration
+//
+$_sugar-settings-cache : ();
+@function s-setting(
+	$path
+) {
+	// check in cache
+	$cache : map-get($_sugar-settings-cache, $path);
+	@if $cache {
+		@return $cache;
+	}
+
+	// do not have any cache
+	$parts : _split($path, '.');
+	$length : length($parts);
+	$idx : 0;
+	$value : $_sugar-settings;
+	@each $part in $parts {
+		$idx : $idx + 1;
+		$value : map-get($value, $part);
+		@if $idx == $length {
+			$_sugar-settings-cache : map-set($_sugar-settings-cache, $path, $value) !global;
+			@return $value;
+		}
+	}
+}
+
+//
+// Classes
+//
+@mixin s-classes(
+	$packages
+) {
+	// font-awesome
+	$fa-icons : sugar('settings.font-awesome.classes');
+	@if $fa-icons {
+		@each $icon in $fa-icons {
+			.fa-#{$icon} {
+				@extend %fa;
+				@extend %fa-#{$icon} !optional;
+			}
+		}
+	}
+
+	// classes
+	$classes : sugar('settings.classes');
+	@if $classes {
+		@each $namespace in $classes {
+			// get values
+			$values : _get($_sugar-classes, _split($namespace,'.'));
+			// get values
+			@if type-of($values) == map {
+				$values : map-deep-values($values);
+				// loop to create each classes
+				@each $value in $values {
+					.#{$value} {
+						@extend %#{$value} !optional;
+					}
+				}
+			} @else if type-of($values) == string {
+				.#{$values} {
+					@extend %#{$values} !optional;
+				}
+			}
+		}
+	}
+
+	// animatecss
+	%animatecss-animated {
+		animation-duration : sugar('settings.animate-css.duration');
+		animation-fill-mode : sugar('settings.animate-css.fill-mode');
+		animation-timing-function : sugar('settings.animate-css.ease');
+	}
+	@each $anim in $sugar-animatecss {
+		.#{$anim} {
+			@extend %animatecss-animated;
+			@extend %#{$anim} !optional;
+		}
+	}
+
+	// transitions
+	@if $packages == null or index($package, transitions) {
+		$transitions : sugar('settings.transitions');
+		@each $name, $transition in $transitions {
+			@if type-of($transition) == map {
+				$t : map-get($transition, transition);
+				$classes : map-get($transition, classes);
+				@if $classes {
+					.t-#{$name} {
+						@include s-transition($name);
+					}
+				}
+			}
+		}
+	}
+
+	// colors
+	@if $packages == null or index($package, colors) {
+		$colors : sugar('settings.colors');
+		$classes-color : sugar('settings.colors.classes.color');
+		$classes-color-mod : sugar('settings.colors.classes.color-modifier');
+		$classes-bkg : sugar('settings.colors.classes.bkg');
+		$classes-bkg-mod : sugar('settings.colors.classes.bkg-modifier');
+		@each $name, $color in $colors {
+			$modifiers : ();
+			@if type-of($color) == map {
+				$c : map-get($color, color);
+				$modifiers : map-get($color, modifiers);
+				$classes : map-get($color, classes);
+				@if $classes {
+					@if $classes == true or in-list($classes, color c) {
+						$cls : str-replace($classes-color, '{color}', #{$name});
+						#{unquote(".#{$cls}")} {
+							color : $c;
+						}
+					}
+					@if $classes == true or in-list($classes, background-color background bkg) {
+						$cls : str-replace($classes-bkg, '{color}', #{$name});
+						#{unquote(".#{$cls}")} {
+							background-color : $c;
+						}
+					}
+					// modifiers
+					@if $modifiers {
+						@each $mod-name, $mod in $modifiers {
+							@if $classes == true or in-list($classes, color c) {
+								$cls : str-replace($classes-color-mod, '{color}', #{$name});
+								$cls : str-replace($cls, '{modifier}', #{$mod-name});
+								#{unquote(".#{$cls}")} {
+									color : s-color($name, $mod-name);
+								}
+							}
+							@if $classes == true or in-list($classes, background-color background bkg) {
+								$cls : str-replace($classes-bkg-mod, '{color}', #{$name});
+								$cls : str-replace($cls, '{modifier}', #{$mod-name});
+								#{unquote(".#{$cls}")} {
+									background-color : s-color($name, $mod-name);
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+
+	// filters
+	@if $packages == null or index($package, filters) {
+		$filters : sugar('settings.filters');
+		@each $name, $filter in $filters {
+			@if type-of($filter) == map {
+				$f : map-get($filter, filter);
+				$classes : map-get($filter, classes);
+				@if $classes {
+					.f-#{$name} {
+						@include s-filter($f);
+					}
+				}
+			}
+		}
+	}
+
+	// sizes
+	@if $packages == null or index($package, sizes) {
+		$sizes : sugar('settings.sizes');
+		@each $name, $size in $sizes {
+			@if type-of($size) == map {
+				$s : map-get($size, size);
+				$classes : map-get($size, classes);
+				@if $classes {
+
+					// margins
+					@if $classes == true or in-list($classes, margin m margin-bottom m-b) {
+						.m-b-#{$name} {
+							margin-bottom : s-size($name);
+						}
+					}
+					@if $classes == true or in-list($classes, margin m margin-top m-t) {
+						.m-t-#{$name} {
+							margin-top : s-size($name);
+						}
+					}
+					@if $classes == true or in-list($classes, margin m margin-left m-l) {
+						.m-l-#{$name} {
+							margin-left : s-size($name);
+						}
+					}
+					@if $classes == true or in-list($classes, margin m margin-right m-r) {
+						.m-r-#{$name} {
+							margin-right : s-size($name);
+						}
+					}
+					@if $classes == true or in-list($classes, margin m margin-side m-s) {
+						.m-s-#{$name} {
+							margin-left : s-size($name);
+							margin-right : s-size($name);
+						}
+					}
+
+					// paddings
+					@if $classes == true or in-list($classes, padding p padding-bottom p-b) {
+						.p-b-#{$name} {
+							padding-bottom : s-size($name);
+						}
+					}
+					@if $classes == true or in-list($classes, padding p padding-top p-t) {
+						.p-t-#{$name} {
+							padding-top : s-size($name);
+						}
+					}
+					@if $classes == true or in-list($classes, padding p padding-left p-l) {
+						.p-l-#{$name} {
+							padding-left : s-size($name);
+						}
+					}
+					@if $classes == true or in-list($classes, padding p padding-right p-r) {
+						.p-r-#{$name} {
+							padding-right : s-size($name);
+						}
+					}
+					@if $classes == true or in-list($classes, padding p padding-side p-s) {
+						.p-s-#{$name} {
+							padding-left : s-size($name);
+							padding-right : s-size($name);
+						}
+					}
+				}
+			}
+		}
+	}
+}
+
+//
+// Setup
+//
+@mixin s-setup(
+	$settings
+) {
+	$_sugar-settings : map-extend($_sugar-settings, $settings, true) !global;
+}
+
+//
+// Init
+//
+$_sugar-inited : false;
+@mixin s-init() {
+
+	// do that only if not already inited
+	@if not $_sugar-inited {
+
+		// update inited status
+		$_sugar-inited : true !global;
+
+		// reset
+		@if sugar('settings.reset') == true {
+			@include sugar-reset();
+		}
+
+		// border box
+		@if sugar('settings.border-box') == true {
+			* {
+				-webkit-box-sizing: border-box;
+				-moz-box-sizing: border-box;
+				box-sizing: border-box;
+			}
+		}
+		
+		// font
+		html {
+			$base-font-size : sugar('settings.typo.font-size');
+			$base-font-sizes : sugar('settings.typo.font-sizes');
+			font-size: $base-font-size;
+			@if type-of($base-font-sizes) == map {
+				@each $size, $media in $base-font-sizes {
+					@include s-media($media) {
+						font-size: $size;
+					}
+				} 
+			}
+			$font-family : sugar('settings.typo.font-family');
+			@if $font-family {
+				font-family: $font-family;
+			}
+		}
+
+
+		// font faces
+		$fonts : sugar('settings.fonts');
+		@each $font-name, $font in $fonts {
+			$font-face : map-get($font, font-face);
+			$import : map-get($font, import);
+			$font-family : map-get($font, font-family);
+			@if $font-face {
+				@if $font-family {
+					$font-face : list-prepend($font-face, $font-family);
+				} @else {
+					$font-face : list-prepend($font-face, $font-name);
+				}
+				@include s-font-face($font-face);
+			} @else if $import {
+				// @at-root {
+				// 	@import url(#{$import});
+				// }
+			}
+		}
+
+		// modular scale
+		$ms-base : sugar('settings.modular-scale.base');
+		$ms-ratio : sugar('settings.modular-scale.ratio');
+		$ms-range : sugar('settings.modular-scale.range');
+		$ms-fluid : sugar('settings.modular-scale.fluid');
+
+		// font-awesome
+		$font-awesome : sugar('settings.font-awesome');
+		@if $font-awesome {
+			$font-path : sugar('settings.font-awesome.font-path');
+			$font-version : sugar('settings.font-awesome.version');
+			@include s-font-face(
+				"FontAwesome"
+				"#{$font-path}/fontawesome-webfont.eot"
+				normal
+				normal
+				-ext eot ttf woff woff2 svg);
+		}
+	}
+}
+
+//
+// Register helper class
+//
+$_sugar-classes : () !default;
+@mixin s-register-class(
+	$class
+) {
+	$class : _sugar-parse-properties($class, (
+		name : string,
+		namespace : string
+	), (
+		name : n,
+		namespace : ns
+	));
+	$name : map-get($class, name);
+	$namespace : map-get($class, namespace);
+
+	// protect
+	@if not $name {
+		@error('s-register-class need a name');
+	}
+	@if not $namespace {
+		@error('s-register-class need a namespace');
+	}
+
+	// register the class
+	$split : _split($namespace, '.');
+	$_sugar-classes : _set($_sugar-classes, $split, $name) !global;
+	%#{$name} {
+		@content;
+	}
+}
+
+//
+// Helper classes
+//
+@import 'helper-classes';