src/components/button/styles.scss
@import 'styles/_global.scss';
@keyframes spinner {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.button {
@extend %button;
margin: 0;
outline: 0;
font-size: 1.1rem;
padding: .4em 1em .5em;
border-width: 1px;
border-style: solid;
border-radius: 1px;
overflow: visible;
appearance: none;
user-select: none;
text-align: center;
white-space: nowrap;
text-transform: none;
text-decoration: none;
display: inline-block;
vertical-align: baseline;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .02), 0 1px 2px 0 rgba(0, 0, 0, .05);
transition: background-color .1s ease-out,
box-shadow .15s cubic-bezier(.47, .03, .49, 1.38),
border-color .1s ease-out,
color .1s ease-out;
&:focus {
outline: 0;
}
&:active {
box-shadow: inset 0 1px 0 rgba(0, 0, 0, .05), 0 1px 2px 0 rgba(0, 0, 0, .05);
}
& + & {
margin-left: 10px;
}
&.disabled,
&:disabled {
opacity: .8;
cursor: default;
color: #a5adba;
border-color: transparent;
background-color: #f4f5f7;
}
}
.size-small,
.size-normal,
.size-large {
padding-top: 0;
padding-bottom: 0;
}
.size-small {
height: 26px;
font-size: 1.1rem;
line-height: 24px;
&:not(.icon),
&:not(.circle) {
padding-left: 8px;
padding-right: 8px;
}
&.circle {
width: 26px;
flex-basis: 26px;
}
}
.size-normal {
height: 28px;
line-height: 26px;
font-size: 1.3rem;
&:not(.icon),
&:not(.circle) {
padding-left: 12px;
padding-right: 12px;
}
&.circle {
width: 28px;
flex-basis: 28px;
}
}
.size-large {
height: 36px;
line-height: 34px;
font-size: 1.5rem;
&:not(.icon),
&:not(.circle) {
padding-left: 16px;
padding-right: 16px;
}
&.circle {
width: 36px;
flex-basis: 36px;
}
}
.circle {
padding: 0;
flex-shrink: 0;
border-radius: 50%;
}
.loading {
&:before {
content: '';
width: 76%;
height: 76%;
margin: auto;
display: block;
border-radius: 50%;
border: solid #fff;
border-width: 1px 0 0 0;
animation: spinner 1s infinite linear;
}
}
.wide {
width: 100%;
height: 100%;
display: block;
}
.info:not(:disabled) {
color: $c-info-color;
border-color: $c-info-border;
background-color: $c-info-background;
&:hover {
color: lighten($c-info-color, $p-variations-percent);
border-color: lighten($c-info-border, $p-variations-percent);
background-color: lighten($c-info-background, $p-variations-percent);
}
}
.normal:not(:disabled) {
color: $c-normal-color;
border-color: $c-normal-border;
background-color: $c-normal-background;
&:hover {
color: lighten($c-normal-color, $p-variations-percent);
border-color: lighten($c-normal-border, $p-variations-percent);
background-color: lighten($c-normal-background, $p-variations-percent);
}
}
.primary:not(:disabled) {
color: $c-primary-color;
border-color: $c-primary-border;
background-color: $c-primary-background;
&:hover {
color: lighten($c-primary-color, $p-variations-percent);
border-color: lighten($c-primary-border, $p-variations-percent);
background-color: lighten($c-primary-background, $p-variations-percent);
}
}
.success:not(:disabled) {
color: $c-success-color;
border-color: $c-success-border;
background-color: $c-success-background;
&:hover {
color: lighten($c-success-color, $p-variations-percent);
border-color: lighten($c-success-border, $p-variations-percent);
background-color: lighten($c-success-background, $p-variations-percent);
}
}
.warning:not(:disabled) {
color: $c-warning-color;
border-color: $c-warning-border;
background-color: $c-warning-background;
&:hover {
color: lighten($c-warning-color, $p-variations-percent);
border-color: lighten($c-warning-border, $p-variations-percent);
background-color: lighten($c-warning-background, $p-variations-percent);
}
}
.danger:not(:disabled) {
color: $c-danger-color;
border-color: $c-danger-border;
background-color: $c-danger-background;
&:hover {
color: lighten($c-danger-color, $p-variations-percent);
border-color: lighten($c-danger-border, $p-variations-percent);
background-color: lighten($c-danger-background, $p-variations-percent);
}
}