Skip to content

Instantly share code, notes, and snippets.

@taher435
Created November 25, 2024 11:38
Show Gist options
  • Save taher435/741f51ccdf71d399b1d242b984f50287 to your computer and use it in GitHub Desktop.
Save taher435/741f51ccdf71d399b1d242b984f50287 to your computer and use it in GitHub Desktop.
Sign in with Klarna - Button styling
: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