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