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