OCDE - Pattern Library v1.13.0

Button 

<!-- Default -->
button


<!-- Secondary -->
button button-secondary


<!-- Dropshadow -->
button button-dropshadow


<!-- Default (Example) -->
<button class="button" type="button">Button</button>


<!-- Is Disabled (Example) -->
<button class="button" type="button" disabled>Button</button>


<!-- Secondary (Example) -->
<button class="button button-secondary" type="button">Button</button>


<!-- Secondary + Is Disabled (Example) -->
<button class="button button-secondary" type="button" disabled>Button</button>


<!-- Dropshadow (Example) -->
<button class="button button-dropshadow" type="button">Button</button>


<!-- Default -->
button{{#if modifier}} {{modifier}}{{/if}}

<!-- Secondary -->
button{{#if modifier}} {{modifier}}{{/if}}

<!-- Dropshadow -->
button{{#if modifier}} {{modifier}}{{/if}}

<!-- Default (Example) -->
<button class="{{render '@button'}}{{#if modifier}} {{modifier}}{{/if}}" type="button" {{#if disabled}}disabled{{/if}}>Button</button>

<!-- Is Disabled (Example) -->
<button class="{{render '@button'}}{{#if modifier}} {{modifier}}{{/if}}" type="button" {{#if disabled}}disabled{{/if}}>Button</button>

<!-- Secondary (Example) -->
<button class="{{render '@button'}}{{#if modifier}} {{modifier}}{{/if}}" type="button" {{#if disabled}}disabled{{/if}}>Button</button>

<!-- Secondary + Is Disabled (Example) -->
<button class="{{render '@button'}}{{#if modifier}} {{modifier}}{{/if}}" type="button" {{#if disabled}}disabled{{/if}}>Button</button>

<!-- Dropshadow (Example) -->
<button class="{{render '@button'}}{{#if modifier}} {{modifier}}{{/if}}" type="button" {{#if disabled}}disabled{{/if}}>Button</button>
 
/* Default: No context defined. */


/* Secondary */
{
  "modifier": "button-secondary"
}


/* Dropshadow */
{
  "modifier": "button-dropshadow"
}


/* Default (Example): No context defined. */


/* Is Disabled (Example) */
{
  "disabled": true
}


/* Secondary (Example) */
{
  "modifier": "button-secondary"
}


/* Secondary + Is Disabled (Example) */
{
  "modifier": "button-secondary",
  "disabled": true
}


/* Dropshadow (Example) */
{
  "modifier": "button-dropshadow"
}
  • Content: 
    .button {
  @include textstyle-bodybold;
  background-color: $color-interactive1;
  border-radius: 500px; // High value creates pill shape
  color: $color-light1;
  display: inline-block;
  padding: $gridspacing ($gridspacing * 2);
  transition: background-color $transition-duration $transition-easing,
              color $transition-duration $transition-easing,
              opacity $transition-duration $transition-easing;
  will-change: background-color, color, opacity;

  svg {
    display: block;
    fill: $color-light1;
    height: 32px;
    transition: fill $transition-duration $transition-easing;
    width: 32px;
    will-change: fill;
  }

  &:hover:enabled {
    background-color: $color-light2;
    color: $color-interactive1;

    svg {
      fill: $color-interactive1;
    }
  }

  &[disabled] {
    cursor: not-allowed;
    opacity: .5;
  }

}

.button-inverse {
  background-color: $color-light1;
  color: $color-interactive1;

  svg {
    fill: $color-interactive1;
  }

  &:hover:enabled {
    background-color: $color-interactive1;
    color: $color-light1;

    svg {
      fill: $color-light1;
    }
  }
}

.button-secondary {
  background-color: transparent;
  color: $color-interactive1;

  &:hover:enabled {
    background: transparent;
    text-decoration: underline;
  }
}

.button-icon {
  @extend .button-secondary;
}

.button-dropshadow {
  box-shadow: 0 10px 20px 0 rgba($color-dark1, 0.7);
}
  • URL: /components/raw/button/_button.scss
  • Filesystem Path: src/scss/02-modules/button/_button.scss
  • Size: 1.4 KB

No notes defined.