summaryrefslogtreecommitdiff
path: root/mkdocs-material/src/assets/stylesheets/modules/drawer
diff options
context:
space:
mode:
authorJordan Wiens <jordan@psifertex.com>2016-07-24 19:13:40 -0400
committerJordan Wiens <jordan@psifertex.com>2016-07-24 19:13:40 -0400
commitb1900d6ebcc39738885f90fa9f18b28206a74947 (patch)
tree2d4975fe0a347af7101200c48e4a8df82ca780ae /mkdocs-material/src/assets/stylesheets/modules/drawer
parent754ea372c66afad144988fcab2d7cf1fdbb3f2fc (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')
-rw-r--r--mkdocs-material/src/assets/stylesheets/modules/drawer/_animation.scss81
-rw-r--r--mkdocs-material/src/assets/stylesheets/modules/drawer/_appearance.scss143
-rw-r--r--mkdocs-material/src/assets/stylesheets/modules/drawer/_layout.scss305
-rw-r--r--mkdocs-material/src/assets/stylesheets/modules/drawer/_typography.scss68
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