Moved all styling of CardComponent to inline classes and PrimeVue the…

…ming
GEWIS · Dec 24, 2023 · 812a93e · 812a93e
1 parent 93f7fdd
commit 812a93e
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 46 deletions.
diff --git a/src/components/CardComponent.vue b/src/components/CardComponent.vue
@@ -1,11 +1,18 @@
 <template>
-  <Panel :header="header.toUpperCase()" class="card">
+  <Panel :header="header.toUpperCase()" class="text-primary">
     <template #icons>
       <slot name="topAction" />
     </template>
     <slot />
     <template v-if="action" #footer>
-      <Button severity="secondary" id="bottom-left-button" @click="handleClick">{{ action.toUpperCase() }}</Button>
+      <Button
+        severity="secondary"
+        id="bottom-left-button"
+        @click="handleClick"
+        class="w-full text-primary surface-100 border-none px-3 py-3 font-normal"
+      >
+        {{ action.toUpperCase() }}
+      </Button>
     </template>
   </Panel>
 </template>
@@ -46,43 +53,6 @@ const handleClick = () => {
 };
 </script>
 
-<style scoped>
-.card {
-  position: relative;
-}
-#bottom-left-button {
-  width: 100%;
-  color: #d40000!important;
-  background-color: #f2f2f2;
-  padding: 1rem 1.25rem;
-  font-family: Lato,Arial,sans-serif!important;
-  font-weight: 400;
-  border: none #dee2e6;
-}
-
-:deep(.p-panel-header) {
-  color: #d40000!important;
-  font-family: Lato,Arial,sans-serif!important;
-  font-weight: 400;
-  padding-top: 0!important;
-  padding-bottom: 0!important;
-  background-color: #f8f8f8!important;
-}
-
-:deep(.p-panel-content) {
-  background-color: #f8f8f8!important;
-  padding: 1rem 2rem!important;
-}
-
-:deep(.p-panel-footer) {
-  padding: 0!important;
-}
-
-.card {
-  color: #d40000!important;
-}
-
-:deep(.p-panel-header .p-panel-title){
-  padding: 1.25rem 0;
-}
+<style scoped lang="scss">
 </style>
+
diff --git a/src/styles/primevue-base/components/panel/_panel.scss b/src/styles/primevue-base/components/panel/_panel.scss
@@ -9,6 +9,7 @@
 
         .p-panel-title {
             font-weight: $panelHeaderFontWeight;
+            padding: $panelTitlePadding;
         }
 
         .p-panel-header-icon {
@@ -28,7 +29,7 @@
         background: $panelContentBg;
         color: $panelContentTextColor;
         border-top: 0 none;
-        
+
         &:last-child {
             border-bottom-right-radius: $borderRadius;
             border-bottom-left-radius: $borderRadius;

diff --git a/src/styles/themes/sudosos-light/_variables_light.scss b/src/styles/themes/sudosos-light/_variables_light.scss
@@ -349,9 +349,10 @@ $panelHeaderBorderColor: $shade300 !default;
 $panelHeaderBorder:1px solid $shade300 !default;
 $panelHeaderBg:$shade100 !default;
 $panelHeaderTextColor:$primaryColor !default;
-$panelHeaderFontWeight:600 !default;
-$panelHeaderPadding:1rem 1.25rem !default;
+$panelHeaderFontWeight:400 !default;
+$panelHeaderPadding:0 1.25rem !default;
 $panelToggleableHeaderPadding:.5rem 1.25rem !default;
+$panelTitlePadding: 1.25rem 0 !default;
 
 $panelHeaderHoverBg:$shade200 !default;
 $panelHeaderHoverBorderColor:$shade300 !default;
@@ -362,12 +363,12 @@ $panelContentBorder:1px solid $shade300 !default;
 $panelContentBg:$shade100 !default;
 $panelContentEvenRowBg:rgba(0,0,0,.05) !default;
 $panelContentTextColor:$shade900 !default;
-$panelContentPadding:1.25rem !default;
+$panelContentPadding:1rem 2rem !default;
 
 $panelFooterBorder:1px solid $shade300 !default;
 $panelFooterBg:$shade100 !default;
 $panelFooterTextColor:$shade900 !default;
-$panelFooterPadding:.5rem 1.25rem !default;
+$panelFooterPadding:0 !default;
 
 //accordion
 $accordionSpacing:0 !default;