diff --git a/.gitignore b/.gitignore index 5bbb396349..aacf7f9728 100644 --- a/.gitignore +++ b/.gitignore @@ -8,6 +8,7 @@ *.sass-cache *COMPILE.css *.css +*.css.map # Intellij project configuration files *.idea diff --git a/Gemfile b/Gemfile deleted file mode 100644 index 34f38cf803..0000000000 --- a/Gemfile +++ /dev/null @@ -1,6 +0,0 @@ -source "https://rubygems.org" - -group :development do - gem "compass", ">= 1.0.3" - gem "sass", "~> 3.4.18" -end diff --git a/Gemfile.lock b/Gemfile.lock deleted file mode 100644 index 137bf783a0..0000000000 --- a/Gemfile.lock +++ /dev/null @@ -1,32 +0,0 @@ -GEM - remote: https://rubygems.org/ - specs: - chunky_png (1.3.5) - compass (1.0.3) - chunky_png (~> 1.2) - compass-core (~> 1.0.2) - compass-import-once (~> 1.0.5) - rb-fsevent (>= 0.9.3) - rb-inotify (>= 0.9) - sass (>= 3.3.13, < 3.5) - compass-core (1.0.3) - multi_json (~> 1.0) - sass (>= 3.3.0, < 3.5) - compass-import-once (1.0.5) - sass (>= 3.2, < 3.5) - ffi (1.9.10) - multi_json (1.11.2) - rb-fsevent (0.9.7) - rb-inotify (0.9.7) - ffi (>= 0.5.0) - sass (3.4.21) - -PLATFORMS - ruby - -DEPENDENCIES - compass (>= 1.0.3) - sass (~> 3.4.18) - -BUNDLED WITH - 1.10.6 diff --git a/example/mobile/res/config.rb b/example/mobile/res/config.rb deleted file mode 100755 index 58843cd76e..0000000000 --- a/example/mobile/res/config.rb +++ /dev/null @@ -1,26 +0,0 @@ -# Require any additional compass plugins here. -# require "compass-growl" - -# Set this to the root of your project when deployed: -http_path = "/" -css_dir = "css" -sass_dir = "sass" -images_dir = "images" -javascripts_dir = "js" - -# You can select your preferred output style here (can be overridden via the command line): -# :expanded, :compressed, :nested -output_style = :nested - -# To enable relative paths to assets via compass helper functions. Uncomment: -relative_assets = true - -# To disable debugging comments that display the original location of your selectors. Uncomment: -# line_comments = false - - -# If you prefer the indented syntax, you might want to regenerate this -# project again passing --syntax sass, or you can uncomment this: -# preferred_syntax = :sass -# and then run: -# sass-convert -R --from scss --to sass vfn_platform/static/sass scss && rm -rf sass && mv scss sass diff --git a/example/mobile/res/css/mobile-example.css b/example/mobile/res/css/mobile-example.css deleted file mode 100644 index 06d2102e32..0000000000 --- a/example/mobile/res/css/mobile-example.css +++ /dev/null @@ -1,103 +0,0 @@ -/***************************************************************************** - * Open MCT Web, Copyright (c) 2014-2015, United States Government - * as represented by the Administrator of the National Aeronautics and Space - * Administration. All rights reserved. - * - * Open MCT Web is 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. - * - * Open MCT Web includes source code licensed under additional open source - * licenses. See the Open Source Licenses file (LICENSES.md) included with - * this source code distribution or the Licensing information page available - * at runtime from the About dialog for additional information. - *****************************************************************************/ -/***************************************************************************** - * Open MCT Web, Copyright (c) 2014-2015, United States Government - * as represented by the Administrator of the National Aeronautics and Space - * Administration. All rights reserved. - * - * Open MCT Web is 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. - * - * Open MCT Web includes source code licensed under additional open source - * licenses. See the Open Source Licenses file (LICENSES.md) included with - * this source code distribution or the Licensing information page available - * at runtime from the About dialog for additional information. - *****************************************************************************/ -/************************** FEATURES */ -/************************** VERY INFLUENTIAL GLOBAL DIMENSIONS */ -/************************** RATIOS */ -/************************** LAYOUT */ -/************************** CONTROLS */ -/************************** PATHS */ -/************************** TIMINGS */ -/************************** LIMITS */ -/***************************************************************************** - * Open MCT Web, Copyright (c) 2014-2015, United States Government - * as represented by the Administrator of the National Aeronautics and Space - * Administration. All rights reserved. - * - * Open MCT Web is 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. - * - * Open MCT Web includes source code licensed under additional open source - * licenses. See the Open Source Licenses file (LICENSES.md) included with - * this source code distribution or the Licensing information page available - * at runtime from the About dialog for additional information. - *****************************************************************************/ -/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */ -/************************** MOBILE TREE MENU DIMENSIONS */ -/************************** WINDOW DIMENSIONS FOR RWD */ -/************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ -/************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */ -/************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */ -/***************************************************************************** - * Open MCT Web, Copyright (c) 2014-2015, United States Government - * as represented by the Administrator of the National Aeronautics and Space - * Administration. All rights reserved. - * - * Open MCT Web is 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. - * - * Open MCT Web includes source code licensed under additional open source - * licenses. See the Open Source Licenses file (LICENSES.md) included with - * this source code distribution or the Licensing information page available - * at runtime from the About dialog for additional information. - *****************************************************************************/ -/* REQUIRES mobile/_constants */ -@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 28, ../sass/mobile-example.scss */ - .create-btn-holder { - display: block !important; } } diff --git a/gulpfile.js b/gulpfile.js index 76a798a6eb..fa832d1aa6 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -24,7 +24,9 @@ var gulp = require('gulp'), requirejsOptimize = require('gulp-requirejs-optimize'), sourcemaps = require('gulp-sourcemaps'), - compass = require('gulp-compass'), + rename = require('gulp-rename'), + sass = require('gulp-sass'), + bourbon = require('node-bourbon'), jshint = require('gulp-jshint'), jscs = require('gulp-jscs'), replace = require('gulp-replace-task'), @@ -38,7 +40,7 @@ var gulp = require('gulp'), main: 'main.js', dist: 'dist', assets: 'dist/assets', - scss: 'platform/**/*.scss', + scss: ['./platform/**/*.scss', './example/**/*.scss'], scripts: [ 'main.js', 'platform/**/*.js', 'src/**/*.js' ], static: [ 'index.html', @@ -57,10 +59,8 @@ var gulp = require('gulp'), configFile: path.resolve(__dirname, 'karma.conf.js'), singleRun: true }, - compass: { - sass: __dirname, - css: paths.assets, - sourcemap: true + sass: { + includePaths: bourbon.includePaths }, replace: { variables: { @@ -70,42 +70,7 @@ var gulp = require('gulp'), branch: fs.existsSync('.git') ? git.branch() : 'Unknown' } } - }, - stream = require('stream'); - -/** -* Returns a transform stream that allows us to customize the destination -* paths for individual sass files. Wraps compass. -*/ -function customCompass() { - var compassWrapper = new stream.Transform({objectMode: true}); - compassWrapper._transform = function (chunk, encoding, done) { - if (/\/_[^\/]*.scss$/.test(chunk.path)) { - return done(); - } - var baseDir = 'platform/' + chunk.relative.replace(/sass\/.*$/, ''), - options = { - project: __dirname, - sass: baseDir + 'sass/', - css: baseDir + 'css/', - comments: true, - bundle_exec: true - }, - compassObj; - - compassObj = compass(options); - compassObj.on('data', function (file) { - this.push(file); - }.bind(this)); - compassObj.on('end', function () { - done(); - }); - compassObj.end(chunk); }; - return compassWrapper; -} - - gulp.task('scripts', function () { return gulp.src(paths.main) @@ -120,11 +85,16 @@ gulp.task('test', function (done) { new karma.Server(options.karma, done).start(); }); -gulp.task('compass'); - gulp.task('stylesheets', function () { - return gulp.src(paths.scss) - .pipe(customCompass()); + return gulp.src(paths.scss, {base: '.'}) + .pipe(sourcemaps.init()) + .pipe(sass(options.sass).on('error', sass.logError)) + .pipe(rename(function (file) { + file.dirname = file.dirname.replace('/sass', '/css'); + return file; + })) + .pipe(sourcemaps.write('.')) + .pipe(gulp.dest(__dirname)); }); gulp.task('lint', function () { @@ -161,7 +131,7 @@ gulp.task('serve', function () { var app = require('./app.js'); }); -gulp.task('develop', ['serve', 'watch']); +gulp.task('develop', ['serve', 'stylesheets', 'watch']); gulp.task('install', [ 'static', 'scripts' ]); diff --git a/package.json b/package.json index 6ffffae72d..b787b499c6 100644 --- a/package.json +++ b/package.json @@ -11,11 +11,12 @@ "git-rev-sync": "^1.4.0", "glob": ">= 3.0.0", "gulp": "^3.9.0", - "gulp-compass": "^2.1.0", "gulp-jscs": "^3.0.2", "gulp-jshint": "^2.0.0", + "gulp-rename": "^1.2.2", "gulp-replace-task": "^0.11.0", "gulp-requirejs-optimize": "^0.3.1", + "gulp-sass": "^2.2.0", "gulp-sourcemaps": "^1.6.0", "jasmine-core": "^2.3.0", "jsdoc": "^3.3.2", @@ -33,6 +34,7 @@ "marked": "^0.3.5", "mkdirp": "^0.5.1", "moment": "^2.11.1", + "node-bourbon": "^4.2.3", "phantomjs": "^1.9.19", "requirejs": "^2.1.17", "split": "^1.0.0" @@ -45,7 +47,7 @@ "jsdoc": "jsdoc -c jsdoc.json -r -d target/docs/api", "otherdoc": "node docs/gendocs.js --in docs/src --out target/docs --suppress-toc 'docs/src/index.md|docs/src/process/index.md'", "docs": "npm run jsdoc ; npm run otherdoc", - "prepublish": "./node_modules/bower/bin/bower install && bundle install && ./node_modules/gulp/bin/gulp.js install" + "prepublish": "./node_modules/bower/bin/bower install && ./node_modules/gulp/bin/gulp.js install" }, "repository": { "type": "git", diff --git a/platform/commonUI/general/bundle.js b/platform/commonUI/general/bundle.js index 3d98a22143..07978cef35 100644 --- a/platform/commonUI/general/bundle.js +++ b/platform/commonUI/general/bundle.js @@ -137,6 +137,10 @@ define([ { "stylesheetUrl": "css/normalize.min.css", "priority": "mandatory" + }, + { + "stylesheetUrl": "css/reset.css", + "priority": "mandatory" } ], "templates": [ diff --git a/platform/commonUI/general/res/css/reset.css b/platform/commonUI/general/res/css/reset.css new file mode 100644 index 0000000000..ed11813c4e --- /dev/null +++ b/platform/commonUI/general/res/css/reset.css @@ -0,0 +1,48 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/platform/commonUI/general/res/sass/_archetypes.scss b/platform/commonUI/general/res/sass/_archetypes.scss index 20b338c3db..84045c2520 100644 --- a/platform/commonUI/general/res/sass/_archetypes.scss +++ b/platform/commonUI/general/res/sass/_archetypes.scss @@ -34,7 +34,7 @@ .cols { @include clearfix; .col { - @include box-sizing(border-box); + box-sizing: border-box; @include clearfix; float: left; margin-left: $ueColMargin; @@ -94,7 +94,7 @@ /********************************************* FLEX STYLES */ .l-flex-row, .l-flex-col { - @include display-flex; + @include display(flex); @include flex-wrap(nowrap); .flex-elem { min-height: 0; // Needed to allow element to shrink within parent @@ -111,7 +111,7 @@ } .flex-container { // Apply to wrapping elements, mct-includes, etc. - @include display-flex; + @include display(flex); @include flex-wrap(nowrap); @include flex(1 1 auto); min-height:0; @@ -144,4 +144,4 @@ .flex-justify-end { @include justify-content(flex-end); -} \ No newline at end of file +} diff --git a/platform/commonUI/general/res/sass/_autoflow.scss b/platform/commonUI/general/res/sass/_autoflow.scss index 8a7564e7f5..9b500fb88f 100644 --- a/platform/commonUI/general/res/sass/_autoflow.scss +++ b/platform/commonUI/general/res/sass/_autoflow.scss @@ -64,7 +64,7 @@ white-space: nowrap; .l-autoflow-col { // @include test(); - @include box-sizing(border-box); + box-sizing: border-box; border-left: 1px solid $colorInteriorBorder; display: inline-block; // height: 100%; @@ -74,7 +74,7 @@ width: $colW; .l-autoflow-row { // @include test(red); - @include box-sizing(border-box); + box-sizing: border-box; border-bottom: 1px solid rgba(#fff,0.05); display: block; height: $rowH; @@ -110,7 +110,7 @@ width: auto; } &.r { - @include border-radius($smallCr); + border-radius: $smallCr; float: right; margin-left: $interiorMargin; padding-left: $valPad; diff --git a/platform/commonUI/general/res/sass/_badges.scss b/platform/commonUI/general/res/sass/_badges.scss index 921c4f272e..fc4d3e9b03 100644 --- a/platform/commonUI/general/res/sass/_badges.scss +++ b/platform/commonUI/general/res/sass/_badges.scss @@ -27,7 +27,7 @@ } .top-bar .badge { - @include border-radius($controlCr * 1.5); + border-radius: $controlCr * 1.5; $h: $btnStdH; //$ueTopBarBtnH; // - 5px; font-size: 1.4em; height: $h; @@ -39,7 +39,7 @@ //.top-bar .btn-browse .badge { // Moved to _controls.scss .btn.browse-btn -// @include border-radius($controlCr * 1.5); +// border-radius: $controlCr * 1.5; // $d: 20px; // display: block; // font-size: 1em; @@ -53,7 +53,7 @@ .super-menu .badge { @include background-image(linear-gradient(lighten($colorCreateBtn, 10%), $colorCreateBtn)); - @include border-radius($controlCr); + border-radius: $controlCr; @include boxShdwSubtle(); // display: inline-block; // margin-right: 10px !important; diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss index b90cdfe6a9..ab6b729533 100644 --- a/platform/commonUI/general/res/sass/_constants.scss +++ b/platform/commonUI/general/res/sass/_constants.scss @@ -44,7 +44,7 @@ $ueAppLogoW: 105px; $ueEditToolBarH: 25px; $ueCollapsedPaneEdgeM: 22px; $uePaneMiniTabH: $ueTopBarH; -$uePaneMiniTabW: 9px; +$uePaneMiniTabW: 10px; $uePaneMiniTabCollapsedW: 11px; $ueEditLeftPaneW: 75%; $treeSearchInputBarH: 25px; diff --git a/platform/commonUI/general/res/sass/_effects.scss b/platform/commonUI/general/res/sass/_effects.scss index ed740b9bcb..c1701f7387 100644 --- a/platform/commonUI/general/res/sass/_effects.scss +++ b/platform/commonUI/general/res/sass/_effects.scss @@ -21,7 +21,7 @@ *****************************************************************************/ .disabled, a.disabled { - @include opacity($controlDisabledOpacity); + opacity: $controlDisabledOpacity; pointer-events: none !important; cursor: default !important; } @@ -39,39 +39,35 @@ a.disabled { @include test(); } -@mixin customKeyframes($animName: pulse, $op0: 0.5) { - @include keyframes($animName) { - 0% { opacity: $op0; } - 100% { opacity: 1; } - } - @include animation-name(pulse, 0.2); -} - -@mixin pulse($dur: 500ms, $iteration: infinite, $opacity0: 0.5, $opacity100: 1) { - @include keyframes(pulse) { +@mixin pulse($animName: pulse, $dur: 500ms, $iteration: infinite, $opacity0: 0.5, $opacity100: 1) { + @include keyframes($animName) { 0% { opacity: $opacity0; } 100% { opacity: $opacity100; } } - @include animation-name(pulse); + @include animation-name($animName); @include animation-duration($dur); @include animation-direction(alternate); @include animation-iteration-count($iteration); @include animation-timing-function(ease-in-out); } -@mixin pulseBorder($c: red, $dur: 500ms, $iteration: infinite, $delay: 0s, $opacity0: 0, $opacity100: 1) { - @include keyframes(pulseBorder) { - 0% { border-color: rgba($c, $opacity0); } - 100% { border-color: rgba($c, $opacity100); } - } - @include animation-name(pulseBorder); - @include animation-duration($dur); - @include animation-direction(alternate); - @include animation-iteration-count($iteration); - @include animation-timing-function(ease); - @include animation-delay($delay); +.pulse { + @include pulse($animName: pulse, $dur: 750ms); } -.pulse { - @include pulse(750ms); -} \ No newline at end of file +.pulse-subtle { + @include pulse($animName: pulse-subtle, $dur: 500ms, $opacity0: 0.7); +} + +@mixin pulseBorder($c: red, $dur: 500ms, $iteration: infinite, $delay: 0s, $opacity0: 0, $opacity100: 1) { + @include keyframes(pulseBorder) { + 0% { border-color: rgba($c, $opacity0); } + 100% { border-color: rgba($c, $opacity100); } + } + @include animation-name(pulseBorder); + @include animation-duration($dur); + @include animation-direction(alternate); + @include animation-iteration-count($iteration); + @include animation-timing-function(ease); + @include animation-delay($delay); +} diff --git a/platform/commonUI/general/res/sass/_fixed-position.scss b/platform/commonUI/general/res/sass/_fixed-position.scss index edc6332231..9dc0fc2804 100644 --- a/platform/commonUI/general/res/sass/_fixed-position.scss +++ b/platform/commonUI/general/res/sass/_fixed-position.scss @@ -61,7 +61,7 @@ .l-fixed-position-box, .l-fixed-position-image, .l-fixed-position-text { - @include box-sizing(border-box); + box-sizing: border-box; height: 100%; width: 100%; } @@ -89,7 +89,7 @@ .l-elem { //@include absPosDefault($p); //@include absPosDefault(0); - @include box-sizing(border-box); + box-sizing: border-box; display: block; padding: 2px; //width: 50%; @@ -106,7 +106,7 @@ // @include test(blue); // right: $p; // left: auto; - @include border-radius($smallCr); + border-radius: $smallCr; $valPad: 5px; float: right; margin-left: $interiorMargin; @@ -125,7 +125,7 @@ .l-fixed-position-item-handle { $brd: 1px solid $colorKey; - // @include border-radius($controlCr); + // border-radius: $controlCr; background: rgba($colorKey, 0.5); cursor: crosshair; border: $brd; diff --git a/platform/commonUI/general/res/sass/_global.scss b/platform/commonUI/general/res/sass/_global.scss index 545a98610b..cb0894c9fe 100644 --- a/platform/commonUI/general/res/sass/_global.scss +++ b/platform/commonUI/general/res/sass/_global.scss @@ -46,7 +46,6 @@ a { body, html { -webkit-font-smoothing: subpixel-antialiased; - -moz-osx-font-smoothing: grayscale; background-color: $colorBodyBg; color: $colorBodyFg; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; @@ -139,7 +138,7 @@ mct-container { } .ds { - @include box-shadow(rgba(#000, 0.7) 0 4px 10px 2px); + box-shadow: rgba(#000, 0.7) 0 4px 10px 2px; } .hide, diff --git a/platform/commonUI/general/res/sass/_icons.scss b/platform/commonUI/general/res/sass/_icons.scss index 685926560c..f27e9c15bd 100644 --- a/platform/commonUI/general/res/sass/_icons.scss +++ b/platform/commonUI/general/res/sass/_icons.scss @@ -93,7 +93,7 @@ height: auto; width: auto; position: absolute; left: 0; top: 0; right: 0; bottom: 10%; - @include transform-origin(bottom, left); + @include transform-origin(bottom left); @include transform(scale(0.3)); z-index: 2; } diff --git a/platform/commonUI/general/res/sass/_inspector.scss b/platform/commonUI/general/res/sass/_inspector.scss index f1420da094..59adb08358 100644 --- a/platform/commonUI/general/res/sass/_inspector.scss +++ b/platform/commonUI/general/res/sass/_inspector.scss @@ -58,7 +58,7 @@ } ul { - @include box-sizing(border-box); + box-sizing: border-box; padding-right: $interiorMargin; } @@ -73,7 +73,7 @@ } em { - @include border-radius($basicCr); + border-radius: $basicCr; background-color: $colorInspectorSectionHeaderBg; color: $colorInspectorSectionHeaderFg; margin-bottom: $interiorMargin; @@ -99,7 +99,7 @@ .inspector-location { .location-item { $h: 1.2em; - @include box-sizing(border-box); + box-sizing: border-box; cursor: pointer; display: inline-block; line-height: $h; diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss index c3763e217b..02a3bb1583 100644 --- a/platform/commonUI/general/res/sass/_mixins.scss +++ b/platform/commonUI/general/res/sass/_mixins.scss @@ -175,8 +175,8 @@ @mixin sliderTrack($bg: $scrollbarTrackColorBg) { //$b: 1px solid lighten($bg, 30%); - @include border-radius(2px); - @include box-sizing(border-box); + border-radius: 2px; + box-sizing: border-box; @include boxIncised(0.7); background-color: $bg; //border-bottom: $b; @@ -210,7 +210,7 @@ } @mixin boxIncised($sVal: 0.6, $inset: 5px) { - @include box-shadow(inset rgba(black, $sVal) 0 1px $inset); + box-shadow: inset rgba(black, $sVal) 0 1px $inset; } @mixin boxOutline($c: lighten($colorBodyBg, 20%)) { @@ -219,24 +219,24 @@ @mixin boxShdw($sVal: rgba(black, 0.4) 0 0 3px) { @if $sVal != 'none' { - @include box-shadow($sVal); + box-shadow: $sVal; } } @mixin boxShdwSubtle($sVal: 0.2) { @if $sVal != 'none' { - @include box-shadow(rgba(black, $sVal) 0 1px 2px); + box-shadow: rgba(black, $sVal) 0 1px 2px; } } @mixin boxShdwLarge($sVal: 0.7) { @if $sVal != 'none' { - @include box-shadow(rgba(black, $sVal) 0 3px 10px); + box-shadow: rgba(black, $sVal) 0 3px 10px; } } @mixin outerGlow($color: #fff, $sVal: 0.3) { - @include box-shadow(rgba($color, $sVal) 0 0 30px); + box-shadow: rgba($color, $sVal) 0 0 30px; } @mixin linearGlow($deg: 0, $c: red, $a: 0.4) { @@ -249,18 +249,18 @@ @mixin txtShdw($sVal) { //@if $sVal != 'none' { - @include text-shadow($sVal); + text-shadow: $sVal; //} } @mixin txtShdwSubtle($sVal: 0.1) { @if $sVal != 'none' { - @include text-shadow(rgba(black, $sVal) 0 1px 2px); + text-shadow: rgba(black, $sVal) 0 1px 2px; } } @mixin txtShdwLarge($sVal: 0.7) { - @include text-shadow(rgba(black, $sVal) 0 3px 7px); + text-shadow: rgba(black, $sVal) 0 3px 7px; } @function pullForward($c, $p: 20%) { @@ -291,35 +291,32 @@ @mixin containerBase($bg: $colorBodyBg, $fg: $colorBodyFg) { background-color: $bg; - @include border-radius($controlCr); - @include box-sizing(border-box); + border-radius: $controlCr; + box-sizing: border-box; color: $fg; display: inline-block; } -@mixin btnBase($bg: $colorBodyBg, $bgHov: none, $fg: $colorBodyFg, $ic: $colorBtnIcon) { +@mixin btnBase($bg: $colorBodyBg, $bgHovColor: none, $fg: $colorBodyFg, $ic: $colorBtnIcon) { @include user-select(none); - @include transition(background, .25s); .icon { color: $ic; } - @include desktop { - @if $bgHov != none { - &:not(.disabled):hover { - @include background-image($bgHov); - >.icon { - color: lighten($ic, $ltGamma); - } - } - } - } + @if $bgHovColor != none { + &:not(.disabled):hover { + background: $bgHovColor; // was just background, and background-image before that + >.icon { + color: lighten($ic, $ltGamma); + } + } + } } @mixin input-base($bg: $colorInputBg, $fg: $colorInputFg, $shdw: rgba(black, 0.6) 0 1px 3px) { @include appearance(none); - @include border-radius($controlCr); - @include box-sizing(border-box); - @include box-shadow(inset $shdw); + border-radius: $controlCr; + box-sizing: border-box; + box-shadow: inset $shdw; background: $bg; border: none; color: $fg; @@ -335,7 +332,7 @@ } @mixin contextArrow() { - @include text-shadow(none); + text-shadow: none; content: '\76'; display: inline-block; font-family: 'symbolsfont'; @@ -408,13 +405,13 @@ } @mixin tmpBorder($c: #ffcc00, $a: 0.75) { - @include box-sizing(border-box); + box-sizing: border-box; border: 1px dotted rgba($c, $a); } @mixin testObj($w: 2000px, $h: 1000px, $c: black, $a: 0.1) { &:after { - @include box-sizing(border-box); + box-sizing: border-box; @include bgDiagonalStripes($c, $a); color: rgba(white, 0.3); font-style: italic; diff --git a/platform/commonUI/general/res/sass/controls/_breadcrumb.scss b/platform/commonUI/general/res/sass/controls/_breadcrumb.scss index 35f0a21005..a5df3daecc 100644 --- a/platform/commonUI/general/res/sass/controls/_breadcrumb.scss +++ b/platform/commonUI/general/res/sass/controls/_breadcrumb.scss @@ -8,9 +8,9 @@ .l-breadcrumb-item { //@include test(); a { - @include box-sizing(border-box); - @include border-radius($basicCr*.75); - @include single-transition(background-color, 0.25s); + box-sizing: border-box; + border-radius: $basicCr*.75; + @include transition(background-color, 0.25s); color: darken($colorBodyFg, 15%); display: inline-block; //margin-right: $interiorMargin; diff --git a/platform/commonUI/general/res/sass/controls/_buttons.scss b/platform/commonUI/general/res/sass/controls/_buttons.scss index c999828ee9..ddcca833ba 100644 --- a/platform/commonUI/general/res/sass/controls/_buttons.scss +++ b/platform/commonUI/general/res/sass/controls/_buttons.scss @@ -32,7 +32,7 @@ $pad: $interiorMargin * $baseRatio; } .s-btn { - @include box-sizing(border-box); + box-sizing: border-box; padding: 0 $pad; font-size: 0.7rem; vertical-align: top; @@ -66,7 +66,7 @@ $pad: $interiorMargin * $baseRatio; &:not(.major) { // bg, bgHov, fg, ic - @include btnSubtle($colorBtnBg, $colorKey, $colorBtnFg, $colorBtnIcon); + @include btnSubtle($colorBtnBg, $colorBtnBgHov, $colorBtnFg, $colorBtnIcon); } &.pause-play { @@ -91,7 +91,7 @@ $pad: $interiorMargin * $baseRatio; &.paused { @include btnSubtle($colorPausedBg, pushBack($colorPausedBg, 10%), $colorPausedFg, $colorPausedFg); .icon { - @include pulse(1000ms); + @include pulse($dur: 1000ms); :before { content: "\0000EF"; } @@ -111,172 +111,154 @@ $pad: $interiorMargin * $baseRatio; // Color and styling additionally in _controls.scss } -.mini-tab { +body.desktop .mini-tab { // Meant to be used as pane hide/show control elements in concert with mct-splitter - //@extend .ui-symbol; - @include desktop { - //@include test(green); - $iconH: $uePaneMiniTabH; - $iconW: $uePaneMiniTabW; - $iconInnerLR: 0; - $arwD: 9px; - $arwOffsetX: 0px; - $arwAnimOffsetX: 2px + $iconInnerLR; - $cBg: pullForward($colorBodyBg, 15%); - $cFg: $cBg; + $iconH: $uePaneMiniTabH; + $iconW: $uePaneMiniTabW; + $iconInnerLR: 0; + $arwD: 9px; + $arwOffsetX: 0px; + $arwAnimOffsetX: 2px + $iconInnerLR; + $cBg: pullForward($colorBodyBg, 15%); + $cFg: $cBg; - @include border-radius($basicCr); - //@include boxShdw($shdwBtns); - @include box-sizing(border-box); - @include trans-prop-nice((color, background-color), 100ms); - color: $cFg; - cursor: pointer; - font-family: symbolsfont; - font-size: $arwD; - display: block; - position: absolute; - line-height: $iconH; - height: $iconH; width: $iconW; - text-align: center; + border-radius: $basicCr; + //@include boxShdw($shdwBtns); + box-sizing: border-box; + @include trans-prop-nice((color, background-color), 100ms); + color: $cFg; + cursor: pointer; + font-family: symbolsfont; + font-size: $arwD; + display: block; + position: absolute; + line-height: $iconH; + height: $iconH; width: $iconW; + text-align: center; + &.collapsed { + // State when the pane this element controls has been collapsed + @include btnSubtle($colorBtnBg, $colorKey, $colorBtnFg, $colorBtnIcon); + &:before { opacity: 0; } + &:after { opacity: 1; } &:hover { - //background-color: $cBg; - color: $colorKey; //pullForward($cFg, $ltGamma); + &:before { opacity: 1; } + &:after { opacity: 0; } } - &.collapsed { - // State when the pane this element controls has been collapsed - @include btnSubtle($colorBtnBg, $colorKey, $colorBtnFg, $colorBtnIcon); - &:before { opacity: 0; } - &:after { opacity: 1; } - &:hover { - &:before { opacity: 1; } - &:after { opacity: 0; } - } + } - } + &:before, + &:after { + @include trans-prop-nice((left, right, opacity), 250ms); + display: block; + height: 100%; + position: absolute; + } - &:before, - &:after { - //@include test(); - @include trans-prop-nice((left, right, opacity), 250ms); - display: block; - height: 100%; - position: absolute; - } + &:before { + // Always the arrow icon + width: $arwD; + } + &:after { + // Always icon; content is set in _layout.scss + width: 100%; + text-align: center; + opacity: 0; + } + &.anchor-left { + // |< + text-align: right; &:before { - // Always the arrow icon - //@include test(green); - //font-size: $arwD; - width: $arwD; + content:'\3c'; // Collapse left icon e613 + right: $iconInnerLR; } - &:after { - // Always icon; content is set in _layout.scss - width: 100%; - text-align: center; - opacity: 0; - } - - &.anchor-left { - // |< - text-align: right; - &:before { - content:'\3c'; // Collapse left icon e613 - right: $iconInnerLR; - } - //&:hover:before { right: $arwAnimOffsetX; } - &.collapsed { - @include border-left-radius(0); - text-align: left; - &:before { - content:'\3e'; - left: $iconInnerLR; - } - &:hover:before { left: $arwAnimOffsetX; } - } - } - &.anchor-right { - // >| + &.collapsed { + @include border-left-radius(0); text-align: left; &:before { - content:'\3e'; // Collapse right icon e614 + content:'\3e'; left: $iconInnerLR; } - //&:hover:before { left: $arwAnimOffsetX; } - &.collapsed { - @include border-right-radius(0); - &:before { - text-align: right; - content:'\3c'; - right: $iconInnerLR; - } - &:hover:before { right: $arwAnimOffsetX; } + &:hover:before { left: $arwAnimOffsetX; } + } + } + &.anchor-right { + // >| + text-align: left; + &:before { + content:'\3e'; // Collapse right icon e614 + left: $iconInnerLR; + } + &.collapsed { + @include border-right-radius(0); + &:before { + text-align: right; + content:'\3c'; + right: $iconInnerLR; } + &:hover:before { right: $arwAnimOffsetX; } } } } -.mini-tab-icon { +body.desktop .mini-tab-icon { // Meant to be used as pane hide/show control elements in concert with mct-splitter - //@extend .ui-symbol; - @include desktop { - $d: $uePaneMiniTabW; - //@include trans-prop-nice(transform, 150ms); - color: pullForward($colorBodyBg, 15%); - cursor: pointer; - display: block; - font-family: symbolsfont; - font-size: $d; + $d: $uePaneMiniTabW; + color: pullForward($colorBodyBg, 15%); + cursor: pointer; + display: block; + font-family: symbolsfont; + font-size: $d; + position: absolute; + height: $d; width: $d; + line-height: $d; + overflow: hidden; + word-break: break-all; + + &.collapsed { + $d: $uePaneMiniTabCollapsedW; + width: $d; font-size: $d; + } + + &:before, + &:after { position: absolute; - height: $d; width: $d; - line-height: $d; - overflow: hidden; - word-break: break-all; + display: inherit; + } - &.collapsed { - $d: $uePaneMiniTabCollapsedW; - width: $d; font-size: $d; - } + &:before { + content: '\78'; // X icon + } - &:before, - &:after { - position: absolute; - display: inherit; - } - - &:before { - content: '\78'; // X icon - } - - &:hover { - color: $colorKey; - //@include transform(scale(1.2)); - } + &:hover { + color: $colorKey; } } .l-btn-set { // Buttons that have a very tight conceptual grouping - no internal space between them. // Structure: .btn-set > mct-representation class=first|last > .s-btn - //@include test(red); font-size: 0; // Remove space between s-btn elements due to white space in markup .s-btn { - @include border-radius(0); + border-radius: 0; margin-left: 1px; } .first { - .s-btn { + .s-btn, + &.s-btn { @include border-left-radius($controlCr); margin-left: 0; } } .last { - .s-btn { + .s-btn, + &.s-btn { @include border-right-radius($controlCr); } } diff --git a/platform/commonUI/general/res/sass/controls/_color-palette.scss b/platform/commonUI/general/res/sass/controls/_color-palette.scss index 3ce512356a..e149fa97df 100644 --- a/platform/commonUI/general/res/sass/controls/_color-palette.scss +++ b/platform/commonUI/general/res/sass/controls/_color-palette.scss @@ -25,7 +25,7 @@ $m: 1; $colorSelectedColor: #fff; - @include box-sizing(border-box); + box-sizing: border-box; padding: $interiorMargin !important; .l-palette-row { @@ -34,7 +34,7 @@ width: ($d * $colorsPerRow) + ($m * $colorsPerRow); .l-palette-item { - @include box-sizing(border-box); + box-sizing: border-box; @include txtShdwSubtle(0.8); @include trans-prop-nice-fade(0.25s); border: 1px solid transparent; diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss index d97a153cff..200d4f3a0a 100644 --- a/platform/commonUI/general/res/sass/controls/_controls.scss +++ b/platform/commonUI/general/res/sass/controls/_controls.scss @@ -28,8 +28,8 @@ } .accordion-head { $op: 0.2; - @include border-radius($basicCr * 0.75); - @include box-sizing("border-box"); + border-radius: $basicCr * 0.75; + box-sizing: "border-box"; background: rgba($colorBodyFg, $op); cursor: pointer; font-size: 0.75em; @@ -84,7 +84,7 @@ .l-control-group { // Buttons that have a conceptual grouping - internal space between, and a divider between groups. // @include test(); - @include box-sizing(border-box); + box-sizing: border-box; border-left: 1px solid $colorInteriorBorder; display: inline-block; padding: 0 $interiorMargin; @@ -125,9 +125,9 @@ label.checkbox.custom { height: $d; min-width: $d; &:before { - @include border-radius($basicCr * .75); + border-radius: $basicCr * .75; background: $bg; - @include box-shadow(inset rgba(black, 0.4) 0 1px 2px); + box-shadow: inset rgba(black, 0.4) 0 1px 2px; box-sizing: border-box; content: " "; font-family: 'symbolsfont'; @@ -182,7 +182,7 @@ label.checkbox.custom { .item .checkbox { &.checked label { - @include box-shadow(none); + box-shadow: none; border-bottom: none; } } @@ -235,16 +235,16 @@ label.checkbox.custom { font-size: 0.7em; @include webkitProp(flex, '0 0 1'); } +} - @include desktop { +body.desktop .object-header { + .context-available { + @include trans-prop-nice(opacity, 0.25s); + opacity: 0; + } + &:hover { .context-available { - @include trans-prop-nice(opacity, 0.25s); - opacity: 0; - } - &:hover { - .context-available { - opacity: 1; - } + opacity: 1; } } } @@ -293,13 +293,13 @@ label.checkbox.custom { } .s-progress-bar { - @include border-radius($basicCr); + border-radius: $basicCr; @include boxIncised(0.3, 4px); background: $colorProgressBarOuter; .progress-amt { - @include border-radius($basicCr); + border-radius: $basicCr; @include boxShdw(); - @include border-radius($basicCr - 1); + border-radius: $basicCr - 1; @include trans-prop-nice(width); &:before { background-color: $colorProgressBarAmt; @@ -433,7 +433,7 @@ label.checkbox.custom { .l-calendar { $colorMuted: pushBack($colorMenuFg, 30%); ul.l-cal-row { - @include display-flex; + @include display(flex); @include flex-flow(row nowrap); margin-top: 1px; &:first-child { @@ -481,11 +481,11 @@ label.checkbox.custom { /******************************************************** BROWSER ELEMENTS */ -@include desktop { +body.desktop { ::-webkit-scrollbar { - @include border-radius(2px); - @include box-sizing(border-box); - @include box-shadow(inset $scrollbarTrackShdw); + border-radius: 2px; + box-sizing: border-box; + box-shadow: inset $scrollbarTrackShdw; background-color: $scrollbarTrackColorBg; height: $scrollbarTrackSize; width: $scrollbarTrackSize; @@ -496,8 +496,8 @@ label.checkbox.custom { $hc: $scrollbarThumbColorHov; $gr: 5%; @include background-image(linear-gradient(lighten($bg, $gr), $bg 20px)); - @include border-radius(2px); - @include box-sizing(border-box); + border-radius: 2px; + box-sizing: border-box; &:hover { @include background-image(linear-gradient(lighten($hc, $gr), $hc 20px)); } diff --git a/platform/commonUI/general/res/sass/controls/_menus.scss b/platform/commonUI/general/res/sass/controls/_menus.scss index 473e9f1d45..12fea8c41f 100644 --- a/platform/commonUI/general/res/sass/controls/_menus.scss +++ b/platform/commonUI/general/res/sass/controls/_menus.scss @@ -72,7 +72,7 @@ } .s-menu { - @include border-radius($basicCr); + border-radius: $basicCr; @include containerSubtle($colorMenuBg, $colorMenuFg); @include boxShdw($shdwMenu); @include txtShdw($shdwMenuText); @@ -87,7 +87,7 @@ ul { @include menuUlReset(); li { - @include box-sizing(border-box); + box-sizing: border-box; border-top: 1px solid pullForward($colorMenuBg, 10%); color: pullForward($colorMenuBg, 60%); line-height: $menuLineH; @@ -171,7 +171,7 @@ @include absPosDefault($interiorMargin); } .pane { - @include box-sizing(border-box); + box-sizing: border-box; &.left { //@include test(); border-right: 1px solid pullForward($colorMenuBg, 10%); @@ -183,7 +183,7 @@ overflow-y: auto; ul { li { - @include border-radius($controlCr); + border-radius: $controlCr; padding-left: 30px; border-top: none; } diff --git a/platform/commonUI/general/res/sass/controls/_messages.scss b/platform/commonUI/general/res/sass/controls/_messages.scss index 8bb8337d9c..f8869c18be 100644 --- a/platform/commonUI/general/res/sass/controls/_messages.scss +++ b/platform/commonUI/general/res/sass/controls/_messages.scss @@ -36,11 +36,16 @@ } } +mct-include.status-block-holder { + // mct-include that wraps status.block + // Must use display: inline-block to fix white space problems + display: inline-block; +} + .status.block { $transDelay: 1.5s; $transSpeed: .25s; color: $colorStatusDefault; - cursor: default; display: inline-block; margin-right: $interiorMargin; .status-indicator, @@ -50,6 +55,9 @@ vertical-align: top; } + &.clickable { cursor: pointer; } + &:not(.clickable) { cursor: default; } + &.no-icon { .status-indicator { display: none; @@ -60,9 +68,6 @@ float: right; } - &.subtle { - opacity: 0.5; - } .status-indicator { margin-right: $interiorMarginSm; } @@ -77,7 +82,7 @@ &:hover { .label { @include trans-prop-nice(max-width, $transSpeed, 0s); - max-width: 450px; + max-width: 600px; width: auto; } .count { @@ -99,17 +104,26 @@ &.error .status-indicator { color: $colorStatusError; } + &.available .status-indicator { + color: $colorStatusAvailable; + } .count { @include trans-prop-nice(opacity, $transSpeed, $transDelay); font-weight: bold; opacity: 1; } + .s-btn { + background: $colorStatusBtnBg; + padding: 0 $interiorMargin; + height: auto; + line-height: inherit; + } } /* Styles for messages and message banners */ .message { &.block { - @include border-radius($basicCr); + border-radius: $basicCr; padding: $interiorMarginLg; } &.error { @@ -121,9 +135,9 @@ .l-message-banner { $m: $interiorMarginSm; $lh: $ueFooterH - ($m*2) - 1; - @include box-sizing(border-box); + box-sizing: border-box; @include ellipsize(); - @include display-flex; + @include display(flex); @include flex-direction(row); @include align-items(center); position: absolute; @@ -146,7 +160,7 @@ left: 50%; opacity: 1; &:not(.info) { - @include pulse(100ms, 10); + @include pulse($dur: 100ms, $iteration: 10); } } @@ -184,12 +198,12 @@ } .s-message-banner { - @include border-radius($controlCr); + border-radius: $controlCr; @include statusBannerColors($colorStatusDefault, $colorStatusFg); cursor: pointer; a { color: inherit; } .s-action { - @include border-radius($basicCr); + border-radius: $basicCr; @include trans-prop-nice(background-color); } .close { @@ -250,7 +264,7 @@ */ .l-message { - @include display-flex; + @include display(flex); @include flex-direction(row); @include align-items(stretch); .type-icon.message-type { @@ -275,17 +289,17 @@ // Message as singleton .t-message-single { @include messageBlock(80px); +} - @include desktop { - .l-message, - .bottom-bar { - @include absPosDefault(); - } +body.desktop .t-message-single { + .l-message, + .bottom-bar { + @include absPosDefault(); + } - .bottom-bar { - top: auto; - height: $ovrFooterH; - } + .bottom-bar { + top: auto; + height: $ovrFooterH; } } @@ -295,15 +309,13 @@ .message-contents { .l-message { - //border-bottom: 1px solid pullForward($colorOvrBg, 20%); - @include border-radius($controlCr); + border-radius: $controlCr; background: rgba($colorOvrFg, 0.1); margin-bottom: $interiorMargin; padding: $interiorMarginLg; .message-contents, .bottom-bar { - //@include test(green); position: relative; } @@ -320,8 +332,8 @@ } } } +} - @include desktop { - .message-contents .l-message { margin-right: $interiorMarginLg; } - } -} \ No newline at end of file +body.desktop .t-message-list { + .message-contents .l-message { margin-right: $interiorMarginLg; } +} diff --git a/platform/commonUI/general/res/sass/controls/_time-controller.scss b/platform/commonUI/general/res/sass/controls/_time-controller.scss index f615104666..49d996102d 100644 --- a/platform/commonUI/general/res/sass/controls/_time-controller.scss +++ b/platform/commonUI/general/res/sass/controls/_time-controller.scss @@ -37,7 +37,7 @@ mct-include.l-time-controller { { //@include test(); @include absPosDefault(0, visible); - @include box-sizing(border-box); + box-sizing: border-box; top: auto; } .l-time-range-slider, @@ -73,7 +73,7 @@ mct-include.l-time-controller { //@include test(green); height: $r2H; bottom: $r3H + ($interiorMarginSm * 1); .range-holder { - @include box-shadow(none); + box-shadow: none; background: none; border: none; .range { @@ -101,7 +101,7 @@ mct-include.l-time-controller { } &:after { // Circle element - @include border-radius($myW); + border-radius: $myW; @include transform(translateY(-50%)); top: 50%; right: 0; bottom: auto; left: 0; width: auto; @@ -167,7 +167,7 @@ mct-include.l-time-controller { color: $sliderColorKnobHov; } &.knob-l { - //@include border-bottom-left-radius($knobCr); // MOVED TO _CONTROLS.SCSS + //border-bottom-left-radius: $knobCr; // MOVED TO _CONTROLS.SCSS margin-left: $knobM; .range-value { text-align: right; @@ -175,7 +175,7 @@ mct-include.l-time-controller { } } &.knob-r { - //@include border-bottom-right-radius($knobCr); + //border-bottom-right-radius: $knobCr; margin-right: $knobM; .range-value { left: $rangeValOffset; @@ -193,7 +193,7 @@ mct-include.l-time-controller { .s-time-range-val { //@include test(); - @include border-radius($controlCr); + border-radius: $controlCr; background-color: $colorInputBg; padding: 1px 1px 0 $interiorMargin; } \ No newline at end of file diff --git a/platform/commonUI/general/res/sass/edit/_editor.scss b/platform/commonUI/general/res/sass/edit/_editor.scss index 4a8edf8120..06db8f6455 100644 --- a/platform/commonUI/general/res/sass/edit/_editor.scss +++ b/platform/commonUI/general/res/sass/edit/_editor.scss @@ -38,22 +38,22 @@ z-index: 11; } &.edit-resize-nw { - @include border-bottom-right-radius($cr); + border-bottom-right-radius: $cr; cursor: nw-resize; top: 0; left: 0; } &.edit-resize-ne { - @include border-bottom-left-radius($cr); + border-bottom-left-radius: $cr; cursor: ne-resize; top: 0; right: 0; } &.edit-resize-se { - @include border-top-left-radius($cr); + border-top-left-radius: $cr; cursor: se-resize; bottom: 0; right: 0; } &.edit-resize-sw { - @include border-top-right-radius($cr); + border-top-right-radius: $cr; cursor: sw-resize; bottom: 0; left: 0; } @@ -109,4 +109,4 @@ } } } -} \ No newline at end of file +} diff --git a/platform/commonUI/general/res/sass/features/_imagery.scss b/platform/commonUI/general/res/sass/features/_imagery.scss index fa74ed1caf..c1024d2912 100644 --- a/platform/commonUI/general/res/sass/features/_imagery.scss +++ b/platform/commonUI/general/res/sass/features/_imagery.scss @@ -104,8 +104,8 @@ } .l-image-thumb-item { - @include single-transition(background-color, 0.25s); - @include box-sizing(border-box); + @include transition(background-color, 0.25s); + box-sizing: border-box; padding: 1px; position: relative; .l-thumb, diff --git a/platform/commonUI/general/res/sass/forms/_elems.scss b/platform/commonUI/general/res/sass/forms/_elems.scss index 2e7f87ef9a..b9a95cba40 100644 --- a/platform/commonUI/general/res/sass/forms/_elems.scss +++ b/platform/commonUI/general/res/sass/forms/_elems.scss @@ -20,7 +20,7 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ .section-header { - @include border-radius($basicCr); + border-radius: $basicCr; background: $colorFormSectionHeader; $c: lighten($colorBodyFg, 20%); //border-bottom: 1px solid rgba(#fff, 0.3); @@ -39,7 +39,7 @@ .form-row { $m: $interiorMargin; - @include box-sizing(border-box); + box-sizing: border-box; @include clearfix; border-top: 1px solid $colorFormLines; margin-top: $m; @@ -51,7 +51,7 @@ >.label, >.controls { - @include box-sizing(border-box); + box-sizing: border-box; @include clearfix; font-size: 0.8rem; line-height: $formInputH; @@ -149,7 +149,7 @@ label.form-control.checkbox { vertical-align: top; div.s-hint { - @include border-radius($basicCr); + border-radius: $basicCr; background: rgba($colorFormInvalid, 0.8); display: block; color: lighten($colorFormInvalid, 30%); diff --git a/platform/commonUI/general/res/sass/forms/_filter.scss b/platform/commonUI/general/res/sass/forms/_filter.scss index 64f697e439..2ca7dcfdb5 100644 --- a/platform/commonUI/general/res/sass/forms/_filter.scss +++ b/platform/commonUI/general/res/sass/forms/_filter.scss @@ -27,7 +27,7 @@ } } .icon.ui-symbol { - @include border-radius($controlCr); + border-radius: $controlCr; display: inline-block; font-size: 1.3em; height: $formInputH; @@ -43,9 +43,9 @@ $d: $formInputH - $mgn * 2; $cb: #fff; $cf: #333; - @include border-radius($controlCr); - @include box-sizing(border-box); - @include opacity(0.2); + border-radius: $controlCr; + box-sizing: border-box; + opacity: 0.2; background: $cb; color: $cf; display: block; @@ -59,7 +59,7 @@ text-align: center; z-index: 5; &:hover { - @include opacity(0.6); + opacity: 0.6; background-color: $colorKey; } } @@ -95,7 +95,7 @@ .clear-icon, .menu-icon, &:before { - @include box-sizing(border-box); + box-sizing: border-box; display: inline-block; line-height: inherit; position: absolute; diff --git a/platform/commonUI/general/res/sass/forms/_selects.scss b/platform/commonUI/general/res/sass/forms/_selects.scss index 0b7abb3304..73fe1a547e 100644 --- a/platform/commonUI/general/res/sass/forms/_selects.scss +++ b/platform/commonUI/general/res/sass/forms/_selects.scss @@ -30,7 +30,7 @@ line-height: $formInputH; select { @include appearance(none); - @include box-sizing(border-box); + box-sizing: border-box; background: none; color: $colorSelectFg; cursor: pointer; diff --git a/platform/commonUI/general/res/sass/helpers/_bubbles.scss b/platform/commonUI/general/res/sass/helpers/_bubbles.scss index 166f92a883..6901a3e380 100644 --- a/platform/commonUI/general/res/sass/helpers/_bubbles.scss +++ b/platform/commonUI/general/res/sass/helpers/_bubbles.scss @@ -30,7 +30,7 @@ .l-infobubble-wrapper { $arwSize: 5px; - @include box-shadow(rgba(black, 0.4) 0 1px 5px); + box-shadow: rgba(black, 0.4) 0 1px 5px; position: relative; z-index: 50; .l-infobubble { @@ -149,8 +149,8 @@ .s-infobubble { $emFg: darken($colorInfoBubbleFg, 20%); - @include border-radius($basicCr); - @include box-shadow(rgba(black, 0.4) 0 1px 5px); + border-radius: $basicCr; + box-shadow: rgba(black, 0.4) 0 1px 5px; background: $colorInfoBubbleBg; color: $colorInfoBubbleFg; font-size: 0.8rem; diff --git a/platform/commonUI/general/res/sass/helpers/_splitter.scss b/platform/commonUI/general/res/sass/helpers/_splitter.scss index 27e3e25fc0..3db0fcbe4a 100644 --- a/platform/commonUI/general/res/sass/helpers/_splitter.scss +++ b/platform/commonUI/general/res/sass/helpers/_splitter.scss @@ -39,7 +39,7 @@ display: block; @if $splitterEndCr != 'none' { - @include border-radius($splitterEndCr); + border-radius: $splitterEndCr; } } &:active { diff --git a/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss b/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss index 015bf05187..310f72d1b4 100644 --- a/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss +++ b/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss @@ -34,8 +34,8 @@ @include animation-duration(0.5s); @include animation-iteration-count(infinite); @include animation-timing-function(linear); - @include border-radius(100%); - @include box-sizing(border-box); + border-radius: 100%; + box-sizing: border-box; border-color: rgba($c, 0.25); border-top-color: rgba($c, 1.0); border-style: solid; diff --git a/platform/commonUI/general/res/sass/lists/_tabular.scss b/platform/commonUI/general/res/sass/lists/_tabular.scss index 559f7324a4..e08f7f191e 100644 --- a/platform/commonUI/general/res/sass/lists/_tabular.scss +++ b/platform/commonUI/general/res/sass/lists/_tabular.scss @@ -26,7 +26,7 @@ .tabular, table { - @include box-sizing(border-box); + box-sizing: border-box; border-spacing: 0; border-collapse: collapse; display: table; @@ -107,7 +107,7 @@ table { &.s-cell-type-value { text-align: right; .l-cell-contents { - @include border-radius($smallCr); + border-radius: $smallCr; padding-left: $itemPadLR; padding-right: $itemPadLR; } @@ -126,7 +126,7 @@ table { top: $tabularHeaderH * 2; } input[type="text"] { - @include box-sizing(border-box); + box-sizing: border-box; width: 100%; //50px; } } diff --git a/platform/commonUI/general/res/sass/mobile/_item.scss b/platform/commonUI/general/res/sass/mobile/_item.scss index e60e96c5a7..16e35d4577 100644 --- a/platform/commonUI/general/res/sass/mobile/_item.scss +++ b/platform/commonUI/general/res/sass/mobile/_item.scss @@ -24,11 +24,21 @@ // representation. Instead of a grid, // a list is used. + +// Refactored to use Victorizr .items-holder { .item { &.grid-item { $titleH: 30px; - @include phoneandtablet { + } + } +} + +body.phone, +body.tablet { + .items-holder { + .item { + &.grid-item { width: 100%; >.contents { top: 0px; right: $interiorMarginLg; bottom: 0px; left: $interiorMarginLg; @@ -36,7 +46,6 @@ .bar { &.top-bar { // Becomes the right side of the item - //@include test(blue); bottom: 0 !important; left: auto !important; right: 20px !important; width: 40px !important; height: auto !important; text-align: right; @@ -46,7 +55,7 @@ left: $mobileListIconSize + $interiorMarginLg; right: 60px; } - + } .item-main { .item-type, @@ -63,8 +72,14 @@ } } } + } + } +} - @include phone { +body.phone { + .items-holder { + .item { + &.grid-item { $dHei: $phoneItemH; height: $dHei; .bar { @@ -85,8 +100,14 @@ } } } - - @include tablet { + } + } +} + +body.tablet { + .items-holder { + .item { + &.grid-item { $dHei: $tabletItemH; height: $dHei; .bar { diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss index 8d0cc15770..01790dbfee 100644 --- a/platform/commonUI/general/res/sass/mobile/_layout.scss +++ b/platform/commonUI/general/res/sass/mobile/_layout.scss @@ -20,14 +20,7 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ -@include phoneandtablet { - // Wrapper of the entire 2 panes, only enacted on - // phone and tablet. Also for the panes - .browse-wrapper, - .pane { - top: 0 !important; right: 0; bottom: 0; left: 0; - } - +body.mobile { .pane.left.treeview { background-color: $colorMobilePaneLeft; } @@ -141,7 +134,7 @@ } } -@include phonePortrait { +body.phone.portrait { .pane-tree-showing { .pane.left.treeview { width: $proporMenuOnly !important; @@ -156,7 +149,7 @@ } } -@include desktop { +body.desktop { .desktop-hide { display: none; } diff --git a/platform/commonUI/general/res/sass/mobile/_mixins.scss b/platform/commonUI/general/res/sass/mobile/_mixins.scss index 8c35d6a211..a0895222a2 100644 --- a/platform/commonUI/general/res/sass/mobile/_mixins.scss +++ b/platform/commonUI/general/res/sass/mobile/_mixins.scss @@ -78,6 +78,8 @@ // Desktop monitors in any orientation @mixin desktopandtablet { + // Keeping only for legacy - should not be used moving forward + // Use body.desktop, body.tablet instead. @media #{$tabletPortrait}, #{$tabletLandscape}, #{$desktop} { @@ -87,6 +89,8 @@ // Desktop monitors in any orientation @mixin desktop { + // Keeping only for legacy - should not be used moving forward + // Use body.desktop instead. @media #{$desktop} { @content } diff --git a/platform/commonUI/general/res/sass/mobile/_tree.scss b/platform/commonUI/general/res/sass/mobile/_tree.scss index 22ed795ce8..5a0b6fd36d 100644 --- a/platform/commonUI/general/res/sass/mobile/_tree.scss +++ b/platform/commonUI/general/res/sass/mobile/_tree.scss @@ -20,7 +20,7 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ -@include phoneandtablet { +body.touch { ul.tree { // Sets the margin on the left, which causes the // running indentation after each folder is made @@ -42,10 +42,10 @@ &:before { content: "\7d"; left: 50%; - @include transform(translateX(-50%) rotate(90deg)); + @include transform(translateX(-50%) rotate(270deg)); } &.expanded:before { - @include transform(translateX(-50%) rotate(270deg)); + @include transform(translateX(-50%) rotate(90deg)); } } } diff --git a/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss b/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss index 9fd6721130..a5459aa1d9 100644 --- a/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss +++ b/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss @@ -27,7 +27,7 @@ .overlay > .holder { //@include test(orange); // This works! $m: 0; - @include border-radius($m); + border-radius: $m; top: $m; right: $m; bottom: $m; diff --git a/platform/commonUI/general/res/sass/overlay/_overlay.scss b/platform/commonUI/general/res/sass/overlay/_overlay.scss index 602af62887..c4700795e5 100644 --- a/platform/commonUI/general/res/sass/overlay/_overlay.scss +++ b/platform/commonUI/general/res/sass/overlay/_overlay.scss @@ -37,7 +37,7 @@ > .holder { //$i: 15%; @include containerSubtle($colorOvrBg, $colorOvrFg); - @include border-radius($basicCr * 3); + border-radius: $basicCr * 3; color: $colorOvrFg; top: 50%; right: auto; diff --git a/platform/commonUI/general/res/sass/plots/_plots-main.scss b/platform/commonUI/general/res/sass/plots/_plots-main.scss index 8f4327bb77..22e8312087 100644 --- a/platform/commonUI/general/res/sass/plots/_plots-main.scss +++ b/platform/commonUI/general/res/sass/plots/_plots-main.scss @@ -69,8 +69,8 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa } .gl-plot-coords { - @include box-sizing(border-box); - @include border-radius($controlCr); + box-sizing: border-box; + border-radius: $controlCr; background: black; color: lighten($colorBodyFg, 30%); padding: 2px 5px; @@ -117,7 +117,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa &.l-plot-y-label { $x: -50%; $r: -90deg; - @include transform-origin(50%, 0); + @include transform-origin(50% 0); @include transform(translateX($x) rotate($r)); display: inline-block; margin-left: $interiorMargin; // Kick off the left edge @@ -234,7 +234,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa } .plot-color-swatch, .color-swatch { - @include border-radius(2px); + border-radius: 2px; display: inline-block; height: $swatchD; width: $swatchD; @@ -244,7 +244,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa .gl-plot-legend { .plot-legend-item { - @include border-radius($smallCr); + border-radius: $smallCr; line-height: 1.5em; padding: 0px $itemPadLR; .plot-color-swatch { @@ -310,4 +310,4 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa &.tick-label-y { right: 0; left: 0; } -} \ No newline at end of file +} diff --git a/platform/commonUI/general/res/sass/search/_search.scss b/platform/commonUI/general/res/sass/search/_search.scss index 37043ae939..a831dedf08 100644 --- a/platform/commonUI/general/res/sass/search/_search.scss +++ b/platform/commonUI/general/res/sass/search/_search.scss @@ -42,7 +42,6 @@ $iconEdgeM: 4px; $iconD: $treeSearchInputBarH - ($iconEdgeM*2); font-size: 0.8em; - max-width: 250px; position: relative; .search-input { @@ -53,7 +52,7 @@ &:before, .clear-icon, .menu-icon { - @include box-sizing(border-box); + box-sizing: border-box; color: $colorInputIcon; height: $iconD; width: $iconD; @@ -130,7 +129,7 @@ .active-filter-display { $s: 0.7em; $p: $interiorMargin; - @include box-sizing(border-box); + box-sizing: border-box; line-height: 130%; padding-left: $s * 2.25; font-size: $s; diff --git a/platform/commonUI/general/res/sass/tree/_tree.scss b/platform/commonUI/general/res/sass/tree/_tree.scss index 405a10de7a..40c93e110d 100644 --- a/platform/commonUI/general/res/sass/tree/_tree.scss +++ b/platform/commonUI/general/res/sass/tree/_tree.scss @@ -35,9 +35,9 @@ ul.tree { .tree-item, .search-result-item { @extend .l-flex-row; - @include box-sizing(border-box); - @include border-radius($basicCr); - @include single-transition(background-color, 0.25s); + box-sizing: border-box; + border-radius: $basicCr; + @include transition(background-color, 0.25s); font-size: 0.8rem; height: $menuLineH; line-height: $menuLineH; @@ -63,11 +63,6 @@ ul.tree { @include transform(rotate(90deg)); } } - @include desktop { - &:hover { - color: $colorItemTreeVCHover !important; - } - } } .t-object-label { @@ -94,18 +89,6 @@ ul.tree { } } - &:not(.selected) { - @include desktop { - &:hover { - background: $colorItemTreeHoverBg; - color: $colorItemTreeHoverFg; - .t-item-icon { - color: $colorItemTreeIconHover; - } - } - } - } - &:not(.loading) { cursor: pointer; } @@ -123,6 +106,26 @@ ul.tree { } } +body.desktop { + .tree-item, + .search-result-item { + .view-control { + &:hover { + color: $colorItemTreeVCHover !important; + } + } + &:not(.selected) { + &:hover { + background: $colorItemTreeHoverBg; + color: $colorItemTreeHoverFg; + .t-item-icon { + color: $colorItemTreeIconHover; + } + } + } + } +} + mct-representation { &.s-status-pending { .t-object-label { @@ -155,7 +158,7 @@ mct-representation { .t-item-icon, .t-title-label { color: $colorItemTreeEditingFg; - @include text-shadow(none); + text-shadow: none; } .t-title-label { font-style: italic; diff --git a/platform/commonUI/general/res/sass/user-environ/_frame.scss b/platform/commonUI/general/res/sass/user-environ/_frame.scss index a88ecb7ee1..64c4dbd69b 100644 --- a/platform/commonUI/general/res/sass/user-environ/_frame.scss +++ b/platform/commonUI/general/res/sass/user-environ/_frame.scss @@ -66,17 +66,6 @@ .view-switcher { z-index: 10; } - // Hide the view switcher by default when it's in an element that's in a frame context - // Frame template is used because we need to target the lowest nested frame - @include desktop { - .view-switcher { - opacity: 0; - } - &:hover .view-switcher { - // Show the view switcher on frame hover - opacity: 1; - } - } } .view-switcher { // Hide the name when the view switcher is in a frame context @@ -85,3 +74,14 @@ } } } + body.desktop .frame.frame-template { + // Hide the view switcher by default when it's in an element that's in a frame context + // Frame template is used because we need to target the lowest nested frame + .view-switcher { + opacity: 0; + } + &:hover .view-switcher { + // Show the view switcher on frame hover + opacity: 1; + } + } \ No newline at end of file diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss index 54da48268c..23a47447b2 100644 --- a/platform/commonUI/general/res/sass/user-environ/_layout.scss +++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss @@ -27,7 +27,7 @@ } .editor { - @include border-radius($basicCr * 1.5); + border-radius: $basicCr * 1.5; } .contents { @@ -86,7 +86,7 @@ color: lighten($colorBodyBg, 30%); font-size: .7rem; .status-holder { - @include box-sizing(border-box); + box-sizing: border-box; @include absPosDefault($interiorMargin); @include ellipsize(); right: 120px; @@ -94,7 +94,7 @@ z-index: 1; } .app-logo { - @include box-sizing(border-box); + box-sizing: border-box; @include absPosDefault($interiorMargin); cursor: pointer; left: auto; @@ -121,7 +121,7 @@ } .pane { - @include box-sizing(border-box); + box-sizing: border-box; position: absolute; .pane-header { @@ -137,48 +137,6 @@ .mini-tab-icon.toggle-pane { z-index: 5; - @include desktop { - $d: $uePaneMiniTabH; - $paneExpandedOffset: $splitterD + $uePaneMiniTabW; - top: $bodyMargin; - height: $d; - line-height: $d; - &:after { - // Always the icon that shows when the pane is collapsed - opacity: 0; - } - &.collapsed { - &:before { - opacity: 0; - } - &:after { - opacity: 1; - } - } - &.toggle-tree.anchor-left { - left: 0; - @include transform(translateX(-1 * $paneExpandedOffset)); - &:after { - content: '\6d'; // Menu 'hamburger' icon - } - &.collapsed { - left: 0; - @include transform(translateX((-1 * $ueCollapsedPaneEdgeM) + $interiorMargin)); - } - &:not(.collapsed):before { - @include trans-prop-nice(opacity, 200ms, 200ms); - } - } - &.toggle-inspect.anchor-right { - right: $bodyMargin; - &:after { - content: '\e615'; // Eye icon - } - &.collapsed { - right: $interiorMargin; - } - } - } } &.items { .object-browse-bar { @@ -190,6 +148,49 @@ } } +body.desktop .pane .mini-tab-icon.toggle-pane { + $d: $uePaneMiniTabH; + $paneExpandedOffset: $splitterD + $uePaneMiniTabW; + top: $bodyMargin; + height: $d; + line-height: $d; + &:after { + // Always the icon that shows when the pane is collapsed + opacity: 0; + } + &.collapsed { + &:before { + opacity: 0; + } + &:after { + opacity: 1; + } + } + &.toggle-tree.anchor-left { + left: 0; + @include transform(translateX(-1 * $paneExpandedOffset)); + &:after { + content: '\6d'; // Menu 'hamburger' icon + } + &.collapsed { + left: 0; + @include transform(translateX((-1 * $ueCollapsedPaneEdgeM) + $interiorMargin)); + } + &:not(.collapsed):before { + @include trans-prop-nice(opacity, 200ms, 200ms); + } + } + &.toggle-inspect.anchor-right { + right: $bodyMargin; + &:after { + content: '\e615'; // Eye icon + } + &.collapsed { + right: $interiorMargin; + } + } +} + .split-layout { // Specific elements margins .holder.holder-treeview-elements { @@ -282,7 +283,7 @@ /***************************************************** OBJECT BROWSE BAR */ .object-browse-bar { - @include box-sizing(border-box); + box-sizing: border-box; height: $ueTopBarH; line-height: $ueTopBarH; white-space: nowrap; @@ -339,7 +340,7 @@ } } -@include desktop { +body.desktop { .holder-all { min-width: $ueDesktopMinW; } @@ -378,7 +379,7 @@ .s-status-editing { .l-object-wrapper { @include pulseBorder($colorEditAreaFg, $dur: 1s, $opacity0: 0.3); - @include border-radius($controlCr); + border-radius: $controlCr; background-color: $colorEditAreaBg; border-color: $colorEditAreaFg; border-width: 2px; diff --git a/platform/commonUI/general/res/sass/user-environ/_tool-bar.scss b/platform/commonUI/general/res/sass/user-environ/_tool-bar.scss index 55ded31b5b..b0daeb867f 100644 --- a/platform/commonUI/general/res/sass/user-environ/_tool-bar.scss +++ b/platform/commonUI/general/res/sass/user-environ/_tool-bar.scss @@ -27,7 +27,7 @@ height: $btnToolbarH; } input[type="text"] { - @include box-sizing(border-box); + box-sizing: border-box; font-size: .9em; height: $btnToolbarH; margin-bottom: 1px; diff --git a/platform/commonUI/general/res/templates/bottombar.html b/platform/commonUI/general/res/templates/bottombar.html index f0d3799542..1883d31dd5 100644 --- a/platform/commonUI/general/res/templates/bottombar.html +++ b/platform/commonUI/general/res/templates/bottombar.html @@ -23,7 +23,8 @@
+ key="indicator.template" + class="status-block-holder">
diff --git a/platform/commonUI/general/res/templates/indicator.html b/platform/commonUI/general/res/templates/indicator.html index fb4a2f89c9..401c9990b9 100644 --- a/platform/commonUI/general/res/templates/indicator.html +++ b/platform/commonUI/general/res/templates/indicator.html @@ -30,11 +30,8 @@ {{ngModel.getText()}} + G - - G - + \ No newline at end of file diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss index 5f9cb56fc0..3ed6cc276e 100644 --- a/platform/commonUI/themes/espresso/res/sass/_constants.scss +++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss @@ -12,12 +12,14 @@ $colorInteriorBorder: rgba($colorBodyFg, 0.1); $colorA: #ccc; $colorAHov: #fff; $contrastRatioPercent: 7%; +$hoverRatioPercent: 10%; $basicCr: 3px; $controlCr: 3px; $smallCr: 2px; // Buttons and Controls -$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent); // +$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent); +$colorBtnBgHov: pullForward($colorBtnBg, $hoverRatioPercent); $colorBtnFg: $colorBodyFg; $colorBtnMajorBg: $colorKey; $colorBtnMajorFg: $colorKeyFg; @@ -54,7 +56,7 @@ $colorTick: rgba(white, 0.2); $colorMenuBg: pullForward($colorBodyBg, 23%); $colorMenuFg: pullForward($colorMenuBg, 70%); $colorMenuIc: pullForward($colorKey, 17%); -$colorMenuHovBg: pullForward($colorMenuBg, 10%); +$colorMenuHovBg: pullForward($colorMenuBg, $hoverRatioPercent); $colorMenuHovFg: #fff; $colorMenuHovIc: $colorMenuHovFg; $shdwMenu: none; @@ -89,6 +91,8 @@ $colorStatusDefault: #ccc; $colorStatusInfo: #62ba72; $colorStatusAlert: #ffa66d; $colorStatusError: #d4585c; +$colorStatusAvailable: $colorKey; +$colorStatusBtnBg: $colorBtnBg; $colorProgressBarOuter: rgba(#000, 0.1); $colorProgressBarAmt: $colorKey; $progressBarHOverlay: 15px; @@ -123,7 +127,7 @@ $colorOvrBtnFg: #fff; // Items $colorItemBg: lighten($colorBodyBg, 5%); -$colorItemBgHov: pullForward($colorItemBg, 15%); +$colorItemBgHov: pullForward($colorItemBg, $hoverRatioPercent); $colorItemFg: lighten($colorItemBg, 50%); $colorItemFgDetails: lighten($colorItemBg, 30%); $colorItemIc: $colorKey; @@ -149,26 +153,26 @@ $colorPlotAreaBorder: $colorInteriorBorder; $colorPlotLabelFg: pushBack($colorPlotFg, 20%); // Tree -$colorItemTreeHoverBg: rgba($colorBodyFg, 0.1); -$colorItemTreeHoverFg: pullForward($colorBodyFg, 20%); +$colorItemTreeHoverBg: pullForward($colorBodyBg, $hoverRatioPercent); +$colorItemTreeHoverFg: pullForward($colorBodyFg, $hoverRatioPercent); $colorItemTreeIcon: $colorKey; $colorItemTreeIconHover: lighten($colorItemTreeIcon, 20%); -$colorItemTreeVCHover: $colorAlt1; $colorItemTreeFg: $colorBodyFg; $colorItemTreeSelectedBg: pushBack($colorKey, 15%); $colorItemTreeSelectedFg: pullForward($colorBodyFg, 20%); $colorItemTreeEditingBg: #344154; $colorItemTreeEditingFg: $colorEditAreaFg; -$colorItemTreeVC: rgba(#fff, 0.3); +$colorItemTreeVC: $colorBodyFg; //rgba(#fff, 0.3); +$colorItemTreeVCHover: pullForward($colorItemTreeVC, 20%); $colorItemTreeSelectedVC: $colorItemTreeVC; $shdwItemTreeIcon: 0.6; // Scrollbar $scrollbarTrackSize: 10px; +$scrollbarTrackShdw: rgba(#000, 0.7) 0 1px 5px; $scrollbarTrackColorBg: rgba(#000, 0.4); $scrollbarThumbColor: lighten($colorBodyBg, 10%); $scrollbarThumbColorHov: lighten($scrollbarThumbColor, 2%); -$scrollbarTrackShdw: rgba(#000, 0.7) 0 1px 5px; // Splitter $splitterD: 25px; // splitterD and HandleD should both be odd, or even diff --git a/platform/commonUI/themes/espresso/res/sass/_mixins.scss b/platform/commonUI/themes/espresso/res/sass/_mixins.scss index b196557ba3..cfbe58dd66 100644 --- a/platform/commonUI/themes/espresso/res/sass/_mixins.scss +++ b/platform/commonUI/themes/espresso/res/sass/_mixins.scss @@ -4,10 +4,10 @@ @include boxShdw($shdwBtns); } -@mixin btnSubtle($bg: $colorBodyBg, $bgHov: none, $fg: $colorBodyFg, $ic: $colorBtnIcon) { +@mixin btnSubtle($bg: $colorBodyBg, $bgHovColor: none, $fg: $colorBodyFg, $ic: $colorBtnIcon) { @include containerSubtle($bg, $fg); - @include btnBase($bg, linear-gradient(lighten($bg, 15%), lighten($bg, 10%)), $fg, $ic); - @include text-shadow($shdwItemText); + @include btnBase($bg, $bgHovColor, $fg, $ic); + text-shadow: $shdwItemText; } @function pullForward($c: $colorBodyBg, $p: 20%) { diff --git a/platform/commonUI/themes/espresso/res/sass/theme-espresso.scss b/platform/commonUI/themes/espresso/res/sass/theme-espresso.scss index 74d213adf9..a87bf7e51d 100644 --- a/platform/commonUI/themes/espresso/res/sass/theme-espresso.scss +++ b/platform/commonUI/themes/espresso/res/sass/theme-espresso.scss @@ -20,10 +20,7 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ -@import "compass"; -@import "compass/reset"; -@import "compass/css3"; -@import "compass/utilities"; +@import "bourbon"; @import "../../../../general/res/sass/_mixins"; @import "../../../../general/res/sass/mobile/mixins"; @@ -33,4 +30,4 @@ @import "../../../../general/res/sass/mobile/constants"; @import "constants"; -@import "../../../../general/res/sass/main"; \ No newline at end of file +@import "../../../../general/res/sass/main"; diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss index 2e5b020f9f..4390bd092c 100644 --- a/platform/commonUI/themes/snow/res/sass/_constants.scss +++ b/platform/commonUI/themes/snow/res/sass/_constants.scss @@ -12,12 +12,14 @@ $colorInteriorBorder: rgba($colorBodyFg, 0.2); $colorA: #999; $colorAHov: $colorKey; $contrastRatioPercent: 40%; +$hoverRatioPercent: 10%; $basicCr: 4px; $controlCr: $basicCr; $smallCr: 3px; // Buttons and Controls $colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent); +$colorBtnBgHov: pullForward($colorBtnBg, $hoverRatioPercent); $colorBtnFg: #fff; $colorBtnMajorBg: $colorKey; $colorBtnMajorFg: $colorKeyFg; @@ -54,7 +56,7 @@ $colorTick: rgba(black, 0.2); $colorMenuBg: pushBack($colorBodyBg, 10%); $colorMenuFg: pullForward($colorMenuBg, 70%); $colorMenuIc: $colorKey; -$colorMenuHovBg: pullForward($colorMenuBg, 10%); +$colorMenuHovBg: pullForward($colorMenuBg, $hoverRatioPercent); $colorMenuHovFg: $colorMenuFg; $colorMenuHovIc: $colorMenuIc; $shdwMenu: rgba(black, 0.5) 0 1px 5px; @@ -89,6 +91,8 @@ $colorStatusDefault: #ccc; $colorStatusInfo: #60ba7b; $colorStatusAlert: #ffb66c; $colorStatusError: #c96b68; +$colorStatusAvailable: $colorKey; +$colorStatusBtnBg: #666; $colorProgressBarOuter: rgba(#000, 0.1); $colorProgressBarAmt: #0a0; $progressBarHOverlay: 15px; @@ -123,7 +127,7 @@ $colorOvrBtnFg: #fff; // Items $colorItemBg: #ddd; -$colorItemBgHov: pullForward($colorItemBg, 5%); +$colorItemBgHov: pullForward($colorItemBg, $hoverRatioPercent); $colorItemFg: $colorBodyFg; $colorItemFgDetails: pushBack($colorItemFg, 15%); $colorItemIc: $colorKey; @@ -149,17 +153,17 @@ $colorPlotAreaBorder: $colorInteriorBorder; $colorPlotLabelFg: pushBack($colorPlotFg, 20%); // Tree -$colorItemTreeHoverBg: rgba($colorBodyFg, 0.1); -$colorItemTreeHoverFg: pullForward($colorBodyFg, 20%); +$colorItemTreeHoverBg: pullForward($colorBodyBg, $hoverRatioPercent); +$colorItemTreeHoverFg: pullForward($colorBodyFg, $hoverRatioPercent); $colorItemTreeIcon: $colorKey; -$colorItemTreeIconHover: $colorItemTreeIcon; //pushBack($colorItemTreeIcon, 20%); -$colorItemTreeVCHover: $colorKey; +$colorItemTreeIconHover: $colorItemTreeIcon; $colorItemTreeFg: $colorBodyFg; $colorItemTreeSelectedBg: pushBack($colorKey, 15%); $colorItemTreeSelectedFg: $colorBodyBg; -$colorItemTreeEditingBg: #caf1ff; //#c6e3ff; +$colorItemTreeEditingBg: #caf1ff; $colorItemTreeEditingFg: $colorEditAreaFg; $colorItemTreeVC: $colorBodyFg; +$colorItemTreeVCHover: $colorKey; $colorItemTreeSelectedVC: $colorBodyBg; $shdwItemTreeIcon: none; @@ -194,4 +198,4 @@ $colorAboutLink: #84b3ff; // Loading $colorLoadingFg: $colorAlt1; -$colorLoadingBg: rgba($colorLoadingFg, 0.1); \ No newline at end of file +$colorLoadingBg: rgba($colorLoadingFg, 0.1); diff --git a/platform/commonUI/themes/snow/res/sass/_mixins.scss b/platform/commonUI/themes/snow/res/sass/_mixins.scss index 05a5c4fb64..34f6462d41 100644 --- a/platform/commonUI/themes/snow/res/sass/_mixins.scss +++ b/platform/commonUI/themes/snow/res/sass/_mixins.scss @@ -3,10 +3,10 @@ @include boxShdw($shdwBtns); } -@mixin btnSubtle($bg: $colorBtnBg, $bgHov: none, $fg: $colorBtnFg, $ic: $colorBtnIcon) { +@mixin btnSubtle($bg: $colorBtnBg, $bgHovColor: none, $fg: $colorBtnFg, $ic: $colorBtnIcon) { @include containerSubtle($bg, $fg); - @include btnBase($bg, $bgHov, $fg, $ic); - @include text-shadow($shdwItemText); + @include btnBase($bg, $bgHovColor, $fg, $ic); + text-shadow: $shdwItemText; } @function pullForward($c: $colorBodyBg, $p: 20%) { diff --git a/platform/commonUI/themes/snow/res/sass/theme-snow.scss b/platform/commonUI/themes/snow/res/sass/theme-snow.scss index 2fa943f1fe..0e55a860c7 100644 --- a/platform/commonUI/themes/snow/res/sass/theme-snow.scss +++ b/platform/commonUI/themes/snow/res/sass/theme-snow.scss @@ -20,10 +20,7 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ -@import "compass"; -@import "compass/reset"; -@import "compass/css3"; -@import "compass/utilities"; +@import "bourbon"; @import "../../../../general/res/sass/_mixins"; @import "../../../../general/res/sass/mobile/mixins"; diff --git a/platform/features/timeline/res/sass-compile.sh b/platform/features/timeline/res/sass-compile.sh deleted file mode 100644 index ee7f1cdf77..0000000000 --- a/platform/features/timeline/res/sass-compile.sh +++ /dev/null @@ -1,4 +0,0 @@ -date - -echo "*** Compiling sass" -compass compile --force \ No newline at end of file diff --git a/platform/features/timeline/res/sass/_activities.scss b/platform/features/timeline/res/sass/_activities.scss index 2f88334e0e..268c602ae8 100644 --- a/platform/features/timeline/res/sass/_activities.scss +++ b/platform/features/timeline/res/sass/_activities.scss @@ -23,7 +23,7 @@ } } &.s-title { - @include text-shadow(rgba(black, 0.1) 0 1px 2px); + text-shadow: rgba(black, 0.1) 0 1px 2px; } &.duration { left: auto; diff --git a/platform/features/timeline/res/sass/_timeline-thematic.scss b/platform/features/timeline/res/sass/_timeline-thematic.scss index 7e123edbb0..be25f24c1d 100644 --- a/platform/features/timeline/res/sass/_timeline-thematic.scss +++ b/platform/features/timeline/res/sass/_timeline-thematic.scss @@ -36,8 +36,8 @@ .bar { color: $colorGanttBarFg; @include activityBg($colorGanttBarBg); - @include border-radius($br); - @include box-shadow($shdwGanttBar); + border-radius: $br; + box-shadow: $shdwGanttBar; &.expanded { @include border-top-radius($br); @include border-bottom-radius(0); @@ -145,7 +145,7 @@ .s-status-editing .s-swimlane { cursor: pointer; .t-object-label { - @include border-radius($controlCr); + border-radius: $controlCr; cursor: move; padding: 2px 5px; &:hover { diff --git a/platform/features/timeline/res/sass/_timelines.scss b/platform/features/timeline/res/sass/_timelines.scss index 8ab100f122..dceaa49f9b 100644 --- a/platform/features/timeline/res/sass/_timelines.scss +++ b/platform/features/timeline/res/sass/_timelines.scss @@ -62,7 +62,7 @@ } } &.l-timeline-resource-legend { - @include box-sizing(border-box); + box-sizing: border-box; padding: $interiorMargin 0; white-space: nowrap; @@ -214,7 +214,7 @@ .l-hover-btns-holder { @include absPosDefault(); - @include box-sizing(border-box); + box-sizing: border-box; @include trans-prop-nice-fade(500ms); opacity: 0; height: $timelineTopPaneHeaderH; @@ -230,7 +230,7 @@ text-wrap: none; white-space: nowrap; .l-col { - @include box-sizing(border-box); + box-sizing: border-box; @include ellipsize(); display: inline-block; height: 100%; @@ -257,8 +257,8 @@ &.l-title { width: $timelineColTitleW; .rep-object-label[draggable="true"] { - @include border-radius($basicCr); - @include single-transition(background-color, 0.25s); + border-radius: $basicCr; + @include transition(background-color, 0.25s); cursor: pointer; display: inline-block; padding: 0 $interiorMarginSm; diff --git a/platform/features/timeline/res/sass/timeline-espresso.scss b/platform/features/timeline/res/sass/timeline-espresso.scss index 354d565e0f..67307102bb 100644 --- a/platform/features/timeline/res/sass/timeline-espresso.scss +++ b/platform/features/timeline/res/sass/timeline-espresso.scss @@ -19,9 +19,7 @@ * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ -@import "compass"; -@import "compass/css3"; -@import "compass/utilities"; +@import "bourbon"; @import "../../../../commonUI/general/res/sass/constants"; @import "../../../../commonUI/general/res/sass/mixins"; diff --git a/platform/features/timeline/res/sass/timeline-snow.scss b/platform/features/timeline/res/sass/timeline-snow.scss index c1eb4cbd3c..39f57fd2bb 100644 --- a/platform/features/timeline/res/sass/timeline-snow.scss +++ b/platform/features/timeline/res/sass/timeline-snow.scss @@ -19,9 +19,7 @@ * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ -@import "compass"; -@import "compass/css3"; -@import "compass/utilities"; +@import "bourbon"; @import "../../../../commonUI/general/res/sass/constants"; @import "../../../../commonUI/general/res/sass/mixins"; diff --git a/platform/features/timeline/res/sass/timeline.scss b/platform/features/timeline/res/sass/timeline.scss index 0fea5f0295..3f6bf65e4e 100644 --- a/platform/features/timeline/res/sass/timeline.scss +++ b/platform/features/timeline/res/sass/timeline.scss @@ -19,9 +19,7 @@ * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ -@import "compass"; -@import "compass/css3"; -@import "compass/utilities"; +@import "bourbon"; @import "../../../../commonUI/general/res/sass/constants"; @import "../../../../commonUI/general/res/sass/mixins"; @@ -29,4 +27,4 @@ @import "../../../../commonUI/themes/espresso/res/sass/mixins"; @import "constants"; @import "activities"; -@import "timelines"; \ No newline at end of file +@import "timelines";