<!-- src/components/button--disabled.hbs -->
<button disabled class="button">Button</button>
<!-- src/components/button--disabled.hbs -->
<button disabled class="button">{{ button-text }}</button>
{
"button-text": "Button",
"main-logo": "/images/COL_Logo_Full_2ColorBig.png",
"site-title": "Care on Location",
"year": 2017,
"nav-items": [
{
"nav-item-link": "#",
"nav-item-title": "Services",
"classes": "has-sub-menu",
"sub-nav-items": [
{
"nav-item-link": "#",
"nav-item-title": "Video Care Consult"
},
{
"nav-item-link": "#",
"nav-item-title": "Assisted Video Care Consult"
},
{
"nav-item-link": "#",
"nav-item-title": "On Location Care Consult"
}
]
},
{
"nav-item-link": "#",
"nav-item-title": "Providers"
},
{
"nav-item-link": "#",
"nav-item-title": "Partners"
},
{
"nav-item-link": "#",
"nav-item-title": "About"
},
{
"nav-item-link": "#",
"nav-item-title": "FAQ"
},
{
"nav-item-link": "#",
"nav-item-title": "News"
}
],
"org-address": "111 N. 1st St. <br /> Denver, CO 80204",
"org-phone": "303-111-1111",
"socials": [
{
"social": "facebook",
"social-url": "https://www.facebook.com"
},
{
"social": "twitter",
"social-url": "https://www.twitter.com"
},
{
"social": "google-plus",
"social-url": "https://plus.google.com"
}
]
}
.button {
color: $brand-lightblue;
background: none;
@include border-radius(3px, 3px);
border: 3px solid $brand-lightblue;
@include font-size(18);
line-height: 2em;
padding-left: 15px;
padding-right: 15px;
&:after {
content: ">";
margin-left: -.5em;
opacity: 0;
transition: all 0.2s ease 0s;
}
&:hover {
border-color: $brand-lightgrey;
background-color: $brand-lightgrey;
&:enabled {
&:after {
opacity: 1;
margin-left: .5em;
}
}
}
&:disabled {
background-color: $brand-lightgrey;
border-color: $brand-lightgrey;
color: $brand-white;
}
}
.button-light {
color: $brand-white;
border-color: $brand-white;
&:hover {
background-color: rgba(255, 255, 255, .2);
color: $brand-white;
border-color: $brand-white;
}
}
There are no notes for this item.