Pending migrations CSS enhancement

public/css/icinga/pending-migration.less

@@ -1,38 +1,34 @@
 // Style
 
+.migration-state-banner {
+  .rounded-corners();
+
+  border: 1px solid @gray-lighter;
+  color: @text-color-light;
+  padding: 1em;
+  text-align: center;
+}
+
 .migrations {
-  .migration-details {
+  a {
-    > span {
+    color: @icinga-blue;
-      color: @text-color-light;
+  }
-    }
 
-    summary {
+  .list-item {
-      color: @icinga-blue;
+    .visual.upgrade-failed, span.upgrade-failed, .errors-section > i {
-      cursor: pointer;
+      color: @state-critical;
-      border-radius: .25em;
-
-      &::-webkit-details-marker {
-        display: none; // Disable safari default details marker
-      }
     }
   }
 
-  .migration-form {
+.migration-form {
-  }
+  input[type="submit"] {
-
+    line-height: 1.5;
-  .modules-header {
-    input[type="submit"] {
-      border: none;
-      padding-left: 0;
-      padding-right: 0;
 
       &:disabled {
         color: @disabled-gray;
+        cursor: not-allowed;
         background: none;
-
+        border-color: fade(@disabled-gray, 75)
-        &:hover {
-          cursor: not-allowed;
-        }
       }
     }
   }
@@ -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: .5em;
+      margin-left: 0;
     }
-  }
 
-  .migration-details {
+    header {
-    font-size: 1em;
+      align-items: baseline;
-    line-height: 1.5em;
 
-    summary {
+      .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;
+      }
+    }
+
+    &.minimal footer {
       display: inline-block;
     }
-  }
 
-  .migration-form {
+    footer {
-    input[type="submit"] {
+      width: 100%;
-      line-height: 1.5;
+      padding-top: 0;
 
-      &:disabled {
+      > * {
-        color: @disabled-gray;
+        font-size: 1em;
-        cursor: not-allowed;
+      }
-        background: none;
+
-        border-color: fade(@disabled-gray, 75)
+      .list-item:first-child .main {
+        padding-top: 0;
+      }
+
+      a {
+        margin-left: .5em;
       }
     }
   }