node-red/editor/sass/palette-editor.scss

/**
 * Copyright 2016 IBM Corp.
 *
 * 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.
 **/

#palette-editor {
    text-align: left;
    display: none;
    position: absolute;
    top: 0px;
    right: 0;
    bottom: 25px;
    left:0;
    padding: 0;
    box-sizing:border-box;
    background: #fff;

    .red-ui-editableList-container {
        border: none;
        border-radius: 0;
        padding: 0px;


        li {
            // border: none;
            // border-top: 1px solid $primary-border-color;
            padding: 0px;
            .disabled {
                background: #f3f3f3;

                .palette-module-name {
                    font-style: italic;
                    color: #aaa;
                }
                .palette-module-version {
                    color: #aaa;
                }



            }
            .red-ui-editableList-item-content {
                padding: 12px 8px;
            }
            &:last-child {
                // border-bottom: 1px solid $primary-border-color;
            }
        }

    }
    .palette-editor-tab {
        position:absolute;
        top:115px;
        left:0;
        right:0;
        bottom:0
    }
    .palette-editor-toolbar {
        background: #f3f3f3;
        box-sizing: border-box;
        padding: 8px 10px;
        border-bottom: 1px solid $primary-border-color;
        text-align: right;

        .button-group {
            margin-right: 10px;
        }
    }
    .palette-module-button-group {
        position: absolute;
        right: 0;
        bottom: 0;
        a {
            margin-left: 5px;
        }
    }
    .palette-module-shade {
        position: absolute;
        top: 0;
        bottom:0;
        left:0;
        right:0;
        background: rgba(255,255,255,0.8);
        text-align: center;
        padding-top: 20px;
    }
    #palette-module-install-shade {
        padding-top: 80px;
    }
    .palette-module-shade-status {
        color: #666;
    }

    .palette-module-meta {
        color: #666;
        position: relative;
        &.disabled {
            color: #ccc;
        }

        .fa {
            width: 15px;
            text-align: center;
            margin-right: 5px;
        }
    }
    .palette-module-name {
        white-space: nowrap;
        @include enable-selection;
    }
    .palette-module-version, .palette-module-updated, .palette-module-link {
        font-style:italic;
        font-size: 0.8em;
        @include enable-selection;
    }
    .palette-module-updated {
        margin-left: 10px;
    }
    .palette-module-link {
        margin-left: 5px;
    }

    .palette-module-description {
        margin-left: 20px;
        font-size: 0.9em;
        color: #999;
    }
    .palette-module-link {
    }
    .palette-module-set-button-group {
    }
    .palette-module-count {
        border-radius: 4px;
        background: #eee;
        padding: 2px 8px;
        font-size: 12px;
    }
    .palette-module-content {
        display: none;
        padding: 10px 3px;
    }
    i.fa.palette-module-node-chevron {
        width: 8px;
        margin-right: 0;
        transform: rotate(0deg);
        transition: transform 0.2s ease-in-out;
    }
    .expanded {
        i.fa.palette-module-node-chevron {
            transform: rotate(90deg);
        }

        .palette-module-set-button {
            background:#f3f3f3 !important;
        }
    }
    .palette-module-set {
        border:1px solid $secondary-border-color;
        border-radius: 0;
        padding: 5px;
        position: relative;
        &:not(:last-child) {
            border-bottom: none;
        }
        &:first-child {
            border-top-right-radius: 2px;
            border-top-left-radius: 2px;
        }
        &:last-child {
            border-bottom-right-radius: 2px;
            border-bottom-left-radius: 2px;
        }
    }

    .palette-module-type {
        color: #666;
        padding-left: 5px;
        font-size: 0.9em;
        @include enable-selection;
    }
    .palette-module-type-swatch {
        display: inline-block;
        width: 12px;
        height: 12px;
        border-radius: 3px;
        vertical-align: middle;
        margin-right: 5px;
        background: #fff;
        border: 1px solid #fff;
    }
    .palette-module-set-button-group {
        position: absolute;
        right: 4px;
        top: 4px;
    }

    .palette-module-set-disabled {
        background: #eee;
        .palette-module-type {
            color: #999;
        }
    }
    .palette-module-more {
        padding: 0 !important;
        margin-top: 10px;
        margin-bottom: 10px;
        background: $tab-background-inactive;
        a {
            display: block;
            text-align: center;
            padding: 12px 8px;
            color: #AD1625;

            &:hover {
                text-decoration: none;
                background: $tab-background-hover;
            }
        }
    }

}