Align sample cards with designs

MisRob · Sep 26, 2024 · dacae5d · dacae5d
1 parent 17ebf92
commit dacae5d
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 17 deletions.
diff --git a/docs/pages-components/DocsKCard.vue b/docs/pages-components/DocsKCard.vue
@@ -43,11 +43,11 @@
     </template>
     <template v-else-if="!hideFooter" #footer>
       <div class="footer-wrapper">
-        <div class="pills">
+        <div class="pills" :style="{ 'color': $themeTokens.annotation }">
           <span
             :style="{ 'background-color': $themePalette.grey.v_50 }"
           >
-            <KIcon icon="readSolid" :style="{ fontSize: '14px' }" />
+            <KIcon icon="readSolid" :style="{ fontSize: '13px', position: 'relative', top: '3px' }" />
             Read
           </span>
           <span
@@ -172,12 +172,13 @@
   }
 
   .pills {
-    margin-left: -6px;
+    margin-left: -4px;
 
     span {
       display: inline-block;
-      padding: 6px 8px;
-      margin: 6px;
+      padding: 4px 8px;
+      margin: 4px;
+      border-radius: 4px;
     }
   }
 

diff --git a/docs/pages/kcard.vue b/docs/pages/kcard.vue
@@ -254,7 +254,7 @@
               <KLabeledIcon icon="readSolid" label="Read" />
             </template>
             <template #footer>
-              <div class="pills">
+              <div class="pills" :style="{ 'color': $themeTokens.annotation }">
                 <span
                   :style="{ 'background-color': $themePalette.grey.v_50 }"
                 >
@@ -279,7 +279,7 @@
               <KLabeledIcon icon="readSolid" label="Read" />
             </template>
             <template #footer>
-              <div class="pills">
+              <div class="pills" :style="{ 'color': $themeTokens.annotation }">
                 <span
                   :style="{ 'background-color': $themePalette.grey.v_50 }"
                 >
@@ -718,12 +718,13 @@
 <style lang="scss" scoped>
 
   .pills {
-    margin-left: -6px;
+    margin-left: -4px;
 
     span {
       display: inline-block;
-      padding: 6px 8px;
-      margin: 6px;
+      padding: 4px 8px;
+      margin: 4px;
+      border-radius: 4px;
     }
   }
 

diff --git a/docs/pages/kcardgrid.vue b/docs/pages/kcardgrid.vue
@@ -259,7 +259,7 @@
               />
             </template>
             <template #footer>
-              <div class="pills">
+              <div class="pills" :style="{ 'color': $themeTokens.annotation }">
                 <span
                   v-for="(pill, i) in slicedPills"
                   :key="i"
@@ -321,7 +321,7 @@
               />
             </template>
             <template #footer>
-              <div class="pills">
+              <div class="pills" :style="{ 'color': $themeTokens.annotation }">
                 <span
                   v-for="(pill, i) in slicedPills"
                   :key="i"
@@ -449,11 +449,11 @@
             :prependTitle="`(${i})`"
           >
             <template #footer>
-              <div class="pills">
+              <div class="pills" :style="{ 'color': $themeTokens.annotation }">
                 <span
                   :style="{ 'background-color': $themePalette.grey.v_50 }"
                 >
-                  <KIcon icon="readSolid" :style="{ fontSize: '14px' }" />
+                  <KIcon icon="readSolid" :style="{ fontSize: '13px', position: 'relative', top: '3px' }" />
                   Read
                 </span>
                 <span
@@ -551,12 +551,13 @@
 <style lang="scss" scoped>
 
   .pills {
-    margin-left: -6px;
+    margin-left: -4px;
 
     span {
       display: inline-block;
-      padding: 6px 8px;
-      margin: 6px;
+      padding: 4px 8px;
+      margin: 4px;
+      border-radius: 4px;
     }
   }