Clay CSS Mixins

Using Mixins

Clay CSS provides many mixins to help style components. The main purpose is to try and abstract away the complex CSS selectors provided by Bootstrap and Clay CSS, so less time is spent dealing with the inner workings of the framework and more time getting stuff done.

The mixin clay-button-variant takes a map parameter with a predefined list of CSS properties that can be modified. The properties prefixed with active- apply to the selectors:

.my-button-variant:not([disabled]):not(.disabled):active,
.my-button-variant:not([disabled]):not(.disabled).active,
.show > .my-button-variant.dropdown-toggle {}

This covers all the active state selectors defined in Bootstrap's .btn component. The same applies to hover, focus, and disabled states. In the example below, we will create an orchid colored call to action button.

$my-button-variant: () !default;
$my-button-variant: map-merge((
	bg: #C142A0,
	border-width: 0,
	color: #FFF,
	font-size: 13px,
	font-weight: 700,
	line-height: 1,
	padding-bottom: 12px,
	padding-left: 15px,
	padding-right: 15px,
	padding-top: 12px,
	hover-bg: #AC388E,
	hover-color: #FFF,
	active-bg: #9D3381,
), $my-button-variant);

.my-button-variant {
	@include clay-button-variant($my-button-variant);
}

Unsetting Properties

The mixin pattern above allows us to unset defined values, given they are first declared through the mixin. Properties that are declared directly in the CSS cannot be unset (e.g., .btn:focus {outline: 0;}). Unsetting is a workaround where properties will not be output by the Sass compiler in the final CSS file. In the example above we can unset all the properties we defined by declaring the same variable anywhere before our first declaration of $my-button-variant and set all values to null.

$my-button-variant: (
	bg: null,
	border-width: null,
	color: null,
	font-size: null,
	font-weight: null,
	line-height: null,
	padding-bottom: null,
	padding-left: null,
	padding-right: null,
	padding-top: null,
	hover-bg: null,
	hover-color: null,
	active-bg: null,
) !default;

$my-button-variant: () !default;
$my-button-variant: map-merge((
	...
), $my-button-variant);

.my-button-variant {
	...
}

The Sass compiler will output no styles for .my-button-variant. You should get buttons with only the default .btn styles, similar to the ones below.

Why?

This is useful if there is a rule-set defined in Clay CSS that is impeding your development. You can unset (if applicable) and continue with your work. For example, if you don't like the focus styles on .table-list-title you can unset it and return to the browser defaults by copying the code below into _clay-variables.scss.

$table-list-title-link: (
	focus-box-shadow: null,
	focus-outline: null,
) !default;