Vue修改mint-ui預設樣式(預設風格)
阿新 • • 發佈:2018-11-08
加入my-mint.css
我這裡用的postcss的變數定義,如果親們用的是其他前處理器,要改成其他處理器的定義方式
覆蓋mint-ui的primary顏色,改為自己UI的主題色
--main-color: #f76349; /* 橙色 主色調 */ .mint-header { background-color: var(--main-color); } .mint-button:not(.is-disabled):active::after { opacity: .2 /* .6 */ } .mint-button--primary { background-color: var(--main-color); } .mint-button--primary.is-plain { border: 1px solid var(--main-color); color: var(--main-color) } .mint-badge.is-primary { background-color: var(--main-color) } .mint-switch-input:checked + .mint-switch-core { border-color: var(--main-color); background-color: var(--main-color); } .mint-navbar .mint-tab-item.is-selected { border-bottom: 3px solid var(--main-color); color: var(--main-color); } .mint-tabbar > .mint-tab-item.is-selected { color: var(--main-color); } .mint-searchbar-cancel { color: var(--main-color); } .mint-checkbox-input:checked + .mint-checkbox-core { background-color: var(--main-color); border-color: var(--main-color); } .mint-radio-input:checked + .mint-radio-core { background-color: var(--main-color); border-color: var(--main-color); } .mt-range-progress { background-color: var(--main-color); } .mt-progress-progress { background-color: var(--main-color); } .mint-msgbox-confirm { color: var(--main-color); } .mint-msgbox-confirm:active { color: var(--main-color); } .mint-datetime-action { color: var(--main-color); }