Lightweight CSS Framework for Building Apps and Websites
https://crispy-css.com
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1116 lines
13 KiB
1116 lines
13 KiB
@charset "UTF-8";
|
|
|
|
/**
|
|
* functions: units
|
|
*
|
|
* convert px to em and rem
|
|
*
|
|
*
|
|
* @author Björn Hase
|
|
*
|
|
*/
|
|
|
|
/**
|
|
* to em, wrapper of toRelatives
|
|
*
|
|
* @param {mixed} $values
|
|
* @param {mixed} $base
|
|
* @return {rem}
|
|
*/
|
|
|
|
/**
|
|
* to rem, wrapper of toRelatives
|
|
*
|
|
* @param {mixed} $values
|
|
* @param {mixed} $base
|
|
* @return {rem}
|
|
*/
|
|
|
|
/**
|
|
* values to relative
|
|
*
|
|
* @param {mixed} $values
|
|
* @param {mixed} $unit
|
|
* @param {mixed} $base
|
|
* @return {number}
|
|
*/
|
|
|
|
/**
|
|
* to relative
|
|
*
|
|
* @param {mixed} $value
|
|
* @param {mixed} $base
|
|
* @return {number}
|
|
*/
|
|
|
|
/**
|
|
* strip unit from value
|
|
*
|
|
* @param {mixed} $value
|
|
* @return {number}
|
|
*/
|
|
|
|
/**
|
|
* function: z-index
|
|
*
|
|
* uses map $crispy__z-index to get value by key
|
|
*
|
|
* @author Björn Hase
|
|
*
|
|
*/
|
|
|
|
/**
|
|
* fonts
|
|
*
|
|
*
|
|
* @author Björn Hase
|
|
*
|
|
*/
|
|
|
|
/**
|
|
* add font-size in px as fallback and in rem
|
|
*
|
|
*
|
|
* @param {px} $font-size
|
|
*
|
|
*/
|
|
|
|
/**
|
|
* add font-sizes as modifactors
|
|
*
|
|
*
|
|
* @param {map} $font-sizes
|
|
*
|
|
*/
|
|
|
|
/**
|
|
* media-queries
|
|
*
|
|
*
|
|
* @author Björn Hase
|
|
*
|
|
*/
|
|
|
|
/**
|
|
* clearfix to end floating
|
|
*
|
|
*
|
|
*
|
|
*/
|
|
|
|
/**
|
|
* clear default styles from list
|
|
*
|
|
*
|
|
*/
|
|
|
|
/**
|
|
* config
|
|
*
|
|
*
|
|
* @author Björn Hase
|
|
*
|
|
*/
|
|
|
|
/**
|
|
* normalize
|
|
*
|
|
*
|
|
* @author Björn Hase
|
|
*
|
|
*/
|
|
|
|
/**
|
|
* components: button
|
|
*
|
|
*
|
|
* @author Björn Hase
|
|
*
|
|
*/
|
|
|
|
/**
|
|
* component: code
|
|
*
|
|
* <pre class="code">
|
|
* <code>
|
|
* //
|
|
* </code>
|
|
* </pre>
|
|
*
|
|
* @author Björn Hase
|
|
*
|
|
*/
|
|
|
|
/**
|
|
* component: group
|
|
*
|
|
* <nav class="group group--horizontal">
|
|
* <ul class="group__section">
|
|
* <li class="group__item"></li>
|
|
* <ul>
|
|
* </nav>
|
|
*
|
|
* @author Björn Hase
|
|
*
|
|
*/
|
|
|
|
/**
|
|
* component: heading
|
|
*
|
|
* create classes for heading similar to there name,
|
|
* run map for sizes on each heading
|
|
*
|
|
*
|
|
* @author Björn Hase
|
|
*
|
|
*/
|
|
|
|
/**
|
|
* component: hero
|
|
*
|
|
* background-size is as default: cover - Resize the background image to cover the entire container
|
|
* <div class="hero" style="width: value; height: value; background-image: url(path)"></div>
|
|
*
|
|
*
|
|
* @author Björn Hase
|
|
*
|
|
*/
|
|
|
|
/**
|
|
* component: modal
|
|
*
|
|
* <div class="modal">
|
|
*
|
|
* </div>
|
|
*
|
|
* @author Björn Hase
|
|
*
|
|
*/
|
|
|
|
/**
|
|
* component: panel
|
|
*
|
|
* <div class="panel">
|
|
* <div class="panel__inner">
|
|
*
|
|
* </div>
|
|
* </div>
|
|
*
|
|
* @author Björn Hase
|
|
*
|
|
*/
|
|
|
|
/**
|
|
* component: table
|
|
*
|
|
* <table class="table table--striped">
|
|
* <thead>
|
|
* <tr>
|
|
* <th>name</th>
|
|
* <th>age</th>
|
|
* </tr>
|
|
* </thead>
|
|
* <tbody>
|
|
* <tr>
|
|
* <td>The Shawshank Redemption</td>
|
|
* <td>12</td>
|
|
* </tr>
|
|
* </tbody>
|
|
* </table>
|
|
*
|
|
* @author Björn Hase
|
|
*
|
|
*/
|
|
|
|
/**
|
|
* component: checkbox
|
|
*
|
|
* <div class="field">
|
|
* <input id="" type="text" class="field__checkbox" />
|
|
* <label for="" class="field__label">
|
|
* <svg class="icon field__checkbox__checked" viewBox="0 0 100 100">
|
|
* <use src="#"></use>
|
|
* </svg>
|
|
* <svg class="icon field__checkbox__checked" viewBox="0 0 100 100">
|
|
* <use src="#"></use>
|
|
* </svg>
|
|
* </label>
|
|
* </div>
|
|
*
|
|
* @author Björn Hase
|
|
*
|
|
*/
|
|
|
|
/**
|
|
* component: label
|
|
*
|
|
* <label class="field">
|
|
*
|
|
* </label>
|
|
*
|
|
* @author Björn Hase
|
|
*
|
|
*/
|
|
|
|
/**
|
|
* component: panel
|
|
*
|
|
* <div class="field">
|
|
* <div class="field__panel">
|
|
* <ul>
|
|
* <li>item 1<li>
|
|
* </ul>
|
|
* </div>
|
|
* </div>
|
|
*
|
|
* @author Björn Hase
|
|
*
|
|
*/
|
|
|
|
/**
|
|
* component: text
|
|
*
|
|
* <div class="field">
|
|
* <label class="field__label">
|
|
* input
|
|
* <input type="text" class="field__text" />
|
|
* </label>
|
|
* </div>
|
|
*
|
|
* @author Björn Hase
|
|
*
|
|
*/
|
|
|
|
/**
|
|
* component: radio
|
|
*
|
|
* <div class="field">
|
|
* <input id="" type="text" class="field__radio" />
|
|
* <label for="" class="field__label">
|
|
* <i class="icon field__radio__checked">
|
|
*
|
|
* </i>
|
|
* <i class="icon field__radio__checked">
|
|
*
|
|
* </i>
|
|
* </label>
|
|
* </div>
|
|
*
|
|
* @author Björn Hase
|
|
*
|
|
*/
|
|
|
|
/**
|
|
* component: select
|
|
*
|
|
* <div class="field">
|
|
* <label class="field__label">
|
|
* <select class="field__select">
|
|
*
|
|
* </select>
|
|
* </label>
|
|
* </div>
|
|
*
|
|
* @author Björn Hase
|
|
*
|
|
*/
|
|
|
|
/**
|
|
* component: field
|
|
*
|
|
* <div class="field">
|
|
* <label class="field__label">
|
|
* text
|
|
* <input type="text" class="field__text" />
|
|
* <label>
|
|
* </div>
|
|
*
|
|
*
|
|
* @author Björn Hase
|
|
*
|
|
*/
|
|
|
|
/**
|
|
* helper: float
|
|
*
|
|
* float & centering
|
|
*
|
|
*
|
|
*
|
|
* @author Björn Hase
|
|
*
|
|
*/
|
|
|
|
/**
|
|
* helper: spacing
|
|
*
|
|
*
|
|
* @author Björn Hase
|
|
*
|
|
*/
|
|
|
|
/**
|
|
* helper: media
|
|
*
|
|
* for img & video
|
|
*
|
|
*
|
|
* @author Björn Hase
|
|
*
|
|
*/
|
|
|
|
/**
|
|
* helper: text
|
|
*
|
|
* align, font-sizes, color, background-color
|
|
*
|
|
*
|
|
* @author Björn Hase
|
|
*
|
|
*/
|
|
|
|
/**
|
|
* helper: visibility
|
|
*
|
|
*
|
|
* @author Björn Hase
|
|
*
|
|
*/
|
|
|
|
/**
|
|
* helper: width
|
|
*
|
|
*
|
|
* @author Björn Hase
|
|
*
|
|
*/
|
|
|
|
html {
|
|
font-size: 100%;
|
|
}
|
|
|
|
body,
|
|
html {
|
|
margin: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
html,
|
|
legend {
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
*,
|
|
*::after,
|
|
*::before {
|
|
-webkit-box-sizing: inherit;
|
|
box-sizing: inherit;
|
|
}
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
}
|
|
|
|
p {
|
|
margin: 0 0 0.0390625em 0;
|
|
}
|
|
|
|
a,
|
|
ins,
|
|
u {
|
|
-webkit-text-decoration-skip: ink edges;
|
|
text-decoration-skip: ink edges;
|
|
}
|
|
|
|
a {
|
|
color: #f0c209;
|
|
}
|
|
|
|
a:hover {
|
|
color: #ffffff;
|
|
}
|
|
|
|
a:focus {
|
|
outline: none;
|
|
}
|
|
|
|
abbr[title] {
|
|
border-bottom: 1px dotted;
|
|
cursor: help;
|
|
text-decoration: none;
|
|
}
|
|
|
|
mark {
|
|
padding: 0.3125em;
|
|
}
|
|
|
|
blockquote {
|
|
border-left: 1px solid #b3b2af;
|
|
margin-left: 0;
|
|
padding: 0.625em 1.25em;
|
|
}
|
|
|
|
blockquote p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
dl,
|
|
ol,
|
|
ul {
|
|
padding: 0;
|
|
margin: 0 0 0.0390625em 0.0390625em;
|
|
}
|
|
|
|
ol ol,
|
|
ul ul {
|
|
margin-top: 0.01953125em;
|
|
}
|
|
|
|
ol {
|
|
list-style: decimal outside;
|
|
}
|
|
|
|
ul {
|
|
list-style: disc outside;
|
|
}
|
|
|
|
dd,
|
|
dt {
|
|
margin: 0;
|
|
}
|
|
|
|
dt {
|
|
font-weight: bold;
|
|
}
|
|
|
|
figure {
|
|
margin: 0 0 0.0390625em;
|
|
}
|
|
|
|
figcaption {
|
|
margin: 0.0390625em 0 0;
|
|
}
|
|
|
|
hr {
|
|
border: 0;
|
|
border-top: 1px solid #b3b2af;
|
|
margin: 0.0390625em 0;
|
|
}
|
|
|
|
body {
|
|
font-family: Arial, Helvetica, Neue Helvetica, sans-serif;
|
|
font-weight: normal;
|
|
line-height: 1.618;
|
|
color: #363636;
|
|
background-color: #ffffff;
|
|
direction: ltr;
|
|
font-size: 16px;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.button {
|
|
position: relative;
|
|
display: inline-block;
|
|
text-decoration: none;
|
|
vertical-align: middle;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
padding: 0.625em 1.5625em;
|
|
}
|
|
|
|
.button--wide {
|
|
width: 100%;
|
|
}
|
|
|
|
.button--up,
|
|
.button--down {
|
|
position: fixed;
|
|
z-index: 100;
|
|
margin: 1.25em;
|
|
padding: 0.5em 0.8125em;
|
|
}
|
|
|
|
.button--down {
|
|
top: 0;
|
|
}
|
|
|
|
.button--up {
|
|
bottom: 0;
|
|
}
|
|
|
|
.button:hover {
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.button:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.field {
|
|
margin: 0 0 0.0390625em 0;
|
|
}
|
|
|
|
.field__input {
|
|
display: block;
|
|
width: 100%;
|
|
line-height: 1.618;
|
|
padding: 0.375em 0.5em;
|
|
color: #363636;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
font-size: 16px;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.group--horizontal .group__item,
|
|
.group--horizontal .group__section {
|
|
display: inline-block;
|
|
}
|
|
|
|
.group__section {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.group__section li {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.group__section--separate .group__item:after {
|
|
margin: 0 0.0390625em 0;
|
|
content: "/";
|
|
}
|
|
|
|
.group__section--separate .group__item:last-child:after {
|
|
display: none;
|
|
}
|
|
|
|
h1,
|
|
.h1,
|
|
h2,
|
|
.h2,
|
|
h3,
|
|
.h3,
|
|
h4,
|
|
.h4,
|
|
h5,
|
|
.h5,
|
|
h6,
|
|
.h6 {
|
|
font-family: Arial, Helvetica, Neue Helvetica, sans-serif;
|
|
font-weight: bold;
|
|
line-height: 1.618;
|
|
margin: 0 0 0.3125em;
|
|
}
|
|
|
|
h1,
|
|
.h1 {
|
|
font-size: 40px;
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
h2,
|
|
.h2 {
|
|
font-size: 36px;
|
|
font-size: 2.25rem;
|
|
}
|
|
|
|
h3,
|
|
.h3 {
|
|
font-size: 32px;
|
|
font-size: 2rem;
|
|
}
|
|
|
|
h4,
|
|
.h4 {
|
|
font-size: 28px;
|
|
font-size: 1.75rem;
|
|
}
|
|
|
|
h5,
|
|
.h5 {
|
|
font-size: 24px;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
h6,
|
|
.h6 {
|
|
font-size: 20px;
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.hero {
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
position: relative;
|
|
}
|
|
|
|
.hero--top {
|
|
background-position: top center;
|
|
}
|
|
|
|
.hero--bottom {
|
|
background-position: bottom center;
|
|
}
|
|
|
|
.hero--contain {
|
|
background-size: contain;
|
|
}
|
|
|
|
.modal {
|
|
position: absolute;
|
|
z-index: 100;
|
|
}
|
|
|
|
.modal--fixed {
|
|
position: fixed;
|
|
}
|
|
|
|
.modal--left {
|
|
left: 0;
|
|
}
|
|
|
|
.modal--top-center {
|
|
left: 50%;
|
|
}
|
|
|
|
.modal--top {
|
|
top: 0;
|
|
}
|
|
|
|
.modal--right {
|
|
right: 0;
|
|
}
|
|
|
|
.modal--bottom {
|
|
bottom: 0;
|
|
}
|
|
|
|
.modal .panel {
|
|
margin: 0.078125em;
|
|
}
|
|
|
|
.panel__inner {
|
|
padding: 0.0390625em;
|
|
}
|
|
|
|
.table {
|
|
width: 100%;
|
|
}
|
|
|
|
.table--striped tr:nth-child(even) {
|
|
background-color: whitesmoke;
|
|
}
|
|
|
|
.table--scroll {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.table td {
|
|
color: #363636;
|
|
}
|
|
|
|
.table td,
|
|
.table th {
|
|
padding: 0.625em 0.5em;
|
|
text-align: left;
|
|
border-bottom: 1px solid #9c9c9c;
|
|
}
|
|
|
|
.table th {
|
|
border-bottom-width: 2px;
|
|
}
|
|
|
|
.float-left {
|
|
float: left;
|
|
}
|
|
|
|
.float-right {
|
|
float: right;
|
|
}
|
|
|
|
.float-none {
|
|
float: none;
|
|
}
|
|
|
|
.center {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.clearfix::before,
|
|
.clearfix::after {
|
|
display: table;
|
|
content: ' ';
|
|
}
|
|
|
|
.clearfix::after {
|
|
clear: both;
|
|
}
|
|
|
|
.img-responsive {
|
|
display: block;
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.img-rounded {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.video-responsive {
|
|
display: block;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
.video-responsive iframe,
|
|
.video-responsive object,
|
|
.video-responsive embed {
|
|
border: 0;
|
|
bottom: 0;
|
|
height: 100%;
|
|
left: 0;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.margin-top-1x {
|
|
margin-top: 0em;
|
|
}
|
|
|
|
.margin-left-1x {
|
|
margin-left: 0em;
|
|
}
|
|
|
|
.margin-bottom-1x {
|
|
margin-bottom: 0em;
|
|
}
|
|
|
|
.margin-right-1x {
|
|
margin-right: 0em;
|
|
}
|
|
|
|
.padding-top-1x {
|
|
padding-top: 0em;
|
|
}
|
|
|
|
.padding-left-1x {
|
|
padding-left: 0em;
|
|
}
|
|
|
|
.padding-bottom-1x {
|
|
padding-bottom: 0em;
|
|
}
|
|
|
|
.padding-right-1x {
|
|
padding-right: 0em;
|
|
}
|
|
|
|
.margin-top-2x {
|
|
margin-top: 0.625em;
|
|
}
|
|
|
|
.margin-left-2x {
|
|
margin-left: 0.625em;
|
|
}
|
|
|
|
.margin-bottom-2x {
|
|
margin-bottom: 0.625em;
|
|
}
|
|
|
|
.margin-right-2x {
|
|
margin-right: 0.625em;
|
|
}
|
|
|
|
.padding-top-2x {
|
|
padding-top: 0.625em;
|
|
}
|
|
|
|
.padding-left-2x {
|
|
padding-left: 0.625em;
|
|
}
|
|
|
|
.padding-bottom-2x {
|
|
padding-bottom: 0.625em;
|
|
}
|
|
|
|
.padding-right-2x {
|
|
padding-right: 0.625em;
|
|
}
|
|
|
|
.margin-top-3x {
|
|
margin-top: 1.25em;
|
|
}
|
|
|
|
.margin-left-3x {
|
|
margin-left: 1.25em;
|
|
}
|
|
|
|
.margin-bottom-3x {
|
|
margin-bottom: 1.25em;
|
|
}
|
|
|
|
.margin-right-3x {
|
|
margin-right: 1.25em;
|
|
}
|
|
|
|
.padding-top-3x {
|
|
padding-top: 1.25em;
|
|
}
|
|
|
|
.padding-left-3x {
|
|
padding-left: 1.25em;
|
|
}
|
|
|
|
.padding-bottom-3x {
|
|
padding-bottom: 1.25em;
|
|
}
|
|
|
|
.padding-right-3x {
|
|
padding-right: 1.25em;
|
|
}
|
|
|
|
.margin-top-4x {
|
|
margin-top: 1.875em;
|
|
}
|
|
|
|
.margin-left-4x {
|
|
margin-left: 1.875em;
|
|
}
|
|
|
|
.margin-bottom-4x {
|
|
margin-bottom: 1.875em;
|
|
}
|
|
|
|
.margin-right-4x {
|
|
margin-right: 1.875em;
|
|
}
|
|
|
|
.padding-top-4x {
|
|
padding-top: 1.875em;
|
|
}
|
|
|
|
.padding-left-4x {
|
|
padding-left: 1.875em;
|
|
}
|
|
|
|
.padding-bottom-4x {
|
|
padding-bottom: 1.875em;
|
|
}
|
|
|
|
.padding-right-4x {
|
|
padding-right: 1.875em;
|
|
}
|
|
|
|
.margin-top-5x {
|
|
margin-top: 2.5em;
|
|
}
|
|
|
|
.margin-left-5x {
|
|
margin-left: 2.5em;
|
|
}
|
|
|
|
.margin-bottom-5x {
|
|
margin-bottom: 2.5em;
|
|
}
|
|
|
|
.margin-right-5x {
|
|
margin-right: 2.5em;
|
|
}
|
|
|
|
.padding-top-5x {
|
|
padding-top: 2.5em;
|
|
}
|
|
|
|
.padding-left-5x {
|
|
padding-left: 2.5em;
|
|
}
|
|
|
|
.padding-bottom-5x {
|
|
padding-bottom: 2.5em;
|
|
}
|
|
|
|
.padding-right-5x {
|
|
padding-right: 2.5em;
|
|
}
|
|
|
|
.margin-top-6x {
|
|
margin-top: 3.125em;
|
|
}
|
|
|
|
.margin-left-6x {
|
|
margin-left: 3.125em;
|
|
}
|
|
|
|
.margin-bottom-6x {
|
|
margin-bottom: 3.125em;
|
|
}
|
|
|
|
.margin-right-6x {
|
|
margin-right: 3.125em;
|
|
}
|
|
|
|
.padding-top-6x {
|
|
padding-top: 3.125em;
|
|
}
|
|
|
|
.padding-left-6x {
|
|
padding-left: 3.125em;
|
|
}
|
|
|
|
.padding-bottom-6x {
|
|
padding-bottom: 3.125em;
|
|
}
|
|
|
|
.padding-right-6x {
|
|
padding-right: 3.125em;
|
|
}
|
|
|
|
.text-left {
|
|
text-align: left;
|
|
}
|
|
|
|
.text-right {
|
|
text-align: right;
|
|
}
|
|
|
|
.text-center {
|
|
text-align: center;
|
|
}
|
|
|
|
.text-justify {
|
|
text-align: justify;
|
|
}
|
|
|
|
.text-italic {
|
|
font-style: italic;
|
|
}
|
|
|
|
.text-normal {
|
|
font-style: normal;
|
|
}
|
|
|
|
.text-bold {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.text-uppercase {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.text-lowercase {
|
|
text-transform: lowercase;
|
|
}
|
|
|
|
.text-small {
|
|
font-size: 80%;
|
|
}
|
|
|
|
.text-crossed {
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.text-default {
|
|
font-size: 16px;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.text-small {
|
|
font-size: 16px;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.text-large {
|
|
font-size: 20px;
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.text-primary {
|
|
color: #f0c209;
|
|
}
|
|
|
|
.text-secondary {
|
|
color: #b3b2af;
|
|
}
|
|
|
|
.text-success {
|
|
color: #5cb85c;
|
|
}
|
|
|
|
.text-warning {
|
|
color: #f0ad4e;
|
|
}
|
|
|
|
.text-danger {
|
|
color: #d9534f;
|
|
}
|
|
|
|
.text-info {
|
|
color: #0090d4;
|
|
}
|
|
|
|
.background-primary {
|
|
background-color: #f0c209;
|
|
}
|
|
|
|
.background-secondary {
|
|
background-color: #b3b2af;
|
|
}
|
|
|
|
.background-success {
|
|
background-color: #5cb85c;
|
|
}
|
|
|
|
.background-warning {
|
|
background-color: #f0ad4e;
|
|
}
|
|
|
|
.background-danger {
|
|
background-color: #d9534f;
|
|
}
|
|
|
|
.background-info {
|
|
background-color: #0090d4;
|
|
}
|
|
|
|
.hide {
|
|
display: none;
|
|
}
|
|
|
|
.show {
|
|
display: block;
|
|
}
|
|
|
|
.show--inline {
|
|
display: inline;
|
|
}
|
|
|
|
.width-25 {
|
|
width: 25%;
|
|
}
|
|
|
|
.width-50 {
|
|
width: 50%;
|
|
}
|
|
|
|
.width-75 {
|
|
width: 75%;
|
|
}
|
|
|
|
.width-100 {
|
|
width: 100%;
|
|
}
|
|
|