You are here

Home » API reference » Voting API Reaction 8

votingapi_reaction.css in Voting API Reaction 8 

.votingapi-reaction-form .form-radios {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -5px;
}
.votingapi-reaction-form .form-radios input[type="radio"] {
  display: none;
}
.votingapi-reaction-form .form-radios label {
  display: block;
  margin: 0;
  cursor: pointer;
}
.votingapi-reaction-form .form-radios label .votingapi-reaction-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border: 1px solid rgb(238, 238, 238);
  border-radius: 5px;
  padding: 5px;
  margin: 0 5px;
  user-select: none;
}
.votingapi-reaction-form .form-radios label .votingapi-reaction-item > * {
  margin: 0 5px;
}
.votingapi-reaction-form .form-radios label .votingapi-reaction-image {
  width: 25px;
  height: 25px;
}
.votingapi-reaction-form .form-radios label .votingapi-reaction-count {
  text-align: center;
  padding-top: 5px;
}

/* selected reaction */
.votingapi-reaction-form .form-radios input[type="radio"]:checked + label {
  color: rgb(0, 113, 179);
}
.votingapi-reaction-form .form-radios input[type="radio"]:checked + label .votingapi-reaction-item {
  border-color: rgb(0, 113, 179);
  background-color: rgb(248, 248, 248);
}

/* selected reaction */
.votingapi-reaction-form .form-radios label:hover .votingapi-reaction-item {
  border-color: rgba(0, 143, 219, 0.2);
  background-color: rgba(0, 143, 219, 0.05);
}

/* hide buttons if js is active */
.js .votingapi-reaction-form input[type="submit"] {
  display: none;
}

File

css/votingapi_reaction.css
View source 
  1. .votingapi-reaction-form .form-radios {

  2.   display: flex;

  3.   flex-wrap: wrap;

  4.   margin: 0 -5px;

  5. }

  6. .votingapi-reaction-form .form-radios input[type="radio"] {

  7.   display: none;

  8. }

  9. .votingapi-reaction-form .form-radios label {

  10.   display: block;

  11.   margin: 0;

  12.   cursor: pointer;

  13. }

  14. .votingapi-reaction-form .form-radios label .votingapi-reaction-item {

  15.   display: flex;

  16.   flex-wrap: wrap;

  17.   align-items: center;

  18.   border: 1px solid rgb(238, 238, 238);

  19.   border-radius: 5px;

  20.   padding: 5px;

  21.   margin: 0 5px;

  22.   user-select: none;

  23. }

  24. .votingapi-reaction-form .form-radios label .votingapi-reaction-item > * {

  25.   margin: 0 5px;

  26. }

  27. .votingapi-reaction-form .form-radios label .votingapi-reaction-image {

  28.   width: 25px;

  29.   height: 25px;

  30. }

  31. .votingapi-reaction-form .form-radios label .votingapi-reaction-count {

  32.   text-align: center;

  33.   padding-top: 5px;

  34. }

  35. 

  36. /* selected reaction */

  37. .votingapi-reaction-form .form-radios input[type="radio"]:checked + label {

  38.   color: rgb(0, 113, 179);

  39. }

  40. .votingapi-reaction-form .form-radios input[type="radio"]:checked + label .votingapi-reaction-item {

  41.   border-color: rgb(0, 113, 179);

  42.   background-color: rgb(248, 248, 248);

  43. }

  44. 

  45. /* selected reaction */

  46. .votingapi-reaction-form .form-radios label:hover .votingapi-reaction-item {

  47.   border-color: rgba(0, 143, 219, 0.2);

  48.   background-color: rgba(0, 143, 219, 0.05);

  49. }

  50. 

  51. /* hide buttons if js is active */

  52. .js .votingapi-reaction-form input[type="submit"] {

  53.   display: none;

  54. }