remanso-space/remanso
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💄 (cards) less border radius

Browse Source
This commit is contained in:
Julien Calixte
2023-07-02 22:23:47 +02:00
parent 492eb5ed3b
commit 4434060342
1 changed files with 11 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/modules/card/components/FlipCard.vue
View File

@@ -8,8 +8,12 @@
<div class="references" v-html="card.references"></div> <div class="references" v-html="card.references"></div>
<hr /> <hr />
<div class="buttons is-centered"> <div class="buttons is-centered">
<div class="button is-danger" @click.stop="success">failed</div> <div class="button is-warning is-light" @click.stop="success">
<div class="button is-success" @click.stop="fail">got it</div> failed
</div>
<div class="button is-success is-light" @click.stop="fail">
got it
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -40,6 +44,8 @@ export default defineComponent({
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
$border-radius: 0.5rem;
.flip-card { .flip-card {
display: flex; display: flex;
background-color: transparent; background-color: transparent;
@@ -55,7 +61,7 @@ export default defineComponent({
position: relative; position: relative;
transition: cubic-bezier(0.39, 0.575, 0.565, 1) 0.4s; transition: cubic-bezier(0.39, 0.575, 0.565, 1) 0.4s;
transform-style: preserve-3d; transform-style: preserve-3d;
border-radius: 1rem; border-radius: $border-radius;
} }
&.flipped .flip-card-inner { &.flipped .flip-card-inner {
@@ -70,10 +76,10 @@ export default defineComponent({
.flip-card-content { .flip-card-content {
width: 100%; width: 100%;
background-color: #ebebeb; background-color: #ede4e0;
color: var(--font-color); color: var(--font-color);
padding: 1rem; padding: 1rem;
border-radius: 1rem; border-radius: $border-radius;
} }
.flip-card-back { .flip-card-back {