sean/manja_dev_ui
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

refactor: card header margins

Browse Source
This commit is contained in:
xidedix
2018-08-21 15:20:19 +02:00
parent dac5b74454
commit 87eaeea01c
19 changed files with 105 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG.md
+1
View File
@@ -3,6 +3,7 @@
##### `v2.0.0-rc.0`
- test(unit): add some views testing
- test(e2e): add testing for mobile `sidebar-show`
- refactor: card headers margins
- chore: update `vue` to `2.5.17`
- chore: update `vue-template-compiler` to `2.5.17`
- chore: update `@vue/cli-plugin-babel` to `3.0.1`
src/views/base/Breadcrumbs.vue
+1 -1
View File
@@ -7,7 +7,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Bootstrap Breadcrumb</strong>
<i class="fa fa-align-justify"></i><strong> Bootstrap Breadcrumb</strong>
<div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/breadcrumb" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small>
src/views/base/Carousels.vue
+1 -1
View File
@@ -7,7 +7,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Bootstrap Carousel</strong>
<i class="fa fa-align-justify"></i><strong> Bootstrap Carousel</strong>
<div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/carousel" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small>
src/views/base/Collapses.vue
+6 -6
View File
@@ -7,7 +7,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Bootstrap Collapse</strong>
<i class="fa fa-align-justify"></i><strong> Bootstrap Collapse </strong>
<div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/collapse" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small>
@@ -33,7 +33,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Collapse</strong> <small>with <code>v-b-toggle</code> directive</small>
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>v-b-toggle</code> directive</small>
</div>
<div>
<!-- Using modifiers -->
@@ -58,7 +58,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Collapse</strong> <small>with <code>visibility</code></small>
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>visibility</code></small>
</div>
<div>
<b-btn v-b-toggle.collapse3 class="m-1">Toggle Collapse</b-btn>
@@ -75,7 +75,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Collapse</strong> <small>with <code>v-model</code></small>
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>v-model</code></small>
</div>
<div>
<b-btn @click="showCollapse = !showCollapse"
@@ -99,7 +99,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Collapse</strong> <small>multiple elements</small>
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>multiple elements</small>
</div>
<div>
<!-- Single button triggers two b-collapse components -->
@@ -124,7 +124,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Collapse</strong> <small><code>accordion</code> support</small>
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small><code>accordion</code> support</small>
</div>
<div role="tablist">
<b-card no-body class="mb-1">
src/views/base/Forms.vue
+2 -2
View File
@@ -4,7 +4,7 @@
<b-col sm="6">
<b-card>
<div slot="header">
<strong>Credit Card</strong> <small>Form</small>
<strong>Credit Card </strong> <small>Form</small>
</div>
<b-row>
<b-col sm="12">
@@ -53,7 +53,7 @@
<b-col sm="6">
<b-card>
<div slot="header">
<strong>Company</strong> <small>Form</small>
<strong>Company </strong><small>Form</small>
</div>
<b-form-group>
<label for="company">Company</label>
src/views/base/Jumbotrons.vue
+3 -3
View File
@@ -7,7 +7,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Bootstrap Jumbotron</strong>
<i class="fa fa-align-justify"></i> <strong> Bootstrap Jumbotron </strong>
<div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/jumbotron" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small>
@@ -27,7 +27,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Jumbotron</strong>
<i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
<small>with slots</small>
</div>
<div>
@@ -57,7 +57,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Jumbotron</strong>
<i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
<small>variants</small>
</div>
<div>
src/views/base/ListGroups.vue
+10 -10
View File
@@ -7,7 +7,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Bootstrap list group</strong>
<i class="fa fa-align-justify"></i><strong> Bootstrap list group </strong>
<div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/list-group" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small>
@@ -28,7 +28,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>List group</strong> <small>active items</small>
<i class="fa fa-align-justify"></i><strong> List group </strong><small>active items</small>
</div>
<b-list-group>
<b-list-group-item>Cras justo odio</b-list-group-item>
@@ -46,7 +46,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>List group</strong> <small>disabled items</small>
<i class="fa fa-align-justify"></i><strong> List group </strong><small>disabled items</small>
</div>
<b-list-group>
<b-list-group-item disabled>Cras justo odio</b-list-group-item>
@@ -62,7 +62,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>List group</strong> <small>actionable items</small>
<i class="fa fa-align-justify"></i><strong> List group </strong><small>actionable items</small>
</div>
<b-list-group>
<b-list-group-item href="#some-link">Awesome link</b-list-group-item>
@@ -79,7 +79,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>List group</strong> <small>buttons</small>
<i class="fa fa-align-justify"></i><strong> List group </strong><small>buttons</small>
</div>
<b-list-group>
<b-list-group-item button>Button item</b-list-group-item>
@@ -94,7 +94,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>List group</strong> <small>with badges</small>
<i class="fa fa-align-justify"></i><strong> List group </strong><small>with badges</small>
</div>
<b-list-group>
<b-list-group-item class="d-flex justify-content-between align-items-center">
@@ -119,7 +119,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>List group</strong> <small>variants</small>
<i class="fa fa-align-justify"></i><strong> List group </strong><small>variants</small>
</div>
<b-list-group>
<b-list-group-item>This is a default list group item</b-list-group-item>
@@ -139,7 +139,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>List group</strong> <small>variants active</small>
<i class="fa fa-align-justify"></i><strong> List group </strong><small>variants active</small>
</div>
<b-list-group>
<b-list-group-item href="#">This is a default list group item</b-list-group-item>
@@ -161,7 +161,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>List group</strong> <small>inside cards</small>
<i class="fa fa-align-justify"></i><strong> List group </strong><small>inside cards</small>
</div>
<b-card-group deck>
<b-card header="<b>Card with list group</b>">
@@ -200,7 +200,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>List group</strong> <small>custom content</small>
<i class="fa fa-align-justify"></i><strong> List group </strong><small>custom content</small>
</div>
<b-list-group>
<b-list-group-item href="#" active class="flex-column align-items-start">
src/views/base/Navbars.vue
+6 -6
View File
@@ -5,7 +5,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Bootstrap Navbar</strong>
<i class="fa fa-align-justify"></i><strong> Bootstrap Navbar </strong>
<div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/navbar" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small>
@@ -57,7 +57,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Navbar</strong>
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
<small>brand</small>
</div>
<div>
@@ -74,7 +74,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Navbar</strong>
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
<small>text</small>
</div>
<div>
@@ -93,7 +93,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Navbar</strong>
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
<small>dropdown</small>
</div>
<div>
@@ -123,7 +123,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Navbar</strong>
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
<small>form</small>
</div>
<div>
@@ -139,7 +139,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Navbar</strong>
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
<small>input group</small>
</div>
<div>
src/views/base/Navs.vue
+7 -7
View File
@@ -5,7 +5,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Bootstrap Navs</strong>
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs</strong>
<div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/nav" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small>
@@ -25,7 +25,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Bootstrap Navs</strong> <small>tab style</small>
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>tab style</small>
</div>
<div>
<b-nav tabs>
@@ -40,7 +40,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Bootstrap Navs</strong> <small>pill style</small>
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>pill style</small>
</div>
<div>
<b-nav pills>
@@ -55,7 +55,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Bootstrap Navs</strong> <small>fill tabs</small>
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>fill tabs</small>
</div>
<div>
<b-nav fill tabs>
@@ -70,7 +70,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Bootstrap Navs</strong> <small>justified tabs</small>
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>justified tabs</small>
</div>
<div>
<b-nav justified tabs>
@@ -85,7 +85,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Bootstrap Navs</strong> <small>dropdown support</small>
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>dropdown support</small>
</div>
<div>
<b-nav pills>
@@ -104,7 +104,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Bootstrap Navs</strong> <small>vertical variation</small>
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>vertical variation</small>
</div>
<div>
<b-nav vertical class="w-25">
src/views/base/Paginations.vue
+3 -3
View File
@@ -5,7 +5,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Bootstrap Pagination</strong>
<i class="fa fa-align-justify"></i><strong> Bootstrap Pagination</strong>
<div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/pagination" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small>
@@ -37,7 +37,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Pagination</strong>
<i class="fa fa-align-justify"></i><strong> Pagination </strong>
<small>alignment</small>
</div>
<div>
@@ -63,7 +63,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Pagination</strong>
<i class="fa fa-align-justify"></i><strong> Pagination </strong>
<small>navigation</small>
</div>
<div>
src/views/base/Popovers.vue
+7 -7
View File
@@ -5,7 +5,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Bootstrap Popovers</strong>
<i class="fa fa-align-justify"></i><strong> Bootstrap Popovers</strong>
<div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/popovers" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small>
@@ -35,7 +35,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Popovers</strong>
<i class="fa fa-align-justify"></i><strong> Popovers </strong>
<small>placement</small>
</div>
<div class="my-3">
@@ -59,7 +59,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Popovers</strong>
<i class="fa fa-align-justify"></i><strong> Popovers </strong>
<small>via properties or slots</small>
</div>
<b-row>
@@ -86,7 +86,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Popovers</strong>
<i class="fa fa-align-justify"></i><strong> Popovers </strong>
<small>show</small>
</div>
<div class="d-flex flex-column text-md-center">
@@ -106,7 +106,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Popover</strong>
<i class="fa fa-align-justify"></i><strong> Popover </strong>
<small>open/close events</small>
</div>
<div class="d-flex flex-column text-md-center">
@@ -127,7 +127,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Popover</strong>
<i class="fa fa-align-justify"></i><strong> Popover </strong>
<small>enable/disable events</small>
</div>
<div class="d-flex flex-column text-md-center">
@@ -148,7 +148,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Popover</strong><small><code>v-b-popover</code>directive</small>
<i class="fa fa-align-justify"></i><strong> Popover </strong><small><code>v-b-popover</code> directive</small>
</div>
<b-row>
<b-col md="3" class="py-3 text-center">
src/views/base/ProgressBars.vue
+17 -17
View File
@@ -5,7 +5,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Bootstrap Progress</strong>
<i class="fa fa-align-justify"></i><strong> Bootstrap Progress</strong>
<div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/progress" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small>
@@ -26,18 +26,18 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Progress</strong> <small>labels</small>
<i class="fa fa-align-justify"></i> <strong> Progress </strong><small>labels</small>
</div>
<div>
<h5>No label</h5>
<h6>No label</h6>
<b-progress :value="value" :max="max2" class="mb-3"></b-progress>
<h5>Value label</h5>
<h6>Value label</h6>
<b-progress :value="value" :max="max2" show-value class="mb-3"></b-progress>
<h5>Progress label</h5>
<h6>Progress label</h6>
<b-progress :value="value" :max="max2" show-progress class="mb-3"></b-progress>
<h5>Value label with precision</h5>
<h6>Value label with precision</h6>
<b-progress :value="value" :max="max2" :precision="2" show-value class="mb-3"></b-progress>
<h5>Progress label with precision</h5>
<h6>Progress label with precision</h6>
<b-progress :value="value" :max="max2" :precision="2" show-progress class="mb-3"></b-progress>
</div>
</b-card>
@@ -45,12 +45,12 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Progress</strong> <small>width</small>
<i class="fa fa-align-justify"></i><strong> Progress </strong><small>width</small>
</div>
<div>
<h5>Default width</h5>
<h6>Default width</h6>
<b-progress :value="value3" class="mb-3"></b-progress>
<h5>Custom widths</h5>
<h6>Custom widths</h6>
<b-progress :value="value3" class="w-75 mb-2"></b-progress>
<b-progress :value="value3" class="w-50 mb-2"></b-progress>
<b-progress :value="value3" class="w-25"></b-progress>
@@ -60,12 +60,12 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Progress</strong> <small>height</small>
<i class="fa fa-align-justify"></i><strong> Progress </strong><small>height</small>
</div>
<div>
<h5>Default height</h5>
<h6>Default height</h6>
<b-progress :value="value3" show-progress class="mb-3"></b-progress>
<h5>Custom heights</h5>
<h6>Custom heights</h6>
<b-progress height="2rem" :value="value3" show-progress class="mb-2"></b-progress>
<b-progress height="20px" :value="value3" show-progress class="mb-2"></b-progress>
<b-progress height="2px" :value="value3"></b-progress>
@@ -75,7 +75,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Progress</strong> <small>variants</small>
<i class="fa fa-align-justify"></i><strong> Progress </strong><small>variants</small>
</div>
<div>
<div :key="index" v-for="(bar, index) in bars" class="row mb-1">
@@ -93,7 +93,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Progress</strong> <small>striped</small>
<i class="fa fa-align-justify"></i><strong> Progress </strong><small>striped</small>
</div>
<div>
<b-progress :value="25" variant="success" :striped="striped" class="mb-2"></b-progress>
@@ -109,7 +109,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Progress</strong> <small>animated</small>
<i class="fa fa-align-justify"></i><strong> Progress </strong><small>animated</small>
</div>
<div>
<b-progress :value="25" variant="success" striped :animated="animate" class="mb-2"></b-progress>
@@ -125,7 +125,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Progress</strong> <small>multiple bars</small>
<i class="fa fa-align-justify"></i><strong> Progress </strong><small>multiple bars</small>
</div>
<div>
<b-progress :max="max3" class="mb-3">
src/views/base/Tooltips.vue
+7 -7
View File
@@ -5,7 +5,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Bootstrap Tooltips</strong><small><code>v-b-tooltip</code>directive</small>
<i class="fa fa-align-justify"></i><strong> Bootstrap Tooltips </strong><small><code>v-b-tooltip</code> directive</small>
<div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/tooltip" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small>
@@ -32,7 +32,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Tooltips</strong><small><code>b-tooltip</code>component</small>
<i class="fa fa-align-justify"></i><strong> Tooltips </strong><small><code>b-tooltip</code> component</small>
</div>
<b-row>
<b-col md="6" class="py-4 text-center">
@@ -55,7 +55,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Tooltips</strong><small><code>show</code>prop</small>
<i class="fa fa-align-justify"></i><strong> Tooltips </strong><small><code>show</code> prop</small>
</div>
<div class="text-center">
<b-btn id="tooltipButton-1" variant="primary">I have a tooltip</b-btn>
@@ -71,14 +71,14 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Tooltips</strong><small><code>open close</code>events</small>
<i class="fa fa-align-justify"></i><strong> Tooltips </strong><small><code>open close</code> events</small>
</div>
<div class="d-flex flex-column text-md-center">
<div class="p-2">
<b-btn id="tooltipButton-showEvent" variant="primary">I have a tooltip</b-btn>
</div>
<div class="p-2">
<b-btn class="px-1" @click="onOpen">Open</b-btn>
<b-btn class="px-1 mr-1" @click="onOpen">Open</b-btn>
<b-btn class="px-1" @click="onClose">Close</b-btn>
</div>
@@ -91,14 +91,14 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Tooltips</strong><small><code>enable disable</code>events</small>
<i class="fa fa-align-justify"></i><strong> Tooltips </strong><small><code>enable disable</code> events</small>
</div>
<div class="d-flex flex-column text-md-center">
<div class="p-2">
<b-btn id="tooltipButton-disable" variant="primary">I have a tooltip</b-btn>
</div>
<div class="p-2">
<b-btn @click="disabled = !disabled">
<b-btn @click="disabled = !disabled" class="mr-1">
{{ disabled ? 'Enable' : 'Disable' }} Tooltip by prop
</b-btn>
src/views/buttons/BrandButtons.vue
+16 -10
View File
@@ -4,9 +4,11 @@
<b-col cols="12">
<b-card>
<div slot="header">
<strong>Brand Button</strong> <small>Usage ex.</small><code style="text-transform:lowercase">&lt;b-button variant="facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/b-button&gt;</code>
<strong>Brand Button</strong>
</div>
<h6>Size Small <small>Add this <code>size="sm"</code></small></h6>
<small>Usage </small><code style="text-transform:lowercase">&lt;b-button variant="facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/b-button&gt;</code>
<hr/>
<h6>Size Small <small>Add <code>size="sm"</code></small></h6>
<p>
<b-button size="sm" class="btn-brand" variant="facebook"><i class="fa fa-facebook"></i><span>Facebook</span></b-button>
<b-button size="sm" class="btn-brand" variant="twitter"><i class="fa fa-twitter"></i><span>Twitter</span></b-button>
@@ -62,7 +64,7 @@
<b-button variant="foursquare" class="btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></b-button>
<b-button variant="vimeo" class="btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></b-button>
</p>
<h6>Size Large <small>Add this <code>size="lg"</code></small></h6>
<h6>Size Large <small>Add <code>size="lg"</code></small></h6>
<p>
<b-button size="lg" variant="facebook" class="btn-brand"><i class="fa fa-facebook"></i><span>Facebook</span></b-button>
<b-button size="lg" variant="twitter" class="btn-brand"><i class="fa fa-twitter"></i><span>Twitter</span></b-button>
@@ -95,9 +97,11 @@
<b-col cols="12">
<b-card>
<div slot="header">
<strong>Brand Button</strong> <small>Only icons. Usage ex.</small> <code style="text-transform:lowercase">&lt;b-button variant="facebook icon"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/b-button&gt;</code>
<strong>Brand Button </strong> <small>Icons only</small>
</div>
<h6>Size Small <small>Add this <code>size="sm"</code></small></h6>
<small>Usage </small> <code style="text-transform:lowercase">&lt;b-button variant="facebook icon"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/b-button&gt;</code>
<hr/>
<h6>Size Small <small>Add <code>size="sm"</code></small></h6>
<p>
<b-button size="sm" variant="facebook icon" class="btn-brand"><i class="fa fa-facebook"></i></b-button>
<b-button size="sm" variant="twitter icon" class="btn-brand"><i class="fa fa-twitter"></i></b-button>
@@ -153,7 +157,7 @@
<b-button variant="foursquare icon" class="btn-brand"><i class="fa fa-foursquare"></i></b-button>
<b-button variant="vimeo icon" class="btn-brand"><i class="fa fa-vimeo"></i></b-button>
</p>
<h6>Size Large <small>Add this <code>size="lg"</code></small></h6>
<h6>Size Large <small>Add <code>size="lg"</code></small></h6>
<p>
<b-button size="lg" variant="facebook icon" class="btn-brand"><i class="fa fa-facebook"></i></b-button>
<b-button size="lg" variant="twitter icon" class="btn-brand"><i class="fa fa-twitter"></i></b-button>
@@ -187,9 +191,11 @@
<b-col cols="12">
<b-card>
<div slot="header">
<strong>Brand Button</strong> <small>Only text. Usage ex.</small> <code style="text-transform:lowercase">&lt;b-button variant="facebook text"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/b-button&gt;</code>
<strong>Brand Button </strong> <small>Text only</small>
</div>
<h6>Size Small <small>Add this <code>size="sm"</code></small></h6>
<small>Usage </small> <code style="text-transform:lowercase">&lt;b-button variant="facebook text"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/b-button&gt;</code>
<hr/>
<h6>Size Small <small>Add <code>size="sm"</code></small></h6>
<p>
<b-button size="sm" variant="facebook text" class="btn-brand"><span>Facebook</span></b-button>
<b-button size="sm" variant="twitter text" class="btn-brand"><span>Twitter</span></b-button>
@@ -245,7 +251,7 @@
<b-button variant="foursquare text" class="btn-brand"><span>Forsquare</span></b-button>
<b-button variant="vimeo text" class="btn-brand"><span>Vimeo</span></b-button>
</p>
<h6>Size Large <small>Add this <code>size="lg"</code></small></h6>
<h6>Size Large <small>Add <code>size="lg"</code></small></h6>
<p>
<b-button size="lg" variant="facebook text" class="btn-brand"><span>Facebook</span></b-button>
<b-button size="lg" variant="twitter text" class="btn-brand"><span>Twitter</span></b-button>
@@ -281,7 +287,7 @@
<script>
export default {
name: 'social-buttons'
name: 'brand-buttons'
}
</script>
src/views/buttons/ButtonGroups.vue
+4 -4
View File
@@ -7,7 +7,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Bootstrap button group</strong>
<i class="fa fa-align-justify"></i><strong> Bootstrap button group</strong>
<div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/button-group" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small>
@@ -39,7 +39,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Button group</strong> sizing
<i class="fa fa-align-justify"></i><strong> Button group </strong>sizing
</div>
<div>
<b-button-group>
@@ -67,7 +67,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Button group</strong> dropdown support
<i class="fa fa-align-justify"></i><strong> Button group </strong>dropdown support
</div>
<div>
<b-button-group>
@@ -95,7 +95,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Button group</strong> vertical variation
<i class="fa fa-align-justify"></i><strong> Button group </strong>vertical variation
</div>
<div>
<b-button-group vertical>
src/views/buttons/Dropdowns.vue
+6 -6
View File
@@ -7,7 +7,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Bootstrap Dropdown</strong>
<i class="fa fa-align-justify"></i><strong> Bootstrap Dropdown</strong>
<div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/dropdown" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small>
@@ -54,7 +54,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Dropdown</strong> <small>positioning</small>
<i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>positioning</small>
</div>
<div>
<b-dropdown id="ddown-left" text="Left align" variant="primary" class="m-2">
@@ -98,7 +98,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Dropdown</strong> <small>hidden caret</small>
<i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>hidden caret</small>
</div>
<div>
<b-dropdown variant="link" size="lg" no-caret>
@@ -118,7 +118,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Dropdown</strong> <small>sizing</small>
<i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>sizing</small>
</div>
<div>
<b-dropdown id="ddown-lg" size="lg" text="Large" class="m-2">
@@ -152,7 +152,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Dropdown</strong> <small>headers and accessibility</small>
<i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>headers and accessibility</small>
</div>
<div>
<b-dropdown id="ddown-aria" text="Dropdown ARIA" variant="primary" class="m-2">
@@ -177,7 +177,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Dropdown</strong> <small><code>variant</code></small>
<i class="fa fa-align-justify"></i><strong> Dropdown </strong><small><code>variant</code></small>
</div>
<b-dropdown size="sm" id="ddown_primary" text="Primary" variant="primary" class="m-0">
<b-dropdown-item>First Action</b-dropdown-item>
src/views/buttons/StandardButtons.vue
+6
View File
@@ -686,3 +686,9 @@ export default {
}
}
</script>
<style scoped>
.btn.disabled {
cursor: auto;
}
</style>
src/views/notifications/Alerts.vue
+1 -1
View File
@@ -7,7 +7,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Bootstrap Alert</strong>
<i class="fa fa-align-justify"></i><strong> Bootstrap Alert</strong>
<div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/alert" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small>
src/views/notifications/Badges.vue
+1 -1
View File
@@ -7,7 +7,7 @@
header-tag="header"
footer-tag="footer">
<div slot="header">
<i class="fa fa-align-justify"></i> <strong>Bootstrap Badge</strong>
<i class="fa fa-align-justify"></i><strong> Bootstrap Badge</strong>
<div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/badge" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small>