diff --git a/lib/bundle.css b/lib/bundle.css index 34dada9f..e44fda65 100644 --- a/lib/bundle.css +++ b/lib/bundle.css @@ -217,12 +217,14 @@ a { cursor: pointer; } .ssb-btn:hover, .ssb-btn:focus { - outline: #9272fc solid 2px; - outline-offset: 2px; background: #00824d; color: #fff; text-decoration: underline; } +.ssb-btn:focus { + outline: #9272fc solid 2px; + outline-offset: 2px; +} .ssb-btn:active { background: #274247; border: 2px solid #274247; @@ -335,15 +337,15 @@ a { .ssb-btn-tertiary .button-header .header-text { color: #162327; } -.ssb-btn-tertiary .button-header:hover, .ssb-btn-tertiary .button-header:focus { - outline: #9272fc solid 2px; - outline-offset: 2px; -} .ssb-btn-tertiary .button-header:hover .header-text, .ssb-btn-tertiary .button-header:focus .header-text { color: #00824d; text-decoration: underline; text-underline-position: under; } +.ssb-btn-tertiary .button-header:focus { + outline: #9272fc solid 2px; + outline-offset: 2px; +} .ssb-btn-tertiary .button-header.no-icon { text-decoration: underline; text-underline-position: under; @@ -1240,8 +1242,6 @@ a { vertical-align: top; } .ssb-glossary .glossary-button:hover, .ssb-glossary .glossary-button:focus { - outline: #9272fc solid 2px; - outline-offset: 2px; background-position: left bottom; } .ssb-glossary .glossary-button:hover .glossary-logo, .ssb-glossary .glossary-button:focus .glossary-logo { @@ -1250,6 +1250,10 @@ a { .ssb-glossary .glossary-button:hover .glossary-text-wrap, .ssb-glossary .glossary-button:focus .glossary-text-wrap { border-bottom: none; } +.ssb-glossary .glossary-button:focus { + outline: #9272fc solid 2px; + outline-offset: 2px; +} .ssb-glossary .glossary-popup { font-family: "Open Sans", sans-serif !important; font-stretch: normal; @@ -2513,8 +2517,6 @@ a { margin-top: 4px; } .ssb-table-link:hover, .ssb-table-link:focus { - outline: #9272fc solid 2px; - outline-offset: 2px; text-decoration: none; } .ssb-table-link:hover .tl-icon, .ssb-table-link:focus .tl-icon { @@ -2528,6 +2530,10 @@ a { .ssb-table-link:hover .tl-description, .ssb-table-link:focus .tl-description { color: #00824d; } +.ssb-table-link:focus { + outline: #9272fc solid 2px; + outline-offset: 2px; +} .ssb-tabs { display: flex; @@ -2626,11 +2632,13 @@ a { cursor: pointer; } .ssb-tag:hover, .ssb-tag:focus { - outline: #9272fc solid 2px; - outline-offset: 2px; background: #00824d; color: #fff; } +.ssb-tag:focus { + outline: #9272fc solid 2px; + outline-offset: 2px; +} .ssb-tag:active { background: #274247; border: 2px solid #274247; diff --git a/package-lock.json b/package-lock.json index a2713e86..3eed215e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@statisticsnorway/ssb-component-library", - "version": "2.2.16", + "version": "2.3.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@statisticsnorway/ssb-component-library", - "version": "2.2.16", + "version": "2.3.1", "license": "Apache-2.0", "dependencies": { "prismjs": "~1.29.0", diff --git a/package.json b/package.json index aca75700..b4c0ce16 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@statisticsnorway/ssb-component-library", - "version": "2.3.1", + "version": "2.3.2", "description": "Component library for SSB (Statistics Norway)", "main": "lib/bundle.js", "scripts": { @@ -130,4 +130,4 @@ "name": "Carina G. Nordseth" } ] -} +} \ No newline at end of file diff --git a/src/components/Button/_button.scss b/src/components/Button/_button.scss index 2aea9ec1..727b6a89 100644 --- a/src/components/Button/_button.scss +++ b/src/components/Button/_button.scss @@ -27,12 +27,15 @@ &:hover, &:focus { - @include focus-ring; background: $ssb-green-4; color: $ssb-white; text-decoration: underline; } + &:focus { + @include focus-ring; + } + &:active { background: $ssb-dark-5; border: 2px solid $ssb-dark-5; @@ -133,4 +136,4 @@ font-size: 18px; margin-right: 5px; } -} +} \ No newline at end of file diff --git a/src/components/ButtonTertiary/_buttonTertiary.scss b/src/components/ButtonTertiary/_buttonTertiary.scss index 09fbc643..c35e6eb6 100644 --- a/src/components/ButtonTertiary/_buttonTertiary.scss +++ b/src/components/ButtonTertiary/_buttonTertiary.scss @@ -28,8 +28,6 @@ &:hover, &:focus { - @include focus-ring; - .header-text { color: $ssb-green-4; text-decoration: underline; @@ -37,6 +35,10 @@ } } + &:focus { + @include focus-ring; + } + &.no-icon { text-decoration: underline; text-underline-position: under; @@ -116,4 +118,4 @@ color: $ssb-white; } } -} +} \ No newline at end of file diff --git a/src/components/Glossary/_glossary.scss b/src/components/Glossary/_glossary.scss index b4618f84..a37f7570 100644 --- a/src/components/Glossary/_glossary.scss +++ b/src/components/Glossary/_glossary.scss @@ -25,7 +25,6 @@ &:hover, &:focus { - @include focus-ring; background-position: left bottom; .glossary-logo { @@ -36,6 +35,10 @@ border-bottom: none; } } + + &:focus { + @include focus-ring; + } } .glossary-popup { @@ -112,4 +115,4 @@ } } } -} +} \ No newline at end of file diff --git a/src/components/TableLink/_tableLink.scss b/src/components/TableLink/_tableLink.scss index 7195bac0..5ca804a8 100644 --- a/src/components/TableLink/_tableLink.scss +++ b/src/components/TableLink/_tableLink.scss @@ -37,7 +37,6 @@ &:hover, &:focus { - @include focus-ring; text-decoration: none; .tl-icon { @@ -53,4 +52,8 @@ color: $ssb-green-4; } } -} + + &:focus { + @include focus-ring; + } +} \ No newline at end of file diff --git a/src/components/Tag/_tag.scss b/src/components/Tag/_tag.scss index d0fdd000..c8004afc 100644 --- a/src/components/Tag/_tag.scss +++ b/src/components/Tag/_tag.scss @@ -26,11 +26,14 @@ &:hover, &:focus { - @include focus-ring; background: $ssb-green-4; color: $ssb-white; } + &:focus { + @include focus-ring; + } + &:active { background: $ssb-dark-5; border: 2px solid $ssb-dark-5; @@ -42,4 +45,4 @@ font-size: 18px; margin-right: 5px; } -} +} \ No newline at end of file