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