[Kimchi-devel] [PATCH 3/6] Adding new-ui sass source files

From: samhenri <samuel.guimaraes@eldorado.org.br> Signed-off-by: samhenri <samuel.guimaraes@eldorado.org.br> --- .gitignore | 4 + ui/css/Makefile.am | 6 +- ui/css/src/bootstrap-select.custom.scss | 65 +++ ui/css/src/bootstrap.custom.scss | 80 +++ ui/css/src/modules/_animation.scss | 31 + ui/css/src/modules/_base.scss | 33 ++ ui/css/src/modules/_buttons.scss | 28 + ui/css/src/modules/_host.scss | 169 ++++++ ui/css/src/modules/_line-chart.scss | 210 +++++++ ui/css/src/modules/_login.scss | 52 ++ ui/css/src/modules/_menu-flat.scss | 346 +++++++++++ ui/css/src/modules/_mixins.scss | 27 + ui/css/src/modules/_modal-flat.scss | 246 ++++++++ ui/css/src/modules/_navbar-flat.scss | 893 +++++++++++++++++++++++++++++ ui/css/src/modules/_tables-flat.scss | 259 +++++++++ ui/css/src/modules/_toolbar.scss | 58 ++ ui/css/src/modules/_wok-grid.scss | 121 ++++ ui/css/src/modules/_wok-variables.scss | 980 ++++++++++++++++++++++++++++++++ ui/css/src/wok.scss | 130 +++++ 19 files changed, 3737 insertions(+), 1 deletion(-) create mode 100644 ui/css/src/bootstrap-select.custom.scss create mode 100644 ui/css/src/bootstrap.custom.scss create mode 100644 ui/css/src/modules/_animation.scss create mode 100644 ui/css/src/modules/_base.scss create mode 100644 ui/css/src/modules/_buttons.scss create mode 100644 ui/css/src/modules/_host.scss create mode 100644 ui/css/src/modules/_line-chart.scss create mode 100644 ui/css/src/modules/_login.scss create mode 100644 ui/css/src/modules/_menu-flat.scss create mode 100644 ui/css/src/modules/_mixins.scss create mode 100644 ui/css/src/modules/_modal-flat.scss create mode 100644 ui/css/src/modules/_navbar-flat.scss create mode 100644 ui/css/src/modules/_tables-flat.scss create mode 100644 ui/css/src/modules/_toolbar.scss create mode 100644 ui/css/src/modules/_wok-grid.scss create mode 100644 ui/css/src/modules/_wok-variables.scss create mode 100755 ui/css/src/wok.scss diff --git a/.gitignore b/.gitignore index fdeffe4..d2eb180 100644 --- a/.gitignore +++ b/.gitignore @@ -39,6 +39,10 @@ src/wok/plugins/sample/po/POTFILES src/wok/plugins/sample/sample.conf po/POTFILES po/gen-pot +ui/css/wok.css +ui/css/bootstrap.custom.css +ui/css/bootstrap-select.custom.css +!ui/css/src/modules *.orig *.rej *.pem diff --git a/ui/css/Makefile.am b/ui/css/Makefile.am index c61120e..c67bb0e 100644 --- a/ui/css/Makefile.am +++ b/ui/css/Makefile.am @@ -22,7 +22,11 @@ SUBDIRS = fontawesome opensans EXTRA_DIST = theme-default cssdir = $(datadir)/wok/ui/css -dist_css_DATA = theme-default.min.css jquery-ui.custom.css +dist_css_DATA = theme-default.min.css jquery-ui.custom.css wok.css bootstrap.custom.css bootstrap-select.custom.css + +%.css: src/%.scss + echo "Compiling .scss file $<" + sassc -s expanded $< $(@:.scss=.css) theme-default.min.css: theme-default/*.css cat $^ > $@ diff --git a/ui/css/src/bootstrap-select.custom.scss b/ui/css/src/bootstrap-select.custom.scss new file mode 100644 index 0000000..49f9bc2 --- /dev/null +++ b/ui/css/src/bootstrap-select.custom.scss @@ -0,0 +1,65 @@ +/* + * 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. + */ + +@import "modules/wok-variables"; + +.bootstrap-select { + > .btn { + height: 40px; + } + &.btn-group { + .btn { + .caret { + top: 0; + right: 40px; + margin-top: 0; + vertical-align: top; + border: 0; + border-left: 1px solid $btn-default-border; + height: 38px; + } + .caret:before { + content: '\f078'; + font-family: "FontAwesome"; + font-size: 15px; + color: #666666; + position: absolute; + left: 12px; + top: 9px; + display: block; + } + &:hover .caret { + border-color: darken($btn-default-border, 12%); + } + &:focus .caret { + border-color: darken($btn-default-border, 25%); + } + } + &.open { + .btn .caret { + border-left-color: darken($btn-default-border, 12%); + } + .btn:hover .caret { + border-left-color: darken($btn-default-border, 25%); + } + } + .dropdown-menu li a { + outline: none; + } + } +} diff --git a/ui/css/src/bootstrap.custom.scss b/ui/css/src/bootstrap.custom.scss new file mode 100644 index 0000000..f04f3b8 --- /dev/null +++ b/ui/css/src/bootstrap.custom.scss @@ -0,0 +1,80 @@ +/* + * 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. + */ + +/*! + * Bootstrap v3.3.5 (http://getbootstrap.com) + * Copyright 2011-2015 Twitter, Inc. + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) + */ + + // VENDOR = Original Bootstrap files + + // MODULES = WOK customizations + + // License info in /modules is wrapped in single line comments won't be printed in the CSS + +// Core variables and mixins +@import "modules/wok-variables"; // Overriding Bootstrap variables +@import "vendor/bootstrap-sass/bootstrap/mixins"; + +// Reset and dependencies +@import "vendor/bootstrap-sass/bootstrap/normalize"; +@import "vendor/bootstrap-sass/bootstrap/print"; +//@import "vendor/bootstrap-sass/bootstrap/glyphicons"; // Removing Glyphicons due to Fedora font files legal issue + +// Core CSS +@import "vendor/bootstrap-sass/bootstrap/scaffolding"; +@import "vendor/bootstrap-sass/bootstrap/type"; +@import "vendor/bootstrap-sass/bootstrap/code"; +@import "vendor/bootstrap-sass/bootstrap/grid"; +@import "modules/tables-flat"; +@import "vendor/bootstrap-sass/bootstrap/forms"; +@import "vendor/bootstrap-sass/bootstrap/buttons"; + +// Components +@import "vendor/bootstrap-sass/bootstrap/component-animations"; +@import "vendor/bootstrap-sass/bootstrap/dropdowns"; +@import "vendor/bootstrap-sass/bootstrap/button-groups"; +@import "vendor/bootstrap-sass/bootstrap/input-groups"; +@import "vendor/bootstrap-sass/bootstrap/navs"; +@import "modules/navbar-flat"; +@import "vendor/bootstrap-sass/bootstrap/breadcrumbs"; +@import "vendor/bootstrap-sass/bootstrap/pagination"; +@import "vendor/bootstrap-sass/bootstrap/pager"; +@import "vendor/bootstrap-sass/bootstrap/labels"; +@import "vendor/bootstrap-sass/bootstrap/badges"; +@import "vendor/bootstrap-sass/bootstrap/jumbotron"; +@import "vendor/bootstrap-sass/bootstrap/thumbnails"; +@import "vendor/bootstrap-sass/bootstrap/alerts"; +@import "vendor/bootstrap-sass/bootstrap/progress-bars"; +@import "vendor/bootstrap-sass/bootstrap/media"; +@import "vendor/bootstrap-sass/bootstrap/list-group"; +@import "vendor/bootstrap-sass/bootstrap/panels"; +@import "vendor/bootstrap-sass/bootstrap/responsive-embed"; +@import "vendor/bootstrap-sass/bootstrap/wells"; +@import "vendor/bootstrap-sass/bootstrap/close"; + +// Components w/ JavaScript +@import "modules/modal-flat"; +@import "vendor/bootstrap-sass/bootstrap/tooltip"; +@import "vendor/bootstrap-sass/bootstrap/popovers"; +@import "vendor/bootstrap-sass/bootstrap/carousel"; + +// Utility classes +@import "vendor/bootstrap-sass/bootstrap/utilities"; +@import "vendor/bootstrap-sass/bootstrap/responsive-utilities"; diff --git a/ui/css/src/modules/_animation.scss b/ui/css/src/modules/_animation.scss new file mode 100644 index 0000000..fe5fa56 --- /dev/null +++ b/ui/css/src/modules/_animation.scss @@ -0,0 +1,31 @@ +// +// 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. +// + +.animate-spin { + @include animation(spin 2s infinite linear); + display: inline-block; +} + +@keyframes spin { + 0% { + @include transform(rotate(0deg)); + } + 100% { + @include transform(rotate(359deg)); + } +} \ No newline at end of file diff --git a/ui/css/src/modules/_base.scss b/ui/css/src/modules/_base.scss new file mode 100644 index 0000000..a79c9a3 --- /dev/null +++ b/ui/css/src/modules/_base.scss @@ -0,0 +1,33 @@ +// +// 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. +// + +/* Body specs */ + +body { + color: $text-color; + background: $body-bg; +} + + +/* Message warning users that some features might not be supported in old browsers */ +.browserupgrade { + margin: 0.2em 0; + background: #ccc; + color: #000; + padding: 0.2em 0; +} diff --git a/ui/css/src/modules/_buttons.scss b/ui/css/src/modules/_buttons.scss new file mode 100644 index 0000000..2942dac --- /dev/null +++ b/ui/css/src/modules/_buttons.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. +// + +@import '../vendor/bootstrap-sass/bootstrap/mixins/buttons'; + +.btn { + font-family: $font-family-base; + font-size: 13pt; +} + +.btn-login { + @include button-variant($btn-login-color, $btn-login-bg, $btn-login-border); +} \ No newline at end of file diff --git a/ui/css/src/modules/_host.scss b/ui/css/src/modules/_host.scss new file mode 100644 index 0000000..5c2d9f6 --- /dev/null +++ b/ui/css/src/modules/_host.scss @@ -0,0 +1,169 @@ +// +// 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/_line-chart.scss b/ui/css/src/modules/_line-chart.scss new file mode 100644 index 0000000..66dc985 --- /dev/null +++ b/ui/css/src/modules/_line-chart.scss @@ -0,0 +1,210 @@ +// +// 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/_login.scss b/ui/css/src/modules/_login.scss new file mode 100644 index 0000000..1d64893 --- /dev/null +++ b/ui/css/src/modules/_login.scss @@ -0,0 +1,52 @@ +// +// 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. +// + +.login-area { + margin: 90px auto 0; + width: 300px; + + .btn-login { + display: block; + position: static; + float: none; + margin-bottom: 50px; + } + + .col-md-12, .col-lg-12 { + width: 100%; + } + + .bootstrap-select, + .selectpicker { + font-family: $font-family-light; + font-size: 13pt; + } + + .dropdown-toggle.selectpicker { + height: 40px; + } + + .form-group { + margin-bottom: 20px; + } + + .form-group:last-child { + margin-bottom: 0; + } + +} diff --git a/ui/css/src/modules/_menu-flat.scss b/ui/css/src/modules/_menu-flat.scss new file mode 100644 index 0000000..9d7036b --- /dev/null +++ b/ui/css/src/modules/_menu-flat.scss @@ -0,0 +1,346 @@ +// +// 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. +// + +@import '../vendor/bootstrap-sass/bootstrap/mixins'; + +// +// Menu-Flat Drop-Down +// -------------------------------------------------- + +// Dropdown arrow/caret + +.menu-flat { + + .btn { + background: $kimchi-dropdown !important; + min-width: 160px; + border: 0 !important; + font-family: $font-family-bold; + font-weight: 700; + font-size: $font-size-btn; + position: relative; + height: 40px; + padding: 4px 45px 5px 38px; + + & > i { + font-size: 22px; + vertical-align: bottom; + width: 26px; + height: 40px; + text-align: left; + display: block; + position: absolute; + top: 0; + left: 6px; + } + + & > i:before { + line-height: 40px; + } + + + .edit-alt { + background: transparent url('#{$wok-icon-path}/edit-alt.svg') no-repeat 50% 50%; + background-size: 100%; + vertical-align: bottom; + width: 22px; + height: 40px; + display: block; + position: absolute; + top: 0; + left: 12px; + } + + } + + .caret { + position: absolute; + top: 0; + right: 0; + display: block; + width: 40px; + height: 40px; + margin-left: 0; + vertical-align: middle; + border-top: 0; + border-top: 0 \9; + border-right: 0; + border-left: 0; + + &:before { + content: '\f078'; + font: normal normal normal 14px/1 FontAwesome; + speak: none; + display: inline-block; + text-decoration: inherit; + width: 1.2em; + height: 1.2em; + margin: .5em; + text-align: center; + font-variant: normal; + text-transform: none; + line-height: 2em; + } + + } + + // The dropdown wrapper (div) + &.dropup, + &.dropdown { + position: relative; + } + + // Prevent the focus on the dropdown toggle when closing dropdowns + .dropdown-toggle:focus { + outline: 0; + } + + // The dropdown menu (ul) + .dropdown-menu { + position: absolute; + top: 100%; + left: 0; + z-index: $zindex-dropdown; + display: none; // none by default, but block on "open" of the menu + float: left; + min-width: 160px; + padding: 0; + margin: 0; // override default ul + list-style: none; + font-size: $font-size-btn; + text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer) + background-color: $menu-flat-dropdown-bg; + border: 0; + border-radius: 0; + @include box-shadow(none !important); + background-clip: padding-box; + + // Aligns the dropdown menu to right + // + // Deprecated as of 3.1.0 in favor of `.dropdown-menu-[dir]` + &.pull-right { + right: 0; + left: auto; + } + + // Dividers (basically an hr) within the dropdown + .divider { + @include nav-divider($menu-flat-dropdown-divider-bg); + } + + > li > a { + border-top: 1px solid $menu-flat-dropdown-border; + @include box-shadow(inset 0px 1px 0px 0px $menu-flat-dropdown-divider-bg); + } + + > li:first-child > a { + border-top: 1px solid $menu-flat-dropdown-bg; + @include box-shadow(none); + } + + > li.critical:last-child > a { + @include box-shadow(none); + } + + // Links within the dropdown menu + > li > a { + cursor: pointer; + display: block; + padding: 4px 6px; + clear: both; + font-weight: normal; + line-height: $line-height-menu-flat; + color: $menu-flat-text; + white-space: nowrap; // prevent links from randomly breaking onto new lines + + > i { + font-size: 22px; + margin-left: 8px; + vertical-align: middle; + width: 26px; + height: 26px; + text-align: left; + display: inline-block; + } + + } + } + + // Hover/Focus state + .dropdown-menu > li > a { + &:hover, + &:focus { + text-decoration: none; + color: $menu-flat-dropdown-link-hover-color; + background-color: $menu-flat-dropdown-link-hover-bg; + } + } + + // Active state + .dropdown-menu > .active > a { + &, + &:hover, + &:focus { + color: $menu-flat-dropdown-link-active-color; + text-decoration: none; + outline: 0; + background-color: $menu-flat-dropdown-link-active-bg; + } + } + + + .dropdown-menu > li.critical > a { + background: $menu-flat-dropdown-critical-bg; + } + + // Disabled state + // + // Gray out text and ensure the hover/focus state remains gray + + .dropdown-menu > .disabled > a { + &, + &:hover, + &:focus { + color: $dropdown-link-disabled-color; + } + + // Nuke hover/focus effects + &:hover, + &:focus { + text-decoration: none; + background-color: transparent; + background-image: none; // Remove CSS gradient + @include reset-filter; + cursor: $cursor-disabled; + } + } + + // Open state for the dropdown + &.open { + + .btn { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } + + // Show the menu + > .dropdown-menu { + display: block; + } + + .caret { + background: #3a393b; + } + + .caret:before { + content: '\f077'; + } + + // Remove the outline when :focus is triggered + > a { + outline: 0; + } + } + +} + +// Menu positioning +// +// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown +// menu with the parent. +.dropdown-menu-right { + left: auto; // Reset the default from `.dropdown-menu` + right: 0; +} +// With v3, we enabled auto-flipping if you have a dropdown within a right +// aligned nav component. To enable the undoing of that, we provide an override +// to restore the default dropdown menu alignment. +// +// This is only for left-aligning a dropdown menu within a `.navbar-right` or +// `.pull-right` nav component. +.dropdown-menu-left { + left: 0; + right: auto; +} + +// Dropdown section headers +.dropdown-header { + display: block; + padding: 3px 20px; + font-size: $font-size-small; + line-height: $line-height-base; + color: $dropdown-header-color; + white-space: nowrap; // as with > li > a +} + +// Backdrop to catch body clicks on mobile, etc. +.dropdown-backdrop { + position: fixed; + left: 0; + right: 0; + bottom: 0; + top: 0; + z-index: ($zindex-dropdown - 10); +} + +// Right aligned dropdowns +.pull-right > .dropdown-menu { + right: 0; + left: auto; +} + +// Allow for dropdowns to go bottom up (aka, dropup-menu) +// +// Just add .dropup after the standard .dropdown class and you're set, bro. +// TODO: abstract this so that the navbar fixed styles are not placed here? + +.dropup, +.navbar-fixed-bottom .dropdown { + // Reverse the caret + .caret { + border-top: 0; + border-bottom: $caret-width-base dashed; + border-bottom: $caret-width-base solid \9; // IE8 + content: ""; + } + // Different positioning for bottom up menu + .dropdown-menu { + top: auto; + bottom: 100%; + margin-bottom: 2px; + } +} + + +// Component alignment +// +// Reiterate per navbar.less and the modified component alignment there. + +@media (min-width: $grid-float-breakpoint) { + .navbar-right { + .dropdown-menu { + right: 0; left: auto; + } + // Necessary for overrides of the default right aligned menu. + // Will remove come v4 in all likelihood. + .dropdown-menu-left { + left: 0; right: auto; + } + } +} diff --git a/ui/css/src/modules/_mixins.scss b/ui/css/src/modules/_mixins.scss new file mode 100644 index 0000000..4e4ee3c --- /dev/null +++ b/ui/css/src/modules/_mixins.scss @@ -0,0 +1,27 @@ +// +// 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. +// + +// Mixins + +@mixin font-face($font-family, $file-path, $font-weight, $font-style) { + @font-face { + font-family: $font-family; + src: url('#{$file-path}.ttf') format('truetype'); /* Removed other Font Formats due Fedora Font Licensing Policy */ + font-weight: $font-weight; + font-style: $font-style; + } \ No newline at end of file diff --git a/ui/css/src/modules/_modal-flat.scss b/ui/css/src/modules/_modal-flat.scss new file mode 100644 index 0000000..8265140 --- /dev/null +++ b/ui/css/src/modules/_modal-flat.scss @@ -0,0 +1,246 @@ +// +// 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. +// + +// +// Modals +// -------------------------------------------------- + +// .modal-open - body class for killing the scroll +// .modal - container to scroll within +// .modal-dialog - positioning shell for the actual modal +// .modal-content - actual modal w/ bg and corners and shit + +// Kill the scroll on the body +.modal-open { + overflow: hidden; +} + +// Container that the modal scrolls within +.modal { + display: none; + overflow: hidden; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: $zindex-modal; + -webkit-overflow-scrolling: touch; + + // Prevent Chrome on Windows from adding a focus outline. For details, see + // https://github.com/twbs/bootstrap/pull/10951. + outline: 0; + + // When fading in the modal, animate it to slide down + &.fade .modal-dialog { + @include translate(0, -25%); + @include transition-transform(0.3s ease-out); + } + &.in .modal-dialog { @include translate(0, 0) } +} +.modal-open .modal { + overflow-x: hidden; + overflow-y: auto; +} + +// Shell div to position the modal with bottom padding +.modal-dialog { + position: relative; + width: auto; + margin: 10px; + border: 6px solid $modal-content-fallback-border-color; //old browsers fallback (ie8 etc) + border: 6px solid $modal-content-border-color; + border-radius: 5px; + background-clip: padding-box; +} + +// Actual modal +.modal-content { + position: relative; + background-color: $modal-content-bg; + border-radius: 0; + border: 3px solid #999; + background-clip: padding-box; + @include box-shadow(none !important); + border-radius: 0; + outline: 0; +} + + +// Modal background +.modal-backdrop { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: $zindex-modal-background; + background-color: $modal-backdrop-bg; + // Fade for backdrop + &.fade { @include opacity(0); } + &.in { @include opacity($modal-backdrop-opacity); } +} + +// Modal header +// Top section of the modal w/ title and dismiss +.modal-header { + padding: $modal-title-padding; + border-bottom: 1px solid $modal-header-border-color; + min-height: ($modal-title-padding + $modal-title-line-height); +} +// Close icon +.modal-header .close { + margin-top: -2px; +} + +// Title text within header +.modal-title { + margin: 0; + line-height: $modal-title-line-height; + font-size: 27px; + font-family: $font-family-light; + font-weight: 300 !important; +} + +// Modal body +// Where all modal content resides (sibling of .modal-header and .modal-footer) +.modal-body { + position: relative; + padding: $modal-inner-padding; +} + +// Footer (for actions) +.modal-footer { + padding: $modal-inner-padding; + text-align: left !important; + border-top: 0; + margin-top: 20px; + background-color: map-get($colors, guests); + @include clearfix; // clear it in case folks use .pull-* classes on buttons + + .btn { + padding: 6px 12px; + min-width: 75px; + } + + // Properly space out buttons + .btn + .btn { + margin-left: 5px; + margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs + } + // but override that for button groups + .btn-group .btn + .btn { + margin-left: -1px; + } + // and override it for block buttons as well + .btn-block + .btn-block { + margin-left: 0; + } +} + +// Measure scrollbar width for padding body during modal show/hide +.modal-scrollbar-measure { + position: absolute; + top: -9999px; + width: 50px; + height: 50px; + overflow: scroll; +} + +// Scale up the modal +@media (min-width: $screen-sm-min) { + // Automatically set modal's width for larger viewports + .modal-dialog { + width: $modal-md; + margin: 30px auto; + } + .modal-content { + @include box-shadow(0 5px 15px rgba(0,0,0,.5)); + } + + // Modal sizes + .modal-sm { width: $modal-sm; } +} + +@media (min-width: $screen-md-min) { + .modal-lg { width: $modal-lg; } +} + +.modal { + text-align: center; +} + +@media screen and (min-width: 768px) { + .modal:before { + display: inline-block; + vertical-align: middle; + content: " "; + height: 100%; + } +} + +.modal-dialog { + display: inline-block; + text-align: left; + vertical-align: middle; +} + +.modal label { + color: $gray-darker; + font-weight: 400; + font-family: $font-family-light; + font-size: 20px; +} + +// Tab-bar in Modal Window + +.modal-body .nav { + margin-left: -30px; + margin-right: -30px; +} + +.modal-body .nav-tabs { + border-bottom: 5px solid #eee; +} + +.modal-body .nav-tabs > li.active > a, .modal-body .nav-tabs > li.active > a:hover, .modal-body .nav-tabs > li.active > a:focus { + border: none; + border-radius: 0; + border-bottom: 5px solid map-get($colors, guests); + font-weight: 600; + padding: 8px 15px; +} + +.modal-body .nav-tabs > li { + margin-bottom: -5px; + width: 190px; +} + +.modal-body .nav-tabs > li > a { + font-size: 17px; + font-weight: 300; + font-family: $font-family-light; + border: none; + text-align: center; + border-radius: 0; + margin: 0; +} + +.modal-body .nav-tabs > li > a:hover { + background-color: transparent; +} \ No newline at end of file diff --git a/ui/css/src/modules/_navbar-flat.scss b/ui/css/src/modules/_navbar-flat.scss new file mode 100644 index 0000000..b54db68 --- /dev/null +++ b/ui/css/src/modules/_navbar-flat.scss @@ -0,0 +1,893 @@ +// +// 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. +// + +@import "../vendor/compass-mixins/lib/compass/css3/_user-interface.scss"; + +// +// Navbars +// -------------------------------------------------- + + +// Wrapper and base class +// +// Provide a static navbar from which we expand to create full-width, fixed, and +// other navbar variations. + +.navbar { + position: relative; + min-height: $navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode) + margin-bottom: $navbar-margin-bottom; + border: 0; + + // Prevent floats from breaking the navbar + @include clearfix; + + @media (min-width: $grid-float-breakpoint) { + border-radius: $navbar-border-radius; + } +} + + +// Navbar heading +// +// Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy +// styling of responsive aspects. + +.navbar-header { + @include clearfix; + + @media (min-width: $grid-float-breakpoint) { + float: left; + } +} + + +// Navbar collapse (body) +// +// Group your navbar content into this for easy collapsing and expanding across +// various device sizes. By default, this content is collapsed when <768px, but +// will expand past that for a horizontal display. +// +// To start (on mobile devices) the navbar links, forms, and buttons are stacked +// vertically and include a `max-height` to overflow in case you have too much +// content for the user's viewport. + +.navbar-collapse { + overflow-x: visible; + padding-right: $navbar-padding-horizontal; + padding-left: $navbar-padding-horizontal; + border-top: 1px solid transparent; + box-shadow: inset 0 1px 0 rgba(255,255,255,.1); + @include clearfix; + -webkit-overflow-scrolling: touch; + + &.in { + overflow-y: auto; + } + + @media (min-width: $grid-float-breakpoint) { + width: auto; + border-top: 0; + box-shadow: none; + + &.collapse { + display: block !important; + height: auto !important; + padding-bottom: 0; // Override default setting + overflow: visible !important; + } + + &.in { + overflow-y: visible; + } + + // Undo the collapse side padding for navbars with containers to ensure + // alignment of right-aligned contents. + .navbar-fixed-top &, + .navbar-static-top &, + .navbar-fixed-bottom & { + padding-left: 0; + padding-right: 0; + } + } +} + +.navbar-fixed-top, +.navbar-fixed-bottom { + .navbar-collapse { + max-height: $navbar-collapse-max-height; + + @media (max-device-width: $screen-xs-min) and (orientation: landscape) { + max-height: 200px; + } + } +} + + +// Both navbar header and collapse +// +// When a container is present, change the behavior of the header and collapse. + +.container, +.container-fluid { + > .navbar-header, + > .navbar-collapse { + margin-right: -$navbar-padding-horizontal; + margin-left: -$navbar-padding-horizontal; + + @media (min-width: $grid-float-breakpoint) { + margin-right: 0; + margin-left: 0; + } + } +} + + +// +// Navbar alignment options +// +// Display the navbar across the entirety of the page or fixed it to the top or +// bottom of the page. + +// Static top (unfixed, but 100% wide) navbar +.navbar-static-top { + z-index: $zindex-navbar; + border-width: 0 0 1px; + + @media (min-width: $grid-float-breakpoint) { + border-radius: 0; + } +} + +// Fix the top/bottom navbars when screen real estate supports it +.navbar-fixed-top, +.navbar-fixed-bottom { + position: fixed; + right: 0; + left: 0; + z-index: $zindex-navbar-fixed; + + // Undo the rounded corners + @media (min-width: $grid-float-breakpoint) { + border-radius: 0; + } +} +.navbar-fixed-top { + top: 0; + border-width: 0 0 1px; +} +.navbar-fixed-bottom { + bottom: 0; + margin-bottom: 0; // override .navbar defaults + border-width: 1px 0 0; +} + + +// Brand/project name + +.navbar-brand { + display: block; + margin: 0 0 0 -80px; + padding: 0 0 0 80px; + height: 55px; + background: transparent url($kimchi-logo) no-repeat 24px 3px; + color: $highlights-color; + font-family: $font-family-bold; + font-weight: 600; + font-size: 1.571em; + line-height: 55px; + cursor: default; + @include user-select(none); + + &:hover, + &:focus { + text-decoration: none; + } + + > img { + display: block; + } + + @media (min-width: $grid-float-breakpoint) { + .navbar > .container &, + .navbar > .container-fluid & { + margin-left: -80px; + } + } +} + + +// Navbar toggle +// +// Custom button for toggling the `.navbar-collapse`, powered by the collapse +// JavaScript plugin. + +.navbar-toggle { + position: relative; + float: right; + margin-right: $navbar-padding-horizontal; + padding: 9px 10px; + @include navbar-vertical-align(34px); + background-color: transparent; + background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214 + border: 1px solid transparent; + border-radius: $border-radius-base; + + // We remove the `outline` here, but later compensate by attaching `:hover` + // styles to `:focus`. + &:focus { + outline: 0; + } + + // Bars + .icon-bar { + display: block; + width: 22px; + height: 2px; + border-radius: 1px; + } + .icon-bar + .icon-bar { + margin-top: 4px; + } + + @media (min-width: $grid-float-breakpoint) { + display: none; + } +} + + +// Navbar nav links +// +// Builds on top of the `.nav` components with its own modifier class to make +// the nav the full height of the horizontal nav (above 768px). + +.navbar-nav { + margin: ($navbar-padding-vertical / 2) (-$navbar-padding-horizontal); + + > li > a { + padding-left: 40px; + padding-right: 40px; + line-height: $line-height-computed; + font-family: $font-family-alternate; + font-size: 13pt; + + > .fa { + font-size: 26px; + } + + } + + > li > a.dropdown-toggle { + padding-right: 22px; + padding-left: 22px; + } + + @media (max-width: $grid-float-breakpoint-max) { + // Dropdowns get custom display when collapsed + .open .dropdown-menu { + position: static; + float: none; + width: auto; + margin-top: 0; + background-color: transparent; + border: 0; + box-shadow: none; + > li > a, + .dropdown-header { + padding: 5px 15px 5px 25px; + } + > li > a { + line-height: $line-height-computed; + &:hover, + &:focus { + background-image: none; + } + } + } + } + + // Uncollapse the nav + @media (min-width: $grid-float-breakpoint) { + float: left; + margin: 0; + + > li { + float: left; + > a { + padding-top: $navbar-padding-vertical; + padding-bottom: $navbar-padding-vertical; + } + } + } +} + + +// Navbar form +// +// Extension of the `.form-inline` with some extra flavor for optimum display in +// our navbars. + +.navbar-form { + margin-left: -$navbar-padding-horizontal; + margin-right: -$navbar-padding-horizontal; + padding: 10px $navbar-padding-horizontal; + border-top: 1px solid transparent; + border-bottom: 1px solid transparent; + $shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1); + @include box-shadow($shadow); + + // Mixin behavior for optimum display + @include form-inline; + + .form-group { + @media (max-width: $grid-float-breakpoint-max) { + margin-bottom: 5px; + + &:last-child { + margin-bottom: 0; + } + } + } + + // Vertically center in expanded, horizontal navbar + @include navbar-vertical-align($input-height-base); + + // Undo 100% width for pull classes + @media (min-width: $grid-float-breakpoint) { + width: auto; + border: 0; + margin-left: 0; + margin-right: 0; + padding-top: 0; + padding-bottom: 0; + @include box-shadow(none); + } +} + + +// Dropdown menus + +// Menu position and menu carets + +.navbar-nav > li > a.dropdown-toggle > .caret { + border-top: 0; + border-left: 0; + border-right: 0; + border-bottom: 0; + margin-left: 10px; + width: 40px; + height: 39px; + + &:before { + content: '\f078'; + font: normal normal normal 14px/1 FontAwesome; + font-size: 13px; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-transform: translate(0, 0); + -ms-transform: translate(0, 0); + transform: translate(0, 0); + color: $navbar-default-color; + position: absolute; + top: 24px; + margin-left: 14px; + display: block; + } + +} + +.navbar-nav > li.dropdown.open > a > .caret { + background-color: $navbar-default-bg; + + &:before { + content: '\f077'; + } +} + +.navbar-right > li > a { + height: 49px; + + .fa { + margin-right: 15px; + } + + .topbar-text, .caret, .fa { + vertical-align: middle; + } +} + +.navbar-nav > li > .dropdown-menu { + padding: 0; + margin-top: 0; + background-color: $menu-flat-dropdown-bg; + border: 0; + border-radius: 0; + @include box-shadow(none !important); + background-clip: padding-box; + height: auto; + max-height: 400px; + overflow-x: hidden; + margin-right: 22px; + + > li { + display: block; + } + + > li > a, + > li > span { + margin: 0 !important; + display: block; + vertical-align: middle; + color: $menu-flat-text; + font-family: $font-family-sans-serif; + font-size: 13pt; + font-weight: normal; + line-height: 24px; + padding: 7px 30px; + height: 40px; + border-top: 1px solid $menu-flat-dropdown-border; + @include box-shadow(inset 0px 1px 0px 0px $menu-flat-dropdown-divider-bg); + clear: both; + white-space: nowrap; // prevent links from randomly breaking onto new lines + + &:hover, + &:focus { + text-decoration: none; + color: $menu-flat-dropdown-link-hover-color; + background-color: $menu-flat-dropdown-link-hover-bg; + } + + } + + > li > a > .fa { + vertical-align: middle; + font-size: 26px; + margin-right: 15px; + margin-left: -15px; + } + + > li.critical > a { + background: $menu-flat-dropdown-critical-bg; + } + +} + + .navbar-nav > li > .dropdown-menu::-webkit-scrollbar { + width: 12px; + } + + .navbar-nav > li > .dropdown-menu::-webkit-scrollbar-track { + @include box-shadow(inset 0 0 6px rgba(0,0,0,0.3)); + } + + .navbar-nav > li > .dropdown-menu::-webkit-scrollbar-thumb { + border-radius: 4px; + background: #797979; + border-left: 1px solid #B3B3B3; + @include box-shadow(inset 6px 1px 6px #9e9e9e); + } + + .navbar-nav > li > .dropdown-menu::-webkit-scrollbar-thumb:window-inactive { + } + + + +// Menu position and menu caret support for dropups via extra dropup class +.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu { + margin-bottom: 0; + @include border-top-radius($navbar-border-radius); + @include border-bottom-radius(0); +} + + +// Buttons in navbars +// +// Vertically center a button within a navbar (when *not* in a form). + +.navbar-btn { + @include navbar-vertical-align($input-height-base); + + &.btn-sm { + @include navbar-vertical-align($input-height-small); + } + &.btn-xs { + @include navbar-vertical-align(22); + } +} + + +// Text in navbars +// +// Add a class to make any element properly align itself vertically within the navbars. + +.navbar-text { + @include navbar-vertical-align($line-height-computed); + + @media (min-width: $grid-float-breakpoint) { + float: left; + margin-left: $navbar-padding-horizontal; + margin-right: $navbar-padding-horizontal; + } +} + + +// Component alignment +// +// Repurpose the pull utilities as their own navbar utilities to avoid specificity +// issues with parents and chaining. Only do this when the navbar is uncollapsed +// though so that navbar contents properly stack and align in mobile. +// +// Declared after the navbar components to ensure more specificity on the margins. + +@media (min-width: $grid-float-breakpoint) { + .navbar-left { + float: left !important; + } + .navbar-right { + float: right !important; + margin-right: -$navbar-padding-horizontal; + + ~ .navbar-right { + margin-right: 0; + } + } +} + + +// Alternate navbars +// -------------------------------------------------- + +// Default navbar +.navbar-default { + background-color: $navbar-default-bg; + border-color: $navbar-default-border; + + .navbar-brand { + color: $navbar-default-brand-color; + &:hover, + &:focus { + color: $navbar-default-brand-hover-color; + background-color: $navbar-default-brand-hover-bg; + } + } + + .navbar-text { + color: $navbar-default-color; + } + + .navbar-nav { + > li > a { + margin: 0 !important; + font-size: 13pt; + font-family: $font-family-bold; + font-weight: 600; + color: $navbar-default-link-color; + text-decoration: none; + outline: none; + min-width: 190px; + text-align: center; + height: $navbar-height; + + &:hover, + &:focus { + color: $navbar-default-link-hover-color; + background-color: $navbar-default-link-hover-bg; + } + + .digit-container { + display: inline-block; + margin-left: 10px; + margin-top: -2px; + border-radius: 16px; + height: 20px; + line-height: 16px; + background: #555; + border: 2px solid #555; + color: #fff; + font-family: $font-family-base; + font-size: 14px; + padding: 0 8px; + } + + } + > .active > a { + &, + &:hover, + &:focus { + color: $navbar-default-link-active-color; + background-color: $navbar-default-link-active-bg; + } + + .digit-container { + border-color: #fff; + background: transparent; + } + + } + > .disabled > a { + &, + &:hover, + &:focus { + cursor: default; + color: $navbar-default-link-disabled-color; + background-color: $navbar-default-link-disabled-bg; + } + + .digit-container { + display: none; + } + + } + + @each $page, $bgcolor in $colors { + + > .active > a.#{$page} { + &, + &:hover, + &:focus { + background-color: $bgcolor !important; + } + } + } + + > .hostname { + margin: 0; + padding: 8px 0; + vertical-align: top; + width: 180px; + padding-right: 24px; + @include box-sizing(border-box); + + .host-location { + display: block; + font-family: $font-family-alternate; + color: $highlights-color; + font-size: 13pt; + font-weight: 400; + width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + } + + } + + .navbar-toggle { + border-color: $navbar-default-toggle-border-color; + &:hover, + &:focus { + background-color: $navbar-default-toggle-hover-bg; + } + .icon-bar { + background-color: $navbar-default-toggle-icon-bar-bg; + } + } + + .navbar-collapse, + .navbar-form { + border-color: $navbar-default-border; + } + + // Dropdown menu items + .navbar-nav { + // Remove background color from open dropdown + > .open > a { + &, + &:hover, + &:focus { + background-color: $navbar-default-link-active-bg; + color: $navbar-default-link-active-color; + } + } + + @media (max-width: $grid-float-breakpoint-max) { + // Dropdowns get custom display when collapsed + .open .dropdown-menu { + > li > a { + color: $navbar-default-link-color; + &:hover, + &:focus { + color: $navbar-default-link-hover-color; + background-color: $navbar-default-link-hover-bg; + } + } + > .active > a { + &, + &:hover, + &:focus { + color: $navbar-default-link-active-color; + background-color: $navbar-default-link-active-bg; + } + } + > .disabled > a { + &, + &:hover, + &:focus { + color: $navbar-default-link-disabled-color; + background-color: $navbar-default-link-disabled-bg; + } + } + } + } + } + + + // Links in navbars + // + // Add a class to ensure links outside the navbar nav are colored correctly. + + .navbar-link { + color: $navbar-default-link-color; + &:hover { + color: $navbar-default-link-hover-color; + } + } + + .btn-link { + color: $navbar-default-link-color; + &:hover, + &:focus { + color: $navbar-default-link-hover-color; + } + &[disabled], + fieldset[disabled] & { + &:hover, + &:focus { + color: $navbar-default-link-disabled-color; + } + } + } +} + +// Inverse navbar + +.navbar-inverse { + background-color: $navbar-inverse-bg; + border-color: $navbar-inverse-border; + + .navbar-brand { + color: $navbar-inverse-brand-color; + &:hover, + &:focus { + color: $navbar-inverse-brand-hover-color; + background-color: $navbar-inverse-brand-hover-bg; + } + } + + .navbar-text { + color: $navbar-inverse-color; + } + + .navbar-nav { + > li > a { + color: $navbar-inverse-link-color; + + &:hover, + &:focus { + color: $navbar-inverse-link-hover-color; + background-color: $navbar-inverse-link-hover-bg; + } + } + > .active > a { + &, + &:hover, + &:focus { + color: $navbar-inverse-link-active-color; + background-color: $navbar-inverse-link-active-bg; + } + } + > .disabled > a { + &, + &:hover, + &:focus { + color: $navbar-inverse-link-disabled-color; + background-color: $navbar-inverse-link-disabled-bg; + } + } + } + + // Darken the responsive nav toggle + .navbar-toggle { + border-color: $navbar-inverse-toggle-border-color; + &:hover, + &:focus { + background-color: $navbar-inverse-toggle-hover-bg; + } + .icon-bar { + background-color: $navbar-inverse-toggle-icon-bar-bg; + } + } + + .navbar-collapse, + .navbar-form { + border-color: darken($navbar-inverse-bg, 7%); + } + + // Dropdowns + .navbar-nav { + > .open > a { + &, + &:hover, + &:focus { + background-color: $navbar-inverse-link-active-bg; + color: $navbar-inverse-link-active-color; + } + } + + @media (max-width: $grid-float-breakpoint-max) { + // Dropdowns get custom display + .open .dropdown-menu { + > .dropdown-header { + border-color: $navbar-inverse-border; + } + .divider { + background-color: $navbar-inverse-border; + } + > li > a { + color: $navbar-inverse-link-color; + &:hover, + &:focus { + color: $navbar-inverse-link-hover-color; + background-color: $navbar-inverse-link-hover-bg; + } + } + > .active > a { + &, + &:hover, + &:focus { + color: $navbar-inverse-link-active-color; + background-color: $navbar-inverse-link-active-bg; + } + } + > .disabled > a { + &, + &:hover, + &:focus { + color: $navbar-inverse-link-disabled-color; + background-color: $navbar-inverse-link-disabled-bg; + } + } + } + } + } + + .navbar-link { + color: $navbar-inverse-link-color; + &:hover { + color: $navbar-inverse-link-hover-color; + } + } + + .btn-link { + color: $navbar-inverse-link-color; + &:hover, + &:focus { + color: $navbar-inverse-link-hover-color; + } + &[disabled], + fieldset[disabled] & { + &:hover, + &:focus { + color: $navbar-inverse-link-disabled-color; + } + } + } +} diff --git a/ui/css/src/modules/_tables-flat.scss b/ui/css/src/modules/_tables-flat.scss new file mode 100644 index 0000000..906aeb7 --- /dev/null +++ b/ui/css/src/modules/_tables-flat.scss @@ -0,0 +1,259 @@ +// +// 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. +// + +// +// Tables +// -------------------------------------------------- + +table { + background-color: $table-bg; +} +caption { + padding-top: $table-cell-padding; + padding-bottom: $table-cell-padding; + color: $text-muted; + text-align: left; +} +th { + text-align: left; + +} + +// Baseline styles + +.table { + width: 100%; + max-width: 100%; + margin-bottom: $line-height-computed; + // Cells + > thead, + > tbody, + > tfoot { + > tr { + > th, + > td { + padding: $table-cell-padding; + line-height: $line-height-base; + vertical-align: top; + border-top: 1px solid $table-border-color; + } + } + } + // Bottom align for column headings + > thead > tr > th { +font-family: "HelveticaNeueLight", "HelveticaNeue-Light", "HelveticaNeue Light", "HelveticaNeue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-weight: 400; + font-size: 12.5pt; + vertical-align: bottom; + border-bottom: none; + border-top: 0; + } + + > tbody > tr > td { + font-size: 12.5pt; + } + // Remove top border from thead by default + > caption + thead, + > colgroup + thead, + > thead:first-child { + > tr:first-child { + > th, + > td { + border-top: 0; + } + } + } + // Account for multiple tbody instances + > tbody + tbody { + border-top: 2px solid $table-border-color; + } + + // Nesting + .table { + background-color: $body-bg; + } +} + + +// Condensed table w/ half padding + +.table-condensed { + > thead, + > tbody, + > tfoot { + > tr { + > th, + > td { + padding: $table-condensed-cell-padding; + } + } + } +} + + +// Bordered version +// +// Add borders all around the table and between all the columns. + +.table-bordered { + border: 1px solid $table-border-color; + > thead, + > tbody, + > tfoot { + > tr { + > th, + > td { + border: 1px solid $table-border-color; + } + } + } + > thead > tr { + > th, + > td { + border-bottom-width: 2px; + } + } +} + + +// Zebra-striping +// +// Default zebra-stripe styles (alternating gray and transparent backgrounds) + +.table-striped { + > tbody > tr:nth-of-type(odd) { + background-color: $table-bg-accent; + } +} + + +// Hover effect +// +// Placed here since it has to come after the potential zebra striping + +.table-hover { + > tbody > tr:hover { + background-color: $table-bg-hover; + } +} + + +// Table cell sizing +// +// Reset default table behavior + +table col[class*="col-"] { + position: static; // Prevent border hiding in Firefox and IE9-11 (see https://github.com/twbs/bootstrap/issues/11623) + float: none; + display: table-column; +} +table { + td, + th { + &[class*="col-"] { + position: static; // Prevent border hiding in Firefox and IE9-11 (see https://github.com/twbs/bootstrap/issues/11623) + float: none; + display: table-cell; + } + } +} + + +// Table backgrounds +// +// Exact selectors below required to override `.table-striped` and prevent +// inheritance to nested tables. + +// Generate the contextual variants +@include table-row-variant('active', $table-bg-active); +@include table-row-variant('success', $state-success-bg); +@include table-row-variant('info', $state-info-bg); +@include table-row-variant('warning', $state-warning-bg); +@include table-row-variant('danger', $state-danger-bg); + + +// Responsive tables +// +// Wrap your tables in `.table-responsive` and we'll make them mobile friendly +// by enabling horizontal scrolling. Only applies <768px. Everything above that +// will display normally. + +.table-responsive { + overflow-x: auto; + min-height: 0.01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837) + + @media screen and (max-width: $screen-xs-max) { + width: 100%; + margin-bottom: ($line-height-computed * 0.75); + overflow-y: hidden; + -ms-overflow-style: -ms-autohiding-scrollbar; + border: 1px solid $table-border-color; + + // Tighten up spacing + > .table { + margin-bottom: 0; + + // Ensure the content doesn't wrap + > thead, + > tbody, + > tfoot { + > tr { + > th, + > td { + white-space: nowrap; + } + } + } + } + + // Special overrides for the bordered tables + > .table-bordered { + border: 0; + + // Nuke the appropriate borders so that the parent can handle them + > thead, + > tbody, + > tfoot { + > tr { + > th:first-child, + > td:first-child { + border-left: 0; + } + > th:last-child, + > td:last-child { + border-right: 0; + } + } + } + + // Only nuke the last row's bottom-border in `tbody` and `tfoot` since + // chances are there will be only one `tr` in a `thead` and that would + // remove the border altogether. + > tbody, + > tfoot { + > tr:last-child { + > th, + > td { + border-bottom: 0; + } + } + } + + } + } +} diff --git a/ui/css/src/modules/_toolbar.scss b/ui/css/src/modules/_toolbar.scss new file mode 100644 index 0000000..eaa962f --- /dev/null +++ b/ui/css/src/modules/_toolbar.scss @@ -0,0 +1,58 @@ +// +// 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. +// + +.toolbar { + height: 40px; + padding: 0; + margin: 0; + overflow: hidden; + background: $navbar-default-bg; + + .tools { + height: 40px; + } + + 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; + } + + span, .fa { + display: inline-block; + vertical-align: middle + } + + .fa { + font-size: 24px; + margin-right: 15px; + } + +} + +@each $page, $bgcolor in $colors { + +##{$page}-root-container .toolbar { + background-color: $bgcolor !important; + } +} \ No newline at end of file diff --git a/ui/css/src/modules/_wok-grid.scss b/ui/css/src/modules/_wok-grid.scss new file mode 100644 index 0000000..cffaede --- /dev/null +++ b/ui/css/src/modules/_wok-grid.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. +// + +/* Bootstrap Tables override */ + +.table > tbody > tr:first-child > td { + border-color: $table-first-row-border-color; +} + +/* Wok Grid widget */ + +.wok-grid-content .btn-group { + padding-bottom: 16px; +} + +.wok-grid-mask { + top: 100px !important; +} + +.wok-list-mask { + top: 37px !important; +} + +.wok-grid-mask, .wok-list-mask { + @extend .absolute-middle; + background: rgba(255,255,255,.7); +} + +.wok-grid-loading, .wok-list-loading { + width: 100%; + white-space: nowrap; + @extend .absolute-middle; +} + +.wok-grid-loader-container, .wok-list-loader-container { + width: 120px; + height: 40px; + @extend .absolute-middle; +} + +.wok-grid-loading-icon, .wok-list-loading-icon{ + background: transparent url('#{$wok-icon-path}/spin5.svg') no-repeat 50% 50%; + @include animation(spin 2s infinite linear); + height: 20px; + width: 20px; + @extend .absolute-middle; +} + +.wok-grid-loading-text, .wok-list-loading-text { + color: $gray; + padding-top: 40px; + text-shadow: 0px 0px 10px #fff; +} + +.wok-list-cell { + position: relative; + padding-left: 45px; +} + +.wok-repository-status { + position: absolute; + left: 6px; + top: 0; +} + +.wok-repository-status .fa { + font-size: 23px; + color: #a8d46f; +} + +.wok-list-name, .wok-list-description { + display: block; +} + +.wok-list-name { + font-weight: 600; + font-size: 13pt; +} + +.wok-list-description { + font-weight: 300; + font-size: 10pt; + width: 196px; + overflow: hidden; +} + +.wok-list-content tbody tr, .wok-list-content tbody tr * { + @include user-select(none); +} + +.wok-list-content tbody tr:hover { + text-decoration: underline; + cursor: pointer; +} + +.wok-list-content tbody tr.selected { + background: #ddd; +} + +span.wok-repository-status.disabled { + display: none; +} + +.wok-list-cell.disabled span { + color: #999; +} diff --git a/ui/css/src/modules/_wok-variables.scss b/ui/css/src/modules/_wok-variables.scss new file mode 100644 index 0000000..492846d --- /dev/null +++ b/ui/css/src/modules/_wok-variables.scss @@ -0,0 +1,980 @@ +// +// 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. +// + +$bootstrap-sass-asset-helper: false !default; +// +// Variables +// -------------------------------------------------- + +$kimchi-logo: '/images/theme-default/logo-white.png'; +$wok-icon-path: '/images/theme-default'; +$icon-font-path: '/css/fontawesome/fontawesome-webfont.ttf'; + +//== Colors +// +//## Gray and brand colors for use across Bootstrap. + +$gray-base: #000 !default; +$gray-darker: #222 !default; +$gray-dark: $gray-darker !default; +$gray: #444 !default; +$gray-light: #999 !default; +$gray-lighter: #fff !default; + +$brand-primary: #3a393b !default; // #3a393b +$brand-success: #5cb85c !default; +$brand-info: #5bc0de !default; +$brand-warning: #f0ad4e !default; +$brand-danger: #d9534f !default; +$kimchi-dropdown: #4d4c4e !default; + + +//## Kimchi default colors - TODO remove these references and link do Sass Maps below + +$hosts-color: #008abf !default; +$guests-color: #8cc63f !default; +$templates-color: #00a6a0 !default; +$storage-color: #feb813 !default; +$networks-color: #7f1c7d !default; +$administration-color: #d9182d !default; + +$colors: ( + host: #008abf, + guests: #8cc63f, + templates: #00a6a0, + storage: #feb813, + network: #7f1c7d, + administration: #d9182d +); + + +//== Scaffolding +// +//## Settings for some of the most global styles. + +//** Background color for `<body>`. +$body-bg: #fff !default; +//** Global text color on `<body>`. +$text-color: $gray-darker !default; +$highlights-color: #fff !default; +$disabled-color: #999 !default; + +//** Global textual link color. +$link-color: $brand-primary !default; +//** Link hover color set via `darken()` function. +$link-hover-color: darken($link-color, 15%) !default; +//** Link hover decoration. +$link-hover-decoration: underline !default; + + +//== Typography +// +//## 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-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-size-base: 14px !default; +$font-size-large: ceil(($font-size-base * 1.25)) !default; // ~18px +$font-size-small: ceil(($font-size-base * 0.85)) !default; // ~12px +$font-size-btn: 13.5pt; + +$font-size-h1: 1.571em !default; +$font-size-h2: 22px !default; +$font-size-h3: 17px !default; +$font-size-h4: $font-size-base !default; +$font-size-h5: $font-size-base !default; +$font-size-h6: $font-size-base !default; + +//** Unit-less `line-height` for use in components like buttons. +$line-height-base: 1.428571429 !default; // 20/14 +//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc. +$line-height-computed: floor(($font-size-base * $line-height-base)) !default; // ~20px + +//** By default, this inherits from the `<body>`. +$headings-font-family: inherit !default; +$headings-font-weight: 500 !default; +$headings-line-height: 1.1 !default; +$headings-color: inherit !default; + + +//== Iconography +// +//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower. + +//** Load fonts from this directory. + +// [converter] If $bootstrap-sass-asset-helper if used, provide path relative to the assets load path. +// [converter] This is because some asset helpers, such as Sprockets, do not work with file-relative paths. +// $icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../fonts/bootstrap/") !default; + +//** File name for all font files. +// $icon-font-name: "glyphicons-halflings-regular" !default; +//** Element ID within SVG icon file. +// $icon-font-svg-id: "glyphicons_halflingsregular" !default; + + +//== Components +// +//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start). + +$padding-base-vertical: 6px !default; +$padding-base-horizontal: 12px !default; + +$padding-large-vertical: 10px !default; +$padding-large-horizontal: 16px !default; + +$padding-small-vertical: 5px !default; +$padding-small-horizontal: 10px !default; + +$padding-xs-vertical: 1px !default; +$padding-xs-horizontal: 5px !default; + +$line-height-large: 1.3333333 !default; // extra decimals for Win 8.1 Chrome +$line-height-small: 1.5 !default; + +$border-radius-base: 3px !default; +$border-radius-large: 3px !default; +$border-radius-small: 3px !default; + +//** Global color for active items (e.g., navs or dropdowns). +$component-active-color: #fff !default; +//** Global background color for active items (e.g., navs or dropdowns). +$component-active-bg: $brand-primary !default; + +//** Width of the `border` for generating carets that indicator dropdowns. +$caret-width-base: 4px !default; +//** Carets increase slightly in size for larger components. +$caret-width-large: 5px !default; + + +//== Tables +// +//## Customizes the `.table` component with basic values, each used across all table variations. + +//** Padding for `<th>`s and `<td>`s. +$table-cell-padding: 6px 2px !default; +//** Padding for cells in `.table-condensed`. +$table-condensed-cell-padding: 5px 0 !default; + +//** Default background color used for all tables. +$table-bg: #fff !default; +//** Background color used for `.table-striped`. +$table-bg-accent: #fcfcfc !default; +//** Background color used for `.table-hover`. +$table-bg-hover: #ddd !default; +$table-bg-active: $table-bg-hover !default; + +//** Border color for table and cell borders. +$table-border-color: #eee !default; +$table-first-row-border-color: #e3e3e3 !default; + + +//== Buttons +// +//## For each of Bootstrap's buttons, define text, background and border color. + +$btn-font-weight: normal !default; + +$btn-default-color: #444 !default; +$btn-default-bg: #fff !default; +$btn-default-border: #ccc !default; + +$btn-primary-color: #fff !default; +$btn-primary-bg: $brand-primary !default; +$btn-primary-border: $btn-primary-bg !default; + +$btn-login-color: #fff !default; +$btn-login-bg: #008abf !default; +$btn-login-border: $btn-login-bg !default; + +$btn-success-color: #fff !default; +$btn-success-bg: $brand-success !default; +$btn-success-border: $btn-success-bg !default; + +$btn-info-color: #fff !default; +$btn-info-bg: $brand-info !default; +$btn-info-border: $brand-info !default; + +$btn-warning-color: #fff !default; +$btn-warning-bg: $brand-warning !default; +$btn-warning-border: $brand-warning !default; + +$btn-danger-color: #fff !default; +$btn-danger-bg: $brand-danger !default; +$btn-danger-border: $brand-danger !default; + +$btn-link-disabled-color: $gray-light !default; + +// Allows for customizing button radius independently from global border radius +$btn-border-radius-base: $border-radius-base !default; +$btn-border-radius-large: $border-radius-large !default; +$btn-border-radius-small: $border-radius-small !default; + + +//== Forms +// +//## + +//** `<input>` background color +$input-bg: #fff !default; +//** `<input disabled>` background color +$input-bg-disabled: $gray-lighter !default; + +//** Text color for `<input>`s +$input-color: $gray !default; +//** `<input>` border color +$input-border: #ccc !default; + +// TODO: Rename `$input-border-radius` to `$input-border-radius-base` in v4 +//** Default `.form-control` border radius +// This has no effect on `<select>`s in some browsers, due to the limited stylability of `<select>`s in CSS. +$input-border-radius: $border-radius-base !default; +//** Large `.form-control` border radius +$input-border-radius-large: $border-radius-large !default; +//** Small `.form-control` border radius +$input-border-radius-small: $border-radius-small !default; + +//** Border color for inputs on focus +$input-border-focus: #66afe9 !default; + +//** Placeholder text color +$input-color-placeholder: #999 !default; + +//** Default `.form-control` height +$input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 2) !default; +//** Large `.form-control` height +$input-height-large: (ceil($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) !default; +//** Small `.form-control` height +$input-height-small: (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default; + +//** `.form-group` margin +$form-group-margin-bottom: 15px !default; + +$legend-color: $gray-dark !default; +$legend-border-color: #e5e5e5 !default; + +//** Background color for textual input addons +$input-group-addon-bg: $gray-lighter !default; +//** Border color for textual input addons +$input-group-addon-border-color: $input-border !default; + +//** Disabled cursor for form controls and buttons. +$cursor-disabled: not-allowed !default; + + +//== Dropdowns +// +//## Dropdown menu container and contents. + +//** Background for the dropdown menu. +$dropdown-bg: #fcfcfc !default; +//** Dropdown menu `border-color`. +$dropdown-border: #ccc !default; +//** Dropdown menu `border-color` **for IE8**. +$dropdown-fallback-border: #ccc !default; +//** Divider color for between dropdown items. +$dropdown-divider-bg: #eee !default; + +//** Dropdown link text color. +$dropdown-link-color: $gray-dark !default; +//** Hover color for dropdown links. +$dropdown-link-hover-color: darken($gray-dark, 5%) !default; +//** Hover background for dropdown links. +$dropdown-link-hover-bg: #f5f5f5 !default; + +//** Active dropdown menu item text color. +$dropdown-link-active-color: $component-active-color !default; +//** Active dropdown menu item background color. +$dropdown-link-active-bg: $component-active-bg !default; + +//** Disabled dropdown menu item background color. +$dropdown-link-disabled-color: $gray-light !default; + +//** Text color for headers within dropdown menus. +$dropdown-header-color: $gray-light !default; + +//** Deprecated `$dropdown-caret-color` as of v3.1.0 +$dropdown-caret-color: #000 !default; + + +//== Menu-Flat Dropdowns +// +//## Menu-Flat Dropdown menu container and contents. + +$menu-flat-text: #fff !default; +$menu-flat-dropdown-bg: #3a393b !default; +$line-height-menu-flat: 31px; +//** Menu-Flat Dropdown menu `border-color`. +$menu-flat-dropdown-border: #2e2e2e !default; +$menu-flat-dropdown-divider-bg: #404042 !default; +$menu-flat-dropdown-critical-bg: #d9182d !default; +//** Dropdown link text color. +$menu-flat-dropdown-link-color: $menu-flat-text !default; +//** Hover color for dropdown links. +$menu-flat-dropdown-link-hover-color: $menu-flat-text !default; +//** Hover background for dropdown links. +$menu-flat-dropdown-link-hover-bg: $menu-flat-dropdown-bg !default; +//** Active dropdown menu item text color. +$menu-flat-dropdown-link-active-color: $menu-flat-text !default; +//** Active dropdown menu item background color. +$menu-flat-dropdown-link-active-bg: $menu-flat-dropdown-bg !default; + + +//-- Z-index master list +// +// Warning: Avoid customizing these values. They're used for a bird's eye view +// of components dependent on the z-axis and are designed to all work together. +// +// Note: These variables are not generated into the Customizer. + +$zindex-navbar: 1000 !default; +$zindex-dropdown: 1000 !default; +$zindex-popover: 1060 !default; +$zindex-tooltip: 1070 !default; +$zindex-navbar-fixed: 1030 !default; +$zindex-modal-background: 1040 !default; +$zindex-modal: 1050 !default; + +//== Media queries breakpoints +// +//## Define the breakpoints at which your layout will change, adapting to different screen sizes. + +// Extra small screen / phone +//** Deprecated `$screen-xs` as of v3.0.1 +$screen-xs: 480px !default; +//** Deprecated `$screen-xs-min` as of v3.2.0 +$screen-xs-min: $screen-xs !default; +//** Deprecated `$screen-phone` as of v3.0.1 +$screen-phone: $screen-xs-min !default; + +// Small screen / tablet +//** Deprecated `$screen-sm` as of v3.0.1 +$screen-sm: 992px !default; +$screen-sm-min: $screen-sm !default; +//** Deprecated `$screen-tablet` as of v3.0.1 +$screen-tablet: $screen-sm-min !default; + +// Medium screen / desktop +//** Deprecated `$screen-md` as of v3.0.1 +$screen-md: 1200px !default; +$screen-md-min: $screen-md !default; +//** Deprecated `$screen-desktop` as of v3.0.1 +$screen-desktop: $screen-md-min !default; + +// Large screen / wide desktop +//** Deprecated `$screen-lg` as of v3.0.1 +$screen-lg: 1680 !default; +$screen-lg-min: $screen-lg !default; +//** Deprecated `$screen-lg-desktop` as of v3.0.1 +$screen-lg-desktop: $screen-lg-min !default; + +// So media queries don't overlap when required, provide a maximum +$screen-xs-max: ($screen-sm-min - 1) !default; +$screen-sm-max: ($screen-md-min - 1) !default; +$screen-md-max: ($screen-lg-min - 1) !default; + + +//== Grid system +// +//## Define your custom responsive grid. + +//** Number of columns in the grid. +$grid-columns: 12 !default; +//** Padding between columns. Gets divided in half for the left and right. +$grid-gutter-width: 0 !default; +// Navbar collapse +//** Point at which the navbar becomes uncollapsed. +$grid-float-breakpoint: $screen-sm-min !default; +//** Point at which the navbar begins collapsing. +$grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !default; + + +//== Container sizes +// +//## Define the maximum width of `.container` for different screen sizes. + +// Small screen / tablet +$container-tablet: (940px + $grid-gutter-width) !default; +//** For `$screen-sm-min` and up. +$container-sm: $container-tablet !default; + +// Medium screen / desktop +$container-desktop: (1140px + $grid-gutter-width) !default; +//** For `$screen-md-min` and up. +$container-md: $container-desktop !default; + +// Large screen / wide desktop +$container-large-desktop: (1540px + $grid-gutter-width) !default; +//** For `$screen-lg-min` and up. +$container-lg: $container-large-desktop !default; + + +//== Navbar +// +//## + +// Basics of a navbar +$navbar-height: 40px !default; +$navbar-margin-bottom: 0 !default; +$navbar-border-radius: 0 !default; +$navbar-padding-horizontal: floor(($grid-gutter-width / 2)) !default; +$navbar-padding-vertical: (($navbar-height - $line-height-computed) / 2) !default; +$navbar-collapse-max-height: 340px !default; + +$navbar-default-color: $highlights-color !default; +$navbar-default-bg: $brand-primary !default; +$navbar-default-border: $navbar-default-bg !default; + +// Navbar links +$navbar-default-link-color: $navbar-default-color !default; +$navbar-default-link-hover-color: $navbar-default-color !default; +$navbar-default-link-hover-bg: transparent !default; +$navbar-default-link-active-color: $navbar-default-color !default; +$navbar-default-link-active-bg: transparent !default; +$navbar-default-link-disabled-color: $disabled-color !default; +$navbar-default-link-disabled-bg: transparent !default; + +// Navbar brand label +$navbar-default-brand-color: $navbar-default-link-color !default; +$navbar-default-brand-hover-color: darken($navbar-default-brand-color, 10%) !default; +$navbar-default-brand-hover-bg: transparent !default; + +// Navbar toggle +$navbar-default-toggle-hover-bg: #ddd !default; +$navbar-default-toggle-icon-bar-bg: #888 !default; +$navbar-default-toggle-border-color: #ddd !default; + + +//=== Inverted navbar +// Reset inverted navbar basics +$navbar-inverse-color: $highlights-color !default; +$navbar-inverse-bg: #222 !default; +$navbar-inverse-border: $navbar-inverse-bg !default; + +// Inverted navbar links +$navbar-inverse-link-color: $highlights-color !default; +$navbar-inverse-link-hover-color: $navbar-inverse-link-color !default; +$navbar-inverse-link-hover-bg: transparent !default; +$navbar-inverse-link-active-color: $navbar-inverse-link-hover-color !default; +$navbar-inverse-link-active-bg: $navbar-inverse-link-hover-bg !default; +$navbar-inverse-link-disabled-color: #999 !default; +$navbar-inverse-link-disabled-bg: transparent !default; + +// Inverted navbar brand label +$navbar-inverse-brand-color: $highlights-color !default; +$navbar-inverse-brand-hover-color: $navbar-inverse-brand-color !default; +$navbar-inverse-brand-hover-bg: transparent !default; + +// Inverted navbar toggle +$navbar-inverse-toggle-hover-bg: transparent !default; +$navbar-inverse-toggle-icon-bar-bg: #fff !default; +$navbar-inverse-toggle-border-color: #333 !default; + + +//== Navs +// +//## + +//=== Shared nav styles +$nav-link-padding: 10px 15px !default; +$nav-link-hover-bg: $gray-lighter !default; + +$nav-disabled-link-color: $gray-light !default; +$nav-disabled-link-hover-color: $gray-light !default; + +//== Tabs +$nav-tabs-border-color: #ddd !default; + +$nav-tabs-link-hover-border-color: $gray-lighter !default; + +$nav-tabs-active-link-hover-bg: $body-bg !default; +$nav-tabs-active-link-hover-color: $gray !default; +$nav-tabs-active-link-hover-border-color: #ddd !default; + +$nav-tabs-justified-link-border-color: #ddd !default; +$nav-tabs-justified-active-link-border-color: $body-bg !default; + +//== Pills +$nav-pills-border-radius: $border-radius-base !default; +$nav-pills-active-link-hover-bg: $component-active-bg !default; +$nav-pills-active-link-hover-color: $component-active-color !default; + + +//== Pagination +// +//## + +$pagination-color: $link-color !default; +$pagination-bg: #fff !default; +$pagination-border: #ddd !default; + +$pagination-hover-color: $link-hover-color !default; +$pagination-hover-bg: $gray-lighter !default; +$pagination-hover-border: #ddd !default; + +$pagination-active-color: #fff !default; +$pagination-active-bg: $brand-primary !default; +$pagination-active-border: $brand-primary !default; + +$pagination-disabled-color: $gray-light !default; +$pagination-disabled-bg: #fff !default; +$pagination-disabled-border: #ddd !default; + + +//== Pager +// +//## + +$pager-bg: $pagination-bg !default; +$pager-border: $pagination-border !default; +$pager-border-radius: 15px !default; + +$pager-hover-bg: $pagination-hover-bg !default; + +$pager-active-bg: $pagination-active-bg !default; +$pager-active-color: $pagination-active-color !default; + +$pager-disabled-color: $pagination-disabled-color !default; + + +//== Jumbotron +// +//## + +$jumbotron-padding: 30px !default; +$jumbotron-color: inherit !default; +$jumbotron-bg: $gray-lighter !default; +$jumbotron-heading-color: inherit !default; +$jumbotron-font-size: ceil(($font-size-base * 1.5)) !default; +$jumbotron-heading-font-size: ceil(($font-size-base * 4.5)) !default; + + +//== Form states and alerts +// +//## Define colors for form feedback states and, by default, alerts. + +$state-success-text: #6c6c6c !default; +$state-success-bg: #dae6cb !default; +$state-success-border: #8cc63f !default; + +$state-info-text: #6c6c6c !default; +$state-info-bg: #d9edf7 !default; +$state-info-border: #008abf !default; + +$state-warning-text: #6c6c6c !default; +$state-warning-bg: #f1e3c2 !default; +$state-warning-border: #fdb813 !default; + +$state-danger-text: #6c6c6c !default; +$state-danger-bg: #eac3c7 !default; +$state-danger-border: #d9182d !default; + + +//== Tooltips +// +//## + +//** Tooltip max width +$tooltip-max-width: 200px !default; +//** Tooltip text color +$tooltip-color: #fff !default; +//** Tooltip background color +$tooltip-bg: #000 !default; +$tooltip-opacity: .9 !default; + +//** Tooltip arrow width +$tooltip-arrow-width: 5px !default; +//** Tooltip arrow color +$tooltip-arrow-color: $tooltip-bg !default; + + +//== Popovers +// +//## + +//** Popover body background color +$popover-bg: #fff !default; +//** Popover maximum width +$popover-max-width: 276px !default; +//** Popover border color +$popover-border-color: rgba(0,0,0,.2) !default; +//** Popover fallback border color +$popover-fallback-border-color: #ccc !default; + +//** Popover title background color +$popover-title-bg: darken($popover-bg, 3%) !default; + +//** Popover arrow width +$popover-arrow-width: 10px !default; +//** Popover arrow color +$popover-arrow-color: $popover-bg !default; + +//** Popover outer arrow width +$popover-arrow-outer-width: ($popover-arrow-width + 1) !default; +//** Popover outer arrow color +$popover-arrow-outer-color: fade_in($popover-border-color, 0.05) !default; +//** Popover outer arrow fallback color +$popover-arrow-outer-fallback-color: darken($popover-fallback-border-color, 20%) !default; + + +//== Labels +// +//## + +//** Default label background color +$label-default-bg: $gray-light !default; +//** Primary label background color +$label-primary-bg: $brand-primary !default; +//** Success label background color +$label-success-bg: $brand-success !default; +//** Info label background color +$label-info-bg: $brand-info !default; +//** Warning label background color +$label-warning-bg: $brand-warning !default; +//** Danger label background color +$label-danger-bg: $brand-danger !default; + +//** Default label text color +$label-color: #fff !default; +//** Default text color of a linked label +$label-link-hover-color: #fff !default; + + +//== Modals +// +//## + +//** Padding applied to the modal body +$modal-inner-padding: 10px 30px !default; + +//** Padding applied to the modal title +$modal-title-padding: 27px 14px 14px 30px !default; +//** Modal title line-height +$modal-title-line-height: 23px !default; + +//** Background color of modal content area +$modal-content-bg: #fff !default; +//** Modal content border color +$modal-content-border-color: rgba(170,170,170,.3) !default; +//** Modal content border color **for IE8** +$modal-content-fallback-border-color: #aaa !default; + +//** Modal backdrop background color +$modal-backdrop-bg: #fff !default; +//** Modal backdrop opacity +$modal-backdrop-opacity: .5 !default; +//** Modal header border color +$modal-header-border-color: transparent !default; +//** Modal footer border color +$modal-footer-border-color: $modal-header-border-color !default; + +$modal-lg: 1124px !default; +$modal-md: 824px !default; +$modal-sm: 524px !default; + + +//== Alerts +// +//## Define alert colors, border radius, and padding. + +$alert-padding: 8px 15px !default; +$alert-border-radius: 0 !default; +$alert-link-font-weight: bold !default; +$alert-border-width: 0 0 0 5px !default; +$alert-font-size: 10.5pt !default; + +$alert-success-bg: $state-success-bg !default; +$alert-success-text: $state-success-text !default; +$alert-success-border: $state-success-border !default; + +$alert-info-bg: $state-info-bg !default; +$alert-info-text: $state-info-text !default; +$alert-info-border: $state-info-border !default; + +$alert-warning-bg: $state-warning-bg !default; +$alert-warning-text: $state-warning-text !default; +$alert-warning-border: $state-warning-border !default; + +$alert-danger-bg: $state-danger-bg !default; +$alert-danger-text: $state-danger-text !default; +$alert-danger-border: $state-danger-border !default; + + +//== Progress bars +// +//## + +//** Background color of the whole progress component +$progress-bg: #f5f5f5 !default; +//** Progress bar text color +$progress-bar-color: #fff !default; +//** Variable for setting rounded corners on progress bar. +$progress-border-radius: $border-radius-base !default; + +//** Default progress bar color +$progress-bar-bg: $brand-primary !default; +//** Success progress bar color +$progress-bar-success-bg: $brand-success !default; +//** Warning progress bar color +$progress-bar-warning-bg: $brand-warning !default; +//** Danger progress bar color +$progress-bar-danger-bg: $brand-danger !default; +//** Info progress bar color +$progress-bar-info-bg: $brand-info !default; + + +//== List group +// +//## + +//** Background color on `.list-group-item` +$list-group-bg: #fff !default; +//** `.list-group-item` border color +$list-group-border: #ddd !default; +//** List group border radius +$list-group-border-radius: $border-radius-base !default; + +//** Background color of single list items on hover +$list-group-hover-bg: #f5f5f5 !default; +//** Text color of active list items +$list-group-active-color: $component-active-color !default; +//** Background color of active list items +$list-group-active-bg: $component-active-bg !default; +//** Border color of active list elements +$list-group-active-border: $list-group-active-bg !default; +//** Text color for content within active list items +$list-group-active-text-color: lighten($list-group-active-bg, 40%) !default; + +//** Text color of disabled list items +$list-group-disabled-color: $gray-light !default; +//** Background color of disabled list items +$list-group-disabled-bg: $gray-lighter !default; +//** Text color for content within disabled list items +$list-group-disabled-text-color: $list-group-disabled-color !default; + +$list-group-link-color: #555 !default; +$list-group-link-hover-color: $list-group-link-color !default; +$list-group-link-heading-color: #333 !default; + + +//== Panels +// +//## + +$panel-bg: transparent !default; +$panel-body-padding: 11px 0 !default; +$panel-heading-padding: 2px 0 !default; +$panel-footer-padding: $panel-heading-padding !default; +$panel-border-radius: 0 !default; + +//** Border color for elements within panels +$panel-inner-border: transparent !default; +$panel-footer-bg: transparent !default; + +$panel-default-text: $gray-dark !default; +$panel-default-border: transparent !default; +$panel-default-heading-bg: transparent !default; + +$panel-primary-text: #fff !default; +$panel-primary-border: $brand-primary !default; +$panel-primary-heading-bg: $brand-primary !default; + +$panel-success-text: $state-success-text !default; +$panel-success-border: $state-success-border !default; +$panel-success-heading-bg: $state-success-bg !default; + +$panel-info-text: $state-info-text !default; +$panel-info-border: $state-info-border !default; +$panel-info-heading-bg: $state-info-bg !default; + +$panel-warning-text: $state-warning-text !default; +$panel-warning-border: $state-warning-border !default; +$panel-warning-heading-bg: $state-warning-bg !default; + +$panel-danger-text: $state-danger-text !default; +$panel-danger-border: $state-danger-border !default; +$panel-danger-heading-bg: $state-danger-bg !default; + + +//== Thumbnails +// +//## + +//** Padding around the thumbnail image +$thumbnail-padding: 4px !default; +//** Thumbnail background color +$thumbnail-bg: $body-bg !default; +//** Thumbnail border color +$thumbnail-border: #ddd !default; +//** Thumbnail border radius +$thumbnail-border-radius: $border-radius-base !default; + +//** Custom text color for thumbnail captions +$thumbnail-caption-color: $text-color !default; +//** Padding around the thumbnail caption +$thumbnail-caption-padding: 9px !default; + + +//== Wells +// +//## + +$well-bg: #f5f5f5 !default; +$well-border: darken($well-bg, 7%) !default; + + +//== Badges +// +//## + +$badge-color: #fff !default; +//** Linked badge text color on hover +$badge-link-hover-color: #fff !default; +$badge-bg: $gray-light !default; + +//** Badge text color in active nav link +$badge-active-color: $link-color !default; +//** Badge background color in active nav link +$badge-active-bg: #fff !default; + +$badge-font-weight: bold !default; +$badge-line-height: 1 !default; +$badge-border-radius: 10px !default; + + +//== Breadcrumbs +// +//## + +$breadcrumb-padding-vertical: 8px !default; +$breadcrumb-padding-horizontal: 15px !default; +//** Breadcrumb background color +$breadcrumb-bg: #f5f5f5 !default; +//** Breadcrumb text color +$breadcrumb-color: #ccc !default; +//** Text color of current page in the breadcrumb +$breadcrumb-active-color: $gray-light !default; +//** Textual separator for between breadcrumb elements +$breadcrumb-separator: "/" !default; + + +//== Carousel +// +//## + +$carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6) !default; + +$carousel-control-color: #fff !default; +$carousel-control-width: 15% !default; +$carousel-control-opacity: .5 !default; +$carousel-control-font-size: 20px !default; + +$carousel-indicator-active-bg: #fff !default; +$carousel-indicator-border-color: #fff !default; + +$carousel-caption-color: #fff !default; + + +//== Close +// +//## + +$close-font-weight: bold !default; +$close-color: #555 !default; +$close-text-shadow: 0 1px 0 #fff !default; + + +//== Code +// +//## + +$code-color: #c7254e !default; +$code-bg: #f9f2f4 !default; + +$kbd-color: #fff !default; +$kbd-bg: #333 !default; + +$pre-bg: #f5f5f5 !default; +$pre-color: $gray-dark !default; +$pre-border-color: #ccc !default; +$pre-scrollable-max-height: 340px !default; + + +//== Type +// +//## + +//** Horizontal offset for forms and lists. +$component-offset-horizontal: 180px !default; +//** Text muted color +$text-muted: $gray-light !default; +//** Abbreviations and acronyms border color +$abbr-border-color: $gray-light !default; +//** Headings small color +$headings-small-color: $gray-light !default; +//** Blockquote small color +$blockquote-small-color: $gray-light !default; +//** Blockquote font size +$blockquote-font-size: ($font-size-base * 1.25) !default; +//** Blockquote border color +$blockquote-border-color: $gray-lighter !default; +//** Page header border color +$page-header-border-color: $gray-lighter !default; +//** Width of horizontal description list titles +$dl-horizontal-offset: $component-offset-horizontal !default; +//** Horizontal line color. +$hr-border: $gray-lighter !default; + +//* +// The MIT License (MIT) + +// Copyright (c) 2013-2015 bootstrap-select + +// Permission is hereby granted, free of charge, to any person obtaining a copy +// of this software and associated documentation files (the "Software"), to deal +// in the Software without restriction, including without limitation the rights +// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +// copies of the Software, and to permit persons to whom the Software is +// furnished to do so, subject to the following conditions: + +// The above copyright notice and this permission notice shall be included in all +// copies or substantial portions of the Software. + +// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +// SOFTWARE. */ + +$color-red-error: rgb(185, 74, 72); +$color-blue-hover: rgb(100, 177, 216); +$color-grey-arrow: rgb(204, 204, 204); + +$width-default: 220px; + +$zindex-select-dropdown: 1035 !default; \ No newline at end of file diff --git a/ui/css/src/wok.scss b/ui/css/src/wok.scss new file mode 100755 index 0000000..9c0dee2 --- /dev/null +++ b/ui/css/src/wok.scss @@ -0,0 +1,130 @@ +/* + * 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. + */ + +// 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; +} + +// Override alert + +.alert { + border-width: $alert-border-width; + margin-bottom: 10px; +} + +.alert-fields { + margin-top: -20px; + padding-bottom: 10px; +} + +.alert-dismissable .close, .alert-dismissible .close { + right: 15px !important; + top: 0 !important; +} + +.close { + opacity: 1 !important; +} + +.hide-content { + display: none !important; +} + +.help-block { + color: #aaa; +} + +// Override panels + +.panel { + @include box-shadow(none); +} + +.panel-title { + font-size: 21.5pt; +} + + +// Login +@import "modules/login"; + +// Topbar and navigation +@import "modules/toolbar"; + +// Buttons +@import "modules/buttons"; + +// Dropdown Button - Flat +@import "modules/menu-flat"; + +@import "modules/host"; + +@import "modules/line-chart"; + +// Wok Grid & Wok List +@import "modules/wok-grid"; + +// Utils +.absolute-middle { + margin: auto; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + text-align: center; +} + +// Animation +@import "modules/animation"; + +// Documentation + +pre { + margin-top: 20px; +} + +// Media queries + +@media screen and (min-width: 768px) { + + .container { + width: 1540px; + } + +} + +@media screen and (min-width: 1680px) { + + .container { + width: 1680px; + } + +} \ No newline at end of file -- 1.9.3