_button.scss 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648
  1. // Core button style
  2. // Note that these styles include methods to render buttons the same x-browser, described here:
  3. // http: //cbjdigital.com/blog/2010/08/bulletproof_css_input_button_heights
  4. // input[type=submit],
  5. // input[type=reset],
  6. // input[type=button],
  7. .button {
  8. border-radius: 3px;
  9. font-family: Open Sans,Arial,sans-serif;
  10. width: auto;
  11. height: 2.4em;
  12. padding: 0 1em;
  13. font-size: 0.9em;
  14. font-weight: normal;
  15. vertical-align: middle;
  16. display: inline-block;
  17. background-color: $color-button;
  18. border: 1px solid $color-button;
  19. color: $color-white;
  20. text-decoration: none;
  21. text-transform: uppercase;
  22. white-space: nowrap;
  23. position: relative;
  24. overflow: hidden;
  25. box-sizing: border-box;
  26. -webkit-font-smoothing: auto;
  27. // stylelint-disable-next-line property-no-vendor-prefix
  28. -moz-appearance: none;
  29. transition: background-color 0.1s ease;
  30. &:hover {
  31. color: $color-teal;
  32. }
  33. &.yes {
  34. background-color: $color-button-yes;
  35. border: 1px solid $color-button-yes;
  36. &.button-secondary {
  37. border: 1px solid $color-button-yes;
  38. color: $color-button-yes;
  39. background-color: transparent;
  40. }
  41. &:hover {
  42. color: $color-white;
  43. border-color: transparent;
  44. background-color: $color-button-yes-hover;
  45. }
  46. &.button-nobg:hover {
  47. color: $color-button-yes;
  48. background-color: transparent;
  49. }
  50. }
  51. &.warning {
  52. background-color: $color-button-warning;
  53. border: 1px solid $color-button-warning;
  54. &.button-secondary {
  55. border: 1px solid $color-button-warning;
  56. color: $color-button-warning;
  57. background-color: transparent;
  58. }
  59. &:hover {
  60. color: $color-white;
  61. border-color: transparent;
  62. background-color: $color-button-warning-hover;
  63. }
  64. &.button-nobg:hover {
  65. color: $color-button-warning;
  66. background-color: transparent;
  67. }
  68. }
  69. &.no,
  70. &.serious {
  71. background-color: $color-button-no;
  72. border: 1px solid $color-button-no;
  73. &.button-secondary {
  74. border: 1px solid $color-button-no;
  75. color: $color-button-no;
  76. background-color: transparent;
  77. }
  78. &:hover {
  79. color: $color-white;
  80. border-color: transparent;
  81. background-color: $color-button-no-hover;
  82. }
  83. &.button-nobg:hover {
  84. color: $color-button-no;
  85. background-color: transparent;
  86. }
  87. }
  88. &.button-nobg {
  89. border: 0;
  90. background-color: transparent;
  91. }
  92. &.bicolor {
  93. border: 1px solid transparent;
  94. padding-left: 3.5em;
  95. &:before { // iconfont
  96. font-size: 1rem;
  97. position: absolute;
  98. left: 0;
  99. top: 0;
  100. width: 2em;
  101. line-height: 1.85em;
  102. height: 100%;
  103. text-align: center;
  104. background-color: rgba(0, 0, 0, 0.2);
  105. display: block;
  106. border-top-left-radius: inherit;
  107. border-bottom-left-radius: inherit;
  108. }
  109. .icon-wrapper {
  110. background-color: rgba(0, 0, 0, 0.2);
  111. display: block;
  112. position: absolute;
  113. left: 0;
  114. top: 0;
  115. width: 3em;
  116. line-height: 1.85em;
  117. height: 100%;
  118. text-align: center;
  119. border-top-left-radius: inherit;
  120. border-bottom-left-radius: inherit;
  121. }
  122. &.button--icon {
  123. &:before {
  124. display: none; // TODO: remove once the icon font styles are gone
  125. }
  126. .icon {
  127. @include svg-icon(1rem);
  128. padding: 0.75em;
  129. }
  130. }
  131. &.button--icon-flipped {
  132. .icon {
  133. transform: scaleX(-1);
  134. }
  135. }
  136. &.button-secondary {
  137. border: 1px solid rgba(0, 0, 0, 0.2);
  138. }
  139. }
  140. &.button-small.bicolor {
  141. padding-left: 3.5em;
  142. .icon-wrapper {
  143. width: 2em;
  144. }
  145. &.button--icon .icon {
  146. @include svg-icon(0.9rem);
  147. padding: 0.25em;
  148. }
  149. }
  150. // + input[type=submit],
  151. // + input[type=reset],
  152. // + input[type=button],
  153. + .button {
  154. // + button {
  155. margin-left: 1em;
  156. }
  157. // A completely unstyled button
  158. &.unbutton {
  159. border-radius: 0;
  160. width: auto;
  161. height: auto;
  162. padding: 0;
  163. font-size: inherit;
  164. font-weight: normal;
  165. vertical-align: middle;
  166. display: inline;
  167. background-color: transparent;
  168. border: 0;
  169. color: inherit;
  170. text-decoration: none;
  171. text-transform: uppercase;
  172. white-space: nowrap;
  173. position: relative;
  174. overflow: hidden;
  175. box-sizing: border-box;
  176. -webkit-font-smoothing: auto;
  177. // stylelint-disable-next-line property-no-vendor-prefix
  178. -moz-appearance: none;
  179. }
  180. &:hover {
  181. background-color: $color-button-hover;
  182. color: $color-white;
  183. border-color: transparent;
  184. &.hover-no {
  185. background-color: $color-button-no;
  186. }
  187. }
  188. &.button-longrunning {
  189. span { // iconfont
  190. @include transition(all 0.3s ease);
  191. transform: scale(0.9);
  192. display: inline-block;
  193. height: 0.9em;
  194. position: relative;
  195. opacity: 0;
  196. width: 0;
  197. visibility: hidden;
  198. text-align: center;
  199. padding-right: 0;
  200. }
  201. em {
  202. font-style: normal;
  203. }
  204. &.button-longrunning-active span { // iconfont
  205. transform: scale(1);
  206. visibility: visible;
  207. width: 1em;
  208. height: 1em;
  209. opacity: 0.8;
  210. padding-right: 0.5em;
  211. }
  212. span.icon-spinner:after { // iconfont
  213. text-align: center;
  214. position: absolute;
  215. left: 0;
  216. margin: 0;
  217. line-height: 1em;
  218. display: inline-block;
  219. font-size: 1em;
  220. }
  221. svg.icon-spinner {
  222. @include transition(all 0.3s ease);
  223. display: none;
  224. }
  225. &.button-longrunning-active svg.icon-spinner {
  226. @include svg-icon();
  227. transform: scale(1);
  228. display: inline-block;
  229. opacity: 0.8;
  230. padding: 0;
  231. margin-right: 0.5em;
  232. }
  233. &.button-longrunning-active .button-longrunning__icon {
  234. display: none;
  235. }
  236. }
  237. &:disabled,
  238. &[disabled],
  239. &.disabled {
  240. background-color: $color-grey-3;
  241. border-color: $color-grey-3;
  242. color: $color-grey-2;
  243. cursor: default;
  244. }
  245. &.button-secondary:disabled,
  246. &.button-secondary[disabled],
  247. &.button-secondary.disabled {
  248. background-color: $color-white;
  249. border-color: $color-grey-3;
  250. color: $color-grey-3;
  251. }
  252. &.button-nostroke {
  253. border: 0;
  254. }
  255. &.button--icon {
  256. .icon {
  257. @include svg-icon(1.5em);
  258. }
  259. }
  260. &.button-strokeonhover {
  261. border: 1px solid transparent;
  262. &:hover {
  263. border-color: $color-grey-2;
  264. }
  265. &.button-nobg:hover {
  266. background-color: transparent;
  267. }
  268. }
  269. &.text-notransform {
  270. text-transform: initial;
  271. }
  272. &.button--icon {
  273. .icon {
  274. @include svg-icon(1.5em);
  275. }
  276. }
  277. @include media-breakpoint-up(sm) {
  278. font-size: 0.95em;
  279. padding: 0 1.4em;
  280. height: 3em;
  281. &.bicolor {
  282. padding-left: 3.7em;
  283. &:before {
  284. width: 2em;
  285. line-height: 2.2em;
  286. font-size: 1.1rem;
  287. }
  288. }
  289. &.button-small.bicolor {
  290. // line-height: 2.2em;
  291. padding-left: 3em;
  292. &:before {
  293. width: 1.8em;
  294. line-height: 1.65em;
  295. }
  296. }
  297. }
  298. }
  299. .button-small {
  300. padding: 0 0.8em;
  301. height: 2em;
  302. font-size: 0.95em;
  303. }
  304. .button-secondary {
  305. color: $color-button;
  306. background-color: transparent;
  307. }
  308. // Buttons which are only an icon
  309. .button.icon.text-replace { // iconfont
  310. font-size: 0; // unavoidable duplication of setting in icons.scss
  311. width: 1.8rem;
  312. height: 1.8rem;
  313. &:before {
  314. line-height: 1.7em;
  315. }
  316. @include media-breakpoint-up(sm) {
  317. width: 2.2rem;
  318. height: 2.2rem;
  319. &:before {
  320. line-height: 2.1em;
  321. }
  322. &.button-small {
  323. height: 1.8rem;
  324. width: 1.8rem;
  325. // stylelint-disable-next-line max-nesting-depth
  326. &:before {
  327. line-height: 1.7em;
  328. }
  329. }
  330. }
  331. }
  332. .button--icon.text-replace {
  333. font-size: 0;
  334. text-align: center;
  335. .icon {
  336. font-size: initial;
  337. @include svg-icon(1rem, middle);
  338. padding: 0.5em;
  339. }
  340. &.button-small {
  341. line-height: 1.7rem;
  342. .icon {
  343. padding: 0.25em;
  344. }
  345. }
  346. @include media-breakpoint-up(sm) {
  347. width: 2.2rem;
  348. height: 2.2rem;
  349. &.button-small {
  350. height: 1.8rem;
  351. width: 1.8rem;
  352. }
  353. }
  354. }
  355. button.button.bicolor .icon-wrapper {
  356. line-height: 1.65em; // work around differences in a and button elements
  357. }
  358. .button-neutral {
  359. color: $color-grey-2;
  360. &:hover {
  361. color: $color-teal;
  362. }
  363. }
  364. .yes {
  365. background-color: $color-button-yes;
  366. border: 1px solid $color-button-yes;
  367. &.button-secondary {
  368. border: 1px solid $color-button-yes;
  369. color: $color-button-yes;
  370. background-color: transparent;
  371. }
  372. &:hover {
  373. color: $color-white;
  374. border-color: transparent;
  375. background-color: $color-button-yes-hover;
  376. }
  377. &.button-nobg:hover {
  378. color: $color-button-yes;
  379. background-color: transparent;
  380. }
  381. }
  382. .no,
  383. .serious {
  384. background-color: $color-button-no;
  385. border: 1px solid $color-button-no;
  386. &.button-secondary {
  387. border: 1px solid $color-button-no;
  388. color: $color-button-no;
  389. background-color: transparent;
  390. }
  391. &:hover {
  392. color: $color-white;
  393. border-color: transparent;
  394. background-color: $color-button-no-hover;
  395. }
  396. &.button-nobg:hover {
  397. color: $color-button-no;
  398. background-color: transparent;
  399. }
  400. }
  401. .button-nobg {
  402. border: 0;
  403. background-color: transparent;
  404. }
  405. .bicolor {
  406. border: 0;
  407. padding-left: 3.5em;
  408. &:before {
  409. font-size: 1rem;
  410. position: absolute;
  411. left: 0;
  412. top: 0;
  413. width: 2em;
  414. line-height: 1.85em;
  415. height: 100%;
  416. text-align: center;
  417. background-color: rgba(0, 0, 0, 0.2);
  418. display: block;
  419. }
  420. }
  421. .button-small.bicolor {
  422. padding-left: 3.5em;
  423. &:before {
  424. width: 2em;
  425. font-size: 0.8rem;
  426. line-height: 1.65em;
  427. }
  428. }
  429. a.button {
  430. line-height: 2.4em;
  431. height: auto;
  432. &.button-small {
  433. line-height: 1.85em;
  434. }
  435. @include media-breakpoint-up(sm) {
  436. line-height: 2.9em;
  437. }
  438. }
  439. // Special styles to counteract Firefox's completely unwarranted assumptions about button styles
  440. input[type=submit],
  441. input[type=reset],
  442. input[type=button],
  443. button {
  444. padding: 0 1em;
  445. @include media-breakpoint-up(sm) {
  446. &.button-small {
  447. height: 2em;
  448. }
  449. }
  450. }
  451. .button-group {
  452. @include clearfix;
  453. input[type=submit],
  454. input[type=reset],
  455. input[type=button],
  456. .button,
  457. button {
  458. border-radius: 0;
  459. float: left;
  460. margin-right: 1px;
  461. margin-left: 0;
  462. &:only-child {
  463. border-radius: 3px;
  464. }
  465. &:first-child {
  466. border-radius: 3px 0 0 3px;
  467. }
  468. &:last-child {
  469. border-radius: 0 3px 3px 0;
  470. margin-right: 0;
  471. }
  472. }
  473. &.button-group-square {
  474. &,
  475. input[type=submit],
  476. input[type=reset],
  477. input[type=button],
  478. .button,
  479. button {
  480. border-radius: 0;
  481. }
  482. }
  483. }
  484. .multiple {
  485. padding: 0;
  486. max-width: 1024px - 50px;
  487. overflow: hidden;
  488. > li {
  489. @include row();
  490. border-radius: 2px;
  491. position: relative;
  492. overflow: hidden;
  493. background-color: $color-white;
  494. padding: 1em 10em 1em 1.5em; // 10em padding leaves room for controls
  495. margin-bottom: 1em;
  496. border: 1px solid lighten($color-grey-4, 3%); // really trying to avoid creating more greys, but this one is better than grey 4 or 5
  497. }
  498. &.moving {
  499. position: relative;
  500. }
  501. li.moving {
  502. position: absolute;
  503. width: 100%;
  504. }
  505. fieldset {
  506. padding-top: 0;
  507. padding-bottom: 0;
  508. }
  509. // Object controls
  510. .controls {
  511. position: absolute;
  512. z-index: 1;
  513. right: 1em;
  514. top: 1em;
  515. color: $color-white;
  516. li {
  517. float: left;
  518. margin-right: 1px;
  519. &:last-child {
  520. margin-right: 0;
  521. }
  522. }
  523. .disabled {
  524. display: none;
  525. visibility: hidden;
  526. }
  527. }
  528. }
  529. // wrapper around add button for multiple objects
  530. .add {
  531. font-weight: 700;
  532. cursor: pointer;
  533. margin-top: 0;
  534. margin-bottom: 0;
  535. padding-top: 1em;
  536. padding-bottom: 2em;
  537. clear: both;
  538. }