Bigemap.draw.css 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329
  1. /* ================================================================== */
  2. /* Toolbars
  3. /* ================================================================== */
  4. .bigemap-draw-section {
  5. position: relative;
  6. }
  7. .bigemap-draw-drag-icon{
  8. background-color: #fff;
  9. border: 2px solid #111;
  10. border-radius: 10px;
  11. }
  12. .bigemap-draw-toolbar {
  13. margin-top: 12px;
  14. }
  15. .bigemap-draw-toolbar-top {
  16. margin-top: 0;
  17. }
  18. .bigemap-draw-toolbar-notop a:first-child {
  19. border-top-right-radius: 0;
  20. }
  21. .bigemap-draw-toolbar-nobottom a:last-child {
  22. border-bottom-right-radius: 0;
  23. }
  24. .bigemap-draw-toolbar a {
  25. background-image: url('images/spritesheet.png');
  26. background-image: linear-gradient(transparent, transparent), url('images/spritesheet.svg');
  27. background-repeat: no-repeat;
  28. background-size: 300px 30px;
  29. background-clip: padding-box;
  30. }
  31. .bigemap-retina .bigemap-draw-toolbar a {
  32. background-image: url('images/spritesheet-2x.png');
  33. background-image: linear-gradient(transparent, transparent), url('images/spritesheet.svg');
  34. }
  35. .bigemap-draw a {
  36. display: block;
  37. text-align: center;
  38. text-decoration: none;
  39. }
  40. .bigemap-draw a .sr-only {
  41. position: absolute;
  42. width: 1px;
  43. height: 1px;
  44. padding: 0;
  45. margin: -1px;
  46. overflow: hidden;
  47. clip: rect(0, 0, 0, 0);
  48. border: 0;
  49. }
  50. /* ================================================================== */
  51. /* Toolbar actions menu
  52. /* ================================================================== */
  53. .bigemap-draw-actions {
  54. display: none;
  55. list-style: none;
  56. margin: 0;
  57. padding: 0;
  58. position: absolute;
  59. left: 26px; /* bigemap-draw-toolbar.left + bigemap-draw-toolbar.width */
  60. top: 0;
  61. white-space: nowrap;
  62. }
  63. .bigemap-touch .bigemap-draw-actions {
  64. left: 32px;
  65. }
  66. .bigemap-right .bigemap-draw-actions {
  67. right: 26px;
  68. left: auto;
  69. }
  70. .bigemap-touch .bigemap-right .bigemap-draw-actions {
  71. right: 32px;
  72. left: auto;
  73. }
  74. .bigemap-draw-actions li {
  75. display: inline-block;
  76. }
  77. .bigemap-draw-actions li:first-child a {
  78. border-left: none;
  79. }
  80. .bigemap-draw-actions li:last-child a {
  81. -webkit-border-radius: 0 4px 4px 0;
  82. border-radius: 0 4px 4px 0;
  83. }
  84. .bigemap-right .bigemap-draw-actions li:last-child a {
  85. -webkit-border-radius: 0;
  86. border-radius: 0;
  87. }
  88. .bigemap-right .bigemap-draw-actions li:first-child a {
  89. -webkit-border-radius: 4px 0 0 4px;
  90. border-radius: 4px 0 0 4px;
  91. }
  92. .bigemap-draw-actions a {
  93. background-color: #919187;
  94. border-left: 1px solid #AAA;
  95. color: #FFF;
  96. font: 11px/19px "Helvetica Neue", Arial, Helvetica, sans-serif;
  97. line-height: 28px;
  98. text-decoration: none;
  99. padding-left: 10px;
  100. padding-right: 10px;
  101. height: 28px;
  102. }
  103. .bigemap-touch .bigemap-draw-actions a {
  104. font-size: 12px;
  105. line-height: 30px;
  106. height: 30px;
  107. }
  108. .bigemap-draw-actions-bottom {
  109. margin-top: 0;
  110. }
  111. .bigemap-draw-actions-top {
  112. margin-top: 1px;
  113. }
  114. .bigemap-draw-actions-top a,
  115. .bigemap-draw-actions-bottom a {
  116. height: 27px;
  117. line-height: 27px;
  118. }
  119. .bigemap-draw-actions a:hover {
  120. background-color: #A0A098;
  121. }
  122. .bigemap-draw-actions-top.bigemap-draw-actions-bottom a {
  123. height: 26px;
  124. line-height: 26px;
  125. }
  126. /* ================================================================== */
  127. /* Draw toolbar
  128. /* ================================================================== */
  129. .bigemap-draw-toolbar .bigemap-draw-draw-polyline {
  130. background-position: -2px -2px;
  131. }
  132. .bigemap-touch .bigemap-draw-toolbar .bigemap-draw-draw-polyline {
  133. background-position: 0 -1px;
  134. }
  135. .bigemap-draw-toolbar .bigemap-draw-draw-polygon {
  136. background-position: -31px -2px;
  137. }
  138. .bigemap-touch .bigemap-draw-toolbar .bigemap-draw-draw-polygon {
  139. background-position: -29px -1px;
  140. }
  141. .bigemap-draw-toolbar .bigemap-draw-draw-rectangle {
  142. background-position: -62px -2px;
  143. }
  144. .bigemap-touch .bigemap-draw-toolbar .bigemap-draw-draw-rectangle {
  145. background-position: -60px -1px;
  146. }
  147. .bigemap-draw-toolbar .bigemap-draw-draw-circle {
  148. background-position: -92px -2px;
  149. }
  150. .bigemap-touch .bigemap-draw-toolbar .bigemap-draw-draw-circle {
  151. background-position: -90px -1px;
  152. }
  153. .bigemap-draw-toolbar .bigemap-draw-draw-marker {
  154. background-position: -122px -2px;
  155. }
  156. .bigemap-touch .bigemap-draw-toolbar .bigemap-draw-draw-marker {
  157. background-position: -120px -1px;
  158. }
  159. .bigemap-draw-toolbar .bigemap-draw-draw-circlemarker {
  160. background-position: -273px -2px;
  161. }
  162. .bigemap-touch .bigemap-draw-toolbar .bigemap-draw-draw-circlemarker {
  163. background-position: -271px -1px;
  164. }
  165. /* ================================================================== */
  166. /* Edit toolbar
  167. /* ================================================================== */
  168. .bigemap-draw-toolbar .bigemap-draw-edit-edit {
  169. background-position: -152px -2px;
  170. }
  171. .bigemap-touch .bigemap-draw-toolbar .bigemap-draw-edit-edit {
  172. background-position: -150px -1px;
  173. }
  174. .bigemap-draw-toolbar .bigemap-draw-edit-remove {
  175. background-position: -182px -2px;
  176. }
  177. .bigemap-touch .bigemap-draw-toolbar .bigemap-draw-edit-remove {
  178. background-position: -180px -1px;
  179. }
  180. .bigemap-draw-toolbar .bigemap-draw-edit-edit.bigemap-disabled {
  181. background-position: -212px -2px;
  182. }
  183. .bigemap-touch .bigemap-draw-toolbar .bigemap-draw-edit-edit.bigemap-disabled {
  184. background-position: -210px -1px;
  185. }
  186. .bigemap-draw-toolbar .bigemap-draw-edit-remove.bigemap-disabled {
  187. background-position: -242px -2px;
  188. }
  189. .bigemap-touch .bigemap-draw-toolbar .bigemap-draw-edit-remove.bigemap-disabled {
  190. background-position: -240px -2px;
  191. }
  192. /* ================================================================== */
  193. /* Drawing styles
  194. /* ================================================================== */
  195. .bigemap-mouse-marker {
  196. background-color: #fff;
  197. cursor: crosshair;
  198. }
  199. .bigemap-draw-tooltip {
  200. background: rgb(54, 54, 54);
  201. background: rgba(0, 0, 0, 0.5);
  202. border: 1px solid transparent;
  203. -webkit-border-radius: 4px;
  204. border-radius: 4px;
  205. color: #fff;
  206. font: 12px/18px "Helvetica Neue", Arial, Helvetica, sans-serif;
  207. margin-left: 20px;
  208. margin-top: -21px;
  209. padding: 4px 8px;
  210. position: absolute;
  211. visibility: hidden;
  212. white-space: nowrap;
  213. z-index: 6;
  214. }
  215. .bigemap-draw-tooltip:before {
  216. border-right: 6px solid black;
  217. border-right-color: rgba(0, 0, 0, 0.5);
  218. border-top: 6px solid transparent;
  219. border-bottom: 6px solid transparent;
  220. content: "";
  221. position: absolute;
  222. top: 7px;
  223. left: -7px;
  224. }
  225. .bigemap-error-draw-tooltip {
  226. background-color: #F2DEDE;
  227. border: 1px solid #E6B6BD;
  228. color: #B94A48;
  229. }
  230. .bigemap-error-draw-tooltip:before {
  231. border-right-color: #E6B6BD;
  232. }
  233. .bigemap-draw-tooltip-single {
  234. margin-top: -12px
  235. }
  236. .bigemap-draw-tooltip-subtext {
  237. color: #f8d5e4;
  238. }
  239. .bigemap-draw-guide-dash {
  240. font-size: 1%;
  241. opacity: 0.6;
  242. position: absolute;
  243. width: 5px;
  244. height: 5px;
  245. }
  246. /* ================================================================== */
  247. /* Edit styles
  248. /* ================================================================== */
  249. .bigemap-edit-marker-selected {
  250. background-color: rgba(254, 87, 161, 0.1);
  251. border: 4px dashed rgba(254, 87, 161, 0.6);
  252. -webkit-border-radius: 4px;
  253. border-radius: 4px;
  254. box-sizing: content-box;
  255. }
  256. .bigemap-edit-move {
  257. cursor: move;
  258. }
  259. .bigemap-edit-resize {
  260. cursor: pointer;
  261. }
  262. /* ================================================================== */
  263. /* Old IE styles
  264. /* ================================================================== */
  265. .bigemap-oldie .bigemap-draw-toolbar {
  266. border: 1px solid #999;
  267. }