district base

3 #Development Development

Source: docroot/themes/contrib/district_base/styles/scss/tools/_button.scss, line 1

3.1 #Development.extend Extend

Source: docroot/themes/contrib/district_base/styles/scss/objects/_links.scss, line 1

3.1.1 #Development.extend.link-heading-hover Link Heading Hover

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

Applies a hover effect to header links.

@extend %link-heading-hover;
Example

Link Heading Hover

Markup 
<h3>
 <a href="#" class="link-heading-hover">Link Heading Hover</a>
</h3>
Source: docroot/themes/contrib/district_base/styles/scss/objects/_links.scss, line 5

3.1.2 #Development.extend.list-ordered-list Ordered list

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

Ordered list of items

Example
  1. Item one
  2. Item two
  3. Item three
Markup 
<ol>
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ol>
Source: docroot/themes/contrib/district_base/styles/scss/objects/_list.scss, line 20

3.1.3 #Development.extend.responsive-description Responsive Description

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

Applies a heading style that is responsive.

.my-heading {
 @extend %responsive-description;
}

<div class="responsive-description">My description</div>
Example
Ipsa semper do cursus, autem excepteur voluptate pretium proin nisl, corporis. Auctor? Architecto? Cras metus
Markup 
<div class="responsive-description">Ipsa semper do cursus, autem excepteur voluptate pretium proin nisl, corporis. Auctor? Architecto? Cras metus </div>
Source: docroot/themes/contrib/district_base/styles/scss/objects/_typography.scss, line 1

3.2 #Development.function Function

Source: docroot/themes/contrib/district_base/styles/scss/tools/_link-cta.scss, line 4

3.2.1 #Development.function.link-cta-setting Link CTA

Get a value from the $link-cta map. For use with a link cta layout.

background-color: link-cta-setting('bg-color');;
Parameters:
  • $name
    A property of the $link-cta map.
Source: docroot/themes/contrib/district_base/styles/scss/tools/_link-cta.scss, line 8

3.3 #Development.mixins Mixins

Source: docroot/themes/contrib/district_base/styles/scss/tools/_button.scss, line 5

3.3.1 #Development.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: docroot/themes/contrib/district_base/styles/scss/tools/_button.scss, line 9

3.3.2 #Development.mixins.button-hover-reset Button hover reset

Remove the default hover/focus animation/icon.

@include button-hover-reset();
Source: docroot/themes/contrib/district_base/styles/scss/tools/_button.scss, line 125

3.3.3 #Development.mixins.icon-button 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: docroot/themes/contrib/district_base/styles/scss/tools/_button.scss, line 87

3.3.4 #Development.mixins.link-heading-hover Link heading hover

Applies a hover effect to header links.

Source: docroot/themes/contrib/district_base/styles/scss/tools/_links.scss, line 1

3.3.5 #Development.mixins.responsive-description Responsive description

Applies a description style that is responsive.

.my-description {
 @include responsive-description();
}
Source: docroot/themes/contrib/district_base/styles/scss/tools/_typography.scss, line 30

3.3.6 #Development.mixins.responsive-heading Responsive heading

Applies a heading style that is responsive.

.my-heading {
 @include responsive-heading();
}
Source: docroot/themes/contrib/district_base/styles/scss/tools/_typography.scss, line 1