Merged ESM into feature-bootstrap4. Started work on text inputs.

src/web/stylesheets/components/_operation.css

@@ -18,13 +18,13 @@
     border-right: none;
 }
 
-.arg-group {
+/* .arg-group {
     display: table;
     width: 100%;
     margin-top: 10px;
-}
+} */
 
-.arg-group-text {
+/* .arg-group-text {
     display: block;
 }
 
@@ -33,21 +33,21 @@
     width: auto;
     margin-right: 30px;
     height: 34px;
-}
+} */
 
-.inline-args input[type="checkbox"] {
+/* .inline-args input[type="checkbox"] {
     margin-top: 10px;
-}
+} */
 
-.inline-args input[type="number"] {
+/* .inline-args input[type="number"] {
     width: 100px;
+} */
+
+.op-title {
+    font-weight: var(--op-title-font-weight);
 }
 
-.arg-title {
-    font-weight: var(--arg-title-font-weight);
-}
-
-.arg-input {
+/* .arg-input {
     display: table-cell;
     width: 100%;
     padding: 6px 12px;
@@ -60,9 +60,9 @@
     border: 1px solid var(--arg-border-colour);
     font-family: var(--fixed-width-font-family);
     text-overflow: ellipsis;
-}
+} */
 
-.short-string {
+/* .short-string {
     width: 150px;
 }
 
@@ -122,7 +122,7 @@ textarea.arg {
 
 button.dropdown-toggle {
     background-color: var(--secondary-background-colour);
-}
+} */
 
 .register-list {
     background-color: var(--fc-operation-border-colour);

src/web/stylesheets/components/_pane.css

@@ -7,16 +7,20 @@
  */
 
 :root {
-    --title-height: 43px;
+    --title-height: 48px;
 }
 
 .title {
-    padding: 10px;
+    padding: 8px;
+    padding-left: 20px;
+    padding-right: 12px;
     height: var(--title-height);
     border-bottom: 1px solid var(--primary-border-colour);
     font-weight: var(--title-weight);
+    font-size: var(--title-size);
     color: var(--title-colour);
     background-color: var(--title-background-colour);
+    line-height: calc(var(--title-height) - 20px);
 }
 
 .list-area {

src/web/stylesheets/index.js

@@ -10,7 +10,7 @@
 import "highlight.js/styles/vs.css";
 
 /* Frameworks */
-import "bootstrap/dist/css/bootstrap.css";
+import "./vendors/bootstrap.scss";
 import "bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.css";
 import "bootstrap-colorpicker/dist/css/bootstrap-colorpicker.css";
 

src/web/stylesheets/layout/_controls.css

@@ -7,8 +7,7 @@
  */
 
 :root {
-    --controls-height: 130px;
-    --controls-division: 65%;
+    --controls-height: 80px;
 }
 
 #controls {
@@ -18,48 +17,5 @@
     bottom: 0;
     padding: 10px;
     border-top: 1px solid var(--primary-border-colour);
-    background-color: var(--secondary-background-colour);
-}
-
-#operational-controls {
-    width: var(--controls-division);
-    float: left;
-    text-align: center;
-}
-
-#bake-group {
-    display: table;
-    width: 100%;
-}
-
-#bake {
-    display: table-cell;
-    width: 100%;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-}
-
-#auto-bake-label {
-    display: table-cell;
-    padding: 1px;
-    line-height: 1.35;
-    width: 60px;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    border-left: 1px solid transparent;
-}
-
-#auto-bake-label:hover {
-    border-left-color: var(--btn-success-hover-border-colour);
-}
-
-#auto-bake-label div {
-    font-size: 10px;
-    padding: 2px;
-}
-
-#extra-controls {
-    float: right;
-    width: calc(100% - var(--controls-division));
-    padding-left: 10px;
+    background-color: var(--primary-background-colour);
 }

src/web/stylesheets/layout/_io.css

@@ -32,7 +32,7 @@
 
 .textarea-wrapper {
     position: absolute;
-    top: 43px;
+    top: var(--title-height);
     bottom: 0;
     width: 100%;
     overflow: hidden;
@@ -103,18 +103,13 @@
     display: none;
 }
 
-.io-btn-group {
-    float: right;
-    margin-top: -4px;
-}
-
 .io-info {
     margin-right: 20px;
-    margin-top: -4px;
+    margin-top: 1px;
     float: right;
     height: 30px;
     text-align: right;
-    line-height: 10px;
+    line-height: 12px;
     font-family: var(--fixed-width-font-family);
     font-weight: normal;
     font-size: 8pt;
@@ -145,6 +140,6 @@
     line-height: var(--primary-line-height);
     color: var(--primary-font-colour);
     top: 50%;
-    
+
     transition: all 0.5s ease;
 }

src/web/stylesheets/layout/_operations.css

@@ -21,7 +21,7 @@
 
 #edit-favourites {
     float: right;
-    margin-top: -5px;
+    margin-top: -6px;
 }
 
 .favourites-hover {

src/web/stylesheets/preloader.css

@@ -74,6 +74,14 @@
     transition: all 0.1s ease-in;
 }
 
+.loading-error {
+    display: block;
+    position: relative;
+    width: 600px;
+    left: calc(50% - 300px);
+    top: 10%;
+}
+
 
 /* Loaded */
 .loaded .loading-msg {

src/web/stylesheets/themes/_classic.css

@@ -30,6 +30,7 @@
 
     --title-colour: #424242;
     --title-weight: bold;
+    --title-size: 16px;
     --title-background-colour: #fafafa;
 
     --banner-font-colour: #468847;
@@ -67,7 +68,7 @@
 
 
     /* Operation arguments */
-    --arg-title-font-weight: bold;
+    --op-title-font-weight: bold;
     --arg-input-height: 34px;
     --arg-input-line-height: 20px;
     --arg-input-font-size: 15px;

src/web/stylesheets/themes/_dark.css

@@ -64,7 +64,7 @@
 
 
     /* Operation arguments */
-    --arg-title-font-weight: bold;
+    --op-title-font-weight: bold;
     --arg-input-height: 34px;
     --arg-input-line-height: 20px;
     --arg-input-font-size: 15px;

src/web/stylesheets/themes/_geocities.css

@@ -64,7 +64,7 @@
 
 
     /* Operation arguments */
-    --arg-title-font-weight: bold;
+    --op-title-font-weight: bold;
     --arg-input-height: 34px;
     --arg-input-line-height: 20px;
     --arg-input-font-size: 15px;

src/web/stylesheets/utils/_overrides.css

@@ -8,6 +8,31 @@
 
 /* Bootstrap */
 
+/* fallback */
+@font-face {
+    font-family: 'Material Icons';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v17/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
+}
+
+.material-icons {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+}
+
+/*
 button,
 a:focus {
     outline: none;
@@ -54,20 +79,21 @@ a:focus {
     color: var(--btn-success-hover-font-colour);
     background-color: var(--btn-success-hover-bg-colour);
     border-color: var(--btn-success-hover-border-colour);
-}
+}*/
 
-.btn,
+/*.btn,
 .btn-lg,
 .nav-tabs>li>a,
 .form-control,
 .popover,
 .alert,
+.panel,
 .modal-content,
 .tooltip-inner,
 .dropdown-menu,
 .input-group-addon {
     border-radius: 0 !important;
-}
+}*/
 
 .btn.dropdown-toggle {
     height: 34px;

src/web/stylesheets/vendors/bootstrap.less

@@ -1,58 +0,0 @@
-/**
- * Bootstrap imports
- *
- * @author n1474335 [n1474335@gmail.com]
- * @copyright Crown Copyright 2017
- * @license Apache-2.0
- */
-
-// Core variables and mixins
-@import "~bootstrap/less/variables.less";
-@import "~bootstrap/less/mixins.less";
-
-// Reset and dependencies
-@import "~bootstrap/less/normalize.less";
-@import "~bootstrap/less/print.less";
-// @import "~bootstrap/less/glyphicons.less";
-
-// Core CSS
-@import "~bootstrap/less/scaffolding.less";
-@import "~bootstrap/less/type.less";
-@import "~bootstrap/less/code.less";
-@import "~bootstrap/less/grid.less";
-@import "~bootstrap/less/tables.less";
-@import "~bootstrap/less/forms.less";
-@import "~bootstrap/less/buttons.less";
-
-// Components
-@import "~bootstrap/less/component-animations.less";
-@import "~bootstrap/less/dropdowns.less";
-@import "~bootstrap/less/button-groups.less";
-@import "~bootstrap/less/input-groups.less";
-@import "~bootstrap/less/navs.less";
-// @import "~bootstrap/less/navbar.less";
-// @import "~bootstrap/less/breadcrumbs.less";
-// @import "~bootstrap/less/pagination.less";
-// @import "~bootstrap/less/pager.less";
-@import "~bootstrap/less/labels.less";
-// @import "~bootstrap/less/badges.less";
-// @import "~bootstrap/less/jumbotron.less";
-// @import "~bootstrap/less/thumbnails.less";
-@import "~bootstrap/less/alerts.less";
-@import "~bootstrap/less/progress-bars.less";
-// @import "~bootstrap/less/media.less";
-@import "~bootstrap/less/list-group.less";
-@import "~bootstrap/less/panels.less";
-// @import "~bootstrap/less/responsive-embed.less";
-// @import "~bootstrap/less/wells.less";
-@import "~bootstrap/less/close.less";
-
-// Components w/ JavaScript
-@import "~bootstrap/less/modals.less";
-@import "~bootstrap/less/tooltip.less";
-@import "~bootstrap/less/popovers.less";
-// @import "~bootstrap/less/carousel.less";
-
-// Utility classes
-@import "~bootstrap/less/utilities.less";
-// @import "~bootstrap/less/responsive-utilities.less";

src/web/stylesheets/vendors/bootstrap.scss

@@ -0,0 +1,24 @@
+/**
+ * Bootstrap Material Design with overrides
+ *
+ * @author n1474335 [n1474335@gmail.com]
+ * @copyright Crown Copyright 2018
+ * @license Apache-2.0
+ */
+
+@import "~bootstrap-material-design/scss/variables/colors";
+
+$theme-colors: (
+    primary: $blue-700,
+    success: $green,
+    info: $light-blue,
+    warning: $deep-orange,
+    danger: $red,
+    light: $grey-100,
+    dark: $grey-800
+);
+
+$bmd-label-color: $green-700;
+$bmd-label-color-inner-focus: $green-500;
+
+@import "~bootstrap-material-design/scss/core";