feat: change styles of notification and button sections to version 3
This commit is contained in:
woothu
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<div class="c-wrapper">
|
||||
<div class="c-animated c-fadeIn">
|
||||
<CRow>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
@@ -32,34 +32,34 @@
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<i class="fa fa-align-justify"></i> Alert
|
||||
<small> use <code>.alert-link</code> to provide links</small>
|
||||
<small> use <code>.c-alert-link</code> to provide links</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CAlert show variant="primary">
|
||||
Primary Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
Primary Alert with <a href="#" class="c-alert-link">an example link</a>.
|
||||
</CAlert>
|
||||
<CAlert show variant="secondary">
|
||||
Secondary Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
Secondary Alert with <a href="#" class="c-alert-link">an example link</a>.
|
||||
</CAlert>
|
||||
<CAlert show variant="success">
|
||||
Success Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
Success Alert with <a href="#" class="c-alert-link">an example link</a>.
|
||||
</CAlert>
|
||||
<CAlert show variant="danger">
|
||||
Danger Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
Danger Alert with <a href="#" class="c-alert-link">an example link</a>.
|
||||
</CAlert>
|
||||
<CAlert show variant="warning">
|
||||
Warning Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
Warning Alert with <a href="#" class="c-alert-link">an example link</a>.
|
||||
</CAlert>
|
||||
<CAlert show variant="info">
|
||||
Info Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
Info Alert with <a href="#" class="c-alert-link">an example link</a>.
|
||||
</CAlert>
|
||||
<CAlert show variant="light">
|
||||
Light Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
Light Alert with <a href="#" class="c-alert-link">an example link</a>.
|
||||
</CAlert>
|
||||
<CAlert show variant="dark">
|
||||
Dark Alert with
|
||||
<CLink href="#" class="alert-link">an example link</CLink>
|
||||
<CLink href="#" class="c-alert-link">an example link</CLink>
|
||||
.
|
||||
</CAlert>
|
||||
</div>
|
||||
@@ -73,14 +73,14 @@
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CAlert show variant="success">
|
||||
<h4 class="alert-heading">Well done!</h4>
|
||||
<h4 class="c-alert-heading">Well done!</h4>
|
||||
<p>
|
||||
Aww yeah, you successfully read this important alert message.
|
||||
This example text is going to run a bit longer so that you can see
|
||||
how spacing within an alert works with this kind of content.
|
||||
</p>
|
||||
<hr>
|
||||
<p class="mb-0">
|
||||
<p class="c-mb-0">
|
||||
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
|
||||
</p>
|
||||
</CAlert>
|
||||
@@ -119,14 +119,14 @@
|
||||
|
||||
<CAlert
|
||||
:show.sync="dismissibleAlerts[3]"
|
||||
class="alert-dismissible"
|
||||
class="c-alert-dismissible"
|
||||
v-slot="{dismiss}"
|
||||
>
|
||||
Dismissible Alert with custom button!
|
||||
<CButton
|
||||
class="position-absolute bg-primary"
|
||||
class="c-position-absolute c-bg-primary"
|
||||
style="right:10px;top: 50%;transform: translateY(-50%);"
|
||||
text="<i>Close</i>"
|
||||
textHtml="<i>Close</i>"
|
||||
@click="dismiss"
|
||||
/>
|
||||
</CAlert>
|
||||
@@ -140,7 +140,7 @@
|
||||
<CButton
|
||||
@click="showDismissibleAlerts"
|
||||
variant="info"
|
||||
class="m-1"
|
||||
class="c-m-1"
|
||||
>
|
||||
Show dismissible alerts
|
||||
</CButton>
|
||||
@@ -148,7 +148,8 @@
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<i class="fa fa-align-justify"></i> Alerts <small>auto dismissible</small>
|
||||
<i class="fa fa-align-justify"></i> Alerts
|
||||
<small>auto dismissible</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
@@ -162,18 +163,20 @@
|
||||
<strong>{{dismissCountDown}}</strong> seconds...
|
||||
</CAlert>
|
||||
|
||||
<CAlert :show.sync="dismissCountDown"
|
||||
dismissible
|
||||
variant="info"
|
||||
<CAlert
|
||||
:show.sync="dismissCountDown"
|
||||
dismissible
|
||||
variant="info"
|
||||
>
|
||||
Alert will dismiss after {{dismissCountDown}} seconds...
|
||||
<CProgress variant="info"
|
||||
:max="dismissSecs"
|
||||
:value="dismissCountDown"
|
||||
height="4px">
|
||||
</CProgress>
|
||||
<CProgress
|
||||
variant="info"
|
||||
:max="dismissSecs"
|
||||
:value="dismissCountDown"
|
||||
height="4px"
|
||||
/>
|
||||
</CAlert>
|
||||
<CButton @click="showAlert" variant="info" class="m-1">
|
||||
<CButton @click="showAlert" variant="info" class="c-m-1">
|
||||
Show alert with timer
|
||||
</CButton>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template functional>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<div class="c-wrapper">
|
||||
<div class="c-animated c-fadeIn">
|
||||
<CRow>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
@@ -22,7 +22,8 @@
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton variant="primary">
|
||||
Notifications <CBadge variant="light" :style="{position: 'static'}">4</CBadge>
|
||||
Notifications
|
||||
<CBadge variant="light" :style="{position: 'static'}">4</CBadge>
|
||||
</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="animated fadeIn">
|
||||
<div class="c-wrapper">
|
||||
<div class="c-animated c-fadeIn">
|
||||
<CRow>
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
@@ -8,32 +8,32 @@
|
||||
<i class="fa fa-align-justify"></i> Bootstrap Modals
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CButton variant="secondary" @click="myModal = true" class="mr-1">
|
||||
<CButton variant="secondary" @click="myModal = true" class="c-mr-1">
|
||||
Launch demo modal
|
||||
</CButton>
|
||||
<CButton variant="secondary" @click="largeModal = true" class="mr-1">
|
||||
<CButton variant="secondary" @click="largeModal = true" class="c-mr-1">
|
||||
Launch large modal
|
||||
</CButton>
|
||||
<CButton variant="secondary" @click="smallModal = true" class="mr-1">
|
||||
<CButton variant="secondary" @click="smallModal = true" class="c-mr-1">
|
||||
Launch small modal
|
||||
</CButton>
|
||||
<hr>
|
||||
<CButton variant="primary" @click="primaryModal = true" class="mr-1">
|
||||
<CButton variant="primary" @click="primaryModal = true" class="c-mr-1">
|
||||
Launch primary modal
|
||||
</CButton>
|
||||
<CButton variant="success" @click="successModal = true" class="mr-1">
|
||||
<CButton variant="success" @click="successModal = true" class="c-mr-1">
|
||||
Launch success modal
|
||||
</CButton>
|
||||
<CButton variant="warning" @click="warningModal = true" class="mr-1">
|
||||
<CButton variant="warning" @click="warningModal = true" class="c-mr-1">
|
||||
Launch warning modal
|
||||
</CButton>
|
||||
<CButton variant="danger" @click="dangerModal = true" class="mr-1">
|
||||
<CButton variant="danger" @click="dangerModal = true" class="c-mr-1">
|
||||
Launch danger modal
|
||||
</CButton>
|
||||
<CButton variant="info" @click="infoModal = true" class="mr-1">
|
||||
<CButton variant="info" @click="infoModal = true" class="c-mr-1">
|
||||
Launch info modal
|
||||
</CButton>
|
||||
<CButton variant="dark" @click="darkModal = true" class="mr-1">
|
||||
<CButton variant="dark" @click="darkModal = true" class="c-mr-1">
|
||||
Launch dark modal
|
||||
</CButton>
|
||||
</CCardBody>
|
||||
@@ -65,9 +65,10 @@
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</CModal>
|
||||
<CModal title="Modal title"
|
||||
size="sm"
|
||||
:visible.sync="smallModal"
|
||||
<CModal
|
||||
title="Modal title"
|
||||
size="sm"
|
||||
:visible.sync="smallModal"
|
||||
>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
@@ -79,7 +80,7 @@
|
||||
|
||||
<CModal
|
||||
title="Modal title"
|
||||
class="modal-primary"
|
||||
class="c-modal-primary"
|
||||
:visible.sync="primaryModal"
|
||||
>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
@@ -91,7 +92,7 @@
|
||||
</CModal>
|
||||
<CModal
|
||||
title="Modal title"
|
||||
class="modal-success"
|
||||
class="c-modal-success"
|
||||
:visible.sync="successModal"
|
||||
>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
@@ -103,7 +104,7 @@
|
||||
</CModal>
|
||||
<CModal
|
||||
title="Modal title"
|
||||
class="modal-warning"
|
||||
class="c-modal-warning"
|
||||
:visible.sync="warningModal"
|
||||
>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
@@ -115,7 +116,7 @@
|
||||
</CModal>
|
||||
<CModal
|
||||
title="Modal title"
|
||||
class="modal-danger"
|
||||
class="c-modal-danger"
|
||||
:visible.sync="dangerModal"
|
||||
>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
@@ -127,7 +128,7 @@
|
||||
</CModal>
|
||||
<CModal
|
||||
title="Modal title"
|
||||
class="modal-info"
|
||||
class="c-modal-info"
|
||||
:visible.sync="infoModal"
|
||||
>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
@@ -140,16 +141,16 @@
|
||||
<CModal
|
||||
:visible.sync="darkModal"
|
||||
:noBackdrop="false"
|
||||
:noCloseOnBackdrop="false"
|
||||
:noCloseOnBackdrop="fsalse"
|
||||
:noFade="false"
|
||||
:centered="true"
|
||||
title="Modal title 2"
|
||||
size="lg"
|
||||
variant="dark"
|
||||
borderVariant="danger2"
|
||||
addModalClasses="hehe1"
|
||||
addDialogClasses="hehe2"
|
||||
addContentClasses="hehe3"
|
||||
addModalClassess="hehe1"
|
||||
addDialogClassess="hehe2"
|
||||
addContentClassess="hehe3"
|
||||
:noHeader="false"
|
||||
:noBody="false"
|
||||
:noFooter="false"
|
||||
@@ -161,8 +162,8 @@
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
<template #header="{hide}">
|
||||
<h5 class="modal-title">Custom modal title</h5>
|
||||
<CButtonClose @click="hide()" class="text-white"/>
|
||||
<h5 class="c-modal-title">Custom modal title</h5>
|
||||
<CButtonClose @click="hide()" class="c-text-white"/>
|
||||
</template>
|
||||
<template #footer="{hide}">
|
||||
<CButton @click="hide()" variant="danger">Discard</CButton>
|
||||
|
||||
Reference in New Issue
Block a user