quasar-framework/src/css/variables.ios.styl

Simultaneously build desktop/mobile SPA websites & phone/tablet apps with VueJS

$generic-border-radius      ?= 4px
$typography-font-family     ?= '-apple-system', 'Helvetica Neue', Helvetica, Arial, sans-serif
$min-line-height            ?= 1.19

$action-sheet-background       ?= white
$action-sheet-border-radius    ?= 13px
$action-sheet-hover-background ?= #d0d0d0

$alert-padding        ?= 12px
$alert-border-radius  ?= $generic-border-radius
$alert-min-width      ?= 200px

$breadcrumb-radius    ?= $generic-border-radius
$breadcrumb-height    ?= 34px
$breadcrumb-separator ?= 15px
$breadcrumb-primary   ?= $primary
$breadcrumb-secondary ?= lighten($breadcrumb-primary, 10%)
$breadcrumb-hover     ?= $tertiary
$breadcrumb-active    ?= darken($breadcrumb-hover, 15%)

$button-border-radius         ?= $generic-border-radius
$button-padding               ?= 4px 16px
$button-dense-padding         ?= 4px
$button-transition            ?= .3s cubic-bezier(.25, .8, .5, 1)
$button-font-size             ?= 14px
$button-rounded-border-radius ?= 28px
$button-push-border-radius    ?= 7px

$card-faded-color          ?= rgba(0, 0, 0, .4)
$card-separator-color      ?= rgba(0, 0, 0, .1)
$card-overlay-color        ?= rgba(0, 0, 0, .47)
$card-shadow               ?= $shadow-2
$card-dark-faded-color     ?= rgba(255, 255, 255, .6)
$card-dark-separator-color ?= rgba(255, 255, 255, .2)

$carousel-padding                           ?= 18px
$carousel-quick-nav-icon-font-size          ?= 18px
$carousel-quick-nav-icon-inactive-font-size ?= 14px
$carousel-quick-nav-background              ?= rgba(0, 0, 0, .3)

$chat-message-received-color     ?= black
$chat-message-received-bg        ?= $green-4
$chat-message-sent-color         ?= black
$chat-message-sent-bg            ?= $grey-4
$chat-message-avatar-size        ?= 48px
$chat-message-border-radius      ?= 20px
$chat-message-distance           ?= 8px
$chat-message-text-padding-vert  ?= 9px
$chat-message-text-padding-horiz ?= 11px

$chip-border             ?= #e0e0e0
$chip-border-radius      ?= 2rem
$chip-font-size          ?= 14px
$chip-padding-horizontal ?= 0
$chip-padding-vertical   ?= 12px
$chip-height             ?= 32px
$chip-icon-size          ?= 24px
$chip-small-icon-size    ?= 16px
$chip-small-height       ?= 26px
$chip-color              ?= black
$chip-background         ?= $grey-3

$item-dense-factor                 ?= .2
$item-sparse-factor                ?= 1.4
$item-base-color                   ?= $grey-5
$item-highlight-color              ?= alpha($item-base-color, 50%)
$item-stripe-color                 ?= alpha($item-base-color, 65%)
$item-active-color                 ?= alpha($item-base-color, 40%)
$item-side-color                   ?= #737373
$item-label-color                  ?= $grey-7
$item-content-secondary-text-color ?= $grey-7
$item-separator-color              ?= rgb(224, 224, 224)

$item-base-dark-color                   ?= $grey-7
$item-highlight-dark-color              ?= alpha($item-base-dark-color, 30%)
$item-stripe-dark-color                 ?= alpha($item-base-dark-color, 45%)
$item-active-dark-color                 ?= alpha($item-base-dark-color, 20%)
$item-side-dark-color                   ?= #bbb
$item-label-dark-color                  ?= rgba(255,255,255,0.64)
$item-content-secondary-text-dark-color ?= $grey-5
$item-separator-dark-color              ?= rgba(255,255,255,0.32)

$item-min-height                   ?= 40px
$item-padding                      ?= 16px
$item-gutter                       ?= 10px
$item-primary-size                 ?= 38px
$item-inverted-icon-size           ?= round($item-primary-size * .52)
$item-icon-size                    ?= round($item-primary-size * .63)
$item-image-size                   ?= round(3 * $item-primary-size)
$item-font-size                    ?= 1rem
$item-stamp-font-size              ?= .8rem

$collapsible-padding             ?= 8px 16px
$collapsible-indent-left-padding ?= ($item-primary-size + $item-gutter)
$collapsible-active-color        ?= $item-active-color
$collapsible-menu-left-padding   ?= 48px

$datetime-range-space    ?= 10px
$datetime-input-min-width ?= 70px

$dot-color             ?= $red
$dot-opacity           ?= .8
$dot-size              ?= 10px
$dot-position-top      ?= 10px
$dot-position-right    ?= 10px

$editor-border-color            ?= #ccc
$editor-border                  ?= 1px solid $editor-border-color
$editor-content-padding         ?= 10px
$editor-content-min-height      ?= 10em
$editor-toolbar-padding         ?= 4px
$editor-hr-color                ?= $editor-border-color
$editor-button-gutter           ?= 5px

$fab-margin    ?= 5px

$field-icon-size        ?= 28px
$field-label-color      ?= $dark
$field-dark-label-color ?= $light

$table-transition               ?= .3s cubic-bezier(.25, .8, .5, 1)
$table-border-radius            ?= $generic-border-radius
$table-box-shadow               ?= $shadow-2

$table-border-color             ?= rgba(0, 0, 0, .12)
$table-color                    ?= rgba(0, 0, 0, .87)
$table-header-color             ?= rgba(0, 0, 0, .54)
$table-hover-background         ?= rgba(0, 0, 0, .03)
$table-selected-background      ?= rgba(0, 0, 0, .06)

$table-dark-border-color        ?= rgba(255, 255, 255, .12)
$table-dark-color               ?= white
$table-dark-header-color        ?= rgba(255, 255, 255, .64)
$table-dark-hover-background    ?= rgba(255, 255, 255, .1)
$table-dark-selected-background ?= rgba(255, 255, 255, .2)

$input-frame-transition ?= all .45s cubic-bezier(.23, 1, .32, 1)

$toolbar-color               ?= white
$toolbar-background          ?= $primary
$toolbar-inverted-color      ?= $toolbar-background
$toolbar-inverted-background ?= $toolbar-color
$toolbar-min-height          ?= 50px
$toolbar-padding             ?= 4px 10px
$toolbar-title-font-size     ?= 16px
$toolbar-subtitle-font-size  ?= 12px
$toolbar-title-font-weight   ?= 600
$toolbar-title-padding       ?= 0 5px

$layout-aside-background   ?= white
$layout-aside-left-width   ?= 280px
$layout-aside-right-width  ?= 280px
$layout-border-color       ?= $grey-5
$layout-border             ?= 1px solid $layout-border-color

$loading-background ?= $dimmed-background

$modal-background        ?= white
$modal-width             ?= 80vw
$modal-max-width         ?= 1000px
$modal-height            ?= 80vh
$modal-max-height        ?= 1000px
$modal-header-font-size  ?= 1.3rem
$modal-header-padding    ?= 20px 16px 10px
$modal-header-text-align ?= center
$modal-body-color        ?= black
$modal-body-padding      ?= 10px 16px 21px
$modal-scroll-size       ?= 240px
$modal-buttons-padding   ?= 0
$modal-border-radius     ?= 13px

$label-offset ?= 8px

$paralax-text-shadow ?= 0 0 5px white

$popover-background   ?= white
$popover-box-shadow   ?= $shadow-24
$popover-max-width    ?= 100vw

$progress-track-height         ?= 5px
$progress-track-color          ?= currentColor
$progress-color                ?= $primary
$progress-track-opacity        ?= .2
$progress-transition           ?= width .3s linear

$pull-to-refresh-color              ?= $primary
$pull-to-refresh-font-size          ?= 1rem
$pull-to-refresh-icon-size          ?= 2rem

$rating-grade-color     ?= $yellow
$rating-shadow          ?= 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24)

$stepper-color                 ?= $primary
$stepper-divider-color         ?= rgba(0, 0, 0, .12)
$stepper-label-color           ?= rgba(0, 0, 0, .56)
$stepper-label-inactive-color  ?= rgba(0, 0, 0, .42)
$stepper-hover-background      ?= rgba(0, 0, 0, .05)
$stepper-active-background     ?= rgba(0, 0, 0, .17)
$stepper-pane-padding          ?= 16px
$stepper-border-radius         ?= $generic-border-radius

$tabs-padding                  ?= 12px 12px
$tabs-padding-with-icon        ?= 6px 10px
$tabs-big-screen-horiz-padding ?= 25px
$tabs-min-height               ?= 50px
$tabs-min-height-with-icon     ?= 62px
$tabs-big-screen-side-padding  ?= 12px
$tabs-pane-padding             ?= 12px
$tabs-color                    ?= $toolbar-color
$tabs-background               ?= $toolbar-background
$tabs-inverted-color           ?= $grey-7
$tabs-inverted-background      ?= white
$tabs-pane-border              ?= 1px solid rgba(0, 0, 0, .1)
$tabs-unselected-opacity       ?= .6
$tabs-font-size                ?= .9rem
$tabs-icon-font-size           ?= 24px
$tabs-font-weight              ?= 400
$tabs-text-transform           ?= uppercase

$tooltip-color         ?= black
$tooltip-background    ?= white
$tooltip-box-shadow    ?= $shadow-6
$tooltip-padding       ?= 10px
$tooltip-border-radius ?= $generic-border-radius

$tree-connector-color            ?= #ccc
$tree-label-padding              ?= 5px
$tree-label-border-radius        ?= $generic-border-radius
$tree-highlight-color            ?= inherit
$tree-highlight-background       ?= $tree-connector-color
$tree-label-icon-font-size       ?= 1.3rem