Created
July 18, 2015 00:58
-
-
Save danoc/048bbdabb96a62fa6cd7 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// 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; | |
} | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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