[Mobile] Merge
Merged open73 into mobile. Search bar is currently covering the create button slightly.
This commit is contained in:
Shivam Dave
@@ -47,6 +47,8 @@ $colorPausedBg: #c56f01;
|
||||
$colorPausedFg: #fff;
|
||||
$colorCreateBtn: $colorKey;
|
||||
$colorGridLines: rgba(#fff, 0.05);
|
||||
$colorFormLines: rgba(#fff, 0.1);
|
||||
$colorFormSectionHeader: rgba(#000, 0.2);
|
||||
// Menu colors
|
||||
$colorMenuBg: lighten($colorBodyBg, 23%);
|
||||
$colorMenuFg: lighten($colorMenuBg, 70%);
|
||||
@@ -104,6 +106,7 @@ $treeSearchInputBarH: 25px;
|
||||
// Overlay
|
||||
$ovrTopBarH: 60px;
|
||||
$ovrFooterH: 40px;
|
||||
$overlayMargin: 25px;
|
||||
// Items
|
||||
$ueBrowseGridItemLg: 200px;
|
||||
$ueBrowseGridItemTopBarH: 20px;
|
||||
@@ -111,6 +114,7 @@ $ueBrowseGridItemBottomBarH: 30px;
|
||||
$itemPadLR: 5px;
|
||||
// Tree
|
||||
$treeVCW: 10px;
|
||||
$treeTypeIconH: 16px;
|
||||
$treeTypeIconW: 20px;
|
||||
$treeContextTriggerW: 20px;
|
||||
$colorItemTreeIcon: $colorKey;
|
||||
@@ -144,10 +148,13 @@ $reqSymbolFontSize: 0.7em;
|
||||
|
||||
/************************** CONTROLS */
|
||||
$controlDisabledOpacity: 0.3;
|
||||
$formLabelW: 20%;
|
||||
$formLabelW: 30%;
|
||||
$formInputH: 22px;
|
||||
$formRowCtrlsH: 14px;
|
||||
$formTBPad: $interiorMargin;
|
||||
$formLRPad: $interiorMargin;
|
||||
$menuLineH: 1.5rem;
|
||||
$menuLineHPx: 24px;
|
||||
$scrollbarTrackSize: 10px;
|
||||
$scrollbarTrackColorBg: rgba(#000, 0.4);
|
||||
$btnStdH: 25px;
|
||||
|
||||
37
platform/commonUI/general/res/sass/_flex.scss
Normal file
37
platform/commonUI/general/res/sass/_flex.scss
Normal file
@@ -0,0 +1,37 @@
|
||||
.l-flex {
|
||||
&.l-flex-justify {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.l-flex-row,
|
||||
&.l-flex-row {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
div, span {
|
||||
//@include tmpBorder();
|
||||
}
|
||||
> div, > span {
|
||||
//flex: 1 1 0;
|
||||
}
|
||||
}
|
||||
.l-flex-max {
|
||||
flex: 1 0 !important;
|
||||
}
|
||||
|
||||
.flex-ignore {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
}
|
||||
|
||||
// TEMP, move out of here once working
|
||||
.object-browse-bar.bar > div.abs {
|
||||
@include test(green);
|
||||
}
|
||||
|
||||
|
||||
.l-flex-row .title-label {
|
||||
@include test(blue);
|
||||
flex: 1 0 !important;
|
||||
}
|
||||
|
||||
@@ -71,12 +71,6 @@ p {
|
||||
margin-bottom: $interiorMarginLg;
|
||||
}
|
||||
|
||||
span {
|
||||
/* 618 DEBUG
|
||||
box-sizing: border-box;
|
||||
*/
|
||||
}
|
||||
|
||||
mct-container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -45,7 +45,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.bar .icon {
|
||||
.bar .ui-symbol {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@@ -65,9 +65,9 @@
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.tree-item .type-icon {
|
||||
font-size: 16px; // 16px is crisp size
|
||||
}
|
||||
//.tree-item .type-icon {
|
||||
// font-size: 16px; // 16px is crisp size
|
||||
//}
|
||||
|
||||
.l-icon-link:before {
|
||||
content: "\f4";
|
||||
|
||||
@@ -23,154 +23,158 @@
|
||||
@mixin absPosDefault($offset: 0px, $overflowHidden: hidden) {
|
||||
overflow: $overflowHidden;
|
||||
position: absolute;
|
||||
top: $offset; right: $offset; bottom: $offset; left: $offset;
|
||||
width: auto; height: auto;
|
||||
top: $offset;
|
||||
right: $offset;
|
||||
bottom: $offset;
|
||||
left: $offset;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@mixin ancillaryIcon($d, $c) {
|
||||
// Used for small icons used in combination with larger icons,
|
||||
// like the link and alert icons in tree items.
|
||||
color: $c;
|
||||
font-size: $d;
|
||||
line-height: $d;
|
||||
height: $d;
|
||||
width: $d;
|
||||
// Used for small icons used in combination with larger icons,
|
||||
// like the link and alert icons in tree items.
|
||||
color: $c;
|
||||
font-size: $d;
|
||||
line-height: $d;
|
||||
height: $d;
|
||||
width: $d;
|
||||
}
|
||||
|
||||
@mixin trans-prop-nice($props, $t: 500ms) {
|
||||
@if $t == 0 {
|
||||
@include transition-property(none);
|
||||
} @else {
|
||||
@include transition-property($props);
|
||||
@include transition-duration($t);
|
||||
@include transition-timing-function(ease-in-out);
|
||||
}
|
||||
@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) {
|
||||
@if $t == 0 {
|
||||
@include transition-property(none);
|
||||
} @else {
|
||||
@include transition-property(visibility, opacity, background-color, border-color);
|
||||
@include transition-duration($t);
|
||||
@include transition-timing-function(ease-in-out);
|
||||
}
|
||||
@if $t == 0 {
|
||||
@include transition-property(none);
|
||||
} @else {
|
||||
@include transition-property(visibility, opacity, background-color, border-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($t);
|
||||
@include transition-timing-function(ease-in-out);
|
||||
@include transition-property(height, bottom, top);
|
||||
@include transition-duration($t);
|
||||
@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);
|
||||
@include transition-property(width, left, right);
|
||||
@include transition-duration($t);
|
||||
@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;
|
||||
$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;
|
||||
$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 triangle($dir: "left", $size: 5px, $ratio: 1, $color: red) {
|
||||
//$size: $size*2;
|
||||
width: 0;
|
||||
height: 0;
|
||||
$slopedB: $size/$ratio solid transparent;
|
||||
$straightB: $size solid $color;
|
||||
@if $dir == "up" {
|
||||
border-left: $slopedB;
|
||||
border-right: $slopedB;
|
||||
border-bottom: $straightB;
|
||||
} @else if $dir == "right" {
|
||||
border-top: $slopedB;
|
||||
border-bottom: $slopedB;
|
||||
border-left: $straightB;
|
||||
} @else if $dir == "down" {
|
||||
border-left: $slopedB;
|
||||
border-right: $slopedB;
|
||||
border-top: $straightB;
|
||||
} @else {
|
||||
border-top: $slopedB;
|
||||
border-bottom: $slopedB;
|
||||
border-right: $straightB;
|
||||
}
|
||||
//$size: $size*2;
|
||||
width: 0;
|
||||
height: 0;
|
||||
$slopedB: $size/$ratio solid transparent;
|
||||
$straightB: $size solid $color;
|
||||
@if $dir == "up" {
|
||||
border-left: $slopedB;
|
||||
border-right: $slopedB;
|
||||
border-bottom: $straightB;
|
||||
} @else if $dir == "right" {
|
||||
border-top: $slopedB;
|
||||
border-bottom: $slopedB;
|
||||
border-left: $straightB;
|
||||
} @else if $dir == "down" {
|
||||
border-left: $slopedB;
|
||||
border-right: $slopedB;
|
||||
border-top: $straightB;
|
||||
} @else {
|
||||
border-top: $slopedB;
|
||||
border-bottom: $slopedB;
|
||||
border-right: $straightB;
|
||||
}
|
||||
}
|
||||
|
||||
@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 100%
|
||||
));
|
||||
background-repeat: repeat;
|
||||
background-size: $d $d;
|
||||
@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 100%
|
||||
));
|
||||
background-repeat: repeat;
|
||||
background-size: $d $d;
|
||||
}
|
||||
|
||||
@mixin bgTicks($c: $colorBodyFg, $repeatDir: 'x') {
|
||||
$deg: 90deg;
|
||||
@if ($repeatDir != 'x') {
|
||||
$deg: 0deg;
|
||||
$repeatDir: repeat-y;
|
||||
} @else {
|
||||
$repeatDir: repeat-x;
|
||||
}
|
||||
$deg: 90deg;
|
||||
@if ($repeatDir != 'x') {
|
||||
$deg: 0deg;
|
||||
$repeatDir: repeat-y;
|
||||
} @else {
|
||||
$repeatDir: repeat-x;
|
||||
}
|
||||
|
||||
@include background-image(linear-gradient($deg,
|
||||
$c 1px, transparent 1px,
|
||||
transparent 100%
|
||||
));
|
||||
background-repeat: $repeatDir;
|
||||
@include background-image(linear-gradient($deg,
|
||||
$c 1px, transparent 1px,
|
||||
transparent 100%
|
||||
));
|
||||
background-repeat: $repeatDir;
|
||||
}
|
||||
|
||||
@mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $hover: false) {
|
||||
$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);
|
||||
$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 box-sizing(border-box);
|
||||
@include boxShdwSubtle();
|
||||
border: none;
|
||||
border-top: 1px solid lighten($gradC1, 2%);
|
||||
color: $fg;
|
||||
display: inline-block;
|
||||
@if $hover == true {
|
||||
&:not(.disabled):hover {
|
||||
@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;
|
||||
}
|
||||
@include background-image(linear-gradient($gradC1, $gradC2));
|
||||
@include border-radius($controlCr);
|
||||
@include box-sizing(border-box);
|
||||
@include boxShdwSubtle();
|
||||
border: none;
|
||||
border-top: 1px solid lighten($gradC1, 2%);
|
||||
color: $fg;
|
||||
display: inline-block;
|
||||
@if $hover == true {
|
||||
&:not(.disabled):hover {
|
||||
@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) {
|
||||
@@ -184,45 +188,45 @@
|
||||
}
|
||||
|
||||
@mixin controlGrippy($b, $direction: horizontal, $w: 1px, $style: dotted) {
|
||||
&:before {
|
||||
@include trans-prop-nice("border-color",0.75s);
|
||||
content: '';
|
||||
display: block;
|
||||
height: auto;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
&:before {
|
||||
@include trans-prop-nice("border-color", 0.75s);
|
||||
content: '';
|
||||
display: block;
|
||||
height: auto;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
|
||||
@if $direction == "horizontal" {
|
||||
border-top: $w $style darken($b, 15%);
|
||||
top: 2px;
|
||||
left: 5px;
|
||||
right: 5px;
|
||||
@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 {
|
||||
@include trans-prop-nice("border-color",50ms);
|
||||
border-color: $colorKey;
|
||||
}
|
||||
} @else if $direction == "vertical" {
|
||||
border-left: $w $style darken($b, 15%);
|
||||
left: 2px;
|
||||
bottom: 5px;
|
||||
top: 5px;
|
||||
}
|
||||
}
|
||||
&:not(.disabled):hover:before {
|
||||
@include trans-prop-nice("border-color", 50ms);
|
||||
border-color: $colorKey;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg) {
|
||||
@include containerSubtle($bg, $fg, true);
|
||||
@include containerSubtle($bg, $fg, true);
|
||||
}
|
||||
|
||||
@mixin btnNoticeable($bg: $colorBodyBg, $fg: $colorBodyFg) {
|
||||
// No longer should be used; use btnSubtle instead
|
||||
//@include containerSubtle($bg, $fg, true);
|
||||
//@include background-image(linear-gradient(lighten($bg, 20%), $bg));
|
||||
/* &:not(.disabled):hover {
|
||||
@include background-image(linear-gradient(lighten($bg, 30%), lighten($bg, 10%)));
|
||||
}*/
|
||||
// No longer should be used; use btnSubtle instead
|
||||
//@include containerSubtle($bg, $fg, true);
|
||||
//@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) {
|
||||
@@ -238,59 +242,60 @@
|
||||
}
|
||||
|
||||
@mixin boxShdwLarge($sVal: 0.7) {
|
||||
@include box-shadow(rgba(black, $sVal) 0 3px 10px);
|
||||
@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);
|
||||
@include box-shadow(rgba($color, $sVal) 0 0 30px);
|
||||
}
|
||||
|
||||
@mixin linearGlow($deg: 0, $c: red, $a: 0.4) {
|
||||
@include background-image(linear-gradient($deg, rgba($c,0), rgba($c, $a) 100%));
|
||||
@include background-image(linear-gradient($deg, rgba($c, 0), rgba($c, $a) 100%));
|
||||
}
|
||||
|
||||
@mixin subtleGrad($deg: 0, $c: red, $a0: 0.2, $a1: 0.3) {
|
||||
@include background-image(linear-gradient($deg, rgba($c,$a0), rgba($c, $a1) 100%));
|
||||
@include background-image(linear-gradient($deg, rgba($c, $a0), rgba($c, $a1) 100%));
|
||||
}
|
||||
|
||||
@mixin txtShdwSubtle($sVal: 0.1) {
|
||||
@include text-shadow(rgba(black, $sVal) 0 1px 2px);
|
||||
@include text-shadow(rgba(black, $sVal) 0 1px 2px);
|
||||
}
|
||||
|
||||
@mixin txtShdwLarge($sVal: 0.7) {
|
||||
@include text-shadow(rgba(black, $sVal) 0 3px 7px);
|
||||
@include text-shadow(rgba(black, $sVal) 0 3px 7px);
|
||||
}
|
||||
|
||||
/*********************************************** FORM ELEMENTS */
|
||||
@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.65) 0 1px 4px);
|
||||
// background: lighten($bg, 20%);
|
||||
background: rgba(#fff, 0.1);
|
||||
border: none;
|
||||
//border-bottom: 1px solid rgba(#fff, 0.1);
|
||||
color: lighten($fg, 20%);
|
||||
outline: none;
|
||||
&.error {
|
||||
background: rgba(red, 0.5);
|
||||
}
|
||||
@include appearance(none);
|
||||
@include border-radius($controlCr);
|
||||
@include box-sizing(border-box);
|
||||
@include box-shadow(inset rgba(black, 0.65) 0 1px 4px);
|
||||
// background: lighten($bg, 20%);
|
||||
background: rgba(#fff, 0.1);
|
||||
border: none;
|
||||
//border-bottom: 1px solid rgba(#fff, 0.1);
|
||||
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;
|
||||
@include input-base($bg, $fg);
|
||||
padding: 0 $interiorMarginSm;
|
||||
}
|
||||
|
||||
@mixin nice-textarea($bg: $colorBodyBg, $fg: $colorBodyFg) {
|
||||
@include input-base($bg, $fg);
|
||||
padding: $interiorMargin;
|
||||
@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%);
|
||||
@include nice-input($bg, $fg);
|
||||
background: lighten($bg, 3%);
|
||||
border-bottom: 1px solid lighten($bg, 10%);
|
||||
}
|
||||
|
||||
/*
|
||||
@@ -308,24 +313,30 @@
|
||||
padding: 0;
|
||||
li {
|
||||
list-style-type: none;
|
||||
margin:0;
|
||||
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 verticalCenter {
|
||||
/* 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 verticalCenterBlock($holderH, $itemH) {
|
||||
top: floor(($holderH - $itemH) / 2);
|
||||
bottom: auto;
|
||||
height: $itemH;
|
||||
}
|
||||
|
||||
@mixin ellipsize() {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@mixin scrollH($showBar: auto) {
|
||||
@@ -339,21 +350,26 @@
|
||||
}
|
||||
|
||||
@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%;
|
||||
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);
|
||||
background-color: rgba($c, $a);
|
||||
}
|
||||
|
||||
@mixin tmpBorder($c: #ffcc00, $a: 0.75) {
|
||||
@inlude box-sizing(border-box);
|
||||
border: 1px dotted rgba($c, $a);
|
||||
}
|
||||
|
||||
@mixin testObj($w: 2000px, $h: 1000px, $c: black, $a: 0.1) {
|
||||
@@ -374,6 +390,6 @@
|
||||
}
|
||||
|
||||
@mixin s-stale($a: 0.5) {
|
||||
color: rgba($colorTelemFresh, $a) !important;
|
||||
font-style: italic;
|
||||
color: rgba($colorTelemFresh, $a) !important;
|
||||
font-style: italic;
|
||||
}
|
||||
@@ -26,7 +26,8 @@ $pad: $interiorMargin * $baseRatio;
|
||||
.btn,
|
||||
.l-btn {
|
||||
@include user-select(none);
|
||||
line-height: 1.5em; // Was 1.25em
|
||||
//line-height: 1.5em; // Was 1.25em
|
||||
line-height: 150%;
|
||||
padding: 0 $pad;
|
||||
text-decoration: none;
|
||||
&.lg,
|
||||
|
||||
@@ -102,7 +102,7 @@
|
||||
|
||||
.btn-bar {
|
||||
// position: relative;
|
||||
.btn,
|
||||
/* .btn,
|
||||
.btn-set,
|
||||
.t-btn {
|
||||
display: inline-block;
|
||||
@@ -113,7 +113,7 @@
|
||||
&:first-child {
|
||||
// margin-left: 0;
|
||||
}
|
||||
}
|
||||
}*/
|
||||
}
|
||||
|
||||
.l-composite-control {
|
||||
@@ -153,6 +153,7 @@
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
/*
|
||||
.btn-set {
|
||||
// Buttons that have a very tight conceptual grouping - no internal space between them.
|
||||
display: inline-block;
|
||||
@@ -171,37 +172,33 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
.object-browse-bar .btn,
|
||||
.object-browse-bar .t-btn,
|
||||
.object-browse-bar .view-switcher,
|
||||
.top-bar .buttons-main .btn,
|
||||
.top-bar .buttons-main .t-btn,
|
||||
.top-bar .view-switcher,
|
||||
.tool-bar .btn,
|
||||
.tool-bar .t-btn {
|
||||
$h: $btnToolbarH;
|
||||
display: inline-block;
|
||||
font-size: $h * $btnFontSizeToH;
|
||||
height: $h;
|
||||
line-height: $h - 3;
|
||||
.icon:not(.invoke-menu) {
|
||||
// position: relative;
|
||||
// top: -0.04em;
|
||||
//font-size: 150%;
|
||||
//vertical-align: middle;
|
||||
}
|
||||
line-height: 200%;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
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;
|
||||
vertical-align: top;
|
||||
vertical-align: middle; // was top
|
||||
em {
|
||||
color: $colorBodyFg;
|
||||
display: inline-block;
|
||||
@@ -326,9 +323,9 @@ label.checkbox.custom {
|
||||
$p: 10px;
|
||||
$badgeM: $interiorMargin;
|
||||
$badgeD: $h - ($badgeM * 2);
|
||||
height: $h;
|
||||
line-height: $h;
|
||||
padding-right: 10px;
|
||||
//height: $h;
|
||||
//line-height: $h;
|
||||
//padding-right: 10px;
|
||||
&.browse-btn {
|
||||
margin-right: $interiorMargin;
|
||||
padding-left: $badgeD + $badgeM * 2;
|
||||
@@ -351,7 +348,6 @@ label.checkbox.custom {
|
||||
.context-available {
|
||||
$c: $colorKey;
|
||||
color: $c;
|
||||
//padding: 0 5px;
|
||||
&:hover {
|
||||
color: lighten($c, 10%);
|
||||
}
|
||||
@@ -359,24 +355,53 @@ label.checkbox.custom {
|
||||
|
||||
.view-switcher {
|
||||
@include trans-prop-nice-fade($controlFadeMs);
|
||||
.type-icon {
|
||||
//vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
/******************************************************** OBJECT-HEADER */
|
||||
.object-header {
|
||||
display: inline-block;
|
||||
//@include test();
|
||||
font-size: 1em;
|
||||
.label {
|
||||
.title-label {
|
||||
color: lighten($colorBodyFg, 40%);
|
||||
}
|
||||
.type-icon {
|
||||
font-size: 120%;
|
||||
margin-right: $interiorMargin;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
> .title-label,
|
||||
> .type-icon,
|
||||
> .context-available {
|
||||
//@include tmpBorder(#6666ff);
|
||||
//vertical-align: middle;
|
||||
}
|
||||
> .type-icon {
|
||||
font-size: 120%;
|
||||
float: left;
|
||||
margin-right: $interiorMargin;
|
||||
}
|
||||
|
||||
.l-elem-wrapper {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.action {
|
||||
margin-right: $interiorMargin;
|
||||
}
|
||||
|
||||
.title-label {
|
||||
@include ellipsize();
|
||||
color: lighten($colorBodyFg, 40%);
|
||||
padding-right: 0.35em; // For context arrow. Done with em's so pad is relative to the scale of the text.
|
||||
//position: relative;
|
||||
}
|
||||
|
||||
.context-available {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
@include desktop {
|
||||
.context-available {
|
||||
@include trans-prop-nice(opacity, 0.25s);
|
||||
opacity: 0;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
&:hover {
|
||||
.context-available {
|
||||
@@ -386,16 +411,6 @@ label.checkbox.custom {
|
||||
}
|
||||
}
|
||||
|
||||
.top-bar,
|
||||
.object-browse-bar {
|
||||
.object-header {
|
||||
font-size: 1.1em;
|
||||
span {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/******************************************************** SLIDERS */
|
||||
|
||||
.slider {
|
||||
@@ -449,24 +464,26 @@ label.checkbox.custom {
|
||||
|
||||
/******************************************************** 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));
|
||||
@include desktop {
|
||||
::-webkit-scrollbar {
|
||||
@include sliderTrack();
|
||||
height: $scrollbarTrackSize;
|
||||
width: $scrollbarTrackSize;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
background: rgba(#000, 0.4);
|
||||
::-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);
|
||||
}
|
||||
}
|
||||
@@ -20,28 +20,30 @@
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
.section-header {
|
||||
@include border-radius(3px);
|
||||
background: rgba(white, 0.1);
|
||||
@include border-radius($basicCr);
|
||||
background: rgba(#fff, 0.1);
|
||||
$c: lighten($colorBodyFg, 20%);
|
||||
//border-bottom: 1px solid rgba(#fff, 0.3);
|
||||
color: $c;
|
||||
font-size: 0.8em;
|
||||
margin-top: $interiorMargin;
|
||||
padding: $interiorMargin;
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
padding: $formTBPad $formLRPad;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.form {
|
||||
// @include test(orange);
|
||||
.form-section {
|
||||
position: relative;
|
||||
margin-bottom: $interiorMarginLg * 2;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
$m: $interiorMargin;
|
||||
@include box-sizing(border-box);
|
||||
@include clearfix;
|
||||
border-top: 1px solid $colorInteriorBorder;
|
||||
margin-top: $interiorMargin;
|
||||
padding: $interiorMargin;
|
||||
border-top: 1px solid $colorFormLines;
|
||||
margin-top: $m;
|
||||
padding: $formTBPad $formLRPad;
|
||||
position: relative;
|
||||
&.first {
|
||||
border-top: none;
|
||||
@@ -49,18 +51,18 @@
|
||||
|
||||
.label,
|
||||
.controls {
|
||||
// @include test(orange);
|
||||
@include box-sizing(border-box);
|
||||
@include clearfix;
|
||||
box-sizing: border-box;
|
||||
font-size: 0.75rem;
|
||||
font-size: 0.8rem;
|
||||
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
|
||||
//@include test(orange, 0.05);
|
||||
float: left;
|
||||
min-width: 120px;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
width: $formLabelW;
|
||||
|
||||
@@ -25,18 +25,18 @@
|
||||
padding-right: $reqSymbolW + $reqSymbolM; // Keep room for validation element
|
||||
&::after {
|
||||
// @include test(yellow, 0.3);
|
||||
display: block;
|
||||
/* display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: $reqSymbolM;
|
||||
bottom: 0;
|
||||
left: auto;
|
||||
height: auto;
|
||||
width: $reqSymbolW;
|
||||
width: $reqSymbolW;*/
|
||||
font-family: symbolsfont;
|
||||
font-size: $reqSymbolFontSize;
|
||||
text-align: right;
|
||||
vertical-align: middle;
|
||||
//text-align: right;
|
||||
//vertical-align: middle;
|
||||
}
|
||||
}
|
||||
&.invalid,
|
||||
|
||||
@@ -44,7 +44,7 @@
|
||||
position: relative;
|
||||
&:hover .item-main {
|
||||
.item-type {
|
||||
color: $colorKey !important;
|
||||
color: lighten($colorKey, 10%) !important;
|
||||
.l-icon-link {
|
||||
color: $colorIconLink;
|
||||
}
|
||||
@@ -55,13 +55,16 @@
|
||||
}
|
||||
}
|
||||
.contents {
|
||||
top: $interiorMargin; right: $interiorMargin; bottom: $interiorMargin; left: $interiorMargin;
|
||||
//@include test(red);
|
||||
$m: $interiorMarginLg;
|
||||
top: $m; right: $m; bottom: $m; left: $m;
|
||||
}
|
||||
.bar {
|
||||
&.top-bar.abs {
|
||||
&.top-bar {
|
||||
bottom: auto;
|
||||
height: $ueBrowseGridItemTopBarH;
|
||||
line-height: $ueBrowseGridItemTopBarH;
|
||||
text-align: right;
|
||||
z-index: 5;
|
||||
.left, .right {
|
||||
width: auto;
|
||||
@@ -73,10 +76,10 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
&.bottom-bar.abs {
|
||||
&.bottom-bar {
|
||||
top: auto;
|
||||
height: $ueBrowseGridItemBottomBarH;
|
||||
padding: $interiorMargin;
|
||||
//height: $ueBrowseGridItemBottomBarH;
|
||||
line-height: 110%;
|
||||
}
|
||||
}
|
||||
.item-main {
|
||||
@@ -89,7 +92,7 @@
|
||||
//@include trans-prop-nice("color", $transTime);
|
||||
@include absPosDefault($iconMargin, false);
|
||||
//@include test(red);
|
||||
color: $colorItemFg;
|
||||
//color: $colorItemFg;
|
||||
text-align: center;
|
||||
font-size: $iconD * 0.95; //6em;
|
||||
line-height: $iconD;
|
||||
@@ -99,11 +102,12 @@
|
||||
//line-height: $lh;
|
||||
.l-icon-link {
|
||||
// When the link icon is in the item-type icon holder
|
||||
color: darken($colorIconLink, 25%);
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
//color: darken($colorIconLink, 25%);
|
||||
color: $colorIconLink;
|
||||
height: auto;
|
||||
line-height: 100%;
|
||||
position: absolute;
|
||||
font-size: 32px;
|
||||
font-size: 0.3em;
|
||||
left: 0px;
|
||||
bottom: 10px;
|
||||
z-index: 2;
|
||||
@@ -123,13 +127,11 @@
|
||||
}
|
||||
.title {
|
||||
@include txtShdwSubtle();
|
||||
@include ellipsize();
|
||||
color: lighten($colorBodyFg, 20%);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
// font-weight: bold;
|
||||
}
|
||||
.details {
|
||||
@include ellipsize();
|
||||
font-size: 0.8em;
|
||||
}
|
||||
&.selected {
|
||||
|
||||
@@ -20,18 +20,20 @@
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
|
||||
$mobile-listIcon: 30px;
|
||||
$mobile-listRight: 10px;
|
||||
/************************** STYLE */
|
||||
$colorMobilePaneLeft: #222;
|
||||
|
||||
$phone-itemHeight: $ueBrowseGridItemLg/4;
|
||||
$tablet-itemHeight: $ueBrowseGridItemLg/3;
|
||||
/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
|
||||
$mobileListIconSize: 30px;
|
||||
$mobileTitleDescH: 35px;
|
||||
$mobileOverlayMargin: 10px;
|
||||
$phoneItemH: floor($ueBrowseGridItemLg/4);
|
||||
$tabletItemH: floor($ueBrowseGridItemLg/3);
|
||||
|
||||
/************************** MOBILE TREE MENU DIMENSIONS */
|
||||
$mobile-treeHeight: 38px;
|
||||
$mobile-startingTreeLeft: 3px;
|
||||
$mobile-runningTreeLeft: 7px;
|
||||
$mobile-treeRight: 13px;
|
||||
$mobileTreeItemH: 35px;
|
||||
$mobileTreeItemIndent: 20px;
|
||||
$mobileTreeRightArrowW: 30px;
|
||||
|
||||
/************************** WINDOW DIMENSIONS FOR RWD */
|
||||
$phoMaxW: 514px;
|
||||
@@ -80,8 +82,5 @@ $desktopPortrait: "screen and #{$desktopPortraitCheck}";
|
||||
$desktopLandscape: "screen and #{$desktopLandscapeCheck}";
|
||||
|
||||
/************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
|
||||
$phoneRepSizePortrait: 19px;
|
||||
$phoneRepSizeLandscape: 66%;
|
||||
$tabletRepSizePortrait: 500px;
|
||||
$tabletRepSizeLandscape: 78%;
|
||||
$desktopMenuSize: 25%;
|
||||
$proporMenuOnly: 90%;
|
||||
$proporMenuWithView: 40%;
|
||||
|
||||
@@ -27,103 +27,92 @@
|
||||
.items-holder {
|
||||
.item {
|
||||
&.grid-item {
|
||||
$dWid: $ueBrowseGridItemLg;
|
||||
$dHei: $ueBrowseGridItemLg;
|
||||
$titleH: 30px;
|
||||
@include phoneandtablet {
|
||||
$dWid: 100%;
|
||||
.mobile-grid-nav {
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
right: 55px;
|
||||
}
|
||||
.mobile-info {
|
||||
text-align: center;
|
||||
width: 50px;
|
||||
right: 0px;
|
||||
left: auto;
|
||||
font-size: 1.3em;
|
||||
width: 100%;
|
||||
>.contents {
|
||||
top: 0px; right: $interiorMarginLg; bottom: 0px; left: $interiorMarginLg;
|
||||
}
|
||||
.bar {
|
||||
&.bottom-bar.abs {
|
||||
top: 0px;
|
||||
height: auto;
|
||||
&.top-bar {
|
||||
// Becomes the right side of the item
|
||||
//@include test(blue);
|
||||
bottom: 0 !important; left: auto !important; right: 20px !important;
|
||||
width: 40px !important; height: auto !important;
|
||||
text-align: right;
|
||||
}
|
||||
&.bottom-bar {
|
||||
// Becomes the left side of the item
|
||||
left: $mobileListIconSize + $interiorMarginLg;
|
||||
right: 60px;
|
||||
}
|
||||
|
||||
}
|
||||
.item-main {
|
||||
.item-type {
|
||||
font-size: $mobile-listIcon;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
//@include test(blue);
|
||||
font-size: $mobileListIconSize;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: 0;
|
||||
line-height: 100%;
|
||||
text-align: left;
|
||||
height: auto
|
||||
width: $mobileListIconSize;
|
||||
.l-icon-link {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
.item-open {
|
||||
display: none;
|
||||
display: block;
|
||||
opacity: 1;
|
||||
font-size: 1em;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
.title, .details {
|
||||
margin-left: $mobile-listIcon;
|
||||
}
|
||||
}
|
||||
|
||||
@include phone {
|
||||
$dHei: $phone-itemHeight;
|
||||
width: $dWid;
|
||||
$dHei: $phoneItemH;
|
||||
height: $dHei;
|
||||
.mobile-right {
|
||||
top: 100%;
|
||||
}
|
||||
.mobile-info {
|
||||
line-height: $phone-itemHeight * .5;
|
||||
.bar {
|
||||
&.top-bar {
|
||||
// Becomes the right side of the item
|
||||
line-height: $dHei !important;
|
||||
}
|
||||
&.bottom-bar {
|
||||
@include verticalCenterBlock($dHei, $mobileTitleDescH);
|
||||
}
|
||||
}
|
||||
.item-main {
|
||||
.item-type {
|
||||
line-height: $phone-itemHeight * .8;
|
||||
@include verticalCenterBlock($dHei, $mobileListIconSize);
|
||||
}
|
||||
.item-open {
|
||||
line-height: $dHei;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
margin-right: $mobile-listRight;
|
||||
line-height: $phone-itemHeight * .5;
|
||||
}
|
||||
.details {
|
||||
margin-right: $mobile-listRight;
|
||||
line-height: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@include tablet {
|
||||
$dHei: $tablet-itemHeight;
|
||||
width: $dWid;
|
||||
$dHei: $tabletItemH;
|
||||
height: $dHei;
|
||||
.mobile-right {
|
||||
top: 100%;
|
||||
}
|
||||
|
||||
.mobile-info {
|
||||
line-height: $tablet-itemHeight * .57;
|
||||
.bar {
|
||||
&.top-bar {
|
||||
// Becomes the right side of the item
|
||||
line-height: $dHei !important;
|
||||
}
|
||||
&.bottom-bar {
|
||||
@include verticalCenterBlock($dHei, $mobileTitleDescH);
|
||||
}
|
||||
}
|
||||
.item-main {
|
||||
.item-type {
|
||||
font-size: $mobile-listIcon;
|
||||
line-height: $tablet-itemHeight * .75;
|
||||
@include verticalCenterBlock($dHei, $mobileListIconSize);
|
||||
}
|
||||
.item-open {
|
||||
line-height: $dHei;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
margin-right: $mobile-listRight;
|
||||
line-height: $tablet-itemHeight * .57;
|
||||
}
|
||||
.details {
|
||||
margin-right: $mobile-listRight;
|
||||
line-height: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@include desktop {
|
||||
$dWid: $ueBrowseGridItemLg;
|
||||
$dHei: $ueBrowseGridItemLg;
|
||||
width: $dWid;
|
||||
height: $dHei;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -20,203 +20,155 @@
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
// Wrapper of the entire 2 panes, only enacted on
|
||||
// phone and tablet. Also for the panes
|
||||
|
||||
.browse-wrapper,
|
||||
.mobile-pane {
|
||||
@include phoneandtablet {
|
||||
position: absolute;
|
||||
left: 0; top: 0;
|
||||
right: 0;
|
||||
white-space: nowrap;
|
||||
@include phoneandtablet {
|
||||
// Wrapper of the entire 2 panes, only enacted on
|
||||
// phone and tablet. Also for the panes
|
||||
.browse-wrapper,
|
||||
.pane {
|
||||
top: 0 !important; right: 0; bottom: 0; left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Default views of the panels
|
||||
// if in desktop browser
|
||||
.desktop-browse {
|
||||
@include desktop {
|
||||
min-width: 150px;
|
||||
max-width: 800px;
|
||||
width: $desktopMenuSize;
|
||||
}
|
||||
}
|
||||
.pane.left.treeview {
|
||||
background-color: $colorMobilePaneLeft;
|
||||
}
|
||||
|
||||
// When the tree is hidden, these are the
|
||||
// classes used for the left menu and the
|
||||
// right representation.
|
||||
.browse-hidetree {
|
||||
// NOTE: DISABLED SELECTION
|
||||
// Selection disabled in both panes
|
||||
// causing cut/copy/paste menu to
|
||||
// not appear. Should me moved in
|
||||
// future to properly work
|
||||
@include phoneandtablet {
|
||||
.pane.right-repr {
|
||||
//@include test();
|
||||
@include slMenuTransitions;
|
||||
margin-left: 0 !important;
|
||||
#content-area {
|
||||
@include slMenuTransitions;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.user-environ .browse-area,
|
||||
.user-environ .edit-area,
|
||||
.user-environ .editor {
|
||||
top: 0; left: 0; right: 0; bottom: $ueFooterH;
|
||||
}
|
||||
|
||||
.holder.l-mobile {
|
||||
top: $bodyMargin !important;
|
||||
right: $bodyMargin !important;
|
||||
bottom: $bodyMargin !important;
|
||||
left: $bodyMargin !important;
|
||||
}
|
||||
|
||||
// When the tree is hidden, these are the
|
||||
// classes used for the left menu and the
|
||||
// right representation.
|
||||
.browse-hidetree {
|
||||
@include user-select(none);
|
||||
}
|
||||
// Sets the left tree menu when the tree
|
||||
// is hidden.
|
||||
.mobile-pane.left-menu {
|
||||
@include phoneandtablet {
|
||||
@include trans-prop-nice(opacity, .4s);
|
||||
// Sets the left tree menu when the tree
|
||||
// is hidden.
|
||||
.pane.left.treeview {
|
||||
opacity: 0;
|
||||
right: 100% !important;
|
||||
width: auto !important;
|
||||
overflow-y: hidden;
|
||||
overflow-x: hidden;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
// Sets the right represenation when
|
||||
// the tree is hidden.
|
||||
.pane.right-repr {
|
||||
left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Sets the right represenation when
|
||||
// the tree is hidden.
|
||||
.mobile-pane.right-repr {
|
||||
@include phoneandtablet {
|
||||
@include slMenuTransitions;
|
||||
left: auto !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-tree-holder {
|
||||
top: 50px;
|
||||
}
|
||||
|
||||
// When the tree is shown, these are
|
||||
// the classes used for the left menu
|
||||
// and the right menu (for each device &
|
||||
// orientation combination, separate
|
||||
// parameters are used)
|
||||
.browse-showtree {
|
||||
// NOTE: DISABLED SELECTION
|
||||
// Selection disabled in both panes
|
||||
// causing cut/copy/paste menu to
|
||||
// not appear. Should me moved in
|
||||
// future to properly work
|
||||
@include phoneandtablet {
|
||||
|
||||
.browse-showtree {
|
||||
// NOTE: DISABLED SELECTION
|
||||
// Selection disabled in both panes
|
||||
// causing cut/copy/paste menu to
|
||||
// not appear. Should me moved in
|
||||
// future to properly work
|
||||
@include user-select(none);
|
||||
}
|
||||
// Sets the left tree menu when the tree
|
||||
// is shown.
|
||||
.mobile-pane.left-menu {
|
||||
@include phoneandtablet {
|
||||
|
||||
// Sets the left tree menu when the tree is shown.
|
||||
.pane.left.treeview {
|
||||
@include trans-prop-nice(opacity, .4s);
|
||||
@include background-image(linear-gradient(90deg, rgba(black, 0) 98%, rgba(black, 0.3) 100%));
|
||||
opacity: 1;
|
||||
display: block !important;
|
||||
width: auto !important;
|
||||
//width: auto !important; // CH CO
|
||||
right: auto !important;
|
||||
width: $proporMenuWithView !important;
|
||||
}
|
||||
// On both phones and tablets, the amount of
|
||||
// space allowed for the right pane is specified
|
||||
@include phonePortrait {
|
||||
right: $phoneRepSizePortrait !important;
|
||||
}
|
||||
@include phoneLandscape {
|
||||
right: $phoneRepSizeLandscape !important;
|
||||
}
|
||||
@include tabletPortrait {
|
||||
right: $tabletRepSizePortrait !important;
|
||||
}
|
||||
@include tabletLandscape {
|
||||
right: $tabletRepSizeLandscape !important;
|
||||
}
|
||||
}
|
||||
// Sets the right represenation when
|
||||
// the tree is shown.
|
||||
.mobile-pane.right-repr {
|
||||
@include phoneandtablet {
|
||||
@include slMenuTransitions;
|
||||
left: auto !important;
|
||||
}
|
||||
// On both phones and tablets, the width of
|
||||
// the right pane is specified
|
||||
@include phonePortrait {
|
||||
width: $phoneRepSizePortrait !important;
|
||||
}
|
||||
@include phoneLandscape {
|
||||
width: $phoneRepSizeLandscape !important;
|
||||
}
|
||||
@include tabletPortrait {
|
||||
width: $tabletRepSizePortrait !important;
|
||||
}
|
||||
@include tabletLandscape {
|
||||
width: $tabletRepSizeLandscape !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Sets the right representation when the tree is shown.
|
||||
.pane.right-repr {
|
||||
left: $proporMenuWithView !important;
|
||||
//width: auto !important;
|
||||
|
||||
// Button position is set as absolute with transitions
|
||||
.button-pos {
|
||||
@include phoneandtablet {
|
||||
//left: 0 !important;
|
||||
//transform: translateX($proporMenuWithView);
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-menu-icon {
|
||||
font-size: 110%;
|
||||
position: absolute;
|
||||
top: $bodyMargin + 2;
|
||||
left: $bodyMargin;
|
||||
}
|
||||
}
|
||||
|
||||
// Object header must be moved
|
||||
// over to make space for the
|
||||
// hamburger icon
|
||||
.object-header {
|
||||
@include phoneandtablet {
|
||||
position: relative;
|
||||
left: 44px;
|
||||
.label {
|
||||
.context-available {
|
||||
opacity: 1 !important;
|
||||
.object-browse-bar {
|
||||
//@include test();
|
||||
left: 30px !important;
|
||||
.context-available {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
.view-switcher {
|
||||
margin-right: 0 !important;
|
||||
.name {
|
||||
// Hide the name in mobile
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.desktop-hide {
|
||||
@include desktop {
|
||||
display: none;
|
||||
.tree-holder {
|
||||
overflow-x: hidden !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Hides objects on phone and tablet
|
||||
.mobile-hide {
|
||||
@include phoneandtablet {
|
||||
display: none;
|
||||
.mobile-disable-select {
|
||||
@include user-select(none);
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-important-hide {
|
||||
@include phoneandtablet {
|
||||
// Hides objects on phone and tablet
|
||||
.mobile-hide,
|
||||
.mobile-hide-important {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-back-hide {
|
||||
@include phoneandtablet {
|
||||
.mobile-back-hide {
|
||||
pointer-events: none;
|
||||
@include trans-prop-nice(opacity, .4s);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Hides objects on phone and tablet
|
||||
.mobile-back-unhide {
|
||||
@include phoneandtablet {
|
||||
.mobile-back-unhide {
|
||||
pointer-events: all;
|
||||
@include trans-prop-nice(opacity, .4s);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Hides objects only on the phone
|
||||
.phone-hide {
|
||||
@include phone {
|
||||
display: none;
|
||||
@include phonePortrait {
|
||||
.browse-showtree {
|
||||
.pane.left.treeview {
|
||||
width: $proporMenuOnly !important;
|
||||
}
|
||||
.pane.right-repr {
|
||||
left: 0 !important;
|
||||
transform: translateX($proporMenuOnly);
|
||||
#content-area {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tree-holder {
|
||||
@include phoneandtablet {
|
||||
overflow-x: hidden !important;
|
||||
@include desktop {
|
||||
.desktop-hide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.mobile-disable-select {
|
||||
@include phoneandtablet {
|
||||
@include user-select(none);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -20,48 +20,42 @@
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
|
||||
ul.tree {
|
||||
// Only applies to phones and tablets
|
||||
@include phoneandtablet {
|
||||
@include menuUlReset();
|
||||
@include phoneandtablet {
|
||||
ul.tree {
|
||||
//@include menuUlReset();
|
||||
li {
|
||||
//border-top: 1px solid $colorInteriorBorder; // TEMP
|
||||
span.tree-item {
|
||||
// Adds some space to the top of each tree item
|
||||
height: $mobile-treeHeight;
|
||||
line-height: $mobile-treeHeight;
|
||||
padding-top: $interiorMarginSm;
|
||||
padding-bottom: $interiorMarginSm;
|
||||
height: $mobileTreeItemH;
|
||||
line-height: $mobileTreeItemH;
|
||||
margin-bottom: 0px;
|
||||
.view-control {
|
||||
//@include test(red);
|
||||
position: absolute;
|
||||
right: $mobile-treeRight;
|
||||
font-size: 1.8em;
|
||||
font-size: 1.1em;
|
||||
right: 0px;
|
||||
width: 35px;
|
||||
width: $mobileTreeRightArrowW;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
// Designates the starting left margin
|
||||
// (indentation) of 'My Items'
|
||||
// Also adds right space for selection button
|
||||
left: $mobile-startingTreeLeft;
|
||||
right: 45px;
|
||||
font-size: 1.2em;
|
||||
// Allows tree item name to stop prior
|
||||
// to the arrow
|
||||
.title-label {
|
||||
right: $mobile-treeRight * 1.3;
|
||||
left: 0;
|
||||
right: $mobileTreeRightArrowW + $interiorMargin; // Allows tree item name to stop prior to the arrow
|
||||
line-height: $mobileTreeItemH;
|
||||
//font-size: 1.1em; // CH CO
|
||||
.type-icon {
|
||||
@include verticalCenterBlock($mobileTreeItemH, $treeTypeIconH);
|
||||
}
|
||||
}
|
||||
.title-label {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sets the margin on the left, which causes the
|
||||
// running indentation after each folder is made
|
||||
ul.tree {
|
||||
margin-left: $mobile-runningTreeLeft;
|
||||
margin-left: $mobileTreeItemIndent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -20,15 +20,24 @@
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
// Mobile hamburger icon is
|
||||
// sized according to the device
|
||||
.mobile-menu-icon {
|
||||
display: inline-block;
|
||||
@include phoneandtablet {
|
||||
font-size: 21px;
|
||||
padding-top: $imageThumbPad;
|
||||
// Override the Create menu for mobile
|
||||
@include phoneandtablet {
|
||||
.menu-element {
|
||||
.super-menu {
|
||||
$d: 250px;
|
||||
width: $d;
|
||||
height: $d;
|
||||
|
||||
.pane {
|
||||
&.left {
|
||||
border-right: none;
|
||||
padding-right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
&.right {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include desktop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,11 +1,51 @@
|
||||
.overlay {
|
||||
@include phoneandtablet {
|
||||
@include phoneandtablet {
|
||||
.overlay {
|
||||
$m: 0;
|
||||
// Removes curved edges on the dialog box
|
||||
// and makes it take up fullscreen
|
||||
>.holder {
|
||||
@include border-radius($m);
|
||||
top: $m; right: $m; bottom: $m; left: $m;
|
||||
.clk-icon.close {
|
||||
top: $mobileOverlayMargin; right: $mobileOverlayMargin;
|
||||
}
|
||||
|
||||
> .holder {
|
||||
@include border-radius($m);
|
||||
top: $m;
|
||||
right: $m;
|
||||
bottom: $m;
|
||||
left: $m;
|
||||
> .contents {
|
||||
top: $mobileOverlayMargin;
|
||||
right: $mobileOverlayMargin;
|
||||
bottom: $mobileOverlayMargin;
|
||||
left: $mobileOverlayMargin;
|
||||
|
||||
.top-bar {
|
||||
> .title {
|
||||
margin-right: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
.form.editor {
|
||||
border: none;
|
||||
|
||||
.contents {
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include phone {
|
||||
.overlay > .holder > .contents .form.editor .contents .form-row {
|
||||
> .label,
|
||||
> .controls {
|
||||
//@include test(blue);
|
||||
display: block;
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -24,16 +24,10 @@
|
||||
background: $colorOvrBlocker;
|
||||
z-index: 100;
|
||||
}
|
||||
.btn.close {
|
||||
@include border-radius($basicCr * 2);
|
||||
padding: 3px 6px;
|
||||
.clk-icon.close {
|
||||
position: absolute;
|
||||
border: none;
|
||||
top: $interiorMarginSm; right: $interiorMarginSm; bottom: auto; left: auto;
|
||||
top: $interiorMarginLg; right: $interiorMarginLg; bottom: auto; left: auto;
|
||||
z-index: 100;
|
||||
}
|
||||
.editor {
|
||||
// background: $colorBodyBg;
|
||||
}
|
||||
>.holder {
|
||||
$i: 15%;
|
||||
@@ -43,13 +37,13 @@
|
||||
top: $i; right: $i; bottom: $i; left: $i;
|
||||
z-index: 101;
|
||||
>.contents {
|
||||
$m: 25px;
|
||||
$m: $overlayMargin;
|
||||
top: $m; right: $m; bottom: $m; left: $m;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
@include ellipsize();
|
||||
font-size: 1.3em;
|
||||
font-size: 1.2em;
|
||||
margin-bottom: $interiorMargin;
|
||||
}
|
||||
|
||||
|
||||
@@ -27,6 +27,7 @@ ul.tree {
|
||||
position: relative;
|
||||
span.tree-item {
|
||||
$runningItemW: 0;
|
||||
@include box-sizing(border-box);
|
||||
@include border-radius($basicCr);
|
||||
@include single-transition(background-color, 0.25s);
|
||||
display: block;
|
||||
@@ -55,14 +56,20 @@ ul.tree {
|
||||
// @include test(orange);
|
||||
@include absPosDefault();
|
||||
//left: $runningItemW + $interiorMargin; // Adding pad to left to make room for link icon
|
||||
line-height: $menuLineH;
|
||||
left: $runningItemW;
|
||||
|
||||
.type-icon {
|
||||
@include absPosDefault(0, false);
|
||||
//@include absPosDefault(0, false);
|
||||
$d: $treeTypeIconH; // 16px is crisp size
|
||||
@include txtShdwSubtle(0.6);
|
||||
font-size: $d;
|
||||
color: $colorItemTreeIcon;
|
||||
left: $interiorMargin;
|
||||
right: auto; width: 1em;
|
||||
position: absolute;
|
||||
@include verticalCenterBlock($menuLineHPx, $d);
|
||||
line-height: 100%;
|
||||
right: auto; width: $d;
|
||||
|
||||
.icon {
|
||||
&.l-icon-link,
|
||||
@@ -81,8 +88,7 @@ ul.tree {
|
||||
$d: 8px;
|
||||
@include ancillaryIcon($d, $colorIconLink);
|
||||
left: -3px;
|
||||
bottom: 5px;
|
||||
|
||||
bottom: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -126,7 +132,7 @@ ul.tree {
|
||||
// NOTE: [Mobile] Removed Hover on Mobile
|
||||
@include desktop {
|
||||
&:hover {
|
||||
background: lighten($colorBodyBg, 5%);
|
||||
background: rgba(#fff, 0.1); //lighten($colorBodyBg, 5%);
|
||||
color: lighten($colorBodyFg, 20%);
|
||||
.context-trigger {
|
||||
display: block;
|
||||
|
||||
@@ -20,25 +20,23 @@
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
.frame {
|
||||
$ohH: 20px;
|
||||
$ohH: 16px;
|
||||
$bc: $colorInteriorBorder;
|
||||
&.child-frame.panel {
|
||||
background: $colorBodyBg;
|
||||
border: 1px solid $bc;
|
||||
&:hover {
|
||||
border-color: lighten($bc, 10%);
|
||||
//z-index: 2;
|
||||
}
|
||||
.contents {
|
||||
// overflow: hidden;
|
||||
}
|
||||
}
|
||||
>.object-header.abs {
|
||||
//@include test(red);
|
||||
font-size: 0.75em;
|
||||
height: $ohH;
|
||||
line-height: $ohH;
|
||||
}
|
||||
>.object-holder.abs {
|
||||
top: $ohH + $interiorMarginSm;
|
||||
top: $ohH + $interiorMargin;
|
||||
}
|
||||
.contents {
|
||||
$myM: $interiorMargin;
|
||||
@@ -48,16 +46,20 @@
|
||||
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
|
||||
.view-switcher {
|
||||
opacity: 0;
|
||||
line-height: $ohH;
|
||||
z-index: 10;
|
||||
}
|
||||
&:hover .view-switcher {
|
||||
// Show the view switcher on frame hover
|
||||
//display: inline-block !important;
|
||||
opacity: 1;
|
||||
// Hide the view switcher by default when it's in an element that's in a frame context
|
||||
// Frame template is used because we need to target the lowest nested frame
|
||||
@include desktop {
|
||||
.view-switcher {
|
||||
opacity: 0;
|
||||
}
|
||||
&:hover .view-switcher {
|
||||
// Show the view switcher on frame hover
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.view-switcher {
|
||||
|
||||
@@ -70,19 +70,27 @@
|
||||
&.abs {
|
||||
text-wrap: none;
|
||||
white-space: nowrap;
|
||||
&.left,
|
||||
.left {
|
||||
width: 45%;
|
||||
right: auto;
|
||||
}
|
||||
&.right,
|
||||
.right {
|
||||
width: 45%;
|
||||
left: auto;
|
||||
text-align: right;
|
||||
.icon.major {
|
||||
margin-left: $interiorMargin * 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.left,
|
||||
.left {
|
||||
width: 45% !important;
|
||||
right: auto !important;
|
||||
}
|
||||
&.right,
|
||||
.right {
|
||||
width: 45% !important;
|
||||
left: auto !important;
|
||||
text-align: right;
|
||||
.icon.major {
|
||||
margin-left: $interiorMargin * 3;
|
||||
&.l-flex {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
.left {
|
||||
//@include test(green);
|
||||
flex: 1 1 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -118,7 +126,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-bar {
|
||||
.ue-bottom-bar {
|
||||
//@include absPosDefault($bodyMargin);
|
||||
@include absPosDefault(0);// New status bar design
|
||||
top: auto;
|
||||
@@ -200,7 +208,8 @@
|
||||
.split-layout {
|
||||
.split-pane-component.pane.left {
|
||||
min-width: 150px;
|
||||
max-width: 50%;
|
||||
max-width: 800px;
|
||||
width: $ueBrowseLeftPaneW;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -208,8 +217,8 @@
|
||||
.edit-mode {
|
||||
.split-layout {
|
||||
.split-pane-component.pane.right {
|
||||
min-width: 150px;
|
||||
max-width: 50%;
|
||||
//min-width: 150px;
|
||||
//max-width: 50%;
|
||||
.split-pane-component.pane.bottom {
|
||||
min-height: 50px;
|
||||
max-height: 80%;
|
||||
@@ -243,6 +252,12 @@
|
||||
.right.abs {
|
||||
top: auto;
|
||||
}
|
||||
//.left.abs {
|
||||
// @include tmpBorder(green);
|
||||
//}
|
||||
//.right.abs {
|
||||
// @include tmpBorder(red);
|
||||
//}
|
||||
}
|
||||
.object-holder {
|
||||
top: $ueTopBarH + $interiorMarginLg;
|
||||
@@ -284,6 +299,28 @@
|
||||
}
|
||||
}
|
||||
|
||||
.object-browse-bar .btn,
|
||||
.object-browse-bar .t-btn,
|
||||
.object-browse-bar .view-switcher,
|
||||
.top-bar .buttons-main .btn,
|
||||
.top-bar .buttons-main .t-btn,
|
||||
.top-bar .view-switcher,
|
||||
.tool-bar .btn,
|
||||
.tool-bar .t-btn {
|
||||
$h: $btnToolbarH;
|
||||
display: inline-block;
|
||||
font-size: $h * $btnFontSizeToH;
|
||||
line-height: 200%;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.object-browse-bar,
|
||||
.top-bar {
|
||||
.view-switcher {
|
||||
margin-right: $interiorMarginLg * 2;
|
||||
}
|
||||
}
|
||||
|
||||
.vscroll {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@@ -20,11 +20,19 @@
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
.object-browse-bar {
|
||||
//@include test(blue);
|
||||
@include absPosDefault(0, visible);
|
||||
@include box-sizing(border-box);
|
||||
height: $ueTopBarH;
|
||||
line-height: $ueTopBarH;
|
||||
.items-select {
|
||||
.btn-menu {
|
||||
margin-right: $interiorMargin * 3;
|
||||
white-space: nowrap;
|
||||
|
||||
.left {
|
||||
padding-right: $interiorMargin;
|
||||
.l-back {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
margin-right: $interiorMarginLg;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -20,23 +20,16 @@
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
.top-bar {
|
||||
// $h: $ueTopBarH - 5px;
|
||||
// background: rgba(#ff0000, 0.2);
|
||||
// line-height: $ueTopBarBtnH;
|
||||
|
||||
&.browse,
|
||||
&.edit {
|
||||
border-bottom: 1px solid $colorInteriorBorder;
|
||||
top: $bodyMargin; right: $bodyMargin; bottom: auto; left: $bodyMargin;
|
||||
height: $ueTopBarEditH;
|
||||
line-height: $ueTopBarH;
|
||||
}
|
||||
|
||||
.action {
|
||||
}
|
||||
|
||||
.title {
|
||||
color: #fff;
|
||||
// font-weight: bold;
|
||||
}
|
||||
|
||||
.buttons-main {
|
||||
@@ -44,9 +37,9 @@
|
||||
left: auto;
|
||||
text-align: right;
|
||||
// width: 200px;
|
||||
.btn {
|
||||
margin-left: $interiorMargin;
|
||||
}
|
||||
// .btn {
|
||||
// margin-left: $interiorMargin;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user