_icheck-bootstrap.scss 3.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. //
  2. // Plugin: iCheck Bootstrap
  3. //
  4. // iCheck colors (theme colors)
  5. @each $name, $color in $theme-colors {
  6. .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):hover + label::before,
  7. .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
  8. border-color: #{$color};
  9. }
  10. .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):focus + label::before,
  11. .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):focus + input[type="hidden"] + label::before {
  12. border-color: #{$color};
  13. }
  14. .icheck-#{$name} > input:first-child:checked + label::before,
  15. .icheck-#{$name} > input:first-child:checked + input[type="hidden"] + label::before {
  16. background-color: #{$color};
  17. border-color: #{$color};
  18. }
  19. }
  20. // iCheck colors (colors)
  21. @each $name, $color in $colors {
  22. .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):hover + label::before,
  23. .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
  24. border-color: #{$color};
  25. }
  26. .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):focus + label::before,
  27. .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):focus + input[type="hidden"] + label::before {
  28. border-color: #{$color};
  29. }
  30. .icheck-#{$name} > input:first-child:checked + label::before,
  31. .icheck-#{$name} > input:first-child:checked + input[type="hidden"] + label::before {
  32. background-color: #{$color};
  33. border-color: #{$color};
  34. }
  35. }
  36. @include dark-mode () {
  37. [class*="icheck-"] > input:first-child:not(:checked) {
  38. + input[type="hidden"] + label::before,
  39. + label::before {
  40. border-color: $gray-600;
  41. }
  42. }
  43. // iCheck colors (theme colors)
  44. @each $name, $color in $theme-colors-alt {
  45. .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):hover + label::before,
  46. .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
  47. border-color: #{$color};
  48. }
  49. .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):focus + label::before,
  50. .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):focus + input[type="hidden"] + label::before {
  51. border-color: #{$color};
  52. }
  53. .icheck-#{$name} > input:first-child:checked + label::before,
  54. .icheck-#{$name} > input:first-child:checked + input[type="hidden"] + label::before {
  55. background-color: #{$color};
  56. border-color: #{$color};
  57. }
  58. }
  59. // iCheck colors (colors)
  60. @each $name, $color in $colors-alt {
  61. .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):hover + label::before,
  62. .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
  63. border-color: #{$color};
  64. }
  65. .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):focus + label::before,
  66. .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):focus + input[type="hidden"] + label::before {
  67. border-color: #{$color};
  68. }
  69. .icheck-#{$name} > input:first-child:checked + label::before,
  70. .icheck-#{$name} > input:first-child:checked + input[type="hidden"] + label::before {
  71. background-color: #{$color};
  72. border-color: #{$color};
  73. }
  74. }
  75. }