feat: change styles of users, themes and icons sections to version 3
This commit is contained in:
woothu
+112
-106
@@ -1,414 +1,420 @@
|
||||
<template>
|
||||
<div class="animated fadeIn">
|
||||
<div class="c-animated c-fadeIn">
|
||||
<CCard >
|
||||
<CCardHeader>
|
||||
<i class="fa fa-picture-o"></i>CoreUI Icons <CBadge variant="info">New</CBadge>
|
||||
<div class="card-header-actions">
|
||||
<a href="https://github.com/coreui/coreui-icons" rel="noreferrer noopener" target="_blank" class="card-header-action">
|
||||
<small class="text-muted">Github</small>
|
||||
<i class="fa fa-picture-o"></i>CoreUI Icons
|
||||
<CBadge variant="info">New</CBadge>
|
||||
<div class="c-card-header-actions">
|
||||
<a
|
||||
href="https://github.com/coreui/coreui-icons"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
class="c-card-header-action"
|
||||
>
|
||||
<small class="c-text-muted">Github</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow class="text-center">
|
||||
<CRow class="c-text-center">
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>account-logout</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>action-redo</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>action-undo</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>align-center</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>align-left</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>align-right</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>arrow-bottom</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>arrow-left</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>arrow-right</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>arrow-top</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>ban</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>basket-loaded</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>bell</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>bold</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>bookmark</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>briefcase</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>british-pound</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>brush</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>calculator</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>calendar</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>cart</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>chart</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>check</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>chevron-bottom</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>chevron-left</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>chevron-right</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>chevron-top</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>circle-check</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>circle-x</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>cloud</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>cloud-download</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>cloud-upload</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>code</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>cog</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>comment-square</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>credit-card</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>cursor</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>dashboard</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>delete</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>dollar</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>drop</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>envelope-closed</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>envelope-letter</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>envelope-open</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>euro</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>file</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>globe</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>graph</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>home</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>inbox</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>info</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>italic</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>justify-center</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>justify-left</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>justify-right</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>laptop</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>layers</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>lightbulb</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>list</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>location-pin</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>lock-locked</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>lock-unlocked</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>magnifying-glass</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>map</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>monitor</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>moon</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>note</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>options</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>paperclip</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>pencil</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>people</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>phone</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>pie-chart</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>print</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>puzzle</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>rss</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>screen-desktop</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>screen-smartphone</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>settings</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>share</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>shield</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>sort-ascending</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>sort-descending</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>speech</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>speedometer</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>star</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>sun</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>tablet</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>tags</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>task</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>thumb-down</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>thumb-up</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>trash</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>underline</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>user</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>user-female</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>user-follow</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>user-unfollow</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>wrench</div>
|
||||
</CCol>
|
||||
<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 c-icons c-font-2xl c-d-block c-mt-4"></i>
|
||||
<div>yen</div>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
+507
-503
File diff suppressed because it is too large
Load Diff
+886
-886
File diff suppressed because it is too large
Load Diff
+186
-186
@@ -1,742 +1,742 @@
|
||||
<template>
|
||||
<div class="animated fadeIn">
|
||||
<CCard class="card-default">
|
||||
<div class="c-animated c-fadeIn">
|
||||
<CCard class="c-card-default">
|
||||
<CCardHeader>
|
||||
<i class="fa fa-picture-o"></i> Simple Line Icons
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow class="text-center">
|
||||
<CRow class="c-text-center">
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-user
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-people
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-user-female
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-user-follow
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-user-following
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-user-unfollow
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-login
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-logout
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-emotsmile
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-phone
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-call-end
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-call-in
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-call-out
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-map
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-location-pin
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-direction
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-directions
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-compass
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-layers
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-menu
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-list
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-options-vertical
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-options
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-arrow-down
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-arrow-left
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-arrow-right
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-arrow-up
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-arrow-up-circle
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-arrow-left-circle
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-arrow-right-circle
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-arrow-down-circle
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-check
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-clock
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-plus
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-close
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-trophy
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-screen-smartphone
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-screen-desktop
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-plane
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-notebook
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-mustache
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-mouse
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-magnet
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-energy
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-disc
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-cursor
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-cursor-move
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-crop
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-chemistry
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-speedometer
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-shield
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-screen-tablet
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-magic-wand
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-hourglass
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-graduation
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-ghost
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-game-controller
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-fire
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-eyeglass
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-envelope-open
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-envelope-letter
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-bell
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-badge
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-anchor
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-wallet
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-vector
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-speech
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-puzzle
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-printer
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-present
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-playlist
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-pin
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-picture
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-handbag
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-globe-alt
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-globe
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-folder-alt
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-folder
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-film
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-feed
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-drop
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-drawer
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-docs
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-doc
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-diamond
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-cup
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-calculator
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-bubbles
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-briefcase
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-book-open
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-basket-loaded
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-basket
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-bag
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-action-undo
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-action-redo
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-wrench
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-umbrella
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-trash
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-tag
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-support
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-frame
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-size-fullscreen
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-size-actual
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-shuffle
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-share-alt
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-share
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-rocket
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-question
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-pie-chart
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-pencil
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-note
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-loop
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-home
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-grid
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-graph
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-microphone
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-music-tone-alt
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-music-tone
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-earphones-alt
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-earphones
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-equalizer
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-like
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-dislike
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-control-start
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-control-rewind
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-control-play
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-control-pause
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-control-forward
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-control-end
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-volume-1
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-volume-2
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-volume-off
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-calendar
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-bulb
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-chart
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-ban
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-bubble
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-camrecorder
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-camera
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-cloud-download
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-cloud-upload
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-envelope
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-eye
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-flag
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-heart
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-info
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-key
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-link
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-lock
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-lock-open
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-magnifier
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-magnifier-add
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-magnifier-remove
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-paper-clip
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-paper-plane
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-power
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-refresh
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-reload
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-settings
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-star
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-symbol-female
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-symbol-male
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-target
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-credit-card
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-paypal
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-social-tumblr
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-social-twitter
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-social-facebook
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-social-instagram
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-social-linkedin
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-social-pinterest
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-social-github
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-social-gplus
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-social-reddit
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-social-skype
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-social-dribbble
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-social-behance
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-social-foursqare
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-social-soundcloud
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-social-spotify
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-social-stumbleupon
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-social-youtube
|
||||
</CCol>
|
||||
|
||||
<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 c-font-2xl c-d-block c-mt-4"></i>icon-social-dropbox
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
<template>
|
||||
<CCol xl="2" md="4" sm="6" xs="12" class="mb-4">
|
||||
<div :class="[classObj, color]" :style="{ paddingTop: '75%' }"></div>
|
||||
<CCol xl="2" md="4" sm="6" xs="12" class="c-mb-4">
|
||||
<div
|
||||
:class="['c-theme-color c-w-75 c-rounded c-mb-3', color]"
|
||||
:style="{ paddingTop: '75%' }"
|
||||
></div>
|
||||
<slot></slot>
|
||||
<ColorView/>
|
||||
</CCol>
|
||||
@@ -12,13 +15,9 @@ export default {
|
||||
name: 'ColorTheme',
|
||||
components: { ColorView },
|
||||
props: {
|
||||
classObj: {
|
||||
type: String,
|
||||
default: 'theme-color w-75 rounded mb-3'
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: 'bg-secondary'
|
||||
default: 'c-bg-secondary'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<table class="w-100">
|
||||
<table class="c-w-100">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="text-muted">HEX:</td>
|
||||
<td class="font-weight-bold">{{this.hexColor}}</td>
|
||||
<td class="c-text-muted">HEX:</td>
|
||||
<td class="c-font-weight-bold">{{this.hexColor}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-muted">RGB:</td>
|
||||
<td class="font-weight-bold">{{this.bgColor}}</td>
|
||||
<td class="c-text-muted">RGB:</td>
|
||||
<td class="c-font-weight-bold">{{this.bgColor}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -17,7 +17,7 @@
|
||||
import { rgbToHex } from '@coreui/coreui/dist/js/coreui-utilities'
|
||||
export default {
|
||||
name: 'ColorView',
|
||||
data: function () {
|
||||
data () {
|
||||
return {
|
||||
bgColor: 'rgb(255, 255, 255)'
|
||||
}
|
||||
@@ -39,4 +39,3 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
+28
-28
@@ -1,21 +1,21 @@
|
||||
<template>
|
||||
<div class="animated fadeIn">
|
||||
<div class="c-animated c-fadeIn">
|
||||
<CCard >
|
||||
<CCardHeader>
|
||||
<i class="icon-drop"></i> Theme colors
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow>
|
||||
<ColorTheme color="bg-primary">
|
||||
<ColorTheme color="c-bg-primary">
|
||||
<h6>Brand Primary Color</h6>
|
||||
</ColorTheme>
|
||||
<ColorTheme color="bg-secondary"><h6>Brand Secondary Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-success"><h6>Brand Success Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-danger"><h6>Brand Danger Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-warning"><h6>Brand Warning Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-info"><h6>Brand Info Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-light"><h6>Brand Light Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-dark"><h6>Brand Dark Color</h6></ColorTheme>
|
||||
<ColorTheme color="c-bg-secondary"><h6>Brand Secondary Color</h6></ColorTheme>
|
||||
<ColorTheme color="c-bg-success"><h6>Brand Success Color</h6></ColorTheme>
|
||||
<ColorTheme color="c-bg-danger"><h6>Brand Danger Color</h6></ColorTheme>
|
||||
<ColorTheme color="c-bg-warning"><h6>Brand Warning Color</h6></ColorTheme>
|
||||
<ColorTheme color="c-bg-info"><h6>Brand Info Color</h6></ColorTheme>
|
||||
<ColorTheme color="c-bg-light"><h6>Brand Light Color</h6></ColorTheme>
|
||||
<ColorTheme color="c-bg-dark"><h6>Brand Dark Color</h6></ColorTheme>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
@@ -25,15 +25,15 @@
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow>
|
||||
<ColorTheme color="bg-gray-100"><h6>Brand 100 Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-gray-200"><h6>Brand 200 Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-gray-300"><h6>Brand 300 Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-gray-400"><h6>Brand 400 Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-gray-500"><h6>Brand 500 Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-gray-600"><h6>Brand 600 Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-gray-700"><h6>Brand 700 Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-gray-800"><h6>Brand 800 Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-gray-900"><h6>Brand 900 Color</h6></ColorTheme>
|
||||
<ColorTheme color="c-bg-gray-100"><h6>Brand 100 Color</h6></ColorTheme>
|
||||
<ColorTheme color="c-bg-gray-200"><h6>Brand 200 Color</h6></ColorTheme>
|
||||
<ColorTheme color="c-bg-gray-300"><h6>Brand 300 Color</h6></ColorTheme>
|
||||
<ColorTheme color="c-bg-gray-400"><h6>Brand 400 Color</h6></ColorTheme>
|
||||
<ColorTheme color="c-bg-gray-500"><h6>Brand 500 Color</h6></ColorTheme>
|
||||
<ColorTheme color="c-bg-gray-600"><h6>Brand 600 Color</h6></ColorTheme>
|
||||
<ColorTheme color="c-bg-gray-700"><h6>Brand 700 Color</h6></ColorTheme>
|
||||
<ColorTheme color="c-bg-gray-800"><h6>Brand 800 Color</h6></ColorTheme>
|
||||
<ColorTheme color="c-bg-gray-900"><h6>Brand 900 Color</h6></ColorTheme>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
@@ -43,16 +43,16 @@
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow>
|
||||
<ColorTheme color="bg-blue"><h6>Brand Blue Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-indigo"><h6>Brand Indigo Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-purple"><h6>Brand Purple Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-pink"><h6>Brand Pink Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-red"><h6>Brand Red Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-orange"><h6>Brand Orange Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-yellow"><h6>Brand Yellow Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-green"><h6>Brand Green Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-teal"><h6>Brand Teal Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-cyan"><h6>Brand Cyan Color</h6></ColorTheme>
|
||||
<ColorTheme color="c-bg-blue"><h6>Brand Blue Color</h6></ColorTheme>
|
||||
<ColorTheme color="c-bg-indigo"><h6>Brand Indigo Color</h6></ColorTheme>
|
||||
<ColorTheme color="c-bg-purple"><h6>Brand Purple Color</h6></ColorTheme>
|
||||
<ColorTheme color="c-bg-pink"><h6>Brand Pink Color</h6></ColorTheme>
|
||||
<ColorTheme color="c-bg-red"><h6>Brand Red Color</h6></ColorTheme>
|
||||
<ColorTheme color="c-bg-orange"><h6>Brand Orange Color</h6></ColorTheme>
|
||||
<ColorTheme color="c-bg-yellow"><h6>Brand Yellow Color</h6></ColorTheme>
|
||||
<ColorTheme color="c-bg-green"><h6>Brand Green Color</h6></ColorTheme>
|
||||
<ColorTheme color="c-bg-teal"><h6>Brand Teal Color</h6></ColorTheme>
|
||||
<ColorTheme color="c-bg-cyan"><h6>Brand Cyan Color</h6></ColorTheme>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
|
||||
+129
-67
@@ -1,12 +1,13 @@
|
||||
<template>
|
||||
<div class="animated fadeIn">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="c-animated c-fadeIn">
|
||||
<div class="c-card">
|
||||
<div class="c-card-header">
|
||||
Headings
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.</p>
|
||||
<table class="table">
|
||||
<div class="c-card-body">
|
||||
<p>Documentation and examples for Bootstrap typography,
|
||||
including global settings, headings, body text, lists, and more.</p>
|
||||
<table class="c-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Heading</th>
|
||||
@@ -16,132 +17,193 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<p><code class="highlighter-rouge"><h1></h1></code></p>
|
||||
<p>
|
||||
<code class="c-highlighter-rouge">
|
||||
<h1></h1>
|
||||
</code>
|
||||
</p>
|
||||
</td>
|
||||
<td><span class="h1">h1. Bootstrap heading</span></td>
|
||||
<td><span class="c-h1">h1. Bootstrap heading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p><code class="highlighter-rouge"><h2></h2></code></p>
|
||||
<p>
|
||||
<code class="c-highlighter-rouge">
|
||||
<h2></h2>
|
||||
</code>
|
||||
</p>
|
||||
</td>
|
||||
<td><span class="h2">h2. Bootstrap heading</span></td>
|
||||
<td><span class="c-h2">h2. Bootstrap heading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p><code class="highlighter-rouge"><h3></h3></code></p>
|
||||
<p>
|
||||
<code class="c-highlighter-rouge">
|
||||
<h3></h3>
|
||||
</code>
|
||||
</p>
|
||||
</td>
|
||||
<td><span class="h3">h3. Bootstrap heading</span></td>
|
||||
<td><span class="c-h3">h3. Bootstrap heading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p><code class="highlighter-rouge"><h4></h4></code></p>
|
||||
<p>
|
||||
<code class="c-highlighter-rouge">
|
||||
<h4></h4>
|
||||
</code>
|
||||
</p>
|
||||
</td>
|
||||
<td><span class="h4">h4. Bootstrap heading</span></td>
|
||||
<td><span class="c-h4">h4. Bootstrap heading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p><code class="highlighter-rouge"><h5></h5></code></p>
|
||||
<p>
|
||||
<code class="c-highlighter-rouge">
|
||||
<h5></h5>
|
||||
</code>
|
||||
</p>
|
||||
</td>
|
||||
<td><span class="h5">h5. Bootstrap heading</span></td>
|
||||
<td><span class="c-h5">h5. Bootstrap heading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p><code class="highlighter-rouge"><h6></h6></code></p>
|
||||
<p>
|
||||
<code class="c-highlighter-rouge">
|
||||
<h6></h6>
|
||||
</code>
|
||||
</p>
|
||||
</td>
|
||||
<td><span class="h6">h6. Bootstrap heading</span></td>
|
||||
<td><span class="c-h6">h6. Bootstrap heading</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="c-card">
|
||||
<div class="c-card-header">
|
||||
Headings
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p><code class="highlighter-rouge">.h1</code> through <code class="highlighter-rouge">.h6</code> classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.</p>
|
||||
<div class="bd-example">
|
||||
<p class="h1">h1. Bootstrap heading</p>
|
||||
<p class="h2">h2. Bootstrap heading</p>
|
||||
<p class="h3">h3. Bootstrap heading</p>
|
||||
<p class="h4">h4. Bootstrap heading</p>
|
||||
<p class="h5">h5. Bootstrap heading</p>
|
||||
<p class="h6">h6. Bootstrap heading</p>
|
||||
<div class="c-card-body">
|
||||
<p>
|
||||
<code class="c-highlighter-rouge">.h1</code> through
|
||||
<code class="c-highlighter-rouge">.h6</code>
|
||||
classes are also available, for when you want to match the font
|
||||
styling of a heading but cannot use the associated HTML element.
|
||||
</p>
|
||||
<div class="c-bd-example">
|
||||
<p class="c-h1">h1. Bootstrap heading</p>
|
||||
<p class="c-h2">h2. Bootstrap heading</p>
|
||||
<p class="c-h3">h3. Bootstrap heading</p>
|
||||
<p class="c-h4">h4. Bootstrap heading</p>
|
||||
<p class="c-h5">h5. Bootstrap heading</p>
|
||||
<p class="c-h6">h6. Bootstrap heading</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="c-card">
|
||||
<div class="c-card-header">
|
||||
Display headings
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a <strong>display heading</strong>—a larger, slightly more opinionated heading style.</p>
|
||||
<div class="bd-example bd-example-type">
|
||||
<table class="table">
|
||||
<div class="c-card-body">
|
||||
<p>
|
||||
Traditional heading elements are designed to work best in the meat
|
||||
of your page content. When you need a heading to stand out,
|
||||
consider using a <strong>display heading</strong>—a larger,
|
||||
slightly more opinionated heading style.
|
||||
</p>
|
||||
<div class="c-bd-example c-bd-example-type">
|
||||
<table class="c-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><span class="display-1">Display 1</span></td>
|
||||
<td><span class="c-display-1">Display 1</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="display-2">Display 2</span></td>
|
||||
<td><span class="c-display-2">Display 2</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="display-3">Display 3</span></td>
|
||||
<td><span class="c-display-3">Display 3</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="display-4">Display 4</span></td>
|
||||
<td><span class="c-display-4">Display 4</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="c-card">
|
||||
<div class="c-card-header">
|
||||
Inline text elements
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a <strong>display heading</strong>—a larger, slightly more opinionated heading style.</p>
|
||||
<div class="bd-example">
|
||||
<div class="c-card-body">
|
||||
<p>
|
||||
Traditional heading elements are designed to work best in the meat
|
||||
of your page content. When you need a heading to stand out,
|
||||
consider using a <strong>display heading</strong>—a larger,
|
||||
slightly more opinionated heading style.
|
||||
</p>
|
||||
<div class="c-bd-example">
|
||||
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
|
||||
<p><del>This line of text is meant to be treated as deleted text.</del></p>
|
||||
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
|
||||
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
|
||||
<p><del>
|
||||
This line of text is meant to be treated as deleted text.
|
||||
</del></p>
|
||||
<p><s>
|
||||
This line of text is meant to be treated as no longer accurate.
|
||||
</s></p>
|
||||
<p><ins>
|
||||
This line of text is meant to be treated as an addition to the document.
|
||||
</ins></p>
|
||||
<p><u>This line of text will render as underlined</u></p>
|
||||
<p><small>This line of text is meant to be treated as fine print.</small></p>
|
||||
<p><small>
|
||||
This line of text is meant to be treated as fine print.
|
||||
</small></p>
|
||||
<p><strong>This line rendered as bold text.</strong></p>
|
||||
<p><em>This line rendered as italicized text.</em></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="c-card">
|
||||
<div class="c-card-header">
|
||||
Description list alignment
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic mixins). For longer terms, you can optionally add a <code class="highlighter-rouge">.text-truncate</code> class to truncate the text with an ellipsis.</p>
|
||||
<div class="bd-example">
|
||||
<dl class="row">
|
||||
<dt class="col-sm-3">Description lists</dt>
|
||||
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
|
||||
<div class="c-card-body">
|
||||
<p>
|
||||
Align terms and descriptions horizontally by using our grid system’s
|
||||
predefined classes (or semantic mixins). For longer terms, you can
|
||||
optionally add a <code class="highlighter-rouge">.text-truncate</code>
|
||||
class to truncate the text with an ellipsis.
|
||||
</p>
|
||||
<div class="c-bd-example">
|
||||
<dl class="c-row">
|
||||
<dt class="c-col-sm-3">Description lists</dt>
|
||||
<dd class="c-col-sm-9">
|
||||
A description list is perfect for defining terms.
|
||||
</dd>
|
||||
|
||||
<dt class="col-sm-3">Euismod</dt>
|
||||
<dd class="col-sm-9">
|
||||
<dt class="c-col-sm-3">Euismod</dt>
|
||||
<dd class="c-col-sm-9">
|
||||
<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
|
||||
<p>Donec id elit non mi porta gravida at eget metus.</p>
|
||||
</dd>
|
||||
|
||||
<dt class="col-sm-3">Malesuada porta</dt>
|
||||
<dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
|
||||
<dt class="c-col-sm-3">Malesuada porta</dt>
|
||||
<dd class="c-col-sm-9">
|
||||
Etiam porta sem malesuada magna mollis euismod.
|
||||
</dd>
|
||||
|
||||
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
|
||||
<dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
|
||||
<dt class="c-col-sm-3 text-truncate">Truncated term is truncated</dt>
|
||||
<dd class="c-col-sm-9">
|
||||
Fusce dapibus, tellus ac cursus commodo, tortor mauris
|
||||
condimentum nibh, ut fermentum massa justo sit amet risus.
|
||||
</dd>
|
||||
|
||||
<dt class="col-sm-3">Nesting</dt>
|
||||
<dd class="col-sm-9">
|
||||
<dl class="row">
|
||||
<dt class="col-sm-4">Nested definition list</dt>
|
||||
<dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
|
||||
<dt class="c-col-sm-3">Nesting</dt>
|
||||
<dd class="c-col-sm-9">
|
||||
<dl class="c-row">
|
||||
<dt class="c-col-sm-4">Nested definition list</dt>
|
||||
<dd class="c-col-sm-8">
|
||||
Aenean posuere, tortor sed cursus feugiat, nunc augue nunc.
|
||||
</dd>
|
||||
</dl>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
@@ -6,11 +6,12 @@
|
||||
User id: {{ $route.params.id }}
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CTable striped
|
||||
small
|
||||
fixed
|
||||
:items="items($route.params.id)"
|
||||
:fields="$options.fields"
|
||||
<CTable
|
||||
striped
|
||||
small
|
||||
fixed
|
||||
:items="items($route.params.id)"
|
||||
:fields="$options.fields"
|
||||
/>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
|
||||
+13
-10
@@ -3,14 +3,15 @@
|
||||
<CCol col="12" xl="8">
|
||||
<transition name="slide">
|
||||
<CCard headerHtml="users" bodyWrapper>
|
||||
<CTable hover
|
||||
striped
|
||||
:items="items"
|
||||
:fields="fields"
|
||||
:current-page="currentPage"
|
||||
:per-page="perPage"
|
||||
@row-clicked="rowClicked"
|
||||
:paginationProps="$options.paginationProps"
|
||||
<CTable
|
||||
hover
|
||||
striped
|
||||
:items="items"
|
||||
:fields="fields"
|
||||
:current-page="currentPage"
|
||||
:per-page="perPage"
|
||||
@row-clicked="rowClicked"
|
||||
:paginationProps="$options.paginationProps"
|
||||
>
|
||||
<td slot="id" slot-scope="data">
|
||||
<strong>{{data.item.id}}</strong>
|
||||
@@ -19,7 +20,9 @@
|
||||
<strong>{{data.item.name}}</strong>
|
||||
</td>
|
||||
<td slot="status" slot-scope="data">
|
||||
<CBadge :variant="getBadge(data.item.status)">{{data.item.status}}</CBadge>
|
||||
<CBadge :variant="getBadge(data.item.status)">
|
||||
{{data.item.status}}
|
||||
</CBadge>
|
||||
</td>
|
||||
</CTable>
|
||||
</CCard>
|
||||
@@ -74,7 +77,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.card-body >>> table > tbody > tr > td {
|
||||
.c-card-body >>> table > tbody > tr > td {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user