bigbuffet-rw/app/styles/components/buttons.scss

122 lines
1.9 KiB
SCSS
Raw Normal View History

2020-06-02 23:10:53 -07:00
button {
font-family: inherit;
cursor: pointer;
&:focus {
outline: none;
}
}
.button {
2022-03-21 11:09:01 -07:00
align-items: center;
border-color: transparent;
2021-09-20 19:35:54 -07:00
border-radius: 999px;
2022-03-21 11:09:01 -07:00
border-width: 1px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
2020-06-02 23:10:53 -07:00
box-sizing: border-box;
cursor: pointer;
display: inline-flex;
2020-06-02 23:10:53 -07:00
font-size: 14px;
font-weight: 500;
2022-03-21 11:09:01 -07:00
justify-content: center;
line-height: 20px;
padding: 8px 16px;
2020-06-02 23:10:53 -07:00
transition: 0.2s;
2022-03-21 11:09:01 -07:00
.svg-icon,
i.fa {
margin-right: 5px;
}
&__link {
text-decoration: none;
}
2020-06-02 23:10:53 -07:00
&--destructive {
2022-03-21 11:09:01 -07:00
background-color: var(--brand-color);
2020-06-02 23:10:53 -07:00
}
&--small {
font-size: 13px;
height: auto;
line-height: normal;
2022-03-21 11:09:01 -07:00
padding: 6px 10px;
}
&--large {
font-size: 16px;
padding: 10px 20px;
2020-06-02 23:10:53 -07:00
}
&:disabled,
2022-03-21 11:09:01 -07:00
&.disabled,
&:disabled:hover,
&.disabled:hover {
opacity: 0.75;
user-select: none;
2020-06-02 23:10:53 -07:00
cursor: default;
}
&::-moz-focus-inner {
border: 0;
}
&::-moz-focus-inner,
&:focus,
&:active {
outline: 0 !important;
}
&.button-alternative {
2020-12-31 18:47:15 -08:00
color: #fff;
2020-06-02 23:10:53 -07:00
background: var(--brand-color);
&:active,
&:focus,
&:hover {
background-color: var(--brand-color);
}
}
&.button-alternative-2 {
2020-06-07 14:44:17 -07:00
background: var(--accent-color);
2020-06-02 23:10:53 -07:00
&:active,
&:focus,
&:hover {
2020-06-07 14:44:17 -07:00
background-color: var(--accent-color--bright);
2020-06-02 23:10:53 -07:00
}
}
}
2020-03-27 13:59:38 -07:00
button,
a.button {
2020-04-21 17:44:55 -07:00
&.standard {
2020-03-27 13:59:38 -07:00
2020-04-21 17:44:55 -07:00
// NOTE - will define the larger standard buttons here and apply class where used.
2020-03-27 13:59:38 -07:00
2020-04-21 17:44:55 -07:00
&-small {
@include font-size(11);
@include line-height(11);
@include font-weight(bold);
2020-05-28 17:58:37 -07:00
height: 20px;
padding: 5px 15px;
border: 0;
border-radius: 4px;
2020-04-21 17:44:55 -07:00
text-transform: uppercase;
2020-05-28 17:58:37 -07:00
color: #fff;
2020-06-02 15:42:09 -07:00
background: #607cf5;
2020-04-21 17:44:55 -07:00
}
}
2020-03-27 13:59:38 -07:00
2020-04-21 17:44:55 -07:00
i.fa {
margin-right: 0.6em;
}
}
2022-03-21 11:09:01 -07:00
.button--welcome {
.emojione {
margin: -1px 6px 0 -4px;
}
}