Babylon.js/inspector/src/components/actionTabs/actionTabs.scss

$line-padding-left: 2px;

#inspector-host {
    position: absolute;
    right: 0px;
    top:0px;
    bottom: 0px;
}

#__resizable_base__ {
    display: none;
}

#actionTabs {
    background: #333333;
    height: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-rows: auto 1fr;
    font: 14px "Arial";    
    overflow: hidden;

    .hoverIcon:hover {
        opacity: 0.8;
    }

    #header {
        height: 30px;
        font-size: 16px;
        color: white;
        background: #222222;
        grid-row: 1;
        text-align: center;
        display: grid;
        grid-template-columns: 30px 1fr 50px;        
        -webkit-user-select: none; 
        -moz-user-select: none;   
        -ms-user-select: none;    
        user-select: none;                

        #logo {
            grid-column: 1; 
            width: 24px;
            height: 24px;
            display: flex;
            align-self: center;   
            justify-self: center;
        }        

        #back {
            grid-column: 1; 
            display: grid;
            align-self: center;   
            justify-self: center;
            cursor: pointer;
        }              

        #title {
            grid-column: 2; 
            display: grid;
            align-items: center;   
            text-align: center;
        }

        #commands {
            grid-column: 3; 
            display: grid;
            align-items: center;  
            grid-template-columns: 1fr 1fr;   
            
            .expand {
                grid-column: 1;
                display: grid;
                align-items: center;   
                justify-items: center;
                cursor: pointer;     
            }

            .close {
                grid-column: 2;
                display: grid;
                align-items: center;   
                justify-items: center;
                cursor: pointer;     
            }        
        }
    }

    .tabs {
        display: grid;
        grid-row: 2;
        grid-template-rows: 40px 1fr;
        font: 14px "Arial";
        overflow: hidden;

        .labels {
            grid-row: 1;
            display: flex;
            align-items: center;
            justify-items: center;
            border-bottom: 1px solid #ffffff; 
            margin: 0;
            padding: 0;         

            .label {
                font-size: 24px;
                color: white;
                width: 40px;
                display: flex;
                align-content: center;
                justify-content: center;
                border: 1px solid transparent;            
                border-bottom: none;    
                background: #333333;
                padding: 5px;  
                height: 28px;
                cursor: pointer;

                &.active {
                    border-color: #ffffff;  
                    border-bottom: 2px solid transparent;           
                    margin-bottom: -2px;
                }
            }
        }

        .panes {
            grid-row: 2;
            display: grid;
            grid-template-rows: 100%;

            overflow: hidden;

            .infoMessage {
                opacity: 0.5;
                color: white;
                margin: 15px 5px 0px 5px;
                                
            }

            .gradient-step {
                display: grid;
                grid-template-rows: 100%;
                grid-template-columns: 20px 30px 40px auto 20px 30px;
                padding-top: 5px;
                padding-left: 5px;
                padding-bottom: 5px;    
                align-items: center;
        
                .step {
                    grid-row: 1;
                    grid-column: 1;
                }

                .color1 {
                    height: 100%;
                }

                .color2{
                    height: 100%;
                    padding-left: 5px;
                }
                    
                .factor1 {
                    grid-row: 1;
                    grid-column: 2;
                    cursor: pointer;
                }

                .factor2 {
                    padding-left: 5px;
                    grid-row: 1;
                    grid-column: 3;
                    cursor: pointer;

                    .grayed {
                        background: gray;
                        border-color: gray;
                    }
                }

                .numeric-input {
                    width: calc(100% - 5px);
                }

                .icon{
                    cursor: pointer;
                }
        
                .step-value {       
                    margin-left: 5px;     
                    grid-row: 1;
                    grid-column: 3;
                    text-align: right;
                    margin-right: 5px;
                }
        
                .step-slider {            
                    grid-row: 1;
                    grid-column: 4;
                    display: grid;
                    justify-content: stretch;
                    align-content: center;
                    margin-right: 12px;
        
                    input {
                        width: 100%;
                    }
                    .range:hover {
                        opacity: 1;
                    }

                    .range {
                        -webkit-appearance: none;
                        height: 6px;
                        background: #d3d3d3;
                        border-radius: 5px;
                        outline: none;
                        opacity: 0.7;
                        -webkit-transition: .2s;
                        transition: opacity .2s;
                    }
                    .range::-webkit-slider-thumb {
                        -webkit-appearance: none;
                        appearance: none;
                        width: 14px;
                        height: 14px;
                        border-radius: 50%;
                        background: rgb(51, 122, 183);
                        cursor: pointer;
                    }
                    
                    .range::-moz-range-thumb {
                        width: 14px;
                        height: 14px;
                        border-radius: 50%;
                        background: rgb(51, 122, 183);
                        cursor: pointer;
                    }
                }
               
                .gradient-copy {            
                    grid-row: 1;
                    grid-column: 5;
                    display: grid;
                    align-content: center;
                    justify-content: center;
         
                    .img {
                        height: 20px;
                        width: 20px;
                    }
                    .img:hover {
                        cursor: pointer;
                    }
        
                }
                .gradient-delete {            
                    grid-row: 1;
                    grid-column: 6;
                    display: grid;
                    align-content: center;
                    justify-content: center;
                    .img {
                        height: 20px;
                        width: 20px;
                    }
                    .img:hover {
                        cursor: pointer;
                    }
        
                }
            }

            .pane {
                color: white;

                overflow-x: hidden;
                overflow-y: auto;
                height: 100%;

                -webkit-user-select: none; 
                -moz-user-select: none;   
                -ms-user-select: none;    
                user-select: none;     

                .animation-info {                    
                    border-left: greenyellow 3px solid;
                    margin-left: 5px;
                    padding-left: 5px !important;
                }

                .underline {
                    border-bottom: 0.5px solid rgba(255, 255, 255, 0.5);
                }
                
                .textureLinkLine {
                    display: grid;
                    grid-template-columns: auto 1fr;

                    .debug {
                        grid-column: 1;
                        margin-left: 5px;
                        margin-right: 5px;
                        display: block;
                        align-items: center; 
                        justify-items: center;                          
                        cursor: pointer;
                        opacity: 0.5;

                        &.selected {
                            opacity: 1.0;
                        }
                    }

                    .textLine {
                        grid-column: 2;
                    }

                    .actionIcon {
                        display : inline-block;
                        margin-top : 6px;
                        margin-right : 4px;
                    }
                }

                .messageLine {
                    text-align: center;
                    font-size: 12px;
                    font-style: italic;
                    opacity: 0.6;
                }

                .iconMessageLine {
                    padding-left: $line-padding-left;
                    height: 30px;
                    display: grid;
                    grid-template-columns: 30px 1fr;

                    .icon {
                        grid-column: 1;
                        display: grid;
                        align-items: center;
                        justify-items: center;
                    }

                    .value {
                        grid-column: 2;
                        display: flex;
                        align-items: center;
                    }
                }

                .color-picker {
                    height: calc(100% - 8px);
                    margin: 4px;
                    width: 100%;

                    .color-rect {
                        height: calc(100% - 4px);
                        border: 2px white solid;
                        cursor: pointer;
                        min-height: 18px;
                    }

                    .color-picker-cover {
                        position: fixed;
                        top: 0px;
                        right: 0px;
                        bottom: 0px;
                        left: 0px;
                        z-index: 100;
                    }

                    .color-picker-float {
                        position: absolute;  
                    }                
                }

                .linkButtonLine {
                    padding-left: $line-padding-left;
                    height: 30px;
                    display: grid;
                    grid-template-columns: 1fr auto 20px;

                    .link {
                        grid-column: 1;
                        display: flex;
                        align-items: center;
                        text-decoration: underline;
                        cursor: pointer;
                    }

                    .link-button {
                        grid-column: 2;

                        button {
                            background: #222222;
                            border: 1px solid rgb(51, 122, 183);
                            margin: 5px 10px 5px 10px;
                            color:white;
                            padding: 4px 5px;
                            opacity: 0.9;
                            cursor: pointer;
                        }
    
                        button:hover {
                            opacity: 1.0;
                        }
    
                        button:active {
                            background: #282828;
                        }   
                        
                        button:focus {
                            border: 1px solid rgb(51, 122, 183);
                            outline: 0px;
                        } 
                    }

                    .link-icon{
                        grid-column: 3;
                        display: grid;
                        align-content: center;
                    }
                }

                .textLine {
                    padding-left: $line-padding-left;
                    height: 30px;
                    display: grid;
                    grid-template-columns: 1fr auto;

                    &.indented {
                        grid-template-columns: 100%;

                        .link-value {
                            grid-column: 1;                            
                            text-align: start;
                            margin-left: 20px;
                            opacity: 0.6;
                            max-width: unset;
                        }

                        .value {
                            grid-column: 1;                            
                            text-align: start;
                            margin-left: 20px;
                            opacity: 0.6;
                            max-width: unset;
                        }
                    }         
                    
                    &.reduced-opacity {
                        opacity: 0.6;
                        padding-left: 25px;
                    }

                    .label {
                        grid-column: 1;
                        display: flex;
                        align-items: center;
                    }

                    .link-value {
                        grid-column: 2;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        text-align: end;
                        opacity: 0.8;
                        margin:5px;
                        margin-top: 7px;
                        max-width: 140px;
                        text-decoration: underline;
                        cursor: pointer;
                    }

                    .value {
                        grid-column: 2;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        text-align: end;
                        opacity: 0.8;
                        margin:5px;
                        margin-top: 7px;
                        max-width: 200px;
                        -webkit-user-select: text; 
                        -moz-user-select: text;   
                        -ms-user-select: text;    
                        user-select: text;                

                        &.check {
                            color: green;
                        }

                        &.uncheck {
                            color: red;
                        }  
                    }
                }

                .gradient-container {
                    margin-top: 3px;

                    .gradient-label {
                        height: 30px;
                        display: grid;
                        align-content: center;
                    }

                    .gradient-step {
                        display: grid;
                        grid-template-rows: 100%;
                        grid-template-columns: 25px 50px 55px 40px auto 20px 5px;
                        padding-top: 5px;
                        padding-left: 5px;
                        padding-bottom: 5px;    
                        align-items: center;
                        border-left: orange 3px solid;
                
                        .step {
                            grid-row: 1;
                            grid-column: 1;
                        }

                        .color1 {
                            height: 100%;
                        }

                        .color2{
                            height: 100%;
                            padding-left: 5px;
                        }
                            
                        .factor1 {
                            grid-row: 1;
                            grid-column: 2;
                            cursor: pointer;
                        }

                        .factor2 {
                            padding-left: 5px;
                            grid-row: 1;
                            grid-column: 3;
                            cursor: pointer;

                            .grayed {
                                background: gray;
                                border-color: gray;
                            }
                        }

                        .numeric-input {
                            width: calc(100% - 5px);
                        }
                
                        .step-value {       
                            margin-left: 5px;     
                            grid-row: 1;
                            grid-column: 4;
                            text-align: right;
                            margin-right: 5px;
                        }
                
                        .step-slider {            
                            grid-row: 1;
                            grid-column: 5;
                            display: grid;
                            justify-content: stretch;
                            align-content: center;
                            margin-right: 5px;
                
                            input {
                                width: 100%;
                            }
                        }
                
                        .gradient-delete {            
                            grid-row: 1;
                            grid-column: 6;
                            display: grid;
                            align-content: center;
                            justify-content: center;
                        }
                    }
                }

                .textInputLine {
                    padding-left: $line-padding-left;
                    height: 30px;
                    display: grid;
                    grid-template-columns: 1fr 120px;

                    .label {
                        grid-column: 1;
                        display: flex;
                        align-items: center;
                    }

                    .value {                        
                        display: flex;
                        align-items: center;
                        grid-column: 2;
                        
                        input {
                            width: 110px;
                        }
                    }
                }

                .buttonLine {
                    height: 30px;
                    display: grid;
                    align-items: center;
                    justify-items: stretch;

                    input[type="file"] {
                        display: none;
                    }

                    .file-upload {
                        background: #222222;
                        border: 1px solid rgb(51, 122, 183);
                        margin: 5px 10px 5px 10px;
                        color:white;
                        padding: 4px 5px;
                        font-size: 13px;
                        opacity: 0.9;
                        cursor: pointer;
                        text-align: center;
                    }

                    .file-upload:hover {
                        opacity: 1.0;
                    }

                    .file-upload:active {
                        transform: scale(0.98);
                        transform-origin: 0.5 0.5;
                    }

                    button {
                        background: #222222;
                        border: 1px solid rgb(51, 122, 183);
                        margin: 5px 10px 5px 10px;
                        color:white;
                        padding: 4px 5px;
                        opacity: 0.9;
                        cursor: pointer;
                    }

                    button:hover {
                        opacity: 1.0;
                    }

                    button:active {
                        background: #282828;
                    }   
                    
                    button:focus {
                        border: 1px solid rgb(51, 122, 183);
                        outline: 0px;
                    }  
                }

                .radioLine {
                    padding-left: $line-padding-left;
                    height: 30px;
                    display: grid;
                    grid-template-columns: 1fr 24px;

                    .label {
                        grid-column: 1;
                        display: flex;
                        align-items: center;
                    }

                    .radioContainer {
                        display: flex;
                        align-items: center;

                        .radio {
                            grid-column: 2;                        
                            display: none;

                            &:checked + label:before {
                                border-color: rgb(51, 122, 183);
                            }
                            &:checked + label:after {
                                transform: scale(1);
                            }                        
                        }

                        .labelForRadio {
                            display: inline-block;
                            height: 14px;
                            position: relative;
                            padding: 0 24px;
                            margin-bottom: 0;
                            cursor: pointer;
                            vertical-align: bottom;
                            &:before, &:after {
                                position: absolute;            
                                content: '';  
                                border-radius: 50%;
                                transition: all .3s ease;
                                transition-property: transform, border-color;
                            }
                            &:before {
                                left: 0px;
                                top: 0;
                                width: 16px;
                                height: 16px;
                                border: 2px solid white;
                            }
                            &:after {
                                top: 6px;
                                left: 6px;
                                width: 8px;
                                height: 8px;
                                transform: scale(0);
                                background:rgb(51, 122, 183);
                            }
                        }
                    }
                }

                .vector3Line {
                    padding-left:$line-padding-left;                    
                    display: grid;

                    .firstLine {
                        display: grid;
                        grid-template-columns: 1fr auto 20px;
                        height: 30px;

                        .label {
                            grid-column: 1;
                            display: flex;
                            align-items: center;
                        }

                        .vector {
                            grid-column: 2;
                            display: flex;
                            align-items: center;
                            text-align: right;
                            opacity: 0.8;
                        }

                        .expand {
                            grid-column: 3;
                            display: grid;
                            align-items: center;
                            justify-items: center;
                            cursor: pointer;
                        }
                    }

                    .secondLine {
                        display: grid;
                        padding-right: 5px;  
                        border-left: 1px solid rgb(51, 122, 183);

                        .numeric {
                            display: grid;
                            grid-template-columns: 1fr auto;
                        }

                        .numeric-label {
                            text-align: right;
                            grid-column: 1;
                            display: flex;
                            align-items: center;                            
                            justify-self: right;
                            margin-right: 10px;                          
                        }

                        .numeric-value {
                            width: 120px;
                            grid-column: 2;
                            display: flex;
                            align-items: center;  
                            border: 1px solid  rgb(51, 122, 183);
                        }                        
                    }
                }

                .checkBoxLine {
                    padding-left: $line-padding-left;
                    height: 30px;
                    display: grid;
                    grid-template-columns: 1fr auto;


                    .label {
                        grid-column: 1;
                        display: flex;
                        align-items: center;
                    }

                    .checkBox {
                        grid-column: 2;
                        
                        display: flex;
                        align-items: center;

                        .lbl {
                            position: relative;
                            display: block;
                            height: 14px;
                            width: 34px;
                            margin-right: 5px;
                            background: #898989;
                            border-radius: 100px;
                            cursor: pointer;
                            transition: all 0.3s ease;
                        }

                        .lbl:after {
                            position: absolute;
                            left: 3px;
                            top: 2px;
                            display: block;
                            width: 10px;
                            height: 10px;
                            border-radius: 100px;
                            background: #fff;
                            box-shadow: 0px 3px 3px rgba(0,0,0,0.05);
                            content: '';
                            transition: all 0.15s ease;
                        }

                        .lbl:active:after { 
                            transform: scale(1.15, 0.85); 
                        }

                        .cbx:checked ~ label { 
                            background: rgb(51, 122, 183);
                        }

                        .cbx:checked ~ label:after {
                            left: 20px;
                            background: rgb(22, 73, 117);
                        }

                        .hidden { 
                            display: none; 
                        }               
                    }                    
                }                   

                .textureLine {                   
                    display: grid;
                    grid-template-rows: 30px auto;

                    .control {
                        margin-top: 2px;
                        grid-row: 1;
                        display: grid;
                        grid-template-columns: 1fr 40px 40px 40px 40px 40px 1fr;

                        .red {
                            grid-column: 2;
                        }

                        .green {
                            grid-column: 3;
                        }

                        .blue {
                            grid-column: 4;
                        }

                        .alpha {
                            grid-column: 5;
                        }                        

                        .all {
                            grid-column: 6;
                        }                        
                    }

                    .control3D {
                        margin-top: 2px;
                        grid-row: 1;
                        display: grid;
                        grid-template-columns: 1fr 40px 40px 40px 40px 40px 40px 1fr;

                        .px {
                            grid-column: 2;
                        }

                        .nx {
                            grid-column: 3;
                        }

                        .py {
                            grid-column: 4;
                        }

                        .ny {
                            grid-column: 5;
                        }   

                        .pz {
                            grid-column: 6;
                        }

                        .nz {
                            grid-column: 7;
                        }                     
                    }                    

                    .command {
                        border: 1px solid transparent;
                        background:transparent;
                        color: white;
                    }

                    .selected {
                        border: 1px solid rgb(51, 122, 183);
                    }

                    .preview {
                        grid-row: 2;
                        display: grid;
                        align-self: center;
                        justify-self: center;
                        height: 256px;
                        width: 256px;
                        margin-top: 5px;
                        margin-bottom: 5px;
                        border: 1px solid white;
                        background-size: 32px 32px;
                        background-color: white;
                        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Cpath fill='rgba(1.0,1.0,1.0,0.3)' fill-rule='evenodd' d='M0 0h1v1H0V0zm1 1h1v1H1V1z'/%3E%3C/svg%3E");
                    }
                }

                .gltf-extension-property {
                    margin-left: 30px;
                    border-left: 1px solid rgb(51, 122, 183);
                }

                .floatLine {
                    padding-left: $line-padding-left;
                    height: 30px;
                    display: grid;
                    grid-template-columns: 1fr 120px;


                    .label {
                        grid-column: 1;
                        display: flex;
                        align-items: center;
                    }

                    .value {
                        grid-column: 2;
                        
                        display: flex;
                        align-items: center;
                        
                        input {
                            width: 110px;
                        }
                    }
                }

                .sliderLine {
                    padding-left: 2px;
                    height: 30px;
                    display: grid;
                    grid-template-columns: 1fr auto;

                    .label {
                        grid-column: 1;
                        display: flex;
                        align-items: center;
                    }

                    .slider {
                        grid-column: 2;
                        margin-right: 5px;
                        
                        display: flex;
                        align-items: center;

                        .range {
                            -webkit-appearance: none;
                            width: 120px;
                            height: 6px;
                            background: #d3d3d3;
                            border-radius: 5px;
                            outline: none;
                            opacity: 0.7;
                            -webkit-transition: .2s;
                            transition: opacity .2s;
                        }
                        
                        .range:hover {
                            opacity: 1;
                        }
                        
                        .range::-webkit-slider-thumb {
                            -webkit-appearance: none;
                            appearance: none;
                            width: 14px;
                            height: 14px;
                            border-radius: 50%;
                            background: rgb(51, 122, 183);
                            cursor: pointer;
                        }
                        
                        .range::-moz-range-thumb {
                            width: 14px;
                            height: 14px;
                            border-radius: 50%;
                            background: rgb(51, 122, 183);
                            cursor: pointer;
                        }
                    }                    
                }       
                
                .color3Line {
                    padding-left: $line-padding-left;
                    display: grid;

                    .firstLine {
                        height: 30px;
                        display: grid;
                        grid-template-columns: 1fr auto 20px 20px;

                        .label {
                            grid-column: 1;
                            display: flex;
                            align-items: center;
                        }

                        .color3 {
                            grid-column: 2;
                            width: 50px;
                            
                            display: flex;
                            align-items: center;   

                            input[type="color"] {
                                -webkit-appearance: none;
                                border: 1px solid rgba(255, 255, 255, 0.5);
                                padding: 0;
                                width: 30px;
                                height: 20px;
                            }
                            input[type="color"]::-webkit-color-swatch-wrapper {
                                padding: 0;
                            }
                            input[type="color"]::-webkit-color-swatch {
                                border: none;
                            }
                            
                            input {
                                margin-right: 5px;
                            }
                        }

                        .copy {
                            grid-column: 3;
                            display: grid;
                            align-items: center;
                            justify-items: center;
                            cursor: pointer;
                            img {
                                height: 100%;
                            }
                        }

                        .expand {
                            grid-column: 4;
                            display: grid;
                            align-items: center;
                            justify-items: center;
                            cursor: pointer;
                        }
                    }   

                    .secondLine {
                        display: grid;
                        padding-right: 5px;  
                        border-left: 1px solid rgb(51, 122, 183);

                        .numeric {
                            display: grid;
                            grid-template-columns: 1fr auto;
                        }

                        .numeric-label {
                            text-align: right;
                            grid-column: 1;
                            display: flex;
                            align-items: center;                            
                            justify-self: right;
                            margin-right: 10px;                          
                        }

                        .numeric-value {
                            width: 120px;
                            grid-column: 2;
                            display: flex;
                            align-items: center;  
                            border: 1px solid  rgb(51, 122, 183);
                        }                        
                    }                  
                }     
                
                .listLine {
                    padding-left: $line-padding-left;
                    height: 30px;
                    display: grid;
                    grid-template-columns: 1fr auto;


                    .label {
                        grid-column: 1;
                        display: flex;
                        align-items: center;
                    }

                    .options {
                        grid-column: 2;
                        
                        display: flex;
                        align-items: center;   
                        margin-right: 5px;

                        select {
                            width: 115px;
                        }
                    }                    
                }                   

                .paneContainer {
                    margin-top: 3px;
                    display:grid;
                    grid-template-rows: 100%;
                    grid-template-columns: 100%;
                    
                    .paneList {
                        border-left: 3px solid transparent;
                    }

                    &:hover {  
                        .paneList {                      
                            border-left: 3px solid rgba(51, 122, 183, 0.8);
                        }

                        .paneContainer-content {
                            .header {
                                .title {   
                                    border-left: 3px solid rgb(51, 122, 183);
                                }
                            }
                        }
                    }
                    
                    .paneContainer-highlight-border {
                        grid-row: 1;
                        grid-column: 1;
                        opacity: 1;
                        border: 3px solid red;
                        margin-bottom: -5px;
                        z-index: 100;
                        transition: opacity 250ms;
                        pointer-events: none;
                        
                        &.transparent {
                            opacity: 0;
                        }
                    }

                    .paneContainer-content {
                        grid-row: 1;
                        grid-column: 1;

                        .header {
                            display: grid;
                            grid-template-columns: 1fr auto;
                            background: #555555;    
                            height: 30px;   
                            padding-right: 5px;                        
                            cursor: pointer;
                            
                            .title {                                
                                border-left: 3px solid transparent;
                                padding-left: 5px;
                                grid-column: 1;
                                display: flex;
                                align-items: center;
                            }

                            .collapse {
                                grid-column: 2;
                                display: flex;
                                align-items: center;  
                                justify-items: center;
                                transform-origin: center;

                                &.closed {
                                    transform: rotate(180deg);
                                }
                            }                        
                        }

                        .paneList > div:not(:last-child) {
                            border-bottom: 0.5px solid rgba(255, 255, 255, 0.1);
                        }

                        .fragment > div:not(:last-child)  {
                            border-bottom: 0.5px solid rgba(255, 255, 255, 0.1);
                        }
                    }
                }
            }
        }
    }
}