Search icon with the lower size

toplisek · May 10, 2020, 6:56pm

I try to set a new search icon but lower size. As I did not manage, I kindly ask you to help me how to do as I tried to make smaller size icon 28 px and background 37px. I attach CSS and HTML.


<div class="search">
  <input type="search" class="search-box" />
  <span class="search-button">
    <span class="search-icon"></span>
  </span>
</div>

and CSS

$background-color: #2A2E37;
$search-bg-color: #242628;
$icon-color: #00FEDE;
$transition: all .5s ease;

.search {
  width: 100px;
  height: 100px;
  margin: 40px auto 0;
  background-color: $search-bg-color;
  position: relative;
  overflow: hidden;
  transition: $transition;
  &:before {
    content: '';
    display: block;
    width: 3px;
    height: 100%;
    position: relative;
    background-color: $icon-color;
    transition: $transition;
  }
  &.open {
    width: 420px;
    &:before {
      height: 60px;
      margin: 20px 0 20px 30px;
      position: absolute;
    }
  }
}

.search-box {
  width: 100%;
  height: 100%;
  box-shadow: none;
  border: none;
  background: transparent;
  color: #fff;
  padding: 20px 100px 20px 45px;
  font-size: 40px;
  &:focus {
    outline: none;
  }
}

.search-button {
  width: 100px;
  height: 100px;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  padding: 20px;
  cursor: pointer;
}

.search-icon {
  width: 40px;
  height: 40px;
  border-radius: 40px;
  border: 3px solid $icon-color;
  display: block;
  position: relative;
  margin-left: 5px;
  transition: $transition;
  &:before {
    content: '';
    width: 3px;
    height: 15px;
    position: absolute;
    right: -2px;
    top: 30px;
    display: block;
    background-color: $icon-color;
    transform: rotate(-45deg);
    transition: $transition;
  }
  &:after {
    content: '';
    width: 3px;
    height: 15px;
    position: absolute;
    right: -12px;
    top: 40px;
    display: block;
    background-color: $icon-color;
    transform: rotate(-45deg);
    transition: $transition;
  }
  .open & {
    margin: 0;
    width: 60px;
    height: 60px;
    border-radius: 60px;
    &:before {
      transform: rotate(52deg);
      right: 22px;
      top: 23px;
      height: 18px;
    }
    &:after {
      transform: rotate(-230deg);
      right: 22px;
      top: 13px;
      height: 18px;
    }
  }
}

Erik_J · May 10, 2020, 8:37pm

Hi toplisek,

The posted CSS is actually preprocessed SCSS that is not easy to read for many of us. So please compile preprocessed code (SCSS) to plain CSS before posting.

To assist those who want to help I’ve compiled the SCSS to CSS for you:

.search {
  width: 100px;
  height: 100px;
  margin: 40px auto 0;
  background-color: #242628;
  position: relative;
  overflow: hidden;
  transition: all 0.5s ease;
}
.search:before {
  content: '';
  display: block;
  width: 3px;
  height: 100%;
  position: relative;
  background-color: #00FEDE;
  transition: all 0.5s ease;
}
.search.open {
  width: 420px;
}
.search.open:before {
  height: 60px;
  margin: 20px 0 20px 30px;
  position: absolute;
}

.search-box {
  width: 100%;
  height: 100%;
  box-shadow: none;
  border: none;
  background: transparent;
  color: #fff;
  padding: 20px 100px 20px 45px;
  font-size: 40px;
}
.search-box:focus {
  outline: none;
}

.search-button {
  width: 100px;
  height: 100px;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  padding: 20px;
  cursor: pointer;
}

.search-icon {
  width: 40px;
  height: 40px;
  border-radius: 40px;
  border: 3px solid #00FEDE;
  display: block;
  position: relative;
  margin-left: 5px;
  transition: all 0.5s ease;
}
.search-icon:before {
  content: '';
  width: 3px;
  height: 15px;
  position: absolute;
  right: -2px;
  top: 30px;
  display: block;
  background-color: #00FEDE;
  transform: rotate(-45deg);
  transition: all 0.5s ease;
}
.search-icon:after {
  content: '';
  width: 3px;
  height: 15px;
  position: absolute;
  right: -12px;
  top: 40px;
  display: block;
  background-color: #00FEDE;
  transform: rotate(-45deg);
  transition: all 0.5s ease;
}
.open .search-icon {
  margin: 0;
  width: 60px;
  height: 60px;
  border-radius: 60px;
}
.open .search-icon:before {
  transform: rotate(52deg);
  right: 22px;
  top: 23px;
  height: 18px;
}
.open .search-icon:after {
  transform: rotate(-230deg);
  right: 22px;
  top: 13px;
  height: 18px;
}

Erik_J · May 11, 2020, 3:10am

The search icon you have is a “three-pieces-together” icon that has a different shape and size in the “open” class state.

– What state is 28px and what is the background 37px?
– What size should the “open” state be?

If I understand correctly?

(The sizes are readable in both the SCSS and CSS code versions.)

Erik_J · May 11, 2020, 11:22am

Hi again,

As I’m not sure I understand what you try to achieve I made a stand alone demo from the code you already posted to experiment with.

It displays both search and search open states and uses the compiled CSS. The values for size and position of the icon parts is the same as they are in the SCSS version.

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Search Icon Size</title>
<style>

/*** SEARCH DEFAULTS ***/

.search {
  width: 100px;
  height: 100px;
  margin: 40px auto 0;
  background-color: #242628;
  position: relative;
  overflow: hidden;
  transition: all 0.5s ease;
}
.search:before {
  content: '';
  display: block;
  width: 3px;
  height: 100%;
  position: relative;
  background-color: #00FEDE;
  transition: all 0.5s ease;
}
.search-box {
  width: 100%;
  height: 100%;
  box-shadow: none;
  border: none;
  background: transparent;
  color: #fff;
  padding: 20px 100px 20px 45px;
  font-size: 40px;
}
.search-box:focus {
  outline: none;
}
.search-button {
  width: 100px;
  height: 100px;
  display: block;
  position: absolute;
  right: 0;
  right: -40px; /* to the middle of its space */
  top: 0;
  padding: 20px;
  cursor: pointer;
}

/*** SEARCH ICON DEFAULTS ***/

/*** MAGNIFIER/CIRCLE ***/
.search-icon {
  width: 40px;
  height: 40px;
  border-radius: 40px;
  border: 3px solid #00FEDE;
  display: block;
  position: relative;
  margin-left: 5px;
  transition: all 0.5s ease;
}
/*** HANDLE/ARROW PARTS ***/
.search-icon:before {
  content: '';
  width: 3px;
  height: 15px;
  position: absolute;
  right: -2px;
  top: 30px;
  display: block;
  background-color: #00FEDE;
  transform: rotate(-45deg);
  transition: all 0.5s ease;
}
.search-icon:after {
  content: '';
  width: 3px;
  height: 15px;
  position: absolute;
  right: -12px;
  top: 40px;
  display: block;
  background-color: #00FEDE;
  transform: rotate(-45deg);
  transition: all 0.5s ease;
}

/*** OPEN SEARCH OVERRIDES ***/

.search.open {
  width: 420px;
}
.search.open:before {
  height: 60px;
  margin: 20px 0 20px 30px;
  position: absolute;
}

/*** OPEN SEARCH ICON OVERRIDES ***/

/*** MAGNIFIER/CIRCLE ***/
.open .search-icon {
  margin: 0;
  width: 60px;
  height: 60px;
  border-radius: 60px;
}
/*** HANDLE/ARROW PARTS ***/
.open .search-icon:before {
  transform: rotate(52deg);
  right: 22px;
  top: 23px;
  height: 18px;
}
.open .search-icon:after {
  transform: rotate(-230deg);
  right: 22px;
  top: 13px;
  height: 18px;
}

</style>
</head><body>

<div class="search">
  <input type="search" class="search-box" />
  <span class="search-button">
    <span class="search-icon"></span>
  </span>
</div>

<div class="search open">
  <input type="search" class="search-box" />
  <span class="search-button">
    <span class="search-icon"></span>
  </span>
</div>

</body></html>

Hope this is of any help.

If you manage your self, please tell us how you did.

toplisek · May 12, 2020, 10:25am

Thank you for the information. I have done also experiment.
:before and :after should be modified and size. It is not easy when you try to lower size.

Please find the source code: https://codepen.io/kristyjy/pen/zGOXYb
It is excellent programming code IMHO.

Erik_J · May 12, 2020, 2:49pm

The icon has two states as shown in the Codepen, with or without the on-click inserted “open” class on the search container div.

If you want help to change size then you need to specify exactly what you are trying to do. Please straighten out:

– When you said 28px is that the whole magnifier icon?

– When you say background 37px is that the height of the “search” div?

– What about the size of the “open” state circle?

– What about the left bar in the “search” div that change height to 60px in the “open” state?

Erik_J · May 12, 2020, 3:18pm

(Off topic)

Could be, but it is inaccessible without Javascript enabled and that is never good IMHO. The animation should rather be an enhancement leaving the search intact if the script can’t load.

https://kryogenix.org/code/browser/everyonehasjs.html

(/Off topic)

system · August 11, 2020, 10:18pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.