From 40c438047949f2590986a4bcf273ebb73871aeaf Mon Sep 17 00:00:00 2001 From: Chris Sauve Date: Thu, 26 Jun 2014 12:09:08 -0400 Subject: [PATCH] Fixed an issue with text-indent ruining popover positioning. Closes #17. --- dist/bigfoot-bottom.css | 1 + dist/bigfoot-bottom.scss | 3 +- dist/bigfoot-daring.css | 1 + dist/bigfoot-daring.scss | 3 +- dist/bigfoot-default.css | 1 + dist/bigfoot-default.scss | 3 +- dist/bigfoot-hypercritical.css | 253 -------------------- dist/bigfoot-hypercritical.scss | 3 +- dist/bigfoot-number.css | 300 ------------------------ dist/bigfoot-number.scss | 3 +- src/_buttons/_button-daring.scss | 1 + src/_buttons/_button-default.scss | 1 + src/_buttons/_button-hypercritical.scss | 1 + src/_buttons/_button-number.scss | 1 + 14 files changed, 17 insertions(+), 558 deletions(-) diff --git a/dist/bigfoot-bottom.css b/dist/bigfoot-bottom.css index e02555b..2e525fa 100644 --- a/dist/bigfoot-bottom.css +++ b/dist/bigfoot-bottom.css @@ -1,6 +1,7 @@ .footnote-container { display: inline-block; position: relative; + text-indent: 0; } .footnote-button { diff --git a/dist/bigfoot-bottom.scss b/dist/bigfoot-bottom.scss index 94cd88d..5fb3af3 100644 --- a/dist/bigfoot-bottom.scss +++ b/dist/bigfoot-bottom.scss @@ -1,4 +1,4 @@ -// bigfoot - v2.0.0 - 2014.06.04 +// bigfoot - v2.0.1 - 2014.06.26 // ___ __ __ ________ __ __ ________ ___ __ ______ @@ -198,6 +198,7 @@ $button-perspective-shadow-zindex: 8; .footnote-container { display: inline-block; position: relative; + text-indent: 0; } diff --git a/dist/bigfoot-daring.css b/dist/bigfoot-daring.css index 5bc3271..0e21755 100644 --- a/dist/bigfoot-daring.css +++ b/dist/bigfoot-daring.css @@ -1,6 +1,7 @@ .footnote-container { display: inline-block; position: relative; + text-indent: 0; } .footnote-button { diff --git a/dist/bigfoot-daring.scss b/dist/bigfoot-daring.scss index 41a2c67..f932bb7 100644 --- a/dist/bigfoot-daring.scss +++ b/dist/bigfoot-daring.scss @@ -1,4 +1,4 @@ -// bigfoot - v2.0.0 - 2014.06.04 +// bigfoot - v2.0.1 - 2014.06.26 // ___ __ __ ________ __ __ ________ ___ __ ______ @@ -197,6 +197,7 @@ $button-perspective-shadow-zindex: 8; .footnote-container { display: inline-block; position: relative; + text-indent: 0; } diff --git a/dist/bigfoot-default.css b/dist/bigfoot-default.css index 7c4d7e7..64abf3c 100644 --- a/dist/bigfoot-default.css +++ b/dist/bigfoot-default.css @@ -1,6 +1,7 @@ .footnote-container { display: inline-block; position: relative; + text-indent: 0; } .footnote-button { diff --git a/dist/bigfoot-default.scss b/dist/bigfoot-default.scss index 588e957..66e67f4 100644 --- a/dist/bigfoot-default.scss +++ b/dist/bigfoot-default.scss @@ -1,4 +1,4 @@ -// bigfoot - v2.0.0 - 2014.06.04 +// bigfoot - v2.0.1 - 2014.06.26 // ___ __ __ ________ __ __ ________ ___ __ ______ @@ -198,6 +198,7 @@ $button-perspective-shadow-zindex: 8; .footnote-container { display: inline-block; position: relative; + text-indent: 0; } diff --git a/dist/bigfoot-hypercritical.css b/dist/bigfoot-hypercritical.css index d889edd..e69de29 100644 --- a/dist/bigfoot-hypercritical.css +++ b/dist/bigfoot-hypercritical.css @@ -1,253 +0,0 @@ -.footnote-container { - display: inline-block; - position: relative; -} - -.footnote-button { - position: relative; - z-index: 5; - top: -0.3em; - box-sizing: border-box; - -moz-box-sizing: border-box; - display: inline-block; - padding: 0.3em; - margin: 0 0.1em 0 0.2em; - border: none; - border-radius: 0.3em; - cursor: pointer; - opacity: 1; - background-color: #567271; - line-height: 0; - vertical-align: middle; - text-decoration: none; - font-smoothing: antialiased; - -webkit-transition: opacity; - -moz-transition: opacity; - -ms-transition: opacity; - transition: opacity; - -webkit-transition-duration: 0.25s; - -moz-transition-duration: 0.25s; - transition-duration: 0.25s; -} -.footnote-button:hover { - opacity: 1; -} -.footnote-button:active { - opacity: 1; -} -.footnote-button.active { - opacity: 1; - -webkit-transition-delay: 0.15s; - -moz-transition-delay: 0.15s; - transition-delay: 0.15s; -} -.footnote-button:active, .footnote-button.active { - top: -0.05em; -} -.footnote-button:active:after, .footnote-button.active:after { - top: 0.1em; -} -.footnote-button:before, .footnote-button:after { - content: ''; - position: absolute; - top: 0; - left: 0; - z-index: 8; - display: block; - height: 100%; - width: 100%; - border-radius: 0.3em; - background-color: #567271; -} -.footnote-button:after { - top: 0.35em; - z-index: 7; - background-color: #73bd4f; -} - -.footnote-circle { - position: relative; - z-index: 10; - display: inline-block; - width: 0.3em; - height: 0.3em; - margin-right: 0.21em; - border-radius: 100%; - background-color: white; - border: none; -} -.footnote-circle:last-child { - margin-right: 0; -} - -@media not print { - .footnote-print-only { - display: none !important; - } -} -@media print { - .footnote-button { - display: none !important; - } -} -.footnote-content { - position: absolute; - z-index: 10; - top: 0; - left: 0; - display: inline-block; - box-sizing: border-box; - -moz-box-sizing: border-box; - max-width: 90%; - margin: 1.61924em 0; - display: inline-block; - background: #fdfdfd; - opacity: 0; - border-radius: 0.5em; - border: 2px solid #567271; - box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); - -webkit-transition: opacity, -webkit-transform; - -moz-transition: opacity, -moz-transform; - -ms-transition: opacity, -ms-transform; - transition: opacity, transform; - -webkit-transition-duration: 0.25s; - -moz-transition-duration: 0.25s; - transition-duration: 0.25s; -} -.footnote-content:not(.fixed-bottom) { - -webkit-transform: scale(0.1) translateZ(0); - -moz-transform: scale(0.1) translateZ(0); - -ms-transform: scale(0.1) translateZ(0); - -o-transform: scale(0.1) translateZ(0); - transform: scale(0.1) translateZ(0); - -webkit-transform-origin: 50% 0; - -moz-transform-origin: 50% 0; - -ms-transform-origin: 50% 0; - -o-transform-origin: 50% 0; - transform-origin: 50% 0; -} -.footnote-content.top { - top: auto; - bottom: 0.2em; -} -.footnote-content.active:not(.fixed-bottom) { - -webkit-transform: scale(1) translateZ(0); - -moz-transform: scale(1) translateZ(0); - -ms-transform: scale(1) translateZ(0); - -o-transform: scale(1) translateZ(0); - transform: scale(1) translateZ(0); - opacity: 0.97; -} -.footnote-content.fixed-bottom { - bottom: 0 !important; - top: auto !important; - left: 0 !important; - width: 100%; - max-width: 100%; - margin: 0; - -webkit-transform: translateY(105%); - -moz-transform: translateY(105%); - -ms-transform: translateY(105%); - -o-transform: translateY(105%); - transform: translateY(105%); - border-radius: 0; - opacity: 1; - -webkit-transition: -webkit-transform; - -moz-transition: -moz-transform; - -ms-transition: -ms-transform; - transition: transform; - -webkit-transition-duration: 0.25s; - -moz-transition-duration: 0.25s; - transition-duration: 0.25s; -} -.footnote-content.fixed-bottom.active { - -webkit-transform: translateY(0); - -moz-transform: translateY(0); - -ms-transform: translateY(0); - -o-transform: translateY(0); - transform: translateY(0); -} -.footnote-content.fixed-bottom .footnote-main-wrapper { - max-width: 90%; - width: 22em; - margin: 0 auto; -} -.footnote-content.fixed-bottom .bigfoot-tooltip { - display: none; -} -.footnote-content ::-webkit-scrollbar { - display: none; -} - -.footnote-main-wrapper { - position: relative; - z-index: 14; - width: 22em; - display: inline-block; - box-sizing: border-box; - -moz-box-sizing: border-box; - overflow: hidden; - margin: 0; - background-color: #fdfdfd; - border-radius: 0.5em; - -webkit-transition: max-height; - -moz-transition: max-height; - -ms-transition: max-height; - transition: max-height; - -webkit-transition-duration: 0.25s; - -moz-transition-duration: 0.25s; - transition-duration: 0.25s; -} - -.footnote-content-wrapper { - position: relative; - z-index: 8; - display: inline-block; - max-height: 15em; - padding: 1.1em 1.3em 1.2em; - box-sizing: border-box; - -moz-box-sizing: border-box; - overflow: scroll; - -webkit-overflow-scrolling: touch; - background: #fdfdfd; - border-radius: 0.5em; - -webkit-font-smoothing: subpixel-antialiased; -} -.footnote-content-wrapper img { - max-width: 100%; -} -.footnote-content-wrapper *:last-child { - margin-bottom: 0; -} -.footnote-content-wrapper *:first-child { - margin-top: 0; -} - -.bigfoot-tooltip { - position: absolute; - z-index: 12; - box-sizing: border-box; - -moz-box-sizing: border-box; - margin-left: -0.65em; - width: 1.3em; - height: 1.3em; - -webkit-transform: rotate(45deg); - -moz-transform: rotate(45deg); - -ms-transform: rotate(45deg); - -o-transform: rotate(45deg); - transform: rotate(45deg); - background: #fdfdfd; - border: 2px solid #567271; - box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); - border-top-left-radius: 0; -} - -.bottom .bigfoot-tooltip { - top: -0.65em; - bottom: auto; -} - -.top .bigfoot-tooltip { - bottom: -0.65em; - top: auto; -} diff --git a/dist/bigfoot-hypercritical.scss b/dist/bigfoot-hypercritical.scss index e688bd5..2193701 100644 --- a/dist/bigfoot-hypercritical.scss +++ b/dist/bigfoot-hypercritical.scss @@ -1,4 +1,4 @@ -// bigfoot - v2.0.0 - 2014.06.04 +// bigfoot - v2.0.1 - 2014.06.26 // ___ __ __ ________ __ __ ________ ___ __ ______ @@ -132,6 +132,7 @@ .footnote-container { display: inline-block; position: relative; + text-indent: 0; } diff --git a/dist/bigfoot-number.css b/dist/bigfoot-number.css index 7df54c1..e69de29 100644 --- a/dist/bigfoot-number.css +++ b/dist/bigfoot-number.css @@ -1,300 +0,0 @@ -.footnote-container { - display: inline-block; - position: relative; -} - -.footnote-button { - position: relative; - z-index: 5; - top: -0.2em; - box-sizing: border-box; - -moz-box-sizing: border-box; - display: inline-block; - padding: 0.325em; - margin: 0 0.1em 0 0.2em; - height: 1em; - width: 1em; - border: none; - border-radius: 0.6em; - cursor: pointer; - opacity: 0.3; - background-color: #464646; - -webkit-backface-visibility: hidden; - line-height: 0; - vertical-align: middle; - text-decoration: none; - font-smoothing: antialiased; - -webkit-transition: opacity; - -moz-transition: opacity; - -ms-transition: opacity; - transition: opacity; - -webkit-transition-duration: 0.25s; - -moz-transition-duration: 0.25s; - transition-duration: 0.25s; -} -.footnote-button:hover { - opacity: 0.6; -} -.footnote-button:active { - opacity: 0.6; -} -.footnote-button.active { - opacity: 0.9; - -webkit-transition-delay: 0.15s; - -moz-transition-delay: 0.15s; - transition-delay: 0.15s; -} - -.footnote-button:before { - content: attr(data-footnote-number); - position: absolute; - bottom: 0.63em; - left: 0; - right: 0; - display: block; - font-size: 0.8em; - color: white; - font-family: inherit; - font-weight: bold; - font-style: normal; - line-height: 0; - text-align: center; - -webkit-backface-visibility: hidden; -} - -@media not print { - .footnote-print-only { - display: none !important; - } -} -@media print { - .footnote-button { - display: none !important; - } -} -.footnote-content { - position: absolute; - z-index: 10; - top: 0; - left: 0; - display: inline-block; - box-sizing: border-box; - -moz-box-sizing: border-box; - max-width: 90%; - margin: 1.81924em 0; - display: inline-block; - background: #fafafa; - opacity: 0; - border-radius: 0.5em; - border: 1px solid #c3c3c3; - box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); - -webkit-transition: opacity, -webkit-transform; - -moz-transition: opacity, -moz-transform; - -ms-transition: opacity, -ms-transform; - transition: opacity, transform; - -webkit-transition-duration: 0.25s; - -moz-transition-duration: 0.25s; - transition-duration: 0.25s; -} -.footnote-content:not(.fixed-bottom) { - -webkit-transform: scale(0.1) translateZ(0); - -moz-transform: scale(0.1) translateZ(0); - -ms-transform: scale(0.1) translateZ(0); - -o-transform: scale(0.1) translateZ(0); - transform: scale(0.1) translateZ(0); - -webkit-transform-origin: 50% 0; - -moz-transform-origin: 50% 0; - -ms-transform-origin: 50% 0; - -o-transform-origin: 50% 0; - transform-origin: 50% 0; -} -.footnote-content.top { - top: auto; - bottom: 0.2em; -} -.footnote-content.active:not(.fixed-bottom) { - -webkit-transform: scale(1) translateZ(0); - -moz-transform: scale(1) translateZ(0); - -ms-transform: scale(1) translateZ(0); - -o-transform: scale(1) translateZ(0); - transform: scale(1) translateZ(0); - opacity: 0.97; -} -.footnote-content.fixed-bottom { - bottom: 0 !important; - top: auto !important; - left: 0 !important; - width: 100%; - max-width: 100%; - margin: 0; - -webkit-transform: translateY(105%); - -moz-transform: translateY(105%); - -ms-transform: translateY(105%); - -o-transform: translateY(105%); - transform: translateY(105%); - border-radius: 0; - opacity: 1; - -webkit-transition: -webkit-transform; - -moz-transition: -moz-transform; - -ms-transition: -ms-transform; - transition: transform; - -webkit-transition-duration: 0.25s; - -moz-transition-duration: 0.25s; - transition-duration: 0.25s; -} -.footnote-content.fixed-bottom.active { - -webkit-transform: translateY(0); - -moz-transform: translateY(0); - -ms-transform: translateY(0); - -o-transform: translateY(0); - transform: translateY(0); -} -.footnote-content.fixed-bottom .footnote-main-wrapper { - max-width: 90%; - width: 22em; - margin: 0 auto; -} -.footnote-content.fixed-bottom .bigfoot-tooltip { - display: none; -} -.footnote-content.scrollable:after { - content: '...'; - position: fixed; - bottom: 0.45em; - right: 50%; - z-index: 20; - width: 1.5em; - margin-right: -0.75em; - opacity: 1; - background-color: #fafafa; - font-family: Georgia; - font-weight: bold; - font-size: 1.8em; - text-align: center; - color: rgba(0, 0, 0, 0.08); - line-height: 0; - -webkit-transition: opacity; - -moz-transition: opacity; - -ms-transition: opacity; - transition: opacity; - -webkit-transition-duration: 0.25s; - -moz-transition-duration: 0.25s; - transition-duration: 0.25s; - -webkit-transition-delay: 0.4s; - -moz-transition-delay: 0.4s; - transition-delay: 0.4s; -} -.footnote-content.scrollable.fully-scrolled:after { - opacity: 0; - -webkit-transition-delay: 0s; - -moz-transition-delay: 0s; - transition-delay: 0s; -} -.footnote-content.scrollable .footnote-main-wrapper:before, .footnote-content.scrollable .footnote-main-wrapper:after { - content: ' '; - position: absolute; - width: 100%; - z-index: 12; -} -.footnote-content.scrollable .footnote-main-wrapper:before { - top: -1px; - left: 0; - height: 1.1em; - border-radius: 0.5em 0.5em 0 0; - background: #fafafa; - background: -moz-linear-gradient(top, #fafafa 0%, #fafafa 50%, rgba(250, 250, 250, 0) 100%); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fafafa), color-stop(50%, #fafafa), color-stop(100%, rgba(250, 250, 250, 0))); - background: -webkit-linear-gradient(top, #fafafa 0%, #fafafa 50%, rgba(250, 250, 250, 0) 100%); - background: -o-linear-gradient(top, #fafafa 0%, #fafafa 50%, rgba(250, 250, 250, 0) 100%); - background: -ms-linear-gradient(top, #fafafa 0%, #fafafa 50%, rgba(250, 250, 250, 0) 100%); - background: linear, to bottom, #fafafa 0%, #fafafa 50%, rgba(250, 250, 250, 0) 100%; -} -.footnote-content.scrollable .footnote-main-wrapper:after { - bottom: -1px; - left: 0; - height: 1.2em; - border-radius: 0 0 0.5em 0.5em; - background: #fafafa; - background: -moz-linear-gradient(bottom, #fafafa 0%, #fafafa 50%, rgba(250, 250, 250, 0) 100%); - background: -webkit-gradient(linear, left bottom, left top, color-stop(0%, #fafafa), color-stop(50%, #fafafa), color-stop(100%, rgba(250, 250, 250, 0))); - background: -webkit-linear-gradient(bottom, #fafafa 0%, #fafafa 50%, rgba(250, 250, 250, 0) 100%); - background: -o-linear-gradient(bottom, #fafafa 0%, #fafafa 50%, rgba(250, 250, 250, 0) 100%); - background: -ms-linear-gradient(bottom, #fafafa 0%, #fafafa 50%, rgba(250, 250, 250, 0) 100%); - background: linear, to top, #fafafa 0%, #fafafa 50%, rgba(250, 250, 250, 0) 100%; -} -.footnote-content ::-webkit-scrollbar { - display: none; -} - -.footnote-main-wrapper { - position: relative; - z-index: 14; - width: 22em; - display: inline-block; - box-sizing: border-box; - -moz-box-sizing: border-box; - overflow: hidden; - margin: 0; - background-color: #fafafa; - border-radius: 0.5em; - -webkit-transition: max-height; - -moz-transition: max-height; - -ms-transition: max-height; - transition: max-height; - -webkit-transition-duration: 0.25s; - -moz-transition-duration: 0.25s; - transition-duration: 0.25s; -} - -.footnote-content-wrapper { - position: relative; - z-index: 8; - display: inline-block; - max-height: 15em; - padding: 1.1em 1.3em 1.2em; - box-sizing: border-box; - -moz-box-sizing: border-box; - overflow: auto; - -webkit-overflow-scrolling: touch; - background: #fafafa; - border-radius: 0.5em; - -webkit-font-smoothing: subpixel-antialiased; -} -.footnote-content-wrapper img { - max-width: 100%; -} -.footnote-content-wrapper *:last-child { - margin-bottom: 0; -} -.footnote-content-wrapper *:first-child { - margin-top: 0; -} - -.bigfoot-tooltip { - position: absolute; - z-index: 12; - box-sizing: border-box; - -moz-box-sizing: border-box; - margin-left: -0.65em; - width: 1.3em; - height: 1.3em; - -webkit-transform: rotate(45deg); - -moz-transform: rotate(45deg); - -ms-transform: rotate(45deg); - -o-transform: rotate(45deg); - transform: rotate(45deg); - background: #fafafa; - border: 1px solid #c3c3c3; - box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); - border-top-left-radius: 0; -} - -.bottom .bigfoot-tooltip { - top: -0.65em; - bottom: auto; -} - -.top .bigfoot-tooltip { - bottom: -0.65em; - top: auto; -} diff --git a/dist/bigfoot-number.scss b/dist/bigfoot-number.scss index 08d380b..a153aff 100644 --- a/dist/bigfoot-number.scss +++ b/dist/bigfoot-number.scss @@ -1,4 +1,4 @@ -// bigfoot - v2.0.0 - 2014.06.04 +// bigfoot - v2.0.1 - 2014.06.26 // ___ __ __ ________ __ __ ________ ___ __ ______ @@ -127,6 +127,7 @@ .footnote-container { display: inline-block; position: relative; + text-indent: 0; } diff --git a/src/_buttons/_button-daring.scss b/src/_buttons/_button-daring.scss index e8d8284..102b658 100644 --- a/src/_buttons/_button-daring.scss +++ b/src/_buttons/_button-daring.scss @@ -82,6 +82,7 @@ $button-perspective-shadow-zindex: 8; .footnote-container { display: inline-block; position: relative; + text-indent: 0; } diff --git a/src/_buttons/_button-default.scss b/src/_buttons/_button-default.scss index 2837201..20731a9 100644 --- a/src/_buttons/_button-default.scss +++ b/src/_buttons/_button-default.scss @@ -83,6 +83,7 @@ $button-perspective-shadow-zindex: 8; .footnote-container { display: inline-block; position: relative; + text-indent: 0; } diff --git a/src/_buttons/_button-hypercritical.scss b/src/_buttons/_button-hypercritical.scss index 1fde7f0..5859f01 100644 --- a/src/_buttons/_button-hypercritical.scss +++ b/src/_buttons/_button-hypercritical.scss @@ -17,6 +17,7 @@ .footnote-container { display: inline-block; position: relative; + text-indent: 0; } diff --git a/src/_buttons/_button-number.scss b/src/_buttons/_button-number.scss index a806912..36ef138 100644 --- a/src/_buttons/_button-number.scss +++ b/src/_buttons/_button-number.scss @@ -12,6 +12,7 @@ .footnote-container { display: inline-block; position: relative; + text-indent: 0; }