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;
