diff --git a/src/styles/ignite-ui/_variables.scss b/src/styles/ignite-ui/_variables.scss index 2f0989b6..76032044 100644 --- a/src/styles/ignite-ui/_variables.scss +++ b/src/styles/ignite-ui/_variables.scss @@ -1,18 +1,23 @@ +@import '../shared/variables'; + // Palette $primary-color: #222; -$info-color: #0375be; -$warning-color: #fbb13c; -$error-color: #f44336; -$success-color: #00ae88; +$info-color: #4051B5; +$warning-color: #FCB13C; +$error-color: #F54336; +$success-color: #00AE88; +$secondary-1-color: #0099FF; +$secondary-2-color: #6A11AD; +$accent-color: #30C146; +// Palette END + $note-color: #dcdcaa; -$secondary-1-color: #09f; -$secondary-2-color: #6a0dad; -$accent-color: #ff134a; // Font $global-font-family: 'aktiv-grotesk', sans-serif; -$generic-font-weight: 300; +$global-font-weight: 400; $global-radius: 0; +$global-line-height: 24px; // Grays $darkgray: #333; @@ -20,10 +25,11 @@ $midgray: #666; $lightgray: #f1f1f1; // Text -$text-base: #585858; +$text-base: #333; $text-light: #fff; $text-dim-light: #ddd; -$text-dark: #000; +$black: #000; +$text-dark: #222; $title-color: $text-base; // Surface colors @@ -36,6 +42,7 @@ $surface-disabled: #eee; $link-color: $secondary-1-color; $link-hover-color: #23527c; $button-hover: $link-hover-color; +$link-decoration: underline; // Header $header-bg: #222; @@ -62,7 +69,7 @@ $breadcrumb-font-weight: 400; $breadcrumb-margin: 0; // Text highlight -$text-highlight-color: $text-dark; +$text-highlight-color: $black; $text-highlight: $secondary-1-color; // Borders @@ -98,107 +105,121 @@ $footer-bg: #f8f8f8; $main-padding: 124px; $filter-height: 36px; $side-nav-push: $main-padding + $filter-height; +$filter-icon-color: $link-color; $navbar-height: auto; // Toc -$toc-active-color: $text-dark; -$toc-hover-color: $link-color; +$toc-active-color: $info-color; +$toc-hover-color: $info-color; $toc-color: $text-base; -$toc-bg-color: #eff1f2; +$toc-bg-color: #fff; +$toc-font-size: rem(13px); +$toc-expand-stub-color: $info-color; // badge component $new-badge-color: $text-light; $new-badge-bg: $accent-color; $updated-badge-color: $text-light; -$updated-badge-bg: $secondary-2-color; +$updated-badge-bg: $info-color; $badge-radius: 0; -$badge-font-size: 9px; -$badge-padding: 2px; -$badge-font-weight: 400; +$badge-font-size: 10px; +$badge-padding: 4px; +$badge-font-weight: bold; $byzantium: #731963; +// Block Quote +$blockquotes-border-color: $link-color; +$blockquotes-font-style: italic; + +// Ul colors +$ul-bullet-color: $link-color; + +// External Link $external-link-icon: 'open_in_new'; $external-link-icon-padding: 18px; $external-font-weight: inherit; +// Pre tag $pre-bg: $surface-dark; $pre-color: $text-light; $pre-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.80); +// Alert $alert-radius: 0; -$icon-container-width: 72px; -$alert-padding: 16px 16px 16px (16px + $icon-container-width); -$alert-margin: 48px 0; - -$link-alpha: .6; - -$affix-font-weight: 300; - +$icon-container-width: 60px; +$alert-padding: 10px 10px 10px (30px + $icon-container-width); +$alert-margin: 24px 0; $alert-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.26), 0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 2px 1px -1px rgba(0, 0, 0, 0.08); +// Headings anchor link icon +$link-alpha: .6; + +$affix-font-weight: 300; $hljs-copy-btn-radius: 0; // Table $table-header-font-size: 16px; $table-first-col-weight: 400; $table-header-font-size: 18px; -$table-row-bg: #fff; $table-text-color: $text-base; $table-border-color: $border-color; +$table-row-border-color: transparent; $table-text-transform: initial; $table-th-border: none; $table-th-padding: .7rem 1rem; $table-td-padding: .7rem 1rem; +$table-header-background: rgba(0,0,0, .20); +$table-even-bg: rgba(0,0,0, .05); +$table-odd-bg: $surface-light; // Typography // // h1 -$h1-f-size: 2.625rem; -$h1-f-weight: 300; -$h1-l-height: 3rem; -$h1-m-top: 1.5rem; -$h1-m-bottom: 1.5rem; +$h1-f-size: 36px; +$h1-f-weight: bold; +$h1-l-height: 48px; +$h1-m-top: 36px; +$h1-m-bottom: 30px; // h2 -$h2-f-size: 2rem; -$h2-f-weight: 300; -$h2-l-height: 3rem; -$h2-m-top: 2rem; -$h2-m-bottom: 0; +$h2-f-size: 32px; +$h2-f-weight: bold; +$h2-l-height: 36px; +$h2-m-top: 36px; +$h2-m-bottom: 16px; // h3 -$h3-f-size: 1rem; -$h3-f-weight: initial; -$h3-l-height: 1.5rem; -$h3-m-top: 1.5rem; -$h3-m-bottom: 0; +$h3-f-size: 24px; +$h3-f-weight: bold; +$h3-l-height: 32px; +$h3-m-top: 36px; +$h3-m-bottom: 16px; // h4 -$h4-f-size: 1rem; -$h4-f-weight: initial; -$h4-l-height: 1.5rem; -$h4-m-top: 1.5rem; -$h4-m-bottom: 0; +$h4-f-size: 18px; +$h4-f-weight: bold; +$h4-l-height: 24px; +$h4-m-top: 36px; +$h4-m-bottom: 8px; // h5 -$h5-f-size: 1rem; -$h5-f-weight: initial; -$h5-l-height: 1.5rem; -$h5-m-top: 1.5rem; -$h5-m-bottom: 0; +$h5-f-size: 16px; +$h5-f-weight: bold; +$h5-l-height: 20px; +$h5-m-top: 36px; +$h5-m-bottom: 8px; // h6 -$h6-f-size: 1rem; -$h6-f-weight: 400; -$h6-l-height: 1.5rem; -$h6-m-top: 0rem; -$h6-m-bottom: .5rem; +$h6-f-size: 14px; +$h6-f-weight: bold; +$h6-l-height: 16px; +$h6-m-top: 36px; +$h6-m-bottom: 8px; // Paragraph -$p-l-height: 2rem; +$p-l-height: rem(32px); $p-m-bottom: 1.5rem; -$p-m-top: 0; diff --git a/src/styles/ignite-ui/main.scss b/src/styles/ignite-ui/main.scss index 6b281ee9..beb89601 100644 --- a/src/styles/ignite-ui/main.scss +++ b/src/styles/ignite-ui/main.scss @@ -1,4 +1,5 @@ @import '~highlight.js/scss/vs2015.scss'; +@import '../shared/mixins'; @import 'variables'; @import '../shared/global'; diff --git a/src/styles/shared/_global.scss b/src/styles/shared/_global.scss index c872a407..9aa0ba09 100644 --- a/src/styles/shared/_global.scss +++ b/src/styles/shared/_global.scss @@ -5,7 +5,7 @@ @import 'components/index'; @import 'animations'; -$sg-items-gap: 8px; +$sg-items-gap: rem(8px); .sg-palette { display: flex; @@ -15,58 +15,6 @@ $sg-items-gap: 8px; margin: 0 (-$sg-items-gap) 1.5rem; } -.dfx-seo-banner { - margin: 20px auto; - cursor: pointer; - > img { - width: 100%; - } -} - -.fancy-details { - details { - padding: 4px 8px; - margin-bottom: 4px; - border-radius: $global-radius; - - > * { - margin-bottom: 4px; - } - - summary { - border-radius: $global-radius; - cursor: pointer; - - &::before { - content: '+'; - color: $link-color; - margin-right: 4px; - } - - &:focus, - &:hover { - color: $text-dark; - - &::before { - color: $link-hover-color; - } - } - } - - &[open] { - background: #f9f9f9; - - summary { - color: $text-dark; - - &::before { - content: '- '; - } - } - } - } -} - .sg-color-block { display: flex; align-items: flex-start; @@ -209,3 +157,16 @@ $sg-items-gap: 8px; margin: $sg-items-gap } } + +.dfx-seo-banner { + margin: 20px auto; + cursor: pointer; + > img { + width: 100%; + } +} + +.form-control { + border-radius: $header-search-radius; +} + diff --git a/src/styles/shared/_mixins.scss b/src/styles/shared/_mixins.scss new file mode 100644 index 00000000..a9aaa926 --- /dev/null +++ b/src/styles/shared/_mixins.scss @@ -0,0 +1,13 @@ + +/// Pixels to root relative values (rem). +/// @param {number|string} $pixels - The pixel value to be converted. +/// @param {number|string} $context [$browser-context] - The base context to convert against. +@function rem($pixels, $context: $browser-context) { + @if (unitless($pixels)) { + $pixels: $pixels * 1px; + } + @if (unitless($context)) { + $context: $context * 1px; + } + @return ($pixels / $context) * 1rem; +} diff --git a/src/styles/shared/_typography.scss b/src/styles/shared/_typography.scss index 8fbe9545..f40524dc 100644 --- a/src/styles/shared/_typography.scss +++ b/src/styles/shared/_typography.scss @@ -3,20 +3,20 @@ background: $text-highlight; } +body, html, .root { - font-size: 16px; - line-height: 24px; + font-family: $global-font-family; + font-size: $browser-context; + font-weight: $global-font-weight; + line-height: $global-line-height; + color: $text-base; -webkit-font-smoothing: antialiased; } body, .article { - font-family: $global-font-family; - font-size: 1rem; - line-height: 1.5rem; margin: auto; - color: $text-base; overflow-x: hidden; } @@ -38,12 +38,12 @@ h6, .h6 { } } -h1, -h2, -h3, -h4, -h5, -h6, +h1, .h1, +h2, .h2, +h3, .h3, +h4, .h4, +h5, .h5, +h6, .h6, .text-break { word-wrap: break-word; word-break: break-word; @@ -119,13 +119,27 @@ ol, pre, table, blockquote { - margin-top: $p-m-top; margin-bottom: $p-m-bottom; - font-weight: $generic-font-weight; + font-weight: $global-font-weight; &.highlight { - font-weight: 400; - color: #333; + font-weight: $global-font-weight; + color: $darkgray; + } +} + +blockquote { + border-left-color: $blockquotes-border-color; + font-style: $blockquotes-font-style; + font-size: inherit; + + > h1, > .h1, + > h2, > .h2, + > h3, > .h3, + > h4, > .h4, + > h5, > .h5, + > h6, > .h6, { + margin-top: 0; } } @@ -141,6 +155,24 @@ ol ul { margin-bottom: 0; } +.content ul:not(.pagination) { + list-style: none; + position: relative; + + li { + &::before { + content: "\2022"; + color: $ul-bullet-color; + position: absolute; + font-weight: bold; + display: flex; + margin-left: -1em; + align-items: center; + justify-content: center; + } + } +} + hr, .hr { border: 1px solid; diff --git a/src/styles/shared/_variables.scss b/src/styles/shared/_variables.scss new file mode 100644 index 00000000..10db0a82 --- /dev/null +++ b/src/styles/shared/_variables.scss @@ -0,0 +1 @@ +$browser-context: 16px !default; diff --git a/src/styles/shared/components/_affix.scss b/src/styles/shared/components/_affix.scss index 74fb5290..bf4ab0ad 100644 --- a/src/styles/shared/components/_affix.scss +++ b/src/styles/shared/components/_affix.scss @@ -171,3 +171,7 @@ .affix ul > li > a:hover:before { display: block; // white-space: nowrap; } + +.nav-link { + text-decoration: none !important; +} diff --git a/src/styles/shared/components/_details.scss b/src/styles/shared/components/_details.scss new file mode 100644 index 00000000..cb2e5dfd --- /dev/null +++ b/src/styles/shared/components/_details.scss @@ -0,0 +1,47 @@ +.fancy-details { + details { + padding: rem(4px) rem(8px) rem(4px) rem(20px); + margin-bottom: rem(4px); + border-radius: $global-radius; + position: relative; + + > * { + margin-bottom: 4px; + } + + summary { + border-radius: $global-radius; + cursor: pointer; + display: flex; + align-items: center; + + &::before { + content: '+'; + color: $link-color; + position: absolute; + left: 0; + font-size: rem(20px); + display: flex; + padding-top: rem(2px); + align-items: center; + } + + &:focus { + outline-color: transparent; + } + + &:focus, + &:hover { + color: $link-color; + } + } + + &[open] { + summary { + &::before { + content: '- '; + } + } + } + } +} diff --git a/src/styles/shared/components/_index.scss b/src/styles/shared/components/_index.scss index 6e6f2501..322c8cbf 100644 --- a/src/styles/shared/components/_index.scss +++ b/src/styles/shared/components/_index.scss @@ -18,3 +18,4 @@ @import 'code-view'; @import 'colors'; @import 'badges'; +@import 'details'; diff --git a/src/styles/shared/components/_main-content.scss b/src/styles/shared/components/_main-content.scss index f0c5c245..2e0d38d6 100644 --- a/src/styles/shared/components/_main-content.scss +++ b/src/styles/shared/components/_main-content.scss @@ -32,12 +32,17 @@ } } +a[href^="#"] { + text-decoration: $link-decoration; +} + .external-link { display: inline-flex; align-items: center; position: relative; padding-right: $external-link-icon-padding; white-space: nowrap; + text-decoration: none !important; &::after { font-family: Material Icons; @@ -46,9 +51,9 @@ margin-left: 2px; min-width: 16px; max-width: 16px; - overflow: hidden; right: 0; position: absolute; + overflow: visible; } &-parent { diff --git a/src/styles/shared/components/_sidenav.scss b/src/styles/shared/components/_sidenav.scss index d8050feb..a06d73d3 100644 --- a/src/styles/shared/components/_sidenav.scss +++ b/src/styles/shared/components/_sidenav.scss @@ -1,24 +1,24 @@ .toc { background-color: $toc-bg-color !important; overflow: hidden; - padding-bottom: 30px; + padding-bottom: rem(30px); } .sidetoc.shiftup { - bottom: 70px; + bottom: rem(70px); } .sidetoc-expand > .caret { margin-left: 0; - margin-top: -2px; + margin-top: rem(-2px); } .sidetoc-expand > .caret-side { - border-left: 4px solid; - border-top: 4px solid transparent; - border-bottom: 4px solid transparent; - margin-left: 4px; - margin-top: -4px; + border-left: rem(4px) solid; + border-top: rem(4px) solid transparent; + border-bottom: rem(4px) solid transparent; + margin-left: rem(4px); + margin-top: rem(-4px); } .sidetoc-heading { @@ -28,13 +28,14 @@ .expand-stub { position: absolute; top: 0; - left: 10px; - padding: 6px; - color: $link-color; - font-weight: 500; + left: rem(10px); + padding: rem(6px); + color: $toc-expand-stub-color; + font-weight: 600; display: flex; align-items: center; - height: 30px; + height: rem(30px); + font-size: rem(16px); } .toc .nav > li > a.sidetoc-expand { @@ -93,7 +94,7 @@ } .toc ul { - font-size: 12px; + font-size: rem(12px); } .toc-toggle { @@ -102,15 +103,15 @@ .sidetoc-expand > .caret { margin-left: 0; - margin-top: -2px; + margin-top: rem(-2px); } .sidetoc-expand > .caret-side { - border-left: 4px solid; - border-top: 4px solid transparent; - border-bottom: 4px solid transparent; - margin-left: 4px; - margin-top: -4px; + border-left: rem(4px) solid; + border-top: rem(4px) solid transparent; + border-bottom: rem(4px) solid transparent; + margin-left: rem(4px); + margin-top: rem(-4px); } .sidetoc-heading { @@ -123,13 +124,13 @@ color: $text-base; padding: 5px; position: relative; - margin: 0 5px 0 5px; + margin: 0 rem(5px) 0 rem(5px); } .toc-filter > input { border: 0; color: $text-base; - padding-left: 20px; + padding-left: rem(20px); width: 100%; } @@ -139,19 +140,19 @@ .toc-filter > .filter-icon { position: absolute; - top: 10px; - left: 5px; + top: rem(10px); + left: rem(5px); } .sidenav { background-color: $toc-bg-color; - margin-right: -15px; + margin-right: rem(-15px); border-right: 1px solid $border-color; &__header { - padding: 24px 0 0 16px !important; + padding: rem(24px) 0 0 rem(16px) !important; position: relative; - font-size: 14px !important; + font-size: rem(14px) !important; color: #000 !important; font-weight: 500 !important; text-transform: uppercase !important; @@ -162,14 +163,17 @@ .nav { li { position: relative; - font-size: 13px; + font-size: $toc-font-size; margin: 0; + user-select: none; .topic-name { max-width: 95%; overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + line-height: rem(16px); + // Intentionally remove the ellipsis after discussion with the designers + //text-overflow: ellipsis; + //white-space: nowrap; } a { @@ -179,8 +183,8 @@ } a:not(.sidenav__header) { - padding: 3px 0 3px 0; - margin-left: 28px; + padding: rem(7px) 0 rem(7px) 0; + margin-left: rem(30px); } } @@ -190,32 +194,31 @@ &::before { position: absolute; content: ''; - width: 2px; + width: rem(2px); top: 0; bottom: 0; left: 0; } > a { - color: $toc-active-color; - font-weight: 500; + color: $toc-active-color !important; + font-weight: bold !important; } > a:hover { - color: $toc-hover-color; + color: $toc-hover-color !important; } } li.new { - a.new:not(.sidenav__header) { - padding: 3px 45px 3px 0; - margin-left: 28px; + padding: rem(7px) rem(45px) rem(7px) 0; + margin-left: rem(30px); } a.updated:not(.sidenav__header) { - padding: 3px 75px 3px 0; - margin-left: 28px; + padding: rem(7px) rem(75px) rem(7px) 0; + margin-left: rem(30px); } > .new { @@ -226,14 +229,14 @@ .updated__badge { position: absolute; top: 50%; - right: 5px; + right: rem(5px); transform: translateY(-50%); } } .nav { margin: 0; - padding: 0 16px; + padding: 0 rem(16px); li { a { @@ -247,17 +250,10 @@ &.new { .new__badge, .updated__badge { - right: -11px; + right: rem(-11px); } } } - - &.level2 { - .in.active a.active { - color: #000 !important; - font-weight: 500 !important; - } - } } } @@ -281,8 +277,8 @@ .toc-toggle { justify-content: center; - padding: 14px 0; - font-size: 14px; + padding: rem(14px) 0; + font-size: rem(14px); font-weight: 500; text-transform: uppercase; color: #282828; @@ -309,13 +305,13 @@ margin: 0; #toc_filter_input { - font-size: 13px; - padding-left: 24px; + font-size: rem(13px); + padding-left: rem(24px); } .filter-icon { - color: $text-base; - font-size: 14px; + color: $filter-icon-color; + font-size: rem(14px); top: 50%; left: 0; transform: translateY(-50%); @@ -337,7 +333,7 @@ .sidenav { padding: 0; - margin: 24px 0 !important; + margin: rem(24px) 0 !important; } .sidenav-container { diff --git a/src/styles/shared/components/_table.scss b/src/styles/shared/components/_table.scss index 19ee5bff..58a17c39 100644 --- a/src/styles/shared/components/_table.scss +++ b/src/styles/shared/components/_table.scss @@ -1,10 +1,4 @@ .table { - tbody { - tr:nth-child(odd) { - background: $table-row-bg; - } - } - thead { tr { border-bottom: $table-th-border; @@ -12,6 +6,7 @@ } th { + background: $table-header-background; color: $text-base; font-weight: 500; text-transform: $table-text-transform; @@ -20,7 +15,7 @@ tbody { tr { height: 48px; - border-bottom: 1px solid $table-border-color; + border-bottom: 1px solid $table-row-border-color; &:last-of-type { border-bottom: none; @@ -31,6 +26,16 @@ th { font-size: $table-header-font-size; } + + tr { + &:nth-child(even) { + background: $table-even-bg + } + + &:nth-child(odd) { + background: $table-odd-bg + } + } } table p { @@ -69,3 +74,5 @@ table a { } } } + + diff --git a/src/styles/slingshot/_variables.scss b/src/styles/slingshot/_variables.scss index f9c76b2a..1f128aa2 100644 --- a/src/styles/slingshot/_variables.scss +++ b/src/styles/slingshot/_variables.scss @@ -1,18 +1,23 @@ +@import '../shared/variables'; + // Palette $primary-color: #20226f; $info-color: #6988FF; $warning-color: #F69E41; $error-color: #DE8080; $success-color: #00AE88; -$note-color: #dcdcaa; $secondary-1-color: #4AC55F; $secondary-2-color: #3f4b89; $accent-color: #ED4A99; +// Palette END + +$note-color: #dcdcaa; // Font $global-font-family: 'Roboto', sans-serif; -$generic-font-weight: 400; +$global-font-weight: 400; $global-radius: 8px; +$global-line-height: 24px; // Grays $darkgray: #333; @@ -23,7 +28,8 @@ $lightgray: #e9ebf3; $text-base: #585858; $text-light: #fff; $text-dim-light: #ddd; -$text-dark: #000; +$black: #000; +$text-dark: $black; $title-color: $text-dark; // Surface colors @@ -36,6 +42,7 @@ $surface-disabled: #eee; $link-color: #6988FF; $link-hover-color: #4562cd; $button-hover: $link-hover-color; +$link-decoration: none; // Header $header-bg: $primary-color; @@ -98,6 +105,7 @@ $footer-bg: #f8f8f8; $main-padding: 85px; $filter-height: 36px; $side-nav-push: $main-padding + $filter-height; +$filter-icon-color: $link-color; $navbar-height: 85px; @@ -106,6 +114,8 @@ $toc-active-color: $text-dark; $toc-hover-color: $link-color; $toc-color: $text-base; $toc-bg-color: #ffffff; +$toc-font-size: rem(13px); +$toc-expand-stub-color: $link-color; // badge component $new-badge-color: $text-light; @@ -119,41 +129,52 @@ $badge-font-weight: 500; $byzantium: #731963; +// Block Quote +$blockquotes-border-color: $link-color; +$blockquotes-font-style: italic; + +// Ul colors +$ul-bullet-color: $darkgray; + +// External Link $external-link-icon: 'open_in_new'; $external-link-icon-padding: 18px; $external-font-weight: 700; +// Pre $pre-bg: $surface-dark; $pre-color: $text-light; $pre-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.20); +// Alert $alert-radius: $global-radius; $icon-container-width: 72px; $alert-padding: 21px 17px 21px (17px + $icon-container-width); $alert-margin: 20px 0; - -// Headings anchor link icon -$link-alpha: 0; - -$affix-font-weight: 400; - $alert-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.26), 0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 2px 1px -1px rgba(0, 0, 0, 0.08); +// Headings anchor link icon +$link-alpha: 0; + +$affix-font-weight: 400; $hljs-copy-btn-radius: 0 0 0 $global-radius; // Table $table-first-col-weight: 500; $table-header-font-size: 18px; -$table-row-bg: #F9F9F9; $table-text-color: $text-base; $table-border-color: $border-color; +$table-row-border-color: $border-color; $table-text-transform: uppercase; $table-th-border: 1px solid $table-border-color; $table-th-padding: 1rem; $table-td-padding: 1.2rem; +$table-header-background: $surface-light; +$table-even-bg: #F9F9F9; +$table-odd-bg: $surface-light; // Typography // @@ -202,4 +223,3 @@ $h6-m-bottom: 1.5rem; // Paragraph $p-l-height: 1.5rem; $p-m-bottom: 1rem; -$p-m-top: 0; diff --git a/src/styles/slingshot/main.scss b/src/styles/slingshot/main.scss index b25fc5e1..c60e7365 100644 --- a/src/styles/slingshot/main.scss +++ b/src/styles/slingshot/main.scss @@ -1,4 +1,5 @@ @import '~highlight.js/scss/vs2015.scss'; +@import '../shared/mixins'; @import 'variables'; @import '../shared/global';