openstack/horizon
Code Issues Proposed changes

Merge "Launch instance - common style"

Browse Source
This commit is contained in:
Jenkins 2015-03-16 05:07:32 +00:00 committed by Gerrit Code Review
commit 20ef6b4acc
3 changed files with 116 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
horizon/static/angular/wizard/wizard.scss
View File

@ -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;
background: #0083d1;
width: $WizardNavItemWidth;
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;
text-align: left;
right: 65px;
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;
margin-bottom: 10px;
line-height: 1.5;
color: #555;
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;
border-top: 1px solid #ccc;
background: $WizardToolbarBgColor;
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;
border: 1px solid #ccc;
background: #fff;
color: $WizardBtnTextColor;
border: 1px solid $WizardBtnBdColor;
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 {
border-radius: 0;
.modal-dialog {
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;
}
}
}

2
openstack_dashboard/static/dashboard/dashboard.scss
View File

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

36
openstack_dashboard/static/dashboard/scss/_variables.scss
View File

@ -100,23 +100,37 @@ $helpPanelBtnIconSize: 28px !default;
/* Wizard */
// theme
$WizardNavItemColor: #444 !default;
$WizardButtonColorHiLight: rgba(255, 255, 255, .8) !default;
$WizardNextBtnBgColor: #0083d1 !default;
$WizardNextBtnBdColor: darken($WizardNextBtnBgColor, 1%) !default;
$WizardNavItemColor: #333 !default;
$WizardNavItemBgColor: #0084d1 !default;
$WizardNavItemBdColor: #bbb !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;
$WizardFinishBtnBgColor: #4b2 !default;
$WizardFinishBtnBdColor: darken($WizardFinishBtnBgColor, 1%) !default;
$WizardNextBtnDisabledBdColor: #ccc !default;
$WizardFinishBtnBgColor: #51b848 !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;
$WizardNavItemHeight: 45px !default;
$wizardNavWidth: 290px !default;
$WizardNavItemHeight: 46px !default;
$WizardNavItemWidth: 190px !default;
$WizardSidePadding: 35px !default;
$WizardStatusIndicatorSize: 24px !default;