muf-ui/style/button.css

MUF-UI,基于Vue的Web多样化组件库

/* Set button size */

.min {
    padding: 0px 8px 0px 8px;
    height: 25px;
    font-size: 12px;
}

.med {
    padding: 2.5px 15px 2.5px 15px;
    height: 30px;
    font-size: 14px;
}

.max {
    padding: 5px 25px 5px 25px;
    height: 40px;
    font-size: 14px;
}


/* Set button round */


/* not round */

.none {
    border-radius: 0px 0px 0px 0px;
}


/* tiny round */

.tiny {
    border-radius: 5px 5px 5px 5px;
}


/* half round */

.half {
    border-radius: 20px 20px;
}


/* circle button */

.circle {
    border-radius: 100% 100%;
    text-align: center;
    padding: 0px 0px 0px 0px !important;
}

.max.circle {
    width: 40px;
    height: 40px;
}

.med.circle {
    width: 30px;
    height: 30px;
}

.min.circle {
    width: 25px;
    height: 25px;
}


/* button style */

.default {
    background-color: rgb(255, 255, 255);
    border: 0.5px solid rgb(221, 223, 228);
    color: rgb(50, 50, 50);
}

.default:hover {
    color: #41A5F9;
    border: 0.5px solid rgb(222, 216, 252);
    background-color: rgb(238, 243, 250);
}

.default:active {
    color: #41A5F9;
    border: 0.5px solid #41A5F9;
    background-color: rgb(233, 240, 253);
}


/* success button */

.success {
    background-color: #6DF7B7;
    border: 0.5px solid #6DF7B7;
    color: white;
}

.success:hover {
    background-color: #55e4a1;
    border: 0.5px solid #55e4a1;
    color: white;
}

.success:active {
    background-color: #54cf96;
    border: 0.5px solid #54cf96;
    color: white;
}


/* danger button */

.danger {
    background-color: #FA8E73;
    border: 0.5px solid #FA8E73;
    color: white;
}

.danger:hover {
    background-color: #e4795e;
    border: 0.5px solid #e4795e;
    color: white;
}

.danger:active {
    background-color: #d66447;
    border: 0.5px solid #d66447;
    color: white;
}


/* warning button */

.warning {
    background-color: #F7E165;
    border: 0.5px solid #F7E165;
    color: white;
}

.warning:hover {
    background-color: #e2ca42;
    border: 0.5px solid #e2ca42;
    color: white;
}

.warning:active {
    background-color: #ceb52c;
    border: 0.5px solid #ceb52c;
    color: white;
}


/* message button */

.message {
    background-color: #E1E1E1;
    border: 0.5px solid #E1E1E1;
    color: white;
}

.message:hover {
    background-color: #cccccc;
    border: 0.5px solid #cccccc;
    color: white;
}

.message:active {
    background-color: #c2bdbd;
    border: 0.5px solid #c2bdbd;
    color: white;
}


/* plain button */

.plain {
    background-color: #41A5F9;
    border: 0.5px solid #41A5F9;
    color: white;
}

.plain:hover {
    background-color: #4181f9;
    border: 0.5px solid #4181f9;
    color: white;
}

.plain:active {
    background-color: #5162f7;
    border: 0.5px solid #5162f7;
    color: white;
}


/* drisk button */

.default.is-drisk {
    background-color: white;
    border: 0.5px solid rgb(221, 220, 220);
    color: rgb(50, 50, 50);
}

.default.is-drisk:hover {
    color: #41A5F9;
    border: 0.5px solid #41A5F9;
}

.default.is-drisk:active {
    color: #41A5F9;
    border: 0.5px solid #41A5F9;
    background-color: rgb(233, 240, 253);
}


/* is drisk success button */

.success.is-drisk {
    background-color: rgb(211, 245, 232);
    border: 0.5px solid #09d877;
    color: #09d877;
}

.success.is-drisk:hover {
    background-color: #55e4a1;
    border: 0.5px solid #55e4a1;
    color: white;
}

.success.is-drisk:active {
    background-color: #54cf96;
    border: 0.5px solid #54cf96;
    color: white;
}


/* is drisk danger button */

.danger.is-drisk {
    background-color: rgb(248, 238, 234);
    border: 0.5px solid #FA8E73;
    color: #FA8E73;
}

.danger.is-drisk:hover {
    background-color: #FA8E73;
    border: 0.5px solid #FA8E73;
    color: white;
}

.danger.is-drisk:active {
    background-color: #d66447;
    border: 0.5px solid #d66447;
    color: white;
}


/* is drisk warning button */

.warning.is-drisk {
    background-color: rgb(247, 246, 228);
    border: 0.5px solid #e4c724;
    color: #e4c724;
}

.warning.is-drisk:hover {
    background-color: #F7E165;
    border: 0.5px solid #F7E165;
    color: white;
}

.warning.is-drisk:active {
    background-color: #ceb52c;
    border: 0.5px solid #ceb52c;
    color: white;
}


/* is drisk message button */

.message.is-drisk {
    background-color: rgb(245, 245, 245);
    border: 0.5px solid #BDBDBD;
    color: #BDBDBD;
}

.message.is-drisk:hover {
    background-color: #E1E1E1;
    border: 0.5px solid #E1E1E1;
    color: white;
}

.message.is-drisk:active {
    background-color: #c2bdbd;
    border: 0.5px solid #c2bdbd;
    color: white;
}


/* is drisk plain button */

.plain.is-drisk {
    background-color: rgb(246, 245, 253);
    border: 0.5px solid #41A5F9;
    color: #41A5F9;
}

.plain.is-drisk:hover {
    background-color: #41A5F9;
    border: 0.5px solid #41A5F9;
    color: white;
}

.plain.is-drisk:active {
    background-color: #5162f7;
    border: 0.5px solid #5162f7;
    color: white;
}


/* text button */

.text {
    background-color: transparent;
    width: auto;
    height: auto;
    border: none;
    padding: 0px 0px;
    color: #41A5F9;
}

.text:active {
    color: rgb(32, 40, 165);
}

.text.is-disabled {
    color: rgb(166, 161, 168);
    cursor: not-allowed !important;
}


/* button icon style */

.iconStyle {
    margin: 1px 5px 0px 0px;
    font-size: 14px;
}


/* default disabled button style */

.default.is-disabled {
    cursor: not-allowed !important;
    background-color: rgb(255, 252, 252);
    color: rgb(194, 194, 199);
}

.default.is-disabled:hover {
    border: 0.5px solid rgb(210, 210, 210);
}

.default.is-drisk.is-disabled {
    cursor: not-allowed !important;
    background-color: rgb(253, 249, 249);
    color: rgb(179, 173, 194);
}

.default.is-drisk.is-disabled:hover {
    background-color: rgb(253, 249, 249);
    border: 0.5px solid rgb(210, 210, 210);
}

.success.is-disabled {
    cursor: not-allowed !important;
    background-color: rgb(158, 216, 194);
    border: 0.5px solid rgb(158, 216, 194);
    color: rgb(243, 243, 243);
}

.success.is-drisk.is-disabled {
    cursor: not-allowed !important;
    background-color: rgb(189, 241, 222);
    border: 0.5px solid rgb(189, 241, 222);
    color: rgb(156, 190, 178);
}

.danger.is-disabled {
    cursor: not-allowed !important;
    background-color: rgb(212, 172, 156);
    border: 0.5px solid rgb(212, 172, 156);
    color: rgb(245, 243, 243);
}

.danger.is-drisk.is-disabled {
    cursor: not-allowed !important;
    background-color: rgb(243, 232, 228);
    border: 0.5px solid rgb(243, 232, 228);
    color: rgb(177, 155, 145);
}

.warning.is-disabled {
    cursor: not-allowed !important;
    background-color: #f5d4a3;
    border: 0.5px solid #f5d4a3;
    color: rgb(255, 255, 255);
}

.warning.is-drisk.is-disabled {
    cursor: not-allowed !important;
    background-color: rgb(247, 245, 228);
    border: 0.5px solid rgb(247, 245, 228);
    color: #f5d4a3;
}

.message.is-drisk.is-disabled {
    cursor: not-allowed !important;
    background-color: rgb(241, 241, 241);
    border: 0.5px solid rgb(241, 241, 241);
    color: rgb(187, 179, 179);
}

.message.is-disabled {
    cursor: not-allowed !important;
    background-color: rgb(215, 215, 215);
    border: 0.5px solid rgb(215, 215, 215);
    color: white;
}

.plain.is-disabled {
    cursor: not-allowed !important;
    background-color: rgb(190, 185, 250);
    border: 0.5px solid rgb(190, 185, 250);
    color: white;
}

.plain.is-drisk.is-disabled {
    cursor: not-allowed !important;
    background-color: rgb(245, 244, 252);
    border: 0.5px solid rgb(245, 244, 252);
    color: rgb(195, 195, 235);
}


/* default button style */

.muf-button {
    display: inline-block;
    white-space: nowrap;
    margin: 0px 0px 0px 0px;
    outline: 0;
    transition: all 0.3s;
    cursor: pointer;
}


/* focus button style */

@keyframes animated-border-plain {
    0% {
        box-shadow: 0 0 0 0 rgba(80, 184, 245, 0.55);
    }
    100% {
        box-shadow: 0 0 0 6.5px rgba(36, 33, 218, 0);
    }
}

.plain.diffuse:hover {
    animation: 1.2s animated-border-plain infinite;
}


/* button border moveing */

@keyframes animated-border-default {
    0% {
        box-shadow: 0 0 0 0 rgba(166, 170, 172, 0.25);
    }
    100% {
        box-shadow: 0 0 0 6.5px rgba(63, 63, 75, 0);
    }
}

.default.diffuse:hover {
    animation: 1.2s animated-border-default infinite;
}

@keyframes animated-border-danger {
    0% {
        box-shadow: 0 0 0 0 rgba(177, 59, 59, 0.35);
    }
    100% {
        box-shadow: 0 0 0 6.5px rgba(109, 29, 29, 0);
    }
}

.danger.diffuse:hover {
    animation: 1.2s animated-border-danger infinite;
}

@keyframes animated-border-warning {
    0% {
        box-shadow: 0 0 0 0 rgba(212, 200, 34, 0.35);
    }
    100% {
        box-shadow: 0 0 0 6.5px rgba(59, 68, 6, 0);
    }
}

.warning.diffuse:hover {
    animation: 1.2s animated-border-warning infinite;
}

@keyframes animated-border-message {
    0% {
        box-shadow: 0 0 0 0 rgba(71, 64, 64, 0.25);
    }
    100% {
        box-shadow: 0 0 0 6.5px rgba(13, 14, 13, 0);
    }
}

.message.diffuse:hover {
    animation: 1.2s animated-border-message infinite;
}

@keyframes animated-border-success {
    0% {
        box-shadow: 0 0 0 0 rgba(10, 119, 74, 0.35);
    }
    100% {
        box-shadow: 0 0 0 6.5px rgba(6, 44, 26, 0);
    }
}

.success.diffuse:hover {
    animation: 1.2s animated-border-success infinite;
}


/* loading */

@keyframes loadingMove {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.loadingIcon {
    font-size: 14px;
    animation: loadingMove 1s linear infinite;
    display: inline-block;
}