[Kimchi-devel] [PATCH 1/9] Adding new-ui base templates and widgets - SCSS

From: samhenri <samuel.guimaraes(a)eldorado.org.br&gt; Signed-off-by: samhenri <samuel.guimaraes(a)eldorado.org.br&gt; --- 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; + } + 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 @@ 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"; -@import "modules/host"; - +// Line Charts @import "modules/line-chart"; // Wok Grid & Wok List @import "modules/wok-grid"; +// Wok Datagrid +@import "modules/datagrid"; + +// Wok Confirm Dialog +@import "modules/wok-confirm"; + +// Wok jQuery-UI Accordion +@import "modules/jqueryui"; + +// Wok ISO / VM / Template list +@import "modules/iso-list"; + +// To do - Group into Kimchi + +// Templates - To do: move to Kimchi +@import "modules/guests"; + +// Templates - To do: move to Kimchi +@import "modules/templates"; + +// Networks - To do: move to Kimchi +@import "modules/network"; + +// Networks - To do: move to Kimchi +@import "modules/storage"; + +// Admin - To do: move to Ginger +@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