github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/dist/components/input.css (about) 1 /*! 2 * # Semantic UI x.x - Input 3 * http://github.com/semantic-org/semantic-ui/ 4 * 5 * 6 * Copyright 2014 Contributors 7 * Released under the MIT license 8 * http://opensource.org/licenses/MIT 9 * 10 */ 11 12 13 /******************************* 14 Standard 15 *******************************/ 16 17 18 /*-------------------- 19 Inputs 20 ---------------------*/ 21 22 .ui.input { 23 position: relative; 24 display: -webkit-inline-box; 25 display: -webkit-inline-flex; 26 display: -ms-inline-flexbox; 27 display: inline-flex; 28 color: rgba(0, 0, 0, 0.8); 29 } 30 .ui.input input { 31 margin: 0em; 32 -webkit-box-flex: 1; 33 -webkit-flex-grow: 1; 34 -ms-flex-positive: 1; 35 flex-grow: 1; 36 outline: none; 37 -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 38 text-align: left; 39 line-height: 1.2142em; 40 font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif; 41 padding: 0.67861em 1em; 42 background: #ffffff; 43 border: 1px solid rgba(0, 0, 0, 0.15); 44 color: rgba(0, 0, 0, 0.8); 45 border-radius: 0.2857rem; 46 -webkit-transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; 47 transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; 48 box-shadow: none; 49 } 50 51 /*-------------------- 52 Placeholder 53 ---------------------*/ 54 55 56 /* browsers require these rules separate */ 57 .ui.input input::-webkit-input-placeholder { 58 color: rgba(0, 0, 0, 0.4); 59 } 60 .ui.input input::-moz-placeholder { 61 color: rgba(0, 0, 0, 0.4); 62 } 63 64 65 /******************************* 66 States 67 *******************************/ 68 69 70 /*-------------------- 71 Active 72 ---------------------*/ 73 74 .ui.input input:active, 75 .ui.input.down input { 76 border-color: rgba(0, 0, 0, 0.3); 77 background: #fafafa; 78 color: rgba(0, 0, 0, 0.8); 79 box-shadow: none; 80 } 81 82 /*-------------------- 83 Loading 84 ---------------------*/ 85 86 .ui.loading.loading.input > i.icon:before { 87 position: absolute; 88 content: ''; 89 top: 50%; 90 left: 50%; 91 margin: -0.64285em 0em 0em -0.64285em; 92 width: 1.2857em; 93 height: 1.2857em; 94 border-radius: 500rem; 95 border: 0.2em solid rgba(0, 0, 0, 0.1); 96 } 97 .ui.loading.loading.input > i.icon:after { 98 position: absolute; 99 content: ''; 100 top: 50%; 101 left: 50%; 102 margin: -0.64285em 0em 0em -0.64285em; 103 width: 1.2857em; 104 height: 1.2857em; 105 -webkit-animation: button-spin 0.6s linear; 106 animation: button-spin 0.6s linear; 107 -webkit-animation-iteration-count: infinite; 108 animation-iteration-count: infinite; 109 border-radius: 500rem; 110 border-color: #aaaaaa transparent transparent; 111 border-style: solid; 112 border-width: 0.2em; 113 box-shadow: 0px 0px 0px 1px transparent; 114 } 115 116 /*-------------------- 117 Focus 118 ---------------------*/ 119 120 .ui.input.focus input, 121 .ui.input input:focus { 122 border-color: rgba(39, 41, 43, 0.3); 123 background: #ffffff; 124 color: rgba(0, 0, 0, 0.8); 125 box-shadow: none; 126 } 127 .ui.input.focus input input::-webkit-input-placeholder, 128 .ui.input input:focus input::-webkit-input-placeholder { 129 color: rgba(0, 0, 0, 0.8); 130 } 131 .ui.input.focus input input::-moz-placeholder, 132 .ui.input input:focus input::-moz-placeholder { 133 color: rgba(0, 0, 0, 0.8); 134 } 135 136 /*-------------------- 137 Error 138 ---------------------*/ 139 140 .ui.input.error input { 141 background-color: #fff0f0; 142 border-color: #dbb1b1; 143 color: #d95c5c; 144 box-shadow: none; 145 } 146 147 /* Error Placeholder */ 148 .ui.input.error input ::-webkit-input-placeholder { 149 color: rgba(255, 80, 80, 0.4); 150 } 151 .ui.input.error input ::-moz-placeholder { 152 color: rgba(255, 80, 80, 0.4); 153 } 154 155 /* Focused Error Placeholder */ 156 .ui.input.error input :focus::-webkit-input-placeholder { 157 color: rgba(255, 80, 80, 0.7); 158 } 159 .ui.input.error input :focus::-moz-placeholder { 160 color: rgba(255, 80, 80, 0.7); 161 } 162 163 164 /******************************* 165 Variations 166 *******************************/ 167 168 169 /*-------------------- 170 Transparent 171 ---------------------*/ 172 173 .ui.transparent.input input { 174 border-color: transparent; 175 background-color: transparent; 176 padding: 0em; 177 } 178 179 /* Transparent Icon */ 180 .ui.transparent.icon.input > i.icon { 181 width: 1.25em; 182 } 183 .ui.transparent.icon.input > input { 184 padding-left: 0em !important; 185 padding-right: 2em !important; 186 } 187 .ui.transparent[class*="left icon"].input > input { 188 padding-left: 0em !important; 189 padding-left: 2em !important; 190 } 191 192 /* Transparent Inverted */ 193 .ui.transparent.inverted.input input::-moz-placeholder { 194 color: rgba(255, 255, 255, 0.5); 195 } 196 .ui.transparent.inverted.input { 197 color: #ffffff; 198 } 199 .ui.transparent.inverted.input input { 200 color: inherit; 201 } 202 203 /*-------------------- 204 Icon 205 ---------------------*/ 206 207 .ui.icon.input > i.icon { 208 cursor: default; 209 position: absolute; 210 text-align: center; 211 top: 0px; 212 right: 0px; 213 margin: 0em; 214 height: 100%; 215 width: 2.82142em; 216 opacity: 0.5; 217 border-radius: 0em 0.2857rem 0.2857rem 0em; 218 -webkit-transition: opacity 0.3s ease; 219 transition: opacity 0.3s ease; 220 } 221 .ui.icon.input input { 222 padding-right: 2.82142em !important; 223 } 224 .ui.icon.input > i.icon:before, 225 .ui.icon.input > i.icon:after { 226 left: 0; 227 position: absolute; 228 text-align: center; 229 top: 50%; 230 width: 100%; 231 margin-top: -0.5em; 232 } 233 .ui.icon.input > i.link.icon { 234 cursor: pointer; 235 } 236 .ui.icon.input > i.circular.icon { 237 top: 0.35em; 238 right: 0.5em; 239 } 240 241 /* Left Icon Input */ 242 .ui[class*="left icon"].input > i.icon { 243 right: auto; 244 left: 1px; 245 border-radius: 0.2857rem 0em 0em 0.2857rem; 246 } 247 .ui[class*="left icon"].input > i.circular.icon { 248 right: auto; 249 left: 0.5em; 250 } 251 .ui[class*="left icon"].input > input { 252 padding-left: 2.82142em !important; 253 padding-right: 1em !important; 254 } 255 256 /* Focus */ 257 .ui.icon.input > input:focus ~ i.icon { 258 opacity: 1; 259 } 260 261 /*-------------------- 262 Labeled 263 ---------------------*/ 264 265 266 /* Adjacent Label */ 267 .ui.labeled.input { 268 display: -webkit-inline-box; 269 display: -webkit-inline-flex; 270 display: -ms-inline-flexbox; 271 display: inline-flex; 272 } 273 .ui.labeled.input > .label { 274 -webkit-box-flex: 0; 275 -webkit-flex-grow: 0; 276 -ms-flex-positive: 0; 277 flex-grow: 0; 278 margin: 0; 279 font-size: 1em; 280 } 281 .ui.labeled.input > .label:not(.corner) { 282 padding-top: 0.78571em; 283 padding-bottom: 0.78571em; 284 } 285 286 /* Fluid Labeled */ 287 .ui.fluid.labeled.input { 288 display: -webkit-box; 289 display: -webkit-flex; 290 display: -ms-flexbox; 291 display: flex; 292 } 293 294 /* Label on Left */ 295 .ui.labeled.input:not([class*="corner labeled"]):not([class*="right labeled"]) > input { 296 border-left: none; 297 border-top-left-radius: 0px; 298 border-bottom-left-radius: 0px; 299 } 300 .ui.labeled.input:not([class*="corner labeled"]):not([class*="right labeled"]) > .label { 301 border-top-right-radius: 0px; 302 border-bottom-right-radius: 0px; 303 } 304 305 /* Label on Right */ 306 .ui[class*="right labeled"].input > input { 307 border-right: none; 308 border-top-right-radius: 0px !important; 309 border-bottom-right-radius: 0px !important; 310 } 311 .ui[class*="right labeled"].input > .label { 312 border-top-left-radius: 0px; 313 border-bottom-left-radius: 0px; 314 } 315 316 /* Corner Label */ 317 .ui.labeled.input .corner.label { 318 top: 1px; 319 right: 1px; 320 font-size: 0.75em; 321 border-radius: 0em 0.2857rem 0em 0em; 322 } 323 .ui.labeled.input input { 324 padding-right: 2.5em !important; 325 } 326 327 /* Spacing with corner label */ 328 .ui[class*="corner labeled"].icon.input:not(.left) > input { 329 padding-right: 3.25em !important; 330 } 331 .ui[class*="corner labeled"].icon.input:not(.left) > .icon { 332 margin-right: 1.25em; 333 } 334 335 /*-------------------- 336 Action 337 ---------------------*/ 338 339 .ui.action.input { 340 display: -webkit-inline-box; 341 display: -webkit-inline-flex; 342 display: -ms-inline-flexbox; 343 display: inline-flex; 344 } 345 .ui.action.input > .button, 346 .ui.action.input > .buttons { 347 -webkit-box-flex: 0; 348 -webkit-flex-grow: 0; 349 -ms-flex-positive: 0; 350 flex-grow: 0; 351 } 352 .ui.action.input > .button, 353 .ui.action.input > .buttons > .button { 354 padding-top: 0.78571em; 355 padding-bottom: 0.78571em; 356 margin: 0; 357 } 358 359 /* Fluid */ 360 .ui.fluid.action.input { 361 display: -webkit-box; 362 display: -webkit-flex; 363 display: -ms-flexbox; 364 display: flex; 365 } 366 367 /* Button on Right */ 368 .ui.action.input:not([class*="left action"]) > input { 369 border-right: none; 370 border-top-right-radius: 0px !important; 371 border-bottom-right-radius: 0px !important; 372 } 373 .ui.action.input:not([class*="left action"]) > .button, 374 .ui.action.input:not([class*="left action"]) > .buttons > .button { 375 border-top-left-radius: 0px; 376 border-bottom-left-radius: 0px; 377 } 378 379 /* Button on Left */ 380 .ui[class*="left action"].input > .button, 381 .ui[class*="left action"].input > .buttons > .button { 382 border-top-right-radius: 0px; 383 border-bottom-right-radius: 0px; 384 } 385 .ui[class*="left action"].input > input { 386 border-left: none; 387 border-top-left-radius: 0px; 388 border-bottom-left-radius: 0px; 389 } 390 391 /*-------------------- 392 Inverted 393 ---------------------*/ 394 395 396 /* Standard */ 397 .ui.inverted.input input { 398 border: none; 399 } 400 401 /*-------------------- 402 Fluid 403 ---------------------*/ 404 405 .ui.fluid.input { 406 display: block; 407 } 408 409 /*-------------------- 410 Size 411 ---------------------*/ 412 413 .ui.mini.input { 414 font-size: 0.8125rem; 415 } 416 .ui.small.input { 417 font-size: 0.875rem; 418 } 419 .ui.input { 420 font-size: 1rem; 421 } 422 .ui.large.input { 423 font-size: 1.125rem; 424 } 425 .ui.big.input { 426 font-size: 1.25rem; 427 } 428 .ui.huge.input { 429 font-size: 1.375rem; 430 } 431 .ui.massive.input { 432 font-size: 1.5rem; 433 } 434 435 436 /******************************* 437 Theme Overrides 438 *******************************/ 439 440 441 442 /******************************* 443 Site Overrides 444 *******************************/ 445