inputs.scss 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847
  1. /**
  2. * @copyright Copyright (c) 2016, John Molakvoæ <skjnldsv@protonmail.com>
  3. * @copyright Copyright (c) 2016, Morris Jobke <hey@morrisjobke.de>
  4. * @copyright Copyright (c) 2016, Joas Schilling <coding@schilljs.com>
  5. * @copyright Copyright (c) 2016, Julius Haertl <jus@bitgrid.net>
  6. * @copyright Copyright (c) 2016, jowi <sjw@gmx.ch>
  7. * @copyright Copyright (c) 2015, Joas Schilling <nickvergessen@owncloud.com>
  8. * @copyright Copyright (c) 2015, Hendrik Leppelsack <hendrik@leppelsack.de>
  9. * @copyright Copyright (c) 2014-2017, Jan-Christoph Borchardt <hey@jancborchardt.net>
  10. *
  11. * @license GNU AGPL version 3 or any later version
  12. *
  13. */
  14. @use 'variables';
  15. @import 'functions';
  16. /* Specifically override browser styles */
  17. input, textarea, select, button, div[contenteditable=true], div[contenteditable=false] {
  18. font-family: var(--font-face);
  19. }
  20. .select2-container-multi .select2-choices .select2-search-field input, .select2-search input, .ui-widget {
  21. font-family: var(--font-face) !important;
  22. }
  23. .select2-container.select2-drop-above .select2-choice {
  24. background-image: unset !important;
  25. }
  26. $default-height: 36px;
  27. /* Simple selector to allow easy overriding */
  28. select,
  29. button:not(
  30. .button-vue,
  31. /* "vs__" class prefix is used in the vue-select lib */
  32. [class^="vs__"]
  33. ),
  34. input,
  35. textarea,
  36. div[contenteditable=true],
  37. div[contenteditable=false] {
  38. width: 130px;
  39. min-height: $default-height;
  40. box-sizing: border-box;
  41. }
  42. /**
  43. * color-text-lighter normal state
  44. * color-text-lighter active state
  45. * color-text-maxcontrast disabled state
  46. */
  47. input:not([type="range"]) {
  48. outline: none;
  49. }
  50. /* Default global values */
  51. div.select2-drop .select2-search input, // TODO: REMOVE WHEN DROPPING SELECT2
  52. input[type='submit'],
  53. input[type='button'],
  54. input[type='reset'],
  55. button:not(
  56. .button-vue,
  57. [class^="vs__"]
  58. ),
  59. .button,
  60. .pager li a {
  61. margin: 3px 3px 3px 0;
  62. padding: 7px 14px;
  63. font-size: 13px;
  64. background-color: var(--color-main-background);
  65. color: var(--color-main-text);
  66. border: 1px solid var(--color-border-dark);
  67. font-size: var(--default-font-size);
  68. outline: none;
  69. border-radius: var(--border-radius);
  70. cursor: text;
  71. &:not(:disabled):not(.primary) {
  72. &:hover,
  73. &:focus,
  74. &.active {
  75. /* active class used for multiselect */
  76. border-color: var(--color-primary-element);
  77. outline: none;
  78. }
  79. &:active {
  80. outline: none;
  81. background-color: var(--color-main-background);
  82. color: var(--color-text-light);
  83. }
  84. &:focus-visible {
  85. box-shadow: 0 0 0 2px var(--color-primary);
  86. }
  87. }
  88. &:disabled {
  89. background-color: var(--color-background-dark);
  90. color: var(--color-main-text);
  91. cursor: default;
  92. opacity: 0.5;
  93. }
  94. &:required {
  95. box-shadow: none;
  96. }
  97. &:user-invalid {
  98. box-shadow: 0 0 0 2px var(--color-error) !important;
  99. }
  100. /* Primary action button, use sparingly */
  101. &.primary {
  102. background-color: var(--color-primary-element);
  103. border-color: var(--color-primary-element);
  104. color: var(--color-primary-text);
  105. cursor: pointer;
  106. /* Apply border to primary button if on log in page (and not in a dark container) or if in header */
  107. #body-login :not(.body-login-container) &,
  108. #header & {
  109. border-color: var(--color-primary-text);
  110. }
  111. &:not(:disabled) {
  112. &:hover,
  113. &:focus,
  114. &:active {
  115. background-color: var(--color-primary-element-hover);
  116. border-color: var(--color-primary-element-hover);
  117. }
  118. &:focus,
  119. &:focus-visible {
  120. box-shadow: 0 0 0 2px var(--color-main-text);
  121. }
  122. &:active {
  123. color: var(--color-primary-element-text-dark);
  124. }
  125. }
  126. &:disabled {
  127. // opacity is already defined to .5 if disabled
  128. background-color: var(--color-primary-element);
  129. color: var(--color-primary-element-text-dark);
  130. cursor: default;
  131. }
  132. }
  133. }
  134. div[contenteditable=false] {
  135. margin: 3px 3px 3px 0;
  136. padding: 7px 6px;
  137. font-size: 13px;
  138. background-color: var(--color-main-background);
  139. color: var(--color-text-lighter);
  140. border: 1px solid var(--color-background-darker);
  141. outline: none;
  142. border-radius: var(--border-radius);
  143. background-color: var(--color-background-dark);
  144. color: var(--color-text-lighter);
  145. cursor: default;
  146. opacity: 0.5;
  147. }
  148. /* Specific override */
  149. input {
  150. &:not([type='radio']):not([type='checkbox']):not([type='range']):not([type='submit']):not([type='button']):not([type='reset']):not([type='color']):not([type='file']):not([type='image']) {
  151. -webkit-appearance: textfield;
  152. -moz-appearance: textfield;
  153. // force height for inline elements like inputs (not textarea, contenteditable...)
  154. height: $default-height;
  155. }
  156. &[type='radio'],
  157. &[type='checkbox'],
  158. &[type='file'],
  159. &[type='image'] {
  160. height: auto;
  161. width: auto;
  162. }
  163. /* Color input doesn't respect the initial height
  164. so we need to set a custom one */
  165. &[type='color'] {
  166. margin: 3px;
  167. padding: 0 2px;
  168. min-height: 30px;
  169. width: 40px;
  170. cursor: pointer;
  171. }
  172. &[type='hidden'] {
  173. height: 0;
  174. width: 0;
  175. }
  176. &[type='time'] {
  177. width: initial;
  178. }
  179. }
  180. /* 'Click' inputs */
  181. select,
  182. button:not(
  183. .button-vue,
  184. [class^="vs__"]
  185. ),
  186. .button,
  187. input[type='button'],
  188. input[type='submit'],
  189. input[type='reset'] {
  190. padding: 8px 14px;
  191. font-size: var(--default-font-size);
  192. width: auto;
  193. min-height: $default-height;
  194. cursor: pointer;
  195. box-sizing: border-box;
  196. background-color: var(--color-background-dark);
  197. &:disabled {
  198. cursor: default;
  199. }
  200. }
  201. input:not(
  202. [type='range'],
  203. .input-field__input,
  204. [type='submit'],
  205. [type='button'],
  206. [type='reset'],
  207. .multiselect__input,
  208. .select2-input,
  209. .action-input__input,
  210. [class^="vs__"]
  211. ),
  212. select,
  213. div[contenteditable=true],
  214. textarea {
  215. margin: 3px 3px 3px 0;
  216. padding: 0 12px;
  217. font-size: var(--default-font-size);
  218. background-color: var(--color-main-background);
  219. color: var(--color-main-text);
  220. border: 2px solid var(--color-border-maxcontrast);
  221. height: 36px;
  222. outline: none;
  223. border-radius: var(--border-radius-large);
  224. text-overflow: ellipsis;
  225. cursor: pointer;
  226. &:not(:disabled):hover, &:not(:disabled):focus, &:not(:disabled):active {
  227. border-color: var(--color-primary-element);
  228. }
  229. &:not(:disabled):focus {
  230. cursor: text;
  231. }
  232. }
  233. .multiselect__input, .select2-input {
  234. background-color: var(--color-main-background);
  235. color: var(--color-main-text);
  236. }
  237. textarea, div[contenteditable=true] {
  238. padding: 12px;
  239. height: auto;
  240. }
  241. /* Override the ugly select arrow */
  242. select {
  243. background: var(--icon-triangle-s-dark) no-repeat right 8px center;
  244. appearance: none;
  245. background-color: var(--color-main-background);
  246. padding-right: 28px !important;
  247. }
  248. select,
  249. button:not(
  250. .button-vue,
  251. [class^="vs__"]
  252. ),
  253. .button {
  254. * {
  255. cursor: pointer;
  256. }
  257. &:disabled {
  258. * {
  259. cursor: default;
  260. }
  261. }
  262. }
  263. /* Buttons */
  264. button:not(
  265. .button-vue,
  266. [class^="vs__"]
  267. ),
  268. .button,
  269. input[type='button'],
  270. input[type='submit'],
  271. input[type='reset'] {
  272. font-weight: bold;
  273. border-radius: var(--border-radius-pill);
  274. /* Get rid of the inside dotted line in Firefox */
  275. &::-moz-focus-inner {
  276. border: 0;
  277. }
  278. &.error {
  279. background-color: var(--color-error) !important;
  280. border-color: var(--color-error) !important;
  281. color: #fff !important;
  282. }
  283. }
  284. button:not(
  285. .button-vue,
  286. .action-button,
  287. [class^="vs__"]
  288. ),
  289. .button {
  290. > span {
  291. /* icon position inside buttons */
  292. &[class^='icon-'],
  293. &[class*=' icon-'] {
  294. display: inline-block;
  295. vertical-align: text-bottom;
  296. opacity: 0.5;
  297. }
  298. }
  299. }
  300. /* Confirm inputs */
  301. input {
  302. &[type='text'],
  303. &[type='password'],
  304. &[type='email'] {
  305. + .icon-confirm {
  306. margin-left: -13px !important;
  307. border-left-color: transparent !important;
  308. border-radius: 0 var(--border-radius-large) var(--border-radius-large) 0 !important;
  309. border-width: 2px;
  310. background-clip: padding-box;
  311. /* Avoid background under border */
  312. background-color: var(--color-main-background) !important;
  313. opacity: 1;
  314. height: $default-height;
  315. width: $default-height;
  316. padding: 7px 6px;
  317. cursor: pointer;
  318. margin-right: 0;
  319. &:disabled {
  320. cursor: default;
  321. @include icon-color('confirm-fade', 'actions', variables.$color-black, 2, true);
  322. }
  323. }
  324. /* only show confirm borders if input is not focused */
  325. &:not(:active):not(:hover):not(:focus){
  326. &:invalid {
  327. + .icon-confirm {
  328. border-color: var(--color-error);
  329. }
  330. }
  331. + .icon-confirm {
  332. &:active,
  333. &:hover,
  334. &:focus {
  335. border-color: var(--color-primary-element) !important;
  336. border-radius: var(--border-radius) !important;
  337. &:disabled {
  338. border-color: var(--color-background-darker) !important;
  339. }
  340. }
  341. }
  342. }
  343. &:active,
  344. &:hover,
  345. &:focus {
  346. + .icon-confirm {
  347. border-color: var(--color-primary-element) !important;
  348. border-left-color: transparent !important;
  349. /* above previous input */
  350. z-index: 2;
  351. }
  352. }
  353. }
  354. }
  355. /* Various Fixes */
  356. button img,
  357. .button img {
  358. cursor: pointer;
  359. }
  360. select,
  361. .button.multiselect {
  362. font-weight: normal;
  363. }
  364. /* Radio & Checkboxes */
  365. $checkbox-radio-size: 14px;
  366. $color-checkbox-radio-white: #fff;
  367. input {
  368. &[type='checkbox'],
  369. &[type='radio'] {
  370. &.radio,
  371. &.checkbox {
  372. position: absolute;
  373. left: -10000px;
  374. top: auto;
  375. width: 1px;
  376. height: 1px;
  377. overflow: hidden;
  378. + label {
  379. user-select: none;
  380. }
  381. &:disabled + label,
  382. &:disabled + label:before {
  383. cursor: default;
  384. }
  385. + label:before {
  386. content: '';
  387. display: inline-block;
  388. height: $checkbox-radio-size;
  389. width: $checkbox-radio-size;
  390. vertical-align: middle;
  391. border-radius: 50%;
  392. margin: 0 6px 3px 3px;
  393. border: 1px solid var(--color-text-lighter);
  394. }
  395. &:not(:disabled):not(:checked) + label:hover:before,
  396. &:focus + label:before {
  397. border-color: var(--color-primary-element);
  398. }
  399. &:focus-visible + label {
  400. outline-style: solid;
  401. outline-color: var(--color-main-text);
  402. outline-width: 1px;
  403. outline-offset: 2px;
  404. }
  405. &:checked + label:before,
  406. &.checkbox:indeterminate + label:before {
  407. /* ^ :indeterminate have a strange behavior on radio,
  408. so we respecified the checkbox class again to be safe */
  409. box-shadow: inset 0px 0px 0px 2px var(--color-main-background);
  410. background-color: var(--color-primary-element);
  411. border-color: var(--color-primary-element);
  412. }
  413. &:disabled + label:before {
  414. border: 1px solid var(--color-text-lighter);
  415. background-color: var(--color-text-maxcontrast) !important; /* override other status */
  416. }
  417. &:checked:disabled + label:before {
  418. background-color: var(--color-text-maxcontrast);
  419. }
  420. // Detail description below label of checkbox or radio button
  421. & + label ~ em {
  422. display: inline-block;
  423. margin-left: 25px;
  424. }
  425. & + label ~ em:last-of-type {
  426. margin-bottom: $checkbox-radio-size;
  427. }
  428. }
  429. &.checkbox {
  430. + label:before {
  431. border-radius: 1px;
  432. height: $checkbox-radio-size;
  433. width: $checkbox-radio-size;
  434. box-shadow: none !important;
  435. background-position: center;
  436. }
  437. &:checked + label:before {
  438. background-image: url('../img/actions/checkbox-mark.svg');
  439. }
  440. &:indeterminate + label:before {
  441. background-image: url('../img/actions/checkbox-mixed.svg');
  442. }
  443. }
  444. /* We do not use the variables as we keep the colours as white for this variant */
  445. &.radio--white,
  446. &.checkbox--white {
  447. + label:before,
  448. &:focus + label:before {
  449. border-color: darken($color-checkbox-radio-white, 27%);
  450. }
  451. &:not(:disabled):not(:checked) + label:hover:before {
  452. border-color: $color-checkbox-radio-white;
  453. }
  454. &:checked + label:before {
  455. box-shadow: inset 0px 0px 0px 2px var(--color-main-background);
  456. background-color: darken($color-checkbox-radio-white, 14%);
  457. border-color: darken($color-checkbox-radio-white, 14%);
  458. }
  459. &:disabled + label:before {
  460. background-color: darken($color-checkbox-radio-white, 27%) !important; /* override other status */
  461. border-color: rgba($color-checkbox-radio-white, 0.4) !important; /* override other status */
  462. }
  463. &:checked:disabled + label:before {
  464. box-shadow: inset 0px 0px 0px 2px var(--color-main-background);
  465. border-color: rgba($color-checkbox-radio-white, 0.4) !important; /* override other status */
  466. background-color: darken($color-checkbox-radio-white, 27%);
  467. }
  468. }
  469. &.checkbox--white {
  470. &:checked + label:before,
  471. &:indeterminate + label:before {
  472. background-color: transparent !important; /* Override default checked */
  473. border-color: $color-checkbox-radio-white !important; /* Override default checked */
  474. background-image: url('../img/actions/checkbox-mark-white.svg');
  475. }
  476. &:indeterminate + label:before {
  477. background-image: url('../img/actions/checkbox-mixed-white.svg');
  478. }
  479. &:disabled + label:before {
  480. opacity: 0.7; /* No other choice for white background image */
  481. }
  482. }
  483. }
  484. }
  485. /* Select2 overriding. Merged to core with vendor stylesheet */
  486. div.select2-drop {
  487. margin-top: -2px;
  488. background-color: var(--color-main-background);
  489. &.select2-drop-active {
  490. border-color: var(--color-border-dark);
  491. }
  492. .avatar {
  493. display: inline-block;
  494. margin-right: 8px;
  495. vertical-align: middle;
  496. img {
  497. cursor: pointer;
  498. }
  499. }
  500. .select2-search input {
  501. min-height: auto;
  502. background: var(--icon-search-dark) no-repeat right center !important;
  503. background-origin: content-box !important;
  504. }
  505. .select2-results {
  506. max-height: 250px;
  507. margin: 0;
  508. padding: 0;
  509. .select2-result-label {
  510. white-space: nowrap;
  511. overflow: hidden;
  512. text-overflow: ellipsis;
  513. span {
  514. cursor: pointer;
  515. em {
  516. cursor: inherit;
  517. background: unset;
  518. }
  519. }
  520. }
  521. .select2-result,
  522. .select2-no-results,
  523. .select2-searching {
  524. position: relative;
  525. display: list-item;
  526. padding: 12px;
  527. background-color: transparent;
  528. cursor: pointer;
  529. color: var(--color-text-lighter);
  530. }
  531. .select2-result {
  532. &.select2-selected {
  533. background-color: var(--color-background-dark);
  534. }
  535. }
  536. .select2-highlighted {
  537. background-color: var(--color-background-dark);
  538. color: var(--color-main-text);
  539. }
  540. }
  541. }
  542. .select2-chosen,
  543. #select2-drop {
  544. .avatar,
  545. .avatar img {
  546. cursor: pointer;
  547. }
  548. }
  549. div.select2-container-multi {
  550. .select2-choices,
  551. &.select2-container-active .select2-choices {
  552. box-shadow: none;
  553. white-space: nowrap;
  554. text-overflow: ellipsis;
  555. background: var(--color-main-background);
  556. color: var(--color-text-lighter) !important;
  557. box-sizing: content-box;
  558. border-radius: var(--border-radius-large);
  559. border: 2px solid var(--color-border-dark);
  560. margin: 0;
  561. padding: 6px;
  562. min-height: 44px;
  563. &:focus-within {
  564. border-color: var(--color-primary)
  565. }
  566. .select2-search-choice {
  567. line-height: 20px;
  568. padding-left: 5px;
  569. &.select2-search-choice-focus,
  570. &:hover,
  571. &:active,
  572. & {
  573. background-image: none;
  574. background-color: var(--color-main-background);
  575. color: var(--color-text-lighter);
  576. border: 1px solid var(--color-border-dark);
  577. }
  578. .select2-search-choice-close {
  579. display: none;
  580. }
  581. }
  582. .select2-search-field input {
  583. line-height: 20px;
  584. min-height: 28px;
  585. max-height: 28px;
  586. color: var(--color-main-text);
  587. &.select2-active {
  588. background: none !important;
  589. }
  590. }
  591. }
  592. }
  593. div.select2-container {
  594. margin: 3px 3px 3px 0;
  595. &.select2-container-multi .select2-choices {
  596. display: flex;
  597. flex-wrap: wrap;
  598. li {
  599. float: none;
  600. }
  601. }
  602. a.select2-choice {
  603. box-shadow: none;
  604. white-space: nowrap;
  605. text-overflow: ellipsis;
  606. background: var(--color-main-background);
  607. color: var(--color-text-lighter) !important;
  608. box-sizing: content-box;
  609. border-radius: var(--border-radius-large);
  610. border: 2px solid var(--color-border-dark);
  611. margin: 0;
  612. padding: 6px 12px;
  613. min-height: 44px;
  614. &:focus-within {
  615. border-color: var(--color-primary)
  616. }
  617. .select2-search-choice {
  618. line-height: 20px;
  619. padding-left: 5px;
  620. background-image: none;
  621. background-color: var(--color-background-dark);
  622. border-color: var(--color-background-dark);
  623. .select2-search-choice-close {
  624. display: none;
  625. }
  626. &.select2-search-choice-focus,
  627. &:hover {
  628. background-color: var(--color-border);
  629. border-color: var(--color-border);
  630. }
  631. }
  632. .select2-arrow {
  633. background: none;
  634. border-radius: 0;
  635. border: none;
  636. b {
  637. background: var(--icon-triangle-s-dark) no-repeat center !important;
  638. opacity: .5;
  639. }
  640. }
  641. &:hover .select2-arrow b,
  642. &:focus .select2-arrow b,
  643. &:active .select2-arrow b {
  644. opacity: .7;
  645. }
  646. .select2-search-field input {
  647. line-height: 20px;
  648. }
  649. }
  650. }
  651. /* Vue v-select */
  652. .v-select {
  653. margin: 3px 3px 3px 0;
  654. display: inline-block;
  655. .dropdown-toggle {
  656. display: flex !important;
  657. flex-wrap: wrap;
  658. .selected-tag {
  659. line-height: 20px;
  660. padding-left: 5px;
  661. background-image: none;
  662. background-color: var(--color-main-background);
  663. color: var(--color-text-lighter);
  664. border: 1px solid var(--color-border-dark);
  665. display: inline-flex;
  666. align-items: center;
  667. .close {
  668. margin-left: 3px;
  669. }
  670. }
  671. }
  672. .dropdown-menu {
  673. padding: 0;
  674. li {
  675. padding: 5px;
  676. position: relative;
  677. display: list-item;
  678. background-color: transparent;
  679. cursor: pointer;
  680. color: var(--color-text-lighter);
  681. a {
  682. white-space: nowrap;
  683. overflow: hidden;
  684. text-overflow: ellipsis;
  685. height: 25px;
  686. padding: 3px 7px 4px 2px;
  687. margin: 0;
  688. cursor: pointer;
  689. min-height: 1em;
  690. -webkit-touch-callout: none;
  691. -webkit-user-select: none;
  692. -moz-user-select: none;
  693. -ms-user-select: none;
  694. user-select: none;
  695. display: inline-flex;
  696. align-items: center;
  697. background-color: transparent !important;
  698. color: inherit !important;
  699. &::before {
  700. content: ' ';
  701. background-image: var(--icon-checkmark-dark);
  702. background-repeat: no-repeat;
  703. background-position: center;
  704. min-width: 16px;
  705. min-height: 16px;
  706. display: block;
  707. opacity: 0.5;
  708. margin-right: 5px;
  709. visibility: hidden;
  710. }
  711. }
  712. &.highlight {
  713. color: var(--color-main-text);
  714. }
  715. &.active > a {
  716. background-color: var(--color-background-dark);
  717. color: var(--color-main-text);
  718. &::before {
  719. visibility: visible;
  720. }
  721. }
  722. }
  723. }
  724. }
  725. /* Progressbar */
  726. progress:not(.vue) {
  727. display: block;
  728. width: 100%;
  729. padding: 0;
  730. border: 0 none;
  731. background-color: var(--color-background-dark);
  732. border-radius: var(--border-radius);
  733. flex-basis: 100%;
  734. height: 5px;
  735. overflow: hidden;
  736. &.warn {
  737. &::-moz-progress-bar {
  738. background: var(--color-error);
  739. }
  740. &::-webkit-progress-value {
  741. background: var(--color-error);
  742. }
  743. }
  744. &::-webkit-progress-bar {
  745. background: transparent;
  746. }
  747. &::-moz-progress-bar {
  748. border-radius: var(--border-radius);
  749. background: var(--color-primary);
  750. transition: 250ms all ease-in-out;
  751. }
  752. &::-webkit-progress-value {
  753. border-radius: var(--border-radius);
  754. background: var(--color-primary);
  755. transition: 250ms all ease-in-out;
  756. }
  757. }
  758. /* Animation */
  759. @keyframes shake {
  760. 10%,
  761. 90% {
  762. transform: translate(-1px);
  763. }
  764. 20%,
  765. 80% {
  766. transform: translate(2px);
  767. }
  768. 30%,
  769. 50%,
  770. 70% {
  771. transform: translate(-4px);
  772. }
  773. 40%,
  774. 60% {
  775. transform: translate(4px);
  776. }
  777. }
  778. .shake {
  779. animation-name: shake;
  780. animation-duration: .7s;
  781. animation-timing-function: ease-out;
  782. }
  783. // Keep the labels for screen readers but hide them since we use placeholders
  784. // Same as .hidden-visually
  785. label.infield {
  786. position: absolute;
  787. left: -10000px;
  788. top: -10000px;
  789. width: 1px;
  790. height: 1px;
  791. overflow: hidden;
  792. }
  793. // when rules are grouped using the comma operator and one selector is invalid / unknown then the whole group is invalidated.
  794. // https://www.w3.org/TR/selectors-3/#grouping
  795. // In this case `::-ms-input-placeholder` is unknown to Firefox and Chrome
  796. @mixin placeholder-style {
  797. color: var(--color-text-maxcontrast);
  798. font-size: var(--default-font-size);
  799. }
  800. ::placeholder {
  801. @include placeholder-style;
  802. }
  803. ::-ms-input-placeholder {
  804. @include placeholder-style;
  805. }
  806. ::-webkit-input-placeholder {
  807. @include placeholder-style;
  808. }