[Kimchi-devel] [PATCH 04/10] [new-ui] Updated SCSS files

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 | 4 + ui/css/src/modules/_administration.scss | 0 ui/css/src/modules/_datagrid.scss | 72 +++++++++++++++++ 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 | 12 ++- ui/css/src/modules/_toolbar.scss | 29 +++++-- ui/css/src/modules/_wok-confirm.scss | 42 ++++++++++ ui/css/src/modules/_wok-grid.scss | 25 +++++- ui/css/src/modules/_wok-variables.scss | 11 +-- ui/css/src/wok.scss | 132 ++++++++++++++++++++++---------- 12 files changed, 284 insertions(+), 61 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/_jqueryui.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..5667dfd 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; @@ -58,6 +59,9 @@ border-left-color: darken($btn-default-border, 25%); } } + .dropdown-menu { + z-index: 2035; + } .dropdown-menu li a { outline: none; } 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/_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..5518fc6 100644 --- a/ui/css/src/modules/_navbar-flat.scss +++ b/ui/css/src/modules/_navbar-flat.scss @@ -188,7 +188,7 @@ background: transparent url($kimchi-logo) no-repeat 24px 3px; color: $highlights-color; font-family: $font-family-bold; - font-weight: 600; + font-weight: 700; font-size: 1.571em; line-height: 55px; cursor: default; @@ -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; @@ -576,7 +576,7 @@ margin: 0 !important; font-size: 13pt; font-family: $font-family-bold; - font-weight: 600; + font-weight: 700; color: $navbar-default-link-color; text-decoration: none; outline: none; @@ -641,7 +641,11 @@ &, &:hover, &:focus { + height: 41px; background-color: $bgcolor !important; + @if $page == 'storage' { + color: $gray-base !important; + } } } } diff --git a/ui/css/src/modules/_toolbar.scss b/ui/css/src/modules/_toolbar.scss index eaa962f..744d48d 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: 600; + width: auto; + min-width: auto; } span, .fa { @@ -52,7 +66,12 @@ @each $page, $bgcolor in $colors { -##{$page}-root-container .toolbar { +##{$page}-root-container .navbar-default.toolbar { background-color: $bgcolor !important; + @if $page == 'storage' { + .navbar-right.tools > li > a { + color: $gray-base !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/modules/_wok-variables.scss b/ui/css/src/modules/_wok-variables.scss index 492846d..d67672d 100644 --- a/ui/css/src/modules/_wok-variables.scss +++ b/ui/css/src/modules/_wok-variables.scss @@ -42,6 +42,7 @@ $brand-info: #5bc0de !default; $brand-warning: #f0ad4e !default; $brand-danger: #d9534f !default; $kimchi-dropdown: #4d4c4e !default; +$storages-low: #8BC53E !default; //## Kimchi default colors - TODO remove these references and link do Sass Maps below @@ -86,14 +87,14 @@ $link-hover-decoration: underline !default; // //## Font, line-height, and color for body text, headings, and more. -$font-family-sans-serif: "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif !default; +$font-family-sans-serif: 'Open Sans', Helvetica, Arial, "Lucida Grande", sans-serif !default; $font-family-serif: Georgia, "Times New Roman", Times, serif !default; //** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`. $font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default; $font-family-base: $font-family-sans-serif !default; -$font-family-light: "HelveticaNeueLight", "HelveticaNeue-Light", "HelveticaNeue Light", "HelveticaNeue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif !default; -$font-family-bold: "HelveticaNeueBold", "HelveticaNeue-Bold", "HelveticaNeue Bold", "Helvetica Neue Bold", "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif !default; -$font-family-alternate: "Helvetica Neue LT W1G 55 Roman", "Helvetica Neue LT W1G", "HelveticaNeue Roman", "HelveticaNeue-Roman", "Helvetica Neue Roman", "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif !default; +$font-family-light: $font-family-sans-serif !default; +$font-family-bold: $font-family-sans-serif !default; +$font-family-alternate: $font-family-sans-serif !default; $font-size-base: 14px !default; @@ -241,7 +242,7 @@ $btn-border-radius-small: $border-radius-small !default; //** `<input>` background color $input-bg: #fff !default; //** `<input disabled>` background color -$input-bg-disabled: $gray-lighter !default; +$input-bg-disabled: #eee !default; //** Text color for `<input>`s $input-color: $gray !default; diff --git a/ui/css/src/wok.scss b/ui/css/src/wok.scss index 9c0dee2..cdb0430 100755 --- a/ui/css/src/wok.scss +++ b/ui/css/src/wok.scss @@ -20,37 +20,35 @@ // Core variables @import "modules/wok-variables"; - // Compass Mixins @import "vendor/compass-mixins/lib/compass"; - // Override Bootstrap CSS .container { - margin-right: auto; - margin-left: auto; - padding-left: 80px !important; - padding-right: 60px !important; + margin-right: auto; + margin-left: auto; + padding-left: 80px !important; + padding-right: 60px !important; } // Override alert - .alert { - border-width: $alert-border-width; - margin-bottom: 10px; + border-width: $alert-border-width; + margin-bottom: 10px; } .alert-fields { - margin-top: -20px; - padding-bottom: 10px; + margin-top: -20px; + padding-bottom: 10px; } -.alert-dismissable .close, .alert-dismissible .close { +.alert-dismissable .close, +.alert-dismissible .close { right: 15px !important; top: 0 !important; } .close { - opacity: 1 !important; + opacity: 1 !important; } .hide-content { @@ -58,39 +56,58 @@ } .help-block { - color: #aaa; + color: #aaa; } // Override panels - .panel { - @include box-shadow(none); + box-shadow: none !important; + -webkit-box-shadow: none !important; } .panel-title { - font-size: 21.5pt; + font-size: 21.5pt; } +// Override forms + + +.form-control.invalid-field { + border-color: $brand-danger; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(217, 83, 79, 0.6); +} // Login @import "modules/login"; - // Topbar and navigation @import "modules/toolbar"; - // Buttons @import "modules/buttons"; - // 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,29 +119,64 @@ text-align: center; } -// Animation -@import "modules/animation"; +.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; +} -// Documentation +// Custom check-boxes and radios +input[type=checkbox].wok-checkbox, +input[type=radio].wok-radio { + display: none; +} -pre { - margin-top: 20px; +input[type=checkbox].wok-checkbox + label:before, +input[type=radio].wok-radio + label:before { + font-family: FontAwesome; + display: inline-block; } -// Media queries +input[type=checkbox].wok-checkbox + label:before { + content: "\f096"; + letter-spacing: 10px; +} -@media screen and (min-width: 768px) { +input[type=checkbox].wok-checkbox:checked + label:before { + content: "\f14a"; + letter-spacing: 8px; +} - .container { - width: 1540px; - } +input[type=radio].wok-radio + label:before { + content: "\f10c"; + letter-spacing: 5px; +} +input[type=radio].wok-radio:checked + label:before { + content: "\f192"; + letter-spacing: 5px; } -@media screen and (min-width: 1680px) { +// Animation +@import "modules/animation"; +// Documentation +pre { + margin-top: 20px; +} - .container { - width: 1680px; - } +// Media queries +@media screen and (min-width: 768px) { + .container { + width: 1540px; + } +} -} \ No newline at end of file +@media screen and (min-width: 1680px) { + .container { + width: 1680px; + } +} -- 1.9.3