Skip to content

Commit e005cd1

Browse files
woothuwoothu
committed
feat: change styles of notification and button sections to version 3
1 parent ba0664a commit e005cd1

File tree

7 files changed

+661
-563
lines changed

7 files changed

+661
-563
lines changed

‎src/views/buttons/BrandButtons.vue

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

‎src/views/buttons/ButtonGroups.vue

Lines changed: 32 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
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" >
66
<CCard>
77
<CCardHeader>
8-
<i class="fa fa-align-justify"></i><strong> Bootstrap button group</strong>
8+
<i class="fa fa-align-justify"></i>
9+
<strong> Bootstrap button group</strong>
910
<!-- <div class="card-header-actions">
1011
<a href="https://bootstrap-vue.js.org/docs/components/button-group" class="card-header-action" rel="noreferrer noopener" target="_blank">
1112
<small class="text-muted">docs</small>
@@ -19,14 +20,14 @@
1920
<CButton>Two</CButton>
2021
<CButton>Three</CButton>
2122
<CButton>Four</CButton>
22-
<CButton class="d-sm-down-none">Five</CButton>
23+
<CButton class="c-d-sm-down-none">Five</CButton>
2324
</CButtonGroup>
2425
<br><br>
2526
<CButtonGroup>
26-
<CButton class="d-sm-down-none" variant="success">Success</CButton>
27+
<CButton class="c-d-sm-down-none" variant="success">Success</CButton>
2728
<CButton variant="info">Info</CButton>
2829
<CButton variant="warning">Warn</CButton>
29-
<CButton class="d-sm-down-none" variant="primary">Primary</CButton>
30+
<CButton class="c-d-sm-down-none" variant="primary">Primary</CButton>
3031
<CButton variant="danger">Danger</CButton>
3132
<CButton variant="link">Link</CButton>
3233
</CButtonGroup>
@@ -37,7 +38,8 @@
3738
<CCol col="12">
3839
<CCard>
3940
<CCardHeader>
40-
<i class="fa fa-align-justify"></i><strong> Button group </strong>sizing
41+
<i class="fa fa-align-justify"></i>
42+
<strong> Button group </strong>sizing
4143
</CCardHeader>
4244
<CCardBody>
4345
<div>
@@ -70,15 +72,15 @@
7072
<CCardBody>
7173
<div>
7274
<CButtonGroup>
73-
<CButton class="d-sm-down-none">Button 1</CButton>
74-
<CButton class="d-sm-down-none">Button 2</CButton>
75+
<CButton class="c-d-sm-down-none">Button 1</CButton>
76+
<CButton class="c-d-sm-down-none">Button 2</CButton>
7577
<CDropdown right text="Menu" variant="success">
7678
<CDropdownItem>Item 1</CDropdownItem>
7779
<CDropdownItem>Item 2</CDropdownItem>
7880
<CDropdownDivider></CDropdownDivider>
7981
<CDropdownItem>Item 3</CDropdownItem>
8082
</CDropdown>
81-
<CButton class="d-sm-down-none">Button 3</CButton>
83+
<CButton class="c-d-sm-down-none">Button 3</CButton>
8284
<CDropdown right split text="Split Menu" variant="info">
8385
<CDropdownItem>Item 1</CDropdownItem>
8486
<CDropdownItem>Item 2</CDropdownItem>
@@ -93,7 +95,8 @@
9395
<CCol col="12">
9496
<CCard>
9597
<CCardHeader>
96-
<i class="fa fa-align-justify"></i><strong> Button group </strong>vertical variation
98+
<i class="fa fa-align-justify"></i>
99+
<strong> Button group </strong>vertical variation
97100
</CCardHeader>
98101
<CCardBody>
99102
<div>
@@ -121,44 +124,47 @@
121124
<CCardBody>
122125
<div>
123126
<CButtonToolbar aria-label="Toolbar with button groups">
124-
<CButtonGroup class="mx-1">
125-
<CButton class="d-sm-down-none">&laquo;</CButton>
127+
<CButtonGroup class="c-mx-1">
128+
<CButton class="c-d-sm-down-none">&laquo;</CButton>
126129
<CButton>&lsaquo;</CButton>
127130
</CButtonGroup>
128-
<CButtonGroup class="mx-1">
129-
<CButton class="d-sm-down-none">Edit</CButton>
131+
<CButtonGroup class="c-mx-1">
132+
<CButton class="c-d-sm-down-none">Edit</CButton>
130133
<CButton>Undo</CButton>
131134
<CButton>Redo</CButton>
132135
</CButtonGroup>
133-
<CButtonGroup class="mx-1">
136+
<CButtonGroup class="c-mx-1">
134137
<CButton>&rsaquo;</CButton>
135-
<CButton class="d-sm-down-none">&raquo;</CButton>
138+
<CButton class="c-d-sm-down-none">&raquo;</CButton>
136139
</CButtonGroup>
137140
</CButtonToolbar>
138141
</div>
139-
<hr class="d-sm-down-none"/>
142+
<hr class="c-d-sm-down-none"/>
140143
<div>
141-
<CButtonToolbar aria-label="Toolbar with button groups and input groups" class="d-sm-down-none">
142-
<CButtonGroup size="sm" class="mx-1">
144+
<CButtonToolbar
145+
aria-label="Toolbar with button groups and input groups"
146+
class="c-d-sm-down-none"c-
147+
>
148+
<CButtonGroup size="sm" class="c-mx-1">
143149
<CButton>New</CButton>
144150
<CButton>Edit</CButton>
145151
</CButtonGroup>
146152
<CFormInput
147-
class="mb-0 w-25 mx-1"
153+
class="c-mb-0 c-w-25 c-mx-1"
148154
size="sm"
149155
prepend="$"
150156
append=".00"
151157
value="100"
152158
/>
153159
<CFormSelect
154-
class="mb-0 w-25 mx-1"
160+
class="c-mb-0 c-w-25 c-mx-1"
155161
size="sm"
156162
prepend="Size"
157163
value="Medium"
158164
:options="['Large','Medium','Small']"
159165
custom
160166
/>
161-
<CButtonGroup size="sm" class="mx-1">
167+
<CButtonGroup size="sm" class="c-mx-1">
162168
<CButton>Save</CButton>
163169
<CButton>Cancel</CButton>
164170
</CButtonGroup>
@@ -167,21 +173,21 @@
167173
<hr/>
168174
<div>
169175
<CButtonToolbar aria-label="Toolbar with button groups and dropdown menu">
170-
<CButtonGroup class="mx-1 d-sm-down-none">
176+
<CButtonGroup class="c-mx-1 c-d-sm-down-none">
171177
<CButton>New</CButton>
172178
<CButton>Edit</CButton>
173179
<CButton>Undo</CButton>
174180
</CButtonGroup>
175181
<CDropdown
176-
class="mx-1"
182+
class="c-mx-1"
177183
placement="bottom-end"
178184
buttonContent="Menu"
179185
>
180186
<CDropdownItem>Item 1</CDropdownItem>
181187
<CDropdownItem>Item 2</CDropdownItem>
182188
<CDropdownItem>Item 3</CDropdownItem>
183189
</CDropdown>
184-
<CButtonGroup class="mx-1">
190+
<CButtonGroup class="c-mx-1">
185191
<CButton>Save</CButton>
186192
<CButton>Cancel</CButton>
187193
</CButtonGroup>

0 commit comments

Comments
 (0)