24661236 dashboard header is broken with small window sizes
authorDrew Fisher <drew.fisher@oracle.com>
Fri, 21 Oct 2016 12:21:11 -0700
changeset 7145 95da2997413d
parent 7144 75dd46f584db
child 7146 894fd460ae8f
24661236 dashboard header is broken with small window sizes 24662111 mitaka menus need CSS love 24662317 mitaka sortable columns need pads 24662862 Mitaka tabbed dialogs need CSS love 24680556 Projects drop down does not accommodate itself in the actual frame 24680735 Misaligned frame in Project Members list 24682150 In Create Network, ">" symbol vanishes when clicking on the next section
components/openstack/horizon/files/branding/css/solaris.css
--- a/components/openstack/horizon/files/branding/css/solaris.css	Thu Oct 20 23:00:49 2016 -0700
+++ b/components/openstack/horizon/files/branding/css/solaris.css	Fri Oct 21 12:21:11 2016 -0700
@@ -1283,7 +1283,9 @@
 padding-left: 20px;
 padding-right: 20px; 
 height: 79px;
-}
+min-width: 440px;
+}
+
 .container-fluid:before, .container-fluid:after {
 content: " ";
 display: table; }
@@ -1826,6 +1828,7 @@
 /* border-bottom: 2px solid #ddd;*/
 border: 1px solid #d5dfe6;
 background: #f2f4f7;
+background-clip: padding-box;
 }
 .table > caption + thead > tr:first-child > th,
 .table > caption + thead > tr:first-child > td,
@@ -2855,7 +2858,7 @@
 .dropdown-menu {
 position: absolute;
 top: 100%;
-left: 0;
+right: 0px;
 z-index: 1000;
 display: none;
 float: left;
@@ -3280,7 +3283,8 @@
 max-width: none; }
 
 .nav-tabs {
-border-bottom: 1px solid #d5dfe6; }
+min-width: 720px;
+}
 .nav-tabs > li {
 float: left;
 margin-bottom: -1px; }
@@ -3299,14 +3303,13 @@
 border-color: #eee #eee #ddd; }
 .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover,
 .nav-tabs > li.active > a:focus {
-
 color: #005d9d;
 font-weight: 600;
 /* background-color: #fff; */
 background: url(../img/content_tab_bkgd_selected.png) repeat-x;
 border: 1px solid #d5dfe6;
 border-top: none;
-border-bottom-color: transparent;
+border-bottom-color: white; /* update from transparent to white */
 cursor: default; 
 height: 33px;
 line-height: 33px;
@@ -3315,9 +3318,10 @@
 .nav-pills > li {
 float: left; }
 .nav-pills > li > a {
-border-radius: 2px;
+/* border-radius: 2px; */
 line-height: 33px;
 padding-left: 12px;
+padding-right: 12px;
 /* 
 padding-left: 8px;
 line-height: 28px;
@@ -3336,7 +3340,6 @@
 		border-left: 6px solid #0572ce;
 		border-bottom: 9px solid transparent;
  */
-		content: " >";
 		font-size: 13px;
 		position: relative;
 		left: 0px;
@@ -3347,9 +3350,11 @@
 /*	color: #eee; */
  }
 
+/* 
 .wizard-tabs > li.active::after, .wizard-tabs > li:first-child::after {
 	content: " ";
  }
+ */
 
 .nav-pills > li + li {
 margin-left: 2px; 
@@ -3483,10 +3488,13 @@
 
 .container > .navbar-header, .container > .navbar-collapse,
 .container-fluid > .navbar-header, .container-fluid > .navbar-collapse {
+/* 
 margin-right: -15px;
-margin-left: -15px; }
+margin-left: -15px; 
+ */
+ }
 @media (min-width: 768px) {
-	.container > .navbar-header {
+.container > .navbar-header {
 width: 311px;
 background: url('/horizon/static/dashboard/img/OpenStack_Dashboard_txt.png') right center no-repeat; 	
 	}
@@ -3497,6 +3505,20 @@
 }
 }
 
[email protected] (max-width: 768px) {
+.container > .navbar-header {
+width: 311px;
+background: url('/horizon/static/dashboard/img/OpenStack_Dashboard_txt.png') right center no-repeat; 	
+}
+.container > .navbar-header, .container > .navbar-collapse,
+.container-fluid > .navbar-header, .container-fluid > .navbar-collapse {
+margin-right: 0;
+margin-left: 0; 
+}	
+
+}
+
+
 .navbar-static-top {
 z-index: 1000;
 border-width: 0 0 1px; }
@@ -3548,14 +3570,15 @@
 .navbar-toggle {
 position: relative;
 float: right;
-margin-right: 15px;
+/* margin-right: 15px; */
 padding: 9px 10px;
-margin-top: 1px;
-margin-bottom: 1px;
+margin-top: 16px;
+/* margin-bottom: 1px; */
 background-color: transparent;
 background-image: none;
 border: 1px solid transparent;
 border-radius: 4px; }
+
 .navbar-toggle:focus {
 outline: 0; }
 .navbar-toggle .icon-bar {
@@ -3582,24 +3605,7 @@
 line-height: 18px; 
 */
  }
[email protected] (max-width: 767px) {
-.navbar-nav .open .dropdown-menu {
-position: static;
-float: none;
-width: auto;
-margin-top: 0;
-background-color: transparent;
-border: 0;
-box-shadow: none; }
-.navbar-nav .open .dropdown-menu > li > a,
-.navbar-nav .open .dropdown-menu .dropdown-header {
-padding: 5px 15px 5px 25px; }
-.navbar-nav .open .dropdown-menu > li > a {
-line-height: 18px; }
-.navbar-nav .open .dropdown-menu > li > a:hover,
-.navbar-nav .open .dropdown-menu > li > a:focus {
-background-image: none; }
-}
+
 @media (min-width: 768px) {
 .navbar-nav {
 /* float: left; */
@@ -3744,24 +3750,7 @@
 color: #333; 
  */
  	}
[email protected] (max-width: 767px) {
-.navbar-default .navbar-nav .open .dropdown-menu > li > a {
-color: #333; }
-.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
-.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
-color: #333;
-background-color: #d5d5d5; }
-.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
-.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
-.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
-color: #333;
-background-color: #d5d5d5; }
-.navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
-.navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
-.navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus {
-color: #BBB;
-background-color: transparent; }
-}
+
 .navbar-default .navbar-link {
 color: #333; }
 .navbar-default .navbar-link:hover {
@@ -4875,7 +4864,12 @@
  padding: 15px 20px;
 text-align: right;
 background-color: #f5f5f5;
-border-top: 1px solid #e5e5e5; }
+border-top: 1px solid #e5e5e5; 
+border-top-left-radius: 0px;
+border-top-right-radius: 0px;
+border-bottom-right-radius: 6px;
+border-bottom-left-radius: 6px;
+}
 .modal-footer:before, .modal-footer:after {
 content: " ";
 display: table; }
@@ -7420,9 +7414,10 @@
 font-size: 50%;
 vertical-align: top;
 color: #428bca; }
-
 .active > a > .hz-icon-required {
-color: #fff; }
+/* color: #fff;  */
+color: #005d9d;
+}
 td.inline_edit_available div.table_cell_wrapper .table_cell_action button.ajax-inline-edit {
 padding: 9px 12px 9px 12px;
 position: relative;
@@ -7808,7 +7803,26 @@
 .modal-body ~ hr {
 margin-bottom: 0; }
 .modal-body > .nav-pills {
-padding-bottom: 12px; }
+/* padding-bottom: 12px;  */
+border-bottom: 1px solid #d5dfe6;
+height: 33px;
+
+}
+
+.modal-body > .nav-pills > li.active > a, 
+.modal-body > .nav-pills > li.active > a:hover, 
+.modal-body > .nav-pills > li.active > a:focus {
+    color: #005d9d;
+    font-weight: 600;
+    /* background-color: #fff; */
+    background: url(../img/content_tab_bkgd_selected.png) repeat-x;
+    border: 1px solid #d5dfe6;
+    border-top: none;
+    border-bottom-color: white;
+    cursor: default;
+    height: 33px;
+    line-height: 33px;
+}
 
 .modal-footer .footer-row {
 margin-right: 0;
@@ -7833,8 +7847,11 @@
  }
 
 .navbar-header .navbar-brand {
-line-height: 36px;
-font-size: 0; }
+    line-height: 36px;
+    font-size: 0;
+    width: 311px;
+    background: url(/horizon/static/dashboard/img/OpenStack_Dashboard_txt.png) right center no-repeat;
+}
 
 .topbar {
 height: 79px;
@@ -8494,7 +8511,7 @@
 display: none; }
 .selection-menu .dropdown-selected .dropdown-selected-icon {
 display: inline;
-position: absolute;
+/* position: absolute; */
 line-height: 40px;
 /* 
 left: 0.5em;
@@ -8563,7 +8580,7 @@
 .actions_column .dropdown-menu > li > button {
 border: none;
 margin: 0;
-padding: 3px 20px;
+padding: 0px 20px;
 color: #333;
 white-space: nowrap;
 min-width: 100%;
@@ -8572,7 +8589,8 @@
 display: block;
 clear: both;
 font-weight: normal;
-line-height: 1.42857; }
+line-height: 40px;
+height: 40px; }
 .table_actions_menu .dropdown-menu > li > button:hover,
 .table_actions_menu .dropdown-menu > li > button:focus,
 .actions_column .dropdown-menu > li > button:hover,
@@ -8596,7 +8614,7 @@
 .table_actions_menu .dropdown-menu > li > button.btn-danger,
 .actions_column .dropdown-menu > li > button.btn-danger {
 /* color: #d9534f; */
-height: 44px;
+height: 40px;
  }
 .table_actions_menu .dropdown-menu > li > button.btn-danger:hover,
 .actions_column .dropdown-menu > li > button.btn-danger:hover{
@@ -8640,7 +8658,9 @@
 color: #BBB; }
 .table th.multi_select_column, .table td.multi_select_column {
 width: 39px;
-text-align: center; }
+text-align: center; 
+background-clip: padding-box;
+}
 .table .normal_column ul {
 padding: 0; }
 
@@ -8651,10 +8671,13 @@
 margin-top: 0; }
 
 .tablesorter-header.sortable {
-cursor: pointer; }
+padding-right: 19px;
+cursor: pointer;
+background-clip:padding-box; }
 
 .tablesorter-header-inner {
-display: inline; }
+display: inline-block; 
+}
 
 .tablesorter-headerAsc:after, .tablesorter-headerDesc:after {
 display: inline-block;
@@ -9586,14 +9609,14 @@
 content: ''; }
 .dropdown-menu:before {
 top: -7px;
-left: 9px;
+right: 9px;
 border-right: 7px solid transparent;
 border-bottom: 7px solid rgba(0, 0, 0, 0.15);
 border-left: 7px solid transparent;
 border-bottom-color: rgba(0, 0, 0, 0.2); }
 .dropdown-menu:after {
 top: -6px;
-left: 10px;
+right: 10px;
 border-right: 6px solid transparent;
 border-bottom: 6px solid #fff;
 border-left: 6px solid transparent; }
@@ -9649,8 +9672,22 @@
 
 #main_content .tab-content {
 border: 1px solid #d5dfe6;
+padding: 20px;
+margin: 0px;
+margin-bottom: 20px;
+min-width: 720px;
+}
+
+/* .tab-content + #defaults__quotas  */
+#main_content .tab-content:has( #defaults__quotas )
+{
+border: none;
+}
+
+.modal-dialog .tab-content {
+border: 1px solid #d5dfe6;
 border-top: none;
-padding: 0px 10px 10px 10px;
+padding: 20px 10px 10px 10px;
 margin: 0px;
 }
 
@@ -9734,6 +9771,7 @@
 border-bottom: 1px solid #c4ced8;
 color: #252525;
 padding-left: 28px;
+padding-right: 12px;
 /* 
 padding: 5px 0;
 border-bottom: 3px solid #BBB;
@@ -9841,7 +9879,8 @@
 position: absolute;
 color: #222;
 opacity: 0.25;
-right: 5px; }
+right: 5px; 
+}
 
 .status_unknown .horizon-pending-bar-icon {
 color: #fff; }
@@ -9867,3 +9906,117 @@
 
 #content_body {
 max-width: 0; }
+
[email protected] (max-width: 767px) {
+.navbar-nav .open .dropdown-menu {
+position: static;
+float: none;
+width: auto;
+margin-top: 0;
+background-color: transparent;
+border: 0;
+box-shadow: none; }
+.navbar-nav .open .dropdown-menu > li > a,
+.navbar-nav .open .dropdown-menu .dropdown-header {
+/* padding: 5px 15px 5px 25px;  */
+}
+.navbar-nav .open .dropdown-menu > li > a {
+line-height: 18px; }
+.navbar-nav .open .dropdown-menu > li > a:hover,
+.navbar-nav .open .dropdown-menu > li > a:focus {
+background-image: none; 
+}
+.navbar-default .navbar-nav .open .dropdown-menu > li > a {
+color: #333; 
+height: 40px;
+line-height: 40px;
+padding-left: 40px;
+}
+.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
+.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
+color: #333;
+background-color: #ebeced; }
+.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
+.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
+.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
+color: #333;
+background-color: #ebeced; }
+.navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
+.navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
+.navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus {
+color: #BBB;
+background-color: transparent; }
+}
+
[email protected] (max-width: 767px) {
+
+/* hamburger menu */
+.navbar-default .navbar-collapse, 
+.navbar-default .navbar-form {
+    border: 1px solid #c4ced7;
+    border-radius: 0px;
+    padding: 0px;
+    background: #fff;
+    width: 165px;
+    float: right;
+	-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.35);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.35);
+    background-clip: padding-box;    
+}
+
+.navbar-default .navbar-nav > .open > a, 
+.navbar-default .navbar-nav > .open > a:hover, 
+.navbar-default .navbar-nav > .open > a:focus {
+    color: #000;
+    margin: 0px;
+    background-color: #ebeced;
+    height: 40px;
+    line-height: 40px;
+    border-radius: 0px;
+}
+
+.navbar-nav {
+    margin: 0px;
+}
+
+.navbar-nav > li > a {
+    margin: 0px;
+    padding: 0px 20px;
+    clear: both;
+    font-weight: normal;
+    line-height: 40px;
+    color: #333;
+}
+
+.navbar-nav > li > a:hover,
+.navbar-nav > li > a:focus  {
+	background-color: #ebeced !important;
+	color: #333 !important;
+	border-radius: 0px !important;
+}
+
+.navbar-collapse:before, .navbar-collapse:after {
+    content: " ";
+    display: table;
+}
+
+.navbar-collapse:before {
+    position: absolute;
+    top: 46px;
+    right: 27px;
+    border-right: 7px solid transparent;
+    border-bottom: 7px solid #c4ced7;
+    border-left: 7px solid transparent;
+}
+
+ .navbar-collapse:after {
+    position: absolute;
+    top: 48px;
+    right: 28px;
+    border-right: 6px solid transparent;
+    border-bottom: 6px solid #fff;
+    border-left: 6px solid transparent;
+}
+
+
+}