form { margin: 0 0 5px 0; fieldset { margin-bottom: 5px; padding: 0; border-width: 0; } legend { display: block; width: 100%; margin-bottom: 5px * 2; *margin-left: -7px; padding: 0; color: @text-color; border: 0; border-bottom: 1px solid lighten(@black, 80); white-space: normal; } p { margin-bottom: 5px / 2; } ul { list-style-type: none; margin: 0 0 5px 0; padding: 0; } br { display: none; } } label, input, button, select, textarea { vertical-align: baseline; *vertical-align: middle; } input, button, select, textarea { font-family: @base-font; .box-sizing(border-box); } label { display: block; margin-bottom: 10px / 8; font-weight: bold; color: @text-color; cursor: pointer; input, textarea, select { display: block; } } input, textarea, select { display: inline-block; width: 100%; padding: 4px; margin-bottom: 5px / 4; background-color: @white; border: 1px solid lighten(@black, 80); color: @text-color; &:hover { border-color: lighten(@accent-color, 50); } } .input-mini { width: 60px; } .input-small { width: 90px; } input[type="image"], input[type="checkbox"], input[type="radio"] { width: auto; height: auto; padding: 0; margin: 3px 0; *margin-top: 0; line-height: normal; cursor: pointer; .rounded(0); border: 0 \9; } input[type="checkbox"], input[type="radio"] { .box-sizing(border-box); padding: 0; *width: 13px; *height: 13px; } input[type="image"] { border: 0; .box-shadow(none); } input[type="file"] { width: auto; padding: initial; line-height: initial; border: initial; background-color: transparent; background-color: initial; .box-shadow(none); } input[type="button"], input[type="reset"], input[type="submit"] { width : auto; height : auto; cursor : pointer; *overflow : visible; } select, input[type="file"] { *margin-top : 4px; } select { width : auto; background-color : @white; } select[multiple], select[size] { height : auto; } textarea { .resize(vertical); height : auto; overflow : auto; vertical-align : top; } input[type="hidden"] { display : none; } .radio, .checkbox { padding-left : 18px; font-weight : normal; } .radio input[type="radio"], .checkbox input[type="checkbox"] { float : left; margin-left : -18px; } .radio.inline, .checkbox.inline { display : inline-block; padding-top : 5px; margin-bottom : 0; vertical-align : middle; } .radio.inline + .radio.inline, .checkbox.inline + .checkbox.inline { margin-left : 10px; } // disabled // -------------------------------------------------- input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] { .opacity(.5); cursor : not-allowed; } // focus and active // -------------------------------------------------- input:focus, textarea:focus { border-color : @accent-color; outline : 0; outline : thin dotted \9; } input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus, select:focus { .box-shadow(none); } // help text // -------------------------------------------------- .help-block, .help-inline { color : lighten(@black, 50); } .help-block { display : block; margin-bottom : 1em; line-height : 1em; } .help-inline { display : inline-block; vertical-align : middle; padding-left : 5px; } // .form-inline // -------------------------------------------------- .form-inline input, .form-inline textarea, .form-inline select { display : inline-block; margin-bottom : 0; } .form-inline label { display : inline-block; } .form-inline .radio, .form-inline .checkbox, .form-inline .radio { padding-left : 0; margin-bottom : 0; vertical-align : middle; } .form-inline .radio input[type="radio"], .form-inline .checkbox input[type="checkbox"] { float : left; margin-left : 0; margin-right : 3px; } // Jekyll Simple Search // ------------------------------------------------- .dosearch { padding: 6px 10px; cursor: pointer; display: block; color: @white; .rounded(4px); &:hover { .box-shadow(@shadow: inset 0 0 1px @white); background-color: lighten(@black, 10); } } .search-form { width: 100%; position: relative; opacity: 0; transition: all 200ms 100ms cubic-bezier(0, 0.6, 0.4, 1); top: 0; left: -200px; z-index: 9002; .search-field { -webkit-appearance: none; border: none; width: 100%; color: @white; border: none; border-bottom: 1px solid lighten(@white, 20); background-color: transparent; box-shadow: none; border-radius: 0; background-clip: padding-box; .font-rem(32); &:focus { box-shadow: none; outline: none; } } &.active { opacity: 1; top: 0; left: 0; } &.hidden { display: none; } ::-webkit-input-placeholder { .font-rem(32); } .icon-remove-sign { position: absolute; top: .6rem; right: 1rem; display: block; cursor: pointer; text-align: center; color: @white; z-index: 1; cursor: pointer; } .search-field::-webkit-search-decoration, .search-field::-webkit-search-cancel-button, .search-field::-webkit-search-results-button, .search-field::-webkit-search-results-decoration { display: none; } .post-list { position: absolute; width: 100%; h4, li, p, a { color: @white; } li { border-bottom: 1px solid lighten(@white,20); } } } body.search-overlay { overflow: hidden; } body.search-overlay:after { content: ''; background-color: lighten(@black,5); background-color: fade(@black,95); width: 100%; min-height: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 9001; } .no-js .dosearch { display: none; }