<p class="t4_button">
<a href="https://compass.vcu.edu/">Documentation</a>
</p>
{% if element == 'button' %}
{% if environment == 't4' %}
<p class="t4_button">
<button>{{ text }}</button>
</p>
{% else %}
<button class="cwf-button">{{ text }}</button>
{% endif %}
{% elseif element == 'link' %}
{% if environment == 't4' %}
<p class="t4_button">
<a href="{{ href }}">{{ text }}</a>
</p>
{% else %}
<a class="cwf-button" href="{{ href }}">{{ text }}</a>
{% endif %}
{% elseif element == 'input' %}
{% if environment == 't4' %}
<p class="t4_button">
<input type="{{ type }}" {{ value ? 'value="' ~ value ~ '"' }} />
</p>
{% else %}
<input type="{{ type }}"
{{ value ? 'value="' ~ value ~ '"' }}
class="cwf-button" />
{% endif %}
{% endif %}
{
"element": "link",
"environment": "t4",
"href": "https://compass.vcu.edu/",
"text": "Documentation"
}
// Button component styles
@import "../../shared/animation";
@import "../../shared/style";
@import "../../shared/theme";
// Button colors
$button--background-color: style__color(blue, accent) !default;
$button--border-color: lighten(
style__color(blue, accent),
17%
) !default; // #00a4eb
$button--color: style__color(white) !default;
$button--active--background-color: darken(
style__color(blue, accent),
7%
) !default; // #004f70
$button--active--color: style__color(white) !default;
$button--hover-focus--background-color: lighten(
style__color(blue, accent),
17%
) !default; // #00a4eb
$button--hover--focus-color: style__color(gray-dark) !default;
.t4_button,
.cwf-button {
--cwf-button--background-color: #{$button--background-color};
--cwf-button--border-color: #{$button--border-color};
--cwf-button--color: #{$button--color};
--cwf-button--active--background-color: #{$button--active--background-color};
--cwf-button--active--color: #{$button--active--color};
--cwf-button--hover-focus--background-color: #{$button--hover-focus--background-color};
--cwf-button--hover-focus--color: #{$button--hover--focus-color};
}
.t4_button a,
.t4_button button,
.t4_button input[type="submit"],
.t4_button input[type="reset"],
.t4_button input[type="button"],
.cwf-button {
display: inline-block;
user-select: none;
border-radius: 1.5rem;
padding: 0.5rem 1rem;
border: 1px solid var(--cwf-button--border-color);
background-color: var(--cwf-button--background-color) !important;
line-height: 1.5;
font-family: theme__font--sans-serif();
font-weight: 700;
text-decoration: none;
color: var(--cwf-button--color) !important;
@include animation__transition(background-color, color);
&:active {
background-color: var(
--cwf-button--active--background-color
) !important;
color: var(--cwf-button--active--color) !important;
}
&:focus,
&:hover {
background-color: var(
--cwf-button--hover-focus--background-color
) !important;
color: var(--cwf-button--hover-focus--color) !important;
}
}
No notes defined.