default.less 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436
  1. @import "_mixins.less";
  2. .bx-def-page-width {
  3. width:@bx-page-width;
  4. }
  5. /* margins */
  6. .bx-def-margin {
  7. .margin(@bx-margin);
  8. }
  9. .bx-def-margin-rightbottomleft {
  10. .margin-right(@bx-margin);
  11. .margin-bottom(@bx-margin);
  12. .margin-left(@bx-margin);
  13. }
  14. .bx-def-margin-leftright {
  15. .margin-left(@bx-margin);
  16. .margin-right(@bx-margin);
  17. }
  18. .bx-def-margin-leftright-neg {
  19. .margin-left(-@bx-margin);
  20. .margin-right(-@bx-margin);
  21. }
  22. .bx-def-margin-topbottom {
  23. .margin-top(@bx-margin);
  24. .margin-bottom(@bx-margin);
  25. }
  26. .bx-def-margin-top {
  27. .margin-top(@bx-margin);
  28. }
  29. .bx-def-margin-top-auto {
  30. .margin-top(@bx-margin);
  31. &:first-child {
  32. .margin-top(0px);
  33. }
  34. }
  35. .bx-def-margin-right {
  36. .margin-right(@bx-margin);
  37. }
  38. .bx-def-margin-bottom {
  39. .margin-bottom(@bx-margin);
  40. }
  41. .bx-def-margin-left {
  42. .margin-left(@bx-margin);
  43. }
  44. .bx-def-margin-left-auto {
  45. .margin-left(@bx-margin);
  46. &:first-child {
  47. .margin-left(0);
  48. }
  49. }
  50. .bx-def-margin-sec {
  51. .margin(@bx-margin-sec);
  52. }
  53. .bx-def-margin-sec-rightbottomleft {
  54. .margin-right(@bx-margin-sec);
  55. .margin-bottom(@bx-margin-sec);
  56. .margin-left(@bx-margin-sec);
  57. }
  58. .bx-def-margin-sec-leftright {
  59. .margin-left(@bx-margin-sec);
  60. .margin-right(@bx-margin-sec);
  61. }
  62. .bx-def-margin-sec-leftright-neg {
  63. .margin-left(-@bx-margin-sec);
  64. .margin-right(-@bx-margin-sec);
  65. }
  66. .bx-def-margin-sec-topbottom {
  67. .margin-top(@bx-margin-sec);
  68. .margin-bottom(@bx-margin-sec);
  69. }
  70. .bx-def-margin-sec-top {
  71. .margin-top(@bx-margin-sec);
  72. }
  73. .bx-def-margin-sec-top-auto {
  74. .margin-top(@bx-margin-sec);
  75. &:first-child {
  76. .margin-top(0);
  77. }
  78. }
  79. .bx-def-margin-sec-right {
  80. .margin-right(@bx-margin-sec);
  81. }
  82. .bx-def-margin-sec-bottom {
  83. .margin-bottom(@bx-margin-sec);
  84. }
  85. .bx-def-margin-sec-left {
  86. .margin-left(@bx-margin-sec);
  87. }
  88. .bx-def-margin-sec-left-auto {
  89. .margin-left(@bx-margin-sec);
  90. &:first-child {
  91. .margin-left(0);
  92. }
  93. }
  94. .bx-def-margin-thd {
  95. .margin(@bx-margin-thd);
  96. }
  97. .bx-def-margin-thd-rightbottomleft {
  98. .margin-right(@bx-margin-thd);
  99. .margin-bottom(@bx-margin-thd);
  100. .margin-left(@bx-margin-thd);
  101. }
  102. .bx-def-margin-thd-leftright {
  103. .margin-left(@bx-margin-thd);
  104. .margin-right(@bx-margin-thd);
  105. }
  106. .bx-def-margin-thd-leftright-neg {
  107. .margin-left(-@bx-margin-thd);
  108. .margin-right(-@bx-margin-thd);
  109. }
  110. .bx-def-margin-thd-topbottom {
  111. .margin-top(@bx-margin-thd);
  112. .margin-bottom(@bx-margin-thd);
  113. }
  114. .bx-def-margin-thd-top {
  115. .margin-top(@bx-margin-thd);
  116. }
  117. .bx-def-margin-thd-top-auto {
  118. .margin-top(@bx-margin-thd);
  119. &:first-child {
  120. .margin-top(0);
  121. }
  122. }
  123. .bx-def-margin-thd-right {
  124. .margin-right(@bx-margin-thd);
  125. }
  126. .bx-def-margin-thd-bottom {
  127. .margin-bottom(@bx-margin-thd);
  128. }
  129. .bx-def-margin-thd-left {
  130. .margin-left(@bx-margin-thd);
  131. }
  132. /* paddings */
  133. .bx-def-padding {
  134. .padding(@bx-padding);
  135. }
  136. .bx-def-padding-rightbottomleft {
  137. .padding-right(@bx-padding);
  138. .padding-bottom(@bx-padding);
  139. .padding-left(@bx-padding);
  140. }
  141. .bx-def-padding-leftright {
  142. .padding-left(@bx-padding);
  143. .padding-right(@bx-padding);
  144. }
  145. .bx-def-padding-topbottom {
  146. .padding-top(@bx-padding);
  147. .padding-bottom(@bx-padding);
  148. }
  149. .bx-def-padding-top {
  150. .padding-top(@bx-padding);
  151. }
  152. .bx-def-padding-right {
  153. .padding-right(@bx-padding);
  154. }
  155. .bx-def-padding-bottom {
  156. .padding-bottom(@bx-padding);
  157. }
  158. .bx-def-padding-left {
  159. .padding-left(@bx-padding);
  160. }
  161. .bx-def-padding-sec {
  162. .padding(@bx-padding-sec);
  163. }
  164. .bx-def-padding-sec-rightbottomleft {
  165. .padding-right(@bx-padding-sec);
  166. .padding-bottom(@bx-padding-sec);
  167. .padding-left(@bx-padding-sec);
  168. }
  169. .bx-def-padding-sec-topbottom {
  170. .padding-top(@bx-padding-sec);
  171. .padding-bottom(@bx-padding-sec);
  172. }
  173. .bx-def-padding-sec-leftright {
  174. .padding-left(@bx-padding-sec);
  175. .padding-right(@bx-padding-sec);
  176. }
  177. .bx-def-padding-sec-top {
  178. .padding-top(@bx-padding-sec);
  179. }
  180. .bx-def-padding-sec-right {
  181. .padding-right(@bx-padding-sec);
  182. }
  183. .bx-def-padding-sec-bottom {
  184. .padding-bottom(@bx-padding-sec);
  185. }
  186. .bx-def-padding-sec-left {
  187. .padding-left(@bx-padding-sec);
  188. }
  189. .bx-def-padding-thd {
  190. .padding(@bx-padding-thd);
  191. }
  192. .bx-def-padding-thd-rightbottomleft {
  193. .padding-right(@bx-padding-thd);
  194. .padding-bottom(@bx-padding-thd);
  195. .padding-left(@bx-padding-thd);
  196. }
  197. .bx-def-padding-thd-topbottom {
  198. .padding-top(@bx-padding-thd);
  199. .padding-bottom(@bx-padding-thd);
  200. }
  201. .bx-def-padding-thd-leftright {
  202. .padding-left(@bx-padding-thd);
  203. .padding-right(@bx-padding-thd);
  204. }
  205. .bx-def-padding-thd-top {
  206. .padding-top(@bx-padding-thd);
  207. }
  208. .bx-def-padding-thd-right {
  209. .padding-right(@bx-padding-thd);
  210. }
  211. .bx-def-padding-thd-bottom {
  212. .padding-bottom(@bx-padding-thd);
  213. }
  214. .bx-def-padding-thd-left {
  215. .padding-left(@bx-padding-thd);
  216. }
  217. /* colors */
  218. .bx-def-color-bg-page {
  219. .background-color (@bx-color-page);
  220. }
  221. .bx-def-color-bg-block {
  222. .background-color (@bx-color-block);
  223. }
  224. .bx-def-color-bg-box {
  225. .background-color (@bx-color-box);
  226. }
  227. .bx-def-color-bg-sec {
  228. .background-color (@bx-color-sec);
  229. }
  230. .bx-def-color-bg-hl,
  231. .bx-def-color-bg-hl-hover:hover {
  232. .background-color (@bx-color-hl);
  233. }
  234. .bx-def-color-bg-active {
  235. .background-color (@bx-color-active);
  236. }
  237. /* hr */
  238. .bx-def-hr,
  239. .bx-def-hr-auto {
  240. margin-left:0;
  241. margin-right:0;
  242. padding:0;
  243. border:0px;
  244. .border-top(@bx-border-width, @bx-border-type, @bx-border-color);
  245. }
  246. .bx-def-hr-auto:first-child {
  247. display: none;
  248. }
  249. /* noise */
  250. .bx-def-noise {
  251. position: relative;
  252. z-index: 1;
  253. }
  254. .bx-def-noise:before,
  255. .bx-def-body-noise:before {
  256. content: "";
  257. position: absolute;
  258. z-index: -1;
  259. top:0;
  260. bottom:0;
  261. left:0;
  262. right:0;
  263. background-image: url(data:image/png;base64,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);
  264. }
  265. /* border for common layout elements likedesign boxes, pads, menu items, etc */
  266. .bx-def-border {
  267. .border(@bx-border-width, @bx-border-type, @bx-border-color);
  268. }
  269. .bx-def-border-rightbottomleft {
  270. .border-right(@bx-border-width, @bx-border-type, @bx-border-color);
  271. .border-bottom(@bx-border-width, @bx-border-type, @bx-border-color);
  272. .border-left(@bx-border-width, @bx-border-type, @bx-border-color);
  273. }
  274. .bx-def-border-top {
  275. .border-top(@bx-border-width, @bx-border-type, @bx-border-color);
  276. }
  277. .bx-def-border-top-auto {
  278. .border-top(@bx-border-width, @bx-border-type, @bx-border-color);
  279. &:first-child {
  280. border-top:none;
  281. }
  282. }
  283. .bx-def-border-right {
  284. .border-right(@bx-border-width, @bx-border-type, @bx-border-color);
  285. }
  286. .bx-def-border-bottom {
  287. .border-bottom(@bx-border-width, @bx-border-type, @bx-border-color);
  288. }
  289. .bx-def-border-left {
  290. .border-left(@bx-border-width, @bx-border-type, @bx-border-color);
  291. }
  292. .bx-def-border-right {
  293. .border-right(@bx-border-width, @bx-border-type, @bx-border-color);
  294. }
  295. /* shadow */
  296. .bx-def-shadow {
  297. drop-shadow (0px, 1px, 3px, 0px, rgba(51, 51, 51, 0.1));
  298. }
  299. /* round corders */
  300. .bx-def-round-corners {
  301. .radius(@bx-round-corners-radius);
  302. }
  303. /* fonts */
  304. /* NOTE: bx-def-font, h1, h2, h3 styles were copied to editor.css */
  305. .bx-def-font {
  306. font-family:@bx-font-family;
  307. font-weight:400; /* 26.13.13: prev val 300 */
  308. .font-size(@bx-font-size-default);
  309. color:@bx-font-color-default;
  310. }
  311. .bx-def-font-inputs {
  312. font-family:@bx-font-family;
  313. font-weight:400; /* 27.13.13: prev val 300 */
  314. .font-size(@bx-font-size-default);
  315. color:@bx-font-color-default;
  316. }
  317. .bx-def-font-grayed {
  318. color:@bx-font-color-grayed;
  319. }
  320. .bx-def-font-contrasted {
  321. color:@bx-font-color-contrasted;
  322. }
  323. .bx-def-font-small {
  324. .font-size(@bx-font-size-small);
  325. }
  326. .bx-def-font-middle {
  327. .font-size(@bx-font-size-middle);
  328. }
  329. .bx-def-font-large {
  330. .font-size(@bx-font-size-large);
  331. }
  332. h1,
  333. .bx-def-font-h1 {
  334. .font-size(@bx-font-size-h1);
  335. font-weight:normal;
  336. }
  337. h2,
  338. .bx-def-font-h2 {
  339. .font-size(@bx-font-size-h2);
  340. font-weight:normal;
  341. }
  342. h3,
  343. .bx-def-font-h3 {
  344. .font-size(@bx-font-size-h3);
  345. font-weight:normal;
  346. }
  347. /* image/thumbnail default styles */
  348. .bx-def-ava,
  349. .bx-def-thumb,
  350. .bx-def-icon {
  351. .radius(80px);
  352. overflow:hidden;
  353. }
  354. .bx-def-ava-size {
  355. .width(@bx-size-avatar);
  356. .height(@bx-size-avatar);
  357. }
  358. .bx-def-ava-size-max-height {
  359. .max-height(@bx-size-avatar);
  360. }
  361. .bx-def-ava-size-min-height {
  362. .min-height(@bx-size-avatar);
  363. }
  364. .bx-def-thumb-size {
  365. .width(@bx-size-thumb);
  366. .height(@bx-size-thumb);
  367. }
  368. .bx-def-thumb-size-max-height {
  369. .max-height(@bx-size-thumb);
  370. }
  371. .bx-def-thumb-size-min-height {
  372. .min-height(@bx-size-thumb);
  373. }
  374. .bx-def-thumb-size-left-indent {
  375. .margin-left(@bx-size-thumb + @bx-margin);
  376. }
  377. .bx-def-icon-size {
  378. .width(@bx-size-icon);
  379. .height(@bx-size-icon);
  380. }
  381. .bx-def-icon-size-max-height {
  382. .max-height(@bx-size-icon);
  383. }
  384. .bx-def-icon-size-min-height {
  385. .min-height(@bx-size-icon);
  386. }
  387. .bx-def-unit .bx-def-unit-info,
  388. .bx-def-unit img {
  389. display:inline;
  390. display:inline-block;
  391. vertical-align:middle;
  392. .line-height(19px);
  393. }
  394. .bx-def-unit-info {
  395. .box-sizing(border-box);
  396. text-overflow:ellipsis;
  397. overflow:hidden;
  398. }