Commit 3c34d55a authored by Oskar Kalbag's avatar Oskar Kalbag

Actually added the hairline support in this commit (not the last).

parent e78ecf02
......@@ -3,8 +3,12 @@ body {
border: 0.0625rem solid #000;
width: 1000px;
width: 62.5rem;
margin: 24px;
padding: 48px;
margin: 24px 1px 1px;
/* Make sure that the rule is written out only once in case there is no rem substitution */
margin: 1.5rem;
padding: 48px 1px 1px;
/* Make sure that the rule is written out only once in case there is no rem substitution */
padding: 3rem;
line-height: 24px;
line-height: 1.5rem;
font-size: 18px;
......@@ -13,7 +17,8 @@ body {
div {
width: 500px;
width: 31.25rem;
margin: 24px 0;
margin: 24px 0 1px 1px;
/* Make sure that the rule is written out only once in case there is no rem substitution */
margin: 1.5rem 0;
background-color: #eee;
}
......@@ -36,36 +41,51 @@ h2 {
border-bottom: 0.0625rem solid #000;
}
#test-margin-inherit-parent-element {
margin: 42px;
margin: 42px 1px 1px;
/* Make sure that the rule is written out only once in case there is no rem substitution */
margin: 2.625rem;
border: 1px dashed;
border: 0.0625rem dashed;
}
#test-margin-inherit {
margin: inherit 1px 1px;
/* Make sure that the rule is written out only once in case there is no rem substitution */
margin: inherit;
}
#test-margin-horizontal-centering {
margin: 0 auto 1px 1px;
/* Make sure that the rule is written out only once in case there is no rem substitution */
margin: 0 auto;
}
#test-margin-one-argument {
margin: 10px;
margin: 10px 1px 1px;
/* Make sure that the rule is written out only once in case there is no rem substitution */
margin: 0.625rem;
}
#test-margin-two-arguments {
margin: 10px 20px;
margin: 10px 20px 1px 1px;
/* Make sure that the rule is written out only once in case there is no rem substitution */
margin: 0.625rem 1.25rem;
}
#test-margin-two-arguments-with-zero {
margin: 10px 0;
margin: 10px 0 1px 1px;
/* Make sure that the rule is written out only once in case there is no rem substitution */
margin: 0.625rem 0;
}
#test-margin-three-arguments {
margin: 10px 20px 30px;
margin: 10px 20px 1px 1px;
/* Make sure that the rule is written out only once in case there is no rem substitution */
margin: 0.625rem 1.25rem 1.875rem;
}
#test-margin-four-arguments {
margin: 10px 20px 30px 40px;
margin: 10px 20px 1px 1px;
/* Make sure that the rule is written out only once in case there is no rem substitution */
margin: 0.625rem 1.25rem 1.875rem 2.5rem;
}
#test-margin-four-hairlines {
margin: 1px 1px 1px 1px;
/* Make sure that the rule is written out only once in case there is no rem substitution */
}
#test-margin-top {
margin-top: 10px;
margin-top: 0.625rem;
......@@ -82,19 +102,27 @@ h2 {
margin-left: 40px;
margin-left: 2.5rem;
}
#test-margin-hairline {
margin-left: 1px;
margin-left: '1px';
}
#test-padding-one-argument {
padding: 10px;
padding: 10px 1px 1px;
/* Make sure that the rule is written out only once in case there is no rem substitution */
padding: 0.625rem;
}
#test-padding-two-arguments {
padding: 10px 20px;
padding: 10px 20px 1px 1px;
/* Make sure that the rule is written out only once in case there is no rem substitution */
padding: 0.625rem 1.25rem;
}
#test-padding-three-arguments {
padding: 10px 20px 30px;
padding: 10px 20px 1px 1px;
/* Make sure that the rule is written out only once in case there is no rem substitution */
padding: 0.625rem 1.25rem 1.875rem;
}
#test-padding-four-arguments {
padding: 10px 20px 30px 40px;
padding: 10px 20px 1px 1px;
/* Make sure that the rule is written out only once in case there is no rem substitution */
padding: 0.625rem 1.25rem 1.875rem 2.5rem;
}
......@@ -139,6 +167,13 @@ h2 {
}
#test-background-size {
background-image: linear-gradient(90deg, transparent 50%, rgba(255,255,255,0.5) 50%);
background-size: 500px 500px;
background-size: 500px 500px 1px 1px;
/* Make sure that the rule is written out only once in case there is no rem substitution */
background-size: 31.25rem 31.25rem;
}
#test-background-size-cover {
background-image: linear-gradient(90deg, transparent 50%, rgba(255,255,255,0.5) 50%);
background-size: cover 1px 1px;
/* Make sure that the rule is written out only once in case there is no rem substitution */
background-size: cover;
}
......@@ -23,6 +23,8 @@
remify(value)
if value == 'inherit' || value == 'auto' || value == 'none' || value == 'cover' || value == 'smaller' || value == 0 || value == null
value
else if value == 'hairline'
'1px'
else if unit(value) == 'px'
unit(value/16, 'rem')
else
......@@ -43,6 +45,15 @@ abstract-shorthand(attr, originalArguments)
rB = remify(b)
rL = remify(l)
if t == 'hairline'
t = 1px
if r == 'hairline'
r = 1px
if b = 'hairline'
b = 1px
if l = 'hairline'
l = 1px
if l || l == 0
{attr} t r b l
/* Make sure that the rule is written out only once in case there is no rem substitution */
......@@ -67,7 +78,11 @@ abstract-longhand(attr, originalArguments)
value = originalArguments[0]
remifiedValue = remify(value)
{attr} value
if value == 'hairline'
{attr} 1px
else
{attr} value
if value != remifiedValue
{attr} remify(value)
......@@ -219,44 +234,45 @@ hyphens(value)
//
// This is the default root line height
baseLineHeight = 24rem
QuarterLineHeight = baseLineHeight/4 rem
HalfLineHeight = baseLineHeight/2 rem
ThreeQuartersLineHeight = baseLineHeight*3/4 rem
OneLineHeight = baseLineHeight rem
OneAndAHalfLineHeights = baseLineHeight*1.5 rem
OneAndAQuarterLineHeights = baseLineHeight*1.25 rem
OneAndThreeQuartersLineHeights = baseLineHeight*1.75 rem
TwoLineHeights = baseLineHeight*2 rem
TwoAndAQuarterLineHeights = baseLineHeight*2.25 rem
TwoAndAHalfLineHeights = baseLineHeight*2.5 rem
TwoAndThreeQuartersLineHeights = baseLineHeight*2.75 rem
ThreeLineHeights = baseLineHeight*3 rem
ThreeAndAQuarterLineHeights = baseLineHeight*3.25 rem
ThreeAndAHalfLineHeights = baseLineHeight*3.5 rem
ThreeAndThreeQuartersLineHeights = baseLineHeight*3.75 rem
FourLineHeights = baseLineHeight*4 rem
FiveLineHeights = baseLineHeight*5 rem
baseLineHeight = 24
QuarterLineHeight = baseLineHeight/4 px
HalfLineHeight = baseLineHeight/2 px
ThreeQuartersLineHeight = baseLineHeight*3/4 px
OneLineHeight = baseLineHeight px
OneAndAHalfLineHeights = baseLineHeight*1.5 px
OneAndAQuarterLineHeights = baseLineHeight*1.25 px
OneAndThreeQuartersLineHeights = baseLineHeight*1.75 px
TwoLineHeights = baseLineHeight*2 px
TwoAndAQuarterLineHeights = baseLineHeight*2.25 px
TwoAndAHalfLineHeights = baseLineHeight*2.5 px
TwoAndThreeQuartersLineHeights = baseLineHeight*2.75 px
ThreeLineHeights = baseLineHeight*3 px
ThreeAndAQuarterLineHeights = baseLineHeight*3.25 px
ThreeAndAHalfLineHeights = baseLineHeight*3.5 px
ThreeAndThreeQuartersLineHeights = baseLineHeight*3.75 px
FourLineHeights = baseLineHeight*4 px
FiveLineHeights = baseLineHeight*5 px
calculateLineHeightConstants()
QuarterLineHeight = baseLineHeight/4 rem
HalfLineHeight = baseLineHeight/2 rem
ThreeQuartersLineHeight = baseLineHeight*3/4 rem
OneLineHeight = baseLineHeight rem
OneAndAHalfLineHeights = baseLineHeight*1.5 rem
OneAndAQuarterLineHeights = baseLineHeight*1.25 rem
OneAndThreeQuartersLineHeights = baseLineHeight*1.75 rem
TwoLineHeights = baseLineHeight*2 rem
TwoAndAQuarterLineHeights = baseLineHeight*2.25 rem
TwoAndAHalfLineHeights = baseLineHeight*2.5 rem
TwoAndThreeQuartersLineHeights = baseLineHeight*2.75 rem
ThreeLineHeights = baseLineHeight*3 rem
ThreeAndAQuarterLineHeights = baseLineHeight*3.25 rem
ThreeAndAHalfLineHeights = baseLineHeight*3.5 rem
ThreeAndThreeQuartersLineHeights = baseLineHeight*3.75 rem
FourLineHeights = baseLineHeight*4 rem
FiveLineHeights = baseLineHeight*5 rem
QuarterLineHeight = baseLineHeight/4 px
HalfLineHeight = baseLineHeight/2 px
ThreeQuartersLineHeight = baseLineHeight*3/4 px
OneLineHeight = baseLineHeight px
OneAndAHalfLineHeights = baseLineHeight*1.5 px
OneAndAQuarterLineHeights = baseLineHeight*1.25 px
OneAndThreeQuartersLineHeights = baseLineHeight*1.75 px
TwoLineHeights = baseLineHeight*2 px
TwoAndAQuarterLineHeights = baseLineHeight*2.25 px
TwoAndAHalfLineHeights = baseLineHeight*2.5 px
TwoAndThreeQuartersLineHeights = baseLineHeight*2.75 px
ThreeLineHeights = baseLineHeight*3 px
ThreeAndAQuarterLineHeights = baseLineHeight*3.25 px
ThreeAndAHalfLineHeights = baseLineHeight*3.5 px
ThreeAndThreeQuartersLineHeights = baseLineHeight*3.75 px
FourLineHeights = baseLineHeight*4 px
FiveLineHeights = baseLineHeight*5 px
//
// Displays a baseline grid (optionally with a horizontal grid also set to the base line height)
......
......@@ -29,6 +29,8 @@
<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>
<div id='test-margin-four-hairlines' data-assert='margin-top: 1px; margin-right: 1px; margin-bottom: 1px; margin-left: 1px'><code>margin hairline hairline hairline hairline</code></div>
<!-- Longhand -->
<div id='test-margin-top' data-assert='margin-top: 10px'><code>margin-top 10px</code></div>
......@@ -39,6 +41,9 @@
<div id='test-margin-left' data-assert='margin-left: 40px'><code>margin-left 40px</code></div>
<div id='test-margin-hairline' data-assert='margin-left: 1px'><code>margin-left hairline</code></div>
</section>
<section>
<h2>Padding</h2>
......
......@@ -55,6 +55,9 @@ h2
#test-margin-four-arguments
margin 10px 20px 30px 40px
#test-margin-four-hairlines
margin hairline hairline hairline hairline
#test-margin-top
margin-top 10px
......@@ -67,6 +70,9 @@ h2
#test-margin-left
margin-left 40px
#test-margin-hairline
margin-left hairline
// Padding
#test-padding-one-argument
......
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