buttons.less 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824
  1. //buttons
  2. .btn {
  3. display: inline-block;
  4. color: #FFF !important;
  5. text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);// !important;
  6. background-image: none !important;
  7. border: 5px solid #FFF;
  8. border-radius: 0;
  9. box-shadow: none !important;
  10. .transition(~"background-color 0.15s, border-color 0.15s, opacity 0.15s");
  11. cursor: pointer;
  12. vertical-align: middle;
  13. margin: 0;
  14. position: relative;
  15. /**
  16. &:hover, &:focus, &.focus, .open > &.dropdown-toggle {
  17. color: #FFF;
  18. box-shadow: none;
  19. }
  20. */
  21. }
  22. .btn.active , .open > .btn.active.dropdown-toggle {
  23. box-shadow: none;
  24. //color: @btn-active-color;
  25. }
  26. .btn-lg, .btn-group-lg > .btn {
  27. border-width: 5px;
  28. line-height: 1.4;
  29. padding: 5px 16px 6px;
  30. }
  31. .btn-xlg, .btn-group-xlg > .btn {
  32. border-width: 5px;
  33. line-height: 1.35;
  34. padding: 7px 16px;
  35. font-size: @font-size-large;
  36. }
  37. .btn-sm, .btn-group-sm > .btn {
  38. border-width: 4px;
  39. font-size: @font-size-btn-sm;
  40. padding: 4px 9px;
  41. line-height: 1.38;//1.39;
  42. }
  43. .btn-xs, .btn-group-xs > .btn {
  44. padding-top: 3px;
  45. padding-bottom: 3px;
  46. border-width: 3px;
  47. }
  48. .btn-mini, .btn-group-mini > .btn {
  49. padding: 1px 5px;
  50. border-width: 3px;
  51. font-size: @font-size-btn-xs;
  52. line-height: 1.5;
  53. }
  54. .btn-minier, .btn-group-minier > .btn {
  55. padding: 0 4px;
  56. line-height: 18px;
  57. border-width: 2px;
  58. font-size: @font-size-btn-minier;
  59. }
  60. button.btn:active {
  61. top: 1px;
  62. //left: 1px;
  63. //using both left & top, will cause chrome not to catch click events at seldom times
  64. }
  65. .enable_default_buttons() when(@enable-default-buttons = true) {
  66. //button color
  67. .btn-color(@color1, @color2) {
  68. & , &:focus {
  69. background-color: @color1 !important;
  70. border-color: @color1;
  71. }
  72. &:hover , &:active, .open > &.dropdown-toggle {
  73. background-color: @color2 !important;
  74. border-color: @color1;
  75. }
  76. &.no-border:hover , &.no-border:active {
  77. border-color: @color2;
  78. }
  79. &.no-hover:hover , &.no-hover:active {
  80. background-color: @color1 !important;
  81. }
  82. &.active {
  83. background-color: mix(@color1,@color2) !important;
  84. border-color: darken(mix(@color1,@color2),7%);
  85. }
  86. &.no-border.active {
  87. background-color: darken(mix(@color1,@color2),3%) !important;
  88. border-color: darken(mix(@color1,@color2),3%);
  89. }
  90. &.disabled, &[disabled], fieldset[disabled] & {
  91. &,
  92. &:hover,
  93. &:focus,
  94. &:active,
  95. &.active {
  96. background-color: @color1 !important;
  97. border-color:@color1;
  98. }
  99. }
  100. }
  101. .btn-color(@color-name) {
  102. @color1-name : ~`"btn-@{color-name}"`;
  103. @color2-name : ~`"btn-@{color-name}-hover"`;
  104. .btn-color(@@color1-name, @@color2-name);
  105. }
  106. .btn , .btn-default {
  107. .btn-color(~"default");
  108. }
  109. .btn-primary {
  110. .btn-color(~"primary");
  111. }
  112. .btn-info {
  113. .btn-color(~"info");
  114. }
  115. .btn-info2 {
  116. .btn-color(~"info2");
  117. }
  118. .btn-success {
  119. .btn-color(~"success");
  120. }
  121. .btn-warning {
  122. .btn-color(~"warning");
  123. }
  124. .btn-danger {
  125. .btn-color(~"danger");
  126. }
  127. .btn-inverse {
  128. .btn-color(~"inverse");
  129. }
  130. .btn-pink {
  131. .btn-color(~"pink");
  132. }
  133. .btn-purple {
  134. .btn-color(~"purple");
  135. }
  136. .btn-grey {
  137. .btn-color(~"grey");
  138. }
  139. .btn-yellow {
  140. .btn-color(~"yellow");
  141. color: @btn-yellow-color !important;
  142. text-shadow:0 -1px 0 rgba(255, 255, 255, 0.4) !important;
  143. &:hover, &:focus, &.focus, .open > &.dropdown-toggle, &.active , .open > &.active.dropdown-toggle {
  144. color:@btn-yellow-color;
  145. }
  146. }
  147. .btn-light {
  148. .btn-color(~"light");
  149. color: @btn-light-color !important;
  150. text-shadow:0 -1px 0 rgba(250, 250, 250, 0.25) !important;
  151. &:hover, &:focus, &.focus, .open > &.dropdown-toggle, &.active , .open > &.active.dropdown-toggle {
  152. color:@btn-light-color;
  153. }
  154. &.btn-xs:after, &.btn-mini:after {
  155. left: -2px;
  156. right: -2px;
  157. top: -2px;
  158. bottom: -2px;
  159. }
  160. &.btn-sm:after {
  161. left: -4px;
  162. right: -4px;
  163. top: -4px;
  164. bottom: -4px;
  165. }
  166. .btn-lg:after {
  167. left: -6px;
  168. right: -6px;
  169. top: -6px;
  170. bottom: -6px;
  171. }
  172. }
  173. }
  174. .enable_default_buttons();
  175. .enable_white_buttons() when(@enable-white-buttons = true) {
  176. .btn.btn-white {
  177. //border-width: 1px;
  178. text-shadow: none !important;
  179. background-color: #FFF !important;
  180. &.no-hover:hover , &.no-hover:active {
  181. background-color: #FFF !important;
  182. }
  183. &:focus , &.active {
  184. box-shadow: inset 1px 1px 2px 0 rgba(0,0,0,0.1) !important;
  185. &.btn-bold {
  186. box-shadow: inset 1px 1px 3px 0 rgba(0,0,0,0.15) !important;
  187. }
  188. }
  189. &.active:after {
  190. display: none;
  191. }
  192. }
  193. .btn-white(@txt-color, @border-color, @bg-hover-color) {
  194. border-color: @border-color;
  195. color: @txt-color !important;
  196. &:hover, &:focus , &.active, &:active, .open > &.dropdown-toggle, .open > &.active.dropdown-toggle {
  197. background-color: @bg-hover-color !important;
  198. border-color: @border-color;
  199. color: saturate(darken(@txt-color , 5%) , 5%) !important;
  200. &.no-border {
  201. border-color: @border-color;
  202. }
  203. }
  204. /**
  205. //&:hover, &:focus, &.focus, .open > &.dropdown-toggle {
  206. //color: saturate(darken(@txt-color , 5%) , 5%) !important;
  207. //}
  208. //&.no-border:hover , &.no-border:active {
  209. //border-color: @border-color;
  210. //}
  211. */
  212. &.disabled, &[disabled], fieldset[disabled] & {
  213. &,
  214. &:hover,
  215. &:focus,
  216. &:active,
  217. &.active {
  218. //background-color: #FFF !important;
  219. border-color: @border-color;
  220. }
  221. }
  222. }
  223. .btn.btn-white {
  224. .btn-white(#444, #CCC , #EBEBEB);
  225. }
  226. .btn-white.btn-default {
  227. .btn-white(darken(@btn-default-hover, 4%), @btn-default , lighten(@btn-default, 23%));
  228. }
  229. .btn-white.btn-primary {
  230. .btn-white(desaturate(@btn-primary , 30%), desaturate(lighten(@btn-primary , 15%), 15%) , desaturate(lighten(@btn-primary , 42%), 6%));
  231. }
  232. .btn-white.btn-success {
  233. .btn-white(desaturate(darken(@btn-success , 4%) , 8%), desaturate(lighten(@btn-success , 10%), 2%) , desaturate(lighten(@btn-success , 33%), 1%));
  234. }
  235. .btn-white.btn-danger {
  236. .btn-white(desaturate(lighten(@btn-danger, 5%) , 30%), desaturate(lighten(@btn-danger , 18%), 18%) , desaturate(lighten(@btn-danger , 42%), 7%));
  237. }
  238. .btn-white.btn-warning {
  239. .btn-white(desaturate(darken(@btn-warning , 6%), 36%), desaturate(lighten(@btn-warning , 3%), 30%) , desaturate(lighten(@btn-warning , 30%), 10%));
  240. }
  241. .btn-white.btn-info {
  242. .btn-white(desaturate(darken(@btn-info, 6%) , 25%), desaturate(lighten(@btn-info , 5%), 15%) , desaturate(lighten(@btn-info , 30%), 6%));
  243. }
  244. .btn-white.btn-inverse {
  245. .btn-white(@btn-inverse, lighten(@btn-inverse , 25%) , lighten(@btn-inverse , 56%));
  246. }
  247. .btn-white.btn-pink {
  248. .btn-white(desaturate(@btn-pink , 35%), desaturate(lighten(@btn-pink , 15%), 25%) , desaturate(lighten(@btn-pink , 40%), 5%));
  249. }
  250. .btn-white.btn-purple {
  251. .btn-white(darken(desaturate(@btn-purple , 10%) , 10%), desaturate(lighten(@btn-purple , 10%), 15%) , desaturate(lighten(@btn-purple , 31%), 5%));
  252. }
  253. .btn-white.btn-yellow {
  254. .btn-white(darken(desaturate(@btn-yellow , 20%) , 30%), desaturate(darken(@btn-yellow, 5%), 25%) , desaturate(lighten(@btn-yellow , 18%), 10%));
  255. }
  256. .btn-white.btn-grey {
  257. .btn-white(darken(@btn-grey , 8%), lighten(@btn-grey , 15%) , lighten(@btn-grey , 30%));
  258. }
  259. }
  260. .enable_white_buttons();
  261. .btn.disabled, .btn[disabled] {
  262. &.active, &:focus, &:active {
  263. outline:none;
  264. }
  265. &:active {
  266. top:0; left:0;
  267. }
  268. }
  269. //active buttons
  270. .btn.active {
  271. &:after {
  272. display: inline-block;
  273. content: "";
  274. position: absolute;
  275. border-bottom: 1px solid @btn-active-color;
  276. left: -4px;
  277. right: -4px;
  278. bottom: -4px;
  279. }
  280. &.btn-sm:after {
  281. left: -3px;
  282. right: -3px;
  283. bottom: -3px;
  284. //border-bottom-width:1px;
  285. }
  286. &.btn-lg:after {
  287. left: -5px;
  288. right: -5px;
  289. bottom: -5px;
  290. //border-bottom-width:1px;
  291. }
  292. &.btn-xs:after , &.btn-mini:after, &.btn-minier:after {
  293. left: -1px;
  294. right: -1px;
  295. bottom: -2px;
  296. //border-bottom-width:1px;
  297. }
  298. &.btn-minier:after {
  299. bottom: -1px;
  300. }
  301. &.btn-yellow:after {
  302. border-bottom-color: @btn-yellow-active-border;
  303. }
  304. &.btn-light {
  305. color: #515151;
  306. &:after {
  307. border-bottom-color: #B5B5B5;
  308. }
  309. }
  310. }
  311. //icons inside buttons
  312. .btn {
  313. > .@{icon} {
  314. margin-right: 4px;
  315. //min-width: 12px;
  316. //display: inline;
  317. &.icon-on-right {
  318. margin-right: 0;
  319. margin-left: 4px;
  320. }
  321. }
  322. > .icon-only.@{icon} {
  323. margin: 0 !important;//to override .rtl
  324. text-align: center;
  325. padding: 0;
  326. //min-width: 24px;
  327. //vertical-align: middle;
  328. }
  329. }
  330. .btn-lg > .@{icon} {
  331. margin-right: 6px;
  332. &.icon-on-right {
  333. margin-right: 0;
  334. margin-left: 6px;
  335. }
  336. }
  337. .btn-sm > .@{icon} {
  338. margin-right: 3px;
  339. &.icon-on-right {
  340. margin-right: 0;
  341. margin-left: 3px;
  342. }
  343. }
  344. .btn-xs > .@{icon} , .btn-mini > .@{icon} , .btn-minier > .@{icon} {
  345. margin-right: 2px;
  346. &.icon-on-right {
  347. margin-right: 0;
  348. margin-left: 2px;
  349. }
  350. }
  351. .btn.btn-link {
  352. border-width: 0 !important;
  353. background: transparent none !important;
  354. color: @btn-link-color !important;
  355. text-shadow: none !important;
  356. padding: 4px 12px !important;
  357. line-height: 20px !important;
  358. &:hover {
  359. background: none !important;
  360. text-shadow: none !important;
  361. }
  362. &.active {
  363. background: none !important;
  364. text-decoration: underline;
  365. color: lighten(@btn-link-color , 6%) !important;
  366. &:after {
  367. display: none;
  368. }
  369. }
  370. &.disabled , &[disabled]{
  371. background: transparent none !important;
  372. .opacity(0.65);
  373. text-decoration: none !important;
  374. }
  375. }
  376. .btn.btn-no-border {
  377. border-width: 0 !important;
  378. }
  379. //button groups
  380. .btn-group {
  381. &:first-child {
  382. margin-left: 0;
  383. }
  384. > .btn {
  385. & , + .btn {
  386. margin: 0 1px 0 0;
  387. }
  388. &:first-child {
  389. margin: 0 1px 0 0;
  390. }
  391. //caret inside buttons
  392. > .caret {
  393. margin-top: 15px;
  394. margin-left: 1px;
  395. border-width: 5px;
  396. border-top-color: #FFF;
  397. }
  398. &.btn-sm > .caret {
  399. margin-top: 10px;
  400. border-width: 4px;
  401. }
  402. &.btn-lg > .caret {
  403. margin-top: 18px;
  404. border-width: 6px;
  405. }
  406. &.btn-xs > .caret , &.btn-mini > .caret {
  407. margin-top: 9px;
  408. border-width: 4px;
  409. }
  410. &.btn-minier > .caret {
  411. margin-top: 7px;
  412. border-width: 3px;
  413. }
  414. //dropdown toggle
  415. + .btn.dropdown-toggle {
  416. padding-right: 3px;
  417. padding-left: 3px;
  418. }
  419. + .btn-lg.dropdown-toggle {
  420. padding-right: 4px;
  421. padding-left: 4px;
  422. }
  423. }
  424. .dropdown-toggle {
  425. border-radius: 0;
  426. }
  427. .btn-group-active-state(@left, @right, @bottom, @width) {/* the border under an active button in button groups */
  428. &.active:after {
  429. left: unit(@left, px); right:unit(@right, px); bottom:unit(@bottom, px);
  430. border-bottom-width: unit(@width, px);
  431. }
  432. }
  433. > .btn , + .btn{
  434. margin: 0 1px 0 0;
  435. border-width: 3px;// !important;
  436. .btn-group-active-state(-2, -2, -2, 1);
  437. }
  438. > .btn-lg , + .btn-lg{
  439. border-width: 4px;// !important;
  440. .btn-group-active-state(-3, -3, -3, 1);
  441. }
  442. > .btn-sm , + .btn-sm{
  443. border-width: 2px;// !important;
  444. .btn-group-active-state(-1, -1, -1, 1);
  445. }
  446. > .btn-xs , + .btn-xs , > .btn-mini , + .btn-mini {
  447. border-width: 1px;// !important;
  448. .btn-group-active-state(0, 0, 0, 1);
  449. }
  450. > .btn-minier , + .btn-minier{
  451. border-width: 1px;// !important;
  452. .btn-group-active-state(0, 0, 0, 1);
  453. }
  454. }
  455. .btn-group-vertical > .btn:last-child:not(:first-child) {
  456. border-radius: 0;
  457. }
  458. .btn-group-vertical > .btn , .btn-group-vertical > .btn + .btn {
  459. margin: 1px 0 0;
  460. }
  461. .btn-group-vertical > .btn:first-child {
  462. margin-top: 0;
  463. }
  464. .btn-group.btn-overlap > .btn {
  465. margin-right: -1px;
  466. }
  467. .btn-group.btn-corner > .btn {
  468. &:first-child {
  469. border-bottom-left-radius: 8px;
  470. border-top-left-radius: 8px;
  471. }
  472. &:last-child {
  473. border-bottom-right-radius: 8px;
  474. border-top-right-radius: 8px;
  475. }
  476. &.btn-sm:first-child {
  477. border-bottom-left-radius: 6px;
  478. border-top-left-radius: 6px;
  479. }
  480. &.btn-sm:last-child {
  481. border-bottom-right-radius: 6px;
  482. border-top-right-radius: 6px;
  483. }
  484. &.btn-xs:first-child , &.btn-mini:first-child {
  485. border-bottom-left-radius: 4px;
  486. border-top-left-radius: 4px;
  487. }
  488. &.btn-xs:last-child, &.btn-mini:last-child {
  489. border-bottom-right-radius: 4px;
  490. border-top-right-radius: 4px;
  491. }
  492. }
  493. .btn.btn-white {
  494. border-width: 1px;
  495. }
  496. .btn.btn-bold {
  497. border-bottom-width: 2px;
  498. }
  499. .btn.btn-round {
  500. border-bottom-width: 2px;
  501. border-radius: 4px !important;
  502. }
  503. //application buttons
  504. .enable_application_buttons() when(@enable-application-buttons = true) {
  505. .btn.btn-app {
  506. display: inline-block;
  507. width: 100px;
  508. font-size: @font-size-btn-app;
  509. font-weight: normal;
  510. color: #FFF;
  511. text-align: center;
  512. text-shadow: 0 -1px -1px rgba(0,0,0,0.2) !important;
  513. border: none;
  514. border-radius: 12px;
  515. padding: 12px 0 8px;
  516. margin: 2px;
  517. line-height: 1.7;
  518. position: relative;
  519. }
  520. //button color
  521. .btn-app-color(@color1, @color2, @percent) {
  522. & , &.no-hover:hover , &.disabled:hover {
  523. background: average(@color1, @color2) !important;
  524. #gradient > .vertical(@color1 , @color2) !important;
  525. }
  526. &:hover {
  527. background: average(darken(@color1,@percent), darken(@color2,@percent)) !important;
  528. #gradient > .vertical(darken(@color1,@percent) , darken(@color2,@percent)) !important;
  529. }
  530. }
  531. .btn-app-color(@color-name, @percent:10%) {
  532. @color1-name : ~`"btn-app-@{color-name}-1"`;
  533. @color2-name : ~`"btn-app-@{color-name}-2"`;
  534. .btn-app-color(@@color1-name, @@color2-name , @percent);
  535. }
  536. .btn-app, .btn-app.btn-default {
  537. .btn-app-color(~"default" , 8%);
  538. }
  539. .btn-app.btn-primary {
  540. .btn-app-color(~"primary");
  541. }
  542. .btn-app.btn-info {
  543. .btn-app-color(~"info");
  544. }
  545. .btn-app.btn-success {
  546. .btn-app-color(~"success");
  547. }
  548. .btn-app.btn-danger {
  549. .btn-app-color(~"danger");
  550. }
  551. .btn-app.btn-warning {
  552. .btn-app-color(~"warning");
  553. }
  554. .btn-app.btn-purple {
  555. .btn-app-color(~"purple");
  556. }
  557. .btn-app.btn-pink {
  558. .btn-app-color(~"pink");
  559. }
  560. .btn-app.btn-inverse {
  561. .btn-app-color(~"inverse");
  562. }
  563. .btn-app.btn-grey {
  564. .btn-app-color(~"grey" , 5%);
  565. }
  566. .btn.btn-app.btn-light {
  567. .btn-app-color(~"light" , 5%);
  568. color: @btn-app-light-color !important;
  569. text-shadow: 0 1px 1px #EEE !important;
  570. }
  571. .btn.btn-app.btn-yellow {
  572. .btn-app-color(~"yellow" , 5%);
  573. color:@btn-app-yellow-color !important;
  574. text-shadow:0 -1px 0 rgba(255, 255, 255, 0.4) !important;
  575. }
  576. .btn.btn-app {
  577. > .@{icon} {
  578. opacity: 0.88;
  579. }
  580. &:hover > .@{icon} {
  581. opacity: 1;
  582. }
  583. &.btn-sm {
  584. width: 80px;
  585. font-size: @font-size-btn-app-sm;
  586. border-radius: 10px;
  587. line-height: 1.5;
  588. }
  589. &.btn-xs {
  590. width: 64px;
  591. font-size: @font-size-btn-app-xs;
  592. border-radius: 8px;
  593. padding-bottom: 7px;
  594. padding-top: 8px;
  595. line-height: 1.45;
  596. }
  597. > .@{icon} {
  598. display: block;
  599. font-size: @font-size-btn-app-icon;
  600. margin: 0 0 4px;
  601. line-height: 36px;
  602. min-width: 0;
  603. padding: 0;
  604. }
  605. &.btn-sm > .@{icon} {
  606. display: block;
  607. font-size: @font-size-btn-app-sm-icon;
  608. line-height: 30px;
  609. margin: 0 0 3px;
  610. }
  611. &.btn-xs > .@{icon} {
  612. display: block;
  613. font-size: @font-size-btn-app-xs-icon;
  614. line-height: 24px;
  615. margin: 0;
  616. }
  617. &.no-radius {
  618. border-radius: 0;
  619. }
  620. &.radius-4 {
  621. border-radius: 4px;
  622. }
  623. //badge & label inside buttons
  624. > .badge , > .label {
  625. position: absolute !important;
  626. top: -2px;
  627. right: -2px;
  628. padding: 1px 3px;
  629. text-align: center;
  630. font-size: @font-size-label-inside-btn-app - 1;
  631. color: #FFF;
  632. &.badge-left , &.label-left{
  633. right: auto;
  634. left: -2px;
  635. }
  636. }
  637. > .badge-yellow, > .label-yellow {
  638. color: @label-yellow-text;
  639. }
  640. > .badge-light, > .label-light {
  641. color: @label-light-text;
  642. }
  643. > .label {
  644. padding:1px 6px 3px;
  645. font-size: @font-size-label-inside-btn-app;
  646. }
  647. &.radius-4 , &.no-radius {
  648. > .badge {
  649. border-radius: 3px;
  650. &.no-radius {// > .badge.no-radius
  651. border-radius: 0;
  652. }
  653. }
  654. }
  655. //active state
  656. &.active {
  657. color:@btn-app-active;
  658. &:after {
  659. display: none;
  660. }
  661. &.btn-yellow {
  662. color:@btn-app-yellow-color;
  663. border-color:@btn-app-yellow-border;
  664. }
  665. &.btn-light {
  666. color:@btn-app-light-active;
  667. }
  668. }
  669. }
  670. //////////
  671. //
  672. //ie8 fix needed (ace-ie.css)
  673. .btn-group > .btn-app:first-child:not(:last-child):not(.dropdown-toggle) {
  674. margin-right: 24px;
  675. }
  676. .btn-group > .btn-app + .btn-app.dropdown-toggle {
  677. position: absolute;
  678. width: auto;
  679. height: 100%;
  680. padding-left: 6px;
  681. padding-right: 6px;
  682. margin-left: -23px;
  683. .border-left-radius(0);
  684. right: 0;
  685. }
  686. .btn.btn-app {
  687. &.btn-light, &.btn-yellow {
  688. .box-shadow(~"0 0 0 1px rgba(0, 0, 0, 0.08) inset") !important;
  689. }
  690. }
  691. }
  692. .enable_application_buttons();