mirror of
https://github.com/nasa/openmct.git
synced 2025-01-01 19:06:40 +00:00
Merge branch 'master' into open164
This commit is contained in:
Charles Hacskaylo
commit
99cf690ad4
1
.gitignore
vendored
1
.gitignore
vendored
@ -8,6 +8,7 @@
|
|||||||
*.sass-cache
|
*.sass-cache
|
||||||
*COMPILE.css
|
*COMPILE.css
|
||||||
*.css
|
*.css
|
||||||
|
*.css.map
|
||||||
|
|
||||||
# Intellij project configuration files
|
# Intellij project configuration files
|
||||||
*.idea
|
*.idea
|
||||||
|
|||||||
6
Gemfile
6
Gemfile
@ -1,6 +0,0 @@
|
|||||||
source "https://rubygems.org"
|
|
||||||
|
|
||||||
group :development do
|
|
||||||
gem "compass", ">= 1.0.3"
|
|
||||||
gem "sass", "~> 3.4.18"
|
|
||||||
end
|
|
||||||
32
Gemfile.lock
32
Gemfile.lock
@ -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
|
|
||||||
@ -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
|
|
||||||
@ -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; } }
|
|
||||||
62
gulpfile.js
62
gulpfile.js
@ -24,7 +24,9 @@
|
|||||||
var gulp = require('gulp'),
|
var gulp = require('gulp'),
|
||||||
requirejsOptimize = require('gulp-requirejs-optimize'),
|
requirejsOptimize = require('gulp-requirejs-optimize'),
|
||||||
sourcemaps = require('gulp-sourcemaps'),
|
sourcemaps = require('gulp-sourcemaps'),
|
||||||
compass = require('gulp-compass'),
|
rename = require('gulp-rename'),
|
||||||
|
sass = require('gulp-sass'),
|
||||||
|
bourbon = require('node-bourbon'),
|
||||||
jshint = require('gulp-jshint'),
|
jshint = require('gulp-jshint'),
|
||||||
jscs = require('gulp-jscs'),
|
jscs = require('gulp-jscs'),
|
||||||
replace = require('gulp-replace-task'),
|
replace = require('gulp-replace-task'),
|
||||||
@ -38,7 +40,7 @@ var gulp = require('gulp'),
|
|||||||
main: 'main.js',
|
main: 'main.js',
|
||||||
dist: 'dist',
|
dist: 'dist',
|
||||||
assets: 'dist/assets',
|
assets: 'dist/assets',
|
||||||
scss: 'platform/**/*.scss',
|
scss: ['./platform/**/*.scss', './example/**/*.scss'],
|
||||||
scripts: [ 'main.js', 'platform/**/*.js', 'src/**/*.js' ],
|
scripts: [ 'main.js', 'platform/**/*.js', 'src/**/*.js' ],
|
||||||
static: [
|
static: [
|
||||||
'index.html',
|
'index.html',
|
||||||
@ -57,10 +59,8 @@ var gulp = require('gulp'),
|
|||||||
configFile: path.resolve(__dirname, 'karma.conf.js'),
|
configFile: path.resolve(__dirname, 'karma.conf.js'),
|
||||||
singleRun: true
|
singleRun: true
|
||||||
},
|
},
|
||||||
compass: {
|
sass: {
|
||||||
sass: __dirname,
|
includePaths: bourbon.includePaths
|
||||||
css: paths.assets,
|
|
||||||
sourcemap: true
|
|
||||||
},
|
},
|
||||||
replace: {
|
replace: {
|
||||||
variables: {
|
variables: {
|
||||||
@ -70,42 +70,7 @@ var gulp = require('gulp'),
|
|||||||
branch: fs.existsSync('.git') ? git.branch() : 'Unknown'
|
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 () {
|
gulp.task('scripts', function () {
|
||||||
return gulp.src(paths.main)
|
return gulp.src(paths.main)
|
||||||
@ -120,11 +85,16 @@ gulp.task('test', function (done) {
|
|||||||
new karma.Server(options.karma, done).start();
|
new karma.Server(options.karma, done).start();
|
||||||
});
|
});
|
||||||
|
|
||||||
gulp.task('compass');
|
|
||||||
|
|
||||||
gulp.task('stylesheets', function () {
|
gulp.task('stylesheets', function () {
|
||||||
return gulp.src(paths.scss)
|
return gulp.src(paths.scss, {base: '.'})
|
||||||
.pipe(customCompass());
|
.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 () {
|
gulp.task('lint', function () {
|
||||||
@ -161,7 +131,7 @@ gulp.task('serve', function () {
|
|||||||
var app = require('./app.js');
|
var app = require('./app.js');
|
||||||
});
|
});
|
||||||
|
|
||||||
gulp.task('develop', ['serve', 'watch']);
|
gulp.task('develop', ['serve', 'stylesheets', 'watch']);
|
||||||
|
|
||||||
gulp.task('install', [ 'static', 'scripts' ]);
|
gulp.task('install', [ 'static', 'scripts' ]);
|
||||||
|
|
||||||
|
|||||||
@ -11,11 +11,12 @@
|
|||||||
"git-rev-sync": "^1.4.0",
|
"git-rev-sync": "^1.4.0",
|
||||||
"glob": ">= 3.0.0",
|
"glob": ">= 3.0.0",
|
||||||
"gulp": "^3.9.0",
|
"gulp": "^3.9.0",
|
||||||
"gulp-compass": "^2.1.0",
|
|
||||||
"gulp-jscs": "^3.0.2",
|
"gulp-jscs": "^3.0.2",
|
||||||
"gulp-jshint": "^2.0.0",
|
"gulp-jshint": "^2.0.0",
|
||||||
|
"gulp-rename": "^1.2.2",
|
||||||
"gulp-replace-task": "^0.11.0",
|
"gulp-replace-task": "^0.11.0",
|
||||||
"gulp-requirejs-optimize": "^0.3.1",
|
"gulp-requirejs-optimize": "^0.3.1",
|
||||||
|
"gulp-sass": "^2.2.0",
|
||||||
"gulp-sourcemaps": "^1.6.0",
|
"gulp-sourcemaps": "^1.6.0",
|
||||||
"jasmine-core": "^2.3.0",
|
"jasmine-core": "^2.3.0",
|
||||||
"jsdoc": "^3.3.2",
|
"jsdoc": "^3.3.2",
|
||||||
@ -33,6 +34,7 @@
|
|||||||
"marked": "^0.3.5",
|
"marked": "^0.3.5",
|
||||||
"mkdirp": "^0.5.1",
|
"mkdirp": "^0.5.1",
|
||||||
"moment": "^2.11.1",
|
"moment": "^2.11.1",
|
||||||
|
"node-bourbon": "^4.2.3",
|
||||||
"phantomjs": "^1.9.19",
|
"phantomjs": "^1.9.19",
|
||||||
"requirejs": "^2.1.17",
|
"requirejs": "^2.1.17",
|
||||||
"split": "^1.0.0"
|
"split": "^1.0.0"
|
||||||
@ -45,7 +47,7 @@
|
|||||||
"jsdoc": "jsdoc -c jsdoc.json -r -d target/docs/api",
|
"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'",
|
"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",
|
"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": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
|
|||||||
@ -137,6 +137,10 @@ define([
|
|||||||
{
|
{
|
||||||
"stylesheetUrl": "css/normalize.min.css",
|
"stylesheetUrl": "css/normalize.min.css",
|
||||||
"priority": "mandatory"
|
"priority": "mandatory"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"stylesheetUrl": "css/reset.css",
|
||||||
|
"priority": "mandatory"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"templates": [
|
"templates": [
|
||||||
|
|||||||
48
platform/commonUI/general/res/css/reset.css
Normal file
48
platform/commonUI/general/res/css/reset.css
Normal file
@ -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;
|
||||||
|
}
|
||||||
@ -34,7 +34,7 @@
|
|||||||
.cols {
|
.cols {
|
||||||
@include clearfix;
|
@include clearfix;
|
||||||
.col {
|
.col {
|
||||||
@include box-sizing(border-box);
|
box-sizing: border-box;
|
||||||
@include clearfix;
|
@include clearfix;
|
||||||
float: left;
|
float: left;
|
||||||
margin-left: $ueColMargin;
|
margin-left: $ueColMargin;
|
||||||
@ -94,7 +94,7 @@
|
|||||||
/********************************************* FLEX STYLES */
|
/********************************************* FLEX STYLES */
|
||||||
.l-flex-row,
|
.l-flex-row,
|
||||||
.l-flex-col {
|
.l-flex-col {
|
||||||
@include display-flex;
|
@include display(flex);
|
||||||
@include flex-wrap(nowrap);
|
@include flex-wrap(nowrap);
|
||||||
.flex-elem {
|
.flex-elem {
|
||||||
min-height: 0; // Needed to allow element to shrink within parent
|
min-height: 0; // Needed to allow element to shrink within parent
|
||||||
@ -111,7 +111,7 @@
|
|||||||
}
|
}
|
||||||
.flex-container {
|
.flex-container {
|
||||||
// Apply to wrapping elements, mct-includes, etc.
|
// Apply to wrapping elements, mct-includes, etc.
|
||||||
@include display-flex;
|
@include display(flex);
|
||||||
@include flex-wrap(nowrap);
|
@include flex-wrap(nowrap);
|
||||||
@include flex(1 1 auto);
|
@include flex(1 1 auto);
|
||||||
min-height:0;
|
min-height:0;
|
||||||
@ -144,4 +144,4 @@
|
|||||||
|
|
||||||
.flex-justify-end {
|
.flex-justify-end {
|
||||||
@include justify-content(flex-end);
|
@include justify-content(flex-end);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -64,7 +64,7 @@
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
.l-autoflow-col {
|
.l-autoflow-col {
|
||||||
// @include test();
|
// @include test();
|
||||||
@include box-sizing(border-box);
|
box-sizing: border-box;
|
||||||
border-left: 1px solid $colorInteriorBorder;
|
border-left: 1px solid $colorInteriorBorder;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
// height: 100%;
|
// height: 100%;
|
||||||
@ -74,7 +74,7 @@
|
|||||||
width: $colW;
|
width: $colW;
|
||||||
.l-autoflow-row {
|
.l-autoflow-row {
|
||||||
// @include test(red);
|
// @include test(red);
|
||||||
@include box-sizing(border-box);
|
box-sizing: border-box;
|
||||||
border-bottom: 1px solid rgba(#fff,0.05);
|
border-bottom: 1px solid rgba(#fff,0.05);
|
||||||
display: block;
|
display: block;
|
||||||
height: $rowH;
|
height: $rowH;
|
||||||
@ -110,7 +110,7 @@
|
|||||||
width: auto;
|
width: auto;
|
||||||
}
|
}
|
||||||
&.r {
|
&.r {
|
||||||
@include border-radius($smallCr);
|
border-radius: $smallCr;
|
||||||
float: right;
|
float: right;
|
||||||
margin-left: $interiorMargin;
|
margin-left: $interiorMargin;
|
||||||
padding-left: $valPad;
|
padding-left: $valPad;
|
||||||
|
|||||||
@ -27,7 +27,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.top-bar .badge {
|
.top-bar .badge {
|
||||||
@include border-radius($controlCr * 1.5);
|
border-radius: $controlCr * 1.5;
|
||||||
$h: $btnStdH; //$ueTopBarBtnH; // - 5px;
|
$h: $btnStdH; //$ueTopBarBtnH; // - 5px;
|
||||||
font-size: 1.4em;
|
font-size: 1.4em;
|
||||||
height: $h;
|
height: $h;
|
||||||
@ -39,7 +39,7 @@
|
|||||||
|
|
||||||
//.top-bar .btn-browse .badge {
|
//.top-bar .btn-browse .badge {
|
||||||
// Moved to _controls.scss .btn.browse-btn
|
// Moved to _controls.scss .btn.browse-btn
|
||||||
// @include border-radius($controlCr * 1.5);
|
// border-radius: $controlCr * 1.5;
|
||||||
// $d: 20px;
|
// $d: 20px;
|
||||||
// display: block;
|
// display: block;
|
||||||
// font-size: 1em;
|
// font-size: 1em;
|
||||||
@ -53,7 +53,7 @@
|
|||||||
|
|
||||||
.super-menu .badge {
|
.super-menu .badge {
|
||||||
@include background-image(linear-gradient(lighten($colorCreateBtn, 10%), $colorCreateBtn));
|
@include background-image(linear-gradient(lighten($colorCreateBtn, 10%), $colorCreateBtn));
|
||||||
@include border-radius($controlCr);
|
border-radius: $controlCr;
|
||||||
@include boxShdwSubtle();
|
@include boxShdwSubtle();
|
||||||
// display: inline-block;
|
// display: inline-block;
|
||||||
// margin-right: 10px !important;
|
// margin-right: 10px !important;
|
||||||
|
|||||||
@ -44,7 +44,7 @@ $ueAppLogoW: 105px;
|
|||||||
$ueEditToolBarH: 25px;
|
$ueEditToolBarH: 25px;
|
||||||
$ueCollapsedPaneEdgeM: 22px;
|
$ueCollapsedPaneEdgeM: 22px;
|
||||||
$uePaneMiniTabH: $ueTopBarH;
|
$uePaneMiniTabH: $ueTopBarH;
|
||||||
$uePaneMiniTabW: 9px;
|
$uePaneMiniTabW: 10px;
|
||||||
$uePaneMiniTabCollapsedW: 11px;
|
$uePaneMiniTabCollapsedW: 11px;
|
||||||
$ueEditLeftPaneW: 75%;
|
$ueEditLeftPaneW: 75%;
|
||||||
$treeSearchInputBarH: 25px;
|
$treeSearchInputBarH: 25px;
|
||||||
|
|||||||
@ -21,7 +21,7 @@
|
|||||||
*****************************************************************************/
|
*****************************************************************************/
|
||||||
.disabled,
|
.disabled,
|
||||||
a.disabled {
|
a.disabled {
|
||||||
@include opacity($controlDisabledOpacity);
|
opacity: $controlDisabledOpacity;
|
||||||
pointer-events: none !important;
|
pointer-events: none !important;
|
||||||
cursor: default !important;
|
cursor: default !important;
|
||||||
}
|
}
|
||||||
@ -39,39 +39,35 @@ a.disabled {
|
|||||||
@include test();
|
@include test();
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin customKeyframes($animName: pulse, $op0: 0.5) {
|
@mixin pulse($animName: pulse, $dur: 500ms, $iteration: infinite, $opacity0: 0.5, $opacity100: 1) {
|
||||||
@include keyframes($animName) {
|
@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) {
|
|
||||||
0% { opacity: $opacity0; }
|
0% { opacity: $opacity0; }
|
||||||
100% { opacity: $opacity100; }
|
100% { opacity: $opacity100; }
|
||||||
}
|
}
|
||||||
@include animation-name(pulse);
|
@include animation-name($animName);
|
||||||
@include animation-duration($dur);
|
@include animation-duration($dur);
|
||||||
@include animation-direction(alternate);
|
@include animation-direction(alternate);
|
||||||
@include animation-iteration-count($iteration);
|
@include animation-iteration-count($iteration);
|
||||||
@include animation-timing-function(ease-in-out);
|
@include animation-timing-function(ease-in-out);
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin pulseBorder($c: red, $dur: 500ms, $iteration: infinite, $delay: 0s, $opacity0: 0, $opacity100: 1) {
|
.pulse {
|
||||||
@include keyframes(pulseBorder) {
|
@include pulse($animName: pulse, $dur: 750ms);
|
||||||
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 {
|
.pulse-subtle {
|
||||||
@include pulse(750ms);
|
@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);
|
||||||
|
}
|
||||||
|
|||||||
@ -61,7 +61,7 @@
|
|||||||
.l-fixed-position-box,
|
.l-fixed-position-box,
|
||||||
.l-fixed-position-image,
|
.l-fixed-position-image,
|
||||||
.l-fixed-position-text {
|
.l-fixed-position-text {
|
||||||
@include box-sizing(border-box);
|
box-sizing: border-box;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
@ -89,7 +89,7 @@
|
|||||||
.l-elem {
|
.l-elem {
|
||||||
//@include absPosDefault($p);
|
//@include absPosDefault($p);
|
||||||
//@include absPosDefault(0);
|
//@include absPosDefault(0);
|
||||||
@include box-sizing(border-box);
|
box-sizing: border-box;
|
||||||
display: block;
|
display: block;
|
||||||
padding: 2px;
|
padding: 2px;
|
||||||
//width: 50%;
|
//width: 50%;
|
||||||
@ -106,7 +106,7 @@
|
|||||||
// @include test(blue);
|
// @include test(blue);
|
||||||
// right: $p;
|
// right: $p;
|
||||||
// left: auto;
|
// left: auto;
|
||||||
@include border-radius($smallCr);
|
border-radius: $smallCr;
|
||||||
$valPad: 5px;
|
$valPad: 5px;
|
||||||
float: right;
|
float: right;
|
||||||
margin-left: $interiorMargin;
|
margin-left: $interiorMargin;
|
||||||
@ -125,7 +125,7 @@
|
|||||||
|
|
||||||
.l-fixed-position-item-handle {
|
.l-fixed-position-item-handle {
|
||||||
$brd: 1px solid $colorKey;
|
$brd: 1px solid $colorKey;
|
||||||
// @include border-radius($controlCr);
|
// border-radius: $controlCr;
|
||||||
background: rgba($colorKey, 0.5);
|
background: rgba($colorKey, 0.5);
|
||||||
cursor: crosshair;
|
cursor: crosshair;
|
||||||
border: $brd;
|
border: $brd;
|
||||||
|
|||||||
@ -46,7 +46,6 @@ a {
|
|||||||
|
|
||||||
body, html {
|
body, html {
|
||||||
-webkit-font-smoothing: subpixel-antialiased;
|
-webkit-font-smoothing: subpixel-antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
background-color: $colorBodyBg;
|
background-color: $colorBodyBg;
|
||||||
color: $colorBodyFg;
|
color: $colorBodyFg;
|
||||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||||
@ -139,7 +138,7 @@ mct-container {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.ds {
|
.ds {
|
||||||
@include box-shadow(rgba(#000, 0.7) 0 4px 10px 2px);
|
box-shadow: rgba(#000, 0.7) 0 4px 10px 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hide,
|
.hide,
|
||||||
|
|||||||
@ -93,7 +93,7 @@
|
|||||||
height: auto; width: auto;
|
height: auto; width: auto;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0; top: 0; right: 0; bottom: 10%;
|
left: 0; top: 0; right: 0; bottom: 10%;
|
||||||
@include transform-origin(bottom, left);
|
@include transform-origin(bottom left);
|
||||||
@include transform(scale(0.3));
|
@include transform(scale(0.3));
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -58,7 +58,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
@include box-sizing(border-box);
|
box-sizing: border-box;
|
||||||
padding-right: $interiorMargin;
|
padding-right: $interiorMargin;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -73,7 +73,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
em {
|
em {
|
||||||
@include border-radius($basicCr);
|
border-radius: $basicCr;
|
||||||
background-color: $colorInspectorSectionHeaderBg;
|
background-color: $colorInspectorSectionHeaderBg;
|
||||||
color: $colorInspectorSectionHeaderFg;
|
color: $colorInspectorSectionHeaderFg;
|
||||||
margin-bottom: $interiorMargin;
|
margin-bottom: $interiorMargin;
|
||||||
@ -99,7 +99,7 @@
|
|||||||
.inspector-location {
|
.inspector-location {
|
||||||
.location-item {
|
.location-item {
|
||||||
$h: 1.2em;
|
$h: 1.2em;
|
||||||
@include box-sizing(border-box);
|
box-sizing: border-box;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
line-height: $h;
|
line-height: $h;
|
||||||
|
|||||||
@ -175,8 +175,8 @@
|
|||||||
|
|
||||||
@mixin sliderTrack($bg: $scrollbarTrackColorBg) {
|
@mixin sliderTrack($bg: $scrollbarTrackColorBg) {
|
||||||
//$b: 1px solid lighten($bg, 30%);
|
//$b: 1px solid lighten($bg, 30%);
|
||||||
@include border-radius(2px);
|
border-radius: 2px;
|
||||||
@include box-sizing(border-box);
|
box-sizing: border-box;
|
||||||
@include boxIncised(0.7);
|
@include boxIncised(0.7);
|
||||||
background-color: $bg;
|
background-color: $bg;
|
||||||
//border-bottom: $b;
|
//border-bottom: $b;
|
||||||
@ -210,7 +210,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@mixin boxIncised($sVal: 0.6, $inset: 5px) {
|
@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%)) {
|
@mixin boxOutline($c: lighten($colorBodyBg, 20%)) {
|
||||||
@ -219,24 +219,24 @@
|
|||||||
|
|
||||||
@mixin boxShdw($sVal: rgba(black, 0.4) 0 0 3px) {
|
@mixin boxShdw($sVal: rgba(black, 0.4) 0 0 3px) {
|
||||||
@if $sVal != 'none' {
|
@if $sVal != 'none' {
|
||||||
@include box-shadow($sVal);
|
box-shadow: $sVal;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin boxShdwSubtle($sVal: 0.2) {
|
@mixin boxShdwSubtle($sVal: 0.2) {
|
||||||
@if $sVal != 'none' {
|
@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) {
|
@mixin boxShdwLarge($sVal: 0.7) {
|
||||||
@if $sVal != 'none' {
|
@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) {
|
@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) {
|
@mixin linearGlow($deg: 0, $c: red, $a: 0.4) {
|
||||||
@ -249,18 +249,18 @@
|
|||||||
|
|
||||||
@mixin txtShdw($sVal) {
|
@mixin txtShdw($sVal) {
|
||||||
//@if $sVal != 'none' {
|
//@if $sVal != 'none' {
|
||||||
@include text-shadow($sVal);
|
text-shadow: $sVal;
|
||||||
//}
|
//}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin txtShdwSubtle($sVal: 0.1) {
|
@mixin txtShdwSubtle($sVal: 0.1) {
|
||||||
@if $sVal != 'none' {
|
@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) {
|
@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%) {
|
@function pullForward($c, $p: 20%) {
|
||||||
@ -291,35 +291,32 @@
|
|||||||
|
|
||||||
@mixin containerBase($bg: $colorBodyBg, $fg: $colorBodyFg) {
|
@mixin containerBase($bg: $colorBodyBg, $fg: $colorBodyFg) {
|
||||||
background-color: $bg;
|
background-color: $bg;
|
||||||
@include border-radius($controlCr);
|
border-radius: $controlCr;
|
||||||
@include box-sizing(border-box);
|
box-sizing: border-box;
|
||||||
color: $fg;
|
color: $fg;
|
||||||
display: inline-block;
|
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 user-select(none);
|
||||||
@include transition(background, .25s);
|
|
||||||
.icon {
|
.icon {
|
||||||
color: $ic;
|
color: $ic;
|
||||||
}
|
}
|
||||||
@include desktop {
|
@if $bgHovColor != none {
|
||||||
@if $bgHov != none {
|
&:not(.disabled):hover {
|
||||||
&:not(.disabled):hover {
|
background: $bgHovColor; // was just background, and background-image before that
|
||||||
@include background-image($bgHov);
|
>.icon {
|
||||||
>.icon {
|
color: lighten($ic, $ltGamma);
|
||||||
color: lighten($ic, $ltGamma);
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin input-base($bg: $colorInputBg, $fg: $colorInputFg, $shdw: rgba(black, 0.6) 0 1px 3px) {
|
@mixin input-base($bg: $colorInputBg, $fg: $colorInputFg, $shdw: rgba(black, 0.6) 0 1px 3px) {
|
||||||
@include appearance(none);
|
@include appearance(none);
|
||||||
@include border-radius($controlCr);
|
border-radius: $controlCr;
|
||||||
@include box-sizing(border-box);
|
box-sizing: border-box;
|
||||||
@include box-shadow(inset $shdw);
|
box-shadow: inset $shdw;
|
||||||
background: $bg;
|
background: $bg;
|
||||||
border: none;
|
border: none;
|
||||||
color: $fg;
|
color: $fg;
|
||||||
@ -335,7 +332,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@mixin contextArrow() {
|
@mixin contextArrow() {
|
||||||
@include text-shadow(none);
|
text-shadow: none;
|
||||||
content: '\76';
|
content: '\76';
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-family: 'symbolsfont';
|
font-family: 'symbolsfont';
|
||||||
@ -408,13 +405,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@mixin tmpBorder($c: #ffcc00, $a: 0.75) {
|
@mixin tmpBorder($c: #ffcc00, $a: 0.75) {
|
||||||
@include box-sizing(border-box);
|
box-sizing: border-box;
|
||||||
border: 1px dotted rgba($c, $a);
|
border: 1px dotted rgba($c, $a);
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin testObj($w: 2000px, $h: 1000px, $c: black, $a: 0.1) {
|
@mixin testObj($w: 2000px, $h: 1000px, $c: black, $a: 0.1) {
|
||||||
&:after {
|
&:after {
|
||||||
@include box-sizing(border-box);
|
box-sizing: border-box;
|
||||||
@include bgDiagonalStripes($c, $a);
|
@include bgDiagonalStripes($c, $a);
|
||||||
color: rgba(white, 0.3);
|
color: rgba(white, 0.3);
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
|
|||||||
@ -8,9 +8,9 @@
|
|||||||
.l-breadcrumb-item {
|
.l-breadcrumb-item {
|
||||||
//@include test();
|
//@include test();
|
||||||
a {
|
a {
|
||||||
@include box-sizing(border-box);
|
box-sizing: border-box;
|
||||||
@include border-radius($basicCr*.75);
|
border-radius: $basicCr*.75;
|
||||||
@include single-transition(background-color, 0.25s);
|
@include transition(background-color, 0.25s);
|
||||||
color: darken($colorBodyFg, 15%);
|
color: darken($colorBodyFg, 15%);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
//margin-right: $interiorMargin;
|
//margin-right: $interiorMargin;
|
||||||
|
|||||||
@ -32,7 +32,7 @@ $pad: $interiorMargin * $baseRatio;
|
|||||||
}
|
}
|
||||||
|
|
||||||
.s-btn {
|
.s-btn {
|
||||||
@include box-sizing(border-box);
|
box-sizing: border-box;
|
||||||
padding: 0 $pad;
|
padding: 0 $pad;
|
||||||
font-size: 0.7rem;
|
font-size: 0.7rem;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
@ -66,7 +66,7 @@ $pad: $interiorMargin * $baseRatio;
|
|||||||
|
|
||||||
&:not(.major) {
|
&:not(.major) {
|
||||||
// bg, bgHov, fg, ic
|
// bg, bgHov, fg, ic
|
||||||
@include btnSubtle($colorBtnBg, $colorKey, $colorBtnFg, $colorBtnIcon);
|
@include btnSubtle($colorBtnBg, $colorBtnBgHov, $colorBtnFg, $colorBtnIcon);
|
||||||
}
|
}
|
||||||
&.pause-play {
|
&.pause-play {
|
||||||
|
|
||||||
@ -91,7 +91,7 @@ $pad: $interiorMargin * $baseRatio;
|
|||||||
&.paused {
|
&.paused {
|
||||||
@include btnSubtle($colorPausedBg, pushBack($colorPausedBg, 10%), $colorPausedFg, $colorPausedFg);
|
@include btnSubtle($colorPausedBg, pushBack($colorPausedBg, 10%), $colorPausedFg, $colorPausedFg);
|
||||||
.icon {
|
.icon {
|
||||||
@include pulse(1000ms);
|
@include pulse($dur: 1000ms);
|
||||||
:before {
|
:before {
|
||||||
content: "\0000EF";
|
content: "\0000EF";
|
||||||
}
|
}
|
||||||
@ -111,172 +111,154 @@ $pad: $interiorMargin * $baseRatio;
|
|||||||
// Color and styling additionally in _controls.scss
|
// 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
|
// Meant to be used as pane hide/show control elements in concert with mct-splitter
|
||||||
//@extend .ui-symbol;
|
$iconH: $uePaneMiniTabH;
|
||||||
@include desktop {
|
$iconW: $uePaneMiniTabW;
|
||||||
//@include test(green);
|
$iconInnerLR: 0;
|
||||||
$iconH: $uePaneMiniTabH;
|
$arwD: 9px;
|
||||||
$iconW: $uePaneMiniTabW;
|
$arwOffsetX: 0px;
|
||||||
$iconInnerLR: 0;
|
$arwAnimOffsetX: 2px + $iconInnerLR;
|
||||||
$arwD: 9px;
|
$cBg: pullForward($colorBodyBg, 15%);
|
||||||
$arwOffsetX: 0px;
|
$cFg: $cBg;
|
||||||
$arwAnimOffsetX: 2px + $iconInnerLR;
|
|
||||||
$cBg: pullForward($colorBodyBg, 15%);
|
|
||||||
$cFg: $cBg;
|
|
||||||
|
|
||||||
|
|
||||||
@include border-radius($basicCr);
|
border-radius: $basicCr;
|
||||||
//@include boxShdw($shdwBtns);
|
//@include boxShdw($shdwBtns);
|
||||||
@include box-sizing(border-box);
|
box-sizing: border-box;
|
||||||
@include trans-prop-nice((color, background-color), 100ms);
|
@include trans-prop-nice((color, background-color), 100ms);
|
||||||
color: $cFg;
|
color: $cFg;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-family: symbolsfont;
|
font-family: symbolsfont;
|
||||||
font-size: $arwD;
|
font-size: $arwD;
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
line-height: $iconH;
|
line-height: $iconH;
|
||||||
height: $iconH; width: $iconW;
|
height: $iconH; width: $iconW;
|
||||||
text-align: center;
|
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 {
|
&:hover {
|
||||||
//background-color: $cBg;
|
&:before { opacity: 1; }
|
||||||
color: $colorKey; //pullForward($cFg, $ltGamma);
|
&: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,
|
&:before {
|
||||||
&:after {
|
// Always the arrow icon
|
||||||
//@include test();
|
width: $arwD;
|
||||||
@include trans-prop-nice((left, right, opacity), 250ms);
|
}
|
||||||
display: block;
|
&:after {
|
||||||
height: 100%;
|
// Always icon; content is set in _layout.scss
|
||||||
position: absolute;
|
width: 100%;
|
||||||
}
|
text-align: center;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.anchor-left {
|
||||||
|
// |<
|
||||||
|
text-align: right;
|
||||||
&:before {
|
&:before {
|
||||||
// Always the arrow icon
|
content:'\3c'; // Collapse left icon e613
|
||||||
//@include test(green);
|
right: $iconInnerLR;
|
||||||
//font-size: $arwD;
|
|
||||||
width: $arwD;
|
|
||||||
}
|
}
|
||||||
&:after {
|
&.collapsed {
|
||||||
// Always icon; content is set in _layout.scss
|
@include border-left-radius(0);
|
||||||
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 {
|
|
||||||
// >|
|
|
||||||
text-align: left;
|
text-align: left;
|
||||||
&:before {
|
&:before {
|
||||||
content:'\3e'; // Collapse right icon e614
|
content:'\3e';
|
||||||
left: $iconInnerLR;
|
left: $iconInnerLR;
|
||||||
}
|
}
|
||||||
//&:hover:before { left: $arwAnimOffsetX; }
|
&:hover:before { left: $arwAnimOffsetX; }
|
||||||
&.collapsed {
|
}
|
||||||
@include border-right-radius(0);
|
}
|
||||||
&:before {
|
&.anchor-right {
|
||||||
text-align: right;
|
// >|
|
||||||
content:'\3c';
|
text-align: left;
|
||||||
right: $iconInnerLR;
|
&:before {
|
||||||
}
|
content:'\3e'; // Collapse right icon e614
|
||||||
&:hover:before { right: $arwAnimOffsetX; }
|
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
|
// Meant to be used as pane hide/show control elements in concert with mct-splitter
|
||||||
//@extend .ui-symbol;
|
$d: $uePaneMiniTabW;
|
||||||
@include desktop {
|
color: pullForward($colorBodyBg, 15%);
|
||||||
$d: $uePaneMiniTabW;
|
cursor: pointer;
|
||||||
//@include trans-prop-nice(transform, 150ms);
|
display: block;
|
||||||
color: pullForward($colorBodyBg, 15%);
|
font-family: symbolsfont;
|
||||||
cursor: pointer;
|
font-size: $d;
|
||||||
display: block;
|
position: absolute;
|
||||||
font-family: symbolsfont;
|
height: $d; width: $d;
|
||||||
font-size: $d;
|
line-height: $d;
|
||||||
|
overflow: hidden;
|
||||||
|
word-break: break-all;
|
||||||
|
|
||||||
|
&.collapsed {
|
||||||
|
$d: $uePaneMiniTabCollapsedW;
|
||||||
|
width: $d; font-size: $d;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:before,
|
||||||
|
&:after {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
height: $d; width: $d;
|
display: inherit;
|
||||||
line-height: $d;
|
}
|
||||||
overflow: hidden;
|
|
||||||
word-break: break-all;
|
|
||||||
|
|
||||||
&.collapsed {
|
&:before {
|
||||||
$d: $uePaneMiniTabCollapsedW;
|
content: '\78'; // X icon
|
||||||
width: $d; font-size: $d;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&:before,
|
&:hover {
|
||||||
&:after {
|
color: $colorKey;
|
||||||
position: absolute;
|
|
||||||
display: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
content: '\78'; // X icon
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: $colorKey;
|
|
||||||
//@include transform(scale(1.2));
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-btn-set {
|
.l-btn-set {
|
||||||
// Buttons that have a very tight conceptual grouping - no internal space between them.
|
// Buttons that have a very tight conceptual grouping - no internal space between them.
|
||||||
// Structure: .btn-set > mct-representation class=first|last > .s-btn
|
// 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
|
font-size: 0; // Remove space between s-btn elements due to white space in markup
|
||||||
|
|
||||||
.s-btn {
|
.s-btn {
|
||||||
@include border-radius(0);
|
border-radius: 0;
|
||||||
margin-left: 1px;
|
margin-left: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.first {
|
.first {
|
||||||
.s-btn {
|
.s-btn,
|
||||||
|
&.s-btn {
|
||||||
@include border-left-radius($controlCr);
|
@include border-left-radius($controlCr);
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.last {
|
.last {
|
||||||
.s-btn {
|
.s-btn,
|
||||||
|
&.s-btn {
|
||||||
@include border-right-radius($controlCr);
|
@include border-right-radius($controlCr);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -25,7 +25,7 @@
|
|||||||
$m: 1;
|
$m: 1;
|
||||||
$colorSelectedColor: #fff;
|
$colorSelectedColor: #fff;
|
||||||
|
|
||||||
@include box-sizing(border-box);
|
box-sizing: border-box;
|
||||||
padding: $interiorMargin !important;
|
padding: $interiorMargin !important;
|
||||||
|
|
||||||
.l-palette-row {
|
.l-palette-row {
|
||||||
@ -34,7 +34,7 @@
|
|||||||
width: ($d * $colorsPerRow) + ($m * $colorsPerRow);
|
width: ($d * $colorsPerRow) + ($m * $colorsPerRow);
|
||||||
|
|
||||||
.l-palette-item {
|
.l-palette-item {
|
||||||
@include box-sizing(border-box);
|
box-sizing: border-box;
|
||||||
@include txtShdwSubtle(0.8);
|
@include txtShdwSubtle(0.8);
|
||||||
@include trans-prop-nice-fade(0.25s);
|
@include trans-prop-nice-fade(0.25s);
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
|
|||||||
@ -28,8 +28,8 @@
|
|||||||
}
|
}
|
||||||
.accordion-head {
|
.accordion-head {
|
||||||
$op: 0.2;
|
$op: 0.2;
|
||||||
@include border-radius($basicCr * 0.75);
|
border-radius: $basicCr * 0.75;
|
||||||
@include box-sizing("border-box");
|
box-sizing: "border-box";
|
||||||
background: rgba($colorBodyFg, $op);
|
background: rgba($colorBodyFg, $op);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 0.75em;
|
font-size: 0.75em;
|
||||||
@ -84,7 +84,7 @@
|
|||||||
.l-control-group {
|
.l-control-group {
|
||||||
// Buttons that have a conceptual grouping - internal space between, and a divider between groups.
|
// Buttons that have a conceptual grouping - internal space between, and a divider between groups.
|
||||||
// @include test();
|
// @include test();
|
||||||
@include box-sizing(border-box);
|
box-sizing: border-box;
|
||||||
border-left: 1px solid $colorInteriorBorder;
|
border-left: 1px solid $colorInteriorBorder;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0 $interiorMargin;
|
padding: 0 $interiorMargin;
|
||||||
@ -125,9 +125,9 @@ label.checkbox.custom {
|
|||||||
height: $d;
|
height: $d;
|
||||||
min-width: $d;
|
min-width: $d;
|
||||||
&:before {
|
&:before {
|
||||||
@include border-radius($basicCr * .75);
|
border-radius: $basicCr * .75;
|
||||||
background: $bg;
|
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;
|
box-sizing: border-box;
|
||||||
content: " ";
|
content: " ";
|
||||||
font-family: 'symbolsfont';
|
font-family: 'symbolsfont';
|
||||||
@ -182,7 +182,7 @@ label.checkbox.custom {
|
|||||||
|
|
||||||
.item .checkbox {
|
.item .checkbox {
|
||||||
&.checked label {
|
&.checked label {
|
||||||
@include box-shadow(none);
|
box-shadow: none;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -235,16 +235,16 @@ label.checkbox.custom {
|
|||||||
font-size: 0.7em;
|
font-size: 0.7em;
|
||||||
@include webkitProp(flex, '0 0 1');
|
@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 {
|
.context-available {
|
||||||
@include trans-prop-nice(opacity, 0.25s);
|
opacity: 1;
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
.context-available {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -293,13 +293,13 @@ label.checkbox.custom {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.s-progress-bar {
|
.s-progress-bar {
|
||||||
@include border-radius($basicCr);
|
border-radius: $basicCr;
|
||||||
@include boxIncised(0.3, 4px);
|
@include boxIncised(0.3, 4px);
|
||||||
background: $colorProgressBarOuter;
|
background: $colorProgressBarOuter;
|
||||||
.progress-amt {
|
.progress-amt {
|
||||||
@include border-radius($basicCr);
|
border-radius: $basicCr;
|
||||||
@include boxShdw();
|
@include boxShdw();
|
||||||
@include border-radius($basicCr - 1);
|
border-radius: $basicCr - 1;
|
||||||
@include trans-prop-nice(width);
|
@include trans-prop-nice(width);
|
||||||
&:before {
|
&:before {
|
||||||
background-color: $colorProgressBarAmt;
|
background-color: $colorProgressBarAmt;
|
||||||
@ -433,7 +433,7 @@ label.checkbox.custom {
|
|||||||
.l-calendar {
|
.l-calendar {
|
||||||
$colorMuted: pushBack($colorMenuFg, 30%);
|
$colorMuted: pushBack($colorMenuFg, 30%);
|
||||||
ul.l-cal-row {
|
ul.l-cal-row {
|
||||||
@include display-flex;
|
@include display(flex);
|
||||||
@include flex-flow(row nowrap);
|
@include flex-flow(row nowrap);
|
||||||
margin-top: 1px;
|
margin-top: 1px;
|
||||||
&:first-child {
|
&:first-child {
|
||||||
@ -481,11 +481,11 @@ label.checkbox.custom {
|
|||||||
|
|
||||||
/******************************************************** BROWSER ELEMENTS */
|
/******************************************************** BROWSER ELEMENTS */
|
||||||
|
|
||||||
@include desktop {
|
body.desktop {
|
||||||
::-webkit-scrollbar {
|
::-webkit-scrollbar {
|
||||||
@include border-radius(2px);
|
border-radius: 2px;
|
||||||
@include box-sizing(border-box);
|
box-sizing: border-box;
|
||||||
@include box-shadow(inset $scrollbarTrackShdw);
|
box-shadow: inset $scrollbarTrackShdw;
|
||||||
background-color: $scrollbarTrackColorBg;
|
background-color: $scrollbarTrackColorBg;
|
||||||
height: $scrollbarTrackSize;
|
height: $scrollbarTrackSize;
|
||||||
width: $scrollbarTrackSize;
|
width: $scrollbarTrackSize;
|
||||||
@ -496,8 +496,8 @@ label.checkbox.custom {
|
|||||||
$hc: $scrollbarThumbColorHov;
|
$hc: $scrollbarThumbColorHov;
|
||||||
$gr: 5%;
|
$gr: 5%;
|
||||||
@include background-image(linear-gradient(lighten($bg, $gr), $bg 20px));
|
@include background-image(linear-gradient(lighten($bg, $gr), $bg 20px));
|
||||||
@include border-radius(2px);
|
border-radius: 2px;
|
||||||
@include box-sizing(border-box);
|
box-sizing: border-box;
|
||||||
&:hover {
|
&:hover {
|
||||||
@include background-image(linear-gradient(lighten($hc, $gr), $hc 20px));
|
@include background-image(linear-gradient(lighten($hc, $gr), $hc 20px));
|
||||||
}
|
}
|
||||||
|
|||||||
@ -72,7 +72,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.s-menu {
|
.s-menu {
|
||||||
@include border-radius($basicCr);
|
border-radius: $basicCr;
|
||||||
@include containerSubtle($colorMenuBg, $colorMenuFg);
|
@include containerSubtle($colorMenuBg, $colorMenuFg);
|
||||||
@include boxShdw($shdwMenu);
|
@include boxShdw($shdwMenu);
|
||||||
@include txtShdw($shdwMenuText);
|
@include txtShdw($shdwMenuText);
|
||||||
@ -87,7 +87,7 @@
|
|||||||
ul {
|
ul {
|
||||||
@include menuUlReset();
|
@include menuUlReset();
|
||||||
li {
|
li {
|
||||||
@include box-sizing(border-box);
|
box-sizing: border-box;
|
||||||
border-top: 1px solid pullForward($colorMenuBg, 10%);
|
border-top: 1px solid pullForward($colorMenuBg, 10%);
|
||||||
color: pullForward($colorMenuBg, 60%);
|
color: pullForward($colorMenuBg, 60%);
|
||||||
line-height: $menuLineH;
|
line-height: $menuLineH;
|
||||||
@ -171,7 +171,7 @@
|
|||||||
@include absPosDefault($interiorMargin);
|
@include absPosDefault($interiorMargin);
|
||||||
}
|
}
|
||||||
.pane {
|
.pane {
|
||||||
@include box-sizing(border-box);
|
box-sizing: border-box;
|
||||||
&.left {
|
&.left {
|
||||||
//@include test();
|
//@include test();
|
||||||
border-right: 1px solid pullForward($colorMenuBg, 10%);
|
border-right: 1px solid pullForward($colorMenuBg, 10%);
|
||||||
@ -183,7 +183,7 @@
|
|||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
ul {
|
ul {
|
||||||
li {
|
li {
|
||||||
@include border-radius($controlCr);
|
border-radius: $controlCr;
|
||||||
padding-left: 30px;
|
padding-left: 30px;
|
||||||
border-top: none;
|
border-top: none;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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 {
|
.status.block {
|
||||||
$transDelay: 1.5s;
|
$transDelay: 1.5s;
|
||||||
$transSpeed: .25s;
|
$transSpeed: .25s;
|
||||||
color: $colorStatusDefault;
|
color: $colorStatusDefault;
|
||||||
cursor: default;
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-right: $interiorMargin;
|
margin-right: $interiorMargin;
|
||||||
.status-indicator,
|
.status-indicator,
|
||||||
@ -50,6 +55,9 @@
|
|||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.clickable { cursor: pointer; }
|
||||||
|
&:not(.clickable) { cursor: default; }
|
||||||
|
|
||||||
&.no-icon {
|
&.no-icon {
|
||||||
.status-indicator {
|
.status-indicator {
|
||||||
display: none;
|
display: none;
|
||||||
@ -60,9 +68,6 @@
|
|||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.subtle {
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
.status-indicator {
|
.status-indicator {
|
||||||
margin-right: $interiorMarginSm;
|
margin-right: $interiorMarginSm;
|
||||||
}
|
}
|
||||||
@ -77,7 +82,7 @@
|
|||||||
&:hover {
|
&:hover {
|
||||||
.label {
|
.label {
|
||||||
@include trans-prop-nice(max-width, $transSpeed, 0s);
|
@include trans-prop-nice(max-width, $transSpeed, 0s);
|
||||||
max-width: 450px;
|
max-width: 600px;
|
||||||
width: auto;
|
width: auto;
|
||||||
}
|
}
|
||||||
.count {
|
.count {
|
||||||
@ -99,17 +104,26 @@
|
|||||||
&.error .status-indicator {
|
&.error .status-indicator {
|
||||||
color: $colorStatusError;
|
color: $colorStatusError;
|
||||||
}
|
}
|
||||||
|
&.available .status-indicator {
|
||||||
|
color: $colorStatusAvailable;
|
||||||
|
}
|
||||||
.count {
|
.count {
|
||||||
@include trans-prop-nice(opacity, $transSpeed, $transDelay);
|
@include trans-prop-nice(opacity, $transSpeed, $transDelay);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
.s-btn {
|
||||||
|
background: $colorStatusBtnBg;
|
||||||
|
padding: 0 $interiorMargin;
|
||||||
|
height: auto;
|
||||||
|
line-height: inherit;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Styles for messages and message banners */
|
/* Styles for messages and message banners */
|
||||||
.message {
|
.message {
|
||||||
&.block {
|
&.block {
|
||||||
@include border-radius($basicCr);
|
border-radius: $basicCr;
|
||||||
padding: $interiorMarginLg;
|
padding: $interiorMarginLg;
|
||||||
}
|
}
|
||||||
&.error {
|
&.error {
|
||||||
@ -121,9 +135,9 @@
|
|||||||
.l-message-banner {
|
.l-message-banner {
|
||||||
$m: $interiorMarginSm;
|
$m: $interiorMarginSm;
|
||||||
$lh: $ueFooterH - ($m*2) - 1;
|
$lh: $ueFooterH - ($m*2) - 1;
|
||||||
@include box-sizing(border-box);
|
box-sizing: border-box;
|
||||||
@include ellipsize();
|
@include ellipsize();
|
||||||
@include display-flex;
|
@include display(flex);
|
||||||
@include flex-direction(row);
|
@include flex-direction(row);
|
||||||
@include align-items(center);
|
@include align-items(center);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -146,7 +160,7 @@
|
|||||||
left: 50%;
|
left: 50%;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
&:not(.info) {
|
&:not(.info) {
|
||||||
@include pulse(100ms, 10);
|
@include pulse($dur: 100ms, $iteration: 10);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -184,12 +198,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.s-message-banner {
|
.s-message-banner {
|
||||||
@include border-radius($controlCr);
|
border-radius: $controlCr;
|
||||||
@include statusBannerColors($colorStatusDefault, $colorStatusFg);
|
@include statusBannerColors($colorStatusDefault, $colorStatusFg);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
a { color: inherit; }
|
a { color: inherit; }
|
||||||
.s-action {
|
.s-action {
|
||||||
@include border-radius($basicCr);
|
border-radius: $basicCr;
|
||||||
@include trans-prop-nice(background-color);
|
@include trans-prop-nice(background-color);
|
||||||
}
|
}
|
||||||
.close {
|
.close {
|
||||||
@ -250,7 +264,7 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
.l-message {
|
.l-message {
|
||||||
@include display-flex;
|
@include display(flex);
|
||||||
@include flex-direction(row);
|
@include flex-direction(row);
|
||||||
@include align-items(stretch);
|
@include align-items(stretch);
|
||||||
.type-icon.message-type {
|
.type-icon.message-type {
|
||||||
@ -275,17 +289,17 @@
|
|||||||
// Message as singleton
|
// Message as singleton
|
||||||
.t-message-single {
|
.t-message-single {
|
||||||
@include messageBlock(80px);
|
@include messageBlock(80px);
|
||||||
|
}
|
||||||
|
|
||||||
@include desktop {
|
body.desktop .t-message-single {
|
||||||
.l-message,
|
.l-message,
|
||||||
.bottom-bar {
|
.bottom-bar {
|
||||||
@include absPosDefault();
|
@include absPosDefault();
|
||||||
}
|
}
|
||||||
|
|
||||||
.bottom-bar {
|
.bottom-bar {
|
||||||
top: auto;
|
top: auto;
|
||||||
height: $ovrFooterH;
|
height: $ovrFooterH;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -295,15 +309,13 @@
|
|||||||
|
|
||||||
.message-contents {
|
.message-contents {
|
||||||
.l-message {
|
.l-message {
|
||||||
//border-bottom: 1px solid pullForward($colorOvrBg, 20%);
|
border-radius: $controlCr;
|
||||||
@include border-radius($controlCr);
|
|
||||||
background: rgba($colorOvrFg, 0.1);
|
background: rgba($colorOvrFg, 0.1);
|
||||||
margin-bottom: $interiorMargin;
|
margin-bottom: $interiorMargin;
|
||||||
padding: $interiorMarginLg;
|
padding: $interiorMarginLg;
|
||||||
|
|
||||||
.message-contents,
|
.message-contents,
|
||||||
.bottom-bar {
|
.bottom-bar {
|
||||||
//@include test(green);
|
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -320,8 +332,8 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@include desktop {
|
body.desktop .t-message-list {
|
||||||
.message-contents .l-message { margin-right: $interiorMarginLg; }
|
.message-contents .l-message { margin-right: $interiorMarginLg; }
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|||||||
@ -37,7 +37,7 @@ mct-include.l-time-controller {
|
|||||||
{
|
{
|
||||||
//@include test();
|
//@include test();
|
||||||
@include absPosDefault(0, visible);
|
@include absPosDefault(0, visible);
|
||||||
@include box-sizing(border-box);
|
box-sizing: border-box;
|
||||||
top: auto;
|
top: auto;
|
||||||
}
|
}
|
||||||
.l-time-range-slider,
|
.l-time-range-slider,
|
||||||
@ -73,7 +73,7 @@ mct-include.l-time-controller {
|
|||||||
//@include test(green);
|
//@include test(green);
|
||||||
height: $r2H; bottom: $r3H + ($interiorMarginSm * 1);
|
height: $r2H; bottom: $r3H + ($interiorMarginSm * 1);
|
||||||
.range-holder {
|
.range-holder {
|
||||||
@include box-shadow(none);
|
box-shadow: none;
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
.range {
|
.range {
|
||||||
@ -101,7 +101,7 @@ mct-include.l-time-controller {
|
|||||||
}
|
}
|
||||||
&:after {
|
&:after {
|
||||||
// Circle element
|
// Circle element
|
||||||
@include border-radius($myW);
|
border-radius: $myW;
|
||||||
@include transform(translateY(-50%));
|
@include transform(translateY(-50%));
|
||||||
top: 50%; right: 0; bottom: auto; left: 0;
|
top: 50%; right: 0; bottom: auto; left: 0;
|
||||||
width: auto;
|
width: auto;
|
||||||
@ -167,7 +167,7 @@ mct-include.l-time-controller {
|
|||||||
color: $sliderColorKnobHov;
|
color: $sliderColorKnobHov;
|
||||||
}
|
}
|
||||||
&.knob-l {
|
&.knob-l {
|
||||||
//@include border-bottom-left-radius($knobCr); // MOVED TO _CONTROLS.SCSS
|
//border-bottom-left-radius: $knobCr; // MOVED TO _CONTROLS.SCSS
|
||||||
margin-left: $knobM;
|
margin-left: $knobM;
|
||||||
.range-value {
|
.range-value {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
@ -175,7 +175,7 @@ mct-include.l-time-controller {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.knob-r {
|
&.knob-r {
|
||||||
//@include border-bottom-right-radius($knobCr);
|
//border-bottom-right-radius: $knobCr;
|
||||||
margin-right: $knobM;
|
margin-right: $knobM;
|
||||||
.range-value {
|
.range-value {
|
||||||
left: $rangeValOffset;
|
left: $rangeValOffset;
|
||||||
@ -193,7 +193,7 @@ mct-include.l-time-controller {
|
|||||||
|
|
||||||
.s-time-range-val {
|
.s-time-range-val {
|
||||||
//@include test();
|
//@include test();
|
||||||
@include border-radius($controlCr);
|
border-radius: $controlCr;
|
||||||
background-color: $colorInputBg;
|
background-color: $colorInputBg;
|
||||||
padding: 1px 1px 0 $interiorMargin;
|
padding: 1px 1px 0 $interiorMargin;
|
||||||
}
|
}
|
||||||
@ -38,22 +38,22 @@
|
|||||||
z-index: 11;
|
z-index: 11;
|
||||||
}
|
}
|
||||||
&.edit-resize-nw {
|
&.edit-resize-nw {
|
||||||
@include border-bottom-right-radius($cr);
|
border-bottom-right-radius: $cr;
|
||||||
cursor: nw-resize;
|
cursor: nw-resize;
|
||||||
top: 0; left: 0;
|
top: 0; left: 0;
|
||||||
}
|
}
|
||||||
&.edit-resize-ne {
|
&.edit-resize-ne {
|
||||||
@include border-bottom-left-radius($cr);
|
border-bottom-left-radius: $cr;
|
||||||
cursor: ne-resize;
|
cursor: ne-resize;
|
||||||
top: 0; right: 0;
|
top: 0; right: 0;
|
||||||
}
|
}
|
||||||
&.edit-resize-se {
|
&.edit-resize-se {
|
||||||
@include border-top-left-radius($cr);
|
border-top-left-radius: $cr;
|
||||||
cursor: se-resize;
|
cursor: se-resize;
|
||||||
bottom: 0; right: 0;
|
bottom: 0; right: 0;
|
||||||
}
|
}
|
||||||
&.edit-resize-sw {
|
&.edit-resize-sw {
|
||||||
@include border-top-right-radius($cr);
|
border-top-right-radius: $cr;
|
||||||
cursor: sw-resize;
|
cursor: sw-resize;
|
||||||
bottom: 0; left: 0;
|
bottom: 0; left: 0;
|
||||||
}
|
}
|
||||||
@ -109,4 +109,4 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -104,8 +104,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.l-image-thumb-item {
|
.l-image-thumb-item {
|
||||||
@include single-transition(background-color, 0.25s);
|
@include transition(background-color, 0.25s);
|
||||||
@include box-sizing(border-box);
|
box-sizing: border-box;
|
||||||
padding: 1px;
|
padding: 1px;
|
||||||
position: relative;
|
position: relative;
|
||||||
.l-thumb,
|
.l-thumb,
|
||||||
|
|||||||
@ -20,7 +20,7 @@
|
|||||||
* at runtime from the About dialog for additional information.
|
* at runtime from the About dialog for additional information.
|
||||||
*****************************************************************************/
|
*****************************************************************************/
|
||||||
.section-header {
|
.section-header {
|
||||||
@include border-radius($basicCr);
|
border-radius: $basicCr;
|
||||||
background: $colorFormSectionHeader;
|
background: $colorFormSectionHeader;
|
||||||
$c: lighten($colorBodyFg, 20%);
|
$c: lighten($colorBodyFg, 20%);
|
||||||
//border-bottom: 1px solid rgba(#fff, 0.3);
|
//border-bottom: 1px solid rgba(#fff, 0.3);
|
||||||
@ -39,7 +39,7 @@
|
|||||||
|
|
||||||
.form-row {
|
.form-row {
|
||||||
$m: $interiorMargin;
|
$m: $interiorMargin;
|
||||||
@include box-sizing(border-box);
|
box-sizing: border-box;
|
||||||
@include clearfix;
|
@include clearfix;
|
||||||
border-top: 1px solid $colorFormLines;
|
border-top: 1px solid $colorFormLines;
|
||||||
margin-top: $m;
|
margin-top: $m;
|
||||||
@ -51,7 +51,7 @@
|
|||||||
|
|
||||||
>.label,
|
>.label,
|
||||||
>.controls {
|
>.controls {
|
||||||
@include box-sizing(border-box);
|
box-sizing: border-box;
|
||||||
@include clearfix;
|
@include clearfix;
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
line-height: $formInputH;
|
line-height: $formInputH;
|
||||||
@ -149,7 +149,7 @@ label.form-control.checkbox {
|
|||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
|
|
||||||
div.s-hint {
|
div.s-hint {
|
||||||
@include border-radius($basicCr);
|
border-radius: $basicCr;
|
||||||
background: rgba($colorFormInvalid, 0.8);
|
background: rgba($colorFormInvalid, 0.8);
|
||||||
display: block;
|
display: block;
|
||||||
color: lighten($colorFormInvalid, 30%);
|
color: lighten($colorFormInvalid, 30%);
|
||||||
|
|||||||
@ -27,7 +27,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.icon.ui-symbol {
|
.icon.ui-symbol {
|
||||||
@include border-radius($controlCr);
|
border-radius: $controlCr;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: 1.3em;
|
font-size: 1.3em;
|
||||||
height: $formInputH;
|
height: $formInputH;
|
||||||
@ -43,9 +43,9 @@
|
|||||||
$d: $formInputH - $mgn * 2;
|
$d: $formInputH - $mgn * 2;
|
||||||
$cb: #fff;
|
$cb: #fff;
|
||||||
$cf: #333;
|
$cf: #333;
|
||||||
@include border-radius($controlCr);
|
border-radius: $controlCr;
|
||||||
@include box-sizing(border-box);
|
box-sizing: border-box;
|
||||||
@include opacity(0.2);
|
opacity: 0.2;
|
||||||
background: $cb;
|
background: $cb;
|
||||||
color: $cf;
|
color: $cf;
|
||||||
display: block;
|
display: block;
|
||||||
@ -59,7 +59,7 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
z-index: 5;
|
z-index: 5;
|
||||||
&:hover {
|
&:hover {
|
||||||
@include opacity(0.6);
|
opacity: 0.6;
|
||||||
background-color: $colorKey;
|
background-color: $colorKey;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -95,7 +95,7 @@
|
|||||||
.clear-icon,
|
.clear-icon,
|
||||||
.menu-icon,
|
.menu-icon,
|
||||||
&:before {
|
&:before {
|
||||||
@include box-sizing(border-box);
|
box-sizing: border-box;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
line-height: inherit;
|
line-height: inherit;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|||||||
@ -30,7 +30,7 @@
|
|||||||
line-height: $formInputH;
|
line-height: $formInputH;
|
||||||
select {
|
select {
|
||||||
@include appearance(none);
|
@include appearance(none);
|
||||||
@include box-sizing(border-box);
|
box-sizing: border-box;
|
||||||
background: none;
|
background: none;
|
||||||
color: $colorSelectFg;
|
color: $colorSelectFg;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|||||||
@ -30,7 +30,7 @@
|
|||||||
|
|
||||||
.l-infobubble-wrapper {
|
.l-infobubble-wrapper {
|
||||||
$arwSize: 5px;
|
$arwSize: 5px;
|
||||||
@include box-shadow(rgba(black, 0.4) 0 1px 5px);
|
box-shadow: rgba(black, 0.4) 0 1px 5px;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 50;
|
z-index: 50;
|
||||||
.l-infobubble {
|
.l-infobubble {
|
||||||
@ -149,8 +149,8 @@
|
|||||||
|
|
||||||
.s-infobubble {
|
.s-infobubble {
|
||||||
$emFg: darken($colorInfoBubbleFg, 20%);
|
$emFg: darken($colorInfoBubbleFg, 20%);
|
||||||
@include border-radius($basicCr);
|
border-radius: $basicCr;
|
||||||
@include box-shadow(rgba(black, 0.4) 0 1px 5px);
|
box-shadow: rgba(black, 0.4) 0 1px 5px;
|
||||||
background: $colorInfoBubbleBg;
|
background: $colorInfoBubbleBg;
|
||||||
color: $colorInfoBubbleFg;
|
color: $colorInfoBubbleFg;
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
|
|||||||
@ -39,7 +39,7 @@
|
|||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
@if $splitterEndCr != 'none' {
|
@if $splitterEndCr != 'none' {
|
||||||
@include border-radius($splitterEndCr);
|
border-radius: $splitterEndCr;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:active {
|
&:active {
|
||||||
|
|||||||
@ -34,8 +34,8 @@
|
|||||||
@include animation-duration(0.5s);
|
@include animation-duration(0.5s);
|
||||||
@include animation-iteration-count(infinite);
|
@include animation-iteration-count(infinite);
|
||||||
@include animation-timing-function(linear);
|
@include animation-timing-function(linear);
|
||||||
@include border-radius(100%);
|
border-radius: 100%;
|
||||||
@include box-sizing(border-box);
|
box-sizing: border-box;
|
||||||
border-color: rgba($c, 0.25);
|
border-color: rgba($c, 0.25);
|
||||||
border-top-color: rgba($c, 1.0);
|
border-top-color: rgba($c, 1.0);
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
|
|||||||
@ -26,7 +26,7 @@
|
|||||||
|
|
||||||
.tabular,
|
.tabular,
|
||||||
table {
|
table {
|
||||||
@include box-sizing(border-box);
|
box-sizing: border-box;
|
||||||
border-spacing: 0;
|
border-spacing: 0;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
display: table;
|
display: table;
|
||||||
@ -107,7 +107,7 @@ table {
|
|||||||
&.s-cell-type-value {
|
&.s-cell-type-value {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
.l-cell-contents {
|
.l-cell-contents {
|
||||||
@include border-radius($smallCr);
|
border-radius: $smallCr;
|
||||||
padding-left: $itemPadLR;
|
padding-left: $itemPadLR;
|
||||||
padding-right: $itemPadLR;
|
padding-right: $itemPadLR;
|
||||||
}
|
}
|
||||||
@ -126,7 +126,7 @@ table {
|
|||||||
top: $tabularHeaderH * 2;
|
top: $tabularHeaderH * 2;
|
||||||
}
|
}
|
||||||
input[type="text"] {
|
input[type="text"] {
|
||||||
@include box-sizing(border-box);
|
box-sizing: border-box;
|
||||||
width: 100%; //50px;
|
width: 100%; //50px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -24,11 +24,21 @@
|
|||||||
// representation. Instead of a grid,
|
// representation. Instead of a grid,
|
||||||
// a list is used.
|
// a list is used.
|
||||||
|
|
||||||
|
|
||||||
|
// Refactored to use Victorizr
|
||||||
.items-holder {
|
.items-holder {
|
||||||
.item {
|
.item {
|
||||||
&.grid-item {
|
&.grid-item {
|
||||||
$titleH: 30px;
|
$titleH: 30px;
|
||||||
@include phoneandtablet {
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
body.phone,
|
||||||
|
body.tablet {
|
||||||
|
.items-holder {
|
||||||
|
.item {
|
||||||
|
&.grid-item {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
>.contents {
|
>.contents {
|
||||||
top: 0px; right: $interiorMarginLg; bottom: 0px; left: $interiorMarginLg;
|
top: 0px; right: $interiorMarginLg; bottom: 0px; left: $interiorMarginLg;
|
||||||
@ -36,7 +46,6 @@
|
|||||||
.bar {
|
.bar {
|
||||||
&.top-bar {
|
&.top-bar {
|
||||||
// Becomes the right side of the item
|
// Becomes the right side of the item
|
||||||
//@include test(blue);
|
|
||||||
bottom: 0 !important; left: auto !important; right: 20px !important;
|
bottom: 0 !important; left: auto !important; right: 20px !important;
|
||||||
width: 40px !important; height: auto !important;
|
width: 40px !important; height: auto !important;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
@ -46,7 +55,7 @@
|
|||||||
left: $mobileListIconSize + $interiorMarginLg;
|
left: $mobileListIconSize + $interiorMarginLg;
|
||||||
right: 60px;
|
right: 60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
.item-main {
|
.item-main {
|
||||||
.item-type,
|
.item-type,
|
||||||
@ -63,8 +72,14 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@include phone {
|
body.phone {
|
||||||
|
.items-holder {
|
||||||
|
.item {
|
||||||
|
&.grid-item {
|
||||||
$dHei: $phoneItemH;
|
$dHei: $phoneItemH;
|
||||||
height: $dHei;
|
height: $dHei;
|
||||||
.bar {
|
.bar {
|
||||||
@ -85,8 +100,14 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
@include tablet {
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
body.tablet {
|
||||||
|
.items-holder {
|
||||||
|
.item {
|
||||||
|
&.grid-item {
|
||||||
$dHei: $tabletItemH;
|
$dHei: $tabletItemH;
|
||||||
height: $dHei;
|
height: $dHei;
|
||||||
.bar {
|
.bar {
|
||||||
|
|||||||
@ -20,14 +20,7 @@
|
|||||||
* at runtime from the About dialog for additional information.
|
* at runtime from the About dialog for additional information.
|
||||||
*****************************************************************************/
|
*****************************************************************************/
|
||||||
|
|
||||||
@include phoneandtablet {
|
body.mobile {
|
||||||
// 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pane.left.treeview {
|
.pane.left.treeview {
|
||||||
background-color: $colorMobilePaneLeft;
|
background-color: $colorMobilePaneLeft;
|
||||||
}
|
}
|
||||||
@ -141,7 +134,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include phonePortrait {
|
body.phone.portrait {
|
||||||
.pane-tree-showing {
|
.pane-tree-showing {
|
||||||
.pane.left.treeview {
|
.pane.left.treeview {
|
||||||
width: $proporMenuOnly !important;
|
width: $proporMenuOnly !important;
|
||||||
@ -156,7 +149,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include desktop {
|
body.desktop {
|
||||||
.desktop-hide {
|
.desktop-hide {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -78,6 +78,8 @@
|
|||||||
|
|
||||||
// Desktop monitors in any orientation
|
// Desktop monitors in any orientation
|
||||||
@mixin desktopandtablet {
|
@mixin desktopandtablet {
|
||||||
|
// Keeping only for legacy - should not be used moving forward
|
||||||
|
// Use body.desktop, body.tablet instead.
|
||||||
@media #{$tabletPortrait},
|
@media #{$tabletPortrait},
|
||||||
#{$tabletLandscape},
|
#{$tabletLandscape},
|
||||||
#{$desktop} {
|
#{$desktop} {
|
||||||
@ -87,6 +89,8 @@
|
|||||||
|
|
||||||
// Desktop monitors in any orientation
|
// Desktop monitors in any orientation
|
||||||
@mixin desktop {
|
@mixin desktop {
|
||||||
|
// Keeping only for legacy - should not be used moving forward
|
||||||
|
// Use body.desktop instead.
|
||||||
@media #{$desktop} {
|
@media #{$desktop} {
|
||||||
@content
|
@content
|
||||||
}
|
}
|
||||||
|
|||||||
@ -20,7 +20,7 @@
|
|||||||
* at runtime from the About dialog for additional information.
|
* at runtime from the About dialog for additional information.
|
||||||
*****************************************************************************/
|
*****************************************************************************/
|
||||||
|
|
||||||
@include phoneandtablet {
|
body.touch {
|
||||||
ul.tree {
|
ul.tree {
|
||||||
// Sets the margin on the left, which causes the
|
// Sets the margin on the left, which causes the
|
||||||
// running indentation after each folder is made
|
// running indentation after each folder is made
|
||||||
@ -42,10 +42,10 @@
|
|||||||
&:before {
|
&:before {
|
||||||
content: "\7d";
|
content: "\7d";
|
||||||
left: 50%;
|
left: 50%;
|
||||||
@include transform(translateX(-50%) rotate(90deg));
|
@include transform(translateX(-50%) rotate(270deg));
|
||||||
}
|
}
|
||||||
&.expanded:before {
|
&.expanded:before {
|
||||||
@include transform(translateX(-50%) rotate(270deg));
|
@include transform(translateX(-50%) rotate(90deg));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -27,7 +27,7 @@
|
|||||||
.overlay > .holder {
|
.overlay > .holder {
|
||||||
//@include test(orange); // This works!
|
//@include test(orange); // This works!
|
||||||
$m: 0;
|
$m: 0;
|
||||||
@include border-radius($m);
|
border-radius: $m;
|
||||||
top: $m;
|
top: $m;
|
||||||
right: $m;
|
right: $m;
|
||||||
bottom: $m;
|
bottom: $m;
|
||||||
|
|||||||
@ -37,7 +37,7 @@
|
|||||||
> .holder {
|
> .holder {
|
||||||
//$i: 15%;
|
//$i: 15%;
|
||||||
@include containerSubtle($colorOvrBg, $colorOvrFg);
|
@include containerSubtle($colorOvrBg, $colorOvrFg);
|
||||||
@include border-radius($basicCr * 3);
|
border-radius: $basicCr * 3;
|
||||||
color: $colorOvrFg;
|
color: $colorOvrFg;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
right: auto;
|
right: auto;
|
||||||
|
|||||||
@ -69,8 +69,8 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
|
|||||||
}
|
}
|
||||||
|
|
||||||
.gl-plot-coords {
|
.gl-plot-coords {
|
||||||
@include box-sizing(border-box);
|
box-sizing: border-box;
|
||||||
@include border-radius($controlCr);
|
border-radius: $controlCr;
|
||||||
background: black;
|
background: black;
|
||||||
color: lighten($colorBodyFg, 30%);
|
color: lighten($colorBodyFg, 30%);
|
||||||
padding: 2px 5px;
|
padding: 2px 5px;
|
||||||
@ -117,7 +117,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
|
|||||||
&.l-plot-y-label {
|
&.l-plot-y-label {
|
||||||
$x: -50%;
|
$x: -50%;
|
||||||
$r: -90deg;
|
$r: -90deg;
|
||||||
@include transform-origin(50%, 0);
|
@include transform-origin(50% 0);
|
||||||
@include transform(translateX($x) rotate($r));
|
@include transform(translateX($x) rotate($r));
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-left: $interiorMargin; // Kick off the left edge
|
margin-left: $interiorMargin; // Kick off the left edge
|
||||||
@ -234,7 +234,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
|
|||||||
}
|
}
|
||||||
.plot-color-swatch,
|
.plot-color-swatch,
|
||||||
.color-swatch {
|
.color-swatch {
|
||||||
@include border-radius(2px);
|
border-radius: 2px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
height: $swatchD;
|
height: $swatchD;
|
||||||
width: $swatchD;
|
width: $swatchD;
|
||||||
@ -244,7 +244,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
|
|||||||
|
|
||||||
.gl-plot-legend {
|
.gl-plot-legend {
|
||||||
.plot-legend-item {
|
.plot-legend-item {
|
||||||
@include border-radius($smallCr);
|
border-radius: $smallCr;
|
||||||
line-height: 1.5em;
|
line-height: 1.5em;
|
||||||
padding: 0px $itemPadLR;
|
padding: 0px $itemPadLR;
|
||||||
.plot-color-swatch {
|
.plot-color-swatch {
|
||||||
@ -310,4 +310,4 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
|
|||||||
&.tick-label-y {
|
&.tick-label-y {
|
||||||
right: 0; left: 0;
|
right: 0; left: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -42,7 +42,6 @@
|
|||||||
$iconEdgeM: 4px;
|
$iconEdgeM: 4px;
|
||||||
$iconD: $treeSearchInputBarH - ($iconEdgeM*2);
|
$iconD: $treeSearchInputBarH - ($iconEdgeM*2);
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
max-width: 250px;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.search-input {
|
.search-input {
|
||||||
@ -53,7 +52,7 @@
|
|||||||
&:before,
|
&:before,
|
||||||
.clear-icon,
|
.clear-icon,
|
||||||
.menu-icon {
|
.menu-icon {
|
||||||
@include box-sizing(border-box);
|
box-sizing: border-box;
|
||||||
color: $colorInputIcon;
|
color: $colorInputIcon;
|
||||||
height: $iconD;
|
height: $iconD;
|
||||||
width: $iconD;
|
width: $iconD;
|
||||||
@ -130,7 +129,7 @@
|
|||||||
.active-filter-display {
|
.active-filter-display {
|
||||||
$s: 0.7em;
|
$s: 0.7em;
|
||||||
$p: $interiorMargin;
|
$p: $interiorMargin;
|
||||||
@include box-sizing(border-box);
|
box-sizing: border-box;
|
||||||
line-height: 130%;
|
line-height: 130%;
|
||||||
padding-left: $s * 2.25;
|
padding-left: $s * 2.25;
|
||||||
font-size: $s;
|
font-size: $s;
|
||||||
|
|||||||
@ -35,9 +35,9 @@ ul.tree {
|
|||||||
.tree-item,
|
.tree-item,
|
||||||
.search-result-item {
|
.search-result-item {
|
||||||
@extend .l-flex-row;
|
@extend .l-flex-row;
|
||||||
@include box-sizing(border-box);
|
box-sizing: border-box;
|
||||||
@include border-radius($basicCr);
|
border-radius: $basicCr;
|
||||||
@include single-transition(background-color, 0.25s);
|
@include transition(background-color, 0.25s);
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
height: $menuLineH;
|
height: $menuLineH;
|
||||||
line-height: $menuLineH;
|
line-height: $menuLineH;
|
||||||
@ -63,11 +63,6 @@ ul.tree {
|
|||||||
@include transform(rotate(90deg));
|
@include transform(rotate(90deg));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@include desktop {
|
|
||||||
&:hover {
|
|
||||||
color: $colorItemTreeVCHover !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.t-object-label {
|
.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) {
|
&:not(.loading) {
|
||||||
cursor: pointer;
|
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 {
|
mct-representation {
|
||||||
&.s-status-pending {
|
&.s-status-pending {
|
||||||
.t-object-label {
|
.t-object-label {
|
||||||
@ -155,7 +158,7 @@ mct-representation {
|
|||||||
.t-item-icon,
|
.t-item-icon,
|
||||||
.t-title-label {
|
.t-title-label {
|
||||||
color: $colorItemTreeEditingFg;
|
color: $colorItemTreeEditingFg;
|
||||||
@include text-shadow(none);
|
text-shadow: none;
|
||||||
}
|
}
|
||||||
.t-title-label {
|
.t-title-label {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
|
|||||||
@ -66,17 +66,6 @@
|
|||||||
.view-switcher {
|
.view-switcher {
|
||||||
z-index: 10;
|
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 {
|
.view-switcher {
|
||||||
// Hide the name when the view switcher is in a frame context
|
// 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -27,7 +27,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.editor {
|
.editor {
|
||||||
@include border-radius($basicCr * 1.5);
|
border-radius: $basicCr * 1.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.contents {
|
.contents {
|
||||||
@ -86,7 +86,7 @@
|
|||||||
color: lighten($colorBodyBg, 30%);
|
color: lighten($colorBodyBg, 30%);
|
||||||
font-size: .7rem;
|
font-size: .7rem;
|
||||||
.status-holder {
|
.status-holder {
|
||||||
@include box-sizing(border-box);
|
box-sizing: border-box;
|
||||||
@include absPosDefault($interiorMargin);
|
@include absPosDefault($interiorMargin);
|
||||||
@include ellipsize();
|
@include ellipsize();
|
||||||
right: 120px;
|
right: 120px;
|
||||||
@ -94,7 +94,7 @@
|
|||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
.app-logo {
|
.app-logo {
|
||||||
@include box-sizing(border-box);
|
box-sizing: border-box;
|
||||||
@include absPosDefault($interiorMargin);
|
@include absPosDefault($interiorMargin);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
left: auto;
|
left: auto;
|
||||||
@ -121,7 +121,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.pane {
|
.pane {
|
||||||
@include box-sizing(border-box);
|
box-sizing: border-box;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
||||||
.pane-header {
|
.pane-header {
|
||||||
@ -137,48 +137,6 @@
|
|||||||
|
|
||||||
.mini-tab-icon.toggle-pane {
|
.mini-tab-icon.toggle-pane {
|
||||||
z-index: 5;
|
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 {
|
&.items {
|
||||||
.object-browse-bar {
|
.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 {
|
.split-layout {
|
||||||
// Specific elements margins
|
// Specific elements margins
|
||||||
.holder.holder-treeview-elements {
|
.holder.holder-treeview-elements {
|
||||||
@ -282,7 +283,7 @@
|
|||||||
|
|
||||||
/***************************************************** OBJECT BROWSE BAR */
|
/***************************************************** OBJECT BROWSE BAR */
|
||||||
.object-browse-bar {
|
.object-browse-bar {
|
||||||
@include box-sizing(border-box);
|
box-sizing: border-box;
|
||||||
height: $ueTopBarH;
|
height: $ueTopBarH;
|
||||||
line-height: $ueTopBarH;
|
line-height: $ueTopBarH;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
@ -339,7 +340,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include desktop {
|
body.desktop {
|
||||||
.holder-all {
|
.holder-all {
|
||||||
min-width: $ueDesktopMinW;
|
min-width: $ueDesktopMinW;
|
||||||
}
|
}
|
||||||
@ -378,7 +379,7 @@
|
|||||||
.s-status-editing {
|
.s-status-editing {
|
||||||
.l-object-wrapper {
|
.l-object-wrapper {
|
||||||
@include pulseBorder($colorEditAreaFg, $dur: 1s, $opacity0: 0.3);
|
@include pulseBorder($colorEditAreaFg, $dur: 1s, $opacity0: 0.3);
|
||||||
@include border-radius($controlCr);
|
border-radius: $controlCr;
|
||||||
background-color: $colorEditAreaBg;
|
background-color: $colorEditAreaBg;
|
||||||
border-color: $colorEditAreaFg;
|
border-color: $colorEditAreaFg;
|
||||||
border-width: 2px;
|
border-width: 2px;
|
||||||
|
|||||||
@ -27,7 +27,7 @@
|
|||||||
height: $btnToolbarH;
|
height: $btnToolbarH;
|
||||||
}
|
}
|
||||||
input[type="text"] {
|
input[type="text"] {
|
||||||
@include box-sizing(border-box);
|
box-sizing: border-box;
|
||||||
font-size: .9em;
|
font-size: .9em;
|
||||||
height: $btnToolbarH;
|
height: $btnToolbarH;
|
||||||
margin-bottom: 1px;
|
margin-bottom: 1px;
|
||||||
|
|||||||
@ -23,7 +23,8 @@
|
|||||||
<div id='status' class='status-holder'>
|
<div id='status' class='status-holder'>
|
||||||
<mct-include ng-repeat="indicator in bar.getIndicators()"
|
<mct-include ng-repeat="indicator in bar.getIndicators()"
|
||||||
ng-model="indicator.ngModel"
|
ng-model="indicator.ngModel"
|
||||||
key="indicator.template">
|
key="indicator.template"
|
||||||
|
class="status-block-holder">
|
||||||
</mct-include>
|
</mct-include>
|
||||||
</div>
|
</div>
|
||||||
<mct-include key="'message-banner'"></mct-include>
|
<mct-include key="'message-banner'"></mct-include>
|
||||||
|
|||||||
@ -30,11 +30,8 @@
|
|||||||
</span><span class="label"
|
</span><span class="label"
|
||||||
ng-class='ngModel.getTextClass()'>
|
ng-class='ngModel.getTextClass()'>
|
||||||
{{ngModel.getText()}}
|
{{ngModel.getText()}}
|
||||||
|
<a class="s-btn ui-symbol" ng-if="ngModel.configure">G</a>
|
||||||
</span><span class="count">
|
</span><span class="count">
|
||||||
<!-- Add int count value here if this type of indicator has one or more messages associated with it -->
|
<!-- Add int count value here if this type of indicator has one or more messages associated with it -->
|
||||||
</span><a href=''
|
</span>
|
||||||
class="ui-symbol"
|
|
||||||
ng-if="ngModel.configure">
|
|
||||||
G
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
@ -12,12 +12,14 @@ $colorInteriorBorder: rgba($colorBodyFg, 0.1);
|
|||||||
$colorA: #ccc;
|
$colorA: #ccc;
|
||||||
$colorAHov: #fff;
|
$colorAHov: #fff;
|
||||||
$contrastRatioPercent: 7%;
|
$contrastRatioPercent: 7%;
|
||||||
|
$hoverRatioPercent: 10%;
|
||||||
$basicCr: 3px;
|
$basicCr: 3px;
|
||||||
$controlCr: 3px;
|
$controlCr: 3px;
|
||||||
$smallCr: 2px;
|
$smallCr: 2px;
|
||||||
|
|
||||||
// Buttons and Controls
|
// Buttons and Controls
|
||||||
$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent); //
|
$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
|
||||||
|
$colorBtnBgHov: pullForward($colorBtnBg, $hoverRatioPercent);
|
||||||
$colorBtnFg: $colorBodyFg;
|
$colorBtnFg: $colorBodyFg;
|
||||||
$colorBtnMajorBg: $colorKey;
|
$colorBtnMajorBg: $colorKey;
|
||||||
$colorBtnMajorFg: $colorKeyFg;
|
$colorBtnMajorFg: $colorKeyFg;
|
||||||
@ -54,7 +56,7 @@ $colorTick: rgba(white, 0.2);
|
|||||||
$colorMenuBg: pullForward($colorBodyBg, 23%);
|
$colorMenuBg: pullForward($colorBodyBg, 23%);
|
||||||
$colorMenuFg: pullForward($colorMenuBg, 70%);
|
$colorMenuFg: pullForward($colorMenuBg, 70%);
|
||||||
$colorMenuIc: pullForward($colorKey, 17%);
|
$colorMenuIc: pullForward($colorKey, 17%);
|
||||||
$colorMenuHovBg: pullForward($colorMenuBg, 10%);
|
$colorMenuHovBg: pullForward($colorMenuBg, $hoverRatioPercent);
|
||||||
$colorMenuHovFg: #fff;
|
$colorMenuHovFg: #fff;
|
||||||
$colorMenuHovIc: $colorMenuHovFg;
|
$colorMenuHovIc: $colorMenuHovFg;
|
||||||
$shdwMenu: none;
|
$shdwMenu: none;
|
||||||
@ -89,6 +91,8 @@ $colorStatusDefault: #ccc;
|
|||||||
$colorStatusInfo: #62ba72;
|
$colorStatusInfo: #62ba72;
|
||||||
$colorStatusAlert: #ffa66d;
|
$colorStatusAlert: #ffa66d;
|
||||||
$colorStatusError: #d4585c;
|
$colorStatusError: #d4585c;
|
||||||
|
$colorStatusAvailable: $colorKey;
|
||||||
|
$colorStatusBtnBg: $colorBtnBg;
|
||||||
$colorProgressBarOuter: rgba(#000, 0.1);
|
$colorProgressBarOuter: rgba(#000, 0.1);
|
||||||
$colorProgressBarAmt: $colorKey;
|
$colorProgressBarAmt: $colorKey;
|
||||||
$progressBarHOverlay: 15px;
|
$progressBarHOverlay: 15px;
|
||||||
@ -123,7 +127,7 @@ $colorOvrBtnFg: #fff;
|
|||||||
|
|
||||||
// Items
|
// Items
|
||||||
$colorItemBg: lighten($colorBodyBg, 5%);
|
$colorItemBg: lighten($colorBodyBg, 5%);
|
||||||
$colorItemBgHov: pullForward($colorItemBg, 15%);
|
$colorItemBgHov: pullForward($colorItemBg, $hoverRatioPercent);
|
||||||
$colorItemFg: lighten($colorItemBg, 50%);
|
$colorItemFg: lighten($colorItemBg, 50%);
|
||||||
$colorItemFgDetails: lighten($colorItemBg, 30%);
|
$colorItemFgDetails: lighten($colorItemBg, 30%);
|
||||||
$colorItemIc: $colorKey;
|
$colorItemIc: $colorKey;
|
||||||
@ -149,26 +153,26 @@ $colorPlotAreaBorder: $colorInteriorBorder;
|
|||||||
$colorPlotLabelFg: pushBack($colorPlotFg, 20%);
|
$colorPlotLabelFg: pushBack($colorPlotFg, 20%);
|
||||||
|
|
||||||
// Tree
|
// Tree
|
||||||
$colorItemTreeHoverBg: rgba($colorBodyFg, 0.1);
|
$colorItemTreeHoverBg: pullForward($colorBodyBg, $hoverRatioPercent);
|
||||||
$colorItemTreeHoverFg: pullForward($colorBodyFg, 20%);
|
$colorItemTreeHoverFg: pullForward($colorBodyFg, $hoverRatioPercent);
|
||||||
$colorItemTreeIcon: $colorKey;
|
$colorItemTreeIcon: $colorKey;
|
||||||
$colorItemTreeIconHover: lighten($colorItemTreeIcon, 20%);
|
$colorItemTreeIconHover: lighten($colorItemTreeIcon, 20%);
|
||||||
$colorItemTreeVCHover: $colorAlt1;
|
|
||||||
$colorItemTreeFg: $colorBodyFg;
|
$colorItemTreeFg: $colorBodyFg;
|
||||||
$colorItemTreeSelectedBg: pushBack($colorKey, 15%);
|
$colorItemTreeSelectedBg: pushBack($colorKey, 15%);
|
||||||
$colorItemTreeSelectedFg: pullForward($colorBodyFg, 20%);
|
$colorItemTreeSelectedFg: pullForward($colorBodyFg, 20%);
|
||||||
$colorItemTreeEditingBg: #344154;
|
$colorItemTreeEditingBg: #344154;
|
||||||
$colorItemTreeEditingFg: $colorEditAreaFg;
|
$colorItemTreeEditingFg: $colorEditAreaFg;
|
||||||
$colorItemTreeVC: rgba(#fff, 0.3);
|
$colorItemTreeVC: $colorBodyFg; //rgba(#fff, 0.3);
|
||||||
|
$colorItemTreeVCHover: pullForward($colorItemTreeVC, 20%);
|
||||||
$colorItemTreeSelectedVC: $colorItemTreeVC;
|
$colorItemTreeSelectedVC: $colorItemTreeVC;
|
||||||
$shdwItemTreeIcon: 0.6;
|
$shdwItemTreeIcon: 0.6;
|
||||||
|
|
||||||
// Scrollbar
|
// Scrollbar
|
||||||
$scrollbarTrackSize: 10px;
|
$scrollbarTrackSize: 10px;
|
||||||
|
$scrollbarTrackShdw: rgba(#000, 0.7) 0 1px 5px;
|
||||||
$scrollbarTrackColorBg: rgba(#000, 0.4);
|
$scrollbarTrackColorBg: rgba(#000, 0.4);
|
||||||
$scrollbarThumbColor: lighten($colorBodyBg, 10%);
|
$scrollbarThumbColor: lighten($colorBodyBg, 10%);
|
||||||
$scrollbarThumbColorHov: lighten($scrollbarThumbColor, 2%);
|
$scrollbarThumbColorHov: lighten($scrollbarThumbColor, 2%);
|
||||||
$scrollbarTrackShdw: rgba(#000, 0.7) 0 1px 5px;
|
|
||||||
|
|
||||||
// Splitter
|
// Splitter
|
||||||
$splitterD: 25px; // splitterD and HandleD should both be odd, or even
|
$splitterD: 25px; // splitterD and HandleD should both be odd, or even
|
||||||
|
|||||||
@ -4,10 +4,10 @@
|
|||||||
@include boxShdw($shdwBtns);
|
@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 containerSubtle($bg, $fg);
|
||||||
@include btnBase($bg, linear-gradient(lighten($bg, 15%), lighten($bg, 10%)), $fg, $ic);
|
@include btnBase($bg, $bgHovColor, $fg, $ic);
|
||||||
@include text-shadow($shdwItemText);
|
text-shadow: $shdwItemText;
|
||||||
}
|
}
|
||||||
|
|
||||||
@function pullForward($c: $colorBodyBg, $p: 20%) {
|
@function pullForward($c: $colorBodyBg, $p: 20%) {
|
||||||
|
|||||||
@ -20,10 +20,7 @@
|
|||||||
* at runtime from the About dialog for additional information.
|
* at runtime from the About dialog for additional information.
|
||||||
*****************************************************************************/
|
*****************************************************************************/
|
||||||
|
|
||||||
@import "compass";
|
@import "bourbon";
|
||||||
@import "compass/reset";
|
|
||||||
@import "compass/css3";
|
|
||||||
@import "compass/utilities";
|
|
||||||
|
|
||||||
@import "../../../../general/res/sass/_mixins";
|
@import "../../../../general/res/sass/_mixins";
|
||||||
@import "../../../../general/res/sass/mobile/mixins";
|
@import "../../../../general/res/sass/mobile/mixins";
|
||||||
@ -33,4 +30,4 @@
|
|||||||
@import "../../../../general/res/sass/mobile/constants";
|
@import "../../../../general/res/sass/mobile/constants";
|
||||||
@import "constants";
|
@import "constants";
|
||||||
|
|
||||||
@import "../../../../general/res/sass/main";
|
@import "../../../../general/res/sass/main";
|
||||||
|
|||||||
@ -12,12 +12,14 @@ $colorInteriorBorder: rgba($colorBodyFg, 0.2);
|
|||||||
$colorA: #999;
|
$colorA: #999;
|
||||||
$colorAHov: $colorKey;
|
$colorAHov: $colorKey;
|
||||||
$contrastRatioPercent: 40%;
|
$contrastRatioPercent: 40%;
|
||||||
|
$hoverRatioPercent: 10%;
|
||||||
$basicCr: 4px;
|
$basicCr: 4px;
|
||||||
$controlCr: $basicCr;
|
$controlCr: $basicCr;
|
||||||
$smallCr: 3px;
|
$smallCr: 3px;
|
||||||
|
|
||||||
// Buttons and Controls
|
// Buttons and Controls
|
||||||
$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
|
$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
|
||||||
|
$colorBtnBgHov: pullForward($colorBtnBg, $hoverRatioPercent);
|
||||||
$colorBtnFg: #fff;
|
$colorBtnFg: #fff;
|
||||||
$colorBtnMajorBg: $colorKey;
|
$colorBtnMajorBg: $colorKey;
|
||||||
$colorBtnMajorFg: $colorKeyFg;
|
$colorBtnMajorFg: $colorKeyFg;
|
||||||
@ -54,7 +56,7 @@ $colorTick: rgba(black, 0.2);
|
|||||||
$colorMenuBg: pushBack($colorBodyBg, 10%);
|
$colorMenuBg: pushBack($colorBodyBg, 10%);
|
||||||
$colorMenuFg: pullForward($colorMenuBg, 70%);
|
$colorMenuFg: pullForward($colorMenuBg, 70%);
|
||||||
$colorMenuIc: $colorKey;
|
$colorMenuIc: $colorKey;
|
||||||
$colorMenuHovBg: pullForward($colorMenuBg, 10%);
|
$colorMenuHovBg: pullForward($colorMenuBg, $hoverRatioPercent);
|
||||||
$colorMenuHovFg: $colorMenuFg;
|
$colorMenuHovFg: $colorMenuFg;
|
||||||
$colorMenuHovIc: $colorMenuIc;
|
$colorMenuHovIc: $colorMenuIc;
|
||||||
$shdwMenu: rgba(black, 0.5) 0 1px 5px;
|
$shdwMenu: rgba(black, 0.5) 0 1px 5px;
|
||||||
@ -89,6 +91,8 @@ $colorStatusDefault: #ccc;
|
|||||||
$colorStatusInfo: #60ba7b;
|
$colorStatusInfo: #60ba7b;
|
||||||
$colorStatusAlert: #ffb66c;
|
$colorStatusAlert: #ffb66c;
|
||||||
$colorStatusError: #c96b68;
|
$colorStatusError: #c96b68;
|
||||||
|
$colorStatusAvailable: $colorKey;
|
||||||
|
$colorStatusBtnBg: #666;
|
||||||
$colorProgressBarOuter: rgba(#000, 0.1);
|
$colorProgressBarOuter: rgba(#000, 0.1);
|
||||||
$colorProgressBarAmt: #0a0;
|
$colorProgressBarAmt: #0a0;
|
||||||
$progressBarHOverlay: 15px;
|
$progressBarHOverlay: 15px;
|
||||||
@ -123,7 +127,7 @@ $colorOvrBtnFg: #fff;
|
|||||||
|
|
||||||
// Items
|
// Items
|
||||||
$colorItemBg: #ddd;
|
$colorItemBg: #ddd;
|
||||||
$colorItemBgHov: pullForward($colorItemBg, 5%);
|
$colorItemBgHov: pullForward($colorItemBg, $hoverRatioPercent);
|
||||||
$colorItemFg: $colorBodyFg;
|
$colorItemFg: $colorBodyFg;
|
||||||
$colorItemFgDetails: pushBack($colorItemFg, 15%);
|
$colorItemFgDetails: pushBack($colorItemFg, 15%);
|
||||||
$colorItemIc: $colorKey;
|
$colorItemIc: $colorKey;
|
||||||
@ -149,17 +153,17 @@ $colorPlotAreaBorder: $colorInteriorBorder;
|
|||||||
$colorPlotLabelFg: pushBack($colorPlotFg, 20%);
|
$colorPlotLabelFg: pushBack($colorPlotFg, 20%);
|
||||||
|
|
||||||
// Tree
|
// Tree
|
||||||
$colorItemTreeHoverBg: rgba($colorBodyFg, 0.1);
|
$colorItemTreeHoverBg: pullForward($colorBodyBg, $hoverRatioPercent);
|
||||||
$colorItemTreeHoverFg: pullForward($colorBodyFg, 20%);
|
$colorItemTreeHoverFg: pullForward($colorBodyFg, $hoverRatioPercent);
|
||||||
$colorItemTreeIcon: $colorKey;
|
$colorItemTreeIcon: $colorKey;
|
||||||
$colorItemTreeIconHover: $colorItemTreeIcon; //pushBack($colorItemTreeIcon, 20%);
|
$colorItemTreeIconHover: $colorItemTreeIcon;
|
||||||
$colorItemTreeVCHover: $colorKey;
|
|
||||||
$colorItemTreeFg: $colorBodyFg;
|
$colorItemTreeFg: $colorBodyFg;
|
||||||
$colorItemTreeSelectedBg: pushBack($colorKey, 15%);
|
$colorItemTreeSelectedBg: pushBack($colorKey, 15%);
|
||||||
$colorItemTreeSelectedFg: $colorBodyBg;
|
$colorItemTreeSelectedFg: $colorBodyBg;
|
||||||
$colorItemTreeEditingBg: #caf1ff; //#c6e3ff;
|
$colorItemTreeEditingBg: #caf1ff;
|
||||||
$colorItemTreeEditingFg: $colorEditAreaFg;
|
$colorItemTreeEditingFg: $colorEditAreaFg;
|
||||||
$colorItemTreeVC: $colorBodyFg;
|
$colorItemTreeVC: $colorBodyFg;
|
||||||
|
$colorItemTreeVCHover: $colorKey;
|
||||||
$colorItemTreeSelectedVC: $colorBodyBg;
|
$colorItemTreeSelectedVC: $colorBodyBg;
|
||||||
$shdwItemTreeIcon: none;
|
$shdwItemTreeIcon: none;
|
||||||
|
|
||||||
@ -194,4 +198,4 @@ $colorAboutLink: #84b3ff;
|
|||||||
|
|
||||||
// Loading
|
// Loading
|
||||||
$colorLoadingFg: $colorAlt1;
|
$colorLoadingFg: $colorAlt1;
|
||||||
$colorLoadingBg: rgba($colorLoadingFg, 0.1);
|
$colorLoadingBg: rgba($colorLoadingFg, 0.1);
|
||||||
|
|||||||
@ -3,10 +3,10 @@
|
|||||||
@include boxShdw($shdwBtns);
|
@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 containerSubtle($bg, $fg);
|
||||||
@include btnBase($bg, $bgHov, $fg, $ic);
|
@include btnBase($bg, $bgHovColor, $fg, $ic);
|
||||||
@include text-shadow($shdwItemText);
|
text-shadow: $shdwItemText;
|
||||||
}
|
}
|
||||||
|
|
||||||
@function pullForward($c: $colorBodyBg, $p: 20%) {
|
@function pullForward($c: $colorBodyBg, $p: 20%) {
|
||||||
|
|||||||
@ -20,10 +20,7 @@
|
|||||||
* at runtime from the About dialog for additional information.
|
* at runtime from the About dialog for additional information.
|
||||||
*****************************************************************************/
|
*****************************************************************************/
|
||||||
|
|
||||||
@import "compass";
|
@import "bourbon";
|
||||||
@import "compass/reset";
|
|
||||||
@import "compass/css3";
|
|
||||||
@import "compass/utilities";
|
|
||||||
|
|
||||||
@import "../../../../general/res/sass/_mixins";
|
@import "../../../../general/res/sass/_mixins";
|
||||||
@import "../../../../general/res/sass/mobile/mixins";
|
@import "../../../../general/res/sass/mobile/mixins";
|
||||||
|
|||||||
@ -1,4 +0,0 @@
|
|||||||
date
|
|
||||||
|
|
||||||
echo "*** Compiling sass"
|
|
||||||
compass compile --force
|
|
||||||
@ -23,7 +23,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.s-title {
|
&.s-title {
|
||||||
@include text-shadow(rgba(black, 0.1) 0 1px 2px);
|
text-shadow: rgba(black, 0.1) 0 1px 2px;
|
||||||
}
|
}
|
||||||
&.duration {
|
&.duration {
|
||||||
left: auto;
|
left: auto;
|
||||||
|
|||||||
@ -36,8 +36,8 @@
|
|||||||
.bar {
|
.bar {
|
||||||
color: $colorGanttBarFg;
|
color: $colorGanttBarFg;
|
||||||
@include activityBg($colorGanttBarBg);
|
@include activityBg($colorGanttBarBg);
|
||||||
@include border-radius($br);
|
border-radius: $br;
|
||||||
@include box-shadow($shdwGanttBar);
|
box-shadow: $shdwGanttBar;
|
||||||
&.expanded {
|
&.expanded {
|
||||||
@include border-top-radius($br);
|
@include border-top-radius($br);
|
||||||
@include border-bottom-radius(0);
|
@include border-bottom-radius(0);
|
||||||
@ -145,7 +145,7 @@
|
|||||||
.s-status-editing .s-swimlane {
|
.s-status-editing .s-swimlane {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
.t-object-label {
|
.t-object-label {
|
||||||
@include border-radius($controlCr);
|
border-radius: $controlCr;
|
||||||
cursor: move;
|
cursor: move;
|
||||||
padding: 2px 5px;
|
padding: 2px 5px;
|
||||||
&:hover {
|
&:hover {
|
||||||
|
|||||||
@ -62,7 +62,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.l-timeline-resource-legend {
|
&.l-timeline-resource-legend {
|
||||||
@include box-sizing(border-box);
|
box-sizing: border-box;
|
||||||
padding: $interiorMargin 0;
|
padding: $interiorMargin 0;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
||||||
@ -214,7 +214,7 @@
|
|||||||
|
|
||||||
.l-hover-btns-holder {
|
.l-hover-btns-holder {
|
||||||
@include absPosDefault();
|
@include absPosDefault();
|
||||||
@include box-sizing(border-box);
|
box-sizing: border-box;
|
||||||
@include trans-prop-nice-fade(500ms);
|
@include trans-prop-nice-fade(500ms);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
height: $timelineTopPaneHeaderH;
|
height: $timelineTopPaneHeaderH;
|
||||||
@ -230,7 +230,7 @@
|
|||||||
text-wrap: none;
|
text-wrap: none;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
.l-col {
|
.l-col {
|
||||||
@include box-sizing(border-box);
|
box-sizing: border-box;
|
||||||
@include ellipsize();
|
@include ellipsize();
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@ -257,8 +257,8 @@
|
|||||||
&.l-title {
|
&.l-title {
|
||||||
width: $timelineColTitleW;
|
width: $timelineColTitleW;
|
||||||
.rep-object-label[draggable="true"] {
|
.rep-object-label[draggable="true"] {
|
||||||
@include border-radius($basicCr);
|
border-radius: $basicCr;
|
||||||
@include single-transition(background-color, 0.25s);
|
@include transition(background-color, 0.25s);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0 $interiorMarginSm;
|
padding: 0 $interiorMarginSm;
|
||||||
|
|||||||
@ -19,9 +19,7 @@
|
|||||||
* this source code distribution or the Licensing information page available
|
* this source code distribution or the Licensing information page available
|
||||||
* at runtime from the About dialog for additional information.
|
* at runtime from the About dialog for additional information.
|
||||||
*****************************************************************************/
|
*****************************************************************************/
|
||||||
@import "compass";
|
@import "bourbon";
|
||||||
@import "compass/css3";
|
|
||||||
@import "compass/utilities";
|
|
||||||
|
|
||||||
@import "../../../../commonUI/general/res/sass/constants";
|
@import "../../../../commonUI/general/res/sass/constants";
|
||||||
@import "../../../../commonUI/general/res/sass/mixins";
|
@import "../../../../commonUI/general/res/sass/mixins";
|
||||||
|
|||||||
@ -19,9 +19,7 @@
|
|||||||
* this source code distribution or the Licensing information page available
|
* this source code distribution or the Licensing information page available
|
||||||
* at runtime from the About dialog for additional information.
|
* at runtime from the About dialog for additional information.
|
||||||
*****************************************************************************/
|
*****************************************************************************/
|
||||||
@import "compass";
|
@import "bourbon";
|
||||||
@import "compass/css3";
|
|
||||||
@import "compass/utilities";
|
|
||||||
|
|
||||||
@import "../../../../commonUI/general/res/sass/constants";
|
@import "../../../../commonUI/general/res/sass/constants";
|
||||||
@import "../../../../commonUI/general/res/sass/mixins";
|
@import "../../../../commonUI/general/res/sass/mixins";
|
||||||
|
|||||||
@ -19,9 +19,7 @@
|
|||||||
* this source code distribution or the Licensing information page available
|
* this source code distribution or the Licensing information page available
|
||||||
* at runtime from the About dialog for additional information.
|
* at runtime from the About dialog for additional information.
|
||||||
*****************************************************************************/
|
*****************************************************************************/
|
||||||
@import "compass";
|
@import "bourbon";
|
||||||
@import "compass/css3";
|
|
||||||
@import "compass/utilities";
|
|
||||||
|
|
||||||
@import "../../../../commonUI/general/res/sass/constants";
|
@import "../../../../commonUI/general/res/sass/constants";
|
||||||
@import "../../../../commonUI/general/res/sass/mixins";
|
@import "../../../../commonUI/general/res/sass/mixins";
|
||||||
@ -29,4 +27,4 @@
|
|||||||
@import "../../../../commonUI/themes/espresso/res/sass/mixins";
|
@import "../../../../commonUI/themes/espresso/res/sass/mixins";
|
||||||
@import "constants";
|
@import "constants";
|
||||||
@import "activities";
|
@import "activities";
|
||||||
@import "timelines";
|
@import "timelines";
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user