diff --git a/package.json b/package.json index 4ce022eb452..4299b8a90d5 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ "build-docs:with-theme": "cd ./www && \"$npm_execpath\" install && \"$npm_execpath\" run build:with-theme", "commit": "commit", "debug-test": "node --inspect-brk node_modules/.bin/jest --runInBand --coverage", - "stylelint": "stylelint \"src/**/*.scss\" \"scss/**/*.scss\" \"www/src/**/*.scss\" --config .stylelintrc.json", + "stylelint": "stylelint \"src/**/*.scss\" \"scss/**/*.scss\" \"www/src/**/*.scss\" --config .stylelintrc.json --fix", "lint": "npm run stylelint && eslint --ext .js --ext .jsx --ext .ts --ext .tsx . && npm run generate-component-lint && npm run lint-docs", "lint-docs": "cd ./www && \"$npm_execpath\" run lint", "prepublishOnly": "npm run build", diff --git a/scss/core/css/variables.css b/scss/core/css/variables.css index 745181fcf71..cf4ee826592 100644 --- a/scss/core/css/variables.css +++ b/scss/core/css/variables.css @@ -98,7 +98,7 @@ --pgn-color-btn-focus-bg-inverse-outline-info: inherit; --pgn-color-btn-focus-bg-outline-info: inherit; --pgn-color-btn-focus-bg-inverse-outline-dark: inherit; - --pgn-color-btn-focus-bg-outline-dark: inherit; + --pgn-color-btn-focus-bg-outline-dark: unset; --pgn-color-btn-focus-bg-inverse-outline-danger: inherit; --pgn-color-btn-focus-bg-outline-danger: inherit; --pgn-color-btn-focus-bg-inverse-outline-brand: inherit; diff --git a/src/Annotation/Annotation.scss b/src/Annotation/Annotation.scss index a0a94485538..0f884cee4d4 100644 --- a/src/Annotation/Annotation.scss +++ b/src/Annotation/Annotation.scss @@ -16,7 +16,10 @@ background-color: var(--pgn-color-annotation-bg-success); color: var(--pgn-color-annotation-text-success); margin-bottom: calc(var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin)); - margin-top: calc(#{var(--pgn-size-annotation-arrow-border-width)} + #{var(--pgn-spacing-annotation-arrow-side-margin)}); + margin-top: + calc( + #{var(--pgn-size-annotation-arrow-border-width)} + #{var(--pgn-spacing-annotation-arrow-side-margin)} + ); &::after { content: ""; @@ -56,7 +59,10 @@ .pgn__annotation-success-right { background-color: var(--pgn-color-annotation-bg-success); color: var(--pgn-color-annotation-text-success); - margin-right: calc(#{var(--pgn-size-annotation-arrow-border-width)} + #{var(--pgn-spacing-annotation-arrow-side-margin)}); + margin-right: + calc( + #{var(--pgn-size-annotation-arrow-border-width)} + #{var(--pgn-spacing-annotation-arrow-side-margin)} + ); &::after { content: ""; @@ -66,33 +72,39 @@ border: solid transparent; border-left-color: var(--pgn-color-annotation-bg-success); border-width: - var(--pgn-size-annotation-arrow-border-width) 0 var(--pgn-size-annotation-arrow-border-width) - var(--pgn-size-annotation-arrow-border-width); + var(--pgn-size-annotation-arrow-border-width) 0 var(--pgn-size-annotation-arrow-border-width) + var(--pgn-size-annotation-arrow-border-width); top: 0; bottom: 0; right: calc(#{var(--pgn-size-annotation-arrow-border-width)} * -1); margin: auto 0; [dir="rtl"] & { - right: initial; - left: calc(#{var(--pgn-size-annotation-arrow-border-width)} * -1); - border-width: - var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width) - var(--pgn-size-annotation-arrow-border-width) 0; - border-right-color: var(--pgn-color-annotation-bg-success); + right: initial; + left: calc(#{var(--pgn-size-annotation-arrow-border-width)} * -1); + border-width: + var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width) + var(--pgn-size-annotation-arrow-border-width) 0; + border-right-color: var(--pgn-color-annotation-bg-success); } } [dir="rtl"] & { margin-right: 0; - margin-left: calc(#{var(--pgn-size-annotation-arrow-border-width)} + #{var(--pgn-spacing-annotation-arrow-side-margin)}); + margin-left: + calc( + #{var(--pgn-size-annotation-arrow-border-width)} + #{var(--pgn-spacing-annotation-arrow-side-margin)} + ); } } .pgn__annotation-success-left { background-color: var(--pgn-color-annotation-bg-success); color: var(--pgn-color-annotation-text-success); - margin-left: calc(#{var(--pgn-size-annotation-arrow-border-width)} + #{var(--pgn-spacing-annotation-arrow-side-margin)}); + margin-left: + calc( + #{var(--pgn-size-annotation-arrow-border-width)} + #{var(--pgn-spacing-annotation-arrow-side-margin)} + ); &::after { content: ""; @@ -102,26 +114,29 @@ border: solid transparent; border-right-color: var(--pgn-color-annotation-bg-success); border-width: - var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width) - var(--pgn-size-annotation-arrow-border-width) 0; + var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width) + var(--pgn-size-annotation-arrow-border-width) 0; top: 0; bottom: 0; left: calc(#{var(--pgn-size-annotation-arrow-border-width)} * -1); margin: auto 0; [dir="rtl"] & { - left: initial; - right: calc(#{var(--pgn-size-annotation-arrow-border-width)} * -1); - border-width: - var(--pgn-size-annotation-arrow-border-width) 0 var(--pgn-size-annotation-arrow-border-width) - var(--pgn-size-annotation-arrow-border-width); - border-left-color: var(--pgn-color-annotation-bg-success); + left: initial; + right: calc(#{var(--pgn-size-annotation-arrow-border-width)} * -1); + border-width: + var(--pgn-size-annotation-arrow-border-width) 0 var(--pgn-size-annotation-arrow-border-width) + var(--pgn-size-annotation-arrow-border-width); + border-left-color: var(--pgn-color-annotation-bg-success); } } [dir="rtl"] & { margin-left: 0; - margin-right: calc(#{var(--pgn-size-annotation-arrow-border-width)} + #{var(--pgn-spacing-annotation-arrow-side-margin)}); + margin-right: + calc( + #{var(--pgn-size-annotation-arrow-border-width)} + #{var(--pgn-spacing-annotation-arrow-side-margin)} + ); } } @@ -129,7 +144,10 @@ .pgn__annotation-warning-top { background-color: var(--pgn-color-annotation-bg-warning); color: var(--pgn-color-annotation-text-warning); - margin-top: calc(var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin)); + margin-top: + calc( + var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin) + ); &::after { content: ""; @@ -149,7 +167,10 @@ .pgn__annotation-warning-bottom { background-color: var(--pgn-color-annotation-bg-warning); color: var(--pgn-color-annotation-text-warning); - margin-bottom: calc(var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin)); + margin-bottom: + calc( + var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin) + ); &::after { content: ""; @@ -169,7 +190,10 @@ .pgn__annotation-warning-right { background-color: var(--pgn-color-annotation-bg-warning); color: var(--pgn-color-annotation-text-warning); - margin-right: calc(var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin)); + margin-right: + calc( + var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin) + ); &::after { content: ""; @@ -179,8 +203,8 @@ border: solid transparent; border-left-color: var(--pgn-color-annotation-bg-warning); border-width: - var(--pgn-size-annotation-arrow-border-width) 0 var(--pgn-size-annotation-arrow-border-width) - var(--pgn-size-annotation-arrow-border-width); + var(--pgn-size-annotation-arrow-border-width) 0 var(--pgn-size-annotation-arrow-border-width) + var(--pgn-size-annotation-arrow-border-width); top: 0; bottom: 0; right: calc(#{var(--pgn-size-annotation-arrow-border-width)} * -1); @@ -190,22 +214,28 @@ right: initial; left: calc(#{var(--pgn-size-annotation-arrow-border-width)} * -1); border-width: - var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width) - var(--pgn-size-annotation-arrow-border-width) 0; + var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width) + var(--pgn-size-annotation-arrow-border-width) 0; border-right-color: var(--pgn-color-annotation-bg-warning); } } [dir="rtl"] & { margin-right: 0; - margin-left: calc(#{var(--pgn-size-annotation-arrow-border-width)} + #{var(--pgn-spacing-annotation-arrow-side-margin)}); + margin-left: + calc( + #{var(--pgn-size-annotation-arrow-border-width)} + #{var(--pgn-spacing-annotation-arrow-side-margin)} + ); } } .pgn__annotation-warning-left { background-color: var(--pgn-color-annotation-bg-warning); color: var(--pgn-color-annotation-text-warning); - margin-left: calc(var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin)); + margin-left: + calc( + var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin) + ); &::after { content: ""; @@ -215,8 +245,8 @@ border: solid transparent; border-right-color: var(--pgn-color-annotation-bg-warning); border-width: - var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width) - var(--pgn-size-annotation-arrow-border-width) 0; + var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width) + var(--pgn-size-annotation-arrow-border-width) 0; top: 0; bottom: 0; left: calc(#{var(--pgn-size-annotation-arrow-border-width)} * -1); @@ -226,15 +256,18 @@ left: initial; right: calc(#{var(--pgn-size-annotation-arrow-border-width)} * -1); border-width: - var(--pgn-size-annotation-arrow-border-width) 0 var(--pgn-size-annotation-arrow-border-width) - var(--pgn-size-annotation-arrow-border-width); + var(--pgn-size-annotation-arrow-border-width) 0 var(--pgn-size-annotation-arrow-border-width) + var(--pgn-size-annotation-arrow-border-width); border-left-color: var(--pgn-color-annotation-bg-warning); } } [dir="rtl"] & { margin-left: 0; - margin-right: calc(#{var(--pgn-size-annotation-arrow-border-width)} + #{var(--pgn-spacing-annotation-arrow-side-margin)}); + margin-right: + calc( + #{var(--pgn-size-annotation-arrow-border-width)} + #{var(--pgn-spacing-annotation-arrow-side-margin)} + ); } } @@ -242,7 +275,10 @@ .pgn__annotation-error-top { background-color: var(--pgn-color-annotation-bg-error); color: var(--pgn-color-annotation-text-error); - margin-top: calc(var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin)); + margin-top: + calc( + var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin) + ); &::after { content: ""; @@ -262,7 +298,10 @@ .pgn__annotation-error-bottom { background-color: var(--pgn-color-annotation-bg-error); color: var(--pgn-color-annotation-text-error); - margin-bottom: calc(var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin)); + margin-bottom: + calc( + var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin) + ); &::after { content: ""; @@ -282,7 +321,10 @@ .pgn__annotation-error-right { background-color: var(--pgn-color-annotation-bg-error); color: var(--pgn-color-annotation-text-error); - margin-right: calc(var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin)); + margin-right: + calc( + var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin) + ); &::after { content: ""; @@ -292,8 +334,8 @@ border: solid transparent; border-left-color: var(--pgn-color-annotation-bg-error); border-width: - var(--pgn-size-annotation-arrow-border-width) 0 var(--pgn-size-annotation-arrow-border-width) - var(--pgn-size-annotation-arrow-border-width); + var(--pgn-size-annotation-arrow-border-width) 0 var(--pgn-size-annotation-arrow-border-width) + var(--pgn-size-annotation-arrow-border-width); top: 0; bottom: 0; right: calc(#{var(--pgn-size-annotation-arrow-border-width)} * -1); @@ -303,15 +345,18 @@ right: initial; left: calc(#{var(--pgn-size-annotation-arrow-border-width)} * -1); border-width: - var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width) - var(--pgn-size-annotation-arrow-border-width) 0; + var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width) + var(--pgn-size-annotation-arrow-border-width) 0; border-right-color: var(--pgn-color-annotation-bg-error); } } [dir="rtl"] & { margin-right: 0; - margin-left: calc(#{var(--pgn-size-annotation-arrow-border-width)} + #{var(--pgn-spacing-annotation-arrow-side-margin)}); + margin-left: + calc( + #{var(--pgn-size-annotation-arrow-border-width)} + #{var(--pgn-spacing-annotation-arrow-side-margin)} + ); } } @@ -328,8 +373,8 @@ border: solid transparent; border-right-color: var(--pgn-color-annotation-bg-error); border-width: - var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width) - var(--pgn-size-annotation-arrow-border-width) 0; + var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width) + var(--pgn-size-annotation-arrow-border-width) 0; top: 0; bottom: 0; left: calc(#{var(--pgn-size-annotation-arrow-border-width)} * -1); @@ -339,15 +384,18 @@ left: initial; right: calc(#{var(--pgn-size-annotation-arrow-border-width)} * -1); border-width: - var(--pgn-size-annotation-arrow-border-width) 0 var(--pgn-size-annotation-arrow-border-width) - var(--pgn-size-annotation-arrow-border-width); + var(--pgn-size-annotation-arrow-border-width) 0 var(--pgn-size-annotation-arrow-border-width) + var(--pgn-size-annotation-arrow-border-width); border-left-color: var(--pgn-color-annotation-bg-error); } } [dir="rtl"] & { margin-left: 0; - margin-right: calc(#{var(--pgn-size-annotation-arrow-border-width)} + #{var(--pgn-spacing-annotation-arrow-side-margin)}); + margin-right: + calc( + #{var(--pgn-size-annotation-arrow-border-width)} + #{var(--pgn-spacing-annotation-arrow-side-margin)} + ); } } @@ -405,8 +453,8 @@ border: solid transparent; border-left-color: var(--pgn-color-annotation-bg-dark); border-width: - var(--pgn-size-annotation-arrow-border-width) 0 var(--pgn-size-annotation-arrow-border-width) - var(--pgn-size-annotation-arrow-border-width); + var(--pgn-size-annotation-arrow-border-width) 0 var(--pgn-size-annotation-arrow-border-width) + var(--pgn-size-annotation-arrow-border-width); top: 0; bottom: 0; right: calc(#{var(--pgn-size-annotation-arrow-border-width)} * -1); @@ -416,15 +464,18 @@ right: initial; left: calc(#{var(--pgn-size-annotation-arrow-border-width)} * -1); border-width: - var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width) - var(--pgn-size-annotation-arrow-border-width) 0; + var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width) + var(--pgn-size-annotation-arrow-border-width) 0; border-right-color: var(--pgn-color-annotation-bg-dark); } } [dir="rtl"] & { margin-right: 0; - margin-left: calc(#{var(--pgn-size-annotation-arrow-border-width)} + #{var(--pgn-spacing-annotation-arrow-side-margin)}); + margin-left: + calc( + #{var(--pgn-size-annotation-arrow-border-width)} + #{var(--pgn-spacing-annotation-arrow-side-margin)} + ); } } @@ -441,8 +492,8 @@ border: solid transparent; border-right-color: var(--pgn-color-annotation-bg-dark); border-width: - var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width) - var(--pgn-size-annotation-arrow-border-width) 0; + var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width) + var(--pgn-size-annotation-arrow-border-width) 0; top: 0; bottom: 0; left: calc(#{var(--pgn-size-annotation-arrow-border-width)} * -1); @@ -452,15 +503,18 @@ left: initial; right: calc(#{var(--pgn-size-annotation-arrow-border-width)} * -1); border-width: - var(--pgn-size-annotation-arrow-border-width) 0 var(--pgn-size-annotation-arrow-border-width) - var(--pgn-size-annotation-arrow-border-width); + var(--pgn-size-annotation-arrow-border-width) 0 var(--pgn-size-annotation-arrow-border-width) + var(--pgn-size-annotation-arrow-border-width); border-left-color: var(--pgn-color-annotation-bg-dark); } } [dir="rtl"] & { margin-left: 0; - margin-right: calc(#{var(--pgn-size-annotation-arrow-border-width)} + #{var(--pgn-spacing-annotation-arrow-side-margin)}); + margin-right: + calc( + #{var(--pgn-size-annotation-arrow-border-width)} + #{var(--pgn-spacing-annotation-arrow-side-margin)} + ); } } @@ -518,8 +572,8 @@ border: solid transparent; border-left-color: var(--pgn-color-annotation-bg-light); border-width: - var(--pgn-size-annotation-arrow-border-width) 0 var(--pgn-size-annotation-arrow-border-width) - var(--pgn-size-annotation-arrow-border-width); + var(--pgn-size-annotation-arrow-border-width) 0 var(--pgn-size-annotation-arrow-border-width) + var(--pgn-size-annotation-arrow-border-width); top: 0; bottom: 0; right: calc(#{var(--pgn-size-annotation-arrow-border-width)} * -1); @@ -529,15 +583,18 @@ right: initial; left: calc(#{var(--pgn-size-annotation-arrow-border-width)} * -1); border-width: - var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width) - var(--pgn-size-annotation-arrow-border-width) 0; + var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width) + var(--pgn-size-annotation-arrow-border-width) 0; border-right-color: var(--pgn-color-annotation-bg-light); } } [dir="rtl"] & { margin-right: 0; - margin-left: calc(#{var(--pgn-size-annotation-arrow-border-width)} + #{var(--pgn-spacing-annotation-arrow-side-margin)}); + margin-left: + calc( + #{var(--pgn-size-annotation-arrow-border-width)} + #{var(--pgn-spacing-annotation-arrow-side-margin)} + ); } } @@ -554,8 +611,8 @@ border: solid transparent; border-right-color: var(--pgn-color-annotation-bg-light); border-width: - var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width) - var(--pgn-size-annotation-arrow-border-width) 0; + var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width) + var(--pgn-size-annotation-arrow-border-width) 0; top: 0; bottom: 0; left: calc(#{var(--pgn-size-annotation-arrow-border-width)} * -1); @@ -565,14 +622,17 @@ left: initial; right: calc(#{var(--pgn-size-annotation-arrow-border-width)} * -1); border-width: - var(--pgn-size-annotation-arrow-border-width) 0 var(--pgn-size-annotation-arrow-border-width) - var(--pgn-size-annotation-arrow-border-width); + var(--pgn-size-annotation-arrow-border-width) 0 var(--pgn-size-annotation-arrow-border-width) + var(--pgn-size-annotation-arrow-border-width); border-left-color: var(--pgn-color-annotation-bg-light); } } [dir="rtl"] & { margin-left: 0; - margin-right: calc(#{var(--pgn-size-annotation-arrow-border-width)} + #{var(--pgn-spacing-annotation-arrow-side-margin)}); + margin-right: + calc( + #{var(--pgn-size-annotation-arrow-border-width)} + #{var(--pgn-spacing-annotation-arrow-side-margin)} + ); } } diff --git a/src/Card/card-bootstrap.scss b/src/Card/card-bootstrap.scss index 34b361cc382..adce5d19325 100644 --- a/src/Card/card-bootstrap.scss +++ b/src/Card/card-bootstrap.scss @@ -22,13 +22,17 @@ &:first-child { border-top-width: 0; - @include border-top-radius(calc(#{var(--pgn-size-card-border-radius-base)} - #{var(--pgn-size-card-border-width)})); + @include border-top-radius( + calc(#{var(--pgn-size-card-border-radius-base)} - #{var(--pgn-size-card-border-width)}) + ); } &:last-child { border-bottom-width: 0; - @include border-bottom-radius(calc(#{var(--pgn-size-card-border-radius-base)} - #{var(--pgn-size-card-border-width)})); + @include border-bottom-radius( + calc(#{var(--pgn-size-card-border-radius-base)} - #{var(--pgn-size-card-border-width)}) + ); } } diff --git a/src/Carousel/Carousel.scss b/src/Carousel/Carousel.scss index c7d8c8aba42..a466a1b22d5 100644 --- a/src/Carousel/Carousel.scss +++ b/src/Carousel/Carousel.scss @@ -147,7 +147,7 @@ border-top: var(--pgn-size-carousel-indicator-height-area-hit) solid transparent; border-bottom: var(--pgn-size-carousel-indicator-height-area-hit) solid transparent; opacity: .5; - transition: var(--pgn-transition-carousel-indicator)-transition; + transition: var(--pgn-transition-carousel-indicator); } .active { diff --git a/src/CloseButton/CloseButton.scss b/src/CloseButton/CloseButton.scss index 89d56b3de0a..02150ab03f9 100644 --- a/src/CloseButton/CloseButton.scss +++ b/src/CloseButton/CloseButton.scss @@ -1,13 +1,13 @@ .close { float: right; - @include font-size(var(--pgn-typography-close-button-font-size)); font-weight: var(--pgn-typography-close-button-font-weight); line-height: 1; color: var(--pgn-color-close-button); text-shadow: var(--pgn-elevation-close-button-text-shadow); opacity: .5; - // Override 's hover style + @include font-size(var(--pgn-typography-close-button-font-size)); + @include hover() { color: var(--pgn-color-close-button); text-decoration: none; @@ -20,21 +20,12 @@ } } -// Additional properties for button version -// iOS requires the button element instead of an anchor tag. -// If you want the anchor version, it requires `href="#"`. -// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile - -// stylelint-disable-next-line selector-no-qualifying-type button.close { padding: 0; background-color: transparent; border: 0; } -// Future-proof disabling of clicks on `` elements - -// stylelint-disable-next-line selector-no-qualifying-type a.close.disabled { pointer-events: none; } diff --git a/src/Code/Code.scss b/src/Code/Code.scss index 0de0da90896..fe80fc48644 100644 --- a/src/Code/Code.scss +++ b/src/Code/Code.scss @@ -1,8 +1,9 @@ code { - @include font-size(var(--pgn-typography-code-font-size)); color: var(--pgn-color-code-base); word-wrap: break-word; + @include font-size(var(--pgn-typography-code-font-size)); + a > & { color: inherit; } @@ -10,27 +11,31 @@ code { kbd { padding: var(--pgn-spacing-code-kbd-padding-y) var(--pgn-spacing-code-kbd-padding-x); - @include font-size(var(--pgn-typography-code-kbd-font-size)); color: var(--pgn-color-code-kbd-base); background-color: var(--pgn-color-code-kbd-bg); + + @include font-size(var(--pgn-typography-code-kbd-font-size)); @include border-radius($border-radius-sm); @include box-shadow(var(--pgn-elevation-code-kbd-box-shadow)); kbd { padding: 0; - @include font-size(100%); font-weight: var(--pgn-typography-code-kbd-nested-font-weight); + + @include font-size(100%); @include box-shadow(none); } } pre { display: block; - @include font-size(var(--pgn-typography-code-font-size)); color: var(--pgn-color-code-pre); + @include font-size(var(--pgn-typography-code-font-size)); + code { @include font-size(inherit); + color: inherit; word-break: normal; } diff --git a/src/Collapsible/Collapsible.scss b/src/Collapsible/Collapsible.scss index da3a6fe4b3c..61db17e3b01 100644 --- a/src/Collapsible/Collapsible.scss +++ b/src/Collapsible/Collapsible.scss @@ -21,7 +21,9 @@ } &[aria-expanded="true"] { - border-radius: calc(#{var(--pgn-size-card-border-radius-base)} - #{var(--pgn-size-card-border-width)}) calc(#{var(--pgn-size-card-border-radius-base)} - #{var(--pgn-size-card-border-width)}) 0 0; + border-radius: + calc(#{var(--pgn-size-card-border-radius-base)} - #{var(--pgn-size-card-border-width)}) + calc(#{var(--pgn-size-card-border-radius-base)} - #{var(--pgn-size-card-border-width)}) 0 0; border-color: var(--pgn-color-card-border-base); transition: none; text-align: start; diff --git a/src/Container/Container.scss b/src/Container/Container.scss deleted file mode 100644 index 1234f6b5e5e..00000000000 --- a/src/Container/Container.scss +++ /dev/null @@ -1,6 +0,0 @@ -var(--pgn-size-container-max-width-xl); -var(--pgn-size-container-max-width-xl); -var(--pgn-size-container-max-width-lg); -var(--pgn-size-container-max-width-md); -var(--pgn-size-container-max-width-sm); -var(--pgn-size-container-max-width-xs); diff --git a/src/Dropdown/dropdown-bootstrap.scss b/src/Dropdown/dropdown-bootstrap.scss index 4c4a533ba60..2245d2cfc9c 100644 --- a/src/Dropdown/dropdown-bootstrap.scss +++ b/src/Dropdown/dropdown-bootstrap.scss @@ -1,4 +1,3 @@ -// The dropdown wrapper (`
`) .dropup, .dropright, .dropdown, @@ -9,30 +8,37 @@ .dropdown-toggle { white-space: nowrap; - // Generate the caret automatically @include caret(); } -// The dropdown menu .dropdown-menu { position: absolute; top: 100%; left: 0; z-index: $zindex-dropdown; - display: none; // none by default, but block on "open" of the menu + display: none; float: left; min-width: var(--pgn-size-dropdown-min-width); padding: var(--pgn-spacing-dropdown-padding-y-base) var(--pgn-spacing-dropdown-padding-x-base); - margin: var(--pgn-spacing-dropdown-spacer) 0 0; // override default ul - @include font-size(var(--pgn-typography-dropdown-font-size)); + margin: var(--pgn-spacing-dropdown-spacer) 0 0; color: var(--pgn-color-dropdown-text); - text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer) + text-align: left; list-style: none; background-color: var(--pgn-color-dropdown-bg); background-clip: padding-box; border: var(--pgn-size-dropdown-border-width) solid var(--pgn-color-dropdown-border); + + @include font-size(var(--pgn-typography-dropdown-font-size)); @include border-radius(var(--pgn-size-dropdown-border-radius-base)); @include box-shadow(var(--pgn-elevation-dropdown-box-shadow)); + + &[x-placement^="top"], + &[x-placement^="right"], + &[x-placement^="bottom"], + &[x-placement^="left"] { + right: auto; + bottom: auto; + } } @each $breakpoint in map-keys($grid-breakpoints) { @@ -51,8 +57,6 @@ } } -// Allow for dropdowns to go bottom up (aka, dropup-menu) -// Just add .dropup after the standard .dropdown class and you're set. .dropup { .dropdown-menu { top: auto; @@ -77,6 +81,7 @@ .dropdown-toggle { @include caret(right); + &::after { vertical-align: 0; } @@ -94,47 +99,30 @@ .dropdown-toggle { @include caret(left); + &::before { vertical-align: 0; } } } -// When Popper is enabled, reset the basic dropdown position -// stylelint-disable-next-line no-duplicate-selectors -.dropdown-menu { - &[x-placement^="top"], - &[x-placement^="right"], - &[x-placement^="bottom"], - &[x-placement^="left"] { - right: auto; - bottom: auto; - } -} - -// Dividers (basically an `
`) within the dropdown .dropdown-divider { @include nav-divider(var(--pgn-color-dropdown-divider-bg), var(--pgn-spacing-dropdown-divider-margin-y), true); } -// Links, buttons, and more within the dropdown menu -// -// `