You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

RadioToggle.css 1.9KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. /*
  2. * SonarQube
  3. * Copyright (C) 2009-2021 SonarSource SA
  4. * mailto:info AT sonarsource DOT com
  5. *
  6. * This program is free software; you can redistribute it and/or
  7. * modify it under the terms of the GNU Lesser General Public
  8. * License as published by the Free Software Foundation; either
  9. * version 3 of the License, or (at your option) any later version.
  10. *
  11. * This program is distributed in the hope that it will be useful,
  12. * but WITHOUT ANY WARRANTY; without even the implied warranty of
  13. * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
  14. * Lesser General Public License for more details.
  15. *
  16. * You should have received a copy of the GNU Lesser General Public License
  17. * along with this program; if not, write to the Free Software Foundation,
  18. * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
  19. */
  20. .radio-toggle {
  21. display: inline-block;
  22. vertical-align: middle;
  23. font-size: 0;
  24. white-space: nowrap;
  25. }
  26. .radio-toggle > li {
  27. display: inline-block;
  28. vertical-align: middle;
  29. font-size: var(--smallFontSize);
  30. }
  31. .radio-toggle > li:first-child > label {
  32. border-top-left-radius: 2px;
  33. border-bottom-left-radius: 2px;
  34. }
  35. .radio-toggle > li:last-child > label {
  36. border-top-right-radius: 2px;
  37. border-bottom-right-radius: 2px;
  38. }
  39. .radio-toggle > li + li > label {
  40. border-left: none;
  41. }
  42. .radio-toggle > li > label {
  43. display: inline-block;
  44. padding: 0 12px;
  45. margin: 0;
  46. border: 1px solid var(--darkBlue);
  47. color: var(--darkBlue);
  48. height: calc(var(--controlHeight) - 2px);
  49. line-height: calc(var(--controlHeight) - 2px);
  50. cursor: pointer;
  51. font-weight: 600;
  52. }
  53. .radio-toggle input[type='radio'] {
  54. display: none;
  55. }
  56. .radio-toggle input[type='radio']:checked + label {
  57. background-color: var(--darkBlue);
  58. color: #fff;
  59. }
  60. .radio-toggle input[type='radio']:disabled + label {
  61. color: var(--disableGrayText);
  62. border-color: var(--disableGrayBorder);
  63. background: var(--disableGrayBg);
  64. cursor: not-allowed;
  65. }