openmct/src/ui/layout/recent-objects.scss
Charles Hacskaylo 3ae6290ec3
Visual tweaks to Recently Viewed items (#6183)
- Reduced size of icon.
- Tightened spacing.
2023-01-25 14:15:50 -08:00

123 lines
2.9 KiB
SCSS

/*****************************************************************************
* Open MCT, Copyright (c) 2014-2022, 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-recentobjects-listitem {
display: flex;
padding: $interiorMargin $interiorMarginSm;
align-items: flex-start;
> * + * {
margin-left: $interiorMarginSm;
}
+ .c-recentobjects-listitem {
border-top: 1px solid $colorInteriorBorder;
}
&.is-alias {
// Object is an alias to an original.
[class~='recent-object-icon'] {
@include isAlias();
&:after {
bottom: 20%;
}
}
}
&__object-path {
padding: 0 $interiorMarginSm;
}
&__target-button{
opacity: 0;
}
&__type-icon,
&__more-options-button {
flex: 0 0 auto;
}
&__type-icon {
color: $colorItemTreeIcon;
font-size: 1.25em;
// TEMP: uses object-label component, hide label part
.c-object-label__name {
display: none;
}
}
&__more-options-button {
display: none; // TEMP until enabled
}
&__body {
flex: 1 1 auto;
padding-top: 2px; // Align with type icon
> * + * {
margin-top: $interiorMarginSm;
}
.c-location {
font-size: 0.9em;
opacity: 0.8;
&__item {
> * + * {
background: blue !important;
}
}
}
}
&__tags {
display: flex;
> * + * {
margin-left: $interiorMargin;
}
}
&__title {
border-radius: $basicCr;
color: pullForward($colorBodyFg, 30%);
cursor: pointer;
padding: $interiorMarginSm;
&:hover {
background-color: $colorItemTreeHoverBg;
}
}
.c-tag {
font-size: 0.9em;
}
}
.c-recentobjects-listitem:hover .c-recentobjects-listitem__target-button {
opacity: 100;
}