changing the name of the source folder
This commit is contained in:
CJ Patoilo
25
src/_Base.sass
Normal file
25
src/_Base.sass
Normal file
@@ -0,0 +1,25 @@
|
||||
|
||||
// Base
|
||||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
|
||||
// NOTE
|
||||
// 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%
|
||||
|
||||
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
|
||||
|
||||
// Box Sizing FTW
|
||||
*,
|
||||
*:after,
|
||||
*:before
|
||||
box-sizing: border-box
|
||||
13
src/_Blockquote.sass
Normal file
13
src/_Blockquote.sass
Normal file
@@ -0,0 +1,13 @@
|
||||
|
||||
// Blockquote
|
||||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
|
||||
.blockquote,
|
||||
blockquote
|
||||
border-left: 0.3rem solid $color-quaternary
|
||||
margin-left: 0
|
||||
margin-right: 0
|
||||
padding: 1rem 1.5rem
|
||||
|
||||
& *:last-child
|
||||
margin: 0
|
||||
54
src/_Button.sass
Normal file
54
src/_Button.sass
Normal file
@@ -0,0 +1,54 @@
|
||||
|
||||
// Button
|
||||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
|
||||
.button,
|
||||
button,
|
||||
input[type='submit'],
|
||||
input[type='reset'],
|
||||
input[type='button']
|
||||
background-color: $color-primary
|
||||
border: .1rem solid $color-primary
|
||||
border-radius: .4rem
|
||||
box-sizing: border-box
|
||||
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
|
||||
|
||||
&:hover,
|
||||
&:focus
|
||||
background-color: $color-secondary
|
||||
border-color: $color-secondary
|
||||
color: $color-initial
|
||||
outline: 0
|
||||
|
||||
&.button-outline
|
||||
color: $color-primary
|
||||
background-color: transparent
|
||||
|
||||
&:hover,
|
||||
&:focus
|
||||
color: $color-secondary
|
||||
background-color: transparent
|
||||
border-color: $color-secondary
|
||||
|
||||
&.button-clear
|
||||
color: $color-primary
|
||||
background-color: transparent
|
||||
border-color: transparent
|
||||
|
||||
&:hover,
|
||||
&:focus
|
||||
color: $color-secondary
|
||||
background-color: transparent
|
||||
border-color: transparent
|
||||
23
src/_Code.sass
Normal file
23
src/_Code.sass
Normal file
@@ -0,0 +1,23 @@
|
||||
|
||||
// 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: $color-tertiary
|
||||
border-radius: .4rem
|
||||
font-size: 86%
|
||||
padding: .2rem .5rem
|
||||
margin: 0 .2rem
|
||||
white-space: nowrap
|
||||
|
||||
pre > code
|
||||
background: transparent
|
||||
border-radius: 0
|
||||
display: block
|
||||
padding: 1rem 1.5rem
|
||||
white-space: pre
|
||||
9
src/_Color.sass
Normal file
9
src/_Color.sass
Normal file
@@ -0,0 +1,9 @@
|
||||
|
||||
// Color
|
||||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
|
||||
$color-initial: #ffffff
|
||||
$color-primary: #9b4dca
|
||||
$color-secondary: #606c76
|
||||
$color-tertiary: #f4f5f6
|
||||
$color-quaternary: #d1d1d1
|
||||
51
src/_Form.sass
Normal file
51
src/_Form.sass
Normal file
@@ -0,0 +1,51 @@
|
||||
|
||||
// Form
|
||||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
|
||||
input[type='email'],
|
||||
input[type='number'],
|
||||
input[type='search'],
|
||||
input[type='text'],
|
||||
input[type='tel'],
|
||||
input[type='url'],
|
||||
input[type='password'],
|
||||
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: border-box
|
||||
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
|
||||
outline: 0
|
||||
|
||||
textarea
|
||||
padding-bottom: .6rem
|
||||
padding-top: .6rem
|
||||
min-height: 6.5rem
|
||||
|
||||
label,
|
||||
legend
|
||||
font-size: 1.6rem
|
||||
font-weight: 700
|
||||
display: block
|
||||
margin-bottom: .5rem
|
||||
|
||||
fieldset
|
||||
border-width: 0
|
||||
padding: 0
|
||||
|
||||
input[type='checkbox'],
|
||||
input[type='radio']
|
||||
display: inline
|
||||
|
||||
.label-inline
|
||||
font-weight: normal
|
||||
display: inline-block
|
||||
margin-left: .5rem
|
||||
161
src/_Grid.sass
Normal file
161
src/_Grid.sass
Normal file
@@ -0,0 +1,161 @@
|
||||
|
||||
// Grid
|
||||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
|
||||
// .container is main centered wrapper with a max width of 1120rem (1120px)
|
||||
.container
|
||||
box-sizing: border-box
|
||||
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/
|
||||
// By default each .column within a .row will evenly take up
|
||||
// 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%
|
||||
|
||||
.row-wrap
|
||||
flex-wrap: wrap
|
||||
|
||||
.row-no-padding
|
||||
padding: 0
|
||||
|
||||
&> .column
|
||||
padding: 0
|
||||
|
||||
// & + .row
|
||||
// margin-top: -.5rem
|
||||
// padding-top: 0
|
||||
|
||||
// Vertically Align Columns
|
||||
// .row-* vertically aligns every .col in the .row
|
||||
.row-top
|
||||
align-items: flex-start
|
||||
|
||||
.row-bottom
|
||||
align-items: flex-end
|
||||
|
||||
.row-center
|
||||
align-items: center
|
||||
|
||||
.row-stretch
|
||||
align-items: stretch
|
||||
|
||||
.row-baseline
|
||||
align-items: baseline
|
||||
|
||||
.column
|
||||
display: block
|
||||
flex: 1
|
||||
margin-left: 0
|
||||
max-width: 100%
|
||||
width: 100%
|
||||
|
||||
// .column-* vertically aligns an individual .column
|
||||
.col-top
|
||||
align-self: flex-start
|
||||
|
||||
.col-bottom
|
||||
align-self: flex-end
|
||||
|
||||
.col-center
|
||||
align-self: center
|
||||
|
||||
// Column Offsets
|
||||
&.column-offset-10
|
||||
margin-left: 10%
|
||||
|
||||
&.column-offset-20
|
||||
margin-left: 20%
|
||||
|
||||
&.column-offset-25
|
||||
margin-left: 25%
|
||||
|
||||
&.column-offset-33,
|
||||
&.column-offset-34
|
||||
margin-left: 33.3333%
|
||||
|
||||
&.column-offset-50
|
||||
margin-left: 50%
|
||||
|
||||
&.column-offset-66,
|
||||
&.column-offset-67
|
||||
margin-left: 66.6666%
|
||||
|
||||
&.column-offset-75
|
||||
margin-left: 75%
|
||||
|
||||
&.column-offset-80
|
||||
margin-left: 80%
|
||||
|
||||
&.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%
|
||||
|
||||
&.column-20
|
||||
flex: 0 0 20%
|
||||
max-width: 20%
|
||||
|
||||
&.column-25
|
||||
flex: 0 0 25%
|
||||
max-width: 25%
|
||||
|
||||
&.column-33,
|
||||
&.column-34
|
||||
flex: 0 0 33.3333%
|
||||
max-width: 33.3333%
|
||||
|
||||
&.column-40
|
||||
flex: 0 0 40%
|
||||
max-width: 40%
|
||||
|
||||
&.column-50
|
||||
flex: 0 0 50%
|
||||
max-width: 50%
|
||||
|
||||
&.column-60
|
||||
flex: 0 0 60%
|
||||
max-width: 60%
|
||||
|
||||
&.column-66, &.column-67
|
||||
flex: 0 0 66.6666%
|
||||
max-width: 66.6666%
|
||||
|
||||
&.column-75
|
||||
flex: 0 0 75%
|
||||
max-width: 75%
|
||||
|
||||
&.column-80
|
||||
flex: 0 0 80%
|
||||
max-width: 80%
|
||||
|
||||
&.column-90
|
||||
flex: 0 0 90%
|
||||
max-width: 90%
|
||||
|
||||
// Larger than mobile screen
|
||||
@media (min-width: 40.0rem)
|
||||
|
||||
.row
|
||||
flex-direction: row
|
||||
margin-left: -1.0rem
|
||||
width: calc(100% + 2.0rem)
|
||||
|
||||
.column
|
||||
margin-bottom: inherit
|
||||
padding: 0 1.0rem
|
||||
10
src/_Link.sass
Normal file
10
src/_Link.sass
Normal file
@@ -0,0 +1,10 @@
|
||||
|
||||
// Link
|
||||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
|
||||
a
|
||||
color: $color-primary
|
||||
text-decoration: none
|
||||
|
||||
&:hover
|
||||
color: $color-secondary
|
||||
29
src/_List.sass
Normal file
29
src/_List.sass
Normal file
@@ -0,0 +1,29 @@
|
||||
|
||||
// List
|
||||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
|
||||
dl,
|
||||
ol,
|
||||
ul
|
||||
margin-top: 0
|
||||
padding-left: 0
|
||||
|
||||
dl
|
||||
ul,
|
||||
ol
|
||||
font-size: 90%
|
||||
margin: 1.5rem 0 1.5rem 3.0rem
|
||||
|
||||
dl
|
||||
list-style: none
|
||||
|
||||
ul
|
||||
list-style: circle inside
|
||||
|
||||
ol
|
||||
list-style: decimal inside
|
||||
|
||||
dt,
|
||||
dd,
|
||||
li
|
||||
margin-bottom: 1.0rem
|
||||
9
src/_Misc.sass
Normal file
9
src/_Misc.sass
Normal file
@@ -0,0 +1,9 @@
|
||||
|
||||
// Misc
|
||||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
|
||||
hr
|
||||
border-top: .1rem solid $color-tertiary
|
||||
border-width: 0
|
||||
margin-bottom: 3.5rem
|
||||
margin-top: 3rem
|
||||
24
src/_Spacing.sass
Normal file
24
src/_Spacing.sass
Normal file
@@ -0,0 +1,24 @@
|
||||
|
||||
// Spacing
|
||||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
|
||||
button,
|
||||
.button
|
||||
margin-bottom: 1rem
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
fieldset
|
||||
margin-bottom: 1.5rem
|
||||
|
||||
pre,
|
||||
blockquote,
|
||||
dl,
|
||||
figure,
|
||||
table,
|
||||
p,
|
||||
ul,
|
||||
ol,
|
||||
form
|
||||
margin-bottom: 2.5rem
|
||||
18
src/_Table.sass
Normal file
18
src/_Table.sass
Normal file
@@ -0,0 +1,18 @@
|
||||
|
||||
// Table
|
||||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
|
||||
table
|
||||
width: 100%
|
||||
|
||||
th,
|
||||
td
|
||||
border-bottom: .1rem solid #e1e1e1
|
||||
padding: 1.2rem 1.5rem
|
||||
text-align: left
|
||||
|
||||
&:first-child
|
||||
padding-left: 0
|
||||
|
||||
&:last-child
|
||||
padding-right: 0
|
||||
67
src/_Typography.sass
Normal file
67
src/_Typography.sass
Normal file
@@ -0,0 +1,67 @@
|
||||
|
||||
// Typography
|
||||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
|
||||
p
|
||||
margin-top: 0
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6
|
||||
font-weight: 300
|
||||
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
|
||||
font-size: 2.4rem
|
||||
letter-spacing: -.08rem
|
||||
line-height: 1.35
|
||||
|
||||
h5
|
||||
font-size: 1.8rem
|
||||
letter-spacing: -.05rem
|
||||
line-height: 1.5
|
||||
|
||||
h6
|
||||
font-size: 1.6rem
|
||||
letter-spacing: 0
|
||||
line-height: 1.4
|
||||
|
||||
// Larger than mobile screen
|
||||
@media (min-width: 40.0rem)
|
||||
|
||||
h1
|
||||
font-size: 5.0rem
|
||||
|
||||
h2
|
||||
font-size: 4.2rem
|
||||
|
||||
h3
|
||||
font-size: 3.6rem
|
||||
|
||||
h4
|
||||
font-size: 3.0rem
|
||||
|
||||
h5
|
||||
font-size: 2.4rem
|
||||
|
||||
h6
|
||||
font-size: 1.5rem
|
||||
22
src/_Utility.sass
Normal file
22
src/_Utility.sass
Normal file
@@ -0,0 +1,22 @@
|
||||
|
||||
// Utility
|
||||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
|
||||
// Float either direction
|
||||
.float-right
|
||||
float: right
|
||||
|
||||
.float-left
|
||||
float: left
|
||||
|
||||
// Clear a float with .clearfix
|
||||
.clearfix
|
||||
*zoom: 1
|
||||
|
||||
&:after,
|
||||
&:before
|
||||
content: ''
|
||||
display: table
|
||||
|
||||
&:after
|
||||
clear: both
|
||||
18
src/milligram.sass
Normal file
18
src/milligram.sass
Normal file
@@ -0,0 +1,18 @@
|
||||
|
||||
// Sass Modules
|
||||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
|
||||
@import Color
|
||||
@import Base
|
||||
@import Blockquote
|
||||
@import Button
|
||||
@import Code
|
||||
@import Form
|
||||
@import Grid
|
||||
@import Link
|
||||
@import List
|
||||
@import Misc
|
||||
@import Spacing
|
||||
@import Table
|
||||
@import Typography
|
||||
@import Utility
|
||||
Reference in New Issue
Block a user