cloud-ui.vusion/src/components/u-validator.vue/index.css

Vusion Cloud UI

.root {
    display: inline-block;
    position: relative;
}

.message {
    position: absolute;
    left: 100%;
    top: 0;
    display: none;
    line-height:16px;
    font-size: 12px;
    margin-left: var(--validator-message-margin-left);
    border-radius: var(--validator-message-border-radius);
    z-index: var(--validator-message-z-index);
}

.message[color="focus"] {
    display: block;
    padding: 3px 10px;
    height: auto;
    width: 300px;
    background: #f7faff;
    color: #7dacde;
    border: 1px solid #d6e6fe;
}

.message[color="focus"]::before {
    position: absolute;
    content: '';
    top: 10px;
    left: -8px;
    border: 4px solid transparent;
    border-right: 4px solid #f7faff;
}

.message[color="focus"]::before {
    border-right-color: #d6e6fe;
    left: -9px;
}

.message[color="error"] {
    display: block;
    top: 50%;
    transform: translateY(-50%);
    white-space: var(--validator-message-white-space);
    color: #F24957;
    border-radius: var(--validator-message-border-radius);
    min-width: var(--validator-message-min-width);
}

.message[color="error"]::before {
    icon-font: url('../i-icon.vue/assets/warning.svg');
    font-size: 12px;
    margin-left: 1px;
    margin-right: 4px;
    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 48%, rgba(255,255,255,0) 48%);
}

.message[color="error"][placement="bottom"]  {
    top: 100%;
    left: 0;
    transform: none;
    margin-left: var(--validator-message-margin-left-bottom);
    margin-top: var(--validator-message-margin-top-bottom);
}

.root[placement="bottom"] .message {
    position: absolute;
    top: 100%;
    left: 0;
    margin-left: var(--validator-message-margin-left-bottom);
    margin-top: var(--validator-message-margin-top-bottom);
    transform: translateY(0);
}

.root[placement="bottom"] .message[color="error"] {
    transform: none;
}

.root[display="block"] {
    display: block;
}

.root[display="appear"] .message {
    position: absolute;
    left: 100%;
    top: 0;
    display: none;
    line-height: var(--validator-message-line-height);
    font-size: 12px;
    margin-left: var(--validator-message-margin-left);
    margin-top: var(--validator-message-margin-top);
    padding: var(--validator-message-padding);
    background: var(--validator-message-background);
    border-radius: var(--validator-message-border-radius);
    box-shadow: var(--validator-message-box-shadow);
    z-index: var(--validator-message-z-index);
}

.root[display="appear"] .message[color="focus"] {
    display: block;
    padding: 3px 10px;
    height: auto;
    width: 300px;
    background: #f7faff;
    color: #7dacde;
    border: 1px solid #d6e6fe;
}

.root[display="appear"] .message[color="focus"]::before {
    position: absolute;
    content: '';
    top: 10px;
    left: -8px;
    border: 4px solid transparent;
    border-right: 4px solid #f7faff;
}

.root[display="appear"] .message[color="focus"]::before {
    border-right-color: #d6e6fe;
    left: -9px;
}

.root[display="appear"] .message[color="error"] {
    display: block;
    top: 50%;
    transform: translateY(-50%);
    white-space: var(--validator-message-white-space);
    background: var(--validator-message-background-error);
    color: var(--validator-message-color-error);
    border-radius: var(--validator-message-border-radius);
    box-shadow: var(--validator-message-box-shadow);
    min-width: var(--validator-message-min-width);
}

.root[display="appear"] .message[color="error"]::before {
    position: absolute;
    top: 6px;
    left: 12px;
    icon-font: url('../i-icon.vue/assets/warning.svg');
    color: white;
    font-size: 16px;
    margin-left: -2px;
    margin-right: 6px;
    vertical-align: -1px;
    background: transparent;
}

.root[placement="bottom"][display="appear"] .message {
    position: absolute;
    top: 100%;
    left: 0;
    margin-left: var(--validator-message-margin-left-bottom);
    transform: translateY(0);
}

.root[placement="bottom"][display="appear"] .message[color="error"] {
    transform: none;
}

/* 放在popper里的message */
.message[display="appear"] {
    position: absolute;
    left: 100%;
    top: 0;
    display: none;
    line-height: var(--validator-message-line-height);
    font-size: 12px;
    margin-left: var(--validator-message-margin-left);
    margin-top: var(--validator-message-popper-margin-top);
    padding: var(--validator-message-padding);
    background: var(--validator-message-background);
    border-radius: var(--validator-message-border-radius);
    box-shadow: var(--validator-message-box-shadow);
    z-index: var(--validator-message-z-index);
}

.message[display="appear"][color="focus"] {
    display: block;
    padding: 3px 10px;
    height: auto;
    width: 300px;
    background: #f7faff;
    color: #7dacde;
    border: 1px solid #d6e6fe;
}

.message[display="appear"][color="focus"]::before {
    position: absolute;
    content: '';
    top: 10px;
    left: -8px;
    border: 4px solid transparent;
    border-right: 4px solid #f7faff;
}

.message[display="appear"][color="focus"]::before {
    border-right-color: #d6e6fe;
    left: -9px;
}

.message[display="appear"][color="error"] {
    display: block;
    top: 50%;
    transform: translateY(-50%);
    white-space: var(--validator-message-white-space);
    background: var(--validator-message-background-error);
    color: var(--validator-message-color-error);
    border-radius: var(--validator-message-border-radius);
    box-shadow: var(--validator-message-box-shadow);
    min-width: var(--validator-message-min-width);
}

.message[display="appear"][color="error"]::before {
    position: absolute;
    top: 6px;
    left: 12px;
    icon-font: url('../i-icon.vue/assets/warning.svg');
    color: white;
    font-size: 16px;
    margin-left: -2px;
    margin-right: 6px;
    vertical-align: -1px;
    background: transparent;
}

.root[placement="bottom"][display="appear"] .message {
    position: absolute;
    top: 100%;
    left: 0;
    margin-left: var(--validator-message-margin-left-bottom);
    transform: translateY(0);
}

.root[placement="bottom"][display="appear"] .message[color="error"] {
    transform: none;
}

.messagepop,
.messagepop[color="error"],
.messagepop[color="error"][display="appear"] {
    top: -4px;
    margin-left: 0;
    transform: initial;
    margin-top: 0;
}