Merge branch 'hotfix/v1.2.0-rc6'

dist/milligram.css

@@ -80,8 +80,8 @@ button[disabled],
 input[type='button'][disabled],
 input[type='reset'][disabled],
 input[type='submit'][disabled] {
-  opacity: .5;
   cursor: default;
+  opacity: .5;
 }
 
 .button[disabled]:focus, .button[disabled]:hover,
@@ -102,8 +102,8 @@ button.button-outline,
 input[type='button'].button-outline,
 input[type='reset'].button-outline,
 input[type='submit'].button-outline {
-  color: #9b4dca;
   background-color: transparent;
+  color: #9b4dca;
 }
 
 .button.button-outline:focus, .button.button-outline:hover,
@@ -115,9 +115,9 @@ input[type='reset'].button-outline:focus,
 input[type='reset'].button-outline:hover,
 input[type='submit'].button-outline:focus,
 input[type='submit'].button-outline:hover {
-  color: #606c76;
   background-color: transparent;
   border-color: #606c76;
+  color: #606c76;
 }
 
 .button.button-outline[disabled]:focus, .button.button-outline[disabled]:hover,
@@ -129,8 +129,8 @@ input[type='reset'].button-outline[disabled]:focus,
 input[type='reset'].button-outline[disabled]:hover,
 input[type='submit'].button-outline[disabled]:focus,
 input[type='submit'].button-outline[disabled]:hover {
-  color: #9b4dca;
   border-color: inherit;
+  color: #9b4dca;
 }
 
 .button.button-clear,
@@ -138,9 +138,9 @@ button.button-clear,
 input[type='button'].button-clear,
 input[type='reset'].button-clear,
 input[type='submit'].button-clear {
-  color: #9b4dca;
   background-color: transparent;
   border-color: transparent;
+  color: #9b4dca;
 }
 
 .button.button-clear:focus, .button.button-clear:hover,
@@ -152,9 +152,9 @@ input[type='reset'].button-clear:focus,
 input[type='reset'].button-clear:hover,
 input[type='submit'].button-clear:focus,
 input[type='submit'].button-clear:hover {
-  color: #606c76;
   background-color: transparent;
   border-color: transparent;
+  color: #606c76;
 }
 
 .button.button-clear[disabled]:focus, .button.button-clear[disabled]:hover,
@@ -181,11 +181,9 @@ code {
 pre {
   background: #f4f5f6;
   border-left: 0.3rem solid #9b4dca;
-  font-family: 'Menlo', 'Consolas', 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', 'Monaco', monospace;
 }
 
 pre > code {
-  background: transparent;
   border-radius: 0;
   display: block;
   padding: 1rem 1.5rem;
@@ -215,6 +213,7 @@ select {
   border: 0.1rem solid #d1d1d1;
   border-radius: .4rem;
   box-shadow: none;
+  box-sizing: inherit;
   height: 3.8rem;
   padding: .6rem 1.0rem;
   width: 100%;
@@ -229,7 +228,7 @@ input[type='text']:focus,
 input[type='url']:focus,
 textarea:focus,
 select:focus {
-  border: 0.1rem solid #9b4dca;
+  border-color: #9b4dca;
   outline: 0;
 }
 
@@ -244,8 +243,6 @@ select:focus {
 
 textarea {
   min-height: 6.5rem;
-  padding-bottom: .6rem;
-  padding-top: .6rem;
 }
 
 label,
@@ -324,6 +321,14 @@ input[type='radio'] {
       align-items: baseline;
 }
 
+.row.row-no-padding {
+  padding: 0;
+}
+
+.row.row-no-padding > .column {
+  padding: 0;
+}
+
 .row .column {
   display: block;
   flex: 1;
@@ -332,18 +337,6 @@ input[type='radio'] {
   width: 100%;
 }
 
-.row .column .col-top {
-  align-self: flex-start;
-}
-
-.row .column .col-bottom {
-  align-self: flex-end;
-}
-
-.row .column .col-center {
-  align-self: center;
-}
-
 .row .column.column-offset-10 {
   margin-left: 10%;
 }
@@ -435,7 +428,19 @@ input[type='radio'] {
   max-width: 90%;
 }
 
-@media (min-width: 640px) {
+.row .column .column-top {
+  align-self: flex-start;
+}
+
+.row .column .column-bottom {
+  align-self: flex-end;
+}
+
+.row .column .column-center {
+  align-self: center;
+}
+
+@media (min-width: 40rem) {
   .row {
     flex-direction: row;
     margin-left: -1.0rem;
@@ -452,13 +457,14 @@ a {
   text-decoration: none;
 }
 
-a:hover {
+a:hover, a:focus {
   color: #606c76;
 }
 
 dl,
 ol,
 ul {
+  list-style: none;
   margin-top: 0;
   padding-left: 0;
 }
@@ -476,10 +482,6 @@ ul ul {
   margin: 1.5rem 0 1.5rem 3.0rem;
 }
 
-dl {
-  list-style: none;
-}
-
 ol {
   list-style: decimal inside;
 }
@@ -488,17 +490,14 @@ ul {
   list-style: circle inside;
 }
 
+.button,
+button,
 dd,
 dt,
 li {
   margin-bottom: 1.0rem;
 }
 
-button,
-.button {
-  margin-bottom: 1.0rem;
-}
-
 fieldset,
 input,
 select,
@@ -524,7 +523,7 @@ table {
 
 td,
 th {
-  border-bottom: 0.1rem solid #f4f5f6;
+  border-bottom: 0.1rem solid #e1e1e1;
   padding: 1.2rem 1.5rem;
   text-align: left;
 }
@@ -550,25 +549,23 @@ h4,
 h5,
 h6 {
   font-weight: 300;
+  letter-spacing: -.1rem;
   margin-bottom: 2.0rem;
   margin-top: 0;
 }
 
 h1 {
   font-size: 4.0rem;
-  letter-spacing: -.1rem;
   line-height: 1.2;
 }
 
 h2 {
   font-size: 3.6rem;
-  letter-spacing: -.1rem;
   line-height: 1.25;
 }
 
 h3 {
   font-size: 3.0rem;
-  letter-spacing: -.1rem;
   line-height: 1.3;
 }
 
@@ -590,7 +587,7 @@ h6 {
   line-height: 1.4;
 }
 
-@media (min-width: 640px) {
+@media (min-width: 40rem) {
   h1 {
     font-size: 5.0rem;
   }
@@ -615,16 +612,9 @@ img {
   max-width: 100%;
 }
 
-.clearfix {
-  *zoom: 1;
-}
-
 .clearfix:after {
   clear: both;
-}
+  content: ' ';
-
-.clearfix:after, .clearfix:before {
-  content: '';
   display: table;
 }
 

src/_Base.sass

@@ -3,7 +3,7 @@
 // ––––––––––––––––––––––––––––––––––––––––––––––––––
 
 // The base font-size is set at 62.5% for having the convenience
-// of sizing rems in a way that is similar to using px. 1.6rem=16px
+// of sizing rems in a way that is similar to using px: 1.6rem = 16px
 html
 	box-sizing: border-box
 	font-size: 62.5%

src/_Code.sass

@@ -13,10 +13,8 @@ code
 pre
 	background: $color-tertiary
 	border-left: .3rem solid $color-primary
-	font-family: 'Menlo', 'Consolas', 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', 'Monaco', monospace
 
 	& > code
-		background: transparent
 		border-radius: 0
 		display: block
 		padding: 1rem 1.5rem

src/_Form.sass

@@ -16,12 +16,13 @@ select
 	border: .1rem solid $color-quaternary
 	border-radius: .4rem
 	box-shadow: none
+	box-sizing: inherit // Forced to replace inherit values of the normalize.css
 	height: 3.8rem
 	padding: .6rem 1.0rem // The .6rem vertically centers text on FF, ignored by Webkit
 	width: 100%
 
 	&:focus
-		border: .1rem solid $color-primary
+		border-color: $color-primary
 		outline: 0
 
 select
@@ -33,8 +34,6 @@ select
 
 textarea
 	min-height: 6.5rem
-	padding-bottom: .6rem
-	padding-top: .6rem
 
 label,
 legend

src/_Grid.sass

@@ -151,7 +151,7 @@
 			align-self: center
 
 // Larger than mobile screen
-@media (min-width: 640px)
+@media (min-width: 40.0rem) // Safari desktop has a bug using `rem`, but Safari mobile works
 
 	.row
 		flex-direction: row

src/_List.sass

@@ -5,6 +5,7 @@
 dl,
 ol,
 ul
+	list-style: none
 	margin-top: 0
 	padding-left: 0
 
@@ -14,16 +15,8 @@ ul
 		font-size: 90%
 		margin: 1.5rem 0 1.5rem 3.0rem
 
-dl
-	list-style: none
-
 ol
 	list-style: decimal inside
 
 ul
 	list-style: circle inside
-
-dd,
-dt,
-li
-	margin-bottom: 1.0rem

src/_Spacing.sass

@@ -2,8 +2,11 @@
 // Spacing
 // ––––––––––––––––––––––––––––––––––––––––––––––––––
 
+.button,
 button,
-.button
+dd,
+dt,
+li
 	margin-bottom: 1.0rem
 
 fieldset,

src/_Typography.sass

@@ -12,22 +12,20 @@ h4,
 h5,
 h6
 	font-weight: 300
+	letter-spacing: -.1rem
 	margin-bottom: 2.0rem
 	margin-top: 0
 
 h1
 	font-size: 4.0rem
-	letter-spacing: -.1rem
 	line-height: 1.2
 
 h2
 	font-size: 3.6rem
-	letter-spacing: -.1rem
 	line-height: 1.25
 
 h3
 	font-size: 3.0rem
-	letter-spacing: -.1rem
 	line-height: 1.3
 
 h4
@@ -46,7 +44,7 @@ h6
 	line-height: 1.4
 
 // Larger than mobile screen
-@media (min-width: 640px)
+@media (min-width: 40.0rem) // Safari desktop has a bug using `rem`, but Safari mobile works
 
 	h1
 		font-size: 5.0rem

src/_Utility.sass

@@ -4,14 +4,10 @@
 
 // Clear a float with .clearfix
 .clearfix
-	*zoom: 1
 
 	&:after
 		clear: both
-
+		content: ' ' // The space content is one way to avoid an Opera bug.
-	&:after,
-	&:before
-		content: ''
 		display: table
 
 // Float either direction

test/index.html

@@ -123,52 +123,42 @@
 							<ul>
 								<li>Unordered list item 1</li>
 								<li>Unordered list item 2</li>
-								<li>
+								<li>Unordered list item 3
 									<ul>
-										<li>Unordered list item 1</li>
+										<li>Unordered list item 3.1</li>
-										<li>Unordered list item 2</li>
+										<li>Unordered list item 3.2</li>
-										<li>
+										<li>Unordered list item 3.3</li>
-											<ul>
-												<li>Unordered list item 1</li>
-												<li>Unordered list item 2</li>
-											</ul>
-										</li>
 									</ul>
 								</li>
-								<li>Unordered list item 3</li>
 								<li>Unordered list item 4</li>
+								<li>Unordered list item 5</li>
 							</ul>
 						</div>
 						<div class="column">
 							<ol>
 								<li>Ordered list item 1</li>
 								<li>Ordered list item 2</li>
-								<li>
+								<li>Ordered list item 3
 									<ol>
-										<li>Ordered list item 1</li>
+										<li>Ordered list item 3.1</li>
-										<li>Ordered list item 2</li>
+										<li>Ordered list item 3.2</li>
-										<li>
+										<li>Ordered list item 3.3</li>
-											<ol>
-												<li>Ordered list item 1</li>
-												<li>Ordered list item 2</li>
-											</ol>
-										</li>
 									</ol>
 								</li>
-								<li>Ordered list item 3</li>
 								<li>Ordered list item 4</li>
+								<li>Ordered list item 5</li>
 							</ol>
 						</div>
 						<div class="column">
 							<dl>
 								<dt>Description list item 1</dt>
-								<dd>Description list item 1.1</dd>
-								<dd>Description list item 1.2</dd>
-								<dd>Description list item 1.3</dd>
 								<dt>Description list item 2</dt>
-								<dd>Description list item 2.1</dd>
 								<dt>Description list item 3</dt>
 								<dd>Description list item 3.1</dd>
+								<dd>Description list item 3.2</dd>
+								<dd>Description list item 3.3</dd>
+								<dt>Description list item 4</dt>
+								<dt>Description list item 5</dt>
 							</dl>
 						</div>
 					</div>