From 807a837afe1c5ee2ac5f962658a5741673c04231 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Mon, 5 Jan 2015 13:05:10 -0800 Subject: Remove libsass @media nesting bug workaround https://github.com/sass/libsass/issues/185 has been fixed. Refs #48 --- scss/mixins/_breakpoints.scss | 16 ++-------------- 1 file changed, 2 insertions(+), 14 deletions(-) (limited to 'scss') diff --git a/scss/mixins/_breakpoints.scss b/scss/mixins/_breakpoints.scss index 232b9416f..790bb7343 100644 --- a/scss/mixins/_breakpoints.scss +++ b/scss/mixins/_breakpoints.scss @@ -68,21 +68,9 @@ // No minimum for the smallest breakpoint, and no maximum for the largest one. // Makes the @content apply only to the given breakpoint, not viewports any wider or narrower. @mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) { - // Nested media query combination does not work in libsass yet - // https://github.com/sass/libsass/issues/185 - // Work around until the issue is resolved: - $min: breakpoint-min($name, $breakpoints); - $max: breakpoint-max($name, $breakpoints); - @if $min and $max { - @media (min-width: $min) and (max-width: $max) { + @include media-breakpoint-up($name, $breakpoints) { + @include media-breakpoint-down($name, $breakpoints) { @content; } - } @else { - // One of min or max is a no-op, so this branch is not affected by libsass#185 - @include media-breakpoint-up($name, $breakpoints) { - @include media-breakpoint-down($name, $breakpoints) { - @content; - } - } } } -- cgit v1.2.3 From 3452e8dc8336c7a4151bcccdb9d3d4202f06f294 Mon Sep 17 00:00:00 2001 From: fat Date: Mon, 11 May 2015 23:32:37 -0700 Subject: rewritten tooltip + tether integration and death to our positioner jank --- scss/_tooltip.scss | 98 +++++++++++++++++++++++++++++------------------------- 1 file changed, 53 insertions(+), 45 deletions(-) (limited to 'scss') diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss index 379d6d5e6..289998611 100644 --- a/scss/_tooltip.scss +++ b/scss/_tooltip.scss @@ -16,23 +16,59 @@ opacity: 0; &.in { opacity: $tooltip-opacity; } -} -.tooltip-top { - padding: $tooltip-arrow-width 0; - margin-top: -3px; -} -.tooltip-right { - padding: 0 $tooltip-arrow-width; - margin-left: 3px; -} -.tooltip-bottom { - padding: $tooltip-arrow-width 0; - margin-top: 3px; -} -.tooltip-left { - padding: 0 $tooltip-arrow-width; - margin-left: -3px; + &.tooltip-top, + &.bs-tether-element-attached-bottom { + padding: $tooltip-arrow-width 0; + margin-top: -3px; + + .tooltip-arrow { + bottom: 0; + left: 50%; + margin-left: -$tooltip-arrow-width; + border-width: $tooltip-arrow-width $tooltip-arrow-width 0; + border-top-color: $tooltip-arrow-color; + } + } + &.tooltip-right, + &.bs-tether-element-attached-left { + padding: 0 $tooltip-arrow-width; + margin-left: 3px; + + .tooltip-arrow { + top: 50%; + left: 0; + margin-top: -$tooltip-arrow-width; + border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0; + border-right-color: $tooltip-arrow-color; + } + } + &.tooltip-bottom, + &.bs-tether-element-attached-top { + padding: $tooltip-arrow-width 0; + margin-top: 3px; + + .tooltip-arrow { + top: 0; + left: 50%; + margin-left: -$tooltip-arrow-width; + border-width: 0 $tooltip-arrow-width $tooltip-arrow-width; + border-bottom-color: $tooltip-arrow-color; + } + } + &.tooltip-left, + &.bs-tether-element-attached-right { + padding: 0 $tooltip-arrow-width; + margin-left: -3px; + + .tooltip-arrow { + top: 50%; + right: 0; + margin-top: -$tooltip-arrow-width; + border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width; + border-left-color: $tooltip-arrow-color; + } + } } // Wrapper for the tooltip content @@ -53,32 +89,4 @@ height: 0; border-color: transparent; border-style: solid; -} -.tooltip-top .tooltip-arrow { - bottom: 0; - left: 50%; - margin-left: -$tooltip-arrow-width; - border-width: $tooltip-arrow-width $tooltip-arrow-width 0; - border-top-color: $tooltip-arrow-color; -} -.tooltip-right .tooltip-arrow { - top: 50%; - left: 0; - margin-top: -$tooltip-arrow-width; - border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0; - border-right-color: $tooltip-arrow-color; -} -.tooltip-left .tooltip-arrow { - top: 50%; - right: 0; - margin-top: -$tooltip-arrow-width; - border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width; - border-left-color: $tooltip-arrow-color; -} -.tooltip-bottom .tooltip-arrow { - top: 0; - left: 50%; - margin-left: -$tooltip-arrow-width; - border-width: 0 $tooltip-arrow-width $tooltip-arrow-width; - border-bottom-color: $tooltip-arrow-color; -} +} \ No newline at end of file -- cgit v1.2.3 From a58febf71a5eac2161ce2db08c7d723755ed1163 Mon Sep 17 00:00:00 2001 From: fat Date: Tue, 12 May 2015 14:28:11 -0700 Subject: popover passing as well --- scss/_popover.scss | 150 ++++++++++++++++++++++++++++++----------------------- 1 file changed, 86 insertions(+), 64 deletions(-) (limited to 'scss') diff --git a/scss/_popover.scss b/scss/_popover.scss index 7757fc179..99b2ac563 100644 --- a/scss/_popover.scss +++ b/scss/_popover.scss @@ -8,7 +8,7 @@ top: 0; left: 0; z-index: $zindex-popover; - display: none; + display: block; max-width: $popover-max-width; padding: 1px; // Reset font and text properties given new insertion method @@ -24,14 +24,94 @@ border: 1px solid $popover-border-color; @include border-radius($border-radius-lg); @include box-shadow(0 5px 10px rgba(0,0,0,.2)); + + + // Popover directions + + &.popover-top, + &.bs-tether-element-attached-bottom { + margin-top: -$popover-arrow-width; + + .popover-arrow { + bottom: -$popover-arrow-outer-width; + left: 50%; + margin-left: -$popover-arrow-outer-width; + border-top-color: $popover-arrow-outer-color; + border-bottom-width: 0; + &:after { + bottom: 1px; + margin-left: -$popover-arrow-width; + content: ""; + border-top-color: $popover-arrow-color; + border-bottom-width: 0; + } + } + } + + &.popover-right, + &.bs-tether-element-attached-left { + margin-left: $popover-arrow-width; + + .popover-arrow { + top: 50%; + left: -$popover-arrow-outer-width; + margin-top: -$popover-arrow-outer-width; + border-right-color: $popover-arrow-outer-color; + border-left-width: 0; + &:after { + bottom: -$popover-arrow-width; + left: 1px; + content: ""; + border-right-color: $popover-arrow-color; + border-left-width: 0; + } + } + } + + &.popover-bottom, + &.bs-tether-element-attached-top { + margin-top: $popover-arrow-width; + + .popover-arrow { + top: -$popover-arrow-outer-width; + left: 50%; + margin-left: -$popover-arrow-outer-width; + border-top-width: 0; + border-bottom-color: $popover-arrow-outer-color; + &:after { + top: 1px; + margin-left: -$popover-arrow-width; + content: ""; + border-top-width: 0; + border-bottom-color: $popover-arrow-color; + } + } + } + + &.popover-left, + &.bs-tether-element-attached-right { + margin-left: -$popover-arrow-width; + + .popover-arrow { + top: 50%; + right: -$popover-arrow-outer-width; + margin-top: -$popover-arrow-outer-width; + border-right-width: 0; + border-left-color: $popover-arrow-outer-color; + &:after { + right: 1px; + bottom: -$popover-arrow-width; + content: ""; + border-right-width: 0; + border-left-color: $popover-arrow-color; + } + } + } + } -// Offset the popover to account for the popover arrow -.popover-top { margin-top: -$popover-arrow-width; } -.popover-right { margin-left: $popover-arrow-width; } -.popover-bottom { margin-top: $popover-arrow-width; } -.popover-left { margin-left: -$popover-arrow-width; } +// Offset the popover to account for the popover arrow .popover-title { padding: 8px 14px; margin: 0; // reset heading margin @@ -68,61 +148,3 @@ content: ""; border-width: $popover-arrow-width; } - -.popover-top > .popover-arrow { - bottom: -$popover-arrow-outer-width; - left: 50%; - margin-left: -$popover-arrow-outer-width; - border-top-color: $popover-arrow-outer-color; - border-bottom-width: 0; - &:after { - bottom: 1px; - margin-left: -$popover-arrow-width; - content: ""; - border-top-color: $popover-arrow-color; - border-bottom-width: 0; - } -} -.popover-right > .popover-arrow { - top: 50%; - left: -$popover-arrow-outer-width; - margin-top: -$popover-arrow-outer-width; - border-right-color: $popover-arrow-outer-color; - border-left-width: 0; - &:after { - bottom: -$popover-arrow-width; - left: 1px; - content: ""; - border-right-color: $popover-arrow-color; - border-left-width: 0; - } -} -.popover-bottom > .popover-arrow { - top: -$popover-arrow-outer-width; - left: 50%; - margin-left: -$popover-arrow-outer-width; - border-top-width: 0; - border-bottom-color: $popover-arrow-outer-color; - &:after { - top: 1px; - margin-left: -$popover-arrow-width; - content: ""; - border-top-width: 0; - border-bottom-color: $popover-arrow-color; - } -} - -.popover-left > .popover-arrow { - top: 50%; - right: -$popover-arrow-outer-width; - margin-top: -$popover-arrow-outer-width; - border-right-width: 0; - border-left-color: $popover-arrow-outer-color; - &:after { - right: 1px; - bottom: -$popover-arrow-width; - content: ""; - border-right-width: 0; - border-left-color: $popover-arrow-color; - } -} -- cgit v1.2.3 From b12d4bfa9a974d96a6a47fcb1fbaea264439b4b8 Mon Sep 17 00:00:00 2001 From: fat Date: Thu, 14 May 2015 13:13:33 -0700 Subject: fix dist css --- scss/_custom-forms.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss index 64dd73683..ceda72979 100644 --- a/scss/_custom-forms.scss +++ b/scss/_custom-forms.scss @@ -213,7 +213,7 @@ } // IE9 hack to hide the arrow -@media screen and (min-width:0\0) { +@media screen and ("min-width:0\0") { .select select { z-index: 1; padding: .5rem 1.5rem .5rem 1rem; -- cgit v1.2.3 From 62da5947a8b5d0b40e15073fc4f9f98c2139af99 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Fri, 15 May 2015 12:11:15 -0700 Subject: Permanent proper fix for dist-css Bump mq4-hover-shim to ^0.2.0 Revert "fix dist css" This reverts commit b12d4bfa9a974d96a6a47fcb1fbaea264439b4b8. --- scss/_custom-forms.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'scss') diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss index ceda72979..64dd73683 100644 --- a/scss/_custom-forms.scss +++ b/scss/_custom-forms.scss @@ -213,7 +213,7 @@ } // IE9 hack to hide the arrow -@media screen and ("min-width:0\0") { +@media screen and (min-width:0\0) { .select select { z-index: 1; padding: .5rem 1.5rem .5rem 1rem; -- cgit v1.2.3 From 82c9038f2085692270c23f68216b3965f2578d4c Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Fri, 15 May 2015 12:17:09 -0700 Subject: Unquote to avoid NUL chars in the output CSS --- scss/_progress.scss | 6 +++--- scss/mixins/_progress.scss | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) (limited to 'scss') diff --git a/scss/_progress.scss b/scss/_progress.scss index c99b5af92..3c22e23ef 100644 --- a/scss/_progress.scss +++ b/scss/_progress.scss @@ -77,7 +77,7 @@ // } // IE9 hacks to accompany custom markup. We don't need to scope this via media queries, but I feel better doing it anyway. -@media screen and ("min-width:0\0") { +@media screen and (min-width:0\0) { .progress { background-color: #eee; @include border-radius($border-radius-base); @@ -116,7 +116,7 @@ @include gradient-striped(); background-size: $spacer-y $spacer-y; } -@media screen and ("min-width:0\0") { +@media screen and (min-width:0\0) { .progress-bar-striped { @include gradient-striped(); background-size: $spacer-y $spacer-y; @@ -134,7 +134,7 @@ .progress-animated[value]::-moz-progress-bar { animation: progress-bar-stripes 2s linear infinite; } -@media screen and ("min-width:0\0") { +@media screen and (min-width:0\0) { .progress-animated .progress-bar-striped { animation: progress-bar-stripes 2s linear infinite; } diff --git a/scss/mixins/_progress.scss b/scss/mixins/_progress.scss index 9c3212ae8..802e179a4 100644 --- a/scss/mixins/_progress.scss +++ b/scss/mixins/_progress.scss @@ -9,7 +9,7 @@ background-color: $color; } - @media screen and ("min-width:0\0") { + @media screen and (min-width:0\0) { .progress-bar { background-color: $color; } -- cgit v1.2.3