You are here

pretty_elements.css in Pretty Checkbox Radio 8

/* General styles for all elements. */
.pretty-element {
  margin: 5px;
  float: left;
}

/* Initial styles for the unselected elements */
.pretty-element label {
  display: block;
  border: 1px solid #c5c5c5;
  background-color: #f6f6f6;
  color: #454545;
  min-height: 20px;
  padding: 2px 13px;
  margin: 0;
  font-weight: normal;
  border-radius: 3px;
}

/* Styles for elements onHover state */
.pretty-element label:hover {
  background-color: #ededed;
  color: #2b2b2b;
}

/* Styles for elements onChecked state */
.pretty-element input:checked + label {
  color: #fff;
  background-color: #337ab7;
  border-color: #2e6da4;
}

/* Hide default inputs */
.pretty-element input[type="radio"],
.pretty-element input[type="checkbox"] {
  display: none;
}

/* Show description below the elements */
.field--widget-options-pretty .description {
  clear: both;
}

File

css/pretty_elements.css
View source
  1. /* General styles for all elements. */
  2. .pretty-element {
  3. margin: 5px;
  4. float: left;
  5. }
  6. /* Initial styles for the unselected elements */
  7. .pretty-element label {
  8. display: block;
  9. border: 1px solid #c5c5c5;
  10. background-color: #f6f6f6;
  11. color: #454545;
  12. min-height: 20px;
  13. padding: 2px 13px;
  14. margin: 0;
  15. font-weight: normal;
  16. border-radius: 3px;
  17. }
  18. /* Styles for elements onHover state */
  19. .pretty-element label:hover {
  20. background-color: #ededed;
  21. color: #2b2b2b;
  22. }
  23. /* Styles for elements onChecked state */
  24. .pretty-element input:checked + label {
  25. color: #fff;
  26. background-color: #337ab7;
  27. border-color: #2e6da4;
  28. }
  29. /* Hide default inputs */
  30. .pretty-element input[type="radio"],
  31. .pretty-element input[type="checkbox"] {
  32. display: none;
  33. }
  34. /* Show description below the elements */
  35. .field--widget-options-pretty .description {
  36. clear: both;
  37. }