Add alert boxes template

parent 6181c1ed
......@@ -3,7 +3,7 @@ description: Politecnico Open unix Labs
url: https://www.poul.org
baseurl: ""
paginate_path: "events/page:num/"
paginate_path: "events/page/:num/"
permalink: /:year/:month/:title/
markdown: kramdown
......
<p class="alert alert-important" role="alert" markdown="span"><b>Note:</b> {{include.content}}</p>
<p class="alert alert-notice" role="alert" markdown="span"><b>Tip:</b> {{include.content}}</p>
<div class="alert alert-warning" role="alert"><div class="alert-icon"><i class="material-icons">warning</i></div><div class="alert-text" markdown="span"><b>Important:</b> {{include.content}}</div></div>
<div class="alert alert-danger" role="alert"><div class="alert-icon"><i class="material-icons">warning</i></div><div class="alert-text" markdown="span"><b>Warning:</b> {{include.content}}</div></div>
......@@ -378,6 +378,9 @@ COLOR VARIABLES
CONSISTENT SETTINGS
***************/
/***************
ALERTS
***************/
/***************
TYPE SETTINGS
***************/
/***************
......@@ -648,6 +651,43 @@ th {
.highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi {
color: #fff; }
.alert {
border: 0;
border-radius: 3px;
font-size: .875rem;
padding: 20px 15px;
line-height: 24px; }
.alert b {
font-weight: 700;
text-transform: uppercase;
font-size: 1em; }
.alert-default a, .alert-default .alert-link {
color: seagreen; }
.alert-important {
background-color: #d4e157;
color: black; }
.alert-notice {
background-color: #fdd835; }
.alert .alert-icon {
display: block;
float: left;
margin-right: 10px; }
.alert .alert-icon i {
margin-top: -7px;
top: 5px;
position: relative; }
.alert .close {
color: #fff;
text-shadow: none;
opacity: .9; }
.alert .close i {
font-size: 20px; }
.alert .close:hover, .alert .close:focus {
opacity: 1; }
.alert code.highlighter-rouge {
color: inherit;
background: rgba(0, 0, 0, 0.06); }
/***************
GLOBAL STYLES
***************/
......
......@@ -8,11 +8,11 @@ $aqua: #7FDBFF;
$blue: #0074D9;
$navy: #001F3F;
$teal: #39CCCC;
$green: #2ECC40;
$green: #d4e157;
$olive: #3D9970;
$lime: #01FF70;
// Warm
$yellow: #FFDC00;
$yellow: #fdd835;
$orange: #FF851B;
$red: #FF4136;
$fuchsia: #F012BE;
......@@ -34,7 +34,7 @@ $background-color: $primary-color;
$bad-color: $red; // Bad color for errors, validation etc.
$good-color: $green; // Good color for success etc.
$info-color: $blue; // Good color for success etc.
$warning-color: $orange; // Good color for success etc.
$warning-color: $yellow; // Good color for success etc.
$subtle-color: $grey; // Subtle color for subtle text
......@@ -47,6 +47,11 @@ $btn-br: 5px; // Button border-radius
$padding: 40px; // Padding and margins
$line-height: 44px; // Consistent height for buttons, inputs etc.
/***************
ALERTS
***************/
$margin-base: 10px;
/***************
TYPE SETTINGS
......@@ -54,3 +59,6 @@ TYPE SETTINGS
$sans-serif: "Open Sans", Helvetica, Arial, sans-serif;
$serif: "PT Serif", Georgia, Times, serif;
$font-weight-bold: 700;
$font-size-small: 1em;
@charset "UTF-8";
.alert {
border: 0;
border-radius: 3px;
font-size: .875rem;
padding: 20px 15px;
line-height: 24px;
//@include shadow-z-2();
b{
font-weight: $font-weight-bold;
text-transform: uppercase;
font-size: $font-size-small;
}
// SASS conversion note: please mirror any content change in _mixins-shared.scss alert-variations-content
//@include alert-variations(unquote(".alert"), unquote(""), $mdb-text-color-light);
//&-info, &-danger, &-warning, &-success {
// color: $mdb-text-color-light;
//}
&-default {
a, .alert-link {
color: $primary-color;
}
}
&-important {
background-color: $good-color;
color: black;
}
&-notice {
background-color: $warning-color;
}
.alert-icon{
display: block;
float: left;
margin-right: $margin-base;
i{
margin-top: -7px;
top: 5px;
position: relative;
}
}
.close{
color: $white;
text-shadow: none;
opacity: .9;
i{
font-size: 20px;
}
&:hover,
&:focus{
opacity: 1;
}
}
code.highlighter-rouge {
color: inherit;
background: rgba(0,0,0,.06);
}
}
......@@ -17,6 +17,7 @@
@import "modules/forms";
@import "modules/tables";
@import "modules/syntax";
@import "modules/alerts";
// Mobile up base styles
@import "breakpoints/mobileup";
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment