sugarcss 1.0.0

data/stylesheets/sugar/_helper-mixins.scss

@@ -0,0 +1,383 @@
+//
+// Some helpers mixins
+//
+
+//
+// Position
+//
+@mixin s-position(
+	$position
+) {
+	// get map
+	$map : s-position($position, $_handle-nested : true);
+
+	// get map
+	@each $prop, $value in $map {
+		#{$prop} : $value;
+	}
+
+	// handle nested
+	@include _sugar-handle-nested(position) {
+		@content;
+	}
+}
+@function s-position(
+	$position,
+	$_handle-nested : false
+) {
+	$position : _sugar-parse-properties($position, (
+		position : fixed relative absolute,
+		vertical-align : top middle bottom,
+		align : left center right,
+		top : number,
+		right : number,
+		bottom : number,
+		left : number,
+		z : number
+	), (
+		position : p,
+		top : t y,
+		right : r,
+		bottom : b,
+		left : l x
+	));
+
+	$return : ();
+
+	// handle nested
+	@if $_handle-nested {
+		$position : _sugar-handle-nested(position, $position);
+	}
+
+	// get values
+	$pos : map-get-or($position, position, absolute);
+	$top : map-get($position, top);
+	$right : map-get($position, right);
+	$bottom : map-get($position, bottom);
+	$left : map-get($position, left);
+	$z : map-get($position, z);
+	$vertical-align : map-get($position, vertical-align);
+	$align : map-get($position, align);
+
+	@if $pos {
+		$return : map-set($return, position, $pos);
+	}
+	@if $z {
+		$return : map-set($return, transform, translateZ($z));
+	}
+	@if $vertical-align or $align {
+		// top
+		@if $vertical-align == top {
+			$return : map-set($return, top, 0);
+			@if $align == left {
+				$return : map-set($return, left, 0);
+			} @else if $align == center {
+				$return : map-set($return, left, 50%);
+				$return : map-merge($return, s-translate(-50% 0));
+			} @else if $align == right {
+				$return : map-set($return, right, 0);
+			} @else {
+				$return : map-set($return, left, 0);
+			}
+		} @else if $vertical-align == middle {
+			$return : map-set($return, top, 50%);
+			@if $align == left {
+				$return : map-set($return, left, 0);
+				$return : map-merge($return, s-translate(0 -50%));
+			} @else if $align == center {
+				$return : map-set($return, left, 50%);
+				$return : map-merge($return, s-translate(-50% -50%));
+			} @else if $align == right {
+				$return : map-set($return, right, 0);
+				$return : map-merge($return, s-translate(0 -50%));
+			} @else {
+				$return : map-merge($return, s-translate(-50% 0));
+			}
+		} @else if $vertical-align == bottom {
+			$return : map-set($return, bottom, 0);
+			@if $align == left {
+				$return : map-set($return, left, 0);
+			} @else if $align == center {
+				$return : map-set($return, left, 50%);
+				$return : map-merge($return, s-translate(-50% 0));
+			} @else if $align == right {
+				$return : map-set($return, right, 0);
+			} @else {
+				$return : map-set($return, left, 0);
+			}
+		} @else if $align == left {
+			$return : map-set($return, left, 0);
+			@if $vertical-align == top {
+				$return : map-set($return, top, 0);
+			} @else if $vertical-align == middle {
+				$return : map-set($return, top, 50%);
+				$return : map-merge($return, s-translate(0 -50%));
+			} @else if $vertical-align == bottom {
+				$return : map-set($return, bottom, 0);
+			} @else {
+				$return : map-set($return, top, 0);
+			}
+		} @else if $align == center {
+			$return : map-set($return, left, 50%);
+			@if $vertical-align == top {
+				$return : map-set($return, top, 0);
+				$return : map-merge($return, s-translate(-50% 0));
+			} @else if $vertical-align == middle {
+				$return : map-set($return, top, 50%);
+				$return : map-merge($return, s-translate(-50% -50%));
+			} @else if $vertical-align == bottom {
+				$return : map-set($return, bottom, 0);
+				$return : map-merge($return, s-translate(-50% 0));
+			} @else {
+				$return : map-set($return, top, 0);
+			}
+		} @else if $align == right {
+			$return : map-set($return, right, 0);
+			@if $vertical-align == top {
+				$return : map-set($return, top, 0);
+			} @else if $vertical-align == middle {
+				$return : map-set($return, top, 50%);
+				$return : map-merge($return, s-translate(0 -50%));
+			} @else if $vertical-align == bottom {
+				$return : map-set($return, bottom, 0);
+			} @else {
+				$return : map-set($return, top, 0);
+			}
+		}
+	}
+	@if $top {
+		$return : map-set($return, top, $top);
+	}
+	@if $right {
+		$return : map-set($return, right, $right);
+	}
+	@if $bottom {
+		$return : map-set($return, bottom, $bottom);
+	}
+	@if $left {
+		$return : map-set($return, left, $left);
+	}
+
+	// return map
+	@return $return;
+}
+
+//
+// Translate
+//
+@mixin s-translate(
+	$translate
+) {
+	// get the translate props
+	$translate : s-translate($translate, $_handle-nested : true);
+
+	// get map
+	@each $prop, $value in $translate {
+		#{$prop} : $value;
+	}
+
+	// handle nested
+	@include _sugar-handle-nested(translate) {
+		@content;
+	}
+}
+@function s-translate(
+	$translate,
+	$_handle-nested : false
+) {
+	$translate : _sugar-parse-properties($translate, (
+		x : number,
+		y : number,
+		z : number
+	));
+	
+	// handle nested
+	@if $_handle-nested {
+		$translate : _sugar-handle-nested(translate, $translate);
+	}
+
+	// get values
+	$x : map-get($translate, x);
+	$y : map-get($translate, y);
+	$z : map-get($translate, z);
+
+	// build translate
+	$translates : ();
+	@if $x {
+		$translates : append($translates, translateX($x));
+	}
+	@if $y {
+		$translates : append($translates, translateY($y));
+	}
+	@if $z {
+		$translates : append($translates, translateZ($z));
+	}
+
+	// return translate
+	@return (
+		transform : $translates
+	);
+}
+
+//
+// Transform
+//
+@mixin s-transform(
+	$transform
+) {
+	// get the translate props
+	$transform : s-transform($transform, $_handle-nested : true);
+
+	// get map
+	@each $prop, $value in $transform {
+		#{$prop} : $value;
+	}
+
+	// handle nested transforms
+	@include _sugar-handle-nested(transform) {
+		@content;
+	}
+}
+@function s-transform(
+	$transform,
+	$_handle-nested : false
+) {
+	// parse properties
+	$transform : _sugar-parse-properties($transform, null);
+
+	// handle nested transforms
+	@if $_handle-nested {
+		$transform : _sugar-handle-nested(transform, $transform);
+	}
+
+	// build transform
+	$transforms : ();
+	@each $name, $value in $transform {
+		$values : ();
+		@each $val in $value {
+			$values : append($values, $val, comma);
+		}
+		$transforms : append($transforms, unquote("#{$name}(#{$values})"));
+	}
+	// return
+	@return (
+		transform : $transforms
+	);
+}
+
+//
+// Ratio
+//
+@mixin s-ratio(
+	$ratio
+) {
+	$ratio : _sugar-parse-properties($ratio, (
+		type : before after,
+		ratio : number
+	), (
+		type : t,
+		ratio : r
+	));
+	$rat : map-get($ratio, ratio);
+	$type : map-get-or($ratio, type, before);
+	position: relative;
+	overflow: hidden;
+	&:#{$type} {
+		content:'';
+		display: block;
+		height: 0;
+		padding-top: percentage(1 / $rat);
+	}
+}
+
+//
+// Fit
+// Make an element 100% width and height
+//
+@mixin _s-fit() {
+	width: 100%;
+	height: 100%;
+}
+%s-fit { @include _s-fit(); }
+@mixin s-fit() { @include _s-fit(); }
+
+//
+// Size
+//
+@mixin s-size(
+	$size
+) {
+	$size : _sugar-parse-properties($size, (
+		position : absolute relative,
+		size : cover contain,
+		width : number,
+		height : number
+	), (
+		position : p,
+		size : s
+	));
+
+	// handle nested
+	$size : _sugar-handle-nested(size, $size);
+
+	// get values
+	$width : map-get($size, width);
+	$height : map-get($size, height);
+	$s : map-get($size, size);
+	$p : map-get-or($size, position, absolute);
+
+	// apply values
+	@if $s {
+		position: $p;
+		top: 50%;
+		left: 50%;
+		transform: translateX(-50%) translateY(-50%);
+		@if $s == cover {
+			min-width: 100%;
+			min-height: 100%;
+		} @else if $s == contain {
+			max-width:100%;
+			max-height:100%;
+		}
+	} @else {
+		@if $width {
+			width : $width;
+		}
+		@if $height {
+			height : $height;
+		}
+	}
+
+	// handle nested
+	@include _sugar-handle-nested(size) {
+		@content;
+	}
+}
+
+//
+// Selection
+//
+@mixin s-selection {
+	::-moz-selection { @content; }
+	::selection { @content; }
+}
+
+//
+// Visually hidden
+//
+@mixin _s-visually-hidden {
+	margin: -1px;
+	padding: 0;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+	clip: rect(0 0 0 0);
+	clip: rect(0, 0, 0, 0);
+	position: absolute;
+}
+%s-visually-hidden {
+	@include _s-visually-hidden();
+}
+@mixin s-visually-hidden() {
+	@include _s-visually-hidden();
+}

data/stylesheets/sugar/_icons.scss

@@ -0,0 +1,21 @@
+//
+// Icons specific
+//
+@mixin s-icon(
+	$icon
+) {
+	$icon : _sugar-parse-properties($icon, (
+		name : string
+	), (
+		name : n
+	));
+	$name : map-get($icon, name);
+	
+	// if font-awesome
+	@if str-slice($name,1,3) == 'fa-' {
+		@extend %fa;
+		@extend %#{$name} !optional;
+	} @else {
+
+	}
+}

data/stylesheets/sugar/_images.scss

@@ -0,0 +1,150 @@
+//
+// Images specific
+//
+
+//
+// Image rendering
+//
+@mixin s-image-rendering (
+	$mode:auto
+) {
+	@if ($mode == crisp-edges) {
+		-ms-interpolation-mode: nearest-neighbor; // IE8+
+		image-rendering: -moz-crisp-edges;
+		image-rendering: -o-crisp-edges;
+		image-rendering: -webkit-optimize-contrast;
+		image-rendering: crisp-edges;
+	}
+	@else {
+		image-rendering: $mode;
+	}
+}
+
+//
+// Background
+//
+@mixin s-background(
+	$background
+) {
+	$background : _sugar-parse-properties($background, (
+		repeat : repeat repeat-x repeat-y no-repeat,
+		size : auto length cover contain initial inherit,
+		attachment : scroll fixed local initial inherit,
+		blend-mode : normal multiply screen overlay darken lighten color-dodge saturation color luminosity,
+		clip : border-box padding-box content-box initial inherit,
+		origin : padding-box border-box content-box initial inherit,
+		url : string,
+		width : number,
+		height : number,
+		top : number,
+		left : number,
+		x2 : string,
+		x3 : string,
+		x4 : string,
+		position : true
+	), (
+		repeat : r,
+		size : s,
+		blend-mode : bm,
+		origin : o,
+		url : u,
+		position : p,
+		attachment : att,
+		clip : cl
+	));
+	$background : _sugar-handle-nested(background, $background);
+
+	// get values
+	$repeat : map-get($background, repeat);
+	$size : map-get($background, size);
+	$attachment : map-get($background, attachment);
+	$blend-mode : map-get($background, blend-mode);
+	$clip : map-get($background, clip);
+	$origin : map-get($background, origin);
+	$url : map-get($background, url);
+	$top : map-get($background, top);
+	$left : map-get($background, left);
+	$width : map-get($background, width);
+	$height : map-get($background, height);
+	$_2x : map-get-or($background, x2);
+	@if $_2x == true { $_2x : '@2x'; }
+	$_3x : map-get-or($background, x3);
+	@if $_3x == true { $_3x : '@3x'; }
+	$_4x : map-get-or($background, x4);
+	@if $_4x == true { $_4x : '@4x'; }
+
+	$position : map-get($background, position);
+
+	// build background
+	$back : ();
+	@if $repeat {
+		background-repeat: $repeat;
+	}
+	@if $size {
+		background-size: $size;
+	} @else {
+		@if $height and $width == null {
+			background-size: 0 $height;
+		} @else if $height == null and $width {
+			background-size: $width 0;
+		} @else if $height and $width {
+			background-size: $width $height
+		}
+	}
+	@if $url {
+		background-image: url("#{$url}");
+	}
+	@if $position {
+		background-position: $position;
+	} @else {
+		@if $top and $left == null {
+			background-position: 0 $top;
+		} @else if $top == null and $left {
+			background-position: $left 0;
+		} @else if $top and $left {
+			background-position: $left $top
+		}
+	}
+
+	// resolutions
+	$split : _split($url,'.');
+	$name : nth($split, length($split)-1);
+	@if $_2x and $url {
+		$split : set-nth($split, length($split)-1, #{$name}#{$_2x});
+		$url : _join($split, '.');
+		@include s-media(2x) {
+			background-image: url("#{$url}");
+		}
+	}
+	@if $_3x and $url {
+		$split : set-nth($split, length($split)-1, #{$name}#{$_3x});
+		$url : _join($split, '.');
+		@include s-media(3x) {
+			background-image: url("#{$url}");
+		}
+	}
+	@if $_4x and $url {
+		$split : set-nth($split, length($split)-1, #{$name}#{$_4x});
+		$url : _join($split, '.');
+		@include s-media(4x) {
+			background-image: url("#{$url}");
+		}
+	}
+	@if $attachment {
+		background-attachment : $attachment;
+	}
+	@if $blend-mode {
+		background-blend-mode : $blend-mode;
+	}
+	@if $clip {
+		background-clip : $clip;
+	}
+	@if $origin {
+		background-origin : $origin;
+	}
+
+	// handle nested
+	@include _sugar-handle-nested(background) {
+		@content;
+	}
+}

data/stylesheets/sugar/_lists.scss

@@ -0,0 +1,148 @@
+//
+// Lists specific
+//
+$s-list-props : (
+	style-type : circle disc square armenian cjk-ideographic decimal decimal-leading-zero georgian hebrew hiragana hiragana-iroha katakana katakana-iroha lower-alpha lower-greek lower-latin lower-roman upper-alpha upper-latin upper-roman none inherit,
+	style-image : url,
+	style-icon : string,
+	bullet-color : color,
+	bullet-size : true,
+	bullet-offset : true,
+	bullet-font : true,
+	padding-left : number
+);
+$s-list-alias : (
+	style-type : type t,
+	style-image : image img,
+	style-icon : icon i,
+	bullet-color : bc,
+	bullet-size : bs,
+	bullet-offset : bo,
+	padding-left : pl
+);
+@mixin s-list(
+	$_list : ()
+) {
+	$list : _sugar-parse-properties($_list, (
+		counter-reset : true
+	));
+
+	// handle nested
+	$list : _sugar-handle-nested(s-list, $list);
+
+	$reset : map-get-or($list, counter-reset, s-list);
+
+	counter-reset : $reset;
+
+	// handle nested
+	@include _sugar-handle-nested(s-list) {
+		@content;
+	}
+}
+
+//
+// List item
+//
+@mixin s-list-item(
+	$list
+) {
+	$list : _sugar-parse-properties($list, $s-list-props, $s-list-alias);
+
+	// handle nested
+	@if not map-get($list, hover) {
+		$list : _sugar-handle-nested(s-list-item, $list);
+	}
+
+	$style-type : map-get($list, style-type);
+	$style-image : map-get($list, style-image);
+	$style-icon : map-get($list, style-icon);
+	$bullet-color : map-get($list, bullet-color);
+	$bullet-size : map-get($list, bullet-size);
+	$bullet-offset : map-get($list, bullet-offset);
+	$bullet-font : map-get($list, bullet-font);
+	$padding-left : map-get-or($list, padding-left, null);
+
+	// padding
+	@if $padding-left {
+		padding-left: s-rem($padding-left);
+	}
+
+	// style type
+	@if $style-type {
+		&:before {
+			content: counter(s-list, $style-type);
+			counter-increment: s-list;
+		}
+	}
+
+	&:before {
+		@if $bullet-offset {
+			$left : 0;
+			$top : 0;
+			@if length($bullet-offset) == 2 {
+				$left : nth($bullet-offset,2);
+				$top : nth($bullet-offset,1);
+			} @else if type-of($bullet-offset) == number {
+				$top : $bullet-offset;
+			}
+			left : s-rem($left);
+			top : s-rem($top);
+		} @else {
+			left : 0;
+		}
+		@if $bullet-color {
+			color : $bullet-color;
+		}
+		@if $bullet-size {
+			@if type-of($bullet-size) == list and length($bullet-size) == 2 {
+				width : nth($bullet-size,1) nth($bullet-size,2);
+			} @else if type-of($bullet-size) == number {
+				font-size: s-rem($bullet-size);
+			}
+		}
+		@if $bullet-font {
+			@include s-font($bullet-font);
+		}
+	}
+
+	// before
+	position: relative;
+	&:before {
+		position: absolute;
+		display: block;
+	}
+
+	// style image
+	@if $style-image {
+		position: relative;
+		&:before {
+			content:'';
+			display: block;
+			width: 1ex; height:1em;
+			background-image: url($style-image);
+			background-repeat: no-repeat;
+			background-size: 100% 100%;
+			background-position: 50% 50%;
+		}
+	
+	} @else if $style-icon {
+		position: relative;
+		&:before {
+			@include s-icon($style-icon);
+		}
+		
+	}
+
+	// reset margin-left for nested lists
+	> ul,
+	> ol,
+	> dl, {
+		margin-left: 0;
+		margin-bottom: 0;
+	}
+
+	// handle nested
+	@include _sugar-handle-nested(s-list-item) {
+		@content;
+	}
+}