diff --git a/src/_Base.sass b/src/_Base.sass
index ab1880f..0556df6 100644
--- a/src/_Base.sass
+++ b/src/_Base.sass
@@ -6,19 +6,19 @@
*,
*:after,
*:before
- box-sizing: inherit
+ box-sizing: inherit
// 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
html
- box-sizing: border-box
- font-size: 62.5%
+ box-sizing: border-box
+ font-size: 62.5%
// Default body styles
body
- color: $color-secondary
- font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif
- font-size: 1.6em // Currently ems cause chrome bug misinterpreting rems on body element
- font-weight: 300
- letter-spacing: .01em
- line-height: 1.6
+ color: $color-secondary
+ font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif
+ font-size: 1.6em // Currently ems cause chrome bug misinterpreting rems on body element
+ font-weight: 300
+ letter-spacing: .01em
+ line-height: 1.6
diff --git a/src/_Blockquote.sass b/src/_Blockquote.sass
index dff5eca..9bfce59 100644
--- a/src/_Blockquote.sass
+++ b/src/_Blockquote.sass
@@ -3,10 +3,10 @@
// ––––––––––––––––––––––––––––––––––––––––––––––––––
blockquote
- border-left: .3rem solid $color-quaternary
- margin-left: 0
- margin-right: 0
- padding: 1rem 1.5rem
+ border-left: .3rem solid $color-quaternary
+ margin-left: 0
+ margin-right: 0
+ padding: 1rem 1.5rem
- *:last-child
- margin-bottom: 0
+ *:last-child
+ margin-bottom: 0
diff --git a/src/_Button.sass b/src/_Button.sass
index 9c422b7..c861c41 100644
--- a/src/_Button.sass
+++ b/src/_Button.sass
@@ -7,69 +7,69 @@ button,
input[type='button'],
input[type='reset'],
input[type='submit']
- background-color: $color-primary
- border: .1rem solid $color-primary
- border-radius: .4rem
- color: $color-initial
- cursor: pointer
- display: inline-block
- font-size: 1.1rem
- font-weight: 700
- height: 3.8rem
- letter-spacing: .1rem
- line-height: 3.8rem
- padding: 0 3.0rem
- text-align: center
- text-decoration: none
- text-transform: uppercase
- white-space: nowrap
+ background-color: $color-primary
+ border: .1rem solid $color-primary
+ border-radius: .4rem
+ color: $color-initial
+ cursor: pointer
+ display: inline-block
+ font-size: 1.1rem
+ font-weight: 700
+ height: 3.8rem
+ letter-spacing: .1rem
+ line-height: 3.8rem
+ padding: 0 3.0rem
+ text-align: center
+ text-decoration: none
+ text-transform: uppercase
+ white-space: nowrap
- &:focus,
- &:hover
- background-color: $color-secondary
- border-color: $color-secondary
- color: $color-initial
- outline: 0
+ &:focus,
+ &:hover
+ background-color: $color-secondary
+ border-color: $color-secondary
+ color: $color-initial
+ outline: 0
- &[disabled]
- cursor: default
- opacity: .5
+ &[disabled]
+ cursor: default
+ opacity: .5
- &:focus,
- &:hover
- background-color: $color-primary
- border-color: $color-primary
+ &:focus,
+ &:hover
+ background-color: $color-primary
+ border-color: $color-primary
- &.button-outline
- background-color: transparent
- color: $color-primary
+ &.button-outline
+ background-color: transparent
+ color: $color-primary
- &:focus,
- &:hover
- background-color: transparent
- border-color: $color-secondary
- color: $color-secondary
+ &:focus,
+ &:hover
+ background-color: transparent
+ border-color: $color-secondary
+ color: $color-secondary
- &[disabled]
+ &[disabled]
- &:focus,
- &:hover
- border-color: inherit
- color: $color-primary
+ &:focus,
+ &:hover
+ border-color: inherit
+ color: $color-primary
- &.button-clear
- background-color: transparent
- border-color: transparent
- color: $color-primary
+ &.button-clear
+ background-color: transparent
+ border-color: transparent
+ color: $color-primary
- &:focus,
- &:hover
- background-color: transparent
- border-color: transparent
- color: $color-secondary
+ &:focus,
+ &:hover
+ background-color: transparent
+ border-color: transparent
+ color: $color-secondary
- &[disabled]
+ &[disabled]
- &:focus,
- &:hover
- color: $color-primary
+ &:focus,
+ &:hover
+ color: $color-primary
diff --git a/src/_Code.sass b/src/_Code.sass
index fd0d8df..12749ef 100644
--- a/src/_Code.sass
+++ b/src/_Code.sass
@@ -3,20 +3,20 @@
// ––––––––––––––––––––––––––––––––––––––––––––––––––
code
- background: $color-tertiary
- border-radius: .4rem
- font-size: 86%
- margin: 0 .2rem
- padding: .2rem .5rem
- white-space: nowrap
+ background: $color-tertiary
+ border-radius: .4rem
+ font-size: 86%
+ margin: 0 .2rem
+ padding: .2rem .5rem
+ white-space: nowrap
pre
- background: $color-tertiary
- border-left: .3rem solid $color-primary
- overflow-y: hidden
+ background: $color-tertiary
+ border-left: .3rem solid $color-primary
+ overflow-y: hidden
- & > code
- border-radius: 0
- display: block
- padding: 1rem 1.5rem
- white-space: pre
+ & > code
+ border-radius: 0
+ display: block
+ padding: 1rem 1.5rem
+ white-space: pre
diff --git a/src/_Divider.sass b/src/_Divider.sass
index 1583766..d8dceed 100644
--- a/src/_Divider.sass
+++ b/src/_Divider.sass
@@ -3,6 +3,6 @@
// ––––––––––––––––––––––––––––––––––––––––––––––––––
hr
- border: 0
- border-top: .1rem solid $color-tertiary
- margin: 3.0rem 0
+ border: 0
+ border-top: .1rem solid $color-tertiary
+ margin: 3.0rem 0
diff --git a/src/_Form.sass b/src/_Form.sass
index 8a0acac..0ce9d0f 100644
--- a/src/_Form.sass
+++ b/src/_Form.sass
@@ -2,62 +2,62 @@
// Form
// ––––––––––––––––––––––––––––––––––––––––––––––––––
-input[type=color],
-input[type=date],
-input[type=datetime],
-input[type=datetime-local],
-input[type=email],
-input[type=month],
-input[type=number],
-input[type=password],
-input[type=search],
-input[type=tel],
-input[type=text],
-input[type=url],
-input[type=week],
+input[type='color'],
+input[type='date'],
+input[type='datetime'],
+input[type='datetime-local'],
+input[type='email'],
+input[type='month'],
+input[type='number'],
+input[type='password'],
+input[type='search'],
+input[type='tel'],
+input[type='text'],
+input[type='url'],
+input[type='week'],
input:not([type]),
textarea,
select
- appearance: none // Removes awkward default styles on some inputs for iOS
- background-color: transparent
- 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%
+ appearance: none // Removes awkward default styles on some inputs for iOS
+ background-color: transparent
+ 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-color: $color-primary
- outline: 0
+ &:focus
+ border-color: $color-primary
+ outline: 0
select
- background: url('data:image/svg+xml;utf8,') center right no-repeat
- padding-right: 3.0rem
+ background: url('data:image/svg+xml;utf8,') center right no-repeat
+ padding-right: 3.0rem
- &:focus
- background-image: url('data:image/svg+xml;utf8,')
+ &:focus
+ background-image: url('data:image/svg+xml;utf8,')
textarea
- min-height: 6.5rem
+ min-height: 6.5rem
label,
legend
- display: block
- font-size: 1.6rem
- font-weight: 700
- margin-bottom: .5rem
+ display: block
+ font-size: 1.6rem
+ font-weight: 700
+ margin-bottom: .5rem
fieldset
- border-width: 0
- padding: 0
+ border-width: 0
+ padding: 0
input[type='checkbox'],
input[type='radio']
- display: inline
+ display: inline
.label-inline
- display: inline-block
- font-weight: normal
- margin-left: .5rem
+ display: inline-block
+ font-weight: normal
+ margin-left: .5rem
diff --git a/src/_Grid.sass b/src/_Grid.sass
index 67bff4b..c8367fe 100644
--- a/src/_Grid.sass
+++ b/src/_Grid.sass
@@ -4,11 +4,11 @@
// .container is main centered wrapper with a max width of 112.0rem (1120px)
.container
- margin: 0 auto
- max-width: 112.0rem
- padding: 0 2.0rem
- position: relative
- width: 100%
+ margin: 0 auto
+ max-width: 112.0rem
+ padding: 0 2.0rem
+ position: relative
+ width: 100%
// Using flexbox for the grid, inspired by Philip Walton:
// http://philipwalton.github.io/solved-by-flexbox/demos/grids/
@@ -16,143 +16,143 @@
// available width, and the height of each .column with take
// up the height of the tallest .column in the same .row
.row
- display: flex
- flex-direction: column
- padding: 0
- width: 100%
+ display: flex
+ flex-direction: column
+ padding: 0
+ width: 100%
- &.row-no-padding
- padding: 0
+ &.row-no-padding
+ padding: 0
- &> .column
- padding: 0
+ &> .column
+ padding: 0
- &.row-wrap
- flex-wrap: wrap
+ &.row-wrap
+ flex-wrap: wrap
- // Vertically Align Columns
- // .row-* vertically aligns every .col in the .row
- &.row-top
- align-items: flex-start
+ // Vertically Align Columns
+ // .row-* vertically aligns every .col in the .row
+ &.row-top
+ align-items: flex-start
- &.row-bottom
- align-items: flex-end
+ &.row-bottom
+ align-items: flex-end
- &.row-center
- align-items: center
+ &.row-center
+ align-items: center
- &.row-stretch
- align-items: stretch
+ &.row-stretch
+ align-items: stretch
- &.row-baseline
- align-items: baseline
+ &.row-baseline
+ align-items: baseline
- .column
- display: block
- // IE 11 required specifying the flex-basis otherwise it breaks mobile
- flex: 1 1 auto
- margin-left: 0
- max-width: 100%
- width: 100%
+ .column
+ display: block
+ // IE 11 required specifying the flex-basis otherwise it breaks mobile
+ flex: 1 1 auto
+ margin-left: 0
+ max-width: 100%
+ width: 100%
- // Column Offsets
- &.column-offset-10
- margin-left: 10%
+ // Column Offsets
+ &.column-offset-10
+ margin-left: 10%
- &.column-offset-20
- margin-left: 20%
+ &.column-offset-20
+ margin-left: 20%
- &.column-offset-25
- margin-left: 25%
+ &.column-offset-25
+ margin-left: 25%
- &.column-offset-33,
- &.column-offset-34
- margin-left: 33.3333%
+ &.column-offset-33,
+ &.column-offset-34
+ margin-left: 33.3333%
- &.column-offset-50
- margin-left: 50%
+ &.column-offset-50
+ margin-left: 50%
- &.column-offset-66,
- &.column-offset-67
- margin-left: 66.6666%
+ &.column-offset-66,
+ &.column-offset-67
+ margin-left: 66.6666%
- &.column-offset-75
- margin-left: 75%
+ &.column-offset-75
+ margin-left: 75%
- &.column-offset-80
- margin-left: 80%
+ &.column-offset-80
+ margin-left: 80%
- &.column-offset-90
- margin-left: 90%
+ &.column-offset-90
+ margin-left: 90%
- // Explicit Column Percent Sizes
- // By default each grid column will evenly distribute
- // across the grid. However, you can specify individual
- // columns to take up a certain size of the available area
- &.column-10
- flex: 0 0 10%
- max-width: 10%
+ // Explicit Column Percent Sizes
+ // By default each grid column will evenly distribute
+ // across the grid. However, you can specify individual
+ // columns to take up a certain size of the available area
+ &.column-10
+ flex: 0 0 10%
+ max-width: 10%
- &.column-20
- flex: 0 0 20%
- max-width: 20%
+ &.column-20
+ flex: 0 0 20%
+ max-width: 20%
- &.column-25
- flex: 0 0 25%
- max-width: 25%
+ &.column-25
+ flex: 0 0 25%
+ max-width: 25%
- &.column-33,
- &.column-34
- flex: 0 0 33.3333%
- max-width: 33.3333%
+ &.column-33,
+ &.column-34
+ flex: 0 0 33.3333%
+ max-width: 33.3333%
- &.column-40
- flex: 0 0 40%
- max-width: 40%
+ &.column-40
+ flex: 0 0 40%
+ max-width: 40%
- &.column-50
- flex: 0 0 50%
- max-width: 50%
+ &.column-50
+ flex: 0 0 50%
+ max-width: 50%
- &.column-60
- flex: 0 0 60%
- max-width: 60%
+ &.column-60
+ flex: 0 0 60%
+ max-width: 60%
- &.column-66,
- &.column-67
- flex: 0 0 66.6666%
- max-width: 66.6666%
+ &.column-66,
+ &.column-67
+ flex: 0 0 66.6666%
+ max-width: 66.6666%
- &.column-75
- flex: 0 0 75%
- max-width: 75%
+ &.column-75
+ flex: 0 0 75%
+ max-width: 75%
- &.column-80
- flex: 0 0 80%
- max-width: 80%
+ &.column-80
+ flex: 0 0 80%
+ max-width: 80%
- &.column-90
- flex: 0 0 90%
- max-width: 90%
+ &.column-90
+ flex: 0 0 90%
+ max-width: 90%
- // .column-* vertically aligns an individual .column
- .column-top
- align-self: flex-start
+ // .column-* vertically aligns an individual .column
+ .column-top
+ align-self: flex-start
- .column-bottom
- align-self: flex-end
+ .column-bottom
+ align-self: flex-end
- .column-center
- align-self: center
+ .column-center
+ align-self: center
// Larger than mobile screen
@media (min-width: 40.0rem) // Safari desktop has a bug using `rem`, but Safari mobile works
- .row
- flex-direction: row
- margin-left: -1.0rem
- width: calc(100% + 2.0rem)
+ .row
+ flex-direction: row
+ margin-left: -1.0rem
+ width: calc(100% + 2.0rem)
- .column
- margin-bottom: inherit
- padding: 0 1.0rem
+ .column
+ margin-bottom: inherit
+ padding: 0 1.0rem
diff --git a/src/_Image.sass b/src/_Image.sass
index 9d460e2..8e1c8da 100644
--- a/src/_Image.sass
+++ b/src/_Image.sass
@@ -3,4 +3,4 @@
// ––––––––––––––––––––––––––––––––––––––––––––––––––
img
- max-width: 100%
+ max-width: 100%
diff --git a/src/_Link.sass b/src/_Link.sass
index e0885af..f026b5c 100644
--- a/src/_Link.sass
+++ b/src/_Link.sass
@@ -3,9 +3,9 @@
// ––––––––––––––––––––––––––––––––––––––––––––––––––
a
- color: $color-primary
- text-decoration: none
+ color: $color-primary
+ text-decoration: none
- &:focus,
- &:hover
- color: $color-secondary
+ &:focus,
+ &:hover
+ color: $color-secondary
diff --git a/src/_List.sass b/src/_List.sass
index d308683..5671b02 100644
--- a/src/_List.sass
+++ b/src/_List.sass
@@ -5,18 +5,18 @@
dl,
ol,
ul
- list-style: none
- margin-top: 0
- padding-left: 0
+ list-style: none
+ margin-top: 0
+ padding-left: 0
- dl,
- ol,
- ul
- font-size: 90%
- margin: 1.5rem 0 1.5rem 3.0rem
+ dl,
+ ol,
+ ul
+ font-size: 90%
+ margin: 1.5rem 0 1.5rem 3.0rem
ol
- list-style: decimal inside
+ list-style: decimal inside
ul
- list-style: circle inside
+ list-style: circle inside
diff --git a/src/_Spacing.sass b/src/_Spacing.sass
index 7df55bc..8912da1 100644
--- a/src/_Spacing.sass
+++ b/src/_Spacing.sass
@@ -7,13 +7,13 @@ button,
dd,
dt,
li
- margin-bottom: 1.0rem
+ margin-bottom: 1.0rem
fieldset,
input,
select,
textarea
- margin-bottom: 1.5rem
+ margin-bottom: 1.5rem
blockquote,
dl,
@@ -24,4 +24,4 @@ p,
pre,
table,
ul
- margin-bottom: 2.5rem
+ margin-bottom: 2.5rem
diff --git a/src/_Table.sass b/src/_Table.sass
index c27ec39..370d255 100644
--- a/src/_Table.sass
+++ b/src/_Table.sass
@@ -3,17 +3,17 @@
// ––––––––––––––––––––––––––––––––––––––––––––––––––
table
- border-spacing: 0
- width: 100%
+ border-spacing: 0
+ width: 100%
td,
th
- border-bottom: .1rem solid $color-quinary
- padding: 1.2rem 1.5rem
- text-align: left
+ border-bottom: .1rem solid $color-quinary
+ padding: 1.2rem 1.5rem
+ text-align: left
- &:first-child
- padding-left: 0
+ &:first-child
+ padding-left: 0
- &:last-child
- padding-right: 0
+ &:last-child
+ padding-right: 0
diff --git a/src/_Typography.sass b/src/_Typography.sass
index a4b9a5b..27e8e18 100644
--- a/src/_Typography.sass
+++ b/src/_Typography.sass
@@ -4,10 +4,10 @@
b,
strong
- font-weight: bold
+ font-weight: bold
p
- margin-top: 0
+ margin-top: 0
h1,
h2,
@@ -15,34 +15,34 @@ h3,
h4,
h5,
h6
- font-weight: 300
- letter-spacing: -.1rem
- margin-bottom: 2.0rem
- margin-top: 0
+ font-weight: 300
+ letter-spacing: -.1rem
+ margin-bottom: 2.0rem
+ margin-top: 0
h1
- font-size: 4.6rem
- line-height: 1.2
+ font-size: 4.6rem
+ line-height: 1.2
h2
- font-size: 3.6rem
- line-height: 1.25
+ font-size: 3.6rem
+ line-height: 1.25
h3
- font-size: 2.8rem
- line-height: 1.3
+ font-size: 2.8rem
+ line-height: 1.3
h4
- font-size: 2.2rem
- letter-spacing: -.08rem
- line-height: 1.35
+ font-size: 2.2rem
+ letter-spacing: -.08rem
+ line-height: 1.35
h5
- font-size: 1.8rem
- letter-spacing: -.05rem
- line-height: 1.5
+ font-size: 1.8rem
+ letter-spacing: -.05rem
+ line-height: 1.5
h6
- font-size: 1.6rem
- letter-spacing: 0
- line-height: 1.4
+ font-size: 1.6rem
+ letter-spacing: 0
+ line-height: 1.4
diff --git a/src/_Utility.sass b/src/_Utility.sass
index ae0dd97..9c3ea73 100644
--- a/src/_Utility.sass
+++ b/src/_Utility.sass
@@ -5,14 +5,14 @@
// Clear a float with .clearfix
.clearfix
- &:after
- clear: both
- content: ' ' // The space content is one way to avoid an Opera bug.
- display: table
+ &:after
+ clear: both
+ content: ' ' // The space content is one way to avoid an Opera bug.
+ display: table
// Float either direction
.float-left
- float: left
+ float: left
.float-right
- float: right
+ float: right