Commit bc1d0644 authored by hbcui1984's avatar hbcui1984

升级MUI到V5.0.3

1、侧滑导航支持原生切换动画
2、增加对话框样式示例
3、增加手势开关
4、优化下拉刷新动画
parent afa28503
/*! /*!
* ===================================================== * =====================================================
* Mui v0.5.1 (https://github.com/dcloudio/mui) * Mui v0.5.3 (https://github.com/dcloudio/mui)
* ===================================================== * =====================================================
*/ */
...@@ -586,10 +586,8 @@ p { ...@@ -586,10 +586,8 @@ p {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
-webkit-transition: -webkit-transform 500ms ease; -webkit-transition: -webkit-transform 400ms ease;
transition: transform 500ms ease; transition: transform 400ms ease;
-webkit-backface-visibility: hidden;
} }
.mui-off-canvas-wrap .mui-inner-wrap .mui-bar { .mui-off-canvas-wrap .mui-inner-wrap .mui-bar {
position: absolute; position: absolute;
...@@ -1197,7 +1195,7 @@ input[type="submit"]:active, input[type="submit"].mui-active, ...@@ -1197,7 +1195,7 @@ input[type="submit"]:active, input[type="submit"].mui-active,
margin-left: -3px; margin-left: -3px;
} }
.mui-bar .mui-btn-nav:active { .mui-bar .mui-btn-nav:active {
background-color: rgba(0, 0, 0, .07); opacity: .3;
} }
.mui-bar .mui-icon { .mui-bar .mui-icon {
...@@ -1208,7 +1206,7 @@ input[type="submit"]:active, input[type="submit"].mui-active, ...@@ -1208,7 +1206,7 @@ input[type="submit"]:active, input[type="submit"].mui-active,
font-size: 24px; font-size: 24px;
} }
.mui-bar .mui-icon:active { .mui-bar .mui-icon:active {
background-color: rgba(0, 0, 0, .07); opacity: .3;
} }
.mui-bar .mui-btn .mui-icon { .mui-bar .mui-btn .mui-icon {
top: 3px; top: 3px;
...@@ -1355,6 +1353,12 @@ input[type="submit"]:active, input[type="submit"].mui-active, ...@@ -1355,6 +1353,12 @@ input[type="submit"]:active, input[type="submit"].mui-active,
-webkit-touch-callout: none; -webkit-touch-callout: none;
} }
.mui-table-view-cell.mui-radio input[type=radio], .mui-table-view-cell.mui-checkbox input[type=checkbox] {
top: 8px;
}
.mui-table-view-cell.mui-radio.mui-left, .mui-table-view-cell.mui-checkbox.mui-left {
padding-left: 58px;
}
.mui-table-view-cell.mui-active { .mui-table-view-cell.mui-active {
background-color: #eee; background-color: #eee;
} }
...@@ -1802,6 +1806,7 @@ select { ...@@ -1802,6 +1806,7 @@ select {
height: 26px; height: 26px;
-webkit-appearance: none; -webkit-appearance: none;
background-color: transparent; background-color: transparent;
border: 0;
outline: 0 !important; outline: 0 !important;
} }
.mui-radio input[type="radio"]:before, .mui-checkbox input[type="checkbox"]:before { .mui-radio input[type="radio"]:before, .mui-checkbox input[type="checkbox"]:before {
...@@ -2522,13 +2527,13 @@ select { ...@@ -2522,13 +2527,13 @@ select {
width: 28px; width: 28px;
height: 28px; height: 28px;
background-color: #fff; background-color: #fff;
border: 1px solid #ddd; border-radius: 16px;
border-radius: 100px; -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
-webkit-transition-duration: .2s; -webkit-transition-duration: .2s;
transition-duration: .2s; transition-duration: .2s;
-webkit-transition-property: -webkit-transform, border, width; -webkit-transition-property: -webkit-transform, width;
-moz-transition-property: -moz-transform, border, width; transition-property: transform, width;
transition-property: transform, border, width;
} }
.mui-switch:before { .mui-switch:before {
position: absolute; position: absolute;
...@@ -2540,15 +2545,12 @@ select { ...@@ -2540,15 +2545,12 @@ select {
content: "Off"; content: "Off";
} }
.mui-switch.mui-active { .mui-switch.mui-active {
background-color: transparent; background-color: #4cd964;
border-color: #4cd964; border-color: #4cd964;
-webkit-box-shadow: inset 0 0 0 13px #4cd964;
box-shadow: inset 0 0 0 13px #4cd964;
} }
.mui-switch.mui-active .mui-switch-handle { .mui-switch.mui-active .mui-switch-handle {
border-color: #4cd964; -webkit-transform: translate3d(45px, 0, 0);
-webkit-transform: translate3d(44px, 0, 0); transform: translate3d(45px, 0, 0);
transform: translate3d(44px, 0, 0);
} }
.mui-switch.mui-active:before { .mui-switch.mui-active:before {
right: auto; right: auto;
...@@ -2567,22 +2569,13 @@ select { ...@@ -2567,22 +2569,13 @@ select {
display: none; display: none;
} }
.mui-switch-mini.mui-active .mui-switch-handle { .mui-switch-mini.mui-active .mui-switch-handle {
-webkit-transform: translate3d(17px, 0, 0); -webkit-transform: translate3d(18px, 0, 0);
transform: translate3d(17px, 0, 0); transform: translate3d(18px, 0, 0);
} }
.mui-switch-blue .mui-switch-handle {
border: 1px solid rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, .08);
box-shadow: 0 3px 3px rgba(0, 0, 0, .08);
}
.mui-switch-blue.mui-active { .mui-switch-blue.mui-active {
background-color: #007aff;
border: 2px solid #007aff; border: 2px solid #007aff;
-webkit-box-shadow: inset 0 0 0 13px #007aff;
box-shadow: inset 0 0 0 13px #007aff;
}
.mui-switch-blue.mui-active .mui-switch-handle {
border-color: #007aff;
} }
.mui-content.mui-fade { .mui-content.mui-fade {
...@@ -2678,17 +2671,17 @@ select { ...@@ -2678,17 +2671,17 @@ select {
text-align: center; text-align: center;
} }
.mui-pull-arrow { .mui-pull-loading {
/* @include transform(translate(0,0) rotate(0)); vertical-align: middle;
@include transition(transform .2s linear); -webkit-transition-duration: 400ms;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAyCAQAAAD2dTOtAAAApElEQVRIx2OYxQCHvlggw38oZBgcCrFCihQ2YIFDViH1g+cMFjhkFVI/eP5jgUNWIfWDh2iFdbMuYUCsCmcS65lRhXRRqDXrwKzDYPgci8LDUFgKMilq1h+saREBt8xig1gai1fp9llsCDcm4FS2dxYnqmfS8ClD9XUmFq9wYk/hOWjKeHBnhVK4smMgZfjyTDVY2clZ/IQzVzWwuOPHyFz/iYQAhMbywidpE3YAAAAASUVORK5CYII=) 0 0 no-repeat; transition-duration: 400ms;
*/ }
.mui-pull-loading.mui-reverse {
-webkit-transform: translate(0, 0) rotate(180deg);
transform: translate(0, 0) rotate(180deg);
} }
/*
.mui-pull-arrow.mui-reverse{
@include transform(translate(0,0) rotate(-180deg));
}*/
.mui-pull-caption { .mui-pull-caption {
position: relative; position: relative;
display: inline-block; display: inline-block;
...@@ -2706,6 +2699,24 @@ select { ...@@ -2706,6 +2699,24 @@ select {
display: inline; display: inline;
} }
.mui-toast-container {
position: fixed;
bottom: 50px;
width: 100%;
}
.mui-toast-message {
z-index: 99999;
width: 270px;
padding: 5px 5px 5px 5px;
margin: 5px auto 5px auto;
font-size: 14px;
color: #000;
text-align: center;
background-color: #d8d8d8;
border-radius: 7px;
}
@font-face { @font-face {
font-family: Muiicons; font-family: Muiicons;
font-style: normal; font-style: normal;
...@@ -2869,6 +2880,10 @@ select { ...@@ -2869,6 +2880,10 @@ select {
content: "\e664"; content: "\e664";
} }
.mui-icon-pulldown:before {
content: "\e665";
}
.mui-icon-phone-solid:before { .mui-icon-phone-solid:before {
content: "\e702"; content: "\e702";
} }
......
This diff is collapsed.
No preview for this file type
This diff is collapsed.
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment