diff --git a/fork/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss b/fork/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss index 7850b9a41e9..ef0bf4b9dde 100644 --- a/fork/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss +++ b/fork/bootstrap-sass/assets/stylesheets/bootstrap/_normalize.scss @@ -6,6 +6,8 @@ // without disabling user zoom. // +@layer reset { + html { font-family: sans-serif; // 1 -ms-text-size-adjust: 100%; // 2 @@ -425,3 +427,5 @@ td, th { padding: 0; } + +} diff --git a/fork/bootstrap-sass/assets/stylesheets/bootstrap/_scaffolding.scss b/fork/bootstrap-sass/assets/stylesheets/bootstrap/_scaffolding.scss index b303bf4c6db..e0587cb0499 100644 --- a/fork/bootstrap-sass/assets/stylesheets/bootstrap/_scaffolding.scss +++ b/fork/bootstrap-sass/assets/stylesheets/bootstrap/_scaffolding.scss @@ -7,146 +7,149 @@ // Heads up! This reset may cause conflicts with some third-party widgets. // For recommendations on resolving such conflicts, see // https://getbootstrap.com/docs/3.4/getting-started/#third-box-sizing -* { - @include box-sizing(border-box); -} -*:before, -*:after { - @include box-sizing(border-box); -} -// Body reset +@layer reset { + * { + @include box-sizing(border-box); + } + *:before, + *:after { + @include box-sizing(border-box); + } -html { - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -} + // Body reset -body { - font-family: $font-family-base; - font-size: $font-size-base; - line-height: $line-height-base; - color: $text-color; - background-color: $body-bg; -} + html { + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + } -// Reset fonts for relevant elements -input, -button, -select, -textarea { - font-family: inherit; - font-size: inherit; - line-height: inherit; -} + body { + font-family: $font-family-base; + font-size: $font-size-base; + line-height: $line-height-base; + color: $text-color; + background-color: $body-bg; + } -// Links + // Reset fonts for relevant elements + input, + button, + select, + textarea { + font-family: inherit; + font-size: inherit; + line-height: inherit; + } -a { - color: $link-color; - text-decoration: none; + // Links - &:hover, - &:focus { - color: $link-hover-color; - text-decoration: $link-hover-decoration; - } + a { + color: $link-color; + text-decoration: none; + + &:hover, + &:focus { + color: $link-hover-color; + text-decoration: $link-hover-decoration; + } - &:focus { - @include tab-focus; + &:focus { + @include tab-focus; + } } -} -// Figures -// -// We reset this here because previously Normalize had no `figure` margins. This -// ensures we don't break anyone's use of the element. + // Figures + // + // We reset this here because previously Normalize had no `figure` margins. This + // ensures we don't break anyone's use of the element. -figure { - margin: 0; -} - -// Images + figure { + margin: 0; + } -img { - vertical-align: middle; -} + // Images -// Responsive images (ensure images don't scale beyond their parents) -.img-responsive { - @include img-responsive; -} + img { + vertical-align: middle; + } -// Rounded corners -.img-rounded { - border-radius: $border-radius-large; -} + // Responsive images (ensure images don't scale beyond their parents) + .img-responsive { + @include img-responsive; + } -// Image thumbnails -// -// Heads up! This is mixin-ed into thumbnails.less for `.thumbnail`. -.img-thumbnail { - padding: $thumbnail-padding; - line-height: $line-height-base; - background-color: $thumbnail-bg; - border: 1px solid $thumbnail-border; - border-radius: $thumbnail-border-radius; - @include transition(all 0.2s ease-in-out); - - // Keep them at most 100% wide - @include img-responsive(inline-block); -} + // Rounded corners + .img-rounded { + border-radius: $border-radius-large; + } -// Perfect circle -.img-circle { - border-radius: 50%; // set radius in percents -} + // Image thumbnails + // + // Heads up! This is mixin-ed into thumbnails.less for `.thumbnail`. + .img-thumbnail { + padding: $thumbnail-padding; + line-height: $line-height-base; + background-color: $thumbnail-bg; + border: 1px solid $thumbnail-border; + border-radius: $thumbnail-border-radius; + @include transition(all 0.2s ease-in-out); + + // Keep them at most 100% wide + @include img-responsive(inline-block); + } -// Horizontal rules + // Perfect circle + .img-circle { + border-radius: 50%; // set radius in percents + } -hr { - margin-top: $line-height-computed; - margin-bottom: $line-height-computed; - border: 0; - border-top: 1px solid $hr-border; -} + // Horizontal rules -// Only display content to screen readers -// -// See: https://a11yproject.com/posts/how-to-hide-content - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - border: 0; -} + hr { + margin-top: $line-height-computed; + margin-bottom: $line-height-computed; + border: 0; + border-top: 1px solid $hr-border; + } -// Use in conjunction with .sr-only to only display content when it's focused. -// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 -// Credit: HTML5 Boilerplate + // Only display content to screen readers + // + // See: https://a11yproject.com/posts/how-to-hide-content + + .sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; + } -.sr-only-focusable { - &:active, - &:focus { - position: static; - width: auto; - height: auto; - margin: 0; - overflow: visible; - clip: auto; + // Use in conjunction with .sr-only to only display content when it's focused. + // Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 + // Credit: HTML5 Boilerplate + + .sr-only-focusable { + &:active, + &:focus { + position: static; + width: auto; + height: auto; + margin: 0; + overflow: visible; + clip: auto; + } } -} -// iOS "clickable elements" fix for role="button" -// -// Fixes "clickability" issue (and more generally, the firing of events such as focus as well) -// for traditionally non-focusable elements with role="button" -// see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile + // iOS "clickable elements" fix for role="button" + // + // Fixes "clickability" issue (and more generally, the firing of events such as focus as well) + // for traditionally non-focusable elements with role="button" + // see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile -[role='button'] { - cursor: pointer; + [role='button'] { + cursor: pointer; + } } diff --git a/packages/theme/src/theme/_type.scss b/packages/theme/src/theme/_type.scss index eb532f9854a..adf7e1aa790 100644 --- a/packages/theme/src/theme/_type.scss +++ b/packages/theme/src/theme/_type.scss @@ -1,67 +1,68 @@ @use '@talend/design-tokens/lib/tokens' as tokens; +@layer reset { + body { + color: tokens.$coral-color-neutral-text; + background-color: tokens.$coral-color-neutral-background; + } -body { - color: tokens.$coral-color-neutral-text; - background-color: tokens.$coral-color-neutral-background; -} + h1, + .h1 { + color: tokens.$coral-color-neutral-text; + // font: tokens.$coral-heading-l; + } -h1, -.h1 { - color: tokens.$coral-color-neutral-text; - // font: tokens.$coral-heading-l; -} + h2, + .h2 { + color: tokens.$coral-color-neutral-text; + // font: tokens.$coral-heading-m; + } -h2, -.h2 { - color: tokens.$coral-color-neutral-text; - // font: tokens.$coral-heading-m; -} + h3, + .h3, + h4, + .h4 { + color: tokens.$coral-color-neutral-text; + // font: tokens.$coral-heading-s; + } -h3, -.h3, -h4, -.h4 { - color: tokens.$coral-color-neutral-text; - // font: tokens.$coral-heading-s; -} + h5, + .h5, + h6, + .h6 { + color: tokens.$coral-color-neutral-text; + } -h5, -.h5, -h6, -.h6 { - color: tokens.$coral-color-neutral-text; -} + p, + .p { + color: tokens.$coral-color-neutral-text; + // font: tokens.$coral-paragraph-m; + } -p, -.p { - color: tokens.$coral-color-neutral-text; - // font: tokens.$coral-paragraph-m; -} + .text-muted { + color: tokens.$coral-color-neutral-text-disabled; + } -.text-muted { - color: tokens.$coral-color-neutral-text-disabled; -} + .text-primary { + color: tokens.$coral-color-accent-text; + } -.text-primary { - color: tokens.$coral-color-accent-text; -} - -.text-warning { - color: tokens.$coral-color-warning-text; -} + .text-warning { + color: tokens.$coral-color-warning-text; + } -.text-danger { - color: tokens.$coral-color-danger-text; -} + .text-danger { + color: tokens.$coral-color-danger-text; + } -.text-success { - color: tokens.$coral-color-success-text; -} + .text-success { + color: tokens.$coral-color-success-text; + } -.text-info { - color: tokens.$coral-color-info-text; -} + .text-info { + color: tokens.$coral-color-info-text; + } -a { - color: tokens.$coral-color-accent-text; + a { + color: tokens.$coral-color-accent-text; + } }