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.

146 lines
4.1 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-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: auto;
  58. margin-left: 8px; }
  59. md-switch:not([disabled]) .md-dragging,
  60. md-switch:not([disabled]).md-dragging .md-container {
  61. cursor: -webkit-grabbing;
  62. cursor: grabbing; }
  63. md-switch.md-focused:not([disabled]) .md-thumb:before {
  64. left: -8px;
  65. top: -8px;
  66. right: -8px;
  67. bottom: -8px; }
  68. md-switch.md-focused:not([disabled]):not(.md-checked) .md-thumb:before {
  69. background-color: rgba(0, 0, 0, 0.12); }
  70. md-switch .md-label {
  71. border-color: transparent;
  72. border-width: 0;
  73. float: left; }
  74. md-switch .md-bar {
  75. left: 1px;
  76. width: 34px;
  77. top: 5px;
  78. height: 14px;
  79. border-radius: 8px;
  80. position: absolute; }
  81. md-switch .md-thumb-container {
  82. top: 2px;
  83. left: 0;
  84. width: 16px;
  85. position: absolute;
  86. -webkit-transform: translate3d(0, 0, 0);
  87. transform: translate3d(0, 0, 0);
  88. z-index: 1; }
  89. md-switch.md-checked .md-thumb-container {
  90. -webkit-transform: translate3d(100%, 0, 0);
  91. transform: translate3d(100%, 0, 0); }
  92. md-switch .md-thumb {
  93. position: absolute;
  94. margin: 0;
  95. left: 0;
  96. top: 0;
  97. outline: none;
  98. height: 20px;
  99. width: 20px;
  100. border-radius: 50%;
  101. 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); }
  102. md-switch .md-thumb:before {
  103. background-color: transparent;
  104. border-radius: 50%;
  105. content: '';
  106. position: absolute;
  107. display: block;
  108. height: auto;
  109. left: 0;
  110. top: 0;
  111. right: 0;
  112. bottom: 0;
  113. -webkit-transition: all 0.5s;
  114. transition: all 0.5s;
  115. width: auto; }
  116. md-switch .md-thumb .md-ripple-container {
  117. position: absolute;
  118. display: block;
  119. width: auto;
  120. height: auto;
  121. left: -20px;
  122. top: -20px;
  123. right: -20px;
  124. bottom: -20px; }
  125. md-switch:not(.md-dragging) .md-bar,
  126. md-switch:not(.md-dragging) .md-thumb-container,
  127. md-switch:not(.md-dragging) .md-thumb {
  128. -webkit-transition: all 0.08s linear;
  129. transition: all 0.08s linear;
  130. -webkit-transition-property: background-color, -webkit-transform;
  131. transition-property: background-color, -webkit-transform;
  132. transition-property: transform, background-color;
  133. transition-property: transform, background-color, -webkit-transform; }
  134. md-switch:not(.md-dragging) .md-bar,
  135. md-switch:not(.md-dragging) .md-thumb {
  136. -webkit-transition-delay: 0.05s;
  137. transition-delay: 0.05s; }
  138. @media screen and (-ms-high-contrast: active) {
  139. md-switch.md-default-theme .md-bar {
  140. background-color: #666; }
  141. md-switch.md-default-theme.md-checked .md-bar {
  142. background-color: #9E9E9E; }
  143. md-switch.md-default-theme .md-thumb {
  144. background-color: #fff; } }