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

refactor: replace font icons with svg icons

Browse Source
This commit is contained in:
woothu
2019-11-08 17:20:56 +01:00
parent 1c7b133ae5
commit bc822612da
67 changed files with 397 additions and 44811 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
-2
View File
@@ -9,8 +9,6 @@ export default {
</script>
<style lang="scss">
// CoreUI Icons Set
@import '~@coreui/icons/css/coreui-icons.min.css';
// Import Main styles for this application
@import 'assets/scss/style';
</style>
src/assets/icons/icons.js
+108 -5
View File
@@ -17,14 +17,117 @@ import {
reddit,
vimeo,
ccMastercard, ccVisa, stripe, paypal, googleWallet, ccAmex
} from '@coreui/icons/brands'
import { US, BR, IN, FR, ES, PL } from '@coreui/icons/flags'
import { iconSet } from '@coreui/icons'
} from '@coreui/icons'
import {
US,
BR,
IN,
FR,
ES,
PL
} from '@coreui/icons'
import {
arrowRight,
ban,
basket,
bell,
calculator,
calendar,
cloudDownload,
chartPie,
check,
chevronBottom,
chevronTop,
// circleCheck,
commentSquare,
cursor,
drop,
dollar,
envelopeClosed,
envelopeOpen,
euro,
globeAlt,
file,
justifyCenter,
laptop,
layers,
lightbulb,
list,
locationPin,
lockLocked,
magnifyingGlass,
moon,
pencil,
people,
puzzle,
settings,
shieldAlt,
speech,
speedometer,
star,
task,
user,
userFemale,
userFollow,
xCircle
} from '@coreui/icons'
export const iconsSet = Object.assign(
{},
iconSet,
{ US, BR, IN, FR, ES, PL },
{
arrowRight,
ban,
basket,
bell,
calculator,
calendar,
cloudDownload,
chartPie,
check,
chevronBottom,
chevronTop,
// circleCheck,
commentSquare,
cursor,
drop,
dollar,
envelopeClosed,
envelopeOpen,
euro,
globeAlt,
file,
justifyCenter,
laptop,
layers,
lightbulb,
list,
locationPin,
lockLocked,
magnifyingGlass,
moon,
pencil,
people,
puzzle,
settings,
shieldAlt,
speech,
speedometer,
star,
task,
user,
userFemale,
userFollow,
xCircle
},
{
US,
BR,
IN,
FR,
ES,
PL
},
{
facebook,
twitter,
src/containers/TheHeader.vue
+3 -3
View File
@@ -38,17 +38,17 @@
<CHeaderNav class="mr-4">
<CHeaderNavItem class="d-md-down-none mx-2">
<CHeaderNavLink>
<i class="cui-bell"></i>
<CIcon name="bell"/>
</CHeaderNavLink>
</CHeaderNavItem>
<CHeaderNavItem class="d-md-down-none mx-2">
<CHeaderNavLink>
<i class="cui-list"></i>
<CIcon name="list"/>
</CHeaderNavLink>
</CHeaderNavItem>
<CHeaderNavItem class="d-md-down-none mx-2">
<CHeaderNavLink>
<i class="cui-envelope-open"></i>
<CIcon name="envelope-open"/>
</CHeaderNavLink>
</CHeaderNavItem>
<TheHeaderDropdownAccnt/>
src/containers/TheHeaderDropdownAccnt.vue
+16 -10
View File
@@ -19,19 +19,19 @@
<strong>Account</strong>
</CDropdownHeader>
<CDropdownItem>
<i class="cui-bell mr-2"/> Updates
<CIcon name="bell"/> Updates
<CBadge color="info" class="ml-auto">{{ itemsCount }}</CBadge>
</CDropdownItem>
<CDropdownItem>
<i class="cui-envelope-open mr-2" /> Messages
<CIcon name="envelope-open" /> Messages
<CBadge color="success" class="ml-auto">{{ itemsCount }}</CBadge>
</CDropdownItem>
<CDropdownItem>
<i class="cui-task mr-2" /> Tasks
<CIcon name="task" /> Tasks
<CBadge color="danger" class="ml-auto">{{ itemsCount }}</CBadge>
</CDropdownItem>
<CDropdownItem>
<i class="cui-comment-square mr-2" /> Comments
<CIcon name="comment-square" /> Comments
<CBadge color="warning" class="ml-auto">{{ itemsCount }}</CBadge>
</CDropdownItem>
<CDropdownHeader
@@ -42,25 +42,25 @@
<strong>Settings</strong>
</CDropdownHeader>
<CDropdownItem>
<i class="cui-user mr-2" /> Profile
<CIcon name="user" /> Profile
</CDropdownItem>
<CDropdownItem>
<i class="cui-wrench mr-2" /> Settings
<CIcon name="settings" /> Settings
</CDropdownItem>
<CDropdownItem>
<i class="cui-dollar mr-2" /> Payments
<CIcon name="dollar" /> Payments
<CBadge color="secondary" class="ml-auto">{{ itemsCount }}</CBadge>
</CDropdownItem>
<CDropdownItem>
<i class="cui-file mr-2" /> Projects
<CIcon name="file" /> Projects
<CBadge color="primary" class="ml-auto">{{ itemsCount }}</CBadge>
</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem>
<i class="cui-shield mr-2" /> Lock Account
<CIcon name="shield-alt" /> Lock Account
</CDropdownItem>
<CDropdownItem>
<i class="cui-lock-locked mr-2" /> Logout
<CIcon name="lock-locked" /> Logout
</CDropdownItem>
</CDropdown>
</template>
@@ -75,3 +75,9 @@ export default {
}
}
</script>
<style scoped>
.c-icon {
margin-right: 0.5rem;
}
</style>
src/containers/_nav.js
+43 -43
View File
@@ -7,7 +7,7 @@ export default [
props: {
name: 'Dashboard',
to: '/dashboard',
icon: 'cui-speedometer',
icon: 'speedometer',
badge: {
color: 'primary',
text: 'NEW'
@@ -25,7 +25,7 @@ export default [
props: {
name: 'Colors',
to: '/theme/colors',
icon: 'cui-drop'
icon: 'drop'
}
}
],
@@ -35,7 +35,7 @@ export default [
props: {
name: 'Typography',
to: '/theme/typography',
icon: 'cui-pencil'
icon: 'pencil'
}
}
],
@@ -49,7 +49,7 @@ export default [
props: {
name: 'Base',
route: '/base',
icon: 'cui-puzzle',
icon: 'puzzle',
}
},
[
@@ -59,7 +59,7 @@ export default [
props: {
name: 'Breadcrumbs',
to: '/base/breadcrumbs',
icon: 'cui-puzzle'
icon: 'puzzle'
}
}
],
@@ -69,7 +69,7 @@ export default [
props: {
name: 'Cards',
to: '/base/cards',
icon: 'cui-puzzle'
icon: 'puzzle'
}
}
],
@@ -79,7 +79,7 @@ export default [
props: {
name: 'Carousels',
to: '/base/carousels',
icon: 'cui-puzzle'
icon: 'puzzle'
}
}
],
@@ -89,7 +89,7 @@ export default [
props: {
name: 'Collapses',
to: '/base/collapses',
icon: 'cui-puzzle'
icon: 'puzzle'
}
}
],
@@ -99,7 +99,7 @@ export default [
props: {
name: 'Forms',
to: '/base/forms',
icon: 'cui-puzzle'
icon: 'puzzle'
}
}
],
@@ -109,7 +109,7 @@ export default [
props: {
name: 'Jumbotrons',
to: '/base/jumbotrons',
icon: 'cui-puzzle'
icon: 'puzzle'
}
}
],
@@ -119,7 +119,7 @@ export default [
props: {
name: 'List Groups',
to: '/base/list-groups',
icon: 'cui-puzzle'
icon: 'puzzle'
}
}
],
@@ -129,7 +129,7 @@ export default [
props: {
name: 'Navs',
to: '/base/navs',
icon: 'cui-puzzle'
icon: 'puzzle'
}
}
],
@@ -139,7 +139,7 @@ export default [
props: {
name: 'Navbars',
to: '/base/navbars',
icon: 'cui-puzzle'
icon: 'puzzle'
}
}
],
@@ -149,7 +149,7 @@ export default [
props: {
name: 'Paginations',
to: '/base/paginations',
icon: 'cui-puzzle'
icon: 'puzzle'
}
}
],
@@ -159,7 +159,7 @@ export default [
props: {
name: 'Popovers',
to: '/base/popovers',
icon: 'cui-puzzle'
icon: 'puzzle'
}
}
],
@@ -169,7 +169,7 @@ export default [
props: {
name: 'Progress Bars',
to: '/base/progress-bars',
icon: 'cui-puzzle'
icon: 'puzzle'
}
}
],
@@ -179,7 +179,7 @@ export default [
props: {
name: 'Switches',
to: '/base/switches',
icon: 'cui-puzzle'
icon: 'puzzle'
}
}
],
@@ -189,7 +189,7 @@ export default [
props: {
name: 'Tables',
to: '/base/tables',
icon: 'cui-puzzle'
icon: 'puzzle'
}
}
],
@@ -199,7 +199,7 @@ export default [
props: {
name: 'Tabs',
to: '/base/tabs',
icon: 'cui-puzzle'
icon: 'puzzle'
}
}
],
@@ -209,7 +209,7 @@ export default [
props: {
name: 'Tooltips',
to: '/base/tooltips',
icon: 'cui-puzzle'
icon: 'puzzle'
}
}
]
@@ -221,7 +221,7 @@ export default [
props: {
name: 'Buttons',
route: '/buttons',
icon: 'cui-cursor',
icon: 'cursor',
}
},
[
@@ -231,7 +231,7 @@ export default [
props: {
name: 'Buttons',
to: '/buttons/standard-buttons',
icon: 'cui-cursor'
icon: 'cursor'
}
}
],
@@ -241,7 +241,7 @@ export default [
props: {
name: 'Button Dropdowns',
to: '/buttons/dropdowns',
icon: 'cui-cursor'
icon: 'cursor'
}
}
],
@@ -251,7 +251,7 @@ export default [
props: {
name: 'Button Groups',
to: '/buttons/button-groups',
icon: 'cui-cursor'
icon: 'cursor'
}
}
],
@@ -261,7 +261,7 @@ export default [
props: {
name: 'Brand Buttons',
to: '/buttons/brand-buttons',
icon: 'cui-cursor'
icon: 'cursor'
}
}
]
@@ -273,7 +273,7 @@ export default [
props: {
name: 'Charts',
to: '/charts',
icon: 'cui-pie-chart'
icon: 'chart-pie'
}
}
],
@@ -283,7 +283,7 @@ export default [
props: {
name: 'Icons',
route: '/icons',
icon: 'cui-star',
icon: 'star',
}
},
[
@@ -293,7 +293,7 @@ export default [
props: {
name: 'CoreUI Icons',
to: '/icons/coreui-icons',
icon: 'cui-star',
icon: 'star',
badge: {
color: 'info',
text: 'NEW'
@@ -307,7 +307,7 @@ export default [
props: {
name: 'Brands',
to: '/icons/brands',
icon: 'cui-star'
icon: 'star'
}
}
],
@@ -317,7 +317,7 @@ export default [
props: {
name: 'Flags',
to: '/icons/flags',
icon: 'cui-star'
icon: 'star'
}
}
]
@@ -329,7 +329,7 @@ export default [
props: {
name: 'Notifications',
route: '/notifications',
icon: 'cui-bell',
icon: 'bell',
}
},
[
@@ -339,7 +339,7 @@ export default [
props: {
name: 'Alerts',
to: '/notifications/alerts',
icon: 'cui-bell'
icon: 'bell'
}
}
],
@@ -349,7 +349,7 @@ export default [
props: {
name: 'Badges',
to: '/notifications/badges',
icon: 'cui-bell'
icon: 'bell'
}
}
],
@@ -359,7 +359,7 @@ export default [
props: {
name: 'Modals',
to: '/notifications/modals',
icon: 'cui-bell'
icon: 'bell'
}
}
]
@@ -371,11 +371,11 @@ export default [
props: {
name: 'Widgets',
to: '/widgets',
icon: 'cui-calculator',
icon: 'calculator',
badge: {
color: 'primary',
text: 'NEW',
pill: true
shape: 'pill'
}
}
}
@@ -393,7 +393,7 @@ export default [
props: {
name: 'Pages',
route: '/pages',
icon: 'cui-star',
icon: 'star',
}
},
[
@@ -403,7 +403,7 @@ export default [
props: {
name: 'Login',
to: '/pages/login',
icon: 'cui-star'
icon: 'star'
}
}
],
@@ -413,7 +413,7 @@ export default [
props: {
name: 'Register',
to: '/pages/register',
icon: 'cui-star'
icon: 'star'
}
}
],
@@ -423,7 +423,7 @@ export default [
props: {
name: 'Error 404',
to: '/pages/404',
icon: 'cui-star'
icon: 'star'
}
}
],
@@ -433,7 +433,7 @@ export default [
props: {
name: 'Error 500',
to: '/pages/500',
icon: 'cui-star'
icon: 'star'
}
}
]
@@ -445,7 +445,7 @@ export default [
props: {
name: 'Download CoreUI',
href: 'http://coreui.io/vue/',
icon: 'cui-cloud-download',
icon: 'cloud-download',
addLinkClasses: 'c-nav-link-success',
target: '_blank'
},
@@ -460,7 +460,7 @@ export default [
props: {
name: 'Try CoreUI PRO',
href: 'http://coreui.io/pro/vue/',
icon: 'cui-layers',
icon: 'layers',
addLinkClasses: 'c-nav-link-danger',
target: '_blank'
}
src/main.js
+2 -3
View File
@@ -2,16 +2,15 @@ import Vue from 'vue'
import App from './App'
import router from './router'
import CoreuiVue from '@coreui/vue/src'
import { CIconPlugin } from '@coreui/icons/vue'
import { iconsSet } from './assets/icons/icons.js'
import { iconsSet as icons } from './assets/icons/icons.js'
Vue.config.performance = true
Vue.use(CoreuiVue)
Vue.use(CIconPlugin, iconsSet)
new Vue({
el: '#app',
router,
icons,
template: '<App/>',
components: {
App
src/views/Dashboard.vue
+5 -5
View File
@@ -10,7 +10,7 @@
</CCol>
<CCol sm="7" class="d-none d-md-block">
<CButton color="primary" class="float-right">
<i class="cui-cloud-download"></i>
<CIcon name="cloud-download"/>
</CButton>
<CButtonGroup class="float-right mr-3">
<CButton
@@ -265,7 +265,7 @@
<ul class="horizontal-bars type-2">
<div class="progress-group">
<div class="progress-group-header">
<i class="cui-user progress-group-icon"></i>
<CIcon name="user" class="progress-group-icon"/>
<span class="title">Male</span>
<span class="ml-auto font-weight-bold">43%</span>
</div>
@@ -279,7 +279,7 @@
</div>
<div class="progress-group mb-5">
<div class="progress-group-header">
<i class="cui-user-female progress-group-icon"></i>
<CIcon name="user-female" class="progress-group-icon"/>
<span class="title">Female</span>
<span class="ml-auto font-weight-bold">37%</span>
</div>
@@ -293,7 +293,7 @@
</div>
<div class="progress-group">
<div class="progress-group-header">
<i class="cui-globe progress-group-icon"></i>
<CIcon name="globe-alt" class="progress-group-icon"/>
<span class="title">Organic Search</span>
<span class="ml-auto font-weight-bold">
191,235<span class="text-muted small">(56%)</span>
@@ -369,7 +369,7 @@
</div>
<div class="divider text-center">
<CButton color="link" size="sm" class="text-muted">
<i class="cui-options"></i>
<CIcon name="options"/>
</CButton>
</div>
</ul>
src/views/base/Breadcrumbs.vue
+1 -1
View File
@@ -3,7 +3,7 @@
<CCol col>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Bootstrap Breadcrumb</strong>
<CIcon name="justify-center"/><strong> Bootstrap Breadcrumb</strong>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Breadcrumb"
src/views/base/Cards.vue
+7 -7
View File
@@ -25,10 +25,10 @@
<CCard footer-html="Card Footer" :body-html="loremIpsum" />
</CCol>
<CCol sm="6" md="4">
<CCard
headerHtml="<i class='cui-check'></i> Card with icon"
:bodyHtml="loremIpsum"
/>
<CCard>
<CCardHeader><CIcon name="check"/> Card with icon</CCardHeader>
<CCardBody>{{loremIpsum}}</CCardBody>
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard>
@@ -240,13 +240,13 @@
Card with header actions
<div class="card-header-actions">
<CLink href="#" class="card-header-action btn-setting">
<i class="cui-settings"></i>
<CIcon name="settings"/>
</CLink>
<CLink class="card-header-action btn-minimize" @click="isCollapsed = !isCollapsed">
<i :class="`cui-chevron-${isCollapsed ? 'bottom' : 'top'}`"></i>
<CIcon :name="`chevron-${isCollapsed ? 'bottom' : 'top'}`"/>
</CLink>
<CLink href="#" class="card-header-action btn-close" v-on:click="show = false">
<i class="cui-circle-x"></i>
<CIcon name="x-circle"/>
</CLink>
</div>
</CCardHeader>
src/views/base/Carousels.vue
+1 -1
View File
@@ -3,7 +3,7 @@
<CCol md="12" lg="7">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<CIcon name="justify-center"/>
<strong> Bootstrap Carousel</strong>
<div class="card-header-actions">
<a
src/views/base/Collapses.vue
+1 -1
View File
@@ -3,7 +3,7 @@
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<CIcon name="justify-center"/>
<strong> Bootstrap Collapse </strong>
<div class="card-header-actions">
<a
src/views/base/Forms.vue
+65 -61
View File
@@ -245,8 +245,8 @@
</CForm>
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" color="primary"><i class="cui-circle-check"></i> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
<CButton type="submit" size="sm" color="primary"><CIcon name="circle-check"/> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><CIcon name="ban"/> Reset</CButton>
</CCardFooter>
</CCard>
<CCard>
@@ -276,8 +276,8 @@
</CForm>
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" color="primary"><i class="cui-circle-check"></i> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
<CButton type="submit" size="sm" color="primary"><CIcon name="circle-check"/> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><CIcon name="ban"/> Reset</CButton>
</CCardFooter>
</CCard>
</CCol>
@@ -307,8 +307,8 @@
</CForm>
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" color="primary"><i class="cui-circle-check"></i> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
<CButton type="submit" size="sm" color="primary"><CIcon name="circle-check"/> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><CIcon name="ban"/> Reset</CButton>
</CCardFooter>
</CCard>
<CCard>
@@ -337,8 +337,8 @@
/>
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" color="primary"><i class="cui-circle-check"></i> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
<CButton type="submit" size="sm" color="primary"><CIcon name="circle-check"/> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><CIcon name="ban"/> Reset</CButton>
</CCardFooter>
</CForm>
</CCard>
@@ -399,8 +399,8 @@
</CRow>
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" color="primary"><i class="cui-user"></i> Login</CButton>
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
<CButton type="submit" size="sm" color="primary"><CIcon name="user"/> Login</CButton>
<CButton type="reset" size="sm" color="danger"><CIcon name="ban"/> Reset</CButton>
</CCardFooter>
</CCard>
<CCard>
@@ -427,8 +427,8 @@
/>
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" color="primary"><i class="cui-circle-check"></i> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
<CButton type="submit" size="sm" color="primary"><CIcon name="circle-check"/> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><CIcon name="ban"/> Reset</CButton>
</CCardFooter>
</CCard>
</CCol>
@@ -488,25 +488,26 @@
<strong>Icon/Text</strong> Groups
</CCardHeader>
<CCardBody>
<CInput
placeholder="Username"
prependHtml="<i class='cui-user'></i>"
/>
<CInput placeholder="Username">
<template #prepend-content><CIcon name="user"/></template>
</CInput>
<CInput
type="email"
placeholder="Email"
autocomplete="email"
append-html="<i class='cui-envelope-open'></i>"
/>
>
<template #append-content><CIcon name="envelope-open"/></template>
</CInput>
<CInput
prependHtml="<i class='cui-euro'></i>"
placeholder="ex. $1.000.000"
append-html=".00"
/>
append=".00"
>
<template #prepend-content><CIcon name="euro"/></template>
</CInput>
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" color="success"><i class="cui-circle-check"></i> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
<CButton type="submit" size="sm" color="success"><CIcon name="circle-check"/> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><CIcon name="ban"/> Reset</CButton>
</CCardFooter>
</CCard>
</CCol>
@@ -519,7 +520,7 @@
<CInput placeholder="Username">
<template #prepend>
<CButton color="primary">
<i class="cui-magnifying-glass"></i> Search
<CIcon name="magnifying-glass"/> Search
</CButton>
</template>
</CInput>
@@ -546,8 +547,8 @@
</CInput>
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" color="success"><i class="cui-circle-check"></i> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
<CButton type="submit" size="sm" color="success"><CIcon name="circle-check"/> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><CIcon name="ban"/> Reset</CButton>
</CCardFooter>
</CCard>
</CCol>
@@ -619,8 +620,8 @@
</CInput>
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" color="success"><i class="cui-circle-check"></i> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
<CButton type="submit" size="sm" color="success"><CIcon name="circle-check"/> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><CIcon name="ban"/> Reset</CButton>
</CCardFooter>
</CCard>
</CCol>
@@ -691,22 +692,23 @@
</CCardHeader>
<CCardBody>
<CForm>
<CInput prepend="Username">
<template #append-content><CIcon name="user"/></template>
</CInput>
<CInput
prepend-html="Username"
append-html="<i class='cui-user'></i>"
/>
<CInput
prepend-html="Email"
type="email"
autocomplete="email"
append-html="<i class='cui-envelope-closed'></i>"
/>
prepend="Email"
>
<template #append-content><CIcon name="envelope-closed"/></template>
</CInput>
<CInput
prepend-html="Password"
type="password"
autocomplete="current-password"
append-html="<i class='cui-shield'></i>"
/>
prepend="Password"
>
<template #append-content><CIcon name="shield-alt"/></template>
</CInput>
<div class="form-group form-actions">
<CButton type="submit" size="sm" color="primary">
Submit
@@ -723,22 +725,23 @@
</CCardHeader>
<CCardBody>
<CForm>
<CInput
placeholder="Username"
append-html="<i class='cui-user'></i>"
/>
<CInput placeholder="Username">
<template #append-content><CIcon name="user"/></template>
</CInput>
<CInput
placeholder="Email"
type="email"
autocomplete="email"
append-html="<i class='cui-envelope-closed'></i>"
/>
>
<template #append-content><CIcon name="envelope-closed"/></template>
</CInput>
<CInput
placeholder="Password"
type="password"
autocomplete="current-password"
append-html="<i class='cui-shield'></i>"
/>
>
<template #append-content><CIcon name="shield-alt"/></template>
</CInput>
<div class="form-group form-actions">
<CButton type="submit" class="btn btn-sm btn-secondary">
Submit
@@ -755,22 +758,23 @@
</CCardHeader>
<CCardBody>
<CForm>
<CInput
placeholder="Username"
prependHtml="<i class='cui-user'></i>"
/>
<CInput placeholder="Username">
<template #prepend-content><CIcon name="user"/></template>
</CInput>
<CInput
placeholder="Email"
type="email"
autocomplete="email"
prependHtml="<i class='cui-envelope-closed'></i>"
/>
>
<template #prepend-content><CIcon name="envelope-closed"/></template>
</CInput>
<CInput
placeholder="Password"
type="password"
autocomplete="current-password"
prependHtml="<i class='cui-shield'></i>"
/>
<template #prepend-content><CIcon name="shield-alt"/></template>
</CInput>
<div class="form-group form-actions">
<CButton type="submit" size="sm" color="success">
Submit
@@ -786,19 +790,19 @@
<transition name="fade">
<CCard v-if="show">
<CCardHeader>
<i class="cui-pencil"></i> Form Elements
<CIcon name="pencil"/> Form Elements
<div class="card-header-actions">
<CLink href="#" class="card-header-action btn-setting">
<i class="cui-settings"></i>
<CIcon name="settings"/>
</CLink>
<CLink
class="card-header-action btn-minimize"
@click="formCollapsed=!formCollapsed"
>
<i :class="`cui-chevron-${formCollapsed ? 'bottom' : 'top'}`"></i>
<CIcon :name="`chevron-${formCollapsed ? 'bottom' : 'top'}`"/>
</CLink>
<CLink href="#" class="card-header-action btn-close" v-on:click="show = !show">
<i class="cui-circle-x"></i>
<CIcon name="x-circle"/>
</CLink>
</div>
</CCardHeader>
@@ -806,21 +810,21 @@
<CCardBody>
<CInput
label="Prepended text"
prepend-html="@"
description="Here's some help text"
type="email"
autocomplete="email"
prepend="@"
/>
<CInput
label="Appended text"
append-html=".00"
append=".00"
description="Here's some help text"
/>
<CInput
label="Appended and prepended text"
prepend-html="$"
append-html=".00"
append=".00"
description="Here's some help text"
prepend="$"
/>
<CInput
label="Append with button"
src/views/base/Jumbotrons.vue
+3 -3
View File
@@ -4,7 +4,7 @@
<CCol>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<CIcon name="justify-center"/>
<strong> Bootstrap Jumbotron </strong>
<div class="card-header-actions">
<a
@@ -30,7 +30,7 @@
<CCol>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
<CIcon name="justify-center"/> <strong> Jumbotron </strong>
<small>with slots</small>
</CCardHeader>
<CCardBody>
@@ -56,7 +56,7 @@
<CCol>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
<CIcon name="justify-center"/> <strong> Jumbotron </strong>
<small>colors</small>
</CCardHeader>
<CCardBody>
src/views/base/ListGroups.vue
+10 -10
View File
@@ -4,7 +4,7 @@
<CCol md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<CIcon name="justify-center"/>
<strong> Bootstrap list group </strong>
<div class="card-header-actions">
<a
@@ -31,7 +31,7 @@
<CCol md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> List group </strong><small>active items</small>
<CIcon name="justify-center"/><strong> List group </strong><small>active items</small>
</CCardHeader>
<CCardBody>
<CListGroup>
@@ -49,7 +49,7 @@
<CCol md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<CIcon name="justify-center"/>
<strong> List group </strong>
<small>disabled items</small>
</CCardHeader>
@@ -67,7 +67,7 @@
<CCol md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<CIcon name="justify-center"/>
<strong> List group </strong>
<small>actionable items</small>
</CCardHeader>
@@ -86,7 +86,7 @@
<CCol md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<CIcon name="justify-center"/>
<strong> List group </strong>
<small>buttons</small>
</CCardHeader>
@@ -103,7 +103,7 @@
<CCol md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<CIcon name="justify-center"/>
<strong> List group </strong>
<small>with badges</small>
</CCardHeader>
@@ -136,7 +136,7 @@
<CCol md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<CIcon name="justify-center"/>
<strong> List group </strong>
<small>colors</small>
</CCardHeader>
@@ -158,7 +158,7 @@
<CCol md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<CIcon name="justify-center"/>
<strong> List group </strong>
<small>colors active</small>
</CCardHeader>
@@ -182,7 +182,7 @@
<CCol col="12">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<CIcon name="justify-center"/>
<strong> List group </strong>
<small>inside cards</small>
</CCardHeader>
@@ -223,7 +223,7 @@
<CCol md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> List group </strong><small>custom content</small>
<CIcon name="justify-center"/><strong> List group </strong><small>custom content</small>
</CCardHeader>
<CCardBody>
<CListGroup>
src/views/base/Navbars.vue
+6 -6
View File
@@ -2,7 +2,7 @@
<div>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<CIcon name="justify-center"/>
<strong> Bootstrap Navbar </strong>
<div class="card-header-actions">
<a
@@ -67,7 +67,7 @@
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
<CIcon name="justify-center"/> <strong> Navbar </strong>
<small>brand</small>
</CCardHeader>
<CCardBody>
@@ -82,7 +82,7 @@
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
<CIcon name="justify-center"/> <strong> Navbar </strong>
<small>text</small>
</CCardHeader>
<CCardBody>
@@ -99,7 +99,7 @@
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
<CIcon name="justify-center"/> <strong> Navbar </strong>
<small>dropdown</small>
</CCardHeader>
<CCardBody>
@@ -135,7 +135,7 @@
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
<CIcon name="justify-center"/> <strong> Navbar </strong>
<small>form</small>
</CCardHeader>
<CCardBody>
@@ -153,7 +153,7 @@
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
<CIcon name="justify-center"/> <strong> Navbar </strong>
<small>input group</small>
</CCardHeader>
<CCardBody>
src/views/base/Navs.vue
+9 -9
View File
@@ -2,7 +2,7 @@
<div>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs</strong>
<CIcon name="justify-center"/><strong> Bootstrap Navs</strong>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Nav"
@@ -25,14 +25,14 @@
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<CIcon name="justify-center"/>
<strong> Bootstrap Navs </strong>
<small>icons</small>
</CCardHeader>
<CCardBody>
<CNav>
<CNavItem active>
<i class="cui-basket-loaded"></i>
<CIcon name="basket"/>
</CNavItem>
<CNavItem>
Link
@@ -46,7 +46,7 @@
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<CIcon name="justify-center"/>
<strong> Bootstrap Navs </strong>
<small>tab style</small>
</CCardHeader>
@@ -67,7 +67,7 @@
</CCard>
<CCard>
<CCardHeader @click="item++">
<i class="fa fa-align-justify"></i>
<CIcon name="justify-center"/>
<strong> Bootstrap Navs </strong>
<small>pill style</small>
</CCardHeader>
@@ -82,7 +82,7 @@
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<CIcon name="justify-center"/>
<strong> Bootstrap Navs </strong>
<small>fill tabs</small>
</CCardHeader>
@@ -97,7 +97,7 @@
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<CIcon name="justify-center"/>
<strong> Bootstrap Navs </strong>
<small>justified tabs</small>
</CCardHeader>
@@ -112,7 +112,7 @@
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<CIcon name="justify-center"/>
<strong> Bootstrap Navs </strong>
<small>dropdown support</small>
</CCardHeader>
@@ -137,7 +137,7 @@
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<CIcon name="justify-center"/>
<strong> Bootstrap Navs </strong>
<small>vertical variation</small>
</CCardHeader>
src/views/base/Paginations.vue
+2 -2
View File
@@ -2,7 +2,7 @@
<div>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<CIcon name="justify-center"/>
<strong> Responsive bootstrap Pagination</strong>
<div class="card-header-actions">
<a
@@ -47,7 +47,7 @@
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<CIcon name="justify-center"/>
<strong> Pagination </strong>
<small>alignment</small>
</CCardHeader>
src/views/base/Popovers.vue
+2 -2
View File
@@ -2,7 +2,7 @@
<div>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<CIcon name="justify-center"/>
<strong> Bootstrap Popovers</strong>
<div class="card-header-actions">
<a
@@ -49,7 +49,7 @@
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<CIcon name="justify-center"/>
<strong> Popovers </strong>
<small>placement</small>
</CCardHeader>
src/views/base/ProgressBars.vue
+8 -8
View File
@@ -2,7 +2,7 @@
<div>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<CIcon name="justify-center"/>
<strong> Bootstrap Progress</strong>
<div class="card-header-actions">
<a
@@ -33,7 +33,7 @@
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Progress </strong><small>labels</small>
<CIcon name="justify-center"/> <strong> Progress </strong><small>labels</small>
</CCardHeader>
<CCardBody>
<h6>No label</h6>
@@ -50,7 +50,7 @@
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<CIcon name="justify-center"/>
<strong> Progress </strong>
<small>width</small>
</CCardHeader>
@@ -65,7 +65,7 @@
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<CIcon name="justify-center"/>
<strong> Progress </strong>
<small>height</small>
</CCardHeader>
@@ -80,7 +80,7 @@
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<CIcon name="justify-center"/>
<strong> Progress </strong>
<small>colors</small>
</CCardHeader>
@@ -99,7 +99,7 @@
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<CIcon name="justify-center"/>
<strong> Progress </strong>
<small>striped</small>
</CCardHeader>
@@ -135,7 +135,7 @@
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<CIcon name="justify-center"/>
<strong> Progress </strong>
<small>animated</small>
</CCardHeader>
@@ -174,7 +174,7 @@
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<CIcon name="justify-center"/>
<strong> Progress </strong>
<small>multiple bars</small>
</CCardHeader>
src/views/base/Table.vue
+24 -19
View File
@@ -1,23 +1,28 @@
<template>
<CCard :header="caption" body-wrapper>
<CDataTable
:hover="hover"
:striped="striped"
:bordered="bordered"
:small="small"
:fixed="fixed"
:items="items"
:fields="fields"
:items-per-page="small ? 10 : 5"
:dark="dark"
pagination
>
<template #status="{item}">
<td>
<CBadge :color="getBadge(item.status)">{{item.status}}</CBadge>
</td>
</template>
</CDataTable>
<CCard>
<CCardHeader>
<CIcon name="justify-center"/> {{caption}}
</CCardHeader>
<CCardBody>
<CDataTable
:hover="hover"
:striped="striped"
:bordered="bordered"
:small="small"
:fixed="fixed"
:items="items"
:fields="fields"
:items-per-page="small ? 10 : 5"
:dark="dark"
pagination
>
<template #status="{item}">
<td>
<CBadge :color="getBadge(item.status)">{{item.status}}</CBadge>
</td>
</template>
</CDataTable>
</CCardBody>
</CCard>
</template>
src/views/base/Tables.vue
+6 -6
View File
@@ -4,7 +4,7 @@
<CCol lg="6">
<CTableWrapper
:items="getShuffledUsersData()"
caption="<i class='fa fa-align-justify'></i> Simple Table"
caption="Simple Table"
/>
</CCol>
@@ -12,7 +12,7 @@
<CTableWrapper
:items="getShuffledUsersData()"
striped
caption="<i class='fa fa-align-justify'></i> Striped Table"
caption="Striped Table"
/>
</CCol>
</CRow>
@@ -22,7 +22,7 @@
<CTableWrapper
:items="getShuffledUsersData()"
small
caption="<i class='fa fa-align-justify'></i> Condensed Table"
caption="Condensed Table"
/>
</CCol>
@@ -31,7 +31,7 @@
:items="getShuffledUsersData()"
fixed
bordered
caption="<i class='fa fa-align-justify'></i> Bordered Table"
caption="Bordered Table"
/>
</CCol>
</CRow>
@@ -45,7 +45,7 @@
bordered
small
fixed
caption="<i class='fa fa-align-justify'></i> Combined All Table"
caption="Combined All Table"
/>
</CCol>
</CRow>
@@ -60,7 +60,7 @@
small
fixed
dark
caption="<i class='fa fa-align-justify'></i> Combined All Table"
caption="Combined All Table"
/>
</CCol>
</CRow>
src/views/base/Tabs.vue
+9 -9
View File
@@ -84,7 +84,7 @@
<CTabs>
<CTab active>
<template slot="title">
<i class="cui-calculator"></i>
<CIcon name="calculator"/>
</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
@@ -94,7 +94,7 @@
</CTab>
<CTab>
<template slot="title">
<i class="cui-basket-loaded"></i>
<CIcon name="basket"/>
</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
@@ -104,7 +104,7 @@
</CTab>
<CTab>
<template slot="title">
<i class="cui-chart-piechart"></i>
<CIcon name="chart-pie"/>
</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
@@ -125,7 +125,7 @@
<CTabs add-tab-classes="mt-1">
<CTab active>
<template slot="title">
<i class="cui-calculator"></i> {{tabs[0]}}
<CIcon name="calculator"/> {{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
@@ -135,7 +135,7 @@
</CTab>
<CTab>
<template slot="title">
<i class="cui-basket-loaded"></i> {{tabs[1]}}
<CIcon name="basket"/> {{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
@@ -145,7 +145,7 @@
</CTab>
<CTab>
<template slot="title">
<i class="cui-chart-piechart"></i> {{tabs[2]}}
<CIcon name="chart-pie"/> {{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
@@ -166,7 +166,7 @@
<CTabs variant="pills" vertical>
<CTab active>
<template slot="title">
<i class="cui-calculator"></i> {{tabs[0]}}
<CIcon name="calculator"/> {{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
@@ -176,7 +176,7 @@
</CTab>
<CTab>
<template slot="title">
<i class="cui-basket-loaded"></i> {{tabs[1]}}
<CIcon name="basket"/> {{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
@@ -186,7 +186,7 @@
</CTab>
<CTab>
<template slot="title">
<i class="cui-chart-piechart"></i> {{tabs[2]}}
<CIcon name="chart-pie"/> {{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/base/Tooltips.vue
+2 -2
View File
@@ -2,7 +2,7 @@
<div>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<CIcon name="justify-center"/>
<strong> Bootstrap Tooltips </strong>
<small><code>v-c-tooltip</code> directive</small>
<div class="card-header-actions">
@@ -43,7 +43,7 @@
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<CIcon name="justify-center"/>
<strong> Tooltips </strong>
<small>placement</small>
</CCardHeader>
src/views/buttons/ButtonGroups.vue
+8 -8
View File
@@ -3,7 +3,7 @@
<CCol col="12">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<CIcon name="justify-center"/>
<strong> Bootstrap button group</strong>
<div class="card-header-actions">
<a
@@ -41,7 +41,7 @@
<CCol col="12">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<CIcon name="justify-center"/>
<strong> Button group </strong>sizing
</CCardHeader>
<CCardBody>
@@ -70,7 +70,7 @@
<CCol col="12">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Button group </strong>dropdown support
<CIcon name="justify-center"/><strong> Button group </strong>dropdown support
</CCardHeader>
<CCardBody>
<div>
@@ -98,7 +98,7 @@
<CCol col="12">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<CIcon name="justify-center"/>
<strong> Button group </strong>vertical variation
</CCardHeader>
<CCardBody>
@@ -115,7 +115,7 @@
<CCol col="12">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<CIcon name="justify-center"/>
<strong> Button toolbar </strong>
<small>with button groups</small>
<!-- <div class="card-header-actions">
@@ -152,17 +152,17 @@
<CInput
class="mb-0 w-25 mx-1"
size="sm"
prepend-html="$"
append-html=".00"
append=".00"
value="100"
prepend="$"
/>
<CSelect
class="mb-0 w-25 mx-1"
size="sm"
prepend-html="Size"
value="Medium"
:options="['Large','Medium','Small']"
custom
prepend="Size"
/>
<CButtonGroup size="sm" class="mx-1">
<CButton color="secondary">Save</CButton>
src/views/buttons/Dropdowns.vue
+6 -6
View File
@@ -4,7 +4,7 @@
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<CIcon name="justify-center"/>
<strong> Bootstrap Dropdown</strong>
<div class="card-header-actions">
<a
@@ -69,7 +69,7 @@
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<CIcon name="justify-center"/>
<strong> Dropdown </strong>
<small>positioning</small>
</CCardHeader>
@@ -140,7 +140,7 @@
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<CIcon name="justify-center"/>
<strong> Dropdown </strong>
<small>hidden caret</small>
</CCardHeader>
@@ -165,7 +165,7 @@
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<CIcon name="justify-center"/>
<strong> Dropdown </strong>
<small>sizing</small>
</CCardHeader>
@@ -222,7 +222,7 @@
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<CIcon name="justify-center"/>
<strong> Dropdown </strong>
<small>headers and accessibility</small>
</CCardHeader>
@@ -254,7 +254,7 @@
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<CIcon name="justify-center"/>
<strong> Dropdown </strong>
<small><code>color</code></small>
</CCardHeader>
src/views/buttons/StandardButtons.vue
+5 -5
View File
@@ -604,27 +604,27 @@
<CRow class="align-items-center">
<CCol sm xs="12" class="text-center mt-3">
<CButton color="primary">
<i class="cui-lightbulb"></i>&nbsp;Standard Button
<CIcon name="lightbulb"/>&nbsp;Standard Button
</CButton>
</CCol>
<CCol sm xs="12" class="text-center mt-3">
<CButton color="secondary" variant="outline">
<i class="cui-lightbulb"></i>&nbsp;Outline Button
<CIcon name="lightbulb"/>&nbsp;Outline Button
</CButton>
</CCol>
<CCol sm xs="12" class="text-center mt-3">
<CButton color="success">
<i class="cui-lightbulb"></i>&nbsp;Ghost Button
<CIcon name="lightbulb"/>&nbsp;Ghost Button
</CButton>
</CCol>
<CCol sm xs="12" class="text-center mt-3">
<CButton color="warning" square>
<i class="cui-lightbulb"></i>&nbsp;Square Button
<CIcon name="lightbulb"/>&nbsp;Square Button
</CButton>
</CCol>
<CCol sm xs="12" class="text-center mt-3">
<CButton color="danger" shape="pill">
<i class="cui-lightbulb"></i>&nbsp;Pill Button
<CIcon name="lightbulb"/>&nbsp;Pill Button
</CButton>
</CCol>
</CRow>
src/views/icons/Brands.vue
+1 -1
View File
@@ -2,7 +2,7 @@
<div>
<CCard>
<CCardHeader>
<i class="cui-globe"></i>Font Awesome brand icons
<CIcon name="globe-alt"/>Font Awesome brand icons
</CCardHeader>
<CCardBody>
<CRow class="text-center">
src/views/icons/Flags.vue
+1 -1
View File
@@ -2,7 +2,7 @@
<div>
<CCard>
<CCardHeader>
<i class="cui-globe"></i> Flags
<CIcon name="globe-alt"/> Flags
</CCardHeader>
<CCardBody>
<CRow class="text-center">
src/views/notifications/Alerts.vue
+5 -5
View File
@@ -3,7 +3,7 @@
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<CIcon name="justify-center"/>
<strong> Bootstrap Alert</strong>
<div class="card-header-actions">
<a
@@ -34,7 +34,7 @@
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> Alert
<CIcon name="justify-center"/> Alert
<small> use <code>.alert-link</code> to provide links</small>
</CCardHeader>
<CCardBody>
@@ -72,7 +72,7 @@
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> Alerts <small>with additional content</small>
<CIcon name="justify-center"/> Alerts <small>with additional content</small>
</CCardHeader>
<CCardBody>
<CAlert show color="success">
@@ -93,7 +93,7 @@
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> Alerts
<CIcon name="justify-center"/> Alerts
<small>dismissible</small>
</CCardHeader>
<CCardBody>
@@ -131,7 +131,7 @@
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> Alerts
<CIcon name="justify-center"/> Alerts
<small>auto dismissible</small>
</CCardHeader>
<CCardBody>
src/views/notifications/Badges.vue
+4 -4
View File
@@ -3,7 +3,7 @@
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<CIcon name="justify-center"/>
<strong> Bootstrap Badge</strong>
<div class="card-header-actions">
<a
@@ -34,7 +34,7 @@
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> Badge
<CIcon name="justify-center"/> Badge
<small>contextual variations</small>
</CCardHeader>
<CCardBody>
@@ -50,7 +50,7 @@
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> Badge
<CIcon name="justify-center"/> Badge
<small>shape="pill"</small>
</CCardHeader>
<CCardBody>
@@ -66,7 +66,7 @@
</CCard>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> Badge
<CIcon name="justify-center"/> Badge
<small>actionable</small>
</CCardHeader>
<CCardBody>
src/views/notifications/Modals.vue
+1 -1
View File
@@ -5,7 +5,7 @@
<CCol col="12">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> Bootstrap Modals
<CIcon name="justify-center"/> Bootstrap Modals
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Modal"
src/views/pages/Login.vue
+6 -4
View File
@@ -9,16 +9,18 @@
<h1>Login</h1>
<p class="text-muted">Sign In to your account</p>
<CInput
prependHtml="<i class='cui-user'></i>"
placeholder="Username"
autocomplete="username email"
/>
>
<template #prepend-content><CIcon name="user"/></template>
</CInput>
<CInput
prependHtml="<i class='cui-lock-locked'></i>"
placeholder="Password"
type="password"
autocomplete="curent-password"
/>
>
<template #prepend-content><CIcon name="lock-locked"/></template>
</CInput>
<CRow>
<CCol col="6">
<CButton color="primary" class="px-4">Login</CButton>
src/views/pages/Page404.vue
+1 -1
View File
@@ -10,9 +10,9 @@
</div>
<CInput
class="mb-3"
prependHtml="<i class='cui-magnifying-glass'></i>"
placeholder="What are you looking for?"
>
<template #prepend-content><CIcon name="magnifying-glass"/></template>
<template #append>
<CButton color="info">Search</CButton>
</template>
src/views/pages/Page500.vue
+1 -1
View File
@@ -9,9 +9,9 @@
</div>
<CInput
class="mb-3"
prependHtml="<i class='cui-magnifying-glass'></i>"
placeholder="What are you looking for?"
>
<template #prepend-content><CIcon name="magnifying-glass"/></template>
<template #append>
<CButton color="info">Search</CButton>
</template>
src/views/pages/Register.vue
+10 -7
View File
@@ -9,27 +9,30 @@
<p class="text-muted">Create your account</p>
<CInput
placeholder="Username"
prependHtml="<i class='cui-user'></i>"
autocomplete="username"
/>
>
<template #prepend-content><CIcon name="user"/></template>
</CInput>
<CInput
placeholder="Email"
prepend-html="@"
autocomplete="email"
prepend="@"
/>
<CInput
placeholder="Password"
type="password"
prependHtml="<i class='cui-lock-locked'></i>"
autocomplete="new-password"
/>
>
<template #prepend-content><CIcon name="lock-locked"/></template>
</CInput>
<CInput
placeholder="Repeat password"
type="password"
prependHtml="<i class='cui-lock-locked'></i>"
autocomplete="new-password"
class="mb-4"
/>
>
<template #prepend-content><CIcon name="lock-locked"/></template>
</CInput>
<CButton color="success" block>Create Account</CButton>
</CForm>
</CCardBody>
src/views/theme/Colors.vue
+2 -2
View File
@@ -2,7 +2,7 @@
<div>
<CCard>
<CCardHeader>
<i class="cui-drop"></i> Theme colors
<CIcon name="drop"/> Theme colors
</CCardHeader>
<CCardBody>
<CRow>
@@ -21,7 +21,7 @@
</CCard>
<CCard>
<CCardHeader>
<i class="cui-drop"></i> Grays
<CIcon name="drop"/> Grays
</CCardHeader>
<CCardBody>
<CRow>
src/views/widgets/WidgetsDropdown.vue
+4 -5
View File
@@ -9,7 +9,7 @@
placement="bottom-end"
>
<template #toggler-content>
<i class="cui-settings"></i>
<CIcon name="settings"/>
</template>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
@@ -38,10 +38,9 @@
color="transparent p-0"
placement="bottom-end"
:caret="false"
buttonHtml="<i class='cui-location-pin'></i>"
>
<template #toggler-content>
<i class="cui-location-pin"></i>
<CIcon name="location-pin"/>
</template>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
@@ -76,7 +75,7 @@
placement="bottom-end"
>
<template #toggler-content>
<i class="cui-settings"></i>
<CIcon name="settings"/>
</template>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
@@ -110,7 +109,7 @@
placement="bottom-end"
>
<template #toggler-content>
<i class="cui-settings"></i>
<CIcon name="settings"/>
</template>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>