/**
* chl - Bootstrap 3 Based Admin Toolkit
* @version v0.1.1
* @author onokumus
*/
/* ==========================================================================
Base
========================================================================== */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800');
body,
html {
direction: ltr;
}
body {
font-family: 'Open Sans', sans-serif;
line-height: 1.5;
color: #373a3c;
background-color: #fff;
}
* {
outline-width: 0;
}
a {
color: #343a40;
}
a:focus,
a:hover {
color: #495057;
text-decoration: none;
}
/* ==========================================================================
LAYOUT
========================================================================== */
/**
* App
*
* Must only contain `.app-wrap` children.
*
* Example HTML:
*
*
*
*
*/
body > .ember-view,
.app {
position: absolute !important;
width: 100% !important;
display: -webkit-flex !important;
display: -ms-flexbox !important;
display: flex !important;
-webkit-flex-direction: row !important;
-ms-flex-direction: row !important;
flex-direction: row !important;
min-height: 100%;
}
/**
* app-wrap
*
* Children: .app-heading, .app-container, app-footer
*
* Example HTML:
*
*
*/
.app-wrap {
-webkit-flex: 1 1 0% !important;
-ms-flex: 1 1 0% !important;
flex: 1 1 0% !important;
/* 1 */
-webkit-flex-basis: 0% !important;
-ms-flex-preferred-size: 0% !important;
flex-basis: 0% !important;
/* 2 */
display: -webkit-flex !important;
display: -ms-flexbox !important;
display: flex !important;
-webkit-flex-direction: column !important;
-ms-flex-direction: column !important;
flex-direction: column !important;
min-height: 100vh;
position: relative;
}
/** Boxed Layout
========================================================================= */
/**
* Add bootstrap's default container class to app-wrap
*
...
*
*/
.app-wrap.container {
padding-left: 0;
padding-right: 0;
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.4);
}
.app-wrap.container .navbar.container > .navbar-header,
.app-wrap.container .navbar.container-fluid > .navbar-header,
.app-wrap.container .navbar.container > .navbar-collapse,
.app-wrap.container .navbar.container-fluid > .navbar-collapse {
margin-right: 0;
margin-left: 0;
}
@media (min-width: 768px) {
.app-wrap.container {
-webkit-flex: 0 0 750px !important;
-ms-flex: 0 0 750px !important;
flex: 0 0 750px !important;
}
}
@media (min-width: 992px) {
.app-wrap.container {
-webkit-flex: 0 0 970px !important;
-ms-flex: 0 0 970px !important;
flex: 0 0 970px !important;
}
}
@media (min-width: 1200px) {
.app-wrap.container {
-webkit-flex: 0 0 1170px !important;
-ms-flex: 0 0 1170px !important;
flex: 0 0 1170px !important;
}
}
/** .app-heading
========================================================================= */
.app-heading {
min-height: 60px;
position: relative;
z-index: 2;
}
/**
* .app-container
*
* Children: .app-side, .side-visible-line, .app-main
*
* Example HTML:
*
*
*/
.app-container {
display: -webkit-flex !important;
display: -ms-flexbox !important;
display: flex !important;
-webkit-flex: 1 1 auto !important;
-ms-flex: 1 1 auto !important;
flex: 1 1 auto !important;
-webkit-flex-basis: auto !important;
-ms-flex-preferred-size: auto !important;
flex-basis: auto !important;
-webkit-flex-direction: row !important;
-ms-flex-direction: row !important;
flex-direction: row !important;
position: relative;
}
.side-visible-line {
background: #fff;
border-right: 1px solid #e7e7e7;
padding: 5px 3px;
cursor: pointer;
}
.side-visible-line:hover {
background: #fafafa;
}
/**
*
* .app-main
*
* Children: .main-heading, .main-content, .main-footer
*
* Example HTML:
*
*
*
* Navigation, Breadcrumb, etc
*
*
* ...
*
*
*
* Cras justo odio
*
*
*/
.backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1030;
overflow: hidden;
-webkit-overflow-scrolling: touch;
outline: 0;
background: rgba(33, 33, 33, 0.48);
opacity: .5;
}
/* ==========================================================================
list-group-progress
========================================================================== */
/**
* Example HTML:
*
*
* -
* Cras justo odio
*
*
*
*
*/
.list-group-progress {
position: absolute;
top: 0;
bottom: 0;
left: 0;
display: block;
background-color: rgba(0, 0, 0, 0.06);
}
/* Side Nav & Top Nav general settings
========================================================================== */
/**
* fixed metismenu animate arrow icon
*/
.metismenu .active > a > .nav-tools .fa.arrow:before {
content: "\f107";
}
/* Top Nav nav-inline
========================================================================== */
.top-nav {
position: relative;
}
.top-nav.navbar-collapse {
padding-left: 0;
padding-right: 0;
}
.top-nav > .nav > li > .nav-sub {
border: 1px solid #e7e7e7;
background: #fff;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
@media (max-width: 767px) {
.top-nav .nav.nav-inline.collapse:not(.in) {
display: none;
}
.top-nav .nav.nav-inline > li {
display: block;
}
.top-nav .nav.nav-inline.is-center:not(.collapse),
.top-nav .nav.nav-inline.is-right:not(.collapse) {
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
}
/* Side Nav
========================================================================== */
.side-nav ul a.active {
color: #fff;
}
.side-nav ul ul a {
padding-left: 30px;
}
.side-nav a.active:before {
position: absolute;
content: '';
border-width: 10px;
border-style: solid;
border-color: transparent #fff transparent transparent;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.side-nav ul ul ul a {
padding-left: 40px;
}
.side-nav ul ul ul ul a {
padding-left: 50px;
}
.nav-tools {
float: right;
}
.side-nav .nav > li > .nav-sub {
position: relative;
top: auto;
left: auto;
}
/* App Side mini side-nav
========================================================================== */
/**
* 1. hiding nav-header & link-title
* 2. positioning elements
*/
@media (min-width: 768px) {
.app-side-opened.app-side-mini .app-side .side-nav > ul > li > a > .nav-icon {
padding-left: 5px;
}
.app-side-opened.app-side-mini .app-side .side-nav > ul > li > a > .nav-title {
padding-left: 25px;
}
.app-side-opened.app-side-mini .app-side .side-nav > ul > li > a > .nav-title,
.app-side-opened.app-side-mini .app-side .side-nav > ul > li > a > .nav-tools {
display: none;
}
.app-side-opened.app-side-mini.app-side-expand-on-hover .app-side:hover .side-nav > ul > li > a > .nav-title,
.app-side-opened.app-side-mini.app-side-expand-on-hover .app-side:hover .side-nav > ul > li > a > .nav-tools {
display: inline-block;
}
.app-side-opened.app-side-mini:not(.page-fixed):not(.app-side-expand-on-hover) .app-side .side-nav > ul > li.active > a,
.app-side-opened.app-side-mini:not(.page-fixed):not(.app-side-expand-on-hover) .app-side .side-nav > ul > li:hover > a {
min-width: 240px;
top: 0;
}
.app-side-opened.app-side-mini:not(.page-fixed):not(.app-side-expand-on-hover) .app-side .side-nav > ul > li.active > a .nav-title,
.app-side-opened.app-side-mini:not(.page-fixed):not(.app-side-expand-on-hover) .app-side .side-nav > ul > li:hover > a .nav-title,
.app-side-opened.app-side-mini:not(.page-fixed):not(.app-side-expand-on-hover) .app-side .side-nav > ul > li.active > a .nav-tools,
.app-side-opened.app-side-mini:not(.page-fixed):not(.app-side-expand-on-hover) .app-side .side-nav > ul > li:hover > a .nav-tools {
display: inline-block;
}
.app-side-opened.app-side-mini:not(.page-fixed):not(.app-side-expand-on-hover) .app-side .side-nav > ul > li > ul.collapsing,
.app-side-opened.app-side-mini:not(.page-fixed):not(.app-side-expand-on-hover) .app-side .side-nav > ul > li > ul.collapse,
.app-side-opened.app-side-mini:not(.page-fixed):not(.app-side-expand-on-hover) .app-side .side-nav > ul > li.active > ul.collapse.in {
position: absolute !important;
min-width: 180px;
left: 100%;
top: 100%;
}
}
/* ===================================================================
.navbar
================================================================ */
.navbar {
border: 0;
margin-bottom: 0;
}
/* .navbar-header
================================================================ */
.navbar-header {
width: 100%;
border: 0;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
min-height: 60px;
}
/* .navbar-header-left
================================================================ */
.navbar-header-left {
width: 60px;
}
@media (min-width: 768px) {
.navbar-header-left {
width: 240px;
}
}
/* .navbar-header-nav
================================================================ */
.navbar-header-nav {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.navbar-header-nav > li {
float: left;
}
.navbar-header-nav > li > a,
.navbar-header-nav > a {
padding: 20px 15px;
}
.navbar-header-nav > li > a > .label,
.navbar-header-nav > a > .label,
.navbar-header-nav > li > a > .badge,
.navbar-header-nav > a > .badge {
position: absolute;
top: 8px;
right: 5px;
}
.navbar-header-nav .media {
font-size: 12px;
padding: 10px 15px;
}
.navbar-header-nav .media-heading .pull-right {
margin-top: 3px;
}
.navbar-header-nav .media-body p {
margin: 0;
}
.navbar-form {
margin: 0;
padding: 13px;
}
.navbar-form .form-control {
width: 180px;
transition: width 0.3s ease-out;
border-radius: 30px;
padding-left: 25px;
}
.navbar-form .form-control:focus {
width: 300px;
font-weight: 600;
}
@media (max-width: 767px) {
.navbar-form {
padding: 10px 15px;
}
}
.navbar-default-left {
background: rgba(0, 0, 0, 0.04);
width: 60px;
}
.side-mini .navbar-default-left {
width: 60px;
}
.point {
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
top: 15px;
right: 15px;
}
.point .waves {
top: -150%;
left: -150%;
width: 400%;
height: 400%;
}
.profile-pic {
padding-top: 13px !important;
padding-bottom: 11px !important;
}
.profile-pic img {
width: 36px;
height: 36px;
border-radius: 50%;
}
/**
* LOGO general settings
=========================================================================== */
.logo {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row nowrap;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
overflow: hidden;
}
.logo,
.logo:hover,
.logo:focus {
text-decoration: none;
}
.logo img {
max-height: 60px;
max-width: 100%;
}
.logo .logo-xs,
.logo .logo-lg {
text-decoration: none;
-webkit-flex: 1 1 0% !important;
-ms-flex: 1 1 0% !important;
flex: 1 1 0% !important;
/* 1 */
-webkit-flex-basis: 0% !important;
-ms-flex-preferred-size: 0% !important;
flex-basis: 0% !important;
/* 2 */
}
.logo .logo-xs img {
max-width: 60px;
}
.logo .logo-text {
font-weight: 500;
color: #333;
font-size: 18px;
display: block;
border-radius: 3px;
margin: 5px;
text-align: center;
padding: 10px 5px;
}
/**
* app-side logo settings
*/
.app-side-mini .app-side .logo .logo-lg {
display: none;
}
.app-side-mini.app-side-expand-on-hover .app-side:hover .logo-lg {
display: block;
}
body:not(.app-side-mini) .app-side .logo .logo-xs {
display: none;
}
.app-side-mini.app-side-expand-on-hover .app-side:hover .logo-xs {
display: none;
}
/* ==========================================================================
Login
========================================================================== */
.app-login {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
min-width: 300px;
}
@media (min-width: 768px) {
.app-login {
min-width: 480px;
}
}
/* ==========================================================================
Todo
========================================================================== */
.todo-list {
padding: 0;
margin: 0;
list-style: none;
}
.todo-item {
display: block;
position: relative;
background: #ecf0f1;
padding: 5px;
}
.todo-item + .todo-item {
margin-top: 4px;
}
.todo-link,
.todo-link:hover,
.todo-link:focus {
text-decoration: none;
}
.todo-item.is-done .todo-title {
text-decoration: line-through;
color: #7f8c8d;
}
.todo-item .fa.fa-square-o {
color: #f39c12;
}
.todo-item .fa.fa-check-square {
color: #2ecc71;
}
/* draggable todo-item
================================================================ */
.todo-item.draggable {
padding-left: 15px;
}
/* orderable todo-item
================================================================ */
.todo-list.is-order {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.todo-list.is-order .todo-item.is-done {
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
}
/* ==========================================================================
Columns
========================================================================== */
@media (max-width: 767px) {
.columns {
-webkit-flex: 1 1 0%;
-ms-flex: 1 1 0%;
flex: 1 1 0%;
-webkit-flex-basis: 0%;
-ms-flex-preferred-size: 0%;
flex-basis: 0%;
}
.column.is-fixed {
position: fixed;
top: 0;
width: 240px;
height: 100%;
z-index: 1;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
transition: -webkit-transform 0.3s ease-out;
transition: transform 0.3s ease-out;
transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
}
.column.is-fixed.is-open {
position: absolute;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.column.is-flexible ~ .column.is-fixed {
-webkit-transform: translateX(100%);
transform: translateX(100%);
left: auto;
right: -240px;
transition: all 0.3s ease-out;
}
.column.is-flexible ~ .column.is-fixed.is-open {
right: 0;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@media (min-width: 768px) {
.columns {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 1 1 0%;
-ms-flex: 1 1 0%;
flex: 1 1 0%;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
overflow-y: auto;
position: relative;
}
.column {
overflow-y: auto;
-webkit-flex: 1 1 0%;
-ms-flex: 1 1 0%;
flex: 1 1 0%;
}
.column.is-fixed {
-webkit-flex: 0 0 240px;
-ms-flex: 0 0 240px;
flex: 0 0 240px;
}
}
/* ===================================================================
#totop
================================================================ */
#totop {
display: none;
z-index: 1000;
position: fixed;
width: 40px;
height: 40px;
background-color: #333;
background-color: rgba(0, 0, 0, 0.3);
font-size: 20px;
line-height: 36px;
text-align: center;
color: #fff;
top: auto;
left: auto;
right: 30px;
bottom: 30px;
cursor: pointer;
border-radius: 2px;
}
.page-fixed #totop {
display: block !important;
right: 5px;
bottom: 5px;
}
.page-fixed.main-fixed #totop {
display: none !important;
}
/* ===================================================================
Member
================================================================ */
.members {
padding: 0;
margin: 1em 0 0;
list-style: none;
}
.member {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
margin-bottom: 1em;
}
.member + .member {
padding-top: 1em;
border-top: 1px dashed #e0e0e0;
}
.member-media {
margin-right: 1em;
}
.member-media-link {
position: relative;
}
.member-media-link:focus,
.member-media-link:hover {
text-decoration: none;
}
.member-media-img {
max-width: 50px;
height: auto;
border-radius: 50%;
transition: all 0.3s ease-out;
}
.member-media-link:focus .member-media-img,
.member-media-link:hover .member-media-img {
opacity: 0.5;
}
.member-status {
position: absolute;
width: 20px;
height: 20px;
background: #bdc3c7;
border: 4px solid #ecf0f1;
border-radius: 50%;
top: -15px;
right: 0;
}
.member-status.is-active {
background: #2ecc71;
}
.member-info {
-webkit-flex: 1 1 0%;
-ms-flex: 1 1 0%;
flex: 1 1 0%;
-webkit-flex-basis: 0%;
-ms-flex-preferred-size: 0%;
flex-basis: 0%;
}
.member-info,
.member-info:last-child {
margin-bottom: 0;
}
.member-name {
display: block;
font-size: 14px;
color: #575757;
margin: 0.5em 0;
}
.member-skills {
display: block;
font-size: 14px;
color: #bdbdbd;
}
/* ===================================================================
Task
================================================================ */
.tasks {
padding: 0;
margin: 1em 0 0;
list-style: none;
}
.task {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
position: relative;
}
.task:before {
position: absolute;
content: '';
width: 0;
height: 100%;
border-left: 1px solid #e0e0e0;
left: 10px;
top: 1em;
}
.task:last-child:before {
height: 0;
}
.task + .task {
padding-top: 1em;
}
.task-media {
border-radius: 50%;
color: #fff;
width: 20px;
font-size: 12px;
height: 20px;
text-align: center;
line-height: 20px;
margin-right: 2em;
z-index: 1;
}
.task-info {
-webkit-flex: 1 1 0%;
-ms-flex: 1 1 0%;
flex: 1 1 0%;
-webkit-flex-basis: 0%;
-ms-flex-preferred-size: 0%;
flex-basis: 0%;
padding-bottom: 1em;
border-bottom: 1px solid #e0e0e0;
}
.task:last-child .task-info {
border-bottom-width: 0;
}
.task-info-link {
color: #333;
}
.task-info-link:focus,
.task-info-link:hover {
text-decoration: none;
border-bottom: 1px dashed #444;
color: #444;
}
.task-info-action {
color: #bdbdbd;
}
.task-info-time {
display: block;
color: #bdbdbd;
font-size: 12px;
margin-top: 1em;
}
/* metis-canvas
========================================================================= */
.canvas.is-fixed {
z-index: 1031;
}
/* Quill
========================================================================= */
.ql-tooltip.ql-editing {
z-index: 99999;
}
/* fullCalendar
========================================================================= */
.fc-state-default {
background-color: #ffffff;
background-image: none;
background-repeat: repeat-x;
box-shadow: none;
color: #333333;
text-shadow: none;
}
.fc-state-default {
border: 1px solid;
}
.fc-button {
color: inherit;
border: 1px solid #e7eaec;
cursor: pointer;
display: inline-block;
height: 1.9em;
line-height: 1.9em;
overflow: hidden;
padding: 0 0.6em;
position: relative;
white-space: nowrap;
}
.fc-state-active {
background-color: #337ab7;
border-color: #337ab7;
color: #fff;
}
.fc-header-title h2 {
font-size: 16px;
font-weight: 600;
color: inherit;
}
.fc-content .fc-widget-header,
.fc-content .fc-widget-content {
border-color: #e7eaec;
font-weight: normal;
}
.fc-border-separate tbody {
background-color: #f9f9f9;
}
.fc-state-highlight {
background: #FCF8E3;
}
.fc-ltr .fc-event-hori.fc-event-end,
.fc-rtl .fc-event-hori.fc-event-start {
border-radius: 2px;
}
.fc-event,
.fc-agenda .fc-event-time,
.fc-event a {
padding: 4px 6px;
}
.fc-event-time,
.fc-event-title {
color: #717171;
padding: 0 1px;
}
.ui-calendar .fc-event-time,
.ui-calendar .fc-event-title {
color: #fff;
}
[class*="bg-"].fc-event {
border-color: transparent;
}
#external-events .fc-event {
padding: 5px 10px;
border-radius: 2px;
cursor: pointer;
margin-bottom: 5px;
}
/* Dropzone
========================================================================== */
.dropzone {
border-style: dashed !important;
border-width: 1px !important;
}
/* select2
========================================================================== */
.select2-selection.select2-selection--single,
.select2-selection .select2-selection--multiple,
.select2-container--default .select2-selection--multiple {
border-radius: 0;
border-color: #ccc;
}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-selection--multiple .select2-selection__choice {
border: 1px solid #66afe9;
border-radius: 0;
}
/* insignia
========================================================================== */
.nsg-input {
outline: 0;
background-color: #fff;
border: 0;
color: #333;
}
.nsg-valid {
border: 1px solid #1abc9c;
background: #1abc9c;
color: #fff;
}
.nsg-invalid {
border: 1px solid #e74c3c;
background: #e74c3c;
color: #fff;
}
/* Quill
========================================================================== */
.ql-snow .ql-picker.ql-expanded .ql-picker-label,
.ql-snow .ql-picker.ql-expanded .ql-picker-options,
.ql-bubble .ql-picker.ql-expanded .ql-picker-label,
.ql-bubble .ql-picker.ql-expanded .ql-picker-options {
z-index: 3;
}
/* jqvmap
========================================================================== */
.jqvmap-zoomin,
.jqvmap-zoomout {
border-radius: 0;
background: #777;
width: 16px;
height: 16px;
line-height: 16px;
padding-top: 0;
}
/* flatpicr
========================================================================== */
.flatpickr-input {
background: #fff !important;
}
.flatpickr-input.active {
border-color: #66afe9;
}
/* loaders.css
========================================================================== */
.loaderContainer {
position: relative;
background: rgba(51, 51, 51, 0.5);
}
.loader {
position: absolute !important;
left: 50% !important;
top: 50% !important;
-webkit-transform: translate(-50%, -50%) !important;
transform: translate(-50%, -50%) !important;
}
/* tablesorter
========================================================================== */
.tablesorter-header-inner {
display: inline-block;
}
.tablesorter-header {
white-space: nowrap;
cursor: pointer;
font-weight: 700 !important;
outline-width: 0;
}
.tablesorter-header:after {
display: inline-block;
width: 0;
height: 0;
content: "";
margin-bottom: 2px;
margin-left: 15px;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
.tablesorter-headerAsc,
.tablesorter-headerDesc {
color: #3498db !important;
border-bottom-color: #3498db !important;
}
.tablesorter-headerAsc::after {
border-bottom: 4px solid;
}
.tablesorter-headerDesc::after {
border-top: 4px solid;
}
/** @define utilities */
/* Applies to flex container
========================================================================== */
/**
* Container
*/
.u-flex {
display: -webkit-flex !important;
display: -ms-flexbox !important;
display: flex !important;
}
.u-flexInline {
display: -webkit-inline-flex !important;
display: -ms-inline-flexbox !important;
display: inline-flex !important;
}
/**
* Direction: row
*/
.u-flexRow {
-webkit-flex-direction: row !important;
-ms-flex-direction: row !important;
flex-direction: row !important;
}
.u-flexRowReverse {
-webkit-flex-direction: row-reverse !important;
-ms-flex-direction: row-reverse !important;
flex-direction: row-reverse !important;
}
/**
* Direction: column
*/
.u-flexCol {
-webkit-flex-direction: column !important;
-ms-flex-direction: column !important;
flex-direction: column !important;
}
.u-flexColReverse {
-webkit-flex-direction: column-reverse !important;
-ms-flex-direction: column-reverse !important;
flex-direction: column-reverse !important;
}
/**
* Wrap
*/
.u-flexWrap {
-webkit-flex-wrap: wrap !important;
-ms-flex-wrap: wrap !important;
flex-wrap: wrap !important;
}
.u-flexNoWrap {
-webkit-flex-wrap: nowrap !important;
-ms-flex-wrap: nowrap !important;
flex-wrap: nowrap !important;
}
.u-flexWrapReverse {
-webkit-flex-wrap: wrap-reverse !important;
-ms-flex-wrap: wrap-reverse !important;
flex-wrap: wrap-reverse !important;
}
/**
* Align items along the main axis of the current line of the flex container
*/
.u-flexJustifyStart {
-webkit-justify-content: flex-start !important;
-ms-flex-pack: start !important;
justify-content: flex-start !important;
}
.u-flexJustifyEnd {
-webkit-justify-content: flex-end !important;
-ms-flex-pack: end !important;
justify-content: flex-end !important;
}
.u-flexJustifyCenter {
-webkit-justify-content: center !important;
-ms-flex-pack: center !important;
justify-content: center !important;
}
.u-flexJustifyBetween {
-webkit-justify-content: space-between !important;
-ms-flex-pack: justify !important;
justify-content: space-between !important;
}
.u-flexJustifyAround {
-webkit-justify-content: space-around !important;
-ms-flex-pack: distribute !important;
justify-content: space-around !important;
}
/**
* Align items in the cross axis of the current line of the flex container
* Similar to `justify-content` but in the perpendicular direction
*/
.u-flexAlignItemsStart {
-webkit-align-items: flex-start !important;
-ms-flex-align: start !important;
align-items: flex-start !important;
}
.u-flexAlignItemsEnd {
-webkit-align-items: flex-end !important;
-ms-flex-align: end !important;
align-items: flex-end !important;
}
.u-flexAlignItemsCenter {
-webkit-align-items: center !important;
-ms-flex-align: center !important;
align-items: center !important;
}
.u-flexAlignItemsStretch {
-webkit-align-items: stretch !important;
-ms-flex-align: stretch !important;
align-items: stretch !important;
}
.u-flexAlignItemsBaseline {
-webkit-align-items: baseline !important;
-ms-flex-align: baseline !important;
align-items: baseline !important;
}
/**
* Aligns items within the flex container when there is extra
* space in the cross-axis
*
* Has no effect when there is only one line of flex items.
*/
.u-flexAlignContentStart {
-webkit-align-content: flex-start !important;
-ms-flex-line-pack: start !important;
align-content: flex-start !important;
}
.u-flexAlignContentEnd {
-webkit-align-content: flex-end !important;
-ms-flex-line-pack: end !important;
align-content: flex-end !important;
}
.u-flexAlignContentCenter {
-webkit-align-content: center !important;
-ms-flex-line-pack: center !important;
align-content: center !important;
}
.u-flexAlignContentStretch {
-webkit-align-content: stretch !important;
-ms-flex-line-pack: stretch !important;
align-content: stretch !important;
}
.u-flexAlignContentBetween {
-webkit-align-content: space-between !important;
-ms-flex-line-pack: justify !important;
align-content: space-between !important;
}
.u-flexAlignContentAround {
-webkit-align-content: space-around !important;
-ms-flex-line-pack: distribute !important;
align-content: space-around !important;
}
/**
* 1. Set the flex-shrink default explicitly to fix IE10 - http://git.io/vllC7
*/
/* postcss-bem-linter: ignore */
.u-flex > *,
.u-flexInline > * {
-webkit-flex-shrink: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
/* 1 */
}
/* Applies to flex items
========================================================================== */
/**
* Override default alignment of single item when specified by `align-items`
*/
.u-flexAlignSelfStart {
-webkit-align-self: flex-start !important;
-ms-flex-item-align: start !important;
align-self: flex-start !important;
}
.u-flexAlignSelfEnd {
-webkit-align-self: flex-end !important;
-ms-flex-item-align: end !important;
align-self: flex-end !important;
}
.u-flexAlignSelfCenter {
-webkit-align-self: center !important;
-ms-flex-item-align: center !important;
-ms-grid-row-align: center !important;
align-self: center !important;
}
.u-flexAlignSelfStretch {
-webkit-align-self: stretch !important;
-ms-flex-item-align: stretch !important;
-ms-grid-row-align: stretch !important;
align-self: stretch !important;
}
.u-flexAlignSelfBaseline {
-webkit-align-self: baseline !important;
-ms-flex-item-align: baseline !important;
align-self: baseline !important;
}
.u-flexAlignSelfAuto {
-webkit-align-self: auto !important;
-ms-flex-item-align: auto !important;
-ms-grid-row-align: auto !important;
align-self: auto !important;
}
/**
* Change order without editing underlying HTML
*/
.u-flexOrderFirst {
-webkit-order: -1 !important;
-ms-flex-order: -1 !important;
order: -1 !important;
}
.u-flexOrderLast {
-webkit-order: 1 !important;
-ms-flex-order: 1 !important;
order: 1 !important;
}
.u-flexOrderNone {
-webkit-order: 0 !important;
-ms-flex-order: 0 !important;
order: 0 !important;
}
/**
* Specify the flex grow factor, which determines how much the flex item will
* grow relative to the rest of the flex items in the flex container.
*
* Supports 1-5 proportions
*
* 1. Provide all values to avoid IE10 bug with shorthand flex
* - http://git.io/vllC7
*
* Use `0%` to avoid bug in IE10/11 with unitless flex basis. Using this
* instead of `auto` as this matches what the default would be with `flex`
* shorthand - http://git.io/vllWx
*/
.u-flexGrow1 {
-webkit-flex: 1 1 0% !important;
-ms-flex: 1 1 0% !important;
flex: 1 1 0% !important;
/* 1 */
}
.u-flexGrow2 {
-webkit-flex: 2 1 0% !important;
-ms-flex: 2 1 0% !important;
flex: 2 1 0% !important;
}
.u-flexGrow3 {
-webkit-flex: 3 1 0% !important;
-ms-flex: 3 1 0% !important;
flex: 3 1 0% !important;
}
.u-flexGrow4 {
-webkit-flex: 4 1 0% !important;
-ms-flex: 4 1 0% !important;
flex: 4 1 0% !important;
}
.u-flexGrow5 {
-webkit-flex: 5 1 0% !important;
-ms-flex: 5 1 0% !important;
flex: 5 1 0% !important;
}
/**
* Aligning with `auto` margins
* http://www.w3.org/TR/css-flexbox-1/#auto-margins
*/
.u-flexExpand {
margin: auto !important;
}
.u-flexExpandLeft {
margin-left: auto !important;
}
.u-flexExpandRight {
margin-right: auto !important;
}
.u-flexExpandTop {
margin-top: auto !important;
}
.u-flexExpandBottom {
margin-bottom: auto !important;
}
/** https://github.com/suitcss/utils-flex/ */
/** https://github.com/suitcss/utils-size */
/* Proportional widths
========================================================================== */
/**
*
* 1. Use `flex-basis: auto` with a width to avoid box-sizing bug in IE10/11
* http://git.io/vllMD
*/
.col-xs-1,
.col-sm-1,
.col-md-1,
.col-lg-1,
.col-xs-2,
.col-sm-2,
.col-md-2,
.col-lg-2,
.col-xs-3,
.col-sm-3,
.col-md-3,
.col-lg-3,
.col-xs-4,
.col-sm-4,
.col-md-4,
.col-lg-4,
.col-xs-5,
.col-sm-5,
.col-md-5,
.col-lg-5,
.col-xs-6,
.col-sm-6,
.col-md-6,
.col-lg-6,
.col-xs-7,
.col-sm-7,
.col-md-7,
.col-lg-7,
.col-xs-8,
.col-sm-8,
.col-md-8,
.col-lg-8,
.col-xs-9,
.col-sm-9,
.col-md-9,
.col-lg-9,
.col-xs-10,
.col-sm-10,
.col-md-10,
.col-lg-10,
.col-xs-11,
.col-sm-11,
.col-md-11,
.col-lg-11,
.col-xs-12,
.col-sm-12,
.col-md-12,
.col-lg-12 {
-webkit-flex-basis: auto !important;
-ms-flex-preferred-size: auto !important;
flex-basis: auto !important;
/* 1 */
}
/* Intrinsic widths
========================================================================== */
/**
* Make an element shrink wrap its content.
*/
.u-sizeFit {
-webkit-flex-basis: auto !important;
-ms-flex-preferred-size: auto !important;
flex-basis: auto !important;
}
/**
* Make an element fill the remaining space.
*
* 1. Be explicit to work around IE10 bug with shorthand flex
* http://git.io/vllC7
* 2. IE10 ignores previous `flex-basis` value. Setting again here fixes
* http://git.io/vllMt
*/
.u-sizeFill {
-webkit-flex: 1 1 0% !important;
-ms-flex: 1 1 0% !important;
flex: 1 1 0% !important;
/* 1 */
-webkit-flex-basis: 0% !important;
-ms-flex-preferred-size: 0% !important;
flex-basis: 0% !important;
/* 2 */
}
/**
* An alternative method to make an element fill the remaining space.
* Distributes space based on the initial width and height of the element
*
* http://www.w3.org/TR/css-flexbox/images/rel-vs-abs-flex.svg
*/
.u-sizeFillAlt {
-webkit-flex: 1 1 auto !important;
-ms-flex: 1 1 auto !important;
flex: 1 1 auto !important;
-webkit-flex-basis: auto !important;
-ms-flex-preferred-size: auto !important;
flex-basis: auto !important;
}
.u-sizeFillAlt.form-control {
width: 1%;
}
/**
* Make an element the width of its parent.
*/
.u-sizeFull {
width: 100% !important;
}
/** https://github.com/suitcss/utils-position */
/** @define utilities */
.u-posFit,
.u-posAbsoluteCenter,
.u-posAbsolute {
position: absolute !important;
}
/**
* Element will be centered to its nearest relatively-positioned
* ancestor.
*/
.u-posFixedCenter,
.u-posAbsoluteCenter {
left: 50% !important;
top: 50% !important;
-webkit-transform: translate(-50%, -50%) !important;
transform: translate(-50%, -50%) !important;
}
.u-posFit,
.u-posFullScreen {
bottom: 0 !important;
left: 0 !important;
margin: auto !important;
right: 0 !important;
top: 0 !important;
}
/**
* 1. Make sure fixed elements are promoted into a new layer, for performance
* reasons.
*/
.u-posFullScreen,
.u-posFixedCenter,
.u-posFixed {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
/* 1 */
position: fixed !important;
}
.u-posRelative {
position: relative !important;
}
.u-posStatic {
position: static !important;
}
/** https://github.com/suitcss/utils-display */
/**
* @define utilities
* Display-type utilities
*/
.u-block {
display: block !important;
}
.u-hidden {
display: none !important;
}
/**
* Completely remove from the flow but leave available to screen readers.
*/
.u-hiddenVisually {
border: 0 !important;
clip: rect(1px, 1px, 1px, 1px) !important;
height: 1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
}
.u-inline {
display: inline !important;
}
/**
* 1. Fix for Firefox bug: an image styled `max-width:100%` within an
* inline-block will display at its default size, and not limit its width to
* 100% of an ancestral container.
*/
.u-inlineBlock {
display: inline-block !important;
max-width: 100%;
/* 1 */
}
.u-table {
display: table !important;
}
.u-tableCell {
display: table-cell !important;
}
.u-tableRow {
display: table-row !important;
}
/* Border
========================================================================= */
/* Border Base
Direction:
0 = none
a = all
t = top
r = right
b = bottom
l = left
h = x-axis (horizontal)
v = y-axis (vertical)
*/
.b-0 {
border: none !important;
}
.b-a {
border: 1px solid #e7e7e7 !important;
}
.b-t {
border-top: 1px solid #e7e7e7 !important;
}
.b-r {
border-right: 1px solid #e7e7e7 !important;
}
.b-b {
border-bottom: 1px solid #e7e7e7 !important;
}
.b-l {
border-left: 1px solid #e7e7e7 !important;
}
.b-h {
border-top: 1px solid #e7e7e7 !important;
border-bottom: 1px solid #e7e7e7 !important;
}
.b-v {
border-right: 1px solid #e7e7e7 !important;
border-left: 1px solid #e7e7e7 !important;
}
/*
Border Width
selector: .b-w-{modifier}
modifier: 1 ... 5 px
*/
.b-w-1 {
border-width: 1px !important;
}
.b-w-2 {
border-width: 2px !important;
}
.b-w-3 {
border-width: 3px !important;
}
.b-w-4 {
border-width: 4px !important;
}
.b-w-5 {
border-width: 5px !important;
}
/*
Border Radius
selector: .b-r-{modifier}
modifier: 1 ... 5 px
*/
.b-r-0 {
border-radius: 0 !important;
}
.b-r-1 {
border-radius: 1px !important;
}
.b-r-2 {
border-radius: 2px !important;
}
.b-r-3 {
border-radius: 3px !important;
}
.b-r-4 {
border-radius: 4px !important;
}
.b-r-5 {
border-radius: 5px !important;
}
/*
Border Styles
selector: .b-s-{modifier}
modifier: solid, dashed, dotted
*/
.b-s-solid {
border-style: solid !important;
}
.b-s-dashed {
border-style: dashed !important;
}
.b-s-dotted {
border-style: dotted !important;
}
/* Colors
========================================================================= */
/*
Background colors
selector: .bg-{modifier}
modifier: alizarin ... black (see var.less)
*/
.bg-transparent,
.bg-transparent:hover,
.bg-transparent:focus {
background-color: transparent !important;
}
.bg-turquoise {
background-color: #1abc9c !important;
color: #fff;
}
a.bg-turquoise:hover,
a.bg-turquoise:focus {
text-decoration: none;
background-color: #17a689 !important;
}
.bg-emerland {
background-color: #2ecc71 !important;
color: #fff;
}
a.bg-emerland:hover,
a.bg-emerland:focus {
text-decoration: none;
background-color: #29b765 !important;
}
.bg-peter-river {
background-color: #3498db !important;
color: #fff;
}
a.bg-peter-river:hover,
a.bg-peter-river:focus {
text-decoration: none;
background-color: #258cd1 !important;
}
.bg-amethyst {
background-color: #9b59b6 !important;
color: #fff;
}
a.bg-amethyst:hover,
a.bg-amethyst:focus {
text-decoration: none;
background-color: #8f4bab !important;
}
.bg-wet-asphalt {
background-color: #34495e !important;
color: #fff;
}
a.bg-wet-asphalt:hover,
a.bg-wet-asphalt:focus {
text-decoration: none;
background-color: #2b3c4e !important;
}
.bg-green-sea {
background-color: #16a085 !important;
color: #fff;
}
a.bg-green-sea:hover,
a.bg-green-sea:focus {
text-decoration: none;
background-color: #138a72 !important;
}
.bg-nephritis {
background-color: #27ae60 !important;
color: #fff;
}
a.bg-nephritis:hover,
a.bg-nephritis:focus {
text-decoration: none;
background-color: #229955 !important;
}
.bg-belize-hole {
background-color: #2980b9 !important;
color: #fff;
}
a.bg-belize-hole:hover,
a.bg-belize-hole:focus {
text-decoration: none;
background-color: #2472a4 !important;
}
.bg-wisteria {
background-color: #8e44ad !important;
color: #fff;
}
a.bg-wisteria:hover,
a.bg-wisteria:focus {
text-decoration: none;
background-color: #7f3d9b !important;
}
.bg-midnight-blue {
background-color: #2c3e50 !important;
color: #fff;
}
a.bg-midnight-blue:hover,
a.bg-midnight-blue:focus {
text-decoration: none;
background-color: #233140 !important;
}
.bg-sun-flower {
background-color: #f1c40f !important;
color: #fff;
}
a.bg-sun-flower:hover,
a.bg-sun-flower:focus {
text-decoration: none;
background-color: #dab10d !important;
}
.bg-carrot {
background-color: #e67e22 !important;
color: #fff;
}
a.bg-carrot:hover,
a.bg-carrot:focus {
text-decoration: none;
background-color: #d67118 !important;
}
.bg-alizarin {
background-color: #e74c3c !important;
color: #fff;
}
a.bg-alizarin:hover,
a.bg-alizarin:focus {
text-decoration: none;
background-color: #e43725 !important;
}
.bg-clouds {
background-color: #ecf0f1 !important;
color: #333;
}
a.bg-clouds:hover,
a.bg-clouds:focus {
text-decoration: none;
background-color: #dde4e6 !important;
}
.bg-concrete {
background-color: #95a5a6 !important;
color: #333;
}
a.bg-concrete:hover,
a.bg-concrete:focus {
text-decoration: none;
background-color: #87999a !important;
}
.bg-orange {
background-color: #f39c12 !important;
color: #fff;
}
a.bg-orange:hover,
a.bg-orange:focus {
text-decoration: none;
background-color: #e08e0b !important;
}
.bg-pumpkin {
background-color: #d35400 !important;
color: #fff;
}
a.bg-pumpkin:hover,
a.bg-pumpkin:focus {
text-decoration: none;
background-color: #ba4a00 !important;
}
.bg-pomegranate {
background-color: #c0392b !important;
color: #fff;
}
a.bg-pomegranate:hover,
a.bg-pomegranate:focus {
text-decoration: none;
background-color: #ab3326 !important;
}
.bg-silver {
background-color: #bdc3c7 !important;
color: #333;
}
a.bg-silver:hover,
a.bg-silver:focus {
text-decoration: none;
background-color: #afb6bb !important;
}
.bg-asbestos {
background-color: #7f8c8d !important;
color: #fff;
}
a.bg-asbestos:hover,
a.bg-asbestos:focus {
text-decoration: none;
background-color: #727f80 !important;
}
.bg-white {
background-color: #fff !important;
color: #333;
}
a.bg-white:hover,
a.bg-white:focus {
text-decoration: none;
background-color: #f2f2f2 !important;
}
.bg-black {
background-color: #333 !important;
color: #fff;
}
a.bg-black:hover,
a.bg-black:focus {
text-decoration: none;
background-color: #262626 !important;
}
/*
Text colors
selector: .text-{modifier}
modifier: alizarin ... black (see var.less)
*/
.text-turquoise {
color: #1abc9c !important;
}
a.text-turquoise:hover,
a.text-turquoise:focus {
color: #148f77 !important;
}
.text-emerland {
color: #2ecc71 !important;
}
a.text-emerland:hover,
a.text-emerland:focus {
color: #25a25a !important;
}
.text-peter-river {
color: #3498db !important;
}
a.text-peter-river:hover,
a.text-peter-river:focus {
color: #217dbb !important;
}
.text-amethyst {
color: #9b59b6 !important;
}
a.text-amethyst:hover,
a.text-amethyst:focus {
color: #804399 !important;
}
.text-wet-asphalt {
color: #34495e !important;
}
a.text-wet-asphalt:hover,
a.text-wet-asphalt:focus {
color: #222f3d !important;
}
.text-green-sea {
color: #16a085 !important;
}
a.text-green-sea:hover,
a.text-green-sea:focus {
color: #107360 !important;
}
.text-nephritis {
color: #27ae60 !important;
}
a.text-nephritis:hover,
a.text-nephritis:focus {
color: #1e8449 !important;
}
.text-belize-hole {
color: #2980b9 !important;
}
a.text-belize-hole:hover,
a.text-belize-hole:focus {
color: #20638f !important;
}
.text-wisteria {
color: #8e44ad !important;
}
a.text-wisteria:hover,
a.text-wisteria:focus {
color: #703688 !important;
}
.text-midnight-blue {
color: #2c3e50 !important;
}
a.text-midnight-blue:hover,
a.text-midnight-blue:focus {
color: #1a242f !important;
}
.text-sun-flower {
color: #f1c40f !important;
}
a.text-sun-flower:hover,
a.text-sun-flower:focus {
color: #c29d0b !important;
}
.text-carrot {
color: #e67e22 !important;
}
a.text-carrot:hover,
a.text-carrot:focus {
color: #bf6516 !important;
}
.text-alizarin {
color: #e74c3c !important;
}
a.text-alizarin:hover,
a.text-alizarin:focus {
color: #d62c1a !important;
}
.text-clouds {
color: #ecf0f1 !important;
}
a.text-clouds:hover,
a.text-clouds:focus {
color: #cfd9db !important;
}
.text-concrete {
color: #95a5a6 !important;
}
a.text-concrete:hover,
a.text-concrete:focus {
color: #798d8f !important;
}
.text-orange {
color: #f39c12 !important;
}
a.text-orange:hover,
a.text-orange:focus {
color: #c87f0a !important;
}
.text-pumpkin {
color: #d35400 !important;
}
a.text-pumpkin:hover,
a.text-pumpkin:focus {
color: #a04000 !important;
}
.text-pomegranate {
color: #c0392b !important;
}
a.text-pomegranate:hover,
a.text-pomegranate:focus {
color: #962d22 !important;
}
.text-silver {
color: #bdc3c7 !important;
}
a.text-silver:hover,
a.text-silver:focus {
color: #a1aab0 !important;
}
.text-asbestos {
color: #7f8c8d !important;
}
a.text-asbestos:hover,
a.text-asbestos:focus {
color: #667273 !important;
}
.text-white {
color: #fff !important;
}
a.text-white:hover,
a.text-white:focus {
color: #e6e6e6 !important;
}
.text-black {
color: #333 !important;
}
a.text-black:hover,
a.text-black:focus {
color: #1a1a1a !important;
}
/*
Border Color
selector: .b-{modifier}
modifier: turquoise ... black
*/
.b-turquoise {
border-color: #1abc9c !important;
}
.b-emerland {
border-color: #2ecc71 !important;
}
.b-peter-river {
border-color: #3498db !important;
}
.b-amethyst {
border-color: #9b59b6 !important;
}
.b-wet-asphalt {
border-color: #34495e !important;
}
.b-green-sea {
border-color: #16a085 !important;
}
.b-nephritis {
border-color: #27ae60 !important;
}
.b-belize-hole {
border-color: #2980b9 !important;
}
.b-wisteria {
border-color: #8e44ad !important;
}
.b-midnight-blue {
border-color: #2c3e50 !important;
}
.b-sun-flower {
border-color: #f1c40f !important;
}
.b-carrot {
border-color: #e67e22 !important;
}
.b-alizarin {
border-color: #e74c3c !important;
}
.b-clouds {
border-color: #ecf0f1 !important;
}
.b-concrete {
border-color: #95a5a6 !important;
}
.b-orange {
border-color: #f39c12 !important;
}
.b-pumpkin {
border-color: #d35400 !important;
}
.b-pomegranate {
border-color: #c0392b !important;
}
.b-silver {
border-color: #bdc3c7 !important;
}
.b-asbestos {
border-color: #7f8c8d !important;
}
.b-white {
border-color: #fff !important;
}
.b-black {
border-color: #333 !important;
}
/* Font
========================================================================== */
/*
Font weight
.f-{modifier}
modifier: n=normal, b=bold, 300,400,600,700,800
*/
.f-n {
font-weight: normal;
}
.f-b {
font-weight: bold;
}
.f-300 {
font-weight: 300;
}
.f-400 {
/* alias: .f-n */
font-weight: 400;
}
.f-600 {
font-weight: 600;
}
.f-700 {
font-weight: 700;
}
.f-800 {
font-weight: 800;
}
/*
Font size
.f-{modifier}
modifier: 1 ... 5
*/
.f-1,
.f-2,
.f-3,
.f-4,
.f-5 {
font-weight: 300;
}
.f-1 {
font-size: 96px;
}
.f-2 {
font-size: 88px;
}
.f-3 {
font-size: 72px;
}
.f-4 {
font-size: 56px;
}
.f-5 {
font-size: 40px;
}
/* ==========================================================================
Width & Height
========================================================================== */
/* Absolute Width
========================================================================== */
.w-xs {
width: 200px;
}
.w-sm {
width: 300px;
}
.w-md {
width: 400px;
}
.w-lg {
width: 480px;
}
.w-xl {
width: 600px;
}
/* Absolute Height
========================================================================== */
.h-xs {
height: 150px;
}
.h-sm {
height: 225px;
}
.h-md {
height: 300px;
}
.h-lg {
height: 360px;
}
.h-xl {
height: 450px;
}
/* Flexible Width
========================================================================== */
.max-w-xs {
max-width: 200px;
}
.max-w-sm {
max-width: 300px;
}
.max-w-md {
max-width: 400px;
}
.max-w-lg {
max-width: 480px;
}
.max-w-xl {
max-width: 600px;
}
/* Flexible Height
========================================================================== */
.max-h-xs {
max-height: 150px;
}
.max-h-sm {
max-height: 225px;
}
.max-h-md {
max-height: 300px;
}
.max-h-lg {
max-height: 360px;
}
.max-h-xl {
max-height: 450px;
}
/* Scrollable element
========================================================================== */
.scr-a-a {
overflow: auto;
}
.scr-x-a {
overflow-x: auto;
}
.scr-y-a {
overflow-y: auto;
}
.scr-a-v {
overflow: visible;
}
.scr-x-v {
overflow-x: visible;
}
.scr-y-v {
overflow-y: visible;
}
.scr-a-h {
overflow: hidden;
}
.scr-x-h {
overflow-x: hidden;
}
.scr-y-h {
overflow-y: hidden;
}
.scr-a-s {
overflow: scroll;
}
.scr-h-s {
overflow-x: scroll;
}
.scr-y-s {
overflow-y: scroll;
}
/* Scrollbar (only webkit based browsers: chrome, chromium, yandex, etc)
========================================================================== */
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-thumb {
background: #999;
cursor: -webkit-grab;
cursor: grab;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
::-webkit-scrollbar-thumb:active {
background: #333;
}
/* Material Shadow
*
* https://github.com/mrmlnc/material-shadows
========================================================================== */
/*
box-shadow reset
*/
.no-shadow,
.no-shadow:hover,
.no-shadow:active,
.no-shadow:focus,
.no-shadow.active {
box-shadow: none !important;
}
.shadow-2dp {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
.shadow-3dp {
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 1px 8px 0 rgba(0, 0, 0, 0.12), 0 3px 3px -2px rgba(0, 0, 0, 0.4);
}
.shadow-4dp {
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.4);
}
.shadow-6dp {
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.4);
}
.shadow-8dp {
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.4);
}
.shadow-16dp {
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.4);
}
.shadow-24dp {
box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 24px 38px 3px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.4);
}
/* Margins & Paddings
========================================================================= */
/*
* selector: .{m=margin | p=padding}-{direction}-{modifier}
* directions:
* a = all
* t = top
* r = right
* b = bottom
* l = left
* h = horizontal (x-axis)
* v = vertical (y-axis)
* modifier:
* a = all
* 0 = none
* 5 ... 50 px
*
*
*/
.m-a-a {
margin: auto;
}
.m-t-a {
margin-top: auto;
}
.m-r-a {
margin-right: auto;
}
.m-b-a {
margin-bottom: auto;
}
.m-l-a {
margin-left: auto;
}
.m-h-a {
margin-right: auto;
margin-left: auto;
}
.m-v-a {
margin-top: auto;
margin-bottom: auto;
}
.m-a-0 {
margin: 0px !important;
}
.m-t-0 {
margin-top: 0px !important;
}
.m-r-0 {
margin-right: 0px !important;
}
.m-b-0 {
margin-bottom: 0px !important;
}
.m-l-0 {
margin-left: 0px !important;
}
.m-h-0 {
margin-right: 0px !important;
margin-left: 0px !important;
}
.m-v-0 {
margin-top: 0px !important;
margin-bottom: 0px !important;
}
.p-a-0 {
padding: 0px !important;
}
.p-t-0 {
padding-top: 0px !important;
}
.p-r-0 {
padding-right: 0px !important;
}
.p-b-0 {
padding-bottom: 0px !important;
}
.p-l-0 {
padding-left: 0px !important;
}
.p-h-0 {
padding-right: 0px !important;
padding-left: 0px !important;
}
.p-v-0 {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
.m-a-5 {
margin: 5px !important;
}
.m-t-5 {
margin-top: 5px !important;
}
.m-r-5 {
margin-right: 5px !important;
}
.m-b-5 {
margin-bottom: 5px !important;
}
.m-l-5 {
margin-left: 5px !important;
}
.m-h-5 {
margin-right: 5px !important;
margin-left: 5px !important;
}
.m-v-5 {
margin-top: 5px !important;
margin-bottom: 5px !important;
}
.p-a-5 {
padding: 5px !important;
}
.p-t-5 {
padding-top: 5px !important;
}
.p-r-5 {
padding-right: 5px !important;
}
.p-b-5 {
padding-bottom: 5px !important;
}
.p-l-5 {
padding-left: 5px !important;
}
.p-h-5 {
padding-right: 5px !important;
padding-left: 5px !important;
}
.p-v-5 {
padding-top: 5px !important;
padding-bottom: 5px !important;
}
.m-a-10 {
margin: 10px !important;
}
.m-t-10 {
margin-top: 10px !important;
}
.m-r-10 {
margin-right: 10px !important;
}
.m-b-10 {
margin-bottom: 10px !important;
}
.m-l-10 {
margin-left: 10px !important;
}
.m-h-10 {
margin-right: 10px !important;
margin-left: 10px !important;
}
.m-v-10 {
margin-top: 10px !important;
margin-bottom: 10px !important;
}
.p-a-10 {
padding: 10px !important;
}
.p-t-10 {
padding-top: 10px !important;
}
.p-r-10 {
padding-right: 10px !important;
}
.p-b-10 {
padding-bottom: 10px !important;
}
.p-l-10 {
padding-left: 10px !important;
}
.p-h-10 {
padding-right: 10px !important;
padding-left: 10px !important;
}
.p-v-10 {
padding-top: 10px !important;
padding-bottom: 10px !important;
}
.m-a-15 {
margin: 15px !important;
}
.m-t-15 {
margin-top: 15px !important;
}
.m-r-15 {
margin-right: 15px !important;
}
.m-b-15 {
margin-bottom: 15px !important;
}
.m-l-15 {
margin-left: 15px !important;
}
.m-h-15 {
margin-right: 15px !important;
margin-left: 15px !important;
}
.m-v-15 {
margin-top: 15px !important;
margin-bottom: 15px !important;
}
.p-a-15 {
padding: 15px !important;
}
.p-t-15 {
padding-top: 15px !important;
}
.p-r-15 {
padding-right: 15px !important;
}
.p-b-15 {
padding-bottom: 15px !important;
}
.p-l-15 {
padding-left: 15px !important;
}
.p-h-15 {
padding-right: 15px !important;
padding-left: 15px !important;
}
.p-v-15 {
padding-top: 15px !important;
padding-bottom: 15px !important;
}
.m-a-20 {
margin: 20px !important;
}
.m-t-20 {
margin-top: 20px !important;
}
.m-r-20 {
margin-right: 20px !important;
}
.m-b-20 {
margin-bottom: 20px !important;
}
.m-l-20 {
margin-left: 20px !important;
}
.m-h-20 {
margin-right: 20px !important;
margin-left: 20px !important;
}
.m-v-20 {
margin-top: 20px !important;
margin-bottom: 20px !important;
}
.p-a-20 {
padding: 20px !important;
}
.p-t-20 {
padding-top: 20px !important;
}
.p-r-20 {
padding-right: 20px !important;
}
.p-b-20 {
padding-bottom: 20px !important;
}
.p-l-20 {
padding-left: 20px !important;
}
.p-h-20 {
padding-right: 20px !important;
padding-left: 20px !important;
}
.p-v-20 {
padding-top: 20px !important;
padding-bottom: 20px !important;
}
.m-a-25 {
margin: 25px !important;
}
.m-t-25 {
margin-top: 25px !important;
}
.m-r-25 {
margin-right: 25px !important;
}
.m-b-25 {
margin-bottom: 25px !important;
}
.m-l-25 {
margin-left: 25px !important;
}
.m-h-25 {
margin-right: 25px !important;
margin-left: 25px !important;
}
.m-v-25 {
margin-top: 25px !important;
margin-bottom: 25px !important;
}
.p-a-25 {
padding: 25px !important;
}
.p-t-25 {
padding-top: 25px !important;
}
.p-r-25 {
padding-right: 25px !important;
}
.p-b-25 {
padding-bottom: 25px !important;
}
.p-l-25 {
padding-left: 25px !important;
}
.p-h-25 {
padding-right: 25px !important;
padding-left: 25px !important;
}
.p-v-25 {
padding-top: 25px !important;
padding-bottom: 25px !important;
}
.m-a-30 {
margin: 30px !important;
}
.m-t-30 {
margin-top: 30px !important;
}
.m-r-30 {
margin-right: 30px !important;
}
.m-b-30 {
margin-bottom: 30px !important;
}
.m-l-30 {
margin-left: 30px !important;
}
.m-h-30 {
margin-right: 30px !important;
margin-left: 30px !important;
}
.m-v-30 {
margin-top: 30px !important;
margin-bottom: 30px !important;
}
.p-a-30 {
padding: 30px !important;
}
.p-t-30 {
padding-top: 30px !important;
}
.p-r-30 {
padding-right: 30px !important;
}
.p-b-30 {
padding-bottom: 30px !important;
}
.p-l-30 {
padding-left: 30px !important;
}
.p-h-30 {
padding-right: 30px !important;
padding-left: 30px !important;
}
.p-v-30 {
padding-top: 30px !important;
padding-bottom: 30px !important;
}
.m-a-35 {
margin: 35px !important;
}
.m-t-35 {
margin-top: 35px !important;
}
.m-r-35 {
margin-right: 35px !important;
}
.m-b-35 {
margin-bottom: 35px !important;
}
.m-l-35 {
margin-left: 35px !important;
}
.m-h-35 {
margin-right: 35px !important;
margin-left: 35px !important;
}
.m-v-35 {
margin-top: 35px !important;
margin-bottom: 35px !important;
}
.p-a-35 {
padding: 35px !important;
}
.p-t-35 {
padding-top: 35px !important;
}
.p-r-35 {
padding-right: 35px !important;
}
.p-b-35 {
padding-bottom: 35px !important;
}
.p-l-35 {
padding-left: 35px !important;
}
.p-h-35 {
padding-right: 35px !important;
padding-left: 35px !important;
}
.p-v-35 {
padding-top: 35px !important;
padding-bottom: 35px !important;
}
.m-a-40 {
margin: 40px !important;
}
.m-t-40 {
margin-top: 40px !important;
}
.m-r-40 {
margin-right: 40px !important;
}
.m-b-40 {
margin-bottom: 40px !important;
}
.m-l-40 {
margin-left: 40px !important;
}
.m-h-40 {
margin-right: 40px !important;
margin-left: 40px !important;
}
.m-v-40 {
margin-top: 40px !important;
margin-bottom: 40px !important;
}
.p-a-40 {
padding: 40px !important;
}
.p-t-40 {
padding-top: 40px !important;
}
.p-r-40 {
padding-right: 40px !important;
}
.p-b-40 {
padding-bottom: 40px !important;
}
.p-l-40 {
padding-left: 40px !important;
}
.p-h-40 {
padding-right: 40px !important;
padding-left: 40px !important;
}
.p-v-40 {
padding-top: 40px !important;
padding-bottom: 40px !important;
}
.m-a-45 {
margin: 45px !important;
}
.m-t-45 {
margin-top: 45px !important;
}
.m-r-45 {
margin-right: 45px !important;
}
.m-b-45 {
margin-bottom: 45px !important;
}
.m-l-45 {
margin-left: 45px !important;
}
.m-h-45 {
margin-right: 45px !important;
margin-left: 45px !important;
}
.m-v-45 {
margin-top: 45px !important;
margin-bottom: 45px !important;
}
.p-a-45 {
padding: 45px !important;
}
.p-t-45 {
padding-top: 45px !important;
}
.p-r-45 {
padding-right: 45px !important;
}
.p-b-45 {
padding-bottom: 45px !important;
}
.p-l-45 {
padding-left: 45px !important;
}
.p-h-45 {
padding-right: 45px !important;
padding-left: 45px !important;
}
.p-v-45 {
padding-top: 45px !important;
padding-bottom: 45px !important;
}
.m-a-50 {
margin: 50px !important;
}
.m-t-50 {
margin-top: 50px !important;
}
.m-r-50 {
margin-right: 50px !important;
}
.m-b-50 {
margin-bottom: 50px !important;
}
.m-l-50 {
margin-left: 50px !important;
}
.m-h-50 {
margin-right: 50px !important;
margin-left: 50px !important;
}
.m-v-50 {
margin-top: 50px !important;
margin-bottom: 50px !important;
}
.p-a-50 {
padding: 50px !important;
}
.p-t-50 {
padding-top: 50px !important;
}
.p-r-50 {
padding-right: 50px !important;
}
.p-b-50 {
padding-bottom: 50px !important;
}
.p-l-50 {
padding-left: 50px !important;
}
.p-h-50 {
padding-right: 50px !important;
padding-left: 50px !important;
}
.p-v-50 {
padding-top: 50px !important;
padding-bottom: 50px !important;
}
.m-a-55 {
margin: 55px !important;
}
.m-t-55 {
margin-top: 55px !important;
}
.m-r-55 {
margin-right: 55px !important;
}
.m-b-55 {
margin-bottom: 55px !important;
}
.m-l-55 {
margin-left: 55px !important;
}
.m-h-55 {
margin-right: 55px !important;
margin-left: 55px !important;
}
.m-v-55 {
margin-top: 55px !important;
margin-bottom: 55px !important;
}
.p-a-55 {
padding: 55px !important;
}
.p-t-55 {
padding-top: 55px !important;
}
.p-r-55 {
padding-right: 55px !important;
}
.p-b-55 {
padding-bottom: 55px !important;
}
.p-l-55 {
padding-left: 55px !important;
}
.p-h-55 {
padding-right: 55px !important;
padding-left: 55px !important;
}
.p-v-55 {
padding-top: 55px !important;
padding-bottom: 55px !important;
}
.m-a-60 {
margin: 60px !important;
}
.m-t-60 {
margin-top: 60px !important;
}
.m-r-60 {
margin-right: 60px !important;
}
.m-b-60 {
margin-bottom: 60px !important;
}
.m-l-60 {
margin-left: 60px !important;
}
.m-h-60 {
margin-right: 60px !important;
margin-left: 60px !important;
}
.m-v-60 {
margin-top: 60px !important;
margin-bottom: 60px !important;
}
.p-a-60 {
padding: 60px !important;
}
.p-t-60 {
padding-top: 60px !important;
}
.p-r-60 {
padding-right: 60px !important;
}
.p-b-60 {
padding-bottom: 60px !important;
}
.p-l-60 {
padding-left: 60px !important;
}
.p-h-60 {
padding-right: 60px !important;
padding-left: 60px !important;
}
.p-v-60 {
padding-top: 60px !important;
padding-bottom: 60px !important;
}
.m-a-65 {
margin: 65px !important;
}
.m-t-65 {
margin-top: 65px !important;
}
.m-r-65 {
margin-right: 65px !important;
}
.m-b-65 {
margin-bottom: 65px !important;
}
.m-l-65 {
margin-left: 65px !important;
}
.m-h-65 {
margin-right: 65px !important;
margin-left: 65px !important;
}
.m-v-65 {
margin-top: 65px !important;
margin-bottom: 65px !important;
}
.p-a-65 {
padding: 65px !important;
}
.p-t-65 {
padding-top: 65px !important;
}
.p-r-65 {
padding-right: 65px !important;
}
.p-b-65 {
padding-bottom: 65px !important;
}
.p-l-65 {
padding-left: 65px !important;
}
.p-h-65 {
padding-right: 65px !important;
padding-left: 65px !important;
}
.p-v-65 {
padding-top: 65px !important;
padding-bottom: 65px !important;
}
.m-a-70 {
margin: 70px !important;
}
.m-t-70 {
margin-top: 70px !important;
}
.m-r-70 {
margin-right: 70px !important;
}
.m-b-70 {
margin-bottom: 70px !important;
}
.m-l-70 {
margin-left: 70px !important;
}
.m-h-70 {
margin-right: 70px !important;
margin-left: 70px !important;
}
.m-v-70 {
margin-top: 70px !important;
margin-bottom: 70px !important;
}
.p-a-70 {
padding: 70px !important;
}
.p-t-70 {
padding-top: 70px !important;
}
.p-r-70 {
padding-right: 70px !important;
}
.p-b-70 {
padding-bottom: 70px !important;
}
.p-l-70 {
padding-left: 70px !important;
}
.p-h-70 {
padding-right: 70px !important;
padding-left: 70px !important;
}
.p-v-70 {
padding-top: 70px !important;
padding-bottom: 70px !important;
}
.m-a-75 {
margin: 75px !important;
}
.m-t-75 {
margin-top: 75px !important;
}
.m-r-75 {
margin-right: 75px !important;
}
.m-b-75 {
margin-bottom: 75px !important;
}
.m-l-75 {
margin-left: 75px !important;
}
.m-h-75 {
margin-right: 75px !important;
margin-left: 75px !important;
}
.m-v-75 {
margin-top: 75px !important;
margin-bottom: 75px !important;
}
.p-a-75 {
padding: 75px !important;
}
.p-t-75 {
padding-top: 75px !important;
}
.p-r-75 {
padding-right: 75px !important;
}
.p-b-75 {
padding-bottom: 75px !important;
}
.p-l-75 {
padding-left: 75px !important;
}
.p-h-75 {
padding-right: 75px !important;
padding-left: 75px !important;
}
.p-v-75 {
padding-top: 75px !important;
padding-bottom: 75px !important;
}
.m-a-80 {
margin: 80px !important;
}
.m-t-80 {
margin-top: 80px !important;
}
.m-r-80 {
margin-right: 80px !important;
}
.m-b-80 {
margin-bottom: 80px !important;
}
.m-l-80 {
margin-left: 80px !important;
}
.m-h-80 {
margin-right: 80px !important;
margin-left: 80px !important;
}
.m-v-80 {
margin-top: 80px !important;
margin-bottom: 80px !important;
}
.p-a-80 {
padding: 80px !important;
}
.p-t-80 {
padding-top: 80px !important;
}
.p-r-80 {
padding-right: 80px !important;
}
.p-b-80 {
padding-bottom: 80px !important;
}
.p-l-80 {
padding-left: 80px !important;
}
.p-h-80 {
padding-right: 80px !important;
padding-left: 80px !important;
}
.p-v-80 {
padding-top: 80px !important;
padding-bottom: 80px !important;
}
.m-a-85 {
margin: 85px !important;
}
.m-t-85 {
margin-top: 85px !important;
}
.m-r-85 {
margin-right: 85px !important;
}
.m-b-85 {
margin-bottom: 85px !important;
}
.m-l-85 {
margin-left: 85px !important;
}
.m-h-85 {
margin-right: 85px !important;
margin-left: 85px !important;
}
.m-v-85 {
margin-top: 85px !important;
margin-bottom: 85px !important;
}
.p-a-85 {
padding: 85px !important;
}
.p-t-85 {
padding-top: 85px !important;
}
.p-r-85 {
padding-right: 85px !important;
}
.p-b-85 {
padding-bottom: 85px !important;
}
.p-l-85 {
padding-left: 85px !important;
}
.p-h-85 {
padding-right: 85px !important;
padding-left: 85px !important;
}
.p-v-85 {
padding-top: 85px !important;
padding-bottom: 85px !important;
}
.m-a-90 {
margin: 90px !important;
}
.m-t-90 {
margin-top: 90px !important;
}
.m-r-90 {
margin-right: 90px !important;
}
.m-b-90 {
margin-bottom: 90px !important;
}
.m-l-90 {
margin-left: 90px !important;
}
.m-h-90 {
margin-right: 90px !important;
margin-left: 90px !important;
}
.m-v-90 {
margin-top: 90px !important;
margin-bottom: 90px !important;
}
.p-a-90 {
padding: 90px !important;
}
.p-t-90 {
padding-top: 90px !important;
}
.p-r-90 {
padding-right: 90px !important;
}
.p-b-90 {
padding-bottom: 90px !important;
}
.p-l-90 {
padding-left: 90px !important;
}
.p-h-90 {
padding-right: 90px !important;
padding-left: 90px !important;
}
.p-v-90 {
padding-top: 90px !important;
padding-bottom: 90px !important;
}
.m-a-95 {
margin: 95px !important;
}
.m-t-95 {
margin-top: 95px !important;
}
.m-r-95 {
margin-right: 95px !important;
}
.m-b-95 {
margin-bottom: 95px !important;
}
.m-l-95 {
margin-left: 95px !important;
}
.m-h-95 {
margin-right: 95px !important;
margin-left: 95px !important;
}
.m-v-95 {
margin-top: 95px !important;
margin-bottom: 95px !important;
}
.p-a-95 {
padding: 95px !important;
}
.p-t-95 {
padding-top: 95px !important;
}
.p-r-95 {
padding-right: 95px !important;
}
.p-b-95 {
padding-bottom: 95px !important;
}
.p-l-95 {
padding-left: 95px !important;
}
.p-h-95 {
padding-right: 95px !important;
padding-left: 95px !important;
}
.p-v-95 {
padding-top: 95px !important;
padding-bottom: 95px !important;
}
.m-a-100 {
margin: 100px !important;
}
.m-t-100 {
margin-top: 100px !important;
}
.m-r-100 {
margin-right: 100px !important;
}
.m-b-100 {
margin-bottom: 100px !important;
}
.m-l-100 {
margin-left: 100px !important;
}
.m-h-100 {
margin-right: 100px !important;
margin-left: 100px !important;
}
.m-v-100 {
margin-top: 100px !important;
margin-bottom: 100px !important;
}
.p-a-100 {
padding: 100px !important;
}
.p-t-100 {
padding-top: 100px !important;
}
.p-r-100 {
padding-right: 100px !important;
}
.p-b-100 {
padding-bottom: 100px !important;
}
.p-l-100 {
padding-left: 100px !important;
}
.p-h-100 {
padding-right: 100px !important;
padding-left: 100px !important;
}
.p-v-100 {
padding-top: 100px !important;
padding-bottom: 100px !important;
}
/* Waves Effect
========================================================================== */
.waves {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
border-width: 3px;
border-style: solid;
border-color: inherit;
border-radius: inherit;
-webkit-animation-name: waves;
animation-name: waves;
-webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
[class*="b-s-"] .waves {
border-style: inherit;
}
[class*="b-w-"] .waves {
border-width: inherit;
}
@-webkit-keyframes waves {
0% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
opacity: 0.0;
}
25% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
opacity: 0.1;
}
50% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.3;
}
75% {
-webkit-transform: scale(0.75);
transform: scale(0.75);
opacity: 0.5;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0.0;
}
}
@keyframes waves {
0% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
opacity: 0.0;
}
25% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
opacity: 0.1;
}
50% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.3;
}
75% {
-webkit-transform: scale(0.75);
transform: scale(0.75);
opacity: 0.5;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0.0;
}
}
/* Draggable Item
========================================================================== */
.handle {
cursor: move;
}
.draggable {
position: relative;
}
.draggable::before {
position: absolute;
width: 10px;
top: 0;
content: '';
cursor: move;
left: 0;
height: 30px;
background: url('../img/handle.png') no-repeat;
opacity: 0;
transition: opacity 0.2s ease-out;
}
.draggable:hover::before,
.draggable.gu-mirror::before {
opacity: 1;
}
.gu-transit {
border: 1px dashed rgba(0, 0, 0, 0.8);
z-index: 2147483647 !important;
}
/*
Tachyons
z-index
DOCUMENTATION
MDN: https://developer.mozilla.org/en/docs/Web/CSS/z-index
Spec: http://www.w3.org/TR/CSS2/zindex.html
Tips on extending:
There might be a time worth using negative z-index values.
Or if you are using tachyons with another project, you might need to
adjust these values to suit your needs.
*/
.z-0 {
z-index: 0 !important;
}
.z-1 {
z-index: 1 !important;
}
.z-2 {
z-index: 2 !important;
}
.z-3 {
z-index: 3 !important;
}
.z-4 {
z-index: 4 !important;
}
.z-5 {
z-index: 5 !important;
}
.z-999 {
z-index: 999 !important;
}
.z-9999 {
z-index: 9999 !important;
}
.z-max {
z-index: 2147483647 !important;
}
.z-inherit {
z-index: inherit !important;
}
.z-initial {
z-index: initial !important;
}
.z-unset {
z-index: unset !important;
}