.form-control { border: 0; border-bottom: 1px solid @input-border; color: #32393F; padding: 5px; width: 100%; font-size: 13px; background-color: transparent; } select.form-control { -webkit-appearance: none; -moz-appearance: none; border-radius: 0; background: url(../../img/select-caret.svg) no-repeat bottom 7px right; } /*-------------------------- Input Group ----------------------------*/ .input-group { position: relative; &:not(:last-child) { margin-bottom: 25px; } label:not(.ig-label) { font-size: 13px; display: block; margin-bottom: 10px; } } .ig-label { position: absolute; text-align: center; bottom: 7px; left: 0; width: 100%; .transition(all); .transition-duration(250ms); padding: 2px 0 3px; border-radius: 2px; font-weight: 400; } .ig-helpers { z-index: 1; width: 100%; left: 0; &, &:before, &:after { position: absolute; height: 2px; bottom: 0; } &:before, &:after { content: ''; width: 0; .transition(all); .transition-duration(250ms); background-color: #03A9F4; } &:before { left: 50%; } &:after { right: 50%; } } .ig-text { width: 100%; height: 40px; border: 0; background: transparent; text-align: center; position: relative; z-index: 1; border-bottom: 1px solid #eee; color: #32393F; font-size: 13px; &:focus + .ig-helpers { &:before, &:after { width: 50%; } } &:valid, &:disabled, &:focus { & ~ .ig-label { bottom: 35px; font-size: 13px; z-index: 1; } } &:disabled { .opacity(0.5); } } .ig-dark { .ig-text { color: @white; border-color: rgba(255,255,255,0.1); } .ig-helpers { &:before, &:after { background-color: #dfdfdf; height: 1px; } } } .ig-left { .ig-label, .ig-text { text-align: left; } } .ig-error { .ig-label { color: #E23F3F; } .ig-helpers i { &:first-child, &:first-child:before, &:first-child:after { background: rgba(226, 63, 63, 0.43); } &:last-child, &:last-child:before, &:last-child:after { background: #E23F3F !important; } } &:after { content: "\f05a"; font-family: FontAwesome; position: absolute; top: 17px; right: 9px; font-size: 20px; color: #D33D3E; } } .ig-search { &:before { font-family: @font-family-icon; content: '\f002'; font-size: 15px; position: absolute; left: 2px; top: 8px; } .ig-text { padding-left: 25px; } } /*-------------------------- Share Spinners ----------------------------*/ .set-expire { border: 1px solid @input-border; margin: 35px 0 30px; } .set-expire-item { padding: 9px 5px 3px; position: relative; display: table-cell; width: 1%; text-align: center; &:not(:last-child) { border-right: 1px solid @input-border; } } .set-expire-title { font-size: 10px; text-transform: uppercase; } .set-expire-value { display: inline-block; overflow: hidden; position: relative; left: -8px; input { font-size: 20px; text-align: center; position: relative; right: -15px; border: 0; color: @text-strong-color; padding: 0; height: 25px; width: 100%; font-weight: normal; } } .set-expire-decrease, .set-expire-increase { position: absolute; width: 20px; height: 20px; background: url(../../img/arrow.svg) no-repeat center; background-size: 85%; left: 50%; margin-left: -10px; .opacity(0.2); cursor: pointer; &:hover { .opacity(0.5); } } .set-expire-increase { top: -25px; } .set-expire-decrease { bottom: -27px; .rotate(-180deg); }