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/drawer | |
| 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/drawer')
4 files changed, 597 insertions, 0 deletions
diff --git a/mkdocs-material/src/assets/stylesheets/modules/drawer/_animation.scss b/mkdocs-material/src/assets/stylesheets/modules/drawer/_animation.scss new file mode 100644 index 00000000..16077f9b --- /dev/null +++ b/mkdocs-material/src/assets/stylesheets/modules/drawer/_animation.scss @@ -0,0 +1,81 @@ +/* + * 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. + */ + +/* ---------------------------------------------------------------------------- + * Drawer animation + * ------------------------------------------------------------------------- */ + +/* + * Drawer container + */ +.drawer { + + /* [tablet landscape-]: Hide menu */ + @include break-to-device(tablet landscape) { + transform: translate3d(-262px, 0, 0); + transition: transform .25s cubic-bezier(.4, 0, .2, 1); + + /* + * Just hide drawer, if browser doesn't support 3D transforms + */ + .no-csstransforms3d & { + display: none; + } + } + + /* + * Expanded drawer + */ + #toggle-drawer:checked ~ .main &, + .toggle-drawer & { + transform: translate3d(0, 0, 0); + + /* + * Just show drawer, if browser doesn't support 3D transforms + */ + .no-csstransforms3d & { + display: block; + } + } +} + +/* + * No color transition for project link + */ +.project { + transition: none; +} + +/* + * Project logo image + */ +.project .logo img { + transition: box-shadow .4s; +} + +/* + * Repository buttons + */ +.repo a { + transition: box-shadow .4s, + opacity .4s; +}
\ No newline at end of file diff --git a/mkdocs-material/src/assets/stylesheets/modules/drawer/_appearance.scss b/mkdocs-material/src/assets/stylesheets/modules/drawer/_appearance.scss new file mode 100644 index 00000000..b4f9926a --- /dev/null +++ b/mkdocs-material/src/assets/stylesheets/modules/drawer/_appearance.scss @@ -0,0 +1,143 @@ +/* + * 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. + */ + +/* ---------------------------------------------------------------------------- + * Drawer appearance + * ------------------------------------------------------------------------- */ + +/* + * Drawer container + */ +.drawer { + + /* [tablet landscape-]: Light gray background */ + @include break-to-device(tablet landscape) { + background: $white; + } + + /* + * Color links + */ + .toc a { + + /* + * Current active element + */ + &.current { + color: $primary; + } + + /* + * Hovered link + */ + &:hover, &:focus { + color: $primary; + } + } + + /* + * Color anchors menu + */ + .anchor a { + border-left: 2px solid $primary; + } + + /* + * Main sections + */ + .section { + color: $black-light; + } +} + +/* + * Project information + */ +.project { + + /* [tablet landscape-]: Add drop shadow */ + @include break-to-device(tablet landscape) { + @include drop-shadow(1); + + background: $primary; + color: $white; + } + + /* + * Add status bar overlay for iOS web application + */ + .ios.standalone &:before { + background: $black-lightest; + } + + /* + * Project logo + */ + .logo img { + background: $white; + border-radius: 100%; + } + + /* + * Scale logo on hover + */ + &:hover .logo img, + &:focus .logo img { + @include drop-shadow(2); + } +} + +/* + * Repository buttons + */ +.repo a { + background: $accent; + color: $white; + border-radius: 3px; + + /* + * Hovered button + */ + &:hover, &:focus { + @include drop-shadow(2); + + opacity: 0.8; + } + + /* + * Stars + */ + .count { + background: $black-lighter; + color: $white; + border-radius: 0px 3px 3px 0px; + + /* + * Star bubble + */ + &:before { + border-width: 15px 5px 15px 0; + border-color: transparent $black-lighter; + border-style: solid; + } + } +}
\ No newline at end of file diff --git a/mkdocs-material/src/assets/stylesheets/modules/drawer/_layout.scss b/mkdocs-material/src/assets/stylesheets/modules/drawer/_layout.scss new file mode 100644 index 00000000..d6e1df28 --- /dev/null +++ b/mkdocs-material/src/assets/stylesheets/modules/drawer/_layout.scss @@ -0,0 +1,305 @@ +/* + * 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. + */ + +/* ---------------------------------------------------------------------------- + * Drawer layout + * ------------------------------------------------------------------------- */ + +/* + * Drawer container + */ +.drawer { + width: 262px; + font-size: 13px; + line-height: 1.0em; + + /* [tablet landscape-]: Fixed positioning */ + @include break-to-device(tablet landscape) { + position: fixed; + z-index: 5; + height: 100%; + } + + /* [tablet landscape+]: Inline with content */ + @include break-from-device(tablet landscape) { + position: static; + float: left; + height: auto; + margin-bottom: 96px; + padding-top: 80px; + } + + /* Hack [iOS]: Mitigate scrolling of parent container on boundaries */ + .ios & { + overflow: scroll; + -webkit-overflow-scrolling: touch; + } + + /* + * Links to articles + */ + .toc li a { + display: block; + padding: 14.5px 24px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + /* + * Links to anchors + */ + .toc li.anchor a { + margin-left: 12px; + padding: 10px 24px 10px 12px; + } + + /* + * Nested links and anchors + */ + .toc li ul { + margin-left: 12px; + } + + /* + * Nested anchors + */ + .current + ul { + margin-bottom: 9px; + } + + /* + * Main sections + */ + .section { + display: block; + padding: 14.5px 24px; + } + + /* + * Scrollable container + */ + .scrollable { + top: 104px; + z-index: -1; + + /* [tablet landscape+]: Revert fixed positioning */ + @include break-from-device(tablet landscape) { + position: static; + } + + /* + * 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: (104px + 20px); + } + } + + /* + * Content wrapper + */ + .wrapper { + height: auto; + min-height: 100%; + + /* + * Add spacing at top and bottom of separator + */ + hr { + margin: 12px 0; + + /* [screen+]: Shorten separator */ + @include break-from-device(screen) { + width: 48px; + } + + /* Hack [IE]: Left-align horizontal rule */ + margin-right: auto; + } + + /* + * Add spacing at top and bottom of top level navigation + */ + .toc { + margin: 12px 0; + } + } + } +} + +/* + * Project information + */ +.project { + display: block; + + /* + * 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) { + padding-top: 20px; + + /* + * Add status bar overlay + */ + &:before { + content: " "; + position: absolute; + top: 0; + left: 0; + z-index: 4; + width: 100%; + height: 20px; + } + } + } + + /* + * Project banner + */ + .banner { + display: table; + width: 100%; + height: 104px; + padding: 20px; + } + + /* + * Project logo + */ + .logo { + display: table-cell; + width: 64px; + padding-right: 12px; + + /* + * Project logo image + */ + img { + display: block; + width: 64px; + height: 64px; + } + } + + /* + * Project name + */ + .name { + display: table-cell; + padding-left: 4px; + font-size: 14px; + line-height: 1.25em; + vertical-align: middle; + + /* [tablet portait+]: Slightly larger project name */ + @include break-from-device(tablet portrait) { + margin: 26px 0 0 5px; + } + } + + /* + * Shrink font, if a logo is given. + */ + .logo + .name { + font-size: 12px; + } +} + +/* + * Repository + */ +.repo { + margin: 24px 0; + text-align: center; + + /* + * Inline buttons + */ + li { + display: inline-block; + padding-right: 12px; + white-space: nowrap; + + /* + * No padding on last button + */ + &:last-child { + padding-right: 0; + } + } + + /* + * Buttons + */ + a { + display: inline-block; + padding: 0px 10px 0px 6px; + font-size: 12px; + line-height: 30px; + height: 30px; + + /* + * Slightly larger icons + */ + .icon { + font-size: 18px; + vertical-align: -3px; + } + + /* + * Stars + */ + .count { + display: inline-block; + position: relative; + padding: 0px 8px 0 4px; + margin: 0 -10px 0 8px; + font-size: 12px; + + /* + * Star bubble + */ + &:before { + content: " "; + display: block; + position: absolute; + top: 0px; + left: -5px; + } + + /* + * Hide count, in case javascript is not available. + */ + .no-js & { + display: none; + } + } + } +}
\ No newline at end of file diff --git a/mkdocs-material/src/assets/stylesheets/modules/drawer/_typography.scss b/mkdocs-material/src/assets/stylesheets/modules/drawer/_typography.scss new file mode 100644 index 00000000..78ea4f24 --- /dev/null +++ b/mkdocs-material/src/assets/stylesheets/modules/drawer/_typography.scss @@ -0,0 +1,68 @@ +/* + * 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. + */ + +/* ---------------------------------------------------------------------------- + * Drawer typography + * ------------------------------------------------------------------------- */ + +/* + * Drawer container + */ +.drawer { + + /* + * Links to articles + */ + .toc li a { + font-weight: 700; + } + + /* + * Links to chapters inside the current article + */ + .toc li.anchor a { + font-weight: 400; + } + + /* + * Main sections + */ + .section { + font-weight: 700; + } +} + +/* + * Repository buttons + */ +.repo a { + text-transform: uppercase; + font-weight: 700; + + /* + * Stars + */ + .count { + text-transform: none; + font-weight: 700; + } +}
\ No newline at end of file |
