style(CtaComponent): add quaternary style

Schroedinger-Hat · Nov 26, 2023 · 53c0197 · 53c0197
1 parent 21f17e5
commit 53c0197
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/src/components/buttons/CtaComponent.vue b/src/components/buttons/CtaComponent.vue
@@ -5,6 +5,7 @@ import { useCtaComponent } from '@/functions/useCtaComponent'
 defineProps<{
   secondary?: boolean
   tertiary?: boolean
+  quaternary?: boolean
 }>()
 
 const { component, bindings } = useCtaComponent(useAttrs())
@@ -16,9 +17,10 @@ const { component, bindings } = useCtaComponent(useAttrs())
     v-bind="bindings"
     class="cta"
     :class="{
-      'py-1 px-1.5 rounded-1': secondary || tertiary,
+      'py-1 px-1.5 rounded-1': secondary || tertiary || quaternary,
       'secondary': secondary,
       'tertiary': tertiary,
+      'quaternary': quaternary,
     }"
   >
     <slot />
@@ -68,6 +70,13 @@ const { component, bindings } = useCtaComponent(useAttrs())
   }
 }
 
+.quaternary {
+  border: none;
+  background-color: $nord10 !important;
+  color: #fff !important;
+  transition: transform 0.3s ease-in;
+}
+
 .#{$dark-mode-class} {
   .cta {
     border: none;

diff --git a/src/components/events/EventForm.vue b/src/components/events/EventForm.vue
@@ -43,7 +43,7 @@ const options = readonly({
         {{ month }}
       </option>
     </EventFormSelect>
-    <CtaComponent tertiary @click.prevent="$emit('toggleEvents')">
+    <CtaComponent quaternary @click.prevent="$emit('toggleEvents')">
       {{ hidePastEvents
         ? $t('page.events.copy.form.items.pastEvents.show')
         : $t('page.events.copy.form.items.pastEvents.hide') }}