.form-group { margin-bottom: 12px; } .form-control { .box-shadow(none); border-width: 2px; -webkit-appearance: none; &:focus, &.focus { background-color: #fff; color: @fl-body-color; .box-shadow(none); border: 2px solid @fl-body-primary-color; } } legend { font-size: 14px; border: 0; font-weight: bold; margin-bottom: 10px; } // Select inputs .select-input { display: inline-block; vertical-align: middle; } .select-input select { display: inline-block; width: auto; -webkit-appearance: none; -moz-appearance: none; padding-right: @padding-base-horizontal + 16; cursor: pointer; } .select-input .fa { margin-left: -@padding-base-horizontal - 16; pointer-events: none; color: @fl-body-muted-color; } .checkbox-switch { & label { padding-left: 65px; } & .switch-control { float: left; margin-left: -65px; margin-top: -4px; } & .loading-indicator { display: inline-block; margin-left: 10px; } } .switch-control, .yesno-control { & input[type=checkbox] { display: none; } } .switch { width: 50px; height: 28px; padding: 3px; position: relative; border-radius: 14px; background: @fl-body-control-bg; .transition(background-color 0.2s); input:checked + & { background: @fl-body-primary-color; } & .loading-indicator { opacity: 0; .loading& { opacity: 1; } } &:before, & .loading-indicator { position: absolute; width: 22px; height: 22px; padding: 0; left: 3px; .transition(~"opacity 0.2s, left 0.2s"); input:checked + & { left: 25px; } } &:before { content: ' '; background: @fl-body-bg; border-radius: 11px; box-shadow: 0 2px 4px @fl-shadow-color; } } .yesno-control { cursor: pointer; margin: 0; } .yesno { font-size: 14px; &.yes { color: #58A400; } &.no { color: #D0021B; } &.disabled { color: @fl-body-muted-more-color !important; } }