sean/manja_ui_dev
1
0
Fork 0
Code Issues Pull Requests Actions 2 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/ProgressBars.vue
+9 -9
View File
@@ -29,15 +29,15 @@
<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>
@@ -48,9 +48,9 @@
<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>
@@ -63,9 +63,9 @@
<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>
src/views/base/Tooltips.vue
+2 -2
View File
@@ -78,7 +78,7 @@
<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>
@@ -98,7 +98,7 @@
<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/StandardButtons.vue
+6
View File
@@ -686,3 +686,9 @@ export default {
}
}
</script>
<style scoped>
.btn.disabled {
cursor: auto;
}
</style>