Skip to content

Commit ebba81f

Browse files
woothuwoothu
committed
feat: change styles of base section to version 3
1 parent e005cd1 commit ebba81f

15 files changed

+493
-421
lines changed

‎src/views/base/Breadcrumbs.vue

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
2-
<div class="wrapper">
3-
<div class="animated fadeIn">
2+
<div class="c-wrapper">
3+
<div class="c-animated c-fadeIn">
44
<CRow>
55
<CCol col>
66
<CCard>
@@ -57,16 +57,16 @@ export default {
5757
items3: [{
5858
textHtml: 'Link',
5959
to: '#2',
60-
activeClass: 'bg-info p-1'
60+
activeClass: 'c-bg-info c-p-1'
6161
}, {
6262
textHtml: 'Active',
6363
to: '#3',
64-
activeClass: 'bg-warning p-1',
65-
addLinkClasses: 'bg-info p-1'
64+
activeClass: 'c-bg-warning c-p-1',
65+
addLinkClasses: 'c-bg-info c-p-1'
6666
},{
6767
textHtml: 'Classes',
6868
to: '#4',
69-
activeClass: 'bg-danger p-1',
69+
activeClass: 'c-bg-danger c-p-1',
7070
}]
7171
}
7272
}

‎src/views/base/Cards.vue

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="animated fadeIn">
2+
<div class="c-animated c-fadeIn">
33
<CRow>
44
<CCol sm="6" md="4">
55
<CCard headerHtml="Card title" :bodyHtml="loremIpsum"/>
@@ -18,7 +18,7 @@
1818
<CCardHeader>
1919
Card with switch
2020
<CSwitch
21-
class="float-right"
21+
class="c-float-right"
2222
size="sm"
2323
shape="pill"
2424
variant="info"
@@ -36,7 +36,7 @@
3636
<CCard>
3737
<CCardHeader>
3838
Card with label
39-
<CBadge variant="success" class="float-right">Success</CBadge>
39+
<CBadge variant="success" class="c-float-right">Success</CBadge>
4040
</CCardHeader>
4141
<CCardBody>
4242
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
@@ -47,7 +47,7 @@
4747
<CCard>
4848
<CCardHeader>
4949
Card with label
50-
<CBadge pill variant="danger" class="float-right">42</CBadge>
50+
<CBadge pill variant="danger" class="c-float-right">42</CBadge>
5151
</CCardHeader>
5252
<CCardBody :bodyHtml="loremIpsum"/>
5353
</CCard>
@@ -96,40 +96,40 @@
9696

9797
<CRow>
9898
<CCol sm="6" md="4">
99-
<CCard class="card-accent-primary" header="Card with primary accent" bodyWrapper>
99+
<CCard class="c-card-accent-primary" header="Card with primary accent" bodyWrapper>
100100
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
101101
</CCard>
102102
</CCol>
103103
<CCol sm="6" md="4">
104-
<CCard class="card-accent-secondary" header="Card with secondary accent" bodyWrapper>
104+
<CCard class="c-card-accent-secondary" header="Card with secondary accent" bodyWrapper>
105105
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
106106
</CCard>
107107
</CCol>
108108
<CCol sm="6" md="4">
109-
<CCard class="card-accent-success" header="Card with success accent" bodyWrapper>
109+
<CCard class="c-card-accent-success" header="Card with success accent" bodyWrapper>
110110
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
111111
</CCard>
112112
</CCol>
113113
<CCol sm="6" md="4">
114-
<CCard class="card-accent-info" header="Card with info accent" bodyWrapper>
114+
<CCard class="c-card-accent-info" header="Card with info accent" bodyWrapper>
115115
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
116116
</CCard>
117117
</CCol>
118118
<CCol sm="6" md="4">
119-
<CCard class="card-accent-warning" header="Card with warning accent" bodyWrapper>
119+
<CCard class="c-card-accent-warning" header="Card with warning accent" bodyWrapper>
120120
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
121121
</CCard>
122122
</CCol>
123123
<CCol sm="6" md="4">
124-
<CCard class="card-accent-danger" header="Card with danger accent" bodyWrapper>
124+
<CCard class="c-card-accent-danger" header="Card with danger accent" bodyWrapper>
125125
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
126126
</CCard>
127127
</CCol>
128128
</CRow>
129129
<CRow>
130130
<CCol sm="6" md="4">
131-
<CCard class="bg-primary text-center" bodyWrapper>
132-
<blockquote class="card-blockquote">
131+
<CCard class="c-bg-primary c-text-center" bodyWrapper>
132+
<blockquote class="c-card-blockquote">
133133
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
134134
<footer>Someone famous in
135135
<cite title="Source Title">Source Title</cite>
@@ -138,8 +138,8 @@
138138
</CCard>
139139
</CCol>
140140
<CCol sm="6" md="4">
141-
<CCard class="bg-success text-center" bodyWrapper>
142-
<blockquote class="card-blockquote">
141+
<CCard class="c-bg-success c-text-center" bodyWrapper>
142+
<blockquote class="c-card-blockquote">
143143
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
144144
<footer>Someone famous in
145145
<cite title="Source Title">Source Title</cite>
@@ -148,8 +148,8 @@
148148
</CCard>
149149
</CCol>
150150
<CCol sm="6" md="4">
151-
<CCard class="bg-info text-center" bodyWrapper>
152-
<blockquote class="card-blockquote">
151+
<CCard class="c-bg-info c-text-center" bodyWrapper>
152+
<blockquote class="c-card-blockquote">
153153
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
154154
<footer>Someone famous in
155155
<cite title="Source Title">Source Title</cite>
@@ -158,8 +158,8 @@
158158
</CCard>
159159
</CCol>
160160
<CCol sm="6" md="4">
161-
<CCard class="bg-warning text-center" bodyWrapper>
162-
<blockquote class="card-blockquote">
161+
<CCard class="c-bg-warning c-text-center" bodyWrapper>
162+
<blockquote class="c-card-blockquote">
163163
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
164164
<footer>Someone famous in
165165
<cite title="Source Title">Source Title</cite>
@@ -168,8 +168,8 @@
168168
</CCard>
169169
</CCol>
170170
<CCol sm="6" md="4">
171-
<CCard class="bg-danger text-center" bodyWrapper>
172-
<blockquote class="card-blockquote">
171+
<CCard class="c-bg-danger c-text-center" bodyWrapper>
172+
<blockquote class="c-card-blockquote">
173173
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
174174
<footer>Someone famous in
175175
<cite title="Source Title">Source Title</cite>
@@ -178,8 +178,8 @@
178178
</CCard>
179179
</CCol>
180180
<CCol sm="6" md="4">
181-
<CCard class="bg-secondary text-center" bodyWrapper>
182-
<blockquote class="card-blockquote">
181+
<CCard class="c-bg-secondary c-text-center" bodyWrapper>
182+
<blockquote class="c-card-blockquote">
183183
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
184184
<footer>Someone famous in
185185
<cite title="Source Title">Source Title</cite>
@@ -190,43 +190,43 @@
190190
</CRow>
191191
<CRow>
192192
<CCol sm="6" md="4">
193-
<CCard headerHtml="Card title" class="bg-primary" bodyWrapper>
193+
<CCard headerHtml="Card title" class="c-bg-primary" bodyWrapper>
194194
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
195195
</CCard>
196196
</CCol>
197197
<CCol sm="6" md="4">
198-
<CCard headerHtml="Card title" class="bg-success" bodyWrapper>
198+
<CCard headerHtml="Card title" class="c-bg-success" bodyWrapper>
199199
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
200200
</CCard>
201201
</CCol>
202202
<CCol sm="6" md="4">
203-
<CCard headerHtml="Card title" class="bg-info" bodyWrapper>
203+
<CCard headerHtml="Card title" class="c-bg-info" bodyWrapper>
204204
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
205205
</CCard>
206206
</CCol>
207207
<CCol sm="6" md="4">
208-
<CCard headerHtml="Card title" class="bg-warning" bodyWrapper>
208+
<CCard headerHtml="Card title" class="c-bg-warning" bodyWrapper>
209209
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
210210
</CCard>
211211
</CCol>
212212
<CCol sm="6" md="4">
213-
<CCard headerHtml="Card title" class="bg-danger" bodyWrapper>
213+
<CCard headerHtml="Card title" class="c-bg-danger" bodyWrapper>
214214
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
215215
</CCard>
216216
</CCol>
217217
<CCol sm="6" md="4">
218218
<transition name="fade">
219-
<CCard class="bg-secondary" v-if="show" >
219+
<CCard class="c-bg-secondary" v-if="show" >
220220
<CCardHeader>
221221
Card with header actions
222-
<div class="card-header-actions">
223-
<CLink href="#" class="card-header-action btn-setting" >
222+
<div class="c-card-header-actions">
223+
<CLink href="#" class="c-card-header-action btn-setting" >
224224
<i class="icon-settings"></i>
225225
</CLink>
226-
<CLink class="card-header-action btn-minimize" @click="isCollapsed = !isCollapsed">
226+
<CLink class="c-card-header-action btn-minimize" @click="isCollapsed = !isCollapsed">
227227
<i :class="`icon-arrow-${ !isCollapsed ? 'up' : 'down'}`"></i>
228228
</CLink>
229-
<CLink href="#" class="card-header-action btn-close" v-on:click="show = false">
229+
<CLink href="#" class="c-card-header-action c-btn-close" v-on:click="show = false">
230230
<i class="icon-close"></i>
231231
</CLink>
232232
</div>

‎src/views/base/Carousels.vue

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template functional>
2-
<div class="wrapper">
3-
<div class="animated fadeIn">
2+
<div class="c-wrapper">
3+
<div class="c-animated c-fadeIn">
44
<CRow>
55
<CCol md="12" lg="9" >
66
<CCard>
@@ -19,7 +19,11 @@
1919
</div> -->
2020
</CCardHeader>
2121
<CCardBody>
22-
<CCarousel>
22+
<CCarousel
23+
arrows
24+
indicators
25+
animate
26+
>
2327
<CCarouselItem
2428
caption="First Slide"
2529
imgSrc="https://lorempixel.com/1024/480/technics/2/"

‎src/views/base/Collapses.vue

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
2-
<div class="wrapper">
3-
<div class="animated fadeIn">
2+
<div class="c-wrapper">
3+
<div class="c-animated c-fadeIn">
44
<CRow>
55
<CCol col="12" md="6">
66
<CCard>
@@ -17,13 +17,13 @@
1717
<CButton id="collapse1" variant="primary">
1818
Toggle Collapse
1919
</CButton>
20-
<CCollapse toggler="collapse1" class="mt-2">
20+
<CCollapse toggler="collapse1" class="c-mt-2">
2121
<CCard bodyWrapper>
22-
<p class="card-text">Collapse contents Here</p>
22+
<p class="c-card-text">Collapse contents Here</p>
2323
<CButton id="collapse2" size="sm">
2424
Toggle Inner Collapse
2525
</CButton>
26-
<CCollapse toggler="collapse2" class="mt-2">
26+
<CCollapse toggler="collapse2" class="c-mt-2">
2727
<CCard bodyWrapper>Hello!</CCard>
2828
</CCollapse>
2929
</CCard>

‎src/views/base/Jumbotrons.vue

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
2-
<div class="wrapper">
3-
<div class="animated fadeIn">
2+
<div class="c-wrapper">
3+
<div class="c-animated c-fadeIn">
44
<CRow>
55
<CCol>
66
<CCard>
@@ -9,7 +9,7 @@
99
<strong> Bootstrap Jumbotron </strong>
1010
<!-- <div class="card-header-actions">
1111
<a href="https://bootstrap-vue.js.org/docs/components/jumbotron" class="card-header-action" rel="noreferrer noopener" target="_blank">
12-
<small class="text-muted">docs</small>
12+
<small class="c-text-muted">docs</small>
1313
</a>
1414
</div> -->
1515
</CCardHeader>
@@ -29,11 +29,11 @@
2929
</CCardHeader>
3030
<CCardBody>
3131
<CJumbotron header="Bootstrap 4" lead="">
32-
<p slot="lead" class="lead">
32+
<p slot="lead" class="c-lead">
3333
This is a simple hero unit, a simple jumbotron-style component for
3434
calling extra attention to featured content or information.
3535
</p>
36-
<hr class="my-4">
36+
<hr class="c-my-4">
3737
<p>
3838
It uses utility classes for typography and spacing to space content
3939
out within the larger container.
@@ -53,16 +53,17 @@
5353
<small>variants</small>
5454
</CCardHeader>
5555
<CCardBody>
56-
<CJumbotron variant="info"
57-
textVariant="white"
58-
borderVariant="dark"
59-
header="Bootstrap 4">
60-
61-
<p slot="lead" class="lead">
56+
<CJumbotron
57+
variant="info"
58+
textVariant="white"
59+
borderVariant="dark"
60+
header="Bootstrap 4"
61+
>
62+
<p slot="lead" class="c-lead">
6263
This is a simple hero unit, a simple jumbotron-style component for
6364
calling extra attention to featured content or information.
6465
</p>
65-
<hr class="my-4">
66+
<hr class="c-my-4">
6667
<p>
6768
It uses utility classes for typography and spacing to space content
6869
out within the larger container.

0 commit comments

Comments
 (0)