refactor: remplace variant prop with color
This commit is contained in:
woothu
+42
-42
@@ -9,12 +9,12 @@
|
|||||||
<div class="small text-muted">November 2017</div>
|
<div class="small text-muted">November 2017</div>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="7" class="d-none d-md-block">
|
<CCol sm="7" class="d-none d-md-block">
|
||||||
<CButton variant="primary" class="float-right">
|
<CButton color="primary" class="float-right">
|
||||||
<i class="cui-cloud-download"></i>
|
<i class="cui-cloud-download"></i>
|
||||||
</CButton>
|
</CButton>
|
||||||
<CButtonGroup class="float-right mr-3">
|
<CButtonGroup class="float-right mr-3">
|
||||||
<CButton
|
<CButton
|
||||||
variant="outline-secondary"
|
color="outline-secondary"
|
||||||
v-for="(value, key) in ['Day', 'Month', 'Year']"
|
v-for="(value, key) in ['Day', 'Month', 'Year']"
|
||||||
:key="key"
|
:key="key"
|
||||||
class="mx-0"
|
class="mx-0"
|
||||||
@@ -36,7 +36,7 @@
|
|||||||
<CProgress
|
<CProgress
|
||||||
class="progress-xs mt-2"
|
class="progress-xs mt-2"
|
||||||
:precision="1"
|
:precision="1"
|
||||||
variant="success"
|
color="success"
|
||||||
:value="40"
|
:value="40"
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -46,7 +46,7 @@
|
|||||||
<CProgress
|
<CProgress
|
||||||
class="progress-xs mt-2"
|
class="progress-xs mt-2"
|
||||||
:precision="1"
|
:precision="1"
|
||||||
variant="info"
|
color="info"
|
||||||
:value="20"
|
:value="20"
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -56,7 +56,7 @@
|
|||||||
<CProgress
|
<CProgress
|
||||||
class="progress-xs mt-2"
|
class="progress-xs mt-2"
|
||||||
:precision="1"
|
:precision="1"
|
||||||
variant="warning"
|
color="warning"
|
||||||
:value="60"
|
:value="60"
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -66,7 +66,7 @@
|
|||||||
<CProgress
|
<CProgress
|
||||||
class="progress-xs mt-2"
|
class="progress-xs mt-2"
|
||||||
:precision="1"
|
:precision="1"
|
||||||
variant="danger"
|
color="danger"
|
||||||
:value="80"
|
:value="80"
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -90,13 +90,13 @@
|
|||||||
<CCol sm="12" lg="6">
|
<CCol sm="12" lg="6">
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol sm="6">
|
<CCol sm="6">
|
||||||
<CCallout variant="info">
|
<CCallout color="info">
|
||||||
<small class="text-muted">New Clients</small><br>
|
<small class="text-muted">New Clients</small><br>
|
||||||
<strong class="h4">9,123</strong>
|
<strong class="h4">9,123</strong>
|
||||||
</CCallout>
|
</CCallout>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6">
|
<CCol sm="6">
|
||||||
<CCallout variant="danger">
|
<CCallout color="danger">
|
||||||
<small class="text-muted">Recurring Clients</small><br>
|
<small class="text-muted">Recurring Clients</small><br>
|
||||||
<strong class="h4">22,643</strong>
|
<strong class="h4">22,643</strong>
|
||||||
</CCallout>
|
</CCallout>
|
||||||
@@ -112,12 +112,12 @@
|
|||||||
<div class="progress-group-bars">
|
<div class="progress-group-bars">
|
||||||
<CProgress
|
<CProgress
|
||||||
class="progress-xs"
|
class="progress-xs"
|
||||||
variant="info"
|
color="info"
|
||||||
:value="34"
|
:value="34"
|
||||||
/>
|
/>
|
||||||
<CProgress
|
<CProgress
|
||||||
class="progress-xs"
|
class="progress-xs"
|
||||||
variant="danger"
|
color="danger"
|
||||||
:value="78"
|
:value="78"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@@ -132,12 +132,12 @@
|
|||||||
<CProgress
|
<CProgress
|
||||||
class="progress-xs"
|
class="progress-xs"
|
||||||
:value="56"
|
:value="56"
|
||||||
variant="info"
|
color="info"
|
||||||
/>
|
/>
|
||||||
<CProgress
|
<CProgress
|
||||||
class="progress-xs"
|
class="progress-xs"
|
||||||
:value="94"
|
:value="94"
|
||||||
variant="danger"
|
color="danger"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -151,12 +151,12 @@
|
|||||||
<CProgress
|
<CProgress
|
||||||
class="progress-xs"
|
class="progress-xs"
|
||||||
:value="12"
|
:value="12"
|
||||||
variant="info"
|
color="info"
|
||||||
/>
|
/>
|
||||||
<CProgress
|
<CProgress
|
||||||
class="progress-xs"
|
class="progress-xs"
|
||||||
:value="67"
|
:value="67"
|
||||||
variant="danger"
|
color="danger"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -170,12 +170,12 @@
|
|||||||
<CProgress
|
<CProgress
|
||||||
class="progress-xs"
|
class="progress-xs"
|
||||||
:value="43"
|
:value="43"
|
||||||
variant="info"
|
color="info"
|
||||||
/>
|
/>
|
||||||
<CProgress
|
<CProgress
|
||||||
class="progress-xs"
|
class="progress-xs"
|
||||||
:value="91"
|
:value="91"
|
||||||
variant="danger"
|
color="danger"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -189,12 +189,12 @@
|
|||||||
<CProgress
|
<CProgress
|
||||||
class="progress-xs"
|
class="progress-xs"
|
||||||
:value="22"
|
:value="22"
|
||||||
variant="info"
|
color="info"
|
||||||
/>
|
/>
|
||||||
<CProgress
|
<CProgress
|
||||||
class="progress-xs"
|
class="progress-xs"
|
||||||
:value="73"
|
:value="73"
|
||||||
variant="danger"
|
color="danger"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -208,12 +208,12 @@
|
|||||||
<CProgress
|
<CProgress
|
||||||
class="progress-xs"
|
class="progress-xs"
|
||||||
:value="53"
|
:value="53"
|
||||||
variant="info"
|
color="info"
|
||||||
/>
|
/>
|
||||||
<CProgress
|
<CProgress
|
||||||
class="progress-xs"
|
class="progress-xs"
|
||||||
:value="82"
|
:value="82"
|
||||||
variant="danger"
|
color="danger"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -227,21 +227,21 @@
|
|||||||
<CProgress
|
<CProgress
|
||||||
class="progress-xs"
|
class="progress-xs"
|
||||||
:value="9"
|
:value="9"
|
||||||
variant="info"
|
color="info"
|
||||||
/>
|
/>
|
||||||
<CProgress
|
<CProgress
|
||||||
class="progress-xs"
|
class="progress-xs"
|
||||||
:value="69"
|
:value="69"
|
||||||
variant="danger"
|
color="danger"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="legend text-center">
|
<div class="legend text-center">
|
||||||
<small>
|
<small>
|
||||||
<sup><CBadge pill variant="info"> </CBadge></sup>
|
<sup><CBadge pill color="info"> </CBadge></sup>
|
||||||
New clients
|
New clients
|
||||||
|
|
||||||
<sup><CBadge pill variant="danger"> </CBadge></sup>
|
<sup><CBadge pill color="danger"> </CBadge></sup>
|
||||||
Recurring clients
|
Recurring clients
|
||||||
</small>
|
</small>
|
||||||
</div>
|
</div>
|
||||||
@@ -249,13 +249,13 @@
|
|||||||
<CCol sm="12" lg="6">
|
<CCol sm="12" lg="6">
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol sm="6">
|
<CCol sm="6">
|
||||||
<CCallout variant="warning">
|
<CCallout color="warning">
|
||||||
<small class="text-muted">Pageviews</small><br>
|
<small class="text-muted">Pageviews</small><br>
|
||||||
<strong class="h4">78,623</strong>
|
<strong class="h4">78,623</strong>
|
||||||
</CCallout>
|
</CCallout>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6">
|
<CCol sm="6">
|
||||||
<CCallout variant="success">
|
<CCallout color="success">
|
||||||
<small class="text-muted">Organic</small><br>
|
<small class="text-muted">Organic</small><br>
|
||||||
<strong class="h4">49,123</strong>
|
<strong class="h4">49,123</strong>
|
||||||
</CCallout>
|
</CCallout>
|
||||||
@@ -273,7 +273,7 @@
|
|||||||
<CProgress
|
<CProgress
|
||||||
class="progress-xs"
|
class="progress-xs"
|
||||||
:value="43"
|
:value="43"
|
||||||
variant="warning"
|
color="warning"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -287,7 +287,7 @@
|
|||||||
<CProgress
|
<CProgress
|
||||||
class="progress-xs"
|
class="progress-xs"
|
||||||
:value="37"
|
:value="37"
|
||||||
variant="warning"
|
color="warning"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -303,7 +303,7 @@
|
|||||||
<CProgress
|
<CProgress
|
||||||
class="progress-xs"
|
class="progress-xs"
|
||||||
:value="56"
|
:value="56"
|
||||||
variant="success"
|
color="success"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -323,7 +323,7 @@
|
|||||||
<CProgress
|
<CProgress
|
||||||
class="progress-xs"
|
class="progress-xs"
|
||||||
:value="15"
|
:value="15"
|
||||||
variant="success"
|
color="success"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -343,7 +343,7 @@
|
|||||||
<CProgress
|
<CProgress
|
||||||
class="progress-xs"
|
class="progress-xs"
|
||||||
:value="11"
|
:value="11"
|
||||||
variant="success"
|
color="success"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -363,12 +363,12 @@
|
|||||||
<CProgress
|
<CProgress
|
||||||
class="progress-xs"
|
class="progress-xs"
|
||||||
:value="8"
|
:value="8"
|
||||||
variant="success"
|
color="success"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="divider text-center">
|
<div class="divider text-center">
|
||||||
<CButton variant="link" size="sm" class="text-muted">
|
<CButton color="link" size="sm" class="text-muted">
|
||||||
<i class="cui-options"></i>
|
<i class="cui-options"></i>
|
||||||
</CButton>
|
</CButton>
|
||||||
</div>
|
</div>
|
||||||
@@ -381,7 +381,7 @@
|
|||||||
hover
|
hover
|
||||||
:items="tableItems"
|
:items="tableItems"
|
||||||
:fields="tableFields"
|
:fields="tableFields"
|
||||||
head-variant="light"
|
head-color="light"
|
||||||
no-sorting
|
no-sorting
|
||||||
>
|
>
|
||||||
<td slot="avatar" class="text-center" slot-scope="{item}">
|
<td slot="avatar" class="text-center" slot-scope="{item}">
|
||||||
@@ -424,7 +424,7 @@
|
|||||||
<CProgress
|
<CProgress
|
||||||
class="progress-xs"
|
class="progress-xs"
|
||||||
v-model="item.usage.value"
|
v-model="item.usage.value"
|
||||||
:variant="variant(item.usage.value)"
|
:color="color(item.usage.value)"
|
||||||
/>
|
/>
|
||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
@@ -524,18 +524,18 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
variant (value) {
|
color (value) {
|
||||||
let $variant
|
let $color
|
||||||
if (value <= 25) {
|
if (value <= 25) {
|
||||||
$variant = 'info'
|
$color = 'info'
|
||||||
} else if (value > 25 && value <= 50) {
|
} else if (value > 25 && value <= 50) {
|
||||||
$variant = 'success'
|
$color = 'success'
|
||||||
} else if (value > 50 && value <= 75) {
|
} else if (value > 50 && value <= 75) {
|
||||||
$variant = 'warning'
|
$color = 'warning'
|
||||||
} else if (value > 75 && value <= 100) {
|
} else if (value > 75 && value <= 100) {
|
||||||
$variant = 'danger'
|
$color = 'danger'
|
||||||
}
|
}
|
||||||
return $variant
|
return $color
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -38,7 +38,7 @@
|
|||||||
class="float-right"
|
class="float-right"
|
||||||
size="sm"
|
size="sm"
|
||||||
shape="pill"
|
shape="pill"
|
||||||
variant="info"
|
color="info"
|
||||||
data-on="On"
|
data-on="On"
|
||||||
data-off="Off"
|
data-off="Off"
|
||||||
:checked="true"
|
:checked="true"
|
||||||
@@ -53,7 +53,7 @@
|
|||||||
<CCard>
|
<CCard>
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
Card with label
|
Card with label
|
||||||
<CBadge variant="success" class="float-right">Success</CBadge>
|
<CBadge color="success" class="float-right">Success</CBadge>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
{{loremIpsum}}
|
{{loremIpsum}}
|
||||||
@@ -64,7 +64,7 @@
|
|||||||
<CCard>
|
<CCard>
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
Card with label
|
Card with label
|
||||||
<CBadge pill variant="danger" class="float-right">42</CBadge>
|
<CBadge pill color="danger" class="float-right">42</CBadge>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
{{loremIpsum}}
|
{{loremIpsum}}
|
||||||
@@ -76,38 +76,38 @@
|
|||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard
|
<CCard
|
||||||
header="Card outline primary"
|
header="Card outline primary"
|
||||||
border-variant="primary"
|
border-color="primary"
|
||||||
:body-html="loremIpsum"
|
:body-html="loremIpsum"
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard
|
<CCard
|
||||||
header="Card outline secondary"
|
header="Card outline secondary"
|
||||||
border-variant="secondary"
|
border-color="secondary"
|
||||||
:body-html="loremIpsum"
|
:body-html="loremIpsum"
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard
|
<CCard
|
||||||
header="Card outline success"
|
header="Card outline success"
|
||||||
border-variant="success"
|
border-color="success"
|
||||||
body-wrapper
|
body-wrapper
|
||||||
>
|
>
|
||||||
{{loremIpsum}}
|
{{loremIpsum}}
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard header-html="Card outline info" border-variant="info" body-wrapper>
|
<CCard header-html="Card outline info" border-color="info" body-wrapper>
|
||||||
{{loremIpsum}}
|
{{loremIpsum}}
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard header-html="Card outline warning" border-variant="warning" body-wrapper>
|
<CCard header-html="Card outline warning" border-color="warning" body-wrapper>
|
||||||
{{loremIpsum}}
|
{{loremIpsum}}
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" md="4">
|
<CCol sm="6" md="4">
|
||||||
<CCard header-html="Card outline danger" border-variant="danger" body-wrapper>
|
<CCard header-html="Card outline danger" border-color="danger" body-wrapper>
|
||||||
{{loremIpsum}}
|
{{loremIpsum}}
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
|
|||||||
@@ -17,13 +17,13 @@
|
|||||||
</div>
|
</div>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CButton id="collapse1" variant="primary">
|
<CButton id="collapse1" color="primary">
|
||||||
Toggle Collapse
|
Toggle Collapse
|
||||||
</CButton>
|
</CButton>
|
||||||
<CCollapse toggler="collapse1" class="mt-2">
|
<CCollapse toggler="collapse1" class="mt-2">
|
||||||
<CCard body-wrapper>
|
<CCard body-wrapper>
|
||||||
<p class="card-text">Collapse contents Here</p>
|
<p class="card-text">Collapse contents Here</p>
|
||||||
<CButton id="collapse2" size="sm" variant="secondary">
|
<CButton id="collapse2" size="sm" color="secondary">
|
||||||
Toggle Inner Collapse
|
Toggle Inner Collapse
|
||||||
</CButton>
|
</CButton>
|
||||||
<CCollapse toggler="collapse2" class="mt-2">
|
<CCollapse toggler="collapse2" class="mt-2">
|
||||||
|
|||||||
+43
-43
@@ -246,8 +246,8 @@
|
|||||||
</CForm>
|
</CForm>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter>
|
<CCardFooter>
|
||||||
<CButton type="submit" size="sm" variant="primary"><i class="cui-circle-check"></i> Submit</CButton>
|
<CButton type="submit" size="sm" color="primary"><i class="cui-circle-check"></i> Submit</CButton>
|
||||||
<CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
|
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
|
||||||
</CCardFooter>
|
</CCardFooter>
|
||||||
</CCard>
|
</CCard>
|
||||||
<CCard>
|
<CCard>
|
||||||
@@ -277,8 +277,8 @@
|
|||||||
</CForm>
|
</CForm>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter>
|
<CCardFooter>
|
||||||
<CButton type="submit" size="sm" variant="primary"><i class="cui-circle-check"></i> Submit</CButton>
|
<CButton type="submit" size="sm" color="primary"><i class="cui-circle-check"></i> Submit</CButton>
|
||||||
<CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
|
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
|
||||||
</CCardFooter>
|
</CCardFooter>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -308,8 +308,8 @@
|
|||||||
</CForm>
|
</CForm>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter>
|
<CCardFooter>
|
||||||
<CButton type="submit" size="sm" variant="primary"><i class="cui-circle-check"></i> Submit</CButton>
|
<CButton type="submit" size="sm" color="primary"><i class="cui-circle-check"></i> Submit</CButton>
|
||||||
<CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
|
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
|
||||||
</CCardFooter>
|
</CCardFooter>
|
||||||
</CCard>
|
</CCard>
|
||||||
<CCard>
|
<CCard>
|
||||||
@@ -338,8 +338,8 @@
|
|||||||
/>
|
/>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter>
|
<CCardFooter>
|
||||||
<CButton type="submit" size="sm" variant="primary"><i class="cui-circle-check"></i> Submit</CButton>
|
<CButton type="submit" size="sm" color="primary"><i class="cui-circle-check"></i> Submit</CButton>
|
||||||
<CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
|
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
|
||||||
</CCardFooter>
|
</CCardFooter>
|
||||||
</CForm>
|
</CForm>
|
||||||
</CCard>
|
</CCard>
|
||||||
@@ -400,8 +400,8 @@
|
|||||||
</CRow>
|
</CRow>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter>
|
<CCardFooter>
|
||||||
<CButton type="submit" size="sm" variant="primary"><i class="cui-user"></i> Login</CButton>
|
<CButton type="submit" size="sm" color="primary"><i class="cui-user"></i> Login</CButton>
|
||||||
<CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
|
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
|
||||||
</CCardFooter>
|
</CCardFooter>
|
||||||
</CCard>
|
</CCard>
|
||||||
<CCard>
|
<CCard>
|
||||||
@@ -428,8 +428,8 @@
|
|||||||
/>
|
/>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter>
|
<CCardFooter>
|
||||||
<CButton type="submit" size="sm" variant="primary"><i class="cui-circle-check"></i> Submit</CButton>
|
<CButton type="submit" size="sm" color="primary"><i class="cui-circle-check"></i> Submit</CButton>
|
||||||
<CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
|
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
|
||||||
</CCardFooter>
|
</CCardFooter>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -506,8 +506,8 @@
|
|||||||
/>
|
/>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter>
|
<CCardFooter>
|
||||||
<CButton type="submit" size="sm" variant="success"><i class="cui-circle-check"></i> Submit</CButton>
|
<CButton type="submit" size="sm" color="success"><i class="cui-circle-check"></i> Submit</CButton>
|
||||||
<CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
|
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
|
||||||
</CCardFooter>
|
</CCardFooter>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -519,7 +519,7 @@
|
|||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CFormInput placeholder="Username">
|
<CFormInput placeholder="Username">
|
||||||
<template #prepend>
|
<template #prepend>
|
||||||
<CButton variant="primary">
|
<CButton color="primary">
|
||||||
<i class="cui-magnifying-glass"></i> Search
|
<i class="cui-magnifying-glass"></i> Search
|
||||||
</CButton>
|
</CButton>
|
||||||
</template>
|
</template>
|
||||||
@@ -530,7 +530,7 @@
|
|||||||
autocomplete="email"
|
autocomplete="email"
|
||||||
>
|
>
|
||||||
<template #append>
|
<template #append>
|
||||||
<CButton type="submit" variant="primary">Submit</CButton>
|
<CButton type="submit" color="primary">Submit</CButton>
|
||||||
</template>
|
</template>
|
||||||
</CFormInput>
|
</CFormInput>
|
||||||
<CFormInput
|
<CFormInput
|
||||||
@@ -539,16 +539,16 @@
|
|||||||
autocomplete="email"
|
autocomplete="email"
|
||||||
>
|
>
|
||||||
<template #prepend>
|
<template #prepend>
|
||||||
<CButton variant="primary"><CIcon name="facebook" height="14"/></CButton>
|
<CButton color="primary"><CIcon name="facebook" height="14"/></CButton>
|
||||||
</template>
|
</template>
|
||||||
<template #append>
|
<template #append>
|
||||||
<CButton variant="primary"><CIcon name="twitter" height="14"/></CButton>
|
<CButton color="primary"><CIcon name="twitter" height="14"/></CButton>
|
||||||
</template>
|
</template>
|
||||||
</CFormInput>
|
</CFormInput>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter>
|
<CCardFooter>
|
||||||
<CButton type="submit" size="sm" variant="success"><i class="cui-circle-check"></i> Submit</CButton>
|
<CButton type="submit" size="sm" color="success"><i class="cui-circle-check"></i> Submit</CButton>
|
||||||
<CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
|
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
|
||||||
</CCardFooter>
|
</CCardFooter>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -562,7 +562,7 @@
|
|||||||
<template #prepend>
|
<template #prepend>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
togglerText="Action"
|
togglerText="Action"
|
||||||
variant="primary"
|
color="primary"
|
||||||
>
|
>
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
<CDropdownItem>Action</CDropdownItem>
|
||||||
<CDropdownItem>Another action</CDropdownItem>
|
<CDropdownItem>Another action</CDropdownItem>
|
||||||
@@ -579,7 +579,7 @@
|
|||||||
<template #append>
|
<template #append>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
togglerText="Action"
|
togglerText="Action"
|
||||||
variant="primary"
|
color="primary"
|
||||||
right
|
right
|
||||||
>
|
>
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
<CDropdownItem>Action</CDropdownItem>
|
||||||
@@ -594,7 +594,7 @@
|
|||||||
<template #prepend>
|
<template #prepend>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
togglerText="Split"
|
togglerText="Split"
|
||||||
variant="primary"
|
color="primary"
|
||||||
split
|
split
|
||||||
>
|
>
|
||||||
<CDropdownItem href="#">Action</CDropdownItem>
|
<CDropdownItem href="#">Action</CDropdownItem>
|
||||||
@@ -607,7 +607,7 @@
|
|||||||
<template #append>
|
<template #append>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
togglerText="Action"
|
togglerText="Action"
|
||||||
variant="primary"
|
color="primary"
|
||||||
right
|
right
|
||||||
>
|
>
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
<CDropdownItem>Action</CDropdownItem>
|
||||||
@@ -620,8 +620,8 @@
|
|||||||
</CFormInput>
|
</CFormInput>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter>
|
<CCardFooter>
|
||||||
<CButton type="submit" size="sm" variant="success"><i class="cui-circle-check"></i> Submit</CButton>
|
<CButton type="submit" size="sm" color="success"><i class="cui-circle-check"></i> Submit</CButton>
|
||||||
<CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
|
<CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
|
||||||
</CCardFooter>
|
</CCardFooter>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -647,11 +647,11 @@
|
|||||||
</CRow>
|
</CRow>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter>
|
<CCardFooter>
|
||||||
<CButton size="sm" variant="primary">Action</CButton>
|
<CButton size="sm" color="primary">Action</CButton>
|
||||||
<CButton size="sm" variant="danger">Action</CButton>
|
<CButton size="sm" color="danger">Action</CButton>
|
||||||
<CButton size="sm" variant="warning">Action</CButton>
|
<CButton size="sm" color="warning">Action</CButton>
|
||||||
<CButton size="sm" variant="info">Action</CButton>
|
<CButton size="sm" color="info">Action</CButton>
|
||||||
<CButton size="sm" variant="success">Action</CButton>
|
<CButton size="sm" color="success">Action</CButton>
|
||||||
</CCardFooter>
|
</CCardFooter>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -675,11 +675,11 @@
|
|||||||
</CRow>
|
</CRow>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter>
|
<CCardFooter>
|
||||||
<CButton size="sm" variant="primary">Action</CButton>
|
<CButton size="sm" color="primary">Action</CButton>
|
||||||
<CButton size="sm" variant="danger">Action</CButton>
|
<CButton size="sm" color="danger">Action</CButton>
|
||||||
<CButton size="sm" variant="warning">Action</CButton>
|
<CButton size="sm" color="warning">Action</CButton>
|
||||||
<CButton size="sm" variant="info">Action</CButton>
|
<CButton size="sm" color="info">Action</CButton>
|
||||||
<CButton size="sm" variant="success">Action</CButton>
|
<CButton size="sm" color="success">Action</CButton>
|
||||||
</CCardFooter>
|
</CCardFooter>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -709,7 +709,7 @@
|
|||||||
append-html="<i class='cui-shield'></i>"
|
append-html="<i class='cui-shield'></i>"
|
||||||
/>
|
/>
|
||||||
<div class="form-group form-actions">
|
<div class="form-group form-actions">
|
||||||
<CButton type="submit" size="sm" variant="primary">
|
<CButton type="submit" size="sm" color="primary">
|
||||||
Submit
|
Submit
|
||||||
</CButton>
|
</CButton>
|
||||||
</div>
|
</div>
|
||||||
@@ -773,7 +773,7 @@
|
|||||||
prependHtml="<i class='cui-shield'></i>"
|
prependHtml="<i class='cui-shield'></i>"
|
||||||
/>
|
/>
|
||||||
<div class="form-group form-actions">
|
<div class="form-group form-actions">
|
||||||
<CButton type="submit" size="sm" variant="success">
|
<CButton type="submit" size="sm" color="success">
|
||||||
Submit
|
Submit
|
||||||
</CButton>
|
</CButton>
|
||||||
</div>
|
</div>
|
||||||
@@ -828,18 +828,18 @@
|
|||||||
description="Here's some help text"
|
description="Here's some help text"
|
||||||
>
|
>
|
||||||
<template #append>
|
<template #append>
|
||||||
<CButton variant="primary">Go!</CButton>
|
<CButton color="primary">Go!</CButton>
|
||||||
</template>
|
</template>
|
||||||
</CFormInput>
|
</CFormInput>
|
||||||
<CFormInput label="Two-buttons append">
|
<CFormInput label="Two-buttons append">
|
||||||
<template #append>
|
<template #append>
|
||||||
<CButton variant="primary">Search</CButton>
|
<CButton color="primary">Search</CButton>
|
||||||
<CButton variant="danger">Options</CButton>
|
<CButton color="danger">Options</CButton>
|
||||||
</template>
|
</template>
|
||||||
</CFormInput>
|
</CFormInput>
|
||||||
<div class="form-actions">
|
<div class="form-actions">
|
||||||
<CButton type="submit" variant="primary">Save changes</CButton>
|
<CButton type="submit" color="primary">Save changes</CButton>
|
||||||
<CButton variant="secondary">Cancel</CButton>
|
<CButton color="secondary">Cancel</CButton>
|
||||||
</div>
|
</div>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCollapse>
|
</CCollapse>
|
||||||
|
|||||||
@@ -20,7 +20,7 @@
|
|||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CJumbotron header="Bootstrap 4" lead="Bootstrap 4 Components for Vue.js 2">
|
<CJumbotron header="Bootstrap 4" lead="Bootstrap 4 Components for Vue.js 2">
|
||||||
<p>For more information visit website</p>
|
<p>For more information visit website</p>
|
||||||
<CButton variant="primary" href="#">More Info</CButton>
|
<CButton color="primary" href="#">More Info</CButton>
|
||||||
</CJumbotron>
|
</CJumbotron>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
@@ -42,8 +42,8 @@
|
|||||||
It uses utility classes for typography and spacing to space content
|
It uses utility classes for typography and spacing to space content
|
||||||
out within the larger container.
|
out within the larger container.
|
||||||
</p>
|
</p>
|
||||||
<CButton variant="primary" href="#">Do Something</CButton>
|
<CButton color="primary" href="#">Do Something</CButton>
|
||||||
<CButton variant="success" href="#">Do Something Else</CButton>
|
<CButton color="success" href="#">Do Something Else</CButton>
|
||||||
</CJumbotron>
|
</CJumbotron>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
@@ -54,13 +54,13 @@
|
|||||||
<CCard>
|
<CCard>
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
<i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
|
<i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
|
||||||
<small>variants</small>
|
<small>colors</small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CJumbotron
|
<CJumbotron
|
||||||
variant="info"
|
color="info"
|
||||||
text-variant="white"
|
text-color="white"
|
||||||
border-variant="dark"
|
border-color="dark"
|
||||||
header="Bootstrap 4"
|
header="Bootstrap 4"
|
||||||
>
|
>
|
||||||
<p slot="lead" class="lead">
|
<p slot="lead" class="lead">
|
||||||
|
|||||||
@@ -113,19 +113,19 @@
|
|||||||
class="d-flex justify-content-between align-items-center"
|
class="d-flex justify-content-between align-items-center"
|
||||||
>
|
>
|
||||||
Cras justo odio
|
Cras justo odio
|
||||||
<CBadge variant="primary" pill>14</CBadge>
|
<CBadge color="primary" pill>14</CBadge>
|
||||||
</CListGroupItem>
|
</CListGroupItem>
|
||||||
<CListGroupItem
|
<CListGroupItem
|
||||||
class="d-flex justify-content-between align-items-center"
|
class="d-flex justify-content-between align-items-center"
|
||||||
>
|
>
|
||||||
Dapibus ac facilisis in
|
Dapibus ac facilisis in
|
||||||
<CBadge variant="primary" pill>2</CBadge>
|
<CBadge color="primary" pill>2</CBadge>
|
||||||
</CListGroupItem>
|
</CListGroupItem>
|
||||||
<CListGroupItem
|
<CListGroupItem
|
||||||
class="d-flex justify-content-between align-items-center"
|
class="d-flex justify-content-between align-items-center"
|
||||||
>
|
>
|
||||||
Morbi leo risus
|
Morbi leo risus
|
||||||
<CBadge variant="primary" pill>1</CBadge>
|
<CBadge color="primary" pill>1</CBadge>
|
||||||
</CListGroupItem>
|
</CListGroupItem>
|
||||||
</CListGroup>
|
</CListGroup>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
@@ -138,19 +138,19 @@
|
|||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
<i class="fa fa-align-justify"></i>
|
<i class="fa fa-align-justify"></i>
|
||||||
<strong> List group </strong>
|
<strong> List group </strong>
|
||||||
<small>variants</small>
|
<small>colors</small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CListGroup>
|
<CListGroup>
|
||||||
<CListGroupItem>This is a default list group item</CListGroupItem>
|
<CListGroupItem>This is a default list group item</CListGroupItem>
|
||||||
<CListGroupItem variant="primary">This is a primary list group item</CListGroupItem>
|
<CListGroupItem color="primary">This is a primary list group item</CListGroupItem>
|
||||||
<CListGroupItem variant="secondary">This is a secondary list group item</CListGroupItem>
|
<CListGroupItem color="secondary">This is a secondary list group item</CListGroupItem>
|
||||||
<CListGroupItem variant="success">This is a success list group item</CListGroupItem>
|
<CListGroupItem color="success">This is a success list group item</CListGroupItem>
|
||||||
<CListGroupItem variant="danger">This is a danger list group item</CListGroupItem>
|
<CListGroupItem color="danger">This is a danger list group item</CListGroupItem>
|
||||||
<CListGroupItem variant="warning">This is a warning list group item</CListGroupItem>
|
<CListGroupItem color="warning">This is a warning list group item</CListGroupItem>
|
||||||
<CListGroupItem variant="info">This is a info list group item</CListGroupItem>
|
<CListGroupItem color="info">This is a info list group item</CListGroupItem>
|
||||||
<CListGroupItem variant="light">This is a light list group item</CListGroupItem>
|
<CListGroupItem color="light">This is a light list group item</CListGroupItem>
|
||||||
<CListGroupItem variant="dark">This is a dark list group item</CListGroupItem>
|
<CListGroupItem color="dark">This is a dark list group item</CListGroupItem>
|
||||||
</CListGroup>
|
</CListGroup>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
@@ -160,19 +160,19 @@
|
|||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
<i class="fa fa-align-justify"></i>
|
<i class="fa fa-align-justify"></i>
|
||||||
<strong> List group </strong>
|
<strong> List group </strong>
|
||||||
<small>variants active</small>
|
<small>colors active</small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CListGroup>
|
<CListGroup>
|
||||||
<CListGroupItem href="#">This is a default list group item</CListGroupItem>
|
<CListGroupItem href="#">This is a default list group item</CListGroupItem>
|
||||||
<CListGroupItem href="#" variant="primary">This is a primary list group item</CListGroupItem>
|
<CListGroupItem href="#" color="primary">This is a primary list group item</CListGroupItem>
|
||||||
<CListGroupItem href="#" variant="secondary">This is a secondary list group item</CListGroupItem>
|
<CListGroupItem href="#" color="secondary">This is a secondary list group item</CListGroupItem>
|
||||||
<CListGroupItem href="#" variant="success">This is a success list group item</CListGroupItem>
|
<CListGroupItem href="#" color="success">This is a success list group item</CListGroupItem>
|
||||||
<CListGroupItem href="#" variant="danger">This is a danger list group item</CListGroupItem>
|
<CListGroupItem href="#" color="danger">This is a danger list group item</CListGroupItem>
|
||||||
<CListGroupItem href="#" variant="warning">This is a warning list group item</CListGroupItem>
|
<CListGroupItem href="#" color="warning">This is a warning list group item</CListGroupItem>
|
||||||
<CListGroupItem href="#" variant="info">This is a info list group item</CListGroupItem>
|
<CListGroupItem href="#" color="info">This is a info list group item</CListGroupItem>
|
||||||
<CListGroupItem href="#" variant="light">This is a light list group item</CListGroupItem>
|
<CListGroupItem href="#" color="light">This is a light list group item</CListGroupItem>
|
||||||
<CListGroupItem href="#" variant="dark">This is a dark list group item</CListGroupItem>
|
<CListGroupItem href="#" color="dark">This is a dark list group item</CListGroupItem>
|
||||||
</CListGroup>
|
</CListGroup>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
|
|||||||
@@ -18,7 +18,7 @@
|
|||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CNavbar
|
<CNavbar
|
||||||
toggleable="md"
|
toggleable="md"
|
||||||
variant="info"
|
color="info"
|
||||||
>
|
>
|
||||||
<CNavbarToggler @click="show=!show"/>
|
<CNavbarToggler @click="show=!show"/>
|
||||||
<CNavbarBrand href="#">NavBar</CNavbarBrand>
|
<CNavbarBrand href="#">NavBar</CNavbarBrand>
|
||||||
@@ -36,7 +36,7 @@
|
|||||||
placeholder="Search"
|
placeholder="Search"
|
||||||
size="sm"
|
size="sm"
|
||||||
/>
|
/>
|
||||||
<CButton variant="light" size="sm" class="my-2 my-sm-0">
|
<CButton color="light" size="sm" class="my-2 my-sm-0">
|
||||||
Search
|
Search
|
||||||
</CButton>
|
</CButton>
|
||||||
</CForm>
|
</CForm>
|
||||||
@@ -72,7 +72,7 @@
|
|||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<!-- Image and text -->
|
<!-- Image and text -->
|
||||||
<CNavbar variant="faded" light>
|
<CNavbar color="faded" light>
|
||||||
<CNavbarBrand href="#">
|
<CNavbarBrand href="#">
|
||||||
<img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="CoreuiVue">
|
<img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="CoreuiVue">
|
||||||
CoreuiVue
|
CoreuiVue
|
||||||
@@ -86,7 +86,7 @@
|
|||||||
<small>text</small>
|
<small>text</small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CNavbar toggleable="sm" light variant="light">
|
<CNavbar toggleable="sm" light color="light">
|
||||||
<CNavbarToggle @click="navbarText=!navbarText"></CNavbarToggle>
|
<CNavbarToggle @click="navbarText=!navbarText"></CNavbarToggle>
|
||||||
<CNavbarBrand>CoreuiVue</CNavbarBrand>
|
<CNavbarBrand>CoreuiVue</CNavbarBrand>
|
||||||
<CCollapse :show="navbarText" navbar>
|
<CCollapse :show="navbarText" navbar>
|
||||||
@@ -103,7 +103,7 @@
|
|||||||
<small>dropdown</small>
|
<small>dropdown</small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CNavbar toggleable="sm" variant="primary">
|
<CNavbar toggleable="sm" color="primary">
|
||||||
<CNavbarToggle @click="navbarDropdown = !navbarDropdown"></CNavbarToggle>
|
<CNavbarToggle @click="navbarDropdown = !navbarDropdown"></CNavbarToggle>
|
||||||
<CCollapse :show="navbarDropdown" navbar>
|
<CCollapse :show="navbarDropdown" navbar>
|
||||||
<CNavbarNav>
|
<CNavbarNav>
|
||||||
@@ -139,14 +139,14 @@
|
|||||||
<small>form</small>
|
<small>form</small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CNavbar light variant="light">
|
<CNavbar light color="light">
|
||||||
<CForm inline>
|
<CForm inline>
|
||||||
<CFormInput
|
<CFormInput
|
||||||
class="mr-sm-2"
|
class="mr-sm-2"
|
||||||
placeholder="Search"
|
placeholder="Search"
|
||||||
size="sm"
|
size="sm"
|
||||||
/>
|
/>
|
||||||
<CButton variant="outline-success" class="my-2 my-sm-0" type="submit">Search</CButton>
|
<CButton color="outline-success" class="my-2 my-sm-0" type="submit">Search</CButton>
|
||||||
</CForm>
|
</CForm>
|
||||||
</CNavbar>
|
</CNavbar>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
@@ -157,7 +157,7 @@
|
|||||||
<small>input group</small>
|
<small>input group</small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CNavbar light variant="light">
|
<CNavbar light color="light">
|
||||||
<CForm inline>
|
<CForm inline>
|
||||||
<CFormInput
|
<CFormInput
|
||||||
class="mr-sm-2"
|
class="mr-sm-2"
|
||||||
|
|||||||
@@ -20,7 +20,7 @@
|
|||||||
<CCol col="4">
|
<CCol col="4">
|
||||||
<div class="my-3 text-center">
|
<div class="my-3 text-center">
|
||||||
<CButton
|
<CButton
|
||||||
variant="primary"
|
color="primary"
|
||||||
v-c-popover="{
|
v-c-popover="{
|
||||||
header: 'Popover header',
|
header: 'Popover header',
|
||||||
content: 'I am popover content!'
|
content: 'I am popover content!'
|
||||||
@@ -33,7 +33,7 @@
|
|||||||
<CCol col="4">
|
<CCol col="4">
|
||||||
<div class="my-3 text-center">
|
<div class="my-3 text-center">
|
||||||
<CButton
|
<CButton
|
||||||
variant="primary"
|
color="primary"
|
||||||
v-c-popover="{
|
v-c-popover="{
|
||||||
header: 'Popover!',
|
header: 'Popover!',
|
||||||
content: 'I start <strong>open</strong>',
|
content: 'I start <strong>open</strong>',
|
||||||
@@ -46,7 +46,7 @@
|
|||||||
<CCol col="4">
|
<CCol col="4">
|
||||||
<div class="my-3 text-center">
|
<div class="my-3 text-center">
|
||||||
<CButton
|
<CButton
|
||||||
variant="primary"
|
color="primary"
|
||||||
v-c-popover.click="{
|
v-c-popover.click="{
|
||||||
header: 'Popover!',
|
header: 'Popover!',
|
||||||
content: 'I am showing on click and hiding on click outside tooltip!',
|
content: 'I am showing on click and hiding on click outside tooltip!',
|
||||||
@@ -75,7 +75,7 @@
|
|||||||
:key="placement"
|
:key="placement"
|
||||||
>
|
>
|
||||||
<CButton
|
<CButton
|
||||||
variant="primary"
|
color="primary"
|
||||||
v-c-popover="{
|
v-c-popover="{
|
||||||
header: 'Popover!',
|
header: 'Popover!',
|
||||||
content: `Placement ${placement}`,
|
content: `Placement ${placement}`,
|
||||||
|
|||||||
@@ -18,13 +18,13 @@
|
|||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CProgress :value="counter" :max="max" show-percentage animated></CProgress>
|
<CProgress :value="counter" :max="max" show-percentage animated></CProgress>
|
||||||
<CProgress class="mt-1" :max="max" show-value>
|
<CProgress class="mt-1" :max="max" show-value>
|
||||||
<CProgressBar :value="counter*(6/10)" variant="success"/>
|
<CProgressBar :value="counter*(6/10)" color="success"/>
|
||||||
<CProgressBar :value="counter*(2.5/10)" variant="warning"/>
|
<CProgressBar :value="counter*(2.5/10)" color="warning"/>
|
||||||
<CProgressBar :value="counter*(1.5/10)" variant="danger"/>
|
<CProgressBar :value="counter*(1.5/10)" color="danger"/>
|
||||||
</CProgress>
|
</CProgress>
|
||||||
<CButton
|
<CButton
|
||||||
@click="clicked"
|
@click="clicked"
|
||||||
variant="secondary"
|
color="secondary"
|
||||||
class="mt-4"
|
class="mt-4"
|
||||||
>
|
>
|
||||||
Click me to animate progress bars
|
Click me to animate progress bars
|
||||||
@@ -82,16 +82,16 @@
|
|||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
<i class="fa fa-align-justify"></i>
|
<i class="fa fa-align-justify"></i>
|
||||||
<strong> Progress </strong>
|
<strong> Progress </strong>
|
||||||
<small>variants</small>
|
<small>colors</small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<div :key="index" v-for="(bar, index) in bars" class="row mb-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-2">{{ bar.color }}:</div>
|
||||||
<div class="col-sm-10 pt-1">
|
<div class="col-sm-10 pt-1">
|
||||||
<CProgress
|
<CProgress
|
||||||
:value="bar.value"
|
:value="bar.value"
|
||||||
:variant="bar.variant"
|
:color="bar.color"
|
||||||
:key="bar.variant"
|
:key="bar.color"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -106,29 +106,29 @@
|
|||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CProgress
|
<CProgress
|
||||||
:value="25"
|
:value="25"
|
||||||
variant="success"
|
color="success"
|
||||||
:striped="striped"
|
:striped="striped"
|
||||||
class="mb-2"
|
class="mb-2"
|
||||||
/>
|
/>
|
||||||
<CProgress
|
<CProgress
|
||||||
:value="50"
|
:value="50"
|
||||||
variant="info"
|
color="info"
|
||||||
:striped="striped"
|
:striped="striped"
|
||||||
class="mb-2"
|
class="mb-2"
|
||||||
/>
|
/>
|
||||||
<CProgress
|
<CProgress
|
||||||
:value="75"
|
:value="75"
|
||||||
variant="warning"
|
color="warning"
|
||||||
:striped="striped"
|
:striped="striped"
|
||||||
class="mb-2"
|
class="mb-2"
|
||||||
/>
|
/>
|
||||||
<CProgress
|
<CProgress
|
||||||
:value="100"
|
:value="100"
|
||||||
variant="danger"
|
color="danger"
|
||||||
:striped="striped"
|
:striped="striped"
|
||||||
class="mb-2"
|
class="mb-2"
|
||||||
/>
|
/>
|
||||||
<CButton variant="secondary" @click="striped = !striped">
|
<CButton color="secondary" @click="striped = !striped">
|
||||||
{{ striped ? 'Remove' : 'Add'}} Striped
|
{{ striped ? 'Remove' : 'Add'}} Striped
|
||||||
</CButton>
|
</CButton>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
@@ -142,32 +142,32 @@
|
|||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CProgress
|
<CProgress
|
||||||
:value="25"
|
:value="25"
|
||||||
variant="success"
|
color="success"
|
||||||
striped
|
striped
|
||||||
:animated="animate"
|
:animated="animate"
|
||||||
class="mb-2"
|
class="mb-2"
|
||||||
/>
|
/>
|
||||||
<CProgress
|
<CProgress
|
||||||
:value="50"
|
:value="50"
|
||||||
variant="info"
|
color="info"
|
||||||
striped
|
striped
|
||||||
:animated="animate"
|
:animated="animate"
|
||||||
class="mb-2"
|
class="mb-2"
|
||||||
/>
|
/>
|
||||||
<CProgress
|
<CProgress
|
||||||
:value="75"
|
:value="75"
|
||||||
variant="warning"
|
color="warning"
|
||||||
striped
|
striped
|
||||||
:animated="animate"
|
:animated="animate"
|
||||||
class="mb-2"
|
class="mb-2"
|
||||||
/>
|
/>
|
||||||
<CProgress
|
<CProgress
|
||||||
:value="100"
|
:value="100"
|
||||||
variant="danger"
|
color="danger"
|
||||||
:animated="animate"
|
:animated="animate"
|
||||||
class="mb-3"
|
class="mb-3"
|
||||||
/>
|
/>
|
||||||
<CButton variant="secondary" @click="animate = !animate">
|
<CButton color="secondary" @click="animate = !animate">
|
||||||
{{ animate ? 'Stop' : 'Start'}} Animation
|
{{ animate ? 'Stop' : 'Start'}} Animation
|
||||||
</CButton>
|
</CButton>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
@@ -180,24 +180,24 @@
|
|||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CProgress :max="max3" class="mb-3">
|
<CProgress :max="max3" class="mb-3">
|
||||||
<CProgressBar variant="primary" :value="values[0]"/>
|
<CProgressBar color="primary" :value="values[0]"/>
|
||||||
<CProgressBar variant="success" :value="values[1]"/>
|
<CProgressBar color="success" :value="values[1]"/>
|
||||||
<CProgressBar variant="info" :value="values[2]"/>
|
<CProgressBar color="info" :value="values[2]"/>
|
||||||
</CProgress>
|
</CProgress>
|
||||||
<CProgress show-percentage :max="max3" class="mb-3">
|
<CProgress show-percentage :max="max3" class="mb-3">
|
||||||
<CProgressBar variant="primary" :value="values[0]"/>
|
<CProgressBar color="primary" :value="values[0]"/>
|
||||||
<CProgressBar variant="success" :value="values[1]"/>
|
<CProgressBar color="success" :value="values[1]"/>
|
||||||
<CProgressBar variant="info" :value="values[2]"/>
|
<CProgressBar color="info" :value="values[2]"/>
|
||||||
</CProgress>
|
</CProgress>
|
||||||
<CProgress show-value striped :max="max3" class="mb-3">
|
<CProgress show-value striped :max="max3" class="mb-3">
|
||||||
<CProgressBar variant="primary" :value="values[0]"/>
|
<CProgressBar color="primary" :value="values[0]"/>
|
||||||
<CProgressBar variant="success" :value="values[1]"/>
|
<CProgressBar color="success" :value="values[1]"/>
|
||||||
<CProgressBar variant="info" :value="values[2]"/>
|
<CProgressBar color="info" :value="values[2]"/>
|
||||||
</CProgress>
|
</CProgress>
|
||||||
<CProgress :max="max3" class="mb-3">
|
<CProgress :max="max3" class="mb-3">
|
||||||
<CProgressBar variant="primary" :value="values[0]" show-percentage/>
|
<CProgressBar color="primary" :value="values[0]" show-percentage/>
|
||||||
<CProgressBar variant="success" :value="values[1]" animated show-percentage/>
|
<CProgressBar color="success" :value="values[1]" animated show-percentage/>
|
||||||
<CProgressBar variant="info" :value="values[2]" striped show-percentage/>
|
<CProgressBar color="info" :value="values[2]" striped show-percentage/>
|
||||||
</CProgress>
|
</CProgress>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
@@ -215,13 +215,13 @@ export default {
|
|||||||
value: 33.333333333,
|
value: 33.333333333,
|
||||||
value3: 75,
|
value3: 75,
|
||||||
bars: [
|
bars: [
|
||||||
{variant: 'success', value: 75},
|
{color: 'success', value: 75},
|
||||||
{variant: 'info', value: 75},
|
{color: 'info', value: 75},
|
||||||
{variant: 'warning', value: 75},
|
{color: 'warning', value: 75},
|
||||||
{variant: 'danger', value: 75},
|
{color: 'danger', value: 75},
|
||||||
{variant: 'primary', value: 75},
|
{color: 'primary', value: 75},
|
||||||
{variant: 'secondary', value: 75},
|
{color: 'secondary', value: 75},
|
||||||
{variant: 'dark', value: 75}
|
{color: 'dark', value: 75}
|
||||||
],
|
],
|
||||||
timer: null,
|
timer: null,
|
||||||
striped: true,
|
striped: true,
|
||||||
|
|||||||
+226
-236
@@ -5,7 +5,7 @@
|
|||||||
<CCard v-if="true">
|
<CCard v-if="true">
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
Radio switches
|
Radio switches
|
||||||
<CBadge :variant="radio" class="mr-auto">{{radio}}</CBadge>
|
<CBadge :color="radio" class="mr-auto">{{radio}}</CBadge>
|
||||||
<div class="card-header-actions">
|
<div class="card-header-actions">
|
||||||
<a
|
<a
|
||||||
href="https://coreui.io/vue/docs/3.0/components/Switch"
|
href="https://coreui.io/vue/docs/3.0/components/Switch"
|
||||||
@@ -18,27 +18,19 @@
|
|||||||
</div>
|
</div>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<!-- <CSwitch
|
|
||||||
:checked.sync="test11"
|
|
||||||
true-value="yes"
|
|
||||||
false-value="no"
|
|
||||||
id="alt"
|
|
||||||
name="lg"
|
|
||||||
required
|
|
||||||
/> -->
|
|
||||||
<!-- <CSwitch class="mx-1" variant="primary" shape="3d" outline="alt" v-bind="labelIcon" type="radio" name="radio" checked.sync="radio" true-value="primary"/> -->
|
|
||||||
<CSwitch
|
<CSwitch
|
||||||
|
v-for="(color, key) in colors"
|
||||||
|
:key="'radio' + key"
|
||||||
class="mx-1"
|
class="mx-1"
|
||||||
:key="key"
|
:color="color"
|
||||||
:variant="variant"
|
|
||||||
shape="3d"
|
shape="3d"
|
||||||
outline="alt"
|
outline="alt"
|
||||||
v-bind="labelIcon"
|
v-bind="labelIcon"
|
||||||
type="radio"
|
type="radio"
|
||||||
name="radio"
|
name="radio"
|
||||||
:checked.sync="radio"
|
:checked="key === 2"
|
||||||
:value="variant"
|
@update:checked="(val) => val ? radio = color : null"
|
||||||
v-for="(variant, key) in variants"
|
:value="color"
|
||||||
/>
|
/>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
@@ -49,25 +41,23 @@
|
|||||||
<CCard>
|
<CCard>
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
Switch default
|
Switch default
|
||||||
<CBadge variant="primary">{{checker}}</CBadge>
|
<CBadge color="primary">{{checker}}</CBadge>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch
|
<CSwitch
|
||||||
class="mx-1"
|
class="mx-1"
|
||||||
variant="primary"
|
color="primary"
|
||||||
name="switch1"
|
name="switch1"
|
||||||
:checked.sync="checker"
|
:checked.sync="checker"
|
||||||
true-value="yes"
|
|
||||||
false-value="no"
|
|
||||||
/>
|
/>
|
||||||
<CSwitch
|
<CSwitch
|
||||||
class="mx-1"
|
class="mx-1"
|
||||||
:variant="variant"
|
:color="color"
|
||||||
checked
|
checked
|
||||||
:key="key"
|
:key="key"
|
||||||
v-for="(variant, key) in ['secondary', 'success','warning','info','danger','light','dark']"
|
v-for="(color, key) in ['secondary', 'success','warning','info','danger','light','dark']"
|
||||||
/>
|
/>
|
||||||
<CSwitch class="mx-1" variant="primary" disabled />
|
<CSwitch class="mx-1" color="primary" disabled />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -77,15 +67,15 @@
|
|||||||
Switch pills
|
Switch pills
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="mx-1" variant="primary" checked shape="pill"/>
|
<CSwitch class="mx-1" color="primary" checked shape="pill"/>
|
||||||
<CSwitch class="mx-1" variant="secondary" checked shape="pill" />
|
<CSwitch class="mx-1" color="secondary" checked shape="pill" />
|
||||||
<CSwitch class="mx-1" variant="success" checked shape="pill" />
|
<CSwitch class="mx-1" color="success" checked shape="pill" />
|
||||||
<CSwitch class="mx-1" variant="warning" checked shape="pill" />
|
<CSwitch class="mx-1" color="warning" checked shape="pill" />
|
||||||
<CSwitch class="mx-1" variant="info" checked shape="pill" />
|
<CSwitch class="mx-1" color="info" checked shape="pill" />
|
||||||
<CSwitch class="mx-1" variant="danger" checked shape="pill" />
|
<CSwitch class="mx-1" color="danger" checked shape="pill" />
|
||||||
<CSwitch class="mx-1" variant="light" checked shape="pill" />
|
<CSwitch class="mx-1" color="light" checked shape="pill" />
|
||||||
<CSwitch class="mx-1" variant="dark" checked shape="pill" />
|
<CSwitch class="mx-1" color="dark" checked shape="pill" />
|
||||||
<CSwitch class="mx-1" variant="primary" disabled shape="pill" />
|
<CSwitch class="mx-1" color="primary" disabled shape="pill" />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -95,15 +85,15 @@
|
|||||||
3d Switch
|
3d Switch
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="mx-1" variant="primary" checked shape="3d" />
|
<CSwitch class="mx-1" color="primary" checked shape="3d" />
|
||||||
<CSwitch class="mx-1" variant="secondary" checked shape="3d" />
|
<CSwitch class="mx-1" color="secondary" checked shape="3d" />
|
||||||
<CSwitch class="mx-1" variant="success" checked shape="3d" />
|
<CSwitch class="mx-1" color="success" checked shape="3d" />
|
||||||
<CSwitch class="mx-1" variant="warning" checked shape="3d" />
|
<CSwitch class="mx-1" color="warning" checked shape="3d" />
|
||||||
<CSwitch class="mx-1" variant="info" checked shape="3d" />
|
<CSwitch class="mx-1" color="info" checked shape="3d" />
|
||||||
<CSwitch class="mx-1" variant="danger" checked shape="3d" />
|
<CSwitch class="mx-1" color="danger" checked shape="3d" />
|
||||||
<CSwitch class="mx-1" variant="light" checked shape="3d" />
|
<CSwitch class="mx-1" color="light" checked shape="3d" />
|
||||||
<CSwitch class="mx-1" variant="dark" checked shape="3d" />
|
<CSwitch class="mx-1" color="dark" checked shape="3d" />
|
||||||
<CSwitch class="mx-1" variant="primary" disabled shape="3d" />
|
<CSwitch class="mx-1" color="primary" disabled shape="3d" />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -113,15 +103,15 @@
|
|||||||
3d Switch <small><code>disabled</code></small>
|
3d Switch <small><code>disabled</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="mx-1" variant="primary" checked shape="3d" disabled />
|
<CSwitch class="mx-1" color="primary" checked shape="3d" disabled />
|
||||||
<CSwitch class="mx-1" variant="secondary" checked shape="3d" disabled />
|
<CSwitch class="mx-1" color="secondary" checked shape="3d" disabled />
|
||||||
<CSwitch class="mx-1" variant="success" checked shape="3d" disabled />
|
<CSwitch class="mx-1" color="success" checked shape="3d" disabled />
|
||||||
<CSwitch class="mx-1" variant="warning" checked shape="3d" disabled />
|
<CSwitch class="mx-1" color="warning" checked shape="3d" disabled />
|
||||||
<CSwitch class="mx-1" variant="info" checked shape="3d" disabled />
|
<CSwitch class="mx-1" color="info" checked shape="3d" disabled />
|
||||||
<CSwitch class="mx-1" variant="danger" checked shape="3d" disabled />
|
<CSwitch class="mx-1" color="danger" checked shape="3d" disabled />
|
||||||
<CSwitch class="mx-1" variant="light" checked shape="3d" disabled />
|
<CSwitch class="mx-1" color="light" checked shape="3d" disabled />
|
||||||
<CSwitch class="mx-1" variant="dark" checked shape="3d" disabled />
|
<CSwitch class="mx-1" color="dark" checked shape="3d" disabled />
|
||||||
<CSwitch class="mx-1" variant="primary" disabled shape="3d" />
|
<CSwitch class="mx-1" color="primary" disabled shape="3d" />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -131,15 +121,15 @@
|
|||||||
3d Switch <small><code>outline="alt"</code></small>
|
3d Switch <small><code>outline="alt"</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="mx-1" variant="primary" checked shape="3d" outline="alt" />
|
<CSwitch class="mx-1" color="primary" checked shape="3d" outline="alt" />
|
||||||
<CSwitch class="mx-1" variant="secondary" checked shape="3d" outline="alt" />
|
<CSwitch class="mx-1" color="secondary" checked shape="3d" outline="alt" />
|
||||||
<CSwitch class="mx-1" variant="success" checked shape="3d" outline="alt" />
|
<CSwitch class="mx-1" color="success" checked shape="3d" outline="alt" />
|
||||||
<CSwitch class="mx-1" variant="warning" checked shape="3d" outline="alt" />
|
<CSwitch class="mx-1" color="warning" checked shape="3d" outline="alt" />
|
||||||
<CSwitch class="mx-1" variant="info" checked shape="3d" outline="alt" />
|
<CSwitch class="mx-1" color="info" checked shape="3d" outline="alt" />
|
||||||
<CSwitch class="mx-1" variant="danger" checked shape="3d" outline="alt" />
|
<CSwitch class="mx-1" color="danger" checked shape="3d" outline="alt" />
|
||||||
<CSwitch class="mx-1" variant="light" checked shape="3d" outline="alt" />
|
<CSwitch class="mx-1" color="light" checked shape="3d" outline="alt" />
|
||||||
<CSwitch class="mx-1" variant="dark" checked shape="3d" outline="alt" />
|
<CSwitch class="mx-1" color="dark" checked shape="3d" outline="alt" />
|
||||||
<CSwitch class="mx-1" variant="primary" disabled shape="3d" outline="alt" />
|
<CSwitch class="mx-1" color="primary" disabled shape="3d" outline="alt" />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -149,15 +139,15 @@
|
|||||||
3d Switch <small><code>label</code></small>
|
3d Switch <small><code>label</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="mx-1" variant="primary" shape="3d" checked v-bind="labelIcon"/>
|
<CSwitch class="mx-1" color="primary" shape="3d" checked v-bind="labelIcon"/>
|
||||||
<CSwitch class="mx-1" variant="secondary" checked shape="3d" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="secondary" checked shape="3d" v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="success" checked shape="3d" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="success" checked shape="3d" v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="warning" checked shape="3d" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="warning" checked shape="3d" v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="info" checked shape="3d" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="info" checked shape="3d" v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="danger" checked shape="3d" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="danger" checked shape="3d" v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="light" checked shape="3d" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="light" checked shape="3d" v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="dark" checked shape="3d" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="dark" checked shape="3d" v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="primary" disabled shape="3d" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="primary" disabled shape="3d" v-bind="labelIcon" />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -167,15 +157,15 @@
|
|||||||
3d Switch <small><code>outline="alt"</code></small>
|
3d Switch <small><code>outline="alt"</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="mx-1" variant="primary" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="primary" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="secondary" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="secondary" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="success" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="success" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="warning" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="warning" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="info" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="info" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="danger" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="danger" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="light" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="light" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="dark" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="dark" checked shape="3d" outline="alt" v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="primary" disabled shape="3d" outline="alt" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="primary" disabled shape="3d" outline="alt" v-bind="labelIcon" />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -185,15 +175,15 @@
|
|||||||
3d Switch <small><code>outline="alt"</code></small>
|
3d Switch <small><code>outline="alt"</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="mx-1" variant="primary" checked shape="3d" outline="alt" />
|
<CSwitch class="mx-1" color="primary" checked shape="3d" outline="alt" />
|
||||||
<CSwitch class="mx-1" variant="secondary" checked shape="3d" outline="alt" />
|
<CSwitch class="mx-1" color="secondary" checked shape="3d" outline="alt" />
|
||||||
<CSwitch class="mx-1" variant="success" checked shape="3d" outline="alt" />
|
<CSwitch class="mx-1" color="success" checked shape="3d" outline="alt" />
|
||||||
<CSwitch class="mx-1" variant="warning" checked shape="3d" outline="alt" />
|
<CSwitch class="mx-1" color="warning" checked shape="3d" outline="alt" />
|
||||||
<CSwitch class="mx-1" variant="info" checked shape="3d" outline="alt" />
|
<CSwitch class="mx-1" color="info" checked shape="3d" outline="alt" />
|
||||||
<CSwitch class="mx-1" variant="danger" checked shape="3d" outline="alt" />
|
<CSwitch class="mx-1" color="danger" checked shape="3d" outline="alt" />
|
||||||
<CSwitch class="mx-1" variant="light" checked shape="3d" outline="alt" />
|
<CSwitch class="mx-1" color="light" checked shape="3d" outline="alt" />
|
||||||
<CSwitch class="mx-1" variant="dark" checked shape="3d" outline="alt" />
|
<CSwitch class="mx-1" color="dark" checked shape="3d" outline="alt" />
|
||||||
<CSwitch class="mx-1" variant="primary" disabled shape="3d" outline="alt" />
|
<CSwitch class="mx-1" color="primary" disabled shape="3d" outline="alt" />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -203,15 +193,15 @@
|
|||||||
Switch <small><code>outline</code></small>
|
Switch <small><code>outline</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="mx-1" variant="primary" checked outline />
|
<CSwitch class="mx-1" color="primary" checked outline />
|
||||||
<CSwitch class="mx-1" variant="secondary" checked outline />
|
<CSwitch class="mx-1" color="secondary" checked outline />
|
||||||
<CSwitch class="mx-1" variant="success" checked outline />
|
<CSwitch class="mx-1" color="success" checked outline />
|
||||||
<CSwitch class="mx-1" variant="warning" checked outline />
|
<CSwitch class="mx-1" color="warning" checked outline />
|
||||||
<CSwitch class="mx-1" variant="info" checked outline />
|
<CSwitch class="mx-1" color="info" checked outline />
|
||||||
<CSwitch class="mx-1" variant="danger" checked outline />
|
<CSwitch class="mx-1" color="danger" checked outline />
|
||||||
<CSwitch class="mx-1" variant="light" checked outline />
|
<CSwitch class="mx-1" color="light" checked outline />
|
||||||
<CSwitch class="mx-1" variant="dark" checked outline />
|
<CSwitch class="mx-1" color="dark" checked outline />
|
||||||
<CSwitch class="mx-1" variant="primary" outline disabled />
|
<CSwitch class="mx-1" color="primary" outline disabled />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -221,15 +211,15 @@
|
|||||||
Switch <small><code>outline shape="pill"</code></small>
|
Switch <small><code>outline shape="pill"</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="mx-1" variant="primary" checked outline shape="pill"/>
|
<CSwitch class="mx-1" color="primary" checked outline shape="pill"/>
|
||||||
<CSwitch class="mx-1" variant="secondary" checked outline shape="pill" />
|
<CSwitch class="mx-1" color="secondary" checked outline shape="pill" />
|
||||||
<CSwitch class="mx-1" variant="success" checked outline shape="pill" />
|
<CSwitch class="mx-1" color="success" checked outline shape="pill" />
|
||||||
<CSwitch class="mx-1" variant="warning" checked outline shape="pill" />
|
<CSwitch class="mx-1" color="warning" checked outline shape="pill" />
|
||||||
<CSwitch class="mx-1" variant="info" checked outline shape="pill" />
|
<CSwitch class="mx-1" color="info" checked outline shape="pill" />
|
||||||
<CSwitch class="mx-1" variant="danger" checked outline shape="pill" />
|
<CSwitch class="mx-1" color="danger" checked outline shape="pill" />
|
||||||
<CSwitch class="mx-1" variant="light" checked outline shape="pill" />
|
<CSwitch class="mx-1" color="light" checked outline shape="pill" />
|
||||||
<CSwitch class="mx-1" variant="dark" checked outline shape="pill" />
|
<CSwitch class="mx-1" color="dark" checked outline shape="pill" />
|
||||||
<CSwitch class="mx-1" variant="primary" outline shape="pill" disabled />
|
<CSwitch class="mx-1" color="primary" outline shape="pill" disabled />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -239,15 +229,15 @@
|
|||||||
Switch <small><code>outline="alt"</code></small>
|
Switch <small><code>outline="alt"</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="mx-1" variant="primary" checked outline="alt" />
|
<CSwitch class="mx-1" color="primary" checked outline="alt" />
|
||||||
<CSwitch class="mx-1" variant="secondary" checked outline="alt" />
|
<CSwitch class="mx-1" color="secondary" checked outline="alt" />
|
||||||
<CSwitch class="mx-1" variant="success" checked outline="alt" />
|
<CSwitch class="mx-1" color="success" checked outline="alt" />
|
||||||
<CSwitch class="mx-1" variant="warning" checked outline="alt" />
|
<CSwitch class="mx-1" color="warning" checked outline="alt" />
|
||||||
<CSwitch class="mx-1" variant="info" checked outline="alt" />
|
<CSwitch class="mx-1" color="info" checked outline="alt" />
|
||||||
<CSwitch class="mx-1" variant="danger" checked outline="alt" />
|
<CSwitch class="mx-1" color="danger" checked outline="alt" />
|
||||||
<CSwitch class="mx-1" variant="light" checked outline="alt" />
|
<CSwitch class="mx-1" color="light" checked outline="alt" />
|
||||||
<CSwitch class="mx-1" variant="dark" checked outline="alt" />
|
<CSwitch class="mx-1" color="dark" checked outline="alt" />
|
||||||
<CSwitch class="mx-1" variant="primary" outline="alt" disabled />
|
<CSwitch class="mx-1" color="primary" outline="alt" disabled />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -257,15 +247,15 @@
|
|||||||
Switch <small><code>outline="alt" shape="pill"</code></small>
|
Switch <small><code>outline="alt" shape="pill"</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="mx-1" variant="primary" checked outline="alt" shape="pill"/>
|
<CSwitch class="mx-1" color="primary" checked outline="alt" shape="pill"/>
|
||||||
<CSwitch class="mx-1" variant="secondary" checked outline="alt" shape="pill" />
|
<CSwitch class="mx-1" color="secondary" checked outline="alt" shape="pill" />
|
||||||
<CSwitch class="mx-1" variant="success" checked outline="alt" shape="pill" />
|
<CSwitch class="mx-1" color="success" checked outline="alt" shape="pill" />
|
||||||
<CSwitch class="mx-1" variant="warning" checked outline="alt" shape="pill" />
|
<CSwitch class="mx-1" color="warning" checked outline="alt" shape="pill" />
|
||||||
<CSwitch class="mx-1" variant="info" checked outline="alt" shape="pill" />
|
<CSwitch class="mx-1" color="info" checked outline="alt" shape="pill" />
|
||||||
<CSwitch class="mx-1" variant="danger" checked outline="alt" shape="pill" />
|
<CSwitch class="mx-1" color="danger" checked outline="alt" shape="pill" />
|
||||||
<CSwitch class="mx-1" variant="light" checked outline="alt" shape="pill" />
|
<CSwitch class="mx-1" color="light" checked outline="alt" shape="pill" />
|
||||||
<CSwitch class="mx-1" variant="dark" checked outline="alt" shape="pill" />
|
<CSwitch class="mx-1" color="dark" checked outline="alt" shape="pill" />
|
||||||
<CSwitch class="mx-1" variant="primary" outline="alt" shape="pill" disabled />
|
<CSwitch class="mx-1" color="primary" outline="alt" shape="pill" disabled />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -275,15 +265,15 @@
|
|||||||
Switch <small><code>label</code></small>
|
Switch <small><code>label</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="mx-1" variant="primary" checked />
|
<CSwitch class="mx-1" color="primary" checked />
|
||||||
<CSwitch class="mx-1" variant="secondary" checked />
|
<CSwitch class="mx-1" color="secondary" checked />
|
||||||
<CSwitch class="mx-1" variant="success" checked />
|
<CSwitch class="mx-1" color="success" checked />
|
||||||
<CSwitch class="mx-1" variant="warning" checked />
|
<CSwitch class="mx-1" color="warning" checked />
|
||||||
<CSwitch class="mx-1" variant="info" checked />
|
<CSwitch class="mx-1" color="info" checked />
|
||||||
<CSwitch class="mx-1" variant="danger" checked />
|
<CSwitch class="mx-1" color="danger" checked />
|
||||||
<CSwitch class="mx-1" variant="light" checked />
|
<CSwitch class="mx-1" color="light" checked />
|
||||||
<CSwitch class="mx-1" variant="dark" checked />
|
<CSwitch class="mx-1" color="dark" checked />
|
||||||
<CSwitch class="mx-1" variant="primary" disabled />
|
<CSwitch class="mx-1" color="primary" disabled />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -293,15 +283,15 @@
|
|||||||
Switch <small><code>label shape="pill"</code></small>
|
Switch <small><code>label shape="pill"</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="mx-1" variant="primary" checked shape="pill" />
|
<CSwitch class="mx-1" color="primary" checked shape="pill" />
|
||||||
<CSwitch class="mx-1" variant="secondary" checked shape="pill" />
|
<CSwitch class="mx-1" color="secondary" checked shape="pill" />
|
||||||
<CSwitch class="mx-1" variant="success" checked shape="pill" />
|
<CSwitch class="mx-1" color="success" checked shape="pill" />
|
||||||
<CSwitch class="mx-1" variant="warning" checked shape="pill" />
|
<CSwitch class="mx-1" color="warning" checked shape="pill" />
|
||||||
<CSwitch class="mx-1" variant="info" checked shape="pill" />
|
<CSwitch class="mx-1" color="info" checked shape="pill" />
|
||||||
<CSwitch class="mx-1" variant="danger" checked shape="pill" />
|
<CSwitch class="mx-1" color="danger" checked shape="pill" />
|
||||||
<CSwitch class="mx-1" variant="light" checked shape="pill" />
|
<CSwitch class="mx-1" color="light" checked shape="pill" />
|
||||||
<CSwitch class="mx-1" variant="dark" checked shape="pill" />
|
<CSwitch class="mx-1" color="dark" checked shape="pill" />
|
||||||
<CSwitch class="mx-1" variant="primary" shape="pill" disabled />
|
<CSwitch class="mx-1" color="primary" shape="pill" disabled />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -311,15 +301,15 @@
|
|||||||
Switch <small><code>label outline</code></small>
|
Switch <small><code>label outline</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="mx-1" variant="primary" checked outline />
|
<CSwitch class="mx-1" color="primary" checked outline />
|
||||||
<CSwitch class="mx-1" variant="secondary" checked outline />
|
<CSwitch class="mx-1" color="secondary" checked outline />
|
||||||
<CSwitch class="mx-1" variant="success" checked outline />
|
<CSwitch class="mx-1" color="success" checked outline />
|
||||||
<CSwitch class="mx-1" variant="warning" checked outline />
|
<CSwitch class="mx-1" color="warning" checked outline />
|
||||||
<CSwitch class="mx-1" variant="info" checked outline />
|
<CSwitch class="mx-1" color="info" checked outline />
|
||||||
<CSwitch class="mx-1" variant="danger" checked outline />
|
<CSwitch class="mx-1" color="danger" checked outline />
|
||||||
<CSwitch class="mx-1" variant="light" checked outline />
|
<CSwitch class="mx-1" color="light" checked outline />
|
||||||
<CSwitch class="mx-1" variant="dark" checked outline />
|
<CSwitch class="mx-1" color="dark" checked outline />
|
||||||
<CSwitch class="mx-1" variant="primary" outline disabled />
|
<CSwitch class="mx-1" color="primary" outline disabled />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -329,15 +319,15 @@
|
|||||||
Switch <small><code>label outline</code></small>
|
Switch <small><code>label outline</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="mx-1" variant="primary" checked outline shape="pill" />
|
<CSwitch class="mx-1" color="primary" checked outline shape="pill" />
|
||||||
<CSwitch class="mx-1" variant="secondary" checked outline shape="pill" />
|
<CSwitch class="mx-1" color="secondary" checked outline shape="pill" />
|
||||||
<CSwitch class="mx-1" variant="success" checked outline shape="pill" />
|
<CSwitch class="mx-1" color="success" checked outline shape="pill" />
|
||||||
<CSwitch class="mx-1" variant="warning" checked outline shape="pill" />
|
<CSwitch class="mx-1" color="warning" checked outline shape="pill" />
|
||||||
<CSwitch class="mx-1" variant="info" checked outline shape="pill" />
|
<CSwitch class="mx-1" color="info" checked outline shape="pill" />
|
||||||
<CSwitch class="mx-1" variant="danger" checked outline shape="pill" />
|
<CSwitch class="mx-1" color="danger" checked outline shape="pill" />
|
||||||
<CSwitch class="mx-1" variant="light" checked outline shape="pill" />
|
<CSwitch class="mx-1" color="light" checked outline shape="pill" />
|
||||||
<CSwitch class="mx-1" variant="dark" checked outline shape="pill" />
|
<CSwitch class="mx-1" color="dark" checked outline shape="pill" />
|
||||||
<CSwitch class="mx-1" variant="primary" outline shape="pill" disabled />
|
<CSwitch class="mx-1" color="primary" outline shape="pill" disabled />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -347,15 +337,15 @@
|
|||||||
Switch <small><code>label outline</code></small>
|
Switch <small><code>label outline</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="mx-1" variant="primary" checked outline="alt" />
|
<CSwitch class="mx-1" color="primary" checked outline="alt" />
|
||||||
<CSwitch class="mx-1" variant="secondary" checked outline="alt" />
|
<CSwitch class="mx-1" color="secondary" checked outline="alt" />
|
||||||
<CSwitch class="mx-1" variant="success" checked outline="alt" />
|
<CSwitch class="mx-1" color="success" checked outline="alt" />
|
||||||
<CSwitch class="mx-1" variant="warning" checked outline="alt" />
|
<CSwitch class="mx-1" color="warning" checked outline="alt" />
|
||||||
<CSwitch class="mx-1" variant="info" checked outline="alt" />
|
<CSwitch class="mx-1" color="info" checked outline="alt" />
|
||||||
<CSwitch class="mx-1" variant="danger" checked outline="alt" />
|
<CSwitch class="mx-1" color="danger" checked outline="alt" />
|
||||||
<CSwitch class="mx-1" variant="light" checked outline="alt" />
|
<CSwitch class="mx-1" color="light" checked outline="alt" />
|
||||||
<CSwitch class="mx-1" variant="dark" checked outline="alt" />
|
<CSwitch class="mx-1" color="dark" checked outline="alt" />
|
||||||
<CSwitch class="mx-1" variant="primary" outline="alt" disabled />
|
<CSwitch class="mx-1" color="primary" outline="alt" disabled />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -365,15 +355,15 @@
|
|||||||
Switch <small><code>label outline</code></small>
|
Switch <small><code>label outline</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="mx-1" variant="primary" checked outline="alt" shape="pill" />
|
<CSwitch class="mx-1" color="primary" checked outline="alt" shape="pill" />
|
||||||
<CSwitch class="mx-1" variant="secondary" checked outline="alt" shape="pill" />
|
<CSwitch class="mx-1" color="secondary" checked outline="alt" shape="pill" />
|
||||||
<CSwitch class="mx-1" variant="success" checked outline="alt" shape="pill" />
|
<CSwitch class="mx-1" color="success" checked outline="alt" shape="pill" />
|
||||||
<CSwitch class="mx-1" variant="warning" checked outline="alt" shape="pill" />
|
<CSwitch class="mx-1" color="warning" checked outline="alt" shape="pill" />
|
||||||
<CSwitch class="mx-1" variant="info" checked outline="alt" shape="pill" />
|
<CSwitch class="mx-1" color="info" checked outline="alt" shape="pill" />
|
||||||
<CSwitch class="mx-1" variant="danger" checked outline="alt" shape="pill" />
|
<CSwitch class="mx-1" color="danger" checked outline="alt" shape="pill" />
|
||||||
<CSwitch class="mx-1" variant="light" checked outline="alt" shape="pill" />
|
<CSwitch class="mx-1" color="light" checked outline="alt" shape="pill" />
|
||||||
<CSwitch class="mx-1" variant="dark" checked outline="alt" shape="pill" />
|
<CSwitch class="mx-1" color="dark" checked outline="alt" shape="pill" />
|
||||||
<CSwitch class="mx-1" variant="primary" outline="alt" shape="pill" disabled />
|
<CSwitch class="mx-1" color="primary" outline="alt" shape="pill" disabled />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -384,15 +374,15 @@
|
|||||||
Switch <small><code>label</code></small>
|
Switch <small><code>label</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="mx-1" variant="primary" checked v-bind="labelIcon"/>
|
<CSwitch class="mx-1" color="primary" checked v-bind="labelIcon"/>
|
||||||
<CSwitch class="mx-1" variant="secondary" checked v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="secondary" checked v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="success" checked v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="success" checked v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="warning" checked v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="warning" checked v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="info" checked v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="info" checked v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="danger" checked v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="danger" checked v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="light" checked v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="light" checked v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="dark" checked v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="dark" checked v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="primary" disabled v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="primary" disabled v-bind="labelIcon" />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>shape
|
</CCard>shape
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -402,15 +392,15 @@
|
|||||||
Switch <small><code>label shape="pill"</code></small>
|
Switch <small><code>label shape="pill"</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="mx-1" variant="primary" checked shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="primary" checked shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="secondary" checked shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="secondary" checked shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="success" checked shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="success" checked shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="warning" checked shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="warning" checked shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="info" checked shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="info" checked shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="danger" checked shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="danger" checked shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="light" checked shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="light" checked shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="dark" checked shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="dark" checked shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="primary" shape="pill" disabled v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="primary" shape="pill" disabled v-bind="labelIcon" />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -420,15 +410,15 @@
|
|||||||
Switch <small><code>label outline</code></small>
|
Switch <small><code>label outline</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="mx-1" variant="primary" checked outline v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="primary" checked outline v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="secondary" checked outline v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="secondary" checked outline v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="success" checked outline v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="success" checked outline v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="warning" checked outline v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="warning" checked outline v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="info" checked outline v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="info" checked outline v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="danger" checked outline v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="danger" checked outline v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="light" checked outline v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="light" checked outline v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="dark" checked outline v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="dark" checked outline v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="primary" outline disabled v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="primary" outline disabled v-bind="labelIcon" />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -438,15 +428,15 @@
|
|||||||
Switch <small><code>label outline</code></small>
|
Switch <small><code>label outline</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="mx-1" variant="primary" checked outline shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="primary" checked outline shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="secondary" checked outline shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="secondary" checked outline shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="success" checked outline shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="success" checked outline shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="warning" checked outline shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="warning" checked outline shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="info" checked outline shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="info" checked outline shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="danger" checked outline shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="danger" checked outline shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="light" checked outline shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="light" checked outline shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="dark" checked outline shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="dark" checked outline shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="primary" outline shape="pill" disabled v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="primary" outline shape="pill" disabled v-bind="labelIcon" />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -456,15 +446,15 @@
|
|||||||
Switch <small><code>label outline</code></small>
|
Switch <small><code>label outline</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="mx-1" variant="primary" checked outline="alt" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="primary" checked outline="alt" v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="secondary" checked outline="alt" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="secondary" checked outline="alt" v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="success" checked outline="alt" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="success" checked outline="alt" v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="warning" checked outline="alt" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="warning" checked outline="alt" v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="info" checked outline="alt" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="info" checked outline="alt" v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="danger" checked outline="alt" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="danger" checked outline="alt" v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="light" checked outline="alt" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="light" checked outline="alt" v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="dark" checked outline="alt" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="dark" checked outline="alt" v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="primary" outline="alt" disabled v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="primary" outline="alt" disabled v-bind="labelIcon" />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -474,15 +464,15 @@
|
|||||||
Switch <small><code>label outline</code></small>
|
Switch <small><code>label outline</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CSwitch class="mx-1" variant="primary" checked outline="alt" shape="pill" v-bind="labelTxt" />
|
<CSwitch class="mx-1" color="primary" checked outline="alt" shape="pill" v-bind="labelTxt" />
|
||||||
<CSwitch class="mx-1" variant="secondary" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="secondary" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="success" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="success" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="warning" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="warning" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="info" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="info" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="danger" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="danger" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="light" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="light" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="dark" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="dark" checked outline="alt" shape="pill" v-bind="labelIcon" />
|
||||||
<CSwitch class="mx-1" variant="primary" outline="alt" shape="pill" disabled v-bind="labelIcon" />
|
<CSwitch class="mx-1" color="primary" outline="alt" shape="pill" disabled v-bind="labelIcon" />
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -505,7 +495,7 @@
|
|||||||
<td>
|
<td>
|
||||||
<CSwitch
|
<CSwitch
|
||||||
:shape="item.example.shape"
|
:shape="item.example.shape"
|
||||||
:variant="item.example.variant"
|
:color="item.example.color"
|
||||||
:size="item.example.size"
|
:size="item.example.size"
|
||||||
:checked="item.example.checked"
|
:checked="item.example.checked"
|
||||||
/>
|
/>
|
||||||
@@ -529,7 +519,7 @@ export default {
|
|||||||
name: 'Switches',
|
name: 'Switches',
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
variants: [
|
colors: [
|
||||||
'primary','secondary','warning','success','info','danger','light','dark'
|
'primary','secondary','warning','success','info','danger','light','dark'
|
||||||
],
|
],
|
||||||
fields: [
|
fields: [
|
||||||
@@ -540,22 +530,22 @@ export default {
|
|||||||
items: [
|
items: [
|
||||||
{
|
{
|
||||||
size: 'Large',
|
size: 'Large',
|
||||||
example: { shape: '3d', variant: 'primary', size: 'lg', checked: true },
|
example: { shape: '3d', color: 'primary', size: 'lg', checked: true },
|
||||||
size_prop: 'Add following prop <code>size="lg"</code>'
|
size_prop: 'Add following prop <code>size="lg"</code>'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
size: 'Normal',
|
size: 'Normal',
|
||||||
example: { shape: '3d', variant: 'primary', size: '', checked: true },
|
example: { shape: '3d', color: 'primary', size: '', checked: true },
|
||||||
size_prop: '-'
|
size_prop: '-'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
size: 'Small',
|
size: 'Small',
|
||||||
example: {shape: '3d', variant: 'primary', size: 'sm', checked: true},
|
example: {shape: '3d', color: 'primary', size: 'sm', checked: true},
|
||||||
size_prop: 'Add following prop <code>size="sm"</code>'
|
size_prop: 'Add following prop <code>size="sm"</code>'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
checker: 'yes',
|
checker: true,
|
||||||
radio: 'primary',
|
radio: 'warning',
|
||||||
labelIcon: {
|
labelIcon: {
|
||||||
labelOn: '\u2713',
|
labelOn: '\u2713',
|
||||||
labelOff: '\u2715'
|
labelOff: '\u2715'
|
||||||
|
|||||||
@@ -14,7 +14,7 @@
|
|||||||
>
|
>
|
||||||
<template #status="{item}">
|
<template #status="{item}">
|
||||||
<td>
|
<td>
|
||||||
<CBadge :variant="getBadge(item.status)">{{item.status}}</CBadge>
|
<CBadge :color="getBadge(item.status)">{{item.status}}</CBadge>
|
||||||
</td>
|
</td>
|
||||||
</template>
|
</template>
|
||||||
</CTable>
|
</CTable>
|
||||||
|
|||||||
@@ -21,7 +21,7 @@
|
|||||||
<CCol col="4">
|
<CCol col="4">
|
||||||
<div class="text-center my-3">
|
<div class="text-center my-3">
|
||||||
<CButton
|
<CButton
|
||||||
variant="secondary"
|
color="secondary"
|
||||||
v-c-tooltip.hover.click="'I am a tooltip!'"
|
v-c-tooltip.hover.click="'I am a tooltip!'"
|
||||||
>
|
>
|
||||||
Hover Me
|
Hover Me
|
||||||
@@ -32,7 +32,7 @@
|
|||||||
<div class="text-center my-3">
|
<div class="text-center my-3">
|
||||||
<CButton
|
<CButton
|
||||||
v-c-tooltip="{content: 'I start open!', active:true }"
|
v-c-tooltip="{content: 'I start open!', active:true }"
|
||||||
variant="secondary"
|
color="secondary"
|
||||||
>
|
>
|
||||||
Hover me
|
Hover me
|
||||||
</CButton>
|
</CButton>
|
||||||
@@ -41,7 +41,7 @@
|
|||||||
<CCol col="4">
|
<CCol col="4">
|
||||||
<div class="text-center my-3">
|
<div class="text-center my-3">
|
||||||
<CButton
|
<CButton
|
||||||
variant="secondary"
|
color="secondary"
|
||||||
v-c-tooltip.click="
|
v-c-tooltip.click="
|
||||||
'I am showing on click and hiding on click outside tooltip!'
|
'I am showing on click and hiding on click outside tooltip!'
|
||||||
"
|
"
|
||||||
@@ -69,7 +69,7 @@
|
|||||||
:key="placement"
|
:key="placement"
|
||||||
>
|
>
|
||||||
<CButton
|
<CButton
|
||||||
variant="primary"
|
color="primary"
|
||||||
v-c-tooltip.hover="{
|
v-c-tooltip.hover="{
|
||||||
content: `Placement ${placement}`,
|
content: `Placement ${placement}`,
|
||||||
placement
|
placement
|
||||||
|
|||||||
@@ -29,7 +29,7 @@
|
|||||||
:name="brandName"
|
:name="brandName"
|
||||||
size="sm"
|
size="sm"
|
||||||
:key="key"
|
:key="key"
|
||||||
:variant="brandName"
|
:color="brandName"
|
||||||
>
|
>
|
||||||
<CIcon :name="brandName"/>
|
<CIcon :name="brandName"/>
|
||||||
<span>{{brandName}}</span>
|
<span>{{brandName}}</span>
|
||||||
@@ -42,7 +42,7 @@
|
|||||||
<CButton
|
<CButton
|
||||||
:name="brandName"
|
:name="brandName"
|
||||||
:key="key"
|
:key="key"
|
||||||
:variant="brandName"
|
:color="brandName"
|
||||||
>
|
>
|
||||||
<CIcon :name="brandName"/>
|
<CIcon :name="brandName"/>
|
||||||
<span>{{brandName}}</span>
|
<span>{{brandName}}</span>
|
||||||
@@ -56,7 +56,7 @@
|
|||||||
:name="brandName"
|
:name="brandName"
|
||||||
size="lg"
|
size="lg"
|
||||||
:key="key"
|
:key="key"
|
||||||
:variant="brandName"
|
:color="brandName"
|
||||||
>
|
>
|
||||||
<CIcon :name="brandName"/>
|
<CIcon :name="brandName"/>
|
||||||
<span>{{brandName}}</span>
|
<span>{{brandName}}</span>
|
||||||
@@ -82,7 +82,7 @@
|
|||||||
:name="brandName"
|
:name="brandName"
|
||||||
size="sm"
|
size="sm"
|
||||||
:key="key"
|
:key="key"
|
||||||
:variant="brandName"
|
:color="brandName"
|
||||||
>
|
>
|
||||||
<CIcon :name="brandName"/>
|
<CIcon :name="brandName"/>
|
||||||
</CButton>
|
</CButton>
|
||||||
@@ -94,7 +94,7 @@
|
|||||||
<CButton
|
<CButton
|
||||||
:name="brandName"
|
:name="brandName"
|
||||||
:key="key"
|
:key="key"
|
||||||
:variant="brandName"
|
:color="brandName"
|
||||||
>
|
>
|
||||||
<CIcon :name="brandName"/>
|
<CIcon :name="brandName"/>
|
||||||
</CButton>
|
</CButton>
|
||||||
@@ -107,7 +107,7 @@
|
|||||||
:name="brandName"
|
:name="brandName"
|
||||||
size="lg"
|
size="lg"
|
||||||
:key="key"
|
:key="key"
|
||||||
:variant="brandName"
|
:color="brandName"
|
||||||
>
|
>
|
||||||
<CIcon :name="brandName"/>
|
<CIcon :name="brandName"/>
|
||||||
</CButton>
|
</CButton>
|
||||||
@@ -135,7 +135,7 @@
|
|||||||
:name="brandName"
|
:name="brandName"
|
||||||
size="sm"
|
size="sm"
|
||||||
:key="key"
|
:key="key"
|
||||||
:variant="brandName"
|
:color="brandName"
|
||||||
>
|
>
|
||||||
<span>{{brandName}}</span>
|
<span>{{brandName}}</span>
|
||||||
</CButton>
|
</CButton>
|
||||||
@@ -147,7 +147,7 @@
|
|||||||
<CButton
|
<CButton
|
||||||
:name="brandName"
|
:name="brandName"
|
||||||
:key="key"
|
:key="key"
|
||||||
:variant="brandName"
|
:color="brandName"
|
||||||
>
|
>
|
||||||
<span>{{brandName}}</span>
|
<span>{{brandName}}</span>
|
||||||
</CButton>
|
</CButton>
|
||||||
@@ -160,7 +160,7 @@
|
|||||||
:name="brandName"
|
:name="brandName"
|
||||||
size="lg"
|
size="lg"
|
||||||
:key="key"
|
:key="key"
|
||||||
:variant="brandName"
|
:color="brandName"
|
||||||
>
|
>
|
||||||
<span>{{brandName}}</span>
|
<span>{{brandName}}</span>
|
||||||
</CButton>
|
</CButton>
|
||||||
@@ -175,9 +175,9 @@
|
|||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'BrandButtons',
|
name: 'BrandButtons',
|
||||||
usage: '<CButton variant="facebook"><span>Facebook</span></CButton>',
|
usage: '<CButton color="facebook"><span>Facebook</span></CButton>',
|
||||||
iconsOnlyUsage: '<CButton variant="facebook"><CIcon name="facebook"/></CButton>',
|
iconsOnlyUsage: '<CButton color="facebook"><CIcon name="facebook"/></CButton>',
|
||||||
textOnlyUsage: '<CButton variant="facebook"><CIcon name="facebook"/></CButton>',
|
textOnlyUsage: '<CButton color="facebook"><CIcon name="facebook"/></CButton>',
|
||||||
brands: [
|
brands: [
|
||||||
'facebook',
|
'facebook',
|
||||||
'twitter',
|
'twitter',
|
||||||
|
|||||||
@@ -19,20 +19,20 @@
|
|||||||
<CCardBody>
|
<CCardBody>
|
||||||
<div>
|
<div>
|
||||||
<CButtonGroup>
|
<CButtonGroup>
|
||||||
<CButton variant="secondary">One</CButton>
|
<CButton color="secondary">One</CButton>
|
||||||
<CButton variant="secondary">Two</CButton>
|
<CButton color="secondary">Two</CButton>
|
||||||
<CButton variant="secondary">Three</CButton>
|
<CButton color="secondary">Three</CButton>
|
||||||
<CButton variant="secondary">Four</CButton>
|
<CButton color="secondary">Four</CButton>
|
||||||
<CButton variant="secondary" class="d-sm-down-none">Five</CButton>
|
<CButton color="secondary" class="d-sm-down-none">Five</CButton>
|
||||||
</CButtonGroup>
|
</CButtonGroup>
|
||||||
<br><br>
|
<br><br>
|
||||||
<CButtonGroup>
|
<CButtonGroup>
|
||||||
<CButton class="d-sm-down-none" variant="success">Success</CButton>
|
<CButton class="d-sm-down-none" color="success">Success</CButton>
|
||||||
<CButton variant="info">Info</CButton>
|
<CButton color="info">Info</CButton>
|
||||||
<CButton variant="warning">Warn</CButton>
|
<CButton color="warning">Warn</CButton>
|
||||||
<CButton class="d-sm-down-none" variant="primary">Primary</CButton>
|
<CButton class="d-sm-down-none" color="primary">Primary</CButton>
|
||||||
<CButton variant="danger">Danger</CButton>
|
<CButton color="danger">Danger</CButton>
|
||||||
<CButton variant="link">Link</CButton>
|
<CButton color="link">Link</CButton>
|
||||||
</CButtonGroup>
|
</CButtonGroup>
|
||||||
</div>
|
</div>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
@@ -47,21 +47,21 @@
|
|||||||
<CCardBody>
|
<CCardBody>
|
||||||
<div>
|
<div>
|
||||||
<CButtonGroup>
|
<CButtonGroup>
|
||||||
<CButton variant="secondary">Left</CButton>
|
<CButton color="secondary">Left</CButton>
|
||||||
<CButton variant="secondary">Middle</CButton>
|
<CButton color="secondary">Middle</CButton>
|
||||||
<CButton variant="secondary">Right</CButton>
|
<CButton color="secondary">Right</CButton>
|
||||||
</CButtonGroup>
|
</CButtonGroup>
|
||||||
<br><br>
|
<br><br>
|
||||||
<CButtonGroup size="sm">
|
<CButtonGroup size="sm">
|
||||||
<CButton variant="secondary">Left</CButton>
|
<CButton color="secondary">Left</CButton>
|
||||||
<CButton variant="secondary">Middle</CButton>
|
<CButton color="secondary">Middle</CButton>
|
||||||
<CButton variant="secondary">Right</CButton>
|
<CButton color="secondary">Right</CButton>
|
||||||
</CButtonGroup>
|
</CButtonGroup>
|
||||||
<br><br>
|
<br><br>
|
||||||
<CButtonGroup size="lg">
|
<CButtonGroup size="lg">
|
||||||
<CButton variant="secondary">Left</CButton>
|
<CButton color="secondary">Left</CButton>
|
||||||
<CButton variant="secondary">Middle</CButton>
|
<CButton color="secondary">Middle</CButton>
|
||||||
<CButton variant="secondary">Right</CButton>
|
<CButton color="secondary">Right</CButton>
|
||||||
</CButtonGroup>
|
</CButtonGroup>
|
||||||
</div>
|
</div>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
@@ -75,16 +75,16 @@
|
|||||||
<CCardBody>
|
<CCardBody>
|
||||||
<div>
|
<div>
|
||||||
<CButtonGroup>
|
<CButtonGroup>
|
||||||
<CButton variant="secondary" class="d-sm-down-none">Button 1</CButton>
|
<CButton color="secondary" class="d-sm-down-none">Button 1</CButton>
|
||||||
<CButton variant="secondary" class="d-sm-down-none">Button 2</CButton>
|
<CButton color="secondary" class="d-sm-down-none">Button 2</CButton>
|
||||||
<CDropdown right text="Menu" variant="success">
|
<CDropdown right text="Menu" color="success">
|
||||||
<CDropdownItem>Item 1</CDropdownItem>
|
<CDropdownItem>Item 1</CDropdownItem>
|
||||||
<CDropdownItem>Item 2</CDropdownItem>
|
<CDropdownItem>Item 2</CDropdownItem>
|
||||||
<CDropdownDivider></CDropdownDivider>
|
<CDropdownDivider></CDropdownDivider>
|
||||||
<CDropdownItem>Item 3</CDropdownItem>
|
<CDropdownItem>Item 3</CDropdownItem>
|
||||||
</CDropdown>
|
</CDropdown>
|
||||||
<CButton variant="secondary" class="d-sm-down-none">Button 3</CButton>
|
<CButton color="secondary" class="d-sm-down-none">Button 3</CButton>
|
||||||
<CDropdown right split text="Split Menu" variant="info">
|
<CDropdown right split text="Split Menu" color="info">
|
||||||
<CDropdownItem>Item 1</CDropdownItem>
|
<CDropdownItem>Item 1</CDropdownItem>
|
||||||
<CDropdownItem>Item 2</CDropdownItem>
|
<CDropdownItem>Item 2</CDropdownItem>
|
||||||
<CDropdownDivider></CDropdownDivider>
|
<CDropdownDivider></CDropdownDivider>
|
||||||
@@ -104,9 +104,9 @@
|
|||||||
<CCardBody>
|
<CCardBody>
|
||||||
<div>
|
<div>
|
||||||
<CButtonGroup vertical>
|
<CButtonGroup vertical>
|
||||||
<CButton variant="secondary">Top</CButton>
|
<CButton color="secondary">Top</CButton>
|
||||||
<CButton variant="secondary">Middle</CButton>
|
<CButton color="secondary">Middle</CButton>
|
||||||
<CButton variant="secondary">Bottom</CButton>
|
<CButton color="secondary">Bottom</CButton>
|
||||||
</CButtonGroup>
|
</CButtonGroup>
|
||||||
</div>
|
</div>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
@@ -127,17 +127,17 @@
|
|||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CButtonToolbar aria-label="Toolbar with button groups" >
|
<CButtonToolbar aria-label="Toolbar with button groups" >
|
||||||
<CButtonGroup class="mx-1">
|
<CButtonGroup class="mx-1">
|
||||||
<CButton variant="secondary" class="d-sm-down-none">«</CButton>
|
<CButton color="secondary" class="d-sm-down-none">«</CButton>
|
||||||
<CButton variant="secondary">‹</CButton>
|
<CButton color="secondary">‹</CButton>
|
||||||
</CButtonGroup>
|
</CButtonGroup>
|
||||||
<CButtonGroup class="mx-1">
|
<CButtonGroup class="mx-1">
|
||||||
<CButton variant="secondary" class="d-sm-down-none">Edit</CButton>
|
<CButton color="secondary" class="d-sm-down-none">Edit</CButton>
|
||||||
<CButton variant="secondary">Undo</CButton>
|
<CButton color="secondary">Undo</CButton>
|
||||||
<CButton variant="secondary">Redo</CButton>
|
<CButton color="secondary">Redo</CButton>
|
||||||
</CButtonGroup>
|
</CButtonGroup>
|
||||||
<CButtonGroup class="mx-1">
|
<CButtonGroup class="mx-1">
|
||||||
<CButton variant="secondary">›</CButton>
|
<CButton color="secondary">›</CButton>
|
||||||
<CButton variant="secondary" class="d-sm-down-none">»</CButton>
|
<CButton color="secondary" class="d-sm-down-none">»</CButton>
|
||||||
</CButtonGroup>
|
</CButtonGroup>
|
||||||
</CButtonToolbar>
|
</CButtonToolbar>
|
||||||
<hr class="d-sm-down-none"/>
|
<hr class="d-sm-down-none"/>
|
||||||
@@ -146,8 +146,8 @@
|
|||||||
class="d-sm-down-none"
|
class="d-sm-down-none"
|
||||||
>
|
>
|
||||||
<CButtonGroup size="sm" class="mx-1">
|
<CButtonGroup size="sm" class="mx-1">
|
||||||
<CButton variant="secondary">New</CButton>
|
<CButton color="secondary">New</CButton>
|
||||||
<CButton variant="secondary">Edit</CButton>
|
<CButton color="secondary">Edit</CButton>
|
||||||
</CButtonGroup>
|
</CButtonGroup>
|
||||||
<CFormInput
|
<CFormInput
|
||||||
class="mb-0 w-25 mx-1"
|
class="mb-0 w-25 mx-1"
|
||||||
@@ -165,19 +165,19 @@
|
|||||||
custom
|
custom
|
||||||
/>
|
/>
|
||||||
<CButtonGroup size="sm" class="mx-1">
|
<CButtonGroup size="sm" class="mx-1">
|
||||||
<CButton variant="secondary">Save</CButton>
|
<CButton color="secondary">Save</CButton>
|
||||||
<CButton variant="secondary">Cancel</CButton>
|
<CButton color="secondary">Cancel</CButton>
|
||||||
</CButtonGroup>
|
</CButtonGroup>
|
||||||
</CButtonToolbar>
|
</CButtonToolbar>
|
||||||
<hr/>
|
<hr/>
|
||||||
<CButtonToolbar aria-label="Toolbar with button groups and dropdown menu">
|
<CButtonToolbar aria-label="Toolbar with button groups and dropdown menu">
|
||||||
<CButtonGroup class="mx-1 d-sm-down-none">
|
<CButtonGroup class="mx-1 d-sm-down-none">
|
||||||
<CButton variant="secondary">New</CButton>
|
<CButton color="secondary">New</CButton>
|
||||||
<CButton variant="secondary">Edit</CButton>
|
<CButton color="secondary">Edit</CButton>
|
||||||
<CButton variant="secondary">Undo</CButton>
|
<CButton color="secondary">Undo</CButton>
|
||||||
</CButtonGroup>
|
</CButtonGroup>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
variant="secondary"
|
color="secondary"
|
||||||
class="mx-1"
|
class="mx-1"
|
||||||
placement="bottom-end"
|
placement="bottom-end"
|
||||||
button-content="Menu"
|
button-content="Menu"
|
||||||
@@ -187,8 +187,8 @@
|
|||||||
<CDropdownItem>Item 3</CDropdownItem>
|
<CDropdownItem>Item 3</CDropdownItem>
|
||||||
</CDropdown>
|
</CDropdown>
|
||||||
<CButtonGroup class="mx-1">
|
<CButtonGroup class="mx-1">
|
||||||
<CButton variant="secondary">Save</CButton>
|
<CButton color="secondary">Save</CButton>
|
||||||
<CButton variant="secondary">Cancel</CButton>
|
<CButton color="secondary">Cancel</CButton>
|
||||||
</CButtonGroup>
|
</CButtonGroup>
|
||||||
</CButtonToolbar>
|
</CButtonToolbar>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
|
|||||||
@@ -22,7 +22,7 @@
|
|||||||
<CDropdown
|
<CDropdown
|
||||||
toggler-text="Dropdown Button"
|
toggler-text="Dropdown Button"
|
||||||
class="m-2"
|
class="m-2"
|
||||||
variant="secondary"
|
color="secondary"
|
||||||
>
|
>
|
||||||
<CDropdownItem>First Action</CDropdownItem>
|
<CDropdownItem>First Action</CDropdownItem>
|
||||||
<CDropdownItem>Second Action</CDropdownItem>
|
<CDropdownItem>Second Action</CDropdownItem>
|
||||||
@@ -44,7 +44,7 @@
|
|||||||
<CDropdown
|
<CDropdown
|
||||||
toggler-text="Dropdown with divider"
|
toggler-text="Dropdown with divider"
|
||||||
class="m-2"
|
class="m-2"
|
||||||
variant="secondary"
|
color="secondary"
|
||||||
>
|
>
|
||||||
<CDropdownItem>First item</CDropdownItem>
|
<CDropdownItem>First item</CDropdownItem>
|
||||||
<CDropdownItem>Second item</CDropdownItem>
|
<CDropdownItem>Second item</CDropdownItem>
|
||||||
@@ -56,7 +56,7 @@
|
|||||||
<CDropdown
|
<CDropdown
|
||||||
toggler-text="Dropdown with header"
|
toggler-text="Dropdown with header"
|
||||||
class="m-2"
|
class="m-2"
|
||||||
variant="secondary"
|
color="secondary"
|
||||||
>
|
>
|
||||||
<CDropdownHeader>Dropdown header</CDropdownHeader>
|
<CDropdownHeader>Dropdown header</CDropdownHeader>
|
||||||
<CDropdownItem>First item</CDropdownItem>
|
<CDropdownItem>First item</CDropdownItem>
|
||||||
@@ -77,7 +77,7 @@
|
|||||||
<div>
|
<div>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
toggler-text="Left align"
|
toggler-text="Left align"
|
||||||
variant="primary"
|
color="primary"
|
||||||
class="m-2 d-inline-block"
|
class="m-2 d-inline-block"
|
||||||
>
|
>
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
<CDropdownItem>Action</CDropdownItem>
|
||||||
@@ -87,7 +87,7 @@
|
|||||||
<CDropdown
|
<CDropdown
|
||||||
placement="bottom-end"
|
placement="bottom-end"
|
||||||
toggler-text="Right align"
|
toggler-text="Right align"
|
||||||
variant="primary"
|
color="primary"
|
||||||
class="m-2 d-inline-block"
|
class="m-2 d-inline-block"
|
||||||
>
|
>
|
||||||
<CDropdownItem>Action</CDropdownItem>
|
<CDropdownItem>Action</CDropdownItem>
|
||||||
@@ -98,7 +98,7 @@
|
|||||||
<div>
|
<div>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
toggler-text="Drop-Up"
|
toggler-text="Drop-Up"
|
||||||
variant="info"
|
color="info"
|
||||||
class="m-2"
|
class="m-2"
|
||||||
placement="top-start"
|
placement="top-start"
|
||||||
|
|
||||||
@@ -110,7 +110,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
variant="secondary"
|
color="secondary"
|
||||||
:offset="25"
|
:offset="25"
|
||||||
toggler-text="Offset Dropdown"
|
toggler-text="Offset Dropdown"
|
||||||
class="m-2"
|
class="m-2"
|
||||||
@@ -122,7 +122,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
variant="secondary"
|
color="secondary"
|
||||||
split
|
split
|
||||||
toggler-text="Split Dropdown"
|
toggler-text="Split Dropdown"
|
||||||
class="m-2"
|
class="m-2"
|
||||||
@@ -147,7 +147,7 @@
|
|||||||
<CCardBody>
|
<CCardBody>
|
||||||
<div>
|
<div>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
variant="link"
|
color="link"
|
||||||
size="lg"
|
size="lg"
|
||||||
no-caret
|
no-caret
|
||||||
>
|
>
|
||||||
@@ -172,7 +172,7 @@
|
|||||||
<CCardBody>
|
<CCardBody>
|
||||||
<div>
|
<div>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
variant="secondary"
|
color="secondary"
|
||||||
size="lg"
|
size="lg"
|
||||||
toggler-text="Large"
|
toggler-text="Large"
|
||||||
class="m-2 d-inline-block"
|
class="m-2 d-inline-block"
|
||||||
@@ -182,7 +182,7 @@
|
|||||||
<CDropdownItem>Something else here</CDropdownItem>
|
<CDropdownItem>Something else here</CDropdownItem>
|
||||||
</CDropdown>
|
</CDropdown>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
variant="secondary"
|
color="secondary"
|
||||||
size="lg"
|
size="lg"
|
||||||
split
|
split
|
||||||
toggler-text="Large Split"
|
toggler-text="Large Split"
|
||||||
@@ -194,7 +194,7 @@
|
|||||||
</CDropdown>
|
</CDropdown>
|
||||||
<br>
|
<br>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
variant="secondary"
|
color="secondary"
|
||||||
size="sm"
|
size="sm"
|
||||||
toggler-text="Small"
|
toggler-text="Small"
|
||||||
class="m-2 d-inline-block"
|
class="m-2 d-inline-block"
|
||||||
@@ -204,7 +204,7 @@
|
|||||||
<CDropdownItem>Something else here...</CDropdownItem>
|
<CDropdownItem>Something else here...</CDropdownItem>
|
||||||
</CDropdown>
|
</CDropdown>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
variant="secondary"
|
color="secondary"
|
||||||
size="sm"
|
size="sm"
|
||||||
split toggler-text="Small Split"
|
split toggler-text="Small Split"
|
||||||
class="m-2"
|
class="m-2"
|
||||||
@@ -229,7 +229,7 @@
|
|||||||
<CCardBody>
|
<CCardBody>
|
||||||
<div>
|
<div>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
toggler-text="Dropdown ARIA" variant="primary"
|
toggler-text="Dropdown ARIA" color="primary"
|
||||||
class="m-2"
|
class="m-2"
|
||||||
>
|
>
|
||||||
<div role="group">
|
<div role="group">
|
||||||
@@ -256,13 +256,13 @@
|
|||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
<i class="fa fa-align-justify"></i>
|
<i class="fa fa-align-justify"></i>
|
||||||
<strong> Dropdown </strong>
|
<strong> Dropdown </strong>
|
||||||
<small><code>variant</code></small>
|
<small><code>color</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
size="sm"
|
size="sm"
|
||||||
toggler-text="Primary"
|
toggler-text="Primary"
|
||||||
variant="primary"
|
color="primary"
|
||||||
class="m-0 d-inline-block"
|
class="m-0 d-inline-block"
|
||||||
>
|
>
|
||||||
<CDropdownItem>First Action</CDropdownItem>
|
<CDropdownItem>First Action</CDropdownItem>
|
||||||
@@ -272,7 +272,7 @@
|
|||||||
<CDropdown
|
<CDropdown
|
||||||
size="sm"
|
size="sm"
|
||||||
toggler-text="Secondary"
|
toggler-text="Secondary"
|
||||||
variant="secondary"
|
color="secondary"
|
||||||
class="m-0 d-inline-block"
|
class="m-0 d-inline-block"
|
||||||
>
|
>
|
||||||
<CDropdownItem>First Action</CDropdownItem>
|
<CDropdownItem>First Action</CDropdownItem>
|
||||||
@@ -282,7 +282,7 @@
|
|||||||
<CDropdown
|
<CDropdown
|
||||||
size="sm"
|
size="sm"
|
||||||
toggler-text="Success"
|
toggler-text="Success"
|
||||||
variant="success"
|
color="success"
|
||||||
class="m-0 d-inline-block"
|
class="m-0 d-inline-block"
|
||||||
>
|
>
|
||||||
<CDropdownItem>First Action</CDropdownItem>
|
<CDropdownItem>First Action</CDropdownItem>
|
||||||
@@ -292,7 +292,7 @@
|
|||||||
<CDropdown
|
<CDropdown
|
||||||
size="sm"
|
size="sm"
|
||||||
toggler-text="Warning"
|
toggler-text="Warning"
|
||||||
variant="warning"
|
color="warning"
|
||||||
class="m-0 d-inline-block"
|
class="m-0 d-inline-block"
|
||||||
>
|
>
|
||||||
<CDropdownItem>First Action</CDropdownItem>
|
<CDropdownItem>First Action</CDropdownItem>
|
||||||
@@ -302,7 +302,7 @@
|
|||||||
<CDropdown
|
<CDropdown
|
||||||
size="sm"
|
size="sm"
|
||||||
toggler-text="Danger"
|
toggler-text="Danger"
|
||||||
variant="danger"
|
color="danger"
|
||||||
class="m-0 d-inline-block"
|
class="m-0 d-inline-block"
|
||||||
>
|
>
|
||||||
<CDropdownItem>First Action</CDropdownItem>
|
<CDropdownItem>First Action</CDropdownItem>
|
||||||
@@ -312,7 +312,7 @@
|
|||||||
<CDropdown
|
<CDropdown
|
||||||
size="sm"
|
size="sm"
|
||||||
toggler-text="Info"
|
toggler-text="Info"
|
||||||
variant="info"
|
color="info"
|
||||||
class="m-0 d-inline-block"
|
class="m-0 d-inline-block"
|
||||||
>
|
>
|
||||||
<CDropdownItem>First Action</CDropdownItem>
|
<CDropdownItem>First Action</CDropdownItem>
|
||||||
@@ -322,7 +322,7 @@
|
|||||||
<CDropdown
|
<CDropdown
|
||||||
size="sm"
|
size="sm"
|
||||||
toggler-text="Light"
|
toggler-text="Light"
|
||||||
variant="light"
|
color="light"
|
||||||
class="m-0 d-inline-block"
|
class="m-0 d-inline-block"
|
||||||
>
|
>
|
||||||
<CDropdownItem>First Action</CDropdownItem>
|
<CDropdownItem>First Action</CDropdownItem>
|
||||||
@@ -332,7 +332,7 @@
|
|||||||
<CDropdown
|
<CDropdown
|
||||||
size="sm"
|
size="sm"
|
||||||
toggler-text="Dark"
|
toggler-text="Dark"
|
||||||
variant="dark"
|
color="dark"
|
||||||
class="m-0 d-inline-block"
|
class="m-0 d-inline-block"
|
||||||
>
|
>
|
||||||
<CDropdownItem>First Action</CDropdownItem>
|
<CDropdownItem>First Action</CDropdownItem>
|
||||||
@@ -342,7 +342,7 @@
|
|||||||
<CDropdown
|
<CDropdown
|
||||||
size="sm"
|
size="sm"
|
||||||
toggler-text="Link"
|
toggler-text="Link"
|
||||||
variant="link"
|
color="link"
|
||||||
class="m-0 d-inline-block"
|
class="m-0 d-inline-block"
|
||||||
>
|
>
|
||||||
<CDropdownItem>First Action</CDropdownItem>
|
<CDropdownItem>First Action</CDropdownItem>
|
||||||
|
|||||||
@@ -20,31 +20,31 @@
|
|||||||
Normal
|
Normal
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block variant="primary">Primary</CButton>
|
<CButton block color="primary">Primary</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block variant="secondary">Secondary</CButton>
|
<CButton block color="secondary">Secondary</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block variant="success">Success</CButton>
|
<CButton block color="success">Success</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block variant="warning">Warning</CButton>
|
<CButton block color="warning">Warning</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block variant="danger">Danger</CButton>
|
<CButton block color="danger">Danger</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block variant="info">Info</CButton>
|
<CButton block color="info">Info</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block variant="light">Light</CButton>
|
<CButton block color="light">Light</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block variant="dark">Dark</CButton>
|
<CButton block color="dark">Dark</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block variant="link">Link</CButton>
|
<CButton block color="link">Link</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
<CRow class="align-items-center mt-3">
|
<CRow class="align-items-center mt-3">
|
||||||
@@ -52,31 +52,31 @@
|
|||||||
Active State
|
Active State
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton pressed block variant="primary" aria-pressed="true">Primary</CButton>
|
<CButton pressed block color="primary" aria-pressed="true">Primary</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton pressed block variant="secondary" aria-pressed="true">Secondary</CButton>
|
<CButton pressed block color="secondary" aria-pressed="true">Secondary</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton pressed block variant="success" aria-pressed="true">Success</CButton>
|
<CButton pressed block color="success" aria-pressed="true">Success</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton pressed block variant="warning" aria-pressed="true">Warning</CButton>
|
<CButton pressed block color="warning" aria-pressed="true">Warning</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton pressed block variant="danger" aria-pressed="true">Danger</CButton>
|
<CButton pressed block color="danger" aria-pressed="true">Danger</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton pressed block variant="info" aria-pressed="true">Info</CButton>
|
<CButton pressed block color="info" aria-pressed="true">Info</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton pressed block variant="light" aria-pressed="true">Light</CButton>
|
<CButton pressed block color="light" aria-pressed="true">Light</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton pressed block variant="dark" aria-pressed="true">Dark</CButton>
|
<CButton pressed block color="dark" aria-pressed="true">Dark</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton pressed block variant="link" aria-pressed="true">Link</CButton>
|
<CButton pressed block color="link" aria-pressed="true">Link</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
<CRow class="align-items-center mt-3">
|
<CRow class="align-items-center mt-3">
|
||||||
@@ -84,31 +84,31 @@
|
|||||||
Disabled
|
Disabled
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block variant="primary" disabled>Primary</CButton>
|
<CButton block color="primary" disabled>Primary</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block variant="secondary" disabled>Secondary</CButton>
|
<CButton block color="secondary" disabled>Secondary</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block variant="success" disabled>Success</CButton>
|
<CButton block color="success" disabled>Success</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block variant="warning" disabled>Warning</CButton>
|
<CButton block color="warning" disabled>Warning</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block variant="danger" disabled>Danger</CButton>
|
<CButton block color="danger" disabled>Danger</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block variant="info" disabled>Info</CButton>
|
<CButton block color="info" disabled>Info</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block variant="light" disabled>Light</CButton>
|
<CButton block color="light" disabled>Light</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block variant="dark" disabled>Dark</CButton>
|
<CButton block color="dark" disabled>Dark</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block variant="link" disabled>Link</CButton>
|
<CButton block color="link" disabled>Link</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
@@ -126,28 +126,28 @@
|
|||||||
Normal
|
Normal
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block outline variant="primary">Primary</CButton>
|
<CButton block outline color="primary">Primary</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block outline variant="secondary">Secondary</CButton>
|
<CButton block outline color="secondary">Secondary</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block outline variant="success">Success</CButton>
|
<CButton block outline color="success">Success</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block outline variant="warning">Warning</CButton>
|
<CButton block outline color="warning">Warning</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block outline variant="danger">Danger</CButton>
|
<CButton block outline color="danger">Danger</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block outline variant="info">Info</CButton>
|
<CButton block outline color="info">Info</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block outline variant="light">Light</CButton>
|
<CButton block outline color="light">Light</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block outline variant="dark">Dark</CButton>
|
<CButton block outline color="dark">Dark</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
@@ -156,28 +156,28 @@
|
|||||||
Active State
|
Active State
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block pressed outline variant="primary" aria-pressed="true">Primary</CButton>
|
<CButton block pressed outline color="primary" aria-pressed="true">Primary</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block pressed outline variant="secondary" aria-pressed="true">Secondary</CButton>
|
<CButton block pressed outline color="secondary" aria-pressed="true">Secondary</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block pressed outline variant="success" aria-pressed="true">Success</CButton>
|
<CButton block pressed outline color="success" aria-pressed="true">Success</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block pressed outline variant="warning" aria-pressed="true">Warning</CButton>
|
<CButton block pressed outline color="warning" aria-pressed="true">Warning</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block pressed outline variant="danger" aria-pressed="true">Danger</CButton>
|
<CButton block pressed outline color="danger" aria-pressed="true">Danger</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block pressed outline variant="info" aria-pressed="true">Info</CButton>
|
<CButton block pressed outline color="info" aria-pressed="true">Info</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block pressed outline variant="light" aria-pressed="true">Light</CButton>
|
<CButton block pressed outline color="light" aria-pressed="true">Light</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block pressed outline variant="dark" aria-pressed="true">Dark</CButton>
|
<CButton block pressed outline color="dark" aria-pressed="true">Dark</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
@@ -186,28 +186,28 @@
|
|||||||
Disabled
|
Disabled
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block outline variant="primary" disabled>Primary</CButton>
|
<CButton block outline color="primary" disabled>Primary</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block outline variant="secondary" disabled>Secondary</CButton>
|
<CButton block outline color="secondary" disabled>Secondary</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block outline variant="success" disabled>Success</CButton>
|
<CButton block outline color="success" disabled>Success</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block outline variant="warning" disabled>Warning</CButton>
|
<CButton block outline color="warning" disabled>Warning</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block outline variant="danger" disabled>Danger</CButton>
|
<CButton block outline color="danger" disabled>Danger</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block outline variant="info" disabled>Info</CButton>
|
<CButton block outline color="info" disabled>Info</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block outline variant="light" disabled>Light</CButton>
|
<CButton block outline color="light" disabled>Light</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block outline variant="dark" disabled>Dark</CButton>
|
<CButton block outline color="dark" disabled>Dark</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
@@ -227,28 +227,28 @@
|
|||||||
Normal
|
Normal
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block ghost variant="primary">Primary</CButton>
|
<CButton block ghost color="primary">Primary</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block ghost variant="secondary">Secondary</CButton>
|
<CButton block ghost color="secondary">Secondary</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block ghost variant="success">Success</CButton>
|
<CButton block ghost color="success">Success</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block ghost variant="warning">Warning</CButton>
|
<CButton block ghost color="warning">Warning</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block ghost variant="danger">Danger</CButton>
|
<CButton block ghost color="danger">Danger</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block ghost variant="info">Info</CButton>
|
<CButton block ghost color="info">Info</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block ghost variant="light">Light</CButton>
|
<CButton block ghost color="light">Light</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block ghost variant="dark">Dark</CButton>
|
<CButton block ghost color="dark">Dark</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
@@ -257,28 +257,28 @@
|
|||||||
Active State
|
Active State
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block pressed ghost variant="primary" aria-pressed="true">Primary</CButton>
|
<CButton block pressed ghost color="primary" aria-pressed="true">Primary</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block pressed ghost variant="secondary" aria-pressed="true">Secondary</CButton>
|
<CButton block pressed ghost color="secondary" aria-pressed="true">Secondary</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block pressed ghost variant="success" aria-pressed="true">Success</CButton>
|
<CButton block pressed ghost color="success" aria-pressed="true">Success</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block pressed ghost variant="warning" aria-pressed="true">Warning</CButton>
|
<CButton block pressed ghost color="warning" aria-pressed="true">Warning</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block pressed ghost variant="danger" aria-pressed="true">Danger</CButton>
|
<CButton block pressed ghost color="danger" aria-pressed="true">Danger</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block pressed ghost variant="info" aria-pressed="true">Info</CButton>
|
<CButton block pressed ghost color="info" aria-pressed="true">Info</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block pressed ghost variant="light" aria-pressed="true">Light</CButton>
|
<CButton block pressed ghost color="light" aria-pressed="true">Light</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block pressed ghost variant="dark" aria-pressed="true">Dark</CButton>
|
<CButton block pressed ghost color="dark" aria-pressed="true">Dark</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
@@ -287,28 +287,28 @@
|
|||||||
Disabled
|
Disabled
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block ghost variant="primary" disabled>Primary</CButton>
|
<CButton block ghost color="primary" disabled>Primary</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block ghost variant="secondary" disabled>Secondary</CButton>
|
<CButton block ghost color="secondary" disabled>Secondary</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block ghost variant="success" disabled>Success</CButton>
|
<CButton block ghost color="success" disabled>Success</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block ghost variant="warning" disabled>Warning</CButton>
|
<CButton block ghost color="warning" disabled>Warning</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block ghost variant="danger" disabled>Danger</CButton>
|
<CButton block ghost color="danger" disabled>Danger</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block ghost variant="info" disabled>Info</CButton>
|
<CButton block ghost color="info" disabled>Info</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block ghost variant="light" disabled>Light</CButton>
|
<CButton block ghost color="light" disabled>Light</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block ghost variant="dark" disabled>Dark</CButton>
|
<CButton block ghost color="dark" disabled>Dark</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
@@ -328,31 +328,31 @@
|
|||||||
Normal
|
Normal
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block variant="primary" square>Primary</CButton>
|
<CButton block color="primary" square>Primary</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block variant="secondary" square>Secondary</CButton>
|
<CButton block color="secondary" square>Secondary</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block variant="success" square>Success</CButton>
|
<CButton block color="success" square>Success</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block variant="warning" square>Warning</CButton>
|
<CButton block color="warning" square>Warning</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block variant="danger" square>Danger</CButton>
|
<CButton block color="danger" square>Danger</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block variant="info" square>Info</CButton>
|
<CButton block color="info" square>Info</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block variant="light" square>Light</CButton>
|
<CButton block color="light" square>Light</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block variant="dark" square>Dark</CButton>
|
<CButton block color="dark" square>Dark</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block variant="link" square>Link</CButton>
|
<CButton block color="link" square>Link</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
<CRow class="align-items-center mt-3">
|
<CRow class="align-items-center mt-3">
|
||||||
@@ -360,31 +360,31 @@
|
|||||||
Active State
|
Active State
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton pressed block variant="primary" square aria-pressed="true">Primary</CButton>
|
<CButton pressed block color="primary" square aria-pressed="true">Primary</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton pressed block variant="secondary" square aria-pressed="true">Secondary</CButton>
|
<CButton pressed block color="secondary" square aria-pressed="true">Secondary</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton pressed block variant="success" square aria-pressed="true">Success</CButton>
|
<CButton pressed block color="success" square aria-pressed="true">Success</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton pressed block variant="warning" square aria-pressed="true">Warning</CButton>
|
<CButton pressed block color="warning" square aria-pressed="true">Warning</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton pressed block variant="danger" square aria-pressed="true">Danger</CButton>
|
<CButton pressed block color="danger" square aria-pressed="true">Danger</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton pressed block variant="info" square aria-pressed="true">Info</CButton>
|
<CButton pressed block color="info" square aria-pressed="true">Info</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton pressed block variant="light" square aria-pressed="true">Light</CButton>
|
<CButton pressed block color="light" square aria-pressed="true">Light</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton pressed block variant="dark" square aria-pressed="true">Dark</CButton>
|
<CButton pressed block color="dark" square aria-pressed="true">Dark</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton pressed block variant="link" square aria-pressed="true">Link</CButton>
|
<CButton pressed block color="link" square aria-pressed="true">Link</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
<CRow class="align-items-center mt-3">
|
<CRow class="align-items-center mt-3">
|
||||||
@@ -392,31 +392,31 @@
|
|||||||
Disabled
|
Disabled
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block variant="primary" square disabled>Primary</CButton>
|
<CButton block color="primary" square disabled>Primary</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block variant="secondary" square disabled>Secondary</CButton>
|
<CButton block color="secondary" square disabled>Secondary</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block variant="success" square disabled>Success</CButton>
|
<CButton block color="success" square disabled>Success</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block variant="warning" square disabled>Warning</CButton>
|
<CButton block color="warning" square disabled>Warning</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block variant="danger" square disabled>Danger</CButton>
|
<CButton block color="danger" square disabled>Danger</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block variant="info" square disabled>Info</CButton>
|
<CButton block color="info" square disabled>Info</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block variant="light" square disabled>Light</CButton>
|
<CButton block color="light" square disabled>Light</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block variant="dark" square disabled>Dark</CButton>
|
<CButton block color="dark" square disabled>Dark</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block variant="link" square disabled>Link</CButton>
|
<CButton block color="link" square disabled>Link</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
@@ -435,31 +435,31 @@
|
|||||||
Normal
|
Normal
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block variant="primary" pill>Primary</CButton>
|
<CButton block color="primary" pill>Primary</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block variant="secondary" pill>Secondary</CButton>
|
<CButton block color="secondary" pill>Secondary</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block variant="success" pill>Success</CButton>
|
<CButton block color="success" pill>Success</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block variant="warning" pill>Warning</CButton>
|
<CButton block color="warning" pill>Warning</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block variant="danger" pill>Danger</CButton>
|
<CButton block color="danger" pill>Danger</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block variant="info" pill>Info</CButton>
|
<CButton block color="info" pill>Info</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block variant="light" pill>Light</CButton>
|
<CButton block color="light" pill>Light</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block variant="dark" pill>Dark</CButton>
|
<CButton block color="dark" pill>Dark</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block variant="link" pill>Link</CButton>
|
<CButton block color="link" pill>Link</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
<CRow class="align-items-center mt-3">
|
<CRow class="align-items-center mt-3">
|
||||||
@@ -467,31 +467,31 @@
|
|||||||
Active State
|
Active State
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton pressed block variant="primary" pill aria-pressed="true">Primary</CButton>
|
<CButton pressed block color="primary" pill aria-pressed="true">Primary</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton pressed block variant="secondary" pill aria-pressed="true">Secondary</CButton>
|
<CButton pressed block color="secondary" pill aria-pressed="true">Secondary</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton pressed block variant="success" pill aria-pressed="true">Success</CButton>
|
<CButton pressed block color="success" pill aria-pressed="true">Success</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton pressed block variant="warning" pill aria-pressed="true">Warning</CButton>
|
<CButton pressed block color="warning" pill aria-pressed="true">Warning</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton pressed block variant="danger" pill aria-pressed="true">Danger</CButton>
|
<CButton pressed block color="danger" pill aria-pressed="true">Danger</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton pressed block variant="info" pill aria-pressed="true">Info</CButton>
|
<CButton pressed block color="info" pill aria-pressed="true">Info</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton pressed block variant="light" pill aria-pressed="true">Light</CButton>
|
<CButton pressed block color="light" pill aria-pressed="true">Light</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton pressed block variant="dark" pill aria-pressed="true">Dark</CButton>
|
<CButton pressed block color="dark" pill aria-pressed="true">Dark</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton pressed block variant="link" pill aria-pressed="true">Link</CButton>
|
<CButton pressed block color="link" pill aria-pressed="true">Link</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
<CRow class="align-items-center mt-3">
|
<CRow class="align-items-center mt-3">
|
||||||
@@ -499,31 +499,31 @@
|
|||||||
Disabled
|
Disabled
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block variant="primary" pill disabled>Primary</CButton>
|
<CButton block color="primary" pill disabled>Primary</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block variant="secondary" pill disabled>Secondary</CButton>
|
<CButton block color="secondary" pill disabled>Secondary</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block variant="success" pill disabled>Success</CButton>
|
<CButton block color="success" pill disabled>Success</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block variant="warning" pill disabled>Warning</CButton>
|
<CButton block color="warning" pill disabled>Warning</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block variant="danger" pill disabled>Danger</CButton>
|
<CButton block color="danger" pill disabled>Danger</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block variant="info" pill disabled>Info</CButton>
|
<CButton block color="info" pill disabled>Info</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block variant="light" pill disabled>Light</CButton>
|
<CButton block color="light" pill disabled>Light</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block variant="dark" pill disabled>Dark</CButton>
|
<CButton block color="dark" pill disabled>Dark</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||||
<CButton block variant="link" pill disabled>Link</CButton>
|
<CButton block color="link" pill disabled>Link</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
@@ -539,19 +539,19 @@
|
|||||||
Small
|
Small
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||||
<CButton variant="primary" size="sm">Standard Button</CButton>
|
<CButton color="primary" size="sm">Standard Button</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||||
<CButton outline variant="secondary" size="sm">Outline Button</CButton>
|
<CButton outline color="secondary" size="sm">Outline Button</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||||
<CButton size="sm" ghost variant="success">Ghost Button</CButton>
|
<CButton size="sm" ghost color="success">Ghost Button</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||||
<CButton variant="warning" size="sm" square>Square Button</CButton>
|
<CButton color="warning" size="sm" square>Square Button</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||||
<CButton variant="danger" size="sm" pill>Pill Button</CButton>
|
<CButton color="danger" size="sm" pill>Pill Button</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
<CRow class="align-items-center mt-3">
|
<CRow class="align-items-center mt-3">
|
||||||
@@ -559,19 +559,19 @@
|
|||||||
Normal
|
Normal
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||||
<CButton variant="primary">Standard Button</CButton>
|
<CButton color="primary">Standard Button</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||||
<CButton outline variant="secondary">Outline Button</CButton>
|
<CButton outline color="secondary">Outline Button</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||||
<CButton ghost variant="success">Ghost Button</CButton>
|
<CButton ghost color="success">Ghost Button</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||||
<CButton variant="warning" square>Square Button</CButton>
|
<CButton color="warning" square>Square Button</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||||
<CButton variant="danger" pill>Pill Button</CButton>
|
<CButton color="danger" pill>Pill Button</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
<CRow class="align-items-center mt-3">
|
<CRow class="align-items-center mt-3">
|
||||||
@@ -579,19 +579,19 @@
|
|||||||
Large
|
Large
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||||
<CButton variant="primary" size="lg">Standard Button</CButton>
|
<CButton color="primary" size="lg">Standard Button</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||||
<CButton outline variant="secondary" size="lg">Outline Button</CButton>
|
<CButton outline color="secondary" size="lg">Outline Button</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||||
<CButton ghost variant="success" size="lg">Ghost Button</CButton>
|
<CButton ghost color="success" size="lg">Ghost Button</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||||
<CButton variant="warning" size="lg" square>Square Button</CButton>
|
<CButton color="warning" size="lg" square>Square Button</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||||
<CButton variant="danger" size="lg" pill>Pill Button</CButton>
|
<CButton color="danger" size="lg" pill>Pill Button</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
@@ -603,27 +603,27 @@
|
|||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CRow class="align-items-center">
|
<CRow class="align-items-center">
|
||||||
<CCol sm xs="12" class="text-center mt-3">
|
<CCol sm xs="12" class="text-center mt-3">
|
||||||
<CButton variant="primary">
|
<CButton color="primary">
|
||||||
<i class="cui-lightbulb"></i> Standard Button
|
<i class="cui-lightbulb"></i> Standard Button
|
||||||
</CButton>
|
</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm xs="12" class="text-center mt-3">
|
<CCol sm xs="12" class="text-center mt-3">
|
||||||
<CButton variant="secondary" outline>
|
<CButton color="secondary" outline>
|
||||||
<i class="cui-lightbulb"></i> Outline Button
|
<i class="cui-lightbulb"></i> Outline Button
|
||||||
</CButton>
|
</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm xs="12" class="text-center mt-3">
|
<CCol sm xs="12" class="text-center mt-3">
|
||||||
<CButton variant="success">
|
<CButton color="success">
|
||||||
<i class="cui-lightbulb"></i> Ghost Button
|
<i class="cui-lightbulb"></i> Ghost Button
|
||||||
</CButton>
|
</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm xs="12" class="text-center mt-3">
|
<CCol sm xs="12" class="text-center mt-3">
|
||||||
<CButton variant="warning" square>
|
<CButton color="warning" square>
|
||||||
<i class="cui-lightbulb"></i> Square Button
|
<i class="cui-lightbulb"></i> Square Button
|
||||||
</CButton>
|
</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm xs="12" class="text-center mt-3">
|
<CCol sm xs="12" class="text-center mt-3">
|
||||||
<CButton variant="danger" pill>
|
<CButton color="danger" pill>
|
||||||
<i class="cui-lightbulb"></i> Pill Button
|
<i class="cui-lightbulb"></i> Pill Button
|
||||||
</CButton>
|
</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -637,22 +637,22 @@
|
|||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol sm xs="12" class="text-center mt-3">
|
<CCol sm xs="12" class="text-center mt-3">
|
||||||
<CButton outline variant="primary" :pressed.sync="togglePress">Primary {{togglePress ? 'On ' : 'Off'}}</CButton>
|
<CButton outline color="primary" :pressed.sync="togglePress">Primary {{togglePress ? 'On ' : 'Off'}}</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm xs="12" class="text-center mt-3">
|
<CCol sm xs="12" class="text-center mt-3">
|
||||||
<CButton outline variant="secondary" :pressed.sync="togglePress">Secondary {{togglePress ? 'On ' : 'Off'}}</CButton>
|
<CButton outline color="secondary" :pressed.sync="togglePress">Secondary {{togglePress ? 'On ' : 'Off'}}</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm xs="12" class="text-center mt-3">
|
<CCol sm xs="12" class="text-center mt-3">
|
||||||
<CButton outline variant="success" :pressed.sync="togglePress">Success {{togglePress ? 'On ' : 'Off'}}</CButton>
|
<CButton outline color="success" :pressed.sync="togglePress">Success {{togglePress ? 'On ' : 'Off'}}</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm xs="12" class="text-center mt-3">
|
<CCol sm xs="12" class="text-center mt-3">
|
||||||
<CButton outline variant="info" :pressed.sync="togglePress">Info {{togglePress ? 'On ' : 'Off'}}</CButton>
|
<CButton outline color="info" :pressed.sync="togglePress">Info {{togglePress ? 'On ' : 'Off'}}</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm xs="12" class="text-center mt-3">
|
<CCol sm xs="12" class="text-center mt-3">
|
||||||
<CButton outline variant="warning" :pressed.sync="togglePress">Warning {{togglePress ? 'On ' : 'Off'}}</CButton>
|
<CButton outline color="warning" :pressed.sync="togglePress">Warning {{togglePress ? 'On ' : 'Off'}}</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm xs="12" class="text-center mt-3">
|
<CCol sm xs="12" class="text-center mt-3">
|
||||||
<CButton outline variant="danger" :pressed.sync="togglePress">Danger {{togglePress ? 'On ' : 'Off'}}</CButton>
|
<CButton outline color="danger" :pressed.sync="togglePress">Danger {{togglePress ? 'On ' : 'Off'}}</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
@@ -664,13 +664,13 @@
|
|||||||
<strong>Block Level CButtons </strong><small>Add this <code>block</code></small>
|
<strong>Block Level CButtons </strong><small>Add this <code>block</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CButton size="lg" variant="secondary" block>Block level button</CButton>
|
<CButton size="lg" color="secondary" block>Block level button</CButton>
|
||||||
<CButton size="lg" variant="primary" block>Block level button</CButton>
|
<CButton size="lg" color="primary" block>Block level button</CButton>
|
||||||
<CButton size="lg" variant="success" block>Block level button</CButton>
|
<CButton size="lg" color="success" block>Block level button</CButton>
|
||||||
<CButton size="lg" variant="info" block>Block level button</CButton>
|
<CButton size="lg" color="info" block>Block level button</CButton>
|
||||||
<CButton size="lg" variant="warning" block>Block level button</CButton>
|
<CButton size="lg" color="warning" block>Block level button</CButton>
|
||||||
<CButton size="lg" variant="danger" block>Block level button</CButton>
|
<CButton size="lg" color="danger" block>Block level button</CButton>
|
||||||
<CButton size="lg" variant="link" block>Block level button</CButton>
|
<CButton size="lg" color="link" block>Block level button</CButton>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -680,13 +680,13 @@
|
|||||||
<strong>Block Level CButtons </strong><small>Add this <code>block</code></small>
|
<strong>Block Level CButtons </strong><small>Add this <code>block</code></small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CButton size="lg" outline variant="secondary" block>Block level button</CButton>
|
<CButton size="lg" outline color="secondary" block>Block level button</CButton>
|
||||||
<CButton size="lg" outline variant="primary" block>Block level button</CButton>
|
<CButton size="lg" outline color="primary" block>Block level button</CButton>
|
||||||
<CButton size="lg" outline variant="success" block>Block level button</CButton>
|
<CButton size="lg" outline color="success" block>Block level button</CButton>
|
||||||
<CButton size="lg" outline variant="info" block>Block level button</CButton>
|
<CButton size="lg" outline color="info" block>Block level button</CButton>
|
||||||
<CButton size="lg" outline variant="warning" block>Block level button</CButton>
|
<CButton size="lg" outline color="warning" block>Block level button</CButton>
|
||||||
<CButton size="lg" outline variant="danger" block>Block level button</CButton>
|
<CButton size="lg" outline color="danger" block>Block level button</CButton>
|
||||||
<CButton size="lg" ghost variant="info" block>Block level button</CButton>
|
<CButton size="lg" ghost color="info" block>Block level button</CButton>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
<CCard>
|
<CCard>
|
||||||
<CCardHeader>
|
<CCardHeader>
|
||||||
<i class="cui-pencil"></i>CoreUI Icons
|
<i class="cui-pencil"></i>CoreUI Icons
|
||||||
<CBadge variant="info">New</CBadge>
|
<CBadge color="info">New</CBadge>
|
||||||
<div class="card-header-actions">
|
<div class="card-header-actions">
|
||||||
<a
|
<a
|
||||||
href="https://github.com/coreui/coreui-icons"
|
href="https://github.com/coreui/coreui-icons"
|
||||||
|
|||||||
@@ -19,14 +19,14 @@
|
|||||||
<CCardBody>
|
<CCardBody>
|
||||||
<div>
|
<div>
|
||||||
<p></p>
|
<p></p>
|
||||||
<CAlert show variant="primary">Primary Alert</CAlert>
|
<CAlert show color="primary">Primary Alert</CAlert>
|
||||||
<CAlert show variant="secondary">Secondary Alert</CAlert>
|
<CAlert show color="secondary">Secondary Alert</CAlert>
|
||||||
<CAlert show variant="success">Success Alert</CAlert>
|
<CAlert show color="success">Success Alert</CAlert>
|
||||||
<CAlert show variant="danger">Danger Alert</CAlert>
|
<CAlert show color="danger">Danger Alert</CAlert>
|
||||||
<CAlert show variant="warning">Warning Alert</CAlert>
|
<CAlert show color="warning">Warning Alert</CAlert>
|
||||||
<CAlert show variant="info">Info Alert</CAlert>
|
<CAlert show color="info">Info Alert</CAlert>
|
||||||
<CAlert show variant="light">Light Alert</CAlert>
|
<CAlert show color="light">Light Alert</CAlert>
|
||||||
<CAlert show variant="dark">Dark Alert</CAlert>
|
<CAlert show color="dark">Dark Alert</CAlert>
|
||||||
</div>
|
</div>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
@@ -39,28 +39,28 @@
|
|||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<div>
|
<div>
|
||||||
<CAlert show variant="primary">
|
<CAlert show color="primary">
|
||||||
Primary Alert with <a href="#" class="alert-link">an example link</a>.
|
Primary Alert with <a href="#" class="alert-link">an example link</a>.
|
||||||
</CAlert>
|
</CAlert>
|
||||||
<CAlert show variant="secondary">
|
<CAlert show color="secondary">
|
||||||
Secondary Alert with <a href="#" class="alert-link">an example link</a>.
|
Secondary Alert with <a href="#" class="alert-link">an example link</a>.
|
||||||
</CAlert>
|
</CAlert>
|
||||||
<CAlert show variant="success">
|
<CAlert show color="success">
|
||||||
Success Alert with <a href="#" class="alert-link">an example link</a>.
|
Success Alert with <a href="#" class="alert-link">an example link</a>.
|
||||||
</CAlert>
|
</CAlert>
|
||||||
<CAlert show variant="danger">
|
<CAlert show color="danger">
|
||||||
Danger Alert with <a href="#" class="alert-link">an example link</a>.
|
Danger Alert with <a href="#" class="alert-link">an example link</a>.
|
||||||
</CAlert>
|
</CAlert>
|
||||||
<CAlert show variant="warning">
|
<CAlert show color="warning">
|
||||||
Warning Alert with <a href="#" class="alert-link">an example link</a>.
|
Warning Alert with <a href="#" class="alert-link">an example link</a>.
|
||||||
</CAlert>
|
</CAlert>
|
||||||
<CAlert show variant="info">
|
<CAlert show color="info">
|
||||||
Info Alert with <a href="#" class="alert-link">an example link</a>.
|
Info Alert with <a href="#" class="alert-link">an example link</a>.
|
||||||
</CAlert>
|
</CAlert>
|
||||||
<CAlert show variant="light">
|
<CAlert show color="light">
|
||||||
Light Alert with <a href="#" class="alert-link">an example link</a>.
|
Light Alert with <a href="#" class="alert-link">an example link</a>.
|
||||||
</CAlert>
|
</CAlert>
|
||||||
<CAlert show variant="dark">
|
<CAlert show color="dark">
|
||||||
Dark Alert with
|
Dark Alert with
|
||||||
<CLink href="#" class="alert-link">an example link</CLink>
|
<CLink href="#" class="alert-link">an example link</CLink>
|
||||||
.
|
.
|
||||||
@@ -75,7 +75,7 @@
|
|||||||
<i class="fa fa-align-justify"></i> Alerts <small>with additional content</small>
|
<i class="fa fa-align-justify"></i> Alerts <small>with additional content</small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CAlert show variant="success">
|
<CAlert show color="success">
|
||||||
<h4 class="alert-heading">Well done!</h4>
|
<h4 class="alert-heading">Well done!</h4>
|
||||||
<p>
|
<p>
|
||||||
Aww yeah, you successfully read this important alert message.
|
Aww yeah, you successfully read this important alert message.
|
||||||
@@ -98,7 +98,7 @@
|
|||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CAlert
|
<CAlert
|
||||||
variant="secondary"
|
color="secondary"
|
||||||
closeButton
|
closeButton
|
||||||
:show.sync="dismissibleAlerts[0]"
|
:show.sync="dismissibleAlerts[0]"
|
||||||
>
|
>
|
||||||
@@ -106,7 +106,7 @@
|
|||||||
</CAlert>
|
</CAlert>
|
||||||
|
|
||||||
<CAlert
|
<CAlert
|
||||||
variant="secondary"
|
color="secondary"
|
||||||
closeButton
|
closeButton
|
||||||
fade
|
fade
|
||||||
:show.sync="dismissibleAlerts[1]"
|
:show.sync="dismissibleAlerts[1]"
|
||||||
@@ -115,7 +115,7 @@
|
|||||||
</CAlert>
|
</CAlert>
|
||||||
|
|
||||||
<CAlert
|
<CAlert
|
||||||
variant="secondary"
|
color="secondary"
|
||||||
:show.sync="dismissibleAlerts[2]"
|
:show.sync="dismissibleAlerts[2]"
|
||||||
v-slot="{dismiss}"
|
v-slot="{dismiss}"
|
||||||
class="alert-dismissible"
|
class="alert-dismissible"
|
||||||
@@ -123,7 +123,7 @@
|
|||||||
Dismissible Alert with custom button!
|
Dismissible Alert with custom button!
|
||||||
<CButton
|
<CButton
|
||||||
class="position-absolute"
|
class="position-absolute"
|
||||||
variant="secondary"
|
color="secondary"
|
||||||
style="right:10px;top: 50%;transform: translateY(-50%);"
|
style="right:10px;top: 50%;transform: translateY(-50%);"
|
||||||
textHtml="<i>Close</i>"
|
textHtml="<i>Close</i>"
|
||||||
@click="dismiss"
|
@click="dismiss"
|
||||||
@@ -131,7 +131,7 @@
|
|||||||
</CAlert>
|
</CAlert>
|
||||||
<CButton
|
<CButton
|
||||||
@click="showDismissibleAlerts"
|
@click="showDismissibleAlerts"
|
||||||
variant="info"
|
color="info"
|
||||||
class="m-1"
|
class="m-1"
|
||||||
>
|
>
|
||||||
Show dismissible alerts
|
Show dismissible alerts
|
||||||
@@ -148,7 +148,7 @@
|
|||||||
<CAlert
|
<CAlert
|
||||||
:show.sync="dismissCountDown"
|
:show.sync="dismissCountDown"
|
||||||
closeButton
|
closeButton
|
||||||
variant="warning"
|
color="warning"
|
||||||
fade
|
fade
|
||||||
>
|
>
|
||||||
Alert will dismiss after
|
Alert will dismiss after
|
||||||
@@ -158,17 +158,17 @@
|
|||||||
<CAlert
|
<CAlert
|
||||||
:show.sync="dismissCountDown"
|
:show.sync="dismissCountDown"
|
||||||
closeButton
|
closeButton
|
||||||
variant="info"
|
color="info"
|
||||||
>
|
>
|
||||||
Alert will dismiss after {{dismissCountDown}} seconds...
|
Alert will dismiss after {{dismissCountDown}} seconds...
|
||||||
<CProgress
|
<CProgress
|
||||||
variant="info"
|
color="info"
|
||||||
:max="dismissSecs"
|
:max="dismissSecs"
|
||||||
:value="dismissCountDown"
|
:value="dismissCountDown"
|
||||||
height="4px"
|
height="4px"
|
||||||
/>
|
/>
|
||||||
</CAlert>
|
</CAlert>
|
||||||
<CButton @click="showAlert" variant="info" class="m-1">
|
<CButton @click="showAlert" color="info" class="m-1">
|
||||||
Show alert with timer
|
Show alert with timer
|
||||||
</CButton>
|
</CButton>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -17,16 +17,16 @@
|
|||||||
</div>
|
</div>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<h2>Example heading <CBadge variant="primary">New</CBadge></h2>
|
<h2>Example heading <CBadge color="primary">New</CBadge></h2>
|
||||||
<h3>Example heading <CBadge variant="primary">New</CBadge></h3>
|
<h3>Example heading <CBadge color="primary">New</CBadge></h3>
|
||||||
<h4>Example heading <CBadge variant="primary">New</CBadge></h4>
|
<h4>Example heading <CBadge color="primary">New</CBadge></h4>
|
||||||
<h5>Example heading <CBadge variant="primary">New</CBadge></h5>
|
<h5>Example heading <CBadge color="primary">New</CBadge></h5>
|
||||||
<h6>Example heading <CBadge variant="primary">New</CBadge></h6>
|
<h6>Example heading <CBadge color="primary">New</CBadge></h6>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter>
|
<CCardFooter>
|
||||||
<CButton variant="primary">
|
<CButton color="primary">
|
||||||
Notifications
|
Notifications
|
||||||
<CBadge variant="light" :style="{position: 'static'}">4</CBadge>
|
<CBadge color="light" :style="{position: 'static'}">4</CBadge>
|
||||||
</CButton>
|
</CButton>
|
||||||
</CCardFooter>
|
</CCardFooter>
|
||||||
</CCard>
|
</CCard>
|
||||||
@@ -38,14 +38,14 @@
|
|||||||
<small>contextual variations</small>
|
<small>contextual variations</small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CBadge variant="primary">Primary</CBadge>
|
<CBadge color="primary">Primary</CBadge>
|
||||||
<CBadge variant="secondary">Secondary</CBadge>
|
<CBadge color="secondary">Secondary</CBadge>
|
||||||
<CBadge variant="success">Success</CBadge>
|
<CBadge color="success">Success</CBadge>
|
||||||
<CBadge variant="danger">Danger</CBadge>
|
<CBadge color="danger">Danger</CBadge>
|
||||||
<CBadge variant="warning">Warning</CBadge>
|
<CBadge color="warning">Warning</CBadge>
|
||||||
<CBadge variant="info">Info</CBadge>
|
<CBadge color="info">Info</CBadge>
|
||||||
<CBadge variant="light">Light</CBadge>
|
<CBadge color="light">Light</CBadge>
|
||||||
<CBadge variant="dark">Dark</CBadge>
|
<CBadge color="dark">Dark</CBadge>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
<CCard>
|
<CCard>
|
||||||
@@ -54,14 +54,14 @@
|
|||||||
<small>pills</small>
|
<small>pills</small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CBadge pill variant="primary">Primary</CBadge>
|
<CBadge pill color="primary">Primary</CBadge>
|
||||||
<CBadge pill variant="secondary">Secondary</CBadge>
|
<CBadge pill color="secondary">Secondary</CBadge>
|
||||||
<CBadge pill variant="success">Success</CBadge>
|
<CBadge pill color="success">Success</CBadge>
|
||||||
<CBadge pill variant="danger">Danger</CBadge>
|
<CBadge pill color="danger">Danger</CBadge>
|
||||||
<CBadge pill variant="warning">Warning</CBadge>
|
<CBadge pill color="warning">Warning</CBadge>
|
||||||
<CBadge pill variant="info">Info</CBadge>
|
<CBadge pill color="info">Info</CBadge>
|
||||||
<CBadge pill variant="light">Light</CBadge>
|
<CBadge pill color="light">Light</CBadge>
|
||||||
<CBadge pill variant="dark">Dark</CBadge>
|
<CBadge pill color="dark">Dark</CBadge>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
<CCard>
|
<CCard>
|
||||||
@@ -70,14 +70,14 @@
|
|||||||
<small>actionable</small>
|
<small>actionable</small>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CBadge href="#" variant="primary">Primary</CBadge>
|
<CBadge href="#" color="primary">Primary</CBadge>
|
||||||
<CBadge href="#" variant="secondary">Secondary</CBadge>
|
<CBadge href="#" color="secondary">Secondary</CBadge>
|
||||||
<CBadge href="#" variant="success">Success</CBadge>
|
<CBadge href="#" color="success">Success</CBadge>
|
||||||
<CBadge href="#" variant="danger">Danger</CBadge>
|
<CBadge href="#" color="danger">Danger</CBadge>
|
||||||
<CBadge href="#" variant="warning">Warning</CBadge>
|
<CBadge href="#" color="warning">Warning</CBadge>
|
||||||
<CBadge href="#" variant="info">Info</CBadge>
|
<CBadge href="#" color="info">Info</CBadge>
|
||||||
<CBadge href="#" variant="light">Light</CBadge>
|
<CBadge href="#" color="light">Light</CBadge>
|
||||||
<CBadge href="#" variant="dark">Dark</CBadge>
|
<CBadge href="#" color="dark">Dark</CBadge>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
</CCard>
|
</CCard>
|
||||||
</CCol>
|
</CCol>
|
||||||
|
|||||||
@@ -18,32 +18,32 @@
|
|||||||
</div>
|
</div>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<CButton variant="secondary" @click="myModal = true" class="mr-1">
|
<CButton color="secondary" @click="myModal = true" class="mr-1">
|
||||||
Launch demo modal
|
Launch demo modal
|
||||||
</CButton>
|
</CButton>
|
||||||
<CButton variant="secondary" @click="largeModal = true" class="mr-1">
|
<CButton color="secondary" @click="largeModal = true" class="mr-1">
|
||||||
Launch large modal
|
Launch large modal
|
||||||
</CButton>
|
</CButton>
|
||||||
<CButton variant="secondary" @click="smallModal = true" class="mr-1">
|
<CButton color="secondary" @click="smallModal = true" class="mr-1">
|
||||||
Launch small modal
|
Launch small modal
|
||||||
</CButton>
|
</CButton>
|
||||||
<hr>
|
<hr>
|
||||||
<CButton variant="primary" @click="primaryModal = true" class="mr-1">
|
<CButton color="primary" @click="primaryModal = true" class="mr-1">
|
||||||
Launch primary modal
|
Launch primary modal
|
||||||
</CButton>
|
</CButton>
|
||||||
<CButton variant="success" @click="successModal = true" class="mr-1">
|
<CButton color="success" @click="successModal = true" class="mr-1">
|
||||||
Launch success modal
|
Launch success modal
|
||||||
</CButton>
|
</CButton>
|
||||||
<CButton variant="warning" @click="warningModal = true" class="mr-1">
|
<CButton color="warning" @click="warningModal = true" class="mr-1">
|
||||||
Launch warning modal
|
Launch warning modal
|
||||||
</CButton>
|
</CButton>
|
||||||
<CButton variant="danger" @click="dangerModal = true" class="mr-1">
|
<CButton color="danger" @click="dangerModal = true" class="mr-1">
|
||||||
Launch danger modal
|
Launch danger modal
|
||||||
</CButton>
|
</CButton>
|
||||||
<CButton variant="info" @click="infoModal = true" class="mr-1">
|
<CButton color="info" @click="infoModal = true" class="mr-1">
|
||||||
Launch info modal
|
Launch info modal
|
||||||
</CButton>
|
</CButton>
|
||||||
<CButton variant="dark" @click="darkModal = true" class="mr-1">
|
<CButton color="dark" @click="darkModal = true" class="mr-1">
|
||||||
Launch dark modal
|
Launch dark modal
|
||||||
</CButton>
|
</CButton>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
@@ -101,7 +101,7 @@
|
|||||||
</CModal>
|
</CModal>
|
||||||
<CModal
|
<CModal
|
||||||
title="Modal title"
|
title="Modal title"
|
||||||
variant="success"
|
color="success"
|
||||||
:show.sync="successModal"
|
:show.sync="successModal"
|
||||||
>
|
>
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||||
@@ -113,7 +113,7 @@
|
|||||||
</CModal>
|
</CModal>
|
||||||
<CModal
|
<CModal
|
||||||
title="Modal title"
|
title="Modal title"
|
||||||
variant="warning"
|
color="warning"
|
||||||
:show.sync="warningModal"
|
:show.sync="warningModal"
|
||||||
>
|
>
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||||
@@ -125,7 +125,7 @@
|
|||||||
</CModal>
|
</CModal>
|
||||||
<CModal
|
<CModal
|
||||||
title="Modal title"
|
title="Modal title"
|
||||||
variant="danger"
|
color="danger"
|
||||||
:show.sync="dangerModal"
|
:show.sync="dangerModal"
|
||||||
>
|
>
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||||
@@ -137,7 +137,7 @@
|
|||||||
</CModal>
|
</CModal>
|
||||||
<CModal
|
<CModal
|
||||||
title="Modal title"
|
title="Modal title"
|
||||||
variant="info"
|
color="info"
|
||||||
:show.sync="infoModal"
|
:show.sync="infoModal"
|
||||||
>
|
>
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||||
@@ -153,7 +153,7 @@
|
|||||||
:centered="true"
|
:centered="true"
|
||||||
title="Modal title 2"
|
title="Modal title 2"
|
||||||
size="lg"
|
size="lg"
|
||||||
variant="dark"
|
color="dark"
|
||||||
>
|
>
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||||
@@ -166,8 +166,8 @@
|
|||||||
<CButtonClose @click="hide()" class="text-white"/>
|
<CButtonClose @click="hide()" class="text-white"/>
|
||||||
</template>
|
</template>
|
||||||
<template #footer="{hide}">
|
<template #footer="{hide}">
|
||||||
<CButton @click="darkModal = false" variant="danger">Discard</CButton>
|
<CButton @click="darkModal = false" color="danger">Discard</CButton>
|
||||||
<CButton @click="darkModal = false" variant="success">Accept</CButton>
|
<CButton @click="darkModal = false" color="success">Accept</CButton>
|
||||||
</template>
|
</template>
|
||||||
</CModal>
|
</CModal>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -21,10 +21,10 @@
|
|||||||
/>
|
/>
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol col="6">
|
<CCol col="6">
|
||||||
<CButton variant="primary" class="px-4">Login</CButton>
|
<CButton color="primary" class="px-4">Login</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6" class="text-right">
|
<CCol col="6" class="text-right">
|
||||||
<CButton variant="link" class="px-0">Forgot password?</CButton>
|
<CButton color="link" class="px-0">Forgot password?</CButton>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
</CForm>
|
</CForm>
|
||||||
@@ -38,7 +38,7 @@
|
|||||||
<h2>Sign up</h2>
|
<h2>Sign up</h2>
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||||
<CButton
|
<CButton
|
||||||
variant="primary"
|
color="primary"
|
||||||
class="active mt-3"
|
class="active mt-3"
|
||||||
>
|
>
|
||||||
Register Now!
|
Register Now!
|
||||||
|
|||||||
@@ -14,7 +14,7 @@
|
|||||||
placeholder="What are you looking for?"
|
placeholder="What are you looking for?"
|
||||||
>
|
>
|
||||||
<template #append>
|
<template #append>
|
||||||
<CButton variant="info">Search</CButton>
|
<CButton color="info">Search</CButton>
|
||||||
</template>
|
</template>
|
||||||
</CFormInput>
|
</CFormInput>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -13,7 +13,7 @@
|
|||||||
placeholder="What are you looking for?"
|
placeholder="What are you looking for?"
|
||||||
>
|
>
|
||||||
<template #append>
|
<template #append>
|
||||||
<CButton variant="info">Search</CButton>
|
<CButton color="info">Search</CButton>
|
||||||
</template>
|
</template>
|
||||||
</CFormInput>
|
</CFormInput>
|
||||||
</CCol>
|
</CCol>
|
||||||
|
|||||||
@@ -30,16 +30,16 @@
|
|||||||
autocomplete="new-password"
|
autocomplete="new-password"
|
||||||
class="mb-4"
|
class="mb-4"
|
||||||
/>
|
/>
|
||||||
<CButton variant="success" block>Create Account</CButton>
|
<CButton color="success" block>Create Account</CButton>
|
||||||
</CForm>
|
</CForm>
|
||||||
</CCardBody>
|
</CCardBody>
|
||||||
<CCardFooter class="p-4">
|
<CCardFooter class="p-4">
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol col="6">
|
<CCol col="6">
|
||||||
<CButton block variant="facebook" textHtml="Facebook"/>
|
<CButton block color="facebook" textHtml="Facebook"/>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol col="6">
|
<CCol col="6">
|
||||||
<CButton block variant="twitter" textHtml="Twitter"/>
|
<CButton block color="twitter" textHtml="Twitter"/>
|
||||||
</CCol>
|
</CCol>
|
||||||
</CRow>
|
</CRow>
|
||||||
</CCardFooter>
|
</CCardFooter>
|
||||||
|
|||||||
@@ -20,7 +20,7 @@
|
|||||||
<strong>{{data.item.name}}</strong>
|
<strong>{{data.item.name}}</strong>
|
||||||
</td>
|
</td>
|
||||||
<td slot="status" slot-scope="data">
|
<td slot="status" slot-scope="data">
|
||||||
<CBadge :variant="getBadge(data.item.status)">
|
<CBadge :color="getBadge(data.item.status)">
|
||||||
{{data.item.status}}
|
{{data.item.status}}
|
||||||
</CBadge>
|
</CBadge>
|
||||||
</td>
|
</td>
|
||||||
|
|||||||
@@ -8,7 +8,7 @@
|
|||||||
footer="Lorem ipsum dolor sit amet enim."
|
footer="Lorem ipsum dolor sit amet enim."
|
||||||
>
|
>
|
||||||
<CProgress
|
<CProgress
|
||||||
variant="success"
|
color="success"
|
||||||
:value="25"
|
:value="25"
|
||||||
class="progress-xs my-3 mb-0"
|
class="progress-xs my-3 mb-0"
|
||||||
/>
|
/>
|
||||||
@@ -32,7 +32,7 @@
|
|||||||
header="12.124"
|
header="12.124"
|
||||||
text="Lorem ipsum..."
|
text="Lorem ipsum..."
|
||||||
footer="Lorem ipsum dolor sit amet enim."
|
footer="Lorem ipsum dolor sit amet enim."
|
||||||
variant="info"
|
color="info"
|
||||||
:value="25"
|
:value="25"
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -41,7 +41,7 @@
|
|||||||
header="$98.111,00"
|
header="$98.111,00"
|
||||||
text="Lorem ipsum..."
|
text="Lorem ipsum..."
|
||||||
footer="Lorem ipsum dolor sit amet enim."
|
footer="Lorem ipsum dolor sit amet enim."
|
||||||
variant="warning"
|
color="warning"
|
||||||
:value="25"
|
:value="25"
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -50,7 +50,7 @@
|
|||||||
header="2 TB"
|
header="2 TB"
|
||||||
text="Lorem ipsum..."
|
text="Lorem ipsum..."
|
||||||
footer="Lorem ipsum dolor sit amet enim."
|
footer="Lorem ipsum dolor sit amet enim."
|
||||||
variant="danger"
|
color="danger"
|
||||||
:value="25"
|
:value="25"
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -61,7 +61,7 @@
|
|||||||
header="89.9%"
|
header="89.9%"
|
||||||
text="Lorem ipsum..."
|
text="Lorem ipsum..."
|
||||||
footer="Lorem ipsum dolor sit amet enim."
|
footer="Lorem ipsum dolor sit amet enim."
|
||||||
variant="success"
|
color="success"
|
||||||
inverse :value="25"
|
inverse :value="25"
|
||||||
/>
|
/>
|
||||||
</CCol>
|
</CCol>
|
||||||
@@ -70,7 +70,7 @@
|
|||||||
header="12.124"
|
header="12.124"
|
||||||
text="Lorem ipsum..."
|
text="Lorem ipsum..."
|
||||||
footer="Lorem ipsum dolor sit amet enim."
|
footer="Lorem ipsum dolor sit amet enim."
|
||||||
variant="info"
|
color="info"
|
||||||
inverse
|
inverse
|
||||||
:value="25"
|
:value="25"
|
||||||
/>
|
/>
|
||||||
@@ -80,7 +80,7 @@
|
|||||||
header="$98.111,00"
|
header="$98.111,00"
|
||||||
text="Lorem ipsum..."
|
text="Lorem ipsum..."
|
||||||
footer="Lorem ipsum dolor sit amet enim."
|
footer="Lorem ipsum dolor sit amet enim."
|
||||||
variant="warning"
|
color="warning"
|
||||||
inverse
|
inverse
|
||||||
:value="25"
|
:value="25"
|
||||||
/>
|
/>
|
||||||
@@ -90,7 +90,7 @@
|
|||||||
header="2 TB"
|
header="2 TB"
|
||||||
text="Lorem ipsum..."
|
text="Lorem ipsum..."
|
||||||
footer="Lorem ipsum dolor sit amet enim."
|
footer="Lorem ipsum dolor sit amet enim."
|
||||||
variant="danger"
|
color="danger"
|
||||||
inverse
|
inverse
|
||||||
:value="25"
|
:value="25"
|
||||||
/>
|
/>
|
||||||
@@ -101,7 +101,7 @@
|
|||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
text="Income"
|
text="Income"
|
||||||
variant="primary"
|
color="primary"
|
||||||
>
|
>
|
||||||
<CIcon name="settings" width="24"/>
|
<CIcon name="settings" width="24"/>
|
||||||
</CWidgetIcon>
|
</CWidgetIcon>
|
||||||
@@ -110,7 +110,7 @@
|
|||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
text="Income"
|
text="Income"
|
||||||
variant="info"
|
color="info"
|
||||||
>
|
>
|
||||||
<CIcon name="laptop" width="24"/>
|
<CIcon name="laptop" width="24"/>
|
||||||
</CWidgetIcon>
|
</CWidgetIcon>
|
||||||
@@ -119,7 +119,7 @@
|
|||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
text="Income"
|
text="Income"
|
||||||
variant="warning"
|
color="warning"
|
||||||
>
|
>
|
||||||
<CIcon name="moon" width="24"/>
|
<CIcon name="moon" width="24"/>
|
||||||
</CWidgetIcon>
|
</CWidgetIcon>
|
||||||
@@ -128,7 +128,7 @@
|
|||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
text="Income"
|
text="Income"
|
||||||
variant="danger"
|
color="danger"
|
||||||
>
|
>
|
||||||
<CIcon name="bell" width="24"/>
|
<CIcon name="bell" width="24"/>
|
||||||
</CWidgetIcon>
|
</CWidgetIcon>
|
||||||
@@ -139,7 +139,7 @@
|
|||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
text="Income"
|
text="Income"
|
||||||
variant="primary"
|
color="primary"
|
||||||
no-icon-padding
|
no-icon-padding
|
||||||
>
|
>
|
||||||
<CIcon name="settings" width="24"/>
|
<CIcon name="settings" width="24"/>
|
||||||
@@ -149,7 +149,7 @@
|
|||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
text="Income"
|
text="Income"
|
||||||
variant="info"
|
color="info"
|
||||||
no-icon-padding
|
no-icon-padding
|
||||||
>
|
>
|
||||||
<CIcon name="laptop" width="24"/>
|
<CIcon name="laptop" width="24"/>
|
||||||
@@ -159,7 +159,7 @@
|
|||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
text="Income"
|
text="Income"
|
||||||
variant="warning"
|
color="warning"
|
||||||
no-icon-padding
|
no-icon-padding
|
||||||
>
|
>
|
||||||
<CIcon name="moon" width="24"/>
|
<CIcon name="moon" width="24"/>
|
||||||
@@ -169,7 +169,7 @@
|
|||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
text="Income"
|
text="Income"
|
||||||
variant="danger"
|
color="danger"
|
||||||
no-icon-padding
|
no-icon-padding
|
||||||
>
|
>
|
||||||
<CIcon name="bell" width="24"/>
|
<CIcon name="bell" width="24"/>
|
||||||
@@ -181,7 +181,7 @@
|
|||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
text="Income"
|
text="Income"
|
||||||
variant="primary"
|
color="primary"
|
||||||
no-icon-padding
|
no-icon-padding
|
||||||
>
|
>
|
||||||
<CIcon name="settings" class="mx-5 " width="24"/>
|
<CIcon name="settings" class="mx-5 " width="24"/>
|
||||||
@@ -191,7 +191,7 @@
|
|||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
text="Income"
|
text="Income"
|
||||||
variant="info"
|
color="info"
|
||||||
no-icon-padding
|
no-icon-padding
|
||||||
>
|
>
|
||||||
<CIcon name="laptop" class="mx-5 " width="24"/>
|
<CIcon name="laptop" class="mx-5 " width="24"/>
|
||||||
@@ -201,7 +201,7 @@
|
|||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
text="Income"
|
text="Income"
|
||||||
variant="warning"
|
color="warning"
|
||||||
no-icon-padding
|
no-icon-padding
|
||||||
>
|
>
|
||||||
<CIcon name="moon" class="mx-5 " width="24"/>
|
<CIcon name="moon" class="mx-5 " width="24"/>
|
||||||
@@ -224,7 +224,7 @@
|
|||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
text="Income"
|
text="Income"
|
||||||
variant="primary"
|
color="primary"
|
||||||
no-icon-padding
|
no-icon-padding
|
||||||
link="#"
|
link="#"
|
||||||
>
|
>
|
||||||
@@ -235,7 +235,7 @@
|
|||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
text="Income"
|
text="Income"
|
||||||
variant="info"
|
color="info"
|
||||||
no-icon-padding
|
no-icon-padding
|
||||||
link="#"
|
link="#"
|
||||||
>
|
>
|
||||||
@@ -246,7 +246,7 @@
|
|||||||
<CWidgetIcon
|
<CWidgetIcon
|
||||||
header="$1.999,50"
|
header="$1.999,50"
|
||||||
text="Income"
|
text="Income"
|
||||||
variant="warning"
|
color="warning"
|
||||||
no-icon-padding
|
no-icon-padding
|
||||||
link="#"
|
link="#"
|
||||||
>
|
>
|
||||||
@@ -260,21 +260,21 @@
|
|||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="87.500"
|
header="87.500"
|
||||||
text="Visitors"
|
text="Visitors"
|
||||||
variant="info"
|
color="info"
|
||||||
>
|
>
|
||||||
<CIcon name="people" height="36"/>
|
<CIcon name="people" height="36"/>
|
||||||
</CWidgetProgressIcon>
|
</CWidgetProgressIcon>
|
||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="385"
|
header="385"
|
||||||
text="New Clients"
|
text="New Clients"
|
||||||
variant="success"
|
color="success"
|
||||||
>
|
>
|
||||||
<CIcon name="userFollow" height="36"/>
|
<CIcon name="userFollow" height="36"/>
|
||||||
</CWidgetProgressIcon>
|
</CWidgetProgressIcon>
|
||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="1238"
|
header="1238"
|
||||||
text="Products sold"
|
text="Products sold"
|
||||||
variant="warning"
|
color="warning"
|
||||||
>
|
>
|
||||||
<CIcon name="basketLoaded" height="36"/>
|
<CIcon name="basketLoaded" height="36"/>
|
||||||
</CWidgetProgressIcon>
|
</CWidgetProgressIcon>
|
||||||
@@ -287,7 +287,7 @@
|
|||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="5:34:11"
|
header="5:34:11"
|
||||||
text="Avg. Time"
|
text="Avg. Time"
|
||||||
variant="danger"
|
color="danger"
|
||||||
>
|
>
|
||||||
<CIcon name="speedometer" height="36"/>
|
<CIcon name="speedometer" height="36"/>
|
||||||
</CWidgetProgressIcon>
|
</CWidgetProgressIcon>
|
||||||
@@ -296,7 +296,7 @@
|
|||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="87.500"
|
header="87.500"
|
||||||
text="Visitors"
|
text="Visitors"
|
||||||
variant="info"
|
color="info"
|
||||||
inverse
|
inverse
|
||||||
>
|
>
|
||||||
<CIcon name="people" height="36"/>
|
<CIcon name="people" height="36"/>
|
||||||
@@ -304,7 +304,7 @@
|
|||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="385"
|
header="385"
|
||||||
text="New Clients"
|
text="New Clients"
|
||||||
variant="success"
|
color="success"
|
||||||
inverse
|
inverse
|
||||||
>
|
>
|
||||||
<CIcon name="userFollow" height="36"/>
|
<CIcon name="userFollow" height="36"/>
|
||||||
@@ -312,7 +312,7 @@
|
|||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="1238"
|
header="1238"
|
||||||
text="Products sold"
|
text="Products sold"
|
||||||
variant="warning"
|
color="warning"
|
||||||
inverse
|
inverse
|
||||||
>
|
>
|
||||||
<CIcon name="basketLoaded" height="36"/>
|
<CIcon name="basketLoaded" height="36"/>
|
||||||
@@ -320,7 +320,7 @@
|
|||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="28%"
|
header="28%"
|
||||||
text="Returning Visitors"
|
text="Returning Visitors"
|
||||||
variant="primary"
|
color="primary"
|
||||||
inverse
|
inverse
|
||||||
>
|
>
|
||||||
<CIcon name="chartPie" height="36"/>
|
<CIcon name="chartPie" height="36"/>
|
||||||
@@ -328,7 +328,7 @@
|
|||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="5:34:11"
|
header="5:34:11"
|
||||||
text="Avg. Time"
|
text="Avg. Time"
|
||||||
variant="danger"
|
color="danger"
|
||||||
inverse
|
inverse
|
||||||
>
|
>
|
||||||
<CIcon name="speedometer" height="36"/>
|
<CIcon name="speedometer" height="36"/>
|
||||||
@@ -339,7 +339,7 @@
|
|||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="87.500"
|
header="87.500"
|
||||||
text="Visitors"
|
text="Visitors"
|
||||||
variant="info"
|
color="info"
|
||||||
>
|
>
|
||||||
<CIcon name="people" height="36"/>
|
<CIcon name="people" height="36"/>
|
||||||
</CWidgetProgressIcon>
|
</CWidgetProgressIcon>
|
||||||
@@ -348,7 +348,7 @@
|
|||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="385"
|
header="385"
|
||||||
text="New Clients"
|
text="New Clients"
|
||||||
variant="success"
|
color="success"
|
||||||
>
|
>
|
||||||
<CIcon name="userFollow" height="36"/>
|
<CIcon name="userFollow" height="36"/>
|
||||||
</CWidgetProgressIcon>
|
</CWidgetProgressIcon>
|
||||||
@@ -357,7 +357,7 @@
|
|||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="1238"
|
header="1238"
|
||||||
text="Products sold"
|
text="Products sold"
|
||||||
variant="warning"
|
color="warning"
|
||||||
>
|
>
|
||||||
<CIcon name="basketLoaded" height="36"/>
|
<CIcon name="basketLoaded" height="36"/>
|
||||||
</CWidgetProgressIcon>
|
</CWidgetProgressIcon>
|
||||||
@@ -366,7 +366,7 @@
|
|||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="28%"
|
header="28%"
|
||||||
text="Returning Visitors"
|
text="Returning Visitors"
|
||||||
variant="primary"
|
color="primary"
|
||||||
>
|
>
|
||||||
<CIcon name="chartPie" height="36"/>
|
<CIcon name="chartPie" height="36"/>
|
||||||
</CWidgetProgressIcon>
|
</CWidgetProgressIcon>
|
||||||
@@ -375,7 +375,7 @@
|
|||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="5:34:11"
|
header="5:34:11"
|
||||||
text="Avg. Time"
|
text="Avg. Time"
|
||||||
variant="danger"
|
color="danger"
|
||||||
>
|
>
|
||||||
<CIcon name="speedometer" height="36"/>
|
<CIcon name="speedometer" height="36"/>
|
||||||
</CWidgetProgressIcon>
|
</CWidgetProgressIcon>
|
||||||
@@ -384,7 +384,7 @@
|
|||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="972"
|
header="972"
|
||||||
text="comments"
|
text="comments"
|
||||||
variant="info"
|
color="info"
|
||||||
>
|
>
|
||||||
<CIcon name="speech" height="36"/>
|
<CIcon name="speech" height="36"/>
|
||||||
</CWidgetProgressIcon>
|
</CWidgetProgressIcon>
|
||||||
@@ -395,7 +395,7 @@
|
|||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="87.500"
|
header="87.500"
|
||||||
text="Visitors"
|
text="Visitors"
|
||||||
variant="info"
|
color="info"
|
||||||
inverse
|
inverse
|
||||||
>
|
>
|
||||||
<CIcon name="people" height="36"/>
|
<CIcon name="people" height="36"/>
|
||||||
@@ -405,7 +405,7 @@
|
|||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="385"
|
header="385"
|
||||||
text="New Clients"
|
text="New Clients"
|
||||||
variant="success"
|
color="success"
|
||||||
inverse
|
inverse
|
||||||
>
|
>
|
||||||
<CIcon name="userFollow" height="36"/>
|
<CIcon name="userFollow" height="36"/>
|
||||||
@@ -415,7 +415,7 @@
|
|||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="1238"
|
header="1238"
|
||||||
text="Products sold"
|
text="Products sold"
|
||||||
variant="warning"
|
color="warning"
|
||||||
inverse
|
inverse
|
||||||
>
|
>
|
||||||
<CIcon name="basketLoaded" height="36"/>
|
<CIcon name="basketLoaded" height="36"/>
|
||||||
@@ -425,7 +425,7 @@
|
|||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="28%"
|
header="28%"
|
||||||
text="Returning Visitors"
|
text="Returning Visitors"
|
||||||
variant="primary"
|
color="primary"
|
||||||
inverse
|
inverse
|
||||||
>
|
>
|
||||||
<CIcon name="chartPie" height="36"/>
|
<CIcon name="chartPie" height="36"/>
|
||||||
@@ -435,7 +435,7 @@
|
|||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="5:34:11"
|
header="5:34:11"
|
||||||
text="Avg. Time"
|
text="Avg. Time"
|
||||||
variant="danger"
|
color="danger"
|
||||||
inverse
|
inverse
|
||||||
>
|
>
|
||||||
<CIcon name="speedometer" height="36"/>
|
<CIcon name="speedometer" height="36"/>
|
||||||
@@ -445,7 +445,7 @@
|
|||||||
<CWidgetProgressIcon
|
<CWidgetProgressIcon
|
||||||
header="972"
|
header="972"
|
||||||
text="comments"
|
text="comments"
|
||||||
variant="info"
|
color="info"
|
||||||
inverse
|
inverse
|
||||||
>
|
>
|
||||||
<CIcon name="speech" height="36"/>
|
<CIcon name="speech" height="36"/>
|
||||||
@@ -456,7 +456,7 @@
|
|||||||
<CRow>
|
<CRow>
|
||||||
<CCol sm="6" lg="3">
|
<CCol sm="6" lg="3">
|
||||||
<CWidgetHeaderDetails
|
<CWidgetHeaderDetails
|
||||||
variant="primary"
|
color="primary"
|
||||||
right-header="SALE"
|
right-header="SALE"
|
||||||
right-footer="Today 6:43 AM"
|
right-footer="Today 6:43 AM"
|
||||||
left-header="$1.890,65"
|
left-header="$1.890,65"
|
||||||
@@ -468,7 +468,7 @@
|
|||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" lg="3">
|
<CCol sm="6" lg="3">
|
||||||
<CWidgetHeaderDetails
|
<CWidgetHeaderDetails
|
||||||
variant="success"
|
color="success"
|
||||||
right-header="SALE"
|
right-header="SALE"
|
||||||
right-footer="Today 6:43 AM"
|
right-footer="Today 6:43 AM"
|
||||||
left-header="$1.890,65"
|
left-header="$1.890,65"
|
||||||
@@ -480,7 +480,7 @@
|
|||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" lg="3">
|
<CCol sm="6" lg="3">
|
||||||
<CWidgetHeaderDetails
|
<CWidgetHeaderDetails
|
||||||
variant="danger"
|
color="danger"
|
||||||
right-header="SALE"
|
right-header="SALE"
|
||||||
right-footer="Today 6:43 AM"
|
right-footer="Today 6:43 AM"
|
||||||
left-header="$1.890,65"
|
left-header="$1.890,65"
|
||||||
@@ -492,7 +492,7 @@
|
|||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" lg="3">
|
<CCol sm="6" lg="3">
|
||||||
<CWidgetHeaderDetails
|
<CWidgetHeaderDetails
|
||||||
variant="warning"
|
color="warning"
|
||||||
right-header="SALE"
|
right-header="SALE"
|
||||||
right-footer="Today 6:43 AM"
|
right-footer="Today 6:43 AM"
|
||||||
left-header="$1.890,65"
|
left-header="$1.890,65"
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
<template v-if="!noCharts">
|
<template v-if="!noCharts">
|
||||||
<CCol md="3" sm="6">
|
<CCol md="3" sm="6">
|
||||||
<CWidgetBrand
|
<CWidgetBrand
|
||||||
variant="facebook"
|
color="facebook"
|
||||||
right-header="89k"
|
right-header="89k"
|
||||||
right-footer="friends"
|
right-footer="friends"
|
||||||
left-header="459"
|
left-header="459"
|
||||||
@@ -26,7 +26,7 @@
|
|||||||
</CCol>
|
</CCol>
|
||||||
<CCol md="3" sm="6">
|
<CCol md="3" sm="6">
|
||||||
<CWidgetBrand
|
<CWidgetBrand
|
||||||
variant="twitter"
|
color="twitter"
|
||||||
right-header="973k"
|
right-header="973k"
|
||||||
right-footer="followers"
|
right-footer="followers"
|
||||||
left-header="1.792"
|
left-header="1.792"
|
||||||
@@ -49,7 +49,7 @@
|
|||||||
</CCol>
|
</CCol>
|
||||||
<CCol md="3" sm="6">
|
<CCol md="3" sm="6">
|
||||||
<CWidgetBrand
|
<CWidgetBrand
|
||||||
variant="linkedin"
|
color="linkedin"
|
||||||
right-header="500+"
|
right-header="500+"
|
||||||
right-footer="contracts"
|
right-footer="contracts"
|
||||||
left-header="292"
|
left-header="292"
|
||||||
@@ -76,7 +76,7 @@
|
|||||||
right-footer="events"
|
right-footer="events"
|
||||||
left-header="4"
|
left-header="4"
|
||||||
left-footer="meetings"
|
left-footer="meetings"
|
||||||
variant="warning"
|
color="warning"
|
||||||
>
|
>
|
||||||
<CIcon
|
<CIcon
|
||||||
name="calendar"
|
name="calendar"
|
||||||
@@ -97,7 +97,7 @@
|
|||||||
<template v-else>
|
<template v-else>
|
||||||
<CCol md="3" sm="6">
|
<CCol md="3" sm="6">
|
||||||
<CWidgetBrand
|
<CWidgetBrand
|
||||||
variant="facebook"
|
color="facebook"
|
||||||
right-header="89k"
|
right-header="89k"
|
||||||
right-footer="friends"
|
right-footer="friends"
|
||||||
left-header="459"
|
left-header="459"
|
||||||
@@ -112,7 +112,7 @@
|
|||||||
</CCol>
|
</CCol>
|
||||||
<CCol md="3" sm="6">
|
<CCol md="3" sm="6">
|
||||||
<CWidgetBrand
|
<CWidgetBrand
|
||||||
variant="twitter"
|
color="twitter"
|
||||||
right-header="973k"
|
right-header="973k"
|
||||||
right-footer="followers"
|
right-footer="followers"
|
||||||
left-header="1.792"
|
left-header="1.792"
|
||||||
@@ -127,7 +127,7 @@
|
|||||||
</CCol>
|
</CCol>
|
||||||
<CCol md="3" sm="6">
|
<CCol md="3" sm="6">
|
||||||
<CWidgetBrand
|
<CWidgetBrand
|
||||||
variant="linkedin"
|
color="linkedin"
|
||||||
right-header="500+"
|
right-header="500+"
|
||||||
right-footer="contracts"
|
right-footer="contracts"
|
||||||
left-header="292"
|
left-header="292"
|
||||||
@@ -146,7 +146,7 @@
|
|||||||
right-footer="events"
|
right-footer="events"
|
||||||
left-header="4"
|
left-header="4"
|
||||||
left-footer="meetings"
|
left-footer="meetings"
|
||||||
variant="warning"
|
color="warning"
|
||||||
>
|
>
|
||||||
<CIcon
|
<CIcon
|
||||||
name="calendar"
|
name="calendar"
|
||||||
|
|||||||
@@ -1,11 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<CRow>
|
<CRow>
|
||||||
<CCol sm="6" lg="3">
|
<CCol sm="6" lg="3">
|
||||||
<CWidgetDropdown variant="primary" header="9.823" text="Members online">
|
<CWidgetDropdown color="primary" header="9.823" text="Members online">
|
||||||
<template #default>
|
<template #default>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
class="float-right"
|
class="float-right"
|
||||||
variant="transparent p-0"
|
color="transparent p-0"
|
||||||
placement="bottom-end"
|
placement="bottom-end"
|
||||||
>
|
>
|
||||||
<template #toggler-content>
|
<template #toggler-content>
|
||||||
@@ -31,11 +31,11 @@
|
|||||||
</CWidgetDropdown>
|
</CWidgetDropdown>
|
||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" lg="3">
|
<CCol sm="6" lg="3">
|
||||||
<CWidgetDropdown variant="info" header="9.823" text="Members online">
|
<CWidgetDropdown color="info" header="9.823" text="Members online">
|
||||||
<template #default>
|
<template #default>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
class="float-right"
|
class="float-right"
|
||||||
variant="transparent p-0"
|
color="transparent p-0"
|
||||||
placement="bottom-end"
|
placement="bottom-end"
|
||||||
no-caret
|
no-caret
|
||||||
buttonHtml="<i class='cui-location-pin'></i>"
|
buttonHtml="<i class='cui-location-pin'></i>"
|
||||||
@@ -65,14 +65,14 @@
|
|||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" lg="3">
|
<CCol sm="6" lg="3">
|
||||||
<CWidgetDropdown
|
<CWidgetDropdown
|
||||||
variant="warning"
|
color="warning"
|
||||||
header="9.823"
|
header="9.823"
|
||||||
text="Members online"
|
text="Members online"
|
||||||
>
|
>
|
||||||
<template #default>
|
<template #default>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
class="float-right"
|
class="float-right"
|
||||||
variant="transparent p-0"
|
color="transparent p-0"
|
||||||
placement="bottom-end"
|
placement="bottom-end"
|
||||||
>
|
>
|
||||||
<template #toggler-content>
|
<template #toggler-content>
|
||||||
@@ -99,14 +99,14 @@
|
|||||||
</CCol>
|
</CCol>
|
||||||
<CCol sm="6" lg="3">
|
<CCol sm="6" lg="3">
|
||||||
<CWidgetDropdown
|
<CWidgetDropdown
|
||||||
variant="danger"
|
color="danger"
|
||||||
header="9.823"
|
header="9.823"
|
||||||
text="Members online"
|
text="Members online"
|
||||||
>
|
>
|
||||||
<template #default>
|
<template #default>
|
||||||
<CDropdown
|
<CDropdown
|
||||||
class="float-right"
|
class="float-right"
|
||||||
variant="transparent p-0"
|
color="transparent p-0"
|
||||||
placement="bottom-end"
|
placement="bottom-end"
|
||||||
>
|
>
|
||||||
<template #toggler-content>
|
<template #toggler-content>
|
||||||
|
|||||||
Reference in New Issue
Block a user