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

refactor: remplace variant prop with color

Browse Source
This commit is contained in:
woothu
2019-10-15 10:55:00 +02:00
parent 26d30c2fb0
commit c639eb8213
28 changed files with 800 additions and 810 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/notifications/Alerts.vue
+26 -26
View File
@@ -19,14 +19,14 @@
<CCardBody>
<div>
<p></p>
<CAlert show variant="primary">Primary Alert</CAlert>
<CAlert show variant="secondary">Secondary Alert</CAlert>
<CAlert show variant="success">Success Alert</CAlert>
<CAlert show variant="danger">Danger Alert</CAlert>
<CAlert show variant="warning">Warning Alert</CAlert>
<CAlert show variant="info">Info Alert</CAlert>
<CAlert show variant="light">Light Alert</CAlert>
<CAlert show variant="dark">Dark Alert</CAlert>
<CAlert show color="primary">Primary Alert</CAlert>
<CAlert show color="secondary">Secondary Alert</CAlert>
<CAlert show color="success">Success Alert</CAlert>
<CAlert show color="danger">Danger Alert</CAlert>
<CAlert show color="warning">Warning Alert</CAlert>
<CAlert show color="info">Info Alert</CAlert>
<CAlert show color="light">Light Alert</CAlert>
<CAlert show color="dark">Dark Alert</CAlert>
</div>
</CCardBody>
</CCard>
@@ -39,28 +39,28 @@
</CCardHeader>
<CCardBody>
<div>
<CAlert show variant="primary">
<CAlert show color="primary">
Primary Alert with <a href="#" class="alert-link">an example link</a>.
</CAlert>
<CAlert show variant="secondary">
<CAlert show color="secondary">
Secondary Alert with <a href="#" class="alert-link">an example link</a>.
</CAlert>
<CAlert show variant="success">
<CAlert show color="success">
Success Alert with <a href="#" class="alert-link">an example link</a>.
</CAlert>
<CAlert show variant="danger">
<CAlert show color="danger">
Danger Alert with <a href="#" class="alert-link">an example link</a>.
</CAlert>
<CAlert show variant="warning">
<CAlert show color="warning">
Warning Alert with <a href="#" class="alert-link">an example link</a>.
</CAlert>
<CAlert show variant="info">
<CAlert show color="info">
Info Alert with <a href="#" class="alert-link">an example link</a>.
</CAlert>
<CAlert show variant="light">
<CAlert show color="light">
Light Alert with <a href="#" class="alert-link">an example link</a>.
</CAlert>
<CAlert show variant="dark">
<CAlert show color="dark">
Dark Alert with
<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>
</CCardHeader>
<CCardBody>
<CAlert show variant="success">
<CAlert show color="success">
<h4 class="alert-heading">Well done!</h4>
<p>
Aww yeah, you successfully read this important alert message.
@@ -98,7 +98,7 @@
</CCardHeader>
<CCardBody>
<CAlert
variant="secondary"
color="secondary"
closeButton
:show.sync="dismissibleAlerts[0]"
>
@@ -106,7 +106,7 @@
</CAlert>
<CAlert
variant="secondary"
color="secondary"
closeButton
fade
:show.sync="dismissibleAlerts[1]"
@@ -115,7 +115,7 @@
</CAlert>
<CAlert
variant="secondary"
color="secondary"
:show.sync="dismissibleAlerts[2]"
v-slot="{dismiss}"
class="alert-dismissible"
@@ -123,7 +123,7 @@
Dismissible Alert with custom button!
<CButton
class="position-absolute"
variant="secondary"
color="secondary"
style="right:10px;top: 50%;transform: translateY(-50%);"
textHtml="<i>Close</i>"
@click="dismiss"
@@ -131,7 +131,7 @@
</CAlert>
<CButton
@click="showDismissibleAlerts"
variant="info"
color="info"
class="m-1"
>
Show dismissible alerts
@@ -148,7 +148,7 @@
<CAlert
:show.sync="dismissCountDown"
closeButton
variant="warning"
color="warning"
fade
>
Alert will dismiss after
@@ -158,17 +158,17 @@
<CAlert
:show.sync="dismissCountDown"
closeButton
variant="info"
color="info"
>
Alert will dismiss after {{dismissCountDown}} seconds...
<CProgress
variant="info"
color="info"
:max="dismissSecs"
:value="dismissCountDown"
height="4px"
/>
</CAlert>
<CButton @click="showAlert" variant="info" class="m-1">
<CButton @click="showAlert" color="info" class="m-1">
Show alert with timer
</CButton>
</div>
src/views/notifications/Badges.vue
+31 -31
View File
@@ -17,16 +17,16 @@
</div>
</CCardHeader>
<CCardBody>
<h2>Example heading <CBadge variant="primary">New</CBadge></h2>
<h3>Example heading <CBadge variant="primary">New</CBadge></h3>
<h4>Example heading <CBadge variant="primary">New</CBadge></h4>
<h5>Example heading <CBadge variant="primary">New</CBadge></h5>
<h6>Example heading <CBadge variant="primary">New</CBadge></h6>
<h2>Example heading <CBadge color="primary">New</CBadge></h2>
<h3>Example heading <CBadge color="primary">New</CBadge></h3>
<h4>Example heading <CBadge color="primary">New</CBadge></h4>
<h5>Example heading <CBadge color="primary">New</CBadge></h5>
<h6>Example heading <CBadge color="primary">New</CBadge></h6>
</CCardBody>
<CCardFooter>
<CButton variant="primary">
<CButton color="primary">
Notifications
<CBadge variant="light" :style="{position: 'static'}">4</CBadge>
<CBadge color="light" :style="{position: 'static'}">4</CBadge>
</CButton>
</CCardFooter>
</CCard>
@@ -38,14 +38,14 @@
<small>contextual variations</small>
</CCardHeader>
<CCardBody>
<CBadge variant="primary">Primary</CBadge>
<CBadge variant="secondary">Secondary</CBadge>
<CBadge variant="success">Success</CBadge>
<CBadge variant="danger">Danger</CBadge>
<CBadge variant="warning">Warning</CBadge>
<CBadge variant="info">Info</CBadge>
<CBadge variant="light">Light</CBadge>
<CBadge variant="dark">Dark</CBadge>
<CBadge color="primary">Primary</CBadge>
<CBadge color="secondary">Secondary</CBadge>
<CBadge color="success">Success</CBadge>
<CBadge color="danger">Danger</CBadge>
<CBadge color="warning">Warning</CBadge>
<CBadge color="info">Info</CBadge>
<CBadge color="light">Light</CBadge>
<CBadge color="dark">Dark</CBadge>
</CCardBody>
</CCard>
<CCard>
@@ -54,14 +54,14 @@
<small>pills</small>
</CCardHeader>
<CCardBody>
<CBadge pill variant="primary">Primary</CBadge>
<CBadge pill variant="secondary">Secondary</CBadge>
<CBadge pill variant="success">Success</CBadge>
<CBadge pill variant="danger">Danger</CBadge>
<CBadge pill variant="warning">Warning</CBadge>
<CBadge pill variant="info">Info</CBadge>
<CBadge pill variant="light">Light</CBadge>
<CBadge pill variant="dark">Dark</CBadge>
<CBadge pill color="primary">Primary</CBadge>
<CBadge pill color="secondary">Secondary</CBadge>
<CBadge pill color="success">Success</CBadge>
<CBadge pill color="danger">Danger</CBadge>
<CBadge pill color="warning">Warning</CBadge>
<CBadge pill color="info">Info</CBadge>
<CBadge pill color="light">Light</CBadge>
<CBadge pill color="dark">Dark</CBadge>
</CCardBody>
</CCard>
<CCard>
@@ -70,14 +70,14 @@
<small>actionable</small>
</CCardHeader>
<CCardBody>
<CBadge href="#" variant="primary">Primary</CBadge>
<CBadge href="#" variant="secondary">Secondary</CBadge>
<CBadge href="#" variant="success">Success</CBadge>
<CBadge href="#" variant="danger">Danger</CBadge>
<CBadge href="#" variant="warning">Warning</CBadge>
<CBadge href="#" variant="info">Info</CBadge>
<CBadge href="#" variant="light">Light</CBadge>
<CBadge href="#" variant="dark">Dark</CBadge>
<CBadge href="#" color="primary">Primary</CBadge>
<CBadge href="#" color="secondary">Secondary</CBadge>
<CBadge href="#" color="success">Success</CBadge>
<CBadge href="#" color="danger">Danger</CBadge>
<CBadge href="#" color="warning">Warning</CBadge>
<CBadge href="#" color="info">Info</CBadge>
<CBadge href="#" color="light">Light</CBadge>
<CBadge href="#" color="dark">Dark</CBadge>
</CCardBody>
</CCard>
</CCol>
src/views/notifications/Modals.vue
+16 -16
View File
@@ -18,32 +18,32 @@
</div>
</CCardHeader>
<CCardBody>
<CButton variant="secondary" @click="myModal = true" class="mr-1">
<CButton color="secondary" @click="myModal = true" class="mr-1">
Launch demo modal
</CButton>
<CButton variant="secondary" @click="largeModal = true" class="mr-1">
<CButton color="secondary" @click="largeModal = true" class="mr-1">
Launch large modal
</CButton>
<CButton variant="secondary" @click="smallModal = true" class="mr-1">
<CButton color="secondary" @click="smallModal = true" class="mr-1">
Launch small modal
</CButton>
<hr>
<CButton variant="primary" @click="primaryModal = true" class="mr-1">
<CButton color="primary" @click="primaryModal = true" class="mr-1">
Launch primary modal
</CButton>
<CButton variant="success" @click="successModal = true" class="mr-1">
<CButton color="success" @click="successModal = true" class="mr-1">
Launch success modal
</CButton>
<CButton variant="warning" @click="warningModal = true" class="mr-1">
<CButton color="warning" @click="warningModal = true" class="mr-1">
Launch warning modal
</CButton>
<CButton variant="danger" @click="dangerModal = true" class="mr-1">
<CButton color="danger" @click="dangerModal = true" class="mr-1">
Launch danger modal
</CButton>
<CButton variant="info" @click="infoModal = true" class="mr-1">
<CButton color="info" @click="infoModal = true" class="mr-1">
Launch info modal
</CButton>
<CButton variant="dark" @click="darkModal = true" class="mr-1">
<CButton color="dark" @click="darkModal = true" class="mr-1">
Launch dark modal
</CButton>
</CCardBody>
@@ -101,7 +101,7 @@
</CModal>
<CModal
title="Modal title"
variant="success"
color="success"
:show.sync="successModal"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -113,7 +113,7 @@
</CModal>
<CModal
title="Modal title"
variant="warning"
color="warning"
:show.sync="warningModal"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -125,7 +125,7 @@
</CModal>
<CModal
title="Modal title"
variant="danger"
color="danger"
:show.sync="dangerModal"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -137,7 +137,7 @@
</CModal>
<CModal
title="Modal title"
variant="info"
color="info"
:show.sync="infoModal"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -153,7 +153,7 @@
:centered="true"
title="Modal title 2"
size="lg"
variant="dark"
color="dark"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -166,8 +166,8 @@
<CButtonClose @click="hide()" class="text-white"/>
</template>
<template #footer="{hide}">
<CButton @click="darkModal = false" variant="danger">Discard</CButton>
<CButton @click="darkModal = false" variant="success">Accept</CButton>
<CButton @click="darkModal = false" color="danger">Discard</CButton>
<CButton @click="darkModal = false" color="success">Accept</CButton>
</template>
</CModal>
</div>