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 (file)
index 0000000..5eb5bff
--- /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 (file)
index 0000000..3cb8874
--- /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 32f72712b544fb506caf33f1c57b77c2ed2edaab..0e14fdb96f78570defcedc24f1fd792441693e72 100644 (file)
--- 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 00b9f7ac2e05e72da59f603cf0dd34d48ea29e94..f0e1c4068f5e8ef124914df1f5514ae0952b5684 100644 (file)
--- 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; } }
+      }
     }
 
   }