test-styl/plum-styl/_base.styl
/**
* Global styles, the starting point. No classes or ids.
* contains our resets, link styling, default font sizes, etc
*/
// make padding work correctly (won't affect width of element)
*,
*:after,
*:before
box-sizing: border-box
// sensible defaults
html
-ms-text-size-adjust: 100%
-webkit-text-size-adjust: 100%
/**
* universal baseline
* 1 font-smoothing makes dat text sharp
* 2 wont work on firefox unfortunately
* 3 this setting can speed up font rendering significantly, esp on mobile
* 4 remove click delay on microsoft devices (ms done good here)
*/
body
background: $color-white
font-family: $font-museo
font-size: $font-weight
font-weight: 300
-moz-osx-font-smoothing: grayscale // 1
-webkit-font-smoothing: antialiased // 1
-webkit-osx-font-smoothing: grayscale // 1
-webkit-overflow-scrolling: touch
line-height: 1.2
overflow-x: hidden // 2
text-rendering: optimizeSpeed // 3
touch-action: manipulation // 4
// wrapper class just inside body
// centers the page
.plum-container
@extends $center
@extends $clearfix
width: 100%
width: 100vw
@media $mob-plus
width: 1170px // for ie8
width: 80vw
/**
* set link defaults
* no borders or underlines
*/
a
color: $color-purple
text-decoration: none
&:active,
&:hover
cursor: pointer
outline: 0
&.underline
text-decoration: underline
img
border: 0
// Prevent modern browsers from displaying `audio` without controls.
// Remove excess height in iOS 5 devices.
audio:not( [controls] )
display: none
// Correct `inline-block` display not defined in IE 8/9.
audio,
canvas,
video
display: inline-block
blockquote
border-left: 5px solid $color-gray-xxxl
color: $color-gray-m
font-size: 18px
font-weight: 300
margin: 0 0 20px
padding: 10px 20px
// Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
b,
strong
font-weight: 600
button
appearance: none
background: none
border: 0
padding: 0
/**
* 1. Correct font family not being inherited in all browsers.
* 2. Correct font size not being inherited in all browsers.
* 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
*/
button,
input,
select,
textarea
font-family: inherit // 1
font-size: 100% // 2
margin: 0 // 3
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet
*/
button,
input
line-height: normal
// Remove inner padding and border in Firefox 4+.
button::-moz-focus-inner,
input::-moz-focus-inner
border: 0
padding: 0
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
* Correct `select` style inheritance in Firefox 4+ and Opera.
*/
button,
select,
svg
cursor: pointer
text-transform: none
user-select: none
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
`input` and others.
*/
button,
html input[type='button'], // 1
input[type='reset'],
input[type='submit']
-webkit-appearance: button // 2
cursor: pointer // 3
// Remove placeholder text on focus
// FF 4-18
// FF 19+
// IE 10+
input:focus::-webkit-input-placeholder,
input:focus:-moz-placeholder,
input:focus::-moz-placeholder,
input:focus:-ms-input-placeholder
color: transparent
// Re-set default cursor for disabled elements.
button[disabled],
html input[disabled]
cursor: default
// remove default margin
figure
margin: 0
// i is reserved for icons, not italic
// this throws accessibility warnings if not hidden.
// but i think its fine in our use case
i
display: inline-block
font-style: normal
/**
* 1 Remove border when inside `a` element in IE
* 2 fixes annoying phantom space after images
* 3 no stretchy
* 4 images inside picture els should scale up
* 5 put gifs on their own render layer to prevent repaint leaks
* but not lazy-load placeholder gifs
* 6 dont break container if img is huge
*/
img,
iframe,
picture
border: 0 // 1
display: block // 2
img
height: auto // 3
margin-left: auto
margin-right: auto
video,
iframe,
object,
img[src$='.gif']
@extends $render-layer // 5
// images and video won't break their containers
img,
code,
kbd,
pre,
samp,
video,
object,
picture,
figure,
iframe
max-width: 100% // 6
width: auto !important // @REPLACE
// fix appearance
input
appearance: none
border-radius: 0
// 1. Remove excess padding in IE 8/9.
input[type='checkbox'],
input[type='radio']
padding: 0 // 1
/**
* 1 Address `appearance` set to `searchfield` in Safari 5 and Chrome.
*/
input[type='search']
-webkit-appearance: textfield // 1
/**
* Remove inner padding and search cancel button in Safari 5 and Chrome on OS X.
*/
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-decoration
-webkit-appearance: none
// Address styling not present in IE 8/9.
[hidden]
display: none
// Correct font family set oddly in Safari 5 and Chrome.
code,
kbd,
pre,
samp
font-family: 'Source Code Pro', monospace, sans-serif
-webkit-overflow-scrolling: touch
/**
* 1. Correct `color` not being inherited in IE 8/9.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend
border: 0 // 1
padding: 0 // 2
// Improve readability of pre-formatted text in all browsers.
pre
font-size: 80%
white-space: normal
section
@extends $clearfix
// Address inconsistent and variable font size in all browsers.
small
font-size: 10px
// Prevent `sub` and `sup` affecting `line-height` in all browsers.
sub,
sup
font-size: 75%
line-height: 0
position: relative
vertical-align: baseline
// superscript default
sup
top: -.5em
// subscript default
sub
bottom: -.25em
// Correct overflow displayed oddly in IE 9.
svg:not( root )
overflow: hidden
/**
* 1. Remove default vertical scrollbar in IE 8/9.
* 2. Improve readability and alignment in all browsers.
*/
textarea
overflow: auto // 1
vertical-align: top // 2