Merge branch 'issues/forcouncils/36-mobile-inspector-improvements'

13 files changed, 316 insertions, 126 deletions

diff --git a/web/cobrands/fixmystreet.com/base.scss b/web/cobrands/fixmystreet.com/base.scss
index 869654b87..905f20f41 100644
--- a/web/cobrands/fixmystreet.com/base.scss
+++ b/web/cobrands/fixmystreet.com/base.scss
@@ -152,6 +152,19 @@
     }
 }
 
+.btn-primary {
+    @include button-reset(
+        mix($primary, #fff, 50%),
+        $primary,
+        mix($primary, #ccc, 30%),
+        inherit,
+        darken($primary, 3%),
+        darken(mix($primary, #fff, 50%), 3%),
+        mix($primary, #ccc, 30%),
+        inherit
+    );
+}
+
 .variant1 {
     #site-header {
         border-top-color: #fff;
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index 9b78ca580..4aeb14d88 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -370,7 +370,9 @@ $.extend(fixmystreet.set_up, {
   },
 
   category_change: function() {
-    // Deal with changes to category by asking for details from the server.
+    // Deal with changes to report category.
+
+    // On the new report form, does this by asking for details from the server.
     // Delegation is necessary because #form_category may be replaced during the lifetime of the page
     $("#problem_form").on("change.category", "select#form_category", function(){
         var args = {
@@ -395,8 +397,18 @@ $.extend(fixmystreet.set_up, {
             }
         });
     });
+
+    // On the manage/inspect report form, we already have all the extra inputs
+    // in the DOM, we just need to hide/show them as appropriate.
+    $('form#report_inspect_form [name=category]').change(function() {
+        var category = $(this).val();
+        var selector = "[data-category='"+category+"']";
+        $("form#report_inspect_form [data-category]:not("+selector+")").addClass("hidden");
+        $("form#report_inspect_form "+selector).removeClass("hidden");
+    });
   },
 
+
   contribute_as: function() {
     $('.content').on('change', '.js-contribute-as', function(){
         var opt = this.options[this.selectedIndex],
@@ -426,6 +438,25 @@ $.extend(fixmystreet.set_up, {
     $('.js-contribute-as').change();
   },
 
+  inspect_with_public_update: function() {
+    $('.js-toggle-public-update').each(function() {
+        var $checkbox = $(this);
+        var toggle_public_update = function() {
+            if ($checkbox.prop('checked')) {
+                $('#public_update').parents('p').show();
+            } else {
+                $('#public_update').parents('p').hide();
+            }
+        };
+
+        $checkbox.on('change', function() {
+            toggle_public_update();
+        });
+
+        toggle_public_update();
+    });
+  },
+
   on_resize: function() {
     var last_type;
     $(window).on('resize', function() {
diff --git a/web/cobrands/fixmystreet/images/crosshairs.png b/web/cobrands/fixmystreet/images/crosshairs.png
new file mode 100644
index 000000000..e3f216814
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/crosshairs.png
diff --git a/web/cobrands/fixmystreet/images/crosshairs.svg b/web/cobrands/fixmystreet/images/crosshairs.svg
new file mode 100644
index 000000000..80b5172c6
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/crosshairs.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><title>icon-crosshairs</title><path d="M13.013 8.48c-.242 2.344-2.117 4.204-4.475 4.445V9.977H7.534v2.953c-2.375-.225-4.268-2.095-4.512-4.45h3.005v-.997H3.02C3.246 5.113 5.146 3.227 7.533 3v2.986h1.004V3.003c2.37.243 4.25 2.12 4.478 4.48h-2.97v.998h2.967zm1.008-.997c-.232-2.91-2.558-5.232-5.482-5.48V0H7.534v2.002c-2.942.233-5.285 2.56-5.52 5.48H0v1h2.017c.25 2.904 2.587 5.214 5.517 5.446V16h1.004v-2.074c2.912-.247 5.232-2.55 5.48-5.445H16v-.997h-1.98z" fill="#000" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/web/cobrands/fixmystreet/images/crosshairs@2x.png b/web/cobrands/fixmystreet/images/crosshairs@2x.png
new file mode 100644
index 000000000..c7caa518a
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/crosshairs@2x.png
diff --git a/web/cobrands/fixmystreet/images/navigate.png b/web/cobrands/fixmystreet/images/navigate.png
new file mode 100644
index 000000000..c37331e0d
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/navigate.png
diff --git a/web/cobrands/fixmystreet/images/navigate.svg b/web/cobrands/fixmystreet/images/navigate.svg
new file mode 100644
index 000000000..a00b08825
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/navigate.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><title>icon-navigate</title><path d="M15.348.002c-.072.007-.142.026-.206.057L.342 7.057c-.216.103-.35.324-.342.562.008.24.158.45.38.538l5.356 2.106 2.106 5.356c.088.222.3.372.538.38.238.008.46-.126.562-.342l7-14.8c.092-.194.074-.423-.05-.6-.122-.177-.33-.274-.544-.256zm-2.82 2.62L6.055 9.095 2.11 7.546 12.53 2.62zm.857.836l-4.937 10.43-1.55-3.942 6.487-6.488z" fill="#000" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/web/cobrands/fixmystreet/images/navigate@2x.png b/web/cobrands/fixmystreet/images/navigate@2x.png
new file mode 100644
index 000000000..1ea3659eb
--- /dev/null
+++ b/web/cobrands/fixmystreet/images/navigate@2x.png
diff --git a/web/cobrands/oxfordshire/base.scss b/web/cobrands/oxfordshire/base.scss
index 12f92b531..955c341bf 100644
--- a/web/cobrands/oxfordshire/base.scss
+++ b/web/cobrands/oxfordshire/base.scss
@@ -69,4 +69,21 @@ dd, p {
   & > :last-child {
     margin-bottom: 0;
   }
+
+  .segmented-control + & {
+    margin-top: 1em;
+  }
+}
+
+.btn-primary {
+    @include button-reset(
+        $oxfordshire_button_top,
+        $oxfordshire_button_bottom,
+        $oxfordshire_button_border,
+        #fff,
+        darken($oxfordshire_button_bottom, 3%),
+        darken($oxfordshire_button_top, 3%),
+        $oxfordshire_button_border,
+        #fff
+    );
 }
diff --git a/web/cobrands/oxfordshire/layout.scss b/web/cobrands/oxfordshire/layout.scss
index c44e91586..22edca768 100644
--- a/web/cobrands/oxfordshire/layout.scss
+++ b/web/cobrands/oxfordshire/layout.scss
@@ -60,6 +60,8 @@ body.twothirdswidthpage {
     }
 }
 
+// TODO: This entire section is very suspicious
+//
 // To prevent font size larger interfering with the fixed Oxfordshire layout
 .container { width: auto; }
 body:not(.admin) .full-width { width: 464px; }
@@ -223,11 +225,10 @@ body.mappage {
 
 #map_sidebar {
   background-color: $oxfordshire_very_light_green;
+}
 
-  .with-actions & {
-    background-image: -webkit-linear-gradient(flip(90deg, 270deg), transparent 29em, #deead2 29em);
-    background-image: linear-gradient(flip(90deg, 270deg), transparent 29em, #deead2 29em);
-  }
+#side-inspect {
+  background-color: #deead2;
 }
 
 .item-list--reports {
@@ -286,11 +287,12 @@ h4.static-with-rule {
 
 #oxford-wrapper #front-main #postcodeForm div {
   border: 1px solid #fff; // because orange "Go" button (see below) abuts this border, looks a tiny bit better if it's not dark green
+  width: 24em; // up from default 20em
 
   #pc {
-    padding: 0 2%;
-    width: 89%;
-    height: 38px;
+    padding: 0 0 0 2%;
+    width: 20em;
+    height: 40px;
   }
 }
 
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 7462682ee..612d8cf55 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -246,7 +246,7 @@ textarea {
 
 textarea {
   line-height: 1.5em;
-  min-height: 8em;
+  min-height: 5em;
 }
 
 label{
@@ -285,6 +285,10 @@ label{
 select.form-control {
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
     height: 2.2em; // roughly equal to default input height
+
+    &[multiple] {
+        height: auto;
+    }
 }
 
 .form-section-heading {
@@ -398,27 +402,14 @@ select.form-control {
   margin:1em 0;
 }
 
-.problem-inspector-fields {
-  select {
-    height: 2.4em; // match text inputs
-    -webkit-appearance: menulist-button; // so it's the right height in Safari
-  }
-
-  p.left,
-  p.right {
-    width: 46%;
-
-    label {
-        margin-top: 0;
-    }
-  }
-
-  p.left {
-    float: #{$left};
-  }
+.label-containing-checkbox {
+  padding-#{$left}: 24px;
+  position: relative;
 
-  p.right {
-    float: #{$right};
+  input {
+    position: absolute;
+    #{$left}: 0;
+    top: 0.2em;
   }
 }
 
@@ -725,22 +716,22 @@ footer {
 
 /*BUTTONS*/
 
-// Default style set for buttons, inputs and .btn class. Red and green class available.
-// NB: a.btn is included in the selector otherwise a:visited is more specific and
-// the wrong text colour is applied.
-button, input[type=submit], .btn, a.btn {
+.btn {
   @include button-reset;
 }
 
-.green-btn,
-button.green-btn,
-input.green-btn{
+.btn + .btn {
+  // Ensure extra space between inline buttons placed next to each other.
+  margin-#{$left}: 0.5em;
+}
+
+.btn-primary,
+.green-btn {
   @include button-reset(#9FDE23, #7FB900, #5B9700, #fff, #9FDE23, #7FB900, #5B9700, #fff);
 }
 
-.red-btn,
-button.red-btn,
-input.red-btn{
+.btn-danger,
+.red-btn {
   @include button-reset(#FF0038, #BF002A, #80001C, #fff, #FF0038, #BF002A, #80001C, #fff);
 }
 
@@ -753,10 +744,6 @@ input.final-submit {
 .btn--facebook {
     @include button-reset(#3b5998, darken(#3b5998, 10%), #3b5998, #fff, darken(#3b5998, 5%), darken(#3b5998, 10%), #3b5998, #fff);
 
-    &:visited {
-        color: #fff;
-    }
-
     img {
         margin-right: 0.5em;
         vertical-align: -0.2em;
@@ -768,10 +755,6 @@ input.final-submit {
 .btn--twitter {
     @include button-reset(#55acee, darken(#55acee, 10%), #55acee, #fff, darken(#55acee, 5%), darken(#55acee, 10%), #55acee, #fff);
 
-    &:visited {
-        color: #fff;
-    }
-
     img {
         margin-right: 0.5em;
         vertical-align: -0.2em;
@@ -780,9 +763,45 @@ input.final-submit {
     }
 }
 
+.btn--navigate,
+.btn--geolocate {
+    &:before {
+        content: "";
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        background: transparent url(/cobrands/fixmystreet/images/navigate.png) no-repeat 0 0;
+        background-size: 16px 16px;
+        margin-#{$right}: 0.5em;
+        vertical-align: -0.1em; // vertically centre icon in button
+
+        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+            background-image: url(/cobrands/fixmystreet/images/navigate@2.png);
+        }
+
+        @media all {
+            background-image: url(/cobrands/fixmystreet/images/navigate.svg), none;
+        }
+    }
+}
+
+.btn--geolocate {
+    &:before {
+        background-image: url(/cobrands/fixmystreet/images/crosshairs.png);
+
+        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+            background-image: url(/cobrands/fixmystreet/images/crosshairs@2.png);
+        }
+
+        @media all {
+            background-image: url(/cobrands/fixmystreet/images/crosshairs.svg), none;
+        }
+    }
+}
+
 .btn--block {
     display: block;
-    width: auto;
+    text-align: center;
 }
 
 // Under the button to override its text transform and width
@@ -1463,6 +1482,27 @@ label .muted {
   }
 }
 
+.inspect-section {
+  border-top: 1px solid rgba(0, 0, 0, 0.2);
+  padding-top: 1.5em;
+  margin-top: 1.5em;
+
+  &:first-child {
+    border-top: none;
+    margin-top: 0;
+    padding-top: 0;
+  }
+
+  & > :first-child,
+  & > :first-child > :first-child {
+    margin-top: 0;
+  }
+}
+
+.inspect-section--hidden {
+  display: none;
+}
+
 
 table.nicetable {
   width:100%;
@@ -1803,36 +1843,37 @@ table.nicetable {
 
 .segmented-control {
   @include clearfix();
-  display: flex; // fancy full-width buttons for browsers that support flexbox
+  @include flex-container(); // fancy full-width buttons for browsers that support flexbox
 
   & > * {
     display: block;
-    margin: 0;
-    padding: 0.75em 0.5em;
     text-align: center;
-    background: #fff linear-gradient(to bottom, #fff 0%, #eee 100%) 0 0 no-repeat;
-    border: 1px solid #ccc;
     border-right-width: 0; // avoid double border between items
-    font-weight: bold;
-    color: inherit !important;
-    text-decoration: none !important;
-    cursor: pointer;
     float: left; // float fallback for browsers that don't support flexbox
-    flex: 1 0 auto;
+    @include flex(1 0 auto, 1);
+  }
 
-    &:hover {
-      background: #f3f3f3 linear-gradient(to bottom, #f9f9f9 0%, #e9e9e9 100%) 0 0 no-repeat;
-    }
+  .btn {
+    padding: 0.75em 0.5em;
+    border-radius: 0;
+  }
+
+  .btn + .btn {
+    margin-#{$left}: 0;
   }
 
   & > :first-child {
-    border-radius: 0.25em 0 0 0.25em;
+    border-radius: 4px 0 0 4px;
   }
 
   & > :last-child {
-    border-radius: 0 0.25em 0.25em 0;
+    border-radius: 0 4px 4px 0;
     border-right-width: 1px; // reinstate border on last item
   }
+
+  & > :first-child:last-child {
+    border-radius: 4px;
+  }
 }
 
 // A special case of segmented control, where each "button" (or label) is
diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss
index 3bf3612ae..e7ccd5b03 100644
--- a/web/cobrands/sass/_layout.scss
+++ b/web/cobrands/sass/_layout.scss
@@ -3,6 +3,10 @@
 $image-sprite: '../fixmystreet/images/sprite.png' !default;
 $layout_front_stats_color: $primary !default;
 $mappage-header-height: 4em !default;
+$mappage-sidebar-width: 29em;
+$mappage-sidebar-padding: 1em;
+$mappage-with-notes-sidebar-width: 44em;
+$mappage-with-actions-sidebar-width: 58em;
 
 .internal-link-fixed-header {
     display: block;
@@ -222,6 +226,10 @@ h1 {
   }
 }
 
+.full-width {
+  margin: 0 ($mappage-sidebar-padding * -1);
+}
+
 // map page - has fixed header and different styling
 body.mappage {
 
@@ -339,17 +347,17 @@ body.mappage.admin {
   top: $mappage-header-height;
   bottom: 0;
   #{$right}: 0;
-  #{$left}: 29em; // width of sidebar
+  #{$left}: $mappage-sidebar-width;
   width: auto; // stretch from right edge of sidebar to left edge of window
   height: auto; // stretch from bottom of header to bottom of window
   margin: 0;
 
   .with-notes & {
-    #{$left}: 44em;
+    #{$left}: $mappage-with-notes-sidebar-width;
   }
 
   .with-actions & {
-    #{$left}: 58em;
+    #{$left}: $mappage-with-actions-sidebar-width;
   }
 }
 
@@ -359,41 +367,92 @@ body.mappage.admin {
   top: $mappage-header-height;
   #{$left}: 0;
   bottom: 0;
-  width: 27em; // width of sidebar, minus padding
-  padding: 1em 1em 0 1em; // Bottom padding taken care of by ::after
+  width: ($mappage-sidebar-width - ($mappage-sidebar-padding * 2));
+  padding: $mappage-sidebar-padding;
   overflow: auto; // vertical scrollbar when list is taller than window
   background-color: #fff; // since no longer in the flow inside .content
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
 
   .with-notes & {
-    width: 42em;
+    width: ($mappage-with-notes-sidebar-width - ($mappage-sidebar-padding * 2));
     // TODO: Should have a bitmap image fallback for old browsers!!
     background-image: -webkit-linear-gradient(flip(90deg, 270deg), transparent 29em, #E9F2FF 29em);
     background-image: linear-gradient(flip(90deg, 270deg), transparent 29em, #E9F2FF 29em);
   }
 
   .with-actions & {
-    width: 58em;
-    background-image: -webkit-linear-gradient(flip(90deg, 270deg), transparent 29em, #E9F2FF 29em);
-    background-image: linear-gradient(flip(90deg, 270deg), transparent 29em, #E9F2FF 29em);
+    width: $mappage-with-actions-sidebar-width;
+    max-width: 100%; // Secondary column will squish on screens 768-960px
+    padding: 0; // Padding will be handled by children of .two_column_sidebar
+
+    &:after {
+      display: none; // 4em bottom spacing will be handled by children of .two_column_sidebar
+    }
   }
-}
 
-// Firefox/IE and Chrome/Safari (e.g.) differ on where to clip overflowed
-// elements, one group clip outside padding, one clips inside. So using padding
-// in #map_sidebar works in Chrome/Safari but not in Firefox/IE. Instead, we
-// add some extra height using ::after.
-// https://bugzilla.mozilla.org/show_bug.cgi?id=748518
-#map_sidebar::after {
+  // Chrome/Safari count padding-bottom as part of the scrollable content in
+  // an overflow:scroll element (technically in contravention of the spec),
+  // whereas Firefox/IE render the padding outside the scrollable area.
+  // We need padding at the bottom of the sidebar, to stop .shadow-wrap from
+  // obscuring content at the bottom of the sidebar. So we use an :after
+  // pseudo-element instead of padding.
+  // https://bugzilla.mozilla.org/show_bug.cgi?id=748518
+  &:after {
     content: "";
     display: block;
     height: 4em;
-    clear: both;
+  }
 }
 
-// IE<=8 does not support ::after
-.iel8 #map_sidebar {
-    padding-bottom: 4em;
+// This goes inside #map_sidebar, and establishes a flex container allowing
+// us to split the sidebar into two side-by-side columns.
+.two_column_sidebar {
+  @include flex-container();
+  @include flex-align(stretch); // children will fill entire height of this element
+  min-height: 100%; // this element will fill entire height of parent (#map_sidebar)
+
+  & > * {
+    // Columns should start at 50% width, and (eg: if scrollbars appear,
+    // reducing the available width), shrink down to less than 50%.
+    @include box-sizing(border-box);
+    @include flex(0 1 auto);
+    width: 50%;
+    padding: $mappage-sidebar-padding;
+
+    // Add extra space at the bottom of the sidebar columns, to stop
+    // .shadow-wrap obscuring text at the bottom of the sidebar.
+    &:after {
+      content: "";
+      display: block;
+      height: 4em;
+    }
+  }
+
+  // Default for children is to share the horizontal space equally amongst
+  // themselves. But to make sure that the edge of #side-report lines up
+  // with the edge of .shadow-wrap, we give #side-report a fixed width,
+  // and leave the other column to shrink to the remaining space.
+  #side-report {
+    width: $mappage-sidebar-width;
+    @include flex(0 0 auto);
+  }
+
+  // No flexbox in IE8, so we settle for floating the columns instead.
+  // They will no longer stretch the full height of the sidebar, and the
+  // width of #side-report will no longer match the width of .shadow-wrap
+  // when a scrollbar is present.
+  .iel8 & {
+    @include clearfix();
+
+    & > * {
+      float: left;
+      width: 50%;
+    }
+
+    #side-report {
+      width: 50%;
+    }
+  }
 }
 
 #skip-this-step {
@@ -693,12 +752,15 @@ body.authpage {
 
 // Wraps around #key-tools box - sticks to the bottom of the screen on desktop
 .shadow-wrap {
-  position:fixed;
-  z-index:10; //this is just to ensure anythign inside .content that has position set goes sites it
+  position: fixed;
+  z-index: 10; //this is just to ensure anythign inside .content that has position set goes sites it
   bottom: 0;
-  width: 29em;
+  #{$left}: 0;
+  margin: 0;
+  width: $mappage-sidebar-width;
   overflow: hidden;
   padding-top: 2em;
+
   ul#key-tools {
     border-top: 0.25em solid $primary;
     margin: 0;
@@ -757,13 +819,6 @@ body.authpage {
   }
 }
 
-// Old versions of IE don't have box-sixing, so negative margins leave a 2em gap.
-// We can set a fixed width instead, which might result in a horizontal scrollbar
-// while the drawer is opening. Quel dommage.
-.iel8 .shadow-wrap.static {
-    width: 29em;
-}
-
 // If JS is disabled, these are still CSS positioned, so don't want behind shining through.
 #report-share, #report-updates-data {
     background-color: #fff;
@@ -879,18 +934,9 @@ textarea.form-error {
   }
 }
 
-// Similar to .with-notes, there's a special version of the
-// report details page, that includes a secondary column.
-body.with-actions {
-  #side-report {
-    width: 27em;
-    float: #{$left};
-  }
-
-  #side-report-secondary {
-    width: 27em;
-    float: #{$right};
-  }
+// The coloured sidebar column on .with-actions pages.
+#side-inspect {
+  background-color: #E9F2FF;
 }
 
 // More general notes
diff --git a/web/cobrands/sass/_mixins.scss b/web/cobrands/sass/_mixins.scss
index a1a278ad0..6d4f523ce 100644
--- a/web/cobrands/sass/_mixins.scss
+++ b/web/cobrands/sass/_mixins.scss
@@ -1,32 +1,45 @@
 $direction: 'left' !default;
 
 // Button reset
-@mixin button-reset($c1: #eee, $c2: #ccc, $c3: #999, $c4: #333, $c5: #777, $c6: #999, $c7: #666, $c8: #fff){
+// Uses !important a few times to quickly reset
+// styles from a:link, a:hover, a:visited etc.
+@mixin button-reset($bg-top: #fff, $bg-bottom: #eee, $border: #ccc, $text: inherit, $hover-bg-bottom: #e9e9e9, $hover-bg-top: #f9f9f9, $hover-border: #ccc, $hover-text: inherit){
   display: inline-block;
-  cursor:pointer;
-  font:{
-    size: 0.875em;
-    family: Helmet, Freesans, sans-serif;
-    weight:bold;
-  }
-  text-transform:uppercase;
-  line-height: 1.375em;
-  padding: 0.7em 0.5em 0.5em;
-  margin:0;
+  margin: 0;
+  padding: 0.75em 1em;
   width: auto;
   height: auto;
   vertical-align: top;
+  text-align: center;
+
+  font-size: 1em;
+  line-height: 1em;
+  font-weight: bold;
+  font-family: inherit;
+  text-decoration: none !important;
+  color: $text !important;
+
+  cursor: pointer;
+  background: $bg-bottom;
+  @include linear-gradient($bg-top, $bg-bottom);
+
+  border: 1px solid $border;
   @include border-radius(4px);
-  background: $c1;
-  @include linear-gradient($c1, $c2);
-  border:1px solid $c3;
-  color:$c4;
-  &:hover, &:hover:enabled {
-    background:$c5;
-    @include linear-gradient($c6, $c5);
-    text-decoration: none;
-    border:1px solid $c7;
-    color:$c8;
+
+  &:hover,
+  &:focus {
+    background: $hover-bg-bottom;
+    @include linear-gradient($hover-bg-top, $hover-bg-bottom);
+    text-decoration: none !important;
+    border-color: $hover-border;
+    color: $hover-text !important;
+  }
+
+  &:disabled {
+    background: $bg-bottom;
+    border-color: $border;
+    color: desaturate(darken($bg-bottom, 50%), 50%) !important;
+    cursor: default;
   }
 }
 
@@ -126,3 +139,28 @@ $right: right;
     background: #{$prefix}linear-gradient($stops);
   }
 }
+
+@mixin flex-container() {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+}
+
+@mixin flex($values, $values2009: 0) {
+  -webkit-box-flex: $values2009;
+  -moz-box-flex: $values2009;
+  -webkit-box-flex: $values;
+  -moz-box-flex: $values;
+  -webkit-flex: $values;
+  -ms-flex: $values;
+  flex: $values;
+}
+
+@mixin flex-align($alignment) {
+  -webkit-box-align: $alignment;
+  -webkit-align-items: $alignment;
+  -ms-flex-align: $alignment;
+  align-items: $alignment;
+}