feat: change styles of users, themes and icons sections to version 3
This commit is contained in:
woothu
@@ -1,6 +1,9 @@
|
||||
<template>
|
||||
<CCol xl="2" md="4" sm="6" xs="12" class="mb-4">
|
||||
<div :class="[classObj, color]" :style="{ paddingTop: '75%' }"></div>
|
||||
<CCol xl="2" md="4" sm="6" xs="12" class="c-mb-4">
|
||||
<div
|
||||
:class="['c-theme-color c-w-75 c-rounded c-mb-3', color]"
|
||||
:style="{ paddingTop: '75%' }"
|
||||
></div>
|
||||
<slot></slot>
|
||||
<ColorView/>
|
||||
</CCol>
|
||||
@@ -12,13 +15,9 @@ export default {
|
||||
name: 'ColorTheme',
|
||||
components: { ColorView },
|
||||
props: {
|
||||
classObj: {
|
||||
type: String,
|
||||
default: 'theme-color w-75 rounded mb-3'
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: 'bg-secondary'
|
||||
default: 'c-bg-secondary'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<table class="w-100">
|
||||
<table class="c-w-100">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="text-muted">HEX:</td>
|
||||
<td class="font-weight-bold">{{this.hexColor}}</td>
|
||||
<td class="c-text-muted">HEX:</td>
|
||||
<td class="c-font-weight-bold">{{this.hexColor}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-muted">RGB:</td>
|
||||
<td class="font-weight-bold">{{this.bgColor}}</td>
|
||||
<td class="c-text-muted">RGB:</td>
|
||||
<td class="c-font-weight-bold">{{this.bgColor}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -17,7 +17,7 @@
|
||||
import { rgbToHex } from '@coreui/coreui/dist/js/coreui-utilities'
|
||||
export default {
|
||||
name: 'ColorView',
|
||||
data: function () {
|
||||
data () {
|
||||
return {
|
||||
bgColor: 'rgb(255, 255, 255)'
|
||||
}
|
||||
@@ -39,4 +39,3 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
+28
-28
@@ -1,21 +1,21 @@
|
||||
<template>
|
||||
<div class="animated fadeIn">
|
||||
<div class="c-animated c-fadeIn">
|
||||
<CCard >
|
||||
<CCardHeader>
|
||||
<i class="icon-drop"></i> Theme colors
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow>
|
||||
<ColorTheme color="bg-primary">
|
||||
<ColorTheme color="c-bg-primary">
|
||||
<h6>Brand Primary Color</h6>
|
||||
</ColorTheme>
|
||||
<ColorTheme color="bg-secondary"><h6>Brand Secondary Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-success"><h6>Brand Success Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-danger"><h6>Brand Danger Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-warning"><h6>Brand Warning Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-info"><h6>Brand Info Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-light"><h6>Brand Light Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-dark"><h6>Brand Dark Color</h6></ColorTheme>
|
||||
<ColorTheme color="c-bg-secondary"><h6>Brand Secondary Color</h6></ColorTheme>
|
||||
<ColorTheme color="c-bg-success"><h6>Brand Success Color</h6></ColorTheme>
|
||||
<ColorTheme color="c-bg-danger"><h6>Brand Danger Color</h6></ColorTheme>
|
||||
<ColorTheme color="c-bg-warning"><h6>Brand Warning Color</h6></ColorTheme>
|
||||
<ColorTheme color="c-bg-info"><h6>Brand Info Color</h6></ColorTheme>
|
||||
<ColorTheme color="c-bg-light"><h6>Brand Light Color</h6></ColorTheme>
|
||||
<ColorTheme color="c-bg-dark"><h6>Brand Dark Color</h6></ColorTheme>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
@@ -25,15 +25,15 @@
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow>
|
||||
<ColorTheme color="bg-gray-100"><h6>Brand 100 Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-gray-200"><h6>Brand 200 Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-gray-300"><h6>Brand 300 Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-gray-400"><h6>Brand 400 Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-gray-500"><h6>Brand 500 Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-gray-600"><h6>Brand 600 Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-gray-700"><h6>Brand 700 Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-gray-800"><h6>Brand 800 Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-gray-900"><h6>Brand 900 Color</h6></ColorTheme>
|
||||
<ColorTheme color="c-bg-gray-100"><h6>Brand 100 Color</h6></ColorTheme>
|
||||
<ColorTheme color="c-bg-gray-200"><h6>Brand 200 Color</h6></ColorTheme>
|
||||
<ColorTheme color="c-bg-gray-300"><h6>Brand 300 Color</h6></ColorTheme>
|
||||
<ColorTheme color="c-bg-gray-400"><h6>Brand 400 Color</h6></ColorTheme>
|
||||
<ColorTheme color="c-bg-gray-500"><h6>Brand 500 Color</h6></ColorTheme>
|
||||
<ColorTheme color="c-bg-gray-600"><h6>Brand 600 Color</h6></ColorTheme>
|
||||
<ColorTheme color="c-bg-gray-700"><h6>Brand 700 Color</h6></ColorTheme>
|
||||
<ColorTheme color="c-bg-gray-800"><h6>Brand 800 Color</h6></ColorTheme>
|
||||
<ColorTheme color="c-bg-gray-900"><h6>Brand 900 Color</h6></ColorTheme>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
@@ -43,16 +43,16 @@
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow>
|
||||
<ColorTheme color="bg-blue"><h6>Brand Blue Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-indigo"><h6>Brand Indigo Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-purple"><h6>Brand Purple Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-pink"><h6>Brand Pink Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-red"><h6>Brand Red Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-orange"><h6>Brand Orange Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-yellow"><h6>Brand Yellow Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-green"><h6>Brand Green Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-teal"><h6>Brand Teal Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-cyan"><h6>Brand Cyan Color</h6></ColorTheme>
|
||||
<ColorTheme color="c-bg-blue"><h6>Brand Blue Color</h6></ColorTheme>
|
||||
<ColorTheme color="c-bg-indigo"><h6>Brand Indigo Color</h6></ColorTheme>
|
||||
<ColorTheme color="c-bg-purple"><h6>Brand Purple Color</h6></ColorTheme>
|
||||
<ColorTheme color="c-bg-pink"><h6>Brand Pink Color</h6></ColorTheme>
|
||||
<ColorTheme color="c-bg-red"><h6>Brand Red Color</h6></ColorTheme>
|
||||
<ColorTheme color="c-bg-orange"><h6>Brand Orange Color</h6></ColorTheme>
|
||||
<ColorTheme color="c-bg-yellow"><h6>Brand Yellow Color</h6></ColorTheme>
|
||||
<ColorTheme color="c-bg-green"><h6>Brand Green Color</h6></ColorTheme>
|
||||
<ColorTheme color="c-bg-teal"><h6>Brand Teal Color</h6></ColorTheme>
|
||||
<ColorTheme color="c-bg-cyan"><h6>Brand Cyan Color</h6></ColorTheme>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
|
||||
+129
-67
@@ -1,12 +1,13 @@
|
||||
<template>
|
||||
<div class="animated fadeIn">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="c-animated c-fadeIn">
|
||||
<div class="c-card">
|
||||
<div class="c-card-header">
|
||||
Headings
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.</p>
|
||||
<table class="table">
|
||||
<div class="c-card-body">
|
||||
<p>Documentation and examples for Bootstrap typography,
|
||||
including global settings, headings, body text, lists, and more.</p>
|
||||
<table class="c-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Heading</th>
|
||||
@@ -16,132 +17,193 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<p><code class="highlighter-rouge"><h1></h1></code></p>
|
||||
<p>
|
||||
<code class="c-highlighter-rouge">
|
||||
<h1></h1>
|
||||
</code>
|
||||
</p>
|
||||
</td>
|
||||
<td><span class="h1">h1. Bootstrap heading</span></td>
|
||||
<td><span class="c-h1">h1. Bootstrap heading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p><code class="highlighter-rouge"><h2></h2></code></p>
|
||||
<p>
|
||||
<code class="c-highlighter-rouge">
|
||||
<h2></h2>
|
||||
</code>
|
||||
</p>
|
||||
</td>
|
||||
<td><span class="h2">h2. Bootstrap heading</span></td>
|
||||
<td><span class="c-h2">h2. Bootstrap heading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p><code class="highlighter-rouge"><h3></h3></code></p>
|
||||
<p>
|
||||
<code class="c-highlighter-rouge">
|
||||
<h3></h3>
|
||||
</code>
|
||||
</p>
|
||||
</td>
|
||||
<td><span class="h3">h3. Bootstrap heading</span></td>
|
||||
<td><span class="c-h3">h3. Bootstrap heading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p><code class="highlighter-rouge"><h4></h4></code></p>
|
||||
<p>
|
||||
<code class="c-highlighter-rouge">
|
||||
<h4></h4>
|
||||
</code>
|
||||
</p>
|
||||
</td>
|
||||
<td><span class="h4">h4. Bootstrap heading</span></td>
|
||||
<td><span class="c-h4">h4. Bootstrap heading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p><code class="highlighter-rouge"><h5></h5></code></p>
|
||||
<p>
|
||||
<code class="c-highlighter-rouge">
|
||||
<h5></h5>
|
||||
</code>
|
||||
</p>
|
||||
</td>
|
||||
<td><span class="h5">h5. Bootstrap heading</span></td>
|
||||
<td><span class="c-h5">h5. Bootstrap heading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p><code class="highlighter-rouge"><h6></h6></code></p>
|
||||
<p>
|
||||
<code class="c-highlighter-rouge">
|
||||
<h6></h6>
|
||||
</code>
|
||||
</p>
|
||||
</td>
|
||||
<td><span class="h6">h6. Bootstrap heading</span></td>
|
||||
<td><span class="c-h6">h6. Bootstrap heading</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="c-card">
|
||||
<div class="c-card-header">
|
||||
Headings
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p><code class="highlighter-rouge">.h1</code> through <code class="highlighter-rouge">.h6</code> classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.</p>
|
||||
<div class="bd-example">
|
||||
<p class="h1">h1. Bootstrap heading</p>
|
||||
<p class="h2">h2. Bootstrap heading</p>
|
||||
<p class="h3">h3. Bootstrap heading</p>
|
||||
<p class="h4">h4. Bootstrap heading</p>
|
||||
<p class="h5">h5. Bootstrap heading</p>
|
||||
<p class="h6">h6. Bootstrap heading</p>
|
||||
<div class="c-card-body">
|
||||
<p>
|
||||
<code class="c-highlighter-rouge">.h1</code> through
|
||||
<code class="c-highlighter-rouge">.h6</code>
|
||||
classes are also available, for when you want to match the font
|
||||
styling of a heading but cannot use the associated HTML element.
|
||||
</p>
|
||||
<div class="c-bd-example">
|
||||
<p class="c-h1">h1. Bootstrap heading</p>
|
||||
<p class="c-h2">h2. Bootstrap heading</p>
|
||||
<p class="c-h3">h3. Bootstrap heading</p>
|
||||
<p class="c-h4">h4. Bootstrap heading</p>
|
||||
<p class="c-h5">h5. Bootstrap heading</p>
|
||||
<p class="c-h6">h6. Bootstrap heading</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="c-card">
|
||||
<div class="c-card-header">
|
||||
Display headings
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a <strong>display heading</strong>—a larger, slightly more opinionated heading style.</p>
|
||||
<div class="bd-example bd-example-type">
|
||||
<table class="table">
|
||||
<div class="c-card-body">
|
||||
<p>
|
||||
Traditional heading elements are designed to work best in the meat
|
||||
of your page content. When you need a heading to stand out,
|
||||
consider using a <strong>display heading</strong>—a larger,
|
||||
slightly more opinionated heading style.
|
||||
</p>
|
||||
<div class="c-bd-example c-bd-example-type">
|
||||
<table class="c-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><span class="display-1">Display 1</span></td>
|
||||
<td><span class="c-display-1">Display 1</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="display-2">Display 2</span></td>
|
||||
<td><span class="c-display-2">Display 2</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="display-3">Display 3</span></td>
|
||||
<td><span class="c-display-3">Display 3</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="display-4">Display 4</span></td>
|
||||
<td><span class="c-display-4">Display 4</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="c-card">
|
||||
<div class="c-card-header">
|
||||
Inline text elements
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a <strong>display heading</strong>—a larger, slightly more opinionated heading style.</p>
|
||||
<div class="bd-example">
|
||||
<div class="c-card-body">
|
||||
<p>
|
||||
Traditional heading elements are designed to work best in the meat
|
||||
of your page content. When you need a heading to stand out,
|
||||
consider using a <strong>display heading</strong>—a larger,
|
||||
slightly more opinionated heading style.
|
||||
</p>
|
||||
<div class="c-bd-example">
|
||||
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
|
||||
<p><del>This line of text is meant to be treated as deleted text.</del></p>
|
||||
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
|
||||
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
|
||||
<p><del>
|
||||
This line of text is meant to be treated as deleted text.
|
||||
</del></p>
|
||||
<p><s>
|
||||
This line of text is meant to be treated as no longer accurate.
|
||||
</s></p>
|
||||
<p><ins>
|
||||
This line of text is meant to be treated as an addition to the document.
|
||||
</ins></p>
|
||||
<p><u>This line of text will render as underlined</u></p>
|
||||
<p><small>This line of text is meant to be treated as fine print.</small></p>
|
||||
<p><small>
|
||||
This line of text is meant to be treated as fine print.
|
||||
</small></p>
|
||||
<p><strong>This line rendered as bold text.</strong></p>
|
||||
<p><em>This line rendered as italicized text.</em></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="c-card">
|
||||
<div class="c-card-header">
|
||||
Description list alignment
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic mixins). For longer terms, you can optionally add a <code class="highlighter-rouge">.text-truncate</code> class to truncate the text with an ellipsis.</p>
|
||||
<div class="bd-example">
|
||||
<dl class="row">
|
||||
<dt class="col-sm-3">Description lists</dt>
|
||||
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
|
||||
<div class="c-card-body">
|
||||
<p>
|
||||
Align terms and descriptions horizontally by using our grid system’s
|
||||
predefined classes (or semantic mixins). For longer terms, you can
|
||||
optionally add a <code class="highlighter-rouge">.text-truncate</code>
|
||||
class to truncate the text with an ellipsis.
|
||||
</p>
|
||||
<div class="c-bd-example">
|
||||
<dl class="c-row">
|
||||
<dt class="c-col-sm-3">Description lists</dt>
|
||||
<dd class="c-col-sm-9">
|
||||
A description list is perfect for defining terms.
|
||||
</dd>
|
||||
|
||||
<dt class="col-sm-3">Euismod</dt>
|
||||
<dd class="col-sm-9">
|
||||
<dt class="c-col-sm-3">Euismod</dt>
|
||||
<dd class="c-col-sm-9">
|
||||
<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
|
||||
<p>Donec id elit non mi porta gravida at eget metus.</p>
|
||||
</dd>
|
||||
|
||||
<dt class="col-sm-3">Malesuada porta</dt>
|
||||
<dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
|
||||
<dt class="c-col-sm-3">Malesuada porta</dt>
|
||||
<dd class="c-col-sm-9">
|
||||
Etiam porta sem malesuada magna mollis euismod.
|
||||
</dd>
|
||||
|
||||
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
|
||||
<dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
|
||||
<dt class="c-col-sm-3 text-truncate">Truncated term is truncated</dt>
|
||||
<dd class="c-col-sm-9">
|
||||
Fusce dapibus, tellus ac cursus commodo, tortor mauris
|
||||
condimentum nibh, ut fermentum massa justo sit amet risus.
|
||||
</dd>
|
||||
|
||||
<dt class="col-sm-3">Nesting</dt>
|
||||
<dd class="col-sm-9">
|
||||
<dl class="row">
|
||||
<dt class="col-sm-4">Nested definition list</dt>
|
||||
<dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
|
||||
<dt class="c-col-sm-3">Nesting</dt>
|
||||
<dd class="c-col-sm-9">
|
||||
<dl class="c-row">
|
||||
<dt class="c-col-sm-4">Nested definition list</dt>
|
||||
<dd class="c-col-sm-8">
|
||||
Aenean posuere, tortor sed cursus feugiat, nunc augue nunc.
|
||||
</dd>
|
||||
</dl>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
Reference in New Issue
Block a user