mobile.css 6.7 KB

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