From 66f939a4bd8658c71e282f7409354394ca9cbfa6 Mon Sep 17 00:00:00 2001 From: LaurentBlondel Date: Thu, 5 Oct 2023 14:37:21 +0200 Subject: [PATCH] ajout du menu dans le header + search elastique --- ui/src/main/resources/static/css/custom.css | 97 ++++++++ .../templates/inc/navbar-non-product.html | 221 +++++++++++++++++- 2 files changed, 306 insertions(+), 12 deletions(-) diff --git a/ui/src/main/resources/static/css/custom.css b/ui/src/main/resources/static/css/custom.css index ac7b5a000..c3376d3cf 100644 --- a/ui/src/main/resources/static/css/custom.css +++ b/ui/src/main/resources/static/css/custom.css @@ -68,4 +68,101 @@ Xwiki css .jumbotron .h1 { font-size: 63px; } +} + + + + +.button { + display: inline-block; + margin: 4px 2px; + background-color: #444; + font-size: 14px; + padding-left: 32px; + padding-right: 32px; + height: 50px; + line-height: 50px; + text-align: center; + color: white; + text-decoration: none; + cursor: pointer; + -moz-user-select: none; + -khtml-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.button:hover { + transition-duration: 0.4s; + -moz-transition-duration: 0.4s; + -webkit-transition-duration: 0.4s; + -o-transition-duration: 0.4s; + background-color: white; + color: black; +} + +.search-container { + position: relative; + display: inline-block; + margin: 4px 2px; + height: 50px; + width: 50px; + vertical-align: bottom; +} + +.mglass { + display: inline-block; + pointer-events: none; + -webkit-transform: rotate(-45deg); + -moz-transform: rotate(-45deg); + -o-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); +} + +.searchbutton { + position: absolute; + font-size: 22px; + width: 100%; + margin: 0; + padding: 0; +} + +.search:focus + .searchbutton { + transition-duration: 0.4s; + -moz-transition-duration: 0.4s; + -webkit-transition-duration: 0.4s; + -o-transition-duration: 0.4s; + background-color: white; + color: black; +} + +.search { + position: absolute; + left: 49px; /* Button width-1px (Not 50px/100% because that will sometimes show a 1px line between the search box and button) */ + background-color: #f9fafb; + outline: none; + border: none; + padding: 0; + width: 0; + height: 100%; + z-index: 10; + transition-duration: 0.4s; + -moz-transition-duration: 0.4s; + -webkit-transition-duration: 0.4s; + -o-transition-duration: 0.4s; +} + +.search:focus { + width: 363px; /* Bar width+1px */ + padding: 0 16px 0 0; +} + +.expandright { + left: auto; + right: 49px; /* Button width-1px */ +} + +.expandright:focus { + padding: 0 0 0 16px; } \ No newline at end of file diff --git a/ui/src/main/resources/templates/inc/navbar-non-product.html b/ui/src/main/resources/templates/inc/navbar-non-product.html index 9736078e1..17c45b934 100644 --- a/ui/src/main/resources/templates/inc/navbar-non-product.html +++ b/ui/src/main/resources/templates/inc/navbar-non-product.html @@ -1,4 +1,4 @@ -
+