From 55b9b10d2e39fb52d566441d44c1c132b7ff06fe Mon Sep 17 00:00:00 2001 From: Thomas Pointhuber Date: Mon, 29 Sep 2014 15:47:05 +0200 Subject: [PATCH] oscar template: include typeahead.css into bootstrap.min.css --- searx/static/oscar/css/bootstrap.min.css | 20 ++ searx/static/oscar/css/typeahead.css | 189 ------------------ .../oscar/less/bootstrap/bootstrap.less | 3 + .../oscar/less/bootstrap/typeahead.less | 153 ++++++++++++++ searx/templates/oscar/base.html | 1 - 5 files changed, 176 insertions(+), 190 deletions(-) delete mode 100644 searx/static/oscar/css/typeahead.css create mode 100644 searx/static/oscar/less/bootstrap/typeahead.less diff --git a/searx/static/oscar/css/bootstrap.min.css b/searx/static/oscar/css/bootstrap.min.css index 5cd19edb0..a9f57473e 100644 --- a/searx/static/oscar/css/bootstrap.min.css +++ b/searx/static/oscar/css/bootstrap.min.css @@ -893,3 +893,23 @@ button.close{padding:0;cursor:pointer;background:transparent;border:0;-webkit-ap .visible-print-inline{display:none !important}@media print{.visible-print-inline{display:inline !important}} .visible-print-inline-block{display:none !important}@media print{.visible-print-inline-block{display:inline-block !important}} @media print{.hidden-print{display:none !important}} +.has-warning .twitter-typeahead .tt-input,.has-warning .twitter-typeahead .tt-hint{border-color:#8a6d3b;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075)}.has-warning .twitter-typeahead .tt-input:focus,.has-warning .twitter-typeahead .tt-hint:focus{border-color:#66512c;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #c0a16b;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #c0a16b} +.has-error .twitter-typeahead .tt-input,.has-error .twitter-typeahead .tt-hint{border-color:#a94442;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075)}.has-error .twitter-typeahead .tt-input:focus,.has-error .twitter-typeahead .tt-hint:focus{border-color:#843534;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #ce8483;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #ce8483} +.has-success .twitter-typeahead .tt-input,.has-success .twitter-typeahead .tt-hint{border-color:#3c763d;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075)}.has-success .twitter-typeahead .tt-input:focus,.has-success .twitter-typeahead .tt-hint:focus{border-color:#2b542c;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #67b168;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 6px #67b168} +.input-group .twitter-typeahead:first-child .tt-input,.input-group .twitter-typeahead:first-child .tt-hint{border-bottom-left-radius:4px;border-top-left-radius:4px} +.input-group .twitter-typeahead:last-child .tt-input,.input-group .twitter-typeahead:last-child .tt-hint{border-bottom-right-radius:4px;border-top-right-radius:4px} +.input-group.input-group-sm .twitter-typeahead .tt-input,.input-group.input-group-sm .twitter-typeahead .tt-hint{height:30px;padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px}select.input-group.input-group-sm .twitter-typeahead .tt-input,select.input-group.input-group-sm .twitter-typeahead .tt-hint{height:30px;line-height:30px} +textarea.input-group.input-group-sm .twitter-typeahead .tt-input,textarea.input-group.input-group-sm .twitter-typeahead .tt-hint,select[multiple].input-group.input-group-sm .twitter-typeahead .tt-input,select[multiple].input-group.input-group-sm .twitter-typeahead .tt-hint{height:auto} +.input-group.input-group-sm .twitter-typeahead:not(:first-child):not(:last-child) .tt-input,.input-group.input-group-sm .twitter-typeahead:not(:first-child):not(:last-child) .tt-hint{border-radius:0} +.input-group.input-group-sm .twitter-typeahead:first-child .tt-input,.input-group.input-group-sm .twitter-typeahead:first-child .tt-hint{border-bottom-left-radius:3px;border-top-left-radius:3px;border-bottom-right-radius:0;border-top-right-radius:0} +.input-group.input-group-sm .twitter-typeahead:last-child .tt-input,.input-group.input-group-sm .twitter-typeahead:last-child .tt-hint{border-bottom-left-radius:0;border-top-left-radius:0;border-bottom-right-radius:3px;border-top-right-radius:3px} +.input-group.input-group-lg .twitter-typeahead .tt-input,.input-group.input-group-lg .twitter-typeahead .tt-hint{height:46px;padding:10px 16px;font-size:18px;line-height:1.33;border-radius:6px}select.input-group.input-group-lg .twitter-typeahead .tt-input,select.input-group.input-group-lg .twitter-typeahead .tt-hint{height:46px;line-height:46px} +textarea.input-group.input-group-lg .twitter-typeahead .tt-input,textarea.input-group.input-group-lg .twitter-typeahead .tt-hint,select[multiple].input-group.input-group-lg .twitter-typeahead .tt-input,select[multiple].input-group.input-group-lg .twitter-typeahead .tt-hint{height:auto} +.input-group.input-group-lg .twitter-typeahead:not(:first-child):not(:last-child) .tt-input,.input-group.input-group-lg .twitter-typeahead:not(:first-child):not(:last-child) .tt-hint{border-radius:0} +.input-group.input-group-lg .twitter-typeahead:first-child .tt-input,.input-group.input-group-lg .twitter-typeahead:first-child .tt-hint{border-bottom-left-radius:6px;border-top-left-radius:6px;border-bottom-right-radius:0;border-top-right-radius:0} +.input-group.input-group-lg .twitter-typeahead:last-child .tt-input,.input-group.input-group-lg .twitter-typeahead:last-child .tt-hint{border-bottom-left-radius:0;border-top-left-radius:0;border-bottom-right-radius:6px;border-top-right-radius:6px} +.twitter-typeahead{width:100%}.input-group .twitter-typeahead{display:table-cell !important;float:left} +.twitter-typeahead .tt-hint{color:#777} +.twitter-typeahead .tt-input{z-index:2}.twitter-typeahead .tt-input[disabled],.twitter-typeahead .tt-input[readonly],fieldset[disabled] .twitter-typeahead .tt-input{cursor:not-allowed;background-color:#eee !important} +.tt-dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;min-width:160px;width:100%;padding:5px 0;margin:2px 0 0;list-style:none;font-size:14px;background-color:#fff;border:1px solid #ccc;border:1px solid rgba(0,0,0,0.15);border-radius:4px;-webkit-box-shadow:0 6px 12px rgba(0,0,0,0.175);box-shadow:0 6px 12px rgba(0,0,0,0.175);background-clip:padding-box;*border-right-width:2px;*border-bottom-width:2px}.tt-dropdown-menu .tt-suggestion{display:block;padding:3px 20px;clear:both;font-weight:normal;line-height:1.428571429;color:#333;white-space:nowrap;text-align:left;cursor:pointer !important}.tt-dropdown-menu .tt-suggestion.tt-cursor{text-decoration:none;outline:0;background-color:#f5f5f5;color:#262626}.tt-dropdown-menu .tt-suggestion.tt-cursor a{color:#262626} +.tt-dropdown-menu .tt-suggestion p{margin:0} diff --git a/searx/static/oscar/css/typeahead.css b/searx/static/oscar/css/typeahead.css deleted file mode 100644 index fde250d66..000000000 --- a/searx/static/oscar/css/typeahead.css +++ /dev/null @@ -1,189 +0,0 @@ -/* - * typehead.js-bootstrap3.less - * @version 0.2.3 - * https://github.com/hyspace/typeahead.js-bootstrap3.less - * - * Licensed under the MIT license: - * http://www.opensource.org/licenses/MIT - */ -.has-warning .twitter-typeahead .tt-input, -.has-warning .twitter-typeahead .tt-hint { - border-color: #8a6d3b; - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -} -.has-warning .twitter-typeahead .tt-input:focus, -.has-warning .twitter-typeahead .tt-hint:focus { - border-color: #66512c; - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b; -} -.has-error .twitter-typeahead .tt-input, -.has-error .twitter-typeahead .tt-hint { - border-color: #a94442; - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -} -.has-error .twitter-typeahead .tt-input:focus, -.has-error .twitter-typeahead .tt-hint:focus { - border-color: #843534; - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483; -} -.has-success .twitter-typeahead .tt-input, -.has-success .twitter-typeahead .tt-hint { - border-color: #3c763d; - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -} -.has-success .twitter-typeahead .tt-input:focus, -.has-success .twitter-typeahead .tt-hint:focus { - border-color: #2b542c; - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168; -} -.input-group .twitter-typeahead:first-child .tt-input, -.input-group .twitter-typeahead:first-child .tt-hint { - border-bottom-left-radius: 4px; - border-top-left-radius: 4px; -} -.input-group .twitter-typeahead:last-child .tt-input, -.input-group .twitter-typeahead:last-child .tt-hint { - border-bottom-right-radius: 4px; - border-top-right-radius: 4px; -} -.input-group.input-group-sm .twitter-typeahead .tt-input, -.input-group.input-group-sm .twitter-typeahead .tt-hint { - height: 30px; - padding: 5px 10px; - font-size: 12px; - line-height: 1.5; - border-radius: 3px; -} -select.input-group.input-group-sm .twitter-typeahead .tt-input, -select.input-group.input-group-sm .twitter-typeahead .tt-hint { - height: 30px; - line-height: 30px; -} -textarea.input-group.input-group-sm .twitter-typeahead .tt-input, -textarea.input-group.input-group-sm .twitter-typeahead .tt-hint, -select[multiple].input-group.input-group-sm .twitter-typeahead .tt-input, -select[multiple].input-group.input-group-sm .twitter-typeahead .tt-hint { - height: auto; -} -.input-group.input-group-sm .twitter-typeahead:not(:first-child):not(:last-child) .tt-input, -.input-group.input-group-sm .twitter-typeahead:not(:first-child):not(:last-child) .tt-hint { - border-radius: 0; -} -.input-group.input-group-sm .twitter-typeahead:first-child .tt-input, -.input-group.input-group-sm .twitter-typeahead:first-child .tt-hint { - border-bottom-left-radius: 3px; - border-top-left-radius: 3px; - border-bottom-right-radius: 0; - border-top-right-radius: 0; -} -.input-group.input-group-sm .twitter-typeahead:last-child .tt-input, -.input-group.input-group-sm .twitter-typeahead:last-child .tt-hint { - border-bottom-left-radius: 0; - border-top-left-radius: 0; - border-bottom-right-radius: 3px; - border-top-right-radius: 3px; -} -.input-group.input-group-lg .twitter-typeahead .tt-input, -.input-group.input-group-lg .twitter-typeahead .tt-hint { - height: 46px; - padding: 10px 16px; - font-size: 18px; - line-height: 1.33; - border-radius: 6px; -} -select.input-group.input-group-lg .twitter-typeahead .tt-input, -select.input-group.input-group-lg .twitter-typeahead .tt-hint { - height: 46px; - line-height: 46px; -} -textarea.input-group.input-group-lg .twitter-typeahead .tt-input, -textarea.input-group.input-group-lg .twitter-typeahead .tt-hint, -select[multiple].input-group.input-group-lg .twitter-typeahead .tt-input, -select[multiple].input-group.input-group-lg .twitter-typeahead .tt-hint { - height: auto; -} -.input-group.input-group-lg .twitter-typeahead:not(:first-child):not(:last-child) .tt-input, -.input-group.input-group-lg .twitter-typeahead:not(:first-child):not(:last-child) .tt-hint { - border-radius: 0; -} -.input-group.input-group-lg .twitter-typeahead:first-child .tt-input, -.input-group.input-group-lg .twitter-typeahead:first-child .tt-hint { - border-bottom-left-radius: 6px; - border-top-left-radius: 6px; - border-bottom-right-radius: 0; - border-top-right-radius: 0; -} -.input-group.input-group-lg .twitter-typeahead:last-child .tt-input, -.input-group.input-group-lg .twitter-typeahead:last-child .tt-hint { - border-bottom-left-radius: 0; - border-top-left-radius: 0; - border-bottom-right-radius: 6px; - border-top-right-radius: 6px; -} -.twitter-typeahead { - width: 100%; -} -.input-group .twitter-typeahead { - display: table-cell !important; - float: left; -} -.twitter-typeahead .tt-hint { - color: #999999; -} -.twitter-typeahead .tt-input { - z-index: 2; -} -.twitter-typeahead .tt-input[disabled], -.twitter-typeahead .tt-input[readonly], -fieldset[disabled] .twitter-typeahead .tt-input { - cursor: not-allowed; - background-color: #eeeeee !important; -} -.tt-dropdown-menu { - position: absolute; - top: 100%; - left: 0; - z-index: 1000; - min-width: 160px; - width: 100%; - padding: 5px 0; - margin: 2px 0 0; - list-style: none; - font-size: 14px; - background-color: #ffffff; - border: 1px solid #cccccc; - border: 1px solid rgba(0, 0, 0, 0.15); - border-radius: 4px; - -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); - box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); - background-clip: padding-box; - *border-right-width: 2px; - *border-bottom-width: 2px; -} -.tt-dropdown-menu .tt-suggestion { - display: block; - padding: 3px 20px; - clear: both; - font-weight: normal; - line-height: 1.42857143; - color: #333333; - white-space: nowrap; -} -.tt-dropdown-menu .tt-suggestion.tt-cursor { - text-decoration: none; - outline: 0; - background-color: #f5f5f5; - color: #262626; -} -.tt-dropdown-menu .tt-suggestion.tt-cursor a { - color: #262626; -} -.tt-dropdown-menu .tt-suggestion p { - margin: 0; -} diff --git a/searx/static/oscar/less/bootstrap/bootstrap.less b/searx/static/oscar/less/bootstrap/bootstrap.less index 61b77474f..79e7abd91 100644 --- a/searx/static/oscar/less/bootstrap/bootstrap.less +++ b/searx/static/oscar/less/bootstrap/bootstrap.less @@ -48,3 +48,6 @@ // Utility classes @import "utilities.less"; @import "responsive-utilities.less"; + +// own additions +@import "typeahead.less"; diff --git a/searx/static/oscar/less/bootstrap/typeahead.less b/searx/static/oscar/less/bootstrap/typeahead.less new file mode 100644 index 000000000..91e391b41 --- /dev/null +++ b/searx/static/oscar/less/bootstrap/typeahead.less @@ -0,0 +1,153 @@ +/* + * typehead.js-bootstrap3.less + * @version 0.2.3 + * https://github.com/hyspace/typeahead.js-bootstrap3.less + * + * Licensed under the MIT license: + * http://www.opensource.org/licenses/MIT + */ + +//custom mixin for .form-control-validation +.typeahead-form-control(@border-color: #ccc;) { + border-color: @border-color; + .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work + &:focus { + border-color: darken(@border-color, 10%); + @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%); + .box-shadow(@shadow); + } +} + +//main styles for control +.tt-input, +.tt-hint { + .twitter-typeahead &{ + //validation states + .has-warning &{ + .typeahead-form-control(@state-warning-text); + } + .has-error &{ + .typeahead-form-control(@state-danger-text); + } + .has-success &{ + .typeahead-form-control(@state-success-text); + } + } + + //border + .input-group .twitter-typeahead:first-child &{ + .border-left-radius(@border-radius-base); + } + .input-group .twitter-typeahead:last-child &{ + .border-right-radius(@border-radius-base); + } + + //sizing - small:size and border + .input-group.input-group-sm .twitter-typeahead &{ + .input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small); + } + .input-group.input-group-sm .twitter-typeahead:not(:first-child):not(:last-child) &{ + border-radius: 0; + } + .input-group.input-group-sm .twitter-typeahead:first-child &{ + .border-left-radius(@border-radius-small); + .border-right-radius(0); + } + .input-group.input-group-sm .twitter-typeahead:last-child &{ + .border-left-radius(0); + .border-right-radius(@border-radius-small); + } + + //sizing - large:size and border + .input-group.input-group-lg .twitter-typeahead &{ + .input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large); + } + .input-group.input-group-lg .twitter-typeahead:not(:first-child):not(:last-child) &{ + border-radius: 0; + } + .input-group.input-group-lg .twitter-typeahead:first-child &{ + .border-left-radius(@border-radius-large); + .border-right-radius(0); + } + .input-group.input-group-lg .twitter-typeahead:last-child &{ + .border-left-radius(0); + .border-right-radius(@border-radius-large); + } +} + +//for wrapper +.twitter-typeahead { + width: 100%; + .input-group &{ + //overwrite `display:inline-block` style + display: table-cell!important; + float: left; + } +} + +//particular style for each other +.twitter-typeahead .tt-hint { + color: @text-muted;//color - hint +} +.twitter-typeahead .tt-input { + z-index: 2; + //disabled status + //overwrite inline styles of .tt-query + &[disabled], + &[readonly], + fieldset[disabled] & { + cursor: not-allowed; + //overwirte inline style + background-color: @input-bg-disabled!important; + } +} + +//dropdown styles +.tt-dropdown-menu { + //dropdown menu + position: absolute; + top: 100%; + left: 0; + z-index: @zindex-dropdown; + min-width: 160px; + width: 100%; + padding: 5px 0; + margin: 2px 0 0; + list-style: none; + font-size: @font-size-base; + background-color: @dropdown-bg; + border: 1px solid @dropdown-fallback-border; + border: 1px solid @dropdown-border; + border-radius: @border-radius-base; + .box-shadow(0 6px 12px rgba(0,0,0,.175)); + background-clip: padding-box; + *border-right-width: 2px; + *border-bottom-width: 2px; + + .tt-suggestion { + //item + display: block; + padding: 3px 20px; + clear: both; + font-weight: normal; + line-height: @line-height-base; + color: @dropdown-link-color; + white-space: nowrap; + text-align: left; + cursor: pointer !important; + &.tt-cursor { + //item selected + text-decoration: none; + outline: 0; + background-color: @dropdown-link-hover-bg; + color: @dropdown-link-hover-color; + a { + //link in item selected + color: @dropdown-link-hover-color; + } + } + p { + margin: 0; + } + } +} diff --git a/searx/templates/oscar/base.html b/searx/templates/oscar/base.html index e2d481845..6138404a2 100644 --- a/searx/templates/oscar/base.html +++ b/searx/templates/oscar/base.html @@ -9,7 +9,6 @@ {% block title %}{% endblock %}searx - {% if autocomplete %}{% endif %}