angular-ui-switch.css 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. .switch {
  2. background: #fff;
  3. border: 1px solid #dfdfdf;
  4. position: relative;
  5. display: inline-block;
  6. box-sizing: content-box;
  7. overflow: visible;
  8. width: 52px;
  9. height: 30px;
  10. padding: 0px;
  11. margin: 0px;
  12. border-radius: 20px;
  13. cursor: pointer;
  14. box-shadow: rgb(223, 223, 223) 0px 0px 0px 0px inset;
  15. transition: 0.3s ease-out all;
  16. -webkit-transition: 0.3s ease-out all;
  17. top: -1px;
  18. }
  19. /*adding a wide width for larger switch text*/
  20. .switch.wide {
  21. width:80px;
  22. }
  23. .switch small {
  24. background: #fff;
  25. border-radius: 100%;
  26. box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  27. width: 30px;
  28. height: 30px;
  29. position: absolute;
  30. top: 0px;
  31. left: 0px;
  32. transition: 0.3s ease-out all;
  33. -webkit-transition: 0.3s ease-out all;
  34. }
  35. .switch.checked {
  36. background: rgb(100, 189, 99);
  37. border-color: rgb(100, 189, 99);
  38. }
  39. .switch.checked small {
  40. left: 22px;
  41. }
  42. /*wider switch text moves small further to the right*/
  43. .switch.wide.checked small {
  44. left:52px;
  45. }
  46. /*styles for switch-text*/
  47. .switch .switch-text {
  48. font-family:Arial, Helvetica, sans-serif;
  49. font-size:13px;
  50. }
  51. .switch .off {
  52. display:block;
  53. position: absolute;
  54. right: 10%;
  55. top: 25%;
  56. z-index: 0;
  57. color:#A9A9A9;
  58. }
  59. .switch .on {
  60. display:none;
  61. z-index: 0;
  62. color:#fff;
  63. position: absolute;
  64. top: 25%;
  65. left: 9%;
  66. }
  67. .switch.checked .off {
  68. display:none;
  69. }
  70. .switch.checked .on {
  71. display:block;
  72. }