107 lines
2.4 KiB
Sass
107 lines
2.4 KiB
Sass
|
||
// Base
|
||
// ––––––––––––––––––––––––––––––––––––––––––––––––––
|
||
|
||
// Set box-sizing globally to handle padding and border widths
|
||
\:root
|
||
font-size: 10px
|
||
|
||
*,
|
||
*:after,
|
||
*:before
|
||
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%
|
||
height: 100%
|
||
|
||
// Default body styles
|
||
body
|
||
color: $color-secondary
|
||
font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', 'Microsoft YaHei Light', sans-serif
|
||
font-size: 1.3rem
|
||
font-weight: 300
|
||
letter-spacing: .05rem
|
||
line-height: 1.6
|
||
margin: 0
|
||
height: 100%
|
||
|
||
textarea
|
||
font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', 'Microsoft YaHei Light', sans-serif
|
||
|
||
// default link styles
|
||
a
|
||
color: $color-primary
|
||
text-decoration: none
|
||
|
||
&:active,
|
||
&:hover,
|
||
&:hover:visited
|
||
color: $color-secondary
|
||
|
||
&:visited
|
||
// color: $color-primary
|
||
|
||
li
|
||
list-style: none
|
||
|
||
// clear the "x" button inside the search input box
|
||
input[type=text]::-ms-clear,
|
||
input[type=text]::-ms-reveal
|
||
display: none
|
||
width : 0
|
||
height: 0
|
||
|
||
input[type="search"]::-webkit-search-decoration,
|
||
input[type="search"]::-webkit-search-cancel-button,
|
||
input[type="search"]::-webkit-search-results-button,
|
||
input[type="search"]::-webkit-search-results-decoration
|
||
display: none;
|
||
|
||
input[type='email'],
|
||
input[type='number'],
|
||
input[type='password'],
|
||
input[type='search'],
|
||
input[type='tel'],
|
||
input[type='text'],
|
||
input[type='url'],
|
||
textarea,
|
||
select
|
||
appearance: none // Removes awkward default styles on some inputs for iOS
|
||
background-color: transparent
|
||
border: .1rem solid $color-light
|
||
border-radius: .4rem
|
||
box-shadow: none
|
||
box-sizing: inherit // Forced to replace inherit values of the normalize.css
|
||
padding: .6rem 1.0rem // The .6rem vertically centers text on FF, ignored by Webkit
|
||
|
||
&:focus
|
||
border-color: $color-primary
|
||
outline: 0
|
||
|
||
&::placeholder
|
||
color: $color-light
|
||
|
||
::selection
|
||
color: white
|
||
background-color: $color-primary
|
||
|
||
// Mixins
|
||
|
||
@mixin clear
|
||
content: ' '
|
||
clear: both
|
||
display: table
|
||
|
||
// Breakpoints
|
||
// Small devices (landscape phones, 576px and up)
|
||
$small-devices: 575.98px
|
||
// Medium devices (tablets, 768px and up)
|
||
$medium-devices: 767.98px
|
||
// Large devices (desktops, 992px and up)
|
||
$large-devices: 991.98px
|
||
// Extra large devices (large desktops, 1200px and up)
|
||
$x-large-devices: 1199.98px
|