Improve node edit.

css/components/search-form.css

@@ -6,3 +6,12 @@
 input[type="search"] {
     box-sizing: border-box;
 }
+
+header #search-block-form {
+    padding: 5px 15px;
+    flex-flow: row wrap;
+}
+
+#search-block-form {
+    display: flex;
+}
\ No newline at end of file

css/components/sidebar.css

 /* ------------------ Sidebar ----------------- */
 
 .sidebar .block {
-  border-style: solid;
-  border-width: 1px;
-  padding: 15px 15px;
-  margin: 0 0 20px;
+    border-style: solid;
+    border-width: 1px;
+    padding: 15px 15px;
+    margin: 0 0 20px;
 }
+
 .sidebar h2 {
-  margin: 0 0 0.5em;
-  border-bottom: 1px solid #d6d6d6;
-  padding-bottom: 5px;
-  text-shadow: 0 1px 0 #fff;
-  font-size: 1.071em;
-  line-height: 1.2;
+    margin: 0 0 0.5em;
+    border-bottom: 1px solid #d6d6d6;
+    padding-bottom: 5px;
+    text-shadow: 0 1px 0 #fff;
+    font-size: 1.071em;
+    line-height: 1.2;
 }
+
 .sidebar .block .content {
-  font-size: 0.914em;
-  line-height: 1.4;
+    font-size: 0.914em;
+    line-height: 1.4;
 }
+
 .sidebar tbody {
-  border: none;
+    border: none;
 }
+
 .sidebar tr.even,
 .sidebar tr.odd {
-  background: none;
-  border-bottom: 1px solid #d6d6d6;
+    background: none;
+    border-bottom: 1px solid #d6d6d6;
 }
+
+.sidebar nav ul.nav {
+    margin: 0 -1rem;
+}
\ No newline at end of file

css/components/vertical-tabs.css

@@ -4,66 +4,89 @@
  */
 
 .vertical-tabs {
-  margin: 1em 0 1em 15em; /* LTR */
-  border: 1px solid #ccc;
+    margin: 0;
+    /* LTR */
+    border: 1px solid #ccc;
+    display: flex;
+    flex-direction: row;
+    font-size: 0.875rem;
 }
+
 [dir="rtl"] .vertical-tabs {
-   margin-left: 0;
-   margin-right: 15em;
+    flex-direction: row-reverse;
+    margin-left: 0;
+    margin-right: 0;
 }
+
 .vertical-tabs__menu {
-  float: left; /* LTR */
-  width: 15em;
-  margin: -1px 0 -1px -15em; /* LTR */
-  padding: 0;
-  border-top: 1px solid #ccc;
-  list-style: none;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    /* LTR */
+    width: 15em;
+    margin: 0;
+    /* LTR */
+    padding: 0;
+    border-top: 1px solid #ccc;
+    list-style: none;
 }
+
 [dir="rtl"] .vertical-tabs__menu {
-  float: right;
-  margin-left: 0;
-  margin-right: -15em;
+    margin-left: 0;
+    margin-right: -15em;
 }
+
 .vertical-tabs__pane {
-  margin: 0;
-  border: 0;
+    margin: 0;
+    border: 0;
 }
-.vertical-tabs__pane > summary {
-  display: none;
+
+.vertical-tabs__pane>summary {
+    display: none;
 }
 
+
 /* Layout of each tab. */
+
 .vertical-tabs__menu-item {
-  border: 1px solid #ccc;
-  border-top: 0;
-  background: #eee;
+    border: 1px solid #ccc;
+    border-top: 0;
+    background: #eee;
 }
+
 .vertical-tabs__menu-item a {
-  display: block;
-  padding: 0.5em 0.6em;
-  text-decoration: none;
+    display: block;
+    padding: 0.5em 0.6em;
+    text-decoration: none;
 }
+
 .vertical-tabs__menu-item a:focus .vertical-tabs__menu-item-title,
 .vertical-tabs__menu-item a:active .vertical-tabs__menu-item-title,
 .vertical-tabs__menu-item a:hover .vertical-tabs__menu-item-title {
-  text-decoration: underline;
+    text-decoration: underline;
 }
+
 .vertical-tabs__menu-item a:hover {
-  outline: 1px dotted;
+    outline: 1px dotted;
 }
+
 .vertical-tabs__menu-item.is-selected {
-  border-right-width: 0; /* LTR */
-  background-color: #fff;
+    border-right-width: 0;
+    /* LTR */
+    background-color: #fff;
 }
+
 [dir="rtl"] .vertical-tabs__menu-item.is-selected {
-  border-left-width: 0;
-  border-right-width: 1px;
+    border-left-width: 0;
+    border-right-width: 1px;
 }
+
 .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-item-title {
-  color: #000;
+    color: #000;
 }
+
 .vertical-tabs__menu-item-summary {
-  display: block;
-  margin-bottom: 0;
-  line-height: normal;
-}
+    display: block;
+    margin-bottom: 0;
+    line-height: normal;
+}
\ No newline at end of file

templates/content-edit/node-edit-form.html.twig

@@ -15,14 +15,14 @@
  * @see seven_form_node_form_alter()
  */
 #}
-<div class="content clearfix">
-  <div class="layout-region layout-region-node-main">
+<div class="content clearfix row">
+  <div class="col-md-6 layout-region layout-region-node-main">
     {{ form|without('advanced', 'actions') }}
   </div>
-  <div class="col-sm-8 layout-region-node-secondary">
+  <div class="col-md-6 layout-region-node-secondary">
     {{ form.advanced }}
   </div>
-  <div class="col-sm-4 layout-region-node-footer">
+  <div class="col layout-region-node-footer">
     {{ form.actions }}
   </div>
 </div>

templates/form/form-element.html.twig

@@ -50,7 +50,7 @@
     'js-form-item',
     'js-form-type-' ~ type|clean_class,
     type in ['checkbox', 'radio'] ? type|clean_class : 'form-type-' ~ type|clean_class,
-    type in ['checkbox', 'radio'] ? form-check,
+    type in ['checkbox', 'radio'] ? 'form-check',
     'js-form-item-' ~ name|clean_class,
     'form-item-' ~ name|clean_class,
     title_display not in ['after', 'before'] ? 'form-no-label',