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.

153 lines
4.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-inline-form md-switch {
  8. margin-top: 18px;
  9. margin-bottom: 19px; }
  10. md-switch {
  11. margin: 16px 0;
  12. white-space: nowrap;
  13. cursor: pointer;
  14. outline: none;
  15. -webkit-user-select: none;
  16. -moz-user-select: none;
  17. -ms-user-select: none;
  18. user-select: none;
  19. height: 30px;
  20. line-height: 28px;
  21. -webkit-box-align: center;
  22. -webkit-align-items: center;
  23. align-items: center;
  24. display: -webkit-box;
  25. display: -webkit-flex;
  26. display: flex;
  27. margin-left: inherit;
  28. margin-right: 16px; }
  29. [dir=rtl] md-switch {
  30. margin-left: 16px; }
  31. [dir=rtl] md-switch {
  32. margin-right: inherit; }
  33. md-switch:last-of-type {
  34. margin-left: inherit;
  35. margin-right: 0; }
  36. [dir=rtl] md-switch:last-of-type {
  37. margin-left: 0; }
  38. [dir=rtl] md-switch:last-of-type {
  39. margin-right: inherit; }
  40. md-switch[disabled] {
  41. cursor: default; }
  42. md-switch[disabled] .md-container {
  43. cursor: default; }
  44. md-switch .md-container {
  45. cursor: -webkit-grab;
  46. cursor: grab;
  47. width: 36px;
  48. height: 24px;
  49. position: relative;
  50. -webkit-user-select: none;
  51. -moz-user-select: none;
  52. -ms-user-select: none;
  53. user-select: none;
  54. margin-right: 8px;
  55. float: left; }
  56. [dir=rtl] md-switch .md-container {
  57. margin-right: 0px;
  58. margin-left: 8px; }
  59. md-switch.md-inverted .md-container {
  60. margin-right: initial;
  61. margin-left: 8px; }
  62. [dir=rtl] md-switch.md-inverted .md-container {
  63. margin-right: 8px; }
  64. [dir=rtl] md-switch.md-inverted .md-container {
  65. margin-left: initial; }
  66. md-switch:not([disabled]) .md-dragging,
  67. md-switch:not([disabled]).md-dragging .md-container {
  68. cursor: -webkit-grabbing;
  69. cursor: grabbing; }
  70. md-switch.md-focused:not([disabled]) .md-thumb:before {
  71. left: -8px;
  72. top: -8px;
  73. right: -8px;
  74. bottom: -8px; }
  75. md-switch.md-focused:not([disabled]):not(.md-checked) .md-thumb:before {
  76. background-color: rgba(0, 0, 0, 0.12); }
  77. md-switch .md-label {
  78. border-color: transparent;
  79. border-width: 0;
  80. float: left; }
  81. md-switch .md-bar {
  82. left: 1px;
  83. width: 34px;
  84. top: 5px;
  85. height: 14px;
  86. border-radius: 8px;
  87. position: absolute; }
  88. md-switch .md-thumb-container {
  89. top: 2px;
  90. left: 0;
  91. width: 16px;
  92. position: absolute;
  93. -webkit-transform: translate3d(0, 0, 0);
  94. transform: translate3d(0, 0, 0);
  95. z-index: 1; }
  96. md-switch.md-checked .md-thumb-container {
  97. -webkit-transform: translate3d(100%, 0, 0);
  98. transform: translate3d(100%, 0, 0); }
  99. md-switch .md-thumb {
  100. position: absolute;
  101. margin: 0;
  102. left: 0;
  103. top: 0;
  104. outline: none;
  105. height: 20px;
  106. width: 20px;
  107. border-radius: 50%;
  108. box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12); }
  109. md-switch .md-thumb:before {
  110. background-color: transparent;
  111. border-radius: 50%;
  112. content: '';
  113. position: absolute;
  114. display: block;
  115. height: auto;
  116. left: 0;
  117. top: 0;
  118. right: 0;
  119. bottom: 0;
  120. -webkit-transition: all 0.5s;
  121. transition: all 0.5s;
  122. width: auto; }
  123. md-switch .md-thumb .md-ripple-container {
  124. position: absolute;
  125. display: block;
  126. width: auto;
  127. height: auto;
  128. left: -20px;
  129. top: -20px;
  130. right: -20px;
  131. bottom: -20px; }
  132. md-switch:not(.md-dragging) .md-bar,
  133. md-switch:not(.md-dragging) .md-thumb-container,
  134. md-switch:not(.md-dragging) .md-thumb {
  135. -webkit-transition: all 0.08s linear;
  136. transition: all 0.08s linear;
  137. -webkit-transition-property: background-color, -webkit-transform;
  138. transition-property: background-color, -webkit-transform;
  139. transition-property: transform, background-color;
  140. transition-property: transform, background-color, -webkit-transform; }
  141. md-switch:not(.md-dragging) .md-bar,
  142. md-switch:not(.md-dragging) .md-thumb {
  143. -webkit-transition-delay: 0.05s;
  144. transition-delay: 0.05s; }
  145. @media screen and (-ms-high-contrast: active) {
  146. md-switch.md-default-theme .md-bar {
  147. background-color: #666; }
  148. md-switch.md-default-theme.md-checked .md-bar {
  149. background-color: #9E9E9E; }
  150. md-switch.md-default-theme .md-thumb {
  151. background-color: #fff; } }