98 lines
1.6 KiB
SCSS
98 lines
1.6 KiB
SCSS
.button {
|
|
font-weight: 700;
|
|
|
|
&--active {
|
|
&::after {
|
|
content: '';
|
|
margin-left: 0.15rem;
|
|
margin-top: -0.55rem;
|
|
width: 4px;
|
|
height: 4px;
|
|
background-color: $primary;
|
|
border-radius: 100%;
|
|
box-shadow: 0 0 1px 1px $primary;
|
|
}
|
|
}
|
|
|
|
&.is-icon {
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
padding: 0;
|
|
background-color: transparent;
|
|
border: none;
|
|
|
|
.icon {
|
|
height: 1.5rem;
|
|
width: 1.5rem;
|
|
}
|
|
|
|
.trnd {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #6b6b6b;
|
|
}
|
|
|
|
&:focus:not(:active),
|
|
&.is-focused:not(:active) {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
&.is-primary {
|
|
&.is-outlined {
|
|
background-color: #182922;
|
|
}
|
|
|
|
.trnd {
|
|
background-color: $primary;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus {
|
|
.trnd {
|
|
background-color: $primary-invert;
|
|
}
|
|
}
|
|
|
|
&[disabled] {
|
|
.trnd {
|
|
background-color: $primary;
|
|
}
|
|
}
|
|
}
|
|
|
|
.icon {
|
|
&:first-child:not(:last-child) {
|
|
margin-left: -0.15em;
|
|
margin-right: 0.5em;
|
|
}
|
|
&:last-child:not(:first-child) {
|
|
margin-left: 0.5em;
|
|
margin-right: -0.15em;
|
|
}
|
|
&:first-child:last-child {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
&:not(.is-small) {
|
|
span:not(.icon):not(.b-tooltip):first-child:last-child {
|
|
padding: 0 0.5rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.buttons {
|
|
.button.is-icon:not(:last-child):not(.is-fullwidth) {
|
|
margin-right: 1.25rem;
|
|
}
|
|
|
|
.break {
|
|
margin: 0 1.25rem 0.5rem 0;
|
|
width: 1px;
|
|
align-self: stretch;
|
|
background-color: #2a2a2a;
|
|
}
|
|
}
|