✨ Contextual doc initial commit, browser support improvements, alert animations
This commit is contained in:
Angelos Chalaris
parent
24260f851f
commit
3344bfa03d
33
dist/mini-default.css
vendored
33
dist/mini-default.css
vendored
|
|
@ -135,6 +135,7 @@ a {
|
|||
color: #0277bd;
|
||||
text-decoration: underline;
|
||||
opacity: 1;
|
||||
-webkit-transition: all 0.3 ease 0s;
|
||||
transition: all 0.3s ease 0s; }
|
||||
a:visited {
|
||||
color: #01579b; }
|
||||
|
|
@ -684,6 +685,7 @@ button, [type="button"], [type="submit"], [type="reset"], a.button, label.button
|
|||
margin: 4px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||
text-decoration: none;
|
||||
-webkit-transition: all 0.3s ease 0s;
|
||||
transition: all 0.3s ease 0s;
|
||||
cursor: pointer; }
|
||||
button:hover, button:active, button:focus, [type="button"]:hover, [type="button"]:active, [type="button"]:focus, [type="submit"]:hover, [type="submit"]:active, [type="submit"]:focus, [type="reset"]:hover, [type="reset"]:active, [type="reset"]:focus, a.button:hover, a.button:active, a.button:focus, label.button:hover, label.button:active, label.button:focus, .button:hover, .button:active, .button:focus {
|
||||
|
|
@ -1017,6 +1019,7 @@ table.striped tr:nth-of-type(2n) > td {
|
|||
display: inline-block;
|
||||
height: 26px;
|
||||
cursor: pointer;
|
||||
-webkit-transition: background 0.3s ease 0s;
|
||||
transition: background 0.3s ease 0s;
|
||||
background: #cfd8dc;
|
||||
border: 1px solid #78909c;
|
||||
|
|
@ -1047,6 +1050,7 @@ table.striped tr:nth-of-type(2n) > td {
|
|||
transform: scaleY(0);
|
||||
-webkit-transform-origin: top;
|
||||
transform-origin: top;
|
||||
-webkit-transition: -webkit-transform 0.3s ease 0s, transform 0.3s ease 0s;
|
||||
transition: -webkit-transform 0.3s ease 0s, transform 0.3s ease 0s;
|
||||
border-bottom-left-radius: 2px;
|
||||
border-bottom-right-radius: 2px; }
|
||||
|
|
@ -1143,6 +1147,28 @@ mark {
|
|||
mark.inline-block {
|
||||
display: inline-block; }
|
||||
|
||||
@-webkit-keyframes alert-anim {
|
||||
0% {
|
||||
-webkit-transform: scale(1); }
|
||||
45% {
|
||||
-webkit-transform: scale(1); }
|
||||
50% {
|
||||
-webkit-transform: scale(1.005); }
|
||||
55% {
|
||||
-webkit-transform: scale(1); }
|
||||
100% {
|
||||
-webkit-transform: scale(1); } }
|
||||
@keyframes alert-anim {
|
||||
0% {
|
||||
transform: scale(1); }
|
||||
45% {
|
||||
transform: scale(1); }
|
||||
50% {
|
||||
transform: scale(1.005); }
|
||||
55% {
|
||||
transform: scale(1); }
|
||||
100% {
|
||||
transform: scale(1); } }
|
||||
.alert {
|
||||
display: block;
|
||||
background: #eeeeee;
|
||||
|
|
@ -1151,6 +1177,13 @@ mark {
|
|||
margin: 1px 10px;
|
||||
padding: 12px 16px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.26); }
|
||||
.alert.animated {
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-animation: alert-anim 6s linear infinite;
|
||||
animation: alert-anim 6s linear infinite; }
|
||||
|
||||
progress {
|
||||
display: block;
|
||||
|
|
|
|||
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
|
|
@ -558,3 +558,5 @@
|
|||
- Contextual testing in `playground`.
|
||||
- Updated `progress` module mixin to use `box-shadow` if available.
|
||||
- Removed `max-width: 100%` from the `alert` component as it was not needed due to `display: block;`.
|
||||
- Updated transitions to use `-webkit-` prefix as needed.
|
||||
- Added animated `alert`s on condition.
|
||||
|
|
|
|||
238
docs/v2/contextual.html
Normal file
238
docs/v2/contextual.html
Normal file
|
|
@ -0,0 +1,238 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<!-- Live demo styled as of 20161121 -->
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/7c12706dbe05ce5410f0f44dc0af75449fc6a6bc/dist/mini-default.min.css">
|
||||
<!-- Local stylesheet -->
|
||||
<link rel="stylesheet" href="../../dist/mini-default.min.css">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>mini.css - Contextual</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS toolkit">
|
||||
<meta name="keywords" content="mini, mini.css, CSS, framework, toolkit, minimal, responsive, style-agnostic, Sass, module, contextual">
|
||||
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
||||
<link rel="icon" type="image/png" href="favicon.png">
|
||||
<style>
|
||||
/* Classes and ids used in multiple pages - page top and utilities */
|
||||
#header-logo {
|
||||
display: inline; height: 28px; width: 28px; margin-top: 2px; background: #558b2f; border-radius: 1px;
|
||||
margin-left: -3px; padding: 2px;
|
||||
}
|
||||
#top-logo {
|
||||
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;
|
||||
background: #558b2f; padding: 8px; padding-top: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
||||
}
|
||||
#top-heading {
|
||||
color: #f5f5f5; font-size: 2.4em; text-shadow: 0 1px 2px rgba(0,0,0,0.35); margin-bottom: -8px;
|
||||
}
|
||||
#top-version-tag {
|
||||
padding: 4px 6px; font-size: 0.85em; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
||||
}
|
||||
.box-centered { text-align: center; }
|
||||
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
|
||||
.box-colored.red { background: #b71c1c; }
|
||||
.box-centered > .card.fluid {
|
||||
-webkit-box-pack: start;
|
||||
-webkit-box-align: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
justify-content: flex-start;
|
||||
-webkit-align-self: auto;
|
||||
align-self: auto;
|
||||
}
|
||||
[class^='col-'] .card.fluid { margin: 2px 0 20px; }
|
||||
/* Local classes and ids for this page */
|
||||
.fore-primary { color: #0d47a1; font-family: monospace, monospace; }
|
||||
.fore-secondary { color: #b71c1c; font-family: monospace, monospace; }
|
||||
.fore-tertiary { color: #1b5e20; font-family: monospace, monospace; }
|
||||
.col-sm-12.col-sm-last.col-md-4.col-md-normal {
|
||||
box-sizing: border-box;
|
||||
border-right: 1px solid #bdbdbd;
|
||||
}
|
||||
@media (max-width: 767px){
|
||||
.col-sm-12.col-sm-last.col-md-4.col-md-normal {
|
||||
border: 0;
|
||||
border-top: 1px solid #bdbdbd;
|
||||
}
|
||||
}
|
||||
.box-colored.green { background: #1b5e20; }
|
||||
.do {
|
||||
border-top: 15px solid #558b2f;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.dont {
|
||||
border-top: 15px solid #f44336;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.box-colored {
|
||||
color: #f5f5f5;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img class="logo" src="mini-logo.svg" id="header-logo"><div style="display: inline; overflow: auto;">
|
||||
<a href="index.html" class="button">Introduction</a>
|
||||
<a href="modules.html" class="button">Modules</a>
|
||||
<a href="flavors.html" class="button">Flavors</a>
|
||||
<a href="customization.html" class="button">Customization</a>
|
||||
<a href="https://github.com/Chalarangelo/mini.css" class="button">Github</a>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container" style="height: 320px; background: -webkit-linear-gradient(#455a64,#263238); background: linear-gradient(#455a64,#263238); box-shadow: 0 3px 9px rgba(0,0,0,0.26), 0 3px 6px rgba(0,0,0,0.35);">
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="box-centered">
|
||||
<img src="mini-logo.svg" id="top-logo">
|
||||
<h1 id="top-heading"><span style="font-size: 1.35em;">m</span>ini<span style="font-size:0.65em; color: #558b2f;">.css</span></h1>
|
||||
<mark class="tag tertiary" id="top-version-tag">v2.0</mark>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Insert your page content here-->
|
||||
<main><div class="container">
|
||||
<div class="row" style="padding-top: 40px;">
|
||||
<div class="col-sm">
|
||||
<h1>Contextual</h1>
|
||||
<p>The <strong>contextual</strong> module provides you with simple tags, marks and highlights for your pages, allowing you to easily emphasize parts of your text. The contextual alerts aim to replace the commonly used modal dialog design paradigm with a more modern one. HTML5 elements and simple rules are used in order to make important messages and pieces of content stand out easily.</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>Contextual</li></ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Quick overview</h2>
|
||||
<p>Almost every piece of content present on the web has some sort of content that needs highlighting in one way or another. The <strong>contextual</strong> module provides you with simple semantic text highlighting that utilises the <code><mark></code> HTML element. Apart from that, this module contains styles and definitions for a simple <code>.alert</code> container, that you can use to show alerts on your websites and web apps. Alerts replace the traditional design paradigms of modals, messages and alerts by defining a simple, usable container that is also mobile friendly. All components in this module are fully accessible, so that's another thing not to worry about.</p><br>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Quick start</h2>
|
||||
<p>To use the <strong>contextual</strong> module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <code><head></code> to utilize the viewport meta tag:</p><br>
|
||||
<pre><<span class="fore-tertiary">meta</span> <span class="fore-secondary">name</span>=<span class="fore-primary">"viewport"</span> <span class="fore-secondary">content</span>=<span class="fore-primary">"width=device-width, initial-scale=1"</span>></pre><br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Contextual text highlighting</h2>
|
||||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
||||
<!-- sample -->
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
|
||||
<p></p>
|
||||
<h3>Sample code</h3>
|
||||
<pre></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li></li>
|
||||
<li></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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Alerts</h2>
|
||||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
||||
<!-- sample -->
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
|
||||
<p></p>
|
||||
<h3>Sample code</h3>
|
||||
<pre></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li></li>
|
||||
<li></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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Animated Alerts</h2>
|
||||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
||||
<!-- sample -->
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
|
||||
<p></p>
|
||||
<h3>Sample code</h3>
|
||||
<pre></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li></li>
|
||||
<li></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>
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div></main>
|
||||
<!-- End of page content-->
|
||||
<footer><strong>mini.css</strong> was designed and built by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -136,6 +136,10 @@
|
|||
<h3>This is an alert</h3>
|
||||
<p>Alerts are important</p>
|
||||
</div>
|
||||
<div class="alert animated">
|
||||
<h3>This is an alert</h3>
|
||||
<p>Alerts are important</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
|
|
|||
|
|
@ -393,6 +393,12 @@ $alert-padding: 12px 16px; // Padding for alerts
|
|||
$alert-margin: 1px 10px; // Margin for alerts
|
||||
$alert-box-shadow: // Box shadow for alerts
|
||||
0 1px 3px rgba(0,0,0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.26);
|
||||
$alert-include-animated: true; // Should animated alerts be included?
|
||||
// (`true`/`false`) [1]
|
||||
$alert-animated-class: 'animated'; // Class name for animated alerts
|
||||
// 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.
|
||||
// Variables for progress elements and spinners
|
||||
$progress-back-color: #eeeeee; // Background color for <progress>
|
||||
$progress-fore-color: #01579b; // Progress bar color for <progress>
|
||||
|
|
|
|||
|
|
@ -73,8 +73,28 @@ mark {
|
|||
}
|
||||
}
|
||||
}
|
||||
// Default styling for alerts. Use mixins for alternate styles
|
||||
// Alert variables
|
||||
$alert-name: 'alert' !default; // Class name for the alerts
|
||||
$alert-include-animated: true !default; // Should animated alerts be included?
|
||||
$alert-animated-name: 'animated' !default; // Class name for animated alerts
|
||||
// Animation definition for animated alerts (included if wanted)
|
||||
@if $alert-include-animated {
|
||||
@-webkit-keyframes alert-anim {
|
||||
0% { -webkit-transform: scale(1); }
|
||||
45% { -webkit-transform: scale(1); }
|
||||
50% { -webkit-transform: scale(1.005);}
|
||||
55% { -webkit-transform: scale(1); }
|
||||
100% { -webkit-transform: scale(1); }
|
||||
}
|
||||
@keyframes alert-anim {
|
||||
0% { transform: scale(1); }
|
||||
45% { transform: scale(1); }
|
||||
50% { transform: scale(1.005);}
|
||||
55% { transform: scale(1); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
}
|
||||
// Default styling for alerts. Use mixins for alternate styles
|
||||
.#{$alert-name} {
|
||||
display: block;
|
||||
@if $alert-back-color != $back-color {
|
||||
|
|
@ -98,6 +118,18 @@ $alert-name: 'alert' !default; // Class name for the
|
|||
@if $alert-box-shadow != none {
|
||||
box-shadow: $alert-box-shadow;
|
||||
}
|
||||
@if $alert-include-animated {
|
||||
&.#{$alert-animated-name} {
|
||||
// Try to make the animated alert not blurry
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
// Apply the animation
|
||||
-webkit-animation: alert-anim 6s linear infinite;
|
||||
animation: alert-anim 6s linear infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Mixin for alternate alert (alert color variants).
|
||||
// Variables:
|
||||
|
|
|
|||
|
|
@ -350,6 +350,7 @@ a{
|
|||
}
|
||||
@if $apply-link-hover-fade {
|
||||
opacity: 1;
|
||||
-webkit-transition: all 0.3 ease 0s;
|
||||
transition: all 0.3s ease 0s;
|
||||
}
|
||||
&:visited {
|
||||
|
|
|
|||
|
|
@ -155,6 +155,7 @@ button, [type="button"], [type="submit"], [type="reset"], a.#{$button-class-name
|
|||
@if $apply-link-underline { // Override for links if underline is enabled.
|
||||
text-decoration: none;
|
||||
}
|
||||
-webkit-transition: all 0.3s ease 0s;
|
||||
transition: all 0.3s ease 0s;
|
||||
cursor: pointer;
|
||||
&:hover, &:active, &:focus {
|
||||
|
|
|
|||
|
|
@ -33,6 +33,7 @@ $tab-stacked-name: 'stacked' !default; // Class name for stacked tabs
|
|||
display: inline-block;
|
||||
height: $tab-label-height;
|
||||
cursor: pointer;
|
||||
-webkit-transition: background 0.3s ease 0s;
|
||||
transition: background 0.3s ease 0s;
|
||||
@if $tab-label-back-color != $back-color {
|
||||
background: $tab-label-back-color;
|
||||
|
|
@ -86,6 +87,8 @@ $tab-stacked-name: 'stacked' !default; // Class name for stacked tabs
|
|||
transform: scaleY(0);
|
||||
-webkit-transform-origin: top;
|
||||
transform-origin: top;
|
||||
-webkit-transition: -webkit-transform 0.3s ease 0s,
|
||||
transform 0.3s ease 0s;
|
||||
transition: -webkit-transform 0.3s ease 0s,
|
||||
transform 0.3s ease 0s;
|
||||
// Style for tab labels except the first
|
||||
|
|
|
|||
Loading…
Reference in a new issue