sugarcss 1.0.0

data/stylesheets/sugar/_medias.scss

@@ -0,0 +1,141 @@
+//
+// Media queries specific
+//
+
+//
+// Universal media mixin
+//
+$media-keywords : (
+	gecko : '.ua-gecko',
+	webkit : '.ua-webkit',
+	chrome : '.ua-chrome',
+	safari : '.ua-safari',
+	firefox : '.ua-firefox',
+	opera : '.ua-opera',
+	ie : '.ua-ie',
+	mobile : '.ua-mobile',
+	tablet : '.ua-tablet',
+	desktop : '.ua-desktop',
+	iphone : '.ua-mobile-iphone',
+	ipad : '.ua-mobile-ipad',
+	ios : '.ua-ios',
+	android : '.ua-android',
+	webos : '.ua-webos',
+	blackberry : '.ua-blackberry',
+	retina : '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 320dpi)',
+	x2 : '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 320dpi)',
+	x3 : '(-webkit-min-device-pixel-ratio: 3), (min-resolution: 480dpi)',
+	x4 : '(-webkit-min-device-pixel-ratio: 4), (min-resolution: 640dpi)'
+);
+@for $idx from 6 through 20 {
+	$media-keywords : map-set($media-keywords, 'ie#{$idx}', '.ua-ie-#{$idx}');
+}
+@mixin s-media(
+	$queries...
+) {
+	@each $querie in $queries {
+		@include _s-media($querie) {
+			@content;
+		}
+	}
+}
+@mixin _s-media(
+	$props
+) {
+	// loop through all keywords
+	$refine : ();
+	@each $prop in $props {
+		@if type-of($prop) == string and str-slice($prop,1,1) == '-' {
+			$prop : str-slice($prop,2);
+		}
+		$sel : map-get($media-keywords, $prop);
+		@if $sel {
+			$refine : append($refine, $sel);
+			$props : remove-nth($props, index($props, $prop));
+		}
+	}
+
+	$props : _sugar-parse-properties($props, (
+		screen : screen handheld print aural braille embossed projection tty tv all,
+		min-width : number,
+		max-width : number,
+		min-height : number,
+		max-height : number,
+		orientation : landscape portrait
+	), (
+		screen : d,
+		min-width: min-w minw,
+		max-width: max-w maxw,
+		min-height: min-h minh,
+		max-height: max-h maxh,
+		orientation : o
+	));
+
+	$screen : map-get-or($props, screen);
+	$min-width : map-get-or($props, min-width);
+	$max-width : map-get-or($props, max-width);
+	$min-height : map-get-or($props, min-height);
+	$max-height : map-get-or($props, max-height);
+	$orientation : map-get-or($props, orientation);
+
+	$media : ();
+	@if $screen {
+		$media : append($media, $screen);
+	}
+	@if $orientation {
+		$media : append($media, '(orientation : #{$orientation})');
+	}
+	@if $min-width {
+		$media : append($media, '(min-width : #{$min-width})');
+	}
+	@if $max-width {
+		$media : append($media, '(max-width : #{$max-width})');
+	}
+	@if $min-height {
+		$media : append($media, '(min-height : #{$min-height})');
+	}
+	@if $max-height {
+		$media : append($media, '(max-height : #{$max-height})');
+	}
+
+	// append media from refine
+	@each $ref in $refine {
+		@if str-slice($ref,1,1) != '.' {
+			$media : append($media, $ref);
+			$refine : remove-nth($refine, index($refine, $ref));
+		}
+	}
+
+	// construct media querie
+	$med : '';
+	$idx : 1;
+	$med_length : length($media);
+	@each $m in $media {
+		@if $idx < $med_length {
+			$med : '#{$med} #{$m} and';
+		} @else {
+			$med : '#{$med} #{$m}';
+		}
+		$idx : $idx + 1;
+	}
+
+	@if $med_length > 0 {
+		@media #{$med} {
+			@if length($refine) {
+				#{_join($refine,'')} & {
+					@content;
+				}
+			} @else {
+				@content;
+			}
+		}
+	} @else {
+		@if length($refine) {
+			#{_join($refine,'')} & {
+				@content;
+			}
+		} @else {
+			@content;
+		}
+	}
+}

data/stylesheets/sugar/_reset.scss

@@ -0,0 +1,38 @@
+//
+// Reset helper
+//
+@mixin sugar-reset() {
+	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
+	  margin: 0;
+	  padding: 0;
+	  border: 0;
+	  font-size: 100%;
+	  font: inherit;
+	  vertical-align: baseline; }
+
+	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
+	  display: block; }
+
+	body {
+	  line-height: 1; }
+
+	ol, ul {
+	  list-style: none; }
+
+	blockquote, q {
+	  quotes: none; }
+
+	blockquote {
+	  &:before, &:after {
+	    content: '';
+	    content: none; } }
+
+	q {
+	  &:before, &:after {
+	    content: '';
+	    content: none; } }
+
+	table {
+	  border-collapse: collapse;
+	  border-spacing: 0; }
+}

data/stylesheets/sugar/_shapes.scss

@@ -0,0 +1,528 @@
+//
+// Shapes helpers
+//
+
+//
+// Corner
+//
+@mixin s-corner(
+	$radius
+) {
+	@if length($radius) == 1 and type-of($radius) == number {
+		border-radius: $radius;
+		$radius : remove-nth($radius, 1);
+	}
+		
+	// parse properties
+	$props : _sugar-parse-properties($radius, (
+		top : true,
+		right : true,
+		bottom : true,
+		left : true,
+		top-left : true,
+		top-right : true,
+		bottom-left : true,
+		bottom-right : true
+	), (
+		top : t,
+		right : r,
+		bottom : b,
+		left : l,
+		top-left : tl,
+		top-right : tr,
+		bottom-left : bl,
+		bottom-right : br
+	));
+
+	// handle nested
+	$props : _sugar-handle-nested(corner, $props);
+
+	// top
+	$top : map-get-or($props, top);
+	@if $top and type-of($top) == number or type-of($top) == list {
+		border-top-left-radius: $top;
+		border-top-right-radius: $top;
+	}
+	// right
+	$right : map-get-or($props, right);
+	@if $right and type-of($right) == number or type-of($right) == list {
+		border-top-right-radius: $right;
+		border-bottom-right-radius: $right;
+	}
+	// bottom
+	$bottom : map-get-or($props, bottom);
+	@if $bottom and type-of($bottom) == number or type-of($bottom) == list {
+		border-bottom-left-radius: $bottom;
+		border-bottom-right-radius: $bottom;
+	}
+	// left
+	$left : map-get-or($props, left);
+	@if $left and type-of($left) == number or type-of($left) == list {
+		border-top-left-radius: $left;
+		border-bottom-left-radius: $left;
+	}
+	// top left
+	$top-left : map-get-or($props, top-left);
+	@if $top-left and type-of($top-left) == number or type-of($top-left) == list {
+		border-top-left-radius: $top-left;
+	}
+	// top-right
+	$top-right : map-get-or($props, top-right);
+	@if $top-right and type-of($top-right) == number or type-of($top-right) == list {
+		border-top-right-radius: $top-right;
+	}
+	// bottom-left
+	$bottom-left : map-get-or($props, bottom-left);
+	@if $bottom-left and type-of($bottom-left) == number or type-of($bottom-left) == list {
+		border-bottom-left-radius: $bottom-left;
+	}
+	// bottom-right
+	$bottom-right : map-get-or($props, bottom-right);
+	@if $bottom-right and type-of($bottom-right) == number or type-of($bottom-right) == list {
+		border-bottom-right-radius: $bottom-right;
+	}
+
+	// handle nested
+	@include _sugar-handle-nested(corner) {
+		@content;
+	}
+}
+@mixin s-border-radius($radius) {
+	@include s-corner($radius);
+}
+
+
+//
+// Round
+//
+@mixin s-round(
+	$props : null,
+	$border : null
+) {
+	@if $props {
+		$props : _sugar-parse-properties($props, (
+			width : number,
+			height : number,
+			color : color
+		));
+		$props : _sugar-handle-nested(round, $props);
+	
+		// build
+		$width : map-get-or($props, width w);
+		$height : map-get-or($props, height h, $width);
+		$color : map-get-or($props, color c);
+		width: $width;
+		height: $height;
+		@if $color {
+			background-color: $color;
+		}
+	}
+	@if $border {
+		$border : _sugar-parse-properties($border, (
+			width : number,
+			color : color,
+			style : solid dotted dashed double groove ridge inset outset initial inherit
+		), (
+			style : s
+		));
+
+		// handle nested
+		$border : _sugar-handle-nested(round-border, $border);
+		$width : map-get-or($border, width w);
+		$color : map-get-or($border, color c);
+		$style : map-get-or($border, style s, solid);
+		@if $width and $color {
+			border: $style $width $color;
+		}
+	}
+	border-radius:50%;
+	overflow: hidden;
+	> img {
+		border-radius:50%;
+		overflow: hidden;
+	}
+
+	// handle nested
+	@include _sugar-handle-nested(round, round-border) {
+		@content;
+	}
+}
+
+
+//
+// Restangle
+//
+@mixin s-rect(
+	$size
+) {
+	$size : _sugar-parse-properties($size, (
+		width : number,
+		height : number
+	));
+	$size : _sugar-handle-nested(size, $size);
+	$width : map-get($size, width);
+	$height : map-get($size, height);
+	@if type-of($width) != number or type-of($height) != number {
+		@error "To create a rectangle, you need to specify a width and an height";
+	}
+	width : $width;
+	height : $height;
+	@include _sugar-handle-nested(size) {
+		@content;
+	}
+}
+
+
+//
+// Bubble
+//
+@mixin s-bubble(
+	$base : null,
+	$border : null
+) {
+
+	$base : _sugar-parse-properties($base, (
+		side : top right bottom left,
+		align : left center right top middle bottom,
+		size : number,
+		color : color,
+		arrow-offset : number
+	), (
+		arrow-offset : ao
+	));
+	$border_map : _sugar-parse-properties($border, (
+		width : number,
+		color : color
+	));
+	$base : _sugar-handle-nested(bubble, $base);
+	$border_map : _sugar-handle-nested(bubble-border, $border_map);
+	$side : map-get-or($base, side, bottom);
+	$align : map-get-or($base, align, center);
+	$color : map-get-or($base, color, red);
+	$size : map-get-or($base, size, 10px);
+	$b-width : map-get-or($border_map, width, 0);
+	$b-color : map-get-or($border_map, color, 'none');
+	$offset : map-get-or($base, arrow-offset, 0);
+
+	// create the bubble
+	// @include s-triangle($width $height $color $direction -transform-origin base, $border_map);
+
+	@include _arrow($side, $align, $size, $color, $b-color, $b-width);
+
+	position: relative;
+	background: $color;
+	border-style : solid;
+	@if $b-width {
+		border-width : $b-width;
+	}
+	@if $b-color {
+		border-color : $b-color;
+	}
+
+	// &:after,
+	// &:before {
+	// 	position: absolute;
+	// 	@if $position == top {
+	// 		top: - $height;
+	// 		left: 50%;
+	// 		margin-left: $offset - $width * .5;
+	// 	} @else if $position == top-left {
+	// 		top: - $height;
+	// 		left: 0;
+	// 		margin-left: $offset;
+	// 	} @else if $position == top-right {
+	// 		top: - $height;
+	// 		left: 100%;
+	// 		margin-left: $offset * -1;
+	// 	} @else if $position == right {
+	// 		top: 50%;
+	// 		left: 100%;
+	// 		margin-top: $offset - $width * .5;
+	// 	} @else if $position == right-top {
+	// 		top: 0;
+	// 		left: 100%;
+	// 		margin-top: $offset;
+	// 	} @else if $position == right-bottom {
+	// 		top: 100%;
+	// 		left: 100%;
+	// 		margin-top: $offset * -1 - $width;
+	// 	} @else if $position == bottom {
+	// 		top: 100%;
+	// 		left: 50%;
+	// 		margin-left: $offset - $width * .5;
+	// 	} @else if $position == bottom-left {
+	// 		top: 100%;
+	// 		left: 0;
+	// 		margin-left: $offset;
+	// 	} @else if $position == bottom-right {
+	// 		top: 100%;
+	// 		left: 100%;
+	// 		margin-left: $offset * -1 - $width;
+	// 	} @else if $position == left {
+	// 		top: 50%;
+	// 		left: - $height;
+	// 		margin-top: $offset - $width * .5;
+	// 	} @else if $position == left-top {
+	// 		top: 0;
+	// 		left: - $height;
+	// 		margin-top: $offset;
+	// 	} @else if $position == left-bottom {
+	// 		top: 100%;
+	// 		left: - $height;
+	// 		margin-top: $offset * -1 - $width;
+	// 	}
+	// }
+	
+	@include _sugar-handle-nested(bubble, bubble-border) {
+		@content;
+	}
+}
+
+
+
+//
+// Triangle
+//
+@mixin s-triangle(
+	$triangle,
+	$border : null
+) {
+
+	$triangle : _sugar-parse-properties($triangle, (
+		width : number,
+		height : number,
+		color : color,
+		direction : top t right r bottom b left l top-left tl top-right tr bottom-left bl bottom-right br,
+		transform-origin : base center top
+	), (
+		direction : d,
+		transform-origin : to
+	));
+	@if type-of($border) != map {
+		$border : _sugar-parse-properties($border, (
+			width : number,
+			color : color
+		));
+	}
+	$triangle : _sugar-handle-nested(triangle, $triangle);
+	$border : _sugar-handle-nested(triangle-border, $border);
+
+	$direction : map-get-or($triangle, direction, top);
+	$width : map-get-or($triangle, width, 100px);
+	$height : map-get-or($triangle, height, 100px);
+	$color : map-get-or($triangle, color, red);
+	$b-width : map-get-or($border, width);
+	$b-color : map-get-or($border, color, darken(red,20%));
+	$transform-origin : map-get-or($triangle, transform-origin, center);
+
+	// swap width and height of arrow
+	@if $direction == right or $direction == left {
+		$_width : $width;
+		$width : $height;
+		$height : $_width;
+	}
+
+	display: inline-block;
+	border-style: solid;
+	-webkit-transform:rotate(360deg);
+	&:before,
+	&:after {
+		color: transparent;
+		content:'';
+		display: block;
+		position: absolute;
+		width:$width; height:$height;
+		border-style: solid;
+		top:0; left:0;
+	}
+	// top
+	@if $direction == top or $direction == t {
+		&:after {
+			border-width: 0 $width*.5 $height $width*.5;
+			border-color: transparent transparent $color transparent;
+		}
+		@if $b-width {
+			$angle : s-atan($height / ($width*.5));
+			$hyp : $height / s-sin($angle);
+			$centerX : (0 + $width + $width*.5) / 3;
+			$centerY : (0 + 0 + $height) / 3;
+			$ratio-width : $b-width * 2;
+			// @if $transform-origin == base {
+			// 	$ratio-width : $b-width;
+			// }
+			$ratio : 1 / $height * ($height + $ratio-width);
+			&:before {
+				@if $transform-origin == base {
+					transform-origin: $centerX $height;
+				} @else {
+					transform-origin: $centerX ($height - $centerY);
+				}
+				transform:scale($ratio);
+				border-width: 0 $width*.5 $height $width*.5;
+				border-color: transparent transparent $b-color transparent;	
+			}
+		}
+	} @else if $direction == right or $direction == r {
+		&:after {
+			border-width: $height*.5 0 $height*.5 $width;
+			border-color: transparent transparent transparent $color;
+		}
+		@if $b-width {
+			$angle : s-atan($width / ($height*.5));
+			$hyp : $width / s-sin($angle);
+			$centerX : (0 + 0 + $width) / 3;
+			$centerY : (0 + $height + $height*.5) / 3;
+			$ratio-width : $b-width * 2;
+			// @if $transform-origin == base {
+			// 	$ratio-width : $b-width;
+			// }
+			$ratio : 1 / $height * ($height + $ratio-width);
+			&:before {
+				@if $transform-origin == base {
+					transform-origin: 0 $centerY;
+				} @else {
+					transform-origin: ($width - $centerX) $centerY;
+				}
+				transform:scale($ratio);
+				border-width: $height*.5 0 $height*.5 $width;
+				border-color: transparent transparent transparent $b-color;
+			}
+		}
+	} @else if $direction == bottom or $direction == b {
+		&:after {
+			border-width: $height $width*.5 0 $width*.5;
+			border-color: $color transparent transparent transparent;
+		}
+		@if $b-width {
+			$angle : s-atan($height / ($width*.5));
+			$hyp : $height / s-sin($angle);
+			$centerX : (0 + $width + $width*.5) / 3;
+			$centerY : (0 + 0 + $height) / 3;
+			$ratio-width : $b-width * 2;
+			// @if $transform-origin == base {
+			// 	$ratio-width : $b-width;
+			// }
+			$ratio : 1 / $height * ($height + $ratio-width);
+			&:before {
+				@if $transform-origin == base {
+					transform-origin: $centerX 0;
+				} @else {
+					transform-origin: $centerX $centerY;
+				}
+				transform:scale($ratio);
+				border-width: $height $width*.5 0 $width*.5;
+				border-color: $b-color transparent transparent transparent;	
+			}
+		}
+	} @else if $direction == left or $direction == l {
+		&:after {
+			border-width: $height*.5 $width $height*.5 0;
+			border-color: transparent $color transparent transparent;
+		}
+		@if $b-width {
+			$angle : s-atan($width / ($height*.5));
+			$hyp : $width / s-sin($angle);
+			$centerX : (0 + 0 + $width) / 3;
+			$centerY : (0 + $height + $height*.5) / 3;
+			$ratio-width : $b-width * 2;
+			// @if $transform-origin == base {
+			// 	$ratio-width : $b-width;
+			// }
+			$ratio : 1 / $height * ($height + $ratio-width);
+			&:before {
+				@if $transform-origin == base {
+					transform-origin: $width $centerY;
+				} @else {
+					transform-origin: ($width - $centerX) $centerY;
+				}
+				transform:scale($ratio);
+				border-width: $height*.5 $width $height*.5 0;
+				border-color: transparent $b-color transparent transparent;
+			}
+		}
+	} @else if $direction == top-left or $direction == tl {
+		&:after {
+			border-width: $height $width 0 0;
+			border-color: $color transparent transparent transparent;
+		}
+		@if $b-width {
+			$centerX : (0 + $width + $width) / 3;
+			$centerY : (0 + 0 + $height) / 3;
+			$ratio-width : $b-width * 2;
+			// @if $transform-origin == base {
+			// 	$ratio-width : $b-width;
+			// }
+			$ratio : 1 / $height * ($height + $ratio-width);
+			&:before {
+				transform-origin: ($width - $centerX) $centerY;
+				transform:scale($ratio);
+				border-width: $height $width 0 0;
+				border-color: $b-color transparent transparent transparent;
+			}
+		}
+	} @else if $direction == top-right or $direction == tr {
+		&:after {
+			border-width: 0 $width $height 0;
+			border-color: transparent $color transparent transparent;
+		}
+		@if $b-width {
+			$centerX : (0 + $width + $width) / 3;
+			$centerY : (0 + 0 + $height) / 3;
+			$ratio-width : $b-width * 2;
+			// @if $transform-origin == base {
+			// 	$ratio-width : $b-width;
+			// }
+			$ratio : 1 / $height * ($height + $ratio-width);
+			&:before {
+				transform-origin: $centerX $centerY;
+				transform:scale($ratio);
+				border-width: 0 $width $height 0;
+				border-color: transparent $b-color transparent transparent;
+			}
+		}
+	} @else if $direction == bottom-left or $direction == bl {
+		&:after {
+			border-width: $height 0 0 $width;
+			border-color: transparent transparent transparent $color;
+		}
+		@if $b-width {
+			$centerX : (0 + 0 + $width) / 3;
+			$centerY : (0 + $height + $height) / 3;
+			$ratio-width : $b-width * 2;
+			// @if $transform-origin == base {
+			// 	$ratio-width : $b-width;
+			// }
+			$ratio : 1 / $height * ($height + $ratio-width);
+			&:before {
+				transform-origin: $centerX $centerY;
+				transform:scale($ratio);
+				border-width: $height 0 0 $width;
+				border-color: transparent transparent transparent $b-color;
+			}
+		}
+	} @else if $direction == bottom-right or $direction == br {
+		&:after {
+			border-width: 0 0 $height $width;
+			border-color: transparent transparent $color transparent;
+		}
+		@if $b-width {
+			$centerX : (0 + $width + $width) / 3;
+			$centerY : (0 + $height + $height) / 3;
+			$ratio-width : $b-width * 2;
+			// @if $transform-origin == base {
+			// 	$ratio-width : $b-width;
+			// }
+			$ratio : 1 / $height * ($height + $ratio-width);
+			&:before {
+				transform-origin: $centerX $centerY;
+				transform:scale($ratio);
+				border-width: 0 0 $height $width;
+				border-color: transparent transparent $b-color transparent;
+			}
+		}
+	}
+
+	@include _sugar-handle-nested(triangle, triangle-border) {
+		@content;
+	}
+}