.bol { input[readonly="true"] { border: none; color: dimgray; cursor: not-allowed; width: 100%; vertical-align: middle; background: transparent; } /* Copied from dnd5e */ input[type="text"], input[type="number"], input[type="text"]:hover, input[type="number"]:hover, input[type="text"]:focus, input[type="number"]:focus { //border: 1px solid #111; //box-shadow: 0 0 8px #26641c; border-radius: 0; border: none; box-shadow: none; } input:disabled, select:disabled, textarea:disabled { //color: $colorOlive; } input:disabled:hover, select:disabled:hover, textarea:disabled:hover, input:disabled:focus, select:disabled:focus, textarea:disabled:focus { box-shadow: none !important; border: 1px solid transparent !important; outline: none !important; } button { background: rgba(0, 0, 0, 0.1); //border: $borderGroove; } select { box-shadow: none; font-size: 14px; text-align: center; text-align-last: center; -moz-text-align-last: center; width: 100%; border: none; border-radius: 0; } select[multiple]{ box-shadow: none; border: none; font-size: 14px; &:focus { option:checked { background: @c-darkred linear-gradient(0deg, @c-darkred 0%, @c-darkred 100%); color:white; } } } option { font-size: 14px; .ellipsis(); } option:hover, option:focus, option:active, option:checked, option[selected] { cursor: pointer; background: @c-darkred linear-gradient(0deg, @c-darkred 0%, @c-darkred 100%); color:white; } //option:not(:checked) { // color: black; //} /* or whatever your default style is */ label.checkbox { flex: auto; padding: 0; margin: 0; height: 22px; line-height: 22px; font-size: 11px; > input[type="checkbox"] { width: 16px; height: 16px; margin: 0 2px 0 0; position: relative; top: 4px; } &.right > input[type="checkbox"] { margin: 0 0 0 2px; } } /* Form Groups */ .form-group { label { flex: 2; //color: $colorOlive; font-weight: bold; } .form-fields { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; > * { flex: 1; margin: 0 3px 0 0; &:last-child { margin-right: 0; } .flex1 { flex: 1; } .flex2 { flex: 2; } .flex3 { flex: 3; } .flex4 { flex: 4; } } label { flex: 0 0 100%; margin: 0; &.checkbox { flex: auto; text-align: left; } } .field-value { text-align: center; } } // Stacked Groups &.stacked { label { flex: 0 0 100%; margin: 0; &.checkbox { flex: auto; text-align: left; } } } } .form-header { margin: 0.25em 0 0.25em 0; padding: 2px 5px; //font-family: @font-special2; //border-top: @borderGroove; //border-bottom: @borderGroove; font-family: @font-tertiary; color: @colorOlive; background-color: lightgray; } h1.form-header { font-size: 2.5em; font-weight: 700; //color : black; } h2.form-header { font-size: 2em; font-weight: 500; //color : black; //border-top: @borderGroove; border-bottom: @borderGroove; } h3.form-header { font-size: 1.5em; font-weight: 500; //color : black; //border-top: @borderGroove; border-bottom: @borderGroove; } h4.form-header { font-size: 1em; font-weight: 500; font-family: @font-primary; color : black; background-color: transparent; border-top: none; border-bottom: @borderGroove; } .tag { display: inline-block; margin: 0 2px 0 0; padding: 0 3px; font-size: 10px; line-height: 16px; border: 1px solid #999; border-radius: 3px; background: rgba(0, 0, 0, 0.05); } /* Placeholders */ ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: lightgray; opacity: 1; /* Firefox */ } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: lightgray; } ::-ms-input-placeholder { /* Microsoft Edge */ color: lightgray; } input::placeholder { color: lightgray; } .property { margin-top: 2px; } .inc-dec-btns { color:@colorOlive; } }