test-styl/base.styl
/**
* Global styles, the starting point. No classes or ids.
* contains our resets, link styling, default font sizes, etc
*/
/**
* GLOBAL RESET
* global reset addresses *most* inconsistencies
*/
global-reset()
/**
* HTML5 RESET
* fixes issues with html5 elements not rendering on old browsers
*/
reset-html5()
// @stylint off (this is the one valid use case of *)
// make padding work correctly (won't affect width of element)
*,
*:after,
*:before
box-sizing border-box
// purty highlight (ok also this use of * is okay. gimmicky but whatevs)
*::selection
background $light-blue
// @stylint on
// sensible defaults
html
line-height 1
-ms-text-size-adjust 100%
-webkit-text-size-adjust 100%
// override style breaking wp admin margin when logged in
&.no-js
margin-top 0 !important
/**
* universal baseline
* 1 font-smoothing makes our text sharp
* 2 crisper, higher contrast gifs and pngs, on supported browsers
* 3 wont work on firefox unfortunately
* 4 height of global header at top
* 5 this setting can speed up font rendering significantly, esp on mobile
* 6 remove click delay on microsoft devices
*/
body
-webkit-font-smoothing antialiased // 1
-webkit-osx-font-smoothing grayscale // 1
-moz-osx-font-smoothing grayscale // 1
image-rendering crisp-edges // 2
-webkit-overflow-scrolling touch
overflow-x hidden // 3
padding-top 60px // 4
text-rendering optimizeSpeed // 5
touch-action manipulation // 6
// gray bg on grid pages
&:not( .single )
background-color $gray-1
// hide brand bar on smaller devices by default
@media $med-plus
padding-top 90px
/**
* set link defaults
* 1 Address `outline` inconsistency between Chrome and other browsers.
* 2 Improve readability when focused and also mouse hovered in all browsers
*/
a
transition( color, .15s, false )
color inherit
text-decoration none
&:focus
outline thin dotted // 1
&:active,
&:hover
cursor pointer
outline 0 // 2
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
// Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
b,
strong
font-weight bold
// fixes blockquote rendering bugs in older browsers
blockquote
quotes none
&:after,
&:before
content ''
content none // on purpose
/**
* 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
text-transform 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
// Re-set default cursor for disabled elements.
button[disabled],
html input[disabled]
cursor default
// remove default margin
figure
margin 0
// no underlines on headlines
h1,
h2,
h3,
h4,
h5,
h6
transition( color, .15s, false )
color $black
// i is reserved for icons, not italic
// this throws accessibility warnings. but i think its fine in our use case
i
display block
font-style normal
/**
* 1 Remove border when inside `a` element in IE
* 2 no stretchy
* 3 fixes annoying phantom space after images
* 4 default to full width (maybe not the best idea?)
*/
img,
iframe
border 0 // 1
display block // 3
img
height auto // 2
code,
kbd,
pre,
samp
max-width 100% // 4
// images and video won't break their containers
img,
video,
object,
figure,
iframe
max-width 100%
// 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
input[type='text']
@extends $caption
border $border-micro
border-radius 0
padding $gutter-med
// Address styling not present in IE 8/9.
[hidden]
display none
// Address differences between Firefox and other browsers.
hr
background $gray-6
border-style solid
border-top 0
box-sizing content-box
height 0
margin 0 auto
opacity .18
width s( 'calc(100% - (%s * 2))', $gutter-med )
// Correct font family set oddly in Safari 5 and Chrome.
code,
kbd,
pre,
samp
font-family 'Source Code Pro', monospace, sans-serif
margin 0 0 $gutter-med
-webkit-overflow-scrolling touch
overflow-x scroll
/**
* 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
// default to no list style
ol,
ul
list-style none
// Improve readability of pre-formatted text in all browsers.
pre
font-size 80%
white-space pre
// Address inconsistent and variable font size in all browsers.
small
font-size 10px
@extends $meta
// 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
/**
* @description styl for the uservoice hiding at mobile.
* Done this way because it's a 3rd party source
* & can't get a class of mob-hide.
*/
// @author Ian Sayre
#uvTab
@media $mob
display none !important