diff options
Diffstat (limited to 'minionlivesmatter/templates/assets/bootstrap-material-design/scss/_checkboxes.scss')
| -rw-r--r-- | minionlivesmatter/templates/assets/bootstrap-material-design/scss/_checkboxes.scss | 256 |
1 files changed, 0 insertions, 256 deletions
diff --git a/minionlivesmatter/templates/assets/bootstrap-material-design/scss/_checkboxes.scss b/minionlivesmatter/templates/assets/bootstrap-material-design/scss/_checkboxes.scss deleted file mode 100644 index cb0099a..0000000 --- a/minionlivesmatter/templates/assets/bootstrap-material-design/scss/_checkboxes.scss +++ /dev/null @@ -1,256 +0,0 @@ -// http://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox -.checkbox label, -label.checkbox-inline { - padding-left: $bmd-checkbox-size + $bmd-checkbox-label-padding; // absolutely positioned so add the radio size - cursor: pointer; - - .checkbox-decorator { - position: absolute; - top: 0.125rem; - left: 0; - vertical-align: middle; - - &::before { // FIXME: document why this is necessary (doesn't seem to be on chrome) - position: absolute; - left: 0; - z-index: 1; - display: block; - width: $bmd-checkbox-size; - height: $bmd-checkbox-size; - margin: 0; - content: ""; - background-color: rgba($black, .84); - border-radius: 100%; - opacity: 0; - transform: scale3d(2.3, 2.3, 1); - } - - .check { - position: relative; - z-index: 1; - display: inline-block; - width: $bmd-checkbox-size; - height: $bmd-checkbox-size; - overflow: hidden; - border: $bmd-checkbox-border-size solid $bmd-checkbox-border-color; - border-radius: $border-radius; - - // checkbox outline - &::before { - position: absolute; - display: block; - width: 0; - height: 0; - margin-top: -4px; - margin-left: 6px; - content: ""; - box-shadow: 0 0 0 0, - 0 0 0 0, - 0 0 0 0, - 0 0 0 0, - 0 0 0 0, - 0 0 0 0, - 0 0 0 0 inset; - transform: rotate(45deg); - animation: checkbox-off; - - .is-focused & { - // Prevent checkbox animation and ripple effect on page load - animation: checkbox-off $bmd-checkbox-animation-check forwards; - } - } - } - } - - input[type=checkbox] { - - // Hide native checkbox - position: absolute; - left: 0; - z-index: -1; - width: 0; - height: 0; - margin: 0; - overflow: hidden; - pointer-events: none; - opacity: 0; - - &:focus + .checkbox-decorator .check::after { - opacity: 0.2; - } - - &:checked { - - // FIXME: once working - combine further to reduce code - + .checkbox-decorator .check { - color: $bmd-checkbox-checked-color; - border-color: $bmd-checkbox-checked-color; - } - - + .checkbox-decorator .check::before { - color: $bmd-checkbox-checked-color; - box-shadow: 0 0 0 10px, - 10px -10px 0 10px, - 32px 0 0 20px, - 032px 0 20px, - -5px 5px 0 10px, - 20px -12px 0 11px; - animation: checkbox-on $bmd-checkbox-animation-check forwards; - } - - + .checkbox-decorator::before { - animation: rippleOn; - .is-focused & { - // Prevent checkbox animation and ripple effect on page load - animation: rippleOn $bmd-checkbox-animation-ripple; - } - } - - + .checkbox-decorator .check::after { - //background-color: $brand-success; // FIXME: seems like tho wrong color, test and make sure it can be removed - animation: rippleOn $bmd-checkbox-animation-ripple forwards; // Ripple effect on check - } - } - - &:not(:checked) { - + .checkbox-decorator::before { - animation: rippleOff; - .is-focused & { - // Prevent checkbox animation and ripple effect on page load - animation: rippleOff $bmd-checkbox-animation-ripple; - } - } - - + .checkbox-decorator .check::after { - animation: rippleOff $bmd-checkbox-animation-ripple forwards; // Ripple effect on uncheck - } - } - - &[disabled], - fieldset[disabled] & { - + .checkbox-decorator .check::after, - .check::after { - background-color: $gray-dark; - transform: rotate(-45deg); - } - + .checkbox-decorator .check, - .check { - border-color: $bmd-checkbox-border-color-disabled; - } - } - } -} - -@keyframes checkbox-on { - 0% { - box-shadow: 0 0 0 10px, - 10px -10px 0 10px, - 32px 0 0 20px, - 0 32px 0 20px, - -5px 5px 0 10px, - 15px 2px 0 11px; - } - 50% { - box-shadow: 0 0 0 10px, - 10px -10px 0 10px, - 32px 0 0 20px, - 0 32px 0 20px, - -5px 5px 0 10px, - 20px 2px 0 11px; - } - 100% { - box-shadow: 0 0 0 10px, - 10px -10px 0 10px, - 32px 0 0 20px, - 0 32px 0 20px, - -5px 5px 0 10px, - 20px -12px 0 11px; - } -} - -@keyframes checkbox-off { - 0% { - box-shadow: 0 0 0 10px, - 10px -10px 0 10px, - 32px 0 0 20px, - 0 32px 0 20px, - -5px 5px 0 10px, - 20px -12px 0 11px, - 0 0 0 0 inset; - } - 25% { - box-shadow: 0 0 0 10px, - 10px -10px 0 10px, - 32px 0 0 20px, - 0 32px 0 20px, - -5px 5px 0 10px, - 20px -12px 0 11px, - 0 0 0 0 inset; - } - 50% { - width: 0; - height: 0; - margin-top: -4px; - margin-left: 6px; - box-shadow: 0 0 0 10px, - 10px -10px 0 10px, - 32px 0 0 20px, - 0 32px 0 20px, - -5px 5px 0 10px, - 15px 2px 0 11px, - 0 0 0 0 inset; - transform: rotate(45deg); - } - 51% { - width: 20px; - height: 20px; - margin-top: -2px; - margin-left: -2px; - box-shadow: 0 0 0 0, - 0 0 0 0, - 0 0 0 0, - 0 0 0 0, - 0 0 0 0, - 0 0 0 0, - 0 0 0 10px inset; - transform: rotate(0deg); - } - 100% { - width: 20px; - height: 20px; - margin-top: -2px; - margin-left: -2px; - box-shadow: 0 0 0 0, - 0 0 0 0, - 0 0 0 0, - 0 0 0 0, - 0 0 0 0, - 0 0 0 0, - 0 0 0 0 inset; - transform: rotate(0deg); - } -} - -@keyframes rippleOn { - 0% { - opacity: 0; - } - 50% { - opacity: 0.2; - } - 100% { - opacity: 0; - } -} - -@keyframes rippleOff { - 0% { - opacity: 0; - } - 50% { - opacity: 0.2; - } - 100% { - opacity: 0; - } -} |