generator-robonkey/generators/styles/templates/stylus/tpl/reset/sanitize.styl

A Yeoman generator for Gulp, Templating, CSS Preprocessors, Coffeescript, PostCSS, Modernizr, svg icons/icon font generator, BrowserSync, and some libraries to choose from. Express, Wordpress, Drupal, CodeIgniter, Laravel subgenerators are available.

/*! sanitize.stylus v2.0.0 | CC0 1.0 Public Domain | github.com/sotayamashita/sanitize.stylus */
/*
 * Normalization
 */
$root-box-sizing ?= border-box;
$root-cursor ?= default;
$root-font-family ?= sans-serif;
$root-font-size ?= 100%;
$root-line-height ?= 1.5;
$root-text-rendering ?= optimizeLegibility;

$html-background-color ?= #FFFFFF;
$html-color ?= #000000;
$anchor-text-decoration ?= none;
$media-element-vertical-align ?= middle;
$monospace-font-family ?= monospace;
$form-element-background-color ?= transparent;
$nav-list-style ?= none;
$selection-background-color ?= #B3D4FC;
$selection-color ?= invert(selection-background-color);
$selection-text-shadow ?= none;
$small-font-size ?= 75%;
$table-border-collapse ?= collapse;
$table-border-spacing ?= 0;
$textarea-resize ?= vertical;


:root
  -ms-overflow-style -ms-autohiding-scrollbar // Edge 12+, Internet Explorer 11-
  overflow-y scroll // All browsers without overlaying scrollbars
  -webkit-text-size-adjust 100% // iOS 8+


audio:not([controls])
  display none // Chrome 44-, iOS 8+, Safari 9+


button
  overflow visible // Internet Explorer 11-


details
  display block // Edge 12+, Firefox 40+, Internet Explorer 11-, Windows Phone 8.1+


input
  &[type="number"]
    width auto // Firefox 36+

  &[type="search"]
    -webkit-appearance textfield // Chrome 45+, Safari 9+

  &::-webkit-search-cancel-button,
  &::-webkit-search-decoration
    -webkit-appearance: none  // Chrome 45+, Safari 9+


main
  display block // Android 4.3-, Internet Explorer 11-, Windows Phone 8.1+


summary
  display block // Firefox 40+, Internet Explorer 11-, Windows Phone 8.1+


pre
  overflow auto // Internet Explorer 11-


progress
  display inline-block // Internet Explorer 11-, Windows Phone 8.1+


small
  font-size small-font-size // All browsers


template
  display none // Android 4.3-, Internet Explorer 11-, iOS 7-, Safari 7-, Windows Phone 8.1+


textarea
  overflow auto // Edge 12+, Internet Explorer 11-


[hidden]
  display none // Internet Explorer 10-





/*
 * Universal inheritance
 */
*,
::before,
::after
  box-sizing inherit


*
  font-size inherit
  line-height inherit


::before,
::after
  text-decoration inherit
  vertical-align inherit





/*
 * Opinionated defaults
 */
// specify the border style and width of all elements
*,
::before,
::after
  border-style solid
  border-width 0


// remove the margin and padding of all elements
*
  margin 0
  padding 0


// specify the root styles of the document
:root
  box-sizing $root-box-sizing
  cursor $root-cursor
  font $root-font-size/root-line-height root-font-family
  text-rendering $root-text-rendering;


// specify the background color of html
html
  background-color $html-background-color
  color $html-color


// specify the text decoration of anchors
a
  text-decoration $anchor-text-decoration


// specify the alignment of media elements
audio,
canvas,
iframe,
img,
svg,
video
  vertical-align $media-element-vertical-align


// specify the background color of form elements
button,
input,
select,
textarea
  background-color $form-element-background-color


// specify the inherited color and font of form elements
button,
input,
select,
textarea
  color inherit
  font-family inherit
  font-style inherit
  font-weight inherit


// specify the minimum height of form elements
// Function form-element-min-height(root-line-height: int)
form-element-min-height($root-line-height)
  if unit($root-line-height) == ''
    {$root-line-height}em
  else if unit($root-line-height) != '%'
    $root-line-height
  else
    null

button,
[type="button"],
[type="date"],
[type="datetime"],
[type="datetime-local"],
[type="email"],
[type="month"],
[type="number"],
[type="password"],
[type="reset"],
[type="search"],
[type="submit"],
[type="tel"],
[type="text"],
[type="time"],
[type="url"],
[type="week"],
select,
textarea
  min-height form-element-min-height($root-line-height)


// specify the font family of code elements
code,
kbd,
pre,
samp
  font-family: $monospace-font-family, monospace


// specify the list style of nav lists
nav ol,
nav ul
  list-style $nav-list-style


// specify the standard appearance of selects
select
  -moz-appearance none    // Firefox 40+
  -webkit-appearance none // Chrome 45+

  &::-ms-expand
    display none        // Edge 12+, Internet Explorer 11-

  &::-ms-value
    color currentColor  // Edge 12+, Internet Explorer 11-


// specify the border styling of tables
table
  border-collapse $table-border-collapse
  border-spacing $table-border-spacing


// specify the resizability of textareas
textarea
  resize $textarea-resize


// specify the background color, font color and drop shadow of text selections
::selection
  background-color $selection-background-color // required when declaring ::selection
  color $selection-color
  text-shadow $selection-text-shadow


// specify the progress cursor of updating elements
[aria-busy="true"]
  cursor progress


// specify the pointer cursor of trigger elements
[aria-controls]
  cursor pointer


// specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements
[aria-disabled]
  cursor default


// specify the style of visually hidden yet accessible elements
[hidden][aria-hidden="false"]
  clip rect(0 0 0 0)
  display inherit
  position absolute

  &:focus
    clip auto