compass-pug 0.1.0 → 0.1.1

checksums.yaml

@@ -1,15 +1,7 @@
 ---
-!binary "U0hBMQ==":
-  metadata.gz: !binary |-
-    MjNjYmMwMzczZGIyZWRjY2YwNTQ5MzU2MWEzYWU2NDMwMWFiMDU2Yg==
-  data.tar.gz: !binary |-
-    MDRiZDY2YmUwOGIzNzViZWUxOWE1NjY5YzMyZDE3OWIxOWQ1NDYyYQ==
+SHA1:
+  metadata.gz: 5c370fb6cecbb4226f33059fe0e4359ab78f130c
+  data.tar.gz: 753a9e60a1544b9dc5b9bb995f3e72f0d5ea4b07
 SHA512:
-  metadata.gz: !binary |-
-    ODg0Y2Y0YmY2ZmZhNTM5MjNmNTQ1OWFkOTIxNzljNDZlYTRkOTZiNDUwNTIx
-    NWNjOTkxZWE1NDk1MGU0MDg0MjU0MGUyNmZhOGZhM2JmNmIzYjE2MmJhOTQ2
-    NmNkZGU4NDZiNjczOWE3Zjg1NWNlZjNhNDRkNThkOWYxMDQ3MmE=
-  data.tar.gz: !binary |-
-    ZDIwODlhNzU4ZDE4OGY2ZDRkMzIzNjY2YjI1YzgwNTlkMzVmMTZmN2ZlYzIy
-    YzY1ODkxN2U2ZDMyMjE5NDZjMTYxNjM0YTlkYjdiMTdkZjE1YjUzYjkzNDRk
-    NWFiMjRlODg5MWY5MzNjN2FiZmUwNzdhYTQ3NzM2MjEzMmZlZmI=
+  metadata.gz: 0fc87d8c67e41826707dc17a79e3e6727dd47375f872e1c9997c76870130777843e7582a2776173c8fa1669bfa3f7f6a53a28d0a431871df40a1a7f7e76c4a7b
+  data.tar.gz: d48cb80b7b4f9be8f7d7dc0726b2f6888cb52721a6b0b37e3cebb8f1e38ec04496c697cc768ebb52f37659685d63d383cb2a49de3464fca6b3af82888497943e

data/README.md

@@ -32,8 +32,8 @@ For complete details, including function/mixin parameters, view the `stylesheets
 * `pug-micro-clearfix()`: [Provides Nicolas Gallagher's Micro Clearfix](http://nicolasgallagher.com/micro-clearfix-hack/).
 * `pug-placeholder-color()`: Generates cross-browser CSS (with selectors) for setting the color of input field placeholder text. Via [CSS Tricks](http://css-tricks.com/snippets/css/style-placeholder-text/).
 * `pug-tab-size()`: Vendor-prefixed tab sizing. Use with elements such as `pre`.
-* `pug-sr-only()`: Apply to an element to make it accessible only to screen readers. [Adapted from Bootstrap 3](http://getbootstrap.com/css/#helper-classes-screen-readers).
-* `pug-sr-only-focusable()`: Applies (optionally, and by default) `pug-sr-only()` and shows the element again when it's focused. [Adapted from Bootstrap 3](http://getbootstrap.com/css/#helper-classes-screen-readers).
+* `pug-sr-only()`: Apply to an element to make it accessible only to screen readers. Optionally include `$focusable:true` to allow the element to be focusable when navigated to via the keyboard. [Adapted from Bootstrap 3](http://getbootstrap.com/css/#helper-classes-screen-readers).
+* `pug-sr-only-focusable()`: *DEPRECATED (use `pug-sr-only($focusable:true).` instead)* Applies (optionally, and by default) `pug-sr-only()` and shows the element again when it's focused. [Adapted from Bootstrap 3](http://getbootstrap.com/css/#helper-classes-screen-readers).
 
 ### Sass Functions
 

data/stylesheets/_pug.scss

@@ -1,6 +1,4 @@
-/**
- * Pug: Default configuration vars and imports.
- */
+// Pug: Default configuration vars and imports.
 
 // Default values
 // ---------------------------------------------------------------------------

data/stylesheets/pug/_functions.scss

@@ -1,19 +1,16 @@
-/* Pug - Core Functions */
+// Pug - Core Functions
 
-/**
- * Calculate an appropriate line-height value that maintains vertical rhythm.
- *
- * Note that $font-size and $vertical-unit must use the same unit of measurement (px, rem, em, etc).
- *
- * @param string $font-size
- *  Font-size to use for generating the line-height result. Must have same unit of measurement as $vertical-unit.
- * @param string $vertical-unit
- *
- * @param number $division
- *  Represents how $vertical-unit will be divided. Usually this should be 1, 0.5 or 0.25.
- * @param number $minimum-difference-proportion
- *  Minimum acceptable proportional diff.
- */
+// Calculate an appropriate line-height value that maintains vertical rhythm.
+//
+// Note that $font-size and $vertical-unit must use the same unit of measurement (px, rem, em, etc).
+//
+// @param string $font-size
+//  Font-size to use for generating the line-height result. Must have same unit of measurement as $vertical-unit.
+// @param string $vertical-unit
+// @param number $division
+//  Represents how $vertical-unit will be divided. Usually this should be 1, 0.5 or 0.25.
+// @param number $minimum-difference-proportion
+//  Minimum acceptable proportional diff.
 @function pug-calculate-line-height(
 		$font-size: $pug-vr-base-font-size,
 		$vertical-unit: $pug-vr-vertical-unit,
@@ -46,22 +43,21 @@
 	}
 }
 
-/**
- * Round a size up to the nearest factor of a vertical unit (or of a sub-unit of that vertical unit).
- * Parameters must use the same unit of measurement (rem, px, etc).
- *
- * @param string $original-size
- * @param string $vertical-unit
- * @param number $division
- *  If you want to allow factors of a division of $vertical-unit, use a decimal value here (like 0.5).
- */
+// Round a size up to the nearest factor of a vertical unit (or of a sub-unit of that vertical unit).
+//
+// Parameters must use the same unit of measurement (rem, px, etc).
+//
+// @param string $original-size
+// @param string $vertical-unit
+// @param number $division
+//  If you want to allow factors of a division of $vertical-unit, use a decimal value here (like 0.5).
 @function pug-round-up-to-nearest-vertical-unit(
 		$original-size,
 		$vertical-unit: $pug-vr-vertical-unit,
 		$division: $pug-vr-preferred-division
 	) {
 	@if pug-units-match($original-size, $vertical-unit) == false {
-		@warn "Incompatible arguments passed to PROJECT-round-up-to-nearest-vertical-unit()";
+		@warn "Incompatible arguments passed to pug-round-up-to-nearest-vertical-unit()";
 		@return false;
 	}
 	@else {
@@ -84,38 +80,36 @@
 	}
 }
 
-/**
- * Strip unit of measurement from a numeric value.
- * For example, "10px" becomes "10".
- *
- * From http://stackoverflow.com/a/12335841
- *
- * @param string $number
- * @return number
- */
+// Strip unit of measurement from a numeric value.
+//
+// For example, "10px" becomes "10".
+//
+// From http://stackoverflow.com/a/12335841
+//
+// @param string $number
+// @return number
 @function pug-strip-units($number) {
 	$new: $number / ($number * 0 + 1);
 	@return $new;
 }
 
-/**
- * Determine whether two or more values use the same unit of measurement.
- *
- * Similar to the Sass comparable() function but requires exact match
- * (such as mm and mm, but not cm and mm).
- *
- * @param string $v1 The first value to compare.
- * @param [...] $others One or more additional values to compare.
- * @return boolean
- */
+// Determine whether two or more values use the same unit of measurement.
+//
+// Similar to the Sass comparable() function but requires exact match
+// (such as mm and mm, but not cm and mm).
+//
+// Examples:
+//
+//     @debug pug-units-match(1px, 4px);           // true
+//     @debug pug-units-match(1px, 4rem);          // false
+//     @debug pug-units-match(1px, 4px, 12px);     // true
+//     @debug pug-units-match(1rem, 4rem, 1.2rem); // true
+//     @debug pug-units-match(1rem, 4px, 1.2rem);  // false
+//
+// @param string $v1 The first value to compare.
+// @param [...] $others One or more additional values to compare.
+// @return boolean
 @function pug-units-match($v1, $others...) {
-	/* Example usages:
-		@debug pug-units-match(1px, 4px);           // true
-		@debug pug-units-match(1px, 4rem);          // false
-		@debug pug-units-match(1px, 4px, 12px);     // true
-		@debug pug-units-match(1rem, 4rem, 1.2rem); // true
-		@debug pug-units-match(1rem, 4px, 1.2rem);  // false
-	*/
 	$v1-unit: unit($v1);
 	$return: true;
 	@for $i from 1 through length($others) {

data/stylesheets/pug/_mixins.scss

@@ -1,54 +1,44 @@
-/* Pug - Core Mixins */
+// Pug - Core Mixins
 
-/**
- * Align center.
- */
+// Align center.
 @mixin pug-aligncenter {
 	clear: both;
 	display: block;
 	margin: 0 auto;
 }
 
-/**
- * Align left.
- */
+// Align left.
 @mixin pug-alignleft {
 	display: inline;
 	float: left;
 	margin-right: $pug-hr-horizontal-unit;
 }
 
-/**
- * Align right.
- */
+// Align right.
 @mixin pug-alignright {
 	display: inline;
 	float: right;
 	margin-left: $pug-hr-horizontal-unit;
 }
 
-/**
- * Clearfix (alias for pug-micro-clearfix()).
- *
- * @see pug-micro-clearfix()
- */
+// Clearfix (alias for pug-micro-clearfix()).
+//
+// @see pug-micro-clearfix()
 @mixin pug-clearfix() {
 	@include pug-micro-clearfix();
 }
 
-/**
- * Quickly apply appropriate styles to an element for having a dark background.
- *
- * This mixin will adjust bg, text and link color.
- *
- * @param string $bg-color
- * @param string $text-color
- * @param string $link-default-color
- * @param string $link-visited-color
- * @param string $link-hover-color
- *
- * @see pug-dark-bg-with-dark-text
- */
+// Quickly apply appropriate styles to an element for having a dark background.
+//
+// This mixin will adjust bg, text and link color.
+//
+// @see pug-dark-bg-with-dark-text
+//
+// @param string $bg-color
+// @param string $text-color
+// @param string $link-default-color
+// @param string $link-visited-color
+// @param string $link-hover-color
 @mixin pug-dark-bg-with-light-text(
 		$bg-color: $pug-bg-color-dark,
 		$text-color: $pug-text-color-light,
@@ -71,16 +61,14 @@
 	}
 }
 
-/**
- * Image replacement
- *
- * Adapted from HTML5 Boilerplate's .ir class.
- */
+// Image replacement.
+//
+// Adapted from HTML5 Boilerplate's .ir class.
 @mixin pug-image-replacement {
 	background-color: transparent;
 	border: 0;
 	overflow: hidden;
-	/* IE 6/7 fallback */
+	// IE 6/7 fallback
 	*text-indent: -9999px;
 	&:before {
 		content: "";
@@ -90,19 +78,17 @@
 	}
 }
 
-/**
- * Quickly apply appropriate styles to an element for having a light background.
- *
- * This mixin will adjust bg, text and link color.
- *
- * @param string $bg-color
- * @param string $text-color
- * @param string $link-default-color
- * @param string $link-visited-color
- * @param string $link-hover-color
- *
- * @see pug-dark-bg-with-light-text
- */
+// Quickly apply appropriate styles to an element for having a light background.
+//
+// This mixin will adjust bg, text and link color.
+//
+// @see pug-dark-bg-with-light-text
+//
+// @param string $bg-color
+// @param string $text-color
+// @param string $link-default-color
+// @param string $link-visited-color
+// @param string $link-hover-color
 @mixin pug-light-bg-with-dark-text(
 		$bg-color: $pug-bg-color-light,
 		$text-color: $pug-text-color-dark,
@@ -125,11 +111,9 @@
 	}
 }
 
-/**
- * Micro-clearfix.
- *
- * @see http://nicolasgallagher.com/micro-clearfix-hack/
- */
+// Micro-clearfix.
+//
+// @see http://nicolasgallagher.com/micro-clearfix-hack/
 @mixin pug-micro-clearfix() {
 	&:before,
 	&:after {
@@ -142,22 +126,21 @@
 	*zoom: 1; // IE6/7:  Include this rule to trigger hasLayout and contain floats.
 }
 
-/**
- * Cross-browser default placeholder text color.
- *
- * Don't use this within a selector. Just drop it in at the top level of your sass code.
- *
- * @param string $color
- * @see http://css-tricks.com/snippets/css/style-placeholder-text/
- */
+// Cross-browser default placeholder text color.
+//
+// Don't use this within a selector. Just drop it in at the top level of your sass code.
+//
+// @see http://css-tricks.com/snippets/css/style-placeholder-text/
+//
+// @param string $color
 @mixin pug-placeholder-color($color) {
 	::-webkit-input-placeholder {
 		color: $color;
 	}
-	:-moz-placeholder { /* Firefox 18- */
+	:-moz-placeholder { // Firefox 18-
 		color: $color;
 	}
-	::-moz-placeholder {  /* Firefox 19+ */
+	::-moz-placeholder {  // Firefox 19+
 		color: $color;
 	}
 	:-ms-input-placeholder {
@@ -165,11 +148,9 @@
 	}
 }
 
-/**
- * Vendor-prefixed tab sizing. Use in elements such as pre.
- *
- * @param number $size
- */
+// Vendor-prefixed tab sizing. Use in elements such as pre.
+//
+// @param number $size
 @mixin pug-tab-size($size: $pug-tab-size) {
 	tab-size: $size;
 	-moz-tab-size: $size;
@@ -177,13 +158,27 @@
 	white-space: pre-wrap;
 }
 
-/**
- * Apply to an element to make it accessible only to screen readers. (adapted from Bootstrap 3)
- *
- * @see pug-sr-only-focusable()
- * @see http://getbootstrap.com/css/#helper-classes-screen-readers
- */
-@mixin pug-sr-only {
+// Generates code for sr-only-focusable.
+//
+// Used by other Pug mixins (internal use only). Provided
+// to reduce coupling will enabling legacy support.
+@mixin _pug-code-for-sr-only-focusable() {
+	&:active,
+	&:focus {
+		position: static;
+		width: auto;
+		height: auto;
+		margin: 0;
+		overflow: visible;
+		clip: auto;
+	}
+}
+
+// Apply to an element to make it accessible only to screen readers. (adapted from Bootstrap 3)
+//
+// @see pug-sr-only-focusable()
+// @see http://getbootstrap.com/css/#helper-classes-screen-readers
+@mixin pug-sr-only($focusable: false) {
 	position: absolute;
 	width: 1px;
 	height: 1px;
@@ -192,30 +187,25 @@
 	overflow: hidden;
 	clip: rect(0,0,0,0);
 	border: 0;
+	@if $focusable {
+		@include _pug-code-for-sr-only-focusable;
+	}
 }
 
-/**
- * Applies sr-only and shows the element again when it's focused. (adapted from Bootstrap 3)
- *
- * @param boolean $include-sr-only
- *  Whether to automatically the sr-only() mixin, which is required for this to work (you would
- *  only set this to false if you had already applied sr-only() to an element receiving
- *  sr-only-focusable).
- *
- * @see pug-sr-only()
- * @see http://getbootstrap.com/css/#helper-classes-screen-readers
- */
+// DEPRECATED. Use pug-sr-only($focusable:true) instead.
+//
+// Applies sr-only and shows the element again when it's focused. (adapted from Bootstrap 3)
+//
+// @see pug-sr-only()
+// @see http://getbootstrap.com/css/#helper-classes-screen-readers
+//
+// @param boolean $include-sr-only
+//   Whether to automatically the sr-only() mixin, which is required for this to work (you would
+//   only set this to false if you had already applied sr-only() to an element receiving
+//   sr-only-focusable).
 @mixin pug-sr-only-focusable($include-sr-only: true) {
 	@if $include-sr-only == true {
-		@include sr-only;
-	}
-	&:active,
-	&:focus {
-		position: static;
-		width: auto;
-		height: auto;
-		margin: 0;
-		overflow: visible;
-		clip: auto;
+		@include pug-sr-only;
 	}
+	@include _pug-code-for-sr-only-focusable;
 }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: compass-pug
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.1.1
 platform: ruby
 authors:
 - Andrew Kamm
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-09-17 00:00:00.000000000 Z
+date: 2015-07-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: compass
@@ -49,17 +49,17 @@ require_paths:
 - lib
 required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ! '>='
+  - - '>='
     - !ruby/object:Gem::Version
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ! '>='
+  - - '>='
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.2.2
+rubygems_version: 2.0.14
 signing_key: 
 specification_version: 4
 summary: A collection of mixins and functions for use in Sass/Compass projects.