HAS Green Academy styleguide

Button: Default

1179 × 333 
<button type="button" class="c-button      c-button--has-icon          ">
    <span class="c-button__inner">
        <span class="c-button__label  " data-module-bind="btn-label">
            Button label
        </span>

        <span class="c-button__wrap-icon">
            <svg class="c-icon    " aria-hidden="true">
                <use xlink:href="../../dist/sprite.svg#icon-arrow-right" />
            </svg>

        </span>

    </span>
</button>
 
<{{element}}
{{#if type}}type="{{type}}"{{/if}}
{{#if href}}href="{{href}}{{#if anchor}}{{anchor}}{{/if}}"{{/if}}
{{#if target}}target="{{target}}"{{/if}}
class="c-button  {{#if modifier}}c-button--{{modifier}}{{/if}}  {{#if size}}c-button--size-{{size}}{{/if}}  {{#if icon}}c-button--has-icon{{/if}}  {{#if isReversed}}c-button--reversed{{/if}}  {{#if hideLabel}}c-button--hide-label{{/if}}  {{#if isLarge}}c-button--large{{/if}}  {{#if invertColor}}c-button--invert-color{{/if}} {{#if class }}{{ class }}{{/if}} {{#if isFullWidth }}c-button--full-width{{/if}}"
{{#if id}}id="{{id}}"{{/if}}
{{#if isDisabled}}disabled{{/if}}
{{#if attributes}}{{{ attributes }}}{{/if}}
{{{data}}}
>
<span class="c-button__inner">
    <span class="c-button__label  {{#if hideLabel}}u-visually-hidden{{/if}}" data-module-bind="btn-label">
      {{{label}}}
    </span>

  {{#if icon}}
    <span class="c-button__wrap-icon">
      {{> '@atoms-icon' icon=icon  modifier=iconModifier }}
    </span>
  {{/if}}

  </span>
</{{element}}>
 
{
  "element": "button",
  "label": "Button label",
  "type": "button",
  "href": null,
  "icon": "arrow-right"
}
  • Content: 
    /*  ======================================================
Atoms.Button
====================================================== */

/*  Variables
    ====================================================== */

@use 'src/_sass/utilities';



/*  Module
    ====================================================== */

.c-button {
  --button-spacing: calc(var(--space-tiny) * 2.5);
  --button-font-size: var(--size-foxtrot);
  --button-background-color: var(--page-theme-dark);
  // --hover-background: var(--color-gray-medium);
  // --hover-border-color: var(--color-black);
  appearance: none;
  cursor: pointer;

  // box model
  display: inline-block;
  vertical-align: middle;

  // spacing
  // border: 1px solid var(--color-black);
  border: none;
  // border-radius: calc(var(--space-tiny) / 2);
  border-radius: 0;

  // text
  text-decoration: none;
  text-align: start;
  // font-family: var(--font-family-secondary);
  // font-weight: var(--font-weight-bold);
  line-height: 0;

  // color
  // background: var(--color-white);
  // color: var(--color-brand-a-dark);
  background-color: var(--button-background-color);
  color: var(--color-white);

  // animation
  transition: var(--base-transition-duration-short) var(--base-timing-function);
  transition-property: color, background-color, border;

  #{utilities.$global-interaction-states} {
    // background: var(--hover-background);
    // border-color: var(--hover-border-color);
  }
}



/*  Elements
    ====================================================== */

.c-button__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 1;
}

.c-button__label {
  padding: var(--button-spacing);
  font-size: var(--button-font-size);
}

.c-button__wrap-icon {
  padding: var(--button-spacing);
}



/*  Modifiers
    ====================================================== */

/**
Contrast
 */
.c-button--contrast {
  --button-background-color: var(--page-theme, var(--color-brand-a));
  color: var(--color-white);
}

/**
  * Reversed
 */
.c-button--reversed {
  .c-button__inner {
    flex-direction: row-reverse;
  }
}


/**
  * Full width
 */
.c-button--full-width {
  display: block;
}


/**
  Flat
 */
.c-button--flat {
  --button-spacing: 0;
  --button-background-color: transparent;
  color: var(--page-theme);
  border: none;

  .c-button__wrap-icon {
    padding-inline-start: var(--space-tiny);
  }

  #{utilities.$global-interaction-states} {
    background-color: transparent;
  }
}


/**
  * With icon
 */
.c-button--has-icon:not(.c-button--reversed) {
  .c-button__label {
    padding-inline-end: 0;
  }
}

.c-button--has-icon.c-button--reversed {
  .c-button__label {
    padding-inline-start: 0;
  }
}

/**
  * Small
 */
.c-button--small {
  --button-spacing: var(--space-tiny);
  --button-font-size: var(--size-normalis);

  .c-icon {
    inline-size: var(--space-small);
    block-size: var(--space-small);
  }
}

/**
  * Medium
 */
.c-button--size-medium {
  --button-spacing: calc(var(--space-tiny) * 1.5);
  --button-font-size: var(--size-normalis);

  .c-icon {
    inline-size: var(--space-small);
    block-size: var(--space-small);
  }
}





/*  Theming
    ====================================================== */

:where(.t-page-theme-brand-a, .t-page-theme-brand-b, .t-page-theme-brand-c) .c-hero-detail__intro,
:where(.t-themed-section) .t-color--light,
.c-accordeon--branded:not(:where(.t-themed-section *)) {
  // .c-button:not(.c-button--contrast) {
  .c-button {
    --button-background-color: var(--color-white);
    color: var(--page-theme-dark);
  }

  .c-button--flat {
    --button-background-color: transparent;
    color: var(--color-white);
  }

  .c-button--contrast {
    --button-background-color: var(--page-theme);
    color: var(--color-white);
  }
}
  • URL: /components/raw/atoms-button/_button.scss
  • Filesystem Path: src/components/atoms/button/_button.scss
  • Size: 3.8 KB

No notes defined.