@import (reference) '~theme/function.less';

.eg-test-page {
    padding: 20px;
    width: 1040px;
    margin: auto;
    // layout
    & > h2 {
        margin: 1em 0;
    }
    & > .ui-row {
        margin-bottom: 10px;
    }
    & > .ui-row > .ui-col-0:first-child {
        flex-basis: 120px;
        text-align: right;
        margin-right: 20px;
    }
    // text
    .eg-test-text {
        word-break: break-all;
        line-height: 24px;
    }
    .eg-test-text-2 {
        .shape-text(72px, -5px);
    }
    // button
    .eg-test-button > div + div {
        margin-top: 10px;
    }
    .eg-test-button *:not(.ui-button-group) .ui-button {
        margin-right: 10px;
    }
    // form
    .eg-test-form {
        padding: 20px;
        background-color: #fff;
        border: 1px solid #ddd;
        .ui-form-label {
            width: 100px;
            text-align: right;
        }
        .ui-input {
            max-width: 520px;
        }
    }
    // eg-test-dropdown
    .eg-test-dropdown {
        .ui-dropdown + .ui-dropdown {
            margin-left: 20px;
        }
        .ui-dropdown-menu-panel > div {
            width: 200px;
            padding: 10px 20px;
        }
    }
    // menu
    .eg-icon {
        font-style: normal;
    }
    .eg-icon-ruby::before {
        content: "♥";
    }
    .eg-icon-weiss::before {
        content: "♣";
    }
    .eg-icon-blake::before {
        content: "♠";
    }
    .eg-icon-yang::before {
        content: "♦";
    }
    .eg-icon-unfold::before {
        content: "↓";
    }
}