fixins/test/style.css

A collection of functions and mixins for use with precss and postcss-functions

body {
  color: #333;
  background: #ddd;
  font-family: 'Droid Sans Mono';
  width: 88%;
  margin: 0 auto;
  something: fx-golden 12;
  something-else: 19.41640786499874;
}

body.b {
  color: #ddd;
}

body.b {
  background: #333;
}

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

.fixin {
  box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.5);
  padding: 21px;
  margin-bottom: 14px;
}

.fixin h4 {
  font-size: 28px;
  text-align: center;
}

.fixin h6 {
  text-align: center;
}

p {
  padding: 14px;
}

p.p1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 2px;
  box-shadow: inset 0 3px 3px rgba(0, 0, 0, 0.66);
  border-bottom: 1px solid rgba(255, 255, 255, 0.66);
  background: rgba(0, 0, 0, 0.66);
}

p.p2 {
  border-radius: 0;
  box-shadow: inset 0 3px 3px rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.1);
}

p.p3 {
  border-radius: 0;
  box-shadow: inset 0 3px 3px rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.2);
}

ul.hl {
  list-style-type: none;
  display: inline-block;
  padding-left: 0;
}

ul.hl > li {
  display: inline-block;
  float: left;
}

ul.lu {
  list-style: none;
  padding-left: 0;
}

.box {
  width: 128px;
  height: 128px;
  display: inline-block;
  margin: 14px;
}

.box.b1 {
  box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.25);
}

.box.b2 {
  box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.5);
}

.box.b3 {
  width: 256px;
  height: 128px;
  box-shadow: 0px 1px 2px 1px rgba(0,63,0,0.4);
  background: rgb(200,227,200);
}

body .g {
  border: 1px solid #333;
}

body.b .g {
  border: 1px solid #ddd;
}

.grid {
  float: left;
  width: 100%;
  height: 256px;
}

.grid * {
  box-sizing: border-box;
}

.grid .g {
  width: 100%;
  height: 256px;
}

.grid .g1 {
  float: left;
  width: 8.333333333333332%;
}

.grid .g2 {
  float: left;
  width: 16.666666666666664%;
}

.grid .g3 {
  float: left;
  width: 25%;
}

.grid .g4 {
  float: left;
  width: 33.33333333333333%;
}

.a1 {
  position: relative;
  text-decoration: none;
}

.a1:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: #000;
  visibility: hidden;
  -webkit-transform: scaleX(0);
      -ms-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.a1:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
      -ms-transform: scaleX(1);
          transform: scaleX(1);
}
.a2 {
  position: relative;
  text-decoration: none;
}
.a2:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: purple;
  visibility: hidden;
  -webkit-transform: scaleX(0);
      -ms-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
.a2:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
      -ms-transform: scaleX(1);
          transform: scaleX(1);
}
.a3 {
  position: relative;
  text-decoration: none;
}
.a3:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: orange;
  visibility: hidden;
  -webkit-transform: scaleX(0);
      -ms-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
.a3:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
      -ms-transform: scaleX(1);
          transform: scaleX(1);
}



p.gold1 {
  font-size: 5.347524157501473px;
}



p.gold1:before {
  content: "5.347524157501473px";
}
p.gold2 {
  font-size: 14px;
}
p.gold2:before {
  content: "14px";
}
p.gold3 {
  font-size: 22.65247584249853px;
}
p.gold3:before {
  content: "22.65247584249853px";
}
p.gold4 {
  font-size: 36.65247584249853px;
}
p.gold4:before {
  content: "36.65247584249853px";
}

p.rand1:before {
  content: "73";
}
p.rand2:before {
  content: "309";
}
p.rand3:before {
  content: "0.06391827656301740";
}
p.rand3:before {
  content: "0.27176124652651470";
}

.swatches {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
}
.swatch.red {
  width: 256px;
  height: 256px;
  -webkit-flex-basis: 256px;
          flex-basis: 256px;
  background: rgba(12, 0, 0, 1);
  color: rgba(192, 0, 0, 1);
  margin: 8px;
}
.swatch.red:before {
  content: "red rgba(12, 0, 0, 1) rgba(192, 0, 0, 1)";
}
.swatch.orange {
  width: 256px;
  height: 256px;
  -webkit-flex-basis: 256px;
          flex-basis: 256px;
  background: rgba(12, 6, 0, 1);
  color: rgba(192, 96, 0, 1);
  margin: 8px;
}
.swatch.orange:before {
  content: "orange rgba(12, 6, 0, 1) rgba(192, 96, 0, 1)";
}
.swatch.yellow {
  width: 256px;
  height: 256px;
  -webkit-flex-basis: 256px;
          flex-basis: 256px;
  background: rgba(12, 12, 0, 1);
  color: rgba(192, 192, 0, 1);
  margin: 8px;
}
.swatch.yellow:before {
  content: "yellow rgba(12, 12, 0, 1) rgba(192, 192, 0, 1)";
}
.swatch.green {
  width: 256px;
  height: 256px;
  -webkit-flex-basis: 256px;
          flex-basis: 256px;
  background: rgba(0, 12, 0, 1);
  color: rgba(0, 192, 0, 1);
  margin: 8px;
}
.swatch.green:before {
  content: "green rgba(0, 12, 0, 1) rgba(0, 192, 0, 1)";
}
.swatch.cyan {
  width: 256px;
  height: 256px;
  -webkit-flex-basis: 256px;
          flex-basis: 256px;
  background: rgba(0, 12, 12, 1);
  color: rgba(0, 192, 192, 1);
  margin: 8px;
}
.swatch.cyan:before {
  content: "cyan rgba(0, 12, 12, 1) rgba(0, 192, 192, 1)";
}
.swatch.blue {
  width: 256px;
  height: 256px;
  -webkit-flex-basis: 256px;
          flex-basis: 256px;
  background: rgba(0, 0, 12, 1);
  color: rgba(0, 0, 192, 1);
  margin: 8px;
}
.swatch.blue:before {
  content: "blue rgba(0, 0, 12, 1) rgba(0, 0, 192, 1)";
}
.swatch.violet {
  width: 256px;
  height: 256px;
  -webkit-flex-basis: 256px;
          flex-basis: 256px;
  background: rgba(6, 0, 12, 1);
  color: rgba(96, 0, 192, 1);
  margin: 8px;
}
.swatch.violet:before {
  content: "violet rgba(6, 0, 12, 1) rgba(96, 0, 192, 1)";
}
.swatch.magenta {
  width: 256px;
  height: 256px;
  -webkit-flex-basis: 256px;
          flex-basis: 256px;
  background: rgba(12, 0, 12, 1);
  color: rgba(192, 0, 192, 1);
  margin: 8px;
}
.swatch.magenta:before {
  content: "magenta rgba(12, 0, 12, 1) rgba(192, 0, 192, 1)";
}
.swatch.gray {
  width: 256px;
  height: 256px;
  -webkit-flex-basis: 256px;
          flex-basis: 256px;
  background: rgba(12,12,12,1);
  color: rgba(192,192,192,1);
  margin: 8px;
}
.swatch.gray:before {
  content: "gray rgba(12,12,12,1) rgba(192,192,192,1)";
}

.lerp1 {
  color: rgba(128,0,64,1);
  background: rgba(128,0,64,1);
}

.lerp2 {
  color: rgba(128,64,128,1);
  background: rgba(128,64,128,1);
}

.c-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
}

.c {
  font-size: 14px*1.5;
  text-align: center;
  border: 12px solid black;
}
.c-red {
  background: #f44336;
  color: #ffcdd2;
  border-color: #b71c1c;
}
.c-red:after {
  content: "red";
}
.c-pink {
  background: #e91e63;
  color: #f8bbd0;
  border-color: #880e4f;
}
.c-pink:after {
  content: "pink";
}
.c-purple {
  background: #9c27b0;
  color: #e1bee7;
  border-color: #4a148c;
}
.c-purple:after {
  content: "purple";
}
.c-deep-purple {
  background: #673ab7;
  color: #d1c4e9;
  border-color: #311b92;
}
.c-deep-purple:after {
  content: "deep-purple";
}
.c-indigo {
  background: #3f51b5;
  color: #c5cae9;
  border-color: #1a237e;
}
.c-indigo:after {
  content: "indigo";
}
.c-light-blue {
  background: #03a9f4;
  color: #b3e5fc;
  border-color: #01579b;
}
.c-light-blue:after {
  content: "light-blue";
}
.c-cyan {
  background: #00bcd4;
  color: #b2ebf2;
  border-color: #006064;
}
.c-cyan:after {
  content: "cyan";
}
.c-teal {
  background: #009688;
  color: #b2dfdb;
  border-color: #004d40;
}
.c-teal:after {
  content: "teal";
}
.c-green {
  background: #4caf50;
  color: #c8e6c9;
  border-color: #1b5e20;
}
.c-green:after {
  content: "green";
}
.c-light-green {
  background: #8bc34a;
  color: #dcedc8;
  border-color: #33691e;
}
.c-light-green:after {
  content: "light-green";
}
.c-lime {
  background: #cddc39;
  color: #f0f4c3;
  border-color: #827717;
}
.c-lime:after {
  content: "lime";
}
.c-yellow {
  background: #ffeb3b;
  color: #fff9c4;
  border-color: #f57f17;
}
.c-yellow:after {
  content: "yellow";
}
.c-amber {
  background: #ffc107;
  color: #ffecb3;
  border-color: #ff6f00;
}
.c-amber:after {
  content: "amber";
}
.c-orange {
  background: #ff9800;
  color: #ffe0b2;
  border-color: #e65100;
}
.c-orange:after {
  content: "orange";
}
.c-deep-orange {
  background: #ff5722;
  color: #ffccbc;
  border-color: #bf360c;
}
.c-deep-orange:after {
  content: "deep-orange";
}
.c-brown {
  background: #795548;
  color: #d7ccc8;
  border-color: #3e2723;
}
.c-brown:after {
  content: "brown";
}
.c-grey {
  background: #9e9e9e;
  color: #f5f5f5;
  border-color: #212121;
}
.c-grey:after {
  content: "grey";
}
.c-blue-gray {
  background: #607d8b;
  color: #cfd8dc;
  border-color: #263238;
}
.c-blue-gray:after {
  content: "blue-gray";
}

.cmdc-0 {
  background: #f50057;
}

.cmdc-1 {
  background: #ff1744;
}

.cmdc-2 {
  background: #ff5252;
}

.cmdc-3 {
  background: #ff3d00;
}

.cmdc-4 {
  background: #f44336;
}

.cmdc-5 {
  background: #ff5252;
}

.cmdc-6 {
  background: #ff6d00;
}

.cmdc-7 {
  background: #f57f17;
}

.cmdc-8 {
  background: #ff8a80;
}

.cmdc-9 {
  background: #ef9a9a;
}