Converted modals to Bootstrap 4 Material Design

src/web/stylesheets/index.js

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

src/web/stylesheets/layout/_controls.css

@@ -29,6 +29,7 @@
     text-align: center;
     color: var(--primary-font-colour);
     font-size: 14px;
+    cursor: pointer;
 }
 
 #auto-bake-label .checkbox-decorator {
@@ -38,3 +39,7 @@
 #bake {
     box-shadow: none;
 }
+
+#controls .btn {
+    border-radius: 0;
+}

src/web/stylesheets/layout/_modals.css

@@ -6,29 +6,12 @@
  * @license Apache-2.0
  */
 
-.option-item .bootstrap-switch {
-    margin: 15px 10px;
+.modal-content {
+    background-color: var(--primary-background-colour);
 }
 
-.option-item button {
-    margin: 10px;
-}
-
-.option-item label {
-    font-weight: normal;
-}
-
-.option-item input[type=number] {
-    margin: 15px 10px;
-    width: 80px;
-    height: 28px;
-    padding: 3px 10px;
-    vertical-align: middle;
-}
-
-.option-item select {
-    margin: 10px;
-    display: inline-block;
+.option-item {
+    margin-bottom: 20px;
 }
 
 #edit-favourites-list {
@@ -55,11 +38,15 @@
     margin: 10px 0 20px 20px;
 }
 
+#save-link-group {
+    padding-top: 0;
+}
+
 .save-link-options {
     float: right;
 }
 
-.save-link-options input{
+.save-link-options label {
     margin-left: 10px;
 }
 
@@ -79,7 +66,9 @@
 }
 
 #save-texts textarea {
-    border-top: none;
-    box-shadow: none;
     height: 200px;
 }
+
+#faqs a.btn {
+    text-transform: unset;
+}

src/web/stylesheets/layout/_operations.css

@@ -31,3 +31,29 @@
     border: 2px dashed var(--rec-list-operation-font-colour) !important;
     padding: 8px 8px 9px 8px;
 }
+
+.operation input.form-control,
+.operation select.form-control,
+.operation .bmd-label-floating,
+.operation .bmd-label-static {
+    padding-left: 5px;
+    padding-right: 5px;
+}
+
+.operation [class^='bmd-label'],
+.operation [class*=' bmd-label'] {
+    color: #388e3c;
+}
+
+.operation .is-focused [class^='bmd-label'],
+.operation .is-focused [class*=' bmd-label'],
+.operation .is-focused [class^='bmd-label'],
+.operation .is-focused [class*=' bmd-label'] {
+    color: #1976d2;
+}
+
+.operation .form-control {
+    background-color: transparent;
+    border-color: var(--primary-border-colour);
+    color: var(--primary-font-colour);
+}

src/web/stylesheets/utils/_overrides.css

@@ -108,25 +108,6 @@ input[type="search"]::-webkit-search-cancel-button {
     appearance: searchfield-cancel-button;
 }
 
-.modal {
-    overflow-y: auto;
-}
-
-.modal-content {
-    background-color: var(--primary-background-colour);
-}
-
-.modal-header,
-.modal-footer {
-    border-color: var(--primary-border-colour);
-}
-
-.form-control {
-    background-color: transparent;
-    border-color: var(--primary-border-colour);
-    color: var(--primary-font-colour);
-}
-
 code {
     border: 0;
     white-space: pre-wrap;
@@ -224,30 +205,6 @@ optgroup {
 }
 
 
-/* Bootstrap-switch */
-
-.bootstrap-switch,
-.bootstrap-switch-container,
-.bootstrap-switch-handle-on,
-.bootstrap-switch-handle-off,
-.bootstrap-switch-label {
-    border-radius: 0 !important;
-}
-
-.bootstrap-switch .bootstrap-switch-label {
-    background-color: transparent;
-}
-
-.bootstrap-switch {
-    border-color: var(--primary-border-colour);
-}
-
-.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default {
-    background-color: var(--primary-border-colour);
-    color: var(--primary-font-colour);
-}
-
-
 /* Sortable */
 
 .sortable-ghost {

src/web/stylesheets/vendors/bootstrap.scss

@@ -18,8 +18,6 @@ $theme-colors: (
     dark: $grey-800
 );
 
-$bmd-label-color: $green-700;
-$bmd-label-color-inner-focus: $green-500;
 $bmd-form-line-height: 1.25;
 
 @import "~bootstrap-material-design/scss/core";