[Autoflow] Add SCSS files
Merge in SCSS files and platform markup which supports autoflow tabular views for WTD-611 into the open-source-friendly master branch.
This commit is contained in:
Victor Woeltjen
95
platform/commonUI/general/res/sass/_autoflow.scss
Normal file
95
platform/commonUI/general/res/sass/_autoflow.scss
Normal file
@@ -0,0 +1,95 @@
|
||||
.autoflow {
|
||||
$headerH: $formInputH;
|
||||
$colMargin: $interiorMargin;
|
||||
$rowH: 15px;
|
||||
font-size: 0.75rem;
|
||||
.l-autoflow-header {
|
||||
bottom: auto;
|
||||
height: $headerH;
|
||||
line-height: $headerH;
|
||||
span {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.l-filter {
|
||||
margin-left: $interiorMargin;
|
||||
}
|
||||
}
|
||||
|
||||
.l-autoflow-items {
|
||||
// @include test(green);
|
||||
// right: auto; width: 100; // TEMP!
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
top: $headerH + $interiorMargin * 2;
|
||||
white-space: nowrap;
|
||||
.l-autoflow-col {
|
||||
// @include test();
|
||||
@include box-sizing(border-box);
|
||||
border-left: 1px solid $colorInteriorBorder;
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
padding-left: $colMargin;
|
||||
padding-right: $colMargin;
|
||||
width: 150px;
|
||||
.l-autoflow-row {
|
||||
// @include test(red);
|
||||
@include box-sizing(border-box);
|
||||
display: block;
|
||||
height: $rowH;
|
||||
line-height: $rowH;
|
||||
margin-bottom: 1px; margin-top: 1px;
|
||||
position: relative;
|
||||
&:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
&:hover {
|
||||
background: rgba(#fff, 0.1);
|
||||
}
|
||||
&.stale {
|
||||
color: darken($colorBodyFg, 20%);
|
||||
}
|
||||
&:not(.stale) {
|
||||
.l-autoflow-item.r {
|
||||
color: lighten($colorBodyFg, 20%);
|
||||
}
|
||||
}
|
||||
&.alert {
|
||||
.l-autoflow-item.r {
|
||||
background: $colorFormError;
|
||||
padding-right: 2px;
|
||||
}
|
||||
}
|
||||
&.first-in-group {
|
||||
border-top: 1px solid lighten($colorInteriorBorder, 20%);
|
||||
}
|
||||
.l-autoflow-item {
|
||||
bottom: auto;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
top: 1px; bottom: 1px;
|
||||
&.l {
|
||||
// @include test(orange);
|
||||
width: 60%; right: auto;
|
||||
// left: $interiorMarginSm;
|
||||
}
|
||||
&.r {
|
||||
// @include test(blue);
|
||||
@include border-radius($controlCr);
|
||||
left: 60%;
|
||||
// right: $interiorMarginSm;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-left: none;
|
||||
padding-left: 0;
|
||||
.l-autoflow-item.l {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
40
platform/commonUI/general/res/sass/_badges.scss
Normal file
40
platform/commonUI/general/res/sass/_badges.scss
Normal file
@@ -0,0 +1,40 @@
|
||||
.badge {
|
||||
@include background-image(linear-gradient(lighten($colorAlt1, 10%), $colorAlt1));
|
||||
color: $colorBodyBg;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.top-bar .badge {
|
||||
@include border-radius($controlCr * 1.5);
|
||||
$h: $ueTopBarH; // - 5px;
|
||||
font-size: 1.4em;
|
||||
height: $h;
|
||||
line-height: $h;
|
||||
margin-right: $interiorMargin;
|
||||
width: $badgeW;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
//.top-bar .btn-browse .badge {
|
||||
// Moved to _controls.scss .btn.browse-btn
|
||||
// @include border-radius($controlCr * 1.5);
|
||||
// $d: 20px;
|
||||
// display: block;
|
||||
// font-size: 1em;
|
||||
// line-height: $d;
|
||||
//// margin-top: -4px;
|
||||
//
|
||||
// position: absolute;
|
||||
// top: 5px; left: 5px; bottom: 5px; right: auto;
|
||||
// width: $d; height: auto;
|
||||
//}
|
||||
|
||||
.super-menu .badge {
|
||||
@include background-image(linear-gradient(lighten($colorCreateBtn, 10%), $colorCreateBtn));
|
||||
@include border-radius($controlCr);
|
||||
@include boxShdwSubtle();
|
||||
// display: inline-block;
|
||||
// margin-right: 10px !important;
|
||||
padding: 2px 7px;
|
||||
}
|
||||
95
platform/commonUI/general/res/sass/_constants.scss
Normal file
95
platform/commonUI/general/res/sass/_constants.scss
Normal file
@@ -0,0 +1,95 @@
|
||||
// Margins, spacing, radii
|
||||
$bodyMargin: 10px;
|
||||
$interiorMargin: 5px;
|
||||
$interiorMarginLg: $interiorMargin * 2;
|
||||
$interiorMarginSm: 3px;
|
||||
$basicCr: 3px;
|
||||
$controlCr: $basicCr;
|
||||
$badgeW: 35px;
|
||||
|
||||
// Colors and shading
|
||||
$colorBodyBg: #333;
|
||||
$colorBodyFg: #999;
|
||||
$colorFooterBg: #000;
|
||||
$colorKey: #0099cc;
|
||||
$colorKeyFg: #fff;
|
||||
$colorAlt1: #ffc700;
|
||||
$colorAlert: #ff3c00;
|
||||
$colorCheck: $colorKey;
|
||||
$colorCreateBtn: $colorKey;
|
||||
$colorInteriorBorder: lighten($colorBodyBg, 10%);
|
||||
$colorObjFrameBg: darken($colorBodyBg, 5%);
|
||||
$colorFormRequired: #ffc700;
|
||||
$colorFormValid: #33cc33;
|
||||
$colorFormError: #cc0000;
|
||||
$colorFormInvalid: #ff9900;
|
||||
|
||||
|
||||
// Ratios
|
||||
$ltGamma: 20%;
|
||||
$btnFontSizeToH: 0.45;
|
||||
|
||||
// User Environment
|
||||
$ueTopBarH: 35px;
|
||||
$ueFooterH: 20px;
|
||||
$ueColMargin: 1.5%;
|
||||
$ueAppLogoW: 95px;
|
||||
$ueBrowseViewBarH: $ueTopBarH; // was 30px
|
||||
$ueEditToolBarH: $ueBrowseViewBarH;
|
||||
$ueEditToolBarButtonH: $ueEditToolBarH * 0.8;
|
||||
$ueBrowseLeftPaneW: 25%;
|
||||
$ueEditLeftPaneW: 75%;
|
||||
|
||||
// Overlay
|
||||
$colorOvrBlocker: rgba(black, 0.7);
|
||||
$colorOvrBg: $colorBodyBg;
|
||||
$colorOvrFg: $colorBodyFg;
|
||||
$ovrTopBarH: 60px;
|
||||
$ovrFooterH: 40px;
|
||||
|
||||
//Items
|
||||
$ueBrowseGridItemLg: 200px;
|
||||
$ueBrowseGridItemTopBarH: 20px;
|
||||
$ueBrowseGridItemBottomBarH: 40px;
|
||||
$colorItemBase: lighten($colorBodyBg, 5%);
|
||||
$colorItemFg: lighten($colorItemBase, 20%);
|
||||
$colorItemSelected: $colorKey;
|
||||
|
||||
// Tree
|
||||
$treeVCW: 10px;
|
||||
$treeTypeIconW: 17px;
|
||||
$treeContextTriggerW: 20px;
|
||||
$colorItemTreeIcon: $colorKey;
|
||||
$colorItemTreeIconHover: lighten($colorItemTreeIcon, 20%);
|
||||
$colorItemTreeVCHover: $colorAlt1;
|
||||
|
||||
//Tabular
|
||||
$tabularHeaderH: 20px;
|
||||
$tabularTdPadLR: 5px;
|
||||
$tabularTdPadTB: 2px;
|
||||
$tabularColorBorder: rgba(white, 0.1);
|
||||
$tabularColorBodyBg: darken($colorBodyBg, 10%);
|
||||
$tabularColorBodyFg: lighten($tabularColorBodyBg, 40%);
|
||||
$tabularColorHeaderBg: lighten($colorBodyBg, 10%);
|
||||
$tabularColorHeaderFg: lighten($tabularColorHeaderBg, 40%);
|
||||
|
||||
// Controls
|
||||
$controlCr: $basicCr;
|
||||
$controlDisabledOpacity: 0.3;
|
||||
$formLabelW: 20%;
|
||||
$formInputH: 22px;
|
||||
$formRowCtrlsH: 14px;
|
||||
$menuLineH: 1.5rem;
|
||||
$scrollbarTrackSize: 10px;
|
||||
$scrollbarTrackColorBg: rgba(#000, 0.4);
|
||||
|
||||
// Paths
|
||||
$dirImgs: '../images/';
|
||||
|
||||
// Ticks
|
||||
$ticksH: 25px;
|
||||
$tickLblVMargin: 3px;
|
||||
$tickLblH: 15px;
|
||||
$tickLblW: 50px;
|
||||
$tickH: $ticksH - $tickLblVMargin - $tickLblH;
|
||||
$tickW: 1px;
|
||||
19
platform/commonUI/general/res/sass/_effects.scss
Normal file
19
platform/commonUI/general/res/sass/_effects.scss
Normal file
@@ -0,0 +1,19 @@
|
||||
.disabled,
|
||||
a.disabled {
|
||||
@include opacity($controlDisabledOpacity);
|
||||
pointer-events: none !important;
|
||||
cursor: default !important;
|
||||
}
|
||||
|
||||
.incised {
|
||||
@include boxIncised(0.8);
|
||||
border-bottom: 1px solid rgba(#fff, 0.3);
|
||||
}
|
||||
|
||||
.outline {
|
||||
@include boxOutline();
|
||||
}
|
||||
|
||||
.test {
|
||||
@include test();
|
||||
}
|
||||
3
platform/commonUI/general/res/sass/_fonts.scss
Normal file
3
platform/commonUI/general/res/sass/_fonts.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
.ui-symbol {
|
||||
font-family: 'symbolsfont';
|
||||
}
|
||||
89
platform/commonUI/general/res/sass/_global.scss
Normal file
89
platform/commonUI/general/res/sass/_global.scss
Normal file
@@ -0,0 +1,89 @@
|
||||
@font-face {
|
||||
/*
|
||||
* Use https://www.web-font-generator.com/ to gen fonts
|
||||
*/
|
||||
font-family: 'symbolsfont';
|
||||
src: url('../fonts/symbols/wtdsymbols.eot');
|
||||
src: url('../fonts/symbols/wtdsymbols.eot?#iefix') format('embedded-opentype'),
|
||||
url('../fonts/symbols/wtdsymbols.woff') format('woff'),
|
||||
url('../fonts/symbols/wtdsymbols.woff2') format('woff2'),
|
||||
url('../fonts/symbols/wtdsymbols.ttf') format('truetype'),
|
||||
url('../fonts/symbols/wtdsymbols.svg#armataregular') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #ccc;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
body, html {
|
||||
background-color: $colorBodyBg;
|
||||
color: $colorBodyFg;
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
font-size: 100%;
|
||||
margin: $bodyMargin;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
em {
|
||||
color: rgba(white, 0.2);
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.7em;
|
||||
font-weight: normal;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
span {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.abs {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.code {
|
||||
font-family: "Lucida Console", monospace;
|
||||
font-size: 0.7em;
|
||||
line-height: 150%;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.centered {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.colorKey {
|
||||
color: $colorKey;
|
||||
}
|
||||
|
||||
.ds {
|
||||
@include box-shadow(rgba(#000, 0.7) 0 4px 10px 2px);
|
||||
}
|
||||
|
||||
.hide,
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
7
platform/commonUI/general/res/sass/_holder.scss
Normal file
7
platform/commonUI/general/res/sass/_holder.scss
Normal file
@@ -0,0 +1,7 @@
|
||||
.pane {
|
||||
.holder {
|
||||
// left: $interiorMargin;
|
||||
// right: $interiorMargin;
|
||||
}
|
||||
// &:first-child .holder { left: 0; }
|
||||
}
|
||||
69
platform/commonUI/general/res/sass/_icons.scss
Normal file
69
platform/commonUI/general/res/sass/_icons.scss
Normal file
@@ -0,0 +1,69 @@
|
||||
.triangle {
|
||||
$myColor: $colorKey;
|
||||
$mySize: 10px;
|
||||
@include triangle-right($mySize, $myColor);
|
||||
&.triangle-down {
|
||||
@include triangle-down($mySize, $myColor);
|
||||
}
|
||||
}
|
||||
|
||||
.ui-symbol {
|
||||
$c: $colorKey;
|
||||
&.icon {
|
||||
color: $c;
|
||||
@include txtShdwSubtle();
|
||||
&.alert {
|
||||
color: $colorAlert;
|
||||
&:hover {
|
||||
color: lighten($colorAlert, $ltGamma);
|
||||
}
|
||||
}
|
||||
&.major {
|
||||
font-size: 1.65em;
|
||||
}
|
||||
&:hover {
|
||||
// color: lighten($c, $ltGamma);
|
||||
.invoke-menu {
|
||||
// color: lighten($colorBodyBg, $ltGamma * 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bar .icon {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.invoke-menu {
|
||||
@include invokeMenu($colorKey);
|
||||
display: inline-block;
|
||||
font-size: 1rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.btn-menu .invoke-menu,
|
||||
.icon.major .invoke-menu {
|
||||
margin-left: $interiorMargin;
|
||||
}
|
||||
|
||||
.icon-buttons-main .invoke-menu {
|
||||
@include invokeMenu(lighten($colorBodyBg, $ltGamma));
|
||||
}
|
||||
|
||||
.menu-element .invoke-menu {
|
||||
|
||||
}
|
||||
|
||||
.object-header .type-icon {
|
||||
color: $colorAlt1;
|
||||
}
|
||||
|
||||
.menu .type-icon,
|
||||
.tree-item .type-icon,
|
||||
.icon-btn .menu.dropdown .icon,
|
||||
.super-menu.menu.dropdown .icon {
|
||||
font-size: $menuLineH * 0.93;
|
||||
line-height: $menuLineH * 1.13;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
37
platform/commonUI/general/res/sass/_main.scss
Executable file
37
platform/commonUI/general/res/sass/_main.scss
Executable file
@@ -0,0 +1,37 @@
|
||||
@import "compass";
|
||||
@import "compass/reset";
|
||||
@import "compass/css3";
|
||||
@import "compass/css3/user-interface";
|
||||
@import "compass/utilities";
|
||||
|
||||
@import "mixins";
|
||||
@import "effects";
|
||||
@import "global";
|
||||
@import "fonts";
|
||||
@import "user-environ/layout";
|
||||
@import "badges";
|
||||
@import "icons";
|
||||
@import "lists/tabular";
|
||||
@import "controls/buttons";
|
||||
@import "controls/controls";
|
||||
@import "controls/lists";
|
||||
@import "controls/menus";
|
||||
@import "forms/mixins";
|
||||
@import "forms/elems";
|
||||
@import "forms/validation";
|
||||
@import "forms/text-input";
|
||||
@import "forms/selects";
|
||||
@import "forms/channel-selector";
|
||||
@import "forms/datetime";
|
||||
@import "forms/filter";
|
||||
@import "plots/plots-main";
|
||||
@import "overlay/overlay";
|
||||
@import "user-environ/frame";
|
||||
@import "user-environ/top-bar";
|
||||
@import "user-environ/bottom-bar";
|
||||
@import "user-environ/object-browse";
|
||||
@import "user-environ/tool-bar";
|
||||
@import "helpers/bubbles";
|
||||
@import "helpers/splitter";
|
||||
@import "helpers/wait-spinner";
|
||||
@import "autoflow";
|
||||
163
platform/commonUI/general/res/sass/_mixins.scss
Normal file
163
platform/commonUI/general/res/sass/_mixins.scss
Normal file
@@ -0,0 +1,163 @@
|
||||
@mixin trans-prop-nice-resize-h() {
|
||||
@include transition-property(height, bottom, top);
|
||||
@include transition-duration(0.4s);
|
||||
@include transition-timing-function(ease-in-out);
|
||||
}
|
||||
|
||||
@mixin triangle-right($size, $color) {
|
||||
$size: $size/2;
|
||||
$ratio: 1;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: $size/$ratio solid transparent;
|
||||
border-left: $size solid $color;
|
||||
border-bottom: $size/$ratio solid transparent;
|
||||
}
|
||||
|
||||
@mixin triangle-down($size, $color) {
|
||||
$size: $size/2;
|
||||
$ratio: 1;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: $size/$ratio solid transparent;
|
||||
border-top: $size solid $color;
|
||||
border-right: $size/$ratio solid transparent;
|
||||
}
|
||||
|
||||
@mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $hover: false) {
|
||||
@include background-image(linear-gradient(lighten($bg, 10%), lighten($bg, 5%)));
|
||||
@include border-radius($controlCr);
|
||||
@include box-sizing(border-box);
|
||||
// @include box-shadow(rgba(black, 0.3) 0 1px 2px);
|
||||
@include boxShdwSubtle();
|
||||
border-top: 1px solid lighten($bg, 20%);
|
||||
color: $fg;
|
||||
display: inline-block;
|
||||
@if $hover == true {
|
||||
&:hover {
|
||||
@include background-image(linear-gradient(lighten($bg, 20%), lighten($bg, 15%)));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin sliderTrack($bg: $scrollbarTrackColorBg) {
|
||||
$b: 1px solid lighten($bg, 30%);
|
||||
@include border-radius(2px);
|
||||
@include box-sizing(border-box);
|
||||
@include boxIncised(0.7);
|
||||
background-color: $bg;
|
||||
border-bottom: $b;
|
||||
border-right: $b;
|
||||
}
|
||||
|
||||
@mixin controlGrippy($b, $direction: horizontal, $w: 1px, $style: dotted) {
|
||||
&:before {
|
||||
// Grippy
|
||||
content: '';
|
||||
display: block;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
|
||||
@if $direction == "horizontal" {
|
||||
border-top: $w $style darken($b, 15%);
|
||||
top: 2px;
|
||||
left: 5px;
|
||||
right: 5px;
|
||||
|
||||
} @else if $direction == "vertical" {
|
||||
border-left: $w $style darken($b, 15%);
|
||||
left: 2px;
|
||||
bottom: 5px;
|
||||
top: 5px;
|
||||
}
|
||||
}
|
||||
&:not(.disabled):hover:before {
|
||||
border-color: rgba($colorKey, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg) {
|
||||
@include containerSubtle($bg, $fg);
|
||||
&:not(.disabled):hover {
|
||||
@include background-image(linear-gradient(lighten($bg, 20%), lighten($bg, 10%)));
|
||||
}
|
||||
}
|
||||
|
||||
@mixin btnNoticeable($bg: $colorBodyBg, $fg: $colorBodyFg) {
|
||||
@include containerSubtle($bg, $fg);
|
||||
@include background-image(linear-gradient(lighten($bg, 20%), $bg));
|
||||
&:not(.disabled):hover {
|
||||
@include background-image(linear-gradient(lighten($bg, 30%), lighten($bg, 10%)));
|
||||
}
|
||||
}
|
||||
|
||||
@mixin boxIncised($sVal: 0.6) {
|
||||
@include box-shadow(inset rgba(black, $sVal) 0 1px 5px);
|
||||
}
|
||||
|
||||
@mixin boxOutline($c: lighten($colorBodyBg, 20%)) {
|
||||
border: 1px solid $c;
|
||||
}
|
||||
|
||||
@mixin boxShdwSubtle($sVal: 0.3) {
|
||||
@include box-shadow(rgba(black, $sVal) 0 1px 3px);
|
||||
}
|
||||
|
||||
@mixin boxShdwLarge($sVal: 0.7) {
|
||||
@include box-shadow(rgba(black, $sVal) 0 3px 10px);
|
||||
}
|
||||
|
||||
@mixin outerGlow($color: #fff, $sVal: 0.3) {
|
||||
@include box-shadow(rgba($color, $sVal) 0 0 30px);
|
||||
}
|
||||
|
||||
@mixin txtShdwSubtle($sVal: 0.1) {
|
||||
@include text-shadow(rgba(black, $sVal) 0 1px 2px);
|
||||
}
|
||||
|
||||
|
||||
@mixin invokeMenu($baseColor) {
|
||||
$c: $baseColor;
|
||||
color: $c;
|
||||
&:hover {
|
||||
color: lighten($c, $ltGamma);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin menuUlReset() {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
li {
|
||||
list-style-type: none;
|
||||
margin:0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin vertical-align {
|
||||
/* This doesn't work on an element inside an element with absolute positioning that has height: auto */
|
||||
position: relative;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
-ms-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
@mixin wait-spinner($b: 5px, $c: $colorAlt1) {
|
||||
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;
|
||||
border-color: rgba($c, 0.25);
|
||||
border-top-color: rgba($c, 1.0);
|
||||
border-style: solid;
|
||||
border-width: $b;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
@mixin test($c: #ffcc00, $a: 0.2) {
|
||||
background-color: rgba($c, $a);
|
||||
}
|
||||
52
platform/commonUI/general/res/sass/controls/_buttons.scss
Normal file
52
platform/commonUI/general/res/sass/controls/_buttons.scss
Normal file
@@ -0,0 +1,52 @@
|
||||
$pad: $interiorMargin * 2;
|
||||
|
||||
/*********************************** TYPE STYLES */
|
||||
.t-btn {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
/*********************************** STYLE STYLES */
|
||||
.s-btn {
|
||||
$base: lighten($colorBodyBg, 20%);
|
||||
@include border-radius($controlCr);
|
||||
@include box-sizing(border-box);
|
||||
@include text-shadow(rgba(black, 0.3) 0 1px 1px);
|
||||
line-height: 1.2em;
|
||||
padding: 0 $pad;
|
||||
text-decoration: none;
|
||||
&.s-very-subtle {
|
||||
@include containerSubtle($colorBodyBg, $colorBodyFg, true);
|
||||
}
|
||||
}
|
||||
|
||||
.s-icon-btn {
|
||||
@extend .s-btn;
|
||||
font-size: 1.2em;
|
||||
.icon {
|
||||
color: $colorKey;
|
||||
}
|
||||
|
||||
&:not(.disabled):hover .icon {
|
||||
color: lighten($colorKey, $ltGamma);
|
||||
}
|
||||
|
||||
&.labeled {
|
||||
padding: 0 $pad/2;
|
||||
.icon {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.title-label {
|
||||
margin-left: $interiorMargin;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*********************************** LAYOUT STYLES */
|
||||
span.l-btn,
|
||||
span.l-btn span,
|
||||
a.l-btn,
|
||||
a.l-btn span {
|
||||
display: inline-block;
|
||||
}
|
||||
471
platform/commonUI/general/res/sass/controls/_controls.scss
Normal file
471
platform/commonUI/general/res/sass/controls/_controls.scss
Normal file
@@ -0,0 +1,471 @@
|
||||
.control {
|
||||
&.view-control {
|
||||
.icon {
|
||||
display: inline-block;
|
||||
margin: -1px 5px 1px 2px;
|
||||
vertical-align: middle;
|
||||
&.triangle-down {
|
||||
margin: 2px 2px -2px 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
display: inline-block;
|
||||
font-size: 11px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
@include border-radius(3px);
|
||||
display: inline-block;
|
||||
padding: 1px 6px 4px 4px;
|
||||
&:hover {
|
||||
background: rgba(white, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.accordion {
|
||||
$accordionHeadH: 18px;
|
||||
margin-top: $interiorMargin;
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.accordion-head {
|
||||
$op: 0.2;
|
||||
@include border-radius($basicCr * 0.75);
|
||||
@include box-sizing("border-box");
|
||||
background: rgba($colorBodyFg, $op);
|
||||
cursor: pointer;
|
||||
font-size: 0.75em;
|
||||
line-height: $accordionHeadH;
|
||||
margin-bottom: $interiorMargin;
|
||||
padding: 0 $interiorMargin;
|
||||
position: absolute;
|
||||
top: 0; right: 0; bottom: auto; left: 0;
|
||||
width: auto; height: $accordionHeadH;
|
||||
text-transform: uppercase;
|
||||
&:hover {
|
||||
background: rgba($colorBodyFg, $op * 2);
|
||||
}
|
||||
&:after {
|
||||
content: "^";
|
||||
display: block;
|
||||
font-family: 'symbolsfont';
|
||||
font-size: 1.2em;
|
||||
position: absolute;
|
||||
right: $interiorMargin;
|
||||
text-transform: none;
|
||||
top: 0;
|
||||
}
|
||||
&:not(.expanded):after {
|
||||
content: "v";
|
||||
}
|
||||
}
|
||||
.accordion-contents {
|
||||
position: absolute;
|
||||
top: $accordionHeadH + $interiorMargin; right: 0; bottom: 0; left: 0;
|
||||
overflow-y: auto;
|
||||
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: $ueBrowseViewBarH;
|
||||
height: $h;
|
||||
line-height: $h;
|
||||
font-size: 1.1em;
|
||||
padding: 0 ($p * 1.5) 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 {
|
||||
// position: relative;
|
||||
.btn,
|
||||
.btn-set,
|
||||
.t-btn {
|
||||
display: inline-block;
|
||||
margin-left: $interiorMargin;
|
||||
}
|
||||
.btn,
|
||||
.t-btn {
|
||||
&:first-child {
|
||||
// margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.control-group {
|
||||
// Buttons that have a conceptual grouping - internal space between, and a divider between groups.
|
||||
// @include test();
|
||||
@include box-sizing(border-box);
|
||||
border-left: 1px solid $colorInteriorBorder;
|
||||
padding: 0 $interiorMargin;
|
||||
position: relative;
|
||||
&:first-child {
|
||||
border-left: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-set {
|
||||
// Buttons that have a very tight conceptual grouping - no internal space between them.
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
.btn,
|
||||
.t-btn {
|
||||
@include border-radius(0);
|
||||
border-left: 1px solid lighten($colorBodyBg, 20%);
|
||||
margin-left: 0;
|
||||
&:first-child {
|
||||
border-left: none;
|
||||
@include border-left-radius($controlCr);
|
||||
}
|
||||
&:last-child {
|
||||
@include border-right-radius($controlCr);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.object-browse-bar .btn,
|
||||
.object-browse-bar .t-btn,
|
||||
.top-bar .buttons-main .btn,
|
||||
.top-bar .buttons-main .t-btn,
|
||||
.tool-bar .btn,
|
||||
.tool-bar .t-btn {
|
||||
$h: $ueEditToolBarButtonH;
|
||||
display: inline-block;
|
||||
font-size: $h * $btnFontSizeToH;
|
||||
height: $h;
|
||||
line-height: $h;
|
||||
.icon:not(.invoke-menu) {
|
||||
// position: relative;
|
||||
// top: -0.04em;
|
||||
font-size: 150%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
label.checkbox.custom {
|
||||
$bg: lighten($colorBodyBg, $ltGamma);
|
||||
$d: $formRowCtrlsH;
|
||||
// @include vertical-align();
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
line-height: $d;
|
||||
margin-right: $interiorMargin * 4;
|
||||
padding-left: $d + $interiorMargin;
|
||||
position: relative;
|
||||
em {
|
||||
color: $colorBodyFg;
|
||||
display: inline-block;
|
||||
height: $d;
|
||||
min-width: $d;
|
||||
&:before {
|
||||
@include border-radius($basicCr * .75);
|
||||
background: $bg;
|
||||
border-bottom: 1px solid lighten($bg, 10%);
|
||||
box-sizing: border-box;
|
||||
content: " ";
|
||||
font-family: 'symbolsfont';
|
||||
font-size: 0.8em;
|
||||
display: inline-block;
|
||||
margin-right: $interiorMargin;
|
||||
height: $d;
|
||||
width: $d;
|
||||
left: 0;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
&.no-text {
|
||||
overflow: hidden;
|
||||
margin-right: 0;
|
||||
padding-left: 0;
|
||||
height: $d;
|
||||
width: $d;
|
||||
em {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
input {
|
||||
display: none;
|
||||
&:checked ~ em:before {
|
||||
background: $colorCheck;
|
||||
color: lighten($colorCheck, 50%);
|
||||
content: "2";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-labeled {
|
||||
margin-left: $interiorMargin;
|
||||
label {
|
||||
display: inline-block;
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
&.inline {
|
||||
display: inline-block;
|
||||
}
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-menu label.checkbox.custom {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.item .checkbox {
|
||||
&.checked label {
|
||||
@include box-shadow(none);
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-menu {
|
||||
$h: 20px;
|
||||
$p: 7px;
|
||||
$c: $colorBodyFg;
|
||||
@include btnSubtle($colorBodyBg);
|
||||
height: $h;
|
||||
line-height: $h;
|
||||
&.dropdown {
|
||||
// padding-left: $p;
|
||||
padding-right: $p;
|
||||
}
|
||||
|
||||
&:not(.disabled):hover {
|
||||
color: lighten($c, 20%);
|
||||
}
|
||||
|
||||
&.btn-invoke-menu {
|
||||
$c: $colorKey;
|
||||
color: $c;
|
||||
padding: 0 5px;
|
||||
&:hover {
|
||||
color: lighten($c, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.type-icon {
|
||||
margin-right: $interiorMargin;
|
||||
}
|
||||
.menu {
|
||||
// margin-left: (-1 * $p);
|
||||
text-align: left;
|
||||
.ui-symbol.icon {
|
||||
width: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.top-bar .btn-menu {
|
||||
$h: $ueTopBarH; // 35px
|
||||
$p: 10px;
|
||||
$badgeM: $interiorMargin;
|
||||
$badgeD: $h - ($badgeM * 2);
|
||||
height: $h;
|
||||
line-height: $h;
|
||||
padding-right: 10px;
|
||||
&.browse-btn {
|
||||
margin-right: $interiorMargin;
|
||||
padding-left: $badgeD + $badgeM * 2;
|
||||
.badge {
|
||||
@include border-radius($controlCr * 1.5);
|
||||
display: block;
|
||||
font-size: 1em;
|
||||
line-height: $badgeD;
|
||||
position: absolute;
|
||||
top: $badgeM;
|
||||
left: $badgeM;
|
||||
bottom: $badgeM;
|
||||
right: auto;
|
||||
width: $badgeD;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/******************************************************** OBJECT-HEADER */
|
||||
.object-header {
|
||||
display: inline-block;
|
||||
font-size: 1em;
|
||||
.title {
|
||||
color: lighten($colorBodyFg, 40%);
|
||||
}
|
||||
.type-icon {
|
||||
font-size: 1.5em;
|
||||
margin-right: $interiorMargin;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.top-bar,
|
||||
.object-browse-bar {
|
||||
.object-header {
|
||||
font-size: 1.2em;
|
||||
span {
|
||||
display: inline-block;
|
||||
margin-right: $interiorMargin;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/******************************************************** 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 */
|
||||
|
||||
.slider {
|
||||
$knobH: 100%; //14px;
|
||||
$knobW: 12px;
|
||||
$slotH: 50%;
|
||||
.slot {
|
||||
// @include border-radius($basicCr * .75);
|
||||
@include sliderTrack();
|
||||
height: $slotH;
|
||||
width: auto;
|
||||
position: absolute;
|
||||
top: ($knobH - $slotH) / 2;
|
||||
right: 0;
|
||||
bottom: auto;
|
||||
left: 0;
|
||||
}
|
||||
.knob {
|
||||
@include btnSubtle();
|
||||
@include controlGrippy(rgba(black, 0.3), vertical, 1px, solid);
|
||||
cursor: ew-resize;
|
||||
position: absolute;
|
||||
height: $knobH;
|
||||
width: $knobW;
|
||||
top: 0;
|
||||
auto: 0;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
&:before {
|
||||
top: 1px;
|
||||
bottom: 3px;
|
||||
left: ($knobW / 2) - 1;
|
||||
}
|
||||
|
||||
}
|
||||
.range {
|
||||
background: rgba($colorKey, 0.6);
|
||||
cursor: ew-resize;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: auto;
|
||||
bottom: 0;
|
||||
left: auto;
|
||||
height: auto;
|
||||
width: auto;
|
||||
&:hover {
|
||||
background: rgba($colorKey, 0.7);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/******************************************************** BROWSER ELEMENTS */
|
||||
|
||||
::-webkit-scrollbar {
|
||||
@include sliderTrack();
|
||||
height: $scrollbarTrackSize;
|
||||
width: $scrollbarTrackSize;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
$bg: lighten($colorBodyBg, 10%);
|
||||
@include background-image(linear-gradient(lighten($bg, 10%), lighten($bg, 5%) 20px));
|
||||
@include border-radius(1px);
|
||||
@include box-sizing(border-box);
|
||||
@include boxShdwSubtle();
|
||||
border-top: 1px solid lighten($bg, 20%);
|
||||
&:hover {
|
||||
@include background-image(linear-gradient(lighten($bg, 20%), lighten($bg, 15%) 20px));
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
background: rgba(#000, 0.4);
|
||||
}
|
||||
9
platform/commonUI/general/res/sass/controls/_lists.scss
Normal file
9
platform/commonUI/general/res/sass/controls/_lists.scss
Normal file
@@ -0,0 +1,9 @@
|
||||
.checkbox-list {
|
||||
label.checkbox.custom {
|
||||
display: block;
|
||||
margin-bottom: $interiorMargin;
|
||||
}
|
||||
li {
|
||||
margin-bottom: $interiorMargin;
|
||||
}
|
||||
}
|
||||
163
platform/commonUI/general/res/sass/controls/_menus.scss
Normal file
163
platform/commonUI/general/res/sass/controls/_menus.scss
Normal file
@@ -0,0 +1,163 @@
|
||||
/******************************************************** MENUS */
|
||||
.menu-element {
|
||||
$bg: lighten($colorBodyBg, 5%);
|
||||
$bgHover: lighten($bg, 20%);
|
||||
$iconColor: $colorKey;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
.menu {
|
||||
@include border-radius($basicCr);
|
||||
@include containerSubtle($bg);
|
||||
@include txtShdwSubtle(0.2);
|
||||
display: block; // set to block via jQuery
|
||||
padding: $interiorMarginSm 0;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
ul {
|
||||
@include menuUlReset();
|
||||
li {
|
||||
// @include border-radius($controlCr);
|
||||
@include box-sizing(border-box);
|
||||
border-top: 1px solid lighten($bg, 20%);
|
||||
line-height: $menuLineH;
|
||||
padding: $interiorMarginSm $interiorMargin * 2 $interiorMarginSm ($interiorMargin * 3) + $treeTypeIconW;
|
||||
white-space: nowrap;
|
||||
&:first-child {
|
||||
border: none;
|
||||
}
|
||||
&:hover {
|
||||
background: $bgHover;
|
||||
a {
|
||||
color: $colorKeyFg;
|
||||
}
|
||||
.icon {
|
||||
color: lighten($iconColor, 20%);
|
||||
}
|
||||
}
|
||||
a {
|
||||
color: lighten($bg, 60%);
|
||||
display: block;
|
||||
}
|
||||
.type-icon {
|
||||
left: $interiorMargin * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.super-menu {
|
||||
$w: 400px;
|
||||
$h: $w + 20;
|
||||
$plw: $w * 0.55;
|
||||
$prw: $w - $plw;
|
||||
width: $w;
|
||||
height: $h;
|
||||
.contents { overflow: none; }
|
||||
.pane {
|
||||
@include box-sizing(border-box);
|
||||
&.left {
|
||||
// @include test();
|
||||
border-right: 1px solid rgba(white, 0.2);
|
||||
left: 0;
|
||||
padding-right: $interiorMargin;
|
||||
right: auto;
|
||||
width: $plw;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
ul {
|
||||
li {
|
||||
@include border-radius($controlCr);
|
||||
// @include test(red);
|
||||
border-top: none;
|
||||
// font-size: 0.85em;
|
||||
// line-height: 20px;
|
||||
&:hover {
|
||||
background: $bgHover;
|
||||
}
|
||||
.icon {
|
||||
@include txtShdwSubtle(0.4);
|
||||
left: $interiorMargin;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.right {
|
||||
left: $plw;
|
||||
right: 0;
|
||||
padding: $interiorMargin * 3;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
.menu-item-description {
|
||||
.desc-area {
|
||||
// @include test(green);
|
||||
&.icon {
|
||||
// @include test(red);
|
||||
$h: 150px;
|
||||
position: relative;
|
||||
color: lighten($bg, 30%);
|
||||
font-size: 8em;
|
||||
left: 0;
|
||||
height: $h;
|
||||
line-height: $h;
|
||||
// top: 0; right: 0; bottom: 5em; left: 0;
|
||||
// height: 5em;
|
||||
// text-align: center;
|
||||
}
|
||||
&.description {
|
||||
color: lighten($bg, 30%);
|
||||
font-size: 0.8em;
|
||||
}
|
||||
&.title {
|
||||
color: lighten($bg, 60%);
|
||||
font-size: 1.2em;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.context-menu {
|
||||
$bg: lighten($colorBodyBg, 25%);
|
||||
$fg: lighten($bg, 70%);
|
||||
$ic: lighten($colorKey, 15%);
|
||||
font-size: 0.80rem;
|
||||
pointer-events: auto;
|
||||
&.menu {
|
||||
@include containerSubtle($bg);
|
||||
ul li {
|
||||
padding-left: 30px;
|
||||
a { color: $fg; }
|
||||
.icon {
|
||||
color: $ic;
|
||||
}
|
||||
.type-icon {
|
||||
left: $interiorMargin;
|
||||
}
|
||||
&:hover .icon {
|
||||
color: lighten($ic, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.context-menu-holder {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
height: 200px;
|
||||
width: 170px;
|
||||
z-index: 59;
|
||||
.context-menu-wrapper {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.context-menu {
|
||||
}
|
||||
}
|
||||
&.go-left .context-menu { right: 0; }
|
||||
&.go-up .context-menu { bottom: 0; }
|
||||
}
|
||||
|
||||
.btn-bar.right .menu,
|
||||
.menus-to-left .menu {
|
||||
left: auto; right: 0; width: auto;
|
||||
}
|
||||
32
platform/commonUI/general/res/sass/controls/_ticks.scss
Normal file
32
platform/commonUI/general/res/sass/controls/_ticks.scss
Normal file
@@ -0,0 +1,32 @@
|
||||
.wrapper-ticks {
|
||||
// @include test();
|
||||
height: $ticksH; //temp!
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tick {
|
||||
line-height: $tickLblH;
|
||||
position: absolute;
|
||||
top: 0; right: auto; bottom: 0; left: auto;
|
||||
z-index: 2;
|
||||
&.no-label .label { display: none; }
|
||||
&:before {
|
||||
background: rgba(#fff, 0.3);
|
||||
// border-bottom: 1px solid blue;
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0; right: auto; bottom: auto; left: auto;
|
||||
height: $tickH; width: $tickW;
|
||||
}
|
||||
.label {
|
||||
// @include test();
|
||||
font-size: 0.6em;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
height: $tickLblH; width: $tickLblW;
|
||||
margin-left: -1 * $tickLblW / 2;
|
||||
top: auto; right: auto; bottom: 0; left: 0;
|
||||
|
||||
}
|
||||
}
|
||||
16
platform/commonUI/general/res/sass/forms.scss
Normal file
16
platform/commonUI/general/res/sass/forms.scss
Normal file
@@ -0,0 +1,16 @@
|
||||
@import "compass";
|
||||
@import "compass/css3";
|
||||
@import "compass/css3/border-radius";
|
||||
@import "compass/css3/opacity";
|
||||
@import "compass/utilities";
|
||||
|
||||
@import "constants";
|
||||
@import "mixins";
|
||||
@import "forms/mixins";
|
||||
@import "forms/elems";
|
||||
@import "forms/textarea";
|
||||
@import "forms/text-input";
|
||||
@import "forms/selects";
|
||||
@import "forms/channel-selector";
|
||||
@import "forms/datetime";
|
||||
//@import "forms/filter";
|
||||
@@ -0,0 +1,26 @@
|
||||
.channel-selector {
|
||||
.line {
|
||||
margin-bottom: $interiorMargin;
|
||||
min-height: $formInputH;
|
||||
}
|
||||
.treeview {
|
||||
$myBg: darken($colorBodyBg, 2%);
|
||||
@include subdued-input();
|
||||
min-height: 300px;
|
||||
max-height: 400px;
|
||||
overflow: auto;
|
||||
padding: $interiorMargin;
|
||||
}
|
||||
|
||||
.btns-add-remove {
|
||||
// background: rgba(#ff0000, 0.3);;
|
||||
margin-top: 150px;
|
||||
.btn {
|
||||
display: block;
|
||||
font-size: 1.5em;
|
||||
margin-bottom: $interiorMargin;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
36
platform/commonUI/general/res/sass/forms/_datetime.scss
Normal file
36
platform/commonUI/general/res/sass/forms/_datetime.scss
Normal file
@@ -0,0 +1,36 @@
|
||||
.complex.datetime {
|
||||
span {
|
||||
display: inline-block;
|
||||
margin-right: $interiorMargin;
|
||||
}
|
||||
|
||||
.field-hints,
|
||||
.fields {
|
||||
}
|
||||
|
||||
.field-hints {
|
||||
|
||||
}
|
||||
|
||||
.fields {
|
||||
margin-top: $interiorMarginSm 0;
|
||||
padding: $interiorMarginSm 0;
|
||||
}
|
||||
|
||||
.date {
|
||||
$myW: 80px;
|
||||
width: $myW + $interiorMargin;
|
||||
input {
|
||||
width: $myW;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.time.sm {
|
||||
$myW: 40px;
|
||||
width: $myW + $interiorMargin;
|
||||
input {
|
||||
width: $myW;
|
||||
}
|
||||
}
|
||||
}
|
||||
92
platform/commonUI/general/res/sass/forms/_elems.scss
Normal file
92
platform/commonUI/general/res/sass/forms/_elems.scss
Normal file
@@ -0,0 +1,92 @@
|
||||
.form {
|
||||
.section-header {
|
||||
@include border-radius(3px);
|
||||
background: rgba(white, 0.1);
|
||||
font-size: 0.8em;
|
||||
margin-top: $interiorMargin;
|
||||
padding: $interiorMargin;
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
.form-section {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
@include box-sizing(border-box);
|
||||
@include clearfix;
|
||||
// background: rgba(#00ff00, 0.1);
|
||||
border-top: 1px solid $colorInteriorBorder;
|
||||
// box-sizing: border-box;
|
||||
margin-top: $interiorMargin;
|
||||
padding: $interiorMargin;
|
||||
position: relative;
|
||||
&:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
.label,
|
||||
.controls {
|
||||
// background: rgba(#ffcc00, 0.1);
|
||||
@include box-sizing(border-box);
|
||||
@include clearfix;
|
||||
box-sizing: border-box;
|
||||
font-size: 0.75rem;
|
||||
line-height: $formInputH;
|
||||
min-height: $formInputH;
|
||||
}
|
||||
|
||||
>.label {
|
||||
// Only style this way for immediate children of .form-row; prevents problems when .label is used in .controls section of a form
|
||||
float: left;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
width: $formLabelW;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: lighten($colorBodyFg, 20%);
|
||||
}
|
||||
|
||||
.controls {
|
||||
float: left;
|
||||
// padding-left: $interiorMargin;
|
||||
position: relative;
|
||||
width: 99% - $formLabelW; // Start with less than 100% for Firefox
|
||||
}
|
||||
|
||||
.field-hints {
|
||||
color: darken($colorBodyFg, 20%);
|
||||
}
|
||||
|
||||
.selector-list {
|
||||
// Used in create overlay to display tree view
|
||||
$h: 150px;
|
||||
@include border-radius($basicCr);
|
||||
background: rgba(black, 0.2);
|
||||
position: relative;
|
||||
height: $h;
|
||||
max-width: 50%;
|
||||
.wrapper {
|
||||
$p: $interiorMargin;
|
||||
overflow-y: auto;
|
||||
position: absolute;
|
||||
top: $p;
|
||||
right: $p;
|
||||
bottom: $p;
|
||||
left: $p;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label.form-control.checkbox {
|
||||
input {
|
||||
margin-right: $interiorMargin;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
.hint {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
82
platform/commonUI/general/res/sass/forms/_filter.scss
Normal file
82
platform/commonUI/general/res/sass/forms/_filter.scss
Normal file
@@ -0,0 +1,82 @@
|
||||
.filter,
|
||||
.t-filter {
|
||||
input.filter,
|
||||
input.t-filter-input {
|
||||
@include subdued-input();
|
||||
}
|
||||
input.t-filter-input {
|
||||
height: $formInputH;
|
||||
width: 200px;
|
||||
&:not(.ng-dirty) {
|
||||
// TO-DO: Update compass install to support this
|
||||
// @include input-placeholder {
|
||||
// color: rgba(#fff, 0.3);
|
||||
// font-style: italic;
|
||||
// }
|
||||
}
|
||||
&:not(.ng-dirty) + .t-a-clear {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.icon.ui-symbol {
|
||||
@include border-radius($controlCr);
|
||||
display: block;
|
||||
font-size: 1.3em;
|
||||
height: $formInputH;
|
||||
line-height: $formInputH;
|
||||
padding: 0px 5px;
|
||||
vertical-align: middle;
|
||||
&:hover {
|
||||
background: rgba(white, 0.1);
|
||||
}
|
||||
}
|
||||
.s-a-clear.ui-symbol {
|
||||
$mgn: 4.5px;
|
||||
$d: $formInputH - $mgn * 2;
|
||||
$cb: #fff;
|
||||
$cf: #333;
|
||||
@include border-radius($controlCr);
|
||||
@include box-sizing(border-box);
|
||||
@include opacity(0.2);
|
||||
background: $cb;
|
||||
color: $cf;
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: $d; width: $d;
|
||||
line-height: $d;
|
||||
margin-top: $d * -0.5;
|
||||
overflow: hidden;
|
||||
padding-top: 1px;
|
||||
right: $mgn; top: 50%;
|
||||
text-align: center;
|
||||
z-index: 5;
|
||||
&:hover {
|
||||
@include opacity(0.6);
|
||||
background-color: $colorKey;
|
||||
}
|
||||
}
|
||||
// &:not(ng-dirty)
|
||||
}
|
||||
|
||||
.l-filter {
|
||||
// Holds an input and a clear button
|
||||
display:inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
input.filter {
|
||||
$h: $ueTopBarH;
|
||||
$ip: 10px;
|
||||
font-size: .8em;
|
||||
height: $h;
|
||||
line-height: $h;
|
||||
margin-right: $interiorMargin;
|
||||
margin-top: -5px;
|
||||
padding-left: $ip;
|
||||
padding-right: $ip;
|
||||
}
|
||||
.icon-filter {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
}
|
||||
30
platform/commonUI/general/res/sass/forms/_mixins.scss
Normal file
30
platform/commonUI/general/res/sass/forms/_mixins.scss
Normal file
@@ -0,0 +1,30 @@
|
||||
@mixin input-base($bg: $colorBodyBg, $fg: $colorBodyFg) {
|
||||
@include appearance(none);
|
||||
@include border-radius($controlCr);
|
||||
@include box-sizing(border-box);
|
||||
@include box-shadow(inset rgba(black, 0.5) 0 1px 5px);
|
||||
background: lighten($bg, 20%);
|
||||
border: none;
|
||||
border-bottom: 1px solid lighten($bg, 40%);
|
||||
color: lighten($fg, 20%);
|
||||
outline: none;
|
||||
&.error {
|
||||
background: rgba(red, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin nice-input($bg: $colorBodyBg, $fg: $colorBodyFg) {
|
||||
@include input-base($bg, $fg);
|
||||
padding: 0 $interiorMarginSm;
|
||||
}
|
||||
|
||||
@mixin nice-textarea($bg: $colorBodyBg, $fg: $colorBodyFg) {
|
||||
@include input-base($bg, $fg);
|
||||
padding: $interiorMargin;
|
||||
}
|
||||
|
||||
@mixin subdued-input($bg: $colorBodyBg, $fg: $colorBodyFg) {
|
||||
@include nice-input($bg, $fg);
|
||||
background: lighten($bg, 3%);
|
||||
border-bottom: 1px solid lighten($bg, 10%);
|
||||
}
|
||||
35
platform/commonUI/general/res/sass/forms/_selects.scss
Normal file
35
platform/commonUI/general/res/sass/forms/_selects.scss
Normal file
@@ -0,0 +1,35 @@
|
||||
.form-control.select {
|
||||
$myH: $formInputH + 1;
|
||||
@include btnSubtle($colorBodyBg);
|
||||
margin-right: $interiorMargin;
|
||||
margin-top: 1px;
|
||||
padding: 0 25px 0 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
vertical-align: middle;
|
||||
|
||||
span.arw {
|
||||
display: block;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
right: 8%; top: 10%;
|
||||
}
|
||||
|
||||
select {
|
||||
@include appearance(none);
|
||||
@include box-sizing(border-box);
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
cursor: pointer;
|
||||
// height: $myH;
|
||||
// line-height: $myH;
|
||||
padding: 3px 5px 4px 5px;
|
||||
width: 150%;
|
||||
}
|
||||
|
||||
select:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
14
platform/commonUI/general/res/sass/forms/_text-input.scss
Normal file
14
platform/commonUI/general/res/sass/forms/_text-input.scss
Normal file
@@ -0,0 +1,14 @@
|
||||
input[type="text"] {
|
||||
@include nice-input();
|
||||
height: $formInputH;
|
||||
line-height: $formInputH;
|
||||
vertical-align: middle;
|
||||
&.filter {
|
||||
&.ng-dirty {
|
||||
// background: red;
|
||||
}
|
||||
}
|
||||
&.numeric {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
7
platform/commonUI/general/res/sass/forms/_textarea.scss
Normal file
7
platform/commonUI/general/res/sass/forms/_textarea.scss
Normal file
@@ -0,0 +1,7 @@
|
||||
.edit-main textarea {
|
||||
@include nice-textarea();
|
||||
// font-size: 0.9em;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
47
platform/commonUI/general/res/sass/forms/_validation.scss
Normal file
47
platform/commonUI/general/res/sass/forms/_validation.scss
Normal file
@@ -0,0 +1,47 @@
|
||||
.validates {
|
||||
$symbolW: 15px;
|
||||
$symbolM: $interiorMargin * 2;
|
||||
> .label {
|
||||
// @include test(green, 0.1);
|
||||
padding-right: $symbolW + $symbolM; // Keep room for validation element
|
||||
&::after {
|
||||
// @include test(yellow, 0.3);
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: $symbolM;
|
||||
bottom: 0;
|
||||
left: auto;
|
||||
height: auto;
|
||||
width: $symbolW;
|
||||
font-family: symbolsfont;
|
||||
font-size: 1.1em;
|
||||
text-align: right;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
&.invalid,
|
||||
&.invalid.req {
|
||||
> .label::after {
|
||||
color: $colorFormInvalid;
|
||||
content: "x";
|
||||
}
|
||||
}
|
||||
&.valid,
|
||||
&.valid.req {
|
||||
> .label::after {
|
||||
color: $colorFormValid;
|
||||
content: "2";
|
||||
}
|
||||
}
|
||||
&.req {
|
||||
> .label::after {
|
||||
color: $colorFormRequired;
|
||||
content: "*";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span.req {
|
||||
color: $colorFormRequired;
|
||||
}
|
||||
40
platform/commonUI/general/res/sass/helpers/_bubbles.scss
Normal file
40
platform/commonUI/general/res/sass/helpers/_bubbles.scss
Normal file
@@ -0,0 +1,40 @@
|
||||
.bubble-wrapper {
|
||||
$arwSize: 7px;
|
||||
$c: #990000;
|
||||
@include box-shadow(rgba(black, 0.4) 0 1px 5px);
|
||||
position: absolute;
|
||||
//top: 200px; left: 200px;
|
||||
z-index: 10;
|
||||
.bubble {
|
||||
@include border-radius($basicCr);
|
||||
display: inline-block;
|
||||
background: $c;
|
||||
color: lighten($c, 50%);
|
||||
font-size: 0.8rem;
|
||||
font-style: italic;
|
||||
max-width: 200px;
|
||||
padding: 4px 8px;
|
||||
&:before {
|
||||
content:"";
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
&.arw-left .bubble:before {
|
||||
right: 100%;
|
||||
top: 50%; // 26px;
|
||||
margin-top: -1 * $arwSize;
|
||||
border-top: $arwSize solid transparent;
|
||||
border-bottom: $arwSize solid transparent;
|
||||
border-right: ($arwSize * 1.5) solid $c;
|
||||
}
|
||||
&.arw-down .bubble:before {
|
||||
left: 50%;
|
||||
top: 100%;
|
||||
margin-left: -1 * $arwSize;
|
||||
border-left: $arwSize solid transparent;
|
||||
border-right: $arwSize solid transparent;
|
||||
border-top: ($arwSize * 1.5) solid $c;
|
||||
}
|
||||
}
|
||||
47
platform/commonUI/general/res/sass/helpers/_splitter.scss
Normal file
47
platform/commonUI/general/res/sass/helpers/_splitter.scss
Normal file
@@ -0,0 +1,47 @@
|
||||
.split-layout {
|
||||
$b: lighten($colorBodyBg, 5%);
|
||||
$splitterD: 5px;
|
||||
.splitter {
|
||||
background-color: $b;
|
||||
@include box-shadow(rgba(black, 0.4) 0 0 3px);
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
&.horizontal {
|
||||
// Slides vertically up and down, splitting the element horizontally
|
||||
overflow: hidden; // Suppress overall scroll; each internal pane handles its own overflow
|
||||
.pane {
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
>.splitter {
|
||||
@include controlGrippy($b, horizontal);
|
||||
cursor: row-resize;
|
||||
left: 0; right: 0;
|
||||
width: auto;
|
||||
height: $splitterD;
|
||||
}
|
||||
}
|
||||
&.vertical {
|
||||
// Slides horizontally left to right, splitting the element vertically
|
||||
.pane {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
>.splitter {
|
||||
@include controlGrippy($b, vertical);
|
||||
bottom: 0;
|
||||
cursor: col-resize;
|
||||
width: $splitterD;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.browse-area .splitter {
|
||||
top: $ueBrowseViewBarH + $interiorMargin;
|
||||
}
|
||||
|
||||
.edit-area .splitter {
|
||||
top: 0;
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
@-webkit-keyframes rotation {
|
||||
from {-webkit-transform: rotate(0deg);}
|
||||
to {-webkit-transform: rotate(359deg);}
|
||||
}
|
||||
|
||||
@-moz-keyframes rotation {
|
||||
from {-moz-transform: rotate(0deg);}
|
||||
to {-moz-transform: rotate(359deg);}
|
||||
}
|
||||
|
||||
@-o-keyframes rotation {
|
||||
from {-o-transform: rotate(0deg);}
|
||||
to {-o-transform: rotate(359deg);}
|
||||
}
|
||||
|
||||
@keyframes rotation {
|
||||
from {transform: rotate(0deg);}
|
||||
to {transform: rotate(359deg);}
|
||||
}
|
||||
|
||||
.t-wait-spinner,
|
||||
.wait-spinner {
|
||||
$d: 5%;
|
||||
@include wait-spinner(0.5em, $colorKey);
|
||||
top: 50%; left: 50%;
|
||||
height: auto; width: auto;
|
||||
padding: $d; // Will size object based on parent container WIDTH
|
||||
pointer-events: none;
|
||||
margin-top: $d / -1;
|
||||
margin-left: $d / -1;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.l-wait-spinner-holder {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
&.align-left {
|
||||
.t-wait-spinner {
|
||||
left: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
&.full-size {
|
||||
display: inline-block;
|
||||
height: 100%; width: 100%;
|
||||
.t-wait-spinner {
|
||||
top: 0;
|
||||
margin-top: 0;
|
||||
padding: 30%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.treeview .wait-spinner {
|
||||
$d: 18px;
|
||||
@include wait-spinner(0.25em, $colorKey);
|
||||
height: $d; width: $d;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
top: 2px; left: 0;
|
||||
}
|
||||
9
platform/commonUI/general/res/sass/items.scss
Normal file
9
platform/commonUI/general/res/sass/items.scss
Normal file
@@ -0,0 +1,9 @@
|
||||
@import "compass";
|
||||
@import "compass/css3";
|
||||
@import "compass/css3/border-radius";
|
||||
@import "compass/css3/opacity";
|
||||
@import "compass/utilities";
|
||||
|
||||
@import "constants";
|
||||
@import "mixins";
|
||||
@import "items/item";
|
||||
93
platform/commonUI/general/res/sass/items/_item.scss
Normal file
93
platform/commonUI/general/res/sass/items/_item.scss
Normal file
@@ -0,0 +1,93 @@
|
||||
.items-holder {
|
||||
@include clearfix;
|
||||
overflow-y: auto;
|
||||
.contents { top: 0; }
|
||||
.item {
|
||||
&.grid-item {
|
||||
$d: $ueBrowseGridItemLg;
|
||||
@include btnSubtle($colorItemBase);
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
height: $d;
|
||||
// padding-bottom: 32%;
|
||||
width: $d;
|
||||
margin-bottom: $interiorMarginSm;
|
||||
margin-right: $interiorMarginSm;
|
||||
position: relative;
|
||||
&:hover .item-main {
|
||||
.item-type {
|
||||
color: $colorKey !important;
|
||||
}
|
||||
.item-open {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.bar {
|
||||
&.top-bar.abs {
|
||||
bottom: auto;
|
||||
height: $ueBrowseGridItemTopBarH;
|
||||
line-height: $ueBrowseGridItemTopBarH;
|
||||
z-index: 5;
|
||||
.left, .right {
|
||||
width: auto;
|
||||
.icon {
|
||||
margin-left: $interiorMargin;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.bottom-bar.abs {
|
||||
top: auto;
|
||||
height: $ueBrowseGridItemBottomBarH;
|
||||
padding: $interiorMargin;
|
||||
}
|
||||
}
|
||||
.item-main {
|
||||
$h: $ueBrowseGridItemLg;
|
||||
$lh: $h * 0.9;
|
||||
// @include test();
|
||||
div {
|
||||
// background: rgba(deeppink, 0.2);
|
||||
}
|
||||
z-index: 1;
|
||||
.item-type {
|
||||
color: $colorItemFg;
|
||||
text-align: center;
|
||||
font-size: 7em;
|
||||
line-height: $lh;
|
||||
}
|
||||
.item-open {
|
||||
// color: lighten($colorItemBase, 15%);
|
||||
display: none;
|
||||
font-size: 5em;
|
||||
line-height: $lh;
|
||||
left: auto; width: 30px;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
@include txtShdwSubtle();
|
||||
color: lighten($colorBodyFg, 20%);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
// font-weight: bold;
|
||||
}
|
||||
.details {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
&.selected {
|
||||
$cfg: lighten($colorItemSelected, 35%);
|
||||
$cfgh: lighten($cfg, 30%);
|
||||
@include btnNoticeable($colorItemSelected);
|
||||
color: $cfg;
|
||||
.item-type, .top-bar .icon:not(.alert) { color: $cfg }
|
||||
.item-main .item-open { color: $cfg }
|
||||
.title { color: $cfgh; }
|
||||
&:hover {
|
||||
.item-main .item-type { color: $cfgh !important; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
80
platform/commonUI/general/res/sass/lists/_tabular.scss
Normal file
80
platform/commonUI/general/res/sass/lists/_tabular.scss
Normal file
@@ -0,0 +1,80 @@
|
||||
.w1 {
|
||||
background: $tabularColorHeaderBg;
|
||||
padding-top: $tabularHeaderH;
|
||||
position: relative;
|
||||
}
|
||||
.w2 {
|
||||
background: $tabularColorBodyBg;
|
||||
overflow-y: auto;
|
||||
|
||||
}
|
||||
.tabular {
|
||||
@include box-sizing(border-box);
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
display: table;
|
||||
font-size: 0.8em;
|
||||
width: 100%;
|
||||
.tr {
|
||||
display: table-row;
|
||||
&:first-child .td {
|
||||
border-top: none;
|
||||
}
|
||||
&:hover {
|
||||
background: rgba(white, 0.1);
|
||||
}
|
||||
&.header {
|
||||
display: table-header-group;
|
||||
.th {
|
||||
border: none;
|
||||
color: transparent;
|
||||
height: 0px;
|
||||
line-height: 0;
|
||||
padding: 0 $tabularTdPadLR;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle; // This is crucial to hiding f**king 4px height injected by browser by default
|
||||
&:first-child em {
|
||||
border-left: none;
|
||||
}
|
||||
&.sort {
|
||||
em:after {
|
||||
display: inline-block;
|
||||
font-family: symbolsfont;
|
||||
margin-left: 5px;
|
||||
}
|
||||
&.asc em:after { content: '0'; }
|
||||
&.desc em:after { content: '1'; }
|
||||
}
|
||||
em {
|
||||
// background: rgba(green, 0.2);
|
||||
border-left: 1px solid $tabularColorBorder;
|
||||
color: $tabularColorHeaderFg;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
height: $tabularHeaderH;
|
||||
line-height: $tabularHeaderH;
|
||||
margin-left: - $tabularTdPadLR;
|
||||
padding: 0 $tabularTdPadLR;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
vertical-align: middle;
|
||||
&:hover {
|
||||
color: lighten($tabularColorHeaderFg, 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.th, .td {
|
||||
display: table-cell;
|
||||
}
|
||||
.td {
|
||||
border-top: 1px solid $tabularColorBorder;
|
||||
padding: $tabularTdPadTB $tabularTdPadLR;
|
||||
&.numeric {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
48
platform/commonUI/general/res/sass/overlay/_overlay.scss
Normal file
48
platform/commonUI/general/res/sass/overlay/_overlay.scss
Normal file
@@ -0,0 +1,48 @@
|
||||
.overlay {
|
||||
.blocker {
|
||||
background: $colorOvrBlocker;
|
||||
z-index: 100;
|
||||
}
|
||||
.btn.close {
|
||||
position: absolute;
|
||||
top: $interiorMargin; right: $interiorMargin; bottom: auto; left: auto;
|
||||
}
|
||||
.editor {
|
||||
// background: $colorBodyBg;
|
||||
}
|
||||
>.holder {
|
||||
$i: 15%;
|
||||
@include containerSubtle();
|
||||
@include border-radius($basicCr * 3);
|
||||
color: $colorOvrFg;
|
||||
top: $i; right: $i; bottom: $i; left: $i;
|
||||
z-index: 101;
|
||||
>.contents {
|
||||
$m: 20px;
|
||||
top: $m; right: $m; bottom: $m; left: $m;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
height: $ovrTopBarH;
|
||||
}
|
||||
|
||||
.editor {
|
||||
top: $ovrTopBarH + ($interiorMargin * 2);
|
||||
bottom: $ovrFooterH + $interiorMargin * 2;
|
||||
left: 0; right: 0;
|
||||
}
|
||||
|
||||
.bottom-bar {
|
||||
top: auto; right: 0; bottom: 0; left: 0;
|
||||
font-size: 1em;
|
||||
height: $ovrFooterH;
|
||||
text-align: right;
|
||||
.btn {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
9
platform/commonUI/general/res/sass/plots.scss
Normal file
9
platform/commonUI/general/res/sass/plots.scss
Normal file
@@ -0,0 +1,9 @@
|
||||
@import "compass";
|
||||
@import "compass/css3";
|
||||
@import "compass/css3/border-radius";
|
||||
@import "compass/css3/opacity";
|
||||
@import "compass/utilities";
|
||||
|
||||
@import "constants";
|
||||
@import "mixins";
|
||||
@import "plots/plots-main";
|
||||
225
platform/commonUI/general/res/sass/plots/_plots-main.scss
Normal file
225
platform/commonUI/general/res/sass/plots/_plots-main.scss
Normal file
@@ -0,0 +1,225 @@
|
||||
$yBarW: 60px;
|
||||
$yLabelW: auto; //10px;
|
||||
$xBarH: 32px;
|
||||
$legendH: 24px;
|
||||
$colorHash: rgba(white, 0.3);
|
||||
$styleHash: dashed;
|
||||
$swatchD: 8px;
|
||||
$plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBarW); // Top, right, bottom, left
|
||||
|
||||
.gl-plot {
|
||||
color: $colorBodyFg;
|
||||
font-size: 0.7rem;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.gl-plot-axis-area {
|
||||
// @include test(green);
|
||||
position: absolute;
|
||||
&.gl-plot-x {
|
||||
top: auto;
|
||||
right: 0;
|
||||
bottom: $interiorMargin;
|
||||
left: $yBarW;
|
||||
height: $xBarH;
|
||||
width: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
&.gl-plot-y {
|
||||
top: $legendH + $interiorMargin;
|
||||
right: auto;
|
||||
bottom: nth($plotDisplayArea, 3);
|
||||
left: 0;
|
||||
width: $yBarW;
|
||||
}
|
||||
}
|
||||
|
||||
.gl-plot-coords {
|
||||
@include box-sizing(border-box);
|
||||
@include border-radius($controlCr);
|
||||
background: rgba($colorAlt1, 0.5);
|
||||
color: lighten($colorBodyFg, 30%);
|
||||
padding: 2px 5px;
|
||||
position: absolute;
|
||||
top: nth($plotDisplayArea,1) + $interiorMarginLg;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: nth($plotDisplayArea,4) + $interiorMarginLg;
|
||||
z-index: 10;
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.gl-plot-display-area {
|
||||
position: absolute;
|
||||
top: nth($plotDisplayArea, 1);
|
||||
right: nth($plotDisplayArea, 2);
|
||||
bottom: nth($plotDisplayArea, 3);
|
||||
left: nth($plotDisplayArea, 4);
|
||||
cursor: crosshair;
|
||||
border: 1px solid $colorInteriorBorder;
|
||||
}
|
||||
|
||||
.gl-plot-label {
|
||||
// @include test(yellow);
|
||||
color: lighten($colorBodyFg, 20%);
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
// text-transform: uppercase;
|
||||
|
||||
&.gl-plot-x-label {
|
||||
top: auto;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&.gl-plot-y-label {
|
||||
$x: -50%;
|
||||
$r: -90deg;
|
||||
@include transform-origin(50%, 0);
|
||||
@include transform(translateX($x) rotate($r));
|
||||
display: inline-block;
|
||||
margin-left: $interiorMargin; // Kick off the left edge
|
||||
left: 0;
|
||||
top: 50%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.gl-plot-y-options {
|
||||
$h: 32px;
|
||||
// @include test();
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: $yLabelW + $interiorMargin;
|
||||
margin-top: $h / -2;
|
||||
height: auto;
|
||||
min-height: $h;
|
||||
width: $h;
|
||||
}
|
||||
|
||||
.gl-plot-hash {
|
||||
position: absolute;
|
||||
border: 0 $colorHash $styleHash;
|
||||
&.hash-v {
|
||||
border-right-width: 1px;
|
||||
height: 100%;
|
||||
}
|
||||
&.hash-h {
|
||||
border-bottom-width: 1px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.gl-plot-legend {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: auto;
|
||||
left: 0;
|
||||
height: $legendH;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
// .plot-legend-item {
|
||||
// display: inline-block;
|
||||
// margin-right: $interiorMarginLg;
|
||||
// span {
|
||||
// vertical-align: middle;
|
||||
// }
|
||||
// .plot-color-swatch {
|
||||
// @include border-radius(2px);
|
||||
// display: inline-block;
|
||||
// height: $swatchD;
|
||||
// width: $swatchD;
|
||||
// margin-right: $interiorMarginSm;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
.gl-plot-legend,
|
||||
.legend {
|
||||
.plot-legend-item,
|
||||
.legend-item {
|
||||
display: inline-block;
|
||||
margin-right: $interiorMarginLg;
|
||||
span {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.plot-color-swatch,
|
||||
.color-swatch {
|
||||
@include border-radius(2px);
|
||||
display: inline-block;
|
||||
height: $swatchD;
|
||||
width: $swatchD;
|
||||
margin-right: $interiorMarginSm;
|
||||
|
||||
}
|
||||
.title-label {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tick {
|
||||
position: absolute;
|
||||
border: 0 $colorHash solid;
|
||||
&.tick-x {
|
||||
border-right-width: 1px;
|
||||
height: 100%; // Assumption is that the tick will be in a holder that will set it's height;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.gl-plot-tick,
|
||||
.tick-label {
|
||||
// @include test(red);
|
||||
font-size: 0.7rem;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
&.gl-plot-x-tick-label,
|
||||
&.tick-label-x {
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
height: auto;
|
||||
width: 20%;
|
||||
margin-left: -10%;
|
||||
text-align: center;
|
||||
}
|
||||
&.gl-plot-y-tick-label,
|
||||
&.tick-label-y {
|
||||
top: auto;
|
||||
height: 1em;
|
||||
width: auto;
|
||||
margin-bottom: -0.5em;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.gl-plot-tick {
|
||||
// @include test(red);
|
||||
&.gl-plot-x-tick-label {
|
||||
top: $interiorMargin;
|
||||
}
|
||||
&.gl-plot-y-tick-label {
|
||||
right: $interiorMargin;
|
||||
left: $interiorMargin;
|
||||
}
|
||||
}
|
||||
|
||||
.tick-label {
|
||||
&.tick-label-x {
|
||||
top: 0;
|
||||
}
|
||||
&.tick-label-y {
|
||||
right: 0; left: 0;
|
||||
}
|
||||
}
|
||||
3
platform/commonUI/general/res/sass/theme-espresso.scss
Normal file
3
platform/commonUI/general/res/sass/theme-espresso.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
@import "constants";
|
||||
@import "themes/theme-espresso";
|
||||
@import "main";
|
||||
@@ -0,0 +1,2 @@
|
||||
/* CONSTANTS */
|
||||
$bodyMargin: 5px;
|
||||
9
platform/commonUI/general/res/sass/tree.scss
Normal file
9
platform/commonUI/general/res/sass/tree.scss
Normal file
@@ -0,0 +1,9 @@
|
||||
@import "compass";
|
||||
@import "compass/css3";
|
||||
@import "compass/css3/border-radius";
|
||||
@import "compass/css3/opacity";
|
||||
@import "compass/utilities";
|
||||
|
||||
@import "constants";
|
||||
@import "mixins";
|
||||
@import "tree/tree";
|
||||
101
platform/commonUI/general/res/sass/tree/_tree.scss
Normal file
101
platform/commonUI/general/res/sass/tree/_tree.scss
Normal file
@@ -0,0 +1,101 @@
|
||||
ul.tree {
|
||||
@include menuUlReset();
|
||||
li {
|
||||
.tree-item {
|
||||
// @include test();
|
||||
@include border-radius($basicCr);
|
||||
@include single-transition(background-color, 0.25s);
|
||||
display: block;
|
||||
font-size: 0.80rem;
|
||||
height: $menuLineH;
|
||||
line-height: $menuLineH;
|
||||
margin-bottom: $interiorMarginSm;
|
||||
// overflow: hidden;
|
||||
// padding: 2px 4px 2px 7px;
|
||||
position: relative;
|
||||
// white-space: nowrap;
|
||||
&.loading {
|
||||
color: darken($colorBodyFg, 20%);
|
||||
font-style: italic;
|
||||
.wait-spinner {
|
||||
margin-left: 14px;
|
||||
}
|
||||
}
|
||||
&:not(.loading) {
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background: lighten($colorBodyBg, 5%);
|
||||
color: lighten($colorBodyFg, 20%);
|
||||
.context-trigger {
|
||||
display: block;
|
||||
}
|
||||
.icon {
|
||||
color: $colorItemTreeIconHover;
|
||||
}
|
||||
}
|
||||
}
|
||||
.selected {
|
||||
color: #fff;
|
||||
}
|
||||
.view-control {
|
||||
// @include test();
|
||||
display: inline-block;
|
||||
// margin-right: $interiorMargin;
|
||||
// vertical-align: middle;
|
||||
width: $treeVCW;
|
||||
&:hover {
|
||||
color: $colorItemTreeVCHover;
|
||||
}
|
||||
}
|
||||
.context-trigger {
|
||||
$h: 0.9rem;
|
||||
display: none;
|
||||
top: -1px;
|
||||
position: absolute;
|
||||
right: $interiorMarginSm;
|
||||
.btn-invoke-menu {
|
||||
font-size: 0.75em;
|
||||
height: $h;
|
||||
line-height: $h;
|
||||
}
|
||||
}
|
||||
.icon {
|
||||
// @include test();
|
||||
@include txtShdwSubtle(0.6);
|
||||
color: $colorItemTreeIcon;
|
||||
left: $treeVCW + $interiorMargin;
|
||||
.alert {
|
||||
@include txtShdwSubtle(0.3);
|
||||
background: $colorBodyBg;
|
||||
color: $colorAlert;
|
||||
font-size: 0.7em;
|
||||
margin-top: -3px;
|
||||
top: 0;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: 9px;
|
||||
height: auto;
|
||||
width: auto;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
.title-label {
|
||||
// @include test();
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: $treeVCW + $treeTypeIconW + ($interiorMargin * 2); //38px;
|
||||
right: $treeContextTriggerW + $interiorMargin;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
height: $menuLineH;
|
||||
bottom: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
ul.tree {
|
||||
margin-left: $treeVCW + $interiorMargin;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
.ue-bottom-bar {
|
||||
color: lighten($colorBodyBg, 30%);
|
||||
font-size: 0.7em;
|
||||
line-height: $ueFooterH - 4px;
|
||||
.status-holder {
|
||||
@include border-radius($basicCr * 1.75);
|
||||
@include box-sizing(border-box);
|
||||
background: $colorFooterBg;
|
||||
border-bottom: 1px solid lighten($colorBodyBg, 10%);
|
||||
padding: 2px 5px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.app-logo {
|
||||
@include box-sizing(border-box);
|
||||
font-size: 0.8em;
|
||||
line-height: $ueFooterH - 10px;
|
||||
padding-top: 1px;
|
||||
text-transform: uppercase;
|
||||
&.logo-warp {
|
||||
background: url($dirImgs + 'logo-warp.png') no-repeat left top;
|
||||
color: lighten($colorBodyBg, 40%);
|
||||
font-size: 0.7rem;
|
||||
padding-top: 3px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status.block {
|
||||
display: inline-block;
|
||||
margin-right: $interiorMargin * 4;
|
||||
.status-indicator {
|
||||
@include border-radius($controlCr * 0.9);
|
||||
@include box-shadow(inset rgba(black, 0.5) 0 0 3px);
|
||||
@include text-shadow(rgba(black, 0.3) 0 0 2px);
|
||||
display: inline-block;
|
||||
font-size: 1.25em;
|
||||
vertical-align: middle;
|
||||
margin-right: $interiorMargin;
|
||||
&.ok {
|
||||
color: #009900;
|
||||
}
|
||||
&.caution {
|
||||
color: #ffaa00;
|
||||
}
|
||||
}
|
||||
}
|
||||
26
platform/commonUI/general/res/sass/user-environ/_frame.scss
Normal file
26
platform/commonUI/general/res/sass/user-environ/_frame.scss
Normal file
@@ -0,0 +1,26 @@
|
||||
.frame {
|
||||
$ohH: 20px;
|
||||
$bc: $colorInteriorBorder;
|
||||
&.child-frame.panel {
|
||||
background: $colorBodyBg;
|
||||
border: 1px solid $bc;
|
||||
&:hover {
|
||||
border-color: lighten($bc, 10%);
|
||||
}
|
||||
}
|
||||
>.object-header.abs {
|
||||
font-size: 0.75em;
|
||||
height: $ohH;
|
||||
}
|
||||
>.object-holder.abs {
|
||||
top: $ohH + $interiorMarginSm;
|
||||
}
|
||||
}
|
||||
|
||||
.edit-main .frame.child-frame.panel {
|
||||
&:hover {
|
||||
border-color: $colorKey;
|
||||
@include boxShdwLarge();
|
||||
}
|
||||
|
||||
}
|
||||
210
platform/commonUI/general/res/sass/user-environ/_layout.scss
Normal file
210
platform/commonUI/general/res/sass/user-environ/_layout.scss
Normal file
@@ -0,0 +1,210 @@
|
||||
@mixin cols($totalCols, $span) {
|
||||
$cw: 100% / $totalCols;
|
||||
min-width: (500px / $totalCols) * $span;
|
||||
@if ($totalCols != $span) {
|
||||
width: ($cw * $span) - $ueColMargin;
|
||||
} @else {
|
||||
width: $cw;
|
||||
}
|
||||
}
|
||||
|
||||
.browse-area,
|
||||
.edit-area,
|
||||
.editor {
|
||||
@include border-radius($basicCr * 1.5);
|
||||
position: absolute;
|
||||
.contents {
|
||||
// overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.user-environ {
|
||||
.browse-area,
|
||||
.edit-area,
|
||||
.editor {
|
||||
top: $bodyMargin + $ueTopBarH + ($interiorMargin);
|
||||
right: $bodyMargin;
|
||||
bottom: $bodyMargin + $ueFooterH + $interiorMargin;
|
||||
left: $bodyMargin;
|
||||
}
|
||||
|
||||
.edit-area {
|
||||
$tbH: $ueEditToolBarH;
|
||||
.tool-bar {
|
||||
bottom: auto;
|
||||
height: $tbH;
|
||||
line-height: $tbH - 2;
|
||||
}
|
||||
.work-area {
|
||||
top: $tbH + $interiorMargin * 2;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-bar {
|
||||
top: auto;
|
||||
right: $bodyMargin;
|
||||
bottom: $bodyMargin;
|
||||
left: $bodyMargin;
|
||||
height: $ueFooterH;
|
||||
.status-holder {
|
||||
right: $ueAppLogoW + $bodyMargin;
|
||||
}
|
||||
.app-logo {
|
||||
left: auto;
|
||||
width: $ueAppLogoW;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.contents {
|
||||
$myM: $interiorMargin;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: $myM;
|
||||
right: $myM;
|
||||
bottom: $myM;
|
||||
left: $myM;
|
||||
&.nomargin {
|
||||
$myM: 0px;
|
||||
right: $myM;
|
||||
bottom: $myM;
|
||||
left: $myM;
|
||||
}
|
||||
}
|
||||
|
||||
.bar {
|
||||
.icon.major {
|
||||
margin-right: $interiorMargin;
|
||||
}
|
||||
&.abs {
|
||||
text-wrap: none;
|
||||
white-space: nowrap;
|
||||
&.left,
|
||||
.left {
|
||||
width: 45%;
|
||||
right: auto;
|
||||
}
|
||||
&.right,
|
||||
.right {
|
||||
width: 45%;
|
||||
left: auto;
|
||||
right: 0;
|
||||
text-align: right;
|
||||
.icon.major {
|
||||
margin-left: $interiorMargin * 3;
|
||||
}
|
||||
// .icon.major {
|
||||
// margin-left: $interiorMargin;
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cols {
|
||||
@include clearfix;
|
||||
.col {
|
||||
@include box-sizing(border-box);
|
||||
@include clearfix;
|
||||
// background: rgba(#ffcc00, 0.2);
|
||||
float: left;
|
||||
margin-left: $ueColMargin;
|
||||
padding-left: $interiorMargin;
|
||||
position: relative;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
&.cols-2 {
|
||||
$nc: 2;
|
||||
.col-1 {
|
||||
@include cols($nc, 1);
|
||||
}
|
||||
}
|
||||
&.cols-16 {
|
||||
$nc: 16;
|
||||
.col-1 {
|
||||
@include cols($nc, 1);
|
||||
}
|
||||
.col-2 {
|
||||
@include cols($nc, 2);
|
||||
}
|
||||
.col-7 {
|
||||
@include cols($nc, 7);
|
||||
}
|
||||
}
|
||||
&.cols-32 {
|
||||
$nc: 32;
|
||||
.col-2 {
|
||||
@include cols($nc, 2);
|
||||
}
|
||||
.col-15 {
|
||||
@include cols($nc, 15);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pane {
|
||||
position: absolute;
|
||||
&.treeview {
|
||||
.create-btn-holder {
|
||||
bottom: auto; height: $ueBrowseViewBarH;
|
||||
}
|
||||
.tree-holder {
|
||||
overflow: auto;
|
||||
top: $ueBrowseViewBarH + $interiorMargin;
|
||||
}
|
||||
}
|
||||
&.items {
|
||||
.object-browse-bar {
|
||||
// bottom: auto;
|
||||
}
|
||||
.object-holder {
|
||||
top: $ueBrowseViewBarH + $interiorMargin;
|
||||
}
|
||||
}
|
||||
&.edit-main {
|
||||
.object-holder {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
&.edit-objects {
|
||||
}
|
||||
.object-holder {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.split-layout {
|
||||
&.horizontal {
|
||||
// Slides up and down
|
||||
>.pane {
|
||||
margin-top: $interiorMargin;
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.vertical {
|
||||
// Slides left and right
|
||||
>.pane {
|
||||
margin-left: $interiorMargin;
|
||||
>.holder {
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
.holder {
|
||||
right: $interiorMargin;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.vscroll {
|
||||
overflow-y: auto;
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
.object-browse-bar {
|
||||
height: $ueBrowseViewBarH;
|
||||
line-height: $ueBrowseViewBarH;
|
||||
.items-select {
|
||||
.btn-menu {
|
||||
margin-right: $interiorMargin * 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
.tool-bar {
|
||||
border-bottom: 1px solid $colorInteriorBorder;
|
||||
.control-group {
|
||||
height: $ueEditToolBarH;
|
||||
}
|
||||
input[type="text"] {
|
||||
@include box-sizing(border-box);
|
||||
font-size: .9em;
|
||||
height: $ueEditToolBarButtonH;
|
||||
margin-bottom: 1px;
|
||||
position: relative;
|
||||
&.sm {
|
||||
width: $ueEditToolBarButtonH;
|
||||
}
|
||||
}
|
||||
.input-labeled label {
|
||||
font-size: $ueEditToolBarButtonH * $btnFontSizeToH;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
.top-bar {
|
||||
// $h: $ueTopBarH - 5px;
|
||||
// background: rgba(#ff0000, 0.2);
|
||||
line-height: $ueTopBarH;
|
||||
|
||||
&.browse,
|
||||
&.edit {
|
||||
top: $bodyMargin; right: $bodyMargin; bottom: auto; left: $bodyMargin;
|
||||
height: $ueTopBarH;
|
||||
}
|
||||
|
||||
.action {
|
||||
}
|
||||
|
||||
.title {
|
||||
color: #fff;
|
||||
// font-weight: bold;
|
||||
}
|
||||
|
||||
.buttons-main {
|
||||
font-size: 0.8em;
|
||||
left: auto;
|
||||
text-align: right;
|
||||
// width: 200px;
|
||||
.btn {
|
||||
margin-left: $interiorMargin;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.edit-mode {
|
||||
.top-bar {
|
||||
.buttons-main {
|
||||
// background: red;
|
||||
// width: 600px;
|
||||
white-space: nowrap;
|
||||
&.abs {
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user