topcoat-theme/src/variables-mobile.styl

Default theme for Topcoat components

var-color = #c6c8c8
var-font-size = 16px
var-font-size--large = 1.3rem
var-font-weight = 400
var-font-weight--large = var-font-weight
var-letter-spacing = 1px
var-border-radius = 6px
var-border-radius--large = 30px
var-border-radius--huge = 40px
var-padding = 0 1.25rem
var-padding--large = var-padding
var-height = 3rem
var-height--large = 4.375rem
var-line-height = var-height
var-line-height--large = var-height--large
var-vertical-align = top
/* Containers */
var-padding--container = 2rem
/* Icon Button */
var-size--icon = var-height * 0.54 // 25px
var-size--icon--large = var-height--large * 0.571428571
var-padding--icon-button = 0 var-height / 4
var-icon-top = -1px
var-icon-top--large = -2px
/* Navigation bar */
var-padding--navigation-bar = 1rem
/* List */
var-padding--list-header = 4px 20px
var-padding--list-item = 1.25rem
var-font-size--list-header = .9em
var-font-weight--list-header = var-font-weight
/* Search Input */
var-search-icon = url("../img/search.svg")
var-background-image--search-input = var-search-icon
/* Text Area */
var-font-size--textarea = 2.5rem
var-font-size--textarea--large = 3rem
/* Checkbox */
var-size--checkbox = 2rem
var-border-radius--checkbox = 3px
var-top--checkmark = 1px
var-left--checkmark = 2px
var-width--checkmark__tail = 28px
var-height--checkmark__foot = 11px
var-border-radius--checkmark = 2px
var-border-width--checkmark = 7px
var-transform--checkmark = rotate(-50deg)
/* Radio */
var-size--radio-button = 1.875rem
var-size--radio-button--checked = 0.875rem
var-position--radio-button--checked = 7px
/* Range input */
var-width--range__thumb  = 2rem
var-height--range__track = 1rem
/* Search Input */
var-padding--search-input = 0 0 0 2rem
var-padding--search-input--large = 0 0 0 2.9rem
/* Switch */
var-width--switch = 6rem
var-width--switch__label = 5rem
var-right--switch__label--left = 1rem
var-padding-left--switch__label--left = 1.5rem
var-width--switch__toggle = 2rem
var-margin-left--switch__toggle = -1.3rem
var-left--switch__label--right = 1rem
var-padding-left--switch__label--right = 2rem
var-margin-left--switch__toggle--checked = 2.7rem