Skip to content

Remove global bootstrap #44

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
viktorkombov wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Remove global bootstrap #44

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/components/GlobalNavBar/GlobalNavBar.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
*/
import { fetchIgNav } from '../../lib/nav-helpers.ts';
import styles from './GlobalNavBar.module.scss';
import './_bootstrap-scoped.css';
import type { NavLang } from '../../platform.ts';

interface Props {
Expand All @@ -27,7 +28,7 @@ const igNav = await fetchIgNav(resolvedLang);
IG-family global nav (angular, react, blazor, web-components,
slingshot, igniteui)
============================================================ */}
<div class={styles.navBar} transition:persist="global-nav-bar">
<div class={`${styles.navBar} igd-nav-bootstrap`} transition:persist="global-nav-bar">
{/* IG nav — fetched directly via fetchIgNav(); falls back to static markup */}
{igNav?.prefetched && <Fragment set:html={igNav.headerHtml} />}
</div>
1 change: 1 addition & 0 deletions src/components/GlobalNavBar/_bootstrap-scoped.css
View file
Open in desktop

Large diffs are not rendered by default.

10 changes: 2 additions & 8 deletions src/platform.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,14 +67,8 @@ export interface NavConfig {
// Shared IG styles — used by: angular, react, blazor, web-components, slingshot
// ---------------------------------------------------------------------------
const IG_STYLES: HeadEntry[] = [
// Bootstrap is wrapped in a CSS cascade layer so its global resets do not
// bleed into the docs theme. The layer priority order is declared at
// the top of custom.scss: @layer bootstrap
// Note: @import layer() does not support the `integrity` SRI attribute.
{
tag: 'style',
content: '@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css") layer(bootstrap);',
},
// Bootstrap 3 is scoped inside GlobalNavBar.module.scss via a SCSS @import.
// It is not injected into <head> — no CDN dependency, no global resets.
{ tag: 'link', attrs: { rel: 'stylesheet', href: 'https://www.infragistics.com/assets/modern/css/layout.css' } },
{ tag: 'link', attrs: { rel: 'stylesheet', href: 'https://www.infragistics.com/assets/modern/css/animate-custom.css' } },
{ tag: 'link', attrs: { rel: 'stylesheet', href: 'https://www.infragistics.com/assets/modern/css/fontello.css' } },
Expand Down
11 changes: 3 additions & 8 deletions src/styles/theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,28 +5,22 @@

// Establish the CSS cascade layer order.
//
// Bootstrap (v3 / v4) is injected into the page by platform.ts as an @import
// wrapped in layer(bootstrap). Without this declaration the browser would
// still create the layer on first encounter, but the ORDER would be undefined
// relative to our own unlayered rules — meaning Bootstrap could win.
//
// `components` holds every component-level stylesheet (DocsSubHeader, Search,
// DocsSidebar, …). The layout-level overrides in DocsLayout.scss stay
// UNLAYERED so they always beat component base styles regardless of import
// order and even when component selectors have higher specificity.
//
// Rule: lower layers lose to higher layers, and unlayered rules beat all layers.
@layer bootstrap, components;
@layer components;

// Restore browser default (16px). Bootstrap 3 sets html { font-size: 10px }
// inside @layer(bootstrap) which would break all rem-based sizing without this.
html {
font-size: 16px;
background: var(--igd-app-bg);
}

body {
scrollbar-gutter: stable;
margin: 0;
}

// Define font CSS custom properties so components can reference or override them.
Expand Down Expand Up @@ -101,6 +95,7 @@ igc-icon {
* {
scrollbar-width: thin;
scrollbar-color: var(--igd-scrollbar-thumb) var(--igd-scrollbar-track);
box-sizing: border-box;
}

::-webkit-scrollbar {
Expand Down