From de038141095a067eeae104af51921b97090fa1a1 Mon Sep 17 00:00:00 2001 From: "Nordseth, Carina" Date: Thu, 30 Jan 2020 13:28:00 +0100 Subject: [PATCH] New version --- lib/bundle.css | 222 +++++++++++++++++++++++++++++++--------------- package-lock.json | 2 +- package.json | 2 +- 3 files changed, 154 insertions(+), 72 deletions(-) diff --git a/lib/bundle.css b/lib/bundle.css index 6e6aad8f..e6a0c8b8 100644 --- a/lib/bundle.css +++ b/lib/bundle.css @@ -237,77 +237,159 @@ a { font-size: 18px; margin-right: 5px; } -.ssb-card .clickable { - background-color: transparent; - border: none; - color: inherit; - cursor: pointer; - font-family: inherit; - font-size: inherit; - line-height: inherit; - padding: 0; - text-align: left; } - .ssb-card .clickable:focus { - outline: #9272fc solid 2px; - outline-offset: 2px; } - .ssb-card .clickable img { - height: 214px; - width: 380px; } - .ssb-card .clickable.left-orientation { - display: flex; - flex-direction: row; } - .ssb-card .clickable.left-orientation .card-content { - height: 214px; } - .ssb-card .clickable.top-orientation { - display: flex; - flex-direction: column; } - .ssb-card .clickable:hover .card-content { - border: 1px solid #1a9d49; } - .ssb-card .clickable:hover .card-content:not(.with-image) { - border-top: 5px solid #1a9d49; } - -.ssb-card .card-content { - background: #fff; - border: 1px solid #c3dcdc; - border-top: 5px solid #1a9d49; - box-sizing: border-box; - cursor: pointer; - display: inline-block; - flex-direction: column; - max-width: 380px; - min-width: 250px; - padding: 20px; - width: 100%; } - .ssb-card .card-content.centered { - align-items: center; - display: inline-flex; - text-align: center; } - .ssb-card .card-content.with-image { - border-top: 1px solid #c3dcdc; } - -.ssb-card .download-section { - font-family: 'Open Sans', sans-serif !important; +.ssb-card { + font-family: 'Roboto', sans-serif !important; font-stretch: normal; - font-weight: normal; - align-items: center; - border: 1px solid #c3dcdc; - cursor: pointer; - display: flex; - height: 60px; - max-width: 380px; - text-decoration: none; } - .ssb-card .download-section:focus { - outline: #9272fc solid 2px; - outline-offset: 2px; } - .ssb-card .download-section:hover { - border: 1px solid #1a9d49; } - .ssb-card .download-section .download-icon { - color: #00824d; - font-size: 20px; - margin: 0 18px; } - .ssb-card .download-section span { - color: #162327; - font-size: 16px; } + font-weight: normal; } + .ssb-card .clickable { + background-color: transparent; + border: none; + color: inherit; + cursor: pointer; + font-family: inherit; + font-size: inherit; + line-height: inherit; + padding: 0; + text-align: left; } + .ssb-card .clickable:focus { + outline: #9272fc solid 2px; + outline-offset: 2px; } + .ssb-card .clickable .card-image { + display: flex; } + .ssb-card .clickable .card-image img { + height: 214px; + width: 380px; } + .ssb-card .clickable.left-orientation { + display: flex; + flex-direction: row; } + .ssb-card .clickable.left-orientation .card-content { + height: 214px; + width: 100%; } + @media screen and (max-width: 767px) { + .ssb-card .clickable.left-orientation { + flex-direction: column; } + .ssb-card .clickable.left-orientation .card-content { + max-width: 380px; } } + .ssb-card .clickable.top-orientation { + display: flex; + flex-direction: column; } + .ssb-card .clickable.top-orientation .card-content { + max-width: 380px; } + .ssb-card .clickable:hover.left-orientation .card-content { + border-left: 5px solid #00824d; } + @media screen and (max-width: 767px) { + .ssb-card .clickable:hover.left-orientation .card-content { + border-left: 1px solid #00824d; + border-top: 5px solid #00824d; } } + .ssb-card .clickable:hover.top-orientation .card-content { + border-top: 5px solid #00824d; } + .ssb-card .clickable:hover .card-content { + border: 1px solid #00824d; } + .ssb-card .clickable:hover .card-content:not(.with-image) { + border-top: 5px solid #00824d; } + .ssb-card .clickable:hover .card-content.with-image .card-title { + background-color: #00824d; + border-bottom: none; + color: #fff; + padding: 1px 2px; } + .ssb-card .clickable:hover .card-content .arrow-icon { + border: 2px solid #00824d; + border-radius: 50%; + padding: 2px; } + .ssb-card .clickable:hover .card-content .card-action { + align-items: center; + background-color: #00824d; + display: flex; + padding: 5px; + width: fit-content; } + .ssb-card .clickable:hover .card-content .card-action .arrow-icon { + border: none; + color: #fff; } + .ssb-card .clickable:hover .card-content .card-action .href-text { + color: #fff; } + .ssb-card .card-content { + background: #fff; + border: 1px solid #c3dcdc; + border-top: 5px solid #1a9d49; + box-sizing: border-box; + cursor: pointer; + display: inline-block; + flex-direction: column; + padding: 20px; + width: 100%; } + .ssb-card .card-content.with-image { + border-top: 1px solid #c3dcdc; } + .ssb-card .card-content.with-image .card-title { + border-bottom: 2px solid #00824d; + display: table; } + .ssb-card .card-content.profiled { + align-items: center; + display: inline-flex; + text-align: center; } + .ssb-card .card-content.profiled .card-title { + font-size: 28px; } + .ssb-card .card-content.profiled .card-icon { + margin-bottom: 20px; + max-height: 132px; + max-width: 132px; + width: 132px; } + .ssb-card .card-content .arrow-icon { + color: #00824d; + display: block; + margin-top: 16px; } + .ssb-card .card-content .card-action { + font-family: 'Open Sans', sans-serif !important; + font-stretch: normal; + font-weight: normal; + align-items: center; + display: flex; + margin-top: 16px; } + .ssb-card .card-content .card-action .arrow-icon { + margin-top: 0; + margin-right: 5px; + padding-left: 0; } + .ssb-card .card-content .card-action .href-text { + color: #162327; + font-size: 16px; + font-weight: bold; } + .ssb-card .card-content .card-icon { + margin-bottom: 16px; + max-height: 28px; + max-width: 28px; + width: 28px; } + .ssb-card .card-content .card-subtitle { + font-family: 'Open Sans', sans-serif !important; + font-stretch: normal; + font-weight: normal; + font-size: 14px; + margin-bottom: 8px; } + .ssb-card .card-content .card-title { + display: block; + font-size: 20px; + font-weight: bold; + margin-bottom: 8px; } + .ssb-card .download-section { + font-family: 'Open Sans', sans-serif !important; + font-stretch: normal; + font-weight: normal; + align-items: center; + border: 1px solid #c3dcdc; + cursor: pointer; + display: flex; + height: 60px; + max-width: 380px; + text-decoration: none; } + .ssb-card .download-section:focus { + outline: #9272fc solid 2px; + outline-offset: 2px; } + .ssb-card .download-section:hover { + border: 1px solid #1a9d49; } + .ssb-card .download-section .download-icon { + color: #00824d; + margin: 0 18px; } + .ssb-card .download-section span { + color: #162327; + font-size: 16px; } .ssb-checkbox { font-family: 'Roboto', sans-serif !important; diff --git a/package-lock.json b/package-lock.json index be62421d..d07ddb9b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@statisticsnorway/ssb-component-library", - "version": "2.0.1", + "version": "2.0.2", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 4a9c7131..38defe48 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@statisticsnorway/ssb-component-library", - "version": "2.0.1", + "version": "2.0.2", "description": "Component library for SSB (Statistics Norway)", "main": "lib/bundle.js", "scripts": {