Ind.ie is now Small Technology Foundation.
Commit 168c240b authored by Oskar Kalbag's avatar Oskar Kalbag

Updated the abstract-shorthand method so mixins should be forgiving of all CSS...

Updated the abstract-shorthand method so mixins should be forgiving of all CSS units in any shorthand configuration now.
parent 7d55ad65
......@@ -15,8 +15,8 @@ body {
div {
width: 500px;
width: 31.25rem;
margin: 24px;
margin: 1.5rem;
margin: 24px 0;
margin: 1.5rem 0;
background-color: #eee;
}
h1 {
......@@ -45,9 +45,11 @@ h2 {
}
#test-margin-inherit {
margin: inherit;
margin: inherit;
}
#test-margin-horizontal-centering {
margin: 0 auto;
margin: 0 auto;
}
#test-margin-one-argument {
margin: 10px;
......@@ -57,6 +59,10 @@ h2 {
margin: 10px 20px;
margin: 0.625rem 1.25rem;
}
#test-margin-two-arguments-with-zero {
margin: 10px 0;
margin: 0.625rem 0;
}
#test-margin-three-arguments {
margin: 10px 20px 30px;
margin: 0.625rem 1.25rem 1.875rem;
......
......@@ -150,37 +150,46 @@ line-height(h)
else
line-height unit(h, unit(h))
/* Convert unit if pixel */
fallbackify(value)
if value == 'inherit' || value == 'auto' || value == 0
value
else if unit(value) == 'px'
unit(value, 'px')
else
unit(value, unit(value))
remify(value)
if value == 'inherit' || value == 'auto' || value == 0
value
else if unit(value) == 'px'
unit(value/16, 'rem')
else
unit(value, unit(value))
/* Abstract shorthand for attributes that can have 1-4 arguments
(top, right, left, bottom) */
abstract-shorthand(attr, originalArguments)
t = originalArguments[0]
if t == 'inherit' || t == 'auto'
{attr} originalArguments
else if unit(originalArguments[0]) == 'px'
r = originalArguments[1]
b = originalArguments[2]
l = originalArguments[3]
if l
{attr} unit(t, 'px') unit(r, 'px') unit(b, 'px') unit(l, 'px')
{attr} unit(t/16, 'rem') unit(r/16, 'rem') unit(b/16, 'rem') unit(l/16, 'rem')
else if b
{attr} unit(t, 'px') unit(r, 'px') unit(b, 'px')
{attr} unit(t/16, 'rem') unit(r/16, 'rem') unit(b/16, 'rem')
else if r
{attr} unit(t, 'px') unit(r, 'px')
{attr} unit(t/16, 'rem') unit(r/16, 'rem')
else if t
{attr} unit(t, 'px')
{attr} unit(t/16, 'rem')
else
{attr} originalArguments
r = originalArguments[1]
b = originalArguments[2]
l = originalArguments[3]
if l || l == 0
{attr} fallbackify(t) fallbackify(r) fallbackify(b) fallbackify(l)
{attr} remify(t) remify(r) remify(b) remify(l)
else if b || b == 0
{attr} fallbackify(t) fallbackify(r) fallbackify(b)
{attr} remify(t) remify(r) remify(b)
else if r || r == 0
{attr} fallbackify(t) fallbackify(r)
{attr} remify(t) remify(r)
else if t || t == 0
{attr} fallbackify(t)
{attr} remify(t)
/* Abstract longhand for attributes that take a single value */
......
......@@ -23,6 +23,8 @@
<div id='test-margin-two-arguments' data-assert='margin-top: 10px; margin-right: 20px; margin-bottom: 10px; margin-right: 20px'><code>margin 10px 20px</code></div>
<div id='test-margin-two-arguments-with-zero' data-assert='margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-right: 0px'><code>margin 10px 0</code></div>
<div id='test-margin-three-arguments' data-assert='margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 20px'><code>margin 10px 20px 30px</code></div>
<div id='test-margin-four-arguments' data-assert='margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px'><code>margin 10px 20px 30px 40px</code></div>
......
......@@ -46,6 +46,9 @@ h2
#test-margin-two-arguments
margin 10px 20px
#test-margin-two-arguments-with-zero
margin 10px 0
#test-margin-three-arguments
margin 10px 20px 30px
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment