]> _ Git - pmi.git/commitdiff
projects / pmi.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: ad853a7)
wip #2841 @1.30
authornael <nael@cubedesigners.com>
Mon, 17 Jun 2019 15:28:44 +0000 (17:28 +0200)
committernael <nael@cubedesigners.com>
Mon, 17 Jun 2019 15:28:44 +0000 (17:28 +0200)
public/_modules/search/img/search-icon.svg [new file with mode: 0644] patch | blob
public/_modules/search/index.html [new file with mode: 0644] patch | blob
public/_modules/search/style.styl [new file with mode: 0644] patch | blob

diff --git a/public/_modules/search/img/search-icon.svg b/public/_modules/search/img/search-icon.svg
new file mode 100644 (file)
index 0000000..57143ef
--- /dev/null
+++ b/public/_modules/search/img/search-icon.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15.811" height="15.811" viewBox="0 0 15.811 15.811">
+  <g id="Groupe_31" data-name="Groupe 31" transform="translate(0.75 0.75)">
+    <circle id="Ellipse_2" data-name="Ellipse 2" cx="5.208" cy="5.208" r="5.208" stroke-width="1.5" stroke="#fff" stroke-linecap="square" stroke-linejoin="bevel" fill="none"/>
+    <line id="Ligne_1" data-name="Ligne 1" x2="5.109" y2="5.109" transform="translate(8.891 8.891)" fill="none" stroke="#fff" stroke-linecap="square" stroke-linejoin="bevel" stroke-width="1.5"/>
+  </g>
+</svg>
diff --git a/public/_modules/search/index.html b/public/_modules/search/index.html
new file mode 100644 (file)
index 0000000..16772e7
--- /dev/null
+++ b/public/_modules/search/index.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="../../css/app.css">
+    <link href="https://fonts.googleapis.com/css?family=Barlow:500,600|Muli&display=swap" rel="stylesheet">
+    <title>pmi</title>
+</head>
+<body>
+
+<div id="search" class=" mt-5 flex flex-col ">
+    <div class="search-wrapper sm:w-full sm:max-w-full">
+        <div class="searchbar-container p-12 flex sm:flex-col ">
+            <input class="py-3 px-6 searchbar sm:w-full sm:max-w-full" type="text" placeholder="Saisissez votre recherche">
+            <button class="search-btn bg-blue py-3 px-12 flex text-white items-center sm:mt-3">
+                <img class="mr-3 search-icon" src="img/search-icon.svg" alt="">Rechercher</button>
+        </div>
+        <div class="mt-6">
+            <span>3 résultats</span>
+        </div>
+        <div class="results">
+            <div class="text-grey-dark relative mt-6">
+                <span class="navigation-link mr-3">Produits</span>
+                <span class="navigation-link mr-3 ml-3">Capteurs</span>
+                <span class="navigation-link mr-3 ml-3">Force</span>
+                <span class="ml-3">LSO-12-X98 - Surveillance de pont</span>
+            </div>
+            <h3 class="result-link mt-2"><a href="">LSO-12-X98 - Surveillance de pont</a></h3>
+            <div class="line"></div>
+        </div>
+        <div class="results">
+            <div class="text-grey-dark relative mt-6">
+                <span class="navigation-link mr-3">Actualités</span>
+                <span class="ml-3">newsletter-nov2018</span>
+            </div>
+            <h3 class="result-link mt-2"><a href="">Newsletter - Nov 2018</a></h3>
+            <div class="line"></div>
+        </div>
+        <div class="results">
+            <div class="text-grey-dark relative mt-6">
+                <span class="navigation-link mr-3">Produits</span>
+                <span class=" ml-3">Capteurs</span>
+            </div>
+            <h3 class="result-link mt-2"><a href="">LSO-12-X98 - Surveillance de pont</a></h3>
+        </div>
+    </div>
+</div>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/public/_modules/search/style.styl b/public/_modules/search/style.styl
new file mode 100644 (file)
index 0000000..3257d70
--- /dev/null
+++ b/public/_modules/search/style.styl
@@ -0,0 +1,57 @@
+$h3 = 24px
+$h2 = 36px
+$barlow = 'Barlow', sans-serif
+$muli = 'Muli', sans-serif
+$dark = #6B7287
+$lightgrey = #F7F8FC
+$darkblue = #152F4E
+$lightblue = #0EAADA
+$verylightgrey =#E7E9F3
+
+
+*
+  padding: 0
+  box-sizing: border-box !important
+  margin: 0
+  font-family: $muli
+#search
+  margin-left: 10vw
+  margin-right: 10vw
+.search-wrapper
+  width 67.9vw
+  max-width 67.9vw
+.searchbar-container
+  background $lightgrey
+  width 100%
+.searchbar
+  max-width: 46.1vw;
+  width: 46.1vw;
+  margin-right: 1.25vw
+  border-radius 0px
+.search-icon
+  width: 16px
+  height: 16px
+.navigation-link
+  position relative
+  font-size: 14px
+  &::after
+    content: '';
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    border-width: 1px 1px 0 0 !important
+    border-style: solid!important
+    border-color: #6B7287!important
+    -webkit-transform: rotate(45deg)!important
+    transform: rotate(45deg);
+    position: absolute;
+    right: -1.2em;
+    top: 50%;
+    margin-top: -3px;
+.result-link
+  font-size: 24px
+.line
+  width: 100%;
+  display block
+  background $lightgrey
+  height 2px
Unnamed repository; edit this file 'description' to name the repository.