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

refactor: replace most external libraries icons with coreui icons

Browse Source 
Not replaced:
- brand buttons,
- payment methods in dashboard
This commit is contained in:
woothu
2019-05-31 16:34:31 +02:00
parent 5fb7be44fa
commit 4ce4b01cae
20 changed files with 251 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/_nav.js
+43 -43
View File
@@ -3,7 +3,7 @@ export default {
{ {
name: 'Dashboard', name: 'Dashboard',
url: '/dashboard', url: '/dashboard',
icon: 'icon-speedometer', icon: 'cui-speedometer',
badge: { badge: {
variant: 'primary', variant: 'primary',
text: 'NEW' text: 'NEW'
@@ -21,12 +21,12 @@ export default {
{ {
name: 'Colors', name: 'Colors',
url: '/theme/colors', url: '/theme/colors',
icon: 'icon-drop' icon: 'cui-drop'
}, },
{ {
name: 'Typography', name: 'Typography',
url: '/theme/typography', url: '/theme/typography',
icon: 'icon-pencil' icon: 'cui-pencil'
}, },
{ {
title: true, title: true,
@@ -40,131 +40,131 @@ export default {
{ {
name: 'Base', name: 'Base',
url: '/base', url: '/base',
icon: 'icon-puzzle', icon: 'cui-puzzle',
children: [ children: [
{ {
name: 'Breadcrumbs', name: 'Breadcrumbs',
url: '/base/breadcrumbs', url: '/base/breadcrumbs',
icon: 'icon-puzzle' icon: 'cui-puzzle'
}, },
{ {
name: 'Cards', name: 'Cards',
url: '/base/cards', url: '/base/cards',
icon: 'icon-puzzle' icon: 'cui-puzzle'
}, },
{ {
name: 'Carousels', name: 'Carousels',
url: '/base/carousels', url: '/base/carousels',
icon: 'icon-puzzle' icon: 'cui-puzzle'
}, },
{ {
name: 'Collapses', name: 'Collapses',
url: '/base/collapses', url: '/base/collapses',
icon: 'icon-puzzle' icon: 'cui-puzzle'
}, },
{ {
name: 'Forms', name: 'Forms',
url: '/base/forms', url: '/base/forms',
icon: 'icon-puzzle' icon: 'cui-puzzle'
}, },
{ {
name: 'Jumbotrons', name: 'Jumbotrons',
url: '/base/jumbotrons', url: '/base/jumbotrons',
icon: 'icon-puzzle' icon: 'cui-puzzle'
}, },
{ {
name: 'List Groups', name: 'List Groups',
url: '/base/list-groups', url: '/base/list-groups',
icon: 'icon-puzzle' icon: 'cui-puzzle'
}, },
{ {
name: 'Navs', name: 'Navs',
url: '/base/navs', url: '/base/navs',
icon: 'icon-puzzle' icon: 'cui-puzzle'
}, },
{ {
name: 'Navbars', name: 'Navbars',
url: '/base/navbars', url: '/base/navbars',
icon: 'icon-puzzle' icon: 'cui-puzzle'
}, },
{ {
name: 'Paginations', name: 'Paginations',
url: '/base/paginations', url: '/base/paginations',
icon: 'icon-puzzle' icon: 'cui-puzzle'
}, },
{ {
name: 'Popovers', name: 'Popovers',
url: '/base/popovers', url: '/base/popovers',
icon: 'icon-puzzle' icon: 'cui-puzzle'
}, },
{ {
name: 'Progress Bars', name: 'Progress Bars',
url: '/base/progress-bars', url: '/base/progress-bars',
icon: 'icon-puzzle' icon: 'cui-puzzle'
}, },
{ {
name: 'Switches', name: 'Switches',
url: '/base/switches', url: '/base/switches',
icon: 'icon-puzzle' icon: 'cui-puzzle'
}, },
{ {
name: 'Tables', name: 'Tables',
url: '/base/tables', url: '/base/tables',
icon: 'icon-puzzle' icon: 'cui-puzzle'
}, },
{ {
name: 'Tabs', name: 'Tabs',
url: '/base/tabs', url: '/base/tabs',
icon: 'icon-puzzle' icon: 'cui-puzzle'
}, },
{ {
name: 'Tooltips', name: 'Tooltips',
url: '/base/tooltips', url: '/base/tooltips',
icon: 'icon-puzzle' icon: 'cui-puzzle'
} }
] ]
}, },
{ {
name: 'Buttons', name: 'Buttons',
url: '/buttons', url: '/buttons',
icon: 'icon-cursor', icon: 'cui-cursor',
children: [ children: [
{ {
name: 'Buttons', name: 'Buttons',
url: '/buttons/standard-buttons', url: '/buttons/standard-buttons',
icon: 'icon-cursor' icon: 'cui-cursor'
}, },
{ {
name: 'Button Dropdowns', name: 'Button Dropdowns',
url: '/buttons/dropdowns', url: '/buttons/dropdowns',
icon: 'icon-cursor' icon: 'cui-cursor'
}, },
{ {
name: 'Button Groups', name: 'Button Groups',
url: '/buttons/button-groups', url: '/buttons/button-groups',
icon: 'icon-cursor' icon: 'cui-cursor'
}, },
{ {
name: 'Brand Buttons', name: 'Brand Buttons',
url: '/buttons/brand-buttons', url: '/buttons/brand-buttons',
icon: 'icon-cursor' icon: 'cui-cursor'
} }
] ]
}, },
{ {
name: 'Charts', name: 'Charts',
url: '/charts', url: '/charts',
icon: 'icon-pie-chart' icon: 'cui-pie-chart'
}, },
{ {
name: 'Icons', name: 'Icons',
url: '/icons', url: '/icons',
icon: 'icon-star', icon: 'cui-star',
children: [ children: [
{ {
name: 'CoreUI Icons', name: 'CoreUI Icons',
url: '/icons/coreui-icons', url: '/icons/coreui-icons',
icon: 'icon-star', icon: 'cui-star',
badge: { badge: {
variant: 'info', variant: 'info',
text: 'NEW' text: 'NEW'
@@ -173,12 +173,12 @@ export default {
{ {
name: 'Flags', name: 'Flags',
url: '/icons/flags', url: '/icons/flags',
icon: 'icon-star' icon: 'cui-star'
}, },
{ {
name: 'Font Awesome', name: 'Font Awesome',
url: '/icons/font-awesome', url: '/icons/font-awesome',
icon: 'icon-star', icon: 'cui-star',
badge: { badge: {
variant: 'secondary', variant: 'secondary',
text: '4.7' text: '4.7'
@@ -187,36 +187,36 @@ export default {
{ {
name: 'Simple Line Icons', name: 'Simple Line Icons',
url: '/icons/simple-line-icons', url: '/icons/simple-line-icons',
icon: 'icon-star' icon: 'cui-star'
} }
] ]
}, },
{ {
name: 'Notifications', name: 'Notifications',
url: '/notifications', url: '/notifications',
icon: 'icon-bell', icon: 'cui-bell',
children: [ children: [
{ {
name: 'Alerts', name: 'Alerts',
url: '/notifications/alerts', url: '/notifications/alerts',
icon: 'icon-bell' icon: 'cui-bell'
}, },
{ {
name: 'Badges', name: 'Badges',
url: '/notifications/badges', url: '/notifications/badges',
icon: 'icon-bell' icon: 'cui-bell'
}, },
{ {
name: 'Modals', name: 'Modals',
url: '/notifications/modals', url: '/notifications/modals',
icon: 'icon-bell' icon: 'cui-bell'
} }
] ]
}, },
{ {
name: 'Widgets', name: 'Widgets',
url: '/widgets', url: '/widgets',
icon: 'icon-calculator', icon: 'cui-calculator',
badge: { badge: {
variant: 'primary', variant: 'primary',
text: 'NEW' text: 'NEW'
@@ -232,41 +232,41 @@ export default {
{ {
name: 'Pages', name: 'Pages',
url: '/pages', url: '/pages',
icon: 'icon-star', icon: 'cui-star',
children: [ children: [
{ {
name: 'Login', name: 'Login',
url: '/pages/login', url: '/pages/login',
icon: 'icon-star' icon: 'cui-star'
}, },
{ {
name: 'Register', name: 'Register',
url: '/pages/register', url: '/pages/register',
icon: 'icon-star' icon: 'cui-star'
}, },
{ {
name: 'Error 404', name: 'Error 404',
url: '/pages/404', url: '/pages/404',
icon: 'icon-star' icon: 'cui-star'
}, },
{ {
name: 'Error 500', name: 'Error 500',
url: '/pages/500', url: '/pages/500',
icon: 'icon-star' icon: 'cui-star'
} }
] ]
}, },
{ {
name: 'Download CoreUI', name: 'Download CoreUI',
url: 'http://coreui.io/vue/', url: 'http://coreui.io/vue/',
icon: 'icon-cloud-download', icon: 'cui-cloud-download',
class: 'mt-auto', class: 'mt-auto',
variant: 'success' variant: 'success'
}, },
{ {
name: 'Try CoreUI PRO', name: 'Try CoreUI PRO',
url: 'http://coreui.io/pro/vue/', url: 'http://coreui.io/pro/vue/',
icon: 'icon-layers', icon: 'cui-layers',
variant: 'danger' variant: 'danger'
} }
] ]
src/containers/DefaultHeaderDropdownAccnt.vue
+10 -10
View File
@@ -16,19 +16,19 @@
<strong>Account</strong> <strong>Account</strong>
</CDropdownHeader> </CDropdownHeader>
<CDropdownItem> <CDropdownItem>
<i class="fa fa-bell-o" /> Updates <i class="cui-bell"/> Updates
<CBadge variant="info" additionalClasses="hehe">{{ itemsCount }}</CBadge> <CBadge variant="info" additionalClasses="hehe">{{ itemsCount }}</CBadge>
</CDropdownItem> </CDropdownItem>
<CDropdownItem> <CDropdownItem>
<i class="fa fa-envelope-o" /> Messages <i class="cui-envelope-open" /> Messages
<CBadge variant="success">{{ itemsCount }}</CBadge> <CBadge variant="success">{{ itemsCount }}</CBadge>
</CDropdownItem> </CDropdownItem>
<CDropdownItem> <CDropdownItem>
<i class="fa fa-tasks" /> Tasks <i class="cui-task" /> Tasks
<CBadge variant="danger">{{ itemsCount }}</CBadge> <CBadge variant="danger">{{ itemsCount }}</CBadge>
</CDropdownItem> </CDropdownItem>
<CDropdownItem> <CDropdownItem>
<i class="fa fa-comments" /> Comments <i class="cui-comment-square" /> Comments
<CBadge variant="warning">{{ itemsCount }}</CBadge> <CBadge variant="warning">{{ itemsCount }}</CBadge>
</CDropdownItem> </CDropdownItem>
<CDropdownHeader <CDropdownHeader
@@ -38,25 +38,25 @@
<strong>Settings</strong> <strong>Settings</strong>
</CDropdownHeader> </CDropdownHeader>
<CDropdownItem> <CDropdownItem>
<i class="fa fa-user" /> Profile <i class="cui-user" /> Profile
</CDropdownItem> </CDropdownItem>
<CDropdownItem> <CDropdownItem>
<i class="fa fa-wrench" /> Settings <i class="cui-wrench" /> Settings
</CDropdownItem> </CDropdownItem>
<CDropdownItem> <CDropdownItem>
<i class="fa fa-usd" /> Payments <i class="cui-dollar" /> Payments
<CBadge variant="secondary">{{ itemsCount }}</CBadge> <CBadge variant="secondary">{{ itemsCount }}</CBadge>
</CDropdownItem> </CDropdownItem>
<CDropdownItem> <CDropdownItem>
<i class="fa fa-file" /> Projects <i class="cui-file" /> Projects
<CBadge variant="primary">{{ itemsCount }}</CBadge> <CBadge variant="primary">{{ itemsCount }}</CBadge>
</CDropdownItem> </CDropdownItem>
<CDropdownDivider/> <CDropdownDivider/>
<CDropdownItem> <CDropdownItem>
<i class="fa fa-shield" /> Lock Account <i class="cui-shield" /> Lock Account
</CDropdownItem> </CDropdownItem>
<CDropdownItem> <CDropdownItem>
<i class="fa fa-lock" /> Logout <i class="cui-lock-locked" /> Logout
</CDropdownItem> </CDropdownItem>
</CDropdown> </CDropdown>
</template> </template>
src/containers/TheAside.vue
+15 -13
View File
@@ -3,7 +3,7 @@
<CTabs addTabClasses="c-p-0"> <CTabs addTabClasses="c-p-0">
<CTab active> <CTab active>
<template slot="title"> <template slot="title">
<i class="icon-list"></i> <i class="cui-list"></i>
</template> </template>
<CListGroup class="c-list-group-accent"> <CListGroup class="c-list-group-accent">
<CListGroupItem <CListGroupItem
@@ -18,10 +18,10 @@
<strong>Lucas</strong> <strong>Lucas</strong>
</div> </div>
<small class="c-text-muted c-mr-3"> <small class="c-text-muted c-mr-3">
<i class="icon-calendar"></i>&nbsp;&nbsp;1 - 3pm <i class="cui-calendar"></i>&nbsp;&nbsp;1 - 3pm
</small> </small>
<small class="c-text-muted"> <small class="c-text-muted">
<i class="icon-location-pin"></i>&nbsp;&nbsp;Palo Alto, CA <i class="cui-location-pin"></i>&nbsp;&nbsp;Palo Alto, CA
</small> </small>
</CListGroupItem> </CListGroupItem>
<CListGroupItem href="#" class="c-list-group-item-accent-info"> <CListGroupItem href="#" class="c-list-group-item-accent-info">
@@ -31,9 +31,11 @@
<div>Skype with <strong>Megan</strong> <div>Skype with <strong>Megan</strong>
</div> </div>
<small class="c-text-muted mr-3"> <small class="c-text-muted mr-3">
<i class="icon-calendar"></i>&nbsp;&nbsp;4 - 5pm <i class="cui-calendar"></i>&nbsp;&nbsp;4 - 5pm
</small>
<small class="c-text-muted">
<CIcon name="socialSkype" height="11"/></i>&nbsp;&nbsp;On-line
</small> </small>
<small class="c-text-muted"><i class="icon-social-skype"></i>&nbsp;&nbsp;On-line</small>
</CListGroupItem> </CListGroupItem>
<hr class="c-transparent c-mx-3 c-my-0"> <hr class="c-transparent c-mx-3 c-my-0">
<CListGroupItem class="c-list-group-item-accent-secondary c-bg-light c-text-center c-font-weight-bold c-text-muted c-text-uppercase small"> <CListGroupItem class="c-list-group-item-accent-secondary c-bg-light c-text-center c-font-weight-bold c-text-muted c-text-uppercase small">
@@ -42,8 +44,8 @@
<CListGroupItem href="#" class="c-list-group-item-accent-danger c-list-group-item-divider"> <CListGroupItem href="#" class="c-list-group-item-accent-danger c-list-group-item-divider">
<div>New UI Project - <strong>deadline</strong> <div>New UI Project - <strong>deadline</strong>
</div> </div>
<small class="c-text-muted c-mr-3"><i class="icon-calendar"></i>&nbsp;&nbsp;10 - 11pm</small> <small class="c-text-muted c-mr-3"><i class="cui-calendar"></i>&nbsp;&nbsp;10 - 11pm</small>
<small class="c-text-muted"><i class="icon-home"></i>&nbsp;&nbsp;creativeLabs HQ</small> <small class="c-text-muted"><i class="cui-home"></i>&nbsp;&nbsp;creativeLabs HQ</small>
<div class="c-avatars-stack c-mt-2"> <div class="c-avatars-stack c-mt-2">
<div class="c-avatar c-avatar-xs"> <div class="c-avatar c-avatar-xs">
<img class="c-img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com"> <img class="c-img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
@@ -64,13 +66,13 @@
</CListGroupItem> </CListGroupItem>
<CListGroupItem href="#" class="c-list-group-item-accent-success c-list-group-item-divider"> <CListGroupItem href="#" class="c-list-group-item-accent-success c-list-group-item-divider">
<div><strong>#10 Startups.Garden</strong> Meetup</div> <div><strong>#10 Startups.Garden</strong> Meetup</div>
<small class="c-text-muted c-mr-3"><i class="icon-calendar"></i>&nbsp; 1 - 3pm</small> <small class="c-text-muted c-mr-3"><i class="cui-calendar"></i>&nbsp; 1 - 3pm</small>
<small class="c-text-muted"><i class="icon-location-pin"></i>&nbsp; Palo Alto, CA</small> <small class="c-text-muted"><i class="cui-location-pin"></i>&nbsp; Palo Alto, CA</small>
</CListGroupItem> </CListGroupItem>
<CListGroupItem href="#" class="c-list-group-item-accent-primary c-list-group-item-divider"> <CListGroupItem href="#" class="c-list-group-item-accent-primary c-list-group-item-divider">
<div><strong>Team meeting</strong></div> <div><strong>Team meeting</strong></div>
<small class="c-text-muted c-mr-3"><i class="icon-calendar"></i>&nbsp; 4 - 6pm</small> <small class="c-text-muted c-mr-3"><i class="cui-calendar"></i>&nbsp; 4 - 6pm</small>
<small class="c-text-muted"><i class="icon-home"></i>&nbsp; creativeLabs HQ</small> <small class="c-text-muted"><i class="cui-home"></i>&nbsp; creativeLabs HQ</small>
<div class="c-avatars-stack c-mt-2"> <div class="c-avatars-stack c-mt-2">
<div class="c-avatar c-avatar-xs"> <div class="c-avatar c-avatar-xs">
<img src="img/avatars/2.jpg" class="c-img-avatar" alt="admin@bootstrapmaster.com"> <img src="img/avatars/2.jpg" class="c-img-avatar" alt="admin@bootstrapmaster.com">
@@ -99,7 +101,7 @@
</CTab> </CTab>
<CTab> <CTab>
<template slot="title"> <template slot="title">
<i class='icon-speech'></i> <i class='cui-speech'></i>
</template> </template>
<div class="c-p-3"> <div class="c-p-3">
<div class="c-message"> <div class="c-message">
@@ -180,7 +182,7 @@
</CTab> </CTab>
<CTab> <CTab>
<template slot="title"> <template slot="title">
<i class="icon-settings"></i> <i class="cui-settings"></i>
</template> </template>
<div class="c-p-3"> <div class="c-p-3">
<h6>Settings</h6> <h6>Settings</h6>
src/containers/TheHeader.vue
+3 -3
View File
@@ -13,14 +13,14 @@
</CNavbarNav> </CNavbarNav>
<CNav class="c-header-nav c-ml-auto"> <CNav class="c-header-nav c-ml-auto">
<CNavItem class="c-d-md-down-none"> <CNavItem class="c-d-md-down-none">
<i class="icon-bell"></i> <i class="cui-bell"></i>
<CBadge pill variant="danger">5</CBadge> <CBadge pill variant="danger">5</CBadge>
</CNavItem> </CNavItem>
<CNavItem class="c-d-md-down-none"> <CNavItem class="c-d-md-down-none">
<i class="icon-list"></i> <i class="cui-list"></i>
</CNavItem> </CNavItem>
<CNavItem class="d-md-down-none"> <CNavItem class="d-md-down-none">
<i class="icon-location-pin"></i> <i class="cui-location-pin"></i>
</CNavItem> </CNavItem>
<DefaultHeaderDropdownAccnt/> <DefaultHeaderDropdownAccnt/>
</CNav> </CNav>
src/views/Dashboard.vue
+25 -13
View File
@@ -1,5 +1,5 @@
<template> <template>
<div class="animated fadeIn"> <div class="c-animated c-fadeIn">
<WidgetsDropdown/> <WidgetsDropdown/>
<CCard> <CCard>
<CCardBody> <CCardBody>
@@ -10,7 +10,7 @@
</CCol> </CCol>
<CCol sm="7" class="c-d-none c-d-md-block"> <CCol sm="7" class="c-d-none c-d-md-block">
<CButton variant="primary" class="c-float-right"> <CButton variant="primary" class="c-float-right">
<i class="icon-cloud-download"></i> <i class="cui-cloud-download"></i>
</CButton> </CButton>
<CButtonGroup class="c-float-right c-mr-3"> <CButtonGroup class="c-float-right c-mr-3">
<CButton <CButton
@@ -265,7 +265,7 @@
<ul class="c-horizontal-bars c-type-2"> <ul class="c-horizontal-bars c-type-2">
<div class="c-progress-group"> <div class="c-progress-group">
<div class="c-progress-group-header"> <div class="c-progress-group-header">
<i class="icon-user c-progress-group-icon"></i> <i class="cui-user c-progress-group-icon"></i>
<span class="c-title">Male</span> <span class="c-title">Male</span>
<span class="c-ml-auto c-font-weight-bold">43%</span> <span class="c-ml-auto c-font-weight-bold">43%</span>
</div> </div>
@@ -279,7 +279,7 @@
</div> </div>
<div class="c-progress-group c-mb-5"> <div class="c-progress-group c-mb-5">
<div class="c-progress-group-header"> <div class="c-progress-group-header">
<i class="icon-user-female c-progress-group-icon"></i> <i class="cui-user-female c-progress-group-icon"></i>
<span class="c-title">Female</span> <span class="c-title">Female</span>
<span class="c-ml-auto c-font-weight-bold">37%</span> <span class="c-ml-auto c-font-weight-bold">37%</span>
</div> </div>
@@ -293,7 +293,7 @@
</div> </div>
<div class="c-progress-group"> <div class="c-progress-group">
<div class="c-progress-group-header"> <div class="c-progress-group-header">
<i class="icon-globe c-progress-group-icon"></i> <i class="cui-globe c-progress-group-icon"></i>
<span class="c-title">Organic Search</span> <span class="c-title">Organic Search</span>
<span class="c-ml-auto c-font-weight-bold"> <span class="c-ml-auto c-font-weight-bold">
191,235<span class="text-muted small">(56%)</span> 191,235<span class="text-muted small">(56%)</span>
@@ -309,7 +309,11 @@
</div> </div>
<div class="c-progress-group"> <div class="c-progress-group">
<div class="c-progress-group-header"> <div class="c-progress-group-header">
<i class="icon-social-facebook c-progress-group-icon"></i> <CIcon
name="socialFacebook"
height="17"
class="c-progress-group-icon"
/>
<span class="c-title">Facebook</span> <span class="c-title">Facebook</span>
<span class="c-ml-auto c-font-weight-bold"> <span class="c-ml-auto c-font-weight-bold">
51,223 <span class="c-text-muted small">(15%)</span> 51,223 <span class="c-text-muted small">(15%)</span>
@@ -325,7 +329,11 @@
</div> </div>
<div class="c-progress-group"> <div class="c-progress-group">
<div class="c-progress-group-header"> <div class="c-progress-group-header">
<i class="icon-social-twitter c-progress-group-icon"></i> <CIcon
name="socialTwitter"
height="17"
class="c-progress-group-icon"
/>
<span class="c-title">Twitter</span> <span class="c-title">Twitter</span>
<span class="c-ml-auto c-font-weight-bold"> <span class="c-ml-auto c-font-weight-bold">
37,564 <span class="c-text-muted c-small">(11%)</span> 37,564 <span class="c-text-muted c-small">(11%)</span>
@@ -341,7 +349,11 @@
</div> </div>
<div class="c-progress-group"> <div class="c-progress-group">
<div class="c-progress-group-header"> <div class="c-progress-group-header">
<i class="icon-social-linkedin c-progress-group-icon"></i> <CIcon
name="socialLinkedin"
height="17"
class="c-progress-group-icon"
/>
<span class="c-title">LinkedIn</span> <span class="c-title">LinkedIn</span>
<span class="c-ml-auto c-font-weight-bold"> <span class="c-ml-auto c-font-weight-bold">
27,319 <span class="c-text-muted small">&nbsp;(8%)</span> 27,319 <span class="c-text-muted small">&nbsp;(8%)</span>
@@ -357,7 +369,7 @@
</div> </div>
<div class="c-divider c-text-center"> <div class="c-divider c-text-center">
<CButton variant="link" size="sm" class="c-text-muted"> <CButton variant="link" size="sm" class="c-text-muted">
<i class="icon-options"></i> <i class="cui-options"></i>
</CButton> </CButton>
</div> </div>
</ul> </ul>
@@ -396,7 +408,7 @@
<td <td
slot="country" slot="country"
slot-scope="{item}" slot-scope="{item}"
class="text-center" class="c-text-center"
> >
<i <i
class="c-h4 c-mb-0" class="c-h4 c-mb-0"
@@ -509,11 +521,11 @@ export default {
} }
], ],
tableFields: [ tableFields: [
{ key: 'avatar', label: '<i class="icon-people"></i>',}, { key: 'avatar', _classes: 'c-text-center' },
{ key: 'user' }, { key: 'user' },
{ key: 'country' }, { key: 'country', _classes: 'c-text-center' },
{ key: 'usage' }, { key: 'usage' },
{ key: 'payment', label: 'Payment method' }, { key: 'payment', label: 'Payment method', _classes: 'c-text-center' },
{ key: 'activity' }, { key: 'activity' },
] ]
} }
src/views/base/Cards.vue
+4 -4
View File
@@ -9,7 +9,7 @@
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard <CCard
headerHtml="<i class='fa fa-check'></i> Card with icon" headerHtml="<i class='cui-check'></i> Card with icon"
:bodyHtml="loremIpsum" :bodyHtml="loremIpsum"
/> />
</CCol> </CCol>
@@ -221,13 +221,13 @@
Card with header actions Card with header actions
<div class="c-card-header-actions"> <div class="c-card-header-actions">
<CLink href="#" class="c-card-header-action btn-setting" > <CLink href="#" class="c-card-header-action btn-setting" >
<i class="icon-settings"></i> <i class="cui-settings"></i>
</CLink> </CLink>
<CLink class="c-card-header-action btn-minimize" @click="isCollapsed = !isCollapsed"> <CLink class="c-card-header-action btn-minimize" @click="isCollapsed = !isCollapsed">
<i :class="`icon-arrow-${ !isCollapsed ? 'up' : 'down'}`"></i> <i :class="`cui-chevron-${isCollapsed ? 'bottom' : 'top'}`"></i>
</CLink> </CLink>
<CLink href="#" class="c-card-header-action c-btn-close" v-on:click="show = false"> <CLink href="#" class="c-card-header-action c-btn-close" v-on:click="show = false">
<i class="icon-close"></i> <i class="cui-circle-x"></i>
</CLink> </CLink>
</div> </div>
</CCardHeader> </CCardHeader>
src/views/base/Forms.vue
+96 -82
View File
@@ -1,5 +1,5 @@
<template> <template>
<div class="animated fadeIn"> <div class="c-animated c-fadeIn">
<CRow> <CRow>
<CCol sm="6"> <CCol sm="6">
<CCard> <CCard>
@@ -175,11 +175,11 @@
disabled disabled
/> />
<template v-for="(name, key) in checkboxNames"> <template v-for="(name, key) in checkboxNames">
<div class="form-row form-group" :key="name"> <div class="c-form-group c-form-row" :key="name">
<CCol sm="3"> <CCol tag="label" sm="3" class="c-col-form-label">
{{name}} {{name}}
</CCol> </CCol>
<CCol sm="9" :class="key % 2 === 1 ? 'form-inline' : ''"> <CCol sm="9" :class="key % 2 === 1 ? 'c-form-inline' : ''">
<CFormCheckbox <CFormCheckbox
v-for="option in options" v-for="option in options"
:key="option" :key="option"
@@ -194,11 +194,11 @@
</div> </div>
</template> </template>
<template v-for="(name, key) in radioNames"> <template v-for="(name, key) in radioNames">
<div class="form-row form-group" :key="name"> <div class="c-form-row c-form-group" :key="name">
<CCol sm="3"> <CCol sm="3">
{{name}} {{name}}
</CCol> </CCol>
<CCol sm="9" :class="key % 2 === 1 ? 'form-inline' : ''"> <CCol sm="9" :class="key % 2 === 1 ? 'c-form-inline' : ''">
<CFormRadio <CFormRadio
v-for="(option, optKey) in options" v-for="(option, optKey) in options"
:key="option" :key="option"
@@ -236,8 +236,8 @@
</CForm> </CForm>
</CCardBody> </CCardBody>
<CCardFooter> <CCardFooter>
<CButton type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</CButton> <CButton type="submit" size="sm" variant="primary"><i class="cui-circle-check"></i> Submit</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton> <CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
</CCardFooter> </CCardFooter>
</CCard> </CCard>
<CCard> <CCard>
@@ -249,20 +249,26 @@
<!-- Bootstrap Vue has some problems with Inline forms that's why we use some standard bootstrap classes --> <!-- Bootstrap Vue has some problems with Inline forms that's why we use some standard bootstrap classes -->
<CForm inline> <CForm inline>
<CFormInput <CFormInput
class="mr-2" class="c-mr-2"
label="<small>Name:&nbsp;</small>"
placeholder="Jane Doe" placeholder="Jane Doe"
/> >
<template #label>
<small>Name:&nbsp;</small>
</template>
</CFormInput>
<CFormInput <CFormInput
label="<small>Email:&nbsp;</small>"
placeholder="jane.doe@example.com" placeholder="jane.doe@example.com"
autocomplete="email" autocomplete="email"
/> >
<template #label>
<small>Email:&nbsp;</small>
</template>
</CFormInput>
</CForm> </CForm>
</CCardBody> </CCardBody>
<CCardFooter> <CCardFooter>
<CButton type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</CButton> <CButton type="submit" size="sm" variant="primary"><i class="cui-circle-check"></i> Submit</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton> <CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
</CCardFooter> </CCardFooter>
</CCard> </CCard>
</CCol> </CCol>
@@ -289,12 +295,12 @@
horizontal horizontal
placeholder="Enter Password..." placeholder="Enter Password..."
/> />
<CCardFooter>
<CButton type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
</CCardFooter>
</CForm> </CForm>
</CCardBody> </CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" variant="primary"><i class="cui-circle-check"></i> Submit</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
</CCardFooter>
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader> <CCardHeader>
@@ -322,8 +328,8 @@
/> />
</CCardBody> </CCardBody>
<CCardFooter> <CCardFooter>
<CButton type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</CButton> <CButton type="submit" size="sm" variant="primary"><i class="cui-circle-check"></i> Submit</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton> <CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
</CCardFooter> </CCardFooter>
</CForm> </CForm>
</CCard> </CCard>
@@ -332,60 +338,60 @@
Input <strong>Grid</strong> Input <strong>Grid</strong>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CRow class="form-group"> <CRow class="c-form-group">
<CCol sm="3"> <CCol sm="3">
<CFormInput class="mb-0" placeholder=".col-sm-3"/> <CFormInput class="c-mb-0" placeholder=".col-sm-3"/>
</CCol> </CCol>
</CRow> </CRow>
<CRow class="form-group"> <CRow class="c-form-group">
<CCol sm="4"> <CCol sm="4">
<CFormInput class="mb-0" placeholder=".col-sm-4"/> <CFormInput class="c-mb-0" placeholder=".col-sm-4"/>
</CCol> </CCol>
</CRow> </CRow>
<CRow class="form-group"> <CRow class="c-form-group">
<CCol sm="5"> <CCol sm="5">
<CFormInput class="mb-0" placeholder=".col-sm-5"/> <CFormInput class="c-mb-0" placeholder=".col-sm-5"/>
</CCol> </CCol>
</CRow> </CRow>
<CRow class="form-group"> <CRow class="c-form-group">
<CCol sm="6"> <CCol sm="6">
<CFormInput class="mb-0" placeholder=".col-sm-6"/> <CFormInput class="c-mb-0" placeholder=".col-sm-6"/>
</CCol> </CCol>
</CRow> </CRow>
<CRow class="form-group"> <CRow class="c-form-group">
<CCol sm="7"> <CCol sm="7">
<CFormInput class="mb-0" placeholder=".col-sm-7"/> <CFormInput class="c-mb-0" placeholder=".col-sm-7"/>
</CCol> </CCol>
</CRow> </CRow>
<CRow class="form-group"> <CRow class="c-form-group">
<CCol sm="8"> <CCol sm="8">
<CFormInput class="mb-0" placeholder=".col-sm-8"/> <CFormInput class="c-mb-0" placeholder=".col-sm-8"/>
</CCol> </CCol>
</CRow> </CRow>
<CRow class="form-group"> <CRow class="c-form-group">
<CCol sm="9"> <CCol sm="9">
<CFormInput class="mb-0" placeholder=".col-sm-9"/> <CFormInput class="c-mb-0" placeholder=".col-sm-9"/>
</CCol> </CCol>
</CRow> </CRow>
<CRow class="form-group"> <CRow class="c-form-group">
<CCol sm="10"> <CCol sm="10">
<CFormInput class="mb-0" placeholder=".col-sm-10"/> <CFormInput class="c-mb-0" placeholder=".col-sm-10"/>
</CCol> </CCol>
</CRow> </CRow>
<CRow class="form-group"> <CRow class="c-form-group">
<CCol sm="11"> <CCol sm="11">
<CFormInput class="mb-0" placeholder=".col-sm-11"/> <CFormInput class="c-mb-0" placeholder=".col-sm-11"/>
</CCol> </CCol>
</CRow> </CRow>
<CRow class="form-group"> <CRow class="c-form-group">
<CCol sm="12"> <CCol sm="12">
<CFormInput class="mb-0" placeholder=".col-sm-12"/> <CFormInput class="c-mb-0" placeholder=".col-sm-12"/>
</CCol> </CCol>
</CRow> </CRow>
</CCardBody> </CCardBody>
<CCardFooter> <CCardFooter>
<CButton type="submit" size="sm" variant="primary"><i class="fa fa-user"></i> Login</CButton> <CButton type="submit" size="sm" variant="primary"><i class="cui-user"></i> Login</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton> <CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
</CCardFooter> </CCardFooter>
</CCard> </CCard>
<CCard> <CCard>
@@ -412,8 +418,8 @@
/> />
</CCardBody> </CCardBody>
<CCardFooter> <CCardFooter>
<CButton type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</CButton> <CButton type="submit" size="sm" variant="primary"><i class="cui-circle-check"></i> Submit</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton> <CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
</CCardFooter> </CCardFooter>
</CCard> </CCard>
</CCol> </CCol>
@@ -475,23 +481,23 @@
<CCardBody> <CCardBody>
<CFormInput <CFormInput
placeholder="Username" placeholder="Username"
prependHtml="<i class='fa fa-user'></i>" prependHtml="<i class='cui-user'></i>"
/> />
<CFormInput <CFormInput
type="email" type="email"
placeholder="Email" placeholder="Email"
autocomplete="email" autocomplete="email"
appendHtml="<i class='fa fa-envelope-o'></i>" appendHtml="<i class='cui-envelope-open'></i>"
/> />
<CFormInput <CFormInput
prependHtml="<i class='fa fa-euro'></i>" prependHtml="<i class='cui-euro'></i>"
placeholder="ex. $1.000.000" placeholder="ex. $1.000.000"
appendHtml=".00" appendHtml=".00"
/> />
</CCardBody> </CCardBody>
<CCardFooter> <CCardFooter>
<CButton type="submit" size="sm" variant="success"><i class="fa fa-dot-circle-o"></i> Submit</CButton> <CButton type="submit" size="sm" variant="success"><i class="cui-circle-check"></i> Submit</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton> <CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
</CCardFooter> </CCardFooter>
</CCard> </CCard>
</CCol> </CCol>
@@ -503,7 +509,9 @@
<CCardBody> <CCardBody>
<CFormInput placeholder="Username"> <CFormInput placeholder="Username">
<template #prepend> <template #prepend>
<CButton variant="primary"><i class="fa fa-search"></i> Search</CButton> <CButton variant="primary">
<i class="cui-magnifying-glass"></i> Search
</CButton>
</template> </template>
</CFormInput> </CFormInput>
<CFormInput <CFormInput
@@ -529,8 +537,8 @@
</CFormInput> </CFormInput>
</CCardBody> </CCardBody>
<CCardFooter> <CCardFooter>
<CButton type="submit" size="sm" variant="success"><i class="fa fa-dot-circle-o"></i> Submit</CButton> <CButton type="submit" size="sm" variant="success"><i class="cui-circle-check"></i> Submit</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton> <CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
</CCardFooter> </CCardFooter>
</CCard> </CCard>
</CCol> </CCol>
@@ -602,8 +610,8 @@
</CFormInput> </CFormInput>
</CCardBody> </CCardBody>
<CCardFooter> <CCardFooter>
<CButton type="submit" size="sm" variant="success"><i class="fa fa-dot-circle-o"></i> Submit</CButton> <CButton type="submit" size="sm" variant="success"><i class="cui-circle-check"></i> Submit</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton> <CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
</CCardFooter> </CCardFooter>
</CCard> </CCard>
</CCol> </CCol>
@@ -616,15 +624,15 @@
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CRow <CRow
class="form-group" class="c-form-group"
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 :col="12 - number"> <CCol :col="12 - number">
<CFormInput class="mb-0" :placeholder="`.col-md-${12 - number}`"/> <CFormInput class="c-mb-0" :placeholder="`.col-md-${12 - number}`"/>
</CCol> </CCol>
<CCol :col="number"> <CCol :col="number">
<CFormInput class="mb-0" :placeholder="`.col-md-${number}`"/> <CFormInput class="c-mb-0" :placeholder="`.col-md-${number}`"/>
</CCol> </CCol>
</CRow> </CRow>
</CCardBody> </CCardBody>
@@ -644,15 +652,15 @@
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CRow <CRow
class="form-group" class="c-form-group"
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 :col="number"> <CCol :col="number">
<CFormInput class="mb-0" :placeholder="`.col-${number}`"/> <CFormInput class="c-mb-0" :placeholder="`.col-${number}`"/>
</CCol> </CCol>
<CCol :col="12 - number"> <CCol :col="12 - number">
<CFormInput class="mb-0" :placeholder="`.col-${12 - number}`"/> <CFormInput class="c-mb-0" :placeholder="`.col-${12 - number}`"/>
</CCol> </CCol>
</CRow> </CRow>
</CCardBody> </CCardBody>
@@ -676,13 +684,13 @@
<CForm> <CForm>
<CFormInput <CFormInput
prependHtml="Username" prependHtml="Username"
appendHtml="<i class='fa fa-user'></i>" appendHtml="<i class='cui-user'></i>"
/> />
<CFormInput <CFormInput
prependHtml="Email" prependHtml="Email"
type="email" type="email"
autocomplete="email" autocomplete="email"
appendHtml="<i class='fa fa-envelope'></i>" appendHtml="<i class='cui-envelope-closed'></i>"
/> />
<CFormInput <CFormInput
prependHtml="Password" prependHtml="Password"
@@ -690,8 +698,10 @@
autocomplete="current-password" autocomplete="current-password"
appendHtml="<i class='fa fa-asterisk'></i>" appendHtml="<i class='fa fa-asterisk'></i>"
/> />
<div class="form-group form-actions"> <div class="c-form-group c-form-actions">
<CButton type="submit" size="sm" variant="primary">Submit</CButton> <CButton type="submit" size="sm" variant="primary">
Submit
</CButton>
</div> </div>
</CForm> </CForm>
</CCardBody> </CCardBody>
@@ -706,13 +716,13 @@
<CForm> <CForm>
<CFormInput <CFormInput
placeholder="Username" placeholder="Username"
appendHtml="<i class='fa fa-user'></i>" appendHtml="<i class='cui-user'></i>"
/> />
<CFormInput <CFormInput
placeholder="Email" placeholder="Email"
type="email" type="email"
autocomplete="email" autocomplete="email"
appendHtml="<i class='fa fa-envelope'></i>" appendHtml="<i class='cui-envelope-closed'></i>"
/> />
<CFormInput <CFormInput
placeholder="Password" placeholder="Password"
@@ -720,8 +730,10 @@
autocomplete="current-password" autocomplete="current-password"
appendHtml="<i class='fa fa-asterisk'></i>" appendHtml="<i class='fa fa-asterisk'></i>"
/> />
<div class="form-group form-actions"> <div class="c-form-group c-form-actions">
<CButton type="submit" class="btn btn-sm btn-secondary">Submit</CButton> <CButton type="submit" class="c-btn c-btn-sm c-btn-secondary">
Submit
</CButton>
</div> </div>
</CForm> </CForm>
</CCardBody> </CCardBody>
@@ -736,13 +748,13 @@
<CForm> <CForm>
<CFormInput <CFormInput
placeholder="Username" placeholder="Username"
prependHtml="<i class='fa fa-user'></i>" prependHtml="<i class='cui-user'></i>"
/> />
<CFormInput <CFormInput
placeholder="Email" placeholder="Email"
type="email" type="email"
autocomplete="email" autocomplete="email"
prependHtml="<i class='fa fa-envelope'></i>" prependHtml="<i class='cui-envelope-closed'></i>"
/> />
<CFormInput <CFormInput
placeholder="Password" placeholder="Password"
@@ -750,8 +762,10 @@
autocomplete="current-password" autocomplete="current-password"
prependHtml="<i class='fa fa-asterisk'></i>" prependHtml="<i class='fa fa-asterisk'></i>"
/> />
<div class="form-group form-actions"> <div class="c-form-group c-form-actions">
<CButton type="submit" size="sm" variant="success">Submit</CButton> <CButton type="submit" size="sm" variant="success">
Submit
</CButton>
</div> </div>
</CForm> </CForm>
</CCardBody> </CCardBody>
@@ -763,19 +777,19 @@
<transition name="fade"> <transition name="fade">
<CCard v-if="show"> <CCard v-if="show">
<CCardHeader> <CCardHeader>
<i class="fa fa-edit"></i> Form Elements <i class="cui-pencil"></i> Form Elements
<div class="card-header-actions"> <div class="c-card-header-actions">
<CLink href="#" class="card-header-action btn-setting"> <CLink href="#" class="c-card-header-action c-btn-setting">
<i class="icon-settings"></i> <i class="cui-settings"></i>
</CLink> </CLink>
<CLink <CLink
class="card-header-action btn-minimize" class="c-card-header-action c-btn-minimize"
@click="formCollapsed=!formCollapsed" @click="formCollapsed=!formCollapsed"
> >
<i :class="`icon-arrow-${formCollapsed ? 'down' : 'up'}`"></i> <i :class="`cui-chevron-${formCollapsed ? 'bottom' : 'top'}`"></i>
</CLink> </CLink>
<CLink href="#" class="card-header-action btn-close" v-on:click="show = !show"> <CLink href="#" class="c-card-header-action c-btn-close" v-on:click="show = !show">
<i class="icon-close"></i> <i class="cui-circle-x"></i>
</CLink> </CLink>
</div> </div>
</CCardHeader> </CCardHeader>
@@ -813,7 +827,7 @@
<CButton variant="danger">Options</CButton> <CButton variant="danger">Options</CButton>
</template> </template>
</CFormInput> </CFormInput>
<div class="form-actions"> <div class="c-form-actions">
<CButton type="submit" variant="primary">Save changes</CButton> <CButton type="submit" variant="primary">Save changes</CButton>
<CButton variant="secondary">Cancel</CButton> <CButton variant="secondary">Cancel</CButton>
</div> </div>
src/views/base/Navbars.vue
+3 -3
View File
@@ -20,11 +20,11 @@
</CNavbarNav> </CNavbarNav>
<CNavbarNav class="ml-auto"> <CNavbarNav class="ml-auto">
<CDropdown right class="nav-item b-nav-dropdown" toggleClasses="nav-link"> <CDropdown right class="nav-item b-nav-dropdown" toggleClasses="nav-link">
<CDropdownItem><i class="fa fa-file" /> Projects <CDropdownItem><i class="cui-file" /> Projects
<CBadge variant="primary">32</CBadge> <CBadge variant="primary">32</CBadge>
</CDropdownItem> </CDropdownItem>
<CDropdownItem><i class="fa fa-shield" /> Lock Account</CDropdownItem> <CDropdownItem><i class="cui-shield" /> Lock Account</CDropdownItem>
<CDropdownItem><i class="fa fa-lock" /> Logout</CDropdownItem> <CDropdownItem><i class="cui-lock-locked" /> Logout</CDropdownItem>
</CDropdown> </CDropdown>
</CNavbarNav> </CNavbarNav>
</CCollapse> </CCollapse>
src/views/base/Navs.vue
+1 -1
View File
@@ -31,7 +31,7 @@
<CCardBody> <CCardBody>
<CNav> <CNav>
<CNavItem active> <CNavItem active>
<i class="icon-basket-loaded"></i> <i class="cui-basket-loaded"></i>
</CNavItem> </CNavItem>
<CNavItem> <CNavItem>
Link Link
src/views/base/Tabs.vue
+9 -9
View File
@@ -77,7 +77,7 @@
<CTabs addTabClasses="c-mt-1"> <CTabs addTabClasses="c-mt-1">
<CTab active> <CTab active>
<template slot="title"> <template slot="title">
<i class="icon-calculator"></i> <i class="cui-calculator"></i>
</template> </template>
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -87,7 +87,7 @@
</CTab> </CTab>
<CTab> <CTab>
<template slot="title"> <template slot="title">
<i class="icon-basket-loaded"></i> <i class="cui-basket-loaded"></i>
</template> </template>
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -97,7 +97,7 @@
</CTab> </CTab>
<CTab> <CTab>
<template slot="title"> <template slot="title">
<i class="icon-pie-chart"></i> <i class="cui-pie-chart"></i>
</template> </template>
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -118,7 +118,7 @@
<CTabs addTabClasses="c-mt-1"> <CTabs addTabClasses="c-mt-1">
<CTab active> <CTab active>
<template slot="title"> <template slot="title">
<i class="icon-calculator"></i> {{tabs[0]}} <i class="cui-calculator"></i> {{tabs[0]}}
</template> </template>
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -128,7 +128,7 @@
</CTab> </CTab>
<CTab> <CTab>
<template slot="title"> <template slot="title">
<i class="icon-basket-loaded"></i> {{tabs[1]}} <i class="cui-basket-loaded"></i> {{tabs[1]}}
</template> </template>
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -138,7 +138,7 @@
</CTab> </CTab>
<CTab> <CTab>
<template slot="title"> <template slot="title">
<i class="icon-pie-chart"></i> {{tabs[2]}} <i class="cui-pie-chart"></i> {{tabs[2]}}
</template> </template>
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -159,7 +159,7 @@
<CTabs pills vertical="4"> <CTabs pills vertical="4">
<CTab active> <CTab active>
<template slot="title"> <template slot="title">
<i class="icon-calculator"></i> {{tabs[0]}} <i class="cui-calculator"></i> {{tabs[0]}}
</template> </template>
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -169,7 +169,7 @@
</CTab> </CTab>
<CTab> <CTab>
<template slot="title"> <template slot="title">
<i class="icon-basket-loaded"></i> {{tabs[1]}} <i class="cui-basket-loaded"></i> {{tabs[1]}}
</template> </template>
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -179,7 +179,7 @@
</CTab> </CTab>
<CTab> <CTab>
<template slot="title"> <template slot="title">
<i class="icon-pie-chart"></i> {{tabs[2]}} <i class="cui-pie-chart"></i> {{tabs[2]}}
</template> </template>
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
src/views/buttons/ButtonGroups.vue
+3 -3
View File
@@ -152,14 +152,14 @@
<CFormInput <CFormInput
class="c-mb-0 c-w-25 c-mx-1" class="c-mb-0 c-w-25 c-mx-1"
size="sm" size="sm"
prepend="$" prependHtml="$"
append=".00" appendHtml=".00"
value="100" value="100"
/> />
<CFormSelect <CFormSelect
class="c-mb-0 c-w-25 c-mx-1" class="c-mb-0 c-w-25 c-mx-1"
size="sm" size="sm"
prepend="Size" prependHtml="Size"
value="Medium" value="Medium"
:options="['Large','Medium','Small']" :options="['Large','Medium','Small']"
custom custom
src/views/buttons/StandardButtons.vue
+5 -5
View File
@@ -594,27 +594,27 @@
<CRow class="c-align-items-center"> <CRow class="c-align-items-center">
<CCol sm xs="12" class="c-text-center c-mt-3"> <CCol sm xs="12" class="c-text-center c-mt-3">
<CButton variant="primary"> <CButton variant="primary">
<i class="fa fa-lightbulb-o"></i>&nbsp;Standard Button <i class="cui-lightbulb"></i>&nbsp;Standard Button
</CButton> </CButton>
</CCol> </CCol>
<CCol sm xs="12" class="c-text-center c-mt-3"> <CCol sm xs="12" class="c-text-center c-mt-3">
<CButton variant="secondary" outline> <CButton variant="secondary" outline>
<i class="fa fa-lightbulb-o"></i>&nbsp;Outline Button <i class="cui-lightbulb"></i>&nbsp;Outline Button
</CButton> </CButton>
</CCol> </CCol>
<CCol sm xs="12" class="c-text-center c-mt-3"> <CCol sm xs="12" class="c-text-center c-mt-3">
<CButton variant="success"> <CButton variant="success">
<i class="fa fa-lightbulb-o"></i>&nbsp;Ghost Button <i class="cui-lightbulb"></i>&nbsp;Ghost Button
</CButton> </CButton>
</CCol> </CCol>
<CCol sm xs="12" class="c-text-center c-mt-3"> <CCol sm xs="12" class="c-text-center c-mt-3">
<CButton variant="warning" square> <CButton variant="warning" square>
<i class="fa fa-lightbulb-o"></i>&nbsp;Square Button <i class="cui-lightbulb"></i>&nbsp;Square Button
</CButton> </CButton>
</CCol> </CCol>
<CCol sm xs="12" class="c-text-center c-mt-3"> <CCol sm xs="12" class="c-text-center c-mt-3">
<CButton variant="danger" pill> <CButton variant="danger" pill>
<i class="fa fa-lightbulb-o"></i>&nbsp;Pill Button <i class="cui-lightbulb"></i>&nbsp;Pill Button
</CButton> </CButton>
</CCol> </CCol>
</CRow> </CRow>
src/views/icons/CoreUIIcons.vue
+17 -2
View File
@@ -2,7 +2,7 @@
<div class="c-animated c-fadeIn"> <div class="c-animated c-fadeIn">
<CCard > <CCard >
<CCardHeader> <CCardHeader>
<i class="fa fa-picture-o"></i>CoreUI Icons <i class="cui-pencil"></i>CoreUI Icons
<CBadge variant="info">New</CBadge> <CBadge variant="info">New</CBadge>
<div class="c-card-header-actions"> <div class="c-card-header-actions">
<a <a
@@ -16,6 +16,14 @@
</div> </div>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CRow class="c-text-center c-mb-5">
<template v-for="(name, key) in $options.iconNames">
<CCol :key="key" col="6" sm="4" md="3" xl="2" >
<CIcon :name="name" width="24" class="c-mt-4"/>
<div>{{name}}</div>
</CCol>
</template>
</CRow>
<CRow class="c-text-center "> <CRow class="c-text-center ">
<CCol col="6" sm="4" md="3" xl="2"> <CCol col="6" sm="4" md="3" xl="2">
<i class="cui-account-logout c-icons c-font-2xl c-d-block c-mt-4"></i> <i class="cui-account-logout c-icons c-font-2xl c-d-block c-mt-4"></i>
@@ -423,7 +431,14 @@
</div> </div>
</template> </template>
<script> <script>
import icons from '@coreui/icons'
const iconNames = Object.keys(icons)
export default { export default {
name: 'CoreUIIcons' name: 'CoreUIIcons',
iconNames,
mounted () {
console.log(this.$options.iconNames)
}
} }
</script> </script>
src/views/icons/Flags.vue
+1 -1
View File
@@ -2,7 +2,7 @@
<div class="c-animated c-fadeIn"> <div class="c-animated c-fadeIn">
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="fa fa-font-awesome"></i> Flags <i class="cui-globe"></i>Flags
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CRow class="c-text-center"> <CRow class="c-text-center">
src/views/pages/Login.vue
+2 -2
View File
@@ -12,12 +12,12 @@
<h1>Login</h1> <h1>Login</h1>
<p class="text-muted">Sign In to your account</p> <p class="text-muted">Sign In to your account</p>
<CFormInput <CFormInput
prepend="<i class='icon-user'></i>" prependHtml="<i class='cui-user'></i>"
placeholder="Username" placeholder="Username"
autocomplete="username email" autocomplete="username email"
/> />
<CFormInput <CFormInput
prepend="<i class='icon-lock'></i>" prependHtml="<i class='cui-lock-locked'></i>"
placeholder="Password" placeholder="Password"
type="password" type="password"
autocomplete="curent-password" autocomplete="curent-password"
src/views/pages/Page404.vue
+1 -1
View File
@@ -10,7 +10,7 @@
</div> </div>
<CFormInput <CFormInput
class="c-mb-0" class="c-mb-0"
prepend="<i class='fa fa-search'></i>" prependHtml="<i class='cui-magnifying-glass'></i>"
placeholder="What are you looking for?" placeholder="What are you looking for?"
> >
<template #append> <template #append>
src/views/pages/Page500.vue
+1 -1
View File
@@ -10,7 +10,7 @@
</div> </div>
<CFormInput <CFormInput
class="c-mb-0" class="c-mb-0"
prepend="<i class='fa fa-search'></i>" prependHtml="<i class='cui-magnifying-glass'></i>"
placeholder="What are you looking for?" placeholder="What are you looking for?"
> >
<template #append> <template #append>
src/views/pages/Register.vue
+4 -4
View File
@@ -10,24 +10,24 @@
<p class="c-text-muted">Create your account</p> <p class="c-text-muted">Create your account</p>
<CFormInput <CFormInput
placeholder="Username" placeholder="Username"
prepend="<i class='icon-user'></i>" prependHtml="<i class='cui-user'></i>"
autocomplete="username" autocomplete="username"
/> />
<CFormInput <CFormInput
placeholder="Email" placeholder="Email"
prepend="@" prependHtml="@"
autocomplete="email" autocomplete="email"
/> />
<CFormInput <CFormInput
placeholder="Password" placeholder="Password"
type="password" type="password"
prepend="<i class='icon-lock'></i>" prependHtml="<i class='cui-lock-locked'></i>"
autocomplete="new-password" autocomplete="new-password"
/> />
<CFormInput <CFormInput
placeholder="Repeat password" placeholder="Repeat password"
type="password" type="password"
prepend="<i class='icon-lock'></i>" prependHtml="<i class='cui-lock-locked'></i>"
autocomplete="new-password" autocomplete="new-password"
class="c-mb-4" class="c-mb-4"
/> />
src/views/theme/Colors.vue
+3 -3
View File
@@ -2,7 +2,7 @@
<div class="c-animated c-fadeIn"> <div class="c-animated c-fadeIn">
<CCard > <CCard >
<CCardHeader> <CCardHeader>
<i class="icon-drop"></i> Theme colors <i class="cui-drop"></i> Theme colors
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CRow> <CRow>
@@ -21,7 +21,7 @@
</CCard> </CCard>
<CCard> <CCard>
<CCardHeader> <CCardHeader>
<i class="icon-drop"></i> Grays <i class="cui-drop"></i> Grays
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CRow> <CRow>
@@ -39,7 +39,7 @@
</CCard> </CCard>
<CCard > <CCard >
<CCardHeader> <CCardHeader>
<i class="icon-drop"></i> Additional colors <i class="cui-drop"></i> Additional colors
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CRow> <CRow>
src/views/widgets/WidgetsDropdown.vue
+4 -4
View File
@@ -7,7 +7,7 @@
class="c-float-right" class="c-float-right"
variant="transparent c-p-0" variant="transparent c-p-0"
placement="bottom-end" placement="bottom-end"
buttonHtml="<i class='icon-settings'></i>" buttonHtml="<i class='cui-settings'></i>"
> >
<CDropdownItem>Action</CDropdownItem> <CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem> <CDropdownItem>Another action</CDropdownItem>
@@ -34,7 +34,7 @@
variant="transparent c-p-0" variant="transparent c-p-0"
placement="bottom-end" placement="bottom-end"
noCaret noCaret
buttonHtml="<i class='icon-location-pin'></i>" buttonHtml="<i class='cui-location-pin'></i>"
> >
<CDropdownItem>Action</CDropdownItem> <CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem> <CDropdownItem>Another action</CDropdownItem>
@@ -66,7 +66,7 @@
class="c-float-right" class="c-float-right"
variant="transparent c-p-0" variant="transparent c-p-0"
placement="bottom-end" placement="bottom-end"
buttonHtml="<i class='icon-settings'></i>" buttonHtml="<i class='cui-settings'></i>"
> >
<CDropdownItem>Action</CDropdownItem> <CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem> <CDropdownItem>Another action</CDropdownItem>
@@ -97,7 +97,7 @@
class="c-float-right" class="c-float-right"
variant="transparent c-p-0" variant="transparent c-p-0"
placement="bottom-end" placement="bottom-end"
buttonHtml="<i class='icon-settings'></i>" buttonHtml="<i class='cui-settings'></i>"
> >
<CDropdownItem>Action</CDropdownItem> <CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem> <CDropdownItem>Another action</CDropdownItem>