diff --git a/_layouts/default.html b/_layouts/default.html index 33a9e297..cb381b76 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -1,5 +1,5 @@ - + diff --git a/_sass/@primer/css/alerts/flash.scss b/_sass/@primer/css/alerts/flash.scss new file mode 100644 index 00000000..f953b91f --- /dev/null +++ b/_sass/@primer/css/alerts/flash.scss @@ -0,0 +1 @@ +@import '@primer/view-components/app/components/primer/beta/flash'; diff --git a/_sass/@primer/css/alerts/index.scss b/_sass/@primer/css/alerts/index.scss new file mode 100644 index 00000000..033fb3b1 --- /dev/null +++ b/_sass/@primer/css/alerts/index.scss @@ -0,0 +1,3 @@ +// support files +@import '../support/index.scss'; +@import './flash.scss'; diff --git a/_sass/@primer/css/autocomplete/autocomplete.scss b/_sass/@primer/css/autocomplete/autocomplete.scss new file mode 100644 index 00000000..44ecab95 --- /dev/null +++ b/_sass/@primer/css/autocomplete/autocomplete.scss @@ -0,0 +1 @@ +@import '@primer/view-components/app/components/primer/alpha/auto_complete'; diff --git a/_sass/@primer/css/autocomplete/index.scss b/_sass/@primer/css/autocomplete/index.scss new file mode 100644 index 00000000..5eb68a36 --- /dev/null +++ b/_sass/@primer/css/autocomplete/index.scss @@ -0,0 +1,4 @@ +// support files +@import '../support/index.scss'; +@import './autocomplete.scss'; +@import './suggester.scss'; diff --git a/_sass/@primer/css/autocomplete/suggester.scss b/_sass/@primer/css/autocomplete/suggester.scss new file mode 100644 index 00000000..9e6d5c8a --- /dev/null +++ b/_sass/@primer/css/autocomplete/suggester.scss @@ -0,0 +1,92 @@ +// Needs refactoring +// stylelint-disable selector-max-type, selector-no-qualifying-type + +.suggester { + position: relative; + top: 0; + left: 0; + min-width: 180px; + padding: 0; + margin: 0; + margin-top: var(--base-size-24); + list-style: none; + cursor: pointer; + background: var(--overlay-bgColor, var(--color-canvas-overlay)); + border: $border-width $border-style var(--borderColor-default, var(--color-border-default)); + border-radius: $border-radius; + box-shadow: var(--shadow-resting-medium, var(--color-shadow-medium)); + + li { + display: block; + padding: var(--base-size-4) var(--base-size-8); + font-weight: $font-weight-semibold; + border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted)); + + small { + font-weight: $font-weight-normal; + color: var(--fgColor-muted, var(--color-fg-muted)); + } + + &:last-child { + border-bottom: 0; + border-bottom-right-radius: $border-radius; + border-bottom-left-radius: $border-radius; + } + + &:first-child { + border-top-left-radius: $border-radius; + border-top-right-radius: $border-radius; + } + + &:hover { + color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis)); + text-decoration: none; + background: var(--bgColor-accent-emphasis, var(--color-accent-emphasis)); + + small { + color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis)); + } + + .octicon { + color: inherit !important; + } + } + + &[aria-selected='true'], + &.navigation-focus { + color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis)); + text-decoration: none; + background: var(--bgColor-accent-emphasis, var(--color-accent-emphasis)); + + small { + color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis)); + } + + .octicon { + color: inherit !important; + } + } + } +} + +.suggester-container { + position: absolute; + top: 0; + left: 0; + z-index: 30; +} + +// Responsive + +.page-responsive { + @media (max-width: $width-sm) { + .suggester-container { + right: var(--base-size-8) !important; + left: var(--base-size-8) !important; + } + + .suggester li { + padding: var(--base-size-8) var(--base-size-16); + } + } +} diff --git a/_sass/@primer/css/avatars/avatar-parent-child.scss b/_sass/@primer/css/avatars/avatar-parent-child.scss new file mode 100644 index 00000000..01a5c712 --- /dev/null +++ b/_sass/@primer/css/avatars/avatar-parent-child.scss @@ -0,0 +1,17 @@ +// .avatar-parent-child is when you see a small avatar at the bottom right +// corner of a larger avatar. +// +// No Styleguide version +.avatar-parent-child { + position: relative; +} + +.avatar-child { + position: absolute; + right: -15%; + bottom: -9%; + background-color: var(--bgColor-default, var(--color-canvas-default)); // For transparent backgrounds + // stylelint-disable-next-line primer/borders + border-radius: $border-radius-1; + box-shadow: var(--avatar-shadow, var(--color-avatar-child-shadow)); +} diff --git a/_sass/@primer/css/avatars/avatar-stack.scss b/_sass/@primer/css/avatars/avatar-stack.scss new file mode 100644 index 00000000..7a9b9ec6 --- /dev/null +++ b/_sass/@primer/css/avatars/avatar-stack.scss @@ -0,0 +1 @@ +@import '@primer/view-components/app/components/primer/beta/avatar_stack'; diff --git a/_sass/@primer/css/avatars/avatar.scss b/_sass/@primer/css/avatars/avatar.scss new file mode 100644 index 00000000..78a80820 --- /dev/null +++ b/_sass/@primer/css/avatars/avatar.scss @@ -0,0 +1 @@ +@import '@primer/view-components/app/components/primer/beta/avatar'; diff --git a/_sass/@primer/css/avatars/circle-badge.scss b/_sass/@primer/css/avatars/circle-badge.scss new file mode 100644 index 00000000..63032cfb --- /dev/null +++ b/_sass/@primer/css/avatars/circle-badge.scss @@ -0,0 +1,55 @@ +// Circle badge icon with drop shadow for icons and logos + +.CircleBadge { + display: flex; + align-items: center; + justify-content: center; + background-color: var(--bgColor-default, var(--color-canvas-default)); + border-radius: 50%; + box-shadow: var(--shadow-resting-medium, var(--color-shadow-medium)); +} + +.CircleBadge-icon { + max-width: 60% !important; + height: auto !important; + max-height: 55% !important; +} + +// Small badge +.CircleBadge--small { + width: 56px; + height: 56px; +} + +// Medium badge +.CircleBadge--medium { + width: 96px; + height: 96px; +} + +// Large badge +.CircleBadge--large { + width: 128px; + height: 128px; +} + +// Dashed line that connects badges.. +// Wrap around 2 or more badges to create a horizonal line: + +.DashedConnection { + position: relative; + + &::before { + position: absolute; + top: 50%; + left: 0; + width: 100%; + content: ''; + // stylelint-disable-next-line primer/borders + border-bottom: 2px dashed var(--borderColor-default, var(--color-border-default)); + } + + .CircleBadge { + position: relative; + } +} diff --git a/_sass/@primer/css/avatars/index.scss b/_sass/@primer/css/avatars/index.scss new file mode 100644 index 00000000..2ddedec9 --- /dev/null +++ b/_sass/@primer/css/avatars/index.scss @@ -0,0 +1,7 @@ +@import '../support/index.scss'; + +// Avatars +@import './avatar.scss'; +@import './avatar-parent-child.scss'; +@import './avatar-stack.scss'; +@import './circle-badge.scss'; diff --git a/_sass/@primer/css/base/base.scss b/_sass/@primer/css/base/base.scss new file mode 100644 index 00000000..7fde534c --- /dev/null +++ b/_sass/@primer/css/base/base.scss @@ -0,0 +1,153 @@ +// stylelint-disable selector-max-type, selector-no-qualifying-type, primer/typography +* { + box-sizing: border-box; +} + +input, +select, +textarea, +button { + font-family: inherit; + font-size: inherit; + line-height: inherit; +} + +body { + font-family: $body-font; + font-size: var(--body-font-size, $body-font-size); + line-height: $body-line-height; + color: var(--fgColor-default, var(--color-fg-default)); + background-color: var(--bgColor-default, var(--color-canvas-default)); +} + +a { + color: var(--fgColor-accent, var(--color-accent-fg)); + text-decoration: none; + + &:hover { + text-decoration: underline; + } +} + +b, +strong { + font-weight: $font-weight-bold; +} + +fieldset { + padding: 0; + margin: 0; + border: 0; +} + +label { + font-weight: $font-weight-bold; +} + +// Custom styling for HTML5 validation bubbles (WebKit only) +::placeholder { + color: var(--fgColor-muted, var(--color-fg-subtle)); + opacity: 1; // override opacity in normalize.css +} + +// Horizontal lines +// +// TODO-MDO: Remove `.rule` from everywhere and replace with `
`s +hr, +.rule { + height: 0; + // stylelint-disable-next-line primer/spacing + margin: 15px 0; + overflow: hidden; + background: transparent; + border: 0; + border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted)); + + @include clearfix(); +} + +// +// Remove most spacing between table cells. +// + +table { + border-spacing: 0; + border-collapse: collapse; +} + +td, +th { + padding: 0; +} + +button { + cursor: pointer; + // Remove border radius added by Chrome macOS + border-radius: 0; +} + +// increase the selector specificity for [hidden] +// so that it always overrides utility classes (.d-block, etc.) +[hidden][hidden] { + display: none !important; +} + +details { + summary { + cursor: pointer; + } +} + +// global focus styles + +a, +button, +[role='button'], +input[type='radio'], +input[type='checkbox'] { + // fallback :focus state + &:focus { + @include focusOutline; + + // remove fallback :focus if :focus-visible is supported + &:not(:focus-visible) { + outline: solid 1px transparent; + } + } + + // default focus state + &:focus-visible { + @include focusOutline; + } +} + +a:not([class]), +input[type='radio'], +input[type='checkbox'] { + &:focus, + &:focus-visible { + outline-offset: 0; + } +} + +// for handling focus conditionally +.focus { + @include focusBoxShadowInset; +} + +// Windows High Contrast mode +@media (forced-colors: active) { + *:focus, + *:focus-visible { + outline: solid 1px transparent; + } + + input:not([type='radio'], [type='checkbox']), + textarea, + select { + &:focus, + &:focus-visible { + outline-offset: 2px; + } + } +} diff --git a/_sass/@primer/css/base/index.scss b/_sass/@primer/css/base/index.scss new file mode 100644 index 00000000..553abdb3 --- /dev/null +++ b/_sass/@primer/css/base/index.scss @@ -0,0 +1,7 @@ +@import '../support/index.scss'; +@import './native-colors.scss'; +@import './normalize.scss'; +@import './base.scss'; +@import './kbd.scss'; +@import './typography-base.scss'; +@import './octicons.scss'; diff --git a/_sass/@primer/css/base/kbd.scss b/_sass/@primer/css/base/kbd.scss new file mode 100644 index 00000000..0e435955 --- /dev/null +++ b/_sass/@primer/css/base/kbd.scss @@ -0,0 +1,19 @@ +// Keyboard shortcuts +// stylelint-disable selector-max-type + +kbd { + display: inline-block; + padding: var(--base-size-4); + font: 11px $mono-font; + // stylelint-disable-next-line primer/typography + line-height: 10px; + color: var(--fgColor-default, var(--color-fg-default)); + vertical-align: middle; + background-color: var(--bgColor-muted, var(--color-canvas-subtle)); + // stylelint-disable-next-line primer/borders + border: $border-style $border-width var(--borderColor-neutral-muted, var(--color-neutral-muted)); + border-bottom-color: var(--borderColor-neutral-muted, var(--color-neutral-muted)); + border-radius: $border-radius; + // stylelint-disable-next-line primer/box-shadow + box-shadow: inset 0 -1px 0 var(--borderColor-neutral-muted, var(--color-neutral-muted)); +} diff --git a/_sass/@primer/css/base/native-colors.scss b/_sass/@primer/css/base/native-colors.scss new file mode 100644 index 00000000..a7ff089f --- /dev/null +++ b/_sass/@primer/css/base/native-colors.scss @@ -0,0 +1,24 @@ +// color-scheme +// Enables color modes for native elements + +@include color-mode(light) { color-scheme: light; } + +@include color-mode(dark) { color-scheme: dark; } + +[data-color-mode] { + color: var(--fgColor-default, var(--color-fg-default)); + background-color: var(--bgColor-default, var(--color-canvas-default)); +} + +// Windows High Contrast mode + +// Improves focus state for various components when Windows High Contrast mode is enabled +// stylelint-disable selector-max-type +@media (forced-colors: active) { + body { + --color-accent-emphasis: Highlight; + --color-fg-on-emphasis: LinkText; + --fgColor-onEmphasis: LinkText; + --fgColor-accent: Highlight; + } +} diff --git a/_sass/primer-base/lib/normalize.scss b/_sass/@primer/css/base/normalize.scss similarity index 82% rename from _sass/primer-base/lib/normalize.scss rename to _sass/@primer/css/base/normalize.scss index 56697de8..84eaa338 100644 --- a/_sass/primer-base/lib/normalize.scss +++ b/_sass/@primer/css/base/normalize.scss @@ -7,6 +7,7 @@ */ html { + font-size: 16px; /* this can be removed when all of GitHub uses rem units */ font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ @@ -39,7 +40,8 @@ header, main, /* 2 */ menu, nav, -section { /* 1 */ +section { + /* 1 */ display: block; } @@ -96,16 +98,6 @@ a { background-color: transparent; /* 1 */ } -/** - * Remove the outline on focused links when they are also active or hovered - * in all browsers (opinionated). - */ - -a:active, -a:hover { - outline-width: 0; -} - /* Text-level semantics ========================================================================== */ @@ -161,8 +153,8 @@ h1 { */ mark { - background-color: #ff0; - color: #000; + background-color: var(--bgColor-attention-muted, var(--color-attention-subtle)); + color: var(--fgColor-default, var(--color-fg-default)); } /** @@ -225,7 +217,7 @@ code, kbd, pre, samp { - font-family: monospace, monospace; /* 1 */ + font-family: monospace; /* 1 */ font-size: 1em; /* 2 */ } @@ -234,7 +226,7 @@ samp { */ figure { - margin: 1em 40px; + margin: 1em var(--base-size-40); } /** @@ -269,7 +261,7 @@ textarea { */ optgroup { - font-weight: bold; + font-weight: $font-weight-bold; } /** @@ -278,7 +270,8 @@ optgroup { */ button, -input { /* 1 */ +input { + /* 1 */ overflow: visible; } @@ -288,7 +281,8 @@ input { /* 1 */ */ button, -select { /* 1 */ +select { + /* 1 */ text-transform: none; } @@ -305,37 +299,14 @@ html [type="button"], /* 1 */ -webkit-appearance: button; /* 2 */ } -/** - * Remove the inner border and padding in Firefox. - */ - -button::-moz-focus-inner, -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner { - border-style: none; - padding: 0; -} - -/** - * Restore the focus styles unset by the previous rule. - */ - -button:-moz-focusring, -[type="button"]:-moz-focusring, -[type="reset"]:-moz-focusring, -[type="submit"]:-moz-focusring { - outline: 1px dotted ButtonText; -} - /** * Change the border, margin, and padding in all browsers (opinionated). */ fieldset { - border: 1px solid #c0c0c0; + border: $border-width $border-style #c0c0c0; margin: 0 2px; - padding: 0.35em 0.625em 0.75em; + padding: 0.35em 0.625em $em-spacer-6; } /** @@ -367,8 +338,8 @@ textarea { * 2. Remove the padding in IE 10-. */ -[type="checkbox"], -[type="radio"] { +[type='checkbox'], +[type='radio'] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } @@ -377,27 +348,17 @@ textarea { * Correct the cursor style of increment and decrement buttons in Chrome. */ -[type="number"]::-webkit-inner-spin-button, -[type="number"]::-webkit-outer-spin-button { +[type='number']::-webkit-inner-spin-button, +[type='number']::-webkit-outer-spin-button { height: auto; } -/** - * 1. Correct the odd appearance in Chrome and Safari. - * 2. Correct the outline style in Safari. - */ - -[type="search"] { - -webkit-appearance: textfield; /* 1 */ - outline-offset: -2px; /* 2 */ -} - /** * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. */ -[type="search"]::-webkit-search-cancel-button, -[type="search"]::-webkit-search-decoration { +[type='search']::-webkit-search-cancel-button, +[type='search']::-webkit-search-decoration { -webkit-appearance: none; } diff --git a/_sass/@primer/css/base/octicons.scss b/_sass/@primer/css/base/octicons.scss new file mode 100644 index 00000000..c9a105db --- /dev/null +++ b/_sass/@primer/css/base/octicons.scss @@ -0,0 +1,6 @@ +.octicon { + display: inline-block; + overflow: visible !important; + vertical-align: text-bottom; + fill: currentColor; +} diff --git a/_sass/primer-base/lib/typography-base.scss b/_sass/@primer/css/base/typography-base.scss similarity index 90% rename from _sass/primer-base/lib/typography-base.scss rename to _sass/@primer/css/base/typography-base.scss index 091a558e..85d6eede 100644 --- a/_sass/primer-base/lib/typography-base.scss +++ b/_sass/@primer/css/base/typography-base.scss @@ -23,10 +23,12 @@ h6 { @include h6; } p { margin-top: 0; + // stylelint-disable-next-line primer/spacing margin-bottom: 10px; } small { + // stylelint-disable-next-line primer/typography font-size: 90%; } @@ -60,11 +62,12 @@ dd { margin-left: 0; } -// Code +// Monospaced // -------------------------------------------------- tt, -code { +code, +samp { font-family: $mono-font; font-size: $font-size-small; } diff --git a/_sass/@primer/css/blankslate/blankslate.scss b/_sass/@primer/css/blankslate/blankslate.scss new file mode 100644 index 00000000..a573a11d --- /dev/null +++ b/_sass/@primer/css/blankslate/blankslate.scss @@ -0,0 +1 @@ +@import '@primer/view-components/app/components/primer/beta/blankslate'; diff --git a/_sass/@primer/css/blankslate/index.scss b/_sass/@primer/css/blankslate/index.scss new file mode 100644 index 00000000..80af2579 --- /dev/null +++ b/_sass/@primer/css/blankslate/index.scss @@ -0,0 +1,2 @@ +@import '../support/index.scss'; +@import './blankslate.scss'; diff --git a/_sass/@primer/css/box/box-overlay.scss b/_sass/@primer/css/box/box-overlay.scss new file mode 100644 index 00000000..5fd710c8 --- /dev/null +++ b/_sass/@primer/css/box/box-overlay.scss @@ -0,0 +1,42 @@ +.Box--overlay { + // stylelint-disable-next-line primer/responsive-widths + width: 448px; + margin-right: auto; + margin-left: auto; + background-color: var(--bgColor-default, var(--color-canvas-default)); + background-clip: padding-box; + border-color: var(--borderColor-default, var(--color-border-default)); + // stylelint-disable-next-line primer/box-shadow + box-shadow: 0 0 18px rgba(0, 0, 0, 0.4); + + .Box-header { + margin: 0; + border-width: 0; + border-bottom-width: $border-width; + border-top-left-radius: $border-radius; + border-top-right-radius: $border-radius; + } +} + +.Box-overlay--narrow { + width: 320px; +} + +.Box-overlay--wide { + // stylelint-disable-next-line primer/responsive-widths + width: 640px; +} + +.Box-body { + &.scrollable-overlay { + max-height: 400px; + overflow-y: scroll; + } + + .help { + padding-top: var(--base-size-8); + margin: 0; + color: var(--fgColor-muted, var(--color-fg-muted)); + text-align: center; + } +} diff --git a/_sass/@primer/css/box/box.scss b/_sass/@primer/css/box/box.scss new file mode 100644 index 00000000..b60923b6 --- /dev/null +++ b/_sass/@primer/css/box/box.scss @@ -0,0 +1 @@ +@import '@primer/view-components/app/components/primer/beta/border_box'; diff --git a/_sass/@primer/css/box/index.scss b/_sass/@primer/css/box/index.scss new file mode 100644 index 00000000..5b391ad4 --- /dev/null +++ b/_sass/@primer/css/box/index.scss @@ -0,0 +1,3 @@ +@import '../support/index.scss'; +@import './box.scss'; +@import './box-overlay.scss'; diff --git a/_sass/@primer/css/branch-name/branch-name.scss b/_sass/@primer/css/branch-name/branch-name.scss new file mode 100644 index 00000000..c18c746e --- /dev/null +++ b/_sass/@primer/css/branch-name/branch-name.scss @@ -0,0 +1,31 @@ +// stylelint-disable selector-max-type, selector-no-qualifying-type + +// A nice way to display branch names inside the UI. Can be a link or not. + +.branch-name { + display: inline-block; + // stylelint-disable-next-line primer/spacing + padding: 2px 6px; + font: 12px $mono-font; + color: var(--fgColor-muted, var(--color-fg-muted)); + word-break: break-all; + background-color: var(--bgColor-accent-muted, var(--color-accent-subtle)); + border-radius: $border-radius; + + .octicon { + // stylelint-disable-next-line primer/spacing + margin: 1px -2px 0 0; + color: var(--fgColor-muted, var(--color-fg-muted)); + } +} + +// When a branch name is a link + +a.branch-name { + color: var(--fgColor-accent, var(--color-accent-fg)); + background-color: var(--bgColor-accent-muted, var(--color-accent-subtle)); + + .octicon { + color: var(--fgColor-accent, var(--color-accent-fg)); + } +} diff --git a/_sass/@primer/css/branch-name/index.scss b/_sass/@primer/css/branch-name/index.scss new file mode 100644 index 00000000..536a6984 --- /dev/null +++ b/_sass/@primer/css/branch-name/index.scss @@ -0,0 +1,3 @@ +// support files +@import '../support/index.scss'; +@import './branch-name.scss'; diff --git a/_sass/@primer/css/breadcrumb/breadcrumb.scss b/_sass/@primer/css/breadcrumb/breadcrumb.scss new file mode 100644 index 00000000..f3151d70 --- /dev/null +++ b/_sass/@primer/css/breadcrumb/breadcrumb.scss @@ -0,0 +1 @@ +@import '@primer/view-components/app/components/primer/beta/breadcrumbs'; diff --git a/_sass/@primer/css/breadcrumb/index.scss b/_sass/@primer/css/breadcrumb/index.scss new file mode 100644 index 00000000..bad6ce5e --- /dev/null +++ b/_sass/@primer/css/breadcrumb/index.scss @@ -0,0 +1,3 @@ +// support files +@import '../support/index.scss'; +@import './breadcrumb.scss'; diff --git a/_sass/@primer/css/buttons/button-group.scss b/_sass/@primer/css/buttons/button-group.scss new file mode 100644 index 00000000..1f0240f7 --- /dev/null +++ b/_sass/@primer/css/buttons/button-group.scss @@ -0,0 +1,92 @@ +// Button group +// +// A button group is a series of buttons laid out next to each other, all part +// of one visual button, but separated by rules to be separate. + +.BtnGroup { + display: inline-block; + vertical-align: middle; + + @include clearfix(); + + // Proper spacing for multiple button groups (a la, gollum editor) + + .BtnGroup, + + .btn { + margin-left: var(--base-size-4); + } +} + +.BtnGroup-item { + position: relative; + float: left; + border-right-width: 0; + border-radius: 0; + + &:first-child { + border-top-left-radius: $border-radius; + border-bottom-left-radius: $border-radius; + } + + &:last-child { + border-right-width: $border-width; + border-top-right-radius: $border-radius; + border-bottom-right-radius: $border-radius; + } + + &.selected, + &[aria-selected='true'], + &:focus, + &:active, + &:hover { + border-right-width: $border-width; + + + .BtnGroup-item, + + .BtnGroup-parent .BtnGroup-item { + border-left-width: 0; + } + } +} + +.BtnGroup-parent { + float: left; + + &:first-child .BtnGroup-item { + border-top-left-radius: $border-radius; + border-bottom-left-radius: $border-radius; + } + + &:last-child .BtnGroup-item { + border-right-width: $border-width; + border-top-right-radius: $border-radius; + border-bottom-right-radius: $border-radius; + } + + .BtnGroup-item { + border-right-width: 0; + border-radius: 0; + } + + &.selected, + &[aria-selected='true'], + &:focus, + &:active, + &:hover { + .BtnGroup-item { + border-right-width: $border-width; + } + + + .BtnGroup-item, + + .BtnGroup-parent .BtnGroup-item { + border-left-width: 0; + } + } +} + +// ensure that the focus ring sits above the adjacent buttons +.BtnGroup-item, +.BtnGroup-parent { + &:focus, + &:active { + z-index: 1; + } +} diff --git a/_sass/@primer/css/buttons/button.scss b/_sass/@primer/css/buttons/button.scss new file mode 100644 index 00000000..bf3995ad --- /dev/null +++ b/_sass/@primer/css/buttons/button.scss @@ -0,0 +1,340 @@ +// stylelint-disable selector-max-type, no-duplicate-selectors + +// Base button styles +.btn { + position: relative; + display: inline-block; + // stylelint-disable-next-line primer/spacing + padding: 5px var(--base-size-16); + font-size: $body-font-size; + font-weight: $font-weight-semibold; + // stylelint-disable-next-line primer/typography + line-height: 20px; // Specifically not inherit our `` default + white-space: nowrap; + vertical-align: middle; + cursor: pointer; + user-select: none; + border: $border-width $border-style; + border-radius: $border-radius; + appearance: none; // Corrects inability to style clickable `input` types in iOS. + + &:hover { + text-decoration: none; + } + + &:disabled, + &.disabled, + &[aria-disabled='true'] { + cursor: default; + } + + i { + font-style: normal; + font-weight: $font-weight-semibold; + opacity: 0.75; + } + + .octicon { + margin-right: var(--base-size-4); + color: var(--fgColor-muted, var(--color-fg-muted)); + vertical-align: text-bottom; + + &:only-child { + margin-right: 0; + } + } + + .Counter { + // stylelint-disable-next-line primer/spacing + margin-left: 2px; + color: inherit; + text-shadow: none; + vertical-align: top; + background-color: var(--buttonCounter-default-bgColor-rest, var(--color-btn-counter-bg)); + } + + .dropdown-caret { + margin-left: var(--base-size-4); + opacity: 0.8; + } +} + +// Default button + +.btn { + color: var(--button-default-fgColor-rest, var(--color-btn-text)); + background-color: var(--button-default-bgColor-rest, var(--color-btn-bg)); + border-color: var(--button-default-borderColor-rest, var(--color-btn-border)); + box-shadow: var(--button-default-shadow-resting, var(--color-btn-shadow)), var(--button-default-shadow-inset, var(--color-btn-inset-shadow)); + transition: 80ms cubic-bezier(0.33, 1, 0.68, 1); + transition-property: color, background-color, box-shadow, border-color; + + &:hover, + &.hover, + [open] > & { + background-color: var(--button-default-bgColor-hover, var(--color-btn-hover-bg)); + border-color: var(--button-default-borderColor-hover, var(--color-btn-hover-border)); + transition-duration: 0.1s; + } + + &:active { + background-color: var(--button-default-bgColor-active, var(--color-btn-active-bg)); + border-color: var(--button-default-borderColor-active, var(--color-btn-active-border)); + transition: none; + } + + &.selected, + &[aria-selected='true'] { + background-color: var(--button-default-bgColor-selected, var(--color-btn-selected-bg)); + box-shadow: var(--shadow-inset, var(--color-primer-shadow-inset)); + } + + &:disabled, + &.disabled, + &[aria-disabled='true'] { + color: var(--fgColor-disabled, var(--color-primer-fg-disabled)); + background-color: var(--button-default-bgColor-disabled, var(--color-btn-bg)); + border-color: var(--button-default-borderColor-disabled, var(--color-btn-border)); + + .octicon { + color: var(--fgColor-disabled, var(--color-primer-fg-disabled)); + } + } +} + +// Primary button + +.btn-primary { + color: var(--button-primary-fgColor-rest, var(--color-btn-primary-text)); + background-color: var(--button-primary-bgColor-rest, var(--color-btn-primary-bg)); + border-color: var(--button-primary-borderColor-rest, var(--color-btn-primary-border)); + box-shadow: var(--shadow-resting-small, var(--color-btn-primary-shadow)), var(--shadow-highlight, var(--color-btn-primary-inset-shadow)); + + &:hover, + &.hover, + [open] > & { + background-color: var(--button-primary-bgColor-hover, var(--color-btn-primary-hover-bg)); + border-color: var(--button-primary-borderColor-hover, var(--color-btn-primary-hover-border)); + } + + // fallback :focus state + &:focus { + @include focusOutlineOnEmphasis; + + // remove fallback :focus if :focus-visible is supported + &:not(:focus-visible) { + outline: solid 1px transparent; + box-shadow: none; + } + } + + // default focus state + &:focus-visible { + @include focusOutlineOnEmphasis; + } + + &:active, + &.selected, + &[aria-selected='true'] { + background-color: var(--button-primary-bgColor-active, var(--color-btn-primary-selected-bg)); + box-shadow: var(--button-primary-shadow-selected, var(--color-btn-primary-selected-shadow)); + } + + &:disabled, + &.disabled, + &[aria-disabled='true'] { + color: var(--button-primary-fgColor-disabled, var(--color-btn-primary-disabled-text)); + background-color: var(--button-primary-bgColor-disabled, var(--color-btn-primary-disabled-bg)); + border-color: var(--button-primary-borderColor-disabled, var(--color-btn-primary-disabled-border)); + + .octicon { + color: var(--button-primary-fgColor-disabled, var(--color-btn-primary-disabled-text)); + } + } + + .Counter { + color: inherit; + background-color: var(--buttonCounter-primary-bgColor-rest, var(--color-btn-primary-counter-bg)); + } + + .octicon { + color: var(--button-primary-iconColor-rest, var(--color-btn-primary-icon)); + } +} + +// ensure links styled as button primary gets proper focus style +// stylelint-disable-next-line selector-no-qualifying-type +a.btn-primary { + // fallback :focus state + &:focus { + @include focusOutlineOnEmphasis; + + // remove fallback :focus if :focus-visible is supported + &:not(:focus-visible) { + outline: solid 1px transparent; + box-shadow: none; + } + } + + // default focus state + &:focus-visible { + @include focusOutlineOnEmphasis; + } +} + +// Outline button + +.btn-outline { + color: var(--button-outline-fgColor-rest, var(--color-btn-outline-text)); + + &:hover, + [open] > & { + color: var(--button-outline-fgColor-hover, var(--color-btn-outline-hover-text)); + background-color: var(--button-outline-bgColor-hover, var(--color-btn-outline-hover-bg)); + border-color: var(--button-outline-borderColor-hover, var(--color-btn-outline-hover-border)); + box-shadow: var(--shadow-resting-small, var(--color-btn-outline-hover-shadow)), var(--shadow-highlight, var(--color-btn-outline-hover-inset-shadow)); + + .Counter { + background-color: var(--buttonCounter-outline-bgColor-hover, var(--color-btn-outline-hover-counter-bg)); + } + + .octicon { + color: inherit; + } + } + + &:active, + &.selected, + &[aria-selected='true'] { + color: var(--button-outline-fgColor-active, var(--color-btn-outline-selected-text)); + background-color: var(--button-outline-bgColor-active, var(--color-btn-outline-selected-bg)); + border-color: var(--button-outline-borderColor-active, var(--color-btn-outline-selected-border)); + box-shadow: var(--button-outline-shadow-selected, var(--color-btn-outline-selected-shadow)); + + // fallback :focus state + &:focus { + @include focusOutlineOnEmphasis; + + // remove fallback :focus if :focus-visible is supported + &:not(:focus-visible) { + outline: solid 1px transparent; + box-shadow: none; + } + } + + // default focus state + &:focus-visible { + @include focusOutlineOnEmphasis; + } + } + + &:disabled, + &.disabled, + &[aria-disabled='true'] { + color: var(--button-outline-fgColor-disabled, var(--color-btn-outline-disabled-text)); + background-color: var(--button-outline-bgColor-disabled, var(--color-btn-outline-disabled-bg)); + border-color: var(--button-default-borderColor-rest, var(--color-btn-border)); + box-shadow: none; + + .Counter { + background-color: var(--buttonCounter-outline-bgColor-disabled, var(--color-btn-outline-disabled-counter-bg)); + } + } + + .Counter { + color: inherit; + background-color: var(--buttonCounter-outline-bgColor-rest, var(--color-btn-outline-counter-bg)); + } +} + +// Danger button + +.btn-danger { + color: var(--button-danger-fgColor-rest, var(--color-btn-danger-text)); + + .octicon { + color: var(--button-danger-iconColor-rest, var(--color-btn-danger-icon)); + } + + &:hover, + [open] > & { + color: var(--button-danger-fgColor-hover, var(--color-btn-danger-hover-text)); + background-color: var(--button-danger-bgColor-hover, var(--color-btn-danger-hover-bg)); + border-color: var(--button-danger-borderColor-hover, var(--color-btn-danger-hover-border)); + box-shadow: var(--shadow-resting-small, var(--color-btn-danger-hover-shadow)), var(--shadow-highlight, var(--color-btn-danger-hover-inset-shadow)); + + .Counter { + background-color: var(--buttonCounter-danger-bgColor-hover, var(--color-btn-danger-hover-counter-bg)); + } + + .octicon { + color: var(--button-danger-iconColor-hover, var(--color-btn-danger-hover-icon)); + } + } + + &:active, + &.selected, + &[aria-selected='true'] { + color: var(--button-danger-fgColor-active, var(--color-btn-danger-selected-text)); + background-color: var(--button-danger-bgColor-active, var(--color-btn-danger-selected-bg)); + border-color: var(--button-danger-borderColor-active, var(--color-btn-danger-selected-border)); + box-shadow: var(--button-danger-shadow-selected, var(--color-btn-danger-selected-shadow)); + } + + &:disabled, + &.disabled, + &[aria-disabled='true'] { + color: var(--button-danger-fgColor-disabled, var(--color-btn-danger-disabled-text)); + background-color: var(--button-danger-bgColor-disabled, var(--color-btn-danger-disabled-bg)); + border-color: var(--button-default-borderColor-rest, var(--color-btn-border)); + box-shadow: none; + + .Counter { + background-color: var(--buttonCounter-danger-bgColor-disabled, var(--color-btn-danger-disabled-counter-bg)); + } + + .octicon { + color: var(--button-danger-fgColor-disabled, var(--color-btn-danger-disabled-text)); + } + } + + .Counter { + color: inherit; + background-color: var(--buttonCounter-danger-bgColor-rest, var(--color-btn-danger-counter-bg)); + } +} + +// Sizes +// +// Tweak `line-height` to make them smaller. +.btn-sm { + // stylelint-disable-next-line primer/spacing + padding: 3px 12px; + font-size: $font-size-small; + // stylelint-disable-next-line primer/typography + line-height: 20px; + + .octicon { + vertical-align: text-top; + } +} + +// Large button adds more padding around text. Use font-size utils to increase font-size.. e.g,

+.btn-large { + // stylelint-disable-next-line primer/spacing + padding: $em-spacer-6 1.5em; + font-size: inherit; + line-height: $lh-default; + + // stylelint-disable-next-line primer/borders + border-radius: 0.5em; +} + +// Full-width button +// +// These buttons expand to the full width of their parent container +.btn-block { + display: block; + width: 100%; + text-align: center; +} diff --git a/_sass/@primer/css/buttons/index.scss b/_sass/@primer/css/buttons/index.scss new file mode 100644 index 00000000..0b8c5aa7 --- /dev/null +++ b/_sass/@primer/css/buttons/index.scss @@ -0,0 +1,4 @@ +@import '../support/index.scss'; +@import './button.scss'; +@import './button-group.scss'; +@import './misc.scss'; diff --git a/_sass/@primer/css/buttons/misc.scss b/_sass/@primer/css/buttons/misc.scss new file mode 100644 index 00000000..904c457b --- /dev/null +++ b/_sass/@primer/css/buttons/misc.scss @@ -0,0 +1,232 @@ +// stylelint-disable selector-max-type + +// Link-like buttons +// +// This class is for styling