Base Align
css
.align-baseline
.align-baseline { ... }
Author
Basscss@v8
.align-top
.align-top { ... }
Author
Basscss@v8
.align-middle
.align-middle { ... }
Author
Basscss@v8
.align-bottom
.align-bottom { ... }
Author
Basscss@v8
Base Border
variables
base-border-width
$base-border-width: 1px !default;
Author
Basscss@v8
base-border-thick-width
$base-border-thick-width: 4px !default;
Author
Basscss@v8
base-border-radius
$base-border-radius: 4px !default;
Author
Basscss@v8
base-border-color
$base-border-color: $color-blue-gray-400 !default;
Author
Basscss@v8
css
.border
.border { ... }
Author
Basscss@v8
.border-none
.border-none { ... }
Author
Basscss@v8
.border-none-top
.border-none-top { ... }
Author
Basscss@v8
.border-none-right
.border-none-right { ... }
Author
Basscss@v8
.border-none-bottom
.border-none-bottom { ... }
Author
Basscss@v8
.border-none-left
.border-none-left { ... }
Author
Basscss@v8
.rounded
.rounded { ... }
Author
Basscss@v8
.circle
.circle { ... }
Author
Basscss@v8
.not-rounded
.not-rounded { ... }
Author
Basscss@v8
.rounded-top
.rounded-top { ... }
Author
Basscss@v8
.rounded-right
.rounded-right { ... }
Author
Basscss@v8
.rounded-bottom
.rounded-bottom { ... }
Author
Basscss@v8
.rounded-left
.rounded-left { ... }
Author
Basscss@v8
.border-top
.border-top { ... }
Author
Basscss@v8
.border-right
.border-right { ... }
Author
Basscss@v8
.border-bottom
.border-bottom { ... }
Author
Basscss@v8
.border-left
.border-left { ... }
Author
Basscss@v8
Base Cursor
css
.cursor-pointer
.cursor-pointer { ... }
Author
Michael Becker
.cursor-help
.cursor-help { ... }
Author
Michael Becker
.cursor-copy
.cursor-copy { ... }
Author
Michael Becker
.cursor-copy
.cursor-copy { ... }
Author
Michael Becker
.cursor-wait
.cursor-wait { ... }
Author
Michael Becker
.cursor-progress
.cursor-progress { ... }
Author
Michael Becker
.cursor-not-allowed
.cursor-not-allowed { ... }
Author
Michael Becker
.cursor-none
.cursor-none { ... }
Author
Michael Becker
Base Flexbox
css
.flex
.flex { ... }
Author
Basscss@v8, Michael Becker
.inline-flex
.inline-flex { ... }
Author
Basscss@v8, Michael Becker
.#{$class-flex-xs}
.#{$class-flex-xs} { ... }
Description
for bp-xs
Author
Basscss@v8, Michael Becker
.#{$class-flex-sm}
.#{$class-flex-sm} { ... }
Description
for bp-sm
Author
Basscss@v8, Michael Becker
.#{$class-flex-md}
.#{$class-flex-md} { ... }
Description
for bp-md
Author
Basscss@v8, Michael Becker
.#{$class-flex-lg}
.#{$class-flex-lg} { ... }
Description
for bp-lg
Author
Basscss@v8, Michael Becker
.#{$class-flex-xl}
.#{$class-flex-xl} { ... }
Description
for bp-xl
Author
Basscss@v8, Michael Becker
.flex-column
.flex-column { ... }
Author
Basscss@v8, Michael Becker
.flex-wrap
.flex-wrap { ... }
Author
Basscss@v8, Michael Becker
.flex-nowrap
.flex-nowrap { ... }
Author
Basscss@v8, Michael Becker
.flex-wrap-reverse
.flex-wrap-reverse { ... }
Author
Basscss@v8, Michael Becker
.shrink-0x
.shrink-0x { ... }
Author
Basscss@v8, Michael Becker
.shrink-1x
.shrink-1x { ... }
Author
Basscss@v8, Michael Becker
.shrink-2x
.shrink-2x { ... }
Author
Basscss@v8, Michael Becker
.shrink-3x
.shrink-3x { ... }
Author
Basscss@v8, Michael Becker
.grow-0x
.grow-0x { ... }
Author
Basscss@v8, Michael Becker
.grow-1x
.grow-1x { ... }
Author
Basscss@v8, Michael Becker
.grow-2x
.grow-2x { ... }
Author
Basscss@v8, Michael Becker
.grow-3x
.grow-3x { ... }
Author
Basscss@v8, Michael Becker
.items-start
.items-start { ... }
Author
Basscss@v8, Michael Becker
.items-end
.items-end { ... }
Author
Basscss@v8, Michael Becker
.items-center
.items-center { ... }
Author
Basscss@v8, Michael Becker
.items-baseline
.items-baseline { ... }
Author
Basscss@v8, Michael Becker
.items-stretch
.items-stretch { ... }
Author
Basscss@v8, Michael Becker
.self-start
.self-start { ... }
Author
Basscss@v8, Michael Becker
.self-end
.self-end { ... }
Author
Basscss@v8, Michael Becker
.self-center
.self-center { ... }
Author
Basscss@v8, Michael Becker
.self-baseline
.self-baseline { ... }
Author
Basscss@v8, Michael Becker
.self-stretch
.self-stretch { ... }
Author
Basscss@v8, Michael Becker
.justify-start
.justify-start { ... }
Author
Basscss@v8, Michael Becker
.justify-end
.justify-end { ... }
Author
Basscss@v8, Michael Becker
.justify-center
.justify-center { ... }
Author
Basscss@v8, Michael Becker
.justify-between
.justify-between { ... }
Author
Basscss@v8, Michael Becker
.justify-around
.justify-around { ... }
Author
Basscss@v8, Michael Becker
.justify-evenly
.justify-evenly { ... }
Author
Basscss@v8, Michael Becker
.content-start
.content-start { ... }
Author
Basscss@v8, Michael Becker
.content-end
.content-end { ... }
Author
Basscss@v8, Michael Becker
.content-center
.content-center { ... }
Author
Basscss@v8, Michael Becker
.content-between
.content-between { ... }
Author
Basscss@v8, Michael Becker
.content-around
.content-around { ... }
Author
Basscss@v8, Michael Becker
.content-stretch
.content-stretch { ... }
Author
Basscss@v8, Michael Becker
.flex-auto
.flex-auto { ... }
Description
Flex Auto position [a] Fix for Chrome 44 bug. https://code.google.com/p/chromium/issues/detail?id=506893 */
Author
Basscss@v8, Michael Becker
.flex-none
.flex-none { ... }
Author
Basscss@v8, Michael Becker
.order-0
.order-0 { ... }
Author
Basscss@v8, Michael Becker
.order-1
.order-1 { ... }
Author
Basscss@v8, Michael Becker
.order-2
.order-2 { ... }
Author
Basscss@v8, Michael Becker
.order-3
.order-3 { ... }
Author
Basscss@v8, Michael Becker
.order-last
.order-last { ... }
Author
Basscss@v8, Michael Becker
variables
class-flex-xs
$class-flex-xs: flex-xs !default;
Author
Basscss@v8, Michael Becker
class-flex-sm
$class-flex-sm: flex-sm !default;
Author
Basscss@v8, Michael Becker
class-flex-md
$class-flex-md: flex-md !default;
Author
Basscss@v8, Michael Becker
class-flex-lg
$class-flex-lg: flex-lg !default;
Author
Basscss@v8, Michael Becker
class-flex-xl
$class-flex-xl: flex-xl !default;
Author
Basscss@v8, Michael Becker
Base Hide
css
.hide, .sr-only
.hide, .sr-only { ... }
Author
Basscss@v8
.#{$class-hide-xs}
.#{$class-hide-xs} { ... }
Description
for bp-xs
Author
Basscss@v8
.#{$class-hide-sm}
.#{$class-hide-sm} { ... }
Description
for bp-sm
Author
Basscss@v8
.#{$class-hide-md}
.#{$class-hide-md} { ... }
Description
for bp-md
Author
Basscss@v8
.#{$class-hide-lg}
.#{$class-hide-lg} { ... }
Description
for bp-lg
Author
Basscss@v8
.#{$class-hide-xl}
.#{$class-hide-xl} { ... }
Description
for bp-xl
Author
Basscss@v8
.display-none
.display-none { ... }
Author
Basscss@v8
variables
class-hide-xs
$class-hide-xs: hide-xs !default;
Author
Basscss@v8
class-hide-sm
$class-hide-sm: hide-sm !default;
Author
Basscss@v8
class-hide-md
$class-hide-md: hide-md !default;
Author
Basscss@v8
class-hide-lg
$class-hide-lg: hide-lg !default;
Author
Basscss@v8
class-hide-xl
$class-hide-xl: hide-xl !default;
Author
Basscss@v8
Base Layout
css
.inline
.inline { ... }
Author
Basscss@v8
.block
.block { ... }
Author
Basscss@v8
.inline-block
.inline-block { ... }
Author
Basscss@v8
.table
.table { ... }
Author
Basscss@v8
.table-cell
.table-cell { ... }
Author
Basscss@v8
.overflow-scroll
.overflow-scroll { ... }
Author
Basscss@v8
.overflow-visible
.overflow-visible { ... }
Author
Basscss@v8
.overflow-auto
.overflow-auto { ... }
Author
Basscss@v8
.clearfix
.clearfix { ... }
Description
correct sizing for the parent node when the children are using float: left|right
Author
Basscss@v8
.left
.left { ... }
Author
Basscss@v8
.right
.right { ... }
Author
Basscss@v8
.fit
.fit { ... }
Author
Basscss@v8
.img-fit-w
.img-fit-w { ... }
Author
Basscss@v8
.img-fit-h
.img-fit-h { ... }
Author
Basscss@v8
.border-box
.border-box { ... }
Author
Basscss@v8
Base Position
variables
base-z1
$base-z1: 1 !default;
Author
Basscss@v8, Michael Becker
base-z2
$base-z2: 2 !default;
Author
Basscss@v8, Michael Becker
base-z3
$base-z3: 3 !default;
Author
Basscss@v8, Michael Becker
base-z4
$base-z4: 4 !default;
Author
Basscss@v8, Michael Becker
css
.relative
.relative { ... }
Author
Basscss@v8, Michael Becker
.absolute
.absolute { ... }
Author
Basscss@v8, Michael Becker
.fixed
.fixed { ... }
Author
Basscss@v8, Michael Becker
.sticky
.sticky { ... }
Author
Basscss@v8, Michael Becker
.top-0
.top-0 { ... }
Author
Basscss@v8, Michael Becker
.right-0
.right-0 { ... }
Author
Basscss@v8, Michael Becker
.bottom-0
.bottom-0 { ... }
Author
Basscss@v8, Michael Becker
.left-0
.left-0 { ... }
Author
Basscss@v8, Michael Becker
.inset
.inset { ... }
Author
Basscss@v8, Michael Becker
.z-behind
.z-behind { ... }
Author
Basscss@v8, Michael Becker
.z0
.z0 { ... }
Author
Basscss@v8, Michael Becker
.z1
.z1 { ... }
Author
Basscss@v8, Michael Becker
.z2
.z2 { ... }
Author
Basscss@v8, Michael Becker
.z3
.z3 { ... }
Author
Basscss@v8, Michael Becker
.z4
.z4 { ... }
Author
Basscss@v8, Michael Becker
Base Show
variables
class-show-xs
$class-show-xs: show-xs !default;
Author
Michael becker
class-show-sm
$class-show-sm: show-sm !default;
Author
Michael becker
class-show-md
$class-show-md: show-md !default;
Author
Michael becker
class-show-lg
$class-show-lg: show-lg !default;
Author
Michael becker
class-show-xl
$class-show-xl: show-xl !default;
Author
Michael becker
css
.#{$class-show-xs}
.#{$class-show-xs} { ... }
Description
for bp-xs
Author
Michael becker
.#{$class-show-sm}
.#{$class-show-sm} { ... }
Description
for bp-sm
Author
Michael becker
.#{$class-show-md}
.#{$class-show-md} { ... }
Description
for bp-md
Author
Michael becker
.#{$class-show-lg}
.#{$class-show-lg} { ... }
Description
for bp-lg
Author
Michael becker
.#{$class-show-xl}
.#{$class-show-xl} { ... }
Description
for bp-xl
Author
Michael becker
Backgrounds
variables
bg-colors
$bg-colors: (
'paper': $bg-paper,
'paper-transparent': $bg-paper-transparent,
'body': $bg-body,
'backdrop': $bg-backdrop,
'success': rgba($color-success, 0.2125),
'info': rgba($color-info, 0.2125),
'warning': rgba($color-warning, 0.2125),
'danger': rgba($color-danger, 0.2125),
) !default;
css
.bg-#{$name}
.bg-#{$name} { ... }
Blockquote
variables
blockquote-bg-color
$blockquote-bg-color: $bg-contained !default;
Author
Mustard-UI@v1, Michael Becker
blockquote-border-color
$blockquote-border-color: $color-primary !default;
Author
Mustard-UI@v1, Michael Becker
blockquote-border-width
$blockquote-border-width: $base-border-thick-width !default;
Author
Mustard-UI@v1, Michael Becker
blockquote-selector
$blockquote-selector: "blockquote" !default;
Author
Mustard-UI@v1, Michael Becker
blockquote-author-selector
$blockquote-author-selector: ".blockquote-author" !default;
Author
Mustard-UI@v1, Michael Becker
blockquote-author-font-size
$blockquote-author-font-size: 0.875rem !default;
Author
Mustard-UI@v1, Michael Becker
css
#{$blockquote-selector}
#{$blockquote-selector} { ... }
Author
Mustard-UI@v1, Michael Becker
#{$blockquote-author-selector}
#{$blockquote-author-selector} { ... }
Author
Mustard-UI@v1, Michael Becker
Buttons
mixins
btnBase
@mixin btnBase() { ... }
Description
the styling for the button base element, without states (e.g. no hover
included)
Parameters
None.
Requires
- [function]
elevation
- [variable]
button-padding
- [variable]
button-background-color
- [variable]
button-font-size
- [variable]
button-font-weight
- [variable]
button-letter-spacing
- [variable]
button-text-transform
- [variable]
button-radius
- [variable]
button-border-width
- [variable]
button-line-height
- [variable]
button-shadow
Author
Mustard-UI@v1, Michael Becker
btnStates
@mixin btnStates() { ... }
Description
the styling for focus
/hover
/active
/disabled
pseudo elements
Parameters
None.
Requires
- [function]
elevation
- [variable]
button-shadow
- [variable]
button-interaction-intent
- [variable]
button-interaction-active
- [variable]
button-interaction-disabled-cursor
- [variable]
button-interaction-active
Author
Mustard-UI@v1, Michael Becker
button-group-vertical
@mixin button-group-vertical() { ... }
Parameters
None.
Requires
- [variable]
button-border-radius
- [variable]
button-border-radius
- [variable]
button-border-radius
- [variable]
button-border-radius
Author
Mustard-UI@v1, Michael Becker
css
#{$button-class}-group
#{$button-class}-group { ... }
Author
Michael Becker
:first-child:not(:last-child)
:first-child:not(:last-child) { ... }
Author
Michael Becker
:last-child:not(:first-child)
:last-child:not(:first-child) { ... }
Author
Michael Becker
:not(:first-child):not(:last-child)
:not(:first-child):not(:last-child) { ... }
Author
Michael Becker
&#{$button-class}-group-round
&#{$button-class}-group-round { ... }
Author
Michael Becker
&-vertical
&-vertical { ... }
Author
Michael Becker
#{$button-class}-ic
#{$button-class}-ic { ... }
Author
Michael Becker
#{$button-class}-ic
#{$button-class}-ic { ... }
Author
Michael Becker
&#{$button-class}-lg
&#{$button-class}-lg { ... }
Author
Michael Becker
&#{$button-class}-sm
&#{$button-class}-sm { ... }
Author
Michael Becker
#{$button-selector}
#{$button-selector} { ... }
Author
Mustard-UI@v1, Michael Becker
#{$button-class}-style
#{$button-class}-style { ... }
Author
Mustard-UI@v1, Michael Becker
#{$button-class}-text
#{$button-class}-text { ... }
Author
Mustard-UI@v1, Michael Becker
#{$button-class}-#{$name}
#{$button-class}-#{$name} { ... }
Author
Mustard-UI@v1, Michael Becker
#{$button-class}-#{$name}-o
#{$button-class}-#{$name}-o { ... }
Author
Mustard-UI@v1, Michael Becker
#{$button-class}-#{$name}-text
#{$button-class}-#{$name}-text { ... }
Author
Mustard-UI@v1, Michael Becker
#{$button-class}-round
#{$button-class}-round { ... }
Author
Mustard-UI@v1, Michael Becker
#{$button-class}-lg
#{$button-class}-lg { ... }
Author
Mustard-UI@v1, Michael Becker
#{$button-class}-sm
#{$button-class}-sm { ... }
Author
Mustard-UI@v1, Michael Becker
#{$button-class}-raw
#{$button-class}-raw { ... }
Author
Mustard-UI@v1, Michael Becker
variables
button-border-radius
$button-border-radius: $base-border-radius !default;
Used by
- [mixin]
button-group-vertical
- [mixin]
button-group-vertical
- [mixin]
button-group-vertical
- [mixin]
button-group-vertical
Author
Mustard-UI@v1, Michael Becker
button-radius
use button-border-radius
instead
$button-radius: $button-border-radius !default;
Used by
- [mixin]
btnBase
Author
Mustard-UI@v1, Michael Becker
button-border-width
$button-border-width: $base-border-width !default;
Used by
- [mixin]
btnBase
Author
Mustard-UI@v1, Michael Becker
button-background-color
$button-background-color: none !default;
Used by
- [mixin]
btnBase
Author
Mustard-UI@v1, Michael Becker
button-shadow
$button-shadow: false !default;
Used by
Author
Mustard-UI@v1, Michael Becker
button-text-color
$button-text-color: $color-light !default;
Author
Mustard-UI@v1, Michael Becker
button-text-transform
$button-text-transform: uppercase !default;
Used by
- [mixin]
btnBase
Author
Mustard-UI@v1, Michael Becker
button-colors
$button-colors: (
'primary' : $color-primary,
'secondary' : $color-secondary,
'success' : $color-success,
'info' : $color-info,
'warning' : $color-warning,
'danger' : $color-danger,
) !default;
Author
Mustard-UI@v1, Michael Becker
button-outline-border-style
$button-outline-border-style: solid !default;
Author
Mustard-UI@v1, Michael Becker
button-outline-background-color
$button-outline-background-color: $button-background-color !default;
Author
Mustard-UI@v1, Michael Becker
button-class
$button-class: ".btn" !default;
Author
Mustard-UI@v1, Michael Becker
button-selector
$button-selector: "#{$button-class},.button" !default;
Author
Mustard-UI@v1, Michael Becker
button-padding
$button-padding: space(1) space(2) !default;
Used by
- [mixin]
btnBase
Author
Mustard-UI@v1, Michael Becker
button-font-size
$button-font-size: 0.9rem !default;
Used by
- [mixin]
btnBase
Author
Mustard-UI@v1, Michael Becker
button-font-weight
$button-font-weight: 600 !default;
Used by
- [mixin]
btnBase
Author
Mustard-UI@v1, Michael Becker
button-line-height
$button-line-height: 1.6825em !default;
Used by
- [mixin]
btnBase
Author
Mustard-UI@v1, Michael Becker
button-letter-spacing
$button-letter-spacing: 0.0125em !default;
Used by
- [mixin]
btnBase
Author
Mustard-UI@v1, Michael Becker
button-sm-padding
$button-sm-padding: space('05') space(2) !default;
Author
Mustard-UI@v1, Michael Becker
button-sm-font-size
$button-sm-font-size: 0.875rem !default;
Author
Mustard-UI@v1, Michael Becker
button-sm-letter-spacing
$button-sm-letter-spacing: $button-letter-spacing !default;
Author
Mustard-UI@v1, Michael Becker
button-lg-padding
$button-lg-padding: space(1) space(4) !default;
Author
Mustard-UI@v1, Michael Becker
button-lg-font-size
$button-lg-font-size: 1.125rem !default;
Author
Mustard-UI@v1, Michael Becker
button-round-radius
$button-round-radius: $base-border-radius * 4 !default;
Author
Mustard-UI@v1, Michael Becker
button-interaction-intent
$button-interaction-intent: (
'opacity': 0.85,
'transform': scale(1.025),
) !default;
Description
styles applied to hover
/focus
states
Used by
- [mixin]
btnStates
Author
Mustard-UI@v1, Michael Becker
button-interaction-active
$button-interaction-active: (
'opacity': 1,
'transform': scale(1),
) !default;
Used by
Author
Mustard-UI@v1, Michael Becker
button-interaction-disabled
$button-interaction-disabled: (
'opacity': 0.5,
) !default;
Author
Mustard-UI@v1, Michael Becker
button-interaction-disabled-cursor
$button-interaction-disabled-cursor: not-allowed !default;
Used by
- [mixin]
btnStates
Author
Mustard-UI@v1, Michael Becker
button-icon-size
$button-icon-size: 28px !default;
Author
Mustard-UI@v1, Michael Becker
button-icon-padding
$button-icon-padding: 3px !default;
Author
Mustard-UI@v1, Michael Becker
button-icon-inner-selector
$button-icon-inner-selector: "> svg, > img" !default;
Author
Mustard-UI@v1, Michael Becker
button-icon-sm-size
$button-icon-sm-size: 20px !default;
Author
Mustard-UI@v1, Michael Becker
button-icon-sm-padding
$button-icon-sm-padding: 3px !default;
Author
Mustard-UI@v1, Michael Becker
button-icon-lg-size
$button-icon-lg-size: $button-icon-size !default;
Author
Mustard-UI@v1, Michael Becker
button-icon-lg-padding
$button-icon-lg-padding: 6px !default;
Author
Mustard-UI@v1, Michael Becker
button-group-vertical-bp
$button-group-vertical-bp: (
'md': bp-md-q(),
) !default;
Author
Mustard-UI@v1, Michael Becker
Code / Pre
variables
code-bg-color
$code-bg-color: $bg-contained !default;
Author
Michael Becker
code-border-color
$code-border-color: $color-primary !default;
Author
Michael Becker
code-font-color
$code-font-color: map.get($text-colors, 'strong') !default;
Author
Michael Becker
code-font-size
$code-font-size: 0.9rem !default;
Author
Michael Becker
code-border-width
$code-border-width: $base-border-thick-width !default;
Author
Michael Becker
code-pre-selector
$code-pre-selector: pre !default;
Author
Michael Becker
css
#{$code-pre-selector}
#{$code-pre-selector} { ... }
Author
Michael Becker
code
code { ... }
Author
Michael Becker
#{$code-pre-selector} > code
#{$code-pre-selector} > code { ... }
Author
Michael Becker
Collapse
variables
collapse-transition
$collapse-transition: height 0.3625s ease-out !default;
Author
Michael Becker
css
.collapse
.collapse { ... }
Author
Michael Becker
Component Loading
variables
loading-ring-width
$loading-ring-width: 6px;
Author
https://github.com/loadingio/css-spinner/ license CC-0
loading-size
$loading-size: 48px;
Author
https://github.com/loadingio/css-spinner/ license CC-0
loading-ring-width-dense
$loading-ring-width-dense: 3px;
Author
https://github.com/loadingio/css-spinner/ license CC-0
loading-size-dense
$loading-size-dense: 30px;
Author
https://github.com/loadingio/css-spinner/ license CC-0
loading-color
$loading-color: $color-gray-600;
Author
https://github.com/loadingio/css-spinner/ license CC-0
css
.loading
.loading { ... }
Author
https://github.com/loadingio/css-spinner/ license CC-0
&#{$outlined-class-name}-#{$name}
&#{$outlined-class-name}-#{$name} { ... }
Author
https://github.com/loadingio/css-spinner/ license CC-0
.loading.dense
.loading.dense { ... }
Author
https://github.com/loadingio/css-spinner/ license CC-0
Component Modal
variables
modal-border-radius
$modal-border-radius: 4px !default;
Author
Mustard-UI@v1, Michael Becker
modal-max-height
$modal-max-height: 95vh !default;
Author
Mustard-UI@v1, Michael Becker
modal-shadow
$modal-shadow: true !default;
Author
Mustard-UI@v1, Michael Becker
modal-mask-color
$modal-mask-color: $bg-backdrop !default;
Author
Mustard-UI@v1, Michael Becker
modal-bg-color
$modal-bg-color: $bg-paper !default;
Author
Mustard-UI@v1, Michael Becker
modal-head-padding
$modal-head-padding: space(2) !default;
Author
Mustard-UI@v1, Michael Becker
modal-body-padding
$modal-body-padding: space(4) space(2) !default;
Author
Mustard-UI@v1, Michael Becker
modal-z
$modal-z: 10 !default;
Author
Mustard-UI@v1, Michael Becker
css
.modal-mask
.modal-mask { ... }
Author
Mustard-UI@v1, Michael Becker
.modal
.modal { ... }
Author
Mustard-UI@v1, Michael Becker
.modal-head
.modal-head { ... }
Author
Mustard-UI@v1, Michael Becker
.modal-body
.modal-body { ... }
Author
Mustard-UI@v1, Michael Becker
Component Panel
variables
panel-shadow
$panel-shadow: true !default;
Author
Mustard-UI@v1, Michael Becker
panel-bg-color
$panel-bg-color: $bg-paper !default;
Author
Mustard-UI@v1, Michael Becker
css
.panel
.panel { ... }
Author
Mustard-UI@v1, Michael Becker
.panel-head
.panel-head { ... }
Author
Mustard-UI@v1, Michael Becker
.panel-body
.panel-body { ... }
Author
Mustard-UI@v1, Michael Becker
.panel.dense
.panel.dense { ... }
Author
Mustard-UI@v1, Michael Becker
.panel-head
.panel-head { ... }
Author
Mustard-UI@v1, Michael Becker
.panel-body
.panel-body { ... }
Author
Mustard-UI@v1, Michael Becker
.panel[tabindex]:not([tabindex="-1"]), button.panel, a.panel
.panel[tabindex]:not([tabindex="-1"]),
button.panel,
a.panel { ... }
Author
Mustard-UI@v1, Michael Becker
&:focus
&:focus { ... }
Author
Mustard-UI@v1, Michael Becker
&:hover, &:focus
&:hover,
&:focus { ... }
Author
Mustard-UI@v1, Michael Becker
&:active
&:active { ... }
Author
Mustard-UI@v1, Michael Becker
Component Tooltip
variables
tooltip-border-radius
$tooltip-border-radius: 4px !default;
Author
Mustard-UI@v1, Michael Becker
tooltip-bg-color
$tooltip-bg-color: $color-gray-800 !default;
Author
Mustard-UI@v1, Michael Becker
tooltip-underline-color
$tooltip-underline-color: $color-gray-400 !default;
Author
Mustard-UI@v1, Michael Becker
tooltip-z
$tooltip-z: 9 !default;
Author
Mustard-UI@v1, Michael Becker
css
.tooltip
.tooltip { ... }
Author
Mustard-UI@v1, Michael Becker
.tooltip-text
.tooltip-text { ... }
Author
Mustard-UI@v1, Michael Becker
Container
css
.container-responsive
.container-responsive { ... }
Author
Michael Becker
.container-#{$name}
.container-#{$name} { ... }
Author
Mustard-UI@v1, Michael Becker
.container
.container { ... }
Author
Mustard-UI@v1, Michael Becker
.container-fixed
use container-fullwidth
.container-fixed { ... }
Author
Mustard-UI@v1, Michael Becker
.container-fullwidth
.container-fullwidth { ... }
Author
Mustard-UI@v1, Michael Becker
variables
container-sizes
$container-sizes: (
'sm' : $bp-small,
'md' : $bp-medium,
'lg' : $bp-large,
'xl' : $bp-xlarge,
) !default;
Author
Michael Becker
container-responsive-sizes
$container-responsive-sizes: (
'small' : 90%,
'large' : map.get($container-sizes, 'large'),
) !default;
Author
Michael Becker
Elevation
variables
elevation-steps
$elevation-steps: (
0: none,
1: 0 2px 4px rgba($color-gray-500, 0.5),
2: 0 2px 6px rgba($color-gray-600, 0.6),
3: 0 3px 6px rgba($color-gray-600, 0.7),
4: 0 4px 6px rgba($color-gray-600, 0.7),
'area': 0 4px 12px rgba($color-gray-300, 0.6),
) !default;
Used by
- [function]
elevation
Author
Michael Becker
functions
elevation
@function elevation() { ... }
Parameters
None.
Requires
- [variable]
elevation-steps
Used by
Author
Michael Becker
css
.ev#{$name}
.ev#{$name} { ... }
Description
for each $elevation-steps
Author
Michael Becker
Form
variables
input-selector
$input-selector: 'input[type="file"], input[type="color"], input[type="date"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="range"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="week"], input[type="text"], input[type="password"], select' !default;
Author
Mustard-UI@v1, Michael Becker
input-base-selector
$input-base-selector: 'input, select, fieldset' !default;
Author
Mustard-UI@v1, Michael Becker
input-fieldset-selector
$input-fieldset-selector: 'fieldset' !default;
Author
Mustard-UI@v1, Michael Becker
input-option-selector
$input-option-selector: 'input[type="checkbox"], input[type="radio"]' !default;
Author
Mustard-UI@v1, Michael Becker
label-selector
$label-selector: 'label' !default;
Author
Mustard-UI@v1, Michael Becker
input-range-selector
$input-range-selector: 'input[type="range"]' !default;
Author
Mustard-UI@v1, Michael Becker
input-color-selector
$input-color-selector: 'input[type="color"]' !default;
Author
Mustard-UI@v1, Michael Becker
input-bg-color
$input-bg-color: $bg-paper !default;
Author
Mustard-UI@v1, Michael Becker
input-active-color
$input-active-color: $color-primary !default;
Author
Mustard-UI@v1, Michael Becker
input-invalid-color
$input-invalid-color: $color-red-600 !default;
Author
Mustard-UI@v1, Michael Becker
input-error-text-color
$input-error-text-color: $color-danger-dark !default;
Author
Mustard-UI@v1, Michael Becker
input-placeholder-color
$input-placeholder-color: $color-gray-500 !default;
Author
Mustard-UI@v1, Michael Becker
input-border-color
$input-border-color: $base-border-color !default;
Author
Mustard-UI@v1, Michael Becker
input-border-width
$input-border-width: $base-border-width !default;
Author
Mustard-UI@v1, Michael Becker
input-border-radius
$input-border-radius: $base-border-radius !default;
Author
Mustard-UI@v1, Michael Becker
input-label-font-weight
$input-label-font-weight: 400 !default;
Author
Mustard-UI@v1, Michael Becker
select-selector
$select-selector: 'select' !default;
Author
Mustard-UI@v1, Michael Becker
textarea-selector
$textarea-selector: 'textarea' !default;
Author
Mustard-UI@v1, Michael Becker
css
.form-control
.form-control { ... }
Author
Mustard-UI@v1, Michael Becker
.form-control-group
.form-control-group { ... }
Author
Mustard-UI@v1, Michael Becker
.form-control-group .form-control
.form-control-group .form-control { ... }
Author
Mustard-UI@v1, Michael Becker
.form-control-group .form-control:last-of-type
.form-control-group .form-control:last-of-type { ... }
Author
Mustard-UI@v1, Michael Becker
#{$select-selector}
#{$select-selector} { ... }
Author
Mustard-UI@v1, Michael Becker
#{$select-selector}.dense
#{$select-selector}.dense { ... }
Author
Mustard-UI@v1, Michael Becker
#{$textarea-selector}
#{$textarea-selector} { ... }
Author
Mustard-UI@v1, Michael Becker
.validation-error
.validation-error { ... }
Author
Mustard-UI@v1, Michael Becker
#{$label-selector}
#{$label-selector} { ... }
Author
Mustard-UI@v1, Michael Becker
#{$input-selector}
#{$input-selector} { ... }
Author
Mustard-UI@v1, Michael Becker
#{$input-base-selector}
#{$input-base-selector} { ... }
Author
Mustard-UI@v1, Michael Becker
#{$input-fieldset-selector}
#{$input-fieldset-selector} { ... }
Author
Mustard-UI@v1, Michael Becker
#{$input-option-selector}
#{$input-option-selector} { ... }
Author
Mustard-UI@v1, Michael Becker
#{$input-range-selector}
#{$input-range-selector} { ... }
Author
Mustard-UI@v1, Michael Becker
#{$input-color-selector}
#{$input-color-selector} { ... }
Author
Mustard-UI@v1, Michael Becker
Global Style
css
html
html { ... }
Author
Michael Becker
*, *::after, *::before
*, *::after, *::before { ... }
Author
Michael Becker
body, html
body, html { ... }
Author
Michael Becker
body
body { ... }
Author
Michael Becker
Grid
mixins
clearfix
@mixin clearfix() { ... }
Description
Gives float parents its size
Parameters
None.
Example
Include this mixin on a container if all children are floated, gives the container a proper size.
Output
:before and :after tricks with display: table on before and after and clear: both only on :after
Author
Michael Becker
col
@mixin col($number, $col-qty: $col-qty) { ... }
Description
Generates size for a column
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$number | id of the column you want | Int | — none |
$col-qty | max. columns used | Int | $col-qty |
Requires
- [function]
col
- [variable]
col-property
- [variable]
col-qty
Author
Michael Becker
col-sm
@mixin col-sm($number, $col-qty: $col-qty) { ... }
Description
Generates a column for breakpoint size sm and bigger
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$number | id of the column you want | Int | — none |
$col-qty | max. columns used | Int | $col-qty |
Requires
- [variable]
col-qty
Author
Michael Becker
col-md
@mixin col-md($number, $col-qty: $col-qty) { ... }
Description
Generates a column for breakpoint size md
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$number | id of the column you want | Int | — none |
$col-qty | max. columns used | Int | $col-qty |
Requires
- [variable]
col-qty
Author
Michael Becker
col-lg
@mixin col-lg($number, $col-qty: $col-qty) { ... }
Description
Generates a column for breakpoint size lg
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$number | id of the column you want | Int | — none |
$col-qty | max. columns used | Int | $col-qty |
Requires
- [variable]
col-qty
Author
Michael Becker
col-xl
@mixin col-xl($number, $col-qty: $col-qty) { ... }
Description
Generates a column for breakpoint size xlarge
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$number | id of the column you want | Int | — none |
$col-qty | max. columns used | Int | $col-qty |
Requires
- [variable]
col-qty
Author
Michael Becker
functions
col
@function col($number, $col-qty: $col-qty) { ... }
Description
Easy column size calculator for whatever size the grid wanted is based on
Parameters
parameter Name | parameter Description | parameter Type | parameter Default value |
---|---|---|---|
$number | id of the column calculated | Int | — none |
$col-qty | max. columns used, overwrites the standard column qty grid | Int | $col-qty |
Example
"1,5" (1 out of 5) gives the size (20)[%] for a column in a 5er grid system, even the default grid system doesn't allow the use of 5 cols per row, this would be a 4.8 column "4.8 out of 24" with default $col-qty: 24
"1" (1 out of default) gives the size (4,166)[%] for a column in a 24er grid system with default $col-qty: 24
Requires
- [variable]
col-qty
Used by
- [mixin]
col
Author
Michael Becker
variables
col-property
$col-property: 'width';
Type
String [width
or Min-width
or Flex-basis]
Used by
- [mixin]
col
Author
Michael Becker
class-offset-sm
$class-offset-sm: offset-sm !default;
Author
Michael Becker
class-offset-md
$class-offset-md: offset-md !default;
Author
Michael Becker
class-offset-lg
$class-offset-lg: offset-lg !default;
Author
Michael Becker
class-offset-xl
$class-offset-xl: offset-xl !default;
Author
Michael Becker
class-col-sm
$class-col-sm: col-sm !default;
Author
Michael Becker
class-col-md
$class-col-md: col-md !default;
Author
Michael Becker
class-col-lg
$class-col-lg: col-lg !default;
Author
Michael Becker
class-col-xl
$class-col-xl: col-xl !default;
Author
Michael Becker
css
.offset-#{$i}
.offset-#{$i} { ... }
Description
offset for cols
Author
Michael Becker
.#{$class-offset-sm}-#{$i}
.#{$class-offset-sm}-#{$i} { ... }
Description
offset for col for breakpoint sm
Author
Michael Becker
.#{$class-offset-md}-#{$i}
.#{$class-offset-md}-#{$i} { ... }
Description
offset for col for breakpoint md
Author
Michael Becker
.#{$class-offset-lg}-#{$i}
.#{$class-offset-lg}-#{$i} { ... }
Description
offset for col for breakpoint lg
Author
Michael Becker
.#{$class-offset-xl}-#{$i}
.#{$class-offset-xl}-#{$i} { ... }
Description
offset for col for breakpoint xl
Author
Michael Becker
.col-#{$i}
.col-#{$i} { ... }
Description
columns
Author
Michael Becker
.#{$class-col-sm}-#{$i}
.#{$class-col-sm}-#{$i} { ... }
Description
col for breakpoint sm
Author
Michael Becker
.#{$class-col-md}-#{$i}
.#{$class-col-md}-#{$i} { ... }
Description
col for breakpoint md
Author
Michael Becker
.#{$class-col-lg}-#{$i}
.#{$class-col-lg}-#{$i} { ... }
Description
col for breakpoint lg
Author
Michael Becker
.#{$class-col-xl}-#{$i}
.#{$class-col-xl}-#{$i} { ... }
Description
col for breakpoint xlarge
Author
Michael Becker
.grid-s05
.grid-s05 { ... }
Description
nested grid wrapper, for spacing 0.5
Author
Michael Becker
.grid-s05 > [class^="col"]
.grid-s05 > [class^="col"] { ... }
Description
all .col-*
classes as direct child get the padding inherited
Author
Michael Becker
.grid-s1
.grid-s1 { ... }
Description
nested grid wrapper, for spacing 1
Author
Michael Becker
.grid-s1 > [class^="col"]
.grid-s1 > [class^="col"] { ... }
Description
all .col-*
classes as direct child get the padding inherited
Author
Michael Becker
.grid-s2
.grid-s2 { ... }
Description
nested grid wrapper, for spacing 2
Author
Michael Becker
.grid-s2 > [class^="col"]
.grid-s2 > [class^="col"] { ... }
Description
all .col-*
classes as direct child get the padding inherited
Author
Michael Becker
.grid-s3
.grid-s3 { ... }
Description
nested grid wrapper, for spacing 3
Author
Michael Becker
.grid-s3 > [class^="col"]
.grid-s3 > [class^="col"] { ... }
Description
all .col-*
classes as direct child get the padding inherited
Author
Michael Becker
Grid Breakpoints (bp)
functions
bp-sm-q
@function bp-sm-q() { ... }
Parameters
None.
Requires
- [variable]
bp-small
Used by
- [mixin]
bp-sm
Author
Michael Becker
bp-md-q
@function bp-md-q() { ... }
Parameters
None.
Requires
- [variable]
bp-medium
Used by
- [mixin]
bp-md
Author
Michael Becker
bp-lg-q
@function bp-lg-q() { ... }
Parameters
None.
Requires
- [variable]
bp-large
Used by
- [mixin]
bp-lg
Author
Michael Becker
bp-xl-q
@function bp-xl-q() { ... }
Parameters
None.
Requires
- [variable]
bp-xlarge
Used by
- [mixin]
bp-xl
Author
Michael Becker
mixins
bp-xs
@mixin bp-xs() { ... }
Description
Breakpoint mixin for sm-eXtra got no or -down version, as would be all and -down would be like normal xs, as it is the smallest size
Parameters
None.
Content
This mixin allows extra content to be passed (through the @content
directive). Role: will only be displayed when screen smaller or same then $bp-xs
Requires
- [variable]
bp-xsmall
Author
Michael Becker
bp-sm
@mixin bp-sm() { ... }
Description
Breakpoint mixin for sm and bigger
Parameters
None.
Content
This mixin allows extra content to be passed (through the @content
directive). Role: will only be displayed when screen bigger then $bp-small
Requires
- [function]
bp-sm-q
Author
Michael Becker
bp-sm-only
@mixin bp-sm-only() { ... }
Description
Breakpoint mixin for only sm
Parameters
None.
Content
This mixin allows extra content to be passed (through the @content
directive). Role: will only be displayed when screen bigger then $bp-small and smaller then $bp-medium
Requires
Author
Michael Becker
bp-md
@mixin bp-md() { ... }
Description
Breakpoint mixin for md and bigger
Parameters
None.
Content
This mixin allows extra content to be passed (through the @content
directive). Role: will only be displayed when screen bigger then $bp-small
Requires
- [function]
bp-md-q
Author
Michael Becker
bp-md-only
@mixin bp-md-only() { ... }
Description
Breakpoint mixin for only md
Parameters
None.
Content
This mixin allows extra content to be passed (through the @content
directive). Role: will only be displayed when screen bigger then $bp-small and smaller then $bp-medium
Requires
Author
Michael Becker
bp-lg
@mixin bp-lg() { ... }
Description
Breakpoint mixin for lg and bigger
Parameters
None.
Content
This mixin allows extra content to be passed (through the @content
directive). Role: will only be displayed when screen bigger then $bp-large
Requires
- [function]
bp-lg-q
Author
Michael Becker
bp-lg-only
@mixin bp-lg-only() { ... }
Description
Breakpoint mixin for only lg
Parameters
None.
Content
This mixin allows extra content to be passed (through the @content
directive). Role: will only be displayed when screen bigger then $bp-large and smaller then $bp-xlarge
Requires
Author
Michael Becker
bp-xl
@mixin bp-xl() { ... }
Description
Breakpoint mixin for lg-eXtra This screen size got no or -down version, as -down would be all and would be like normal xlarge, as it is the highest size
Parameters
None.
Content
This mixin allows extra content to be passed (through the @content
directive). Role: will only be displayed when screen bigger then $bp-xlarge
Requires
- [function]
bp-xl-q
Author
Michael Becker
Outlined
variables
outlined-border-radius
$outlined-border-radius: $base-border-radius !default;
Author
Michael Becker
outlined-border-width
$outlined-border-width: $base-border-width !default;
Author
Michael Becker
outlined-border-color
$outlined-border-color: $base-border-color !default;
Author
Michael Becker
outlined-rect-border-radius
$outlined-rect-border-radius: 0 !default;
Author
Michael Becker
outlined-round-border-radius
$outlined-round-border-radius: $base-border-radius * 3 !default;
Author
Michael Becker
outlined-thick-border-width
$outlined-thick-border-width: $base-border-thick-width !default;
Author
Michael Becker
outlined-class-name
$outlined-class-name: '.o' !default;
Author
Michael Becker
outlined-colors
$outlined-colors: (
'primary': $color-primary,
'secondary': $color-secondary,
'success': $color-success,
'danger': $color-danger,
'divider': $color-divider,
) !default;
Author
Michael Becker
css
#{$outlined-class-name}
#{$outlined-class-name} { ... }
Author
Michael Becker
&-#{$name}
&-#{$name} { ... }
Author
Michael Becker
&#{$outlined-class-name}-thick
&#{$outlined-class-name}-thick { ... }
Author
Michael Becker
#{$outlined-class-name}-rect
#{$outlined-class-name}-rect { ... }
Author
Michael Becker
#{$outlined-class-name}-round
#{$outlined-class-name}-round { ... }
Author
Michael Becker
#{$outlined-class-name}t
#{$outlined-class-name}t { ... }
Author
Michael Becker
&#{$outlined-class-name}-thick
&#{$outlined-class-name}-thick { ... }
Author
Michael Becker
#{$outlined-class-name}r
#{$outlined-class-name}r { ... }
Author
Michael Becker
&#{$outlined-class-name}-thick
&#{$outlined-class-name}-thick { ... }
Author
Michael Becker
#{$outlined-class-name}b
#{$outlined-class-name}b { ... }
Author
Michael Becker
&#{$outlined-class-name}-thick
&#{$outlined-class-name}-thick { ... }
Author
Michael Becker
#{$outlined-class-name}l
#{$outlined-class-name}l { ... }
Author
Michael Becker
&#{$outlined-class-name}-thick
&#{$outlined-class-name}-thick { ... }
Author
Michael Becker
Spacing
variables
spacing
$spacing: 5px !default;
Description
Spacing default
Type
Size
Used by
- [function]
space
Author
Michael Becker
spacings-def
$spacings-def: (0: 0, '05': 0.5, 1: 1, 2: 2, 3: 3, 4: 4, 5: 5) !default;
Description
Spacing definitions
Type
Map
Used by
- [function]
space
- [mixin]
spacingMaker
- [mixin]
spacingMakerX
- [mixin]
spacingMakerY
Author
Michael Becker
functions
space
@function space() { ... }
Parameters
None.
Requires
- [variable]
spacing
- [variable]
spacings-def
Used by
- [mixin]
spacingMaker
- [mixin]
spacingMaker
- [mixin]
spacingMakerX
- [mixin]
spacingMakerX
- [mixin]
spacingMakerX
- [mixin]
spacingMakerX
- [mixin]
spacingMakerY
- [mixin]
spacingMakerY
- [mixin]
spacingMakerY
- [mixin]
spacingMakerY
Author
Michael Becker
mixins
spacingMaker
@mixin spacingMaker() { ... }
Parameters
None.
Requires
- [function]
space
- [function]
space
- [variable]
spacings-def
Used by
- [mixin]
spacing-sm
- [mixin]
spacing-sm
- [mixin]
spacing-sm
- [mixin]
spacing-sm
- [mixin]
spacing-sm
- [mixin]
spacing-sm
- [mixin]
spacing-sm
- [mixin]
spacing-sm
- [mixin]
spacing-sm
- [mixin]
spacing-sm
- [mixin]
spacing-sm
- [mixin]
spacing-sm
- [mixin]
spacing-sm
- [mixin]
spacing-sm
- [mixin]
spacing-sm
- [mixin]
spacing-md
- [mixin]
spacing-md
- [mixin]
spacing-md
- [mixin]
spacing-md
- [mixin]
spacing-md
- [mixin]
spacing-md
- [mixin]
spacing-md
- [mixin]
spacing-md
- [mixin]
spacing-md
- [mixin]
spacing-md
- [mixin]
spacing-md
- [mixin]
spacing-md
- [mixin]
spacing-md
- [mixin]
spacing-md
- [mixin]
spacing-md
- [mixin]
spacing-lg
- [mixin]
spacing-lg
- [mixin]
spacing-lg
- [mixin]
spacing-lg
- [mixin]
spacing-lg
- [mixin]
spacing-lg
- [mixin]
spacing-lg
- [mixin]
spacing-lg
- [mixin]
spacing-lg
- [mixin]
spacing-lg
- [mixin]
spacing-lg
- [mixin]
spacing-lg
- [mixin]
spacing-lg
- [mixin]
spacing-lg
- [mixin]
spacing-lg
- [mixin]
spacing-xl
- [mixin]
spacing-xl
- [mixin]
spacing-xl
- [mixin]
spacing-xl
- [mixin]
spacing-xl
- [mixin]
spacing-xl
- [mixin]
spacing-xl
- [mixin]
spacing-xl
- [mixin]
spacing-xl
- [mixin]
spacing-xl
- [mixin]
spacing-xl
- [mixin]
spacing-xl
- [mixin]
spacing-xl
- [mixin]
spacing-xl
- [mixin]
spacing-xl
Author
Michael Becker
spacingMakerX
@mixin spacingMakerX() { ... }
Parameters
None.
Requires
- [function]
space
- [function]
space
- [function]
space
- [function]
space
- [variable]
spacings-def
Used by
- [mixin]
spacing-sm
- [mixin]
spacing-sm
- [mixin]
spacing-sm
- [mixin]
spacing-md
- [mixin]
spacing-md
- [mixin]
spacing-md
- [mixin]
spacing-lg
- [mixin]
spacing-lg
- [mixin]
spacing-lg
- [mixin]
spacing-xl
- [mixin]
spacing-xl
- [mixin]
spacing-xl
Author
Michael Becker
spacingMakerY
@mixin spacingMakerY() { ... }
Parameters
None.
Requires
- [function]
space
- [function]
space
- [function]
space
- [function]
space
- [variable]
spacings-def
Used by
- [mixin]
spacing-sm
- [mixin]
spacing-sm
- [mixin]
spacing-sm
- [mixin]
spacing-md
- [mixin]
spacing-md
- [mixin]
spacing-md
- [mixin]
spacing-lg
- [mixin]
spacing-lg
- [mixin]
spacing-lg
- [mixin]
spacing-xl
- [mixin]
spacing-xl
- [mixin]
spacing-xl
Author
Michael Becker
spacingMakerA
@mixin spacingMakerA() { ... }
Parameters
None.
Author
Michael Becker
spacing-sm
@mixin spacing-sm() { ... }
Description
Responsive Spacings for breakpoint sm; margin and paddings, with numerics like configured for $spacings-def
Parameters
None.
Example
// margins:
`.m0-sm`, `m05-sm`, `m1-sm` etc. for all-spacings
`.mx0-sm` for horizontal spacings
`.my0-sm` for vertical spacings
`.mt0-sm` for top spacings
`.mr0-sm` for right spacings
`.mb0-sm` for bottom spacings
`.ml0-sm` for left spacings
// margins negative:
`.mn0-sm`, `mn05-sm`, `mn1-sm` etc. for all-spacings
`.mxn0-sm` for horizontal spacings
`.myn0-sm` for vertical spacings
`.mtn0-sm` for top spacings
`.mrn0-sm` for right spacings
`.mbn0-sm` for bottom spacings
`.mln0-sm` for left spacings
// padding:
`.p0-sm`, `m05-sm`, `m1-sm` etc. for all-spacings
`.px0-sm` for horizontal spacings
`.py0-sm` for vertical spacings
`.pt0-sm` for top spacings
`.pr0-sm` for right spacings
`.pb0-sm` for bottom spacings
`.pl0-sm` for left spacings
Requires
- [mixin]
spacingMaker
- [mixin]
spacingMakerX
- [mixin]
spacingMakerY
- [mixin]
spacingMaker
- [mixin]
spacingMaker
- [mixin]
spacingMaker
- [mixin]
spacingMaker
- [mixin]
spacingMaker
- [mixin]
spacingMakerX
- [mixin]
spacingMakerY
- [mixin]
spacingMaker
- [mixin]
spacingMaker
- [mixin]
spacingMaker
- [mixin]
spacingMaker
- [mixin]
spacingMaker
- [mixin]
spacingMakerX
- [mixin]
spacingMakerY
- [mixin]
spacingMaker
- [mixin]
spacingMaker
- [mixin]
spacingMaker
- [mixin]
spacingMaker
Author
Michael Becker
spacing-md
@mixin spacing-md() { ... }
Description
Responsive Spacings for breakpoint md; margin and paddings, with numerics like configured for $spacings-def
Parameters
None.
Example
// margins:
`.m0-md`, `m05-md`, `m1-md` etc. for all-spacings
`.mx0-md` for horizontal spacings
`.my0-md` for vertical spacings
`.mt0-md` for top spacings
`.mr0-md` for right spacings
`.mb0-md` for bottom spacings
`.ml0-md` for left spacings
// margins negative:
`.mn0-md`, `mn05-md`, `mn1-md` etc. for all-spacings
`.mxn0-md` for horizontal spacings
`.myn0-md` for vertical spacings
`.mtn0-md` for top spacings
`.mrn0-md` for right spacings
`.mbn0-md` for bottom spacings
`.mln0-md` for left spacings
// padding:
`.p0-md`, `m05-md`, `m1-md` etc. for all-spacings
`.px0-md` for horizontal spacings
`.py0-md` for vertical spacings
`.pt0-md` for top spacings
`.pr0-md` for right spacings
`.pb0-md` for bottom spacings
`.pl0-md` for left spacings
Requires
- [mixin]
spacingMaker
- [mixin]
spacingMakerX
- [mixin]
spacingMakerY
- [mixin]
spacingMaker
- [mixin]
spacingMaker
- [mixin]
spacingMaker
- [mixin]
spacingMaker
- [mixin]
spacingMaker
- [mixin]
spacingMakerX
- [mixin]
spacingMakerY
- [mixin]
spacingMaker
- [mixin]
spacingMaker
- [mixin]
spacingMaker
- [mixin]
spacingMaker
- [mixin]
spacingMaker
- [mixin]
spacingMakerX
- [mixin]
spacingMakerY
- [mixin]
spacingMaker
- [mixin]
spacingMaker
- [mixin]
spacingMaker
- [mixin]
spacingMaker
Author
Michael Becker
spacing-lg
@mixin spacing-lg() { ... }
Description
Responsive Spacings for breakpoint lg; margin and paddings, with numerics like configured for $spacings-def
Parameters
None.
Example
// margins:
`.m0-lg`, `m05-lg`, `m1-lg` etc. for all-spacings
`.mx0-lg` for horizontal spacings
`.my0-lg` for vertical spacings
`.mt0-lg` for top spacings
`.mr0-lg` for right spacings
`.mb0-lg` for bottom spacings
`.ml0-lg` for left spacings
// margins negative:
`.mn0-lg`, `mn05-lg`, `mn1-lg` etc. for all-spacings
`.mxn0-lg` for horizontal spacings
`.myn0-lg` for vertical spacings
`.mtn0-lg` for top spacings
`.mrn0-lg` for right spacings
`.mbn0-lg` for bottom spacings
`.mln0-lg` for left spacings
// padding:
`.p0-lg`, `m05-lg`, `m1-lg` etc. for all-spacings
`.px0-lg` for horizontal spacings
`.py0-lg` for vertical spacings
`.pt0-lg` for top spacings
`.pr0-lg` for right spacings
`.pb0-lg` for bottom spacings
`.pl0-lg` for left spacings
Requires
- [mixin]
spacingMaker
- [mixin]
spacingMakerX
- [mixin]
spacingMakerY
- [mixin]
spacingMaker
- [mixin]
spacingMaker
- [mixin]
spacingMaker
- [mixin]
spacingMaker
- [mixin]
spacingMaker
- [mixin]
spacingMakerX
- [mixin]
spacingMakerY
- [mixin]
spacingMaker
- [mixin]
spacingMaker
- [mixin]
spacingMaker
- [mixin]
spacingMaker
- [mixin]
spacingMaker
- [mixin]
spacingMakerX
- [mixin]
spacingMakerY
- [mixin]
spacingMaker
- [mixin]
spacingMaker
- [mixin]
spacingMaker
- [mixin]
spacingMaker
Author
Michael Becker
spacing-xl
@mixin spacing-xl() { ... }
Description
Responsive Spacings for breakpoint xl; margin and paddings, with numerics like configured for $spacings-def
Parameters
None.
Example
// margins:
`.m0-xl`, `m05-xl`, `m1-xl` etc. for all-spacings
`.mx0-xl` for horizontal spacings
`.my0-xl` for vertical spacings
`.mt0-xl` for top spacings
`.mr0-xl` for right spacings
`.mb0-xl` for bottom spacings
`.ml0-xl` for left spacings
// margins negative:
`.mn0-xl`, `mn05-xl`, `mn1-xl` etc. for all-spacings
`.mxn0-xl` for horizontal spacings
`.myn0-xl` for vertical spacings
`.mtn0-xl` for top spacings
`.mrn0-xl` for right spacings
`.mbn0-xl` for bottom spacings
`.mln0-xl` for left spacings
// padding:
`.p0-xl`, `m05-xl`, `m1-xl` etc. for all-spacings
`.px0-xl` for horizontal spacings
`.py0-xl` for vertical spacings
`.pt0-xl` for top spacings
`.pr0-xl` for right spacings
`.pb0-xl` for bottom spacings
`.pl0-xl` for left spacings
Requires
- [mixin]
spacingMaker
- [mixin]
spacingMakerX
- [mixin]
spacingMakerY
- [mixin]
spacingMaker
- [mixin]
spacingMaker
- [mixin]
spacingMaker
- [mixin]
spacingMaker
- [mixin]
spacingMaker
- [mixin]
spacingMakerX
- [mixin]
spacingMakerY
- [mixin]
spacingMaker
- [mixin]
spacingMaker
- [mixin]
spacingMaker
- [mixin]
spacingMaker
- [mixin]
spacingMaker
- [mixin]
spacingMakerX
- [mixin]
spacingMakerY
- [mixin]
spacingMaker
- [mixin]
spacingMaker
- [mixin]
spacingMaker
- [mixin]
spacingMaker
Author
Michael Becker
css
// ///// //.ma
//
/////
//.ma { ... }
Description
.mxn1 .myn1 .mt0 .mr0 .mb0 .ml0
Example
// for all configured spacing steps, like in first line for all:
.m0, m05, .m1, .m2, .m3
.mx0
.my0
.mt0
.mr0
.mb0
.ml0
Author
Michael Becker
Table
variables
table-border-color
$table-border-color: $color-divider !default;
Author
Mustard-UI@v1, Michael Becker
table-bg-cell
$table-bg-cell: $bg-contained !default;
Author
Mustard-UI@v1, Michael Becker
css
table
table { ... }
Author
Mustard-UI@v1, Michael Becker
table.fullwidth
table.fullwidth { ... }
Author
Mustard-UI@v1, Michael Becker
table.striped
table.striped { ... }
Author
Mustard-UI@v1, Michael Becker
tabs
css
.tabs-toggle-group
.tabs-toggle-group { ... }
Author
Michael Becker
:first-child
:first-child { ... }
Author
Michael Becker
:last-child
:last-child { ... }
Author
Michael Becker
.toggle-active
.toggle-active { ... }
Author
Michael Becker
Typography
mixins
title1
@mixin title1() { ... }
Parameters
None.
Requires
- [variable]
title1-font-size
- [variable]
title1-line-height
Author
Mustard-UI@v1, Michael Becker
title2
@mixin title2() { ... }
Parameters
None.
Requires
- [variable]
title2-font-size
- [variable]
title2-line-height
Author
Mustard-UI@v1, Michael Becker
title3
@mixin title3() { ... }
Parameters
None.
Requires
- [variable]
title3-font-size
- [variable]
title3-line-height
Author
Mustard-UI@v1, Michael Becker
title4
@mixin title4() { ... }
Parameters
None.
Requires
- [variable]
title4-font-size
- [variable]
title4-line-height
Author
Mustard-UI@v1, Michael Becker
title5
@mixin title5() { ... }
Parameters
None.
Requires
- [variable]
title5-font-size
- [variable]
title5-line-height
Author
Mustard-UI@v1, Michael Becker
title6
@mixin title6() { ... }
Parameters
None.
Requires
- [variable]
title6-font-size
- [variable]
title6-line-height
Author
Mustard-UI@v1, Michael Becker
subtitle1
@mixin subtitle1() { ... }
Parameters
None.
Requires
- [variable]
subtitle1-font-size
- [variable]
subtitle1-line-height
Author
Mustard-UI@v1, Michael Becker
subtitle2
@mixin subtitle2() { ... }
Parameters
None.
Requires
- [variable]
subtitle2-font-size
- [variable]
subtitle2-line-height
Author
Mustard-UI@v1, Michael Becker
body1
@mixin body1() { ... }
Parameters
None.
Requires
- [variable]
font-family
- [variable]
line-height
- [variable]
font-weight
- [variable]
font-color
- [variable]
body1-margin
Used by
- [mixin]
body2
Author
Mustard-UI@v1, Michael Becker
body2
@mixin body2() { ... }
Parameters
None.
Requires
- [mixin]
body1
- [variable]
body2-factor
- [variable]
body2-margin
Author
Mustard-UI@v1, Michael Becker
css
.font-family-inherit
.font-family-inherit { ... }
Author
Basscss@v8, Mustard-UI@v1, Michael Becker
.font-family-mono
.font-family-mono { ... }
Author
Basscss@v8, Mustard-UI@v1, Michael Becker
.font-size-inherit
.font-size-inherit { ... }
Author
Basscss@v8, Mustard-UI@v1, Michael Becker
.text-decoration-none
.text-decoration-none { ... }
Author
Basscss@v8, Mustard-UI@v1, Michael Becker
.light
.light { ... }
Author
Basscss@v8, Mustard-UI@v1, Michael Becker
.bold
.bold { ... }
Author
Basscss@v8, Mustard-UI@v1, Michael Becker
.regular
.regular { ... }
Author
Basscss@v8, Mustard-UI@v1, Michael Becker
.normal
.normal { ... }
Author
Basscss@v8, Mustard-UI@v1, Michael Becker
.italic
.italic { ... }
Author
Basscss@v8, Mustard-UI@v1, Michael Becker
.caps
.caps { ... }
Author
Basscss@v8, Mustard-UI@v1, Michael Becker
.left-align
.left-align { ... }
Author
Basscss@v8, Mustard-UI@v1, Michael Becker
.center
.center { ... }
Author
Basscss@v8, Mustard-UI@v1, Michael Becker
.right-align
.right-align { ... }
Author
Basscss@v8, Mustard-UI@v1, Michael Becker
.justify
.justify { ... }
Author
Basscss@v8, Mustard-UI@v1, Michael Becker
.nowrap
.nowrap { ... }
Author
Basscss@v8, Mustard-UI@v1, Michael Becker
.break-word
.break-word { ... }
Author
Basscss@v8, Mustard-UI@v1, Michael Becker
.line-height-1
.line-height-1 { ... }
Author
Basscss@v8, Mustard-UI@v1, Michael Becker
.line-height-2
.line-height-2 { ... }
Author
Basscss@v8, Mustard-UI@v1, Michael Becker
.line-height-3
.line-height-3 { ... }
Author
Basscss@v8, Mustard-UI@v1, Michael Becker
.line-height-4
.line-height-4 { ... }
Author
Basscss@v8, Mustard-UI@v1, Michael Becker
.list-style-none
.list-style-none { ... }
Author
Basscss@v8, Mustard-UI@v1, Michael Becker
.underline
.underline { ... }
Author
Basscss@v8, Mustard-UI@v1, Michael Becker
.truncate
.truncate { ... }
Author
Basscss@v8, Mustard-UI@v1, Michael Becker
.list-reset
.list-reset { ... }
Author
Basscss@v8, Mustard-UI@v1, Michael Becker
.color-inherit
.color-inherit { ... }
Author
Basscss@v8, Mustard-UI@v1, Michael Becker
.color-#{$name}
.color-#{$name} { ... }
Author
Basscss@v8, Mustard-UI@v1, Michael Becker
.body1
.body1 { ... }
Author
Basscss@v8, Mustard-UI@v1, Michael Becker
.body2
.body2 { ... }
Author
Basscss@v8, Mustard-UI@v1, Michael Becker
#{$titles-selectors}
#{$titles-selectors} { ... }
Author
Basscss@v8, Mustard-UI@v1, Michael Becker
#{$title1-selector}
#{$title1-selector} { ... }
Author
Basscss@v8, Mustard-UI@v1, Michael Becker
#{$title2-selector}
#{$title2-selector} { ... }
Author
Basscss@v8, Mustard-UI@v1, Michael Becker
#{$title3-selector}
#{$title3-selector} { ... }
Author
Basscss@v8, Mustard-UI@v1, Michael Becker
#{$title4-selector}
#{$title4-selector} { ... }
Author
Basscss@v8, Mustard-UI@v1, Michael Becker
#{$title5-selector}
#{$title5-selector} { ... }
Author
Basscss@v8, Mustard-UI@v1, Michael Becker
#{$title6-selector}
#{$title6-selector} { ... }
Author
Basscss@v8, Mustard-UI@v1, Michael Becker
#{$subtitles-selectors}
#{$subtitles-selectors} { ... }
Author
Basscss@v8, Mustard-UI@v1, Michael Becker
#{$subtitle1-selector}
#{$subtitle1-selector} { ... }
Author
Basscss@v8, Mustard-UI@v1, Michael Becker
#{$subtitle2-selector}
#{$subtitle2-selector} { ... }
Author
Basscss@v8, Mustard-UI@v1, Michael Becker
variables
line-height
$line-height: 1.6 !default;
Used by
- [mixin]
body1
Author
Mustard-UI@v1, Michael Becker
line-height-1
$line-height-1: $line-height !default;
Author
Mustard-UI@v1, Michael Becker
line-height-2
$line-height-2: 1.85 !default;
Author
Mustard-UI@v1, Michael Becker
line-height-3
$line-height-3: 2.05 !default;
Author
Mustard-UI@v1, Michael Becker
line-height-4
$line-height-4: 2.25 !default;
Author
Mustard-UI@v1, Michael Becker
font-weight-light
$font-weight-light: 300 !default;
Author
Mustard-UI@v1, Michael Becker
font-weight
$font-weight: 400 !default;
Used by
- [mixin]
body1
Author
Mustard-UI@v1, Michael Becker
font-weight-bold
$font-weight-bold: 600 !default;
Author
Mustard-UI@v1, Michael Becker
font-color
$font-color: $color-gray-800 !default;
Used by
- [mixin]
body1
Author
Mustard-UI@v1, Michael Becker
caps-letter-spacing
$caps-letter-spacing: 0.05em;
Author
Mustard-UI@v1, Michael Becker
font-family
$font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif !default;
Used by
- [mixin]
body1
Author
Mustard-UI@v1, Michael Becker
font-family-mono
$font-family-mono: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace !default;
Author
Mustard-UI@v1, Michael Becker
title-font-color
$title-font-color: $color-indigo-900 !default;
Author
Mustard-UI@v1, Michael Becker
title-font-weight
$title-font-weight: $font-weight !default;
Author
Mustard-UI@v1, Michael Becker
title-margin
$title-margin: 0 0 0.3em 0 !default;
Author
Mustard-UI@v1, Michael Becker
title-font-family
$title-font-family: $font-family-serif !default;
Author
Mustard-UI@v1, Michael Becker
title1-font-size
$title1-font-size: 3em !default;
Used by
- [mixin]
title1
Author
Mustard-UI@v1, Michael Becker
title1-line-height
$title1-line-height: 1.25em !default;
Used by
- [mixin]
title1
Author
Mustard-UI@v1, Michael Becker
title2-font-size
$title2-font-size: 2.5em !default;
Used by
- [mixin]
title2
Author
Mustard-UI@v1, Michael Becker
title2-line-height
$title2-line-height: 1.25em !default;
Used by
- [mixin]
title2
Author
Mustard-UI@v1, Michael Becker
title3-font-size
$title3-font-size: 2em !default;
Used by
- [mixin]
title3
Author
Mustard-UI@v1, Michael Becker
title3-line-height
$title3-line-height: 1.25em !default;
Used by
- [mixin]
title3
Author
Mustard-UI@v1, Michael Becker
title4-font-size
$title4-font-size: 1.75em !default;
Used by
- [mixin]
title4
Author
Mustard-UI@v1, Michael Becker
title4-line-height
$title4-line-height: 1em !default;
Used by
- [mixin]
title4
Author
Mustard-UI@v1, Michael Becker
title5-font-size
$title5-font-size: 1.5em !default;
Used by
- [mixin]
title5
Author
Mustard-UI@v1, Michael Becker
title5-line-height
$title5-line-height: 1em !default;
Used by
- [mixin]
title5
Author
Mustard-UI@v1, Michael Becker
title6-font-size
$title6-font-size: 1.25em !default;
Used by
- [mixin]
title6
Author
Mustard-UI@v1, Michael Becker
title6-line-height
$title6-line-height: 1em !default;
Used by
- [mixin]
title6
Author
Mustard-UI@v1, Michael Becker
title1-selector
$title1-selector: 'h1, .h1' !default;
Author
Mustard-UI@v1, Michael Becker
title2-selector
$title2-selector: 'h2, .h2' !default;
Author
Mustard-UI@v1, Michael Becker
title3-selector
$title3-selector: 'h3, .h3' !default;
Author
Mustard-UI@v1, Michael Becker
title4-selector
$title4-selector: 'h4, .h4' !default;
Author
Mustard-UI@v1, Michael Becker
title5-selector
$title5-selector: 'h5, .h5' !default;
Author
Mustard-UI@v1, Michael Becker
title6-selector
$title6-selector: 'h6, .h6' !default;
Author
Mustard-UI@v1, Michael Becker
titles-selectors
$titles-selectors: $title1-selector, $title2-selector, $title3-selector, $title4-selector, $title5-selector, $title6-selector !default;
Author
Mustard-UI@v1, Michael Becker
subtitle-font-color
$subtitle-font-color: $title-font-color !default;
Author
Mustard-UI@v1, Michael Becker
subtitle-font-weight
$subtitle-font-weight: bold !default;
Author
Mustard-UI@v1, Michael Becker
subtitle-margin
$subtitle-margin: 0 0 0.2423em 0 !default;
Author
Mustard-UI@v1, Michael Becker
subtitle-font-family
$subtitle-font-family: $title-font-family !default;
Author
Mustard-UI@v1, Michael Becker
subtitle1-font-size
$subtitle1-font-size: 1.36em !default;
Used by
- [mixin]
subtitle1
Author
Mustard-UI@v1, Michael Becker
subtitle1-line-height
$subtitle1-line-height: 1.126em !default;
Used by
- [mixin]
subtitle1
Author
Mustard-UI@v1, Michael Becker
subtitle2-font-size
$subtitle2-font-size: 1.125em !default;
Used by
- [mixin]
subtitle2
Author
Mustard-UI@v1, Michael Becker
subtitle2-line-height
$subtitle2-line-height: 1em !default;
Used by
- [mixin]
subtitle2
Author
Mustard-UI@v1, Michael Becker
subtitle1-selector
$subtitle1-selector: '.subtitle1' !default;
Author
Mustard-UI@v1, Michael Becker
subtitle2-selector
$subtitle2-selector: '.subtitle2' !default;
Author
Mustard-UI@v1, Michael Becker
subtitles-selectors
$subtitles-selectors: $subtitle1-selector, $subtitle2-selector !default;
Author
Mustard-UI@v1, Michael Becker
body1-margin
$body1-margin: 0 0 0.6125em 0 !default;
Used by
- [mixin]
body1
Author
Mustard-UI@v1, Michael Becker
body2-factor
$body2-factor: 0.9 !default;
Used by
- [mixin]
body2
Author
Mustard-UI@v1, Michael Becker
body2-margin
$body2-margin: 0 0 0.4em 0 !default;
Used by
- [mixin]
body2
Author
Mustard-UI@v1, Michael Becker
text-colors
$text-colors: (
'primary' : $color-primary,
'secondary' : $color-secondary,
'success' : $color-success-dark,
'info' : $color-info-dark,
'warning' : $color-warning-dark,
'danger' : $color-danger-dark,
'light' : $color-gray-600,
'strong' : $color-gray-900,
) !default;
Author
Mustard-UI@v1, Michael Becker
Typography Links
variables
link-selector
$link-selector: "a" !default;
Author
Mustard-UI@v1
link-color
$link-color: $color-primary !default;
Used by
- [mixin]
link
Author
Mustard-UI@v1
link-weight
$link-weight: 400 !default;
Used by
- [mixin]
link
Author
Mustard-UI@v1
link-decoration
$link-decoration: none !default;
Used by
- [mixin]
link
Author
Mustard-UI@v1
link-weight-strong
$link-weight-strong: $font-weight-bold !default;
Author
Mustard-UI@v1
link-selected-opacity
$link-selected-opacity: 0.75 !default;
Used by
- [mixin]
link
Author
Mustard-UI@v1
link-selected-decoration
$link-selected-decoration: $link-decoration !default;
Used by
- [mixin]
link
Author
Mustard-UI@v1
link-select-transition
$link-select-transition: opacity .1s ease-out !default;
Used by
- [mixin]
link
Author
Mustard-UI@v1
mixins
link
@mixin link() { ... }
Parameters
None.
Requires
- [variable]
link-decoration
- [variable]
link-color
- [variable]
link-weight
- [variable]
link-select-transition
- [variable]
link-selected-opacity
- [variable]
link-selected-decoration
Author
Mustard-UI@v1
css
#{$link-selector}
#{$link-selector} { ... }
Author
Mustard-UI@v1, Michael Becker
strong #{$link-selector}
strong #{$link-selector} { ... }
Author
Mustard-UI@v1, Michael Becker
Variables: Colors Map
variables
color-light
$color-light: #f8f7f9 !default;
color-light-transparent
$color-light-transparent: rgba($color-light, 0.85) !default;
color-dark
$color-dark: #000000 !default;
color-dark-transparent
$color-dark-transparent: rgba($color-dark, 0.45) !default;
color-gray-50
$color-gray-50: #fafafa !default;
color-gray-100
$color-gray-100: #f5f5f5 !default;
color-gray-200
$color-gray-200: #eeeeee !default;
color-gray-300
$color-gray-300: #e0e0e0 !default;
color-gray-400
$color-gray-400: #bdbdbd !default;
color-gray-500
$color-gray-500: #9e9e9e !default;
color-gray-600
$color-gray-600: #757575 !default;
color-gray-700
$color-gray-700: #616161 !default;
color-gray-800
$color-gray-800: #424242 !default;
color-gray-900
$color-gray-900: #212121 !default;
color-blue-gray-50
$color-blue-gray-50: #eceff1 !default;
color-blue-gray-100
$color-blue-gray-100: #cfd8dc !default;
color-blue-gray-200
$color-blue-gray-200: #b0bec5 !default;
color-blue-gray-300
$color-blue-gray-300: #90a4ae !default;
color-blue-gray-400
$color-blue-gray-400: #78909c !default;
color-blue-gray-500
$color-blue-gray-500: #607d8b !default;
color-blue-gray-600
$color-blue-gray-600: #546e7a !default;
color-blue-gray-700
$color-blue-gray-700: #455a64 !default;
color-blue-gray-800
$color-blue-gray-800: #37474f !default;
color-blue-gray-900
$color-blue-gray-900: #263238 !default;
color-red-50
$color-red-50: #ffebee !default;
color-red-100
$color-red-100: #ffcdd2 !default;
color-red-200
$color-red-200: #ef9a9a !default;
color-red-300
$color-red-300: #e57373 !default;
color-red-400
$color-red-400: #ef5350 !default;
color-red-500
$color-red-500: #f44336 !default;
color-red-600
$color-red-600: #e53935 !default;
color-red-700
$color-red-700: #d32f2f !default;
color-red-800
$color-red-800: #c62828 !default;
color-red-900
$color-red-900: #b71c1c !default;
color-pink-50
$color-pink-50: #fce4ec !default;
color-pink-100
$color-pink-100: #f8bbd0 !default;
color-pink-200
$color-pink-200: #f48fb1 !default;
color-pink-300
$color-pink-300: #f06292 !default;
color-pink-400
$color-pink-400: #ec407a !default;
color-pink-500
$color-pink-500: #e91e63 !default;
color-pink-600
$color-pink-600: #d81b60 !default;
color-pink-700
$color-pink-700: #c2185b !default;
color-pink-800
$color-pink-800: #ad1457 !default;
color-pink-900
$color-pink-900: #880e4f !default;
color-purple-50
$color-purple-50: #f3e5f5 !default;
color-purple-100
$color-purple-100: #e1bee7 !default;
color-purple-200
$color-purple-200: #ce93d8 !default;
color-purple-300
$color-purple-300: #ba68c8 !default;
color-purple-400
$color-purple-400: #ab47bc !default;
color-purple-500
$color-purple-500: #9c27b0 !default;
color-purple-600
$color-purple-600: #8e24aa !default;
color-purple-700
$color-purple-700: #7b1fa2 !default;
color-purple-800
$color-purple-800: #6a1b9a !default;
color-purple-900
$color-purple-900: #4a148c !default;
color-deep-purple-50
$color-deep-purple-50: #ede7f6 !default;
color-deep-purple-100
$color-deep-purple-100: #d1c4e9 !default;
color-deep-purple-200
$color-deep-purple-200: #b39ddb !default;
color-deep-purple-300
$color-deep-purple-300: #9575cd !default;
color-deep-purple-400
$color-deep-purple-400: #7e57c2 !default;
color-deep-purple-500
$color-deep-purple-500: #673ab7 !default;
color-deep-purple-600
$color-deep-purple-600: #5e35b1 !default;
color-deep-purple-700
$color-deep-purple-700: #512da8 !default;
color-deep-purple-800
$color-deep-purple-800: #4527a0 !default;
color-deep-purple-900
$color-deep-purple-900: #311b92 !default;
color-indigo-50
$color-indigo-50: #e8eaf6 !default;
color-indigo-100
$color-indigo-100: #c5cae9 !default;
color-indigo-200
$color-indigo-200: #9fa8da !default;
color-indigo-300
$color-indigo-300: #7986cb !default;
color-indigo-400
$color-indigo-400: #5c6bc0 !default;
color-indigo-500
$color-indigo-500: #3f51b5 !default;
color-indigo-600
$color-indigo-600: #3949ab !default;
color-indigo-700
$color-indigo-700: #303f9f !default;
color-indigo-800
$color-indigo-800: #283593 !default;
color-indigo-900
$color-indigo-900: #1a237e !default;
color-blue-50
$color-blue-50: #e3f2fd !default;
color-blue-100
$color-blue-100: #bbdefb !default;
color-blue-200
$color-blue-200: #90caf9 !default;
color-blue-300
$color-blue-300: #64b5f6 !default;
color-blue-400
$color-blue-400: #42a5f5 !default;
color-blue-500
$color-blue-500: #2196f3 !default;
color-blue-600
$color-blue-600: #1e88e5 !default;
color-blue-700
$color-blue-700: #1976d2 !default;
color-blue-800
$color-blue-800: #1565c0 !default;
color-blue-900
$color-blue-900: #0d47a1 !default;
color-light-blue-50
$color-light-blue-50: #e1f5fe !default;
color-light-blue-100
$color-light-blue-100: #b3e5fc !default;
color-light-blue-200
$color-light-blue-200: #81d4fa !default;
color-light-blue-300
$color-light-blue-300: #4fc3f7 !default;
color-light-blue-400
$color-light-blue-400: #29b6f6 !default;
color-light-blue-500
$color-light-blue-500: #03a9f4 !default;
color-light-blue-600
$color-light-blue-600: #039be5 !default;
color-light-blue-700
$color-light-blue-700: #0288d1 !default;
color-light-blue-800
$color-light-blue-800: #0277bd !default;
color-light-blue-900
$color-light-blue-900: #01579b !default;
color-cyan-50
$color-cyan-50: #e0f7fa !default;
color-cyan-100
$color-cyan-100: #b2ebf2 !default;
color-cyan-200
$color-cyan-200: #80deea !default;
color-cyan-300
$color-cyan-300: #4dd0e1 !default;
color-cyan-400
$color-cyan-400: #26c6da !default;
color-cyan-500
$color-cyan-500: #00bcd4 !default;
color-cyan-600
$color-cyan-600: #00acc1 !default;
color-cyan-700
$color-cyan-700: #0097a7 !default;
color-cyan-800
$color-cyan-800: #00838f !default;
color-cyan-900
$color-cyan-900: #006064 !default;
color-teal-50
$color-teal-50: #e0f2f1 !default;
color-teal-100
$color-teal-100: #b2dfdb !default;
color-teal-200
$color-teal-200: #80cbc4 !default;
color-teal-300
$color-teal-300: #4db6ac !default;
color-teal-400
$color-teal-400: #26a69a !default;
color-teal-500
$color-teal-500: #009688 !default;
color-teal-600
$color-teal-600: #00897b !default;
color-teal-700
$color-teal-700: #00796b !default;
color-teal-800
$color-teal-800: #00695c !default;
color-teal-900
$color-teal-900: #004d40 !default;
color-green-50
$color-green-50: #e8f5e9 !default;
color-green-100
$color-green-100: #c8e6c9 !default;
color-green-200
$color-green-200: #a5d6a7 !default;
color-green-300
$color-green-300: #81c784 !default;
color-green-400
$color-green-400: #66bb6a !default;
color-green-500
$color-green-500: #4caf50 !default;
color-green-600
$color-green-600: #43a047 !default;
color-green-700
$color-green-700: #388e3c !default;
color-green-800
$color-green-800: #2e7d32 !default;
color-green-900
$color-green-900: #1b5e20 !default;
color-light-green-50
$color-light-green-50: #f1f8e9 !default;
color-light-green-100
$color-light-green-100: #dcedc8 !default;
color-light-green-200
$color-light-green-200: #c5e1a5 !default;
color-light-green-300
$color-light-green-300: #aed581 !default;
color-light-green-400
$color-light-green-400: #9ccc65 !default;
color-light-green-500
$color-light-green-500: #8bc34a !default;
color-light-green-600
$color-light-green-600: #7cb342 !default;
color-light-green-700
$color-light-green-700: #689f38 !default;
color-light-green-800
$color-light-green-800: #558b2f !default;
color-light-green-900
$color-light-green-900: #33691e !default;
color-lime-50
$color-lime-50: #f9fbe7 !default;
color-lime-100
$color-lime-100: #f0f4c3 !default;
color-lime-200
$color-lime-200: #e6ee9c !default;
color-lime-300
$color-lime-300: #dce775 !default;
color-lime-400
$color-lime-400: #d4e157 !default;
color-lime-500
$color-lime-500: #cddc39 !default;
color-lime-600
$color-lime-600: #c0ca33 !default;
color-lime-700
$color-lime-700: #afb42b !default;
color-lime-800
$color-lime-800: #9e9d24 !default;
color-lime-900
$color-lime-900: #827717 !default;
color-yellow-50
$color-yellow-50: #fffde7 !default;
color-yellow-100
$color-yellow-100: #fff9c4 !default;
color-yellow-200
$color-yellow-200: #fff59d !default;
color-yellow-300
$color-yellow-300: #fff176 !default;
color-yellow-400
$color-yellow-400: #ffee58 !default;
color-yellow-500
$color-yellow-500: #ffeb3b !default;
color-yellow-600
$color-yellow-600: #fdd835 !default;
color-yellow-700
$color-yellow-700: #fbc02d !default;
color-yellow-800
$color-yellow-800: #f9a825 !default;
color-yellow-900
$color-yellow-900: #f57f17 !default;
color-amber-50
$color-amber-50: #fff8e1 !default;
color-amber-100
$color-amber-100: #ffecb3 !default;
color-amber-200
$color-amber-200: #ffe082 !default;
color-amber-300
$color-amber-300: #ffd54f !default;
color-amber-400
$color-amber-400: #ffca28 !default;
color-amber-500
$color-amber-500: #ffc107 !default;
color-amber-600
$color-amber-600: #ffb300 !default;
color-amber-700
$color-amber-700: #ffa000 !default;
color-amber-800
$color-amber-800: #ff8f00 !default;
color-amber-900
$color-amber-900: #ff6f00 !default;
color-orange-50
$color-orange-50: #fff3e0 !default;
color-orange-100
$color-orange-100: #ffe0b2 !default;
color-orange-200
$color-orange-200: #ffcc80 !default;
color-orange-300
$color-orange-300: #ffb74d !default;
color-orange-400
$color-orange-400: #ffa726 !default;
color-orange-500
$color-orange-500: #ff9800 !default;
color-orange-600
$color-orange-600: #fb8c00 !default;
color-orange-700
$color-orange-700: #f57c00 !default;
color-orange-800
$color-orange-800: #ef6c00 !default;
color-orange-900
$color-orange-900: #e65100 !default;
color-deep-orange-50
$color-deep-orange-50: #fbe9e7 !default;
color-deep-orange-100
$color-deep-orange-100: #ffccbc !default;
color-deep-orange-200
$color-deep-orange-200: #ffab91 !default;
color-deep-orange-300
$color-deep-orange-300: #ff8a65 !default;
color-deep-orange-400
$color-deep-orange-400: #ff7043 !default;
color-deep-orange-500
$color-deep-orange-500: #ff5722 !default;
color-deep-orange-600
$color-deep-orange-600: #f4511e !default;
color-deep-orange-700
$color-deep-orange-700: #e64a19 !default;
color-deep-orange-800
$color-deep-orange-800: #d84315 !default;
color-deep-orange-900
$color-deep-orange-900: #bf360c !default;
color-brown-50
$color-brown-50: #efebe9 !default;
color-brown-100
$color-brown-100: #d7ccc8 !default;
color-brown-200
$color-brown-200: #bcaaa4 !default;
color-brown-300
$color-brown-300: #a1887f !default;
color-brown-400
$color-brown-400: #8d6e63 !default;
color-brown-500
$color-brown-500: #795548 !default;
color-brown-600
$color-brown-600: #6d4c41 !default;
color-brown-700
$color-brown-700: #5d4037 !default;
color-brown-800
$color-brown-800: #4e342e !default;
color-brown-900
$color-brown-900: #3e2723 !default;
Variables: Colors Semantic
variables
color-success
$color-success: $color-green-500 !default;
Type
Color
color-success-dark
$color-success-dark: $color-green-700 !default;
Type
Color
color-info
$color-info: $color-blue-700 !default;
Type
Color
color-info-dark
$color-info-dark: $color-blue-800 !default;
Type
Color
color-warning
$color-warning: $color-amber-800 !default;
Type
Color
color-warning-dark
$color-warning-dark: $color-orange-800 !default;
Type
Color
color-danger
$color-danger: $color-red-600 !default;
Type
Color
color-danger-dark
$color-danger-dark: $color-red-800 !default;
Type
Color
bg-paper
$bg-paper: $color-light !default;
Description
Paper background
Type
Color
bg-paper-transparent
$bg-paper-transparent: $color-light-transparent !default;
Description
Paper background for light-backdrop usages
Type
Color
bg-contained
$bg-contained: $color-gray-200 !default;
Description
Areas which are embedded or highlighted or contained inside of paper
Type
Color
bg-body
$bg-body: #f0ecf0 !default;
Description
Body background
Type
Color
bg-backdrop
$bg-backdrop: $color-dark-transparent !default;
Description
Backdrop for modals/overlays over the body/paper backgrounds
Type
Color
color-divider
$color-divider: rgba($color-blue-gray-400, 0.35) !default;
Type
Color
color-primary
$color-primary: $color-purple-600 !default;
Type
Color
color-secondary
$color-secondary: $color-teal-600 !default;
Type
Color
brand-color
use $color-primary
instead
$brand-color: $color-primary !default;
Variables: Grid
variables
bp-xlarge
$bp-xlarge: 1440px !default;
Map structure
key Name | key Description | key Type | key Value |
---|---|---|---|
$bp-xlarge | the minimum size for screen size lg eXtra | Size | 1440px |
Used by
- [function]
bp-xl-q
- [mixin]
bp-lg-only
bp-large
$bp-large: 1024px !default;
Map structure
key Name | key Description | key Type | key Value |
---|---|---|---|
$bp-large | the minimum size for screen size lg | Size | 1024px |
Used by
- [function]
bp-lg-q
- [mixin]
bp-md-only
- [mixin]
bp-lg-only
bp-medium
$bp-medium: 768px !default;
Map structure
key Name | key Description | key Type | key Value |
---|---|---|---|
$bp-medium | the minimum size for screen size md | Size | 768px |
Used by
- [function]
bp-md-q
- [mixin]
bp-sm-only
- [mixin]
bp-md-only
bp-small
$bp-small: 425px !default;
Map structure
key Name | key Description | key Type | key Value |
---|---|---|---|
$bp-small | the minimum size for screen size sm | Size | 425px |
Used by
- [function]
bp-sm-q
- [mixin]
bp-sm-only
bp-xsmall
$bp-xsmall: $bp-small - 1 !default;
Map structure
key Name | key Description | key Type | key Value |
---|---|---|---|
$bp-xsmall | the maximum size for screen size smale eXtra | Size | $bp-small - 1 |
Used by
- [mixin]
bp-xs
col-qty
$col-qty: 12 !default;
Map structure
key Name | key Description | key Type | key Value |
---|---|---|---|
$col-qty | how much columns the grid should be based of, 12 or 24 are a good match | Int | 12 |
Used by
Variables: Naming
variables
class-style
$class-style: bootstrap !default;
Map structure
key Name | key Description | key Type | key Value |
---|---|---|---|
$class-style |
| String | bootstrap |