short-sass/test/test.css

Just another SASS library, simplify the way you use SASS.

@charset "UTF-8";
/* Print Styles ----------------------------------------- */
@import url(lama.css);
/*
 * ADAPTING BOILERPLATE.CSS
 * ---------------------------------------------------------------------------
 * HTML5 ✰ Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 *
 * Detailed information about this CSS: h5bp.com/css
 *
 * normalize -----------------------------------------------------------------
 */
html {
  font-size: 100%;
  height: 100%;
  overflow-y: auto;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -o-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-size: 100%;
  line-height: 1.231;
  position: relative;
}

article,
aside,
details,
figcaption,
footer,
header,
hgroup,
nav,
section,
figure {
  display: block;
}

figure {
  margin: 0;
}

::selection {
  background-color: #cbcbcb;
}

::-moz-selection {
  background-color: #cbcbcb;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b {
  font-weight: bold;
}

strong {
  font-weight: bold;
}

blockquote {
  margin: 1em 40px;
}

dfn {
  font-style: italic;
}

hr {
  border: 0;
  border-top: 1px solid #ccc;
  display: block;
  height: 1px;
  margin: 1em 0;
  padding: 0;
}

ins {
  background: #ff9;
  color: #000;
  text-decoration: none;
}

mark {
  background: #ff0;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

pre {
  font-family: monospace, serif;
  font-size: 1em;
  white-space: pre-wrap;
  white-space: pre;
  -webkit-word-wrap: break-word;
  -moz-word-wrap: break-word;
  -ms-word-wrap: break-word;
  -o-word-wrap: break-word;
  word-wrap: break-word;
}

code {
  font-family: monospace, serif;
  font-size: 1em;
}

kbd {
  font-family: monospace, serif;
  font-size: 1em;
}

samp {
  font-family: monospace, serif;
  font-size: 1em;
}

q {
  quotes: none;
}

q:before {
  content: "";
  content: none;
}

q:after {
  content: "";
  content: none;
}

small {
  font-size: 85%;
}

sub {
  bottom: -0.25em;
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  top: -0.5em;
  vertical-align: baseline;
}

ul {
  margin: 1em 0;
  padding: 0 0 0 40px;
}

ol {
  margin: 1em 0;
  padding: 0 0 0 40px;
}

dd {
  margin: 0 0 0 40px;
}

nav ul {
  list-style: none;
  list-style-image: none;
  margin: 0;
  padding: 0;
}

nav ol {
  list-style: none;
  list-style-image: none;
  margin: 0;
  padding: 0;
}

img {
  -ms-interpolation-mode: bicubic;
  border: 0;
  display: inline-block;
  vertical-align: middle;
}

svg:not(:root) {
  overflow: hidden;
}

form {
  margin: 0;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

label {
  cursor: pointer;
}

legend {
  *margin-left: -7px;
  border: 0;
  padding: 0;
}

button {
  *overflow: visible;
  *vertical-align: middle;
  cursor: pointer;
  font-size: 100%;
  line-height: normal;
  margin: 0;
  vertical-align: baseline;
}

input {
  *vertical-align: middle;
  font-size: 100%;
  line-height: normal;
  margin: 0;
  vertical-align: baseline;
}

select {
  *vertical-align: middle;
  font-size: 100%;
  margin: 0;
  vertical-align: baseline;
}

textarea {
  *vertical-align: middle;
  font-size: 100%;
  margin: 0;
  vertical-align: baseline;
}

input[type="button"], input[type="reset"], input[type="submit"], input[type="text"] {
  *overflow: visible;
}

input[type="button"], input[type="reset"], input[type="submit"] {
  cursor: pointer;
}

input[type="checkbox"], input[type="radio"] {
  padding: 0;
  cursor: pointer;
}

input[type="search"] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  -ms-appearance: textfield;
  -o-appearance: textfield;
  appearance: textfield;
}

button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input::moz-focus-inner {
  border: 0;
  padding: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td {
  vertical-align: top;
}

p {
  margin: 0;
}

span {
  display: inline-block;
}

html, body {
  width: 100%;
  height: 100%;
  speak: none;
  font-variant: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
}

body * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

input:focus {
  outline: none;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

a {
  display: inline-block;
  *display: inline;
  zoom: 1;
  text-decoration: none;
}
a:focus, a:hover, a:visited {
  outline: none;
}

@font-face {
  font-family: "arial regular";
  src: local("arial regular");
  src: url("assets/fonts/arialarial-regular.eot");
  src: url("assets/fonts/arialarial-regular.eot#iefix") format("embedded-opentype"), url("assets/fonts/arialarial-regular.svg") format("svg"), url("assets/fonts/arialarial-regular.ttf") format("truetype"), url("assets/fonts/arialarial-regular.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
}
@font-face {
  font-family: "arial bold";
  src: local("arial bold");
  src: url("assets/fonts/arialarial-bold.eot");
  src: url("assets/fonts/arialarial-bold.eot#iefix") format("embedded-opentype"), url("assets/fonts/arialarial-bold.svg") format("svg"), url("assets/fonts/arialarial-bold.ttf") format("truetype"), url("assets/fonts/arialarial-bold.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
}
@font-face {
  font-family: "arial italic";
  src: local("arial italic");
  src: url("assets/fonts/arialarial-italic.eot");
  src: url("assets/fonts/arialarial-italic.eot#iefix") format("embedded-opentype"), url("assets/fonts/arialarial-italic.svg") format("svg"), url("assets/fonts/arialarial-italic.ttf") format("truetype"), url("assets/fonts/arialarial-italic.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
}
body {
  speak: none;
  font-variant: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  speak: none;
  font-variant: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.simple-box {
  display: block;
  width: 100%;
  height: 500px;
  display: block;
  width: 100%;
  height: 500px;
}

.simple-position {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -mz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.complex-gradient {
  background-image: -webkit-linear-gradient(-90deg, #fff, #ff8), -webkit-linear-gradient(-90deg, #dff, #3d8), -webkit-radial-gradient(center, #ae9, #d38), -webkit-linear-gradient(-90deg, #73d, #f83), -webkit-radial-gradient(center, #dd9, #88d), -webkit-radial-gradient(center, #a9f, #ff1), -webkit-linear-gradient(-90deg, #99d, #1f0);
  background-image: -moz-linear-gradient(-90deg, #fff, #ff8), -moz-linear-gradient(-90deg, #dff, #3d8), -moz-radial-gradient(center, #ae9, #d38), -moz-linear-gradient(-90deg, #73d, #f83), -moz-radial-gradient(center, #dd9, #88d), -moz-radial-gradient(center, #a9f, #ff1), -moz-linear-gradient(-90deg, #99d, #1f0);
  background-image: -ms-linear-gradient(-90deg, #fff, #ff8), -ms-linear-gradient(-90deg, #dff, #3d8), -ms-radial-gradient(center, #ae9, #d38), -ms-linear-gradient(-90deg, #73d, #f83), -ms-radial-gradient(center, #dd9, #88d), -ms-radial-gradient(center, #a9f, #ff1), -ms-linear-gradient(-90deg, #99d, #1f0);
  background-image: -o-linear-gradient(-90deg, #fff, #ff8), -o-linear-gradient(-90deg, #dff, #3d8), -o-radial-gradient(center, #ae9, #d38), -o-linear-gradient(-90deg, #73d, #f83), -o-radial-gradient(center, #dd9, #88d), -o-radial-gradient(center, #a9f, #ff1), -o-linear-gradient(-90deg, #99d, #1f0);
  background-image: -webkit-linear-gradient(-90deg, #fff, #ff8), -webkit-linear-gradient(-90deg, #dff, #3d8), -webkit-radial-gradient(center, #ae9, #d38), -webkit-linear-gradient(-90deg, #73d, #f83), -webkit-radial-gradient(center, #dd9, #88d), -webkit-radial-gradient(center, #a9f, #ff1), -webkit-linear-gradient(-90deg, #99d, #1f0);
  background-image: -moz-linear-gradient(-90deg, #fff, #ff8), -moz-linear-gradient(-90deg, #dff, #3d8), -moz-radial-gradient(center, #ae9, #d38), -moz-linear-gradient(-90deg, #73d, #f83), -moz-radial-gradient(center, #dd9, #88d), -moz-radial-gradient(center, #a9f, #ff1), -moz-linear-gradient(-90deg, #99d, #1f0);
  background-image: -ms-linear-gradient(-90deg, #fff, #ff8), -ms-linear-gradient(-90deg, #dff, #3d8), -ms-radial-gradient(center, #ae9, #d38), -ms-linear-gradient(-90deg, #73d, #f83), -ms-radial-gradient(center, #dd9, #88d), -ms-radial-gradient(center, #a9f, #ff1), -ms-linear-gradient(-90deg, #99d, #1f0);
  background-image: -o-linear-gradient(-90deg, #fff, #ff8), -o-linear-gradient(-90deg, #dff, #3d8), -o-radial-gradient(center, #ae9, #d38), -o-linear-gradient(-90deg, #73d, #f83), -o-radial-gradient(center, #dd9, #88d), -o-radial-gradient(center, #a9f, #ff1), -o-linear-gradient(-90deg, #99d, #1f0);
}

.simple-box {
  display: inline-block;
  width: 320px;
  height: 240px;
  *display: inline;
  zoom: 1;
}
@media only screen and (max-width: 509px) and (min-device-width: 1024px), (max-device-width: 480px) and (orientation: portrait) {
  .simple-box {
    display: block;
    width: 100%;
    height: auto;
  }
}

.flex-test {
  -webkit-box-flex: 1% 1% 100%;
  -moz-box-flex: 1% 1% 100%;
  -webkit-flex: 1% 1% 100%;
  -ms-flex: 1% 1% 100%;
  flex: 1% 1% 100%;
}

.container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding-left: 10px;
  padding-right: 10px;
}

.flex-grid {
  box-sizing: border-box;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  width: 101.04167%;
  -webkit-box-direction: row;
  -webkit-box-orient: row;
  -webkit-moz-direction: row;
  -webkit-moz-orient: row;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: flex-start;
  -moz-box-pack: flex-start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: stretch;
  -moz-box-align: stretch;
  -webkit-align-items: stretch;
  align-items: stretch;
  -ms-flex-align: stretch;
  margin-left: -1.04167%;
}
.flex-grid .column {
  -ms-flex-preferred-size: 23.95833%;
  -webkit-flex-basis: 23.95833%;
  flex-basis: 23.95833%;
  margin-left: 1.04167%;
  margin-bottom: 10px;
  box-sizing: border-box;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: flex-start;
  -moz-box-pack: flex-start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -moz-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -ms-flex-align: center;
  background-color: #ccc;
}
.flex-grid[column="4"] .column {
  -ms-flex-preferred-size: 23.95833%;
  -webkit-flex-basis: 23.95833%;
  flex-basis: 23.95833%;
  margin-left: 1.04167%;
  margin-bottom: 10px;
  box-sizing: border-box;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: flex-start;
  -moz-box-pack: flex-start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -moz-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -ms-flex-align: center;
}

.flex-grid2 {
  box-sizing: border-box;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-direction: space-between stretch;
  -webkit-box-orient: space-between stretch;
  -webkit-moz-direction: space-between stretch;
  -webkit-moz-orient: space-between stretch;
  -webkit-flex-direction: space-between stretch;
  -ms-flex-direction: space-between stretch;
  flex-direction: space-between stretch;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.flex-grid2 .column {
  -ms-flex-preferred-size: 25%;
  -webkit-flex-basis: 25%;
  flex-basis: 25%;
  -webkit-flex-shrink: 1;
  -ms-flex-negative: 1;
  flex-shrink: 1;
  margin-left: 10px;
  margin-bottom: 10px;
  background-color: #ccc;
}

.grid-test {
  box-sizing: border-box;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  width: 102.08333%;
  -webkit-box-direction: row;
  -webkit-box-orient: row;
  -webkit-moz-direction: row;
  -webkit-moz-orient: row;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: flex-start;
  -moz-box-pack: flex-start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: stretch;
  -moz-box-align: stretch;
  -webkit-align-items: stretch;
  align-items: stretch;
  -ms-flex-align: stretch;
  margin-left: -2.08333%;
}
.grid-test .column {
  -ms-flex-preferred-size: 22.91667%;
  -webkit-flex-basis: 22.91667%;
  flex-basis: 22.91667%;
  margin-left: 2.08333%;
  margin-bottom: 20px;
  box-sizing: border-box;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: flex-start;
  -moz-box-pack: flex-start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -moz-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -ms-flex-align: center;
}

.flex-test {
  box-sizing: border-box;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-direction: row;
  -webkit-box-orient: row;
  -webkit-moz-direction: row;
  -webkit-moz-orient: row;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: flex-start;
  -moz-box-pack: flex-start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: stretch;
  -moz-box-align: stretch;
  -webkit-align-items: stretch;
  align-items: stretch;
  -ms-flex-align: stretch;
}
.flex-test .column {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background-color: #ddd;
}

.head-typo {
  -webkit-appearance: initial !important;
  -moz-appearance: initial !important;
  -ms-appearance: initial !important;
  -o-appearance: initial !important;
  appearance: initial !important;
  display: block !important;
  width: 100% !important;
  font-family: "proximanova-regular";
  font-size: 14px;
  line-height: 24px;
  color: #555;
  font-weight: 600;
}

.wrapper {
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

.wrapper-x {
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}

.wrapper-y {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

.input-text {
  -webkit-appearance: initial !important;
  -moz-appearance: initial !important;
  -ms-appearance: initial !important;
  -o-appearance: initial !important;
  appearance: initial !important;
  display: block;
  width: 100%;
  margin: 0;
}

.simple-grid {
  *zoom: 1;
  display: block;
  width: 102.77778%;
  margin-left: -2.77778%;
}
.simple-grid:before, .simple-grid:after {
  content: "";
  display: table;
}
.simple-grid:after {
  clear: both;
}
.simple-grid li {
  display: block;
  width: 30.55556%;
  margin-left: 2.77778%;
  float: left;
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px), (min-width: 768px) and (max-width: 1200px) {
  .simple-grid li {
    display: block;
    width: 47.22222%;
    margin-left: 2.77778%;
    float: left;
  }
}
@media only screen and (min-device-width: 320px) and (max-device-width: 767px) {
  .simple-grid li {
    display: block;
    width: 97.22222%;
    margin-left: 2.77778%;
    float: left;
  }
}

.gradient {
  background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)), -webkit-linear-gradient(-90deg, rgba(221, 255, 255, 0.2), rgba(153, 221, 255, 0.2)), -webkit-linear-gradient(-90deg, rgba(85, 102, 102, 0.2), rgba(136, 136, 221, 0.2));
  background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)), -moz-linear-gradient(-90deg, rgba(221, 255, 255, 0.2), rgba(153, 221, 255, 0.2)), -moz-linear-gradient(-90deg, rgba(85, 102, 102, 0.2), rgba(136, 136, 221, 0.2));
  background-image: -ms-linear-gradient(-90deg, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)), -ms-linear-gradient(-90deg, rgba(221, 255, 255, 0.2), rgba(153, 221, 255, 0.2)), -ms-linear-gradient(-90deg, rgba(85, 102, 102, 0.2), rgba(136, 136, 221, 0.2));
  background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)), -o-linear-gradient(-90deg, rgba(221, 255, 255, 0.2), rgba(153, 221, 255, 0.2)), -o-linear-gradient(-90deg, rgba(85, 102, 102, 0.2), rgba(136, 136, 221, 0.2));
}

.simple-boxes {
  display: block !important;
  width: 100% !important;
  height: 320px !important;
  *zoom: 1 !important;
  display: block !important;
  width: 102.77778% !important;
  margin-left: -2.77778% !important;
  font-family: "proximanova-regular";
  font-size: 16px;
  line-height: 37px;
  color: #999;
}
.simple-boxes:before, .simple-boxes:after {
  content: "" !important;
  display: table !important;
}
.simple-boxes:after {
  clear: both !important;
}
.simple-boxes li {
  display: block !important;
  width: 30.55556% !important;
  margin-left: 2.77778% !important;
  float: left !important;
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px), (min-width: 768px) and (max-width: 1200px) {
  .simple-boxes li {
    display: block !important;
    width: 47.22222% !important;
    margin-left: 2.77778% !important;
    float: left !important;
  }
}
@media only screen and (min-device-width: 320px) and (max-device-width: 767px) {
  .simple-boxes li {
    display: block !important;
    width: 97.22222% !important;
    margin-left: 2.77778% !important;
    float: left !important;
  }
}

/*# sourceMappingURL=test.css.map */