lixin-web/webapp/css/element-theme/notification.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-notification{
    width: 330px;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 2px;
    position: fixed;
    right: 16px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    transition: opacity 0.3s, transform .3s, right .3s, top 0.4s;
    overflow: hidden;
}

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

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

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

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

.el-notification__group{
    margin-left: 0;
}

.el-notification__group.is-with-icon{
    margin-left: 55px;
}

.el-notification__title{
    font-weight: 400;
    font-size: 16px;
    color: rgb(31, 48, 61);
    margin: 0;
}

.el-notification__content{
    font-size: 14px;
    line-height: 21px;
    margin: 10px 0 0 0;
    color: rgb(131, 148, 165);
    text-align: justify;
}

.el-notification__icon{
    width: 40px;
    height: 40px;
    font-size: 40px;
    float: left;
    position: relative;
    top: 3px;
}

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

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

.el-notification-fade-enter {
    transform: translateX(100%);
    right: 0;
}

.el-notification-fade-leave-active {
    opacity: 0;
}
: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
  --------------------------*/
}