diff --git a/packages/component-dashboard/src/components/sections/Item.local.scss b/packages/component-dashboard/src/components/sections/Item.local.scss index d80e49421cbfccfadbcadb3a706fb16bab70ede8..493083c404e63106e4e7b5fea44abc85f740c30a 100644 --- a/packages/component-dashboard/src/components/sections/Item.local.scss +++ b/packages/component-dashboard/src/components/sections/Item.local.scss @@ -1,24 +1,31 @@ .root { - margin-bottom: 20px; + margin-bottom: 4em; } .main { - align-items: bottom; + align-items: flex-end; display: flex; - justify-content: flex-start; + justify-content: flex-end; + margin-bottom: 0; + padding-left: 1.5em; } -.main, -.reviews, -.roles { +.reviews { + display: inline-flex; + font-size: 0.9em; + justify-content: flex-end; + margin-bottom: 0.6em; + margin-top: 0.3em; padding-left: 1.5em; } .roles { display: flex; font-size: 0.8em; + margin-bottom: 0.6em; margin-left: 0.5em; - margin-top: 1em; + margin-top: 0; + padding-left: 1.5em; text-transform: uppercase; } @@ -26,34 +33,57 @@ margin-right: 3em; } -// double class name to avoid clash with Viewer .root -// .title.title { .versionTitle { flex: 1; - font-family: Vollkorn, serif; + font-family: var(--font-author), serif; font-size: 1.6em; font-weight: 500; - margin-top: 0.2em; + margin-bottom: 0.2em; + margin-top: 0; overflow: hidden; padding-right: 0.4em; +} - > span { - background: white; - display: inline; - padding-right: 0.3em; - } - - &::after { - color: lightgrey; - content: ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . "". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . "". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . "". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . "". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . "". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . "; - float: left; - font-size: 0.8em; - font-weight: 400; - padding-top: 0.25em; - vertical-align: baseline; - white-space: nowrap; - width: 0; - } +.versionTitle > span { + background: white; + display: inline; + margin-right: 0.3em; +} + +.versionTitle::after { + color: lightgrey; + content: + '. . . . . . . . . . . . . . . . . . . . ' + '. . . . . . . . . . . . . . . . . . . . ' + '. . . . . . . . . . . . . . . . . . . . ' + '. . . . . . . . . . . . . . . . . . . . ' + '. . . . . . . . . . . . . . . . . . . . ' + '. . . . . . . . . . . . . . . . . . . . ' + '. . . . . . . . . . . . . . . . . . . . ' + '. . . . . . . . . . . . . . . . . . . . ' + '. . . . . . . . . . . . . . . . . . . . ' + '. . . . . . . . . . . . . . . . . . . . ' + '. . . . . . . . . . . . . . . . . . . . ' + '. . . . . . . . . . . . . . . . . . . . ' + '. . . . . . . . . . . . . . . . . . . . ' + '. . . . . . . . . . . . . . . . . . . . ' + '. . . . . . . . . . . . . . . . . . . . ' + '. . . . . . . . . . . . . . . . . . . . ' + '. . . . . . . . . . . . . . . . . . . . ' + '. . . . . . . . . . . . . . . . . . . . ' + '. . . . . . . . . . . . . . . . . . . . ' + '. . . . . . . . . . . . . . . . . . . . ' + '. . . . . . . . . . . . . . . . . . . . ' + '. . . . . . . . . . . . . . . . . . . . ' + '. . . . . . . . . . . . . . . . . . . . ' + '. . . . . . . . . . . . . . . . . . . . '; + float: left; + font-size: 0.8em; + font-weight: 400; + padding-top: 0.25em; + vertical-align: baseline; + white-space: nowrap; + width: 0; } .header { @@ -73,49 +103,52 @@ } .links { - align-self: flex-end; + align-items: flex-end; display: flex; + justify-content: bottom; + padding-bottom: 0.65em; padding-right: 0; } .link { color: var(--color-primary); cursor: pointer; - display: inline-block; + display: inline-flex; font-size: 0.9em; font-style: italic; - padding: 0 0.3em; - padding-bottom: 0.3em; vertical-align: bottom; +} - &:last-child { - margin-right: 0; - } - - & a:hover { - border-bottom: 2px solid var(--color-primary); - } +.link:last-child { + margin-right: 0; } -.action { - display: inline-block; +.link a { + border-bottom: 2px solid transparent; + color: currentcolor; + font-style: inherit; + font-weight: inherit; + margin-right: 0; + text-decoration: none; } -.action button { - background: none; - border: none; - cursor: pointer; - text-transform: none; +.link a:hover { + border-bottom: 2px solid var(--color-primary); } -.reviews { - display: inline-flex; - justify-content: flex-end; - margin-bottom: 10px; - margin-top: 10px; +.action { + display: inline-block; } .editors { display: inline-flex; justify-content: flex-start; } + +.status { + color: grey; + font-style: italic; + margin-bottom: 0.7em; + margin-top: 0; + padding-left: 0.2em; +} diff --git a/yarn.lock b/yarn.lock index 08ac180ba66320498d4fb284bc0f80292eb9e996..45153ba3ddae739ac8b836a94610161191eee779 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7557,7 +7557,7 @@ prompt@^1.0.0: utile "0.3.x" winston "2.1.x" -"prompt@github:flatiron/prompt#1c95d1d8d333b5fbc13fa5f0619f3dcf0d514f87": +prompt@flatiron/prompt#1c95d1d8d333b5fbc13fa5f0619f3dcf0d514f87: version "1.0.0" resolved "https://codeload.github.com/flatiron/prompt/tar.gz/1c95d1d8d333b5fbc13fa5f0619f3dcf0d514f87" dependencies: