godlike.css/godlike.styl

CSS for layout standardization and usability of web applications

@charset "UTF-8"

// Fix adaptive in mobile browsers
@-ms-viewport
    width device-width
    initial-scale 1

@-moz-viewport
    width device-width
    initial-scale 1

@-webkit-viewport
    width device-width
    initial-scale 1

// Fix default box-sizing
*, :before, :after
    box-sizing border-box

// Fix document height
html
    height 100%

// Fix height and scrollbars
body
    position relative
    min-height 100%
    overflow auto
    overflow-x hidden

    // Remove default margins, fix height
    margin 0
    padding 0

    // Fix hyphenation
    word-wrap break-word

    // Fix text decoration
    text-decoration-skip objects

    // Fix rendering fonts
    -webkit-font-smoothing antialiased
    -moz-osx-font-smoothing grayscale

    // Fix text zoom on Mobile Devices
    -ms-text-size-adjust 100%
    -moz-text-size-adjust 100%
    -webkit-text-size-adjust 100%

    // Fix tap color
    -webkit-tap-highlight-color rgba(0, 0, 0, 0)

    // Add horisontal smoth scroll
    -webkit-overflow-scrolling: touch

    // Remove 300ms delay on Mobile Devices
    -ms-touch-action manipulation
    touch-action manipulation

// Fix default display
span
    display inline-block

// Remove default styles
a, input, button, textarea, optgroup, select, fieldset, figure, legend, address
    font inherit
    color inherit
    line-height inherit
    text-transform inherit
    text-shadow inherit
    border none
    background none
    box-shadow none
    border-radius 0
    margin 0
    padding 0

// Add default animation
a, button, [type='button'], [type='submit']
    transition color .25s, background .25s, opacity .25s

    // Children of buttons should not accept events
    > *
        pointer-events none

// Remove default text-decoration, fix cursor
a
    cursor pointer
    text-decoration none

    // Remove gaps in links underline in iOS 8+ and Safari 8+
    -webkit-text-decoration-skip none

// Fix button bugs
button
    overflow visible
    -webkit-font-smoothing inherit
    letter-spacing inherit

// Remove default margins, add hyphenation, add correct highlight
p
    margin 0
    -ms-hyphens auto
    -moz-hyphens auto
    -webkit-hyphens auto
    hyphens auto
    overflow hidden

// Fix font-weight
b, strong
    font-weight 700

// Fix the correct display
audio, canvas
    display inline-block

// Fix the correct display graphical elements
img, svg, embed, object, iframe, video, audio, canvas
    border 0
    vertical-align middle
    max-width 100%
    height auto

// Fix align graphical elements
img, embed, object, iframe, video
    display block
    margin auto

// Fix Firefox transform scale image bug
img
    image-rendering optimizeQuality

// Change the fill color to match the text color in all browsers
svg
    color inherit

    // Hide the overflow in IE
    &:not(:root)
        overflow hidden

// Fix default alignment
progress
    vertical-align baseline
    border none

// Add valid default styles
h1, h2, h3, h4, h5, h6
    text-rendering optimizeLegibility
    font inherit
    color inherit
    margin 0

// Remove default margins
ul, ol
    margin 0
    padding 0
    list-style none

// Fix default alignment
input, select, button, button > *
    display inline-block
    vertical-align middle

// Remove user-select and add cursor pointer on button
button, label, select, summary, [type='button'], [type='submit'], [type='reset'], [type='checkbox'], [type='radio'], [type='range']
    user-select none
    cursor pointer

// Fix appearance in Chrome and Safari
select, [type='button'], [type='submit'], [type='search'], [type="radio"], [type='range'], ::-webkit-search-cancel-button, ::-webkit-search-decoration, ::-webkit-outer-spin-button, ::-webkit-inner-spin-button, ::-webkit-slider-thumb
    -webkit-appearance none

::-webkit-file-upload-button
    -webkit-appearance button
    font inherit

// Hide autofill Safari icons in input field
::-webkit-contacts-auto-fill-button, ::-webkit-credentials-auto-fill-button
    visibility hidden
    pointer-events none
    position absolute
    right 0

// Fix default autocomplete background color in Chrome and Safari
:-webkit-autofill
    box-shadow inset 0 0 0 1000px #fff

// Remove summary arrow
::marker
    display none

// Fix appearance in Mobile Safari
[type="radio"]
    -webkit-appearance radio

// Fix appearance in Firefox
[type='number']
    -moz-appearance textfield

// Remove clean cross in IE 10
::-ms-clear, ::-ms-reveal
    display none

// Add valid default width
input, textarea
    width 100%

// Add text input with ellipsis
input
    text-overflow ellipsis

// Add scrollbars, remove resize
textarea
    overflow auto
    resize none

// Remove outline on the forms and links
:active, :hover, :focus
    outline 0
    outline-offset 0

// Remove click on the disabled state
:disabled
    pointer-events none
    cursor not-allowed

    // Fix disabled text color
    -webkit-text-fill-color initial

// Remove border and padding in Firefox
::-moz-focus-outer, ::-moz-focus-inner
    border 0
    padding 0

// Fix placeholder color
::placeholder
    opacity 1
    color inherit
::-moz-placeholder // for Firefox 19+
    opacity 1
    color inherit

// Remove default spacing
table
    border-spacing 0
    border-collapse collapse

// Remove default padding
td, th
    padding 0
    text-align center

// Right display elements in article
//article
//
//    // Add margins
//    p:not(:empty)
//        margin-top .7em
//        margin-bottom .7em
//
//    // Fix display
//    span
//        display inline
//
//    // Add margins
//    ul, ol
//        margin-top .7em
//        margin-bottom .7em
//        ul, ol
//            margin 0
//            padding-left 1.2em
//        > li
//            &:before
//                margin-right .7em
//            p
//                display inline
//
//    // Fix marker style
//    ul
//        > li
//            &:before
//                content '•'
//                font-family "Tahoma"
//
//    // Fix counter style
//    ol
//        counter-reset count
//        > li
//            &:before
//                content counter(count) '.'
//                counter-increment count