sean/manja_ui_dev
1
0
Fork 0
Code Issues Pull Requests Actions 2 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/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>