footballrs.net

Button: Ghost 

<a href="" class="button gap-0.5 items-center  button--ghost">
    impedit voluptas</a>
 
{% set button = button|merge({type: 'button--ghost'}) %}
{% include "@atoms/button/button.twig" with {button: button} only %}
 
{
  "button": {
    "cta": "impedit voluptas"
  }
}
  • Content: 
    /* ATOMS */

/* MODULES */

/* BLOCKS */
];
  • URL: /components/raw/button/button.js
  • Filesystem Path: resources/Views/Atoms/button/button.js
  • Size: 44 Bytes
  • Content: 
    {
  "button": {
    "cta": "",
    "href": {
      "url": "#",
      "title": "title",
      "target": ""
    },
    "className": ""
  }
}
  • URL: /components/raw/button/button.json
  • Filesystem Path: resources/Views/Atoms/button/button.json
  • Size: 139 Bytes
  • Content: 
    a.button {
  @apply inline-flex cursor-pointer no-underline transition-colors px-3 rounded uppercase font-headline focus:outline-none focus:ring-2 focus:ring-offset-1 bg-lighter text-primary hover:bg-primary hover:text-white;

  padding-top: 13px;
  padding-bottom: 12px;

  svg {
    display: inherit;
  }

  i, svg {
    font-size: 20px;
  }

  &.full {
    @apply block;
  }

  &--primary {
    @apply bg-accent text-primary transition-colors hover:bg-primary hover:text-accent;
  }

  &--ghost {
    @apply border-primary border bg-white text-primary transition-colors hover:bg-primary hover:text-white;
  }

  &--icon-left {
    i {
      @apply mr-0.5;
    }
  }

  &--icon-right {
    i {
      @apply ml-0.5;
    }
  }
}
  • URL: /components/raw/button/button.scss
  • Filesystem Path: resources/Views/Atoms/button/button.scss
  • Size: 729 Bytes
  • Content: 
    <template>
  <a :href="getHref" :class="getClass + ' button gap-0.5 items-center'">
    <icon
      v-if="getIconLeft"
      :icon="getIconLeft"
    />
    {{ getCta }}
    <icon
      v-if="getIconRight"
      :icon="getIconRight"
    />
  </a>
</template>
<script>
import icon from '../icon/icon.vue'
export default {
  components: {
    icon
  },
  props: {
    button: {
      type: Object,
      default: {}
    },
    type: {
      type: String
    },
    icon_left: {
      type: String
    },
    icon_right: {
      type: String
    },
    cta: {
      type: String
    },
    iconClass: {
      type: String
    },
    href: {
      type: String
    },
    className: {
      type: String,
      default: ''
    }
  },
  computed: {
    getClass(){
      return this.button.type ?
        [this.button.type, this.className].join(' ').trim() :
        [this.type, this.className].join(' ')
    },
    getHref(){
      return this.button.href ? this.button.href.url : this.href
    },
    getIconLeft(){
      return this.button.icon_left ?? this.icon_left
    },
    getIconRight(){
      return this.button.icon_right ?? this.icon_right
    },
    getCta(){
      return this.button.cta ?? this.cta
    },
    getIconClass(){
      return this.button.iconClass ?? this.iconClass
    },
  }
}
</script>
  • URL: /components/raw/button/button.vue
  • Filesystem Path: resources/Views/Atoms/button/button.vue
  • Size: 1.3 KB

No notes defined.