refactor: add prefixes to icons

This commit is contained in:
woothu
2019-11-18 11:43:07 +01:00
parent 07a6b95380
commit 0bf951c64d
68 changed files with 5116 additions and 8553 deletions
+144 -134
View File
@@ -1,151 +1,161 @@
import {
facebook,
twitter,
linkedin,
flickr,
tumblr,
xing,
github,
stackOverflow,
youtube,
dribbble,
instagram,
pinterest,
vk,
yahoo,
behance,
reddit,
vimeo,
ccMastercard, ccVisa, stripe, paypal, googleWallet, ccAmex
cibFacebook,
cibTwitter,
cibLinkedin,
cibFlickr,
cibTumblr,
cibXing,
cibGithub,
cibStackOverflow,
cibYoutube,
cibDribbble,
cibInstagram,
cibPinterest,
cibVk,
cibYahoo,
cibBehance,
cibReddit,
cibVimeo,
cibCcMastercard,
cibCcVisa,
cibStripe,
cibPaypal,
cibGooglePay,
cibCcAmex
} from '@coreui/icons'
import {
US,
BR,
IN,
FR,
ES,
PL
cifUs,
cifBr,
cifIn,
cifFr,
cifEs,
cifPl
} 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
cilArrowRight,
cilBan,
cilBasket,
cilBell,
cilCalculator,
cilCalendar,
cilCloudDownload,
cilChartPie,
cilCheck,
cilChevronBottom,
cilChevronTop,
// cilCircleCheck,
cilCommentSquare,
cilCursor,
cilDrop,
cilDollar,
cilEnvelopeClosed,
cilEnvelopeOpen,
cilEuro,
cilGlobeAlt,
cilFile,
cilJustifyCenter,
cilLaptop,
cilLayers,
cilLightbulb,
cilList,
cilLocationPin,
cilLockLocked,
cilMagnifyingGlass,
cilMoon,
cilPencil,
cilPeople,
cilPuzzle,
cilSettings,
cilShieldAlt,
cilSpeech,
cilSpeedometer,
cilStar,
cilTask,
cilUser,
cilUserFemale,
cilUserFollow,
cilXCircle
} from '@coreui/icons'
export const iconsSet = Object.assign(
{},
{
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
cilArrowRight,
cilBan,
cilBasket,
cilBell,
cilCalculator,
cilCalendar,
cilCloudDownload,
cilChartPie,
cilCheck,
cilChevronBottom,
cilChevronTop,
// cilCircleCheck,
cilCommentSquare,
cilCursor,
cilDrop,
cilDollar,
cilEnvelopeClosed,
cilEnvelopeOpen,
cilEuro,
cilGlobeAlt,
cilFile,
cilJustifyCenter,
cilLaptop,
cilLayers,
cilLightbulb,
cilList,
cilLocationPin,
cilLockLocked,
cilMagnifyingGlass,
cilMoon,
cilPencil,
cilPeople,
cilPuzzle,
cilSettings,
cilShieldAlt,
cilSpeech,
cilSpeedometer,
cilStar,
cilTask,
cilUser,
cilUserFemale,
cilUserFollow,
cilXCircle
},
{
US,
BR,
IN,
FR,
ES,
PL
cifUs,
cifBr,
cifIn,
cifFr,
cifEs,
cifPl
},
{
facebook,
twitter,
linkedin,
flickr,
tumblr,
xing,
github,
stackOverflow,
youtube,
dribbble,
instagram,
pinterest,
vk,
yahoo,
behance,
reddit,
vimeo,
ccMastercard, ccVisa, stripe, paypal, googleWallet, ccAmex
cibFacebook,
cibTwitter,
cibLinkedin,
cibFlickr,
cibTumblr,
cibXing,
cibGithub,
cibStackOverflow,
cibYoutube,
cibDribbble,
cibInstagram,
cibPinterest,
cibVk,
cibYahoo,
cibBehance,
cibReddit,
cibVimeo,
cibCcMastercard,
cibCcVisa,
cibStripe,
cibPaypal,
cibGooglePay,
cibCcAmex
}
)
+3 -3
View File
@@ -38,17 +38,17 @@
<CHeaderNav class="mr-4">
<CHeaderNavItem class="d-md-down-none mx-2">
<CHeaderNavLink>
<CIcon name="bell"/>
<CIcon name="cil-bell"/>
</CHeaderNavLink>
</CHeaderNavItem>
<CHeaderNavItem class="d-md-down-none mx-2">
<CHeaderNavLink>
<CIcon name="list"/>
<CIcon name="cil-list"/>
</CHeaderNavLink>
</CHeaderNavItem>
<CHeaderNavItem class="d-md-down-none mx-2">
<CHeaderNavLink>
<CIcon name="envelope-open"/>
<CIcon name="cil-envelope-open"/>
</CHeaderNavLink>
</CHeaderNavItem>
<TheHeaderDropdownAccnt/>
+10 -10
View File
@@ -19,19 +19,19 @@
<strong>Account</strong>
</CDropdownHeader>
<CDropdownItem>
<CIcon name="bell"/> Updates
<CIcon name="cil-bell"/> Updates
<CBadge color="info" class="ml-auto">{{ itemsCount }}</CBadge>
</CDropdownItem>
<CDropdownItem>
<CIcon name="envelope-open" /> Messages
<CIcon name="cil-envelope-open" /> Messages
<CBadge color="success" class="ml-auto">{{ itemsCount }}</CBadge>
</CDropdownItem>
<CDropdownItem>
<CIcon name="task" /> Tasks
<CIcon name="cil-task" /> Tasks
<CBadge color="danger" class="ml-auto">{{ itemsCount }}</CBadge>
</CDropdownItem>
<CDropdownItem>
<CIcon name="comment-square" /> Comments
<CIcon name="cil-comment-square" /> Comments
<CBadge color="warning" class="ml-auto">{{ itemsCount }}</CBadge>
</CDropdownItem>
<CDropdownHeader
@@ -42,25 +42,25 @@
<strong>Settings</strong>
</CDropdownHeader>
<CDropdownItem>
<CIcon name="user" /> Profile
<CIcon name="cil-user" /> Profile
</CDropdownItem>
<CDropdownItem>
<CIcon name="settings" /> Settings
<CIcon name="cil-settings" /> Settings
</CDropdownItem>
<CDropdownItem>
<CIcon name="dollar" /> Payments
<CIcon name="cil-dollar" /> Payments
<CBadge color="secondary" class="ml-auto">{{ itemsCount }}</CBadge>
</CDropdownItem>
<CDropdownItem>
<CIcon name="file" /> Projects
<CIcon name="cil-file" /> Projects
<CBadge color="primary" class="ml-auto">{{ itemsCount }}</CBadge>
</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem>
<CIcon name="shield-alt" /> Lock Account
<CIcon name="cil-shield-alt" /> Lock Account
</CDropdownItem>
<CDropdownItem>
<CIcon name="lock-locked" /> Logout
<CIcon name="cil-lock-locked" /> Logout
</CDropdownItem>
</CDropdown>
</template>
+42 -42
View File
@@ -6,7 +6,7 @@ export default [
_name: 'CSidebarNavItem',
name: 'Dashboard',
to: '/dashboard',
icon: 'speedometer',
icon: 'cil-speedometer',
badge: {
color: 'primary',
text: 'NEW'
@@ -20,13 +20,13 @@ export default [
_name: 'CSidebarNavItem',
name: 'Colors',
to: '/theme/colors',
icon: 'drop'
icon: 'cil-drop'
},
{
_name: 'CSidebarNavItem',
name: 'Typography',
to: '/theme/typography',
icon: 'pencil'
icon: 'cil-pencil'
},
{
_name: 'CSidebarNavTitle',
@@ -36,87 +36,87 @@ export default [
_name: 'CSidebarNavDropdown',
name: 'Base',
route: '/base',
icon: 'puzzle',
icon: 'cil-puzzle',
items: [
{
name: 'Breadcrumbs',
to: '/base/breadcrumbs',
icon: 'puzzle'
icon: 'cil-puzzle'
},
{
name: 'Cards',
to: '/base/cards',
icon: 'puzzle'
icon: 'cil-puzzle'
},
{
name: 'Carousels',
to: '/base/carousels',
icon: 'puzzle'
icon: 'cil-puzzle'
},
{
name: 'Collapses',
to: '/base/collapses',
icon: 'puzzle'
icon: 'cil-puzzle'
},
{
name: 'Forms',
to: '/base/forms',
icon: 'puzzle'
icon: 'cil-puzzle'
},
{
name: 'Jumbotrons',
to: '/base/jumbotrons',
icon: 'puzzle'
icon: 'cil-puzzle'
},
{
name: 'List Groups',
to: '/base/list-groups',
icon: 'puzzle'
icon: 'cil-puzzle'
},
{
name: 'Navs',
to: '/base/navs',
icon: 'puzzle'
icon: 'cil-puzzle'
},
{
name: 'Navbars',
to: '/base/navbars',
icon: 'puzzle'
icon: 'cil-puzzle'
},
{
name: 'Paginations',
to: '/base/paginations',
icon: 'puzzle'
icon: 'cil-puzzle'
},
{
name: 'Popovers',
to: '/base/popovers',
icon: 'puzzle'
icon: 'cil-puzzle'
},
{
name: 'Progress Bars',
to: '/base/progress-bars',
icon: 'puzzle'
icon: 'cil-puzzle'
},
{
name: 'Switches',
to: '/base/switches',
icon: 'puzzle'
icon: 'cil-puzzle'
},
{
name: 'Tables',
to: '/base/tables',
icon: 'puzzle'
icon: 'cil-puzzle'
},
{
name: 'Tabs',
to: '/base/tabs',
icon: 'puzzle'
icon: 'cil-puzzle'
},
{
name: 'Tooltips',
to: '/base/tooltips',
icon: 'puzzle'
icon: 'cil-puzzle'
}
]
},
@@ -124,27 +124,27 @@ export default [
_name: 'CSidebarNavDropdown',
name: 'Buttons',
route: '/buttons',
icon: 'cursor',
icon: 'cil-cursor',
items: [
{
name: 'Buttons',
to: '/buttons/standard-buttons',
icon: 'cursor'
icon: 'cil-cursor'
},
{
name: 'Button Dropdowns',
to: '/buttons/dropdowns',
icon: 'cursor'
icon: 'cil-cursor'
},
{
name: 'Button Groups',
to: '/buttons/button-groups',
icon: 'cursor'
icon: 'cil-cursor'
},
{
name: 'Brand Buttons',
to: '/buttons/brand-buttons',
icon: 'cursor'
icon: 'cil-cursor'
}
]
},
@@ -152,18 +152,18 @@ export default [
_name: 'CSidebarNavItem',
name: 'Charts',
to: '/charts',
icon: 'chart-pie'
icon: 'cil-chart-pie'
},
{
_name: 'CSidebarNavDropdown',
name: 'Icons',
route: '/icons',
icon: 'star',
icon: 'cil-star',
items: [
{
name: 'CoreUI Icons',
to: '/icons/coreui-icons',
icon: 'star',
icon: 'cil-star',
badge: {
color: 'info',
text: 'NEW'
@@ -172,12 +172,12 @@ export default [
{
name: 'Brands',
to: '/icons/brands',
icon: 'star'
icon: 'cil-star'
},
{
name: 'Flags',
to: '/icons/flags',
icon: 'star'
icon: 'cil-star'
}
]
},
@@ -185,22 +185,22 @@ export default [
_name: 'CSidebarNavDropdown',
name: 'Notifications',
route: '/notifications',
icon: 'bell',
icon: 'cil-bell',
items: [
{
name: 'Alerts',
to: '/notifications/alerts',
icon: 'bell'
icon: 'cil-bell'
},
{
name: 'Badges',
to: '/notifications/badges',
icon: 'bell'
icon: 'cil-bell'
},
{
name: 'Modals',
to: '/notifications/modals',
icon: 'bell'
icon: 'cil-bell'
}
]
},
@@ -208,7 +208,7 @@ export default [
_name: 'CSidebarNavItem',
name: 'Widgets',
to: '/widgets',
icon: 'calculator',
icon: 'cil-calculator',
badge: {
color: 'primary',
text: 'NEW',
@@ -226,27 +226,27 @@ export default [
_name: 'CSidebarNavDropdown',
name: 'Pages',
route: '/pages',
icon: 'star',
icon: 'cil-star',
items: [
{
name: 'Login',
to: '/pages/login',
icon: 'star'
icon: 'cil-star'
},
{
name: 'Register',
to: '/pages/register',
icon: 'star'
icon: 'cil-star'
},
{
name: 'Error 404',
to: '/pages/404',
icon: 'star'
icon: 'cil-star'
},
{
name: 'Error 500',
to: '/pages/500',
icon: 'star'
icon: 'cil-star'
}
]
},
@@ -254,7 +254,7 @@ export default [
_name: 'CSidebarNavItem',
name: 'Download CoreUI',
href: 'http://coreui.io/vue/',
icon: { name: 'cloud-download', class: 'text-warning' },
icon: { name: 'cil-cloud-download', class: 'text-warning' },
_class: 'bg-success text-white',
target: '_blank'
},
@@ -262,7 +262,7 @@ export default [
_name: 'CSidebarNavItem',
name: 'Try CoreUI PRO',
href: 'http://coreui.io/pro/vue/',
icon: 'layers',
icon: 'cil-layers',
_class: 'bg-danger text-white',
target: '_blank'
}
+20 -20
View File
@@ -10,7 +10,7 @@
</CCol>
<CCol sm="7" class="d-none d-md-block">
<CButton color="primary" class="float-right">
<CIcon name="cloud-download"/>
<CIcon name="cil-cloud-download"/>
</CButton>
<CButtonGroup class="float-right mr-3">
<CButton
@@ -269,7 +269,7 @@
<ul class="horizontal-bars type-2">
<div class="progress-group">
<div class="progress-group-header">
<CIcon name="user" class="progress-group-icon"/>
<CIcon name="cil-user" class="progress-group-icon"/>
<span class="title">Male</span>
<span class="ml-auto font-weight-bold">43%</span>
</div>
@@ -283,7 +283,7 @@
</div>
<div class="progress-group mb-5">
<div class="progress-group-header">
<CIcon name="user-female" class="progress-group-icon"/>
<CIcon name="cil-user-female" class="progress-group-icon"/>
<span class="title">Female</span>
<span class="ml-auto font-weight-bold">37%</span>
</div>
@@ -297,7 +297,7 @@
</div>
<div class="progress-group">
<div class="progress-group-header">
<CIcon name="globe-alt" class="progress-group-icon"/>
<CIcon name="cil-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>
@@ -314,7 +314,7 @@
<div class="progress-group">
<div class="progress-group-header">
<CIcon
name="facebook"
name="cib-facebook"
height="17"
class="progress-group-icon"
/>
@@ -334,7 +334,7 @@
<div class="progress-group">
<div class="progress-group-header">
<CIcon
name="twitter"
name="cib-twitter"
height="17"
class="progress-group-icon"
/>
@@ -354,7 +354,7 @@
<div class="progress-group">
<div class="progress-group-header">
<CIcon
name="linkedin"
name="cib-linkedin"
height="17"
class="progress-group-icon"
/>
@@ -373,7 +373,7 @@
</div>
<div class="divider text-center">
<CButton color="link" size="sm" class="text-muted">
<CIcon name="options"/>
<CIcon name="cil-options"/>
</CButton>
</div>
</ul>
@@ -472,49 +472,49 @@ export default {
{
avatar: { url: 'img/avatars/1.jpg', status: 'success' },
user: { name: 'Yiorgos Avraamu', new: true, registered: 'Jan 1, 2015' },
country: { name: 'USA', flag: 'US' },
country: { name: 'USA', flag: 'cif-us' },
usage: { value: 50, period: 'Jun 11, 2015 - Jul 10, 2015' },
payment: { name: 'Mastercard', icon: 'cc-mastercard' },
payment: { name: 'Mastercard', icon: 'cib-cc-mastercard' },
activity: '10 sec ago'
},
{
avatar: { url: 'img/avatars/2.jpg', status: 'danger' },
user: { name: 'Avram Tarasios', new: false, registered: 'Jan 1, 2015' },
country: { name: 'Brazil', flag: 'BR' },
country: { name: 'Brazil', flag: 'cif-br' },
usage: { value: 22, period: 'Jun 11, 2015 - Jul 10, 2015' },
payment: { name: 'Visa', icon: 'cc-visa' },
payment: { name: 'Visa', icon: 'cib-cc-visa' },
activity: '5 minutes ago'
},
{
avatar: { url: 'img/avatars/3.jpg', status: 'warning' },
user: { name: 'Quintin Ed', new: true, registered: 'Jan 1, 2015' },
country: { name: 'India', flag: 'IN' },
country: { name: 'India', flag: 'cif-in' },
usage: { value: 74, period: 'Jun 11, 2015 - Jul 10, 2015' },
payment: { name: 'Stripe', icon: 'stripe' },
payment: { name: 'Stripe', icon: 'cib-stripe' },
activity: '1 hour ago'
},
{
avatar: { url: 'img/avatars/4.jpg', status: '' },
user: { name: 'Enéas Kwadwo', new: true, registered: 'Jan 1, 2015' },
country: { name: 'France', flag: 'FR' },
country: { name: 'France', flag: 'cif-fr' },
usage: { value: 98, period: 'Jun 11, 2015 - Jul 10, 2015' },
payment: { name: 'PayPal', icon: 'paypal' },
payment: { name: 'PayPal', icon: 'cib-paypal' },
activity: 'Last month'
},
{
avatar: { url: 'img/avatars/5.jpg', status: 'success' },
user: { name: 'Agapetus Tadeáš', new: true, registered: 'Jan 1, 2015' },
country: { name: 'Spain', flag: 'ES' },
country: { name: 'Spain', flag: 'cif-es' },
usage: { value: 22, period: 'Jun 11, 2015 - Jul 10, 2015' },
payment: { name: 'Google Wallet', icon: 'google-wallet' },
payment: { name: 'Google Wallet', icon: 'cib-google-pay' },
activity: 'Last week'
},
{
avatar: { url: 'img/avatars/6.jpg', status: 'danger' },
user: { name: 'Friderik Dávid', new: true, registered: 'Jan 1, 2015' },
country: { name: 'Poland', flag: 'PL' },
country: { name: 'Poland', flag: 'cif-pl' },
usage: { value: 43, period: 'Jun 11, 2015 - Jul 10, 2015' },
payment: { name: 'Amex', icon: 'cc-amex' },
payment: { name: 'Amex', icon: 'cib-cc-amex' },
activity: 'Last week'
}
],
+1 -1
View File
@@ -3,7 +3,7 @@
<CCol col>
<CCard>
<CCardHeader>
<CIcon name="justify-center"/><strong> Bootstrap Breadcrumb</strong>
<CIcon name="cil-justify-center"/><strong> Bootstrap Breadcrumb</strong>
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Breadcrumb"
+4 -4
View File
@@ -29,7 +29,7 @@
</CCol>
<CCol sm="6" md="4">
<CCard>
<CCardHeader><CIcon name="check"/> Card with icon</CCardHeader>
<CCardHeader><CIcon name="cil-check"/> Card with icon</CCardHeader>
<CCardBody>{{loremIpsum}}</CCardBody>
</CCard>
</CCol>
@@ -247,13 +247,13 @@
Card with header actions
<div class="card-header-actions">
<CLink href="#" class="card-header-action btn-setting">
<CIcon name="settings"/>
<CIcon name="cil-settings"/>
</CLink>
<CLink class="card-header-action btn-minimize" @click="isCollapsed = !isCollapsed">
<CIcon :name="`chevron-${isCollapsed ? 'bottom' : 'top'}`"/>
<CIcon :name="`cil-chevron-${isCollapsed ? 'bottom' : 'top'}`"/>
</CLink>
<CLink href="#" class="card-header-action btn-close" v-on:click="show = false">
<CIcon name="x-circle"/>
<CIcon name="cil-x-circle"/>
</CLink>
</div>
</CCardHeader>
+1 -1
View File
@@ -3,7 +3,7 @@
<CCol md="12" lg="7">
<CCard>
<CCardHeader>
<CIcon name="justify-center"/>
<CIcon name="cil-justify-center"/>
<strong> Bootstrap Carousel</strong>
<div class="card-header-actions">
<a
+1 -1
View File
@@ -3,7 +3,7 @@
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<CIcon name="justify-center"/>
<CIcon name="cil-justify-center"/>
<strong> Bootstrap Collapse </strong>
<div class="card-header-actions">
<a
+37 -37
View File
@@ -245,8 +245,8 @@
</CForm>
</CCardBody>
<CCardFooter>
<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>
<CButton type="submit" size="sm" color="primary"><CIcon name="cil-circle-check"/> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
</CCardFooter>
</CCard>
<CCard>
@@ -276,8 +276,8 @@
</CForm>
</CCardBody>
<CCardFooter>
<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>
<CButton type="submit" size="sm" color="primary"><CIcon name="cil-circle-check"/> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
</CCardFooter>
</CCard>
</CCol>
@@ -307,8 +307,8 @@
</CForm>
</CCardBody>
<CCardFooter>
<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>
<CButton type="submit" size="sm" color="primary"><CIcon name="cil-circle-check"/> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
</CCardFooter>
</CCard>
<CCard>
@@ -337,8 +337,8 @@
/>
</CCardBody>
<CCardFooter>
<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>
<CButton type="submit" size="sm" color="primary"><CIcon name="cil-circle-check"/> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
</CCardFooter>
</CForm>
</CCard>
@@ -399,8 +399,8 @@
</CRow>
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" color="primary"><CIcon name="user"/> Login</CButton>
<CButton type="reset" size="sm" color="danger"><CIcon name="ban"/> Reset</CButton>
<CButton type="submit" size="sm" color="primary"><CIcon name="cil-user"/> Login</CButton>
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
</CCardFooter>
</CCard>
<CCard>
@@ -427,8 +427,8 @@
/>
</CCardBody>
<CCardFooter>
<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>
<CButton type="submit" size="sm" color="primary"><CIcon name="cil-circle-check"/> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
</CCardFooter>
</CCard>
</CCol>
@@ -489,25 +489,25 @@
</CCardHeader>
<CCardBody>
<CInput placeholder="Username">
<template #prepend-content><CIcon name="user"/></template>
<template #prepend-content><CIcon name="cil-user"/></template>
</CInput>
<CInput
type="email"
placeholder="Email"
autocomplete="email"
>
<template #append-content><CIcon name="envelope-open"/></template>
<template #append-content><CIcon name="cil-envelope-open"/></template>
</CInput>
<CInput
placeholder="ex. $1.000.000"
append=".00"
>
<template #prepend-content><CIcon name="euro"/></template>
<template #prepend-content><CIcon name="cil-euro"/></template>
</CInput>
</CCardBody>
<CCardFooter>
<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>
<CButton type="submit" size="sm" color="success"><CIcon name="cil-circle-check"/> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
</CCardFooter>
</CCard>
</CCol>
@@ -520,7 +520,7 @@
<CInput placeholder="Username">
<template #prepend>
<CButton color="primary">
<CIcon name="magnifying-glass"/> Search
<CIcon name="cil-magnifying-glass"/> Search
</CButton>
</template>
</CInput>
@@ -539,16 +539,16 @@
autocomplete="email"
>
<template #prepend>
<CButton color="primary"><CIcon name="facebook" height="14"/></CButton>
<CButton color="primary"><CIcon name="cil-facebook" height="14"/></CButton>
</template>
<template #append>
<CButton color="primary"><CIcon name="twitter" height="14"/></CButton>
<CButton color="primary"><CIcon name="cil-twitter" height="14"/></CButton>
</template>
</CInput>
</CCardBody>
<CCardFooter>
<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>
<CButton type="submit" size="sm" color="success"><CIcon name="cil-circle-check"/> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
</CCardFooter>
</CCard>
</CCol>
@@ -620,8 +620,8 @@
</CInput>
</CCardBody>
<CCardFooter>
<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>
<CButton type="submit" size="sm" color="success"><CIcon name="cil-circle-check"/> Submit</CButton>
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
</CCardFooter>
</CCard>
</CCol>
@@ -693,21 +693,21 @@
<CCardBody>
<CForm>
<CInput prepend="Username">
<template #append-content><CIcon name="user"/></template>
<template #append-content><CIcon name="cil-user"/></template>
</CInput>
<CInput
type="email"
autocomplete="email"
prepend="Email"
>
<template #append-content><CIcon name="envelope-closed"/></template>
<template #append-content><CIcon name="cil-envelope-closed"/></template>
</CInput>
<CInput
type="password"
autocomplete="current-password"
prepend="Password"
>
<template #append-content><CIcon name="shield-alt"/></template>
<template #append-content><CIcon name="cil-shield-alt"/></template>
</CInput>
<div class="form-group form-actions">
<CButton type="submit" size="sm" color="primary">
@@ -726,21 +726,21 @@
<CCardBody>
<CForm>
<CInput placeholder="Username">
<template #append-content><CIcon name="user"/></template>
<template #append-content><CIcon name="cil-user"/></template>
</CInput>
<CInput
placeholder="Email"
type="email"
autocomplete="email"
>
<template #append-content><CIcon name="envelope-closed"/></template>
<template #append-content><CIcon name="cil-envelope-closed"/></template>
</CInput>
<CInput
placeholder="Password"
type="password"
autocomplete="current-password"
>
<template #append-content><CIcon name="shield-alt"/></template>
<template #append-content><CIcon name="cil-shield-alt"/></template>
</CInput>
<div class="form-group form-actions">
<CButton type="submit" class="btn btn-sm btn-secondary">
@@ -759,21 +759,21 @@
<CCardBody>
<CForm>
<CInput placeholder="Username">
<template #prepend-content><CIcon name="user"/></template>
<template #prepend-content><CIcon name="cil-user"/></template>
</CInput>
<CInput
placeholder="Email"
type="email"
autocomplete="email"
>
<template #prepend-content><CIcon name="envelope-closed"/></template>
<template #prepend-content><CIcon name="cil-envelope-closed"/></template>
</CInput>
<CInput
placeholder="Password"
type="password"
autocomplete="current-password"
>
<template #prepend-content><CIcon name="shield-alt"/></template>
<template #prepend-content><CIcon name="cil-shield-alt"/></template>
</CInput>
<div class="form-group form-actions">
<CButton type="submit" size="sm" color="success">
@@ -790,19 +790,19 @@
<transition name="fade">
<CCard v-if="show">
<CCardHeader>
<CIcon name="pencil"/> Form Elements
<CIcon name="cil-pencil"/> Form Elements
<div class="card-header-actions">
<CLink href="#" class="card-header-action btn-setting">
<CIcon name="settings"/>
<CIcon name="cil-settings"/>
</CLink>
<CLink
class="card-header-action btn-minimize"
@click="formCollapsed=!formCollapsed"
>
<CIcon :name="`chevron-${formCollapsed ? 'bottom' : 'top'}`"/>
<CIcon :name="`cil-chevron-${formCollapsed ? 'bottom' : 'top'}`"/>
</CLink>
<CLink href="#" class="card-header-action btn-close" v-on:click="show = !show">
<CIcon name="x-circle"/>
<CIcon name="cil-x-circle"/>
</CLink>
</div>
</CCardHeader>
+3 -3
View File
@@ -4,7 +4,7 @@
<CCol>
<CCard>
<CCardHeader>
<CIcon name="justify-center"/>
<CIcon name="cil-justify-center"/>
<strong> Bootstrap Jumbotron </strong>
<div class="card-header-actions">
<a
@@ -30,7 +30,7 @@
<CCol>
<CCard>
<CCardHeader>
<CIcon name="justify-center"/> <strong> Jumbotron </strong>
<CIcon name="cil-justify-center"/> <strong> Jumbotron </strong>
<small>with slots</small>
</CCardHeader>
<CCardBody>
@@ -56,7 +56,7 @@
<CCol>
<CCard>
<CCardHeader>
<CIcon name="justify-center"/> <strong> Jumbotron </strong>
<CIcon name="cil-justify-center"/> <strong> Jumbotron </strong>
<small>colors</small>
</CCardHeader>
<CCardBody>
+10 -10
View File
@@ -4,7 +4,7 @@
<CCol md="6">
<CCard>
<CCardHeader>
<CIcon name="justify-center"/>
<CIcon name="cil-justify-center"/>
<strong> Bootstrap list group </strong>
<div class="card-header-actions">
<a
@@ -31,7 +31,7 @@
<CCol md="6">
<CCard>
<CCardHeader>
<CIcon name="justify-center"/><strong> List group </strong><small>active items</small>
<CIcon name="cil-justify-center"/><strong> List group </strong><small>active items</small>
</CCardHeader>
<CCardBody>
<CListGroup>
@@ -49,7 +49,7 @@
<CCol md="6">
<CCard>
<CCardHeader>
<CIcon name="justify-center"/>
<CIcon name="cil-justify-center"/>
<strong> List group </strong>
<small>disabled items</small>
</CCardHeader>
@@ -67,7 +67,7 @@
<CCol md="6">
<CCard>
<CCardHeader>
<CIcon name="justify-center"/>
<CIcon name="cil-justify-center"/>
<strong> List group </strong>
<small>actionable items</small>
</CCardHeader>
@@ -86,7 +86,7 @@
<CCol md="6">
<CCard>
<CCardHeader>
<CIcon name="justify-center"/>
<CIcon name="cil-justify-center"/>
<strong> List group </strong>
<small>buttons</small>
</CCardHeader>
@@ -103,7 +103,7 @@
<CCol md="6">
<CCard>
<CCardHeader>
<CIcon name="justify-center"/>
<CIcon name="cil-justify-center"/>
<strong> List group </strong>
<small>with badges</small>
</CCardHeader>
@@ -136,7 +136,7 @@
<CCol md="6">
<CCard>
<CCardHeader>
<CIcon name="justify-center"/>
<CIcon name="cil-justify-center"/>
<strong> List group </strong>
<small>colors</small>
</CCardHeader>
@@ -158,7 +158,7 @@
<CCol md="6">
<CCard>
<CCardHeader>
<CIcon name="justify-center"/>
<CIcon name="cil-justify-center"/>
<strong> List group </strong>
<small>colors active</small>
</CCardHeader>
@@ -182,7 +182,7 @@
<CCol col="12">
<CCard>
<CCardHeader>
<CIcon name="justify-center"/>
<CIcon name="cil-justify-center"/>
<strong> List group </strong>
<small>inside cards</small>
</CCardHeader>
@@ -229,7 +229,7 @@
<CCol md="6">
<CCard>
<CCardHeader>
<CIcon name="justify-center"/><strong> List group </strong><small>custom content</small>
<CIcon name="cil-justify-center"/><strong> List group </strong><small>custom content</small>
</CCardHeader>
<CCardBody>
<CListGroup>
+6 -6
View File
@@ -2,7 +2,7 @@
<div>
<CCard>
<CCardHeader>
<CIcon name="justify-center"/>
<CIcon name="cil-justify-center"/>
<strong> Bootstrap Navbar </strong>
<div class="card-header-actions">
<a
@@ -67,7 +67,7 @@
</CCard>
<CCard>
<CCardHeader>
<CIcon name="justify-center"/> <strong> Navbar </strong>
<CIcon name="cil-justify-center"/> <strong> Navbar </strong>
<small>brand</small>
</CCardHeader>
<CCardBody>
@@ -82,7 +82,7 @@
</CCard>
<CCard>
<CCardHeader>
<CIcon name="justify-center"/> <strong> Navbar </strong>
<CIcon name="cil-justify-center"/> <strong> Navbar </strong>
<small>text</small>
</CCardHeader>
<CCardBody>
@@ -99,7 +99,7 @@
</CCard>
<CCard>
<CCardHeader>
<CIcon name="justify-center"/> <strong> Navbar </strong>
<CIcon name="cil-justify-center"/> <strong> Navbar </strong>
<small>dropdown</small>
</CCardHeader>
<CCardBody>
@@ -135,7 +135,7 @@
</CCard>
<CCard>
<CCardHeader>
<CIcon name="justify-center"/> <strong> Navbar </strong>
<CIcon name="cil-justify-center"/> <strong> Navbar </strong>
<small>form</small>
</CCardHeader>
<CCardBody>
@@ -153,7 +153,7 @@
</CCard>
<CCard>
<CCardHeader>
<CIcon name="justify-center"/> <strong> Navbar </strong>
<CIcon name="cil-justify-center"/> <strong> Navbar </strong>
<small>input group</small>
</CCardHeader>
<CCardBody>
+9 -9
View File
@@ -2,7 +2,7 @@
<div>
<CCard>
<CCardHeader>
<CIcon name="justify-center"/><strong> Bootstrap Navs</strong>
<CIcon name="cil-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>
<CIcon name="justify-center"/>
<CIcon name="cil-justify-center"/>
<strong> Bootstrap Navs </strong>
<small>icons</small>
</CCardHeader>
<CCardBody>
<CNav>
<CNavItem active>
<CIcon name="basket"/>
<CIcon name="cil-basket"/>
</CNavItem>
<CNavItem>
Link
@@ -46,7 +46,7 @@
</CCard>
<CCard>
<CCardHeader>
<CIcon name="justify-center"/>
<CIcon name="cil-justify-center"/>
<strong> Bootstrap Navs </strong>
<small>tab style</small>
</CCardHeader>
@@ -67,7 +67,7 @@
</CCard>
<CCard>
<CCardHeader @click="item++">
<CIcon name="justify-center"/>
<CIcon name="cil-justify-center"/>
<strong> Bootstrap Navs </strong>
<small>pill style</small>
</CCardHeader>
@@ -82,7 +82,7 @@
</CCard>
<CCard>
<CCardHeader>
<CIcon name="justify-center"/>
<CIcon name="cil-justify-center"/>
<strong> Bootstrap Navs </strong>
<small>fill tabs</small>
</CCardHeader>
@@ -97,7 +97,7 @@
</CCard>
<CCard>
<CCardHeader>
<CIcon name="justify-center"/>
<CIcon name="cil-justify-center"/>
<strong> Bootstrap Navs </strong>
<small>justified tabs</small>
</CCardHeader>
@@ -112,7 +112,7 @@
</CCard>
<CCard>
<CCardHeader>
<CIcon name="justify-center"/>
<CIcon name="cil-justify-center"/>
<strong> Bootstrap Navs </strong>
<small>dropdown support</small>
</CCardHeader>
@@ -137,7 +137,7 @@
</CCard>
<CCard>
<CCardHeader>
<CIcon name="justify-center"/>
<CIcon name="cil-justify-center"/>
<strong> Bootstrap Navs </strong>
<small>vertical variation</small>
</CCardHeader>
+2 -2
View File
@@ -2,7 +2,7 @@
<div>
<CCard>
<CCardHeader>
<CIcon name="justify-center"/>
<CIcon name="cil-justify-center"/>
<strong> Responsive bootstrap Pagination</strong>
<div class="card-header-actions">
<a
@@ -47,7 +47,7 @@
</CCard>
<CCard>
<CCardHeader>
<CIcon name="justify-center"/>
<CIcon name="cil-justify-center"/>
<strong> Pagination </strong>
<small>alignment</small>
</CCardHeader>
+2 -2
View File
@@ -2,7 +2,7 @@
<div>
<CCard>
<CCardHeader>
<CIcon name="justify-center"/>
<CIcon name="cil-justify-center"/>
<strong> Bootstrap Popovers</strong>
<div class="card-header-actions">
<a
@@ -49,7 +49,7 @@
</CCard>
<CCard>
<CCardHeader>
<CIcon name="justify-center"/>
<CIcon name="cil-justify-center"/>
<strong> Popovers </strong>
<small>placement</small>
</CCardHeader>
+8 -8
View File
@@ -2,7 +2,7 @@
<div>
<CCard>
<CCardHeader>
<CIcon name="justify-center"/>
<CIcon name="cil-justify-center"/>
<strong> Bootstrap Progress</strong>
<div class="card-header-actions">
<a
@@ -33,7 +33,7 @@
</CCard>
<CCard>
<CCardHeader>
<CIcon name="justify-center"/> <strong> Progress </strong><small>labels</small>
<CIcon name="cil-justify-center"/> <strong> Progress </strong><small>labels</small>
</CCardHeader>
<CCardBody>
<h6>No label</h6>
@@ -50,7 +50,7 @@
</CCard>
<CCard>
<CCardHeader>
<CIcon name="justify-center"/>
<CIcon name="cil-justify-center"/>
<strong> Progress </strong>
<small>width</small>
</CCardHeader>
@@ -65,7 +65,7 @@
</CCard>
<CCard>
<CCardHeader>
<CIcon name="justify-center"/>
<CIcon name="cil-justify-center"/>
<strong> Progress </strong>
<small>height</small>
</CCardHeader>
@@ -80,7 +80,7 @@
</CCard>
<CCard>
<CCardHeader>
<CIcon name="justify-center"/>
<CIcon name="cil-justify-center"/>
<strong> Progress </strong>
<small>colors</small>
</CCardHeader>
@@ -99,7 +99,7 @@
</CCard>
<CCard>
<CCardHeader>
<CIcon name="justify-center"/>
<CIcon name="cil-justify-center"/>
<strong> Progress </strong>
<small>striped</small>
</CCardHeader>
@@ -135,7 +135,7 @@
</CCard>
<CCard>
<CCardHeader>
<CIcon name="justify-center"/>
<CIcon name="cil-justify-center"/>
<strong> Progress </strong>
<small>animated</small>
</CCardHeader>
@@ -174,7 +174,7 @@
</CCard>
<CCard>
<CCardHeader>
<CIcon name="justify-center"/>
<CIcon name="cil-justify-center"/>
<strong> Progress </strong>
<small>multiple bars</small>
</CCardHeader>
+1 -1
View File
@@ -1,7 +1,7 @@
<template>
<CCard>
<CCardHeader>
<CIcon name="justify-center"/> {{caption}}
<CIcon name="cil-justify-center"/> {{caption}}
</CCardHeader>
<CCardBody>
<CDataTable
+9 -9
View File
@@ -84,7 +84,7 @@
<CTabs>
<CTab active>
<template slot="title">
<CIcon name="calculator"/>
<CIcon name="cil-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">
<CIcon name="basket"/>
<CIcon name="cil-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">
<CIcon name="chart-pie"/>
<CIcon name="cil-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">
<CIcon name="calculator"/> {{tabs[0]}}
<CIcon name="cil-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">
<CIcon name="basket"/> {{tabs[1]}}
<CIcon name="cil-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">
<CIcon name="chart-pie"/> {{tabs[2]}}
<CIcon name="cil-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">
<CIcon name="calculator"/> {{tabs[0]}}
<CIcon name="cil-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">
<CIcon name="basket"/> {{tabs[1]}}
<CIcon name="cil-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">
<CIcon name="chart-pie"/> {{tabs[2]}}
<CIcon name="cil-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
+2 -2
View File
@@ -2,7 +2,7 @@
<div>
<CCard>
<CCardHeader>
<CIcon name="justify-center"/>
<CIcon name="cil-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>
<CIcon name="justify-center"/>
<CIcon name="cil-justify-center"/>
<strong> Tooltips </strong>
<small>placement</small>
</CCardHeader>
+8 -11
View File
@@ -31,7 +31,7 @@
:key="key"
:color="brandName"
>
<CIcon size="sm" :name="brandName"/>
<CIcon size="sm" :name="'cib-' + brandName"/>
<span>{{brandName}}</span>
</CButton>
</template>
@@ -44,7 +44,7 @@
:key="key"
:color="brandName"
>
<CIcon :name="brandName"/>
<CIcon :name="'cib-' + brandName"/>
<span>{{brandName}}</span>
</CButton>
</template>
@@ -58,7 +58,7 @@
:key="key"
:color="brandName"
>
<CIcon size="lg" :name="brandName"/>
<CIcon size="lg" :name="'cib-' + brandName"/>
<span>{{brandName}}</span>
</CButton>
</template>
@@ -84,7 +84,7 @@
:key="key"
:color="brandName"
>
<CIcon size="sm" :name="brandName"/>
<CIcon size="sm" :name="'cib-' + brandName"/>
</CButton>
</template>
</p>
@@ -96,7 +96,7 @@
:key="key"
:color="brandName"
>
<CIcon :name="brandName"/>
<CIcon :name="'cib-' + brandName"/>
</CButton>
</template>
</p>
@@ -109,7 +109,7 @@
:key="key"
:color="brandName"
>
<CIcon size="lg" :name="brandName"/>
<CIcon size="lg" :name="'cib-' + brandName"/>
</CButton>
</template>
</p>
@@ -132,7 +132,6 @@
<p>
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
size="sm"
:key="key"
:color="brandName"
@@ -145,7 +144,6 @@
<p>
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
:key="key"
:color="brandName"
>
@@ -157,7 +155,6 @@
<p>
<template v-for="(brandName, key) in $options.brands">
<CButton
:name="brandName"
size="lg"
:key="key"
:color="brandName"
@@ -176,8 +173,8 @@
export default {
name: 'BrandButtons',
usage: '<CButton color="facebook"><span>Facebook</span></CButton>',
iconsOnlyUsage: '<CButton color="facebook"><CIcon name="facebook"/></CButton>',
textOnlyUsage: '<CButton color="facebook"><CIcon name="facebook"/></CButton>',
iconsOnlyUsage: '<CButton color="facebook"><CIcon name="cib-facebook"/></CButton>',
textOnlyUsage: '<CButton color="facebook"><CIcon name="cib-facebook"/></CButton>',
brands: [
'facebook',
'twitter',
+5 -5
View File
@@ -3,7 +3,7 @@
<CCol col="12">
<CCard>
<CCardHeader>
<CIcon name="justify-center"/>
<CIcon name="cil-justify-center"/>
<strong> Bootstrap button group</strong>
<div class="card-header-actions">
<a
@@ -41,7 +41,7 @@
<CCol col="12">
<CCard>
<CCardHeader>
<CIcon name="justify-center"/>
<CIcon name="cil-justify-center"/>
<strong> Button group </strong>sizing
</CCardHeader>
<CCardBody>
@@ -70,7 +70,7 @@
<CCol col="12">
<CCard>
<CCardHeader>
<CIcon name="justify-center"/><strong> Button group </strong>dropdown support
<CIcon name="cil-justify-center"/><strong> Button group </strong>dropdown support
</CCardHeader>
<CCardBody>
<div>
@@ -98,7 +98,7 @@
<CCol col="12">
<CCard>
<CCardHeader>
<CIcon name="justify-center"/>
<CIcon name="cil-justify-center"/>
<strong> Button group </strong>vertical variation
</CCardHeader>
<CCardBody>
@@ -115,7 +115,7 @@
<CCol col="12">
<CCard>
<CCardHeader>
<CIcon name="justify-center"/>
<CIcon name="cil-justify-center"/>
<strong> Button toolbar </strong>
<small>with button groups</small>
<!-- <div class="card-header-actions">
+6 -6
View File
@@ -4,7 +4,7 @@
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<CIcon name="justify-center"/>
<CIcon name="cil-justify-center"/>
<strong> Bootstrap Dropdown</strong>
<div class="card-header-actions">
<a
@@ -69,7 +69,7 @@
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<CIcon name="justify-center"/>
<CIcon name="cil-justify-center"/>
<strong> Dropdown </strong>
<small>positioning</small>
</CCardHeader>
@@ -140,7 +140,7 @@
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<CIcon name="justify-center"/>
<CIcon name="cil-justify-center"/>
<strong> Dropdown </strong>
<small>hidden caret</small>
</CCardHeader>
@@ -165,7 +165,7 @@
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<CIcon name="justify-center"/>
<CIcon name="cil-justify-center"/>
<strong> Dropdown </strong>
<small>sizing</small>
</CCardHeader>
@@ -222,7 +222,7 @@
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<CIcon name="justify-center"/>
<CIcon name="cil-justify-center"/>
<strong> Dropdown </strong>
<small>headers and accessibility</small>
</CCardHeader>
@@ -254,7 +254,7 @@
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<CIcon name="justify-center"/>
<CIcon name="cil-justify-center"/>
<strong> Dropdown </strong>
<small><code>color</code></small>
</CCardHeader>
+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">
<CIcon name="lightbulb"/>&nbsp;Standard Button
<CIcon name="cil-lightbulb"/>&nbsp;Standard Button
</CButton>
</CCol>
<CCol sm xs="12" class="text-center mt-3">
<CButton color="secondary" variant="outline">
<CIcon name="lightbulb"/>&nbsp;Outline Button
<CIcon name="cil-lightbulb"/>&nbsp;Outline Button
</CButton>
</CCol>
<CCol sm xs="12" class="text-center mt-3">
<CButton color="success">
<CIcon name="lightbulb"/>&nbsp;Ghost Button
<CIcon name="cil-lightbulb"/>&nbsp;Ghost Button
</CButton>
</CCol>
<CCol sm xs="12" class="text-center mt-3">
<CButton color="warning" square>
<CIcon name="lightbulb"/>&nbsp;Square Button
<CIcon name="cil-lightbulb"/>&nbsp;Square Button
</CButton>
</CCol>
<CCol sm xs="12" class="text-center mt-3">
<CButton color="danger" shape="pill">
<CIcon name="lightbulb"/>&nbsp;Pill Button
<CIcon name="cil-lightbulb"/>&nbsp;Pill Button
</CButton>
</CCol>
</CRow>
+1 -1
View File
@@ -2,7 +2,7 @@
<div>
<CCard>
<CCardHeader>
<CIcon name="globe-alt"/>Font Awesome brand icons
<CIcon name="cil-globe-alt"/>Brand icons
</CCardHeader>
<CCardBody>
<CRow class="text-center">
+1 -1
View File
@@ -2,7 +2,7 @@
<div>
<CCard>
<CCardHeader>
<CIcon name="globe-alt"/> Flags
<CIcon name="cil-globe-alt"/> Flags
</CCardHeader>
<CCardBody>
<CRow class="text-center">
+5 -5
View File
@@ -3,7 +3,7 @@
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<CIcon name="justify-center"/>
<CIcon name="cil-justify-center"/>
<strong> Bootstrap Alert</strong>
<div class="card-header-actions">
<a
@@ -34,7 +34,7 @@
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<CIcon name="justify-center"/> Alert
<CIcon name="cil-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>
<CIcon name="justify-center"/> Alerts <small>with additional content</small>
<CIcon name="cil-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>
<CIcon name="justify-center"/> Alerts
<CIcon name="cil-justify-center"/> Alerts
<small>dismissible</small>
</CCardHeader>
<CCardBody>
@@ -131,7 +131,7 @@
</CCard>
<CCard>
<CCardHeader>
<CIcon name="justify-center"/> Alerts
<CIcon name="cil-justify-center"/> Alerts
<small>auto dismissible</small>
</CCardHeader>
<CCardBody>
+4 -4
View File
@@ -3,7 +3,7 @@
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<CIcon name="justify-center"/>
<CIcon name="cil-justify-center"/>
<strong> Bootstrap Badge</strong>
<div class="card-header-actions">
<a
@@ -34,7 +34,7 @@
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<CIcon name="justify-center"/> Badge
<CIcon name="cil-justify-center"/> Badge
<small>contextual variations</small>
</CCardHeader>
<CCardBody>
@@ -50,7 +50,7 @@
</CCard>
<CCard>
<CCardHeader>
<CIcon name="justify-center"/> Badge
<CIcon name="cil-justify-center"/> Badge
<small>shape="pill"</small>
</CCardHeader>
<CCardBody>
@@ -66,7 +66,7 @@
</CCard>
<CCard>
<CCardHeader>
<CIcon name="justify-center"/> Badge
<CIcon name="cil-justify-center"/> Badge
<small>actionable</small>
</CCardHeader>
<CCardBody>
+1 -1
View File
@@ -5,7 +5,7 @@
<CCol col="12">
<CCard>
<CCardHeader>
<CIcon name="justify-center"/> Bootstrap Modals
<CIcon name="cil-justify-center"/> Bootstrap Modals
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Modal"
+2 -2
View File
@@ -12,14 +12,14 @@
placeholder="Username"
autocomplete="username email"
>
<template #prepend-content><CIcon name="user"/></template>
<template #prepend-content><CIcon name="cil-user"/></template>
</CInput>
<CInput
placeholder="Password"
type="password"
autocomplete="curent-password"
>
<template #prepend-content><CIcon name="lock-locked"/></template>
<template #prepend-content><CIcon name="cil-lock-locked"/></template>
</CInput>
<CRow>
<CCol col="6">
+1 -1
View File
@@ -12,7 +12,7 @@
class="mb-3"
placeholder="What are you looking for?"
>
<template #prepend-content><CIcon name="magnifying-glass"/></template>
<template #prepend-content><CIcon name="cil-magnifying-glass"/></template>
<template #append>
<CButton color="info">Search</CButton>
</template>
+1 -1
View File
@@ -11,7 +11,7 @@
class="mb-3"
placeholder="What are you looking for?"
>
<template #prepend-content><CIcon name="magnifying-glass"/></template>
<template #prepend-content><CIcon name="cil-magnifying-glass"/></template>
<template #append>
<CButton color="info">Search</CButton>
</template>
+3 -3
View File
@@ -11,7 +11,7 @@
placeholder="Username"
autocomplete="username"
>
<template #prepend-content><CIcon name="user"/></template>
<template #prepend-content><CIcon name="cil-user"/></template>
</CInput>
<CInput
placeholder="Email"
@@ -23,7 +23,7 @@
type="password"
autocomplete="new-password"
>
<template #prepend-content><CIcon name="lock-locked"/></template>
<template #prepend-content><CIcon name="cil-lock-locked"/></template>
</CInput>
<CInput
placeholder="Repeat password"
@@ -31,7 +31,7 @@
autocomplete="new-password"
class="mb-4"
>
<template #prepend-content><CIcon name="lock-locked"/></template>
<template #prepend-content><CIcon name="cil-lock-locked"/></template>
</CInput>
<CButton color="success" block>Create Account</CButton>
</CForm>
+2 -2
View File
@@ -2,7 +2,7 @@
<div>
<CCard>
<CCardHeader>
<CIcon name="drop"/> Theme colors
<CIcon name="cil-drop"/> Theme colors
</CCardHeader>
<CCardBody>
<CRow>
@@ -21,7 +21,7 @@
</CCard>
<CCard>
<CCardHeader>
<CIcon name="drop"/> Grays
<CIcon name="cil-drop"/> Grays
</CCardHeader>
<CCardBody>
<CRow>
+37 -37
View File
@@ -103,7 +103,7 @@
text="Income"
color="primary"
>
<CIcon name="settings" width="24"/>
<CIcon name="cil-settings" width="24"/>
</CWidgetIcon>
</CCol>
<CCol col="12" sm="6" lg="3">
@@ -112,7 +112,7 @@
text="Income"
color="info"
>
<CIcon name="laptop" width="24"/>
<CIcon name="cil-laptop" width="24"/>
</CWidgetIcon>
</CCol>
<CCol col="12" sm="6" lg="3">
@@ -121,7 +121,7 @@
text="Income"
color="warning"
>
<CIcon name="moon" width="24"/>
<CIcon name="cil-moon" width="24"/>
</CWidgetIcon>
</CCol>
<CCol col="12" sm="6" lg="3">
@@ -130,7 +130,7 @@
text="Income"
color="danger"
>
<CIcon name="bell" width="24"/>
<CIcon name="cil-bell" width="24"/>
</CWidgetIcon>
</CCol>
</CRow>
@@ -142,7 +142,7 @@
color="primary"
:icon-padding="false"
>
<CIcon name="settings" width="24"/>
<CIcon name="cil-settings" width="24"/>
</CWidgetIcon>
</CCol>
<CCol col="12" sm="6" lg="3">
@@ -152,7 +152,7 @@
color="info"
:icon-padding="false"
>
<CIcon name="laptop" width="24"/>
<CIcon name="cil-laptop" width="24"/>
</CWidgetIcon>
</CCol>
<CCol col="12" sm="6" lg="3">
@@ -162,7 +162,7 @@
color="warning"
:icon-padding="false"
>
<CIcon name="moon" width="24"/>
<CIcon name="cil-moon" width="24"/>
</CWidgetIcon>
</CCol>
<CCol col="12" sm="6" lg="3">
@@ -172,7 +172,7 @@
color="danger"
:icon-padding="false"
>
<CIcon name="bell" width="24"/>
<CIcon name="cil-bell" width="24"/>
</CWidgetIcon>
</CCol>
</CRow>
@@ -184,7 +184,7 @@
color="primary"
:icon-padding="false"
>
<CIcon name="settings" class="mx-5 " width="24"/>
<CIcon name="cil-settings" class="mx-5 " width="24"/>
</CWidgetIcon>
</CCol>
<CCol col="12" sm="6" lg="4">
@@ -194,7 +194,7 @@
color="info"
:icon-padding="false"
>
<CIcon name="laptop" class="mx-5 " width="24"/>
<CIcon name="cil-laptop" class="mx-5 " width="24"/>
</CWidgetIcon>
</CCol>
<CCol col="12" sm="6" lg="4">
@@ -204,7 +204,7 @@
color="warning"
:icon-padding="false"
>
<CIcon name="moon" class="mx-5 " width="24"/>
<CIcon name="cil-moon" class="mx-5 " width="24"/>
<template #footer>
<CCardFooter class="card-footer px-3 py-2">
<CLink
@@ -212,7 +212,7 @@
href="https://coreui.io/"
>
View more
<CIcon name="arrowRight" class="float-right" width="16"/>
<CIcon name="cil-arrowRight" class="float-right" width="16"/>
</CLink>
</CCardFooter>
</template>
@@ -228,7 +228,7 @@
:icon-padding="false"
link="#"
>
<CIcon name="settings" class="mx-5 " width="24"/>
<CIcon name="cil-settings" class="mx-5 " width="24"/>
</CWidgetIcon>
</CCol>
<CCol col="12" sm="6" lg="4">
@@ -239,7 +239,7 @@
:icon-padding="false"
link="#"
>
<CIcon name="laptop" class="mx-5 " width="24"/>
<CIcon name="cil-laptop" class="mx-5 " width="24"/>
</CWidgetIcon>
</CCol>
<CCol col="12" sm="6" lg="4">
@@ -250,7 +250,7 @@
:icon-padding="false"
link="#"
>
<CIcon name="moon" class="mx-5" width="24"/>
<CIcon name="cil-moon" class="mx-5" width="24"/>
</CWidgetIcon>
</CCol>
</CRow> -->
@@ -262,34 +262,34 @@
text="Visitors"
color="info"
>
<CIcon name="people" height="36"/>
<CIcon name="cil-people" height="36"/>
</CWidgetProgressIcon>
<CWidgetProgressIcon
header="385"
text="New Clients"
color="success"
>
<CIcon name="userFollow" height="36"/>
<CIcon name="cil-userFollow" height="36"/>
</CWidgetProgressIcon>
<CWidgetProgressIcon
header="1238"
text="Products sold"
color="warning"
>
<CIcon name="basket" height="36"/>
<CIcon name="cil-basket" height="36"/>
</CWidgetProgressIcon>
<CWidgetProgressIcon
header="28%"
text="Returning Visitors"
>
<CIcon name="chartPie" height="36"/>
<CIcon name="cil-chartPie" height="36"/>
</CWidgetProgressIcon>
<CWidgetProgressIcon
header="5:34:11"
text="Avg. Time"
color="danger"
>
<CIcon name="speedometer" height="36"/>
<CIcon name="cil-speedometer" height="36"/>
</CWidgetProgressIcon>
</CCardGroup>
<CCardGroup class="mb-4">
@@ -299,7 +299,7 @@
color="info"
inverse
>
<CIcon name="people" height="36"/>
<CIcon name="cil-people" height="36"/>
</CWidgetProgressIcon>
<CWidgetProgressIcon
header="385"
@@ -307,7 +307,7 @@
color="success"
inverse
>
<CIcon name="userFollow" height="36"/>
<CIcon name="cil-userFollow" height="36"/>
</CWidgetProgressIcon>
<CWidgetProgressIcon
header="1238"
@@ -315,7 +315,7 @@
color="warning"
inverse
>
<CIcon name="basket" height="36"/>
<CIcon name="cil-basket" height="36"/>
</CWidgetProgressIcon>
<CWidgetProgressIcon
header="28%"
@@ -323,7 +323,7 @@
color="primary"
inverse
>
<CIcon name="chartPie" height="36"/>
<CIcon name="cil-chartPie" height="36"/>
</CWidgetProgressIcon>
<CWidgetProgressIcon
header="5:34:11"
@@ -331,7 +331,7 @@
color="danger"
inverse
>
<CIcon name="speedometer" height="36"/>
<CIcon name="cil-speedometer" height="36"/>
</CWidgetProgressIcon>
</CCardGroup>
<CRow>
@@ -341,7 +341,7 @@
text="Visitors"
color="info"
>
<CIcon name="people" height="36"/>
<CIcon name="cil-people" height="36"/>
</CWidgetProgressIcon>
</CCol>
<CCol sm="6" md="2">
@@ -350,7 +350,7 @@
text="New Clients"
color="success"
>
<CIcon name="userFollow" height="36"/>
<CIcon name="cil-userFollow" height="36"/>
</CWidgetProgressIcon>
</CCol>
<CCol sm="6" md="2">
@@ -359,7 +359,7 @@
text="Products sold"
color="warning"
>
<CIcon name="basket" height="36"/>
<CIcon name="cil-basket" height="36"/>
</CWidgetProgressIcon>
</CCol>
<CCol sm="6" md="2">
@@ -368,7 +368,7 @@
text="Returning Visitors"
color="primary"
>
<CIcon name="chartPie" height="36"/>
<CIcon name="cil-chartPie" height="36"/>
</CWidgetProgressIcon>
</CCol>
<CCol sm="6" md="2">
@@ -377,7 +377,7 @@
text="Avg. Time"
color="danger"
>
<CIcon name="speedometer" height="36"/>
<CIcon name="cil-speedometer" height="36"/>
</CWidgetProgressIcon>
</CCol>
<CCol sm="6" md="2">
@@ -386,7 +386,7 @@
text="comments"
color="info"
>
<CIcon name="speech" height="36"/>
<CIcon name="cil-speech" height="36"/>
</CWidgetProgressIcon>
</CCol>
</CRow>
@@ -398,7 +398,7 @@
color="info"
inverse
>
<CIcon name="people" height="36"/>
<CIcon name="cil-people" height="36"/>
</CWidgetProgressIcon>
</CCol>
<CCol sm="6" md="2">
@@ -408,7 +408,7 @@
color="success"
inverse
>
<CIcon name="userFollow" height="36"/>
<CIcon name="cil-userFollow" height="36"/>
</CWidgetProgressIcon>
</CCol>
<CCol sm="6" md="2">
@@ -418,7 +418,7 @@
color="warning"
inverse
>
<CIcon name="basket" height="36"/>
<CIcon name="cil-basket" height="36"/>
</CWidgetProgressIcon>
</CCol>
<CCol sm="6" md="2">
@@ -428,7 +428,7 @@
color="primary"
inverse
>
<CIcon name="chartPie" height="36"/>
<CIcon name="cil-chartPie" height="36"/>
</CWidgetProgressIcon>
</CCol>
<CCol sm="6" md="2">
@@ -438,7 +438,7 @@
color="danger"
inverse
>
<CIcon name="speedometer" height="36"/>
<CIcon name="cil-speedometer" height="36"/>
</CWidgetProgressIcon>
</CCol>
<CCol sm="6" md="2">
@@ -448,7 +448,7 @@
color="info"
inverse
>
<CIcon name="speech" height="36"/>
<CIcon name="cil-speech" height="36"/>
</CWidgetProgressIcon>
</CCol>
</CRow>
+8 -8
View File
@@ -10,7 +10,7 @@
left-footer="feeds"
>
<CIcon
name="facebook"
name="cib-facebook"
height="52"
class="my-4"
/>
@@ -32,7 +32,7 @@
left-footer="tweets"
>
<CIcon
name="twitter"
name="cib-twitter"
height="52"
class="my-4"
/>
@@ -54,7 +54,7 @@
left-footer="feeds"
>
<CIcon
name="linkedin"
name="cib-linkedin"
height="52"
class="my-4"
/>
@@ -76,7 +76,7 @@
color="warning"
>
<CIcon
name="calendar"
name="cil-calendar"
height="52"
class="my-4"
/>
@@ -100,7 +100,7 @@
left-footer="feeds"
>
<CIcon
name="facebook"
name="cib-facebook"
height="56"
class="my-4"
/>
@@ -115,7 +115,7 @@
left-footer="tweets"
>
<CIcon
name="twitter"
name="cib-twitter"
height="56"
class="my-4"
/>
@@ -130,7 +130,7 @@
left-footer="feeds"
>
<CIcon
name="linkedin"
name="cib-linkedin"
height="56"
class="my-4"
/>
@@ -145,7 +145,7 @@
color="warning"
>
<CIcon
name="calendar"
name="cil-calendar"
height="56"
class="my-4"
/>
+4 -4
View File
@@ -9,7 +9,7 @@
placement="bottom-end"
>
<template #toggler-content>
<CIcon name="settings"/>
<CIcon name="cil-settings"/>
</template>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
@@ -40,7 +40,7 @@
:caret="false"
>
<template #toggler-content>
<CIcon name="location-pin"/>
<CIcon name="cil-location-pin"/>
</template>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
@@ -75,7 +75,7 @@
placement="bottom-end"
>
<template #toggler-content>
<CIcon name="settings"/>
<CIcon name="cil-settings"/>
</template>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
@@ -109,7 +109,7 @@
placement="bottom-end"
>
<template #toggler-content>
<CIcon name="settings"/>
<CIcon name="cil-settings"/>
</template>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>