mobile.css 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355
  1. *{
  2. box-sizing: border-box;
  3. }
  4. .m-toolbar{
  5. position: relative;
  6. text-align: center;
  7. min-height: 34px;
  8. }
  9. .m-toolbar .m-title{
  10. line-height: 34px;
  11. font-size: 16px;
  12. font-weight: bold;
  13. text-align: center;
  14. }
  15. .m-left{
  16. position: absolute;
  17. height: 100%;
  18. vertical-align: middle;
  19. top:0;
  20. left:0;
  21. z-index: 1;
  22. }
  23. .m-right{
  24. position: absolute;
  25. height: 100%;
  26. vertical-align: middle;
  27. top:0;
  28. right:0;
  29. z-index: 1;
  30. }
  31. .m-left>.l-btn,.m-right>.l-btn,
  32. .m-left>.switchbutton,.m-right>.switchbutton{
  33. position: relative;
  34. vertical-align: top;
  35. top: 50%;
  36. margin-top: -15px;
  37. }
  38. .m-back::before,.m-next::after{
  39. display: inline-block;
  40. box-sizing: border-box;
  41. vertical-align: top;
  42. border-style: solid;
  43. -webkit-transform:rotate(45deg);
  44. transform:rotate(45deg);
  45. width: 12px;
  46. height: 12px;
  47. content: '';
  48. position: absolute;
  49. top: 50%;
  50. margin-top: -6px;
  51. }
  52. .m-back::before{
  53. border-width: 0 0 1px 1px;
  54. left: 8px;
  55. }
  56. .m-next::after{
  57. border-width: 1px 1px 0 0;
  58. right: 8px;
  59. }
  60. .m-back .l-btn-text{
  61. padding-left: 12px;
  62. }
  63. .m-next .l-btn-text{
  64. padding-right: 12px;
  65. }
  66. .m-buttongroup{
  67. display: inline-block;
  68. margin: 0;
  69. padding: 0;
  70. overflow: hidden;
  71. vertical-align: middle;
  72. }
  73. .m-buttongroup .l-btn{
  74. float: left;
  75. margin-left: -1px;
  76. }
  77. .m-buttongroup .l-btn:last-child::after{
  78. content: '';
  79. clear: both;
  80. }
  81. .m-buttongroup .l-btn:not(:first-child):not(:last-child){
  82. border-radius: 0;
  83. }
  84. .m-buttongroup .l-btn:first-child{
  85. border-top-right-radius: 0;
  86. border-bottom-right-radius: 0;
  87. margin-left: 0;
  88. }
  89. .m-buttongroup .l-btn:last-child{
  90. border-top-left-radius: 0;
  91. border-bottom-left-radius: 0;
  92. }
  93. .m-buttongroup-justified{
  94. display: table;
  95. table-layout: fixed;
  96. }
  97. .m-buttongroup-justified .l-btn{
  98. float: none;
  99. display: table-cell;
  100. }
  101. .m-badge:not(.l-btn),
  102. .l-btn.m-badge::after{
  103. display: inline-block;
  104. min-width: 10px;
  105. line-height: 1;
  106. font-size: 12px;
  107. text-align: center;
  108. white-space: nowrap;
  109. border-radius: 10px;
  110. padding: 2px 4px;
  111. border-style: solid;
  112. border-width: 0px;
  113. background-color: #d9534f;
  114. color: #fff;
  115. z-index: 99999;
  116. }
  117. .l-btn.m-badge::after,
  118. .l-btn .m-badge{
  119. position: absolute;
  120. top: -10px;
  121. right: -10px;
  122. }
  123. .tabs-inner .m-badge{
  124. position: absolute;
  125. top: 1px;
  126. right: -10px;
  127. }
  128. .tabs-inner>.tabs-title>.m-badge{
  129. top: 0;
  130. right: 0;
  131. }
  132. .tabs-header-bottom .tabs-inner>.tabs-title>.m-badge{
  133. top: auto;
  134. bottom: 0;
  135. right: 0;
  136. }
  137. .panel-footer .l-btn .l-btn-icon-top .m-badge,
  138. .panel-footer .l-btn .l-btn-icon-bottom .m-badge{
  139. top: 0;
  140. right: -10px;
  141. }
  142. .l-btn.m-badge::after{
  143. content: attr(data-badge);
  144. }
  145. .l-btn,.l-btn-left{
  146. overflow: visible;
  147. position: relative;
  148. }
  149. .m-in{
  150. -webkit-animation-timing-function: ease-out;
  151. -webkit-animation-duration: 250ms;
  152. }
  153. .m-out{
  154. -webkit-animation-timing-function: ease-in;
  155. -webkit-animation-duration: 250ms;
  156. }
  157. .m-slide-left.m-in{
  158. -webkit-animation-name: slideLeftIn;
  159. }
  160. .m-slide-left.m-out{
  161. -webkit-animation-name: slideLeftOut;
  162. }
  163. .m-slide-right.m-in{
  164. -webkit-animation-name: slideRightIn;
  165. }
  166. .m-slide-right.m-out{
  167. -webkit-animation-name: slideRightOut;
  168. }
  169. .m-slide-up.m-in{
  170. -webkit-animation-name: slideUpIn;
  171. }
  172. .m-slide-up.m-out{
  173. -webkit-animation-name: slideUpOut;
  174. }
  175. .m-slide-down.m-in{
  176. -webkit-animation-name: slideDownIn;
  177. }
  178. .m-slide-down.m-out{
  179. -webkit-animation-name: slideDownOut;
  180. }
  181. @-webkit-keyframes slideLeftIn{
  182. from {-webkit-transform: translateX(100%);}
  183. to {-webkit-transform: translateX(0);}
  184. }
  185. @-webkit-keyframes slideLeftOut{
  186. from {-webkit-transform: translateX(0);}
  187. to {-webkit-transform: translateX(-100%);}
  188. }
  189. @-webkit-keyframes slideRightIn{
  190. from {-webkit-transform: translateX(-100%);}
  191. to {-webkit-transform: translateX(0);}
  192. }
  193. @-webkit-keyframes slideRightOut{
  194. from {-webkit-transform: translateX(0);}
  195. to {-webkit-transform: translateX(100%);}
  196. }
  197. @-webkit-keyframes slideUpIn{
  198. from {-webkit-transform: translateY(100%);}
  199. to {-webkit-transform: translateY(0);}
  200. }
  201. @-webkit-keyframes slideUpOut{
  202. from {-webkit-transform: translateY(0);}
  203. to {-webkit-transform: translateY(-100%);}
  204. }
  205. @-webkit-keyframes slideDownIn{
  206. from {-webkit-transform: translateY(-100%);}
  207. to {-webkit-transform: translateY(0);}
  208. }
  209. @-webkit-keyframes slideDownOut{
  210. from {-webkit-transform: translateY(0);}
  211. to {-webkit-transform: translateY(100%);}
  212. }
  213. .m-fade.m-in{
  214. -webkit-animation-name: fadeIn;
  215. }
  216. .m-fade.m-out{
  217. -webkit-animation-name: fadeOut;
  218. }
  219. @-webkit-keyframes fadeIn{
  220. from {opacity: 0;}
  221. to {opacity: 1}
  222. }
  223. @-webkit-keyframes fadeOut{
  224. from {opacity: 1;}
  225. to {opacity: 0;}
  226. }
  227. .m-pop.m-in{
  228. -webkit-animation-name: popIn;
  229. }
  230. .m-pop.m-out{
  231. -webkit-animation-name: popOut;
  232. }
  233. @-webkit-keyframes popIn{
  234. from {
  235. opacity: 0;
  236. -webkit-transform: scale(.2);
  237. }
  238. to {
  239. opacity: 1;
  240. -webkit-transform: scale(1);
  241. }
  242. }
  243. @-webkit-keyframes popOut{
  244. from {
  245. opacity: 1;
  246. -webkit-transform: scale(1);
  247. }
  248. to {
  249. opacity: 0;
  250. -webkit-transform: scale(0);
  251. }
  252. }
  253. .navpanel{
  254. position: absolute;
  255. }
  256. .textbox .textbox-text{
  257. padding: 0 4px;
  258. height: 30px;
  259. line-height: 30px;
  260. }
  261. .calendar-header,.calendar-title{
  262. height: 30px;
  263. }
  264. .calendar-title span{
  265. height: 30px;
  266. line-height: 30px
  267. }
  268. .datebox-button{
  269. height: 24px;
  270. }
  271. .datebox-button a{
  272. line-height: 24px;
  273. }
  274. .tree-node{
  275. box-sizing: border-box;
  276. height: 32px;
  277. padding: 3px 0;
  278. }
  279. .panel-title{
  280. height: 26px;
  281. line-height: 26px;
  282. }
  283. .window{
  284. padding: 5px 0 0 0;
  285. }
  286. .window-shadow{
  287. -moz-box-shadow: 0 0 30px 0 #D3D3D3;
  288. -webkit-box-shadow: 0 0 30px 0 #D3D3D3;
  289. box-shadow: 0 0 30px 0 #D3D3D3;
  290. }
  291. .window-header .panel-title{
  292. height: 26px;
  293. line-height: 26px;
  294. text-align: center;
  295. }
  296. .window-header .panel-tool{
  297. display: none;
  298. }
  299. .window .window-body{
  300. border: 0;
  301. }
  302. .dialog-button{
  303. border-color: transparent;
  304. overflow: hidden;
  305. }
  306. .dialog-button .l-btn{
  307. margin: 0;
  308. }
  309. .tabs-justified,
  310. .tabs-justified .l-btn,
  311. .tabs-justified li a.tabs-inner,
  312. .tabs-justified li.tabs-selected a.tabs-inner,
  313. .tabs-header-bottom .tabs-justified li.tabs-selected a.tabs-inner,
  314. .tabs-header-bottom .tabs-justified li a.tabs-inner{
  315. -moz-border-radius:0;
  316. -webkit-border-radius:0;
  317. border-radius:0;
  318. }
  319. .datagrid-row,.datagrid-header-row{
  320. height: 32px;
  321. }
  322. .datalist .datagrid-group-title,
  323. .m-list .m-list-group{
  324. padding: 0 10px;
  325. }
  326. .datalist .datagrid-cell,
  327. .m-list li{
  328. padding: 10px;
  329. }
  330. .m-list li .m-right{
  331. right: 10px;
  332. }
  333. .datalist .datalist-link,
  334. .m-list li>a{
  335. margin: -10px;
  336. padding: 10px;
  337. padding-right: 24px;
  338. }
  339. .m-list li>a .m-right{
  340. right: 24px;
  341. }
  342. .datalist .datalist-link::after,
  343. .m-list li>a::after{
  344. right: 12px;
  345. }