stylint/styl/_base.styl

A linter for stylus

/**
 * Global styles, the starting point. No classes or ids.
 * contains our resets, link styling, default font sizes, etc
*/


.some-class
    margin 0
    margin 5px

/**
 * 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

mixin()
    return ( $width*$height )
    return ( $width * $height )


.my-unlikely-test
    margin 0


[class*='test']
    margin 0


input.required::after
    content '*'


$color = black
.select
    border 1px solid $color



.block1
    // Passes just fine
    &--link, &--link:link
        color: #000


.block2
    // Throws warning
    &--link,
    &--link:link
        color: #000


// sensible defaults
html
    -ms-text-size-adjust 100%
    -webkit-text-size-adjust 100%
    line-height 1

    // 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-overflow-scrolling touch
    -moz-osx-font-smoothing grayscale // 1
    -webkit-font-smoothing antialiased // 1
    -webkit-osx-font-smoothing grayscale // 1
    image-rendering crisp-edges // 2
    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-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