alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Styles] Merge in style updates

Browse Source 
Merge in style updates and split pane updates related
to timeline view into open-source-friendly branch,
WTD-901
This commit is contained in:
Victor Woeltjen
2015-02-25 11:25:20 -08:00
parent a3685d0c6b
commit f523022a2a
20 changed files with 304 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,19 @@
@mixin trans-prop-nice-resize-h() {
@mixin absPosDefault($offset: 0px, $overflowHidden: hidden) {
overflow: $overflowHidden;
position: absolute;
top: $offset; right: $offset; bottom: $offset; left: $offset;
width: auto; height: auto;
}
@mixin trans-prop-nice-fade($t: 0.5s) {
@include transition-property(visibility, opacity, background-color);
@include transition-duration($t);
@include transition-timing-function(ease-in-out);
}
@mixin trans-prop-nice-resize-h($t: 0.5s) {
@include transition-property(height, bottom, top);
@include transition-duration(0.4s);
@include transition-duration($t);
@include transition-timing-function(ease-in-out);
}
@@ -24,6 +37,26 @@
border-right: $size/$ratio solid transparent;
}
@mixin bgDiagonalStripes($c: yellow, $a: 0.1, $d: 40px) {
@include background-image(linear-gradient(-45deg,
rgba($c, $a) 25%, transparent 25%,
transparent 50%, rgba($c, $a) 50%,
rgba($c, $a) 75%, transparent 75%,
transparent 0
));
background-repeat: repeat;
background-size: $d $d;
}
@mixin bgTicks($c: $colorBodyFg) {
$c: $c;
@include background-image(linear-gradient(90deg,
$c 1px, transparent 1px,
transparent 100%
));
background-repeat: repeat-x;
}
@mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $hover: false) {
@include background-image(linear-gradient(lighten($bg, 10%), lighten($bg, 5%)));
@include border-radius($controlCr);
@@ -147,6 +180,22 @@
transform: translateY(-50%);
}
@mixin ellipsize() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@mixin scrollH($showBar: auto) {
overflow-x: $showBar;
overflow-y: hidden;
}
@mixin scrollV($showBar: auto) {
overflow-x: hidden;
overflow-y: $showBar;
}
@mixin wait-spinner($b: 5px, $c: $colorAlt1) {
display: block;
position: absolute;
@@ -163,4 +212,23 @@
@mixin test($c: #ffcc00, $a: 0.2) {
background-color: rgba($c, $a);
}
@mixin testObj($w: 2000px, $h: 1000px, $c: black, $a: 0.1) {
&:after {
@include box-sizing(border-box);
@include bgDiagonalStripes($c, $a);
color: rgba(white, 0.3);
font-style: italic;
content: "Test Object";
display: block;
padding: 20px;
position: relative;
width: $w;
height: $h;
transform: scaleX(1) scaleY(1) scaleZ(1);
transform-origin: 50% 50% 0;
}
}