diff --git a/core/client/assets/sass/components/splitbuttons.scss b/core/client/assets/sass/components/splitbuttons.scss
new file mode 100644
index 0000000000..22fded1697
--- /dev/null
+++ b/core/client/assets/sass/components/splitbuttons.scss
@@ -0,0 +1,155 @@
+//
+// Base Splitbutton
+// --------------------------------------------------
+
+%splitbtn {
+    display: inline-block;
+    position: relative;
+    font-size: 0; // hack to stop space after button
+    white-space: nowrap;
+
+    button {
+        font-size: 11px; // hack to restore font size
+        @include border-right-radius(0);
+    }
+
+    // This is the additional dropdown arrow, to the right of the button.
+    .options {
+        display: inline-block;
+        position:relative;
+        width: 35px;
+        height: 35px;
+        margin-left: -1px;
+        vertical-align: top;
+        text-align: center;
+        color: #fff;
+        background: #e5e5e5;
+        border-radius: 0 2px 2px 0;
+        border-left: 0;
+        box-shadow:
+            rgba(0,0,0,0.02) 0 1px 0 inset,
+            rgba(0,0,0,0.02) -1px 0 0 inset,
+            rgba(0,0,0,0.02) 0 -1px 0 inset;
+
+        @include icon($i-chevron-down, 9px) {
+            position: absolute;
+            top: 50%;
+            right: 50%;
+            margin-top: -3px;
+            margin-right: -5px;
+            @include transition(margin-top 0.3s ease);
+            /* Transition of transform properties are split out due to a
+                defect in the vendor prefixing of transform transitions.
+                See: http://github.com/thoughtbot/bourbon/pull/86 */
+            @include transition-property(transform);
+            @include transition-duration(0.3);
+            @include transition-timing-function(ease);
+        };
+
+        @include transition(background-color 0.3s linear);
+
+        // Keep the arrow spun when the associated menu is open
+        &.active:before {
+            @include transform(rotate(360deg));
+        }
+
+        &.up.active:before {
+            margin-top:-4px;
+            @include transform(rotate(540deg));
+        }
+
+        // Spin the arrow on hover and while menu is open
+        &:hover,
+        &:focus {
+            will-change: box-shadow, background;
+            box-shadow: none;
+            background: #f8f8f8;
+            @include icon($i-chevron-down) {
+                will-change: transform;
+                @include transform(rotate(360deg));
+            };
+        }
+
+        // If it has a class of "up" spin it an extra 180degress to point up
+        &.up:hover,
+        &.up:focus {
+            @include icon($i-chevron-down) {
+                margin-top:-4px;
+                @include transform(rotate(540deg));
+                @include transition-property(transform);
+                @include transition-duration(0.6);
+                @include transition-timing-function(ease);
+            };
+        }
+    }
+}
+
+
+//
+// The Splitbuttons
+// --------------------------------------------------
+
+// The default splitbutton
+.splitbutton {
+    @extend %splitbtn;
+    .options {
+        color:#777;
+        &:hover,
+        &:focus {
+            box-shadow:
+                rgba(0,0,0,0.07) 0 1px 0 inset,
+                rgba(0,0,0,0.07) -1px 0 0 inset,
+                rgba(0,0,0,0.07) 0 -1px 0 inset;
+        }
+    }
+}
+
+// For save/next/continue/confirm actions
+.splitbutton-save {
+    @extend %splitbtn;
+    .options {
+        background: darken($blue, 5%);
+        &:hover,
+        &.active,
+        &:focus {
+            background: darken($blue, 10%);
+        }
+    }
+}
+
+// For actions which add something
+.splitbutton-add {
+    @extend %splitbtn;
+    .options {
+        background: darken($green, 6%);
+        &:hover,
+        &:focus {
+            background: darken($green, 8%);
+        }
+    }
+}
+
+// For actions which delete something
+.splitbutton-delete {
+    @extend %splitbtn;
+    .options {
+        background: darken($red, 6%);
+        &:hover,
+        &:focus {
+            background: darken($red, 10%);
+        }
+    }
+}
+
+// Alternative style with more visual attention, 
+// but no extra semantic meaning
+.splitbutton-alt {
+    @extend %splitbtn;
+    .options {
+        background: lighten($darkgrey, 4%);
+        &:hover,
+        &:focus {
+            background: $darkgrey;
+        }
+    }
+}
\ No newline at end of file
diff --git a/core/client/assets/sass/patterns/buttons.scss b/core/client/assets/sass/patterns/buttons.scss
index 91f52d4be2..863fa6b716 100644
--- a/core/client/assets/sass/patterns/buttons.scss
+++ b/core/client/assets/sass/patterns/buttons.scss
@@ -448,161 +448,4 @@ button {
         }
     }
 
-}
-
-
-//
-// Base Splitbutton
-// --------------------------------------------------
-
-%splitbtn {
-    display: inline-block;
-    position: relative;
-    font-size: 0; // hack to stop space after button
-    white-space: nowrap;
-
-    button {
-        font-size: 11px; // hack to restore font size
-        @include border-right-radius(0);
-    }
-
-    // This is the additional dropdown arrow, to the right of the button.
-    .options {
-        display: inline-block;
-        position:relative;
-        width: 35px;
-        height: 35px;
-        margin-left: -1px;
-        vertical-align: top;
-        text-align: center;
-        color: #fff;
-        background: #e5e5e5;
-        border-radius: 0 2px 2px 0;
-        border-left: 0;
-        box-shadow:
-            rgba(0,0,0,0.02) 0 1px 0 inset,
-            rgba(0,0,0,0.02) -1px 0 0 inset,
-            rgba(0,0,0,0.02) 0 -1px 0 inset;
-
-        @include icon($i-chevron-down, 9px) {
-            position: absolute;
-            top: 50%;
-            right: 50%;
-            margin-top: -3px;
-            margin-right: -5px;
-            @include transition(margin-top 0.3s ease);
-            /* Transition of transform properties are split out due to a
-                defect in the vendor prefixing of transform transitions.
-                See: http://github.com/thoughtbot/bourbon/pull/86 */
-            @include transition-property(transform);
-            @include transition-duration(0.3);
-            @include transition-timing-function(ease);
-        };
-
-        @include transition(background-color 0.3s linear);
-
-        // Keep the arrow spun when the associated menu is open
-        &.active:before {
-            @include transform(rotate(360deg));
-        }
-
-        &.up.active:before {
-            margin-top:-4px;
-            @include transform(rotate(540deg));
-        }
-
-        // Spin the arrow on hover and while menu is open
-        &:hover,
-        &:focus {
-            will-change: box-shadow, background;
-            box-shadow: none;
-            background: #f8f8f8;
-            @include icon($i-chevron-down) {
-                will-change: transform;
-                @include transform(rotate(360deg));
-            };
-        }
-
-        // If it has a class of "up" spin it an extra 180degress to point up
-        &.up:hover,
-        &.up:focus {
-            @include icon($i-chevron-down) {
-                margin-top:-4px;
-                @include transform(rotate(540deg));
-                @include transition-property(transform);
-                @include transition-duration(0.6);
-                @include transition-timing-function(ease);
-            };
-        }
-    }
-}
-
-
-//
-// The Splitbuttons
-// --------------------------------------------------
-
-// The default splitbutton
-.splitbutton {
-    @extend %splitbtn;
-    .options {
-        color:#777;
-        &:hover,
-        &:focus {
-            box-shadow:
-                rgba(0,0,0,0.07) 0 1px 0 inset,
-                rgba(0,0,0,0.07) -1px 0 0 inset,
-                rgba(0,0,0,0.07) 0 -1px 0 inset;
-        }
-    }
-}
-
-// For save/next/continue/confirm actions
-.splitbutton-save {
-    @extend %splitbtn;
-    .options {
-        background: darken($blue, 5%);
-        &:hover,
-        &.active,
-        &:focus {
-            background: darken($blue, 10%);
-        }
-    }
-}
-
-// For actions which add something
-.splitbutton-add {
-    @extend %splitbtn;
-    .options {
-        background: darken($green, 6%);
-        &:hover,
-        &:focus {
-            background: darken($green, 8%);
-        }
-    }
-}
-
-// For actions which delete something
-.splitbutton-delete {
-    @extend %splitbtn;
-    .options {
-        background: darken($red, 6%);
-        &:hover,
-        &:focus {
-            background: darken($red, 10%);
-        }
-    }
-}
-
-// Alternative style with more visual attention, 
-// but no extra semantic meaning
-.splitbutton-alt {
-    @extend %splitbtn;
-    .options {
-        background: lighten($darkgrey, 4%);
-        &:hover,
-        &:focus {
-            background: $darkgrey;
-        }
-    }
 }
\ No newline at end of file
diff --git a/core/client/assets/sass/screen.scss b/core/client/assets/sass/screen.scss
index 4e5cde25ff..262105af95 100644
--- a/core/client/assets/sass/screen.scss
+++ b/core/client/assets/sass/screen.scss
@@ -37,6 +37,7 @@
 @import "components/modals";
 @import "components/notifications";
 @import "components/uploader";
+@import "components/splitbuttons";
 @import "components/dropdowns";