.checkbox input[type="checkbox"] { transform: scale(1.5); margin-left: -18px; margin-top: 3px; + label::before { top: .125rem; transition: all .2s ease; border-radius: .1rem; border-color: #d3d7d8; // default is #ccc } + label:after { font-family: webicons; content: "\E936"; max-width: 0; overflow: hidden; line-height: 1.25rem; color: $neutral-4; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; transition: all 0.4s ease; } &:checked { + label:before { background-color: $support-1; border-color: $support-1; } + label:after { max-width: 1rem; } } } .radio input[type="radio"] { transform: scale(1.6); margin-left: -17px; margin-top: 5px; + label { cursor: normal; &:before { transition: all .4s ease; height: 1rem; width: 1rem; } &:after { transform: none; height: .4rem; width: .4rem; top: .3rem; left: .3rem; background-color: $neutral-4; } } &:checked { + label:before { background-color: $support-1; border-color: $support-1; } + label:after { background-color: $neutral-4; } } } textarea { box-sizing: content-box; max-width: 100%; min-height: 2.5rem; } input[type="file"] { margin-left: .875rem; line-height: 2.5; + label { position: absolute; top: 0; } } .form-group { position: relative; } .zuo-textbox { width: 100%; border: 0; margin-top: 1rem; border-bottom: 1px solid #e9ebee; color: $neutral-1; background: transparent; transition: border-color 0.2s; padding: 0rem 0rem .375rem 0rem; &:focus { border-color: $support-1; } &[disabled="disabled"] { cursor: not-allowed; color: #6e7c89; } } label.zuo-floating-label { position: relative; top: -1.4375rem; display: block; transition: 0.2s; font-size: .875rem; line-height: .875rem; font-weight: normal; color: #6e7c89; margin-bottom: 0; pointer-events: none; } .zuo-floating-label.floating, .zuo-textbox:focus + .zuo-floating-label, select + .select2-container--open + .zuo-floating-label { font-size: .75rem; top: -2.6875rem; } .zuo-textbox:focus + .zuo-floating-label, select + .select2-container--open + .zuo-floating-label { color: $support-1; } .select2-container { .select2-selection { border: none; } .select2-dropdown { border: 1px solid $neutral-shadow; box-shadow: 0 1px 8px -1px $neutral-shadow; border-radius: .25rem; padding: .5rem 0; .select2-results__option { padding: .25rem .75rem; } .select2-results__option[aria-selected="true"] { background-color: $support-1; color: $neutral-4; } .select2-results__option--highlighted[aria-selected="false"] { background-color: $neutral-3; color: $neutral-1; } } .select2-dropdown--below { top: .5rem; } } .select2-container--bootstrap { .select2-selection { box-shadow: none; height: auto; padding: 0 2rem .375rem 0; margin-top: 1rem; border-radius: 0; &--multiple, .select2-selection__rendered { min-height: 1.25rem; } .select2-selection__choice { margin: 0; padding: 0; padding-right: 1.25rem; border: none; position: relative; .select2-selection__choice__remove { width: 1rem; height: 1rem; font-size: .75rem; line-height: 1; position: absolute; right: .25rem; top: 3.5px; text-align: center; margin-right: 0; border: 1px solid transparent; font-weight: normal; &:hover { color: $support-1; border-color: $support-1; border-radius: 50%; } } } .select2-search--inline .select2-search__field { height: unset; padding-left: 0; } .select2-selection__arrow { right: 0; top: 4px; width: 1.25rem; line-height: 1; &:before { content: "\E90D"; font-family: webicons; font-size: .75rem; color: #a5a3b6; transition: color .2s ease; } b { display: none; } } } .select2-selection, &.select2-container--focus .select2-selection, &.select2-container--disabled .select2-selection { border-bottom: 1px solid #e9ebee; } &.select2-container--open.select2-container--below .select2-selection { border-bottom: 1px solid $support-1; .select2-selection__arrow:before { color: $support-1; } } &.select2-container--disabled .select2-selection--single, &.select2-container--disabled .select2-selection--multiple .select2-selection__choice { background-color: transparent; .select2-selection__rendered { color: #6e7c89; } } } .select2-container.select2-container--focus .select2-selection, .select2-container--bootstrap.select2-container--open .select2-selection { box-shadow: none; } .select2-container .select2-selection--single .select2-selection__arrow b { border-color: $neutral-1 transparent transparent transparent; } .select2-container.select2-container--open .select2-selection .select2-selection__arrow b { border-color: transparent transparent $neutral-1 transparent; }