[Kimchi-devel] [PATCH] [new-ui] Added SCSS assets
sguimaraes943 at gmail.com
sguimaraes943 at gmail.com
Thu Nov 26 18:42:24 UTC 2015
From: samhenri <samuel.guimaraes at eldorado.org.br>
Signed-off-by: samhenri <samuel.guimaraes at 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 @@
- at 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 @@
+ at 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
+ at import "../../../../../../../ui/css/src/modules/wok-variables";
+
+// Compass Mixins
+ at 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
+ at 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
More information about the Kimchi-devel
mailing list