diff --git a/src/app/core/components/cookie-banner/cookie-banner.component.html b/src/app/core/components/cookie-banner/cookie-banner.component.html index 9986bc7dcfc4007b91f96208d0bbb9bb68f206c1..13467410fef9fa99c91b243ecbc3b8fee750e03d 100644 --- a/src/app/core/components/cookie-banner/cookie-banner.component.html +++ b/src/app/core/components/cookie-banner/cookie-banner.component.html @@ -48,9 +48,6 @@ <p i18n="@@cookieModal.tab1title">Why do we use cookies?</p> </div> <div class="tab" (click)='toggleTab(1)' [ngClass]="{'tab-active' : tab === 1}"> - <svg class="circle" width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg"> - <circle cx="5.5" cy="5.5" r="5.5" fill="#3C8225" /> - </svg> <p i18n="@@cookieModal.tab2title">Necessary cookies</p> </div> </div> diff --git a/src/app/core/components/cookie-banner/cookie-banner.component.scss b/src/app/core/components/cookie-banner/cookie-banner.component.scss index 423dd8c69d28d47918b424c21ae74dc6b7ce7e47..8eae3a3cc1922eca8008a6904082ef8961d67934 100644 --- a/src/app/core/components/cookie-banner/cookie-banner.component.scss +++ b/src/app/core/components/cookie-banner/cookie-banner.component.scss @@ -110,13 +110,15 @@ .box { width: 100%; max-width: 600px; - min-height: 360px; + min-height: 400px; background: #FFFFFF; box-shadow: 0px 4px 28px rgba(0, 0, 0, 0.55); position: relative; @media screen and(max-width: $tablet) { - margin: 95%; + width: calc(100% - 50px); + height: 450px; + max-width: unset; } .title { @@ -139,7 +141,7 @@ .content { display: flex; - height: 100%; + height: calc(450px - 53px); // minus the height of the popup header @media screen and(max-width: $tablet) { flex-direction: column; @@ -152,6 +154,7 @@ @media screen and(max-width: $tablet) { width: 100%; + display: flex; } .tab { @@ -160,6 +163,14 @@ border-bottom: 1px solid #B4B4B4; position: relative; + @media screen and(max-width: $tablet) { + width: 50%; + + &:not(:last-of-type) { + border-right: 1px solid $grey-super-light-color; + } + } + p { display: inline-block; } @@ -173,15 +184,32 @@ .tab-active { background: white; - //remove border - &:after { - content: ''; - height: 100%; - width: 2px; - position: absolute; - right: -2px; - top: 0; - background: white; + @media screen and(max-width: $tablet) { + + //remove border + &:after { + content: ''; + height: 2px; + width: 100%; + position: absolute; + bottom: -2px; + left: 0; + background: white; + } + } + + @media screen and(min-width: $tablet) { + + //remove border + &:after { + content: ''; + height: 100%; + width: 2px; + position: absolute; + right: -2px; + top: 0; + background: white; + } } } } @@ -191,6 +219,7 @@ border-left: 1px solid #B4B4B4; padding: 1.3rem 1rem; background-color: #fff; + overflow: auto; @media screen and(max-width: $tablet) { width: 100%;