Skip to content

Commit ba0664a

Browse files
woothuwoothu
committed
feat: change styles of users, themes and icons sections to version 3
1 parent 659473b commit ba0664a

File tree

10 files changed

+1880
-1806
lines changed

10 files changed

+1880
-1806
lines changed

‎src/views/icons/CoreUIIcons.vue

Lines changed: 112 additions & 106 deletions
Large diffs are not rendered by default.

‎src/views/icons/Flags.vue

Lines changed: 508 additions & 504 deletions
Large diffs are not rendered by default.

‎src/views/icons/FontAwesome.vue

Lines changed: 886 additions & 886 deletions
Large diffs are not rendered by default.

‎src/views/icons/SimpleLineIcons.vue

Lines changed: 186 additions & 186 deletions
Large diffs are not rendered by default.

‎src/views/theme/ColorTheme.vue

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
<template>
2-
<CCol xl="2" md="4" sm="6" xs="12" class="mb-4">
3-
<div :class="[classObj, color]" :style="{ paddingTop: '75%' }"></div>
2+
<CCol xl="2" md="4" sm="6" xs="12" class="c-mb-4">
3+
<div
4+
:class="['c-theme-color c-w-75 c-rounded c-mb-3', color]"
5+
:style="{ paddingTop: '75%' }"
6+
></div>
47
<slot></slot>
58
<ColorView/>
69
</CCol>
@@ -12,13 +15,9 @@ export default {
1215
name: 'ColorTheme',
1316
components: { ColorView },
1417
props: {
15-
classObj: {
16-
type: String,
17-
default: 'theme-color w-75 rounded mb-3'
18-
},
1918
color: {
2019
type: String,
21-
default: 'bg-secondary'
20+
default: 'c-bg-secondary'
2221
}
2322
}
2423
}

‎src/views/theme/ColorView.vue

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<template>
2-
<table class="w-100">
2+
<table class="c-w-100">
33
<tbody>
44
<tr>
5-
<td class="text-muted">HEX:</td>
6-
<td class="font-weight-bold">{{this.hexColor}}</td>
5+
<td class="c-text-muted">HEX:</td>
6+
<td class="c-font-weight-bold">{{this.hexColor}}</td>
77
</tr>
88
<tr>
9-
<td class="text-muted">RGB:</td>
10-
<td class="font-weight-bold">{{this.bgColor}}</td>
9+
<td class="c-text-muted">RGB:</td>
10+
<td class="c-font-weight-bold">{{this.bgColor}}</td>
1111
</tr>
1212
</tbody>
1313
</table>
@@ -17,7 +17,7 @@
1717
import { rgbToHex } from '@coreui/coreui/dist/js/coreui-utilities'
1818
export default {
1919
name: 'ColorView',
20-
data: function () {
20+
data () {
2121
return {
2222
bgColor: 'rgb(255, 255, 255)'
2323
}
@@ -39,4 +39,3 @@ export default {
3939
}
4040
}
4141
</script>
42-

‎src/views/theme/Colors.vue

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
<template>
2-
<div class="animated fadeIn">
2+
<div class="c-animated c-fadeIn">
33
<CCard >
44
<CCardHeader>
55
<i class="icon-drop"></i> Theme colors
66
</CCardHeader>
77
<CCardBody>
88
<CRow>
9-
<ColorTheme color="bg-primary">
9+
<ColorTheme color="c-bg-primary">
1010
<h6>Brand Primary Color</h6>
1111
</ColorTheme>
12-
<ColorTheme color="bg-secondary"><h6>Brand Secondary Color</h6></ColorTheme>
13-
<ColorTheme color="bg-success"><h6>Brand Success Color</h6></ColorTheme>
14-
<ColorTheme color="bg-danger"><h6>Brand Danger Color</h6></ColorTheme>
15-
<ColorTheme color="bg-warning"><h6>Brand Warning Color</h6></ColorTheme>
16-
<ColorTheme color="bg-info"><h6>Brand Info Color</h6></ColorTheme>
17-
<ColorTheme color="bg-light"><h6>Brand Light Color</h6></ColorTheme>
18-
<ColorTheme color="bg-dark"><h6>Brand Dark Color</h6></ColorTheme>
12+
<ColorTheme color="c-bg-secondary"><h6>Brand Secondary Color</h6></ColorTheme>
13+
<ColorTheme color="c-bg-success"><h6>Brand Success Color</h6></ColorTheme>
14+
<ColorTheme color="c-bg-danger"><h6>Brand Danger Color</h6></ColorTheme>
15+
<ColorTheme color="c-bg-warning"><h6>Brand Warning Color</h6></ColorTheme>
16+
<ColorTheme color="c-bg-info"><h6>Brand Info Color</h6></ColorTheme>
17+
<ColorTheme color="c-bg-light"><h6>Brand Light Color</h6></ColorTheme>
18+
<ColorTheme color="c-bg-dark"><h6>Brand Dark Color</h6></ColorTheme>
1919
</CRow>
2020
</CCardBody>
2121
</CCard>
@@ -25,15 +25,15 @@
2525
</CCardHeader>
2626
<CCardBody>
2727
<CRow>
28-
<ColorTheme color="bg-gray-100"><h6>Brand 100 Color</h6></ColorTheme>
29-
<ColorTheme color="bg-gray-200"><h6>Brand 200 Color</h6></ColorTheme>
30-
<ColorTheme color="bg-gray-300"><h6>Brand 300 Color</h6></ColorTheme>
31-
<ColorTheme color="bg-gray-400"><h6>Brand 400 Color</h6></ColorTheme>
32-
<ColorTheme color="bg-gray-500"><h6>Brand 500 Color</h6></ColorTheme>
33-
<ColorTheme color="bg-gray-600"><h6>Brand 600 Color</h6></ColorTheme>
34-
<ColorTheme color="bg-gray-700"><h6>Brand 700 Color</h6></ColorTheme>
35-
<ColorTheme color="bg-gray-800"><h6>Brand 800 Color</h6></ColorTheme>
36-
<ColorTheme color="bg-gray-900"><h6>Brand 900 Color</h6></ColorTheme>
28+
<ColorTheme color="c-bg-gray-100"><h6>Brand 100 Color</h6></ColorTheme>
29+
<ColorTheme color="c-bg-gray-200"><h6>Brand 200 Color</h6></ColorTheme>
30+
<ColorTheme color="c-bg-gray-300"><h6>Brand 300 Color</h6></ColorTheme>
31+
<ColorTheme color="c-bg-gray-400"><h6>Brand 400 Color</h6></ColorTheme>
32+
<ColorTheme color="c-bg-gray-500"><h6>Brand 500 Color</h6></ColorTheme>
33+
<ColorTheme color="c-bg-gray-600"><h6>Brand 600 Color</h6></ColorTheme>
34+
<ColorTheme color="c-bg-gray-700"><h6>Brand 700 Color</h6></ColorTheme>
35+
<ColorTheme color="c-bg-gray-800"><h6>Brand 800 Color</h6></ColorTheme>
36+
<ColorTheme color="c-bg-gray-900"><h6>Brand 900 Color</h6></ColorTheme>
3737
</CRow>
3838
</CCardBody>
3939
</CCard>
@@ -43,16 +43,16 @@
4343
</CCardHeader>
4444
<CCardBody>
4545
<CRow>
46-
<ColorTheme color="bg-blue"><h6>Brand Blue Color</h6></ColorTheme>
47-
<ColorTheme color="bg-indigo"><h6>Brand Indigo Color</h6></ColorTheme>
48-
<ColorTheme color="bg-purple"><h6>Brand Purple Color</h6></ColorTheme>
49-
<ColorTheme color="bg-pink"><h6>Brand Pink Color</h6></ColorTheme>
50-
<ColorTheme color="bg-red"><h6>Brand Red Color</h6></ColorTheme>
51-
<ColorTheme color="bg-orange"><h6>Brand Orange Color</h6></ColorTheme>
52-
<ColorTheme color="bg-yellow"><h6>Brand Yellow Color</h6></ColorTheme>
53-
<ColorTheme color="bg-green"><h6>Brand Green Color</h6></ColorTheme>
54-
<ColorTheme color="bg-teal"><h6>Brand Teal Color</h6></ColorTheme>
55-
<ColorTheme color="bg-cyan"><h6>Brand Cyan Color</h6></ColorTheme>
46+
<ColorTheme color="c-bg-blue"><h6>Brand Blue Color</h6></ColorTheme>
47+
<ColorTheme color="c-bg-indigo"><h6>Brand Indigo Color</h6></ColorTheme>
48+
<ColorTheme color="c-bg-purple"><h6>Brand Purple Color</h6></ColorTheme>
49+
<ColorTheme color="c-bg-pink"><h6>Brand Pink Color</h6></ColorTheme>
50+
<ColorTheme color="c-bg-red"><h6>Brand Red Color</h6></ColorTheme>
51+
<ColorTheme color="c-bg-orange"><h6>Brand Orange Color</h6></ColorTheme>
52+
<ColorTheme color="c-bg-yellow"><h6>Brand Yellow Color</h6></ColorTheme>
53+
<ColorTheme color="c-bg-green"><h6>Brand Green Color</h6></ColorTheme>
54+
<ColorTheme color="c-bg-teal"><h6>Brand Teal Color</h6></ColorTheme>
55+
<ColorTheme color="c-bg-cyan"><h6>Brand Cyan Color</h6></ColorTheme>
5656
</CRow>
5757
</CCardBody>
5858
</CCard>

0 commit comments

Comments
 (0)