Pending migrations CSS enhancement

public/css/icinga/pending-migration.less

@@ -1,38 +1,34 @@
 // Style
 
-.migrations {
+.migration-state-banner {
-  .migration-details {
+  .rounded-corners();
-    > span {
+
+  border: 1px solid @gray-lighter;
   color: @text-color-light;
-    }
+  padding: 1em;
+  text-align: center;
+}
 
-    summary {
+.migrations {
+  a {
     color: @icinga-blue;
-      cursor: pointer;
-      border-radius: .25em;
-
-      &::-webkit-details-marker {
-        display: none; // Disable safari default details marker
   }
+
+  .list-item {
+    .visual.upgrade-failed, span.upgrade-failed, .errors-section > i {
+      color: @state-critical;
     }
   }
 
-  .migration-form {
+.migration-form {
-  }
-
-  .modules-header {
   input[type="submit"] {
-      border: none;
+    line-height: 1.5;
-      padding-left: 0;
-      padding-right: 0;
 
       &:disabled {
         color: @disabled-gray;
-        background: none;
-
-        &:hover {
         cursor: not-allowed;
-        }
+        background: none;
+        border-color: fade(@disabled-gray, 75)
       }
     }
   }
@@ -48,69 +44,81 @@
   }
 }
 
+.migration-controls {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
 .migrations {
-  .list-item {
+  .icinga-form { // Reset Icinga Form layout styles
-    align-items: baseline;
+    width: unset;
-  }
+    max-width: unset;
-
-  .list-item header {
-    align-items: baseline;
-    height: 1.5em;
-
-    input[type="submit"] {
-      margin-top: -.5em;
-    }
-  }
-
-  .list-item .caption {
-    height: 1.5em;
-    margin-top: .25em;
-
-    p {
-      margin-bottom: 0;
-    }
-
-    .description {
-      line-height: 1.5;
-    }
-  }
-
-  footer {
-    margin-top: .25em;
   }
 
   .migration-list-control {
     padding-bottom: 1em;
+
+    > .item-list {
+      max-width: 50em;
+    }
   }
 
-  .modules-header {
+  .list-item {
-    display: inline-flex;
-    flex-wrap: nowrap;
     align-items: baseline;
 
-    .migration-form {
+    .visual.upgrade-failed + .main {
+      margin-left: 0;
+    }
+
+    header {
+      align-items: baseline;
+
+      .title span.upgrade-failed {
+        margin: .5em;
+      }
+    }
+
+    .caption, .errors-section pre {
+      margin-top: .25em;
+      height: auto;
+      -webkit-line-clamp: 3;
+    }
+
+    .errors-section {
+      margin-top: 1em;
+      border: 1px solid @state-critical;
+      .rounded-corners();
+
+      i.icon {
+        position: absolute;
+        margin-top: .5em;
         margin-left: .5em;
       }
+
+      .caption {
+        margin-left: 1.8em;
+      }
     }
 
-  .migration-details {
+    &.minimal footer {
-    font-size: 1em;
-    line-height: 1.5em;
-
-    summary {
       display: inline-block;
     }
+
+    footer {
+      width: 100%;
+      padding-top: 0;
+
+      > * {
+        font-size: 1em;
       }
 
-  .migration-form {
+      .list-item:first-child .main {
-    input[type="submit"] {
+        padding-top: 0;
-      line-height: 1.5;
+      }
 
-      &:disabled {
+      a {
-        color: @disabled-gray;
+        margin-left: .5em;
-        cursor: not-allowed;
-        background: none;
-        border-color: fade(@disabled-gray, 75)
       }
     }
   }