Permalink
Browse files

feat(expandable table): expandable table now imports styles from tabl…

…e and expandable
  • Loading branch information...
lara-aigmueller committed Sep 14, 2016
1 parent b6a1881 commit fb0896cb8c66d891bae56a250750784df09432b5
Showing with 112 additions and 94 deletions.
  1. +56 −48 src/expandable/expandable.scss
  2. +2 −0 src/table-expandable/table-expandable.scss
  3. +54 −46 src/table/table.scss
@@ -1,61 +1,69 @@
@import "../common/variables";
.expandable {
$includedExpandable: false !default;
}
@if ($includedExpandable == false) {
.expandable__trigger {
display: inline-block;
position: relative;
padding-left: 32px;
text-decoration: none;
color: $turquoise-500;
}
.expandable {
.expandable__trigger:hover {
text-decoration: none;
color: $turquoise-700;
}
}
.expandable__trigger:before {
content: " ";
position: absolute;
background-image: url(/assets/images/icons/dropdown_open.svg);
background-size: 1em;
width: 40px;
height: 40px;
background-repeat: no-repeat;
background-position: center;
left: 0;
top: 50%;
transform: translate(0, -50%) rotate(0);
transition: transform 0.3s ease;
}
.expandable__trigger {
display: inline-block;
position: relative;
padding-left: 32px;
text-decoration: none;
color: $turquoise-500;
}
.expandable__trigger--right {
padding-left: 0;
padding-right: 32px;
}
.expandable__trigger:hover {
text-decoration: none;
color: $turquoise-700;
}
.expandable__trigger--right:before {
left: auto;
right: 0;
}
.expandable__trigger:before {
content: " ";
position: absolute;
background-image: url(/assets/images/icons/dropdown_open.svg);
background-size: 1em;
width: 40px;
height: 40px;
background-repeat: no-repeat;
background-position: center;
left: 0;
top: 50%;
transform: translate(0, -50%) rotate(0);
transition: transform 0.3s ease;
}
.expandable__content {
display: none;
}
.expandable__trigger--right {
padding-left: 0;
padding-right: 32px;
}
.expandable.is-active {
border-top: 2px solid;
border-bottom: 2px solid;
border-color: $turquoise-500;
}
.expandable__trigger--right:before {
left: auto;
right: 0;
}
.expandable.is-expanded .expandable__trigger:before {
transform: translate(0, -50%) rotate(180deg);
}
.expandable__content {
display: none;
}
.expandable.is-active {
border-top: 2px solid;
border-bottom: 2px solid;
border-color: $turquoise-500;
}
.expandable.is-expanded .expandable__trigger:before {
transform: translate(0, -50%) rotate(180deg);
}
.expandable.is-expanded .expandable__content {
display: block;
}
$includedExpandable: true;
.expandable.is-expanded .expandable__content {
display: block;
}
@@ -1,4 +1,6 @@
@import "../common/variables";
@import "../expandable/expandable";
@import "../table/table";
$expandable-table-background-color: $purple-100;
$expandable-table-border-color: $purple-500;
View
@@ -1,57 +1,65 @@
@import "../common/variables";
// REVIEW: Rethink specificity
$includedTable: false !default;
.table {
border-spacing: 0;
font-size: 14px;
line-height: 1.4em;
font-family: $mainfont;
}
@if ($includedTable == false) {
.table th,
.table td {
padding-left: 12px;
padding-right: 12px;
}
// REVIEW: Rethink specificity
.table td {
height: 60px;
}
.table {
border-spacing: 0;
font-size: 14px;
line-height: 1.4em;
font-family: $mainfont;
}
.table thead th {
text-align: left;
font-weight: normal;
font-size: 13px;
position: relative;
overflow: hidden;
}
.table th,
.table td {
padding-left: 12px;
padding-right: 12px;
}
.table thead th:after {
content: " ";
height: 1px;
position: absolute;
bottom: 5px;
margin-left: 5px;
width: 100%;
background-color: $gray-200;
}
.table td {
height: 60px;
}
.table thead th:before {
content: " ";
height: 1px;
position: absolute;
bottom: 5px;
right: 0;
width: 10px;
background-color: #fff;
z-index: 2;
}
.table thead th {
text-align: left;
font-weight: normal;
font-size: 13px;
position: relative;
overflow: hidden;
}
.table thead th:last-child:before {
display: none;
}
.table thead th:after {
content: " ";
height: 1px;
position: absolute;
bottom: 5px;
margin-left: 5px;
width: 100%;
background-color: $gray-200;
}
.table thead th:before {
content: " ";
height: 1px;
position: absolute;
bottom: 5px;
right: 0;
width: 10px;
background-color: #fff;
z-index: 2;
}
.table thead th:last-child:before {
display: none;
}
.table tr:nth-child(2n) {
background-color: $gray-100;
}
$includedTable: true;
.table tr:nth-child(2n) {
background-color: $gray-100;
}

0 comments on commit fb0896c

Please sign in to comment.