scss 我的重置样式_base.scss

Posted 2021-05-17

html {
    font-family: "Open Sans", "Arial", sans-serif;
    box-sizing: border-box;
}

body {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale; 
}

a:focus {
    // outline: none;
}

// *,
// *::after,
// *::before {
//     // box-sizing: inherit;
//     // outline: none;
//     // -webkit-overflow-scrolling: touch;
// }

a {
    text-decoration: none;
    color: inherit;
}

ul {
    margin: 0;
    list-style: none;
    padding: 0;
}

p {
    margin: 0;
}

h1,
h2,
h3,
h4,
h5 {
    margin: 0;
    font-weight: 400;
    font-size: inherit;
}

input {
    border: none;
    background-color: transparent;
    color: inherit;
    font-family: inherit;
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: none !important;

    &::-ms-clear {
        display: none;
    }

    &::-webkit-contacts-auto-fill-button {
        visibility: hidden;
        display: none !important;
        pointer-events: none;
        position: absolute;
        right: 0;
    }

    &::-webkit-credentials-auto-fill-button {
        visibility: hidden;
        display: none !important;
        pointer-events: none;
        position: absolute;
        right: 0;
    }
}

button {
    border: none;
    font-family: inherit;
    padding: 0;
    background-color: transparent;
    color: inherit;
}

select {
    border: none;
    background-color: transparent;
    font-family: inherit;
    -webkit-appearance: none;
    padding: 0;
    appearance: none;
}

svg {
    max-width: 100%;
}
/////////////////////////////////////////
/////////////////////////////////////////
/////////////////////////////////////////
/////////////////////////////////////////
.disable-hover,
.disable-hover * {
    pointer-events: none !important;
}
.show-center {
    position: relative;
    &:after {
        content: "";
        width: 1px;
        height: 100%;
        display: block;
        position: absolute;
        background: red;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    &:before {
        content: "";
        width: 100%;
        height: 1px;
        display: block;
        position: absolute;
        background: red;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}
#__bs_notify__ {
  
    /* Move notification to bottom */
    top: auto !important;
    bottom: 0 !important;
    border-top-left-radius: 5px !important; 
    border-bottom-left-radius: 0 !important;
  }