Vebego Component Library
<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.