wk-body-text-color
Since 0.10.0$wk-body-text-color: wk-primary-color(wkGray) !default;
Description
Body text color
Type
Color
$wk-breadcrumb-padding: wk-rem(13.5px) !default;
Breadcrumb vertical padding
Unit
$wk-breadcrumb-color: wk-primary-color(wkGray, tint2) !default;
Breadcrumb text color
Color
$wk-breadcrumb-display: inline-block !default;
Breadcrumb display
String
$wk-breadcrumb-font-family: $wk-headings-font-stack !default;
Breadcrumb font family
String
$wk-breadcrumb-font-size: map-get($wk-font-scale, small) !default;
Breadcrumb font size
String
$wk-breadcrumb-font-weight: map-get($wk-font-weight, light) !default;
Breadcrumb font weight
String
$wk-breadcrumb-first-child-font-weight: map-get($wk-font-weight, medium) !default;
Breadcrumb first child font weight
String
$wk-breadcrumb-desktop-float: left !default;
Breadcrumb desktop float
String
$wk-breadcrumb-divider: '»' !default;
Breadcrumb divider content
String
$wk-breadcrumb-divider-color: $wk-breadcrumb-color !default;
Breadcrumb divider element color
Color
$wk-breadcrumb-divider-margin: wk-rem(4px) !default;
Breadcrumb divider element margin
Unit
$wk-breadcrumb-icon-margin-left: 0 !default;
Breadcrumb icon margin left
Unit
$wk-breadcrumb-icon-margin-right: wk-rem(7px) !default;
Breadcrumb icon margin right
Unit
$wk-breadcrumb-bar-background-color: wk-primary-color(wkGray, tint6) !default;
Breadcrumb bar background color
Color
$wk-breakpoint-tag-z-index: map-get($wk-z-index, breakpoint-tag) !default;
Modal overlay z-index
Unit
$wk-breakpoint-text-shadow: 0 1px 0 wk-primary-color(wkBlack);
Breakpoint tag shadow
Color
$wk-breakpoint-tag-color: wk-primary-color(wkGray) !default;
Breakpoint tag text
Color
$wk-button-standard-color: #fff !default;
The font color of the standard button
Color
$wk-button-standard-hover-color: $wk-button-standard-color !default;
The font color of the standard button hovered
Color
$wk-button-standard-background-color: wk-primary-color(wkBlue) !default;
The background color of the standard button
Color
$wk-button-standard-hover-background-color: wk-primary-color(wkBlue, tint1) !default;
The background color of the standard button upon hover
Color
$wk-button-secondary-background-color: wk-primary-color(wkGray, tint3) !default;
The background color of the secondary button
Color
$wk-button-secondary-hover-background-color: wk-primary-color(wkGray, tint4) !default;
The background color of the secondary button upon hover
Color
$wk-button-secondary-color: wk-primary-color(wkGray) !default;
The text color of the secondary button
Color
$wk-button-success-background-color: wk-primary-color(wkGreen) !default;
The background color of the success button
Color
$wk-button-success-hover-background-color: wk-primary-color(wkGreen, tint1) !default;
The background color of the success button upon hover
Color
$wk-button-danger-background-color: wk-primary-color(wkRed) !default;
The background color of the danger button
Color
$wk-button-danger-hover-background-color: wk-primary-color(wkRed, tint1) !default;
The background color of the danger button upon hover
Color
$wk-button-disabled-opacity: .3 !default;
The opacity of a disabled button
Number
$wk-button-separation: 1rem !default;
Button principal margin - vertical margin in mobile, horizontal in non-mobile
Unit
$wk-button-border-radius: 0 !default;
Button border radius
Unit
$wk-card-background: wk-primary-color(wkWhite) !default;
The card background color
Color
$wk-card-heading: wk-primary-color(wkBlue) !default;
The card header color
Color
$wk-card-label-margin: wk-rem(8px) !default;
Whitespace around card label
Unit
$wk-card-padding: wk-rem(15px) !default;
The card padding
Unit
$wk-card-title-margin-bottom: wk-rem(10px) !default;
The card title bottom margin
Unit
$wk-card-border: 1px solid wk-primary-color(wkGray, tint4) !default;
The card border style and color
List
$wk-card-float-height: wk-rem(180px) !default;
The fixed card height when flexbox is not available
Unit
$wk-card-margin: wk-rem(15px) !default;
The margin between cards when in a card group
Unit
$wk-card-gradient-transparent: rgba(255, 255, 255, 0) !default;
The margin between cards when in a card group
Color
$wk-card-text-color: wk-primary-color(wkBlack) !default;
Default card text color
Color
$wk-card-after-layer: transparent linear-gradient(to bottom, $wk-card-gradient-transparent 0%, wk-primary-color(wkWhite) 100%) repeat scroll 0% 0% !default;
The margin between cards when in a card group
List
$wk-badge-max-width: wk-rem(60px) !default;
Maximum width of facet count
Unit
$wk-content-filter-link-background: wk-primary-color(wkGray, tint5) !default;
List anchor background color
Color
$wk-content-filter-link-color: wk-primary-color(wkGray, tint1) !default;
List anchor text color
Color
$wk-content-filter-active-link-background: wk-primary-color(wkGray, tint1) !default;
List active anchor background color
Color
$wk-content-filter-active-link-color: wk-primary-color(wkWhite) !default;
List active anchor background color
Color
$wk-content-filter-hover-link-background-color: wk-primary-color(wkGray, tint4) !default;
List hover anchor background color
Color
$wk-content-filter-hover-link-color: wk-primary-color(wkGray, tint1) !default;
List hover anchor background color
Color
$wk-content-filter-title-color: wk-primary-color(wkGray) !default;
Search filter title color
Color
$wk-content-filter-breakpoint: 57rem !default;
Content filter breakpoint
Unit 50.75rem fyi is exactly halfway between tablet and desktop
$wk-content-filter-badge-color: wk-primary-color(wkGray, tint1) !default;
Badge text color
Color
$wk-content-filter-badge-background-color: transparent !default;
Badge background color
Color
$wk-content-filter-badge-border-radius: 0 !default;
Badge border radius
Unit
$wk-content-filter-weight: map-get($wk-font-weight, regular) !default;
Content filter font weight
Unit
$wk-content-filter-badge-weight: map-get($wk-font-weight, light) !default;
Content filter badge font weight
Unit
$wk-content-filter-font-size: map-get($wk-font-scale, smaller) !default;
Content filter font size
Unit
$wk-content-filter-badge-font-size: $wk-content-filter-font-size !default;
Content filter badge font size
Unit
$wk-content-filter-badge-padding: 0 !default;
Content filter badge padding
Unit
$wk-content-filter-disabled-background-color: $wk-content-filter-link-background !default;
Content filter disabled background color
Color
$wk-content-filter-disabled-color: wk-primary-color(wkGray, tint3) !default;
Content filter disabled color
Color
$wk-document-bubble-z-index: map-get($wk-z-index, document-bubble) !default;
Document bubble z-index
Unit
$wk-document-bubble-after-z-index: map-get($wk-z-index, document-bubble-after) !default;
Document bubble after z-index
Unit
$wk-field-tip-color: wk-primary-color(wkGray, tint2) !default;
Field tip color
Color
$wk-field-error-color: wk-primary-color(wkRed) !default;
Field tip error color
Color
$wk-header-background-color: wk-primary-color(wkWhite) !default;
The background color of header
Color
$wk-fixed-top-z-index: map-get($wk-z-index, fixed-top) !default;
Fixed top z-index
Unit
$wk-select-input-text-color: $wk-input-color !default;
Select text color
Color
$wk-select-input-border-focus: wk-primary-color(wkGray) !default;
Select focused border color
Color
$wk-list-border-radius: 0 !default;
Default box-radius for wk-list
Unit
$wk-list-background-color: wk-primary-color(wkWhite);
The background color of the submit button
Color
$wk-list-spacing: gutter() !default;
The spacing for the search suggestion list
Unit
$wk-list-item-spacing: wk-rem-value(5) !default;
The spacing for the search suggestion list items
Unit
$wk-list-hover-background: wk-primary-color(wkGray, tint5) !default;
The background color of the suggestion list item on hover
Color
$wk-list-title-color: wk-primary-color(wkRed, tint1) !default;
The text color of the title used in the suggestions list (autocomplete).
Color
$wk-list-border-color: wk-primary-color(wkGray, tint3) !default;
The list border color
Color
$wk-login-form-background-color: wk-primary-color(wkGray, tint5) !default;
The background color login form box
Color
$wk-login-product-brand: wk-primary-color(wkGray) !default;
The product brand color
Color
$wk-login-screen-text-color: wk-primary-color(wkGray) !default;
The color of the link for customer service email
Color
$wk-login-support-border-style: 1px solid $wk-login-form-background-color !default;
Login support border style
Color
$wk-login-copyright-text-color: $wk-login-screen-text-color;
The copyright text color
Color
$wk-login-screen-background-color: wk-primary-color(wkWhite) !default;
The color of the screen background behind the form
Color
$wk-login-support-strong-color: wk-primary-color(wkGray) !default;
The color of login support strong text
Color
$wk-modal-inner-padding: wk-rem(16px) !default;
Modal inner padding
Unit
$wk-modal-z-index: map-get($wk-z-index, modal) !default;
Modal z-index
Unit
$wk-modal-overlay-z-index: map-get($wk-z-index, subzero) !default;
Modal overlay z-index
Unit
$wk-modal-content-background: wk-primary-color(wkWhite) !default;
Modal content background
Color
$wk-modal-header-background: wk-primary-color(wkBlue) !default;
Modal header background color
Color
$wk-modal-title-color: wk-primary-color(wkWhite) !default;
Modal title color
Color
$wk-modal-overlay-color: rgba(wk-primary-color(wkBlack), .4) !default;
Modal overlay color
Color
$wk-modal-box-shadow: 0 5px 15px $wk-modal-overlay-color;
Modal overlay color
List
$wk-modal-close-color: wk-primary-color(wkBlue, tint3) !default;
Modal close icon color
List
$wk-modal-close-hover: wk-primary-color(wkWhite) !default;
Modal close icon hover
List
$wk-pagination-background-color: wk-primary-color(wkBlue, tint3) !default;
Pagination background color
Color
$wk-pagination-next-prev-background-color: wk-primary-color(wkBlue) !default;
Pagination next/previous background color
Color
$wk-pagination-next-prev-background-hover-color: wk-primary-color(wkBlue, tint1) !default;
Pagination next/previous background hover color
Color
$wk-pagination-next-prev-color: wk-primary-color(wkWhite) !default;
Pagination next/previous text color
Color
$wk-pagination-hover-background-color: wk-primary-color(wkBlue, tint2) !default;
Pagination hover page background color
Color
$wk-pagination-active-background-color: wk-primary-color(wkWhite) !default;
Pagination active page background color
Color
$wk-pagination-link-color: wk-primary-color(wkBlue) !default;
Pagination link color
Color
$wk-pagination-active-link-color: wk-primary-color(wkBlue) !default;
Pagination link color
Color
$wk-pagination-bar-bottom-margin: wk-rem(20px) !default;
Pagination bar bottom margin
Unit
$wk-pagination-disabled-background: wk-primary-color(wkGray, tint4) !default;
Pagination disabled background color
Color
$wk-pagination-disabled-color: wk-primary-color(wkWhite) !default;
Pagination disabled text color
Color
$wk-popover-border-color: $wk-tooltip-border-color !default;
Popover border color
Color
$wk-popover-border: $wk-tooltip-border !default;
Popover border style
List
$wk-popover-background-color: $wk-tooltip-background-color !default;
Popover background color
Color
$wk-popover-box-shadow-color: $wk-tooltip-box-shadow-color !default;
Popover box shadow color
Color
$wk-popover-box-shadow: $wk-tooltip-box-shadow !default;
Popover box-shadow
List
$wk-popover-body-padding: wk-rem(10px) !default;
Popover inner padding
Unit
$wk-popover-max-width: 300px !default;
User popover max-width
Unit
$wk-user-popover-even-background: wk-primary-color(wkGray, tint6) !default;
User popover section even background
Color
$wk-product-background-color: wk-primary-color(wkGreen) !default;
The background color of the product panel
Color
$wk-product-name-color: wk-primary-color(wkWhite) !default;
The color of the product name text
Color
$wk-search-input-placeholder-color: wk-primary-color(wkGray, tint2) !default;
The color of the search input's placeholder
Color
$wk-search-submit-background: wk-primary-color(wkBlue) !default;
The background color of the submit button
Color
$wk-search-submit-background-hover: wk-primary-color(wkBlue, tint1) !default;
The background color of the submit button on hover
Color
$wk-search-submit-color: wk-primary-color(wkWhite) !default;
The text color of the submit button
Color
$wk-search-select-input-background-color: wk-primary-color(wkGray, tint4) !default;
The select dropdown background color
Color
$wk-search-select-color: wk-primary-color(wkGray) !default;
The select type color
Color
$wk-list-max-height-mobile: wk-rem(200px);
The max height value for wk-list on mobile
Unit
$wk-list-max-height: wk-rem(300px);
The max height value for wk-list on tablet and desktop
Unit
$wk-list-z-index: map-get($wk-z-index, list) !default;
Default z-index for wk-list inside the search form
Unit
$wk-search-bar-background-color: wk-primary-color(wkGray, tint6) !default;
Search standalone bar background color
Color
$wk-search-bar-padding: wk-rem(16px);
Search bar top and bottom padding
Unit
$wk-search-submit-mobile-width: 3rem;
Search submit mobile width IE9
Unit
$wk-search-submit-width: 5rem;
Search submit tablet/desktop width IE9
Unit
$wk-search-select-mobile-width: 7rem;
Search select mobile width
Unit
$wk-search-select-width: 8rem;
Search select tablet/desktop width
Unit
$wk-search-results-definition-weight: 200;
The wont weight of definition inside a search result
Unit
$wk-search-results-title-color: wk-primary-color(wkBlue);
The text color of the title inside a search result
Color
$wk-search-results-list-border-color: wk-primary-color(wkBlue, tint3);
The border color of the search result list
Color
$wk-search-definition-title-color: wk-primary-color(wkGray, tint1);
The border color of the search definition in the result list
Color
$wk-search-definition-description-color: wk-primary-color(wkGray, tint2);
The border color of the search definition description in the result list
Color
$wk-table-border: 1px solid wk-primary-color(wkGray, tint4) !default;
Table border color
List
$wk-table-border-multi-body: 2px solid wk-primary-color(wkGray, tint4) !default;
Table border color for multiple tbody instances
List
$wk-table-heading-color: wk-primary-color(wkGray) !default;
Table heading text color
Color
$wk-table-heading-background-color: wk-primary-color(wkGray, tint6) !default;
Table heading background color
Color
$wk-table-body-background-color: wk-primary-color(wkWhite) !default;
Table footer and body background color
Color
$wk-table-sorted-background-color: $wk-table-border-color;
Table sorted heading background color
Color
$wk-tooltip-border-color: wk-primary-color(wkGray, tint5) !default;
Tooltip border color
Color
$wk-tooltip-text-color: wk-primary-color(wkGray) !default;
Tooltip text color
Color
$wk-tooltip-border: 1px solid $wk-tooltip-border-color !default;
Tooltip border style
List
wk-tooltip
$wk-tooltip-background-color: wk-primary-color(wkWhite) !default;
Tooltip background color
Color
wk-tooltip
$wk-tooltip-box-shadow-color: rgba(99, 99, 99, .3) !default;
Tooltip box shadow color
Color
$wk-tooltip-box-shadow: 4px 5px 7px -3px $wk-tooltip-box-shadow-color !default;
Tooltip box-shadow
List
wk-tooltip
$wk-tooltip-body-padding: wk-rem(5px) !default;
Tooltip inner padding
Unit
$wk-tooltip-max-width: 300px !default;
User tooltip max-width
Unit
$wk-user-tooltip-even-background: wk-primary-color(wkGray, tint6) !default;
User tooltip section even background
Color
$wk-code-color: $wk-input-color !default;
The color of a standalone element
Color
$wk-code-background-color: wk-primary-color(wkGray, tint6) !default;
The background color of a standalone element
Color
$wk-code-border: 1px solid wk-primary-color(wkGray, tint5) !default;
The border of a standalone element
Color
@mixin wk-alert($wk-alert-background-color, $wk-alert-border-color, $wk-alert-text-color, $wk-alert-link-color) { ... }
Creates an Alert
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$wk-alert-background-color | Background color of alert. | String | —none |
$wk-alert-border-color | Color of border around alert. | String | —none |
$wk-alert-text-color | Color of text within an alert. | String | —none |
$wk-alert-link-color | Color of links within an alert. | String | —none |
Usage
.wk-alert-info {
@include wk-alert(
$wk-state-info-background-color,
$wk-state-info-border-color,
$wk-state-info-text-color,
$wk-state-info-link-color
);
}
Output
.wk-alert-info {
background-color: #fff;
border: 1px solid #007ac3;
color: #007ac3;
font-family: "Fira Sans", "Helvetica Neue", Helvetica, "Roboto", Arial, sans-serif;
font-style: italic;
margin-bottom: 1.25rem;
padding: 0.75rem 1rem;
}
.wk-alert-info a {
color: #0065a2;
text-decoration: none;
cursor: pointer;
font-weight: 700;
}
.wk-alert-info a:hover {
color: #0065a2;
}
.wk-alert-info a:hover {
text-decoration: underline;
}
.wk-alert-info .wk-alert-title {
font-weight: 700;
}
.wk-alert-info .wk-alert-title,
.wk-alert-info > p {
margin-bottom: 0.3125rem;
}
wk-link
wk-rem
wk-font-stacks
wk-font-weight
@mixin wk-spin($include-keyframes: false) { ... }
Adds spin animation
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$include-keyframes | Add keyframes to the output or not. | Bool | false |
Usage
.wk-spin {
@include wk-spin();
}
Output
.wk-spin {
animation: spin 2s infinite linear;
display: inline-block;
}
wk-keyframes-spin
@mixin wk-keyframes($keyframes-name) { ... }
Base keyframes mixin used along with animation mixins
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$keyframes-name | The name of the keyframes. | String | —none |
This mixin allows extra content to be passed (through the @content
directive).
Usage
@include wk-keyframes('spin') {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
Output
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
wk-exports
wk-keyframes-spin
@mixin wk-keyframes-spin() { ... }
Adds keyframes for spin mixin
None.
wk-keyframes
wk-spin
$wk-badge-default-background: $wk-button-base-color !default;
The background color of the badge
Color
$wk-badge-default-color: wk-primary-color(wkWhite) !default;
The text color of the badge
Color
$wk-badge-border-radius: 1rem !default;
The text color of the badge
Unit
wk-badge
@mixin wk-badge($wk-badge-background-color, $wk-badge-text-color) { ... }
Creates a Badge
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$wk-badge-background-color | Background color of badge. | String | —none |
$wk-badge-text-color | Color of text within an badge. | String | —none |
Usage
.wk-badge-info {
@include wk-badge(#d9edf7, #0a5786);
}
Output
.wk-badge-info {
background-color: #d9edf7;
border-radius: 1rem;
color: #0a5786;
font-size: 0.77248em;
font-weight: 700;
padding: 0.125rem 0.5rem;
position: relative;
text-align: center;
top: -.1em;
white-space: nowrap;
}
wk-strip-units
wk-rem
wk-badge-border-radius
wk-font-scale
wk-font-weight
@mixin wk-make-columns() { ... }
Creates columns for every span size on the grid from 1 to wk-global-columns
None.
Usage
.row {
@include wk-make-columns;
}
Output
.row div[class^="wk-col"]:last-child {
float: right;
margin-right: 0;
}
.row .wk-col-1 {
width: 6.77966%;
float: left;
margin-right: 1.69492%;
}
.row .wk-col-2 {
width: 15.25424%;
float: left;
margin-right: 1.69492%;
}
.row .wk-col-3 {
width: 23.72881%;
float: left;
margin-right: 1.69492%;
}
.row .wk-col-4 {
width: 32.20339%;
float: left;
margin-right: 1.69492%;
}
.row .wk-col-5 {
width: 40.67797%;
float: left;
margin-right: 1.69492%;
}
.row .wk-col-6 {
width: 49.15254%;
float: left;
margin-right: 1.69492%;
}
.row .wk-col-7 {
width: 57.62712%;
float: left;
margin-right: 1.69492%;
}
.row .wk-col-8 {
width: 66.10169%;
float: left;
margin-right: 1.69492%;
}
.row .wk-col-9 {
width: 74.57627%;
float: left;
margin-right: 1.69492%;
}
.row .wk-col-10 {
width: 83.05085%;
float: left;
margin-right: 1.69492%;
}
.row .wk-col-11 {
width: 91.52542%;
float: left;
margin-right: 1.69492%;
}
.row .wk-col-12 {
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
}
wk-global-columns
@mixin wk-target-icons() { ... }
Style wk-icons with this selector mixin
None.
This mixin allows extra content to be passed (through the @content
directive).
Usage
@include wk-target-icons {
font-size: 10rem;
}
Output
[class^="wk-icon-"]:before,
[class*=" wk-icon-"]:before {
font-size: 10rem;
}
@mixin wk-text-input-base() { ... }
Create base styles for an input field including the disabled state
None.
Usage
.my-input {
@include wk-text-input-base;
}
Output
.my-input {
appearance: none;
background-color: #fff;
border: 1px solid #dadada;
border-radius: 0;
color: #474747;
font-family: "Helvetica Neue", Helvetica, "Roboto", Arial, sans-serif;
font-size: 1rem;
height: 3rem;
line-height: 1.5;
padding: 0.6875rem 1rem;
width: 100%;
}
.my-input[disabled] {
background-color: #ededed;
color: #ededed;
cursor: not-allowed;
}
.my-input:focus,
.my-input:hover:focus {
border-color: #409bd2;
outline: 0;
}
.my-input:hover {
border-color: #474747;
}
wk-input-border-radius
wk-font-scale
wk-input-height
wk-input-line-height
wk-input-padding
wk-input-focus-border-color
wk-input-hover-border-color
wk-input-background-color
wk-input-disabled-background-color
wk-input-border-color
wk-input-disabled-color
wk-input-color
wk-font-stacks
@mixin wk-input-placeholder() { ... }
Input Placeholder Mixin Styles for input placeholders
None.
This mixin allows extra content to be passed (through the @content
directive).
Usage
input {
@include wk-input-placeholder() {
color: #fff;
}
}
Output
input:-moz-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder,
input::-webkit-input-placeholder {
color: #fff;
}
$wk-label-default-background: wk-primary-color(wkGray, tint1) !default;
The background color of the label
Color
$wk-label-default-color: wk-primary-color(wkWhite) !default;
The text color of the label
Color
$wk-label-font-family: map-get($wk-font-stacks, global-sans) !default;
The font family of the label
Unit
wk-label
$wk-label-font-size: wk-rem(12px) !default;
The font size of the label
Unit
wk-label
$wk-label-padding: wk-rem(5px 10px) !default;
The padding of the label
Unit
wk-label
@mixin wk-label($wk-label-background-color, $wk-label-text-color) { ... }
Creates a Label
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$wk-label-background-color | Background color of label. | String | —none |
$wk-label-text-color | Color of text within an label. | String | —none |
Usage
.wk-label-black {
@include wk-label(#000, #fff);
}
Output
.wk-label-black {
background-color: #000;
color: #fff;
display: inline-block;
font-family: "Fira Sans", "Helvetica Neue", Helvetica,"Roboto", Arial,sans-serif;
font-size: 0.75rem;
font-weight: 500;
padding: 0.3125rem 0.625rem;
text-transform: uppercase;
vertical-align: middle;
white-space: nowrap;
}
wk-label-font-family
wk-label-font-size
wk-font-weight
wk-label-padding
@mixin wk-layout-50-50($child: '.wk-layout-item') { ... }
50% + 50% layout on breakpoints larger than mobile
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$child | A selector which will serve as the column name. | String | '.wk-layout-item' |
Usage
.my-layout {
@include wk-layout-50-50('.my-column');
}
Output
.my-layout {
max-width: 75rem;
margin-left: auto;
margin-right: auto;
}
.my-layout:after {
content: " ";
display: block;
clear: both;
}
@media (min-width: 37.5rem) {
.my-layout > .my-column {
width: 49.15254%;
float: left;
margin-right: 1.69492%;
}
.my-layout > .my-column:last-child {
float: right;
margin-right: 0;
}
}
wk-target-tablet-desktop
wk-global-columns
@mixin wk-layout-50-50-persist($child: '.wk-layout-item') { ... }
50% + 50% layout on all breakpoints
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$child | A selector which will serve as the column name. | String | '.wk-layout-item' |
Usage
.my-layout {
@include wk-layout-50-50-persist('.my-column');
}
Output
.my-layout {
max-width: 75rem;
margin-left: auto;
margin-right: auto;
}
.my-layout:after {
content: " ";
display: block;
clear: both;
}
.my-layout > .my-column {
width: 49.15254%;
float: left;
margin-right: 1.69492%;
}
.my-layout > .my-column:last-child {
float: right;
margin-right: 0;
}
wk-global-columns
@mixin wk-layout-33-66($child: '.wk-layout-item') { ... }
33% + 66% layout on breakpoints larger than mobile
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$child | A selector which will serve as the column name. | String | '.wk-layout-item' |
Usage
.my-layout {
@include wk-layout-33-66('.my-column');
}
Output
.my-layout {
max-width: 75rem;
margin-left: auto;
margin-right: auto;
}
.my-layout:after {
content: " ";
display: block;
clear: both;
}
@media (min-width: 37.5rem) {
.my-layout > .my-column {
width: 32.20339%;
float: left;
margin-right: 1.69492%;
}
.my-layout > .my-column:last-child {
width: 66.10169%;
float: left;
margin-right: 1.69492%;
float: right;
margin-right: 0;
}
}
wk-target-tablet-desktop
wk-global-columns
@mixin wk-layout-33-66-persist($child: '.wk-layout-item') { ... }
33% + 66% layout on all breakpoints
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$child | A selector which will serve as the column name. | String | '.wk-layout-item' |
Usage
.my-layout {
@include wk-layout-33-66-persist('.my-column');
}
Output
.my-layout {
max-width: 75rem;
margin-left: auto;
margin-right: auto;
}
.my-layout:after {
content: " ";
display: block;
clear: both;
}
.my-layout > .my-column {
width: 32.20339%;
float: left;
margin-right: 1.69492%;
}
.my-layout > .my-column:last-child {
width: 66.10169%;
float: left;
margin-right: 1.69492%;
float: right;
margin-right: 0;
}
wk-global-columns
@mixin wk-layout-66-33($child: '.wk-layout-item') { ... }
66% + 33% layout on breakpoints larger than mobile
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$child | A selector which will serve as the column name. | String | '.wk-layout-item' |
Usage
.my-layout {
@include wk-layout-66-33('.my-column');
}
Output
.my-layout {
max-width: 75rem;
margin-left: auto;
margin-right: auto;
}
.my-layout:after {
content: " ";
display: block;
clear: both;
}
@media (min-width: 37.5rem) {
.my-layout > .my-column {
width: 66.10169%;
float: left;
margin-right: 1.69492%;
}
.my-layout > .my-column:last-child {
width: 32.20339%;
float: left;
margin-right: 1.69492%;
float: right;
margin-right: 0;
}
}
wk-target-tablet-desktop
wk-global-columns
@mixin wk-layout-66-33-persist($child: '.wk-layout-item') { ... }
66% + 33% layout on all breakpoints
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$child | A selector which will serve as the column name. | String | '.wk-layout-item' |
Usage
.my-layout {
@include wk-layout-66-33-persist('.my-column');
}
Output
.my-layout {
max-width: 75rem;
margin-left: auto;
margin-right: auto;
}
.my-layout:after {
content: " ";
display: block;
clear: both;
}
.my-layout > .my-column {
width: 66.10169%;
float: left;
margin-right: 1.69492%;
}
.my-layout > .my-column:last-child {
width: 32.20339%;
float: left;
margin-right: 1.69492%;
float: right;
margin-right: 0;
}
wk-global-columns
@mixin wk-layout-25-75($child: '.wk-layout-item') { ... }
25% + 75% layout on breakpoints larger than mobile
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$child | A selector which will serve as the column name. | String | '.wk-layout-item' |
Usage
.my-layout {
@include wk-layout-25-75('.my-column');
}
Output
.my-layout {
max-width: 75rem;
margin-left: auto;
margin-right: auto;
}
.my-layout:after {
content: " ";
display: block;
clear: both;
}
@media (min-width: 37.5rem) {
.my-layout > .my-column {
width: 23.72881%;
float: left;
margin-right: 1.69492%;
}
.my-layout > .my-column:last-child {
width: 74.57627%;
float: left;
margin-right: 1.69492%;
float: right;
margin-right: 0;
}
}
wk-target-tablet-desktop
wk-global-columns
@mixin wk-layout-25-75-persist($child: '.wk-layout-item') { ... }
25% + 75% layout on all breakpoints
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$child | A selector which will serve as the column name. | String | '.wk-layout-item' |
Usage
.my-layout {
@include wk-layout-25-75-persist('.my-column');
}
Output
.my-layout {
max-width: 75rem;
margin-left: auto;
margin-right: auto;
}
.my-layout:after {
content: " ";
display: block;
clear: both;
}
.my-layout > .my-column {
width: 23.72881%;
float: left;
margin-right: 1.69492%;
}
.my-layout > .my-column:last-child {
width: 74.57627%;
float: left;
margin-right: 1.69492%;
float: right;
margin-right: 0;
}
wk-global-columns
@mixin wk-layout-75-25($child: '.wk-layout-item') { ... }
75% + 25% layout on breakpoints larger than mobile
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$child | A selector which will serve as the column name. | String | '.wk-layout-item' |
Usage
.my-layout {
@include wk-layout-75-25('.my-column');
}
Output
.my-layout {
max-width: 75rem;
margin-left: auto;
margin-right: auto;
}
.my-layout:after {
content: " ";
display: block;
clear: both;
}
@media (min-width: 37.5rem) {
.my-layout > .my-column {
width: 74.57627%;
float: left;
margin-right: 1.69492%;
}
.my-layout > .my-column:last-child {
width: 23.72881%;
float: left;
margin-right: 1.69492%;
float: right;
margin-right: 0;
}
}
wk-target-tablet-desktop
wk-global-columns
@mixin wk-layout-75-25-persist($child: '.wk-layout-item') { ... }
75% + 25% layout on all breakpoints
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$child | A selector which will serve as the column name. | String | '.wk-layout-item' |
Usage
.my-layout {
@include wk-layout-75-25-persist('.my-column');
}
Output
.my-layout {
max-width: 75rem;
margin-left: auto;
margin-right: auto;
}
.my-layout:after {
content: " ";
display: block;
clear: both;
}
.my-layout > .my-column {
width: 74.57627%;
float: left;
margin-right: 1.69492%;
}
.my-layout > .my-column:last-child {
width: 23.72881%;
float: left;
margin-right: 1.69492%;
float: right;
margin-right: 0;
}
wk-global-columns
@mixin wk-layout-33-33-33($child: '.wk-layout-item') { ... }
33% + 33% + 33% layout on breakpoints larger than mobile
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$child | A selector which will serve as the column name. | String | '.wk-layout-item' |
Usage
.my-layout {
@include wk-layout-33-33-33('.my-column');
}
Output
.my-layout {
max-width: 75rem;
margin-left: auto;
margin-right: auto;
}
.my-layout:after {
content: " ";
display: block;
clear: both;
}
@media (min-width: 37.5rem) {
.my-layout > .my-column {
width: 32.20339%;
float: left;
margin-right: 1.69492%;
}
.my-layout > .my-column:last-child {
float: right;
margin-right: 0;
}
}
wk-target-tablet-desktop
wk-global-columns
@mixin wk-layout-33-33-33-persist($child: '.wk-layout-item') { ... }
33% + 33% + 33% layout on all breakpoints
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$child | A selector which will serve as the column name. | String | '.wk-layout-item' |
Usage
.my-layout {
@include wk-layout-33-33-33-persist('.my-column');
}
Output
.my-layout {
max-width: 75rem;
margin-left: auto;
margin-right: auto;
}
.my-layout:after {
content: " ";
display: block;
clear: both;
}
.my-layout > .my-column {
width: 32.20339%;
float: left;
margin-right: 1.69492%;
}
.my-layout > .my-column:last-child {
float: right;
margin-right: 0;
}
wk-global-columns
@mixin wk-layout-25-25-25-25($child: '.wk-layout-item') { ... }
25% + 25% + 25% + 25% layout on breakpoints larger than mobile
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$child | A selector which will serve as the column name. | String | '.wk-layout-item' |
Usage
.my-layout {
@include wk-layout-25-25-25-25('.my-column');
}
Output
.my-layout {
max-width: 75rem;
margin-left: auto;
margin-right: auto;
}
.my-layout:after {
content: " ";
display: block;
clear: both;
}
@media (min-width: 37.5rem) {
.my-layout > .my-column {
width: 23.72881%;
float: left;
margin-right: 1.69492%;
}
.my-layout > .my-column:last-child {
float: right;
margin-right: 0;
}
}
wk-target-tablet-desktop
wk-global-columns
@mixin wk-layout-25-25-25-25-persist($child: '.wk-layout-item') { ... }
25% + 25% + 25% + 25% layout on all breakpoints
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$child | A selector which will serve as the column name. | String | '.wk-layout-item' |
Usage
.my-layout {
@include wk-layout-25-25-25-25-persist('.my-column');
}
Output
.my-layout {
max-width: 75rem;
margin-left: auto;
margin-right: auto;
}
.my-layout:after {
content: " ";
display: block;
clear: both;
}
.my-layout > .my-column {
width: 23.72881%;
float: left;
margin-right: 1.69492%;
}
.my-layout > .my-column:last-child {
float: right;
margin-right: 0;
}
wk-global-columns
@mixin wk-layout-push-25() { ... }
Pushes element to 25% from the left
None.
Usage
@include wk-layout-push-25;
wk-global-columns
@mixin wk-layout-push-33() { ... }
Pushes element to 33% from the left
None.
Usage
@include wk-layout-push-33;
wk-global-columns
@mixin wk-layout-centered-small($mobile-max-breakpoint: $wk-mobile-max-breakpoint) { ... }
Small Centered Layout
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$mobile-max-breakpoint | the smallest measurement for the tablet breakpoint for this layout, of which the layout width will be 75%. | Unit | $wk-mobile-max-breakpoint |
Usage
.my-section {
@include wk-layout-centered-small;
}
Output
.my-section {
max-width: 75rem;
margin-left: auto;
margin-right: auto;
}
.my-section:after {
content: " ";
display: block;
clear: both;
}
@media (min-width: 37.5rem) {
.my-section {
max-width: 28.125rem;
}
}
@mixin wk-layout-centered-medium($mobile-max-breakpoint: $wk-mobile-max-breakpoint) { ... }
Medium Centered Layout
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$mobile-max-breakpoint | the smallest measurement for the tablet breakpoint for this layout, the form will be this width. | Unit | $wk-mobile-max-breakpoint |
Usage
.my-section {
@include wk-layout-centered-medium;
}
Output
.my-section {
max-width: 75rem;
margin-left: auto;
margin-right: auto;
max-width: 37.5rem;
}
.my-section:after {
content: " ";
display: block;
clear: both;
}
@mixin wk-layout-centered-large($tablet-width: $wk-mobile-max-breakpoint, $target-tablet: $wk-target-tablet, $desktop-width: $wk-tablet-max-breakpoint, $target-desktop: $wk-target-desktop) { ... }
Large Centered Layout
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$tablet-width | the tablet width of this layout at the tablet breakpoint. | Unit | $wk-mobile-max-breakpoint |
$target-tablet | the breakpoint query to target the tablet size. | List | $wk-target-tablet |
$desktop-width | the desktop width of this layout at the tablet breakpoint. | Unit | $wk-tablet-max-breakpoint |
$target-desktop | the breakpoint query to target the tablet size. | List | $wk-target-desktop |
Usage
.my-section {
@include wk-layout-centered-large;
}
Output
.my-section {
max-width: 75rem;
margin-left: auto;
margin-right: auto;
}
.my-section:after {
content: " ";
display: block;
clear: both;
}
@media (min-width: 37.5rem) and (max-width: 65rem) {
.my-section {
max-width: 37.5rem;
}
}
@media (min-width: 65rem) {
.my-section {
max-width: 65rem;
}
}
@mixin wk-logo($source, $width, $color: false) { ... }
Applies element & pseudo-element properties for branding
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$source | SVG url encoded source string. | String | —none |
$width | Logo width, in pixels. | Unit | —none |
$color | Color of text within an badge. | Color or Bool | false |
Usage
.main-logo {
@include wk-logo("data:image/svg+xml", 194px, '#FFFFFF');
}
Output
.main-logo {
display: block;
width: 194px;
}
.main-logo::after {
content: url("data:image/svg+xml");
display: block;
width: 194px;
}
wk-logo-color
wk-make-logo
@mixin wk-make-logo($variant: default, $color: false, $width: false) { ... }
A helper mixin to quickly create logos already included in the logo variants map
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$variant | The logo variant key. | String | default |
$color | Color of the logo text. | Color or Bool | false |
$width | Logo width, in pixels. | Unit or Bool | false |
Usage
.some-logo {
@include wk-make-logo(default);
}
wk-logo
wk-logo-variants
wk-brand
wk-brand-small
Use the new @wk-logo & @wk-make-logo mixins instead.
@mixin wk-brand($wk-brand-width: false, $wk-brand-color: false) { ... }
Applies the high fidelity WK logo
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$wk-brand-width | Logo width, in pixels. | Unit or Bool | false |
$wk-brand-color | Color of the logo text. | Color or Bool | false |
Usage
.some-logo {
@include wk-make-logo(default);
}
wk-make-logo
Use the new @wk-logo & @wk-make-logo mixins instead.
@mixin wk-brand-small($wk-brand-width: false, $wk-brand-color: false) { ... }
Applies the low fidelity WK logo
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$wk-brand-width | Logo width, in pixels. | Unit or Bool | false |
$wk-brand-color | Color of the logo text. | Color or Bool | false |
Usage
.some-logo {
@include wk-brand-small();
}
wk-make-logo
@mixin wk-viewport-insulate($width: $wk-desktop-max-width, $padding: $wk-page-content-padding) { ... }
Give a block container horizontal padding only when smaller than the defined width as to not touch the window’s viewport edges
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$width | —none | Unit | $wk-desktop-max-width |
$padding | —none | Unit | $wk-page-content-padding |
Usage
.my-div {
@include wk-viewport-insulate(wk-rem-value(300px));
}
Output
.my-div {
max-width: 18.75rem;
margin-left: auto;
margin-right: auto;
padding-left: 0.938rem;
padding-right: 0.938rem;
}
.my-div:after {
content: " ";
display: block;
clear: both;
}
@media (min-width: 20.626rem) {
.my-div {
padding-left: 0;
padding-right: 0;
}
}
wk-page-content-padding
wk-desktop-max-width
wk-page-content
@mixin wk-page-content($deprecated-transition: false) { ... }
Give a block container horizontal padding only when smaller than the maximum desktop breakpoint width. Use wk-viewport-insulate instead.
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$deprecated-transition | —none | Bool | false |
Usage
.my-div {
@include wk-page-content;
}
Output
.my-div {
max-width: 75rem;
margin-left: auto;
margin-right: auto;
padding-left: 0.938rem;
padding-right: 0.938rem;
}
.my-div:after {
content: " ";
display: block;
clear: both;
}
@media (min-width: 76.876rem) {
.my-div {
padding-left: 0;
padding-right: 0;
}
}
wk-viewport-insulate
@mixin wk-tooltip() { ... }
Mixin for creating a popover/tooltip
None.
wk-arrow
wk-tooltip-background-color
wk-tooltip-border
wk-tooltip-box-shadow
@mixin wk-selection($current-selector: false) { ... }
Outputs the spec and prefixed versions of the ::selection
pseudo-element.
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$current-selector | If set to | Bool | false |
This mixin allows extra content to be passed (through the @content
directive).
Usage
.element {
@include wk-selection(true) {
background-color: #ffbb52;
}
}
Output
.element::-moz-selection {
background-color: #ffbb52;
}
.element::selection {
background-color: #ffbb52;
}
@mixin wk-link($color: $body-link-color, $hover-color: $body-link-hover-color) { ... }
Link mixin. Easy link styles for elements
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$color | —none | Color | $body-link-color |
$hover-color | —none | Color | $body-link-hover-color |
Usage
.element {
@include wk-link(#0668a9, #64a137);
}
Output
.element { color: #0668a9; text-decoration: none; cursor: pointer; }
.element:hover { color: #64a137; }
wk-body-link-color
wk-body-link-hover-color
wk-alert
@mixin wk-headings() { ... }
Headings Mixin Styles for h1, h2, ..., h6 by hand
None.
This mixin allows extra content to be passed (through the @content
directive).
Usage
@include wk-headings() {
font-family: 'Arial';
}
Output
h1, h2, h3, h4, h5, h6, .wk-h1, .wk-h2, .wk-h3, .wk-h4, .wk-h5, .wk-h6 {
font-family: 'Arial';
}
@mixin wk-h1() { ... }
h1 Mixin
None.
Usage
.my-heading {
@include wk-h1;
}
Output
.my-heading {
font-size: 2.0736rem;
font-weight: 700;
}
wk-heading-scale
wk-heading-weight
@mixin wk-h2() { ... }
h2 Mixin
None.
Usage
.my-heading {
@include wk-h2;
}
Output
.my-heading {
font-size: 1.728rem;
font-weight: 700;
}
wk-heading-scale
wk-heading-weight
@mixin wk-h3() { ... }
h3 Mixin
None.
Usage
.my-heading {
@include wk-h3;
}
Output
.my-heading {
font-size: 1.44rem;
font-weight: 700;
}
wk-heading-scale
wk-heading-weight
@mixin wk-h4() { ... }
h4 Mixin
None.
Usage
.my-heading {
@include wk-h4;
}
Output
.my-heading {
font-size: 1.2rem;
font-weight: 600;
}
wk-heading-scale
wk-heading-weight
@mixin wk-h5() { ... }
h5 Mixin
None.
Usage
.my-heading {
@include wk-h5;
}
Output
.my-heading {
font-size: 1rem;
font-weight: 400;
}
wk-heading-scale
wk-heading-weight
@mixin wk-h6() { ... }
h6 Mixin
None.
Usage
.my-heading {
@include wk-h6;
}
Output
.my-heading {
font-size: 1rem;
font-weight: 300;
}
wk-heading-scale
wk-heading-weight
$wk-brand-small: 'data:image/svg+xml;
wk-brand-small.svg
String
$wk-brand-vertical: 'data:image/svg+xml;
wk-brand-vertical.svg
String
$wk-brand-wheel: 'data:image/svg+xml;
wk-brand-wheel.svg
String
$wk-brand: 'data:image/svg+xml;
wk-brand.svg
String
$wk-primary-black: #000 !default;
Wolters Kluwer primary black
Color
$wk-primary-red: #e5202e !default;
Wolters Kluwer primary red
Color
$wk-primary-red-tint1: #ec5862 !default;
Wolters Kluwer primary red - tint 1
Color
$wk-primary-red-tint2: #f29097 !default;
Wolters Kluwer primary red - tint 2
Color
$wk-primary-red-tint3: #f6b1b6 !default;
Wolters Kluwer primary red - tint 3
Color
$wk-primary-blue: #007ac3 !default;
Wolters Kluwer primary blue
Color
$wk-primary-blue-tint1: #409bd2 !default;
Wolters Kluwer primary blue - tint 1
Color
$wk-primary-blue-tint2: #80bde1 !default;
Wolters Kluwer primary blue - tint 2
Color
$wk-primary-blue-tint3: #a6d1ea !default;
Wolters Kluwer primary blue - tint 3
Color
$wk-primary-blue-shade1: #005b92 !default;
Wolters Kluwer primary blue - shade 1
Color
$wk-primary-green: #85bc20 !default;
Wolters Kluwer primary green
Color
$wk-primary-green-tint1: #a4cd58 !default;
Wolters Kluwer primary green - tint 1
Color
$wk-primary-green-tint2: #c2de90 !default;
Wolters Kluwer primary green - tint 2
Color
$wk-primary-green-tint3: #d4e8b1 !default;
Wolters Kluwer primary green - tint 3
Color
$wk-primary-gray: #474747 !default;
Color
$wk-primary-gray-tint1: #757575 !default;
Wolters Kluwer primary gray - tint 1
Color
$wk-primary-gray-tint2: #a3a3a3 !default;
Wolters Kluwer primary gray - tint 2
Color
$wk-primary-gray-tint3: #bfbfbf !default;
Wolters Kluwer primary gray - tint 3
Color
$wk-primary-gray-tint4: #dadada !default;
Wolters Kluwer primary gray - tint 4
Color
$wk-primary-gray-tint5: #ededed !default;
Wolters Kluwer primary gray - tint 5
Color
$wk-primary-gray-tint6: #f6f6f6 !default;
Wolters Kluwer primary gray - tint 6
Color
$wk-secondary-green: #009881 !default;
Wolters Kluwer secondary green
Color
$wk-secondary-green-tint1: #40b2a1 !default;
Wolters Kluwer secondary green - tint 1
Color
$wk-secondary-green-tint2: #80ccc0 !default;
Wolters Kluwer secondary green - tint 2
Color
$wk-secondary-green-tint3: #a6dbd3 !default;
Wolters Kluwer secondary green - tint 3
Color
$wk-secondary-orange: #ea8f00 !default;
Wolters Kluwer secondary orange
Color
$wk-secondary-orange-tint1: #efab40 !default;
Wolters Kluwer secondary orange - tint 1
Color
$wk-secondary-orange-tint2: #f5c780 !default;
Wolters Kluwer secondary orange - tint 2
Color
$wk-secondary-orange-tint3: #f8d8a6 !default;
Wolters Kluwer secondary orange - tint 3
Color
$wk-secondary-purple: #940c72 !default;
Wolters Kluwer secondary purple
Color
$wk-secondary-purple-tint1: #af4995 !default;
Wolters Kluwer secondary purple - tint 1
Color
$wk-secondary-purple-tint2: #ca86b9 !default;
Wolters Kluwer secondary purple - tint 2
Color
$wk-secondary-purple-tint3: #daaace !default;
Wolters Kluwer secondary purple - tint 3
Color
$wk-secondary-blue: #241866 !default;
Wolters Kluwer secondary blue
Color
$wk-secondary-blue-tint1: #5b528c !default;
Wolters Kluwer secondary blue - tint 1
Color
$wk-secondary-blue-tint2: #928cb3 !default;
Wolters Kluwer secondary blue - tint 2
Color
$wk-secondary-blue-tint3: #b3aeca !default;
Wolters Kluwer secondary blue - tint 3
Color
$wk-primary-white: #fff !default;
Color
$wk-primary-colors: (
wkBlack: (
base: $wk-primary-black
),
wkRed: (
base: $wk-primary-red,
tint1: $wk-primary-red-tint1,
tint2: $wk-primary-red-tint2,
tint3: $wk-primary-red-tint3
),
wkBlue: (
base: $wk-primary-blue,
tint1: $wk-primary-blue-tint1,
tint2: $wk-primary-blue-tint2,
tint3: $wk-primary-blue-tint3,
shade1: $wk-primary-blue-shade1
),
wkGreen: (
base: $wk-primary-green,
tint1: $wk-primary-green-tint1,
tint2: $wk-primary-green-tint2,
tint3: $wk-primary-green-tint3
),
wkGray: (
base: $wk-primary-gray,
tint1: $wk-primary-gray-tint1,
tint2: $wk-primary-gray-tint2,
tint3: $wk-primary-gray-tint3,
tint4: $wk-primary-gray-tint4,
tint5: $wk-primary-gray-tint5,
tint6: $wk-primary-gray-tint6
),
wkWhite: (
base: $wk-primary-white
)
) !default;
Primary colors map
Map
wk-brand-color
$wk-secondary-colors: (
wkGreen: (
base: $wk-secondary-green,
tint1: $wk-secondary-green-tint1,
tint2: $wk-secondary-green-tint2,
tint3: $wk-secondary-green-tint3
),
wkOrange: (
base: $wk-secondary-orange,
tint1: $wk-secondary-orange-tint1,
tint2: $wk-secondary-orange-tint2,
tint3: $wk-secondary-orange-tint3
),
wkPurple: (
base: $wk-secondary-purple,
tint1: $wk-secondary-purple-tint1,
tint2: $wk-secondary-purple-tint2,
tint3: $wk-secondary-purple-tint3
),
wkBlue: (
base: $wk-secondary-blue,
tint1: $wk-secondary-blue-tint1,
tint2: $wk-secondary-blue-tint2,
tint3: $wk-secondary-blue-tint3
)
) !default;
Secondary colors map
Map
wk-brand-color
$wk-body-background-color: wk-primary-color(wkWhite) !default;
Body background-color
Color
$wk-body-text-color: wk-primary-color(wkGray) !default;
Body text color
Color
$wk-body-selection-color: wk-primary-color(wkGreen, tint3) !default;
Body selection color
Color
$wk-body-link-color: wk-primary-color(wkBlue) !default;
Body link color
Color
wk-link
$wk-body-link-hover-color: wk-primary-color(wkGreen) !default;
Body link :hover
color
Color
wk-link
$wk-state-info-text-color: wk-primary-color(wkBlue) !default !global;
Info text color
Color
$wk-state-info-background-color: wk-primary-color(wkWhite) !default;
Info background color
Color
$wk-state-info-border-color: wk-primary-color(wkBlue) !default;
Info border color
Color
$wk-state-info-link-color: darken($wk-state-info-text-color, 6.5%) !default;
Info link color
Color
$wk-state-success-text-color: wk-primary-color(wkGreen) !default;
Success text color
Color
$wk-state-success-background-color: wk-primary-color(wkWhite) !default;
Success background color
Color
$wk-state-success-border-color: wk-primary-color(wkGreen) !default;
Success border color
Color
$wk-state-success-link-color: darken($wk-state-success-text-color, 6.5%) !default;
Success link color
Color
$wk-state-danger-text-color: wk-primary-color(wkRed) !default;
Danger text color
Color
$wk-state-danger-background-color: wk-primary-color(wkWhite) !default;
Danger background color
Color
$wk-state-danger-border-color: wk-primary-color(wkRed) !default;
Danger border color
Color
$wk-state-danger-link-color: darken($wk-state-danger-text-color, 6.5%) !default;
Danger link color
Color
$wk-table-border-color: wk-primary-color(wkGray, tint5) !default;
Table border color
Color
$wk-table-sorted-color: wk-primary-color(wkGray, tint6) !default;
Table sorted color
Color
$wk-document-text-color: wk-primary-color(wkGray) !default;
Document text color
Color
$wk-input-color: wk-primary-color(wkGray) !default;
Input Color
Color
wk-text-input-base
$wk-input-background-color: wk-primary-color(wkWhite) !default;
Input Background Color
Color
wk-text-input-base
$wk-input-border-color: wk-primary-color(wkGray, tint4) !default;
Input Border Color
Color
wk-text-input-base
$wk-input-focus-border-color: wk-primary-color(wkBlue, tint1) !default;
Input Focused Border Color
Color
wk-text-input-base
$wk-input-hover-border-color: wk-primary-color(wkGray) !default;
Input Hover Border Color
Color
wk-text-input-base
$wk-input-placeholder-color: wk-primary-color(wkGray, tint3) !default;
Input Placeholder Color
Color
$wk-input-disabled-background-color: wk-primary-color(wkGray, tint5) !default;
Input Disabled Background Color
Color
wk-text-input-base
$wk-input-disabled-color: wk-primary-color(wkGray, tint5) !default;
Input Disabled Color
Color
wk-text-input-base
$wk-button-base-color: wk-primary-color(wkBlue) !default;
Button base color
Color
$wk-base-content-filter-active-background: wk-primary-color(wkBlue, tint3) !default;
Content filter base active background
Color
$wk-imported-modules: () !default;
List of WK CSS modules imported via the wk-exports
mixin
Map
wk-exports
@mixin wk-exports($name) { ... }
Module export mixin
This mixin helps making sure a module is imported once and only once.
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$name | Name of exported module | String | —none |
This mixin allows extra content to be passed (through the @content
directive).
wk-imported-modules
wk-keyframes
@function wk-str-replace($string, $search, $replace: '') { ... }
String replacement function
Source - https://gist.github.com/jonathantneal/d0460e5c2d5d7f9bc5e6
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$string | source string | String | —none |
$search | search pattern | String | —none |
$replace | replacement pattern | String | '' |
String
—new string with matches of a search pattern replaced by a replacement pattern
Usage
wk-str-replace('foo bar', " ", "_")
Output
// foo_bar
wk-logo-color
@function wk-strip-units($value) { ... }
Strips the unit from a number.
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$value | —none | Number (with unit) | —none |
Number (unitless)
Usage
$dimension: wk-strip-units(10em);
Output
$dimension: 10;
wk-badge
wk-rem-value
@function wk-rem-convert($to, $values...) { ... }
Converts one or more list values to a specified type.
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$to | conversion type | String | —none |
$values... | list of values to convert | List | —none |
Number
or List
Usage
div {
text-shadow: wk-rem-convert(rem, 1px 1px #eee, -1px -1px #eee);
}
Output
div {
text-shadow: 0.0625rem 0.0625rem #eee, -0.0625rem -0.0625rem #eee;
}
wk-rem-base
Pierre Burel - Modified by GPO
@function wk-rem($values...) { ... }
Convert list of values to rem
.
If $wk-rem-px-only
is set to true
, returned values will be px
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$values... | list of values to convert | List | —none |
Number
or List
Usage
div {
text-shadow: wk-rem(1px 1px #eee, -1px -1px #eee);
}
Output
div {
text-shadow: 0.0625rem 0.0625rem #eee, -0.0625rem -0.0625rem #eee;
}
wk-rem-px-only
wk-rem-convert
Pierre Burel - Modified by GPO
@function wk-rem-value($pxval, $base: $wk-rem-base) { ... }
Converts px
value to rem
This function should be used in place of rem
if a custom $base
value is required for a single value
Assumes $wk-rem-base
is the font-size of <html>
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$pxval | pixel value to convert to rem, without px | Number | —none |
$base | base pixel value used in rem conversion, without px | Number | $wk-rem-base |
Usage
.element {
font-size: wk-rem-value(12) // for a relational value of 12px
}
Output
.element {
font-size: 0.75rem;
}
wk-strip-units
@function wk-logo-color($source, $color) { ... }
Replaces color inside url encoded SVG logo string
Font color can be changed from default by supplying desired color
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$source | SVG url encoded source string | String | —none |
$color | Color for the logo text | Color | —none |
Usage
.element {
background-image: url(wk-logo-color($wk-brand, '#FFFFFF'));
}
Output
.element {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%3E...good%20stuff...%3C%2Fsvg%3E");
}
wk-str-replace
wk-logo
@function wk-utils-dependencies($-) { ... }
Missing dependencies helper
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$- | A List of arguments that contain the type (mixin, variable, or function) then the dependency name. Function is the default dependency type, so omission assumes the dependency is a function. | List | —none |
Usage
%component-deps {
utils: wk-utils-dependencies(mixin my-required-mixin, variable my-required-variable, function my-required-function);
}
@function wk-component-dependencies($-) { ... }
Missing components helper
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$- | A List of components | List | —none |
Usage
%component-deps {
components: wk-component-dependencies(forms, buttons);
}
@function wk-em-value($pxval, $base: $wk-rem-base) { ... }
Converts px
value to em
This function should be used in place of em
if a custom $base
value is required for a single value
Assumes $wk-rem-base
is the font-size of <html>
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$pxval | pixel value to convert to rem, without px | Number | —none |
$base | base pixel value used in rem conversion, without px | Number | $wk-rem-base |
Usage
.element {
font-size: wk-em-value(12) // for a relational value of 12px
}
Output
.element {
font-size: 0.75em;
}
@function wk-has-feature($feature, $list: $wk-component-features) { ... }
Checks a list for given value
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$feature | the feature string to search on the list | String | —none |
$list | the full list of features provided | String | $wk-component-features |
Usage
@if wk-has-feature('alerts')
@import 'wk-components/alerts';
}
@function wk-primary-color($color, $variation: 'base') { ... }
Returns primary color variation from primary color map
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$color | the color to retrieve | String | —none |
$variation | the color variant | String | 'base' |
Usage
div {
background-color: wk-primary-color(wkRed)
}
wk-brand-color
wk-arrow
@function wk-secondary-color($color, $variation: 'base') { ... }
Returns secondary color variation from secondary color map
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$color | the color to retrieve | String | —none |
$variation | the color variant | String | 'base' |
Usage
div {
background-color: wk-secondary-color('green')
}
wk-brand-color
@function wk-brand-color($color, $variation: 'base', $is-secondary) { ... }
Returns variation of brand color from appropriate color map
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$color | the color to retrieve | String | —none |
$variation | the color variant | String | 'base' |
$is-secondary | false - if color is seondary | Boolean | —none |
wk-get-color-variation
wk-primary-colors
wk-secondary-colors
wk-primary-color
wk-secondary-color
@function wk-get-color-variation($color-map, $variation: 'base') { ... }
Helper function which returns variation of color from provided map
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$color-map | the color to retrieve | String | —none |
$variation | the color variant | String | 'base' |
wk-brand-color
@mixin wk-font-face($name, $path, $weight: null, $style: null, $exts: eot woff ttf) { ... }
Create a font face rule. Embedded OpenType, WOFF2, WOFF and TrueType files are automatically sourced.
Source - https://gist.github.com/jonathantneal/d0460e5c2d5d7f9bc5e6
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$name | font name | String | —none |
$path | path to font file | String | —none |
$weight | font-weight value | String | null |
$style | font-style value | String | null |
$exts | space separated list of font extenstions | String | eot woff ttf |
Usage
@include font-face(Samplino, fonts/Samplino);
Output
@font-face {
font-family: "Samplino";
src: url("fonts/Samplino.eot?") format("eot"),
url("fonts/Samplino.woff") format("woff"),
url("fonts/Samplino.ttf") format("truetype")
}
@mixin wk-rem($property, $values...) { ... }
Generate property values in rem
units.
If $wk-rem-fallback
is set to true
, the px
fallback vaules are returned as well.
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$property | CSS property to return | String | —none |
$values... | one or more values to convert to | List | —none |
Usage
.element-one {
@include wk-rem(font-size, 24px);
}
Output
.element-one {
font-size: 1.5rem;
}
Usage
.element-two {
@include wk-rem((
margin: 20px 1rem,
padding: 10px
));
}
Output
.element-two {
margin: 1.25rem 1rem;
padding: 0.625rem;
}
wk-rem-fallback
wk-rem-px-only
wk-rem-convert
Pierre Burel - Modified by GPO
@mixin wk-shown() { ... }
Shows element wk-shown is a mixin, not a placeholder, because it is commonly called from within an @include breakpoint() where an placeholder cannot be extended
None.
Usage
.element {
@include wk-hide;
}
Output
.element {
display: none;
}
@mixin wk-text-overflow() { ... }
Allows to hide overflowed text by adding ellipsis to the end
None.
Usage
.element {
@include wk-text-overflow;
}
Output
.element {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@mixin wk-hide-text() { ... }
Allows to hide text out of element
None.
Usage
.element {
@include wk-hide-text;
}
Output
.element {
background-color: transparent;
border: 0;
color: transparent;
font: 0/0 a;
text-shadow: none;
}
@mixin wk-clearfix() { ... }
Basic clearfix mixin
None.
Usage
.element {
@include wk-clearfix;
}
Output
.element:after {
content: ' ';
display: table;
clear: both;
}
@mixin wk-inputs() { ... }
Adds possibility to write styles for all inputs, except checkboxes and radios.
None.
This mixin allows extra content to be passed (through the @content
directive).
Usage
@include wk-inputs {
border: 1px solid #fff;
}
Output
input:not([type='radio']):not([type='checkbox']) {
border: 1px solid #fff;
}
: find a better place and name for me
@mixin wk-radio-checkbox() { ... }
Adds possibility to write styles for all checkboxes and radios.
None.
This mixin allows extra content to be passed (through the @content
directive).
Usage
@include wk-radio-checkbox {
border: 1px solid #fff;
}
Output
input[type='radio'], input[type='checkbox']),
.wk-checkbox, .wk-radio {
border: 1px solid #fff;
}
: find a better place and name for me
@mixin wk-unstyle-list($child-blocks: false) { ... }
Removes default styling from lists
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$child-blocks | make child | Bool | false |
Usage
.some-list {
@include wk-unstyle-list;
}
Output
.some-list {
list-style: none;
margin: 0;
padding: 0;
}
@mixin wk-arrow($box-edge: bottom, $box-side: center, $arrow-size: 10px, $edge-side-offset: 0, $fill-color: wk-primary-color(wkBlack), $border-color: none, $border-style: border) { ... }
Adds an arrow to a container
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$box-edge | Edge to place the arrow | String | bottom |
$box-side | Which side the edge to attach the arrow | String | center |
$arrow-size | Default arrow size | Unit | 10px |
$edge-side-offset | Distance for the margins | Unit | 0 |
$fill-color | Arrow fill color | Color | wk-primary-color(wkBlack) |
$border-color | Arrow border color | Color | none |
$border-style | Arrow border style | String | border |
Usage
.popover {
@include wk-arrow(top, center, 8px, 20px, #fff, #ddd);
}
Output
.popover:before {
border-color: rgba(255, 255, 255, 0);
border-width: 8px;
top: -16px;
border-bottom-color: #ddd;
right: 0;
margin-right: 20px;
}
.popover:after {
border-color: rgba(255, 255, 255, 0);
border-width: 7px;
top: -14px;
border-bottom-color: #fff;
right: 0;
margin-right: 21px;
}
wk-primary-color
wk-rem
wk-tooltip
Erin Keeffe - Modified by GPO
@mixin wk-transition() { ... }
Transition, accepts optional attributes
None.
Usage
.element {
@include wk-transition;
}
Output
.element {
transition: all .1s ease-out;
}
wk-transition-property
wk-transition-duration
wk-transition-function
$wk-heading-scale: (
h1: ms(4, 1rem, $minor-third),
h2: ms(3, 1rem, $minor-third),
h3: ms(2, 1rem, $minor-third),
h4: ms(1, 1rem, $minor-third),
h5: ms(0, 1rem, $minor-third),
h6: ms(0, 1rem, $minor-third)
) !default;
Heading Font Scale
Map
$wk-font-scale: (
biggest: ms(3, 1rem, $minor-second),
bigger: ms(2, 1rem, $minor-second),
big: ms(1, 1rem, $minor-second), //document p, ol, ul
base: ms(0, 1rem, $minor-second), //body, h5, h6
small: ms(-1, 1rem, $minor-second), //p, ul, ol, button, wk-field-error, wk-table td, code, search: wk-select-field
smaller: ms(-2, 1rem, $minor-second),
smallest: ms(-3, 1rem, $minor-second), //copyright, wk-table th
tiny: ms(-4, 1rem, $minor-second) //wk-badge
) !default;
Base Font Scale
Map
wk-badge
wk-text-input-base
$wk-mono-scale: (
biggest: wk-rem(ms(3, $wk-mono-base, $minor-second)),
bigger: wk-rem(ms(2, $wk-mono-base, $minor-second)),
big: wk-rem(ms(1, $wk-mono-base, $minor-second)),
base: wk-rem(ms(0, $wk-mono-base, $minor-second)),
small: wk-rem(ms(-1, $wk-mono-base, $minor-second)),
smaller: wk-rem(ms(-2, $wk-mono-base, $minor-second)),
smallest: wk-rem(ms(-3, $wk-mono-base, $minor-second))
) !default;
Monospace Font Scale
Map
$wk-rem-base: 16px !default;
This is the default html and body font-size for the base rem value. If is equal to 16px
, 1rem = 16px
Number
wk-rem-convert
$wk-mono-base: 13px !default;
The monospace base size
Number
$ms-base: $wk-rem-base !default;
Modular Scale has two default variables that you should place with your other site wide variables. $ms-base is usually your font size or 1em and can have multiple values. $ms-ratio is the factor of change between each number so if the ratio is 1.5 then each number in the sequence will be 1.5 times that of the previous number. Just as you can have multiple bases you can have multiple ratios.
$wk-rem-fallback: false !default;
If $rem-fallback
is set to true
, properties with pixel values will also be output by the rem functions and mixins
Bool
wk-rem
$wk-rem-px-only: false !default;
If $rem-px-only
is set to true
, only px values will be returned and output by rem functions and mixins
Bool
$wk-font-path: 'fonts/' !default;
Base path to fonts supplied by WK CSS
String
$wk-font-stacks: (
helvetica: ("Helvetica Neue", Helvetica, "Roboto", Arial, sans-serif),
global-serif: ("Franziska", "Times New Roman", Times, serif),
global-sans: ("Fira Sans", "Helvetica Neue", Helvetica, "Roboto", Arial, sans-serif),
monospace: ("DejaVu Sans Mono", Consolas, Menlo, Monaco, "Lucida Console", "Bitstream Vera Sans Mono", "Courier New", monospace)
) !default;
Font Stacks
Map
Map keyName | Map keyDescription | Map keyType | Map keyValue |
---|---|---|---|
$wk-font-stacks.helvetica | Helvetica | List | —none |
$wk-font-stacks.global-serif | Franziska | List | —none |
$wk-font-stacks.global-sans | Fira Sans | List | —none |
$wk-font-stacks.monospace | DejaVu Sans Mono | List | —none |
wk-alert
wk-text-input-base
$wk-logo-variants: (
small: (
width: 142px,
source: $wk-brand-small
),
wheel: (
width: 36px,
source: $wk-brand-wheel
),
vertical: (
width: 75px,
source: $wk-brand-vertical
),
default: (
width: 194px,
source: $wk-brand
)
) !default;
Brand logo variants map
Map
Map keyName | Map keyDescription | Map keyType | Map keyValue |
---|---|---|---|
$wk-logo-variants.small | Small logo | Map | —none |
$wk-logo-variants.wheel | Wheel logo | Map | —none |
$wk-logo-variants.vertical | Vertical logo | Map | —none |
$wk-logo-variants.default | Default logo | Map | —none |
wk-make-logo
$wk-font-weight: (
light: 300,
regular: 400,
medium: 500,
semibold: 600,
bold: 700,
extrabold: 800
) !default;
Font weights
Map
Map keyName | Map keyDescription | Map keyType | Map keyValue |
---|---|---|---|
wk-font-weight.light | light font weight | Number | 300 |
wk-font-weight.regular | regular font weight | Number | 400 |
wk-font-weight.semibold | semibold font weight | Number | 600 |
wk-font-weight.bold | bold font weight | Number | 700 |
wk-font-weight.extrabold | extrabold font weight | Number | 800 |
wk-alert
wk-badge
wk-label
wk-heading-weight
$wk-z-index: (
subzero: -1,
base: 0,
document-bubble-after: 1,
navbar-product-name: 2,
modal: 1050,
popover: 1060,
header: 1000,
header-open: 1040,
navbar: 1000,
navbar-open: 1040,
breakpoint-tag: 1200,
list: 2000,
fixed-top: 9999,
document-bubble: 9999999
) !default;
Elements z-index map
Map
Map keyName | Map keyDescription | Map keyType | Map keyValue |
---|---|---|---|
modal | Modal component z-index value | Number | 1050 |
popover | Popover component z-index value | Number | 1060 |
header | Header component z-index value | Number | 1000 |
navbar | Navbar component z-index value | Number | 1000 |
$wk-border-radius: .3em !default;
Global border radius
Unit
$wk-body-font-stack: map-get($wk-font-stacks, helvetica) !default;
<body>
font stack
List
wk-font-stacks.helvetica
$wk-body-font-size: $wk-rem-base !default;
<body>
font size. Use px here at the
Number
$wk-body-line-height: 1.4 !default;
<body>
font line height
Number
$wk-document-font-stack: map-get($wk-font-stacks, global-serif) !default;
.wk-document
font stack
List
wk-font-stacks.global-serif
$wk-headings-font-stack: map-get($wk-font-stacks, global-sans) !default;
<h1>
through <h6>
font stack
List
font-stacks.global-sans
$wk-heading-weight: (
h1: map-get($wk-font-weight, bold),
h2: map-get($wk-font-weight, bold),
h3: map-get($wk-font-weight, bold),
h4: map-get($wk-font-weight, semibold),
h5: map-get($wk-font-weight, regular),
h6: map-get($wk-font-weight, light)
) !default;
Headings font weights
Map
Map keyName | Map keyDescription | Map keyType | Map keyValue |
---|---|---|---|
wk-heading-weight.h1 | h1 font weight | Number | map-get($wk-font-weight, bold) |
wk-heading-weight.h2 | h2 font weight | Number | map-get($wk-font-weight, bold) |
wk-heading-weight.h3 | h3 font weight | Number | map-get($wk-font-weight, bold) |
wk-heading-weight.h4 | h4 font weight | Number | map-get($wk-font-weight, bold) |
wk-heading-weight.h5 | h5 font weight | Number | map-get($wk-font-weight, medium) |
wk-heading-weight.h6 | h6 font weight | Number | map-get($wk-font-weight, light) |
wk-font-weight
$wk-global-columns: 12 !default;
Total ammount of columns
Number
wk-make-columns
wk-layout-50-50
wk-layout-50-50-persist
wk-layout-33-66
wk-layout-33-66-persist
wk-layout-66-33
wk-layout-66-33-persist
wk-layout-25-75
wk-layout-25-75-persist
wk-layout-75-25
wk-layout-75-25-persist
wk-layout-33-33-33
wk-layout-33-33-33-persist
wk-layout-25-25-25-25
wk-layout-25-25-25-25-persist
wk-layout-push-25
wk-layout-push-33
$wk-mobile-max-breakpoint: wk-rem-value(600px) !default;
The upper limit for a mobile, then it becomes tablet
Unit
$wk-tablet-max-breakpoint: wk-rem-value(1040px) !default;
The upper limit for a tablet, then it becomes desktop
Unit
$wk-desktop-max-width: wk-rem-value(1200px) !default;
The layout stops growing after this maximum pixel limit
Unit
wk-viewport-insulate
$wk-target-tablet: $wk-mobile-max-breakpoint $wk-tablet-max-breakpoint !default;
Tablet is between mobile max and tablet max
List
$wk-target-tablet-desktop: $wk-mobile-max-breakpoint !default;
For tablet and above just name the mobile max
Unit
wk-layout-50-50
wk-layout-33-66
wk-layout-66-33
wk-layout-25-75
wk-layout-75-25
wk-layout-33-33-33
wk-layout-25-25-25-25
$wk-target-desktop: $wk-tablet-max-breakpoint !default;
For desktop just name the tablet max
Unit
$susy: (
global-box-sizing: border-box,
columns: $wk-global-columns,
container: $wk-desktop-max-width,
gutters: .25
);
Susy gutters are 0.25 default, just being explicit here
Map
$wk-content-gutter-mobile: .5rem;
Default mobile content gutter
Unit
$wk-content-gutter-tablet: .5rem;
Default tablet content gutter
Unit
$wk-content-gutter-desktop: 0;
Default desktop content gutter
Unit
$wk-input-border-radius: 0 !default;
Input Border Radius
Unit
wk-text-input-base
$wk-input-padding: wk-rem(11px 16px) !default;
Input inner padding
Unit
wk-text-input-base
$wk-input-line-height: 1.5 !default;
Input line height
Unit
wk-text-input-base
$wk-input-height: wk-rem(48px) !default;
Input height
Unit
wk-text-input-base
$wk-textarea-short-height: 5em !default;
Textarea Short Height
Unit
$wk-textarea-medium-height: 8em !default;
Textarea Medium Height
Unit
$wk-textarea-tall-height: 12em !default;
Textarea Tall Height
Unit
$wk-product-brand-non-mobile-width: 132px !default;
Product brand non mobile width
Unit
$wk-select-input-height: wk-rem(41px) !default;
Select input height adjustment to match input natural height
Unit
$wk-border-radius: .2rem !default;
Global border radius
Unit
$wk-page-content-padding: .938rem !default;
Page content horizontal padding - used with the wk-page-content mixin
Unit
wk-viewport-insulate
$wk-transition-property: all !default;
Default transistion property
List
wk-transition
$wk-transition-function: ease-out !default;
Default transistion timing function
List
wk-transition
$wk-transition-duration: .1s !default;
Default transistion duration
List
wk-transition
@mixin wk-bootstrap-button-hover-fix($class, $color, $background) { ... }
Fix Bootstrap button hover after getting squashed by WK CSS’s buttons specificity
parameterName | parameterDescription | parameterType | parameterDefault value |
---|---|---|---|
$class | Bootstrap button class name that needs the hover fix | String | —none |
$color | Button text color | String | —none |
$background | Button background color | String | —none |
Usage
@include wk-bootstrap-button-hover-fix('.btn-default', $btn-default-color, $btn-default-bg);
Output
.btn-default:hover:not([disabled]) {
color: #333;
background-color: #e6e6e6;
}