@asi-ngtools/lib
Version:
This project is a little components library, simple to use, which will help you to simplify your project.
101 lines (84 loc) • 2.01 kB
text/less
.asi-link-button,
asi-link-button {
.base-component;
flex: 0 0 auto;
a {
display: flex;
justify-content: center;
align-items: center;
flex: 1 0 auto;
.clean-a;
font-size: .9em;
min-height: 35px;
color: @asi-button-label-color;
border-radius: @asi-button-border-radius;
padding: 5px 15px;
box-sizing: border-box;
outline: none;
min-width: 150px;
text-align: center;
outline: none;
border: @asi-button-border;
background-color: @asi-button-background-color;
&:focus {
border: @asi-button-outline-border;
}
}
&.link-button-raised {
a {
box-shadow: @asi-button-raised-box-shadow;
&:hover {
border: @asi-button-hover-border;
background-color: @asi-button-hover-background-color;
}
&:active {
box-shadow: inset 0 0 3px 1px grey;
}
}
&.disabled {
pointer-events: none;
a {
pointer-events: none;
background-color: lightgrey;
border-color: lightgrey;
color: black;
}
}
}
&.link-button-flat {
a {
&:hover {
border: @asi-button-hover-border;
background-color: @asi-button-hover-background-color;
}
}
&.disabled {
pointer-events: none;
a {
pointer-events: none;
background-color: lightgrey;
border-color: lightgrey;
color: black;
}
}
}
&.link-button-bordered {
a {
background-color: @asi-button-bordered-background-color;
color: @asi-button-bordered-label-color;
border: @asi-button-bordered-border;
&:hover {
border: @asi-button-hover-border;
}
}
&.disabled {
pointer-events: none;
a {
pointer-events: none;
background-color: lightgrey;
border-color: lightgrey;
color: black;
}
}
}
}