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.

150 lines
3.7 KiB

  1. /*!
  2. * Angular Material Design
  3. * https://github.com/angular/material
  4. * @license MIT
  5. * v1.1.1
  6. */
  7. .md-inline-form md-checkbox {
  8. margin: 19px 0 18px; }
  9. md-checkbox {
  10. box-sizing: border-box;
  11. display: inline-block;
  12. margin-bottom: 16px;
  13. white-space: nowrap;
  14. cursor: pointer;
  15. outline: none;
  16. -webkit-user-select: none;
  17. -moz-user-select: none;
  18. -ms-user-select: none;
  19. user-select: none;
  20. position: relative;
  21. min-width: 20px;
  22. min-height: 20px;
  23. margin-left: 0;
  24. margin-right: 16px; }
  25. [dir=rtl] md-checkbox {
  26. margin-left: 16px; }
  27. [dir=rtl] md-checkbox {
  28. margin-right: 0; }
  29. md-checkbox:last-of-type {
  30. margin-left: 0;
  31. margin-right: 0; }
  32. md-checkbox.md-focused:not([disabled]) .md-container:before {
  33. left: -8px;
  34. top: -8px;
  35. right: -8px;
  36. bottom: -8px; }
  37. md-checkbox.md-focused:not([disabled]):not(.md-checked) .md-container:before {
  38. background-color: rgba(0, 0, 0, 0.12); }
  39. md-checkbox.md-align-top-left > div.md-container {
  40. top: 12px; }
  41. md-checkbox .md-container {
  42. position: absolute;
  43. top: 50%;
  44. -webkit-transform: translateY(-50%);
  45. transform: translateY(-50%);
  46. box-sizing: border-box;
  47. display: inline-block;
  48. width: 20px;
  49. height: 20px;
  50. left: 0;
  51. right: auto; }
  52. [dir=rtl] md-checkbox .md-container {
  53. left: auto; }
  54. [dir=rtl] md-checkbox .md-container {
  55. right: 0; }
  56. md-checkbox .md-container:before {
  57. box-sizing: border-box;
  58. background-color: transparent;
  59. border-radius: 50%;
  60. content: '';
  61. position: absolute;
  62. display: block;
  63. height: auto;
  64. left: 0;
  65. top: 0;
  66. right: 0;
  67. bottom: 0;
  68. -webkit-transition: all 0.5s;
  69. transition: all 0.5s;
  70. width: auto; }
  71. md-checkbox .md-container:after {
  72. box-sizing: border-box;
  73. content: '';
  74. position: absolute;
  75. top: -10px;
  76. right: -10px;
  77. bottom: -10px;
  78. left: -10px; }
  79. md-checkbox .md-container .md-ripple-container {
  80. position: absolute;
  81. display: block;
  82. width: auto;
  83. height: auto;
  84. left: -15px;
  85. top: -15px;
  86. right: -15px;
  87. bottom: -15px; }
  88. md-checkbox .md-icon {
  89. box-sizing: border-box;
  90. -webkit-transition: 240ms;
  91. transition: 240ms;
  92. position: absolute;
  93. top: 0;
  94. left: 0;
  95. width: 20px;
  96. height: 20px;
  97. border-width: 2px;
  98. border-style: solid;
  99. border-radius: 2px; }
  100. md-checkbox.md-checked .md-icon {
  101. border-color: transparent; }
  102. md-checkbox.md-checked .md-icon:after {
  103. box-sizing: border-box;
  104. -webkit-transform: rotate(45deg);
  105. transform: rotate(45deg);
  106. position: absolute;
  107. left: 4.66667px;
  108. top: 0.22222px;
  109. display: table;
  110. width: 6.66667px;
  111. height: 13.33333px;
  112. border-width: 2px;
  113. border-style: solid;
  114. border-top: 0;
  115. border-left: 0;
  116. content: ''; }
  117. md-checkbox[disabled] {
  118. cursor: default; }
  119. md-checkbox.md-indeterminate .md-icon:after {
  120. box-sizing: border-box;
  121. position: absolute;
  122. top: 50%;
  123. left: 50%;
  124. -webkit-transform: translate(-50%, -50%);
  125. transform: translate(-50%, -50%);
  126. display: table;
  127. width: 12px;
  128. height: 2px;
  129. border-width: 2px;
  130. border-style: solid;
  131. border-top: 0;
  132. border-left: 0;
  133. content: ''; }
  134. md-checkbox .md-label {
  135. box-sizing: border-box;
  136. position: relative;
  137. display: inline-block;
  138. vertical-align: middle;
  139. white-space: normal;
  140. -webkit-user-select: text;
  141. -moz-user-select: text;
  142. -ms-user-select: text;
  143. user-select: text;
  144. margin-left: 30px;
  145. margin-right: 0; }
  146. [dir=rtl] md-checkbox .md-label {
  147. margin-left: 0; }
  148. [dir=rtl] md-checkbox .md-label {
  149. margin-right: 30px; }