style: improve spaces style

renatomoor · Aug 27, 2022 · 44bc195 · 44bc195
1 parent 2c25770
commit 44bc195
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 15 deletions.
diff --git a/src/components/ColorsGrid.vue b/src/components/ColorsGrid.vue
@@ -1,5 +1,4 @@
 <script setup>
-
 const props = defineProps({
   colors: {
     type: Object,
@@ -19,7 +18,6 @@ const props = defineProps({
 
 <template>
   <div class="color-section">
-    <h3>{{ title}}</h3>
     <div class="colors-container">
       <div v-for="(color, key) in colors">
         <div class="colors-container__wrapper">
@@ -56,7 +54,6 @@ h3 {
 
 }
 
-
 .colors-container {
   display: grid;
   justify-content: center;

diff --git a/src/components/SpacesFoundation.vue b/src/components/SpacesFoundation.vue
@@ -9,35 +9,68 @@ const props = defineProps({
 
 
 <template>
-  <h2 class="title">
-    Spaces
-  </h2>
   <div class="spaces">
-    <div v-for="(space, key) in spaces">
+    <div class="spaces__wrapper" v-for="(space, key) in spaces">
+      <div class="spaces__content">
+        <p class="key">{{ key }}</p>
+        <p class="space"> {{ space }} </p>
+      </div>
       <div class="spaces__space" :style="`width: ${space}`"/>
-        <div>{{ key }}</div>
     </div>
   </div>
 </template>
 
 
 <style scoped>
+@import "../assets/main.css";
+
 .title {
   text-align: center;
 }
 
+p {
+  line-height: 1rem;
+}
+
+.key {
+  font-size: 1.1rem;
+}
+
+.space {
+  font-weight: lighter;
+}
+
 .spaces {
-  padding: 5rem;
-  margin-left: auto;
-  margin-right: auto;
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  gap: 1.5rem;
 }
 
-.spaces__space {
+.spaces__wrapper {
+  border: #dcdcdc solid 1px;
+  display: flex;
+  gap: 2rem;
   border-radius: 0.75rem;
-  background-color: gray;
-  margin-bottom: 1rem;
+  padding: 0.5rem;
+}
+
+.spaces__content {
+  align-self: center;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  min-width: 5rem;
+}
+
+.space {
+  font-weight: 100;
+  color: #64748BFF;
+}
+
+.spaces__space {
+  align-self: center;
   height: 5rem;
+  background-color: #818cf81a;
+  background-size: 7.07px 7.07px;
+  background-image: linear-gradient(135deg,#6366f180 10%,transparent 0,transparent 50%,#6366f180 0,#6366f180 60%,transparent 0,transparent);
 }
 </style>