_checkbox.scss in Code Snippets 3.10.0-beta.1, at css/common/_checkbox.scss
| 1 | @use 'theme'; |
| 2 | |
| 3 | @mixin canonical { |
| 4 | appearance: none; |
| 5 | display: inline-grid; |
| 6 | place-content: center; |
| 7 | vertical-align: middle; |
| 8 | inline-size: 20px; |
| 9 | block-size: 20px; |
| 10 | padding: 0; |
| 11 | margin: 0; |
| 12 | box-sizing: border-box; |
| 13 | background: #fff; |
| 14 | border: 1.5px solid theme.$control-border; |
| 15 | border-radius: 5px; |
| 16 | box-shadow: 0 2px 2px rgb(0 0 0 / 5%); |
| 17 | cursor: pointer; |
| 18 | |
| 19 | &::before { |
| 20 | content: none; |
| 21 | } |
| 22 | |
| 23 | &:checked { |
| 24 | background: theme.$accent; |
| 25 | border-color: theme.$accent; |
| 26 | |
| 27 | &::before { |
| 28 | content: ''; |
| 29 | inline-size: 20px; |
| 30 | block-size: 20px; |
| 31 | margin: 0; |
| 32 | background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M14.83 4.89l1.34.94-5.81 8.38H9.02L5.78 9.67l1.34-1.25 2.57 2.4z' fill='%23fff'/%3E%3C/svg%3E") center/20px no-repeat; |
| 33 | } |
| 34 | } |
| 35 | } |
| 36 |