/* ==|============================== GENERAL FORMS =================== */ // google autocomplete .pac-container{ z-index:99999; } /*form - control are the general inputs, in settings, search fields, etc -----------------*/ .form-control{ @extend .btn; border: 1.5px solid $lighterGrey; // Formerly $lightGrey; color: #999; font-size:1.05em; font-weight: $font-normal-weight; height: 45px; margin-right:.5em; padding: $form-control-padding; text-align:left; &:hover, &:focus{ background: white; } &:focus{ // border:$orange; border-color:$orange; @include box-shadow($orange 0 0 2px); } } @-moz-document url-prefix() { .form-control{ color: #999; font-weight: $font-normal-weight; height: 40px; padding: 10px 1em; } } .form-control-one{ @extend .btn; text-align:left; font-size:1.05em; color:darken($lighterGrey,30%); // Formerly darken($lightgrey,30%); padding: 5px 10px; width: auto; border: 1.5px solid $lighterGrey; // Formerly $lightgrey; &:hover, &:focus{ background:white; } &:focus{ border:$orange; @include box-shadow($orange 0 0 2px); } &::-webkit-input-placeholder{ color:darken($lighterGrey,30%); // Formerly darken($lightgrey,30%); font-weight: $font-normal-weight; } } .info-text{ color:darken($lighterGrey,35%); // Formerly darken($lightgrey,35%); font-weight: $font-normal-weight; font-size:0.9em; } .fa-check-circle{ color:$orange; } .checkbox-group{ position:relative; padding-left:20px; } // check box elements input[type="checkbox"] { position: absolute; z-index:200; top:0; left:0; display:none; &:checked + label i.fa-check-circle{ display: block; } &:checked + label span.notChecked{ display: none; } }// click input label { font-weight: $font-normal-weight; } label.check{ cursor:pointer; vertical-align: middle; margin: 5px 0 0 15px; i.fa-check-circle{ z-index:1; color:$orange; display: none; position: absolute; top: 2px; left: 0; font-size: 16px; } span.notChecked{ z-index:99; position: absolute; width:25px; height:25px; cursor:pointer; border:1px solid darken($lighterGrey,10); // Formerly darken($lightgrey,10); border-radius:50%; background:white; top:2px; left:0; } }//label .select-drop{ width: 100%; display:inline-block; background-color: white; font-weight: $font-normal-weight; padding: 10px 1em; border-radius: 5px; height: 40px; color:darken($lighterGrey,30%); // Formerly darken($lightgrey,30%); vertical-align: middle; margin: 10px 0px; border: 1.5px solid #eee; } .form-group{ display: block; margin-bottom: 10px; &#{&}-inline-btn { &:not(#{&}--long-input) { display: flex; } } &#{&}-inline-btn--long-input { @media (max-width: $mobile-l) { .form-control { margin-bottom: $form-group-marginbottom; } } @media (min-width: ($mobile-l + 1)) { display: flex; [class~="btn"] { flex-shrink: 2; line-height: 1; margin-bottom: 0; padding-bottom: 0; padding-top: 0; } } } } .form-horizontal{ .control-label{ text-align: left; } }