diff options
| author | Jordan Wiens <jordan@psifertex.com> | 2016-07-24 19:13:40 -0400 |
|---|---|---|
| committer | Jordan Wiens <jordan@psifertex.com> | 2016-07-24 19:13:40 -0400 |
| commit | b1900d6ebcc39738885f90fa9f18b28206a74947 (patch) | |
| tree | 2d4975fe0a347af7101200c48e4a8df82ca780ae /mkdocs-material/src/assets/stylesheets/modules/search/_layout.scss | |
| parent | 754ea372c66afad144988fcab2d7cf1fdbb3f2fc (diff) | |
very early checkin of template for user-docs, only a few pages filled out
Diffstat (limited to 'mkdocs-material/src/assets/stylesheets/modules/search/_layout.scss')
| -rw-r--r-- | mkdocs-material/src/assets/stylesheets/modules/search/_layout.scss | 218 |
1 files changed, 218 insertions, 0 deletions
diff --git a/mkdocs-material/src/assets/stylesheets/modules/search/_layout.scss b/mkdocs-material/src/assets/stylesheets/modules/search/_layout.scss new file mode 100644 index 00000000..33c89be9 --- /dev/null +++ b/mkdocs-material/src/assets/stylesheets/modules/search/_layout.scss @@ -0,0 +1,218 @@ +/* + * Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com> + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to + * deal in the Software without restriction, including without limitation the + * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or + * sell copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING + * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS + * IN THE SOFTWARE. + */ + +/* ---------------------------------------------------------------------------- + * Search layout + * ------------------------------------------------------------------------- */ + +/* + * Search bar + */ +.bar.search { + margin-top: 8px; + + /* + * Search input + */ + .query { + font-size: 18px; + padding: 13px 0; + margin: 0; + width: 100%; + height: 48px; + + /* [tablet portait+]: Slightly larger typo */ + @include break-from-device(tablet portrait) { + font-size: 20px; + padding: 12px 0; + } + + /* Hack [IE]: Hide redundant clear button */ + &::-ms-clear { + display: none; + } + } +} + +/* + * Search results + */ +.results { + position: fixed; + top: 0; + left: 0; + width: 0; + height: 100%; + z-index: 2; + overflow-y: scroll; + -webkit-overflow-scrolling: touch; + + /* [tablet landscape+]: Limit results to five entries */ + @include break-from-device(tablet landscape) { + height: auto; + top: 64px; + } + + /* + * Scrollable container + */ + .scrollable { + top: 56px; + + /* [tablet portait+]: Increase vertical spacing */ + @include break-from-device(tablet portrait) { + top: 64px; + } + + /* [tablet landscape+]: Limit results to five entries */ + @include break-from-device(tablet landscape) { + position: static; + max-height: 413px; + } + + /* + * Leave room for status bar in iOS web application + */ + .ios.standalone & { + + /* [orientation: portrait]: Account for status bar in portrait mode */ + @include break-at-orientation(portrait) { + top: (56px + 20px); + + /* [tablet portait+]: Increase vertical spacing */ + @include break-from-device(tablet portrait) { + top: (64px + 20px); + } + } + } + } + + /* + * Active search mode + */ + #toggle-search:checked ~ .main &, + .toggle-search & { + width: 100%; + + /* Hack [Firefox]: div doesn't collapse, unless this is applied */ + overflow-y: visible; + + /* [tablet portait+]: Stretch to viewport */ + @include break-to-device(tablet landscape) { + height: 100%; + } + } + + /* + * Search meta data + */ + .meta { + font-weight: 700; + + /* + * Number of results + */ + strong { + display: block; + font-size: 11px; + max-width: 1200px; + margin-left: auto; + margin-right: auto; + padding: 16px; + + /* [tablet portait+]: Increase vertical spacing */ + @include break-from-device(tablet portrait) { + padding: 16px 24px; + } + } + } + + /* + * Search result item link + */ + .list a { + display: block; + } +} + +/* + * Search result item + */ +.result { + max-width: 1200px; + margin-left: auto; + margin-right: auto; + padding: 12px 16px 16px; + + /* [tablet portait+]: Increase vertical spacing */ + @include break-from-device(tablet portrait) { + padding: 16px 24px 20px; + } + + /* + * Article title + */ + h1 { + line-height: 24px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } + + /* + * Article link + */ + span { + font-size: 12px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } +} + +/* + * Switch visibility, if browser doesn't support 3D transforms + */ +.no-csstransforms3d { + + /* + * Hide search results + */ + .results { + display: none; + } + + /* + * Active search mode + */ + #toggle-search:checked ~ .main, + .toggle-search { + + /* + * Show search results + */ + .results { + display: block; + overflow: auto; + } + } +}
\ No newline at end of file |
