diff --git a/components/01-atoms/buttons/_buttons.scss b/components/01-atoms/buttons/_buttons.scss index ce3d943..c36a51d 100644 --- a/components/01-atoms/buttons/_buttons.scss +++ b/components/01-atoms/buttons/_buttons.scss @@ -59,6 +59,29 @@ $button-colors: ( } } +@mixin data_secure { + content: ''; + display: inline-block; + height: 20px; + width: 22px; + margin-bottom: -5px; + background-color: $white; + --webkit-mask: url('../images/icons/oda_external.svg') 50% 50% no-repeat; + mask: url('../images/icons/oda_external.svg') 50% 50% no-repeat; + -webkit-mask-size: cover; + mask-size: cover; +} + +@mixin data_secure_left { + @include data_secure; + margin-right: .5em; +} + +@mixin data_secure_right { + @include data_secure; + margin-left: .5em; +} + @mixin buttonColors( $scheme, $pallate: map-get($button-colors, $scheme), @@ -317,3 +340,11 @@ input[value='Search'] { width: 34px; } } + +.data-secure-left:before { + @include data_secure_left; +} + +.data-secure-right:before { + @include data_secure_right; +} diff --git a/components/04-templates/_default.scss b/components/04-templates/_default.scss index dd3ff74..2265b81 100644 --- a/components/04-templates/_default.scss +++ b/components/04-templates/_default.scss @@ -480,6 +480,12 @@ $main-width: calc(100% - (#{$sidebar-width} + #{$gutter})); border: none; } } + a.button-black:before { + @include data_secure_left; + } + a.button-black:hover:before { + background-color: $black; + } } } @@ -582,17 +588,7 @@ $main-width: calc(100% - (#{$sidebar-width} + #{$gutter})); } .block:first-child a:before { - content: ''; - display: inline-block; - height: 20px; - width: 22px; - margin-right: .5em; - margin-bottom: -5px; - background-color: $white; - --webkit-mask: url('../images/icons/oda_external.svg') 50% 50% no-repeat; - mask: url('../images/icons/oda_external.svg') 50% 50% no-repeat; - -webkit-mask-size: cover; - mask-size: cover; + @include data_secure_left; } .block:first-child, @@ -607,6 +603,10 @@ $main-width: calc(100% - (#{$sidebar-width} + #{$gutter})); .block:nth-child(3) { margin-top: 1rem; } + + .block:last-child { + margin-top: -40px; + } } }