Details | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 1 | espaco | 1 | // Floating & Form Line Input |
| 2 | |||
| 3 | @mixin input-variant($color) { |
||
| 4 | |||
| 5 | .form-control { |
||
| 6 | |||
| 7 | border-bottom: 1px solid $color; |
||
| 8 | |||
| 9 | &.edited:not([readonly]), |
||
| 10 | &.form-control-static, |
||
| 11 | &:focus:not([readonly]), |
||
| 12 | &.focus:not([readonly]) { |
||
| 13 | |||
| 14 | ~ label, |
||
| 15 | ~ .form-control-focus { |
||
| 16 | &:after { |
||
| 17 | background: $color; |
||
| 18 | } |
||
| 19 | } |
||
| 20 | |||
| 21 | ~ label { |
||
| 22 | color: $color; |
||
| 23 | } |
||
| 24 | |||
| 25 | ~ i { |
||
| 26 | color: $color; |
||
| 27 | } |
||
| 28 | |||
| 29 | ~ .help-block { |
||
| 30 | color: $color; |
||
| 31 | } |
||
| 32 | } |
||
| 33 | } |
||
| 34 | |||
| 35 | .input-group-addon { |
||
| 36 | color: $color; |
||
| 37 | border-bottom: 1px solid $color; |
||
| 38 | } |
||
| 39 | |||
| 40 | label { |
||
| 41 | color: $color; |
||
| 42 | } |
||
| 43 | } |
||
| 44 | |||
| 45 | .form-group.form-md-line-input { |
||
| 46 | position: relative; |
||
| 47 | margin: 0 0 35px 0; |
||
| 48 | padding-top: 20px; |
||
| 49 | |||
| 50 | //&:last-child { remove to fix mobile mode issue |
||
| 51 | //margin-bottom: 10px; |
||
| 52 | //} |
||
| 53 | |||
| 54 | .form-horizontal & { |
||
| 55 | padding-top: 10px; |
||
| 56 | margin-bottom: 20px; |
||
| 57 | margin: 0 -15px 20px -15px; |
||
| 58 | } |
||
| 59 | |||
| 60 | .form-horizontal & > label { |
||
| 61 | padding-top: 5px; |
||
| 62 | font-size: $input-md-label-font-size; |
||
| 63 | color: $input-md-label-color; |
||
| 64 | @include opacity($input-md-label-opacity); |
||
| 65 | } |
||
| 66 | |||
| 67 | .form-control { |
||
| 68 | background: none; |
||
| 69 | border: 0; |
||
| 70 | border-bottom: 1px solid $input-md-input-border; |
||
| 71 | @include placeholder($input-md-placeholder); |
||
| 72 | @include border-radius(0); |
||
| 73 | color: $input-md-color; |
||
| 74 | box-shadow: none; |
||
| 75 | |||
| 76 | &.form-control-static { |
||
| 77 | border-bottom: 0; |
||
| 78 | } |
||
| 79 | |||
| 80 | padding-left: 0; |
||
| 81 | padding-right: 0; |
||
| 82 | font-size: 14px; |
||
| 83 | |||
| 84 | &.input-sm { |
||
| 85 | font-size: 14px; |
||
| 86 | padding: 6px 0; |
||
| 87 | } |
||
| 88 | |||
| 89 | &.input-lg { |
||
| 90 | font-size: 20px; |
||
| 91 | padding: 14px 0; |
||
| 92 | } |
||
| 93 | |||
| 94 | ~ label, |
||
| 95 | ~ .form-control-focus { |
||
| 96 | width: 100%; |
||
| 97 | position: absolute; |
||
| 98 | left: 0; |
||
| 99 | bottom: 0; |
||
| 100 | pointer-events: none; |
||
| 101 | |||
| 102 | .form-horizontal & { |
||
| 103 | width: auto; |
||
| 104 | left: 15px; |
||
| 105 | right: 15px; |
||
| 106 | } |
||
| 107 | |||
| 108 | &:after { |
||
| 109 | content: ''; |
||
| 110 | position: absolute; |
||
| 111 | z-index: 5; |
||
| 112 | bottom: 0; |
||
| 113 | left: 50%; |
||
| 114 | width: 0; |
||
| 115 | height: 2px; |
||
| 116 | width: 0; |
||
| 117 | visibility: hidden; |
||
| 118 | transition: 0.2s ease all; |
||
| 119 | } |
||
| 120 | } |
||
| 121 | |||
| 122 | ~ label { |
||
| 123 | top: 0; |
||
| 124 | margin-bottom: 0; |
||
| 125 | font-size: $input-md-label-font-size; |
||
| 126 | color: $input-md-label-color; |
||
| 127 | @include opacity($input-md-label-opacity); |
||
| 128 | } |
||
| 129 | |||
| 130 | ~ .help-block-error { |
||
| 131 | @include opacity(1); |
||
| 132 | } |
||
| 133 | |||
| 134 | &.edited:not([readonly]), |
||
| 135 | &:focus:not([readonly]) { |
||
| 136 | ~ label, |
||
| 137 | ~ .form-control-focus { |
||
| 138 | color: $input-md-label-color; |
||
| 139 | |||
| 140 | &:after { |
||
| 141 | visibility: visible; |
||
| 142 | left: 0; |
||
| 143 | width: 100%; |
||
| 144 | background: $input-md-focus-border; |
||
| 145 | } |
||
| 146 | } |
||
| 147 | |||
| 148 | ~ label { |
||
| 149 | @include opacity(1); |
||
| 150 | } |
||
| 151 | |||
| 152 | ~ .help-block { |
||
| 153 | color: $input-md-focus-border; |
||
| 154 | @include opacity(1); |
||
| 155 | } |
||
| 156 | |||
| 157 | ~ .help-block-error { |
||
| 158 | @include opacity(0); |
||
| 159 | } |
||
| 160 | } |
||
| 161 | |||
| 162 | &.edited:not([readonly]):not(:focus) { |
||
| 163 | ~ .help-block { |
||
| 164 | @include opacity(0); |
||
| 165 | } |
||
| 166 | |||
| 167 | ~ .help-block-error { |
||
| 168 | @include opacity(0); |
||
| 169 | } |
||
| 170 | } |
||
| 171 | |||
| 172 | &[readonly], |
||
| 173 | &[disabled], |
||
| 174 | fieldset[disabled] & { |
||
| 175 | background: none; |
||
| 176 | cursor: not-allowed; |
||
| 177 | border-bottom: 1px dashed $input-border; |
||
| 178 | } |
||
| 179 | } |
||
| 180 | |||
| 181 | &.form-md-floating-label { |
||
| 182 | .form-control { |
||
| 183 | |||
| 184 | ~ label { |
||
| 185 | font-size: 16px; |
||
| 186 | top: 25px; |
||
| 187 | transition: 0.2s ease all; |
||
| 188 | color: $input-md-placeholder; |
||
| 189 | } |
||
| 190 | |||
| 191 | &[readonly], |
||
| 192 | &.edited, |
||
| 193 | &.form-control-static, |
||
| 194 | &:focus:not([readonly]), |
||
| 195 | &.focus:not([readonly]) { |
||
| 196 | ~ label { |
||
| 197 | top: 0; |
||
| 198 | font-size: 13px; |
||
| 199 | } |
||
| 200 | } |
||
| 201 | |||
| 202 | &.input-sm { |
||
| 203 | ~ label { |
||
| 204 | font-size: 14px; |
||
| 205 | top: 24px; |
||
| 206 | } |
||
| 207 | |||
| 208 | &[readonly], |
||
| 209 | &.form-control-static, |
||
| 210 | &.edited, |
||
| 211 | &:focus:not([readonly]), |
||
| 212 | &.focus:not([readonly]) { |
||
| 213 | ~ label { |
||
| 214 | top: 0; |
||
| 215 | font-size: 13px; |
||
| 216 | } |
||
| 217 | } |
||
| 218 | } |
||
| 219 | |||
| 220 | &.input-lg { |
||
| 221 | ~ label { |
||
| 222 | font-size: 20px; |
||
| 223 | top: 30px; |
||
| 224 | } |
||
| 225 | |||
| 226 | &[readonly], |
||
| 227 | &.edited, |
||
| 228 | &.form-control-static, |
||
| 229 | &:focus:not([readonly]), |
||
| 230 | &.focus:not([readonly]) { |
||
| 231 | ~ label { |
||
| 232 | top: 0; |
||
| 233 | font-size: 13px; |
||
| 234 | } |
||
| 235 | } |
||
| 236 | } |
||
| 237 | } |
||
| 238 | |||
| 239 | .input-icon > label { |
||
| 240 | padding-left: 34px; |
||
| 241 | } |
||
| 242 | |||
| 243 | .input-icon.right > label { |
||
| 244 | padding-left: 0; |
||
| 245 | padding-right: 34px; |
||
| 246 | } |
||
| 247 | |||
| 248 | .input-group.left-addon { |
||
| 249 | label { |
||
| 250 | padding-left: 34px; |
||
| 251 | } |
||
| 252 | } |
||
| 253 | |||
| 254 | .input-group.right-addon { |
||
| 255 | label { |
||
| 256 | padding-right: 34px; |
||
| 257 | } |
||
| 258 | } |
||
| 259 | } |
||
| 260 | |||
| 261 | & + .input-icon { |
||
| 262 | padding-top: 0; |
||
| 263 | } |
||
| 264 | |||
| 265 | |||
| 266 | // Help block |
||
| 267 | |||
| 268 | .help-block { |
||
| 269 | position: absolute; |
||
| 270 | margin: 2px 0 0 0; |
||
| 271 | @include opacity(0); |
||
| 272 | font-size: 13px; |
||
| 273 | } |
||
| 274 | |||
| 275 | // Input icons |
||
| 276 | |||
| 277 | > .input-icon { |
||
| 278 | |||
| 279 | > i { |
||
| 280 | left: 0; |
||
| 281 | bottom: 0; |
||
| 282 | margin: 9px 2px 10px 10px; |
||
| 283 | color: $input-md-label-color; |
||
| 284 | } |
||
| 285 | |||
| 286 | &.input-icon-lg > i { |
||
| 287 | top: 6px; |
||
| 288 | } |
||
| 289 | |||
| 290 | &.input-icon-sm > i { |
||
| 291 | top: -1px; |
||
| 292 | } |
||
| 293 | |||
| 294 | .form-control { |
||
| 295 | padding-left: 34px; |
||
| 296 | } |
||
| 297 | |||
| 298 | > label { |
||
| 299 | margin-top: -20px; |
||
| 300 | } |
||
| 301 | |||
| 302 | &.right { |
||
| 303 | .form-control { |
||
| 304 | padding-left: 0; |
||
| 305 | padding-right: 34px; |
||
| 306 | } |
||
| 307 | |||
| 308 | > i { |
||
| 309 | left: auto; |
||
| 310 | right: 8px; |
||
| 311 | margin: 11px 2px 10px 10px; |
||
| 312 | } |
||
| 313 | } |
||
| 314 | } |
||
| 315 | |||
| 316 | // Input groups |
||
| 317 | |||
| 318 | & + .input-group { |
||
| 319 | padding-top: 0; |
||
| 320 | } |
||
| 321 | |||
| 322 | .input-group { |
||
| 323 | padding-top: 0; |
||
| 324 | |||
| 325 | > label { |
||
| 326 | margin-top: -20px; |
||
| 327 | } |
||
| 328 | |||
| 329 | .input-group-addon { |
||
| 330 | @include border-radius(0); |
||
| 331 | background: none; |
||
| 332 | border: 0; |
||
| 333 | border-bottom: 1px solid $input-border; |
||
| 334 | } |
||
| 335 | |||
| 336 | & + .input-group-control { |
||
| 337 | padding-top: 0; |
||
| 338 | } |
||
| 339 | |||
| 340 | .input-group-control { |
||
| 341 | padding-top: 0; |
||
| 342 | position: relative; |
||
| 343 | display: table-cell; |
||
| 344 | vertical-align: bottom; |
||
| 345 | |||
| 346 | > label { |
||
| 347 | margin-top: -20px; |
||
| 348 | } |
||
| 349 | } |
||
| 350 | |||
| 351 | .input-group-btn { |
||
| 352 | .btn { |
||
| 353 | @include border-radius($general-border-radius); |
||
| 354 | } |
||
| 355 | } |
||
| 356 | |||
| 357 | .input-group-btn.btn-left .btn { |
||
| 358 | margin-right: 10px; |
||
| 359 | } |
||
| 360 | |||
| 361 | .input-group-btn.btn-right .btn { |
||
| 362 | margin-left: 10px; |
||
| 363 | } |
||
| 364 | |||
| 365 | .help-block { |
||
| 366 | margin-top: 35px; |
||
| 367 | } |
||
| 368 | |||
| 369 | &.input-group-sm .help-block { |
||
| 370 | margin-top: 30px; |
||
| 371 | } |
||
| 372 | |||
| 373 | &.input-group-lg .help-block { |
||
| 374 | margin-top: 47px; |
||
| 375 | } |
||
| 376 | } |
||
| 377 | |||
| 378 | // States |
||
| 379 | |||
| 380 | &.has-success { |
||
| 381 | @include input-variant($state-success-text); |
||
| 382 | } |
||
| 383 | |||
| 384 | &.has-warning { |
||
| 385 | @include input-variant($state-warning-text); |
||
| 386 | } |
||
| 387 | |||
| 388 | &.has-error { |
||
| 389 | @include input-variant($state-danger-text); |
||
| 390 | } |
||
| 391 | |||
| 392 | &.has-info { |
||
| 393 | @include input-variant($state-info-text); |
||
| 394 | } |
||
| 395 | } |
||
| 396 | |||
| 397 | // Inline forms |
||
| 398 | |||
| 399 | .form-inline { |
||
| 400 | .form-md-line-input { |
||
| 401 | margin: 0; |
||
| 402 | padding-top: 0; |
||
| 403 | margin-right: 20px; |
||
| 404 | |||
| 405 | > .input-icon { |
||
| 406 | padding: 0; |
||
| 407 | } |
||
| 408 | } |
||
| 409 | } |
||
| 410 | |||
| 411 | // Horizontal forms |
||
| 412 | |||
| 413 | .form-horizontal { |
||
| 414 | .form-group.form-md-line-input { |
||
| 415 | .input-icon { |
||
| 416 | .form-control { |
||
| 417 | padding-left: 33px; |
||
| 418 | } |
||
| 419 | |||
| 420 | > i { |
||
| 421 | top: 0; |
||
| 422 | } |
||
| 423 | |||
| 424 | &.right { |
||
| 425 | .form-control { |
||
| 426 | padding-left: 0; |
||
| 427 | padding-right: 33px; |
||
| 428 | } |
||
| 429 | } |
||
| 430 | |||
| 431 | > .form-control-focus { |
||
| 432 | left: 0 !important; |
||
| 433 | right: 0 !important; |
||
| 434 | } |
||
| 435 | } |
||
| 436 | } |
||
| 437 | |||
| 438 | .form-group.form-md-line-input { |
||
| 439 | .input-group { |
||
| 440 | padding-top: 0; |
||
| 441 | |||
| 442 | > .input-group-btn { |
||
| 443 | .btn { |
||
| 444 | margin-bottom: 0 !important; |
||
| 445 | } |
||
| 446 | } |
||
| 447 | |||
| 448 | > .input-group-control { |
||
| 449 | padding-top: 0; |
||
| 450 | |||
| 451 | > .form-control-focus { |
||
| 452 | left: 0 !important; |
||
| 453 | right: 0 !important; |
||
| 454 | } |
||
| 455 | } |
||
| 456 | |||
| 457 | > .form-control-focus { |
||
| 458 | left: 0 !important; |
||
| 459 | right: 0 !important; |
||
| 460 | } |
||
| 461 | } |
||
| 462 | } |
||
| 463 | } |