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

refactor: delete 'c-' class prefix, update coreui styles to alpha-v13

Browse Source
This commit is contained in:
woothu
2019-09-20 13:59:53 +02:00
parent 6969728859
commit b3e6540052
46 changed files with 1125 additions and 1132 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/buttons/BrandButtons.vue
+4 -4
View File
@@ -5,7 +5,7 @@
<CCard>
<CCardHeader>
<strong>Brand Button</strong>
<div class="c-card-header-actions">
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/ButtonComponents"
class="card-header-action"
@@ -219,12 +219,12 @@ export default {
}
</script>
<style scoped lang="css">
.c-btn {
<style scoped>
.btn {
margin-bottom: 4px;
margin-right: 6px;
}
.c-btn svg + span {
.btn svg + span {
margin-left: 8px;
}
</style>
src/views/buttons/ButtonGroups.vue
+23 -23
View File
@@ -1,5 +1,5 @@
<template>
<div class="c-wrapper">
<div class="wrapper">
<div>
<CRow>
<CCol col="12" >
@@ -7,7 +7,7 @@
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap button group</strong>
<div class="c-card-header-actions">
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/ButtonComponents"
class="card-header-action"
@@ -25,14 +25,14 @@
<CButton variant="secondary">Two</CButton>
<CButton variant="secondary">Three</CButton>
<CButton variant="secondary">Four</CButton>
<CButton variant="secondary" class="c-d-sm-down-none">Five</CButton>
<CButton variant="secondary" class="d-sm-down-none">Five</CButton>
</CButtonGroup>
<br><br>
<CButtonGroup>
<CButton class="c-d-sm-down-none" variant="success">Success</CButton>
<CButton class="d-sm-down-none" variant="success">Success</CButton>
<CButton variant="info">Info</CButton>
<CButton variant="warning">Warn</CButton>
<CButton class="c-d-sm-down-none" variant="primary">Primary</CButton>
<CButton class="d-sm-down-none" variant="primary">Primary</CButton>
<CButton variant="danger">Danger</CButton>
<CButton variant="link">Link</CButton>
</CButtonGroup>
@@ -77,15 +77,15 @@
<CCardBody>
<div>
<CButtonGroup>
<CButton variant="secondary" class="c-d-sm-down-none">Button 1</CButton>
<CButton variant="secondary" class="c-d-sm-down-none">Button 2</CButton>
<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">
<CDropdownItem>Item 1</CDropdownItem>
<CDropdownItem>Item 2</CDropdownItem>
<CDropdownDivider></CDropdownDivider>
<CDropdownItem>Item 3</CDropdownItem>
</CDropdown>
<CButton variant="secondary" class="c-d-sm-down-none">Button 3</CButton>
<CButton variant="secondary" class="d-sm-down-none">Button 3</CButton>
<CDropdown right split text="Split Menu" variant="info">
<CDropdownItem>Item 1</CDropdownItem>
<CDropdownItem>Item 2</CDropdownItem>
@@ -129,47 +129,47 @@
<CCardBody>
<div>
<CButtonToolbar aria-label="Toolbar with button groups">
<CButtonGroup class="c-mx-1">
<CButton variant="secondary" class="c-d-sm-down-none">&laquo;</CButton>
<CButtonGroup class="mx-1">
<CButton variant="secondary" class="d-sm-down-none">&laquo;</CButton>
<CButton variant="secondary">&lsaquo;</CButton>
</CButtonGroup>
<CButtonGroup class="c-mx-1">
<CButton variant="secondary" class="c-d-sm-down-none">Edit</CButton>
<CButtonGroup class="mx-1">
<CButton variant="secondary" class="d-sm-down-none">Edit</CButton>
<CButton variant="secondary">Undo</CButton>
<CButton variant="secondary">Redo</CButton>
</CButtonGroup>
<CButtonGroup class="c-mx-1">
<CButtonGroup class="mx-1">
<CButton variant="secondary">&rsaquo;</CButton>
<CButton variant="secondary" class="c-d-sm-down-none">&raquo;</CButton>
<CButton variant="secondary" class="d-sm-down-none">&raquo;</CButton>
</CButtonGroup>
</CButtonToolbar>
</div>
<hr class="c-d-sm-down-none"/>
<hr class="d-sm-down-none"/>
<div>
<CButtonToolbar
aria-label="Toolbar with button groups and input groups"
class="c-d-sm-down-none"
class="d-sm-down-none"
>
<CButtonGroup size="sm" class="c-mx-1">
<CButtonGroup size="sm" class="mx-1">
<CButton variant="secondary">New</CButton>
<CButton variant="secondary">Edit</CButton>
</CButtonGroup>
<CFormInput
class="c-mb-0 c-w-25 c-mx-1"
class="mb-0 w-25 mx-1"
size="sm"
prepend-html="$"
append-html=".00"
value="100"
/>
<CFormSelect
class="c-mb-0 c-w-25 c-mx-1"
class="mb-0 w-25 mx-1"
size="sm"
prepend-html="Size"
value="Medium"
:options="['Large','Medium','Small']"
custom
/>
<CButtonGroup size="sm" class="c-mx-1">
<CButtonGroup size="sm" class="mx-1">
<CButton variant="secondary">Save</CButton>
<CButton variant="secondary">Cancel</CButton>
</CButtonGroup>
@@ -178,14 +178,14 @@
<hr/>
<div>
<CButtonToolbar aria-label="Toolbar with button groups and dropdown menu">
<CButtonGroup class="c-mx-1 c-d-sm-down-none">
<CButtonGroup class="mx-1 d-sm-down-none">
<CButton variant="secondary">New</CButton>
<CButton variant="secondary">Edit</CButton>
<CButton variant="secondary">Undo</CButton>
</CButtonGroup>
<CDropdown
variant="secondary"
class="c-mx-1"
class="mx-1"
placement="bottom-end"
button-content="Menu"
>
@@ -193,7 +193,7 @@
<CDropdownItem>Item 2</CDropdownItem>
<CDropdownItem>Item 3</CDropdownItem>
</CDropdown>
<CButtonGroup class="c-mx-1">
<CButtonGroup class="mx-1">
<CButton variant="secondary">Save</CButton>
<CButton variant="secondary">Cancel</CButton>
</CButtonGroup>
src/views/buttons/Dropdowns.vue
+25 -25
View File
@@ -1,5 +1,5 @@
<template>
<div class="c-wrapper">
<div class="wrapper">
<div>
<CRow>
<CCol col="12" md="6">
@@ -7,7 +7,7 @@
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Dropdown</strong>
<div class="c-card-header-actions">
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Dropdown"
class="card-header-action"
@@ -22,7 +22,7 @@
<div>
<CDropdown
toggler-text="Dropdown Button"
class="c-m-2"
class="m-2"
variant="secondary"
>
<CDropdownItem>First Action</CDropdownItem>
@@ -34,7 +34,7 @@
</CDropdown>
</div>
<!-- <div>
<CDropdown toggler-text="Dropdown using buttons as menu items" class="c-m-2">
<CDropdown toggler-text="Dropdown using buttons as menu items" class="m-2">
<CDropdownItem>I'm a button</CDropdownItem>
<CDropdownItem>I'm also a button</CDropdownItem>
<CDropdownItem disabled>I'm a button, but disabled!</CDropdownItem>
@@ -44,7 +44,7 @@
<div>
<CDropdown
toggler-text="Dropdown with divider"
class="c-m-2"
class="m-2"
variant="secondary"
>
<CDropdownItem>First item</CDropdownItem>
@@ -56,7 +56,7 @@
<div>
<CDropdown
toggler-text="Dropdown with header"
class="c-m-2"
class="m-2"
variant="secondary"
>
<CDropdownHeader>Dropdown header</CDropdownHeader>
@@ -79,7 +79,7 @@
<CDropdown
toggler-text="Left align"
variant="primary"
class="c-m-2 c-d-inline-block"
class="m-2 d-inline-block"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
@@ -89,7 +89,7 @@
placement="bottom-end"
toggler-text="Right align"
variant="primary"
class="c-m-2 c-d-inline-block"
class="m-2 d-inline-block"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
@@ -100,7 +100,7 @@
<CDropdown
toggler-text="Drop-Up"
variant="info"
class="c-m-2"
class="m-2"
placement="top-start"
>
@@ -114,7 +114,7 @@
variant="secondary"
:offset="25"
toggler-text="Offset Dropdown"
class="c-m-2"
class="m-2"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
@@ -126,7 +126,7 @@
variant="secondary"
split
toggler-text="Split Dropdown"
class="c-m-2"
class="m-2"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
@@ -176,7 +176,7 @@
variant="secondary"
size="lg"
toggler-text="Large"
class="c-m-2 c-d-inline-block"
class="m-2 d-inline-block"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
@@ -187,7 +187,7 @@
size="lg"
split
toggler-text="Large Split"
class="c-m-2"
class="m-2"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
@@ -198,7 +198,7 @@
variant="secondary"
size="sm"
toggler-text="Small"
class="c-m-2 c-d-inline-block"
class="m-2 d-inline-block"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
@@ -208,7 +208,7 @@
variant="secondary"
size="sm"
split toggler-text="Small Split"
class="c-m-2"
class="m-2"
>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
@@ -231,7 +231,7 @@
<div>
<CDropdown
toggler-text="Dropdown ARIA" variant="primary"
class="c-m-2"
class="m-2"
>
<div role="group">
<CDropdownHeader>Groups</CDropdownHeader>
@@ -264,7 +264,7 @@
size="sm"
toggler-text="Primary"
variant="primary"
class="c-m-0 c-d-inline-block"
class="m-0 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
@@ -274,7 +274,7 @@
size="sm"
toggler-text="Secondary"
variant="secondary"
class="c-m-0 c-d-inline-block"
class="m-0 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
@@ -284,7 +284,7 @@
size="sm"
toggler-text="Success"
variant="success"
class="c-m-0 c-d-inline-block"
class="m-0 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
@@ -294,7 +294,7 @@
size="sm"
toggler-text="Warning"
variant="warning"
class="c-m-0 c-d-inline-block"
class="m-0 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
@@ -304,7 +304,7 @@
size="sm"
toggler-text="Danger"
variant="danger"
class="c-m-0 c-d-inline-block"
class="m-0 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
@@ -314,7 +314,7 @@
size="sm"
toggler-text="Info"
variant="info"
class="c-m-0 c-d-inline-block"
class="m-0 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
@@ -324,7 +324,7 @@
size="sm"
toggler-text="Light"
variant="light"
class="c-m-0 c-d-inline-block"
class="m-0 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
@@ -334,7 +334,7 @@
size="sm"
toggler-text="Dark"
variant="dark"
class="c-m-0 c-d-inline-block"
class="m-0 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
@@ -344,7 +344,7 @@
size="sm"
toggler-text="Link"
variant="link"
class="c-m-0 c-d-inline-block"
class="m-0 d-inline-block"
>
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
src/views/buttons/StandardButtons.vue
+199 -199
View File
@@ -3,7 +3,7 @@
<CCard >
<CCardHeader>
<strong>Standard buttons</strong>
<div class="c-card-header-actions">
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/ButtonComponents"
class="card-header-action"
@@ -15,99 +15,99 @@
</div>
</CCardHeader>
<CCardBody>
<CRow class="c-align-items-center">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0">
<CRow class="align-items-center">
<CCol col="12" xl class="mb-3 mb-xl-0">
Normal
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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="c-align-items-center c-mt-3">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0">
<CRow class="align-items-center mt-3">
<CCol col="12" xl class="mb-3 mb-xl-0">
Active State
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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="c-align-items-center c-mt-3">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0">
<CRow class="align-items-center mt-3">
<CCol col="12" xl class="mb-3 mb-xl-0">
Disabled
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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>
@@ -121,95 +121,95 @@
<p>
Use <code>outline</code> prop
</p>
<CRow class="c-align-items-center">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0">
<CRow class="align-items-center">
<CCol col="12" xl class="mb-3 mb-xl-0">
Normal
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="primary">Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="secondary">Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="success">Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="warning">Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="danger">Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="info">Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="light">Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="dark">Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"></CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
</CRow>
<CRow class="c-align-items-center c-mt-3">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0">
<CRow class="align-items-center mt-3">
<CCol col="12" xl class="mb-3 mb-xl-0">
Active State
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<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>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<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>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<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>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<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>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<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>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<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>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<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>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<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>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"></CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
</CRow>
<CRow class="c-align-items-center c-mt-3">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0">
<CRow class="align-items-center mt-3">
<CCol col="12" xl class="mb-3 mb-xl-0">
Disabled
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="primary" disabled>Primary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="secondary" disabled>Secondary</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="success" disabled>Success</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="warning" disabled>Warning</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="danger" disabled>Danger</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="info" disabled>Info</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="light" disabled>Light</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0">
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
<CButton block outline variant="dark" disabled>Dark</CButton>
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"></CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
</CRow>
</CCardBody>
</CCard>
@@ -222,95 +222,95 @@
Use
<code>ghost</code> prop for ghost buttons.
</p>
<CRow class="c-align-items-center">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0">
<CRow class="align-items-center">
<CCol col="12" xl class="mb-3 mb-xl-0">
Normal
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"></CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
</CRow>
<CRow class="c-align-items-center c-mt-3">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0">
<CRow class="align-items-center mt-3">
<CCol col="12" xl class="mb-3 mb-xl-0">
Active State
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"></CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
</CRow>
<CRow class="c-align-items-center c-mt-3">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0">
<CRow class="align-items-center mt-3">
<CCol col="12" xl class="mb-3 mb-xl-0">
Disabled
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-mb-xl-0"></CCol>
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
</CRow>
</CCardBody>
</CCard>
@@ -323,99 +323,99 @@
Use
<code>square</code> prop for square buttons.
</p>
<CRow class="c-align-items-center">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0">
<CRow class="align-items-center">
<CCol col="12" xl class="mb-3 mb-xl-0">
Normal
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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="c-align-items-center c-mt-3">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0">
<CRow class="align-items-center mt-3">
<CCol col="12" xl class="mb-3 mb-xl-0">
Active State
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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="c-align-items-center c-mt-3">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0">
<CRow class="align-items-center mt-3">
<CCol col="12" xl class="mb-3 mb-xl-0">
Disabled
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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>
@@ -430,99 +430,99 @@
Use
<code>pill</code> prop for pill buttons.
</p>
<CRow class="c-align-items-center">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0">
<CRow class="align-items-center">
<CCol col="12" xl class="mb-3 mb-xl-0">
Normal
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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="c-align-items-center c-mt-3">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0">
<CRow class="align-items-center mt-3">
<CCol col="12" xl class="mb-3 mb-xl-0">
Active State
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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="c-align-items-center c-mt-3">
<CCol col="12" xl class="c-mb-3 c-mb-xl-0">
<CRow class="align-items-center mt-3">
<CCol col="12" xl class="mb-3 mb-xl-0">
Disabled
</CCol>
<CCol col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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 col="6" sm="4" md="2" xl class="c-mb-3 c-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>
@@ -534,63 +534,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="c-align-items-center">
<CCol col="2" xl class="c-mb-3 c-mb-xl-0">
<CRow class="align-items-center">
<CCol col="2" xl class="mb-3 mb-xl-0">
Small
</CCol>
<CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton variant="primary" size="sm">Standard Button</CButton>
</CCol>
<CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton outline variant="secondary" size="sm">Outline Button</CButton>
</CCol>
<CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton size="sm" ghost variant="success">Ghost Button</CButton>
</CCol>
<CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton variant="warning" size="sm" square>Square Button</CButton>
</CCol>
<CCol col="2" class="c-mb-3 c-mb-xl-0 c-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="c-align-items-center c-mt-3">
<CCol col="2" xl class="c-mb-3 c-mb-xl-0">
<CRow class="align-items-center mt-3">
<CCol col="2" xl class="mb-3 mb-xl-0">
Normal
</CCol>
<CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton variant="primary">Standard Button</CButton>
</CCol>
<CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton outline variant="secondary" >Outline Button</CButton>
</CCol>
<CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton ghost variant="success">Ghost Button</CButton>
</CCol>
<CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton variant="warning" square>Square Button</CButton>
</CCol>
<CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton variant="danger" pill>Pill Button</CButton>
</CCol>
</CRow>
<CRow class="c-align-items-center c-mt-3">
<CCol col="2" xl class="c-mb-3 c-mb-xl-0">
<CRow class="align-items-center mt-3">
<CCol col="2" xl class="mb-3 mb-xl-0">
Large
</CCol>
<CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton variant="primary" size="lg">Standard Button</CButton>
</CCol>
<CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton outline variant="secondary" size="lg">Outline Button</CButton>
</CCol>
<CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton ghost variant="success" size="lg">Ghost Button</CButton>
</CCol>
<CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton variant="warning" size="lg" square>Square Button</CButton>
</CCol>
<CCol col="2" class="c-mb-3 c-mb-xl-0 c-text-center">
<CCol col="2" class="mb-3 mb-xl-0 text-center">
<CButton variant="danger" size="lg" pill>Pill Button</CButton>
</CCol>
</CRow>
@@ -601,28 +601,28 @@
<strong>With Icons</strong>
</CCardHeader>
<CCardBody>
<CRow class="c-align-items-center">
<CCol sm xs="12" class="c-text-center c-mt-3">
<CRow class="align-items-center">
<CCol sm xs="12" class="text-center mt-3">
<CButton variant="primary">
<i class="cui-lightbulb"></i>&nbsp;Standard Button
</CButton>
</CCol>
<CCol sm xs="12" class="c-text-center c-mt-3">
<CCol sm xs="12" class="text-center mt-3">
<CButton variant="secondary" outline>
<i class="cui-lightbulb"></i>&nbsp;Outline Button
</CButton>
</CCol>
<CCol sm xs="12" class="c-text-center c-mt-3">
<CCol sm xs="12" class="text-center mt-3">
<CButton variant="success">
<i class="cui-lightbulb"></i>&nbsp;Ghost Button
</CButton>
</CCol>
<CCol sm xs="12" class="c-text-center c-mt-3">
<CCol sm xs="12" class="text-center mt-3">
<CButton variant="warning" square>
<i class="cui-lightbulb"></i>&nbsp;Square Button
</CButton>
</CCol>
<CCol sm xs="12" class="c-text-center c-mt-3">
<CCol sm xs="12" class="text-center mt-3">
<CButton variant="danger" pill>
<i class="cui-lightbulb"></i>&nbsp;Pill Button
</CButton>
@@ -636,22 +636,22 @@
</CCardHeader>
<CCardBody>
<CRow>
<CCol sm xs="12" class="c-text-center c-mt-3">
<CCol sm xs="12" class="text-center mt-3">
<CButton outline variant="primary" :pressed.sync="togglePress">Primary {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol>
<CCol sm xs="12" class="c-text-center c-mt-3">
<CCol sm xs="12" class="text-center mt-3">
<CButton outline variant="secondary" :pressed.sync="togglePress">Secondary {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol>
<CCol sm xs="12" class="c-text-center c-mt-3">
<CCol sm xs="12" class="text-center mt-3">
<CButton outline variant="success" :pressed.sync="togglePress">Success {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol>
<CCol sm xs="12" class="c-text-center c-mt-3">
<CCol sm xs="12" class="text-center mt-3">
<CButton outline variant="info" :pressed.sync="togglePress">Info {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol>
<CCol sm xs="12" class="c-text-center c-mt-3">
<CCol sm xs="12" class="text-center mt-3">
<CButton outline variant="warning" :pressed.sync="togglePress">Warning {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol>
<CCol sm xs="12" class="c-text-center c-mt-3">
<CCol sm xs="12" class="text-center mt-3">
<CButton outline variant="danger" :pressed.sync="togglePress">Danger {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol>
</CRow>