Skip to content

Instantly share code, notes, and snippets.

@danoc
Created July 18, 2015 00:58
Show Gist options
  • Save danoc/048bbdabb96a62fa6cd7 to your computer and use it in GitHub Desktop.
Save danoc/048bbdabb96a62fa6cd7 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----
$list-tree-chain-base: '.list-tree__list';
$list-tree-chain: '';
$list-tree-chain-tail: '.list-tree__item';
$max-supported-tree-depth: 30;
$arrow-width: 22px;
// Indent the view tree by generating a bunch of nested
// selectors. We use this approach instead of using
// normal list margin/padding because we want the hover
// effect to use 100% width.
//
// Output:
// http://sassmeister.com/gist/856f20d9a060afbe89db
@for $i from 1 through $max-supported-tree-depth {
$list-tree-chain: 'ul ' + $list-tree-chain;
#{$list-tree-chain-base + ' ' + $list-tree-chain + ' ' + $list-tree-chain-tail} {
padding-left: ($arrow-width / 2) * $i;
&--no-children {
// Items without children get extra padding
// since there is no dropdown arrow.
padding-left: ($arrow-width / 2) * $i + $arrow-width;
}
}
}
.list-tree__list ul .list-tree__item {
padding-left: 11px;
}
.list-tree__list ul .list-tree__item--no-children {
padding-left: 33px;
}
.list-tree__list ul ul .list-tree__item {
padding-left: 22px;
}
.list-tree__list ul ul .list-tree__item--no-children {
padding-left: 44px;
}
.list-tree__list ul ul ul .list-tree__item {
padding-left: 33px;
}
.list-tree__list ul ul ul .list-tree__item--no-children {
padding-left: 55px;
}
.list-tree__list ul ul ul ul .list-tree__item {
padding-left: 44px;
}
.list-tree__list ul ul ul ul .list-tree__item--no-children {
padding-left: 66px;
}
.list-tree__list ul ul ul ul ul .list-tree__item {
padding-left: 55px;
}
.list-tree__list ul ul ul ul ul .list-tree__item--no-children {
padding-left: 77px;
}
.list-tree__list ul ul ul ul ul ul .list-tree__item {
padding-left: 66px;
}
.list-tree__list ul ul ul ul ul ul .list-tree__item--no-children {
padding-left: 88px;
}
.list-tree__list ul ul ul ul ul ul ul .list-tree__item {
padding-left: 77px;
}
.list-tree__list ul ul ul ul ul ul ul .list-tree__item--no-children {
padding-left: 99px;
}
.list-tree__list ul ul ul ul ul ul ul ul .list-tree__item {
padding-left: 88px;
}
.list-tree__list ul ul ul ul ul ul ul ul .list-tree__item--no-children {
padding-left: 110px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul .list-tree__item {
padding-left: 99px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul .list-tree__item--no-children {
padding-left: 121px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul .list-tree__item {
padding-left: 110px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul .list-tree__item--no-children {
padding-left: 132px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul .list-tree__item {
padding-left: 121px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul .list-tree__item--no-children {
padding-left: 143px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item {
padding-left: 132px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item--no-children {
padding-left: 154px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item {
padding-left: 143px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item--no-children {
padding-left: 165px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item {
padding-left: 154px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item--no-children {
padding-left: 176px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item {
padding-left: 165px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item--no-children {
padding-left: 187px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item {
padding-left: 176px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item--no-children {
padding-left: 198px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item {
padding-left: 187px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item--no-children {
padding-left: 209px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item {
padding-left: 198px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item--no-children {
padding-left: 220px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item {
padding-left: 209px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item--no-children {
padding-left: 231px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item {
padding-left: 220px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item--no-children {
padding-left: 242px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item {
padding-left: 231px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item--no-children {
padding-left: 253px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item {
padding-left: 242px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item--no-children {
padding-left: 264px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item {
padding-left: 253px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item--no-children {
padding-left: 275px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item {
padding-left: 264px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item--no-children {
padding-left: 286px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item {
padding-left: 275px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item--no-children {
padding-left: 297px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item {
padding-left: 286px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item--no-children {
padding-left: 308px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item {
padding-left: 297px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item--no-children {
padding-left: 319px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item {
padding-left: 308px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item--no-children {
padding-left: 330px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item {
padding-left: 319px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item--no-children {
padding-left: 341px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item {
padding-left: 330px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item--no-children {
padding-left: 352px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment