Vebego Component Library

Button Primary: Icon Only Sm 

<a class="atm-button atm-button-primary button-sm button-icon-only ">
    <span class="button-content">

        <span class="atm-icon  fal fa-plus   fa-fw"></span>
    </span>
    <span class="button-triangle"></span>
</a>
 
<{{element}}
  class="atm-button atm-button-primary {{modifier}} {{#unless text}}button-icon-only{{/unless}} {{#if lightVersion}}button-light{{/if}}"
  {{#if type}}type="{{type}}"{{/if}}
  {{#if title}}title="{{title}}"{{/if}}
  {{#if href}}href="{{href}}"{{/if}}
  {{#if target}}target="{{target}}"{{/if}}
  {{#if id}}id="{{id}}"{{/if}}
  {{#if isDisabled}}disabled{{/if}}
  {{#if dataset}}
    {{#each dataset}}
    {{#if key}}{{#if value}}
    data-{{key}}="{{value}}"
    {{/if}}{{/if}}
    {{/each}}
  {{/if}}>
    <span class="button-content">
    {{#if iconLeft}}
      {{#if icon}}{{render '@icon' icon}}{{/if}}
      {{#if text}}<span>{{text}}</span>{{/if}}
    {{else}}
      {{#if text}}<span>{{text}}</span>{{/if}}
      {{#if icon}}{{render '@icon' icon}}{{/if}}
    {{/if}}
    </span>
    {{#if showTriangle}}
    <span class="button-triangle"></span>
    {{/if}}
</{{element}}>
 
{
  "modifier": "button-sm",
  "text": null,
  "element": "a",
  "type": "",
  "title": "",
  "target": "",
  "href": "",
  "id": "",
  "isDisabled": false,
  "iconLeft": false,
  "icon": {
    "style": "fal",
    "icon": "fa-plus",
    "fixedWidth": true
  },
  "dataset": [
    {
      "key": "",
      "value": ""
    }
  ],
  "showTriangle": true,
  "lightVersion": false
}
  • Content: 
    .atm-button-primary {
    @apply relative;
    @apply inline-block;
    @apply overflow-hidden;
    @apply text-sm;
    @apply font-display;
    @apply font-medium;
    @apply text-white;
    @apply bg-cta;
    @apply rounded-sm;
    @apply cursor-pointer;

    &.button-light {
        @apply text-black;
        @apply bg-cta-100;
    }

    &.button-lg {
        @apply px-9 py-4;

        &.button-icon-only {
            @apply p-4;
        }
    }

    /* Default */
    &.button-md {
        @apply px-7 py-2;

        &.button-icon-only {
            @apply p-2;
        }
    }

    &.button-sm {
        @apply px-3 py-1 text-xs;

        &.button-icon-only {
            @apply p-1;
        }
    }

    .button-content {
        @apply inline-block relative z-20;

        .atm-icon + span,
        span + .atm-icon {
            @apply ml-1;
        }
    }

    .button-triangle {
        @apply block absolute;
        @apply bg-white bg-opacity-20;

        height: 150%;
        width: 150%;
        top: 100%;
        left: -25%;
        transform-origin: calc(83.33333% - 2.85714em) 0;
        transform: rotate(-10deg);
        transition: transform 180ms ease;
    }

    &:hover {
        .button-triangle {
            transform: rotate(0deg) translateY(-100%);
            transition: transform 360ms ease;
        }
    }
}
  • URL: /components/raw/button-primary/button-primary.css
  • Filesystem Path: src\components\02-atoms\button\button-primary\button-primary.css
  • Size: 1.4 KB

No notes defined.