pip-webui/pip-webui-controls/src/options_dialog/options_dialog.less

HTML5 UI for LOB applications

// @file CSS styles for options dialog
// @copyright Digital Living Software Corp. 2014-2016

.pip-dialog.pip-options-dialog {
    .pip-header {
        display: block;
        padding: 24px 24px 16px 24px !important;

        h3 {
            width: 100%;
            text-align: left;
            margin: 0 0 16px 0;
        }

        md-checkbox {
            font-size: 16px;
        }
    }

    .pip-body {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .pip-list-item {
        cursor: pointer;
        width: 100%;
        height: 48px;
        .flex-container();
        .flex-direction-row();
        .flex-vertical-center();

        .pip-option-title {
            text-align: start;
            text-transform: none;
            font: @font-subhead2;
            .text-overflow();
            .flex-var();
        }

        .pip-option-icon {
            .flex-fixed();
        }

        md-radio-button {
            width: 20px;
            .flex-fixed();
        }

        &.selected,
        &:hover {
          background-color: rgba(0, 0, 0, .1); //#f5f5f5;//
        }
    }
}


.pip-dialog.pip-options-dialog-big {
    .pip-header {
        display: block;
        padding: 24px 24px 16px 24px !important;

        h3 {
            width: 100%;
            text-align: left;
            margin: 0 0 16px 0;
        }

        md-checkbox {
            font-size: 16px;
        }
    }

    .pip-body {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .pip-list-item {
        cursor: pointer;
        width: 100%;
        .flex-container();
        .flex-direction-row();
        padding-top: 12px;
        padding-bottom: 12px;


        md-radio-button {
            width: 20px;
            height: 20px;
            margin-top: 10px;
            .flex-fixed();
        }

        .pip-content {
            width: ~"calc(100% - 44px)";
            line-height: initial !important;

            .pip-title,
            .pip-subtitle {
                margin: 0;
            }

            .pip-title {
                font: @font-subhead2;
                .text-overflow();
                margin-top: 1px !important;
                margin-bottom: 4px !important;
            }

            .pip-subtitle {
                font: @font-body1;
                color: @color-secondary;
            }

            .pip-text {
                font: @font-subhead1;
                line-height: 22px!important;
            }
        }

        &.selected,
        &:hover {
            background-color: rgba(0, 0, 0, .1); //#f5f5f5;//
        }
    }
}

.pip-dialog.pip-options-dialog-big {
    .header-hint {
        background-color: rgba(0, 0, 0, .08)!important;
        border-bottom: 1px solid rgba(0, 0, 0, .12);
        padding: 24px 24px 24px 24px !important;
    }

    .dialog-hint {
        line-height: 19px;
        font-size: 13px;
        font-family: @font-family;
        font-style: normal;
        font-weight: normal;

        md-icon {
            font-size: 24px;
            width: 24px !important;
            height: 24px !important;
            margin: 0 16px 0 0 !important;
        }
    }
}

.pip-dialog.pip-options-dialog {
    md-dialog-content {
        max-height: 500px;
        overflow-y: overlay !important;

        .pip-content {
            .pip-list-item {
                    padding-left: 24px;
                    padding-right: 24px;
            }
        }
    }
    .pip-footer {
        padding-left: 12px;
        padding-right: 12px;
    }
}