Last active
October 9, 2023 13:07
-
-
Save Esther-Lita/791aeaab38f4f957985674633818e2ff to your computer and use it in GitHub Desktop.
Instagram inspired theme for the Hanko Web Components
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
@import url("https://fonts.googleapis.com/css2?family=Cookie&display=swap"); | |
.hanko_container { | |
background-color: #ffffff; | |
padding: 15px 10px 8px; | |
max-width: 400px; | |
display: flex; | |
flex-direction: column; | |
flex-wrap: nowrap; | |
justify-content: center; | |
align-items: center; | |
align-content: flex-start; | |
box-sizing: border-box; | |
} | |
hanko-profile .hanko_container { | |
max-width: 600px; | |
} | |
.hanko_content { | |
box-sizing: border-box; | |
flex: 0 1 auto; | |
width: 100%; | |
height: 100%; | |
} | |
.hanko_footer { | |
padding: 8px 0; | |
box-sizing: border-box; | |
width: 100%; | |
} | |
.hanko_footer :nth-child(1) { | |
float: left; | |
} | |
.hanko_footer :nth-child(2) { | |
float: right; | |
} | |
.hanko_headline { | |
color: #262626; | |
line-height: 1.5; | |
} | |
.hanko_headline.hanko_grade1 { | |
font-family: "Cookie", cursive; | |
font-size: 48px; | |
margin: 0 5px 20px; | |
} | |
.hanko_headline.hanko_grade2 { | |
font-size: 16px; | |
font-weight: 400px; | |
margin: 15px 6px; | |
} | |
.hanko_form { | |
display: flex; | |
flex-grow: 1; | |
} | |
.hanko_form .hanko_ul { | |
flex-grow: 1; | |
margin: 10px 0; | |
list-style-type: none; | |
display: flex; | |
flex-wrap: wrap; | |
gap: 1em; | |
} | |
.hanko_form .hanko_li { | |
display: flex; | |
max-width: 100%; | |
flex-grow: 1; | |
} | |
.hanko_inputWrapper { | |
flex-grow: 1; | |
position: relative; | |
display: flex; | |
min-width: 220px; | |
max-width: 100%; | |
} | |
.hanko_input { | |
font-weight: 400px; | |
font-size: 16px; | |
border-radius: 3px; | |
border: solid 1px #dbdbdb; | |
height: 36px; | |
color: #8f9095; | |
background: #ffffff; | |
padding: 0 0.5rem; | |
outline: none; | |
width: 100%; | |
box-sizing: border-box; | |
transition: 0.1s ease-out; | |
} | |
.hanko_button { | |
font-weight: 400px; | |
border-radius: 8px; | |
border: solid 1px; | |
white-space: nowrap; | |
width: 100%; | |
height: 36px; | |
outline: none; | |
cursor: pointer; | |
transition: 0.1s ease-out; | |
flex-grow: 1; | |
flex-shrink: 1; | |
} | |
.hanko_button.hanko_primary { | |
color: white; | |
background: #68b5fa; | |
border-color: #68b5fa; | |
font-size: 14px; | |
font-weight: bold; | |
} | |
.hanko_button.hanko_secondary { | |
color: #375185; | |
background: #ffffff; | |
border: none; | |
font-size: 16px; | |
font-weight: bold; | |
} | |
.hanko_icon, | |
.hanko_loadingSpinnerWrapper .hanko_loadingSpinner, | |
.hanko_loadingSpinnerWrapperIcon .hanko_loadingSpinner, | |
.hanko_exclamationMark, | |
.hanko_checkmark { | |
display: inline-block; | |
fill: #375185; | |
width: 18px; | |
margin: 0 8px 5px; | |
} | |
.hanko_icon.hanko_secondary, | |
.hanko_loadingSpinnerWrapper .hanko_secondary.hanko_loadingSpinner, | |
.hanko_loadingSpinnerWrapperIcon .hanko_secondary.hanko_loadingSpinner, | |
.hanko_secondary.hanko_exclamationMark, | |
.hanko_secondary.hanko_checkmark { | |
fill: #375185; | |
} | |
.hanko_paragraph { | |
font-size: 16px; | |
color: #8f9095; | |
margin: 10px 4px; | |
text-align: left; | |
word-break: break-word; | |
} | |
.hanko_accordion { | |
font-weight: 400px; | |
font-size: 16px; | |
width: 100%; | |
overflow: hidden; | |
} | |
.hanko_accordion .hanko_accordionItem { | |
margin: 0.25rem 0; | |
overflow: hidden; | |
} | |
.hanko_accordion .hanko_accordionItem .hanko_label { | |
border-radius: 10px; | |
border-style: none; | |
height: 42px; | |
background: white; | |
box-sizing: border-box; | |
display: flex; | |
align-items: center; | |
justify-content: space-between; | |
padding: 0 1rem; | |
margin: 0; | |
cursor: pointer; | |
transition: all 0.35s; | |
} | |
.hanko_accordion .hanko_accordionItem .hanko_label .hanko_labelText { | |
white-space: nowrap; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
} | |
.hanko_accordion | |
.hanko_accordionItem | |
.hanko_label | |
.hanko_labelText | |
.hanko_description { | |
color: #8f9095; | |
} | |
.hanko_accordion .hanko_accordionItem .hanko_label.hanko_dropdown { | |
color: #68b5fa; | |
justify-content: flex-start; | |
background: white; | |
width: fit-content; | |
} | |
.hanko_accordion .hanko_accordionItem .hanko_label:hover { | |
color: white; | |
background: #68b5fa; | |
} | |
.hanko_accordion .hanko_accordionItem .hanko_label:hover .hanko_description { | |
color: white; | |
} | |
.hanko_accordion .hanko_accordionItem .hanko_label:hover.hanko_dropdown { | |
color: #f48c06; | |
background: none; | |
} | |
.hanko_accordion .hanko_accordionItem .hanko_label:not(.hanko_dropdown)::after { | |
content: "❯"; | |
width: 1rem; | |
text-align: center; | |
transition: all 0.35s; | |
} | |
.hanko_accordion .hanko_accordionItem .hanko_label.hanko_dropdown::before { | |
content: "+"; | |
width: 1em; | |
text-align: center; | |
transition: all 0.35s; | |
} | |
.hanko_accordion .hanko_accordionItem .hanko_accordionInput { | |
position: absolute; | |
opacity: 0; | |
z-index: -1; | |
} | |
.hanko_accordion | |
.hanko_accordionItem | |
.hanko_accordionInput:checked | |
+ .hanko_label { | |
color: white; | |
background: #68b5fa; | |
} | |
.hanko_accordion | |
.hanko_accordionItem | |
.hanko_accordionInput:checked | |
+ .hanko_label | |
.hanko_description { | |
color: white; | |
} | |
.hanko_accordion | |
.hanko_accordionItem | |
.hanko_accordionInput:checked | |
+ .hanko_label.hanko_dropdown { | |
color: white; | |
background: none; | |
} | |
.hanko_accordion | |
.hanko_accordionItem | |
.hanko_accordionInput:checked | |
+ .hanko_label:not(.hanko_dropdown)::after { | |
transform: rotate(90deg); | |
} | |
.hanko_accordion | |
.hanko_accordionItem | |
.hanko_accordionInput:checked | |
+ .hanko_label.hanko_dropdown::before { | |
content: "-"; | |
} | |
.hanko_accordion | |
.hanko_accordionItem | |
.hanko_accordionInput:checked | |
+ .hanko_label | |
~ .hanko_accordionContent { | |
margin: 0.25rem 1rem; | |
opacity: 1; | |
max-height: 100vh; | |
} | |
.hanko_accordion .hanko_accordionItem .hanko_accordionContent { | |
max-height: 0; | |
margin: 0 1rem; | |
opacity: 0; | |
overflow: hidden; | |
transition: all 0.35s; | |
} | |
.hanko_accordion | |
.hanko_accordionItem | |
.hanko_accordionContent.hanko_dropdownContent { | |
border-style: none; | |
} | |
.hanko_link { | |
font-weight: 400px; | |
font-size: 16px; | |
color: #68b5fa; | |
text-decoration: none; | |
cursor: pointer; | |
background: none; | |
border: none; | |
padding: 0; | |
} | |
.hanko_link:hover { | |
text-decoration: underline; | |
} | |
.hanko_link.hanko_disabled { | |
color: #8f9095; | |
pointer-events: none; | |
cursor: default; | |
} | |
.hanko_link.hanko_danger { | |
color: #ff2d4b; | |
} | |
.hanko_linkWrapper { | |
display: inline-flex; | |
flex-direction: row; | |
justify-content: space-between; | |
align-items: center; | |
height: 20px; | |
} | |
.hanko_linkWrapper.hanko_reverse { | |
flex-direction: row-reverse; | |
} | |
.hanko_divider { | |
font-weight: 400px; | |
font-size: 16px; | |
display: flex; | |
visibility: visible; | |
color: #8f9095; | |
margin: 20px 8px; | |
} | |
.hanko_divider .hanko_line { | |
border-bottom: solid 1px; | |
color: #dbdbdb; | |
font: inherit; | |
width: 100%; | |
} | |
.hanko_divider .hanko_text { | |
font: inherit; | |
color: inherit; | |
background: #ffffff; | |
padding: 0 42px; | |
line-height: 0.1em; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment