sean/manja_ui_dev
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

refactor: delete 'c-' class prefix, update coreui styles to alpha-v13

Browse Source
This commit is contained in:
woothu
2019-09-20 13:59:53 +02:00
parent 6969728859
commit b3e6540052
46 changed files with 1125 additions and 1132 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/base/ProgressBars.vue
+31 -31
View File
@@ -1,11 +1,11 @@
<template>
<div class="c-wrapper">
<div class="wrapper">
<div>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Progress</strong>
<div class="c-card-header-actions">
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Progress"
class="card-header-action"
@@ -18,7 +18,7 @@
</CCardHeader>
<CCardBody>
<CProgress :value="counter" :max="max" show-progress animated></CProgress>
<CProgress class="c-mt-1" :max="max" show-value>
<CProgress class="mt-1" :max="max" show-value>
<CProgressBar :value="counter*(6/10)" variant="success"/>
<CProgressBar :value="counter*(2.5/10)" variant="warning"/>
<CProgressBar :value="counter*(1.5/10)" variant="danger"/>
@@ -26,7 +26,7 @@
<CButton
@click="clicked"
variant="secondary"
class="c-mt-4"
class="mt-4"
>
Click me to animate progress bars
</CButton>
@@ -38,15 +38,15 @@
</CCardHeader>
<CCardBody>
<h6>No label</h6>
<CProgress :value="value" :max="max2" class="c-mb-3"/>
<CProgress :value="value" :max="max2" class="mb-3"/>
<h6>Value label</h6>
<CProgress :value="value" :max="max2" show-value class="c-mb-3"/>
<CProgress :value="value" :max="max2" show-value class="mb-3"/>
<h6>Progress label</h6>
<CProgress :value="value" :max="max2" show-progress class="c-mb-3"/>
<CProgress :value="value" :max="max2" show-progress class="mb-3"/>
<h6>Value label with precision</h6>
<CProgress :value="value" :max="max2" :precision="2" show-value class="c-mb-3"/>
<CProgress :value="value" :max="max2" :precision="2" show-value class="mb-3"/>
<h6>Progress label with precision</h6>
<CProgress :value="value" :max="max2" :precision="2" show-progress class="c-mb-3"/>
<CProgress :value="value" :max="max2" :precision="2" show-progress class="mb-3"/>
</CCardBody>
</CCard>
<CCard>
@@ -57,11 +57,11 @@
</CCardHeader>
<CCardBody>
<h6>Default width</h6>
<CProgress :value="value3" class="c-mb-3"/>
<CProgress :value="value3" class="mb-3"/>
<h6>Custom widths</h6>
<CProgress :value="value3" class="c-w-75 c-mb-2"/>
<CProgress :value="value3" class="c-w-50 c-mb-2"/>
<CProgress :value="value3" class="c-w-25"/>
<CProgress :value="value3" class="w-75 mb-2"/>
<CProgress :value="value3" class="w-50 mb-2"/>
<CProgress :value="value3" class="w-25"/>
</CCardBody>
</CCard>
<CCard>
@@ -72,10 +72,10 @@
</CCardHeader>
<CCardBody>
<h6>Default height</h6>
<CProgress :value="value3" show-progress class="c-mb-3"/>
<CProgress :value="value3" show-progress class="mb-3"/>
<h6>Custom heights</h6>
<CProgress height="2rem" :value="value3" show-progress class="c-mb-2"/>
<CProgress height="20px" :value="value3" show-progress class="c-mb-2"/>
<CProgress height="2rem" :value="value3" show-progress class="mb-2"/>
<CProgress height="20px" :value="value3" show-progress class="mb-2"/>
<CProgress height="2px" :value="value3"/>
</CCardBody>
</CCard>
@@ -86,9 +86,9 @@
<small>variants</small>
</CCardHeader>
<CCardBody>
<div :key="index" v-for="(bar, index) in bars" class="c-row c-mb-1">
<div class="c-col-sm-2">{{ bar.variant }}:</div>
<div class="c-col-sm-10 c-pt-1">
<div :key="index" v-for="(bar, index) in bars" class="row mb-1">
<div class="col-sm-2">{{ bar.variant }}:</div>
<div class="col-sm-10 pt-1">
<CProgress
:value="bar.value"
:variant="bar.variant"
@@ -109,25 +109,25 @@
:value="25"
variant="success"
:striped="striped"
class="c-mb-2"
class="mb-2"
/>
<CProgress
:value="50"
variant="info"
:striped="striped"
class="c-mb-2"
class="mb-2"
/>
<CProgress
:value="75"
variant="warning"
:striped="striped"
class="c-mb-2"
class="mb-2"
/>
<CProgress
:value="100"
variant="danger"
:striped="striped"
class="c-mb-2"
class="mb-2"
/>
<CButton variant="secondary" @click="striped = !striped">
{{ striped ? 'Remove' : 'Add'}} Striped
@@ -146,27 +146,27 @@
variant="success"
striped
:animated="animate"
class="c-mb-2"
class="mb-2"
/>
<CProgress
:value="50"
variant="info"
striped
:animated="animate"
class="c-mb-2"
class="mb-2"
/>
<CProgress
:value="75"
variant="warning"
striped
:animated="animate"
class="c-mb-2"
class="mb-2"
/>
<CProgress
:value="100"
variant="danger"
:animated="animate"
class="c-mb-3"
class="mb-3"
/>
<CButton variant="secondary" @click="animate = !animate">
{{ animate ? 'Stop' : 'Start'}} Animation
@@ -180,22 +180,22 @@
<small>multiple bars</small>
</CCardHeader>
<CCardBody>
<CProgress :max="max3" class="c-mb-3">
<CProgress :max="max3" class="mb-3">
<CProgressBar variant="primary" :value="values[0]"/>
<CProgressBar variant="success" :value="values[1]"/>
<CProgressBar variant="info" :value="values[2]"/>
</CProgress>
<CProgress show-progress :max="max3" class="c-mb-3">
<CProgress show-progress :max="max3" class="mb-3">
<CProgressBar variant="primary" :value="values[0]"/>
<CProgressBar variant="success" :value="values[1]"/>
<CProgressBar variant="info" :value="values[2]"/>
</CProgress>
<CProgress show-value striped :max="max3" class="c-mb-3">
<CProgress show-value striped :max="max3" class="mb-3">
<CProgressBar variant="primary" :value="values[0]"/>
<CProgressBar variant="success" :value="values[1]"/>
<CProgressBar variant="info" :value="values[2]"/>
</CProgress>
<CProgress :max="max3" class="c-mb-3">
<CProgress :max="max3" class="mb-3">
<CProgressBar variant="primary" :value="values[0]" show-progress/>
<CProgressBar variant="success" :value="values[1]" animated show-progress/>
<CProgressBar variant="info" :value="values[2]" striped show-progress/>