Generalize dropdown CSS

This commit is contained in:
John Furrow
2015-11-08 00:48:25 -08:00
parent 32dd4a54a1
commit b223e88816
2 changed files with 43 additions and 25 deletions
+1 -25
View File
@@ -63,6 +63,7 @@
&__group {
display: inline-block;
font-size: 0;
padding: 0 15px;
&--has-divider {
@@ -92,31 +93,6 @@
.dropdown {
margin: 5px 0 0 15px;
&__label {
color: $dropdown--label;
cursor: pointer;
display: block;
font-size: 0.65em;
font-weight: 500;
letter-spacing: 0.1em;
line-height: 0.9em;
text-transform: uppercase;
}
&__value {
color: $dropdown--value;
&:after {
border-top: 5px solid $dropdown--value;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
content: '';
display: inline-block;
margin-left: 10px;
vertical-align: middle;
}
}
&__content {
min-width: 250px;
}
+42
View File
@@ -26,6 +26,48 @@
z-index: 2;
}
&.is-expanded {
.dropdown {
&__header {
.dropdown {
&__value {
color: $dropdown--value--active;
}
}
}
}
}
&__label {
color: $dropdown--label;
cursor: pointer;
display: block;
font-size: 0.65em;
font-weight: 500;
letter-spacing: 0.1em;
line-height: 0.9em;
text-transform: uppercase;
}
&__value {
color: $dropdown--value;
transition: color 0.25s;
&:after {
border-top: 5px solid $dropdown--value;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
content: '';
display: inline-block;
margin-left: 10px;
vertical-align: middle;
}
}
&__header {
position: relative;