_radio.scss 899 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. /**
  2. * Radio Button Inputs
  3. * --------------------------------------------------
  4. */
  5. .item-radio {
  6. padding: 0;
  7. &:hover {
  8. cursor: pointer;
  9. }
  10. }
  11. .item-radio .item-content {
  12. /* give some room to the right for the checkmark icon */
  13. padding-right: $item-padding * 4;
  14. }
  15. .item-radio .radio-icon {
  16. /* checkmark icon will be hidden by default */
  17. position: absolute;
  18. top: 0;
  19. right: 0;
  20. z-index: $z-index-item-radio;
  21. visibility: hidden;
  22. padding: $item-padding - 2;
  23. height: 100%;
  24. font-size: 24px;
  25. }
  26. .item-radio input {
  27. /* hide any radio button inputs elements (the ugly circles) */
  28. position: absolute;
  29. left: -9999px;
  30. &:checked + .radio-content .item-content {
  31. /* style the item content when its checked */
  32. background: #f7f7f7;
  33. }
  34. &:checked + .radio-content .radio-icon {
  35. /* show the checkmark icon when its checked */
  36. visibility: visible;
  37. }
  38. }