Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.
 
 
 
 

58 rader
1.3 KiB

  1. @import '../../_global/styles/mixins';
  2. @import '../../_global/styles/vars';
  3. input[type="checkbox"].form-control {
  4. width: 20px;
  5. padding: 0;
  6. }
  7. input[type="checkbox"], input[type="radio"] {
  8. --input-size: 20px;
  9. position: relative;
  10. display: inline-block;
  11. vertical-align: top;
  12. appearance: none;
  13. -webkit-appearance: none;
  14. background-color: var(--theme-color-white);
  15. border: 1px solid var(--theme-color-primary);
  16. width: var(--input-size);
  17. height: var(--input-size);
  18. border-radius: var(--border-radius-xs);
  19. background-size: 20px;
  20. background-position: center;
  21. background-repeat: no-repeat;
  22. transition: 0.25s ease;
  23. margin: 0 9px 0 0;
  24. @include focus-visible;
  25. &:checked {
  26. background-image: url("../../assets/img/check.svg");
  27. background-color: var(--theme-color-primary);
  28. }
  29. &.half-checked {
  30. background-image: url("../../assets/img/half-check.svg");
  31. background-color: var(--theme-color-secondary);
  32. }
  33. ~ label {
  34. display: inline-block;
  35. vertical-align: top;
  36. //max-width: calc(100% - 40px);
  37. margin-top: 0;
  38. margin-bottom: 0;
  39. font-size: var(--font-size-copy);
  40. line-height: 1.2;
  41. @media(max-width: 767px) {
  42. margin-top: 2px;
  43. }
  44. }
  45. }
  46. input[type="radio"] {
  47. --input-size: 22px;
  48. border-radius: 50%;
  49. margin: -1px 8px 0 -1px;
  50. }