[Kimchi-devel] [PATCH 04/10] [new-ui] Updated SCSS files
sguimaraes943 at gmail.com
sguimaraes943 at gmail.com
Tue Nov 10 21:17:33 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 | 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;
+ }
+
> 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..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";
-
- 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,29 +119,64 @@
text-align: center;
}
-// Animation
- at 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;
+}
- at 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;
}
- at media screen and (min-width: 1680px) {
+// Animation
+ at import "modules/animation";
+// Documentation
+pre {
+ margin-top: 20px;
+}
- .container {
- width: 1680px;
- }
+// Media queries
+ at media screen and (min-width: 768px) {
+ .container {
+ width: 1540px;
+ }
+}
-}
\ No newline at end of file
+ at media screen and (min-width: 1680px) {
+ .container {
+ width: 1680px;
+ }
+}
--
1.9.3
More information about the Kimchi-devel
mailing list