diff options
Diffstat (limited to 'packages/gitbook-plugin-theme-default/less')
15 files changed, 901 insertions, 0 deletions
diff --git a/packages/gitbook-plugin-theme-default/less/Body.less b/packages/gitbook-plugin-theme-default/less/Body.less new file mode 100644 index 0000000..4bc33db --- /dev/null +++ b/packages/gitbook-plugin-theme-default/less/Body.less @@ -0,0 +1,9 @@ +.Body-Flex { + .flex(1 0 auto); +} + +.Body { + overflow: auto; + width: 100%; + height: 100%; +} diff --git a/packages/gitbook-plugin-theme-default/less/Button.less b/packages/gitbook-plugin-theme-default/less/Button.less new file mode 100644 index 0000000..336d16e --- /dev/null +++ b/packages/gitbook-plugin-theme-default/less/Button.less @@ -0,0 +1,22 @@ +.GitBook-Button { + border: 0; + background-color: transparent; + background: @button-background; + color: @button-color; + text-align: center; + line-height: @line-height-base; + outline: none; + padding: @button-padding; + + &:hover { + color: @button-hover-color; + } + + &:focus, &:hover { + outline: none; + } +} + +.GitBook-ButtonGroup { + display: inline-block; +} diff --git a/packages/gitbook-plugin-theme-default/less/Dropdown.less b/packages/gitbook-plugin-theme-default/less/Dropdown.less new file mode 100644 index 0000000..2c341e4 --- /dev/null +++ b/packages/gitbook-plugin-theme-default/less/Dropdown.less @@ -0,0 +1,56 @@ +.GitBook-Dropdown { + display: inline-block; + position: relative; +} + +.GitBook-DropdownMenu { + position: absolute; + top: 100%; + right: 0; + z-index: 300; + border: 1px solid @dropdown-border-color; + margin: 5px; + margin-top: 0px; + border-radius: 3px; + background: @dropdown-background; + + &:before { + content: " "; + width: 0; + height: 0; + border-left: @dropdown-arrow-width solid transparent; + border-right: @dropdown-arrow-width solid transparent; + border-bottom: @dropdown-arrow-width solid @dropdown-border-color; + position: absolute; + top: -@dropdown-arrow-width; + right: 10px; + } + + &:after { + content: " "; + width: 0; + height: 0; + border-left: (@dropdown-arrow-width - 1) solid transparent; + border-right: (@dropdown-arrow-width - 1) solid transparent; + border-bottom: (@dropdown-arrow-width - 1) solid @dropdown-background; + position: absolute; + top: -(@dropdown-arrow-width - 1); + right: 11px; + } +} + +.GitBook-DropdownItem { + padding: @dropdown-padding-v @dropdown-padding-h; +} + +.GitBook-DropdownItemLink { + width: 100%; + display: inline-block; + padding: @dropdown-padding-v @dropdown-padding-h; + text-align: center; + color: @dropdown-color; + + &:hover { + color: @dropdown-hover-color; + } +} diff --git a/packages/gitbook-plugin-theme-default/less/LoadingBar.less b/packages/gitbook-plugin-theme-default/less/LoadingBar.less new file mode 100644 index 0000000..1fca2ea --- /dev/null +++ b/packages/gitbook-plugin-theme-default/less/LoadingBar.less @@ -0,0 +1,30 @@ +.LoadingBar { + pointer-events: none; + transition: 400ms linear all; + + .LoadingBar-Bar { + background: @color-primary; + height: 2px; + + position: fixed; + top: 0; + left: 0; + z-index: 10000; + display: none; + width: 100%; + border-radius: 0 1px 1px 0; + transition: width 350ms; + } + + .LoadingBar-Shadow { + content: ''; + position: absolute; + top: 0; + right: 0; + width: 70px; + height: 2px; + border-radius: 50%; + opacity: .45; + box-shadow: @color-primary 1px 0 6px 1px; + } +} diff --git a/packages/gitbook-plugin-theme-default/less/Page.less b/packages/gitbook-plugin-theme-default/less/Page.less new file mode 100644 index 0000000..6011533 --- /dev/null +++ b/packages/gitbook-plugin-theme-default/less/Page.less @@ -0,0 +1,16 @@ +.PageContainer { + position: relative; + outline: none; + width: 100%; + max-width: @page-width; + margin: 0px auto; + padding: 20px 15px 40px 15px; + font-size: @page-font-size; + .gitbook-markdown(@md-color: @page-color, @md-line-height: @page-line-height); + overflow: visible; + + .glossary-term { + cursor: help; + text-decoration: underline; + } +} diff --git a/packages/gitbook-plugin-theme-default/less/Panel.less b/packages/gitbook-plugin-theme-default/less/Panel.less new file mode 100644 index 0000000..507396c --- /dev/null +++ b/packages/gitbook-plugin-theme-default/less/Panel.less @@ -0,0 +1,7 @@ +.GitBook-Panel { + border: 2px solid #f5f5f5; + padding: 10px; + background: #fafafa; + border-radius: 2px; + margin-top: 20px; +} diff --git a/packages/gitbook-plugin-theme-default/less/Search.less b/packages/gitbook-plugin-theme-default/less/Search.less new file mode 100644 index 0000000..faa871f --- /dev/null +++ b/packages/gitbook-plugin-theme-default/less/Search.less @@ -0,0 +1,38 @@ +.Search-Input { + padding: 6px; + background: transparent; + transition: top 0.5s ease; + background: #fff; + border-bottom: 1px solid @sidebar-border-color; + border-top: 1px solid @sidebar-border-color; + margin-bottom: 10px; + + // Move top to hide top border + margin-top: -1px; + + input, input:focus, input:hover { + width: 90%; // 10% room for clear input X + background: transparent; + border: 1px solid transparent; + box-shadow: none; + outline: none; + line-height: 22px; + padding: 7px 7px; + color: inherit; + } +} + +.Search-Clear { + width: 10%; + display: inline-block; + text-align: center; + font-size: 14px; + line-height: 22px; + color: @search-clear-color; + cursor: pointer; +} + + +.Search-MatchSpan { + background: @search-highlight-color; +} diff --git a/packages/gitbook-plugin-theme-default/less/Sidebar.less b/packages/gitbook-plugin-theme-default/less/Sidebar.less new file mode 100644 index 0000000..1689b9f --- /dev/null +++ b/packages/gitbook-plugin-theme-default/less/Sidebar.less @@ -0,0 +1,29 @@ +.Sidebar-Flex { + .flex(0 0 @sidebar-width); + + &.Layout-enter { + margin-left: -@sidebar-width; + + &.Layout-enter-active { + margin-left: 0; + transition: margin-left 250ms ease-in-out; + } + } + + &.Layout-leave { + margin-left: 0; + + &.Layout-leave-active { + margin-left: -@sidebar-width; + transition: margin-left 250ms ease-in-out; + } + } +} + +.Sidebar { + height: 100%; + background: @sidebar-background; + background: rgb(250, 250, 250); + border-right: 1px solid @sidebar-border-color; + overflow-y: auto; +} diff --git a/packages/gitbook-plugin-theme-default/less/Summary.less b/packages/gitbook-plugin-theme-default/less/Summary.less new file mode 100644 index 0000000..1e1e8ba --- /dev/null +++ b/packages/gitbook-plugin-theme-default/less/Summary.less @@ -0,0 +1,51 @@ +.Summary { + +} + +.SummaryPart { + +} + +.SummaryPart-Title { + margin: 0px; + padding: 2*@summary-article-padding-v @summary-article-padding-h; + text-transform: uppercase; + color: @summary-header-color; + font-size: inherit; + font-weight: inherit; +} + +.SummaryArticles { + list-style: none; + margin: 0px; + padding: 0px; +} + +.SummaryArticle { + list-style: none; + + a, span { + display: block; + padding: @summary-article-padding-v @summary-article-padding-h; + border-bottom: none; + color: @summary-article-color; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + position: relative; + text-decoration: none; + outline: none; + } + + a:hover { + text-decoration: none; + color: @summary-article-hover-color; + } + + &.active, &.active:hover { + a { + color: @summary-article-active-color; + background: @summary-article-active-background; + } + } +} diff --git a/packages/gitbook-plugin-theme-default/less/Toolbar.less b/packages/gitbook-plugin-theme-default/less/Toolbar.less new file mode 100644 index 0000000..8c59d96 --- /dev/null +++ b/packages/gitbook-plugin-theme-default/less/Toolbar.less @@ -0,0 +1,27 @@ +.Toolbar { + .Toolbar-Title { + padding: 0px 20px; + margin: 0; + font-size: 20px; + font-weight: 200; + text-align: center; + line-height: 50px; + opacity: 0; + .transition(~"opacity ease .2s"); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: @button-hover-color; + + a, a:hover { + text-decoration: none; + color: inherit; + } + } + + &:hover { + .Toolbar-Title { + opacity: 1; + } + } +} diff --git a/packages/gitbook-plugin-theme-default/less/Tooltipped.less b/packages/gitbook-plugin-theme-default/less/Tooltipped.less new file mode 100644 index 0000000..126daab --- /dev/null +++ b/packages/gitbook-plugin-theme-default/less/Tooltipped.less @@ -0,0 +1,100 @@ +.GitBook-Tooltipped { + display: inline-block; + position: relative; + + &:hover, &.Tooltipped-o { + &:after { + line-height: 1em; + background: @tooltip-background; + border-radius: @tooltip-radius; + bottom: auto; + top: ~"calc(100% + 10px)"; + color: @tooltip-color; + content: attr(aria-label); + display: block; + left: 50%; + padding: 5px 5px; + position: absolute; + white-space: nowrap; + z-index: @zindex-tooltip; + font-size: 13px; + text-transform: none; + font-weight: @font-size-base; + pointer-events: none; + transform: translateX(-50%); + } + + &:before { + border: solid; + border-color: @tooltip-background transparent; + bottom:auto; + top: ~"calc(100% + 5px)"; + border-width: 0px 5px 5px 5px; + content: ""; + display: block; + left: 50%; + position: absolute; + z-index: @zindex-tooltip+1; + transform: translateX(-50%); + } + } + + .north() { + &:after { + top: auto; + bottom: ~"calc(100% + 10px)"; + transform: translateX(0%); + } + &:before { + top: auto; + border-width: 5px 5px 0px 5px; + bottom: ~"calc(100% + 5px)"; + transform: translateX(0%); + } + } + .west() { + &:after { + left: auto; + right: 5px; + transform: translateX(0%); + } + &:before { + left: auto; + right: 10px; + transform: translateX(0%); + } + } + .east() { + &:after { + right: auto; + left: 5px; + transform: translateX(0%); + } + &:before { + right: auto; + left: 10px; + transform: translateX(0%); + } + } + + &.Tooltipped-e { + .east() + } + + &.Tooltipped-n { + .north(); + } + + &.Tooltipped-ne { + .north(); + .east(); + } + + &.Tooltipped-nw { + .north(); + .west(); + } + &.Tooltipped-sw, &.Tooltipped-w { + .west(); + } +} diff --git a/packages/gitbook-plugin-theme-default/less/main.less b/packages/gitbook-plugin-theme-default/less/main.less new file mode 100644 index 0000000..d3c0dd5 --- /dev/null +++ b/packages/gitbook-plugin-theme-default/less/main.less @@ -0,0 +1,50 @@ +@import "../node_modules/preboot/less/preboot.less"; +@import "../node_modules/gitbook-markdown-css/less/mixin.less"; +@import "../node_modules/font-awesome/less/font-awesome.less"; + +@import "mixins.less"; +@import "reset.less"; +@import "variables.less"; + +@import "Button.less"; +@import "Sidebar.less"; +@import "Summary.less"; +@import "Page.less"; +@import "Toolbar.less"; +@import "Search.less"; +@import "Body.less"; +@import "Dropdown.less"; +@import "LoadingBar.less"; +@import "Tooltipped.less"; +@import "Panel.less"; + +* { + .box-sizing(border-box); + -webkit-overflow-scrolling: touch; + -webkit-tap-highlight-color: transparent; + -webkit-text-size-adjust: none; + -webkit-touch-callout: none; + -webkit-font-smoothing: antialiased; +} + +a { + text-decoration: none; +} + +html, body { + margin: 0px; + height: 100%; +} + +html { + font-size: 62.5%; +} + +body { + text-rendering: optimizeLegibility; + font-smoothing: antialiased; + font-family: @font-family-base; + font-size: @font-size-base; + letter-spacing: .2px; + .text-adjust(100%); +} diff --git a/packages/gitbook-plugin-theme-default/less/mixins.less b/packages/gitbook-plugin-theme-default/less/mixins.less new file mode 100644 index 0000000..e4308b9 --- /dev/null +++ b/packages/gitbook-plugin-theme-default/less/mixins.less @@ -0,0 +1,15 @@ +.text-adjust(@value) { + text-size-adjust: @value; + -ms-text-size-adjust: @value; + -webkit-text-size-adjust: @value; +} + +// The 'flex' shorthand +// - applies to: flex items +// <positive-number>, initial, auto, or none +.flex(@columns: initial) { + -webkit-flex: @columns; + -moz-flex: @columns; + -ms-flex: @columns; + flex: @columns; +} diff --git a/packages/gitbook-plugin-theme-default/less/reset.less b/packages/gitbook-plugin-theme-default/less/reset.less new file mode 100644 index 0000000..a9c6f52 --- /dev/null +++ b/packages/gitbook-plugin-theme-default/less/reset.less @@ -0,0 +1,396 @@ +/*! normalize.css v2.1.0 | MIT License | git.io/normalize */ + +/* ========================================================================== + HTML5 display definitions + ========================================================================== */ + +/** + * Correct `block` display not defined in IE 8/9. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section, +summary { + display: block; +} + +/** + * Correct `inline-block` display not defined in IE 8/9. + */ + +audio, +canvas, +video { + display: inline-block; +} + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Address styling not present in IE 8/9. + */ + +[hidden] { + display: none; +} + +/* ========================================================================== + Base + ========================================================================== */ + +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ + +html { + font-family: sans-serif; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + -ms-text-size-adjust: 100%; /* 2 */ +} + +/** + * Remove default margin. + */ + +body { + margin: 0; +} + +/* ========================================================================== + Links + ========================================================================== */ + +/** + * Address `outline` inconsistency between Chrome and other browsers. + */ + +a:focus { + outline: thin dotted; +} + +/** + * Improve readability when focused and also mouse hovered in all browsers. + */ + +a:active, +a:hover { + outline: 0; +} + +/* ========================================================================== + Typography + ========================================================================== */ + +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari 5, and Chrome. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/** + * Address styling not present in IE 8/9, Safari 5, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/** + * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. + */ + +b, +strong { + font-weight: bold; +} + +/** + * Address styling not present in Safari 5 and Chrome. + */ + +dfn { + font-style: italic; +} + +/** + * Address differences between Firefox and other browsers. + */ + +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + +/** + * Address styling not present in IE 8/9. + */ + +mark { + background: #ff0; + color: #000; +} + +/** + * Correct font family set oddly in Safari 5 and Chrome. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, serif; + font-size: 1em; +} + +/** + * Improve readability of pre-formatted text in all browsers. + */ + +pre { + white-space: pre-wrap; +} + +/** + * Set consistent quote types. + */ + +q { + quotes: "\201C" "\201D" "\2018" "\2019"; +} + +/** + * Address inconsistent and variable font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* ========================================================================== + Embedded content + ========================================================================== */ + +/** + * Remove border when inside `a` element in IE 8/9. + */ + +img { + border: 0; +} + +/** + * Correct overflow displayed oddly in IE 9. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* ========================================================================== + Figures + ========================================================================== */ + +/** + * Address margin not present in IE 8/9 and Safari 5. + */ + +figure { + margin: 0; +} + +/* ========================================================================== + Forms + ========================================================================== */ + +/** + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct `color` not being inherited in IE 8/9. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ + +legend { + border: 0; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * 1. Correct font family not being inherited in all browsers. + * 2. Correct font size not being inherited in all browsers. + * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. + */ + +button, +input, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 2 */ + margin: 0; /* 3 */ +} + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +button, +input { + line-height: normal; +} + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. + * Correct `select` style inheritance in Firefox 4+ and Opera. + */ + +button, +select { + text-transform: none; +} + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ +} + +/** + * Re-set default cursor for disabled elements. + */ + +button[disabled], +html input[disabled] { + cursor: default; +} + +/** + * 1. Address box sizing set to `content-box` in IE 8/9. + * 2. Remove excess padding in IE 8/9. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome + * (include `-moz` to future-proof). + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; +} + +/** + * Remove inner padding and search cancel button in Safari 5 and Chrome + * on OS X. + */ + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * Remove inner padding and border in Firefox 4+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/** + * 1. Remove default vertical scrollbar in IE 8/9. + * 2. Improve readability and alignment in all browsers. + */ + +textarea { + overflow: auto; /* 1 */ + vertical-align: top; /* 2 */ +} + +/* ========================================================================== + Tables + ========================================================================== */ + +/** + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/packages/gitbook-plugin-theme-default/less/variables.less b/packages/gitbook-plugin-theme-default/less/variables.less new file mode 100644 index 0000000..5c6842d --- /dev/null +++ b/packages/gitbook-plugin-theme-default/less/variables.less @@ -0,0 +1,55 @@ +// Colors +@color-primary: hsl(207, 100%, 50%); // rgb(44, 106, 254); +// Fonts +@font-family-serif: Georgia, serif; +@font-family-sans: "Helvetica Neue", Helvetica, Arial, sans-serif; +@font-family-base: @font-family-sans; +// Font sizes +@font-size-base: 14px; +@font-size-large: ceil(@font-size-base * 1.25); // ~18px +@font-size-small: ceil(@font-size-base * 0.85); // ~12px +@line-height-base: 1.428571429; // 20/14 +@line-height-computed: floor(@font-size-base * @line-height-base); +// Sidebar +@sidebar-background: rgb(250, 250, 250); +@sidebar-border-color: rgba(0, 0, 0, 0.0666667); +@sidebar-width: 300px; +// Summary +@summary-header-color: #939da3; +@summary-article-padding-v: 10px; +@summary-article-padding-h: 15px; +@summary-article-color: hsl(207, 15%, 25%); +@summary-article-hover-color: @color-primary; +@summary-article-active-color: @summary-article-color; +@summary-article-active-background: #f5f5f5; +// Page +@page-width: 800px; +@page-color: #333333; +@page-line-height: 1.7; +@page-font-size: 16px; +// Button +@button-padding: 19px; +@button-background: transparent; +@button-color: #bbb; +@button-hover-color: #a1a1a1; +// Dropdown +@dropdown-padding-v: 10px; +@dropdown-padding-h: 15px; +@dropdown-arrow-width: 8px; +@dropdown-border-color: #e5e5e5; +@dropdown-color: @button-color; +@dropdown-hover-color: @button-hover-color; +@dropdown-background: #fff; +// Tooltip +@tooltip-background: rgba(0,0,0,.8); +@tooltip-radius: 3px; +@tooltip-color: #fff; +// Search +@search-highlight-color: rgba(255, 220, 0, 0.4); +@search-clear-color: @button-color; +// Font awesome +@path-assets: '.'; +@path-fonts: '@{path-assets}/fonts'; +@fa-font-path: '@{path-fonts}/fontawesome'; +// Z-indexes +@zindex-tooltip: 300; |