tachyons.css

/* ========================================================================== */

/* Exports from Tachyons */

/* Border */

.ba { border-style: solid; border-width: 1px; }
.bt { border-top-style: solid; border-top-width: 1px; }
.br { border-right-style: solid; border-right-width: 1px; }
.bb { border-bottom-style: solid; border-bottom-width: 1px; }
.bl { border-left-style: solid; border-left-width: 1px; }
.bn { border-style: none; border-width: 0; }
.b--dotted { border-style: dotted; }
.b--dashed { border-style: dashed; }
.b--solid {  border-style: solid; }
.b--none {   border-style: none; }
.bw0 { border-width: 0; }
.bw1 { border-width: .125rem; }
.bw2 { border-width: .25rem; }
.bw3 { border-width: .5rem; }
.bw4 { border-width: 1rem; }
.bw5 { border-width: 2rem; }

/* Border Radius */

.br0 {        border-radius: 0; }
.br1 {        border-radius: .125rem; }
.br2 {        border-radius: .25rem; }
.br3 {        border-radius: .5rem; }
.br4 {        border-radius: 1rem; }
.br-100 {     border-radius: 100%; }
.br-pill {    border-radius: 9999px; }
.br--bottom {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.br--top {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.br--right {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.br--left {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Flexbox */

.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-none { flex: none; }
.flex-column  { flex-direction: column; }
.flex-row     { flex-direction: row; }
.flex-wrap    { flex-wrap: wrap; }
.flex-nowrap    { flex-wrap: nowrap; }
.flex-wrap-reverse    { flex-wrap: wrap-reverse; }
.flex-column-reverse  { flex-direction: column-reverse; }
.flex-row-reverse     { flex-direction: row-reverse; }
.items-start    { align-items: flex-start; }
.items-end      { align-items: flex-end; }
.items-center   { align-items: center; }
.items-baseline { align-items: baseline; }
.items-stretch  { align-items: stretch; }
.self-start    { align-self: flex-start; }
.self-end      { align-self: flex-end; }
.self-center   { align-self: center; }
.self-baseline { align-self: baseline; }
.self-stretch  { align-self: stretch; }
.justify-start   { justify-content: flex-start; }
.justify-end     { justify-content: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }
.content-start   { align-content: flex-start; }
.content-end     { align-content: flex-end; }
.content-center  { align-content: center; }
.content-between { align-content: space-between; }
.content-around  { align-content: space-around; }
.content-stretch { align-content: stretch; }

/* Font Style */

.i      { font-style: italic; }
.normal { font-weight: normal; }
.b      { font-weight: bold; }
.fw1    { font-weight: 100; }
.fw2    { font-weight: 200; }
.fw3    { font-weight: 300; }
.fw4    { font-weight: 400; }
.fw5    { font-weight: 500; }
.fw6    { font-weight: 600; }
.fw7    { font-weight: 700; }
.fw8    { font-weight: 800; }
.fw9    { font-weight: 900; }

/* Height */

.h1 { height: 1rem; }
.h2 { height: 2rem; }
.h3 { height: 4rem; }
.h4 { height: 8rem; }
.h5 { height: 16rem; }
.h-25 {  height:  25%; }
.h-50 {  height:  50%; }
.h-75 {  height:  75%; }
.h-100 { height: 100%; }
.vh-25 {  height:  25vh; }
.vh-50 {  height:  50vh; }
.vh-75 {  height:  75vh; }
.vh-100 { height: 100vh; }
.min-vh-100 { min-height: 100vh; }
.h-auto {     height: auto; }
.h-inherit {  height: inherit; }

/* Line Height */

.lh-solid { line-height: 1; }
.lh-title { line-height: 1.25; }
.lh-copy  { line-height: 1.5; }

/* Width */

.w1 {    width: 1rem; }
.w2 {    width: 2rem; }
.w3 {    width: 4rem; }
.w4 {    width: 8rem; }
.w5 {    width: 16rem; }
.w-10 {  width:  10%; }
.w-20 {  width:  20%; }
.w-25 {  width:  25%; }
.w-30 {  width:  30%; }
.w-33 {  width:  33%; }
.w-34 {  width:  34%; }
.w-40 {  width:  40%; }
.w-50 {  width:  50%; }
.w-60 {  width:  60%; }
.w-70 {  width:  70%; }
.w-75 {  width:  75%; }
.w-80 {  width:  80%; }
.w-90 {  width:  90%; }
.w-100 { width: 100%; }
.w-third { width: calc(100% / 3); }
.w-two-thirds { width: calc(100% / 1.5); }
.w-auto { width: auto; }
.mw1  {  max-width: 1rem; }
.mw2  {  max-width: 2rem; }
.mw3  {  max-width: 4rem; }
.mw4  {  max-width: 8rem; }
.mw5  {  max-width: 16rem; }
.mw6  {  max-width: 32rem; }
.mw7  {  max-width: 48rem; }
.mw8  {  max-width: 64rem; }
.mw9  {  max-width: 96rem; }
.mw-100  { max-width: 100%; }

/* Position */

.static { position: static; }
.relative  { position: relative; }
.absolute  { position: absolute; }
.fixed  { position: fixed; }
.top-0    { top:    0; }
.right-0  { right:  0; }
.bottom-0 { bottom: 0; }
.left-0   { left:   0; }
.top-1    { top:    1rem; }
.right-1  { right:  1rem; }
.bottom-1 { bottom: 1rem; }
.left-1   { left:   1rem; }
.top-2    { top:    2rem; }
.right-2  { right:  2rem; }
.bottom-2 { bottom: 2rem; }
.left-2   { left:   2rem; }
.top--1    { top:    -1rem; }
.right--1  { right:  -1rem; }
.bottom--1 { bottom: -1rem; }
.left--1   { left:   -1rem; }
.top--2    { top:    -2rem; }
.right--2  { right:  -2rem; }
.bottom--2 { bottom: -2rem; }
.left--2   { left:   -2rem; }
.absolute--fill {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* Text Align */

.tl  { text-align: left; }
.tr  { text-align: right; }
.tc  { text-align: center; }
.tj  { text-align: justify; }

/* Font Size */

.f1 { font-size: 3rem; }
.f2 { font-size: 2.25rem; }
.f3 { font-size: 1.5rem; }
.f4 { font-size: 1.25rem; }
.f5 { font-size: 1rem; }
.f6 { font-size: .875rem; }

/* Utilities */

.center {
  margin-right:auto;
  margin-left:auto;
}

/* Vertical Align */	

.v-base     { vertical-align: baseline; }
.v-mid      { vertical-align: middle; }
.v-top      { vertical-align: top; }
.v-btm      { vertical-align: bottom; }

/* Colors */

.gray { color: #777777; }
.silver { color: #999999; }
.light-silver { color: #AAAAAA; }
.moon-gray { color: #CCCCCC; }
.light-gray { color: #EEEEEE; }
.near-white { color: #F4F4F4; }
.white { color: #FFFFFF; }
.dark-red { color: #E7040F; }
.red { color: #FF4136; }
.light-red { color: #FF725C; }
.orange { color: #FF6300; }
.gold { color: #FFB700; }
.yellow { color: #FFD700; }
.light-yellow { color: #FBF1A9; }
.light-purple { color: #A463F2; }
.dark-pink { color: #D5008F; }
.hot-pink { color: #FF41B4; }
.pink { color: #FF80CC; }
.light-pink { color: #FFA3D7; }
.dark-green { color: #137752; }
.green { color: #19A974; }
.light-green { color: #9EEBCF; }
.blue { color: #357EDD; }
.light-blue { color: #96CCFF; }
.lightest-blue { color: #CDECFF; }
.washed-blue { color: #F6FFFE; }
.washed-green { color: #E8FDF5; }
.washed-yellow { color: #FFFCEB; }
.washed-red { color: #FFDFDF; }
.black { color: #000000; }
.near-black { color: #111111; }
.dark-gray { color: #333333; }
.mid-gray { color: #555555; }
.gray { color: #777777; }
.dark-red { color: #E7040F; }
.red { color: #FF4136; }
.purple { color: #5E2CA5; }
.light-purple { color: #A463F2; }
.dark-pink { color: #D5008F; }
.dark-green { color: #137752; }
.navy { color: #001B44; }
.dark-blue { color: #00449E; }
.blue { color: #357EDD; }

/* Background Colors */

.bg-gray { background-color: #777777; }
.bg-silver { background-color: #999999; }
.bg-light-silver { background-color: #AAAAAA; }
.bg-moon-gray { background-color: #CCCCCC; }
.bg-light-gray { background-color: #EEEEEE; }
.bg-near-white { background-color: #F4F4F4; }
.bg-white { background-color: #FFFFFF; }
.bg-dark-red { background-color: #E7040F; }
.bg-red { background-color: #FF4136; }
.bg-light-red { background-color: #FF725C; }
.bg-orange { background-color: #FF6300; }
.bg-gold { background-color: #FFB700; }
.bg-yellow { background-color: #FFD700; }
.bg-light-yellow { background-color: #FBF1A9; }
.bg-light-purple { background-color: #A463F2; }
.bg-dark-pink { background-color: #D5008F; }
.bg-hot-pink { background-color: #FF41B4; }
.bg-pink { background-color: #FF80CC; }
.bg-light-pink { background-color: #FFA3D7; }
.bg-dark-green { background-color: #137752; }
.bg-green { background-color: #19A974; }
.bg-light-green { background-color: #9EEBCF; }
.bg-blue { background-color: #357EDD; }
.bg-light-blue { background-color: #96CCFF; }
.bg-lightest-blue { background-color: #CDECFF; }
.bg-washed-blue { background-color: #F6FFFE; }
.bg-washed-green { background-color: #E8FDF5; }
.bg-washed-yellow { background-color: #FFFCEB; }
.bg-washed-red { background-color: #FFDFDF; }
.bg-black { background-color: #000000; }
.bg-near-black { background-color: #111111; }
.bg-dark-gray { background-color: #333333; }
.bg-mid-gray { background-color: #555555; }
.bg-gray { background-color: #777777; }
.bg-dark-red { background-color: #E7040F; }
.bg-red { background-color: #FF4136; }
.bg-purple { background-color: #5E2CA5; }
.bg-light-purple { background-color: #A463F2; }
.bg-dark-pink { background-color: #D5008F; }
.bg-dark-green { background-color: #137752; }
.bg-navy { background-color: #001B44; }
.bg-dark-blue { background-color: #00449E; }
.bg-blue { background-color: #357EDD; }

/* Padding */

.pa0 { padding: 0; }
.pa1 { padding: .25rem; }
.pa2 { padding: .5rem; }
.pa3 { padding: 1rem; }
.pa4 { padding: 2rem; }
.pa5 { padding: 4rem; }
.pa6 { padding: 8rem; }
.pa7 { padding: 16rem; }
.pl0 { padding-left: 0; }
.pl1 { padding-left: .25rem; }
.pl2 { padding-left: .5rem; }
.pl3 { padding-left: 1rem; }
.pl4 { padding-left: 2rem; }
.pl5 { padding-left: 4rem; }
.pl6 { padding-left: 8rem; }
.pl7 { padding-left: 16rem; }
.pr0 { padding-right: 0; }
.pr1 { padding-right: .25rem; }
.pr2 { padding-right: .5rem; }
.pr3 { padding-right: 1rem; }
.pr4 { padding-right: 2rem; }
.pr5 { padding-right: 4rem; }
.pr6 { padding-right: 8rem; }
.pr7 { padding-right: 16rem; }
.pb0 { padding-bottom: 0; }
.pb1 { padding-bottom: .25rem; }
.pb2 { padding-bottom: .5rem; }
.pb3 { padding-bottom: 1rem; }
.pb4 { padding-bottom: 2rem; }
.pb5 { padding-bottom: 4rem; }
.pb6 { padding-bottom: 8rem; }
.pb7 { padding-bottom: 16rem; }
.pt0 { padding-top: 0; }
.pt1 { padding-top: .25rem; }
.pt2 { padding-top: .5rem; }
.pt3 { padding-top: 1rem; }
.pt4 { padding-top: 2rem; }
.pt5 { padding-top: 4rem; }
.pt6 { padding-top: 8rem; }
.pt7 { padding-top: 16rem; }
.pv0 {
  padding-top: 0;
  padding-bottom: 0;
}
.pv1 {
  padding-top: .25rem;
  padding-bottom: .25rem;
}
.pv2 {
  padding-top: .5rem;
  padding-bottom: .5rem;
}
.pv3 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.pv4 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.pv5 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.pv6 {
  padding-top: 8rem;
  padding-bottom: 8rem;
}
.pv7 {
  padding-top: 16rem;
  padding-bottom: 16rem;
}
.ph0 {
  padding-left: 0;
  padding-right: 0;
}
.ph1 {
  padding-left: .25rem;
  padding-right: .25rem;
}
.ph2 {
  padding-left: .5rem;
  padding-right: .5rem;
}
.ph3 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.ph4 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.ph5 {
  padding-left: 4rem;
  padding-right: 4rem;
}
.ph6 {
  padding-left: 8rem;
  padding-right: 8rem;
}
.ph7 {
  padding-left: 16rem;
  padding-right: 16rem;
}

/* Margins */

.ma0  {  margin: 0; }
.ma1 {  margin: .25rem; }
.ma2  {  margin: .5rem; }
.ma3  {  margin: 1rem; }
.ma4  {  margin: 2rem; }
.ma5  {  margin: 4rem; }
.ma6 {  margin: 8rem; }
.ma7 { margin: 16rem; }
.ml0  {  margin-left: 0; }
.ml1 {  margin-left: .25rem; }
.ml2  {  margin-left: .5rem; }
.ml3  {  margin-left: 1rem; }
.ml4  {  margin-left: 2rem; }
.ml5  {  margin-left: 4rem; }
.ml6 {  margin-left: 8rem; }
.ml7 { margin-left: 16rem; }
.mr0  {  margin-right: 0; }
.mr1 {  margin-right: .25rem; }
.mr2  {  margin-right: .5rem; }
.mr3  {  margin-right: 1rem; }
.mr4  {  margin-right: 2rem; }
.mr5  {  margin-right: 4rem; }
.mr6 {  margin-right: 8rem; }
.mr7 { margin-right: 16rem; }
.mb0  {  margin-bottom: 0; }
.mb1 {  margin-bottom: .25rem; }
.mb2  {  margin-bottom: .5rem; }
.mb3  {  margin-bottom: 1rem; }
.mb4  {  margin-bottom: 2rem; }
.mb5  {  margin-bottom: 4rem; }
.mb6 {  margin-bottom: 8rem; }
.mb7 { margin-bottom: 16rem; }
.mt0  {  margin-top: 0; }
.mt1 {  margin-top: .25rem; }
.mt2  {  margin-top: .5rem; }
.mt3  {  margin-top: 1rem; }
.mt4  {  margin-top: 2rem; }
.mt5  {  margin-top: 4rem; }
.mt6 {  margin-top: 8rem; }
.mt7 { margin-top: 16rem; }
.mv0   {
  margin-top: 0;
  margin-bottom: 0;
}
.mv1  {
  margin-top: .25rem;
  margin-bottom: .25rem;
}
.mv2   {
  margin-top: .5rem;
  margin-bottom: .5rem;
}
.mv3   {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.mv4   {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.mv5   {
  margin-top: 4rem;
  margin-bottom: 4rem;
}
.mv6  {
  margin-top: 8rem;
  margin-bottom: 8rem;
}
.mv7  {
  margin-top: 16rem;
  margin-bottom: 16rem;
}

.mh0   {
  margin-left: 0;
  margin-right: 0;
}
.mh1   {
  margin-left: .25rem;
  margin-right: .25rem;
}
.mh2   {
  margin-left: .5rem;
  margin-right: .5rem;
}
.mh3   {
  margin-left: 1rem;
  margin-right: 1rem;
}
.mh4   {
  margin-left: 2rem;
  margin-right: 2rem;
}
.mh5   {
  margin-left: 4rem;
  margin-right: 4rem;
}
.mh6  {
  margin-left: 8rem;
  margin-right: 8rem;
}
.mh7  {
  margin-left: 16rem;
  margin-right: 16rem;
}

/* Opacity */

.o-100 { opacity: 1;    }
.o-90  { opacity: .9;   }
.o-80  { opacity: .8;   }
.o-70  { opacity: .7;   }
.o-60  { opacity: .6;   }
.o-50  { opacity: .5;   }
.o-40  { opacity: .4;   }
.o-30  { opacity: .3;   }
.o-20  { opacity: .2;   }
.o-10  { opacity: .1;   }
.o-05  { opacity: .05;  }
.o-025 { opacity: .025; }
.o-0   { opacity: 0; }