Breadcrumbs

variables

wk-breadcrumb-padding

Since 0.8.0
$wk-breadcrumb-padding: wk-rem(13.5px) !default;

Description

Breadcrumb vertical padding

Type

Unit

Author

wk-breadcrumb-color

Since 0.8.0
$wk-breadcrumb-color: wk-primary-color(wkGray, tint2) !default;

Description

Breadcrumb text color

Type

Color

Author

wk-breadcrumb-display

Since 0.8.0
$wk-breadcrumb-display: inline-block !default;

Description

Breadcrumb display

Type

String

Author

wk-breadcrumb-font-family

Since 0.8.0
$wk-breadcrumb-font-family: $wk-headings-font-stack !default;

Description

Breadcrumb font family

Type

String

Author

wk-breadcrumb-font-size

Since 0.8.0
$wk-breadcrumb-font-size: map-get($wk-font-scale, small) !default;

Description

Breadcrumb font size

Type

String

Author

wk-breadcrumb-font-weight

Since 0.8.0
$wk-breadcrumb-font-weight: map-get($wk-font-weight, light) !default;

Description

Breadcrumb font weight

Type

String

Author

wk-breadcrumb-first-child-font-weight

Since 0.8.0
$wk-breadcrumb-first-child-font-weight: map-get($wk-font-weight, medium) !default;

Description

Breadcrumb first child font weight

Type

String

Author

wk-breadcrumb-desktop-float

Since 0.8.0
$wk-breadcrumb-desktop-float: left !default;

Description

Breadcrumb desktop float

Type

String

Author

wk-breadcrumb-divider

Since 0.8.0
$wk-breadcrumb-divider: '»' !default;

Description

Breadcrumb divider content

Type

String

Author

wk-breadcrumb-divider-color

Since 0.8.0
$wk-breadcrumb-divider-color: $wk-breadcrumb-color !default;

Description

Breadcrumb divider element color

Type

Color

Author

wk-breadcrumb-divider-margin

Since 0.8.0
$wk-breadcrumb-divider-margin: wk-rem(4px) !default;

Description

Breadcrumb divider element margin

Type

Unit

Author

wk-breadcrumb-icon-margin-left

Since 0.8.0
$wk-breadcrumb-icon-margin-left: 0 !default;

Description

Breadcrumb icon margin left

Type

Unit

Author

wk-breadcrumb-icon-margin-right

Since 0.8.0
$wk-breadcrumb-icon-margin-right: wk-rem(7px) !default;

Description

Breadcrumb icon margin right

Type

Unit

Author

wk-breadcrumb-bar-background-color

Since 0.8.0
$wk-breadcrumb-bar-background-color: wk-primary-color(wkGray, tint6) !default;

Description

Breadcrumb bar background color

Type

Color

Author

Breakpoint Tag

variables

wk-breakpoint-tag-z-index

Since 0.7.0
$wk-breakpoint-tag-z-index: map-get($wk-z-index, breakpoint-tag) !default;

Description

Modal overlay z-index

Type

Unit

Author

wk-breakpoint-text-shadow

Since 0.7.0
$wk-breakpoint-text-shadow: 0 1px 0 wk-primary-color(wkBlack);

Description

Breakpoint tag shadow

Type

Color

Author

wk-breakpoint-tag-color

Since 0.7.0
$wk-breakpoint-tag-color: wk-primary-color(wkGray) !default;

Description

Breakpoint tag text

Type

Color

Author

Buttons

variables

wk-button-standard-color

Since 0.3.0
$wk-button-standard-color: #fff !default;

Description

The font color of the standard button

Type

Color

Author

wk-button-standard-hover-color

Since 0.3.0
$wk-button-standard-hover-color: $wk-button-standard-color !default;

Description

The font color of the standard button hovered

Type

Color

Author

wk-button-standard-background-color

Since 0.3.0
$wk-button-standard-background-color: wk-primary-color(wkBlue) !default;

Description

The background color of the standard button

Type

Color

Author

wk-button-standard-hover-background-color

Since 0.3.0
$wk-button-standard-hover-background-color: wk-primary-color(wkBlue, tint1) !default;

Description

The background color of the standard button upon hover

Type

Color

Author

wk-button-secondary-background-color

Since 0.3.0
$wk-button-secondary-background-color: wk-primary-color(wkGray, tint3) !default;

Description

The background color of the secondary button

Type

Color

Author

wk-button-secondary-hover-background-color

Since 0.3.0
$wk-button-secondary-hover-background-color: wk-primary-color(wkGray, tint4) !default;

Description

The background color of the secondary button upon hover

Type

Color

Author

wk-button-secondary-color

Since 0.3.0
$wk-button-secondary-color: wk-primary-color(wkGray) !default;

Description

The text color of the secondary button

Type

Color

Author

wk-button-success-background-color

Since 0.3.0
$wk-button-success-background-color: wk-primary-color(wkGreen) !default;

Description

The background color of the success button

Type

Color

Author

wk-button-success-hover-background-color

Since 0.3.0
$wk-button-success-hover-background-color: wk-primary-color(wkGreen, tint1) !default;

Description

The background color of the success button upon hover

Type

Color

Author

wk-button-danger-background-color

Since 0.3.0
$wk-button-danger-background-color: wk-primary-color(wkRed) !default;

Description

The background color of the danger button

Type

Color

Author

wk-button-danger-hover-background-color

Since 0.3.0
$wk-button-danger-hover-background-color: wk-primary-color(wkRed, tint1) !default;

Description

The background color of the danger button upon hover

Type

Color

Author

wk-button-disabled-opacity

Since 0.3.0
$wk-button-disabled-opacity: .3 !default;

Description

The opacity of a disabled button

Type

Number

Author

wk-button-separation

Since 0.3.0
$wk-button-separation: 1rem !default;

Description

Button principal margin - vertical margin in mobile, horizontal in non-mobile

Type

Unit

Author

wk-button-border-radius

Since 0.3.0
$wk-button-border-radius: 0 !default;

Description

Button border radius

Type

Unit

Author

Cards

variables

wk-card-background

Since 0.11.0
$wk-card-background: wk-primary-color(wkWhite) !default;

Description

The card background color

Type

Color

Author

wk-card-heading

Since 0.11.0
$wk-card-heading: wk-primary-color(wkBlue) !default;

Description

The card header color

Type

Color

Author

wk-card-label-margin

Since 0.11.0
$wk-card-label-margin: wk-rem(8px) !default;

Description

Whitespace around card label

Type

Unit

Author

wk-card-padding

Since 0.11.0
$wk-card-padding: wk-rem(15px) !default;

Description

The card padding

Type

Unit

Author

wk-card-title-margin-bottom

Since 0.11.0
$wk-card-title-margin-bottom: wk-rem(10px) !default;

Description

The card title bottom margin

Type

Unit

Author

wk-card-border

Since 0.11.0
$wk-card-border: 1px solid wk-primary-color(wkGray, tint4) !default;

Description

The card border style and color

Type

List

Author

wk-card-float-height

Since 0.11.0
$wk-card-float-height: wk-rem(180px) !default;

Description

The fixed card height when flexbox is not available

Type

Unit

Author

wk-card-margin

Since 0.11.0
$wk-card-margin: wk-rem(15px) !default;

Description

The margin between cards when in a card group

Type

Unit

Author

wk-card-gradient-transparent

Since 0.11.0
$wk-card-gradient-transparent: rgba(255, 255, 255, 0) !default;

Description

The margin between cards when in a card group

Type

Color

Author

wk-card-text-color

Since 0.11.0
$wk-card-text-color: wk-primary-color(wkBlack) !default;

Description

Default card text color

Type

Color

Author

wk-card-after-layer

Since 0.11.0
$wk-card-after-layer: transparent linear-gradient(to bottom, $wk-card-gradient-transparent 0%, wk-primary-color(wkWhite) 100%) repeat scroll 0% 0% !default;

Description

The margin between cards when in a card group

Type

List

Author

Content Filter

variables

wk-badge-max-width

Since 0.9.0
$wk-badge-max-width: wk-rem(60px) !default;

Description

Maximum width of facet count

Type

Unit

Author

wk-content-filter-title-color

Since 0.9.0
$wk-content-filter-title-color: wk-primary-color(wkGray) !default;

Description

Search filter title color

Type

Color

Author

wk-content-filter-breakpoint

Since 0.9.0
$wk-content-filter-breakpoint: 57rem !default;

Description

Content filter breakpoint

Type

Unit 50.75rem fyi is exactly halfway between tablet and desktop

Author

wk-content-filter-badge-color

Since 0.9.0
$wk-content-filter-badge-color: wk-primary-color(wkGray, tint1) !default;

Description

Badge text color

Type

Color

Author

wk-content-filter-badge-background-color

Since 0.9.0
$wk-content-filter-badge-background-color: transparent !default;

Description

Badge background color

Type

Color

Author

wk-content-filter-badge-border-radius

Since 0.9.0
$wk-content-filter-badge-border-radius: 0 !default;

Description

Badge border radius

Type

Unit

Author

wk-content-filter-weight

Since 0.9.0
$wk-content-filter-weight: map-get($wk-font-weight, regular) !default;

Description

Content filter font weight

Type

Unit

Author

wk-content-filter-badge-weight

Since 0.9.0
$wk-content-filter-badge-weight: map-get($wk-font-weight, light) !default;

Description

Content filter badge font weight

Type

Unit

Author

wk-content-filter-font-size

Since 0.9.0
$wk-content-filter-font-size: map-get($wk-font-scale, smaller) !default;

Description

Content filter font size

Type

Unit

Author

wk-content-filter-badge-font-size

Since 0.9.0
$wk-content-filter-badge-font-size: $wk-content-filter-font-size !default;

Description

Content filter badge font size

Type

Unit

Author

wk-content-filter-badge-padding

Since 0.9.0
$wk-content-filter-badge-padding: 0 !default;

Description

Content filter badge padding

Type

Unit

Author

wk-content-filter-disabled-background-color

Since 0.9.0
$wk-content-filter-disabled-background-color: $wk-content-filter-link-background !default;

Description

Content filter disabled background color

Type

Color

Author

wk-content-filter-disabled-color

Since 0.9.0
$wk-content-filter-disabled-color: wk-primary-color(wkGray, tint3) !default;

Description

Content filter disabled color

Type

Color

Author

Document Legacy

variables

wk-document-bubble-z-index

Since 0.1.0
$wk-document-bubble-z-index: map-get($wk-z-index, document-bubble) !default;

Description

Document bubble z-index

Type

Unit

Author

wk-document-bubble-after-z-index

Since 0.1.0
$wk-document-bubble-after-z-index: map-get($wk-z-index, document-bubble-after) !default;

Description

Document bubble after z-index

Type

Unit

Author

Footer

variables

Forms

variables

wk-field-tip-color

Since 0.5.0
$wk-field-tip-color: wk-primary-color(wkGray, tint2) !default;

Description

Field tip color

Type

Color

Author

wk-field-error-color

Since 0.5.0
$wk-field-error-color: wk-primary-color(wkRed) !default;

Description

Field tip error color

Type

Color

Author

Header

variables

wk-header-background-color

Since 0.3.0
$wk-header-background-color: wk-primary-color(wkWhite) !default;

Description

The background color of header

Type

Color

Author

wk-header-nav-color

Since 0.3.0
$wk-header-nav-color: wk-primary-color(wkGray, tint1) !default;

Description

The color of the header nav items

Type

Color

Author

wk-fixed-top-z-index

Since 0.3.0
$wk-fixed-top-z-index: map-get($wk-z-index, fixed-top) !default;

Description

Fixed top z-index

Type

Unit

Author

wk-header-nav-open-z-index

Since 0.3.0
$wk-header-nav-open-z-index: map-get($wk-z-index, navbar-open) !default;

Description

Header nav open z-index

Type

Unit

Author

wk-header-nav-background

Since 0.3.0
$wk-header-nav-background: wk-primary-color(wkGray) !default;

Description

The background color of the header nav items

Type

Color

Author

wk-header-nav-color-mobile

Since 0.3.0
$wk-header-nav-color-mobile: wk-primary-color(wkWhite) !default;

Description

The color of the header nav items

Type

Color

Author

wk-header-nav-open-background

Since 0.3.0
$wk-header-nav-open-background: wk-primary-color(wkGray) !default;

Description

The color of the header nav background when opened

Type

Color

Author

wk-header-nav-more-background

Since 0.3.0
$wk-header-nav-more-background: wk-primary-color(wkGray) !default;

Description

The color of the hmore menu background when opened

Type

Color

Author

wk-header-nav-open-color

Since 0.3.0
$wk-header-nav-open-color: wk-primary-color(wkWhite) !default;

Description

The color of the header nav link when nav opened

Type

Color

Author

Inputs

variables

wk-select-input-text-color

Since 0.1.0
$wk-select-input-text-color: $wk-input-color !default;

Description

Select text color

Type

Color

Author

wk-select-input-border-focus

Since 0.1.0
$wk-select-input-border-focus: wk-primary-color(wkGray) !default;

Description

Select focused border color

Type

Color

Author

List

variables

wk-list-border-radius

Since 0.12.0
$wk-list-border-radius: 0 !default;

Description

Default box-radius for wk-list

Type

Unit

Author

wk-list-background-color

Since 0.12.0
$wk-list-background-color: wk-primary-color(wkWhite);

Description

The background color of the submit button

Type

Color

Author

wk-list-spacing

Since 0.12.0
$wk-list-spacing: gutter() !default;

Description

The spacing for the search suggestion list

Type

Unit

Author

wk-list-item-spacing

Since 0.12.0
$wk-list-item-spacing: wk-rem-value(5) !default;

Description

The spacing for the search suggestion list items

Type

Unit

Author

wk-list-hover-background

Since 0.12.0
$wk-list-hover-background: wk-primary-color(wkGray, tint5) !default;

Description

The background color of the suggestion list item on hover

Type

Color

Author

wk-list-title-color

Since 0.12.0
$wk-list-title-color: wk-primary-color(wkRed, tint1) !default;

Description

The text color of the title used in the suggestions list (autocomplete).

Type

Color

Author

wk-list-border-color

Since 0.12.0
$wk-list-border-color: wk-primary-color(wkGray, tint3) !default;

Description

The list border color

Type

Color

Author

Login

variables

wk-login-form-background-color

Since 0.3.0
$wk-login-form-background-color: wk-primary-color(wkGray, tint5) !default;

Description

The background color login form box

Type

Color

Author

wk-login-product-brand

Since 0.3.0
$wk-login-product-brand: wk-primary-color(wkGray) !default;

Description

The product brand color

Type

Color

Author

wk-login-screen-text-color

Since 0.3.0
$wk-login-screen-text-color: wk-primary-color(wkGray) !default;

Description

The color of the link for customer service email

Type

Color

Author

wk-login-support-border-style

Since 0.3.0
$wk-login-support-border-style: 1px solid $wk-login-form-background-color !default;

Description

Login support border style

Type

Color

Author

wk-login-screen-background-color

Since 0.3.0
$wk-login-screen-background-color: wk-primary-color(wkWhite) !default;

Description

The color of the screen background behind the form

Type

Color

Author

wk-login-support-strong-color

Since 0.3.0
$wk-login-support-strong-color: wk-primary-color(wkGray) !default;

Description

The color of login support strong text

Type

Color

Author

Modal

variables

wk-modal-inner-padding

Since 0.10.0
$wk-modal-inner-padding: wk-rem(16px) !default;

Description

Modal inner padding

Type

Unit

Author

wk-modal-z-index

Since 0.10.0
$wk-modal-z-index: map-get($wk-z-index, modal) !default;

Description

Modal z-index

Type

Unit

Author

wk-modal-overlay-z-index

Since 0.10.0
$wk-modal-overlay-z-index: map-get($wk-z-index, subzero) !default;

Description

Modal overlay z-index

Type

Unit

Author

wk-modal-content-background

Since 0.10.0
$wk-modal-content-background: wk-primary-color(wkWhite) !default;

Description

Modal content background

Type

Color

Author

wk-modal-header-background

Since 0.10.0
$wk-modal-header-background: wk-primary-color(wkBlue) !default;

Description

Modal header background color

Type

Color

Author

wk-modal-title-color

Since 0.10.0
$wk-modal-title-color: wk-primary-color(wkWhite) !default;

Description

Modal title color

Type

Color

Author

wk-modal-overlay-color

Since 0.10.0
$wk-modal-overlay-color: rgba(wk-primary-color(wkBlack), .4) !default;

Description

Modal overlay color

Type

Color

Author

wk-modal-box-shadow

Since 0.10.0
$wk-modal-box-shadow: 0 5px 15px $wk-modal-overlay-color;

Description

Modal overlay color

Type

List

Author

wk-modal-close-color

Since 0.10.0
$wk-modal-close-color: wk-primary-color(wkBlue, tint3) !default;

Description

Modal close icon color

Type

List

Author

wk-modal-close-hover

Since 0.10.0
$wk-modal-close-hover: wk-primary-color(wkWhite) !default;

Description

Modal close icon hover

Type

List

Author

Nav

variables

wk-nav-tabs-active-border

Since 0.10.1
$wk-nav-tabs-active-border: wk-primary-color(wkGray, tint4) !default;

Description

Border color for active tab

Type @Color

Author

wk-nav-tabs-active-background

Since 0.10.1
$wk-nav-tabs-active-background: wk-primary-color(wkWhite) !default;

Description

Border color for active link background

Type @Color

Author

Navbar

variables

wk-navbar-background-color

Since 0.9.0
$wk-navbar-background-color: wk-primary-color(wkBlue) !default;

Description

The background color of the header panel, which is most likely to be displayed under the header (contains breadcrumbs and other).

Type

Color

Author

wk-navbar-color

Since 0.9.0
$wk-navbar-color: wk-primary-color(wkWhite) !default;

Description

Link color for navbar items

Type

Color

Author

wk-navbar-hover-color

Since 0.9.0
$wk-navbar-hover-color: wk-primary-color(wkBlue, tint2) !default;

Description

Link hover color for navbar items

Type

Color

Author

wk-navbar-active-color

Since 0.9.0
$wk-navbar-active-color: wk-primary-color(wkBlue, shade1);

Description

The active background color for navbar items

Type

Color

Author

wk-navbar-z-index

Since 0.9.0
$wk-navbar-z-index: map-get($wk-z-index, navbar) !default;

Description

Default navbar z-index

Type

Unit

Author

wk-navbar-product-name-z-index

Since 0.9.0
$wk-navbar-product-name-z-index: map-get($wk-z-index, navbar-product-name) !default;

Description

Navbar product name z-index

Type

Unit

Author

wk-navbar-product-name-after-z-index

Since 0.9.0
$wk-navbar-product-name-after-z-index: map-get($wk-z-index, subzero) !default;

Description

Navbar product name after z-index

Type

Unit

Author

wk-navbar-open-z-index

Since 0.9.0
$wk-navbar-open-z-index: map-get($wk-z-index, navbar-open) !default;

Description

Navbar open z-index

Type

Unit

Author

wk-navbar-breadcrumb-color

Since 0.9.0
$wk-navbar-breadcrumb-color: wk-primary-color(wkWhite) !default;

Description

Navbar breadcrumb color

Type

Unit

Author

wk-navbar-breadcrumb-divider-color

Since 0.9.0
$wk-navbar-breadcrumb-divider-color: wk-primary-color(wkBlue, tint2) !default;

Description

Navbar breadcrumb divider color

Type

Unit

Author

wk-navbar-breadcrumb-icon-color

Since 0.9.0
$wk-navbar-breadcrumb-icon-color: $wk-navbar-breadcrumb-divider-color !default;

Description

Navbar breadcrumb icon color

Type

Unit

Author

Pagination

variables

wk-pagination-background-color

Since 0.9.0
$wk-pagination-background-color: wk-primary-color(wkBlue, tint3) !default;

Description

Pagination background color

Type

Color

Author

wk-pagination-next-prev-background-color

Since 0.9.0
$wk-pagination-next-prev-background-color: wk-primary-color(wkBlue) !default;

Description

Pagination next/previous background color

Type

Color

Author

wk-pagination-next-prev-background-hover-color

Since 0.9.0
$wk-pagination-next-prev-background-hover-color: wk-primary-color(wkBlue, tint1) !default;

Description

Pagination next/previous background hover color

Type

Color

Author

wk-pagination-next-prev-color

Since 0.9.0
$wk-pagination-next-prev-color: wk-primary-color(wkWhite) !default;

Description

Pagination next/previous text color

Type

Color

Author

wk-pagination-hover-background-color

Since 0.9.0
$wk-pagination-hover-background-color: wk-primary-color(wkBlue, tint2) !default;

Description

Pagination hover page background color

Type

Color

Author

wk-pagination-active-background-color

Since 0.9.0
$wk-pagination-active-background-color: wk-primary-color(wkWhite) !default;

Description

Pagination active page background color

Type

Color

Author

wk-pagination-bar-bottom-margin

Since 0.9.0
$wk-pagination-bar-bottom-margin: wk-rem(20px) !default;

Description

Pagination bar bottom margin

Type

Unit

Author

wk-pagination-disabled-background

Since 0.9.0
$wk-pagination-disabled-background: wk-primary-color(wkGray, tint4) !default;

Description

Pagination disabled background color

Type

Color

Author

wk-pagination-disabled-color

Since 0.9.0
$wk-pagination-disabled-color: wk-primary-color(wkWhite) !default;

Description

Pagination disabled text color

Type

Color

Author

Popover

variables

wk-popover-border-color

Since 0.11.0
$wk-popover-border-color: $wk-tooltip-border-color !default;

Description

Popover border color

Type

Color

Author

wk-popover-border

Since 0.11.0
$wk-popover-border: $wk-tooltip-border !default;

Description

Popover border style

Type

List

Author

wk-popover-background-color

Since 0.11.0
$wk-popover-background-color: $wk-tooltip-background-color !default;

Description

Popover background color

Type

Color

Author

wk-popover-box-shadow-color

Since 0.11.0
$wk-popover-box-shadow-color: $wk-tooltip-box-shadow-color !default;

Description

Popover box shadow color

Type

Color

Author

wk-popover-box-shadow

Since 0.11.0
$wk-popover-box-shadow: $wk-tooltip-box-shadow !default;

Description

Popover box-shadow

Type

List

Author

wk-popover-body-padding

Since 0.11.0
$wk-popover-body-padding: wk-rem(10px) !default;

Description

Popover inner padding

Type

Unit

Author

wk-popover-max-width

Since 0.11.0
$wk-popover-max-width: 300px !default;

Description

User popover max-width

Type

Unit

Author

wk-user-popover-even-background

Since 0.11.0
$wk-user-popover-even-background: wk-primary-color(wkGray, tint6) !default;

Description

User popover section even background

Type

Color

Author

Product Name

variables

wk-product-background-color

Since 0.13.0
$wk-product-background-color: wk-primary-color(wkGreen) !default;

Description

The background color of the product panel

Type

Color

Author

wk-product-name-color

Since 0.13.0
$wk-product-name-color: wk-primary-color(wkWhite) !default;

Description

The color of the product name text

Type

Color

Author

Autocomplete

variables

wk-search-input-placeholder-color

Since 0.3.0
$wk-search-input-placeholder-color: wk-primary-color(wkGray, tint2) !default;

Description

The color of the search input's placeholder

Type

Color

Author

wk-search-submit-background

Since 0.3.0
$wk-search-submit-background: wk-primary-color(wkBlue) !default;

Description

The background color of the submit button

Type

Color

Author

wk-search-submit-background-hover

Since 0.3.0
$wk-search-submit-background-hover: wk-primary-color(wkBlue, tint1) !default;

Description

The background color of the submit button on hover

Type

Color

Author

wk-search-submit-color

Since 0.3.0
$wk-search-submit-color: wk-primary-color(wkWhite) !default;

Description

The text color of the submit button

Type

Color

Author

wk-search-select-input-background-color

Since 0.3.0
$wk-search-select-input-background-color: wk-primary-color(wkGray, tint4) !default;

Description

The select dropdown background color

Type

Color

Author

wk-search-select-color

Since 0.3.0
$wk-search-select-color: wk-primary-color(wkGray) !default;

Description

The select type color

Type

Color

Author

wk-list-max-height-mobile

Since 0.3.0
$wk-list-max-height-mobile: wk-rem(200px);

Description

The max height value for wk-list on mobile

Type

Unit

Author

wk-list-max-height

Since 0.3.0
$wk-list-max-height: wk-rem(300px);

Description

The max height value for wk-list on tablet and desktop

Type

Unit

Author

wk-list-z-index

Since 0.3.0
$wk-list-z-index: map-get($wk-z-index, list) !default;

Description

Default z-index for wk-list inside the search form

Type

Unit

Author

wk-search-bar-background-color

Since 0.3.0
$wk-search-bar-background-color: wk-primary-color(wkGray, tint6) !default;

Description

Search standalone bar background color

Type

Color

Author

wk-search-bar-padding

Since 0.3.0
$wk-search-bar-padding: wk-rem(16px);

Description

Search bar top and bottom padding

Type

Unit

Author

wk-search-submit-mobile-width

Since 0.3.0
$wk-search-submit-mobile-width: 3rem;

Description

Search submit mobile width IE9

Type

Unit

Author

wk-search-submit-width

Since 0.3.0
$wk-search-submit-width: 5rem;

Description

Search submit tablet/desktop width IE9

Type

Unit

Author

wk-search-select-mobile-width

Since 0.3.0
$wk-search-select-mobile-width: 7rem;

Description

Search select mobile width

Type

Unit

Author

wk-search-select-width

Since 0.3.0
$wk-search-select-width: 8rem;

Description

Search select tablet/desktop width

Type

Unit

Author

Search Results

variables

wk-search-results-definition-weight

Since 0.3.0
$wk-search-results-definition-weight: 200;

Description

The wont weight of definition inside a search result

Type

Unit

Author

wk-search-results-title-color

Since 0.3.0
$wk-search-results-title-color: wk-primary-color(wkBlue);

Description

The text color of the title inside a search result

Type

Color

Author

wk-search-results-list-border-color

Since 0.3.0
$wk-search-results-list-border-color: wk-primary-color(wkBlue, tint3);

Description

The border color of the search result list

Type

Color

Author

wk-search-definition-title-color

Since 0.3.0
$wk-search-definition-title-color: wk-primary-color(wkGray, tint1);

Description

The border color of the search definition in the result list

Type

Color

Author

wk-search-definition-description-color

Since 0.3.0
$wk-search-definition-description-color: wk-primary-color(wkGray, tint2);

Description

The border color of the search definition description in the result list

Type

Color

Author

Tables

variables

wk-table-border

Since 0.5.1
$wk-table-border: 1px solid wk-primary-color(wkGray, tint4) !default;

Description

Table border color

Type

List

Author

wk-table-border-multi-body

Since 0.5.1
$wk-table-border-multi-body: 2px solid wk-primary-color(wkGray, tint4) !default;

Description

Table border color for multiple tbody instances

Type

List

Author

wk-table-heading-color

Since 0.5.1
$wk-table-heading-color: wk-primary-color(wkGray) !default;

Description

Table heading text color

Type

Color

Author

wk-table-heading-background-color

Since 0.5.1
$wk-table-heading-background-color: wk-primary-color(wkGray, tint6) !default;

Description

Table heading background color

Type

Color

Author

wk-table-body-background-color

Since 0.5.1
$wk-table-body-background-color: wk-primary-color(wkWhite) !default;

Description

Table footer and body background color

Type

Color

Author

wk-table-sorted-background-color

Since 0.5.1
$wk-table-sorted-background-color: $wk-table-border-color;

Description

Table sorted heading background color

Type

Color

Author

Tooltip

variables

wk-tooltip-border-color

Since 0.14.0
$wk-tooltip-border-color: wk-primary-color(wkGray, tint5) !default;

Description

Tooltip border color

Type

Color

Author

wk-tooltip-text-color

Since 0.14.0
$wk-tooltip-text-color: wk-primary-color(wkGray) !default;

Description

Tooltip text color

Type

Color

Author

wk-tooltip-border

Since 0.14.0
$wk-tooltip-border: 1px solid $wk-tooltip-border-color !default;

Description

Tooltip border style

Type

List

Used by

Author

wk-tooltip-background-color

Since 0.14.0
$wk-tooltip-background-color: wk-primary-color(wkWhite) !default;

Description

Tooltip background color

Type

Color

Used by

Author

wk-tooltip-box-shadow-color

Since 0.14.0
$wk-tooltip-box-shadow-color: rgba(99, 99, 99, .3) !default;

Description

Tooltip box shadow color

Type

Color

Author

wk-tooltip-box-shadow

Since 0.14.0
$wk-tooltip-box-shadow: 4px 5px 7px -3px $wk-tooltip-box-shadow-color !default;

Description

Tooltip box-shadow

Type

List

Used by

Author

wk-tooltip-body-padding

Since 0.14.0
$wk-tooltip-body-padding: wk-rem(5px) !default;

Description

Tooltip inner padding

Type

Unit

Author

wk-tooltip-max-width

Since 0.14.0
$wk-tooltip-max-width: 300px !default;

Description

User tooltip max-width

Type

Unit

Author

wk-user-tooltip-even-background

Since 0.14.0
$wk-user-tooltip-even-background: wk-primary-color(wkGray, tint6) !default;

Description

User tooltip section even background

Type

Color

Author

Type

variables

wk-code-color

Since 0.1.0
$wk-code-color: $wk-input-color !default;

Description

The color of a standalone element

Type

Color

Author

wk-code-background-color

Since 0.1.0
$wk-code-background-color: wk-primary-color(wkGray, tint6) !default;

Description

The background color of a standalone element

Type

Color

Author

wk-code-border

Since 0.1.0
$wk-code-border: 1px solid wk-primary-color(wkGray, tint5) !default;

Description

The border of a standalone element

Type

Color

Author

Mixins - Alerts

mixins

wk-alert

Since 0.8.0
@mixin wk-alert($wk-alert-background-color, $wk-alert-border-color, $wk-alert-text-color, $wk-alert-link-color) { ... }

Description

Creates an Alert

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$wk-alert-background-color

Background color of alert.

Stringnone
$wk-alert-border-color

Color of border around alert.

Stringnone
$wk-alert-text-color

Color of text within an alert.

Stringnone
$wk-alert-link-color

Color of links within an alert.

Stringnone

Example

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;
}

Requires

Author

Mixins - Animations

mixins

wk-spin

Since 0.3.0
@mixin wk-spin($include-keyframes: false) { ... }

Description

Adds spin animation

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$include-keyframes

Add keyframes to the output or not.

Boolfalse

Example

Usage

.wk-spin {
    @include wk-spin();
}

Output

.wk-spin {
    animation: spin 2s infinite linear;
    display: inline-block;
}

Requires

Author

wk-keyframes

Since 0.3.0
@mixin wk-keyframes($keyframes-name) { ... }

Description

Base keyframes mixin used along with animation mixins

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$keyframes-name

The name of the keyframes.

Stringnone

Content

This mixin allows extra content to be passed (through the @content directive).

Example

Usage

@include wk-keyframes('spin') {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(359deg);
    }
}

Output

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(359deg);
    }
}

Requires

Used by

Author

wk-keyframes-spin

Since 0.3.0
@mixin wk-keyframes-spin() { ... }

Description

Adds keyframes for spin mixin

Parameters

None.

Requires

Used by

Author

Mixins - Badges

variables

wk-badge-default-background

Since 0.9.0
$wk-badge-default-background: $wk-button-base-color !default;

Description

The background color of the badge

Type

Color

Author

wk-badge-default-color

Since 0.9.0
$wk-badge-default-color: wk-primary-color(wkWhite) !default;

Description

The text color of the badge

Type

Color

Author

wk-badge-border-radius

Since 0.9.0
$wk-badge-border-radius: 1rem !default;

Description

The text color of the badge

Type

Unit

Used by

Author

mixins

wk-badge

Since 0.9.0
@mixin wk-badge($wk-badge-background-color, $wk-badge-text-color) { ... }

Description

Creates a Badge

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$wk-badge-background-color

Background color of badge.

Stringnone
$wk-badge-text-color

Color of text within an badge.

Stringnone

Example

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;
}

Requires

Author

Mixins - Grid

mixins

wk-make-columns

Since 0.10.0
@mixin wk-make-columns() { ... }

Description

Creates columns for every span size on the grid from 1 to wk-global-columns

Parameters

None.

Example

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;
}

Requires

Author

Mixins - Icons

mixins

wk-target-icons

Since 0.8.0
@mixin wk-target-icons() { ... }

Description

Style wk-icons with this selector mixin

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive).

Example

Usage

@include wk-target-icons {
    font-size: 10rem;
}

Output

[class^="wk-icon-"]:before,
[class*=" wk-icon-"]:before {
    font-size: 10rem;
}

Author

Mixins - Inputs

mixins

wk-text-input-base

Since 0.3.0
@mixin wk-text-input-base() { ... }

Description

Create base styles for an input field including the disabled state

Parameters

None.

Example

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;
}

Requires

Author

wk-input-placeholder

Since 0.3.0
@mixin wk-input-placeholder() { ... }

Description

Input Placeholder Mixin Styles for input placeholders

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive).

Example

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;
}

Author

Mixins - Labels

variables

wk-label-default-background

Since 0.9.0
$wk-label-default-background: wk-primary-color(wkGray, tint1) !default;

Description

The background color of the label

Type

Color

Author

wk-label-default-color

Since 0.9.0
$wk-label-default-color: wk-primary-color(wkWhite) !default;

Description

The text color of the label

Type

Color

Author

wk-label-font-family

Since 0.9.0
$wk-label-font-family: map-get($wk-font-stacks, global-sans) !default;

Description

The font family of the label

Type

Unit

Used by

Author

wk-label-font-size

Since 0.9.0
$wk-label-font-size: wk-rem(12px) !default;

Description

The font size of the label

Type

Unit

Used by

Author

wk-label-padding

Since 0.9.0
$wk-label-padding: wk-rem(5px 10px) !default;

Description

The padding of the label

Type

Unit

Used by

Author

mixins

wk-label

Since 0.9.0
@mixin wk-label($wk-label-background-color, $wk-label-text-color) { ... }

Description

Creates a Label

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$wk-label-background-color

Background color of label.

Stringnone
$wk-label-text-color

Color of text within an label.

Stringnone

Example

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;
}

Requires

Author

Mixins - Layout

mixins

wk-layout-50-50

Since 0.3.0
@mixin wk-layout-50-50($child: '.wk-layout-item') { ... }

Description

50% + 50% layout on breakpoints larger than mobile

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$child

A selector which will serve as the column name. .wk-layout-item is default selector. For this variable you may use either a base element e.g. div or a class e.g. .column.

String'.wk-layout-item'

Example

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;
    }
}

Requires

Author

wk-layout-50-50-persist

Since 0.3.0
@mixin wk-layout-50-50-persist($child: '.wk-layout-item') { ... }

Description

50% + 50% layout on all breakpoints

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$child

A selector which will serve as the column name. .wk-layout-item is default selector. For this variable you may use either a base element e.g. div or a class e.g. .column.

String'.wk-layout-item'

Example

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;
}

Requires

Author

wk-layout-33-66

Since 0.3.0
@mixin wk-layout-33-66($child: '.wk-layout-item') { ... }

Description

33% + 66% layout on breakpoints larger than mobile

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$child

A selector which will serve as the column name. .wk-layout-item is default selector. For this variable you may use either a base element e.g. div or a class e.g. .column.

String'.wk-layout-item'

Example

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;
    }
}

Requires

Author

wk-layout-33-66-persist

Since 0.3.0
@mixin wk-layout-33-66-persist($child: '.wk-layout-item') { ... }

Description

33% + 66% layout on all breakpoints

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$child

A selector which will serve as the column name. .wk-layout-item is default selector. For this variable you may use either a base element e.g. div or a class e.g. .column.

String'.wk-layout-item'

Example

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;
}

Requires

Author

wk-layout-66-33

Since 0.3.0
@mixin wk-layout-66-33($child: '.wk-layout-item') { ... }

Description

66% + 33% layout on breakpoints larger than mobile

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$child

A selector which will serve as the column name. .wk-layout-item is default selector. For this variable you may use either a base element e.g. div or a class e.g. .column.

String'.wk-layout-item'

Example

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;
    }
}

Requires

Author

wk-layout-66-33-persist

Since 0.3.0
@mixin wk-layout-66-33-persist($child: '.wk-layout-item') { ... }

Description

66% + 33% layout on all breakpoints

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$child

A selector which will serve as the column name. .wk-layout-item is default selector. For this variable you may use either a base element e.g. div or a class e.g. .column.

String'.wk-layout-item'

Example

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;
}

Requires

Author

wk-layout-25-75

Since 0.3.0
@mixin wk-layout-25-75($child: '.wk-layout-item') { ... }

Description

25% + 75% layout on breakpoints larger than mobile

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$child

A selector which will serve as the column name. .wk-layout-item is default selector. For this variable you may use either a base element e.g. div or a class e.g. .column.

String'.wk-layout-item'

Example

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;
    }
}

Requires

Author

wk-layout-25-75-persist

Since 0.3.0
@mixin wk-layout-25-75-persist($child: '.wk-layout-item') { ... }

Description

25% + 75% layout on all breakpoints

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$child

A selector which will serve as the column name. .wk-layout-item is default selector. For this variable you may use either a base element e.g. div or a class e.g. .column.

String'.wk-layout-item'

Example

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;
}

Requires

Author

wk-layout-75-25

Since 0.3.0
@mixin wk-layout-75-25($child: '.wk-layout-item') { ... }

Description

75% + 25% layout on breakpoints larger than mobile

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$child

A selector which will serve as the column name. .wk-layout-item is default selector. For this variable you may use either a base element e.g. div or a class e.g. .column.

String'.wk-layout-item'

Example

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;
    }
}

Requires

Author

wk-layout-75-25-persist

Since 0.3.0
@mixin wk-layout-75-25-persist($child: '.wk-layout-item') { ... }

Description

75% + 25% layout on all breakpoints

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$child

A selector which will serve as the column name. .wk-layout-item is default selector. For this variable you may use either a base element e.g. div or a class e.g. .column.

String'.wk-layout-item'

Example

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;
}

Requires

Author

wk-layout-33-33-33

Since 0.3.0
@mixin wk-layout-33-33-33($child: '.wk-layout-item') { ... }

Description

33% + 33% + 33% layout on breakpoints larger than mobile

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$child

A selector which will serve as the column name. .wk-layout-item is default selector. For this variable you may use either a base element e.g. div or a class e.g. .column.

String'.wk-layout-item'

Example

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;
    }
}

Requires

Author

wk-layout-33-33-33-persist

Since 0.3.0
@mixin wk-layout-33-33-33-persist($child: '.wk-layout-item') { ... }

Description

33% + 33% + 33% layout on all breakpoints

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$child

A selector which will serve as the column name. .wk-layout-item is default selector. For this variable you may use either a base element e.g. div or a class e.g. .column.

String'.wk-layout-item'

Example

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;
}

Requires

Author

wk-layout-25-25-25-25

Since 0.3.0
@mixin wk-layout-25-25-25-25($child: '.wk-layout-item') { ... }

Description

25% + 25% + 25% + 25% layout on breakpoints larger than mobile

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$child

A selector which will serve as the column name. .wk-layout-item is default selector. For this variable you may use either a base element e.g. div or a class e.g. .column.

String'.wk-layout-item'

Example

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;
    }
}

Requires

Author

wk-layout-25-25-25-25-persist

Since 0.3.0
@mixin wk-layout-25-25-25-25-persist($child: '.wk-layout-item') { ... }

Description

25% + 25% + 25% + 25% layout on all breakpoints

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$child

A selector which will serve as the column name. .wk-layout-item is default selector. For this variable you may use either a base element e.g. div or a class e.g. .column.

String'.wk-layout-item'

Example

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;
}

Requires

Author

wk-layout-push-25

Since 0.3.0
@mixin wk-layout-push-25() { ... }

Description

Pushes element to 25% from the left

Parameters

None.

Example

Usage

@include wk-layout-push-25;

Requires

Author

wk-layout-push-33

Since 0.3.0
@mixin wk-layout-push-33() { ... }

Description

Pushes element to 33% from the left

Parameters

None.

Example

Usage

@include wk-layout-push-33;

Requires

Author

wk-layout-centered-small

Since 0.3.0
@mixin wk-layout-centered-small($mobile-max-breakpoint: $wk-mobile-max-breakpoint) { ... }

Description

Small Centered Layout

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault 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

Example

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;
    }
}

Author

wk-layout-centered-medium

Since 0.3.0
@mixin wk-layout-centered-medium($mobile-max-breakpoint: $wk-mobile-max-breakpoint) { ... }

Description

Medium Centered Layout

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault 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

Example

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;
}

Author

wk-layout-centered-large

Since 0.3.0
@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) { ... }

Description

Large Centered Layout

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault 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

Example

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;
    }
}

Author

Mixins - Logo

mixins

wk-brand

Since 0.14.0
Deprecated!

Use the new @wk-logo & @wk-make-logo mixins instead.

@mixin wk-brand($wk-brand-width: false, $wk-brand-color: false) { ... }

Description

Applies the high fidelity WK logo

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$wk-brand-width

Logo width, in pixels.

Unit or Boolfalse
$wk-brand-color

Color of the logo text.

Color or Boolfalse

Example

Usage

.some-logo {
   @include wk-make-logo(default);
}

Requires

Author

wk-brand-small

Since 0.14.0
Deprecated!

Use the new @wk-logo & @wk-make-logo mixins instead.

@mixin wk-brand-small($wk-brand-width: false, $wk-brand-color: false) { ... }

Description

Applies the low fidelity WK logo

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$wk-brand-width

Logo width, in pixels.

Unit or Boolfalse
$wk-brand-color

Color of the logo text.

Color or Boolfalse

Example

Usage

.some-logo {
   @include wk-brand-small();
}

Requires

Author

Mixins - Page

mixins

wk-viewport-insulate

Since 0.8.0
@mixin wk-viewport-insulate($width: $wk-desktop-max-width, $padding: $wk-page-content-padding) { ... }

Description

Give a block container horizontal padding only when smaller than the defined width as to not touch the window’s viewport edges

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$widthnoneUnit$wk-desktop-max-width
$paddingnoneUnit$wk-page-content-padding

Example

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;
    }
}

Requires

Used by

Author

wk-page-content

Since 0.8.0
Deprecated!
@mixin wk-page-content($deprecated-transition: false) { ... }

Description

Give a block container horizontal padding only when smaller than the maximum desktop breakpoint width. Use wk-viewport-insulate instead.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$deprecated-transitionnoneBoolfalse

Example

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;
    }
}

Requires

Author

Mixins - Tooltip

mixins

wk-tooltip

Since 0.14.0
@mixin wk-tooltip() { ... }

Description

Mixin for creating a popover/tooltip

Parameters

None.

Requires

Author

Mixins - Type

mixins

wk-selection

Since 0.1.0
@mixin wk-selection($current-selector: false) { ... }

Description

Outputs the spec and prefixed versions of the ::selection pseudo-element.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$current-selector

If set to true, it takes the current element into consideration.

Boolfalse

Content

This mixin allows extra content to be passed (through the @content directive).

Example

Usage

.element {
    @include wk-selection(true) {
        background-color: #ffbb52;
    }
}

Output

.element::-moz-selection {
    background-color: #ffbb52;
}

.element::selection {
    background-color: #ffbb52;
}

Author

wk-headings

Since 0.1.0
@mixin wk-headings() { ... }

Description

Headings Mixin Styles for h1, h2, ..., h6 by hand

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive).

Example

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';
}

Author

wk-h1

Since 0.1.0
@mixin wk-h1() { ... }

Description

h1 Mixin

Parameters

None.

Example

Usage

.my-heading {
    @include wk-h1;
}

Output

.my-heading {
    font-size: 2.0736rem;
    font-weight: 700;
}

Requires

Author

wk-h2

Since 0.1.0
@mixin wk-h2() { ... }

Description

h2 Mixin

Parameters

None.

Example

Usage

.my-heading {
    @include wk-h2;
}

Output

.my-heading {
    font-size: 1.728rem;
    font-weight: 700;
}

Requires

Author

wk-h3

Since 0.1.0
@mixin wk-h3() { ... }

Description

h3 Mixin

Parameters

None.

Example

Usage

.my-heading {
    @include wk-h3;
}

Output

.my-heading {
    font-size: 1.44rem;
    font-weight: 700;
}

Requires

Author

wk-h4

Since 0.1.0
@mixin wk-h4() { ... }

Description

h4 Mixin

Parameters

None.

Example

Usage

.my-heading {
    @include wk-h4;
}

Output

.my-heading {
    font-size: 1.2rem;
    font-weight: 600;
}

Requires

Author

wk-h5

Since 0.1.0
@mixin wk-h5() { ... }

Description

h5 Mixin

Parameters

None.

Example

Usage

.my-heading {
    @include wk-h5;
}

Output

.my-heading {
    font-size: 1rem;
    font-weight: 400;
}

Requires

Author

wk-h6

Since 0.1.0
@mixin wk-h6() { ... }

Description

h6 Mixin

Parameters

None.

Example

Usage

.my-heading {
    @include wk-h6;
}

Output

.my-heading {
    font-size: 1rem;
    font-weight: 300;
}

Requires

Author

Utilities - Auto SVG

variables

wk-brand-small

Since 0.12.0
$wk-brand-small: 'data:image/svg+xml;

Description

wk-brand-small.svg

Type

String

Author

wk-brand-vertical

Since 0.12.0
$wk-brand-vertical: 'data:image/svg+xml;

Description

wk-brand-vertical.svg

Type

String

Author

wk-brand-wheel

Since 0.12.0
$wk-brand-wheel: 'data:image/svg+xml;

Description

wk-brand-wheel.svg

Type

String

Author

wk-brand

Since 0.12.0
$wk-brand: 'data:image/svg+xml;

Description

wk-brand.svg

Type

String

Author

Utilities - Colors

variables

wk-primary-black

Since 0.10.0
$wk-primary-black: #000 !default;

Description

Wolters Kluwer primary black

Type

Color

Author

wk-primary-red

Since 0.10.0
$wk-primary-red: #e5202e !default;

Description

Wolters Kluwer primary red

Type

Color

Author

wk-primary-red-tint1

Since 0.10.0
$wk-primary-red-tint1: #ec5862 !default;

Description

Wolters Kluwer primary red - tint 1

Type

Color

Author

wk-primary-red-tint2

Since 0.10.0
$wk-primary-red-tint2: #f29097 !default;

Description

Wolters Kluwer primary red - tint 2

Type

Color

Author

wk-primary-red-tint3

Since 0.10.0
$wk-primary-red-tint3: #f6b1b6 !default;

Description

Wolters Kluwer primary red - tint 3

Type

Color

Author

wk-primary-blue

Since 0.10.0
$wk-primary-blue: #007ac3 !default;

Description

Wolters Kluwer primary blue

Type

Color

Author

wk-primary-blue-tint1

Since 0.10.0
$wk-primary-blue-tint1: #409bd2 !default;

Description

Wolters Kluwer primary blue - tint 1

Type

Color

Author

wk-primary-blue-tint2

Since 0.10.0
$wk-primary-blue-tint2: #80bde1 !default;

Description

Wolters Kluwer primary blue - tint 2

Type

Color

Author

wk-primary-blue-tint3

Since 0.10.0
$wk-primary-blue-tint3: #a6d1ea !default;

Description

Wolters Kluwer primary blue - tint 3

Type

Color

Author

wk-primary-blue-shade1

Since 0.10.0
$wk-primary-blue-shade1: #005b92 !default;

Description

Wolters Kluwer primary blue - shade 1

Type

Color

Author

wk-primary-green

Since 0.10.0
$wk-primary-green: #85bc20 !default;

Description

Wolters Kluwer primary green

Type

Color

Author

wk-primary-green-tint1

Since 0.10.0
$wk-primary-green-tint1: #a4cd58 !default;

Description

Wolters Kluwer primary green - tint 1

Type

Color

Author

wk-primary-green-tint2

Since 0.10.0
$wk-primary-green-tint2: #c2de90 !default;

Description

Wolters Kluwer primary green - tint 2

Type

Color

Author

wk-primary-green-tint3

Since 0.10.0
$wk-primary-green-tint3: #d4e8b1 !default;

Description

Wolters Kluwer primary green - tint 3

Type

Color

Author

wk-primary-gray

Since 0.10.0
$wk-primary-gray: #474747 !default;

Type

Color

Author

wk-primary-gray-tint1

Since 0.10.0
$wk-primary-gray-tint1: #757575 !default;

Description

Wolters Kluwer primary gray - tint 1

Type

Color

Author

wk-primary-gray-tint2

Since 0.10.0
$wk-primary-gray-tint2: #a3a3a3 !default;

Description

Wolters Kluwer primary gray - tint 2

Type

Color

Author

wk-primary-gray-tint3

Since 0.10.0
$wk-primary-gray-tint3: #bfbfbf !default;

Description

Wolters Kluwer primary gray - tint 3

Type

Color

Author

wk-primary-gray-tint4

Since 0.10.0
$wk-primary-gray-tint4: #dadada !default;

Description

Wolters Kluwer primary gray - tint 4

Type

Color

Author

wk-primary-gray-tint5

Since 0.10.0
$wk-primary-gray-tint5: #ededed !default;

Description

Wolters Kluwer primary gray - tint 5

Type

Color

Author

wk-primary-gray-tint6

Since 0.10.0
$wk-primary-gray-tint6: #f6f6f6 !default;

Description

Wolters Kluwer primary gray - tint 6

Type

Color

Author

wk-secondary-green

Since 0.10.0
$wk-secondary-green: #009881 !default;

Description

Wolters Kluwer secondary green

Type

Color

Author

wk-secondary-green-tint1

Since 0.10.0
$wk-secondary-green-tint1: #40b2a1 !default;

Description

Wolters Kluwer secondary green - tint 1

Type

Color

Author

wk-secondary-green-tint2

Since 0.10.0
$wk-secondary-green-tint2: #80ccc0 !default;

Description

Wolters Kluwer secondary green - tint 2

Type

Color

Author

wk-secondary-green-tint3

Since 0.10.0
$wk-secondary-green-tint3: #a6dbd3 !default;

Description

Wolters Kluwer secondary green - tint 3

Type

Color

Author

wk-secondary-orange

Since 0.10.0
$wk-secondary-orange: #ea8f00 !default;

Description

Wolters Kluwer secondary orange

Type

Color

Author

wk-secondary-orange-tint1

Since 0.10.0
$wk-secondary-orange-tint1: #efab40 !default;

Description

Wolters Kluwer secondary orange - tint 1

Type

Color

Author

wk-secondary-orange-tint2

Since 0.10.0
$wk-secondary-orange-tint2: #f5c780 !default;

Description

Wolters Kluwer secondary orange - tint 2

Type

Color

Author

wk-secondary-orange-tint3

Since 0.10.0
$wk-secondary-orange-tint3: #f8d8a6 !default;

Description

Wolters Kluwer secondary orange - tint 3

Type

Color

Author

wk-secondary-purple

Since 0.10.0
$wk-secondary-purple: #940c72 !default;

Description

Wolters Kluwer secondary purple

Type

Color

Author

wk-secondary-purple-tint1

Since 0.10.0
$wk-secondary-purple-tint1: #af4995 !default;

Description

Wolters Kluwer secondary purple - tint 1

Type

Color

Author

wk-secondary-purple-tint2

Since 0.10.0
$wk-secondary-purple-tint2: #ca86b9 !default;

Description

Wolters Kluwer secondary purple - tint 2

Type

Color

Author

wk-secondary-purple-tint3

Since 0.10.0
$wk-secondary-purple-tint3: #daaace !default;

Description

Wolters Kluwer secondary purple - tint 3

Type

Color

Author

wk-secondary-blue

Since 0.10.0
$wk-secondary-blue: #241866 !default;

Description

Wolters Kluwer secondary blue

Type

Color

Author

wk-secondary-blue-tint1

Since 0.10.0
$wk-secondary-blue-tint1: #5b528c !default;

Description

Wolters Kluwer secondary blue - tint 1

Type

Color

Author

wk-secondary-blue-tint2

Since 0.10.0
$wk-secondary-blue-tint2: #928cb3 !default;

Description

Wolters Kluwer secondary blue - tint 2

Type

Color

Author

wk-secondary-blue-tint3

Since 0.10.0
$wk-secondary-blue-tint3: #b3aeca !default;

Description

Wolters Kluwer secondary blue - tint 3

Type

Color

Author

wk-primary-white

Since 0.10.0
$wk-primary-white: #fff !default;

Type

Color

Author

wk-primary-colors

Since 0.10.0
$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;

Description

Primary colors map

Type

Map

Used by

Author

wk-secondary-colors

Since 0.10.0
$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;

Description

Secondary colors map

Type

Map

Used by

Author

wk-body-background-color

Since 0.10.0
$wk-body-background-color: wk-primary-color(wkWhite) !default;

Description

Body background-color

Type

Color

Author

wk-body-text-color

Since 0.10.0
$wk-body-text-color: wk-primary-color(wkGray) !default;

Description

Body text color

Type

Color

Author

wk-body-selection-color

Since 0.10.0
$wk-body-selection-color: wk-primary-color(wkGreen, tint3) !default;

Description

Body selection color

Type

Color

Author

wk-state-info-text-color

Since 0.10.0
$wk-state-info-text-color: wk-primary-color(wkBlue) !default !global;

Description

Info text color

Type

Color

Author

wk-state-info-background-color

Since 0.10.0
$wk-state-info-background-color: wk-primary-color(wkWhite) !default;

Description

Info background color

Type

Color

Author

wk-state-info-border-color

Since 0.10.0
$wk-state-info-border-color: wk-primary-color(wkBlue) !default;

Description

Info border color

Type

Color

Author

wk-state-success-text-color

Since 0.10.0
$wk-state-success-text-color: wk-primary-color(wkGreen) !default;

Description

Success text color

Type

Color

Author

wk-state-success-background-color

Since 0.10.0
$wk-state-success-background-color: wk-primary-color(wkWhite) !default;

Description

Success background color

Type

Color

Author

wk-state-success-border-color

Since 0.10.0
$wk-state-success-border-color: wk-primary-color(wkGreen) !default;

Description

Success border color

Type

Color

Author

wk-state-danger-text-color

Since 0.10.0
$wk-state-danger-text-color: wk-primary-color(wkRed) !default;

Description

Danger text color

Type

Color

Author

wk-state-danger-background-color

Since 0.10.0
$wk-state-danger-background-color: wk-primary-color(wkWhite) !default;

Description

Danger background color

Type

Color

Author

wk-state-danger-border-color

Since 0.10.0
$wk-state-danger-border-color: wk-primary-color(wkRed) !default;

Description

Danger border color

Type

Color

Author

wk-table-border-color

Since 0.10.0
$wk-table-border-color: wk-primary-color(wkGray, tint5) !default;

Description

Table border color

Type

Color

Author

wk-table-sorted-color

Since 0.10.0
$wk-table-sorted-color: wk-primary-color(wkGray, tint6) !default;

Description

Table sorted color

Type

Color

Author

wk-document-text-color

Since 0.10.0
$wk-document-text-color: wk-primary-color(wkGray) !default;

Description

Document text color

Type

Color

Author

wk-input-color

Since 0.10.0
$wk-input-color: wk-primary-color(wkGray) !default;

Description

Input Color

Type

Color

Used by

Author

wk-input-background-color

Since 0.10.0
$wk-input-background-color: wk-primary-color(wkWhite) !default;

Description

Input Background Color

Type

Color

Used by

Author

wk-input-border-color

Since 0.10.0
$wk-input-border-color: wk-primary-color(wkGray, tint4) !default;

Description

Input Border Color

Type

Color

Used by

Author

wk-input-focus-border-color

Since 0.10.0
$wk-input-focus-border-color: wk-primary-color(wkBlue, tint1) !default;

Description

Input Focused Border Color

Type

Color

Used by

Author

wk-input-hover-border-color

Since 0.10.0
$wk-input-hover-border-color: wk-primary-color(wkGray) !default;

Description

Input Hover Border Color

Type

Color

Used by

Author

wk-input-placeholder-color

Since 0.10.0
$wk-input-placeholder-color: wk-primary-color(wkGray, tint3) !default;

Description

Input Placeholder Color

Type

Color

Author

wk-input-disabled-background-color

Since 0.10.0
$wk-input-disabled-background-color: wk-primary-color(wkGray, tint5) !default;

Description

Input Disabled Background Color

Type

Color

Used by

Author

wk-input-disabled-color

Since 0.10.0
$wk-input-disabled-color: wk-primary-color(wkGray, tint5) !default;

Description

Input Disabled Color

Type

Color

Used by

Author

wk-button-base-color

Since 0.10.0
$wk-button-base-color: wk-primary-color(wkBlue) !default;

Description

Button base color

Type

Color

Author

wk-base-content-filter-active-background

Since 0.10.0
$wk-base-content-filter-active-background: wk-primary-color(wkBlue, tint3) !default;

Description

Content filter base active background

Type

Color

Author

Utilities - Exports

variables

[private] wk-imported-modules

Since 0.1.0
$wk-imported-modules: () !default;

Description

List of WK CSS modules imported via the wk-exports mixin

Type

Map

Used by

Author

mixins

wk-exports

Since 0.1.0
@mixin wk-exports($name) { ... }

Description

Module export mixin

This mixin helps making sure a module is imported once and only once.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$name

Name of exported module

Stringnone

Content

This mixin allows extra content to be passed (through the @content directive).

Requires

Used by

Author

Utilities - Functions

functions

wk-str-replace

Since 0.1.0
@function wk-str-replace($string, $search, $replace: '') { ... }

Description

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$string

source string

Stringnone
$search

search pattern

Stringnone
$replace

replacement pattern

String''

Returns

String

new string with matches of a search pattern replaced by a replacement pattern

Example

Usage

wk-str-replace('foo bar', " ", "_")

Output

// foo_bar

Used by

Author

wk-strip-units

Since 0.1.0
@function wk-strip-units($value) { ... }

Description

Strips the unit from a number.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$valuenoneNumber (with unit)none

Returns

Number (unitless)

Example

Usage

$dimension: wk-strip-units(10em);

Output

$dimension: 10;

Used by

Author

wk-rem-convert

Since 0.1.0
@function wk-rem-convert($to, $values...) { ... }

Description

Converts one or more list values to a specified type.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$to

conversion type

Stringnone
$values...

list of values to convert

Listnone

Returns

Number or List

Example

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;
}

Requires

Used by

Author

wk-rem

Since 0.1.0
@function wk-rem($values...) { ... }

Description

Convert list of values to rem.

If $wk-rem-px-only is set to true, returned values will be px

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$values...

list of values to convert

Listnone

Returns

Number or List

Example

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;
}

Requires

Used by

Author

wk-rem-value

Since 0.1.0
@function wk-rem-value($pxval, $base: $wk-rem-base) { ... }

Description

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>

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$pxval

pixel value to convert to rem, without px

Numbernone
$base

base pixel value used in rem conversion, without px

Number$wk-rem-base

Example

Usage

.element {
    font-size: wk-rem-value(12) // for a relational value of 12px
}

Output

.element {
    font-size: 0.75rem;
}

Requires

Author

wk-logo-color

Since 0.1.0
@function wk-logo-color($source, $color) { ... }

Description

Replaces color inside url encoded SVG logo string

Font color can be changed from default by supplying desired color

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$source

SVG url encoded source string

Stringnone
$color

Color for the logo text

Colornone

Example

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");
}

Requires

Used by

Author

wk-utils-dependencies

Since 0.5
@function wk-utils-dependencies($-) { ... }

Description

Missing dependencies helper

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault 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.

Listnone

Example

Usage

%component-deps {
    utils: wk-utils-dependencies(mixin my-required-mixin, variable my-required-variable, function my-required-function);
}

Author

wk-component-dependencies

Since 0.5
@function wk-component-dependencies($-) { ... }

Description

Missing components helper

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$-

A List of components

Listnone

Example

Usage

%component-deps {
    components: wk-component-dependencies(forms, buttons);
}

Author

wk-em-value

Since 0.1.0
@function wk-em-value($pxval, $base: $wk-rem-base) { ... }

Description

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>

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$pxval

pixel value to convert to rem, without px

Numbernone
$base

base pixel value used in rem conversion, without px

Number$wk-rem-base

Example

Usage

.element {
    font-size: wk-em-value(12) // for a relational value of 12px
}

Output

.element {
    font-size: 0.75em;
}

Author

wk-has-feature

Since 0.1.0
@function wk-has-feature($feature, $list: $wk-component-features) { ... }

Description

Checks a list for given value

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$feature

the feature string to search on the list

Stringnone
$list

the full list of features provided

String$wk-component-features

Example

Usage

@if wk-has-feature('alerts')
    @import 'wk-components/alerts';
}

Author

wk-primary-color

Since 0.1.0
@function wk-primary-color($color, $variation: 'base') { ... }

Description

Returns primary color variation from primary color map

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$color

the color to retrieve

Stringnone
$variation

the color variant

String'base'

Example

Usage

div {
  background-color: wk-primary-color(wkRed)
}

Requires

Used by

Author

wk-secondary-color

Since 0.1.0
@function wk-secondary-color($color, $variation: 'base') { ... }

Description

Returns secondary color variation from secondary color map

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$color

the color to retrieve

Stringnone
$variation

the color variant

String'base'

Example

Usage

div {
  background-color: wk-secondary-color('green')
}

Requires

Author

[private] wk-brand-color

Since 0.1.0
@function wk-brand-color($color, $variation: 'base', $is-secondary) { ... }

Description

Returns variation of brand color from appropriate color map

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$color

the color to retrieve

Stringnone
$variation

the color variant

String'base'
$is-secondary

false - if color is seondary

Booleannone

Requires

Used by

Author

[private] wk-get-color-variation

Since 0.1.0
@function wk-get-color-variation($color-map, $variation: 'base') { ... }

Description

Helper function which returns variation of color from provided map

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$color-map

the color to retrieve

Stringnone
$variation

the color variant

String'base'

Used by

Author

Utilities - Mixins

mixins

wk-font-face

Since 0.1.0
@mixin wk-font-face($name, $path, $weight: null, $style: null, $exts: eot woff ttf) { ... }

Description

Create a font face rule. Embedded OpenType, WOFF2, WOFF and TrueType files are automatically sourced.

Source - https://gist.github.com/jonathantneal/d0460e5c2d5d7f9bc5e6

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$name

font name

Stringnone
$path

path to font file

Stringnone
$weight

font-weight value

Stringnull
$style

font-style value

Stringnull
$exts

space separated list of font extenstions

Stringeot woff ttf

Example

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")
}

Author

wk-rem

Since 0.1.0
@mixin wk-rem($property, $values...) { ... }

Description

Generate property values in rem units.

If $wk-rem-fallback is set to true, the px fallback vaules are returned as well.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$property

CSS property to return

Stringnone
$values...

one or more values to convert to rem unites

Listnone

Example

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;
}

Requires

Author

wk-shown

Since 0.1.0
@mixin wk-shown() { ... }

Description

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

Parameters

None.

Example

Usage

.element {
    @include wk-hide;
}

Output

.element {
    display: none;
}

Author

wk-hidden

Since 0.1.0
@mixin wk-hidden() { ... }

Description

Hides element and puts it out of the flow wk-hidden is a mixin, not a placeholder, because it is commonly called from within an @include breakpoint() where an placeholder cannot be extended

Parameters

None.

Example

Usage

.element {
    @include wk-hide;
}

Output

.element {
    display: none;
}

Author

wk-text-overflow

Since 0.1.0
@mixin wk-text-overflow() { ... }

Description

Allows to hide overflowed text by adding ellipsis to the end

Parameters

None.

Example

Usage

.element {
    @include wk-text-overflow;
}

Output

.element {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Author

wk-hide-text

Since 0.1.0
@mixin wk-hide-text() { ... }

Description

Allows to hide text out of element

Parameters

None.

Example

Usage

.element {
    @include wk-hide-text;
}

Output

.element {
    background-color: transparent;
    border: 0;
    color: transparent;
    font: 0/0 a;
    text-shadow: none;
}

Author

wk-clearfix

Since 0.1.0
@mixin wk-clearfix() { ... }

Description

Basic clearfix mixin

Parameters

None.

Example

Usage

.element {
    @include wk-clearfix;
}

Output

.element:after {
    content: ' ';
    display: table;
    clear: both;
}

Author

wk-inputs

Since 0.1.0
@mixin wk-inputs() { ... }

Description

Adds possibility to write styles for all inputs, except checkboxes and radios.

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive).

Example

Usage

@include wk-inputs {
    border: 1px solid #fff;
}

Output

input:not([type='radio']):not([type='checkbox']) {
    border: 1px solid #fff;
}

TODO's

  • : find a better place and name for me

Author

wk-radio-checkbox

Since 0.1.0
@mixin wk-radio-checkbox() { ... }

Description

Adds possibility to write styles for all checkboxes and radios.

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive).

Example

Usage

@include wk-radio-checkbox {
    border: 1px solid #fff;
}

Output

input[type='radio'], input[type='checkbox']),
.wk-checkbox, .wk-radio {
    border: 1px solid #fff;
}

TODO's

  • : find a better place and name for me

Author

wk-unstyle-list

Since 0.1.0
@mixin wk-unstyle-list($child-blocks: false) { ... }

Description

Removes default styling from lists

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$child-blocks

make child li and a elements display block

Boolfalse

Example

Usage

.some-list {
  @include wk-unstyle-list;
}

Output

.some-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

Author

wk-arrow

Since 0.1.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) { ... }

Description

Adds an arrow to a container

Source - http://codepen.io/erindotio/pen/BLFqe

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$box-edge

Edge to place the arrow

Stringbottom
$box-side

Which side the edge to attach the arrow

Stringcenter
$arrow-size

Default arrow size

Unit10px
$edge-side-offset

Distance for the margins

Unit0
$fill-color

Arrow fill color

Colorwk-primary-color(wkBlack)
$border-color

Arrow border color

Colornone
$border-style

Arrow border style

Stringborder

Example

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;
}

Requires

Used by

Author

wk-transition

Since 0.1.0
@mixin wk-transition() { ... }

Description

Transition, accepts optional attributes

Parameters

None.

Example

Usage

.element {
  @include wk-transition;
}

Output

.element {
  transition: all .1s ease-out;
}

Requires

Author

Utilities - Scales

variables

wk-heading-scale

Since 0.9.0
$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;

Description

Heading Font Scale

Type

Map

Used by

Author

wk-font-scale

Since 0.9.0
$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;

Description

Base Font Scale

Type

Map

Used by

Author

wk-mono-scale

Since 0.9.0
$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;

Description

Monospace Font Scale

Type

Map

Author

Utilities - Variables

variables

wk-rem-base

Since 0.1.0
$wk-rem-base: 16px !default;

Description

This is the default html and body font-size for the base rem value. If is equal to 16px, 1rem = 16px

Type

Number

Used by

Author

wk-mono-base

Since 0.1.0
$wk-mono-base: 13px !default;

Description

The monospace base size

Type

Number

Author

ms-base

Since 0.1.0
$ms-base: $wk-rem-base !default;

Description

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.

Author

wk-rem-fallback

Since 0.1.0
$wk-rem-fallback: false !default;

Description

If $rem-fallback is set to true, properties with pixel values will also be output by the rem functions and mixins

Type

Bool

Used by

Author

wk-rem-px-only

Since 0.1.0
$wk-rem-px-only: false !default;

Description

If $rem-px-only is set to true, only px values will be returned and output by rem functions and mixins

Type

Bool

Used by

Author

wk-font-path

Since 0.1.0
$wk-font-path: 'fonts/' !default;

Description

Base path to fonts supplied by WK CSS

Type

String

Author

wk-font-stacks

Since 0.1.0
$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;

Description

Font Stacks

Type

Map

Map structure

Map keyNameMap keyDescriptionMap keyTypeMap keyValue
$wk-font-stacks.helvetica

Helvetica

Listnone
$wk-font-stacks.global-serif

Franziska

Listnone
$wk-font-stacks.global-sans

Fira Sans

Listnone
$wk-font-stacks.monospace

DejaVu Sans Mono

Listnone

Used by

Author

wk-logo-variants

Since 0.1.0
$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;

Description

Brand logo variants map

Type

Map

Map structure

Map keyNameMap keyDescriptionMap keyTypeMap keyValue
$wk-logo-variants.small

Small logo

Mapnone
$wk-logo-variants.wheel

Wheel logo

Mapnone
$wk-logo-variants.vertical

Vertical logo

Mapnone
$wk-logo-variants.default

Default logo

Mapnone

Used by

Author

wk-font-weight

Since 0.1.0
$wk-font-weight: (
    light: 300,
    regular: 400,
    medium: 500,
    semibold: 600,
    bold: 700,
    extrabold: 800
) !default;

Description

Font weights

Type

Map

Map structure

Map keyNameMap keyDescriptionMap keyTypeMap keyValue
wk-font-weight.light

light font weight

Number300
wk-font-weight.regular

regular font weight

Number400
wk-font-weight.semibold

semibold font weight

Number600
wk-font-weight.bold

bold font weight

Number700
wk-font-weight.extrabold

extrabold font weight

Number800

Used by

Author

wk-z-index

Since 0.1.0
$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;

Description

Elements z-index map

Type

Map

Map structure

Map keyNameMap keyDescriptionMap keyTypeMap keyValue
modal

Modal component z-index value

Number1050
popover

Popover component z-index value

Number1060
header

Header component z-index value

Number1000
navbar

Navbar component z-index value

Number1000

Author

wk-menu-opacity

Since 0.1.0
$wk-menu-opacity: .95 !default;

Description

Global menu opacity

Type

Unit

Author

wk-border-radius

Since 0.1.0
$wk-border-radius: .3em !default;

Description

Global border radius

Type

Unit

Author

wk-body-font-stack

Since 0.1.0
$wk-body-font-stack: map-get($wk-font-stacks, helvetica) !default;

Description

<body> font stack

Type

List

Requires

  • [external] wk-font-stacks.helvetica

Author

wk-body-font-size

Since 0.1.0
$wk-body-font-size: $wk-rem-base !default;

Description

<body> font size. Use px here at thelevel to set 1rem. Modular scale's base will be set to 1rem.

Type

Number

Author

wk-body-line-height

Since 0.1.0
$wk-body-line-height: 1.4 !default;

Description

<body> font line height

Type

Number

Author

wk-document-font-stack

Since 0.1.0
$wk-document-font-stack: map-get($wk-font-stacks, global-serif) !default;

Description

.wk-document font stack

Type

List

Requires

  • [external] wk-font-stacks.global-serif

Author

wk-headings-font-stack

Since 0.1.0
$wk-headings-font-stack: map-get($wk-font-stacks, global-sans) !default;

Description

<h1> through <h6> font stack

Type

List

Requires

  • [external] font-stacks.global-sans

Author

wk-heading-weight

Since 0.1.0
$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;

Description

Headings font weights

Type

Map

Map structure

Map keyNameMap keyDescriptionMap keyTypeMap keyValue
wk-heading-weight.h1

h1 font weight

Numbermap-get($wk-font-weight, bold)
wk-heading-weight.h2

h2 font weight

Numbermap-get($wk-font-weight, bold)
wk-heading-weight.h3

h3 font weight

Numbermap-get($wk-font-weight, bold)
wk-heading-weight.h4

h4 font weight

Numbermap-get($wk-font-weight, bold)
wk-heading-weight.h5

h5 font weight

Numbermap-get($wk-font-weight, medium)
wk-heading-weight.h6

h6 font weight

Numbermap-get($wk-font-weight, light)

Requires

Used by

Author

wk-global-columns

Since 0.1.0
$wk-global-columns: 12 !default;

Description

Total ammount of columns

Type

Number

Used by

Author

wk-mobile-max-breakpoint

Since 0.1.0
$wk-mobile-max-breakpoint: wk-rem-value(600px) !default;

Description

The upper limit for a mobile, then it becomes tablet

Type

Unit

Author

wk-tablet-max-breakpoint

Since 0.1.0
$wk-tablet-max-breakpoint: wk-rem-value(1040px) !default;

Description

The upper limit for a tablet, then it becomes desktop

Type

Unit

Author

wk-desktop-max-width

Since 0.1.0
$wk-desktop-max-width: wk-rem-value(1200px) !default;

Description

The layout stops growing after this maximum pixel limit

Type

Unit

Used by

Author

wk-target-tablet

Since 0.1.0
$wk-target-tablet: $wk-mobile-max-breakpoint $wk-tablet-max-breakpoint !default;

Description

Tablet is between mobile max and tablet max

Type

List

Author

wk-target-tablet-desktop

Since 0.1.0
$wk-target-tablet-desktop: $wk-mobile-max-breakpoint !default;

Description

For tablet and above just name the mobile max

Type

Unit

Used by

Author

wk-target-desktop

Since 0.1.0
$wk-target-desktop: $wk-tablet-max-breakpoint !default;

Description

For desktop just name the tablet max

Type

Unit

Author

susy

Since 0.1.0
$susy: (
    global-box-sizing: border-box,
    columns: $wk-global-columns,
    container: $wk-desktop-max-width,
    gutters: .25
);

Description

Susy gutters are 0.25 default, just being explicit here

Type

Map

Author

wk-content-gutter-mobile

Since 0.1.0
$wk-content-gutter-mobile: .5rem;

Description

Default mobile content gutter

Type

Unit

Author

wk-content-gutter-tablet

Since 0.1.0
$wk-content-gutter-tablet: .5rem;

Description

Default tablet content gutter

Type

Unit

Author

wk-content-gutter-desktop

Since 0.1.0
$wk-content-gutter-desktop: 0;

Description

Default desktop content gutter

Type

Unit

Author

wk-input-border-radius

Since 0.1.0
$wk-input-border-radius: 0 !default;

Description

Input Border Radius

Type

Unit

Used by

Author

wk-input-padding

Since 0.1.0
$wk-input-padding: wk-rem(11px 16px) !default;

Description

Input inner padding

Type

Unit

Used by

Author

wk-input-line-height

Since 0.1.0
$wk-input-line-height: 1.5 !default;

Description

Input line height

Type

Unit

Used by

Author

wk-input-height

Since 0.1.0
$wk-input-height: wk-rem(48px) !default;

Description

Input height

Type

Unit

Used by

Author

wk-textarea-short-height

Since 0.1.0
$wk-textarea-short-height: 5em !default;

Description

Textarea Short Height

Type

Unit

Author

wk-textarea-medium-height

Since 0.1.0
$wk-textarea-medium-height: 8em !default;

Description

Textarea Medium Height

Type

Unit

Author

wk-textarea-tall-height

Since 0.1.0
$wk-textarea-tall-height: 12em !default;

Description

Textarea Tall Height

Type

Unit

Author

wk-product-brand-non-mobile-width

Since 0.1.0
$wk-product-brand-non-mobile-width: 132px !default;

Description

Product brand non mobile width

Type

Unit

Author

wk-select-input-height

Since 0.1.0
$wk-select-input-height: wk-rem(41px) !default;

Description

Select input height adjustment to match input natural height

Type

Unit

Author

wk-border-radius

Since 0.1.0
$wk-border-radius: .2rem !default;

Description

Global border radius

Type

Unit

Author

wk-page-content-padding

Since 0.1.0
$wk-page-content-padding: .938rem !default;

Description

Page content horizontal padding - used with the wk-page-content mixin

Type

Unit

Used by

Author

wk-transition-property

Since 0.1.0
$wk-transition-property: all !default;

Description

Default transistion property

Type

List

Used by

Author

wk-transition-function

Since 0.1.0
$wk-transition-function: ease-out !default;

Description

Default transistion timing function

Type

List

Used by

Author

wk-transition-duration

Since 0.1.0
$wk-transition-duration: .1s !default;

Description

Default transistion duration

Type

List

Used by

Author

Bootstrap

mixins

[private] wk-bootstrap-button-hover-fix

Since 0.8.0
@mixin wk-bootstrap-button-hover-fix($class, $color, $background) { ... }

Description

Fix Bootstrap button hover after getting squashed by WK CSS’s buttons specificity

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$class

Bootstrap button class name that needs the hover fix

Stringnone
$color

Button text color

Stringnone
$background

Button background color

Stringnone

Example

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;
}

Author