[Kimchi-devel] [PATCH 1/9] Adding new-ui base templates and widgets - SCSS
sguimaraes943 at gmail.com
sguimaraes943 at gmail.com
Tue Oct 27 21:22:55 UTC 2015
From: samhenri <samuel.guimaraes at eldorado.org.br>
Signed-off-by: samhenri <samuel.guimaraes at eldorado.org.br>
---
ui/css/src/bootstrap-select.custom.scss | 1 +
ui/css/src/modules/_administration.scss | 0
ui/css/src/modules/_datagrid.scss | 72 ++++++++
ui/css/src/modules/_guests.scss | 92 +++++++++
ui/css/src/modules/_host.scss | 169 -----------------
ui/css/src/modules/_iso-list.scss | 121 ++++++++++++
ui/css/src/modules/_jqueryui.scss | 0
ui/css/src/modules/_menu-flat.scss | 16 +-
ui/css/src/modules/_modal-flat.scss | 2 +-
ui/css/src/modules/_navbar-flat.scss | 4 +-
ui/css/src/modules/_network.scss | 317 ++++++++++++++++++++++++++++++++
ui/css/src/modules/_storage.scss | 0
ui/css/src/modules/_templates.scss | 99 ++++++++++
ui/css/src/modules/_toolbar.scss | 24 ++-
ui/css/src/modules/_wok-confirm.scss | 42 +++++
ui/css/src/modules/_wok-grid.scss | 25 ++-
ui/css/src/wok.scss | 47 ++++-
17 files changed, 844 insertions(+), 187 deletions(-)
create mode 100644 ui/css/src/modules/_administration.scss
create mode 100644 ui/css/src/modules/_datagrid.scss
create mode 100644 ui/css/src/modules/_guests.scss
delete mode 100644 ui/css/src/modules/_host.scss
create mode 100644 ui/css/src/modules/_iso-list.scss
create mode 100644 ui/css/src/modules/_jqueryui.scss
create mode 100644 ui/css/src/modules/_network.scss
create mode 100644 ui/css/src/modules/_storage.scss
create mode 100644 ui/css/src/modules/_templates.scss
create mode 100644 ui/css/src/modules/_wok-confirm.scss
diff --git a/ui/css/src/bootstrap-select.custom.scss b/ui/css/src/bootstrap-select.custom.scss
index 49f9bc2..dd895f2 100644
--- a/ui/css/src/bootstrap-select.custom.scss
+++ b/ui/css/src/bootstrap-select.custom.scss
@@ -25,6 +25,7 @@
&.btn-group {
.btn {
.caret {
+ position: absolute;
top: 0;
right: 40px;
margin-top: 0;
diff --git a/ui/css/src/modules/_administration.scss b/ui/css/src/modules/_administration.scss
new file mode 100644
index 0000000..e69de29
diff --git a/ui/css/src/modules/_datagrid.scss b/ui/css/src/modules/_datagrid.scss
new file mode 100644
index 0000000..fe2f7dc
--- /dev/null
+++ b/ui/css/src/modules/_datagrid.scss
@@ -0,0 +1,72 @@
+ //
+ // Project Wok
+ //
+ // Copyright IBM, Corp. 2015
+ //
+ // 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.
+ //
+ .grid-control {
+ padding: 5px;
+ }
+
+ .grid-control input[type="text"] {
+ width: 514px;
+ }
+
+ .wok-datagrid {
+ background: $table-bg;
+ .wok-datagrid-header,
+ .wok-datagrid-body > .wok-datagrid-row {
+ display: block;
+ width: 100%;
+ > span,
+ >.wok-datagrid-row > span {
+ padding: $table-cell-padding;
+ display: inline-block;
+ }
+ }
+ > .wok-datagrid-header > span {
+ font-family: $font-family-light;
+ font-weight: 400;
+ font-size: 12.5pt;
+ vertical-align: bottom;
+ border-bottom: none;
+ border-top: 0;
+ line-height: $line-height-base;
+ height: 36px;
+ }
+
+ > .wok-datagrid-body > .wok-datagrid-row{
+ border-top: 1px solid $table-border-color;
+
+ > span {
+ font-family: $font-family-sans-serif;
+ line-height: (1 + $line-height-base);
+ vertical-align: top;
+ font-size: 12.5pt;
+ }
+
+ }
+ .wok-datagrid-hybrid > .wok-datagrid-body > .wok-datagrid-row:first-child {
+ border-color: $table-first-row-border-color;
+ }
+ .wok-datagrid-row.odd {
+ background-color: $table-bg-accent;
+ }
+ .wok-datagrid-row.even {
+ background-color: $table-bg;
+ }
+ .wok-datagrid-body.wok-datagrid-row {
+ border-top: 1px solid $table-bg-accent;
+ }
+ }
diff --git a/ui/css/src/modules/_guests.scss b/ui/css/src/modules/_guests.scss
new file mode 100644
index 0000000..23c361a
--- /dev/null
+++ b/ui/css/src/modules/_guests.scss
@@ -0,0 +1,92 @@
+//
+// Project Wok
+//
+// Copyright IBM, Corp. 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.
+//
+
+/* Create Guest Modal */
+
+.guests-modal {
+ .modal-dialog {
+ width: 1100px;
+ }
+ .page-list {
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ overflow: hidden;
+ }
+ .page {
+ position: absolute;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+ padding: 10px 30px;
+ }
+}
+
+#guest-add-window {
+ .modal-body {
+ margin: 0;
+ padding: 0;
+ }
+ .modal-footer {
+ margin-top: 0;
+ }
+ .modal-footer .btn + .btn {
+ margin-left: 0;
+ }
+ .modal-footer .btn {
+ margin-right: 5px;
+ }
+ .modal-dialog {
+ width: 900px;
+ }
+ .guest-modal-container {
+ padding: 10px 30px;
+ position: relative;
+ }
+ .guest-pager {
+ background: $table-border-color;
+ overflow: hidden;
+ position: relative;
+ height: 530px;
+ }
+ &.modal-content p {
+ margin: 0 0 10px 0;
+ }
+ &.modal-content h5 {
+ font-size: 13pt;
+ font-weight: 400;
+ margin-top: 0;
+ }
+ &.modal-content label {
+ font-size: 16px;
+ font-weight: 400;
+ font-family: $font-family-sans-serif;
+ }
+ form#form-vm-add {
+ margin: 0;
+ }
+ input#guest-vm-name,
+ p.help-block {
+ width: 592px;
+ }
+}
diff --git a/ui/css/src/modules/_host.scss b/ui/css/src/modules/_host.scss
deleted file mode 100644
index 5c2d9f6..0000000
--- a/ui/css/src/modules/_host.scss
+++ /dev/null
@@ -1,169 +0,0 @@
-//
-// Project Wok
-//
-// Copyright IBM, Corp. 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.
-//
-
-/* Main Host Dashboard section */
-
-.host-dashboard {
- padding-top: 40px;
- padding-bottom: 50px;
- background: #eee;
-
- .container {
- padding-left: 83px !important; // Overriding container padding to align according to mockups
- padding-right: 73px !important;
- }
-
- h3 {
- font-family: $font-family-light;
- font-size: 21pt;
- margin: 0 0 13px 0;
- }
-}
-
-.host-dashboard .col-md-3 {
- padding: 0 14px;
-
- > div {
- background: #fff;
- padding: 13px 20px 20px;
- }
-
-}
-
-/* End of Host Dashboard */
-
-/* Line chart objects related to Hosts page */
-
-#container-chart-cpu,
-#container-chart-memory,
-#container-chart-disk-io,
-#container-chart-network-io {
- border-top: 1px solid #eeeeee;
- border-bottom: 2px solid #3a393b;
- padding: 2px 0;
- height: 99px;
- width: 310px;
-}
-
-/* End of Line chart objects */
-
-/* Host Panels Container and Panels */
-
-#host-info-container {
- padding-top: 53px;
- margin: 0 -8px;
-}
-
-#host-info-container .col-md-4 {
- width: 486px;
- padding-left: 26px;
- padding-right: 26px;
-}
-
-#software-update-section {
- margin-top: 24px;
- border-top: 1px solid #b0b0b0;
- padding-top: 24px;
-}
-
-
-// TEMPORARY FIX TO LAYOUT UNTIL WOK.LIST WIDGET IS DONE
-
-#repositories-grid, #available-reports-grid {
-
- .wok-list-content {
- height: 517px;
- overflow-x: auto;
- }
-
- .dropdown.menu-flat {
- float: right;
- margin-right: 1px;
- }
-
-}
-// END OF TEMPORARY FIX
-
-/* Basic Information */
-
-#host-info-container {
-
- padding-top: 10px;
-
- .basic-information-list {
- height: 517px;
- overflow-x: auto;
- margin: 0;
- @extend .row; // Extending bootstrap .row clearfix util
-
- .basic-information-list dt {
- font-weight: 600;
- font-size: 14.5pt;
- line-height: 12px;
- }
-
- .basic-information-list dd {
- font-size: 12.5pt;
- font-weight: 400;
- margin-bottom: 12px;
- }
-
- }
-}
-
-/* End of Basic Information */
-
-/* Debug Report */
-
-#available-reports-grid .wok-list-cell {
- padding-left: 10px;
-}
-
-/* End of Debug Report */
-
-/* Software Updates */
-
- /* Colgroups for low resolution screens */
-
- .software-update-name,
- .software-update-repos {
- min-width: 224px;
- }
-
- .software-update-version,
- .software-update-arch {
- min-width: 200px;
- }
-
- /* End of Colgroups */
-
- /* Software Update Accordion */
-
- .host-panel #software-updates-progress-textarea {
- border: 1px solid #ddd;
- box-sizing: border-box;
- height: 100px;
- padding: .2em .5em;
- resize: vertical;
- }
-
- /* End of Software Update Accordion */
-
-/* End of Software Updates */
\ No newline at end of file
diff --git a/ui/css/src/modules/_iso-list.scss b/ui/css/src/modules/_iso-list.scss
new file mode 100644
index 0000000..fd1948a
--- /dev/null
+++ b/ui/css/src/modules/_iso-list.scss
@@ -0,0 +1,121 @@
+//
+// Project Wok
+//
+// Copyright IBM, Corp. 2015
+//
+// 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.
+//
+
+/* Template & Guests Modal Windows */
+
+#template-add-window.modal-content,
+#guest-add-window.modal-content {
+ label.box-iso-outer {
+ font-family: $font-family-sans-serif;
+ font-size: 14px !important;
+ font-weight: 400;
+ border-radius: 3px;
+ overflow: hidden;
+ display: block;
+ -webkit-user-select: none;
+ user-select: none;
+ }
+ label.box-iso-outer span.box-iso-border {
+ display: block;
+ border: 3px solid transparent;
+ transition: all .1s ease-in-out;
+ }
+ label.box-iso-outer .iso-radio-hidden:checked + span.box-iso-border,
+ label.box-iso-outer .iso-checkbox-hidden:checked + span.box-iso-border {
+ border-color: $guests-color;
+ }
+ label.box-iso-outer .iso-radio-hidden:checked + span.box-iso-border > .box-iso-inner,
+ label.box-iso-outer .iso-checkbox-hidden:checked + span.box-iso-border > .box-iso-inner {
+ border-color: $gray-base;
+ }
+ label.box-iso-outer span.box-iso-inner {
+ display: block;
+ border: 1px solid transparent;
+ background: $gray-lighter;
+ transition: all .1s ease-in-out;
+ }
+ ul.list-template,
+ ul.list-iso {
+ display: block;
+ overflow-x: hidden;
+ overflow-y: auto;
+ max-height: 462px;
+ list-style: none;
+ margin: 0 -5px 10px -5px;
+ padding: 0;
+ }
+ label.box-iso-outer span.box-iso-inner dl {
+ margin-bottom: 16px;
+ }
+ label.box-iso-outer span.box-iso-inner dt,
+ label.box-iso-outer span.box-iso-inner dd {
+ padding: 0 12px 0 20px;
+ }
+ label.box-iso-outer span.box-iso-inner dt {
+ padding-top: 5px;
+ text-transform: capitalize;
+ }
+ label.box-iso-outer span.box-iso-inner dd {
+ padding-bottom: 5px;
+ }
+ ul#templateTile input[type="radio"].iso-radio-hidden,
+ ul#list-local-iso input[type="checkbox"].iso-checkbox-hidden {
+ display: none;
+ }
+ label.box-iso-outer {
+ cursor: pointer;
+ }
+ ul#list-local-iso li.col-md-3 {
+ width: 241px;
+ margin: 10px 5px 0;
+ }
+ h3.iso-title {
+ font-size: 22px;
+ font-weight: 300;
+ line-height: 22px;
+ margin: 0;
+ padding: 13px 13px 13px 20px;
+ background-color: transparent;
+ background-position: right center;
+ background-repeat: no-repeat;
+ background-size: auto 33px;
+ background-origin: content-box;
+ max-width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ &.centos {
+ background-image: url('#{$wok-icon-path}/icon-centos.png');
+ }
+ &.debian {
+ background-image: url('#{$wok-icon-path}/icon-debian.png');
+ }
+ &.fedora {
+ background-image: url('#{$wok-icon-path}/icon-fedora.png');
+ }
+ &.opensuse {
+ background-image: url('#{$wok-icon-path}/icon-opensuse.png');
+ }
+ &.ubuntu {
+ background-image: url('#{$wok-icon-path}/icon-ubuntu.png');
+ }
+ &.gentoo {
+ background-image: url('#{$wok-icon-path}/icon-gentoo.png');
+ }
+ }
+}
diff --git a/ui/css/src/modules/_jqueryui.scss b/ui/css/src/modules/_jqueryui.scss
new file mode 100644
index 0000000..e69de29
diff --git a/ui/css/src/modules/_menu-flat.scss b/ui/css/src/modules/_menu-flat.scss
index 9d7036b..102fb1e 100644
--- a/ui/css/src/modules/_menu-flat.scss
+++ b/ui/css/src/modules/_menu-flat.scss
@@ -127,7 +127,7 @@
background-color: $menu-flat-dropdown-bg;
border: 0;
border-radius: 0;
- @include box-shadow(none !important);
+ box-shadow: none !important;
background-clip: padding-box;
// Aligns the dropdown menu to right
@@ -143,6 +143,10 @@
@include nav-divider($menu-flat-dropdown-divider-bg);
}
+ > li.wok-hide-action-item {
+ display: none;
+ }
+
> li > a {
border-top: 1px solid $menu-flat-dropdown-border;
@include box-shadow(inset 0px 1px 0px 0px $menu-flat-dropdown-divider-bg);
@@ -150,11 +154,12 @@
> li:first-child > a {
border-top: 1px solid $menu-flat-dropdown-bg;
- @include box-shadow(none);
+ box-shadow: none;
}
- > li.critical:last-child > a {
- @include box-shadow(none);
+ > li.critical:last-child > a,
+ > li.critical:last-child > a:hover {
+ box-shadow: none;
}
// Links within the dropdown menu
@@ -204,7 +209,8 @@
}
- .dropdown-menu > li.critical > a {
+ .dropdown-menu > li.critical > a,
+ .dropdown-menu > li.critical > a:hover {
background: $menu-flat-dropdown-critical-bg;
}
diff --git a/ui/css/src/modules/_modal-flat.scss b/ui/css/src/modules/_modal-flat.scss
index 8265140..90ae44a 100644
--- a/ui/css/src/modules/_modal-flat.scss
+++ b/ui/css/src/modules/_modal-flat.scss
@@ -76,7 +76,7 @@
border-radius: 0;
border: 3px solid #999;
background-clip: padding-box;
- @include box-shadow(none !important);
+ box-shadow: none !important;
border-radius: 0;
outline: 0;
}
diff --git a/ui/css/src/modules/_navbar-flat.scss b/ui/css/src/modules/_navbar-flat.scss
index b54db68..47246a6 100644
--- a/ui/css/src/modules/_navbar-flat.scss
+++ b/ui/css/src/modules/_navbar-flat.scss
@@ -355,7 +355,7 @@
margin-right: 0;
padding-top: 0;
padding-bottom: 0;
- @include box-shadow(none);
+ box-shadow: none;
}
}
@@ -418,7 +418,7 @@
background-color: $menu-flat-dropdown-bg;
border: 0;
border-radius: 0;
- @include box-shadow(none !important);
+ box-shadow: none !important;
background-clip: padding-box;
height: auto;
max-height: 400px;
diff --git a/ui/css/src/modules/_network.scss b/ui/css/src/modules/_network.scss
new file mode 100644
index 0000000..5ce2c7a
--- /dev/null
+++ b/ui/css/src/modules/_network.scss
@@ -0,0 +1,317 @@
+//
+// Project Wok
+//
+// Copyright IBM, Corp. 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.
+//
+
+
+.network .list .column-name {
+ width: 20%;
+ max-width: 20%;
+ text-overflow: ellipsis;
+}
+
+.network .list .column-state {
+ width: 10%;
+}
+
+.network .list .column-type {
+ width: 15%;
+}
+
+.network .list .column-interface {
+ width: 15%;
+}
+
+.network .list .column-space {
+ width: 25%;
+}
+
+.network .list .column-action {
+ display: inline-block;
+ float: right;
+ height: 40px;
+}
+
+.network .list .hide-action-item {
+ display: none;
+}
+
+.network .list .menu-container {
+ display: none;
+ top: 58px;
+}
+
+.network .list .action-button {
+ float: right;
+ margin-top: 2px;
+ margin-left: 5px;
+}
+
+.network .list .network-state {
+ display: inline-block;
+ height: 16px;
+ width: 16px;
+ border-radius: 8px;
+ margin-left: 10px;
+}
+
+.network .list .nw-loading {
+ background: #c0c0c0 url(../images/theme-default/loading.gif)
+ center no-repeat;
+}
+
+.network .list .fa {
+ background: #a8d46f;
+}
+
+.network .list .down {
+ background: linear-gradient(to bottom, #AFAFAF 0%, #AFAFAF 50%,
+ #AFAFAF 51%, #AFAFAF 100%) repeat scroll 0 0 transparent;
+}
+
+.network-config {
+ font-family: Arial;
+ font-size: 12px;
+ margin-bottom: 40px;
+ display: none;
+}
+
+.network-config .section-container {
+ margin-top: 20px;
+}
+
+.network-config .section-container:first-child {
+ margin-top: 10px;
+}
+
+.network-config .section-container:last-child {
+ height: 200px;
+}
+
+.network-config .section-container .bridged-inline {
+ display: inline-block;
+ vertical-align: top;
+ max-width: 520px;
+}
+
+.network-config .section-header {
+ font-size: 14px;
+ font-weight: lighter;
+}
+
+.network-config .section-content {
+ margin-top: 10px;
+}
+
+.network-config input.invalid-field[type="text"] {
+ border-color: #FF4444;
+}
+
+.network-config input.invalid-field[type="text"][disabled] {
+ border-color: #666666;
+}
+
+.network-config input[type="radio"] {
+ margin-right: 5px;
+ margin-top: 0px;
+}
+
+.network-config select {
+ color: #666666;
+ border: solid 1px;
+ background-color: white;
+ padding: 3px 4px 3px 0;
+}
+
+.network-config .input-container {
+ height: 20px;
+}
+
+.network-config label {
+ vertical-align: top;
+}
+
+.network-type-wrapper-controls input[type="text"] {
+ height: 38px;
+ line-height: 38px;
+ background: #fff;
+ -webkit-border-radius: 5px;
+ border-radius: 5px;
+ box-shadow: 2px 2px 2px #eee inset;
+ border-top: 1px solid #bbb;
+ border-left: 1px solid #bbb;
+ padding: 0 10px;
+ margin-top: 5px;
+ width: 50px;
+}
+
+.network-type-wrapper-controls > .dropdown {
+ margin: 5px 0 0 1px;
+ width: 180px;
+}
+
+.network-type-wrapper-controls input[type="text"][disabled] {
+ color: #bbb;
+ background-color: #fafafa;
+ cursor: not-allowed;
+}
+
+.network-type-wrapper-controls span[type="text"] {
+ padding: 0 10px;
+}
+
+.bridge-option-column {
+ display: inline-block;
+ vertical-align: middle;
+}
+
+.bridge-option-column label {
+ margin-left: 42px;
+}
+
+.network-type-wrapper-controls {
+ width: 80px;
+ display: inline-block;
+ vertical-align: top;
+ padding: 5px 5px 5px 22px;
+}
+
+#enableVlan {
+ margin-left: 42px;
+ vertical-align: middle;
+}
+
+#labelEnableVlan {
+ vertical-align: middle;
+}
+
+#labelNetworkVlanID {
+ margin-left: 42px;
+ vertical-align: middle;
+ display: none;
+}
+
+#networkVlanID {
+ width: 80px;
+ vertical-align: middle;
+ display: none;
+}
+
+.network-config .input-hint-icon {
+ margin: -1px 1px 0 0;
+ display: inline-block;
+}
+
+.network-config .input-hint {
+ margin-top: 3px;
+}
+
+.network-config .input-hint-text {
+ color: #999999;
+ font-weight: lighter;
+ font-size: 12px;
+}
+
+.ui-state-default a {
+ color: #212121;
+}
+
+#networkConfig {
+ padding-left: 30px;
+}
+
+#network-root-container {
+
+ .wok-nw-loading-icon {
+ background: transparent url('#{$wok-icon-path}/spin5.svg') no-repeat 50% 50%;
+ @include animation(spin 3s infinite linear);
+ height: 16px;
+ width: 16px;
+ background-size: 100%;
+ display: block;
+ position: relative;
+ top: 12px;
+ left: 50%;
+ margin-left: -8px;
+ }
+
+ .up .wok-nw-loading-icon,
+ .down .wok-nw-loading-icon {
+ display: none;
+ }
+
+ .wok-datagrid-body {
+ span > .fa {
+ font-size: 22px;
+ width: 20px;
+ height: 20px;
+ position: relative;
+ top: 10px;
+ }
+
+ .up .fa {
+ color: #a8d46f;
+ }
+
+ .loading > .fa,
+ .down .fa {
+ display: none;
+ }
+ }
+
+ .wok-datagrid > .wok-datagrid-header,
+ .wok-datagrid > .wok-datagrid-body > .wok-datagrid-row {
+
+ > span.column-state {
+ width: 2.92207%;
+ text-align: center;
+ }
+
+ > span.column-name {
+ width: 19.2207%;
+ }
+
+ > span.column-type {
+ width: 10.3896%;
+ }
+
+ > span.column-interface {
+ width: 10.3896%;
+ }
+
+ > span.column-space {
+ width: 31.169%;
+ }
+
+ > span.column-action {
+ width: 25.909%;
+ text-align: right;
+ }
+
+ }
+
+ .wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > span {
+
+ &.column-state {
+ height: 53px;
+ vertical-align: middle;
+ }
+
+ }
+
+}
diff --git a/ui/css/src/modules/_storage.scss b/ui/css/src/modules/_storage.scss
new file mode 100644
index 0000000..e69de29
diff --git a/ui/css/src/modules/_templates.scss b/ui/css/src/modules/_templates.scss
new file mode 100644
index 0000000..522c1ce
--- /dev/null
+++ b/ui/css/src/modules/_templates.scss
@@ -0,0 +1,99 @@
+//
+// Project Wok
+//
+// Copyright IBM, Corp. 2015
+//
+// 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.
+//
+
+/* Add Template Modal Window */
+
+.templates-modal {
+ .modal-dialog {
+ width: 1100px;
+ }
+ .page-list {
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ overflow: hidden;
+ }
+ .page {
+ position: absolute;
+ left: 100%;
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+ padding: 10px 30px;
+ }
+}
+
+#template-add-window {
+ .modal-body {
+ margin: 0;
+ padding: 0;
+ }
+ .modal-footer {
+ margin-top: 0;
+ }
+ .modal-footer .btn + .btn {
+ margin-left: 0;
+ }
+ .modal-footer .btn {
+ margin-right: 5px;
+ }
+ .template-modal-container {
+ padding: 10px 30px;
+ position: relative;
+ }
+ .template-pager {
+ background: $table-border-color;
+ width: 1082px;
+ height: 689px;
+ position: relative;
+ overflow: hidden;
+ }
+ .template-pager-container {
+ position: absolute;
+ height: 664px;
+ width: 2164px;
+ left: 0;
+ transition: left .2s ease-in-out;
+ }
+ &.modal-content p {
+ margin: 0;
+ }
+ &.modal-content h5 {
+ font-size: 13pt;
+ font-weight: 400;
+ margin-top: 0;
+ }
+ &.modal-content label {
+ font-size: 16px;
+ font-weight: 400;
+ font-family: $font-family-sans-serif;
+ }
+ &.modal-content button#iso-more,
+ &.modal-content button#iso-more-loading {
+ margin-bottom: 17px;
+ clear: both;
+ }
+ &.modal-content div#iso-remote-box {
+ left: 1082px;
+ }
+ &.modal-content div#iso-local-box {
+ left: 0;
+ }
+}
diff --git a/ui/css/src/modules/_toolbar.scss b/ui/css/src/modules/_toolbar.scss
index eaa962f..77455fd 100644
--- a/ui/css/src/modules/_toolbar.scss
+++ b/ui/css/src/modules/_toolbar.scss
@@ -16,7 +16,7 @@
// limitations under the License.
//
-.toolbar {
+.navbar-default.toolbar {
height: 40px;
padding: 0;
margin: 0;
@@ -27,15 +27,29 @@
height: 40px;
}
- a {
+ .navbar-nav > li > a.dropdown-toggle > .caret {
+ margin-top: -5px;
+ width: 20px;
+ margin-left: 5px;
+ }
+
+ .navbar-nav > li > a.dropdown-toggle > .caret:before {
+ top: 15px;
+ margin-left: 0;
+ }
+
+ .navbar-right.tools > li > a {
font-family: $font-family-alternate;
display: inline-block;
color: $highlights-color;
text-decoration: none;
font-size: 13pt;
vertical-align: middle;
- padding: 6px 0;
- margin-left: 50px;
+ padding: 6px 0 !important;
+ margin-left: 50px !important;
+ font-weight: 400;
+ width: auto;
+ min-width: auto;
}
span, .fa {
@@ -52,7 +66,7 @@
@each $page, $bgcolor in $colors {
-##{$page}-root-container .toolbar {
+##{$page}-root-container .navbar-default.toolbar.toolbar {
background-color: $bgcolor !important;
}
}
\ No newline at end of file
diff --git a/ui/css/src/modules/_wok-confirm.scss b/ui/css/src/modules/_wok-confirm.scss
new file mode 100644
index 0000000..21693ac
--- /dev/null
+++ b/ui/css/src/modules/_wok-confirm.scss
@@ -0,0 +1,42 @@
+//
+// Project Wok
+//
+// Copyright IBM, Corp. 2015
+//
+// 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.
+//
+
+#wok-confirm-modal {
+
+ .modal-title .fa {
+ font-size: 47px;
+ color: #fdb813;
+ position: absolute;
+ left: 38px;
+ top: 19px;
+ }
+
+ .modal-footer {
+ background-color: $state-warning-border;
+ }
+
+ .modal-header,
+ .modal-body {
+ padding-left: 100px;
+ }
+
+ .modal-header.icon {
+ padding: 19px 0 0 0;
+ }
+
+}
\ No newline at end of file
diff --git a/ui/css/src/modules/_wok-grid.scss b/ui/css/src/modules/_wok-grid.scss
index cffaede..d340794 100644
--- a/ui/css/src/modules/_wok-grid.scss
+++ b/ui/css/src/modules/_wok-grid.scss
@@ -95,7 +95,6 @@
.wok-list-description {
font-weight: 300;
font-size: 10pt;
- width: 196px;
overflow: hidden;
}
@@ -108,6 +107,11 @@
cursor: pointer;
}
+.wok-list-content tbody tr.generating:hover {
+ text-decoration: none;
+ cursor: default;
+}
+
.wok-list-content tbody tr.selected {
background: #ddd;
}
@@ -119,3 +123,22 @@ span.wok-repository-status.disabled {
.wok-list-cell.disabled span {
color: #999;
}
+
+.wok-single-button {
+ padding-bottom: 16px;
+ margin-top: -11px;
+}
+
+.generating .wok-list-description {
+ padding-left: 24px;
+}
+
+.generating .wok-list-loading-icon-inline {
+ background: transparent url('#{$wok-icon-path}/spin5.svg') no-repeat 50% 50%;
+ @include animation(spin 3s infinite linear);
+ height: 16px;
+ width: 16px;
+ background-size: 100%;
+ display: block;
+ position: absolute;
+}
\ No newline at end of file
diff --git a/ui/css/src/wok.scss b/ui/css/src/wok.scss
index 9c0dee2..ef29938 100755
--- a/ui/css/src/wok.scss
+++ b/ui/css/src/wok.scss
@@ -64,14 +64,14 @@
// Override panels
.panel {
- @include box-shadow(none);
+ box-shadow: none !important;
+ -webkit-box-shadow: none !important;
}
.panel-title {
font-size: 21.5pt;
}
-
// Login
@import "modules/login";
@@ -84,13 +84,41 @@
// Dropdown Button - Flat
@import "modules/menu-flat";
- at import "modules/host";
-
+// Line Charts
@import "modules/line-chart";
// Wok Grid & Wok List
@import "modules/wok-grid";
+// Wok Datagrid
+ at import "modules/datagrid";
+
+// Wok Confirm Dialog
+ at import "modules/wok-confirm";
+
+// Wok jQuery-UI Accordion
+ at import "modules/jqueryui";
+
+// Wok ISO / VM / Template list
+ at import "modules/iso-list";
+
+// To do - Group into Kimchi
+
+// Templates - To do: move to Kimchi
+ at import "modules/guests";
+
+// Templates - To do: move to Kimchi
+ at import "modules/templates";
+
+// Networks - To do: move to Kimchi
+ at import "modules/network";
+
+// Networks - To do: move to Kimchi
+ at import "modules/storage";
+
+// Admin - To do: move to Ginger
+ at import "modules/administration";
+
// Utils
.absolute-middle {
margin: auto;
@@ -102,6 +130,17 @@
text-align: center;
}
+.wok-loading-icon {
+ background: transparent url('#{$wok-icon-path}/spin5.svg') no-repeat 50% 50%;
+ @include animation(spin 3s infinite linear);
+ height: 16px;
+ width: 16px;
+ background-size: 100%;
+ display: inline-block;
+ margin-right: 5px;
+}
+
+
// Animation
@import "modules/animation";
--
1.9.3
More information about the Kimchi-devel
mailing list