When focusing in search input search input is growing left and not covering on the svg icon. But focusing out input is shrinking to the right to be covering the svg icon. I want to the same animation as focusing in (to be reversed) without covering the svg icon. I can start background-color animation to earlier. But I don't want to solve this problem to changing background-color animation time. How can I solve it?
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 62.5%;
box-sizing: border-box;
}
body {
font-family: "Roboto", sans-serif;
font-weight: 400;
line-height: 1.6;
}
.wrap {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-end;
height: 5rem;
width: 100%;
background-color: orangered;
background: #6f42c1;
background: linear-gradient(30deg, #6f42c1 35%, #6610f2 75%, #007bff 100%);
box-shadow: 0px 5px 5px -5px rgba(0, 0, 0, 0.75);
margin-top:5rem;
}
.search-3 {
margin-right: 2rem;
display: inline-block;
position: relative;
height: 3rem;
width: 0;
}
.search-3__text {
display: inline-block;
height: 3rem;
width: 3rem;
background-color: transparent;
border: none;
outline: none;
border-radius: 2px;
font-family: "Roboto Slab", serif;
font-size: 1.6rem;
font-weight: 400;
color: #000;
position: absolute;
top: 0;
right: 0;
z-index: 5;
cursor: pointer;
transition: width 0.4s cubic-bezier(0, 0.795, 0, 1) 0s, background-color 0.2s ease-out 0.4s;
}
.search-3__text::placeholder {
color: transparent;
font-size: 1.5rem;
font-weight: 300;
font-style: italic;
transition: color 0s ease-in-out 0s;
}
.search-3__text:focus {
width: 50rem;
z-index: 3;
cursor: text;
background-color: #fff;
transition: width 0.4s cubic-bezier(0, 0.795, 0, 1) 0.2s, background-color 0.2s ease-in-out 0s;
}
.search-3__text:focus::placeholder {
color: #000;
transition: color 0.2s ease-in-out 0.5s;
}
.search-3__icon {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
height: 3rem;
width: 3rem;
border: none;
position: absolute;
top: 0;
right: 0;
z-index: 4;
cursor: pointer;
}
.search-3__icon svg {
display: inline-block;
height: 2rem;
width: 2rem;
color: #000;
filter: drop-shadow(2px 1px 1px #7A8288);
}
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,400i,700&subset=latin-ext" rel="stylesheet">
</head>
<body>
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-search" viewBox="0 0 26 28">
<title>search</title>
<path d="M18 13c0-3.859-3.141-7-7-7s-7 3.141-7 7 3.141 7 7 7 7-3.141 7-7zM26 26c0 1.094-0.906 2-2 2-0.531 0-1.047-0.219-1.406-0.594l-5.359-5.344c-1.828 1.266-4.016 1.937-6.234 1.937-6.078 0-11-4.922-11-11s4.922-11 11-11 11 4.922 11 11c0 2.219-0.672 4.406-1.937 6.234l5.359 5.359c0.359 0.359 0.578 0.875 0.578 1.406z">
</path>
</symbol>
</defs>
</svg>
<div class="wrap">
<form class="search-3" action="" autocomplete="on">
<input class="search-3__text" id="search-3" name="search-3" type="text" placeholder="Sitede ara.." page_search onfocusout="if(this.value !=''){this.value='';}">
<span class="search-3__icon">
<svg>
<use xlink:href="#icon-search" />
</svg>
</span>
</form>
</div>
</body>
Here's one method.
Don't rely on changing z-index while animating the text input.
Instead, set the icon to pointer-events: none so that the clicks pass through it to the text box underneath.
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 62.5%;
box-sizing: border-box;
}
body {
font-family: "Roboto", sans-serif;
font-weight: 400;
line-height: 1.6;
}
.wrap {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-end;
height: 5rem;
width: 100%;
background-color: orangered;
background: #6f42c1;
background: linear-gradient(30deg, #6f42c1 35%, #6610f2 75%, #007bff 100%);
box-shadow: 0px 5px 5px -5px rgba(0, 0, 0, 0.75);
margin-top:5rem;
}
.search-3 {
margin-right: 2rem;
display: inline-block;
position: relative;
height: 3rem;
width: 0;
}
.search-3__text {
display: inline-block;
height: 3rem;
width: 3rem;
background-color: transparent;
border: none;
outline: none;
border-radius: 2px;
font-family: "Roboto Slab", serif;
font-size: 1.6rem;
font-weight: 400;
color: #000;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
transition: width 0.4s cubic-bezier(0, 0.795, 0, 1) 0s, background-color 0.2s ease-out 0.4s;
}
.search-3__text::placeholder {
color: transparent;
font-size: 1.5rem;
font-weight: 300;
font-style: italic;
transition: color 0s ease-in-out 0s;
}
.search-3__text:focus {
width: 50rem;
cursor: text;
background-color: #fff;
transition: width 0.4s cubic-bezier(0, 0.795, 0, 1) 0.2s, background-color 0.2s ease-in-out 0s;
}
.search-3__text:focus::placeholder {
color: #000;
transition: color 0.2s ease-in-out 0.5s;
}
.search-3__icon {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
height: 3rem;
width: 3rem;
border: none;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
pointer-events: none;
}
.search-3__icon svg {
display: inline-block;
height: 2rem;
width: 2rem;
color: #000;
filter: drop-shadow(2px 1px 1px #7A8288);
}
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,400i,700&subset=latin-ext" rel="stylesheet">
</head>
<body>
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-search" viewBox="0 0 26 28">
<title>search</title>
<path d="M18 13c0-3.859-3.141-7-7-7s-7 3.141-7 7 3.141 7 7 7 7-3.141 7-7zM26 26c0 1.094-0.906 2-2 2-0.531 0-1.047-0.219-1.406-0.594l-5.359-5.344c-1.828 1.266-4.016 1.937-6.234 1.937-6.078 0-11-4.922-11-11s4.922-11 11-11 11 4.922 11 11c0 2.219-0.672 4.406-1.937 6.234l5.359 5.359c0.359 0.359 0.578 0.875 0.578 1.406z">
</path>
</symbol>
</defs>
</svg>
<div class="wrap">
<form class="search-3" action="" autocomplete="on">
<input class="search-3__text" id="search-3" name="search-3" type="text" placeholder="Sitede ara.." page_search onfocusout="if(this.value !=''){this.value='';}">
<span class="search-3__icon">
<svg>
<use xlink:href="#icon-search" />
</svg>
</span>
</form>
</div>
</body>
Related
I have a simple settings menu and I want to position the toggle open and close button at the right position:
So far I'm here:
.base {
position: absolute;
max-width: 30em;
background-color: #fff;
padding: 1.125em 1.5em;
font-size: 1.25em;
border-radius: 1rem;
box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3), 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2);
}
.base::before {
content: "";
position: absolute;
width: 0;
height: 0;
bottom: 100%;
right: 1.5em;
border: 0.75rem solid transparent;
border-top: none;
border-bottom-color: #fff;
filter: drop-shadow(0 -0.0625rem 0.0625rem rgba(0, 0, 0, 0.1));
}
html {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 300;
color: #192229;
background: linear-gradient(135deg, #F4F2F3, #BFC6D0);
}
html, body {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
body {
padding: 0 2rem;
}
label {
font-family: "Montserrat", sans-serif;
font-size: 1.2rem;
cursor: pointer;
display: block;
margin: 1em;
}
label > input {
display: none;
}
label span {
color: #6A759B;
}
label i {
display: inline-block;
width: 64px;
height: 40px;
border-radius: 20px;
vertical-align: middle;
transition: 0.25s 0.09s;
position: relative;
background: #deeff7;
}
label i:after {
content: " ";
display: block;
width: 30px;
height: 30px;
top: 5px;
left: 5px;
border-radius: 50%;
background: #fff;
position: absolute;
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.4);
transition: 0.15s;
}
label > input:checked + i {
background: #1094fb;
}
label > input:checked + i + span {
color: #29316b;
}
label > input:checked + i:after {
transform: translateX(25px);
}
.filter {
position: absolute;
}
.burger {
display: flex;
flex-direction: column;
filter: url(#gooeyness);
padding: 30px;
}
.rect {
background: black;
display: inline-block;
height: 32px;
margin-top: 40px;
transition: transform 500ms;
width: 200px;
}
.rect:nth-child(2) {
transition-delay: 100ms;
}
.rect:nth-child(3) {
transition-delay: 100ms;
}
.burger.active .rect:nth-child(1) {
transform: rotate(-45deg) translateX(-51px) translateY(50px);
}
.burger.active .rect:nth-child(2) {
transform: rotate(45deg);
}
.burger.active .rect:nth-child(3) {
transform: rotate(-45deg) translateX(51px) translateY(-50px);
}
.close {
position: absolute;
cursor: pointer;
transform: scale(0.1);
z-index: 2500;
}
.settings-container {
display: flex;
flex-direction: column;
width: 500px;
justify-content: center;
height: 250px;
align-items: center;
}
<div class="settings-container">
<div class="close">
<svg class="filter" version="1.1">
<defs>
<filter id="gooeyness">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" result="gooeyness" />
<feComposite in="SourceGraphic" in2="gooeyness" operator="atop" />
</filter>
</defs>
</svg>
<div class="burger">
<div class="rect"></div>
<div class="rect"></div>
<div class="rect"></div>
</div>
</div>
<div class="base">
<label>
<input class="cb cb1" type="checkbox" name="social" checked/>
<i></i>
<span>آموزش کارت حتی در صورت پاسخ صحیح</span>
</label>
<label>
<input class="cb cb1" type="checkbox" name="social" checked/>
<i></i>
<span>ضبط صدا در صورت استفاده از تشخیص گفتار</span>
</label>
<label>
<input class="cb cb1" type="checkbox" name="social" checked/>
<i></i>
<span>نمایش جلوه های ویژه ی صوتی و بصری</span>
</label>
</div>
</div>
The issue is I don't know how to position the toggle button at the right place! here is where I want it to be:
Notice that here on SO you can not see the button here is a codepen for it:
https://codepen.io/pixy-dixy/pen/OJjJygg?editors=1100
So the fist issue is that your code produces an different to the one you show in your screenshot. The hamburger menu is in a different place as shown in the image below.
But your problem really stems from a few issues in your css. You can see the step by step below or just jump to the full css at the end. The first is to get it to do what your screen shot is showing you need to do this. Please not I have just uncommented out the code so you can see the changes
.close {
/*position: absolute;*/
cursor: pointer;
transform: scale(0.1);
z-index: 2500;
}
.settings-container {
/*display: flex;
flex-direction: column;*/
width: 500px;
justify-content: center;
/*height: 250px;*/
align-items: center;
}
this now produces the below
Then for reference purposes I have added a border to your settings-container to illustrate what is happening.
The code that cause this is the transform: scale(0.1) shown below and commented out.
.close {
/*position: absolute;*/
cursor: pointer;
/*transform: scale(0.1);*/
z-index: 2500;
}
This now produces this result.
Now you can change the burger menu rectangles to the correct size rather than using transform.
.rect {
background: black;
display: inline-block;
height: 5px;
margin-top: 5px;
transition: transform 500ms;
width: 30px;
}
.close {
/*position: absolute;*/
cursor: pointer;
/*transform: scale(0.1);*/
z-index: 2500;
}
This produces the below result
now you can just position the hamburger menu to right.
.close {
display: flex;
justify-content:end;
/*position: absolute;*/
cursor: pointer;
/*transform: scale(0.1);*/
z-index: 2500;
}
it will look like this
final touches add margin (red border is removed as it was only for illustrative purposes). Your filter was also causing layout issues so I have commented it out.
.burger {
margin-bottom: 20px;
margin-right: 35px;
display: flex;
flex-direction: column;
filter: url(#gooeyness);
/*padding: 30px;*/
}
full css with commented our code
.base {
position: absolute;
max-width: 30em;
background-color: #fff;
padding: 1.125em 1.5em;
font-size: 1.25em;
border-radius: 1rem;
box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3), 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2);
}
.base::before {
content: "";
position: absolute;
width: 0;
height: 0;
bottom: 100%;
right: 1.5em;
border: 0.75rem solid transparent;
border-top: none;
border-bottom-color: #fff;
filter: drop-shadow(0 -0.0625rem 0.0625rem rgba(0, 0, 0, 0.1));
}
html {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 300;
color: #192229;
background: linear-gradient(135deg, #F4F2F3, #BFC6D0);
}
html, body {
height: 100%;
display: flex;
justify-content: center;
/*align-items: center;*/
}
body {
padding: 0 2rem;
}
label {
font-family: "Montserrat", sans-serif;
font-size: 1.2rem;
cursor: pointer;
display: block;
margin: 1em;
}
label > input {
display: none;
}
label span {
color: #6A759B;
}
label i {
display: inline-block;
width: 64px;
height: 40px;
border-radius: 20px;
vertical-align: middle;
transition: 0.25s 0.09s;
position: relative;
background: #deeff7;
}
label i:after {
content: " ";
display: block;
width: 30px;
height: 30px;
top: 5px;
left: 5px;
border-radius: 50%;
background: #fff;
position: absolute;
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.4);
transition: 0.15s;
}
label > input:checked + i {
background: #1094fb;
}
label > input:checked + i + span {
color: #29316b;
}
label > input:checked + i:after {
transform: translateX(25px);
}
.filter {
position: absolute;
}
.burger {
margin-bottom: 20px;
margin-right: 35px;
display: flex;
flex-direction: column;
filter: url(#gooeyness);
/*padding: 30px;*/
}
.rect {
background: black;
display: inline-block;
height: 5px;
margin-top: 5px;
transition: transform 500ms;
width: 30px;
}
.rect:nth-child(2) {
transition-delay: 100ms;
}
.rect:nth-child(3) {
transition-delay: 100ms;
}
.burger.active .rect:nth-child(1) {
transform: rotate(-45deg) translateX(-6px) translateY(6px);
}
.burger.active .rect:nth-child(2) {
transform: rotate(45deg);
}
.burger.active .rect:nth-child(3) {
transform: rotate(-45deg) translateX(6px) translateY(-8px);
}
.close {
display: flex;
justify-content:end;
/*position: absolute;*/
cursor: pointer;
/*transform: scale(0.1);*/
z-index: 2500;
}
.border{
border:1px solid red;
}
.settings-container {
/*display: flex;
flex-direction: column;*/
width: 500px;
/*justify-content: center;
height: 250px;
align-items: center;*/
}
MDN
CSS positioning is used here to place the element in the desired spot.
Notice that I added position: relative to .settings-container and position: absolute to .close.
The addition of position: relative is used because...
It (the absolutely positioned element) is positioned relative to its closest positioned ancestor, if any;
otherwise, it is placed relative to the initial containing block.
Then the element you are positioning gets position: absolute which will place the element relative to .settings-container which is now the "closest positioned ancestor".
.base {
position: relative;
max-width: 30em;
background-color: #fff;
padding: 1.125em 1.5em;
font-size: 1.25em;
border-radius: 1rem;
box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3), 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2);
}
.base::before {
content: "";
position: absolute;
width: 0;
height: 0;
bottom: 100%;
right: 1.5em;
border: 0.75rem solid transparent;
border-top: none;
border-bottom-color: #fff;
filter: drop-shadow(0 -0.0625rem 0.0625rem rgba(0, 0, 0, 0.1));
}
html {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 300;
color: #192229;
background: linear-gradient(135deg, #F4F2F3, #BFC6D0);
}
html,
body {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
body {
padding: 0 2rem;
}
label {
font-family: "Montserrat", sans-serif;
font-size: 1.2rem;
cursor: pointer;
display: block;
margin: 1em;
}
label>input {
display: none;
}
label span {
color: #6A759B;
}
label i {
display: inline-block;
width: 64px;
height: 40px;
border-radius: 20px;
vertical-align: middle;
transition: 0.25s 0.09s;
position: relative;
background: #deeff7;
}
label i:after {
content: " ";
display: block;
width: 30px;
height: 30px;
top: 5px;
left: 5px;
border-radius: 50%;
background: #fff;
position: absolute;
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.4);
transition: 0.15s;
}
label>input:checked+i {
background: #1094fb;
}
label>input:checked+i+span {
color: #29316b;
}
label>input:checked+i:after {
transform: translateX(25px);
}
.filter {
position: absolute;
}
.burger {
display: flex;
flex-direction: column;
filter: url(#gooeyness);
padding: 30px;
}
.rect {
background: black;
display: inline-block;
height: 32px;
margin-top: 40px;
transition: transform 500ms;
width: 200px;
}
.rect:nth-child(2) {
transition-delay: 100ms;
}
.rect:nth-child(3) {
transition-delay: 100ms;
}
.burger.active .rect:nth-child(1) {
transform: rotate(-45deg) translateX(-51px) translateY(50px);
}
.burger.active .rect:nth-child(2) {
transform: rotate(45deg);
}
.burger.active .rect:nth-child(3) {
transform: rotate(-45deg) translateX(51px) translateY(-50px);
}
.close {
cursor: pointer;
transform: scale(0.1);
position: absolute; /* added */
top: -170px; /* added */
right: -88px; /* added */
}
.settings-container {
display: flex;
flex-direction: column;
position: relative; /* added */
}
<div class="settings-container">
<div class="close">
<svg class="filter" version="1.1">
<defs>
<filter id="gooeyness">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" result="gooeyness" />
<feComposite in="SourceGraphic" in2="gooeyness" operator="atop" />
</filter>
</defs>
</svg>
<div class="burger">
<div class="rect"></div>
<div class="rect"></div>
<div class="rect"></div>
</div>
</div>
<div class="base">
<label>
<input class="cb cb1" type="checkbox" name="social" checked/>
<i></i>
<span>آموزش کارت حتی در صورت پاسخ صحیح</span>
</label>
<label>
<input class="cb cb1" type="checkbox" name="social" checked/>
<i></i>
<span>ضبط صدا در صورت استفاده از تشخیص گفتار</span>
</label>
<label>
<input class="cb cb1" type="checkbox" name="social" checked/>
<i></i>
<span>نمایش جلوه های ویژه ی صوتی و بصری</span>
</label>
</div>
</div>
move it using the position tag in CSS
https://www.w3schools.com/css/css_positioning.asp
Just add position relative to settings-container so the children of this container will count space Regarding to its boundries and then try this.
.base {
position: absolute;
top: 10px: // Change 10px according to your requirement.
right: 10px: // Change 10px according to your requirement.
max-width: 30em;
background-color: #fff;
padding: 1.125em 1.5em;
font-size: 1.25em;
border-radius: 1rem;
box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3), 0 0.0625rem 0.125rem
rgba(0, 0, 0, 0.2);
}
This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 2 years ago.
How do I move my more button from being aligned in the middle of the div, to being aligned to the top of the div (where the x mark is)?
Here is my jsfiddle: https://jsfiddle.net/z6syuLfv/.
My code is as follows:
.course-sidebar-audio-item-container {
display: flex;
align-items: center;
width: 100%;
}
.course-sidebar-audio-item-icon-container {
align-items: center;
align-self: flex-start;
display: flex;
flex-shrink: 0;
height: 56px;
justify-content: center;
width: 56px;
background-color: rgba(80, 102, 144, 0.1);
color: #506690;
border-radius: 5px;
}
.course-sidebar-audio-item-icon-container:hover {
background-color: rgba(80, 102, 144, 0.15);
transition: background-color 0.15s ease-in-out;
cursor: pointer;
}
.course-sidebar-audio-item-icon {
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: relative;
vertical-align: text-bottom;
box-sizing: border-box;
}
.course-sidebar-audio-item-details {
-webkit-font-smoothing: antialiased;
font-weight: 400;
line-height: 1.6;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
width: 100%;
overflow: hidden;
padding-left: 12px;
}
.course-sidebar-audio-item-title {
line-height: 1.6;
font-size: 16px;
}
.course-sidebar-audio-item-duration {
color: #506690;
font-size: 14px;
}
.course-sidebar-audio-item-toolbar-menu-container {
font-size: 1.4rem;
font-weight: 400;
line-height: 1.6;
}
.course-sidebar-audio-item-toolbar-menu {
font-size: 1.4rem;
font-weight: 400;
cursor: pointer;
display: inline-flex;
line-height: 16px;
top: 4px;
}
.course-sidebar-audio-item-toolbar-menu-button {
font-size: 1rem;
display: inline-block;
color: #506690;
height: 16px;
line-height: 16px;
font-weight: 700;
text-transform: uppercase;
white-space: nowrap;
outline: none;
border-radius: 8px;
cursor: pointer;
border: 0;
margin: 0;
background-color: rgba(80, 102, 144, 0.1);
}
.course-sidebar-audio-item-toolbar-menu-button:hover {
background-color: rgba(80, 102, 144, 0.15);
transition: opacity 0.15s ease-in-out;
}
.course-sidebar-audio-item-toolbar-menu-icon > svg {
cursor: pointer;
display: inline-block;
box-sizing: border-box;
width: 16px;
height: 16px;
margin-top: -1px;
vertical-align: top;
}
.sidebar-step-toolbar-container {
transition: opacity 150ms ease-in-out 0s;
opacity: 1;
position: absolute;
will-change: transform;
z-index: 10;
width: 150px;
margin-top: 85px;
right: 24px;
}
.sidebar-step-toolbar-container-border {
padding: 0;
border-radius: 4px;
margin: 8px 0;
background-color: #fff;
box-shadow: 0 0 0 1px rgba(14, 19, 24, 0.07), 0 2px 12px rgba(14, 19, 24, 0.2);
}
.sidebar-step-toolbar-button-container {
padding: 16px;
max-height: 80vh;
overflow-y: auto;
z-index: 10;
}
.sidebar-step-toolbar-button-row {
display: grid;
}
.sidebar-step-toolbar-button {
border-radius: 4px;
background: transparent;
border: 0;
cursor: pointer;
padding: 0 0.5rem;
margin: 0.25rem 0;
flex: 1 0 50%;
width: 7.5rem;
outline: none;
text-decoration: none;
height: 40px;
transition: background-color 0.1s linear;
font-weight: 400;
line-height: 1.6;
font-size: 0.9rem;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
}
.sidebar-step-toolbar-button-content {
align-items: center;
display: flex;
height: 100%;
line-height: 1.6;
min-width: 0;
cursor: pointer;
}
.sidebar-step-toolbar-button:hover {
background-color: #edf0f2 !important;
}
<div class="course-sidebar-audio-item">
<div class="course-sidebar-audio-item-container">
<div class="course-sidebar-audio-item-icon-container">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.248 5.35c-.138 0-.75.336-.75.75v8.91a3.25 3.25 0 1 0 1.5 2.74c0-.114.011.061 0-.05.011-.052 0-.395 0-.45V6.85l9.997-2v7.16a3.25 3.25 0 1 0 1.5 2.74c0-.114.011.061 0-.05.011-.052 0-.395 0-.45l-.018-10.4c0-.414-.318-.85-.732-.85L8.248 5.35zm-.75 12.4a1.75 1.75 0 1 1-3.499 0 1.75 1.75 0 0 1 3.5 0zm11.497-3a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0z" fill="#506690"></path>
</svg>
</div>
<div class="course-sidebar-audio-item-details">
<div class="course-sidebar-audio-item-title">testing_startup_ideas.mp3</div>
<div class="course-sidebar-audio-item-duration">6:20</div>
</div>
<div class="course-sidebar-audio-item-toolbar-menu-container">
<span class="course-sidebar-audio-item-toolbar-menu">
<button class="course-sidebar-audio-item-toolbar-menu-button">
<span class="course-sidebar-audio-item-toolbar-menu-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path
fill="#506690"
d="M3.25 9.25a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5zm4.75 0a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5zm4.75 0a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5z"
fill-rule="evenodd"
></path>
</svg>
</span>
</button>
</span>
</div>
</div>
</div>
Add align-self: flex-start to .course-sidebar-audio-item-toolbar-menu-container:
Edit: To move the contained button even further up, also add line-height: 0;. That way the button is aligned to the top border of .course-sidebar-audio-item-toolbar-menu-container.
There are other ways which lead to the same result, this is just one of them.
.course-sidebar-audio-item-container {
display: flex;
align-items: center;
width: 100%;
}
.course-sidebar-audio-item-icon-container {
align-items: center;
align-self: flex-start;
display: flex;
flex-shrink: 0;
height: 56px;
justify-content: center;
width: 56px;
background-color: rgba(80, 102, 144, 0.1);
color: #506690;
border-radius: 5px;
}
.course-sidebar-audio-item-icon-container:hover {
background-color: rgba(80, 102, 144, 0.15);
transition: background-color 0.15s ease-in-out;
cursor: pointer;
}
.course-sidebar-audio-item-icon {
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: relative;
vertical-align: text-bottom;
box-sizing: border-box;
}
.course-sidebar-audio-item-details {
-webkit-font-smoothing: antialiased;
font-weight: 400;
line-height: 1.6;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
width: 100%;
overflow: hidden;
padding-left: 12px;
}
.course-sidebar-audio-item-title {
line-height: 1.6;
font-size: 16px;
}
.course-sidebar-audio-item-duration {
color: #506690;
font-size: 14px;
}
.course-sidebar-audio-item-toolbar-menu-container {
font-size: 1.4rem;
font-weight: 400;
line-height: 1.6;
align-self: flex-start;
line-height: 0;
}
.course-sidebar-audio-item-toolbar-menu {
font-size: 1.4rem;
font-weight: 400;
cursor: pointer;
display: inline-flex;
line-height: 16px;
top: 4px;
}
.course-sidebar-audio-item-toolbar-menu-button {
font-size: 1rem;
display: inline-block;
color: #506690;
height: 16px;
line-height: 16px;
font-weight: 700;
text-transform: uppercase;
white-space: nowrap;
outline: none;
border-radius: 8px;
cursor: pointer;
border: 0;
margin: 0;
background-color: rgba(80, 102, 144, 0.1);
}
.course-sidebar-audio-item-toolbar-menu-button:hover {
background-color: rgba(80, 102, 144, 0.15);
transition: opacity 0.15s ease-in-out;
}
.course-sidebar-audio-item-toolbar-menu-icon > svg {
cursor: pointer;
display: inline-block;
box-sizing: border-box;
width: 16px;
height: 16px;
margin-top: -1px;
vertical-align: top;
}
.sidebar-step-toolbar-container {
transition: opacity 150ms ease-in-out 0s;
opacity: 1;
position: absolute;
will-change: transform;
z-index: 10;
width: 150px;
margin-top: 85px;
right: 24px;
}
.sidebar-step-toolbar-container-border {
padding: 0;
border-radius: 4px;
margin: 8px 0;
background-color: #fff;
box-shadow: 0 0 0 1px rgba(14, 19, 24, 0.07), 0 2px 12px rgba(14, 19, 24, 0.2);
}
.sidebar-step-toolbar-button-container {
padding: 16px;
max-height: 80vh;
overflow-y: auto;
z-index: 10;
}
.sidebar-step-toolbar-button-row {
display: grid;
}
.sidebar-step-toolbar-button {
border-radius: 4px;
background: transparent;
border: 0;
cursor: pointer;
padding: 0 0.5rem;
margin: 0.25rem 0;
flex: 1 0 50%;
width: 7.5rem;
outline: none;
text-decoration: none;
height: 40px;
transition: background-color 0.1s linear;
font-weight: 400;
line-height: 1.6;
font-size: 0.9rem;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
}
.sidebar-step-toolbar-button-content {
align-items: center;
display: flex;
height: 100%;
line-height: 1.6;
min-width: 0;
cursor: pointer;
}
.sidebar-step-toolbar-button:hover {
background-color: #edf0f2 !important;
}
<div class="course-sidebar-audio-item">
<div class="course-sidebar-audio-item-container">
<div class="course-sidebar-audio-item-icon-container">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.248 5.35c-.138 0-.75.336-.75.75v8.91a3.25 3.25 0 1 0 1.5 2.74c0-.114.011.061 0-.05.011-.052 0-.395 0-.45V6.85l9.997-2v7.16a3.25 3.25 0 1 0 1.5 2.74c0-.114.011.061 0-.05.011-.052 0-.395 0-.45l-.018-10.4c0-.414-.318-.85-.732-.85L8.248 5.35zm-.75 12.4a1.75 1.75 0 1 1-3.499 0 1.75 1.75 0 0 1 3.5 0zm11.497-3a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0z" fill="#506690"></path>
</svg>
</div>
<div class="course-sidebar-audio-item-details">
<div class="course-sidebar-audio-item-title">testing_startup_ideas.mp3</div>
<div class="course-sidebar-audio-item-duration">6:20</div>
</div>
<div class="course-sidebar-audio-item-toolbar-menu-container">
<span class="course-sidebar-audio-item-toolbar-menu">
<button class="course-sidebar-audio-item-toolbar-menu-button">
<span class="course-sidebar-audio-item-toolbar-menu-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path
fill="#506690"
d="M3.25 9.25a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5zm4.75 0a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5zm4.75 0a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5z"
fill-rule="evenodd"
></path>
</svg>
</span>
</button>
</span>
</div>
</div>
</div>
I'm agree with Johannes, also you can add vertical-align: top; in .course-sidebar-audio-item-toolbar-menu to position the button even upper.
$(document).ready(function(){
//Check to see if the window is top if not then display button
$(window).scroll(function(){
if ($(this).scrollTop() > $(window).height()) {
$('#scroll-top').fadeIn(300);
$('#scroll-top').css('display', 'flex');
} else {
$('#scroll-top').fadeOut(300);
}
});
//Click event to scroll to top
$('#scroll-top').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
//If Cookie-container is visable add bottom value
if ($("#cookie-notification-container").is(':visible')){
$("#scroll-top").css('bottom', 80 + 'px');
} else {
$("#scroll-top").css('bottom', '20px');}
});
/* ======================================================
► SCROLL-TOP
====================================================== */
#scroll-top{
display: none;
justify-content: center;
align-items: center;
position: fixed;
bottom: 20px;
right: 20px;
z-index: 99;
border: none;
outline: none;
background: -webkit-linear-gradient(45deg, #ff91a2 0%,#ffabb7 100%);
background: <?= $headerBackgroundColor; ?>;
color: #fff;
cursor: pointer;
border-radius: 100%;
font-size: 18px;
box-shadow: 0px 6px 10px -5px rgba(0, 0, 0, 0.2);
width: 50px;
height: 50px;
overflow: hidden;
}
#scroll-top::after{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.0);
border-radius: 100%;
z-index: -1;
transform: scale(0);
transform-origin: center;
transition: transform 0.25s, border-radius 0.25s, background 0.25s;
}
#scroll-top:hover::after{
transform: scale(1);
border-radius: 100%;
transform-origin: center;
background: rgba(255,255,255,0.15);
}
#scroll-top svg{
transform: translateY(0%);
opacity: 1;
animation: fade-up 0.4s ease-out;
animation-delay: 0.2s;
animation-fill-mode: backwards;
fill:#ffffff;
}
#keyframes fade-up{
0%{transform: translateY(80%); opacity:0 ;}
80%{opacity:1 ;}
100%{transform: translateY(0%); opacity:1 ;}
}
/* ======================================================
► CREDITS
====================================================== */
#credits-container{
background: #2D2C2B;
min-height: 60px;
width: 100%;
display: flex;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
box-sizing: inherit;
}
#credits-container .wrapper #credits{
height: 100%;
width: 100%;
min-height: 60px;
display: inline-flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 20px;
}
#credits-container .wrapper #credits p{
color: rgba(255,255,255,0.6);
letter-spacing: 0.005em;
font-size: 0.95em;
line-height: 1.2;
display: block;
margin: 0em 0;
margin-block-start: 0em;
margin-block-end: 0em;
margin-inline-start: 0px;
margin-inline-end: 0px;
text-align:center;
}
#media only screen and (max-width: 960px) {
#credits-container .wrapper #credits p{
font-size: 0.90em;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height: 2000px;">
<button id="scroll-top" onclick="topFunction()">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 460" width="15" height="15">
<path d="M782.45,357.08l-340-340a60.07,60.07,0,0,0-84.86,0l-340,340a60,60,0,0,0,84.86,84.86L400,144.35,697.59,441.94a60,60,0,0,0,84.86-84.86Z" transform="translate(0 0.49)"/>
</svg>
</button>
</div>
<div id="credits-container">
<div class="wrapper">
<div id="credits">
<p>Created by Jhon Doh - ©<?= date("Y");?> Test Design.</p>
</div>
</div>
</div>
I have a scroll to top button that I would like to stick above the footer/credits (let it float 20 px above the credits/footer). When I apply sticky instead of fixed it does not work properly. I was wondering if someone could help me out. I am pretty new with this stuff. I have tried something similar with the cookie notification in the script(See below). But it is a bad temporary solution.
I've made animated scroll to up button. When user hover on the button, up arrow animation plays in side of the button. I've add overflow:hidden; code for hidden overflowed arrow animation out side the button area. This approach works on chrome, opera, firefox. But outside the button arrow animation don't hide on macOs safari. How can i hide arrow animation out side the button area on macOs safari.
Sass(Scss)
// COLOR VARIABLES
$color-white: #fff;
$color-gray-100: #f8f9fa;
$color-gray-200: #e9ecef;
$color-gray-300: #dee2e6;
$color-gray-400: #ced4da;
$color-gray-500: #999;
$color-gray-600: #7A8288;
$color-gray-700: #52575C;
$color-gray-800: #3A3F44;
$color-gray-900: #272B30;
$color-black: #000;
$sidebar_opacity: 0.9;
#mixin flex-vCenter($justify-content:center) {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: $justify-content;
}
////////////////// Animation //////////////////
#keyframes move_up {
from {
transform: translateY(4rem);
}
to {
transform: translateY(-4rem);
}
}
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
// This defines what 1rem is
font-size: 62.5%; //1 rem = 10px; 10px/16px = 62.5%
box-sizing: border-box;
}
body {
font-weight: 400;
line-height: 1.6;
background-color: $color-gray-300;
}
.wrapper{
position: relative;
height: 50rem;
width: 50rem;
top:1rem;
left:10rem;
background-color: $color-gray-600;
& &__scroll_top {
position: absolute;
bottom: 3rem;
right: 3rem;
}
}
.scroll_top__btn {
&,
&:link,
&:visited {
#include flex-vCenter;
cursor: pointer;
opacity: $sidebar_opacity - .5;
background-color: $color-gray-200;
height: 4.5rem;
width: 4.5rem;
display: block;
border-radius: 5px;
transition: all .2s;
//Change for the <button> element
border: none;
overflow:hidden;
}
&:hover {
transform: translateY(-5px);
opacity: $sidebar_opacity;
}
&:active,
&:focus {
outline: none;
transform: translateY(-1px);
}
&-icon{
height: 2.5rem;
width: 2.5rem;
fill: $color-gray-900;
filter: drop-shadow( 0 5px 2px rgba($color-black, .5));
}
&:hover &-icon{
animation: move_up .5s linear infinite;
}
}
#keyframes move_up {
from {
transform: translateY(4rem);
}
to {
transform: translateY(-4rem);
}
}
*, *::after, *::before {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 62.5%;
box-sizing: border-box;
}
body {
font-weight: 400;
line-height: 1.6;
background-color: #dee2e6;
}
.wrapper {
position: relative;
height: 50rem;
width: 50rem;
top: 1rem;
left: 10rem;
background-color: #7a8288;
}
.wrapper .wrapper__scroll_top {
position: absolute;
bottom: 3rem;
right: 3rem;
}
.scroll_top__btn, .scroll_top__btn:link, .scroll_top__btn:visited {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0.4;
background-color: #e9ecef;
height: 4.5rem;
width: 4.5rem;
display: block;
border-radius: 5px;
transition: all 0.2s;
border: none;
overflow: hidden;
}
.scroll_top__btn:hover {
transform: translateY(-5px);
opacity: 0.9;
}
.scroll_top__btn:active, .scroll_top__btn:focus {
outline: none;
transform: translateY(-1px);
}
.scroll_top__btn-icon {
height: 2.5rem;
width: 2.5rem;
fill: #272b30;
filter: drop-shadow(0 5px 2px rgba(0, 0, 0, .5));
}
.scroll_top__btn:hover .scroll_top__btn-icon {
animation: move_up 0.5s linear infinite;
}
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-arrow-up" viewBox="0 0 32 32">
<title>arrow-up</title>
<path d="M16 1l-15 15h9v16h12v-16h9z"></path>
</symbol>
</defs>
</svg>
<div class="wrapper">
<div class="wrapper__scroll_top">
<button class="scroll_top__btn" type="button">
<svg class="scroll_top__btn-icon">
<use xlink:href="#icon-arrow-up" />
</svg>
</button>
</div>
</div>
Here's the solution, I've simplified the syntax for you a little bit
This is your SCSS, the code snippet has its compiled form
// COLOR VARIABLES
$color-white: #fff;
$color-gray-100: #f8f9fa;
$color-gray-200: #e9ecef;
$color-gray-300: #dee2e6;
$color-gray-400: #ced4da;
$color-gray-500: #999;
$color-gray-600: #7A8288;
$color-gray-700: #52575C;
$color-gray-800: #3A3F44;
$color-gray-900: #272B30;
$color-black: #000;
$sidebar_opacity: 0.9;
#mixin flex-vCenter($justify-content:center) {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: $justify-content;
}
////////////////// Animation //////////////////
#keyframes move_up {
from {
transform: translateY(4rem);
}
to {
transform: translateY(-4rem);
}
}
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
// This defines what 1rem is
font-size: 62.5%; //1 rem = 10px; 10px/16px = 62.5%
box-sizing: border-box;
}
body {
font-weight: 400;
line-height: 1.6;
background-color: $color-gray-300;
}
.wrapper{
position: relative;
height: 30rem;
width: 30rem;
top:1rem;
left:10rem;
background-color: $color-gray-600;
}
.scroll_top__btn {
display: block;
text-align: center;
position: absolute;
bottom: 3rem;
right: 3rem;
&,
&:link,
&:visited {
#include flex-vCenter;
cursor: pointer;
opacity: $sidebar_opacity - .5;
background-color: $color-gray-200;
height: 4.5rem;
width: 4.5rem;
display: block;
border-radius: 5px;
transition: all .2s;
border: none;
overflow:hidden;
}
&:hover {
transform: translateY(-5px);
opacity: $sidebar_opacity;
}
&:active,
&:focus {
outline: none;
transform: translateY(-1px);
}
&-icon{
transform: translateY(0.8rem);
height: 2.5rem;
width: 2.5rem;
fill: $color-black;
filter: drop-shadow( 0 5px 2px rgba($color-black, .5));
}
&:hover &-icon{
animation: move_up .5s linear infinite;
}
}
#keyframes move_up {
from {
transform: translateY(4rem);
}
to {
transform: translateY(-4rem);
}
}
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 62.5%;
box-sizing: border-box;
}
body {
font-weight: 400;
line-height: 1.6;
background-color: #dee2e6;
}
.wrapper {
position: relative;
height: 30rem;
width: 30rem;
top: 1rem;
left: 10rem;
background-color: #7A8288;
}
.scroll_top__btn {
display: block;
text-align: center;
position: absolute;
bottom: 3rem;
right: 3rem;
}
.scroll_top__btn, .scroll_top__btn:link, .scroll_top__btn:visited {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0.4;
background-color: #e9ecef;
height: 4.5rem;
width: 4.5rem;
display: block;
border-radius: 5px;
transition: all .2s;
border: none;
overflow: hidden;
}
.scroll_top__btn:hover {
transform: translateY(-5px);
opacity: 0.9;
}
.scroll_top__btn:active, .scroll_top__btn:focus {
outline: none;
transform: translateY(-1px);
}
.scroll_top__btn-icon {
transform: translateY(0.8rem);
height: 2.5rem;
width: 2.5rem;
fill: #000;
filter: drop-shadow(0 5px 2px rgba(0, 0, 0, 0.5));
}
.scroll_top__btn:hover .scroll_top__btn-icon {
animation: move_up .5s linear infinite;
}
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-arrow-up" viewBox="0 0 32 32">
<title>arrow-up</title>
<path d="M16 1l-15 15h9v16h12v-16h9z"></path>
</symbol>
</defs>
</svg>
<div class="wrapper">
<a href="javascript:void;" class="scroll_top__btn" type="button">
<svg class="scroll_top__btn-icon">
<use xlink:href="#icon-arrow-up" />
</svg>
</a>
</div>
I was under the impression that if an element has a set height & width of 0, padding wouldn't push the width/height if the box-sizing is also set to border box, the thing is, this does seem to be the case, but as soon as I add a 1px solid border, the padding gets applied.
div#search > form#sform > a { display: inline-block; width: 20%; }
input#q { width: 80%; display: inline-block; border: 0px; }
div#search > form#sform > a { display: inline; width: 20%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70' style='width:100%;height:100%' viewBox='0 0 70 70'%3E%3Cg class='base'%3E%3Cg fill='none' fill-rule='evenodd' class='main-fill'%3E%3Cpath d='M33.765 17.294C26.725 17.294 21 23.02 21 30.06c0 7.04 5.725 12.765 12.765 12.765 1.876 0 3.657-.416 5.263-1.146l6.266 9.793c.383.663.871 1.235 1.647 1.235 1.202 0 2.059-.818 2.059-2.059.007-.347-.225-.911-.412-1.235l-6.305-9.857a12.726 12.726 0 0 0 4.246-9.496c0-7.04-5.724-12.765-12.764-12.765zm0 1.647c6.15 0 11.117 4.968 11.117 11.118s-4.967 11.117-11.117 11.117A11.105 11.105 0 0 1 22.647 30.06c0-6.15 4.968-11.118 11.118-11.118z' class='main-fill'/%3E%3C/g%3E%3C/g%3E%3Cstyle%3E.main-fill%7Bfill:%23fff%7D%3C/style%3E%3C/svg%3E"); padding: 13px 10%; background-repeat: no-repeat; background-color: #a03f6e; -webkit-background-size: 50px 50px; -moz-background-size: 50px; -o-background-size: 50px; background-size: 50px; background-position: center center; margin: 0px; height: 40px; position: relative; top: 10px; left: 0px; }
div#search { position: absolute; top: 125px; left: 0; right: 0; margin: auto; width: 100%; max-width: 1200px; z-index: 15; background-color: white; height: 40px; }
div#search:focus, div#search:focus-within { outline: 1px solid #dadada; }
div#search input#q { width: 80%; display: inline; border: 0px; height: 40px; padding-left: 6px; float: left; height: 0px; width: 0px; padding: 0px; padding-left: 10px; border-bottom: 1px solid #aaa; font-size: 20px; font-family: 'Montserrat'; text-align: center; -webkit-box-shadow: inset 0 0 20px 20px white; -moz-box-shadow: inset 0 0 20px 20px white; box-shadow: inset 0 0 20px 20px white; -webkit-transition: 0.2s all ease-in; -o-transition: 0.2s all ease-in; -moz-transition: 0.2s all ease-in; transition: 0.2s all ease-in; }
div#search input#q:focus { outline-offset: 1px; }
input#q:focus { font-weight: 600; color: #444; -webkit-transition: 0.2s all ease-in; -o-transition: 0.2s all ease-in; -moz-transition: 0.2s all ease-in; transition: 0.2s all ease-in; }
div#search input#q::-webkit-input-placeholder { font-size: 14px; }
div#search input#q:-moz-placeholder { font-size: 14px; }
div#search input#q::-moz-placeholder { font-size: 14px; }
div#search input#q:-ms-input-placeholder { font-size: 14px; }
div#search input#q::-ms-input-placeholder { font-size: 14px; }
div#search input#q::placeholder { font-size: 14px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="search">
<form action="#" method="get" id="sform" name="sform">
<input id="q" type="text" placeholder="Search...">
<a onclick="if ($('#search input#q').val().length > 3) {document.sform.submit()}else if($('input#q').width() == 0){$('#search input').height('40px').animate({width:'80%'},350);}else{$('#search input').focus();}" rel="nofollow"></a>
</form>
</div>
Tick the border-bottom on/off on the input and watch the padding be applied/unapplied
Am I going crazy or is this what should happen? I mean, personally I'd think it'd be the other way round, padding enables border.
Also if it helps, Chrome 68 Win10.