Ind.ie is now Small Technology Foundation.
Commit 09685f7f authored by Aral Balkan's avatar Aral Balkan

Added workaround for possible Stylus bug with repeated variables (you must...

Added workaround for possible Stylus bug with repeated variables (you must specify the unit explicitly. Added test to make this visible.
parent 2024f650
/* line 150 : stdin */
/* line 157 : stdin */
/* line 1 : /Users/aral/Ind.ie/products/site/source/assets/stylus/indie-style-core/responsive-pixels/node_modules/stylus/lib/functions/index.styl */
......@@ -241,7 +241,7 @@ h2 {
background-size: 100%;
}
/* line 148 : stdin */
/* line 147 : stdin */
#test-bang-important {
width: 100px !important;
width: 6.25rem !important;
......@@ -249,3 +249,10 @@ h2 {
width: 31.25rem;
}
/* line 156 : stdin */
#test-padding-at-half-line-height {
padding: 12px 0 12px 12px;
/* Make sure that the rule is written out only once in case there is no rem substitution */
padding: 0.75rem 0 0.75rem 0.75rem;
}
......@@ -22,6 +22,7 @@
/* Convert unit to REMs if unit is in pixels. */
remify(value)
if value == 'inherit' || value == 'auto' || value == 'none' || value == 'cover' || value == 'contain' || value == 'smaller' || value == '!important' || value == 0 || value == null
value
else if value == 'hairline'
......@@ -243,11 +244,15 @@ hyphens(value)
// Helpers (using line height as your unit of scale for vertical/horizontal rhythm.)
//
dividePixels(a,b)
r = (a / b)
return unit(r, 'px')
// This is the default root line height
baseLineHeight = 24
QuarterLineHeight = baseLineHeight/4 px
HalfLineHeight = baseLineHeight/2 px
HalfLineHeight = dividePixels(baseLineHeight, 2)
ThreeQuartersLineHeight = baseLineHeight*3/4 px
OneLineHeight = baseLineHeight px
OneAndAHalfLineHeights = baseLineHeight*1.5 px
......
<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>Responsive Pixels Test Suite</title>
<link rel='stylesheet' href='css/reset.css'>
<link rel='stylesheet' href='css/tests.css'>
......@@ -98,6 +99,10 @@
<h2>!imporant</h2>
<div id='test-bang-important' data-assert='width:100px'>width 100px !important</div>
</section>
<section>
<h2>Vertical rhythm helpers</h2>
<div id='test-padding-at-half-line-height' data-assert='padding: 12px 0px 12px 12px'>padding unit(HalfLineHeight, 'px') 0 …</div>
</section>
<script src='dom-style-test-runner.js'></script>
......
......@@ -147,3 +147,11 @@ h2
#test-bang-important
width 100px !important
width 500px
// Note: This might be a bug in Stylus — if a variable is repeated, as it is here,
// ===== It works only for x x x 0. Any other orientations only result in the last
// variable being used *unless* you explicitly wrap the variable in a unit()
// call as shown here.
// TODO: File this as a bug with the Stylus folks.
#test-padding-at-half-line-height
padding unit(HalfLineHeight, 'px') 0 unit(HalfLineHeight, 'px') unit(HalfLineHeight, 'px')
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