// Name: Search // Description: Component to create the search // // Component: `uk-search` // // Sub-objects: `uk-search-input` // `uk-search-toggle` // // Adopted: `uk-search-icon` // // Modifier: `uk-search-default` // `uk-search-navbar` // `uk-search-large` // // ======================================================================== // Variables // ======================================================================== /* ======================================================================== Component: Search ========================================================================== */ /* * 1. Container fits its content * 2. Create position context * 3. Prevent content overflow * 4. Reset `form` */ .uk-search { /* 1 */ display: inline-block; /* 2 */ position: relative; /* 3 */ max-width: 100%; /* 4 */ margin: 0; } /* Input ========================================================================== */ /* * Remove the inner padding and cancel buttons in Chrome on OS X and Safari on OS X. */ .uk-search-input::-webkit-search-cancel-button, .uk-search-input::-webkit-search-decoration { -webkit-appearance: none; } /* * Removes placeholder transparency in Firefox. */ .uk-search-input::-moz-placeholder { opacity: 1; } /* * 1. Define consistent box sizing. * 2. Address margins set differently in Firefox/IE and Chrome/Safari/Opera. * 3. Remove `border-radius` in iOS. * 4. Change font properties to `inherit` in all browsers * 5. Show the overflow in Edge. * 6. Remove default style in iOS. * 7. Vertical alignment * 8. Take the full container width * 9. Style */ .uk-search-input { /* 1 */ box-sizing: border-box; /* 2 */ margin: 0; /* 3 */ border-radius: 0; /* 4 */ font: inherit; /* 5 */ overflow: visible; /* 6 */ -webkit-appearance: none; /* 7 */ vertical-align: middle; /* 8 */ width: 100%; /* 9 */ border: none; color: $search-color; @if(mixin-exists(hook-search-input)) {@include hook-search-input();} } .uk-search-input:focus { outline: none; } /* Placeholder */ .uk-search-input::placeholder { color: $search-placeholder-color; } /* Icon (Adopts `uk-icon`) ========================================================================== */ /* * Position above input * 1. Set position * 2. Center icon vertically and horizontally * 3. Style */ .uk-search .uk-search-icon { /* 1 */ position: absolute; top: 0; bottom: 0; left: 0; /* 2 */ display: inline-flex; justify-content: center; align-items: center; /* 3 */ color: $search-icon-color; @if(mixin-exists(hook-search-icon)) {@include hook-search-icon();} } /* * Required for `a`. */ .uk-search .uk-search-icon:hover { color: $search-icon-color; } /* * Make `input` element clickable through icon, e.g. if it's a `span` */ .uk-search .uk-search-icon:not(a):not(button):not(input) { pointer-events: none; } /* * Position modifier */ .uk-search .uk-search-icon-flip { right: 0; left: auto; } /* Default modifier ========================================================================== */ .uk-search-default { width: $search-default-width; } /* * Input */ .uk-search-default .uk-search-input { height: $search-default-height; padding-left: $search-default-padding-horizontal; padding-right: $search-default-padding-horizontal; background: $search-default-background; @if(mixin-exists(hook-search-default-input)) {@include hook-search-default-input();} } /* Focus */ .uk-search-default .uk-search-input:focus { background-color: $search-default-focus-background; @if(mixin-exists(hook-search-default-input-focus)) {@include hook-search-default-input-focus();} } /* * Icon */ .uk-search-default .uk-search-icon { width: $search-default-icon-width; } .uk-search-default .uk-search-icon:not(.uk-search-icon-flip) ~ .uk-search-input { padding-left: ($search-default-icon-width + $search-default-icon-padding); } .uk-search-default .uk-search-icon-flip ~ .uk-search-input { padding-right: ($search-default-icon-width + $search-default-icon-padding); } /* Navbar modifier ========================================================================== */ .uk-search-navbar { width: $search-navbar-width; } /* * Input */ .uk-search-navbar .uk-search-input { height: $search-navbar-height; background: $search-navbar-background; font-size: $search-navbar-font-size; @if(mixin-exists(hook-search-navbar-input)) {@include hook-search-navbar-input();} } /* Focus */ .uk-search-navbar .uk-search-input:focus { @if(mixin-exists(hook-search-navbar-input-focus)) {@include hook-search-navbar-input-focus();} } /* * Icon */ .uk-search-navbar .uk-search-icon { width: $search-navbar-icon-width; } .uk-search-navbar .uk-search-icon:not(.uk-search-icon-flip) ~ .uk-search-input { padding-left: ($search-navbar-icon-width + $search-navbar-icon-padding); } .uk-search-navbar .uk-search-icon-flip ~ .uk-search-input { padding-right: ($search-navbar-icon-width + $search-navbar-icon-padding); } /* Large modifier ========================================================================== */ .uk-search-large { width: $search-large-width; } /* * Input */ .uk-search-large .uk-search-input { height: $search-large-height; background: $search-large-background; font-size: $search-large-font-size; @if(mixin-exists(hook-search-large-input)) {@include hook-search-large-input();} } /* Focus */ .uk-search-large .uk-search-input:focus { @if(mixin-exists(hook-search-large-input-focus)) {@include hook-search-large-input-focus();} } /* * Icon */ .uk-search-large .uk-search-icon { width: $search-large-icon-width; } .uk-search-large .uk-search-icon:not(.uk-search-icon-flip) ~ .uk-search-input { padding-left: ($search-large-icon-width + $search-large-icon-padding); } .uk-search-large .uk-search-icon-flip ~ .uk-search-input { padding-right: ($search-large-icon-width + $search-large-icon-padding); } /* Toggle ========================================================================== */ .uk-search-toggle { color: $search-toggle-color; @if(mixin-exists(hook-search-toggle)) {@include hook-search-toggle();} } /* Hover */ .uk-search-toggle:hover { color: $search-toggle-hover-color; @if(mixin-exists(hook-search-toggle-hover)) {@include hook-search-toggle-hover();} } // Hooks // ======================================================================== @if(mixin-exists(hook-search-misc)) {@include hook-search-misc();} // @mixin hook-search-input(){} // @mixin hook-search-icon(){} // @mixin hook-search-default-input(){} // @mixin hook-search-default-input-focus(){} // @mixin hook-search-navbar-input(){} // @mixin hook-search-navbar-input-focus(){} // @mixin hook-search-large-input(){} // @mixin hook-search-large-input-focus(){} // @mixin hook-search-toggle(){} // @mixin hook-search-toggle-hover(){} // @mixin hook-search-misc(){} // Inverse // ======================================================================== // @mixin hook-inverse-search-default-input(){} // @mixin hook-inverse-search-default-input-focus(){} // @mixin hook-inverse-search-navbar-input(){} // @mixin hook-inverse-search-navbar-input-focus(){} // @mixin hook-inverse-search-large-input(){} // @mixin hook-inverse-search-large-input-focus(){} // @mixin hook-inverse-search-toggle(){} // @mixin hook-inverse-search-toggle-hover(){}