Przeglądaj źródła

:sparkles: aspectBar styles and added #TODO add progress color based on :class

tags/0.0.2
K Rob 3 lat temu
rodzic
commit
44034fca33
1 zmienionych plików z 17 dodań i 3 usunięć
  1. 17
    3
      frontend/src/components/AspectBar.vue

+ 17
- 3
frontend/src/components/AspectBar.vue Wyświetl plik

1
 <template lang="pug">
1
 <template lang="pug">
2
 figure.w-flex.column
2
 figure.w-flex.column
3
     figcaption.w-flex.xs12.justify-space-between.align-center
3
     figcaption.w-flex.xs12.justify-space-between.align-center
4
-        p(v-for="label in labels" :key="label").text-upper {{ label }}
5
-    w-progress(v-model="percentage" size="0.5em" round).mt4
4
+        p(v-for="(label, index) in labels" :key="label" :class="{ 'main': index === 1 }")  {{ label }}
5
+    w-progress(v-model="percentage" size="0.5em" round).mb7
6
 </template>
6
 </template>
7
 
7
 
8
 <script>
8
 <script>
22
 }
22
 }
23
 </script>
23
 </script>
24
 <style lang="sass">
24
 <style lang="sass">
25
-   
25
+    figure
26
+        figcaption
27
+            font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif
28
+            text-transform: capitalize
29
+            .main
30
+                color: #4D9127
31
+                font-weight: bold
32
+                text-transform: uppercase
33
+
34
+
35
+        .w-progress
36
+            background-color: #4C5264
37
+            .w-progress__progress
38
+                color: #4D9127
39
+        
26
 </style>
40
 </style>

Ładowanie…
Anuluj
Zapisz