mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
docs: use all.css for prefixed styles (#1221)
* docs: remove .bx--content override * docs(ui-shell): add note on UI Shell theming * docs(grid): touch up grid examples * docs(theme): wrap localStorage in try catch So that the site still works in Safari with all cookies blocked. * docs: use prefixed all.css Without vendor prefixes, some styles are lost in Safari. * docs: remove svelte-preprocess from svelte.config.js
This commit is contained in:
metonym
GitHub
parent
5209f329bd
commit
d34f571150
23 changed files with 601 additions and 1714 deletions
|
|
@ -9,28 +9,21 @@
|
|||
"build:svite": "vite build"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltech/routify": "^1.9.9",
|
||||
"@sveltejs/vite-plugin-svelte": "^1.0.0-next.33",
|
||||
"autoprefixer": "^10.2.3",
|
||||
"carbon-components": "10.56.0",
|
||||
"carbon-components-10.47": "npm:carbon-components@10.47",
|
||||
"@sveltech/routify": "^1.9.10",
|
||||
"@sveltejs/vite-plugin-svelte": "^1.0.0-next.40",
|
||||
"carbon-components-svelte": "../",
|
||||
"carbon-icons-svelte": "^10.44.3",
|
||||
"carbon-icons-svelte": "^10.45.1",
|
||||
"clipboard-copy": "^4.0.1",
|
||||
"cross-env": "^7.0.3",
|
||||
"mdsvex": "^0.9.8",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"postcss": "^8.2.13",
|
||||
"prettier": "^2.5.1",
|
||||
"prettier-plugin-svelte": "^2.5.1",
|
||||
"prettier": "^2.6.2",
|
||||
"prettier-plugin-svelte": "^2.6.0",
|
||||
"prism-svelte": "^0.4.7",
|
||||
"prismjs": "^1.27.0",
|
||||
"remark-slug": "^6.0.0",
|
||||
"sass": "^1.42.1",
|
||||
"svelte": "^3.44.3",
|
||||
"svelte-hmr": "0.11.1",
|
||||
"svelte-preprocess": "^4.3.2",
|
||||
"vite": "^2.7.10"
|
||||
"svelte": "^3.46.6",
|
||||
"vite": "^2.9.1"
|
||||
},
|
||||
"routify": {
|
||||
"routifyDir": ".routify",
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<style global>
|
||||
<style>
|
||||
.preview {
|
||||
margin-bottom: var(--cds-layout-04);
|
||||
margin-left: -1rem;
|
||||
|
|
@ -55,91 +55,10 @@
|
|||
max-width: 56rem;
|
||||
}
|
||||
|
||||
.code-override .bx--snippet {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.code-override .bx--copy-btn,
|
||||
.code-override .bx--snippet,
|
||||
.code-override button.bx--btn.bx--snippet-btn--expand {
|
||||
background-color: #262626;
|
||||
color: #f4f4f4;
|
||||
}
|
||||
|
||||
.code-override .bx--copy-btn:hover,
|
||||
.code-override button.bx--btn.bx--snippet-btn--expand:hover {
|
||||
background-color: #393939;
|
||||
}
|
||||
|
||||
.code-override .bx--snippet__icon {
|
||||
fill: #f4f4f4;
|
||||
}
|
||||
|
||||
.code-override .bx--snippet-container pre {
|
||||
font-size: var(--cds-code-02-font-size);
|
||||
line-height: var(--cds-code-02-line-height);
|
||||
letter-spacing: var(--cds-code-02-letter-spacing);
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.code-override .bx--snippet--multi .bx--snippet-container pre {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.token.tag,
|
||||
.token.operator {
|
||||
color: #6ea6ff;
|
||||
}
|
||||
|
||||
.token.attr-name {
|
||||
color: #3ddbd9; /* teal 30 */
|
||||
}
|
||||
|
||||
.token.function {
|
||||
color: #9ef0f0;
|
||||
}
|
||||
|
||||
.token.token.language-javascript,
|
||||
.token.attr-value {
|
||||
color: #d4bbff; /* purple 30 */
|
||||
}
|
||||
|
||||
.token.keyword {
|
||||
color: #bb8eff;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #a8a8a8; /* gray 40 */
|
||||
}
|
||||
|
||||
.token.script .token.language-javascript {
|
||||
color: #3ddbd9; /* teal 30 */
|
||||
}
|
||||
|
||||
.token.string {
|
||||
color: #fa75a6;
|
||||
}
|
||||
|
||||
.token.boolean {
|
||||
color: #bb8eff;
|
||||
}
|
||||
|
||||
.token.number {
|
||||
color: #a7f0ba;
|
||||
}
|
||||
|
||||
.token.comment {
|
||||
color: #bebebe;
|
||||
}
|
||||
|
||||
.code-override {
|
||||
border: 1px solid #262626;
|
||||
}
|
||||
|
||||
html[theme="g90"] .code-override {
|
||||
border: 1px solid var(--cds-ui-03);
|
||||
}
|
||||
|
||||
.preview-viewer {
|
||||
border: 1px solid var(--cds-ui-03);
|
||||
border-bottom: 0;
|
||||
|
|
|
|||
|
|
@ -9,14 +9,20 @@
|
|||
const isValidTheme = (value) => themes.includes(value);
|
||||
|
||||
onMount(() => {
|
||||
const persisted_theme = localStorage.getItem(persistKey);
|
||||
if (isValidTheme(persisted_theme)) theme.set(persisted_theme);
|
||||
try {
|
||||
const persisted_theme = localStorage.getItem(persistKey);
|
||||
if (isValidTheme(persisted_theme)) theme.set(persisted_theme);
|
||||
} catch (e) {}
|
||||
});
|
||||
|
||||
afterUpdate(() => {
|
||||
if (isValidTheme($theme)) {
|
||||
document.documentElement.setAttribute("theme", $theme);
|
||||
if (persist) localStorage.setItem(persistKey, $theme);
|
||||
if (persist) {
|
||||
try {
|
||||
localStorage.setItem(persistKey, $theme);
|
||||
} catch (e) {}
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
268
docs/src/global.css
Normal file
268
docs/src/global.css
Normal file
|
|
@ -0,0 +1,268 @@
|
|||
html[theme="g90"] .code-override {
|
||||
border: 1px solid var(--cds-ui-03);
|
||||
}
|
||||
|
||||
.code-override .bx--snippet {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.code-override .bx--copy-btn,
|
||||
.code-override .bx--snippet,
|
||||
.code-override button.bx--btn.bx--snippet-btn--expand {
|
||||
background-color: #262626;
|
||||
color: #f4f4f4;
|
||||
}
|
||||
|
||||
.code-override .bx--copy-btn:hover,
|
||||
.code-override button.bx--btn.bx--snippet-btn--expand:hover {
|
||||
background-color: #393939;
|
||||
}
|
||||
|
||||
.code-override .bx--snippet__icon {
|
||||
fill: #f4f4f4;
|
||||
}
|
||||
|
||||
.code-override .bx--snippet-container pre {
|
||||
font-size: var(--cds-code-02-font-size);
|
||||
line-height: var(--cds-code-02-line-height);
|
||||
letter-spacing: var(--cds-code-02-letter-spacing);
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.code-override .bx--snippet--multi .bx--snippet-container pre {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.token.tag,
|
||||
.token.operator {
|
||||
color: #6ea6ff;
|
||||
}
|
||||
|
||||
.token.attr-name {
|
||||
color: #3ddbd9; /* teal 30 */
|
||||
}
|
||||
|
||||
.token.function {
|
||||
color: #9ef0f0;
|
||||
}
|
||||
|
||||
.token.token.language-javascript,
|
||||
.token.attr-value {
|
||||
color: #d4bbff; /* purple 30 */
|
||||
}
|
||||
|
||||
.token.keyword {
|
||||
color: #bb8eff;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #a8a8a8; /* gray 40 */
|
||||
}
|
||||
|
||||
.token.script .token.language-javascript {
|
||||
color: #3ddbd9; /* teal 30 */
|
||||
}
|
||||
|
||||
.token.string {
|
||||
color: #fa75a6;
|
||||
}
|
||||
|
||||
.token.boolean {
|
||||
color: #bb8eff;
|
||||
}
|
||||
|
||||
.token.number {
|
||||
color: #a7f0ba;
|
||||
}
|
||||
|
||||
.token.comment {
|
||||
color: #bebebe;
|
||||
}
|
||||
|
||||
.override-tabs a.bx--tabs__nav-link,
|
||||
.override-tabs a.bx--tabs__nav-link:focus,
|
||||
.override-tabs a.bx--tabs__nav-link:active {
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
#select-theme {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.prose > p > .bx--link {
|
||||
font-size: inherit;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.prose .toc {
|
||||
margin-bottom: var(--cds-layout-01);
|
||||
}
|
||||
|
||||
.table {
|
||||
position: sticky;
|
||||
max-height: calc(100vh - 3rem);
|
||||
top: 3rem;
|
||||
padding-top: var(--cds-spacing-05);
|
||||
padding-bottom: var(--cds-spacing-05);
|
||||
padding-left: var(--cds-spacing-08);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
[data-components] {
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
[data-components] .bx--grid {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 1056px) {
|
||||
.table {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-viewer > .bx--aspect-ratio,
|
||||
.preview-viewer [data-outline] {
|
||||
outline: 1px solid var(--cds-interactive-04);
|
||||
}
|
||||
|
||||
[data-outline] {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
[data-outline] ~ [data-outline] {
|
||||
margin-top: var(--cds-spacing-08);
|
||||
}
|
||||
|
||||
#select-theme {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.prose > p > .bx--link {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.prose .toc {
|
||||
margin-bottom: var(--cds-layout-01);
|
||||
}
|
||||
|
||||
.table {
|
||||
position: sticky;
|
||||
max-height: calc(100vh - 3rem);
|
||||
top: 3rem;
|
||||
padding-top: var(--cds-spacing-05);
|
||||
padding-bottom: var(--cds-spacing-05);
|
||||
padding-left: var(--cds-spacing-08);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.bx--side-nav__overlay-active {
|
||||
z-index: calc(10 + 1); /** supersede the z-index of code snippets */
|
||||
}
|
||||
|
||||
.body-short-01 {
|
||||
font-size: var(--cds-body-short-01-font-size);
|
||||
font-weight: var(--cds-body-short-01-font-weight);
|
||||
letter-spacing: var(--cds-body-short-01-letter-spacing);
|
||||
line-height: var(--cds-body-short-01-line-height);
|
||||
}
|
||||
|
||||
.bx--col > h1 {
|
||||
font-size: var(--cds-display-01-font-size);
|
||||
font-weight: var(--cds-display-01-font-weight);
|
||||
letter-spacing: var(--cds-display-01-letter-spacing);
|
||||
line-height: var(--cds-display-01-line-height);
|
||||
margin-bottom: var(--cds-layout-01);
|
||||
}
|
||||
|
||||
.big-paragraph {
|
||||
font-size: var(--cds-expressive-heading-03-font-size);
|
||||
font-weight: var(--cds-expressive-heading-03-font-weight);
|
||||
letter-spacing: var(--cds-expressive-heading-03-letter-spacing);
|
||||
line-height: var(--cds-expressive-heading-03-line-height);
|
||||
margin-top: var(--cds-layout-03);
|
||||
margin-bottom: var(--cds-layout-06);
|
||||
}
|
||||
|
||||
.big-link,
|
||||
.bx--col > .big-paragraph > code {
|
||||
font-size: var(--cds-expressive-heading-03-font-size);
|
||||
font-weight: var(--cds-expressive-heading-03-font-weight);
|
||||
letter-spacing: var(--cds-expressive-heading-03-letter-spacing);
|
||||
line-height: var(--cds-expressive-heading-03-line-height);
|
||||
}
|
||||
|
||||
.bx--col > p {
|
||||
max-width: 44rem;
|
||||
}
|
||||
|
||||
.bx--col > p > code {
|
||||
font-size: var(--cds-code-02-font-size);
|
||||
font-weight: var(--cds-code-02-font-weight);
|
||||
line-height: var(--cds-code-02-line-height);
|
||||
letter-spacing: var(--cds-code-02-letter-spacing);
|
||||
background-color: var(--cds-ui-03);
|
||||
border-radius: 0.25rem;
|
||||
padding: 0 var(--cds-spacing-02);
|
||||
}
|
||||
|
||||
.bx--col > h2 {
|
||||
font-size: var(--cds-expressive-heading-05-font-size);
|
||||
font-weight: var(--cds-expressive-heading-05-font-weight);
|
||||
letter-spacing: var(--cds-expressive-heading-05-letter-spacing);
|
||||
line-height: var(--cds-expressive-heading-05-line-height);
|
||||
padding-top: var(--cds-layout-04);
|
||||
margin-bottom: var(--cds-layout-01);
|
||||
}
|
||||
|
||||
.bx--col > h3 {
|
||||
font-size: var(--cds-expressive-heading-04-font-size);
|
||||
font-weight: var(--cds-expressive-heading-04-font-weight);
|
||||
letter-spacing: var(--cds-expressive-heading-04-letter-spacing);
|
||||
line-height: var(--cds-expressive-heading-04-line-height);
|
||||
padding-top: var(--cds-layout-04);
|
||||
margin-bottom: var(--cds-layout-01);
|
||||
}
|
||||
|
||||
.bx--col > h4 {
|
||||
font-size: var(--cds-expressive-heading-02-font-size);
|
||||
font-weight: var(--cds-expressive-heading-02-font-weight);
|
||||
letter-spacing: var(--cds-expressive-heading-02-letter-spacing);
|
||||
line-height: var(--cds-expressive-heading-02-line-height);
|
||||
padding-top: var(--cds-layout-04);
|
||||
margin-bottom: var(--cds-layout-01);
|
||||
}
|
||||
|
||||
.bx--col > p {
|
||||
margin-bottom: var(--cds-layout-02);
|
||||
}
|
||||
|
||||
main.bx--content {
|
||||
min-height: calc(100vh - 3rem - 3rem);
|
||||
}
|
||||
|
||||
@media (max-width: 1056px) {
|
||||
.bx--side-nav ~ .bx--content {
|
||||
margin-left: 0;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.bx--side-nav--expanded ~ .bx--content {
|
||||
white-space: nowrap;
|
||||
min-width: 28rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1057px) {
|
||||
.bx--side-nav__navigation {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.bx--side-nav__submenu[aria-expanded="true"] + .bx--side-nav__menu {
|
||||
max-height: 144rem;
|
||||
}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
import App from "./App.svelte";
|
||||
import "../../css/all.scss";
|
||||
import "../../css/all.css";
|
||||
import "./global.css";
|
||||
|
||||
const app = new App({ target: document.body });
|
||||
|
||||
|
|
|
|||
|
|
@ -149,36 +149,7 @@
|
|||
</Column>
|
||||
</Content>
|
||||
|
||||
<style global>
|
||||
.override-tabs a.bx--tabs__nav-link,
|
||||
.override-tabs a.bx--tabs__nav-link:focus,
|
||||
.override-tabs a.bx--tabs__nav-link:active {
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
#select-theme {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.prose > p > .bx--link {
|
||||
font-size: inherit;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.prose .toc {
|
||||
margin-bottom: var(--cds-layout-01);
|
||||
}
|
||||
|
||||
.table {
|
||||
position: sticky;
|
||||
max-height: calc(100vh - 3rem);
|
||||
top: 3rem;
|
||||
padding-top: var(--cds-spacing-05);
|
||||
padding-bottom: var(--cds-spacing-05);
|
||||
padding-left: var(--cds-spacing-08);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
<style>
|
||||
.bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -186,16 +157,6 @@
|
|||
border-bottom: 1px solid var(--cds-ui-03);
|
||||
}
|
||||
|
||||
[data-components] {
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
[data-components] .bx--grid {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.toc h5 {
|
||||
margin-bottom: var(--cds-spacing-03);
|
||||
}
|
||||
|
|
@ -205,25 +166,8 @@
|
|||
}
|
||||
|
||||
@media (max-width: 1056px) {
|
||||
.table {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toc.mobile {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-viewer > .bx--aspect-ratio,
|
||||
.preview-viewer [data-outline] {
|
||||
outline: 1px solid var(--cds-interactive-04);
|
||||
}
|
||||
|
||||
[data-outline] {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
[data-outline] ~ [data-outline] {
|
||||
margin-top: var(--cds-spacing-08);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -64,29 +64,7 @@
|
|||
</Column>
|
||||
</Content>
|
||||
|
||||
<style global>
|
||||
#select-theme {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.prose > p > .bx--link {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.prose .toc {
|
||||
margin-bottom: var(--cds-layout-01);
|
||||
}
|
||||
|
||||
.table {
|
||||
position: sticky;
|
||||
max-height: calc(100vh - 3rem);
|
||||
top: 3rem;
|
||||
padding-top: var(--cds-spacing-05);
|
||||
padding-bottom: var(--cds-spacing-05);
|
||||
padding-left: var(--cds-spacing-08);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
<style>
|
||||
.bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -94,16 +72,6 @@
|
|||
border-bottom: 1px solid var(--cds-ui-03);
|
||||
}
|
||||
|
||||
[data-components] {
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
[data-components] .bx--grid {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.toc h5 {
|
||||
margin-bottom: var(--cds-spacing-03);
|
||||
}
|
||||
|
|
@ -113,10 +81,6 @@
|
|||
}
|
||||
|
||||
@media (max-width: 1056px) {
|
||||
.table {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toc.mobile {
|
||||
display: block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -146,106 +146,7 @@
|
|||
<slot />
|
||||
</Theme>
|
||||
|
||||
<style global>
|
||||
.bx--side-nav__overlay-active {
|
||||
z-index: calc(10 + 1); /** supersede the z-index of code snippets */
|
||||
}
|
||||
|
||||
.body-short-01 {
|
||||
font-size: var(--cds-body-short-01-font-size);
|
||||
font-weight: var(--cds-body-short-01-font-weight);
|
||||
letter-spacing: var(--cds-body-short-01-letter-spacing);
|
||||
line-height: var(--cds-body-short-01-line-height);
|
||||
}
|
||||
|
||||
.bx--col > h1 {
|
||||
font-size: var(--cds-display-01-font-size);
|
||||
font-weight: var(--cds-display-01-font-weight);
|
||||
letter-spacing: var(--cds-display-01-letter-spacing);
|
||||
line-height: var(--cds-display-01-line-height);
|
||||
margin-bottom: var(--cds-layout-01);
|
||||
}
|
||||
|
||||
.big-paragraph {
|
||||
font-size: var(--cds-expressive-heading-03-font-size);
|
||||
font-weight: var(--cds-expressive-heading-03-font-weight);
|
||||
letter-spacing: var(--cds-expressive-heading-03-letter-spacing);
|
||||
line-height: var(--cds-expressive-heading-03-line-height);
|
||||
margin-top: var(--cds-layout-03);
|
||||
margin-bottom: var(--cds-layout-06);
|
||||
}
|
||||
|
||||
.big-link,
|
||||
.bx--col > .big-paragraph > code {
|
||||
font-size: var(--cds-expressive-heading-03-font-size);
|
||||
font-weight: var(--cds-expressive-heading-03-font-weight);
|
||||
letter-spacing: var(--cds-expressive-heading-03-letter-spacing);
|
||||
line-height: var(--cds-expressive-heading-03-line-height);
|
||||
}
|
||||
|
||||
.bx--col > p {
|
||||
max-width: 44rem;
|
||||
}
|
||||
|
||||
.bx--col > p > code {
|
||||
font-size: var(--cds-code-02-font-size);
|
||||
font-weight: var(--cds-code-02-font-weight);
|
||||
line-height: var(--cds-code-02-line-height);
|
||||
letter-spacing: var(--cds-code-02-letter-spacing);
|
||||
background-color: var(--cds-ui-03);
|
||||
border-radius: 0.25rem;
|
||||
padding: 0 var(--cds-spacing-02);
|
||||
}
|
||||
|
||||
.bx--col > h2 {
|
||||
font-size: var(--cds-expressive-heading-05-font-size);
|
||||
font-weight: var(--cds-expressive-heading-05-font-weight);
|
||||
letter-spacing: var(--cds-expressive-heading-05-letter-spacing);
|
||||
line-height: var(--cds-expressive-heading-05-line-height);
|
||||
padding-top: var(--cds-layout-04);
|
||||
margin-bottom: var(--cds-layout-01);
|
||||
}
|
||||
|
||||
.bx--col > h3 {
|
||||
font-size: var(--cds-expressive-heading-04-font-size);
|
||||
font-weight: var(--cds-expressive-heading-04-font-weight);
|
||||
letter-spacing: var(--cds-expressive-heading-04-letter-spacing);
|
||||
line-height: var(--cds-expressive-heading-04-line-height);
|
||||
padding-top: var(--cds-layout-04);
|
||||
margin-bottom: var(--cds-layout-01);
|
||||
}
|
||||
|
||||
.bx--col > h4 {
|
||||
font-size: var(--cds-expressive-heading-02-font-size);
|
||||
font-weight: var(--cds-expressive-heading-02-font-weight);
|
||||
letter-spacing: var(--cds-expressive-heading-02-letter-spacing);
|
||||
line-height: var(--cds-expressive-heading-02-line-height);
|
||||
padding-top: var(--cds-layout-04);
|
||||
margin-bottom: var(--cds-layout-01);
|
||||
}
|
||||
|
||||
.bx--col > p {
|
||||
margin-bottom: var(--cds-layout-02);
|
||||
}
|
||||
|
||||
main.bx--content {
|
||||
background: none;
|
||||
min-height: calc(100vh - 3rem - 3rem);
|
||||
}
|
||||
|
||||
@media (max-width: 1056px) {
|
||||
.bx--side-nav ~ .bx--content {
|
||||
margin-left: 0;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.bx--side-nav--expanded ~ .bx--content {
|
||||
white-space: nowrap;
|
||||
min-width: 28rem;
|
||||
}
|
||||
}
|
||||
|
||||
<style>
|
||||
.platform-name {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
|
|
@ -265,14 +166,4 @@
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1057px) {
|
||||
.bx--side-nav__navigation {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.bx--side-nav__submenu[aria-expanded="true"] + .bx--side-nav__menu {
|
||||
max-height: 144rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -23,9 +23,18 @@ components: ["Header",
|
|||
---
|
||||
|
||||
<script>
|
||||
import { InlineNotification } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
|
||||
<div class="body-short-01">
|
||||
Currently, the UI Shell is not themable and only supports dark mode.
|
||||
</div>
|
||||
</InlineNotification>
|
||||
|
||||
Open the following examples in a new tab to experience them in full.
|
||||
|
||||
### Header
|
||||
|
||||
<FileSource src="/framed/UIShell/Header" />
|
||||
|
|
|
|||
|
|
@ -4,17 +4,7 @@
|
|||
|
||||
<Grid>
|
||||
<Row>
|
||||
<Column
|
||||
aspectRatio="2x1"
|
||||
style="outline: 1px solid var(--cds-interactive-04)"
|
||||
>
|
||||
2x1
|
||||
</Column>
|
||||
<Column
|
||||
aspectRatio="2x1"
|
||||
style="outline: 1px solid var(--cds-interactive-04)"
|
||||
>
|
||||
2x1
|
||||
</Column>
|
||||
<Column aspectRatio="2x1">2x1</Column>
|
||||
<Column aspectRatio="2x1">2x1</Column>
|
||||
</Row>
|
||||
</Grid>
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@
|
|||
|
||||
<Grid condensed>
|
||||
<Row>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column>Column</Column>
|
||||
<Column>Column</Column>
|
||||
<Column>Column</Column>
|
||||
<Column>Column</Column>
|
||||
</Row>
|
||||
</Grid>
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@
|
|||
|
||||
<Grid fullWidth>
|
||||
<Row>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column>Column</Column>
|
||||
<Column>Column</Column>
|
||||
<Column>Column</Column>
|
||||
<Column>Column</Column>
|
||||
</Row>
|
||||
</Grid>
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@
|
|||
|
||||
<Grid>
|
||||
<Row>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column>Column</Column>
|
||||
<Column>Column</Column>
|
||||
<Column>Column</Column>
|
||||
<Column>Column</Column>
|
||||
</Row>
|
||||
</Grid>
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@
|
|||
|
||||
<Grid narrow>
|
||||
<Row>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column>Column</Column>
|
||||
<Column>Column</Column>
|
||||
<Column>Column</Column>
|
||||
<Column>Column</Column>
|
||||
</Row>
|
||||
</Grid>
|
||||
|
|
|
|||
|
|
@ -4,29 +4,9 @@
|
|||
|
||||
<Grid>
|
||||
<Row>
|
||||
<Column
|
||||
sm="{{ span: 1, offset: 3 }}"
|
||||
style="outline: 1px solid var(--cds-interactive-04)"
|
||||
>
|
||||
Offset 3
|
||||
</Column>
|
||||
<Column
|
||||
sm="{{ span: 2, offset: 2 }}"
|
||||
style="outline: 1px solid var(--cds-interactive-04)"
|
||||
>
|
||||
Offset 2
|
||||
</Column>
|
||||
<Column
|
||||
sm="{{ span: 3, offset: 1 }}"
|
||||
style="outline: 1px solid var(--cds-interactive-04)"
|
||||
>
|
||||
Offset 1
|
||||
</Column>
|
||||
<Column
|
||||
sm="{{ span: 4, offset: 0 }}"
|
||||
style="outline: 1px solid var(--cds-interactive-04)"
|
||||
>
|
||||
Offset 0
|
||||
</Column>
|
||||
<Column sm="{{ span: 1, offset: 3 }}">Offset 3</Column>
|
||||
<Column sm="{{ span: 2, offset: 2 }}">Offset 2</Column>
|
||||
<Column sm="{{ span: 3, offset: 1 }}">Offset 1</Column>
|
||||
<Column sm="{{ span: 4, offset: 0 }}">Offset 0</Column>
|
||||
</Row>
|
||||
</Grid>
|
||||
|
|
|
|||
|
|
@ -2,28 +2,48 @@
|
|||
import { Grid, Row, Column } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<Grid narrow padding>
|
||||
<div>Adding padding to Grid applies it to all child columns:</div>
|
||||
|
||||
<Grid padding>
|
||||
<Row>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column>Column</Column>
|
||||
<Column>Column</Column>
|
||||
<Column>Column</Column>
|
||||
<Column>Column</Column>
|
||||
</Row>
|
||||
</Grid>
|
||||
|
||||
<Grid narrow>
|
||||
<div>Adding padding to a Row only applies its child columns:</div>
|
||||
|
||||
<Grid>
|
||||
<Row padding>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column>Column</Column>
|
||||
<Column>Column</Column>
|
||||
<Column>Column</Column>
|
||||
<Column>Column</Column>
|
||||
</Row>
|
||||
<Row>
|
||||
<Column padding style="outline: 1px solid var(--cds-interactive-04)">
|
||||
Column
|
||||
</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column style="outline: 1px solid var(--cds-interactive-04)">Column</Column>
|
||||
<Column>Column</Column>
|
||||
<Column>Column</Column>
|
||||
<Column>Column</Column>
|
||||
<Column>Column</Column>
|
||||
</Row>
|
||||
</Grid>
|
||||
|
||||
<div>Adding padding to a specific column only applies it to the column:</div>
|
||||
|
||||
<Grid>
|
||||
<Row>
|
||||
<Column padding>Column</Column>
|
||||
<Column>Column</Column>
|
||||
<Column>Column</Column>
|
||||
<Column>Column</Column>
|
||||
</Row>
|
||||
</Grid>
|
||||
|
||||
<style>
|
||||
div {
|
||||
margin-top: var(--cds-spacing-05);
|
||||
padding: var(--cds-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,37 +4,9 @@
|
|||
|
||||
<Grid>
|
||||
<Row>
|
||||
<Column
|
||||
sm="{1}"
|
||||
md="{4}"
|
||||
lg="{8}"
|
||||
style="outline: 1px solid var(--cds-interactive-04)"
|
||||
>
|
||||
sm: 1, md: 4, lg: 8
|
||||
</Column>
|
||||
<Column
|
||||
sm="{1}"
|
||||
md="{2}"
|
||||
lg="{2}"
|
||||
style="outline: 1px solid var(--cds-interactive-04)"
|
||||
>
|
||||
sm: 1, md: 2, lg: 2
|
||||
</Column>
|
||||
<Column
|
||||
sm="{1}"
|
||||
md="{1}"
|
||||
lg="{1}"
|
||||
style="outline: 1px solid var(--cds-interactive-04)"
|
||||
>
|
||||
sm: 1, md: 1, lg: 1
|
||||
</Column>
|
||||
<Column
|
||||
sm="{1}"
|
||||
md="{1}"
|
||||
lg="{1}"
|
||||
style="outline: 1px solid var(--cds-interactive-04)"
|
||||
>
|
||||
sm: 1, md: 1, lg: 1
|
||||
</Column>
|
||||
<Column sm="{1}" md="{4}" lg="{8}">sm: 1, md: 4, lg: 8</Column>
|
||||
<Column sm="{1}" md="{2}" lg="{2}">sm: 1, md: 2, lg: 2</Column>
|
||||
<Column sm="{1}" md="{1}" lg="{1}">sm: 1, md: 1, lg: 1</Column>
|
||||
<Column sm="{1}" md="{1}" lg="{1}">sm: 1, md: 1, lg: 1</Column>
|
||||
</Row>
|
||||
</Grid>
|
||||
|
|
|
|||
|
|
@ -21,4 +21,8 @@
|
|||
width: 100%;
|
||||
padding: var(--cds-spacing-06) var(--cds-spacing-05);
|
||||
}
|
||||
|
||||
:global(.framed [class^="bx--col"]) {
|
||||
outline: 1px solid var(--cds-interactive-04);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -128,20 +128,18 @@ const NODE_ENV = process.env.NODE_ENV || "production";
|
|||
module.exports = {
|
||||
extensions: [".svelte", ".svx"],
|
||||
preprocess: [
|
||||
require("svelte-preprocess")({
|
||||
typescript: false,
|
||||
replace: [
|
||||
["process.env.VERSION", JSON.stringify(pkg.version)],
|
||||
["process.env.NODE_ENV", JSON.stringify(NODE_ENV)],
|
||||
],
|
||||
postcss: {
|
||||
plugins: [
|
||||
require("autoprefixer")({
|
||||
overrideBrowserslist: ["last 1 version", "ie >= 11"],
|
||||
}),
|
||||
],
|
||||
{
|
||||
markup: ({ filename, content }) => {
|
||||
if (/node_modules/.test(filename) || !filename.endsWith(".svelte"))
|
||||
return;
|
||||
return {
|
||||
code: content.replace(
|
||||
/process.env.VERSION/g,
|
||||
JSON.stringify(pkg.version)
|
||||
),
|
||||
};
|
||||
},
|
||||
}),
|
||||
},
|
||||
mdsvex({
|
||||
remarkPlugins: [plugin, slug, carbonify],
|
||||
layout: {
|
||||
|
|
|
|||
1486
docs/yarn.lock
1486
docs/yarn.lock
File diff suppressed because it is too large
Load diff
|
|
@ -1,8 +1,6 @@
|
|||
<script>
|
||||
export let status;
|
||||
export let error;
|
||||
|
||||
const dev = process.env.NODE_ENV === "development";
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
|
|
@ -12,7 +10,3 @@
|
|||
<h1>{status}</h1>
|
||||
|
||||
<p>{error.message}</p>
|
||||
|
||||
{#if dev && error.stack}
|
||||
<pre>{error.stack}</pre>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ services:
|
|||
- type: web
|
||||
name: carbon-components-svelte
|
||||
env: static
|
||||
buildCommand: cd docs; yarn; yarn build
|
||||
buildCommand: yarn; yarn build:css; cd docs; yarn; yarn build
|
||||
staticPublishPath: docs/dist
|
||||
pullRequestPreviewsEnabled: true
|
||||
routes:
|
||||
|
|
|
|||
|
|
@ -2,34 +2,6 @@
|
|||
import { AspectRatio, Tile } from "../types";
|
||||
</script>
|
||||
|
||||
<AspectRatio style="outline: 1px solid var(--cds-interactive-04)">
|
||||
2x1
|
||||
</AspectRatio>
|
||||
|
||||
<AspectRatio ratio="16x9" style="outline: 1px solid var(--cds-interactive-04)">
|
||||
16x9
|
||||
</AspectRatio>
|
||||
|
||||
<AspectRatio ratio="4x3" style="outline: 1px solid var(--cds-interactive-04)">
|
||||
4x3
|
||||
</AspectRatio>
|
||||
|
||||
<AspectRatio ratio="1x1" style="outline: 1px solid var(--cds-interactive-04)">
|
||||
1x1
|
||||
</AspectRatio>
|
||||
|
||||
<AspectRatio ratio="3x4" style="outline: 1px solid var(--cds-interactive-04)">
|
||||
3x4
|
||||
</AspectRatio>
|
||||
|
||||
<AspectRatio ratio="9x16" style="outline: 1px solid var(--cds-interactive-04)">
|
||||
9x16
|
||||
</AspectRatio>
|
||||
|
||||
<AspectRatio ratio="1x2" style="outline: 1px solid var(--cds-interactive-04)">
|
||||
1x2
|
||||
</AspectRatio>
|
||||
|
||||
<AspectRatio ratio="16x9">
|
||||
<Tile style="height: 100%">Content</Tile>
|
||||
</AspectRatio>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue