summaryrefslogtreecommitdiff
path: root/templates/assets/sass/material-kit/_checkboxes.scss
diff options
context:
space:
mode:
Diffstat (limited to 'templates/assets/sass/material-kit/_checkboxes.scss')
-rwxr-xr-xtemplates/assets/sass/material-kit/_checkboxes.scss195
1 files changed, 0 insertions, 195 deletions
diff --git a/templates/assets/sass/material-kit/_checkboxes.scss b/templates/assets/sass/material-kit/_checkboxes.scss
deleted file mode 100755
index 119bde2..0000000
--- a/templates/assets/sass/material-kit/_checkboxes.scss
+++ /dev/null
@@ -1,195 +0,0 @@
-.form-group {
-}
-
-.checkbox {
- label {
- cursor: pointer;
- padding-left: 0; // Reset for Bootstrap rule
- color: $mdb-checkbox-label-color;
- @include mdb-label-color-toggle-focus();
- }
-
- // Hide native checkbox
- input[type=checkbox] {
- opacity: 0;
- position: absolute;
- margin: 0;
- z-index: -1;
- width: 0;
- height: 0;
- overflow: hidden;
- left: 0;
- pointer-events: none;
- }
-
- .checkbox-material {
- vertical-align: middle;
- position: relative;
- top: 1px;
- padding-right: 5px;
- display: inline-block;
-
- &:before {
- display: block;
- position: absolute;
- left: 0;
- content: "";
- background-color: rgba(0,0,0,.84);
- height: $mdb-checkbox-size;
- width: $mdb-checkbox-size;
- border-radius: 100%;
- z-index: 1;
- opacity: 0;
- margin: 0;
- top: 0;
- @include transform-scale3d(unquote('2.3,2.3,1'));
- }
-
- .check {
- position: relative;
- display: inline-block;
- width: $mdb-checkbox-size;
- height: $mdb-checkbox-size;
- border: 1px solid $mdb-checkbox-border-color;
- overflow: hidden;
- z-index: 1;
- border-radius: $border-radius-base;
- }
- .check:before {
- position: absolute;
- content: "";
- transform: rotate(45deg);
- display: block;
- margin-top: -3px;
- margin-left: 7px;
- width: 0;
- height: 0;
- background: red;
- 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;
- @include animation(checkbox-off $mdb-checkbox-animation-check forwards);
- }
- }
-
- input[type=checkbox] {
-
- &:focus + .checkbox-material .check:after {
- opacity: 0.2;
- }
-
- &:checked {
-
- & + .checkbox-material .check {
- background: $mdb-checkbox-checked-color;
- }
-
- & + .checkbox-material .check:before {
- color: #FFFFFF;
- box-shadow: 0 0 0 10px,
- 10px -10px 0 10px,
- 32px 0 0 20px,
- 0px 32px 0 20px,
- -5px 5px 0 10px,
- 20px -12px 0 11px;
- @include animation(checkbox-on $mdb-checkbox-animation-check forwards);
- }
-
- & + .checkbox-material:before {
- @include animation(rippleOn $mdb-checkbox-animation-ripple);
- }
-
- & + .checkbox-material .check:after {
- //background-color: $brand-success; // FIXME: seems like tho wrong color, test and make sure it can be removed
- @include animation(rippleOn $mdb-checkbox-animation-ripple forwards);
- }
- }
-
- &:not(:checked) {
- & + .checkbox-material:before {
- @include animation(rippleOff $mdb-checkbox-animation-ripple);
- }
-
- & + .checkbox-material .check:after {
- @include animation(rippleOff $mdb-checkbox-animation-ripple); // Ripple effect on uncheck
-
- }
- }
- }
-
- // Style for disabled inputs
- fieldset[disabled] &,
- fieldset[disabled] & input[type=checkbox],
- input[type=checkbox][disabled] ~ .checkbox-material .check,
- input[type=checkbox][disabled] + .circle {
- opacity: 0.5;
- }
-
- input[type=checkbox][disabled] ~ .checkbox-material .check{
- border-color: #000000;
- opacity: .26;
- }
-
- input[type=checkbox][disabled] + .checkbox-material .check:after {
- background-color: $mdb-text-color-primary;
- transform: rotate(-45deg);
- }
-}
-
-@keyframes checkbox-on {
- 0% {
- box-shadow:
- 0 0 0 10px,
- 10px -10px 0 10px,
- 32px 0 0 20px,
- 0px 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,
- 0px 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,
- 0px 32px 0 20px,
- -5px 5px 0 10px,
- 20px -12px 0 11px;
- }
-}
-
-@keyframes rippleOn {
- 0% {
- opacity: 0;
- }
- 50% {
- opacity: 0.2;
- }
- 100% {
- opacity: 0;
- }
-}
-@keyframes rippleOff {
- 0% {
- opacity: 0;
- }
- 50% {
- opacity: 0.2;
- }
- 100% {
- opacity: 0;
- }
-}