diff --git a/builder/versions/ilw-card.1.0.0-alpha.json b/builder/versions/ilw-card.1.0.0-alpha.json index 450e3fe..7e11cbc 100644 --- a/builder/versions/ilw-card.1.0.0-alpha.json +++ b/builder/versions/ilw-card.1.0.0-alpha.json @@ -11,7 +11,7 @@ "js": "https://dev.toolkit.illinois.edu/ilw-card/1.0.0-alpha/ilw-card.js", "production": false, "notes": "", - "parent-style": "", + "parent-style": "margin: 0 auto; max-width: 400px; padding: 15px;", "samples": [ { "name": "default", diff --git a/src/ilw-card.css b/src/ilw-card.css index cfc59f9..e0c4d76 100644 --- a/src/ilw-card.css +++ b/src/ilw-card.css @@ -164,16 +164,37 @@ --ilw-button--background-color: var(--il-orange); } } +} + +ilw-card { + border: 1px solid var(--ilw-card--border-color); + background: var(--ilw-card--background); + margin-top: var(--ilw-card--margin-top); + margin-bottom: var(--ilw-card--margin-bottom); + color: var(--ilw-card--text-color); - ilw-card { - border: 1px solid var(--ilw-card--border-color); - background: var(--ilw-card--background); - margin-top: var(--ilw-card--margin-top); - margin-bottom: var(--ilw-card--margin-bottom); - color: var(--ilw-card--text-color); + &[align="center"] { + text-align: center; + } - &[align="center"] { - text-align: center; + & > h2, + & > h3, + & > h4, + & > h5, + & > h6 { + color: var(--ilw-card--heading-color); + + &:first-of-type { + margin-top: 0; + } + } + + &[clickable] { + border-bottom: 4px solid var(--ilw-card--clickable--border); + cursor: pointer; + + a { + color: var(--ilw-card--clickable--link); } & > h2, @@ -181,19 +202,36 @@ & > h4, & > h5, & > h6 { - color: var(--ilw-card--heading-color); - - &:first-of-type { - margin-top: 0; + a { + color: var(--ilw-card--clickable--heading-color); + text-decoration: none; + display: inline-block; + padding-right: 1.5em; + position: relative; + vertical-align: middle; + + &::after { + content: "\00BB"; + display: block; + position: absolute; + right: 0; + font-size: 2em; + height: 0.5em; + overflow: hidden; + line-height: 0.5; + top: calc(50% - 0.25em - 2px); + font-weight: normal; + } } } - &[clickable] { - border-bottom: 4px solid var(--ilw-card--clickable--border); - cursor: pointer; + &:hover { + border-bottom-color: var(--ilw-card--hover--clickable-border); + background: var(--ilw-card--hover--background); + color: var(--ilw-card--hover--text-color); a { - color: var(--ilw-card--clickable--link); + color: var(--ilw-card--hover--link); } & > h2, @@ -202,45 +240,7 @@ & > h5, & > h6 { a { - color: var(--ilw-card--clickable--heading-color); - text-decoration: none; - display: inline-block; - padding-right: 1.5em; - position: relative; - vertical-align: middle; - - &::after { - content: "\00BB"; - display: block; - position: absolute; - right: 0; - font-size: 2em; - height: 0.5em; - overflow: hidden; - line-height: 0.5; - top: calc(50% - 0.25em - 2px); - font-weight: normal; - } - } - } - - &:hover { - border-bottom-color: var(--ilw-card--hover--clickable-border); - background: var(--ilw-card--hover--background); - color: var(--ilw-card--hover--text-color); - - a { - color: var(--ilw-card--hover--link); - } - - & > h2, - & > h3, - & > h4, - & > h5, - & > h6 { - a { - color: var(--ilw-card--hover--heading-color); - } + color: var(--ilw-card--hover--heading-color); } } }