git.roojs.org Git - bootswatch/blob - material-kit/sass/material-kit/_radios.scss

   1 // This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
   2
   3 @mixin radio-color($color, $opacity){
   4   & ~ .check,
   5   & ~ .circle {
   6     opacity: $opacity;
   7   }
   8
   9   & ~ .check {
  10     background-color: $color;
  11   }
  12
  13   & ~ .circle {
  14     border-color: $color;
  15   }
  16 }
  17
  18 .radio {
  19   label {
  20     cursor: pointer;
  21     padding-left: 35px;
  22     position: relative;
  23     color: $mdb-radio-label-color;
  24     @include mdb-label-color-toggle-focus();
  25
  26     span {
  27       display: block;
  28       position: absolute;
  29       left: 10px;
  30       top: 2px;
  31       transition-duration: 0.2s;
  32     }
  33     .circle {
  34       border: 1px solid $mdb-radio-color-off;
  35       height: 15px;
  36       width: 15px;
  37       border-radius: 100%;
  38     }
  39     .check {
  40       height: 15px;
  41       width: 15px;
  42       border-radius: 100%;
  43       background-color: $mdb-radio-color-on;
  44       @include transform-scale3d(unquote('0,0,0'));
  45     }
  46     .check:after {
  47       display: block;
  48       position: absolute;
  49       content: "";
  50       background-color: $mdb-text-color-primary;
  51       left: -18px;
  52       top: -18px;
  53       height: 50px;
  54       width: 50px;
  55       border-radius: 100%;
  56       z-index: 1;
  57       opacity: 0;
  58       margin: 0;
  59       @include transform-scale3d(unquote('1.5,1.5,1'));
  60     }
  61     input[type=radio]:not(:checked) ~ .check:after {
  62         @include animation(rippleOff 500ms);
  63     }
  64     input[type=radio]:checked ~ .check:after {
  65         @include animation(rippleOff 500ms);
  66     }
  67
  68   }
  69
  70   input[type=radio] {
  71     opacity: 0;
  72     height: 0;
  73     width: 0;
  74     overflow: hidden;
  75
  76     &:checked {
  77       @include radio-color($mdb-radio-color-on, 1);
  78     }
  79     &:checked ~ .check {
  80       @include transform-scale3d(unquote('0.65, 0.65, 1'));
  81     }
  82   }
  83
  84   input[type=radio][disabled] {
  85
  86     // light theme spec: Disabled: #000000, Opacity  26%
  87     @include radio-color($black, 0.26);
  88
  89   }
  90 }
  91
  92 @keyframes rippleOn {
  93   0% {
  94     opacity: 0;
  95   }
  96   50% {
  97     opacity: 0.2;
  98   }
  99   100% {
 100     opacity: 0;
 101   }
 102 }
 103
 104 @keyframes rippleOff {
 105   0% {
 106     opacity: 0;
 107   }
 108   50% {
 109     opacity: 0.2;
 110   }
 111   100% {
 112     opacity: 0;
 113   }
 114 }