mirror of
https://github.com/nasa/openmct.git
synced 2025-04-08 20:04:27 +00:00
[Frontend] In-progress checkin:
WTD-894 Added scss file for fixed position styles; Mods in progress to fixed.html to remove inline styling and change grid method to background gradient approach;
This commit is contained in:
parent
db87147bbd
commit
fa4cfc4961
@ -1,5 +1,5 @@
|
||||
/* CONSTANTS */
|
||||
/* line 17, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 17, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
@ -20,38 +20,38 @@ time, mark, audio, video {
|
||||
font-size: 100%;
|
||||
vertical-align: baseline; }
|
||||
|
||||
/* line 22, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 22, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
html {
|
||||
line-height: 1; }
|
||||
|
||||
/* line 24, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 24, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
ol, ul {
|
||||
list-style: none; }
|
||||
|
||||
/* line 26, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 26, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0; }
|
||||
|
||||
/* line 28, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 28, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
caption, th, td {
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
vertical-align: middle; }
|
||||
|
||||
/* line 30, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 30, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
q, blockquote {
|
||||
quotes: none; }
|
||||
/* line 103, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 103, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
q:before, q:after, blockquote:before, blockquote:after {
|
||||
content: "";
|
||||
content: none; }
|
||||
|
||||
/* line 32, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 32, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
a img {
|
||||
border: none; }
|
||||
|
||||
/* line 116, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
/* line 116, ../../../../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
|
||||
display: block; }
|
||||
|
||||
@ -351,6 +351,21 @@ span {
|
||||
.vscroll {
|
||||
overflow-y: auto; }
|
||||
|
||||
/* line 2, ../sass/_fixed-position.scss */
|
||||
.t-fixed-position.l-fixed-position {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 2px;
|
||||
bottom: 2px;
|
||||
left: 0;
|
||||
width: auto;
|
||||
height: auto; }
|
||||
/* line 8, ../sass/_fixed-position.scss */
|
||||
.t-fixed-position.l-fixed-position .l-grid-cell {
|
||||
position: absolute;
|
||||
border-top: 1px solid #404040;
|
||||
border-left: 1px solid #404040; }
|
||||
|
||||
/* line 3, ../sass/_about.scss */
|
||||
.t-about {
|
||||
line-height: 120%; }
|
||||
@ -2567,10 +2582,10 @@ input[type="text"] {
|
||||
.wait-spinner {
|
||||
display: block;
|
||||
position: absolute;
|
||||
-webkit-animation: rotation .6s infinite linear;
|
||||
-moz-animation: rotation .6s infinite linear;
|
||||
-o-animation: rotation .6s infinite linear;
|
||||
animation: rotation .6s infinite linear;
|
||||
-webkit-animation: rotation 0.6s infinite linear;
|
||||
-moz-animation: rotation 0.6s infinite linear;
|
||||
-o-animation: rotation 0.6s infinite linear;
|
||||
animation: rotation 0.6s infinite linear;
|
||||
border-color: rgba(0, 153, 204, 0.25);
|
||||
border-top-color: #0099cc;
|
||||
border-style: solid;
|
||||
@ -2609,10 +2624,10 @@ input[type="text"] {
|
||||
.treeview .wait-spinner {
|
||||
display: block;
|
||||
position: absolute;
|
||||
-webkit-animation: rotation .6s infinite linear;
|
||||
-moz-animation: rotation .6s infinite linear;
|
||||
-o-animation: rotation .6s infinite linear;
|
||||
animation: rotation .6s infinite linear;
|
||||
-webkit-animation: rotation 0.6s infinite linear;
|
||||
-moz-animation: rotation 0.6s infinite linear;
|
||||
-o-animation: rotation 0.6s infinite linear;
|
||||
animation: rotation 0.6s infinite linear;
|
||||
border-color: rgba(0, 153, 204, 0.25);
|
||||
border-top-color: #0099cc;
|
||||
border-style: solid;
|
||||
|
28
platform/commonUI/general/res/sass/_fixed-position.scss
Normal file
28
platform/commonUI/general/res/sass/_fixed-position.scss
Normal file
@ -0,0 +1,28 @@
|
||||
.t-fixed-position {
|
||||
&.l-fixed-position {
|
||||
// @include test(red);
|
||||
position: absolute;
|
||||
top: 0; right: 2px; bottom: 2px; left: 0;
|
||||
width: auto; height: auto;
|
||||
|
||||
.l-grid-cell {
|
||||
$brd: 1px solid lighten($colorBodyBg, 5%);
|
||||
position: absolute;
|
||||
border-top: $brd;
|
||||
border-left: $brd;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
@ -9,6 +9,7 @@
|
||||
@import "global";
|
||||
@import "fonts";
|
||||
@import "user-environ/layout";
|
||||
@import "fixed-position";
|
||||
@import "about";
|
||||
@import "badges";
|
||||
@import "icons";
|
||||
|
@ -1,15 +1,19 @@
|
||||
<div style="width: 100%; height: 100%; position: absolute; left: 0px; top: 0px;"
|
||||
<div class="t-fixed-position l-fixed-position"
|
||||
ng-controller="FixedController as controller"
|
||||
mct-resize="controller.setBounds(bounds)">
|
||||
|
||||
<!-- Background grid -->
|
||||
<span ng-click="controller.clearSelection()">
|
||||
<div ng-repeat="cell in controller.getCellStyles()"
|
||||
style="position: absolute; border: 1px gray solid; background: black;"
|
||||
<!--div ng-repeat="cell in controller.getCellStyles()"
|
||||
class="l-grid-cell s-grid-cell"
|
||||
ng-style="cell">
|
||||
</div>
|
||||
</div-->
|
||||
<span class="s-grid l-grid-x" ng-style="{ 'background-size': controller.getGridSize() [0] + 'px 100%' }"></span>
|
||||
<span class="s-grid l-grid-y" ng-style="{ 'background-size': '100% ' + controller.getGridSize() [1] + 'px' }"></span>
|
||||
</span>
|
||||
|
||||
|
||||
|
||||
<!-- Fixed position elements -->
|
||||
<mct-include ng-repeat="element in controller.getElements()"
|
||||
style="position: absolute;"
|
||||
@ -23,7 +27,7 @@
|
||||
|
||||
<!-- Selection highlight, handles -->
|
||||
<span ng-if="controller.selected()">
|
||||
<div class="test"
|
||||
<div class="s-fixed-position-item-selected"
|
||||
style="position: absolute;"
|
||||
mct-drag-down="controller.moveHandle().startDrag(controller.selected())"
|
||||
mct-drag="controller.moveHandle().continueDrag(delta)"
|
||||
|
Loading…
x
Reference in New Issue
Block a user