diff --git a/README.md b/README.md index f176538..c48ad1b 100644 --- a/README.md +++ b/README.md @@ -21,7 +21,7 @@ The `ilw-tabs` component has the following slots: The `ilw-tabs` component has the following attributes: * `theme`: the theme/background of the content. Options are `blue`, `gray`, `white`. Defaults to `white`. -* `width`: whether or not this is contained in the parent (default), if it will expand to full width (`full`), or if just the background will expand and the text will be in a narrow window (`auto`). +* `width`: whether or not this is contained in the parent (default), if it will expand to full width (`full`), or if just the background will expand and the text will be in a narrow window (`auto`), or if it will autosize to a page format (`page`). * `horizontal`: a boolean attribute that determines if the tabs are displayed in a horizontal view. Use this only if you have a few tabs in the list, as this is limited to a single row and may cause text to be truncated or displayed awkwardly. The default is to list the tabs vertically on the left-hand side, and in mobile view, both views will collapse to an accordion-like view. * `default`: the ID of the tab that should be opened on page load. This will default to the first tab. diff --git a/builder/versions/ilw-tabs.1.0-beta.json b/builder/versions/ilw-tabs.1.0-beta.json index 10d87e6..7f24a1a 100644 --- a/builder/versions/ilw-tabs.1.0-beta.json +++ b/builder/versions/ilw-tabs.1.0-beta.json @@ -6,10 +6,10 @@ "element-name": "ilw-tabs", "description": "This is a tab component, where you have a bunch of buttons that trigger new content information inside a fixed area.", "builder-version": "1.0-beta", - "version": "1.0.0-beta", - "date": "09/13/2024", - "css": "https://dev.toolkit.illinois.edu/ilw-tabs/1.0.0-beta/ilw-tabs.css", - "js": "https://dev.toolkit.illinois.edu/ilw-tabs/1.0.0-beta/ilw-tabs.js", + "version": "1.0.1-beta", + "date": "10/09/2024", + "css": "https://dev.toolkit.illinois.edu/ilw-tabs/1.0.1-beta/ilw-tabs.css", + "js": "https://dev.toolkit.illinois.edu/ilw-tabs/1.0.1-beta/ilw-tabs.js", "production": false, "notes": "", "parent-style": "margin: 0 auto; max-width: 1200px;", @@ -43,12 +43,13 @@ }, { "name": "width", - "description": "Width -- constrained to the container (default), full width, or full width but text is constrained", + "description": "Width -- constrained to the container (default), full width, or full width but text is constrained (auto), or text is constrained to the page width (page).", "depreciated": false, "values": [ "", "full", - "auto" + "auto", + "page" ] }, { diff --git a/package.json b/package.json index d620f1c..e315253 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "repository": "github:web-illinois/ilw-tabs", "private": false, "license": "MIT", - "version": "1.0.0-beta", + "version": "1.0.1-beta", "type": "module", "files": [ "src/**", diff --git a/src/ilw-tabs.styles.js b/src/ilw-tabs.styles.js index 14b8e0b..6e7daf5 100644 --- a/src/ilw-tabs.styles.js +++ b/src/ilw-tabs.styles.js @@ -10,7 +10,7 @@ export default css ` padding: 60px 30px 75px; } - #container.white { + #outer.white, #container.white { --ilw-tabs--color: black; --ilw-tabs--button-color: var(--il-blue); --ilw-tabs--button-color--focus: white; @@ -19,7 +19,7 @@ export default css ` --ilw-tabs--selected-button-background: var(--il-orange); --ilw-tabs--button-border: 2px solid var(--il-blue); } - #container.blue { + #outer.blue, #container.blue { --ilw-tabs--color: white; --ilw-tabs--background: var(--il-blue); --ilw-tabs--button-color: white; @@ -56,8 +56,12 @@ export default css ` background: var(--ilw-tabs--background); } - #container.auto { - padding: 60px max(calc(1.875rem), calc(50px - 37.5rem)) 75px; + #outer.page { + background: var(--ilw-tabs--background); + } + + #container.auto, #container.page { + padding: 60px var(--ilw-content--main-margin, 0) 75px; max-width: 1200px; }