Created
November 25, 2024 11:38
-
-
Save taher435/741f51ccdf71d399b1d242b984f50287 to your computer and use it in GitHub Desktop.
Sign in with Klarna - Button styling
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
:root{--current-gap: 0px} | |
.klarna-sdk-button-container{ | |
width:335px; | |
height:48px; | |
display:inline-block | |
} | |
#klarna-sdk-button { | |
container-type:inline-size; | |
container-name:sdk-button-content; | |
position:relative; | |
height:inherit; | |
width:inherit; | |
min-width:48px; | |
min-height:35px; | |
max-height:60px; | |
padding:0; | |
outline:none; | |
border:0; | |
margin:0; | |
background-color:rgba(0,0,0,0) | |
} | |
#klarna-sdk-button:focus #klarna-sdk-button__outline { | |
position:absolute; | |
inset:-4px; | |
border:2px solid #0d0e0f; | |
border-radius:8px; | |
min-height:inherit; | |
max-height:64px; | |
margin:auto 0 | |
} | |
#klarna-sdk-button #klarna-sdk-button__inner-container{ | |
display:inline-block; | |
min-height:inherit; | |
max-height:inherit; | |
min-width:inherit; | |
width:inherit; | |
height:inherit; | |
cursor:pointer; | |
transition:background-color .2s ease; | |
box-sizing:border-box; | |
border-radius:8px | |
} | |
#klarna-sdk-button #klarna-sdk-button__inner-container #klarna-sdk-button__text { | |
font-family:"-apple-system","BlinkMacSystemFont","Segoe UI","Roboto","Arial","sans-serif"; | |
height:inherit; | |
font-size:16px; | |
opacity:1; | |
transition:color .2s ease; | |
text-rendering:optimizeLegibility; | |
white-space:nowrap; | |
max-height:inherit; | |
min-height:inherit; | |
position:relative; | |
display:flex; | |
justify-content:center; | |
align-items:center; | |
--current-gap: 14px; | |
gap:6px; | |
margin:0 var(--current-gap) 0 var(--current-gap) | |
} | |
#klarna-sdk-button #klarna-sdk-button__inner-container #klarna-sdk-button__text.hidden{ | |
opacity:0 | |
} | |
#klarna-sdk-button #klarna-sdk-button__inner-container #klarna-sdk-button__text--center{ | |
display:flex; | |
justify-content:center; | |
align-items:center; | |
gap:6px | |
} | |
#klarna-sdk-button #klarna-sdk-button__inner-container #klarna-sdk-button__text #logo{ | |
width:24px; | |
height:24px | |
} | |
#klarna-sdk-button #klarna-sdk-button__inner-container #klarna-sdk-button__text #logo svg{ | |
width:inherit; | |
height:inherit | |
} | |
#klarna-sdk-button #klarna-sdk-button__inner-container #klarna-sdk-button__text #badge{ | |
width:64px; | |
height:28px | |
} | |
#klarna-sdk-button #klarna-sdk-button__inner-container #klarna-sdk-button__text #badge svg{ | |
width:inherit; | |
height:inherit | |
} | |
#klarna-sdk-button #klarna-sdk-button__inner-container #klarna-sdk-button__text #copy{ | |
flex:1 1 0% | |
} | |
#klarna-sdk-button #klarna-sdk-button__inner-container #klarna-sdk-button__text #copy--center{flex:0 1 0%} | |
#klarna-sdk-button #klarna-sdk-button__inner-container #klarna-sdk-button__text #copy--right{ | |
flex:1 1 0%; | |
margin-left: | |
calc(var(--current-gap) + 20px) | |
} | |
.hideLogo{display:none} | |
@container sdk-button-content (width > 199px){} | |
@container sdk-button-content (width < 200px){ | |
#klarna-sdk-button #copy{display:none} | |
#klarna-sdk-button #badge{display:inline-block} | |
#klarna-sdk-button #logo{display:none} | |
} | |
@container sdk-button-content (width < 80px){ | |
#klarna-sdk-button{gap:0} | |
#klarna-sdk-button #logo{display:inline-block} | |
#klarna-sdk-button #badge{display:none} | |
#klarna-sdk-button #copy{display:none} | |
#klarna-sdk-button #klarna-sdk-button__text--center #logo{margin:0} | |
#klarna-sdk-button #klarna-sdk-button__text--center #badge{margin:0} | |
} | |
#klarna-sdk-button.theme-outlined #klarna-sdk-button__inner-container{color:#0e0e0f;background-color:#fff;border:1px solid #0e0e0f} | |
#klarna-sdk-button.theme-outlined #klarna-sdk-button__inner-container #klarna-sdk-button__text #logo svg{fill:#0e0e0f} | |
#klarna-sdk-button.theme-outlined:hover #klarna-sdk-button__inner-container{background-color:#f1f1f1;color:#333536} | |
#klarna-sdk-button.theme-outlined:hover #klarna-sdk-button__inner-container #klarna-sdk-button__text #logo svg{fill:#333536} | |
#klarna-sdk-button.theme-outlined:focus #klarna-sdk-button__outline{inset:-5px} | |
#klarna-sdk-button.theme-outlined:focus #klarna-sdk-button__outline #klarna-sdk-button__text #logo svg{fill:#0d0e0f} | |
#klarna-sdk-button.theme-outlined:active #klarna-sdk-button__inner-container{background-color:#e2e2e2;color:#0d0e0f} | |
#klarna-sdk-button.theme-light #klarna-sdk-button__inner-container{color:#0e0e0f;background-color:#fff} | |
#klarna-sdk-button.theme-light #klarna-sdk-button__inner-container #klarna-sdk-button__text #logo svg{fill:#0e0e0f} | |
#klarna-sdk-button.theme-light:hover #klarna-sdk-button__inner-container{background-color:#f1f1f1;color:#333536} | |
#klarna-sdk-button.theme-light:hover #klarna-sdk-button__inner-container #klarna-sdk-button__text #logo svg{fill:#333536} | |
#klarna-sdk-button.theme-light:focus #klarna-sdk-button__outline{inset:-5px} | |
#klarna-sdk-button.theme-light:focus #klarna-sdk-button__outline #klarna-sdk-button__text #logo svg{fill:#0d0e0f} | |
#klarna-sdk-button.theme-light:active #klarna-sign-in__inner-container{background-color:#e2e2e2;color:#0d0e0f} | |
#klarna-sdk-button.theme-dark #klarna-sdk-button__inner-container{color:#fff;background-color:#0e0e0f;border:none} | |
#klarna-sdk-button.theme-dark #klarna-sdk-button__inner-container #klarna-sdk-button__text #logo svg{fill:#fff} | |
#klarna-sdk-button.theme-dark:hover #klarna-sdk-button__inner-container{background-color:#333536;color:#f1f1f1} | |
#klarna-sdk-button.theme-dark:hover #klarna-sdk-button__inner-container #klarna-sdk-button__text #logo svg{fill:#f1f1f1} | |
#klarna-sdk-button.theme-dark:active #klarna-sdk-button__inner-container{background-color:#0d0e0f;color:#e2e2e2} | |
#klarna-sdk-button.theme-dark:active #klarna-sdk-button__inner-container #klarna-sdk-button__text #logo svg{fill:#e2e2e2} | |
#klarna-sdk-button.shape-rect #klarna-sdk-button__inner-container{border-radius:0} | |
#klarna-sdk-button.shape-rect:focus #klarna-sdk-button__outline{border-radius:0} | |
#klarna-sdk-button.shape-pill #klarna-sdk-button__inner-container{border-radius:60px} | |
#klarna-sdk-button.shape-pill:focus #klarna-sdk-button__outline{border-radius:60px} | |
#klarna-sdk-button.copy-default-en{min-width:165px} | |
#klarna-sdk-button__spinner{ | |
width:24px; | |
height:24px; | |
border:2px solid; | |
border-bottom-color:rgba(0,0,0,0); | |
border-radius:50%; | |
display:inline-block; | |
box-sizing:border-box; | |
animation:rotation 1s linear infinite; | |
position:absolute;top:calc(50% - 12px); | |
right:calc(50% - 12px); | |
pointer-events:none | |
} | |
.theme-outlined #klarna-sdk-button__spinner{ | |
border-color:#0e0e0f; | |
border-bottom-color:#fff | |
} | |
.theme-dark #klarna-sdk-button__spinner{ | |
border-color:#fff; | |
border-bottom-color:#0e0e0f | |
} | |
@keyframes rotation{ | |
0%{transform:rotate(0deg)} | |
100%{transform:rotate(360deg)} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment