Core module list styles, utility module tweaks, progress module variant style and color documentation
This commit is contained in:
Angelos Chalaris
parent
4f30eba776
commit
b6bb5d3bfc
8 changed files with 95 additions and 16 deletions
11
dist/mini-default.css
vendored
11
dist/mini-default.css
vendored
|
|
@ -75,6 +75,10 @@ h6 {
|
|||
p {
|
||||
margin: 1px 8px; }
|
||||
|
||||
ol, ul {
|
||||
margin: 1px 8px 10px;
|
||||
padding-left: 28px; }
|
||||
|
||||
b, strong {
|
||||
font-weight: 700; }
|
||||
|
||||
|
|
@ -1220,6 +1224,8 @@ ul.breadcrumbs {
|
|||
display: -webkit-flex;
|
||||
display: flex;
|
||||
list-style: none;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding: 0;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15); }
|
||||
|
|
@ -1398,6 +1404,11 @@ progress.nano {
|
|||
progress.nano[value="1000"]::-moz-progress-bar {
|
||||
border-radius: 0; }
|
||||
|
||||
@supports (width: calc(100% - 2*0)) or (width: -webkit-calc(100% - 2*0)) {
|
||||
progress.nano {
|
||||
width: -webkit-calc(100% - 2*0);
|
||||
width: calc(100% - 2*0);
|
||||
margin: 0 0; } }
|
||||
.spinner-donut.tertiary {
|
||||
border: 4px solid #e8f5e9;
|
||||
border-left: 4px solid #2e7d32; }
|
||||
|
|
|
|||
2
dist/mini-default.min.css
vendored
2
dist/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -545,3 +545,7 @@
|
|||
- Tweaks in the `core` module to use the "native font stack" - See here: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
|
||||
- Documented basic `progress` module's `progress` element structure.
|
||||
- Added `spinner` support for older `webkit`-based browsers.
|
||||
- Added variables and styling for `ol` and `ul` lists in the `core` module after realising I forgot to style these elements and having found a bit of a styling discrepancy.
|
||||
- Updated `core` documentation page to reflect list changes.
|
||||
- Made some tweaks in the `utility` module to make `breadcrumbs` work as before.
|
||||
- Added `progress` variant section in the `progress` module's doc page.
|
||||
|
|
|
|||
|
|
@ -164,6 +164,49 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Lists</h2>
|
||||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
||||
<div>
|
||||
<br>
|
||||
<ul>
|
||||
<li>Apple</li>
|
||||
<li>Orange</li>
|
||||
<li>Strawberry</li>
|
||||
</ul>
|
||||
<br>
|
||||
<ol>
|
||||
<li>Wake up</li>
|
||||
<li>Eat breakfast</li>
|
||||
<li>Go to work</li>
|
||||
</ol>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
|
||||
<p>Lists are also very commonly used in websites and apps. We tweaked a few margins and paddings to save some space and make them align properly with the rest of the common HTML elements that we use, but both unordered lists (<code><ul></code>) and ordered lists (<code><ol></code>) are minimally pre-styled to make things a little bit easier for you.</p>
|
||||
<h3>Sample code</h3>
|
||||
<pre><ul>
|
||||
<li>Apple</li>
|
||||
<li>Orange</li>
|
||||
<li>Strawberry</li>
|
||||
</ul>
|
||||
|
||||
<ol>
|
||||
<li>Wake up</li>
|
||||
<li>Eat breakfast</li>
|
||||
<li>Go to work</li>
|
||||
</ol></pre><br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
|
||||
<div class="col-sm">
|
||||
<p>If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules.html">modules page</a> and choose another module to see its documentation.</p>
|
||||
|
|
|
|||
|
|
@ -97,7 +97,7 @@
|
|||
<h1>Progress</h1>
|
||||
<p>The <strong>progress</strong> module gives you full control over the presentation of progress and loading on your pages. Apart from progress bars and color variants for them, spinner elements are provided to help communicate that something is loading.</p>
|
||||
<p><small>All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.</small></p>
|
||||
<ul class="breadcrumbs"><li><a href="index.html">Home</a></li><li><a href="modules.html">Modules</a></li><li>Grid</li></ul>
|
||||
<ul class="breadcrumbs"><li><a href="index.html">Home</a></li><li><a href="modules.html">Modules</a></li><li>Progress</li></ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
|
@ -152,7 +152,7 @@
|
|||
</div>
|
||||
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal">
|
||||
<pre><progress value="450.5" max="1000.0"></progress></pre>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> Try not to use floating point values for either the <code><progress></code> element's <code>value</code> or <code>max</code>. During testing of the module, we found that floating point values could cause unexpected behavior. </p>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> Try not to use floating point values for either the <code><progress></code> element's <code>value</code> or <code>max</code>. During testing of the module, we found that floating point values could cause unexpected behavior.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -167,29 +167,41 @@
|
|||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
||||
<!-- sample -->
|
||||
<p>Secondary process is 60% complete!</p>
|
||||
<progress class="secondary" value="600" max="1000"></progress>
|
||||
<p>Tertiary process is 30% complete!</p>
|
||||
<progress class="tertiary" value="300" max="1000"></progress>
|
||||
<p>Nano progress bar is 75% filled!</p>
|
||||
<progress class="nano" value="750" max="1000"></progress>
|
||||
<p>Inline progress bar:<progress class="inline" value="150" max="1000"></progress></p>
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
|
||||
<p></p>
|
||||
<p>Apart from the default style for the <code><progress></code> element, we have also included a couple of variants for it. First off, you can change the color of your progress bars, based on the context, using the <code>.secondary</code> or <code>.tertiary</code> class. You can also make a <code><progress></code> element tiny, using the <code>.nano</code> class. Finally, you can create inline progress bars, using the <code>.inline</code> class.</p>
|
||||
<h3>Sample code</h3>
|
||||
<pre></pre>
|
||||
<pre><progress class="secondary" value="600" max="1000"></progress>
|
||||
<progress class="tertiary" value="300" max="1000"></progress>
|
||||
<progress class="nano" value="750" max="1000"></progress>
|
||||
<progress class="inline" value="150" max="1000"></progress></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li>If you want to add your own custom size classes for <code><progress></code> elements, check the <a href="customization.html">customization page</a> for instructions.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6 col-lg-4">
|
||||
<pre><!-- do code --></pre>
|
||||
<p class="do"><mark class="tertiary">Do:</mark> </p>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<pre><progress class="nano secondary" value="800" max="1000"></progress>
|
||||
<span class="fore-tertiary"><!-- or --></span>
|
||||
<progress class="inline tertiary" value="650" max="1000"></progress></pre>
|
||||
<p class="do"><mark class="tertiary">Do:</mark> You can mix size and color classes for <codde><progress></codde> elements as needed.</p>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal col-lg-4 col-lg-last">
|
||||
<pre><!-- don't code --></pre>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> </p>
|
||||
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal">
|
||||
<pre><progress class="secondary teriary" value="450" max="1000"></progress>
|
||||
<span class="fore-secondary"><!-- or --></span>
|
||||
<progress class="inline nano" value="300" max="1000"></progress></pre>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> Avoid mixing two classes of the same type (i.e. two color classes or two size classes).</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -34,7 +34,9 @@ $make-heading-smalltext-block: true; // Should <small> elements in hea
|
|||
// be displayed as blocks (`true`/`false`) [4]
|
||||
$heading-smalltext-b-font-size: 75%; // Font size of block <small> elements in headings
|
||||
$heading-smalltext-b-top-margin:-4px; // Top margin of block <small> elements in headings
|
||||
$paragraph-margin: 1px 8px; // Paragraph element margin
|
||||
$paragraph-margin: 1px 8px; // Margin for <p> elements
|
||||
$list-margin: 1px 8px 10px; // Margin for <ol> and <ul> elements
|
||||
$list-left-padding: 28px; // Left padding for <ol> and <ul> elements
|
||||
$bold-font-weight: 700; // Font weight for <b> and <strong>
|
||||
$horizontal-rule-line-height: 1.25em; // <hr> line height
|
||||
$horizontal-rule-margin: 8px; // <hr> margin
|
||||
|
|
@ -410,7 +412,7 @@ $progress-style1-height: 2px; // Height for <progress> style 1
|
|||
$progress-style1-top-bottom-margin: // Top and bottom margin for <progress> style 1
|
||||
0;
|
||||
$progress-style1-left-right-margin: // Left and right margin for <progress> style 1
|
||||
auto;
|
||||
0;
|
||||
$progress-style1-border-style: 0; // Border style for <progress> style 1
|
||||
$progress-style1-border-radius: 0; // Border radius for <progress> style 1
|
||||
$spinner-donut-name: 'spinner-donut'; // Class name for donut spinner
|
||||
|
|
|
|||
|
|
@ -116,6 +116,11 @@ p {
|
|||
margin: $paragraph-margin;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
margin: $list-margin;
|
||||
padding-left: $list-left-padding;
|
||||
}
|
||||
|
||||
b, strong {
|
||||
font-weight: $bold-font-weight;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,6 +23,8 @@ ul.#{$breadcrumbs-name} {
|
|||
display: -webkit-flex;
|
||||
display: flex;
|
||||
list-style: none;
|
||||
margin-left: 0; // Reset margins from list styling
|
||||
margin-right: 0; // Reset margins from list styling
|
||||
padding: 0; // Remove unnecessary left and right empty space
|
||||
@if $breadcrumbs-border-style !=0 {
|
||||
border: $breadcrumbs-border-style;
|
||||
|
|
|
|||
Loading…
Reference in a new issue