[Mobile] Multiple mobile Safari fixes
open #74 New mixins to prefix '-webkit-' to props and vals; 'flex' classes use new webkit mixins; Fixed flex layout of .object-browse-bar and .context-available element; Migrated CSS to remove small .scss include files;
This commit is contained in:
Charles Hacskaylo
@@ -1,37 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
|
||||
@@ -68,7 +68,7 @@
|
||||
@import "user-environ/frame";
|
||||
@import "user-environ/top-bar";
|
||||
@import "user-environ/bottom-bar";
|
||||
@import "user-environ/object-browse";
|
||||
//@import "user-environ/object-browse";
|
||||
@import "user-environ/tool-bar";
|
||||
@import "helpers/bubbles";
|
||||
@import "helpers/splitter";
|
||||
|
||||
@@ -318,6 +318,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
@mixin webkitProp($name, $val) {
|
||||
#{$name}: #{$val};
|
||||
-webkit-#{$name}: #{$val};
|
||||
}
|
||||
|
||||
@mixin webkitVal($name, $val) {
|
||||
#{$name}: #{$val};
|
||||
#{$name}: -webkit-#{$val};
|
||||
}
|
||||
|
||||
@mixin verticalCenter {
|
||||
/* This doesn't work on an element inside an element with absolute positioning that has height: auto */
|
||||
//position: relative;
|
||||
|
||||
@@ -365,12 +365,13 @@ label.checkbox.custom {
|
||||
//@include test();
|
||||
font-size: 1em;
|
||||
|
||||
> .title-label,
|
||||
> .type-icon,
|
||||
> .context-available {
|
||||
//@include tmpBorder(#6666ff);
|
||||
//vertical-align: middle;
|
||||
}
|
||||
//> .title-label,
|
||||
//> .type-icon,
|
||||
//> .context-available {
|
||||
// //@include tmpBorder(#6666ff);
|
||||
// //vertical-align: middle;
|
||||
//}
|
||||
|
||||
> .type-icon {
|
||||
font-size: 120%;
|
||||
float: left;
|
||||
@@ -378,9 +379,14 @@ label.checkbox.custom {
|
||||
}
|
||||
|
||||
.l-elem-wrapper {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: flex-start;
|
||||
//@include test(#66f, 0.2);
|
||||
@include webkitProp(justify-content, flex-start);
|
||||
mct-representation {
|
||||
// Holds the context-available item
|
||||
// Must have min-width to make flex work properly
|
||||
// in Safari
|
||||
min-width: 0.7em;
|
||||
}
|
||||
}
|
||||
|
||||
.action {
|
||||
@@ -388,14 +394,18 @@ label.checkbox.custom {
|
||||
}
|
||||
|
||||
.title-label {
|
||||
//@include test(green, 0.9);
|
||||
@include ellipsize();
|
||||
color: lighten($colorBodyFg, 40%);
|
||||
@include webkitProp(flex, '0 1 auto');
|
||||
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 webkitProp(flex, '0 0 1');
|
||||
//margin-right: $interiorMargin;
|
||||
}
|
||||
|
||||
@include desktop {
|
||||
|
||||
@@ -159,7 +159,7 @@
|
||||
}
|
||||
.pane.right-repr {
|
||||
left: 0 !important;
|
||||
transform: translateX($proporMenuOnly);
|
||||
@include webkitProp(transform, translateX($proporMenuOnly));
|
||||
#content-area {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@@ -39,26 +39,20 @@
|
||||
$iconWidth: 20px;
|
||||
$leftMargin: 6px;
|
||||
$rightPadding: 5px;
|
||||
|
||||
//padding-right: $rightPadding;
|
||||
//@include test();
|
||||
display: flex; //block;
|
||||
flex-direction: column;
|
||||
@include webkitVal(display, flex);
|
||||
//display: flex;
|
||||
@include webkitProp(flex-direction, column);
|
||||
//flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
.search-bar {
|
||||
//$heightAdjust: 4px;
|
||||
$textInputHeight: 19px; // This is equal to the default value, 19px
|
||||
$iconEdgeM: 4px;
|
||||
$iconD: $treeSearchInputBarH - ($iconEdgeM*2);
|
||||
font-size: 0.8em;
|
||||
|
||||
//order: 1;
|
||||
|
||||
max-width: 250px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
//height: $textInputHeight;
|
||||
//margin-top: $heightAdjust;
|
||||
.search-input,
|
||||
.search-icon {
|
||||
}
|
||||
|
||||
@@ -85,14 +85,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
&.l-flex {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
.left {
|
||||
//@include test(green);
|
||||
flex: 1 1 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-environ {
|
||||
@@ -321,6 +313,33 @@
|
||||
}
|
||||
}
|
||||
|
||||
.object-browse-bar {
|
||||
//@include test(blue);
|
||||
@include absPosDefault(0, visible);
|
||||
@include box-sizing(border-box);
|
||||
height: $ueTopBarH;
|
||||
line-height: $ueTopBarH;
|
||||
white-space: nowrap;
|
||||
|
||||
.left {
|
||||
padding-right: $interiorMarginLg * 2;
|
||||
.l-back {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
margin-right: $interiorMarginLg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.l-flex {
|
||||
@include webkitVal('display', 'flex');
|
||||
@include webkitProp('flex-flow', 'row nowrap');
|
||||
.left {
|
||||
//@include test(red);
|
||||
@include webkitProp(flex, '1 1 0');
|
||||
}
|
||||
}
|
||||
|
||||
.vscroll {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@@ -1,38 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT Web, Copyright (c) 2014-2015, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT Web is licensed under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
* http://www.apache.org/licenses/LICENSE-2.0.
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||
* License for the specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*
|
||||
* Open MCT Web includes source code licensed under additional open source
|
||||
* licenses. See the Open Source Licenses file (LICENSES.md) included with
|
||||
* this source code distribution or the Licensing information page available
|
||||
* 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;
|
||||
white-space: nowrap;
|
||||
|
||||
.left {
|
||||
padding-right: $interiorMargin;
|
||||
.l-back {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
margin-right: $interiorMarginLg;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user