soapbox/app/styles/components/buttons.scss

167 wiersze
2.6 KiB
SCSS

button {
font-family: inherit;
cursor: pointer;
&:focus {
outline: none;
}
}
.button {
background-color: var(--brand-color);
border: 10px none;
border-radius: 999px;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: inherit;
font-size: 14px;
font-weight: 500;
height: 36px;
letter-spacing: 0;
line-height: 36px;
overflow: hidden;
padding: 0 16px;
position: relative;
text-align: center;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
width: auto;
transition: 0.2s;
.svg-icon {
margin-right: 5px;
}
&__link {
text-decoration: none;
}
&:active,
&:focus,
&:hover {
background-color: var(--brand-color--hicontrast);
}
&--destructive {
transition: none;
&:active,
&:focus,
&:hover {
background-color: $error-red;
transition: none;
}
}
&--small {
font-size: 13px;
height: auto;
line-height: normal;
padding: 4px 8px;
}
&:disabled,
&.disabled {
background-color: var(--brand-color--med);
cursor: default;
}
&::-moz-focus-inner {
border: 0;
}
&::-moz-focus-inner,
&:focus,
&:active {
outline: 0 !important;
}
&.button-alternative {
color: #fff;
background: var(--brand-color);
&:active,
&:focus,
&:hover {
background-color: var(--brand-color);
}
}
&.button-alternative-2 {
background: var(--accent-color);
&:active,
&:focus,
&:hover {
background-color: var(--accent-color--bright);
}
}
&.button-secondary {
color: var(--primary-text-color);
background: transparent;
border: 1px solid var(--brand-color);
&:active,
&:focus,
&:hover {
border-color: var(--accent-color);
}
&:disabled {
opacity: 0.5;
}
i.fa {
margin-right: 0.5em;
}
}
&.button--block {
display: flex;
width: 100%;
}
}
button,
a.button {
&.standard {
// NOTE - will define the larger standard buttons here and apply class where used.
&-small {
@include font-size(11);
@include line-height(11);
@include font-weight(bold);
height: 20px;
padding: 5px 15px;
border: 0;
border-radius: 4px;
text-transform: uppercase;
color: #fff;
background: #607cf5;
}
}
i.fa {
margin-right: 0.6em;
}
}
.button--follow {
display: flex;
align-items: center;
justify-content: center;
.svg-icon {
margin: 0 0 0 6px;
width: 20px;
height: 20px;
}
}