Last active
December 18, 2015 09:59
-
-
Save jensgro/5765019 to your computer and use it in GitHub Desktop.
Build lists with Sass-placeholders
This file contains hidden or 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.2.9) | |
// --- | |
// ------- Links ----------------------------- | |
%a-tdn-tdu{ | |
text-decoration: none; | |
&:hover, &:focus {text-decoration: underline;} | |
} | |
// -------- Listen ------------------------- | |
// Die Basis - hier werden die Listenmarkierungen und Abstände entfernt. | |
%resetList{ | |
list-style-type: none; | |
&, li { | |
margin-left: 0; | |
padding-left: 0; | |
} | |
} | |
%noList { | |
@extend %resetList; | |
a { | |
display: block; | |
@extend %a-tdn-tdu; | |
} | |
} | |
// einfache Liste ohne separate Abstände, Listenmarkierungen oder Linien | |
.simpleList { | |
@extend %noList; | |
} | |
// Listeneinträge haben untere Linie | |
.linedList { | |
@extend %noList; | |
li { | |
a { | |
border-top: 1px solid #cecece; | |
padding: 3px 0; | |
} | |
&:first-child a { | |
border-top: none; | |
padding-top: 0; | |
} | |
} | |
} |
This file contains hidden or 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
.simpleList a, .linedList a { | |
text-decoration: none; | |
} | |
.simpleList a:hover, .linedList a:hover, .simpleList a:focus, .linedList a:focus { | |
text-decoration: underline; | |
} | |
.simpleList, .linedList { | |
list-style-type: none; | |
} | |
.simpleList, .linedList, .simpleList li, .linedList li { | |
margin-left: 0; | |
padding-left: 0; | |
} | |
.simpleList a, .linedList a { | |
display: block; | |
} | |
.linedList li a { | |
border-top: 1px solid #cecece; | |
padding: 3px 0; | |
} | |
.linedList li:first-child a { | |
border-top: none; | |
padding-top: 0; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment