Skip to content

Commit c639eb8

Browse files
woothuwoothu
committed
refactor: remplace variant prop with color
1 parent 26d30c2 commit c639eb8

28 files changed

+800
-810
lines changed

‎src/views/Dashboard.vue‎

Lines changed: 42 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,12 @@
99
<div class="small text-muted">November 2017</div>
1010
</CCol>
1111
<CCol sm="7" class="d-none d-md-block">
12-
<CButton variant="primary" class="float-right">
12+
<CButton color="primary" class="float-right">
1313
<i class="cui-cloud-download"></i>
1414
</CButton>
1515
<CButtonGroup class="float-right mr-3">
1616
<CButton
17-
variant="outline-secondary"
17+
color="outline-secondary"
1818
v-for="(value, key) in ['Day', 'Month', 'Year']"
1919
:key="key"
2020
class="mx-0"
@@ -36,7 +36,7 @@
3636
<CProgress
3737
class="progress-xs mt-2"
3838
:precision="1"
39-
variant="success"
39+
color="success"
4040
:value="40"
4141
/>
4242
</CCol>
@@ -46,7 +46,7 @@
4646
<CProgress
4747
class="progress-xs mt-2"
4848
:precision="1"
49-
variant="info"
49+
color="info"
5050
:value="20"
5151
/>
5252
</CCol>
@@ -56,7 +56,7 @@
5656
<CProgress
5757
class="progress-xs mt-2"
5858
:precision="1"
59-
variant="warning"
59+
color="warning"
6060
:value="60"
6161
/>
6262
</CCol>
@@ -66,7 +66,7 @@
6666
<CProgress
6767
class="progress-xs mt-2"
6868
:precision="1"
69-
variant="danger"
69+
color="danger"
7070
:value="80"
7171
/>
7272
</CCol>
@@ -90,13 +90,13 @@
9090
<CCol sm="12" lg="6">
9191
<CRow>
9292
<CCol sm="6">
93-
<CCallout variant="info">
93+
<CCallout color="info">
9494
<small class="text-muted">New Clients</small><br>
9595
<strong class="h4">9,123</strong>
9696
</CCallout>
9797
</CCol>
9898
<CCol sm="6">
99-
<CCallout variant="danger">
99+
<CCallout color="danger">
100100
<small class="text-muted">Recurring Clients</small><br>
101101
<strong class="h4">22,643</strong>
102102
</CCallout>
@@ -112,12 +112,12 @@
112112
<div class="progress-group-bars">
113113
<CProgress
114114
class="progress-xs"
115-
variant="info"
115+
color="info"
116116
:value="34"
117117
/>
118118
<CProgress
119119
class="progress-xs"
120-
variant="danger"
120+
color="danger"
121121
:value="78"
122122
/>
123123
</div>
@@ -132,12 +132,12 @@
132132
<CProgress
133133
class="progress-xs"
134134
:value="56"
135-
variant="info"
135+
color="info"
136136
/>
137137
<CProgress
138138
class="progress-xs"
139139
:value="94"
140-
variant="danger"
140+
color="danger"
141141
/>
142142
</div>
143143
</div>
@@ -151,12 +151,12 @@
151151
<CProgress
152152
class="progress-xs"
153153
:value="12"
154-
variant="info"
154+
color="info"
155155
/>
156156
<CProgress
157157
class="progress-xs"
158158
:value="67"
159-
variant="danger"
159+
color="danger"
160160
/>
161161
</div>
162162
</div>
@@ -170,12 +170,12 @@
170170
<CProgress
171171
class="progress-xs"
172172
:value="43"
173-
variant="info"
173+
color="info"
174174
/>
175175
<CProgress
176176
class="progress-xs"
177177
:value="91"
178-
variant="danger"
178+
color="danger"
179179
/>
180180
</div>
181181
</div>
@@ -189,12 +189,12 @@
189189
<CProgress
190190
class="progress-xs"
191191
:value="22"
192-
variant="info"
192+
color="info"
193193
/>
194194
<CProgress
195195
class="progress-xs"
196196
:value="73"
197-
variant="danger"
197+
color="danger"
198198
/>
199199
</div>
200200
</div>
@@ -208,12 +208,12 @@
208208
<CProgress
209209
class="progress-xs"
210210
:value="53"
211-
variant="info"
211+
color="info"
212212
/>
213213
<CProgress
214214
class="progress-xs"
215215
:value="82"
216-
variant="danger"
216+
color="danger"
217217
/>
218218
</div>
219219
</div>
@@ -227,35 +227,35 @@
227227
<CProgress
228228
class="progress-xs"
229229
:value="9"
230-
variant="info"
230+
color="info"
231231
/>
232232
<CProgress
233233
class="progress-xs"
234234
:value="69"
235-
variant="danger"
235+
color="danger"
236236
/>
237237
</div>
238238
</div>
239239
<div class="legend text-center">
240240
<small>
241-
<sup><CBadge pill variant="info">&nbsp;</CBadge></sup>
241+
<sup><CBadge pill color="info">&nbsp;</CBadge></sup>
242242
New clients
243243
&nbsp;&nbsp;
244-
<sup><CBadge pill variant="danger">&nbsp;</CBadge></sup>
244+
<sup><CBadge pill color="danger">&nbsp;</CBadge></sup>
245245
Recurring clients
246246
</small>
247247
</div>
248248
</CCol>
249249
<CCol sm="12" lg="6">
250250
<CRow>
251251
<CCol sm="6">
252-
<CCallout variant="warning">
252+
<CCallout color="warning">
253253
<small class="text-muted">Pageviews</small><br>
254254
<strong class="h4">78,623</strong>
255255
</CCallout>
256256
</CCol>
257257
<CCol sm="6">
258-
<CCallout variant="success">
258+
<CCallout color="success">
259259
<small class="text-muted">Organic</small><br>
260260
<strong class="h4">49,123</strong>
261261
</CCallout>
@@ -273,7 +273,7 @@
273273
<CProgress
274274
class="progress-xs"
275275
:value="43"
276-
variant="warning"
276+
color="warning"
277277
/>
278278
</div>
279279
</div>
@@ -287,7 +287,7 @@
287287
<CProgress
288288
class="progress-xs"
289289
:value="37"
290-
variant="warning"
290+
color="warning"
291291
/>
292292
</div>
293293
</div>
@@ -303,7 +303,7 @@
303303
<CProgress
304304
class="progress-xs"
305305
:value="56"
306-
variant="success"
306+
color="success"
307307
/>
308308
</div>
309309
</div>
@@ -323,7 +323,7 @@
323323
<CProgress
324324
class="progress-xs"
325325
:value="15"
326-
variant="success"
326+
color="success"
327327
/>
328328
</div>
329329
</div>
@@ -343,7 +343,7 @@
343343
<CProgress
344344
class="progress-xs"
345345
:value="11"
346-
variant="success"
346+
color="success"
347347
/>
348348
</div>
349349
</div>
@@ -363,12 +363,12 @@
363363
<CProgress
364364
class="progress-xs"
365365
:value="8"
366-
variant="success"
366+
color="success"
367367
/>
368368
</div>
369369
</div>
370370
<div class="divider text-center">
371-
<CButton variant="link" size="sm" class="text-muted">
371+
<CButton color="link" size="sm" class="text-muted">
372372
<i class="cui-options"></i>
373373
</CButton>
374374
</div>
@@ -381,7 +381,7 @@
381381
hover
382382
:items="tableItems"
383383
:fields="tableFields"
384-
head-variant="light"
384+
head-color="light"
385385
no-sorting
386386
>
387387
<td slot="avatar" class="text-center" slot-scope="{item}">
@@ -424,7 +424,7 @@
424424
<CProgress
425425
class="progress-xs"
426426
v-model="item.usage.value"
427-
:variant="variant(item.usage.value)"
427+
:color="color(item.usage.value)"
428428
/>
429429
</td>
430430
<td
@@ -524,18 +524,18 @@ export default {
524524
}
525525
},
526526
methods: {
527-
variant (value) {
528-
let $variant
527+
color (value) {
528+
let $color
529529
if (value <= 25) {
530-
$variant = 'info'
530+
$color = 'info'
531531
} else if (value > 25 && value <= 50) {
532-
$variant = 'success'
532+
$color = 'success'
533533
} else if (value > 50 && value <= 75) {
534-
$variant = 'warning'
534+
$color = 'warning'
535535
} else if (value > 75 && value <= 100) {
536-
$variant = 'danger'
536+
$color = 'danger'
537537
}
538-
return $variant
538+
return $color
539539
}
540540
}
541541
}

‎src/views/base/Cards.vue‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
class="float-right"
3939
size="sm"
4040
shape="pill"
41-
variant="info"
41+
color="info"
4242
data-on="On"
4343
data-off="Off"
4444
:checked="true"
@@ -53,7 +53,7 @@
5353
<CCard>
5454
<CCardHeader>
5555
Card with label
56-
<CBadge variant="success" class="float-right">Success</CBadge>
56+
<CBadge color="success" class="float-right">Success</CBadge>
5757
</CCardHeader>
5858
<CCardBody>
5959
{{loremIpsum}}
@@ -64,7 +64,7 @@
6464
<CCard>
6565
<CCardHeader>
6666
Card with label
67-
<CBadge pill variant="danger" class="float-right">42</CBadge>
67+
<CBadge pill color="danger" class="float-right">42</CBadge>
6868
</CCardHeader>
6969
<CCardBody>
7070
{{loremIpsum}}
@@ -76,38 +76,38 @@
7676
<CCol sm="6" md="4">
7777
<CCard
7878
header="Card outline primary"
79-
border-variant="primary"
79+
border-color="primary"
8080
:body-html="loremIpsum"
8181
/>
8282
</CCol>
8383
<CCol sm="6" md="4">
8484
<CCard
8585
header="Card outline secondary"
86-
border-variant="secondary"
86+
border-color="secondary"
8787
:body-html="loremIpsum"
8888
/>
8989
</CCol>
9090
<CCol sm="6" md="4">
9191
<CCard
9292
header="Card outline success"
93-
border-variant="success"
93+
border-color="success"
9494
body-wrapper
9595
>
9696
{{loremIpsum}}
9797
</CCard>
9898
</CCol>
9999
<CCol sm="6" md="4">
100-
<CCard header-html="Card outline info" border-variant="info" body-wrapper>
100+
<CCard header-html="Card outline info" border-color="info" body-wrapper>
101101
{{loremIpsum}}
102102
</CCard>
103103
</CCol>
104104
<CCol sm="6" md="4">
105-
<CCard header-html="Card outline warning" border-variant="warning" body-wrapper>
105+
<CCard header-html="Card outline warning" border-color="warning" body-wrapper>
106106
{{loremIpsum}}
107107
</CCard>
108108
</CCol>
109109
<CCol sm="6" md="4">
110-
<CCard header-html="Card outline danger" border-variant="danger" body-wrapper>
110+
<CCard header-html="Card outline danger" border-color="danger" body-wrapper>
111111
{{loremIpsum}}
112112
</CCard>
113113
</CCol>

‎src/views/base/Collapses.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,13 @@
1717
</div>
1818
</CCardHeader>
1919
<CCardBody>
20-
<CButton id="collapse1" variant="primary">
20+
<CButton id="collapse1" color="primary">
2121
Toggle Collapse
2222
</CButton>
2323
<CCollapse toggler="collapse1" class="mt-2">
2424
<CCard body-wrapper>
2525
<p class="card-text">Collapse contents Here</p>
26-
<CButton id="collapse2" size="sm" variant="secondary">
26+
<CButton id="collapse2" size="sm" color="secondary">
2727
Toggle Inner Collapse
2828
</CButton>
2929
<CCollapse toggler="collapse2" class="mt-2">

0 commit comments

Comments
 (0)