diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/streamfield.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/streamfield.scss
new file mode 100644
index 0000000000..c1e8d91b03
--- /dev/null
+++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/streamfield.scss
@@ -0,0 +1,355 @@
+ul.sequence{
+    position:relative;
+    @include clearfix;
+}
+li.sequence-member{
+    @include clearfix;
+    position:relative;
+
+    &:hover{
+        background-color:$color-input-focus;
+
+        .sequence-member-inner{
+            > .struct-block > label,
+            > .char_field > label,
+            .sequence > label{
+                opacity:1;
+            }
+        }
+    }
+
+   
+    .struct-block .fields{
+        @include column(10);
+        padding-left:0;
+        padding-right:0;
+    }
+    .struct-block .sequence-container{
+        @include column(9);
+        padding-left:0;
+        padding-right:0;
+
+        .sequence-member-inner{
+            padding:1.5em 0;
+            padding:1.5em 0;
+        }
+    }
+
+    /* The top level sequence doesn't have a sequnce-member-inner. This block is basically for things that should only affect inner blocks */
+    .sequence-member-inner{
+        @include clearfix;
+        position:relative;
+        padding:1.5em 50px;
+
+        /* sequences within sequences, such as a ListBlock within StructBlock*/
+        > .sequence .sequence-inner{
+            @include column(10);
+            padding-left:0;
+            padding-right:0;
+        }
+
+        .sequence-type-list .sequence-container-inner{
+            @include column(10);
+            padding-left:0;
+            padding-right:0;
+        }
+        .sequence-type-list .sequence-member-inner{
+            padding:0;
+            padding-top:0.5em;
+            padding-bottom:1.2em;
+        }
+    }
+
+
+    .fields > li{
+        position:relative;
+    }
+}
+
+/* Image chooser has special display in streamfields */
+.widget-admin_image_chooser{
+    label{
+        display:none;
+    }
+    .field-content{
+        display:block;
+        float:none;
+        width:100%;
+        text-align:center;
+        max-width:500px;
+        margin:auto;
+        border:1px solid $color-grey-4;
+        padding:1em;
+    }
+    .chooser{
+        .chosen{
+            padding:0;
+        }
+        .unchosen{
+            &:before{
+                float:none;
+                font-size:4em;
+                margin:0;
+            }
+        }
+        .preview-image{
+            float:none;
+            margin:0;
+        }
+    }
+}
+
+/*
+This horridly specific selector ensures text inputs, rich text fields and textareas that are direct children of highest level sequence
+should be borderless and full-width
+*/
+.block_field > .field-content > .input > .sequence-container > .sequence-container-inner > .sequence > .sequence-member > .sequence-member-inner{
+    > .widget-text_input input,
+    > .widget-rich_text_area .richtext,
+    > .widget-textarea textarea{ 
+        border:0;
+        padding:0;
+        background-color:transparent;
+        max-width:1024px;
+    }
+}
+
+/* Object controls */
+.stream-controls{
+    @include border-radius(5px);
+    @include transition(opacity 0.2s ease);
+    opacity:0;
+    visibility:hidden;
+    position:absolute;
+    top:-1.5em; right:1em;
+    z-index:1;
+    overflow:visible;
+    background-color:$color-input-focus;
+    padding:0.2rem 1em;
+
+    h3{
+        margin:0;
+        font-size:0.7rem;
+        display:inline-block;
+        margin-right:1em;
+        line-height:1.4rem;
+
+        label{
+            font-weight:normal;
+            text-transform:uppercase;
+            float:none;
+            width:auto;
+            padding:0;
+            margin:0;
+        }
+    }
+
+    button.icon.text-replace{
+        @include border-radius(50%);
+        width:1.4rem;
+        height:1.4rem;
+
+        &:before{
+            line-height:1.3em;
+            font-size:0.9rem;
+        }
+    }
+
+    /* .buttons only exists for menus in stream_member.html */
+    .buttons{
+        display:inline-block; 
+    }
+
+    .buttons,
+    label{
+        @include transition(opacity 0.2s ease);
+        opacity:0.4;
+    }
+
+        &:hover .buttons,
+        &:hover label{
+            opacity:1;
+        }
+   
+    .disabled{
+        display:none;
+    }       
+}
+
+/* list controls are slightly different as they require close proximity to their associated fields */
+.list-controls{
+    top:1.5em
+}
+
+.sequence-type-list .object-help{
+    margin-top:1.5em !important;
+}
+
+/* Menu of other blocks to be added at each position */
+.stream-menu{
+    @include transition(all 0.2s ease);
+    @include box-shadow(inset 0 0 45px rgba(0,0,0,0.3));
+    position:relative;
+    background-color:$color-grey-1;
+    opacity:1;
+    z-index:5;
+
+    .toggle{
+        @include transition(color 0.2s ease);
+        @include border-radius(50px);
+        position:absolute;
+        top:-0.5em;
+        left:0;
+        right:0;
+        margin:0 auto;
+        cursor:pointer;
+        font-size:1.7em;
+        width:1em;
+        height:1em;
+        display:block;
+        z-index:5;
+        color:$color-grey-1;
+        background-color:white;
+        outline:none;
+
+        span{
+            @include visuallyhidden();
+        }
+
+        &:before{
+            @include transform(rotate(-45deg));
+            position:absolute;
+            font-family:wagtail;
+            content:"B";
+            line-height:1em;
+            text-align:center;
+        }
+    }
+
+    .stream-menu-inner{
+        @include transform(translate3d(0,0,0));
+        max-width:50em;
+        margin: auto;
+        overflow:hidden;
+    }
+
+    ul{
+        @include transform(translate3d(0,0,0));
+        @include transition(all 0.2s ease);
+        @include transform(scale(1));
+        @include clearfix;
+        visibility:visible;
+        opacity:1;
+        padding:1em 1em 0 1em;
+        overflow:hidden;
+    }
+
+    li{
+        @include column(3);
+        padding-bottom:$grid-gutter-width;
+        padding-left:0;
+        padding-right:0;
+
+        &:nth-child(4n+1){
+            clear:left;
+        }
+    }
+    
+
+    button{
+        @include transition(all 0.2s ease);
+        background-color:transparent;
+        border:0;
+        color:darken($color-grey-3, 5%);
+        height:auto;
+        display:block;
+        width:100%;
+        padding:0 0 0.5em 0;
+        outline:$color-teal;
+        overflow:visible;
+
+        span{
+            text-transform:none;
+            white-space: pre-wrap;
+            width:100%;
+            display:block;
+            overflow:hidden;
+            padding:0 1em;
+            box-sizing: border-box;
+        }
+
+        &:before{
+            display:block;
+            font-family:wagtail;
+            font-size:2em;
+            width:100%;
+            height:2em;
+            line-height:2em;
+            text-align:center;
+        }
+
+        &:hover,
+        &:focus{
+            background-color:$color-teal;
+            color:white;
+        }
+    }
+
+    &.stream-menu-closed{
+        @include box-shadow(none);
+
+        .stream-menu-inner ul{
+            @include transform(scale(0.9));
+            opacity:0;
+        }
+
+        .toggle{
+            color:$color-grey-3;
+            background-color:white;
+            &:before{
+                @include transform(rotate(0deg));
+            }
+            &:focus{
+                color:$color-teal;
+            }
+        }        
+
+        &:hover{
+            border-top-color:$color-teal;
+
+            .toggle{
+                color:$color-teal;
+            }
+        }   
+    }
+
+    @media screen and (min-width: $breakpoint-mobile){
+        li{
+            @include column(2);
+            &:nth-child(4n+1){
+                clear:none;
+            }
+            &:nth-child(6n+1){
+                clear:left;
+            }
+        }
+    }
+}
+.sequence-member .stream-menu{
+    margin:auto auto 0em auto;
+}
+.sequence-member .stream-menu-closed{
+    opacity:0;
+    visibility:hidden;
+}
+.sequence-member:hover{
+    .stream-controls, 
+    .list-controls{
+        visibility:visible;
+        opacity:1;
+    }
+    .stream-menu{
+        visibility:visible;
+        opacity:1;
+    }
+}
\ No newline at end of file