From 668b9922b4f210f5914797293a78dd372f6bcc1c Mon Sep 17 00:00:00 2001 From: Michael Wilson Date: Wed, 24 Aug 2016 12:22:20 +0100 Subject: [PATCH 1/2] Added additional hints which are breakpoint specific (specified in hint-variables.scss). So this will allow the change of a hint's position based on the screen size. --- hint.base.css | 628 +++++++++++++++++++++++++++++++++++++++- hint.css | 628 +++++++++++++++++++++++++++++++++++++++- src/hint-position.scss | 108 +++++++ src/hint-variables.scss | 12 + 4 files changed, 1368 insertions(+), 8 deletions(-) diff --git a/hint.base.css b/hint.base.css index 6f44357..34d16b9 100644 --- a/hint.base.css +++ b/hint.base.css @@ -1,7 +1,3 @@ -/*! Hint.css (base version) - v2.3.2 - 2016-07-28 -* http://kushagragour.in/lab/hint/ -* Copyright (c) 2016 Kushagra Gour; Licensed */ - /*-------------------------------------* HINT.css - A CSS tooltip library \*-------------------------------------*/ /** @@ -345,6 +341,630 @@ -moz-transform: translateY(8px); transform: translateY(8px); } +@media min-width { + .hint--top-lg:before { + margin-bottom: -11px; } + .hint--top-lg:before, .hint--top-lg:after { + bottom: 100%; + left: 50%; } + .hint--top-lg:before { + left: calc(50% - 6px); } + .hint--top-lg:after { + -webkit-transform: translateX(-50%); + -moz-transform: translateX(-50%); + transform: translateX(-50%); } + .hint--top-lg:hover:before { + -webkit-transform: translateY(-8px); + -moz-transform: translateY(-8px); + transform: translateY(-8px); } + .hint--top-lg:hover:after { + -webkit-transform: translateX(-50%) translateY(-8px); + -moz-transform: translateX(-50%) translateY(-8px); + transform: translateX(-50%) translateY(-8px); } + .hint--bottom-lg:before { + margin-top: -11px; } + .hint--bottom-lg:before, .hint--bottom-lg:after { + top: 100%; + left: 50%; } + .hint--bottom-lg:before { + left: calc(50% - 6px); } + .hint--bottom-lg:after { + -webkit-transform: translateX(-50%); + -moz-transform: translateX(-50%); + transform: translateX(-50%); } + .hint--bottom-lg:hover:before { + -webkit-transform: translateY(8px); + -moz-transform: translateY(8px); + transform: translateY(8px); } + .hint--bottom-lg:hover:after { + -webkit-transform: translateX(-50%) translateY(8px); + -moz-transform: translateX(-50%) translateY(8px); + transform: translateX(-50%) translateY(8px); } + .hint--right-lg:before { + margin-left: -11px; + margin-bottom: -6px; } + .hint--right-lg:after { + margin-bottom: -14px; } + .hint--right-lg:before, .hint--right-lg:after { + left: 100%; + bottom: 50%; } + .hint--right-lg:hover:before { + -webkit-transform: translateX(8px); + -moz-transform: translateX(8px); + transform: translateX(8px); } + .hint--right-lg:hover:after { + -webkit-transform: translateX(8px); + -moz-transform: translateX(8px); + transform: translateX(8px); } + .hint--left-lg:before { + margin-right: -11px; + margin-bottom: -6px; } + .hint--left-lg:after { + margin-bottom: -14px; } + .hint--left-lg:before, .hint--left-lg:after { + right: 100%; + bottom: 50%; } + .hint--left-lg:hover:before { + -webkit-transform: translateX(-8px); + -moz-transform: translateX(-8px); + transform: translateX(-8px); } + .hint--left-lg:hover:after { + -webkit-transform: translateX(-8px); + -moz-transform: translateX(-8px); + transform: translateX(-8px); } + .hint--top-left-lg:before { + margin-bottom: -11px; } + .hint--top-left-lg:before, .hint--top-left-lg:after { + bottom: 100%; + left: 50%; } + .hint--top-left-lg:before { + left: calc(50% - 6px); } + .hint--top-left-lg:after { + -webkit-transform: translateX(-100%); + -moz-transform: translateX(-100%); + transform: translateX(-100%); } + .hint--top-left-lg:after { + margin-left: 12px; } + .hint--top-left-lg:hover:before { + -webkit-transform: translateY(-8px); + -moz-transform: translateY(-8px); + transform: translateY(-8px); } + .hint--top-left-lg:hover:after { + -webkit-transform: translateX(-100%) translateY(-8px); + -moz-transform: translateX(-100%) translateY(-8px); + transform: translateX(-100%) translateY(-8px); } + .hint--top-right-lg:before { + margin-bottom: -11px; } + .hint--top-right-lg:before, .hint--top-right-lg:after { + bottom: 100%; + left: 50%; } + .hint--top-right-lg:before { + left: calc(50% - 6px); } + .hint--top-right-lg:after { + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + transform: translateX(0); } + .hint--top-right-lg:after { + margin-left: -12px; } + .hint--top-right-lg:hover:before { + -webkit-transform: translateY(-8px); + -moz-transform: translateY(-8px); + transform: translateY(-8px); } + .hint--top-right-lg:hover:after { + -webkit-transform: translateY(-8px); + -moz-transform: translateY(-8px); + transform: translateY(-8px); } + .hint--bottom-left-lg:before { + margin-top: -11px; } + .hint--bottom-left-lg:before, .hint--bottom-left-lg:after { + top: 100%; + left: 50%; } + .hint--bottom-left-lg:before { + left: calc(50% - 6px); } + .hint--bottom-left-lg:after { + -webkit-transform: translateX(-100%); + -moz-transform: translateX(-100%); + transform: translateX(-100%); } + .hint--bottom-left-lg:after { + margin-left: 12px; } + .hint--bottom-left-lg:hover:before { + -webkit-transform: translateY(8px); + -moz-transform: translateY(8px); + transform: translateY(8px); } + .hint--bottom-left-lg:hover:after { + -webkit-transform: translateX(-100%) translateY(8px); + -moz-transform: translateX(-100%) translateY(8px); + transform: translateX(-100%) translateY(8px); } + .hint--bottom-right-lg:before { + margin-top: -11px; } + .hint--bottom-right-lg:before, .hint--bottom-right-lg:after { + top: 100%; + left: 50%; } + .hint--bottom-right-lg:before { + left: calc(50% - 6px); } + .hint--bottom-right-lg:after { + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + transform: translateX(0); } + .hint--bottom-right-lg:after { + margin-left: -12px; } + .hint--bottom-right-lg:hover:before { + -webkit-transform: translateY(8px); + -moz-transform: translateY(8px); + transform: translateY(8px); } + .hint--bottom-right-lg:hover:after { + -webkit-transform: translateY(8px); + -moz-transform: translateY(8px); + transform: translateY(8px); } } + +@media min-width { + .hint--top-md:before { + margin-bottom: -11px; } + .hint--top-md:before, .hint--top-md:after { + bottom: 100%; + left: 50%; } + .hint--top-md:before { + left: calc(50% - 6px); } + .hint--top-md:after { + -webkit-transform: translateX(-50%); + -moz-transform: translateX(-50%); + transform: translateX(-50%); } + .hint--top-md:hover:before { + -webkit-transform: translateY(-8px); + -moz-transform: translateY(-8px); + transform: translateY(-8px); } + .hint--top-md:hover:after { + -webkit-transform: translateX(-50%) translateY(-8px); + -moz-transform: translateX(-50%) translateY(-8px); + transform: translateX(-50%) translateY(-8px); } + .hint--bottom-md:before { + margin-top: -11px; } + .hint--bottom-md:before, .hint--bottom-md:after { + top: 100%; + left: 50%; } + .hint--bottom-md:before { + left: calc(50% - 6px); } + .hint--bottom-md:after { + -webkit-transform: translateX(-50%); + -moz-transform: translateX(-50%); + transform: translateX(-50%); } + .hint--bottom-md:hover:before { + -webkit-transform: translateY(8px); + -moz-transform: translateY(8px); + transform: translateY(8px); } + .hint--bottom-md:hover:after { + -webkit-transform: translateX(-50%) translateY(8px); + -moz-transform: translateX(-50%) translateY(8px); + transform: translateX(-50%) translateY(8px); } + .hint--right-md:before { + margin-left: -11px; + margin-bottom: -6px; } + .hint--right-md:after { + margin-bottom: -14px; } + .hint--right-md:before, .hint--right-md:after { + left: 100%; + bottom: 50%; } + .hint--right-md:hover:before { + -webkit-transform: translateX(8px); + -moz-transform: translateX(8px); + transform: translateX(8px); } + .hint--right-md:hover:after { + -webkit-transform: translateX(8px); + -moz-transform: translateX(8px); + transform: translateX(8px); } + .hint--left-md:before { + margin-right: -11px; + margin-bottom: -6px; } + .hint--left-md:after { + margin-bottom: -14px; } + .hint--left-md:before, .hint--left-md:after { + right: 100%; + bottom: 50%; } + .hint--left-md:hover:before { + -webkit-transform: translateX(-8px); + -moz-transform: translateX(-8px); + transform: translateX(-8px); } + .hint--left-md:hover:after { + -webkit-transform: translateX(-8px); + -moz-transform: translateX(-8px); + transform: translateX(-8px); } + .hint--top-left-md:before { + margin-bottom: -11px; } + .hint--top-left-md:before, .hint--top-left-md:after { + bottom: 100%; + left: 50%; } + .hint--top-left-md:before { + left: calc(50% - 6px); } + .hint--top-left-md:after { + -webkit-transform: translateX(-100%); + -moz-transform: translateX(-100%); + transform: translateX(-100%); } + .hint--top-left-md:after { + margin-left: 12px; } + .hint--top-left-md:hover:before { + -webkit-transform: translateY(-8px); + -moz-transform: translateY(-8px); + transform: translateY(-8px); } + .hint--top-left-md:hover:after { + -webkit-transform: translateX(-100%) translateY(-8px); + -moz-transform: translateX(-100%) translateY(-8px); + transform: translateX(-100%) translateY(-8px); } + .hint--top-right-md:before { + margin-bottom: -11px; } + .hint--top-right-md:before, .hint--top-right-md:after { + bottom: 100%; + left: 50%; } + .hint--top-right-md:before { + left: calc(50% - 6px); } + .hint--top-right-md:after { + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + transform: translateX(0); } + .hint--top-right-md:after { + margin-left: -12px; } + .hint--top-right-md:hover:before { + -webkit-transform: translateY(-8px); + -moz-transform: translateY(-8px); + transform: translateY(-8px); } + .hint--top-right-md:hover:after { + -webkit-transform: translateY(-8px); + -moz-transform: translateY(-8px); + transform: translateY(-8px); } + .hint--bottom-left-md:before { + margin-top: -11px; } + .hint--bottom-left-md:before, .hint--bottom-left-md:after { + top: 100%; + left: 50%; } + .hint--bottom-left-md:before { + left: calc(50% - 6px); } + .hint--bottom-left-md:after { + -webkit-transform: translateX(-100%); + -moz-transform: translateX(-100%); + transform: translateX(-100%); } + .hint--bottom-left-md:after { + margin-left: 12px; } + .hint--bottom-left-md:hover:before { + -webkit-transform: translateY(8px); + -moz-transform: translateY(8px); + transform: translateY(8px); } + .hint--bottom-left-md:hover:after { + -webkit-transform: translateX(-100%) translateY(8px); + -moz-transform: translateX(-100%) translateY(8px); + transform: translateX(-100%) translateY(8px); } + .hint--bottom-right-md:before { + margin-top: -11px; } + .hint--bottom-right-md:before, .hint--bottom-right-md:after { + top: 100%; + left: 50%; } + .hint--bottom-right-md:before { + left: calc(50% - 6px); } + .hint--bottom-right-md:after { + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + transform: translateX(0); } + .hint--bottom-right-md:after { + margin-left: -12px; } + .hint--bottom-right-md:hover:before { + -webkit-transform: translateY(8px); + -moz-transform: translateY(8px); + transform: translateY(8px); } + .hint--bottom-right-md:hover:after { + -webkit-transform: translateY(8px); + -moz-transform: translateY(8px); + transform: translateY(8px); } } + +@media min-width { + .hint--top-sm:before { + margin-bottom: -11px; } + .hint--top-sm:before, .hint--top-sm:after { + bottom: 100%; + left: 50%; } + .hint--top-sm:before { + left: calc(50% - 6px); } + .hint--top-sm:after { + -webkit-transform: translateX(-50%); + -moz-transform: translateX(-50%); + transform: translateX(-50%); } + .hint--top-sm:hover:before { + -webkit-transform: translateY(-8px); + -moz-transform: translateY(-8px); + transform: translateY(-8px); } + .hint--top-sm:hover:after { + -webkit-transform: translateX(-50%) translateY(-8px); + -moz-transform: translateX(-50%) translateY(-8px); + transform: translateX(-50%) translateY(-8px); } + .hint--bottom-sm:before { + margin-top: -11px; } + .hint--bottom-sm:before, .hint--bottom-sm:after { + top: 100%; + left: 50%; } + .hint--bottom-sm:before { + left: calc(50% - 6px); } + .hint--bottom-sm:after { + -webkit-transform: translateX(-50%); + -moz-transform: translateX(-50%); + transform: translateX(-50%); } + .hint--bottom-sm:hover:before { + -webkit-transform: translateY(8px); + -moz-transform: translateY(8px); + transform: translateY(8px); } + .hint--bottom-sm:hover:after { + -webkit-transform: translateX(-50%) translateY(8px); + -moz-transform: translateX(-50%) translateY(8px); + transform: translateX(-50%) translateY(8px); } + .hint--right-sm:before { + margin-left: -11px; + margin-bottom: -6px; } + .hint--right-sm:after { + margin-bottom: -14px; } + .hint--right-sm:before, .hint--right-sm:after { + left: 100%; + bottom: 50%; } + .hint--right-sm:hover:before { + -webkit-transform: translateX(8px); + -moz-transform: translateX(8px); + transform: translateX(8px); } + .hint--right-sm:hover:after { + -webkit-transform: translateX(8px); + -moz-transform: translateX(8px); + transform: translateX(8px); } + .hint--left-sm:before { + margin-right: -11px; + margin-bottom: -6px; } + .hint--left-sm:after { + margin-bottom: -14px; } + .hint--left-sm:before, .hint--left-sm:after { + right: 100%; + bottom: 50%; } + .hint--left-sm:hover:before { + -webkit-transform: translateX(-8px); + -moz-transform: translateX(-8px); + transform: translateX(-8px); } + .hint--left-sm:hover:after { + -webkit-transform: translateX(-8px); + -moz-transform: translateX(-8px); + transform: translateX(-8px); } + .hint--top-left-sm:before { + margin-bottom: -11px; } + .hint--top-left-sm:before, .hint--top-left-sm:after { + bottom: 100%; + left: 50%; } + .hint--top-left-sm:before { + left: calc(50% - 6px); } + .hint--top-left-sm:after { + -webkit-transform: translateX(-100%); + -moz-transform: translateX(-100%); + transform: translateX(-100%); } + .hint--top-left-sm:after { + margin-left: 12px; } + .hint--top-left-sm:hover:before { + -webkit-transform: translateY(-8px); + -moz-transform: translateY(-8px); + transform: translateY(-8px); } + .hint--top-left-sm:hover:after { + -webkit-transform: translateX(-100%) translateY(-8px); + -moz-transform: translateX(-100%) translateY(-8px); + transform: translateX(-100%) translateY(-8px); } + .hint--top-right-sm:before { + margin-bottom: -11px; } + .hint--top-right-sm:before, .hint--top-right-sm:after { + bottom: 100%; + left: 50%; } + .hint--top-right-sm:before { + left: calc(50% - 6px); } + .hint--top-right-sm:after { + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + transform: translateX(0); } + .hint--top-right-sm:after { + margin-left: -12px; } + .hint--top-right-sm:hover:before { + -webkit-transform: translateY(-8px); + -moz-transform: translateY(-8px); + transform: translateY(-8px); } + .hint--top-right-sm:hover:after { + -webkit-transform: translateY(-8px); + -moz-transform: translateY(-8px); + transform: translateY(-8px); } + .hint--bottom-left-sm:before { + margin-top: -11px; } + .hint--bottom-left-sm:before, .hint--bottom-left-sm:after { + top: 100%; + left: 50%; } + .hint--bottom-left-sm:before { + left: calc(50% - 6px); } + .hint--bottom-left-sm:after { + -webkit-transform: translateX(-100%); + -moz-transform: translateX(-100%); + transform: translateX(-100%); } + .hint--bottom-left-sm:after { + margin-left: 12px; } + .hint--bottom-left-sm:hover:before { + -webkit-transform: translateY(8px); + -moz-transform: translateY(8px); + transform: translateY(8px); } + .hint--bottom-left-sm:hover:after { + -webkit-transform: translateX(-100%) translateY(8px); + -moz-transform: translateX(-100%) translateY(8px); + transform: translateX(-100%) translateY(8px); } + .hint--bottom-right-sm:before { + margin-top: -11px; } + .hint--bottom-right-sm:before, .hint--bottom-right-sm:after { + top: 100%; + left: 50%; } + .hint--bottom-right-sm:before { + left: calc(50% - 6px); } + .hint--bottom-right-sm:after { + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + transform: translateX(0); } + .hint--bottom-right-sm:after { + margin-left: -12px; } + .hint--bottom-right-sm:hover:before { + -webkit-transform: translateY(8px); + -moz-transform: translateY(8px); + transform: translateY(8px); } + .hint--bottom-right-sm:hover:after { + -webkit-transform: translateY(8px); + -moz-transform: translateY(8px); + transform: translateY(8px); } } + +@media max-width { + .hint--top-xs:before { + margin-bottom: -11px; } + .hint--top-xs:before, .hint--top-xs:after { + bottom: 100%; + left: 50%; } + .hint--top-xs:before { + left: calc(50% - 6px); } + .hint--top-xs:after { + -webkit-transform: translateX(-50%); + -moz-transform: translateX(-50%); + transform: translateX(-50%); } + .hint--top-xs:hover:before { + -webkit-transform: translateY(-8px); + -moz-transform: translateY(-8px); + transform: translateY(-8px); } + .hint--top-xs:hover:after { + -webkit-transform: translateX(-50%) translateY(-8px); + -moz-transform: translateX(-50%) translateY(-8px); + transform: translateX(-50%) translateY(-8px); } + .hint--bottom-xs:before { + margin-top: -11px; } + .hint--bottom-xs:before, .hint--bottom-xs:after { + top: 100%; + left: 50%; } + .hint--bottom-xs:before { + left: calc(50% - 6px); } + .hint--bottom-xs:after { + -webkit-transform: translateX(-50%); + -moz-transform: translateX(-50%); + transform: translateX(-50%); } + .hint--bottom-xs:hover:before { + -webkit-transform: translateY(8px); + -moz-transform: translateY(8px); + transform: translateY(8px); } + .hint--bottom-xs:hover:after { + -webkit-transform: translateX(-50%) translateY(8px); + -moz-transform: translateX(-50%) translateY(8px); + transform: translateX(-50%) translateY(8px); } + .hint--right-xs:before { + margin-left: -11px; + margin-bottom: -6px; } + .hint--right-xs:after { + margin-bottom: -14px; } + .hint--right-xs:before, .hint--right-xs:after { + left: 100%; + bottom: 50%; } + .hint--right-xs:hover:before { + -webkit-transform: translateX(8px); + -moz-transform: translateX(8px); + transform: translateX(8px); } + .hint--right-xs:hover:after { + -webkit-transform: translateX(8px); + -moz-transform: translateX(8px); + transform: translateX(8px); } + .hint--left-xs:before { + margin-right: -11px; + margin-bottom: -6px; } + .hint--left-xs:after { + margin-bottom: -14px; } + .hint--left-xs:before, .hint--left-xs:after { + right: 100%; + bottom: 50%; } + .hint--left-xs:hover:before { + -webkit-transform: translateX(-8px); + -moz-transform: translateX(-8px); + transform: translateX(-8px); } + .hint--left-xs:hover:after { + -webkit-transform: translateX(-8px); + -moz-transform: translateX(-8px); + transform: translateX(-8px); } + .hint--top-xs:before { + margin-bottom: -11px; } + .hint--top-xs:before, .hint--top-xs:after { + bottom: 100%; + left: 50%; } + .hint--top-xs:before { + left: calc(50% - 6px); } + .hint--top-xs:after { + -webkit-transform: translateX(-100%); + -moz-transform: translateX(-100%); + transform: translateX(-100%); } + .hint--top-xs:after { + margin-left: 12px; } + .hint--top-xs:hover:before { + -webkit-transform: translateY(-8px); + -moz-transform: translateY(-8px); + transform: translateY(-8px); } + .hint--top-xs:hover:after { + -webkit-transform: translateX(-100%) translateY(-8px); + -moz-transform: translateX(-100%) translateY(-8px); + transform: translateX(-100%) translateY(-8px); } + .hint--top-right-xs:before { + margin-bottom: -11px; } + .hint--top-right-xs:before, .hint--top-right-xs:after { + bottom: 100%; + left: 50%; } + .hint--top-right-xs:before { + left: calc(50% - 6px); } + .hint--top-right-xs:after { + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + transform: translateX(0); } + .hint--top-right-xs:after { + margin-left: -12px; } + .hint--top-right-xs:hover:before { + -webkit-transform: translateY(-8px); + -moz-transform: translateY(-8px); + transform: translateY(-8px); } + .hint--top-right-xs:hover:after { + -webkit-transform: translateY(-8px); + -moz-transform: translateY(-8px); + transform: translateY(-8px); } + .hint--bottom-left-xs:before { + margin-top: -11px; } + .hint--bottom-left-xs:before, .hint--bottom-left-xs:after { + top: 100%; + left: 50%; } + .hint--bottom-left-xs:before { + left: calc(50% - 6px); } + .hint--bottom-left-xs:after { + -webkit-transform: translateX(-100%); + -moz-transform: translateX(-100%); + transform: translateX(-100%); } + .hint--bottom-left-xs:after { + margin-left: 12px; } + .hint--bottom-left-xs:hover:before { + -webkit-transform: translateY(8px); + -moz-transform: translateY(8px); + transform: translateY(8px); } + .hint--bottom-left-xs:hover:after { + -webkit-transform: translateX(-100%) translateY(8px); + -moz-transform: translateX(-100%) translateY(8px); + transform: translateX(-100%) translateY(8px); } + .hint--bottom-right-xs:before { + margin-top: -11px; } + .hint--bottom-right-xs:before, .hint--bottom-right-xs:after { + top: 100%; + left: 50%; } + .hint--bottom-right-xs:before { + left: calc(50% - 6px); } + .hint--bottom-right-xs:after { + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + transform: translateX(0); } + .hint--bottom-right-xs:after { + margin-left: -12px; } + .hint--bottom-right-xs:hover:before { + -webkit-transform: translateY(8px); + -moz-transform: translateY(8px); + transform: translateY(8px); } + .hint--bottom-right-xs:hover:after { + -webkit-transform: translateY(8px); + -moz-transform: translateY(8px); + transform: translateY(8px); } } + /** * source: hint-sizes.scss * diff --git a/hint.css b/hint.css index 4eff4fd..64c5e78 100644 --- a/hint.css +++ b/hint.css @@ -1,7 +1,3 @@ -/*! Hint.css - v2.3.2 - 2016-07-28 -* http://kushagragour.in/lab/hint/ -* Copyright (c) 2016 Kushagra Gour; Licensed */ - /*-------------------------------------* HINT.css - A CSS tooltip library \*-------------------------------------*/ /** @@ -345,6 +341,630 @@ -moz-transform: translateY(8px); transform: translateY(8px); } +@media min-width { + .hint--top-lg:before { + margin-bottom: -11px; } + .hint--top-lg:before, .hint--top-lg:after { + bottom: 100%; + left: 50%; } + .hint--top-lg:before { + left: calc(50% - 6px); } + .hint--top-lg:after { + -webkit-transform: translateX(-50%); + -moz-transform: translateX(-50%); + transform: translateX(-50%); } + .hint--top-lg:hover:before { + -webkit-transform: translateY(-8px); + -moz-transform: translateY(-8px); + transform: translateY(-8px); } + .hint--top-lg:hover:after { + -webkit-transform: translateX(-50%) translateY(-8px); + -moz-transform: translateX(-50%) translateY(-8px); + transform: translateX(-50%) translateY(-8px); } + .hint--bottom-lg:before { + margin-top: -11px; } + .hint--bottom-lg:before, .hint--bottom-lg:after { + top: 100%; + left: 50%; } + .hint--bottom-lg:before { + left: calc(50% - 6px); } + .hint--bottom-lg:after { + -webkit-transform: translateX(-50%); + -moz-transform: translateX(-50%); + transform: translateX(-50%); } + .hint--bottom-lg:hover:before { + -webkit-transform: translateY(8px); + -moz-transform: translateY(8px); + transform: translateY(8px); } + .hint--bottom-lg:hover:after { + -webkit-transform: translateX(-50%) translateY(8px); + -moz-transform: translateX(-50%) translateY(8px); + transform: translateX(-50%) translateY(8px); } + .hint--right-lg:before { + margin-left: -11px; + margin-bottom: -6px; } + .hint--right-lg:after { + margin-bottom: -14px; } + .hint--right-lg:before, .hint--right-lg:after { + left: 100%; + bottom: 50%; } + .hint--right-lg:hover:before { + -webkit-transform: translateX(8px); + -moz-transform: translateX(8px); + transform: translateX(8px); } + .hint--right-lg:hover:after { + -webkit-transform: translateX(8px); + -moz-transform: translateX(8px); + transform: translateX(8px); } + .hint--left-lg:before { + margin-right: -11px; + margin-bottom: -6px; } + .hint--left-lg:after { + margin-bottom: -14px; } + .hint--left-lg:before, .hint--left-lg:after { + right: 100%; + bottom: 50%; } + .hint--left-lg:hover:before { + -webkit-transform: translateX(-8px); + -moz-transform: translateX(-8px); + transform: translateX(-8px); } + .hint--left-lg:hover:after { + -webkit-transform: translateX(-8px); + -moz-transform: translateX(-8px); + transform: translateX(-8px); } + .hint--top-left-lg:before { + margin-bottom: -11px; } + .hint--top-left-lg:before, .hint--top-left-lg:after { + bottom: 100%; + left: 50%; } + .hint--top-left-lg:before { + left: calc(50% - 6px); } + .hint--top-left-lg:after { + -webkit-transform: translateX(-100%); + -moz-transform: translateX(-100%); + transform: translateX(-100%); } + .hint--top-left-lg:after { + margin-left: 12px; } + .hint--top-left-lg:hover:before { + -webkit-transform: translateY(-8px); + -moz-transform: translateY(-8px); + transform: translateY(-8px); } + .hint--top-left-lg:hover:after { + -webkit-transform: translateX(-100%) translateY(-8px); + -moz-transform: translateX(-100%) translateY(-8px); + transform: translateX(-100%) translateY(-8px); } + .hint--top-right-lg:before { + margin-bottom: -11px; } + .hint--top-right-lg:before, .hint--top-right-lg:after { + bottom: 100%; + left: 50%; } + .hint--top-right-lg:before { + left: calc(50% - 6px); } + .hint--top-right-lg:after { + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + transform: translateX(0); } + .hint--top-right-lg:after { + margin-left: -12px; } + .hint--top-right-lg:hover:before { + -webkit-transform: translateY(-8px); + -moz-transform: translateY(-8px); + transform: translateY(-8px); } + .hint--top-right-lg:hover:after { + -webkit-transform: translateY(-8px); + -moz-transform: translateY(-8px); + transform: translateY(-8px); } + .hint--bottom-left-lg:before { + margin-top: -11px; } + .hint--bottom-left-lg:before, .hint--bottom-left-lg:after { + top: 100%; + left: 50%; } + .hint--bottom-left-lg:before { + left: calc(50% - 6px); } + .hint--bottom-left-lg:after { + -webkit-transform: translateX(-100%); + -moz-transform: translateX(-100%); + transform: translateX(-100%); } + .hint--bottom-left-lg:after { + margin-left: 12px; } + .hint--bottom-left-lg:hover:before { + -webkit-transform: translateY(8px); + -moz-transform: translateY(8px); + transform: translateY(8px); } + .hint--bottom-left-lg:hover:after { + -webkit-transform: translateX(-100%) translateY(8px); + -moz-transform: translateX(-100%) translateY(8px); + transform: translateX(-100%) translateY(8px); } + .hint--bottom-right-lg:before { + margin-top: -11px; } + .hint--bottom-right-lg:before, .hint--bottom-right-lg:after { + top: 100%; + left: 50%; } + .hint--bottom-right-lg:before { + left: calc(50% - 6px); } + .hint--bottom-right-lg:after { + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + transform: translateX(0); } + .hint--bottom-right-lg:after { + margin-left: -12px; } + .hint--bottom-right-lg:hover:before { + -webkit-transform: translateY(8px); + -moz-transform: translateY(8px); + transform: translateY(8px); } + .hint--bottom-right-lg:hover:after { + -webkit-transform: translateY(8px); + -moz-transform: translateY(8px); + transform: translateY(8px); } } + +@media min-width { + .hint--top-md:before { + margin-bottom: -11px; } + .hint--top-md:before, .hint--top-md:after { + bottom: 100%; + left: 50%; } + .hint--top-md:before { + left: calc(50% - 6px); } + .hint--top-md:after { + -webkit-transform: translateX(-50%); + -moz-transform: translateX(-50%); + transform: translateX(-50%); } + .hint--top-md:hover:before { + -webkit-transform: translateY(-8px); + -moz-transform: translateY(-8px); + transform: translateY(-8px); } + .hint--top-md:hover:after { + -webkit-transform: translateX(-50%) translateY(-8px); + -moz-transform: translateX(-50%) translateY(-8px); + transform: translateX(-50%) translateY(-8px); } + .hint--bottom-md:before { + margin-top: -11px; } + .hint--bottom-md:before, .hint--bottom-md:after { + top: 100%; + left: 50%; } + .hint--bottom-md:before { + left: calc(50% - 6px); } + .hint--bottom-md:after { + -webkit-transform: translateX(-50%); + -moz-transform: translateX(-50%); + transform: translateX(-50%); } + .hint--bottom-md:hover:before { + -webkit-transform: translateY(8px); + -moz-transform: translateY(8px); + transform: translateY(8px); } + .hint--bottom-md:hover:after { + -webkit-transform: translateX(-50%) translateY(8px); + -moz-transform: translateX(-50%) translateY(8px); + transform: translateX(-50%) translateY(8px); } + .hint--right-md:before { + margin-left: -11px; + margin-bottom: -6px; } + .hint--right-md:after { + margin-bottom: -14px; } + .hint--right-md:before, .hint--right-md:after { + left: 100%; + bottom: 50%; } + .hint--right-md:hover:before { + -webkit-transform: translateX(8px); + -moz-transform: translateX(8px); + transform: translateX(8px); } + .hint--right-md:hover:after { + -webkit-transform: translateX(8px); + -moz-transform: translateX(8px); + transform: translateX(8px); } + .hint--left-md:before { + margin-right: -11px; + margin-bottom: -6px; } + .hint--left-md:after { + margin-bottom: -14px; } + .hint--left-md:before, .hint--left-md:after { + right: 100%; + bottom: 50%; } + .hint--left-md:hover:before { + -webkit-transform: translateX(-8px); + -moz-transform: translateX(-8px); + transform: translateX(-8px); } + .hint--left-md:hover:after { + -webkit-transform: translateX(-8px); + -moz-transform: translateX(-8px); + transform: translateX(-8px); } + .hint--top-left-md:before { + margin-bottom: -11px; } + .hint--top-left-md:before, .hint--top-left-md:after { + bottom: 100%; + left: 50%; } + .hint--top-left-md:before { + left: calc(50% - 6px); } + .hint--top-left-md:after { + -webkit-transform: translateX(-100%); + -moz-transform: translateX(-100%); + transform: translateX(-100%); } + .hint--top-left-md:after { + margin-left: 12px; } + .hint--top-left-md:hover:before { + -webkit-transform: translateY(-8px); + -moz-transform: translateY(-8px); + transform: translateY(-8px); } + .hint--top-left-md:hover:after { + -webkit-transform: translateX(-100%) translateY(-8px); + -moz-transform: translateX(-100%) translateY(-8px); + transform: translateX(-100%) translateY(-8px); } + .hint--top-right-md:before { + margin-bottom: -11px; } + .hint--top-right-md:before, .hint--top-right-md:after { + bottom: 100%; + left: 50%; } + .hint--top-right-md:before { + left: calc(50% - 6px); } + .hint--top-right-md:after { + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + transform: translateX(0); } + .hint--top-right-md:after { + margin-left: -12px; } + .hint--top-right-md:hover:before { + -webkit-transform: translateY(-8px); + -moz-transform: translateY(-8px); + transform: translateY(-8px); } + .hint--top-right-md:hover:after { + -webkit-transform: translateY(-8px); + -moz-transform: translateY(-8px); + transform: translateY(-8px); } + .hint--bottom-left-md:before { + margin-top: -11px; } + .hint--bottom-left-md:before, .hint--bottom-left-md:after { + top: 100%; + left: 50%; } + .hint--bottom-left-md:before { + left: calc(50% - 6px); } + .hint--bottom-left-md:after { + -webkit-transform: translateX(-100%); + -moz-transform: translateX(-100%); + transform: translateX(-100%); } + .hint--bottom-left-md:after { + margin-left: 12px; } + .hint--bottom-left-md:hover:before { + -webkit-transform: translateY(8px); + -moz-transform: translateY(8px); + transform: translateY(8px); } + .hint--bottom-left-md:hover:after { + -webkit-transform: translateX(-100%) translateY(8px); + -moz-transform: translateX(-100%) translateY(8px); + transform: translateX(-100%) translateY(8px); } + .hint--bottom-right-md:before { + margin-top: -11px; } + .hint--bottom-right-md:before, .hint--bottom-right-md:after { + top: 100%; + left: 50%; } + .hint--bottom-right-md:before { + left: calc(50% - 6px); } + .hint--bottom-right-md:after { + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + transform: translateX(0); } + .hint--bottom-right-md:after { + margin-left: -12px; } + .hint--bottom-right-md:hover:before { + -webkit-transform: translateY(8px); + -moz-transform: translateY(8px); + transform: translateY(8px); } + .hint--bottom-right-md:hover:after { + -webkit-transform: translateY(8px); + -moz-transform: translateY(8px); + transform: translateY(8px); } } + +@media min-width { + .hint--top-sm:before { + margin-bottom: -11px; } + .hint--top-sm:before, .hint--top-sm:after { + bottom: 100%; + left: 50%; } + .hint--top-sm:before { + left: calc(50% - 6px); } + .hint--top-sm:after { + -webkit-transform: translateX(-50%); + -moz-transform: translateX(-50%); + transform: translateX(-50%); } + .hint--top-sm:hover:before { + -webkit-transform: translateY(-8px); + -moz-transform: translateY(-8px); + transform: translateY(-8px); } + .hint--top-sm:hover:after { + -webkit-transform: translateX(-50%) translateY(-8px); + -moz-transform: translateX(-50%) translateY(-8px); + transform: translateX(-50%) translateY(-8px); } + .hint--bottom-sm:before { + margin-top: -11px; } + .hint--bottom-sm:before, .hint--bottom-sm:after { + top: 100%; + left: 50%; } + .hint--bottom-sm:before { + left: calc(50% - 6px); } + .hint--bottom-sm:after { + -webkit-transform: translateX(-50%); + -moz-transform: translateX(-50%); + transform: translateX(-50%); } + .hint--bottom-sm:hover:before { + -webkit-transform: translateY(8px); + -moz-transform: translateY(8px); + transform: translateY(8px); } + .hint--bottom-sm:hover:after { + -webkit-transform: translateX(-50%) translateY(8px); + -moz-transform: translateX(-50%) translateY(8px); + transform: translateX(-50%) translateY(8px); } + .hint--right-sm:before { + margin-left: -11px; + margin-bottom: -6px; } + .hint--right-sm:after { + margin-bottom: -14px; } + .hint--right-sm:before, .hint--right-sm:after { + left: 100%; + bottom: 50%; } + .hint--right-sm:hover:before { + -webkit-transform: translateX(8px); + -moz-transform: translateX(8px); + transform: translateX(8px); } + .hint--right-sm:hover:after { + -webkit-transform: translateX(8px); + -moz-transform: translateX(8px); + transform: translateX(8px); } + .hint--left-sm:before { + margin-right: -11px; + margin-bottom: -6px; } + .hint--left-sm:after { + margin-bottom: -14px; } + .hint--left-sm:before, .hint--left-sm:after { + right: 100%; + bottom: 50%; } + .hint--left-sm:hover:before { + -webkit-transform: translateX(-8px); + -moz-transform: translateX(-8px); + transform: translateX(-8px); } + .hint--left-sm:hover:after { + -webkit-transform: translateX(-8px); + -moz-transform: translateX(-8px); + transform: translateX(-8px); } + .hint--top-left-sm:before { + margin-bottom: -11px; } + .hint--top-left-sm:before, .hint--top-left-sm:after { + bottom: 100%; + left: 50%; } + .hint--top-left-sm:before { + left: calc(50% - 6px); } + .hint--top-left-sm:after { + -webkit-transform: translateX(-100%); + -moz-transform: translateX(-100%); + transform: translateX(-100%); } + .hint--top-left-sm:after { + margin-left: 12px; } + .hint--top-left-sm:hover:before { + -webkit-transform: translateY(-8px); + -moz-transform: translateY(-8px); + transform: translateY(-8px); } + .hint--top-left-sm:hover:after { + -webkit-transform: translateX(-100%) translateY(-8px); + -moz-transform: translateX(-100%) translateY(-8px); + transform: translateX(-100%) translateY(-8px); } + .hint--top-right-sm:before { + margin-bottom: -11px; } + .hint--top-right-sm:before, .hint--top-right-sm:after { + bottom: 100%; + left: 50%; } + .hint--top-right-sm:before { + left: calc(50% - 6px); } + .hint--top-right-sm:after { + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + transform: translateX(0); } + .hint--top-right-sm:after { + margin-left: -12px; } + .hint--top-right-sm:hover:before { + -webkit-transform: translateY(-8px); + -moz-transform: translateY(-8px); + transform: translateY(-8px); } + .hint--top-right-sm:hover:after { + -webkit-transform: translateY(-8px); + -moz-transform: translateY(-8px); + transform: translateY(-8px); } + .hint--bottom-left-sm:before { + margin-top: -11px; } + .hint--bottom-left-sm:before, .hint--bottom-left-sm:after { + top: 100%; + left: 50%; } + .hint--bottom-left-sm:before { + left: calc(50% - 6px); } + .hint--bottom-left-sm:after { + -webkit-transform: translateX(-100%); + -moz-transform: translateX(-100%); + transform: translateX(-100%); } + .hint--bottom-left-sm:after { + margin-left: 12px; } + .hint--bottom-left-sm:hover:before { + -webkit-transform: translateY(8px); + -moz-transform: translateY(8px); + transform: translateY(8px); } + .hint--bottom-left-sm:hover:after { + -webkit-transform: translateX(-100%) translateY(8px); + -moz-transform: translateX(-100%) translateY(8px); + transform: translateX(-100%) translateY(8px); } + .hint--bottom-right-sm:before { + margin-top: -11px; } + .hint--bottom-right-sm:before, .hint--bottom-right-sm:after { + top: 100%; + left: 50%; } + .hint--bottom-right-sm:before { + left: calc(50% - 6px); } + .hint--bottom-right-sm:after { + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + transform: translateX(0); } + .hint--bottom-right-sm:after { + margin-left: -12px; } + .hint--bottom-right-sm:hover:before { + -webkit-transform: translateY(8px); + -moz-transform: translateY(8px); + transform: translateY(8px); } + .hint--bottom-right-sm:hover:after { + -webkit-transform: translateY(8px); + -moz-transform: translateY(8px); + transform: translateY(8px); } } + +@media max-width { + .hint--top-xs:before { + margin-bottom: -11px; } + .hint--top-xs:before, .hint--top-xs:after { + bottom: 100%; + left: 50%; } + .hint--top-xs:before { + left: calc(50% - 6px); } + .hint--top-xs:after { + -webkit-transform: translateX(-50%); + -moz-transform: translateX(-50%); + transform: translateX(-50%); } + .hint--top-xs:hover:before { + -webkit-transform: translateY(-8px); + -moz-transform: translateY(-8px); + transform: translateY(-8px); } + .hint--top-xs:hover:after { + -webkit-transform: translateX(-50%) translateY(-8px); + -moz-transform: translateX(-50%) translateY(-8px); + transform: translateX(-50%) translateY(-8px); } + .hint--bottom-xs:before { + margin-top: -11px; } + .hint--bottom-xs:before, .hint--bottom-xs:after { + top: 100%; + left: 50%; } + .hint--bottom-xs:before { + left: calc(50% - 6px); } + .hint--bottom-xs:after { + -webkit-transform: translateX(-50%); + -moz-transform: translateX(-50%); + transform: translateX(-50%); } + .hint--bottom-xs:hover:before { + -webkit-transform: translateY(8px); + -moz-transform: translateY(8px); + transform: translateY(8px); } + .hint--bottom-xs:hover:after { + -webkit-transform: translateX(-50%) translateY(8px); + -moz-transform: translateX(-50%) translateY(8px); + transform: translateX(-50%) translateY(8px); } + .hint--right-xs:before { + margin-left: -11px; + margin-bottom: -6px; } + .hint--right-xs:after { + margin-bottom: -14px; } + .hint--right-xs:before, .hint--right-xs:after { + left: 100%; + bottom: 50%; } + .hint--right-xs:hover:before { + -webkit-transform: translateX(8px); + -moz-transform: translateX(8px); + transform: translateX(8px); } + .hint--right-xs:hover:after { + -webkit-transform: translateX(8px); + -moz-transform: translateX(8px); + transform: translateX(8px); } + .hint--left-xs:before { + margin-right: -11px; + margin-bottom: -6px; } + .hint--left-xs:after { + margin-bottom: -14px; } + .hint--left-xs:before, .hint--left-xs:after { + right: 100%; + bottom: 50%; } + .hint--left-xs:hover:before { + -webkit-transform: translateX(-8px); + -moz-transform: translateX(-8px); + transform: translateX(-8px); } + .hint--left-xs:hover:after { + -webkit-transform: translateX(-8px); + -moz-transform: translateX(-8px); + transform: translateX(-8px); } + .hint--top-xs:before { + margin-bottom: -11px; } + .hint--top-xs:before, .hint--top-xs:after { + bottom: 100%; + left: 50%; } + .hint--top-xs:before { + left: calc(50% - 6px); } + .hint--top-xs:after { + -webkit-transform: translateX(-100%); + -moz-transform: translateX(-100%); + transform: translateX(-100%); } + .hint--top-xs:after { + margin-left: 12px; } + .hint--top-xs:hover:before { + -webkit-transform: translateY(-8px); + -moz-transform: translateY(-8px); + transform: translateY(-8px); } + .hint--top-xs:hover:after { + -webkit-transform: translateX(-100%) translateY(-8px); + -moz-transform: translateX(-100%) translateY(-8px); + transform: translateX(-100%) translateY(-8px); } + .hint--top-right-xs:before { + margin-bottom: -11px; } + .hint--top-right-xs:before, .hint--top-right-xs:after { + bottom: 100%; + left: 50%; } + .hint--top-right-xs:before { + left: calc(50% - 6px); } + .hint--top-right-xs:after { + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + transform: translateX(0); } + .hint--top-right-xs:after { + margin-left: -12px; } + .hint--top-right-xs:hover:before { + -webkit-transform: translateY(-8px); + -moz-transform: translateY(-8px); + transform: translateY(-8px); } + .hint--top-right-xs:hover:after { + -webkit-transform: translateY(-8px); + -moz-transform: translateY(-8px); + transform: translateY(-8px); } + .hint--bottom-left-xs:before { + margin-top: -11px; } + .hint--bottom-left-xs:before, .hint--bottom-left-xs:after { + top: 100%; + left: 50%; } + .hint--bottom-left-xs:before { + left: calc(50% - 6px); } + .hint--bottom-left-xs:after { + -webkit-transform: translateX(-100%); + -moz-transform: translateX(-100%); + transform: translateX(-100%); } + .hint--bottom-left-xs:after { + margin-left: 12px; } + .hint--bottom-left-xs:hover:before { + -webkit-transform: translateY(8px); + -moz-transform: translateY(8px); + transform: translateY(8px); } + .hint--bottom-left-xs:hover:after { + -webkit-transform: translateX(-100%) translateY(8px); + -moz-transform: translateX(-100%) translateY(8px); + transform: translateX(-100%) translateY(8px); } + .hint--bottom-right-xs:before { + margin-top: -11px; } + .hint--bottom-right-xs:before, .hint--bottom-right-xs:after { + top: 100%; + left: 50%; } + .hint--bottom-right-xs:before { + left: calc(50% - 6px); } + .hint--bottom-right-xs:after { + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + transform: translateX(0); } + .hint--bottom-right-xs:after { + margin-left: -12px; } + .hint--bottom-right-xs:hover:before { + -webkit-transform: translateY(8px); + -moz-transform: translateY(8px); + transform: translateY(8px); } + .hint--bottom-right-xs:hover:after { + -webkit-transform: translateY(8px); + -moz-transform: translateY(8px); + transform: translateY(8px); } } + /** * source: hint-sizes.scss * diff --git a/src/hint-position.scss b/src/hint-position.scss index e44e90f..fcb5f24 100644 --- a/src/hint-position.scss +++ b/src/hint-position.scss @@ -136,4 +136,112 @@ */ .#{$hintPrefix}bottom-right { @include vertical-positioned-tooltip('top', 1, 1); +} + +@media #{$hintBreakpointLG} { + .#{$hintPrefix}top-lg { + @include vertical-positioned-tooltip('bottom', -1); + } + .#{$hintPrefix}bottom-lg { + @include vertical-positioned-tooltip('top', 1); + } + .#{$hintPrefix}right-lg { + @include horizontal-positioned-tooltip('left', 1); + } + .#{$hintPrefix}left-lg { + @include horizontal-positioned-tooltip('right', -1); + } + .#{$hintPrefix}top-left-lg { + @include vertical-positioned-tooltip('bottom', -1, -1); + } + .#{$hintPrefix}top-right-lg { + @include vertical-positioned-tooltip('bottom', -1, 1); + } + .#{$hintPrefix}bottom-left-lg { + @include vertical-positioned-tooltip('top', 1, -1); + } + .#{$hintPrefix}bottom-right-lg { + @include vertical-positioned-tooltip('top', 1, 1); + } +} + +@media #{$hintBreakpointMD} { + .#{$hintPrefix}top-md { + @include vertical-positioned-tooltip('bottom', -1); + } + .#{$hintPrefix}bottom-md { + @include vertical-positioned-tooltip('top', 1); + } + .#{$hintPrefix}right-md { + @include horizontal-positioned-tooltip('left', 1); + } + .#{$hintPrefix}left-md { + @include horizontal-positioned-tooltip('right', -1); + } + .#{$hintPrefix}top-left-md { + @include vertical-positioned-tooltip('bottom', -1, -1); + } + .#{$hintPrefix}top-right-md { + @include vertical-positioned-tooltip('bottom', -1, 1); + } + .#{$hintPrefix}bottom-left-md { + @include vertical-positioned-tooltip('top', 1, -1); + } + .#{$hintPrefix}bottom-right-md { + @include vertical-positioned-tooltip('top', 1, 1); + } +} + +@media #{$hintBreakpointSM} { + .#{$hintPrefix}top-sm { + @include vertical-positioned-tooltip('bottom', -1); + } + .#{$hintPrefix}bottom-sm { + @include vertical-positioned-tooltip('top', 1); + } + .#{$hintPrefix}right-sm { + @include horizontal-positioned-tooltip('left', 1); + } + .#{$hintPrefix}left-sm { + @include horizontal-positioned-tooltip('right', -1); + } + .#{$hintPrefix}top-left-sm { + @include vertical-positioned-tooltip('bottom', -1, -1); + } + .#{$hintPrefix}top-right-sm { + @include vertical-positioned-tooltip('bottom', -1, 1); + } + .#{$hintPrefix}bottom-left-sm { + @include vertical-positioned-tooltip('top', 1, -1); + } + .#{$hintPrefix}bottom-right-sm { + @include vertical-positioned-tooltip('top', 1, 1); + } +} + +@media #{$hintBreakpointXS} { + .#{$hintPrefix}top-xs { + @include vertical-positioned-tooltip('bottom', -1); + } + .#{$hintPrefix}bottom-xs { + @include vertical-positioned-tooltip('top', 1); + } + .#{$hintPrefix}right-xs { + @include horizontal-positioned-tooltip('left', 1); + } + .#{$hintPrefix}left-xs { + @include horizontal-positioned-tooltip('right', -1); + } + .#{$hintPrefix}top-xs { + @include vertical-positioned-tooltip('bottom', -1, -1); + } + .#{$hintPrefix}top-right-xs { + @include vertical-positioned-tooltip('bottom', -1, 1); + } + .#{$hintPrefix}bottom-left-xs { + @include vertical-positioned-tooltip('top', 1, -1); + } + .#{$hintPrefix}bottom-right-xs { + @include vertical-positioned-tooltip('top', 1, 1); + } } \ No newline at end of file diff --git a/src/hint-variables.scss b/src/hint-variables.scss index 5a7ad4a..bd5cb4f 100644 --- a/src/hint-variables.scss +++ b/src/hint-variables.scss @@ -59,3 +59,15 @@ $hintInfoColor: hsl(200, 50%, 45%) !default; // Success Color $hintSuccessColor: hsl(121, 32%, 40%) !default; + +// Breakpoint for large screen sizes +$hintBreakpointLG: (min-width 1200px) !default; + +// Breakpoint for medium screen sizes +$hintBreakpointMD: (min-width 992px) !default; + +// Breakpoint for small screen sizes +$hintBreakpointSM: (min-width 768px) !default; + +// Breakpoint for extra small screen sizes +$hintBreakpointXS: (max-width 767px) !default; \ No newline at end of file From a1a4dc757d19d0b129b2b5f4509120aa6def30c8 Mon Sep 17 00:00:00 2001 From: Michael Wilson Date: Thu, 25 Aug 2016 09:17:38 +0100 Subject: [PATCH 2/2] Fixed un noticed @media error with the $hintBreakpoint errors --- hint.base.css | 8 ++++---- hint.css | 8 ++++---- src/hint-position.scss | 8 ++++---- src/hint-variables.scss | 8 ++++---- 4 files changed, 16 insertions(+), 16 deletions(-) diff --git a/hint.base.css b/hint.base.css index 34d16b9..804bd52 100644 --- a/hint.base.css +++ b/hint.base.css @@ -341,7 +341,7 @@ -moz-transform: translateY(8px); transform: translateY(8px); } -@media min-width { +@media (min-width: 1200px) { .hint--top-lg:before { margin-bottom: -11px; } .hint--top-lg:before, .hint--top-lg:after { @@ -497,7 +497,7 @@ -moz-transform: translateY(8px); transform: translateY(8px); } } -@media min-width { +@media (min-width: 992px) { .hint--top-md:before { margin-bottom: -11px; } .hint--top-md:before, .hint--top-md:after { @@ -653,7 +653,7 @@ -moz-transform: translateY(8px); transform: translateY(8px); } } -@media min-width { +@media (min-width: 768px) { .hint--top-sm:before { margin-bottom: -11px; } .hint--top-sm:before, .hint--top-sm:after { @@ -809,7 +809,7 @@ -moz-transform: translateY(8px); transform: translateY(8px); } } -@media max-width { +@media (max-width: 767px) { .hint--top-xs:before { margin-bottom: -11px; } .hint--top-xs:before, .hint--top-xs:after { diff --git a/hint.css b/hint.css index 64c5e78..b26d76d 100644 --- a/hint.css +++ b/hint.css @@ -341,7 +341,7 @@ -moz-transform: translateY(8px); transform: translateY(8px); } -@media min-width { +@media (min-width: 1200px) { .hint--top-lg:before { margin-bottom: -11px; } .hint--top-lg:before, .hint--top-lg:after { @@ -497,7 +497,7 @@ -moz-transform: translateY(8px); transform: translateY(8px); } } -@media min-width { +@media (min-width: 992px) { .hint--top-md:before { margin-bottom: -11px; } .hint--top-md:before, .hint--top-md:after { @@ -653,7 +653,7 @@ -moz-transform: translateY(8px); transform: translateY(8px); } } -@media min-width { +@media (min-width: 768px) { .hint--top-sm:before { margin-bottom: -11px; } .hint--top-sm:before, .hint--top-sm:after { @@ -809,7 +809,7 @@ -moz-transform: translateY(8px); transform: translateY(8px); } } -@media max-width { +@media (max-width: 767px) { .hint--top-xs:before { margin-bottom: -11px; } .hint--top-xs:before, .hint--top-xs:after { diff --git a/src/hint-position.scss b/src/hint-position.scss index fcb5f24..09070fc 100644 --- a/src/hint-position.scss +++ b/src/hint-position.scss @@ -138,7 +138,7 @@ @include vertical-positioned-tooltip('top', 1, 1); } -@media #{$hintBreakpointLG} { +@media (min-width: $hintBreakpointLG) { .#{$hintPrefix}top-lg { @include vertical-positioned-tooltip('bottom', -1); } @@ -165,7 +165,7 @@ } } -@media #{$hintBreakpointMD} { +@media (min-width: $hintBreakpointMD) { .#{$hintPrefix}top-md { @include vertical-positioned-tooltip('bottom', -1); } @@ -192,7 +192,7 @@ } } -@media #{$hintBreakpointSM} { +@media (min-width: $hintBreakpointSM) { .#{$hintPrefix}top-sm { @include vertical-positioned-tooltip('bottom', -1); } @@ -219,7 +219,7 @@ } } -@media #{$hintBreakpointXS} { +@media (max-width: $hintBreakpointXS) { .#{$hintPrefix}top-xs { @include vertical-positioned-tooltip('bottom', -1); } diff --git a/src/hint-variables.scss b/src/hint-variables.scss index bd5cb4f..c15b4f7 100644 --- a/src/hint-variables.scss +++ b/src/hint-variables.scss @@ -61,13 +61,13 @@ $hintInfoColor: hsl(200, 50%, 45%) !default; $hintSuccessColor: hsl(121, 32%, 40%) !default; // Breakpoint for large screen sizes -$hintBreakpointLG: (min-width 1200px) !default; +$hintBreakpointLG: 1200px !default; // Breakpoint for medium screen sizes -$hintBreakpointMD: (min-width 992px) !default; +$hintBreakpointMD: 992px !default; // Breakpoint for small screen sizes -$hintBreakpointSM: (min-width 768px) !default; +$hintBreakpointSM: 768px !default; // Breakpoint for extra small screen sizes -$hintBreakpointXS: (max-width 767px) !default; \ No newline at end of file +$hintBreakpointXS: 767px !default; \ No newline at end of file