From e33142a82850384211b5cf76ae274f8a91519b01 Mon Sep 17 00:00:00 2001
From: Muhammad Aref Ali Hamada <muh.aref@live.com>
Date: Mon, 16 Jan 2017 11:45:09 +0100
Subject: [PATCH] bug(search): remove native date field clear button

---
 docs/demo/materials/04-molecules/05-search-form.html | 8 ++++++++
 src/styles/molecules/_search-form.scss               | 4 ++++
 2 files changed, 12 insertions(+)

diff --git a/docs/demo/materials/04-molecules/05-search-form.html b/docs/demo/materials/04-molecules/05-search-form.html
index 4b79e00f..261cfc99 100644
--- a/docs/demo/materials/04-molecules/05-search-form.html
+++ b/docs/demo/materials/04-molecules/05-search-form.html
@@ -31,3 +31,11 @@
         {{/each}}
     </ul>
 </div>
+
+<label for="searchWithDate" class="dc-label">Search box using date field</label>
+<div class="dc-search-form">
+    <input class="dc-input dc-search-form__input" id="searchWithDate" type="date" placeholder="Search...">
+    <button class="dc-btn dc-search-form__btn">
+        <i id="searchWithDate" class="dc-icon dc-icon--search dc-icon--interactive"></i>
+    </button>
+</div>
diff --git a/src/styles/molecules/_search-form.scss b/src/styles/molecules/_search-form.scss
index 55fb5a30..66f3aa8f 100644
--- a/src/styles/molecules/_search-form.scss
+++ b/src/styles/molecules/_search-form.scss
@@ -15,10 +15,14 @@
 }
 
 @mixin dc-search-form__input {
+    max-height: 36px;
     margin: 0;
     padding-right: 30px;
     -moz-appearance: none;
     -webkit-appearance: none;
+
+    &[type="date"]::-webkit-clear-button { display: none; }
+    &[type="date"]::-ms-clear { display: none; }
 }
 
 @mixin dc-search-form__btn {