sean/manja_dev_ui
1
0
Fork 0
Code Issues Pull Requests Actions 3 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
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>