mobile.css 6.7 KB

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