dropin-minimal-css/src/skeleton-plus.css

/* skeleton-plus <https://github.com/oldaniel/skeleton-plus> , Copyright 2018, Daniel Oltmanns <daniel@thedcdesigns.com> */
@import url("https://fonts.googleapis.com/css?family=Lato:400,700");
/*
 Define some variables we will need
*/
/*
 Do the imports
*/
* {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  color: #212121;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  word-wrap: break-word; }

nav {
  margin: 20px auto;
  max-width: 960px;
  width: 95%; }
  nav label {
    font-weight: bold; }
  nav ul {
    list-style: none;
    float: right; }
    nav ul li {
      margin: 0 15px; }
  nav * {
    display: inline-block; }
  @media screen and (max-width: 640px) {
    nav {
      text-align: center; }
      nav > * {
        display: block; }
      nav ul {
        float: none;
        margin-top: 15px; } }

.container {
  max-width: 960px;
  width: 95%;
  margin: 0 auto; }

.grid-flex {
  display: -webkit-box;
  display: flex; }

.row:after {
  content: '';
  display: table;
  clear: both; }

.flex-1 {
  -webkit-box-flex: 1;
  flex: 1; }

.flex-2 {
  -webkit-box-flex: 2;
  flex: 2; }

.flex-3 {
  -webkit-box-flex: 3;
  flex: 3; }

.flex-4 {
  -webkit-box-flex: 4;
  flex: 4; }

.flex-5 {
  -webkit-box-flex: 5;
  flex: 5; }

.flex-6 {
  -webkit-box-flex: 6;
  flex: 6; }

.flex-7 {
  -webkit-box-flex: 7;
  flex: 7; }

.flex-8 {
  -webkit-box-flex: 8;
  flex: 8; }

.flex-9 {
  -webkit-box-flex: 9;
  flex: 9; }

.flex-10 {
  -webkit-box-flex: 10;
  flex: 10; }

/* Old grid system */
.one.column, .one.columns {
  width: 7.33333%;
  display: inline-block;
  margin: 0 .5%;
  float: left; }

.two.columns {
  width: 15.66667%;
  display: inline-block;
  margin: 0 .5%;
  float: left; }

.three.columns {
  width: 24%;
  display: inline-block;
  margin: 0 .5%;
  float: left; }

.four.columns {
  width: 32.33333%;
  display: inline-block;
  margin: 0 .5%;
  float: left; }

.five.columns {
  width: 40.66667%;
  display: inline-block;
  margin: 0 .5%;
  float: left; }

.six.columns {
  width: 49%;
  display: inline-block;
  margin: 0 .5%;
  float: left; }

.seven.columns {
  width: 57.33333%;
  display: inline-block;
  margin: 0 .5%;
  float: left; }

.eight.columns {
  width: 65.66667%;
  display: inline-block;
  margin: 0 .5%;
  float: left; }

.nine.columns {
  width: 74%;
  display: inline-block;
  margin: 0 .5%;
  float: left; }

.ten.columns {
  width: 82.33333%;
  display: inline-block;
  margin: 0 .5%;
  float: left; }

.eleven.columns {
  width: 90.66667%;
  display: inline-block;
  margin: 0 .5%;
  float: left; }

.twelve.columns {
  width: 99%;
  display: inline-block;
  margin: 0 .5%;
  float: left; }

@media screen and (max-width: 750px) {
  .columns.desktop, .column.desktop {
    display: block !important;
    width: 99% !important; } }

@media screen and (min-width: 750px) {
  .columns.mobile, .column.mobile {
    display: block !important;
    width: 99% !important; } }

button {
  display: inline-block;
  padding: 8px 30px;
  margin: 5px 0;
  text-align: center;
  text-transform: uppercase;
  border: none;
  outline: none;
  border-radius: 2px;
  color: #ffffff;
  cursor: pointer;
  background-color: #212121;
  transition: 0.2s ease-in-out; }
  button:hover, button:disabled {
    background-color: #878787; }
  button:active {
    background-color: black; }
  button.success {
    background-color: #2be379;
    transition: 0.2s ease-in-out; }
    button.success:hover, button.success:disabled {
      background-color: #6feca4; }
    button.success:active {
      background-color: #17ab55; }
  button.error {
    background-color: #f14735;
    transition: 0.2s ease-in-out; }
    button.error:hover, button.error:disabled {
      background-color: #f6887d; }
    button.error:active {
      background-color: #cb200e; }
  button.warning {
    background-color: #ffb930;
    transition: 0.2s ease-in-out; }
    button.warning:hover, button.warning:disabled {
      background-color: #ffd37d; }
    button.warning:active {
      background-color: #e39600; }
  button.btn-shadow {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }
    button.btn-shadow:hover {
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
    button.btn-shadow:active {
      box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); }

input, textarea, select {
  display: block;
  width: 100%;
  padding: 5px;
  margin: 5px 0;
  border: 1px solid #e0e0e0;
  outline: none;
  border-radius: 2px;
  background-color: #ffffff; }
  input:hover, textarea:hover, select:hover {
    border-color: #6e6e6e; }
  input:focus, textarea:focus, select:focus {
    border-color: #212121; }

textarea {
  resize: vertical;
  min-height: 60px; }

b, strong {
  font-weight: 700; }

a {
  text-decoration: underline;
  cursor: pointer; }
  a:hover {
    color: #6e6e6e; }
  a.none {
    text-decoration: none; }

h1 {
  font-size: 3rem; }

h2 {
  font-size: 2.6rem; }

h3 {
  font-size: 2.2rem; }

h4 {
  font-size: 1.8rem; }

h5 {
  font-size: 1.6rem; }

h6 {
  font-size: 1.4rem; }

h1, h2, h3, h4, h5, h6 {
  margin-bottom: 10px;
  font-weight: bold; }

small {
  font-size: .8rem; }

p {
  margin: 15px 0; }

.text-left {
  text-align: left; }

.text-center {
  text-align: center; }

.text-right {
  text-align: right; }

.text-muted, .text-muted * {
  color: #616161; }

.text-success, .text-success * {
  color: #2be379; }

.text-error, .text-error * {
  color: #f14735; }

.text-warning, .text-warning * {
  color: #ffb930; }

.text-inverted, .text-inverted * {
  color: #ffffff; }

table {
  border-collapse: collapse;
  width: 100%;
  margin-top: .5em; }
  @media screen and (max-width: 750px) {
    table {
      overflow-x: auto;
      display: block; } }
  table td, table th {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #e0e0e0; }

ul ul {
  margin-left: 15px; }

ul.inner, ul .inner {
  list-style-position: inside; }

ul.outer, ul .outer {
  list-style-position: outside; }

/**
 * Thanks to Chris Bracco for this tooltip from https://codepen.io/cbracco/pen/qzukg
 */
/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer; }

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  opacity: 0;
  pointer-events: none; }

/* Position tooltip above the element */
[data-tooltip]:before {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -80px;
  padding: 7px;
  width: 160px;
  border-radius: 3px;
  background-color: #000;
  background-color: rgba(51, 51, 51, 0.9);
  color: #fff;
  content: attr(data-tooltip);
  text-align: center;
  font-size: 14px;
  line-height: 1.2; }

/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  border-top: 5px solid #000;
  border-top: 5px solid rgba(51, 51, 51, 0.9);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0; }

/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  opacity: 1; }

.card {
  margin: 15px;
  border-radius: 1px;
  border: 0.5px solid #e0e0e0; }
  .card img {
    width: 100%;
    display: block;
    border-radius: 1px 1px 0 0; }
  .card .content {
    padding: 10px; }
  .card .footer {
    border-top: 1px solid #e0e0e0;
    padding: 5px 15px;
    text-align: right; }
  .card.card-shadow {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    border: none; }

hr {
  border: none;
  outline: none;
  height: 1px;
  width: 60%;
  background-color: #e0e0e0; }

.bg-success {
  background-color: #2be379; }

.bg-warning {
  background-color: #ffb930; }

.bg-error {
  background-color: #f14735; }

.bg-success-bright {
  background-color: #b2f5ce; }

.bg-warning-bright {
  background-color: #ffedc9; }

.bg-error-bright {
  background-color: #fbc9c4; }

code {
  background-color: #e0e0e0;
  display: inline-block;
  padding: 4px 8px;
  font-family: monospace;
  overflow-x: auto; }

pre > code {
  display: block;
  white-space: pre; }

.cover {
  min-height: 60vh;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center; }
  .cover > div {
    -webkit-box-flex: 1;
    flex: 1; }

.progress {
  display: block;
  width: 100%;
  height: 3px;
  margin: 5px;
  background-color: #e0e0e0; }
  .progress .bar {
    transition: width .5s ease-in-out;
    display: block;
    height: 100%;
    width: 100%;
    max-width: 100%; }

img {
  display: block;
  width: 100%; }

.pagination {
  display: -webkit-box;
  display: flex;
  width: 100%;
  text-align: center;
  padding: 15px; }
  .pagination * {
    text-decoration: none; }
  .pagination > * {
    -webkit-box-flex: 1;
    flex: 1;
    padding: 3px; }
    .pagination > *:hover {
      background-color: #ededed;
      transition: .3s background-color ease-in-out; }
      .pagination > *:hover, .pagination > *:hover * {
        color: #212121; }
  .pagination .action {
    -webkit-box-flex: .5;
    flex: .5; }
  .pagination.no-flex {
    display: block; }
    .pagination.no-flex > * {
      display: inline-block;
      margin: 0 10px; }