src/wolnelektury/static/2022/styles/components/_checkbox.scss

   1 /* ------------------------------
   2     Component: Checkbox
   3 ------------------------------ */
   4
   5 .c-checkbox {
   6     display: flex;
   7     margin-bottom: 14px;
   8
   9     input {
  10         opacity: 0;
  11         width: 0; height: 0;
  12         position: absolute;
  13         visibility: hidden;
  14     }
  15
  16     input + label {
  17         &:before {
  18                 content: '';
  19                 margin-top: 2px;
  20                 vertical-align: middle;
  21                 width: 20px;
  22                 min-width: 20px;
  23                 height: 20px;
  24                 margin-right: 20px;
  25                 text-align: center;
  26                 display: block;
  27         background: #E1F1F2;
  28         border: 2px solid #083F4D;
  29         box-sizing: border-box;
  30         border-radius: 3px;
  31         }
  32     }
  33
  34     input:checked + label {
  35         &:before {
  36         background: #083F4D url(../images/check.svg) center no-repeat;
  37         background-size: 12px;
  38         }
  39     }
  40
  41     label {
  42         display: flex;
  43         cursor: pointer;
  44
  45         p {
  46                 margin-top: 0;
  47         color: #083F4D;
  48                 @include font-size(15px);
  49         line-height: 150%;
  50         span {color: #FF4C54; margin-left: -10px;}
  51         }
  52     }
  53 }
  54