]> git.ipfire.org Git - thirdparty/foundation/foundation-sites.git/commitdiff
add settings for .has-tip styles, fix docs 7803/head
authorAndy Cochran <acochran@council.nyc.gov>
Thu, 7 Jan 2016 18:06:14 +0000 (13:06 -0500)
committerAndy Cochran <acochran@council.nyc.gov>
Thu, 7 Jan 2016 18:06:14 +0000 (13:06 -0500)
docs/pages/tooltip.md
scss/components/_tooltip.scss
scss/settings/_settings.scss

index 5d5653d75f1c09780327d71266d01f6fbf671e75..cf3c88a33faaa8532c06ab67709f5d8ba2860f5f 100644 (file)
@@ -7,7 +7,7 @@ js: js/foundation.tooltip.js
 
 
 ## Basic Tooltip
-By default, a tooltip appears below the the definition on hover.
+By default, a tooltip appears below the defined term on hover.
 
 ```html_example
 <p>
@@ -18,7 +18,7 @@ The <span data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover='
 ---
 
 ## Tooltip Top
-To get a tip-top top tooltip (lol), just add the class <code>top</code> the <code>span</code> tag.
+To get a tip-top top tooltip (lol), just add the class `.top` the `<span>` element.
 
 ```html_example
 <p>
index a28c3e69cf9fdcd0c572433e0f7ab0224ddf861d..2326b51a1645d47676d6fe91cfa6a9251460db4b 100644 (file)
@@ -6,6 +6,14 @@
 /// @group tooltip
 ////
 
+/// Default font weight of the defined term.
+/// @type Keyword | Number
+$has-tip-font-weight: $global-weight-bold !default;
+
+/// Default border bottom of the defined term.
+/// @type List
+$has-tip-border-bottom: dotted 1px $dark-gray !default;
+
 /// Default color of the tooltip background.
 /// @type Color
 $tooltip-background-color: $black !default;
@@ -39,8 +47,8 @@ $tooltip-pip-offset: 1.25rem !default;
 $tooltip-radius: $global-radius !default;
 
 @mixin has-tip {
-  border-bottom: dotted 1px $dark-gray;
-  font-weight: bold;
+  border-bottom: $has-tip-border-bottom;
+  font-weight: $has-tip-font-weight;
   position: relative;
   display: inline-block;
   cursor: help;
index b98b980f518964ef4d2c7426993c35957ace9dd0..cbbc873c5b869c9a6259e9b3916d790e5e826679 100644 (file)
@@ -528,6 +528,8 @@ $titlebar-icon-spacing: 0.25rem;
 // 34. Tooltip
 // -----------
 
+$has-tip-border-bottom: dotted 1px $dark-gray;
+$has-tip-font-weight: $global-weight-bold;
 $tooltip-background-color: $black;
 $tooltip-color: $white;
 $tooltip-padding: 0.75rem;
@@ -544,4 +546,3 @@ $topbar-padding: 0.5rem;
 $topbar-background: $light-gray;
 $topbar-link-color: $primary-color;
 $topbar-input-width: 200px;
-