Created
May 27, 2015 16:43
-
-
Save joshuaogle/1d37e66f173c5794998f to your computer and use it in GitHub Desktop.
CSS Checkboxes
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="input-group"> | |
| <input type="checkbox" id="inputID" class="action-checkbox"> | |
| <label for="inputID">Label</label> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $action-icon-size: 20px; | |
| %action-icon-circle { | |
| @include size($action-icon-size); | |
| background-color: transparent; | |
| border: 2px solid $lgray; | |
| border-radius: 50%; | |
| display: inline-block; | |
| font-weight: bold; | |
| line-height: $action-icon-size * 0.66; | |
| text-align: center; | |
| vertical-align: middle; | |
| &, | |
| &::before, | |
| &::after { | |
| transition: background-color 250ms, border-color 250ms, color 250ms; | |
| } | |
| } | |
| %action-icon-checkmark { | |
| @include size(($action-icon-size / 3) ($action-icon-size / 2)); | |
| @include transform(rotate(37deg)); | |
| border: 2px solid transparent; | |
| border-bottom-color: tint($lgray, 50%); | |
| border-right-color: tint($lgray, 50%); | |
| display: inline-block; | |
| } | |
| [type="checkbox"].action-checkbox { | |
| visibility: hidden; | |
| + label { | |
| position: relative; | |
| z-index: 1; | |
| &::before, | |
| &::after { | |
| content: ""; | |
| left: -1.45em; | |
| position: absolute; | |
| transition: all 250ms; | |
| z-index: 1; | |
| } | |
| &::before { | |
| @extend %action-icon-checkmark; | |
| left: -($action-icon-size * 0.85); | |
| top: $action-icon-size * 0.3; | |
| } | |
| &::after { | |
| @extend %action-icon-circle; | |
| top: 0.2em; | |
| z-index: 0; | |
| } | |
| } | |
| &:checked { | |
| + label { | |
| &::before { | |
| border-bottom-color: #fff; | |
| border-right-color: #fff; | |
| } | |
| &::after { | |
| background-color: $success-color; | |
| border-color: $success-color; | |
| } | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment