mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-06 22:06:30 +02:00
Code Issues Releases Wiki Activity

Alert documentation

Browse Source
This commit is contained in:
Angelos Chalaris
2016-11-26 15:21:37 +02:00
parent 2499afe53f
commit f409e24f27
6 changed files with 73 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
dist/mini-default.css vendored
View File

@@ -1402,6 +1402,19 @@ mark.inline-block {
line-height: 1.35;
padding: 5px; }
.alert.urgent {
background: #ffca28; }
.alert.critical {
background: #b71c1c;
color: #fafafa; }
.alert.urgent {
border: 1px solid #ff6f00; }
.alert.critical {
border: 1px solid #d50000; }
progress.inline {
display: inline-block;
vertical-align: middle;

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

@@ -561,3 +561,4 @@
- Updated transitions to use `-webkit-` prefix as needed.
- Added animated `alert`s on condition.
- Documented basic `mark` behavior and stuff.
- Basic documentation for `alert`s.

38
docs/v2/contextual.html
View File

@@ -185,29 +185,45 @@
</div>
<div class="section row">
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
<!-- sample -->
<div>
<div class="alert" style="margin-top: 8px; margin-bottom: 8px;"><h3>This is an alert</h3><p>Make sure you read this!</p></div>
<div class="alert urgent" style="margin-bottom: 8px;"><h3>This is an urgent alert</h3><p>Make absolutely sure you read this!</p></div>
<div class="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 replace modal dialogs, along with messages, notifications and traditional alerts with a simpler, easier design paradigm. To create an alert, use a <code>&lt;div&gt;</code> element, which will contain one or more elements (for example a <code>&lt;h3&gt;</code> and a <code>&lt;p&gt;</code>) and add the <code>.alert</code> class to it. For more urgent alerts, use the <code>.urgent</code> class and for critical alerts, use the <code>.critical</code> class.</p>
<h3>Sample code</h3>
<pre></pre>
<pre>&lt;div class=&quot;alert&quot;&gt;
&lt;h3&gt;This is an alert&lt;/h3&gt;
&lt;p&gt;Make sure you read this!&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;alert urgent&quot;&gt;
&lt;h3&gt;This is an urgent alert&lt;/h3&gt;
&lt;p&gt;Make absolutely sure you read this!&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;alert critical&quot;&gt;
&lt;h3&gt;This is a critical alert&lt;/h3&gt;
&lt;p&gt;Make certain you read and actually understand this!&lt;/p&gt;
&lt;/div&gt;</pre>
</div>
</div>
<div class="section">
<h3>Notes</h3>
<ul>
<li></li>
<li></li>
<li>Alert elements do not have any pre-defined behavior. You should use your own Javascript code and interactive HTML elements to deal with showing and hiding them as necessary.</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 class="col-sm-12 col-md-6">
<pre>&lt;p class=&quot;alert&quot;&gt;Short and to the point&lt;/p&gt;
<span class="fore-tertiary">&lt;!-- or --&gt;</span>
&lt;h2 class=&quot;alert urgent&quot;&gt;Large and to the point&lt;/h2&gt;</pre>
<p class="do"><mark class="tertiary">Do:</mark>&nbsp;Instead of using a <code>&lt;div&gt;</code> element, you can also apply the <code>.alert</code> class to common textual elements, such as paragraphs or headings.</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 class="col-sm-12 col-md-6 col-sm-last col-md-normal">
<pre>&lt;button class=&quot;alert&quot;&gt;Not a good alert&lt;/button&gt;</pre>
<p class="dont"><mark class="secondary">Don't:</mark>&nbsp;Avoid applying the <code>.alert</code> class to non-textual HTML elements, such as buttons or images. Doing so might result in unexpected behavior.</p>
</div>
</div>
</div>

16
docs/v2/demo.html
View File

@@ -136,6 +136,22 @@
<h3>This is an alert</h3>
<p>Alerts are important</p>
</div>
<br>
<p class="alert urgent">Hi</p>
<h2 class="alert critical">Loop</h2>
<a class="alert urgent">Hi</a>
<h2 class="alert critical">Loop</h2>
<br>
<div class="alert urgent">
<h3>This is an alert</h3>
<p>Alerts are important</p>
</div>
<br>
<div class="alert critical">
<h3>This is an alert</h3>
<p>Alerts are important</p>
</div>
<br>
<div class="alert animated">
<h3>This is an alert</h3>
<p>Alerts are important</p>

15
src/flavors/mini-default.scss
View File

@@ -398,6 +398,17 @@ $alert-box-shadow: // Box shadow for alerts
$alert-include-animated: true; // Should animated alerts be included?
// (`true`/`false`) [1]
$alert-animated-class: 'animated'; // Class name for animated alerts
$alert-variant1-name: 'urgent'; // Class name for alert variant 1
$alert-variant1-back-color: #ffca28; // Background color for alert variant 1
$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-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
$alert-style2-border-radius: $alert-border-radius; // Border radius for alert style 2
// Notes:
// [1] - If the value of $alert-include-animated is `true`, an animation will be created and the value of $alert-animated-class
// will be used to determine the class that will be used for animated alerts.
@@ -508,6 +519,10 @@ $center-block-name: 'center-block'; // Class name for center block
$mark-style1-border-radius, $mark-style1-padding);
@include make-mark-alt-style ($mark-style2-name, $mark-style2-border-style,
$mark-style2-border-radius, $mark-style2-padding, $mark-style2-font-size, $mark-style2-line-height);
@include make-alert-alt-color ($alert-variant1-name, $alert-variant1-back-color);
@include make-alert-alt-color ($alert-variant2-name, $alert-variant2-back-color, $alert-variant2-fore-color);
@include make-alert-alt-style ($alert-style1-name, $alert-style1-border-style, $alert-style1-border-radius);
@include make-alert-alt-style ($alert-style2-name, $alert-style2-border-style, $alert-style2-border-radius);
// Use mixins for progress elements and spinners
@include make-progress-inline ($progress-inline-name, $progress-inline-width);
@include make-progress-alt-color ($progress-variant1-name, $progress-variant1-fore-color);