Skip to content

Commit

Permalink
reduced size of buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
romer8 committed Nov 18, 2024
1 parent 39854a6 commit 4845cd8
Show file tree
Hide file tree
Showing 2 changed files with 15 additions and 13 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@

.middle input[type="radio"]:checked + .box span {
color: white;
transform: translateY(35px); /* Adjusted from 70px */
transform: translateY(15px); /* Adjusted from 35px */
}

.middle input[type="radio"]:checked + .box span:before {
Expand All @@ -139,8 +139,8 @@
}

.middle .box {
width: 100px; /* Adjusted from 200px */
height: 100px; /* Adjusted from 200px */
width: 100px; /* Reduced from 100px */
height: 50px; /* Reduced from 100px */
background-color: #fff;
transition: all 250ms ease;
will-change: transform;
Expand All @@ -153,12 +153,12 @@
}

.middle .box:active {
transform: translateY(5px); /* Adjusted from 10px */
transform: translateY(2px); /* Adjusted from 10px */
}

.middle .box span {
position: absolute;
transform: translate(0, 30px); /* Adjusted from 60px */
transform: translate(0, 15px); /* Adjusted from 30px */
left: 0;
right: 0;
transition: all 300ms ease;
Expand All @@ -168,10 +168,10 @@
}

.middle .box span:before {
font-size: 0.8em; /* Adjusted from 1.2em */
font-size: 0.6em; /* Reduced font size */
transform: translateY(-20px); /* Adjusted from -40px */
font-family: FontAwesome;
display: block;
transform: translateY(-40px); /* Adjusted from -80px */
opacity: 0;
transition: all 300ms ease-in-out;
font-weight: normal;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,17 +27,19 @@
{% block content %}
<div class="middle">
<label>
<input type="radio" name="radio" value="all" checked />
<div class="front-end box">
<span>All</span>
<input type="radio" name="radio" value="curated" checked />
<div class="back-end box">
<span>Curated</span>
</div>
</label>

<label>
<input type="radio" name="radio" value="curated" />
<div class="back-end box">
<span>Curated</span>
<input type="radio" name="radio" value="all" />
<div class="front-end box">
<span>All</span>
</div>
</label>

</div>

<div id="placeholder-hydroshare-resources"></div>
Expand Down

0 comments on commit 4845cd8

Please sign in to comment.