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

refactor: update base views

Browse Source
This commit is contained in:
woothu
2019-11-13 10:34:15 +01:00
parent bc822612da
commit 70058e8c29
11 changed files with 466 additions and 480 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/containers/TheHeaderDropdownAccnt.vue
+1 -1
View File
@@ -78,6 +78,6 @@ export default {
<style scoped> <style scoped>
.c-icon { .c-icon {
margin-right: 0.5rem; margin-right: 0.3rem;
} }
</style> </style>
src/views/Dashboard.vue
+6 -1
View File
@@ -85,7 +85,11 @@
<WidgetsBrand/> <WidgetsBrand/>
<CRow> <CRow>
<CCol md="12"> <CCol md="12">
<CCard header-html="Traffic &amp; Sales" body-wrapper> <CCard>
<CCardHeader>
Traffic &amp; Sales
</CCardHeader>
<CCardBody>
<CRow> <CRow>
<CCol sm="12" lg="6"> <CCol sm="12" lg="6">
<CRow> <CRow>
@@ -442,6 +446,7 @@
<strong>{{item.activity}}</strong> <strong>{{item.activity}}</strong>
</td> </td>
</CDataTable> </CDataTable>
</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
</CRow> </CRow>
src/views/base/Cards.vue
+58 -51
View File
@@ -22,7 +22,10 @@
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard footer-html="Card Footer" :body-html="loremIpsum" /> <CCard>
<CCardFooter>Card Footer</CCardFooter>
<CCardBody>{{loremIpsum}}</CCardBody>
</CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard> <CCard>
@@ -74,80 +77,84 @@
</CRow> </CRow>
<CRow> <CRow>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard <CCard border-color="primary">
header="Card outline primary" <CCardHeader>Card outline primary</CCardHeader>
border-color="primary" <CCardBody>{{loremIpsum}}</CCardBody>
:body-html="loremIpsum"
/>
</CCol>
<CCol sm="6" md="4">
<CCard
header="Card outline secondary"
border-color="secondary"
:body-html="loremIpsum"
/>
</CCol>
<CCol sm="6" md="4">
<CCard
header="Card outline success"
border-color="success"
body-wrapper
>
{{loremIpsum}}
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard header-html="Card outline info" border-color="info" body-wrapper> <CCard border-color="secondary">
{{loremIpsum}} <CCardHeader>Card outline secondary</CCardHeader>
<CCardBody>{{loremIpsum}}</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard header-html="Card outline warning" border-color="warning" body-wrapper> <CCard border-color="success">
{{loremIpsum}} <CCardHeader>Card outline success</CCardHeader>
<CCardBody>{{loremIpsum}}</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard header-html="Card outline danger" border-color="danger" body-wrapper> <CCard border-color="info">
{{loremIpsum}} <CCardHeader>Card outline info</CCardHeader>
<CCardBody>{{loremIpsum}}</CCardBody>
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard border-color="warning">
<CCardHeader>Card outline warning</CCardHeader>
<CCardBody>{{loremIpsum}}</CCardBody>
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard border-color="danger">
<CCardHeader>Card outline danger</CCardHeader>
<CCardBody>{{loremIpsum}}</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
</CRow> </CRow>
<CRow> <CRow>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard class="card-accent-primary" header="Card with primary accent" body-wrapper> <CCard accent-color="primary">
{{loremIpsum}} <CCardHeader>Card with primary accent</CCardHeader>
<CCardBody>{{loremIpsum}}</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard class="card-accent-secondary" header="Card with secondary accent" body-wrapper> <CCard accent-color="secondary">
{{loremIpsum}} <CCardHeader>Card with secondary accent</CCardHeader>
<CCardBody>{{loremIpsum}}</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard class="card-accent-success" header="Card with success accent" body-wrapper> <CCard accent-color="success">
{{loremIpsum}} <CCardHeader>Card with success accent</CCardHeader>
<CCardBody>{{loremIpsum}}</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard class="card-accent-info" header="Card with info accent" body-wrapper> <CCard accent-color="info">
{{loremIpsum}} <CCardHeader>Card with info accent</CCardHeader>
<CCardBody>{{loremIpsum}}</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard class="card-accent-warning" header="Card with warning accent" body-wrapper> <CCard accent-color="info">
{{loremIpsum}} <CCardHeader>Card with info accent</CCardHeader>
<CCardBody>{{loremIpsum}}</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard class="card-accent-danger" header="Card with danger accent" body-wrapper> <CCard accent-color="danger">
{{loremIpsum}} <CCardHeader>Card with danger accent</CCardHeader>
<CCardBody>{{loremIpsum}}</CCardBody>
</CCard> </CCard>
</CCol> </CCol>
</CRow> </CRow>
<CRow> <CRow>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard class="bg-primary text-center" body-wrapper> <CCard color="primary" class="text-center" body-wrapper>
<blockquote class="card-blockquote"> <blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <footer>Someone famous in
@@ -157,7 +164,7 @@
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard class="bg-success text-center" body-wrapper> <CCard color="success" class="text-center" body-wrapper>
<blockquote class="card-blockquote"> <blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <footer>Someone famous in
@@ -167,7 +174,7 @@
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard class="bg-info text-center" body-wrapper> <CCard color="info" class="text-center" body-wrapper>
<blockquote class="card-blockquote"> <blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <footer>Someone famous in
@@ -177,7 +184,7 @@
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard class="bg-warning text-center" body-wrapper> <CCard color="warning" class="text-center" body-wrapper>
<blockquote class="card-blockquote"> <blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <footer>Someone famous in
@@ -187,7 +194,7 @@
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard class="bg-danger text-center" body-wrapper> <CCard color="danger" class="text-center" body-wrapper>
<blockquote class="card-blockquote"> <blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <footer>Someone famous in
@@ -197,7 +204,7 @@
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard class="bg-secondary text-center" body-wrapper> <CCard color="secondary" class="text-center" body-wrapper>
<blockquote class="card-blockquote"> <blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <footer>Someone famous in
@@ -209,33 +216,33 @@
</CRow> </CRow>
<CRow> <CRow>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard header-html="Card title" class="bg-primary" body-wrapper> <CCard color="primary" body-wrapper>
{{loremIpsum}} {{loremIpsum}}
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard header-html="Card title" class="bg-success" body-wrapper> <CCard color="success" body-wrapper>
{{loremIpsum}} {{loremIpsum}}
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard header-html="Card title" class="bg-info" body-wrapper> <CCard color="info" body-wrapper>
{{loremIpsum}} {{loremIpsum}}
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard header-html="Card title" class="bg-warning" body-wrapper> <CCard color="warning" body-wrapper>
{{loremIpsum}} {{loremIpsum}}
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<CCard header-html="Card title" class="bg-danger" body-wrapper> <CCard color="danger" body-wrapper>
{{loremIpsum}} {{loremIpsum}}
</CCard> </CCard>
</CCol> </CCol>
<CCol sm="6" md="4"> <CCol sm="6" md="4">
<transition name="fade"> <transition name="fade">
<CCard class="bg-secondary" v-if="show"> <CCard v-if="show" color="secondary">
<CCardHeader> <CCardHeader>
Card with header actions Card with header actions
<div class="card-header-actions"> <div class="card-header-actions">
src/views/base/Collapses.vue
+1 -1
View File
@@ -22,7 +22,7 @@
</CButton> </CButton>
<CCollapse :show="collapse" class="mt-2"> <CCollapse :show="collapse" class="mt-2">
<CCard body-wrapper> <CCard body-wrapper>
<p class="card-text">Collapse contents Here</p> <CCardText>Collapse contents Here</CCardText>
<CButton <CButton
@click="innerCollapse = !innerCollapse" @click="innerCollapse = !innerCollapse"
size="sm" size="sm"
src/views/base/ListGroups.vue
+10 -4
View File
@@ -188,20 +188,26 @@
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CCardGroup deck> <CCardGroup deck>
<CCard headerHtml="<b>Card with list group</b>"> <CCard>
<CCardHeader>
<b>Card with list group</b>
</CCardHeader>
<CCardBody>
<CListGroup> <CListGroup>
<CListGroupItem href="#">Cras justo odio</CListGroupItem> <CListGroupItem href="#">Cras justo odio</CListGroupItem>
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem> <CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem href="#">Vestibulum at eros</CListGroupItem> <CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
</CListGroup> </CListGroup>
<p class="card-text mt-2"> <CCardText class="mt-2">
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
ad sit ipsum anim Lorem. ad sit ipsum anim Lorem.
</p> </CCardText>
</CCardBody>
</CCard> </CCard>
<CCard header="<b>Card with flush list group</b>"> <CCard>
<CCardHeader><b>Card with flush list group</b></CCardHeader>
<CListGroup flush> <CListGroup flush>
<CListGroupItem href="#">Cras justo odio</CListGroupItem> <CListGroupItem href="#">Cras justo odio</CListGroupItem>
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem> <CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
src/views/base/Table.vue
+1
View File
@@ -15,6 +15,7 @@
:items-per-page="small ? 10 : 5" :items-per-page="small ? 10 : 5"
:dark="dark" :dark="dark"
pagination pagination
items-per-page-select
> >
<template #status="{item}"> <template #status="{item}">
<td> <td>
src/views/base/Tabs.vue
+6 -6
View File
@@ -18,21 +18,21 @@
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CTabs> <CTabs>
<CTab title-html="Home" active> <CTab title="Home" active>
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum. officia deserunt mollit anim id est laborum.
</CTab> </CTab>
<CTab title-html="Profile"> <CTab title="Profile">
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum. officia deserunt mollit anim id est laborum.
</CTab> </CTab>
<CTab title-html="Disabled" disabled> <CTab title="Disabled" disabled>
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
@@ -50,21 +50,21 @@
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CTabs variant="pills"> <CTabs variant="pills">
<CTab title-html="Home" active> <CTab title="Home" active>
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum. officia deserunt mollit anim id est laborum.
</CTab> </CTab>
<CTab title-html="Profile"> <CTab title="Profile">
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum. officia deserunt mollit anim id est laborum.
</CTab> </CTab>
<CTab title-html="Disabled" disabled> <CTab title="Disabled" disabled>
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
src/views/charts/Charts.vue
+25 -15
View File
@@ -19,29 +19,39 @@
<CChartLineExample/> <CChartLineExample/>
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard header-html="Bar Chart" body-wrapper> <CCard>
<CChartBarExample/> <CCardHeader>Bar Chart</CCardHeader>
<CCardBody><CChartBarExample/></CCardBody>
</CCard> </CCard>
<CCard header-html="Doughnut Chart" body-wrapper> <CCard>
<CChartDoughnutExample/> <CCardHeader>Doughnut Chart</CCardHeader>
<CCardBody><CChartDoughnutExample/></CCardBody>
</CCard> </CCard>
<CCard header-html="Radar Chart" body-wrapper> <CCard>
<CChartRadarExample/> <CCardHeader>Radar Chart</CCardHeader>
<CCardBody><CChartRadarExample/></CCardBody>
</CCard> </CCard>
<CCard header-html="Pie Chart" body-wrapper> <CCard>
<CChartPieExample/> <CCardHeader>Pie Chart</CCardHeader>
<CCardBody><CChartPieExample/></CCardBody>
</CCard> </CCard>
<CCard header-html="Polar Area Chart" body-wrapper> <CCard>
<CChartPolarAreaExample/> <CCardHeader>Polar Area Chart</CCardHeader>
<CCardBody><CChartPolarAreaExample/></CCardBody>
</CCard> </CCard>
<CCard header-html="Simple line chart" body-wrapper> <CCard>
<CCardHeader>Simple line chart</CCardHeader>
<CCardBody>
<CChartLineSimple border-color="success" labels="months"/> <CChartLineSimple border-color="success" labels="months"/>
</CCardBody>
</CCard> </CCard>
<CCard header-html="Simple pointed chart" body-wrapper> <CCard>
<CChartLineSimple pointed border-color="warning"/> <CCardHeader>Simple pointed chart</CCardHeader>
<CCardBody><CChartLineSimple pointed border-color="warning"/></CCardBody>
</CCard> </CCard>
<CCard header-html="Simple bar chart" body-wrapper> <CCard>
<CChartBarSimple background-color="danger"/> <CCardHeader>Simple bar chart</CCardHeader>
<CCardBody><CChartBarSimple background-color="danger"/></CCardBody>
</CCard> </CCard>
</CCardGroup> </CCardGroup>
</div> </div>
src/views/pages/Login.vue
+3 -1
View File
@@ -33,7 +33,9 @@
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard <CCard
class="text-white text-center bg-primary py-5 d-md-down-none" color="primary"
text-color="white"
class="text-center py-5 d-md-down-none"
style="width:44%" style="width:44%"
body-wrapper body-wrapper
> >
src/views/users/Users.vue
+6 -1
View File
@@ -2,7 +2,11 @@
<CRow> <CRow>
<CCol col="12" xl="8"> <CCol col="12" xl="8">
<transition name="slide"> <transition name="slide">
<CCard header-html="Users" body-wrapper> <CCard>
<CCardHeader>
Users
</CCardHeader>
<CCardBody>
<CDataTable <CDataTable
hover hover
striped striped
@@ -28,6 +32,7 @@
</td> </td>
</template> </template>
</CDataTable> </CDataTable>
</CCardBody>
</CCard> </CCard>
</transition> </transition>
</CCol> </CCol>
src/views/widgets/Widgets.vue
-50
View File
@@ -453,56 +453,6 @@
</CCol> </CCol>
</CRow> </CRow>
<WidgetsDropdown/> <WidgetsDropdown/>
<CRow>
<CCol sm="6" lg="3">
<CWidgetHeaderDetails
color="primary"
right-header="SALE"
right-footer="Today 6:43 AM"
left-header="$1.890,65"
left-footer="+432,50 (15,78%)"
>
<CChartLineSimple style="height:40px"/>
<CChartBarSimple style="height:40px"/>
</CWidgetHeaderDetails>
</CCol>
<CCol sm="6" lg="3">
<CWidgetHeaderDetails
color="success"
right-header="SALE"
right-footer="Today 6:43 AM"
left-header="$1.890,65"
left-footer="+432,50 (15,78%)"
>
<CChartLineSimple style="height:40px"/>
<CChartBarSimple style="height:40px"/>
</CWidgetHeaderDetails>
</CCol>
<CCol sm="6" lg="3">
<CWidgetHeaderDetails
color="danger"
right-header="SALE"
right-footer="Today 6:43 AM"
left-header="$1.890,65"
left-footer="+432,50 (15,78%)"
>
<CChartLineSimple style="height:40px"/>
<CChartBarSimple style="height:40px"/>
</CWidgetHeaderDetails>
</CCol>
<CCol sm="6" lg="3">
<CWidgetHeaderDetails
color="warning"
right-header="SALE"
right-footer="Today 6:43 AM"
left-header="$1.890,65"
left-footer="+432,50 (15,78%)"
>
<CChartLineSimple style="height:40px"/>
<CChartBarSimple style="height:40px"/>
</CWidgetHeaderDetails>
</CCol>
</CRow>
<CRow> <CRow>
<CCol sm="4" lg="2"> <CCol sm="4" lg="2">
<CWidgetSimple header="title" text="1,123"> <CWidgetSimple header="title" text="1,123">