default.less 8.9 KB

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