Login.css (2623B)
1 /** 2 * React Starter Kit (https://www.reactstarterkit.com/) 3 * 4 * Copyright © 2014-present Kriasoft, LLC. All rights reserved. 5 * 6 * This source code is licensed under the MIT license found in the 7 * LICENSE.txt file in the root directory of this source tree. 8 */ 9 @import '../../components/variables.css'; 10 11 .root { 12 padding-left: 20px; 13 padding-right: 20px; 14 } 15 16 .container { 17 margin: 0 auto; 18 padding: 0 0 40px; 19 max-width: 380px; 20 } 21 22 .lead { 23 font-size: 1.25em; 24 } 25 26 .formGroup { 27 margin-bottom: 15px; 28 } 29 30 .label { 31 display: inline-block; 32 margin-bottom: 5px; 33 max-width: 100%; 34 font-weight: 700; 35 } 36 37 .input { 38 display: block; 39 box-sizing: border-box; 40 padding: 10px 16px; 41 width: 100%; 42 height: 46px; 43 outline: 0; 44 border: 1px solid #ccc; 45 border-radius: 0; 46 background: #fff; 47 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 48 color: #616161; 49 font-size: 18px; 50 line-height: 1.3333333; 51 transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; 52 } 53 54 .input:focus { 55 border-color: #0074c2; 56 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 116, 194, 0.6); 57 } 58 59 .button { 60 display: block; 61 box-sizing: border-box; 62 margin: 0; 63 padding: 10px 16px; 64 width: 100%; 65 outline: 0; 66 border: 1px solid #373277; 67 border-radius: 0; 68 background: #373277; 69 color: #fff; 70 text-align: center; 71 text-decoration: none; 72 font-size: 18px; 73 line-height: 1.3333333; 74 cursor: pointer; 75 } 76 77 .button:hover { 78 background: rgba(54, 50, 119, 0.8); 79 } 80 81 .button:focus { 82 border-color: #0074c2; 83 box-shadow: 0 0 8px rgba(0, 116, 194, 0.6); 84 } 85 86 .facebook { 87 border-color: #3b5998; 88 background: #3b5998; 89 composes: button; 90 } 91 92 .facebook:hover { 93 background: #2d4373; 94 } 95 96 .google { 97 border-color: #dd4b39; 98 background: #dd4b39; 99 composes: button; 100 } 101 102 .google:hover { 103 background: #c23321; 104 } 105 106 .twitter { 107 border-color: #55acee; 108 background: #55acee; 109 composes: button; 110 } 111 112 .twitter:hover { 113 background: #2795e9; 114 } 115 116 .icon { 117 display: inline-block; 118 margin: -2px 12px -2px 0; 119 width: 20px; 120 height: 20px; 121 vertical-align: middle; 122 fill: currentColor; 123 } 124 125 .lineThrough { 126 position: relative; 127 z-index: 1; 128 display: block; 129 margin-bottom: 15px; 130 width: 100%; 131 color: #757575; 132 text-align: center; 133 font-size: 80%; 134 } 135 136 .lineThrough::before { 137 position: absolute; 138 top: 50%; 139 left: 50%; 140 z-index: -1; 141 margin-top: -5px; 142 margin-left: -20px; 143 width: 40px; 144 height: 10px; 145 background-color: #fff; 146 content: ''; 147 } 148 149 .lineThrough::after { 150 position: absolute; 151 top: 49%; 152 z-index: -2; 153 display: block; 154 width: 100%; 155 border-bottom: 1px solid #ddd; 156 content: ''; 157 }