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