vuetify/src/stylus/settings/_variables.styl

Vue.js 2 Semantic Component Framework

@require './_theme'

// ============================================================
// Vuetify variables
// ============================================================

$color-pack := true

// Grid
// ============================================================
$grid-breakpoints := {
  xs: 0
  sm: 600px
  md: 960px
  lg: (1280px - 16px) // Desktop gets a 16dp reduction
  xl: (1920px - 16px) // https://material.io/guidelines/layout/responsive-ui.html#responsive-ui-breakpoints
}

$grid-gutter := 8px
$grid-columns := 12
$grid-gutters := {
  xs: ($grid-gutter / 4)
  sm: ($grid-gutter / 2)
  md: $grid-gutter
  lg: ($grid-gutter * 2)
  xl: ($grid-gutter * 3)
}

$container-max-widths := {
  md: $grid-breakpoints.md
  lg: $grid-breakpoints.lg
  xl: $grid-breakpoints.xl
}


// Display
// ============================================================
$display-breakpoints := {
  xs-only: "only screen and (max-width: %s)" % ($grid-breakpoints.sm - 1)
  sm-only: "only screen and (min-width: %s) and (max-width: %s)" % ($grid-breakpoints.sm ($grid-breakpoints.md  - 1))
  sm-and-down: "only screen and (max-width: %s)" % ($grid-breakpoints.md - 1)
  sm-and-up: "only screen and (min-width: %s)" % $grid-breakpoints.sm
  md-only: "only screen and (min-width: %s) and (max-width: %s)" % ($grid-breakpoints.md ($grid-breakpoints.lg  - 1))
  md-and-down: "only screen and (max-width: %s )" % ($grid-breakpoints.lg - 1)
  md-and-up: "only screen and (min-width: %s)" % $grid-breakpoints.md
  lg-only: "only screen and (min-width: %s) and (max-width: %s)" % ($grid-breakpoints.lg ($grid-breakpoints.xl - 1))
  lg-and-down: "only screen and (max-width: (%s - 1))" % $grid-breakpoints.xl
  lg-and-up: "only screen and (min-width: %s)" % $grid-breakpoints.lg
  xl-only: "only screen and (min-width: %s)" % $grid-breakpoints.xl
}


// Spacing
// ============================================================
$spacer := 16px
$spacer-x := $spacer
$spacer-y := $spacer
$spacers := {
  zero: {
    x: 0,
    y: 0
  },
  one: {
    x: ($spacer-x * .25),
    y: ($spacer-y * .25)
  },
  two: {
    x: ($spacer-x * .5),
    y: ($spacer-y * .5)
  },
  three: {
    x: $spacer-x,
    y: $spacer-y
  },
  four: {
    x: ($spacer-x * 1.5),
    y: ($spacer-y * 1.5)
  },
  five: {
    x: ($spacer-x * 3),
    y: ($spacer-y * 3)
  }
}

$font-weights := {
  thin: 100,
  light: 300,
  regular: 400,
  medium: 500,
  bold: 700,
  black: 900
}

// Headings
// ============================================================
$heading-font-family := $body-font-family
$headings := {
  h1: { size: 112px, weight: 300, line-height: 1, letter-spacing: -.04em, font-family: $heading-font-family },
  h2: { size: 56px, weight: 400, line-height: 1.35, letter-spacing: -.02em, font-family: $heading-font-family },
  h3: { size: 45px, weight: 400, line-height: 48px, letter-spacing: normal, font-family: $heading-font-family },
  h4: { size: 34px, weight: 400, line-height: 40px, letter-spacing: normal, font-family: $heading-font-family },
  h5: { size: 24px, weight: 400, line-height: 32px, letter-spacing: normal, font-family: $heading-font-family },
  h6: { size: 20px, weight: 500, line-height: 1, letter-spacing: .02em, font-family: $heading-font-family },
  subheading: { size: 16px, weight: 400 },
  body-2: { size: 14px, weight: 500 },
  body-1: { size: 14px, weight: 400 },
  caption: { size: 12px, weight: 400 },
  button: { size: 14px, weight: 500 }
}


// Transitions
$transition := {
  fast-out-slow-in: cubic-bezier(0.4, 0.0, 0.2, 1),
  linear-out-slow-in: cubic-bezier(0.0, 0.0, 0.2, 1),
  fast-out-linear-in: cubic-bezier(0.4, 0.0, 1, 1),
  ease-in-out: cubic-bezier(0.4, 0.0, 0.6, 1),
  fast-in-fast-out: cubic-bezier(.25,.8,.25,1),
  swing: cubic-bezier(.25,.8,.50,1)
}

$primary-transition := 0.3s $transition.swing
$secondary-transition := 0.2s $transition.ease-in-out

// Components
// ============================================================

// Alerts
$alert-color := inherit
$alert-border-radius := 0
$alert-border-width := 4px 0 0 0
$alert-font-size := $font-size-root
$alert-icon-color := rgba($material-light.fg-color, .3)
$alert-icon-font-size := 24px
$alert-padding := 16px
$alert-margin := $spacers.one.y auto
$alert-outline-border-width := 1px
$alert-outline-border-style := solid

// Badges
$badge-border-radius := 50%
$badge-color := $material-dark.fg-color
$badge-font-family := $body-font-family
$badge-font-size := 14px
$badge-height := 22px
$badge-top := 0
$badge-right := 0
$badge-width := 22px

// Breadcrumbs
$breadcrumbs-flex := 0 1 auto
$breadcrumbs-padding := 18px 12px
$breadcrumbs-even-child-padding := 0 12px
$breadcrumbs-item-font-size := 14px
$breadcrumbs-item-large-font-size := 16px
$breadcrumbs-margin := 0
$breadcrumbs-padding := 0 14px

/** Buttons */

// Base
$button-border-radius := 2px
$button-color := $material-light.fg-color
$button-background-color := #999999
$button-height := 36px
$button-font-size := 14px
$button-font-weight := 500
$button-margin-y := 6px
$button-margin-x := 8px
$button-margin := $button-margin-y $button-margin-x
$button-min-width := 88px
$button-small-padding := 0 8px
$button-padding := 0 16px
$button-large-padding := 0 32px
$button-text-transform := uppercase

$button-small-height := 28px
$button-small-font-size := 13px

$button-large-height := 44px
$button-large-font-size := 15px

$button-floating-width := 56px
$button-floating-icon-height := 24px
$button-floating-icon-width := 24px
$button-floating-small-width := 40px
$button-floating-large-width := 72px
$button-floating-small-icon-width := 18px
$button-floating-large-icon-width := 30px

// Card
$card-border-radius := 2px

// Chip
$chip-border-radius := 28px
$chip-close-margin := 0 2px 0 8px
$chip-close-margin-rtl := 0 8px 0 2px
$chip-font-size := 13px
$chip-label-border-radius := $card-border-radius
$chip-icon-font-size := 20px
$chip-padding := 0 12px
$chip-outline-background := transparent !important
$chip-outline-color := $grey.base
$chip-height := 32px
$chip-margin := 4px
$chip-small-height := 24px
$chip-small-font-size := 20px
$chip-icon-offset := 12px
$chip-icon-negative-offset := -8px
// TODO: s/removeable/removable in 2.0
// invalid name kept to avoid possible breaking change
$chip-removeable-padding := 0 $chip-margin 0 $chip-icon-offset
$chip-removable-padding-rtl := 0 $chip-icon-offset 0 $chip-margin
// TODO: remove in 2.0
$chip-removable-padding := $chip-removeable-padding

// Collapsible
$expansion-panel-collapse-height := 48px
$collapsible-transition-height := 0.23s

// Footer
$footer-height := 36px

/** Lists */
// List fonts and weights
$list-tile-font-size := $headings.subheading.size // 16px - the mdc scss uses subheading to configure like this
$list-tile-font-weight := $headings.subheading.weight // 400

$list-action-text-font-size := 12px // this is for the stacked actions
$list-action-text-font-color := $grey.base

$list-sub-title-font-size := ($list-tile-font-size - 2px) // 14px

$subheader-height-font-size := ($list-tile-font-size - 2px) // 14px
$subheader-font-weight := $font-weights.medium // 500


// List spacing
$list-left-padding := 16px
$list-right-padding := 16px
$list-top-padding := 8px
$list-bottom-padding := 8px

$list-item-right-margin := 56px
$list-item-left-padding := 72px
$list-item-avatar-triple-margin-top := -18px
$list-item-single-height := 48px
$list-item-double-height := 72px
$list-item-triple-height := 88px
$list-item-avatar-single-height := 56px

$subheader-inset-margin := $list-item-right-margin

// List dense overrides
$list-item-dense-font-size := ($list-tile-font-size - 3px) //13px
$subheader-dense-font-size := $list-item-dense-font-size
$list-item-dense-icon-font-size := 22px
$list-item-dense-avatar-triple-margin-top := -14px
$list-item-dense-top-padding := $list-top-padding / 2
$list-item-dense-single-height := $list-item-single-height - 8px //40px
$list-item-dense-double-height := $list-item-double-height - 12px //60px
$list-item-dense-triple-height := $list-item-triple-height - 12px //76px

$list-item-dense-avatar-single-height := $list-item-single-height //48px the dense concept was to take avatars to a normal single item height
$list-item-dense-avatar-height := 38px

$list-dense-subheader-height := $list-item-dense-single-height
$list-dense-subheader-group-height := $list-dense-subheader-height //the subheader under a group menu


// Pickers
$time-picker-number-font-size := 16px
$time-picker-indicator-size := 40px

// Toolbar
$toolbar-height := 56px
$toolbar-item-padding := 0 16px
$toolbar-padding-y := 0
$toolbar-padding-x := 16px

// Progress Circular
$progress-circular-rotate-animation := progress-circular-rotate 1.4s linear infinite
$progress-circular-rotate-dash := progress-circular-dash 1.4s ease-in-out infinite
$process-circular-intermediate-svg-transition := all .2s ease-in-out
$progress-circular-underlay-stroke := rgba($material-light.fg-color, 0.1)
$progress-circular-overlay-transition := all .6s ease-in-out

// Navigation drawer
$navigation-drawer-item-font-size := 14px
$navigation-drawer-item-font-weight := $font-weights.medium
$navigation-drawer-group-item-font-weight := $font-weights.regular

// Snackbar
$snackbar-color := #fff
$snackbar-background-color := #323232
$snackbar-corner-offset := 24px

// Tab
$tab-text-transform := uppercase

// Inputs
$input-top-spacing := 16px
$text-field-active-label-height := 12px

// Timeline
$timeline-wedge-size := 10px
$timeline-dot-small-size := 24px
$timeline-dot-regular-size := 38px
$timeline-dot-large-size := 52px

$timeline-inner-dot-small-size := 18px
$timeline-inner-dot-small-margin := 3px
$timeline-inner-dot-regular-size := 30px
$timeline-inner-dot-regular-margin := 4px
$timeline-inner-dot-large-size := 42px
$timeline-inner-dot-large-margin := 5px

// Directives
// ============================================================

// Ripple animation
$ripple-animation-transition-in := transform .25s $transition.fast-out-slow-in, opacity .1s $transition.fast-out-slow-in
$ripple-animation-transition-out := opacity .3s $transition.fast-out-slow-in
$ripple-animation-visible-opacity := .15

// Treeview transition
$treeview-transition := .2s $transition.linear-out-slow-in