topcoat-theme/src/variables-desktop.styl

Default theme for Topcoat components

var-font-size = 12px
var-font-size--large = 0.875rem // 14px
var-font-weight = 400
var-font-weight--large = 600
var-letter-spacing = 0
var-border-radius = 4px
var-border-radius--large = 15px
var-border-radius--huge = 25px
var-padding = 0 0.563rem
var-padding--large = 0 0.875rem
var-height = 1.313rem // 21px
var-height--large = 1.688rem // 27px
var-line-height = var-height
var-line-height--large = var-height--large
var-vertical-align = top
/* Icon Button */
var-size--icon = var-height * 0.62 // 13px
var-size--icon--large = var-height--large * 0.63 // 17px
var-padding--icon-button = 0 0.25rem
var-icon-top = -1px
var-icon-top--large = -2px
/* Navigation bar */
var-padding--navigation-bar = 1rem
/* List */
var-padding--list-header = 0.3rem 1.6rem
var-padding--list-item = 1.16rem
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
/* Textarea */
var-font-size--textarea = 1rem
var-padding--container = 1rem
/* Checkbox */
var-size--checkbox = 1rem
var-border-radius--checkbox = 3px
var-top--checkmark = 2px
var-left--checkmark = 1px
var-width--checkmark__tail = 14px
var-height--checkmark__foot = 4px
var-border-radius--checkmark = 1px
var-border-width--checkmark = 3px
var-transform--checkmark = rotate(-50deg)
/* Radio */
var-size--radio-button = 1.063rem
var-size--radio-button--checked = 0.313rem
var-position--radio-button--checked = 0.313rem
var-border--radio-button = 1px solid rgba(0,0,0,0.1)
var-background--radio-button = #666666
var-box-shadow--radio-button = 0 1px rgba(255,255,255,0.50)
/* Range input */
var-width--range__thumb  = 0.75rem
var-height--range__track = 0.5rem
/* Search Input */
var-padding--search-input = 0 0 0 1.3rem
var-padding--search-input--large = 0 0 0 1.8rem
/* Switch */
var-width--switch = 3.5rem
var-width--switch__label = 2.6rem
var-content--switch__label--left = 'ON'
var-content--switch__label--right = 'OFF'
var-right--switch__label--left = .8rem
var-padding-left--switch__label--left = 0.75rem
var-width--switch__toggle = 1rem
var-margin-left--switch__toggle = -0.6rem
var-left--switch__label--right = .8rem
var-padding-left--switch__label--right = 0.6rem
var-margin-left--switch__toggle--checked = 1.85rem