Tikabum

Test CSS

Jan 18th, 2021 (edited)
725
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. .hide {
  2.    position: absolute !important;
  3.    top: -9999px !important;
  4.    left: -9999px !important;
  5. }
  6.  
  7. #firstDiv {
  8.     float:left;
  9.     //background:red;
  10. }
  11. #secondDiv {
  12.     float:left;
  13.     //background:white;
  14. }
  15. #thirdDiv {
  16.     float:left;
  17.     //background:black;
  18. }
  19.  
  20. .text-centered {
  21.     text-align: center;
  22.     font-weight: bold;
  23.     color: #700606;
  24.     size: large;
  25. }
  26.  
  27. .toggle {
  28.     margin-bottom: 20px;
  29. }
  30.  
  31. .toggle > input {
  32.     display: none;
  33. }
  34.  
  35. .toggle > label {
  36.     position: relative;
  37.     display: inline-block;
  38.     height: 15px;
  39.     width: 32px;
  40.     background-color: #ebebeb;
  41.     border: 2px #700606 solid;
  42.     border-radius: 50px;
  43.     cursor: pointer;
  44.     transition: all 0.3s ease;
  45. }
  46. .toggle > label:after {
  47.     position: absolute;
  48.     display: block;
  49.     width: 13px;
  50.     height: 13px;
  51.     border-radius: 50px;
  52.     background: #fff;
  53.     box-shadow: 0px 3px 3px rgba(0,0,0,0.05);
  54.     content: '';
  55.     transition: all 0.3s ease;
  56. }
  57. .toggle > label:active:after {
  58.     transform: scale(1.15, 0.85);
  59. }
  60. .toggle > input:checked ~ label {
  61.     background-color: #700606;
  62.     border-color: #700606;
  63. }
  64. .toggle > input:checked ~ label:after {
  65.     left: 18px;
  66. }
  67. .toggle > input:disabled ~ label {
  68.     background-color: #d5d5d5;
  69.     pointer-events: none;
  70. }
  71. .toggle > input:disabled ~ label:after {
  72.     background-color: rgba(255, 255, 255, 0.3);
  73. }
  74.  
  75.  
  76.  
  77.  
  78. .toggle_large {
  79.     margin-bottom: 20px;
  80. }
  81.  
  82. .toggle_large > input {
  83.     display: none;
  84. }
  85.  
  86. .toggle_large > label {
  87.     position: relative;
  88.     display: inline-block;
  89.     height: 28px;
  90.     width: 52px;
  91.     background-color: #ebebeb;
  92.     border: 3px #700606 solid;
  93.     border-radius: 100px;
  94.     cursor: pointer;
  95.     transition: all 0.3s ease;
  96. }
  97. .toggle_large > label:after {
  98.     position: absolute;
  99.     display: block;
  100.     width: 26px;
  101.     height: 26px;
  102.     border-radius: 100px;
  103.     background: #fff;
  104.     box-shadow: 0px 3px 3px rgba(0,0,0,0.05);
  105.     content: '';
  106.     transition: all 0.3s ease;
  107. }
  108. .toggle_large > label:active:after {
  109.     transform: scale(1.15, 0.85);
  110. }
  111. .toggle_large > input:checked ~ label {
  112.     background-color: #700606;
  113.     border-color: #700606;
  114. }
  115. .toggle_large > input:checked ~ label:after {
  116.     left: 26px;
  117. }
  118. .toggle_large > input:disabled ~ label {
  119.     background-color: #d5d5d5;
  120.     pointer-events: none;
  121. }
  122. .toggle_large > input:disabled ~ label:after {
  123.     background-color: rgba(255, 255, 255, 0.3);
  124. }
RAW Paste Data