diff --git a/package-lock.json b/package-lock.json index 8b5889b..ebffeb4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2464,6 +2464,17 @@ "color-convert": "^2.0.1" } }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "optional": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, "cliui": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz", @@ -2484,6 +2495,18 @@ "color-name": "~1.1.4" } }, + "loader-utils": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz", + "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==", + "dev": true, + "optional": true, + "requires": { + "big.js": "^5.2.2", + "emojis-list": "^3.0.0", + "json5": "^2.1.2" + } + }, "ssri": { "version": "8.0.1", "resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.1.tgz", @@ -2493,6 +2516,18 @@ "minipass": "^3.1.1" } }, + "vue-loader-v16": { + "version": "npm:vue-loader@16.8.3", + "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz", + "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==", + "dev": true, + "optional": true, + "requires": { + "chalk": "^4.1.0", + "hash-sum": "^2.0.0", + "loader-utils": "^2.0.0" + } + }, "wrap-ansi": { "version": "6.2.0", "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz", @@ -12640,11 +12675,6 @@ "version": "0.12.1", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz", "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==" - }, - "vue": { - "version": "2.6.14", - "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.14.tgz", - "integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==" } } }, @@ -12704,63 +12734,6 @@ } } }, - "vue-loader-v16": { - "version": "npm:vue-loader@16.8.1", - "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.1.tgz", - "integrity": "sha512-V53TJbHmzjBhCG5OYI2JWy/aYDspz4oVHKxS43Iy212GjGIG1T3EsB3+GWXFm/1z5VwjdjLmdZUFYM70y77vtQ==", - "dev": true, - "optional": true, - "requires": { - "chalk": "^4.1.0", - "hash-sum": "^2.0.0", - "loader-utils": "^2.0.0" - }, - "dependencies": { - "ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, - "optional": true, - "requires": { - "color-convert": "^2.0.1" - } - }, - "chalk": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", - "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", - "dev": true, - "optional": true, - "requires": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - } - }, - "color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, - "optional": true, - "requires": { - "color-name": "~1.1.4" - } - }, - "loader-utils": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz", - "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==", - "dev": true, - "optional": true, - "requires": { - "big.js": "^5.2.2", - "emojis-list": "^3.0.0", - "json5": "^2.1.2" - } - } - } - }, "vue-router": { "version": "3.5.2", "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.2.tgz", diff --git a/src/assets/css/app-colors.scss b/src/assets/css/app-colors.scss index accd7f0..2570b54 100644 --- a/src/assets/css/app-colors.scss +++ b/src/assets/css/app-colors.scss @@ -5,6 +5,8 @@ $light-orange: #FFE9E4; $orange: #E75639; $light-blue: #E1E6FF; $dark-blue: #19117A; + +$dark-blue2: #18097c; $purple: #4039F6; // primary and secondary colors diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss index 5a9777a..8909156 100644 --- a/src/assets/css/main.scss +++ b/src/assets/css/main.scss @@ -1,14 +1,20 @@ -@import './app-colors.scss'; -@import './app-misc.scss'; -@import './app-spacing.scss'; -@import './app-typography.scss'; -@import './banner.scss'; -@import './carousel.scss'; -@import './commons.scss'; -@import './commons-cis.scss'; -@import './custom-bulma.scss'; -@import './footer.scss'; -@import './http-errors.scss'; -@import './navbar.scss'; -@import './rem.scss'; -@import './search-bar.scss'; +@import "./app-colors.scss"; +@import "./app-misc.scss"; +@import "./app-spacing.scss"; +@import "./app-typography.scss"; +@import "./banner.scss"; +@import "./carousel.scss"; +@import "./commons.scss"; +@import "./commons-cis.scss"; +@import "./custom-bulma.scss"; +@import "./footer.scss"; +@import "./http-errors.scss"; +@import "./navbar.scss"; +@import "./rem.scss"; +@import "./search-bar.scss"; + +.columns { + margin-left: 0 !important; + margin-right: 0 !important; +} + diff --git a/src/assets/css/navbar.scss b/src/assets/css/navbar.scss index 8bd3efa..c35bec9 100644 --- a/src/assets/css/navbar.scss +++ b/src/assets/css/navbar.scss @@ -2,23 +2,24 @@ display: flex; justify-content: space-between; padding: 10px 25px; - background-color: $light-orange; - + background-color: $dark-blue2; .logo-enthic { margin: 0.3rem 0 0 1rem; - width: 60px; - // transform: scale(0.2); + font-weight: bold; + width: 100px; + height: 49px; + font-family: Poppins; + font-size: 30px; + color: #fff; } #navMenu { .navbar-item { - color: $purple; - font-size: 17px; - - &:hover { - color: #3d3a39; - } + color: #fff; + font-family: Poppins; + font-size: 14px; + font-weight: bold; } } } @@ -36,10 +37,12 @@ display: flex; justify-content: center; align-items: center; - color: $purple; + //color: $purple; + color: #fff; .burger-size { - font-size: 30px; } + font-size: 30px; + } } } @@ -48,19 +51,22 @@ width: 100vw; top: 80px; right: 0; - background-color: $light-orange; + background-color: $dark-blue2; box-shadow: none; .navbar-item { - color: $purple; + // color: $purple; + color: #fff; text-align: center; + &:hover { + background-color: inherit !important; + color: #fff !important; + } } } } - } - // ----- UNUSED CSS FOR NAVBAR ----- // .nav { @@ -77,7 +83,6 @@ // color: #2c3e5085; // } - // html[lang="fr"] nav #navbar-main .navbar-item [lang="fr"], // html[lang="en"] nav #navbar-main .navbar-item [lang="en"]{ // text-decoration: underline; @@ -100,13 +105,11 @@ // } // } - // #navbar-top { // height: $app-navbar-height; // z-index:10; // } - // .skip-navbar { // padding-top: $app-navbar-height; // } diff --git a/src/assets/css/search-bar.scss b/src/assets/css/search-bar.scss index cfb7240..8d7bf36 100644 --- a/src/assets/css/search-bar.scss +++ b/src/assets/css/search-bar.scss @@ -1,24 +1,30 @@ -.search-bar{ +.search-text { + margin-top: 1rem; + margin-bottom: 1rem; +} +.search-bar { display: flex; - flex-direction: column; - align-items: center; - background-color: $light-orange; .control { width: 40%; - margin: 0 auto 20px auto; } .search-box { width: 100%; + height: 50px; // margin: auto; - background-color: $light-blue; border: none; box-shadow: none; - text-align: center; - padding: 0!important; border-radius: 10px; font-size: 16px; + font-family: Poppins; + font-size: 16px; + font-weight: bold; + padding: 13px 0px 11px 16px; + color: #18097c; + &:focus { + border: 1px solid #536dfc; + } } #search-icon { @@ -26,28 +32,61 @@ padding-left: 25px; font-size: 16px; } - - .search-box::placeholder { - font-family: 'Open Sans'; - color: $dark-blue; + input[type="search" i]:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-search-cancel-button { + display: none; + } + .search-clear { + cursor: pointer; + position: absolute; + right: 1rem; + top: 35%; + background-color: #9ca4d1; + border-radius: 50%; + color: white; + width: 20px; + height: 20px; + display: flex; + justify-content: center; + align-items: center; + .dashs-container { + display: flex; + justify-content: center; + align-items: center; + position: relative; + .dash-1, + .dash-2 { + width: 2px; + height: 12px; + background-color: white; + position: absolute; + } + .dash-1 { + transform: rotate(315deg); + } + .dash-2 { + transform: rotate(45deg); + } + } } - .search-btn { - background-color: $orange; - opacity: 0.8; border: none; - padding: 10px 20px; - border-radius: 10px; + width: 122px; + height: 50px; + padding: 16px 12px 15px; + border-radius: 3px; + background-color: #dfe4ff; cursor: pointer; + margin-left: 10px; &:hover { opacity: 1; } .search-btn-as-text { - font-size: 16px; - color: white; - font-family: 'Open Sans'; + font-size: 12px; + font-weight: bold; + color: #536dfc; + font-family: "Open Sans"; } } } diff --git a/src/components/search/OpenDataSoftOneResult.vue b/src/components/search/OpenDataSoftOneResult.vue index 875a388..df9d792 100644 --- a/src/components/search/OpenDataSoftOneResult.vue +++ b/src/components/search/OpenDataSoftOneResult.vue @@ -62,7 +62,7 @@ export default { } .siren_number { - font-family: OpenSans; + font-family: 'Open Sans'; font-size: 14px; font-weight: normal; font-stretch: normal; @@ -84,7 +84,7 @@ export default { } .company_secondary_info { - font-family: OpenSans; + font-family: 'Open Sans'; font-size: 14px; font-weight: normal; font-stretch: normal; diff --git a/src/components/search/OpenDataSoftResultList.vue b/src/components/search/OpenDataSoftResultList.vue index a799a27..c1ab931 100644 --- a/src/components/search/OpenDataSoftResultList.vue +++ b/src/components/search/OpenDataSoftResultList.vue @@ -1,7 +1,7 @@