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/base/Breadcrumbs.vue
+1 -1
View File
@@ -2,7 +2,7 @@
<div class="wrapper"> <div class="wrapper">
<div class="animated fadeIn"> <div class="animated fadeIn">
<CRow> <CRow>
<CCol cols> <CCol col>
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> Bootstrap Breadcrumb</strong> <i class="fa fa-align-justify"></i><strong> Bootstrap Breadcrumb</strong>
src/views/base/Cards.vue
+4 -4
View File
@@ -52,7 +52,7 @@
<CCardBody :bodyHtml="loremIpsum"/> <CCardBody :bodyHtml="loremIpsum"/>
</CCard> </CCard>
</CCol> </CCol>
</CRow><!--/.row--> </CRow>
<CRow> <CRow>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard <CCard
@@ -92,7 +92,7 @@
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCard> </CCard>
</CCol> </CCol>
</CRow><!--/.row--> </CRow>
<CRow> <CRow>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
@@ -125,7 +125,7 @@
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCard> </CCard>
</CCol> </CCol>
</CRow><!--/.row--> </CRow>
<CRow> <CRow>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard class="bg-primary text-center" bodyWrapper> <CCard class="bg-primary text-center" bodyWrapper>
@@ -187,7 +187,7 @@
</blockquote> </blockquote>
</CCard> </CCard>
</CCol> </CCol>
</CRow><!--/.row--> </CRow>
<CRow> <CRow>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard headerHtml="Card title" class="bg-primary" bodyWrapper> <CCard headerHtml="Card title" class="bg-primary" bodyWrapper>
src/views/base/Collapses.vue
+6 -6
View File
@@ -2,7 +2,7 @@
<div class="wrapper"> <div class="wrapper">
<div class="animated fadeIn"> <div class="animated fadeIn">
<CRow> <CRow>
<CCol cols="12" md="6"> <CCol col="12" md="6">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <i class="fa fa-align-justify"></i>
@@ -31,7 +31,7 @@
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<!-- <CCol cols="12" md="6"> <!-- <CCol col="12" md="6">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>v-b-toggle</code> directive</small> <i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>v-b-toggle</code> directive</small>
@@ -51,7 +51,7 @@
</CCol> </CCol>
</CRow> </CRow>
<CRow> <CRow>
<CCol cols="12" md="6"> <CCol col="12" md="6">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>visibility</code></small> <i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>visibility</code></small>
@@ -66,7 +66,7 @@
</div> </div>
</CCard> </CCard>
</CCol> </CCol>
<CCol cols="12" md="6"> <CCol col="12" md="6">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>v-model</code></small> <i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>v-model</code></small>
@@ -88,7 +88,7 @@
</CCol> </CCol>
</CRow> </CRow>
<CRow> <CRow>
<CCol cols="12" md="6"> <CCol col="12" md="6">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>multiple elements</small> <i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>multiple elements</small>
@@ -109,7 +109,7 @@
</div> </div>
</CCard> </CCard>
</CCol> </CCol>
<CCol cols="12" md="6"> <CCol col="12" md="6">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small><code>accordion</code> support</small> <i class="fa fa-align-justify"></i><strong> Collapse </strong> <small><code>accordion</code> support</small>
src/views/base/Forms.vue
+4 -4
View File
@@ -590,10 +590,10 @@
v-for="(number, key) in [4,5,6,7,8]" v-for="(number, key) in [4,5,6,7,8]"
:key="key" :key="key"
> >
<CCol :cols="12 - number"> <CCol :col="12 - number">
<CFormInput class="mb-0" :placeholder="`.col-md-${12 - number}`"/> <CFormInput class="mb-0" :placeholder="`.col-md-${12 - number}`"/>
</CCol> </CCol>
<CCol :cols="number"> <CCol :col="number">
<CFormInput class="mb-0" :placeholder="`.col-md-${number}`"/> <CFormInput class="mb-0" :placeholder="`.col-md-${number}`"/>
</CCol> </CCol>
</CRow> </CRow>
@@ -618,10 +618,10 @@
v-for="(number, key) in [4,5,6,7,8]" v-for="(number, key) in [4,5,6,7,8]"
:key="key" :key="key"
> >
<CCol :cols="number"> <CCol :col="number">
<CFormInput class="mb-0" :placeholder="`.col-${number}`"/> <CFormInput class="mb-0" :placeholder="`.col-${number}`"/>
</CCol> </CCol>
<CCol :cols="12 - number"> <CCol :col="12 - number">
<CFormInput class="mb-0" :placeholder="`.col-${12 - number}`"/> <CFormInput class="mb-0" :placeholder="`.col-${12 - number}`"/>
</CCol> </CCol>
</CRow> </CRow>
src/views/base/ListGroups.vue
+1 -1
View File
@@ -169,7 +169,7 @@
</CCol> </CCol>
</CRow> </CRow>
<CRow> <CRow>
<CCol cols="12"> <CCol col="12">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <i class="fa fa-align-justify"></i>
src/views/base/Navs.vue
+1 -1
View File
@@ -141,7 +141,7 @@
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CRow> <CRow>
<CCol cols="3" class="m-0"> <CCol col="3" class="m-0">
<CNav vertical pills > <CNav vertical pills >
<CNavItem active>Active</CNavItem> <CNavItem active>Active</CNavItem>
<CNavItem>Link</CNavItem> <CNavItem>Link</CNavItem>
src/views/base/Popovers.vue
+3 -3
View File
@@ -13,7 +13,7 @@
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CRow> <CRow>
<CCol cols="4"> <CCol col="4">
<div class="my-3 text-center"> <div class="my-3 text-center">
<CButton <CButton
variant="primary" variant="primary"
@@ -26,7 +26,7 @@
</CButton> </CButton>
</div> </div>
</CCol> </CCol>
<CCol cols="4"> <CCol col="4">
<div class="my-3 text-center"> <div class="my-3 text-center">
<CButton <CButton
variant="primary" variant="primary"
@@ -39,7 +39,7 @@
/> />
</div> </div>
</CCol> </CCol>
<CCol cols="4"> <CCol col="4">
<div class="my-3 text-center"> <div class="my-3 text-center">
<CButton <CButton
variant="primary" variant="primary"
src/views/base/Tables.vue
+3 -3
View File
@@ -41,7 +41,7 @@
square square
size="sm" size="sm"
@click="toggleDetails(index)" @click="toggleDetails(index)"
:text="details.includes(index) ? 'Hide' : 'Show'" :textHtml="details.includes(index) ? 'Hide' : 'Show'"
/> />
</td> </td>
</template> </template>
@@ -92,7 +92,7 @@
caption="<i class='fa fa-align-justify'></i> Striped Table" caption="<i class='fa fa-align-justify'></i> Striped Table"
/> />
</CCol><!--/.col--> </CCol><!--/.col-->
</CRow><!--/.row--> </CRow>
<CRow> <CRow>
<CCol lg="6"> <CCol lg="6">
@@ -111,7 +111,7 @@
caption="<i class='fa fa-align-justify'></i> Bordered Table" caption="<i class='fa fa-align-justify'></i> Bordered Table"
/> />
</CCol><!--/.col--> </CCol><!--/.col-->
</CRow><!--/.row--> </CRow>
<CRow> <CRow>
<CCol sm="12"> <CCol sm="12">
src/views/base/Tooltips.vue
+3 -3
View File
@@ -14,21 +14,21 @@
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CRow> <CRow>
<CCol cols="4"> <CCol col="4">
<div class="text-center my-3"> <div class="text-center my-3">
<CButton v-c-tooltip.hover.click="'I am a tooltip!'"> <CButton v-c-tooltip.hover.click="'I am a tooltip!'">
Hover Me Hover Me
</CButton> </CButton>
</div> </div>
</CCol> </CCol>
<CCol cols="4"> <CCol col="4">
<div class="text-center my-3"> <div class="text-center my-3">
<CButton v-c-tooltip="{content: 'I start open!', active:true }"> <CButton v-c-tooltip="{content: 'I start open!', active:true }">
Hover me Hover me
</CButton> </CButton>
</div> </div>
</CCol> </CCol>
<CCol cols="4"> <CCol col="4">
<div class="text-center my-3"> <div class="text-center my-3">
<CButton v-c-tooltip.click=" <CButton v-c-tooltip.click="
'I am showing on click and hiding on click outside tooltip!' 'I am showing on click and hiding on click outside tooltip!'
src/views/buttons/BrandButtons.vue
+4 -4
View File
@@ -1,7 +1,7 @@
<template> <template>
<div class="animated fadeIn"> <div class="animated fadeIn">
<CRow> <CRow>
<CCol cols="12"> <CCol col="12">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<strong>Brand Button</strong> <strong>Brand Button</strong>
@@ -96,7 +96,7 @@
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol><!--/.col--> </CCol><!--/.col-->
<CCol cols="12"> <CCol col="12">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<strong>Brand Button </strong> <small>Icons only</small> <strong>Brand Button </strong> <small>Icons only</small>
@@ -192,7 +192,7 @@
</CCard> </CCard>
</CCol><!--/.col--> </CCol><!--/.col-->
<CCol cols="12"> <CCol col="12">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<strong>Brand Button </strong> <small>Text only</small> <strong>Brand Button </strong> <small>Text only</small>
@@ -287,7 +287,7 @@
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol><!--/.col--> </CCol><!--/.col-->
</CRow><!--/.row--> </CRow>
</div> </div>
</template> </template>
src/views/buttons/ButtonGroups.vue
+5 -5
View File
@@ -2,7 +2,7 @@
<div class="wrapper"> <div class="wrapper">
<div class="animated fadeIn"> <div class="animated fadeIn">
<CRow> <CRow>
<CCol cols="12" > <CCol col="12" >
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> Bootstrap button group</strong> <i class="fa fa-align-justify"></i><strong> Bootstrap button group</strong>
@@ -34,7 +34,7 @@
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol cols="12"> <CCol col="12">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> Button group </strong>sizing <i class="fa fa-align-justify"></i><strong> Button group </strong>sizing
@@ -62,7 +62,7 @@
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol cols="12"> <CCol col="12">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> Button group </strong>dropdown support <i class="fa fa-align-justify"></i><strong> Button group </strong>dropdown support
@@ -90,7 +90,7 @@
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol cols="12"> <CCol col="12">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> Button group </strong>vertical variation <i class="fa fa-align-justify"></i><strong> Button group </strong>vertical variation
@@ -106,7 +106,7 @@
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol cols="12"> <CCol col="12">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <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="wrapper">
<div class="animated fadeIn"> <div class="animated fadeIn">
<CRow> <CRow>
<CCol cols="12" md="6"> <CCol col="12" md="6">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <i class="fa fa-align-justify"></i>
@@ -50,7 +50,7 @@
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol cols="12" md="6"> <CCol col="12" md="6">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>positioning</small> <i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>positioning</small>
@@ -108,7 +108,7 @@
</CCol> </CCol>
</CRow> </CRow>
<CRow> <CRow>
<CCol cols="12" md="6"> <CCol col="12" md="6">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>hidden caret</small> <i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>hidden caret</small>
@@ -128,7 +128,7 @@
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol cols="12" md="6"> <CCol col="12" md="6">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>sizing</small> <i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>sizing</small>
@@ -162,7 +162,7 @@
</CCol> </CCol>
</CRow> </CRow>
<CRow> <CRow>
<CCol cols="12" md="6"> <CCol col="12" md="6">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>headers and accessibility</small> <i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>headers and accessibility</small>
@@ -187,7 +187,7 @@
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol cols="12" md="6"> <CCol col="12" md="6">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i><strong> Dropdown </strong><small><code>variant</code></small> <i class="fa fa-align-justify"></i><strong> Dropdown </strong><small><code>variant</code></small>
src/views/buttons/StandardButtons.vue
+168 -168
View File
@@ -6,98 +6,98 @@
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CRow class="align-items-center"> <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 Normal
</CCol> </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> <CButton block variant="primary">Primary</CButton>
</CCol> </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> <CButton block variant="secondary">Secondary</CButton>
</CCol> </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> <CButton block variant="success">Success</CButton>
</CCol> </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> <CButton block variant="warning">Warning</CButton>
</CCol> </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> <CButton block variant="danger">Danger</CButton>
</CCol> </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> <CButton block variant="info">Info</CButton>
</CCol> </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> <CButton block variant="light">Light</CButton>
</CCol> </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> <CButton block variant="dark">Dark</CButton>
</CCol> </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> <CButton block variant="link">Link</CButton>
</CCol> </CCol>
</CRow> </CRow>
<CRow class="align-items-center mt-3"> <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 Active State
</CCol> </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> <CButton pressed block variant="primary" aria-pressed="true">Primary</CButton>
</CCol> </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> <CButton pressed block variant="secondary" aria-pressed="true">Secondary</CButton>
</CCol> </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> <CButton pressed block variant="success" aria-pressed="true">Success</CButton>
</CCol> </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> <CButton pressed block variant="warning" aria-pressed="true">Warning</CButton>
</CCol> </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> <CButton pressed block variant="danger" aria-pressed="true">Danger</CButton>
</CCol> </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> <CButton pressed block variant="info" aria-pressed="true">Info</CButton>
</CCol> </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> <CButton pressed block variant="light" aria-pressed="true">Light</CButton>
</CCol> </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> <CButton pressed block variant="dark" aria-pressed="true">Dark</CButton>
</CCol> </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> <CButton pressed block variant="link" aria-pressed="true">Link</CButton>
</CCol> </CCol>
</CRow> </CRow>
<CRow class="align-items-center mt-3"> <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 Disabled
</CCol> </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> <CButton block variant="primary" disabled>Primary</CButton>
</CCol> </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> <CButton block variant="secondary" disabled>Secondary</CButton>
</CCol> </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> <CButton block variant="success" disabled>Success</CButton>
</CCol> </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> <CButton block variant="warning" disabled>Warning</CButton>
</CCol> </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> <CButton block variant="danger" disabled>Danger</CButton>
</CCol> </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> <CButton block variant="info" disabled>Info</CButton>
</CCol> </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> <CButton block variant="light" disabled>Light</CButton>
</CCol> </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> <CButton block variant="dark" disabled>Dark</CButton>
</CCol> </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> <CButton block variant="link" disabled>Link</CButton>
</CCol> </CCol>
</CRow> </CRow>
@@ -112,94 +112,94 @@
Use <code>variant="outline-*"</code> prop Use <code>variant="outline-*"</code> prop
</p> </p>
<CRow class="align-items-center"> <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 Normal
</CCol> </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> <CButton block variant="outline-primary">Primary</CButton>
</CCol> </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> <CButton block variant="outline-secondary">Secondary</CButton>
</CCol> </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> <CButton block variant="outline-success">Success</CButton>
</CCol> </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> <CButton block variant="outline-warning">Warning</CButton>
</CCol> </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> <CButton block variant="outline-danger">Danger</CButton>
</CCol> </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> <CButton block variant="outline-info">Info</CButton>
</CCol> </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> <CButton block variant="outline-light">Light</CButton>
</CCol> </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> <CButton block variant="outline-dark">Dark</CButton>
</CCol> </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>
<CRow class="align-items-center mt-3"> <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 Active State
</CCol> </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> <CButton block pressed variant="outline-primary" aria-pressed="true">Primary</CButton>
</CCol> </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> <CButton block pressed variant="outline-secondary" aria-pressed="true">Secondary</CButton>
</CCol> </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> <CButton block pressed variant="outline-success" aria-pressed="true">Success</CButton>
</CCol> </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> <CButton block pressed variant="outline-warning" aria-pressed="true">Warning</CButton>
</CCol> </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> <CButton block pressed variant="outline-danger" aria-pressed="true">Danger</CButton>
</CCol> </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> <CButton block pressed variant="outline-info" aria-pressed="true">Info</CButton>
</CCol> </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> <CButton block pressed variant="outline-light" aria-pressed="true">Light</CButton>
</CCol> </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> <CButton block pressed variant="outline-dark" aria-pressed="true">Dark</CButton>
</CCol> </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>
<CRow class="align-items-center mt-3"> <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 Disabled
</CCol> </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> <CButton block variant="outline-primary" disabled>Primary</CButton>
</CCol> </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> <CButton block variant="outline-secondary" disabled>Secondary</CButton>
</CCol> </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> <CButton block variant="outline-success" disabled>Success</CButton>
</CCol> </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> <CButton block variant="outline-warning" disabled>Warning</CButton>
</CCol> </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> <CButton block variant="outline-danger" disabled>Danger</CButton>
</CCol> </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> <CButton block variant="outline-info" disabled>Info</CButton>
</CCol> </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> <CButton block variant="outline-light" disabled>Light</CButton>
</CCol> </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> <CButton block variant="outline-dark" disabled>Dark</CButton>
</CCol> </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>
</CCardBody> </CCardBody>
</CCard> </CCard>
@@ -213,94 +213,94 @@
<code>ghost</code> prop for ghost buttons. <code>ghost</code> prop for ghost buttons.
</p> </p>
<CRow class="align-items-center"> <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 Normal
</CCol> </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> <CButton block ghost variant="primary">Primary</CButton>
</CCol> </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> <CButton block ghost variant="secondary">Secondary</CButton>
</CCol> </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> <CButton block ghost variant="success">Success</CButton>
</CCol> </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> <CButton block ghost variant="warning">Warning</CButton>
</CCol> </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> <CButton block ghost variant="danger">Danger</CButton>
</CCol> </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> <CButton block ghost variant="info">Info</CButton>
</CCol> </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> <CButton block ghost variant="light">Light</CButton>
</CCol> </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> <CButton block ghost variant="dark">Dark</CButton>
</CCol> </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>
<CRow class="align-items-center mt-3"> <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 Active State
</CCol> </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> <CButton block pressed ghost variant="primary" aria-pressed="true">Primary</CButton>
</CCol> </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> <CButton block pressed ghost variant="secondary" aria-pressed="true">Secondary</CButton>
</CCol> </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> <CButton block pressed ghost variant="success" aria-pressed="true">Success</CButton>
</CCol> </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> <CButton block pressed ghost variant="warning" aria-pressed="true">Warning</CButton>
</CCol> </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> <CButton block pressed ghost variant="danger" aria-pressed="true">Danger</CButton>
</CCol> </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> <CButton block pressed ghost variant="info" aria-pressed="true">Info</CButton>
</CCol> </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> <CButton block pressed ghost variant="light" aria-pressed="true">Light</CButton>
</CCol> </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> <CButton block pressed ghost variant="dark" aria-pressed="true">Dark</CButton>
</CCol> </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>
<CRow class="align-items-center mt-3"> <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 Disabled
</CCol> </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> <CButton block ghost variant="primary" disabled>Primary</CButton>
</CCol> </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> <CButton block ghost variant="secondary" disabled>Secondary</CButton>
</CCol> </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> <CButton block ghost variant="success" disabled>Success</CButton>
</CCol> </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> <CButton block ghost variant="warning" disabled>Warning</CButton>
</CCol> </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> <CButton block ghost variant="danger" disabled>Danger</CButton>
</CCol> </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> <CButton block ghost variant="info" disabled>Info</CButton>
</CCol> </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> <CButton block ghost variant="light" disabled>Light</CButton>
</CCol> </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> <CButton block ghost variant="dark" disabled>Dark</CButton>
</CCol> </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>
</CCardBody> </CCardBody>
</CCard> </CCard>
@@ -314,98 +314,98 @@
<code>square</code> prop for square buttons. <code>square</code> prop for square buttons.
</p> </p>
<CRow class="align-items-center"> <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 Normal
</CCol> </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> <CButton block variant="primary" square>Primary</CButton>
</CCol> </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> <CButton block variant="secondary" square>Secondary</CButton>
</CCol> </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> <CButton block variant="success" square>Success</CButton>
</CCol> </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> <CButton block variant="warning" square>Warning</CButton>
</CCol> </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> <CButton block variant="danger" square>Danger</CButton>
</CCol> </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> <CButton block variant="info" square>Info</CButton>
</CCol> </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> <CButton block variant="light" square>Light</CButton>
</CCol> </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> <CButton block variant="dark" square>Dark</CButton>
</CCol> </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> <CButton block variant="link" square>Link</CButton>
</CCol> </CCol>
</CRow> </CRow>
<CRow class="align-items-center mt-3"> <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 Active State
</CCol> </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> <CButton pressed block variant="primary" square aria-pressed="true">Primary</CButton>
</CCol> </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> <CButton pressed block variant="secondary" square aria-pressed="true">Secondary</CButton>
</CCol> </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> <CButton pressed block variant="success" square aria-pressed="true">Success</CButton>
</CCol> </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> <CButton pressed block variant="warning" square aria-pressed="true">Warning</CButton>
</CCol> </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> <CButton pressed block variant="danger" square aria-pressed="true">Danger</CButton>
</CCol> </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> <CButton pressed block variant="info" square aria-pressed="true">Info</CButton>
</CCol> </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> <CButton pressed block variant="light" square aria-pressed="true">Light</CButton>
</CCol> </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> <CButton pressed block variant="dark" square aria-pressed="true">Dark</CButton>
</CCol> </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> <CButton pressed block variant="link" square aria-pressed="true">Link</CButton>
</CCol> </CCol>
</CRow> </CRow>
<CRow class="align-items-center mt-3"> <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 Disabled
</CCol> </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> <CButton block variant="primary" square disabled>Primary</CButton>
</CCol> </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> <CButton block variant="secondary" square disabled>Secondary</CButton>
</CCol> </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> <CButton block variant="success" square disabled>Success</CButton>
</CCol> </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> <CButton block variant="warning" square disabled>Warning</CButton>
</CCol> </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> <CButton block variant="danger" square disabled>Danger</CButton>
</CCol> </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> <CButton block variant="info" square disabled>Info</CButton>
</CCol> </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> <CButton block variant="light" square disabled>Light</CButton>
</CCol> </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> <CButton block variant="dark" square disabled>Dark</CButton>
</CCol> </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> <CButton block variant="link" square disabled>Link</CButton>
</CCol> </CCol>
</CRow> </CRow>
@@ -421,98 +421,98 @@
<code>pill</code> prop for pill buttons. <code>pill</code> prop for pill buttons.
</p> </p>
<CRow class="align-items-center"> <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 Normal
</CCol> </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> <CButton block variant="primary" pill>Primary</CButton>
</CCol> </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> <CButton block variant="secondary" pill>Secondary</CButton>
</CCol> </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> <CButton block variant="success" pill>Success</CButton>
</CCol> </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> <CButton block variant="warning" pill>Warning</CButton>
</CCol> </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> <CButton block variant="danger" pill>Danger</CButton>
</CCol> </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> <CButton block variant="info" pill>Info</CButton>
</CCol> </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> <CButton block variant="light" pill>Light</CButton>
</CCol> </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> <CButton block variant="dark" pill>Dark</CButton>
</CCol> </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> <CButton block variant="link" pill>Link</CButton>
</CCol> </CCol>
</CRow> </CRow>
<CRow class="align-items-center mt-3"> <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 Active State
</CCol> </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> <CButton pressed block variant="primary" pill aria-pressed="true">Primary</CButton>
</CCol> </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> <CButton pressed block variant="secondary" pill aria-pressed="true">Secondary</CButton>
</CCol> </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> <CButton pressed block variant="success" pill aria-pressed="true">Success</CButton>
</CCol> </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> <CButton pressed block variant="warning" pill aria-pressed="true">Warning</CButton>
</CCol> </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> <CButton pressed block variant="danger" pill aria-pressed="true">Danger</CButton>
</CCol> </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> <CButton pressed block variant="info" pill aria-pressed="true">Info</CButton>
</CCol> </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> <CButton pressed block variant="light" pill aria-pressed="true">Light</CButton>
</CCol> </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> <CButton pressed block variant="dark" pill aria-pressed="true">Dark</CButton>
</CCol> </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> <CButton pressed block variant="link" pill aria-pressed="true">Link</CButton>
</CCol> </CCol>
</CRow> </CRow>
<CRow class="align-items-center mt-3"> <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 Disabled
</CCol> </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> <CButton block variant="primary" pill disabled>Primary</CButton>
</CCol> </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> <CButton block variant="secondary" pill disabled>Secondary</CButton>
</CCol> </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> <CButton block variant="success" pill disabled>Success</CButton>
</CCol> </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> <CButton block variant="warning" pill disabled>Warning</CButton>
</CCol> </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> <CButton block variant="danger" pill disabled>Danger</CButton>
</CCol> </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> <CButton block variant="info" pill disabled>Info</CButton>
</CCol> </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> <CButton block variant="light" pill disabled>Light</CButton>
</CCol> </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> <CButton block variant="dark" pill disabled>Dark</CButton>
</CCol> </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> <CButton block variant="link" pill disabled>Link</CButton>
</CCol> </CCol>
</CRow> </CRow>
@@ -525,62 +525,62 @@
<CCardBody> <CCardBody>
<p>Fancy larger or smaller buttons? Add <code>size="lg"</code> or <code>size="sm"</code> for additional sizes.</p> <p>Fancy larger or smaller buttons? Add <code>size="lg"</code> or <code>size="sm"</code> for additional sizes.</p>
<CRow class="align-items-center"> <CRow class="align-items-center">
<CCol cols="2" xl class="mb-3 mb-xl-0"> <CCol col="2" xl class="mb-3 mb-xl-0">
Small Small
</CCol> </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> <CButton variant="primary" size="sm">Standard Button</CButton>
</CCol> </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> <CButton variant="outline-secondary" size="sm">Outline Button</CButton>
</CCol> </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> <CButton size="sm" ghost variant="success">Ghost Button</CButton>
</CCol> </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> <CButton variant="warning" size="sm" square>Square Button</CButton>
</CCol> </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> <CButton variant="danger" size="sm" pill>Pill Button</CButton>
</CCol> </CCol>
</CRow> </CRow>
<CRow class="align-items-center mt-3"> <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 Normal
</CCol> </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> <CButton variant="primary">Standard Button</CButton>
</CCol> </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> <CButton variant="outline-secondary" >Outline Button</CButton>
</CCol> </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> <CButton ghost variant="success">Ghost Button</CButton>
</CCol> </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> <CButton variant="warning" square>Square Button</CButton>
</CCol> </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> <CButton variant="danger" pill>Pill Button</CButton>
</CCol> </CCol>
</CRow> </CRow>
<CRow class="align-items-center mt-3"> <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 Large
</CCol> </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> <CButton variant="primary" size="lg">Standard Button</CButton>
</CCol> </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> <CButton variant="outline-secondary" size="lg">Outline Button</CButton>
</CCol> </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> <CButton ghost variant="success" size="lg">Ghost Button</CButton>
</CCol> </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> <CButton variant="warning" size="lg" square>Square Button</CButton>
</CCol> </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> <CButton variant="danger" size="lg" pill>Pill Button</CButton>
</CCol> </CCol>
</CRow> </CRow>
src/views/icons/CoreUIIcons.vue
+100 -100
View File
@@ -11,403 +11,403 @@
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CRow class="text-center"> <CRow class="text-center">
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-account-logout icons font-2xl d-block mt-4"></i> <i class="cui-account-logout icons font-2xl d-block mt-4"></i>
<div>account-logout</div> <div>account-logout</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-action-redo icons font-2xl d-block mt-4"></i> <i class="cui-action-redo icons font-2xl d-block mt-4"></i>
<div>action-redo</div> <div>action-redo</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-action-undo icons font-2xl d-block mt-4"></i> <i class="cui-action-undo icons font-2xl d-block mt-4"></i>
<div>action-undo</div> <div>action-undo</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-align-center icons font-2xl d-block mt-4"></i> <i class="cui-align-center icons font-2xl d-block mt-4"></i>
<div>align-center</div> <div>align-center</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-align-left icons font-2xl d-block mt-4"></i> <i class="cui-align-left icons font-2xl d-block mt-4"></i>
<div>align-left</div> <div>align-left</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-align-right icons font-2xl d-block mt-4"></i> <i class="cui-align-right icons font-2xl d-block mt-4"></i>
<div>align-right</div> <div>align-right</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-arrow-bottom icons font-2xl d-block mt-4"></i> <i class="cui-arrow-bottom icons font-2xl d-block mt-4"></i>
<div>arrow-bottom</div> <div>arrow-bottom</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-arrow-left icons font-2xl d-block mt-4"></i> <i class="cui-arrow-left icons font-2xl d-block mt-4"></i>
<div>arrow-left</div> <div>arrow-left</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-arrow-right icons font-2xl d-block mt-4"></i> <i class="cui-arrow-right icons font-2xl d-block mt-4"></i>
<div>arrow-right</div> <div>arrow-right</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-arrow-top icons font-2xl d-block mt-4"></i> <i class="cui-arrow-top icons font-2xl d-block mt-4"></i>
<div>arrow-top</div> <div>arrow-top</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-ban icons font-2xl d-block mt-4"></i> <i class="cui-ban icons font-2xl d-block mt-4"></i>
<div>ban</div> <div>ban</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-basket-loaded icons font-2xl d-block mt-4"></i> <i class="cui-basket-loaded icons font-2xl d-block mt-4"></i>
<div>basket-loaded</div> <div>basket-loaded</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-bell icons font-2xl d-block mt-4"></i> <i class="cui-bell icons font-2xl d-block mt-4"></i>
<div>bell</div> <div>bell</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-bold icons font-2xl d-block mt-4"></i> <i class="cui-bold icons font-2xl d-block mt-4"></i>
<div>bold</div> <div>bold</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-bookmark icons font-2xl d-block mt-4"></i> <i class="cui-bookmark icons font-2xl d-block mt-4"></i>
<div>bookmark</div> <div>bookmark</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-briefcase icons font-2xl d-block mt-4"></i> <i class="cui-briefcase icons font-2xl d-block mt-4"></i>
<div>briefcase</div> <div>briefcase</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-british-pound icons font-2xl d-block mt-4"></i> <i class="cui-british-pound icons font-2xl d-block mt-4"></i>
<div>british-pound</div> <div>british-pound</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-brush icons font-2xl d-block mt-4"></i> <i class="cui-brush icons font-2xl d-block mt-4"></i>
<div>brush</div> <div>brush</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-calculator icons font-2xl d-block mt-4"></i> <i class="cui-calculator icons font-2xl d-block mt-4"></i>
<div>calculator</div> <div>calculator</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-calendar icons font-2xl d-block mt-4"></i> <i class="cui-calendar icons font-2xl d-block mt-4"></i>
<div>calendar</div> <div>calendar</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-cart icons font-2xl d-block mt-4"></i> <i class="cui-cart icons font-2xl d-block mt-4"></i>
<div>cart</div> <div>cart</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-chart icons font-2xl d-block mt-4"></i> <i class="cui-chart icons font-2xl d-block mt-4"></i>
<div>chart</div> <div>chart</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-check icons font-2xl d-block mt-4"></i> <i class="cui-check icons font-2xl d-block mt-4"></i>
<div>check</div> <div>check</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-chevron-bottom icons font-2xl d-block mt-4"></i> <i class="cui-chevron-bottom icons font-2xl d-block mt-4"></i>
<div>chevron-bottom</div> <div>chevron-bottom</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-chevron-left icons font-2xl d-block mt-4"></i> <i class="cui-chevron-left icons font-2xl d-block mt-4"></i>
<div>chevron-left</div> <div>chevron-left</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-chevron-right icons font-2xl d-block mt-4"></i> <i class="cui-chevron-right icons font-2xl d-block mt-4"></i>
<div>chevron-right</div> <div>chevron-right</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-chevron-top icons font-2xl d-block mt-4"></i> <i class="cui-chevron-top icons font-2xl d-block mt-4"></i>
<div>chevron-top</div> <div>chevron-top</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-circle-check icons font-2xl d-block mt-4"></i> <i class="cui-circle-check icons font-2xl d-block mt-4"></i>
<div>circle-check</div> <div>circle-check</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-circle-x icons font-2xl d-block mt-4"></i> <i class="cui-circle-x icons font-2xl d-block mt-4"></i>
<div>circle-x</div> <div>circle-x</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-cloud icons font-2xl d-block mt-4"></i> <i class="cui-cloud icons font-2xl d-block mt-4"></i>
<div>cloud</div> <div>cloud</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-cloud-download icons font-2xl d-block mt-4"></i> <i class="cui-cloud-download icons font-2xl d-block mt-4"></i>
<div>cloud-download</div> <div>cloud-download</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-cloud-upload icons font-2xl d-block mt-4"></i> <i class="cui-cloud-upload icons font-2xl d-block mt-4"></i>
<div>cloud-upload</div> <div>cloud-upload</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-code icons font-2xl d-block mt-4"></i> <i class="cui-code icons font-2xl d-block mt-4"></i>
<div>code</div> <div>code</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-cog icons font-2xl d-block mt-4"></i> <i class="cui-cog icons font-2xl d-block mt-4"></i>
<div>cog</div> <div>cog</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-comment-square icons font-2xl d-block mt-4"></i> <i class="cui-comment-square icons font-2xl d-block mt-4"></i>
<div>comment-square</div> <div>comment-square</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-credit-card icons font-2xl d-block mt-4"></i> <i class="cui-credit-card icons font-2xl d-block mt-4"></i>
<div>credit-card</div> <div>credit-card</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-cursor icons font-2xl d-block mt-4"></i> <i class="cui-cursor icons font-2xl d-block mt-4"></i>
<div>cursor</div> <div>cursor</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-dashboard icons font-2xl d-block mt-4"></i> <i class="cui-dashboard icons font-2xl d-block mt-4"></i>
<div>dashboard</div> <div>dashboard</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-delete icons font-2xl d-block mt-4"></i> <i class="cui-delete icons font-2xl d-block mt-4"></i>
<div>delete</div> <div>delete</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-dollar icons font-2xl d-block mt-4"></i> <i class="cui-dollar icons font-2xl d-block mt-4"></i>
<div>dollar</div> <div>dollar</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-drop icons font-2xl d-block mt-4"></i> <i class="cui-drop icons font-2xl d-block mt-4"></i>
<div>drop</div> <div>drop</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-envelope-closed icons font-2xl d-block mt-4"></i> <i class="cui-envelope-closed icons font-2xl d-block mt-4"></i>
<div>envelope-closed</div> <div>envelope-closed</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-envelope-letter icons font-2xl d-block mt-4"></i> <i class="cui-envelope-letter icons font-2xl d-block mt-4"></i>
<div>envelope-letter</div> <div>envelope-letter</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-envelope-open icons font-2xl d-block mt-4"></i> <i class="cui-envelope-open icons font-2xl d-block mt-4"></i>
<div>envelope-open</div> <div>envelope-open</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-euro icons font-2xl d-block mt-4"></i> <i class="cui-euro icons font-2xl d-block mt-4"></i>
<div>euro</div> <div>euro</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-file icons font-2xl d-block mt-4"></i> <i class="cui-file icons font-2xl d-block mt-4"></i>
<div>file</div> <div>file</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-globe icons font-2xl d-block mt-4"></i> <i class="cui-globe icons font-2xl d-block mt-4"></i>
<div>globe</div> <div>globe</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-graph icons font-2xl d-block mt-4"></i> <i class="cui-graph icons font-2xl d-block mt-4"></i>
<div>graph</div> <div>graph</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-home icons font-2xl d-block mt-4"></i> <i class="cui-home icons font-2xl d-block mt-4"></i>
<div>home</div> <div>home</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-inbox icons font-2xl d-block mt-4"></i> <i class="cui-inbox icons font-2xl d-block mt-4"></i>
<div>inbox</div> <div>inbox</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-info icons font-2xl d-block mt-4"></i> <i class="cui-info icons font-2xl d-block mt-4"></i>
<div>info</div> <div>info</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-italic icons font-2xl d-block mt-4"></i> <i class="cui-italic icons font-2xl d-block mt-4"></i>
<div>italic</div> <div>italic</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-justify-center icons font-2xl d-block mt-4"></i> <i class="cui-justify-center icons font-2xl d-block mt-4"></i>
<div>justify-center</div> <div>justify-center</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-justify-left icons font-2xl d-block mt-4"></i> <i class="cui-justify-left icons font-2xl d-block mt-4"></i>
<div>justify-left</div> <div>justify-left</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-justify-right icons font-2xl d-block mt-4"></i> <i class="cui-justify-right icons font-2xl d-block mt-4"></i>
<div>justify-right</div> <div>justify-right</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-laptop icons font-2xl d-block mt-4"></i> <i class="cui-laptop icons font-2xl d-block mt-4"></i>
<div>laptop</div> <div>laptop</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-layers icons font-2xl d-block mt-4"></i> <i class="cui-layers icons font-2xl d-block mt-4"></i>
<div>layers</div> <div>layers</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-lightbulb icons font-2xl d-block mt-4"></i> <i class="cui-lightbulb icons font-2xl d-block mt-4"></i>
<div>lightbulb</div> <div>lightbulb</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-list icons font-2xl d-block mt-4"></i> <i class="cui-list icons font-2xl d-block mt-4"></i>
<div>list</div> <div>list</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-location-pin icons font-2xl d-block mt-4"></i> <i class="cui-location-pin icons font-2xl d-block mt-4"></i>
<div>location-pin</div> <div>location-pin</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-lock-locked icons font-2xl d-block mt-4"></i> <i class="cui-lock-locked icons font-2xl d-block mt-4"></i>
<div>lock-locked</div> <div>lock-locked</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-lock-unlocked icons font-2xl d-block mt-4"></i> <i class="cui-lock-unlocked icons font-2xl d-block mt-4"></i>
<div>lock-unlocked</div> <div>lock-unlocked</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-magnifying-glass icons font-2xl d-block mt-4"></i> <i class="cui-magnifying-glass icons font-2xl d-block mt-4"></i>
<div>magnifying-glass</div> <div>magnifying-glass</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-map icons font-2xl d-block mt-4"></i> <i class="cui-map icons font-2xl d-block mt-4"></i>
<div>map</div> <div>map</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-monitor icons font-2xl d-block mt-4"></i> <i class="cui-monitor icons font-2xl d-block mt-4"></i>
<div>monitor</div> <div>monitor</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-moon icons font-2xl d-block mt-4"></i> <i class="cui-moon icons font-2xl d-block mt-4"></i>
<div>moon</div> <div>moon</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-note icons font-2xl d-block mt-4"></i> <i class="cui-note icons font-2xl d-block mt-4"></i>
<div>note</div> <div>note</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-options icons font-2xl d-block mt-4"></i> <i class="cui-options icons font-2xl d-block mt-4"></i>
<div>options</div> <div>options</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-paperclip icons font-2xl d-block mt-4"></i> <i class="cui-paperclip icons font-2xl d-block mt-4"></i>
<div>paperclip</div> <div>paperclip</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-pencil icons font-2xl d-block mt-4"></i> <i class="cui-pencil icons font-2xl d-block mt-4"></i>
<div>pencil</div> <div>pencil</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-people icons font-2xl d-block mt-4"></i> <i class="cui-people icons font-2xl d-block mt-4"></i>
<div>people</div> <div>people</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-phone icons font-2xl d-block mt-4"></i> <i class="cui-phone icons font-2xl d-block mt-4"></i>
<div>phone</div> <div>phone</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-pie-chart icons font-2xl d-block mt-4"></i> <i class="cui-pie-chart icons font-2xl d-block mt-4"></i>
<div>pie-chart</div> <div>pie-chart</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-print icons font-2xl d-block mt-4"></i> <i class="cui-print icons font-2xl d-block mt-4"></i>
<div>print</div> <div>print</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-puzzle icons font-2xl d-block mt-4"></i> <i class="cui-puzzle icons font-2xl d-block mt-4"></i>
<div>puzzle</div> <div>puzzle</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-rss icons font-2xl d-block mt-4"></i> <i class="cui-rss icons font-2xl d-block mt-4"></i>
<div>rss</div> <div>rss</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-screen-desktop icons font-2xl d-block mt-4"></i> <i class="cui-screen-desktop icons font-2xl d-block mt-4"></i>
<div>screen-desktop</div> <div>screen-desktop</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-screen-smartphone icons font-2xl d-block mt-4"></i> <i class="cui-screen-smartphone icons font-2xl d-block mt-4"></i>
<div>screen-smartphone</div> <div>screen-smartphone</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-settings icons font-2xl d-block mt-4"></i> <i class="cui-settings icons font-2xl d-block mt-4"></i>
<div>settings</div> <div>settings</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-share icons font-2xl d-block mt-4"></i> <i class="cui-share icons font-2xl d-block mt-4"></i>
<div>share</div> <div>share</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-shield icons font-2xl d-block mt-4"></i> <i class="cui-shield icons font-2xl d-block mt-4"></i>
<div>shield</div> <div>shield</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-sort-ascending icons font-2xl d-block mt-4"></i> <i class="cui-sort-ascending icons font-2xl d-block mt-4"></i>
<div>sort-ascending</div> <div>sort-ascending</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-sort-descending icons font-2xl d-block mt-4"></i> <i class="cui-sort-descending icons font-2xl d-block mt-4"></i>
<div>sort-descending</div> <div>sort-descending</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-speech icons font-2xl d-block mt-4"></i> <i class="cui-speech icons font-2xl d-block mt-4"></i>
<div>speech</div> <div>speech</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-speedometer icons font-2xl d-block mt-4"></i> <i class="cui-speedometer icons font-2xl d-block mt-4"></i>
<div>speedometer</div> <div>speedometer</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-star icons font-2xl d-block mt-4"></i> <i class="cui-star icons font-2xl d-block mt-4"></i>
<div>star</div> <div>star</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-sun icons font-2xl d-block mt-4"></i> <i class="cui-sun icons font-2xl d-block mt-4"></i>
<div>sun</div> <div>sun</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-tablet icons font-2xl d-block mt-4"></i> <i class="cui-tablet icons font-2xl d-block mt-4"></i>
<div>tablet</div> <div>tablet</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-tags icons font-2xl d-block mt-4"></i> <i class="cui-tags icons font-2xl d-block mt-4"></i>
<div>tags</div> <div>tags</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-task icons font-2xl d-block mt-4"></i> <i class="cui-task icons font-2xl d-block mt-4"></i>
<div>task</div> <div>task</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-thumb-down icons font-2xl d-block mt-4"></i> <i class="cui-thumb-down icons font-2xl d-block mt-4"></i>
<div>thumb-down</div> <div>thumb-down</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-thumb-up icons font-2xl d-block mt-4"></i> <i class="cui-thumb-up icons font-2xl d-block mt-4"></i>
<div>thumb-up</div> <div>thumb-up</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-trash icons font-2xl d-block mt-4"></i> <i class="cui-trash icons font-2xl d-block mt-4"></i>
<div>trash</div> <div>trash</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-underline icons font-2xl d-block mt-4"></i> <i class="cui-underline icons font-2xl d-block mt-4"></i>
<div>underline</div> <div>underline</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-user icons font-2xl d-block mt-4"></i> <i class="cui-user icons font-2xl d-block mt-4"></i>
<div>user</div> <div>user</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-user-female icons font-2xl d-block mt-4"></i> <i class="cui-user-female icons font-2xl d-block mt-4"></i>
<div>user-female</div> <div>user-female</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-user-follow icons font-2xl d-block mt-4"></i> <i class="cui-user-follow icons font-2xl d-block mt-4"></i>
<div>user-follow</div> <div>user-follow</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-user-unfollow icons font-2xl d-block mt-4"></i> <i class="cui-user-unfollow icons font-2xl d-block mt-4"></i>
<div>user-unfollow</div> <div>user-unfollow</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-wrench icons font-2xl d-block mt-4"></i> <i class="cui-wrench icons font-2xl d-block mt-4"></i>
<div>wrench</div> <div>wrench</div>
</CCol> </CCol>
<CCol cols="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-yen icons font-2xl d-block mt-4"></i> <i class="cui-yen icons font-2xl d-block mt-4"></i>
<div>yen</div> <div>yen</div>
</CCol> </CCol>
src/views/icons/Flags.vue
+250 -250
View File
File diff suppressed because it is too large Load Diff
src/views/icons/FontAwesome.vue
+882 -882
View File
File diff suppressed because it is too large Load Diff
src/views/icons/SimpleLineIcons.vue
+184 -184
View File
@@ -7,738 +7,738 @@
<CCardBody> <CCardBody>
<CRow class="text-center"> <CRow class="text-center">
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-user icons font-2xl d-block mt-4"></i>icon-user <i class="icon-user icons font-2xl d-block mt-4"></i>icon-user
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-people icons font-2xl d-block mt-4"></i>icon-people <i class="icon-people icons font-2xl d-block mt-4"></i>icon-people
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-user-female icons font-2xl d-block mt-4"></i>icon-user-female <i class="icon-user-female icons font-2xl d-block mt-4"></i>icon-user-female
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-user-follow icons font-2xl d-block mt-4"></i>icon-user-follow <i class="icon-user-follow icons font-2xl d-block mt-4"></i>icon-user-follow
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-user-following icons font-2xl d-block mt-4"></i>icon-user-following <i class="icon-user-following icons font-2xl d-block mt-4"></i>icon-user-following
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-user-unfollow icons font-2xl d-block mt-4"></i>icon-user-unfollow <i class="icon-user-unfollow icons font-2xl d-block mt-4"></i>icon-user-unfollow
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-login icons font-2xl d-block mt-4"></i>icon-login <i class="icon-login icons font-2xl d-block mt-4"></i>icon-login
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-logout icons font-2xl d-block mt-4"></i>icon-logout <i class="icon-logout icons font-2xl d-block mt-4"></i>icon-logout
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-emotsmile icons font-2xl d-block mt-4"></i>icon-emotsmile <i class="icon-emotsmile icons font-2xl d-block mt-4"></i>icon-emotsmile
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-phone icons font-2xl d-block mt-4"></i>icon-phone <i class="icon-phone icons font-2xl d-block mt-4"></i>icon-phone
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-call-end icons font-2xl d-block mt-4"></i>icon-call-end <i class="icon-call-end icons font-2xl d-block mt-4"></i>icon-call-end
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-call-in icons font-2xl d-block mt-4"></i>icon-call-in <i class="icon-call-in icons font-2xl d-block mt-4"></i>icon-call-in
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-call-out icons font-2xl d-block mt-4"></i>icon-call-out <i class="icon-call-out icons font-2xl d-block mt-4"></i>icon-call-out
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-map icons font-2xl d-block mt-4"></i>icon-map <i class="icon-map icons font-2xl d-block mt-4"></i>icon-map
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-location-pin icons font-2xl d-block mt-4"></i>icon-location-pin <i class="icon-location-pin icons font-2xl d-block mt-4"></i>icon-location-pin
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-direction icons font-2xl d-block mt-4"></i>icon-direction <i class="icon-direction icons font-2xl d-block mt-4"></i>icon-direction
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-directions icons font-2xl d-block mt-4"></i>icon-directions <i class="icon-directions icons font-2xl d-block mt-4"></i>icon-directions
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-compass icons font-2xl d-block mt-4"></i>icon-compass <i class="icon-compass icons font-2xl d-block mt-4"></i>icon-compass
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-layers icons font-2xl d-block mt-4"></i>icon-layers <i class="icon-layers icons font-2xl d-block mt-4"></i>icon-layers
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-menu icons font-2xl d-block mt-4"></i>icon-menu <i class="icon-menu icons font-2xl d-block mt-4"></i>icon-menu
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-list icons font-2xl d-block mt-4"></i>icon-list <i class="icon-list icons font-2xl d-block mt-4"></i>icon-list
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-options-vertical icons font-2xl d-block mt-4"></i>icon-options-vertical <i class="icon-options-vertical icons font-2xl d-block mt-4"></i>icon-options-vertical
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-options icons font-2xl d-block mt-4"></i>icon-options <i class="icon-options icons font-2xl d-block mt-4"></i>icon-options
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-arrow-down icons font-2xl d-block mt-4"></i>icon-arrow-down <i class="icon-arrow-down icons font-2xl d-block mt-4"></i>icon-arrow-down
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-arrow-left icons font-2xl d-block mt-4"></i>icon-arrow-left <i class="icon-arrow-left icons font-2xl d-block mt-4"></i>icon-arrow-left
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-arrow-right icons font-2xl d-block mt-4"></i>icon-arrow-right <i class="icon-arrow-right icons font-2xl d-block mt-4"></i>icon-arrow-right
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-arrow-up icons font-2xl d-block mt-4"></i>icon-arrow-up <i class="icon-arrow-up icons font-2xl d-block mt-4"></i>icon-arrow-up
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-arrow-up-circle icons font-2xl d-block mt-4"></i>icon-arrow-up-circle <i class="icon-arrow-up-circle icons font-2xl d-block mt-4"></i>icon-arrow-up-circle
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-arrow-left-circle icons font-2xl d-block mt-4"></i>icon-arrow-left-circle <i class="icon-arrow-left-circle icons font-2xl d-block mt-4"></i>icon-arrow-left-circle
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-arrow-right-circle icons font-2xl d-block mt-4"></i>icon-arrow-right-circle <i class="icon-arrow-right-circle icons font-2xl d-block mt-4"></i>icon-arrow-right-circle
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-arrow-down-circle icons font-2xl d-block mt-4"></i>icon-arrow-down-circle <i class="icon-arrow-down-circle icons font-2xl d-block mt-4"></i>icon-arrow-down-circle
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-check icons font-2xl d-block mt-4"></i>icon-check <i class="icon-check icons font-2xl d-block mt-4"></i>icon-check
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-clock icons font-2xl d-block mt-4"></i>icon-clock <i class="icon-clock icons font-2xl d-block mt-4"></i>icon-clock
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-plus icons font-2xl d-block mt-4"></i>icon-plus <i class="icon-plus icons font-2xl d-block mt-4"></i>icon-plus
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-close icons font-2xl d-block mt-4"></i>icon-close <i class="icon-close icons font-2xl d-block mt-4"></i>icon-close
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-trophy icons font-2xl d-block mt-4"></i>icon-trophy <i class="icon-trophy icons font-2xl d-block mt-4"></i>icon-trophy
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-screen-smartphone icons font-2xl d-block mt-4"></i>icon-screen-smartphone <i class="icon-screen-smartphone icons font-2xl d-block mt-4"></i>icon-screen-smartphone
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-screen-desktop icons font-2xl d-block mt-4"></i>icon-screen-desktop <i class="icon-screen-desktop icons font-2xl d-block mt-4"></i>icon-screen-desktop
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-plane icons font-2xl d-block mt-4"></i>icon-plane <i class="icon-plane icons font-2xl d-block mt-4"></i>icon-plane
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-notebook icons font-2xl d-block mt-4"></i>icon-notebook <i class="icon-notebook icons font-2xl d-block mt-4"></i>icon-notebook
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-mustache icons font-2xl d-block mt-4"></i>icon-mustache <i class="icon-mustache icons font-2xl d-block mt-4"></i>icon-mustache
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-mouse icons font-2xl d-block mt-4"></i>icon-mouse <i class="icon-mouse icons font-2xl d-block mt-4"></i>icon-mouse
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-magnet icons font-2xl d-block mt-4"></i>icon-magnet <i class="icon-magnet icons font-2xl d-block mt-4"></i>icon-magnet
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-energy icons font-2xl d-block mt-4"></i>icon-energy <i class="icon-energy icons font-2xl d-block mt-4"></i>icon-energy
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-disc icons font-2xl d-block mt-4"></i>icon-disc <i class="icon-disc icons font-2xl d-block mt-4"></i>icon-disc
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-cursor icons font-2xl d-block mt-4"></i>icon-cursor <i class="icon-cursor icons font-2xl d-block mt-4"></i>icon-cursor
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-cursor-move icons font-2xl d-block mt-4"></i>icon-cursor-move <i class="icon-cursor-move icons font-2xl d-block mt-4"></i>icon-cursor-move
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-crop icons font-2xl d-block mt-4"></i>icon-crop <i class="icon-crop icons font-2xl d-block mt-4"></i>icon-crop
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-chemistry icons font-2xl d-block mt-4"></i>icon-chemistry <i class="icon-chemistry icons font-2xl d-block mt-4"></i>icon-chemistry
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-speedometer icons font-2xl d-block mt-4"></i>icon-speedometer <i class="icon-speedometer icons font-2xl d-block mt-4"></i>icon-speedometer
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-shield icons font-2xl d-block mt-4"></i>icon-shield <i class="icon-shield icons font-2xl d-block mt-4"></i>icon-shield
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-screen-tablet icons font-2xl d-block mt-4"></i>icon-screen-tablet <i class="icon-screen-tablet icons font-2xl d-block mt-4"></i>icon-screen-tablet
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-magic-wand icons font-2xl d-block mt-4"></i>icon-magic-wand <i class="icon-magic-wand icons font-2xl d-block mt-4"></i>icon-magic-wand
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-hourglass icons font-2xl d-block mt-4"></i>icon-hourglass <i class="icon-hourglass icons font-2xl d-block mt-4"></i>icon-hourglass
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-graduation icons font-2xl d-block mt-4"></i>icon-graduation <i class="icon-graduation icons font-2xl d-block mt-4"></i>icon-graduation
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-ghost icons font-2xl d-block mt-4"></i>icon-ghost <i class="icon-ghost icons font-2xl d-block mt-4"></i>icon-ghost
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-game-controller icons font-2xl d-block mt-4"></i>icon-game-controller <i class="icon-game-controller icons font-2xl d-block mt-4"></i>icon-game-controller
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-fire icons font-2xl d-block mt-4"></i>icon-fire <i class="icon-fire icons font-2xl d-block mt-4"></i>icon-fire
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-eyeglass icons font-2xl d-block mt-4"></i>icon-eyeglass <i class="icon-eyeglass icons font-2xl d-block mt-4"></i>icon-eyeglass
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-envelope-open icons font-2xl d-block mt-4"></i>icon-envelope-open <i class="icon-envelope-open icons font-2xl d-block mt-4"></i>icon-envelope-open
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-envelope-letter icons font-2xl d-block mt-4"></i>icon-envelope-letter <i class="icon-envelope-letter icons font-2xl d-block mt-4"></i>icon-envelope-letter
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-bell icons font-2xl d-block mt-4"></i>icon-bell <i class="icon-bell icons font-2xl d-block mt-4"></i>icon-bell
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-badge icons font-2xl d-block mt-4"></i>icon-badge <i class="icon-badge icons font-2xl d-block mt-4"></i>icon-badge
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-anchor icons font-2xl d-block mt-4"></i>icon-anchor <i class="icon-anchor icons font-2xl d-block mt-4"></i>icon-anchor
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-wallet icons font-2xl d-block mt-4"></i>icon-wallet <i class="icon-wallet icons font-2xl d-block mt-4"></i>icon-wallet
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-vector icons font-2xl d-block mt-4"></i>icon-vector <i class="icon-vector icons font-2xl d-block mt-4"></i>icon-vector
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-speech icons font-2xl d-block mt-4"></i>icon-speech <i class="icon-speech icons font-2xl d-block mt-4"></i>icon-speech
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-puzzle icons font-2xl d-block mt-4"></i>icon-puzzle <i class="icon-puzzle icons font-2xl d-block mt-4"></i>icon-puzzle
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-printer icons font-2xl d-block mt-4"></i>icon-printer <i class="icon-printer icons font-2xl d-block mt-4"></i>icon-printer
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-present icons font-2xl d-block mt-4"></i>icon-present <i class="icon-present icons font-2xl d-block mt-4"></i>icon-present
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-playlist icons font-2xl d-block mt-4"></i>icon-playlist <i class="icon-playlist icons font-2xl d-block mt-4"></i>icon-playlist
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-pin icons font-2xl d-block mt-4"></i>icon-pin <i class="icon-pin icons font-2xl d-block mt-4"></i>icon-pin
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-picture icons font-2xl d-block mt-4"></i>icon-picture <i class="icon-picture icons font-2xl d-block mt-4"></i>icon-picture
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-handbag icons font-2xl d-block mt-4"></i>icon-handbag <i class="icon-handbag icons font-2xl d-block mt-4"></i>icon-handbag
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-globe-alt icons font-2xl d-block mt-4"></i>icon-globe-alt <i class="icon-globe-alt icons font-2xl d-block mt-4"></i>icon-globe-alt
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-globe icons font-2xl d-block mt-4"></i>icon-globe <i class="icon-globe icons font-2xl d-block mt-4"></i>icon-globe
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-folder-alt icons font-2xl d-block mt-4"></i>icon-folder-alt <i class="icon-folder-alt icons font-2xl d-block mt-4"></i>icon-folder-alt
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-folder icons font-2xl d-block mt-4"></i>icon-folder <i class="icon-folder icons font-2xl d-block mt-4"></i>icon-folder
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-film icons font-2xl d-block mt-4"></i>icon-film <i class="icon-film icons font-2xl d-block mt-4"></i>icon-film
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-feed icons font-2xl d-block mt-4"></i>icon-feed <i class="icon-feed icons font-2xl d-block mt-4"></i>icon-feed
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-drop icons font-2xl d-block mt-4"></i>icon-drop <i class="icon-drop icons font-2xl d-block mt-4"></i>icon-drop
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-drawer icons font-2xl d-block mt-4"></i>icon-drawer <i class="icon-drawer icons font-2xl d-block mt-4"></i>icon-drawer
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-docs icons font-2xl d-block mt-4"></i>icon-docs <i class="icon-docs icons font-2xl d-block mt-4"></i>icon-docs
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-doc icons font-2xl d-block mt-4"></i>icon-doc <i class="icon-doc icons font-2xl d-block mt-4"></i>icon-doc
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-diamond icons font-2xl d-block mt-4"></i>icon-diamond <i class="icon-diamond icons font-2xl d-block mt-4"></i>icon-diamond
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-cup icons font-2xl d-block mt-4"></i>icon-cup <i class="icon-cup icons font-2xl d-block mt-4"></i>icon-cup
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-calculator icons font-2xl d-block mt-4"></i>icon-calculator <i class="icon-calculator icons font-2xl d-block mt-4"></i>icon-calculator
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-bubbles icons font-2xl d-block mt-4"></i>icon-bubbles <i class="icon-bubbles icons font-2xl d-block mt-4"></i>icon-bubbles
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-briefcase icons font-2xl d-block mt-4"></i>icon-briefcase <i class="icon-briefcase icons font-2xl d-block mt-4"></i>icon-briefcase
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-book-open icons font-2xl d-block mt-4"></i>icon-book-open <i class="icon-book-open icons font-2xl d-block mt-4"></i>icon-book-open
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-basket-loaded icons font-2xl d-block mt-4"></i>icon-basket-loaded <i class="icon-basket-loaded icons font-2xl d-block mt-4"></i>icon-basket-loaded
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-basket icons font-2xl d-block mt-4"></i>icon-basket <i class="icon-basket icons font-2xl d-block mt-4"></i>icon-basket
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-bag icons font-2xl d-block mt-4"></i>icon-bag <i class="icon-bag icons font-2xl d-block mt-4"></i>icon-bag
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-action-undo icons font-2xl d-block mt-4"></i>icon-action-undo <i class="icon-action-undo icons font-2xl d-block mt-4"></i>icon-action-undo
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-action-redo icons font-2xl d-block mt-4"></i>icon-action-redo <i class="icon-action-redo icons font-2xl d-block mt-4"></i>icon-action-redo
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-wrench icons font-2xl d-block mt-4"></i>icon-wrench <i class="icon-wrench icons font-2xl d-block mt-4"></i>icon-wrench
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-umbrella icons font-2xl d-block mt-4"></i>icon-umbrella <i class="icon-umbrella icons font-2xl d-block mt-4"></i>icon-umbrella
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-trash icons font-2xl d-block mt-4"></i>icon-trash <i class="icon-trash icons font-2xl d-block mt-4"></i>icon-trash
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-tag icons font-2xl d-block mt-4"></i>icon-tag <i class="icon-tag icons font-2xl d-block mt-4"></i>icon-tag
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-support icons font-2xl d-block mt-4"></i>icon-support <i class="icon-support icons font-2xl d-block mt-4"></i>icon-support
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-frame icons font-2xl d-block mt-4"></i>icon-frame <i class="icon-frame icons font-2xl d-block mt-4"></i>icon-frame
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-size-fullscreen icons font-2xl d-block mt-4"></i>icon-size-fullscreen <i class="icon-size-fullscreen icons font-2xl d-block mt-4"></i>icon-size-fullscreen
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-size-actual icons font-2xl d-block mt-4"></i>icon-size-actual <i class="icon-size-actual icons font-2xl d-block mt-4"></i>icon-size-actual
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-shuffle icons font-2xl d-block mt-4"></i>icon-shuffle <i class="icon-shuffle icons font-2xl d-block mt-4"></i>icon-shuffle
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-share-alt icons font-2xl d-block mt-4"></i>icon-share-alt <i class="icon-share-alt icons font-2xl d-block mt-4"></i>icon-share-alt
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-share icons font-2xl d-block mt-4"></i>icon-share <i class="icon-share icons font-2xl d-block mt-4"></i>icon-share
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-rocket icons font-2xl d-block mt-4"></i>icon-rocket <i class="icon-rocket icons font-2xl d-block mt-4"></i>icon-rocket
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-question icons font-2xl d-block mt-4"></i>icon-question <i class="icon-question icons font-2xl d-block mt-4"></i>icon-question
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-pie-chart icons font-2xl d-block mt-4"></i>icon-pie-chart <i class="icon-pie-chart icons font-2xl d-block mt-4"></i>icon-pie-chart
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-pencil icons font-2xl d-block mt-4"></i>icon-pencil <i class="icon-pencil icons font-2xl d-block mt-4"></i>icon-pencil
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-note icons font-2xl d-block mt-4"></i>icon-note <i class="icon-note icons font-2xl d-block mt-4"></i>icon-note
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-loop icons font-2xl d-block mt-4"></i>icon-loop <i class="icon-loop icons font-2xl d-block mt-4"></i>icon-loop
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-home icons font-2xl d-block mt-4"></i>icon-home <i class="icon-home icons font-2xl d-block mt-4"></i>icon-home
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-grid icons font-2xl d-block mt-4"></i>icon-grid <i class="icon-grid icons font-2xl d-block mt-4"></i>icon-grid
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-graph icons font-2xl d-block mt-4"></i>icon-graph <i class="icon-graph icons font-2xl d-block mt-4"></i>icon-graph
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-microphone icons font-2xl d-block mt-4"></i>icon-microphone <i class="icon-microphone icons font-2xl d-block mt-4"></i>icon-microphone
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-music-tone-alt icons font-2xl d-block mt-4"></i>icon-music-tone-alt <i class="icon-music-tone-alt icons font-2xl d-block mt-4"></i>icon-music-tone-alt
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-music-tone icons font-2xl d-block mt-4"></i>icon-music-tone <i class="icon-music-tone icons font-2xl d-block mt-4"></i>icon-music-tone
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-earphones-alt icons font-2xl d-block mt-4"></i>icon-earphones-alt <i class="icon-earphones-alt icons font-2xl d-block mt-4"></i>icon-earphones-alt
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-earphones icons font-2xl d-block mt-4"></i>icon-earphones <i class="icon-earphones icons font-2xl d-block mt-4"></i>icon-earphones
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-equalizer icons font-2xl d-block mt-4"></i>icon-equalizer <i class="icon-equalizer icons font-2xl d-block mt-4"></i>icon-equalizer
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-like icons font-2xl d-block mt-4"></i>icon-like <i class="icon-like icons font-2xl d-block mt-4"></i>icon-like
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-dislike icons font-2xl d-block mt-4"></i>icon-dislike <i class="icon-dislike icons font-2xl d-block mt-4"></i>icon-dislike
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-control-start icons font-2xl d-block mt-4"></i>icon-control-start <i class="icon-control-start icons font-2xl d-block mt-4"></i>icon-control-start
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-control-rewind icons font-2xl d-block mt-4"></i>icon-control-rewind <i class="icon-control-rewind icons font-2xl d-block mt-4"></i>icon-control-rewind
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-control-play icons font-2xl d-block mt-4"></i>icon-control-play <i class="icon-control-play icons font-2xl d-block mt-4"></i>icon-control-play
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-control-pause icons font-2xl d-block mt-4"></i>icon-control-pause <i class="icon-control-pause icons font-2xl d-block mt-4"></i>icon-control-pause
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-control-forward icons font-2xl d-block mt-4"></i>icon-control-forward <i class="icon-control-forward icons font-2xl d-block mt-4"></i>icon-control-forward
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-control-end icons font-2xl d-block mt-4"></i>icon-control-end <i class="icon-control-end icons font-2xl d-block mt-4"></i>icon-control-end
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-volume-1 icons font-2xl d-block mt-4"></i>icon-volume-1 <i class="icon-volume-1 icons font-2xl d-block mt-4"></i>icon-volume-1
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-volume-2 icons font-2xl d-block mt-4"></i>icon-volume-2 <i class="icon-volume-2 icons font-2xl d-block mt-4"></i>icon-volume-2
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-volume-off icons font-2xl d-block mt-4"></i>icon-volume-off <i class="icon-volume-off icons font-2xl d-block mt-4"></i>icon-volume-off
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-calendar icons font-2xl d-block mt-4"></i>icon-calendar <i class="icon-calendar icons font-2xl d-block mt-4"></i>icon-calendar
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-bulb icons font-2xl d-block mt-4"></i>icon-bulb <i class="icon-bulb icons font-2xl d-block mt-4"></i>icon-bulb
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-chart icons font-2xl d-block mt-4"></i>icon-chart <i class="icon-chart icons font-2xl d-block mt-4"></i>icon-chart
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-ban icons font-2xl d-block mt-4"></i>icon-ban <i class="icon-ban icons font-2xl d-block mt-4"></i>icon-ban
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-bubble icons font-2xl d-block mt-4"></i>icon-bubble <i class="icon-bubble icons font-2xl d-block mt-4"></i>icon-bubble
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-camrecorder icons font-2xl d-block mt-4"></i>icon-camrecorder <i class="icon-camrecorder icons font-2xl d-block mt-4"></i>icon-camrecorder
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-camera icons font-2xl d-block mt-4"></i>icon-camera <i class="icon-camera icons font-2xl d-block mt-4"></i>icon-camera
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-cloud-download icons font-2xl d-block mt-4"></i>icon-cloud-download <i class="icon-cloud-download icons font-2xl d-block mt-4"></i>icon-cloud-download
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-cloud-upload icons font-2xl d-block mt-4"></i>icon-cloud-upload <i class="icon-cloud-upload icons font-2xl d-block mt-4"></i>icon-cloud-upload
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-envelope icons font-2xl d-block mt-4"></i>icon-envelope <i class="icon-envelope icons font-2xl d-block mt-4"></i>icon-envelope
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-eye icons font-2xl d-block mt-4"></i>icon-eye <i class="icon-eye icons font-2xl d-block mt-4"></i>icon-eye
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-flag icons font-2xl d-block mt-4"></i>icon-flag <i class="icon-flag icons font-2xl d-block mt-4"></i>icon-flag
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-heart icons font-2xl d-block mt-4"></i>icon-heart <i class="icon-heart icons font-2xl d-block mt-4"></i>icon-heart
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-info icons font-2xl d-block mt-4"></i>icon-info <i class="icon-info icons font-2xl d-block mt-4"></i>icon-info
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-key icons font-2xl d-block mt-4"></i>icon-key <i class="icon-key icons font-2xl d-block mt-4"></i>icon-key
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-link icons font-2xl d-block mt-4"></i>icon-link <i class="icon-link icons font-2xl d-block mt-4"></i>icon-link
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-lock icons font-2xl d-block mt-4"></i>icon-lock <i class="icon-lock icons font-2xl d-block mt-4"></i>icon-lock
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-lock-open icons font-2xl d-block mt-4"></i>icon-lock-open <i class="icon-lock-open icons font-2xl d-block mt-4"></i>icon-lock-open
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-magnifier icons font-2xl d-block mt-4"></i>icon-magnifier <i class="icon-magnifier icons font-2xl d-block mt-4"></i>icon-magnifier
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-magnifier-add icons font-2xl d-block mt-4"></i>icon-magnifier-add <i class="icon-magnifier-add icons font-2xl d-block mt-4"></i>icon-magnifier-add
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-magnifier-remove icons font-2xl d-block mt-4"></i>icon-magnifier-remove <i class="icon-magnifier-remove icons font-2xl d-block mt-4"></i>icon-magnifier-remove
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-paper-clip icons font-2xl d-block mt-4"></i>icon-paper-clip <i class="icon-paper-clip icons font-2xl d-block mt-4"></i>icon-paper-clip
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-paper-plane icons font-2xl d-block mt-4"></i>icon-paper-plane <i class="icon-paper-plane icons font-2xl d-block mt-4"></i>icon-paper-plane
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-power icons font-2xl d-block mt-4"></i>icon-power <i class="icon-power icons font-2xl d-block mt-4"></i>icon-power
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-refresh icons font-2xl d-block mt-4"></i>icon-refresh <i class="icon-refresh icons font-2xl d-block mt-4"></i>icon-refresh
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-reload icons font-2xl d-block mt-4"></i>icon-reload <i class="icon-reload icons font-2xl d-block mt-4"></i>icon-reload
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-settings icons font-2xl d-block mt-4"></i>icon-settings <i class="icon-settings icons font-2xl d-block mt-4"></i>icon-settings
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-star icons font-2xl d-block mt-4"></i>icon-star <i class="icon-star icons font-2xl d-block mt-4"></i>icon-star
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-symbol-female icons font-2xl d-block mt-4"></i>icon-symbol-female <i class="icon-symbol-female icons font-2xl d-block mt-4"></i>icon-symbol-female
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-symbol-male icons font-2xl d-block mt-4"></i>icon-symbol-male <i class="icon-symbol-male icons font-2xl d-block mt-4"></i>icon-symbol-male
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-target icons font-2xl d-block mt-4"></i>icon-target <i class="icon-target icons font-2xl d-block mt-4"></i>icon-target
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-credit-card icons font-2xl d-block mt-4"></i>icon-credit-card <i class="icon-credit-card icons font-2xl d-block mt-4"></i>icon-credit-card
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-paypal icons font-2xl d-block mt-4"></i>icon-paypal <i class="icon-paypal icons font-2xl d-block mt-4"></i>icon-paypal
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-social-tumblr icons font-2xl d-block mt-4"></i>icon-social-tumblr <i class="icon-social-tumblr icons font-2xl d-block mt-4"></i>icon-social-tumblr
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-social-twitter icons font-2xl d-block mt-4"></i>icon-social-twitter <i class="icon-social-twitter icons font-2xl d-block mt-4"></i>icon-social-twitter
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-social-facebook icons font-2xl d-block mt-4"></i>icon-social-facebook <i class="icon-social-facebook icons font-2xl d-block mt-4"></i>icon-social-facebook
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-social-instagram icons font-2xl d-block mt-4"></i>icon-social-instagram <i class="icon-social-instagram icons font-2xl d-block mt-4"></i>icon-social-instagram
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-social-linkedin icons font-2xl d-block mt-4"></i>icon-social-linkedin <i class="icon-social-linkedin icons font-2xl d-block mt-4"></i>icon-social-linkedin
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-social-pinterest icons font-2xl d-block mt-4"></i>icon-social-pinterest <i class="icon-social-pinterest icons font-2xl d-block mt-4"></i>icon-social-pinterest
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-social-github icons font-2xl d-block mt-4"></i>icon-social-github <i class="icon-social-github icons font-2xl d-block mt-4"></i>icon-social-github
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-social-gplus icons font-2xl d-block mt-4"></i>icon-social-gplus <i class="icon-social-gplus icons font-2xl d-block mt-4"></i>icon-social-gplus
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-social-reddit icons font-2xl d-block mt-4"></i>icon-social-reddit <i class="icon-social-reddit icons font-2xl d-block mt-4"></i>icon-social-reddit
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-social-skype icons font-2xl d-block mt-4"></i>icon-social-skype <i class="icon-social-skype icons font-2xl d-block mt-4"></i>icon-social-skype
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-social-dribbble icons font-2xl d-block mt-4"></i>icon-social-dribbble <i class="icon-social-dribbble icons font-2xl d-block mt-4"></i>icon-social-dribbble
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-social-behance icons font-2xl d-block mt-4"></i>icon-social-behance <i class="icon-social-behance icons font-2xl d-block mt-4"></i>icon-social-behance
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-social-foursqare icons font-2xl d-block mt-4"></i>icon-social-foursqare <i class="icon-social-foursqare icons font-2xl d-block mt-4"></i>icon-social-foursqare
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-social-soundcloud icons font-2xl d-block mt-4"></i>icon-social-soundcloud <i class="icon-social-soundcloud icons font-2xl d-block mt-4"></i>icon-social-soundcloud
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-social-spotify icons font-2xl d-block mt-4"></i>icon-social-spotify <i class="icon-social-spotify icons font-2xl d-block mt-4"></i>icon-social-spotify
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-social-stumbleupon icons font-2xl d-block mt-4"></i>icon-social-stumbleupon <i class="icon-social-stumbleupon icons font-2xl d-block mt-4"></i>icon-social-stumbleupon
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-social-youtube icons font-2xl d-block mt-4"></i>icon-social-youtube <i class="icon-social-youtube icons font-2xl d-block mt-4"></i>icon-social-youtube
</CCol> </CCol>
<CCol cols="6" sm="4" md="3"> <CCol col="6" sm="4" md="3">
<i class="icon-social-dropbox icons font-2xl d-block mt-4"></i>icon-social-dropbox <i class="icon-social-dropbox icons font-2xl d-block mt-4"></i>icon-social-dropbox
</CCol> </CCol>
</CRow><!--/.row--> </CRow>
</CCardBody> </CCardBody>
</CCard> </CCard>
</div> </div>
src/views/notifications/Alerts.vue
+4 -4
View File
@@ -2,7 +2,7 @@
<div class="wrapper"> <div class="wrapper">
<div class="animated fadeIn"> <div class="animated fadeIn">
<CRow> <CRow>
<CCol cols="12" md="6"> <CCol col="12" md="6">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <i class="fa fa-align-justify"></i>
@@ -28,7 +28,7 @@
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol cols="12" md="6"> <CCol col="12" md="6">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> Alert <i class="fa fa-align-justify"></i> Alert
@@ -66,7 +66,7 @@
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol cols="12" md="6"> <CCol col="12" md="6">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> Alerts <small>with additional content</small> <i class="fa fa-align-justify"></i> Alerts <small>with additional content</small>
@@ -87,7 +87,7 @@
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol cols="12" md="6"> <CCol col="12" md="6">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> Alerts <i class="fa fa-align-justify"></i> Alerts
src/views/notifications/Badges.vue
+2 -2
View File
@@ -2,7 +2,7 @@
<div class="wrapper"> <div class="wrapper">
<div class="animated fadeIn"> <div class="animated fadeIn">
<CRow> <CRow>
<CCol cols="12" md="6"> <CCol col="12" md="6">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> <i class="fa fa-align-justify"></i>
@@ -27,7 +27,7 @@
</CCardFooter> </CCardFooter>
</CCard> </CCard>
</CCol> </CCol>
<CCol cols="12" md="6"> <CCol col="12" md="6">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> Badge <i class="fa fa-align-justify"></i> Badge
src/views/notifications/Modals.vue
+2 -2
View File
@@ -2,7 +2,7 @@
<div class="wrapper"> <div class="wrapper">
<div class="animated fadeIn"> <div class="animated fadeIn">
<CRow> <CRow>
<CCol cols="12"> <CCol col="12">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-align-justify"></i> Bootstrap Modals <i class="fa fa-align-justify"></i> Bootstrap Modals
@@ -39,7 +39,7 @@
</CCardBody> </CCardBody>
</CCard> </CCard>
</CCol><!--/.col--> </CCol><!--/.col-->
</CRow><!--/.row--> </CRow>
</div> </div>
<!-- Modal Component --> <!-- Modal Component -->
<CModal title="Modal title" <CModal title="Modal title"
src/views/pages/Login.vue
+2 -2
View File
@@ -21,10 +21,10 @@
autocomplete="curent-password" autocomplete="curent-password"
/> />
<CRow> <CRow>
<CCol cols="6"> <CCol col="6">
<CButton variant="primary" class="px-4">Login</CButton> <CButton variant="primary" class="px-4">Login</CButton>
</CCol> </CCol>
<CCol cols="6" class="text-right"> <CCol col="6" class="text-right">
<CButton variant="link" class="px-0">Forgot password?</CButton> <CButton variant="link" class="px-0">Forgot password?</CButton>
</CCol> </CCol>
</CRow> </CRow>
src/views/pages/Register.vue
+2 -2
View File
@@ -36,10 +36,10 @@
</CCardBody> </CCardBody>
<CCardFooter class="p-4"> <CCardFooter class="p-4">
<CRow> <CRow>
<CCol cols="6"> <CCol col="6">
<CButton block class="btn btn-facebook"><span>facebook</span></CButton> <CButton block class="btn btn-facebook"><span>facebook</span></CButton>
</CCol> </CCol>
<CCol cols="6"> <CCol col="6">
<CButton block class="btn btn-twitter" type="button"><span>twitter</span></CButton> <CButton block class="btn btn-twitter" type="button"><span>twitter</span></CButton>
</CCol> </CCol>
</CRow> </CRow>
src/views/users/User.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<template> <template>
<CRow> <CRow>
<CCol cols="12" lg="6"> <CCol col="12" lg="6">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
User id: {{ $route.params.id }} User id: {{ $route.params.id }}
src/views/users/Users.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<template> <template>
<CRow> <CRow>
<CCol cols="12" xl="8"> <CCol col="12" xl="8">
<transition name="slide"> <transition name="slide">
<CCard headerHtml="users" bodyWrapper> <CCard headerHtml="users" bodyWrapper>
<CTable hover <CTable hover
src/views/widgets/Widgets.vue
+25 -25
View File
@@ -31,7 +31,7 @@
<CWidgetProgress header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim." <CWidgetProgress header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
variant="danger" :value="25"/> variant="danger" :value="25"/>
</CCol> </CCol>
</CRow><!--/.row--> </CRow>
<CRow> <CRow>
<CCol sm="6" lg="3"> <CCol sm="6" lg="3">
<CWidgetProgress header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim." <CWidgetProgress header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
@@ -49,39 +49,39 @@
<CWidgetProgress header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim." <CWidgetProgress header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
variant="danger" inverse :value="25"/> variant="danger" inverse :value="25"/>
</CCol> </CCol>
</CRow><!--/.row--> </CRow>
<CRow> <CRow>
<CCol cols="12" sm="6" lg="3"> <CCol col="12" sm="6" lg="3">
<CWidgetIcon <CWidgetIcon
header="$1.999,50" header="$1.999,50"
text="Income" text="Income"
addIconClasses="fa fa-cogs bg-primary" addIconClasses="fa fa-cogs bg-primary"
/> />
</CCol> </CCol>
<CCol cols="12" sm="6" lg="3"> <CCol col="12" sm="6" lg="3">
<CWidgetIcon <CWidgetIcon
header="$1.999,50" header="$1.999,50"
addIconClasses="fa fa-laptop bg-info" addIconClasses="fa fa-laptop bg-info"
text="Income" text="Income"
/> />
</CCol> </CCol>
<CCol cols="12" sm="6" lg="3"> <CCol col="12" sm="6" lg="3">
<CWidgetIcon <CWidgetIcon
header="$1.999,50" header="$1.999,50"
addIconClasses="fa fa-moon-o bg-warning" addIconClasses="fa fa-moon-o bg-warning"
text="Income" text="Income"
/> />
</CCol> </CCol>
<CCol cols="12" sm="6" lg="3"> <CCol col="12" sm="6" lg="3">
<CWidgetIcon <CWidgetIcon
header="$1.999,50" header="$1.999,50"
addIconClasses="fa fa-bell bg-danger" addIconClasses="fa fa-bell bg-danger"
text="Income" text="Income"
/> />
</CCol> </CCol>
</CRow><!--/.row--> </CRow>
<CRow> <CRow>
<CCol cols="12" sm="6" lg="3"> <CCol col="12" sm="6" lg="3">
<CWidgetIcon <CWidgetIcon
header="$1.999,50" header="$1.999,50"
addIconClasses="fa fa-cogs bg-primary" addIconClasses="fa fa-cogs bg-primary"
@@ -89,7 +89,7 @@
link="#" link="#"
/> />
</CCol> </CCol>
<CCol cols="12" sm="6" lg="3"> <CCol col="12" sm="6" lg="3">
<CWidgetIcon <CWidgetIcon
header="$1.999,50" header="$1.999,50"
addIconClasses="fa fa-laptop bg-info" addIconClasses="fa fa-laptop bg-info"
@@ -97,14 +97,14 @@
link="#" link="#"
/> />
</CCol> </CCol>
<CCol cols="12" sm="6" lg="3"> <CCol col="12" sm="6" lg="3">
<CWidgetIcon <CWidgetIcon
header="$1.999,50" header="$1.999,50"
addIconClasses="fa fa-moon-o bg-warning bg-primary" addIconClasses="fa fa-moon-o bg-warning bg-primary"
text="Income" link="#" text="Income" link="#"
/> />
</CCol> </CCol>
<CCol cols="12" sm="6" lg="3"> <CCol col="12" sm="6" lg="3">
<CWidgetIcon <CWidgetIcon
header="$1.999,50" header="$1.999,50"
addIconClasses="fa fa-bell bg-danger" addIconClasses="fa fa-bell bg-danger"
@@ -112,9 +112,9 @@
link="#" link="#"
/> />
</CCol> </CCol>
</CRow><!--/.row--> </CRow>
<CRow> <CRow>
<CCol cols="12" sm="6" lg="3"> <CCol col="12" sm="6" lg="3">
<CWidgetIcon <CWidgetIcon
header="$1.999,50" header="$1.999,50"
text="Income" text="Income"
@@ -122,7 +122,7 @@
noPadding noPadding
/> />
</CCol> </CCol>
<CCol cols="12" sm="6" lg="3"> <CCol col="12" sm="6" lg="3">
<CWidgetIcon <CWidgetIcon
header="$1.999,50" header="$1.999,50"
text="Income" text="Income"
@@ -130,7 +130,7 @@
noPadding noPadding
/> />
</CCol> </CCol>
<CCol cols="12" sm="6" lg="3"> <CCol col="12" sm="6" lg="3">
<CWidgetIcon <CWidgetIcon
header="$1.999,50" header="$1.999,50"
text="Income" text="Income"
@@ -138,7 +138,7 @@
noPadding noPadding
/> />
</CCol> </CCol>
<CCol cols="12" sm="6" lg="3"> <CCol col="12" sm="6" lg="3">
<CWidgetIcon <CWidgetIcon
header="$1.999,50" header="$1.999,50"
text="Income" text="Income"
@@ -146,9 +146,9 @@
noPadding noPadding
/> />
</CCol> </CCol>
</CRow><!--/.row--> </CRow>
<CRow> <CRow>
<CCol cols="12" sm="6" lg="4"> <CCol col="12" sm="6" lg="4">
<CWidgetIcon <CWidgetIcon
header="$1.999,50" header="$1.999,50"
text="Income" text="Income"
@@ -156,7 +156,7 @@
noPadding noPadding
/> />
</CCol> </CCol>
<CCol cols="12" sm="6" lg="4"> <CCol col="12" sm="6" lg="4">
<CWidgetIcon <CWidgetIcon
header="$1.999,50" header="$1.999,50"
text="Income" text="Income"
@@ -164,7 +164,7 @@
noPadding noPadding
/> />
</CCol> </CCol>
<CCol cols="12" sm="6" lg="4"> <CCol col="12" sm="6" lg="4">
<CWidgetIcon <CWidgetIcon
header="$1.999,50" header="$1.999,50"
text="Income" text="Income"
@@ -172,9 +172,9 @@
noPadding noPadding
/> />
</CCol> </CCol>
</CRow><!--/.row--> </CRow>
<CRow> <CRow>
<CCol cols="12" sm="6" lg="4"> <CCol col="12" sm="6" lg="4">
<CWidgetIcon <CWidgetIcon
header="$1.999,50" header="$1.999,50"
text="Income" text="Income"
@@ -183,7 +183,7 @@
link="#" link="#"
/> />
</CCol> </CCol>
<CCol cols="12" sm="6" lg="4"> <CCol col="12" sm="6" lg="4">
<CWidgetIcon <CWidgetIcon
header="$1.999,50" header="$1.999,50"
text="Income" text="Income"
@@ -192,7 +192,7 @@
link="#" link="#"
/> />
</CCol> </CCol>
<CCol cols="12" sm="6" lg="4"> <CCol col="12" sm="6" lg="4">
<CWidgetIcon <CWidgetIcon
header="$1.999,50" header="$1.999,50"
text="Income" text="Income"
@@ -201,7 +201,7 @@
link="#" link="#"
/> />
</CCol> </CCol>
</CRow><!--/.row--> </CRow>
<WidgetsSocial noCharts/> <WidgetsSocial noCharts/>
<WidgetsSocial/> <WidgetsSocial/>
<CCardGroup class="mb-4"> <CCardGroup class="mb-4">