.search-page { .search-input { position: relative; padding: 14rem / $pxConvertRem 22rem / $pxConvertRem; background: #f8f8f8; form { width: 100%; } .search-icon { position: absolute; font-size: 24rem / $pxConvertRem; top: 26rem / $pxConvertRem; left: 36rem / $pxConvertRem; color: #b2b2b2; } input { height: 56rem / $pxConvertRem; width: 378rem / $pxConvertRem; border-radius: 28rem / $pxConvertRem; padding: 0 52rem / $pxConvertRem; font-size: 24rem / $pxConvertRem; background: #fff; border: none; } .clear-input { position: absolute; top: 20rem / $pxConvertRem; right: 145rem / $pxConvertRem; font-size: 32rem / $pxConvertRem; color: #666; } .search { position: absolute; top: 18rem / $pxConvertRem; right: 40rem / $pxConvertRem; border: none; background: transparent; color: #666; font-size: 30rem / $pxConvertRem; line-height: 56rem / $pxConvertRem; } } .search-items { padding: 40rem / $pxConvertRem 20rem / $pxConvertRem; h3 { font-size: 24rem / $pxConvertRem; margin-bottom: 20rem / $pxConvertRem; } li { float: left; margin-right: 20rem / $pxConvertRem; margin-bottom: 20rem / $pxConvertRem; max-width: 100%; overflow: hidden; } a { display: block; height: 68rem / $pxConvertRem; line-height: 68rem / $pxConvertRem; padding: 0 20rem / $pxConvertRem; font-size: 28rem / $pxConvertRem; background: #f8f8f8; color: #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .clear-history { height: 64rem / $pxConvertRem; line-height: 64rem / $pxConvertRem; border: 1px solid #e6e6e6; background: #fff; font-size: 28rem / $pxConvertRem; } } }