Migrate to bootstrap 4 in LeafWeb

WebCms/Content/style.scss

@@ -1,7 +1,11 @@
 /* Go crazy with your own styles here */
 /* EDITOR PROPERTIES - PLEASE DON'T DELETE THIS LINE TO AVOID DUPLICATE PROPERTIES */
 
-body.debug header .brand {
+body header {
+    padding: 15px 0;
+}
+
+body.debug header .navbar-brand {
     position: relative;
     
     &:before {
@@ -74,7 +78,7 @@ footer {
 	-moz-border-radius: 10px; 
 	border-radius: 10px; /* standards-compliant: (IE) */ 
     
-    .glyphicon {
+    .glyphicon, .fa {
 	    color: #8cc641;
     }
 }
@@ -88,108 +92,121 @@ a.banner-link:hover {
     }
 }
 
+$text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.8), 1px 1px 0 rgba(0, 0, 0, 0.4), 5px 5px 10px rgba(0, 0, 0, 0.4);
+
 h1.headline {
     font-size: 2.9em;
     text-align: center;
+    text-shadow: $text-shadow;
 }
 
 .headline-icon {
 
     h1:after {
-	    color: rgba(172, 214, 118, 0.8);
-	    font-family: "Glyphicons Halflings";
-	    font-size: .8em;
-	    padding-left: 10px;
+        color: rgba(172, 214, 118, 0.8);
+        font-family: "FontAwesome";
+        font-size: .8em;
+        padding-left: 10px;
+        text-shadow: $text-shadow;
     }
-
-    /* http://glyphicons.bootstrapcheatsheets.com/ */
+    /* https://fontawesome.bootstrapcheatsheets.com/ */
     &.headline-icon-none h1:after {
     }
+
     &.headline-icon-file h1:after {
-	    content:"\e022";
+        content: "\f15b";
     }
+
     &.headline-icon-leaf h1:after {
-	    content:"\e103";
+        content: "\f06c";
     }
+
     &.headline-icon-question h1:after {
-	    content:"\e085";
+        content: "\f059";
     }
+
     &.headline-icon-stats h1:after {
-	    content:"\e185";
+        content: "\f05a";
     }
+
     &.headline-icon-user h1:after {
-	    content:"\e008";
+        content: "\f007";
     }
+
     &.headline-icon-list h1:after {
-	    content:"\e012";
+        content: "\f00b";
     }
 }
 
-.status{
+.status {
     white-space: nowrap;
     cursor: default;
 
-    &:after {
-	    font-family: "Glyphicons Halflings";
-	    font-size: .8em;
-	    padding-left: 5px;
+    &:before {
+        font-family: "FontAwesome";
+        font-size: 1em;
+        padding-right: 6px;
     }
-    
+
     &.status-pending {
-	    color: #f0ad4e;
-        &:after {
-	        content:"\e023";
+        color: #f0ad4e;
+
+        &:before {
+            content: "\f017";
         }
     }
 
     &.status-complete {
-	    color: #337ab7;
-        &:after {
-	        content:"\e084";
+        color: #337ab7;
+
+        &:before {
+            content: "\f14a";
         }
     }
 
     &.status-exception {
-	    color: #a94442;
-        &:after {
-	        content:"\e101";
+        color: #a94442;
+
+        &:before {
+            content: "\f06a";
         }
     }
 
     &.status-unresponsive {
-	    color: #66512c;
-        &:after {
-	        content:"\e085";
+        color: #66512c;
+
+        &:before {
+            content: "\f059";
         }
     }
 
     &.status-running, &.status-starting, &.status-finishing {
-	    color: #3c763d;
-    }
-    &.status-running:after {
-	    content:"\e089";
-    }
-    &.status-starting:after {
-	    content:"\e026";
-    }
-    &.status-finishing:after {
-	    content:"\e027";
+        color: #3c763d;
     }
 
-    &.status-cancelpending, &.status-cancelling {
-	    color: #f0ad4e;
+    &.status-running:before {
+        content: "\f058";
     }
+
+    &.status-starting:before {
+        content: "\f01a";
+    }
+
+    &.status-finishing:before {
+        content: "\f01b";
+    }
+
+    &.status-cancelpending:before,
+    &.status-cancelling:before {
+        content: "\f05e";
+    }
+
     &.status-cancelled {
-	    color: #ec971f;
+        color: #ec971f;
     }
-    &.status-cancelpending:after {
-	    content:"\e090";
-    }
-    &.status-cancelling:after {
-	    content:"\e090";
-    }
-    &.status-cancelled:after {
-	    content:"\e090";
+
+    &.status-cancelled:before {
+        content: "\f05e";
     }
 }
 
@@ -288,4 +305,8 @@ code,pre {
 
 .withshadow{
     text-shadow: 2px 2px 4px #000000;
+}
+
+.files td {
+    vertical-align: middle;
 }