common/typography
csss
html
Setting root sizes and base styles.
text-size-adjust: 100%;
@include rootsize();
body
Site-wide font family, size and line-height.
color: $color-body;
font-family: $body__font-family;
@include fontsize(zeta, all);
font-style: normal;
font-weight: $body__font-weight--normal;
line-height: 2rem;
.spark-alt
Alternate body color
color: $color-body--alt;
.spark-info
Info text
color: $color-state-info;
.spark-success
Success text
color: $color-state-success;
.spark-warning
Warning text
color: $color-state-warning;
.spark-danger
Danger text
color: $color-state-danger;
button, input
Set the default font on things which don't like to use the body style.
font-family: $body__font-family;
p
Paragraphs. OpenType ligatures and oldstyle figures enabled if available.
font-feature-settings: 'kern' 1, 'liga' 0;
@include fontsize(zeta, all);
line-height: 2rem;
margin-bottom: 2rem;
&:last-child {
margin-bottom: 0;
padding-bottom: 0;
}
h1, h2, h3, h4
Large headings should be slate, bold and use a serif font. OpenType ligatures, discretionary ligatures and lining figures enabled if available.
color: $color-heading;
font-family: $heading__font-family;
font-feature-settings: 'dlig' 0, 'liga' 0, 'lnum' 1, 'kern' 1;
font-style: normal;
font-weight: $heading__font-weight--light;
margin-bottom: 1rem;
h5, h6
Smaller headings use the body font and aren't bold.
font-family: $body__font-family;
font-weight: $heading__font-weight--normal;
margin-bottom: 1rem;
.spark-display-title
A display title. Bigger than the default h1.
@include fontsize(alpha, xs, false, true);
@include fontsize(mega, sm, false, true);
@include fontsize(mega, xl, false, true);
b, strong, .spark-bold
Bold type
font-weight: $body__font-weight--bold;
em, i, .spark-italic
Italic type
font-style: italic;
caption, .spark-caption
Remove in 2.0.0
Caption
@include fontsize(eta, all);
font-family: $heading__font-family;
font-style: normal;
font-weight: $heading__font-weight--normal;
small, .spark-small
Small body copy
@include fontsize(eta, all, true);
.spark-large
Large body copy
@include fontsize(epsilon, all, true);
.spark-thin
Text with a light weight.
font-weight: $body__font-weight--thin;
.spark-caption
Remove in 2.0.0
Caption
color: $color-caption;
@include fontsize(theta, all);
line-height: 2rem;
margin-bottom: 2rem;
h1 + .spark-caption, .spark-alpha + .spark-caption, h2 + .spark-caption, .spark-beta + .spark-caption, h3 + .spark-caption, .spark-gamma + .spark-caption
Nest captions a bit closer to the three primary headings.
margin-top: -1rem;
.spark-delta + .spark-caption, .spark-epsilon + .spark-caption, .spark-zeta + .spark-caption
Captions that follow a smaller heading shouldn't have a top margin.
margin-top: 0rem;
ul, ol
Unordered and ordered lists
@include fontsize(zeta, all);
line-height: 2rem;
list-style-type: none;
margin-bottom: 2rem;
margin-left: 1.5rem;
li {
font-feature-settings: 'kern' 1, 'onum' 1, 'liga' 1;
list-style-type: none;
margin-left: 0;
@include media-breakpoint-only(sm) {
margin-left: 0;
}
}
blockquote
Blockquote
p {
font-style: italic;
padding-left: 1rem;
}
@include media-breakpoint-only(sm) {
margin-left: -1rem;
}
hr
Horizontal rule
background-color: $color-caption;
border: 0;
height: 1px;
margin: 3rem 0;
padding: 0;
.spark-upper
Remove in 2.0.0. Duplicate of .spark-caps
.
Uppercased text. Track out the letter spacing.
letter-spacing: 0.1rem;
text-transform: uppercase;
.spark-underline
Underline text
text-decoration: underline;
.spark-serif
Serif type
font-family: $heading__font-family;
.spark-caps
Capital letters
text-transform: uppercase;
.spark-small-caps
Small capital letters
font-feature-settings: 'smcp' 1, 'kern' 1;
letter-spacing: 0.1rem;
.spark-numerals
Display numerals
@include fontsize(gamma, all);
font-weight: $heading__font-weight--normal;
line-height: 2.5rem;
.spark-lining-numerals
Consistent height numbers with OpenType.
font-feature-settings: 'lnum' 1, 'kern' 1;
.spark-oldstyle-numerals
Ascending and descending numbers with OpenType.
font-feature-settings: 'onum' 1, 'kern' 1;
.spark-text-center
Align the text to the center
text-align: center;
.spark-text-left
Align the text to the left
text-align: left;
.spark-text-right
Align the text to the right
text-align: right;
components
csss
.spark-form--horizontal
A horizontal form treatment
// No bottom border for inputs
.spark-select,
.spark-text-input {
margin-bottom: 0;
}
// Tighten up columns
[class^='col-'],
[class*=' col-'] {
padding-right: 0;
}
.spark-form--horizontal
On the xs breakpoint the horizontal form becomes vertical again
// Inputs fill the width and have a margin bottom again
.spark-select,
.spark-text-input {
margin-bottom: 1rem;
width: 100%;
}
// Loosen up columns
[class^='col-'],
[class*=' col-'] {
padding-right: 1rem;
}
components/button
csss
.spark-btn
Default button. Considered to be the "medium" button. However, applying the .spark-btn--md
class is necessary or else no "corner pocket" is added to the button.
background-color: $btn--default__background-color;
border: $btn--default__border;
border-radius: $btn__border-radius;
color: $btn--default__color;
cursor: pointer;
display: inline-block;
@include fontsize($btn--default__font-size, all);
font-family: $body__font-family;
-webkit-font-smoothing: antialiased;
font-weight: $btn--default__font-weight;
line-height: 1em;
overflow: hidden;
padding: 1.75rem 3.25rem;
position: relative;
text-align: center;
text-transform: uppercase;
transition-duration: 100ms;
transition-property: background-color, color, border-color, box-shadow;
transition-timing-function: ease-in-out;
white-space: nowrap;
// Stick the box shadow in a before element so it can go on top of the "pocket" if it exists
&:not(.spark-btn--icon)::before {
box-shadow: $btn--default__box-shadow;
content: '';
display: inline-block;
height: 100%;
left: 0;
position: absolute;
top: 0;
transition: top 100ms $ease-in-out-quint;
width: 100%;
z-index: 5;
}
// Hover state
&.hover,
&:hover {
background-color: $btn--default--hover__background-color;
color: $btn--default--hover__color;
}
// When button has focus, set the focus padding to override anchor styles
&.focus,
&:focus {
box-shadow: $btn--default--focus__box-shadow;
outline: 0;
}
// Only specify bottom padding for actual focus states. Doing it above for the focus class
// messes up with an anchor tag for some reason.
&:focus{
padding-bottom: 1.75rem;
}
// When the button is active
&.active,
&:active {
background-color: $btn--default--active__background-color;
border: $btn--default--active__border;
box-shadow: none !important;
color: $btn--default--active__color;
// Slide the box shadow down
&::before {
top: 2px;
}
}
// Disabled state. Should also kill hover stuff.
&:disabled,
&.disabled,
&:disabled:hover,
&.disabled:hover {
background-color: $btn--default--disabled__background-color;
border: $btn--default--disabled__border;
color: $btn--default--disabled__color;
cursor: not-allowed;
box-shadow: none;
&::before {
box-shadow: none;
}
}
// Remove inner focus dotted line from Firefox
&::-moz-focus-inner {
border: 0;
outline: 0;
}
.spark-btn__icon
Icons should go first and have some spacing
margin-right: .25rem;
line-height: .75rem;
.spark-btn--lg
A large button
@include fontsize($btn--default__font-size--large, all);
font-family: $heading__font-family;
font-weight: $heading__font-weight--light;
line-height: 1em;
padding: 1.75rem 2.625rem;
text-transform: uppercase;
// Set the focus padding (to override anchor styles)
&:focus {
padding-bottom: 1.75rem;
}
.spark-btn--sm, .spark-btn--xs
A small or extra small button
// Shift the bottom border down 1px so it seems only 1px high. Easier
// than rewriting the box shadow for each color variation of sm and xs buttons.
&::before {
top: 1px;
}
// Add the default glow on focus
&:focus {
box-shadow: $btn--default--focus__box-shadow--small;
}
// Add a glow that corresponds to the secondary color on focus
&.spark-btn--secondary {
&:focus {
box-shadow: $btn--secondary--focus__box-shadow--small;
}
}
// Add a glow that corresponds to the view more color on focus
&.spark-btn--view-more {
&::before {
box-shadow: none;
}
&:focus {
box-shadow: $btn--view-more--focus__box-shadow--small;
}
}
// Add a glow that corresponds to the alternate color on focus
// @deprecated Remove in 2.0.0
&.spark-btn--alt {
&:focus {
box-shadow: $btn--alt--focus__box-shadow--small;
}
}
.spark-btn--sm
A small button
padding: .75rem 2.25rem;
// Set the focus padding (to override anchor styles)
&:focus {
padding-bottom: .75rem;
}
.spark-btn--xs
An extra small button
@include fontsize($btn--default__font-size--small, all);
padding: .5rem 1rem;
// Set the focus padding (to override anchor styles)
&:focus {
padding-bottom: .5rem;
}
.spark-btn--brand
A primary colored brand button
background-color: $btn--brand__background-color;
border: $btn--brand__border;
// Color the bottom border
&::before {
box-shadow: $btn--brand__box-shadow;
}
// Change text color on hover
&.hover,
&:hover {
background-color: $btn--brand__background-color;
color: $btn--default__color;
}
// Add a glow on focus
&.focus,
&:focus {
box-shadow: $btn--brand--focus__box-shadow;
}
// Darken the border when active
&.active,
&:active {
border: $btn--brand--active__border;
}
.spark-btn--secondary
A secondary button
background-color: $btn--secondary__background-color;
border: $btn--secondary__border;
color: $btn--secondary__color;
// Corresponding bottom border color
&::before {
box-shadow: $btn--secondary__box-shadow;
}
// Darken on hover
&.hover,
&:hover {
background-color: $btn--secondary--hover__background-color;
border: $btn--secondary--hover__border;
color: $btn--secondary--hover__color;
&::before {
box-shadow: $btn--secondary--hover__box-shadow;
}
}
// Glow on focus
&.focus,
&:focus,
&.focus:hover,
&:focus:hover {
box-shadow: $btn--secondary--focus__box-shadow;
}
// Darken further when active
&.active,
&:active,
&.active:hover,
&:active:hover {
background-color: $btn--secondary--active__background-color;
border: $btn--secondary--active__border;
color: $btn--secondary--active__color;
&::before {
box-shadow: $btn--secondary--active__box-shadow;
}
}
.spark-btn--view-more
A view-more button
background-color: $btn--view-more__background-color;
border: $btn--view-more__border;
box-shadow: $btn--view-more__box-shadow;
color: $btn--view-more__color;
margin: 4px;
min-width: 200px;
text-align: center;
// Corresponding bottom border color
&::before {
box-shadow: none;
}
// Darken on hover
&.hover,
&:hover {
background-color: $btn--view-more--hover__background-color;
border: $btn--view-more--hover__border;
box-shadow: $btn--view-more--hover__box-shadow;
color: $btn--view-more--hover__color;
&::before {
box-shadow: none;
}
}
// Glow on focus
&.focus,
&:focus,
&.focus:hover,
&:focus:hover {
box-shadow: $btn--view-more--focus__box-shadow;
}
// Darken further when active
&.active,
&:active,
&.active:hover,
&:active:hover {
background-color: $btn--view-more--active__background-color;
border: $btn--view-more--active__border;
box-shadow: $btn--view-more--active__box-shadow;
color: $btn--view-more--active__color;
&::before {
box-shadow: none;
}
}
.spark-btn--alt
Remove in 2.0.0
An alternate button treatment
background-color: $btn--alt__background-color;
border: $btn--alt__border;
color: $btn--alt__color;
// Corresponding bottom border color
&::before {
box-shadow: $btn--alt__box-shadow;
}
// Darken on hover
&.hover,
&:hover {
background-color: $btn--alt--hover__background-color;
border: $btn--alt--hover__border;
color: $btn--alt--hover__color;
&::before {
box-shadow: $btn--alt--hover__box-shadow;
}
}
// Glow on focus
&.focus,
&:focus,
&.focus:hover,
&:focus:hover {
box-shadow: $btn--alt--focus__box-shadow;
}
// Darken further when active
&.active,
&:active,
&.active:hover,
&:active:hover {
background-color: $btn--alt--active__background-color;
border: $btn--alt--active__border;
color: $btn--alt--active__color;
&::before {
box-shadow: $btn--alt--active__box-shadow;
}
}
.spark-btn--negative
A negative button treatment
background-color: $btn--negative__background-color;
border: $btn--negative__border;
color: $btn--negative__color;
// Corresponding bottom border color
&:not(.spark-btn--icon)::before {
box-shadow: $btn--negative__box-shadow;
}
// Remove box shadow when disabled
&.disabled::before,
&:disabled::before,
&.disabled:hover::before,
&:disabled:hover::before {
box-shadow: none;
}
// Darken on hover
&.hover,
&:hover {
background-color: $btn--negative--hover__background-color;
border: $btn--negative--hover__border;
color: $btn--negative--hover__color;
&::before {
box-shadow: $btn--negative--hover__box-shadow;
}
}
// Glow on focus
&.focus,
&:focus,
&.focus:hover,
&:focus:hover {
box-shadow: $btn--negative--focus__box-shadow;
}
// Darken further when active
&.active,
&:active,
&.active:hover,
&:active:hover {
background-color: $btn--negative--active__background-color;
border: $btn--negative--active__border;
color: $btn--negative--active__color;
&::before {
box-shadow: $btn--negative--active__box-shadow;
}
}
.spark-btn--text, .spark-btn--icon
Text and icon buttons
background-color: transparent;
border: none;
font-weight: 700;
padding: 0;
.spark-btn--text
A button that looks like highlight text
color: $btn--text__color;
// No bottom border
&:not(.spark-btn--icon)::before {
box-shadow: none;
}
// Darken on hover
&.hover,
&:hover {
color: $btn--text--hover__color;
}
// Change color when focused
&.focus,
&:focus,
&.focus:hover,
&:focus:hover {
color: $btn--text__color;
padding-bottom: 0;
}
// Don't add an active border
&:active {
border: none;
}
// No background color or border like a normal button
&:hover,
&.hover,
&.focus,
&:focus,
&.focus:hover,
&:focus:hover,
&.disabled,
&:disabled,
&.disabled:hover,
&:disabled:hover {
background-color: transparent;
border: none;
}
// Small text buttons should maintain their size
&.spark-btn--sm {
@include fontsize(eta);
}
.spark-btn--icon.spark-icon
A button that is an icon
background-color: $btn--icon__background-color;
border-radius: $btn--icon__border-radius;
border: $btn--icon__border;
color: $btn--icon__color;
cursor: pointer;
@include fontsize($btn--icon__font-size);
line-height: 2rem;
padding: .5rem;
transition-duration: 250ms;
transition-property: border-color, color, background-color;
&:focus,
&.focus {
border: $btn--icon--focus__border;
outline: none;
}
&:hover,
&.hover {
background-color: $btn--icon--hover__background-color;
color: $btn--icon--hover__color;
}
&:active,
&.active {
background-color: $btn--icon--active__background-color;
border: $btn--icon--active__border;
color: $btn--icon--active__color;
}
&:disabled,
&.disabled,
&:disabled:hover,
&.disabled:hover {
background-color: transparent;
color: $btn--icon--disabled__color;
cursor: not-allowed;
}
.spark-btn--link
A link button
@extend .spark-link;
background-color: transparent;
border: none;
padding-left: 0;
padding-right: 0;
// Hovers like a link
&.hover,
&:hover {
@extend .spark-link:hover;
}
// Focuses like a link
&.focus,
&:focus,
&.focus:hover,
&:focus:hover {
@extend .spark-link:focus;
}
// Active like a link
&:active {
@extend .spark-link:active;
}
.spark-btn--lg, .spark-btn--md
Large and medium buttons have a corner pocket
overflow: hidden;
z-index: 5;
// A little sliver of darker color
&::after {
content: '';
display: inline-block;
height: 1500px;
position: absolute;
transition-duration: 100ms;
transition-property: transform;
transition-timing-function: $ease-in-out-quint;
width: 1500px;
z-index: -5;
}
// Default button color
&.spark-btn {
&::before {
box-shadow: $btn--default__box-shadow;
}
// A little sliver of darker color
&::after{
background-color: $btn--default--hover__background-color;
}
// On active, slide the pocket all the way up.
&.active,
&:active,
&.active:hover,
&:active:hover {
background-color: $btn--default--active__background-color;
&::after {
background-color: $btn--default--active__background-color;
}
}
// On hover, slide the pocket up a bit.
&.hover,
&:hover {
background-color: $btn--default__background-color;
&::after {
}
}
}
// No pocket for secondary stuff
&.spark-btn--secondary {
&::before {
box-shadow: $btn--secondary__box-shadow;
}
// Don't show any "corner pockets"
&::after {
display: none;
}
// Don't change the background color on hover
&.focus,
&:focus,
&.focus:hover,
&:focus:hover {
background-color: inherit;
&::after {
background-color: inherit;
}
}
// Darken the background when active
&.active,
&:active,
&.active:hover,
&:active:hover {
background-color: $btn--secondary--active__background-color;
}
// Darken the background on hover
&.hover,
&:hover {
background-color: $btn--secondary__background-color;
&::before {
box-shadow: $btn--secondary--hover__box-shadow;
}
}
}
// No pocket for view more stuff
&.spark-btn--view-more {
box-shadow: $btn--view-more__box-shadow;
&::before {
box-shadow: none;
}
// Don't show any "corner pockets"
&::after {
display: none;
}
// Don't change the background color on hover
&.focus,
&:focus,
&.focus:hover,
&:focus:hover {
background-color: $btn--view-more__background-color;
box-shadow: $btn--view-more--focus__box-shadow;
&::after {
background-color: $btn--view-more__background-color;
}
}
// Darken the background when active
&.active,
&:active,
&.active:hover,
&:active:hover {
background-color: $btn--view-more--active__background-color;
}
// Darken the background on hover
&.hover,
&:hover {
background-color: $btn--view-more__background-color;
box-shadow: $btn--view-more--hover__box-shadow;
&::before {
box-shadow: none;
}
}
}
// Brand button color
&.spark-btn--brand {
&::before {
box-shadow: $btn--brand__box-shadow;
}
// A little sliver of darker color
&::after {
background-color: $btn--brand--hover__background-color;
}
// On active, slide the pocket all the way up.
&.active,
&:active,
&.active:hover,
&:active:hover {
background-color: $btn--brand--active__background-color;
&::after {
background-color: $btn--brand--active__background-color;
}
}
// On hover, slide the pocket up a bit.
&.hover,
&:hover {
background-color: $btn--brand__background-color;
&::after {
}
}
}
// When disabled, hide the extra corner stuff.
&.disabled,
&:disabled,
&.disabled:hover,
&:disabled:hover {
background-color: $btn--default--disabled__background-color;
&::before,
&::after {
display: none;
}
}
.spark-btn--lg
A large button
// Position the corner pocket
&::after {
transform: translate(-29%, -2%) rotate(-24deg);
}
// Slide up the corner pocket
&.active,
&:active,
&.active:hover,
&:active:hover {
&::after {
transform: translate(-70%, -2%) rotate(-24deg);
}
}
// Slide up the corner pocket part way
&.hover,
&:hover {
&::after {
transform: translate(-33%, -2%) rotate(-24deg);
}
}
.spark-btn--md
A medium button
// Position the corner pocket
&::after {
transform: translate(-28%, -3%) rotate(-24deg);
}
// Slide up the corner pocket
&.active,
&:active,
&.active:hover,
&:active:hover {
&::after {
transform: translate(-70%, -3%) rotate(-24deg);
}
}
// Slide up the corner pocket part way
&.hover,
&:hover {
&::after {
transform: translate(-31%, -3%) rotate(-24deg);
}
}
.spark-btn--square, .spark-btn--circle
A button which is a circle or square
height: 5rem;
padding: 1.75rem;
width: 5rem;
.spark-btn--circle
A button which is a circle
border-radius: 50%;
// Round the bottom border as well
&::before {
border-radius: 50%;
}
.spark-btn--block
A button that is display block and takes up as much space as it can.
display: block;
width: 100%;
components/button-group
csss
components/calendar
csss
.spark-calendar
Calendar date selection.
background-color: $calendar__background-color;
color: $calendar__color;
display: inline-block;
max-width: 100%;
padding: 0;
transition-duration: 300ms, 300ms, 0ms, 100ms, 100ms;
&[data-visible-count="2"] .spark-calendar__content {
max-width: 62rem;
.spark-calendar__month {
max-width: calc(50% + 1rem);
}
}
&[data-visible-count="3"] .spark-calendar__content {
max-width: 92rem;
.spark-calendar__month {
max-width: calc(33.333333333% + 1rem);
}
}
&[data-prepend-count] .spark-calendar__content,
&.no-animate .spark-calendar__content {
transition-duration: 0ms;
}
&[data-prepend-count="1"] .spark-calendar__content,
&[data-append-count="1"] .spark-calendar__content {
transform: translateX(-30rem);
}
&[data-prepend-count="2"] .spark-calendar__content,
&[data-append-count="2"] .spark-calendar__content {
transform: translateX(-60rem);
}
&.spark-calendar__fixed {
border: 0;
height: 100%;
margin-top: 0;
.spark-popover__caret {
display: none;
}
}
.spark-calendar__overflow
Hide overflow content
overflow: hidden;
.spark-calendar__content
Holds the months
display: flex;
max-width: 32rem;
position: relative;
transform: translateX(0);
transition: transform 100ms ease-in-out;
width: 100%;
.spark-calendar__fixed
An item affixed to the screen
border-radius: 0;
left: 0;
position: fixed !important;
top: 0;
width: 100%;
.spark-input__field,
.spark-input__fields,
&.spark-input__field,
&.spark-input__fields {
border-top: 0;
border-left: 0;
border-right: 0;
border-radius: 0;
}
.spark-calendar__content {
max-width: 100%;
}
.spark-calendar__previous, .spark-calendar__next
Back and forward arrows.
background: transparent;
border: none;
color: inherit;
cursor: pointer;
font-size: 2rem;
height: 4rem;
opacity: 1;
position: absolute;
top: 1rem;
transition-duration: $calendar__transition-duration;
transition-property: opacity;
width: 4rem;
&:disabled {
opacity: 0;
}
&:focus {
outline: 0;
}
.spark-calendar__month
A grouping of days.
flex: 1 0 auto;
max-width: 100%;
min-width: 32rem;
padding: 2rem;
width: 32rem;
@include media-breakpoint-only(xs) {
min-width: auto;
}
// When a month follows another, it should have a negative left margin so we don't get double padding.
+ .spark-calendar__month {
margin-left: -2rem;
}
.spark-calendar__month-title
The title for a calendar month.
color: $calendar__month-title__color;
font-family: $heading__font-family;
@include fontsize($calendar__month-title__font-size);
margin-bottom: 1rem;
text-align: center;
.spark-calendar__select
Select inputs used for quick advancement through months.
line-height: 4rem;
margin: -1rem 0 -.5rem 0;
width: auto;
.spark-select__input {
border: $calendar__month-title__border;
border-radius: 0;
color: $calendar__month-title__color;
font-weight: 300;
line-height: 2rem;
padding: 1rem 2rem 1rem 1rem;
&:focus {
border-color: $calendar__month-title__color;
}
}
&::after {
border-color: transparent;
border-style: solid;
border-top-color: $calendar__month-title__color;
border-width: .425rem;
border-top-width: .55rem;
content: '';
display: inline-block;
margin-top: .25rem;
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
}
&:hover {
z-index: 15;
.spark-select__input:not([disabled]) {
border: $calendar__month-title--hover__border;
}
}
&:first-child {
.spark-select__input {
border-radius: .25rem 0 0 .25rem;
}
}
&:not(:last-child) {
margin-right: -1px;
}
&:last-child {
margin-right: 0;
.spark-select__input {
border-radius: 0 .25rem .25rem 0;
}
}
.spark-calendar__days-of-week, .spark-calendar__days
Groups of days.
display: flex;
flex-wrap: wrap;
margin-bottom: 1px;
margin-right: 1px;
position: relative;
.spark-calendar__day-of-week, .spark-calendar__day
Days and their placeholders should flex.
display: inline-block;
flex: 1 0 auto;
justify-content: center;
width: (100% / 7);
.spark-calendar__days-of-week
Days of the week (M, T, W, etc.)
.spark-calendar__days
The list of calendar days
.spark-calendar__day
A single calendar day. Selectable
border: $calendar__day__border;
color: $calendar__day__color;
@include fontsize($calendar__day__font-size, all);
line-height: 0;
margin-bottom: -1px;
margin-right: -1px;
position: relative;
transition-delay: 0ms;
transition-duration: 100ms;
transition-property: color, border, z-index, background-color;
z-index: 5;
// Pushes the content to be the same height and width.
&::after {
content: '';
display: block;
float: left;
padding-top: 100%;
}
span {
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
// A disabled day
&--disabled {
color: $calendar__day--disabled__color;
text-decoration: none;
&:hover {
color: $calendar__day--disabled__color;
}
}
// Inactive days
&--inactive,
&--inactive.spark-calendar__day--disabled {
background-color: $calendar__day--inactive__background-color;
color: $calendar__day--inactive__color !important;
}
// Today's date
&--today {
// A circle to indicate the current day
&::before {
border: $calendar__day__today-border;
border-radius: 50%;
box-sizing: border-box;
content: '';
display: block;
height: 80%;
left: 10%;
position: absolute;
top: 10%;
width: 80%;
z-index: -5;
}
}
// On hover or focus
&:hover:not(.spark-calendar__day--disabled),
&:focus:not(.spark-calendar__day--disabled) {
border: $calendar__day--hover__border;
color: $calendar__day--hover__color;
z-index: 10;
}
// On focus, don't adopt the bottom border of an anchor
&:focus {
border-bottom: $calendar__day__border;
padding-bottom: 0;
}
.spark-calendar__day-note
A note that accompanies a day button
bottom: 0;
@include fontsize($calendar__day-note__font-size, all);
font-weight: $calendar__day-note__font-weight;
left: 0;
line-height: 1.5rem;
position: absolute;
text-align: center;
width: 100%;
.spark-calendar__day--selected
A selected day or the start or end of a range
background-color: $calendar__day--selected__background-color;
border: $calendar__day--selected__border;
color: $calendar__day--selected__color;
z-index: 7;
&.spark-calendar__day--inactive.spark-calendar__day--disabled {
background-color: $calendar__day--inactive__background-color;
border: $calendar__day__border;
}
&:hover:not(.spark-calendar__day--disabled),
&:focus:not(.spark-calendar__day--disabled) {
color: $calendar__day--selected__color;
}
// A circle to indicate the current day
&::before {
border-color: $white;
}
.range-start.range-end, .range-start.range-middle
When a month has both the start and end of a range.
.spark-calendar__range-start ~ .spark-calendar__day:not(.spark-calendar__day--selected):not(.spark-calendar__range-end):not(.spark-calendar__day--inactive) {
@extend %calendar-range-highlight;
}
.spark-calendar__range-end ~ .spark-calendar__day:not(.spark-calendar__day--selected):not(.spark-calendar__day--inactive):not([bump]),
.spark-calendar__range-last:not(.hover-start) ~ .spark-calendar__day:not(.spark-calendar__day--selected):not(.spark-calendar__day--inactive):not([bump]),
.hover-end ~ .spark-calendar__day:not(.spark-calendar__day--selected):not(.spark-calendar__day--inactive):not([bump]) {
@extend %calendar-range-highlight--disabled;
}
.range-start.value-after, .range-start.range-middle
When a month has the start of a range but the value is on another month.
.spark-calendar__range-start ~ .spark-calendar__day:not(.spark-calendar__day--selected):not(.spark-calendar__day--inactive) {
@extend %calendar-range-highlight;
}
.range-end.value-before
When a month has the end of a range but the value is on another month.
.spark-calendar__day:not(.spark-calendar__day--selected):not(.spark-calendar__day--inactive):not(.spark-calendar__day--selected) {
@extend %calendar-range-highlight;
}
.spark-calendar__range-end ~ .spark-calendar__day:not(.spark-calendar__day--inactive) {
@extend %calendar-range-highlight--disabled;
}
.value-before.value-after:not(.has-value)
When a month has values before and after it, highlight everything!
.spark-calendar__day:not(.spark-calendar__day--selected):not(.spark-calendar__day--disabled):not(.spark-calendar__day--inactive) {
@extend %calendar-range-highlight;
}
.range-middle.range-end
When a month has both a selection and end of a range.
.spark-calendar__range-middle ~ .spark-calendar__day:not(.spark-calendar__day--selected):not(.spark-calendar__range-end):not(.spark-calendar__day--inactive) {
@extend %calendar-range-highlight;
}
.spark-calendar__range-end ~ .spark-calendar__day:not(.spark-calendar__day--selected):not(.spark-calendar__day--inactive):not([bump]) {
@extend %calendar-range-highlight--disabled;
}
components/checkbox
csss
.spark-checkbox, .spark-radio
Wrapper around the checkbox input. Generally a label so that clicking on any part of the container triggers the checkbox.
color: $checkbox__color;
display: flex;
touch-callout: none;
transition: all 250ms $ease-in-out-quint;
user-select: none;
position: relative;
margin-bottom: 1rem;
// Hide the actual element from view since we're going to show a replacement box.
.spark-checkbox__input,
.spark-radio__input {
cursor: pointer;
height: 100%;
left: 0;
margin: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 10;
}
// When the checkbox is checked, make the checkbox gray with a check mark in it.
.spark-checkbox__input:checked ~ .spark-checkbox__box,
.spark-radio__input:checked ~ .spark-radio__box {
background-color: $checkbox--active__background-color;
border: $checkbox--active__border;
&::before {
transform: translate(-50%, -50%) rotate(-45deg) scale(1);
}
}
// When the checkbox is checked, make the label darker.
.spark-checkbox__input:checked ~ .spark-label,
.spark-radio__input:checked ~ .spark-label {
color: $checkbox--active__color;
}
/// When the checkbox is checked, highlight special label copy
.spark-checkbox__input:checked ~ .spark-label .spark-label__highlight,
.spark-radio__input:checked ~ .spark-label .spark-label__highlight {
color: $color-state-success;
}
/// When the checkbox is focus, highlight special label copy
.spark-checkbox__input:focus ~ .spark-checkbox__box,,
.spark-radio__input:focus ~ .spark-radio__box {
background-color: $checkbox--hover__background-color;
border: $checkbox--hover__border;
}
/// When the checkbox is disabled, make the checkbox gray.
.spark-checkbox__input:disabled ~ .spark-checkbox__box,
.spark-radio__input:disabled ~ .spark-radio__box {
background-color: $checkbox--disabled__background-color;
border: $checkbox--disabled__border;
cursor: not-allowed;
}
// When the checkbox is disabled, make the label lighter.
.spark-checkbox__input:disabled ~ .spark-label,
.spark-radio__input:disabled ~ .spark-label {
color: $checkbox--disabled__color;
cursor: not-allowed;
}
// Make sure elements sit above the checkbox el
.spark-checkbox__box,
.spark-radio__box,
.spark-label {
cursor: pointer;
position: relative;
z-index: 5;
}
/// Label
.spark-label {
color: $checkbox__label__color;
display: inline-block;
line-height: 2rem;
white-space: normal;
}
// Hover state for the checkbox
&:hover {
color: $checkbox--hover__color;
.spark-checkbox__box,
.spark-radio__box {
background-color: $checkbox--hover__background-color;
border: $checkbox--hover__border;
}
.spark-label {
color: $checkbox__label--hover__color;
}
}
/// When a box is followed by a label, space them out.
.spark-checkbox__box + .spark-label,
.spark-radio__box + .spark-label {
margin-left: 1rem;
vertical-align: top;
}
.spark-checkbox__input:checked ~ .spark-label .spark-label__highlight, .spark-radio__input:checked ~ .spark-label .spark-label__highlight
When the checkbox is checked, highlight special label copy
color: $color-state-success;
.spark-checkbox__input:focus ~ .spark-checkbox__box,, .spark-radio__input:focus ~ .spark-radio__box
When the checkbox is focus, highlight special label copy
background-color: $checkbox--hover__background-color;
border: $checkbox--hover__border;
.spark-checkbox__input:disabled ~ .spark-checkbox__box, .spark-radio__input:disabled ~ .spark-radio__box
When the checkbox is disabled, make the checkbox gray.
background-color: $checkbox--disabled__background-color;
border: $checkbox--disabled__border;
cursor: not-allowed;
.spark-label
Label
color: $checkbox__label__color;
display: inline-block;
line-height: 2rem;
white-space: normal;
.spark-checkbox__box + .spark-label, .spark-radio__box + .spark-label
When a box is followed by a label, space them out.
margin-left: 1rem;
vertical-align: top;
.spark-checkbox__box, .spark-radio__box
Placeholder box
background-color: $checkbox__background-color;
border-radius: $input__border-radius;
border: $checkbox__border;
display: table;
height: 2rem;
position: relative;
transition-duration: 250ms;
transition-property: background-color, border, color;
transition-timing-function: $ease-in-out-quint;
width: 2rem;
// The check
&::before {
border-bottom: .3rem solid $checkbox--active__icon__color;
border-left: .3rem solid $checkbox--active__icon__color;
content: '';
display: inline-block;
height: .4rem;
left: 50%;
margin-left: .025rem;
margin-top: -.1rem;
position: absolute;
top: 50%;
transform-origin: center center;
transform: translate(-50%, -50%) rotate(-45deg) scale(0);
transition: transform 250ms $ease-in-out-quint;
width: .75rem;
}
.spark-checkbox--sm, .spark-radio--sm
Small checkbox
.spark-checkbox__box,
.spark-radio__box {
height: 1rem;
top: 0.5rem;
width: 1rem;
&::before {
border-bottom: .15rem solid $checkbox--active__icon__color;
border-left: .15rem solid $checkbox--active__icon__color;
height: .2rem;
margin-left: 0;
margin-top: -.1rem;
width: .375rem;
}
}
.spark-label {
line-height: 2rem;
overflow: visible;
}
.spark-checkbox-group, .spark-radio-group
A group of checkboxes
// When the group has a state, show it below.
&[data-error],
&[data-warning],
&[data-success] {
.spark-checkbox-group__message,
.spark-radio-group__message {
border-radius: $input__border-radius;
display: block;
margin-bottom: 1rem;
}
}
// When the container has an error state, show it below.
&[data-error] {
.spark-checkbox__box,
.spark-radio__box {
border-color: $color-state-danger;
}
.spark-checkbox-group__message,
.spark-radio-group__message {
background-color: $color-state-danger;
}
}
// When the container has an warning state, show it below.
&[data-warning] {
.spark-checkbox__box,
.spark-radio__box {
border-color: $color-state-warning;
}
.spark-checkbox-group__message,
.spark-radio-group__message {
background-color: $color-state-warning;
}
}
// When the container has an success state, show it below.
&[data-success] {
.spark-checkbox__box,
.spark-radio__box {
border-color: $color-state-success;
}
.spark-checkbox-group__message,
.spark-radio-group__message {
background-color: $color-state-success;
}
}
.spark-checkbox-group__message, .spark-radio-group__message
The checkbox group message is the same as the input message
@extend .spark-input__message;
components/date-input
csss
.spark-date
Date input
// A direct input descendant should be an input with `type=date`.
// We need to be this specific because the typeahead and calendar
// widget also contain inputs.
> .spark-input__field {
overflow: hidden;
text-indent: -9999px;
// Hide the native controls
&::-webkit-inner-spin-button,
&::-webkit-calendar-picker-indicator {
display: none;
appearance: none;
}
}
.spark-input__fields .spark-input__field {
width: 0;
}
// When we're active or focused, show the value
&.active > .spark-input__field,
> .spark-input__field:focus {
overflow: visible;
text-indent: 0;
}
// A label for a date input needs to be the full height so that when clicking on the
// input in it's unfocused state we can't accidentally click on a different label.
&:not(.spark-date--select) .spark-label {
line-height: 5rem;
top: 0;
}
&:not(.spark-date--select) .spark-input__addon {
line-height: 1rem;
[class*="spark-icon-calendar"],
[class^="spark-icon-calendar"] {
line-height: 2rem;
}
}
// When active, adjust the line height of the label
&.active > .spark-label,
> .spark-input__field:focus ~ .spark-label {
line-height: 2rem;
top: .5rem;
}
// Monospace overlay text to match
.spark-input__overlay {
font-family: $mono__font-family;
}
.spark-date__calendar-toggle
Calendar show/hide button
@extend .spark-input__addon-button;
components/expand
csss
.spark-expand
Expand container
// When expanded...
&.expanded {
// Show the content
.spark-expand__content {
display: block;
}
// Hide some content
.spark-expand__hide--expanded {
display: none !important;
}
// Show some content
.spark-expand__show--expanded {
display: block !important;
}
// Rotate the caret
.spark-expand__toggle-caret {
transform: rotate(-90deg);
}
}
.spark-expand__content
Expand content
display: none;
.spark-expand__show--expanded
Show when expand is expanded, but hide by default
display: none !important;
.spark-expand__toggle-caret
The caret to show inside a toggle. This gets spun when expanded.
color: inherit;
display: inline-block;
font-size: .75em;
margin-left: .25rem;
position: relative;
top: -.1rem;
transform: rotate(0deg);
transition: transform 100ms $ease-in-out-quint;
&::before {
@extend .spark-icon::before;
@extend .spark-icon-arrow-triangle-right::before;
@extend .spark-icon--fill::before;
font-size: .75em !important;
}
components/fieldset
csss
.spark-fieldset
A group of form inputs.
@include fontsize($fieldset__font-size);
components/footer
components/header
csss
.spark-header
Primary header/navigation
background-color: $header__background-color;
border-top: $header__border-top-width solid $header__border-top-color;
color: $header__color;
height: 7rem;
position: relative;
.spark-header__nav{
height: 7rem;
}
// The slide out navigation menu
.spark-menu {
display: flex;
flex-direction: column;
left: 0;
max-height: 100vh;
max-width: 100vw;
min-height: 100vh;
overflow: auto;
position: absolute;
top: 0;
transform: translateX(-100%);
transition-delay: 0ms, 250ms;
transition-duration: 250ms, 0ms;
transition-property: transform, visibility;
transition-timing-function: $ease-out-quint;
width: 25rem;
visibility: hidden;
z-index: 100;
// Fix for Android 4.4.3 where header doesn't take up enough space.
> .spark-menu__header {
flex: 0 0 auto;
}
// Reorder content
> .spark-menu__list,
> .spark-menu__animation-wrapper > .spark-menu__list {
flex: 1 0 auto;
order: 10;
// Secondary lists shouldn't take up more space than they need.
~ .spark-menu__list {
flex-grow: 0;
}
}
> .spark-menu__animation-wrapper {
flex: 0 1 auto;
order: 10;
width: 100%;
// Secondary lists shouldn't take up more space than they need.
~ .spark-menu__list {
flex-grow: 0;
}
}
> .spark-header__search {
flex-grow: 0;
order: 5;
}
// Bump the title up to match our header logo
.spark-logo {
position: relative;
top: -4px;
}
}
// Top-level header menu
.spark-header__menu {
align-items: center;
height: 100vh;
position: fixed;
}
// Adjust the spacing on the menu title
.spark-menu__title {
line-height: 1rem;
padding: 2.5rem 2rem 2.5rem 0;
}
// When we are in the collapsed state...
&.spark-header--collapsed {
// The navigation which isn't the placeholder. Don't want to style the placeholder
// or else we can't track the sizes of elements.
.spark-header__nav:not(.spark-header__placeholder) {
// Show collapsed-specific text
.spark-header__collapsed-show {
display: inline-block;
}
// Collapsed text after an icon should have a margin to separate it from the icon
[class^="#{$prefix}-icon-"] + .spark-header__collapsed-show {
margin-left: 1rem;
}
// Hide collapsed-specific text
.spark-header__collapsed-hide {
display: none;
}
}
}
// When we are visible or this is a placeholder, lay things out horizontally.
&.spark-header--visible,
.spark-header__placeholder {
color: $header--visible__color;
// When the overflow has been checked, elements have been
// shown and hidden and we can remove overflow: hidden from
// the overflow containers. If we don't do this, dropdowns
// aren't visible. And we CAN'T just use overflow-x: hidden
// and overflow-y: visible because when overflow-x or y is hidden
// the other properly ALWAYS has a property of auto. Ugh.
&.spark-header--overflow-checked {
.spark-header__nav:not(.spark-header__placeholder) {
.spark-header__menu,
.spark-header__list--overflow {
overflow: visible;
}
}
}
// Hide menus that shouldn't show when we're visible.
.spark-header__list-visible-hidden {
display: none !important;
}
// Hide collapsed-specific text
.spark-header__collapsed-show {
display: none;
}
// Show collapsed-specific text
.spark-header__collapsed-hide {
display: inline-block;
}
// Hide toggle
.spark-menu__toggle {
display: none;
}
// Hide nested list arrows
.spark-menu__list-next {
display: none;
}
// Pad the logo
.spark-header__logo {
padding-left: 2.5rem;
}
// Title width should be as small as possible
.spark-header__title {
width: auto;
}
// Main menu
.spark-menu {
background-color: transparent;
color: inherit;
display: flex;
flex: 1 1 auto;
flex-direction: row;
height: auto;
min-height: 0;
max-height: none;
max-width: none;
position: static;
transform: none;
visibility: visible;
// Hide top-level list titles
> .spark-menu__title {
display: none;
}
// Top-level items should have no font-size because otherwise there is a gap between the items.
> .spark-menu__animation-wrapper > .spark-menu__list,
> .spark-menu__list {
color: inherit;
flex: 0 1 auto;
font-size: 0;
height: 100%;
padding: 0;
white-space: nowrap;
&.spark-header__search {
flex-shrink: 0;
}
// Don't flex top-level links
> .spark-menu__list-item > .spark-menu__list-links {
display: inline-block;
}
// Dropdown list
> .spark-menu__list-item > .spark-menu__list,
> .spark-menu__list-item > .spark-menu__animation-wrapper > .spark-menu__list {
background-color: $header--visible__second-level__background-color;
box-shadow: 1px 0px 9px rgba(0, 0, 0, .23);
border-radius: 0 0 $panel__border-radius $panel__border-radius;
display: block;
margin-bottom: 0;
max-height: calc(100vh - 7rem);
-ms-overflow-style: overflow-style;
opacity: 0;
overflow: hidden;
overflow-y: auto;
padding-bottom: 0;
padding-top: 0;
position: absolute;
top: 100%;
transition-delay: 0ms, 50ms;
transition-duration: 200ms;
transition-property: opacity, visibility;
transition-timing-function: $ease-out-quint;
white-space: normal;
width: 20rem;
z-index: 10;
visibility: hidden;
// Hide the shadow
&::before, &::after {
display: none;
}
// Style top-level dropdown items to
> .spark-menu__list-item:not(.active) > .spark-menu__list-link,
> .spark-menu__list-item:not(.active) > .spark-menu__list-links .spark-menu__list-link,
> .spark-menu__list-item:not(.active) > .spark-menu__list-links .spark-menu__list-expand {
&:hover {
background-color: $menu__list-link--hover__background-color;
color: $menu__list-link--hover__color;
}
}
// Tall faux border on in-page links
.spark-menu__list-item.active {
> .spark-menu__list-link--in-page::before {
margin-top: -1rem;
}
}
// Second-level list items
.spark-menu__list-item {
display: block;
min-width: 100%;
// Adjust sizing on second-level links
.spark-menu__list-link {
border-top: none;
display: block;
line-height: 2rem;
padding: 1rem 2rem;
&.spark-menu__list-expand {
padding-right: 4rem;
}
}
// Third-level list items
.spark-menu__list,
.spark-menu__animation-wrapper > .spark-menu__list {
&::before,
&::after {
content: '';
}
.spark-menu__list-item {
@include fontsize($header--visible__third-level__font-size);
.spark-menu__list-link {
padding: .5rem 2rem;
}
}
// Shorter faux border on in-page links
.spark-menu__list-item.active {
> .spark-menu__list-link--in-page::before {
margin-top: -0.5rem;
}
}
}
}
}
// Top-level list items and links should display inline and take up
// as little space as possible
> .spark-menu__list,
> .spark-menu__animation-wrapper > .spark-menu__list,
> .spark-menu__animation-wrapper,
> .spark-menu__list-links,
> .spark-menu__list-link,
> .spark-menu__list-item {
background-color: inherit;
color: inherit;
display: inline-block;
width: auto;
}
// Top-level list item
> .spark-menu__list-item {
height: 100%;
// Top-level links
> .spark-menu__list-link,
> .spark-menu__list-links .spark-menu__list-link {
border-top: #{$header--visible__link--active__border-top-width} solid transparent;
line-height: 2rem;
padding: calc(2.5rem - #{$header--visible__link--active__border-top-width / 2}) 2rem;
// Offset the margin on large and medium icons so they don't make the header too tall
.spark-icon--md,
.spark-icon--lg {
margin-right: 0;
}
}
// Hover state
&:hover {
> .spark-menu__list-link,
> .spark-menu__list-links .spark-menu__list-link {
background-color: transparent;
color: $header--visible__color;
}
> .spark-menu__list-links .spark-menu__list-expand::before {
border-top-color: $header--visible__color;
}
}
> .spark-menu__list-links {
.spark-menu__list-link {
padding-right: 4rem;
}
.spark-menu__list-expand {
background: transparent;
display: inline-block;
flex: none;
line-height: 0;
min-width: 0;
padding: 0;
position: absolute;
right: 2rem;
top: 50%;
transform: translateY(-50%);
z-index: 10;
&::before {
border-top: .5rem solid $header--visible__color;
border-left: .5rem solid transparent;
border-right: .5rem solid transparent;
content: '';
left: 0;
position: relative;
transform: none;
}
// Hide the border on the side
&::after {
display: none;
}
&:focus::before {
border: none;
border-radius: 0;
border-top: .5rem solid $header--visible__color;
border-left: .5rem solid transparent;
border-right: .5rem solid transparent;
}
}
}
// Show the immediate child list on hover or focus
&:hover,
&.has-focus {
> .spark-menu__list,
> .spark-menu__animation-wrapper > .spark-menu__list {
opacity: 1;
transition-delay: 0ms;
visibility: visible;
.spark-header__list-cta {
display: block;
}
}
}
// Ignore the open state in the header
&.open {
> .spark-menu__list-links {
color: inherit;
font-weight: inherit;
}
}
// Active state
&.active,
&.has-active-child {
// Show the shadow
&::after {
opacity: 1;
}
// Color the link
> .spark-menu__list-links .spark-menu__list-link,
> .spark-menu__list-link {
background-color: $header--visible__link--active__background-color;
border-top: $header--visible__link--active__border-top-width solid $header--visible__link--active__border-top-color;
color: $header--visible__link--active__color;
font-weight: inherit;
}
> .spark-menu__list-links {
background-color: transparent;
font-weight: inherit;
}
}
}
// More button
> .spark-header__more {
width: auto;
// Hide expand buttons in the more list because they can't be used until the menu
// item is swapped out.
.spark-menu__list-expand {
display: none;
}
// Move the list up to cover the more button
.spark-menu__list,
.spark-menu__animation-wrapper > .spark-menu__list {
background-color: $header--visible__second-level__background-color;
border-radius: $panel__border-radius;
max-width: none;
padding-bottom: 1rem;
padding-top: 1rem;
top: calc(.8rem - #{$header--visible__link--active__border-top-width / 2});
white-space: nowrap;
width: auto;
// Hide any nested lists
.spark-menu__list {
display: none;
}
}
}
// Lists after the first should only take up as much space as they need
+ .spark-menu__list {
width: auto;
}
}
> .spark-menu__animation-wrapper {
// Lists after the first should only take up as much space as they need
+ .spark-menu__list {
width: auto;
}
}
// Dim all links on hover
&:hover {
> .spark-menu__list > .spark-menu__list-item,
> .spark-menu__animation-wrapper > .spark-menu__list > .spark-menu__list-item {
// Dim text
> .spark-menu__list-link,
> .spark-menu__list-links > .spark-menu__list-link {
color: $header--visible--hover__color;
}
// Dim any carets
> .spark-menu__list-links .spark-menu__list-expand::before {
border-top-color: $header--visible--hover__color;
}
// Keep the color of the hovered item
&:hover {
// Highlight text
> .spark-menu__list-link,
> .spark-menu__list-links > .spark-menu__list-link {
color: $header--visible__link--hover__color;
}
// Highlight caret
> .spark-menu__list-links .spark-menu__list-expand::before {
border-top-color: $header--visible__link--hover__color;
}
}
}
}
}
// List items
.spark-menu__list-item {
// Shadow on the active tab
&::after {
background-color: $header--visible__link--active__shadow-color;
content: '';
display: block;
height: calc(100% - #{$header--visible__link--active__border-top-width}); // Full height, minus 4px for the border.
opacity: 0;
position: absolute;
right: -.2rem;
top: #{$header--visible__link--active__border-top-width};
transform: skew(-3deg);
transition: opacity 250ms $ease-in-out-quint;
z-index: 0;
width: 1rem;
}
// Raise the z-index of links so they sit above the shadow
.spark-menu__list-link {
position: relative;
z-index: 5;
}
}
// Login \ Sign in link
// @deprecated changing `login` to `sign-in`, will remove `login` in 2.0.0
.spark-header__login .spark-menu__list-link,
.spark-header__sign-in .spark-menu__list-link {
background-color: $header__sign-in__background-color;
border-top: none;
color: $link--default__color;
font-weight: $header__sign-in__font-weight;
line-height: 3rem;
padding: calc(2rem - #{$header__border-top-width}) 2rem 2rem 4rem;
top: 4px;
white-space: nowrap;
&:active,
&:focus,
&:focus:hover,
&:hover {
color: $header__sign-in--hover__color;
}
}
// Overflow list should take up as much space as possible
.spark-header__list--overflow {
width: 100%;
}
// A second list should not have a top border
.spark-menu__list ~ .spark-menu__list {
border-top: none;
}
// Reset the font size on list items
.spark-menu__list-item {
@include fontsize($header__font-size);
}
// Hide the menu header
.spark-menu__header {
display: none;
}
// Reset ordering of search
.spark-header__search {
background-color: transparent;
order: 10;
// Reset icon size and color.
> .spark-menu__list-item.spark-expand__toggle {
border-bottom: none;
[class^="#{$prefix}-icon-"] {
align-items: center;
display: flex;
height: calc(100% - #{$header__border-top-width});
margin-top: #{$header__border-top-width};
}
> .spark-menu__list-link {
border-top: none;
[class^="#{$prefix}-icon-"] {
color: inherit;
}
}
}
.spark-input {
.spark-input__field:focus {
padding-bottom: .5rem;
padding-top: .5rem;
}
}
// Show the expand button
> .spark-expand__toggle {
display: block;
}
// Should fit snug against a list that follows it
+ .spark-menu__list,
+ .spark-menu__animation-wrapper > .spark-menu__list {
margin-left: -1rem;
}
// Show the form when search is expanded
&.expanded {
.spark-header__search-form {
display: block;
}
}
}
// Hide the search form by default
.spark-header__search-form {
border-bottom: none;
display: none;
height: calc(100% - #{$header__border-top-width});
padding: 1rem 0 1rem 2rem;
position: absolute;
right: 0;
top: ($header__border-top-width / 2);
width: 25rem;
z-index: 10;
.spark-input {
padding: 0 1rem;
position: relative;
top: 50%;
transform: translateY(-50%);
.spark-input__field {
background-color: $input__background-color;
border: $input__border;
padding-left: 1rem;
// Hide the icons we don't need
~ .spark-header__search-icon,
~ .spark-input__clear {
display: none;
}
}
.spark-input__addon {
font-size: 1rem;
right: 1rem;
}
}
// Create a shadow to the left
&::before {
background: linear-gradient(to right, transparent, $header__background-color 2rem);
content: '';
display: inline-block;
height: calc(100% - #{$header--visible__link--active__border-top-width});
left: 0;
position: absolute;
top: $header--visible__link--active__border-top-width;
width: 100%;
}
}
// Hide overflow content
.spark-header__list--overflow {
overflow: hidden;
}
// Navigation
.spark-header__nav.active {
// Disable background gray-out
&::before {
display: none;
}
}
}
// Inside the placeholder, the animation wrapper should display the same as the menu list
.spark-header__placeholder .spark-menu > .spark-menu__animation-wrapper {
display: block;
flex: 0 1 auto;
overflow: hidden;
white-space: nowrap;
}
// Extra small breakpoint and condensed class should be condensed
&[data-breakpoint='xs']:not(.spark-header__placeholder),
&.spark-header--condensed:not(.spark-header__placeholder) {
height: 5rem;
.spark-header__nav{
height: 5rem;
}
.spark-header__logo {
padding: calc(1.5rem - 4px) 0 calc(1.5rem + 4px);
}
.spark-header__title {
line-height: 2rem;
padding: calc(1.5rem - #{$header__border-top-width + 2px}) 2rem calc(1.5rem - 2px);
}
// @deprecated changing `login` to `sign-in`, will remove `login` in 2.0.0
.spark-header__login,
.spark-header__sign-in {
.spark-menu__list-link {
max-width: 40vw;
overflow: hidden;
padding: calc(1.5rem - #{$header__border-top-width}) 2rem 1.5rem 4rem;
text-overflow: ellipsis;
}
}
.spark-menu__header {
.spark-menu__title {
padding: 1.5rem 2rem 1.5rem 0;
}
.spark-header__logout {
padding: 1rem 2rem;
}
}
}
// Condensed styles which should apply to the placeholder
&.spark-header--condensed {
// Also visible, squish the buttons
&.spark-header--visible {
.spark-header__logo {
padding: calc(1.5rem - #{$header__border-top-width}) 0 1.5rem 2.5rem;
}
// @deprecated changing `login` to `sign-in`, will remove `login` in 2.0.0
.spark-header__login,
.spark-header__sign-in {
.spark-menu__list-link {
padding: calc(1.5rem - #{$header__border-top-width / 2}) 2rem calc(1.5rem - #{$header__border-top-width / 2}) 4rem;
line-height: 2rem;
}
}
.spark-menu {
// Shorter list items
> .spark-menu__list > .spark-menu__list-item > .spark-menu__list-link,
> .spark-menu__list > .spark-menu__list-item > .spark-menu__list-links .spark-menu__list-link,
> .spark-menu__list > .spark-menu__list-item > .spark-menu__list-links .spark-menu__list-expand,
> .spark-menu__animation-wrapper > .spark-menu__list > .spark-menu__list-item > .spark-menu__list-link,
> .spark-menu__animation-wrapper > .spark-menu__list > .spark-menu__list-item > .spark-menu__list-links .spark-menu__list-link,
> .spark-menu__animation-wrapper > .spark-menu__list > .spark-menu__list-item > .spark-menu__list-links .spark-menu__list-expand {
padding-bottom: calc(1.5rem - #{$header__border-top-width / 2});
padding-top: calc(1.5rem - #{$header__border-top-width / 2});
}
// Adjust the max height of the dropdown
> .spark-menu__list > .spark-menu__list-item > .spark-menu__list,
> .spark-menu__animation-wrapper > .spark-menu__list > .spark-menu__list-item > .spark-menu__list {
max-height: calc(100vh - 5rem);
}
// More button
> .spark-menu__list > .spark-header__more,
> .spark-menu__animation-wrapper > .spark-menu__list > .spark-header__more {
// Move the list up to cover the more button
.spark-menu__list {
padding: .5rem 0;
top: #{$header__border-top-width / 2};
}
}
}
}
}
// When we are extra small
&[data-breakpoint='xs']:not(.spark-header__placeholder) {
// Adjust the width of the toggle since we're hiding the logo.
.spark-header__toggle {
width: 4rem;
}
// Hide any logo
.spark-header__logo > * {
display: none;
}
// Menu becomes full screen width
.spark-header__menu {
width: 100vw;
}
}
.spark-header--fixed
Fixed header. The JS will make this transition to a condensed header on scroll.
left: 0;
position: fixed;
top: 0;
width: 100%;
transition-delay: 0;
transition-duration: 400ms;
transition-property: height;
transition-timing-function: $ease-in-out-quint;
.spark-menu__list-link,
.spark-header__title,
.spark-header__nav,
.spark-header__logo {
transition-duration: 400ms;
transition-property: padding, line-height, height;
transition-timing-function: $ease-in-out-quint;
}
.spark-header--no-logo
A header w/ no logo needs to have an angle on the toggle
.spark-header__toggle {
margin-right: 2rem;
position: relative;
width: 5rem;
z-index: 5;
&::after {
@include angle($header__logo--sabre__background-color);
position: absolute;
right: 0;
top: 50%;
transform: translate(100%, -50%);
z-index: 0;
}
}
.spark-header__logo
Logo
background-color: $header__logo--sabre__background-color;
border-bottom: none;
display: inline-block;
flex: none;
line-height: 0;
margin-bottom: 0;
margin-right: 2rem;
padding: calc(2.5rem - #{$header__border-top-width}) 1.5rem 2.5rem;
padding-right: 0;
position: relative;
z-index: 10;
.spark-logo {
position: relative;
z-index: 5
}
&::after {
@include angle($header__logo--sabre__background-color);
position: absolute;
right: 0;
top: 50%;
transform: translate(100%, -50%);
z-index: 0;
}
.spark-header__toggle
Hamburger menu
background-color: $header__logo--sabre__background-color;
// When a toggle precedes a logo, no left padding on the logo
& + .spark-header__logo {
padding-left: 0;
}
.spark-header__title
Title text. Width needs to fill out the space to prevent the sign in button from being large
border-top: $header__border-top-width solid $header__border-top-color;
color: $header__title__color;
display: inline-block;
@include fontsize($header__title__font-size);
font-family: $header__title__font-family;
font-weight: $header__title__font-weight;
line-height: 2rem;
margin-bottom: 0;
padding: calc(2.5rem - #{$header__border-top-width + 2px}) 2rem 2.5rem;
white-space: nowrap;
width: 100%;
&:hover, &:active {
color: $header__title__color;
}
&:focus {
border-bottom: 0;
padding-bottom: 2rem;
}
.spark-header__more
The 'more' button
// Uppercase the text
.spark-menu__list {
text-transform: uppercase;
}
.spark-header__placeholder
A placeholder version of the nav. This is used by the JS to compute the size of list items. It should be absolutely positioned to remove it from the flow and hidden.
left: 0;
opacity: 0;
overflow: hidden;
position: absolute;
top: -100%;
width: 100%;
z-index: -10;
.spark-header__list--overflow
Overflow nav list container
overflow: auto;
width: 100%;
.spark-header__login, .spark-header__sign-in
changing login
to sign-in
, will remove login
in 2.0.0
The sign in button
margin-left: -1.5rem;
overflow: visible !important;
.spark-menu__list-link {
background-color: $header__sign-in__background-color;
border-top: $header__border-top-width solid $header__border-top-color;
display: block;
font-weight: 400;
line-height: 2rem;
margin-bottom: 0;
padding: calc(2.5rem - #{$header--visible__link--active__border-top-width}) 2rem 2.5rem 4rem;
text-transform: none;
white-space: nowrap;
&:active,
&:focus,
&:focus:hover,
&:hover {
background-color: $header__sign-in__background-color;
color: $header__sign-in--hover__color;
}
// Angle
&::after {
@include angle($header__background-color);
left: 0;
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
}
.spark-header__logout
The logout button
background-color: transparent;
border: none;
color: $header__title__color;
flex-shrink: 0;
font-size: 1rem;
line-height: 3rem;
padding: 2rem;
text-transform: uppercase;
.spark-header__list-cta
A special call to action button at the bottom of a header dropdown. Should be hidden by default, visible only when the header itself is "visible".
border-top: $menu__list--second__border-top;
display: none;
padding: 0;
text-align: center;
.spark-header__list-cta-link
Link component of a header CTA
display: block;
@include fontsize($header__list-cta__font-size);
font-weight: 500;
line-height: 2rem;
padding: 1rem 0;
text-indent: 0;
text-transform: uppercase;
// Override default link behavior
&:focus {
padding: 1rem 0;
}
.spark-header__search
Search input
align-items: center;
display: flex;
width: 100%;
// Search icon should be inline
.spark-menu__list-link {
display: inline-block;
flex: 0 1 auto;
line-height: 1rem;
padding: 1rem;
width: auto;
[class^='#{$prefix}-icon-'] {
color: $header__search__color;
@include fontsize(delta);
}
}
// Hide the expand button when we aren't displayed horizontally.
> .spark-expand__toggle {
display: none;
}
.spark-header__search-form
Show the form all the time
border-bottom: 1px solid $header__search__border-color;
display: block;
flex: 1;
position: relative;
width: 100%;
// Hide the drop shadow
&::before {
display: none;
}
// Input field
.spark-input {
.spark-input__field {
background-color: $header__search__background-color;
border: none;
color: $header__search--active__color;
@include fontsize(eta);
height: 3rem;
padding: .5rem 3rem .5rem 2rem;
transition-duration: 100ms;
transition-property: height, padding;
transition-timing-function: $ease-in-out-quint;
@include placeholder {
color: $header__search__color;
}
~ .spark-header__search-icon {
display: block;
}
~ .spark-input__clear {
display: none;
right: .25rem;
}
&:focus {
background-color: $header__search--active__background-color;
border: none;
height: 4rem;
padding-bottom: 1rem;
padding-top: 1rem;
@include placeholder {
color: $input__placeholder__color;
}
}
}
&.active,
.spark-input__field:focus {
.spark-header__search-icon,
& ~ .spark-header__search-icon {
display: none;
}
.spark-input__clear,
& ~ .spark-input__clear {
display: block;
}
}
}
components/icon
csss
[data-icon], .spark-icon, [class^='#{$prefix}-icon-'], [class*=' #{$prefix}-icon-']
Icons
display: inline-block;
font-size: 1.333333333rem;
line-height: 1.333333333rem;
vertical-align: middle;
components/input-group
csss
.spark-input-group
Group input elements together by flexing their space
display: flex;
.spark-input-group__item
An item in a group should take up as little space as possible
flex: 0 1 auto;
text-align: left;
// Reset margins for some items so things line up
&.spark-input {
margin: 0;
}
// Buttons should have a higher z-index so they sit above other content
&.spark-btn {
border: none;
margin: 0;
position: relative;
z-index: 20;
&::before {
box-shadow: none;
}
}
// Remove radius from internal fields
&.spark-btn,
.spark-btn,
&.spark-input .spark-input__field,
.spark-input .spark-input__field,
&.spark-input__fields,
.spark-input__fields {
border-radius: 0;
}
.spark-input-group__item--primary
Primary item should take up most of the space
flex: 1 1 100%;
components/label
csss
.spark-label
Form input label
overflow: hidden;
text-overflow: ellipsis;
transition: color 250ms $ease-in-out-quint;
white-space: nowrap;
.spark-label__highlight
An element which should be highlighed when the label's corresponding element is selected
transition: color 250ms $ease-in-out-quint;
components/link
csss
a, .spark-link
Any anchor tag treated as a link If no class is added to an anchor element, will default to the same styling as a primary link
border-bottom: $link--default__border;
color: $link--default__color;
cursor: pointer;
font-weight: $body__font-weight--normal;
position: relative;
text-decoration: none;
transition: color 150ms, background-color 150ms, padding-bottom 150ms, border-bottom 150ms;
&:hover, &:active, &:focus {
text-decoration: none;
}
&:hover,
&.hover{
color: $link--default--hover__color;
}
&:active,
&.active {
color: $link--default--active__color;
}
// Hide the default focus outline. This takes the form of an underline.
&:focus,
&.focus {
border-bottom: $link--default--focus__border;
outline: 0;
&:hover,
&.hover {
border-bottom-color: $link--default--hover__color;
}
&:active,
&.active {
border-bottom-color: $link--default--active__color;
}
}
// Disabled link.
// This will overwrite any other color and styling
&[disabled],
&.disabled {
color: $link--disabled__color !important;
cursor: not-allowed !important;
pointer-events: none !important;
text-decoration: line-through;
&:focus,
&.focus {
border-bottom: $link--disabled--focus__border;
}
}
.spark-link--secondary
Secondary Link
border-bottom: $link--secondary;
color: $link--secondary__color;
&:hover{
color: $link--secondary--hover__color;
}
&:active {
color: $link--secondary--active__color;
}
&:focus {
border-bottom: $link--secondary--focus__border;
}
components/list
csss
ul
Unordered list
li {
list-style-type: disc;
}
ol
Ordered list
li {
list-style-type: decimal;
}
ul, ol
Style list items
li {
line-height: 2rem;
list-style-position: outside;
margin: 1rem 0;
}
.spark-list-item--no-bullet
Hide the bullet on an item
list-style-type: none;
padding-left: 0;
text-indent: 0;
.spark-list--no-bullets
Hide the bullets on a whole list
li {
@extend .spark-list-item--no-bullet;
}
components/logo
csss
.spark-logo
An element to contain a logo
background-size: cover;
display: inline-block;
.spark-logo--sabre
Sabre-specific logo
background-image: url('#{$image-directory}/sabre-logo-white.svg');
&.spark-logo--lg {
height: 60px;
width: 254px;
}
&.spark-logo--md {
height: 36px;
width: 152px;
}
&.spark-logo--sm {
height: 24px;
width: 102px;
}
&.spark-logo--xs {
height: 18px;
width: 77px;
}
.spark-logo--sabre-red
Red Sabre logo
background-image: url('#{$image-directory}/sabre-logo-red.svg');
components/menu
components/message
csss
.spark-message
Default message
align-items: top;
display: flex;
margin-bottom: 1rem;
width: 100%;
// When this is a panel-level message
&.spark-panel {
// Content needs to flex
.spark-panel__content {
display: flex;
// Need the first child to sit snuggly next to the heading
p:first-of-type {
padding-top: 0;
}
}
}
.spark-message__icon, .spark-message__content
Flex content for horizontal alignment.
flex: 0 1 auto;
.spark-message__icon
Icon shouldn't grow too large and should have spacing around it
border-radius: 50%;
display: inline-block;
height: 3rem;
min-height: 3rem;
min-width: 3rem;
padding: 0 .5rem;
position: relative;
text-align: center;
width: 3rem;
// Center the icon content
&::before {
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
.spark-message__content
Message content
line-height: 2rem;
padding: .5rem;
.spark-message__icon + .spark-message__content
Content which follows an icon should have an additional left margin
margin-left: .5rem;
.spark-message__heading
A heading
font-family: $heading__font-family;
@include fontsize(epsilon);
font-weight: 500;
line-height: 2rem;
margin: 0;
padding: 0;
.spark-message--lg
A large message
// Icon should be much bigger
.spark-message__icon {
@include fontsize(delta);
height: 5rem;
min-height: 5rem;
min-width: 5rem;
padding: 0 1rem;
width: 5rem;
}
.spark-message--info
Info message
background-color: $message--info__background-color;
color: $message--info__color;
.spark-message__icon {
background-color: $message--info__icon__background-color;
border: $message--info__icon__border;
color: $message--info__icon__color;
}
h1, h2, h3, h4, h5, h6, b, strong {
color: $message--info__heading__color;
}
.spark-message--warning
Warning message
background-color: $message--warning__background-color;
color: $message--warning__color;
.spark-message__icon {
background-color: $message--warning__icon__background-color;
border: $message--warning__icon__border;
color: $message--warning__icon__color;
}
h1, h2, h3, h4, h5, h6, b, strong {
color: $message--warning__heading__color;
}
.spark-message--error
Error message
background-color: $message--error__background-color;
color: $message--error__color;
.spark-message__icon {
background-color: $message--error__icon__background-color;
border: $message--error__icon__border;
color: $message--error__icon__color;
}
h1, h2, h3, h4, h5, h6, b, strong {
color: $message--error__heading__color;
}
.spark-message--success
Success message
background-color: $message--success__background-color;
color: $message--success__color;
.spark-message__icon {
background-color: $message--success__icon__background-color;
border: $message--success__icon__border;
color: $message--success__icon__color;
}
h1, h2, h3, h4, h5, h6, b, strong {
color: $message--success__heading__color;
}
components/modal
csss
.spark-modal-open
Window class to disable scrolling when the modal is open.
overflow: hidden;
.spark-modal
Default modal
align-items: center;
display: flex;
flex-direction: row;
height: 100%;
left: 0;
min-width: 100%;
opacity: 0;
overflow: hidden;
position: fixed;
top: 0;
transition-delay: 0ms, 250ms;
transition-duration: 250ms, 0ms;
transition-property: opacity, visibility;
transition-timing-function: $ease-out-quint;
visibility: hidden;
z-index: 99999;
// Gray background (not visible by default)
&::before {
@extend %gray-out;
}
// Modal is open
&.active {
opacity: 1;
transition-delay: 0ms;
visibility: visible;
// Show the gray background
&::before {
@extend %gray-out--active;
}
// Slide up the content
.spark-modal__content {
transform: translateY(0);
}
}
.spark-modal--fullscreen-xs .spark-modal__header
A modal that is fullscreen on mobile should have no padding for the bottom of the heading on desktop. This is weird but necessary to properly space the header and the content.
padding-bottom: 0;
.spark-modal__scroll
Scroll wrapper. This allows us to center the modal but stop it from being cropped when the window is too short to fit it all.
max-height: 100%;
overflow: auto;
position: relative;
width: 100%;
z-index: 100;
.spark-modal__content
Content container
background-color: $modal__background-color;
border-radius: $modal__border-radius;
margin: 4rem auto;
padding: 0;
position: relative;
transform: translateY(50%);
transition: transform 250ms $ease-out-quint;
z-index: 100;
.spark-modal__full-width-content
Full width content
margin-left: -2rem;
margin-right: -2rem;
.spark-modal__header
Header should have less bottom padding
padding-bottom: 1rem;
padding-top: 2rem;
h1, h2, h3, h4, h5, h6 {
margin-bottom: 0;
}
.spark-modal__body
Body content
padding-bottom: 1rem;
padding-top: 1rem;
// If the body is the first child, give it extra padding
&:first-child {
padding-top: 2rem;
}
// If the body is the last child, give it extra padding
&:last-child {
padding-bottom: 2rem;
}
.spark-modal__body--snug
Snug content
padding-top: 0;
padding-bottom: 0;
.spark-modal__close
Close button
bottom: 100%;
color: $modal__close__color;
padding: 1rem;
position: absolute;
right: -1rem;
transition: transform 100ms $ease-out-quint;
&:hover,
&:focus {
color: $modal__close__color;
transform: scale(1.1);
}
.spark--modal-open
Applied to the body when the modal is open to kill scrollbars on the body
overflow: hidden;
.spark-modal
Adjust the spacing for the modal on xs
padding: 2rem;
// Stack message
.spark-message {
align-items: center;
flex-direction: column;
text-align: center;
}
// Space out heading and content
.spark-message__heading {
margin-bottom: .5rem;
}
.spark-modal__full-width-content
Full width content modal content should be snug
margin-left: -1rem;
margin-right: -1rem;
.spark-modal--fullscreen-xs
A modal which takes up the full screen on xs breakpoint
padding: 0;
// Make the scroll take up all the vertical space it can
.spark-modal__scroll {
height: 100%;
}
// Flex the content so we have a fixed header and footer
.spark-modal__content {
border-radius: 0;
display: flex;
flex-direction: column;
height: 100%;
margin: 0;
width: 100%;
}
// Reposition the close button
.spark-modal__close {
bottom: auto;
color: $modal--fullscreen-xs__close__color;
top: .75rem;
right: 0;
z-index: 100;
&:hover {
transform: none;
}
}
// Add padding to the bottom of the header since we removed it for desktop
.spark-modal__header {
padding-bottom: 1rem;
}
// Make the body scroll and flex
.spark-modal__body {
flex: 1;
overflow: auto;
position: relative;
z-index: 0;
}
// Padding for the content areas
.spark-modal__header,
.spark-modal__body,
.spark-modal__footer {
padding-left: 1rem;
padding-right: 1rem;
}
// When the body is snug on the bottom, remove additional padding to the top of the footer if the nav is the first element
// @deprecated Removing `.spark-modal__nav` in 2.0.0
.spark-modal__body--snug ~ .spark-modal__footer .spark-modal__nav,
.spark-modal__body--snug ~ .spark-modal__footer .spark-btn-group,
.spark-modal__body--snug-bottom ~ .spark-modal__footer .spark-modal__nav,
.spark-modal__body--snug-bottom ~ .spark-modal__footer .spark-btn-group {
margin-top: 0;
}
// Border for the header
.spark-modal__header {
border-bottom: $modal--fullscreen-xs__border;
padding-top: 1rem;
}
// Fixed footer w/ border
.spark-modal__footer {
background-color: $modal__background-color;
border-top: $modal--fullscreen-xs__border;
flex: 0 0 auto;
padding-bottom: 1rem;
width: 100%;
z-index: 5;
}
components/number-selector
csss
.spark-number-picker, .spark-number-selector
Removing .spark-number-picker
in 2.0.0
A horizontal number picker
display: inline-block;
height: 7rem;
position: relative;
label,
.spark-label {
color: $number-selector__label__color;
display: block;
@include fontsize($number-selector__label__font-size);
font-weight: $number-selector__label__font-weight;
line-height: 1rem;
padding-bottom: 1rem;
}
// Number input
input {
-moz-appearance: textfield;
background-color: $number-selector__background-color;
border: $number-selector__border;
border-radius: 0;
color: $number-selector__color;
float: left;
@include fontsize(zeta)
line-height: 3rem;
height: 5rem;
margin: 0 -1px;
padding: 1rem 0;
text-align: center;
width: 5rem;
// Remove the increment and decrement UI
&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
// Focus state
&:focus {
background-color: $input--active__background-color;
border: $input--active__border;
outline: 0;
}
&:disabled {
background-color: $input--disabled__background-color;
border-color: $white;
border-width: 0px 2px;
color: $input--disabled__color;
}
}
.spark-number-picker__down, .spark-number-picker__up, .spark-number-selector__down, .spark-number-selector__up
Removing .spark-number-picker
in 2.0.0
Increment/decrement buttons
float: left;
height: 5rem;
padding-left: 0;
padding-right: 0;
width: 5rem;
&::after {
@extend .spark-icon;
@extend .spark-icon--fill;
}
.spark-number-picker__down, .spark-number-selector__down
Removing .spark-number-picker
in 2.0.0
Decrement
border-radius: $number-selector__border-radius 0 0 $number-selector__border-radius;
&::after {
@extend .spark-icon-math-subtract::before;
}
.spark-number-picker__up, .spark-number-selector__up
Removing .spark-number-picker
in 2.0.0
Increment
border-radius: 0 $number-selector__border-radius $number-selector__border-radius 0;
&::after {
@extend .spark-icon-math-add::before;
}
components/pagination
csss
.spark-pagination
Pagination navigation
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
// List of pages
&__pages {
display: flex;
flex: 0 1 auto;
margin: 1rem;
}
// Items in the pages list
&__item,
&__ellipsis,
&__arrow {
align-items: center;
border: 3px solid transparent;
color: $pagination__item__color;
display: flex;
flex-wrap: wrap;
font-weight: 400;
height: 3rem;
padding: 0;
position: relative;
text-indent: 0;
transition-property: color, background-color, border-color;
z-index: 5;
&[disabled] {
text-decoration: none;
}
&:hover {
color: $pagination__item--hover__color;
}
&:focus,
&:active,
&:focus:active,
&:focus:hover {
&:not([disabled]) {
border: 3px solid $pagination__item--focus__border-color;
padding-bottom: 0;
}
}
}
// A page link
&__item {
background-color: $pagination__item__background-color;
border-radius: 1.5rem;
flex: 0 0 auto;
height: 3rem;
justify-content: center;
min-width: 3rem;
padding: 0 .5rem;
&--active {
background-color: $pagination__item--active__background-color;
color: $pagination__item--active__color;
font-weight: 500;
&:hover {
color: $pagination__item--active__color;
}
}
}
// Truncation mark
&__ellipsis {
color: inherit;
z-index: 0;
}
// Directional arrow
&__arrow {
border-radius: .25rem;
flex: 0 1 auto;
overflow: hidden;
padding: 0 1rem;
&::before,
&::after {
align-items: center;
display: flex;
flex: 1 0 auto;
font-family: $icon__font-family--line;
height: 100%;
}
&--previous {
margin-left: -4px;
&::before {
content: '\f10c';
justify-content: flex-end;
margin-right: .5rem;
}
}
&--next {
align-content: flex-end;
flex-wrap: wrap-reverse;
margin-right: -4px;
&::after {
content: '\f10d';
justify-content: flex-start;
margin-left: .5rem;
}
}
}
// Text inside an arrow to hide when we run out of room
&__arrow-text {
align-items: center;
display: flex;
flex: 0 1 auto;
height: 100%;
}
&__results {
align-items: center;
display: flex;
flex: 0 0 auto;
}
// Select input of results
&__per-page {
flex: 0 0 auto;
margin: 0 1rem;
.spark-select {
margin-bottom: 0;
}
}
// Results summary
&__summary {
flex: 0 0 auto;
margin: 1rem;
}
.spark-pagination__ellipsis + .spark-pagination__item--active
Space ellipsis around active items
margin-left: 1rem;
components/panel
csss
.spark-panel
Panel content container
background-color: $panel__background-color;
border: $panel__border;
border-radius: $panel__border-radius;
padding: 0 !important;
width: 100%;
// Don't round the top corners when we're a list of tab panels
&.spark-tabs__panels {
border-radius: 0 0 $panel__border-radius $panel__border-radius;
border: $tabs--active__border;
border-top: none;
}
.spark-panel__header
Panel header
padding: 1.5rem 2rem;
position: relative;
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
}
.spark-panel__masthead
Panel masthead image
// Image fills the whole width
img {
display: block;
width: 100%;
}
// Position numerals in the top corner
.spark-numerals {
left: 2rem;
position: absolute;
top: 2rem;
width: calc(100% - 3rem);
z-index: 10;
}
// Add some black on top of the masthead image to allow the copy to pop
&::after {
box-shadow: $panel__masthead__box-shadow;
content: '';
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 5;
}
.spark-panel__content
Panel body content
color: $color-body;
@include clearfix();
padding: 2rem;
width: 100%;
// No padding if we're also table content
&.spark-table__scroll,
&table {
padding: 0;
}
// No bottom margin on the last element
>:last-child {
margin-bottom: 0;
}
.spark-panel--expand
An expandable panel
border: none;
overflow: hidden;
// Heading has a bottom border to separate from content as well as a down arrow.
.spark-panel__header {
background: $panel__background-color;
border: $panel__border;
border-bottom: $panel__border;
border-radius: $panel__border-radius;
box-shadow: $panel--expand__content__shadow;
color: $panel--expand__header__color;
cursor: pointer;
padding-right: 4.25rem;
position: relative;
transition-duration: 250ms;
transition-property: color, border, border-radius;
transition-timing-function: $ease-in-out-quint;
user-select: none;
width: 100%;
z-index: 10;
// Headings inherit color instead of being slate blue.
h1, h2, h3, h4, h5, h6 {
color: inherit;
}
// Focus state
&:focus {
outline: none;
&::after {
border: $btn--icon--focus__border;
}
}
// Toggle arrow
&::after {
@extend [class^='#{$prefix}-icon-']::before;
@extend .spark-icon-arrow-chevron-down::before;
border: $btn--icon__border;
border-radius: $btn--icon__border-radius;
font-size: 2.25rem;
margin-right: -.25rem;
position: absolute;
right: 2rem;
top: 50%;
transform: translateY(-50%) rotate(0deg);
transform-origin: center center;
transition: transform 250ms $ease-in-out-quint;
}
// Darken on hover
&:hover {
border: $panel--expand__header--hover__border;
color: $panel--expand__header--hover__color;
z-index: 100;
}
}
// A flexible version of the header
.spark-panel__header--flex {
display: flex;
padding-left: 1rem;
}
// Body has a drop shadow and is hidden by default
.spark-panel__content {
border: $panel__border;
border-top: none;
display: none;
position: relative;
z-index: 0;
}
// Show the expanded state
&.expanded {
// No rounded borders on the bottom
.spark-panel__header {
border-radius: $panel__border-radius $panel__border-radius 0 0;
}
// Heading arrow rotates
.spark-panel__header::after {
transform: translateY(-50%) rotate(180deg);
}
// Body becomes visible
.spark-panel__content {
display: block;
}
}
.spark-panel--card
Card panel
h6 {
margin-bottom: .75rem;
}
h4 + h6 {
margin-top: -.25rem;
}
.spark-panel__content--lg
Large panel content
padding: 4rem;
.spark-panel-group
A group of panels that should be stacked
// No borders
.spark-panel--expand,
.spark-panel--expand:hover,
.spark-panel--expand.expanded {
.spark-panel__header {
border-radius: 0;
border-left: 0;
border-right: 0;
}
}
// Don't double up on borders
.spark-panel--expand + .spark-panel--expand {
margin-top: -1px;
}
components/popover
csss
.spark-popover
Popovers are like tooltips
@extend .spark-tooltip;
// But they don't show on hover like a tooltip (unless we're active)
&:hover:not(.popover-active) {
.spark-popover__content,
[class*='spark-popover__content--'],
.spark-popover__content--left,
.spark-popover__content--right,
.spark-popover__content--bottom {
transform: none;
display: none;
}
}
// Show the popover when marked as active
&.popover-active {
@extend .spark-tooltip.tooltip-active;
}
.popover-active
Show popover content when it's marked as active
&.spark-popover__content,
&[class*='#{$prefix}-popover__content--'] {
&.animate {
opacity: 1;
transform: translate(0, 0);
display: block;
}
}
.spark-popover__content, [class*='#{$prefix}-popover__content--']
Popover content containers
@extend .spark-tooltip__content;
background-color: $popover__background-color;
border: $popover__border;
border-radius: $popover__border-radius;
box-shadow: $popover__box-shadow;
color: $popover__color;
@include fontsize($popover__font-size);
line-height: inherit;
font-weight: inherit;
left: 0;
margin-top: -1rem;
text-transform: none;
transition-duration: 200ms;
transition-property: opacity, transform;
transition-timing-function: $ease-in-out-quint;
// Since these open on click and not hover, remove the transparent box
&::before {
display: none;
}
// Hide the after content because the caret is manually inserted
&::after {
display: none;
}
&.measure {
display: block;
}
&.animate {
visibility: visible;
opacity: 0;
display: block;
}
// The caret has to be a real element instead of a pseudo one so that we
// can set its position in JS.
.spark-popover__caret {
@extend .spark-tooltip__content::after;
background-color: $popover__background-color;
border-top: $popover__border;
border-right: $popover__border;
transition-duration: 100ms;
transition-property: left, right, bottom, top;
}
// Caret on the left
&[data-anchor='left'] {
.spark-popover__caret {
left: 2rem;
}
}
// Caret on the right
&[data-anchor='right'] {
.spark-popover__caret {
left: auto;
right: 1rem;
}
}
// Caret on top
&[data-anchor='top'] {
.spark-popover__caret {
top: 2rem;
}
}
// Caret on the bottom
&[data-anchor='bottom'] {
.spark-popover__caret {
bottom: 1rem;
top: auto;
}
}
.spark-popover__content, [class*='#{$prefix}-popover__content--'], .spark-popover__content[class*='col-'], [class*='#{$prefix}-popover__content--'][class*='col-']
Win the padding battle over column sizing
padding: 1rem 2rem;
.spark-popover__content--left
Content to the left of the popover trigger
@extend .spark-tooltip__content--left;
margin-top: 0;
margin-left: -1rem;
right: auto;
transform: translate(.5rem, 0);
.spark-popover__caret {
@extend .spark-tooltip__content--left::after;
margin-left: 0;
}
.spark-popover__content--right
Content to the right of the popover trigger
@extend .spark-tooltip__content--right;
margin-top: 0;
margin-left: 1rem;
transform: translate(-.5rem, 0);
.spark-popover__caret {
@extend .spark-tooltip__content--right::after;
margin-right: 0;
}
.spark-popover__content--bottom
Content on the bottom of the popover trigger
@extend .spark-tooltip__content--bottom;
bottom: auto;
margin-top: 1rem;
transform: translate(0, -.5rem);
.spark-popover__caret {
@extend .spark-tooltip__content--bottom::after;
}
.spark-popover__content--top
Content on the top of the popover trigger
@extend .spark-tooltip__content--top;
transform: translate(0, .5rem);
.spark-popover__close
A close button for the popover
@extend .spark-icon;
color: inherit;
position: absolute;
right: 2rem;
top: 2rem;
&::before {
@extend .spark-icon-close::before;
}
&:hover {
color: $popover--hover__color;
}
.spark-popover__close--lg
A large close button for the popover
font-size: 2rem;
line-height: 2rem;
.spark-popover__close + h1, .spark-popover__close + h2, .spark-popover__close + h3, .spark-popover__close + h4, .spark-popover__close + h5, .spark-popover__close + h6
A heading after a close button should have some padding on the right
padding-right: 4rem;
.spark-popover__list
A list of popover actions
color: $popover--color;
@include fontsize($popover__font-size);
margin: -1rem -2rem;
padding: .5rem 0;
.spark-popover__list-item
A popover list item
@extend .spark-list-item--no-bullet;
margin: 0;
line-height: initial;
position: relative;
z-index: 5;
&:hover {
color: $popover--hover__color;
}
.spark-popover__list-link
A link inside a popover list item
border: none;
color: inherit;
display: block;
font-size: inherit;
line-height: 3rem;
padding: 0 1rem;
text-decoration: none;
&:hover {
background-color: $popover--hover__background-color;
color: inherit;
}
.spark-popover-group
A group of popovers
@include clearfix();
// Children should be grouped together
.spark-popover {
float: left;
margin-right: 1rem;
&:last-child {
margin-right: 0;
}
}
components/progress-indicator
csss
.spark-progress
Progress indicator.
position: relative;
max-width: 100%;
min-height: 12rem;
min-width: 12rem;
width: 12rem;
// A progress meter inside an indicator.
// @todo is there a reason this is here and not in the root?
.spark-progress__meter {
height: 12rem;
width: 12rem;
}
// Remove default styling from a `<progress>` element.
progress {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-color: transparent;
border: none;
color: transparent;
position: absolute;
display: none;
// Hide the Firefox styling
&::-moz-progress-bar {
background-color: transparent;
}
// Hide the webkit styling
&::-webkit-progress-bar,
&::-webkit-progress-value {
background-color: transparent;
}
}
// When the progress element has a value, color the text.
progress[value] ~ .spark-progress__text {
color: $progress-indicator--indeterminate__text__color;
font-weight: 300;
// Show the states.
.spark-progress__states {
display: block;
}
}
// When the progress element has a value, don't spin indeterminately.
progress[value] ~ .spark-progress__meter::after {
animation: none;
}
.spark-progress__meter
The progress meter.
border-radius: 50%;
background-color: $progress-indicator__meter__background-color;
display: inline-block;
max-width: 100%;
overflow: hidden;
position: relative;
// White part in the middle.
&::before {
background-color: $progress-indicator__background-color;
border: $progress-indicator__meter__border;
border-radius: 50%;
content: '';
display: inline-block;
height: calc(100% - 2rem);
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
transition: background-color 100ms ease-in-out;
width: calc(100% - 2rem);
z-index: 5;
}
// The filled color
&::after {
animation: spin 800ms ease 0s infinite;
background-color: $progress-indicator__fill__background-color;
border-radius: 100% 0 0 0;
content: '';
display: inline-block;
height: 50%;
left: 0;
position: absolute;
transform: rotate(90deg);
transform-origin: bottom right;
transition: transform 100ms linear;
width: 50%;
}
svg.spark-progress__meter
An SVG version of the progress loader. This is created by the JS component.
background-color: transparent;
// Colored fill
.spark-progress__fill {
stroke: $progress-indicator__fill__background-color;
stroke-dasharray: 792;
stroke-dashoffset: 0;
transition-duration: 100ms;
transition-timing-function: $ease-in-out-quint;
transition-property: stroke, stroke-dashoffset;
// Stop animation. Usually when the value is resetting.
&.no-animation {
transition-duration: 0ms;
}
}
// Gray track
.spark-progress__track {
stroke: $progress-indicator__meter__background-color;
}
// Gray stroke
.spark-progress__border {
stroke: $progress-indicator__meter__border-color;
}
// Hide the white fill and track pseudo elements
&::before,
&::after {
display: none;
}
.spark-progress__text
The progress text
color: $progress-indicator__text__color;
@include fontsize(epsilon);
font-weight: 400;
.spark-progress__states
A <ul>
of text items to show at different percentages.
@include fontsize(delta);
line-height: 1.75rem;
margin-bottom: -1rem;
margin-top: .5rem;
padding: 2rem;
position: relative;
z-index: 5;
width: 100%;
li {
@extend .spark-list-item--no-bullet;
color: $progress-indicator__states__color;
@include fontsize(zeta);
margin: 0;
left: 2rem;
line-height: initial;
opacity: 0;
position: absolute;
top: 50%;
transform: translateY(50%);
transition-duration: 250ms;
transition-property: opacity transform;
transition-timing-function: $ease-in-out-quint;
white-space: nowrap;
width: calc(100% - 4rem);
&.active {
opacity: 1;
transform: translateY(-50%);
}
}
.spark-progress--integrated
A progress indicator with an integrated value and copy.
// The loading text. Centered.
.spark-progress__text {
@include fontsize(epsilon);
left: 0;
margin-bottom: 0;
padding: 2rem;
position: absolute;
text-align: center;
top: 50%;
transform: translateY(-50%);
z-index: 10;
width: 100%;
}
// Align the states
.spark-progress__states {
text-align: center;
}
.spark-progress--horizontal
A horizontal indicator treatment
align-items: center;
display: flex;
flex-direction: row;
width: auto !important;
// Align the text to the left and make sure it always comes after the meter.
.spark-progress__text {
flex: 0 1 auto;
order: 2;
text-align: left;
}
// Make the value text boldish
.spark-progress__value {
font-weight: 400;
}
// Align the states to the left and tighten up w/ the text
.spark-progress__states {
margin-bottom: 0;
margin-top: 0;
padding-left: 0;
padding-top: 0;
li {
left: 0;
}
}
// Make sure the meter comes first and add some spacing between it and the text.
.spark-progress__meter {
flex: 0 1 auto;
margin-right: 2rem;
order: -1;
}
.spark-progress--lg
A large progress indicator
min-height: 22.5rem;
min-width: 22.5rem;
width: 22.5rem;
// Make the progress text lighter
.spark-progress__text {
font-weight: 300;
}
// When the progress element has a value
progress[value] ~ .spark-progress__text {
@include fontsize(mega);
}
// Make the meter larger.
.spark-progress__meter {
height: 22.5rem;
width: 22.5rem;
// White part in the middle.
&::before {
height: calc(100% - 2rem);
width: calc(100% - 2rem);
}
}
// Bigger text.
.spark-progress__text {
@include fontsize(delta);
}
// Bigger state text.
.spark-progress__states {
@include fontsize(delta);
margin-bottom: -2.5rem;
li {
white-space: normal;
}
}
.spark-progress--sm
A small progress indicator
height: 5rem;
width: 5rem;
// Smaller meter.
.spark-progress__meter {
height: 5rem;
width: 5rem;
/// White part in the middle.
&::before {
height: calc(100% - 1rem);
width: calc(100% - 1rem);
}
}
.spark-progress--xs, .spark-progress.spark-btn
An extra small or button progress indicator
.spark-progress__meter {
height: 2rem;
width: 2rem;
// Fill part in the middle.
&::before {
border: none;
height: calc(100% - .5rem);
width: calc(100% - .5rem);
}
}
.spark-progress.spark-btn
A button progress indicator
@extend .spark-btn:hover;
align-items: center;
align-content: center;
cursor: wait;
height: auto;
min-height: 0;
padding-left: 4.75rem;
width: auto;
// Hide the bottom border
&::before {
display: none;
}
// Space out the meter from the text and change the track color
.spark-progress__meter {
background-color: $progress-indicator--btn--default__track__background-color;
left: 2.25rem;
position: absolute;
top: 50%;
transform: translateY(-50%);
// Circle color
&::before {
background-color: $btn--default--hover__background-color;
}
// Fill color
&::after {
background-color: $btn--default__color;
}
}
// Default active state
&:active {
background-color: $btn--default--hover__background-color;
}
// Secondary button
&.spark-btn--secondary {
background-color: $btn--secondary--hover__background-color;
border: $btn--secondary--hover__border;
color: $btn--secondary--hover__color;
.spark-progress__meter {
background-color: $progress-indicator__meter__background-color;
&::before {
background-color: $btn--secondary--hover__background-color;
}
&::after {
background-color: $progress-indicator__fill__background-color;
}
}
&:active {
background-color: $btn--secondary--hover__background-color;
border: $btn--secondary--hover__border;
color: $btn--secondary--hover__color;
}
}
// Secondary button
&.spark-btn--view-more {
background-color: $btn--view-more--active__background-color;
border: $btn--view-more--active__border;
color: $btn--view-more--active__color;
.spark-progress__meter {
background-color: $progress-indicator__meter__background-color;
&::before {
background-color: $btn--view-more--active__background-color;
}
&::after {
background-color: $progress-indicator__fill__background-color;
}
}
&.active,
&:active,
&.active:hover,
&:active:hover,
&.focus,
&:focus,
&.focus:hover,
&:focus:hover,
&.hover,
&:hover {
background-color: $btn--view-more--active__background-color;
border: $btn--view-more--active__border;
color: $btn--view-more--active__color;
}
}
// Alternate button
&.spark-btn--alt {
background-color: $btn--alt--hover__background-color;
border: $btn--alt--hover__border;
.spark-progress__meter {
background-color: $progress-indicator--btn--alt__track__background-color;
&::before {
background-color: $btn--alt--hover__background-color;
}
&::after {
background-color: $btn--alt__color;
}
}
&:active {
background-color: $btn--alt--hover__background-color;
border: $btn--alt--hover__border;
}
}
.spark-progress--lazy-load
Progress indicator for lazy loading
// Color the text
.spark-progress__text {
color: $btn--view-more--active__color;
font-weight: $btn--default__font-weight;
text-transform: uppercase;
}
&.spark-progress--disabled {
// Hide the progress meter
.spark-progress__meter {
display: none;
}
// Change to a disabled color
.spark-progress__text {
color: $btn--default--disabled__color;
font-weight: $btn--default__font-weight;
text-transform: uppercase;
}
}
components/radio
csss
.spark-radio
Wrapper around the radio input. Generally a label so that clicking on any part of the container triggers the radio.
// Placeholder disc
.spark-radio__box {
border-radius: 50%;
height: 2rem;
width: 2rem;
&::before {
background-color: $checkbox--active__icon__color;
border: none;
border-radius: 50%;
height: .75rem;
margin: 0;
width: .75rem;
}
}
components/scroll-to-top
csss
.spark-scroll-to-top
A button that anchors itself to the bottom of the page.
background-color: $scroll-to-top__background-color;
border: $scroll-to-top__border;
border-radius: 50%;
bottom: 2rem;
box-shadow: $scroll-to-top__box-shadow;
cursor: pointer;
height: 6rem;
opacity: 0;
position: fixed;
right: 2rem;
transform: scale(0);
transition-duration: 100ms, 100ms, 100ms, 100ms, 100ms, 200ms, 200ms; // have to put the second 200ms here because transform gets expanded to -webkit-transform below, and w/o both values things get REALLY weird.
transition-property: background-color, border-color, box-shadow, opacity, visibility, transform;
transition-timing-function: linear;
visibility: hidden;
width: 6rem;
z-index: 1000;
&__icon {
border-top: 1px solid $scroll-to-top__color;
display: inline-block;
height: 2.5rem;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
transition: border-color 100ms linear;
width: 2.15rem;
&::before {
border-left: 1px solid $scroll-to-top__color;
border-top: 1px solid $scroll-to-top__color;
content: '';
display: inline-block;
height: 1.25rem;
left: 50%;
position: absolute;
top: .5rem;
transform: translateX(-50%) rotate(45deg);
transition: border-color 100ms linear;
width: 1.25rem;
}
&::after {
background-color: $scroll-to-top__color;
height: 2rem;
content: '';
display: inline-block;
left: 50%;
position: absolute;
top: calc(.5rem - 2px);
transform: translateX(-50%);
transition: background-color 100ms linear;
width: 1px;
}
}
&:hover {
border: $scroll-to-top--hover__border;
.spark-scroll-to-top__icon {
border-top-color: $scroll-to-top--hover__color;
&::before {
border-left-color: $scroll-to-top--hover__color;
border-top-color: $scroll-to-top--hover__color;
}
&::after{
background-color: $scroll-to-top--hover__color;
}
}
}
&:focus {
box-shadow: $scroll-to-top--focus__box-shadow;
outline: 0;
}
&:active {
background-color: $scroll-to-top--active__background-color;
box-shadow: $scroll-to-top--active__box-shadow;
}
&[disabled] {
background-color: $scroll-to-top--disabled__background-color;
border: $scroll-to-top--disabled__border;
box-shadow: $scroll-to-top--disabled__box-shadow;
cursor: not-allowed;
.spark-scroll-to-top__icon {
border-top-color: $scroll-to-top--disabled__color;
&::before {
border-left-color: $scroll-to-top--disabled__color;
border-top-color: $scroll-to-top--disabled__color;
}
&::after{
background-color: $scroll-to-top--disabled__color;
}
}
}
&.visible {
opacity: 1;
transform: scale(1);
visibility: visible;
}
&.at-bottom {
position: absolute;
}
components/select-input
csss
.spark-select
Wrapper for a select element. Generally should be a <label>
.
background-color: $select__background-color;
border-radius: $select__border-radius;
color: $select__color;
display: inline-block;
margin-bottom: 1rem;
padding: 0;
position: relative;
transition-duration: 100ms;
transition-property: border;
transition-timing-function: $ease-in-out-quint;
width: 100%;
// On hover
&:hover {
background-color: $select--hover__background-color;
.spark-label {
&::after {
border-top-color: $select--hover__arrow__background-color;
}
}
.spark-select__input:not([disabled]) {
border: $select--hover__border;
color: $select--hover__color;
}
}
// When we are active
&.active {
background-color: $select--active__background-color;
.spark-select__input {
border: $select--active__border;
color: $select--active__color;
}
.spark-label {
color: $select--active__label__color;
}
// Used with multiple selects to create a fill behind the label text
.spark-select__input[multiple] ~ .spark-label::before {
background-color: $select--active__background-color;
}
}
// When the container has a state, show it below.
&[data-error],
&[data-success],
&[data-warning] {
border-radius: $select__border-radius $select__border-radius 0 0;
.spark-select__input {
border-radius: $select__border-radius $select__border-radius 0 0;
}
// Fade in and scale up the message.
.spark-select__message {
display: block;
opacity: 1;
position: relative;
transform: scaleY(1);
transition-delay: 100ms, 0ms, 0ms;
transition-duration: 0ms, 100ms, 100ms;
}
&:hover:not(.has-value) {
.spark-label {
color: $select--state__label__color;
}
}
}
// When the container has an error state, show it below.
&[data-error] {
.spark-select__input,
.spark-select__input:hover {
border-color: $color-state-danger;
color: $color-state-danger;
}
.spark-select__message {
background-color: $color-state-danger;
}
}
// When the container has an warning state, show it below.
&[data-warning] {
.spark-select__input,
.spark-select__input:hover {
border-color: $color-state-warning;
color: $color-state-warning;
}
.spark-select__message {
background-color: $color-state-warning;
}
}
// When the container has an success state, show it below.
&[data-success] {
.spark-select__input,
.spark-select__input:hover {
border-color: $color-state-success;
color: $color-state-success;
}
.spark-select__message {
background-color: $color-state-success;
}
}
.spark-select__input
Remove the default styling from a select box
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-color: transparent;
border: $select__border;
border-radius: $select__border-radius;
color: $select__selected-option__color;
cursor: pointer;
display: block;
font-family: inherit;
font-size: inherit;
line-height: 1.35rem;
margin: 0;
padding: 1.75rem 1rem;
position: relative;
transition-duration: 100ms;
transition-property: color;
transition-timing-function: $ease-in-out-quint;
width: 100%;
z-index: 5;
// Remove outline on focus
&:focus {
outline: 0;
}
// Remove inner focus dotted line from Firefox
&::-moz-focus-inner {
border: 0;
outline: 0;
}
// Remove IE caret
&::-ms-expand {
display: none;
}
// A basic version of the select w/o a label
.spark-select--no-label & {
padding: 1rem 2rem 1rem 1rem !important;
line-height: 2rem;
}
.spark-select.disabled .spark-select__input, .spark-select__input:disabled
When disabled, gray out the select input.
background-color: $select--disabled__background-color;
border: $select--disabled__border;
color: $select--disabled__color;
cursor: not-allowed;
.spark-select.disabled .spark-label, .spark-select__input:disabled ~ .spark-label
When disabled, make the label non-actionable.
color: $select--disabled__color;
cursor: not-allowed;
z-index: 10;
&::after {
border-top-color: $select--disabled__color;
}
.spark-select, .spark-select-group
Labels inside of a group or select
// Position the label below the actual select box
.spark-label {
border: 1px solid transparent;
box-sizing: border-box;
color: $select__label__color;
font-weight: $select__font-weight;
height: 5rem;
left: 0;
padding: 1.375rem 2rem 0 1rem;
position: absolute;
top: 0;
transition-duration: 100ms;
transition-property: font-size, color, padding;
transition-timing-function: $ease-in-out-quint;
z-index: 0;
width: 100%;
// Add the caret
&::after {
border-color: transparent;
border-style: solid;
border-top-color: $select__arrow__background-color;
border-width: .5rem;
border-top-width: .75rem;
content: '';
display: inline-block;
position: absolute;
right: 1rem;
top: 1.55em;
transition-duration: 100ms;
transition-property: color, top;
transition-timing-function: $ease-in-out-quint;
}
}
.spark-select__message
The select message is the same as the input message
@extend .spark-input__message;
.spark-select-group, .spark-select.active, .spark-select.has-value
Adjust the padding on inputs inside of active selects or a select group
// Add padding on the top so the label has somewhere to sit
.spark-select__input:not([multiple]) {
padding: 2.75rem 2rem .75rem 1rem;
}
// Slide the label up
.spark-label {
@include fontsize(eta);
padding-top: .5rem;
&::after {
border-top-color: $select--has-value__arrow__background-color;
top: 2.1rem;
}
}
.spark-select-group
A group of select inputs should fit all its content
display: flex;
position: relative;
// Flex each input.
.spark-select {
flex: 1;
margin-bottom: 0;
// Don't slide the label text up
.spark-label {
color: $select__label__color;
font-size: inherit;
line-height: 1.1rem;
padding: 2.75rem 2rem .75rem 1rem;
// Scale the caret
&::after {
top: 2.75rem;
transform: scale(.75);
}
}
// Add borders to the first and last two select elements (to account for a label)
&:first-child:not(:hover):not(.active) .spark-select__input {
border-left: $select__border;
}
&:last-child:not(:hover):not(.active) .spark-select__input,
&:nth-last-child(2):not(:hover):not(.active) .spark-select__input {
border-right: $select__border;
}
// Round the edges of the first and last select
&:first-child .spark-select__input {
border-radius: $select__border-radius 0 0 $select__border-radius;
}
&:last-child .spark-select__input,
&:nth-last-child(2) .spark-select__input {
border-radius: 0 $select__border-radius $select__border-radius 0;
}
// Hide the label of an input when that input has a value. We have to do this
// because
&.has-value {
.spark-label {
color: transparent;
transition-duration: 0ms;
}
}
}
// Remove borders from the inputs
.spark-select__input {
border-left-color: transparent;
border-right-color: transparent;
border-radius: 0;
padding-top: 2.25rem;
}
// The top-level label should have no caret
> .spark-label {
&::after {
display: none;
}
}
// A top-level label that follows any select that is active
.spark-select.active ~ .spark-label {
color: $select--active__label__color;
}
components/select-input--multiple
csss
.spark-select--multiple
A multiple select input
position: relative;
display: block;
background: $select--multiple__background-color;
&.spark-select--multiple--no-title {
.spark-select--multiple__input {
padding: 0;
}
}
&.active {
background: $select--multiple__background-color;
.spark-select--multiple__label {
border-top: $select--multiple--active__border;
border-left: $select--multiple--active__border;
border-right: $select--multiple--active__border;
}
}
&:not(.spark-select--multiple--no-title) {
.spark-select--multiple__input:not([disabled]) {
border-top: $select--multiple__border--input-top !important;
}
}
.spark-select--multiple__input {
padding: 0;
position: relative;
z-index: 8;
background: transparent;
display: block;
width: 100%;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
outline: none;
border-left: $select--multiple__border;
border-right: $select--multiple__border;
border-bottom: $select--multiple__border;
border-radius: $select--multiple__border-radius;
color: $select--multiple__color;
@include fontsize(zeta);
&:hover:not([disabled]) {
~ .spark-select--multiple__label {
border-left: $select--multiple--hover__border;
border-right: $select--multiple--hover__border;
}
border: $select--multiple--hover__border;
}
&:not([disabled]) + .spark-select--multiple__label:hover {
border-left: $select--multiple--hover__border;
border-right: $select--multiple--hover__border;
cursor: pointer;
}
&[disabled] {
overflow-y: hidden;
background-color: $select--multiple--disabled__background-color;
border: $select--multiple--disabled__border;
color: $select--multiple--disabled__color;
padding-top: 5rem;
cursor: not-allowed;
~ .spark-select--multiple__label {
background-color: $select--multiple--disabled__background-color;
border: $select--multiple--disabled__border;
color: $select--multiple--disabled__color;
cursor: not-allowed;
z-index: 8;
&::after {
border-top-color:$select--multiple--disabled__color;
}
}
}
&:not([disabled]) {
&[data-error],
&[data-success],
&[data-warning] {
border-radius: $select--multiple__border-radius $select--multiple__border-radius 0 0;
// Fade in and scale up the message.
& ~ .spark-select__message {
display: block;
opacity: 1;
position: relative;
transform: scaleY(1);
transition-delay: 100ms, 0ms, 0ms;
transition-duration: 0ms, 100ms, 100ms;
}
}
&[data-error] {
&,
&:hover {
&, ~ .spark-select--multiple__label, ~ .spark-select--multiple__label:hover {
border-color: $color-state-danger;
}
}
~ .spark-select__message {
background-color: $color-state-danger;
}
}
// When the container has an warning state, show it below.
&[data-warning] {
&,
&:hover {
&, ~ .spark-select--multiple__label, ~ .spark-select--multiple__label:hover {
border-color: $color-state-warning;
}
}
~ .spark-select__message {
background-color: $color-state-warning;
}
}
// When the container has an success state, show it below.
&[data-success] {
&,
&:hover {
&, ~ .spark-select--multiple__label, ~ .spark-select--multiple__label:hover {
border-color: $color-state-success;
}
}
~ .spark-select__message {
background-color: $color-state-success;
}
}
}
}
.spark-select--multiple__label {
@include fontsize(zeta);
position: absolute;
top: 0;
left: 0;
border-top: $select--multiple__border;
border-left: $select--multiple__border;
border-right: $select--multiple__border;
border-bottom: $select--multiple__border;
border-radius: $select--multiple__border-radius $select--multiple__border-radius 0 0;
padding: 2rem 1rem;
z-index: 6;
background: $select--multiple__background-color;
width: 100%;
line-height: 1rem;
@include media-breakpoint-down(xs) {
&::after {
border-color: transparent;
border-style: solid;
border-top-color: $select__arrow__background-color;
border-width: .5rem;
border-top-width: .75rem;
content: '';
display: inline-block;
position: absolute;
right: 1rem;
top: 1.55em;
transition-duration: 100ms;
transition-property: color, top;
transition-timing-function: $ease-in-out-quint;
}
}
.spark-select--multiple__label--small {
@include fontsize(eta);
}
}
&.has-value.active {
.spark-select--multiple__label {
color: $select--multiple--active__label__color;
}
}
.spark-select--multiple__input[disabled] {
optgroup,
option {
color: $select--multiple--disabled__color;
}
}
optgroup,
option {
padding: .75rem;
@include fontsize(eta);
font-family: $body__font_family;
font-weight: 300;
&:checked {
font-weight: bold;
}
}
components/slider
csss
.spark-slider, .spark-slider--integrated
Sliders without a visible input
position: relative;
// Hide the input
input {
opacity: 0;
position: absolute;
visibility: hidden;
}
.spark-slider--integrated
Slider container with the big handle
// Special inset shadow for the handle
.spark-slider__handle {
border-radius: 2rem;
bottom: 0;
box-shadow: $slider__handle__box-shadow;
height: 4rem;
margin-left: -2rem;
margin-top: -2rem;
overflow: hidden;
top: auto;
width: 4rem;
// Show value in the handle
&::before {
content: attr(data-prefix) '' attr(data-value);
position: relative;
text-align: center;
transform: none;
transition: transform 100ms $ease-in-out-quint;
width: 100%;
z-index: 5;
}
// Disc to show when we're active
&::after {
background-color: $slider--active__handle__disc__background-color;
border-radius: 2rem;
content: '';
height: 4rem;
left: 0;
margin: -1px;
opacity: 0;
position: absolute;
top: 3.5rem;
transition: opacity 100ms $ease-in-out-quint;
width: 4rem;
z-index: 0;
}
// Hover border color
&:hover {
box-shadow: $slider--integrated--hover__handle__box-shadow;
}
// Grow the handle when we're focused or active
&:focus,
&:active,
&.active {
border: $slider--active__handle__border;
box-shadow: $slider--integrated--active__handle__box-shadow;
height: 7.5rem;
&::before {
transform: translateY(-1.75rem);
}
&::after {
opacity: 1;
}
}
}
// Stop the handle from popping up when the input is disabled.
input:disabled ~ .spark-slider__controls .spark-slider__handle {
&:focus,
&:active,
&.active {
height: 4rem;
transform: none;
&::before {
transform: none;
}
&::after {
opacity: 0;
}
}
}
.spark-slider, .spark-slider--integrated, .spark-slider--input
Disabled state on all versions of the slider.
// Gray out the handle and track
input:disabled,
input:disabled ~ .spark-slider__controls .spark-slider__handle,
input:disabled ~ .spark-slider__controls .spark-slider__track::before {
background-color: $slider--disabled__track__background-color;
border: $slider--disabled__track__border;
box-shadow: none;
color: $slider--disabled__color;
cursor: not-allowed;
}
// Don't show the track filling
input:disabled ~ .spark-slider__controls .spark-slider__track-fill {
display: none;
}
.spark-slider, .spark-slider--input, .spark-range-slider
Sliders with a visible input and the range slider
position: relative;
// Number input that is on the right of a regular slider and beneath on the range slider
input {
-moz-appearance: textfield;
background-color: $input__background-color;
border: $input__border;
border-radius: $input__border-radius;
color: $input__color;;
@include fontsize(zeta);
font-weight: 400;
text-align: center;
transition: all 100ms $ease-in-out-quint;
// Remove the increment and decrement UI
&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
&:focus {
background-color: $input--active__background-color;
border: $input--active__border;
outline: 0;
}
}
// Make the controls a little taller than default
.spark-slider__controls {
height: 3rem;
}
// Handles are smaller
.spark-slider__handle {
// Don't show the extra nubbin
&::after {
display: none;
}
// Don't raise up when active
&:focus,
&:active,
&.active {
&::before {
transform: none;
}
}
}
.spark-slider--input
Slider with a number input
display: flex;
flex-flow: wrap;
// The input has to come before the other elements so our :disabled ~ selectors work,
// but it needs to appear after so we take advantage of flexbox.
input {
flex-grow: 1;
order: 2;
width: 0;
}
// If there is a label, it needs to take up the entire line by itselft
label,
.spark-label {
flex-basis: 100%;
}
// Make the controls 4x as big as the input.
.spark-slider__controls {
flex-grow: 4;
margin-right: 2rem;
order: 1;
}
// When the slider is active, gray out the input
&.active {
input {
background-color: $input--active__background-color;
border: $input--active__border;
}
}
.spark-range-slider
A range of sliders
display: flex;
flex-flow: row wrap;
// Have to specify the input height because they're now on their own
// line and don't get the height of the slider__controls.
input {
flex-grow: 4;
height: 3rem;
order: 4;
width: 0;
}
// Set width to 100% so the inputs get pushed to a new line
.spark-slider__controls {
margin-bottom: 1rem;
order: 1;
width: 100%;
}
// Divider that goes between input elements.
.spark-range-slider__input-divider {
align-items: center;
display: inline-block;
flex-grow: 1;
font-weight: 400;
line-height: 3rem;
order: 4;
text-align: center;
&::before {
content: '—';
}
}
// Kind of a hacky solution for styling the active state
// on an input when the handle is moving. This assumes there
// will never be more than 5 items on a track.
&[data-active-index='0'] input:nth-of-type(1),
&[data-active-index='1'] input:nth-of-type(2),
&[data-active-index='2'] input:nth-of-type(3),
&[data-active-index='3'] input:nth-of-type(4),
&[data-active-index='4'] input:nth-of-type(5) {
background-color: $input--active__background-color;
border: $input--active__border;
}
// If all the inputs are disabled
&.all-disabled {
// Gray out the track
.spark-slider__controls .spark-slider__track::before {
background-color: $input--disabled__background-color;
border: $input--disabled__border;
box-shadow: none;
color: $input--disabled__color;
cursor: not-allowed;
}
// Hide the track fill
.spark-slider__controls .spark-slider__track-fill {
display: none;
}
}
// Gray out the handles and inputs
input:disabled,
.spark-slider__handle.disabled {
background-color: $input--disabled__background-color;
border: $input--disabled__border;
box-shadow: none;
color: $input--disabled__color;
cursor: not-allowed;
}
.spark-slider__controls
The handle(s) and track
height: 4rem;
position: relative;
.spark-slider__handle
Handle for the slider
align-items: center;
background-color: $slider__handle__background-color;
border: $slider__handle__border;
border-radius: 1rem;
box-orient: vertical;
box-shadow: $slider__handle__box-shadow;
color: $slider__handle__color;
cursor: pointer;
display: flex;
@include fontsize(zeta);
font-weight: 400;
height: 2rem;
justify-content: center;
margin-left: -1rem;
margin-top: -1rem;
padding: 0;
position: absolute;
top: 50%;
transform-origin: center bottom;
transition-duration: 100ms;
transition-property: background-color, border, box-shadow, color, transform, height, border-radius;
transition-timing-function: $ease-in-out-quint;
width: 2rem;
z-index: 5;
// Remove outline because the handle is a button.
// @todo this should have some kind of different styling most likely.
&:focus {
outline: 0;
}
// Hover background and border color
&:hover {
background-color: $slider--hover__handle__background-color;
border: $slider--hover__handle__border;
box-shadow: $slider--hover__handle__box-shadow;
color: $slider--hover__handle__color;
}
// Change color on active
&:focus,
&:focus:hover,
&:active,
&:active:hover,
&.active {
background-color: $slider--active__handle__background-color;
border: $slider--active__handle__border;
box-shadow: $slider--active__handle__box-shadow;
color: $slider--active__handle__color;
}
&:focus,
&:focus:hover {
box-shadow:$slider--default--focus__box-shadow;
}
.spark-slider__track
Track
border-radius: .75rem;
content: '';
cursor: pointer;
display: inline-block;
height: .5rem;
left: 0;
margin-top: -.25em;
overflow: hidden;
position: absolute;
top: 50%;
transition: all 100ms $ease-in-out-quint;
width: 100%;
z-index: 0;
.spark-slider__track::before, .spark-slider__track-fill
Common rules for the track and the fill
box-sizing: border-box;
content: '';
display: inline-block;
height: 100%;
left: 0;
position: absolute;
top: 0;
.spark-slider__track::before
The gray base of the track
background-color: $slider__track__background-color;
border: $slider__track__border;
border-radius: .75rem;
width: 100%;
.spark-slider__track-fill
The colored part of the track
background-color: $slider__track-fill__background-color;
border: $slider__track-fill__border;
border-radius: .75rem 0 0 .75rem;
width: 0;
.spark-slider--secondary
Secondary slider styles
// Handle for the slider
.spark-slider__handle {
background-color: $slider--secondary__handle__background-color;
border: $slider--secondary__handle__border;
box-shadow: $slider--secondary__handle__box-shadow;
color: $slider--secondary__handle__color;
// Hover background and border color
&:hover {
background-color: $slider--secondary--hover__handle__background-color;
border: $slider--secondary--hover__handle__border;
box-shadow: $slider--secondary--hover__handle__box-shadow;
color: $slider--secondary--hover__handle__color;
}
// Change color on active
&:focus,
&:focus:hover,
&:active,
&:active:hover,
&.active {
background-color: $slider--secondary--active__handle__background-color;
border: $slider--secondary--active__handle__border;
box-shadow: $slider--secondary--active__handle__box-shadow;
color: $slider--secondary--active__handle__color;
}
}
// The gray base of the track
.spark-slider__track::before {
background-color: $slider--secondary__track__background-color;
border: $slider--secondary__track__border;
}
// The colored part of the track
.spark-slider__track-fill {
background-color: $slider--secondary__track-fill__background-color;
border: $slider--secondary__track-fill__border;
}
// Integrated value style
&.spark-slider--integrated {
// Special inset shadow for the handle
.spark-slider__handle {
box-shadow: $slider--secondary__handle__box-shadow;
// Disc to show when we're active
&::after {
background-color: $slider--secondary--active__handle__disc__background-color;
}
// Hover border color
&:hover {
box-shadow: $slider--secondary__hover__handle__box-shadow;
}
// Grow the handle
&:focus,
&:active,
&.active {
background-color: $slider--secondary__handle__background-color;
border: $slider--secondary--active__handle__border;
box-shadow: $slider--secondary--active__handle__box-shadow;
}
}
}
.spark-slider, .spark-slider--input, .spark-slider--integrated, .spark-slider--secondary, .spark-range-slider
Slider label
margin-bottom: 1rem;
label,
.spark-label {
color: $slider__label__color;
@include fontsize($slider__label__font-size);
font-weight: $slider__label__font-weight;
line-height: 1rem;
padding-bottom: 1rem;
}
components/splash-screen
csss
.spark-splash-screen
Wrapper should always be at least the height of the viewport
background-color: $splash-screen__background-color;
display: flex;
flex: 1 1 auto;
flex-direction: column;
overflow: hidden;
position: relative;
// Raise all direct children above the angle
> * {
position: relative;
z-index: 5;
}
// 24º angle
&::before {
background-color: $splash-screen__angle__background-color;
bottom: 0;
content: '';
display: block;
height: 15000px;
left: 10%;
position: absolute;
top: 100%;
transform: rotate(-24deg);
transform-origin: top left;
width: 15000px;
z-index: 0;
}
// Vignette
&::after {
background: radial-gradient(ellipse at center, rgba(0,0,0,0) 30%,rgba(0,0,0,0.3) 100%);
content: '';
display: block;
left: 0;
height: 100%;
top: 0;
position: fixed;
width: 100%;
z-index: 0;
}
.spark-splash-screen__content
Take up as much space as possible
align-items: center;
color: $splash-screen__color;
display: flex;
flex: 1 0 auto;
padding: 2rem;
// A panel inside of the content has a stroke
.spark-panel {
border: $splash-screen__panel__border;
}
// Panel content has more padding
> .spark-splash-screen__center > .spark-panel__content {
padding: 3rem;
}
.spark-splash-screen__heading
Heading text
color: inherit;
margin-top: 1rem;
.spark-splash-screen__center
Center content vertically and horizontally
margin: 0 auto;
text-align: center;
width: 100%;
.spark-splash-screen__progress
Progress indicator inside splash screen
margin: 4rem auto 0;
min-width: auto;
.spark-splash-screen--sign-in
Sign-in Page
// Additional padding for the content
> .spark-splash-screen__center > .spark-panel__content {
margin: 0 auto;
padding: 5rem 3rem;
}
.spark-splash-screen__help {
clear: both;
float: left;
}
// A progress indicator inside a splash screen is hidden by default within a sign in screen
.spark-splash-screen__progress {
display: none;
}
// Show the progress indicator when loading
&.loading {
.spark-splash-screen__form {
display: none;
}
.spark-splash-screen__progress {
display: block;
}
}
components/step-indicator
csss
.spark-step-indicator
Step indicator.
max-height: 100%;
max-width: 100%;
display: flex;
flex-direction: column;
components/table
csss
.spark-table
Table container
// Tables should fill the whole width
table {
background-color: $table__background-color;
border-collapse: collapse;
border: 1px solid $table__border-color;
border-radius: $panel__border-radius;
margin-bottom: 5rem;
overflow: hidden;
width: 100%;
}
// Pad out each cell
.spark-table-heading__piece,
th,
td {
box-sizing: border-box;
height: 5rem;
padding-left: 2rem;
padding-right: 2rem;
position: relative;
vertical-align: middle;
// Allow wrapping of cell content
&.wrap {
white-space: normal;
}
// Pad out the right of the last child
&:last-child {
padding-right: 1.5rem;
}
// Negative margin on large icons so the cells have the right height
.spark-icon--lg {
margin: -1rem 0;
}
// Remove default input styling
input:not([type="checkbox"]),
select {
background-color: transparent;
color: inherit;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
transition-duration: 100ms;
transition-property: color, background-color, border-colo;
&:focus {
outline: 0;
}
}
// Messaging
&[data-error],
&[data-info],
&[data-warning],
&[data-success] {
padding-left: 5rem;
position: relative;
.spark-table__status-icon {
font-family: $icon__font-family--fill;
font-size: 2rem;
left: 2rem;
line-height: 5rem;
position: absolute;
top: 0;
}
.spark-table__status-wrapper {
input:not([type="checkbox"]),
select {
margin-left: .75rem;
margin-top: calc(1px + .25rem);
width: calc(100% - 1.5rem);
}
}
input:not([type="checkbox"]),
select {
&:focus {
~ .spark-table__status-message {
display: block;
}
}
}
}
&[data-info] {
// Icon
.spark-table__status-icon {
color: $message--info__icon__background-color;
&::before {
content: '\f188';
}
}
// Text
.spark-table__status-message {
background-color: $message--info__message__background-color;
color: $message--info__message__color;
}
}
/// Warning message
&[data-warning] {
// Icon
.spark-table__status-icon {
color: $message--warning__icon__background-color;
&::before {
content: '\f104';
}
}
// Text
.spark-table__status-message {
background-color: $message--warning__message__background-color;
color: $message--warning__message__color;
}
}
/// Error message
&[data-error] {
// Icon
.spark-table__status-icon {
color: $message--error__icon__background-color;
&::before {
content: '\f11a';
}
}
// Text
.spark-table__status-message {
background-color: $message--error__message__background-color;
color: $message--error__message__color;
}
}
/// Success message
&[data-success] {
// Icon
.spark-table__status-icon {
color: $message--success__icon__background-color;
&::before {
content: '\f178';
}
}
// Text
.spark-table__status-message {
background-color: $message--success__message__background-color;
color: $message--success__message__color;
}
}
}
// Reset input styles for non-spreadsheet tables
&:not(.spark-table--spreadsheet) {
th, td {
// Text inputs get a border
input:not([type="checkbox"]) {
border: 1px solid transparent;
border-radius: .25rem;
margin: -1rem -1.25rem;
padding: 1.25rem 1rem;
width: calc(100% + 2.5rem);
}
}
}
// Messaging for full-sized tables
&:not(.spark-table--spreadsheet):not(.spark-table--condensed) {
th, td {
&[data-error],
&[data-info],
&[data-warning],
&[data-success] {
> input:not([type="checkbox"]),
> select {
margin-left: -4.25rem;
width: calc(100% + 5.5rem);
}
input:not([type="checkbox"]),
select {
padding-left: 4rem;
}
.spark-table__status-message {
border-radius: 0 0 .25rem .25rem;
margin-left: .75rem;
margin-top: -.5rem;
padding: .75rem;
width: calc(100% - 1.5rem);
}
}
}
}
// Add input borders for non-spreadsheet and editable row tables
&:not(.spark-table--spreadsheet):not(.spark-table--edit-rows),
&.spark-table--edit-rows .editing {
th, td {
// Text inputs get a border
input:not([type="checkbox"]) {
border: 1px solid $table__input__border-color;
&:hover {
background-color: $table__input--hover__background-color;
border: 1px solid $table__input--hover__border-color;
color: $table__input--hover__color;
}
&:focus:not([readonly]) {
background-color: $table__input--editing__background-color;
border: 1px solid $table__input--editing__border-color;
color: $table__input--focus__color;
}
}
&[data-error] {
input:not([type="checkbox"]) {
&,
&:hover,
&:focus {
border-color: $message--error__icon__background-color;
}
}
}
&[data-warning] {
input:not([type="checkbox"]) {
&,
&:hover,
&:focus {
border-color: $message--warning__icon__background-color;
}
}
}
&[data-success] {
input:not([type="checkbox"]) {
&,
&:hover,
&:focus {
border-color: $message--success__icon__background-color;
}
}
}
&[data-info] {
input:not([type="checkbox"]) {
&,
&:hover,
&:focus {
border-color: $message--info__icon__background-color;
}
}
}
}
}
// Fill the background color of the whole heading
thead {
background-color: $table__head__background-color;
tr {
border-bottom: 1px solid $table__head__border-color;
}
// Color all `<th>` when we hover. This will color all elements except that
// which is also being hovered over.
tr:hover {
th:not(.spark-table__disabled-column) {
color: $table__head--hover__color;
}
// When a heading is hovered over, maintain its color.
th:hover:not(.spark-table__disabled-column) {
color: $table__head__color;
}
}
}
// Active and hover states for rows in the body
tbody {
position: relative;
tr {
cursor: pointer;
transition-duration: 100ms;
transition-property: background;
&:hover {
background: linear-gradient(to bottom, $table--hover__background-color 0,$table--hover__background-color 100%);
color: $table--hover__color;
}
&.active {
background: linear-gradient(to bottom, $table--active__background-color 0,$table--active__background-color 100%);
border-bottom: 1px double $table--active__border-color;
border-top: 1px double $table--active__border-color;
color: $table--active__color;
td {
border-right-color: $table--active__border-color;
}
}
&:first-child:not(:hover):not(.active) {
background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0,rgba(0,0,0,0) 1rem);
}
}
}
// Table headings
.spark-table-heading__piece,
th {
border-right: 1px solid $table__head__border-color;
color: $table__head__color;
cursor: default;
@include fontsize($table__head__font-size);
font-weight: $table__head__font-weight;
text-transform: $table__head__text-transform;
transition: color 100ms $ease-in-out-quint;
white-space: nowrap;
}
// Sortable items should have a pointer cursor
.spark-table-heading__piece,
th[data-sort] {
cursor: pointer;
}
// Sortable rows
.spark-table-heading__piece[data-sort='desc'],
.spark-table-heading__piece[data-sort='asc'],
th[data-sort='desc'],
th[data-sort='asc'] {
font-weight: $table__head--sorted__font-weight;
// Arrow icon
&::after {
@extend [class^='#{$prefix}-icon-']::before;
@extend .spark-icon-arrow-basic-down::before;
@extend .spark-icon--fill::before;
transform: rotate(0deg);
transition: transform 100ms $ease-in-out-quint;
}
// Animate the arrow changing direction on hover
&:hover {
&::after {
transform: rotate(-180deg);
}
}
}
// Ascending arrow
.spark-table-heading__piece[data-sort="asc"],
th[data-sort="asc"] {
&::after {
transform: rotate(-180deg);
}
&:hover {
&::after {
transform: rotate(0deg);
}
}
}
// Add a bottom border to each cell in each row.
tr {
border-top: 1px solid $table__border-color;
border-bottom: 1px solid $table__border-color;
transition-duration: 100ms;
transition-property: background-color, border, color;
transition-timing-function: $ease-in-out-quint;
td, th, .spark-table-heading__piece {
transition-duration: 100ms;
transition-property: border, color;
transition-timing-function: $ease-in-out-quint;
// First item in a row should have a left border
&:first-child {
border-left: 1px solid transparent;
}
// Last item in a row should have a left border
&:last-child {
border-right: 1px solid transparent;
}
}
}
// Grouped headings
th.spark-table-heading {
padding: 0;
&[colspan="2"] {
.spark-table-heading__piece {
width: 50%;
}
}
}
.spark-table-heading__group {
display: flex;
flex-wrap: wrap;
text-align: center;
}
// Full width piece of the heading group
.spark-table-heading__full {
background-color: $table__head__border-color;
border-right: none;
flex-shrink: 0;
font-weight: 400;
height: 50%;
text-transform: none;
width: 100%;
}
// Piece of the heading group
.spark-table-heading__piece {
flex: 1 1 auto;
height: 50%;
&:last-child {
border-right: none;
}
}
.spark-table__no-border
No border on a cell
border: none !important;
.spark-table__header
Table heading. Distribute the items and align the nav to the right.
align-items: center;
display: flex;
width: 100%;
.spark-table__title {
flex: 1;
}
.spark-table__nav {
flex: 1;
}
.spark-table__scroll
Wrap a <table>
el in a scroll container so that it overflows gracefully.
overflow-x: auto;
// When it's also panel content, no padding.
&.spark-panel__content {
padding: 0;
}
.spark-table__checkbox
The checkbox in a row
line-height: 1;
width: 1rem;
.spark-table__row
Table rows with specific styles
&--align-top {
td {
padding-bottom: 1.5rem;
padding-top: 1.5rem;
vertical-align: top;
}
}
.spark-table__actions, .spark-table__actions--icons
Adjust margins on buttons inside of the actions group.
white-space: nowrap;
width: 2rem;
// Actionable looking buttons
[class*='spark-btn'] {
cursor: pointer;
}
.spark-table__actions--icons
A group of icons
.spark-btn--icon {
margin: -1rem 0;
line-height: 3rem;
}
.spark-table__edit-actions
Actions to display when editing a row
display: flex;
height: 100%;
margin: 0;
min-height: calc(5rem - 1px);
opacity: 0;
position: absolute;
right: 0;
top: 0;
transform: translateX(100%);
transition-duration: 100ms;
transition-property: opacity, transform;
visibility: hidden;
width: auto;
// Drop shadow
&::before {
background: $table__edit-actions__background;
content: '';
display: block;
height: 100%;
left: -.5rem;
position: absolute;
width: 1rem;
z-index: 0;
}
// Make buttons full height
.spark-btn {
border: none;
border-radius: 0;
flex: 0 1 auto;
height: 100%;
margin: 0;
min-width: 6rem;
&::before {
box-shadow: none;
}
}
.spark-table-heading
A grouped heading
padding: 0;
@for $i from 2 to 10 {
&[colspan="#{$i}"] {
.spark-table-heading__piece {
width: 100% / $i;
}
}
}
.spark-table__status-wrapper
Wrap the table cell contents in a div so positioning works properly in IE
display: block;
height: 100%;
left: -5rem;
position: relative;
width: calc(100% + 7rem);
.spark-table__status-message
Messaging for a table cell
display: none;
left: 0;
position: absolute;
top: 100%;
width: 100%;
z-index: 15;
.spark-table__resize
Resize handles for the table
cursor: ew-resize;
height: 100%;
position: absolute;
top: 0;
width: 1rem;
z-index: 5;
&--left {
left: -1px;
}
&--right {
right: -1px;
}
.spark-table__checkbox .spark-table__resize, .spark-table__checkbox + th .spark-table__resize--left
Hide the first resize handle after a checkbox, and the last one
display: none;
.spark-table-expand
Expand/collapse table element extends the normal expand
@extend .spark-expand;
.spark-table--condensed, .spark-table--spreadsheet
Condensed tables
table {
margin-bottom: 4rem;
}
th {
height: 4rem;
padding-left: 1rem;
padding-right: 1rem;
}
td {
border-right: 1px solid $table__border-color;
@include fontsize($table--condensed__body__font-size);
height: 3rem;
padding: 0 1rem;
line-height: 1.5rem;
// Messaging
&[data-error],
&[data-info],
&[data-warning],
&[data-success] {
padding-left: 3rem;
.spark-table__status-icon {
font-size: 1.5rem;
font-family: $icon__font-family--line;
left: 1rem;
line-height: 3rem;
position: absolute;
}
}
}
tr {
th, td {
&:last-child {
padding-right: 1rem;
}
}
}
.spark-table__edit-actions {
min-height: calc(3rem - 1px);
}
.spark-table--condensed
A condensed table's inputs are smaller than a full-size table
&:not(.spark-table--spreadsheet) {
th, td {
> input:not([type="checkbox"]) {
margin: -.5rem -.75rem;
width: calc(100% + 1.5rem);
}
input:not([type="checkbox"]) {
padding: .5rem .75rem;
}
&[data-error],
&[data-info],
&[data-warning],
&[data-success] {
> input:not([type="checkbox"]),
> select {
margin-left: -2.75rem;
width: calc(100% + 3.5rem);
}
input:not([type="checkbox"]),
select {
padding-left: 2.5rem;
}
.spark-table__status-wrapper {
left: -3rem;
width: calc(100% + 4rem);
input:not([type="checkbox"]),
select {
margin-left: .25rem;
margin-top: .25rem;
width: calc(100% - .5rem);
}
}
.spark-table__status-message {
border-radius: 0 0 .25rem .25rem;
margin-left: .25rem;
margin-top: -.5rem;
padding: .5rem .75rem;
width: calc(100% - .5rem);
}
}
}
}
.spark-table--spreadsheet
A table that works like a spreadsheet
td {
input:not([type="checkbox"]),
select {
border: none;
margin: -1.25rem -1rem;
padding: 1.25rem 1rem;
width: calc(100% + 2rem);
&[readonly] {
&::selection {
background: transparent;
}
}
}
select {
left: .5rem;
position: relative;
width: calc(100% + 1rem);
}
&.focus:not(.editing) {
color: $table__input--focus__color;
position: relative;
&::before {
background-color: $table__input--focus__background-color;
box-shadow: $table__input--focus__box-shadow;
border: 1px solid $table__input--focus__border-color;
}
}
&.editing,
&.focus {
color: $table__input--focus__color;
position: relative;
&::before {
background-color: $table__input--editing__background-color;
border: 1px solid $table__input--editing__border-color;
content: '';
display: block;
height: 100%;
left: -1px;
min-height: calc(3rem - 1px);
position: absolute;
top: -1px;
width: 100%;
z-index: 0;
}
> *:not(.spark-table__status-icon):not(.spark-table__status-message) {
position: relative;
z-index: 5;
}
}
&.hover {
color: $table__input--hover__color;
&::before {
background-color: $table__input--hover__background-color;
border: 1px solid $table__input--hover__border-color;
}
}
&[data-error],
&[data-info],
&[data-warning],
&[data-success] {
height: auto;
.spark-table__status-wrapper {
height: calc(3rem - 1px);
left: -3rem;
margin: 0;
width: calc(100% + 4rem);
input:not([type="checkbox"]),
select {
margin: calc(-.35rem - 1px) 0;
padding: 1.25rem 1rem 1.25rem 3.25rem;
width: 100%;
}
}
.spark-table__status-message {
box-shadow: $table__input--focus__box-shadow;
padding: .5rem;
}
}
}
.spark-table--edit-rows
A table with editable rows
// The whole table is in edit mode, gray out rows except for the one being edited
&.editing {
tbody tr:not(.editing) {
opacity: .5;
}
}
// A row in edit mode
tr.editing {
// Hide everything that isn't the edit actions
.spark-table__actions,
.spark-table__actions--icons {
> *:not(.spark-table__edit-actions) {
display: none;
}
}
// Show the edit actions
.spark-table__edit-actions {
opacity: 1;
transform: translateX(0);
visibility: visible;
}
}
.spark-table tr.spark-table__disabled-row
A disabled table row
&,
&:hover,
&.active {
background-color: $table__background-color;
color: $table--disabled__color;
}
button {
&,
&:hover,
&:focus {
color: $table--disabled__color;
}
}
.spark-table td.spark-table__disabled-cell input, .spark-table td input[disabled]
A disabled table cell
color: $table--disabled__color;
.spark-table th.spark-table__disabled-column
A disabled column heading
&,
&:hover {
color: $table__head--disabled__color;
}
components/tabs
csss
.spark-tabs
Holds the tabs and panels
padding: 0 !important;
// Extra small
&.xs {
.spark-tabs__tab {
max-width: 12rem;
min-width: 8rem;
}
}
// Small
&.sm {
}
// Medium
&.md {
}
// Large
&.lg {
}
// Extra large
&.xl {
}
// Medium, Large and extra large
&.sm, &.md, &.lg, &.xl {
// When scrollable, show show the buttons for navigating through tabs.
.spark-tabs__nav.scrollable {
.spark-tabs__scroll {
margin-right: 5rem;
}
.spark-tabs__btns {
display: block;
}
}
}
.spark-tabs__scroll
Wrapper around the tabs to facilitate scrolling.
overflow-x: auto;
overflow-y: visible;
position: relative;
.spark-tabs__list
A list of tabs. This should be a
- .
display: table;
left: 0;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
transition-duration: 250ms;
transition-property: transform;
transition-timing-function: $ease-in-out-quint;
user-select: none;
white-space: nowrap;
z-index: 5;
&::after {
z-index: 10;
}
.spark-tabs__scroll, .spark-tabs__list
Border placeholder for the bottom. Each tab has a bottom border, but this sits behind them to fill in the borders if the tabs don't fill the whole width.
&::after {
border-bottom: $tabs--active__border;
bottom: 0;
content: '';
display: inline-block;
left: 0;
position: absolute;
width: 100%;
z-index: 0;
}
.spark-tabs__tab, .spark-tabs__btn
A single tab or tab button
@extend .spark-list-item--no-bullet;
align-content: center;
background-color: $tabs__background-color;
border: $tabs__border;
border-bottom: $tabs--active__border;
border-right-width: 0;
color: $tabs__color;
box-shadow: $tabs__box-shadow;
color: $tabs__color;
cursor: pointer;
display: table-cell;
line-height: 0;
margin: 0 -1px; // Compensate for stacked borders
max-width: 18rem;
min-width: 18rem;
overflow: hidden;
top: .33333rem;
position: relative;
text-align: left;
transition-duration: 100ms;
transition-property: background-color, box-shadow, color;
transition-timing-function: ease-in-out;
vertical-align: middle;
// An icon for the tab
[data-icon],
[class^='#{$prefix}-icon-'],
[class*=' #{$prefix}-icon-'] {
left: 1rem;
margin-top: -.33333rem;
position: absolute;
top: 50%;
transform: translateY(-50%);
transition-duration: 100ms;
transition-property: color;
transition-timing-function: ease-in-out;
z-index: 10;
}
// Links should have the same color as their parents and
// truncate any overflowing text
a {
color: inherit;
display: block;
font-weight: 400;
height: 100%;
line-height: 1em;
margin: 0;
margin-bottom: .33333rem;
overflow: hidden;
padding: 1.2rem 1.5rem;
position: relative;
text-overflow: ellipsis;
top: 0;
transition: none;
transition: color 100ms ease-in-out;
white-space: nowrap;
width: 100%;
small {
@include fontsize(eta);
font-family: $body__font-family;
}
&:focus {
border-bottom: 0;
}
}
// When an anchor follows an icon, add the appropriate padding
[data-icon] + a,
[class^='#{$prefix}-icon-'] + a,
[class*=' #{$prefix}-icon-'] + a {
padding-left: 3rem;
}
&:not(.active).focus {
border: $tabs--focus__border;
}
// When the tab is active raise the z-index so it's atop other tabs
&.active,
&.active:hover {
background-color: $tabs--active__background-color;
border: $tabs--active__border;
border-width: 1px;
border-bottom-color: transparent;
border-radius: .33333rem .33333rem 0 0;
box-shadow: none;
color: $tabs--active__color;
top: 1px; // Offset from the top 1px so there isn't a gap between the border of the tabs and the panels
z-index: 15;
a {
margin-bottom: 0;
padding-top: 1.45rem;
padding-bottom: 1.33333rem;
}
[data-icon],
[class^='#{$prefix}-icon-'],
[class*=' #{$prefix}-icon-'] {
margin-top: 0;
}
// Make icon fill when active
[data-icon],
[class^='#{$prefix}-icon-'],
[class*=' #{$prefix}-icon-']{
font-family: $icon__font-family--fill !important;
// Capture the before elements too
&::before{
font-family: $icon__font-family--fill !important;
}
}
}
// When the user hovers over the tab
&:hover {
background-color: $tabs--hover__background-color;
border: $tabs--hover__border;
color: $tabs--hover__color;
}
// Used for the shadow on the active tab
&::after {
background-color: $tabs--active__box-shadow;
content: '';
height: calc(100% - .33333rem); // Full height, minus the .33333rem top offset for the border.
opacity: 0;
position: absolute;
left: -.75rem;
top: 0;
transform: skew(-3deg);
z-index: 5;
width: 1rem;
}
// For the last tab
&:last-child {
border-right-width: 1px;
// Hide the shadow when active
&.active {
&::after {
display: none;
}
}
}
.spark-tabs__tab:not(.active) + .spark-tabs__tab:not(.active)
A non-active tab which follows another non-active tab gets a left border.
border-left-width: 1px;
.spark-tabs__tab.active + .spark-tabs__tab
A tab which follows the active tab shows the sliver shadow
&::after {
opacity: 1;
}
.spark-tabs__btns
Nav buttons holder
border-bottom: $tabs--active__border;
display: none;
font-size: 0;
height: 100%;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
z-index: 5;
.spark-tabs__btn
A tab navigation button
box-shadow: none;
border-left-width: 1px;
display: inline-block;
font-size: 2.375rem;
height: 100%;
margin: 0;
max-width: none;
min-width: 0;
padding: 0;
position: relative;
text-align: center;
width: 2.5rem;
&:last-child {
border-right-width: 1px;
}
// Center vertically
&::before {
line-height: 50%;
}
&:focus {
outline: 0;
}
.spark-tabs__panels
Tab content container
border: $tabs--active__border;
border-top: none;
position: relative;
z-index: 0;
width: 100%;
.spark-tabs__panel
A single tab's content
display: none;
padding: 1.5rem;
// Show when active
&.active {
display: block;
}
components/text-input
csss
.spark-input
Wrapper around the input. Generally a <label>
so that clicking on any part of the container triggers an input focus.
cursor: pointer;
display: block;
margin-bottom: 1rem;
position: relative;
z-index: 10;
// Move the label up when we're focused or active
&.active .spark-label,
&.has-partial-value .spark-label,
&.focus .spark-label,
.spark-input__field:focus ~ .spark-label {
@include fontsize(eta);
top: .5rem;
}
// Show the placeholder and dividers when we're focused or active
&.active .spark-input__placeholder,
&.has-partial-value .spark-input__placeholder,
&.active .spark-input__divider,
&.has-partial-value .spark-input__divider,
.spark-input__field:focus ~ .spark-input__placeholder,
.spark-input__divider:focus ~ .spark-input__placeholder {
opacity: 1;
}
// When the input has a total character or remaining character count
&.active[data-characters],
&.active[data-characters-remaining] {
// Add padding to the label to allow space for the count.
.spark-label {
padding-right: 3rem;
}
// Place the count in the top right.
&::before {
color: $input__label__color;
@include fontsize(eta);
position: absolute;
right: 1rem;
top: 1.5rem;
transform: translateY(-50%);
text-shadow: 1px $input--active__background-color;
z-index: 15;
}
}
// Set the total characters count
&.active[data-characters] {
&::before {
content: attr(data-characters);
}
}
// Set the total characters remaining count
&.active[data-characters-remaining] {
&::before {
content: attr(data-characters-remaining);
}
}
// We've gone over our allotted character count
&.active[data-characters-remaining-danger] {
&::before {
color: $color-state-danger;
}
}
// On hover, darken the border
&:hover,
&.hover {
> .spark-input__field:not(:focus) {
border: $input--hover__border;
}
}
// When the container has a state, show it below.
&[data-error],
&[data-warning],
&[data-success] {
// Remove the bottom border from the input so the message stays flush
.spark-input__field {
border-radius: $input__border-radius $input__border-radius 0 0;
}
.spark-input__message {
display: block;
}
}
// When the container has an error state, show it below.
&[data-error] {
.spark-input__field {
border-color: $message--error__message__background-color;
}
.spark-input__message {
background-color: $message--error__message__background-color;
color: $message--error__message__color;
}
}
// When the container has an warning state, show it below.
&[data-warning] {
.spark-input__field {
border-color: $message--warning__message__background-color;
}
.spark-input__message {
background-color: $message--warning__message__background-color;
color: $message--warning__message__color;
}
}
// When the container has an success state, show it below.
&[data-success] {
.spark-input__field {
border-color: $message--success__message__background-color;
}
.spark-input__message {
background-color: $message--success__message__background-color;
color: $message--success__message__color;
}
}
// Center the label and addon
.spark-label,
.spark-input__addon {
color: $input__label__color;
@include fontsize(zeta);
position: absolute;
top: 1.5rem;
transition-duration: 100ms;
transition-property: font-size, color, top, line-height;
transition-timing-function: $ease-in-out-quint;
z-index: 10;
}
.spark-input__addon {
top: 50%;
transform: translateY(-50%);
}
// If we have an addon, we need to add some padding to the right.
&.spark-input--addon {
.spark-input__field {
padding-right: 3rem;
}
}
// We need to bump the label 1px back to the right to account for the border.
// Otherwise it doesn't align to the left.
.spark-label {
font-weight: $input__font-weight;
left: 1rem;
margin-left: 1px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: calc(100% - 2rem);
.spark-thin {
font-weight: $input__font-weight--thin;
}
}
// Input fields and placeholders inside of the input container should have padding
// to allow for the label.
.spark-input__field,
.spark-input__placeholder,
.spark-input__overlay {
padding: 2.25rem 1rem 0.5rem;
}
// Input dividers have the same top and bottom padding as fields and placeholders,
// but they need to be snug.
.spark-input__divider {
padding: 2.25rem .5rem 0.5rem;
}
// Don't have a bottom margin if we're the last element in a group
&:last-child {
margin-bottom: 0;
}
.spark-input__field, .spark-input__placeholder, .spark-input__fields, .spark-input__overlay
Inputs, placeholders and groups of inputs
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-color: transparent;
border-radius: $input__border-radius;
display: block;
cursor: inherit;
@include fontsize(zeta);
font-family: $body__font-family;
font-weight: $input__font-weight;
height: 5rem;
line-height: 2.1rem; /// Had to set this to 2.1 instead of 2 or else the placeholder wasn't aligning. @todo investigate why.
padding: 0 1rem;
transition-duration: 100ms;
transition-property: background-color, border, border-radius;
transition-timing-function: $ease-in-out-quint;
width: 100%;
.spark-input__field, .spark-input__fields, .spark-input__overlay
Input or a group of inputs should have the same appearance
background-color: $input__background-color;
border: $input__border;
color: $input__color;
position: relative;
z-index: 5;
.spark-input__field
A text input field needs to have a bunch of resets done to it.
// Placeholder hidden by default
@include placeholder {
color: transparent;
font-weight: $input__placeholder__font-weight;
opacity: 0;
transition-duration: 100ms;
transition-property: opacity;
transition-timing-function: $ease-in-out-quint;
}
// Remove custom IE stuff
&::-ms-clear {
// display: none;
}
// When the input is disabled, gray it out.
&:disabled {
background-color: $input--disabled__background-color;
border: $input--disabled__border;
& ~ .spark-label {
color: $input--disabled__color;
}
}
.spark-input__field[data-typeahead]
Hide the placeholder on inputs with a typeahead
@include placeholder {
opacity: 0;
}
.spark-input__field[data-typeahead], .spark-input__field[data-typeahead] ~ .spark-input__placeholder
Typeahead fields should be monospaced to prevent jumping around
font-family: $mono__font-family;
.spark-input__field[data-typeahead]:focus
When an input with a typeahead gains focus, make background transparent so that we can see the placeholder behind it.
background-color: transparent;
.spark-input__field[data-typeahead]:focus ~ .spark-input__placeholder
Give the placeholder the background color of the input since its background-color
is transparent on focus.
background-color: $input--active__background-color;
textarea.spark-input__field
Textarea input
overflow: auto;
resize: none;
.spark-input__placeholder
Input placeholder element for typeahead
color: $input--typeahead__placeholder__color;
left: 1px;
opacity: 0;
position: absolute;
top: 1px;
z-index: 0;
// When inside of a field group, don't offset from the left.
.spark-input__fields & {
left: 0;
top: 0;
}
.spark-input__fields
A group of fields should flex the content to fit on one line. If you want inputs on multiple lines, don't use a group!
display: flex;
overflow: hidden;
// Don't expand the size of each input
.spark-input {
flex: 0 0 auto;
height: 100%;
}
// No background or border on nested input fields since we have that on the fields container
.spark-input__field,
.spark-input__placeholder {
background-color: transparent;
border: none;
padding-left: 0;
padding-right: 0;
height: 100%;
}
// Don't put a border or background on the focused inputs
.spark-input.focus & {
.spark-input__field {
border: none;
background-color: transparent;
}
}
.spark-input__overlay
An overlay of the actual value of an input. Used in Date Typeahead to show a text version of the value.
left: 0;
position: absolute;
top: 0;
z-index: 5;
.spark-input.focus .spark-input__fields, .spark-input__field:focus
A focused group of fields and a focused field should behave the same.
background-color: $input--active__background-color;
border: $input--active__border;
outline: 0;
@include placeholder {
color: $input__placeholder__color;
opacity: 1;
}
.spark-input.focus .spark-input__fields ~ .spark-label, .spark-input__field:focus ~ .spark-label
Focus text
color: $input--active__label__color;
.spark-input__addon
Align the addon to the right.
font-size: 1.5em;
right: 1.5rem;
.spark-input__addon-button
Addon which has some functionality.
padding: 1.5rem;
right: 0;
.spark-input__addon-button:focus
Don't allow the default anchor focus styling to apply
border-bottom: inherit;
padding: 1.5rem;
.spark-input__divider
A divider between inline form fields
align-items: center;
display: flex;
opacity: 0;
.spark-input__message
Holds any state messaging
border-radius: 0 0 $input__border-radius $input__border-radius;
box-sizing: border-box;
color: $input--error__color;
display: none;
@include fontsize($input__message__font-size);
font-weight: $input__message__font-weight;
padding: .75rem 1rem;
transform-origin: top center;
transition-delay: 0ms, 0ms, 0ms;
transition-duration: 200ms;
transition-property: background-color, color;
transition-timing-function: linear, $ease-in-out-quint, $ease-in-out-quint;
z-index: 0;
width: 100%;
// Style top-level links
a {
color: inherit;
font-size: inherit;
}
.spark-animate-height {
transition-property: height, margin, background-color, color;
}
.spark-input__password-show, .spark-input__password-hide
Hide both the password show and hide icons by default
display: none;
.spark-input.active .spark-input__field[type="password"], .spark-input__field[type="password"]:focus
When we have a password input, show the toggle icon for hiding the password
~ .spark-input__password-toggle {
.spark-input__password-show {
display: block;
}
}
.spark-input.active .spark-input__field[type="text"], .spark-input__field[type="text"]:focus
When we have a text input, show the toggle icon for showing the password
~ .spark-input__password-toggle {
.spark-input__password-hide {
display: block;
}
}
.spark-input--sm
Small text input
.spark-input__field {
height: 3rem;
padding: 0 1rem 0 1rem;
@include placeholder {
color: $input__label__color;
opacity: 1;
}
}
/// Don't show the label on a small text input.
.spark-label {
display: none;
}
.spark-label
Don't show the label on a small text input.
display: none;
components/toggle
csss
.spark-toggle, .spark-toggle-switch
Wrapper around the checkbox or radio input. Generally a label so that clicking on any part of the container triggers the checkbox or radio.
touch-callout: none;
user-select: none;
// Hide the actual element from view.
.spark-toggle__input {
opacity: 0;
position: absolute;
z-index: 0;
//the second selector here has added specificity to override another style
&:focus, &:focus:checked:nth-child(n) {
~ .spark-label, ~ .spark-toggle-switch__handle {
box-shadow: $toggle--focus__box-shadow;
z-index: 6;
}
}
}
.spark-toggle
A pill-style toggle
display: inline-block;
float: left;
// The label is used to create the clickable box
.spark-label {
background-color: $toggle__background-color;
border: $toggle__border;
border-left-width: 0;
border-bottom-width: 2px;
border-radius: .25em;
color: $toggle__color;
cursor: pointer;
display: block; // Changed to display:block to fix spacing underneath toggle issue caused by inline-block
@include fontsize(zeta);
font-weight: $body__font-weight--bold;
line-height: 1rem;
margin-top: 0;
padding: 1rem;
position: relative;
text-align: center;
text-transform: uppercase;
transition: all 100ms $ease-in-out-quint;
width: 100%;
z-index: 5;
[data-icon],
[class^='#{$prefix}-icon-'],
[class*=' #{$prefix}-icon-'] {
line-height: 1rem;
}
}
// When the toggle is checked, create a depressed appearance
// @todo remove the nth-child chack when iOS Chrome/Webviews fix this issue
// http://stackoverflow.com/questions/14201694/chrome-webkit-not-rendering-css-display-change-on-inputchecked-element-elem
.spark-toggle__input:checked ~ .spark-label:nth-child(n) {
border-color: $toggle--active__border-color;
background-color: $toggle--active__background-color;
color: $toggle--active__color;
// Fill icon when checked
[data-icon],
[class^='#{$prefix}-icon-'],
[class*=' #{$prefix}-icon-'] {
&::before{
font-family: $icon__font-family--fill !important;
}
}
}
// When the toggle is disabled, all borders should only be 1px and the colors lighter
// @todo remove the nth-child chack when iOS Chrome/Webviews fix this issue
// http://stackoverflow.com/questions/14201694/chrome-webkit-not-rendering-css-display-change-on-inputchecked-element-elem
.spark-toggle__input:disabled ~ .spark-label:nth-child(n) {
background-color: $toggle--disabled__background-color;
border: $toggle--disabled__border;
color: $toggle--disabled__color;
cursor: not-allowed;
}
.spark-toggle-group
A group of toggles
margin: 0;
.spark-toggle {
padding-left: 0 !important;
padding-right: 0 !important;
// Don't round the corners on the labels in a group
.spark-label {
border-radius: 0;
}
// First toggle in a group has no rounding on the right
&:first-child {
.spark-label {
border-left-width: 1px;
border-radius: .25em 0 0 .25em;
}
}
// Last toggle in a group has no rounding on the left
&:last-child {
.spark-label {
border-radius: 0 .25em .25em 0;
}
}
}
.spark-toggle-switch
A toggle switch
cursor: pointer;
display: inline-block;
height: 2em;
position: relative;
width: 3.5em;
// The track on which the handle slides
.spark-toggle-switch__track {
background-color: $toggle__track__background-color;
border: $toggle__track__border;
border-radius: .75em;
content: '';
display: inline-block;
height: 1.35em;
left: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
transition: all 100ms $ease-in-out-quint;
width: 3.5em;
z-index: 0;
}
// The circular handle
.spark-toggle-switch__handle {
background-color: $toggle__handle__background-color;
border: $toggle__handle__border;
border-radius: 50%;
box-shadow: $toggle__handle__box-shadow;
content: '';
display: inline-block;
height: 2em;
left: 0;
position: relative;
transition: all 100ms $ease-in-out-quint;
width: 2em;
z-index: 5;
}
// When the input is checked, move the handle to the right and color the border
// @todo remove the nth-child chack when iOS Chrome/Webviews fix this issue
// http://stackoverflow.com/questions/14201694/chrome-webkit-not-rendering-css-display-change-on-inputchecked-element-elem
.spark-toggle__input:checked ~ .spark-toggle-switch__handle:nth-child(n) {
border: $toggle--active__handle__border;
box-shadow: $toggle--active__handle__box-shadow;
left: 1.5em;
}
// When the input is checked, color the track
// @todo remove the nth-child chack when iOS Chrome/Webviews fix this issue
// http://stackoverflow.com/questions/14201694/chrome-webkit-not-rendering-css-display-change-on-inputchecked-element-elem
.spark-toggle__input:checked ~ .spark-toggle-switch__track:nth-child(n) {
background-color: $toggle--active__track__background-color;
border: $toggle--active__track__border;
}
// When the input is disabled, gray out the handle
// @todo remove the nth-child chack when iOS Chrome/Webviews fix this issue
// http://stackoverflow.com/questions/14201694/chrome-webkit-not-rendering-css-display-change-on-inputchecked-element-elem
.spark-toggle__input:disabled ~ .spark-toggle-switch__handle:nth-child(n) {
background-color: $toggle--disabled__handle__background-color;
border: $toggle--disabled__handle__border;
box-shadow: none;
cursor: not-allowed;
}
// When the input is disabled, gray out the track
// @todo remove the nth-child chack when iOS Chrome/Webviews fix this issue
// http://stackoverflow.com/questions/14201694/chrome-webkit-not-rendering-css-display-change-on-inputchecked-element-elem
.spark-toggle__input:disabled ~ .spark-toggle-switch__track:nth-child(n) {
background-color: $toggle--disabled__track__background-color;
border: $toggle--disabled__track__border;
cursor: not-allowed;
}
components/toolbar
csss
.spark-toolbar
Toolbar
//hide the component until we finish intialization
visibility: hidden;
position: relative;
display: flex;
height: 3rem;
//init finished, show component
&.ready {
visibility: visible;
}
&.recalc {
.spark-toolbar__container--hidden {
display: block;
visibility: hidden;
}
}
&:not(.ready) {
.spark-toolbar__item {
width: auto;
//display dropdowns before ready so other elements can initalize
.spark-toolbar__item--content {
display: block;
}
//cause swap icons to be preloaded by browser so they aren't loaded the first time the user clicks an item
.spark-toolbar__item-helper {
&::before {
font-family: 'spark-icon-fill' !important;
}
}
}
}
//some additional padding helps make the dropdowns look nicer (optional to use this class on content)
.spark-toolbar__item--content__container {
padding: 2rem 1rem;
}
&.spark-toolbar--icon {
.spark-toolbar__container--visible {
//hide the text label when we're in icon-mode
.spark-toolbar__item {
&::before {
display: none;
}
&:active {
//set active fade on buttons that have an icon
.spark-toolbar__item-helper {
&, &[class^='spark-icon'] {
background: $spark-toolbar-active-background;
color: $spark-toolbar-active-color;
}
}
}
.spark-toolbar__item-helper {
&::before {
display: block;
}
}
//make space for dropdown arrow indicator
.spark-toolbar__item--content ~ .spark-toolbar__item-helper {
width: 4.5rem;
}
}
}
}
&:not(.spark-toolbar--icon) {
.spark-toolbar__container--visible {
//hide icon when not in icon-mode
.spark-toolbar__item-helper {
&, &[class^='spark-icon'] {
width: 0;
padding: 0;
}
}
//if we have content, make space for dropdown arrow
.spark-toolbar__item--content ~ .spark-toolbar__item-helper {
padding: .5rem;
}
}
}
.spark-toolbar__item {
&.open {
//swap in filled icons when open
.spark-toolbar__item-helper {
&::before {
font-family: 'spark-icon-fill' !important;
}
}
}
&.open, &:active {
//change colors when a toolbar item is selected
.spark-toolbar__item--content ~ .spark-toolbar__item-helper {
background: $spark-toolbar-active-background;
&:hover {
&::before, &::after {
color: $spark-toolbar-active-hover-color;
border-top-color: $spark-toolbar-active-hover-color !important;
}
}
&::before, &::after {
color: $spark-toolbar-active-color;
border-top-color: $spark-toolbar-active-color !important;
}
}
}
}
.spark-toolbar__container--hidden {
.spark-toolbar__item--content ~ .spark-toolbar__item-helper {
//size buttons in hidden dropdown when they have icons
&[class^='spark-icon'] {
width: 4.5rem;
}
}
}
.spark-toolbar__show-more {
//hide show more button by default
display: none;
//this is the arrow element for the show-more dropdown that points back to the show-more button
&::before {
content: '';
position: absolute;
right: 1rem;
top: calc(100% + .5rem);
display: none;
width: 1rem;
height: 1rem;
border-width: 1px 0 0 1px;
border-style: solid;
border-color: $spark-toolbar-dropdown-border-hidden;
background: $spark-toolbar-dropdown-background;
z-index: 11;
transform: rotate(45deg) translate(.25rem, .25rem);
opacity: 0;
transition: opacity 100ms ease-in-out, transform 100ms ease-in-out;
}
}
&.show-more {
//make space for the show-more button
.spark-toolbar__container--visible {
width: calc(100% - 3rem);
}
//now show the show-more button as we have items hidden
.spark-toolbar__show-more {
display: inline-block;
width: 3rem;
line-height: 1rem;
text-align: center;
padding: 1rem 0;
cursor: pointer;
background: $spark-toolbar-background;
color: $spark-toolbar-color;
border-radius: $spark-toolbar-dropdown-border-radius;
i {
vertical-align: baseline;
line-height: 1rem;
}
&:hover {
background: $spark-toolbar-hover-background;
outline: 0 none;
}
&:focus {
outline: 0 none;
}
}
&.open {
//swap the look of the show-more button when its activated
.spark-toolbar__show-more {
background: $spark-toolbar-active-background;
color: $spark-toolbar-active-color;
&::before {
display: block;
}
i {
&::before {
font-family: 'spark-icon-fill' !important;
}
}
}
}
//perform same animation on dropdown arrow as dropdown
&.animate {
.spark-toolbar__show-more {
&::before {
transform: rotate(45deg);
opacity: 1;
}
}
}
}
//default styling for an item
.spark-toolbar__item {
position: relative;
flex-shrink: 0;
display: inline-flex;
background: $spark-toolbar-background;
@include fontsize(zeta);
font-family: $spark-toolbar-label-font-family;
font-style: normal;
font-weight: $spark-toolbar-label-font-weight;
line-height: 1rem;
color: $spark-toolbar-color;
transition: color 100ms ease-in-out, background-color 100ms ease-in-out;
cursor: pointer;
border-radius: .25rem;
&:hover, &:focus {
outline: 0 none;
background: $spark-toolbar-hover-background;
.spark-toolbar__item-helper {
background: $spark-toolbar-hover-background;
}
}
//this is the text-label for an item
&::before {
padding: 1rem;
content: attr(label);
text-transform: uppercase;
display: inline-block;
@include fontsize(zeta);
font-family: $spark-toolbar-label-font-family;
font-style: normal;
font-weight: $spark-toolbar-label-font-weight;
white-space: nowrap;
}
//this is the dropdown arrow indicating which item is open
&::after {
position: absolute;
top: calc(100% + .5rem);
content: '';
left: calc(50% - .5rem);
width: 1rem;
height: 1rem;
border-top: $spark-toolbar-dropdown-border;
border-left: $spark-toolbar-dropdown-border;
background: $spark-toolbar-dropdown-background;
transform: rotate(45deg);
display: none;
transition: opacity 100ms ease-in-out, transform 100ms ease-in-out;
z-index: 11;
}
&.open {
//when displaying the dropdown, also display the arrow
&::after {
opacity: 0;
transform: rotate(45deg) translate(.25rem, .25rem);
display: block;
}
//display the dropdown, initalize with a transform, then animate away
.spark-toolbar__item--content {
display: block;
transform: translate(0, .5rem);
opacity: 0;
font-weight: $spark-toolbar-dropdown-font-weight;
}
//applied next tick to animate content
&.animate {
.spark-toolbar__item--content {
transform: none;
opacity: 1;
}
&::after {
opacity: 1;
transform: rotate(45deg);
}
}
}
//active and open styling when items are clicked or open
&.open, &:active {
background: $spark-toolbar-active-background;
color: $spark-toolbar-active-color;
}
//list styling for inside dropdown
.spark-toolbar__list {
padding: 1rem 0;
margin: 0;
overflow: hidden;
@include fontsize(eta);
//apply a border to separate multiple lists
+ .spark-toolbar__list {
border-top: $spark-toolbar-dropdown-border;
}
li {
list-style: none;
padding: 1rem 2rem;
text-indent: 0;
line-height: 1rem;
&:hover, &:focus {
background: $spark-toolbar-item-hover-background;
outline: 0 none;
}
}
//styling tweaks for checkbox lists to create full-size hitbox
&.spark-toolbar__list--checkboxes {
li {
padding: 0;
position: relative;
&:hover, &:focus {
background: inherit;
}
label {
width: 100%;
display: block;
cursor: pointer;
word-wrap: break-word;
line-height: 1.5rem;
.spark-toolbar__list--checkboxes--helper {
position: absolute;
left: 1rem;
top: calc(50% - 5px);
&::before {
visibility: hidden;
display: block;
content: 'ï„¡';
font-family: 'spark-icon-line';
font-size: 14px;
line-height: 10px;
color: $spark-toolbar-color;
padding-right: .5rem;
}
}
.spark-toolbar__list--checkboxes--content {
padding: 1rem 2rem 1rem 3rem;
display: block;
}
&:hover {
background: $spark-toolbar-item-hover-background;
}
input {
//hide the actual checkbox
opacity: 0;
width: 0;
height: 0;
display: block;
margin: 0;
&:focus ~ .spark-toolbar__list--checkboxes--content {
background: $spark-toolbar-item-hover-background;
}
&:checked {
~ .spark-toolbar__list--checkboxes--helper::before {
visibility: visible;
}
}
}
}
}
}
}
//setup the icon-button for an item
.spark-toolbar__item-helper {
height: 3rem;
display: flex;
align-items: center;
background: $spark-toolbar-background;
transition: color 100ms ease-in-out, background-color 100ms ease-in-out;
border-radius: .25rem;
font-size: 2rem;
//if we don't have an icon size for just the dropdown arrow
&:not([class^='spark-icon']) {
&::before {
content: '';
right: calc(50% - 1.33rem/2);
}
//override icon-button arrow positioning if we don't have an icon
&::after {
right: .5rem;
}
}
//if we do have an icon to display pad less
&[class^='spark-icon'] {
padding: .5rem;
}
//don't show anything if we don't have an icon
&::before {
display: none;
}
//position icon-button arrow
&::after {
top: calc(50% - .5rem/2);
right: .5rem;
}
}
//if we have content to display then show the helper
.spark-toolbar__item--content ~ .spark-toolbar__item-helper {
padding: .5rem;
&::after {
border-color: transparent;
border-style: solid;
border-top-color: $spark-toolbar-color;
border-width: .5rem;
border-top-width: .5rem;
content: '';
display: inline-block;
position: absolute;
transition: border-color 100ms ease-in-out;
}
}
//apply some colors, and inset shadowing for dropdowns
.spark-toolbar__item--content {
display: none;
position: absolute;
top: calc(100% + 1rem);
left: calc(50% - 12rem);
width: 24rem;
max-width: calc(100vw - 2rem);
background: $spark-toolbar-dropdown-background;
color: $spark-toolbar-dropdown-color;
transition: transform 100ms ease-in-out, opacity 100ms ease-in-out;
border: $spark-toolbar-dropdown-border;
border-radius: $spark-toolbar-dropdown-border-radius;
box-shadow: $spark-toolbar-dropdown-box-shadow;
order: 1;
z-index: 10;
}
}
//layout the visible item
.spark-toolbar__container--visible {
display: flex;
width: 100%;
justify-content: flex-end;
//when small-down collapse all items into the show-more dropdown
@include media-breakpoint-down(sm) {
visibility: hidden;
}
}
//required to make safari measure components correctly
&.measured {
.spark-toolbar__container--visible {
@include media-breakpoint-down(sm) {
width: 0 !important;
}
}
}
//apply some styling to have same dropdown look for the show-more area
.spark-toolbar__container--hidden {
display: none;
border-radius: $spark-toolbar-dropdown-border-radius;
border: $spark-toolbar-dropdown-border;
box-shadow: $spark-toolbar-dropdown-box-shadow;
z-index: 7;
transform: translate(0, .5rem);
opacity: 0;
transition: transform 100ms ease-in-out, opacity 100ms ease-in-out;
padding: 1rem 0;
background: $spark-toolbar-dropdown-background;
//reflow items to have icon button displayed inline, with content flowed below
.spark-toolbar__item {
width: 24rem;
display: flex;
flex-direction: row;
flex-wrap: wrap;
border-radius: 0;
max-width: calc(100vw - 2rem);
//pressed styling
&:active {
background: $spark-toolbar-background;
color: $spark-toolbar-color;
//don't flicker the button color and background when you are not opening a dropdown
.spark-toolbar__item-helper {
background: $spark-toolbar-background;
color: $spark-toolbar-color;
}
//if we have a dropdown actually change the active colors
.spark-toolbar__item--content ~ .spark-toolbar__item-helper {
background: $spark-toolbar-active-background;
color: $spark-toolbar-active-color;
}
}
//styling for icon-button
.spark-toolbar__item-helper {
border-radius: 0;
align-self: center;
&::before {
display: block;
}
//if we don't have an icon and just a dropdown arrow
&:not([class^='spark-icon']) {
width: 3rem;
margin-left: 2rem;
&::after {
right: 1rem;
}
}
}
//this has to be in pixels because IE doesn't understand rem line-height in ::before
&::before {
line-height: 24px;
}
&::after {
display: none;
}
}
//change position to static for visible content so that it actually grows the show-more dropdown area
//also apply some coloring, background, and an inset shadow style
.spark-toolbar__item--content {
position: static;
border-color: $spark-toolbar-dropdown-border-hidden;
border-width: 1px 0 1px 0;
background: $spark-toolbar-dropdown-background-hidden;
border-radius: 0;
box-shadow: inset 0px -20px 18px -20px $spark-toolbar-dropdown-border-hidden, inset 0px 20px 18px -20px $spark-toolbar-dropdown-border-hidden;
}
//don't show tooltips for items in the show-more container
[class^='spark-tooltip__content'] {
display: none;
}
}
&.open {
//animate the dropdowns for items in the show-more dropdown
&.animate {
.spark-toolbar__container--hidden {
transform: none;
opacity: 1;
}
}
//styling for the show-more dropdown
.spark-toolbar__container--hidden {
display: flex;
flex-direction: column;
position: absolute;
top: calc(100% + 1rem);
right: 0;
//round the corners of the first and last show-more dropdown items, as overflow:hidden on the show-more dropdown is not an option
.spark-toolbar__item {
//open styling
&.open {
background: $spark-toolbar-background;
color: $spark-toolbar-color;
}
//reposition the helper to fit and apply rounding
.spark-toolbar__item-helper {
position: relative;
border-radius: .25rem;
}
//force word wrapping for items in the show-more container (word wrap disabled for items in visible container)
&::before {
word-wrap: break-word;
white-space: normal;
width: calc(100% - 8.5rem);
padding-left: 2rem;
}
}
}
}
components/tooltip
csss
.spark-tooltip
Tooltips are hidden by default.
overflow: visible;
position: relative;
// Show the tooltip content when we're hover
&:hover,
&.tooltip-active {
.spark-tooltip__content,
[class*='#{$prefix}-tooltip__content--'] {
opacity: 1;
transform: translate(-50%, calc(-100% + 1rem));
transition-delay: 0ms;
display: block;
}
.spark-tooltip__content--left {
transform: translate(-1rem, -50%);
}
.spark-tooltip__content--right {
transform: translate(-.5rem, -50%);
}
.spark-tooltip__content--bottom {
transform: translate(-50%, calc(100% - 1rem));
}
}
.spark-tooltip__content, [class*='#{$prefix}-tooltip__content--']
Tooltip content
background-color: $tooltip__background-color;
border-radius: $tooltip__border-radius;
color: $tooltip__color;
display: block;
@include fontsize($tooltip__font-size);
font-family: $body__font-family;
font-weight: 400;
left: 50%;
line-height: 1rem;
opacity: 0;
padding: 1rem;
position: absolute !important;
text-transform: uppercase;
top: -2rem;
display: none;
white-space: nowrap;
z-index: 100;
// Caret
&::after {
background-color: $tooltip__background-color;
content: '';
display: inline-block;
height: 1rem;
left: 50%;
position: absolute;
top: 100%;
transform: translate(-50%, -50%) rotate(135deg);
width: 1rem;
}
// Transparent box which extends past the caret so the tooltip content
// is always touching the tooltip itself. Otherwise we can't mouse over
// the tooltip. Not crucial for a tooltip but a must for popovers
// which extend this style.
&::before {
background-color: transparent;
display: block;
content: '';
height: calc(100% + 1rem);
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 0;
}
.spark-tooltip__content--left
Content on the left
left: auto;
right: 100%;
top: 50%;
transform: translate(-.5rem, -50%);
// Caret on the right
&::after {
left: 100%;
margin-left: -1px;
top: 50%;
transform: translate(-50%, -50%) rotate(45deg);
}
// Transparent box
&::before {
height: 100%;
width: calc(100% + 1rem);
}
.spark-tooltip__content--right
Content on the right
left: calc(100% + 1.5rem);
top: 50%;
transform: translate(-1rem, -50%);
// Caret on the left
&::after {
left: auto;
margin-right: -1px;
right: 100%;
top: 50%;
transform: translate(50%, -50%) rotate(-135deg);
}
// Transparent box
&::before {
height: 100%;
left: -1rem;
width: calc(100% + 1rem);
}
.spark-tooltip__content--bottom
Content on the bottom
bottom: -2rem;
top: auto;
transform: translate(-50%, 1.5rem);
// Caret on the top
&::after {
bottom: 100%;
left: 50%;
top: auto;
transform: translate(-50%, 50%) rotate(-45deg);
}
// Transparent box
&::before {
top: -1rem;
}
.spark-tooltip__content--top
Content on the top
top: -2rem;
bottom: auto;
transform: translate(-50%, -1.5rem);
// Caret on the bottom
&::after {
top: 100%;
left: 50%;
transform: translate(-50%, -50%) rotate(135deg);
}
// Transparent box
&::before {
bottom: -1rem;
}
config
variables
red
$red: #e50000 !default;
Description
Primary red
Type
{color}
red-color-steps
$red-color-steps: (100:#ffabab, 200:$red, 300:#d80000, 400:#ac0000, 500:#910000, 600:#780000, 700:#5e0000) !default;
Description
Red color steps
Type
{map}
blue
$blue: #4a5767 !default;
Description
Primary blue
Type
{color}
blue-color-steps
$blue-color-steps: (50:#e2eaf3, 100:#a3b5cc, 150:#6e8199, 200:$blue, 250:#4a5767, 300:#424e5c, 400:#37414d, 500:#242b33) !default;
Description
Blue color steps
Type
{map}
green
$green: #23826f !default;
Description
Primary green
Type
{color}
green-color-steps
$green-color-steps: (100:#abded4, 200:$green, 300:#378676, 400:#207866, 500:#1d6b5b, 600:#195e51, 700:#13453b) !default;
Description
Green color steps
Type
{map}
lightblue
$lightblue: #267da9 !default;
Description
Primary light blue
Type
{color}
lightblue-color-steps
$lightblue-color-steps: (100:#79caf2, 200:#5cb8e6, 300:$lightblue, 400:#2d86b3, 500:#206080, 600:#1a4d66, 700:#5c6c80) !default;
Description
Light blue color steps
Type
{map}
gray
$gray: #e4e4e4 !default;
Description
Primary gray
Type
{color}
grey
$grey: $gray !default;
gray-color-steps
$gray-color-steps: (100:#eee, 200:$gray, 300:#ddd, 400:#ccc, 500:#a1a1a1, 600:#767676, 700:#666, 800:#555, 900:#333, 1000:#222) !default;
Description
Gray color steps
Type
{map}
grey-color-steps
$grey-color-steps: $gray-color-steps !default;
black
$black: #000 !default;
Description
Primary black
Type
{color}
white
$white: #fff !default;
Description
Primary white
Type
{color}
orange
$orange: #ff8d2e !default;
Description
Primary orange
Type
{color}
orange-color-steps
$orange-color-steps: (100:#ffc694, 200:$orange, 300:#cc7025) !default;
Description
Orange color steps
Type
{map}
cyan
$cyan: #5fe9ea !default;
Description
Primary cyan
Type
{color}
cyan-color-steps
$cyan-color-steps: (100:$cyan, 200:#099c9d, 300:#074849) !default;
Description
Cyan color steps
Type
{map}
lime-green
$lime-green: #b0ea3b !default;
Description
Primary lime green
Type
{color}
lime-green-color-steps
$lime-green-color-steps: (100:$lime-green, 200:#729135, 300:#2e3d10) !default;
Description
Lime green color steps
Type
{map}
purple
$purple: #804f92 !default;
Description
Primary purple
Type
{color}
purple-color-steps
$purple-color-steps: (100:#d0abde, 200:$purple, 300:#53335e) !default;
Description
Purple color steps
Type
{map}
color-state-info
$color-state-info: map-get($lightblue-color-steps, 700) !default;
Description
Info color
Type
{color}
color-state-success
$color-state-success: #75a01f !default;
Description
Success color
Type
{color}
color-state-success--dark
$color-state-success--dark: #577c10 !default;
Description
Success dark color
Type
{color}
color-state-warning
$color-state-warning: #cd8511 !default;
Description
Warning color
Type
{color}
color-state-warning--dark
$color-state-warning--dark: #b97811 !default;
Description
Warning dark color
Type
{color}
color-state-danger
$color-state-danger: map-get($red-color-steps, 400) !default;
Description
Danger color
Type
{color}
color-state-danger--dark
$color-state-danger--dark: map-get($red-color-steps, 500) !default;
Description
Danger dark color
Type
{color}
color-body
$color-body: map-get($gray-color-steps, 900) !default;
Description
Body copy color
Type
{color}
color-body__background-color
$color-body__background-color: $gray !default;
Description
Body background color
Type
{color}
color-body--alt
$color-body--alt: $white !default;
Description
Alternate body copy color
Type
{color}
color-caption
$color-caption: #bdc8cc !default;
Description
Caption color
Type
{color}
color-code__background-color
$color-code__background-color: #f5f4f2 !default;
Description
Code sample background-color
Type
{color}
color-heading
$color-heading: $blue !default;
Description
Heading color
Type
{color}
ease-in-cubic
$ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190) !default;
Description
Ease in cubic
Type
{string}
ease-out-cubic
$ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000) !default;
Description
Ease out cubic
Type
{string}
ease-in-out-cubic
$ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000) !default;
Description
Ease in and out cubic
Type
{string}
ease-in-circ
$ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335) !default;
Description
Ease in circular
Type
{string}
ease-out-circ
$ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000) !default;
Description
Ease out circular
Type
{string}
ease-in-out-circ
$ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860) !default;
Description
Ease in and out circular
Type
{string}
ease-in-expo
$ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035) !default;
Description
Ease in expo
Type
{string}
ease-out-expo
$ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000) !default;
Description
Ease out expo
Type
{string}
ease-in-out-expo
$ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000) !default;
Description
Ease in and out expo
Type
{string}
ease-in-quad
$ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530) !default;
Description
Ease in quad
Type
{string}
ease-out-quad
$ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940) !default;
Description
Ease out quad
Type
{string}
ease-in-out-quad
$ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955) !default;
Description
Ease in and out quad
Type
{string}
ease-in-quart
$ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220) !default;
Description
Ease in quart
Type
{string}
ease-out-quart
$ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000) !default;
Description
Ease out quart
Type
{string}
ease-in-out-
$ease-in-out-: cubic-bezier(0.770, 0.000, 0.175, 1.000) !default;
Description
Ease in and out quart
Type
{string}
ease-in-quint
$ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060) !default;
Description
Ease in quint
Type
{string}
ease-out-quint
$ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000) !default;
Description
Ease out quint
Type
{string}
Used by
- [placeholder]
gray-out
ease-in-out-quint
$ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000) !default;
Description
Ease in and out quint
Type
{string}
ease-in-sine
$ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715) !default;
Description
Ease in sine
Type
{string}
ease-out-sine
$ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000) !default;
Description
Ease out sine
Type
{string}
ease-in-out-sine
$ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950) !default;
Description
Ease in and out sine
Type
{string}
ease-in-back
$ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045) !default;
Description
Ease in back
Type
{string}
ease-out-back
$ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275) !default;
Description
Ease out back
Type
{string}
ease-in-out-back
$ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550) !default;
Description
Ease in and out back
Type
{string}
prefix
Remove in 2.0.0
$prefix: 'spark' !default;
Description
Class prefix for namespacing
Type
String
image-directory
$image-directory: '../images' !default;
Description
Path to image files
Type
String
grid-breakpoints
$grid-breakpoints: (
xs: 0,
sm: 544px,
md: 796px,
lg: 1048px,
xl: 1800px
);
Description
Default grid breakpoints.
Type
{map}
Map structure
{Map} keyName | {Map} keyDescription | {Map} keyType | {Map} keyValue |
---|---|---|---|
xs | Extra small screen / phone | Number | 0 |
sm | Small screen / phone | Number | 544px |
md | Medium screen / tablet | Number | 796px |
lg | Large screen / desktop | Number | 1024px |
xl | Extra large screen / wide desktop | Number | 1800px |
grid-columns
$grid-columns: 12;
Description
Number of columns in the grid.
Type
{number}
grid-gutter-width
$grid-gutter-width: 2rem;
Description
Padding between columns. Gets divided in half for the left and right.
Type
{number}
container-max-widths
$container-max-widths: (
sm: 768px,
md: 1008px,
lg: 1368px,
xl: 1920px
);
Description
Container sizes Define the maximum width of .container
for different screen sizes.
Type
{map}
Map structure
{Map} keyName | {Map} keyDescription | {Map} keyType | {Map} keyValue |
---|---|---|---|
sm | —none | Number | —none |
md | —none | Number | —none |
lg | —none | Number | —none |
xl | —none | Number | —none |
enable-flex
$enable-flex: true;
Description
Enable the Bootstrap flexible grid
Type
{boolean}
enable-grid-classes
$enable-grid-classes: true;
Description
Enable classes for the Bootsrap grid building
Type
{boolean}
font-directory
$font-directory: './fonts' !default;
Description
Directory used when resolving font paths.
Type
{string}
Used by
- [mixin]
loadFont
fonts
$fonts: (
'Roboto': (100, 300, 400, 500, 700),
'Roboto Slab': (100, 300, 400, 700),
'Roboto Mono': 400
) !default;
Description
Fonts to use
Type
{map}
body__font-family
$body__font-family: Roboto, sans-serif;
Description
Body copy font-family
Type
{string}
body__font-weight--thin
$body__font-weight--thin: 100 !default;
Description
Thin body copy font-weight
Type
{number}
body__font-weight--normal
$body__font-weight--normal: 300 !default;
Description
Normal body copy font-weight
Type
{number}
body__font-weight--bold
$body__font-weight--bold: 600 !default;
Description
Bold body copy font-weight
Type
{number}
body__font-cap-height
$body__font-cap-height: 0.72 !default;
Description
Body copy capital letter height
Type
{number}
heading__font-family
$heading__font-family: 'Roboto Slab', serif;
Description
Heading copy font-family
Type
{string}
heading__font-weight--light
$heading__font-weight--light: 300 !default;
Description
Light heading copy font-weight
Type
{number}
heading__font-weight--normal
$heading__font-weight--normal: 400 !default;
Description
Normal heading copy font-weight
Type
{number}
heading__font-weight--bold
$heading__font-weight--bold: 700 !default;
Description
Bold heading copy font-weight
Type
{number}
heading__font-cap-height
$heading__font-cap-height: 0.72 !default;
Description
Heading copy capital letter height
Type
{number}
mono__font-family
$mono__font-family: 'Roboto Mono', monospace;
Description
Monospaced copy font-family
Type
{string}
mono__font-weight--normal
$mono__font-weight--normal: 400 !default;
Description
Normal monospaced copy font-weight
Type
{number}
mono__font-cap-height
$mono__font-cap-height: 0.68 !default;
Description
Monospaced copy capital letter height
Type
{number}
rootsizes
$rootsizes: (
xs: 12,
sm: 12,
md: 12,
lg: 12,
xl: 12
) !default;
Description
Root font-sizes for each breakpoint. Set to half desired line-height of body text. ! Make sure to have as many sizes as breakpoints above.
Type
{map}
Map structure
{Map} keyName | {Map} keyDescription | {Map} keyType | {Map} keyValue |
---|---|---|---|
xs | —none | Number | 12 |
sm | —none | Number | 12 |
md | —none | Number | 12 |
lg | —none | Number | 12 |
xl | —none | Number | 12 |
Used by
font-scales
$font-scales: (
xs: (
giga: 76,
mega: 61,
alpha: 49,
beta: 39,
gamma: 31,
delta: 25,
epsilon: 20,
zeta: 16,
eta: 13,
theta: 10,
iota: 8
),
sm: (
giga: 76,
mega: 61,
alpha: 49,
beta: 39,
gamma: 31,
delta: 25,
epsilon: 20,
zeta: 16,
eta: 13,
theta: 10,
iota: 8
),
md: (
giga: 76,
mega: 61,
alpha: 49,
beta: 39,
gamma: 31,
delta: 25,
epsilon: 20,
zeta: 16,
eta: 13,
theta: 10,
iota: 8
),
lg: (
giga: 76,
mega: 61,
alpha: 49,
beta: 39,
gamma: 31,
delta: 25,
epsilon: 20,
zeta: 16,
eta: 13,
theta: 10,
iota: 8
),
xl: (
giga: 84,
mega: 67,
alpha: 54,
beta: 43,
gamma: 35,
delta: 28,
epsilon: 22,
zeta: 18,
eta: 14,
theta: 11,
iota: 9
),
) !default;
Description
Modular font scale Setting responsive modular-scales. Use appropriate scales for viewport sizes. May eventually include 'giga' and 'mega' as the two largest sizes for each scale.
Type
{map}
Used by
config/components
variables
calendar__background-color
$calendar__background-color: $white !default;
Description
Background color of the calendar.
Type
{color}
calendar__color
$calendar__color: map-get($blue-color-steps, 400) !default;
Description
Text color of the calendar.
Type
{color}
calendar__transition-duration
$calendar__transition-duration: 150ms;
Description
Duration for animations on the calendar. If changed, the JS should also be updated.
Type
{duration}
calendar__month-title__color
$calendar__month-title__color: map-get($blue-color-steps, 250) !default;
Description
Text color for a month title.
Type
{color}
calendar__month-title__font-size
$calendar__month-title__font-size: epsilon !default;
Description
Font size for a month title.
Type
{string}
calendar__month-title__border
$calendar__month-title__border: 1px solid map-get($gray-color-steps, 400) !default;
Description
Border for the month title when it's a select input.
Type
{string}
calendar__month-title--hover__border
$calendar__month-title--hover__border: 1px solid map-get($gray-color-steps, 800) !default;
Description
Border for the month title when it's a select input and hovered.
Type
{string}
calendar__day-of-week__color
$calendar__day-of-week__color: map-get($blue-color-steps, 250) !default;
Description
Text color for a day of the week caption.
Type
{color}
calendar__day-of-week__font-weight
$calendar__day-of-week__font-weight: 700 !default;
Description
Font weight for a day of the week caption.
Type
{color}
calendar__day__background-color
$calendar__day__background-color: $white !default;
Description
Background color of a day button.
Type
{color}
calendar__day__border
$calendar__day__border: 1px solid map-get($gray-color-steps, 400) !default;
Description
Border of a day button.
Type
{string}
calendar__day__color
$calendar__day__color: map-get($gray-color-steps, 800) !default;
Description
Text color of a day button.
Type
{color}
calendar__day__today-border
$calendar__day__today-border: 1px solid map-get($gray-color-steps, 700) !default;
Description
Border color for the current day.
Type
{color}
calendar__day__font-size
$calendar__day__font-size: zeta !default;
Description
Font size of a day button.
Type
{string}
calendar__day--hover__border
$calendar__day--hover__border: 1px solid map-get($gray-color-steps, 800) !default;
Description
Border of a hovered day button.
Type
{string}
calendar__day--hover__color
$calendar__day--hover__color: map-get($gray-color-steps, 900) !default;
Description
Text color of a day button.
Type
{color}
calendar__day--disabled__color
$calendar__day--disabled__color: map-get($gray-color-steps, 500) !default;
Description
Text color of a day button in a past or future month from the one being viewed.
Type
{color}
calendar__day--inactive__background-color
$calendar__day--inactive__background-color: map-get($gray-color-steps, 100) !default;
Description
Background color of a day button in a past or future month from the one being viewed.
Type
{color}
calendar__day--inactive__color
$calendar__day--inactive__color: map-get($gray-color-steps, 400) !default;
Description
Text color of a day button in a past or future month from the one being viewed.
Type
{color}
calendar__day--range__background-color
$calendar__day--range__background-color: map-get($blue-color-steps, 50) !default;
Description
Background color of a day in a range.
Type
{color}
calendar__day--selected__background-color
$calendar__day--selected__background-color: map-get($blue-color-steps, 250) !default;
Description
Background color of a selected day.
Type
{color}
calendar__day--selected__border
$calendar__day--selected__border: 1px solid map-get($blue-color-steps, 250) !default;
Description
Border of a selected day.
Type
{string}
calendar__day--selected__color
$calendar__day--selected__color: $white !default;
Description
Color of a selected day.
Type
{string}
calendar__day--selected__today-highlight
$calendar__day--selected__today-highlight: map-get($blue-color-steps, 300) !default;
Description
Background highlight color for the current day on hover
Type
{color}
calendar__day--selected--hover__background-color
$calendar__day--selected--hover__background-color: map-get($blue-color-steps, 300) !default;
Description
Background color of a selected day on hover.
Type
{color}
calendar__day--selected--hover__border
$calendar__day--selected--hover__border: 1px solid map-get($blue-color-steps, 500) !default;
Description
Border of a selected day on hover.
Type
{string}
calendar__day-note__font-size
$calendar__day-note__font-size: theta !default;
Description
Day note font size.
Type
{string}
calendar__day-note__font-weight
$calendar__day-note__font-weight: 700 !default;
Description
Day note font weight.
Type
{number}
fieldset__font-size
$fieldset__font-size: zeta !default;
Description
Fieldset fontsize
variable
Type
{string}
header__background-color
$header__background-color: map-get($gray-color-steps, 1000) !default;
Description
Header background-color
Type
{color}
header__border-top-width
$header__border-top-width: 4px !default;
Description
Header top border width
Type
{number}
header__border-top-color
$header__border-top-color: map-get($red-color-steps, 400) !default;
Description
Header top border color
Type
{color}
header__color
$header__color: map-get($gray-color-steps, 400) !default;
Description
Header color
Type
{color}
header__font-size
$header__font-size: zeta !default;
Description
Header fontsize
variable
Type
{string}
header__title__color
$header__title__color: $white !default;
Description
Header title color
Type
{color}
header__title__font-family
$header__title__font-family: $heading__font-family !default;
Description
Header title font-family
Type
{string}
header__title__font-size
$header__title__font-size: delta !default;
Description
Header title fontsize
variable
Type
{string}
header__title__font-weight
$header__title__font-weight: 300 !default;
Description
Header title font-weight
Type
{number}
header__logo--sabre__background-color
$header__logo--sabre__background-color: $red !default;
Description
Header logo background-color
Type
{color}
header__sign-in__background-color
$header__sign-in__background-color: $black !default;
Description
Header sign in background-color
Type
{color}
header__sign-in__font-weight
$header__sign-in__font-weight: 500 !default;
Description
Sign in links are bold
Type
{number}
header__login__background-color
changing login
to sign-in
, will remove login
in 2.0.0
$header__login__background-color: $header__sign-in__background-color;
Description
Header login background-color
Type
{color}
header__sign-in--hover__color
$header__sign-in--hover__color: map-get($lightblue-color-steps, 200) !default;
Description
Header sign in color
on hover
Type
{color}
header__login--hover__color
changing login
to sign-in
, will remove login
in 2.0.0
$header__login--hover__color: $header__sign-in--hover__color;
Description
Header login color
on hover
Type
{color}
header__search__background-color
$header__search__background-color: transparent !default;
Description
Header search background-color
Type
{color}
header__search__border-color
$header__search__border-color: map-get($gray-color-steps, 400) !default;
Description
Header search border-color
Type
{color}
header__search__color
$header__search__color: $green !default;
Description
Header search color
Type
{color}
header__search--active__background-color
$header__search--active__background-color: map-get($gray-color-steps, 100) !default;
Description
Header search background-color
when active
Type
{color}
header__search--active__color
$header__search--active__color: map-get($gray-color-steps, 600) !default;
Description
Header search color
when active
Type
{color}
header--visible__color
$header--visible__color: map-get($gray-color-steps, 400) !default;
Description
Desktop header color
Type
{color}
header--visible--hover__color
$header--visible--hover__color: map-get($gray-color-steps, 600) !default;
Description
Desktop header color
on hover
Type
{color}
header--visible__link--hover__color
$header--visible__link--hover__color: $white !default;
Description
Desktop header link color
on hover
Type
{color}
header--visible__link--active__toggle__background-color
$header--visible__link--active__toggle__background-color: $red !default;
Description
Desktop header link active toggle background-color
Type
{color}
header--visible__link--active__background-color
$header--visible__link--active__background-color: map-get($gray-color-steps, 900) !default;
Description
Desktop header link active background-color
Type
{color}
header--visible__link--active__border-top-width
$header--visible__link--active__border-top-width: 4px !default;
Description
Desktop header link active border-top-width
Type
{number}
header--visible__link--active__border-top-color
$header--visible__link--active__border-top-color: $red !default;
Description
Desktop header link active border-top-color
Type
{color}
header--visible__link--active__color
$header--visible__link--active__color: $white !default;
Description
Desktop header link active color
Type
{color}
header--visible__link--active__font-weight
$header--visible__link--active__font-weight: 700 !default;
Description
Desktop header link active font-weight
Type
{number}
header--visible__link--active__shadow-color
$header--visible__link--active__shadow-color: $black !default;
Description
Desktop header link active box-shadow
color
Type
{color}
header--visible__second-level__background-color
$header--visible__second-level__background-color: $white !default;
Description
Desktop header second level background-color
Type
{color}
header--visible__second-level-link__color
$header--visible__second-level-link__color: map-get($gray-color-steps, 600) !default;
Description
Desktop header second level link color
Type
{color}
header--visible__second-level-link--hover__background-color
$header--visible__second-level-link--hover__background-color: map-get($gray-color-steps, 100) !default;
Description
Desktop header second level link background-color
on hover
Type
{color}
header--visible__second-level-link--hover__color
$header--visible__second-level-link--hover__color: map-get($gray-color-steps, 900) !default;
Description
Desktop header second level link color
on hover
Type
{color}
header--visible__third-level__font-size
$header--visible__third-level__font-size: eta !default;
Description
Desktop header third level font-size
Type
{string}
icon__font-family--line
$icon__font-family--line: 'spark-icon-line' !default;
Description
The name of the family to use for icons
Type
{string}
icon__font-family--fill
$icon__font-family--fill: 'spark-icon-fill' !default;
Description
The name of the family to use for a filled version of the icons
Type
{string}
link--default__color
$link--default__color: $lightblue !default;
Description
A default link's color
Type
{color}
link--default__border
$link--default__border: 1px solid transparent !default;
Description
A default link's bring
Type
{string}
link--default--hover__color
$link--default--hover__color: map-get($lightblue-color-steps, 500) !default;
Description
A default link's color
on hover
Type
{color}
link--default--active__color
$link--default--active__color: map-get($lightblue-color-steps, 600) !default;
Description
A default link's color
when active
Type
{color}
link--default--focus__border
$link--default--focus__border: 1px solid $lightblue !default;
Description
A default link's border
when focused
Type
{string}
link--secondary__color
Remove in 2.0.0
$link--secondary__color: map-get($gray-color-steps, 800) !default;
Description
A secondary link's color
Type
{color}
link--secondary
Remove in 2.0.0
$link--secondary: 1px solid transparent !default;
Description
A secondary link's border
Type
{string}
link--secondary--hover__color
Remove in 2.0.0
$link--secondary--hover__color: map-get($gray-color-steps, 500) !default;
Description
A secondary link's color
on hover
Type
{color}
link--secondary--active__color
Remove in 2.0.0
$link--secondary--active__color: map-get($gray-color-steps, 700) !default;
Description
A secondary link's color
when active
Type
{color}
link--secondary--disabled__color
Remove in 2.0.0
$link--secondary--disabled__color: map-get($gray-color-steps, 500) !default;
Description
A secondary link's color
when disabled
Type
{color}
link--secondary--focus__border
Remove in 2.0.0
$link--secondary--focus__border: 1px solid map-get($gray-color-steps, 400) !default;
Description
A secondary link's border
when focused
Type
{string}
link--disabled__color
$link--disabled__color: map-get($gray-color-steps, 500) !default;
Description
A disabled link's color
Type
{color}
link--disabled--focus__border
$link--disabled--focus__border: 1px solid $gray !default;
Description
A disabled link's border
when focused
Type
{border}
main__padding--bottom
$main__padding--bottom: 5rem !default;
Description
Main bottom padding, equal to the footer height
Type
{number}
message--info__background-color
$message--info__background-color: transparent !default;
Description
Message info background-color
Type
{color}
message--info__color
$message--info__color: map-get($gray-color-steps, 900) !default;
Description
Message info color
Type
{color}
message--info__icon__background-color
$message--info__icon__background-color: $color-state-info !default;
Description
Message info icon background-color
Type
{color}
message--info__icon__border
$message--info__icon__border: 2px solid map-get($blue-color-steps, 200) !default;
Description
Message info icon border
Type
{string}
message--info__icon__color
$message--info__icon__color: $white !default;
Description
Message info icon color
Type
{color}
message--info__heading__color
$message--info__heading__color: $color-state-info !default;
Description
Message info heading color
Type
{color}
message--info__message__background-color
$message--info__message__background-color: $color-state-info !default;
Description
Message info message content background-color
Type
{color}
message--info__message__color
$message--info__message__color: $white !default;
Description
Message info message content color
Type
{color}
message--warning__background-color
$message--warning__background-color: transparent !default;
Description
Message warning background-color
Type
{color}
message--warning__color
$message--warning__color: map-get($gray-color-steps, 900) !default;
Description
Message warning color
Type
{color}
message--warning__icon__background-color
$message--warning__icon__background-color: $color-state-warning !default;
Description
Message warning icon background-color
Type
{color}
message--warning__icon__border
$message--warning__icon__border: 2px solid $color-state-warning--dark !default;
Description
Message warning icon border
Type
{string}
message--warning__icon__color
$message--warning__icon__color: $white !default;
Description
Message warning icon color
Type
{color}
message--warning__heading__color
$message--warning__heading__color: $color-state-warning !default;
Description
Message warning heading color
Type
{color}
message--warning__message__background-color
$message--warning__message__background-color: $color-state-warning !default;
Description
Message warning message content background-color
Type
{color}
message--warning__message__color
$message--warning__message__color: $white !default;
Description
Message warning message content color
Type
{color}
message--error__background-color
$message--error__background-color: transparent !default;
Description
Message error background-color
Type
{color}
message--error__color
$message--error__color: map-get($gray-color-steps, 900) !default;
Description
Message error color
Type
{color}
message--error__icon__background-color
$message--error__icon__background-color: $color-state-danger !default;
Description
Message error icon background-color
Type
{color}
message--error__icon__border
$message--error__icon__border: 2px solid $color-state-danger--dark !default;
Description
Message error icon border
Type
{string}
message--error__icon__color
$message--error__icon__color: $white !default;
Description
Message error icon color
Type
{color}
message--error__heading__color
$message--error__heading__color: $color-state-danger !default;
Description
Message error heading color
Type
{color}
message--error__message__background-color
$message--error__message__background-color: $color-state-danger !default;
Description
Message error message content background-color
Type
{color}
message--error__message__color
$message--error__message__color: $white !default;
Description
Message error message content color
Type
{color}
message--success__background-color
$message--success__background-color: transparent !default;
Description
Message success background-color
Type
{color}
message--success__color
$message--success__color: map-get($gray-color-steps, 900) !default;
Description
Message success color
Type
{color}
message--success__icon__background-color
$message--success__icon__background-color: $color-state-success !default;
Description
Message success icon background-color
Type
{color}
message--success__icon__border
$message--success__icon__border: 2px solid $color-state-success--dark !default;
Description
Message success icon border
Type
{string}
message--success__icon__color
$message--success__icon__color: $white !default;
Description
Message success icon color
Type
{color}
message--success__heading__color
$message--success__heading__color: $color-state-success !default;
Description
Message success heading color
Type
{color}
message--success__message__background-color
$message--success__message__background-color: $color-state-success !default;
Description
Message success message content background-color
Type
{color}
message--success__message__color
$message--success__message__color: $white !default;
Description
Message success message content color
Type
{color}
modal__background-color
$modal__background-color: $white !default;
Description
Modal background-color
Type
{color}
modal__border-radius
$modal__border-radius: .25rem !default;
Description
Modal border-radius
Type
{number}
modal__close__color
$modal__close__color: $white !default;
Description
Modal close button color
Type
{color}
number-selector__border-radius
$number-selector__border-radius: .25rem !default;
Description
Number picker border-radius
Type
{number}
number-selector__background-color
$number-selector__background-color: $white !default;
Description
Number selector background-color
Type
{color}
number-selector__border
$number-selector__border: 1px solid $green !default;
Description
Number selector border
Type
{string}
number-selector__color
$number-selector__color: map-get($gray-color-steps, 700);
Description
Number selector color
Type
{color}
number-selector__label__color
$number-selector__label__color: map-get($gray-color-steps, 800) !default;
Description
Number selector label color
Type
{color}
number-selector__label__font-size
$number-selector__label__font-size: zeta !default;
Description
Number selector label color
Type
{color}
number-selector__label__font-weight
$number-selector__label__font-weight: 400 !default;
Description
Number selector label font-weight
Type
{number}
number-picker__border-radius
Removing .spark-number-picker
in 2.0.0
$number-picker__border-radius: .25rem !default;
Description
Number picker border-radius
Type
{number}
number-picker__background-color
Removing .spark-number-picker
in 2.0.0
$number-picker__background-color: $white !default;
Description
Number picker background-color
Type
{color}
number-picker__border
Removing .spark-number-picker
in 2.0.0
$number-picker__border: 1px solid $green !default;
Description
Number picker border
Type
{string}
number-picker__color
Removing .spark-number-picker
in 2.0.0
$number-picker__color: map-get($gray-color-steps, 700);
Description
Number picker color
Type
{color}
pagination__item__background-color
$pagination__item__background-color: transparent !default;
Description
Pagination item background-color
Type
{color}
pagination__item__color
$pagination__item__color: $link--default__color !default;
Description
Pagination item text color
Type
{color}
pagination__item--hover__color
$pagination__item--hover__color: $blue !default;
Description
Pagination item text color on hover
Type
{color}
pagination__item--active__background-color
$pagination__item--active__background-color: $blue !default;
Description
Pagination item background-color when active
Type
{color}
pagination__item--active__color
$pagination__item--active__color: $white !default;
Description
Pagination item text color when active
Type
{color}
pagination__item--focus__border-color
$pagination__item--focus__border-color: map-get($blue-color-steps, 100) !default;
Description
Pagination item border color on focus
Type
{color}
panel__border-radius
$panel__border-radius: .25rem !default;
Description
Panel border-radius
Type
{number}
panel__background-color
$panel__background-color: $white !default;
Description
Panel background-color
Type
{color}
panel__border
$panel__border: 1px solid map-get($gray-color-steps, 400) !default;
Description
Panel border
Type
{string}
panel__masthead__box-shadow
$panel__masthead__box-shadow: inset 0 84px 84px -84px $gray !default;
Description
Panel masthead box-shadow
Type
{string}
panel--expand__content__shadow
$panel--expand__content__shadow: 0 3px 16px 0 map-get($gray-color-steps, 300) !default;
Description
Panel expanded content box-shadow
Type
{string}
panel--expand__header__border
$panel--expand__header__border: 1px solid transparent !default;
Description
Panel expanded header border
Type
{string}
panel--expand__header__color
$panel--expand__header__color: map-get($gray-color-steps, 800) !default;
Description
Panel expanded header color
Type
{color}
panel--expand__header--hover__border
$panel--expand__header--hover__border: 1px solid map-get($gray-color-steps, 500) !default;
Description
Panel expanded header border
on hover
Type
{string}
panel--expand__header--hover__color
$panel--expand__header--hover__color: map-get($gray-color-steps, 800) !default;
Description
Panel expanded header color
on hover
Type
{color}
popover__background-color
$popover__background-color: $white !default;
Description
Popover background-color
Type
{color}
popover__border
$popover__border: 1px solid map-get($gray-color-steps, 400) !default;
Description
Popover border
Type
{string}
popover__border-radius
$popover__border-radius: .25rem !default;
Description
Popover border-radius
Type
{number}
popover__box-shadow
$popover__box-shadow: 0 5px 5px rgba(0, 0, 0, .1) !default;
Description
Popover box-shadow
Type
{string}
popover__color
$popover__color: map-get($gray-color-steps, 800) !default;
Description
Popover color
Type
{color}
popover__font-size
$popover__font-size: eta !default;
Description
Popover fontsize
variable
Type
{string}
popover--hover__background-color
$popover--hover__background-color: map-get($gray-color-steps, 100) !default;
Description
Popover background-color
on hover
Type
{color}
popover--hover__color
$popover--hover__color: map-get($gray-color-steps, 900) !default;
Description
Popover color
on hover
Type
{color}
progress-indicator__background-color
$progress-indicator__background-color: $white !default;
Description
Progress indicator background-color
Type
{color}
progress-indicator__meter__background-color
$progress-indicator__meter__background-color: map-get($gray-color-steps, 100) !default;
Description
Progress indicator meter background-color
Type
{color}
progress-indicator__meter__border-color
$progress-indicator__meter__border-color: map-get($gray-color-steps, 400) !default;
Description
Progress indicator meter border-color
Type
{color}
progress-indicator__meter__border
$progress-indicator__meter__border: 1px solid $progress-indicator__meter__border-color !default;
Description
Progress indicator meter border
Type
{string}
progress-indicator__fill__background-color
$progress-indicator__fill__background-color: map-get($blue-color-steps, 200) !default;
Description
Progress indicator fill background-color
Type
{color}
progress-indicator__text__color
$progress-indicator__text__color: map-get($blue-color-steps, 900) !default;
Description
Progress indicator loading text color
Type
{color}
progress-indicator__states__color
$progress-indicator__states__color: map-get($gray-color-steps, 900) !default;
Description
Progress indicator loading states color
Type
{color}
progress-indicator--indeterminate__text__color
$progress-indicator--indeterminate__text__color: map-get($blue-color-steps, 200) !default;
Description
Interdeterminate progress indicator text color
Type
{color}
progress-indicator--btn--default__track__background-color
$progress-indicator--btn--default__track__background-color: map-get($green-color-steps, 300) !default;
Description
Proress indicator default track background-color
Type
{color}
progress-indicator--btn--alt__track__background-color
$progress-indicator--btn--alt__track__background-color: map-get($blue-color-steps, 400) !default;
Description
Progress indicator alternate track background-color
Type
{color}
scroll-to-top__background-color
$scroll-to-top__background-color: transparentize($white, .1) !default;
Description
Background color of scroll to top
Type
{color}
scroll-to-top__border
$scroll-to-top__border: 1px solid map-get($gray-color-steps, 400) !default;
Description
Border of scroll to top
Type
{string}
scroll-to-top__box-shadow
$scroll-to-top__box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.3) !default;
Description
Box shadow of scroll to top
Type
{string}
scroll-to-top__color
$scroll-to-top__color: $blue !default;
Description
Color of the scroll to top icon
Type
{color}
scroll-to-top--hover__border
$scroll-to-top--hover__border: 1px solid map-get($gray-color-steps, 500) !default;
Description
Border of scroll to top on hover
Type
{string}
scroll-to-top--hover__color
$scroll-to-top--hover__color: map-get($blue-color-steps, 400) !default;
Description
Color of the scroll to top icon on hover
Type
{color}
scroll-to-top--focus__box-shadow
$scroll-to-top--focus__box-shadow: 0 0 0 3px map-get($blue-color-steps, 100) !default;
Description
Box shadow of scroll to top on focus
Type
{string}
scroll-to-top--active__box-shadow
$scroll-to-top--active__box-shadow: none !default;
Description
Box shadow of scroll to top on active
Type
{string}
scroll-to-top--active__background-color
$scroll-to-top--active__background-color: map-get($gray-color-steps, 100) !default;
Description
Background color of scroll to top on active
Type
{color}
scroll-to-top--disabled__background-color
$scroll-to-top--disabled__background-color: map-get($gray-color-steps, 100) !default;
Description
Background color of scroll to top when disabled
Type
{color}
scroll-to-top--disabled__border
$scroll-to-top--disabled__border: 1px solid transparent !default;
Description
Border of scroll to top when disabled
Type
{string}
scroll-to-top--disabled__box-shadow
$scroll-to-top--disabled__box-shadow: none !default;
Description
Box shadow of scroll to top when disabled
Type
{string}
scroll-to-top--disabled__color
$scroll-to-top--disabled__color: map-get($gray-color-steps, 400) !default;
Description
Color of the scroll to top icon when disabled
Type
{color}
select--multiple__border--input-top
$select--multiple__border--input-top: calc(5rem + 3px) solid transparent !default;
Description
Select input border
Type
{string}
select--multiple__border-radius
$select--multiple__border-radius: $input__border-radius !default;
Description
Select input border-radius
Type
{number}
select--multiple__background-color
$select--multiple__background-color: $input__background-color !default;
Description
Select input background-color
Type
{color}
select--multiple__border
$select--multiple__border: $input__border !default;
Description
Select input border
Type
{string}
select--multiple__color
$select--multiple__color: $input__color !default;
Description
Select input color
Type
{color}
select--multiple__arrow__background-color
$select--multiple__arrow__background-color: map-get($gray-color-steps, 700) !default;
Description
Select input dropdown arrow background-color
Type
{color}
select--multiple--hover__border
$select--multiple--hover__border: $input--hover__border !default;
Description
Select input border
on hover
Type
{string}
select--multiple--active__border
$select--multiple--active__border: $input--active__border !default;
Description
Select input border
when active
Type
{string}
select--multiple--active__label__color
$select--multiple--active__label__color: $input--active__label__color !default;
Description
Select input dropdown arrow background-color
when arrow
Type
{color}
select--multiple--disabled__background-color
$select--multiple--disabled__background-color: $input--disabled__background-color !default;
Description
Select input background-color
when disabled
Type
{color}
select--multiple--disabled__border
$select--multiple--disabled__border: $input--disabled__border !default;
Description
Select input border
when disabled
Type
{string}
select--multiple--disabled__color
$select--multiple--disabled__color: $input--disabled__color !default;
Description
Select input color
when disabled
Type
{color}
select__border-radius
$select__border-radius: $input__border-radius !default;
Description
Select input border-radius
Type
{number}
select__background-color
$select__background-color: $input__background-color !default;
Description
Select input background-color
Type
{color}
select__border
$select__border: $input__border !default;
Description
Select input border
Type
{string}
select__color
$select__color: $input__color !default;
Description
Select input color
Type
{color}
select__label__color
$select__label__color: $input__label__color !default;
Description
Select input label color
Type
{color}
select__selected-option__color
$select__selected-option__color: map-get($gray-color-steps, 900) !default;
Description
Select selected option color
Type
{color}
select__placeholder__color
$select__placeholder__color: $input__placeholder__color !default;
Description
Select input placeholder copy color
Type
{color}
select__font-weight
$select__font-weight: $input__font-weight !default;
Description
Select input font-weight
Type
{number}
select__font-weight--thin
$select__font-weight--thin: $input__font-weight--thin !default;
Description
Thin select input font-weight
Type
{number}
select__placeholder__font-weight
$select__placeholder__font-weight: $input__placeholder__font-weight !default;
Description
Select input placeholder copy font-weight
Type
{number}
select__arrow__background-color
$select__arrow__background-color: map-get($gray-color-steps, 700) !default;
Description
Select input dropdown arrow background-color
Type
{color}
select--hover__background-color
$select--hover__background-color: $input--hover__background-color !default;
Description
Select input background-color
on hover
Type
{color}
select--hover__border
$select--hover__border: $input--hover__border !default;
Description
Select input border
on hover
Type
{string}
select--hover__color
$select--hover__color: $input--hover__color !default;
Description
Select input color
on hover
Type
{color}
select--hover__arrow__background-color
$select--hover__arrow__background-color: map-get($gray-color-steps, 800) !default;
Description
Select input dropdown arrow background-color
on hover
Type
{color}
select--active__background-color
$select--active__background-color: $input--active__background-color !default;
Description
Select input background-color
when active
Type
{color}
select--active__border
$select--active__border: $input--active__border !default;
Description
Select input border
when active
Type
{string}
select--active__color
$select--active__color: $input--active__color !default;
Description
Select input color
when active
Type
{color}
select--active__label__color
$select--active__label__color: $input--active__label__color !default;
Description
Select input dropdown arrow background-color
when arrow
Type
{color}
select--disabled__background-color
$select--disabled__background-color: $input--disabled__background-color !default;
Description
Select input background-color
when disabled
Type
{color}
select--disabled__border
$select--disabled__border: $input--disabled__border !default;
Description
Select input border
when disabled
Type
{string}
select--disabled__color
$select--disabled__color: $input--disabled__color !default;
Description
Select input color
when disabled
Type
{color}
select--disabled__label__color
$select--disabled__label__color: $select__placeholder__color !default;
Description
Select input label color
when disabled
Type
{color}
select--state__label__color
$select--state__label__color: $input__label__color !default;
Description
Select input state label color
Type
{color}
select--has-value__arrow__background-color
$select--has-value__arrow__background-color: map-get($gray-color-steps, 900) !default;
Description
Select input with a value arrow background-color
Type
{color}
slider__track__background-color
$slider__track__background-color: map-get($gray-color-steps, 100) !default;
Description
Slider track background-color
Type
{color}
slider__track__border
$slider__track__border: 1px solid map-get($gray-color-steps, 400) !default;
Description
Slider track border
Type
{string}
slider__track-fill__background-color
$slider__track-fill__background-color: map-get($green-color-steps, 600) !default;
Description
Slider track value fill background-color
Type
{color}
slider__track-fill__border
$slider__track-fill__border: 1px solid map-get($green-color-steps, 700) !default;
Description
Slider track value fill border
Type
{string}
slider__handle__background-color
$slider__handle__background-color: $green !default;
Description
Slider handle background-color
Type
{color}
slider__handle__border
$slider__handle__border: 1px solid map-get($green-color-steps, 600) !default;
Description
Slider handle border
Type
{string}
slider__handle__box-shadow
$slider__handle__box-shadow: inset 0 -1px 0 map-get($green-color-steps, 600) !default;
Description
Slider handle box-shadow
Type
{string}
slider__handle__color
$slider__handle__color: $white !default;
Description
Slider handle color
Type
{color}
slider--hover__handle__background-color
$slider--hover__handle__background-color: map-get($green-color-steps, 400) !default;
Description
Slider handle background-color
on hover
Type
{color}
slider--hover__handle__border
$slider--hover__handle__border: 1px solid map-get($green-color-steps, 600) !default;
Description
Slider handle border
on hover
Type
{string}
slider--hover__handle__box-shadow
$slider--hover__handle__box-shadow: inset 0 -1px 0 map-get($green-color-steps, 600) !default;
Description
Slider handle box-shadow
on hover
Type
{string}
slider--hover__handle__color
$slider--hover__handle__color: $white !default;
Description
Slider handle color
on hover
Type
{color}
slider__label__color
$slider__label__color: map-get($gray-color-steps, 800) !default;
Description
Slider label color
Type
{color}
slider__label__font-size
$slider__label__font-size: zeta !default;
Description
Slider label color
Type
{color}
slider__label__font-weight
$slider__label__font-weight: 400 !default;
Description
Slider label font-weight
Type
{number}
slider--active__handle__background-color
$slider--active__handle__background-color: map-get($green-color-steps, 400) !default;
Description
Slider handle background-color
when active
Type
{color}
slider--active__handle__border
$slider--active__handle__border: 1px solid map-get($green-color-steps, 700) !default;
Description
Slider handle border
when active
Type
{string}
slider--active__handle__box-shadow
$slider--active__handle__box-shadow: inset 0 -1px 0 1px map-get($green-color-steps, 700) !default;
Description
Slider handle box-shadow
when active
Type
{string}
slider--default--focus__box-shadow
$slider--default--focus__box-shadow: 0 0 0 4px map-get($green-color-steps, 100) !default;
Description
Slider handle box-shadow
when focused
Type
{string}
slider--active__handle__color
$slider--active__handle__color: $slider__handle__color !default;
Description
Slider handle color
when active
Type
{color}
slider--active__handle__disc__background-color
$slider--active__handle__disc__background-color: map-get($green-color-steps, 500) !default;
Description
Slider handle disc color
when active
Type
{color}
slider--disabled__track__background-color
$slider--disabled__track__background-color: map-get($gray-color-steps, 100) !default;
Description
Slider track background-color
when disabled
Type
{color}
slider--disabled__track__border
$slider--disabled__track__border: 1px solid map-get($gray-color-steps, 100) !default;
Description
Slider handle border
when disabled
Type
{string}
slider--disabled__color
$slider--disabled__color: map-get($gray-color-steps, 500) !default;
Description
Slider color
when disabled
Type
{color}
slider--secondary__track__background-color
$slider--secondary__track__background-color: map-get($gray-color-steps, 100) !default;
Description
Secondary slider track background-color
Type
{color}
slider--secondary__track__border
$slider--secondary__track__border: 1px solid map-get($gray-color-steps, 400) !default;
Description
Secondary slider track border
Type
{string}
slider--secondary__track-fill__background-color
$slider--secondary__track-fill__background-color: map-get($blue-color-steps, 200) !default;
Description
Secondary slider track value fill background-color
Type
{color}
slider--secondary__track-fill__border
$slider--secondary__track-fill__border: 1px solid map-get($blue-color-steps, 400) !default;
Description
Secondary slider track value fill border
Type
{string}
slider--secondary__handle__background-color
$slider--secondary__handle__background-color: $white !default;
Description
Secondary slider handle background-color
Type
{color}
slider--secondary__handle__border
$slider--secondary__handle__border: 1px solid map-get($gray-color-steps, 400) !default;
Description
Secondary slider handle border
Type
{string}
slider--secondary__handle__box-shadow
$slider--secondary__handle__box-shadow: inset 0 -1px 0 map-get($gray-color-steps, 400) !default;
Description
Secondary slider handle box-shadow
Type
{string}
slider--secondary__handle__color
$slider--secondary__handle__color: map-get($gray-color-steps, 800) !default;
Description
Secondary slider handle color
Type
{color}
slider--secondary--hover__handle__background-color
$slider--secondary--hover__handle__background-color: $white !default;
Description
Secondary slider handle background-color
on hover
Type
{color}
slider--secondary--hover__handle__border
$slider--secondary--hover__handle__border: 1px solid map-get($gray-color-steps, 800) !default;
Description
Secondary slider handle border
on hover
Type
{string}
slider--secondary--hover__handle__box-shadow
$slider--secondary--hover__handle__box-shadow: inset 0 -1px 0 transparent !default;
Description
Secondary slider handle box-shadow
on hover
Type
{string}
slider--secondary--hover__handle__color
$slider--secondary--hover__handle__color: map-get($gray-color-steps, 700) !default;
Description
Secondary slider handle color
on hover
Type
{color}
slider--secondary--active__handle__background-color
$slider--secondary--active__handle__background-color: $gray !default;
Description
Secondary slider handle background-color
when active
Type
{color}
slider--secondary--active__handle__border
$slider--secondary--active__handle__border: 1px solid map-get($gray-color-steps, 700) !default;
Description
Secondary slider handle border
when active
Type
{string}
slider--secondary--active__handle__box-shadow
$slider--secondary--active__handle__box-shadow: inset 0 -1px 0 transparent !default;
Description
Secondary slider handle box-shadow
when active
Type
{string}
slider--secondary--active__handle__color
$slider--secondary--active__handle__color: map-get($gray-color-steps, 900) !default;
Description
Secondary slider handle color
when active
Type
{color}
slider--secondary--active__handle__disc__background-color
$slider--secondary--active__handle__disc__background-color: map-get($gray-color-steps, 100) !default;
Description
Secondary slider handle disc color
when active
Type
{color}
slider--secondary--disabled__track__background-color
$slider--secondary--disabled__track__background-color: map-get($gray-color-steps, 100) !default;
Description
Secondary slider track background-color
when disabled
Type
{color}
slider--secondary--disabled__track__border
$slider--secondary--disabled__track__border: 1px solid map-get($gray-color-steps, 100) !default;
Description
Secondary slider track border
when disabled
Type
{string}
slider--secondary--disabled__color
$slider--secondary--disabled__color: map-get($gray-color-steps, 500) !default;
Description
Secondary slider color
when disabled
Type
{color}
slider--integrated--hover__handle__box-shadow
$slider--integrated--hover__handle__box-shadow: inset 0 -2px 0 $green !default;
Description
Integrated slider handle box-shadow
on hover
Type
{string}
slider--integrated--active__handle__box-shadow
$slider--integrated--active__handle__box-shadow: inset 0 -2px 0 transparent !default;
Description
Integrated slider handle box-shadow
when active
Type
{string}
splash-screen__background-color
$splash-screen__background-color: $red !default;
Description
Splash screen background-color
Type
{color}
splash-screen__color
$splash-screen__color: $white !default;
Description
Splash screen color
Type
{color}
splash-screen__angle__background-color
$splash-screen__angle__background-color: map-get($red-color-steps, 300) !default;
Description
Splash screen background angle background-color
Type
{color}
splash-screen__panel__border
$splash-screen__panel__border: 1px solid map-get($red-color-steps, 400) !default;
Description
Splash screen panel content border
Type
{string}
step-indicator__title__background-color
$step-indicator__title__background-color: map-get($blue-color-steps, 200) !default;
Description
Step-indicator title background-color
Type
{color}
step-indicator__title__color
$step-indicator__title__color: $white !default;
Description
Step-indicator title color
Type
{color}
step-indicator__body__background-color
$step-indicator__body__background-color: $white !default;
Description
Step-indicator body background-color
Type
{color}
step-indicator__body__border
$step-indicator__body__border: 1px solid map-get($gray-color-steps, 400) !default;
Description
Step-indicator body border
Type
{color}
step-indicator__subtitle__color
$step-indicator__subtitle__color: map-get($blue-color-steps, 400) !default;
Description
Step-indicator subtitle color
Type
{color}
step-indicator__item__color
$step-indicator__item__color: map-get($gray-color-steps, 800) !default;
Description
Step-indicator item color
Type
{color}
step-indicator__item--hover__color
$step-indicator__item--hover__color: map-get($gray-color-steps, 900) !default;
Description
Step-indicator item hover color
Type
{color}
step-indicator__item--dropdown--hover__background-color
$step-indicator__item--dropdown--hover__background-color: map-get($gray-color-steps, 100) !default;
Description
Step-indicator item dropdown hover background color
Type
{color}
step-indicator__item--focus__color
$step-indicator__item--focus__color: map-get($gray-color-steps, 800) !default;
Description
Step-indicator item focus color
Type
{color}
step-indicator__icon__border-radius
$step-indicator__icon__border-radius: 50% !default;
Description
Step-indicator icon border radius
Type
{number}
step-indicator__icon__border
$step-indicator__icon__border: 1px solid map-get($gray-color-steps, 400) !default;
Description
Step-indicator icon border
Type
{string}
step-indicator__icon__background-color
$step-indicator__icon__background-color: $white !default;
Description
Step-indicator icon background-color
Type
{color}
step-indicator__icon__connection-line__color
$step-indicator__icon__connection-line__color: map-get($gray-color-steps, 400) !default;
Description
Step-indicator icon connection line color
Type
{color}
step-indicator__icon--hover__border
$step-indicator__icon--hover__border: 1px solid map-get($gray-color-steps, 500) !default;
Description
Step-indicator icon hover border
Type
{string}
step-indicator__icon--completed__background-color
$step-indicator__icon--completed__background-color: map-get($blue-color-steps, 150) !default;
Description
Step-indicator icon completed backgound color
Type
{color}
step-indicator__icon--completed__color
$step-indicator__icon--completed__color: $white !default;
Description
Step-indicator icon completed color
Type
{color}
step-indicator__icon--completed__border-color
$step-indicator__icon--completed__border-color: map-get($blue-color-steps, 150) !default;
Description
Step-indicator icon completed border color
Type
{color}
step-indicator__icon--current__background-color
$step-indicator__icon--current__background-color: map-get($blue-color-steps, 400) !default;
Description
Step-indicator icon current backgound color
Type
{color}
step-indicator__icon--current__color
$step-indicator__icon--current__color: $white !default;
Description
Step-indicator icon current color
Type
{color}
step-indicator__icon--current__border-color
$step-indicator__icon--current__border-color: map-get($blue-color-steps, 400) !default;
Description
Step-indicator icon current border color
Type
{color}
step-indicator__icon--focus__box-shadow
$step-indicator__icon--focus__box-shadow: 0 0 0 4px map-get($blue-color-steps, 100) !default;
Description
Step-indicator icon focus box-shadow
Type
{string}
step-indicator__icon--disabled__color
$step-indicator__icon--disabled__color: map-get($gray-color-steps, 500) !default;
Description
Step-indicator icon disabled color
Type
{color}
step-indicator__icon--disabled__border-color
$step-indicator__icon--disabled__border-color: map-get($gray-color-steps, 400) !default;
Description
Step-indicator icon disabled border color
Type
{color}
step-indicator__text--completed__color
$step-indicator__text--completed__color: map-get($gray-color-steps, 800) !default;
Description
Step-indicator text completed color
Type
{color}
step-indicator__text--current__color
$step-indicator__text--current__color: map-get($blue-color-steps, 400) !default;
Description
Step-indicator text current color
Type
{color}
step-indicator__text--disabled__color
$step-indicator__text--disabled__color: map-get($gray-color-steps, 500) !default;
Description
Step-indicator text disabled color
Type
{color}
step-indicator__list--dropdown__background-color
$step-indicator__list--dropdown__background-color: $white !default;
Description
Step-indicator list dropdown background-color
Type
{string}
step-indicator__list--dropdown__box-shadow
$step-indicator__list--dropdown__box-shadow: 1px 1px 5px map-get($gray-color-steps, 400) !default;
Description
Step-indicator list dropdown box-shadow
Type
{string}
step-indicator__list--dropdown__border
$step-indicator__list--dropdown__border: 1px solid map-get($gray-color-steps, 400) !default;
Description
Step-indicator list dropdown border
Type
{string}
step-indicator__item--dropdown--expand__background-color
$step-indicator__item--dropdown--expand__background-color: map-get($gray-color-steps, 100) !default;
Description
Step-indicator item dropdown expand background-color
Type
{string}
step-indicator__item--dropdown__header__border
$step-indicator__item--dropdown__header__border: 1px solid map-get($gray-color-steps, 400) !default;
Description
Step-indicator item dropdown expand background-color
Type
{string}
spark-step-indicator__label--dropdown__arrow__border-color
$spark-step-indicator__label--dropdown__arrow__border-color: map-get($gray-color-steps, 800) !default;
Description
Step-indicator label dropdown arrow color
Type
{color}
table__head__background-color
$table__head__background-color: map-get($gray-color-steps, 800) !default;
Description
Table heading background-color
Type
{color}
table__head__border-color
$table__head__border-color: map-get($gray-color-steps, 900) !default;
Description
Table heading border-color
Type
{color}
table__head__color
$table__head__color: $white !default;
Description
Table heading color
Type
{color}
table__head__font-weight
$table__head__font-weight: 400 !default;
Description
Table heading font-weight
Type
{number}
table__head--sorted__font-weight
$table__head--sorted__font-weight: 700 !default;
Description
Sorting table heading font-weight
Type
{number}
table__head__font-size
$table__head__font-size: eta !default;
Description
Table heading fontsize
variable
Type
{string}
table__head__text-transform
$table__head__text-transform: uppercase !default;
Description
Table heading text-transform
Type
{string}
table__head--hover__color
$table__head--hover__color: map-get($gray-color-steps, 400) !default;
Description
Table heading color
on hover
Type
{color}
table__head--disabled__color
$table__head--disabled__color: map-get($gray-color-steps, 500) !default;
Description
Table heading color
Type
{color}
table__background-color
$table__background-color: $white !default;
Description
Table background-color
Type
{color}
table__border-color
$table__border-color: map-get($gray-color-steps, 400) !default;
Description
Table border-color
Type
{color}
table--hover__background-color
$table--hover__background-color: transparentize($lightblue, .9) !default;
Description
Table background-color
on hover
Type
{color}
table--hover__color
$table--hover__color: map-get($gray-color-steps, 800) !default;
Description
Table color
on hover
Type
{color}
table--active__background-color
$table--active__background-color: map-get($gray-color-steps, 100) !default;
Description
Table background-color
when active
Type
{color}
table--active__border-color
$table--active__border-color: map-get($gray-color-steps, 800) !default;
Description
Table border-color
when active
Type
{color}
table--active__color
$table--active__color: map-get($gray-color-steps, 900) !default;
Description
Table color
when active
Type
{color}
table--condensed__body__font-size
$table--condensed__body__font-size: eta !default;
Description
Condensed table body content fontsize
variable
Type
{string}
table__input__border-color
$table__input__border-color: map-get($gray-color-steps, 400) !default;
Description
Table input
`border-color
Type
{color}
table__input--hover__background-color
$table__input--hover__background-color: transparentize($white, .5) !default;
Description
Table input
background-color
when hover
Type
{color}
table__input--hover__border-color
$table__input--hover__border-color: map-get($gray-color-steps, 500) !default;
Description
Table input
border-color
when hover
Type
{color}
table__input--hover__color
$table__input--hover__color: map-get($gray-color-steps, 900) !default;
Description
Table input
color
when hover
Type
{color}
table__input--focus__background-color
$table__input--focus__background-color: inherit !default;
Description
Table input
background-color
when focus
Type
{color}
table__input--focus__box-shadow
$table__input--focus__box-shadow: 0 0 1px 2px map-get($gray-color-steps, 300) !default;
Description
Table input
box-shadow
when focus
Type
{string}
table__input--focus__border-color
$table__input--focus__border-color: map-get($gray-color-steps,500) !default;
Description
Table input
border-color
when focus
Type
{color}
table__input--focus__color
$table__input--focus__color: map-get($gray-color-steps, 1000) !default;
Description
Table input
color
when focus
Type
{color}
table__input--editing__background-color
$table__input--editing__background-color: map-get($gray-color-steps, 100) !default;
Description
Table input
background-color
when editing
Type
{color}
table__input--editing__box-shadow
$table__input--editing__box-shadow: 0 0 2px 2px map-get($gray-color-steps, 100) !default;
Description
Table input
box-shadow
when editing
Type
{string}
table__input--editing__border-color
$table__input--editing__border-color: map-get($gray-color-steps,700) !default;
Description
Table input
border-color
when editing
Type
{color}
table__edit-actions__background
$table__edit-actions__background: linear-gradient(to left, rgba(100, 100, 100, 0.5), transparent) !default;
Description
Table edit input group's drop shadow
Type
{string}
table--disabled__color
$table--disabled__color: map-get($gray-color-steps, 500);
Description
Disabled text color
Type
{color}
tabs__background-color
$tabs__background-color: map-get($gray-color-steps, 100) !default;
Description
Tabs background-color
Type
{color}
tabs__border
$tabs__border: 1px solid map-get($gray-color-steps, 400) !default;
Description
Tabs border
Type
{string}
tabs__color
$tabs__color: map-get($gray-color-steps, 800) !default;
Description
Tabs color
Type
{color}
tabs__box-shadow
$tabs__box-shadow: inset 0 -12px 16px -10px map-get($gray-color-steps, 400) !default;
Description
Tabs box-shadow
Type
{string}
tabs--hover__background-color
$tabs--hover__background-color: $tabs__background-color !default;
Description
Tabs background-color
on hover
Type
{color}
tabs--hover__border
$tabs--hover__border: 1px solid $tabs__border !default;
Description
Tabs border
on hover
Type
{string}
tabs--hover__color
$tabs--hover__color: map-get($gray-color-steps, 700) !default;
Description
Tabs color
on hover
Type
{color}
tabs--active__background-color
$tabs--active__background-color: $white !default;
Description
Tabs background-color
when active
Type
{color}
tabs--active__border
$tabs--active__border: 1px solid map-get($gray-color-steps, 500) !default;
Description
Tabs border
when active
Type
{string}
tabs--active__box-shadow
$tabs--active__box-shadow: map-get($gray-color-steps, 400) !default;
Description
Tabs box-shadow
when active
Type
{string}
tabs--active__color
$tabs--active__color: map-get($gray-color-steps, 1000) !default;
Description
Tabs color
when active
Type
{color}
tabs--focus__border
$tabs--focus__border: 1px solid map-get($gray-color-steps, 500) !default;
Description
Tabs border
when focus
Type
{string}
input__border-radius
$input__border-radius: .25rem !default;
Description
Text input border-radius
Type
{number}
input__background-color
$input__background-color: $white !default;
Description
Text input background-color
Type
{color}
input__border
$input__border: 1px solid map-get($gray-color-steps, 400) !default;
Description
Text input border
Type
{string}
input__color
$input__color: map-get($gray-color-steps, 1000) !default;
Description
Text input color
Type
{color}
input__label__color
$input__label__color: map-get($gray-color-steps, 800) !default;
Description
Text input label color
Type
{color}
input__placeholder__color
$input__placeholder__color: map-get($gray-color-steps, 700) !default;
Description
Text input placeholder color
Type
{color}
input__font-weight
$input__font-weight: 400 !default;
Description
Text input font-weight
Type
{number}
input__font-weight--thin
$input__font-weight--thin: 300 !default;
Description
Thin text input font-weight
Type
{number}
input__placeholder__font-weight
$input__placeholder__font-weight: 300 !default;
Description
Text input placeholder font-weight
Type
{number}
input__message__font-size
$input__message__font-size: zeta !default;
Description
Text input fontsize
variable
Type
{string}
input__message__font-weight
$input__message__font-weight: 700 !default;
Description
Text input fontsize
variable
Type
{string}
input--hover__background-color
$input--hover__background-color: $white !default;
Description
Text input background-color
on hover
Type
{color}
input--hover__border
$input--hover__border: 1px solid map-get($gray-color-steps, 500) !default;
Description
Text input border
on hover
Type
{string}
input--hover__color
$input--hover__color: map-get($gray-color-steps, 800) !default;
Description
Text input color
on hover
Type
{color}
input--active__background-color
$input--active__background-color: map-get($gray-color-steps, 100) !default;
Description
Text input background-color
when active
Type
{color}
input--active__border
$input--active__border: 1px solid map-get($gray-color-steps, 700) !default;
Description
Text input border
when active
Type
{string}
input--active__color
$input--active__color: map-get($gray-color-steps, 1000) !default;
Description
Text input color
when active
Type
{color}
input--active__label__color
$input--active__label__color: map-get($green-color-steps, 400) !default;
Description
Text input label color
when active
Type
{color}
input--disabled__background-color
$input--disabled__background-color: map-get($gray-color-steps, 100) !default;
Description
Text input background-color
when disabled
Type
{color}
input--disabled__border
$input--disabled__border: 1px solid map-get($gray-color-steps, 100) !default;
Description
Text input border
when disabled
Type
{string}
input--disabled__color
$input--disabled__color: map-get($gray-color-steps, 500) !default;
Description
Text input color
when disabled
Type
{color}
input--error__color
$input--error__color: $white !default;
Description
Text input with an error color
Type
{color}
input--typeahead__placeholder__color
$input--typeahead__placeholder__color: map-get($gray-color-steps, 500) !default;
Description
Text input with a typeahead color
Type
{color}
toggle__background-color
$toggle__background-color: $white !default;
Description
Toggle background-color
Type
{color}
toggle__border
$toggle__border: 1px solid map-get($gray-color-steps, 400) !default;
Description
Toggle border
Type
{string}
toggle__color
$toggle__color: map-get($gray-color-steps, 800) !default;
Description
Toggle color
Type
{color}
toggle__track__background-color
$toggle__track__background-color: map-get($gray-color-steps, 100) !default;
Description
Toggle track background-color
Type
{color}
toggle__track__border
$toggle__track__border: 1px solid map-get($gray-color-steps, 400) !default;
Description
Toggle track border
Type
{string}
toggle__handle__background-color
$toggle__handle__background-color: $white !default;
Description
Toggle handle background-color
Type
{color}
toggle__handle__border
$toggle__handle__border: 1px solid map-get($gray-color-steps, 400) !default;
Description
Toggle handle border
Type
{string}
toggle__handle__box-shadow
$toggle__handle__box-shadow: inset 0 -1px 0 map-get($gray-color-steps, 400) !default;
Description
Toggle handle box-shadow
Type
{string}
toggle--focus__box-shadow
$toggle--focus__box-shadow: 0 0 0 4px map-get($blue-color-steps, 100) !default;
Description
Toggle focus box-shadow
Type
{string}
toggle--active__background-color
$toggle--active__background-color: map-get($blue-color-steps, 200) !default;
Description
Toggle background-color
when active
Type
{color}
toggle--active__border-color
$toggle--active__border-color: map-get($blue-color-steps, 400) !default;
Description
Toggle border-color
when active
Type
{color}
toggle--active__color
$toggle--active__color: $white !default;
Description
Toggle color
when active
Type
{color}
toggle--active__track__background-color
$toggle--active__track__background-color: map-get($blue-color-steps, 200)!default;
Description
Toggle track background-color
when active
Type
{color}
toggle--active__track__border
$toggle--active__track__border: 1px solid map-get($green-color-steps, 400) !default;
Description
Toggle track border
when active
Type
{string}
toggle--active__handle__border
$toggle--active__handle__border: 1px solid map-get($gray-color-steps, 400) !default;
Description
Toggle handle border
when active
Type
{string}
toggle--active__handle__box-shadow
$toggle--active__handle__box-shadow: inset 0 -1px 0 map-get($gray-color-steps, 100) !default;
Description
Toggle handle box-shadow
when active
Type
{string}
toggle--disabled__background-color
$toggle--disabled__background-color: map-get($gray-color-steps, 100) !default;
Description
Toggle background-color
when disabled
Type
{color}
toggle--disabled__border
$toggle--disabled__border: 1px solid $white !default;
Description
Toggle border
when disabled
Type
{string}
toggle--disabled__color
$toggle--disabled__color: map-get($gray-color-steps, 500) !default;
Description
Toggle color
when disabled
Type
{color}
toggle--disabled__track__background-color
$toggle--disabled__track__background-color: map-get($gray-color-steps, 100) !default;
Description
Toggle track background-color
when disabled
Type
{color}
toggle--disabled__track__border
$toggle--disabled__track__border: 1px solid map-get($gray-color-steps, 100) !default;
Description
Toggle track border
when disabled
Type
{string}
toggle--disabled__handle__background-color
$toggle--disabled__handle__background-color: map-get($gray-color-steps, 100) !default;
Description
Toggle handle background-color
when disabled
Type
{color}
toggle--disabled__handle__border
$toggle--disabled__handle__border: 1px solid $white !default;
Description
Toggle handle border
when disabled
Type
{string}
tooltip__background-color
$tooltip__background-color: map-get($gray-color-steps, 1000) !default;
Description
Tooltip background-color
Type
{color}
tooltip__border-radius
$tooltip__border-radius: .25rem !default;
Description
Tooltip border-radius
Type
{number}
tooltip__color
$tooltip__color: $white !default;
Description
Tooltip color
Type
{color}
tooltip__font-size
$tooltip__font-size: eta !default;
Description
Tooltip font-size
Type
{color}
config/components navigation dots color
config/components/button
variables
btn__border-radius
$btn__border-radius: .25rem !default;
Description
Border radius for buttons
Type
{number}
btn--default__background-color
$btn--default__background-color: $green !default;
Description
Default/primary button background-color
Type
{color}
btn--default__border
$btn--default__border: 1px solid map-get($green-color-steps, 600) !default;
Description
Default/primary button border
Type
{string}
btn--default__box-shadow
$btn--default__box-shadow: inset 0 -2px 0 map-get($green-color-steps, 600) !default;
Description
Default/primary button box-shadow
Type
{string}
btn--default__box-shadow--small
$btn--default__box-shadow--small: inset 0 -2px 0 map-get($green-color-steps, 600) !default;
Description
Small default/primary button box-shadow
Type
{string}
btn--default__color
$btn--default__color: $white !default;
Description
Default/primary button color
Type
{color}
btn--default__font-size
$btn--default__font-size: zeta !default;
Description
Default/primary button fontsize
variable
Type
{string}
btn--default__font-size--large
$btn--default__font-size--large: gamma !default;
Description
Large default/primary button fontsize
variable
Type
{string}
btn--default__font-size--small
$btn--default__font-size--small: eta !default;
Description
Small default/primary button fontsize
variable
Type
{string}
btn--default__font-weight
$btn--default__font-weight: 700 !default;
Description
Default/primary button font-weight
Type
{number}
btn--default--hover__background-color
$btn--default--hover__background-color: map-get($green-color-steps, 400) !default;
Description
Default/primary button background-color
on hover
Type
{color}
btn--default--hover__color
$btn--default--hover__color: $white !default;
Description
Default/primary button color
on hover
Type
{color}
btn--default--focus__box-shadow
$btn--default--focus__box-shadow: 0 0 0 4px map-get($green-color-steps, 100) !default;
Description
Default/primary button box-shadow
on hover
Type
{string}
btn--default--focus__box-shadow--small
$btn--default--focus__box-shadow--small: 0 0 0 3px map-get($green-color-steps, 100) !default;
Description
Small default/primary button box-shadow
on hover
Type
{string}
btn--default--active__background-color
$btn--default--active__background-color: map-get($green-color-steps, 600) !default;
Description
Default/primary button background-color
when active
Type
{color}
btn--default--active__border
$btn--default--active__border: 1px solid map-get($green-color-steps, 700) !default;
Description
Default/primary button border
when active
Type
{string}
btn--default--active__color
$btn--default--active__color: $white !default;
Description
Default/primary button color
when active
Type
{color}
btn--default--disabled__background-color
$btn--default--disabled__background-color: map-get($gray-color-steps, 100) !default;
Description
Default/primary button background-color
when disabled
Type
{color}
btn--default--disabled__border
$btn--default--disabled__border: 1px solid map-get($gray-color-steps, 100) !default;
Description
Default/primary button border
when disabled
Type
{string}
btn--default--disabled__color
$btn--default--disabled__color: map-get($gray-color-steps, 500) !default;
Description
Default/primary button color
when disabled
Type
{color}
btn--brand__background-color
$btn--brand__background-color: map-get($red-color-steps, 400) !default;
Description
Brand button background-color
Type
{color}
btn--brand__border
$btn--brand__border: 1px solid map-get($red-color-steps, 700) !default;
Description
Brand button border
Type
{string}
btn--brand__box-shadow
$btn--brand__box-shadow: inset 0 -2px 0 map-get($red-color-steps, 700) !default;
Description
Brand button box-shadow
Type
{string}
btn--brand__box-shadow--small
$btn--brand__box-shadow--small: inset 0 -1px 0 map-get($red-color-steps, 700) !default;
Description
Small brand button box-shadow
Type
{string}
btn--brand--hover__background-color
$btn--brand--hover__background-color: map-get($red-color-steps, 500) !default;
Description
Brand button background-color
on hover
Type
{color}
btn--brand--active__background-color
$btn--brand--active__background-color: map-get($red-color-steps, 600) !default;
Description
Brand button background-color
when active
Type
{color}
btn--brand--active__border
$btn--brand--active__border: 1px solid map-get($red-color-steps, 700) !default;
Description
Brand button border
when active
Type
{string}
btn--brand--focus__box-shadow
$btn--brand--focus__box-shadow: 0 0 0 4px map-get($red-color-steps, 100) !default;
Description
Brand button box-shadow
when focused
Type
{string}
btn--secondary__background-color
$btn--secondary__background-color: $white !default;
Description
Secondary button background-color
Type
{color}
btn--secondary__border
$btn--secondary__border: 1px solid $green !default;
Description
Secondary button border
Type
{string}
btn--secondary__box-shadow
$btn--secondary__box-shadow: inset 0 -2px 0 $green !default;
Description
Secondary button box-shadow
Type
{string}
btn--secondary__box-shadow--small
$btn--secondary__box-shadow--small: inset 0 -1px 0 $green !default;
Description
Small secondary button box-shadow
Type
{string}
btn--secondary__color
$btn--secondary__color: $green !default;
Description
Secondary button color
Type
{color}
btn--secondary--hover__background-color
$btn--secondary--hover__background-color: $white !default;
Description
Secondary button background-color
on hover
Type
{color}
btn--secondary--hover__color
$btn--secondary--hover__color: map-get($green-color-steps, 400) !default;
Description
Secondary button color
on hover
Type
{color}
btn--secondary--hover__border
$btn--secondary--hover__border: 1px solid map-get($green-color-steps, 400) !default;
Description
Secondary button border
on hover
Type
{string}
btn--secondary--hover__box-shadow
$btn--secondary--hover__box-shadow: inset 0 -2px 0 map-get($green-color-steps, 400) !default;
Description
Secondary button box-shadow
on hover
Type
{string}
btn--secondary--hover__box-shadow--small
$btn--secondary--hover__box-shadow--small: inset 0 -1px 0 map-get($green-color-steps, 400) !default;
Description
Ssmall secondary button box-shadow
on hover
Type
{string}
btn--secondary--active__color
$btn--secondary--active__color: map-get($green-color-steps, 600) !default;
Description
Secondary button color
when active
Type
{color}
btn--secondary--active__border
$btn--secondary--active__border: 1px solid map-get($green-color-steps, 600) !default;
Description
Secondary button border
when active
Type
{string}
btn--secondary--active__background-color
$btn--secondary--active__background-color: map-get($gray-color-steps, 100) !default;
Description
Secondary button background-color
when active
Type
{color}
btn--secondary--active__box-shadow
$btn--secondary--active__box-shadow: $btn--secondary--hover__box-shadow !default;
Description
Secondary button box-shadow
when active
Type
{string}
btn--secondary--active__box-shadow--small
$btn--secondary--active__box-shadow--small: $btn--secondary--hover__box-shadow--small !default;
Description
Small secondary button box-shadow
when active
Type
{string}
btn--secondary--focus__box-shadow
$btn--secondary--focus__box-shadow: 0 0 0 4px map-get($green-color-steps, 100) !default;
Description
Secondary button box-shadow
when focused
Type
{string}
btn--secondary--focus__box-shadow--small
$btn--secondary--focus__box-shadow--small: 0 0 0 3px map-get($green-color-steps, 100) !default;
Description
Ssmall secondary button box-shadow
when focused
Type
{string}
btn--alt__background-color
Remove in 2.0.0
$btn--alt__background-color: $blue !default;
Description
Alternate button color
Type
{color}
btn--alt__border
Remove in 2.0.0
$btn--alt__border: 1px solid map-get($blue-color-steps, 400) !default;
Description
Alternate button border
Type
{string}
btn--alt__box-shadow
Remove in 2.0.0
$btn--alt__box-shadow: inset 0 -2px 0 map-get($blue-color-steps, 400) !default;
Description
Alternate button box-shadow
Type
{string}
btn--alt__box-shadow--small
Remove in 2.0.0
$btn--alt__box-shadow--small: inset 0 -1px 0 map-get($blue-color-steps, 400) !default;
Description
Small alternate button box-shadow
Type
{string}
btn--alt__color
Remove in 2.0.0
$btn--alt__color: $white !default;
Description
Alternate button color
Type
{color}
btn--alt--hover__background-color
Remove in 2.0.0
$btn--alt--hover__background-color: map-get($blue-color-steps, 300) !default;
Description
Alternate button background-color
on hover
Type
{color}
btn--alt--hover__color
Remove in 2.0.0
$btn--alt--hover__color: $white !default;
Description
Alternate button color
on hover
Type
{color}
btn--alt--hover__border
Remove in 2.0.0
$btn--alt--hover__border: 1px solid map-get($blue-color-steps, 500) !default;
Description
Alternate button border
on hover
Type
{string}
btn--alt--hover__box-shadow
Remove in 2.0.0
$btn--alt--hover__box-shadow: inset 0 -2px 0 map-get($blue-color-steps, 500) !default;
Description
Alternate button box-shadow
on hover
Type
{string}
btn--alt--hover__box-shadow--small
Remove in 2.0.0
$btn--alt--hover__box-shadow--small: inset 0 -1px 0 $blue !default;
Description
Small alternate button box-shadow
on hover
Type
{string}
btn--alt--active__background-color
Remove in 2.0.0
$btn--alt--active__background-color: map-get($blue-color-steps, 400) !default;
Description
Alternate button background-color
when active
Type
{color}
btn--alt--active__border
Remove in 2.0.0
$btn--alt--active__border: 1px solid map-get($blue-color-steps, 500) !default;
Description
Alternate button border
when active
Type
{string}
btn--alt--active__color
Remove in 2.0.0
$btn--alt--active__color: $white !default;
Description
Alternate button background-color
when active
Type
{color}
btn--alt--active__box-shadow
Remove in 2.0.0
$btn--alt--active__box-shadow: inset 0 -2px 0 map-get($blue-color-steps, 500) !default;
Description
Alternate button box-shadow
when active
Type
{string}
btn--alt--active__box-shadow--small
Remove in 2.0.0
$btn--alt--active__box-shadow--small: inset 0 -1px 0 map-get($blue-color-steps, 500) !default;
Description
Small Alternate button box-shadow
when active
Type
{string}
btn--alt--focus__box-shadow
Remove in 2.0.0
$btn--alt--focus__box-shadow: 0 0 0 4px map-get($blue-color-steps, 100) !default;
Description
Alternate button box-shadow
when focused
Type
{string}
btn--alt--focus__box-shadow--small
Remove in 2.0.0
$btn--alt--focus__box-shadow--small: 0 0 0 3px map-get($blue-color-steps, 100) !default;
Description
Small Alternate button box-shadow
when focused
Type
{string}
btn--negative__background-color
$btn--negative__background-color: $white !default;
Description
Negative button background-color
Type
{color}
btn--negative__border
$btn--negative__border: 1px solid $red !default;
Description
Negative button border
Type
{string}
btn--negative__box-shadow
$btn--negative__box-shadow: inset 0 -2px 0 $red !default;
Description
Negative button box-shadow
Type
{string}
btn--negative__box-shadow--small
$btn--negative__box-shadow--small: inset 0 -1px 0 $red !default;
Description
Small negative button box-shadow
Type
{string}
btn--negative__color
$btn--negative__color: $red !default;
Description
Negative button color
Type
{color}
btn--negative--hover__background-color
$btn--negative--hover__background-color: $white !default;
Description
Negative button background-color
on hover
Type
{color}
btn--negative--hover__color
$btn--negative--hover__color: map-get($red-color-steps, 400) !default;
Description
Negative button color
on hover
Type
{color}
btn--negative--hover__border
$btn--negative--hover__border: 1px solid map-get($red-color-steps, 400) !default;
Description
Negative button border
on hover
Type
{string}
btn--negative--hover__box-shadow
$btn--negative--hover__box-shadow: inset 0 -2px 0 map-get($red-color-steps, 400) !default;
Description
Negative button box-shadow
on hover
Type
{string}
btn--negative--hover__box-shadow--small
$btn--negative--hover__box-shadow--small: inset 0 -1px 0 map-get($red-color-steps, 400) !default;
Description
Small negative button box-shadow
on hover
Type
{string}
btn--negative--active__background-color
$btn--negative--active__background-color: map-get($gray-color-steps, 100) !default;
Description
Negative button background-color
when active
Type
{color}
btn--negative--active__border
$btn--negative--active__border: 1px solid map-get($red-color-steps, 500) !default;
Description
Negative button border
when active
Type
{string}
btn--negative--active__color
$btn--negative--active__color: map-get($red-color-steps, 500) !default;
Description
Negative button color
when active
Type
{color}
btn--negative--active__box-shadow
$btn--negative--active__box-shadow: inset 0 -2px 0 map-get($red-color-steps, 500) !default;
Description
Negative button box-shadow
when active
Type
{string}
btn--negative--active__box-shadow--small
$btn--negative--active__box-shadow--small: inset 0 -1px 0 map-get($red-color-steps, 500) !default;
Description
Small negative button box-shadow
when active
Type
{string}
btn--negative--focus__box-shadow
$btn--negative--focus__box-shadow: 0 0 0 4px map-get($red-color-steps, 100) !default;
Description
Negative button box-shadow
when focused
Type
{string}
btn--negative--focus__box-shadow--small
$btn--negative--focus__box-shadow--small: 0 0 0 3px map-get($red-color-steps, 100) !default;
Description
Small negative button box-shadow
when focused
Type
{string}
btn--text__color
$btn--text__color: $green !default;
Description
Text button color
Type
{color}
btn--text--hover__color
$btn--text--hover__color: map-get($green-color-steps, 400) !default;
Description
Text button color
on hover
Type
{color}
btn--icon__color
$btn--icon__color: map-get($gray-color-steps, 800) !default;
Description
Icon button color
Type
{color}
btn--icon__background-color
$btn--icon__background-color: transparent !default;
Description
Icon button background-color
Type
{color}
btn--icon__border-radius
$btn--icon__border-radius: .25rem !default;
Description
Icon button border-radius
Type
{color}
btn--icon__border
$btn--icon__border: 4px solid transparent !default;
Description
Icon button border
Type
{color}
btn--icon__font-size
$btn--icon__font-size: delta !default;
Description
Small default/primary button fontsize
variable
Type
{string}
btn--icon--focus__border
$btn--icon--focus__border: 4px solid map-get($gray-color-steps, 100) !default;
Description
Icon button border
on focus
Type
{color}
btn--icon--hover__color
$btn--icon--hover__color: map-get($gray-color-steps, 900) !default;
Description
Icon button color
on hover
Type
{color}
btn--icon--hover__background-color
$btn--icon--hover__background-color: map-get($gray-color-steps, 100) !default;
Description
Icon button background-color
on hover
Type
{color}
btn--icon--active__color
$btn--icon--active__color: $white !default;
Description
Icon button color
on active
Type
{color}
btn--icon--active__background-color
$btn--icon--active__background-color: $blue !default;
Description
Icon button background-color
on active
Type
{color}
btn--icon--active__border
$btn--icon--active__border: 4px solid $blue !default;
Description
Icon button border
on focus
Type
{color}
btn--icon--disabled__color
$btn--icon--disabled__color: map-get($gray-color-steps, 500) !default;
Description
Icon button color
when-disabled
Type
{color}
btn--view-more__background-color
$btn--view-more__background-color: $white !default;
Description
View More button background-color
Type
{color}
btn--view-more__border
$btn--view-more__border: 1px solid map-get($gray-color-steps, 400) !default;
Description
View More button border
Type
{string}
btn--view-more__box-shadow
$btn--view-more__box-shadow: 0 0 4px map-get($gray-color-steps, 400) !default;
Description
View More button box-shadow
Type
{string}
btn--view-more__box-shadow--small
$btn--view-more__box-shadow--small: 0 0 2px map-get($gray-color-steps, 400) !default;
Description
Small View More button box-shadow
Type
{string}
btn--view-more__color
$btn--view-more__color: $blue !default;
Description
View More button color
Type
{color}
btn--view-more--hover__background-color
$btn--view-more--hover__background-color: $white !default;
Description
View More button background-color
on hover
Type
{color}
btn--view-more--hover__color
$btn--view-more--hover__color: map-get($blue-color-steps, 400) !default;
Description
View More button color
on hover
Type
{color}
btn--view-more--hover__border
$btn--view-more--hover__border: 1px solid map-get($gray-color-steps, 500) !default;
Description
View More button border
on hover
Type
{string}
btn--view-more--hover__box-shadow
$btn--view-more--hover__box-shadow: 0 0 2px map-get($gray-color-steps, 500) !default;
Description
View More button box-shadow
on hover
Type
{string}
btn--view-more--hover__box-shadow--small
$btn--view-more--hover__box-shadow--small: 0 0 1px map-get($gray-color-steps, 500) !default;
Description
Ssmall View More button box-shadow
on hover
Type
{string}
btn--view-more--active__color
$btn--view-more--active__color: $blue !default;
Description
View More button color
when active
Type
{color}
btn--view-more--active__border
$btn--view-more--active__border: 1px solid map-get($gray-color-steps, 500) !default;
Description
View More button border
when active
Type
{string}
btn--view-more--active__background-color
$btn--view-more--active__background-color: map-get($gray-color-steps, 100) !default;
Description
View More button background-color
when active
Type
{color}
btn--view-more--active__box-shadow
$btn--view-more--active__box-shadow: none !default;
Description
View More button box-shadow
when active
Type
{string}
btn--view-more--active__box-shadow--small
$btn--view-more--active__box-shadow--small: none !default;
Description
Small View More button box-shadow
when active
Type
{string}
btn--view-more--focus__box-shadow
$btn--view-more--focus__box-shadow: 0 0 0 4px map-get($blue-color-steps, 100) !default;
Description
View More button box-shadow
when focused
Type
{string}
btn--view-more--focus__box-shadow--small
$btn--view-more--focus__box-shadow--small: 0 0 0 3px map-get($blue-color-steps, 100) !default;
Description
Ssmall View More button box-shadow
when focused
Type
{string}
config/components/checkbox
variables
checkbox__background-color
$checkbox__background-color: $white !default;
Description
Checkbox background-color
Type
{color}
checkbox__border
$checkbox__border: 1px solid map-get($gray-color-steps, 500) !default;
Description
Checkbox border
Type
{string}
checkbox__color
$checkbox__color: map-get($gray-color-steps, 500) !default;
Description
Checkbox color
Type
{color}
checkbox__label__color
$checkbox__label__color: map-get($gray-color-steps, 800) !default;
Description
Checkbox label color
Type
{color}
checkbox__label--hover__color
$checkbox__label--hover__color: map-get($gray-color-steps, 900) !default;
Description
Checkbox label color
on hover
Type
{color}
checkbox__icon__color
$checkbox__icon__color: transparent !default;
Description
Checkbox check icon color
Type
{color}
checkbox--hover__background-color
$checkbox--hover__background-color: $white !default;
Description
Checkbox background-color
on hover
Type
{color}
checkbox--hover__border
$checkbox--hover__border: 1px solid map-get($gray-color-steps, 800) !default;
Description
Checkbox border
on hover
Type
{string}
checkbox--hover__color
$checkbox--hover__color: map-get($gray-color-steps, 800) !default;
Description
Checkbox color
on hover
Type
{color}
checkbox--hover__icon__color
$checkbox--hover__icon__color: transparent !default;
Description
Checkbox check icon color
on hover
Type
{color}
checkbox--active__background-color
$checkbox--active__background-color: $white !default;
Description
Checkbox background-color
when active
Type
{color}
checkbox--active__border
$checkbox--active__border: 1px solid map-get($gray-color-steps, 900) !default;
Description
Checkbox border
when active
Type
{string}
checkbox--active__color
$checkbox--active__color: map-get($gray-color-steps, 900) !default;
Description
Checkbox color
when active
Type
{color}
checkbox--active__icon__color
$checkbox--active__icon__color: map-get($blue-color-steps, 200) !default;
Description
Checkbox check icon color
when active
Type
{color}
checkbox--disabled__background-color
$checkbox--disabled__background-color: map-get($gray-color-steps, 100) !default;
Description
Checkbox background-color
when diabled
Type
{color}
checkbox--disabled__border
$checkbox--disabled__border: 1px solid map-get($gray-color-steps, 100) !default;
Description
Checkbox border
when disabled
Type
{string}
checkbox--disabled__color
$checkbox--disabled__color: map-get($gray-color-steps, 500) !default;
Description
Checkbox color
when disabled
Type
{color}
checkbox--disabled__icon__color
$checkbox--disabled__icon__color: transparent !default;
Description
Checkbox check icon color
when disabled
Type
{color}
config/font/list
variables
font-list
$font-list: (
'Roboto': (
100: (
'normal': (
'local': ('Roboto Thin', 'Roboto-Thin'),
'embedded-opentype': '/roboto/Roboto_100.eot?#iefix',
'woff': '/roboto/Roboto_100.woff',
'woff2': '/roboto/Roboto_100.woff2',
'svg': '/roboto/Roboto_100.svg#Roboto',
'truetype': '/roboto/Roboto_100.ttf'
),
'italic': (
'local': ('Roboto Thin Italic', 'Roboto-ThinItalic'),
'embedded-opentype': '/roboto/Roboto_100italic.eot?#iefix',
'woff': '/roboto/Roboto_100italic.woff',
'woff2': '/roboto/Roboto_100italic.woff2',
'svg': '/roboto/Roboto_100italic.svg#Roboto',
'truetype': '/roboto/Roboto_100italic.ttf'
)
),
300: (
'normal': (
'local': ('Roboto Light', 'Roboto-Light'),
'embedded-opentype': '/roboto/Roboto_300.eot?#iefix',
'woff': '/roboto/Roboto_300.woff',
'woff2': '/roboto/Roboto_300.woff2',
'svg': '/roboto/Roboto_300.svg#Roboto',
'truetype': '/roboto/Roboto_300.ttf'
),
'italic': (
'local': ('Roboto Light Italic', 'Roboto-LightItalic'),
'embedded-opentype': '/roboto/Roboto_300italic.eot?#iefix',
'woff': '/roboto/Roboto_300italic.woff',
'woff2': '/roboto/Roboto_300italic.woff2',
'svg': '/roboto/Roboto_300italic.svg#Roboto',
'truetype': '/roboto/Roboto_300italic.ttf'
)
),
400: (
'normal': (
'local': ('Roboto', 'Roboto-Regular'),
'embedded-opentype': '/roboto/Roboto_400.eot?#iefix',
'woff': '/roboto/Roboto_400.woff',
'woff2': '/roboto/Roboto_400.woff2',
'svg': '/roboto/Roboto_400.svg#Roboto',
'truetype': '/roboto/Roboto_400.ttf'
),
'italic': (
'local': ('Roboto Italic', 'Roboto-Italic'),
'embedded-opentype': '/roboto/Roboto_400italic.eot?#iefix',
'woff': '/roboto/Roboto_400italic.woff',
'woff2': '/roboto/Roboto_400italic.woff2',
'svg': '/roboto/Roboto_400italic.svg#Roboto',
'truetype': '/roboto/Roboto_400italic.ttf'
)
),
500: (
'normal': (
'local': ('Roboto Medium', 'Roboto-Medium'),
'embedded-opentype': '/roboto/Roboto_500.eot?#iefix',
'woff': '/roboto/Roboto_500.woff',
'woff2': '/roboto/Roboto_500.woff2',
'svg': '/roboto/Roboto_500.svg#Roboto',
'truetype': '/roboto/Roboto_500.ttf'
),
'italic': (
'local': ('Roboto Medium Italic', 'Roboto-MediumItalic'),
'embedded-opentype': '/roboto/Roboto_500italic.eot?#iefix',
'woff': '/roboto/Roboto_500italic.woff',
'woff2': '/roboto/Roboto_500italic.woff2',
'svg': '/roboto/Roboto_500italic.svg#Roboto',
'truetype': '/roboto/Roboto_500italic.ttf'
)
),
700: (
'normal': (
'local': ('Roboto Bold', 'Roboto-Bold'),
'embedded-opentype': '/roboto/Roboto_700.eot?#iefix',
'woff': '/roboto/Roboto_700.woff',
'woff2': '/roboto/Roboto_700.woff2',
'svg': '/roboto/Roboto_700.svg#Roboto',
'truetype': '/roboto/Roboto_700.ttf'
),
'italic': (
'local': ('Roboto Bold Italic', 'Roboto-BoldItalic'),
'embedded-opentype': '/roboto/Roboto_700italic.eot?#iefix',
'woff': '/roboto/Roboto_700italic.woff',
'woff2': '/roboto/Roboto_700italic.woff2',
'svg': '/roboto/Roboto_700italic.svg#Roboto',
'truetype': '/roboto/Roboto_700italic.ttf'
)
),
900: (
'normal': (
'local': ('Roboto Black', 'Roboto-Black'),
'embedded-opentype': '/roboto/Roboto_900.eot?#iefix',
'woff': '/roboto/Roboto_900.woff',
'woff2': '/roboto/Roboto_900.woff2',
'svg': '/roboto/Roboto_900.svg#Roboto',
'truetype': '/roboto/Roboto_900.ttf'
),
'italic': (
'local': ('Roboto Black Italic', 'Roboto-BlackItalic'),
'embedded-opentype': '/roboto/Roboto_900italic.eot?#iefix',
'woff': '/roboto/Roboto_900italic.woff',
'woff2': '/roboto/Roboto_900italic.woff2',
'svg': '/roboto/Roboto_900italic.svg#Roboto',
'truetype': '/roboto/Roboto_900italic.ttf'
)
)
),
'Roboto Slab': (
100: (
'normal': (
'local': ('Roboto Slab Thin', 'RobotoSlab-Thin'),
'embedded-opentype': '/roboto-slab/Roboto_Slab_100.eot?#iefix',
'woff': '/roboto-slab/Roboto_Slab_100.woff',
'woff2': '/roboto-slab/Roboto_Slab_100.woff2',
'svg': '/roboto-slab/Roboto_Slab_100.svg#RobotoSlab',
'truetype': '/roboto-slab/Roboto_Slab_100.ttf'
)
),
300: (
'normal': (
'local': ('Roboto Slab Light', 'RobotoSlab-Light'),
'embedded-opentype': '/roboto-slab/Roboto_Slab_300.eot?#iefix',
'woff': '/roboto-slab/Roboto_Slab_300.woff',
'woff2': '/roboto-slab/Roboto_Slab_300.woff2',
'svg': '/roboto-slab/Roboto_Slab_300.svg#RobotoSlab',
'truetype': '/roboto-slab/Roboto_Slab_300.ttf'
)
),
400: (
'normal': (
'local': ('Roboto Slab Regular', 'RobotoSlab-Regular'),
'embedded-opentype': '/roboto-slab/Roboto_Slab_400.eot?#iefix',
'woff': '/roboto-slab/Roboto_Slab_400.woff',
'woff2': '/roboto-slab/Roboto_Slab_400.woff2',
'svg': '/roboto-slab/Roboto_Slab_400.svg#RobotoSlab',
'truetype': '/roboto-slab/Roboto_Slab_400.ttf'
)
),
700: (
'normal': (
'local': ('Roboto Slab Bold', 'RobotoSlab-Bold'),
'embedded-opentype': '/roboto-slab/Roboto_Slab_700.eot?#iefix',
'woff': '/roboto-slab/Roboto_Slab_700.woff',
'woff2': '/roboto-slab/Roboto_Slab_700.woff2',
'svg': '/roboto-slab/Roboto_Slab_700.svg#RobotoSlab',
'truetype': '/roboto-slab/Roboto_Slab_700.ttf'
)
)
),
'Roboto Mono': (
100: (
'normal': (
'local': ('Roboto Mono', 'RobotoMono-Regular'),
'embedded-opentype': '/roboto-mono/Roboto_Mono__100.eot?#iefix',
'woff': '/roboto-mono/Roboto_Mono__100.woff',
'woff2': '/roboto-mono/Roboto_Mono__100.woff2',
'svg': '/roboto-mono/Roboto_Mono__100.svg#RobotoMono',
'truetype': '/roboto-mono/Roboto_Mono__100.ttf'
),
'italic': (
'local': ('Roboto Mono', 'RobotoMono-Regular'),
'embedded-opentype': '/roboto-mono/Roboto_Mono__100italic.eot?#iefix',
'woff': '/roboto-mono/Roboto_Mono__100italic.woff',
'woff2': '/roboto-mono/Roboto_Mono__100italic.woff2',
'svg': '/roboto-mono/Roboto_Mono__100italic.svg#RobotoMono',
'truetype': '/roboto-mono/Roboto_Mono__100italic.ttf'
)
),
300: (
'normal': (
'local': ('Roboto Mono', 'RobotoMono-Regular'),
'embedded-opentype': '/roboto-mono/Roboto_Mono__300.eot?#iefix',
'woff': '/roboto-mono/Roboto_Mono__300.woff',
'woff2': '/roboto-mono/Roboto_Mono__300.woff2',
'svg': '/roboto-mono/Roboto_Mono__300.svg#RobotoMono',
'truetype': '/roboto-mono/Roboto_Mono__300.ttf'
),
'italic': (
'local': ('Roboto Mono', 'RobotoMono-Regular'),
'embedded-opentype': '/roboto-mono/Roboto_Mono__300italic.eot?#iefix',
'woff': '/roboto-mono/Roboto_Mono__300italic.woff',
'woff2': '/roboto-mono/Roboto_Mono__300italic.woff2',
'svg': '/roboto-mono/Roboto_Mono__300italic.svg#RobotoMono',
'truetype': '/roboto-mono/Roboto_Mono__300italic.ttf'
)
),
400: (
'normal': (
'local': ('Roboto Mono', 'RobotoMono-Regular'),
'embedded-opentype': '/roboto-mono/Roboto_Mono_400.eot?#iefix',
'woff': '/roboto-mono/Roboto_Mono_400.woff',
'woff2': '/roboto-mono/Roboto_Mono_400.woff2',
'svg': '/roboto-mono/Roboto_Mono_400.svg#RobotoMono',
'truetype': '/roboto-mono/Roboto_Mono_400.ttf'
),
'italic': (
'local': ('Roboto Mono', 'RobotoMono-Regular'),
'embedded-opentype': '/roboto-mono/Roboto_Mono__400italic.eot?#iefix',
'woff': '/roboto-mono/Roboto_Mono__400italic.woff',
'woff2': '/roboto-mono/Roboto_Mono__400italic.woff2',
'svg': '/roboto-mono/Roboto_Mono__400italic.svg#RobotoMono',
'truetype': '/roboto-mono/Roboto_Mono__400italic.ttf'
)
),
500: (
'normal': (
'local': ('Roboto Mono', 'RobotoMono-Regular'),
'embedded-opentype': '/roboto-mono/Roboto_Mono__500.eot?#iefix',
'woff': '/roboto-mono/Roboto_Mono__500.woff',
'woff2': '/roboto-mono/Roboto_Mono__500.woff2',
'svg': '/roboto-mono/Roboto_Mono__500.svg#RobotoMono',
'truetype': '/roboto-mono/Roboto_Mono__500.ttf'
),
'italic': (
'local': ('Roboto Mono', 'RobotoMono-Regular'),
'embedded-opentype': '/roboto-mono/Roboto_Mono__500italic.eot?#iefix',
'woff': '/roboto-mono/Roboto_Mono__500italic.woff',
'woff2': '/roboto-mono/Roboto_Mono__500italic.woff2',
'svg': '/roboto-mono/Roboto_Mono__500italic.svg#RobotoMono',
'truetype': '/roboto-mono/Roboto_Mono__500italic.ttf'
)
),
700: (
'normal': (
'local': ('Roboto Mono', 'RobotoMono-Regular'),
'embedded-opentype': '/roboto-mono/Roboto_Mono__700.eot?#iefix',
'woff': '/roboto-mono/Roboto_Mono__700.woff',
'woff2': '/roboto-mono/Roboto_Mono__700.woff2',
'svg': '/roboto-mono/Roboto_Mono__700.svg#RobotoMono',
'truetype': '/roboto-mono/Roboto_Mono__700.ttf'
),
'italic': (
'local': ('Roboto Mono', 'RobotoMono-Regular'),
'embedded-opentype': '/roboto-mono/Roboto_Mono__700italic.eot?#iefix',
'woff': '/roboto-mono/Roboto_Mono__700italic.woff',
'woff2': '/roboto-mono/Roboto_Mono__700italic.woff2',
'svg': '/roboto-mono/Roboto_Mono__700italic.svg#RobotoMono',
'truetype': '/roboto-mono/Roboto_Mono__700italic.ttf'
)
)
),
'Roboto Condensed': (
300: (
'normal': (
'local': ('Roboto Condensed', 'RobotoCondensed-Regular'),
'embedded-opentype': '/roboto-condensed/Roboto_Condensed__300.eot?#iefix',
'woff': '/roboto-condensed/Roboto_Condensed__300.woff',
'woff2': '/roboto-condensed/Roboto_Condensed__300.woff2',
'svg': '/roboto-condensed/Roboto_Condensed__300.svg#RobotoCondensed',
'truetype': '/roboto-condensed/Roboto_Condensed__300.ttf'
),
'italic': (
'local': ('Roboto Condensed', 'RobotoCondensed-Regular'),
'embedded-opentype': '/roboto-condensed/Roboto_Condensed__300italic.eot?#iefix',
'woff': '/roboto-condensed/Roboto_Condensed__300italic.woff',
'woff2': '/roboto-condensed/Roboto_Condensed__300italic.woff2',
'svg': '/roboto-condensed/Roboto_Condensed__300italic.svg#RobotoCondensed',
'truetype': '/roboto-condensed/Roboto_Condensed__300italic.ttf'
)
),
400: (
'normal': (
'local': ('Roboto Condensed', 'RobotoCondensed-Regular'),
'embedded-opentype': '/roboto-condensed/Roboto_Condensed_400.eot?#iefix',
'woff': '/roboto-condensed/Roboto_Condensed_400.woff',
'woff2': '/roboto-condensed/Roboto_Condensed_400.woff2',
'svg': '/roboto-condensed/Roboto_Condensed_400.svg#RobotoCondensed',
'truetype': '/roboto-condensed/Roboto_Condensed_400.ttf'
),
'italic': (
'local': ('Roboto Condensed', 'RobotoCondensed-Regular'),
'embedded-opentype': '/roboto-condensed/Roboto_Condensed__400italic.eot?#iefix',
'woff': '/roboto-condensed/Roboto_Condensed__400italic.woff',
'woff2': '/roboto-condensed/Roboto_Condensed__400italic.woff2',
'svg': '/roboto-condensed/Roboto_Condensed__400italic.svg#RobotoCondensed',
'truetype': '/roboto-condensed/Roboto_Condensed__400italic.ttf'
)
),
700: (
'normal': (
'local': ('Roboto Condensed', 'RobotoCondensed-Regular'),
'embedded-opentype': '/roboto-condensed/Roboto_Condensed__700.eot?#iefix',
'woff': '/roboto-condensed/Roboto_Condensed__700.woff',
'woff2': '/roboto-condensed/Roboto_Condensed__700.woff2',
'svg': '/roboto-condensed/Roboto_Condensed__700.svg#RobotoCondensed',
'truetype': '/roboto-condensed/Roboto_Condensed__700.ttf'
),
'italic': (
'local': ('Roboto Condensed', 'RobotoCondensed-Regular'),
'embedded-opentype': '/roboto-condensed/Roboto_Condensed__700italic.eot?#iefix',
'woff': '/roboto-condensed/Roboto_Condensed__700italic.woff',
'woff2': '/roboto-condensed/Roboto_Condensed__700italic.woff2',
'svg': '/roboto-condensed/Roboto_Condensed__700italic.svg#RobotoCondensed',
'truetype': '/roboto-condensed/Roboto_Condensed__700italic.ttf'
)
)
)
) !default;
Description
All fonts and their weights
Type
{map}
Used by
- [mixin]
loadFont
functions/base64-encode
functions
base64_encode
@function base64_encode($s) { ... }
Description
Encode a string as base64. This is needed to make inline SVG work in IE. Credit to: https://github.com/robbywashere/sass-base64-encoder
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$s | String to encode | String | —none |
Returns
String
—Encoded string
Requires
- [function]
bitwise
- [function]
char_code_at
- [function]
bitwise
- [function]
char_code_at
- [function]
char_code_at
- [function]
bitwise
- [function]
bitwise
- [function]
bitwise
- [function]
bitwise
- [function]
bitwise
- [function]
bitwise
- [function]
bitwise
Used by
- [mixin]
angle
order-args
@function order-args($x, $y) { ... }
Description
SassyBitwise - v1.1.0 - 2014-06-05 Order arguments decreasing
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$x | First value | Number | —none |
$y | Second value | Number | —none |
Returns
Number
Used by
power
@function power($x, $y) { ... }
Description
Power function Using Compass if defined
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$x | First value | Number | —none |
$y | Second value | Number | —none |
Returns
Number
Used by
- [function]
bw-or
- [function]
bw-xor
- [function]
bw-and
- [function]
bw-shift-left
- [function]
bw-shift-right
sign
@function sign($x) { ... }
Description
Returns sign of $x
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$x | value | Number | —none |
Returns
Number
Used by
- [function]
bw-not
binary-to-decimal
@function binary-to-decimal($value) { ... }
Description
Convert from base 2 to base 10
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$value | binary to convert | Number | —none |
Returns
Number
decimal-to-binary
@function decimal-to-binary($value) { ... }
Description
Convert from base 10 to base 2
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$value | decimal to convert | Number | —none |
Returns
Number
Requires
- [function]
largest-power-of-2
Used by
- [function]
binary-length
largest-power-of-2
@function largest-power-of-2($value) { ... }
Description
Returns largest power of 2 lesser than $value
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$value | value | Number | —none |
Returns
Number
Used by
- [function]
decimal-to-binary
binary-length
@function binary-length($value) { ... }
Description
Returns binary length
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$value | value | Number | —none |
Returns
Number
Requires
- [function]
decimal-to-binary
Used by
arguments-validator
@function arguments-validator($args) { ... }
Description
Checks whether argument list is valid
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$args | argument list | List | —none |
Returns
Boolean
Used by
- [function]
bitwise
bw-or
@function bw-or($x, $y) { ... }
Description
or
bitwise operator $x | $y
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$x | first value | Number | —none |
$y | second value | Number | —none |
Returns
Number
Requires
- [function]
order-args
- [function]
binary-length
- [function]
power
bw-xor
@function bw-xor($x, $y) { ... }
Description
xor
bitwise operator $x ^ $y
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$x | first value | Number | —none |
$y | second value | Number | —none |
Returns
Number
Requires
- [function]
order-args
- [function]
binary-length
- [function]
power
bw-and
@function bw-and($x, $y) { ... }
Description
and
bitwise operator $x & $y
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$x | first value | Number | —none |
$y | second value | Number | —none |
Returns
Number
Requires
- [function]
order-args
- [function]
binary-length
- [function]
power
bw-not
@function bw-not($x) { ... }
Description
not
bitwise operator ~ $x
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$x | value | Number | —none |
Returns
Number
Requires
- [function]
sign
Used by
- [function]
bitwise
bw-shift-left
@function bw-shift-left($x, $y) { ... }
Description
<<
bitwise operator $x << $y
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$x | first value | Number | —none |
$y | second value | Number | —none |
Returns
Number
Requires
- [function]
power
bw-shift-right
@function bw-shift-right($x, $y) { ... }
Description
>>
bitwise operator $x >> $y
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$x | first value | Number | —none |
$y | second value | Number | —none |
Returns
Number
Requires
- [function]
power
bitwise
@function bitwise($args) { ... }
Description
Bitwise helper function
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$args | list of parameters | List | —none |
Returns
Number
Requires
- [function]
arguments-validator
- [function]
bw-not
Used by
- [function]
base64_encode
- [function]
base64_encode
- [function]
base64_encode
- [function]
base64_encode
- [function]
base64_encode
- [function]
base64_encode
- [function]
base64_encode
- [function]
base64_encode
- [function]
base64_encode
- [function]
bw
bw
@function bw($args) { ... }
Description
Alias for bitwise
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$args | list of parameters | List | —none |
Requires
- [function]
bitwise
char_code
@function char_code($char) { ... }
Description
Get the character code for a character
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$char | —none | Mixed | —none |
Returns
Number
Requires
Used by
- [function]
char_code_at
char_code_at
@function char_code_at($string, $i) { ... }
Description
Get the character at a given index.
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$string | —none | String | —none |
$i | —none | Number | —none |
Returns
String
Requires
- [function]
char_code
Used by
- [function]
base64_encode
- [function]
base64_encode
- [function]
base64_encode
variables
charlist
$charlist: ' ','!','\"','#','$','%','&','\'','(',')','*','+',',','-','.','/','0','1','2','3','4','5','6','7','8','9',':',';','<','=','>','?','@','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','[','\\',']','^','_','`','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','{','|','}','~';
Description
UTF-8 characters
Used by
functions/str-replace
functions
str-replace
@function str-replace($string, $search, $replace) { ... }
Description
Replace $search
with $replace
in $string
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$string | Initial string | String | —none |
$search | Substring to replace | String | —none |
$replace | ('') - New value | String | —none |
Returns
String
—Updated string
Author
Hugo Giraudel
functions/typography
functions
remove-unit
@function remove-unit($number) { ... }
Description
Strip units from a number
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$number | —none | String | —none |
Returns
Number
Used by
- [function]
get-breakpoint-by-index
- [mixin]
rootsize
get-breakpoint-by-index
@function get-breakpoint-by-index($index) { ... }
Description
Get a unitless breakpoint value by the index
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$index | —none | Number | —none |
Returns
Number
Requires
- [function]
remove-unit
Used by
- [mixin]
rootsize
helpers/align
csss
.spark-align-top
Align top
vertical-align: top;
.spark-align-baseline
Align baseline
vertical-align: baseline;
.spark-align-middle
Align middle
vertical-align: middle;
.spark-align-items-center
Align items to the center
align-items: center;
helpers/animate
csss
.spark-animate-height
Animate height changes on an element
overflow: hidden;
transition-duration: 200ms;
transition-property: height, margin;
transition-timing-function: $ease-out-quint;
helpers/center
csss
.spark-center-block
Center an element
display: block !important;
float: none !important;
margin: 0 auto !important;
.spark-center-text
Remove in 2.0.0. Duplicate of .spark-text-center
.
Center text
text-align: center !important;
.spark-center-items
Remove in 2.0.0. Duplicate of .spark-align-items-center
.
Center items
align-items: center;
helpers/clear
csss
.spark-clear
Clear an element on both sides
clear: both;
.spark-clear-left
Clear an element on the left side
clear: left;
.spark-clear-right
Clear an element on the right side
clear: right;
helpers/clearfix
csss
.spark-clearfix
Clearfix for elements with floating children
@include clearfix();
helpers/display
csss
.spark-block
Block element
display: block !important;
.spark-inline
Inline element
display: inline !important;
.spark-inline-block
Inline block element
display: inline-block !important;
.spark-flex
Flex an element
display: flex !important;
helpers/hidden
helpers/inset-content
csss
.spark-inset-content
Content on a gray background w/ shadow on top and bottom
background: $inset-content__background-color;
padding: 2rem;
position: relative;
// Gradient to make a faux drop shadow at the top and bottom
&::after,
&::before {
background: $inset-content__shadow;
content: '';
height: 1rem;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 0;
}
// After at the bottom
&::after {
bottom: 0;
top: auto;
transform: rotate(180deg);
}
helpers/line-height
csss
.spark-line-height-1
One baseline
line-height: 1rem;
.spark-line-height-2
Two baselines
line-height: 2rem;
.spark-line-height-3
Three baselines
line-height: 3rem;
.spark-line-height-4
Fours baselines
line-height: 4rem;
helpers/offset
csss
.spark-margin--sm
A small (1/2 baseline) margin on an element
margin: .5rem !important;
.spark-margin
A standard 1 baseline margin on an element
margin: 1rem !important;
.spark-margin--lg
A large (2 baseline) margin on an element
margin: 2rem !important;
.spark-margin-top--sm
A small (1/2 baseline) margin on the top of an element
margin-top: .5rem !important;
.spark-margin-top
A standard 1 baseline margin on the top of an element
margin-top: 1rem !important;
.spark-margin-top--lg
A large (2 baseline) margin on the top of an element
margin-top: 2rem !important;
.spark-margin-bottom--sm
A small (1/2 baseline) margin on the bottom of an element
margin-bottom: .5rem !important;
.spark-margin-bottom
A standard 1 baseline margin on the bottom of an element
margin-bottom: 1rem !important;
.spark-margin-bottom--lg
A large (2 baseline) margin on the bottom of an element
margin-bottom: 2rem !important;
.spark-margin-left--sm
A small (1/2 baseline) margin on the left of an element
margin-left: .5rem !important;
.spark-margin-left
A standard 1 baseline margin on the left of an element
margin-left: 1rem !important;
.spark-margin-left--lg
A large (2 baseline) margin on the left of an element
margin-left: 2rem !important;
.spark-margin-right--sm
A small (1/2 baseline) margin on the right of an element
margin-right: .5rem !important;
.spark-margin-right
A standard 1 baseline margin on the right of an element
margin-right: 1rem !important;
.spark-margin-right--lg
A large (2 baseline) margin on the right of an element
margin-right: 2rem !important;
.spark-padding--sm
A small (1/2 baseline) margin on an element
padding: .5rem !important;
.spark-padding
A standard 1 baseline padding on an element
padding: 1rem !important;
.spark-padding--lg
A large (2 baseline) padding on an element
padding: 2rem !important;
.spark-padding-top--sm
A small (1/2 baseline) padding on the top of an element
padding-top: .5rem !important;
.spark-padding-top
A standard 1 baseline padding on the top of an element
padding-top: 1rem !important;
.spark-padding-top--lg
A large (2 baseline) padding on the top of an element
padding-top: 2rem !important;
.spark-padding-bottom--sm
A small (1/2 baseline) padding on the bottom of an element
padding-bottom: .5rem !important;
.spark-padding-bottom
A standard 1 baseline padding on the bottom of an element
padding-bottom: 1rem !important;
.spark-padding-bottom--lg
A large (2 baseline) padding on the bottom of an element
padding-bottom: 2rem !important;
.spark-padding-left--sm
A small (1/2 baseline) padding on the left of an element
padding-left: .5rem !important;
.spark-padding-left
A standard 1 baseline padding on the left of an element
padding-left: 1rem !important;
.spark-padding-left--lg
A large (2 baseline) padding on the left of an element
padding-left: 2rem !important;
.spark-padding-right--sm
A small (1/2 baseline) padding on the right of an element
padding-right: .5rem !important;
.spark-padding-right
A standard 1 baseline padding on the right of an element
padding-right: 1rem !important;
.spark-padding-right--lg
A large (2 baseline) padding on the right of an element
padding-right: 2rem !important;
helpers/pull
csss
.spark-pull-left
Float an element to the left
float: left !important;
.spark-pull-right
Float an element to the right
float: right !important;
helpers/remove-padding
csss
.container .row .spark-remove-padding-xs
Remove the padding of a column on the xs breakpoint @deprecated Remove in v2.0.0 in favor of the BEM versions created above
padding-left: 0; padding-right:0;
.container .row .spark-remove-padding-gte-xs
Remove the padding of a column on the xs or higher breakpoint @deprecated Remove in v2.0.0 in favor of the BEM versions created above
padding-left: 0; padding-right:0;
.container .row .spark-remove-padding-sm
Remove the padding of a column on the sm breakpoint @deprecated Remove in v2.0.0 in favor of the BEM versions created above
padding-left: 0; padding-right:0;
.container .row .spark-remove-padding-gte-sm
Remove the padding of a column on the sm or higher breakpoint @deprecated Remove in v2.0.0 in favor of the BEM versions created above
padding-left: 0; padding-right:0;
.container .row .spark-remove-padding-lte-sm
Remove the padding of a column on the sm or below breakpoint @deprecated Remove in v2.0.0 in favor of the BEM versions created above
padding-left: 0; padding-right:0;
.container .row .spark-remove-padding-md
Remove the padding of a column on the md breakpoint @deprecated Remove in v2.0.0 in favor of the BEM versions created above
padding-left: 0; padding-right:0;
.container .row .spark-remove-padding-gte-md
Remove the padding of a column on the md or higher breakpoint @deprecated Remove in v2.0.0 in favor of the BEM versions created above
padding-left: 0; padding-right:0;
.container .row .spark-remove-padding-lte-md
Remove the padding of a column on the md or below breakpoint @deprecated Remove in v2.0.0 in favor of the BEM versions created above
padding-left: 0; padding-right:0;
.container .row .spark-remove-padding-lg
Remove the padding of a column on the lg breakpoint @deprecated Remove in v2.0.0 in favor of the BEM versions created above
padding-left: 0; padding-right:0;
.container .row .spark-remove-padding-gte-lg
Remove the padding of a column on the lg or higher breakpoint @deprecated Remove in v2.0.0 in favor of the BEM versions created above
padding-left: 0; padding-right:0;
.container .row .spark-remove-padding-lte-lg
Remove the padding of a column on the lg or below breakpoint @deprecated Remove in v2.0.0 in favor of the BEM versions created above
padding-left: 0; padding-right:0;
.container .row .spark-remove-padding-xl
Remove the padding of a column on the xl breakpoint @deprecated Remove in v2.0.0 in favor of the BEM versions created above
padding-left: 0; padding-right:0;
.container .row .spark-remove-padding-lte-xl
Remove the padding of a column on the xl or below breakpoint @deprecated Remove in v2.0.0 in favor of the BEM versions created above
padding-left: 0; padding-right:0;
helpers/spacer
csss
.spark-container__spacer:before, .spark-container__spacer:after
Remove in v2.0.0
Escaped unicode character for
Must be included to give the block something to be rendered on the DOM
content: '\0000a0';
mixins/angle
mixins
angle
@mixin angle($color, $width: 43, $height: 96) { ... }
Description
Generate an "angle" SVG for use in the header.
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$color | —none | Color | —none |
$width | —none | Number | 43 |
$height | —none | Number | 96 |
Output
An inline SVG image
Requires
- [function]
base64_encode
TODO's
figure out a good way to replace this with a pseudo element shape or something similar.
mixins/clearfix
mixins
clearfix
@mixin clearfix() { ... }
Description
Add a floating child clearfix to an element
Parameters
None.
Output
A pair of pseudo elements that achieve a carriage return
mixins/load-font
mixins
loadFont
@mixin loadFont($name, $weights) { ... }
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$name | —none | String | —none |
$weights | —none | List | —none |
Requires
- [variable]
font-list
- [variable]
font-directory
mixins/placeholder
mixins
placeholder
@mixin placeholder() { ... }
Description
Allow for styling of an input's placeholder
text.
Parameters
None.
Content
This mixin allows extra content to be passed (through the @content
directive). Role: The styles to apply to the placeholder
Output
Vendor-prefixed placeholder pseudo elements with the given content.
mixins/typography
mixins
rootsize
@mixin rootsize() { ... }
Description
Root font-size in %, outputted in correct breakpoints.
Parameters
None.
Output
A font-size
to use on the root element.
Requires
- [function]
remove-unit
- [function]
get-breakpoint-by-index
fontsize
@mixin fontsize($name, $breakpoint, $important, $line-height) { ... }
Description
Set the font size in rems given a font name or pixel font value
Parameters
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$name | —none | Number or String | —none |
$breakpoint | Optional | String | —none |
$important | Optional Add the | Boolean | —none |
$line-height | Optional Also output the | Boolean | —none |
Output
A font-size
to apply to an element
Requires
- [variable]
font-scales
- [variable]
font-scales
- [variable]
rootsizes
- [variable]
rootsizes
- [variable]
rootsizes
- [variable]
rootsizes
placeholders/gray-out
placeholders
gray-out
%gray-out { ... }
Description
A full screen gray background that is semi-transparent. Hidden by default, but with transitions on its opacity and visiblity to create a fade in/out effect when active.
Requires
- [variable]
ease-out-quint
gray-out--active
%gray-out--active { ... }
Description
Show the gray background.
themes/whitelabel/config/components/footer
themes/whitelabel/config/components/header
variables
header__background-color
$header__background-color: $white;
Description
White header background
Type
{color}
header__border-top-color
$header__border-top-color: map-get($gray-color-steps, 100);
Description
Monochromatic header border
Type
{color}
header__color
$header__color: map-get($gray-color-steps, 800);
Description
Reverse header type color from default
Type
{color}
header__title__color
$header__title__color: map-get($gray-color-steps, 900);
Description
Darker header color than copy
Type
{color}
header__logo--sabre__background-color
$header__logo--sabre__background-color: map-get($gray-color-steps, 100);
Description
Light logo background color for the logo since it is now dark
Type
{color}
header__sign-in__background-color
$header__sign-in__background-color: map-get($gray-color-steps, 100);
Description
Sign in button matches logo
Type
{color}
header__login__background-color
changing login
to sign-in
, will remove login
in 2.0.0
$header__login__background-color: $header__sign-in__background-color;
Description
Login button matches logo
Type
{color}
header--visible__color
$header--visible__color: map-get($gray-color-steps, 800);
Description
Darker text to lay on top of the white background
Type
{color}
header--visible--hover__color
$header--visible--hover__color: map-get($gray-color-steps, 500);
Description
Lighten text on hover
Type
{color}
header--visible__link--hover__color
$header--visible__link--hover__color: map-get($gray-color-steps, 1000);
Description
Darken links when they themselves are hovered
Type
{color}
header--visible__link--active__toggle__background-color
$header--visible__link--active__toggle__background-color: $blue;
Description
Active show/hide toggle background-color
Type
{color}
header--visible__link--active__background-color
$header--visible__link--active__background-color: map-get($gray-color-steps, 100);
Description
Active link background-color
Type
{color}
header--visible__link--active__border-top-color
$header--visible__link--active__border-top-color: $blue;
Description
Active link's top border
Type
{color}
header--visible__link--active__color
$header--visible__link--active__color: map-get($gray-color-steps, 900);
Description
Darken link when active
Type
{color}
header--visible__link--active__font-weight
$header--visible__link--active__font-weight: 700;
Description
Active links are bold
Type
{number}
header--visible__link--active__shadow-color
$header--visible__link--active__shadow-color: map-get($gray-color-steps, 300);
Description
Light gray shadow for active links
Type
{color}
themes/whitelabel/config/components/menu
General
variables
spark-toolbar-label-font-family
$spark-toolbar-label-font-family: $body__font-family !default;
Description
Toolbar label font-family
Type
{string}
spark-toolbar-label-font-weight
$spark-toolbar-label-font-weight: $body__font-weight--bold !default;
Description
Toolbar label font-weight
Type
{number}
spark-toolbar-dropdown-font-weight
$spark-toolbar-dropdown-font-weight: $body__font-weight--normal !default;
Description
Toolbar dropdown font-weight
Type
{number}
spark-toolbar-active-background
$spark-toolbar-active-background: map-get($blue-color-steps, 200) !default;
Description
Toolbar active background
Type
{color}
spark-toolbar-color
$spark-toolbar-color: map-get($grey-color-steps, 800) !default;
Description
Toolbar default color
Type
{color}
spark-toolbar-active-color
$spark-toolbar-active-color: #fff !default;
Description
Toolbar active color
Type
{color}
spark-toolbar-background
$spark-toolbar-background: #fff !default;
Description
Toolbar default background
Type
{color}
spark-toolbar-dropdown-background
$spark-toolbar-dropdown-background: $popover__background-color;
Description
Toolbar dropdown default background
Type
{color}
spark-toolbar-dropdown-color
$spark-toolbar-dropdown-color: $spark-toolbar-color;
Description
Toolbar dropdown default color
Type
{color}
spark-toolbar-item-hover-background
$spark-toolbar-item-hover-background: map-get($grey-color-steps, 200) !default;
Description
Toolbar item content list background hover
Type
{color}
spark-toolbar-dropdown-border
$spark-toolbar-dropdown-border: $popover__border;
Description
Toolbar dropdown border (used for show more dropdown, as well)
Type
{color}
spark-toolbar-dropdown-border-radius
$spark-toolbar-dropdown-border-radius: $popover__border-radius;
Description
Toolbar dropdown border-radius (used for show more dropdown, as well)
Type
{number}
spark-toolbar-dropdown-box-shadow
$spark-toolbar-dropdown-box-shadow: $popover__box-shadow;
Description
Toolbar dropdown box-shadow (used for show more dropdown, as well)
Type
{string}
spark-toolbar-hover-background
$spark-toolbar-hover-background: map-get($grey-color-steps, 100) !default;
Description
Toolbar show more dropdown items background
Type
{color}
spark-toolbar-active-hover-color
$spark-toolbar-active-hover-color: map-get($grey-color-steps, 100) !default;
Description
Toolbar active, open state hover-color (for icon buttons only)
Type
{color}
csss
#{$class_name}--xs
#{$description} at the xs breakpoint
@content
#{$class_name}--gte-xs
#{$description} at or greater than the xs breakpoint
@content
#{$class_name}--sm
#{$description} at the sm breakpoint
@content
#{$class_name}--gte-sm
#{$description} at or greater than the sm breakpoint
@content
#{$class_name}--lte-sm
#{$description} at or less than the sm breakpoint
@content
#{$class_name}--md
#{$description} at the md breakpoint
@content
#{$class_name}--gte-md
#{$description} at or greater than the md breakpoint
@content
#{$class_name}--lte-md
#{$description} at or less than the md breakpoint
@content
#{$class_name}--lg
#{$description} at the lg breakpoint
@content
#{$class_name}--gte-lg
#{$description} at or greater than the lg breakpoint
@content
#{$class_name}--lte-lg
#{$description} at or less than the lg breakpoint
@content
#{$class_name}--xl
#{$description} at the xl breakpoint
@content
#{$class_name}--lte-xl
#{$description} at or less than the xl breakpoint
@content
// // Generate semantic grid columns with these mixins. @mixin make-container($gutter: $grid-gutter-width)
Grid system
margin-left: auto;
margin-right: auto;
padding-left: ($gutter / 2);
padding-right: ($gutter / 2);
@if not $enable-flex {
@include clearfix();
}