sugarcss 1.0.0 → 1.0.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 220bcd022e2669fd6fa2320cbe981ecde8c2ca0b
-  data.tar.gz: 90bf37b0cb2ec6ccc7ee0113f05f14ff849da8a1
+  metadata.gz: 2a0d9bafb647b37300914c53cd6b1c818cadab8c
+  data.tar.gz: fe240a9dbce7dc1c99eac6275edcce94ae7d148d
 SHA512:
-  metadata.gz: 270ae90502032d0fe2322e11b5d65a37dc9cad4b89cbcfa98e3c0e1ef87f90ffd9f6c1048ee55904f3be377a21c506017b1167aa17f5c3ed110d77aef95dbcbb
-  data.tar.gz: 108deebf4c8bccbeb1583dff2e470d9b1e3e8e054dc045c4f13d9ca42c601c7ee3c67331c2ec7d2736fed0c15d402e4e8e1076c207ec1041603bb8e3116f4def
+  metadata.gz: 114ce415ff8142dc36d4623b240964031eb3597d5dce6a17aa85f75630ddbd0457b2a3e1a599a557b26aeea6295eacc961f14d53ce95b62921ce902ac56e7a58
+  data.tar.gz: 5539d4ec728cd50cdd568b39fa657650f3fc7e174141b42af650734480e715db7ea6cb60d1ec1c9728279f153fc75a5f1fb4290f4ceb53b8a31ec40682aa6eed

data/lib/sugarcss.rb

@@ -17,8 +17,8 @@ Compass::Frameworks.register('sugarcss', :path => extension_path)
 #    a prerelease version
 #  Date is in the form of YYYY-MM-DD
 module Extension
-  VERSION = "1.0.0"
-  DATE = "2015-11-19"
+  VERSION = "1.0.1"
+  DATE = "2015-11-23"
 end
 
 # This is where any custom SassScript should be placed. The functions will be  

data/stylesheets/sugar/_animations.scss

@@ -15,13 +15,13 @@
 	$previous_duration : 0;
 	@each $animation in $animations {
 		$animation : _sugar-parse-properties($animation, (
+			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,
 			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,

data/stylesheets/sugar/_effects.scss

@@ -2,6 +2,116 @@
 // Effects specific
 //
 
+//
+// Hey
+//
+
+@mixin s-hey(
+	$props : ()
+) {
+	$props : _sugar-parse-properties($props, (
+		vertical-align : top middle bottom,
+		align : left center right,
+		size : number,
+		color : color,
+		margin-left : number,
+		margin-top : number,
+		margin-bottom : number,
+		margin-right : number
+	));
+
+	$props : _sugar-handle-nested(hey, $props);
+
+	$vertical-align : map-get-or($props, vertical-align, top);
+	$align : map-get-or($props, align, right);
+	$size : map-get-or($props, size, 20px);
+	$color : map-get-or($props, color, gold);
+	$margin-left : map-get-or($props, margin-left, 0px);
+	$margin-right : map-get-or($props, margin-right, 0px);
+	$margin-top : map-get-or($props, margin-top, 0px);
+	$margin-bottom : map-get-or($props, margin-bottom, 0px);
+
+	$position : s-position($vertical-align $align);
+	
+	@keyframes s-hey {
+		from {
+			opacity: 1;
+		}
+		to {
+			opacity: 0;
+		}
+	}
+
+	position: relative;
+	&:before {
+		$ratio : 2;
+		$s : round($size / $ratio);
+		content: '';
+		position: absolute;
+		// top : ($size / 2 - $s / 2) + $top;
+		// right : ($size / 2 - $s / 2) + $right;
+		height: $s; width: $s;
+		@include s-corner($s);
+		background-color: $color;
+
+		@each $prop, $value in $position {
+			@if $prop == top or $prop == bottom or $prop == left or $prop == right {
+				@if $prop == top and $value > 0%
+					or $prop == left and $value > 0% {
+					$value : "#{$value} - #{($size / 2 - $s / 2)}";
+				} @else {
+					$value : "#{$value} + #{($size / 2 - $s / 2)}";
+				}
+				@if $prop == top {
+					$value : "#{$value} + #{$margin-top} - #{$margin-bottom}";
+				} @else if $prop == right {
+					$value : "#{$value} + #{$margin-right} - #{$margin-left}";
+				} @else if $prop == bottom {
+					$value : "#{$value} + #{$margin-bottom} - #{$margin-top}";
+				} @else if $prop == left {
+					$value : "#{$value} + #{$margin-left} - #{$margin-right}";
+				}
+				@if $prop != position or $prop != transform {
+					#{$prop} : calc(#{$value});
+				}
+			}
+		}
+
+	}
+	&:after {
+		$border-width : floor(($size - $size / 2) / 3.5);
+		content: '';
+		position: absolute;
+		// top: $top; right: $right;
+		height: $size - $border-width * 2; width: $size - $border-width * 2;
+		@include s-corner(s-rem($size / 2));
+		background-color: transparent;
+		border: solid $color;
+		border-width: $border-width; // animates
+		boz-sizing: border-box;
+		@include s-animation(s-hey infinite);
+
+		@each $prop, $value in $position {
+			@if $prop == top {
+				$value : "#{$value} + #{$margin-top} - #{$margin-bottom}";
+			} @else if $prop == right {
+				$value : "#{$value} + #{$margin-right} - #{$margin-left}";
+			} @else if $prop == bottom {
+				$value : "#{$value} + #{$margin-bottom} - #{$margin-top}";
+			} @else if $prop == left {
+				$value : "#{$value} + #{$margin-left} - #{$margin-right}";
+			}
+			@if $prop != position or $prop != transform {
+				#{$prop} : calc(#{$value});
+			}
+		}
+	}
+
+	@include _sugar-handle-nested(hey) {
+		@content;
+	}
+}
+
 //
 // Shade
 //

data/stylesheets/sugar/_helper-mixins.scss

@@ -2,6 +2,102 @@
 // Some helpers mixins
 //
 
+//
+// Side lined
+//
+@mixin s-side-lined(
+	$props : ()
+) {
+	$props : _sugar-parse-properties($props, (
+		style : none hidden dotted dashed solid double groove ridge inset outset initial inherit,
+		side : left right both,
+		height : number,
+		width : number,
+		color : color,
+		padding : number,
+		margin-top : number
+	), (
+		style : stl,
+		side : si,
+		padding : p,
+		margin-top : mt
+	));
+	
+	$s : _sugar-handle-nested(side-lined, $props);
+
+	$side : map-get-or($props, side, both);
+	$height : map-get-or($props, height, s-rem(1px));
+	$width : map-get-or($props, width, 50%);
+	$color : map-get-or($props, color, black);
+	$style : map-get-or($props, style, solid);
+	$margin-top : map-get($props, margin-top);
+	$padding : map-get-or($props, padding, 0);
+
+	display: block;
+	overflow: hidden;
+	min-height : 1.2em;
+
+	@if $side == both {
+		text-align: center;
+	} @else if $side == left {
+		text-align: right;
+	} @else if $side == right {
+		text-align: left;
+	}
+	
+	$sel : '&:before, &:after';
+	@if $side == left {
+		$sel : '&:before';
+	} @else if $side == right {
+		$sel : '&:after';
+	}
+
+	#{$sel} {
+		content: "";
+		display: inline-block;
+		vertical-align: middle;
+		position: relative;
+		width: $width;
+
+		border-top-style: $style;
+		border-top-width: $height;
+
+		@if $color != inherit {
+			border-top-color: $color;
+    	}
+		
+		@if $style == double {
+			height : $height * 2;
+			border-bottom-style: solid;
+			border-bottom-width: $height;
+			border-bottom-color: $color;
+		}
+
+    	@if $margin-top {
+			bottom: $margin-top;
+    	} @else {
+    		bottom : 0.05em;
+    	}
+	}
+
+	@if $side == left or $side == both {
+		&:before {
+			right: $padding;
+			margin-left: -50%;
+		}
+	}
+	@if $side == right or $side == both {
+		&:after {
+			left: $padding;
+			margin-right: -50%;
+		}
+	}
+
+	@include _sugar-handle-nested(side-lined) {
+		@content;
+	}
+}
+
 //
 // Position
 //
@@ -68,80 +164,80 @@
 	@if $vertical-align or $align {
 		// top
 		@if $vertical-align == top {
-			$return : map-set($return, top, 0);
+			$return : map-set($return, top, 0%);
 			@if $align == left {
-				$return : map-set($return, left, 0);
+				$return : map-set($return, left, 0%);
 			} @else if $align == center {
 				$return : map-set($return, left, 50%);
-				$return : map-merge($return, s-translate(-50% 0));
+				$return : map-merge($return, s-translate(-50% 0%));
 			} @else if $align == right {
-				$return : map-set($return, right, 0);
+				$return : map-set($return, right, 0%);
 			} @else {
-				$return : map-set($return, left, 0);
+				$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-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-set($return, right, 0%);
 				$return : map-merge($return, s-translate(0 -50%));
 			} @else {
-				$return : map-merge($return, s-translate(-50% 0));
+				$return : map-merge($return, s-translate(-50% 0%));
 			}
 		} @else if $vertical-align == bottom {
-			$return : map-set($return, bottom, 0);
+			$return : map-set($return, bottom, 0%);
 			@if $align == left {
-				$return : map-set($return, left, 0);
+				$return : map-set($return, left, 0%);
 			} @else if $align == center {
 				$return : map-set($return, left, 50%);
-				$return : map-merge($return, s-translate(-50% 0));
+				$return : map-merge($return, s-translate(-50% 0%));
 			} @else if $align == right {
-				$return : map-set($return, right, 0);
+				$return : map-set($return, right, 0%);
 			} @else {
-				$return : map-set($return, left, 0);
+				$return : map-set($return, left, 0%);
 			}
 		} @else if $align == left {
-			$return : map-set($return, left, 0);
+			$return : map-set($return, left, 0%);
 			@if $vertical-align == top {
-				$return : map-set($return, top, 0);
+				$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);
+				$return : map-set($return, bottom, 0%);
 			} @else {
-				$return : map-set($return, top, 0);
+				$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));
+				$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));
+				$return : map-set($return, bottom, 0%);
+				$return : map-merge($return, s-translate(-50% 0%));
 			} @else {
-				$return : map-set($return, top, 0);
+				$return : map-set($return, top, 0%);
 			}
 		} @else if $align == right {
-			$return : map-set($return, right, 0);
+			$return : map-set($return, right, 0%);
 			@if $vertical-align == top {
-				$return : map-set($return, top, 0);
+				$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);
+				$return : map-set($return, bottom, 0%);
 			} @else {
-				$return : map-set($return, top, 0);
+				$return : map-set($return, top, 0%);
 			}
 		}
 	}
@@ -162,6 +258,24 @@
 	@return $return;
 }
 
+//
+// Vertical aligner
+//
+@mixin s-vertical-aligner(
+) {
+	&:before {
+		content: '';
+		display: inline-block;
+		vertical-align: middle;
+		height: 100%; width: .1px;
+	}
+
+	> * {
+		display: inline-block;
+		vertical-align: middle;
+	}
+}
+
 //
 // Translate
 //

data/stylesheets/sugar/_sugar.scss

@@ -1,8 +1,38 @@
-//
-// colors helpers
-// font helpers
-// - rem function
-// **
+// |------------------------------------------------------
+// |------------------------------------------------------
+// Sugar (.scss)
+// Writing SCSS has never tasted better!
+// |------------------------------------------------------
+// |------------------------------------------------------
+
+// |------------------------------------------------------
+// |------------------------------------------------------
+// Copyright (c) 2015 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 	20.11.15
+// @updated 	23.11.15
+// @author 		Olivier Bossel <olivier.bossel@gmail.com>
+// @version 	1.0.1
+// |------------------------------------------------------
+// |------------------------------------------------------
 
 //
 // Vendors
@@ -521,6 +551,15 @@ $_sugar-inited : false;
 			}
 			$font-family : sugar('settings.typo.font-family');
 			@if $font-family {
+				// try to get the font family from fonts
+				$fonts : sugar('settings.fonts');
+				$f : map-get($fonts, $font-family);
+				@if $f {
+					$ff : map-get($f, font-family);
+					@if $ff {
+						$font-family : $ff;
+					}
+				}
 				font-family: $font-family;
 			}
 		}

data/stylesheets/sugar/_typo.scss

@@ -293,6 +293,12 @@ $_s-font-aliases : (
 			$f : map-get($fonts, $font-family);
 			$cap-height : map-get-or($f, cap-height, 0);
 			$font-family : map-get-or($f, font-family, $font-family);
+			@if not $font-style {
+				$font-style : map-get($f, font-style);
+			}
+			@if not $font-weight {
+				$font-weight : map-get($f, font-weight);
+			}
 		}			
 	}
 	

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: sugarcss
 version: !ruby/object:Gem::Version
-  version: 1.0.0
+  version: 1.0.1
 platform: ruby
 authors:
 - Olivier Bossel
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-11-19 00:00:00.000000000 Z
+date: 2015-11-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass