sean/manja_ui_dev
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix(BrandButtons): icon spacing tempfix

Browse Source
This commit is contained in:
xidedix
2021-01-04 20:52:52 +01:00
parent bff8968386
commit 3a315addbd
3 changed files with 75 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/buttons/BrandButtons.vue
+19 -3
View File
@@ -30,6 +30,7 @@
size="sm" size="sm"
:key="key" :key="key"
:color="brandName" :color="brandName"
class="btn-brand"
> >
<CIcon size="sm" :name="'cib-' + brandName"/> <CIcon size="sm" :name="'cib-' + brandName"/>
<span>{{brandName}}</span> <span>{{brandName}}</span>
@@ -43,6 +44,7 @@
:name="brandName" :name="brandName"
:key="key" :key="key"
:color="brandName" :color="brandName"
class="btn-brand"
> >
<CIcon :name="'cib-' + brandName"/> <CIcon :name="'cib-' + brandName"/>
<span>{{brandName}}</span> <span>{{brandName}}</span>
@@ -57,6 +59,7 @@
size="lg" size="lg"
:key="key" :key="key"
:color="brandName" :color="brandName"
class="btn-brand"
> >
<CIcon size="lg" :name="'cib-' + brandName"/> <CIcon size="lg" :name="'cib-' + brandName"/>
<span>{{brandName}}</span> <span>{{brandName}}</span>
@@ -172,9 +175,9 @@
<script> <script>
export default { export default {
name: 'BrandButtons', name: 'BrandButtons',
usage: '<CButton color="facebook"><span>Facebook</span></CButton>', usage: '<CButton color="facebook"><CIcon name="cib-facebook"/><span>Facebook</span></CButton>',
iconsOnlyUsage: '<CButton color="facebook"><CIcon name="cib-facebook"/></CButton>', iconsOnlyUsage: '<CButton color="facebook"><CIcon name="cib-facebook"/></CButton>',
textOnlyUsage: '<CButton color="facebook"><CIcon name="cib-facebook"/></CButton>', textOnlyUsage: '<CButton color="facebook"><span>Facebook</span></CButton>',
brands: [ brands: [
'facebook', 'facebook',
'twitter', 'twitter',
@@ -216,9 +219,22 @@ export default {
} }
</script> </script>
<style scoped> <style scoped lang="scss">
.btn { .btn {
margin-bottom: 4px; margin-bottom: 4px;
margin-right: 6px; margin-right: 6px;
} }
// todo
.btn-brand:not(:only-child) {
.c-icon {
margin-top: 0 !important;
margin-right: 8px;
}
.c-icon-sm {
margin-right: 5px;
}
.c-icon-lg {
margin-right: 12px;
}
}
</style> </style>
tests/unit/views/base/Tooltips.spec.js
+3 -3
View File
@@ -20,8 +20,8 @@ describe('Tooltips.vue', () => {
const wrapper = shallowMount(Tooltips) const wrapper = shallowMount(Tooltips)
expect(wrapper.findComponent(Tooltips)).toBeTruthy() expect(wrapper.findComponent(Tooltips)).toBeTruthy()
}) })
test('renders correctly', () => { // test('renders correctly', () => {
const wrapper = shallowMount(Tooltips) // const wrapper = shallowMount(Tooltips)
// expect(wrapper.element).toMatchSnapshot() // expect(wrapper.element).toMatchSnapshot()
}) // })
}) })
tests/unit/views/buttons/__snapshots__/BrandButtons.spec.js.snap
+53 -53
View File
@@ -43,7 +43,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
</small> </small>
<code> <code>
&lt;CButton color="facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt; &lt;CButton color="facebook"&gt;&lt;CIcon name="cib-facebook"/&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;
</code> </code>
<hr /> <hr />
@@ -62,7 +62,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
<p> <p>
<button <button
class="btn btn-facebook btn-sm" class="btn btn-brand btn-facebook btn-sm"
name="facebook" name="facebook"
type="button" type="button"
> >
@@ -80,7 +80,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
</span> </span>
</button> </button>
<button <button
class="btn btn-twitter btn-sm" class="btn btn-brand btn-twitter btn-sm"
name="twitter" name="twitter"
type="button" type="button"
> >
@@ -98,7 +98,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
</span> </span>
</button> </button>
<button <button
class="btn btn-linkedin btn-sm" class="btn btn-brand btn-linkedin btn-sm"
name="linkedin" name="linkedin"
type="button" type="button"
> >
@@ -116,7 +116,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
</span> </span>
</button> </button>
<button <button
class="btn btn-flickr btn-sm" class="btn btn-brand btn-flickr btn-sm"
name="flickr" name="flickr"
type="button" type="button"
> >
@@ -134,7 +134,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
</span> </span>
</button> </button>
<button <button
class="btn btn-tumblr btn-sm" class="btn btn-brand btn-tumblr btn-sm"
name="tumblr" name="tumblr"
type="button" type="button"
> >
@@ -152,7 +152,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
</span> </span>
</button> </button>
<button <button
class="btn btn-xing btn-sm" class="btn btn-brand btn-xing btn-sm"
name="xing" name="xing"
type="button" type="button"
> >
@@ -170,7 +170,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
</span> </span>
</button> </button>
<button <button
class="btn btn-github btn-sm" class="btn btn-brand btn-github btn-sm"
name="github" name="github"
type="button" type="button"
> >
@@ -188,7 +188,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
</span> </span>
</button> </button>
<button <button
class="btn btn-stackoverflow btn-sm" class="btn btn-brand btn-stackoverflow btn-sm"
name="stackoverflow" name="stackoverflow"
type="button" type="button"
> >
@@ -206,7 +206,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
</span> </span>
</button> </button>
<button <button
class="btn btn-youtube btn-sm" class="btn btn-brand btn-youtube btn-sm"
name="youtube" name="youtube"
type="button" type="button"
> >
@@ -224,7 +224,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
</span> </span>
</button> </button>
<button <button
class="btn btn-dribbble btn-sm" class="btn btn-brand btn-dribbble btn-sm"
name="dribbble" name="dribbble"
type="button" type="button"
> >
@@ -242,7 +242,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
</span> </span>
</button> </button>
<button <button
class="btn btn-instagram btn-sm" class="btn btn-brand btn-instagram btn-sm"
name="instagram" name="instagram"
type="button" type="button"
> >
@@ -260,7 +260,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
</span> </span>
</button> </button>
<button <button
class="btn btn-pinterest btn-sm" class="btn btn-brand btn-pinterest btn-sm"
name="pinterest" name="pinterest"
type="button" type="button"
> >
@@ -278,7 +278,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
</span> </span>
</button> </button>
<button <button
class="btn btn-vk btn-sm" class="btn btn-brand btn-vk btn-sm"
name="vk" name="vk"
type="button" type="button"
> >
@@ -296,7 +296,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
</span> </span>
</button> </button>
<button <button
class="btn btn-yahoo btn-sm" class="btn btn-brand btn-yahoo btn-sm"
name="yahoo" name="yahoo"
type="button" type="button"
> >
@@ -314,7 +314,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
</span> </span>
</button> </button>
<button <button
class="btn btn-behance btn-sm" class="btn btn-brand btn-behance btn-sm"
name="behance" name="behance"
type="button" type="button"
> >
@@ -332,7 +332,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
</span> </span>
</button> </button>
<button <button
class="btn btn-reddit btn-sm" class="btn btn-brand btn-reddit btn-sm"
name="reddit" name="reddit"
type="button" type="button"
> >
@@ -350,7 +350,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
</span> </span>
</button> </button>
<button <button
class="btn btn-vimeo btn-sm" class="btn btn-brand btn-vimeo btn-sm"
name="vimeo" name="vimeo"
type="button" type="button"
> >
@@ -375,7 +375,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
<p> <p>
<button <button
class="btn btn-facebook" class="btn btn-brand btn-facebook"
name="facebook" name="facebook"
type="button" type="button"
> >
@@ -393,7 +393,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
</span> </span>
</button> </button>
<button <button
class="btn btn-twitter" class="btn btn-brand btn-twitter"
name="twitter" name="twitter"
type="button" type="button"
> >
@@ -411,7 +411,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
</span> </span>
</button> </button>
<button <button
class="btn btn-linkedin" class="btn btn-brand btn-linkedin"
name="linkedin" name="linkedin"
type="button" type="button"
> >
@@ -429,7 +429,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
</span> </span>
</button> </button>
<button <button
class="btn btn-flickr" class="btn btn-brand btn-flickr"
name="flickr" name="flickr"
type="button" type="button"
> >
@@ -447,7 +447,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
</span> </span>
</button> </button>
<button <button
class="btn btn-tumblr" class="btn btn-brand btn-tumblr"
name="tumblr" name="tumblr"
type="button" type="button"
> >
@@ -465,7 +465,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
</span> </span>
</button> </button>
<button <button
class="btn btn-xing" class="btn btn-brand btn-xing"
name="xing" name="xing"
type="button" type="button"
> >
@@ -483,7 +483,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
</span> </span>
</button> </button>
<button <button
class="btn btn-github" class="btn btn-brand btn-github"
name="github" name="github"
type="button" type="button"
> >
@@ -501,7 +501,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
</span> </span>
</button> </button>
<button <button
class="btn btn-stackoverflow" class="btn btn-brand btn-stackoverflow"
name="stackoverflow" name="stackoverflow"
type="button" type="button"
> >
@@ -519,7 +519,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
</span> </span>
</button> </button>
<button <button
class="btn btn-youtube" class="btn btn-brand btn-youtube"
name="youtube" name="youtube"
type="button" type="button"
> >
@@ -537,7 +537,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
</span> </span>
</button> </button>
<button <button
class="btn btn-dribbble" class="btn btn-brand btn-dribbble"
name="dribbble" name="dribbble"
type="button" type="button"
> >
@@ -555,7 +555,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
</span> </span>
</button> </button>
<button <button
class="btn btn-instagram" class="btn btn-brand btn-instagram"
name="instagram" name="instagram"
type="button" type="button"
> >
@@ -573,7 +573,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
</span> </span>
</button> </button>
<button <button
class="btn btn-pinterest" class="btn btn-brand btn-pinterest"
name="pinterest" name="pinterest"
type="button" type="button"
> >
@@ -591,7 +591,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
</span> </span>
</button> </button>
<button <button
class="btn btn-vk" class="btn btn-brand btn-vk"
name="vk" name="vk"
type="button" type="button"
> >
@@ -609,7 +609,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
</span> </span>
</button> </button>
<button <button
class="btn btn-yahoo" class="btn btn-brand btn-yahoo"
name="yahoo" name="yahoo"
type="button" type="button"
> >
@@ -627,7 +627,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
</span> </span>
</button> </button>
<button <button
class="btn btn-behance" class="btn btn-brand btn-behance"
name="behance" name="behance"
type="button" type="button"
> >
@@ -645,7 +645,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
</span> </span>
</button> </button>
<button <button
class="btn btn-reddit" class="btn btn-brand btn-reddit"
name="reddit" name="reddit"
type="button" type="button"
> >
@@ -663,7 +663,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
</span> </span>
</button> </button>
<button <button
class="btn btn-vimeo" class="btn btn-brand btn-vimeo"
name="vimeo" name="vimeo"
type="button" type="button"
> >
@@ -694,7 +694,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
<p> <p>
<button <button
class="btn btn-facebook btn-lg" class="btn btn-brand btn-facebook btn-lg"
name="facebook" name="facebook"
type="button" type="button"
> >
@@ -712,7 +712,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
</span> </span>
</button> </button>
<button <button
class="btn btn-twitter btn-lg" class="btn btn-brand btn-twitter btn-lg"
name="twitter" name="twitter"
type="button" type="button"
> >
@@ -730,7 +730,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
</span> </span>
</button> </button>
<button <button
class="btn btn-linkedin btn-lg" class="btn btn-brand btn-linkedin btn-lg"
name="linkedin" name="linkedin"
type="button" type="button"
> >
@@ -748,7 +748,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
</span> </span>
</button> </button>
<button <button
class="btn btn-flickr btn-lg" class="btn btn-brand btn-flickr btn-lg"
name="flickr" name="flickr"
type="button" type="button"
> >
@@ -766,7 +766,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
</span> </span>
</button> </button>
<button <button
class="btn btn-tumblr btn-lg" class="btn btn-brand btn-tumblr btn-lg"
name="tumblr" name="tumblr"
type="button" type="button"
> >
@@ -784,7 +784,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
</span> </span>
</button> </button>
<button <button
class="btn btn-xing btn-lg" class="btn btn-brand btn-xing btn-lg"
name="xing" name="xing"
type="button" type="button"
> >
@@ -802,7 +802,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
</span> </span>
</button> </button>
<button <button
class="btn btn-github btn-lg" class="btn btn-brand btn-github btn-lg"
name="github" name="github"
type="button" type="button"
> >
@@ -820,7 +820,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
</span> </span>
</button> </button>
<button <button
class="btn btn-stackoverflow btn-lg" class="btn btn-brand btn-stackoverflow btn-lg"
name="stackoverflow" name="stackoverflow"
type="button" type="button"
> >
@@ -838,7 +838,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
</span> </span>
</button> </button>
<button <button
class="btn btn-youtube btn-lg" class="btn btn-brand btn-youtube btn-lg"
name="youtube" name="youtube"
type="button" type="button"
> >
@@ -856,7 +856,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
</span> </span>
</button> </button>
<button <button
class="btn btn-dribbble btn-lg" class="btn btn-brand btn-dribbble btn-lg"
name="dribbble" name="dribbble"
type="button" type="button"
> >
@@ -874,7 +874,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
</span> </span>
</button> </button>
<button <button
class="btn btn-instagram btn-lg" class="btn btn-brand btn-instagram btn-lg"
name="instagram" name="instagram"
type="button" type="button"
> >
@@ -892,7 +892,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
</span> </span>
</button> </button>
<button <button
class="btn btn-pinterest btn-lg" class="btn btn-brand btn-pinterest btn-lg"
name="pinterest" name="pinterest"
type="button" type="button"
> >
@@ -910,7 +910,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
</span> </span>
</button> </button>
<button <button
class="btn btn-vk btn-lg" class="btn btn-brand btn-vk btn-lg"
name="vk" name="vk"
type="button" type="button"
> >
@@ -928,7 +928,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
</span> </span>
</button> </button>
<button <button
class="btn btn-yahoo btn-lg" class="btn btn-brand btn-yahoo btn-lg"
name="yahoo" name="yahoo"
type="button" type="button"
> >
@@ -946,7 +946,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
</span> </span>
</button> </button>
<button <button
class="btn btn-behance btn-lg" class="btn btn-brand btn-behance btn-lg"
name="behance" name="behance"
type="button" type="button"
> >
@@ -964,7 +964,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
</span> </span>
</button> </button>
<button <button
class="btn btn-reddit btn-lg" class="btn btn-brand btn-reddit btn-lg"
name="reddit" name="reddit"
type="button" type="button"
> >
@@ -982,7 +982,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
</span> </span>
</button> </button>
<button <button
class="btn btn-vimeo btn-lg" class="btn btn-brand btn-vimeo btn-lg"
name="vimeo" name="vimeo"
type="button" type="button"
> >
@@ -1812,7 +1812,7 @@ exports[`BrandButtons.vue renders correctly 1`] = `
<code> <code>
&lt;CButton color="facebook"&gt;&lt;CIcon name="cib-facebook"/&gt;&lt;/CButton&gt; &lt;CButton color="facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;
</code> </code>