From: samhenri <samuel.guimaraes(a)eldorado.org.br&gt; Signed-off-by: samhenri <samuel.guimaraes(a)eldorado.org.br&gt; --- ui/css/src/modules/_edit-guests.scss | 367 -------------------------------- ui/css/src/modules/_guests.scss | 364 -------------------------------- ui/css/src/modules/_iso-list.scss | 126 ----------- ui/css/src/modules/_line-chart.scss | 210 ------------------- ui/css/src/modules/_loaders.scss | 10 + ui/css/src/modules/_network.scss | 121 ----------- ui/css/src/modules/_storage.scss | 391 ----------------------------------- ui/css/src/modules/_templates.scss | 315 ---------------------------- ui/css/src/modules/_utils.scss | 28 +++ ui/css/src/modules/_validation.scss | 17 ++ ui/css/src/wok.scss | 45 +--- ui/pages/wok-ui.html.tmpl | 2 +- 12 files changed, 59 insertions(+), 1937 deletions(-) delete mode 100644 ui/css/src/modules/_edit-guests.scss delete mode 100644 ui/css/src/modules/_guests.scss delete mode 100644 ui/css/src/modules/_iso-list.scss delete mode 100644 ui/css/src/modules/_line-chart.scss delete mode 100644 ui/css/src/modules/_network.scss delete mode 100644 ui/css/src/modules/_storage.scss delete mode 100644 ui/css/src/modules/_templates.scss create mode 100644 ui/css/src/modules/_utils.scss diff --git a/ui/css/src/modules/_edit-guests.scss b/ui/css/src/modules/_edit-guests.scss deleted file mode 100644 index 8566c49..0000000 --- a/ui/css/src/modules/_edit-guests.scss +++ /dev/null @@ -1,367 +0,0 @@ -#guest-edit-window { - .tab-content { - overflow: hidden; - height: 559px; - } - .tab-content .tab-pane { - position: relative; - } - #form-guest-edit-interface { - .column-actions { - width: 23%; - } - } - #form-guest-edit-storage { - .column-actions { - width: 26%; - } - } - #form-guest-edit-snapshot { - .column-actions { - width: 22%; - } - } - #form-guest-edit-pci { - .column-actions { - width: 4.47%; - } - } - form { - margin: 15px 0 0; - .header, - .task, - .body { - .column-actions { - text-align: right; - } - .column-device { - width: 12.7%; - } - .column-path { - width: 60.25%; - } - .cell.column-network { - width: 18%; - > span { - width: 100%; - display: inline-block; - text-overflow: ellipsis; - overflow: hidden; - } - .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) { - width: 180px; - } - } - .cell.column-type { - width: 11.35%; - } - .cell.column-mac { - width: 14.5%; - } - .cell.column-ip { - width: 31%; - } - .cell.column-sel { - width: 1.77%; - } - .cell.column-snapshot-name { - width: 58%; - } - .cell.column-snapshot-created { - width: 16.5%; - } - .cell.column-pci-status { - width: 3.7%; - .fa { - color: $guests-color; - font-size: 24px; - } - } - .cell.column-pci-name { - width: 21%; - } - .cell.column-product { - width: 45%; - } - .cell.column-vendor { - width: 24.1%; - } - } - .header { - background: $table-bg; - display: block; - border-bottom: 1px solid $table-border-color; - overflow: hidden; - clear: both; - > span { - padding: $table-cell-padding; - display: inline-block; - 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; - &.column-actions { - height: 36px; - } - } - } - .body { - overflow-y: auto; - overflow-x: hidden; - height: 471px; - } - .body, - .task { - .item { - border-top: 1px solid $table-border-color; - height: 53px; - &:first-child { - border-top: 0; - } - &:nth-child(even) { - background-color: $table-bg-accent; - } - &:nth-child(odd) { - background-color: $table-bg; - } - > span { - padding: $table-cell-padding; - display: inline-block; - vertical-align: middle; - input[type="text"] { - height: 40px; - } - input[readonly], - input[readonly]:hover, - input[readonly]:focus, - input[readonly]:active { - background-color: transparent !important; - border-color: transparent !important; - box-shadow: none !important; - border-radius: 0 !important; - text-overflow: ellipsis; - padding-right: 0 !important; - padding-left: 0 !important; - width: 100%; - } - } - } - } - } -} - -.guest-edit-snapshot .hide, -.guest-edit-interface .hide { - display: none !important; -} - -.guest-edit-pci { - .filter { - height: 40px; - overflow: visible; - clear: both; - } - .pull-right .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) { - width: 133px; - } - .filter input[type="text"].form-control { - width: 460px; - height: 40px; - float: right; - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - .filter .bootstrap-select.btn-group .btn .caret { - border-left: 0; - } - .filter button.btn.dropdown-toggle.form-control.selectpicker.btn-default { - border-top-right-radius: 0 !important; - border-bottom-right-radius: 0 !important; - background: $table-bg-accent; - border-right: 0; - } - .body { - overflow-y: auto; - overflow-x: hidden; - height: 442px !important; - } - .body .item.disabled input[type="text"].form-control { - color: $gray-light; - } - .body .item.disabled span.column-pci-status i { - display: none; - } -} - -.guest-edit-permission { - .pam { - height: 540px; - .column { - display: inline-block; - vertical-align: top; - } - .v-center { - min-height: 532px; - display: flex; - justify-content: center; - flex-flow: column wrap; - } - .center-block { - display: block; - margin-left: auto; - margin-right: auto; - } - .center-block + .center-block { - margin-top: 5px; - } - .title { - font-size: 13pt; - } - .body { - margin-top: 4px; - border-radius: 3px; - border: 1px solid $table-border-color; - height: 460px !important; - } - .body .head { - .item { - display: block; - padding: $table-cell-padding; - margin-bottom: 5px; - font-family: $font-family-light; - font-weight: 400; - font-size: 12.5pt; - vertical-align: bottom; - line-height: $line-height-base; - height: auto !important; - background: $table-bg; - border-top: 0; - border-bottom: 1px solid $table-border-color; - cursor: default; - } - } - .body > .column-user .item, - .body > .column-group .item { - height: auto !important; - margin-bottom: 0; - margin-left: 5px; - } - .body > .column-group .item { - margin-right: 5px; - } - .column-user label, - .column-group label { - cursor: pointer; - margin-bottom: 0; - margin-left: 5px; - width: 160px; - height: 24px; - line-height: 22px; - overflow: hidden; - text-overflow: ellipsis; - vertical-align: middle; - } - .body > .column .item { - background-color: $btn-default-bg !important; - border: 1px solid $table-border-color !important; - margin-bottom: 3px; - display: block; - padding: .2em .6em .3em; - font-weight: 700; - line-height: 1; - text-align: left; - white-space: nowrap; - vertical-align: middle; - border-radius: .25em; - overflow: hidden; - } - .body > .column .item:hover { - color: $btn-default-color !important; - background-color: #e6e6e6 !important; - border-color: #adadad !important; - label { - color: $btn-default-color !important; - } - } - .body > .column .item.item-picked { - color: $btn-primary-color !important; - background-color: $btn-primary-bg !important; - border-color: #1b1b1c !important; - outline: 5px auto -webkit-focus-ring-color; - outline-offset: -2px; - label { - color: $btn-primary-color !important; - } - } - } - .hide { - display: none; - } -} - -// .guest-edit-permission .pam .body .item:hover { -// background-color: #AAAAAA; -// } -// .guest-edit-permission .pam .body .item-picked { -// background-color: #BBBBBB; -// } -// .guest-edit-permission .pam .body .item .icon { -// display: inline-block; -// height: 15px; -// width: 15px; -// vertical-align: bottom; -// } -#form-guest-edit-permission .ldap .body .item { - margin: 8px 0; -} - -#form-guest-edit-permission .ldap .cell { - width: 250px; -} - -#form-guest-edit-permission .ldap .action-area { - float: right; - line-height: 24px; -} - -#form-guest-edit-permission .ldap .header button { - margin-bottom: 1px; -} - -#form-guest-edit-permission .ldap .checked { - border-color: red; - border-style: solid; - border-width: 1px; -} - -#form-guest-edit-permission .ldap .checked.hide { - display: none; -} - - -/* - * Project Kimchi - * - * Copyright IBM, Corp. 2014 - * - * 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. - */ - -#guest-storage-add-window {} - -#form-guest-storage-add .form-section .field { - overflow: visible; -} diff --git a/ui/css/src/modules/_guests.scss b/ui/css/src/modules/_guests.scss deleted file mode 100644 index f6b7a60..0000000 --- a/ui/css/src/modules/_guests.scss +++ /dev/null @@ -1,364 +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. -// - -/* 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; - } -} - -#guest-content-container { - .wok-guest-list { - display: block; - width: 100%; - padding: 0; - list-style-type: none; - > li:nth-child(even) { - background-color: $table-bg-accent; - } - > li:nth-child(odd) { - background-color: $table-bg; - } - > li:first-child { - border-top: 0; - } - .wok-guest-list-header { - border-top: 0 none; - height: 36px; - > span { - height: 36px; - padding: 6px 2px; - display: inline-block; - vertical-align: middle; - font-family: $font-family-sans-serif; - font-weight: 300; - font-size: 12.5pt; - line-height: 1.42857; - border-bottom: none; - border-top: 0; - overflow: hidden; - > span { - width: 100%; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - display: block; - } - } - } - .wok-guest-list-body { - border-top: 1px solid $table-border-color; - > span { - padding: 6px 2px; - display: inline-block; - vertical-align: middle; - font-family: $font-family-sans-serif; - font-size: 12.5pt; - line-height: 2.42857; - font-weight: 400; - } - .progress { - display: inline-block; - width: 60%; - position: relative; - vertical-align: top; - margin-top: 15px; - border-radius: 0; - -webkit-box-shadow: none; - box-shadow: none; - } - .progress-bar { - position: absolute; - top: 0; - left: 0; - -webkit-box-shadow: none; - box-shadow: none; - &.dark-grey { - background-color: map-get($guestCharts, darkGray); - } - &.medium-grey { - background-color: map-get($guestCharts, mediumGray); - } - &.light-grey { - background-color: map-get($guestCharts, lightGray); - } - } - div.percentage-label { - display: inline-block; - width: 25%; - margin-top: 6px; - } - div.measure-label { - display: inline-block; - width: 35%; - margin-top: 6px; - } - } - } - .wok-guest-list .wok-guest-list-header, - .wok-guest-list .wok-guest-list-body { - > span.column-state { - width: 40px; - text-align: center; - > span.guest-state { - font-size: 22px; - position: relative; - } - > span.guest-state.running > .fa-ban { - display: none; - } - > span.guest-state.running > .fa-power-off { - color: $fa-green; - } - > span.guest-state.running > .fa-undo { - display: none; - } - > span.guest-state.running > .fa-refresh { - display: none; - } - > span.guest-state.shutoff > .fa-ban { - color: $gray-light; - } - > span.guest-state.shutoff > .fa-power-off { - display: none; - } - > span.guest-state.shutoff > .fa-undo { - display: none; - } - > span.guest-state.shutoff > .fa-refresh { - display: none; - } - > span.guest-state.starting > .fa-ban { - display: none; - } - > span.guest-state.starting > .fa-power-off { - display: none; - } - > span.guest-state.starting > .fa-undo { - color: $gray-light; - } - > span.guest-state.starting > .fa-refresh { - display: none; - } - > span.guest-state.resetting > .fa-ban { - display: none; - } - > span.guest-state.resetting > .fa-power-off { - display: none; - } - > span.guest-state.resetting > .fa-undo { - display: none; - } - > span.guest-state.resetting > .fa-refresh { - color: $fa-green; - } - > span.guest-state.paused > .fa { - display: none; - } - } - > span.column-name { - width: 13.7%; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - @media (min-width: $screen-lg + 130) { - width: 9.7%; - } - @media (min-width: $screen-xlg) { - width: 14.15%; - } - } - > span.column-type { - width: 11.74%; - background-position: 0 50%; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - @media (min-width: $screen-lg + 130) { - width: 10.74%; - } - } - > span.column-vnc { - display: none; - > a { - font-weight: normal; - color: $vnc-blue !important; - } - .fa-spin { - display: none - } - .fa-spin.active { - display: inline-block; - margin-right: 8px; - font-size: 22px; - color: $vnc-blue !important; - } - @media (min-width: $screen-lg + 130) { - width: 10.84%; - display: inline-block; - } - } - > span.column-processors, - > span.column-memory, - > span.column-storage, - > span.column-network { - width: 12.5%; - } - > span.column-processors { - > div > div.progress-bar.cpu-progress-bar { - background-color: map-get($colors, administration); - } - } - > span.column-memory { - > div > div.progress-bar.memory-progress-bar { - background-color: map-get($colors, host); - } - } - > span.column-storage { - > div > div.progress-bar.storage-progress-bar { - background-color: $state-warning-border; - } - } - > span.column-network { - > div > div.progress-bar.network-progress-bar { - background-color: map-get($colors, network); - } - } - > span.column-action { - width: 165px; - } - > span.item-hidden { - display: none !important; - } - } - .wok-guest-list .distro-icon { - background-color: transparent; - background-size: 27px 27px; - background-repeat: no-repeat; - background-position: left; - } - .wok-guest-list .distro-icon.inactive { - -webkit-filter: grayscale(100%) contrast(0.8) brightness(110%); - -moz-filter: grayscale(100%) contrast(0.8) brightness(110%); - filter: grayscale(100%) contrast(0.8) brightness(110%); - } - .wok-guest-list .distro-icon.icon-centos { - background-image: url('#{$wok-icon-path}/icon-centos.png'); - } - .wok-guest-list .distro-icon.icon-debian { - background-image: url('#{$wok-icon-path}/icon-debian.png'); - } - .wok-guest-list .distro-icon.icon-fedora { - background-image: url('#{$wok-icon-path}/icon-fedora.png'); - } - .wok-guest-list .distro-icon.icon-opensuse { - background-image: url('#{$wok-icon-path}/icon-opensuse.png'); - } - .wok-guest-list .distro-icon.icon-ubuntu { - background-image: url('#{$wok-icon-path}/icon-ubuntu.png'); - } - .wok-guest-list .distro-icon.icon-gentoo { - background-image: url('#{$wok-icon-path}/icon-gentoo.png'); - } - .wok-guest-list .distro-icon.icon-unknown { - background-image: url('#{$wok-icon-path}/icon-unknown.png'); - } - .wok-guest-list .wok-guest-list-body.inactive { - color: $disabled-color !important; - } -} - -// #guests-root-container .container { -// @media (min-width: $screen-lg-min) { -// padding-left: 0; -// padding-right: 0; -// } -// @media (min-width: 1600px) { -// padding-left: 80px; -// padding-right: 60px; -// } -// } \ No newline at end of file diff --git a/ui/css/src/modules/_iso-list.scss b/ui/css/src/modules/_iso-list.scss deleted file mode 100644 index 9155176..0000000 --- a/ui/css/src/modules/_iso-list.scss +++ /dev/null @@ -1,126 +0,0 @@ -// -// 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, - ul#list-remote-iso input[type="checkbox"].iso-checkbox-hidden { - display: none; - } - label.box-iso-outer { - cursor: pointer; - } - ul#list-local-iso li.col-md-3, - ul#list-remote-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 40px 13px 20px; - background-color: transparent; - background-position: right 10px center; - background-repeat: no-repeat; - background-size: auto 27px; - background-origin: padding-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'); - } - &.unknown { - background-image: url('#{$wok-icon-path}/icon-unknown.png'); - } - } -} diff --git a/ui/css/src/modules/_line-chart.scss b/ui/css/src/modules/_line-chart.scss deleted file mode 100644 index 66dc985..0000000 --- a/ui/css/src/modules/_line-chart.scss +++ /dev/null @@ -1,210 +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. -// - -.chart-container { - background: #fff; -} - -.line-chart { - overflow: hidden; -} - -.line-chart .background { - fill: #fff; -} - -.line-chart text { - color: red; - font-size: 12px; -} - -.line-chart polyline { - fill: none; - stroke-width: 3px; - stroke-linejoin: round; -} - -#container-chart-cpu{ - - .line-chart polyline { - stroke: #d9182d; - } - - .line-chart path { - fill: url(#patternbg); - } - -} - -#container-chart-memory { - - .line-chart polyline { - stroke: #008abf; - } - - .line-chart path { - fill: url(#patternbg); - } - -} - -#container-chart-disk-io { - - .line-chart polyline { - stroke: #00a6a0; - - &.disk-write { - stroke: #fdb813; - } - - } - - .line-chart path { - fill: none; - &.disk-write { - fill: url(#patternbg); - } - - } - -} - - -#container-chart-network-io { - - .line-chart polyline { - stroke: #7f1c7d; - - &.network-sent { - stroke: #8cc63f; - } - } - - .line-chart path { - fill: none; - &.network-sent { - fill: url(#patternbg); - } - } -} - -.chart-container, -.chart-legend-container, -.chart-label { - display: inline-block; - vertical-align: top; -} - -.chart-legend-container { - width: 310px; - white-space: nowrap; - margin-bottom: 40px; - margin-right: 0; -} - -.chart-vaxis-container { - width: 120px; - position: absolute; - text-align: left; - display: block; - height: 22px; - margin-left: 15px; - top: 78px; - font-size: 13pt; - font-weight: 300; - white-space: nowrap; -} - -#disk-dashboard .chart-vaxis-container, -#network-dashboard .chart-vaxis-container { - top: 99px; -} - -.chart-legend-container .legend-wrapper { - margin: 0; - position: relative; - height: 40px; - width: 120px; - white-space: nowrap; -} - -#disk-dashboard, #network-dashboard { - - .legend-wrapper { - width: 134px; - float: left; - } - - span.legend-string { - display: block; - margin-top: -16px; - white-space: nowrap; - } - -} - -#disk-dashboard .legend-wrapper:first-child { - width: 162px; - margin-right: 7px; -} - -#network-dashboard .legend-wrapper { - float: right !important; - margin-right: 14px; -} - -#network-dashboard .legend-wrapper:first-child { - width: 118px; - margin-left: 30px; -} - -.chart-legend-container .legend-icon { - position: absolute; - top: 0; - left: 0; - width: 5px; -} - -.chart-legend-container span.legend-label, .chart-legend-container span.legend-string { - font-size: 18px; - font-family: "HelveticaNeueBold", "HelveticaNeue-Bold", "HelveticaNeue Bold", "Helvetica Neue Bold", "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif; -} - -.chart-legend-container span.legend-label { - margin: 0 3px; -} - -.chart-legend-container .latest-value { - position: relative; - text-align: left; - display: inline-block; - height: 22px; - margin-left: 15px; - - span.number { - top: -9px; - position: relative; - vertical-align: top; - font-weight: 700; - font-size: 27px; - font-family: "HelveticaNeueBold", "HelveticaNeue-Bold", "HelveticaNeue Bold", "Helvetica Neue Bold", "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif; - } - -} \ No newline at end of file diff --git a/ui/css/src/modules/_loaders.scss b/ui/css/src/modules/_loaders.scss index 49a14ce..de787e8 100644 --- a/ui/css/src/modules/_loaders.scss +++ b/ui/css/src/modules/_loaders.scss @@ -16,6 +16,16 @@ // limitations under the License. // +.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; +} + .wok-mask, .wok-grid-mask, .wok-list-mask { @extend .absolute-middle; background: rgba(255,255,255,.7); diff --git a/ui/css/src/modules/_network.scss b/ui/css/src/modules/_network.scss deleted file mode 100644 index 0f7a617..0000000 --- a/ui/css/src/modules/_network.scss +++ /dev/null @@ -1,121 +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. -// - -.network-config input.invalid-field[type="text"] { - border-color: #FF4444; -} - -.network-config input.invalid-field[type="text"][disabled] { - border-color: #666666; -} - - -#add-network-window { - - #vlan-enabled { - padding-left: 26px; - - label, input[type="text"] { - display: block; - } - - } - -} - -#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; - } - - .up .fa { - color: $fa-green; - } - - .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: 11.3896%; - } - - > span.column-interface { - width: 10.3896%; - } - - > span.column-space { - width: 30%; - } - - > 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 deleted file mode 100644 index bbc0d38..0000000 --- a/ui/css/src/modules/_storage.scss +++ /dev/null @@ -1,391 +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. -// -// .handle { -// display: inline-block; -// font: normal normal normal 14px/1 FontAwesome; -// font-size: inherit; -// text-rendering: auto; -// -webkit-font-smoothing: antialiased; -// } -// .arrow-down:before { -// content: "\f078" -// } -// .arrow-up:before { -// content: "\f077" -// } -// .icon { -// padding-left: 30px; -// display: inline-block; -// } -#storage-root-container { - .wok-datagrid-body { - span > .fa { - font-size: 22px; - width: 20px; - height: 20px; - position: relative; - } - .handle { - user-select: none; - position: relative; - } - .active { - .handle { - cursor: pointer; - } - .fa-power-off { - color: $fa-green; - } - } - .inactive { - .handle { - cursor: default; - } - .fa-power-off { - display: none; - } - .usage-icon.icon-high { - background-image: url('#{$wok-icon-path}/high_disabled.png') !important; - } - .usage-icon.icon-med { - background-image: url('#{$wok-icon-path}/med_disabled.png') !important; - } - .usage-icon.icon-low { - background-image: url('#{$wok-icon-path}/low_disabled.png') !important; - } - } - } - .volumes { - width: 100%; - background: $navbar-default-toggle-hover-bg; - display: none; - > .footer { - z-index: 100; - } - .volumeslist { - padding: 11px; - max-height: 285px; - min-height: 136px; - overflow: auto; - } - .volume-box { - background: $navbar-inverse-toggle-icon-bar-bg; - padding: 4px 20px; - margin: 11px; - display: inline-block; - width: 409px; - height: 110px; - } - .volume-title { - height: 46px; - width: 100%; - border-bottom: 1px solid $input-border; - position: relative; - } - .volume-name { - font-size: 15pt; - font-weight: 300; - width: 274px; - line-height: 46px; - display: inline-block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - .volume-utilization { - vertical-align: top; - text-align: right; - display: inline-block; - width: 90px; - height: 46px; - line-height: 46px; - } - .volume-icon { - display: inline-block; - width: 27px; - height: 46px; - line-height: 46px; - background-repeat: no-repeat; - background-position: 50%; - background-color: transparent; - } - .volume-usage { - vertical-align: top; - font-size: 15pt; - font-weight: 400; - display: inline-block; - text-align: right; - line-height: 46px; - padding-left: 0; - margin-left: 5px; - } - .volume-icon.icon-high { - background-image: url('#{$wok-icon-path}/high.png'); - } - .volume-icon.icon-med { - background-image: url('#{$wok-icon-path}/med.png'); - } - .volume-icon.icon-low { - background-image: url('#{$wok-icon-path}/low.png'); - } - .volume-progress { - position: absolute; - margin: 0; - width: 409px; - top: -4px; - left: -20px; - .progress-bar-outer { - background: transparent; - height: 6px; - overflow: hidden; - width: 100%; - } - .progress-bar-inner { - background: $storages-low; - height: 100%; - width: 100%; - } - } - .volume-data { - margin: 0; - padding: 0; - list-style: none; - > li { - display: inline-block; - width: 89px; - span { - display: block; - font-size: 12pt; - } - span.value { - font-weight: 600; - } - span.key { - font-weight: 300; - } - } - } - .pool-empty { - text-align: center; - line-height: 136px; - } - } - .wok-datagrid > .wok-datagrid-body > .wok-datagrid-row[data-stat="inactive"] { - color: $gray-light !important; - } - .wok-datagrid > .wok-datagrid-header, - .wok-datagrid > .wok-datagrid-body > .wok-datagrid-row { - > span.column-state { - width: 3.0519%; - text-align: center; - } - > span.column-name { - width: 12.7272%; - text-overflow: ellipsis; - } - > span.column-type { - width: 11.6883%; - } - > span.column-location { - width: 21.4285%; - } - > span.column-usage { - width: 9.41558%; - .usage-icon { - padding-left: 35px; - display: inline-block; - background-repeat: no-repeat; - background-position: 0 50%; - background-color: transparent; - &.icon-high { - background-image: url('#{$wok-icon-path}/high.png'); - } - &.icon-med { - background-image: url('#{$wok-icon-path}/med.png'); - } - &.icon-low { - background-image: url('#{$wok-icon-path}/low.png'); - } - } - } - > span.column-capacity { - width: 8.701298%; - } - > span.column-allocated { - width: 9.35064%; - } - > span.column-disks { - text-align: center; - width: 2.9870%; - } - > span.column-action { - width: 20.64%; - text-align: right; - } - } - .wok-datagrid > .wok-datagrid-body > .wok-datagrid-row > span { - &.column-state { - height: 53px; - vertical-align: middle; - } - &.column-disks { - height: 53px; - vertical-align: middle; - .arrow-down, - .arrow-up { - display: inline-block; - font: normal normal normal 14px/1 FontAwesome; - font-size: inherit; - text-rendering: auto; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - } - .arrow-down:before { - content: "\f078"; - } - .arrow-up:before { - content: "\f077"; - } - } - } -} - -#storage-root-container #logicalPoolExtend { - .modal-body { - max-height: 438px; - p span { - vertical-align: middle !important; - } - } -} - -#storage-root-container #logicalPoolExtend, -.storage-modal { - form { - margin: 0 !important; - } - .host-partition { - overflow-y: auto; - overflow-x: hidden; - max-height: 430px; - label { - display: block; - > div { - vertical-align: top; - display: inline-block; - } - span.device-name, - span.device-path { - display: block; - } - span.device-name { - font-weight: 600; - overflow: hidden; - text-overflow: ellipsis; - } - span.device-path { - font-weight: 400; - word-wrap: break-word; - } - } - } -} - -#storage-root-container #logicalPoolExtend { - .host-partition label > div { - width: 388px; - span.device-path { - width: 388px; - } - } -} - -.storage-modal { - // Wok Popable - .filter-select.popable, - .storage-target-input, - .storage-add-input { - .popover { - max-width: 100% !important; - width: 100%; - top: 34px; - left: -2px; - border: 0 !important; - background: 0 !important; - box-shadow: none !important; - ul { - z-index: $zindex-dropdown; - padding: 5px 0; - margin: 2px 2px 0; - list-style: none; - font-size: $font-size-base; - text-align: left; - background-color: $dropdown-bg; - border: 1px solid $dropdown-fallback-border; - border: 1px solid $dropdown-border; - border-radius: $border-radius-base; - @include box-shadow(0 6px 12px rgba(0, - 0, - 0, - .175)); - background-clip: padding-box; - li { - cursor: pointer; - display: block; - padding: 3px 20px; - clear: both; - font-weight: normal; - line-height: $line-height-base; - color: $dropdown-link-color; - white-space: nowrap; - &:hover, - &:focus { - text-decoration: none; - color: $dropdown-link-hover-color; - background-color: $dropdown-link-hover-bg; - } - } - } - } - } - #nfspathId[style], - #nfsserverId[style] { - // overriding style definition - width: 100% !important; - } - .iscsi-section .form-group > .col-md-12 > .col-md-10 + .col-md-2 { - padding-left: 5px; - } - .iscsi-section .form-group > .col-md-12 > .col-md-10 { - padding-right: 5px; - } - .authenticationfield > div > .col-md-6 + .col-md-6 { - padding-left: 5px; - } - .authenticationfield > div > .col-md-6 { - padding-right: 5px; - } - .host-partition label > div { - width: 688px; - span.device-path { - width: 688px; - } - } -} diff --git a/ui/css/src/modules/_templates.scss b/ui/css/src/modules/_templates.scss deleted file mode 100644 index 5f4675f..0000000 --- a/ui/css/src/modules/_templates.scss +++ /dev/null @@ -1,315 +0,0 @@ -// -// 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-edit-window { - .tab-content .tab-pane { - position: relative; - } - form { - margin: 15px 0 0; - } - .hide { - display: none; - } - .form-template-inline-wrapper { - display: inline-block; - vertical-align: top; - } - .template-edit-wrapper-label { - vertical-align: top; - min-width: 100px; - height: 35px; - line-height: 35px; - margin: 7px 0 8px; - } - .template-edit-wrapper-controls { - vertical-align: top; - width: 400px; - vertical-align: top; - min-width: 100px; - height: 35px; - line-height: 35px; - margin: 7px 0 8px; - } - .template-tab-header { - background: $table-bg; - display: block; - border-bottom: 1px solid $table-border-color; - > span { - padding: $table-cell-padding; - display: inline-block; - font-family: $font-family-light; - font-weight: 400; - font-size: 12.5pt; - vertical-align: baseline; - border-bottom: none; - border-top: 0; - line-height: 42px; - height: 42px; - } - } - .template-tab-body { - .item { - border-top: 1px solid $table-border-color; - height: 53px; - &:first-child { - border-top: 0; - } - &:nth-child(even) { - background-color: $table-bg-accent; - } - &:nth-child(odd) { - background-color: $table-bg; - } - > span { - padding: $table-cell-padding; - display: inline-block; - vertical-align: middle; - input[type="text"].form-control { - height: 40px; - } - } - } - } - .manual { - margin-top: 5px; - margin-bottom: 10px; - } - .topology { - margin: 0 24px; - } - .topology .form-inline { - margin-bottom: 10px; - } - .template-storage-cell.storage-pool { - width: 220px !important; - } - .template-storage-cell.type { - width: 100px; - } - .template-storage-cell.disk { - width: 100px; - } - .template-storage-cell.format { - width: 320px; - } - .template-interface-cell.network { - width: 220px; - } - .template-interface-cell.type { - width: 250px; - } -} - -#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; - } -} - -/* VM List View classes*/ - -#templates-root-container { - .wok-vm-list { - display: block; - width: 100%; - list-style-type: none; - margin: 0; - padding-left: 0; - background: $table-bg; - .wok-vm-header { - border-bottom: 1px solid $table-first-row-border-color; - > span { - padding: $table-cell-padding; - display: inline-block; - vertical-align: bottom; - height: 36px; - font-family: $font-family-light; - font-weight: 300; - font-size: 12.5pt; - line-height: $line-height-base; - border-bottom: none; - border-top: 0; - background-color: $table-bg; - } - } - .wok-vm-body { - clear: both; - border-top: 1px solid $table-border-color; - &:first-child { - border-top: 0; - } - > span { - padding: $table-cell-padding; - display: inline-block; - vertical-align: top; - font-family: $font-family-sans-serif; - font-size: 12.5pt; - line-height: (1 + $line-height-base); - font-weight: 400; - } - .column-type { - padding-left: 40px !important; - } - } - .ul-body { - display: block; - width: 100%; - clear: both; - padding: 0; - margin: 0; - list-style: none; - > li:nth-child(even) { - background-color: $table-bg-accent; - } - > li:nth-child(odd) { - background-color: $table-bg; - } - } - .column-name { - width: 17.4900%; - font-weight: bold; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - } - .column-type { - width: 14.2435%; - font-weight: bold; - } - .column-version { - width: 14.2435%; - font-weight: bold; - } - .column-processors { - width: 12.8413%; - } - .column-memory { - width: 7.3800%; - } - .column-action { - width: 33.8000%; - } - .item-hidden { - display: none !important; - } - .distro-icon { - background-color: transparent; - background-size: 27px 27px; - background-repeat: no-repeat; - background-position: 8px 50%; - &.icon-centos { - background-image: url('#{$wok-icon-path}/icon-centos.png'); - } - &.icon-debian { - background-image: url('#{$wok-icon-path}/icon-debian.png'); - } - &.icon-fedora { - background-image: url('#{$wok-icon-path}/icon-fedora.png'); - } - &.icon-opensuse { - background-image: url('#{$wok-icon-path}/icon-opensuse.png'); - } - &.icon-ubuntu { - background-image: url('#{$wok-icon-path}/icon-ubuntu.png'); - } - &.icon-gentoo { - background-image: url('#{$wok-icon-path}/icon-gentoo.png'); - } - &.icon-unknown { - background-image: url('#{$wok-icon-path}/icon-unknown.png'); - } - } - } -} diff --git a/ui/css/src/modules/_utils.scss b/ui/css/src/modules/_utils.scss new file mode 100644 index 0000000..52b2379 --- /dev/null +++ b/ui/css/src/modules/_utils.scss @@ -0,0 +1,28 @@ +// +// 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. +// + +// Utils +.absolute-middle { + margin: auto; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + text-align: center; +} \ No newline at end of file diff --git a/ui/css/src/modules/_validation.scss b/ui/css/src/modules/_validation.scss index 914e423..4410c4a 100644 --- a/ui/css/src/modules/_validation.scss +++ b/ui/css/src/modules/_validation.scss @@ -1,3 +1,20 @@ +// +// 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. +// // Form validation .has-success { diff --git a/ui/css/src/wok.scss b/ui/css/src/wok.scss index 184606a..30cea78 100755 --- a/ui/css/src/wok.scss +++ b/ui/css/src/wok.scss @@ -60,8 +60,6 @@ @import "modules/buttons"; // Dropdown Button - Flat @import "modules/menu-flat"; -// Line Charts -@import "modules/line-chart"; // Wok Grid & Wok List @import "modules/wok-grid"; // Wok Datagrid @@ -74,46 +72,9 @@ @import "modules/wok-confirm"; // Form validation classes @import "modules/validation"; - -@import "modules/iso-list"; - +// Wok About @import "modules/about"; - -@import "modules/guests"; - -@import "modules/edit-guests"; - -@import "modules/templates"; - -@import "modules/network"; - -@import "modules/storage"; - // Utils -.absolute-middle { - margin: auto; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - 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; -} - +@import "modules/utils"; // Animation -@import "modules/animation"; - -// Documentation -pre { - margin-top: 20px; -} \ No newline at end of file +@import "modules/animation"; \ No newline at end of file diff --git a/ui/pages/wok-ui.html.tmpl b/ui/pages/wok-ui.html.tmpl index e315b91..b75cf50 100644 --- a/ui/pages/wok-ui.html.tmpl +++ b/ui/pages/wok-ui.html.tmpl @@ -130,7 +130,7 @@ <div class="container" id="navigation-bar"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-menu" aria-expanded="false"> - <span class="sr-only">Toggle navigation</span> + <span class="sr-only">$_("Toggle navigation")</span> <span class="icon-bar"><!-- Hamburguer button here --></span> </button> </div> -- 1.9.3