2019-08-14 09:48:44 +00:00
|
|
|
.button {
|
2020-05-17 15:37:45 +00:00
|
|
|
margin-bottom: 0;
|
|
|
|
|
2021-01-17 19:24:20 +00:00
|
|
|
&.button--emoji {
|
2021-03-11 16:18:52 +00:00
|
|
|
align-items: center;
|
2021-01-17 19:24:20 +00:00
|
|
|
background: var(--b-50);
|
|
|
|
border: 1px solid var(--color-border-light);
|
|
|
|
border-radius: var(--border-radius-large);
|
2021-03-11 16:18:52 +00:00
|
|
|
display: flex;
|
2021-01-17 19:24:20 +00:00
|
|
|
font-size: var(--font-size-small);
|
2021-03-11 16:18:52 +00:00
|
|
|
height: var(--space-large);
|
|
|
|
justify-content: center;
|
|
|
|
padding: var(--space-micro);
|
|
|
|
text-align: center;
|
|
|
|
width: var(--space-large);
|
2021-01-17 19:24:20 +00:00
|
|
|
|
|
|
|
&:hover {
|
|
|
|
background: var(--b-200);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
2019-08-14 09:48:44 +00:00
|
|
|
&.icon {
|
|
|
|
padding-left: $space-normal;
|
|
|
|
padding-right: $space-normal;
|
2019-10-27 13:58:02 +00:00
|
|
|
|
2019-08-14 09:48:44 +00:00
|
|
|
i {
|
2019-12-13 09:56:14 +00:00
|
|
|
padding-right: $space-small;
|
2019-08-14 09:48:44 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&.nice {
|
|
|
|
border-radius: $space-smaller;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.hollow {
|
|
|
|
&.link {
|
|
|
|
border-color: transparent;
|
|
|
|
padding-left: 0;
|
|
|
|
|
|
|
|
&:hover,
|
|
|
|
&:focus {
|
|
|
|
border-color: transparent;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-02-16 10:16:26 +00:00
|
|
|
>.icon {
|
2019-12-13 09:56:14 +00:00
|
|
|
font-size: $font-size-default;
|
2019-08-14 09:48:44 +00:00
|
|
|
}
|
2020-02-16 10:16:26 +00:00
|
|
|
|
|
|
|
&.tiny {
|
|
|
|
font-size: $font-size-mini;
|
|
|
|
padding: $space-small $space-slab;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.round {
|
|
|
|
border-radius: $space-larger;
|
|
|
|
}
|
2020-10-21 09:48:36 +00:00
|
|
|
|
|
|
|
&.compact {
|
|
|
|
padding-bottom: 0;
|
|
|
|
padding-top: 0;
|
|
|
|
}
|
2019-10-27 13:58:02 +00:00
|
|
|
}
|
2019-12-13 09:56:14 +00:00
|
|
|
|
|
|
|
.button--fixed-right-top {
|
|
|
|
position: fixed;
|
|
|
|
right: $space-small;
|
|
|
|
top: $space-small;
|
|
|
|
}
|