Skip to content

Instantly share code, notes, and snippets.

@Vasso
Last active August 29, 2015 14:14
Show Gist options
  • Select an option

  • Save Vasso/093cbbd558f1b2a4b0ed to your computer and use it in GitHub Desktop.

Select an option

Save Vasso/093cbbd558f1b2a4b0ed to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div class="ec-table">
<div class="ec-table__list-head">
<div class="ec-table__row">
<div class="ec-table__cell ec-table__cell--tiers"></div>
<div class="ec-table__cell"></div>
<div class="ec-table__cell"></div>
<div class="ec-table__cell"></div>
</div>
</div>
<!-- with nested table -->
<div class="ec-table__list-body">
<div class="ec-table__list-item">
<div class="ec-table__row">
<div class="ec-table__cell ec-table__cell--tiers"></div>
<div class="ec-table__cell"></div>
<div class="ec-table__cell"></div>
<div class="ec-table__cell"></div>
</div>
<div class="app-proc">
<div class="ec-table ec-table--nested ec-table--small"></div>
</div>
</div>
</div>
<!-- without nested table -->
<div class="ec-table__list-body">
<div class="ec-table__row">
<div class="ec-table__cell ec-table__cell--tiers"></div>
<div class="ec-table__cell"></div>
<div class="ec-table__cell"></div>
<div class="ec-table__cell"></div>
</div>
</div>
</div>
// ----
// Sass (v3.4.11)
// Compass (v1.0.3)
// ----
$blue: #4183c4;
$gray: #eeeeee;
$primary-color: $blue;
$secondary-color: $gray;
.ec-table {
color: $primary-color;
&__list-head {
font-size: 16px;
.ec-table__cell {
font-weight: bold;
}
}
&__list-body {
color: $secondary-color;
}
&__list-item {
color: $primary-color;
}
&__row {
color: $primary-color;
}
&__cell {
color: $primary-color;
&--tiers {
font-size: 1px;
}
}
&--nested {
.ec-table__row {
color: $secondary-color;
}
}
&--small {
height: 100px;
.ec-table__list-head {
font-size: 12px;
.ec-table__cell {
font-weight: bold;
}
}
.ec-table__row {
height: 20px;
}
}
}
.ec-table {
color: #4183c4;
}
.ec-table__list-head {
font-size: 16px;
}
.ec-table__list-head .ec-table__cell {
font-weight: bold;
}
.ec-table__list-body {
color: #eeeeee;
}
.ec-table__list-item {
color: #4183c4;
}
.ec-table__row {
color: #4183c4;
}
.ec-table__cell {
color: #4183c4;
}
.ec-table__cell--tiers {
font-size: 1px;
}
.ec-table--nested .ec-table__row {
color: #eeeeee;
}
.ec-table--small {
height: 100px;
}
.ec-table--small .ec-table__list-head {
font-size: 12px;
}
.ec-table--small .ec-table__list-head .ec-table__cell {
font-weight: bold;
}
.ec-table--small .ec-table__row {
height: 20px;
}
<div class="ec-table">
<div class="ec-table__list-head">
<div class="ec-table__row">
<div class="ec-table__cell ec-table__cell--tiers"></div>
<div class="ec-table__cell"></div>
<div class="ec-table__cell"></div>
<div class="ec-table__cell"></div>
</div>
</div>
<!-- with nested table -->
<div class="ec-table__list-body">
<div class="ec-table__list-item">
<div class="ec-table__row">
<div class="ec-table__cell ec-table__cell--tiers"></div>
<div class="ec-table__cell"></div>
<div class="ec-table__cell"></div>
<div class="ec-table__cell"></div>
</div>
<div class="app-proc">
<div class="ec-table ec-table--nested ec-table--small"></div>
</div>
</div>
</div>
<!-- without nested table -->
<div class="ec-table__list-body">
<div class="ec-table__row">
<div class="ec-table__cell ec-table__cell--tiers"></div>
<div class="ec-table__cell"></div>
<div class="ec-table__cell"></div>
<div class="ec-table__cell"></div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment