app.widgets.less 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  1. // icon list
  2. .list-icon i{font-size: 14px;width:40px;vertical-align:middle;margin:0;display: inline-block;text-align: center;.transition(font-size .2s);}
  3. .list-icon div{line-height: 40px;white-space: nowrap;}
  4. .list-icon div:hover i{font-size:26px;}
  5. // settings
  6. .settings{
  7. z-index: 1050;
  8. position: fixed;
  9. top: 120px;
  10. right: -240px;
  11. width: 240px;
  12. .transition(right 0.2s);
  13. }
  14. .settings.active{
  15. right: -1px;
  16. }
  17. .settings > .btn{
  18. background: @panel-heading-bg !important;
  19. border-right-width: 0;
  20. border-color: @border-color;
  21. position: absolute;
  22. left: -42px;
  23. top: -1px;
  24. padding: 10px 15px;
  25. }
  26. .settings .i-checks span b{
  27. width: 50%;
  28. height: 20px;
  29. display: inline-block;
  30. float: left;
  31. }
  32. .settings .i-checks span b.header{
  33. height: 10px;
  34. }
  35. // streamline
  36. .streamline {
  37. position: relative;
  38. border-color: @border-color;
  39. .sl-item:after,
  40. &:after{
  41. content: '';
  42. position: absolute;
  43. background-color: #fff;
  44. border-color: inherit;
  45. border-width: 1px;
  46. border-style: solid;
  47. border-radius: 10px;
  48. width: 9px;
  49. height: 9px;
  50. margin-left: -5px;
  51. bottom: 0;
  52. left: 0;
  53. }
  54. }
  55. .sl-item{
  56. border-color: @border-color;
  57. position: relative;
  58. padding-bottom: 1px;
  59. .clearfix();
  60. &:after{
  61. top: 6px;
  62. bottom: auto;
  63. }
  64. &.b-l{
  65. margin-left: -1px;
  66. }
  67. }
  68. // timeline
  69. .timeline{
  70. margin: 0;
  71. padding: 0;
  72. }
  73. .tl-item{
  74. display: block;
  75. .clearfix();
  76. }
  77. .visible-left{
  78. display: none;
  79. }
  80. .tl-wrap{
  81. display: block;
  82. margin-left: 6em;
  83. padding: 15px 0 15px 20px;
  84. border-style: solid;
  85. border-color: @border-color;
  86. border-width: 0 0 0 4px;
  87. .clearfix();
  88. &:before{
  89. position: relative;
  90. content: "";
  91. float: left;
  92. top: 15px;
  93. margin-left: -27px;
  94. width: 10px;
  95. height: 10px;
  96. border-color: inherit;
  97. border-width: 3px;
  98. border-radius: 50%;
  99. border-style: solid;
  100. background: @brand-light;
  101. box-shadow: 0 0 0 4px @body-bg;
  102. }
  103. &:hover:before{
  104. background: transparent;
  105. border-color: #fff;
  106. }
  107. }
  108. .tl-date{
  109. position: relative;
  110. top: 10px;
  111. float: left;
  112. margin-left: -7.5em;
  113. display: block;
  114. width: 4.5em;
  115. text-align: right;
  116. }
  117. .tl-content{
  118. display: inline-block;
  119. position: relative;
  120. padding-top: 10px;
  121. padding-bottom: 10px;
  122. &.block{
  123. display: block;
  124. width: 100%;
  125. }
  126. &.panel{
  127. margin-bottom: 0;
  128. }
  129. }
  130. .tl-header{
  131. display: block;
  132. width: 12em;
  133. text-align: center;
  134. margin-left: 2px;
  135. }
  136. .timeline-center{
  137. .tl-item{
  138. margin-left: 50%;
  139. .tl-wrap{
  140. margin-left: -2px;
  141. }
  142. }
  143. .tl-header{
  144. width: auto;
  145. margin: 0;
  146. }
  147. .tl-left{
  148. margin-left: 0;
  149. margin-right: 50%;
  150. .hidden-left{
  151. display: none !important;
  152. }
  153. .visible-left{
  154. display: inherit;
  155. }
  156. .tl-wrap{
  157. float: right;
  158. margin-right: -2px;
  159. border-left-width: 0;
  160. border-right-width: 4px;
  161. padding-left: 0;
  162. padding-right: 20px;
  163. &:before{
  164. float: right;
  165. margin-left: 0;
  166. margin-right: -27px;
  167. }
  168. }
  169. .tl-date{
  170. float: right;
  171. margin-left: 0;
  172. margin-right: -8.5em;
  173. text-align: left;
  174. }
  175. }
  176. }