beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Contextual module documentation page complete

Browse source
This commit is contained in:
Angelos Chalaris 2016-11-26 16:30:43 +02:00
parent f409e24f27
commit 8569734968
5 changed files with 21 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
dist/mini-default.css vendored
View file

@ -1410,7 +1410,7 @@ mark.inline-block {
color: #fafafa; }
.alert.urgent {
border: 1px solid #ff6f00; }
border: 1px solid #ff8f00; }
.alert.critical {
border: 1px solid #d50000; }

2
dist/mini-default.min.css vendored
View file

File diff suppressed because one or more lines are too long

1
docs/v2/DEVLOG.md
View file

@ -562,3 +562,4 @@
- Added animated `alert`s on condition.
- Documented basic `mark` behavior and stuff.
- Basic documentation for `alert`s.
- Documented `animated` `alert`s. Documentation of `contextual` seems to be complete.

33
docs/v2/contextual.html
View file

@ -238,31 +238,32 @@
</div>
<div class="section row">
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
<!-- sample -->
<div>
<div class="animated alert" style="margin-top: 8px; margin-bottom: 8px;"><h3>This is an alert</h3><p>Make sure you read this!</p></div>
<div class="animated alert urgent" style="margin-bottom: 8px;"><h3>This is an urgent alert</h3><p>Make absolutely sure you read this!</p></div>
<div class="animated alert critical" style="margin-bottom: 8px;"><h3>This is a critical alert</h3><p>Make certain you read and actually understand this!</p></div>
</div>
</div>
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
<p></p>
<p>Alerts can be animated, so that they pop out a little more to make sure your users can see them. To animate an alert box, use the <code>.animated</code> class on an existing <code>.alert</code> and it shall periodically scale up a little bit to make users notice it.</p>
<h3>Sample code</h3>
<pre></pre>
<pre>&lt;div class=&quot;alert animated&quot;&gt;
&lt;h3&gt;Animated alert&lt;/h3&gt;
&lt;/div&gt;
&lt;div class=&quot;alert urgent animated&quot;&gt;
&lt;h3&gt;Animated urgent alert&lt;/h3&gt;
&lt;/div&gt;
&lt;div class=&quot;alert critical animated&quot;&gt;
&lt;h3&gt;Animated critical alert&lt;/h3&gt;
&lt;/div&gt;</pre>
</div>
</div>
<div class="section">
<h3>Notes</h3>
<ul>
<li></li>
<li></li>
<li>Animated alerts may not display properly on older browsers, especially legacy versions of Internet Explorer.</li>
<li>It has been reported that some Webkit-based browsers, such as Chrome, display animated alerts in a very blurry fashion. Despite our best attempts at solving these problems, they seem to be quite persistent and we do not yet know how to fix them. Thus, you might want to hold off on using animated alerts if you think this might be an issue or try to control them using Javascript code to make the animation stop after a short amount of time (i.e. removing the <code>.animated</code> class).</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>&nbsp;</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>&nbsp;</p>
</div>
</div>
</div>
</div>
</div>

2
src/flavors/mini-default.scss
View file

@ -404,7 +404,7 @@ $alert-variant2-name: 'critical'; // Class name for alert variant 2
$alert-variant2-back-color: #b71c1c; // Background color for alert variant 2
$alert-variant2-fore-color: #fafafa; // Text color for alert variant 2
$alert-style1-name: 'urgent'; // Class name for alert style 1
$alert-style1-border-style: 1px solid #ff6f00; // Border style for alert style 1
$alert-style1-border-style: 1px solid #ff8f00; // Border style for alert style 1
$alert-style1-border-radius: $alert-border-radius; // Border radius for alert style 1
$alert-style2-name: 'critical'; // Class name for alert style 2
$alert-style2-border-style: 1px solid #d50000; // Border style for alert style 2