Merge "Launch instance - common style"

horizon/static/angular/wizard/wizard.scss

@@ -1,13 +1,12 @@
 .ng-wizard {
   display: block;
-  position: relative;
+  position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  height: $wizardHeight;
   overflow: hidden;
-  font-weight: lighter;
+  font-weight: normal;
 
   .title {
     height: $wizardTitleBarHeight;
@@ -20,7 +19,7 @@
     font-weight: normal;
   }
 
-  .nav {
+  & > .nav {
     display: inline-block;
     top: 40px;
     left: 0px;
@@ -37,25 +36,45 @@
       padding-left: 10px;
       background: transparent;
       border: none;
-      border-bottom: 1px solid #bbb;
+      border-bottom: 1px solid $WizardNavItemBdColor;
       margin-top: -1px;
       color: $WizardNavItemColor;
       font-size: 12px;
       border-radius: 0;
 
+      &::after {
+        content: " ";
+        position: absolute;
+        top: 0;
+        right: -10px;
+        display: block;
+        height: inherit;
+        width: 0;
+        border-left: none;
+        border-top: $WizardNavItemHeight/2 solid transparent;
+        border-bottom: $WizardNavItemHeight/2 solid transparent;
+      }
+
       &[disabled] {
         color: #444;
         background: transparent;
       }
 
       &.current {
-        width: $WizardNavItemWidth + 10px;
+        width: $WizardNavItemWidth;
-        background: #0083d1;
+        background: $WizardNavItemBgColor;
         color: $WizardButtonColorHiLight;
         border-color: $WizardNextBtnBgColor;
 
+        &::after {
+          border-left: $WizardNavItemBgColor 10px solid;
+        }
+
+        &:focus {
+          outline: none;
+        }
+
         .status-indicator {
-          right: 10px;
           color: inherit;
         }
       }
@@ -75,22 +94,50 @@
     position: absolute;
     top: $wizardTitleBarHeight;
     left: $wizardNavWidth;
-    right: 40px;
+    right: 0;
     bottom: $wizardToolBarHeight;
     color: #888;
 
     h1 {
-      top: 10px;
+      position: absolute;
+      top: 0;
+      height: 45px;
       left: 10px;
-      right: 10px;
+      right: 65px;
-      text-align: left;
+      margin: 0;
+      padding-top: 20px;
+    }
+
+    h2.section-title {
+      margin-bottom: 5px;
+      padding-bottom: 5px;
+    }
+
+    h1, h2.section-title {
       font-size: 18px;
       font-weight: normal;
-      margin-top: 20px;
+      color: #555;
-      margin-bottom: 10px;
-      line-height: 1.5;
       border-bottom: 1px solid #ddd;
     }
+
+    .content {
+      position: absolute;
+      top: 45px;
+      left: 10px;
+      right: 0;
+      bottom: 0;
+      padding: 0 65px 24px 0;
+      overflow: auto;
+
+      .subtitle {
+        margin-bottom: 30px;
+      }
+
+      label {
+        font-weight: normal;
+        color: #555;
+      }
+    }
   }
 
   .toolbar {
@@ -101,8 +148,8 @@
     height: $wizardToolBarHeight;
     line-height: $wizardToolBarHeight;
     vertical-align: middle;
-    background: #eee;
+    background: $WizardToolbarBgColor;
-    border-top: 1px solid #ccc;
+    border-top: 1px solid $WizardBtnBdColor;
 
     .secondary-btn-grp {
       position: absolute;
@@ -134,10 +181,10 @@
 
     .separator {
       display: inline-block;
-      width: 0px;
+      width: 0;
       margin-left: 20px;
       margin-right: 15px;
-      border-left: 1px solid #ccc;
+      border-left: 1px solid $WizardToolbarVerticalSeparatorBdColor;
       height: $wizardToolBarHeight;
       vertical-align: top;
     }
@@ -148,9 +195,9 @@
       vertical-align: baseline;
       padding: 0 25px 2px 25px;
       font-size: 14px;
-      color: #666;
+      color: $WizardBtnTextColor;
-      border: 1px solid #ccc;
+      border: 1px solid $WizardBtnBdColor;
-      background: #fff;
+      background: $WizardBtnBgColor;
 
       &[disabled] {
         color: #ccc;
@@ -188,18 +235,30 @@
     top: $wizardTitleBarHeight;
     bottom: $wizardToolBarHeight;
   }
+
+  .error-message {
+    display: none !important;
+  }
 }
 
 .modal-dialog-wizard {
-  .modal-dialog {
-    position: absolute;
-    left: 0;
-    right: 0;
-    width: auto;
-    margin: 30px 0 auto 0;
-  }
 
-  .modal-content {
+  .modal-dialog {
-    border-radius: 0;
+    position: relative;
+    margin: 0 auto;
+    height: $wizardHeight;
+    width: $wizardWidth;
+    min-height: $wizardMinHeight;
+    min-width: $wizardMinWidth;
+    overflow-x: auto;
+
+    .modal-content {
+      position: absolute;
+      top: $wizardTopPadding;
+      left: 0;
+      right: 0;
+      bottom: $wizardBottomPadding;
+      border-radius: 0;
+    }
   }
 }

openstack_dashboard/static/dashboard/dashboard.scss

@@ -1,2 +1,2 @@
-@import "./scss/variables";
+@import "scss/variables";
 @import "launch-instance/launch-instance";

openstack_dashboard/static/dashboard/scss/_variables.scss

@@ -100,23 +100,37 @@ $helpPanelBtnIconSize: 28px !default;
 /* Wizard */
 
 // theme
-$WizardNavItemColor: #444 !default;
+$WizardNavItemColor: #333 !default;
-$WizardButtonColorHiLight: rgba(255, 255, 255, .8) !default;
+$WizardNavItemBgColor: #0084d1 !default;
-$WizardNextBtnBgColor: #0083d1 !default;
+$WizardNavItemBdColor: #bbb !default;
-$WizardNextBtnBdColor: darken($WizardNextBtnBgColor, 1%) !default;
+$WizardButtonColorHiLight: #fff !default;
+$WizardBtnTextColor: #333;
+$WizardBtnBgColor: #fff !default;
+$WizardBtnBdColor: #ccc !default;
+$WizardNextBtnBgColor: #0084d1 !default;
+$WizardNextBtnBdColor: #0084d1 !default;
 $WizardNextBtnDisabledBgColor: #ccc !default;
-$WizardNextBtnDisabledBdColor: darken($WizardNextBtnDisabledBgColor, 1%) !default;
+$WizardNextBtnDisabledBdColor: #ccc !default;
-$WizardFinishBtnBgColor: #4b2 !default;
+$WizardFinishBtnBgColor: #51b848 !default;
-$WizardFinishBtnBdColor: darken($WizardFinishBtnBgColor, 1%) !default;
+$WizardFinishBtnBdColor: #51b848 !default;
 $WizardFinishBtnDisabledBgColor: #ccc !default;
-$WizardFinishBtnDisabledBdColor: darken($WizardFinishBtnDisabledBgColor, 1%) !default;
+$WizardFinishBtnDisabledBdColor: #ccc !default;
+$WizardToolbarBgColor: #f5f5f5 !default;
+$WizardToolbarVerticalSeparatorBdColor: #e3e3e3 !default;
+
+$wizard-textarea-border-color: #eee;
 
 // layout
-$wizardHeight: 500px !default;
+$wizardTopPadding: 40px !default;
+$wizardBottomPadding: 40px !default;
+$wizardHeight: 100% !default;
+$wizardWidth: 100% !default;
+$wizardMinHeight: 460px !default;
+$wizardMinWidth: 1024px !default;
 $wizardTitleBarHeight: 70px !default;
 $wizardToolBarHeight: 65px !default;
-$wizardNavWidth: 280px !default;
+$wizardNavWidth: 290px !default;
-$WizardNavItemHeight: 45px !default;
+$WizardNavItemHeight: 46px !default;
 $WizardNavItemWidth: 190px !default;
 $WizardSidePadding: 35px !default;
 $WizardStatusIndicatorSize: 24px !default;