Press n or j to go to the next uncovered block, b, p or k for the previous block.
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 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | <template>
<base-button v-bind="{ ...$props }" class="--button-icon">
<span
:class="{
'force-filled': filled === true,
'force-outlined': filled === false,
icon: true,
'material-icons': true,
}"
>
<slot></slot>
</span>
</base-button>
</template>
<script>
import BaseButton from '~/components/BaseButton.vue'
export default {
components: { BaseButton },
extends: BaseButton,
}
</script>
<style lang="stylus" scoped>
//
//Definitions
//
fontstack-filled = 'Material Icons', sans-serif
fontstack-outlined = 'Material Icons Outlined', sans-serif
//
//Positioning
//
.--button-icon
display inline-flex
align-items center
justify-content center
//
//Sizing
//
.small
font-size: 1em
//
//Spacing
//
.--button-icon
padding 0.5em
.small
padding: 0.1em
//
//Decoration
//
//
//Colors
//
.--button-icon
color inherit
.dangerous
color var(--red)
[disabled]
opacity 0.5
//
//Typography
//
.icon
font-family fontstack-outlined
.icon.force-filled
font-family fontstack-filled
//
//State
//
.--button-icon:hover, .--button-icon:focus
&:not([disabled]) .icon:not(.force-outlined)
font-family fontstack-filled
.icon[class^=force-]
color var(--blue)
</style>
|