Skip to content

Commit 326af48

Browse files
author
Yeliazar
committed
updated buttons
1 parent d906bed commit 326af48

File tree

1 file changed

+64
-62
lines changed

1 file changed

+64
-62
lines changed

‎src/pages/Ui/Buttons/Buttons.vue

Lines changed: 64 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,14 @@
1313
Semantically distinguishable beauty.
1414
</p>
1515
<p class="text-left">
16-
<b-button variant="default" class="width-100 mb-3 mr-3">Default</b-button>
17-
<b-button variant="primary" class="width-100 mb-3 mr-3">Primary</b-button>
18-
<b-button variant="info" class="width-100 mb-3 mr-3">Info</b-button>
19-
<b-button variant="success" class="width-100 mb-3 mr-3">Success</b-button>
20-
<b-button variant="warning" class="width-100 mb-3 mr-3">Warning</b-button>
21-
<b-button variant="danger" class="width-100 mb-3 mr-3">Danger</b-button>
22-
<b-button variant="gray" class="width-100 mb-3 mr-3">Gray</b-button>
23-
<b-button variant="inverse" class="width-100 mb-3 mr-3">Inverse</b-button>
16+
<b-button variant="default" class="width-100 mb-3 me-3">Default</b-button>
17+
<b-button variant="primary" class="width-100 mb-3 me-3 text-white">Primary</b-button>
18+
<b-button variant="info" class="width-100 mb-3 me-3">Info</b-button>
19+
<b-button variant="success" class="width-100 mb-3 me-3">Success</b-button>
20+
<b-button variant="warning" class="width-100 mb-3 me-3">Warning</b-button>
21+
<b-button variant="danger" class="width-100 mb-3 me-3">Danger</b-button>
22+
<b-button variant="gray" class="width-100 mb-3 me-3 text-white">Gray</b-button>
23+
<b-button variant="inverse" class="width-100 mb-3 me-3">Inverse</b-button>
2424
</p>
2525
</div>
2626
</Widget>
@@ -37,10 +37,10 @@
3737
from tiny 10px button to large one.
3838
</p>
3939
<p>
40-
<b-button variant="default" size="lg" class="mr-3">Large button</b-button>
41-
<b-button variant="primary" class="mr-3">Default button</b-button>
42-
<b-button variant="info" size="sm" class="mr-3">Small button</b-button>
43-
<b-button variant="success" size="xs" class="mr-3">Tiny button</b-button>
40+
<b-button variant="default" size="lg" class="me-3">Large button</b-button>
41+
<b-button variant="primary" class="me-3 text-white">Default button</b-button>
42+
<b-button variant="info" size="sm" class="me-3">Small button</b-button>
43+
<b-button variant="success" size="xs" class="me-3">Tiny button</b-button>
4444
</p>
4545
</div>
4646
</Widget>
@@ -58,14 +58,14 @@
5858
background images and colors on any button.
5959
</p>
6060
<p>
61-
<b-button variant="outline-default" class="width-100 mb-3 mr-3">Default</b-button>
62-
<b-button variant="outline-primary" class="width-100 mb-3 mr-3">Primary</b-button>
63-
<b-button variant="outline-info" class="width-100 mb-3 mr-3">Info</b-button>
64-
<b-button variant="outline-success" class="width-100 mb-3 mr-3">Success</b-button>
65-
<b-button variant="outline-warning" class="width-100 mb-3 mr-3">Warning</b-button>
66-
<b-button variant="outline-danger" class="width-100 mb-3 mr-3">Danger</b-button>
67-
<b-button variant="outline-gray" class="width-100 mb-3 mr-3">Gray</b-button>
68-
<b-button variant="outline-inverse" class="width-100 mb-3 mr-3">Inverse</b-button>
61+
<b-button variant="outline-default" class="width-100 mb-3 me-3">Default</b-button>
62+
<b-button variant="outline-primary" class="width-100 mb-3 me-3">Primary</b-button>
63+
<b-button variant="outline-info" class="width-100 mb-3 me-3">Info</b-button>
64+
<b-button variant="outline-success" class="width-100 mb-3 me-3">Success</b-button>
65+
<b-button variant="outline-warning" class="width-100 mb-3 me-3">Warning</b-button>
66+
<b-button variant="outline-danger" class="width-100 mb-3 me-3">Danger</b-button>
67+
<b-button variant="outline-gray" class="width-100 mb-3 me-3">Gray</b-button>
68+
<b-button variant="outline-inverse" class="width-100 mb-3 me-3">Inverse</b-button>
6969
</p>
7070
</div>
7171
</Widget>
@@ -82,28 +82,28 @@
8282
<code>.btn-rounded</code> or <code>.btn-rounded-f</code>.
8383
</p>
8484
<p>
85-
<b-button variant="default" class="btn-rounded-f width-100 mb-3 mr-3">
85+
<b-button variant="default" class="btn-rounded-f width-100 mb-3 me-3">
8686
Default
8787
</b-button>
88-
<b-button variant="primary" class="btn-rounded-f width-100 mb-3 mr-3">
88+
<b-button variant="primary" class="btn-rounded-f width-100 mb-3 me-3 text-white">
8989
Primary
9090
</b-button>
91-
<b-button variant="info" class="btn-rounded-f width-100 mb-3 mr-3">
91+
<b-button variant="info" class="btn-rounded-f width-100 mb-3 me-3">
9292
Info
9393
</b-button>
94-
<b-button variant="success" class="btn-rounded-f width-100 mb-3 mr-3">
94+
<b-button variant="success" class="btn-rounded-f width-100 mb-3 me-3">
9595
Success
9696
</b-button>
97-
<b-button variant="outline-warning" class="btn-rounded width-100 mb-3 mr-3">
97+
<b-button variant="outline-warning" class="btn-rounded width-100 mb-3 me-3">
9898
Warning
9999
</b-button>
100-
<b-button variant="outline-danger" class="btn-rounded width-100 mb-3 mr-3">
100+
<b-button variant="outline-danger" class="btn-rounded width-100 mb-3 me-3 text-danger">
101101
Danger
102102
</b-button>
103-
<b-button variant="outline-gray" class="btn-rounded width-100 mb-3 mr-3">
103+
<b-button variant="outline-gray" class="btn-rounded width-100 mb-3 me-3 text-gray">
104104
Gray
105105
</b-button>
106-
<b-button variant="outline-inverse" class="btn-rounded width-100 mb-3 mr-3">
106+
<b-button variant="outline-inverse" class="btn-rounded width-100 mb-3 me-3">
107107
Inverse
108108
</b-button>
109109
</p>
@@ -123,13 +123,15 @@
123123
to <code>&lt;Button&gt;</code> component.
124124
Great for menu & social buttons.
125125
</p>
126-
<b-button variant="info" block class="mb-3">Block Button</b-button>
127-
<b-button variant="default" block class="mb-3">Show Menu &nbsp;&nbsp;&nbsp;<i
128-
class="fa fa-bars"
129-
/></b-button>
130-
<b-button variant="primary" block class="mb-3"><i class="fa fa-facebook" />&nbsp;&nbsp;Login mit
131-
Facebook</b-button>
132-
<b-button variant="warning" block>Are you sure?</b-button>
126+
<div class="d-grid">
127+
<b-button variant="info" block class="mb-3">Block Button</b-button>
128+
<b-button variant="default" block class="mb-3">Show Menu &nbsp;&nbsp;&nbsp;<i
129+
class="fa fa-bars"
130+
/></b-button>
131+
<b-button variant="primary" block class="mb-3"><i class="fa fa-facebook" />&nbsp;&nbsp;Login mit
132+
Facebook</b-button>
133+
<b-button variant="warning" block>Are you sure?</b-button>
134+
</div>
133135
</div>
134136
</Widget>
135137
</b-col>
@@ -144,12 +146,12 @@
144146
Add the <code>disabled</code> to <code>&lt;Button&gt;</code> component.
145147
</p>
146148
<p>
147-
<b-button variant="primary" disabled class="mr-3">Primary button</b-button>
148-
<b-button variant="default" disabled class="mr-xs">Button</b-button>
149+
<b-button variant="primary" disabled class="me-3 text-white">Primary button</b-button>
150+
<b-button variant="default" disabled class="me-sm-1 text-white">Button</b-button>
149151
</p>
150152
<p>
151-
<b-button variant="success" size="sm" disabled class="mr-3">Primary Link</b-button>
152-
<b-button variant="default" size="sm" disabled class="mr-xs">Link</b-button>
153+
<b-button variant="success" size="sm" disabled class="me-3 text-white">Primary Link</b-button>
154+
<b-button variant="default" size="sm" disabled class="me-sm-1 text-white">Link</b-button>
153155
</p>
154156
</div>
155157
</Widget>
@@ -172,19 +174,19 @@
172174
<b-button variant="default">Middle</b-button>
173175
<b-button variant="default">Right</b-button>
174176
</b-button-group>
175-
<b-button-toolbar class="mb-xs">
176-
<b-button-group class="mr-3">
177-
<b-button variant="default" class="ml-0">1</b-button>
177+
<b-button-toolbar class="mb-sm-1">
178+
<b-button-group class="me-3">
179+
<b-button variant="default" class="ms-0">1</b-button>
178180
<b-button variant="default">2</b-button>
179181
<b-button variant="default">3</b-button>
180182
<b-button variant="default">4</b-button>
181183
</b-button-group>
182-
<b-button-group class="mr-3">
184+
<b-button-group class="me-3">
183185
<b-button variant="default">5</b-button>
184186
<b-button variant="default">6</b-button>
185187
<b-button variant="default">7</b-button>
186188
</b-button-group>
187-
<b-button-group class="mr-2">
189+
<b-button-group class="me-2">
188190
<b-button variant="default">8</b-button>
189191
</b-button-group>
190192
</b-button-toolbar>
@@ -205,7 +207,7 @@
205207
</p>
206208

207209
<div class="mb-3">
208-
<b-dropdown variant="danger" text="One" class="mr-3">
210+
<b-dropdown variant="danger" text="One" class="me-3">
209211
<b-dropdown-item>Action</b-dropdown-item>
210212
<b-dropdown-item>Another action</b-dropdown-item>
211213
<b-dropdown-item>Something else here</b-dropdown-item>
@@ -221,8 +223,8 @@
221223
<b-dropdown-item>Separated link</b-dropdown-item>
222224
</b-dropdown>
223225
</div>
224-
<div class="mb-xs">
225-
<b-dropdown variant="primary" split text="Primary" class="mr-3">
226+
<div class="mb-sm-1">
227+
<b-dropdown variant="primary" split text="Primary" class="me-3">
226228
<b-dropdown-item>Action</b-dropdown-item>
227229
<b-dropdown-item>Another action</b-dropdown-item>
228230
<b-dropdown-item>Something else here</b-dropdown-item>
@@ -259,7 +261,7 @@
259261
of checkboxes for checkbox style toggling on
260262
btn-group.
261263
</p>
262-
<div class="mb-xs">
264+
<div class="mb-sm-1">
263265
<b-button-group class="mb-3">
264266
<b-button
265267
variant="default" @click="changeCheckbox('checkboxOne', 0)"
@@ -316,7 +318,7 @@
316318
>Right way</b-button>
317319
</b-button-group>
318320
</div>
319-
<div class="mb-xs">
321+
<div class="mb-sm-1">
320322
<b-button-group>
321323
<b-button
322324
variant="default" size="sm" @click="changeRadio('radioTwo', 0)"
@@ -341,30 +343,30 @@
341343
Let your buttons shine!
342344
</p>
343345
<div class="text-center mb-sm">
344-
<b-button variant="default" class="width-100 mr-3">
345-
<i class="glyphicon glyphicon-tree-conifer text-success mr-xs mb-xs" />
346+
<b-button variant="default" class="width-100 me-3">
347+
<i class="glyphicon glyphicon-tree-conifer text-success me-sm-1 mb-sm-2" />
346348
Forest
347349
</b-button>
348-
<b-button variant="default" class="width-100 mr-3">
349-
<i class="fa fa-check text-danger mr-0 mb-xs" />
350+
<b-button variant="default" class="width-100 me-3">
351+
<i class="fa fa-check text-danger me-sm-1 mb-sm-2" />
350352
Submit
351353
</b-button>
352-
<b-button variant="default" class="width-100 mr-xs">
353-
<i class="fa fa-facebook text-primary mr-xs mb-xs" />
354+
<b-button variant="default" class="width-100 me-sm-1">
355+
<i class="fa fa-facebook text-primary me-sm-1 mb-sm-2" />
354356
Login
355357
</b-button>
356358
</div>
357359
<div class="text-center">
358-
<b-button variant="inverse" class="width-100 mr-3">
359-
<i class="fa fa-exclamation text-warning mr-xs mb-xs" />
360+
<b-button variant="inverse" class="width-100 me-3">
361+
<i class="fa fa-exclamation text-warning me-sm-1 mb-sm-2" />
360362
Error
361363
</b-button>
362-
<b-button variant="inverse" class="width-100 mr-3">
363-
<i class="glyphicon glyphicon-globe text-info mr-xs mb-xs" />
364-
<span class="text-info">Globe</span>
364+
<b-button variant="inverse" class="width-100 me-3">
365+
<i class="glyphicon glyphicon-globe text-info me-sm-2 mb-sm-2" />
366+
<span class="text-white">Globe</span>
365367
</b-button>
366-
<b-button variant="inverse" class="width-100 mr-xs">
367-
<span class="circle bg-white mr-xs">
368+
<b-button variant="inverse" class="width-100 me-sm-1">
369+
<span class="circle bg-white me-sm-1">
368370
<i class="fa fa-map-marker text-gray" />
369371
</span>
370372
Map

0 commit comments

Comments
 (0)