District CMS Base Theme

1 #Buttons Buttons

1.1 #Buttons.1-objects Objects

Source: styles/scss/objects/_button.scss, line 1

1.1.1 #Buttons.1-objects.1-variations Variations

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Defines button colors. If only button class is used it will use button--primary.

Examples
Default styling

Link button

.button--primary
Primary button style

Link button

.button--secondary
Secondary button style

Link button

.button--tertiary
Tertiary button style

Link button

.button--light
Light button style

Link button

.button--transparent
Transparent style button.

Link button

Markup 
 <p>
  <a href="#" class="button [modifier class]">Link button</a>
  <button class="button [modifier class]">Button tag</button>
  <input type="submit" class="button [modifier class]" value="Submit button" />
 </p>
Source: styles/scss/objects/_button.scss, line 5

1.1.2 #Buttons.1-objects.2-sizes Sizes

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Defines button sizes.

Examples
Default styling

Link button

.button--x-small
X Small button size

Link button

.button--small
Small button size

Link button

.button--large
Large button size

Link button

Markup 
 <p>
  <a href="#" class="button [modifier class]">Link button</a>
  <button class="button [modifier class]">Button tag</button>
  <input type="submit" class="button [modifier class]" value="Submit button" />
 </p>
Source: styles/scss/objects/_button.scss, line 41

1.1.3 #Buttons.1-objects.3-button-icon-small Button icon small

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Defines button icon small

Example

Link button

Markup 
 <p>
  <a href="#" class="button-icon-small">Link button</a>
 </p>
Source: styles/scss/objects/_button.scss, line 81

1.1.4 #Buttons.1-objects.4-Category-tags Category tags

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Defines tag styles for categories

Example
Secondary category style
Markup 
<div class="category-tags category-tags--secondary">
  <a>Secondary category style</a>
<div>
Source: styles/scss/components/_category-tags.scss, line 1

1.2 #Buttons.2-mixins Mixins

Source: styles/scss/tools/_button.scss, line 1

1.2.1 #Buttons.2-mixins.button button

Applies a variant and icon to a button.

@include button($variant, $icon);
Parameters:
  • $variant
    The variant name for the button.
  • $icon
    The icon name
Source: styles/scss/tools/_button.scss, line 5

1.2.2 #Buttons.2-mixins.button-hover-reset button-hover-reset

Remove the default hover/focus animation/icon.

@include button-hover-reset();
Source: styles/scss/tools/_button.scss, line 121

1.2.3 #Buttons.2-mixins.button-icon-small button-icon-small

Create a small button icon.

@include button-icon-small($icon, $palette-bg, $palette-text, $size);
Parameters:
  • $icon
    Icon to use
  • $palette-bg
    Background color
  • $palette-text
    Icon color
  • $palette-size
    Button size.
Source: styles/scss/tools/_button.scss, line 83