sugarcss 1.0.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 220bcd022e2669fd6fa2320cbe981ecde8c2ca0b
+  data.tar.gz: 90bf37b0cb2ec6ccc7ee0113f05f14ff849da8a1
+SHA512:
+  metadata.gz: 270ae90502032d0fe2322e11b5d65a37dc9cad4b89cbcfa98e3c0e1ef87f90ffd9f6c1048ee55904f3be377a21c506017b1167aa17f5c3ed110d77aef95dbcbb
+  data.tar.gz: 108deebf4c8bccbeb1583dff2e470d9b1e3e8e054dc045c4f13d9ca42c601c7ee3c67331c2ec7d2736fed0c15d402e4e8e1076c207ec1041603bb8e3116f4def

data/lib/sugarcss.rb

@@ -0,0 +1,30 @@
+# All gems that are required for this extension to work should go here.
+# These are the requires you would normally put in your config.rb file
+# By default, you should always included Compass. Do not include your
+#  extension.
+require 'compass'
+
+# This tells Compass what your Compass extension is called, and where to find
+#  its files
+# Replace 'extension' with the name of your extension. Spaces allowed.
+extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
+Compass::Frameworks.register('sugarcss', :path => extension_path)
+
+# Version and date of version for your Compass extension.
+# Replace Extension with the name of your extension
+#  Letters, numbers, and underscores only
+#  Version is a number. If a version contains alphas, it will be created as
+#    a prerelease version
+#  Date is in the form of YYYY-MM-DD
+module Extension
+  VERSION = "1.0.0"
+  DATE = "2015-11-19"
+end
+
+# This is where any custom SassScript should be placed. The functions will be  
+#  available on require of your extension without the need for users to import
+#  any partials. Uncomment below.
+
+# module Sass::Script::Functions
+# 
+# end

data/stylesheets/_sugar.scss

@@ -0,0 +1,4 @@
+/**
+ * Imports :
+ */
+@import 'sugar/sugar';

data/stylesheets/sugar/_BEM.scss

@@ -0,0 +1,101 @@
+//
+// BEM specific
+//
+
+//
+// Block
+//
+@mixin s-Bem(
+	$bem
+) {
+	$bem : _sugar-parse-properties($bem, (
+		name : string,
+		extend : true
+	));
+	$name : map-get($bem, name);
+	$extend : map-get($bem, extend);
+
+	@at-root {
+		.#{$name} {
+			@if $extend {
+				@each $ext in $extend {
+					@extend .#{$ext} !optional;
+				}
+			}
+			@content;
+		}
+	}
+}
+
+//
+// Block element
+//
+@mixin s-bEm(
+	$bem
+) {
+	$bem : _sugar-parse-properties($bem, (
+		name : string,
+		extend : true,
+		root : true
+	), (
+		name : n,
+		extend : e,
+		root : r
+	));
+	$name : map-get($bem, name);
+	$extend : map-get($bem, extend);
+	$root : map-get-or($bem, root, false);
+
+	$separator : sugar('settings.BEM.element-separator');
+	$this : #{&};
+	@if $root {
+		$this : '.';
+		$separator : '';
+	}
+	@at-root {
+		#{$this}#{$separator}#{$name} {
+			@if $extend {
+				@each $ext in $extend {
+					@extend #{$this}#{$separator}#{$ext} !optional;
+				}
+			}
+ 			@content;
+		}
+	}
+}
+
+//
+// Block modifier
+//
+@mixin s-beM(
+	$bem
+) {
+	$bem : _sugar-parse-properties($bem, (
+		name : string,
+		extend : true,
+		standelone : true
+	), (
+		name : n,
+		extend : e,
+		standelone : s
+	));
+	$name : map-get($bem, name);
+	$extend : map-get($bem, extend);
+	$standelone : map-get-or($bem, standelone, sugar('settings.BEM.standelone'));
+
+	$separator : sugar('settings.BEM.modifier-separator');
+	$this : #{&};
+	@at-root {
+		#{$this}#{$separator}#{$name} {
+			@if $extend {
+				@each $ext in $extend {
+					@extend #{$this}#{$separator}#{$ext} !optional;
+				}
+			}
+			@if $standelone {
+				@extend #{$this} !optional;
+			}
+			@content;
+		}
+	}
+}

data/stylesheets/sugar/_animations.scss

@@ -0,0 +1,101 @@
+//
+// Animations specific
+//
+
+//
+// Animate mixin
+//
+@mixin s-animation(
+	$animations...
+) {
+	// loop on animations
+	$anims : ();
+	$current_delay : 0;
+	$current_duration : 0;
+	$previous_duration : 0;
+	@each $animation in $animations {
+		$animation : _sugar-parse-properties($animation, (
+			name : string,
+			duration : number,
+			delay : number,
+			ease : string,
+			iteration : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 infinite initial inherit,
+			direction : normal reverse alternate alternate-reverse initial inherit,
+			fill-mode : none forwards backwards both initial inherit,
+			parallel : true
+		), (
+			name : n,
+			duration : du,
+			delay : de,
+			ease : e,
+			iteration : i iteration-count,
+			direction : di,
+			fill-mode : fm,
+			parallel : p
+		));
+		$name : map-get-or($animation, name);
+		$duration : map-get-or($animation, duration, 1s);
+		$delay : map-get-or($animation, delay, 0s);
+		$ease : map-get-or($animation, ease, ease-in-out);
+		$iteration : map-get-or($animation, iteration, 1);
+		$direction : map-get-or($animation, direction, normal);
+		$fill-mode : map-get-or($animation, fill-mode, forwards);
+		$parallel : map-get-or($animation, parallel, false);
+		
+		// update delay
+		$current_delay : $current_delay + $delay;
+
+		// extend the animation if exist
+		@extend %#{$name} !optional;
+		
+		// create the animations list	
+		$anims : append($anims, $name $duration $current_delay $ease $iteration $direction $fill-mode, comma);
+		
+		// manage if animation is parallel with next one
+		@if type-of($iteration) == number {
+			@if $parallel == false {
+				$current_delay : $current_delay + $duration * $iteration;
+			}
+		}
+	}
+	
+	// set animation
+	animation: $anims;
+}
+
+//
+// Transition
+//
+@mixin s-transition(
+	$transition : null
+) {
+	@if not $transition {
+		$transition : ();
+	}
+	&,
+	&:before,
+	&:after {
+		// check if a transition exist in settings
+		$transitions : sugar('settings.transition.transitions');
+		@if type-of($transition) == string and map-get($transitions, $transition) {
+			$t : map-get($transitions, $transition);
+			@if type-of($t) == map {
+				transition : map-get($t, transition);
+			} @else {
+				transition : $transition;
+			}
+		} @else {
+			$tran : _sugar-parse-properties($transition, (
+				property : string,
+				duration : number,
+				ease : string,
+				delay : number
+			));
+			$property : map-get-or($tran, property, sugar('settings.transition.property'));
+			$duration : map-get-or($tran, duration, sugar('settings.transition.duration'));
+			$delay : map-get-or($tran, delay, sugar('settings.transition.delay'));
+			$ease : map-get-or($tran, ease, sugar('settings.transition.ease'));
+			transition: $property $duration $ease $delay;
+		}
+	}
+}

data/stylesheets/sugar/_clearfix.scss

@@ -0,0 +1,56 @@
+/* # CLEARFIX
+	More infos to come..
+	
+	https://github.com/stubbornella/oocss/blob/master/oocss/src/components/utils/_clearfix-me.scss
+	
+	clearfix   used project wide to clear floats and create a new formatting context
+	
+	usage      @include clearfix-me(<empty|overflow|facebook|micro|stubborn>)
+	
+	$clearfix-method sets default method
+*/
+
+// set default clearfix method to overflow
+$clearfix-method: overflow !default;
+// can be one of: overflow,facebook,micro,stubborn
+
+// create stub classes for each of the four clearfix methods
+
+%clearfix-overflow {
+	overflow: hidden;
+}
+
+%clearfix-facebook {
+	display: table-cell;
+	vertical-align: top;
+	width: 10000px !important;
+}
+
+%clearfix-float {
+	float: left;
+	width: 100%;
+}
+
+%clearfix-micro {
+	zoom: 1;
+	&:before,
+	&:after {
+		content: " ";
+		display: table;
+	}
+	&:after {
+		clear: both;
+	}
+}
+
+// extends so the output will be smaller
+
+@mixin s-clearfix($method: $clearfix-method) {
+	@if $method != overflow and $method != facebook and $method != micro and $method != float {
+		@warn "The clearfix method #{$method} is unkown";
+		@include s-clearfix(micro);
+	} 
+	@else {
+		@extend %clearfix-#{$method};
+	}
+}

data/stylesheets/sugar/_colors.scss

@@ -0,0 +1,126 @@
+//
+// Colors management
+//
+
+//
+// Color function
+//
+@function s-color(
+	$name,
+	$actions : null
+) {
+	// grab the colors
+	$colors : sugar('settings.colors');
+	$color : map-get($colors, $name);
+	$modifiers : null;
+
+	// check that we have the color
+	@if $color == null {
+		@if s-is($name, color) {
+			$color : $name;
+		} @else {
+			@error('The color "#{$name}" does not exist...');
+		}
+	}
+
+	// check if is a map
+	@if type-of($color) == map {
+		$modifiers : map-get($color, modifiers);
+		$color : map-get($color, color);
+	}
+	
+	// check if action is a string to check if is a modifier
+	@if type-of($actions) == string and $modifiers and map-get($modifiers, $actions) {
+		$mod : map-get($modifiers, $actions);
+		@if type-of($mod) == color {
+			$color : $mod;
+			$actions : null;
+		} @else {
+			$actions : $mod;
+		}
+	}
+
+	// check action to do
+	@if $actions {
+		// parse action
+		$actions-map : _sugar-parse-properties($actions, (
+			hue : number,
+			lighten : number,
+			darken : number,
+			grayscale : true,
+			complement : true,
+			invert : true,
+			saturate : number,
+			desaturate : number,
+			opacity : number,
+			mix : color
+		), (
+			hue : h,
+			lighten : li,
+			darken : da,
+			grayscale : gr,
+			complement : comp,
+			invert : i,
+			saturate : sa,
+			desaturate : desa,
+			opacity : o,
+			mix : m
+		));
+		// loop on each action to process to keep order
+		@each $action, $value in $actions-map {
+			// hue
+			@if $action == hue and type-of($value) == number {
+				$color : adjust-hue($color, $value);
+			}
+			// lighten
+			@if $action == lighten and type-of($value) == number {
+				$color : lighten($color, $value);
+			}
+			// darken
+			@if $action == darken and type-of($value) == number {
+				$color : darken($color, $value);
+			}
+			// saturate
+			@if $action == saturate and type-of($value) == number {
+				$color : saturate($color, $value);
+			}
+			// desaturate
+			@if $action == desaturate and type-of($value) == number {
+				$color : desaturate($color, $value);
+			}
+			// grayscale
+			@if $action == grayscale and $value == true {
+				$color : grayscale($color);
+			}
+			// complement
+			@if $action == complement and $value == true {
+				$color : complement($color);
+			}
+			// invert
+			@if $action == invert and $value == true {
+				$color : invert($color);
+			}
+			// opacity
+			@if $action == opacity and type-of($value) == number {
+
+				$transparentize : 1 - s-strip-units($value);
+				@if unit($value) == '%' {
+					$transparentize : (100 - s-strip-units($value)) / 100;
+				}
+				$color : transparentize($color, $transparentize);
+			}
+			// mix
+			@if $action == mix and type-of($value) == color {
+				$color : mix($color, $value);
+			}
+		}
+	}
+	// return the color
+	@return $color;
+}
+@function s-c(
+	$name,
+	$actions : null
+) {
+	@return s-color($name, $actions);
+}

data/stylesheets/sugar/_effects.scss

@@ -0,0 +1,65 @@
+//
+// Effects specific
+//
+
+//
+// Shade
+//
+@mixin s-long-shadow(
+	$shade
+) {
+	$shade : _sugar-parse-properties($shade, (
+		color : color,
+		type : text box,
+		angle : degree,
+		depth : number,
+		fade : true,
+		blur : number,
+		blur-ratio : number
+	), (
+		color : c,
+		type : t,
+		angle : a,
+		depth : d,
+		fade : f,
+		blur : b,
+		blur-ratio : br
+	));
+
+	$shade : _sugar-handle-nested(shade, $shade);
+
+	$color : map-get($shade, color);
+	$type : map-get-or($shade, type, text);
+	$angle : map-get-or($shade, angle, 135);
+	$depth : map-get-or($shade, depth, 20);
+	$fade : map-get-or($shade, fade, false);
+	$blur : map-get-or($shade, blur, 0);
+	$blur-ratio : map-get-or($shade, blur-ratio, 0);
+
+	$angle: ($angle - 90);             
+	$x: 1.5 * cos($angle) + 0px;  
+	$y: 1.5 * sin($angle) + 0px;  
+	$darken: (lightness($color)/$depth)/2;
+	$opacify: 0; 
+	$shadow: ();  
+	          
+	$darken:0;  
+	
+	@if $fade == true {
+	  $opacify: (opacity($color)/$depth);
+	  transform: translateX(0);
+	}
+	
+	@for $i from 1 through $depth {
+		$b : $blur;
+		@if $blur-ratio > 0 {
+			$b : $blur + $i * $blur-ratio;
+		}
+		$shadow: $shadow, $i*$x $i*$y s-rem($b) hsla(hue($color) , saturation($color), (lightness($color) - ($i * $darken)), 1 - ($i * $opacify));     
+	}       
+	#{$type}-shadow: $shadow;
+
+	@include _sugar-handle-nested(shade) {
+		@content;
+	}
+}

data/stylesheets/sugar/_filters.scss

@@ -0,0 +1,67 @@
+//
+// Some filters
+//
+
+//
+// filter universal mixin
+//
+@mixin s-filter(
+	$filters...
+) {
+	@each $filter in $filters {
+		@include _s-filter($filter);
+	}
+}
+@mixin _s-filter(
+	$filter
+) {
+
+	$filters : sugar('settings.filters');
+	// cssgram
+	@if type-of($filter) == string and str-slice($filter,1,8) == 'cssgram-' {
+		$name : str-slice($filter,9);
+		@if $cssgram and type-of($cssgram) == list and index($cssgram, $name) {
+			@extend %cssgram-#{$name} !optional;
+		}
+	} @else if type-of($filter) == string and map-get($filters, $filter) {
+		// apply the registered filter
+		$filter : map-get($filters, $filter);
+		@if type-of($filter) == map {
+			$filter : map-get($filter, filter);
+		}
+		@include s-filter($filter);
+	} @else if type-of($filter) != string {
+		$filter : _sugar-parse-properties($filter, (
+			drop-shadow : true,
+			blur : true,
+			brightness : true,
+			contrast : true,
+			grayscale : true,
+			hue-rotate : true,
+			invert : true,
+			opacity : true,
+			saturate : true,
+			sepia : true,
+			url : true	
+		), (
+			drop-shadow : ds,
+			blur : bl,
+			brightness : br,
+			contrast : con,
+			grayscale : gr,
+			hue-rotate : hue,
+			invert : i,
+			opacity : o,
+			saturate : sat,
+			sepia : sep,
+			url : u
+		));
+		
+		// loop on each filters
+		$filters : ();
+		@each $name, $value in $filter {
+			$filters : append($filters, unquote("#{$name}(#{$value})"));
+		}
+		filter : $filters;
+	}
+}

data/stylesheets/sugar/_forms.scss

@@ -0,0 +1,13 @@
+//
+// Form specific mixins and functions
+//
+
+//
+// Placeholder
+//
+@mixin s-placeholder {
+	&::-webkit-input-placeholder {@content}
+	&:-moz-placeholder           {@content}
+	&::-moz-placeholder          {@content}
+	&:-ms-input-placeholder      {@content}  
+}