Advertisement
Guest User

Untitled

a guest
Jun 25th, 2018
217
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 8.30 KB | None | 0 0
  1. ###ЭТО ТЕСТОВЫЙ ФАЙЛ
  2. .button-container {
  3.   text-align: center;
  4. }
  5.  
  6. fieldset {
  7.   margin: 0 0 3rem;
  8.   padding: 0;
  9.   border: none;
  10. }
  11.  
  12. .form-radio,
  13. .form-group {
  14.   position: relative;
  15.   margin-top: 2.25rem;
  16.   margin-bottom: 2.25rem;
  17. }
  18.  
  19. .form-inline > .form-group,
  20. .form-inline > .btn {
  21.   display: inline-block;
  22.   margin-bottom: 0;
  23. }
  24.  
  25. .form-help {
  26.   margin-top: 0.125rem;
  27.   margin-left: 0.125rem;
  28.   color: #b3b3b3;
  29.   font-size: 0.8rem;
  30. }
  31. .checkbox .form-help, .form-radio .form-help, .form-group .form-help {
  32.   position: absolute;
  33.   width: 100%;
  34. }
  35. .checkbox .form-help {
  36.   position: relative;
  37.   margin-bottom: 1rem;
  38. }
  39. .form-radio .form-help {
  40.   padding-top: 0.25rem;
  41.   margin-top: -1rem;
  42. }
  43.  
  44. .form-group input {
  45.   height: 1.9rem;
  46. }
  47. .form-group textarea {
  48.   resize: none;
  49. }
  50. .form-group select {
  51.   width: 100%;
  52.   font-size: 1rem;
  53.   height: 1.6rem;
  54.   padding: 0.125rem 0.125rem 0.0625rem;
  55.   background: none;
  56.   border: none;
  57.   line-height: 1.6;
  58.   box-shadow: none;
  59. }
  60. .form-group .control-label {
  61.   position: absolute;
  62.   top: 0.25rem;
  63.   pointer-events: none;
  64.   padding-left: 0.125rem;
  65.   z-index: 1;
  66.   color: #b3b3b3;
  67.   font-size: 1rem;
  68.   font-weight: normal;
  69.   -webkit-transition: all 0.28s ease;
  70.   transition: all 0.28s ease;
  71. }
  72. .form-group .bar {
  73.   position: relative;
  74.   border-bottom: 0.0625rem solid #999;
  75.   display: block;
  76. }
  77. .form-group .bar::before {
  78.   content: '';
  79.   height: 0.125rem;
  80.   width: 0;
  81.   left: 50%;
  82.   bottom: -0.0625rem;
  83.   position: absolute;
  84.   background: #337ab7;
  85.   -webkit-transition: left 0.28s ease, width 0.28s ease;
  86.   transition: left 0.28s ease, width 0.28s ease;
  87.   z-index: 2;
  88. }
  89. .form-group input,
  90. .form-group textarea {
  91.   display: block;
  92.   background: none;
  93.   padding: 0.125rem 0.125rem 0.0625rem;
  94.   font-size: 1rem;
  95.   border-width: 0;
  96.   border-color: transparent;
  97.   line-height: 1.9;
  98.   width: 100%;
  99.   color: transparent;
  100.   -webkit-transition: all 0.28s ease;
  101.   transition: all 0.28s ease;
  102.   box-shadow: none;
  103. }
  104. .form-group input[type="file"] {
  105.   line-height: 1;
  106. }
  107. .form-group input[type="file"] ~ .bar {
  108.   display: none;
  109. }
  110. .form-group select,
  111. .form-group input:focus,
  112. .form-group input:valid,
  113. .form-group input.form-file,
  114. .form-group input.has-value,
  115. .form-group textarea:focus,
  116. .form-group textarea:valid,
  117. .form-group textarea.form-file,
  118. .form-group textarea.has-value {
  119.   color: #333;
  120. }
  121. .form-group select ~ .control-label,
  122. .form-group input:focus ~ .control-label,
  123. .form-group input:valid ~ .control-label,
  124. .form-group input.form-file ~ .control-label,
  125. .form-group input.has-value ~ .control-label,
  126. .form-group textarea:focus ~ .control-label,
  127. .form-group textarea:valid ~ .control-label,
  128. .form-group textarea.form-file ~ .control-label,
  129. .form-group textarea.has-value ~ .control-label {
  130.   font-size: 0.8rem;
  131.   color: gray;
  132.   top: -1rem;
  133.   left: 0;
  134. }
  135. .form-group select:focus,
  136. .form-group input:focus,
  137. .form-group textarea:focus {
  138.   outline: none;
  139. }
  140. .form-group select:focus ~ .control-label,
  141. .form-group input:focus ~ .control-label,
  142. .form-group textarea:focus ~ .control-label {
  143.   color: #337ab7;
  144. }
  145. .form-group select:focus ~ .bar::before,
  146. .form-group input:focus ~ .bar::before,
  147. .form-group textarea:focus ~ .bar::before {
  148.   width: 100%;
  149.   left: 0;
  150. }
  151.  
  152. .checkbox label,
  153. .form-radio label {
  154.   position: relative;
  155.   cursor: pointer;
  156.   padding-left: 2rem;
  157.   text-align: left;
  158.   color: #333;
  159.   display: block;
  160. }
  161. .checkbox input,
  162. .form-radio input {
  163.   width: auto;
  164.   opacity: 0.00000001;
  165.   position: absolute;
  166.   left: 0;
  167. }
  168.  
  169. .radio {
  170.   margin-bottom: 1rem;
  171. }
  172. .radio .helper {
  173.   position: absolute;
  174.   top: -0.25rem;
  175.   left: -0.25rem;
  176.   cursor: pointer;
  177.   display: block;
  178.   font-size: 1rem;
  179.   -webkit-user-select: none;
  180.      -moz-user-select: none;
  181.       -ms-user-select: none;
  182.           user-select: none;
  183.   color: #999;
  184. }
  185. .radio .helper::before, .radio .helper::after {
  186.   content: '';
  187.   position: absolute;
  188.   left: 0;
  189.   top: 0;
  190.   margin: 0.25rem;
  191.   width: 1rem;
  192.   height: 1rem;
  193.   -webkit-transition: -webkit-transform 0.28s ease;
  194.   transition: -webkit-transform 0.28s ease;
  195.   transition: transform 0.28s ease;
  196.   transition: transform 0.28s ease, -webkit-transform 0.28s ease;
  197.   border-radius: 50%;
  198.   border: 0.125rem solid currentColor;
  199. }
  200. .radio .helper::after {
  201.   -webkit-transform: scale(0);
  202.           transform: scale(0);
  203.   background-color: #337ab7;
  204.   border-color: #337ab7;
  205. }
  206. .radio label:hover .helper {
  207.   color: #337ab7;
  208. }
  209. .radio input:checked ~ .helper::after {
  210.   -webkit-transform: scale(0.5);
  211.           transform: scale(0.5);
  212. }
  213. .radio input:checked ~ .helper::before {
  214.   color: #337ab7;
  215. }
  216.  
  217. .checkbox {
  218.   margin-top: 3rem;
  219.   margin-bottom: 1rem;
  220. }
  221. .checkbox .helper {
  222.   color: #999;
  223.   position: absolute;
  224.   top: 0;
  225.   left: 0;
  226.   width: 1rem;
  227.   height: 1rem;
  228.   z-index: 0;
  229.   border: 0.125rem solid currentColor;
  230.   border-radius: 0.0625rem;
  231.   -webkit-transition: border-color 0.28s ease;
  232.   transition: border-color 0.28s ease;
  233. }
  234. .checkbox .helper::before, .checkbox .helper::after {
  235.   position: absolute;
  236.   height: 0;
  237.   width: 0.2rem;
  238.   background-color: #337ab7;
  239.   display: block;
  240.   -webkit-transform-origin: left top;
  241.           transform-origin: left top;
  242.   border-radius: 0.25rem;
  243.   content: '';
  244.   -webkit-transition: opacity 0.28s ease, height 0s linear 0.28s;
  245.   transition: opacity 0.28s ease, height 0s linear 0.28s;
  246.   opacity: 0;
  247. }
  248. .checkbox .helper::before {
  249.   top: 0.65rem;
  250.   left: 0.38rem;
  251.   -webkit-transform: rotate(-135deg);
  252.           transform: rotate(-135deg);
  253.   box-shadow: 0 0 0 0.0625rem #fff;
  254. }
  255. .checkbox .helper::after {
  256.   top: 0.3rem;
  257.   left: 0;
  258.   -webkit-transform: rotate(-45deg);
  259.           transform: rotate(-45deg);
  260. }
  261. .checkbox label:hover .helper {
  262.   color: #337ab7;
  263. }
  264. .checkbox input:checked ~ .helper {
  265.   color: #337ab7;
  266. }
  267. .checkbox input:checked ~ .helper::after, .checkbox input:checked ~ .helper::before {
  268.   opacity: 1;
  269.   -webkit-transition: height 0.28s ease;
  270.   transition: height 0.28s ease;
  271. }
  272. .checkbox input:checked ~ .helper::after {
  273.   height: 0.5rem;
  274. }
  275. .checkbox input:checked ~ .helper::before {
  276.   height: 1.2rem;
  277.   -webkit-transition-delay: 0.28s;
  278.           transition-delay: 0.28s;
  279. }
  280.  
  281. .radio + .radio,
  282. .checkbox + .checkbox {
  283.   margin-top: 1rem;
  284. }
  285.  
  286. .has-error .legend.legend, .has-error.form-group .control-label.control-label {
  287.   color: #d9534f;
  288. }
  289. .has-error.form-group .form-help,
  290. .has-error.form-group .helper, .has-error.checkbox .form-help,
  291. .has-error.checkbox .helper, .has-error.radio .form-help,
  292. .has-error.radio .helper, .has-error.form-radio .form-help,
  293. .has-error.form-radio .helper {
  294.   color: #d9534f;
  295. }
  296. .has-error .bar::before {
  297.   background: #d9534f;
  298.   left: 0;
  299.   width: 100%;
  300. }
  301.  
  302. .button {
  303.   position: relative;
  304.   background: currentColor;
  305.   border: 1px solid currentColor;
  306.   font-size: 1.1rem;
  307.   color: #4f93ce;
  308.   margin: 3rem 0;
  309.   padding: 0.75rem 3rem;
  310.   cursor: pointer;
  311.   -webkit-transition: background-color 0.28s ease, color 0.28s ease, box-shadow 0.28s ease;
  312.   transition: background-color 0.28s ease, color 0.28s ease, box-shadow 0.28s ease;
  313.   overflow: hidden;
  314.   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  315. }
  316. .button span {
  317.   color: #fff;
  318.   position: relative;
  319.   z-index: 1;
  320. }
  321. .button::before {
  322.   content: '';
  323.   position: absolute;
  324.   background: #071017;
  325.   border: 50vh solid #1d4567;
  326.   width: 30vh;
  327.   height: 30vh;
  328.   border-radius: 50%;
  329.   display: block;
  330.   top: 50%;
  331.   left: 50%;
  332.   z-index: 0;
  333.   opacity: 1;
  334.   -webkit-transform: translate(-50%, -50%) scale(0);
  335.           transform: translate(-50%, -50%) scale(0);
  336. }
  337. .button:hover {
  338.   color: #337ab7;
  339.   box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
  340. }
  341. .button:active::before, .button:focus::before {
  342.   -webkit-transition: opacity 0.28s ease 0.364s, -webkit-transform 1.12s ease;
  343.   transition: opacity 0.28s ease 0.364s, -webkit-transform 1.12s ease;
  344.   transition: transform 1.12s ease, opacity 0.28s ease 0.364s;
  345.   transition: transform 1.12s ease, opacity 0.28s ease 0.364s, -webkit-transform 1.12s ease;
  346.   -webkit-transform: translate(-50%, -50%) scale(1);
  347.           transform: translate(-50%, -50%) scale(1);
  348.   opacity: 0;
  349. }
  350. .button:focus {
  351.   outline: none;
  352. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement