mirror of
https://github.com/nasa/openmct.git
synced 2024-12-22 06:27:48 +00:00
Merge branch 'master' into fix-telemetryview-styles
This commit is contained in:
Deep Tailor
GitHub
commit
2a7901914a
@ -33,7 +33,7 @@ define(
|
||||
var CONNECTED = {
|
||||
text: "Connected",
|
||||
glyphClass: "ok",
|
||||
statusClass: "s-status-ok",
|
||||
statusClass: "s-status-on",
|
||||
description: "Connected to the domain object database."
|
||||
},
|
||||
DISCONNECTED = {
|
||||
|
||||
@ -32,7 +32,7 @@ define(
|
||||
var CONNECTED = {
|
||||
text: "Connected",
|
||||
glyphClass: "ok",
|
||||
statusClass: "s-status-ok",
|
||||
statusClass: "s-status-on",
|
||||
description: "Connected to the domain object database."
|
||||
},
|
||||
DISCONNECTED = {
|
||||
|
||||
@ -30,7 +30,7 @@ define(
|
||||
// DISCONNECTED: HTTP failed; maybe misconfigured, disconnected.
|
||||
// PENDING: Still trying to connect, and haven't failed yet.
|
||||
var CONNECTED = {
|
||||
statusClass: "s-status-ok"
|
||||
statusClass: "s-status-on"
|
||||
},
|
||||
PENDING = {
|
||||
statusClass: "s-status-warning-lo"
|
||||
|
||||
@ -122,7 +122,7 @@ define(
|
||||
it("indicates success if connection is nominal", function () {
|
||||
jasmine.clock().tick(pluginOptions.interval + 1);
|
||||
ajaxOptions.success();
|
||||
expect(indicatorElement.classList.contains('s-status-ok')).toBe(true);
|
||||
expect(indicatorElement.classList.contains('s-status-on')).toBe(true);
|
||||
});
|
||||
|
||||
it("indicates an error when the server cannot be reached", function () {
|
||||
|
||||
@ -22,7 +22,6 @@
|
||||
|
||||
<template>
|
||||
<section id="conditionCollection"
|
||||
class="c-cs__conditions"
|
||||
:class="{ 'is-expanded': expanded }"
|
||||
>
|
||||
<div class="c-cs__header c-section__header">
|
||||
|
||||
@ -23,30 +23,33 @@
|
||||
<template>
|
||||
<div class="c-cs">
|
||||
<section class="c-cs__current-output c-section">
|
||||
<div class="c-cs__header c-section__header">
|
||||
<span class="c-cs__header-label c-section__label">Current Output</span>
|
||||
</div>
|
||||
<div class="c-cs__content c-cs__current-output-value">
|
||||
<template v-if="currentConditionOutput">
|
||||
{{ currentConditionOutput }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ defaultConditionOutput }}
|
||||
</template>
|
||||
<span class="c-cs__current-output-value__label">Current Output</span>
|
||||
<span class="c-cs__current-output-value__value">
|
||||
<template v-if="currentConditionOutput">
|
||||
{{ currentConditionOutput }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ defaultConditionOutput }}
|
||||
</template>
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
<TestData :is-editing="isEditing"
|
||||
:test-data="testData"
|
||||
:telemetry="telemetryObjs"
|
||||
@updateTestData="updateTestData"
|
||||
/>
|
||||
<ConditionCollection
|
||||
:is-editing="isEditing"
|
||||
:test-data="testData"
|
||||
@conditionSetResultUpdated="updateCurrentOutput"
|
||||
@updateDefaultOutput="updateDefaultOutput"
|
||||
@telemetryUpdated="updateTelemetry"
|
||||
/>
|
||||
<div class="c-cs__test-data-and-conditions-w">
|
||||
<TestData class="c-cs__test-data"
|
||||
:is-editing="isEditing"
|
||||
:test-data="testData"
|
||||
:telemetry="telemetryObjs"
|
||||
@updateTestData="updateTestData"
|
||||
/>
|
||||
<ConditionCollection class="c-cs__conditions"
|
||||
:is-editing="isEditing"
|
||||
:test-data="testData"
|
||||
@conditionSetResultUpdated="updateCurrentOutput"
|
||||
@updateDefaultOutput="updateDefaultOutput"
|
||||
@telemetryUpdated="updateTelemetry"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -23,7 +23,6 @@
|
||||
<template>
|
||||
<section v-show="isEditing"
|
||||
id="test-data"
|
||||
class="c-cs__test-data"
|
||||
:class="{ 'is-expanded': expanded }"
|
||||
>
|
||||
<div class="c-cs__header c-section__header">
|
||||
@ -96,7 +95,7 @@
|
||||
>
|
||||
</span>
|
||||
</span>
|
||||
<div class="c-test-datum__buttons">
|
||||
<div class="c-cs-test__buttons">
|
||||
<button class="c-click-icon c-test-data__duplicate-button icon-duplicate"
|
||||
title="Duplicate this test datum"
|
||||
@click="addTestInput(testInput)"
|
||||
|
||||
@ -1,116 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2020, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT 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 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.
|
||||
*****************************************************************************/
|
||||
|
||||
.c-cs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 0 1 auto;
|
||||
overflow: hidden;
|
||||
|
||||
> * {
|
||||
flex: 0 0 auto;
|
||||
overflow: hidden;
|
||||
+ * {
|
||||
margin-top: $interiorMarginSm;
|
||||
}
|
||||
}
|
||||
|
||||
.c-button {
|
||||
align-self: start;
|
||||
}
|
||||
}
|
||||
|
||||
.is-editing & {
|
||||
// Add some space to kick away from blue editing border indication
|
||||
padding: $interiorMargin;
|
||||
}
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__conditions-h {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 auto;
|
||||
overflow: auto;
|
||||
padding-right: $interiorMarginSm;
|
||||
|
||||
> * + * {
|
||||
margin-top: $interiorMarginSm;
|
||||
}
|
||||
}
|
||||
|
||||
&__conditions {
|
||||
> * + * {
|
||||
margin-top: $interiorMarginSm;
|
||||
}
|
||||
}
|
||||
|
||||
.hint {
|
||||
padding: $interiorMarginSm;
|
||||
}
|
||||
|
||||
/************************** SPECIFIC ITEMS */
|
||||
&__current-output-value {
|
||||
font-size: 1.25em;
|
||||
padding: $interiorMargin;
|
||||
}
|
||||
}
|
||||
|
||||
/***************************** TEST DATA */
|
||||
.c-cs-tests {
|
||||
flex: 0 1 auto;
|
||||
overflow: auto;
|
||||
padding-right: $interiorMarginSm;
|
||||
|
||||
> * + * {
|
||||
margin-top: $interiorMarginSm;
|
||||
}
|
||||
}
|
||||
|
||||
.c-cs-test {
|
||||
> * {
|
||||
flex: 0 0 auto;
|
||||
+ * {
|
||||
margin-left: $interiorMargin;
|
||||
}
|
||||
}
|
||||
|
||||
&__controls {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
|
||||
> * + * {
|
||||
margin-left: $interiorMargin;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -20,14 +20,145 @@
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
.c-cs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
/************************** CONDITION SET LAYOUT */
|
||||
&__current-output {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
&__test-data-and-conditions-w {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 auto;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__test-data,
|
||||
&__conditions {
|
||||
flex: 0 0 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__test-data {
|
||||
flex: 0 0 auto;
|
||||
max-height: 50%;
|
||||
|
||||
&.is-expanded {
|
||||
margin-bottom: $interiorMargin * 4;
|
||||
}
|
||||
}
|
||||
|
||||
&__conditions {
|
||||
flex: 1 1 auto;
|
||||
|
||||
> * + * {
|
||||
margin-top: $interiorMarginSm;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 0 1 auto;
|
||||
overflow: hidden;
|
||||
|
||||
> * {
|
||||
flex: 0 0 auto;
|
||||
overflow: hidden;
|
||||
+ * {
|
||||
margin-top: $interiorMarginSm;
|
||||
}
|
||||
}
|
||||
|
||||
.c-button {
|
||||
align-self: start;
|
||||
}
|
||||
}
|
||||
|
||||
.is-editing & {
|
||||
// Add some space to kick away from blue editing border indication
|
||||
padding: $interiorMargin;
|
||||
}
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__conditions-h {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 auto;
|
||||
overflow: auto;
|
||||
padding-right: $interiorMarginSm;
|
||||
|
||||
> * + * {
|
||||
margin-top: $interiorMarginSm;
|
||||
}
|
||||
}
|
||||
|
||||
.hint {
|
||||
padding: $interiorMarginSm;
|
||||
}
|
||||
|
||||
/************************** SPECIFIC ITEMS */
|
||||
&__current-output-value {
|
||||
flex-direction: row;
|
||||
align-items: baseline;
|
||||
padding: 0 $interiorMargin $interiorMarginLg $interiorMargin;
|
||||
|
||||
> * {
|
||||
padding: $interiorMargin 0; // Must do this to align label and value
|
||||
}
|
||||
|
||||
&__label {
|
||||
color: $colorInspectorSectionHeaderFg;
|
||||
opacity: 0.9;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&__value {
|
||||
$p: $interiorMargin * 3;
|
||||
font-size: 1.25em;
|
||||
margin-left: $interiorMargin;
|
||||
padding-left: $p;
|
||||
padding-right: $p;
|
||||
background: rgba(black, 0.2);
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/***************************** CONDITIONS AND TEST DATUM ELEMENTS */
|
||||
.c-condition,
|
||||
.c-test-datum {
|
||||
@include discreteItem();
|
||||
display: flex;
|
||||
padding: $interiorMargin;
|
||||
line-height: 170%; // Aligns text with controls like selects
|
||||
}
|
||||
|
||||
&--edit {
|
||||
line-height: 160%; // For layout when inputs wrap, like in criteria
|
||||
.c-cdef,
|
||||
.c-cs-test {
|
||||
&__controls {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
flex-wrap: wrap;
|
||||
|
||||
> * > * {
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
@ -105,8 +236,6 @@
|
||||
}
|
||||
|
||||
&__controls {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
grid-column: 2;
|
||||
|
||||
@ -129,5 +258,21 @@
|
||||
background-color: lightblue;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/***************************** TEST DATA */
|
||||
.c-cs-tests {
|
||||
flex: 0 1 auto;
|
||||
overflow: auto;
|
||||
padding-right: $interiorMarginSm;
|
||||
|
||||
> * + * {
|
||||
margin-top: $interiorMarginSm;
|
||||
}
|
||||
}
|
||||
|
||||
.c-cs-test {
|
||||
> * + * {
|
||||
margin-left: $interiorMargin;
|
||||
}
|
||||
}
|
||||
@ -21,13 +21,14 @@
|
||||
*****************************************************************************/
|
||||
|
||||
<template>
|
||||
<a class="c-condition-widget"
|
||||
:href="internalDomainObject.url"
|
||||
<component :is="urlDefined ? 'a' : 'span'"
|
||||
class="c-condition-widget"
|
||||
:href="urlDefined ? internalDomainObject.url : null"
|
||||
>
|
||||
<div class="c-condition-widget__label">
|
||||
{{ internalDomainObject.label }}
|
||||
</div>
|
||||
</a>
|
||||
</component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -38,6 +39,11 @@ export default {
|
||||
internalDomainObject: this.domainObject
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
urlDefined() {
|
||||
return this.internalDomainObject.url && this.internalDomainObject.url.length > 0;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.unlisten = this.openmct.objects.observe(this.internalDomainObject, '*', this.updateInternalDomainObject);
|
||||
},
|
||||
|
||||
@ -28,10 +28,12 @@
|
||||
border: 1px solid transparent;
|
||||
display: inline-block;
|
||||
padding: $interiorMarginLg $interiorMarginLg * 2;
|
||||
cursor: inherit !important;
|
||||
&[href] {
|
||||
cursor: pointer !important;
|
||||
}
|
||||
}
|
||||
|
||||
a.c-condition-widget {
|
||||
// Widget is conditionally made into a <a> when URL property has been defined
|
||||
cursor: pointer !important;
|
||||
pointer-events: inherit;
|
||||
}
|
||||
|
||||
// Make Condition Widget expand when in a hidden frame Layout context
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div class="l-browse-bar__view-switcher c-ctrl-wrapper c-ctrl-wrapper--menus-left">
|
||||
<div class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left">
|
||||
<button
|
||||
class="c-button--menu icon-notebook"
|
||||
title="Switch view type"
|
||||
title="Take a Notebook Snapshot"
|
||||
@click="setNotebookTypes"
|
||||
@click.stop="toggleMenu"
|
||||
>
|
||||
|
||||
@ -13,7 +13,6 @@
|
||||
@import "~styles/controls";
|
||||
@import "~styles/forms";
|
||||
@import "~styles/table";
|
||||
@import "~styles/layout";
|
||||
@import "~styles/legacy";
|
||||
@import "~styles/legacy-plots";
|
||||
@import "~styles/plotly";
|
||||
|
||||
@ -13,7 +13,6 @@
|
||||
@import "~styles/controls";
|
||||
@import "~styles/forms";
|
||||
@import "~styles/table";
|
||||
@import "~styles/layout";
|
||||
@import "~styles/legacy";
|
||||
@import "~styles/legacy-plots";
|
||||
@import "~styles/plotly";
|
||||
|
||||
@ -13,7 +13,6 @@
|
||||
@import "~styles/controls";
|
||||
@import "~styles/forms";
|
||||
@import "~styles/table";
|
||||
@import "~styles/layout";
|
||||
@import "~styles/legacy";
|
||||
@import "~styles/legacy-plots";
|
||||
@import "~styles/plotly";
|
||||
|
||||
@ -244,18 +244,10 @@ button {
|
||||
|
||||
/******************************************************** SECTION */
|
||||
section {
|
||||
flex: 0 0 auto;
|
||||
flex: 0 1 auto;
|
||||
overflow: hidden;
|
||||
+ section {
|
||||
margin-top: $interiorMargin;
|
||||
|
||||
&.is-expanded {
|
||||
margin-bottom: $interiorMargin * 3;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-expanded {
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
|
||||
.c-section__header {
|
||||
|
||||
@ -88,6 +88,12 @@ body.desktop {
|
||||
background: $scrollbarThumbColorMenuHov;
|
||||
}
|
||||
}
|
||||
|
||||
div, span {
|
||||
// Firefox
|
||||
scrollbar-color: $scrollbarThumbColor $scrollbarTrackColorBg;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
}
|
||||
|
||||
/******************************************************** HTML ENTITIES */
|
||||
|
||||
@ -1,87 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2018, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT 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 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.
|
||||
*****************************************************************************/
|
||||
|
||||
/************************** BROWSE BAR */
|
||||
.l-browse-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
[class*="__"] {
|
||||
// Removes extraneous horizontal white space
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
&__start {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1 1 auto;
|
||||
margin-right: $interiorMargin;
|
||||
min-width: 0; // Forces interior to compress when pushed on
|
||||
}
|
||||
|
||||
&__end {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 0 0 auto;
|
||||
|
||||
[class*="__"] + [class*="__"] {
|
||||
margin-left: $interiorMarginSm;
|
||||
}
|
||||
}
|
||||
|
||||
&__nav-to-parent-button,
|
||||
&__disclosure-button {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
&__nav-to-parent-button {
|
||||
// This is an icon-button
|
||||
$p: $interiorMargin;
|
||||
margin-right: $interiorMargin;
|
||||
padding-left: $p;
|
||||
padding-right: $p;
|
||||
|
||||
.is-editing & {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__object-name--w {
|
||||
flex: 0 1 auto;
|
||||
@include headerFont(1.4em);
|
||||
min-width: 0;
|
||||
|
||||
&:before {
|
||||
// Icon
|
||||
margin-right: $interiorMargin;
|
||||
}
|
||||
}
|
||||
|
||||
&__object-name {
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
|
||||
&__object-details {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
@ -54,7 +54,6 @@
|
||||
|
||||
@mixin elementStatusColors($c) {
|
||||
// Sets bg and icon colors for elements
|
||||
background: rgba($c, 0.5) !important;
|
||||
&:before {
|
||||
color: $c !important;
|
||||
}
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
@import "../api/overlays/components/dialog-component.scss";
|
||||
@import "../api/overlays/components/overlay-component.scss";
|
||||
@import "../plugins/condition/components/condition.scss";
|
||||
@import "../plugins/condition/components/condition-set.scss";
|
||||
@import "../plugins/condition/components/conditionals.scss";
|
||||
@import "../plugins/conditionWidget/components/condition-widget.scss";
|
||||
@import "../plugins/condition/components/inspector/conditional-styles.scss";
|
||||
@import "../plugins/displayLayout/components/box-view.scss";
|
||||
|
||||
@ -28,6 +28,7 @@
|
||||
|
||||
<div class="l-browse-bar__end">
|
||||
<view-switcher
|
||||
v-if="!isEditing"
|
||||
:current-view="currentView"
|
||||
:views="views"
|
||||
@setView="setView"
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<button
|
||||
class="c-button--menu"
|
||||
:class="currentView.cssClass"
|
||||
title="Switch view type"
|
||||
title="Change the current view"
|
||||
@click.stop="toggleViewMenu"
|
||||
>
|
||||
<span class="c-button__label">
|
||||
|
||||
@ -1,3 +1,24 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2020, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT 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 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.
|
||||
*****************************************************************************/
|
||||
/******************************* SHELL */
|
||||
.l-shell {
|
||||
position: absolute;
|
||||
@ -126,6 +147,9 @@
|
||||
|
||||
body.mobile & .l-shell__main-view-browse-bar {
|
||||
margin-left: $mobileMenuIconD; // Make room for the hamburger!
|
||||
.c-button[class*='__actions__edit'] {
|
||||
display: none; // Hide the main view edit button when in mobile context
|
||||
}
|
||||
}
|
||||
|
||||
&__head {
|
||||
@ -269,6 +293,79 @@
|
||||
}
|
||||
}
|
||||
|
||||
/************************** BROWSE BAR */
|
||||
.l-browse-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
[class*="__"] {
|
||||
// Removes extraneous horizontal white space
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
&__start,
|
||||
&__end,
|
||||
&__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__actions,
|
||||
&__end {
|
||||
> * + * {
|
||||
margin-left: $interiorMarginSm;
|
||||
}
|
||||
}
|
||||
|
||||
&__start {
|
||||
flex: 1 1 auto;
|
||||
margin-right: $interiorMargin;
|
||||
min-width: 0; // Forces interior to compress when pushed on
|
||||
}
|
||||
|
||||
&__end {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
&__nav-to-parent-button,
|
||||
&__disclosure-button {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
&__nav-to-parent-button {
|
||||
// This is an icon-button
|
||||
$p: $interiorMargin;
|
||||
margin-right: $interiorMargin;
|
||||
padding-left: $p;
|
||||
padding-right: $p;
|
||||
|
||||
.is-editing & {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__object-name--w,
|
||||
&__object-name {
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
|
||||
&__object-name--w {
|
||||
@include headerFont(1.4em);
|
||||
min-width: 0;
|
||||
|
||||
&:before {
|
||||
// Icon
|
||||
margin-right: $interiorMargin;
|
||||
}
|
||||
}
|
||||
|
||||
&__object-details {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
/************************** DRAWER */
|
||||
.c-drawer {
|
||||
/* New sliding overlay or push element to contain things
|
||||
* Designed for mobile and compact desktop scenarios
|
||||
@ -332,4 +429,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user