Skip to content

Instantly share code, notes, and snippets.

@scotthorn
Created April 15, 2016 14:53
Show Gist options
  • Save scotthorn/c7347a65a3d331d215160ce86292bab3 to your computer and use it in GitHub Desktop.
Save scotthorn/c7347a65a3d331d215160ce86292bab3 to your computer and use it in GitHub Desktop.
.cd-search-trigger::before, .cd-search-trigger::after {
/* search icon */
content: '';
position: absolute;
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
transition: opacity 0.3s;
/* Force Hardware Acceleration in WebKit */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden; }
.cd-search-trigger::before {
/* lens */
top: 11px;
left: 11px;
width: 18px;
height: 18px;
border-radius: 50%;
border: 3px solid #FFFFFF;
z-index: 2; }
.cd-search-trigger::after {
/* handle */
height: 3px;
width: 8px;
background: #FFFFFF;
bottom: 14px;
right: 11px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg); }
.cd-search-trigger span {
/* container for the X icon */
position: absolute;
height: 80%;
width: 80%;
top: 10%;
left: 10%;
background-color: #005A8B;
z-index: -1; }
.cd-search-trigger span::before, .cd-search-trigger span::after {
/* close icon */
content: '';
position: absolute;
display: inline-block;
height: 3px;
width: 22px;
top: 50%;
margin-top: -2px;
left: 50%;
margin-left: -11px;
background: #FFFFFF;
opacity: 0;
/* Force Hardware Acceleration in WebKit */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
-moz-transition: opacity 0.3s, -moz-transform 0.3s;
transition: opacity 0.3s, transform 0.3s; }
.cd-search-trigger span::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg); }
.cd-search-trigger span::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg); }
.cd-search-trigger.search-is-visible::before, .cd-search-trigger.search-is-visible::after {
/* hide search icon */
opacity: 0; }
.cd-search-trigger.search-is-visible span::before, .cd-search-trigger.search-is-visible span::after {
/* show close icon */
opacity: 1; }
.cd-search-trigger.search-is-visible span::before {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg); }
.cd-search-trigger.search-is-visible span::after {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg); }
/*# sourceMappingURL=_navigation.css.map */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment