lixin-web/webapp/css/element-theme/message.css

vue and bootstrap

@charset "UTF-8";
:root{
    /* Transition
  -------------------------- */
    /* Colors
  -------------------------- */
    /* Link
  -------------------------- */
    /* Border
  -------------------------- */
    /* Box-shadow
  -------------------------- */
    /* Fill
  -------------------------- */
    /* Font
  -------------------------- */
    /* Size
  -------------------------- */
    /* z-index
  -------------------------- */
    /* Disable base
  -------------------------- */
    /* Icon
  -------------------------- */
    /* Checkbox
  -------------------------- */
    /* Radio
  -------------------------- */
    /* Select
  -------------------------- */
    /* Alert
  -------------------------- */
    /* Message Box
  -------------------------- */
    /* Message
  -------------------------- */
    /* Notification
  -------------------------- */
    /* Input
  -------------------------- */
    /* Cascader
  -------------------------- */
    /* Group
  -------------------------- */
    /* Tab
  -------------------------- */
    /* Button
  -------------------------- */
    /* cascader
  -------------------------- */
    /* Switch
 -------------------------- */
    /* Dialog
 -------------------------- */
    /* Table
 -------------------------- */
    /* Pagination
 -------------------------- */
    /* Popover
 -------------------------- */
    /* Tooltip
  -------------------------- */
    /* Tag
  -------------------------- */
    /* Dropdown
  -------------------------- */
    /* Badge
  -------------------------- */
    /* Card
  --------------------------*/
    /* Slider
  --------------------------*/
    /* Steps
  --------------------------*/
    /* Menu
  --------------------------*/
    /* Rate
  --------------------------*/
    /* DatePicker
  --------------------------*/
    /* Loading
  --------------------------*/
    /* Scrollbar
  --------------------------*/
    /* Carousel
  --------------------------*/
    /* Collapse
  --------------------------*/
    /* Transfer
  --------------------------*/
}

.el-message{
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    min-width: 300px;
    padding: 10px 12px;
    box-sizing: border-box;
    border-radius: 2px;
    position: fixed;
    left: 50%;
    top: 20px;
    transform: translateX(-50%);
    background-color: #fff;
    transition: opacity 0.3s, transform .4s;
    overflow: hidden;
}

.el-message .el-icon-circle-check{
    color: #78d640;
}

.el-message .el-icon-circle-cross{
    color: #fe5307;
}

.el-message .el-icon-information{
    color: #d7a1e9;
}

.el-message .el-icon-warning{
    color: #64c4c9;
}

.el-message__group{
    margin-left: 38px;
    position: relative;
    height: 20px;
    line-height: 20px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
}

.el-message__group p{
    font-size: 14px;
    margin: 0 34px 0 0;
    white-space: nowrap;
    color: rgb(131, 148, 165);
    text-align: justify;
}

.el-message__group.is-with-icon{
    margin-left: 0;
}

.el-message__img{
    width: 40px;
    height: 40px;
    position: absolute;
    left: 0;
    top: 0;
}

.el-message__icon{
    vertical-align: middle;
    margin-right: 8px;
}

.el-message__closeBtn{
    top: 3px;
    right: 0;
    position: absolute;
    cursor: pointer;
    color: #d5d5d5;
    font-size: 14px;
}

.el-message__closeBtn:hover{
    color: rgb(151, 171, 190);
}

.el-message-fade-enter, .el-message-fade-leave-active {
    opacity: 0;
    transform: translate(-50%, -100%);
}
:root{
    /* Transition
  -------------------------- */
    /* Colors
  -------------------------- */
    /* Link
  -------------------------- */
    /* Border
  -------------------------- */
    /* Box-shadow
  -------------------------- */
    /* Fill
  -------------------------- */
    /* Font
  -------------------------- */
    /* Size
  -------------------------- */
    /* z-index
  -------------------------- */
    /* Disable base
  -------------------------- */
    /* Icon
  -------------------------- */
    /* Checkbox
  -------------------------- */
    /* Radio
  -------------------------- */
    /* Select
  -------------------------- */
    /* Alert
  -------------------------- */
    /* Message Box
  -------------------------- */
    /* Message
  -------------------------- */
    /* Notification
  -------------------------- */
    /* Input
  -------------------------- */
    /* Cascader
  -------------------------- */
    /* Group
  -------------------------- */
    /* Tab
  -------------------------- */
    /* Button
  -------------------------- */
    /* cascader
  -------------------------- */
    /* Switch
 -------------------------- */
    /* Dialog
 -------------------------- */
    /* Table
 -------------------------- */
    /* Pagination
 -------------------------- */
    /* Popover
 -------------------------- */
    /* Tooltip
  -------------------------- */
    /* Tag
  -------------------------- */
    /* Dropdown
  -------------------------- */
    /* Badge
  -------------------------- */
    /* Card
  --------------------------*/
    /* Slider
  --------------------------*/
    /* Steps
  --------------------------*/
    /* Steps
  --------------------------*/
    /* Rate
  --------------------------*/
    /* DatePicker
  --------------------------*/
    /* Loading
  --------------------------*/
    /* Scrollbar
  --------------------------*/
    /* Carousel
  --------------------------*/
    /* Collapse
  --------------------------*/
}