Skip to content

Commit 493afc4

Browse files
LeopoldthecoderLeopoldthecoder
committed
fix style
1 parent 4dbc19d commit 493afc4

File tree

1 file changed

+102
-109
lines changed

1 file changed

+102
-109
lines changed

‎src/msgbox.vue

Lines changed: 102 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -22,123 +22,116 @@
2222
</template>
2323

2424
<style>
25-
@component-namespace mint {
26-
@component msgbox {
27-
position: fixed;
28-
top: 50%;
29-
left: 50%;
30-
transform: translate3d(-50%, -50%, 0);
31-
background-color: #fff;
32-
width: 85%;
33-
border-radius: 3px;
34-
font-size: 16px;
35-
-webkit-user-select: none;
36-
overflow: hidden;
37-
backface-visibility: hidden;
38-
transition: .2s;
39-
40-
@descendent header {
41-
padding: 15px 0 0;
42-
}
43-
44-
@descendent content {
45-
padding: 10px 20px 15px;
46-
border-bottom: 1px solid #ddd;
47-
min-height: 36px;
48-
position: relative;
49-
}
50-
51-
@descendent input {
52-
padding-top: 15px;
53-
& input {
54-
border: 1px solid #dedede;
55-
border-radius: 5px;
56-
padding: 4px 5px;
57-
width: 100%;
58-
appearance: none;
59-
outline: none;
60-
}
61-
& input.invalid {
62-
border-color: #ff4949;
63-
&:focus {
64-
border-color: #ff4949;
65-
}
66-
}
67-
}
68-
69-
@descendent errormsg {
70-
color: red;
71-
font-size: 12px;
72-
min-height: 18px;
73-
margin-top: 2px;
74-
}
75-
76-
@descendent title {
77-
text-align: center;
78-
padding-left: 0;
79-
margin-bottom: 0;
80-
font-size: 16px;
81-
font-weight: bold;
82-
color: #333;
83-
}
84-
85-
@descendent message {
86-
color: #999;
87-
margin: 0;
88-
text-align: center;
89-
line-height: 36px;
90-
}
91-
92-
@descendent btns {
93-
display: -webkit-box;
94-
display: -webkit-flex;
95-
display: -ms-flexbox;
96-
display: flex;
97-
height: 40px;
98-
line-height: 40px;
99-
}
100-
101-
@descendent btn {
102-
line-height: 35px;
103-
display: block;
104-
background-color: #fff;
105-
flex: 1;
106-
margin: 0;
107-
border: 0;
108-
109-
&:focus {
110-
outline: none;
111-
}
112-
113-
&:active {
114-
background-color: #fff;
115-
}
116-
}
117-
118-
@descendent cancel {
119-
width: 50%;
120-
border-right: 1px solid #ddd;
121-
&:active {
122-
color: #000;
123-
}
124-
}
125-
126-
@descendent confirm {
127-
color: #26a2ff;
128-
width: 50%;
129-
&:active {
130-
color: #26a2ff;
131-
}
132-
}
25+
.mint-msgbox {
26+
position: fixed;
27+
top: 50%;
28+
left: 50%;
29+
-webkit-transform: translate3d(-50%, -50%, 0);
30+
transform: translate3d(-50%, -50%, 0);
31+
background-color: #fff;
32+
width: 85%;
33+
border-radius: 3px;
34+
font-size: 16px;
35+
-webkit-user-select: none;
36+
overflow: hidden;
37+
-webkit-backface-visibility: hidden;
38+
backface-visibility: hidden;
39+
-webkit-transition: .2s;
40+
transition: .2s;
41+
}
42+
.mint-msgbox-header {
43+
padding: 15px 0 0;
44+
}
45+
.mint-msgbox-content {
46+
padding: 10px 20px 15px;
47+
border-bottom: 1px solid #ddd;
48+
min-height: 36px;
49+
position: relative;
50+
}
51+
.mint-msgbox-input {
52+
padding-top: 15px;
53+
}
54+
.mint-msgbox-input input {
55+
border: 1px solid #dedede;
56+
border-radius: 5px;
57+
padding: 4px 5px;
58+
width: 100%;
59+
-webkit-appearance: none;
60+
-moz-appearance: none;
61+
appearance: none;
62+
outline: none;
63+
}
64+
.mint-msgbox-input input.invalid {
65+
border-color: #ff4949;
66+
}
67+
.mint-msgbox-input input.invalid:focus {
68+
border-color: #ff4949;
69+
}
70+
.mint-msgbox-errormsg {
71+
color: red;
72+
font-size: 12px;
73+
min-height: 18px;
74+
margin-top: 2px;
75+
}
76+
.mint-msgbox-title {
77+
text-align: center;
78+
padding-left: 0;
79+
margin-bottom: 0;
80+
font-size: 16px;
81+
font-weight: 700;
82+
color: #333;
83+
}
84+
.mint-msgbox-message {
85+
color: #999;
86+
margin: 0;
87+
text-align: center;
88+
line-height: 36px;
89+
}
90+
.mint-msgbox-btns {
91+
display: -webkit-box;
92+
display: -ms-flexbox;
93+
display: flex;
94+
height: 40px;
95+
line-height: 40px;
96+
}
97+
.mint-msgbox-btn {
98+
line-height: 35px;
99+
display: block;
100+
background-color: #fff;
101+
-webkit-box-flex: 1;
102+
-ms-flex: 1;
103+
flex: 1;
104+
margin: 0;
105+
border: 0;
106+
}
107+
.mint-msgbox-btn:focus {
108+
outline: none;
109+
}
110+
.mint-msgbox-btn:active {
111+
background-color: #fff;
112+
}
113+
.mint-msgbox-cancel {
114+
width: 50%;
115+
border-right: 1px solid #ddd;
116+
}
117+
.mint-msgbox-cancel:active {
118+
color: #000;
119+
}
120+
.mint-msgbox-confirm {
121+
color: #26a2ff;
122+
width: 50%;
133123
}
124+
.mint-msgbox-confirm:active {
125+
color: #26a2ff;
134126
}
135-
136127
.msgbox-bounce-enter {
137128
opacity: 0;
129+
-webkit-transform: translate3d(-50%, -50%, 0) scale(0.7);
138130
transform: translate3d(-50%, -50%, 0) scale(0.7);
139131
}
140132
.msgbox-bounce-leave-active {
141133
opacity: 0;
134+
-webkit-transform: translate3d(-50%, -50%, 0) scale(0.9);
142135
transform: translate3d(-50%, -50%, 0) scale(0.9);
143136
}
144137
</style>

0 commit comments

Comments
 (0)