_iwb-checkbox.scss 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. 
  2. .iwb-checkbox {
  3. display: inline-block;
  4. position: relative;
  5. padding-left: 30px;
  6. color: $iwb-color;
  7. margin-bottom: 10px;
  8. cursor: pointer;
  9. font-size: .875rem;
  10. -webkit-transition: all 0.3s;
  11. transition: all 0.3s;
  12. cursor: pointer;
  13. > input {
  14. position: absolute;
  15. z-index: -1;
  16. opacity: 0;
  17. filter: alpha(opacity=0);
  18. }
  19. > span {
  20. position: relative;
  21. }
  22. > span:before {
  23. content: '';
  24. border-radius: 3px;
  25. background: none;
  26. position: absolute;
  27. top: 0;
  28. left: -24px;
  29. height: 18px;
  30. width: 18px;
  31. color: inherit;
  32. border: 1px solid;
  33. }
  34. > span:after {
  35. content: '';
  36. position: absolute;
  37. display: none;
  38. }
  39. input:checked ~ span:before {
  40. -webkit-transition: all 0.3s;
  41. transition: all 0.3s;
  42. background: none;
  43. }
  44. input:checked ~ span:after {
  45. display: block;
  46. top: 3px;
  47. left: -18px;
  48. width: 5px;
  49. height: 10px;
  50. border-color: inherit;
  51. border-style: solid;
  52. border-width: 0 2px 2px 0 !important;
  53. -webkit-transform: rotate(45deg);
  54. transform: rotate(45deg);
  55. }
  56. &.checkbox-solid {
  57. input:checked ~ span:before {
  58. -webkit-transition: all 0.3s;
  59. transition: all 0.3s;
  60. background: $iwb-color;
  61. }
  62. input:checked ~ span:after {
  63. border-color: #fff;
  64. }
  65. }
  66. @each $name, $color in $colors {
  67. @include iwb-checkbox-variant($name, $color);
  68. }
  69. }