From: sarmstrong <sarmstrong@eprod.com>
Date: Mon, 15 Dec 2014 20:41:21 +0000 (-0600)
Subject: Added ability to customize split button pip
X-Git-Tag: v5.5.1~64^2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=refs%2Fpull%2F6115%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Added ability to customize split button pip
---

diff --git a/doc/includes/split_button/examples_split_button_custom_pip.html b/doc/includes/split_button/examples_split_button_custom_pip.html
new file mode 100644
index 000000000..5eb5bff73
--- /dev/null
+++ b/doc/includes/split_button/examples_split_button_custom_pip.html
@@ -0,0 +1 @@
+<a href="#" class="button split no-pip">Custom Pip<span><i class="fi-arrow-down"></i></span></a>
\ No newline at end of file
diff --git a/doc/includes/split_button/examples_split_button_custom_pip_rendered.html b/doc/includes/split_button/examples_split_button_custom_pip_rendered.html
new file mode 100644
index 000000000..3cb8874eb
--- /dev/null
+++ b/doc/includes/split_button/examples_split_button_custom_pip_rendered.html
@@ -0,0 +1,5 @@
+{{#markdown}}
+```html
+<a href="#" class="button split no-pip">Custom Pip<span><i class="fi-arrow-down"></i></span></a>
+```
+{{/markdown}}
\ No newline at end of file
diff --git a/doc/pages/components/split_buttons.html b/doc/pages/components/split_buttons.html
index 32f72712b..0e14fdb96 100644
--- a/doc/pages/components/split_buttons.html
+++ b/doc/pages/components/split_buttons.html
@@ -50,6 +50,23 @@ Additional classes can be added to your split buttons to change its appearance.
 
 ***
 
+<h2>Custom Pip</h2>
+
+If you desire to use your own pip in the split button, the `no-pip` class will remove ours and allow you to place any icon inside of the pip span
+
+<div class="row">
+  <div class="large-6 columns">
+    <h4>HTML</h4>
+{{> examples_split_button_custom_pip_rendered}}
+  </div>
+  <div class="large-6 columns">
+    <h4>HTML Rendered</h4>
+{{> examples_split_button_custom_pip}}
+  </div>
+</div>
+
+***
+
 ## Accessibility
 
 <p class="panel">This component is not yet accessible. Stay tuned for updates in future releases.</p>
diff --git a/scss/foundation/components/_split-buttons.scss b/scss/foundation/components/_split-buttons.scss
index 00b9f7ac2..f0e1c4068 100644
--- a/scss/foundation/components/_split-buttons.scss
+++ b/scss/foundation/components/_split-buttons.scss
@@ -185,6 +185,14 @@ $split-button-pip-default-float-lrg: rem-calc(-6) !default;
 
       &.radius span { @include side-radius($opposite-direction, $global-radius); }
       &.round span { @include side-radius($opposite-direction, 1000px); }
+      &.no-pip{
+        span:before{ border-style:none; }
+        span:after{ border-style:none; }
+        span{padding-top:$split-button-pip-top-med;}
+        &.tiny{ span{ padding-top:$split-button-pip-top-tny; } }
+        &.small{ span{ padding-top:$split-button-pip-top-sml; } }
+        &.large{ span{ padding-top:$split-button-pip-top-lrg; } }
+      }
     }
 
   }