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

feat: change styles of notification and button sections to version 3

Browse Source
This commit is contained in:
woothu
2019-05-16 21:14:48 +02:00
parent ba0664a61c
commit e005cd1556
7 changed files with 661 additions and 563 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/buttons/BrandButtons.vue
+228 -227
View File
@@ -1,5 +1,5 @@
<template>
<div class="animated fadeIn">
<div class="c-animated c-fadeIn">
<CRow>
<CCol col="12">
<CCard>
@@ -7,91 +7,92 @@
<strong>Brand Button</strong>
</CCardHeader>
<CCardBody>
<small>Usage </small><code>&lt;CButton variant="facebook"&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" class="mr-1 btn-brand" variant="facebook"><i class="fa fa-facebook"></i><span>Facebook</span></CButton>
<CButton size="sm" class="mr-1 btn-brand" variant="twitter"><i class="fa fa-twitter"></i><span>Twitter</span></CButton>
<CButton size="sm" variant="linkedin" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></CButton>
<CButton size="sm" variant="flickr" class="mr-1 btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></CButton>
<CButton size="sm" variant="tumblr" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></CButton>
<CButton size="sm" variant="xing" class="mr-1 btn-brand"><i class="fa fa-xing"></i><span>Xing</span></CButton>
<CButton size="sm" variant="github" class="mr-1 btn-brand"><i class="fa fa-github"></i><span>Github</span></CButton>
<CButton size="sm" variant="html5" class="mr-1 btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></CButton>
<CButton size="sm" variant="openid" class="mr-1 btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></CButton>
<CButton size="sm" variant="stack-overflow" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></CButton>
<CButton size="sm" variant="css3" class="mr-1 btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></CButton>
<CButton size="sm" variant="youtube" class="mr-1 btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></CButton>
<CButton size="sm" variant="dribbble" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></CButton>
<CButton size="sm" variant="google-plus" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></CButton>
<CButton size="sm" variant="instagram" class="mr-1 btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></CButton>
<CButton size="sm" variant="pinterest" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></CButton>
<CButton size="sm" variant="vk" class="mr-1 btn-brand"><i class="fa fa-vk"></i><span>VK</span></CButton>
<CButton size="sm" variant="yahoo" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></CButton>
<CButton size="sm" variant="behance" class="mr-1 btn-brand"><i class="fa fa-behance"></i><span>Behance</span></CButton>
<CButton size="sm" variant="dropbox" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></CButton>
<CButton size="sm" variant="reddit" class="mr-1 btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></CButton>
<CButton size="sm" variant="spotify" class="mr-1 btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></CButton>
<CButton size="sm" variant="vine" class="mr-1 btn-brand"><i class="fa fa-vine"></i><span>Vine</span></CButton>
<CButton size="sm" variant="foursquare" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></CButton>
<CButton size="sm" variant="vimeo" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></CButton>
<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>
</p>
<h6>Size Normal</h6>
<p>
<CButton variant="facebook" class="mr-1 btn-brand"><i class="fa fa-facebook"></i><span>Facebook</span></CButton>
<CButton variant="twitter" class="mr-1 btn-brand"><i class="fa fa-twitter"></i><span>Twitter</span></CButton>
<CButton variant="linkedin" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></CButton>
<CButton variant="flickr" class="mr-1 btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></CButton>
<CButton variant="tumblr" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></CButton>
<CButton variant="xing" class="mr-1 btn-brand"><i class="fa fa-xing"></i><span>Xing</span></CButton>
<CButton variant="github" class="mr-1 btn-brand"><i class="fa fa-github"></i><span>Github</span></CButton>
<CButton variant="html5" class="mr-1 btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></CButton>
<CButton variant="openid" class="mr-1 btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></CButton>
<CButton variant="stack-overflow" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></CButton>
<CButton variant="css3" class="mr-1 btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></CButton>
<CButton variant="youtube" class="mr-1 btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></CButton>
<CButton variant="dribbble" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></CButton>
<CButton variant="google-plus" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></CButton>
<CButton variant="instagram" class="mr-1 btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></CButton>
<CButton variant="pinterest" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></CButton>
<CButton variant="vk" class="mr-1 btn-brand"><i class="fa fa-vk"></i><span>VK</span></CButton>
<CButton variant="yahoo" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></CButton>
<CButton variant="behance" class="mr-1 btn-brand"><i class="fa fa-behance"></i><span>Behance</span></CButton>
<CButton variant="dropbox" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></CButton>
<CButton variant="reddit" class="mr-1 btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></CButton>
<CButton variant="spotify" class="mr-1 btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></CButton>
<CButton variant="vine" class="mr-1 btn-brand"><i class="fa fa-vine"></i><span>Vine</span></CButton>
<CButton variant="foursquare" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></CButton>
<CButton variant="vimeo" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></CButton>
<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>
</p>
<h6>Size Large <small>Add <code>size="lg"</code></small></h6>
<p>
<CButton size="lg" variant="facebook" class="mr-1 btn-brand"><i class="fa fa-facebook"></i><span>Facebook</span></CButton>
<CButton size="lg" variant="twitter" class="mr-1 btn-brand"><i class="fa fa-twitter"></i><span>Twitter</span></CButton>
<CButton size="lg" variant="linkedin" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></CButton>
<CButton size="lg" variant="flickr" class="mr-1 btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></CButton>
<CButton size="lg" variant="tumblr" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></CButton>
<CButton size="lg" variant="xing" class="mr-1 btn-brand"><i class="fa fa-xing"></i><span>Xing</span></CButton>
<CButton size="lg" variant="github" class="mr-1 btn-brand"><i class="fa fa-github"></i><span>Github</span></CButton>
<CButton size="lg" variant="html5" class="mr-1 btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></CButton>
<CButton size="lg" variant="openid" class="mr-1 btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></CButton>
<CButton size="lg" variant="stack-overflow" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></CButton>
<CButton size="lg" variant="css3" class="mr-1 btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></CButton>
<CButton size="lg" variant="youtube" class="mr-1 btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></CButton>
<CButton size="lg" variant="dribbble" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></CButton>
<CButton size="lg" variant="google-plus" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></CButton>
<CButton size="lg" variant="instagram" class="mr-1 btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></CButton>
<CButton size="lg" variant="pinterest" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></CButton>
<CButton size="lg" variant="vk" class="mr-1 btn-brand"><i class="fa fa-vk"></i><span>VK</span></CButton>
<CButton size="lg" variant="yahoo" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></CButton>
<CButton size="lg" variant="behance" class="mr-1 btn-brand"><i class="fa fa-behance"></i><span>Behance</span></CButton>
<CButton size="lg" variant="dropbox" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></CButton>
<CButton size="lg" variant="reddit" class="mr-1 btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></CButton>
<CButton size="lg" variant="spotify" class="mr-1 btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></CButton>
<CButton size="lg" variant="vine" class="mr-1 btn-brand"><i class="fa fa-vine"></i><span>Vine</span></CButton>
<CButton size="lg" variant="foursquare" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></CButton>
<CButton size="lg" variant="vimeo" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></CButton>
<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>
</p>
</CCardBody>
</CCard>
@@ -106,87 +107,87 @@
<hr/>
<h6>Size Small <small>Add <code>size="sm"</code></small></h6>
<p>
<CButton size="sm" variant="facebook icon" class="mr-1 btn-brand"><i class="fa fa-facebook"></i></CButton>
<CButton size="sm" variant="twitter icon" class="mr-1 btn-brand"><i class="fa fa-twitter"></i></CButton>
<CButton size="sm" variant="linkedin icon" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i></CButton>
<CButton size="sm" variant="flickr icon" class="mr-1 btn-brand"><i class="fa fa-flickr"></i></CButton>
<CButton size="sm" variant="tumblr icon" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i></CButton>
<CButton size="sm" variant="xing icon" class="mr-1 btn-brand"><i class="fa fa-xing"></i></CButton>
<CButton size="sm" variant="github icon" class="mr-1 btn-brand"><i class="fa fa-github"></i></CButton>
<CButton size="sm" variant="html5 icon" class="mr-1 btn-brand"><i class="fa fa-html5"></i></CButton>
<CButton size="sm" variant="openid icon" class="mr-1 btn-brand"><i class="fa fa-openid"></i></CButton>
<CButton size="sm" variant="stack-overflow icon" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i></CButton>
<CButton size="sm" variant="css3 icon" class="mr-1 btn-brand"><i class="fa fa-css3"></i></CButton>
<CButton size="sm" variant="youtube icon" class="mr-1 btn-brand"><i class="fa fa-youtube"></i></CButton>
<CButton size="sm" variant="dribbble icon" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i></CButton>
<CButton size="sm" variant="google-plus icon" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i></CButton>
<CButton size="sm" variant="instagram icon" class="mr-1 btn-brand"><i class="fa fa-instagram"></i></CButton>
<CButton size="sm" variant="pinterest icon" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i></CButton>
<CButton size="sm" variant="vk icon" class="mr-1 btn-brand"><i class="fa fa-vk"></i></CButton>
<CButton size="sm" variant="yahoo icon" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i></CButton>
<CButton size="sm" variant="behance icon" class="mr-1 btn-brand"><i class="fa fa-behance"></i></CButton>
<CButton size="sm" variant="dropbox icon" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i></CButton>
<CButton size="sm" variant="reddit icon" class="mr-1 btn-brand"><i class="fa fa-reddit"></i></CButton>
<CButton size="sm" variant="spotify icon" class="mr-1 btn-brand"><i class="fa fa-spotify"></i></CButton>
<CButton size="sm" variant="vine icon" class="mr-1 btn-brand"><i class="fa fa-vine"></i></CButton>
<CButton size="sm" variant="foursquare icon" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i></CButton>
<CButton size="sm" variant="vimeo icon" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i></CButton>
<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>
</p>
<h6>Size Normal</h6>
<p>
<CButton variant="facebook icon" class="mr-1 btn-brand"><i class="fa fa-facebook"></i></CButton>
<CButton variant="twitter icon" class="mr-1 btn-brand"><i class="fa fa-twitter"></i></CButton>
<CButton variant="linkedin icon" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i></CButton>
<CButton variant="flickr icon" class="mr-1 btn-brand"><i class="fa fa-flickr"></i></CButton>
<CButton variant="tumblr icon" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i></CButton>
<CButton variant="xing icon" class="mr-1 btn-brand"><i class="fa fa-xing"></i></CButton>
<CButton variant="github icon" class="mr-1 btn-brand"><i class="fa fa-github"></i></CButton>
<CButton variant="html5 icon" class="mr-1 btn-brand"><i class="fa fa-html5"></i></CButton>
<CButton variant="openid icon" class="mr-1 btn-brand"><i class="fa fa-openid"></i></CButton>
<CButton variant="stack-overflow icon" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i></CButton>
<CButton variant="css3 icon" class="mr-1 btn-brand"><i class="fa fa-css3"></i></CButton>
<CButton variant="youtube icon" class="mr-1 btn-brand"><i class="fa fa-youtube"></i></CButton>
<CButton variant="dribbble icon" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i></CButton>
<CButton variant="google-plus icon" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i></CButton>
<CButton variant="instagram icon" class="mr-1 btn-brand"><i class="fa fa-instagram"></i></CButton>
<CButton variant="pinterest icon" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i></CButton>
<CButton variant="vk icon" class="mr-1 btn-brand"><i class="fa fa-vk"></i></CButton>
<CButton variant="yahoo icon" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i></CButton>
<CButton variant="behance icon" class="mr-1 btn-brand"><i class="fa fa-behance"></i></CButton>
<CButton variant="dropbox icon" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i></CButton>
<CButton variant="reddit icon" class="mr-1 btn-brand"><i class="fa fa-reddit"></i></CButton>
<CButton variant="spotify icon" class="mr-1 btn-brand"><i class="fa fa-spotify"></i></CButton>
<CButton variant="vine icon" class="mr-1 btn-brand"><i class="fa fa-vine"></i></CButton>
<CButton variant="foursquare icon" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i></CButton>
<CButton variant="vimeo icon" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i></CButton>
<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>
</p>
<h6>Size Large <small>Add <code>size="lg"</code></small></h6>
<p>
<CButton size="lg" variant="facebook icon" class="mr-1 btn-brand"><i class="fa fa-facebook"></i></CButton>
<CButton size="lg" variant="twitter icon" class="mr-1 btn-brand"><i class="fa fa-twitter"></i></CButton>
<CButton size="lg" variant="linkedin icon" class="mr-1 btn-brand"><i class="fa fa-linkedin"></i></CButton>
<CButton size="lg" variant="flickr icon" class="mr-1 btn-brand"><i class="fa fa-flickr"></i></CButton>
<CButton size="lg" variant="tumblr icon" class="mr-1 btn-brand"><i class="fa fa-tumblr"></i></CButton>
<CButton size="lg" variant="xing icon" class="mr-1 btn-brand"><i class="fa fa-xing"></i></CButton>
<CButton size="lg" variant="github icon" class="mr-1 btn-brand"><i class="fa fa-github"></i></CButton>
<CButton size="lg" variant="html5 icon" class="mr-1 btn-brand"><i class="fa fa-html5"></i></CButton>
<CButton size="lg" variant="openid icon" class="mr-1 btn-brand"><i class="fa fa-openid"></i></CButton>
<CButton size="lg" variant="stack-overflow icon" class="mr-1 btn-brand"><i class="fa fa-stack-overflow"></i></CButton>
<CButton size="lg" variant="css3 icon" class="mr-1 btn-brand"><i class="fa fa-css3"></i></CButton>
<CButton size="lg" variant="youtube icon" class="mr-1 btn-brand"><i class="fa fa-youtube"></i></CButton>
<CButton size="lg" variant="dribbble icon" class="mr-1 btn-brand"><i class="fa fa-dribbble"></i></CButton>
<CButton size="lg" variant="google-plus icon" class="mr-1 btn-brand"><i class="fa fa-google-plus"></i></CButton>
<CButton size="lg" variant="instagram icon" class="mr-1 btn-brand"><i class="fa fa-instagram"></i></CButton>
<CButton size="lg" variant="pinterest icon" class="mr-1 btn-brand"><i class="fa fa-pinterest"></i></CButton>
<CButton size="lg" variant="vk icon" class="mr-1 btn-brand"><i class="fa fa-vk"></i></CButton>
<CButton size="lg" variant="yahoo icon" class="mr-1 btn-brand"><i class="fa fa-yahoo"></i></CButton>
<CButton size="lg" variant="behance icon" class="mr-1 btn-brand"><i class="fa fa-behance"></i></CButton>
<CButton size="lg" variant="dropbox icon" class="mr-1 btn-brand"><i class="fa fa-dropbox"></i></CButton>
<CButton size="lg" variant="reddit icon" class="mr-1 btn-brand"><i class="fa fa-reddit"></i></CButton>
<CButton size="lg" variant="spotify icon" class="mr-1 btn-brand"><i class="fa fa-spotify"></i></CButton>
<CButton size="lg" variant="vine icon" class="mr-1 btn-brand"><i class="fa fa-vine"></i></CButton>
<CButton size="lg" variant="foursquare icon" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i></CButton>
<CButton size="lg" variant="vimeo icon" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i></CButton>
<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>
</p>
</CCardBody>
</CCard>
@@ -202,87 +203,87 @@
<hr/>
<h6>Size Small <small>Add <code>size="sm"</code></small></h6>
<p>
<CButton size="sm" variant="facebook text" class="mr-1 btn-brand"><span>Facebook</span></CButton>
<CButton size="sm" variant="twitter text" class="mr-1 btn-brand"><span>Twitter</span></CButton>
<CButton size="sm" variant="linkedin text" class="mr-1 btn-brand"><span>LinkedIn</span></CButton>
<CButton size="sm" variant="flickr text" class="mr-1 btn-brand"><span>Flickr</span></CButton>
<CButton size="sm" variant="tumblr text" class="mr-1 btn-brand"><span>Tumblr</span></CButton>
<CButton size="sm" variant="xing text" class="mr-1 btn-brand"><span>Xing</span></CButton>
<CButton size="sm" variant="github text" class="mr-1 btn-brand"><span>Github</span></CButton>
<CButton size="sm" variant="html5 text" class="mr-1 btn-brand"><span>HTML5</span></CButton>
<CButton size="sm" variant="openid text" class="mr-1 btn-brand"><span>OpenID</span></CButton>
<CButton size="sm" variant="stack-overflow text" class="mr-1 btn-brand"><span>StackOverflow</span></CButton>
<CButton size="sm" variant="css3 text" class="mr-1 btn-brand"><span>CSS3</span></CButton>
<CButton size="sm" variant="youtube text" class="mr-1 btn-brand"><span>YouTube</span></CButton>
<CButton size="sm" variant="dribbble text" class="mr-1 btn-brand"><span>Dribbble</span></CButton>
<CButton size="sm" variant="google-plus text" class="mr-1 btn-brand"><span>Google+</span></CButton>
<CButton size="sm" variant="instagram text" class="mr-1 btn-brand"><span>Instagram</span></CButton>
<CButton size="sm" variant="pinterest text" class="mr-1 btn-brand"><span>Pinterest</span></CButton>
<CButton size="sm" variant="vk text" class="mr-1 btn-brand"><span>VK</span></CButton>
<CButton size="sm" variant="yahoo text" class="mr-1 btn-brand"><span>Yahoo</span></CButton>
<CButton size="sm" variant="behance text" class="mr-1 btn-brand"><span>Behance</span></CButton>
<CButton size="sm" variant="dropbox text" class="mr-1 btn-brand"><span>Dropbox</span></CButton>
<CButton size="sm" variant="reddit text" class="mr-1 btn-brand"><span>Reddit</span></CButton>
<CButton size="sm" variant="spotify text" class="mr-1 btn-brand"><span>Spotify</span></CButton>
<CButton size="sm" variant="vine text" class="mr-1 btn-brand"><span>Vine</span></CButton>
<CButton size="sm" variant="foursquare text" class="mr-1 btn-brand"><span>Forsquare</span></CButton>
<CButton size="sm" variant="vimeo text" class="mr-1 btn-brand"><span>Vimeo</span></CButton>
<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>
</p>
<h6>Size Normal</h6>
<p>
<CButton variant="facebook text" class="mr-1 btn-brand"><span>Facebook</span></CButton>
<CButton variant="twitter text" class="mr-1 btn-brand"><span>Twitter</span></CButton>
<CButton variant="linkedin text" class="mr-1 btn-brand"><span>LinkedIn</span></CButton>
<CButton variant="flickr text" class="mr-1 btn-brand"><span>Flickr</span></CButton>
<CButton variant="tumblr text" class="mr-1 btn-brand"><span>Tumblr</span></CButton>
<CButton variant="xing text" class="mr-1 btn-brand"><span>Xing</span></CButton>
<CButton variant="github text" class="mr-1 btn-brand"><span>Github</span></CButton>
<CButton variant="html5 text" class="mr-1 btn-brand"><span>HTML5</span></CButton>
<CButton variant="openid text" class="mr-1 btn-brand"><span>OpenID</span></CButton>
<CButton variant="stack-overflow text" class="mr-1 btn-brand"><span>StackOverflow</span></CButton>
<CButton variant="css3 text" class="mr-1 btn-brand"><span>CSS3</span></CButton>
<CButton variant="youtube text" class="mr-1 btn-brand"><span>YouTube</span></CButton>
<CButton variant="dribbble text" class="mr-1 btn-brand"><span>Dribbble</span></CButton>
<CButton variant="google-plus text" class="mr-1 btn-brand"><span>Google+</span></CButton>
<CButton variant="instagram text" class="mr-1 btn-brand"><span>Instagram</span></CButton>
<CButton variant="pinterest text" class="mr-1 btn-brand"><span>Pinterest</span></CButton>
<CButton variant="vk text" class="mr-1 btn-brand"><span>VK</span></CButton>
<CButton variant="yahoo text" class="mr-1 btn-brand"><span>Yahoo</span></CButton>
<CButton variant="behance text" class="mr-1 btn-brand"><span>Behance</span></CButton>
<CButton variant="dropbox text" class="mr-1 btn-brand"><span>Dropbox</span></CButton>
<CButton variant="reddit text" class="mr-1 btn-brand"><span>Reddit</span></CButton>
<CButton variant="spotify text" class="mr-1 btn-brand"><span>Spotify</span></CButton>
<CButton variant="vine text" class="mr-1 btn-brand"><span>Vine</span></CButton>
<CButton variant="foursquare text" class="mr-1 btn-brand"><span>Forsquare</span></CButton>
<CButton variant="vimeo text" class="mr-1 btn-brand"><span>Vimeo</span></CButton>
<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>
</p>
<h6>Size Large <small>Add <code>size="lg"</code></small></h6>
<p>
<CButton size="lg" variant="facebook text" class="mr-1 btn-brand"><span>Facebook</span></CButton>
<CButton size="lg" variant="twitter text" class="mr-1 btn-brand"><span>Twitter</span></CButton>
<CButton size="lg" variant="linkedin text" class="mr-1 btn-brand"><span>LinkedIn</span></CButton>
<CButton size="lg" variant="flickr text" class="mr-1 btn-brand"><span>Flickr</span></CButton>
<CButton size="lg" variant="tumblr text" class="mr-1 btn-brand"><span>Tumblr</span></CButton>
<CButton size="lg" variant="xing text" class="mr-1 btn-brand"><span>Xing</span></CButton>
<CButton size="lg" variant="github text" class="mr-1 btn-brand"><span>Github</span></CButton>
<CButton size="lg" variant="html5 text" class="mr-1 btn-brand"><span>HTML5</span></CButton>
<CButton size="lg" variant="openid text" class="mr-1 btn-brand"><span>OpenID</span></CButton>
<CButton size="lg" variant="stack-overflow text" class="mr-1 btn-brand"><span>StackOverflow</span></CButton>
<CButton size="lg" variant="css3 text" class="mr-1 btn-brand"><span>CSS3</span></CButton>
<CButton size="lg" variant="youtube text" class="mr-1 btn-brand"><span>YouTube</span></CButton>
<CButton size="lg" variant="dribbble text" class="mr-1 btn-brand"><span>Dribbble</span></CButton>
<CButton size="lg" variant="google-plus text" class="mr-1 btn-brand"><span>Google+</span></CButton>
<CButton size="lg" variant="instagram text" class="mr-1 btn-brand"><span>Instagram</span></CButton>
<CButton size="lg" variant="pinterest text" class="mr-1 btn-brand"><span>Pinterest</span></CButton>
<CButton size="lg" variant="vk text" class="mr-1 btn-brand"><span>VK</span></CButton>
<CButton size="lg" variant="yahoo text" class="mr-1 btn-brand"><span>Yahoo</span></CButton>
<CButton size="lg" variant="behance text" class="mr-1 btn-brand"><span>Behance</span></CButton>
<CButton size="lg" variant="dropbox text" class="mr-1 btn-brand"><span>Dropbox</span></CButton>
<CButton size="lg" variant="reddit text" class="mr-1 btn-brand"><span>Reddit</span></CButton>
<CButton size="lg" variant="spotify text" class="mr-1 btn-brand"><span>Spotify</span></CButton>
<CButton size="lg" variant="vine text" class="mr-1 btn-brand"><span>Vine</span></CButton>
<CButton size="lg" variant="foursquare text" class="mr-1 btn-brand"><span>Forsquare</span></CButton>
<CButton size="lg" variant="vimeo text" class="mr-1 btn-brand"><span>Vimeo</span></CButton>
<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>
</p>
</CCardBody>
</CCard>
src/views/buttons/ButtonGroups.vue
+32 -26
View File
@@ -1,11 +1,12 @@
<template>
<div class="wrapper">
<div class="animated fadeIn">
<div class="c-wrapper">
<div class="c-animated c-fadeIn">
<CRow>
<CCol col="12" >
<CCard>
<CCardHeader>
<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>
@@ -19,14 +20,14 @@
<CButton>Two</CButton>
<CButton>Three</CButton>
<CButton>Four</CButton>
<CButton class="d-sm-down-none">Five</CButton>
<CButton class="c-d-sm-down-none">Five</CButton>
</CButtonGroup>
<br><br>
<CButtonGroup>
<CButton class="d-sm-down-none" variant="success">Success</CButton>
<CButton class="c-d-sm-down-none" variant="success">Success</CButton>
<CButton variant="info">Info</CButton>
<CButton variant="warning">Warn</CButton>
<CButton class="d-sm-down-none" variant="primary">Primary</CButton>
<CButton class="c-d-sm-down-none" variant="primary">Primary</CButton>
<CButton variant="danger">Danger</CButton>
<CButton variant="link">Link</CButton>
</CButtonGroup>
@@ -37,7 +38,8 @@
<CCol col="12">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Button group </strong>sizing
<i class="fa fa-align-justify"></i>
<strong> Button group </strong>sizing
</CCardHeader>
<CCardBody>
<div>
@@ -70,15 +72,15 @@
<CCardBody>
<div>
<CButtonGroup>
<CButton class="d-sm-down-none">Button 1</CButton>
<CButton class="d-sm-down-none">Button 2</CButton>
<CButton class="c-d-sm-down-none">Button 1</CButton>
<CButton class="c-d-sm-down-none">Button 2</CButton>
<CDropdown right text="Menu" variant="success">
<CDropdownItem>Item 1</CDropdownItem>
<CDropdownItem>Item 2</CDropdownItem>
<CDropdownDivider></CDropdownDivider>
<CDropdownItem>Item 3</CDropdownItem>
</CDropdown>
<CButton class="d-sm-down-none">Button 3</CButton>
<CButton class="c-d-sm-down-none">Button 3</CButton>
<CDropdown right split text="Split Menu" variant="info">
<CDropdownItem>Item 1</CDropdownItem>
<CDropdownItem>Item 2</CDropdownItem>
@@ -93,7 +95,8 @@
<CCol col="12">
<CCard>
<CCardHeader>
<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
</CCardHeader>
<CCardBody>
<div>
@@ -121,44 +124,47 @@
<CCardBody>
<div>
<CButtonToolbar aria-label="Toolbar with button groups">
<CButtonGroup class="mx-1">
<CButton class="d-sm-down-none">&laquo;</CButton>
<CButtonGroup class="c-mx-1">
<CButton class="c-d-sm-down-none">&laquo;</CButton>
<CButton>&lsaquo;</CButton>
</CButtonGroup>
<CButtonGroup class="mx-1">
<CButton class="d-sm-down-none">Edit</CButton>
<CButtonGroup class="c-mx-1">
<CButton class="c-d-sm-down-none">Edit</CButton>
<CButton>Undo</CButton>
<CButton>Redo</CButton>
</CButtonGroup>
<CButtonGroup class="mx-1">
<CButtonGroup class="c-mx-1">
<CButton>&rsaquo;</CButton>
<CButton class="d-sm-down-none">&raquo;</CButton>
<CButton class="c-d-sm-down-none">&raquo;</CButton>
</CButtonGroup>
</CButtonToolbar>
</div>
<hr class="d-sm-down-none"/>
<hr class="c-d-sm-down-none"/>
<div>
<CButtonToolbar aria-label="Toolbar with button groups and input groups" class="d-sm-down-none">
<CButtonGroup size="sm" class="mx-1">
<CButtonToolbar
aria-label="Toolbar with button groups and input groups"
class="c-d-sm-down-none"c-
>
<CButtonGroup size="sm" class="c-mx-1">
<CButton>New</CButton>
<CButton>Edit</CButton>
</CButtonGroup>
<CFormInput
class="mb-0 w-25 mx-1"
class="c-mb-0 c-w-25 c-mx-1"
size="sm"
prepend="$"
append=".00"
value="100"
/>
<CFormSelect
class="mb-0 w-25 mx-1"
class="c-mb-0 c-w-25 c-mx-1"
size="sm"
prepend="Size"
value="Medium"
:options="['Large','Medium','Small']"
custom
/>
<CButtonGroup size="sm" class="mx-1">
<CButtonGroup size="sm" class="c-mx-1">
<CButton>Save</CButton>
<CButton>Cancel</CButton>
</CButtonGroup>
@@ -167,13 +173,13 @@
<hr/>
<div>
<CButtonToolbar aria-label="Toolbar with button groups and dropdown menu">
<CButtonGroup class="mx-1 d-sm-down-none">
<CButtonGroup class="c-mx-1 c-d-sm-down-none">
<CButton>New</CButton>
<CButton>Edit</CButton>
<CButton>Undo</CButton>
</CButtonGroup>
<CDropdown
class="mx-1"
class="c-mx-1"
placement="bottom-end"
buttonContent="Menu"
>
@@ -181,7 +187,7 @@
<CDropdownItem>Item 2</CDropdownItem>
<CDropdownItem>Item 3</CDropdownItem>
</CDropdown>
<CButtonGroup class="mx-1">
<CButtonGroup class="c-mx-1">
<CButton>Save</CButton>
<CButton>Cancel</CButton>
</CButtonGroup>
src/views/buttons/Dropdowns.vue
+142 -56
View File
@@ -1,6 +1,6 @@
<template>
<div class="wrapper">
<div class="animated fadeIn">
<div class="c-wrapper">
<div class="c-animated c-fadeIn">
<CRow>
<CCol col="12" md="6">
<CCard>
@@ -15,7 +15,7 @@
</CCardHeader>
<CCardBody>
<div>
<CDropdown id="ddown1" buttonHtml="Dropdown Button" class="m-2">
<CDropdown buttonHtml="Dropdown Button" class="c-m-2">
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
@@ -25,7 +25,7 @@
</CDropdown>
</div>
<!-- <div>
<CDropdown id="ddown-buttons" buttonHtml="Dropdown using buttons as menu items" class="m-2">
<CDropdown buttonHtml="Dropdown using buttons as menu items" class="c-m-2">
<CDropdownItem>I'm a button</CDropdownItem>
<CDropdownItem>I'm also a button</CDropdownItem>
<CDropdownItem disabled>I'm a button, but disabled!</CDropdownItem>
@@ -33,7 +33,7 @@
</CDropdown>
</div> -->
<div>
<CDropdown id="ddown-divider" buttonHtml="Dropdown with divider" class="m-2">
<CDropdown buttonHtml="Dropdown with divider" class="c-m-2">
<CDropdownItem>First item</CDropdownItem>
<CDropdownItem>Second item</CDropdownItem>
<CDropdownDivider></CDropdownDivider>
@@ -41,7 +41,7 @@
</CDropdown>
</div>
<div>
<CDropdown id="ddown-header" buttonHtml="Dropdown with header" class="m-2">
<CDropdown buttonHtml="Dropdown with header" class="c-m-2">
<CDropdownHeader>Dropdown header</CDropdownHeader>
<CDropdownItem>First item</CDropdownItem>
<CDropdownItem>Second Item</CDropdownItem>
@@ -53,20 +53,26 @@
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<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>
</CCardHeader>
<CCardBody>
<div>
<CDropdown id="ddown-left" buttonHtml="Left align" variant="primary" class="m-2">
<CDropdown
buttonHtml="Left align"
variant="primary"
class="c-m-2"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here</CDropdownItem>
</CDropdown>
<CDropdown id="ddown-right"
placement="bottom-end"
buttonHtml="Right align"
variant="primary"
class="m-2"
<CDropdown
placement="bottom-end"
buttonHtml="Right align"
variant="primary"
class="c-m-2"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
@@ -74,11 +80,11 @@
</CDropdown>
</div>
<div>
<CDropdown id="ddown-dropup"
buttonHtml="Drop-Up"
variant="info"
class="m-2"
dropup
<CDropdown
buttonHtml="Drop-Up"
variant="info"
class="c-m-2"
dropup
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
@@ -86,10 +92,10 @@
</CDropdown>
</div>
<div>
<CDropdown id="ddown-offset"
:offset="25"
buttonHtml="Offset Dropdown"
class="m-2"
<CDropdown
:offset="25"
buttonHtml="Offset Dropdown"
class="c-m-2"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
@@ -97,7 +103,11 @@
</CDropdown>
</div>
<div>
<CDropdown id="ddown-split" split buttonHtml="Split Dropdown" class="m-2">
<CDropdown
split
buttonHtml="Split Dropdown"
class="c-m-2"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
@@ -111,14 +121,17 @@
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<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>
</CCardHeader>
<CCardBody>
<div>
<CDropdown variant="link"
size="lg"
buttonHtml="&#x1f50d;<span class='sr-only'>Search</span>"
no-caret
<CDropdown
variant="link"
size="lg"
buttonHtml="&#x1f50d;<span class='sr-only'>Search</span>"
no-caret
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
@@ -131,27 +144,46 @@
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<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>
</CCardHeader>
<CCardBody>
<div>
<CDropdown id="ddown-lg" size="lg" buttonHtml="Large" class="m-2">
<CDropdown
size="lg"
buttonHtml="Large"
class="c-m-2"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here</CDropdownItem>
</CDropdown>
<CDropdown id="ddown-lg-split" size="lg" split buttonHtml="Large Split" class="m-2">
<CDropdown
size="lg"
split
buttonHtml="Large Split"
class="c-m-2"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
</CDropdown>
<br>
<CDropdown id="ddown-sm" size="sm" buttonHtml="Small" class="m-2">
<CDropdown
size="sm"
buttonHtml="Small"
class="c-m-2"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
</CDropdown>
<CDropdown id="ddown-sm-split" size="sm" split buttonHtml="Small Split" class="m-2">
<CDropdown
size="sm"
split buttonHtml="Small Split"
class="c-m-2"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
@@ -162,78 +194,132 @@
</CCol>
</CRow>
<CRow>
<CCol col="12" md="6">
<!-- <CCol col="12" md="6">
<CCard>
<CCardHeader>
<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>
</CCardHeader>
<CCardBody>
<div>
<CDropdown id="ddown-aria" buttonHtml="Dropdown ARIA" variant="primary" class="m-2">
<div role="group" aria-lableledby="header1">
<CDropdownHeader id="header1">Groups</CDropdownHeader>
<CDropdownItem aria-describedby="header1">Add</CDropdownItem>
<CDropdownItem aria-describedby="header1">Delete</CDropdownItem>
<CDropdown
buttonHtml="Dropdown ARIA" variant="primary"
class="c-m-2"
>
<div role="group">
<CDropdownHeader>Groups</CDropdownHeader>
<CDropdownItem>Add</CDropdownItem>
<CDropdownItem>Delete</CDropdownItem>
</div>
<div role="group" aria-lableledby="header2">
<CDropdownHeader id="header2">Users</CDropdownHeader>
<CDropdownItem aria-describedby="header2">Add</CDropdownItem>
<CDropdownItem aria-describedby="header2">Delete</CDropdownItem>
<div role="group">
<CDropdownHeader>Users</CDropdownHeader>
<CDropdownItem>Add</CDropdownItem>
<CDropdownItem>Delete</CDropdownItem>
</div>
<CDropdownDivider></CDropdownDivider>
<CDropdownItem>Something <strong>not</strong> associated with user</CDropdownItem>
<CDropdownItem>
Something <strong>not</strong> associated with user
</CDropdownItem>
</CDropdown>
</div>
</CCardBody>
</CCard>
</CCol>
</CCol> -->
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<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>
</CCardHeader>
<CCardBody>
<CDropdown size="sm" id="ddown_primary" buttonHtml="Primary" variant="primary" class="m-0">
<CDropdown
size="sm"
buttonHtml="Primary"
variant="primary"
class="c-m-0"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
<CDropdown size="sm" id="ddown_secondary" buttonHtml="Secondary" variant="secondary" class="m-0">
<CDropdown
size="sm"
buttonHtml="Secondary"
variant="secondary"
class="c-m-0"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
<CDropdown size="sm" id="ddown_success" buttonHtml="Success" variant="success" class="m-0">
<CDropdown
size="sm"
buttonHtml="Success"
variant="success"
class="c-m-0"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
<CDropdown size="sm" id="ddown_warning" buttonHtml="Warning" variant="warning" class="m-0">
<CDropdown
size="sm"
buttonHtml="Warning"
variant="warning"
class="c-m-0"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
<CDropdown size="sm" id="ddown_danger" buttonHtml="Danger" variant="danger" class="m-0">
<CDropdown
size="sm"
buttonHtml="Danger"
variant="danger"
class="c-m-0"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
<CDropdown size="sm" id="ddown_info" buttonHtml="Info" variant="info" class="m-0">
<CDropdown
size="sm"
buttonHtml="Info"
variant="info"
class="c-m-0"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
<CDropdown size="sm" id="ddown_light" buttonHtml="Light" variant="light" class="m-0">
<CDropdown
size="sm"
buttonHtml="Light"
variant="light"
class="c-m-0"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
<CDropdown size="sm" id="ddown_dark" buttonHtml="Dark" variant="dark" class="m-0">
<CDropdown
size="sm"
buttonHtml="Dark"
variant="dark"
class="c-m-0"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
<CDropdown size="sm" id="ddown_link" buttonHtml="Link" variant="link" class="m-0">
<CDropdown
size="sm"
buttonHtml="Link"
variant="link"
class="c-m-0"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
src/views/buttons/StandardButtons.vue
+199 -199
View File
@@ -1,103 +1,103 @@
<template>
<div class="animated fadeIn">
<div class="c-animated c-fadeIn">
<CCard >
<CCardHeader>
<strong>Standard buttons</strong>
</CCardHeader>
<CCardBody>
<CRow class="align-items-center">
<CCol col="12" xl class="mb-3 mb-xl-0">
<CRow class="c-align-items-center">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0">
Normal
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="primary">Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="secondary">Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="success">Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="warning">Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="danger">Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="info">Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="light">Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="dark">Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="link">Link</CButton>
</CCol>
</CRow>
<CRow class="align-items-center mt-3">
<CCol col="12" xl class="mb-3 mb-xl-0">
<CRow class="c-align-items-center c-mt-3">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0">
Active State
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton pressed block variant="primary" aria-pressed="true">Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton pressed block variant="secondary" aria-pressed="true">Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton pressed block variant="success" aria-pressed="true">Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton pressed block variant="warning" aria-pressed="true">Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton pressed block variant="danger" aria-pressed="true">Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton pressed block variant="info" aria-pressed="true">Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton pressed block variant="light" aria-pressed="true">Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton pressed block variant="dark" aria-pressed="true">Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton pressed block variant="link" aria-pressed="true">Link</CButton>
</CCol>
</CRow>
<CRow class="align-items-center mt-3">
<CCol col="12" xl class="mb-3 mb-xl-0">
<CRow class="c-align-items-center c-mt-3">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0">
Disabled
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="primary" disabled>Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="secondary" disabled>Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="success" disabled>Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="warning" disabled>Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="danger" disabled>Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="info" disabled>Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="light" disabled>Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="dark" disabled>Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="link" disabled>Link</CButton>
</CCol>
</CRow>
@@ -111,95 +111,95 @@
<p>
Use <code>variant="outline-*"</code> prop
</p>
<CRow class="align-items-center">
<CCol col="12" xl class="mb-3 mb-xl-0">
<CRow class="c-align-items-center">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0">
Normal
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="outline-primary">Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="outline-secondary">Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="outline-success">Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="outline-warning">Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="outline-danger">Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="outline-info">Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="outline-light">Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="outline-dark">Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"></CCol>
</CRow>
<CRow class="align-items-center mt-3">
<CCol col="12" xl class="mb-3 mb-xl-0">
<CRow class="c-align-items-center c-mt-3">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0">
Active State
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block pressed variant="outline-primary" aria-pressed="true">Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block pressed variant="outline-secondary" aria-pressed="true">Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block pressed variant="outline-success" aria-pressed="true">Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block pressed variant="outline-warning" aria-pressed="true">Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block pressed variant="outline-danger" aria-pressed="true">Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block pressed variant="outline-info" aria-pressed="true">Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block pressed variant="outline-light" aria-pressed="true">Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block pressed variant="outline-dark" aria-pressed="true">Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"></CCol>
</CRow>
<CRow class="align-items-center mt-3">
<CCol col="12" xl class="mb-3 mb-xl-0">
<CRow class="c-align-items-center c-mt-3">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0">
Disabled
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="outline-primary" disabled>Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="outline-secondary" disabled>Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="outline-success" disabled>Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="outline-warning" disabled>Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="outline-danger" disabled>Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="outline-info" disabled>Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="outline-light" disabled>Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="outline-dark" disabled>Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"></CCol>
</CRow>
</CCardBody>
</CCard>
@@ -212,95 +212,95 @@
Use
<code>ghost</code> prop for ghost buttons.
</p>
<CRow class="align-items-center">
<CCol col="12" xl class="mb-3 mb-xl-0">
<CRow class="c-align-items-center">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0">
Normal
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0" >
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0" >
<CButton block ghost variant="primary">Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block ghost variant="secondary">Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block ghost variant="success">Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block ghost variant="warning">Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block ghost variant="danger">Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block ghost variant="info">Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block ghost variant="light">Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block ghost variant="dark">Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"></CCol>
</CRow>
<CRow class="align-items-center mt-3">
<CCol col="12" xl class="mb-3 mb-xl-0">
<CRow class="c-align-items-center c-mt-3">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0">
Active State
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block pressed ghost variant="primary" aria-pressed="true">Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block pressed ghost variant="secondary" aria-pressed="true">Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block pressed ghost variant="success" aria-pressed="true">Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block pressed ghost variant="warning" aria-pressed="true">Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block pressed ghost variant="danger" aria-pressed="true">Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block pressed ghost variant="info" aria-pressed="true">Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block pressed ghost variant="light" aria-pressed="true">Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block pressed ghost variant="dark" aria-pressed="true">Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"></CCol>
</CRow>
<CRow class="align-items-center mt-3">
<CCol col="12" xl class="mb-3 mb-xl-0">
<CRow class="c-align-items-center c-mt-3">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0">
Disabled
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block ghost variant="primary" disabled>Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block ghost variant="secondary" disabled>Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block ghost variant="success" disabled>Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block ghost variant="warning" disabled>Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block ghost variant="danger" disabled>Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block ghost variant="info" disabled>Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block ghost variant="light" disabled>Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block ghost variant="dark" disabled>Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"></CCol>
</CRow>
</CCardBody>
</CCard>
@@ -313,99 +313,99 @@
Use
<code>square</code> prop for square buttons.
</p>
<CRow class="align-items-center">
<CCol col="12" xl class="mb-3 mb-xl-0">
<CRow class="c-align-items-center">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0">
Normal
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="primary" square>Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="secondary" square>Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="success" square>Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="warning" square>Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="danger" square>Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="info" square>Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="light" square>Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="dark" square>Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="link" square>Link</CButton>
</CCol>
</CRow>
<CRow class="align-items-center mt-3">
<CCol col="12" xl class="mb-3 mb-xl-0">
<CRow class="c-align-items-center c-mt-3">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0">
Active State
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton pressed block variant="primary" square aria-pressed="true">Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton pressed block variant="secondary" square aria-pressed="true">Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton pressed block variant="success" square aria-pressed="true">Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton pressed block variant="warning" square aria-pressed="true">Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton pressed block variant="danger" square aria-pressed="true">Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton pressed block variant="info" square aria-pressed="true">Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton pressed block variant="light" square aria-pressed="true">Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton pressed block variant="dark" square aria-pressed="true">Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton pressed block variant="link" square aria-pressed="true">Link</CButton>
</CCol>
</CRow>
<CRow class="align-items-center mt-3">
<CCol col="12" xl class="mb-3 mb-xl-0">
<CRow class="c-align-items-center c-mt-3">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0">
Disabled
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="primary" square disabled>Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="secondary" square disabled>Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="success" square disabled>Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="warning" square disabled>Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="danger" square disabled>Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="info" square disabled>Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="light" square disabled>Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="dark" square disabled>Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="link" square disabled>Link</CButton>
</CCol>
</CRow>
@@ -420,99 +420,99 @@
Use
<code>pill</code> prop for pill buttons.
</p>
<CRow class="align-items-center">
<CCol col="12" xl class="mb-3 mb-xl-0">
<CRow class="c-align-items-center">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0">
Normal
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="primary" pill>Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="secondary" pill>Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="success" pill>Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="warning" pill>Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="danger" pill>Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="info" pill>Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="light" pill>Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="dark" pill>Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="link" pill>Link</CButton>
</CCol>
</CRow>
<CRow class="align-items-center mt-3">
<CCol col="12" xl class="mb-3 mb-xl-0">
<CRow class="c-align-items-center c-mt-3">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0">
Active State
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton pressed block variant="primary" pill aria-pressed="true">Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton pressed block variant="secondary" pill aria-pressed="true">Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton pressed block variant="success" pill aria-pressed="true">Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton pressed block variant="warning" pill aria-pressed="true">Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton pressed block variant="danger" pill aria-pressed="true">Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton pressed block variant="info" pill aria-pressed="true">Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton pressed block variant="light" pill aria-pressed="true">Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton pressed block variant="dark" pill aria-pressed="true">Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton pressed block variant="link" pill aria-pressed="true">Link</CButton>
</CCol>
</CRow>
<CRow class="align-items-center mt-3">
<CCol col="12" xl class="mb-3 mb-xl-0">
<CRow class="c-align-items-center c-mt-3">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0">
Disabled
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="primary" pill disabled>Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="secondary" pill disabled>Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="success" pill disabled>Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="warning" pill disabled>Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="danger" pill disabled>Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="info" pill disabled>Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="light" pill disabled>Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="dark" pill disabled>Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CButton block variant="link" pill disabled>Link</CButton>
</CCol>
</CRow>
@@ -524,63 +524,63 @@
</CCardHeader>
<CCardBody>
<p>Fancy larger or smaller buttons? Add <code>size="lg"</code> or <code>size="sm"</code> for additional sizes.</p>
<CRow class="align-items-center">
<CCol col="2" xl class="mb-3 mb-xl-0">
<CRow class="c-align-items-center">
<CCol col="2" xl class="c-mb-3 c-mb-xl-0">
Small
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
<CButton variant="primary" size="sm">Standard Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
<CButton variant="outline-secondary" size="sm">Outline Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
<CButton size="sm" ghost variant="success">Ghost Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
<CButton variant="warning" size="sm" square>Square Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
<CButton variant="danger" size="sm" pill>Pill Button</CButton>
</CCol>
</CRow>
<CRow class="align-items-center mt-3">
<CCol col="2" xl class="mb-3 mb-xl-0">
<CRow class="c-align-items-center c-mt-3">
<CCol col="2" xl class="c-mb-3 c-mb-xl-0">
Normal
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
<CButton variant="primary">Standard Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
<CButton variant="outline-secondary" >Outline Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
<CButton ghost variant="success">Ghost Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
<CButton variant="warning" square>Square Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
<CButton variant="danger" pill>Pill Button</CButton>
</CCol>
</CRow>
<CRow class="align-items-center mt-3">
<CCol col="2" xl class="mb-3 mb-xl-0">
<CRow class="c-align-items-center c-mt-3">
<CCol col="2" xl class="c-mb-3 c-mb-xl-0">
Large
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
<CButton variant="primary" size="lg">Standard Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
<CButton variant="outline-secondary" size="lg">Outline Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
<CButton ghost variant="success" size="lg">Ghost Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
<CButton variant="warning" size="lg" square>Square Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
<CButton variant="danger" size="lg" pill>Pill Button</CButton>
</CCol>
</CRow>
@@ -591,28 +591,28 @@
<strong>With Icons</strong>
</CCardHeader>
<CCardBody>
<CRow class="align-items-center">
<CCol sm xs="12" class="text-center mt-3">
<CRow class="c-align-items-center">
<CCol sm xs="12" class="c-text-center c-mt-3">
<CButton variant="primary">
<i class="fa fa-lightbulb-o"></i>&nbsp;Standard Button
</CButton>
</CCol>
<CCol sm xs="12" class="text-center mt-3">
<CCol sm xs="12" class="c-text-center c-mt-3">
<CButton variant="secondary" outline>
<i class="fa fa-lightbulb-o"></i>&nbsp;Outline Button
</CButton>
</CCol>
<CCol sm xs="12" class="text-center mt-3">
<CCol sm xs="12" class="c-text-center c-mt-3">
<CButton variant="success">
<i class="fa fa-lightbulb-o"></i>&nbsp;Ghost Button
</CButton>
</CCol>
<CCol sm xs="12" class="text-center mt-3">
<CCol sm xs="12" class="c-text-center c-mt-3">
<CButton variant="warning" square>
<i class="fa fa-lightbulb-o"></i>&nbsp;Square Button
</CButton>
</CCol>
<CCol sm xs="12" class="text-center mt-3">
<CCol sm xs="12" class="c-text-center c-mt-3">
<CButton variant="danger" pill>
<i class="fa fa-lightbulb-o"></i>&nbsp;Pill Button
</CButton>
@@ -626,22 +626,22 @@
</CCardHeader>
<CCardBody>
<CRow>
<CCol sm xs="12" class="text-center mt-3">
<CCol sm xs="12" class="c-text-center c-mt-3">
<CButton variant="outline-primary" :pressed.sync="togglePress">Primary {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol>
<CCol sm xs="12" class="text-center mt-3">
<CCol sm xs="12" class="c-text-center c-mt-3">
<CButton variant="outline-secondary" :pressed.sync="togglePress">Secondary {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol>
<CCol sm xs="12" class="text-center mt-3">
<CCol sm xs="12" class="c-text-center c-mt-3">
<CButton variant="outline-success" :pressed.sync="togglePress">Success {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol>
<CCol sm xs="12" class="text-center mt-3">
<CCol sm xs="12" class="c-text-center c-mt-3">
<CButton variant="outline-info" :pressed.sync="togglePress">Info {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol>
<CCol sm xs="12" class="text-center mt-3">
<CCol sm xs="12" class="c-text-center c-mt-3">
<CButton variant="outline-warning" :pressed.sync="togglePress">Warning {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol>
<CCol sm xs="12" class="text-center mt-3">
<CCol sm xs="12" class="c-text-center c-mt-3">
<CButton variant="outline-danger" :pressed.sync="togglePress">Danger {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol>
</CRow>
src/views/notifications/Alerts.vue
+30 -27
View File
@@ -1,6 +1,6 @@
<template>
<div class="wrapper">
<div class="animated fadeIn">
<div class="c-wrapper">
<div class="c-animated c-fadeIn">
<CRow>
<CCol col="12" md="6">
<CCard>
@@ -32,34 +32,34 @@
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> Alert
<small> use <code>.alert-link</code> to provide links</small>
<small> use <code>.c-alert-link</code> to provide links</small>
</CCardHeader>
<CCardBody>
<div>
<CAlert show variant="primary">
Primary Alert with <a href="#" class="alert-link">an example link</a>.
Primary Alert with <a href="#" class="c-alert-link">an example link</a>.
</CAlert>
<CAlert show variant="secondary">
Secondary Alert with <a href="#" class="alert-link">an example link</a>.
Secondary Alert with <a href="#" class="c-alert-link">an example link</a>.
</CAlert>
<CAlert show variant="success">
Success Alert with <a href="#" class="alert-link">an example link</a>.
Success Alert with <a href="#" class="c-alert-link">an example link</a>.
</CAlert>
<CAlert show variant="danger">
Danger Alert with <a href="#" class="alert-link">an example link</a>.
Danger Alert with <a href="#" class="c-alert-link">an example link</a>.
</CAlert>
<CAlert show variant="warning">
Warning Alert with <a href="#" class="alert-link">an example link</a>.
Warning Alert with <a href="#" class="c-alert-link">an example link</a>.
</CAlert>
<CAlert show variant="info">
Info Alert with <a href="#" class="alert-link">an example link</a>.
Info Alert with <a href="#" class="c-alert-link">an example link</a>.
</CAlert>
<CAlert show variant="light">
Light Alert with <a href="#" class="alert-link">an example link</a>.
Light Alert with <a href="#" class="c-alert-link">an example link</a>.
</CAlert>
<CAlert show variant="dark">
Dark Alert with
<CLink href="#" class="alert-link">an example link</CLink>
<CLink href="#" class="c-alert-link">an example link</CLink>
.
</CAlert>
</div>
@@ -73,14 +73,14 @@
</CCardHeader>
<CCardBody>
<CAlert show variant="success">
<h4 class="alert-heading">Well done!</h4>
<h4 class="c-alert-heading">Well done!</h4>
<p>
Aww yeah, you successfully read this important alert message.
This example text is going to run a bit longer so that you can see
how spacing within an alert works with this kind of content.
</p>
<hr>
<p class="mb-0">
<p class="c-mb-0">
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
</p>
</CAlert>
@@ -119,14 +119,14 @@
<CAlert
:show.sync="dismissibleAlerts[3]"
class="alert-dismissible"
class="c-alert-dismissible"
v-slot="{dismiss}"
>
Dismissible Alert with custom button!
<CButton
class="position-absolute bg-primary"
class="c-position-absolute c-bg-primary"
style="right:10px;top: 50%;transform: translateY(-50%);"
text="<i>Close</i>"
textHtml="<i>Close</i>"
@click="dismiss"
/>
</CAlert>
@@ -140,7 +140,7 @@
<CButton
@click="showDismissibleAlerts"
variant="info"
class="m-1"
class="c-m-1"
>
Show dismissible alerts
</CButton>
@@ -148,7 +148,8 @@
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> Alerts <small>auto dismissible</small>
<i class="fa fa-align-justify"></i> Alerts
<small>auto dismissible</small>
</CCardHeader>
<CCardBody>
<div>
@@ -162,18 +163,20 @@
<strong>{{dismissCountDown}}</strong> seconds...
</CAlert>
<CAlert :show.sync="dismissCountDown"
dismissible
variant="info"
<CAlert
:show.sync="dismissCountDown"
dismissible
variant="info"
>
Alert will dismiss after {{dismissCountDown}} seconds...
<CProgress variant="info"
:max="dismissSecs"
:value="dismissCountDown"
height="4px">
</CProgress>
<CProgress
variant="info"
:max="dismissSecs"
:value="dismissCountDown"
height="4px"
/>
</CAlert>
<CButton @click="showAlert" variant="info" class="m-1">
<CButton @click="showAlert" variant="info" class="c-m-1">
Show alert with timer
</CButton>
</div>
src/views/notifications/Badges.vue
+4 -3
View File
@@ -1,6 +1,6 @@
<template functional>
<div class="wrapper">
<div class="animated fadeIn">
<div class="c-wrapper">
<div class="c-animated c-fadeIn">
<CRow>
<CCol col="12" md="6">
<CCard>
@@ -22,7 +22,8 @@
</CCardBody>
<CCardFooter>
<CButton variant="primary">
Notifications <CBadge variant="light" :style="{position: 'static'}">4</CBadge>
Notifications
<CBadge variant="light" :style="{position: 'static'}">4</CBadge>
</CButton>
</CCardFooter>
</CCard>
src/views/notifications/Modals.vue
+26 -25
View File
@@ -1,6 +1,6 @@
<template>
<div class="wrapper">
<div class="animated fadeIn">
<div class="c-wrapper">
<div class="c-animated c-fadeIn">
<CRow>
<CCol col="12">
<CCard>
@@ -8,32 +8,32 @@
<i class="fa fa-align-justify"></i> Bootstrap Modals
</CCardHeader>
<CCardBody>
<CButton variant="secondary" @click="myModal = true" class="mr-1">
<CButton variant="secondary" @click="myModal = true" class="c-mr-1">
Launch demo modal
</CButton>
<CButton variant="secondary" @click="largeModal = true" class="mr-1">
<CButton variant="secondary" @click="largeModal = true" class="c-mr-1">
Launch large modal
</CButton>
<CButton variant="secondary" @click="smallModal = true" class="mr-1">
<CButton variant="secondary" @click="smallModal = true" class="c-mr-1">
Launch small modal
</CButton>
<hr>
<CButton variant="primary" @click="primaryModal = true" class="mr-1">
<CButton variant="primary" @click="primaryModal = true" class="c-mr-1">
Launch primary modal
</CButton>
<CButton variant="success" @click="successModal = true" class="mr-1">
<CButton variant="success" @click="successModal = true" class="c-mr-1">
Launch success modal
</CButton>
<CButton variant="warning" @click="warningModal = true" class="mr-1">
<CButton variant="warning" @click="warningModal = true" class="c-mr-1">
Launch warning modal
</CButton>
<CButton variant="danger" @click="dangerModal = true" class="mr-1">
<CButton variant="danger" @click="dangerModal = true" class="c-mr-1">
Launch danger modal
</CButton>
<CButton variant="info" @click="infoModal = true" class="mr-1">
<CButton variant="info" @click="infoModal = true" class="c-mr-1">
Launch info modal
</CButton>
<CButton variant="dark" @click="darkModal = true" class="mr-1">
<CButton variant="dark" @click="darkModal = true" class="c-mr-1">
Launch dark modal
</CButton>
</CCardBody>
@@ -65,9 +65,10 @@
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</CModal>
<CModal title="Modal title"
size="sm"
:visible.sync="smallModal"
<CModal
title="Modal title"
size="sm"
:visible.sync="smallModal"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -79,7 +80,7 @@
<CModal
title="Modal title"
class="modal-primary"
class="c-modal-primary"
:visible.sync="primaryModal"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -91,7 +92,7 @@
</CModal>
<CModal
title="Modal title"
class="modal-success"
class="c-modal-success"
:visible.sync="successModal"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -103,7 +104,7 @@
</CModal>
<CModal
title="Modal title"
class="modal-warning"
class="c-modal-warning"
:visible.sync="warningModal"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -115,7 +116,7 @@
</CModal>
<CModal
title="Modal title"
class="modal-danger"
class="c-modal-danger"
:visible.sync="dangerModal"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -127,7 +128,7 @@
</CModal>
<CModal
title="Modal title"
class="modal-info"
class="c-modal-info"
:visible.sync="infoModal"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -140,16 +141,16 @@
<CModal
:visible.sync="darkModal"
:noBackdrop="false"
:noCloseOnBackdrop="false"
:noCloseOnBackdrop="fsalse"
:noFade="false"
:centered="true"
title="Modal title 2"
size="lg"
variant="dark"
borderVariant="danger2"
addModalClasses="hehe1"
addDialogClasses="hehe2"
addContentClasses="hehe3"
addModalClassess="hehe1"
addDialogClassess="hehe2"
addContentClassess="hehe3"
:noHeader="false"
:noBody="false"
:noFooter="false"
@@ -161,8 +162,8 @@
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<template #header="{hide}">
<h5 class="modal-title">Custom modal title</h5>
<CButtonClose @click="hide()" class="text-white"/>
<h5 class="c-modal-title">Custom modal title</h5>
<CButtonClose @click="hide()" class="c-text-white"/>
</template>
<template #footer="{hide}">
<CButton @click="hide()" variant="danger">Discard</CButton>