[PATCH] [new-ui] Added SCSS assets
From: samhenri <samuel.guimaraes@eldorado.org.br> This patch updates the UI build process to use python-libsass to compile SCSS files. It also includes the latest changes in the new-ui CSS (these changes will only take effect only when the patches for each panel is sent to the ML and ginger.css and host-admin.css were deleted from local branch) samhenri (1): [new-ui] Added SCSS assets .gitignore | 1 + ui/css/Makefile.am | 12 +- ui/css/ginger.css | 1 - ui/css/host-admin.css | 586 ------------------------------- ui/css/src/ginger.scss | 1 + ui/css/src/host-admin.scss | 595 ++++++++++++++++++++++++++++++++ ui/css/src/modules/_administration.scss | 372 ++++++++++++++++++++ 7 files changed, 976 insertions(+), 592 deletions(-) delete mode 100644 ui/css/ginger.css delete mode 100644 ui/css/host-admin.css create mode 100644 ui/css/src/ginger.scss create mode 100644 ui/css/src/host-admin.scss create mode 100644 ui/css/src/modules/_administration.scss -- 1.9.3
From: samhenri <samuel.guimaraes@eldorado.org.br> Signed-off-by: samhenri <samuel.guimaraes@eldorado.org.br> --- .gitignore | 1 + ui/css/Makefile.am | 12 +- ui/css/ginger.css | 1 - ui/css/host-admin.css | 586 ------------------------------- ui/css/src/ginger.scss | 1 + ui/css/src/host-admin.scss | 595 ++++++++++++++++++++++++++++++++ ui/css/src/modules/_administration.scss | 372 ++++++++++++++++++++ 7 files changed, 976 insertions(+), 592 deletions(-) delete mode 100644 ui/css/ginger.css delete mode 100644 ui/css/host-admin.css create mode 100644 ui/css/src/ginger.scss create mode 100644 ui/css/src/host-admin.scss create mode 100644 ui/css/src/modules/_administration.scss diff --git a/.gitignore b/.gitignore index 64cfd7b..3988905 100644 --- a/.gitignore +++ b/.gitignore @@ -26,3 +26,4 @@ po/*.gmo tests/run_tests.sh rpm ui/pages/help/*/*.html +ui/css/*.css diff --git a/ui/css/Makefile.am b/ui/css/Makefile.am index 6b7ae2d..010266d 100644 --- a/ui/css/Makefile.am +++ b/ui/css/Makefile.am @@ -1,7 +1,7 @@ # # Project Ginger # -# Copyright IBM, Corp. 2014 +# Copyright IBM, Corp. 2014-2015 # # Licensed under the Apache License, Version 2.0 (the "License"); # you may not use this file except in compliance with the License. @@ -18,8 +18,10 @@ SUBDIRS = base cssdir = $(datadir)/wok/plugins/ginger/ui/css +dist_css_DATA = ginger.css host-admin.css + + +%.css: src/%.scss + echo "Compiling .scss file $<" + sassc -s expanded $< $(@:.scss=.css) -dist_css_DATA = \ - ginger.css \ - host-admin.css \ - $(NULL) diff --git a/ui/css/ginger.css b/ui/css/ginger.css deleted file mode 100644 index 9f7be33..0000000 --- a/ui/css/ginger.css +++ /dev/null @@ -1 +0,0 @@ -@import url("host-admin.css"); diff --git a/ui/css/host-admin.css b/ui/css/host-admin.css deleted file mode 100644 index 8daee8d..0000000 --- a/ui/css/host-admin.css +++ /dev/null @@ -1,586 +0,0 @@ -/* - * Copyright IBM Corp, 2015 - * - * This library is free software; you can redistribute it and/or - * modify it under the terms of the GNU Lesser General Public - * License as published by the Free Software Foundation; either - * version 2.1 of the License, or (at your option) any later version. - * - * This library is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU - * Lesser General Public License for more details. - * - * You should have received a copy of the GNU Lesser General Public - * License along with this library; if not, write to the Free Software - * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA - */ - -.ginger .host-admin { - font-size: 12px; - font-weight: bold; - margin: 10px; -} - -.ginger .host-admin h3 { - font-weight: bold; - font-size: 14px; - border-radius: 2px 2px 0 0; -} - -.ginger .host-admin .content-area { - background: linear-gradient(to bottom, #FFFFFF 0%, #E5E5E5 100%) repeat scroll 0 0 transparent; - border-radius: 0px 0px 2px 2px; - color: #666666; -} - -.ginger .host-admin .content-area .section { - margin: 10px; -} - -.ginger .host-admin .content-area .section .firmware-ver { - margin-left: 10px; -} - -.ginger .host-admin .content-area .section .pack-path-label { - display: inline-block; - vertical-align: top; -} - -.ginger .host-admin .content-area .section .pack-path-content { - display: inline-block; - margin: 0 10px 0 13px; -} - -.ginger .host-admin .content-area .section .pack-path-input { - width: 400px; - height:30px; - border: 1px solid grey; -} - -.ginger .host-admin .message-area { - display: inline-block; - background-color: #CCFFFF; - border-radius: 5px 5px 5px 5px; - margin-bottom: 10px; - padding: 10px 40px 10px 10px; - font-weight: normal; - font-size: 14px; -} - -.ginger .host-admin .progress-icon { - background-image: url("base/images/progress48.gif"); - display: inline-block; - background-size: 20px 20px; - width: 20px; - height: 20px; - margin-right: 10px; - vertical-align: middle; -} - -.ginger .host-admin .progress-icon-sensor { - background: url("base/images/progress48.gif") center no-repeat; - height: 50px; - margin-top: 20px; -} - -.ginger .host-admin input.invalid-field[type="text"] { - border: 1px solid #FF4444 !important; - padding: 2px; -} - -.ginger .host-admin .input-hint-icon { - background-image: url("base/images/ui-icons_888888_256x240.png"); - display: inline-block; -} - -.ginger .host-admin .input-hint { - font-weight: normal; - margin-top: 1px; -} - -.ginger .host-admin .input-hint-text { - vertical-align: top; -} - -.ginger .host-admin button{ - font-weight: bold; - height: 35px; - width: 80px; - vertical-align: top; -} - -.ginger .host-admin .content-area .action-bar { - height: 30px; - position: relative; -} - -.ginger .host-admin .content-area .action-bar .item { - float: right; -} - -.ginger .host-admin .content-area .action-bar .item:not(:first-child) { - margin-right: 5px; -} - -.ginger .host-admin .content-area .bak-grid-header { - margin: 20px 0 10px 0px; - font-size: 14px; - border-bottom: 1px solid #AAAAAA; -} - -.ginger .host-admin .content-area .bak-grid-item { - padding: 5px 0; - font-weight: normal; - cursor: pointer; -} - -.ginger .host-admin .content-area .cell { - display: inline-block; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - padding-right: 20px; -} - -.ginger .host-admin .content-area .file-col { - width: 530px; - max-width: 530px; -} - -.ginger .host-admin .content-area .file-col:hover { - text-decoration: underline; -} - -.ginger .host-admin .content-area .time-col { - width: 300px; - max-width: 300px; -} - -.ginger .host-admin .content-area .time-col:hover { - text-decoration: underline; -} - -.ginger .host-admin .content-area .bak-grid-body { - margin-bottom: 20px; - min-height: 50px; -} - -.ginger .host-admin .content-area .bak-grid-body .cell { - vertical-align: middle; - text-overflow: ellipsis; -} - -.ginger .host-admin .content-area .bak-grid-body .act-button { - height: 20px; - width: 20px; - padding-right: 0; -} - -.ginger-dialog { - display: none; - margin: 20px; - font-size: 12px; -} - -.ginger-dialog input.invalid-field[type="text"] { - border: 1px solid #FF4444 !important; -} - -.ginger-dialog input.invalid-field[type="text"][disabled] { - border: 1px solid #aaaaaa !important; -} - -.ginger-dialog .del-option { - height: 25px; - margin-bottom: 5px; -} - -.ginger-dialog .del-option input[type="radio"] { - margin-bottom: 7px; - margin-right: 5px; - vertical-align: middle; -} - -.ginger-dialog .del-option input[type="text"] { - width: 50px; - vertical-align: middle; -} - -.ginger-dialog .crt-bak-section { - height: 25px; - margin-bottom: 10px; -} - -.ginger-dialog .crt-bak-section .desc { - width: 500px; -} - -.ginger-dialog .crt-bak-section .path-pick { - display: inline-block; - width: 49%; - float: left; - margin-right: 5px; -} - -.ginger-dialog .crt-bak-section .path-pick .box { - height: 350px; - border: 1px solid grey; - border-radius: 3px; -} - -.ginger-dialog .crt-bak-section .path-pick .box .path-item { - margin: 5px; -} - -.ginger-dialog .crt-bak-section .path-pick .box .path-item input { - vertical-align: bottom; - width: 260px; - margin-right: 5px; -} - -.ginger-dialog .crt-bak-section .path-pick .box .path-item button { - height: 20px; -} - -.ui-tooltip { - width: ""; - display: inline-block; - max-width: 100%; -} - -.ginger-dialog .ui-tooltip-content { - width: 600px; - padding: 10px 0 20px 20px; - overflow: hidden; -} - -.ginger-dialog .ui-tooltip-content .header { - font-weight: bold; -} - -.ginger-dialog .ui-tooltip-content .sub-content { - padding: 10px; - margin-bottom: 10px; -} - -.ginger-dialog .ui-tooltip-content .sub-content .path-item { - padding-bottom: 10px; -} - -.ginger .host-admin .nw-config { - min-height: 170px; - padding-bottom: 30px; -} - -.ginger .host-admin .nw-config .pane { - display: inline-block; - float: left; - margin-top: 5px; - padding-bottom: 5px; -} - -.ginger .host-admin .nw-config .pane .sec-label { - margin-bottom: 3px; - text-decoration: underline; -} - -.ginger .host-admin .nw-config .pane .sec-content { - padding: 10px 10px 0px 10px; -} - -.ginger .host-admin .nw-config .pane .vertical-separator { - margin-bottom: 20px; -} - -.ginger .host-admin .nw-config .interface { - width: 60%; -} - -.ginger .host-admin .nw-config .interface .sec-content { - padding-right: 40px; -} - -.ginger .host-admin .nw-config .interface .cell { - display: inline-block; - padding-right: 0px; - vertical-align: middle; -} - -.ginger .host-admin .nw-config .interface .name { - width: 150px; -} - -.ginger .host-admin .nw-config .interface .ip { - width: 140px; -} - -.ginger .host-admin .nw-config .interface .mask { - width: 140px; -} - -.ginger .host-admin .nw-config .interface .grid-head { - margin-bottom: 10px; - color:#888888; - border-bottom: solid 1px #BBBBBB; -} - -.ginger .host-admin .nw-config .interface .grid-body { - font-weight: normal; -} - -.ginger .host-admin .nw-config .interface .grid-body input { - width: 120px; -} - -.ginger .host-admin .nw-config .interface .item { - margin-bottom: 5px; - overflow: hidden; -} - -.ginger .host-admin .nw-config .interface .action-area { - float: right; - padding-right: 5px; -} - -.ginger .host-admin .nw-config .global { - width: 30%; - margin-left: 30px; -} - -.ginger .host-admin .nw-config .global input { - width: 200px; - margin-right: 5px; - vertical-align: middle; -} - -.ginger .host-admin .nw-config .global .addBtn { - float: right; - margin-right: 40px; - border-radius: 10px; -} - -.ginger .host-admin .nw-config button { - width: 20px; - height: 20px; - vertical-align: middle; -} - -.ginger .hide { - display: none; -} - -.ginger .host-admin .pw-opt { - padding: 10px; -} - -.ginger .host-admin .pw-opt .header { - padding-left: 5px; - padding-right: 30px; - margin-bottom: 20px; - overflow: hidden; -} - -.ginger .host-admin .pw-opt .header .legend { - display: inline-block; - vertical-align: middle; - margin-right: 2px; - font-weight: normal; -} - -.ginger .host-admin .pw-opt .header .separator { - margin-right: 15px; -} - -.ginger .host-admin .pw-opt .header #progressIndicator { - float: right; - margin-top: 2px; -} - -.ginger .host-admin .pw-opt .header .actBtn { - float: right; -} - -.ginger .host-admin .pw-opt .body .item { - display: inline-block; - width: 33%; -} - -.ginger .host-admin .pw-opt .body .item span { - display: inline-block; - vertical-align: middle; - margin: 3px; -} - -.ginger .host-admin .pw-opt .body .item .to-select:hover { - text-decoration: underline; - cursor: pointer; -} - -.ginger .host-admin .san-adapter { - padding-right: 0px; -} - -.ginger .host-admin .san-adapter .head { - margin-bottom: 10px; -} - -.ginger .host-admin .san-adapter .body { - font-weight: normal; -} - -.ginger .host-admin .san-adapter .item { - margin-bottom: 5px; -} - -.ginger .host-admin .sensor-panel { - min-height: 100px; - max-height: 170px; -} - -.ginger .host-admin .sensor-inline { - display: inline-block; - margin-left: 20px; - vertical-align: top; -} - -.ginger .host-admin .sensor-head { - margin-top: 15px; - font-weight: bold; - font-size: 14px; -} - -.ginger .host-admin .sensor-inline .sensor-body { - font-weight: normal; - font-size: 12px; -} - -.ginger .host-admin .subsc-manage .content-body .subsc-item { - height: 25px; - margin: 2px 0; -} - -.ginger .host-admin .subsc-manage .content-header { - border-bottom: 1px solid #aaa; - height: 22px; -} - -.ginger .host-admin .subsc-manage .content-header>span { - display: inline-block; - width: 230px; -} - -.ginger .host-admin .subsc-manage button { - width: 20px; - height: 20px; - float: right; -} - -.ginger .host-admin .subsc-manage .content-body .subsc-manage-column { - display: inline-block; - width: 230px; - font-weight: 400; -} - -.ginger .host-admin .subsc-manage .status-header .sep-dot-active { - display: inline-block; - height: 16px; - width: 16px; - border-radius: 8px; - vertical-align: middle; -} - -.ginger .host-admin .subsc-manage .status-header .up { - background: linear-gradient(to bottom, #BFD255 0%, #8EB92A 50%, - #72AA00 51%, #9ECB2D 100%) repeat scroll 0 0 transparent; -} - -.ginger .host-admin .subsc-manage .status-header .down { - background: linear-gradient(to bottom, #AFAFAF 0%, #AFAFAF 50%, - #AFAFAF 51%, #AFAFAF 100%) repeat scroll 0 0 transparent; -} - -#subscriptionAdd .subsc-colume { - display: inline-block; -} - -#subscriptionAdd .subsc-add-label>div { - margin-top: 14px; -} - -#subscriptionAdd .subsc-add-content .subsc-input { - margin: 7px 0 0 3px; -} - -#subscriptionAdd .subsc-manage-footer { - float: right; - margin-top: 20px; -} - -.ginger .host-admin .subsc-manage .status-header { - margin-bottom: 10px; -} - -.ginger .host-admin .subsc-manage .status-header .sep-label { - display: inline-block; - margin-right: 10px; - vertical-align: middle; -} - -.ginger .host-admin .subsc-manage .status-header .sep-buttons { - display: inline-block; - margin-left: 10px; -} - -.ginger .host-admin .subsc-manage .status-header .actBtn { - min-width: 90px; -} - -.ginger .host-admin .user-manage .content-header { - border-bottom: 1px solid #aaa; - height: 22px; -} - -.ginger .host-admin .user-manage .content-header>span { - display: inline-block; - width: 230px; -} - -.ginger .host-admin .user-manage button { - width: 20px; - height: 20px; - float: right; -} - -.ginger .host-admin .user-manage .content-body .user-item { - height: 25px; - margin: 2px 0; -} - -.ginger .host-admin .user-manage .content-body .user-manage-column { - display: inline-block; - width: 230px; - font-weight: 400; -} - -#hostUserAdd .user-colume { - display: inline-block; -} - -#hostUserAdd .user-add-label>div { - margin-top: 14px; -} - -#hostUserAdd .user-add-content .user-input { - margin: 7px 0 0 3px; -} - -#hostUserAdd .user-manage-footer { - position: absolute; - bottom: 10px; - right: 10px; -} - -.user-add-body .user-add-content .enable-combobox { - vertical-align: middle; -} diff --git a/ui/css/src/ginger.scss b/ui/css/src/ginger.scss new file mode 100644 index 0000000..9f7be33 --- /dev/null +++ b/ui/css/src/ginger.scss @@ -0,0 +1 @@ +@import url("host-admin.css"); diff --git a/ui/css/src/host-admin.scss b/ui/css/src/host-admin.scss new file mode 100644 index 0000000..599a360 --- /dev/null +++ b/ui/css/src/host-admin.scss @@ -0,0 +1,595 @@ +/* + * Copyright IBM Corp, 2015 + * + * This library is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 2.1 of the License, or (at your option) any later version. + * + * This library is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public + * License along with this library; if not, write to the Free Software + * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA + */ + +// Core variables +@import "../../../../../../../ui/css/src/modules/wok-variables"; + +// Compass Mixins +@import "../../../../../../../ui/css/src/vendor/compass-mixins/lib/compass"; + +.ginger .host-admin { + font-size: 12px; + font-weight: bold; + margin: 10px; +} + +.ginger .host-admin h3 { + font-weight: bold; + font-size: 14px; + border-radius: 2px 2px 0 0; +} + +.ginger .host-admin .content-area { + background: linear-gradient(to bottom, #FFFFFF 0%, #E5E5E5 100%) repeat scroll 0 0 transparent; + border-radius: 0px 0px 2px 2px; + color: #666666; +} + +.ginger .host-admin .content-area .section { + margin: 10px; +} + +.ginger .host-admin .content-area .section .firmware-ver { + margin-left: 10px; +} + +.ginger .host-admin .content-area .section .pack-path-label { + display: inline-block; + vertical-align: top; +} + +.ginger .host-admin .content-area .section .pack-path-content { + display: inline-block; + margin: 0 10px 0 13px; +} + +.ginger .host-admin .content-area .section .pack-path-input { + width: 400px; + height:30px; + border: 1px solid gray; +} + +.ginger .host-admin .message-area { + display: inline-block; + background-color: #CCFFFF; + border-radius: 5px 5px 5px 5px; + margin-bottom: 10px; + padding: 10px 40px 10px 10px; + font-weight: normal; + font-size: 14px; +} + +.ginger .host-admin .progress-icon { + background-image: url("base/images/progress48.gif"); + display: inline-block; + background-size: 20px 20px; + width: 20px; + height: 20px; + margin-right: 10px; + vertical-align: middle; +} + +.ginger .host-admin .progress-icon-sensor { + background: url("base/images/progress48.gif") center no-repeat; + height: 50px; + margin-top: 20px; +} + +.ginger .host-admin input.invalid-field[type="text"] { + border: 1px solid #FF4444 !important; + padding: 2px; +} + +.ginger .host-admin .input-hint-icon { + background-image: url("base/images/ui-icons_888888_256x240.png"); + display: inline-block; +} + +.ginger .host-admin .input-hint { + font-weight: normal; + margin-top: 1px; +} + +.ginger .host-admin .input-hint-text { + vertical-align: top; +} + +.ginger .host-admin button{ + font-weight: bold; + height: 35px; + width: 80px; + vertical-align: top; +} + +.ginger .host-admin .content-area .action-bar { + height: 30px; + position: relative; +} + +.ginger .host-admin .content-area .action-bar .item { + float: right; +} + +.ginger .host-admin .content-area .action-bar .item:not(:first-child) { + margin-right: 5px; +} + +.ginger .host-admin .content-area .bak-grid-header { + margin: 20px 0 10px 0px; + font-size: 14px; + border-bottom: 1px solid #AAAAAA; +} + +.ginger .host-admin .content-area .bak-grid-item { + padding: 5px 0; + font-weight: normal; + cursor: pointer; +} + +.ginger .host-admin .content-area .cell { + display: inline-block; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + padding-right: 20px; +} + +.ginger .host-admin .content-area .file-col { + width: 530px; + max-width: 530px; +} + +.ginger .host-admin .content-area .file-col:hover { + text-decoration: underline; +} + +.ginger .host-admin .content-area .time-col { + width: 300px; + max-width: 300px; +} + +.ginger .host-admin .content-area .time-col:hover { + text-decoration: underline; +} + +.ginger .host-admin .content-area .bak-grid-body { + margin-bottom: 20px; + min-height: 50px; +} + +.ginger .host-admin .content-area .bak-grid-body .cell { + vertical-align: middle; + text-overflow: ellipsis; +} + +.ginger .host-admin .content-area .bak-grid-body .act-button { + height: 20px; + width: 20px; + padding-right: 0; +} + +.ginger-dialog { + display: none; + margin: 20px; + font-size: 12px; +} + +.ginger-dialog input.invalid-field[type="text"] { + border: 1px solid #FF4444 !important; +} + +.ginger-dialog input.invalid-field[type="text"][disabled] { + border: 1px solid #aaaaaa !important; +} + +.ginger-dialog .del-option { + height: 25px; + margin-bottom: 5px; +} + +.ginger-dialog .del-option input[type="radio"] { + margin-bottom: 7px; + margin-right: 5px; + vertical-align: middle; +} + +.ginger-dialog .del-option input[type="text"] { + width: 50px; + vertical-align: middle; +} + +.ginger-dialog .crt-bak-section { + height: 25px; + margin-bottom: 10px; +} + +.ginger-dialog .crt-bak-section .desc { + width: 500px; +} + +.ginger-dialog .crt-bak-section .path-pick { + display: inline-block; + width: 49%; + float: left; + margin-right: 5px; +} + +.ginger-dialog .crt-bak-section .path-pick .box { + height: 350px; + border: 1px solid grey; + border-radius: 3px; +} + +.ginger-dialog .crt-bak-section .path-pick .box .path-item { + margin: 5px; +} + +.ginger-dialog .crt-bak-section .path-pick .box .path-item input { + vertical-align: bottom; + width: 260px; + margin-right: 5px; +} + +.ginger-dialog .crt-bak-section .path-pick .box .path-item button { + height: 20px; +} + +.ui-tooltip { + width: ""; + display: inline-block; + max-width: 100%; +} + +.ginger-dialog .ui-tooltip-content { + width: 600px; + padding: 10px 0 20px 20px; + overflow: hidden; +} + +.ginger-dialog .ui-tooltip-content .header { + font-weight: bold; +} + +.ginger-dialog .ui-tooltip-content .sub-content { + padding: 10px; + margin-bottom: 10px; +} + +.ginger-dialog .ui-tooltip-content .sub-content .path-item { + padding-bottom: 10px; +} + +.ginger .host-admin .nw-config { + min-height: 170px; + padding-bottom: 30px; +} + +.ginger .host-admin .nw-config .pane { + display: inline-block; + float: left; + margin-top: 5px; + padding-bottom: 5px; +} + +.ginger .host-admin .nw-config .pane .sec-label { + margin-bottom: 3px; + text-decoration: underline; +} + +.ginger .host-admin .nw-config .pane .sec-content { + padding: 10px 10px 0px 10px; +} + +.ginger .host-admin .nw-config .pane .vertical-separator { + margin-bottom: 20px; +} + +.ginger .host-admin .nw-config .interface { + width: 60%; +} + +.ginger .host-admin .nw-config .interface .sec-content { + padding-right: 40px; +} + +.ginger .host-admin .nw-config .interface .cell { + display: inline-block; + padding-right: 0px; + vertical-align: middle; +} + +.ginger .host-admin .nw-config .interface .name { + width: 150px; +} + +.ginger .host-admin .nw-config .interface .ip { + width: 140px; +} + +.ginger .host-admin .nw-config .interface .mask { + width: 140px; +} + +.ginger .host-admin .nw-config .interface .grid-head { + margin-bottom: 10px; + color:#888888; + border-bottom: solid 1px #BBBBBB; +} + +.ginger .host-admin .nw-config .interface .grid-body { + font-weight: normal; +} + +.ginger .host-admin .nw-config .interface .grid-body input { + width: 120px; +} + +.ginger .host-admin .nw-config .interface .item { + margin-bottom: 5px; + overflow: hidden; +} + +.ginger .host-admin .nw-config .interface .action-area { + float: right; + padding-right: 5px; +} + +.ginger .host-admin .nw-config .global { + width: 30%; + margin-left: 30px; +} + +.ginger .host-admin .nw-config .global input { + width: 200px; + margin-right: 5px; + vertical-align: middle; +} + +.ginger .host-admin .nw-config .global .addBtn { + float: right; + margin-right: 40px; + border-radius: 10px; +} + +.ginger .host-admin .nw-config button { + width: 20px; + height: 20px; + vertical-align: middle; +} + +.ginger .hide { + display: none; +} + +.ginger .host-admin .pw-opt { + padding: 10px; +} + +.ginger .host-admin .pw-opt .header { + padding-left: 5px; + padding-right: 30px; + margin-bottom: 20px; + overflow: hidden; +} + +.ginger .host-admin .pw-opt .header .legend { + display: inline-block; + vertical-align: middle; + margin-right: 2px; + font-weight: normal; +} + +.ginger .host-admin .pw-opt .header .separator { + margin-right: 15px; +} + +.ginger .host-admin .pw-opt .header #progressIndicator { + float: right; + margin-top: 2px; +} + +.ginger .host-admin .pw-opt .header .actBtn { + float: right; +} + +.ginger .host-admin .pw-opt .body .item { + display: inline-block; + width: 33%; +} + +.ginger .host-admin .pw-opt .body .item span { + display: inline-block; + vertical-align: middle; + margin: 3px; +} + +.ginger .host-admin .pw-opt .body .item .to-select:hover { + text-decoration: underline; + cursor: pointer; +} + +.ginger .host-admin .san-adapter { + padding-right: 0px; +} + +.ginger .host-admin .san-adapter .head { + margin-bottom: 10px; +} + +.ginger .host-admin .san-adapter .body { + font-weight: normal; +} + +.ginger .host-admin .san-adapter .item { + margin-bottom: 5px; +} + +.ginger .host-admin .sensor-panel { + min-height: 100px; + max-height: 170px; +} + +.ginger .host-admin .sensor-inline { + display: inline-block; + margin-left: 20px; + vertical-align: top; +} + +.ginger .host-admin .sensor-head { + margin-top: 15px; + font-weight: bold; + font-size: 14px; +} + +.ginger .host-admin .sensor-inline .sensor-body { + font-weight: normal; + font-size: 12px; +} + +.ginger .host-admin .subsc-manage .content-body .subsc-item { + height: 25px; + margin: 2px 0; +} + +.ginger .host-admin .subsc-manage .content-header { + border-bottom: 1px solid #aaa; + height: 22px; +} + +.ginger .host-admin .subsc-manage .content-header>span { + display: inline-block; + width: 230px; +} + +.ginger .host-admin .subsc-manage button { + width: 20px; + height: 20px; + float: right; +} + +.ginger .host-admin .subsc-manage .content-body .subsc-manage-column { + display: inline-block; + width: 230px; + font-weight: 400; +} + +.ginger .host-admin .subsc-manage .status-header .sep-dot-active { + display: inline-block; + height: 16px; + width: 16px; + border-radius: 8px; + vertical-align: middle; +} + +.ginger .host-admin .subsc-manage .status-header .up { + background: linear-gradient(to bottom, #BFD255 0%, #8EB92A 50%, + #72AA00 51%, #9ECB2D 100%) repeat scroll 0 0 transparent; +} + +.ginger .host-admin .subsc-manage .status-header .down { + background: linear-gradient(to bottom, #AFAFAF 0%, #AFAFAF 50%, + #AFAFAF 51%, #AFAFAF 100%) repeat scroll 0 0 transparent; +} + +#subscriptionAdd .subsc-colume { + display: inline-block; +} + +#subscriptionAdd .subsc-add-label>div { + margin-top: 14px; +} + +#subscriptionAdd .subsc-add-content .subsc-input { + margin: 7px 0 0 3px; +} + +#subscriptionAdd .subsc-manage-footer { + float: right; + margin-top: 20px; +} + +.ginger .host-admin .subsc-manage .status-header { + margin-bottom: 10px; +} + +.ginger .host-admin .subsc-manage .status-header .sep-label { + display: inline-block; + margin-right: 10px; + vertical-align: middle; +} + +.ginger .host-admin .subsc-manage .status-header .sep-buttons { + display: inline-block; + margin-left: 10px; +} + +.ginger .host-admin .subsc-manage .status-header .actBtn { + min-width: 90px; +} + +.ginger .host-admin .user-manage .content-header { + border-bottom: 1px solid #aaa; + height: 22px; +} + +.ginger .host-admin .user-manage .content-header>span { + display: inline-block; + width: 230px; +} + +.ginger .host-admin .user-manage button { + width: 20px; + height: 20px; + float: right; +} + +.ginger .host-admin .user-manage .content-body .user-item { + height: 25px; + margin: 2px 0; +} + +.ginger .host-admin .user-manage .content-body .user-manage-column { + display: inline-block; + width: 230px; + font-weight: 400; +} + +#hostUserAdd .user-colume { + display: inline-block; +} + +#hostUserAdd .user-add-label>div { + margin-top: 14px; +} + +#hostUserAdd .user-add-content .user-input { + margin: 7px 0 0 3px; +} + +#hostUserAdd .user-manage-footer { + position: absolute; + bottom: 10px; + right: 10px; +} + +.user-add-body .user-add-content .enable-combobox { + vertical-align: middle; +} + +// Admin - To do: move to Ginger +@import "modules/administration"; \ No newline at end of file diff --git a/ui/css/src/modules/_administration.scss b/ui/css/src/modules/_administration.scss new file mode 100644 index 0000000..2a79dce --- /dev/null +++ b/ui/css/src/modules/_administration.scss @@ -0,0 +1,372 @@ +// +// Project Ginger +// +// Copyright IBM, Corp. 2014-2015 +// +// Code derived from Project Kimchi +// +// Licensed 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. +// + +#administration-root-container { + .fa { + margin-left: 20px; + font-size: 20px; + color: #5a595b; + } + h3 { + height: 32px; + padding: 10px 15px; + font-size: 20px; + border-radius: 2px 2px 0 0; + display: inline-block; + } + h3 > a > span.accordion-icon { + display: inline-block; + font: normal normal normal 14px/1 FontAwesome; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + font-size: 20px; + color: #5a595b; + } + h3 > a > span.accordion-text { + margin-left: 20px; + } + h3 > a[aria-expanded="true"] > span.accordion-icon:before { + content: "\f01b"; + } + h3 > a[aria-expanded="false"] > span.accordion-icon:before { + content: "\f01a"; + } + a { + color: #9e9e9e; + text-decoration: none; + } + hr { + width: 93%; + border: 1.8px solid #eaeaea; + margin-top: 30px !important; + } +} + +#sanadapters-ppc-content-area, +#sensors-ppc-content-area, +#backup-ppc-content-area, +#users-ppc-content-area, +#network-ppc-content-area, +#sep-ppc-content-area { + width: 95.6%; + margin-top: 10px; + margin-left: 12px; + list-style-type: none; + .li:nth-child(even) { + background-color: #fcfcfc; + } + .li:nth-child(odd) { + background-color: #fff; + } + .header { + border-top: 0 none; + > span, + div { + padding: 6px 2px; + display: inline-block; + vertical-align: bottom; + height: 36px; + font-family: $font-family-sans-serif; + font-weight: 400; + font-size: 12.5pt; + line-height: 1.42857; + border-bottom: none; + border-top: 0; + } + } + .body { + border-top: 1px solid #eee; + > span { + padding: 6px 2px; + display: inline-block; + vertical-align: top; + font-family: $font-family-sans-serif; + font-size: 11pt; + line-height: 2.42857; + font-weight: bold; + } + } + .body > div { + padding: 6px 2px; + display: inline-block; + vertical-align: top; + font-family: $font-family-sans-serif; + font-size: 11pt; + line-height: 2.42857; + font-weight: bold; + } + .name { + width: 19.6914%; + } + .wwpn, + .speed { + width: 13.2486%; + } + .wwnn, + .port { + width: 13.4301%; + } + .state { + width: 13.1478%; + } + .symbolic { + width: 13.7931%; + } + .default_column { + width: 25%; + } +} + +#firmware-update-content-area { + width: 95.6%; + margin-top: 10px; + margin-left: 12px; + .col-md-4 { + width: 32.2%; + } + .fmw-content { + margin-left: 40px; + margin-bottom: 30px; + } + .fmw-form { + margin-top: 20px; + } + .form-control { + padding: 6px 12px !important; + width: 60% + } + .fmw-label { + padding: 6px 2px; + height: 36px; + font-family: $font-family-sans-serif; + font-weight: 400; + font-size: 12.5pt; + } + .fmw-item { + padding: 2px 2px; + font-family: $font-family-sans-serif; + font-size: 11pt; + } +} + +#gingerPowerMgmt { + .header { + padding-left: 0; + } + .pwr-item { + width: 100%; + margin-bottom: 10px; + } + .pwr-item-label { + margin-left: 10px; + padding: 2px 2px; + vertical-align: top; + font-family: $font-family-sans-serif; + font-size: 11pt; + } + .actBtn { + float: none; + width: 30%; + } + .pwr-activated, + .pwr-selected, + .pwr-unselected { + display: inline-block; + font: normal normal normal 14px/1 FontAwesome; + font-size: 22px; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + .pwr-activated:before { + content: "\f00c"; + color: $fa-green; + } + .pwr-selected:before { + content: "\f192"; + } + .pwr-unselected:before { + content: "\f10c"; + } + .pw-opt { + padding: 10px 50px; + } +} + +#backup-ppc-content-area { + .ul-body { + width: 100%; + margin-top: 10px; + margin-left: 0; + -webkit-padding-start: 0; + list-style-type: none; + } + .column-file { + width: 58.9790%; + word-wrap: break-word; + } + .column-timestamp { + width: 18.9608%; + } + .column-download { + width: 11.0300%; + } + .column-delete { + width: 11.0300%; + } + .fa-download, + .fa-minus-circle { + margin-right: 10px; + } + .backup-pcc-actions { + margin-bottom: 20px; + } + .backup-pcc-button { + height: 40px; + } +} + +#backup-pcc-action-area { + .fa { + margin-left: 0; + font-size: 20px; + color: #fff; + } + .fa-minus-circle { + margin-right: 0; + } + a { + color: #fff; + } +} + +#users-ppc-content-area { + .column-username { + width: 22.6666%; + } + .column-usergroup { + width: 22.6666%; + } + .column-userprofile { + width: 22.6666%; + } + .column-detach { + width: 32%; + } + .fa-trash-o { + float: right; + } + .fa-plus-circle { + margin-left: 0; + color: #fff; + padding: 1px 3px; + } + .actBtn { + float: none; + margin-bottom: 10px; + width: 10%; + height: auto; + } +} + +#network-ppc-content-area { + .body { + border-top: 0 none; + } + .column-name { + width: 16%; + } + .column-ip-address { + width: 30%; + } + .column-ip-mask { + width: 30%; + } + .column-actions { + width: 22%; + } + .network-item { + padding: 2px 2px; + font-family: $font-family-sans-serif; + font-size: 11pt; + } + .form-control { + padding: 6px 12px !important; + width: 80% + } + .fa { + margin-left: 0; + } + .fa-plus-circle { + color: #fff; + padding: 1px 3px; + } + .column-dns-ip-address { + width: 75%; + } + .addBtn { + margin-bottom: 20px; + width: 40%; + } + .btn-link { + width: auto; + padding: 3px 2px; + } +} + +#sep-ppc-content-area { + .column-hostname { + width: 22.6666%; + } + .column-port { + width: 22.6666%; + } + .column-community { + width: 22.6666%; + } + .column-detach { + width: 32%; + } + .fa-trash-o { + float: right; + padding: 6px 2px; + } + .detach { + vertical-align: middle; + } + .fa-circle, + .fa-times-circle { + font-size: 20px; + padding: 9px 8px; + } + .fa-circle { + color: #8cc63f; + } + .fa-times-circle { + color: #d9182d; + } + .btn-primary { + float: right; + padding: 6px 2px; + margin: 0px 8px; + width: 10%; + height: auto; + } +} \ No newline at end of file -- 1.9.3
participants (1)
-
sguimaraes943＠gmail.com