Spaces:
Sleeping
Sleeping
File size: 1,197 Bytes
7aec436 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<script>
import {ACCENT_COLOR} from '../packager/brand';
export let secondary;
export let dangerous;
export let text;
const getColor = () => {
if (secondary) return '#0FBD8C';
if (dangerous) return '#FF8C1A';
return ACCENT_COLOR;
};
</script>
<style>
button {
position: relative;
font-family: inherit;
font-size: 14px;
color: white;
border: none;
padding: 0.5rem 1rem;
margin: 0;
border-radius: 4px;
overflow: hidden;
cursor: pointer;
font-family: inherit;
font-weight: bold;
}
.text {
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 10;
}
/* Because we want color to be settable from brand.js, it becomes complicated to make it dim while active */
.dimmer {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.25);
}
button:active .dimmer {
display: block;
}
</style>
<button on:click style:background-color={getColor()}>
<div class="dimmer"></div>
<div class="text">{text}</div>
</button>
|