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

refactor: remplace variant prop with color

Browse Source
This commit is contained in:
woothu
2019-10-15 10:55:00 +02:00
parent 26d30c2fb0
commit c639eb8213
28 changed files with 800 additions and 810 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/buttons/BrandButtons.vue
+12 -12
View File
@@ -29,7 +29,7 @@
:name="brandName"
size="sm"
:key="key"
:variant="brandName"
:color="brandName"
>
<CIcon :name="brandName"/>
<span>{{brandName}}</span>
@@ -42,7 +42,7 @@
<CButton
:name="brandName"
:key="key"
:variant="brandName"
:color="brandName"
>
<CIcon :name="brandName"/>
<span>{{brandName}}</span>
@@ -56,7 +56,7 @@
:name="brandName"
size="lg"
:key="key"
:variant="brandName"
:color="brandName"
>
<CIcon :name="brandName"/>
<span>{{brandName}}</span>
@@ -82,7 +82,7 @@
:name="brandName"
size="sm"
:key="key"
:variant="brandName"
:color="brandName"
>
<CIcon :name="brandName"/>
</CButton>
@@ -94,7 +94,7 @@
<CButton
:name="brandName"
:key="key"
:variant="brandName"
:color="brandName"
>
<CIcon :name="brandName"/>
</CButton>
@@ -107,7 +107,7 @@
:name="brandName"
size="lg"
:key="key"
:variant="brandName"
:color="brandName"
>
<CIcon :name="brandName"/>
</CButton>
@@ -135,7 +135,7 @@
:name="brandName"
size="sm"
:key="key"
:variant="brandName"
:color="brandName"
>
<span>{{brandName}}</span>
</CButton>
@@ -147,7 +147,7 @@
<CButton
:name="brandName"
:key="key"
:variant="brandName"
:color="brandName"
>
<span>{{brandName}}</span>
</CButton>
@@ -160,7 +160,7 @@
:name="brandName"
size="lg"
:key="key"
:variant="brandName"
:color="brandName"
>
<span>{{brandName}}</span>
</CButton>
@@ -175,9 +175,9 @@
<script>
export default {
name: 'BrandButtons',
usage: '<CButton variant="facebook"><span>Facebook</span></CButton>',
iconsOnlyUsage: '<CButton variant="facebook"><CIcon name="facebook"/></CButton>',
textOnlyUsage: '<CButton variant="facebook"><CIcon name="facebook"/></CButton>',
usage: '<CButton color="facebook"><span>Facebook</span></CButton>',
iconsOnlyUsage: '<CButton color="facebook"><CIcon name="facebook"/></CButton>',
textOnlyUsage: '<CButton color="facebook"><CIcon name="facebook"/></CButton>',
brands: [
'facebook',
'twitter',
src/views/buttons/ButtonGroups.vue
+45 -45
View File
@@ -19,20 +19,20 @@
<CCardBody>
<div>
<CButtonGroup>
<CButton variant="secondary">One</CButton>
<CButton variant="secondary">Two</CButton>
<CButton variant="secondary">Three</CButton>
<CButton variant="secondary">Four</CButton>
<CButton variant="secondary" class="d-sm-down-none">Five</CButton>
<CButton color="secondary">One</CButton>
<CButton color="secondary">Two</CButton>
<CButton color="secondary">Three</CButton>
<CButton color="secondary">Four</CButton>
<CButton color="secondary" class="d-sm-down-none">Five</CButton>
</CButtonGroup>
<br><br>
<CButtonGroup>
<CButton class="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 variant="danger">Danger</CButton>
<CButton variant="link">Link</CButton>
<CButton class="d-sm-down-none" color="success">Success</CButton>
<CButton color="info">Info</CButton>
<CButton color="warning">Warn</CButton>
<CButton class="d-sm-down-none" color="primary">Primary</CButton>
<CButton color="danger">Danger</CButton>
<CButton color="link">Link</CButton>
</CButtonGroup>
</div>
</CCardBody>
@@ -47,21 +47,21 @@
<CCardBody>
<div>
<CButtonGroup>
<CButton variant="secondary">Left</CButton>
<CButton variant="secondary">Middle</CButton>
<CButton variant="secondary">Right</CButton>
<CButton color="secondary">Left</CButton>
<CButton color="secondary">Middle</CButton>
<CButton color="secondary">Right</CButton>
</CButtonGroup>
<br><br>
<CButtonGroup size="sm">
<CButton variant="secondary">Left</CButton>
<CButton variant="secondary">Middle</CButton>
<CButton variant="secondary">Right</CButton>
<CButton color="secondary">Left</CButton>
<CButton color="secondary">Middle</CButton>
<CButton color="secondary">Right</CButton>
</CButtonGroup>
<br><br>
<CButtonGroup size="lg">
<CButton variant="secondary">Left</CButton>
<CButton variant="secondary">Middle</CButton>
<CButton variant="secondary">Right</CButton>
<CButton color="secondary">Left</CButton>
<CButton color="secondary">Middle</CButton>
<CButton color="secondary">Right</CButton>
</CButtonGroup>
</div>
</CCardBody>
@@ -75,16 +75,16 @@
<CCardBody>
<div>
<CButtonGroup>
<CButton variant="secondary" class="d-sm-down-none">Button 1</CButton>
<CButton variant="secondary" class="d-sm-down-none">Button 2</CButton>
<CDropdown right text="Menu" variant="success">
<CButton color="secondary" class="d-sm-down-none">Button 1</CButton>
<CButton color="secondary" class="d-sm-down-none">Button 2</CButton>
<CDropdown right text="Menu" color="success">
<CDropdownItem>Item 1</CDropdownItem>
<CDropdownItem>Item 2</CDropdownItem>
<CDropdownDivider></CDropdownDivider>
<CDropdownItem>Item 3</CDropdownItem>
</CDropdown>
<CButton variant="secondary" class="d-sm-down-none">Button 3</CButton>
<CDropdown right split text="Split Menu" variant="info">
<CButton color="secondary" class="d-sm-down-none">Button 3</CButton>
<CDropdown right split text="Split Menu" color="info">
<CDropdownItem>Item 1</CDropdownItem>
<CDropdownItem>Item 2</CDropdownItem>
<CDropdownDivider></CDropdownDivider>
@@ -104,9 +104,9 @@
<CCardBody>
<div>
<CButtonGroup vertical>
<CButton variant="secondary">Top</CButton>
<CButton variant="secondary">Middle</CButton>
<CButton variant="secondary">Bottom</CButton>
<CButton color="secondary">Top</CButton>
<CButton color="secondary">Middle</CButton>
<CButton color="secondary">Bottom</CButton>
</CButtonGroup>
</div>
</CCardBody>
@@ -127,17 +127,17 @@
<CCardBody>
<CButtonToolbar aria-label="Toolbar with button groups" >
<CButtonGroup class="mx-1">
<CButton variant="secondary" class="d-sm-down-none">&laquo;</CButton>
<CButton variant="secondary">&lsaquo;</CButton>
<CButton color="secondary" class="d-sm-down-none">&laquo;</CButton>
<CButton color="secondary">&lsaquo;</CButton>
</CButtonGroup>
<CButtonGroup class="mx-1">
<CButton variant="secondary" class="d-sm-down-none">Edit</CButton>
<CButton variant="secondary">Undo</CButton>
<CButton variant="secondary">Redo</CButton>
<CButton color="secondary" class="d-sm-down-none">Edit</CButton>
<CButton color="secondary">Undo</CButton>
<CButton color="secondary">Redo</CButton>
</CButtonGroup>
<CButtonGroup class="mx-1">
<CButton variant="secondary">&rsaquo;</CButton>
<CButton variant="secondary" class="d-sm-down-none">&raquo;</CButton>
<CButton color="secondary">&rsaquo;</CButton>
<CButton color="secondary" class="d-sm-down-none">&raquo;</CButton>
</CButtonGroup>
</CButtonToolbar>
<hr class="d-sm-down-none"/>
@@ -146,8 +146,8 @@
class="d-sm-down-none"
>
<CButtonGroup size="sm" class="mx-1">
<CButton variant="secondary">New</CButton>
<CButton variant="secondary">Edit</CButton>
<CButton color="secondary">New</CButton>
<CButton color="secondary">Edit</CButton>
</CButtonGroup>
<CFormInput
class="mb-0 w-25 mx-1"
@@ -165,19 +165,19 @@
custom
/>
<CButtonGroup size="sm" class="mx-1">
<CButton variant="secondary">Save</CButton>
<CButton variant="secondary">Cancel</CButton>
<CButton color="secondary">Save</CButton>
<CButton color="secondary">Cancel</CButton>
</CButtonGroup>
</CButtonToolbar>
<hr/>
<CButtonToolbar aria-label="Toolbar with button groups and dropdown menu">
<CButtonGroup class="mx-1 d-sm-down-none">
<CButton variant="secondary">New</CButton>
<CButton variant="secondary">Edit</CButton>
<CButton variant="secondary">Undo</CButton>
<CButton color="secondary">New</CButton>
<CButton color="secondary">Edit</CButton>
<CButton color="secondary">Undo</CButton>
</CButtonGroup>
<CDropdown
variant="secondary"
color="secondary"
class="mx-1"
placement="bottom-end"
button-content="Menu"
@@ -187,8 +187,8 @@
<CDropdownItem>Item 3</CDropdownItem>
</CDropdown>
<CButtonGroup class="mx-1">
<CButton variant="secondary">Save</CButton>
<CButton variant="secondary">Cancel</CButton>
<CButton color="secondary">Save</CButton>
<CButton color="secondary">Cancel</CButton>
</CButtonGroup>
</CButtonToolbar>
</CCardBody>
src/views/buttons/Dropdowns.vue
+24 -24
View File
@@ -22,7 +22,7 @@
<CDropdown
toggler-text="Dropdown Button"
class="m-2"
variant="secondary"
color="secondary"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
@@ -44,7 +44,7 @@
<CDropdown
toggler-text="Dropdown with divider"
class="m-2"
variant="secondary"
color="secondary"
>
<CDropdownItem>First item</CDropdownItem>
<CDropdownItem>Second item</CDropdownItem>
@@ -56,7 +56,7 @@
<CDropdown
toggler-text="Dropdown with header"
class="m-2"
variant="secondary"
color="secondary"
>
<CDropdownHeader>Dropdown header</CDropdownHeader>
<CDropdownItem>First item</CDropdownItem>
@@ -77,7 +77,7 @@
<div>
<CDropdown
toggler-text="Left align"
variant="primary"
color="primary"
class="m-2 d-inline-block"
>
<CDropdownItem>Action</CDropdownItem>
@@ -87,7 +87,7 @@
<CDropdown
placement="bottom-end"
toggler-text="Right align"
variant="primary"
color="primary"
class="m-2 d-inline-block"
>
<CDropdownItem>Action</CDropdownItem>
@@ -98,7 +98,7 @@
<div>
<CDropdown
toggler-text="Drop-Up"
variant="info"
color="info"
class="m-2"
placement="top-start"
@@ -110,7 +110,7 @@
</div>
<div>
<CDropdown
variant="secondary"
color="secondary"
:offset="25"
toggler-text="Offset Dropdown"
class="m-2"
@@ -122,7 +122,7 @@
</div>
<div>
<CDropdown
variant="secondary"
color="secondary"
split
toggler-text="Split Dropdown"
class="m-2"
@@ -147,7 +147,7 @@
<CCardBody>
<div>
<CDropdown
variant="link"
color="link"
size="lg"
no-caret
>
@@ -172,7 +172,7 @@
<CCardBody>
<div>
<CDropdown
variant="secondary"
color="secondary"
size="lg"
toggler-text="Large"
class="m-2 d-inline-block"
@@ -182,7 +182,7 @@
<CDropdownItem>Something else here</CDropdownItem>
</CDropdown>
<CDropdown
variant="secondary"
color="secondary"
size="lg"
split
toggler-text="Large Split"
@@ -194,7 +194,7 @@
</CDropdown>
<br>
<CDropdown
variant="secondary"
color="secondary"
size="sm"
toggler-text="Small"
class="m-2 d-inline-block"
@@ -204,7 +204,7 @@
<CDropdownItem>Something else here...</CDropdownItem>
</CDropdown>
<CDropdown
variant="secondary"
color="secondary"
size="sm"
split toggler-text="Small Split"
class="m-2"
@@ -229,7 +229,7 @@
<CCardBody>
<div>
<CDropdown
toggler-text="Dropdown ARIA" variant="primary"
toggler-text="Dropdown ARIA" color="primary"
class="m-2"
>
<div role="group">
@@ -256,13 +256,13 @@
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Dropdown </strong>
<small><code>variant</code></small>
<small><code>color</code></small>
</CCardHeader>
<CCardBody>
<CDropdown
size="sm"
toggler-text="Primary"
variant="primary"
color="primary"
class="m-0 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
@@ -272,7 +272,7 @@
<CDropdown
size="sm"
toggler-text="Secondary"
variant="secondary"
color="secondary"
class="m-0 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
@@ -282,7 +282,7 @@
<CDropdown
size="sm"
toggler-text="Success"
variant="success"
color="success"
class="m-0 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
@@ -292,7 +292,7 @@
<CDropdown
size="sm"
toggler-text="Warning"
variant="warning"
color="warning"
class="m-0 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
@@ -302,7 +302,7 @@
<CDropdown
size="sm"
toggler-text="Danger"
variant="danger"
color="danger"
class="m-0 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
@@ -312,7 +312,7 @@
<CDropdown
size="sm"
toggler-text="Info"
variant="info"
color="info"
class="m-0 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
@@ -322,7 +322,7 @@
<CDropdown
size="sm"
toggler-text="Light"
variant="light"
color="light"
class="m-0 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
@@ -332,7 +332,7 @@
<CDropdown
size="sm"
toggler-text="Dark"
variant="dark"
color="dark"
class="m-0 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
@@ -342,7 +342,7 @@
<CDropdown
size="sm"
toggler-text="Link"
variant="link"
color="link"
class="m-0 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
src/views/buttons/StandardButtons.vue
+169 -169
View File
@@ -20,31 +20,31 @@
Normal
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="primary">Primary</CButton>
<CButton block color="primary">Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="secondary">Secondary</CButton>
<CButton block color="secondary">Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="success">Success</CButton>
<CButton block color="success">Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="warning">Warning</CButton>
<CButton block color="warning">Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="danger">Danger</CButton>
<CButton block color="danger">Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="info">Info</CButton>
<CButton block color="info">Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="light">Light</CButton>
<CButton block color="light">Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="dark">Dark</CButton>
<CButton block color="dark">Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="link">Link</CButton>
<CButton block color="link">Link</CButton>
</CCol>
</CRow>
<CRow class="align-items-center mt-3">
@@ -52,31 +52,31 @@
Active State
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="primary" aria-pressed="true">Primary</CButton>
<CButton pressed block color="primary" aria-pressed="true">Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="secondary" aria-pressed="true">Secondary</CButton>
<CButton pressed block color="secondary" aria-pressed="true">Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="success" aria-pressed="true">Success</CButton>
<CButton pressed block color="success" aria-pressed="true">Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="warning" aria-pressed="true">Warning</CButton>
<CButton pressed block color="warning" aria-pressed="true">Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="danger" aria-pressed="true">Danger</CButton>
<CButton pressed block color="danger" aria-pressed="true">Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="info" aria-pressed="true">Info</CButton>
<CButton pressed block color="info" aria-pressed="true">Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="light" aria-pressed="true">Light</CButton>
<CButton pressed block color="light" aria-pressed="true">Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="dark" aria-pressed="true">Dark</CButton>
<CButton pressed block color="dark" aria-pressed="true">Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton pressed block variant="link" aria-pressed="true">Link</CButton>
<CButton pressed block color="link" aria-pressed="true">Link</CButton>
</CCol>
</CRow>
<CRow class="align-items-center mt-3">
@@ -84,31 +84,31 @@
Disabled
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="primary" disabled>Primary</CButton>
<CButton block color="primary" disabled>Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="secondary" disabled>Secondary</CButton>
<CButton block color="secondary" disabled>Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="success" disabled>Success</CButton>
<CButton block color="success" disabled>Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="warning" disabled>Warning</CButton>
<CButton block color="warning" disabled>Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="danger" disabled>Danger</CButton>
<CButton block color="danger" disabled>Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="info" disabled>Info</CButton>
<CButton block color="info" disabled>Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="light" disabled>Light</CButton>
<CButton block color="light" disabled>Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="dark" disabled>Dark</CButton>
<CButton block color="dark" disabled>Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="link" disabled>Link</CButton>
<CButton block color="link" disabled>Link</CButton>
</CCol>
</CRow>
</CCardBody>
@@ -126,28 +126,28 @@
Normal
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="primary">Primary</CButton>
<CButton block outline color="primary">Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="secondary">Secondary</CButton>
<CButton block outline color="secondary">Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="success">Success</CButton>
<CButton block outline color="success">Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="warning">Warning</CButton>
<CButton block outline color="warning">Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="danger">Danger</CButton>
<CButton block outline color="danger">Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="info">Info</CButton>
<CButton block outline color="info">Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="light">Light</CButton>
<CButton block outline color="light">Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="dark">Dark</CButton>
<CButton block outline color="dark">Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
</CRow>
@@ -156,28 +156,28 @@
Active State
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed outline variant="primary" aria-pressed="true">Primary</CButton>
<CButton block pressed outline color="primary" aria-pressed="true">Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed outline variant="secondary" aria-pressed="true">Secondary</CButton>
<CButton block pressed outline color="secondary" aria-pressed="true">Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed outline variant="success" aria-pressed="true">Success</CButton>
<CButton block pressed outline color="success" aria-pressed="true">Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed outline variant="warning" aria-pressed="true">Warning</CButton>
<CButton block pressed outline color="warning" aria-pressed="true">Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed outline variant="danger" aria-pressed="true">Danger</CButton>
<CButton block pressed outline color="danger" aria-pressed="true">Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed outline variant="info" aria-pressed="true">Info</CButton>
<CButton block pressed outline color="info" aria-pressed="true">Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed outline variant="light" aria-pressed="true">Light</CButton>
<CButton block pressed outline color="light" aria-pressed="true">Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block pressed outline variant="dark" aria-pressed="true">Dark</CButton>
<CButton block pressed outline color="dark" aria-pressed="true">Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
</CRow>
@@ -186,28 +186,28 @@
Disabled
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="primary" disabled>Primary</CButton>
<CButton block outline color="primary" disabled>Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="secondary" disabled>Secondary</CButton>
<CButton block outline color="secondary" disabled>Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="success" disabled>Success</CButton>
<CButton block outline color="success" disabled>Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="warning" disabled>Warning</CButton>
<CButton block outline color="warning" disabled>Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="danger" disabled>Danger</CButton>
<CButton block outline color="danger" disabled>Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="info" disabled>Info</CButton>
<CButton block outline color="info" disabled>Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="light" disabled>Light</CButton>
<CButton block outline color="light" disabled>Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="dark" disabled>Dark</CButton>
<CButton block outline color="dark" disabled>Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
</CRow>
@@ -227,28 +227,28 @@
Normal
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="primary">Primary</CButton>
<CButton block ghost color="primary">Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="secondary">Secondary</CButton>
<CButton block ghost color="secondary">Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="success">Success</CButton>
<CButton block ghost color="success">Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="warning">Warning</CButton>
<CButton block ghost color="warning">Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="danger">Danger</CButton>
<CButton block ghost color="danger">Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="info">Info</CButton>
<CButton block ghost color="info">Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="light">Light</CButton>
<CButton block ghost color="light">Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="dark">Dark</CButton>
<CButton block ghost color="dark">Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
</CRow>
@@ -257,28 +257,28 @@
Active State
</CCol>
<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>
<CButton block pressed ghost color="primary" aria-pressed="true">Primary</CButton>
</CCol>
<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>
<CButton block pressed ghost color="secondary" aria-pressed="true">Secondary</CButton>
</CCol>
<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>
<CButton block pressed ghost color="success" aria-pressed="true">Success</CButton>
</CCol>
<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>
<CButton block pressed ghost color="warning" aria-pressed="true">Warning</CButton>
</CCol>
<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>
<CButton block pressed ghost color="danger" aria-pressed="true">Danger</CButton>
</CCol>
<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>
<CButton block pressed ghost color="info" aria-pressed="true">Info</CButton>
</CCol>
<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>
<CButton block pressed ghost color="light" aria-pressed="true">Light</CButton>
</CCol>
<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>
<CButton block pressed ghost color="dark" aria-pressed="true">Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
</CRow>
@@ -287,28 +287,28 @@
Disabled
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="primary" disabled>Primary</CButton>
<CButton block ghost color="primary" disabled>Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="secondary" disabled>Secondary</CButton>
<CButton block ghost color="secondary" disabled>Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="success" disabled>Success</CButton>
<CButton block ghost color="success" disabled>Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="warning" disabled>Warning</CButton>
<CButton block ghost color="warning" disabled>Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="danger" disabled>Danger</CButton>
<CButton block ghost color="danger" disabled>Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="info" disabled>Info</CButton>
<CButton block ghost color="info" disabled>Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="light" disabled>Light</CButton>
<CButton block ghost color="light" disabled>Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block ghost variant="dark" disabled>Dark</CButton>
<CButton block ghost color="dark" disabled>Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
</CRow>
@@ -328,31 +328,31 @@
Normal
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="primary" square>Primary</CButton>
<CButton block color="primary" square>Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="secondary" square>Secondary</CButton>
<CButton block color="secondary" square>Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="success" square>Success</CButton>
<CButton block color="success" square>Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="warning" square>Warning</CButton>
<CButton block color="warning" square>Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="danger" square>Danger</CButton>
<CButton block color="danger" square>Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="info" square>Info</CButton>
<CButton block color="info" square>Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="light" square>Light</CButton>
<CButton block color="light" square>Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="dark" square>Dark</CButton>
<CButton block color="dark" square>Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="link" square>Link</CButton>
<CButton block color="link" square>Link</CButton>
</CCol>
</CRow>
<CRow class="align-items-center mt-3">
@@ -360,31 +360,31 @@
Active State
</CCol>
<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>
<CButton pressed block color="primary" square aria-pressed="true">Primary</CButton>
</CCol>
<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>
<CButton pressed block color="secondary" square aria-pressed="true">Secondary</CButton>
</CCol>
<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>
<CButton pressed block color="success" square aria-pressed="true">Success</CButton>
</CCol>
<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>
<CButton pressed block color="warning" square aria-pressed="true">Warning</CButton>
</CCol>
<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>
<CButton pressed block color="danger" square aria-pressed="true">Danger</CButton>
</CCol>
<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>
<CButton pressed block color="info" square aria-pressed="true">Info</CButton>
</CCol>
<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>
<CButton pressed block color="light" square aria-pressed="true">Light</CButton>
</CCol>
<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>
<CButton pressed block color="dark" square aria-pressed="true">Dark</CButton>
</CCol>
<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>
<CButton pressed block color="link" square aria-pressed="true">Link</CButton>
</CCol>
</CRow>
<CRow class="align-items-center mt-3">
@@ -392,31 +392,31 @@
Disabled
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="primary" square disabled>Primary</CButton>
<CButton block color="primary" square disabled>Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="secondary" square disabled>Secondary</CButton>
<CButton block color="secondary" square disabled>Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="success" square disabled>Success</CButton>
<CButton block color="success" square disabled>Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="warning" square disabled>Warning</CButton>
<CButton block color="warning" square disabled>Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="danger" square disabled>Danger</CButton>
<CButton block color="danger" square disabled>Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="info" square disabled>Info</CButton>
<CButton block color="info" square disabled>Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="light" square disabled>Light</CButton>
<CButton block color="light" square disabled>Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="dark" square disabled>Dark</CButton>
<CButton block color="dark" square disabled>Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="link" square disabled>Link</CButton>
<CButton block color="link" square disabled>Link</CButton>
</CCol>
</CRow>
</CCardBody>
@@ -435,31 +435,31 @@
Normal
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="primary" pill>Primary</CButton>
<CButton block color="primary" pill>Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="secondary" pill>Secondary</CButton>
<CButton block color="secondary" pill>Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="success" pill>Success</CButton>
<CButton block color="success" pill>Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="warning" pill>Warning</CButton>
<CButton block color="warning" pill>Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="danger" pill>Danger</CButton>
<CButton block color="danger" pill>Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="info" pill>Info</CButton>
<CButton block color="info" pill>Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="light" pill>Light</CButton>
<CButton block color="light" pill>Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="dark" pill>Dark</CButton>
<CButton block color="dark" pill>Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="link" pill>Link</CButton>
<CButton block color="link" pill>Link</CButton>
</CCol>
</CRow>
<CRow class="align-items-center mt-3">
@@ -467,31 +467,31 @@
Active State
</CCol>
<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>
<CButton pressed block color="primary" pill aria-pressed="true">Primary</CButton>
</CCol>
<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>
<CButton pressed block color="secondary" pill aria-pressed="true">Secondary</CButton>
</CCol>
<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>
<CButton pressed block color="success" pill aria-pressed="true">Success</CButton>
</CCol>
<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>
<CButton pressed block color="warning" pill aria-pressed="true">Warning</CButton>
</CCol>
<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>
<CButton pressed block color="danger" pill aria-pressed="true">Danger</CButton>
</CCol>
<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>
<CButton pressed block color="info" pill aria-pressed="true">Info</CButton>
</CCol>
<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>
<CButton pressed block color="light" pill aria-pressed="true">Light</CButton>
</CCol>
<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>
<CButton pressed block color="dark" pill aria-pressed="true">Dark</CButton>
</CCol>
<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>
<CButton pressed block color="link" pill aria-pressed="true">Link</CButton>
</CCol>
</CRow>
<CRow class="align-items-center mt-3">
@@ -499,31 +499,31 @@
Disabled
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="primary" pill disabled>Primary</CButton>
<CButton block color="primary" pill disabled>Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="secondary" pill disabled>Secondary</CButton>
<CButton block color="secondary" pill disabled>Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="success" pill disabled>Success</CButton>
<CButton block color="success" pill disabled>Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="warning" pill disabled>Warning</CButton>
<CButton block color="warning" pill disabled>Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="danger" pill disabled>Danger</CButton>
<CButton block color="danger" pill disabled>Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="info" pill disabled>Info</CButton>
<CButton block color="info" pill disabled>Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="light" pill disabled>Light</CButton>
<CButton block color="light" pill disabled>Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="dark" pill disabled>Dark</CButton>
<CButton block color="dark" pill disabled>Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block variant="link" pill disabled>Link</CButton>
<CButton block color="link" pill disabled>Link</CButton>
</CCol>
</CRow>
</CCardBody>
@@ -539,19 +539,19 @@
Small
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton variant="primary" size="sm">Standard Button</CButton>
<CButton color="primary" size="sm">Standard Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton outline variant="secondary" size="sm">Outline Button</CButton>
<CButton outline color="secondary" size="sm">Outline Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton size="sm" ghost variant="success">Ghost Button</CButton>
<CButton size="sm" ghost color="success">Ghost Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton variant="warning" size="sm" square>Square Button</CButton>
<CButton color="warning" size="sm" square>Square Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton variant="danger" size="sm" pill>Pill Button</CButton>
<CButton color="danger" size="sm" pill>Pill Button</CButton>
</CCol>
</CRow>
<CRow class="align-items-center mt-3">
@@ -559,19 +559,19 @@
Normal
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton variant="primary">Standard Button</CButton>
<CButton color="primary">Standard Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton outline variant="secondary">Outline Button</CButton>
<CButton outline color="secondary">Outline Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton ghost variant="success">Ghost Button</CButton>
<CButton ghost color="success">Ghost Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton variant="warning" square>Square Button</CButton>
<CButton color="warning" square>Square Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton variant="danger" pill>Pill Button</CButton>
<CButton color="danger" pill>Pill Button</CButton>
</CCol>
</CRow>
<CRow class="align-items-center mt-3">
@@ -579,19 +579,19 @@
Large
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton variant="primary" size="lg">Standard Button</CButton>
<CButton color="primary" size="lg">Standard Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton outline variant="secondary" size="lg">Outline Button</CButton>
<CButton outline color="secondary" size="lg">Outline Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton ghost variant="success" size="lg">Ghost Button</CButton>
<CButton ghost color="success" size="lg">Ghost Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton variant="warning" size="lg" square>Square Button</CButton>
<CButton color="warning" size="lg" square>Square Button</CButton>
</CCol>
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton variant="danger" size="lg" pill>Pill Button</CButton>
<CButton color="danger" size="lg" pill>Pill Button</CButton>
</CCol>
</CRow>
</CCardBody>
@@ -603,27 +603,27 @@
<CCardBody>
<CRow class="align-items-center">
<CCol sm xs="12" class="text-center mt-3">
<CButton variant="primary">
<CButton color="primary">
<i class="cui-lightbulb"></i>&nbsp;Standard Button
</CButton>
</CCol>
<CCol sm xs="12" class="text-center mt-3">
<CButton variant="secondary" outline>
<CButton color="secondary" outline>
<i class="cui-lightbulb"></i>&nbsp;Outline Button
</CButton>
</CCol>
<CCol sm xs="12" class="text-center mt-3">
<CButton variant="success">
<CButton color="success">
<i class="cui-lightbulb"></i>&nbsp;Ghost Button
</CButton>
</CCol>
<CCol sm xs="12" class="text-center mt-3">
<CButton variant="warning" square>
<CButton color="warning" square>
<i class="cui-lightbulb"></i>&nbsp;Square Button
</CButton>
</CCol>
<CCol sm xs="12" class="text-center mt-3">
<CButton variant="danger" pill>
<CButton color="danger" pill>
<i class="cui-lightbulb"></i>&nbsp;Pill Button
</CButton>
</CCol>
@@ -637,22 +637,22 @@
<CCardBody>
<CRow>
<CCol sm xs="12" class="text-center mt-3">
<CButton outline variant="primary" :pressed.sync="togglePress">Primary {{togglePress ? 'On ' : 'Off'}}</CButton>
<CButton outline color="primary" :pressed.sync="togglePress">Primary {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol>
<CCol sm xs="12" class="text-center mt-3">
<CButton outline variant="secondary" :pressed.sync="togglePress">Secondary {{togglePress ? 'On ' : 'Off'}}</CButton>
<CButton outline color="secondary" :pressed.sync="togglePress">Secondary {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol>
<CCol sm xs="12" class="text-center mt-3">
<CButton outline variant="success" :pressed.sync="togglePress">Success {{togglePress ? 'On ' : 'Off'}}</CButton>
<CButton outline color="success" :pressed.sync="togglePress">Success {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol>
<CCol sm xs="12" class="text-center mt-3">
<CButton outline variant="info" :pressed.sync="togglePress">Info {{togglePress ? 'On ' : 'Off'}}</CButton>
<CButton outline color="info" :pressed.sync="togglePress">Info {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol>
<CCol sm xs="12" class="text-center mt-3">
<CButton outline variant="warning" :pressed.sync="togglePress">Warning {{togglePress ? 'On ' : 'Off'}}</CButton>
<CButton outline color="warning" :pressed.sync="togglePress">Warning {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol>
<CCol sm xs="12" class="text-center mt-3">
<CButton outline variant="danger" :pressed.sync="togglePress">Danger {{togglePress ? 'On ' : 'Off'}}</CButton>
<CButton outline color="danger" :pressed.sync="togglePress">Danger {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol>
</CRow>
</CCardBody>
@@ -664,13 +664,13 @@
<strong>Block Level CButtons </strong><small>Add this <code>block</code></small>
</CCardHeader>
<CCardBody>
<CButton size="lg" variant="secondary" block>Block level button</CButton>
<CButton size="lg" variant="primary" block>Block level button</CButton>
<CButton size="lg" variant="success" block>Block level button</CButton>
<CButton size="lg" variant="info" block>Block level button</CButton>
<CButton size="lg" variant="warning" block>Block level button</CButton>
<CButton size="lg" variant="danger" block>Block level button</CButton>
<CButton size="lg" variant="link" block>Block level button</CButton>
<CButton size="lg" color="secondary" block>Block level button</CButton>
<CButton size="lg" color="primary" block>Block level button</CButton>
<CButton size="lg" color="success" block>Block level button</CButton>
<CButton size="lg" color="info" block>Block level button</CButton>
<CButton size="lg" color="warning" block>Block level button</CButton>
<CButton size="lg" color="danger" block>Block level button</CButton>
<CButton size="lg" color="link" block>Block level button</CButton>
</CCardBody>
</CCard>
</CCol>
@@ -680,13 +680,13 @@
<strong>Block Level CButtons </strong><small>Add this <code>block</code></small>
</CCardHeader>
<CCardBody>
<CButton size="lg" outline variant="secondary" block>Block level button</CButton>
<CButton size="lg" outline variant="primary" block>Block level button</CButton>
<CButton size="lg" outline variant="success" block>Block level button</CButton>
<CButton size="lg" outline variant="info" block>Block level button</CButton>
<CButton size="lg" outline variant="warning" block>Block level button</CButton>
<CButton size="lg" outline variant="danger" block>Block level button</CButton>
<CButton size="lg" ghost variant="info" block>Block level button</CButton>
<CButton size="lg" outline color="secondary" block>Block level button</CButton>
<CButton size="lg" outline color="primary" block>Block level button</CButton>
<CButton size="lg" outline color="success" block>Block level button</CButton>
<CButton size="lg" outline color="info" block>Block level button</CButton>
<CButton size="lg" outline color="warning" block>Block level button</CButton>
<CButton size="lg" outline color="danger" block>Block level button</CButton>
<CButton size="lg" ghost color="info" block>Block level button</CButton>
</CCardBody>
</CCard>
</CCol>