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/_animation.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/_animation.scss')
| -rw-r--r-- | mkdocs-material/src/assets/stylesheets/modules/search/_animation.scss | 134 |
1 files changed, 134 insertions, 0 deletions
diff --git a/mkdocs-material/src/assets/stylesheets/modules/search/_animation.scss b/mkdocs-material/src/assets/stylesheets/modules/search/_animation.scss new file mode 100644 index 00000000..37df48f3 --- /dev/null +++ b/mkdocs-material/src/assets/stylesheets/modules/search/_animation.scss @@ -0,0 +1,134 @@ +/* + * 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 animation + * ------------------------------------------------------------------------- */ + +/* + * Animate header bar in offset and opacity + */ +.bar { + transform: translate3d(0, 0, 0); + transition: opacity .2s cubic-bezier(.75, 0, .25, 1), + transform .4s cubic-bezier(.75, 0, .25, 1); + + /* + * Active search mode + */ + #toggle-search:checked ~ .header &, + .toggle-search & { + transform: translate3d(0, -56px, 0); + } + + /* + * Search animations + */ + &.search { + + /* + * Hide reset button by default + */ + .button-reset { + transform: scale(0.5, 0.5); + transition: opacity .4s cubic-bezier(.1, .7, .1, 1), + transform .4s cubic-bezier(.1, .7, .1, 1); + opacity: 0; + } + + /* + * Show reset button if search is not empty + */ + &.non-empty .button-reset { + transform: scale(1.0, 1.0); + opacity: 1; + } + } +} + +/* + * Search results + */ +.results { + transition: opacity .3s .1s, + width .0s .4s, + height .0s .4s; + + /* + * Active search mode + */ + #toggle-search:checked ~ .main &, + .toggle-search & { + transition: opacity .4s, + width .0s, + height .0s; + } + + /* + * Search result item link + */ + .list a { + transition: background .25s; + } +} + +/* + * Just hide and show bars, if browser doesn't support 3D transforms + */ +.no-csstransforms3d { + + /* + * Show default bar + */ + .bar.default { + display: table; + } + + /* + * Hide search bar + */ + .bar.search { + display: none; + margin-top: 0; + } + + /* + * Active search mode + */ + #toggle-search:checked ~ .header, + .toggle-search { + + /* + * Hide default bar + */ + .bar.default { + display: none; + } + + /* + * Show search bar + */ + .bar.search { + display: table; + } + } +}
\ No newline at end of file |
