From 9461a2de8a3c8fa4e2dc2e28a5dcea924a3df65b Mon Sep 17 00:00:00 2001 From: Daniel Box Date: Mon, 15 Jun 2015 20:34:19 -0500 Subject: [PATCH 1/2] add rem calculator --- axis/utilities.styl | 18 +++++++++++++++++- test/fixtures/utilities/rem-calculator.css | 3 +++ test/fixtures/utilities/rem-calculator.styl | 2 ++ test/test.coffee | 3 +++ test/visual.html | 5 +++++ 5 files changed, 30 insertions(+), 1 deletion(-) create mode 100644 test/fixtures/utilities/rem-calculator.css create mode 100644 test/fixtures/utilities/rem-calculator.styl diff --git a/axis/utilities.styl b/axis/utilities.styl index 8fa9e68..bd4dfa3 100644 --- a/axis/utilities.styl +++ b/axis/utilities.styl @@ -212,7 +212,7 @@ border-box-html() html box-sizing: border-box - *, + *, *:before, *:after box-sizing: inherit @@ -426,3 +426,19 @@ cache-images() body:after display: none content: background-images + +// Mixin: Rem Calculator +// +// Calculates and returns the rem value based on px input. Default base font +// size is 16px, but can be changed with base-font-size. +// +// ex : rem(30px) or rem(30) +// returns : 1.875rem + +rem(value) + base-font-size ?= 16px + type = unit(value) + if type == px + return unit(value / base-font-size, 'rem') + else + return unit(value, type) diff --git a/test/fixtures/utilities/rem-calculator.css b/test/fixtures/utilities/rem-calculator.css new file mode 100644 index 0000000..97fa801 --- /dev/null +++ b/test/fixtures/utilities/rem-calculator.css @@ -0,0 +1,3 @@ +.rem-calculator{ + font-size: 1.875rem; +} diff --git a/test/fixtures/utilities/rem-calculator.styl b/test/fixtures/utilities/rem-calculator.styl new file mode 100644 index 0000000..ba4b8c7 --- /dev/null +++ b/test/fixtures/utilities/rem-calculator.styl @@ -0,0 +1,2 @@ +.rem-calculator + font-size: rem(30px) diff --git a/test/test.coffee b/test/test.coffee index f5ee98e..1b7d378 100644 --- a/test/test.coffee +++ b/test/test.coffee @@ -264,6 +264,9 @@ describe 'utilities', -> it 'raquo', (done) -> compile_and_match(path.join(@path, 'raquo.styl'), done) + it 'rem-calculator', (done) -> + compile_and_match(path.join(@path, 'rem-calculator.styl'), done) + it 'rounded', (done) -> compile_and_match(path.join(@path, 'rounded.styl'), done) diff --git a/test/visual.html b/test/visual.html index 09bb562..5dc2b61 100644 --- a/test/visual.html +++ b/test/visual.html @@ -78,6 +78,7 @@ + @@ -400,6 +401,10 @@

utilities

look at this

+ +
Font-size is set as 30px but the browser see it as 1.875rem
+ +
look im rounded
From ec972440961b1a2f25130998b23b48868705e63b Mon Sep 17 00:00:00 2001 From: Daniel Box Date: Mon, 15 Jun 2015 21:12:54 -0500 Subject: [PATCH 2/2] add quantity queries --- axis/utilities.styl | 30 ++++++++++++++++ test/fixtures/utilities/quantity-queries.css | 17 +++++++++ test/fixtures/utilities/quantity-queries.styl | 16 +++++++++ test/test.coffee | 3 ++ test/visual.html | 36 +++++++++++++++++++ 5 files changed, 102 insertions(+) create mode 100644 test/fixtures/utilities/quantity-queries.css create mode 100644 test/fixtures/utilities/quantity-queries.styl diff --git a/axis/utilities.styl b/axis/utilities.styl index bd4dfa3..96b2e45 100644 --- a/axis/utilities.styl +++ b/axis/utilities.styl @@ -442,3 +442,33 @@ rem(value) return unit(value / base-font-size, 'rem') else return unit(value, type) + +// Block Mixin: Quantity Queries +// +// Set rules for a selector based on a specific sibling count. +// via: https://github.com/pascalduez/postcss-quantity-queries +// +// ex. +quantity-at-least(6) +// ex. +quantity-at-most(12, div) +// ex. +quantity-between(0, 8, span) +// ex. +quantity-exactly(5) + +quantity-at-least(count=4, selector=li) + & > {selector}:nth-last-child(n+{count}) + & > {selector}:nth-last-child(n+{count}) ~ {selector} + {block} + +quantity-at-most(count=4, selector=li) + & > {selector}:nth-last-child(-n+{count}):first-child + & > {selector}:nth-last-child(-n+{count}):first-child ~ {selector} + {block} + +quantity-between(start=0, end=10, selector=li) + & > {selector}:nth-last-child(n+{start}):nth-last-child(-n+{end}):first-child + & > {selector}:nth-last-child(n+{start}):nth-last-child(-n+{end}):first-child ~ {selector} + {block} + +quantity-exactly(count=4, selector=li) + & > {selector}:nth-last-child({count}):first-child + & > {selector}:nth-last-child({count}):first-child ~ {selector} + {block} diff --git a/test/fixtures/utilities/quantity-queries.css b/test/fixtures/utilities/quantity-queries.css new file mode 100644 index 0000000..6ccb5f7 --- /dev/null +++ b/test/fixtures/utilities/quantity-queries.css @@ -0,0 +1,17 @@ +.least > li:nth-last-child(n+2), +.least > li:nth-last-child(n+2) ~ li { + border: 1px solid #09f; +} +.between > div:nth-last-child(n+0):nth-last-child(-n+20):first-child, +.between > div:nth-last-child(n+0):nth-last-child(-n+20):first-child ~ div { + border: 1px solid #f90; +} +.most > li:nth-last-child(-n+7):first-child, +.most > li:nth-last-child(-n+7):first-child ~ li { + background: #e35; + color: #fff; +} +.exactly > li:nth-last-child(5):first-child, +.exactly > li:nth-last-child(5):first-child ~ li { + border: 1px solid #0c5; +} diff --git a/test/fixtures/utilities/quantity-queries.styl b/test/fixtures/utilities/quantity-queries.styl new file mode 100644 index 0000000..e4f4efa --- /dev/null +++ b/test/fixtures/utilities/quantity-queries.styl @@ -0,0 +1,16 @@ +.least + +quantity-at-least(2) + border: 1px solid #0099ff + +.between + +quantity-between(0, 20, div) + border: 1px solid #ff9900 + +.most + +quantity-at-most(7) + background: #ee3355 + color: white + +.exactly + +quantity-exactly(5) + border: 1px solid #00cc55 diff --git a/test/test.coffee b/test/test.coffee index 1b7d378..6d5e848 100644 --- a/test/test.coffee +++ b/test/test.coffee @@ -255,6 +255,9 @@ describe 'utilities', -> it 'media', (done) -> compile_and_match(path.join(@path, 'media.styl'), done) + it 'quantity-queries', (done) -> + compile_and_match(path.join(@path, 'quantity-queries.styl'), done) + it 'ratio-box', (done) -> compile_and_match(path.join(@path, 'ratio-box.styl'), done) diff --git a/test/visual.html b/test/visual.html index 5dc2b61..f90b6f1 100644 --- a/test/visual.html +++ b/test/visual.html @@ -75,6 +75,7 @@ + @@ -393,6 +394,41 @@

utilities

comment

+
+ h4>Add blue border of there are at least 2 lis: +
    +
  • i'm one
    • +
  • two
    • +
  • tres
    • +
  • four
    • +
  • five
    • +
+

Add orange border if between 0 and 20 elments:

+
+
i'm one
+
two
+
tres
+
four
+
five
+
+

Pink background if there are at most 9

+
    +
  • i'm one
    • +
  • two
    • +
  • tres
    • +
  • four
    • +
  • five
    • +
+

Green border if exactly 5:

+
    +
  • i'm one
    • +
  • two
    • +
  • tres
    • +
  • four
    • +
  • five
    • +
+
+