wecui/packages/wecui-css/node_modules/postcss-neat/demo/output.css

一款基于Vue2.x版本的移动端web组件

/* greens */

/* blues */

/* violets */

/* blacks / dark blues */

/* yellows */

/* oranges */

/* reds */

/* whites */

/* grays */

/* -- */

*,
*:before,
*:after {
  box-sizing: border-box;
}

html,
body {
  background: #fefefe;
  color: #fefefe;
  font: normal 16px/1em 'Lato';
  margin: 0;
  min-width: 315px;
  padding: 0;
}

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

.u-light-bg {
  background: #1abc9c;
}

.u-dark-bg {
  background: #17a689;
}

.u-alt-bg {
  background: #148f77;
}

.u-block {
  min-height: 80px;
  line-height: 1.25em;
  padding: 10px;
}

@media only screen and (min-width: 331px) and (max-width: 500px) {
  .u-block {
    font-size: .85em;
    padding: 5px;
    word-wrap: break-word;
  }
}

@media only screen and (max-width: 330px) {
  .u-block {
    font-size: 0;
    padding: 0;
  }
}

.u-buffer-bottom {
  padding-bottom: 20px;
}

.outer-container {
  max-width: 64em;
  margin-left: auto;
  margin-right: auto;
  *zoom: 1;
}

.outer-container:before, .outer-container:after {
  content: " ";
  display: table;
}

.outer-container:after {
  clear: both;
}

header,
footer {
  background: #1abc9c;
  padding: 20px;
  width: 100%;
}

header h1, footer h1 {
  cursor: default;
  font-size: 1.5em;
  font-weight: normal;
  line-height: 1.25em;
  margin: 0;
  padding: 0;
}

.global-wrapper {
  max-width: 64em;
  margin-left: auto;
  margin-right: auto;
  *zoom: 1; /* defaults to 1 12 */
  padding-bottom: 40px;
  position: relative;
}

.global-wrapper:before, .global-wrapper:after {
  content: " ";
  display: table;
}

.global-wrapper:after {
  clear: both;
}

.global-wrapper:after {
  background: linear-gradient(to right,#ecf0f1 0.00000000%, #ecf0f1 6.17215270%,transparent 6.17215270%, transparent 8.52980430%,#ecf0f1 8.52980430%, #ecf0f1 14.70195700%,transparent 14.70195700%, transparent 17.05960860%,#ecf0f1 17.05960860%, #ecf0f1 23.23176130%,transparent 23.23176130%, transparent 25.58941290%,#ecf0f1 25.58941290%, #ecf0f1 31.76156560%,transparent 31.76156560%, transparent 34.11921720%,#ecf0f1 34.11921720%, #ecf0f1 40.29136990%,transparent 40.29136990%, transparent 42.64902150%,#ecf0f1 42.64902150%, #ecf0f1 48.82117420%,transparent 48.82117420%, transparent 51.17882580%,#ecf0f1 51.17882580%, #ecf0f1 57.35097850%,transparent 57.35097850%, transparent 59.70863010%,#ecf0f1 59.70863010%, #ecf0f1 65.88078280%,transparent 65.88078280%, transparent 68.23843440%,#ecf0f1 68.23843440%, #ecf0f1 74.41058710%,transparent 74.41058710%, transparent 76.76823870%,#ecf0f1 76.76823870%, #ecf0f1 82.94039140%,transparent 82.94039140%, transparent 85.29804300%,#ecf0f1 85.29804300%, #ecf0f1 91.47019570%,transparent 91.47019570%, transparent 93.82784730%,#ecf0f1 93.82784730%, #ecf0f1 100.00000000%);
  bottom: 0;
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.section-block {
  position: relative;
  z-index: 1;
}

.outer-container__heading {
  color: #34495e;
  cursor: default;
  font-size: 1.15em;
  font-weight: bold;
  margin: 0;
  padding: 40px 0 20px;
}

.outer-container__top-label {
  font-size: 1.05em;
  padding-bottom: 20px;
}

/* -- */
.basic__outer {
  max-width: 64em;
  margin-left: auto;
  margin-right: auto;
  *zoom: 1;
  padding: 20px 0;
}
.basic__outer:before, .basic__outer:after {
  content: " ";
  display: table;
}
.basic__outer:after {
  clear: both;
}

.basic__outer__col {
  display: block;
  float: left;
  margin-right: 2.35765160%;
  width: 48.82117420%;
}

.basic__outer__col:last-child {
  margin-right: 0;
}

/* -- */
.multiple-rows__outer {
  max-width: 64em;
  margin-left: auto;
  margin-right: auto;
  *zoom: 1;
  padding: 20px 0 0;
}
.multiple-rows__outer .u-block {
  margin-bottom: 20px;
}
.multiple-rows__outer:before, .multiple-rows__outer:after {
  content: " ";
  display: table;
}
.multiple-rows__outer:after {
  clear: both;
}

.multiple-rows__1 {
  display: block;
  float: left;
  margin-right: 2.35765160%;
  width: 6.17215270%;
}

.multiple-rows__1:last-child {
  margin-right: 0;
}

.multiple-rows__11 {
  display: block;
  float: left;
  margin-right: 2.35765160%;
  width: 91.47019570%;
  margin-right: 0;
}

.multiple-rows__11:last-child {
  margin-right: 0;
}

.multiple-rows__2 {
  display: block;
  float: left;
  margin-right: 2.35765160%;
  width: 14.70195700%;
}

.multiple-rows__2:last-child {
  margin-right: 0;
}

.multiple-rows__10 {
  display: block;
  float: left;
  margin-right: 2.35765160%;
  width: 82.94039140%;
  margin-right: 0;
}

.multiple-rows__10:last-child {
  margin-right: 0;
}

.multiple-rows__3 {
  display: block;
  float: left;
  margin-right: 2.35765160%;
  width: 23.23176130%;
}

.multiple-rows__3:last-child {
  margin-right: 0;
}

.multiple-rows__9 {
  display: block;
  float: left;
  margin-right: 2.35765160%;
  width: 74.41058710%;
  margin-right: 0;
}

.multiple-rows__9:last-child {
  margin-right: 0;
}

.multiple-rows__4 {
  display: block;
  float: left;
  margin-right: 2.35765160%;
  width: 31.76156560%;
}

.multiple-rows__4:last-child {
  margin-right: 0;
}

.multiple-rows__8 {
  display: block;
  float: left;
  margin-right: 2.35765160%;
  width: 65.88078280%;
  margin-right: 0;
}

.multiple-rows__8:last-child {
  margin-right: 0;
}

.multiple-rows__5 {
  display: block;
  float: left;
  margin-right: 2.35765160%;
  width: 40.29136990%;
}

.multiple-rows__5:last-child {
  margin-right: 0;
}

.multiple-rows__7 {
  display: block;
  float: left;
  margin-right: 2.35765160%;
  width: 57.35097850%;
  margin-right: 0;
}

.multiple-rows__7:last-child {
  margin-right: 0;
}

.multiple-rows__6 {
  display: block;
  float: left;
  margin-right: 2.35765160%;
  width: 48.82117420%;
}

.multiple-rows__6:last-child {
  margin-right: 0;
}

/* -- */
.nesting-columns__outer {
  max-width: 64em;
  margin-left: auto;
  margin-right: auto;
  *zoom: 1;
  padding: 20px 0;
}
.nesting-columns__outer:before, .nesting-columns__outer:after {
  content: " ";
  display: table;
}
.nesting-columns__outer:after {
  clear: both;
}

.nesting-columns__4 {
  display: block;
  float: left;
  margin-right: 2.35765160%;
  width: 31.76156560%;
}

.nesting-columns__4:last-child {
  margin-right: 0;
}

.nesting-columns__8 {
  display: block;
  float: left;
  margin-right: 2.35765160%;
  width: 65.88078280%;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}

.nesting-columns__8:last-child {
  margin-right: 0;
}

.multiple-rows__48 {
  display: block;
  float: left;
  margin-right: 3.57866361%;
  width: 48.21066820%;
}

.multiple-rows__48:last-child {
  margin-right: 0;
}

/* -- */
.table__outer {
  max-width: 64em;
  margin-left: auto;
  margin-right: auto;
  *zoom: 1;
  padding: 20px 0 0;
}
.table__outer:before, .table__outer:after {
  content: " ";
  display: table;
}
.table__outer:after {
  clear: both;
}

.table__row {
  box-sizing: border-box;
  width: 100%;
  display: table;
  table-layout: fixed;
  box-sizing: border-box;
  width: 100%;
}

.table__cell--4 {
  display: table-cell;
  width: 33.33333333%;
  padding: 2.35765160%;

  /* just a visual thing */
  border-right: 1px solid #17a689;
}

/* this is also visual thing */
@media only screen and (max-width: 330px) {
  .table__cell--4 {
    padding-bottom: 40px;
  }
}

.table__cell--8 {
  display: table-cell;
  width: 66.66666667%;
  padding: 2.35765160%;
}

/* -- */
.shift__outer {
  max-width: 64em;
  margin-left: auto;
  margin-right: auto;
  *zoom: 1;
  padding: 20px 0;
}
.shift__outer:before, .shift__outer:after {
  content: " ";
  display: table;
}
.shift__outer:after {
  clear: both;
}

.shift__nested {
  display: block;
  float: left;
  margin-right: 2.35765160%;
  width: 48.82117420%;
  margin-left: 25.58941290%;
}

.shift__nested:last-child {
  margin-right: 0;
}

/* -- */
.auto-rows__outer {
  padding: 20px 0 0;
}

.auto-rows__list {
  max-width: 64em;
  margin-left: auto;
  margin-right: auto;
  *zoom: 1;
}

.auto-rows__list:before, .auto-rows__list:after {
  content: " ";
  display: table;
}

.auto-rows__list:after {
  clear: both;
}

.auto-rows__list__item {
  display: block;
  float: left;
  margin-right: 2.35765160%;
  width: 23.23176130%;
  margin-bottom: 20px;
  min-height: 140px;
}

.auto-rows__list__item:last-child {
  margin-right: 0;
}

.auto-rows__list__item:nth-child(4n) {
  margin-right: 0;
}

.auto-rows__list__item:nth-child(4n + 1) {
  clear: left;
}

/* -- */
.mixed__outer {
  max-width: 64em;
  margin-left: auto;
  margin-right: auto;
  *zoom: 1;
  padding: 20px 0;
}
.mixed__outer:before, .mixed__outer:after {
  content: " ";
  display: table;
}
.mixed__outer:after {
  clear: both;
}

.mixed__list {
  max-width: 64em;
  margin-left: auto;
  margin-right: auto;
  *zoom: 1;
}

.mixed__list:before, .mixed__list:after {
  content: " ";
  display: table;
}

.mixed__list:after {
  clear: both;
}

.mixed__list__item {
  display: block;
  float: left;
  margin-right: 2.35765160%;
  width: 23.23176130%;
  margin-bottom: 20px;
  min-height: 180px;
}

.mixed__list__item:nth-child(4) {
  margin-left: 25.58941290%;
}

.mixed__list__item:last-child {
  margin-right: 0;
}

.mixed__list__item:nth-child(3n) {
  margin-right: 0;
}

.mixed__list__item:nth-child(3n + 1) {
  clear: left;
}

/* -- */
.media__outer {
  max-width: 64em;
  margin-left: auto;
  margin-right: auto;
  *zoom: 1;
  padding: 20px 0;
}
.media__outer:before, .media__outer:after {
  content: " ";
  display: table;
}
.media__outer:after {
  clear: both;
}

.media__4 {
  display: block;
  float: left;
  margin-right: 2.35765160%;
  width: 31.76156560%;
}

.media__4:last-child {
  margin-right: 0;
}

@media (max-width: 500px) {
  .media__4 {
    display: block;
    float: left;
    margin-right: 2.35765160%;
    width: 48.82117420%;
  }
  .media__4:last-child {
    margin-right: 0;
  }
}

.media__8 {
  display: block;
  float: left;
  margin-right: 2.35765160%;
  width: 65.88078280%;
}

.media__8:last-child {
  margin-right: 0;
}

@media (max-width: 500px) {
  .media__8 {
    display: block;
    float: left;
    margin-right: 2.35765160%;
    width: 48.82117420%;
  }
  .media__8:last-child {
    margin-right: 0;
  }
}