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/theme/Typography.vue
+59 -59
View File
@@ -1,13 +1,13 @@
<template>
<div>
<div class="c-card">
<div class="c-card-header">
<div class="card">
<div class="card-header">
Headings
</div>
<div class="c-card-body">
<div class="card-body">
<p>Documentation and examples for Bootstrap typography,
including global settings, headings, body text, lists, and more.</p>
<table class="c-table">
<table class="table">
<thead>
<tr>
<th>Heading</th>
@@ -18,131 +18,131 @@
<tr>
<td>
<p>
<code class="c-highlighter-rouge">
<code class="highlighter-rouge">
&lt;h1&gt;&lt;/h1&gt;
</code>
</p>
</td>
<td><span class="c-h1">h1. Bootstrap heading</span></td>
<td><span class="h1">h1. Bootstrap heading</span></td>
</tr>
<tr>
<td>
<p>
<code class="c-highlighter-rouge">
<code class="highlighter-rouge">
&lt;h2&gt;&lt;/h2&gt;
</code>
</p>
</td>
<td><span class="c-h2">h2. Bootstrap heading</span></td>
<td><span class="h2">h2. Bootstrap heading</span></td>
</tr>
<tr>
<td>
<p>
<code class="c-highlighter-rouge">
<code class="highlighter-rouge">
&lt;h3&gt;&lt;/h3&gt;
</code>
</p>
</td>
<td><span class="c-h3">h3. Bootstrap heading</span></td>
<td><span class="h3">h3. Bootstrap heading</span></td>
</tr>
<tr>
<td>
<p>
<code class="c-highlighter-rouge">
<code class="highlighter-rouge">
&lt;h4&gt;&lt;/h4&gt;
</code>
</p>
</td>
<td><span class="c-h4">h4. Bootstrap heading</span></td>
<td><span class="h4">h4. Bootstrap heading</span></td>
</tr>
<tr>
<td>
<p>
<code class="c-highlighter-rouge">
<code class="highlighter-rouge">
&lt;h5&gt;&lt;/h5&gt;
</code>
</p>
</td>
<td><span class="c-h5">h5. Bootstrap heading</span></td>
<td><span class="h5">h5. Bootstrap heading</span></td>
</tr>
<tr>
<td>
<p>
<code class="c-highlighter-rouge">
<code class="highlighter-rouge">
&lt;h6&gt;&lt;/h6&gt;
</code>
</p>
</td>
<td><span class="c-h6">h6. Bootstrap heading</span></td>
<td><span class="h6">h6. Bootstrap heading</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="c-card">
<div class="c-card-header">
<div class="card">
<div class="card-header">
Headings
</div>
<div class="c-card-body">
<div class="card-body">
<p>
<code class="c-highlighter-rouge">.h1</code> through
<code class="c-highlighter-rouge">.h6</code>
<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="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 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>
</div>
</div>
<div class="c-card">
<div class="c-card-header">
<div class="card">
<div class="card-header">
Display headings
</div>
<div class="c-card-body">
<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="c-bd-example c-bd-example-type">
<table class="c-table">
<div class="bd-example bd-example-type">
<table class="table">
<tbody>
<tr>
<td><span class="c-display-1">Display 1</span></td>
<td><span class="display-1">Display 1</span></td>
</tr>
<tr>
<td><span class="c-display-2">Display 2</span></td>
<td><span class="display-2">Display 2</span></td>
</tr>
<tr>
<td><span class="c-display-3">Display 3</span></td>
<td><span class="display-3">Display 3</span></td>
</tr>
<tr>
<td><span class="c-display-4">Display 4</span></td>
<td><span class="display-4">Display 4</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="c-card">
<div class="c-card-header">
<div class="card">
<div class="card-header">
Inline text elements
</div>
<div class="c-card-body">
<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="c-bd-example">
<div class="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.
@@ -162,46 +162,46 @@
</div>
</div>
</div>
<div class="c-card">
<div class="c-card-header">
<div class="card">
<div class="card-header">
Description list alignment
</div>
<div class="c-card-body">
<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="c-bd-example">
<dl class="c-row">
<dt class="c-col-sm-3">Description lists</dt>
<dd class="c-col-sm-9">
<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>
<dt class="c-col-sm-3">Euismod</dt>
<dd class="c-col-sm-9">
<dt class="col-sm-3">Euismod</dt>
<dd class="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="c-col-sm-3">Malesuada porta</dt>
<dd class="c-col-sm-9">
<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 text-truncate">Truncated term is truncated</dt>
<dd class="c-col-sm-9">
<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">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">
<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 nunc.
</dd>
</dl>