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

refactor: remove external icon libraries

Browse Source
This commit is contained in:
woothu
2019-06-14 11:06:46 +02:00
parent 501ed1a956
commit 906345d15b
12 changed files with 245 additions and 4963 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/buttons/BrandButtons.vue
+140 -289
View File
@@ -8,154 +8,53 @@
</CCardHeader>
<CCardBody>
<small>Usage </small>
<code>&lt;CButton variant="facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;</code>
<code>
&lt;CButton variant="facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;
</code>
<hr/>
<h6>
Size Small
<small>Add <code>size="sm"</code></small>
</h6>
<p>
<!-- <template v-for="(brand, key) in $options.brands">
<button
type="button"
:class="`c-btn-${brand}`"
class="c-btn c-btn-sm c-btn-brand c-mr-1"
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
size="sm"
:key="key"
:variant="brandName"
>
<i :class="`fa fa-${brand}`"></i>
<span>{{brand}}</span>
</button>
</template> -->
<CButton size="sm" class="c-mr-1 c-btn-brand" variant="facebook">
<i class="fa fa-facebook"></i><span>Facebook</span>
</CButton>
<CButton size="sm" class="c-mr-1 c-btn-brand" variant="twitter">
<i class="fa fa-twitter"></i><span>Twitter</span>
</CButton>
<CButton size="sm" variant="linkedin" class="c-mr-1 c-btn-brand">
<i class="fa fa-linkedin"></i><span>LinkedIn</span>
</CButton>
<CButton size="sm" variant="flickr" class="c-mr-1 c-btn-brand">
<i class="fa fa-flickr"></i><span>Flickr</span>
</CButton>
<CButton size="sm" variant="tumblr" class="c-mr-1 c-btn-brand">
<i class="fa fa-tumblr"></i><span>Tumblr</span>
</CButton>
<CButton size="sm" variant="xing" class="c-mr-1 c-btn-brand">
<i class="fa fa-xing"></i><span>Xing</span>
</CButton>
<CButton size="sm" variant="github" class="c-mr-1 c-btn-brand">
<i class="fa fa-github"></i><span>Github</span>
</CButton>
<CButton size="sm" variant="html5" class="c-mr-1 c-btn-brand">
<i class="fa fa-html5"></i><span>HTML5</span>
</CButton>
<CButton size="sm" variant="openid" class="c-mr-1 c-btn-brand">
<i class="fa fa-openid"></i><span>OpenID</span>
</CButton>
<CButton size="sm" variant="stack-overflow" class="c-mr-1 c-btn-brand">
<i class="fa fa-stack-overflow"></i><span>StackOverflow</span>
</CButton>
<CButton size="sm" variant="css3" class="c-mr-1 c-btn-brand">
<i class="fa fa-css3"></i><span>CSS3</span>
</CButton>
<CButton size="sm" variant="youtube" class="c-mr-1 c-btn-brand">
<i class="fa fa-youtube"></i><span>YouTube</span>
</CButton>
<CButton size="sm" variant="dribbble" class="c-mr-1 c-btn-brand">
<i class="fa fa-dribbble"></i><span>Dribbble</span>
</CButton>
<CButton size="sm" variant="google-plus" class="c-mr-1 c-btn-brand">
<i class="fa fa-google-plus"></i><span>Google+</span>
</CButton>
<CButton size="sm" variant="instagram" class="c-mr-1 c-btn-brand">
<i class="fa fa-instagram"></i><span>Instagram</span>
</CButton>
<CButton size="sm" variant="pinterest" class="c-mr-1 c-btn-brand">
<i class="fa fa-pinterest"></i><span>Pinterest</span>
</CButton>
<CButton size="sm" variant="vk" class="c-mr-1 c-btn-brand">
<i class="fa fa-vk"></i><span>VK</span>
</CButton>
<CButton size="sm" variant="yahoo" class="c-mr-1 c-btn-brand">
<i class="fa fa-yahoo"></i><span>Yahoo</span>
</CButton>
<CButton size="sm" variant="behance" class="c-mr-1 c-btn-brand">
<i class="fa fa-behance"></i><span>Behance</span>
</CButton>
<CButton size="sm" variant="dropbox" class="c-mr-1 c-btn-brand">
<i class="fa fa-dropbox"></i><span>Dropbox</span>
</CButton>
<CButton size="sm" variant="reddit" class="c-mr-1 c-btn-brand">
<i class="fa fa-reddit"></i><span>Reddit</span>
</CButton>
<CButton size="sm" variant="spotify" class="c-mr-1 c-btn-brand">
<i class="fa fa-spotify"></i><span>Spotify</span>
</CButton>
<CButton size="sm" variant="vine" class="c-mr-1 c-btn-brand">
<i class="fa fa-vine"></i><span>Vine</span>
</CButton>
<CButton size="sm" variant="foursquare" class="c-mr-1 c-btn-brand">
<i class="fa fa-foursquare"></i><span>Forsquare</span>
</CButton>
<CButton size="sm" variant="vimeo" class="c-mr-1 c-btn-brand">
<i class="fa fa-vimeo"></i><span>Vimeo</span>
</CButton>
<CIcon :name="brandName"/>
<span>{{brandName}}</span>
</CButton>
</template>
</p>
<h6>Size Normal</h6>
<p>
<CButton variant="facebook" class="c-mr-1 c-btn-brand"><i class="fa fa-facebook"></i><span>Facebook</span></CButton>
<CButton variant="twitter" class="c-mr-1 c-btn-brand"><i class="fa fa-twitter"></i><span>Twitter</span></CButton>
<CButton variant="linkedin" class="c-mr-1 c-btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></CButton>
<CButton variant="flickr" class="c-mr-1 c-btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></CButton>
<CButton variant="tumblr" class="c-mr-1 c-btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></CButton>
<CButton variant="xing" class="c-mr-1 c-btn-brand"><i class="fa fa-xing"></i><span>Xing</span></CButton>
<CButton variant="github" class="c-mr-1 c-btn-brand"><i class="fa fa-github"></i><span>Github</span></CButton>
<CButton variant="html5" class="c-mr-1 c-btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></CButton>
<CButton variant="openid" class="c-mr-1 c-btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></CButton>
<CButton variant="stack-overflow" class="c-mr-1 c-btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></CButton>
<CButton variant="css3" class="c-mr-1 c-btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></CButton>
<CButton variant="youtube" class="c-mr-1 c-btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></CButton>
<CButton variant="dribbble" class="c-mr-1 c-btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></CButton>
<CButton variant="google-plus" class="c-mr-1 c-btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></CButton>
<CButton variant="instagram" class="c-mr-1 c-btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></CButton>
<CButton variant="pinterest" class="c-mr-1 c-btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></CButton>
<CButton variant="vk" class="c-mr-1 c-btn-brand"><i class="fa fa-vk"></i><span>VK</span></CButton>
<CButton variant="yahoo" class="c-mr-1 c-btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></CButton>
<CButton variant="behance" class="c-mr-1 c-btn-brand"><i class="fa fa-behance"></i><span>Behance</span></CButton>
<CButton variant="dropbox" class="c-mr-1 c-btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></CButton>
<CButton variant="reddit" class="c-mr-1 c-btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></CButton>
<CButton variant="spotify" class="c-mr-1 c-btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></CButton>
<CButton variant="vine" class="c-mr-1 c-btn-brand"><i class="fa fa-vine"></i><span>Vine</span></CButton>
<CButton variant="foursquare" class="c-mr-1 c-btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></CButton>
<CButton variant="vimeo" class="c-mr-1 c-btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></CButton>
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
:key="key"
:variant="brandName"
>
<CIcon :name="brandName"/>
<span>{{brandName}}</span>
</CButton>
</template>
</p>
<h6>Size Large <small>Add <code>size="lg"</code></small></h6>
<p>
<CButton size="lg" variant="facebook" class="c-mr-1 c-btn-brand"><i class="fa fa-facebook"></i><span>Facebook</span></CButton>
<CButton size="lg" variant="twitter" class="c-mr-1 c-btn-brand"><i class="fa fa-twitter"></i><span>Twitter</span></CButton>
<CButton size="lg" variant="linkedin" class="c-mr-1 c-btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></CButton>
<CButton size="lg" variant="flickr" class="c-mr-1 c-btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></CButton>
<CButton size="lg" variant="tumblr" class="c-mr-1 c-btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></CButton>
<CButton size="lg" variant="xing" class="c-mr-1 c-btn-brand"><i class="fa fa-xing"></i><span>Xing</span></CButton>
<CButton size="lg" variant="github" class="c-mr-1 c-btn-brand"><i class="fa fa-github"></i><span>Github</span></CButton>
<CButton size="lg" variant="html5" class="c-mr-1 c-btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></CButton>
<CButton size="lg" variant="openid" class="c-mr-1 c-btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></CButton>
<CButton size="lg" variant="stack-overflow" class="c-mr-1 c-btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></CButton>
<CButton size="lg" variant="css3" class="c-mr-1 c-btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></CButton>
<CButton size="lg" variant="youtube" class="c-mr-1 c-btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></CButton>
<CButton size="lg" variant="dribbble" class="c-mr-1 c-btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></CButton>
<CButton size="lg" variant="google-plus" class="c-mr-1 c-btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></CButton>
<CButton size="lg" variant="instagram" class="c-mr-1 c-btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></CButton>
<CButton size="lg" variant="pinterest" class="c-mr-1 c-btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></CButton>
<CButton size="lg" variant="vk" class="c-mr-1 c-btn-brand"><i class="fa fa-vk"></i><span>VK</span></CButton>
<CButton size="lg" variant="yahoo" class="c-mr-1 c-btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></CButton>
<CButton size="lg" variant="behance" class="c-mr-1 c-btn-brand"><i class="fa fa-behance"></i><span>Behance</span></CButton>
<CButton size="lg" variant="dropbox" class="c-mr-1 c-btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></CButton>
<CButton size="lg" variant="reddit" class="c-mr-1 c-btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></CButton>
<CButton size="lg" variant="spotify" class="c-mr-1 c-btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></CButton>
<CButton size="lg" variant="vine" class="c-mr-1 c-btn-brand"><i class="fa fa-vine"></i><span>Vine</span></CButton>
<CButton size="lg" variant="foursquare" class="c-mr-1 c-btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></CButton>
<CButton size="lg" variant="vimeo" class="c-mr-1 c-btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></CButton>
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
size="lg"
:key="key"
:variant="brandName"
>
<CIcon :name="brandName"/>
<span>{{brandName}}</span>
</CButton>
</template>
</p>
</CCardBody>
</CCard>
@@ -166,91 +65,48 @@
<strong>Brand Button </strong> <small>Icons only</small>
</CCardHeader>
<CCardBody>
<small>Usage </small> <code>&lt;CButton variant="facebook icon"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;</code>
<small>Usage </small>
<code>
{{ `<CButton variant="facebook"><CIcon name="facebook"/></CButton>` }}
</code>
<hr/>
<h6>Size Small <small>Add <code>size="sm"</code></small></h6>
<p>
<CButton size="sm" variant="facebook icon" class="c-mr-1 c-btn-brand"><i class="fa fa-facebook"></i></CButton>
<CButton size="sm" variant="twitter icon" class="c-mr-1 c-btn-brand"><i class="fa fa-twitter"></i></CButton>
<CButton size="sm" variant="linkedin icon" class="c-mr-1 c-btn-brand"><i class="fa fa-linkedin"></i></CButton>
<CButton size="sm" variant="flickr icon" class="c-mr-1 c-btn-brand"><i class="fa fa-flickr"></i></CButton>
<CButton size="sm" variant="tumblr icon" class="c-mr-1 c-btn-brand"><i class="fa fa-tumblr"></i></CButton>
<CButton size="sm" variant="xing icon" class="c-mr-1 c-btn-brand"><i class="fa fa-xing"></i></CButton>
<CButton size="sm" variant="github icon" class="c-mr-1 c-btn-brand"><i class="fa fa-github"></i></CButton>
<CButton size="sm" variant="html5 icon" class="c-mr-1 c-btn-brand"><i class="fa fa-html5"></i></CButton>
<CButton size="sm" variant="openid icon" class="c-mr-1 c-btn-brand"><i class="fa fa-openid"></i></CButton>
<CButton size="sm" variant="stack-overflow icon" class="c-mr-1 c-btn-brand"><i class="fa fa-stack-overflow"></i></CButton>
<CButton size="sm" variant="css3 icon" class="c-mr-1 c-btn-brand"><i class="fa fa-css3"></i></CButton>
<CButton size="sm" variant="youtube icon" class="c-mr-1 c-btn-brand"><i class="fa fa-youtube"></i></CButton>
<CButton size="sm" variant="dribbble icon" class="c-mr-1 c-btn-brand"><i class="fa fa-dribbble"></i></CButton>
<CButton size="sm" variant="google-plus icon" class="c-mr-1 c-btn-brand"><i class="fa fa-google-plus"></i></CButton>
<CButton size="sm" variant="instagram icon" class="c-mr-1 c-btn-brand"><i class="fa fa-instagram"></i></CButton>
<CButton size="sm" variant="pinterest icon" class="c-mr-1 c-btn-brand"><i class="fa fa-pinterest"></i></CButton>
<CButton size="sm" variant="vk icon" class="c-mr-1 c-btn-brand"><i class="fa fa-vk"></i></CButton>
<CButton size="sm" variant="yahoo icon" class="c-mr-1 c-btn-brand"><i class="fa fa-yahoo"></i></CButton>
<CButton size="sm" variant="behance icon" class="c-mr-1 c-btn-brand"><i class="fa fa-behance"></i></CButton>
<CButton size="sm" variant="dropbox icon" class="c-mr-1 c-btn-brand"><i class="fa fa-dropbox"></i></CButton>
<CButton size="sm" variant="reddit icon" class="c-mr-1 c-btn-brand"><i class="fa fa-reddit"></i></CButton>
<CButton size="sm" variant="spotify icon" class="c-mr-1 c-btn-brand"><i class="fa fa-spotify"></i></CButton>
<CButton size="sm" variant="vine icon" class="c-mr-1 c-btn-brand"><i class="fa fa-vine"></i></CButton>
<CButton size="sm" variant="foursquare icon" class="c-mr-1 c-btn-brand"><i class="fa fa-foursquare"></i></CButton>
<CButton size="sm" variant="vimeo icon" class="c-mr-1 c-btn-brand"><i class="fa fa-vimeo"></i></CButton>
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
size="sm"
:key="key"
:variant="brandName"
>
<CIcon :name="brandName"/>
</CButton>
</template>
</p>
<h6>Size Normal</h6>
<p>
<CButton variant="facebook icon" class="c-mr-1 c-btn-brand"><i class="fa fa-facebook"></i></CButton>
<CButton variant="twitter icon" class="c-mr-1 c-btn-brand"><i class="fa fa-twitter"></i></CButton>
<CButton variant="linkedin icon" class="c-mr-1 c-btn-brand"><i class="fa fa-linkedin"></i></CButton>
<CButton variant="flickr icon" class="c-mr-1 c-btn-brand"><i class="fa fa-flickr"></i></CButton>
<CButton variant="tumblr icon" class="c-mr-1 c-btn-brand"><i class="fa fa-tumblr"></i></CButton>
<CButton variant="xing icon" class="c-mr-1 c-btn-brand"><i class="fa fa-xing"></i></CButton>
<CButton variant="github icon" class="c-mr-1 c-btn-brand"><i class="fa fa-github"></i></CButton>
<CButton variant="html5 icon" class="c-mr-1 c-btn-brand"><i class="fa fa-html5"></i></CButton>
<CButton variant="openid icon" class="c-mr-1 c-btn-brand"><i class="fa fa-openid"></i></CButton>
<CButton variant="stack-overflow icon" class="c-mr-1 c-btn-brand"><i class="fa fa-stack-overflow"></i></CButton>
<CButton variant="css3 icon" class="c-mr-1 c-btn-brand"><i class="fa fa-css3"></i></CButton>
<CButton variant="youtube icon" class="c-mr-1 c-btn-brand"><i class="fa fa-youtube"></i></CButton>
<CButton variant="dribbble icon" class="c-mr-1 c-btn-brand"><i class="fa fa-dribbble"></i></CButton>
<CButton variant="google-plus icon" class="c-mr-1 c-btn-brand"><i class="fa fa-google-plus"></i></CButton>
<CButton variant="instagram icon" class="c-mr-1 c-btn-brand"><i class="fa fa-instagram"></i></CButton>
<CButton variant="pinterest icon" class="c-mr-1 c-btn-brand"><i class="fa fa-pinterest"></i></CButton>
<CButton variant="vk icon" class="c-mr-1 c-btn-brand"><i class="fa fa-vk"></i></CButton>
<CButton variant="yahoo icon" class="c-mr-1 c-btn-brand"><i class="fa fa-yahoo"></i></CButton>
<CButton variant="behance icon" class="c-mr-1 c-btn-brand"><i class="fa fa-behance"></i></CButton>
<CButton variant="dropbox icon" class="c-mr-1 c-btn-brand"><i class="fa fa-dropbox"></i></CButton>
<CButton variant="reddit icon" class="c-mr-1 c-btn-brand"><i class="fa fa-reddit"></i></CButton>
<CButton variant="spotify icon" class="c-mr-1 c-btn-brand"><i class="fa fa-spotify"></i></CButton>
<CButton variant="vine icon" class="c-mr-1 c-btn-brand"><i class="fa fa-vine"></i></CButton>
<CButton variant="foursquare icon" class="c-mr-1 c-btn-brand"><i class="fa fa-foursquare"></i></CButton>
<CButton variant="vimeo icon" class="c-mr-1 c-btn-brand"><i class="fa fa-vimeo"></i></CButton>
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
:key="key"
:variant="brandName"
>
<CIcon :name="brandName"/>
</CButton>
</template>
</p>
<h6>Size Large <small>Add <code>size="lg"</code></small></h6>
<p>
<CButton size="lg" variant="facebook icon" class="c-mr-1 c-btn-brand"><i class="fa fa-facebook"></i></CButton>
<CButton size="lg" variant="twitter icon" class="c-mr-1 c-btn-brand"><i class="fa fa-twitter"></i></CButton>
<CButton size="lg" variant="linkedin icon" class="c-mr-1 c-btn-brand"><i class="fa fa-linkedin"></i></CButton>
<CButton size="lg" variant="flickr icon" class="c-mr-1 c-btn-brand"><i class="fa fa-flickr"></i></CButton>
<CButton size="lg" variant="tumblr icon" class="c-mr-1 c-btn-brand"><i class="fa fa-tumblr"></i></CButton>
<CButton size="lg" variant="xing icon" class="c-mr-1 c-btn-brand"><i class="fa fa-xing"></i></CButton>
<CButton size="lg" variant="github icon" class="c-mr-1 c-btn-brand"><i class="fa fa-github"></i></CButton>
<CButton size="lg" variant="html5 icon" class="c-mr-1 c-btn-brand"><i class="fa fa-html5"></i></CButton>
<CButton size="lg" variant="openid icon" class="c-mr-1 c-btn-brand"><i class="fa fa-openid"></i></CButton>
<CButton size="lg" variant="stack-overflow icon" class="c-mr-1 c-btn-brand"><i class="fa fa-stack-overflow"></i></CButton>
<CButton size="lg" variant="css3 icon" class="c-mr-1 c-btn-brand"><i class="fa fa-css3"></i></CButton>
<CButton size="lg" variant="youtube icon" class="c-mr-1 c-btn-brand"><i class="fa fa-youtube"></i></CButton>
<CButton size="lg" variant="dribbble icon" class="c-mr-1 c-btn-brand"><i class="fa fa-dribbble"></i></CButton>
<CButton size="lg" variant="google-plus icon" class="c-mr-1 c-btn-brand"><i class="fa fa-google-plus"></i></CButton>
<CButton size="lg" variant="instagram icon" class="c-mr-1 c-btn-brand"><i class="fa fa-instagram"></i></CButton>
<CButton size="lg" variant="pinterest icon" class="c-mr-1 c-btn-brand"><i class="fa fa-pinterest"></i></CButton>
<CButton size="lg" variant="vk icon" class="c-mr-1 c-btn-brand"><i class="fa fa-vk"></i></CButton>
<CButton size="lg" variant="yahoo icon" class="c-mr-1 c-btn-brand"><i class="fa fa-yahoo"></i></CButton>
<CButton size="lg" variant="behance icon" class="c-mr-1 c-btn-brand"><i class="fa fa-behance"></i></CButton>
<CButton size="lg" variant="dropbox icon" class="c-mr-1 c-btn-brand"><i class="fa fa-dropbox"></i></CButton>
<CButton size="lg" variant="reddit icon" class="c-mr-1 c-btn-brand"><i class="fa fa-reddit"></i></CButton>
<CButton size="lg" variant="spotify icon" class="c-mr-1 c-btn-brand"><i class="fa fa-spotify"></i></CButton>
<CButton size="lg" variant="vine icon" class="c-mr-1 c-btn-brand"><i class="fa fa-vine"></i></CButton>
<CButton size="lg" variant="foursquare icon" class="c-mr-1 c-btn-brand"><i class="fa fa-foursquare"></i></CButton>
<CButton size="lg" variant="vimeo icon" class="c-mr-1 c-btn-brand"><i class="fa fa-vimeo"></i></CButton>
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
size="lg"
:key="key"
:variant="brandName"
>
<CIcon :name="brandName"/>
</CButton>
</template>
</p>
</CCardBody>
</CCard>
@@ -262,91 +118,45 @@
<strong>Brand Button </strong> <small>Text only</small>
</CCardHeader>
<CCardBody>
<small>Usage </small> <code>&lt;CButton variant="facebook text"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;</code>
<small>Usage </small> <code>&lt;CButton variant="facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;</code>
<hr/>
<h6>Size Small <small>Add <code>size="sm"</code></small></h6>
<p>
<CButton size="sm" variant="facebook text" class="c-mr-1 c-btn-brand"><span>Facebook</span></CButton>
<CButton size="sm" variant="twitter text" class="c-mr-1 c-btn-brand"><span>Twitter</span></CButton>
<CButton size="sm" variant="linkedin text" class="c-mr-1 c-btn-brand"><span>LinkedIn</span></CButton>
<CButton size="sm" variant="flickr text" class="c-mr-1 c-btn-brand"><span>Flickr</span></CButton>
<CButton size="sm" variant="tumblr text" class="c-mr-1 c-btn-brand"><span>Tumblr</span></CButton>
<CButton size="sm" variant="xing text" class="c-mr-1 c-btn-brand"><span>Xing</span></CButton>
<CButton size="sm" variant="github text" class="c-mr-1 c-btn-brand"><span>Github</span></CButton>
<CButton size="sm" variant="html5 text" class="c-mr-1 c-btn-brand"><span>HTML5</span></CButton>
<CButton size="sm" variant="openid text" class="c-mr-1 c-btn-brand"><span>OpenID</span></CButton>
<CButton size="sm" variant="stack-overflow text" class="c-mr-1 c-btn-brand"><span>StackOverflow</span></CButton>
<CButton size="sm" variant="css3 text" class="c-mr-1 c-btn-brand"><span>CSS3</span></CButton>
<CButton size="sm" variant="youtube text" class="c-mr-1 c-btn-brand"><span>YouTube</span></CButton>
<CButton size="sm" variant="dribbble text" class="c-mr-1 c-btn-brand"><span>Dribbble</span></CButton>
<CButton size="sm" variant="google-plus text" class="c-mr-1 c-btn-brand"><span>Google+</span></CButton>
<CButton size="sm" variant="instagram text" class="c-mr-1 c-btn-brand"><span>Instagram</span></CButton>
<CButton size="sm" variant="pinterest text" class="c-mr-1 c-btn-brand"><span>Pinterest</span></CButton>
<CButton size="sm" variant="vk text" class="c-mr-1 c-btn-brand"><span>VK</span></CButton>
<CButton size="sm" variant="yahoo text" class="c-mr-1 c-btn-brand"><span>Yahoo</span></CButton>
<CButton size="sm" variant="behance text" class="c-mr-1 c-btn-brand"><span>Behance</span></CButton>
<CButton size="sm" variant="dropbox text" class="c-mr-1 c-btn-brand"><span>Dropbox</span></CButton>
<CButton size="sm" variant="reddit text" class="c-mr-1 c-btn-brand"><span>Reddit</span></CButton>
<CButton size="sm" variant="spotify text" class="c-mr-1 c-btn-brand"><span>Spotify</span></CButton>
<CButton size="sm" variant="vine text" class="c-mr-1 c-btn-brand"><span>Vine</span></CButton>
<CButton size="sm" variant="foursquare text" class="c-mr-1 c-btn-brand"><span>Forsquare</span></CButton>
<CButton size="sm" variant="vimeo text" class="c-mr-1 c-btn-brand"><span>Vimeo</span></CButton>
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
size="sm"
:key="key"
:variant="brandName"
>
<span>{{brandName}}</span>
</CButton>
</template>
</p>
<h6>Size Normal</h6>
<p>
<CButton variant="facebook text" class="c-mr-1 c-btn-brand"><span>Facebook</span></CButton>
<CButton variant="twitter text" class="c-mr-1 c-btn-brand"><span>Twitter</span></CButton>
<CButton variant="linkedin text" class="c-mr-1 c-btn-brand"><span>LinkedIn</span></CButton>
<CButton variant="flickr text" class="c-mr-1 c-btn-brand"><span>Flickr</span></CButton>
<CButton variant="tumblr text" class="c-mr-1 c-btn-brand"><span>Tumblr</span></CButton>
<CButton variant="xing text" class="c-mr-1 c-btn-brand"><span>Xing</span></CButton>
<CButton variant="github text" class="c-mr-1 c-btn-brand"><span>Github</span></CButton>
<CButton variant="html5 text" class="c-mr-1 c-btn-brand"><span>HTML5</span></CButton>
<CButton variant="openid text" class="c-mr-1 c-btn-brand"><span>OpenID</span></CButton>
<CButton variant="stack-overflow text" class="c-mr-1 c-btn-brand"><span>StackOverflow</span></CButton>
<CButton variant="css3 text" class="c-mr-1 c-btn-brand"><span>CSS3</span></CButton>
<CButton variant="youtube text" class="c-mr-1 c-btn-brand"><span>YouTube</span></CButton>
<CButton variant="dribbble text" class="c-mr-1 c-btn-brand"><span>Dribbble</span></CButton>
<CButton variant="google-plus text" class="c-mr-1 c-btn-brand"><span>Google+</span></CButton>
<CButton variant="instagram text" class="c-mr-1 c-btn-brand"><span>Instagram</span></CButton>
<CButton variant="pinterest text" class="c-mr-1 c-btn-brand"><span>Pinterest</span></CButton>
<CButton variant="vk text" class="c-mr-1 c-btn-brand"><span>VK</span></CButton>
<CButton variant="yahoo text" class="c-mr-1 c-btn-brand"><span>Yahoo</span></CButton>
<CButton variant="behance text" class="c-mr-1 c-btn-brand"><span>Behance</span></CButton>
<CButton variant="dropbox text" class="c-mr-1 c-btn-brand"><span>Dropbox</span></CButton>
<CButton variant="reddit text" class="c-mr-1 c-btn-brand"><span>Reddit</span></CButton>
<CButton variant="spotify text" class="c-mr-1 c-btn-brand"><span>Spotify</span></CButton>
<CButton variant="vine text" class="c-mr-1 c-btn-brand"><span>Vine</span></CButton>
<CButton variant="foursquare text" class="c-mr-1 c-btn-brand"><span>Forsquare</span></CButton>
<CButton variant="vimeo text" class="c-mr-1 c-btn-brand"><span>Vimeo</span></CButton>
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
:key="key"
:variant="brandName"
>
<span>{{brandName}}</span>
</CButton>
</template>
</p>
<h6>Size Large <small>Add <code>size="lg"</code></small></h6>
<p>
<CButton size="lg" variant="facebook text" class="c-mr-1 c-btn-brand"><span>Facebook</span></CButton>
<CButton size="lg" variant="twitter text" class="c-mr-1 c-btn-brand"><span>Twitter</span></CButton>
<CButton size="lg" variant="linkedin text" class="c-mr-1 c-btn-brand"><span>LinkedIn</span></CButton>
<CButton size="lg" variant="flickr text" class="c-mr-1 c-btn-brand"><span>Flickr</span></CButton>
<CButton size="lg" variant="tumblr text" class="c-mr-1 c-btn-brand"><span>Tumblr</span></CButton>
<CButton size="lg" variant="xing text" class="c-mr-1 c-btn-brand"><span>Xing</span></CButton>
<CButton size="lg" variant="github text" class="c-mr-1 c-btn-brand"><span>Github</span></CButton>
<CButton size="lg" variant="html5 text" class="c-mr-1 c-btn-brand"><span>HTML5</span></CButton>
<CButton size="lg" variant="openid text" class="c-mr-1 c-btn-brand"><span>OpenID</span></CButton>
<CButton size="lg" variant="stack-overflow text" class="c-mr-1 c-btn-brand"><span>StackOverflow</span></CButton>
<CButton size="lg" variant="css3 text" class="c-mr-1 c-btn-brand"><span>CSS3</span></CButton>
<CButton size="lg" variant="youtube text" class="c-mr-1 c-btn-brand"><span>YouTube</span></CButton>
<CButton size="lg" variant="dribbble text" class="c-mr-1 c-btn-brand"><span>Dribbble</span></CButton>
<CButton size="lg" variant="google-plus text" class="c-mr-1 c-btn-brand"><span>Google+</span></CButton>
<CButton size="lg" variant="instagram text" class="c-mr-1 c-btn-brand"><span>Instagram</span></CButton>
<CButton size="lg" variant="pinterest text" class="c-mr-1 c-btn-brand"><span>Pinterest</span></CButton>
<CButton size="lg" variant="vk text" class="c-mr-1 c-btn-brand"><span>VK</span></CButton>
<CButton size="lg" variant="yahoo text" class="c-mr-1 c-btn-brand"><span>Yahoo</span></CButton>
<CButton size="lg" variant="behance text" class="c-mr-1 c-btn-brand"><span>Behance</span></CButton>
<CButton size="lg" variant="dropbox text" class="c-mr-1 c-btn-brand"><span>Dropbox</span></CButton>
<CButton size="lg" variant="reddit text" class="c-mr-1 c-btn-brand"><span>Reddit</span></CButton>
<CButton size="lg" variant="spotify text" class="c-mr-1 c-btn-brand"><span>Spotify</span></CButton>
<CButton size="lg" variant="vine text" class="c-mr-1 c-btn-brand"><span>Vine</span></CButton>
<CButton size="lg" variant="foursquare text" class="c-mr-1 c-btn-brand"><span>Forsquare</span></CButton>
<CButton size="lg" variant="vimeo text" class="c-mr-1 c-btn-brand"><span>Vimeo</span></CButton>
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
size="lg"
:key="key"
:variant="brandName"
>
<span>{{brandName}}</span>
</CButton>
</template>
</p>
</CCardBody>
</CCard>
@@ -358,12 +168,53 @@
<script>
export default {
name: 'brand-buttons',
brands: ['facebook', 'twitter', 'linkedin']
brands: [
'facebook',
'twitter',
'linkedin',
'flickr',
'tumblr',
'xing',
'github',
'stack-overflow',
'youtube',
'dribbble',
'instagram',
'pinterest',
'vk',
'yahoo',
'behance',
'reddit',
'vimeo'
]
// labels: {
// facebook: 'Facebook',
// twitter: 'Twitter',
// linkedin: 'LinkedIn',
// flickr: 'Flickr',
// tumblr: 'Tumblr',
// xing: 'Xing',
// github: 'Github',
// 'stack-overflow': 'StackOverflow',
// youtube: 'YouTube',
// dribbble: 'Dribbble',
// instagram: 'Instagram',
// pinterest: 'Pinterest',
// vk: 'VK',
// yahoo: 'Yahoo',
// behance: 'Behance',
// reddit: 'Reddit',
// vimeo: 'Vimeo'
// }
}
</script>
<style scoped lang="css">
.btn {
.c-btn {
margin-bottom: 4px;
margin-right: 6px;
}
.c-btn svg + span {
margin-left: 8px;
}
</style>