sugarcss 1.0.0

data/stylesheets/sugar/_typo.scss

@@ -0,0 +1,849 @@
+//
+// Helpers with typography
+//
+
+//
+// Font mixin
+//
+$_s-font-properties : (
+	font-weight : normal bold bolder lighter number initial inherit,
+	font-style : normal italic oblique initial inherit,
+	font-variant : normal small-caps initial inherit,
+	font-stretch : ultra-condensed extra-condensed condensed semi-condensed normal semi-expanded expanded extra-expanded ultra-expanded initial inherit,
+	text-decoration :  none underline overline line-through initial inherit,
+	text-transform : none capitalize uppercase lowercase initial inherit,
+	text-align : left right center justify initial inherit,
+	word-wrap : normal break-word initial inherit,
+	word-break : normal break-all keep-all initial inherit,
+	white-space : normal nowrap pre pre-line pre-wrap initial inherit,
+	color : color,
+	font-family : string,
+	font-size : number,
+	line-height : number,
+	letter-spacing : number,
+	text-indent : number
+);
+$_s-font-aliases : (
+	font-family : ff,
+	color : c,
+	font-size : fs,
+	font-style : fstl,
+	font-variant : fv,
+	font-weight : fw,
+	text-decoration : td,
+	text-align : ta,
+	text-transform : tt,
+	font-stretch : fstr,
+	white-space : ws,
+	line-height : lh,
+	letter-spacing : ls,
+	text-indent : ti,
+	word-break : wb,
+	word-wrap : ww
+);
+
+@mixin s-vertical-rhythme(
+	$rhythme
+) {
+	$rhythme : _sugar-parse-properties($rhythme, (
+		font-size : number,
+		font-family : string,
+		line-height : number,
+		margin-top : number,
+		margin-bottom : number,
+		padding-top : number,
+		padding-bottom : number,
+		margin : true,
+		padding : true,
+		border-bottom : true,
+		border-top : true,
+		border-bottom-width : number,
+		border-top-width : number,
+		border : true,
+		s-font : true
+	), (
+		font-size: fs,
+		font-family: ff,
+		line-height: lh,
+		margin-top: mt,
+		margin-bottom: mb,
+		padding-top : pt,
+		padding-bottom : pb,
+		margin : m,
+		padding : p,
+		border-bottom : bb,
+		border-top : bt,
+		border-bottom-width : bbw,
+		border-top-width : btw,
+		border : b,
+		s-font : sf
+	));
+
+	// get values
+	$font-size : map-get($rhythme, font-size);
+	$font-family : map-get($rhythme, font-family);
+	$line-height : map-get($rhythme, line-height);
+	$s-font : map-get($rhythme, s-font);
+	$margin-bottom : map-get($rhythme, margin-bottom);
+	$margin-top : map-get($rhythme, margin-top);
+	$padding-bottom : map-get($rhythme, padding-bottom);
+	$padding-top : map-get($rhythme, padding-top);
+	$border-bottom-width : map-get($rhythme, border-bottom-width);
+	$border-top-width : map-get($rhythme, border-top-width);
+	$border-top : map-get($rhythme, border-top);
+	$border-bottom : map-get($rhythme, border-bottom);
+	$margin : map-get($rhythme, margin);
+	$padding : map-get($rhythme, padding);
+	$border : map-get($rhythme, border);
+	
+	// get values from s-font if passed	
+	@if $s-font {
+		$font : s-font($s-font);
+		$font-family : map-get-or($font, font-family, $font-family);
+		$font-size : map-get-or($font, font-size, $font-size);
+		$line-height : map-get-or($font, line-height, $line-height);
+	}
+
+	// calculate number of line height needed
+	@if not $line-height {
+		$line-height : s-strip-units(ceil(s-rem(s-px($font-size))));
+	}
+
+	// protect
+	@if not $font-size {
+		@error('s-vertical-rhythme need a font-size');
+	}
+	@if not $line-height {
+		@error('s-vertical-rhythme need a line-height');
+	}
+
+	// get the font object
+	$default-font-family : sugar('settings.typo.font-family');
+	$fonts : sugar('settings.fonts');
+	$f : map-get($fonts, $default-font-family);
+	$cap-height : map-get-or($f, cap-height, 0);
+	
+	// if a font family is passed
+	@if $font-family {
+		@if map-get($fonts, $font-family) {
+			$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);
+		}			
+	}
+
+	// check some values
+	@if $border-bottom {
+		$map : s-border($border-bottom);
+		$border-bottom-width : map-get-or($map, width, $border-bottom-width);
+	}
+	@if $border-top {
+		$map : s-border($border-top);
+		$border-top-width : map-get-or($map, width, $border-top-width);
+	}
+	@if $margin {
+		$map : s-margin($margin);
+		$margin-top : map-get-or($map, top, $margin-top);
+		$margin-bottom : map-get-or($map, bottom, $margin-bottom);
+	}
+	@if $padding {
+		$map : s-margin($padding);
+		$padding-top : map-get-or($map, top, $padding-top);
+		$padding-bottom : map-get-or($map, bottom, $padding-bottom);
+	}
+
+	// get the rhythme
+	$rhythme-map : map-merge($rhythme, s-get-rhythme(
+		-font-size $font-size
+		-line-height $line-height
+		-margin-top $margin-top
+		-margin-bottom $margin-bottom
+		-padding-top $padding-top
+		-padding-bottom $padding-bottom
+		-border-top $border-top-width
+		-border-bottom $border-bottom-width
+		-cap-height $cap-height
+	));
+	// remove margin-top cause it's done by top and margin-bottom compensation
+	@if map-get($rhythme-map, top) {
+		$rhythme-map : map-remove($rhythme-map, margin-top);
+	}
+
+	// set values
+	@if $s-font {
+		@include s-font($s-font);
+	}
+	$rhythme-map : map-remove($rhythme-map, s-font);
+
+	$scope-class : sugar('settings.typo.vertical-rhythme.scope-class');
+	@if $scope-class {
+		.#{$scope-class} & {
+			@each $prop, $value in $rhythme-map {
+				#{$prop} : $value;
+			}
+		}
+	} @else {
+		@each $prop, $value in $rhythme-map {
+			#{$prop} : $value;
+		}	
+	}
+}
+
+@function s-margin(
+	$margin
+) {
+	@if type-of($margin) == number {
+		@return (
+			top : s-rem($margin),
+			right : s-rem($margin),
+			bottom : s-rem($margin),
+			left : s-rem($margin)
+		);
+	} @else if type-of($margin) == list and length($margin) == 2 {
+		@return (
+			top : s-rem(nth($margin,1)),
+			bottom : s-rem(nth($margin,1)),
+			left : s-rem(nth($margin,2)),
+			right : s-rem(nth($margin,2))
+		);
+	} @else if type-of($margin) == list and length($margin) == 4 {
+		@return (
+			top : s-rem(nth($margin,1)),
+			right : s-rem(nth($margin,2)),
+			bottom : s-rem(nth($margin,3)),
+			left : s-rem(nth($margin,4))
+		);
+	}
+}
+
+@function s-border(
+	$border
+) {
+	$border : _sugar-parse-properties($border, (
+		width : number,
+		color : color,
+		style : none hidden dotted dashed solid double groove ridge inset outset initial inherit
+	), (
+		style : stl
+	));
+	@return $border;
+}
+
+@mixin s-font(
+	$font
+) {
+	// get the map
+	$font-map : s-font($font, $_handle-nested : true);
+
+	// set values
+	@each $prop, $value in $font-map {
+		@if $prop != cap-height {
+			#{$prop} : $value;
+		}
+	}
+
+	// handle nested
+	@include _sugar-handle-nested(font) {
+		@content;
+	}
+}
+
+//
+// s-font
+//
+@function s-font(
+	$font,
+	$_handle-nested : false
+) {
+	$font : _sugar-parse-properties($font, $_s-font-properties, $_s-font-aliases);
+    
+	// handle nested
+	@if $_handle-nested {
+		$font : _sugar-handle-nested(font, $font);
+	}
+
+	// get values
+	$font-family : map-get-or($font, font-family, null);
+	$color : map-get($font, color);
+	$size : map-get($font, font-size);
+	$font-style : map-get($font, font-style);
+	$font-variant : map-get($font, font-variant);
+	$font-weight : map-get($font, font-weight);
+	$text-decoration : map-get($font, text-decoration);
+	$text-align : map-get($font, text-align);
+	$text-transform : map-get($font, text-transform);
+	$font-stretch : map-get($font, font-stretch);
+	$white-space : map-get($font, white-space);
+	$line-height : map-get-or($font, line-height, null);
+	$letter-spacing : map-get($font, letter-spacing);
+	$text-indent : map-get($font, text-indent);
+	$word-break : map-get($font, word-break);
+	$word-wrap : map-get($font, word-wrap);
+	$vertical-rhythme : map-get-or($font, vertical-rhythme, sugar('settings.typo.vertical-rhythme'));
+
+	// get the font object
+	$default-font-family : sugar('settings.typo.font-family');
+	$fonts : sugar('settings.fonts');
+	$f : map-get($fonts, $default-font-family);
+	$cap-height : map-get-or($f, cap-height, 0);
+	
+	// if a font family is passed
+	@if $font-family {
+		@if map-get($fonts, $font-family) {
+			$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);
+		}			
+	}
+	
+	// init object to return
+	$return : (
+		cap-height : $cap-height
+	);
+
+	// set the font
+	@if $font-family {
+		$return : map-set($return, font-family, $font-family);
+	}
+
+	// color
+	@if $color {
+		$return : map-set($return, color, $color);
+	}
+
+	// font-size
+	@if $size {
+		@if unitless($size) or unit($size) == px {
+			$size : s-rem($size);
+		}
+		$return : map-set($return, font-size, $size);
+	}
+
+	@if $line-height {
+		$return : map-set($return, line-height, s-rem($line-height));
+	}
+
+	// font-style
+	@if $font-style {
+		$return : map-set($return, font-style, $font-style);
+	}
+	// font-variant
+	@if $font-variant {
+		$return : map-set($return, font-variant, $font-variant);
+	}
+	// font-weight
+	@if $font-weight {
+		$return : map-set($return, font-weight, $font-weight);
+	}
+	// text-decoration
+	@if $text-decoration {
+		$return : map-set($return, text-decoration, $text-decoration);
+	}
+	// text-align
+	@if $text-align {
+		$return : map-set($return, text-align, $text-align);
+	}
+	// text-transform
+	@if $text-transform {
+		$return : map-set($return, text-transform, $text-transform);
+	}
+	// font-stretch
+	@if $font-stretch {
+		$return : map-set($return, font-stretch, $font-stretch);
+	}
+	// white-space
+	@if $white-space {
+		$return : map-set($return, white-space, $white-space);
+	}
+	// letter spacing
+	@if $letter-spacing {
+		$return : map-set($return, letter-spacing, $letter-spacing);
+	}
+	// text-indent
+	@if $text-indent {
+		$return : map-set($return, text-indent, $text-indent);
+	}
+	// word break
+	@if $word-break {
+		$return : map-set($return, word-break, $word-break);
+	}
+	// word wrap
+	@if $word-wrap {
+		$return : map-set($return, word-wrap, $word-wrap);
+	}
+
+	// add all the others properties
+	$return : map-merge($return, map-get-or($font, others, ()));
+
+	// return the map
+	@return $return;
+}
+
+//
+// Font face
+//
+@mixin s-font-face(
+	$font-face
+) {
+	$font-face : _sugar-parse-properties($font-face, (
+		ext : eot eot2 otf woff2 woff ttf svg svgz,
+		font-weight : normal bold bolder lighter number initial inherit,
+		font-style : normal italic oblique initial inherit,
+		font-family : string,
+		src : string
+	), (
+		ext : e,
+		font-weight : fw,
+		font-style : fs,
+		font-family : ff,
+		src : s
+	));
+	$font-family : map-get($font-face, font-family);
+	$src : map-get($font-face, src);
+	$ext : map-get-or($font-face, ext, ());
+	$font-weight : map-get($font-face, font-weight);
+	$font-style : map-get($font-face, font-style);
+
+	// protect
+	@if $font-family == null {
+		@error("You need to specify a font-family for your s-font-face statement...");
+	}
+	@if $src == null {
+		@error("You need to specify an src for your s-font-face statement...");
+	}
+
+	// get font format from settings
+	$font-format : sugar('settings.typo.font-format');
+
+	// process url
+	$split : _split($src, '.');
+	$e : last-nth($split);
+	$split : list-pop($split);
+	$path : list-implode($split, '.');
+
+	// add extention in list
+	@if index($ext, $e) == null {
+		$ext : append($ext, $e);
+	}
+
+	// loop on each extensions
+	$srcs : ();
+	@each $e in $ext {
+		// get the format
+		$format : map-get($font-format, $e);
+		$srcs : append($srcs, url('#{$path}.#{$e}') format('#{$format}'), comma);
+	}
+
+	// declare font
+	@font-face {
+		font-family: "#{$font-family}";
+		src : $srcs;
+		@if $font-style {
+			font-style : $font-style;
+		}
+		@if $font-weight {
+			font-weight : $font-weight;
+		}
+	}
+}
+
+//
+// Get rhythme max-width
+//
+@function s-rhythme-width(
+	$letters-count : sugar('settings.typo.line-letters-count')
+) {
+	@if unitless($letters-count) {
+		@return (
+			display: block,
+			max-width : $letters-count + ex
+		);
+	} @else {
+		@return (
+			display: block,
+			max-width : $letters-count
+		);
+	}
+}
+
+//
+// Set rhythme max-width
+//
+@mixin s-rhythme-width(
+	$letters-count : sugar('settings.typo.line-letters-count')
+) {
+	@each $prop, $value in s-rhythme-width($letters-count) {
+		#{$prop} : $value;
+	}
+}
+
+//
+// Set rhythme
+//
+@mixin s-set-rhythme(
+	$rhythme
+) {
+	// scope class
+	$scope-class : sugar('settings.typo.vertical-rhythme.scope-class');
+
+	// get the rhythme values
+	$rhythme-values : s-get-rhythme($rhythme);
+
+	// set rhythme
+	@if $scope-class {
+		.#{$scope-class} & {
+			@each $prop, $value in $rhythme-values {
+				#{$prop} : $value;
+			}
+		}
+	} @else {
+		@each $prop, $value in $rhythme-values {
+			#{$prop} : $value;
+		}
+	}
+	
+}
+
+//
+// Get rhythme
+//
+@function s-get-rhythme(
+	$rhythme
+) {
+	$rhythme : _sugar-parse-properties($rhythme, (
+		font-size : number,
+		line-height : number,
+		margin-top : number,
+		margin-bottom : number,
+		padding-top : number,
+		padding-bottom : number,
+		border-bottom : number,
+		border-top : number,
+		cap-height : number
+	), (
+		font-size : fs,
+		line-height : lh,
+		margin-top: mt,
+		margin-bottom: mb,
+		padding-top: pt,
+		padding-bottom: pb,
+		border-bottom : bb,
+		border-top : bt,
+		cap-height: ch
+	));
+
+	$font-size : map-get($rhythme, font-size);
+	$line-height : map-get-or($rhythme, line-height, 2);
+	$margin-top : map-get-or($rhythme, margin-top, 0);
+	$margin-bottom : map-get-or($rhythme, margin-bottom, 0);
+	$padding-top : map-get-or($rhythme, padding-top, 0);
+	$padding-bottom : map-get-or($rhythme, padding-bottom, 0);
+	$border-bottom : map-get-or($rhythme, border-bottom, 0);
+	$border-top : map-get-or($rhythme, border-top, 0);
+	$cap-height : map-get-or($rhythme, cap-height, 0);
+	$root-font-size : sugar('settings.typo.font-size');
+	
+	// process values
+	@if $margin-top > 0 {
+		@if unit($margin-top) != rem {
+			// transform margin top in rems
+			$margin-top : s-rem($margin-top);
+			// round the margin top
+			$margin-top : round(s-strip-units($margin-top));
+			// set to rem again
+			$margin-top : s-rem($margin-top);
+		}
+	}
+	@if $margin-bottom > 0 {
+		@if unit($margin-bottom) != rem {
+			// transform margin bottom in rems
+			$margin-bottom : s-rem($margin-bottom);
+			// round the margin bottom
+			$margin-bottom : round(s-strip-units($margin-bottom));
+			// set to rem again
+			$margin-bottom : s-rem($margin-bottom);
+		}
+	}
+	@if $padding-top > 0 {
+		@if unit($padding-top) != rem {
+			// transform margin top in rems
+			$padding-top : s-rem($padding-top);
+			// round the margin top
+			$padding-top : round(s-strip-units($padding-top));
+			// set to rem again
+			$padding-top : s-rem($padding-top);
+		}
+	}
+	@if $padding-bottom > 0 {
+		@if unit($padding-bottom) != rem {
+			// transform margin top in rems
+			$padding-bottom : s-rem($padding-bottom);
+			// round the margin top
+			$padding-bottom : round(s-strip-units($padding-bottom));
+			// set to rem again
+			$padding-bottom : s-rem($padding-bottom);
+		}
+	}
+	@if $border-bottom > 0 {
+		@if unit($border-bottom) != rem {
+			// transform margin top in rems
+			$border-bottom : s-rem($border-bottom);
+		}
+	}
+	@if $border-top > 0 {
+		@if unit($border-top) != rem {
+			// transform margin top in rems
+			$border-top : s-rem($border-top);
+		}
+	}
+	@if $line-height > 0 {
+		@if unit($line-height) != rem {
+			// transform margin top in rems
+			$line-height : s-rem($line-height);
+			// round the margin top
+			$line-height : round(s-strip-units($line-height));
+			// set to rem again
+			$line-height : s-rem($line-height);
+		}
+	}
+
+	// transform in rem if are pixels passed
+	@if unit($font-size) != px {
+		$font-size : s-px($font-size);
+	}
+
+	// manage cap height
+	@if $cap-height == null {
+		$cap-height : 0;
+	}
+
+	// protect
+	@if type-of($font-size) == number {
+		$rootsize: $root-font-size;
+		$baseline-shift: ($font-size / 2 * (($line-height * $rootsize / $font-size) - $cap-height)) / $rootsize + 0.00001;
+		$baseline-push: $margin-bottom - (($font-size / 2 * (($line-height * $rootsize / $font-size) - $cap-height)) / $rootsize + 0.00001);
+
+		// if we have a padding top, respect it and
+		// push a little bit the content lower to respect
+		// vertical rhythme
+		@if $padding-top and $padding-top >= 1 {
+
+			// if we have some borders
+			@if $border-top > 0 {
+				$dec : $border-top % 1;
+				$margin-top : $margin-top + ( 1 - $dec );
+			}
+			@if $border-bottom > 0 {
+				$dec : $border-bottom % 1;
+				$margin-bottom : $margin-bottom + ( 1 - $dec );
+			}
+			$ret : (
+				padding-top : $padding-top,
+				margin-bottom : $margin-bottom,
+				padding-bottom : $padding-bottom,
+				font-size : s-rem($font-size),
+				line-height : s-rem($line-height)
+			);
+			@if $margin-top > 0 {
+				$ret : map-merge($ret, (
+					position : relative,
+					top : $margin-top,
+					margin-bottom : $margin-bottom + $margin-top
+				));
+			}
+			@return $ret;
+		} @else {
+			$baseline-shift : $baseline-shift % 1;
+			$decimal : $baseline-push % 1;
+			$baseline-push : $decimal + $margin-bottom;
+			@if $decimal <= 0.33 and $baseline-push < $margin-bottom {
+				$baseline-push : $baseline-push + 1;
+			} @else if $decimal >= 0.66 and $baseline-push > $margin-bottom {
+				$baseline-push : $baseline-push - 1;
+			}
+			@if $baseline-shift >= 0.66 {
+				$margin-top : $margin-top - 1rem;
+			}
+
+			@if $border-top > 0 {
+				$dec : $border-top % 1;
+				$margin-top : $margin-top + ( 1 - $dec );
+			}
+			@if $border-bottom > 0 {
+				$dec : $border-bottom % 1;
+				$baseline-push : $baseline-push + ( 1 - $dec );
+			}
+
+
+
+			$ret : (
+				padding-top : $baseline-shift,
+				margin-bottom : $baseline-push,
+				padding-bottom : $padding-bottom,
+				font-size : s-rem($font-size),
+				line-height : s-rem($line-height)
+			);
+			@if $margin-top > 0 {
+				$ret : map-merge($ret, (
+					position : relative,
+					top : $margin-top,
+					margin-bottom : $margin-bottom + $margin-top
+				));
+			}
+			@return $ret;
+		}
+	} @else {
+		@warn "#{$font-size} is not a valid scale variable";
+	}
+	@return null;
+}
+
+//
+// Show rhythme
+//
+@mixin s-show-rhythme(
+	$color : #0ff
+) {
+	// overflow: hidden;
+	position: relative;
+	&:after {
+		pointer-events: none;
+		content:'';
+		display: block;
+		position: absolute;
+		top:0; left:0;
+		width:100%; height:100%;
+		background-image: -webkit-linear-gradient(top,$color 0,rgba(255,255,255,0)1px);
+		background-image: -moz-linear-gradient(top,$color 0,rgba(255,255,255,0)1px);
+		background-image: -o-linear-gradient(top,$color 0,rgba(255,255,255,0)1px);
+		background-image: linear-gradient(to bottom,$color 0,rgba(255,255,255,0)1px);
+		background-repeat: repeat-y;
+		background-size: 100% 1rem;
+	}
+}
+
+//
+// Columns
+//
+@mixin s-columns(
+	$columns
+) {
+	// get columns props
+	$columns : s-columns($columns, $_handle-nested : true);
+
+	// set props
+	@each $prop, $value in $columns {
+		#{$prop} : $value;
+	}
+
+	// handle nested
+	@include _sugar-handle-nested(columns) {
+		@content;
+	}
+}
+@function s-columns(
+	$columns, 
+	$_handle-nested : false
+) {
+	$columns : _sugar-parse-properties($columns, (
+		fill : balance auto initial inherit,
+		rule-style : none hidden dotted dashed solid double groove ridge inset outset initial inherit,
+		count : number,
+		gap : number,
+		width : number,
+		span : number,
+		rule-color : color,
+		rule-width : number,
+		rule : true,
+	), (
+		fill : f,
+		rule-style : rstl,
+		count : c,
+		gap : g,
+		span : s,
+		rule-color : rc,
+		rule-width : rw,
+		rule : r
+	));
+	
+	// handle nested
+	@if $_handle-nested {
+		$columns : _sugar-handle-nested(columns, $columns);
+	}
+
+	// get values
+	$fill : map-get($columns, fill);
+	$rule-style : map-get($columns, rule-style);
+	$count : map-get-or($columns, count, 2);
+	$gap : map-get($columns, gap);
+	$width : map-get($columns, width);
+	$span : map-get($columns, span);
+	$rule-color : map-get($columns, rule-color);
+	$rule-width : map-get($columns, rule-width);
+	$rule : map-get($columns, rule);
+
+	$return : ();
+
+	@if $count {
+		$return : map-set($return, column-count, $count);
+	}
+	@if $width {
+		$return : map-set($return, column-width, $width);
+	}
+	@if $rule {
+		$return : map-set($return, column-rule, $rule);
+	} @else {
+		@if $rule-style {
+			$return : map-set($return, column-rule-style, $rule-style);
+		}
+		@if $rule-color {
+			$return : map-set($return, column-rule-color, $rule-color);
+		}
+		@if $rule-width {
+			$return : map-set($return, column-rule-width, $rule-width);
+		}
+	}
+	@if $gap {
+		$return : map-set($return, column-gap, $gap);
+	}
+	@if $fill {
+		$return : map-set($return, column-fill, $fill);
+	}
+	@if $span {
+		$return : map-set($return, column-span, $span);
+	}
+
+	// return
+	@return $return;
+}
+
+//
+// Truncate
+//
+@mixin _s-text-truncate() {
+	display: inline-block;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+%s-text-truncate {
+	@include _s-text-truncate();
+}
+@mixin s-text-truncate() {
+	@include _s-text-truncate();
+}
+
+//
+// Hide text
+//
+@mixin _s-text-hidden() {
+	overflow:hidden;
+    text-indent:-9000px;
+    display:block;
+}
+%s-text-hidden {
+	@include _s-text-hidden();
+}
+@mixin s-text-hidden() {
+	@include _s-text-hidden();
+}