mirror of https://github.com/freeCodeCamp/devdocs
These are the simple cases, and the more complex ones will be covered by future commits. I’ve also replaced $fooZ ± 1 with the appropriate variable to avoid a runtime `calc()`.pull/858/head
Jed Fox
7 years ago
parent
6ecd9d8cc2
commit
ffefb72305
@ -1,92 +1,98 @@
|
||||
$baseFont: -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
|
||||
$monoFont: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
|
||||
$boldFontWeight: 500;
|
||||
$bolderFontWeight: 600;
|
||||
|
||||
$style: 'dark';
|
||||
|
||||
$maxWidth: 80rem;
|
||||
$headerHeight: 3rem;
|
||||
$sidebarWidth: 20rem;
|
||||
$sidebarMediumWidth: 16rem;
|
||||
|
||||
$documentBackground: #222;
|
||||
$mediumScreen: '(max-width: 800px)';
|
||||
// TODO: convert uses of these to CSS variables
|
||||
$selectionText: #fff;
|
||||
$sidebarBackground: #24282a;
|
||||
$headerBackground: #1c1c1c;
|
||||
$contentBackground: #33373a;
|
||||
$inputFocusBorder: false;
|
||||
html.dark {
|
||||
--baseFont: -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
|
||||
--monoFont: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
|
||||
--boldFontWeight: 500;
|
||||
--bolderFontWeight: 600;
|
||||
|
||||
$textColor: #cbd0d0;
|
||||
$textColorLight: #9da5ad;
|
||||
$textColorLighter: #77787a;
|
||||
$textColorRed: #f44336;
|
||||
--maxWidth: 80rem;
|
||||
--headerHeight: 3rem;
|
||||
--sidebarWidth: 20rem;
|
||||
--sidebarMediumWidth: 16rem;
|
||||
|
||||
$inputFocusBorder: false;
|
||||
--documentBackground: #222;
|
||||
--contentBackground: $contentBackground;
|
||||
|
||||
$focusBackground: #3f4042;
|
||||
$focusBorder: #000;
|
||||
$focusText: #f7f2f2;
|
||||
--textColor: #cbd0d0;
|
||||
--textColorLight: #9da5ad;
|
||||
--textColorLighter: #77787a;
|
||||
--textColorRed: #f44336;
|
||||
|
||||
$loadingText: #5d6164;
|
||||
$splashText: $loadingText;
|
||||
--inputFocusBorder: $inputFocusBorder;
|
||||
|
||||
$selectionBackground: #007acc;
|
||||
$selectionBorder: #000;
|
||||
$selectionText: #fff;
|
||||
--focusBackground: #3f4042;
|
||||
--focusBorder: #000;
|
||||
--focusText: #f7f2f2;
|
||||
|
||||
$highlightBackground: #64675f;
|
||||
--loadingText: #5d6164;
|
||||
--splashText: --loadingText;
|
||||
|
||||
$linkColor: $textColor;
|
||||
$linkColorHover: white;
|
||||
$linkTextDecoration: underline;
|
||||
--selectionBackground: #007acc;
|
||||
--selectionBorder: #000;
|
||||
--selectionText: $selectionText;
|
||||
|
||||
$headerBackground: #1c1c1c;
|
||||
$headerBorder: #000;
|
||||
--highlightBackground: #64675f;
|
||||
|
||||
$sidebarBackground: #24282a;
|
||||
$sidebarBorder: #000;
|
||||
--linkColor: var(--textColor);
|
||||
--linkColorHover: white;
|
||||
--linkTextDecoration: underline;
|
||||
|
||||
$scrollbarColor: #6c6c6f;
|
||||
$scrollbarColorHover: #949697;
|
||||
--headerBackground: $headerBackground;
|
||||
--headerBorder: #000;
|
||||
|
||||
$pathBackground: $headerBackground;
|
||||
$pathBorder: $headerBorder;
|
||||
--sidebarBackground: $sidebarBackground;
|
||||
--sidebarBorder: #000;
|
||||
|
||||
$noticeBackground: $sidebarBackground;
|
||||
$noticeBorder: $sidebarBorder;
|
||||
--scrollbarColor: #6c6c6f;
|
||||
--scrollbarColorHover: #949697;
|
||||
|
||||
$boxBackground: $sidebarBackground;
|
||||
$boxBorder: $headerBorder;
|
||||
$boxBorderLight: $headerBorder;
|
||||
$boxHeaderColor: #dbe4e4;
|
||||
$boxHeaderBackground: $sidebarBackground;
|
||||
--pathBackground: var(--headerBackground);
|
||||
--pathBorder: var(--headerBorder);
|
||||
|
||||
$noteBackground: #45474b;
|
||||
$noteBorder: #000;
|
||||
--noticeBackground: var(--sidebarBackground);
|
||||
--noticeBorder: var(--sidebarBorder);
|
||||
|
||||
$noteGreenBackground: #284a2a;
|
||||
$noteGreenBorder: #000;
|
||||
--boxBackground: var(--sidebarBackground);
|
||||
--boxBorder: var(--headerBorder);
|
||||
--boxBorderLight: var(--headerBorder);
|
||||
--boxHeaderColor: #dbe4e4;
|
||||
--boxHeaderBackground: var(--sidebarBackground);
|
||||
|
||||
$noteBlueBackground: #2a4151;
|
||||
$noteBlueBorder: #000;
|
||||
--noteBackground: #45474b;
|
||||
--noteBorder: #000;
|
||||
|
||||
$noteOrangeBackground: #563322;
|
||||
$noteOrangeBorder: #000;
|
||||
--noteGreenBackground: #284a2a;
|
||||
--noteGreenBorder: #000;
|
||||
|
||||
$noteRedBackground: #603033;
|
||||
$noteRedBorder: #000;
|
||||
--noteBlueBackground: #2a4151;
|
||||
--noteBlueBorder: #000;
|
||||
|
||||
$labelBackground: $boxBackground;
|
||||
--noteOrangeBackground: #563322;
|
||||
--noteOrangeBorder: #000;
|
||||
|
||||
$notifBackground: rgba(#555, .95);
|
||||
$notifBorder: 1px solid #000;
|
||||
$notifColor: #fff;
|
||||
$notifColorLight: #ccc;
|
||||
--noteRedBackground: #603033;
|
||||
--noteRedBorder: #000;
|
||||
|
||||
$tipBackground: $notifBackground;
|
||||
$tipBorder: $notifBorder;
|
||||
--labelBackground: var(--boxBackground);
|
||||
|
||||
$mediumScreen: '(max-width: 800px)';
|
||||
--notifBackground: rgba(#555, .95);
|
||||
--notifBorder: 1px solid #000;
|
||||
--notifColor: #fff;
|
||||
--notifColorLight: #ccc;
|
||||
|
||||
--tipBackground: var(--notifBackground);
|
||||
--tipBorder: var(--notifBorder);
|
||||
|
||||
$contentZ: 1;
|
||||
$sidebarZ: 2;
|
||||
$headerZ: 3;
|
||||
$noticeZ: 4;
|
||||
$hoverZ: 5;
|
||||
--contentZ: 1;
|
||||
--sidebarZ: 2;
|
||||
--headerZ: 3;
|
||||
--noticeZ: 4;
|
||||
--hoverZ: 5;
|
||||
}
|
||||
|
||||
@ -1,92 +1,99 @@
|
||||
$baseFont: -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
|
||||
$monoFont: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
|
||||
$boldFontWeight: 500;
|
||||
$bolderFontWeight: 600;
|
||||
|
||||
$style: 'light';
|
||||
$mediumScreen: '(max-width: 800px)';
|
||||
// TODO: convert uses of these to CSS variables
|
||||
$selectionText: #fff;
|
||||
$sidebarBackground: #f9f9f9;
|
||||
$headerBackground: #eee;
|
||||
$contentBackground: #fff;
|
||||
$inputFocusBorder: #35b5f4;
|
||||
|
||||
$maxWidth: 80rem;
|
||||
$headerHeight: 3rem;
|
||||
$sidebarWidth: 20rem;
|
||||
$sidebarMediumWidth: 16rem;
|
||||
html {
|
||||
--baseFont: -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
|
||||
--monoFont: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
|
||||
--boldFontWeight: 500;
|
||||
--bolderFontWeight: 600;
|
||||
|
||||
$documentBackground: #f3f3f3;
|
||||
$contentBackground: #fff;
|
||||
--maxWidth: 80rem;
|
||||
--headerHeight: 3rem;
|
||||
--sidebarWidth: 20rem;
|
||||
--sidebarMediumWidth: 16rem;
|
||||
|
||||
$textColor: #333;
|
||||
$textColorLight: #666;
|
||||
$textColorLighter: #888;
|
||||
$textColorRed: #f44336;
|
||||
--documentBackground: #f3f3f3;
|
||||
--contentBackground: $contentBackground;
|
||||
|
||||
$inputFocusBorder: #35b5f4;
|
||||
--textColor: #333;
|
||||
--textColorLight: #666;
|
||||
--textColorLighter: #888;
|
||||
--textColorRed: #f44336;
|
||||
|
||||
$focusBackground: #e5e5e5;
|
||||
$focusBorder: #d4d4d4;
|
||||
$focusText: #000;
|
||||
--inputFocusBorder: $inputFocusBorder;
|
||||
|
||||
$loadingText: #ccc;
|
||||
$splashText: #ccc;
|
||||
--focusBackground: #e5e5e5;
|
||||
--focusBorder: #d4d4d4;
|
||||
--focusText: #000;
|
||||
|
||||
$selectionBackground: #398df0;
|
||||
$selectionBorder: #196fc2;
|
||||
$selectionText: #fff;
|
||||
--loadingText: #ccc;
|
||||
--splashText: #ccc;
|
||||
|
||||
$highlightBackground: #fffdcd;
|
||||
--selectionBackground: #398df0;
|
||||
--selectionBorder: #196fc2;
|
||||
--selectionText: $selectionText;
|
||||
|
||||
$linkColor: #3377c0;
|
||||
$linkColorHover: #2f6cb6;
|
||||
$linkTextDecoration: none;
|
||||
--highlightBackground: #fffdcd;
|
||||
|
||||
$headerBackground: #eee;
|
||||
$headerBorder: #d7d7d7;
|
||||
--linkColor: #3377c0;
|
||||
--linkColorHover: #2f6cb6;
|
||||
--linkTextDecoration: none;
|
||||
|
||||
$sidebarBackground: #f9f9f9;
|
||||
$sidebarBorder: #e1e1e1;
|
||||
--headerBackground: $headerBackground;
|
||||
--headerBorder: #d7d7d7;
|
||||
|
||||
$scrollbarColor: #ccc;
|
||||
$scrollbarColorHover: #999;
|
||||
--sidebarBackground: $sidebarBackground;
|
||||
--sidebarBorder: #e1e1e1;
|
||||
|
||||
$pathBackground: $sidebarBackground;
|
||||
$pathBorder: $sidebarBorder;
|
||||
--scrollbarColor: #ccc;
|
||||
--scrollbarColorHover: #999;
|
||||
|
||||
$noticeBackground: #faf9e2;
|
||||
$noticeBorder: #e2e2c1;
|
||||
--pathBackground: var(--sidebarBackground);
|
||||
--pathBorder: var(--sidebarBorder);
|
||||
|
||||
$boxBackground: #fafafa;
|
||||
$boxBorder: #d8d8d8;
|
||||
$boxBorderLight: #e5e5e5;
|
||||
$boxHeaderColor: $textColor;
|
||||
$boxHeaderBackground: #f5f5f5;
|
||||
--noticeBackground: #faf9e2;
|
||||
--noticeBorder: #e2e2c1;
|
||||
|
||||
$noteBackground: #f8f8dd;
|
||||
$noteBorder: #d3d952;
|
||||
--boxBackground: #fafafa;
|
||||
--boxBorder: #d8d8d8;
|
||||
--boxBorderLight: #e5e5e5;
|
||||
--boxHeaderColor: var(--textColor);
|
||||
--boxHeaderBackground: #f5f5f5;
|
||||
|
||||
$noteGreenBackground: #e7f8e1;
|
||||
$noteGreenBorder: #89da70;
|
||||
--noteBackground: #f8f8dd;
|
||||
--noteBorder: #d3d952;
|
||||
|
||||
$noteBlueBackground: #d4f3fd;
|
||||
$noteBlueBorder: #94bbeb;
|
||||
--noteGreenBackground: #e7f8e1;
|
||||
--noteGreenBorder: #89da70;
|
||||
|
||||
$noteOrangeBackground: #fbe6d1;
|
||||
$noteOrangeBorder: #ec8b01;
|
||||
--noteBlueBackground: #d4f3fd;
|
||||
--noteBlueBorder: #94bbeb;
|
||||
|
||||
$noteRedBackground: #fed5d3;
|
||||
$noteRedBorder: #dc7874;
|
||||
--noteOrangeBackground: #fbe6d1;
|
||||
--noteOrangeBorder: #ec8b01;
|
||||
|
||||
$labelBackground: #f4f4f4;
|
||||
--noteRedBackground: #fed5d3;
|
||||
--noteRedBorder: #dc7874;
|
||||
|
||||
$notifBackground: rgba(#333, .85);
|
||||
$notifBorder: none;
|
||||
$notifColor: #fff;
|
||||
$notifColorLight: #ccc;
|
||||
--labelBackground: #f4f4f4;
|
||||
|
||||
$tipBackground: rgba(#fffdcd, .95);
|
||||
$tipBorder: 1px solid #e7dca9;
|
||||
--notifBackground: rgba(#333, .85);
|
||||
--notifBorder: none;
|
||||
--notifColor: #fff;
|
||||
--notifColorLight: #ccc;
|
||||
|
||||
$mediumScreen: '(max-width: 800px)';
|
||||
--tipBackground: rgba(#fffdcd, .95);
|
||||
--tipBorder: 1px solid #e7dca9;
|
||||
|
||||
$contentZ: 1;
|
||||
$sidebarZ: 2;
|
||||
$headerZ: 3;
|
||||
$noticeZ: 4;
|
||||
$hoverZ: 5;
|
||||
--contentZ: 1;
|
||||
--sidebarZ: 2;
|
||||
--headerZ: 3;
|
||||
--noticeZ: 4;
|
||||
--hoverZ: 5;
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
._dojo {
|
||||
@extend %simple;
|
||||
|
||||
.jsdoc-inheritance { color: $textColorLight; }
|
||||
.jsdoc-inheritance { color: var(--textColorLight); }
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
._yard {
|
||||
@extend %simple;
|
||||
|
||||
.tag_title { font-weight: $boldFontWeight; }
|
||||
.tag_title { font-weight: var(--boldFontWeight); }
|
||||
}
|
||||
|
||||
Loading…
Reference in new issue