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.

144 lines
6.3 KiB

7 years ago
  1. /*!
  2. * Angular Material Design
  3. * https://github.com/angular/material
  4. * @license MIT
  5. * v1.1.3
  6. */
  7. md-radio-button {
  8. box-sizing: border-box;
  9. display: block;
  10. margin-bottom: 16px;
  11. white-space: nowrap;
  12. cursor: pointer;
  13. position: relative; }
  14. md-radio-button[disabled] {
  15. cursor: default; }
  16. md-radio-button[disabled] .md-container {
  17. cursor: default; }
  18. md-radio-button .md-container {
  19. position: absolute;
  20. top: 50%;
  21. -webkit-transform: translateY(-50%);
  22. transform: translateY(-50%);
  23. box-sizing: border-box;
  24. display: inline-block;
  25. width: 20px;
  26. height: 20px;
  27. cursor: pointer;
  28. left: 0;
  29. right: auto; }
  30. [dir=rtl] md-radio-button .md-container {
  31. left: auto; }
  32. [dir=rtl] md-radio-button .md-container {
  33. right: 0; }
  34. md-radio-button .md-container .md-ripple-container {
  35. position: absolute;
  36. display: block;
  37. width: auto;
  38. height: auto;
  39. left: -15px;
  40. top: -15px;
  41. right: -15px;
  42. bottom: -15px; }
  43. md-radio-button .md-container:before {
  44. box-sizing: border-box;
  45. background-color: transparent;
  46. border-radius: 50%;
  47. content: '';
  48. position: absolute;
  49. display: block;
  50. height: auto;
  51. left: 0;
  52. top: 0;
  53. right: 0;
  54. bottom: 0;
  55. -webkit-transition: all 0.5s;
  56. transition: all 0.5s;
  57. width: auto; }
  58. md-radio-button.md-align-top-left > div.md-container {
  59. top: 12px; }
  60. md-radio-button .md-off {
  61. box-sizing: border-box;
  62. position: absolute;
  63. top: 0;
  64. left: 0;
  65. width: 20px;
  66. height: 20px;
  67. border-style: solid;
  68. border-width: 2px;
  69. border-radius: 50%;
  70. -webkit-transition: border-color ease 0.28s;
  71. transition: border-color ease 0.28s; }
  72. md-radio-button .md-on {
  73. box-sizing: border-box;
  74. position: absolute;
  75. top: 0;
  76. left: 0;
  77. width: 20px;
  78. height: 20px;
  79. border-radius: 50%;
  80. -webkit-transition: -webkit-transform ease 0.28s;
  81. transition: -webkit-transform ease 0.28s;
  82. transition: transform ease 0.28s;
  83. transition: transform ease 0.28s, -webkit-transform ease 0.28s;
  84. -webkit-transform: scale(0);
  85. transform: scale(0); }
  86. md-radio-button.md-checked .md-on {
  87. -webkit-transform: scale(0.5);
  88. transform: scale(0.5); }
  89. md-radio-button .md-label {
  90. box-sizing: border-box;
  91. position: relative;
  92. display: inline-block;
  93. margin-left: 30px;
  94. margin-right: 0;
  95. vertical-align: middle;
  96. white-space: normal;
  97. pointer-events: none;
  98. width: auto; }
  99. [dir=rtl] md-radio-button .md-label {
  100. margin-left: 0; }
  101. [dir=rtl] md-radio-button .md-label {
  102. margin-right: 30px; }
  103. md-radio-group {
  104. /** Layout adjustments for the radio group. */ }
  105. md-radio-group.layout-column md-radio-button, md-radio-group.layout-xs-column md-radio-button, md-radio-group.layout-gt-xs-column md-radio-button, md-radio-group.layout-sm-column md-radio-button, md-radio-group.layout-gt-sm-column md-radio-button, md-radio-group.layout-md-column md-radio-button, md-radio-group.layout-gt-md-column md-radio-button, md-radio-group.layout-lg-column md-radio-button, md-radio-group.layout-gt-lg-column md-radio-button, md-radio-group.layout-xl-column md-radio-button {
  106. margin-bottom: 16px; }
  107. md-radio-group.layout-row md-radio-button, md-radio-group.layout-xs-row md-radio-button, md-radio-group.layout-gt-xs-row md-radio-button, md-radio-group.layout-sm-row md-radio-button, md-radio-group.layout-gt-sm-row md-radio-button, md-radio-group.layout-md-row md-radio-button, md-radio-group.layout-gt-md-row md-radio-button, md-radio-group.layout-lg-row md-radio-button, md-radio-group.layout-gt-lg-row md-radio-button, md-radio-group.layout-xl-row md-radio-button {
  108. margin-top: 0;
  109. margin-bottom: 0;
  110. margin-left: 0;
  111. margin-right: 16px; }
  112. [dir=rtl] md-radio-group.layout-row md-radio-button, [dir=rtl] md-radio-group.layout-xs-row md-radio-button, [dir=rtl] md-radio-group.layout-gt-xs-row md-radio-button, [dir=rtl] md-radio-group.layout-sm-row md-radio-button, [dir=rtl] md-radio-group.layout-gt-sm-row md-radio-button, [dir=rtl] md-radio-group.layout-md-row md-radio-button, [dir=rtl] md-radio-group.layout-gt-md-row md-radio-button, [dir=rtl] md-radio-group.layout-lg-row md-radio-button, [dir=rtl] md-radio-group.layout-gt-lg-row md-radio-button, [dir=rtl] md-radio-group.layout-xl-row md-radio-button {
  113. margin-left: 16px; }
  114. [dir=rtl] md-radio-group.layout-row md-radio-button, [dir=rtl] md-radio-group.layout-xs-row md-radio-button, [dir=rtl] md-radio-group.layout-gt-xs-row md-radio-button, [dir=rtl] md-radio-group.layout-sm-row md-radio-button, [dir=rtl] md-radio-group.layout-gt-sm-row md-radio-button, [dir=rtl] md-radio-group.layout-md-row md-radio-button, [dir=rtl] md-radio-group.layout-gt-md-row md-radio-button, [dir=rtl] md-radio-group.layout-lg-row md-radio-button, [dir=rtl] md-radio-group.layout-gt-lg-row md-radio-button, [dir=rtl] md-radio-group.layout-xl-row md-radio-button {
  115. margin-right: 0; }
  116. md-radio-group.layout-row md-radio-button:last-of-type, md-radio-group.layout-xs-row md-radio-button:last-of-type, md-radio-group.layout-gt-xs-row md-radio-button:last-of-type, md-radio-group.layout-sm-row md-radio-button:last-of-type, md-radio-group.layout-gt-sm-row md-radio-button:last-of-type, md-radio-group.layout-md-row md-radio-button:last-of-type, md-radio-group.layout-gt-md-row md-radio-button:last-of-type, md-radio-group.layout-lg-row md-radio-button:last-of-type, md-radio-group.layout-gt-lg-row md-radio-button:last-of-type, md-radio-group.layout-xl-row md-radio-button:last-of-type {
  117. margin-left: 0;
  118. margin-right: 0; }
  119. md-radio-group:focus {
  120. outline: none; }
  121. md-radio-group.md-focused .md-checked .md-container:before {
  122. left: -8px;
  123. top: -8px;
  124. right: -8px;
  125. bottom: -8px; }
  126. md-radio-group[disabled] md-radio-button {
  127. cursor: default; }
  128. md-radio-group[disabled] md-radio-button .md-container {
  129. cursor: default; }
  130. .md-inline-form md-radio-group {
  131. margin: 18px 0 19px; }
  132. .md-inline-form md-radio-group md-radio-button {
  133. display: inline-block;
  134. height: 30px;
  135. padding: 2px;
  136. box-sizing: border-box;
  137. margin-top: 0;
  138. margin-bottom: 0; }
  139. @media screen and (-ms-high-contrast: active) {
  140. md-radio-button.md-default-theme .md-on {
  141. background-color: #fff; } }