No notes defined.
<button class="button button--blue-outline">Button</button>
<a href="" class="button button--blue-outline">a.button</a>
<button class="button button--blue-outline">Button: See the full Review on the Cochrane Library</button>
<a href="" class="button button--blue-outline">a.button: See the full Review on the Cochrane Library</a>
{% set classString = '' %}
{% for modifier in modifiers %}
{% set classString = classString ~ ' button--' ~ modifier %}
{% endfor %}
<button class="button{{ classString }}">Button</button>
<a href="" class="button{{ classString }}">a.button</a>
<button class="button{{ classString }}">Button: See the full Review on the Cochrane Library</button>
<a href="" class="button{{ classString }}">a.button: See the full Review on the Cochrane Library</a>
.button {
@include button();
}
.button {
&--outline {
background-color: transparent;
@include button--background-gradient(rgba(0,0,0,0.01), rgba(0,0,0,0.01), rgba(0,0,0,0.05), rgba(0,0,0,0.1));
color: $secondary;
box-shadow: inset 0 0 0 2px $secondary;
transition: all 0.2s;
&:after {
background-image: url('#{$assets-directory}/img/arrow-secondary.svg');
}
&:hover, &:focus {
color: darken($secondary, 30%);
box-shadow: inset 0 0 0 2px darken($secondary, 30%);
&:after {
background-image: url('#{$assets-directory}/img/arrow-navy.svg');
}
}
}
&--blue {
background: $primary;
@include button--background-gradient($primary, $primary, darken($primary, 10%), darken($primary, 50%));
}
&--blue-outline {
background-color: transparent;
@include button--background-gradient(rgba(0,0,0,0.01), rgba(0,0,0,0.01), rgba(0,0,0,0.05), rgba(0,0,0,0.1));
color: $primary;
box-shadow: inset 0 0 0 2px $primary;
transition: all 0.2s;
&:after {
background-image: url('#{$assets-directory}/img/arrow-primary.svg');
}
&:hover, &:focus {
color: darken($primary, 30%);
box-shadow: inset 0 0 0 2px darken($primary, 30%);
&:after {
background-image: url('#{$assets-directory}/img/arrow-navy.svg');
}
}
}
}
button[type="submit"], input[type="submit"], input[type="reset"], input[type="button"] {
&:not([class^='button']) {
@include button();
}
&[disabled] {
opacity: 0.5;
}
}
input[type="submit"], input[type="reset"], input[type="button"] {
padding: 2rem 0.75rem 0.75rem 0.75rem;
}