jquery-labelauty.css 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. /* Prevent text and blocks selection */
  2. input.labelauty + label ::-moz-selection {
  3. background-color: rgba(255, 255, 255, 0); }
  4. input.labelauty + label ::selection {
  5. background-color: rgba(255, 255, 255, 0); }
  6. input.labelauty + label ::-moz-selection {
  7. background-color: rgba(255, 255, 255, 0); }
  8. /* Hide original checkboxes. They are ugly! */
  9. input.labelauty {
  10. display: none !important; }
  11. /*
  12. * Let's style the input
  13. * Feel free to work with it as you wish!
  14. */
  15. input.labelauty + label {
  16. display: table;
  17. padding: 10px 12px;
  18. margin-bottom: 0;
  19. font-size: 1rem;
  20. line-height: 1;
  21. color: #76838f;
  22. cursor: pointer;
  23. -webkit-user-select: none;
  24. -moz-user-select: none;
  25. -ms-user-select: none;
  26. user-select: none;
  27. background-color: #f3f7f9;
  28. border-radius: 0.215rem;
  29. transition: background-color .25s; }
  30. /* Stylish text inside label */
  31. input.labelauty + label > span.labelauty-unchecked, input.labelauty + label > span.labelauty-checked {
  32. display: inline-block;
  33. line-height: 16px;
  34. vertical-align: bottom; }
  35. /* Stylish icons inside label */
  36. input.labelauty + label > span.labelauty-unchecked-image, input.labelauty + label > span.labelauty-checked-image {
  37. display: inline-block;
  38. width: 16px;
  39. height: 16px;
  40. vertical-align: bottom;
  41. background-repeat: no-repeat;
  42. background-position: left center;
  43. transition: background-image .5s linear; }
  44. /* When there's a label, add a little margin to the left */
  45. input.labelauty + label > span.labelauty-unchecked-image + span.labelauty-unchecked, input.labelauty + label > span.labelauty-checked-image + span.labelauty-checked {
  46. margin-left: 7px; }
  47. /* When not Checked */
  48. input.labelauty:not(:checked):not([disabled]) + label:hover {
  49. color: #76838f;
  50. background-color: #e4eaec; }
  51. input.labelauty:not(:checked) + label > span.labelauty-checked-image {
  52. display: none; }
  53. input.labelauty:not(:checked) + label > span.labelauty-checked {
  54. display: none; }
  55. /* When Checked */
  56. input.labelauty:checked + label {
  57. color: #fff;
  58. background-color: #3e8ef7; }
  59. input.labelauty:checked:not([disabled]) + label:hover {
  60. background-color: #589ffc; }
  61. input.labelauty:checked + label > span.labelauty-unchecked-image {
  62. display: none; }
  63. input.labelauty:checked + label > span.labelauty-unchecked {
  64. display: none; }
  65. input.labelauty:checked + label > span.labelauty-checked {
  66. display: inline-block; }
  67. input.labelauty.no-label:checked + label > span.labelauty-checked {
  68. display: block; }
  69. /* When Disabled */
  70. input.labelauty[disabled] + label {
  71. opacity: .7; }
  72. /* Add a background to (un)checked images */
  73. input.labelauty + label > span.labelauty-unchecked-image {
  74. background-image: url("input-unchecked.png"); }
  75. input.labelauty + label > span.labelauty-checked-image {
  76. background-image: url("input-checked.png"); }
  77. input.to-labelauty + label {
  78. min-width: 160px; }
  79. input.to-labelauty-icon + label {
  80. display: inline-block;
  81. padding: 8px; }
  82. input.to-labelauty-icon + label + span {
  83. margin-left: 7px; }