F_A_8_Exchange_app/src/style/components/searchLine.scss

$color: #FD7F71;
$background: #F7FBFB;
$background-2: #EAF5F5;
$background-3: #BBD8D8;
$primary: #FD7F71;
$white: #fff;
$breakpoint: 768px;
.searchInput::-webkit-input-placeholder, .button {
    font-family: 'roboto', sans-serif;
    transition: all 0.3s ease-in-out;
  }


.searchInput{   
margin: 40px 25px;
width: 75%;
display: block;
border: none;
padding: 10px 0;
border-bottom: solid 1px $color;
transition: all 0.3s cubic-bezier(.64,.09,.08,1);
background: linear-gradient(to bottom, rgba(255,255,255,0) 96%, $color 4%);
background-position: -700px 0;
background-size: 700px 100%;
background-repeat: no-repeat;
color: darken($color,1%);
&:focus {
  box-shadow: none;
  outline: none;
  background-position: 0 0;
  &::-webkit-input-placeholder {
    text-indent: 700px; transition: text-indent 0.5s ease;
  }
}
}
.searchBtn{
    border:none;
    outline: none;
    border: 0px;
    cursor: pointer;
  color: $primary;
  transition: .3s ease-out;
  
  &:hover,
  &:focus { 
    transform: scale(1.125);
    
    .icon {
      transform: scale(1.25); } } 
        // Display/alignment
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
        
        // Sizing
        width: 68px;
        height: 68px;
        border-radius: 34px;
        
        // Style
        background-color: $white;
        box-shadow:
          0 1px 1px rgba($background-3, .6),
          0 3px 3px rgba($background-3, .4),
          0 8px 16px rgba($background-3, .3);
        
        &:hover,
        &:focus {
          box-shadow:
            0 2px 2px rgba($background-3, .4),
            0 4px 4px rgba($background-3, .3),
            0 12px 32px rgba($background-3, .3); } 
  }

  .fill-currentcolor {
    fill: currentcolor; }
  
  .fill-none {
    fill: none; }

    .icon {
        width: 24px;
        height: 24px;
        transition: .3s ease-out;
        
        @media (min-width: $breakpoint) {
          width: 32px;
          height: 32px; } }