Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00
Code Issues Projects Releases Wiki Activity

typography

Browse Source
This commit is contained in:
codecalm
2021-03-16 00:27:16 +01:00
parent 0b6621c2cc
commit e893c46a95
9 changed files with 102 additions and 263 deletions
Download Patch File Download Diff File Expand all files Collapse all files

286
src/pages/typography.html
View File

@@ -4,153 +4,64 @@ page-header: Typography
menu: base.typography
---
<div class="row row-cards">
<div class="col-12 col-md-6">
{% card title="Card title" %}
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto corporis cumque debitis dicta
dolores error esse explicabo incidunt inventore minima, officiis quis reprehenderit saepe sed sit vel voluptatem,
voluptatibus?
{% endcard %}
</div>
<div class="col-12 col-md-6">
<div class="card">
<div class="card-header">
<div class="card-title">Headings</div>
</div>
<div class="card card-lg">
<div class="card-body ">
<h1>h1. Heading text</h1>
<h2>h2. Heading text</h2>
<h3>h3. Heading text</h3>
<h4>h4. Heading text</h4>
<h5>h5. Heading text</h5>
<h6>h6. Heading text</h6>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="card">
<div class="card-header">
<div class="card-title">Headings with secondary text</div>
</div>
<div class="card-body">
<h1>h1. Heading text
<small>Secondary text</small>
</h1>
<h2>h2. Heading text
<small>Secondary text</small>
</h2>
<h3>h3. Heading text
<small>Secondary text</small>
</h3>
<h4>h4. Heading text
<small>Secondary text</small>
</h4>
<h5>h5. Heading text
<small>Secondary text</small>
</h5>
<h6>h6. Heading text
<small>Secondary text</small>
</h6>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="card">
<div class="card-header">
<div class="card-title">Body text</div>
</div>
<div class="card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ornare iaculis purus, eget gravida
est
lacinia at. Nam magna dolor, vestibulum ut consequat in, dictum a metus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aliquid amet asperiores assumenda at,
commodi
est, et, fugiat in ipsam iure mollitia optio quas reiciendis rem repellat sed similique
voluptatibus.</p>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="card">
<div class="card-header">
<div class="card-title">Lead body</div>
</div>
<div class="card-body">
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ornare iaculis purus,
eget
gravida est lacinia at. Nam magna dolor, vestibulum ut consequat in, dictum a metus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aliquid amet asperiores assumenda at,
commodi
est, et, fugiat in ipsam iure mollitia.</p>
</div>
</div>
</div>
<div class="col-12">
<div class="card">
<div class="card-header">
<div class="card-title">Alignment types</div>
</div>
<div class="card-body">
<div class="row">
<div class="col-12 col-md-4">
<p class="text-start">Left aligned text.</p>
<p class="text-start">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aliquid
beatae
consequatur culpa,
deserunt, doloribus ea et inventore iste molestias nihil nobis officiis qui reiciendis sint
totam
ullam veritatis vitae.</p></div>
<div class="col-12 col-md-4">
<p class="text-center">Center aligned text.</p>
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam
consequatur
error esse, facilis
harum, ipsa libero minima modi nisi nobis obcaecati odit officia officiis quis quisquam quos
sapiente, sunt. Ab.</p></div>
<div class="col-12 col-md-4">
<p class="text-end">Right aligned text.</p>
<p class="text-end">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur
deleniti
dicta eius excepturi
facere nulla quia sequi sit soluta ullam! Animi commodi cupiditate, enim id maiores minus
mollitia
sed temporibus!</p></div>
</div>
</div>
</div>
<div class="row g-4">
<div class="col-12 markdown">
<h1>1/1 Text</h1>
<p>I'm not a witch. Now, look here, my good man. Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed! Well, I didn't vote for you. You can't expect to wield supreme power just 'cause some watery tart threw a sword at you! Bring her forward! He hasn't got shit all over him. He hasn't got shit all over him. We shall say 'Ni' again to you, if you do not appease us.</p>
<p>Well, we did do the nose. Why? Now, look here, my good man. Be quiet! Well, what do you want?</p>
</div>
<div class="col-12 col-md-4">
<div class="card">
<div class="card-header">
<div class="card-title">Unordered list</div>
<div class="col-md-6 markdown">
<h2>1/2 Text</h2>
<p>What do you mean? We shall say 'Ni' again to you, if you do not appease us. I have to push the pram a lot. No, no, no! Yes, yes. A bit. But she's got a wart. What a strange person.</p>
</div>
<div class="card-body">
<div class="col-md-6 markdown">
<h2>1/2 Text</h2>
<p>And this isn't my nose. This is a false one. We found them. Listen. Strange women lying in ponds distributing swords is no basis for a system of government. Supreme executive power derives from a mandate from the masses, not from some farcical aquatic ceremony.</p>
</div>
<div class="col-md-4 markdown">
<h3>1/3 Text</h3>
<p>Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods. Why? Well, what do you want? …Are you suggesting that coconuts migrate?</p>
</div>
<div class="col-md-8 markdown">
<h3>2/3 Text</h3>
<p>Well, I got better. Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods. Found them? In Mercia?! The coconut's tropical! A newt? …Are you suggesting that coconuts migrate?</p>
</div>
<div class="col-md-8 markdown">
<p>I don't want to talk to you no more, you empty-headed animal food trough water! I fart in your general direction! Your mother was a hamster and your father smelt of elderberries! Now leave before I am forced to taunt you a second time! We want a shrubbery!!</p>
<p>Well, how'd you become king, then? Found them? In Mercia?! The coconut's tropical! Oh, ow! I am your king.</p>
</div>
<div class="col-md-3 markdown">
<h4>Small Text</h4>
<p>Well, Mercia's a temperate zone! You don't vote for kings. Now, look here, my good man. </p>
<p class="text-muted small lh-base">Who's that then? Well, we did do the nose.</p>
</div>
<div class="col-md-4 markdown">
<h3>Unordered list</h3>
<ul>
<li>lorem ipsum doloret</li>
<li>lorem ipsum doloret</li>
<li>lorem ipsum doloret</li>
<li>lorem ipsum doloret
<ul>
<li>lorem ipsum doloret</li>
<li>lorem ipsum doloret</li>
<li>lorem ipsum doloret</li>
</ul>
</li>
<li>lorem ipsum doloret</li>
<li>lorem ipsum doloret</li>
<li>lorem ipsum doloret</li>
<li>lorem ipsum doloret</li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="card">
<div class="card-header">
<div class="card-title">Ordered list</div>
</div>
<div class="card-body">
<div class="col-md-4 markdown">
<h3>Ordered list</h3>
<ol>
<li>lorem ipsum doloret</li>
<li>lorem ipsum doloret</li>
@@ -158,106 +69,59 @@ menu: base.typography
<li>lorem ipsum doloret</li>
<li>lorem ipsum doloret</li>
<li>lorem ipsum doloret</li>
<li>lorem ipsum doloret</li>
<li>lorem ipsum doloret</li>
<li>lorem ipsum doloret</li>
<li>lorem ipsum doloret</li>
<li>lorem ipsum doloret</li>
</ol>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="card">
<div class="card-header">
<div class="card-title">Unordered list</div>
</div>
<div class="card-body">
<div class="col-md-4 markdown">
<h3>Unstyled list</h3>
<ul class="list-unstyled">
<li>lorem ipsum doloret</li>
<li>lorem ipsum doloret</li>
<li>lorem ipsum doloret</li>
<li>lorem ipsum doloret
<ul>
<li>lorem ipsum doloret</li>
<li>lorem ipsum doloret</li>
<li>lorem ipsum doloret</li>
</ul>
</li>
<li>lorem ipsum doloret</li>
<li>lorem ipsum doloret</li>
<li>lorem ipsum doloret</li>
<li>lorem ipsum doloret</li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="card">
<div class="card-header">
<div class="card-title">Blockquotes</div>
</div>
<div class="card-body">
<div class="col-12 markdown">
<h3>Blockquote</h3>
<blockquote class="blockquote">
<p>Maecenas id tellus felis. Phasellu s eu magna ornare, ultrices metus yet odio. Cras et lectus
vitae
diam rutrum hendrerit.</p>
</blockquote>
<blockquote class="blockquote">
<p>Fusce bibendum in velit nec ullamcorper. Nullam elementum erat eu nisi venenatis elementum.
Suspendisse maximus.</p>
<p>I don't want to talk to you no more, you empty-headed animal food trough water! I fart in your general direction! Your mother was a hamster and your father smelt of elderberries! Now leave before I am forced to taunt you a second time! The nose?</p>
<footer class="blockquote-footer">Julius Cesar</footer>
</blockquote>
</div>
<div class="col-md-4 markdown">
<h3>Text elements</h3>
<div>You can use the mark tag to <mark>highlight</mark> text.</div>
<div><s>This line of text is meant to be treated as deleted</s></div>
<div><u>This line of text will render as underlined.</u></div>
<div><small>This line of text is meant to be treated as fine print.</small></div>
<div>The following snippet of text is <strong>rendered as bold text.</strong></div>
<div>The following snippet of text is <em>rendered as italicized text.</em></div>
</div>
<div class="col-md-4 markdown">
<h3>Text color</h3>
<div class="text-muted">This is an example of muted text.</div>
<div class="text-success">This is an example of success text.</div>
<div class="text-info">This is an example of info text.</div>
<div class="text-warning">This is an example of warning text.</div>
<div class="text-danger">This is an example of danger text.</div>
</div>
<div class="col-12 col-md-6">
<div class="card">
<div class="card-header">
<div class="card-title">Text elements</div>
<div class="col-md-4 markdown">
<h3>Addresses</h3>
<address><strong>Twitter, Inc. <br> </strong>1355 Market Street, Suite 900 <br>
San Francisco, CA 94103 <br><abbr title="Phone">P: </abbr>(123) 456 7890
</address>
<address><strong>Full name <br></strong><a href="mailto:#">first.last@example.com</a></address>
</div>
<div class="card-body">
<p>You can use the mark tag to
<mark>highlight</mark>
text.
</p>
<p><s>This line of text is meant to be treated as deleted</s></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>The following snippet of text is <strong>rendered as bold text.</strong></p>
<p>The following snippet of text is <em>rendered as italicized text.</em></p>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="card">
<div class="card-header">
<div class="card-title">Text color</div>
</div>
<div class="card-body">
<p class="text-muted">This is an example of muted text.</p>
<p class="text-success">This is an example of success text.</p>
<p class="text-info">This is an example of info text.</p>
<p class="text-warning">This is an example of warning text.</p>
<p class="text-danger">This is an example of danger text.</p>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="card">
<div class="card-header">
<div class="card-title">Addresses</div>
</div>
<div class="card-body">
<address><strong>Twitter, Inc. <br> </strong>1355 Market Street, Suite 900 <br>
San Francisco, CA 94103 <br><abbr title="Phone">P: </abbr>(123) 456 7890
</address>
<address><strong>Full name <br></strong><a mailto:#="">first.last@example.com</a></address>
</div>
</div>
</div>
</div>

6
src/scss/_mixins-override.scss
View File

@@ -13,12 +13,12 @@
height: $caret-width;
border-bottom: 1px solid;
border-left: 1px solid;
margin-inline-end: .1em;
margin-right: .1em;
@if $direction != 'left' {
margin-inline-start: $caret-spacing;
margin-left: $caret-spacing;
} @else {
margin-inline-end: $caret-spacing;
margin-right: $caret-spacing;
}
@if $direction == down {

2
src/scss/_variables.scss
View File

@@ -212,7 +212,7 @@ $link-decoration: none !default;
$link-hover-decoration: underline !default;
//Typography
$headings-font-weight: $font-weight-medium !default;
$headings-font-weight: $font-weight-bold !default;
$hr-opacity: $border-opacity !default;
$hr-margin-y: 2rem !default;

4
src/scss/layout/_navbar.scss
View File

@@ -124,7 +124,7 @@
}
.dropdown-toggle:after {
margin-inline-start: auto;
margin-left: auto;
}
.nav-item.active:after {
@@ -241,7 +241,7 @@ Navbar
&.navbar-vertical {
~ .navbar,
~ .content {
margin-inline-start: $sidebar-width;
margin-left: $sidebar-width;
}
}
}

2
src/scss/layout/_page.scss
View File

@@ -58,7 +58,7 @@
svg {
width: 1.5rem;
height: 1.5rem;
margin-inline-end: .25rem;
margin-right: .25rem;
}
}

9
src/scss/ui/_buttons.scss
View File

@@ -27,8 +27,7 @@
width: $icon-size;
height: $icon-size;
min-width: $icon-size;
margin: 0 .5rem 0;
margin-inline-start: -.25rem;
margin: 0 .5rem 0 -.25rem;
vertical-align: bottom;
color: $text-muted;
}
@@ -37,13 +36,11 @@
width: 1.25rem;
height: 1.25rem;
vertical-align: text-top;
margin: 0 .5rem 0;
margin-inline-start: -.25rem;
margin: 0 .5rem 0 -.25rem;
}
.icon-right {
margin: 0 .5rem 0;
margin-inline-end: -.25rem;
margin: 0 -.25rem 0 .5rem;
}
.badge {

37
src/scss/ui/_markdown.scss
View File

@@ -3,7 +3,6 @@ Markdown
*/
.markdown {
line-height: $line-height-lg;
font-size: $h4-font-size;
> :first-child {
margin-top: 0;
@@ -14,34 +13,6 @@ Markdown
margin-bottom: 0;
}
> {
h1, h2, h3, h4, h5, h6 {
margin-top: 2rem;
margin-bottom: .5rem;
font-weight: $font-weight-bold;
}
h1 {
font-size: $h2-font-size;
line-height: $h2-line-height;
}
h2 {
font-size: $h3-font-size;
line-height: $h3-line-height;
}
h3 {
font-size: $h4-font-size;
line-height: $h4-line-height;
}
h4 {
font-size: $h5-font-size;
line-height: $h5-line-height;
}
}
> hr {
@include media-breakpoint-up(md) {
margin-top: 3em;
@@ -53,7 +24,13 @@ Markdown
@extend .table, .table-bordered;
}
img {
> blockquote {
font-size: $h3-font-size;
margin: 1.5rem 0;
padding: .5rem 1.5rem;
}
> img {
border-radius: $border-radius;
}
}

6
src/scss/ui/_nav.scss
View File

@@ -10,9 +10,9 @@
}
.nav {
margin-inline-start: 1.25rem;
margin-left: 1.25rem;
border-left: 1px solid $border-color;
padding-inline-start: .5rem;
padding-left: .5rem;
}
.nav-link.active,
@@ -92,7 +92,7 @@
.nav-link-icon {
width: 1.5rem;
height: $icon-size;
margin-inline-end: .25rem;
margin-right: .25rem;
opacity: $text-muted-opacity;
svg {

17
src/scss/ui/_type.scss
View File

@@ -8,14 +8,6 @@ a {
text-decoration-skip-ink: auto;
}
ul,
ol {
margin: 0 0 1rem 0;
margin-inline-start: 1rem;
padding: 0;
padding-inline-start: 1rem;
}
h1,
h2,
h3,
@@ -81,6 +73,15 @@ blockquote {
}
}
ul, ol {
padding-left: 1.5rem;
li::marker {
color: $primary;
font-weight: $font-weight-bold;
}
}
hr {
margin: 2rem 0;
}