From 8a59194d438910ba0bba47b0ca2a25181eadb207 Mon Sep 17 00:00:00 2001 From: Gael BOYENVAL Date: Fri, 16 Jun 2017 17:41:14 +0200 Subject: [PATCH] refactor(header): change header styles --- _includes/header.html | 20 ++++++------- _includes/search.html | 4 +++ _sass/objects/_layout.scss | 28 +++++++++++++++++ _sass/objects/_search-bar.scss | 55 ++++++++++++++++++++++++++++++++++ img/logo_eleven_lab.svg | 1 + 5 files changed, 98 insertions(+), 10 deletions(-) create mode 100644 _includes/search.html create mode 100644 _sass/objects/_layout.scss create mode 100644 _sass/objects/_search-bar.scss create mode 100644 img/logo_eleven_lab.svg diff --git a/_includes/header.html b/_includes/header.html index ddc38c320..ad2b19d3c 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -1,16 +1,20 @@ diff --git a/_includes/search.html b/_includes/search.html new file mode 100644 index 000000000..41d670978 --- /dev/null +++ b/_includes/search.html @@ -0,0 +1,4 @@ + diff --git a/_sass/objects/_layout.scss b/_sass/objects/_layout.scss new file mode 100644 index 000000000..d7c9b5e12 --- /dev/null +++ b/_sass/objects/_layout.scss @@ -0,0 +1,28 @@ +.slice { + border-bottom: 1px solid $border-color; + + @media (min-width: 480px) { + padding-top: 30px; + padding-bottom: 30px; + } + + @media (max-width: 480px) { + padding-top: 25px; + padding-bottom: 25px; + } +} + +.container { + max-width: $max-width-layout; + margin: 0 auto; + + @media (min-width: 480px) { + padding-left: 45px; + padding-right: 45px; + } + + @media (max-width: 480px) { + padding-left: 25px; + padding-right: 25px; + } +} diff --git a/_sass/objects/_search-bar.scss b/_sass/objects/_search-bar.scss new file mode 100644 index 000000000..0cb86654e --- /dev/null +++ b/_sass/objects/_search-bar.scss @@ -0,0 +1,55 @@ +.search-bar { + position: relative; + font-size: 1.4rem; + + @media (min-width: 480px) { + margin-right: 25px; + } + + @media (max-width: 480px) { + max-width: 120px; + margin-left: auto; + margin-right: auto; + margin-bottom: 10px; + } + + &-label { + font-size: 1.1rem; + text-transform: uppercase; + letter-spacing: 0.1em; + } + + &-input { + cursor: pointer; + display: block; + padding: 4px; + position: absolute; + z-index: 10; + top: 0; + bottom:0; + right: 0; + border: none; + opacity: 0; + min-width: 100%; + max-width: 100%; + background: white; + border-bottom: 2px solid transparent; + transition: all .2s ease; + + &:focus { + opacity: 1; + outline: none; + border-bottom: 2px solid $brand-black; + + @media (min-width: 480px) { + min-width: 120px; + } + + @media (max-width: 480px) { + left: -30px; + right: -30px; + max-width: 1000px; + } + } + } +} diff --git a/img/logo_eleven_lab.svg b/img/logo_eleven_lab.svg new file mode 100644 index 000000000..b57d68ba3 --- /dev/null +++ b/img/logo_eleven_lab.svg @@ -0,0 +1 @@ +Plan de travail 1 \ No newline at end of file