Footnotes: Simplified SCSS selectors.

wet-boew · Feb 7, 2014 · c1934cc · c1934cc
1 parent 25a6195
commit c1934cc
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 113 deletions.
diff --git a/src/js/sass/includes/_footnotes-ie.scss b/src/js/sass/includes/_footnotes-ie.scss
@@ -13,12 +13,10 @@ $clrDark: #555;
 .ie7 {
 	.wet-boew-footnotes {
 		@include inline-block;
-		dl {
-			dt {
-				position: relative;
-				float: left;
-				margin-bottom: -1px;
-			}
+		dt {
+			position: relative;
+			float: left;
+			margin-bottom: -1px;
 		}
 	}
 }
@@ -27,18 +25,14 @@ $clrDark: #555;
 @media screen {
 	.ie7 {
 		.wet-boew-footnotes {
-			dd {
-				&.footnote-focus {
-					background-color: $clrLight;
-					border-color: $clrDark;
-					p {
-						&.footnote-return {
-							a {
-								color: $clrWhite !important;
-								background-color: $clrDark;
-								border-color: $clrDark;
-							}
-						}
+			.footnote-focus {
+				background-color: $clrLight;
+				border-color: $clrDark;
+				.footnote-return {
+					a {
+						color: $clrWhite !important;
+						background-color: $clrDark;
+						border-color: $clrDark;
 					}
 				}
 			}
@@ -50,24 +44,20 @@ $clrDark: #555;
 @media print {
 	.ie7 {
 		.wet-boew-footnotes {
-			dl {
-				dd {
-					overflow: auto;
-				}
+			dd {
+				overflow: auto;
 			}
 		}
 	}
 	.ie8 {
 		.wet-boew-footnotes {
-			dl {
-				dd {
+			dd {
+				display: block;
+			}
+			p {
+				@include inline-block;
+				&.footnote-return {
 					display: block;
-					p {
-						@include inline-block;
-						&.footnote-return {
-							display: block;
-						}
-					}
 				}
 			}
 		}

diff --git a/src/js/sass/includes/_footnotes.scss b/src/js/sass/includes/_footnotes.scss
@@ -23,7 +23,7 @@ $clrDark: #555;
 %footnote-link-background-white {
 	background-color: $clrWhite;
 }
-sup a.footnote-link, .wet-boew-footnotes dl dd p.footnote-return a {
+.footnote-link, .wet-boew-footnotes .footnote-return a {
 	background-color: $clrLight;
 	border: 1px solid $clrMedium;
 	padding: 0 4px 1px;
@@ -33,27 +33,17 @@ sup a.footnote-link, .wet-boew-footnotes dl dd p.footnote-return a {
 	}
 }
 .background-light {
-	sup {
-		a {
-			&.footnote-link {
-				@extend %footnote-link-background-white;
-				@include pseudo-focus {
-					@extend %footnote-link-highlight;
-				}
-			}
+	.footnote-link {
+		@extend %footnote-link-background-white;
+		@include pseudo-focus {
+			@extend %footnote-link-highlight;
 		}
 	}
 }
 table {
-	th {
-		sup {
-			a {
-				&.footnote-link {
-					@extend %footnote-link-background-white;
-					text-shadow: none;
-				}
-			}
-		}
+	.footnote-link {
+		@extend %footnote-link-background-white;
+		text-shadow: none;
 	}
 }
 .wet-boew-footnotes {
@@ -72,48 +62,46 @@ table {
 	}
 	dl {
 		margin: 0;
-		dt {
-			position: absolute;
-			@include clip-rect;
-			height: 1px;
-			width: 1px;
-			overflow: hidden;
-			margin: 0;
-		}
-		dd {
-			position: relative;
-			margin: $spacing 0;
-			border: 1px solid transparent;
-			@include pseudo-focus(false) {
-				background-color: $clrLight;
-				border-color: $clrDark;
-				p {
-					&.footnote-return {
-						a {
-							@extend %footnote-link-highlight;
-						}
-					}
+	}
+	dt {
+		position: absolute;
+		@include clip-rect;
+		height: 1px;
+		width: 1px;
+		overflow: hidden;
+		margin: 0;
+	}
+	dd {
+		position: relative;
+		margin: $spacing 0;
+		border: 1px solid transparent;
+		@include pseudo-focus(false) {
+			background-color: $clrLight;
+			border-color: $clrDark;
+			.footnote-return {
+				a {
+					@extend %footnote-link-highlight;
 				}
 			}
-			p {
-				margin: 0 0 0 ($spacing + $ddRtnWidth);
-				padding: 0 $spacing $spacing $spacing;
-				&:first-child {
-					padding-top: $spacing;
-				}
-				&.footnote-return {
-					top: 0;
-					margin: 0;
-					padding-top: $spacing;
-					padding-right: 0;
-					position: absolute;
-					width: $ddRtnWidth;
-					overflow: hidden;
-					a {
-						@include inline-block;
-						padding-bottom: 0;
-					}
-				}
+		}
+	}
+	p {
+		margin: 0 0 0 ($spacing + $ddRtnWidth);
+		padding: 0 $spacing $spacing $spacing;
+		&:first-child {
+			padding-top: $spacing;
+		}
+		&.footnote-return {
+			top: 0;
+			margin: 0;
+			padding-top: $spacing;
+			padding-right: 0;
+			position: absolute;
+			width: $ddRtnWidth;
+			overflow: hidden;
+			a {
+				@include inline-block;
+				padding-bottom: 0;
 			}
 		}
 	}
@@ -124,33 +112,25 @@ table {
 	%footnote-link-background-transparent {
 		background-color: transparent;
 	}
-	sup a.footnote-link, .wet-boew-footnotes dl dd p.footnote-return a {
+	.footnote-link, .wet-boew-footnotes .footnote-return a {
 		background-color: transparent;
 		border: 0;
 		padding: 0;
 	}
 	.background-light {
-		sup {
-			a {
-				&.footnote-link {
-					@extend %footnote-link-background-transparent;
-				}
-			}
+		.footnote-link {
+			@extend %footnote-link-background-transparent;
 		}
 	}
 	table {
 		th {
-			sup {
-				a {
-					&.footnote-link {
-						@extend %footnote-link-background-transparent;
-					}
-				}
+			.footnote-link {
+				@extend %footnote-link-background-transparent;
 			}
 		}
 	}
 	.wet-boew-footnotes {
-		border {
+		border: {
 			left: 0;
 			right: 0;
 		}
@@ -159,17 +139,13 @@ table {
 			right: 0;
 			bottom: 1em;
 		}
-		dl {
-			dd {
-				border: 0;
-				width: 100%;
-				@include inline-block;
-				p {
-					&.footnote-return {
-						overflow: visible;
-					}
-				}
-			}
+		dd {
+			border: 0;
+			width: 100%;
+			@include inline-block;
+		}
+		.footnote-return {
+			overflow: visible;
 		}
 	}
 }