jquery-labelauty.css 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. /*!
  2. * LABELAUTY jQuery Plugin Styles
  3. *
  4. * @file: jquery-labelauty.css
  5. * @author: Francisco Neves (@fntneves)
  6. * @site: www.francisconeves.com
  7. * @license: MIT License
  8. */
  9. /* Prevent text and blocks selection */
  10. input.labelauty + label ::selection { background-color: rgba(255, 255, 255, 0); }
  11. input.labelauty + label ::-moz-selection { background-color: rgba(255, 255, 255, 0); }
  12. /* Hide original checkboxes. They are ugly! */
  13. input.labelauty { display: none !important; }
  14. /*
  15. * Let's style the input
  16. * Feel free to work with it as you wish!
  17. */
  18. input.labelauty + label
  19. {
  20. display: table;
  21. font-size: 11px;
  22. padding: 10px;
  23. background-color: #efefef;
  24. color: #b3b3b3;
  25. cursor: pointer;
  26. border-radius: 3px 3px 3px 3px;
  27. -moz-border-radius: 3px 3px 3px 3px;
  28. -webkit-border-radius: 3px 3px 3px 3px;
  29. transition: background-color 0.25s;
  30. -moz-transition: background-color 0.25s;
  31. -webkit-transition: background-color 0.25s;
  32. -o-transition: background-color 0.25s;
  33. -moz-user-select: none;
  34. -khtml-user-select: none;
  35. -webkit-user-select: none;
  36. -o-user-select: none;
  37. }
  38. /* Stylish text inside label */
  39. input.labelauty + label > span.labelauty-unchecked,
  40. input.labelauty + label > span.labelauty-checked
  41. {
  42. display: inline-block;
  43. line-height: 16px;
  44. vertical-align: bottom;
  45. }
  46. /* Stylish icons inside label */
  47. input.labelauty + label > span.labelauty-unchecked-image,
  48. input.labelauty + label > span.labelauty-checked-image
  49. {
  50. display: inline-block;
  51. width: 16px;
  52. height: 16px;
  53. vertical-align: bottom;
  54. background-repeat: no-repeat;
  55. background-position: left center;
  56. transition: background-image 0.5s linear;
  57. -moz-transition: background-image 0.5s linear;
  58. -webkit-transition: background-image 0.5s linear;
  59. -o-transition: background-image 0.5s linear;
  60. }
  61. /* When there's a label, add a little margin to the left */
  62. input.labelauty + label > span.labelauty-unchecked-image + span.labelauty-unchecked,
  63. input.labelauty + label > span.labelauty-checked-image + span.labelauty-checked
  64. {
  65. margin-left: 7px;
  66. }
  67. /* When not Checked */
  68. input.labelauty:not(:checked):not([disabled]) + label:hover
  69. {
  70. background-color: #eaeaea;
  71. color: #a7a7a7;
  72. }
  73. input.labelauty:not(:checked) + label > span.labelauty-checked-image
  74. {
  75. display: none;
  76. }
  77. input.labelauty:not(:checked) + label > span.labelauty-checked
  78. {
  79. display: none;
  80. }
  81. /* When Checked */
  82. input.labelauty:checked + label
  83. {
  84. background-color: #3498db;
  85. color: #ffffff;
  86. }
  87. input.labelauty:checked:not([disabled]) + label:hover
  88. {
  89. background-color: #72c5fd;
  90. }
  91. input.labelauty:checked + label > span.labelauty-unchecked-image
  92. {
  93. display: none;
  94. }
  95. input.labelauty:checked + label > span.labelauty-unchecked
  96. {
  97. display: none;
  98. }
  99. input.labelauty:checked + label > span.labelauty-checked
  100. {
  101. display: inline-block;
  102. }
  103. input.labelauty.no-label:checked + label > span.labelauty-checked
  104. {
  105. display: block;
  106. }
  107. /* When Disabled */
  108. input.labelauty[disabled] + label
  109. {
  110. opacity: 0.5;
  111. }
  112. /* Add a background to (un)checked images */
  113. input.labelauty + label > span.labelauty-unchecked-image
  114. {
  115. background-image: url( ../images/input-unchecked.png );
  116. }
  117. input.labelauty + label > span.labelauty-checked-image
  118. {
  119. background-image: url( ../images/input-checked.png );
  120. }