<a class="button button--ghost ">
<span class="button__label">Label here</span>
</a>
<{{getelement tag "a"}} class="button {{ getmodifiers modifiers "button" }} {{additionalClasses}} {{#if icon}}button--icon{{/if}}" {{#if href}}href="{{href}}"{{/if}} {{{getattributes attributes}}}>
{{#if label}}
<span class="button__label">{{ label }}</span>
{{/if}}
{{#if icon}}
{{> @icon id=icon additionalClasses="button__icon"}}
{{/if}}
</{{getelement tag "a"}}>
{
"label": "Label here",
"modifiers": [
"ghost"
]
}
.button {
position: relative;
display: inline-block;
min-height: size(5);
padding-left: size(5);
padding-right: size(5);
padding-top: calc(#{size(1)} + 1px); // visual trick to align text vertically, bypassing font issue
padding-bottom: calc(#{size(1)} - 1px); // visual trick to align text vertically, bypassing font issue
background-color: $color-green-dark;
color: $color-white;
font-weight: $font-weight-bold;
text-transform: uppercase;
vertical-align: baseline;
text-decoration: none;
border-radius: 0;
margin-bottom: size(2);
cursor: pointer;
&:hover {
background-color: $color-green;
text-decoration: none;
}
@include color-theme {
background-color: $arg-theme-color;
&:hover {
background-color: darken($arg-theme-color, 2%);
}
}
@include dark-theme {
box-shadow: inset 0 0 0 1px $color-white;
&:hover {
background-color: $color-white;
color: $arg-theme-color;
}
}
}
.button--icon {
text-align: left;
padding-left: size(3);
padding-right: size(9);
}
.button--wide {
@include breakpoint-classes {
width: 100%;
}
}
.button--white {
background-color: $color-white;
color: $color-green-dark;
&:hover {
background-color: $color-green;
color: $color-white;
}
}
.button--ghost {
background-color: transparent;
color: $color-green-dark;
box-shadow: inset 0 0 0 1px $color-green-dark;
&:hover,
&:focus-visible {
color: $color-white;
background-color: $color-green;
box-shadow: none;
.button__icon {
fill: $color-white;
}
}
.button__icon {
fill: $color-green-dark;
}
@include color-theme {
box-shadow: inset 0 0 0 1px $arg-theme-color;
color: $arg-theme-color;
background-color: transparent;
&:hover {
color: $color-white;
background-color: $arg-theme-color;
box-shadow: inset 0 0 0 1px $arg-theme-color;
}
}
@include color-theme-dark {
box-shadow: inset 0 0 0 1px $color-white;
color: $color-white;
&:hover {
background-color: $color-white;
color: $arg-theme-color;
}
}
.hero__primary & {
@include color-theme {
border-color: $color-white;
color: $color-white;
&:hover {
background-color: $color-white;
color: $arg-theme-color;
}
}
}
}
.button--rounded {
border-radius: size(5);
padding-left: size(2);
padding-right: size(2);
white-space: nowrap;
&.button--ghost {
box-shadow: inset 0 0 0 2px $color-green-dark;
&:hover {
box-shadow: none;
}
@include color-theme {
box-shadow: inset 0 0 0 2px $arg-theme-color;
&:hover {
box-shadow: inset 0 0 0 2px $arg-theme-color;
}
}
@include dark-theme {
box-shadow: inset 0 0 0 2px $color-white;
&:hover {
box-shadow: inset 0 0 0 2px $color-white;
}
}
&__black {
box-shadow: inset 0 0 0 2px $color-black;
&:hover {
box-shadow: none;
}
@include color-theme {
box-shadow: inset 0 0 0 2px $color-black;
&:hover {
box-shadow: inset 0 0 0 2px $color-black;
}
}
@include dark-theme {
box-shadow: inset 0 0 0 2px $color-white;
&:hover {
box-shadow: inset 0 0 0 2px $color-white;
}
}
}
}
}
.button__icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: size(1.5);
width: size(3);
height: size(3);
fill: $color-white;
}
.button__label {
font-size: size(2);
line-height: size(3);
height: 100%;
vertical-align: baseline;
.button--rounded & {
font-size: size(1.5);
line-height: size(2.5);
}
}
No notes defined.