compass-pug 0.1.2 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: dca925459005d60a8c5e76fdab3072843316671c
-  data.tar.gz: 047f6a571b21eeb39ef2a81dd302dfbe5ee36146
+  metadata.gz: 8c4a742f23fe04c5ad374f27bd5ae0f7b10b37c2
+  data.tar.gz: dd099a7b4f71282be2dcef549d0de91826678134
 SHA512:
-  metadata.gz: 3f6dce63b71cc91e75de53fd301fc456806d9bef709474a2bbf4cd846081945c053eef5ad97853ca37e3ae13dee58c3cb6d482e76de9031d1b9226cdbf17ca1b
-  data.tar.gz: 08e44dae021152d9b80d4ed2c1fb0ba2015bf4bec06b0f336057eb0fab3c5e82a42128e89e893ce30a4a2370edc30a3010554377f7940758840d1e0a677478c8
+  metadata.gz: 2274ed787f1fbfed5c5f242c087fb0db9c5333557cbab3670065b59b80e0f76b01fe1481cb34b034aca3b00ef366be1db1690d45a9ccd60c07df54bb86b59dc2
+  data.tar.gz: 7c49fb3a934c6dea44935867a880dea878a04d5820b572980b47f673f6d2ab3e0942ca4a50a07f08d00b2b8b80145aca7d27a575ef9f7f889c5764312f04f0e9

data/README.md

@@ -25,15 +25,17 @@ For complete details, including function/mixin parameters, view the `stylesheets
 * `pug-aligncenter()`: Sets `display:block`, `clear:both` and auto l/r margin to horizontally center an element.
 * `pug-alignleft()`: Sets `display:inline`, `float:left` and applies some right margin based on the configured horizontal unit.
 * `pug-alignright()`: Sets `display:inline`, `float:right` and applies some left margin based on the configured horizontal unit.
+* `pug-aspect-ratio()`: Provides ability to fix an element at a given aspect ratio while still supporting fluid width. Args are `$width` (unitless int), `$height` (unitless int), `$child-selector` (selector of a child within the element). See source for example code. Adapted from a post on [CSS Tricks](https://css-tricks.com/snippets/sass/maintain-aspect-ratio-mixin/).
 * `pug-clearfix()`: Clearfix. Alias for `pug-micro-clearfix()`.
-* `pug-dark-bg-with-light-text()`: Quickly apply bg, text and link colors to a selector appropriate for a dark background with light text.
 * `pug-image-replacement()`: [Adapted from HTML5 Boilerplate's](http://html5boilerplate.com/) `.ir` class.
-* `pug-light-bg-with-dark-text()`: Quickly apply bg, text and link colors to a selector appropriate for a light background with dark text.
-* `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. 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).
+* `pug-tab-size()`: Vendor-prefixed tab sizing. Use with elements such as `pre`.
+* **Deprecated mixins:**
+    * `pug-dark-bg-with-light-text()`: *DEPRECATED* Quickly apply bg, text and link colors to a selector appropriate for a dark background with light text.
+    * `pug-light-bg-with-dark-text()`: *DEPRECATED* Quickly apply bg, text and link colors to a selector appropriate for a light background with dark text.
+    * `pug-micro-clearfix()`: *DEPRECATED (use `pug-clearfix()` instead)* [Provides Nicolas Gallagher's Micro Clearfix](http://nicolasgallagher.com/micro-clearfix-hack/).
+    * `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/_mixins.scss

@@ -28,10 +28,50 @@
 	@include pug-micro-clearfix();
 }
 
+// Maintain aspect ratio while dynamically filling 100% width.
+//
+// Great for use with background images with background-size:cover. Adapted from
+// @link https://css-tricks.com/snippets/sass/maintain-aspect-ratio-mixin/
+//
+// **Example markup:**
+//
+//     <div class="my-box">
+//       <div class="my-box-child">[arbitrary markup here]</div>
+//     </div>
+//
+// **Example SCSS,** creating a 16x9 box:
+//
+//     .my-box {
+//       @include pug-aspect-ratio(16, 9, .my-box-child);
+//     }
+//
+// @param int $width Ratio width as unitless integer.
+// @param int $height Ratio height as unitless integer.
+// @param string $child-selector Selector for the extra child element of the element
+//  receiving this mixin.
+@mixin pug-aspect-ratio($width, $height, $child-selector) {
+	position: relative;
+	&:before {
+		content: "";
+		display: block;
+		padding-top: ($height / $width) * 100%;
+		width: 100%;
+	}
+	> #{$child-selector} {
+		bottom: 0;
+		left: 0;
+		position: absolute;
+		right: 0;
+		top: 0;
+	}
+}
+
 // Quickly apply appropriate styles to an element for having a dark background.
 //
 // This mixin will adjust bg, text and link color.
 //
+// @deprecated
+//
 // @see pug-dark-bg-with-dark-text
 //
 // @param string $bg-color
@@ -82,6 +122,8 @@
 //
 // This mixin will adjust bg, text and link color.
 //
+// @deprecated
+//
 // @see pug-dark-bg-with-light-text
 //
 // @param string $bg-color
@@ -196,6 +238,8 @@
 //
 // Applies sr-only and shows the element again when it's focused. (adapted from Bootstrap 3)
 //
+// @deprecated
+//
 // @see pug-sr-only()
 // @see http://getbootstrap.com/css/#helper-classes-screen-readers
 //

metadata

@@ -1,27 +1,27 @@
 --- !ruby/object:Gem::Specification
 name: compass-pug
 version: !ruby/object:Gem::Version
-  version: 0.1.2
+  version: 0.2.0
 platform: ruby
 authors:
 - Andrew Kamm
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-07-30 00:00:00.000000000 Z
+date: 2015-12-18 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: compass
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ~>
+    - - "~>"
       - !ruby/object:Gem::Version
         version: '1.0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ~>
+    - - "~>"
       - !ruby/object:Gem::Version
         version: '1.0'
 description: Pug is a collection of mixins and functions for use in Sass/Compass projects.
@@ -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.0.14
+rubygems_version: 2.4.6
 signing_key: 
 specification_version: 4
 summary: A collection of mixins and functions for use in Sass/Compass projects.