You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ambari.apache.org by ak...@apache.org on 2016/10/14 21:04:39 UTC
[20/23] ambari git commit: AMBARI-18573. Migration to Bootstrap3
framework (akovalenko)
http://git-wip-us.apache.org/repos/asf/ambari/blob/2a77e39c/ambari-web/app/styles/application.less
----------------------------------------------------------------------
diff --git a/ambari-web/app/styles/application.less b/ambari-web/app/styles/application.less
index b2b4dd1..3b2c10b 100644
--- a/ambari-web/app/styles/application.less
+++ b/ambari-web/app/styles/application.less
@@ -16,9 +16,10 @@
* limitations under the License.
*/
+@import 'bootstrap_overrides.less';
@import 'common.less';
-html {
+body {
overflow-y: scroll;
}
@@ -30,6 +31,31 @@ wbr {
display: inline-block;
}
+ul, ol {
+ padding: 0;
+ padding-left: 10px;
+}
+
+.glyphicon-2x{font-size: 2em;}
+.glyphicon-3x{font-size: 3em;}
+.glyphicon-4x{font-size: 4em;}
+.glyphicon-5x{font-size: 5em;}
+
+body.modal-open {
+ //fix bootstrap padding when modal opened
+ padding-right: 0 !important;
+}
+
+.glyphicon-2x{font-size: 2em;}
+.glyphicon-3x{font-size: 3em;}
+.glyphicon-4x{font-size: 4em;}
+.glyphicon-5x{font-size: 5em;}
+
+body.modal-open {
+ //fix bootstrap padding when modal opened
+ padding-right: 0 !important;
+}
+
@-moz-document url-prefix() {
input[type="file"] {
line-height: 25px!important;
@@ -40,6 +66,10 @@ ul.typeahead.dropdown-menu {
z-index: 3000000 !important;
}
+select.form-control {
+ display: inline-block;
+}
+
#wrapper {
min-height: 100%;
}
@@ -74,36 +104,110 @@ footer {
padding: 15px 0;
}
+.badge-important {
+ background-color: #b94a48!important;
+}
+
+.alert {
+ padding: 8px 35px 8px 14px;
+}
+.form-control {
+ height: 30px;
+}
+table.diff {
+ white-space: normal;
+ width: 100%;
+ .replace, .insert, .empty {
+ float: none;
+ width: 50%;
+ margin: 0px;
+ padding: 0px;
+ }
+}
+
+.restart-required {
+ line-height: 30px;
+}
+
+.heatmap-select-metric-btn, .heatmap-select-metric-btn:focus {
+ font-size: 13px;
+ padding: 10px;
+}
+
.ru-badge {
text-align: center;
+ .upgrade-in-progress {
+ text-shadow: none;
+ background-color: #006DCC;
+ -webkit-animation-name: greenPulse;
+ -webkit-animation-duration: 1s;
+ -webkit-animation-iteration-count: infinite;
+ -moz-animation-name: greenPulse;
+ -moz-animation-duration: 1s;
+ -moz-animation-iteration-count: infinite;
+ animation-name: greenPulse;
+ animation-duration: 1s;
+ animation-iteration-count: infinite;
+ }
+
+ .upgrade-holding {
+ text-shadow: none;
+ background-color: @health-status-orange;
+ -webkit-animation-name: orangePulse;
+ -webkit-animation-duration: 1s;
+ -webkit-animation-iteration-count: infinite;
+ -moz-animation-name: orangePulse;
+ -moz-animation-duration: 1s;
+ -moz-animation-iteration-count: infinite;
+ animation-name: orangePulse;
+ animation-duration: 1s;
+ animation-iteration-count: infinite;
+ }
+
+ .upgrade-aborted {
+ text-shadow: none;
+ background-color: @health-status-red;
+ -webkit-animation-name: redPulse;
+ -webkit-animation-duration: 1s;
+ -webkit-animation-iteration-count: infinite;
+ -moz-animation-name: redPulse;
+ -moz-animation-duration: 1s;
+ -moz-animation-iteration-count: infinite;
+ animation-name: redPulse;
+ animation-duration: 1s;
+ animation-iteration-count: infinite;
+ .glyphicon-remove {
+ color: #fff;
+ }
+ }
}
-#top-nav, .ru-badge {
+#top-nav {
+
+ .navbar {
+ margin-bottom: 0;
+ }
+
+ .navbar-nav {
+ margin: 0;
+ }
.navbar.navbar-static-top {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
- .navbar-inner {
- background-image: -moz-linear-gradient(top, @top-nav-bg-color-from, @top-nav-bg-color-to);
- background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@top-nav-bg-color-from), to(@top-nav-bg-color-to));
- background-image: -webkit-linear-gradient(top, @top-nav-bg-color-from, @top-nav-bg-color-to);
- background-image: -o-linear-gradient(top, @top-nav-bg-color-from, @top-nav-bg-color-to);
- background-image: linear-gradient(to bottom, @top-nav-bg-color-from, @top-nav-bg-color-to);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= @top-nav-bg-color-from, endColorstr=@top-nav-bg-color-to); //for IE9-
- -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
- -moz-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
- box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
- max-height: 40px;
- }
-
- .logo {
- float: left;
- padding-top: 2px;
- img {
- height: 32px;
- }
- }
+ background-image: -moz-linear-gradient(top, @top-nav-bg-color-from, @top-nav-bg-color-to);
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@top-nav-bg-color-from), to(@top-nav-bg-color-to));
+ background-image: -webkit-linear-gradient(top, @top-nav-bg-color-from, @top-nav-bg-color-to);
+ background-image: -o-linear-gradient(top, @top-nav-bg-color-from, @top-nav-bg-color-to);
+ background-image: linear-gradient(to bottom, @top-nav-bg-color-from, @top-nav-bg-color-to);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= @top-nav-bg-color-from, endColorstr=@top-nav-bg-color-to); //for IE9-
+ -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
+ -moz-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
+ box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
+ height: 41px;
+ min-height: 40px;
- .brand {
+ .navbar-text.brand-wrapper {
+ margin-top: 0;
color: @top-nav-brand-color;
font-size: 16px;
font-weight: normal;
@@ -111,22 +215,12 @@ footer {
margin-left: 0;
padding: 2px 5px 0 10px;
text-shadow: 0 1px 0 #555555;
- }
-
- .brand.cluster-name {
- margin-left: 10px;
+ float: left;
+ margin-right: 15px;
- .label.operations-count {
- background-color: #006DCC;
- -webkit-animation-name: greenPulse;
- -webkit-animation-duration: 1s;
- -webkit-animation-iteration-count: infinite;
- -moz-animation-name: greenPulse;
- -moz-animation-duration: 1s;
- -moz-animation-iteration-count: infinite;
- animation-name: greenPulse;
- animation-duration: 1s;
- animation-iteration-count: infinite;
+ a, a:hover, a:active, a:visited {
+ color: @top-nav-brand-color;
+ text-decoration: none;
}
.label.alert-crit-count {
background-color: @health-status-red;
@@ -138,11 +232,11 @@ footer {
cursor: default;
}
.label {
- padding: 3px 5px 3px;
- color: @top-nav-ops-count-color;
- text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
- background-color: @top-nav-ops-count-bg-color;
- }
+ padding: 3px 5px 3px;
+ color: @top-nav-ops-count-color;
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+ background-color: @top-nav-ops-count-bg-color;
+ }
.icon-caret-left {
color: @top-nav-ops-count-bg-color;
margin-right: -1px;
@@ -162,75 +256,100 @@ footer {
animation-duration: 1s;
animation-iteration-count: infinite;
}
+ }
+ a:hover {
+ text-decoration: none;
+ }
- .upgrade-in-progress {
- text-shadow: none;
- background-color: #006DCC;
- -webkit-animation-name: greenPulse;
- -webkit-animation-duration: 1s;
- -webkit-animation-iteration-count: infinite;
- -moz-animation-name: greenPulse;
- -moz-animation-duration: 1s;
- -moz-animation-iteration-count: infinite;
- animation-name: greenPulse;
- animation-duration: 1s;
- animation-iteration-count: infinite;
+ .logo {
+ img {
+ height: 32px;
}
+ }
- .upgrade-holding {
- text-shadow: none;
- background-color: @health-status-orange;
- -webkit-animation-name: orangePulse;
- -webkit-animation-duration: 1s;
- -webkit-animation-iteration-count: infinite;
- -moz-animation-name: orangePulse;
- -moz-animation-duration: 1s;
- -moz-animation-iteration-count: infinite;
- animation-name: orangePulse;
- animation-duration: 1s;
- animation-iteration-count: infinite;
- }
+ .label.operations-count {
+ background-color: #006DCC;
+ -webkit-animation-name: greenPulse;
+ -webkit-animation-duration: 1s;
+ -webkit-animation-iteration-count: infinite;
+ -moz-animation-name: greenPulse;
+ -moz-animation-duration: 1s;
+ -moz-animation-iteration-count: infinite;
+ animation-name: greenPulse;
+ animation-duration: 1s;
+ animation-iteration-count: infinite;
+ }
+ .label.alert-crit-count {
+ background-color: @health-status-red;
+ }
+ .label.alert-warn-count {
+ background-color: @health-status-orange;
+ }
+ .label.alerts-none-count {
+ cursor: default;
+ }
+ .alerts-label {
+ margin-left: 5px;
+ display: inline-block;
+ }
+ .label {
+ //padding: 3px 5px 3px;
+ color: @top-nav-ops-count-color;
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+ background-color: @top-nav-ops-count-bg-color;
+ }
+ .icon-caret-left {
+ color: @top-nav-ops-count-bg-color;
+ margin-right: -1px;
+ text-shadow: none;
+ }
+ .ops-count {
+ margin-right: -1px;
+ color: #006DCC;
+ text-shadow: none;
+ -webkit-animation-name: greenPulseInner;
+ -webkit-animation-duration: 1s;
+ -webkit-animation-iteration-count: infinite;
+ -moz-animation-name: greenPulseInner;
+ -moz-animation-duration: 1s;
+ -moz-animation-iteration-count: infinite;
+ animation-name: greenPulseInner;
+ animation-duration: 1s;
+ animation-iteration-count: infinite;
+ }
+
+ .cluster-name {
+ margin-left: 20px;
+ }
- .upgrade-aborted {
- text-shadow: none;
- background-color: @health-status-red;
- -webkit-animation-name: redPulse;
- -webkit-animation-duration: 1s;
- -webkit-animation-iteration-count: infinite;
- -moz-animation-name: redPulse;
- -moz-animation-duration: 1s;
- -moz-animation-iteration-count: infinite;
- animation-name: redPulse;
- animation-duration: 1s;
- animation-iteration-count: infinite;
- .icon-remove {
- color: #fff;
- }
+ ul.top-nav-menu.nav {
+ padding-left: 5px;
+ li>a {
+ padding: 10px 15px 10px;
}
-
}
+
@media (max-width: 1200px) {
- ul.top-nav-menu.nav {
- padding-left: 5px;
- li>a {
- padding: 10px 10px 10px;
- }
+ ul.top-nav-menu.nav li>a {
+ padding: 10px 10px 10px;
}
}
+
.top-nav-menu.nav {
display: block;
float: right;
padding-left: 20px;
overflow: visible;
+ & > li {
+ display: inline-block;
+ }
+
li > a {
text-shadow: none;
color: @top-nav-menu-text-color;
text-align: center;
white-space: nowrap;
- &.views-button-container {
- padding-bottom: 9.23077px;
- }
}
.active > a, .active > a:hover, .active > a:focus {
color: @top-nav-menu-active-text-color;
@@ -254,10 +373,18 @@ footer {
background: @health-status-orange;
cursor: pointer;
}
- .icon-th {
- font-size: 1.3em;
+ .glyphicon-th {
+ font-size: 1.1em;
+ }
+
+ .top-nav-dropdown {
+ @media (min-width: 768px) {
+ .views-button-container {
+ padding-bottom: 10px;
+ }
+ }
}
- //top-nav bar dropdown menu on hover
+
li.top-nav-dropdown {
position: relative;
}
@@ -271,7 +398,8 @@ footer {
left: 0;
z-index: 1000;
float: left;
- min-width: 180px;
+ min-width: 220px;
+ width: 220px;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
@@ -292,14 +420,11 @@ footer {
.health-status-DEAD-YELLOW {
color: @health-status-yellow;
}
- .icon-refresh {
- color: #fdb82f;
- margin-left: 4px;
- }
.label {
padding: 0 0 0 3px;
}
.alerts-count {
+ line-height: 14px;
padding: 1px 4px;
float: right;
margin-right: 5px;
@@ -325,7 +450,7 @@ footer {
line-height: 20px;
color: @top-nav-menu-dropdown-text-color;
white-space: nowrap;
- .icon-health-block > span:before {
+ .glyphicon-health-block > span:before {
line-height: 20px;
}
}
@@ -350,18 +475,13 @@ footer {
}
}
- .navbar .nav {
- float: none;
- overflow: hidden;
- }
-
- .navbar-inner {
- min-height: 40px;
- border: none;
- }
-
.top-nav-user {
float: right;
+ margin-left: 10px;
+ .navbar-btn {
+ margin-bottom: 0;
+ margin-top: 3px;
+ }
}
.navbar .nav .top-nav-user .active > a,
.navbar .nav .top-nav-user .active > a:hover {
@@ -403,14 +523,14 @@ footer {
width: 80%;
}
}
- .icon-caption {
+ .glyphicon-caption {
display: inline-block;
width: 20%;
}
}
.nav.top-nav-menu {
- .icon-caption {
+ .glyphicon-caption {
.alerts-count {
position: relative;
top: 1px;
@@ -419,7 +539,7 @@ footer {
}
.nav-list.nav-services {
- .icon-caption {
+ .glyphicon-caption {
.alerts-count {
position: relative;
top: 2px;
@@ -428,12 +548,13 @@ footer {
}
-.row-fluid .tinyoffset {
+.row .tinyoffset {
margin-left: 3%!important;
}
-.row-fluid .tinyspan {
+.row .tinyspan {
width: 2%!important;
*width: 1.95%!important;
+ float: none;
}
.page-bar {
@@ -445,6 +566,9 @@ footer {
label {
font-size: 12px;
}
+ .pagination {
+ margin: 0;
+ }
div {
display: inline-block;
margin:0 10px;
@@ -459,6 +583,7 @@ footer {
display:inline;
}
select {
+ display: initial;
margin-bottom: 4px;
margin-top: 4px;
width:70px;
@@ -467,7 +592,7 @@ footer {
}
}
.paging_two_button {
- a.paginate_disabled_next, a.paginate_disabled_previous {
+ li.paginate_disabled_next, li.paginate_disabled_previous {
color: gray;
&:hover {
color: gray;
@@ -476,14 +601,15 @@ footer {
}
}
- a.paginate_next, a.paginate_previous {
+ li.paginate_next, li.paginate_previous {
&:hover {
text-decoration: none;
cursor: pointer;
}
}
- a {
+ li {
padding:0 5px;
+ color: #0088cc;
}
}
}
@@ -506,7 +632,7 @@ footer {
border-right: 1px solid #f0f0f0;
text-align: center;
}
- li.span2 {
+ li.col-md-2 {
padding: 0;
margin: 0;
width: 140px;
@@ -534,7 +660,7 @@ h1 {
color: @green;
}
-.login.well.span4 {
+.login.well.col-md-4 {
margin: 20px auto;
padding: 25px;
float: none;
@@ -550,61 +676,54 @@ h1 {
}
}
-.btn-small {
- text-decoration: none !important;
-}
-
-.hide {
- visibility: hidden;
-}
-// some where in the vendor.css "display: none;" is added to ".hide"
-.not-show {
+.hide, .hidden {
visibility: hidden;
}
-.show {
+
+.show, .shown {
visibility: visible;
}
/***************
* Ambari wide icon colors
***************/
-.icon-ok {
+.glyphicon-ok {
color: #5AB400;
}
-.icon-warning-sign {
+.glyphicon-warning-sign {
color: #FDB82F;
}
-.icon-empty {
+.glyphicon-empty {
height: 21px;
display: inline-block;
width: 8px;
}
-.icon-caret-right {
+.glyphicon-caret-right {
min-width: 8px;
padding-top: 2px;
}
-.icon-caret-left {
+.glyphicon-caret-left {
min-width: 8px;
padding-top: 2px;
}
-.icon-remove {
+.glyphicon-remove {
color: #FF4B4B;
}
-.icon-remove-sign {
+.glyphicon-remove-sign {
color: #FF4B4B;
}
-.icon-question-sign {
+.glyphicon-question-sign {
color: #999;
}
-.icon-exclamation-sign {
+.glyphicon-exclamation-sign {
color:#B94A48;
}
@@ -705,6 +824,9 @@ h1 {
padding: 25px;
background-color: #fff;
+ #get-started label{
+ font-weight: normal;
+ }
}
.mbm {
@@ -712,8 +834,27 @@ h1 {
}
.nav-header {
+ text-transform: uppercase;
+ font-weight: 700;
+ color: #999999;
font-size: 13px;
padding-left: 0;
+ padding-top: 3px;
+ padding-bottom: 3px;
+ }
+ .nav {
+ li{
+ margin: 0;
+
+ a {
+ padding: 8px 12px;
+ line-height: 1;
+ margin-top: 2px;
+ margin-bottom: 3px;
+ }
+ }
+
+
}
#installOptions {
.sshKey-file-view {
@@ -733,12 +874,7 @@ h1 {
width: 504px;
height: auto;
}
- .ssh-user {
- margin-right: 10px;
- padding-top: 5px;
- }
- .ssh-port {
- margin-right: 10px;
+ .ssh-user, .ssh-port {
padding-top: 5px;
}
#targetHosts {
@@ -746,7 +882,7 @@ h1 {
padding-left: 18px;
}
}
- .span6 {
+ .col-md-6 {
min-width: 504px;
}
#hostConnectivity {
@@ -795,6 +931,7 @@ h1 {
}
.tinyspan {
width: 2%;
+ float: none;
}
}
.box-header {
@@ -873,9 +1010,11 @@ h1 {
cursor: default;
text-decoration: none !important;
}
- a.deselected {
+ .checkbox {
+ margin-top: 0;
+ margin-bottom: 5px;
}
- i.icon-asterisks {
+ .glyphicon-asterisks {
color: #00688B;
}
th {
@@ -906,6 +1045,9 @@ h1 {
overflow: hidden;
text-overflow: ellipsis;
}
+ .checkbox {
+ margin: 0;
+ }
}
}
.spinner-overlay {
@@ -1000,7 +1142,7 @@ h1 {
float:left;
white-space: nowrap;
}
- .progress-bar {
+ .progress-wrapper {
width: 73%;
.progress {
margin-bottom: 0;
@@ -1057,7 +1199,7 @@ h1 {
.pull-left{
float: left;
}
- .progress-bar{
+ .progress-wrapper{
margin-top: 10px;
.progress{
@@ -1132,7 +1274,7 @@ h1 {
#summary-restart-bar {
margin-top: 20px;
.alert{
- .icon-refresh{
+ .glyphicon-refresh{
margin-left:10px;
color: #fdb82f;
}
@@ -1143,12 +1285,15 @@ h1 {
}
#serviceConfig {
+ .nav-tabs {
+ margin-bottom: 20px;
+ }
margin-top: 20px;
.alert{
- .icon-refresh{
+ .glyphicon-refresh{
margin-left:10px;
}
- .icon-warning-sign {
+ .glyphicon-warning-sign {
color: @health-status-yellow;
}
}
@@ -1158,14 +1303,16 @@ h1 {
.directories {
min-width: 280px;
}
- .accordion-heading {
+ .panel-heading {
background-color: #f0f0f0;
+ cursor: pointer;
}
- .accordion-group {
- margin-bottom: 20px;
+ .panel-group {
+
.control-label {
text-align: left;
word-wrap: break-word;
+ font-weight: 500;
}
.service-config-section{
.overridden-property{
@@ -1173,7 +1320,7 @@ h1 {
padding: 5px;
margin-left: -5px;
}
- .checkbox.inline {
+ .checkbox.list-inline {
vertical-align: baseline;
&>.ember-checkbox{
margin-left: -14px;
@@ -1181,23 +1328,19 @@ h1 {
}
}
.entry-row.indent-1 {
- margin: 10px 0 10px 2em !important;
+ margin-left: 2em;
}
.entry-row.indent-2 {
- margin: 10px 0 10px 4em !important;
+ margin-left: 4em;
}
.entry-row {
- margin: 10px 0;
- .control-label-span{
- width: auto !important;
- }
- .icon-lock {
+ margin: 0;
+ // .control-label-span{
+ // width: auto !important;
+ // }
+ .glyphicon-lock {
color: #008000;
}
- a.btn[disabled],
- a.btn[disabled] [class^="icon-"], a [class*=" icon-"] {
- cursor: not-allowed;
- }
.action{
margin-left: 3px;
margin-right: 1px;
@@ -1205,8 +1348,8 @@ h1 {
white-space: nowrap;
}
input[type="radio"] {
- margin-bottom: 3px !important;
- margin-right: 5px !important;
+ margin-right: 5px;
+ margin-left: -20px;
}
.control-group {
margin: 0;
@@ -1242,7 +1385,7 @@ h1 {
a {
padding-right: 24px;
}
- .icon-remove {
+ .glyphicon-remove {
border: 1px solid white;
position: absolute;
right: 7px;
@@ -1251,7 +1394,7 @@ h1 {
cursor: default;
color: #555555;
}
- .icon-remove:hover {
+ .glyphicon-remove:hover {
border: 1px solid grey;
}
}
@@ -1269,9 +1412,6 @@ h1 {
#attention {
margin: 20px 0;
}
- .retyped-password {
- margin-left: 14px;
- }
#slave-hosts-popup {
ul {
list-style-type: none;
@@ -1286,11 +1426,11 @@ h1 {
.action {
cursor: pointer;
}
- .icon-plus-sign {
+ .glyphicon-plus-sign {
color: #5AB400;
margin-right: 2px;
}
- .icon-minus-sign {
+ .glyphicon-minus-sign {
color: #FF4B4B;
margin-right: 2px;
}
@@ -1301,11 +1441,11 @@ h1 {
.btn-final{
background: transparent repeat scroll 0 0 rgba(255, 255, 255, 0);
}
- .btn-final .icon-lock{
+ .btn-final .glyphicon-lock{
color: #a6a6a6;
cursor: inherit;
}
- .btn-final.active .icon-lock {
+ .btn-final.active .glyphicon-lock {
color: blue;
}
.btn-final.active { //copied from Bootstrap .btn.active
@@ -1320,12 +1460,18 @@ h1 {
.btn-final.active[disabled] {
cursor: not-allowed;
}
- a.accordion-toggle:hover {
+ a.panel-toggle:hover {
text-decoration: none;
.category-name {
+ color: #337ab7;
text-decoration: underline;
}
}
+ .category-name {
+ font-size: 14px;
+ margin-left: 10px;
+ color: #23527c;
+ }
}
.enhanced-config-tab-content
@@ -1338,7 +1484,7 @@ h1 {
.capacity-scheduler {
.header {
margin-bottom: 10px;
- .span1 {
+ .col-md-1 {
padding-top: 10px;
font-weight: bold;
}
@@ -1380,10 +1526,8 @@ h1 {
}
}
.with-unit{
- input{
- width:auto;
- }
- .add-on{
+ float: left;
+ .input-group-addon{
overflow: hidden;
max-width:250px;
}
@@ -1400,14 +1544,14 @@ h1 {
font-size: 1em;
}
}
- .icon-ok-sign, .icon-warning-sign {
+ .glyphicon-ok-sign, .glyphicon-warning-sign {
font-size: 27px;
line-height: 30px;
}
- .icon-ok-sign {
+ .glyphicon-ok-sign {
color: @health-status-green;
}
- .icon-warning-sign {
+ .glyphicon-warning-sign {
color: @health-status-red;
}
.connection-result {
@@ -1422,6 +1566,15 @@ h1 {
}
}
}
+ .help-block {
+ display: inline-block;
+ }
+ .long-input {
+ width: 75%;
+ }
+ .config-controls {
+ line-height: 34px;
+ }
}
.running-host-components-table{
@@ -1524,30 +1677,28 @@ a:focus {
}
/*****end styles for table*****/
-/**********start styles for thumbnail ****************/
-.thumbnail {
+/**********start styles for img-thumbnail ****************/
+.img-thumbnail {
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
- -webkit-box-shadow: none;
- -moz-box-shadow: none;
- box-shadow: none;
+ line-height: 20px;
}
-/**********end styles for thumbnail ****************/
+/**********end styles for img-thumbnail ****************/
-/**********start styles for dropdown-menu, accordion-group ****************/
+/**********start styles for dropdown-menu, panel-group ****************/
.dropdown-menu,
.dropdown-submenu > .dropdown-menu,
.dropdown-menu-wrap > .dropdown-menu,
.nav-pills .dropdown-menu,
.nav-pills > li > a,
.nav-tabs > li > a,
-.accordion-group {
+.panel-group {
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
}
-.dropdown-submenu.submenu-left {
+.submenu-left {
&> .dropdown-menu-wrap {
position: relative;
width: 100%;
@@ -1566,6 +1717,52 @@ a:focus {
}
}
+.dropdown-submenu {
+ position: relative;
+}
+
+.dropdown-submenu > .dropdown-menu {
+ top: 0;
+ left: 100%;
+ margin-top: -6px;
+ margin-left: -1px;
+}
+
+.dropdown-submenu:hover > .dropdown-menu {
+ display: block;
+}
+
+.dropdown-submenu > a:after {
+ display: block;
+ content: " ";
+ float: right;
+ width: 0;
+ height: 0;
+ border-color: transparent;
+ border-style: solid;
+ border-width: 5px 0 5px 5px;
+ border-left-color: #333;
+ margin-top: 5px;
+ margin-right: -10px;
+}
+
+.dropdown-submenu:hover > a:after {
+ border-left-color: #333;
+}
+
+.dropdown-submenu.pull-left {
+ float: none;
+}
+
+.dropdown-submenu.pull-left > .dropdown-menu {
+ left: -100%;
+ margin-left: 10px;
+}
+
+.dropdown-submenu > a.disabled:after {
+ border-left-color: #ccc;
+}
+
/*****start styles for host component popup*****/
#modal {
outline: none;
@@ -1583,7 +1780,7 @@ a:focus {
.host-component-popup-wrap {
.task-top-wrap {
.operation-name-top {
- width: 33%;
+ width: 36%;
padding-left: 20px;
float: left;
text-align: left;
@@ -1608,7 +1805,7 @@ a:focus {
&.scheduled{
max-height: 255px;
}
- .span2{
+ .col-md-2{
width:20%;
float: left;
}
@@ -1632,7 +1829,7 @@ a:focus {
.task-list-line-cursor{
width: 100%;
min-height: 20px;
- .progress-bar{
+ .progress-wrapper{
.progress{
margin-bottom: 0;
}
@@ -1729,8 +1926,7 @@ a:focus {
border-bottom: 1px solid #CCC;
text-align: center;
font-size: 15px;
- padding: 0 0 20px 0;
- height: 20px;
+ height: 40px;
.task-detail-back-to-hosts {
float: left;
@@ -2017,7 +2213,7 @@ a:focus {
height: 20px;
width: 20px;
margin-left: 0;
- display: inline !important;
+ display: list-inline !important;
float: none !important;
}
.STARTING, .STARTED {
@@ -2042,6 +2238,12 @@ a:focus {
text-decoration: underline;
}
}
+ .category-name {
+ cursor: pointer;
+ color: #23527c;
+ font-size: 14px;
+ margin-left: 10px;
+ }
}
.service-summary-component-red-dead {
color: #ff0000;
@@ -2087,7 +2289,7 @@ a:focus {
td {
width: 180px;
}
- .progress-bar {
+ .progress-wrapper {
width: 50%;
.progress {
margin-bottom: 0;
@@ -2158,7 +2360,7 @@ a:focus {
p {
margin-bottom: 2px;
}
- .container-fluid {
+ .container {
padding-left: 10px;
padding-right: 10px;
}
@@ -2166,7 +2368,7 @@ a:focus {
font-weight: normal;
font-size: 13px;
}
- .row-fluid [class*="span"] {
+ .row [class*="span"] {
min-height: 0;
}
.status-icon {
@@ -2192,16 +2394,17 @@ a:focus {
}
.modal-graph-line {
- width: 810px;
- margin: -250px 0 0 -405px;
+ .modal-dialog {
+ width: 810px;
+ }
.modal-body {
- min-height: 420px !important;
+ min-height: 450px !important;
overflow: hidden;
.corner-icon {
position: absolute;
right: 15px;
text-decoration: none;
- .icon-save {
+ .glyphicon-save {
color: #555;
}
}
@@ -2230,6 +2433,12 @@ a:focus {
/*start chart/style graphs*/
.chart-wrapper {
+ .shown {
+ display: inline-block;
+ }
+ .time-label {
+ text-align: center;
+ }
.actions-container {
text-align: center;
.graph-details-time-range {
@@ -2326,6 +2535,9 @@ a:focus {
position: absolute;
top: 180px;
z-index: 3;
+ .label {
+ font-size: 12px;
+ }
}
.rickshaw_legend {
background-color: #999 !important;
@@ -2361,7 +2573,7 @@ a:focus {
.corner-icon {
position: absolute;
right: 0;
- bottom: -10px;
+ bottom: -1px;
text-decoration: none;
i {
color: #555;
@@ -2385,15 +2597,6 @@ a:focus {
font-size: @smaller-font-size;
}
-.modal-body {
- .show {
- display: inline-block;
- }
- .time-label {
- text-align: center;
- }
-}
-
.mini-chart {
position: absolute;
.chart-container {
@@ -2439,6 +2642,7 @@ a:focus {
padding: 0 0 0 3px;
}
.label.alerts-count {
+ line-height: 14px;
padding: 1px 4px;
background: @health-status-red;
float: right;
@@ -2458,12 +2662,12 @@ a:focus {
padding-left: 37px;
}
}
- .icon-laptop {
+ .glyphicon-blackboard {
color: #555;
padding-left: 1px;
}
.active {
- .icon-laptop {
+ .glyphicon-blackboard {
color: #f0f0f0;
}
}
@@ -2490,11 +2694,18 @@ a.services-menu-blocks{
white-space:normal;
word-break:break-word;
}
+
+ .glyphicon.glyphicon-refresh {
+ color: #fdb82f;
+ margin-left: 4px;
+ margin-right: 4px;
+ }
+
}
.quick-links-wrapper {
- margin-top: -53px;
+ margin-top: -40px;
position: relative;
- left: 278px;
+ left: 280px;
.nav-pills.move {
float: right;
width:135px;
@@ -2511,11 +2722,6 @@ a.services-menu-blocks{
margin: 0 2px;
}
- .dropdown-submenu {
- &> a:after {
- border-left-color: #333;
- }
- }
.nav li.dropdown.open {
.dropdown-toggle{
color: #005580;
@@ -2558,11 +2764,11 @@ a.services-menu-blocks{
.service-summary {
background: #F6FAFD;
- .service-block.span8 {
+ .service-block.col-md-8 {
margin-left: 0;
border-right: 1px solid #5fa3c3;
}
- .service-block.span3 {
+ .service-block.col-md-3 {
padding-left: 0;
}
.service-content {
@@ -2593,9 +2799,12 @@ a.services-menu-blocks{
.service-button {
text-align: right;
margin-bottom: 5px;
- margin-top: -55px;
+ margin-top: -40px;
margin-left: 10px;
min-height: 30px;
+ .btn-group {
+ vertical-align: inherit;
+ }
ul.dropdown-menu {
li {
text-align: left;
@@ -2603,10 +2812,10 @@ a.services-menu-blocks{
a {
cursor: pointer;
}
- .icon-play.enabled {
+ .glyphicon-play.enabled {
color: @green;
}
- .icon-stop.enabled{
+ .glyphicon-stop.enabled{
color: red;
}
}
@@ -2627,19 +2836,21 @@ a.services-menu-blocks{
.metrics-collapsed-graphs {
margin-bottom: 10px;
- .accordion {
- .accordion-heading {
+ .panel {
+ .panel-heading {
font-size: 15px;
color: #777;
font-weight: bold;
- padding: 0;
- .accordion-toggle {
- .icon-caret-toggle:before {
- content: "\f0d7";
+ .panel-toggle {
+ .glyphicon {
+ margin-right: 10px;
+ &:before {
+ content: "\e252";
+ }
}
&.collapsed {
- .icon-caret-toggle:before {
- content: "\f0da";
+ .glyphicon:before {
+ content: "\e250";
}
}
}
@@ -2647,7 +2858,7 @@ a.services-menu-blocks{
margin: 3px;
}
}
- .accordion-body.in {
+ .panel-body.in {
overflow: visible;
}
}
@@ -2665,11 +2876,6 @@ table.graphs {
margin-bottom: 10px;
}
#widgets-options-menu {
- .dropdown-submenu {
- &> a:after {
- border-left-color: #333;
- }
- }
.add-widgets-text .dropdown-menu {
top: 0;
left: 99%;
@@ -2682,14 +2888,11 @@ table.graphs {
display: block;
padding: 3px 0 3px 5px;
line-height: 20px;
- ul{
- margin-left: 0;
- }
- label.checkbox {
- padding-left: 3px;
+ .checkbox {
+ margin: 0;
}
- input[type="checkbox"] {
- margin: 4px 4px 2px 2px;
+ ul {
+ margin-left: 0;
}
}
&>li {
@@ -2711,7 +2914,7 @@ table.graphs {
margin-bottom: 0;
margin-top: 0;
}
- #dashboard-widgets{
+ #dashboard-widgets {
.caption {
height: 25px;
}
@@ -2723,51 +2926,55 @@ table.graphs {
margin: 15px auto 35px;
}
}
- .row-fluid .span2p4 {
+ .span2p4 {
+ float: left;
width: 19.60%;
*width: 19.60%;
}
- .row-fluid .span4p8 {
+ .span4p8 {
+ float: left;
width: 39.55%;
*width: 39.55%;
}
- .thumbnails > div {
+ .thumbnails > div {
margin-left: 0;
margin-right: 3px;
margin-top: 0;
- margin-bottom: 7px;
+ margin-bottom: 3px;
height: 163px;
}
- .thumbnails li {
- height:150px;
+ .thumbnails li {
+ height: 160px;
+ width: 100%;
margin-left: 0;
margin-right: 3px;
margin-top: 3px;
margin-bottom: 0;
}
- .thumbnail .corner-icon{
+ .img-thumbnail .corner-icon {
display: none;
position: relative;
- .icon-remove-sign{
+ padding: 7px 0;
+ .glyphicon-remove-sign{
color: #000000;
text-shadow: #fff 0 0 15px;
- position: relative;
- left: -13px;
+ position: absolute;
+ left: -10px;
top: -10px;
}
- .icon-edit, .icon-save {
+ .glyphicon-edit, .glyphicon-save {
color: #555555;
}
}
.export-graph-list {
- right: 3px;
+ top: 30px;
li {
margin: 0;
height: auto;
}
}
- .thumbnail .hidden-info-general{
+ .img-thumbnail .hidden-info-general{
color: #555555;
font-size: 12px;
font-weight: bold;
@@ -2795,7 +3002,7 @@ table.graphs {
line-height: 16px;
}
}
- .thumbnail .caption {
+ .img-thumbnail .caption {
padding-left: 0;
padding-top: 7px;
padding-bottom: 7px;
@@ -2806,7 +3013,7 @@ table.graphs {
text-align: left;
position: relative;
}
- .thumbnail .widget-content{
+ .img-thumbnail .widget-content{
text-align: center;
font-size: 35px;
padding-top: 40px; //svg
@@ -2826,7 +3033,7 @@ table.graphs {
}
}
}
- .thumbnail .widget-content-isNA{ // for pie chart n\a
+ .img-thumbnail .widget-content-isNA{ // for pie chart n\a
text-align: center;
font-size: 35px;
color: #D6DDDF;
@@ -2834,7 +3041,7 @@ table.graphs {
font-weight: bold;
position: relative;
}
- .thumbnail{
+ .img-thumbnail{
background-color: #ffffff;
z-index: 3;
}
@@ -2843,7 +3050,7 @@ table.graphs {
margin: 0;
}
}
- .has-hidden-info .thumbnail:hover {
+ .has-hidden-info .img-thumbnail:hover {
cursor: move;
//background-color: #d3d3d3;
.corner-icon{
@@ -2855,7 +3062,7 @@ table.graphs {
display: block;
}
.caption{
- margin-left: -6px;
+ margin-left: -10px;
z-index: 7;
}
.slots-caption{
@@ -2938,7 +3145,7 @@ table.graphs {
padding: 0;
font-size: 12px;
}
- .thumbnail:hover {
+ .img-thumbnail:hover {
cursor: move;
.corner-icon {
display:block;
@@ -2946,7 +3153,7 @@ table.graphs {
z-index: 9;
}
.caption {
- margin-left: -6px;
+ margin-left: -10px;
}
}
}
@@ -2956,7 +3163,7 @@ table.graphs {
margin: 0;
}
}
- .links .thumbnail{
+ .links .img-thumbnail{
li{
height:20px;
margin: 3px;
@@ -2987,7 +3194,7 @@ table.graphs {
}
}
}
- .links .thumbnail:hover{
+ .links .img-thumbnail:hover{
cursor: move;
.corner-icon{
display:block;
@@ -2995,10 +3202,10 @@ table.graphs {
z-index: 9;
}
.caption{
- margin-left: -6px;
+ margin-left: -10px;
}
}
- .thumbnail .widget-content .svg {
+ .img-thumbnail .widget-content .svg {
position: relative;
}
@@ -3080,15 +3287,6 @@ table.graphs {
.bulk-menu {
- .dropdown-submenu {
- &> a:after {
- border-left-color: #333;
- }
- &> a.disabled:after {
- border-left-color: #ccc;
- }
- }
-
a {
&.disabled {
color: gray;
@@ -3131,7 +3329,7 @@ table.graphs {
background-repeat: no-repeat;
height: 20px;
width: 13px;
- display: inline !important;
+ display: list-inline !important;
float: none !important;
}
.health-status-HEALTHY,
@@ -3158,7 +3356,7 @@ table.graphs {
margin-left: 1px;
}
.icon-exclamation-sign,
- .icon-refresh {
+ .glyphicon-refresh {
margin-right: 1px;
margin-left: 1px;
}
@@ -3230,7 +3428,7 @@ table.graphs {
margin-bottom: 0;
}
.filter-input-width{
- width:65%;
+ width: ~"calc(100% - 20px)";
&.rack-input {
width: 85%;
@@ -3253,16 +3451,15 @@ table.graphs {
padding-right: 10px\9!important;
width: 1.5%;
width: 13px\9!important;
+ input {
+ vertical-align: middle;
+ }
}
.col2,
td:first-child + td + td,
th:first-child + th + th{
width: 20%;
padding-right: 1px;
-
- .filter-input-width{
- width:85%;
- }
}
.col3, .col4,
td:first-child + td + td + td,
@@ -3277,12 +3474,12 @@ table.graphs {
.col5,
td:first-child + td + td + td + td + td,
th:first-child + th + th + th + th + th {
- width: 9%!important;
+ width: 10%!important;
}
.col6,
td:first-child + td + td + td + td + td + td,
th:first-child + th + th + th + th + th + th {
- width: 13.6%!important;
+ width: 13%!important;
}
.col7,
td:first-child + td + td + td + td + td + td + td,
@@ -3293,7 +3490,7 @@ table.graphs {
.col8,
td:first-child + td + td + td + td + td + td + td + td,
th:first-child + th + th + th + th + th + th + th + th{
- width: 6.4%!important;
+ width: 6%!important;
}
.col9,
@@ -3339,12 +3536,6 @@ table.graphs {
td.health label {
padding-top: 3px;
}
- td.health span {
- display: block;
- height: 13px;
- margin: 4px 0 0 0;
- width: 13px;
- }
td.health .icon-medkit {
margin: 3px 0 0 0;
}
@@ -3479,7 +3670,7 @@ table.graphs {
}
}
.expander {
- .icon-caret-right, .icon-caret-down {
+ .glyphicon-caret-right, .glyphicon-caret-down {
vertical-align: middle;
margin-right: 5px;
margin-bottom: 2px;
@@ -3506,7 +3697,7 @@ table.graphs {
}
.warnings-list {
.block {
- .accordion-heading {
+ .panel-heading {
background-color: #f0f0f0;
}
table {
@@ -3522,7 +3713,7 @@ table.graphs {
margin-top: 10px;
}
}
- .icon-warning-sign {
+ .glyphicon-warning-sign {
color: @health-status-yellow;
}
}
@@ -3541,6 +3732,9 @@ table.graphs {
#host-details {
+ .set-rack-id {
+ cursor: pointer;
+ }
.status-info {
.host-title {
font-size: 18px;
@@ -3586,11 +3780,11 @@ table.graphs {
background-repeat: no-repeat;
height: 13px;
width: 13px;
- display: inline !important;
+ display: list-inline !important;
float: none !important;
}
- .components-health.icon-arrow-up{
+ .components-health.glyphicon-arrow-up{
color:red;
}
@@ -3659,16 +3853,19 @@ table.graphs {
.content {
padding: 10px;
- }
- .host-configuration .dl-horizontal dt {
- width: 120px;
- line-height: 20px;
}
- .host-configuration .dl-horizontal dd {
- margin-left: 100px;
- line-height: 20px;
+ .host-configuration .dl-horizontal {
+ margin-top: 14px;
+ dt {
+ width: 120px;
+ line-height: 20px;
+ }
+ dd {
+ margin-left: 100px;
+ line-height: 20px;
+ }
}
.host-metrics {
@@ -3690,10 +3887,6 @@ table.graphs {
border-radius: 4px;
background: #FFF;
- #add_component{
- width: 170px;
- height: 30px;
- }
}
.host-components .btn-group {
@@ -3750,16 +3943,24 @@ table.graphs {
table-layout: auto;
}
}
+ .host-configs {
+ margin-left: 0;
+ }
+ #host-details-summary-alerts {
+ .label {
+ background-color: #999999;
+ }
+ }
}
.services-menu {
- .icon-refresh {
+ .glyphicon-refresh {
color: @restart-indicator-color;
margin-left: 4px;
}
}
#host-details, #serviceConfig {
- .icon-refresh {
+ .glyphicon-refresh {
color: @restart-indicator-color;
}
.alerts-crit-count {
@@ -3772,7 +3973,7 @@ table.graphs {
}
}
#hosts{
- .icon-refresh {
+ .glyphicon-refresh {
color: @restart-indicator-color;
}
.alerts-crit-count {
@@ -3829,13 +4030,13 @@ table.graphs {
}
.admin-misc {
- .span6 {
- margin-left: 0 !important;
+ .col-md-6 {
+ padding-left: 0;
}
}
.admin-auto-start {
- .span6 {
+ .col-md-6 {
margin-left: 0 !important;
}
@@ -3859,9 +4060,6 @@ table.graphs {
.setting-wrapper {
margin-bottom: 20px;
}
- .checkbox {
- margin: 0;
- }
}
/*End Admin*/
@@ -3964,10 +4162,6 @@ table.graphs {
border: solid 1px #000000;
}
- .form-horizontal .controls {
- margin-left: 110px;
- }
-
.form-horizontal .control-label {
white-space: normal;
width: 120px;
@@ -4080,6 +4274,10 @@ ul.filter {
.host-block {
margin-top: 20px;
}
+
+.button-caret-margin {
+ margin-top: 8px;
+}
/*start charts rack*/
.rack {
width: 99%;
@@ -4224,6 +4422,7 @@ ul.filter {
/*Start Heatmap*/
.heatmap {
+ padding-top: 10px;
#heatmap-metric-title {
margin-left: 23px;
}
@@ -4261,12 +4460,11 @@ ul.filter {
}
}
.legend-column {
- min-width: 150px;
- margin-right: 10px;
+ min-width: 160px;
+ padding-right: 0;
}
.heatmap-content {
- float: right;
- width: 78%;
+ padding-left: 0;
}
.heatmap_host_details {
font-size: 12px;
@@ -4281,7 +4479,7 @@ ul.filter {
.container-fluid {
padding: 0;
}
- .row-fluid [class*="span"] {
+ .row [class*="span"] {
margin-left: 0;
}
.legend {
@@ -4289,12 +4487,21 @@ ul.filter {
margin-bottom: 20px;
font-size: 12px;
.tile {
+ box-sizing: content-box;
width: 30px;
height: 1em;
padding: 4px;
border: 1px solid #D4D4D4;
border-radius: 5px;
margin-right: 10px;
+ margin-bottom: 2px;
+ }
+ }
+
+ .maximum-input {
+ line-height: 40px;
+ input {
+ width: 50%;
}
}
@@ -4308,15 +4515,10 @@ ul.filter {
height: 100%;
}
- .dropdown-submenu {
- a {
- cursor: default;
- }
- .dropdown-menu {
- a {
- cursor: pointer;
- }
- }
+ .active-widget {
+ float: right;
+ width: 78%;
+ position: static;
}
}
@@ -4326,14 +4528,6 @@ ul.filter {
display: none !important;
}
-.display {
- display: block !important;
-}
-
-.display-inline-block {
- display: inline-block !important;
-}
-
/* CHARTS */
.chart {
overflow: hidden;
@@ -4463,7 +4657,7 @@ ul.noStyle {
list-style: none;
}
-ul.inline li {
+ul.list-inline li {
display: inline;
}
@@ -4471,6 +4665,10 @@ ul.inline li {
border-top: none;
}
+.table .filter-row .filter-input-width {
+ width: ~"calc(100% - 20px)";
+}
+
.not-active-link{
color: #999;
a{
@@ -4485,7 +4683,7 @@ ul.inline li {
}
#config_history_flow {
- margin-bottom: 20px;
+ margin-bottom: 10px;
}
@@ -4515,11 +4713,14 @@ ul.inline li {
border-left-width: 1px;
}
table-layout: fixed;
- th {
+ thead > tr > th {
border-top: none;
}
- th, td {
- border-left-width: 0;
+ thead > tr > th,
+ tbody > tr > td {
+ border-bottom: none;
+ border-left: none;
+ border-right: none;
}
td {
@@ -4569,16 +4770,7 @@ ul.inline li {
}
.filter-row {
th {
- padding: 0;
- padding-left: 8px;
- }
- input {
- font-size: 12px;
- height: 14px;
- }
- select {
- height: 27px;
- font-size: 12px;
+ padding: 8px;
}
.active-filter {
color: #555555;
@@ -4595,7 +4787,7 @@ ul.inline li {
padding-left: 6px;
text-align: left;
width: 100px;
- .icon-filter {
+ .glyphicon-filter {
color: #999999;
}
}
@@ -4611,7 +4803,7 @@ ul.inline li {
padding-top: 4px;
}
- .accordion {
+ .panel {
background: none repeat scroll 0 0 #FFFFFF;
/*border: 1px solid;*/
font-size: 12px;
@@ -4619,33 +4811,27 @@ ul.inline li {
position: absolute;
z-index: 1000;
- .accordion-group {
- .accordion-heading {
+ .panel-group {
+ .panel-heading {
i {
text-decoration: none;
}
}
- .accordion-body {
- .accordion-inner {
- /*border: none;
- padding: 0 8px;
- width: 160px;*/
-
- ul.items {
- list-style: none;
- li {
- a:hover {
- cursor: pointer;
- }
+ .panel-body {
+ ul.items {
+ list-style: none;
+ li {
+ a:hover {
+ cursor: pointer;
}
- li.disabled {
- a {
- color: #999999;
- }
+ }
+ li.disabled {
+ a {
+ color: #999999;
}
-
}
+
}
}
}
@@ -4781,7 +4967,7 @@ ul.inline li {
}
#step10-alert-message {
- .icon-refresh {
+ .glyphicon-refresh {
color: @restart-indicator-color;
}
}
@@ -4819,10 +5005,14 @@ ul.inline li {
background-position: 0;
}
+.summary-width {
+ position: static;
+}
+
// COMBOBOX FIXES END
@media all and (max-width: 1200px) {
#main-nav {
- li.span2 {
+ li.col-md-2 {
width: 120px;
}
}
@@ -4885,18 +5075,9 @@ ul.inline li {
}
}
}
- // when the scree is narrow, the popup modal width is adjustable
- .full-width-modal {
- .modal {
- width: 90%;
- margin: 350px 0 0 -45%;
- }
- }
- .service-menu-width {
- width: 163px!important;
- }
+
.summary-width {
- width:757px!important
+ padding-right: 0;
}
@@ -4911,6 +5092,9 @@ ul.inline li {
}
.wizard-content {
#serviceConfig {
+ .nav-tabs {
+ margin-bottom: 20px;
+ }
.alert {
padding-right: 10px!important;
}
@@ -4923,25 +5107,64 @@ ul.inline li {
}
}
+@media (max-width: 992px) {
+ .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
+ float: left;
+ }
+ .col-md-12 {
+ width: 100%;
+ }
+ .col-md-11 {
+ width: 91.66666667%;
+ }
+ .col-md-10 {
+ width: 83.33333333%;
+ }
+ .col-md-9 {
+ width: 75%;
+ }
+ .col-md-8 {
+ width: 66.66666667%;
+ }
+ .col-md-7 {
+ width: 58.33333333%;
+ }
+ .col-md-6 {
+ width: 50%;
+ }
+ .col-md-5 {
+ width: 41.66666667%;
+ }
+ .col-md-4 {
+ width: 33.33333333%;
+ }
+ .col-md-3 {
+ width: 25%;
+ }
+ .col-md-2 {
+ width: 16.66666667%;
+ }
+ .col-md-1 {
+ width: 8.33333333%;
+ }
+}
+
//
// Gray palette
//
-.nav-pills > .active > a, .nav-pills > .active > a:hover {
+.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
background-color: #666666;
}
-.nav-list > .active > a, .nav-list > .active > a:hover {
+.nav-list > li.active > a, .nav-list > li.active > a:hover {
background-color: #666666;
+ color: #fff;
}
li.break {
background: none repeat scroll 0 0 #e4e4e4;
padding-top: 1px;
}
-.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a {
- background-color: #666666;
- background-image: linear-gradient(to bottom, #666666, #555555);
-}
.alert-info {
background-color: #E6F1F6;
@@ -4970,12 +5193,7 @@ li.break {
}
*/
-.btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] {
- background-color: #555555;
-}
-
.modal-body {
- max-height: none;
.api-error {
max-height: 403px;
word-wrap:break-word;
@@ -4983,7 +5201,7 @@ li.break {
}
}
-i.icon-asterisks {
+i.glyphicon-asterisks {
color: #00688B;
}
@@ -5012,71 +5230,23 @@ i.icon-asterisks {
white-space: normal;
}
-@installer-container-width: 1236px;
-@installer-container-margin: 20px;
-#main {
- &.install-wizard-content {
- .navbar-inner, .main-container {
- min-width: @installer-container-width + 2*@installer-container-margin;
- }
- .wizard {
- .container {
- width: @installer-container-width;
- }
- }
- }
-}
-
-#wrapper {
- .full-width-modal {
- &.add-service-wizard-modal {
- .modal {
- width: @installer-container-width + 2*@installer-container-margin;
- margin: -350px 0 0 -(@installer-container-width + @installer-container-margin)/2;
- }
- .wizard {
- .container {
- width: @installer-container-width;
- }
- }
- }
- }
-}
//styles for screen width more than 1200px
@media (min-width: 1200px) {
- //when screen is wide, the modal width is fixed
- .full-width-modal {
- .modal{
- width: 1180px;
- margin: -350px 0 0 -583px;
- }
- }
-
.row {
- margin-left: -30px;
*zoom: 1;
}
.row:before,
.row:after {
- display: table;
line-height: 0;
- content: "";
}
.row:after {
clear: both;
}
- [class*="span"] {
- float: left;
- min-height: 1px;
- margin-left: 30px;
- }
-
.container,
- .navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 1130px;
@@ -5086,402 +5256,6 @@ i.icon-asterisks {
width: 1170px;
}
- .span12 {
- width: 1170px;
- }
-
- .span11 {
- width: 1070px;
- }
-
- .span10 {
- width: 970px;
- }
-
- .span9 {
- width: 870px;
- }
-
- .span8 {
- width: 770px;
- }
-
- .span7 {
- width: 670px;
- }
-
- .span6 {
- width: 570px;
- }
-
- .span5 {
- width: 470px;
- }
-
- .span4 {
- width: 370px;
- }
-
- .span3 {
- width: 270px;
- }
-
- .span2 {
- width: 170px;
- }
-
- .span1 {
- width: 70px;
- }
-
- .offset12 {
- margin-left: 1230px;
- }
-
- .offset11 {
- margin-left: 1130px;
- }
-
- .offset10 {
- margin-left: 1030px;
- }
-
- .offset9 {
- margin-left: 930px;
- }
-
- .offset8 {
- margin-left: 830px;
- }
-
- .offset7 {
- margin-left: 730px;
- }
-
- .offset6 {
- margin-left: 630px;
- }
-
- .offset5 {
- margin-left: 530px;
- }
-
- .offset4 {
- margin-left: 430px;
- }
-
- .offset3 {
- margin-left: 330px;
- }
-
- .offset2 {
- margin-left: 230px;
- }
-
- .offset1 {
- margin-left: 130px;
- }
-
- .row-fluid {
- width: 100%;
- *zoom: 1;
- }
-
- .row-fluid:before,
- .row-fluid:after {
- display: table;
- line-height: 0;
- content: "";
- }
-
- .row-fluid:after {
- clear: both;
- }
-
- .row-fluid [class*="span"] {
- display: block;
- float: left;
- width: 100%;
- min-height: 30px;
- margin-left: 1.282051282051282%;
- *margin-left: 2.564102564102564%;
- *margin-left: 2.5109110747408616%;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- }
-
- .row-fluid [class*="span"]:first-child {
- margin-left: 0;
- }
-
- .row-fluid .top-portion{
- width : 100%;
- height : 50px;
- }
- .row-fluid .span12 {
- width: 100%;
- *width: 99.94680851063829%;
- }
-
- .row-fluid .span11 {
- width: 91.45299145299145%;
- *width: 91.39979996362975%;
- }
-
- .row-fluid .span10 {
- width: 82.90598290598291%;
- *width: 82.8527914166212%;
- }
-
- .row-fluid .span9 {
- width: 74.35897435897436%;
- *width: 74.30578286961266%;
- }
-
- .row-fluid .span8 {
- width: 65.81196581196582%;
- *width: 65.75877432260411%;
- }
-
- .row-fluid .span7 {
- width: 57.26495726495726%;
- *width: 57.21176577559556%;
- }
-
- .row-fluid .span6 {
- width: 48.717948717948715%;
- *width: 48.664757228587014%;
- }
-
- .row-fluid .span5 {
- width: 40.17094017094017%;
- *width: 40.11774868157847%;
- }
-
- .row-fluid .span4 {
- width: 31.623931623931625%;
- *width: 31.570740134569924%;
- }
-
- .row-fluid .span3 {
- width: 23.076923076923077%;
- *width: 23.023731587561375%;
- }
-
- .row-fluid .span2 {
- width: 15.811965811965812%;
- *width: 14.52991452991453%;
- *width: 14.476723040552828%;
- }
-
- .row-fluid .span1 {
- width: 5.982905982905983%;
- *width: 5.929714493544281%;
- }
-
- .row-fluid .offset12 {
- margin-left: 105.12820512820512%;
- *margin-left: 105.02182214948171%;
- }
-
- .row-fluid .offset12:first-child {
- margin-left: 102.56410256410257%;
- *margin-left: 102.45771958537915%;
- }
-
- .row-fluid .offset11 {
- margin-left: 96.58119658119658%;
- *margin-left: 96.47481360247316%;
- }
-
- .row-fluid .offset11:first-child {
- margin-left: 94.01709401709402%;
- *margin-left: 93.91071103837061%;
- }
-
- .row-fluid .offset10 {
- margin-left: 88.03418803418803%;
- *margin-left: 87.92780505546462%;
- }
-
- .row-fluid .offset10:first-child {
- margin-left: 85.47008547008548%;
- *margin-left: 85.36370249136206%;
- }
-
- .row-fluid .offset9 {
- margin-left: 79.48717948717949%;
- *margin-left: 79.38079650845607%;
- }
-
- .row-fluid .offset9:first-child {
- margin-left: 76.92307692307693%;
- *margin-left: 76.81669394435352%;
- }
-
- .row-fluid .offset8 {
- margin-left: 70.94017094017094%;
- *margin-left: 70.83378796144753%;
- }
-
- .row-fluid .offset8:first-child {
- margin-left: 68.37606837606839%;
- *margin-left: 68.26968539734497%;
- }
-
- .row-fluid .offset7 {
- margin-left: 62.393162393162385%;
- *margin-left: 62.28677941443899%;
- }
-
- .row-fluid .offset7:first-child {
- margin-left: 59.82905982905982%;
- *margin-left: 59.72267685033642%;
- }
-
- .row-fluid .offset6 {
- margin-left: 53.84615384615384%;
- *margin-left: 53.739770867430444%;
- }
-
- .row-fluid .offset6:first-child {
- margin-left: 51.28205128205128%;
- *margin-left: 51.175668303327875%;
- }
-
- .row-fluid .offset5 {
- margin-left: 45.299145299145295%;
- *margin-left: 45.1927623204219%;
- }
-
- .row-fluid .offset5:first-child {
- margin-left: 42.73504273504273%;
- *margin-left: 42.62865975631933%;
- }
-
- .row-fluid .offset4 {
- margin-left: 36.75213675213675%;
- *margin-left: 36.645753773413354%;
- }
-
- .row-fluid .offset4:first-child {
- margin-left: 34.18803418803419%;
- *margin-left: 34.081651209310785%;
- }
-
- .row-fluid .offset3 {
- margin-left: 28.205128205128204%;
- *margin-left: 28.0987452264048%;
- }
-
- .row-fluid .offset3:first-child {
- margin-left: 25.641025641025642%;
- *margin-left: 25.53464266230224%;
- }
-
- .row-fluid .offset2 {
- margin-left: 19.65811965811966%;
- *margin-left: 19.551736679396257%;
- }
-
- .row-fluid .offset2:first-child {
- margin-left: 17.094017094017094%;
- *margin-left: 16.98763411529369%;
- }
-
- .row-fluid .offset1 {
- margin-left: 11.11111111111111%;
- *margin-left: 11.004728132387708%;
- }
-
- .row-fluid .offset1:first-child {
- margin-left: 8.547008547008547%;
- *margin-left: 8.440625568285142%;
- }
-
- input,
- textarea,
- .uneditable-input {
- margin-left: 0;
- }
-
- .controls-row [class*="span"] + [class*="span"] {
- margin-left: 30px;
- }
-
- input.span12,
- textarea.span12,
- .uneditable-input.span12 {
- width: 1156px;
- }
-
- input.span11,
- textarea.span11,
- .uneditable-input.span11 {
- width: 1056px;
- }
-
- input.span10,
- textarea.span10,
- .uneditable-input.span10 {
- width: 956px;
- }
-
- input.span9,
- textarea.span9,
- .uneditable-input.span9 {
- width: 856px;
- }
-
- input.span8,
- textarea.span8,
- .uneditable-input.span8 {
- width: 756px;
- }
-
- input.span7,
- textarea.span7,
- .uneditable-input.span7 {
- width: 656px;
- }
-
- input.span6,
- textarea.span6,
- .uneditable-input.span6 {
- width: 556px;
- }
-
- input.span5,
- textarea.span5,
- .uneditable-input.span5 {
- width: 456px;
- }
-
- input.span4,
- textarea.span4,
- .uneditable-input.span4 {
- width: 356px;
- }
-
- input.span3,
- textarea.span3,
- .uneditable-input.span3 {
- width: 256px;
- }
-
- input.span2,
- textarea.span2,
- .uneditable-input.span2 {
- width: 156px;
- }
-
- input.span1,
- textarea.span1,
- .uneditable-input.span1 {
- width: 56px;
- }
-
.thumbnails {
margin-left: -30px;
}
@@ -5490,55 +5264,51 @@ i.icon-asterisks {
margin-left: 30px;
}
- .row-fluid .thumbnails {
+ .row .thumbnails {
margin-left: 0;
+ margin-right: 0;
}
-#dashboard-widgets-container{
+ #dashboard-widgets-container{
- #dashboard-widgets{
- .row-fluid .span2p4 {
- width: 19.47%;
- *width: 19.47%;
- }
- .row-fluid .span4p8 {
- width: 39.45%;
- *width: 39.45%;
- }
- .thumbnails > div {
- margin-right: 5px;
- }
- .thumbnail .caption {
- font-size: 14px;
- }
- .thumbnail .hidden-info-two-line {
- font-size: 14px;
- }
- .thumbnail .hidden-info-three-line{
- font-size: 14px;
- }
- .thumbnail .hidden-info-five-line{
- font-size: 12px;
- }
- .thumbnail .hidden-info-six-line{
- font-size: 12px;
- }
- .links .thumbnail .widget-content{
- font-weight: bold;
+ #dashboard-widgets {
+ .span2p4 {
+ float: left;
+ width: 19.47%;
+ *width: 19.47%;
+ }
+ .span4p8 {
+ float: left;
+ width: 39.45%;
+ *width: 39.45%;
+ }
+ .thumbnails > div {
+ margin-right: 5px;
+ }
+ .img-thumbnail {
+ .caption, .hidden-info-two-line, .hidden-info-three-line {
+ font-size: 14px;
+ }
+ .hidden-info-five-line, .hidden-info-six-line {
+ font-size: 12px;
+ }
+ }
+ .links .img-thumbnail {
+ .widget-content {
+ font-weight: bold;
+ font-size: 12px;
+ }
+ }
+ #map-reduce-slots-text{
font-size: 12px;
- }
- .links .thumbnail .link-button{
- padding-left: 100px;
- }
- #map-reduce-slots-text{
- font-size: 12px;
- #map-reduce-slots-bar1{
- margin-left: 11px;
+ #map-reduce-slots-bar1{
+ margin-left: 11px;
+ }
}
}
}
-}
+
.summary-metric-graphs {
[class*="span"] {
float: left;
@@ -5556,7 +5326,7 @@ i.icon-asterisks {
.label.alerts-count {
margin-right: 0;
}
- .icon-laptop {
+ .glyphicon-blackboard {
padding-left: 5px;
}
.health-status-LIVE, .health-status-STARTING,
@@ -5567,7 +5337,14 @@ i.icon-asterisks {
}
}
-.row-fluid .host-component-block {
+@media (max-width: 1200px) {
+ .main-container {
+ width: 940px;
+ padding: 0 15px;
+ }
+}
+
+.row .host-component-block {
.health-icon-block {
width: 6%;
float: left;
@@ -5645,12 +5422,6 @@ input[type="radio"].align-checkbox, input[type="checkbox"].align-checkbox {
}
.manage-configuration-group-popup {
- .modal{
- max-height: 600px;
- }
- .modal-body {
- max-height: 450px;
- }
.group-select {
width: 100%;
height: 250px;
@@ -5755,13 +5526,16 @@ input[type="radio"].align-checkbox, input[type="checkbox"].align-checkbox {
}
td:nth-of-type(2) {
input {
- margin-left: 7px;
- margin-right: 5px;
+ margin-left: 10px;
+ margin-bottom: 1px;
}
}
td:last-of-type {
width: 60%;
text-align: left;
+ span {
+ padding-left: 15px;
+ }
}
tr:last-of-type {
td {
@@ -5779,9 +5553,6 @@ input[type="radio"].align-checkbox, input[type="checkbox"].align-checkbox {
}
.prompt-popup {
- form {
- margin-top: 20px;
- }
.prompt-input {
width: 80px;
}
@@ -5869,13 +5640,13 @@ input[type="radio"].align-checkbox, input[type="checkbox"].align-checkbox {
overflow: hidden;
max-width: 90px;
}
- .icon-ok-sign {
+ .glyphicon-ok-sign {
color: @health-status-green;
}
- .icon-question-sign {
+ .glyphicon-question-sign {
color: @health-status-yellow;
}
- .icon-warning-sign {
+ .glyphicon-warning-sign {
color: #FDB82F;
}
.sorting_asc {
@@ -5930,15 +5701,6 @@ input[type="radio"].align-checkbox, input[type="checkbox"].align-checkbox {
}
}
-.add-property-window {
- .control-label {
- text-align: left;
- }
- .controls {
- margin-left: 140px;
- }
-}
-
@warning-background: #fcf8e3;
@error-background: #f2dede;
@@ -6125,15 +5887,14 @@ input[type="radio"].align-checkbox, input[type="checkbox"].align-checkbox {
.version-labels, .version-info-bar, .version-box {
.label, .badge {
font-weight: normal;
+ font-size: 11px;
}
}
.cluster-check-popup {
- .modal {
- width: 950px;
- margin-left: -475px;
+ .modal-dialog {
#pre-upgrade-check {
- .icon-warning-sign {
+ .glyphicon-warning-sign {
color: @health-status-yellow;
}
pre {
@@ -6172,11 +5933,11 @@ input[type="radio"].align-checkbox, input[type="checkbox"].align-checkbox {
background-color: #FFFFFF;
}
-.accordion {
+.panel {
background-color: #FFFFFF;
}
-.accordion-heading {
+.panel-heading {
background-color: #f0f0f0;
}
@@ -6200,9 +5961,9 @@ input[type="radio"].align-checkbox, input[type="checkbox"].align-checkbox {
}
}
-[class^="icon-"],
-[class*="icon-"] {
- &.icon-blue {
+[class^="glyphicon-"],
+[class*="glyphicon-"] {
+ &.glyphicon .glyphicon-blue {
color: @blue;
}
&:hover {
@@ -6243,15 +6004,6 @@ input[type="radio"].align-checkbox, input[type="checkbox"].align-checkbox {
.select-version-label {
color: #999999;
}
- .btn-primary.disabled:hover{
- cursor: not-allowed;
- }
-}
-#select-stack {
- .tabs-left {
- height: 271px;
- margin-bottom: 5px;
- }
}
.public-disabled-message {
@@ -6289,19 +6041,15 @@ input[type="radio"].align-checkbox, input[type="checkbox"].align-checkbox {
}
}
#select-stack {
- .accordion-heading {
+ .panel-heading {
background-color: #f0f0f0;
font-weight: bold;
p {
margin-bottom: 0;
display: block;
- padding: 8px 15px;
}
}
- .accordion-inner {
- border-top: none;
- }
- .accordion-body {
+ .panel-body {
.version-info-section {
padding: 10px;
}
@@ -6387,11 +6135,6 @@ input[type="radio"].align-checkbox, input[type="checkbox"].align-checkbox {
opacity: 0.7;
}
}
- #use-redhat, #skip-validation {
- input{
- margin: 0 10px;
- }
- }
#use-redhat span.disabled {
opacity: 0.7;
}
@@ -6447,3 +6190,19 @@ input[type="radio"].align-checkbox, input[type="checkbox"].align-checkbox {
}
}
}
+
+#host-configurations-table {
+ tbody {
+ td:first-child {
+ vertical-align: middle;
+ }
+ }
+}
+
+#host-configurations-table {
+ tbody {
+ td:first-child {
+ vertical-align: middle;
+ }
+ }
+}
http://git-wip-us.apache.org/repos/asf/ambari/blob/2a77e39c/ambari-web/app/styles/bootstrap_overrides.less
----------------------------------------------------------------------
diff --git a/ambari-web/app/styles/bootstrap_overrides.less b/ambari-web/app/styles/bootstrap_overrides.less
new file mode 100644
index 0000000..f5536d5
--- /dev/null
+++ b/ambari-web/app/styles/bootstrap_overrides.less
@@ -0,0 +1,72 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Styles for bootstrap-checkbox plugin
+ */
+@bootstrap-success: #5cb85c;
+@bootstrap-info: #5bc0de;
+@bootstrap-warning: #f0ad4e;
+@bootstrap-danger: #d9534f;
+@bootstrap-primary: #337ab7;
+
+.bootstrap-checkbox {
+ @bootstrap-checkbox-disabled-color: #777;
+
+ &.button-checkbox {
+ &.disabled {
+ button.btn-link {
+ color: @bootstrap-checkbox-disabled-color;
+
+ &:hover {
+ color: @bootstrap-checkbox-disabled-color;
+ }
+ }
+ }
+ }
+}
+
+.label {
+ background: #999;
+
+ &.label {
+ &-primary {
+ background-color: @bootstrap-primary;
+ }
+
+ &-success {
+ background-color: @bootstrap-success;
+ }
+
+ &-info {
+ background-color: @bootstrap-info;
+ }
+
+ &-warning {
+ background-color: @bootstrap-warning;
+ }
+
+ &-danger {
+ background-color: @bootstrap-danger;
+ }
+ }
+}
+
+.modal-open {
+ overflow-y: scroll;
+}
http://git-wip-us.apache.org/repos/asf/ambari/blob/2a77e39c/ambari-web/app/styles/common.less
----------------------------------------------------------------------
diff --git a/ambari-web/app/styles/common.less b/ambari-web/app/styles/common.less
index bc11d4d..a053d28 100644
--- a/ambari-web/app/styles/common.less
+++ b/ambari-web/app/styles/common.less
@@ -19,9 +19,13 @@
/************************************************************************
* Health status(service/host/host component health)icons class names
***********************************************************************/
+@health-status-red-icon: glyphicon-warning-sign;
@health-status-red-icon: icon-warning-sign;
+@health-status-green-icon: glyphicon-ok-sign;
@health-status-green-icon: icon-ok-sign;
+@health-status-yellow-icon: glyphicon-question-sign;
@health-status-yellow-icon: icon-question-sign;
+@health-status-orange-icon: glyphicon-minus-sign;
@health-status-orange-icon: icon-minus-sign;
@maintenance-icon: icon-medkit;
/************************************************************************
@@ -313,10 +317,10 @@
line-height: 1.5;
border-radius: 3px;
}
- .icon-remove {
+ .glyphicon-remove {
color: #000000;
}
- .icon-ok {
+ .glyphicon-ok {
color: white;
}
}
@@ -377,13 +381,26 @@
}
.bootstrap-checkbox {
+ @bootstrap-checkbox-disabled-color: #777;
+
+ &.button-checkbox {
+ &.disabled {
+ button.btn-link {
+ color: @bootstrap-checkbox-disabled-color;
+
+ &:hover {
+ color: @bootstrap-checkbox-disabled-color;
+ }
+ }
+ }
+ }
&>button.btn {
&:focus {
border-color: none;
box-shadow: 0;
outline: 0 none;
}
- &.btn-large {
+ &.btn-lg {
padding-top: 6px;
}
}
@@ -406,59 +423,104 @@
font-family: monospace;
word-break: break-all;
word-wrap: break-word;
- white-space: pre;
white-space: pre-wrap;
background-color: #f5f5f5;
- border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.15);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
-.tabs-left, .tabs-right {
+.clear {
+ clear: both;
+}
+
+.noDisplay {
+ display: none !important;
+}
+
+.display {
+ display: block !important;
+}
+
+.display-inline-block {
+ display: inline-block;
+}
+
+.popover {
+ small {
+ font-size: 1.3rem;
+ }
+}
+
+.form-group {
+ .help-block {
+ &.help-inline {
+ margin-bottom: 0;
+ }
+ }
+}
+
+.alert {
+ & > ul, ol {
+ padding-left: inherit;
+ }
+}
+
+.nav-tabs-left, .nav-tabs-right {
border-bottom: none;
padding-top: 2px;
}
-.tabs-left {
+.nav-tabs-left {
border-right: 1px solid #ddd;
}
-.tabs-right {
+.nav-tabs-right {
border-left: 1px solid #ddd;
}
-.tabs-left>li, .tabs-right>li {
+.nav-tabs-left>li, .nav-tabs-right>li {
float: none;
margin-bottom: 2px;
}
-.tabs-left>li {
+.nav-tabs-left>li {
margin-right: -1px;
}
-.tabs-right>li {
+.nav-tabs-right>li {
margin-left: -1px;
}
-.tabs-left>li>a:hover,
-.tabs-left>li>a:focus {
+.nav-tabs-left>li>a:hover,
+.nav-tabs-left>li>a:focus {
border-bottom-color: transparent;
}
-.tabs-left>li.active>a,
-.tabs-left>li.active>a:hover,
-.tabs-left>li.active>a:focus {
+.nav-tabs-left>li.active>a,
+.nav-tabs-left>li.active>a:hover,
+.nav-tabs-left>li.active>a:focus {
border-bottom-color: #ddd;
border-right-color: transparent;
}
-.tabs-right>li.active>a,
-.tabs-right>li.active>a:hover,
-.tabs-right>li.active>a:focus {
+.nav-tabs-right>li.active>a,
+.nav-tabs-right>li.active>a:hover,
+.nav-tabs-right>li.active>a:focus {
border-bottom: 1px solid #ddd;
border-left-color: transparent;
}
-.tabs-left>li>a {
+.nav-tabs-left>li>a {
border-radius: 4px 0 0 4px;
margin-right: 0;
display:block;
}
-.tabs-right>li>a {
+.nav-tabs-right>li>a {
border-radius: 0 4px 4px 0;
margin-right: 0;
-}
\ No newline at end of file
+}
+
+.checkbox {
+ &.checkbox-row {
+ margin: 0;
+ }
+}
+
+.dropdown-toggle.btn-icon {
+ padding-left: 8px;
+ padding-right: 8px;
+}
http://git-wip-us.apache.org/repos/asf/ambari/blob/2a77e39c/ambari-web/app/styles/config_history_flow.less
----------------------------------------------------------------------
diff --git a/ambari-web/app/styles/config_history_flow.less b/ambari-web/app/styles/config_history_flow.less
index 0b6dc3f..a9d8a2d 100644
--- a/ambari-web/app/styles/config_history_flow.less
+++ b/ambari-web/app/styles/config_history_flow.less
@@ -32,9 +32,9 @@
}
}
.version-info-bar {
- width: 960px;
- .label-current.icon-ok {
- padding: 6px 5px !important;
+ .label-current .glyphicon-ok {
+ display: inline;
+ color: #fff;
}
}
}
@@ -42,12 +42,6 @@
.dependencies-info-bar-wrapper {
z-index: 2;
margin: 0;
- width: 757px;
-}
-@media (min-width: 1200px) {
- .dependencies-info-bar-wrapper {
- width: 970px;
- }
}
#config_history_flow {
@@ -76,7 +70,7 @@
font-size: 11px;
.top-label {
min-width: 20px;
- padding: 0 2px;
+ padding: 3px 2px;
}
.author,
.content {
@@ -96,7 +90,7 @@
}
.current-label {
text-align: center;
- padding: 2px 5px;
+ padding: 5px 5px;
}
.stack-label {
margin-right: 6px;
@@ -111,7 +105,7 @@
left: -45px;
z-index: 1000;
float: left;
- width: 300px;
+ width: 370px;
padding: 8px;
list-style: none;
background-color: #ffffff;
@@ -170,7 +164,7 @@
}
.first {
width: 14%;
- margin-left: 0;
+ margin-left: 10px;
.arrow-box {
display: none;
}
@@ -179,16 +173,16 @@
}
}
- .icon-chevron-box {
- margin-top: 15px;
+ .glyphicon-chevron-box {
+ margin-top: 8px;
width: 4%;
cursor: pointer;
- .icon-chevron-right,
- .icon-chevron-left{
+ .glyphicon-chevron-right,
+ .glyphicon-chevron-left{
color: #d2d9dd;
}
- .icon-chevron-left:hover,
- .icon-chevron-right:hover{
+ .glyphicon-chevron-left:hover,
+ .glyphicon-chevron-right:hover{
color: #808080;
}
&.disabled {
@@ -199,13 +193,8 @@
.version-info-bar-wrapper {
margin: 0;
z-index: 3;
- width: 747px;
- }
- @media (min-width: 1200px) {
- .version-info-bar-wrapper {
- width: 960px;
- }
}
+
.version-info-bar {
background-image: -moz-linear-gradient(top, @top-nav-bg-color-from, @top-nav-bg-color-to);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@top-nav-bg-color-from), to(@top-nav-bg-color-to));
@@ -219,13 +208,12 @@
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
- margin: 5px 0;
padding: 5px;
- width: 100%;
- .icon-remove-circle {
+ .glyphicon-remove-circle {
color: #ffffff;
- margin-left: 10px;
+ font-size: 1.5em;
+ padding-top: 4px;
margin-top: 0px;
display: inline-block;
cursor: pointer;
@@ -236,7 +224,7 @@
color: #d3d3d3;
.label {
font-size: 14px;
- padding: 5px;
+ padding: 4px;
}
}
@@ -247,7 +235,6 @@
z-index: 1000;
float: left;
min-width: 400px;
- height: 300px;
overflow: hidden;
overflow-y: scroll;
padding: 5px 0;
@@ -265,8 +252,9 @@
margin-top: 4px !important;
font-size: 13px;
li {
+ height:35px;
line-height: 12px;
- .icon-caret-right {
+ .glyphicon-caret-right {
font-size: 18px;
margin-right: 20px;
}
@@ -280,7 +268,7 @@
// the version which is displayed
cursor: not-allowed;
color: #808080;
- .icon-caret-right,
+ .glyphicon-caret-right,
.dropdown-menu {
display: none;
}
@@ -291,7 +279,7 @@
color: #808080;
}
- div.row-fluid, a {
+ div.row, a {
padding-left: 10px;
}
}
@@ -364,13 +352,13 @@
thead {
background: none repeat scroll 0 0 #F8F8F8;
}
+ .filter-input-width{
+ width: ~"calc(100% - 20px)";
+ }
// service name column
th:first-child,
td:first-child {
width: 15%;
- select.filter-input-width{
- width: 75%;
- }
}
// config group, create time columns
th:first-child + th,
@@ -379,25 +367,16 @@
td:first-child + td + td {
width: 20%;
word-wrap: break-word;
- select.filter-input-width{
- width: 75%;
- }
}
// author column
th:first-child + th + th + th,
td:first-child + td + td + td {
width: 180px;
- input.filter-input-width {
- width: 55%;
- }
}
// notes column
th:first-child + th + th + th + th,
td:first-child + td + td + td + td {
word-wrap: break-word;
- input.filter-input-width {
- width: 75%;
- }
}
td.notes .show-more-button {
font-size: @default-font-size - 1;
http://git-wip-us.apache.org/repos/asf/ambari/blob/2a77e39c/ambari-web/app/styles/enhanced_service_dashboard.less
----------------------------------------------------------------------
diff --git a/ambari-web/app/styles/enhanced_service_dashboard.less b/ambari-web/app/styles/enhanced_service_dashboard.less
index 07dacf6..e783c52 100644
--- a/ambari-web/app/styles/enhanced_service_dashboard.less
+++ b/ambari-web/app/styles/enhanced_service_dashboard.less
@@ -31,7 +31,7 @@
-webkit-border-radius: 0;
-moz-border-radius: 0;
background-image: none;
- .icon-plus {
+ .glyphicon-plus {
font-size: 70px;
color: #ccc;
}
@@ -75,10 +75,12 @@
width: 19.3%;
background-color: white;
margin: 5px 0 5px 5px;
+ float: left;
}
.widget {
- .thumbnail {
+ .img-thumbnail {
position: relative;
+ box-sizing: content-box;
}
.spinner {
margin: 55px auto;
@@ -123,6 +125,7 @@
.content {
padding-top: 30px;
height: 50px;
+ box-sizing: content-box;
overflow: hidden;
text-overflow: ellipsis;
}
@@ -191,7 +194,7 @@
#widget-preview {
max-width: 200px;
.widget {
- .thumbnail .corner-icon {
+ .img-thumbnail .corner-icon {
display: none;
}
.graph-widget {
@@ -204,10 +207,11 @@
#widget_layout {
.widget {
- .thumbnail {
+ .img-thumbnail {
+ box-sizing: content-box;
.corner-icon {
display: none;
- .icon-remove-sign{
+ .glyphicon-remove-sign{
color: #000000;
text-shadow: #fff 0 0 15px;
position: absolute;
@@ -244,9 +248,6 @@
text-decoration: none;
z-index: 9;
}
- .caption{
- margin-left: -10px;
- }
}
& .hidden-description{
display: none;
@@ -268,7 +269,7 @@
}
}
}
- .thumbnail .chart-legend {
+ .img-thumbnail .chart-legend {
.description-line {
padding: 3px 3px 8px 8px;
line-height: 16px;
@@ -293,21 +294,21 @@
font-weight: bold;
word-wrap: break-word;
white-space: pre-wrap;
- overflow-y: scroll;
+ overflow-y: auto;
}
#edit-widget-wizard,
#add-widget-wizard {
#add-widget-step1 {
.widgets-info-container {
- .span6.widget-info-section {
+ .col-md-6.widget-info-section {
width: 44%;
height: 115px;
margin: 5px 15px;
padding-top: 10px;
padding-left: 5px;
}
- .span6.widget-info-section:hover {
+ .col-md-6.widget-info-section:hover {
background-color: #eee;
cursor: pointer;
.icon {
@@ -350,12 +351,8 @@
.control-label {
width: auto;
}
- .controls {
- margin-left: 130px;
- line-height: 40px;
- .threshold-input {
- width: 100px;
- }
+ .threshold-input {
+ width: 100px;
}
}
.template.error {
@@ -393,11 +390,11 @@
bottom: 10px;
position: absolute;
}
- .icon-asterisk {
+ .glyphicon-asterisk {
color: red;
font-size: 8px;
}
- .is-invalid.controls,
+ .is-invalid,
.metric-container.is-invalid {
.metric-field {
border-color: @invalid-color;
@@ -420,7 +417,7 @@
}
.add-number {
margin-left: 40px;
- .add-on {
+ .input-group-addon {
height: inherit;
}
}
@@ -449,7 +446,7 @@
top: 0;
text-decoration: none;
display: none;
- .icon-remove {
+ .glyphicon-remove {
color: #A69B9B;
font-size: 12px;
}
@@ -460,15 +457,7 @@
display: inline-block;
}
}
- .controls {
- background-color: #f5f5f5;
- padding: 0 5px;
- border: 1px @border-color solid;
- margin-right: 20px;
- float: right;
- border-top: none;
- }
- .controls.is-invalid {
+ .is-invalid {
border-color: @invalid-color;
}
.add-item-input {
@@ -521,13 +510,13 @@
.step3 {
form {
margin: 50px 0;
- .row-fluid {
+ .row {
line-height: 30px;
margin: 10px 0;
.title {
text-align: right;
}
- .icon-asterisk {
+ .glyphicon-asterisk {
color: red;
font-size: 8px;
margin-left: 2px;
@@ -541,7 +530,7 @@
width: 320px;
height: 75px;
}
- .span10.error {
+ .col-md-10.error {
.ember-text-field,
.ember-text-area{
border: 1px solid #b94a48;
@@ -563,10 +552,7 @@
width: 240px;
max-height: 123px;
padding: 0;
- border-bottom: 200px transparent solid;
- border-right: 150px transparent solid;
- border-left: none;
- border-top: none;
+ border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
@@ -646,9 +632,8 @@
}
-.sixty-percent-width-modal.widgets-browser-popup {
+.widgets-browser-popup {
.modal {
- max-height: 600px;
position: fixed;
.modal-body {
padding-top: 0;
@@ -656,7 +641,7 @@
max-height: 460px;
}
}
-
+
#widget-browser-popup {
min-width: 750px;
max-width: 900px;
@@ -687,14 +672,14 @@
#widgets-info {
padding-top: 40px;
.widgets-info-container {
- .span6.widget-info-section {
+ .col-md-6.widget-info-section {
width: 44%;
height: 115px;
margin: 5px 15px;
padding-top: 10px;
padding-left: 5px;
}
- .span6.widget-info-section:hover {
+ .col-md-6.widget-info-section:hover {
background-color: #eee;
.icon {
background-color: white;
@@ -749,7 +734,7 @@
.added-btn.btn {
margin-left: 63px;
width: 85px;
- .icon-ok {
+ .glyphicon-ok {
color: #468847;
}
}
@@ -766,5 +751,3 @@
}
}
}
-
-
http://git-wip-us.apache.org/repos/asf/ambari/blob/2a77e39c/ambari-web/app/styles/log_file_search.less
----------------------------------------------------------------------
diff --git a/ambari-web/app/styles/log_file_search.less b/ambari-web/app/styles/log_file_search.less
index cf5ef29..0cbd52c 100644
--- a/ambari-web/app/styles/log_file_search.less
+++ b/ambari-web/app/styles/log_file_search.less
@@ -98,7 +98,7 @@
padding-bottom: 400px;
text-align: center;
- .icon-external-link,
+ .glyphicon-external-link,
.move-to-top,
.move-to-bottom {
display: block;
@@ -113,7 +113,7 @@
line-height: 18px;
}
- .icon-external-link {
+ .glyphicon-external-link {
margin-top: 5px;
font-size: 20px;
padding-left: 4px;