Browse Source

alerts amended in text & background colour

master
JannekeDL 5 years ago
parent
commit
168d547ffb
2 changed files with 35 additions and 19 deletions
  1. 24
    8
      src/App.vue
  2. 11
    11
      src/components/shared/alert.vue

+ 24
- 8
src/App.vue View File

54
   fill: #60cbeb;
54
   fill: #60cbeb;
55
   color: #60cbeb;
55
   color: #60cbeb;
56
 }
56
 }
57
+.mySuccess {
58
+  border-color: rgba(2, 184, 117, 0.5);
59
+  background-color: rgba(2, 184, 117, 0.5);
60
+}
61
+.myInfo {
62
+  border-color: rgba(23, 162, 184, 0.5);
63
+  background-color: rgba(23, 162, 184, 0.5);
64
+}
65
+.myWarning {
66
+  border-color: rgba(240, 173, 78, 0.5);
67
+  background-color: rgba(240, 173, 78, 0.5);
68
+}
69
+.myError {
70
+  border-color: rgba(217, 83, 79, 0.5);
71
+  background-color: rgba(217, 83, 79, 0.5);
72
+}
57
 a {
73
 a {
58
   cursor: pointer;
74
   cursor: pointer;
59
 }
75
 }
70
 .cursor-pointer {
86
 .cursor-pointer {
71
   cursor: pointer;
87
   cursor: pointer;
72
 }
88
 }
73
-    body,
74
-    html {
75
-        font-size: 13.7px !important;
76
-        color: #666;
77
-        font-family: "Roboto", sans-serif;
78
-        height: 100%;
79
-        margin: 0;
80
-    }
89
+body,
90
+html {
91
+  font-size: 13.7px !important;
92
+  color: #666;
93
+  font-family: "Roboto", sans-serif;
94
+  height: 100%;
95
+  margin: 0;
96
+}
81
 </style>
97
 </style>
82
 
98
 
83
 <style scoped>
99
 <style scoped>

+ 11
- 11
src/components/shared/alert.vue View File

1
 <template>
1
 <template>
2
   <div class="container">
2
   <div class="container">
3
     <!-- eslint-disable max-len -->
3
     <!-- eslint-disable max-len -->
4
-    <div class="alert alert-success" v-if="type === 'SUCCESS'">
5
-      <eva-icon name="checkmark-outline"></eva-icon>
6
-      <strong>{{ text }}</strong>
4
+    <div class="alert mySuccess" v-if="type === 'SUCCESS'">
5
+      <eva-icon name="checkmark-outline" style="margin: 0px 20px"></eva-icon>
6
+      <strong class="color-black">{{ text }}</strong>
7
     </div>
7
     </div>
8
-    <div class="alert alert-info" v-if="type === 'INFO'">
9
-      <eva-icon name="info-outline"></eva-icon>
10
-      <strong>{{ text }}</strong>
8
+    <div class="alert myInfo" v-if="type === 'INFO'">
9
+      <eva-icon name="info-outline" style="margin: 0px 20px"></eva-icon>
10
+      <strong class="color-black">{{ text }}</strong>
11
     </div>
11
     </div>
12
-    <div class="alert alert-warning" v-if="type === 'WARNING'">
13
-      <eva-icon name="alert-circle-outline"></eva-icon>
12
+    <div class="alert myWarning" v-if="type === 'WARNING'">
13
+      <eva-icon name="alert-circle-outline" style="margin: 0px 20px"></eva-icon>
14
       <strong class="color-black">{{ text }}</strong>
14
       <strong class="color-black">{{ text }}</strong>
15
     </div>
15
     </div>
16
-    <div class="alert alert-danger" v-if="type === 'ERROR'">
17
-      <eva-icon name="slash-outline"></eva-icon>
18
-      <strong>{{ text }}</strong>
16
+    <div class="alert myError" v-if="type === 'ERROR'">
17
+      <eva-icon name="slash-outline" style="margin: 0px 20px"></eva-icon>
18
+      <strong class="color-black">{{ text }}</strong>
19
     </div>
19
     </div>
20
   </div>
20
   </div>
21
 </template>
21
 </template>

Loading…
Cancel
Save