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

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

Browse Source
This commit is contained in:
woothu
2019-09-20 13:59:53 +02:00
parent 6969728859
commit b3e6540052
46 changed files with 1125 additions and 1132 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/notifications/Alerts.vue
+17 -17
View File
@@ -1,5 +1,5 @@
<template>
<div class="c-wrapper">
<div class="wrapper">
<div>
<CRow>
<CCol col="12" md="6">
@@ -7,7 +7,7 @@
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Alert</strong>
<div class="c-card-header-actions">
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Alert"
class="card-header-action"
@@ -37,34 +37,34 @@
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> Alert
<small> use <code>.c-alert-link</code> to provide links</small>
<small> use <code>.alert-link</code> to provide links</small>
</CCardHeader>
<CCardBody>
<div>
<CAlert show variant="primary">
Primary Alert with <a href="#" class="c-alert-link">an example link</a>.
Primary Alert with <a href="#" class="alert-link">an example link</a>.
</CAlert>
<CAlert show variant="secondary">
Secondary Alert with <a href="#" class="c-alert-link">an example link</a>.
Secondary Alert with <a href="#" class="alert-link">an example link</a>.
</CAlert>
<CAlert show variant="success">
Success Alert with <a href="#" class="c-alert-link">an example link</a>.
Success Alert with <a href="#" class="alert-link">an example link</a>.
</CAlert>
<CAlert show variant="danger">
Danger Alert with <a href="#" class="c-alert-link">an example link</a>.
Danger Alert with <a href="#" class="alert-link">an example link</a>.
</CAlert>
<CAlert show variant="warning">
Warning Alert with <a href="#" class="c-alert-link">an example link</a>.
Warning Alert with <a href="#" class="alert-link">an example link</a>.
</CAlert>
<CAlert show variant="info">
Info Alert with <a href="#" class="c-alert-link">an example link</a>.
Info Alert with <a href="#" class="alert-link">an example link</a>.
</CAlert>
<CAlert show variant="light">
Light Alert with <a href="#" class="c-alert-link">an example link</a>.
Light Alert with <a href="#" class="alert-link">an example link</a>.
</CAlert>
<CAlert show variant="dark">
Dark Alert with
<CLink href="#" class="c-alert-link">an example link</CLink>
<CLink href="#" class="alert-link">an example link</CLink>
.
</CAlert>
</div>
@@ -78,14 +78,14 @@
</CCardHeader>
<CCardBody>
<CAlert show variant="success">
<h4 class="c-alert-heading">Well done!</h4>
<h4 class="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="c-mb-0">
<p class="mb-0">
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
</p>
</CAlert>
@@ -120,11 +120,11 @@
variant="secondary"
:show.sync="dismissibleAlerts[2]"
v-slot="{dismiss}"
class="c-alert-dismissible"
class="alert-dismissible"
>
Dismissible Alert with custom button!
<CButton
class="c-position-absolute"
class="position-absolute"
variant="secondary"
style="right:10px;top: 50%;transform: translateY(-50%);"
textHtml="<i>Close</i>"
@@ -134,7 +134,7 @@
<CButton
@click="showDismissibleAlerts"
variant="info"
class="c-m-1"
class="m-1"
>
Show dismissible alerts
</CButton>
@@ -170,7 +170,7 @@
height="4px"
/>
</CAlert>
<CButton @click="showAlert" variant="info" class="c-m-1">
<CButton @click="showAlert" variant="info" class="m-1">
Show alert with timer
</CButton>
</div>
src/views/notifications/Badges.vue
+2 -2
View File
@@ -1,5 +1,5 @@
<template functional>
<div class="c-wrapper">
<div class="wrapper">
<div>
<CRow>
<CCol col="12" md="6">
@@ -7,7 +7,7 @@
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Badge</strong>
<div class="c-card-header-actions">
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Badge"
class="card-header-action"
src/views/notifications/Modals.vue
+13 -13
View File
@@ -1,12 +1,12 @@
<template>
<div class="c-wrapper">
<div class="wrapper">
<div>
<CRow>
<CCol col="12">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> Bootstrap Modals
<div class="c-card-header-actions">
<div class="card-header-actions">
<a
href="https://coreui.io/vue/docs/3.0/components/Modal"
class="card-header-action"
@@ -18,32 +18,32 @@
</div>
</CCardHeader>
<CCardBody>
<CButton variant="secondary" @click="myModal = true" class="c-mr-1">
<CButton variant="secondary" @click="myModal = true" class="mr-1">
Launch demo modal
</CButton>
<CButton variant="secondary" @click="largeModal = true" class="c-mr-1">
<CButton variant="secondary" @click="largeModal = true" class="mr-1">
Launch large modal
</CButton>
<CButton variant="secondary" @click="smallModal = true" class="c-mr-1">
<CButton variant="secondary" @click="smallModal = true" class="mr-1">
Launch small modal
</CButton>
<hr>
<CButton variant="primary" @click="primaryModal = true" class="c-mr-1">
<CButton variant="primary" @click="primaryModal = true" class="mr-1">
Launch primary modal
</CButton>
<CButton variant="success" @click="successModal = true" class="c-mr-1">
<CButton variant="success" @click="successModal = true" class="mr-1">
Launch success modal
</CButton>
<CButton variant="warning" @click="warningModal = true" class="c-mr-1">
<CButton variant="warning" @click="warningModal = true" class="mr-1">
Launch warning modal
</CButton>
<CButton variant="danger" @click="dangerModal = true" class="c-mr-1">
<CButton variant="danger" @click="dangerModal = true" class="mr-1">
Launch danger modal
</CButton>
<CButton variant="info" @click="infoModal = true" class="c-mr-1">
<CButton variant="info" @click="infoModal = true" class="mr-1">
Launch info modal
</CButton>
<CButton variant="dark" @click="darkModal = true" class="c-mr-1">
<CButton variant="dark" @click="darkModal = true" class="mr-1">
Launch dark modal
</CButton>
</CCardBody>
@@ -162,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}">
<h6 class="c-modal-title">Custom smaller modal title</h6>
<CButtonClose @click="hide()" class="c-text-white"/>
<h6 class="modal-title">Custom smaller modal title</h6>
<CButtonClose @click="hide()" class="text-white"/>
</template>
<template #footer="{hide}">
<CButton @click="hide()" variant="danger">Discard</CButton>