From 1671f891eac6c14c043696d5ac36725042c036d2 Mon Sep 17 00:00:00 2001 From: David O'Regan Date: Mon, 10 May 2021 20:39:53 +0000 Subject: Mostly adequate docsite typescale update --- content/assets/stylesheets/_base.scss | 37 + content/assets/stylesheets/_breadcrumbs.scss | 98 +++ content/assets/stylesheets/_landing.scss | 62 +- content/assets/stylesheets/_mixins.scss | 11 + content/assets/stylesheets/_normalize.scss | 415 +++++++++ content/assets/stylesheets/_sidebar.scss | 178 ++++ content/assets/stylesheets/_tables.scss | 66 ++ content/assets/stylesheets/_typography.scss | 560 ++++++++++++ content/assets/stylesheets/_variables.scss | 324 +++++-- content/assets/stylesheets/footer.scss | 9 +- content/assets/stylesheets/help.scss | 6 +- content/assets/stylesheets/highlight.scss | 92 +- content/assets/stylesheets/instantsearch.scss | 12 +- .../assets/stylesheets/mixins/_breakpoints.scss | 38 + content/assets/stylesheets/mixins/_functions.scss | 55 ++ .../assets/stylesheets/mixins/_md-typography.scss | 178 ++++ .../assets/stylesheets/mixins/_screen-reader.scss | 36 + content/assets/stylesheets/mixins/_spacing.scss | 823 ++++++++++++++++++ content/assets/stylesheets/stylesheet.scss | 956 +++------------------ content/assets/stylesheets/toc.scss | 21 +- .../default/components/table_of_contents.vue | 2 +- .../default/components/table_of_contents_list.vue | 2 +- content/index.erb | 18 +- layouts/404.html | 2 +- layouts/archives.html | 2 +- layouts/breadcrumbs.html | 6 +- layouts/default.html | 4 +- layouts/footer.html | 7 +- layouts/header.html | 14 +- layouts/instantsearch.html | 2 +- layouts/redirect.html | 2 +- .../__snapshots__/table_of_contents_spec.js.snap | 34 +- 32 files changed, 3020 insertions(+), 1052 deletions(-) create mode 100644 content/assets/stylesheets/_base.scss create mode 100644 content/assets/stylesheets/_breadcrumbs.scss create mode 100644 content/assets/stylesheets/_mixins.scss create mode 100644 content/assets/stylesheets/_normalize.scss create mode 100644 content/assets/stylesheets/_sidebar.scss create mode 100644 content/assets/stylesheets/_tables.scss create mode 100644 content/assets/stylesheets/_typography.scss create mode 100644 content/assets/stylesheets/mixins/_breakpoints.scss create mode 100644 content/assets/stylesheets/mixins/_functions.scss create mode 100644 content/assets/stylesheets/mixins/_md-typography.scss create mode 100644 content/assets/stylesheets/mixins/_screen-reader.scss create mode 100644 content/assets/stylesheets/mixins/_spacing.scss diff --git a/content/assets/stylesheets/_base.scss b/content/assets/stylesheets/_base.scss new file mode 100644 index 00000000..74daac05 --- /dev/null +++ b/content/assets/stylesheets/_base.scss @@ -0,0 +1,37 @@ +--- +version: 1 +--- + +@import 'variables'; + +*, +*::after, +*::before { + box-sizing: border-box; +} + +html { + font-size: 100%; + height: 100%; +} + +body { + background-color: $white; + color: $gray-800; + display: flex; + flex-flow: column; + font-size: 1rem; + font-family: $font-sans-serif; + line-height: 1.5; + min-height: 100%; + position: relative; + -webkit-font-smoothing: antialiased; +} + +// Fluid images by default +img { + display: block; + height: auto; + width: 100% \9; // Force IE10 and below to size SVG images correctly + max-width: 100%; +} diff --git a/content/assets/stylesheets/_breadcrumbs.scss b/content/assets/stylesheets/_breadcrumbs.scss new file mode 100644 index 00000000..55c96591 --- /dev/null +++ b/content/assets/stylesheets/_breadcrumbs.scss @@ -0,0 +1,98 @@ +--- +version: 1 +--- + +@import 'variables'; +@import 'mixins/breakpoints'; + +.gl-breadcrumbs { + font-size: 0.75rem; + grid-area: breadcrumbs; + + @media all and (max-width: $bp-xl) { + border-bottom: 0; + margin: 1rem 0; + padding: 0; + } + + @media all and (max-width: $bp-lg) { + padding-top: 1rem; + } + + img { + display: inline; + height: 0.938rem; + width: 0.938rem; + } + + border-width: 0; + padding: 2rem 0 1rem; +} + +.gl-breadcrumb-list { + background-color: transparent; + padding: 0; + align-items: center; + line-height: 1rem; + margin: 0; +} + +@media (max-width: $bp-xs) { + .gl-breadcrumb-list { + flex-wrap: wrap; + } +} + +.gl-breadcrumb-separator { + margin-top: -0.6rem; +} + +.gl-breadcrumb-separator>svg { + margin: auto 0.5rem; + width: 0.5rem; + color: $gds-gray-1000; + fill: currentColor; +} + +.gl-breadcrumb-avatar-tile { + margin-right: 0.25rem; + margin-top: 0.1rem; + margin-bottom: 0.2rem; + border: 1px solid $help-gray-200; + border-radius: 50%; +} + +@media (max-width: $bp-md) { + .gl-breadcrumb-avatar-tile { + margin-left: 2rem; + } +} + +.gl-breadcrumb-item { + font-size: 0.75rem; + line-height: 1rem; + + a { + border-bottom: 0; + } +} + +.gl-breadcrumb-item>a { + color: $gds-gray-1000; +} + +@media (max-width: 575.98px) { + .gl-breadcrumb-item>a { + display: inline-block; + overflow: hidden; + text-overflow: ellipsis; + vertical-align: top; + white-space: nowrap; + max-width: 8rem; + } +} + +.gl-breadcrumb-item:last-child { + color: $gds-gray-950; + font-weight: 600; +} diff --git a/content/assets/stylesheets/_landing.scss b/content/assets/stylesheets/_landing.scss index 70058cc9..a74cc470 100644 --- a/content/assets/stylesheets/_landing.scss +++ b/content/assets/stylesheets/_landing.scss @@ -1,11 +1,11 @@ --- -version: 2 +version: 4 --- @import 'variables'; .landing { - font-size: $landing-body-font-size; + font-size: $body-font-size; background-color: $landing-gl-gray-50; // buttons, text and utilities @@ -24,6 +24,7 @@ version: 2 .card { box-shadow: 0 0.5rem 1.5rem -0.75rem $landing-gl-blue-1000; border-radius: 0.25rem; + transition: all 0.5s; &.transparent { box-shadow: none; @@ -33,6 +34,40 @@ version: 2 .card-title { color: $gds-purple-900; } + + .card-link { + text-decoration: none; + position: relative; + + &::before { + content: ''; + position: absolute; + width: 100%; + height: 0.1rem; + bottom: 0; + left: 0; + background-color: $landing-gl-purple-500; + visibility: hidden; + transform: scaleX(0); + transition: all 0.3s ease-in-out 0s; + } + + &:hover { + &::before { + visibility: visible; + transform: scaleX(1); + } + } + } + + &:hover { + box-shadow: 1rem 1rem 1rem 1rem $landing-gl-blue-1000; + } + } + + // images + img { + display: inline; } // sections @@ -40,12 +75,11 @@ version: 2 background-image: url('/assets/images/hero-bg.svg'); background-repeat: no-repeat; background-attachment: inherit; - background-position: 50% 12%; + background-position: 50% 4%; - @media (max-width: $xs-width) { + @media (max-width: $bp-sm) { background-image: url('/assets/images/hero-bg-mobile.svg'); - background-position: 50% 4%; } .search { @@ -54,7 +88,7 @@ version: 2 border-radius: 0.25rem; width: 65%; - @media (max-width: $md-width) { + @media (max-width: $bp-md) { width: 100%; } @@ -63,7 +97,7 @@ version: 2 line-height: 3.25rem; color: $gds-purple-900; - @media (max-width: $xs-width) { + @media (max-width: $bp-xs) { font-size: 2rem; } } @@ -75,8 +109,12 @@ version: 2 .search-icon { position: absolute; left: 2rem; - top: 8.5rem; + top: 6.75rem; z-index: 1; + + @media all and (max-width: $bp-sm) { + top: 10rem; + } } .form-control { @@ -308,7 +346,7 @@ version: 2 background: radial-gradient(75.78% 75.78% at 50% 1.83%, $landing-gl-black-100 0%, $landing-gl-black-0 100%), $landing-gl-indigo-950; padding: 0 10rem; - @media (max-width: $md-width) { + @media (max-width: $bp-md) { padding: 0 15px; } @@ -348,7 +386,7 @@ version: 2 background-attachment: inherit; background-position: 50% 60%; - @media (max-width: $md-width) { + @media (max-width: $bp-md) { background-image: url('/assets/images/hero-bg-mobile.svg'); } @@ -357,7 +395,7 @@ version: 2 box-shadow: 0 0 0.125rem $landing-gl-black-50, 0 0.5rem 1.5rem $landing-gl-blue-950; border-radius: 0.25rem; - @media (max-width: $md-width) { + @media (max-width: $bp-md) { width: 100%; } } @@ -381,7 +419,7 @@ version: 2 height: 3rem; background-color: $landing-gl-purple-550; - @media (max-width: $sm-width) { + @media (max-width: $bp-sm) { height: auto; } diff --git a/content/assets/stylesheets/_mixins.scss b/content/assets/stylesheets/_mixins.scss new file mode 100644 index 00000000..88e81681 --- /dev/null +++ b/content/assets/stylesheets/_mixins.scss @@ -0,0 +1,11 @@ +--- +version: 1 +--- + +// Mixins + +@import 'mixins/functions'; +@import 'mixins/breakpoints'; +@import 'mixins/screen-reader'; +@import 'mixins/md-typography'; +@import 'mixins/spacing'; diff --git a/content/assets/stylesheets/_normalize.scss b/content/assets/stylesheets/_normalize.scss new file mode 100644 index 00000000..c1bcfc12 --- /dev/null +++ b/content/assets/stylesheets/_normalize.scss @@ -0,0 +1,415 @@ +--- +version: 1 +--- + +@import 'variables'; + +/*! normalize.scss v0.1.0 | MIT License | based on git.io/normalize */ + +/** + * 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 */ +} + +/** + * Remove default margin. + */ + +body { + margin: 0; +} + +/* HTML5 display definitions + ========================================================================== */ + +/** + * Correct `block` display not defined for any HTML5 element in IE 8/9. + * Correct `block` display not defined for `details` or `summary` in IE 10/11 + * and Firefox. + * Correct `block` display not defined for `main` in IE 11. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +menu, +nav, +section, +summary { + display: block; +} + +/** + * 1. Correct `inline-block` display not defined in IE 8/9. + * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + */ + +audio, +canvas, +progress, +video { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ +} + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Address `[hidden]` styling not present in IE 8/9/10. + * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. + */ + +[hidden], +template { + display: none; +} + +/* Links + ========================================================================== */ + +/** + * Remove the gray background color from active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * Improve readability when focused and also mouse hovered in all browsers. + */ + +a:active, +a:hover { + outline: 0; +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/** + * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + */ + +b, +strong { + font-weight: bold; +} + +/** + * Address styling not present in Safari and Chrome. + */ + +dfn { + font-style: italic; +} + +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari, and Chrome. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/** + * Address styling not present in IE 8/9. + */ + +mark { + background: #ff0; + color: $gds-black; +} + +/** + * 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/10. + */ + +img { + border: 0; +} + +/** + * Correct overflow not hidden in IE 9/10/11. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Grouping content + ========================================================================== */ + +/** + * Address margin not present in IE 8/9 and Safari. + */ + +figure { + margin: 1em 40px; +} + +/** + * Address differences between Firefox and other browsers. + */ + +hr { + box-sizing: content-box; + height: 0; +} + +/** + * Contain overflow in all browsers. + */ + +pre { + overflow: auto; +} + +/** + * Address odd `em`-unit font size rendering in all browsers. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +/* Forms + ========================================================================== */ + +/** + * Known limitation: by default, Chrome and Safari on OS X allow very limited + * styling of `select`, unless a `border` property is set. + */ + +/** + * 1. Correct color not being inherited. + * Known issue: affects color of disabled elements. + * 2. Correct font properties not being inherited. + * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. + */ + +button, +input, +optgroup, +select, +textarea { + color: inherit; /* 1 */ + font: inherit; /* 2 */ + margin: 0; /* 3 */ +} + +/** + * Address `overflow` set to `hidden` in IE 8/9/10/11. + */ + +button { + overflow: visible; +} + +/** + * 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 Firefox, IE 8/9/10/11, and Opera. + * Correct `select` style inheritance in Firefox. + */ + +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'] { + cursor: pointer; /* 3 */ +} + +/** + * Re-set default cursor for disabled elements. + */ + +button[disabled], +html input[disabled] { + cursor: default; +} + +/** + * Remove inner padding and border in Firefox 4+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +input { + line-height: normal; +} + +/** + * It's recommended that you don't attempt to style these elements. + * Firefox's implementation doesn't respect box-sizing, padding, or width. + * + * 1. Address box sizing set to `content-box` in IE 8/9/10. + * 2. Remove excess padding in IE 8/9/10. + */ + +input[type='checkbox'], +input[type='radio'] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Fix the cursor style for Chrome's increment/decrement buttons. For certain + * `font-size` values of the `input`, it causes the cursor style of the + * decrement button to change from `default` to `text`. + */ + +input[type='number']::-webkit-inner-spin-button, +input[type='number']::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Address `appearance` set to `searchfield` in Safari and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari and Chrome + * (include `-moz` to future-proof). + */ + +input[type='search'] { + box-sizing: content-box; +} + +/** + * 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/10/11. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ + +legend { + border: 0; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Remove default vertical scrollbar in IE 8/9/10/11. + */ + +textarea { + overflow: auto; +} + +/** + * Don't inherit the `font-weight` (applied by a rule above). + * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. + */ + +optgroup { + font-weight: bold; +} + +/* Tables + ========================================================================== */ + +/** + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} + +td, +th { + padding: 0; +} diff --git a/content/assets/stylesheets/_sidebar.scss b/content/assets/stylesheets/_sidebar.scss new file mode 100644 index 00000000..7f07a53b --- /dev/null +++ b/content/assets/stylesheets/_sidebar.scss @@ -0,0 +1,178 @@ +--- +version: 1 +--- + +@import 'variables'; + +.global-nav { + width: 100%; + height: 100%; + top: 0; + left: 0; + overflow: auto; + visibility: hidden; + .global-nav-cat.active { + a { + color: $gds-indigo-800; + } + } + .global-nav-content { + margin-top: 85px; + margin-bottom: 70px; + } + a { + display: flex; + align-items: center; + text-decoration: none; + padding-top: 7px; + padding-bottom: 7px; + padding-right: 7px; + &.has-collapse.active { + box-shadow: 0 0 0 0 inset; + } + &.active { + background-color: $gds-gray-100; + font-weight: 600; + box-shadow: -4px 0 0 0 inset; + color: $gds-indigo-800; + &:hover { + color: $gds-indigo-800; + } + &.level-1, + &.level-2, + &.level-3, + &.level-4 { + background-color: $gds-gray-200; + } + } + } + .collapse-toggle { + cursor: pointer; + display: flex; + padding-right: 1rem; + align-items: center; + justify-content: center; + &::after { + content: ''; + border: solid $gds-gray-700; + border-width: 0 1px 1px 0; + display: inline-block; + transform: rotate(45deg); + width: 7px; + height: 7px; + } + &.collapsed { + &::after { + transform: rotate(-50deg); + } + } + &.active { + background-color: $gds-gray-200; + box-shadow: -4px 0 0 0 inset; + color: $gds-indigo-800; + &.section-title { + background-color: $gds-gray-100; + } + } + } + + .global-nav-block { + font-weight: 600; + padding-left: 10px; + } + + .global-nav-link, + .nav-link { + text-decoration: none; + &:hover { + color: $link-color-nav-hover; + } + } + + .global-nav-link { + line-height: 1rem; + font-size: 0.875rem; + width: 100%; + } + + .nav-link { + padding: 0; + display: flex; + justify-content: space-between; + a { + border-bottom: 0; + } + } + + .nav-link:hover { + background-color: $link-color-bg-active; + } + + .global-nav-block-top { + font-weight: 600; + margin-bottom: 3px; + margin-top: 3px; + a { + text-decoration: none; + text-shadow: 3px 3px 5px $link-color-bg-active; + } + } + + .level-0 { + color: $global-nav-link-level0; + padding-left: 1.2rem; + &:visited { + color: $global-nav-link-level0; + } + } + + .level-1 { + color: $global-nav-link-level1; + padding-left: 2.333rem; + &:visited { + color: $global-nav-link-level1; + } + } + + .level-2 { + color: $global-nav-link-level2; + padding-left: 3.533rem; + &:visited { + color: $global-nav-link-level2; + } + } + + .level-3 { + color: $global-nav-link-level3; + padding-left: 4.733rem; + &:visited { + color: $global-nav-link-level3; + } + } + + .level-4 { + color: $global-nav-link-level4; + padding-left: 5.933rem; + &:visited { + color: $global-nav-link-level4; + } + } + + .global-nav-badges { + fill: $gds-gray-700; + } + + .last-updated { + color: $color-light-gray; + font-size: 13px; + padding-bottom: 10px; + text-align: right; + } +} + +@media (min-width: $bp-lg) { + .mobile-nav-toggle { + display: none; + border-bottom: 0; + } +} diff --git a/content/assets/stylesheets/_tables.scss b/content/assets/stylesheets/_tables.scss new file mode 100644 index 00000000..341baa77 --- /dev/null +++ b/content/assets/stylesheets/_tables.scss @@ -0,0 +1,66 @@ +--- +version: 1 +--- + +@import 'variables'; +@import 'mixins/breakpoints'; + +// Tables +table { + margin-top: 1rem; + font-weight: normal; + letter-spacing: normal; + margin-bottom: 1.5em; + border-collapse: collapse; + width: 100%; + max-width: 100%; + + @include breakpoint(md) { + table-layout: fixed; + } + + @include breakpoint($max: $bp-md) { + display: block; + width: 100%; + overflow-x: auto; + } + + tr { + border-top: 1px solid $gray-100; + + + &:nth-child(even) { + background-color: $gray-10; + } + + &:last-child { + border-bottom: 1px solid $gray-100; + } + } + + th, + td { + padding: 1em; + } + + th { + background-color: $gray-50; + color: $gray-900; + line-height: 1.25; + text-align: left; + } + + td { + vertical-align: top; + + a { + /* stylelint-disable declaration-no-important */ + border-bottom: 0 !important; + /* stylelint-enable declaration-no-important */ + } + + .badge-drop { + display: none; + } + } +} diff --git a/content/assets/stylesheets/_typography.scss b/content/assets/stylesheets/_typography.scss new file mode 100644 index 00000000..92ca1fca --- /dev/null +++ b/content/assets/stylesheets/_typography.scss @@ -0,0 +1,560 @@ +--- +version: 1 +--- + +// Typography + +@import 'variables'; +@import 'mixins/breakpoints'; +@import 'mixins/md-typography'; +@import 'mixins/spacing'; + +// Documentation Markdown typescale + +.gl-markdown { + p, + ul, + ol, + pre, + blockquote { + font-size: 1rem; + font-weight: normal; + letter-spacing: normal; + margin-top: 0; + margin-bottom: 1.5em; + } + + blockquote { + background-color: $gds-gray-50; + color: $gds-black; + border: solid 1px $gray-100; + border-radius: 0.313rem; + margin: 1rem 0; + padding: 1rem; + + ul { + margin-bottom: 0; + } + } + + ul, + ol { + margin-top: 0.5rem; + margin-left: 0; + padding-left: 1em; + + li { + margin-bottom: 0.5rem; + } + } + + ol { + ol { + list-style-type: lower-alpha; + ol { + list-style-type: lower-roman; + } + } + } + + + ul ul, + ol ol, + ul ol, + ol ul { + margin-top: 0.5rem; + margin-bottom: 0; + } + + b, + strong, + em, + small { + line-height: 1; + } + + sup { + line-height: 0; + position: relative; + vertical-align: baseline; + top: -0.5em; + } + + sub { + bottom: -0.25em; + } + + // Keyboard input + + kbd { + background-color: $gray-700; + border-radius: 4px; + color: $white; + line-height: 1; + overflow-wrap: break-word; + padding: 2px 4px; + } + + // Highlighted text + + mark { + background-color: $blue-100; + } + + // Code + + *:not(pre) > code { + background-color: $gray-50; + border-radius: 4px; + line-height: 1; + overflow-wrap: break-word; + padding: 2px 4px; + transition: background-color 0.15s linear; + } + + pre { + background-color: desaturate($theme-indigo-950, 20%); + border-radius: 4px; + color: $white; + padding: 1rem; + } + + .clip-btn { + fill: $white; + background-color: $pre-code-color; + border: 0; + svg { + opacity: 0.5; + transition: opacity 0.3s ease-in; + pointer-events: none; + } + @media all and (max-width: $bp-sm) { + display: none; + } + + &:hover { + svg { + opacity: 1; + } + } + } + + // Badge tier + + .badge-tier { + color: $red-500; + font-size: 0.75rem; + font-weight: 800; + text-transform: uppercase; + + &:hover { + border-bottom-color: $red-700; + color: $red-700; + } + } + + .introduced-in { + border-left: 4px solid $theme-indigo-200; + padding-left: 0.75rem; + margin-bottom: 1.5rem; + + p { + font-size: 0.875rem; + } + } + + hr { + border: 0; + border-top: 1px solid rgba($theme-indigo-900, 0.16); + height: 0; + margin-top: 1rem; + margin-bottom: 1rem; + + @include breakpoint(md) { + margin-top: 2rem; + margin-bottom: 2rem; + } + } + + @include gl-font-size-markdown; + @include gl-line-height-24; + @include gl-font-regular; + @include gl-font-weight-normal; + + -webkit-font-smoothing: auto; + + h1, + h2, + h3, + h4, + h5, + h6, + .gl-h1, + .gl-h2, + .gl-h3, + .gl-h4, + .gl-h5, + .gl-h6 { + @include gl-font-weight-bold; + @include gl-mb-3; + + // Permalinks on header elements. + .anchor { + transition: all 0.3s; + background: url('/assets/images/icon_anchor.svg') center center / contain no-repeat; + opacity: 0; + display: inline-block; + width: 1em; + height: 1em; + max-height: 2rem; + vertical-align: middle; + border-bottom: 0; + margin-left: 0.25rem; + margin-top: -0.25rem; + border-bottom: 0; + } + + &:hover { + .anchor { + border-bottom: 0; + opacity: 1; + } + } + } + + h3, + h4, + h5, + h6, + .gl-h3, + .gl-h4, + .gl-h5, + .gl-h6 { + @include gl-mt-6; + @include gl-mb-3; + } + + h1, + .gl-h1 { + @include gl-font-size-markdown-h1; + @include gl-line-height-32; + @include gl-fluid-font-size( + $min: $gl-font-size-markdown-h1-md, + $max: $gl-font-size-markdown-h1-xl + ); + @include gl-fluid-line-height($min: $gl-line-height-36, $max: $gl-line-height-52); + @include gl-mt-0; + } + + h2, + .gl-h2 { + @include gl-font-size-markdown-h2; + @include gl-line-height-28; + @include gl-fluid-font-size( + $min: $gl-font-size-markdown-h2-md, + $max: $gl-font-size-markdown-h2-xl + ); + @include gl-fluid-line-height($min: $gl-line-height-28, $max: $gl-line-height-36); + @include gl-mt-6; + } + + h3, + .gl-h3 { + @include gl-font-size-markdown-h3; + @include gl-line-height-24; + @include gl-fluid-font-size( + $min: $gl-font-size-markdown-h3-md, + $max: $gl-font-size-markdown-h3-xl + ); + @include gl-fluid-line-height($min: $gl-line-height-24, $max: $gl-line-height-28); + } + + h4, + .gl-h4 { + @include gl-font-size-markdown; + @include gl-line-height-20; + } + + h5, + .gl-h5, + h6, + .gl-h6 { + @include gl-font-size-markdown-sm; + @include gl-line-height-20; + } + + h6, + .gl-h6 { + @include gl-text-gray-700; + } + + p, + .gl-paragraph { + @include gl-mt-0; + @include gl-mb-0; + + + p, + + .gl-paragraph { + @include gl-mt-5; + } + + &.sm { + @include gl-font-size-markdown-sm; + @include gl-line-height-20; + } + } + + .sm { + @include gl-font-size-markdown-sm; + @include gl-line-height-20; + } + + .monospace { + @include gl-font-monospace; + @include gl-font-size-monospace-lg; + @include gl-line-height-24; + + &.sm { + @include gl-font-size-monospace; + @include gl-line-height-20; + } + } + + // Links + + a { + border-bottom: 1px solid rgba($purple-700, 0.24); + color: $purple-700; + text-decoration: none; + transition: color 0.15s linear, border-bottom-color 0.15s linear; + + &:hover { + border-bottom: 1px solid $purple-900; + color: $purple-900; + + code { + background-color: $theme-indigo-100; + } + } + } + + // Responsive Headers + + /* stylelint-disable max-nesting-depth */ + @mixin responsive-headers($settings) { + @each $property, $attribute in $settings { + @if type-of($attribute) == 'map' { // property is a breakpoint + $breakpoint: $property; + @if $breakpoint == $bp-xs { + @each $key, $value in $attribute { + #{$key}: #{$value}; + } + } @else { + @media screen and (min-width: $breakpoint) { + @each $key, $value in $attribute { + #{$key}: #{$value}; + } + } + } + } @else { + #{$property}: #{$attribute}; + } + } + } + /* stylelint-enable max-nesting-depth */ + + // Headings + // For the system of .h1-.h6 classes to properly overwrite the base tag, you must include all properties transformed + // at every breakpoint, even if those properties are the default or assigned at an earlier breakpoint. + + // Close to a 1.2 (minor third) scale at the LG breakpoint + $h1-properties: ( + color: $theme-indigo-900, + font-weight: 600, + margin-top: 0, + text-transform: none, + $bp-xs : ( + font-size : 2rem, // 32px + line-height : 1, // 32px + margin-bottom: 1.5rem, // 24px + ), + $bp-sm: ( + font-size : 2rem, // 32px + line-height : 1, // 32px + margin-bottom: 1.5rem, // 24px + ), + $bp-md : ( + font-size : 2.5rem, // 40px + line-height : 1, // 40px + margin-bottom: 1.5rem, // 24px + ), + $bp-lg : ( + font-size : 2.5rem, // 40px + line-height : 1, // 40px + margin-bottom: 1.5rem, // 24px + ) + ) !default; + + $h2-properties: ( + color: $theme-indigo-900, + font-weight: 600, + $bp-xs : ( + font-size : 1.5rem, // 24px + line-height : 1.25, // 30px + margin-bottom: 1.5rem, // 24px + ), + $bp-sm : ( + font-size : 1.5rem, // 24px + line-height : 1.25, // 30px + margin-bottom: 1.5rem, // 24px + ), + $bp-md : ( + font-size : 2rem, // 32px + line-height : 1, // 32px + margin-bottom: 1.5rem, // 24px + ), + $bp-lg : ( + font-size : 2rem, // 32px + line-height : 1, // 32px + margin-bottom: 1.5rem, // 24px + ) + ) !default; + + $h3-properties: ( + color: $theme-indigo-900, + font-weight: 600, + text-transform: none, + $bp-xs : ( + font-size : 1.25rem, // 20px + line-height : 1.4, // 28px + margin-bottom: 1rem, // 20px + ), + $bp-sm : ( + font-size : 1.25rem, // 20px + line-height : 1.4, // 28px + margin-bottom: 1rem, // 20px + ), + $bp-md : ( + font-size : 1.5rem, // 24px + line-height : 1.273, // 28px + margin-bottom: 1rem, // 20px + ), + $bp-lg : ( + font-size : 1.5rem, // 24px + line-height : 1.273, // 28px + margin-bottom: 1rem, // 16px + ) + ) !default; + + $h4-properties: ( + color: $theme-indigo-900, + text-transform: none, + $bp-xs : ( + font-size : 1rem, // 16px + line-height : 1.5, // 24px + margin-bottom: 0.75rem, // 12px + ), + $bp-sm : ( + font-size : 1rem, // 16px + line-height : 1.5, // 24px + margin-bottom: 0.75rem, // 12px + ), + $bp-md : ( + font-size : 1.125rem, // 18px + line-height : 1.375, // 22px + margin-bottom: 0.75rem, // 12px + ), + $bp-lg : ( + font-size : 1.125rem, // 18px + line-height : 1.375, // 22px + margin-bottom: 0.75rem, // 12px + ) + ) !default; + + $h5-properties: ( + color: $theme-indigo-900, + font-weight: 700, + text-transform: none, + $bp-xs : ( + font-size : 0.875rem, // 14px + line-height : 1.429, // 20px + margin-bottom: 0.5rem, // 8px + ), + $bp-sm : ( + font-size : 0.875rem, // 14px + line-height : 1.429, // 20px + margin-bottom: 0.5rem, // 8px + ), + $bp-md : ( + font-size : 1rem, // 16px + line-height : 1.5, // 24px + margin-bottom: 0.5rem, // 8px + ), + $bp-lg : ( + font-size : 1rem, // 16px + line-height : 1.5, // 24px + margin-bottom: 0.5rem, // 8px + ) + ) !default; + + $h6-properties: ( + color: $theme-indigo-900, + text-transform: none, + $bp-xs : ( + font-size : 0.875rem, // 14px + line-height : 1.25, // 17.5px + margin-bottom : 0.25rem, // 4px + ), + $bp-sm : ( + font-size : 0.875rem, // 14px + line-height : 1.25, // 17.5px + margin-bottom : 0.25rem, // 4px + ), + $bp-md : ( + font-size : 0.875rem, // 14px + line-height : 1.25, // 17.5px + margin-bottom : 0.25rem, // 4px + ), + $bp-lg : ( + font-size : 0.875rem, // 14px + line-height : 1.25, // 17.5px + margin-bottom : 0.25rem, // 4px + ) + ) !default; + + // Headings + + // See the headings section in _variables.scss for the responsive properties. + h1, + h2, + h3, + h4, + h5, + h6, + .h1, + .h2, + .h3, + .h4, + .h5, + .h6 { + margin-top: 2.5rem; + text-rendering: optimizelegibility; + } + + h1 { @include responsive-headers($h1-properties);} + h2 { @include responsive-headers($h2-properties);} + h3 { @include responsive-headers($h3-properties);} + h4 { @include responsive-headers($h4-properties);} + h5 { @include responsive-headers($h5-properties);} + h6 { @include responsive-headers($h6-properties);} + + // These declarations are kept separate from and placed after + // the previous tag-based declarations so that the classes beat the tags in + // the CSS cascade, and thus

will be styled like an h2. + .h1 { @include responsive-headers($h1-properties);} + .h2 { @include responsive-headers($h2-properties);} + .h3 { @include responsive-headers($h3-properties);} + .h4 { @include responsive-headers($h4-properties);} + .h5 { @include responsive-headers($h5-properties);} + .h6 { @include responsive-headers($h6-properties);} +} diff --git a/content/assets/stylesheets/_variables.scss b/content/assets/stylesheets/_variables.scss index dcd2ccf4..15072b60 100644 --- a/content/assets/stylesheets/_variables.scss +++ b/content/assets/stylesheets/_variables.scss @@ -1,35 +1,17 @@ -// New Breakpoints -$xs-width: 576px; -$sm-width: 768px; -$md-width: 992px; -$lg-width: 1400px; - -// Border colors -$introduced-in-border-color: #e3e3e3; - // Fonts -$mono-font-family: 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace; $sans-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', Ubuntu, Cantarell, 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; -$body-font-size: 15px; -$tooltip-font-size: 12px; -$introduced-in-font-size: 13px; -$landing-body-font-size: 16px; - -// Margins -$h-margin-top: 10px; -$h2-margin-top: 30px; -$h-margin-bottom: 10px; +$body-font-size: 16px; // Heights -$page-header-height: 40px; -$banner-height: 31px; -$header-height: 48px; +$page-header-height: 2.5rem; +$banner-height: 1.938rem; +$header-height: 3rem; // Width $sidebar-width: 16.66667%; -$sidebar-mobile-width: 320px; -$toc-width: 320px; -$page-content-width: 980px; +$sidebar-mobile-width: 20rem; +$toc-width: 20rem; +$page-content-width: 61.25rem; // GitLab colors // Tanuki @@ -57,30 +39,15 @@ $gds-gray-950: #1f1f1f; $gds-black: #000; $gds-gray-1000: #666; -// Transparency -$gds-t-gray-a2: rgba($gds-black, 0.02); -$gds-t-gray-a4: rgba($gds-black, 0.04); -$gds-t-gray-a6: rgba($gds-black, 0.06); -$gds-t-gray-a8: rgba($gds-black, 0.08); - // Blue palette -$gds-blue-100: #e4f0fb; -$gds-blue-200: #b8d6f4; -$gds-blue-300: #73afea; -$gds-blue-400: #418cd8; -$gds-blue-500: #1f78d1; $gds-blue-600: #1b69b6; -$gds-blue-700: #17599c; $gds-blue-800: #134a81; // Purple palatte -$gds-purple-50: #f4f0ff; $gds-purple-900: #2f2a6b; // Indigo palatte $gds-indigo-100: #dbdbf8; -$gds-indigo-600: #5252b5; -$gds-indigo-700: #41419f; $gds-indigo-800: #393982; //// end of GitLab Design System's colors //// @@ -91,9 +58,7 @@ $gds-indigo-800: #393982; $body-color: $gds-gray-950; //font color $bg-overlay-color: rgba(0, 0, 0, 0.3); // body overlay $body-background-color: $gds-white; //body background -$main-background-color: $gds-white; // content background $header-background-color: $gds-purple-900; -$header-font-color: $gds-indigo-100; $header-free-trial-button-color: #cb4e18; // Link colors @@ -130,41 +95,24 @@ $versions-link-color-bg-hover: rgba($gds-gray-200, 0.6); $versions-active-bg-color: $versions-link-color-bg-hover; /// Elements -$blockquote-border-color: #dbdbdb; -$blockquote-background-color: #fafafa; -$blockquote-txt-color: #000; $h1-border-bottom: $gds-gray-700; -$h-border-bottom: $gds-gray-300; -$divider-color: $gds-gray-200; $border-color: $gds-gray-200; -$border-color-light: $gds-gray-50; -$table-border-color: $border-color; -$thead-border-color: $gds-gray-200; -$thead-background-color: $gds-gray-100; - -// Buttons -$button-default-bg-hover: $gds-gray-100; -$button-primary: #337ab7; -$button-warning: #f0ad4e; -$button-cta-background: rgb(230, 83, 40); -$button-cta-background-hover: rgb(201, 61, 43); // Pajama alerts -// $alert-info-bg: $gds-blue-100; $alert-info-bg: #fafafa; -$alert-info-txt: #000; +$alert-info-txt: $gds-black; $alert-info-border: #dbdbdb; $alert-success-bg: #fafafa; -$alert-success-txt: #000; +$alert-success-txt: $gds-black; $alert-success-border: #dbdbdb; $alert-warning-bg: #faf2f1; -$alert-warning-txt: #000; +$alert-warning-txt: $gds-black; $alert-warning-border: #f6d9d5; $alert-danger-bg: #faf2f1; -$alert-danger-txt: #000; +$alert-danger-txt: $gds-black; $alert-danger-border: #f6d9d5; $alert-gray-bg: $gds-gray-100; @@ -173,10 +121,6 @@ $alert-gray-border: $gds-gray-200; //// end of colors conforming with GitLab Design System //// -// Banner -$alert-banner-background: #fba225; -$alert-banner-text: #e14329 !important; - // Badges $badge-tier: $color-tanuki-dark; $badge-tier-transparent: rgba(252, 163, 38, 0.1); @@ -230,14 +174,7 @@ $help-gray-900: #303030; // Other colors $hr-border-color: $border-color; -$pre-background-color: rgba(238, 238, 238, 0.35); $search-border: rgba(0, 0, 0, 0.25); -$search-border-dark: rgba(0, 0, 0, 0.5); -$main-box-shadow: rgba(0, 0, 0, 0.1); -$secondary-box-shadow: rgba(0, 0, 0, 0.1); -$text-expander-hover-color: #e1e1e1; -$white: #fff; -$black: #333; // Colors $color-white: #fff; @@ -250,3 +187,242 @@ $youtube: #f00; // Article colors $article-metadata: rgb(110, 110, 110); + + +// New Styles from: https://gitlab.com/gitlab-org/gitlab/-/issues/300424 +// The above styles will be slowly replaced + +// Breakpoints +$bp-xs: 0 !default; +$bp-sm: 544px !default; +$bp-md: 768px !default; +$bp-lg: 992px !default; +$bp-xl: 1200px !default; + +$measure: 48rem; + +// Colors +$green-50: #ecf4ee !default; +$green-100: #c3e6cd !default; +$green-200: #91d4a8 !default; +$green-300: #52b87a !default; +$green-400: #2da160 !default; +$green-500: #108548 !default; +$green-600: #217645 !default; +$green-700: #24663b !default; +$green-800: #0d532a !default; +$green-900: #0a4020 !default; +$green-950: #072b15 !default; + +$blue-50: #e9f3fc !default; +$blue-100: #cbe2f9 !default; +$blue-200: #9dc7f1 !default; +$blue-300: #63a6e9 !default; +$blue-400: #428fdc !default; +$blue-500: #1f75cb !default; +$blue-600: #1068bf !default; +$blue-700: #0b5cad !default; +$blue-800: #064787 !default; +$blue-900: #033464 !default; +$blue-950: #002850 !default; + +$orange-50: #fdf1dd !default; +$orange-100: #f5d9a8 !default; +$orange-200: #e9be74 !default; +$orange-300: #d99530 !default; +$orange-400: #c17d10 !default; +$orange-500: #ab6100 !default; +$orange-600: #9e5400 !default; +$orange-700: #8f4700 !default; +$orange-800: #703800 !default; +$orange-900: #5c2900 !default; +$orange-950: #421f00 !default; + +$red-50: #fcf1ef !default; +$red-100: #fdd4cd !default; +$red-200: #fcb5aa !default; +$red-300: #f57f6c !default; +$red-400: #ec5941 !default; +$red-500: #dd2b0e !default; +$red-600: #c91c00 !default; +$red-700: #ae1800 !default; +$red-800: #8d1300 !default; +$red-900: #660e00 !default; +$red-950: #4d0a00 !default; + +$purple-50: #f4f0ff !default; +$purple-100: #e1d8f9 !default; +$purple-200: #cbbbf2 !default; +$purple-300: #ac93e6 !default; +$purple-400: #9475db !default; +$purple-500: #7b58cf !default; +$purple-600: #694cc0 !default; +$purple-700: #5943b6 !default; +$purple-800: #453894 !default; +$purple-900: #2f2a6b !default; +$purple-950: #232150 !default; + +$white: #fff !default; +$gray-10: #fafafa !default; +$gray-50: #f0f0f0 !default; +$gray-100: #dbdbdb !default; +$gray-200: #bfbfbf !default; +$gray-300: #999 !default; +$gray-400: #868686 !default; +$gray-500: #666 !default; +$gray-600: #5e5e5e !default; +$gray-700: #525252 !default; +$gray-800: #404040 !default; +$gray-900: #303030 !default; +$gray-950: #1f1f1f !default; + +// GitLab themes +$theme-indigo-50: #f1f1ff !default; +$theme-indigo-100: #dbdbf8 !default; +$theme-indigo-200: #c7c7f2 !default; +$theme-indigo-300: #a2a2e6 !default; +$theme-indigo-400: #8181d7 !default; +$theme-indigo-500: #6666c4 !default; +$theme-indigo-600: #5252b5 !default; +$theme-indigo-700: #41419f !default; +$theme-indigo-800: #303083 !default; +$theme-indigo-900: #222261 !default; +$theme-indigo-950: #14143d !default; + +// Typography +$font-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !default; + +$font-size-sm: 0.875rem; + +// Gl Markdown + +// Fonts +$gl-monospace-font: 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas', 'Ubuntu Mono', + 'Courier New', 'andale mono', 'lucida console', monospace; +$gl-regular-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', Ubuntu, + Cantarell, 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', + 'Noto Color Emoji'; + +$gl-fonts: ( + 'monospace': $gl-monospace-font, + 'regular': $gl-regular-font, +); + +// Text +$gl-font-weight-normal: 400; +$gl-font-weight-bold: 600; + +$gl-font-weights: ( + 'normal': $gl-font-weight-normal, + 'bold': $gl-font-weight-bold, +); + +$gl-font-size-monospace: px-to-rem(13px); +$gl-font-size-monospace-lg: px-to-rem(15px); +$gl-font-size-monospace-sm: px-to-rem(11px); + +// Misc mixins + +@mixin gl-text-gray-700 { + color: $gray-700; +} + +@mixin gl-text-gray-900 { + color: $gray-900; +} + +@mixin gl-border-b-solid($hover: true) { + border-bottom-style: solid; +} + +@mixin gl-border-b-1 { + border-bottom-width: $gl-border-size-1; +} + +@mixin gl-border-b-gray-200 { + border-bottom-color: $gray-200; +} + +@mixin gl-fluid-font-size($min, $max) { + @include gl-responsive-property('font-size', $min, $max); +} + +@mixin gl-fluid-line-height($min, $max) { + @include gl-responsive-property('line-height', $min, $max); +} + +@mixin gl-responsive-property( + $property, + $property-min, + $property-max, + $breakpoint-min: $breakpoint-md, + $breakpoint-max: $breakpoint-xl +) { + $breakpoint-range: ($breakpoint-max - $breakpoint-min) / 1rem; + $property-range: ($property-max - $property-min) / 1rem; + + @media (min-width: $breakpoint-min) { + #{$property}: calc(#{$property-min} + #{$property-range} * ((100vw - #{$breakpoint-min}) / #{$breakpoint-range})); + } + + @media (min-width: $breakpoint-max) { + #{$property}: $property-max; + } +} + +$gl-border-size-1: 1px; + +// Responsive breakpoints +$breakpoint-sm: px-to-rem(576px); +$breakpoint-md: px-to-rem(768px); +$breakpoint-lg: px-to-rem(992px); +$breakpoint-xl: px-to-rem(1200px); + +// Line height +$gl-line-height-16: px-to-rem(16px); +$gl-line-height-20: px-to-rem(20px); +$gl-line-height-24: px-to-rem(24px); +$gl-line-height-28: px-to-rem(28px); +$gl-line-height-32: px-to-rem(32px); +$gl-line-height-36: px-to-rem(36px); +$gl-line-height-44: px-to-rem(44px); +$gl-line-height-52: px-to-rem(52px); + +// Layout +$grid-size: 0.5rem; +$gl-spacing-scale-1: 0.25 * $grid-size; +$gl-spacing-scale-2: 0.5 * $grid-size; +$gl-spacing-scale-3: $grid-size; +$gl-spacing-scale-4: 1.5 * $grid-size; +$gl-spacing-scale-5: 2 * $grid-size; +$gl-spacing-scale-6: 3 * $grid-size; +$gl-spacing-scale-7: 4 * $grid-size; +$gl-spacing-scale-8: 5 * $grid-size; +$gl-spacing-scale-9: 6 * $grid-size; +$gl-spacing-scale-10: 7 * $grid-size; +$gl-spacing-scale-11: 8 * $grid-size; +$gl-spacing-scale-11-5: 9 * $grid-size; +$gl-spacing-scale-12: 10 * $grid-size; +$gl-spacing-scale-13: 12 * $grid-size; +$gl-spacing-scale-15: 15 * $grid-size; +$gl-spacing-scale-20: 20 * $grid-size; + +// Markdown typescale + +// default (min-width: 0) +$gl-font-size-markdown: px-to-rem(16px); +$gl-font-size-markdown-sm: px-to-rem(14px); + +$gl-font-size-markdown-h1: px-to-rem(28px); +$gl-font-size-markdown-h2: px-to-rem(23px); +$gl-font-size-markdown-h3: px-to-rem(19px); + +// breakpoint (min-width: 768px) +$gl-font-size-markdown-h1-md: px-to-rem(31px); +$gl-font-size-markdown-h2-md: px-to-rem(25px); +$gl-font-size-markdown-h3-md: px-to-rem(20px); + +// breakpoint (min-width: 1200px) +$gl-font-size-markdown-h1-xl: px-to-rem(45px); +$gl-font-size-markdown-h2-xl: px-to-rem(32px); +$gl-font-size-markdown-h3-xl: px-to-rem(23px); diff --git a/content/assets/stylesheets/footer.scss b/content/assets/stylesheets/footer.scss index a0a26642..f4de162e 100644 --- a/content/assets/stylesheets/footer.scss +++ b/content/assets/stylesheets/footer.scss @@ -1,15 +1,18 @@ --- -version: 9 +version: 10 --- @import 'variables'; .footer { border-color: $gds-gray-100; - max-width: $page-content-width; - font-size: $body-font-size; a { color: $footer-gray-500; + border-bottom: 0; + + &:hover { + border-bottom: 0; + } } .fa { diff --git a/content/assets/stylesheets/help.scss b/content/assets/stylesheets/help.scss index 1e3b0f10..988fdea0 100644 --- a/content/assets/stylesheets/help.scss +++ b/content/assets/stylesheets/help.scss @@ -1,5 +1,5 @@ --- -version: 4 +version: 5 --- @import 'variables'; @@ -14,13 +14,13 @@ version: 4 line-height: 1.333rem; .right-col { - @media all and (min-width: $sm-width) { + @media all and (min-width: $bp-sm) { border-left: 0.067 solid $help-gray-100; } } .help-subsection { - @media all and (max-width: $sm-width) { + @media all and (max-width: $bp-sm) { margin-top: 1rem; } } diff --git a/content/assets/stylesheets/highlight.scss b/content/assets/stylesheets/highlight.scss index a44529a9..d009fa6c 100644 --- a/content/assets/stylesheets/highlight.scss +++ b/content/assets/stylesheets/highlight.scss @@ -1,91 +1,11 @@ --- -version: 7 +version: 8 --- -/* https://github.com/idleberg/base16-pygments/blob/master/css/base16-ocean.dark.css */ pre.highlight { - padding: 0; - border: 1px solid rgba(0, 0, 0, 0.15); - box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.15); - border-radius: 3px; - overflow-x: hidden; - margin: 20px 0; - background: #2b303b; - color: #eff1f5; - - // Code itself - code { - padding: 13px 0 13px 15px; - margin-right: 36px; // 36px: the width of the .clip-btn - display: block; - color: inherit; - overflow-x: auto; - background: transparent; - } - - .hll { background-color: #4f5b66 } - .c { color: #65737e } /* Comment */ - .err { color: #bf616a } /* Error */ - .k { color: #b48ead } /* Keyword */ - .l { color: #d08770 } /* Literal */ - .n { color: #eff1f5 } /* Name */ - .o { color: #96b5b4 } /* Operator */ - .p { color: #eff1f5 } /* Punctuation */ - .cm { color: #65737e } /* Comment.Multiline */ - .cp { color: #65737e } /* Comment.Preproc */ - .c1 { color: #65737e } /* Comment.Single */ - .cs { color: #65737e } /* Comment.Special */ - .gd { color: #bf616a } /* Generic.Deleted */ - .ge { font-style: italic } /* Generic.Emph */ - .gh { color: #eff1f5; font-weight: bold } /* Generic.Heading */ - .gi { color: #a3be8c } /* Generic.Inserted */ - .gp { color: #65737e; font-weight: bold } /* Generic.Prompt */ - .gs { font-weight: bold } /* Generic.Strong */ - .gu { color: #96b5b4; font-weight: bold } /* Generic.Subheading */ - .kc { color: #b48ead } /* Keyword.Constant */ - .kd { color: #b48ead } /* Keyword.Declaration */ - .kn { color: #96b5b4 } /* Keyword.Namespace */ - .kp { color: #b48ead } /* Keyword.Pseudo */ - .kr { color: #b48ead } /* Keyword.Reserved */ - .kt { color: #ebcb8b } /* Keyword.Type */ - .ld { color: #a3be8c } /* Literal.Date */ - .m { color: #d08770 } /* Literal.Number */ - .s { color: #a3be8c } /* Literal.String */ - .na { color: #8fa1b3 } /* Name.Attribute */ - .nb { color: #eff1f5 } /* Name.Builtin */ - .nc { color: #ebcb8b } /* Name.Class */ - .no { color: #bf616a } /* Name.Constant */ - .nd { color: #96b5b4 } /* Name.Decorator */ - .ni { color: #eff1f5 } /* Name.Entity */ - .ne { color: #bf616a } /* Name.Exception */ - .nf { color: #8fa1b3 } /* Name.Function */ - .nl { color: #eff1f5 } /* Name.Label */ - .nn { color: #ebcb8b } /* Name.Namespace */ - .nx { color: #8fa1b3 } /* Name.Other */ - .py { color: #eff1f5 } /* Name.Property */ - .nt { color: #96b5b4 } /* Name.Tag */ - .nv { color: #bf616a } /* Name.Variable */ - .ow { color: #96b5b4 } /* Operator.Word */ - .w { color: #eff1f5 } /* Text.Whitespace */ - .mf { color: #d08770 } /* Literal.Number.Float */ - .mh { color: #d08770 } /* Literal.Number.Hex */ - .mi { color: #d08770 } /* Literal.Number.Integer */ - .mo { color: #d08770 } /* Literal.Number.Oct */ - .sb { color: #a3be8c } /* Literal.String.Backtick */ - .sc { color: #eff1f5 } /* Literal.String.Char */ - .sd { color: #65737e } /* Literal.String.Doc */ - .s2 { color: #a3be8c } /* Literal.String.Double */ - .se { color: #d08770 } /* Literal.String.Escape */ - .sh { color: #a3be8c } /* Literal.String.Heredoc */ - .si { color: #d08770 } /* Literal.String.Interpol */ - .sx { color: #a3be8c } /* Literal.String.Other */ - .sr { color: #a3be8c } /* Literal.String.Regex */ - .s1 { color: #a3be8c } /* Literal.String.Single */ - .ss { color: #a3be8c } /* Literal.String.Symbol */ - .bp { color: #eff1f5 } /* Name.Builtin.Pseudo */ - .vc { color: #bf616a } /* Name.Variable.Class */ - .vg { color: #bf616a } /* Name.Variable.Global */ - .vi { color: #bf616a } /* Name.Variable.Instance */ - .il { color: #d08770 } /* Literal.Number.Integer.Long */ - + position: relative; + margin-top: 1rem; + display: flex; + align-items: center; + justify-content: space-between; } diff --git a/content/assets/stylesheets/instantsearch.scss b/content/assets/stylesheets/instantsearch.scss index ae0adbc1..baa51400 100644 --- a/content/assets/stylesheets/instantsearch.scss +++ b/content/assets/stylesheets/instantsearch.scss @@ -1,5 +1,5 @@ --- -version: 12 +version: 13 --- @import 'variables'; @@ -35,7 +35,7 @@ $color12: rgba(32, 139, 196, 0.2); //link color lighter } .instantsearch-input { - @media all and (max-width: $sm-width) { + @media all and (max-width: $bp-sm) { margin-top: 40px; } } @@ -72,7 +72,7 @@ $color12: rgba(32, 139, 196, 0.2); //link color lighter } .lvl0 { - color: $black; + color: $gds-black; } .lvl1 { @@ -80,7 +80,7 @@ $color12: rgba(32, 139, 196, 0.2); //link color lighter } .lvl2 { - font-size: 14px; + font-size: 0.875rem; color: $color7; } @@ -126,7 +126,7 @@ $color12: rgba(32, 139, 196, 0.2); //link color lighter color: $link-color; } - @media all and (max-width: $sm-width) { + @media all and (max-width: $bp-sm) { .hit-tag { width: 60px; height: 23px; @@ -150,7 +150,7 @@ $color12: rgba(32, 139, 196, 0.2); //link color lighter .main.class { padding-top: 90px; - @media (max-width: $sm-width) { + @media (max-width: $bp-sm) { padding-top: 20px; } } diff --git a/content/assets/stylesheets/mixins/_breakpoints.scss b/content/assets/stylesheets/mixins/_breakpoints.scss new file mode 100644 index 00000000..c6918864 --- /dev/null +++ b/content/assets/stylesheets/mixins/_breakpoints.scss @@ -0,0 +1,38 @@ +--- +version: 1 +--- + +// Breakpoints + +// @include breakpoint(sm) {}; +@mixin breakpoint($min: 0, $max: 0) { + $type: type-of($min); + + @if $type == string { + + @if $min == xs { // < 544px + @media only screen and (max-width: $bp-xs) { @content; } + } @else if $min == sm { // > 544px + @media only screen and (min-width: $bp-sm) { @content; } + } @else if $min == md { // > 768px + @media only screen and (min-width: $bp-md) { @content; } + } @else if $min == lg { // > 992px + @media only screen and (min-width: $bp-lg) { @content; } + } @else if $min == xl { // > 1200px + @media only screen and (min-width: $bp-xl) { @content; } + } @else if $min == 2x { + @media only screen and (-webkit-min-device-pixel-ratio: 1.5), + only screen and (min--moz-device-pixel-ratio: 1.5), + only screen and (min-device-pixel-ratio: 1.5) { @content; } + } @else { + @warn 'Breakpoint mixin supports: xs, sm, md, lg, xl, 2x'; + } + } @else if $type == number { + // Allow for custom parameters for min and max size + $query: 'all' !default; + @if $min != 0 and $max != 0 { $query: 'only screen and (min-width: #{$min}) and (max-width: #{$max})'; } // set both min and max + @else if $min != 0 and $max == 0 { $query: 'only screen and (min-width: #{$min})'; } // set just min + @else if $min == 0 and $max != 0 { $query: 'only screen and (max-width: #{$max})'; } // set just max + @media #{$query} { @content; } + } +} diff --git a/content/assets/stylesheets/mixins/_functions.scss b/content/assets/stylesheets/mixins/_functions.scss new file mode 100644 index 00000000..0a7aec9f --- /dev/null +++ b/content/assets/stylesheets/mixins/_functions.scss @@ -0,0 +1,55 @@ +--- +version: 1 +--- + +/* +* SASS preserves units in arithmetic operations. For example: +* 12em * 0 = 0em. This function return the unit of a numeric value. +* +* For more examples, see: https://codepen.io/paulgv/pen/XWrqMgQ +*/ +@function extract-unit($number) { + @return $number * 0 + 1; +} + +@function strip-unit($number) { + @if type-of($number) == 'number' and not unitless($number) { + @return $number / extract-unit($number); + } + + @return $number; +} + +@function single-unit-rem($value, $font-size-base) { + @if (extract-unit($value) != 1px) { + @return $value; + } + + $converted: $value / $font-size-base; + + @return strip-unit($converted) * 1rem; +} + +@function multiple-units-rem($values, $font-size-base) { + $rem-values: (); + + @each $value in $values { + $rem-values: append($rem-values, single-unit-rem($value, $font-size-base)); + } + + @return $rem-values; +} + +@function px-to-rem($px, $font-size-base: 16px) { + @if type-of($px) == 'number' { + @return single-unit-rem($px, $font-size-base); + } @else if type-of($px) == 'list' { + @return multiple-units-rem($px, $font-size-base); + } @else { + @return $px; + } +} + +@function if-important($important) { + @return #{if($important, '!important', '')}; +} diff --git a/content/assets/stylesheets/mixins/_md-typography.scss b/content/assets/stylesheets/mixins/_md-typography.scss new file mode 100644 index 00000000..c937f1f6 --- /dev/null +++ b/content/assets/stylesheets/mixins/_md-typography.scss @@ -0,0 +1,178 @@ +--- +version: 1 +--- + +/** +* Font family utility +* +* naming convention: gl-font-{family-name} +* Notes: +* - Strictly based on design system typography specs +*/ +@mixin gl-font-monospace { + font-family: $gl-monospace-font; +} + +@mixin gl-font-regular { + font-family: $gl-regular-font; +} + +/** +* Font style utility +* +* naming convention: gl-font-style-{family-name} +*/ +@mixin gl-font-style-italic { + font-style: italic; +} + +/** +* Font size utility +* +* naming convention: gl-font-{type-scale-size} +* Notes: +* - Strictly based on design system type scale. See +* $gl-type-scale for further references. +*/ +@mixin gl-font-sm { + font-size: $gl-font-size-sm; +} + +@mixin gl-font-base { + font-size: $gl-font-size; +} + +@mixin gl-font-lg { + font-size: $gl-font-size-lg; +} + +@mixin gl-font-size-h-display { + font-size: $gl-font-size-h-display; +} + +@mixin gl-font-size-h1 { + font-size: $gl-font-size-h1; +} + +@mixin gl-font-size-h2 { + font-size: $gl-font-size-h2; +} + +@mixin gl-font-size-h-display-xl { + font-size: $gl-font-size-h-display-xl; +} + +@mixin gl-font-size-h1-xl { + font-size: $gl-font-size-h1-xl; +} + +@mixin gl-font-size-h2-xl { + font-size: $gl-font-size-h2-xl; +} + +@mixin gl-font-size-monospace { + font-size: $gl-font-size-monospace; +} + +@mixin gl-font-size-monospace-sm { + font-size: $gl-font-size-monospace-sm; +} + +@mixin gl-font-size-monospace-lg { + font-size: $gl-font-size-monospace-lg; +} + +@mixin gl-font-icon-size { + font-size: $default-icon-size; +} + +@mixin gl-font-size-markdown-sm { + font-size: $gl-font-size-markdown-sm; +} + +@mixin gl-font-size-markdown { + font-size: $gl-font-size-markdown; +} + +@mixin gl-font-size-markdown-h1 { + font-size: $gl-font-size-markdown-h1; +} + +@mixin gl-font-size-markdown-h2 { + font-size: $gl-font-size-markdown-h2; +} + +@mixin gl-font-size-markdown-h3 { + font-size: $gl-font-size-markdown-h3; +} + +@mixin gl-font-size-compact-markdown-h1 { + font-size: $gl-font-size-compact-markdown-h1; +} + +/** +* Font-weight utilities. +* +* naming convention: gl-font-weight-[bold|normal|number] +*/ + +@mixin gl-font-weight-100 { + font-weight: 100; +} + +@mixin gl-font-weight-normal { + font-weight: $gl-font-weight-normal; +} + +@mixin gl-font-weight-bold { + font-weight: $gl-font-weight-bold; +} + +@mixin gl-sm-font-weight-bold { + @media (min-width: $breakpoint-sm) { + @include gl-font-weight-bold; + } +} + +/** +* Line height utilities. +* +* naming convention: gl-line-height-{line-height-in-pixels} +* notes: +* - Strictly based in gl-line-height-{n} variables +*/ +@mixin gl-line-height-0 { + line-height: 0; +} + +@mixin gl-line-height-normal { + line-height: $gl-line-height-16; +} + +@mixin gl-line-height-20 { + line-height: $gl-line-height-20; +} + +@mixin gl-line-height-24 { + line-height: $gl-line-height-24; +} + +@mixin gl-line-height-28 { + line-height: $gl-line-height-28; +} + +@mixin gl-line-height-32 { + line-height: $gl-line-height-32; +} + +@mixin gl-line-height-36 { + line-height: $gl-line-height-36; +} + +@mixin gl-line-height-52 { + line-height: $gl-line-height-52; +} + +@mixin gl-reset-line-height { + line-height: inherit; +} diff --git a/content/assets/stylesheets/mixins/_screen-reader.scss b/content/assets/stylesheets/mixins/_screen-reader.scss new file mode 100644 index 00000000..705dc4bc --- /dev/null +++ b/content/assets/stylesheets/mixins/_screen-reader.scss @@ -0,0 +1,36 @@ +--- +version: 1 +--- + +// Only display content to screen readers +// See: http://a11yproject.com/posts/how-to-hide-content/ + +@mixin sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; + white-space: nowrap; +} + +// Use in conjunction with .sr-only to only display content when it's focused. +// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 +// Credit: HTML5 Boilerplate + +@mixin sr-only-focusable { + &:active, + &:focus { + position: static; + width: auto; + height: auto; + margin: 0; + overflow: visible; + clip: auto; + white-space: normal; + } +} + diff --git a/content/assets/stylesheets/mixins/_spacing.scss b/content/assets/stylesheets/mixins/_spacing.scss new file mode 100644 index 00000000..18e5ca87 --- /dev/null +++ b/content/assets/stylesheets/mixins/_spacing.scss @@ -0,0 +1,823 @@ +--- +version: 1 +--- + +/** +* Padding utilities. +* +* naming convention: gl-p{position}-{spacing-scale-index} +* notes: +* - Utilities should strictly follow $gl-spacing-scale +*/ +@mixin gl-p-0 { + padding: 0; +} + +@mixin gl-p-1 { + padding: $gl-spacing-scale-1; +} + +@mixin gl-p-2 { + padding: $gl-spacing-scale-2; +} + +@mixin gl-p-3 { + padding: $gl-spacing-scale-3; +} + +@mixin gl-p-4 { + padding: $gl-spacing-scale-4; +} + +@mixin gl-p-5 { + padding: $gl-spacing-scale-5; +} + +@mixin gl-p-6 { + padding: $gl-spacing-scale-6; +} + +@mixin gl-p-7 { + padding: $gl-spacing-scale-7; +} + +@mixin gl-px-0 { + padding-left: 0; + padding-right: 0; +} + +@mixin gl-px-1 { + padding-left: $gl-spacing-scale-1; + padding-right: $gl-spacing-scale-1; +} + +@mixin gl-px-2 { + padding-left: $gl-spacing-scale-2; + padding-right: $gl-spacing-scale-2; +} + +@mixin gl-px-3 { + padding-left: $gl-spacing-scale-3; + padding-right: $gl-spacing-scale-3; +} + +@mixin gl-px-4 { + padding-left: $gl-spacing-scale-4; + padding-right: $gl-spacing-scale-4; +} + +@mixin gl-px-5 { + padding-left: $gl-spacing-scale-5; + padding-right: $gl-spacing-scale-5; +} + +@mixin gl-px-6 { + padding-left: $gl-spacing-scale-6; + padding-right: $gl-spacing-scale-6; +} + +@mixin gl-px-7 { + padding-left: $gl-spacing-scale-7; + padding-right: $gl-spacing-scale-7; +} + +@mixin gl-px-8 { + padding-left: $gl-spacing-scale-8; + padding-right: $gl-spacing-scale-8; +} + +@mixin gl-pr-0 { + padding-right: 0; +} + +@mixin gl-pr-1 { + padding-right: $gl-spacing-scale-1; +} + +@mixin gl-pr-2 { + padding-right: $gl-spacing-scale-2; +} + +@mixin gl-pr-3 { + padding-right: $gl-spacing-scale-3; +} + +@mixin gl-pr-4 { + padding-right: $gl-spacing-scale-4; +} + +@mixin gl-pr-5 { + padding-right: $gl-spacing-scale-5; +} + +@mixin gl-pr-6 { + padding-right: $gl-spacing-scale-6; +} + +@mixin gl-pr-7 { + padding-right: $gl-spacing-scale-7; +} + +@mixin gl-pr-8 { + padding-right: $gl-spacing-scale-8; +} + +@mixin gl-pr-9 { + padding-right: $gl-spacing-scale-9; +} + +@mixin gl-pl-0 { + padding-left: 0; +} + +@mixin gl-pl-1 { + padding-left: $gl-spacing-scale-1; +} + +@mixin gl-pl-2 { + padding-left: $gl-spacing-scale-2; +} + +@mixin gl-pl-3 { + padding-left: $gl-spacing-scale-3; +} + +@mixin gl-pl-4 { + padding-left: $gl-spacing-scale-4; +} + +@mixin gl-pl-5 { + padding-left: $gl-spacing-scale-5; +} + +@mixin gl-pl-6 { + padding-left: $gl-spacing-scale-6; +} + +@mixin gl-pl-7 { + padding-left: $gl-spacing-scale-7; +} + +@mixin gl-pl-9 { + padding-left: $gl-spacing-scale-9; +} + +@mixin gl-pt-0 { + padding-top: 0; +} + +@mixin gl-pt-1 { + padding-top: $gl-spacing-scale-1; +} + +@mixin gl-pt-2 { + padding-top: $gl-spacing-scale-2; +} + +@mixin gl-pt-md-2 { + @media (min-width: $breakpoint-md) { + padding-top: $gl-spacing-scale-2; + } +} + +@mixin gl-pt-3 { + padding-top: $gl-spacing-scale-3; +} + +@mixin gl-pt-4 { + padding-top: $gl-spacing-scale-4; +} + +@mixin gl-pt-5 { + padding-top: $gl-spacing-scale-5; +} + +@mixin gl-pt-6 { + padding-top: $gl-spacing-scale-6; +} + +@mixin gl-pt-7 { + padding-top: $gl-spacing-scale-7; +} + +@mixin gl-pt-8 { + padding-top: $gl-spacing-scale-8; +} + +@mixin gl-pt-9 { + padding-top: $gl-spacing-scale-9; +} + +@mixin gl-pt-12 { + padding-top: $gl-spacing-scale-12; +} + +@mixin gl-md-pt-12 { + @media (min-width: $breakpoint-md) { + @include gl-pt-12; + } +} + +@mixin gl-pb-0 { + padding-bottom: 0; +} + +@mixin gl-pb-1 { + padding-bottom: $gl-spacing-scale-1; +} + +@mixin gl-pb-2 { + padding-bottom: $gl-spacing-scale-2; +} + +@mixin gl-pb-3 { + padding-bottom: $gl-spacing-scale-3; +} + +@mixin gl-pb-4 { + padding-bottom: $gl-spacing-scale-4; +} + +@mixin gl-pb-5 { + padding-bottom: $gl-spacing-scale-5; +} + +@mixin gl-pb-6 { + padding-bottom: $gl-spacing-scale-6; +} + +@mixin gl-pb-7 { + padding-bottom: $gl-spacing-scale-7; +} + +@mixin gl-pb-11 { + padding-bottom: $gl-spacing-scale-11; +} + +@mixin gl-py-0 { + padding-top: 0; + padding-bottom: 0; +} + +@mixin gl-py-1 { + padding-top: $gl-spacing-scale-1; + padding-bottom: $gl-spacing-scale-1; +} + +@mixin gl-py-2 { + padding-top: $gl-spacing-scale-2; + padding-bottom: $gl-spacing-scale-2; +} + +@mixin gl-py-3 { + padding-top: $gl-spacing-scale-3; + padding-bottom: $gl-spacing-scale-3; +} + +@mixin gl-py-4 { + padding-top: $gl-spacing-scale-4; + padding-bottom: $gl-spacing-scale-4; +} + +@mixin gl-py-5 { + padding-top: $gl-spacing-scale-5; + padding-bottom: $gl-spacing-scale-5; +} + +@mixin gl-py-6 { + padding-top: $gl-spacing-scale-6; + padding-bottom: $gl-spacing-scale-6; +} + +@mixin gl-py-7 { + padding-top: $gl-spacing-scale-7; + padding-bottom: $gl-spacing-scale-7; +} + +/** +* Margin utilities. +* +* naming convention: gl-m{position}-{spacing-scale-index} +* notes: +* - Utilities should strictly follow $gl-spacing-scale +*/ +@mixin gl-m-0 { + margin: 0; +} + +@mixin gl-m-2 { + margin: $gl-spacing-scale-2; +} + +@mixin gl-m-3 { + margin: $gl-spacing-scale-3; +} + +@mixin gl-m-4 { + margin: $gl-spacing-scale-4; +} + +@mixin gl-m-5 { + margin: $gl-spacing-scale-5; +} + +@mixin gl-mt-0 { + margin-top: 0; +} + +@mixin gl-mt-1 { + margin-top: $gl-spacing-scale-1; +} + +@mixin gl-mt-n1 { + margin-top: -$gl-spacing-scale-1; +} + +@mixin gl-mt-md-n2 { + @media (min-width: $breakpoint-md) { + margin-top: -$gl-spacing-scale-2; + } +} + +@mixin gl-mt-2 { + margin-top: $gl-spacing-scale-2; +} + +@mixin gl-mt-n2 { + margin-top: -$gl-spacing-scale-2; +} + +@mixin gl-mt-3 { + margin-top: $gl-spacing-scale-3; +} + +@mixin gl-mt-n3 { + margin-top: -$gl-spacing-scale-3; +} + +@mixin gl-mt-4 { + margin-top: $gl-spacing-scale-4; +} + +@mixin gl-mt-5 { + margin-top: $gl-spacing-scale-5; +} + +@mixin gl-mt-6 { + margin-top: $gl-spacing-scale-6; +} + +@mixin gl-mt-7 { + margin-top: $gl-spacing-scale-7; +} + +@mixin gl-mr-auto { + margin-right: auto; +} + +@mixin gl-mr-0 { + margin-right: 0; +} + +@mixin gl-mr-1 { + margin-right: $gl-spacing-scale-1; +} + +@mixin gl-mr-n1 { + margin-right: -$gl-spacing-scale-1; +} + +@mixin gl-mr-2 { + margin-right: $gl-spacing-scale-2; +} + +@mixin gl-mr-3 { + margin-right: $gl-spacing-scale-3; +} + +@mixin gl-mr-4 { + margin-right: $gl-spacing-scale-4; +} + +@mixin gl-mr-n4 { + margin-right: -$gl-spacing-scale-4; +} + +@mixin gl-mr-5 { + margin-right: $gl-spacing-scale-5; +} + +@mixin gl-mr-6 { + margin-right: $gl-spacing-scale-6; +} + +@mixin gl-mr-7 { + margin-right: $gl-spacing-scale-7; +} + +@mixin gl-mb-0 { + margin-bottom: 0; +} + +@mixin gl-mb-1 { + margin-bottom: $gl-spacing-scale-1; +} + +@mixin gl-mb-n1 { + margin-bottom: -$gl-spacing-scale-1; +} + +@mixin gl-mb-2 { + margin-bottom: $gl-spacing-scale-2; +} + +@mixin gl-mb-3 { + margin-bottom: $gl-spacing-scale-3; +} + +@mixin gl-mb-4 { + margin-bottom: $gl-spacing-scale-4; +} + +@mixin gl-mb-5 { + margin-bottom: $gl-spacing-scale-5; +} + +@mixin gl-mb-6 { + margin-bottom: $gl-spacing-scale-6; +} + +@mixin gl-mb-7 { + margin-bottom: $gl-spacing-scale-7; +} + +@mixin gl-mb-8 { + margin-bottom: $gl-spacing-scale-8; +} + +@mixin gl-md-mb-0 { + @media (min-width: $breakpoint-md) { + @include gl-mb-0; + } +} + +@mixin gl-ml-auto { + margin-left: auto; +} + +@mixin gl-ml-0 { + margin-left: 0; +} + +@mixin gl-ml-1 { + margin-left: $gl-spacing-scale-1; +} + +@mixin gl-ml-n1 { + margin-left: -$gl-spacing-scale-1; +} + +@mixin gl-ml-2 { + margin-left: $gl-spacing-scale-2; +} + +@mixin gl-ml-n2 { + margin-left: -$gl-spacing-scale-2; +} + +@mixin gl-ml-3 { + margin-left: $gl-spacing-scale-3; +} + +@mixin gl-ml-4 { + margin-left: $gl-spacing-scale-4; +} + +@mixin gl-ml-n4 { + margin-left: -$gl-spacing-scale-4; +} + +@mixin gl-ml-5 { + margin-left: $gl-spacing-scale-5; +} + +@mixin gl-ml-6 { + margin-left: $gl-spacing-scale-6; +} + +@mixin gl-ml-7 { + margin-left: $gl-spacing-scale-7; +} + +@mixin gl-ml-11 { + margin-left: $gl-spacing-scale-11; +} + +@mixin gl-my-auto { + margin-top: auto; + margin-bottom: auto; +} + +@mixin gl-my-0 { + margin-top: 0; + margin-bottom: 0; +} + +@mixin gl-my-1 { + margin-top: $gl-spacing-scale-1; + margin-bottom: $gl-spacing-scale-1; +} + +@mixin gl-my-2 { + margin-top: $gl-spacing-scale-2; + margin-bottom: $gl-spacing-scale-2; +} + +@mixin gl-my-3 { + margin-top: $gl-spacing-scale-3; + margin-bottom: $gl-spacing-scale-3; +} + +@mixin gl-my-4 { + margin-top: $gl-spacing-scale-4; + margin-bottom: $gl-spacing-scale-4; +} + +@mixin gl-my-5 { + margin-top: $gl-spacing-scale-5; + margin-bottom: $gl-spacing-scale-5; +} + +@mixin gl-my-6 { + margin-top: $gl-spacing-scale-6; + margin-bottom: $gl-spacing-scale-6; +} + +@mixin gl-my-7 { + margin-top: $gl-spacing-scale-7; + margin-bottom: $gl-spacing-scale-7; +} + +@mixin gl-my-8 { + margin-top: $gl-spacing-scale-8; + margin-bottom: $gl-spacing-scale-8; +} + +@mixin gl-my-9 { + margin-top: $gl-spacing-scale-9; + margin-bottom: $gl-spacing-scale-9; +} + +@mixin gl-my-11 { + margin-top: $gl-spacing-scale-11; + margin-bottom: $gl-spacing-scale-11; +} + +@mixin gl-my-12 { + margin-top: $gl-spacing-scale-12; + margin-bottom: $gl-spacing-scale-12; +} + +@mixin gl-mx-auto { + margin-left: auto; + margin-right: auto; +} + +@mixin gl-mx-0 { + margin-left: 0; + margin-right: 0; +} + +@mixin gl-mx-1 { + margin-left: $gl-spacing-scale-1; + margin-right: $gl-spacing-scale-1; +} + +@mixin gl-mx-2 { + margin-left: $gl-spacing-scale-2; + margin-right: $gl-spacing-scale-2; +} + +@mixin gl-mx-3 { + margin-left: $gl-spacing-scale-3; + margin-right: $gl-spacing-scale-3; +} + +@mixin gl-mx-4 { + margin-left: $gl-spacing-scale-4; + margin-right: $gl-spacing-scale-4; +} + +@mixin gl-mx-5 { + margin-left: $gl-spacing-scale-5; + margin-right: $gl-spacing-scale-5; +} + +@mixin gl-mx-6 { + margin-left: $gl-spacing-scale-6; + margin-right: $gl-spacing-scale-6; +} + +@mixin gl-mx-7 { + margin-left: $gl-spacing-scale-7; + margin-right: $gl-spacing-scale-7; +} + +@mixin gl-mx-8 { + margin-left: $gl-spacing-scale-8; + margin-right: $gl-spacing-scale-8; +} + +/** +* Negative margin utilities. +* +* naming convention: gl-m{position}-n{spacing-scale-index} +* notes: +* - Utilities should strictly follow $gl-spacing-scale +*/ +@mixin gl-my-n1 { + margin-top: -#{$gl-spacing-scale-1}; + margin-bottom: -#{$gl-spacing-scale-1}; +} + +@mixin gl-mx-n1 { + margin-left: -#{$gl-spacing-scale-1}; + margin-right: -#{$gl-spacing-scale-1}; +} + +@mixin gl-my-n2 { + margin-top: -#{$gl-spacing-scale-2}; + margin-bottom: -#{$gl-spacing-scale-2}; +} + +@mixin gl-mx-n2 { + margin-left: -#{$gl-spacing-scale-2}; + margin-right: -#{$gl-spacing-scale-2}; +} + +@mixin gl-my-n3 { + margin-top: -#{$gl-spacing-scale-3}; + margin-bottom: -#{$gl-spacing-scale-3}; +} + +@mixin gl-mx-n3 { + margin-left: -#{$gl-spacing-scale-3}; + margin-right: -#{$gl-spacing-scale-3}; +} + +@mixin gl-my-n4 { + margin-top: -#{$gl-spacing-scale-4}; + margin-bottom: -#{$gl-spacing-scale-4}; +} + +@mixin gl-mx-n4 { + margin-left: -#{$gl-spacing-scale-4}; + margin-right: -#{$gl-spacing-scale-4}; +} + +/** +* Responsive margin utilities. +* +* naming convention: gl-{breakpoint}-m{position}-{spacing-scale-index} +* notes: +* - Utilities should strictly follow $gl-spacing-scale +*/ + +@mixin gl-xs-mb-3 { + @media (max-width: $breakpoint-sm) { + @include gl-mb-3; + } +} + +@mixin gl-sm-ml-3 { + @media (min-width: $breakpoint-sm) { + @include gl-ml-3; + } +} + +@mixin gl-sm-mt-0 { + @media (min-width: $breakpoint-sm) { + @include gl-mt-0; + } +} + +@mixin gl-sm-mt-5 { + @media (min-width: $breakpoint-sm) { + @include gl-mt-5; + } +} + +@mixin gl-sm-mb-7 { + @media (min-width: $breakpoint-sm) { + @include gl-mb-7; + } +} + +@mixin gl-sm-my-12 { + @media (min-width: $breakpoint-sm) { + @include gl-my-12; + } +} + +@mixin gl-sm-mx-0 { + @media (min-width: $breakpoint-sm) { + @include gl-mx-0; + } +} + +@mixin gl-md-mt-0 { + @media (min-width: $breakpoint-md) { + @include gl-mx-0; + } +} + +@mixin gl-lg-mb-0 { + @media (min-width: $breakpoint-lg) { + @include gl-mb-0; + } +} + +@mixin gl-md-mr-3 { + @media (min-width: $breakpoint-md) { + @include gl-mr-3; + } +} + +@mixin gl-lg-mr-2 { + @media (min-width: $breakpoint-lg) { + @include gl-mr-2; + } +} + +@mixin gl-lg-mr-3 { + @media (min-width: $breakpoint-lg) { + @include gl-mr-3; + } +} + +@mixin gl-lg-ml-2 { + @media (min-width: $breakpoint-lg) { + @include gl-ml-2; + } +} + +@mixin gl-lg-ml-3 { + @media (min-width: $breakpoint-lg) { + @include gl-ml-3; + } +} + +@mixin gl-lg-mx-2 { + @media (min-width: $breakpoint-lg) { + @include gl-mx-2; + } +} + +@mixin gl-lg-mx-3 { + @media (min-width: $breakpoint-lg) { + @include gl-mx-3; + } +} + +@mixin gl-lg-mt-0 { + @media (min-width: $breakpoint-lg) { + @include gl-mt-0; + } +} + +/** +* Responsive padding utilities. +* +* naming convention: gl-{breakpoint}-p{position}-{spacing-scale-index} +* notes: +* - Utilities should strictly follow $gl-spacing-scale +*/ +@mixin gl-sm-pr-5 { + @media (max-width: $breakpoint-sm) { + @include gl-pr-5; + } +} + +@mixin gl-sm-pl-5 { + @media (max-width: $breakpoint-sm) { + @include gl-pl-5; + } +} + +@mixin gl-md-pr-1 { + @media (min-width: $breakpoint-md) { + @include gl-pr-1; + } +} + +@mixin gl-md-pr-2 { + @media (min-width: $breakpoint-md) { + @include gl-pr-2; + } +} + +@mixin gl-lg-pr-5 { + @media (min-width: $breakpoint-lg) { + @include gl-pr-5; + } +} diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss index 6ae49996..faa4f957 100644 --- a/content/assets/stylesheets/stylesheet.scss +++ b/content/assets/stylesheets/stylesheet.scss @@ -1,317 +1,41 @@ --- -version: 108 +version: 109 --- -@import 'variables'; +// @import 'variables'; @import 'utilities'; @import 'landing'; -*, -*::before, -*::after { - box-sizing: border-box; -} +@import 'normalize'; +@import 'mixins'; +@import 'variables'; +@import 'base'; +@import 'typography'; +@import 'tables'; +@import 'breadcrumbs'; +@import 'sidebar'; body { - margin: 0; - padding: 0; - line-height: 24px; - font-family: $sans-font-family; - font-size: $body-font-size; - color: $body-color; overflow-x: hidden; >.wrapper { min-height: 100vh; - @media(max-width: $md-width) { + @media(max-width: $bp-md) { flex-direction: column-reverse; background-color: $white; } - // adds extra padding to the side-nav and main content if a banner is displayed. - &.show-banner .nav-wrapper, - &.show-banner .main { - padding-top: calc(#{$page-header-height} + #{$banner-height}); - } - } -} - -a, -a:visited { - text-decoration: none; - color: $link-color; - &:hover { - color: $link-color-hover; - text-decoration: underline; - } -} - -details { - summary { - display: list-item; - } -} - -table { - width: 100%; - border-collapse: collapse; - overflow-x: auto; - margin: 15px auto; - word-wrap: break-word; - clear: both; - thead { - background: $thead-background-color; - } - tbody { - border-top: 3px solid $gds-gray-200; - &:first-child { - border-top: 0; - } - tr>td { - max-width: 100%; - min-width: 100px; - } - code { - word-wrap: break-word; - } - } - - td, - th { - text-align: left; - vertical-align: top; - padding: 8px; - border: 1px solid $table-border-color; - font-size: 14px; - .badge-small { - &:hover::after { - padding: 5px; - } - } - } - @media all and (max-width: $sm-width) { - display: block; - } - &.borderless-table { - border: 0; - tr, - td, - th { - border: 0; - } - } - &.center { - td { - text-align: center; - } - } - &.fixed-table { - table-layout: fixed; // use this for columns with the same width - thead th { - top: $header-height; - position: sticky; - background-color: $thead-background-color; - z-index: 3; - } - } -} - -blockquote { - background-color: $blockquote-background-color; - color: $blockquote-txt-color; - border: solid 1px $blockquote-border-color; - border-radius: 5px; - margin: 1rem 0; - padding: 0 1rem; - font-size: $body-font-size; - .highlight { - background-color: $white; - } - - p:first-child { - margin-top: 1rem; - } - - // Override bootstrap - ol:last-child, - p:last-child, - ul:last-child { - margin: inherit; - - li { - line-height: 1rem; - padding-top: 0.5rem; - } - } -} - -kbd { - @include code-styles; -} - -pre { - background-color: $pre-background-color; - position: relative; - code { - @include code-styles; - } - .clip-btn { - display: inline-block; - padding: 10px 10px 10px 13px; - right: -0.25rem; - top: 0; - cursor: pointer; - position: absolute; - fill: $white; - background-color: $pre-code-color; - border: 0; - outline: 0; - svg { - opacity: 0.5; - transition: opacity 0.3s ease-in; - pointer-events: none; - } - @media all and (max-width: $sm-width) { - display: none; - } - } - &:hover { - .clip-btn { - svg { - opacity: 1; - } - } - } -} - -code, -code span { - font-family: $mono-font-family; -} - -p code, -li code, -table code { - @include code-color; -} - -a>code { - color: $link-code-color; -} - -hr { - border: 0; - border-top: 1px solid $hr-border-color; - width: 100%; -} - -// Make code in headers match the font size of the given header. -// https://gitlab.com/gitlab-org/gitlab-docs/issues/107#note_36655246 -h2, -h3, -h4, -h5, -h6 { - line-height: 1.4; - padding-bottom: 5px; - code { - @include code-color; - } - &[id]::before { - display: block; - content: ' '; - margin-top: -75px; - height: 75px; - visibility: hidden; - } - @media all and (min-width: $sm-width) { - .anchor { - opacity: 0; - float: left; - margin-left: -30px; - vertical-align: bottom; - margin-top: 8px; - height: 22px; - } - &:hover .anchor { - opacity: 1; - } } } -// base fonts -// p font size = $body-font-size: 15px; h1 { - font-size: 34px; - font-weight: 700; - border-bottom: solid 2px $h1-border-bottom; - padding-bottom: 10px; - margin-top: $h-margin-top; - margin-bottom: $h-margin-bottom; - @media (max-width: $sm-width) { - font-size: 26px; - } - code { - @include code-color; - } - .anchor { display: none; } } -h2 { - font-size: 28px; - font-weight: 700; - margin-top: $h2-margin-top; - margin-bottom: $h-margin-bottom; - @media (max-width: $sm-width) { - font-size: 24px; - } -} - -h3 { - font-size: 23px; - font-weight: 700; - margin-top: $h2-margin-top; - margin-bottom: $h-margin-bottom; - @media (max-width: $sm-width) { - font-size: 22px; - } -} - -h4 { - font-size: 18px; - font-weight: 700; - margin-top: $h2-margin-top; - margin-bottom: $h-margin-bottom; - @media (max-width: $sm-width) { - font-size: 20px; - } -} - -h5 { - font-size: 16px; - font-weight: 600; - margin-top: $h2-margin-top; - margin-bottom: $h-margin-bottom; - @media (max-width: $sm-width) { - font-size: 18px; - } -} - -h6 { - font-size: 15px; - font-weight: 600; - margin-top: $h2-margin-top; - margin-bottom: $h-margin-bottom; - @media (max-width: $sm-width) { - font-size: 16px; - } -} - .main { - padding: 0 5%; - background: $main-background-color; + padding: 0 1rem 0 3rem; z-index: 1; + &:not(.has-toc) { >.doc-nav { display: none; @@ -327,7 +51,7 @@ h6 { &::before { content: '\f126'; font-family: FontAwesome; - font-size: 14px; + font-size: 0.875rem; font-style: normal; font-weight: normal; padding-right: 5px; @@ -338,100 +62,7 @@ h6 { } } } - // external link and footer social links - [href^='http://'], - [href^='https://'] { - &:not([href*='gitlab.com']):not(.gitlab-social) { - &::after { - content: '\f08e'; - font-family: FontAwesome; - font-size: 14px; - font-style: normal; - font-weight: normal; - padding-left: 5px; - line-height: 10px; - } - } - } - p { - margin: 0 0 1em; - } - ul { - margin-top: -8px 0; - margin-bottom: 0 0; - } - ol { - margin-top: -8px 0; - margin-bottom: 0 0; - ol { - list-style-type: lower-alpha; - ol { - list-style-type: lower-roman; - } - } - } - li { - &:not(.gl-breadcrumb-item) { - line-height: 1.6em; - padding-bottom: 0.5rem; - ul li:first-of-type { - padding-top: 12px; - } - ol li:first-of-type { - padding-top: 12px; - } - >ul, - >ol { - margin-top: 0; - margin-bottom: 0; - } - } - } - main img { - max-width: calc(100% - 10px); - max-height: 100vh; - border: 1px solid $gds-gray-200; - margin-top: 26px; - margin-bottom: 30px; - margin-right: auto; - margin-left: auto; - display: block; - } - // Override bootstrap defaults - .nav-tabs>li>a { - padding: 10px 15px; - display: block; - margin-right: 2px; - border-radius: 4px 4px 0 0; - text-decoration: none; - &.active { - background-color: $gds-white; - } - } - .nav-link { - padding: 0; - } - code { - word-break: normal; - padding: 2px 4px; - line-height: 22px; - } - .input-group-text { - background-color: transparent; - display: flex; - } - .footer { - margin-left: -40px; - margin-right: -40px; - max-width: unset; - .row { - padding-left: 20px; - padding-right: 40px; - } - } - @media (max-width: $md-width) { - padding: 0 10px; - + @media (max-width: $bp-md) { &.active { background-color: $bg-overlay-color; overflow: hidden; @@ -440,25 +71,6 @@ h6 { } } -// Override Bootstraps default button (for GDS colors) -.btn-primary { - background-color: $button-primary; -} - -.btn-warning { - background-color: $button-warning; - color: $gds-white; -} - -.btn-close { - padding: 0 4px; -} - -// Override Bootstrap tooltip -.tooltip .tooltip-inner { - font-size: $tooltip-font-size; -} - .nav-wrapper { background-color: $gds-white; display: flex; @@ -482,7 +94,7 @@ h6 { .label { display: block; pointer-events: none; - font-size: 14px; + font-size: 0.875rem; color: $gds-gray-700; margin-left: 30px; flex-shrink: 0; @@ -536,7 +148,7 @@ h6 { transform: rotate(-45deg) translateY(-4px); } } - @media(max-width: $md-width) { + @media(max-width: $bp-lg) { width: 0; .nav-toggle { @@ -553,338 +165,6 @@ h6 { } } -.global-nav { - width: 100%; - height: 100%; - top: 0; - left: 0; - overflow: auto; - visibility: hidden; - .global-nav-cat.active { - a { - color: $gds-indigo-800; - } - } - .global-nav-content { - margin-top: 85px; - margin-bottom: 70px; - } - a { - display: flex; - align-items: center; - text-decoration: none; - padding-top: 7px; - padding-bottom: 7px; - padding-right: 7px; - &.has-collapse.active { - box-shadow: 0 0 0 0 inset; - } - &.active { - background-color: $gds-gray-100; - font-weight: 600; - box-shadow: -4px 0 0 0 inset; - color: $gds-indigo-800; - &:hover { - color: $gds-indigo-800; - } - &.level-1, - &.level-2, - &.level-3, - &.level-4 { - background-color: $gds-gray-200; - } - } - } - .collapse-toggle { - cursor: pointer; - display: flex; - padding-right: 1rem; - align-items: center; - justify-content: center; - &::after { - content: ''; - border: solid $gds-gray-700; - border-width: 0 1px 1px 0; - display: inline-block; - transform: rotate(45deg); - width: 7px; - height: 7px; - } - &.collapsed { - &::after { - transform: rotate(-50deg); - } - } - &.active { - background-color: $gds-gray-200; - box-shadow: -4px 0 0 0 inset; - color: $gds-indigo-800; - &.section-title { - background-color: $gds-gray-100; - } - } - } - - .global-nav-block { - font-weight: 600; - padding-left: 10px; - } - - .global-nav-link, - .nav-link { - text-decoration: none; - &:hover { - color: $link-color-nav-hover; - } - } - - .global-nav-link { - line-height: 1rem; - font-size: 0.875rem; - width: 100%; - } - - .nav-link { - padding: 0; - display: flex; - justify-content: space-between; - } - - .nav-link:hover { - background-color: $link-color-bg-active; - } - - .global-nav-block-top { - font-weight: 600; - margin-bottom: 3px; - margin-top: 3px; - a { - text-decoration: none; - text-shadow: 3px 3px 5px $link-color-bg-active; - } - } - - .level-0 { - color: $global-nav-link-level0; - padding-left: 1.2rem; - &:visited { - color: $global-nav-link-level0; - } - } - - .level-1 { - color: $global-nav-link-level1; - padding-left: 2.333rem; - &:visited { - color: $global-nav-link-level1; - } - } - - .level-2 { - color: $global-nav-link-level2; - padding-left: 3.533rem; - &:visited { - color: $global-nav-link-level2; - } - } - - .level-3 { - color: $global-nav-link-level3; - padding-left: 4.733rem; - &:visited { - color: $global-nav-link-level3; - } - } - - .level-4 { - color: $global-nav-link-level4; - padding-left: 5.933rem; - &:visited { - color: $global-nav-link-level4; - } - } - - .global-nav-badges { - fill: $gds-gray-700; - } - - .last-updated { - color: $color-light-gray; - font-size: 13px; - padding-bottom: 10px; - text-align: right; - } -} - - -.btn-tanuki { - &:hover { - background-color: $color-btn-tanuki; - } -} - -@media (min-width: $md-width) { - .mobile-nav-toggle { - display: none; - } -} - -.gl-breadcrumbs { - border-width: 0; - padding-top: 2rem; - padding-bottom: 1rem; -} - -@media (max-width: $md-width) { - .gl-breadcrumbs { - padding-top: 1rem; - } -} - -.gl-breadcrumb-list { - margin-top: 0.1rem; - background-color: transparent; - padding: 0; - align-items: center; - line-height: 1rem; - margin: 0; -} - -@media (max-width: $xs-width) { - .gl-breadcrumb-list { - flex-wrap: wrap; - } -} - -.gl-breadcrumb-separator { - margin-top: -0.2rem; -} - -.gl-breadcrumb-separator>svg { - margin: auto 0.5rem; - width: 0.5rem; - color: $gds-gray-1000; - fill: currentColor; -} - -.gl-breadcrumb-avatar-tile { - margin-right: 0.25rem; - margin-top: 0.1rem; - margin-bottom: 0.2rem; - border: 1px solid $help-gray-200; - border-radius: 50%; -} - -@media (max-width: $md-width) { - .gl-breadcrumb-avatar-tile { - margin-left: 2rem; - } -} - -.gl-breadcrumb-item { - font-size: 0.75rem; - line-height: 1rem; -} - -.gl-breadcrumb-item>a { - color: $gds-gray-1000; - code { - @include code-color; - } -} - -@media (max-width:575.98px) { - .gl-breadcrumb-item>a { - display: inline-block; - overflow: hidden; - text-overflow: ellipsis; - vertical-align: top; - white-space: nowrap; - max-width: 8rem; - } -} - -.gl-breadcrumb-item:last-child { - color: $gds-gray-950; - font-weight: 600; -} - -// Permalinks on header elements. -.anchor { - display: inline-block; - width: 1em; - height: 1em; - max-height: 25px; - vertical-align: middle; - background: url('<%= @items['/assets/images/icon_anchor.svg'].path %>') center center / contain no-repeat; - &:hover { - text-decoration: none; - } -} - -// Version history ('Introduced in') notes -.introduced-in { - font-size: $introduced-in-font-size; - color: $gds-black; - .introduced-in-content { - margin-top: 8px; - ul { - margin: 0; - padding-left: 26px; - } - } - .collapsing { - transition: none; - } -} - -.text-expander { - background: url('<%= @items['/assets/images/ellipsis_h.svg'].path %>') center center / 12px no-repeat; - vertical-align: middle; - border: 1px solid $introduced-in-border-color; - border-radius: 4px; - margin-left: 8px; - margin-bottom: 2px; - width: 22px; - height: 16px; - &:hover { - background-color: $text-expander-hover-color; - } -} - -// End of version history ('Introduced in') notes -// Articles layout -.article-metadata { - color: $article-metadata; - display: block; - order: -1; - font-style: italic; - margin-bottom: 15px; -} - -// Embedded video -.video-container { - width: 560px; - height: 315px; - position: relative; - padding-top: 0; - margin: 20px 0; - box-shadow: 5px 5px 10px $gds-gray-300; - iframe, - video { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - } -} - -// Embedded video fallback for GitLab's /help -.video-fallback { - display: none; -} - // Override bootstrap's alert color .alert { color: inherit; @@ -970,6 +250,24 @@ h6 { font-size: 0.875rem; } + .navbar-nav { + margin-top: 0; + + .dropdown-menu { + a { + border-bottom: 0; + + &:hover { + border-bottom: 0; + } + } + } + } + + .nav-item { + margin-bottom: 0; + } + .nav-link { color: $gds-indigo-100; } @@ -979,12 +277,23 @@ h6 { z-index: 1; } + .algolia-autocomplete { + @media all and (max-width: $bp-lg) { + width: 100%; + margin: 0 2.5rem 0 0.5rem; + } + } + .docsearch { font-size: 1rem; - height: 32px; - min-width: 320px; - text-indent: 1rem; - padding: 12px 8px; + height: 2rem; + min-width: 20rem; + text-indent: 1.25rem; + padding: 0 1rem; + + @media all and (max-width: $bp-sm) { + min-width: 100%; + } } } @@ -992,7 +301,7 @@ h6 { background-color: $help-indigo-500; } - @media all and (max-width: $md-width) { + @media all and (max-width: $bp-md) { .btn { width: 100%; } @@ -1003,8 +312,14 @@ h6 { .badges-drop { display: inline-block; cursor: pointer; - padding-left: 5px; transition: background-color 0.5s ease-in-out; + /* stylelint-disable declaration-no-important */ + border-bottom: 0 !important; + /* stylelint-enable declaration-no-important */ + + &:hover { + border-bottom: 0; + } .badge-tier, .badge-self-managed, @@ -1013,7 +328,7 @@ h6 { content: ''; display: block; width: 0; - height: 2px; + height: 1px; transition: width 0.3s; opacity: 0.5; } @@ -1047,77 +362,6 @@ h6 { } } -h1, -h2, -h3, -h4 { - .badge-display { - font-size: 11px; - } -} - -h5, -h6 { - .badge-display { - font-size: 10px; - padding: 2px 4px; - } -} - -p, -li { - .badge-display { - font-size: 9px; - padding: 1px; - } -} - -p { - .badges-drop { - margin-left: 3px; - margin-right: 0; - } -} - -h1, -h2, -h3, -h4, -h5, -h6 { - .badges-drop { - float: none; - } -} - -h1 { - @media all and (max-width: $sm-width) { - .badges-drop { - padding-top: 5px; - } - } -} - -li { - .badges-drop { - margin-left: 0; - margin-right: 3px; - } -} - -.badge-display { - text-transform: uppercase; - text-align: center; - display: inline-block; - color: $white; - margin-left: 2px; - border-radius: 2px; - font-size: 1em; - font-weight: 700; - letter-spacing: 0.02em; - line-height: 1.4; -} - .badge-tier { color: $badge-tier; } @@ -1155,16 +399,21 @@ li { } } -.dotcom-false { - .badge-saas { - display: none; - } +.badge-display { + text-transform: uppercase; + text-align: center; + display: inline-block; + margin-left: 2px; + border-radius: 2px; + font-size: 0.75rem; + font-weight: 700; + letter-spacing: 0.02em; + line-height: 1.4; } // // Algolia search override // https://community.algolia.com/docsearch/styling.html -// .algolia-autocomplete { // Scrollable search results box // https://gitlab.com/gitlab-org/gitlab-docs/issues/362 @@ -1173,8 +422,8 @@ li { overflow-x: hidden; } } - // Algolia search override end + //in-page styles .youtube { color: $youtube; @@ -1206,3 +455,68 @@ li { .btn-cta { background-color: $header-free-trial-button-color; } + +h2[id]::before, +h3[id]::before, +h4[id]::before, +h5[id]::before, +h6[id]::before { + display: block; + content: ' '; + margin-top: -4.688rem; + height: 4.688rem; + visibility: hidden; +} + +// Embedded video +.video-container { + width: 35rem; + height: 19.688rem; + position: relative; + padding-top: 0; + margin: 1.25rem 0; + box-shadow: 0.313rem 0.313rem 0.625rem $gds-gray-300; + iframe, + video { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } +} + +// Embedded video fallback for GitLab's /help +.video-fallback { + display: none; +} + +.text-expander { + background: url('/assets/images/ellipsis_h.svg') center center / 12px no-repeat; + vertical-align: middle; + border: 1px solid $gray-100; + border-radius: 4px; + margin-left: 8px; + margin-bottom: 2px; + width: 22px; + height: 1rem; + &:hover { + background-color: $gray-200; + } +} + +// external link and footer social links +[href^='http://'], +[href^='https://'] { + &:not([href*='gitlab.com']):not(.gitlab-social) { + &::after { + content: '\f08e'; + font-family: FontAwesome, sans-serif; + font-size: 1rem; + font-style: normal; + font-weight: normal; + padding-left: 5px; + line-height: 10px; + } + } +} diff --git a/content/assets/stylesheets/toc.scss b/content/assets/stylesheets/toc.scss index 74dd2eb9..669a6584 100644 --- a/content/assets/stylesheets/toc.scss +++ b/content/assets/stylesheets/toc.scss @@ -1,16 +1,16 @@ --- -version: 19 +version: 20 --- @import 'variables'; @import 'utilities'; $base-nav-link-padding: 0.75rem; $sm-nav-link-padding: 0.25rem; -$nav-link-font-size: 14px; +$nav-link-font-size: 0.875rem; // ToC styles .table-of-contents { - padding: 16px 0; + padding: 1rem 1rem 0; margin-top: 35px; li { @@ -22,12 +22,14 @@ $nav-link-font-size: 14px; color: $toc-link-color; border-radius: 0; border-left: 3px solid $gds-indigo-100; + border-bottom: 0; &:hover { color: $link-color-nav-hover; text-decoration: underline; background-color: transparent; box-shadow: none; + border-bottom: 0; } &.active { @@ -46,9 +48,10 @@ $nav-link-font-size: 14px; .markdown-toc { top: 0; - padding-left: 16px; - @media(min-width: $md-width) { + @media(min-width: $bp-lg) { + padding-left: 1rem; + margin-bottom: 1.5rem; overflow-y: scroll; height: 100vh; } @@ -69,14 +72,16 @@ $nav-link-font-size: 14px; } } -@media(max-width: $md-width) { +@media(max-width: $bp-lg) { .doc-nav { margin-left: -20px; margin-top: -55px; } .table-of-contents { - margin-top: 10px; + padding: 0 1rem; + font-size: 0.875rem; + .nav-link { border-left: 0; padding: $sm-nav-link-padding; @@ -107,7 +112,7 @@ $nav-link-font-size: 14px; } // wide enough to show toc but not quick nav -@media(min-width: $md-width) { +@media(min-width: $bp-lg) { .header { top: 0; left: 0; diff --git a/content/frontend/default/components/table_of_contents.vue b/content/frontend/default/components/table_of_contents.vue index 000023a7..78fec2c6 100644 --- a/content/frontend/default/components/table_of_contents.vue +++ b/content/frontend/default/components/table_of_contents.vue @@ -66,7 +66,7 @@ export default {