butter/butter-kanglam-ui
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

carets

Browse source
This commit is contained in:
John Hess 2022-10-10 12:29:27 -05:00
parent 396855f8a0
commit d3174bdc9a
4 changed files with 40 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

1
_scss/helpers/variables.scss
View file

@ -3,6 +3,7 @@ $white: #ffffff;
$black: #000000; $black: #000000;
$dark-gray: #242424; $dark-gray: #242424;
$light-gray: #D9D9D9; $light-gray: #D9D9D9;
$lighter-gray: #EEE;
// Brand colors // Brand colors
$gold: #FFDF3F; $gold: #FFDF3F;

45
_scss/pages/home.scss
View file

@ -4,7 +4,7 @@
body { body {
background-color: $gold; background-color: $gold;
background-image: url("/assets/images/btr-texture.png"); background-image: url("/assets/images/btr-texture.png");
background-size: 100%; background-size: 170px;
min-height: 100vh; min-height: 100vh;
} }
@ -131,47 +131,66 @@ a:active {
input[type='checkbox'] { input[type='checkbox'] {
display:none; display:none;
} }
.outlink {
display: block;
cursor: pointer;
transition: all 0.5s ease-out;
}
.outlink::after {
content: url("/assets/images/btr-carrot.svg");
display: inline-block;
vertical-align: middle;
transform: rotate(90deg);
}
.lbl-toggle { .lbl-toggle {
display: block; display: block;
cursor: pointer; cursor: pointer;
transition: all 0.5s ease-out; transition: all 0.5s ease-out;
} }
.lbl-toggle::before { .lbl-toggle::after {
content: ' '; content: url("/assets/images/btr-carrot.svg");
display: inline-block; display: inline-block;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid currentColor;
vertical-align: middle; vertical-align: middle;
margin-right: .7rem; transform: rotate(180deg);
transform: translateY(-2px); transition: transform .25s ease-out;
transition: transform .5s ease-out;
} }
.content-expander { .content-expander {
border-bottom-color: $light-gray; border-bottom-color: $lighter-gray;
border-bottom-style: solid; border-bottom-style: solid;
border-bottom-width: 1px; border-bottom-width: 2px;
padding: 10px; padding: 10px;
width: 100%; width: 100%;
text-align: left; text-align: left;
font-weight: 600; font-weight: 600;
font-size: 14px; font-size: 14px;
span {
// Take up space so ::after is on the right
display: inline-block;
width: 94%;
}
} }
.toggle:checked + .lbl-toggle + .content-expanded { .toggle:checked + .lbl-toggle + .content-expanded {
max-height: 100vh; max-height: 100vh;
overflow: visible; overflow: visible;
display: inherit;
} }
.toggle:checked + .lbl-toggle::before { .toggle:checked + .lbl-toggle::after {
transform: rotate(90deg) translateX(-3px); transform: rotate(360deg) translate(0, -2px);
} }
.content-expanded { .content-expanded {
max-height: 0px; max-height: 0px;
display: none;
overflow: hidden; overflow: hidden;
transition: max-height .5s ease-in-out; transition: max-height .5s ease-in-out;
width: 100%; width: 100%;
padding-bottom: 20px;
margin-bottom: 40px;
margin-top: 20px; margin-top: 20px;
text-align: left; text-align: left;
font-size: 13px; font-size: 13px;
border-bottom-color: $lighter-gray;
border-bottom-style: solid;
border-bottom-width: 2px;
} }
.content-img { .content-img {
img { img {

BIN
assets/images/btr-texture.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 58 KiB

After

Width:  |  Height:  |  Size: 27 KiB

Before After
Before After

9
index.html
View file

@ -25,8 +25,9 @@ layout: default
</div> </div>
</a> </a>
<input id="apps-expander" class="toggle" type="checkbox"> <input id="apps-expander" class="toggle" type="checkbox">
<label for="apps-expander" class="lbl-toggle content-expander">{% t apps_expander_text %}</label> <label for="apps-expander" class="lbl-toggle content-expander">
<span>{% t apps_expander_text %}</span>
</label>
<div class="content-expanded"> <div class="content-expanded">
<p class="mb-2">{% t apps_expanded_text %}</p> <p class="mb-2">{% t apps_expanded_text %}</p>
<div class="content-img"> <div class="content-img">
@ -46,7 +47,9 @@ layout: default
<img src="/assets/images/btr-convene.png" alt="{% t page_logo_alt %}" /> <img src="/assets/images/btr-convene.png" alt="{% t page_logo_alt %}" />
</div> </div>
</div> </div>
<a href="/chat/"><div class="content-expander">{% t chat_secondary_cta %}</div></a> <a href="/chat/"><div class="outlink content-expander">
<span>{% t chat_secondary_cta %}</span>
</a>
</div> </div>
{% endif %} {% endif %}
</div> </div>