From e23d7171d54729c3f65d32720e20fabae88a0223 Mon Sep 17 00:00:00 2001 From: Pau Giner Date: Thu, 14 Mar 2013 22:14:36 +0100 Subject: [PATCH] Stylesheed and example for compact language list A searchable list for scenarios where users need to type/select a language (or more) as input. The list is made more compact by removing secondary aids from the ULS to focus on the input task. --- css/jquery.uls.compact.css | 44 +++++++++++++++++++++++++ examples/index-compact.html | 66 +++++++++++++++++++++++++++++++++++++ 2 files changed, 110 insertions(+) create mode 100644 css/jquery.uls.compact.css create mode 100644 examples/index-compact.html diff --git a/css/jquery.uls.compact.css b/css/jquery.uls.compact.css new file mode 100644 index 0000000..8abe528 --- /dev/null +++ b/css/jquery.uls.compact.css @@ -0,0 +1,44 @@ +.uls-compact .icon-close, +.uls-compact .uls-title-region, +.uls-compact .map-block { + display: none !important; +} + +.uls-compact.uls-menu { + border-radius: 0; +} + +.uls-compact .search { + background: white; + border-top: none; + padding: 0.8em 0; + border-bottom-width: 1px; + border-bottom-style: solid; + border-bottom-color: #DDD; +} + +.uls-compact .filterinput, +.uls-compact .filterinput:focus { + background-color: transparent; + border: none; + box-shadow: none; + outline: none; + font-size: 18px; +} + +.uls-compact .uls-language-list { + background: #FCFCFC; + height: 20em; +} + +.uls-compact .search-label { + background-size: 25px; + height: 26px; + width: 26px; + float: right; + opacity: 0.8; +} + +.uls-compact .languagefilter-clear { + margin-left: 0; +} diff --git a/examples/index-compact.html b/examples/index-compact.html new file mode 100644 index 0000000..556d707 --- /dev/null +++ b/examples/index-compact.html @@ -0,0 +1,66 @@ + + + + + + + + + Universal Language Selector + + + + + + + + + + + + + + + + + + + + + + + +
+ Select Language +

Universal Language Selector

+

+ Demonstration of jQuery plugin +

+
+
+ +