The "molecules" of a design system, following the principle of Brad Frost's Atomic Design.
Created
September 27, 2022 12:02
-
-
Save LaunchedBerry07/6ef4af58cc22363d6eecf70dc513f59d to your computer and use it in GitHub Desktop.
CSS Grid: Style Guide II
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
input#bluepurple.variation(type="radio" value="1" name="color" checked) | |
label(for="bluepurple") | |
input#sunset.variation(type="radio" value="2" name="color") | |
label(for="sunset") | |
input#godiva.variation(type="radio" value="3" name="color") | |
label(for="godiva") | |
input#dark.variation(type="radio" value="4" name="color") | |
label(for="dark") | |
input#pinkaru.variation(type="radio" value="5" name="color") | |
label(for="pinkaru") | |
main | |
section.forms | |
h6 Form | |
h1 Login for more aww-someness. | |
form.form-login | |
.input__wrapper | |
label.label-form Email | |
input.input-form(type="text" placeholder="email@email.com") | |
.input__wrapper | |
label.label-form Password | |
input.input-form(type="password" placeholder="Password (At least 8 characters)") | |
.checkbox | |
input(id="checkbox-rem" type="checkbox") | |
label(for="checkbox-rem") Remember Me | |
span.box | |
a.button#login Login | |
.spinner__wrapper | |
.spinner-1 | |
.spinner(data-loading="Loading...") | |
label Logging you in... | |
section.filter-section | |
h6 Filters | |
.filters | |
h5.filters__title Dog Type | |
.filters__item | |
.checkbox | |
input#checkbox-1(type="checkbox") | |
label(for="checkbox-1") Puppy | |
span.box | |
.tooltip.top(data-tooltip="Younger than 18 months.") | |
span | |
i.icon-info | |
span.badge.status-primary 10 | |
.filters__item | |
.checkbox | |
input#checkbox-2(type="checkbox" checked) | |
label(for="checkbox-2") Young | |
span.box | |
span.badge.status-primary 5 | |
.filters__item | |
.checkbox | |
input#checkbox-3(type="checkbox") | |
label(for="checkbox-3") Adult | |
span.box | |
span.badge.status-primary 20 | |
.filters__item | |
.checkbox | |
input#checkbox-4(type="checkbox") | |
label(for="checkbox-4") Senior | |
span.box | |
span.badge.status-primary 8 | |
.filters | |
h5.filters__title Dog Size | |
.filters__item | |
.checkbox | |
input#checkbox-5(type="checkbox") | |
label(for="checkbox-5") Small | |
span.box | |
span.badge.status-primary 9 | |
.filters__item | |
.checkbox | |
input#checkbox-6(type="checkbox" checked) | |
label(for="checkbox-6") Medium | |
span.box | |
span.badge.status-primary 12 | |
.filters__item | |
.checkbox | |
input#checkbox-7(type="checkbox") | |
label(for="checkbox-7") Large | |
span.box | |
span.badge.status-primary 17 | |
.filters__item | |
.checkbox | |
input#checkbox-8(type="checkbox") | |
label(for="checkbox-8") XL | |
span.box | |
span.badge.status-primary 3 | |
section.well-cta-1 | |
h6 Call-to-action well: dark | |
.well-cta | |
.well-cta__text | |
h2 Having a "ruff" life? | |
p Adopt a friend that will love you unconditionally as long as you give it food and snuggles. | |
a.button.medium Find your life companion | |
.well-cta__image | |
img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/pug.png" alt="Picture of Pug") | |
section.well-cta-2 | |
h6 Call-to-action well: light | |
.well-cta--form | |
.well-cta--form__text | |
h3 Subscribe to our newsletter! | |
p Get the latest news on doggodoption. We are pawsitive we will not spam you. | |
.well-cta--form__input | |
input.input-form.input--lg(type="text" placeholder="Your Email Here") | |
.well-cta--form__cta | |
a.button.secondary Subscribe | |
section.tables | |
h6 Table | |
.table__wrapper | |
table.table | |
thead.table__header | |
tr | |
td Live? | |
td ID | |
td Name | |
td Breed | |
td Last Updated | |
td Status | |
td | |
tbody.table__body | |
tr | |
td | |
.checkbox-toggle | |
input#toggle-checkbox(type="checkbox" checked) | |
label(for="toggle-checkbox") | |
td 0045 | |
td Doggo Dogg | |
td Shiba Inu | |
td 20 June 2019 | |
td | |
span.badge.status-primary Available | |
td | |
span.icon-options-vertical | |
tr | |
td | |
.checkbox-toggle | |
input#toggle-checkbox-2(type="checkbox" checked) | |
label(for="toggle-checkbox-2") | |
td 0044 | |
td Labra-thor, Strongest Avenger | |
td Labrador Retriever | |
td 20 June 2019 | |
td | |
span.badge.status-error Pending | |
td | |
span.icon-options-vertical | |
tr | |
td | |
.checkbox-toggle | |
input#toggle-checkbox-3(type="checkbox") | |
label(for="toggle-checkbox-3") | |
td 0043 | |
td Branch Manager | |
td Poodle | |
td 20 June 2019 | |
td | |
span.badge.status-success Adopted | |
td | |
span.icon-options-vertical | |
section.comments | |
h6 Comments | |
.comment | |
.comment__image | |
img(src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Chris_Evans_SDCC_2014.jpg/330px-Chris_Evans_SDCC_2014.jpg" alt="Chris Evans lol") | |
.comment__info | |
h5 | |
span Chris Evans | |
span.badge.status-success | |
i.icon-trophy | |
| Top Commenter | |
p.comment__info__time 5 months ago | |
.comment__text This dog may be the second cutest dog ever! After my dog, Dodger, of course. | |
.comment__reaction | |
a.comment__reaction__heart | |
i.icon-heart | |
span 25 hearts | |
section.modals | |
h6 Modal | |
.panel | |
.panel__image | |
img(src="https://images.pexels.com/photos/1498925/pexels-photo-1498925.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=2&w=500" alt="Human and Dog") | |
.panel__info | |
h2 You are a trooper! | |
p | |
| Thank you for your interest in | |
strong Doggo Dogg. | |
| We will get back to you in 3 to 5 business days. | |
//p We would also like to take the oppawtunity to thank you for choosing to adopt, not shop. | |
//.alert.status-error.non-collapsible | |
strong Important: | |
| Please do not email us before we get back to you. You will be automatically be placed at the back of the email queue if you do so. | |
.panel__cta | |
a.button.secondary Got it! | |
section.media-card-1 | |
h6 Media Card I | |
.profile.profile-imgonly | |
.profile__image | |
img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/dog.png" alt="Doggo") | |
.profile__info | |
h3 Doggo Dogg | |
p.profile__info__extra A very good boi that loves playing fetch and ice-cream! Gentle with everyone. Scared of the rain. | |
.profile__stats | |
p.profile__stats__title Type | |
h5.profile__stats__info Puppy | |
.profile__stats | |
p.profile__stats__title Size | |
h5 Medium | |
.profile__stats | |
p.profile__stats__title Weight | |
h5.profile__stats__info 45.85 lbs | |
.profile__cta | |
a.button Adopt Doggo! | |
section.media-card-2 | |
h6 Media Card II | |
.profile.profile-default | |
.profile__image | |
img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/dog.png" alt="Doggo") | |
.profile__info | |
h3 Doggo Dogg | |
p.profile__info__extra A very good boi that loves playing fetch and ice-cream! Gentle with everyone. Scared of the rain. | |
.profile__stats | |
p.profile__stats__title Type | |
h5.profile__stats__info Puppy | |
.profile__stats | |
p.profile__stats__title Size | |
h5 Medium | |
.profile__stats | |
p.profile__stats__title Weight | |
h5.profile__stats__info 45.85 lbs | |
.profile__cta | |
a.button Adopt Doggo! | |
section.media-card-3 | |
h6 Media Card III | |
.profile.profile-long | |
.profile__image | |
img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/dog.png" alt="Doggo") | |
.profile__info | |
h3 Doggo Dogg | |
p.profile__info__extra A very good boi that loves playing fetch and ice-cream! Gentle with everyone. Scared of the rain. | |
.profile__stats | |
p.profile__stats__title Type | |
h5.profile__stats__info Puppy | |
.profile__stats | |
p.profile__stats__title Size | |
h5 Medium | |
.profile__stats | |
p.profile__stats__title Weight | |
h5.profile__stats__info 45.85 lbs | |
.profile__cta | |
a.button Adopt Doggo! | |
footer | |
.explanation | |
| Part of the | |
a(href="https://codepen.io/collection/DQvYpQ" target="_blank") CSS Grid collection here | |
| . A continuation of | |
a(href="https://codepen.io/oliviale/full/mgWjpq" target="_blank") Part I | |
| and | |
a(href="https://codepen.io/oliviale/full/WqwOzv" target="_blank") Part II | |
| . | |
.social | |
a(href="https://twitter.com/meowlivia_" target="_blank") | |
i.icon-social-twitter.icons | |
a(href="https://github.com/oliviale" target="_blank") | |
i.icon-social-github.icons | |
a(href="https://dribbble.com/oliviale" target="_blank") | |
i.icon-social-dribbble.icons | |
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
//the alert is collapsible yay | |
$(".alert").on("click", function() { | |
$(this).hide("slow"); | |
}); | |
//apprearance | |
$("input.variation").on("click", function() { | |
if ($(this).val() > 3) { | |
$("body").css("background", "#111"); | |
$("footer").attr("class", "dark"); | |
} else { | |
$("body").css("background", "#f9f9f9"); | |
$("footer").attr("class", ""); | |
} | |
}); | |
//login works | |
$("#login").on("click", function() { | |
$(".form-login .spinner__wrapper").css({ opacity: 1, "z-index": 5 }); | |
}); | |
//heart button works | |
$('a.comment__reaction__heart').on('click',function(){ | |
$(this).toggleClass('toggled'); | |
if ($(this).hasClass('toggled')) { | |
$(this).find('span').html('26 hearts'); | |
} else { | |
$(this).find('span').html('25 hearts'); | |
} | |
}); |
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
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> |
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 { | |
--canvasColor: #f9f9f9; | |
} | |
body { | |
background: var(--canvasColor); | |
font-family: "Poppins", sans-serif; | |
font-weight: 300; | |
line-height: 1.5; | |
font-size: 16px; | |
text-align: center; | |
transition: all .3s ease; | |
} | |
* { | |
box-sizing: border-box; | |
} | |
main { | |
--neutralShade0: #f8f8f8; | |
--neutralShade1: #f2f2f2; | |
--neutralShade2: #e8e9e9; | |
--neutralShade3: #d1d3d4; | |
--neutralShade4: #babdbf; | |
--neutralShade5: #808488; | |
--neutralShade6: #666a6d; | |
--neutralShade7: #4d5052; | |
--neutralShade8: #212122; | |
--grayColor: #999; | |
--lightGrayColor: #ddd; | |
--borderRadius: 6px; | |
--boxShadow: 0 2px 5px rgba(#333, 0.2); | |
} | |
/*overall layout*/ | |
main { | |
width: 90%; | |
max-width: 1050px; | |
margin: 3em auto 0; | |
border: 1px solid var(--accentColor); | |
display: grid; | |
grid: repeat(5, fit-content(300px)) / 100%; | |
color: var(--foregroundColor); | |
text-align: left; | |
} | |
main section { | |
border: 1px solid var(--accentColor); | |
position: relative; | |
padding: 40px 40px 50px; | |
> h6 { | |
color: var(--accentColor); | |
background: var(--canvasColor); | |
position: absolute; | |
top: -10px; | |
left: 20px; | |
padding: 0 10px; | |
} | |
h6.subheader { | |
color: var(--grayColor); | |
margin-top: 20px; | |
margin-bottom: 20px; | |
width: 100%; | |
} | |
} | |
@media (max-width: 992px) { | |
section:not(:last-child) { | |
border-width: 0 0 1px; | |
} | |
section:last-child { | |
border-width: 0; | |
} | |
} | |
@media (min-width: 992px) { | |
main { | |
grid: repeat(9, auto) / 45% 1fr 45%; | |
grid-auto-flow: dense; | |
} | |
.media-card-1 { | |
grid-column: 1 / 2; | |
border-width: 1px 0; | |
} | |
.media-card-2 { | |
grid-column: 2 / 4; | |
border-width: 1px 0 1px 1px; | |
} | |
.media-card-3 { | |
grid-column: 1 / 4; | |
border-width: 0; | |
} | |
.filter-section { | |
grid-column: 3 / 4; | |
grid-row: 1 / 2; | |
border-width: 0 0 0 1px; | |
} | |
.well-cta-1 { | |
grid-row: 3; | |
grid-column: 1 / 3; | |
border-width: 1px 1px 0 0; | |
} | |
.well-cta-2 { | |
grid-row: 2; | |
grid-column: 2 / 4; | |
border-width: 1px 0 0; | |
} | |
.tables { | |
grid-row: 4; | |
grid-column: 1 / -1; | |
border-width: 1px 0 0; | |
} | |
.forms { | |
grid-column: 1 / 3; | |
border-width: 0; | |
} | |
.comments { | |
grid-row: 2; | |
grid-column: 1 / 2; | |
border-width: 1px 1px 0 0; | |
padding-top: 60px; | |
} | |
.modals { | |
grid-row: 3; | |
grid-column: 3 / 4; | |
justify-content: center; | |
border-width: 1px 0 0; | |
} | |
} | |
/*typography*/ | |
strong { | |
font-weight: 500; | |
} | |
em { | |
font-style: italic; | |
} | |
h1 { | |
font: 700 48px/1.2 "Poppins", sans-serif; | |
margin-bottom: 10px; | |
} | |
h2 { | |
font: 700 32px/1.2 "Poppins", sans-serif; | |
margin-bottom: 10px; | |
} | |
h3 { | |
font: 700 24px/1.2 "Poppins", sans-serif; | |
margin-bottom: 10px; | |
} | |
h4 { | |
font: 700 20px/1.2 "Poppins", sans-serif; | |
margin-bottom: 10px; | |
} | |
h5 { | |
font: 500 18px/1.2 "Poppins", sans-serif; | |
margin-bottom: 10px; | |
} | |
h6 { | |
font: 500 16px/1.2 "Poppins", sans-serif; | |
text-transform: uppercase; | |
} | |
/*checkboxes*/ | |
input:disabled { | |
~ * { | |
opacity: 0.3; | |
user-select: none; | |
pointer-events: none; | |
} | |
} | |
.checkbox-toggle { | |
input { | |
display: none; | |
} | |
label { | |
outline: 0; | |
display: block; | |
width: 45px; | |
height: 16px; | |
background: var(--grayColor); | |
position: relative; | |
cursor: pointer; | |
border-radius: 2em; | |
padding: 2px; | |
transition: all 0.4s ease; | |
margin: 0; | |
&:after { | |
position: relative; | |
display: block; | |
content: ""; | |
width: 20px; | |
height: 20px; | |
border-radius: 50%; | |
background: #fff; | |
transition: all 0.2s ease; | |
border: 1px solid var(--grayColor); | |
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); | |
left: -4px; | |
top: -5px; | |
} | |
} | |
input:checked + label { | |
background: var(--accent2Color); | |
&:after { | |
left: 52%; | |
} | |
} | |
} | |
.checkbox { | |
position: relative; | |
user-select: none; | |
margin-bottom: 10px; | |
input { | |
display: none; | |
} | |
label { | |
position: relative; | |
vertical-align: middle; | |
cursor: pointer; | |
font-weight: 500; | |
padding-left: 35px; | |
} | |
span.box { | |
display: inline-block; | |
width: 20px; | |
border-radius: var(--borderRadius); | |
border: 1px solid var(--grayColor); | |
width: 24px; | |
height: 24px; | |
vertical-align: middle; | |
margin-right: 3px; | |
transition: 0.3s ease; | |
position: absolute; | |
left: 0; | |
&:before, | |
&:after { | |
content: ""; | |
position: absolute; | |
width: 4px; | |
height: 16px; | |
border-radius: 40px; | |
background: var(--backgroundColor); | |
transition: all 0.3s ease; | |
} | |
&:before { | |
transform: rotate(45deg) translateY(-5px) translateX(10px) scale(0); | |
} | |
&:after { | |
height: 8px; | |
transform: rotate(-45deg) translateY(10px) translateX(-4px) scale(0); | |
} | |
} | |
input:checked { | |
+ label { | |
span.box { | |
background: var(--accent2Color); | |
border-color: var(--accent2Color); | |
&:before { | |
transform: rotate(45deg) translateY(-5px) translateX(10px) scale(1); | |
} | |
&:after { | |
height: 8px; | |
transform: rotate(-45deg) translateY(10px) translateX(-4px) scale(1); | |
} | |
} | |
} | |
} | |
input:disabled:checked + span.box { | |
background: var(--grayColor); | |
border: var(--grayColor); | |
} | |
input:disabled:checked ~ label { | |
&:before, | |
&:after { | |
background: black; | |
} | |
} | |
} | |
/*buttons & links*/ | |
.links { | |
&__sec { | |
margin: 10px 0 30px; | |
} | |
a.link { | |
display: inline; | |
margin: 10px 30px 5px 0; | |
border-bottom: 2px dashed; | |
font-weight: 500; | |
line-height: 2.5; | |
cursor: pointer; | |
color: var(--neutralShade5); | |
&:hover, | |
&.hover { | |
color: var(--neutralShade6); | |
border-bottom: 2px solid; | |
} | |
&.primary { | |
color: var(--primaryColor); | |
&:hover, | |
&.hover { | |
color: var(--primaryShade5); | |
} | |
} | |
&.secondary { | |
color: var(--secondaryColor); | |
&:hover, | |
&.hover { | |
color: var(--secondaryShade5); | |
} | |
} | |
} | |
} | |
.buttons { | |
display: flex; | |
flex-wrap: wrap; | |
align-items: center; | |
> * { | |
flex: 1 1 calc(50% - 20px); | |
margin-top: 20px; | |
&:nth-child(odd) { | |
margin-right: 20px; | |
} | |
} | |
} | |
a.button, | |
input.button, | |
button { | |
outline: none; | |
width: 100%; | |
text-align: center; | |
display: inline-block; | |
border: none; | |
font: 500 16px/1 "Poppins", sans-serif; | |
padding: 20px; | |
cursor: pointer; | |
border-radius: var(--borderRadius); | |
background: var(--primaryColor); | |
color: var(--backgroundColor); | |
position: relative; | |
top: 0; | |
transition: 0.2s ease; | |
&:hover, | |
&.hover { | |
top: -3px; | |
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); | |
} | |
&:active, | |
&.active { | |
background: var(--primaryShade4); | |
outline: none; | |
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); | |
top: 0; | |
} | |
&.disabled { | |
opacity: 0.4; | |
user-select: none; | |
pointer-events: none; | |
} | |
&.medium { | |
padding: 15px 18px; | |
width: auto; | |
} | |
&.small { | |
padding: 10px 12px; | |
width: auto; | |
font-size: 14px; | |
font-weight: 500; | |
} | |
&.secondary { | |
background: var(--secondaryColor); | |
&:active, | |
&:focus, | |
&.active { | |
background: var(--secondaryShade4); | |
outline: none; | |
} | |
} | |
&.accent { | |
background: var(--accentColor); | |
&:active, | |
&:focus, | |
&.active { | |
background: var(--accentShade4); | |
} | |
} | |
&.accent2 { | |
background: var(--accent2Color); | |
&:active, | |
&:focus, | |
&.active { | |
background: var(--accent2Shade4); | |
} | |
} | |
&.accent3 { | |
background: var(--accent3Color); | |
&:active, | |
&:focus, | |
&.active { | |
background: var(--accent3Shade4); | |
} | |
} | |
} | |
/*inputs*/ | |
.input__wrapper { | |
margin-bottom: 30px; | |
} | |
.label-form { | |
font-weight: 500; | |
display: block; | |
margin-bottom: 5px; | |
} | |
input.input-form, | |
select, | |
textarea { | |
height: 50px; | |
font-size: 16px; | |
border: 2px solid var(--neutralShade3); | |
width: 100%; | |
padding: 12px; | |
font-family: "Poppins"; | |
border-radius: var(--borderRadius); | |
color: var(--foregroundColor); | |
background: var(--backgroundColor); | |
&:focus, | |
&.active { | |
outline: none; | |
border-color: var(--primaryColor); | |
} | |
&:disabled { | |
cursor: not-allowed; | |
background: var(--neutralShade1); | |
opacity: 0.6; | |
} | |
} | |
input.input-form { | |
&.input--lg { | |
height: 56px; | |
font-size: 18px; | |
padding: 15px; | |
} | |
} | |
/*badges*/ | |
.badge { | |
display: inline-block; | |
padding: 6px 12px; | |
border-radius: 50px; | |
font-weight: 500; | |
text-transform: uppercase; | |
line-height: 1; | |
} | |
.alert { | |
margin-bottom: 15px; | |
display: block; | |
padding: 10px 15px; | |
border-radius: var(--borderRadius); | |
font-weight: 500; | |
position: relative; | |
cursor: pointer; | |
&.non-collapsible { | |
&:before, &:after { | |
content: none; | |
} | |
} | |
&:before, | |
&:after { | |
content: ""; | |
position: absolute; | |
width: 4px; | |
height: 16px; | |
border-radius: 40px; | |
right: 30px; | |
top: 8px; | |
} | |
&:before { | |
transform: rotate(45deg) translateY(-5.5px) translateX(13.5px); | |
} | |
&:after { | |
transform: rotate(-45deg) translateY(13.5px) translateX(5.5px); | |
} | |
} | |
.status-primary { | |
background: var(--primaryShade1); | |
color: var(--primaryShade5); | |
&:before, | |
&:after { | |
background: var(--primaryShade5); | |
} | |
} | |
.status-secondary { | |
background: var(--secondaryShade1); | |
color: var(--secondaryShade5); | |
&:before, | |
&:after { | |
background: var(--secondaryShade5); | |
} | |
} | |
.status-info { | |
background: var(--accentShade1); | |
color: var(--accentShade5); | |
&:before, | |
&:after { | |
background: var(--accentShade5); | |
} | |
} | |
.status-success { | |
background: var(--accent2Shade1); | |
color: var(--accent2Shade5); | |
&:before, | |
&:after { | |
background: var(--accent2Shade5); | |
} | |
} | |
.status-error { | |
background: var(--accent3Shade1); | |
color: var(--accent3Shade5); | |
&:before, | |
&:after { | |
background: var(--accent3Shade5); | |
} | |
} | |
/*tooltips*/ | |
.tooltip { | |
cursor: pointer; | |
position: relative; | |
display: block; | |
width: 100%; | |
text-align: center; | |
z-index: 10; | |
span { | |
border-bottom: 1px dotted; | |
} | |
&:after { | |
content: attr(data-tooltip); | |
background: var(--neutralShade2); | |
max-width: 90%; | |
width: auto; | |
position: absolute; | |
left: 0; | |
right: 0; | |
margin: auto; | |
opacity: 0; | |
height: auto; | |
font-size: 14px; | |
padding: 10px; | |
border-radius: var(--borderRadius); | |
color: var(--foregroundColor); | |
text-align: center; | |
} | |
&.dark:after { | |
background: var(--neutralShade7); | |
color: var(--backgroundColor); | |
} | |
&.top { | |
&:after { | |
bottom: 80%; | |
transition: opacity 0.3s ease 0.3s, | |
bottom 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s; | |
} | |
&:hover, | |
&.hovered { | |
&:after { | |
bottom: 130%; | |
opacity: 1; | |
} | |
} | |
} | |
&.bottom { | |
&:after { | |
top: 80%; | |
transition: opacity 0.3s ease 0.3s, | |
top 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s; | |
} | |
&:hover, | |
&.hovered { | |
&:after { | |
top: 130%; | |
opacity: 1; | |
} | |
} | |
} | |
} | |
/*spinner*/ | |
.spinner + label { | |
font-size: 14px; | |
font-weight: 500; | |
margin-top: 8px; | |
display: inline-block; | |
text-transform: uppercase; | |
color: var(--primaryShade4); | |
} | |
.spinner-1 .spinner { | |
max-width: 50px; | |
margin: auto; | |
height: 20px; | |
position: relative; | |
&:after { | |
content: ""; | |
position: absolute; | |
width: 20px; | |
height: 20px; | |
left: -10%; | |
background: var(--primaryColor); | |
animation: spinnerLeftRight 1s infinite; | |
} | |
&:before { | |
content: ""; | |
position: absolute; | |
width: 20px; | |
height: 20px; | |
left: -10%; | |
background: var(--primaryShade2); | |
opacity: 1; | |
animation: spinnerLeftRight 1s infinite 0.06s; | |
} | |
} | |
@keyframes spinnerLeftRight { | |
0% { | |
left: 85%; | |
} | |
50% { | |
left: -10%; | |
} | |
100% { | |
left: 85%; | |
} | |
} | |
/*variations*/ | |
input.variation { | |
display: none; | |
+ label { | |
display: inline-block; | |
width: 50px; | |
height: 50px; | |
margin: 30px 20px 0; | |
border-radius: 50%; | |
cursor: pointer; | |
border: 6px solid #fff; | |
box-shadow: 0 0 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.2); | |
} | |
} | |
@media (min-width: 500px) { | |
input.variation + label { | |
margin: 70px 20px 20px; | |
} | |
} | |
#bluepurple { | |
+ label { | |
background: linear-gradient(to left, #673ab7 50%, #03a9f4 50%); | |
} | |
&:checked ~ main { | |
--backgroundColor: #fff; | |
--foregroundColor: #111; | |
--primaryColor: #03a9f4; | |
--primaryShade1: #e1f5fe; | |
--primaryShade2: #b3e5fc; | |
--primaryShade3: #4fc3f7; | |
--primaryShade4: #0288d1; | |
--primaryShade5: #0277bd; | |
--secondaryColor: #673ab7; | |
--secondaryShade1: #ede7f6; | |
--secondaryShade2: #d1c4e9; | |
--secondaryShade3: #9575cd; | |
--secondaryShade4: #512da8; | |
--secondaryShade5: #311b92; | |
--accentColor: #009688; | |
--accentShade1: #e0f2f1; | |
--accentShade2: #b2dfdb; | |
--accentShade3: #4db6ac; | |
--accentShade4: #00796b; | |
--accentShade5: #004d40; | |
--accent2Color: #8bc34a; | |
--accent2Shade1: #e7f6d5; | |
--accent2Shade2: #c5e1a5; | |
--accent2Shade3: #aed581; | |
--accent2Shade4: #689f38; | |
--accent2Shade5: #558b2f; | |
--accent3Color: #f44336; | |
--accent3Shade1: #ffdde0; | |
--accent3Shade2: #ffcdd2; | |
--accent3Shade3: #ef9a9a; | |
--accent3Shade4: #d32f2f; | |
--accent3Shade5: #b71c1c; | |
} | |
} | |
#sunset { | |
+ label { | |
background: linear-gradient(to right, #ff9557 50%, #ffcc67 50%); | |
} | |
&:checked ~ main { | |
--canvasColor: #f9f9f9; | |
--backgroundColor: #fff; | |
--foregroundColor: #111; | |
--primaryColor: #ff9557; | |
--primaryShade1: #ffe2d1; | |
--primaryShade2: #ffceb2; | |
--primaryShade3: #ffb184; | |
--primaryShade4: #e88850; | |
--primaryShade5: #d17a48; | |
--secondaryColor: #ffcc67; | |
--secondaryShade1: #fff1d5; | |
--secondaryShade2: #ffde9e; | |
--secondaryShade3: #ffd074; | |
--secondaryShade4: #e8ba5e; | |
--secondaryShade5: #ba954b; | |
--accentColor: #4e5166; | |
--accentShade1: #cecfd5; | |
--accentShade2: #aeafb9; | |
--accentShade3: #8e909d; | |
--accentShade4: #6e7081; | |
--accentShade5: #404354; | |
--accent2Color: #588b8b; | |
--accent2Shade1: #c2d4d4; | |
--accent2Shade2: #a3bfbf; | |
--accent2Shade3: #85aaaa; | |
--accent2Shade4: #507f7f; | |
--accent2Shade5: #497272; | |
--accent3Color: #fe5f55; | |
--accent3Shade1: #fec4c1; | |
--accent3Shade2: #fea7a2; | |
--accent3Shade3: #fe7c73; | |
--accent3Shade4: #e7574e; | |
--accent3Shade5: #b9463e; | |
} | |
} | |
#godiva { | |
+ label { | |
background: linear-gradient(to right, #a05793 50%, #a3d858 50%); | |
} | |
&:checked ~ main { | |
--canvasColor: #f9f9f9; | |
--backgroundColor: #fff; | |
--foregroundColor: #111; | |
--primaryColor: #a05793; | |
--primaryShade1: #e5d1e1; | |
--primaryShade2: #d3b2cd; | |
--primaryShade3: #b984b0; | |
--primaryShade4: #925086; | |
--primaryShade5: #834879; | |
--secondaryColor: #a3d858; | |
--secondaryShade1: #e5f4d1; | |
--secondaryShade2: #cce9a3; | |
--secondaryShade3: #bce285; | |
--secondaryShade4: #95c550; | |
--secondaryShade5: #779e41; | |
--accentColor: #245e71; | |
--accentShade1: #d7e1e5; | |
--accentShade2: #afc4cb; | |
--accentShade3: #7398a4; | |
--accentShade4: #4b7b8a; | |
--accentShade5: #1e4d5d; | |
--accent2Color: #2aa5a1; | |
--accent2Shade1: #d8eeed; | |
--accent2Shade2: #9ed6d4; | |
--accent2Shade3: #64bdba; | |
--accent2Shade4: #279693; | |
--accent2Shade5: #1f7976; | |
--accent3Color: #92374d; | |
--accent3Shade1: #ebdad3; | |
--accent3Shade2: #cda4ae; | |
--accent3Shade3: #af6d7d; | |
--accent3Shade4: #853246; | |
--accent3Shade5: #6b2939; | |
} | |
} | |
#dark { | |
+ label { | |
background: linear-gradient(to right, #367bc3 50%, #38bfa7 50%); | |
} | |
&:checked ~ main { | |
--canvasColor: #111; | |
--backgroundColor: #2a313b; | |
--foregroundColor: #ebe8d8; | |
--primaryColor: #367bc3; | |
--primaryShade5: #b5cfe9; | |
--primaryShade4: #91b7de; | |
--primaryShade3: #5a93cd; | |
--primaryShade2: #3270b2; | |
--primaryShade1: #285a8e; | |
--secondaryColor: #38bfa7; | |
--secondaryShade5: #c8ede7; | |
--secondaryShade4: #92dccf; | |
--secondaryShade3: #6ed0be; | |
--secondaryShade2: #33ae98; | |
--secondaryShade1: #2e9d89; | |
--accentColor: #586994; | |
--accentShade5: #d1d6e1; | |
--accentShade4: #a3adc4; | |
--accentShade3: #7684a7; | |
--accentShade2: #49567a; | |
--accentShade1: #39435f; | |
--accent2Color: #8fe1a2; | |
--accent2Shade5: #d6f4dd; | |
--accent2Shade4: #c1eecc; | |
--accent2Shade3: #a3e6b2; | |
--accent2Shade2: #82cd94; | |
--accent2Shade1: #76b985; | |
--accent3Color: #fe938c; | |
--accent3Shade5: #fee1df; | |
--accent3Shade4: #fec4c0; | |
--accent3Shade3: #fea6a0; | |
--accent3Shade2: #e78680; | |
--accent3Shade1: #b96b66; | |
color: #f1f2eb; | |
border-color: #f1f2eb; | |
> section { | |
border-color: #f1f2eb; | |
> h6 { | |
color: #f1f2eb; | |
} | |
} | |
} | |
} | |
#pinkaru { | |
+ label { | |
background: linear-gradient(to right, #f95794 50%, #323da5 50%); | |
} | |
&:checked ~ main { | |
border-color: #fff; | |
> section { | |
border-color: #fff; | |
> h6 { | |
color: #fff; | |
} | |
} | |
--canvasColor: #111; | |
--backgroundColor: #2a313b; | |
--foregroundColor: #e3f2fd; | |
--primaryColor: #f95794; | |
--primaryShade5: #fdd1e1; | |
--primaryShade4: #fba3c4; | |
--primaryShade3: #fa75a7; | |
--primaryShade2: #e35087; | |
--primaryShade1: #b6406c; | |
--secondaryColor: #323da5; | |
--secondaryShade5: #c7cae6; | |
--secondaryShade4: #8f95cd; | |
--secondaryShade3: #6971bd; | |
--secondaryShade2: #2e3896; | |
--secondaryShade1: #293288; | |
--accentColor: #FFC729; | |
--accentShade5: #ffefc4; | |
--accentShade4: #ffe08a; | |
--accentShade3: #ffd14f; | |
--accentShade2: #e8b526; | |
--accentShade1: #d1a322; | |
--accent2Color: #53dd6c; | |
--accent2Shade5: #d0f5d6; | |
--accent2Shade4: #a1ecae; | |
--accent2Shade3: #72e386; | |
--accent2Shade2: #4cc963; | |
--accent2Shade1: #3da14f; | |
--accent3Color: #f52f57; | |
--accent3Shade5: #fcc6d1; | |
--accent3Shade4: #f98da3; | |
--accent3Shade3: #f65475; | |
--accent3Shade2: #df2b50; | |
--accent3Shade1: #b32340; | |
} | |
} | |
#dark, | |
#pinkaru { | |
&:checked ~ main { | |
h6.subheader, | |
.feedback-form { | |
color: var(--neutralShade1); | |
} | |
::placeholder { | |
color: var(--neutralShade4); | |
opacity: 1; | |
} | |
:-ms-input-placeholder { | |
color: var(--neutralShade4); | |
} | |
::-ms-input-placeholder { | |
color: var(--neutralShade4); | |
} | |
.tooltip:after { | |
color: var(--backgroundColor); | |
} | |
a.button, | |
input.button, | |
button, | |
.tooltip.dark:after { | |
color: var(--foregroundColor); | |
text-shadow: 0 1px 2px rgba(0,0,0,0.1); | |
} | |
.button:active, .button.active { | |
background: var(--primaryShade1); | |
} | |
.button.secondary:active, .button.secondary.active { | |
background: var(--secondaryShade1); | |
} | |
.button.accent { | |
background: var(--accentShade2); | |
&:active { | |
background: var(--accentShade1); | |
} | |
} | |
.button.accent2 { | |
background: var(--accent2Shade2); | |
&:active { | |
background: var(--accent2Shade1); | |
} | |
} | |
.button.accent3 { | |
background: var(--accent3Shade2); | |
&:active { | |
background: var(--accent3Shade1); | |
} | |
} | |
a.link { | |
color: var(--neutralShade2); | |
&:hover, | |
&.hover { | |
color: var(--neutralShade1); | |
border-bottom: 2px solid; | |
} | |
&.primary { | |
color: var(--primaryShade4); | |
&:hover, | |
&.hover { | |
color: var(--primaryShade5); | |
} | |
} | |
&.secondary { | |
color: var(--secondaryShade4); | |
&:hover, | |
&.hover { | |
color: var(--secondaryShade5); | |
} | |
} | |
} | |
.profile-default img { | |
border-bottom: 7px solid var(--secondaryShade5); | |
} | |
} | |
} | |
/* PROFILE CARDS */ | |
.profile { | |
position: relative; | |
background: var(--backgroundColor); | |
color: var(--foregroundColor); | |
box-shadow: 0 3px 15px rgba(#333,0.2); | |
border-radius: 10px; | |
overflow: hidden; | |
transition: .2s ease; | |
display: grid; | |
grid: 200px repeat(5,auto) / 100%; | |
&__image { | |
img { | |
width: 100%; | |
height: 100%; | |
object-fit: cover; | |
border-bottom: 7px solid var(--secondaryColor); | |
} | |
} | |
&__info { | |
padding: 20px 25px 0; | |
} | |
&__stats { | |
padding: 5px 25px; | |
&__title { | |
color: var(--grayColor); | |
text-transform: uppercase; | |
font-size: 16px; | |
} | |
} | |
&__cta { | |
padding: 0 25px 25px; | |
} | |
a { | |
&:hover { | |
top: 0; | |
box-shadow: none; | |
background: var(--primaryShade4); | |
} | |
&:active, &:focus { | |
top: 0; | |
box-shadow: none; | |
background: var(--primaryShade5); | |
} | |
} | |
} | |
@media (min-width: 500px) { | |
.profile-default { | |
min-width: 500px; | |
max-width: 450px; | |
margin: auto; | |
overflow: hidden; | |
grid: 340px auto auto / repeat(3,minmax(80px,1fr)); | |
grid-gap: 10px; | |
.profile__image { | |
grid-column: span 3; | |
} | |
.profile__info { | |
grid-column: span 3; | |
} | |
.profile__stats { | |
padding: 5px 25px; | |
} | |
.profile__cta { | |
grid-column: span 3; | |
} | |
} | |
} | |
@media (min-width: 768px) { | |
.profile-long { | |
grid-template-columns: 150px repeat(3,1fr) auto; | |
grid-template-rows: auto auto; | |
width: 100%; | |
padding-right: 20px; | |
.profile__image { | |
grid-column: 1 / 2; | |
grid-row: 1 / 3; | |
margin-right: 20px; | |
img { | |
border-radius: 10px 0 0 10px; | |
border: none; | |
} | |
} | |
.profile__info { | |
grid-column: 2 / 6; | |
grid-row: 1; | |
padding: 20px 20px 15px 0; | |
} | |
.profile__stats { | |
min-width: 100px; | |
padding: 15px 0; | |
border-top: .5px solid var(--grayColor); | |
grid-row: 2 / 3; | |
&:nth-child(3) { | |
grid-column: 2 / 3; | |
} | |
&:nth-child(4) { | |
grid-column: 3 / 4; | |
} | |
&:nth-child(5) { | |
grid-column: 4 / 5; | |
} | |
} | |
.profile__cta { | |
grid-row: 2 / 3; | |
grid-column: 5 / 6; | |
border-top: .5px solid var(--grayColor); | |
padding: 15px 0 0; | |
} | |
} | |
} | |
.profile-imgonly { | |
border-radius: 10px; | |
overflow: hidden; | |
min-width: 250px; | |
width: 100%; | |
grid: 480px 0px / 100%; | |
&:hover { | |
grid: 434px 56px / 100%; | |
} | |
.profile__image, .profile__info { | |
grid-row: 1 / 2; | |
grid-column: 1 / 2; | |
} | |
.profile__image { | |
position: relative; | |
&:after { | |
content: ''; | |
position: absolute; | |
bottom: 0; | |
left: 0; | |
width: 100%; | |
height: 30%; | |
background: linear-gradient(to top, rgba(0,0,0,0.65),rgba(0,0,0,0)); | |
} | |
img { | |
border: none; | |
} | |
} | |
.profile__stats { | |
display: none; | |
} | |
.profile__info { | |
z-index: 5; | |
grid-row: 1 / 2; | |
align-self: end; | |
margin: 0 0 15px; | |
color: #fff; | |
text-shadow: 0 1px 4px rgba(0,0,0,0.2); | |
p { | |
display: none; | |
} | |
} | |
.profile__cta { | |
padding: 0; | |
a { | |
border-radius: 0; | |
} | |
} | |
} | |
#dark, | |
#pinkaru { | |
&:checked ~ main { | |
a.button { | |
color: var(--foregroundColor); | |
text-shadow: 0 1px 2px rgba(0,0,0,0.1); | |
} | |
.button:hover { | |
background: var(--primaryShade2); | |
} | |
.button:active { | |
background: var(--primaryShade1); | |
} | |
.profile-default img { | |
border-bottom: 7px solid var(--secondaryShade5); | |
} | |
} | |
} | |
/*FILTERS*/ | |
.filters { | |
&__title { | |
font-size: 18px; | |
color: var(--grayColor); | |
margin: 25px 0; | |
} | |
&__item { | |
display: grid; | |
grid-template-columns: 1fr auto; | |
align-items: center; | |
margin-bottom: 10px; | |
.checkbox { | |
position: relative; | |
margin: 0; | |
.tooltip { | |
display: inline-block; | |
margin-left: 10px; | |
width: auto; | |
vertical-align: middle; | |
span { | |
border: none; | |
} | |
&:after { | |
min-width: 100px; | |
margin-left: -50px; | |
} | |
} | |
} | |
} | |
&:not(:first-of-type) { | |
border-top: .5px solid var(--lightGrayColor); | |
margin-top: 25px; | |
} | |
} | |
/* WELL CTA */ | |
.well-cta { | |
border-radius: 10px; | |
background: var(--secondaryColor); | |
color: var(--foregroundColor); | |
overflow: hidden; | |
&__text { | |
padding: 30px; | |
p { | |
font-size: 18px; | |
line-height: 1.5; | |
} | |
a { | |
margin: 25px 0 0; | |
} | |
} | |
&__image { | |
padding: 30px 0 0; | |
} | |
img { | |
width: 100%; | |
max-height: 300px; | |
object-fit: contain; | |
margin-bottom: -7px; | |
} | |
} | |
@media (min-width: 768px) { | |
.well-cta { | |
display: grid; | |
grid: auto / 1fr 250px; | |
&__image { | |
align-self: flex-end; | |
padding: 15px 0 0; | |
} | |
} | |
} | |
#bluepurple { | |
&:checked ~ main { | |
.well-cta__text { | |
color: var(--backgroundColor); | |
} | |
} | |
} | |
.well-cta--form { | |
display: grid; | |
grid-gap: 10px; | |
padding: 30px; | |
background: var(--primaryShade1); | |
border-radius: 10px; | |
&__text { | |
margin-bottom: 10px; | |
} | |
h3 { | |
color: var(--primaryShade5); | |
} | |
} | |
@media (min-width: 768px) { | |
.well-cta--form { | |
grid-template-columns: 1fr auto; | |
&__text { | |
grid-column: span 2; | |
} | |
} | |
} | |
/*TABLE*/ | |
.table { | |
background: var(--backgroundColor); | |
border-radius: 10px; | |
&__wrapper { | |
width: 100%; | |
overflow-y: hidden; | |
overflow-x: auto; | |
border-radius: 10px; | |
box-shadow: 0 3px 15px rgba(51, 51, 51, 0.2); | |
} | |
tr { | |
display: grid; | |
grid: auto / 80px 80px repeat(2, minmax(150px,2fr)) repeat(2, minmax(120px,1.5fr)) 50px; | |
align-items: center; | |
} | |
td { | |
padding: 15px; | |
} | |
&__header { | |
color: var(--neutralShade5); | |
font-weight: 500; | |
text-transform: uppercase; | |
border-bottom: 0.5px solid var(--lightGrayColor); | |
} | |
&__body { | |
tr:nth-child(even) { | |
background: var(--neutralShade0); | |
} | |
} | |
} | |
#dark, | |
#pinkaru { | |
&:checked ~ main { | |
.table__body tr:nth-child(even) { | |
background: var(--neutralShade8); | |
} | |
} | |
} | |
/*FORMS*/ | |
.form-login { | |
border-radius: 10px; | |
padding: 30px; | |
box-shadow: 0 3px 15px rgba(51, 51, 51, 0.2); | |
background: var(--backgroundColor); | |
margin-top: 30px; | |
position: relative; | |
overflow: hidden; | |
.checkbox { | |
margin-bottom: 30px; | |
} | |
.spinner__wrapper { | |
display: grid; | |
place-items: center; | |
position: absolute; | |
width: 100%; | |
height: 100%; | |
left: 0; | |
top: 0; | |
background: rgba(255,255,255,0.85); | |
opacity: 0; | |
z-index: -1; | |
} | |
} | |
@media (min-width: 768px) { | |
.form-login { | |
display: grid; | |
grid: auto / 1fr 40%; | |
.input__wrapper { | |
grid-column: span 2; | |
} | |
.checkbox { | |
align-self: center; | |
margin-bottom: 0; | |
} | |
} | |
} | |
#dark, | |
#pinkaru { | |
&:checked ~ main { | |
.spinner__wrapper { | |
background: rgba(20,20,20,0.85); | |
} | |
} | |
} | |
/*COMMENT ITEM*/ | |
.comment { | |
display: grid; | |
grid: auto / 60px 1fr; | |
grid-gap: 12px; | |
&__image { | |
grid-row: 1 / 4; | |
img { | |
width: 60px; | |
height: 60px; | |
object-fit: cover; | |
border-radius: 50%; | |
} | |
} | |
&__info { | |
h5 { | |
margin-bottom: 0; | |
span { | |
vertical-align: middle; | |
} | |
.badge { | |
margin-left: 8px; | |
font-size: 80%; | |
i { | |
font-size: 80%; | |
margin-right: 6px; | |
} | |
} | |
} | |
&__time { | |
color: var(--grayColor); | |
} | |
} | |
&__reaction { | |
i { | |
margin-right: 8px; | |
font-size: 85%; | |
} | |
&__heart { | |
cursor: pointer; | |
transition: .3s ease; | |
&.toggled { | |
color: var(--accent3Shade5); | |
font-weight: 500; | |
} | |
} | |
} | |
} | |
/*PANEL*/ | |
.panel { | |
display: grid; | |
grid: 200px auto min-content / 100%; | |
border-radius: 10px; | |
overflow: hidden; | |
background: var(--backgroundColor); | |
box-shadow: 0 3px 15px rgba(51, 51, 51, 0.2); | |
max-width: 480px; | |
margin: auto; | |
&__image { | |
img { | |
width: 100%; | |
height: 100%; | |
object-fit: cover; | |
} | |
} | |
&__info { | |
padding: 30px 30px 20px; | |
h1 { | |
margin-bottom: 25px; | |
} | |
p { | |
font-size: 20px; | |
margin: 15px 0; | |
} | |
.alert { | |
font-weight: 300; | |
margin-top: 30px; | |
} | |
} | |
&__cta { | |
padding: 0 30px 30px; | |
text-align: center; | |
} | |
} | |
footer { | |
display: grid; | |
grid: min-content / 1fr max-content; | |
text-align: left; | |
width: 90%; | |
margin: 1em auto 4em; | |
max-width: 1050px; | |
align-items: center; | |
a { | |
text-decoration: none; | |
color: #333; | |
padding: 3px 0; | |
border-bottom: 1px dashed; | |
&:hover { | |
border-bottom: 1px solid; | |
} | |
} | |
.social a { | |
text-decoration: none; | |
margin-left: 10px; | |
.icons { | |
display: inline-block; | |
font-size: 20px; | |
} | |
} | |
&.dark, &.dark a { | |
color: #f9f9f9; | |
} | |
} |
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
<link href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment