web/src/app/annotator/common-reference-list.component.sass

/**
 * Copyright 2024 Google LLC
 *
 * 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.
 */

@use '@angular/material' as mat

$ICON_SIZE : 18px
$FONT_SIZE: 12px
$LABEL_WIDTH: 100px
$LABEL_BACKGROUND: mat.m2-get-color-from-palette(mat.$m2-indigo-palette,600)
$BACKGROUND: mat.m2-get-color-from-palette(mat.$m2-indigo-palette,100)
$LABEL_COLOR: white
$VALUE_COLOR: black
.container
    background-color: $BACKGROUND
    color: $LABEL_COLOR
    line-height: 1.7
    .icon
        width: $FONT_SIZE
        height: $FONT_SIZE
        font-size: $FONT_SIZE
    .label
        user-select: none
        font-weight: 600
        font-size: $FONT_SIZE
        margin: 0.5px 0 0.5px 0
        width: $LABEL_WIDTH
        background-color: $LABEL_BACKGROUND
        .icon
            margin: 3px 3px -3px 1px
        
    .link
        color: $VALUE_COLOR
        font-size: $FONT_SIZE
        flex: 1
        margin: 0
        margin-left: 10px
        line-height: 1.7
        white-space: nowrap
        text-overflow: ellipsis
        overflow: hidden
        &:hover
            text-decoration: underline
            cursor: pointer
            .copy-icon-container
                display: inline-block