webfussel/wf4
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ADD: optimize css

Browse source
This commit is contained in:
webfussel 2024-05-24 09:23:49 +02:00
parent 14866f81f2
commit a59d465a2d
5 changed files with 267 additions and 266 deletions
Download patch file Download diff file Expand all files Collapse all files

25
components/Button/Button.vue → components/Button.vue
View file

@ -1,5 +1,3 @@
<style scoped src="./Button.css"/>
<template>
<component :is="type" v-bind="actualProps()" class="Button">
{{ label }}
@ -27,3 +25,26 @@ const actualProps = () => {
}
}
</script>
<style>
.Button {
all: unset;
transition: 250ms;
background: var(--color-orange);
color: var(--color-black);
cursor: pointer;
padding: 1rem 1.5rem;
outline: 3px solid var(--color-black);
box-shadow: 0 0 0 0 var(--color-orange);
border-radius: 99999px;
text-align: center;
&:hover {
box-shadow: 0 0 0 6px var(--color-orange);
}
&.cta {
font-size: clamp(1rem, 2vw, 1.5rem);
}
}
</style>

20
components/Button/Button.css
View file

@ -1,20 +0,0 @@
.Button {
all: unset;
transition: 250ms;
background: var(--color-orange);
color: var(--color-black);
cursor: pointer;
padding: 1rem 1.5rem;
outline: 3px solid var(--color-black);
box-shadow: 0 0 0 0 var(--color-orange);
border-radius: 99999px;
text-align: center;
&:hover {
box-shadow: 0 0 0 6px var(--color-orange);
}
&.cta {
font-size: clamp(1rem, 2vw, 1.5rem);
}
}