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

refactor: change CCol cols attribute to col attribute

Browse Source
This commit is contained in:
woothu
2019-04-04 09:29:10 +02:00
parent 4b8fdbf142
commit 3a9bc09c3a
25 changed files with 1664 additions and 1664 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/buttons/BrandButtons.vue
+4 -4
View File
@@ -1,7 +1,7 @@
<template>
<div class="animated fadeIn">
<CRow>
<CCol cols="12">
<CCol col="12">
<CCard>
<CCardHeader>
<strong>Brand Button</strong>
@@ -96,7 +96,7 @@
</CCardBody>
</CCard>
</CCol><!--/.col-->
<CCol cols="12">
<CCol col="12">
<CCard>
<CCardHeader>
<strong>Brand Button </strong> <small>Icons only</small>
@@ -192,7 +192,7 @@
</CCard>
</CCol><!--/.col-->
<CCol cols="12">
<CCol col="12">
<CCard>
<CCardHeader>
<strong>Brand Button </strong> <small>Text only</small>
@@ -287,7 +287,7 @@
</CCardBody>
</CCard>
</CCol><!--/.col-->
</CRow><!--/.row-->
</CRow>
</div>
</template>
src/views/buttons/ButtonGroups.vue
+5 -5
View File
@@ -2,7 +2,7 @@
<div class="wrapper">
<div class="animated fadeIn">
<CRow>
<CCol cols="12" >
<CCol col="12" >
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Bootstrap button group</strong>
@@ -34,7 +34,7 @@
</CCardBody>
</CCard>
</CCol>
<CCol cols="12">
<CCol col="12">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Button group </strong>sizing
@@ -62,7 +62,7 @@
</CCardBody>
</CCard>
</CCol>
<CCol cols="12">
<CCol col="12">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Button group </strong>dropdown support
@@ -90,7 +90,7 @@
</CCardBody>
</CCard>
</CCol>
<CCol cols="12">
<CCol col="12">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Button group </strong>vertical variation
@@ -106,7 +106,7 @@
</CCardBody>
</CCard>
</CCol>
<CCol cols="12">
<CCol col="12">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
src/views/buttons/Dropdowns.vue
+6 -6
View File
@@ -2,7 +2,7 @@
<div class="wrapper">
<div class="animated fadeIn">
<CRow>
<CCol cols="12" md="6">
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
@@ -50,7 +50,7 @@
</CCardBody>
</CCard>
</CCol>
<CCol cols="12" md="6">
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>positioning</small>
@@ -108,7 +108,7 @@
</CCol>
</CRow>
<CRow>
<CCol cols="12" md="6">
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>hidden caret</small>
@@ -128,7 +128,7 @@
</CCardBody>
</CCard>
</CCol>
<CCol cols="12" md="6">
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>sizing</small>
@@ -162,7 +162,7 @@
</CCol>
</CRow>
<CRow>
<CCol cols="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>
@@ -187,7 +187,7 @@
</CCardBody>
</CCard>
</CCol>
<CCol cols="12" md="6">
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Dropdown </strong><small><code>variant</code></small>
src/views/buttons/StandardButtons.vue
+168 -168
View File
@@ -6,98 +6,98 @@
</CCardHeader>
<CCardBody>
<CRow class="align-items-center">
<CCol cols="12" xl class="mb-3 mb-xl-0">
<CCol col="12" xl class="mb-3 mb-xl-0">
Normal
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="primary">Primary</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="secondary">Secondary</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="success">Success</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="warning">Warning</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="danger">Danger</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="info">Info</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="light">Light</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="dark">Dark</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="link">Link</CButton>
</CCol>
</CRow>
<CRow class="align-items-center mt-3">
<CCol cols="12" xl class="mb-3 mb-xl-0">
<CCol col="12" xl class="mb-3 mb-xl-0">
Active State
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="primary" aria-pressed="true">Primary</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="secondary" aria-pressed="true">Secondary</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="success" aria-pressed="true">Success</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="warning" aria-pressed="true">Warning</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="danger" aria-pressed="true">Danger</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="info" aria-pressed="true">Info</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="light" aria-pressed="true">Light</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="dark" aria-pressed="true">Dark</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="link" aria-pressed="true">Link</CButton>
</CCol>
</CRow>
<CRow class="align-items-center mt-3">
<CCol cols="12" xl class="mb-3 mb-xl-0">
<CCol col="12" xl class="mb-3 mb-xl-0">
Disabled
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="primary" disabled>Primary</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="secondary" disabled>Secondary</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="success" disabled>Success</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="warning" disabled>Warning</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="danger" disabled>Danger</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="info" disabled>Info</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="light" disabled>Light</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="dark" disabled>Dark</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="link" disabled>Link</CButton>
</CCol>
</CRow>
@@ -112,94 +112,94 @@
Use <code>variant="outline-*"</code> prop
</p>
<CRow class="align-items-center">
<CCol cols="12" xl class="mb-3 mb-xl-0">
<CCol col="12" xl class="mb-3 mb-xl-0">
Normal
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="outline-primary">Primary</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="outline-secondary">Secondary</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="outline-success">Success</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="outline-warning">Warning</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="outline-danger">Danger</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="outline-info">Info</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="outline-light">Light</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="outline-dark">Dark</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
</CRow>
<CRow class="align-items-center mt-3">
<CCol cols="12" xl class="mb-3 mb-xl-0">
<CCol col="12" xl class="mb-3 mb-xl-0">
Active State
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed variant="outline-primary" aria-pressed="true">Primary</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed variant="outline-secondary" aria-pressed="true">Secondary</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed variant="outline-success" aria-pressed="true">Success</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed variant="outline-warning" aria-pressed="true">Warning</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed variant="outline-danger" aria-pressed="true">Danger</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed variant="outline-info" aria-pressed="true">Info</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed variant="outline-light" aria-pressed="true">Light</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed variant="outline-dark" aria-pressed="true">Dark</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
</CRow>
<CRow class="align-items-center mt-3">
<CCol cols="12" xl class="mb-3 mb-xl-0">
<CCol col="12" xl class="mb-3 mb-xl-0">
Disabled
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="outline-primary" disabled>Primary</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="outline-secondary" disabled>Secondary</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="outline-success" disabled>Success</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="outline-warning" disabled>Warning</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="outline-danger" disabled>Danger</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="outline-info" disabled>Info</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="outline-light" disabled>Light</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="outline-dark" disabled>Dark</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
</CRow>
</CCardBody>
</CCard>
@@ -213,94 +213,94 @@
<code>ghost</code> prop for ghost buttons.
</p>
<CRow class="align-items-center">
<CCol cols="12" xl class="mb-3 mb-xl-0">
<CCol col="12" xl class="mb-3 mb-xl-0">
Normal
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0" >
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0" >
<CButton block ghost variant="primary">Primary</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="secondary">Secondary</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="success">Success</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="warning">Warning</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="danger">Danger</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="info">Info</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="light">Light</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="dark">Dark</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
</CRow>
<CRow class="align-items-center mt-3">
<CCol cols="12" xl class="mb-3 mb-xl-0">
<CCol col="12" xl class="mb-3 mb-xl-0">
Active State
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed ghost variant="primary" aria-pressed="true">Primary</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed ghost variant="secondary" aria-pressed="true">Secondary</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed ghost variant="success" aria-pressed="true">Success</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed ghost variant="warning" aria-pressed="true">Warning</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed ghost variant="danger" aria-pressed="true">Danger</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed ghost variant="info" aria-pressed="true">Info</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed ghost variant="light" aria-pressed="true">Light</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed ghost variant="dark" aria-pressed="true">Dark</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
</CRow>
<CRow class="align-items-center mt-3">
<CCol cols="12" xl class="mb-3 mb-xl-0">
<CCol col="12" xl class="mb-3 mb-xl-0">
Disabled
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="primary" disabled>Primary</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="secondary" disabled>Secondary</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="success" disabled>Success</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="warning" disabled>Warning</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="danger" disabled>Danger</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="info" disabled>Info</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="light" disabled>Light</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="dark" disabled>Dark</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
</CRow>
</CCardBody>
</CCard>
@@ -314,98 +314,98 @@
<code>square</code> prop for square buttons.
</p>
<CRow class="align-items-center">
<CCol cols="12" xl class="mb-3 mb-xl-0">
<CCol col="12" xl class="mb-3 mb-xl-0">
Normal
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="primary" square>Primary</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="secondary" square>Secondary</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="success" square>Success</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="warning" square>Warning</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="danger" square>Danger</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="info" square>Info</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="light" square>Light</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="dark" square>Dark</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="link" square>Link</CButton>
</CCol>
</CRow>
<CRow class="align-items-center mt-3">
<CCol cols="12" xl class="mb-3 mb-xl-0">
<CCol col="12" xl class="mb-3 mb-xl-0">
Active State
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="primary" square aria-pressed="true">Primary</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="secondary" square aria-pressed="true">Secondary</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="success" square aria-pressed="true">Success</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="warning" square aria-pressed="true">Warning</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="danger" square aria-pressed="true">Danger</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="info" square aria-pressed="true">Info</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="light" square aria-pressed="true">Light</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="dark" square aria-pressed="true">Dark</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="link" square aria-pressed="true">Link</CButton>
</CCol>
</CRow>
<CRow class="align-items-center mt-3">
<CCol cols="12" xl class="mb-3 mb-xl-0">
<CCol col="12" xl class="mb-3 mb-xl-0">
Disabled
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="primary" square disabled>Primary</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="secondary" square disabled>Secondary</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="success" square disabled>Success</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="warning" square disabled>Warning</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="danger" square disabled>Danger</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="info" square disabled>Info</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="light" square disabled>Light</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="dark" square disabled>Dark</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="link" square disabled>Link</CButton>
</CCol>
</CRow>
@@ -421,98 +421,98 @@
<code>pill</code> prop for pill buttons.
</p>
<CRow class="align-items-center">
<CCol cols="12" xl class="mb-3 mb-xl-0">
<CCol col="12" xl class="mb-3 mb-xl-0">
Normal
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="primary" pill>Primary</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="secondary" pill>Secondary</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="success" pill>Success</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="warning" pill>Warning</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="danger" pill>Danger</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="info" pill>Info</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="light" pill>Light</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="dark" pill>Dark</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="link" pill>Link</CButton>
</CCol>
</CRow>
<CRow class="align-items-center mt-3">
<CCol cols="12" xl class="mb-3 mb-xl-0">
<CCol col="12" xl class="mb-3 mb-xl-0">
Active State
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="primary" pill aria-pressed="true">Primary</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="secondary" pill aria-pressed="true">Secondary</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="success" pill aria-pressed="true">Success</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="warning" pill aria-pressed="true">Warning</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="danger" pill aria-pressed="true">Danger</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="info" pill aria-pressed="true">Info</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="light" pill aria-pressed="true">Light</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="dark" pill aria-pressed="true">Dark</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="link" pill aria-pressed="true">Link</CButton>
</CCol>
</CRow>
<CRow class="align-items-center mt-3">
<CCol cols="12" xl class="mb-3 mb-xl-0">
<CCol col="12" xl class="mb-3 mb-xl-0">
Disabled
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="primary" pill disabled>Primary</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="secondary" pill disabled>Secondary</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="success" pill disabled>Success</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="warning" pill disabled>Warning</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="danger" pill disabled>Danger</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="info" pill disabled>Info</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="light" pill disabled>Light</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="dark" pill disabled>Dark</CButton>
</CCol>
<CCol cols="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="link" pill disabled>Link</CButton>
</CCol>
</CRow>
@@ -525,62 +525,62 @@
<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 cols="2" xl class="mb-3 mb-xl-0">
<CCol col="2" xl class="mb-3 mb-xl-0">
Small
</CCol>
<CCol cols="2" class="mb-3 mb-xl-0 text-center">
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton variant="primary" size="sm">Standard Button</CButton>
</CCol>
<CCol cols="2" class="mb-3 mb-xl-0 text-center">
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton variant="outline-secondary" size="sm">Outline Button</CButton>
</CCol>
<CCol cols="2" class="mb-3 mb-xl-0 text-center">
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton size="sm" ghost variant="success">Ghost Button</CButton>
</CCol>
<CCol cols="2" class="mb-3 mb-xl-0 text-center">
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton variant="warning" size="sm" square>Square Button</CButton>
</CCol>
<CCol cols="2" class="mb-3 mb-xl-0 text-center">
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton variant="danger" size="sm" pill>Pill Button</CButton>
</CCol>
</CRow>
<CRow class="align-items-center mt-3">
<CCol cols="2" xl class="mb-3 mb-xl-0">
<CCol col="2" xl class="mb-3 mb-xl-0">
Normal
</CCol>
<CCol cols="2" class="mb-3 mb-xl-0 text-center">
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton variant="primary">Standard Button</CButton>
</CCol>
<CCol cols="2" class="mb-3 mb-xl-0 text-center">
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton variant="outline-secondary" >Outline Button</CButton>
</CCol>
<CCol cols="2" class="mb-3 mb-xl-0 text-center">
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton ghost variant="success">Ghost Button</CButton>
</CCol>
<CCol cols="2" class="mb-3 mb-xl-0 text-center">
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton variant="warning" square>Square Button</CButton>
</CCol>
<CCol cols="2" class="mb-3 mb-xl-0 text-center">
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton variant="danger" pill>Pill Button</CButton>
</CCol>
</CRow>
<CRow class="align-items-center mt-3">
<CCol cols="2" xl class="mb-3 mb-xl-0">
<CCol col="2" xl class="mb-3 mb-xl-0">
Large
</CCol>
<CCol cols="2" class="mb-3 mb-xl-0 text-center">
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton variant="primary" size="lg">Standard Button</CButton>
</CCol>
<CCol cols="2" class="mb-3 mb-xl-0 text-center">
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton variant="outline-secondary" size="lg">Outline Button</CButton>
</CCol>
<CCol cols="2" class="mb-3 mb-xl-0 text-center">
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton ghost variant="success" size="lg">Ghost Button</CButton>
</CCol>
<CCol cols="2" class="mb-3 mb-xl-0 text-center">
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton variant="warning" size="lg" square>Square Button</CButton>
</CCol>
<CCol cols="2" class="mb-3 mb-xl-0 text-center">
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton variant="danger" size="lg" pill>Pill Button</CButton>
</CCol>
</CRow>