default.less 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548
  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-rightbottomleft {
  19. .margin-right(@bx-margin);
  20. .margin-bottom(@bx-margin);
  21. .margin-left(@bx-margin);
  22. }
  23. .bx-def-margin-leftright {
  24. .margin-left(@bx-margin);
  25. .margin-right(@bx-margin);
  26. }
  27. .bx-def-margin-leftright-neg {
  28. .margin-left(-@bx-margin);
  29. .margin-right(-@bx-margin);
  30. }
  31. .bx-def-margin-topbottom {
  32. .margin-top(@bx-margin);
  33. .margin-bottom(@bx-margin);
  34. }
  35. .bx-def-margin-topbottom-neg {
  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. .bx-def-font-light {
  350. font-weight: 300;
  351. }
  352. .bx-def-font-normal {
  353. font-weight: 400;
  354. }
  355. .bx-def-font-semibold {
  356. font-weight: 600;
  357. }
  358. .bx-def-font-bold {
  359. font-weight: 700;
  360. }
  361. .bx-def-font-extrabold {
  362. font-weight: 800;
  363. }
  364. h1,
  365. .bx-def-font-h1 {
  366. .font-size(@bx-font-size-h1);
  367. font-weight:700;
  368. }
  369. h2,
  370. .bx-def-font-h2 {
  371. .font-size(@bx-font-size-h2);
  372. font-weight:500;
  373. }
  374. h3,
  375. .bx-def-font-h3 {
  376. .font-size(@bx-font-size-h3);
  377. font-weight:500;
  378. }
  379. /* image/thumbnail/gallery default styles */
  380. .bx-def-ava,
  381. .bx-def-thumb,
  382. .bx-def-icon {
  383. .radius(80px);
  384. overflow:hidden;
  385. }
  386. .bx-def-ava-size {
  387. .width(@bx-size-avatar);
  388. .height(@bx-size-avatar);
  389. }
  390. .bx-def-ava-size-max-height {
  391. .max-height(@bx-size-avatar);
  392. }
  393. .bx-def-ava-size-min-height {
  394. .min-height(@bx-size-avatar);
  395. }
  396. .bx-def-thumb-size {
  397. .width(@bx-size-thumb);
  398. .height(@bx-size-thumb);
  399. .line-height(@bx-size-thumb);
  400. }
  401. .bx-def-thumb-size-max-height {
  402. .max-height(@bx-size-thumb);
  403. }
  404. .bx-def-thumb-size-min-height {
  405. .min-height(@bx-size-thumb);
  406. }
  407. .bx-def-thumb-size-left-indent {
  408. .margin-left(@bx-size-thumb + @bx-margin);
  409. }
  410. .bx-def-icon-size {
  411. .width(@bx-size-icon);
  412. .height(@bx-size-icon);
  413. }
  414. .bx-def-icon-size-max-height {
  415. .max-height(@bx-size-icon);
  416. }
  417. .bx-def-icon-size-min-height {
  418. .min-height(@bx-size-icon);
  419. }
  420. .bx-def-unit {
  421. position:relative;
  422. white-space:nowrap;
  423. }
  424. .bx-def-unit .bx-def-unit-info,
  425. .bx-def-unit .bx-def-unit-img,
  426. .bx-def-unit img {
  427. display:inline;
  428. display:inline-block;
  429. vertical-align:middle;
  430. .line-height(19px);
  431. }
  432. .bx-def-unit-info {
  433. .box-sizing(border-box);
  434. text-overflow:ellipsis;
  435. overflow:hidden;
  436. }
  437. .bx-def-unit-alert-middle,
  438. .bx-def-unit-alert {
  439. display:block;
  440. position:absolute;
  441. right:0;
  442. bottom:0;
  443. .min-width(@bx-font-size-small + 5);
  444. .height(@bx-font-size-small + 5);
  445. .line-height(@bx-font-size-small + 5);
  446. .radius(@bx-font-size-small);
  447. .border (1px, solid, #fff);
  448. .font-size(@bx-font-size-small);
  449. text-align:center;
  450. color:white;
  451. }
  452. .bx-def-unit-alert-middle {
  453. .min-width(@bx-font-size-middle + 2);
  454. .height(@bx-font-size-middle + 2);
  455. .line-height(@bx-font-size-middle + 2);
  456. .radius(@bx-font-size-middle);
  457. .font-size(@bx-font-size-middle);
  458. .padding(3px);
  459. }
  460. .bx-def-gal-img-column {
  461. .column-width-raw(100%);
  462. }
  463. .bx-def-gal-img-size {
  464. .width(@bx-size-gallery-img-width);
  465. .height(@bx-size-gallery-img-height);
  466. }
  467. .bx-def-gal-div-size {
  468. width:100%;
  469. .height(@bx-size-gallery-img-height);
  470. }
  471. .bx-def-gal-unit-column {
  472. .column-width-raw(100%);
  473. }
  474. .bx-def-gal-unit-size {
  475. display:inline-block;
  476. width:100%;
  477. height:auto;
  478. vertical-align:top;
  479. overflow:hidden;
  480. .box-sizing();
  481. }
  482. /* z-index */
  483. .bx-def-z-index-front {
  484. z-index:100;
  485. }
  486. .bx-def-z-index-nav {
  487. z-index:400;
  488. }
  489. .bx-def-z-index-overlay {
  490. z-index:700;
  491. }
  492. .bx-def-z-index-modal {
  493. z-index:1000;
  494. }