Style and routing improvements

public/app/app.js

@@ -82,14 +82,16 @@ if (module.hot) {
 }
 
 // Chunked polyfill for browsers without Intl support
-if (!window.Intl) {
-  Promise.all([
-    System.import('intl'),
-    System.import('intl/locale-data/jsonp/en.js'),
-  ]).then(() => render(translationMessages));
-} else {
-  render(translationMessages);
-}
+window.onload = function onLoad() {
+  if (!window.Intl) {
+    Promise.all([
+      System.import('intl'),
+      System.import('intl/locale-data/jsonp/en.js'),
+    ]).then(() => render(translationMessages));
+  } else {
+    render(translationMessages);
+  }
+};
 
 // Install ServiceWorker and AppCache in the end since
 // it's not most important operation and if main code fails,

public/app/components/Header/styles.scss

@@ -4,9 +4,12 @@
 .header { /* stylelint-ignore */
   width: 100%;
   height: $header-height;
-  position: relative;
+  position: fixed;
+  z-index: 100;
+  left: $left-menu-width;
 
   box-shadow:  0 1px 2px 0 rgba(40, 42, 49, 0.16);
+  background-color: $white;
 
   line-height: $header-height;
 }

public/app/components/LeftMenuHeader/index.js

@@ -14,7 +14,7 @@ class LeftMenuHeader extends React.Component { // eslint-disable-line react/pref
     return (
       <div className={styles.leftMenuHeader}>
         <Link to="/" className={styles.leftMenuHeaderLink}>
-          <span className={styles.projectName}>MyApp</span>
+          <span className={styles.projectName}></span>
         </Link>
       </div>
     );

public/app/components/LeftMenuHeader/styles.scss

@@ -8,12 +8,20 @@
 
 .projectName {
   display: block;
+  height: 100%;
+  width: 100%;
   text-align: center;
   line-height: $header-height;
   vertical-align: middle;
   font-size: 2rem;
   letter-spacing: 0.2rem;
   color: $white;
+
+  // TMP
+  background-image: url('assets/images/logo-strapi.png');
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: 12rem auto;
 }
 
 .leftMenuHeaderLink {

public/app/containers/App/index.js

@@ -27,6 +27,7 @@ export class App extends React.Component { // eslint-disable-line react/prefer-s
   render() {
     return (
       <div className={styles.container}>
+        <div className={styles.baseline}></div>
         {React.Children.toArray(this.props.children)}
       </div>
     );

public/app/containers/App/styles.scss

@@ -32,4 +32,5 @@
   min-height: 100%;
   //background: url('assets/images/baseline-18.png');
   background: url('assets/images/baseline-20.png');
+  pointer-events: none;
 }

public/app/containers/Content/styles.scss

@@ -3,9 +3,9 @@
 
 .content { /* stylelint-ignore */
   background: $content-background;
-  height: calc(100vh - #{$header-height});
-  padding-top: 4.3rem;
-  padding-bottom: 4rem;
-  padding-left: 4rem;
-  padding-right: 4rem;
+  min-height: calc(100vh - #{$header-height});
+  width: calc(100vw - #{$left-menu-width});
+  margin-top: $header-height;
+  margin-left: $left-menu-width;
+  padding: 3rem;
 }

public/app/containers/LeftMenu/styles.scss

@@ -6,5 +6,7 @@
   height: 100vh;
   width: $left-menu-width;
   float: left;
-  position: relative;
+  position: fixed;
+  top: 0;
+  left: 0;
 }

public/app/containers/PluginPage/index.js

@@ -17,6 +17,11 @@ export class PluginPage extends React.Component { // eslint-disable-line react/p
   };
 
   render() {
+    const containers = this.props.plugins.valueSeq().map((plugin, i) => {
+      const Elem = plugin.mainComponent;
+      return <Elem key={i} {...this.props}></Elem>;
+    });
+
     return (
       <div>
         <Helmet
@@ -25,7 +30,7 @@ export class PluginPage extends React.Component { // eslint-disable-line react/p
             { name: 'description', content: 'Description of PluginPage' },
           ]}
         />
-        {React.Children.toArray(this.props.children)}
+        {containers}
       </div>
     );
   }

public/app/styles/base/fonts.scss

@@ -0,0 +1,216 @@
+/* Webfont: Lato-Black */@font-face {
+  font-family: 'LatoWebBlack';
+  src: url('fonts/lato/Lato-Black.eot'); /* IE9 Compat Modes */
+  src: url('fonts/lato/Lato-Black.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('fonts/lato/Lato-Black.woff2') format('woff2'), /* Modern Browsers */
+  url('fonts/lato/Lato-Black.woff') format('woff'), /* Modern Browsers */
+  url('fonts/lato/Lato-Black.ttf') format('truetype');
+  font-style: normal;
+  font-weight: normal;
+  text-rendering: optimizeLegibility;
+}
+
+/* Webfont: Lato-BlackItalic */@font-face {
+  font-family: 'LatoWebBlack';
+  src: url('fonts/lato/Lato-BlackItalic.eot'); /* IE9 Compat Modes */
+  src: url('fonts/lato/Lato-BlackItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('fonts/lato/Lato-BlackItalic.woff2') format('woff2'), /* Modern Browsers */
+  url('fonts/lato/Lato-BlackItalic.woff') format('woff'), /* Modern Browsers */
+  url('fonts/lato/Lato-BlackItalic.ttf') format('truetype');
+  font-style: italic;
+  font-weight: normal;
+  text-rendering: optimizeLegibility;
+}
+
+/* Webfont: Lato-Bold */@font-face {
+  font-family: 'LatoWebBold';
+  src: url('fonts/lato/Lato-Bold.eot'); /* IE9 Compat Modes */
+  src: url('fonts/lato/Lato-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('fonts/lato/Lato-Bold.woff2') format('woff2'), /* Modern Browsers */
+  url('fonts/lato/Lato-Bold.woff') format('woff'), /* Modern Browsers */
+  url('fonts/lato/Lato-Bold.ttf') format('truetype');
+  font-style: normal;
+  font-weight: normal;
+  text-rendering: optimizeLegibility;
+}
+
+/* Webfont: Lato-BoldItalic */@font-face {
+  font-family: 'LatoWebBold';
+  src: url('fonts/lato/Lato-BoldItalic.eot'); /* IE9 Compat Modes */
+  src: url('fonts/lato/Lato-BoldItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('fonts/lato/Lato-BoldItalic.woff2') format('woff2'), /* Modern Browsers */
+  url('fonts/lato/Lato-BoldItalic.woff') format('woff'), /* Modern Browsers */
+  url('fonts/lato/Lato-BoldItalic.ttf') format('truetype');
+  font-style: italic;
+  font-weight: normal;
+  text-rendering: optimizeLegibility;
+}
+
+/* Webfont: Lato-Hairline */@font-face {
+  font-family: 'LatoWebHairline';
+  src: url('fonts/lato/Lato-Hairline.eot'); /* IE9 Compat Modes */
+  src: url('fonts/lato/Lato-Hairline.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('fonts/lato/Lato-Hairline.woff2') format('woff2'), /* Modern Browsers */
+  url('fonts/lato/Lato-Hairline.woff') format('woff'), /* Modern Browsers */
+  url('fonts/lato/Lato-Hairline.ttf') format('truetype');
+  font-style: normal;
+  font-weight: normal;
+  text-rendering: optimizeLegibility;
+}
+
+/* Webfont: Lato-HairlineItalic */@font-face {
+  font-family: 'LatoWebHairline';
+  src: url('fonts/lato/Lato-HairlineItalic.eot'); /* IE9 Compat Modes */
+  src: url('fonts/lato/Lato-HairlineItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('fonts/lato/Lato-HairlineItalic.woff2') format('woff2'), /* Modern Browsers */
+  url('fonts/lato/Lato-HairlineItalic.woff') format('woff'), /* Modern Browsers */
+  url('fonts/lato/Lato-HairlineItalic.ttf') format('truetype');
+  font-style: italic;
+  font-weight: normal;
+  text-rendering: optimizeLegibility;
+}
+
+/* Webfont: Lato-Heavy */@font-face {
+  font-family: 'LatoWebHeavy';
+  src: url('fonts/lato/Lato-Heavy.eot'); /* IE9 Compat Modes */
+  src: url('fonts/lato/Lato-Heavy.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('fonts/lato/Lato-Heavy.woff2') format('woff2'), /* Modern Browsers */
+  url('fonts/lato/Lato-Heavy.woff') format('woff'), /* Modern Browsers */
+  url('fonts/lato/Lato-Heavy.ttf') format('truetype');
+  font-style: normal;
+  font-weight: normal;
+  text-rendering: optimizeLegibility;
+}
+
+/* Webfont: Lato-HeavyItalic */@font-face {
+  font-family: 'LatoWebHeavy';
+  src: url('fonts/lato/Lato-HeavyItalic.eot'); /* IE9 Compat Modes */
+  src: url('fonts/lato/Lato-HeavyItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('fonts/lato/Lato-HeavyItalic.woff2') format('woff2'), /* Modern Browsers */
+  url('fonts/lato/Lato-HeavyItalic.woff') format('woff'), /* Modern Browsers */
+  url('fonts/lato/Lato-HeavyItalic.ttf') format('truetype');
+  font-style: italic;
+  font-weight: normal;
+  text-rendering: optimizeLegibility;
+}
+
+/* Webfont: Lato-Italic */@font-face {
+  font-family: 'LatoWeb';
+  src: url('fonts/lato/Lato-Italic.eot'); /* IE9 Compat Modes */
+  src: url('fonts/lato/Lato-Italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('fonts/lato/Lato-Italic.woff2') format('woff2'), /* Modern Browsers */
+  url('fonts/lato/Lato-Italic.woff') format('woff'), /* Modern Browsers */
+  url('fonts/lato/Lato-Italic.ttf') format('truetype');
+  font-style: italic;
+  font-weight: normal;
+  text-rendering: optimizeLegibility;
+}
+
+/* Webfont: Lato-Light */@font-face {
+  font-family: 'LatoWebLight';
+  src: url('fonts/lato/Lato-Light.eot'); /* IE9 Compat Modes */
+  src: url('fonts/lato/Lato-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('fonts/lato/Lato-Light.woff2') format('woff2'), /* Modern Browsers */
+  url('fonts/lato/Lato-Light.woff') format('woff'), /* Modern Browsers */
+  url('fonts/lato/Lato-Light.ttf') format('truetype');
+  font-style: normal;
+  font-weight: normal;
+  text-rendering: optimizeLegibility;
+}
+
+/* Webfont: Lato-LightItalic */@font-face {
+  font-family: 'LatoWebLight';
+  src: url('fonts/lato/Lato-LightItalic.eot'); /* IE9 Compat Modes */
+  src: url('fonts/lato/Lato-LightItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('fonts/lato/Lato-LightItalic.woff2') format('woff2'), /* Modern Browsers */
+  url('fonts/lato/Lato-LightItalic.woff') format('woff'), /* Modern Browsers */
+  url('fonts/lato/Lato-LightItalic.ttf') format('truetype');
+  font-style: italic;
+  font-weight: normal;
+  text-rendering: optimizeLegibility;
+}
+
+/* Webfont: Lato-Medium */@font-face {
+  font-family: 'LatoWebMedium';
+  src: url('fonts/lato/Lato-Medium.eot'); /* IE9 Compat Modes */
+  src: url('fonts/lato/Lato-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('fonts/lato/Lato-Medium.woff2') format('woff2'), /* Modern Browsers */
+  url('fonts/lato/Lato-Medium.woff') format('woff'), /* Modern Browsers */
+  url('fonts/lato/Lato-Medium.ttf') format('truetype');
+  font-style: normal;
+  font-weight: normal;
+  text-rendering: optimizeLegibility;
+}
+
+/* Webfont: Lato-MediumItalic */@font-face {
+  font-family: 'LatoWebMedium';
+  src: url('fonts/lato/Lato-MediumItalic.eot'); /* IE9 Compat Modes */
+  src: url('fonts/lato/Lato-MediumItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('fonts/lato/Lato-MediumItalic.woff2') format('woff2'), /* Modern Browsers */
+  url('fonts/lato/Lato-MediumItalic.woff') format('woff'), /* Modern Browsers */
+  url('fonts/lato/Lato-MediumItalic.ttf') format('truetype');
+  font-style: italic;
+  font-weight: normal;
+  text-rendering: optimizeLegibility;
+}
+
+/* Webfont: Lato-Regular */@font-face {
+  font-family: 'LatoWeb';
+  src: url('fonts/lato/Lato-Regular.eot'); /* IE9 Compat Modes */
+  src: url('fonts/lato/Lato-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('fonts/lato/Lato-Regular.woff2') format('woff2'), /* Modern Browsers */
+  url('fonts/lato/Lato-Regular.woff') format('woff'), /* Modern Browsers */
+  url('fonts/lato/Lato-Regular.ttf') format('truetype');
+  font-style: normal;
+  font-weight: normal;
+  text-rendering: optimizeLegibility;
+}
+
+/* Webfont: Lato-Semibold */@font-face {
+  font-family: 'LatoWebSemibold';
+  src: url('fonts/lato/Lato-Semibold.eot'); /* IE9 Compat Modes */
+  src: url('fonts/lato/Lato-Semibold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('fonts/lato/Lato-Semibold.woff2') format('woff2'), /* Modern Browsers */
+  url('fonts/lato/Lato-Semibold.woff') format('woff'), /* Modern Browsers */
+  url('fonts/lato/Lato-Semibold.ttf') format('truetype');
+  font-style: normal;
+  font-weight: normal;
+  text-rendering: optimizeLegibility;
+}
+
+/* Webfont: Lato-SemiboldItalic */@font-face {
+  font-family: 'LatoWebSemibold';
+  src: url('fonts/lato/Lato-SemiboldItalic.eot'); /* IE9 Compat Modes */
+  src: url('fonts/lato/Lato-SemiboldItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('fonts/lato/Lato-SemiboldItalic.woff2') format('woff2'), /* Modern Browsers */
+  url('fonts/lato/Lato-SemiboldItalic.woff') format('woff'), /* Modern Browsers */
+  url('fonts/lato/Lato-SemiboldItalic.ttf') format('truetype');
+  font-style: italic;
+  font-weight: normal;
+  text-rendering: optimizeLegibility;
+}
+
+/* Webfont: Lato-Thin */@font-face {
+  font-family: 'LatoWebThin';
+  src: url('fonts/lato/Lato-Thin.eot'); /* IE9 Compat Modes */
+  src: url('fonts/lato/Lato-Thin.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('fonts/lato/Lato-Thin.woff2') format('woff2'), /* Modern Browsers */
+  url('fonts/lato/Lato-Thin.woff') format('woff'), /* Modern Browsers */
+  url('fonts/lato/Lato-Thin.ttf') format('truetype');
+  font-style: normal;
+  font-weight: normal;
+  text-rendering: optimizeLegibility;
+}
+
+/* Webfont: Lato-ThinItalic */@font-face {
+  font-family: 'LatoWebThin';
+  src: url('fonts/lato/Lato-ThinItalic.eot'); /* IE9 Compat Modes */
+  src: url('fonts/lato/Lato-ThinItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('fonts/lato/Lato-ThinItalic.woff2') format('woff2'), /* Modern Browsers */
+  url('fonts/lato/Lato-ThinItalic.woff') format('woff'), /* Modern Browsers */
+  url('fonts/lato/Lato-ThinItalic.ttf') format('truetype');
+  font-style: italic;
+  font-weight: normal;
+  text-rendering: optimizeLegibility;
+}
+

public/app/styles/libs/bootstrap/.scss-lint.yml

@@ -89,7 +89,7 @@ linters:
     enabled: true
 
   ImportantRule:
-    enabled: true
+    enabled: false
 
   ImportPath:
     enabled: true

public/app/styles/libs/bootstrap/_alert.scss

@@ -26,13 +26,13 @@
 // Expand the right padding and account for the close button's positioning.
 
 .alert-dismissible {
-  padding-right: ($alert-padding + 20px);
+  padding-right: ($alert-padding * 2);
 
   // Adjust close link position
   .close {
     position: relative;
-    top: -2px;
-    right: -21px;
+    top: -.125rem;
+    right: -$alert-padding;
     color: inherit;
   }
 }

public/app/styles/libs/bootstrap/_card.scss

@@ -314,7 +314,6 @@
     column-gap: $card-columns-sm-up-column-gap;
 
     .card {
-      display: inline-block;
       width: 100%; // Don't let them exceed the column width
     }
   }

public/app/styles/libs/bootstrap/_forms.scss

@@ -35,8 +35,10 @@
   // Placeholder
   &::placeholder {
     color: $input-color-placeholder;
+    font-weight: 200;
+    font-style: italic;
     // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
-    opacity: 1;
+    opacity: 0.8;
   }
 
   // Disabled and read-only inputs

public/app/styles/libs/bootstrap/_input-group.scss

@@ -90,18 +90,18 @@
   text-align: center;
   background-color: $input-group-addon-bg;
   border: $input-btn-border-width solid $input-group-addon-border-color;
-  @include border-radius($border-radius);
+  @include border-radius($input-border-radius);
 
   // Sizing
   &.form-control-sm {
     padding: $input-padding-y-sm $input-padding-x-sm;
     font-size: $font-size-sm;
-    @include border-radius($border-radius-sm);
+    @include border-radius($input-border-radius-sm);
   }
   &.form-control-lg {
     padding: $input-padding-y-lg $input-padding-x-lg;
     font-size: $font-size-lg;
-    @include border-radius($border-radius-lg);
+    @include border-radius($input-border-radius-lg);
   }
 
   // scss-lint:disable QualifyingElement

public/app/styles/libs/bootstrap/_media.scss

@@ -1,7 +1,6 @@
 @if $enable-flex {
   .media {
     display: flex;
-    margin-bottom: $spacer;
   }
   .media-body {
     flex: 1;
@@ -13,13 +12,6 @@
     align-self: flex-end;
   }
 } @else {
-  .media {
-    margin-top: $media-margin-top;
-
-    &:first-child {
-      margin-top: 0;
-    }
-  }
   .media,
   .media-body {
     overflow: hidden;

public/app/styles/libs/bootstrap/_navbar.scss

@@ -214,7 +214,6 @@
 //
 // Custom override for collapse plugin in navbar.
 
-// scss-lint:disable ImportantRule
 .navbar-toggleable {
   &-xs {
     @include clearfix;
@@ -255,4 +254,3 @@
     }
   }
 }
-// scss-lint:enable ImportantRule

public/app/styles/libs/bootstrap/_print.scss

@@ -1,4 +1,4 @@
-// scss-lint:disable ImportantRule, QualifyingElement
+// scss-lint:disable QualifyingElement
 
 // Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css
 

public/app/styles/libs/bootstrap/_progress.scss

@@ -26,7 +26,7 @@
   // Reset the default appearance
   appearance: none;
   // Set overall border radius
-  @include border-radius($border-radius);
+  @include border-radius($progress-border-radius);
 }
 
 // Filled-in portion of the bar
@@ -37,30 +37,30 @@
 }
 .progress[value]::-moz-progress-bar {
   background-color: $progress-bar-color;
-  @include border-left-radius($border-radius);
+  @include border-left-radius($progress-border-radius);
 }
 .progress[value]::-webkit-progress-value {
   background-color: $progress-bar-color;
-  @include border-left-radius($border-radius);
+  @include border-left-radius($progress-border-radius);
 }
 // Tweaks for full progress bar
 .progress[value="100"]::-moz-progress-bar {
-  @include border-right-radius($border-radius);
+  @include border-right-radius($progress-border-radius);
 }
 .progress[value="100"]::-webkit-progress-value {
-  @include border-right-radius($border-radius);
+  @include border-right-radius($progress-border-radius);
 }
 
 // Unfilled portion of the bar
 .progress[value]::-webkit-progress-bar {
   background-color: $progress-bg;
-  @include border-radius($border-radius);
+  @include border-radius($progress-border-radius);
   @include box-shadow($progress-box-shadow);
 }
 base::-moz-progress-bar, // Absurd-but-syntactically-valid selector to make these styles Firefox-only
 .progress[value] {
   background-color: $progress-bg;
-  @include border-radius($border-radius);
+  @include border-radius($progress-border-radius);
   @include box-shadow($progress-box-shadow);
 }
 
@@ -68,7 +68,7 @@ base::-moz-progress-bar, // Absurd-but-syntactically-valid selector to make thes
 @media screen and (min-width:0\0) {
   .progress {
     background-color: $progress-bg;
-    @include border-radius($border-radius);
+    @include border-radius($progress-border-radius);
     @include box-shadow($progress-box-shadow);
   }
   .progress-bar {
@@ -76,10 +76,10 @@ base::-moz-progress-bar, // Absurd-but-syntactically-valid selector to make thes
     height: $spacer-y;
     text-indent: -999rem; // Simulate hiding of value as in native `<progress>`
     background-color: $progress-bar-color;
-    @include border-left-radius($border-radius);
+    @include border-left-radius($progress-border-radius);
   }
   .progress[width="100%"] {
-    @include border-right-radius($border-radius);
+    @include border-right-radius($progress-border-radius);
   }
 }
 

public/app/styles/libs/bootstrap/_reboot.scss

@@ -1,4 +1,4 @@
-// scss-lint:disable ImportantRule, QualifyingElement, DuplicateProperty
+// scss-lint:disable QualifyingElement, DuplicateProperty
 
 // Reboot
 //
@@ -304,8 +304,9 @@ label {
 //
 // Credit: https://github.com/suitcss/base/
 button:focus {
-  outline: 1px dotted;
-  outline: 5px auto -webkit-focus-ring-color;
+  // outline: 1px dotted;
+  // outline: 5px auto -webkit-focus-ring-color;
+  outline: none;
 }
 
 input,

public/app/styles/libs/bootstrap/_tables.scss

@@ -101,7 +101,7 @@
 
 // Inverse styles
 //
-// Same table markup, but inverted color scheme—dark background and light text.
+// Same table markup, but inverted color scheme: dark background and light text.
 
 .thead-inverse {
   th {
@@ -184,7 +184,6 @@
     }
   }
 
-  // scss-lint:disable ImportantRule
   tr {
     float: left;
 
@@ -194,5 +193,4 @@
       border: $table-border-width solid $table-border-color;
     }
   }
-  // scss-lint:enable ImportantRule
 }

public/app/styles/libs/bootstrap/bootstrap.scss

@@ -1,5 +1,5 @@
 /*!
- * Bootstrap v4.0.0-alpha.3 (http://getbootstrap.com)
+ * Bootstrap v4.0.0-alpha.4 (http://getbootstrap.com)
  * Copyright 2011-2016 The Bootstrap Authors
  * Copyright 2011-2016 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)

public/app/styles/libs/bootstrap/mixins/_buttons.scss

@@ -27,7 +27,7 @@
 
   &:active,
   &.active,
-  .open > &.dropdown-toggle {
+  .open > .dropdown-toggle {
     color: $color;
     background-color: $active-background;
         border-color: $active-border;
@@ -79,7 +79,7 @@
 
   &:active,
   &.active,
-  .open > &.dropdown-toggle {
+  .open > .dropdown-toggle {
     color: #fff;
     background-color: $color;
         border-color: $color;

public/app/styles/libs/bootstrap/mixins/_forms.scss

@@ -7,14 +7,8 @@
   // Color the label and help text
   .form-control-feedback,
   .form-control-label,
-  .radio,
-  .checkbox,
-  .radio-inline,
-  .checkbox-inline,
-  &.radio label,
-  &.checkbox label,
-  &.radio-inline label,
-  &.checkbox-inline label,
+  .form-check-label,
+  .form-check-inline,
   .custom-control {
     color: $color;
   }

public/app/styles/libs/bootstrap/mixins/_grid-framework.scss

@@ -45,7 +45,7 @@
 
       @for $i from 1 through $columns {
         .col-#{$breakpoint}-#{$i} {
-          @include make-col($i, $columns, $gutter);
+          @include make-col($i, $columns);
         }
       }
 

public/app/styles/libs/bootstrap/mixins/_grid.scss

@@ -33,7 +33,7 @@
   margin-right: ($gutter / -2);
 }
 
-@mixin make-col-ready($size, $columns: $grid-columns, $gutter: $grid-gutter-width) {
+@mixin make-col-ready($gutter: $grid-gutter-width) {
   position: relative;
   min-height: 1px; // Prevent collapsing
   padding-right: ($gutter / 2);
@@ -47,7 +47,7 @@
   }
 }
 
-@mixin make-col($size, $columns: $grid-columns, $gutter: $grid-gutter-width) {
+@mixin make-col($size, $columns: $grid-columns) {
   @if $enable-flex {
     flex: 0 0 percentage($size / $columns);
     // Add a `max-width` to ensure content within each column does not blow out

public/app/styles/libs/bootstrap/mixins/_tab-focus.scss

@@ -4,6 +4,6 @@
   // WebKit-specific. Other browsers will keep their default outline style.
   // (Initially tried to also force default via `outline: initial`,
   // but that seems to erroneously remove the outline in Firefox altogether.)
-  outline: 5px auto -webkit-focus-ring-color;
-  outline-offset: -2px;
+  // outline: 5px auto -webkit-focus-ring-color;
+  // outline-offset: -2px;
 }