Move all files from tab to space

This commit is contained in:
CJ Patoilo 2020-05-17 18:41:05 -03:00
parent 9a63e760df
commit aa55a7a169
14 changed files with 290 additions and 290 deletions

View File

@ -6,19 +6,19 @@
*, *,
*:after, *:after,
*:before *:before
box-sizing: inherit box-sizing: inherit
// The base font-size is set at 62.5% for having the convenience // 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 html
box-sizing: border-box box-sizing: border-box
font-size: 62.5% font-size: 62.5%
// Default body styles // Default body styles
body body
color: $color-secondary color: $color-secondary
font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif
font-size: 1.6em // Currently ems cause chrome bug misinterpreting rems on body element font-size: 1.6em // Currently ems cause chrome bug misinterpreting rems on body element
font-weight: 300 font-weight: 300
letter-spacing: .01em letter-spacing: .01em
line-height: 1.6 line-height: 1.6

View File

@ -3,10 +3,10 @@
// //
blockquote blockquote
border-left: .3rem solid $color-quaternary border-left: .3rem solid $color-quaternary
margin-left: 0 margin-left: 0
margin-right: 0 margin-right: 0
padding: 1rem 1.5rem padding: 1rem 1.5rem
*:last-child *:last-child
margin-bottom: 0 margin-bottom: 0

View File

@ -7,69 +7,69 @@ button,
input[type='button'], input[type='button'],
input[type='reset'], input[type='reset'],
input[type='submit'] input[type='submit']
background-color: $color-primary background-color: $color-primary
border: .1rem solid $color-primary border: .1rem solid $color-primary
border-radius: .4rem border-radius: .4rem
color: $color-initial color: $color-initial
cursor: pointer cursor: pointer
display: inline-block display: inline-block
font-size: 1.1rem font-size: 1.1rem
font-weight: 700 font-weight: 700
height: 3.8rem height: 3.8rem
letter-spacing: .1rem letter-spacing: .1rem
line-height: 3.8rem line-height: 3.8rem
padding: 0 3.0rem padding: 0 3.0rem
text-align: center text-align: center
text-decoration: none text-decoration: none
text-transform: uppercase text-transform: uppercase
white-space: nowrap white-space: nowrap
&:focus, &:focus,
&:hover &:hover
background-color: $color-secondary background-color: $color-secondary
border-color: $color-secondary border-color: $color-secondary
color: $color-initial color: $color-initial
outline: 0 outline: 0
&[disabled] &[disabled]
cursor: default cursor: default
opacity: .5 opacity: .5
&:focus, &:focus,
&:hover &:hover
background-color: $color-primary background-color: $color-primary
border-color: $color-primary border-color: $color-primary
&.button-outline &.button-outline
background-color: transparent background-color: transparent
color: $color-primary color: $color-primary
&:focus, &:focus,
&:hover &:hover
background-color: transparent background-color: transparent
border-color: $color-secondary border-color: $color-secondary
color: $color-secondary color: $color-secondary
&[disabled] &[disabled]
&:focus, &:focus,
&:hover &:hover
border-color: inherit border-color: inherit
color: $color-primary color: $color-primary
&.button-clear &.button-clear
background-color: transparent background-color: transparent
border-color: transparent border-color: transparent
color: $color-primary color: $color-primary
&:focus, &:focus,
&:hover &:hover
background-color: transparent background-color: transparent
border-color: transparent border-color: transparent
color: $color-secondary color: $color-secondary
&[disabled] &[disabled]
&:focus, &:focus,
&:hover &:hover
color: $color-primary color: $color-primary

View File

@ -3,20 +3,20 @@
// //
code code
background: $color-tertiary background: $color-tertiary
border-radius: .4rem border-radius: .4rem
font-size: 86% font-size: 86%
margin: 0 .2rem margin: 0 .2rem
padding: .2rem .5rem padding: .2rem .5rem
white-space: nowrap white-space: nowrap
pre pre
background: $color-tertiary background: $color-tertiary
border-left: .3rem solid $color-primary border-left: .3rem solid $color-primary
overflow-y: hidden overflow-y: hidden
& > code & > code
border-radius: 0 border-radius: 0
display: block display: block
padding: 1rem 1.5rem padding: 1rem 1.5rem
white-space: pre white-space: pre

View File

@ -3,6 +3,6 @@
// //
hr hr
border: 0 border: 0
border-top: .1rem solid $color-tertiary border-top: .1rem solid $color-tertiary
margin: 3.0rem 0 margin: 3.0rem 0

View File

@ -2,62 +2,62 @@
// Form // Form
// //
input[type=color], input[type='color'],
input[type=date], input[type='date'],
input[type=datetime], input[type='datetime'],
input[type=datetime-local], input[type='datetime-local'],
input[type=email], input[type='email'],
input[type=month], input[type='month'],
input[type=number], input[type='number'],
input[type=password], input[type='password'],
input[type=search], input[type='search'],
input[type=tel], input[type='tel'],
input[type=text], input[type='text'],
input[type=url], input[type='url'],
input[type=week], input[type='week'],
input:not([type]), input:not([type]),
textarea, textarea,
select select
appearance: none // Removes awkward default styles on some inputs for iOS appearance: none // Removes awkward default styles on some inputs for iOS
background-color: transparent background-color: transparent
border: .1rem solid $color-quaternary border: .1rem solid $color-quaternary
border-radius: .4rem border-radius: .4rem
box-shadow: none box-shadow: none
box-sizing: inherit // Forced to replace inherit values of the normalize.css box-sizing: inherit // Forced to replace inherit values of the normalize.css
height: 3.8rem height: 3.8rem
padding: .6rem 1.0rem // The .6rem vertically centers text on FF, ignored by Webkit padding: .6rem 1.0rem // The .6rem vertically centers text on FF, ignored by Webkit
width: 100% width: 100%
&:focus &:focus
border-color: $color-primary border-color: $color-primary
outline: 0 outline: 0
select select
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="%23d1d1d1" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>') center right no-repeat background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="%23d1d1d1" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>') center right no-repeat
padding-right: 3.0rem padding-right: 3.0rem
&:focus &:focus
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="%239b4dca" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>') background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="%239b4dca" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>')
textarea textarea
min-height: 6.5rem min-height: 6.5rem
label, label,
legend legend
display: block display: block
font-size: 1.6rem font-size: 1.6rem
font-weight: 700 font-weight: 700
margin-bottom: .5rem margin-bottom: .5rem
fieldset fieldset
border-width: 0 border-width: 0
padding: 0 padding: 0
input[type='checkbox'], input[type='checkbox'],
input[type='radio'] input[type='radio']
display: inline display: inline
.label-inline .label-inline
display: inline-block display: inline-block
font-weight: normal font-weight: normal
margin-left: .5rem margin-left: .5rem

View File

@ -4,11 +4,11 @@
// .container is main centered wrapper with a max width of 112.0rem (1120px) // .container is main centered wrapper with a max width of 112.0rem (1120px)
.container .container
margin: 0 auto margin: 0 auto
max-width: 112.0rem max-width: 112.0rem
padding: 0 2.0rem padding: 0 2.0rem
position: relative position: relative
width: 100% width: 100%
// Using flexbox for the grid, inspired by Philip Walton: // Using flexbox for the grid, inspired by Philip Walton:
// http://philipwalton.github.io/solved-by-flexbox/demos/grids/ // http://philipwalton.github.io/solved-by-flexbox/demos/grids/
@ -16,143 +16,143 @@
// available width, and the height of each .column with take // available width, and the height of each .column with take
// up the height of the tallest .column in the same .row // up the height of the tallest .column in the same .row
.row .row
display: flex display: flex
flex-direction: column flex-direction: column
padding: 0 padding: 0
width: 100% width: 100%
&.row-no-padding &.row-no-padding
padding: 0 padding: 0
&> .column &> .column
padding: 0 padding: 0
&.row-wrap &.row-wrap
flex-wrap: wrap flex-wrap: wrap
// Vertically Align Columns // Vertically Align Columns
// .row-* vertically aligns every .col in the .row // .row-* vertically aligns every .col in the .row
&.row-top &.row-top
align-items: flex-start align-items: flex-start
&.row-bottom &.row-bottom
align-items: flex-end align-items: flex-end
&.row-center &.row-center
align-items: center align-items: center
&.row-stretch &.row-stretch
align-items: stretch align-items: stretch
&.row-baseline &.row-baseline
align-items: baseline align-items: baseline
.column .column
display: block display: block
// IE 11 required specifying the flex-basis otherwise it breaks mobile // IE 11 required specifying the flex-basis otherwise it breaks mobile
flex: 1 1 auto flex: 1 1 auto
margin-left: 0 margin-left: 0
max-width: 100% max-width: 100%
width: 100% width: 100%
// Column Offsets // Column Offsets
&.column-offset-10 &.column-offset-10
margin-left: 10% margin-left: 10%
&.column-offset-20 &.column-offset-20
margin-left: 20% margin-left: 20%
&.column-offset-25 &.column-offset-25
margin-left: 25% margin-left: 25%
&.column-offset-33, &.column-offset-33,
&.column-offset-34 &.column-offset-34
margin-left: 33.3333% margin-left: 33.3333%
&.column-offset-50 &.column-offset-50
margin-left: 50% margin-left: 50%
&.column-offset-66, &.column-offset-66,
&.column-offset-67 &.column-offset-67
margin-left: 66.6666% margin-left: 66.6666%
&.column-offset-75 &.column-offset-75
margin-left: 75% margin-left: 75%
&.column-offset-80 &.column-offset-80
margin-left: 80% margin-left: 80%
&.column-offset-90 &.column-offset-90
margin-left: 90% margin-left: 90%
// Explicit Column Percent Sizes // Explicit Column Percent Sizes
// By default each grid column will evenly distribute // By default each grid column will evenly distribute
// across the grid. However, you can specify individual // across the grid. However, you can specify individual
// columns to take up a certain size of the available area // columns to take up a certain size of the available area
&.column-10 &.column-10
flex: 0 0 10% flex: 0 0 10%
max-width: 10% max-width: 10%
&.column-20 &.column-20
flex: 0 0 20% flex: 0 0 20%
max-width: 20% max-width: 20%
&.column-25 &.column-25
flex: 0 0 25% flex: 0 0 25%
max-width: 25% max-width: 25%
&.column-33, &.column-33,
&.column-34 &.column-34
flex: 0 0 33.3333% flex: 0 0 33.3333%
max-width: 33.3333% max-width: 33.3333%
&.column-40 &.column-40
flex: 0 0 40% flex: 0 0 40%
max-width: 40% max-width: 40%
&.column-50 &.column-50
flex: 0 0 50% flex: 0 0 50%
max-width: 50% max-width: 50%
&.column-60 &.column-60
flex: 0 0 60% flex: 0 0 60%
max-width: 60% max-width: 60%
&.column-66, &.column-66,
&.column-67 &.column-67
flex: 0 0 66.6666% flex: 0 0 66.6666%
max-width: 66.6666% max-width: 66.6666%
&.column-75 &.column-75
flex: 0 0 75% flex: 0 0 75%
max-width: 75% max-width: 75%
&.column-80 &.column-80
flex: 0 0 80% flex: 0 0 80%
max-width: 80% max-width: 80%
&.column-90 &.column-90
flex: 0 0 90% flex: 0 0 90%
max-width: 90% max-width: 90%
// .column-* vertically aligns an individual .column // .column-* vertically aligns an individual .column
.column-top .column-top
align-self: flex-start align-self: flex-start
.column-bottom .column-bottom
align-self: flex-end align-self: flex-end
.column-center .column-center
align-self: center align-self: center
// Larger than mobile screen // Larger than mobile screen
@media (min-width: 40.0rem) // Safari desktop has a bug using `rem`, but Safari mobile works @media (min-width: 40.0rem) // Safari desktop has a bug using `rem`, but Safari mobile works
.row .row
flex-direction: row flex-direction: row
margin-left: -1.0rem margin-left: -1.0rem
width: calc(100% + 2.0rem) width: calc(100% + 2.0rem)
.column .column
margin-bottom: inherit margin-bottom: inherit
padding: 0 1.0rem padding: 0 1.0rem

View File

@ -3,4 +3,4 @@
// //
img img
max-width: 100% max-width: 100%

View File

@ -3,9 +3,9 @@
// //
a a
color: $color-primary color: $color-primary
text-decoration: none text-decoration: none
&:focus, &:focus,
&:hover &:hover
color: $color-secondary color: $color-secondary

View File

@ -5,18 +5,18 @@
dl, dl,
ol, ol,
ul ul
list-style: none list-style: none
margin-top: 0 margin-top: 0
padding-left: 0 padding-left: 0
dl, dl,
ol, ol,
ul ul
font-size: 90% font-size: 90%
margin: 1.5rem 0 1.5rem 3.0rem margin: 1.5rem 0 1.5rem 3.0rem
ol ol
list-style: decimal inside list-style: decimal inside
ul ul
list-style: circle inside list-style: circle inside

View File

@ -7,13 +7,13 @@ button,
dd, dd,
dt, dt,
li li
margin-bottom: 1.0rem margin-bottom: 1.0rem
fieldset, fieldset,
input, input,
select, select,
textarea textarea
margin-bottom: 1.5rem margin-bottom: 1.5rem
blockquote, blockquote,
dl, dl,
@ -24,4 +24,4 @@ p,
pre, pre,
table, table,
ul ul
margin-bottom: 2.5rem margin-bottom: 2.5rem

View File

@ -3,17 +3,17 @@
// //
table table
border-spacing: 0 border-spacing: 0
width: 100% width: 100%
td, td,
th th
border-bottom: .1rem solid $color-quinary border-bottom: .1rem solid $color-quinary
padding: 1.2rem 1.5rem padding: 1.2rem 1.5rem
text-align: left text-align: left
&:first-child &:first-child
padding-left: 0 padding-left: 0
&:last-child &:last-child
padding-right: 0 padding-right: 0

View File

@ -4,10 +4,10 @@
b, b,
strong strong
font-weight: bold font-weight: bold
p p
margin-top: 0 margin-top: 0
h1, h1,
h2, h2,
@ -15,34 +15,34 @@ h3,
h4, h4,
h5, h5,
h6 h6
font-weight: 300 font-weight: 300
letter-spacing: -.1rem letter-spacing: -.1rem
margin-bottom: 2.0rem margin-bottom: 2.0rem
margin-top: 0 margin-top: 0
h1 h1
font-size: 4.6rem font-size: 4.6rem
line-height: 1.2 line-height: 1.2
h2 h2
font-size: 3.6rem font-size: 3.6rem
line-height: 1.25 line-height: 1.25
h3 h3
font-size: 2.8rem font-size: 2.8rem
line-height: 1.3 line-height: 1.3
h4 h4
font-size: 2.2rem font-size: 2.2rem
letter-spacing: -.08rem letter-spacing: -.08rem
line-height: 1.35 line-height: 1.35
h5 h5
font-size: 1.8rem font-size: 1.8rem
letter-spacing: -.05rem letter-spacing: -.05rem
line-height: 1.5 line-height: 1.5
h6 h6
font-size: 1.6rem font-size: 1.6rem
letter-spacing: 0 letter-spacing: 0
line-height: 1.4 line-height: 1.4

View File

@ -5,14 +5,14 @@
// Clear a float with .clearfix // Clear a float with .clearfix
.clearfix .clearfix
&:after &:after
clear: both clear: both
content: ' ' // The space content is one way to avoid an Opera bug. content: ' ' // The space content is one way to avoid an Opera bug.
display: table display: table
// Float either direction // Float either direction
.float-left .float-left
float: left float: left
.float-right .float-right
float: right float: right