default.less 11 KB

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