Theming (#2567)
* Separate Vue component styles out from SFCs. * Added 'MCT.prototype.getAssetPath' and using 'openmct.setAssetPath' to get relative path for assets. * Re-implements `openmct.plugins.Snow()`, and `openmct.plugins.Espresso()` (as well as a new theme `openmct.plugins.Maelstron()`)
This commit is contained in:
75
src/ui/components/object-frame.scss
Normal file
75
src/ui/components/object-frame.scss
Normal file
@@ -0,0 +1,75 @@
|
||||
.c-so-view {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
/*************************** HEADER */
|
||||
&__header {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: $interiorMargin;
|
||||
|
||||
&__icon {
|
||||
flex: 0 0 auto;
|
||||
margin-right: $interiorMarginSm;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&__name {
|
||||
@include headerFont(1em);
|
||||
@include ellipsize();
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.c-so-view--no-frame) {
|
||||
background: $colorBodyBg;
|
||||
border: $browseFrameBorder;
|
||||
padding: $interiorMargin;
|
||||
}
|
||||
|
||||
&--no-frame {
|
||||
> .c-so-view__header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> .c-so-view__local-controls {
|
||||
top: $interiorMarginSm; right: $interiorMarginSm;
|
||||
}
|
||||
}
|
||||
|
||||
&__local-controls {
|
||||
position: absolute;
|
||||
top: $interiorMargin; right: $interiorMargin;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&__view-large {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.has-complex-content {
|
||||
> .c-so-view__view-large { display: block; }
|
||||
}
|
||||
|
||||
/*************************** OBJECT VIEW */
|
||||
&__object-view {
|
||||
flex: 1 1 auto;
|
||||
height: 0; // Chrome 73 overflow bug fix
|
||||
overflow: auto;
|
||||
|
||||
.c-object-view {
|
||||
.u-fills-container {
|
||||
// Expand component types that fill a container
|
||||
@include abs();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.c-click-icon,
|
||||
.c-button {
|
||||
// Shrink buttons a bit when they appear in a frame
|
||||
font-size: 0.85em;
|
||||
padding: 3px 5px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user