ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-19 15:43:48 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

[Frontend] Manual update of platform css, fonts and sass only from open-master

Browse Source 
WTD-1170
This commit is contained in:
Charles Hacskaylo
2015-06-18 09:46:54 -07:00
parent 897433f717
commit 0949ada734
22 changed files with 1382 additions and 1051 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
platform/commonUI/general/res/css/forms.css
View File

@ -61,6 +61,15 @@
* 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.
*****************************************************************************/ *****************************************************************************/
/*
@mixin invokeMenu($baseColor: $colorBodyFg) {
$c: $baseColor;
color: $c;
&:hover {
color: lighten($c, $ltGamma);
}
}
*/
/***************************************************************************** /*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government * Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space * as represented by the Administrator of the National Aeronautics and Space
@ -186,9 +195,9 @@
color: #666666; } color: #666666; }
/* line 116, ../sass/forms/_elems.scss */ /* line 116, ../sass/forms/_elems.scss */
.form .form-row .selector-list { .form .form-row .selector-list {
-moz-border-radius: 3px; -moz-border-radius: 2px;
-webkit-border-radius: 3px; -webkit-border-radius: 2px;
border-radius: 3px; border-radius: 2px;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
@ -225,9 +234,9 @@ label.form-control.checkbox input {
vertical-align: top; } vertical-align: top; }
/* line 159, ../sass/forms/_elems.scss */ /* line 159, ../sass/forms/_elems.scss */
.l-result div.s-hint { .l-result div.s-hint {
-moz-border-radius: 3px; -moz-border-radius: 2px;
-webkit-border-radius: 3px; -webkit-border-radius: 2px;
border-radius: 3px; border-radius: 2px;
background: rgba(255, 153, 0, 0.8); background: rgba(255, 153, 0, 0.8);
display: block; display: block;
color: #ffd699; color: #ffd699;
@ -258,9 +267,9 @@ label.form-control.checkbox input {
.edit-main textarea { .edit-main textarea {
-moz-appearance: none; -moz-appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
-moz-border-radius: 3px; -moz-border-radius: 2px;
-webkit-border-radius: 3px; -webkit-border-radius: 2px;
border-radius: 3px; border-radius: 2px;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
@ -305,9 +314,9 @@ label.form-control.checkbox input {
input[type="text"] { input[type="text"] {
-moz-appearance: none; -moz-appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
-moz-border-radius: 3px; -moz-border-radius: 2px;
-webkit-border-radius: 3px; -webkit-border-radius: 2px;
border-radius: 3px; border-radius: 2px;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
@ -350,23 +359,23 @@ input[type="text"] {
*****************************************************************************/ *****************************************************************************/
/* line 22, ../sass/forms/_selects.scss */ /* line 22, ../sass/forms/_selects.scss */
.form-control.select { .form-control.select {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRkNGQ0ZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQwNDA0MCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%; background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4d4d4d), color-stop(100%, #404040)); background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #525252), color-stop(100%, #454545));
background-image: -moz-linear-gradient(#4d4d4d, #404040); background-image: -moz-linear-gradient(#525252, #454545);
background-image: -webkit-linear-gradient(#4d4d4d, #404040); background-image: -webkit-linear-gradient(#525252, #454545);
background-image: linear-gradient(#4d4d4d, #404040); background-image: linear-gradient(#525252, #454545);
-moz-border-radius: 3px; -moz-border-radius: 2px;
-webkit-border-radius: 3px; -webkit-border-radius: 2px;
border-radius: 3px; border-radius: 2px;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
border: none; border: none;
border-top: 1px solid #666666; border-top: 1px solid #575757;
color: #999; color: #999;
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
@ -374,14 +383,21 @@ input[type="text"] {
margin: 0 0 2px 2px; margin: 0 0 2px 2px;
overflow: hidden; overflow: hidden;
position: relative; } position: relative; }
/* line 173, ../sass/_mixins.scss */ /* line 152, ../sass/_mixins.scss */
.form-control.select:not(.disabled):hover { .form-control.select:not(.disabled):hover {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzRkNGQ0ZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%; background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #666666), color-stop(100%, #4d4d4d)); background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #636363), color-stop(100%, #575757));
background-image: -moz-linear-gradient(#666666, #4d4d4d); background-image: -moz-linear-gradient(#636363, #575757);
background-image: -webkit-linear-gradient(#666666, #4d4d4d); background-image: -webkit-linear-gradient(#636363, #575757);
background-image: linear-gradient(#666666, #4d4d4d); } background-image: linear-gradient(#636363, #575757);
color: #bdbdbd; }
/* line 155, ../sass/_mixins.scss */
.form-control.select:not(.disabled):hover.btn-menu .invoke-menu {
color: #878787; }
/* line 160, ../sass/_mixins.scss */
.form-control.select.btn-menu .invoke-menu {
color: #757575; }
/* line 29, ../sass/forms/_selects.scss */ /* line 29, ../sass/forms/_selects.scss */
.form-control.select select { .form-control.select select {
-moz-appearance: none; -moz-appearance: none;
@ -438,9 +454,9 @@ input[type="text"] {
.channel-selector .treeview { .channel-selector .treeview {
-moz-appearance: none; -moz-appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
-moz-border-radius: 3px; -moz-border-radius: 2px;
-webkit-border-radius: 3px; -webkit-border-radius: 2px;
border-radius: 3px; border-radius: 2px;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;

101
platform/commonUI/general/res/css/items.css
View File

@ -61,6 +61,15 @@
* 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.
*****************************************************************************/ *****************************************************************************/
/*
@mixin invokeMenu($baseColor: $colorBodyFg) {
$c: $baseColor;
color: $c;
&:hover {
color: lighten($c, $ltGamma);
}
}
*/
/***************************************************************************** /*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government * Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space * as represented by the Administrator of the National Aeronautics and Space
@ -92,23 +101,23 @@
top: 0; } top: 0; }
/* line 29, ../sass/items/_item.scss */ /* line 29, ../sass/items/_item.scss */
.items-holder .item.grid-item { .items-holder .item.grid-item {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzRkNGQ0ZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVlNWU1ZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%; background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #595959), color-stop(100%, #4d4d4d)); background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5e5e5e), color-stop(100%, #525252));
background-image: -moz-linear-gradient(#595959, #4d4d4d); background-image: -moz-linear-gradient(#5e5e5e, #525252);
background-image: -webkit-linear-gradient(#595959, #4d4d4d); background-image: -webkit-linear-gradient(#5e5e5e, #525252);
background-image: linear-gradient(#595959, #4d4d4d); background-image: linear-gradient(#5e5e5e, #525252);
-moz-border-radius: 3px; -moz-border-radius: 2px;
-webkit-border-radius: 3px; -webkit-border-radius: 2px;
border-radius: 3px; border-radius: 2px;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
border: none; border: none;
border-top: 1px solid #737373; border-top: 1px solid #636363;
color: #999; color: #999;
display: inline-block; display: inline-block;
box-sizing: border-box; box-sizing: border-box;
@ -119,14 +128,21 @@
margin-bottom: 3px; margin-bottom: 3px;
margin-right: 3px; margin-right: 3px;
position: relative; } position: relative; }
/* line 173, ../sass/_mixins.scss */ /* line 152, ../sass/_mixins.scss */
.items-holder .item.grid-item:not(.disabled):hover { .items-holder .item.grid-item:not(.disabled):hover {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzczNzM3MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzcwNzA3MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%; background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #737373), color-stop(100%, #595959)); background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #707070), color-stop(100%, #636363));
background-image: -moz-linear-gradient(#737373, #595959); background-image: -moz-linear-gradient(#707070, #636363);
background-image: -webkit-linear-gradient(#737373, #595959); background-image: -webkit-linear-gradient(#707070, #636363);
background-image: linear-gradient(#737373, #595959); } background-image: linear-gradient(#707070, #636363);
color: #bdbdbd; }
/* line 155, ../sass/_mixins.scss */
.items-holder .item.grid-item:not(.disabled):hover.btn-menu .invoke-menu {
color: #949494; }
/* line 160, ../sass/_mixins.scss */
.items-holder .item.grid-item.btn-menu .invoke-menu {
color: #828282; }
/* line 42, ../sass/items/_item.scss */ /* line 42, ../sass/items/_item.scss */
.items-holder .item.grid-item:hover .item-main .item-type { .items-holder .item.grid-item:hover .item-main .item-type {
color: #0099cc !important; } color: #0099cc !important; }
@ -184,40 +200,41 @@
font-size: 0.8em; } font-size: 0.8em; }
/* line 104, ../sass/items/_item.scss */ /* line 104, ../sass/items/_item.scss */
.items-holder .item.grid-item.selected { .items-holder .item.grid-item.selected {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwYWNlNiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBhYzJmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwYjRmMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%; background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #00bfff), color-stop(100%, #00ace6)); background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0ac2ff), color-stop(100%, #00b4f0));
background-image: -moz-linear-gradient(#00bfff, #00ace6); background-image: -moz-linear-gradient(#0ac2ff, #00b4f0);
background-image: -webkit-linear-gradient(#00bfff, #00ace6); background-image: -webkit-linear-gradient(#0ac2ff, #00b4f0);
background-image: linear-gradient(#00bfff, #00ace6); background-image: linear-gradient(#0ac2ff, #00b4f0);
-moz-border-radius: 3px; -moz-border-radius: 2px;
-webkit-border-radius: 3px; -webkit-border-radius: 2px;
border-radius: 3px; border-radius: 2px;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
border: none; border: none;
border-top: 1px solid #33ccff; border-top: 1px solid #14c4ff;
color: #999; color: #999;
display: inline-block; display: inline-block;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzMzY2NmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwOTljYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #33ccff), color-stop(100%, #0099cc));
background-image: -moz-linear-gradient(#33ccff, #0099cc);
background-image: -webkit-linear-gradient(#33ccff, #0099cc);
background-image: linear-gradient(#33ccff, #0099cc);
color: #80dfff; } color: #80dfff; }
/* line 181, ../sass/_mixins.scss */ /* line 152, ../sass/_mixins.scss */
.items-holder .item.grid-item.selected:not(.disabled):hover { .items-holder .item.grid-item.selected:not(.disabled):hover {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2ZDlmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwYmZmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJlY2JmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzE0YzRmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%; background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #66d9ff), color-stop(100%, #00bfff)); background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #2ecbff), color-stop(100%, #14c4ff));
background-image: -moz-linear-gradient(#66d9ff, #00bfff); background-image: -moz-linear-gradient(#2ecbff, #14c4ff);
background-image: -webkit-linear-gradient(#66d9ff, #00bfff); background-image: -webkit-linear-gradient(#2ecbff, #14c4ff);
background-image: linear-gradient(#66d9ff, #00bfff); } background-image: linear-gradient(#2ecbff, #14c4ff);
color: #bdbdbd; }
/* line 155, ../sass/_mixins.scss */
.items-holder .item.grid-item.selected:not(.disabled):hover.btn-menu .invoke-menu {
color: #75ddff; }
/* line 160, ../sass/_mixins.scss */
.items-holder .item.grid-item.selected.btn-menu .invoke-menu {
color: #52d4ff; }
/* line 109, ../sass/items/_item.scss */ /* line 109, ../sass/items/_item.scss */
.items-holder .item.grid-item.selected .item-type, .items-holder .item.grid-item.selected .top-bar .icon:not(.alert) { .items-holder .item.grid-item.selected .item-type, .items-holder .item.grid-item.selected .top-bar .icon:not(.alert) {
color: #80dfff; } color: #80dfff; }

1623
platform/commonUI/general/res/css/theme-espresso.css
View File

File diff suppressed because it is too large Load Diff

32
platform/commonUI/general/res/css/tree.css
View File

@ -61,6 +61,15 @@
* 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.
*****************************************************************************/ *****************************************************************************/
/*
@mixin invokeMenu($baseColor: $colorBodyFg) {
$c: $baseColor;
color: $c;
&:hover {
color: lighten($c, $ltGamma);
}
}
*/
/***************************************************************************** /*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government * Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space * as represented by the Administrator of the National Aeronautics and Space
@ -86,7 +95,7 @@
ul.tree { ul.tree {
margin: 0; margin: 0;
padding: 0; } padding: 0; }
/* line 233, ../sass/_mixins.scss */ /* line 264, ../sass/_mixins.scss */
ul.tree li { ul.tree li {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
@ -97,17 +106,17 @@ ul.tree {
position: relative; } position: relative; }
/* line 27, ../sass/tree/_tree.scss */ /* line 27, ../sass/tree/_tree.scss */
ul.tree li span.tree-item { ul.tree li span.tree-item {
-moz-border-radius: 3px; -moz-border-radius: 2px;
-webkit-border-radius: 3px; -webkit-border-radius: 2px;
border-radius: 3px; border-radius: 2px;
-moz-transition: background-color 0.25s; -moz-transition: background-color 0.25s;
-o-transition: background-color 0.25s; -o-transition: background-color 0.25s;
-webkit-transition: background-color 0.25s; -webkit-transition: background-color 0.25s;
transition: background-color 0.25s; transition: background-color 0.25s;
display: block; display: block;
font-size: 0.80rem; font-size: 0.80rem;
height: 1.5rem; height: 1.4rem;
line-height: 1.5rem; line-height: 1.4rem;
margin-bottom: 3px; margin-bottom: 3px;
position: relative; } position: relative; }
/* line 38, ../sass/tree/_tree.scss */ /* line 38, ../sass/tree/_tree.scss */
@ -168,7 +177,7 @@ ul.tree {
width: auto; width: auto;
height: auto; height: auto;
display: block; display: block;
left: 25px; left: 20px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; } white-space: nowrap; }
@ -207,17 +216,16 @@ ul.tree {
/* line 125, ../sass/tree/_tree.scss */ /* line 125, ../sass/tree/_tree.scss */
ul.tree li span.tree-item:not(.loading) { ul.tree li span.tree-item:not(.loading) {
cursor: pointer; } cursor: pointer; }
/* line 130, ../sass/tree/_tree.scss */ /* line 129, ../sass/tree/_tree.scss */
ul.tree li span.tree-item .context-trigger { ul.tree li span.tree-item .context-trigger {
display: none;
top: -1px; top: -1px;
position: absolute; position: absolute;
right: 3px; } right: 3px; }
/* line 136, ../sass/tree/_tree.scss */ /* line 135, ../sass/tree/_tree.scss */
ul.tree li span.tree-item .context-trigger .btn-invoke-menu { ul.tree li span.tree-item .context-trigger .invoke-menu {
font-size: 0.75em; font-size: 0.75em;
height: 0.9rem; height: 0.9rem;
line-height: 0.9rem; } line-height: 0.9rem; }
/* line 145, ../sass/tree/_tree.scss */ /* line 144, ../sass/tree/_tree.scss */
ul.tree ul.tree { ul.tree ul.tree {
margin-left: 15px; } margin-left: 15px; }

BIN
platform/commonUI/general/res/fonts/symbols/wtdsymbols.eot
View File

Binary file not shown.

5
platform/commonUI/general/res/fonts/symbols/wtdsymbols.svg
View File

@ -2,7 +2,7 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" > <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg> <svg>
<metadata> <metadata>
Created by FontForge 20090622 at Fri Jun 5 15:37:46 2015 Created by FontForge 20090622 at Tue Jun 9 23:00:40 2015
By deploy user By deploy user
Copyright 2015 Adobe Systems Incorporated. All rights reserved. Copyright 2015 Adobe Systems Incorporated. All rights reserved.
</metadata> </metadata>
@ -245,6 +245,9 @@ z" />
d="M216 375l187 -187h-309q-38 0 -66 27.5t-28 66.5v375q0 38 28 66t66 28h375q39 0 66.5 -28t27.5 -66v-309l-188 187zM751 422v-422h-422v94h234l-281 281l93 94l282 -281v234h94z" /> d="M216 375l187 -187h-309q-38 0 -66 27.5t-28 66.5v375q0 38 28 66t66 28h375q39 0 66.5 -28t27.5 -66v-309l-188 187zM751 422v-422h-422v94h234l-281 281l93 94l282 -281v234h94z" />
<glyph glyph-name="ocircumflex" unicode="&#xf4;" horiz-adv-x="751" <glyph glyph-name="ocircumflex" unicode="&#xf4;" horiz-adv-x="751"
d="M610 751q58 0 99.5 -41.5t41.5 -99.5v-469q0 -59 -41.5 -100t-99.5 -41h-469q-59 0 -100 41t-41 100v469q0 58 41 99.5t100 41.5h469zM610 282v328h-328l93 -94l-234 -375l375 234z" /> d="M610 751q58 0 99.5 -41.5t41.5 -99.5v-469q0 -59 -41.5 -100t-99.5 -41h-469q-59 0 -100 41t-41 100v469q0 58 41 99.5t100 41.5h469zM610 282v328h-328l93 -94l-234 -375l375 234z" />
<glyph glyph-name="otilde" unicode="&#xf5;" horiz-adv-x="657"
d="M329 657q136 0 232 -96t96 -232t-96 -232.5t-232 -96.5q-137 0 -233 96t-96 233q0 136 96.5 232t232.5 96zM329 329v246q-101 0 -175 -72zM422 704q0 -20 -13.5 -33.5t-33.5 -13.5h-46h-47q-20 0 -33.5 13.5t-13.5 33.5t13.5 33.5t33.5 13.5h93q20 0 33.5 -13.5
t13.5 -33.5z" />
<glyph glyph-name="odieresis" unicode="&#xf6;" <glyph glyph-name="odieresis" unicode="&#xf6;"
d="M328 562v-375h-328v375h328zM750 562v-375h-328v375h328z" /> d="M328 562v-375h-328v375h328zM750 562v-375h-328v375h328z" />
<glyph glyph-name="fraction" unicode="&#x2044;" horiz-adv-x="761" <glyph glyph-name="fraction" unicode="&#x2044;" horiz-adv-x="761"

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 24 KiB

BIN
platform/commonUI/general/res/fonts/symbols/wtdsymbols.ttf
View File

Binary file not shown.

BIN
platform/commonUI/general/res/fonts/symbols/wtdsymbols.woff
View File

Binary file not shown.

19
platform/commonUI/general/res/sass/_constants.scss
View File

@ -28,8 +28,8 @@ $bodyMargin: 10px;
$interiorMargin: 5px; $interiorMargin: 5px;
$interiorMarginLg: $interiorMargin * 2; $interiorMarginLg: $interiorMargin * 2;
$interiorMarginSm: 3px; $interiorMarginSm: 3px;
$basicCr: 3px; $basicCr: 2px;
$controlCr: $basicCr; $controlCr: 2px;
$smallCr: 2px; $smallCr: 2px;
$badgeW: 35px; $badgeW: 35px;
@ -62,6 +62,13 @@ $colorInfoBubbleFg: #666;
$colorInfoBubbleBg: #ddd; $colorInfoBubbleBg: #ddd;
$colorThumbsBubbleFg: lighten($colorBodyFg, 10%); $colorThumbsBubbleFg: lighten($colorBodyFg, 10%);
$colorThumbsBubbleBg: lighten($colorBodyBg, 10%); $colorThumbsBubbleBg: lighten($colorBodyBg, 10%);
$colorLimitYellow: #9d7500;
$colorLimitRed: #aa0000;
$colorTelemFresh: #fff;
$colorTelemStale: #888;
$styleTelemState: italic;
$colorInfoBubbleFg: #666;
$colorInfoBubbleBg: #ddd;
// Ratios // Ratios
$ltGamma: 20%; $ltGamma: 20%;
@ -119,7 +126,7 @@ $controlDisabledOpacity: 0.3;
$formLabelW: 20%; $formLabelW: 20%;
$formInputH: 22px; $formInputH: 22px;
$formRowCtrlsH: 14px; $formRowCtrlsH: 14px;
$menuLineH: 1.5rem; $menuLineH: 1.4rem;
$scrollbarTrackSize: 10px; $scrollbarTrackSize: 10px;
$scrollbarTrackColorBg: rgba(#000, 0.4); $scrollbarTrackColorBg: rgba(#000, 0.4);
$btnStdH: 25px; $btnStdH: 25px;
@ -145,3 +152,9 @@ $imageThumbPad: 1px;
// Bubbles // Bubbles
$bubbleArwSize: 10px; $bubbleArwSize: 10px;
$bubblePad: $interiorMargin; $bubblePad: $interiorMargin;
$bubbleMinW: 100px;
$bubbleMaxW: 300px;
// Timing
$controlFadeMs: 100ms;

4
platform/commonUI/general/res/sass/_global.scss
View File

@ -69,6 +69,10 @@ span {
*/ */
} }
mct-container {
display: block;
}
.abs { .abs {
position: absolute; position: absolute;
top: 0; top: 0;

2
platform/commonUI/general/res/sass/_hide-non-functional.scss
View File

@ -36,7 +36,7 @@
// Don't pad in from top and bottom // Don't pad in from top and bottom
//top: 0; bottom: 0; //top: 0; bottom: 0;
.object-browse-bar { .object-browse-bar {
.t-btn.key-window { .btn.key-window {
// Hide the Open in New Window button // Hide the Open in New Window button
display: none; display: none;
} }

35
platform/commonUI/general/res/sass/_icons.scss
View File

@ -42,12 +42,6 @@
&.major { &.major {
font-size: 1.65em; font-size: 1.65em;
} }
&:hover {
// color: lighten($c, $ltGamma);
.invoke-menu {
// color: lighten($colorBodyBg, $ltGamma * 2);
}
}
} }
} }
@ -56,36 +50,35 @@
} }
.invoke-menu { .invoke-menu {
@include invokeMenu($colorKey); //@include invokeMenu(); // $colorKey
text-shadow: none;
display: inline-block; display: inline-block;
font-size: 1rem; font-size: 0.8rem;
vertical-align: middle; vertical-align: middle;
} }
.btn-menu .invoke-menu, .btn-menu .invoke-menu,
.icon.major .invoke-menu { .icon.major .invoke-menu {
margin-left: $interiorMargin; margin-left: $interiorMarginSm;
}
.icon-buttons-main .invoke-menu {
@include invokeMenu(lighten($colorBodyBg, $ltGamma));
}
.menu-element .invoke-menu {
} }
/*
.object-header .type-icon { .object-header .type-icon {
color: $colorKey; color: $colorKey;
margin-right: $interiorMargin; margin-right: $interiorMarginSm;
} }
*/
.menu .type-icon, .menu .type-icon,
.tree-item .type-icon, .tree-item .type-icon,
.icon-btn .menu.dropdown .icon, .super-menu.menu .type-icon {
.super-menu.menu.dropdown .icon { font-size: $menuLineH * 0.8; //.93
font-size: $menuLineH * 0.93;
line-height: $menuLineH * 1.13; line-height: $menuLineH * 1.13;
position: absolute; position: absolute;
} }
.super-menu.menu.dropdown .icon {
font-size: $menuLineH * 0.95
}

2
platform/commonUI/general/res/sass/_main.scss
View File

@ -45,7 +45,9 @@
@import "controls/controls"; @import "controls/controls";
@import "controls/lists"; @import "controls/lists";
@import "controls/menus"; @import "controls/menus";
@import "controls/time-controller";
@import "features/imagery"; @import "features/imagery";
@import "features/time-display";
@import "forms/mixins"; @import "forms/mixins";
@import "forms/elems"; @import "forms/elems";
@import "forms/validation"; @import "forms/validation";

63
platform/commonUI/general/res/sass/_mixins.scss
View File

@ -26,6 +26,16 @@
width: auto; height: auto; width: auto; height: auto;
} }
@mixin trans-prop-nice($props, $t) {
@if $t == 0 {
@include transition-property(none);
} @else {
@include transition-property($props);
@include transition-duration($t);
@include transition-timing-function(ease-in-out);
}
}
@mixin trans-prop-nice-fade($t: 0.5s) { @mixin trans-prop-nice-fade($t: 0.5s) {
@if $t == 0 { @if $t == 0 {
@include transition-property(none); @include transition-property(none);
@ -42,6 +52,12 @@
@include transition-timing-function(ease-in-out); @include transition-timing-function(ease-in-out);
} }
@mixin trans-prop-nice-resize-w($t: 0.5s) {
@include transition-property(width, left, right);
@include transition-duration($t);
@include transition-timing-function(ease-in-out);
}
@mixin triangle-right($size, $color) { @mixin triangle-right($size, $color) {
$size: $size/2; $size: $size/2;
$ratio: 1; $ratio: 1;
@ -115,21 +131,36 @@
} }
@mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $hover: false) { @mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $hover: false) {
@include background-image(linear-gradient(lighten($bg, 10%), lighten($bg, 5%))); $ltnRatio: 7%;
$gradRatio: 5%;
$hovRatio: 7%;
$bgBase: lighten($bg, $ltnRatio);
$fgBase: lighten($fg, $ltnRatio);
$gradC1: lighten($bgBase, $gradRatio);
$gradC2: $bgBase;
$cInvokeBase: lighten($gradC1, $ltnRatio*2);
@include background-image(linear-gradient($gradC1, $gradC2));
@include border-radius($controlCr); @include border-radius($controlCr);
@include box-sizing(border-box); @include box-sizing(border-box);
// @include box-shadow(rgba(black, 0.3) 0 1px 2px);
@include boxShdwSubtle(); @include boxShdwSubtle();
border: none; border: none;
border-top: 1px solid lighten($bg, 20%); border-top: 1px solid lighten($gradC1, 2%);
color: $fg; color: $fg;
display: inline-block; display: inline-block;
@if $hover == true { @if $hover == true {
&:hover { &:not(.disabled):hover {
@include background-image(linear-gradient(lighten($bg, 20%), lighten($bg, 15%))); @include background-image(linear-gradient(lighten($gradC1, $hovRatio), lighten($gradC2, $hovRatio)));
color: lighten($fgBase, $hovRatio);
&.btn-menu .invoke-menu {
color: lighten($cInvokeBase, $hovRatio);
} }
} }
} }
&.btn-menu .invoke-menu {
color: $cInvokeBase;
}
}
@mixin sliderTrack($bg: $scrollbarTrackColorBg) { @mixin sliderTrack($bg: $scrollbarTrackColorBg) {
$b: 1px solid lighten($bg, 30%); $b: 1px solid lighten($bg, 30%);
@ -169,18 +200,16 @@
} }
@mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg) { @mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg) {
@include containerSubtle($bg, $fg); @include containerSubtle($bg, $fg, true);
&:not(.disabled):hover {
@include background-image(linear-gradient(lighten($bg, 20%), lighten($bg, 10%)));
}
} }
@mixin btnNoticeable($bg: $colorBodyBg, $fg: $colorBodyFg) { @mixin btnNoticeable($bg: $colorBodyBg, $fg: $colorBodyFg) {
@include containerSubtle($bg, $fg); // No longer should be used; use btnSubtle instead
@include background-image(linear-gradient(lighten($bg, 20%), $bg)); //@include containerSubtle($bg, $fg, true);
&:not(.disabled):hover { //@include background-image(linear-gradient(lighten($bg, 20%), $bg));
/* &:not(.disabled):hover {
@include background-image(linear-gradient(lighten($bg, 30%), lighten($bg, 10%))); @include background-image(linear-gradient(lighten($bg, 30%), lighten($bg, 10%)));
} }*/
} }
@mixin boxIncised($sVal: 0.6) { @mixin boxIncised($sVal: 0.6) {
@ -191,8 +220,8 @@
border: 1px solid $c; border: 1px solid $c;
} }
@mixin boxShdwSubtle($sVal: 0.3) { @mixin boxShdwSubtle($sVal: 0.2) {
@include box-shadow(rgba(black, $sVal) 0 1px 3px); @include box-shadow(rgba(black, $sVal) 0 1px 2px);
} }
@mixin boxShdwLarge($sVal: 0.7) { @mixin boxShdwLarge($sVal: 0.7) {
@ -219,13 +248,15 @@
} }
@mixin invokeMenu($baseColor) { /*
@mixin invokeMenu($baseColor: $colorBodyFg) {
$c: $baseColor; $c: $baseColor;
color: $c; color: $c;
&:hover { &:hover {
color: lighten($c, $ltGamma); color: lighten($c, $ltGamma);
} }
} }
*/
@mixin menuUlReset() { @mixin menuUlReset() {
margin: 0; margin: 0;

70
platform/commonUI/general/res/sass/controls/_buttons.scss
View File

@ -19,20 +19,65 @@
* 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.
*****************************************************************************/ *****************************************************************************/
$pad: $interiorMargin * 1.5; $baseRatio: 1.5;
$pad: $interiorMargin * $baseRatio;
/*********************************** TYPE STYLES */ /******* LAYOUT AND SIZING */
.t-btn { .btn,
cursor: pointer; .l-btn {
line-height: 1.25em;
padding: 0 $pad;
text-decoration: none;
&.lg,
&.create-btn {
$h: $ueTopBarH - $interiorMargin;
height: $h;
line-height: $h;
padding: 0 $pad * 3;
}
&.create-btn {
.menu {
margin-left: $pad * -1;
}
>.ui-symbol {
font-size: 1.1em;
}
}
&.sm {
padding: 0 $pad / $baseRatio;
}
&.vsm {
padding: 0 ($pad / $baseRatio) / 2;
}
} }
/*********************************** STYLE STYLES */ /*********************************** STYLE STYLES */
.btn,
.s-btn { .s-btn {
$base: lighten($colorBodyBg, 20%); // Moved to s-btn
@include border-radius($controlCr); @include border-radius($controlCr);
@include box-sizing(border-box); @include box-sizing(border-box);
@include text-shadow(rgba(black, 0.3) 0 1px 1px); @include text-shadow(rgba(black, 0.3) 0 1px 1px);
cursor: pointer;
line-height: 1.2em; line-height: 1.2em;
text-decoration: none; text-decoration: none;
&.major {
$bg: $colorKey;
@include btnSubtle($bg);
$fg: lighten($bg, 50%);
color: $fg;
&:hover {
@include btnSubtle(lighten($bg, 5%), $fg);
//color: $fg;
}
.invoke-menu {
color: $fg;
}
}
&.subtle {
@include btnSubtle($base, lighten($base, 40%));
}
&.very-subtle,
&.s-very-subtle { &.s-very-subtle {
@include containerSubtle($colorBodyBg, $colorBodyFg, true); @include containerSubtle($colorBodyBg, $colorBodyFg, true);
&.paused { &.paused {
@ -44,9 +89,10 @@ $pad: $interiorMargin * 1.5;
} }
} }
.icon-btn,
.s-icon-btn { .s-icon-btn {
@extend .s-btn; @extend .s-btn;
font-size: 1.2em; font-size: 1em;
.icon { .icon {
color: $colorKey; color: $colorKey;
} }
@ -93,19 +139,13 @@ $pad: $interiorMargin * 1.5;
} }
/*********************************** LAYOUT STYLES */ /*********************************** LAYOUT STYLES */
span.btn,
span.btn span,
span.l-btn, span.l-btn,
span.l-btn span, span.l-btn span,
a.btn,
a.btn span,
a.l-btn, a.l-btn,
a.l-btn span { a.l-btn span {
display: inline-block; display: inline-block;
} }
.l-btn {
padding: 0 $pad;
&.sm {
padding: 0 $interiorMargin;
}
&.vsm {
padding: 0 $interiorMargin/2;
}
}

140
platform/commonUI/general/res/sass/controls/_controls.scss
View File

@ -19,7 +19,8 @@
* 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.
*****************************************************************************/ *****************************************************************************/
.control { /*.control {
// UNUSED?
&.view-control { &.view-control {
.icon { .icon {
display: inline-block; display: inline-block;
@ -45,7 +46,7 @@
} }
} }
} }
} }*/
.accordion { .accordion {
$accordionHeadH: 18px; $accordionHeadH: 18px;
@ -64,8 +65,12 @@
margin-bottom: $interiorMargin; margin-bottom: $interiorMargin;
padding: 0 $interiorMargin; padding: 0 $interiorMargin;
position: absolute; position: absolute;
top: 0; right: 0; bottom: auto; left: 0; top: 0;
width: auto; height: $accordionHeadH; right: 0;
bottom: auto;
left: 0;
width: auto;
height: $accordionHeadH;
text-transform: uppercase; text-transform: uppercase;
&:hover { &:hover {
background: rgba($colorBodyFg, $op * 2); background: rgba($colorBodyFg, $op * 2);
@ -86,80 +91,15 @@
} }
.accordion-contents { .accordion-contents {
position: absolute; position: absolute;
top: $accordionHeadH + $interiorMargin; right: 0; bottom: 0; left: 0; top: $accordionHeadH + $interiorMargin;
right: 0;
bottom: 0;
left: 0;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
} }
} }
.btn {
$base: lighten($colorBodyBg, 20%); // Moved to s-btn
$p: 10px; // Moved to s-btn
@include border-radius($controlCr); // Moved to s-btn
@include box-sizing(border-box); // Moved to s-btn
@include text-shadow(rgba(black, 0.3) 0 1px 1px); // Moved to s-btn
// display: inline-block;
// margin-right: 10px;
padding: 0 ($interiorMargin * 2); // Moved to s-btn
text-decoration: none; // Moved to s-btn
&.create-btn {
$h: $ueTopBarH - $interiorMargin; //$btnStdH * 1.5;;
$p: $p * 2.25;
height: $h;
line-height: $h;
//font-size: 1.1em;
padding: 0 $p;
.menu {
margin-left: $p * -1;
}
.ui-symbol.major {
font-size: 1.1em;
}
}
&.major {
$bg: $colorKey;
@include btnNoticeable($bg);
$fg: lighten($bg, 50%);
color: $fg;
&:hover {
@include btnNoticeable(lighten($bg, 5%));
color: $fg;
}
.invoke-menu {
color: $fg;
}
}
&.normal {
padding: $p * 0.5 $p * 0.7;
}
&.outline {
&:hover {
background: rgba(#fff, 0.1);
}
}
&.subtle {
@include btnSubtle($base, lighten($base, 40%));
}
&.very-subtle {
@include btnSubtle($colorBodyBg, lighten($colorBodyBg, 50%));
}
&.lg {
@include border-radius($controlCr * 1.5);
font-size: 1.2em;
padding: 7px 25px;
}
&.icon-btn {
.icon {
color: $colorKey;
}
&:not(.disabled):hover .icon {
color: lighten($colorKey, $ltGamma);
}
}
}
.btn-bar { .btn-bar {
// position: relative; // position: relative;
.btn, .btn,
@ -204,7 +144,8 @@
// Default position is upper right // Default position is upper right
$p: $interiorMargin; $p: $interiorMargin;
position: absolute; position: absolute;
top: $p; right: $p; top: $p;
right: $p;
z-index: 5; z-index: 5;
} }
@ -331,29 +272,31 @@ label.checkbox.custom {
.btn-menu { .btn-menu {
$h: 20px; $h: 20px;
$p: $interiorMargin * 2; $p: $interiorMarginSm * 2;
$c: $colorBodyFg; $c: $colorBodyFg;
@include btnSubtle($colorBodyBg); @include btnSubtle($colorBodyBg);
height: $h; /* height: $h;
line-height: $h; line-height: $h;
&.dropdown { &.dropdown {
// padding-left: $p;
padding-left: $p; padding-left: $p;
padding-right: $p; padding-right: $p;
} }*/
&:not(.disabled):hover { &:not(.disabled):hover {
color: lighten($c, 20%); color: lighten($c, 20%);
} }
&.btn-invoke-menu { /* &.context-available {
// An element like the invoke-menu triangle;
// Indicates that this element has a dropdown menu available;
// Currently unused
$c: $colorKey; $c: $colorKey;
color: $c; color: $c;
padding: 0 5px; padding: 0 5px;
&:hover { &:hover {
color: lighten($c, 10%); color: lighten($c, 10%);
} }
} }*/
span.l-click-area { span.l-click-area {
// In markup, this element should not enclose anything. // In markup, this element should not enclose anything.
@ -361,7 +304,11 @@ label.checkbox.custom {
} }
.type-icon { .type-icon {
margin-right: $interiorMargin; //margin-right: $interiorMargin;
}
.name {
margin-left: $interiorMargin;
} }
.menu { .menu {
// margin-left: (-1 * $p); // margin-left: (-1 * $p);
@ -401,11 +348,16 @@ label.checkbox.custom {
} }
} }
.view-switcher {
@include trans-prop-nice-fade($controlFadeMs);
}
/******************************************************** OBJECT-HEADER */ /******************************************************** OBJECT-HEADER */
.object-header { .object-header {
display: inline-block; display: inline-block;
font-size: 1em; font-size: 1em;
.title { .label {
.title-label {
color: lighten($colorBodyFg, 40%); color: lighten($colorBodyFg, 40%);
} }
.type-icon { .type-icon {
@ -414,6 +366,7 @@ label.checkbox.custom {
vertical-align: middle; vertical-align: middle;
} }
} }
}
.top-bar, .top-bar,
.object-browse-bar { .object-browse-bar {
@ -425,29 +378,6 @@ label.checkbox.custom {
} }
} }
/******************************************************** VIEW-CONTROLS */
.view-controls .view-type {
$d: 20px;
$p: 5px;
@include border-radius($controlCr);
box-sizing: border-box;
display: inline-block;
margin-left: $interiorMargin;
height: $d;
line-height: $d;
padding-left: $p;
padding-right: $p;
&.cur {
background: lighten($colorBodyBg, $ltGamma);
}
}
.edit-mode .top-bar .control-set.edit-view-controls {
// Used in templates/edit-view-controls.html
margin-right: $interiorMargin * 10;
}
/******************************************************** SLIDERS */ /******************************************************** SLIDERS */
.slider { .slider {

4
platform/commonUI/general/res/sass/controls/_menus.scss
View File

@ -41,7 +41,7 @@
@include box-sizing(border-box); @include box-sizing(border-box);
border-top: 1px solid lighten($bg, 20%); border-top: 1px solid lighten($bg, 20%);
line-height: $menuLineH; line-height: $menuLineH;
padding: $interiorMarginSm $interiorMargin * 2 $interiorMarginSm ($interiorMargin * 3) + $treeTypeIconW; padding: $interiorMarginSm $interiorMargin * 2 $interiorMarginSm ($interiorMargin * 2) + $treeTypeIconW;
white-space: nowrap; white-space: nowrap;
&:first-child { &:first-child {
border: none; border: none;
@ -168,7 +168,7 @@
position: absolute; position: absolute;
height: 200px; height: 200px;
width: 170px; width: 170px;
z-index: 59; z-index: 70;
.context-menu-wrapper { .context-menu-wrapper {
position: absolute; position: absolute;
height: 100%; height: 100%;

44
platform/commonUI/general/res/sass/features/_time-display.scss Normal file
View File

@ -0,0 +1,44 @@
.l-time-display {
$transTime: 200ms;
// Layout
&:hover {
.l-btn.control {
//display: inline-block;
opacity: 1;
}
}
.l-elem-wrapper {
position: relative;
}
.l-elem {
display: inline-block;
}
&.l-timer {
.l-elem.l-value {
@include trans-prop-nice(left, $transTime);
position: absolute;
left: 0;
z-index: 1;
}
&:hover .l-elem.l-value {
left: 20px;
}
}
// Look-and-feel
.l-elem {
.value.active,
&.value.active {
color: $colorKeyFg;
}
}
.l-btn.control {
@include trans-prop-nice-fade($transTime);
//display: none;
opacity: 0;
font-size: 0.9em;
line-height: 1em;
}
}

70
platform/commonUI/general/res/sass/helpers/_bubbles.scss
View File

@ -21,33 +21,16 @@
*****************************************************************************/ *****************************************************************************/
//************************************************* LAYOUT //************************************************* LAYOUT
.l-bubble-wrapper { .l-infobubble-wrapper {
position: absolute; $arwSize: 5px;
z-index: 70; @include box-shadow(rgba(black, 0.4) 0 1px 5px);
.l-bubble { position: relative;
padding: $bubblePad $bubblePad*2; z-index: 50;
.l-btn.close {
padding: 0 2px;
position: absolute;
right: $interiorMargin;
top: $interiorMargin;
}
}
.arw {
position: absolute;
&.arw-up {
bottom: 100%;
}
&.arw-down {
top: 100%;
}
}
.l-infobubble { .l-infobubble {
display: inline-block; display: inline-block;
max-width: 250px; min-width: $bubbleMinW;
//padding: 5px 10px; max-width: $bubbleMaxW;
padding: 5px 10px;
&:before { &:before {
content:""; content:"";
position: absolute; position: absolute;
@ -114,27 +97,17 @@
} }
&.arw-down { &.arw-down {
margin-bottom: $arwSize*2;
} .l-infobubble::before {
} left: 50%;
top: 100%;
.l-thumbsbubble-wrapper { margin-left: -1 * $arwSize;
$closeBtnD: 15px; border-left: $arwSize solid transparent;
position: absolute; border-right: $arwSize solid transparent;
left: $interiorMarginLg; border-top: ($arwSize * 1.5) solid $colorInfoBubbleBg;
right: $interiorMarginLg;
height: $imageThumbsWrapperH + $bubblePad*2 + $interiorMargin;
width: auto;
.l-thumbsbubble {
@include absPosDefault();
.l-image-thumbs-wrapper {
height: auto;
top: $bubblePad !important; right: $closeBtnD + ($interiorMargin*2); bottom: $bubblePad !important; left: $bubblePad;
} }
} }
.arw { .arw {
//left: 50%;
//margin-left: $bubbleArwSize / -2;
z-index: 2; z-index: 2;
} }
&.arw-up .arw.arw-down, &.arw-up .arw.arw-down,
@ -143,15 +116,6 @@
//************************************************* LOOK AND FEEL //************************************************* LOOK AND FEEL
.s-bubble-wrapper {
//@include box-shadow(rgba(black, 0.4) 0 1px 5px);
}
.s-bubble {
@include border-radius($basicCr);
@include box-shadow(rgba(black, 0.4) 0 1px 5px);
}
.l-thumbsbubble-wrapper { .l-thumbsbubble-wrapper {
.arw-up { .arw-up {
@include triangle('up', $bubbleArwSize, 1.5, $colorThumbsBubbleBg); @include triangle('up', $bubbleArwSize, 1.5, $colorThumbsBubbleBg);
@ -162,6 +126,8 @@
} }
.s-infobubble { .s-infobubble {
$emFg: darken($colorInfoBubbleFg, 20%); $emFg: darken($colorInfoBubbleFg, 20%);
@include border-radius($basicCr);
@include 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;

2
platform/commonUI/general/res/sass/items/_item.scss
View File

@ -104,7 +104,7 @@
&.selected { &.selected {
$cfg: lighten($colorItemSelected, 35%); $cfg: lighten($colorItemSelected, 35%);
$cfgh: lighten($cfg, 30%); $cfgh: lighten($cfg, 30%);
@include btnNoticeable($colorItemSelected); @include btnSubtle($colorItemSelected);
color: $cfg; color: $cfg;
.item-type, .top-bar .icon:not(.alert) { color: $cfg } .item-type, .top-bar .icon:not(.alert) { color: $cfg }
.item-main .item-open { color: $cfg } .item-main .item-open { color: $cfg }

9
platform/commonUI/general/res/sass/tree/_tree.scss
View File

@ -75,8 +75,8 @@ ul.tree {
.title-label { .title-label {
@include absPosDefault(); @include absPosDefault();
display: block; display: block;
left: $runningItemW + ($interiorMargin * 2); left: $runningItemW + ($interiorMargin);
// right: $treeContextTriggerW + $interiorMargin; //Disabling as context trigger not being used //right: $treeContextTriggerW + $interiorMargin;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
// height: $menuLineH; // height: $menuLineH;
@ -124,16 +124,15 @@ ul.tree {
&:not(.loading) { &:not(.loading) {
cursor: pointer; cursor: pointer;
// @include tree-item-hover();
} }
.context-trigger { .context-trigger {
$h: 0.9rem; $h: 0.9rem;
display: none; //display: none;
top: -1px; top: -1px;
position: absolute; position: absolute;
right: $interiorMarginSm; right: $interiorMarginSm;
.btn-invoke-menu { .invoke-menu {
font-size: 0.75em; font-size: 0.75em;
height: $h; height: $h;
line-height: $h; line-height: $h;

22
platform/commonUI/general/res/sass/user-environ/_frame.scss
View File

@ -27,6 +27,7 @@
border: 1px solid $bc; border: 1px solid $bc;
&:hover { &:hover {
border-color: lighten($bc, 10%); border-color: lighten($bc, 10%);
z-index: 2;
} }
.contents { .contents {
// overflow: hidden; // overflow: hidden;
@ -46,6 +47,26 @@
bottom: $myM; bottom: $myM;
left: $myM; left: $myM;
} }
&.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
// This has the effect of hiding the view switcher in nested frames in edit mode, which is desirable currently (as it's non-functional)
.view-switcher {
//display: none;
opacity: 0;
}
&:hover .view-switcher {
// Show the view switcher on frame hover
//display: inline-block !important;
opacity: 1;
}
}
.view-switcher {
// Hide the name when the view switcher is in a frame context
.name {
display: none;
}
}
} }
.edit-main .frame.child-frame.panel { .edit-main .frame.child-frame.panel {
@ -53,5 +74,4 @@
border-color: $colorKey; border-color: $colorKey;
@include boxShdwLarge(); @include boxShdwLarge();
} }
} }