Merge branch 'issue-38' into 'develop'
bump cookies notice to v4.0.1 - #38 See merge request ldc-web/projets/agis!29
This commit is contained in:
Vincent BRIDIER
commit
dcf995bdc6
6 changed files with 49 additions and 684 deletions
6
package-lock.json
generated
6
package-lock.json
generated
|
|
@ -1050,9 +1050,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"node_modules/@ldc-web/cookie-notice": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://lab.s-web.fr/api/v4/projects/50/packages/npm/@ldc-web/cookie-notice/-/@ldc-web/cookie-notice-4.0.0.tgz",
|
||||
"integrity": "sha1-wPt5PtlWiuOjO2sODb4YDwPeBms=",
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://lab.s-web.fr/api/v4/projects/50/packages/npm/@ldc-web/cookie-notice/-/@ldc-web/cookie-notice-4.0.1.tgz",
|
||||
"integrity": "sha1-NvTFoKF7Ki/+3PDr9hmqjjTFuZE=",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@nodelib/fs.scandir": {
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
"@fortawesome/free-regular-svg-icons": "^6.5.1",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.5.1",
|
||||
"@fortawesome/vue-fontawesome": "^3.0.5",
|
||||
"@ldc-web/cookie-notice": "^4.0.0",
|
||||
"@ldc-web/cookie-notice": "^4.0.1",
|
||||
"@sipec/vue3-tags-input": "^3.0.4",
|
||||
"@types/bootstrap": "^5.2.7",
|
||||
"@types/node": "^20.8.2",
|
||||
|
|
@ -69,4 +69,4 @@
|
|||
"vue-loader": "^17.3.1",
|
||||
"vue-tsc": "1.8.11"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -25,8 +25,6 @@ $color-default-titles: $color-primary;
|
|||
$color-default-texts: $color-dark;
|
||||
|
||||
// * FONTS
|
||||
// * Keep Bs assumption
|
||||
// $font-size-root: 16px;
|
||||
$font-default-family-base: 'Rufina', serif; // - The default site font family.
|
||||
$font-default-size-base: 1.125rem; // Follow crea
|
||||
$line-default-height-base: 1.65;
|
||||
|
|
@ -35,41 +33,11 @@ $line-default-height-base: 1.65;
|
|||
$offcanvas-backdrop-bg: $color-white;
|
||||
|
||||
// * HEADINGS
|
||||
|
||||
// $headings-margin-bottom: $spacer * .5 !default;
|
||||
$headings-font-family: 'Readex-Pro', serif;
|
||||
|
||||
// $headings-font-style: null !default;
|
||||
// $headings-font-weight: 500 !default;
|
||||
// $headings-line-height: 1.2 !default;
|
||||
// $headings-color: inherit !default;
|
||||
$display-font-family: 'Readex Pro', sans-serif;
|
||||
|
||||
// $display-font-style: null !default;
|
||||
// $display-font-weight: 300 !default;
|
||||
// $display-line-height: $headings-line-height !default;
|
||||
|
||||
// * Buttons
|
||||
$input-btn-active-bg-color: #000;
|
||||
|
||||
// * Inputs
|
||||
$input-bg: #F1F1F1;
|
||||
|
||||
// scss-docs-start input-btn-variables
|
||||
// $input-btn-padding-y: .375rem !default;
|
||||
// $input-btn-padding-x: .75rem !default;
|
||||
// $input-btn-font-family: null !default;
|
||||
// $input-btn-font-size: $font-size-base !default;
|
||||
// $input-btn-line-height: $line-height-base !default;
|
||||
// $input-btn-focus-width: $focus-ring-width !default;
|
||||
// $input-btn-focus-color-opacity: $focus-ring-opacity !default;
|
||||
// $input-btn-focus-color: $focus-ring-color !default;
|
||||
// $input-btn-focus-blur: $focus-ring-blur !default;
|
||||
// $input-btn-focus-box-shadow: $focus-ring-box-shadow !default;
|
||||
// $input-btn-padding-y-sm: .25rem !default;
|
||||
// $input-btn-padding-x-sm: .5rem !default;
|
||||
// $input-btn-font-size-sm: $font-size-sm !default;
|
||||
// $input-btn-padding-y-lg: .5rem !default;
|
||||
// $input-btn-padding-x-lg: 1rem !default;
|
||||
// $input-btn-font-size-lg: $font-size-lg !default;
|
||||
// $input-btn-border-width: var(--#{$prefix}border-width) !default;
|
||||
|
|
|
|||
620
resources/sass/fo/vendor/_cookie-notice.scss
vendored
620
resources/sass/fo/vendor/_cookie-notice.scss
vendored
|
|
@ -1,615 +1,7 @@
|
|||
@use "sass:color";
|
||||
$ck-primary-color: $input-btn-active-bg-color;
|
||||
$ck-secondary-color: $input-btn-active-bg-color;
|
||||
$ck-background-color: $color-white;
|
||||
$ck-btn-background-color: $color-white;
|
||||
$ck-title-font: Sheldon, serif;
|
||||
|
||||
:root {
|
||||
--cs-primary-color: var();
|
||||
}
|
||||
|
||||
$ck-primary-color: $color-primary !default;
|
||||
$ck-secondary-color: $color-secondary !default;
|
||||
$ck-dark-color: $color-dark !default;
|
||||
$ck-background-color: #fff !default;
|
||||
$ck-list-background-color: #e4e4e4 !default;
|
||||
$ck-borders-color: #808080 !default;
|
||||
$ck-shadow-color: 0 0.1rem 1rem rgb(0 0 0 / 35%) !default;
|
||||
$ck-title-font: Sheldon, serif !default;
|
||||
$ck-title-line-height: inherit !default;
|
||||
$ck-title-size: 25px !default;
|
||||
$ck-text-font: 'Rufina', serif !default;
|
||||
$ck-text-size: 14px !default;
|
||||
$ck-btn-background-color: #fff !default;
|
||||
$ck-accept-color: #3a3 !default;
|
||||
$ck-deny-color: #a33 !default;
|
||||
|
||||
// CN Wrapper z-index
|
||||
$cn-cookie-button-z-index: 1050 !default;
|
||||
|
||||
// Cookie Button dimension
|
||||
$cn-cookie-button-width: 2.4rem !default;
|
||||
$cn-cookie-button-height: 2.4rem !default;
|
||||
$cn-cookie-button-padding: 0.3rem !default;
|
||||
|
||||
// Cookie Button dimension (above mobile)
|
||||
$cn-cookie-button-width-h: 3rem !default;
|
||||
$cn-cookie-button-height-h: 3rem !default;
|
||||
$cn-cookie-button-padding-h: 0.5rem !default;
|
||||
|
||||
// Cookie Button position
|
||||
$cn-cookie-button-position-left: 0.5rem; /* Distance par rapport à la gauche de la fenêtre */
|
||||
$cn-cookie-button-position-right: auto; /* Distance par rapport à la droite de la fenêtre */
|
||||
$cn-cookie-button-position-bottom: 0.5rem; /* Distance par rapport au bas de la fenêtre */
|
||||
$cn-cookie-animation-left: 0; /* Position gauche de base des cookies */
|
||||
$cn-cookie-animation-right: auto; /* Position droite de base des cookies */
|
||||
|
||||
// Cookie Button position hide btn vars
|
||||
$cn-cookie-button-position-right-h: auto;
|
||||
$cn-cookie-button-position-bottom-h: #{$cn-cookie-button-position-bottom - 2rem};
|
||||
$cn-cookie-button-position-left-h: #{$cn-cookie-button-position-left - 2rem};
|
||||
$cn-cookie-button-transition-show: all 1s 6s;
|
||||
$cn-cookie-button-transition-hide: all 1s;
|
||||
|
||||
// Buttons
|
||||
$cn-button-bg-color: $ck-primary-color !default;
|
||||
$cn-button-font-family: $ck-text-font !default;
|
||||
$cn-button-font-size: 1rem !default;
|
||||
$cn-button-line-height: 1 !default;
|
||||
|
||||
@import "@ldc-web/cookie-notice/src/scss/mixins";
|
||||
@import "@ldc-web/cookie-notice/src/scss/reset";
|
||||
|
||||
/** 3.0.0 */
|
||||
|
||||
/* FENETRE D'ACCUEIL */
|
||||
$ck-bg-color: $ck-background-color;
|
||||
|
||||
/* Title settings */
|
||||
$ck-w1-bgcolor-title: $ck-background-color;
|
||||
$ck-w1-font-family-title: $ck-title-font;
|
||||
$ck-w1-line-height-title: $ck-title-line-height;
|
||||
$ck-w1-font-size-title: $ck-title-size;
|
||||
$ck-w1-color-title: $ck-dark-color;
|
||||
|
||||
/* Text settings */
|
||||
$ck-w1-font-family-txt: $ck-text-font;
|
||||
$ck-w1-font-size-txt: $ck-text-size;
|
||||
$ck-w1-color-txt: $color-dark;
|
||||
$ck-w1-color-href-hover: $ck-secondary-color;
|
||||
|
||||
/* Button settings */
|
||||
$ck-w1-color-btn-hover: $ck-secondary-color;
|
||||
$ck-w1-font-family-btn-txt: $ck-text-font;
|
||||
$ck-w1-font-size-btn-txt: $ck-text-size;
|
||||
$ck-w1-color-btn-txt-hover: text($ck-secondary-color);
|
||||
|
||||
/* Title settings */
|
||||
$ck-w2-font-family-title: $ck-title-font;
|
||||
$ck-w2-font-size-title: $ck-title-size;
|
||||
$ck-w2-color-title: $color-dark;
|
||||
|
||||
/* Text settings */
|
||||
$ck-w2-font-family-txt: $ck-text-font;
|
||||
$ck-w2-font-size-txt: $ck-text-size;
|
||||
$ck-w2-color-txt: $color-dark;
|
||||
|
||||
/* Accept/Deny btn settings */
|
||||
$ck-color-accept: $ck-borders-color;
|
||||
$ck-color-deny: $ck-borders-color;
|
||||
$ck-color-accept-hover: $ck-accept-color;
|
||||
$ck-color-deny-hover: $ck-deny-color;
|
||||
$ck-color-txt: #fff;
|
||||
|
||||
/* Cookies list settings */
|
||||
$ck-bgcolor-list: $ck-list-background-color;
|
||||
$ck-font-family-list: $ck-text-font;
|
||||
$ck-font-size-list: $ck-text-size;
|
||||
$ck-color-list: $ck-secondary-color;
|
||||
$ck-color-title: $ck-secondary-color;
|
||||
$breakpoint-mobile: 535px;
|
||||
|
||||
%nav-button {
|
||||
display: flex;
|
||||
height: 3rem;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
background-color: $ck-primary-color;
|
||||
color: $ck-dark-color;
|
||||
font-family: $ck-text-font;
|
||||
font-size: 1rem;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $ck-dark-color;
|
||||
color: $ck-primary-color;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline-color: $ck-primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
// * Prevent click on clickable element using cookie notice
|
||||
|
||||
.cn-modal-bg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cn-open .cn-modal-bg {
|
||||
position: fixed;
|
||||
z-index: 1030;
|
||||
top: 0;
|
||||
display: block;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgb(0 0 0 / 60%);
|
||||
}
|
||||
|
||||
.cn-disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#cn-wrapper {
|
||||
@extend %reset-styles;
|
||||
// Display over BS elements
|
||||
z-index: $cn-cookie-button-z-index;
|
||||
|
||||
// BIG COOKIE BTN
|
||||
#cn-cookie-btn {
|
||||
position: fixed;
|
||||
right: $cn-cookie-button-position-right;
|
||||
bottom: $cn-cookie-button-position-bottom;
|
||||
left: $cn-cookie-button-position-left;
|
||||
width: $cn-cookie-button-width;
|
||||
height: $cn-cookie-button-height;
|
||||
padding: $cn-cookie-button-padding;
|
||||
background-color: $ck-btn-background-color;
|
||||
border-radius: 100%;
|
||||
box-shadow: $ck-shadow-color;
|
||||
cursor: pointer;
|
||||
|
||||
@media (min-width: $breakpoint-mobile) {
|
||||
right: $cn-cookie-button-position-right-h;
|
||||
bottom: $cn-cookie-button-position-bottom-h;
|
||||
left: $cn-cookie-button-position-left-h;
|
||||
width: $cn-cookie-button-width-h;
|
||||
height: $cn-cookie-button-height-h;
|
||||
padding: $cn-cookie-button-padding-h;
|
||||
transition: $cn-cookie-button-transition-show;
|
||||
|
||||
&:hover {
|
||||
right: $cn-cookie-button-position-right;
|
||||
bottom: $cn-cookie-button-position-bottom;
|
||||
left: $cn-cookie-button-position-left;
|
||||
transition: $cn-cookie-button-transition-hide;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline-color: color.adjust(
|
||||
$color: $ck-secondary-color,
|
||||
$lightness: -10%
|
||||
);
|
||||
}
|
||||
|
||||
&-icon {
|
||||
path {
|
||||
fill: $ck-secondary-color;
|
||||
}
|
||||
|
||||
circle {
|
||||
fill: $ck-secondary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// COOKIE BANNER MODAL
|
||||
#cn-banner {
|
||||
position: fixed;
|
||||
z-index: $cn-cookie-button-z-index;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
max-height: 100vh;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding: 0;
|
||||
margin: auto;
|
||||
margin-bottom: 0;
|
||||
background-color: $ck-bg-color;
|
||||
border-radius: 0;
|
||||
box-shadow: $ck-shadow-color;
|
||||
line-height: initial;
|
||||
opacity: 0;
|
||||
// * prevent body scroll (for mobile)
|
||||
pointer-events: none;
|
||||
transition: 0.3s;
|
||||
user-select: none;
|
||||
visibility: hidden;
|
||||
|
||||
.cn-modal-top-line {
|
||||
align-self: end;
|
||||
|
||||
#cn-close-modal {
|
||||
width: 4rem;
|
||||
height: 3rem;
|
||||
border-bottom-left-radius: 0.5rem;
|
||||
|
||||
@media (min-width: $breakpoint-mobile) {
|
||||
width: 3rem;
|
||||
height: 2rem;
|
||||
border-top-right-radius: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// * allow child body scroll
|
||||
> * {
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
@media (min-width: $breakpoint-mobile) {
|
||||
right: $cn-cookie-animation-right;
|
||||
bottom: calc($cn-cookie-button-position-bottom + 60px);
|
||||
left: $cn-cookie-animation-left;
|
||||
width: 30rem;
|
||||
height: auto;
|
||||
max-height: 26rem;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
#cn-li-template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.d-none {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
// CONTENT WRAPPER
|
||||
.cn-content {
|
||||
flex-grow: 1;
|
||||
padding: 0.8rem;
|
||||
overflow-y: auto;
|
||||
|
||||
// 1rst Page BANNER
|
||||
.cn-banner-content {
|
||||
display: flex;
|
||||
min-height: 100%;
|
||||
flex-direction: column;
|
||||
color: $ck-w1-color-txt;
|
||||
font-family: $ck-w1-font-family-txt;
|
||||
font-size: $ck-w1-font-size-txt;
|
||||
|
||||
@media (min-width: $breakpoint-mobile) {
|
||||
flex-flow: row wrap;
|
||||
align-items: center;
|
||||
|
||||
.cn-banner-img {
|
||||
width: 33%;
|
||||
}
|
||||
|
||||
.cn-banner-text {
|
||||
width: 66%;
|
||||
}
|
||||
}
|
||||
|
||||
// LOGO
|
||||
.cn-banner-img {
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
width: 90%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.cn-banner-text {
|
||||
flex: 2;
|
||||
|
||||
// TITLE
|
||||
.cn-banner-title {
|
||||
color: $ck-w1-color-title;
|
||||
font-family: $ck-w1-font-family-title;
|
||||
font-size: $ck-w1-font-size-title;
|
||||
font-weight: bold;
|
||||
line-height: $ck-w1-line-height-title;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.cn-banner-para-p {
|
||||
margin: 6px 0;
|
||||
text-align: justify;
|
||||
}
|
||||
}
|
||||
|
||||
.cn-banner-details {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
text-align: justify;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.cn-banner-btn-details {
|
||||
width: 100%;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.cn-banner-btn-details-p {
|
||||
@extend %nav-button;
|
||||
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
// 2nd Page MODAL
|
||||
.cn-modal-container {
|
||||
.cn-modal-title {
|
||||
color: $ck-w2-color-title;
|
||||
font-family: $ck-w2-font-family-title;
|
||||
font-size: $ck-w2-font-size-title;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cn-modal-subtitle {
|
||||
margin-bottom: 6px;
|
||||
color: $ck-w2-color-txt;
|
||||
color: $ck-w2-color-title;
|
||||
font-family: $ck-w2-font-family-txt;
|
||||
font-size: $ck-w2-font-size-txt;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cn-modal-description {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: $ck-w2-color-txt;
|
||||
font-family: $ck-w2-font-family-txt;
|
||||
font-size: $ck-w2-font-size-txt;
|
||||
font-weight: normal;
|
||||
line-height: initial;
|
||||
}
|
||||
|
||||
.cn-modal-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
overflow: auto;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 20px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.cn-cookie-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px;
|
||||
border: 1px solid $ck-bgcolor-list;
|
||||
margin: 10px 0;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: $ck-color-list;
|
||||
font-family: $ck-font-family-list;
|
||||
font-size: $ck-font-size-list;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $ck-color-list;
|
||||
font-family: $ck-font-family-list;
|
||||
font-size: $ck-font-size-list;
|
||||
}
|
||||
|
||||
label {
|
||||
color: $ck-color-list;
|
||||
font-family: $ck-font-family-list;
|
||||
font-size: $ck-font-size-list;
|
||||
}
|
||||
}
|
||||
|
||||
.cn-cookie {
|
||||
&-name {
|
||||
color: $ck-color-title;
|
||||
}
|
||||
|
||||
&-infos {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
|
||||
span:first-of-type {
|
||||
font-size: calc($ck-font-size-list * 1.25);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.cn-cookie-description {
|
||||
color: $ck-w2-color-txt;
|
||||
}
|
||||
|
||||
a {
|
||||
width: fit-content;
|
||||
}
|
||||
}
|
||||
|
||||
&-buttons {
|
||||
display: flex;
|
||||
width: 200px;
|
||||
justify-content: space-around;
|
||||
margin-top: 6px;
|
||||
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
width: 100px;
|
||||
padding: 6px 20px;
|
||||
color: $ck-color-txt;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
div {
|
||||
display: table;
|
||||
margin: 0.5em;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.accept,
|
||||
.deny {
|
||||
label {
|
||||
@extend %nav-button;
|
||||
|
||||
height: inherit;
|
||||
background: $ck-color-accept;
|
||||
}
|
||||
}
|
||||
|
||||
.accept {
|
||||
label:hover,
|
||||
label:focus {
|
||||
background-color: color.adjust(
|
||||
$color: $ck-color-accept-hover,
|
||||
$lightness: -10%
|
||||
);
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: $ck-color-accept-hover;
|
||||
}
|
||||
}
|
||||
|
||||
.deny {
|
||||
label:hover,
|
||||
label:focus {
|
||||
background-color: color.adjust(
|
||||
$color: $ck-color-deny-hover,
|
||||
$lightness: -10%
|
||||
);
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: $ck-color-deny-hover;
|
||||
}
|
||||
}
|
||||
|
||||
// stylelint-disable-next-line selector-max-compound-selectors
|
||||
.accept input:checked ~ label {
|
||||
background-color: $ck-color-accept-hover;
|
||||
}
|
||||
// stylelint-disable-next-line selector-max-compound-selectors
|
||||
.deny input:checked ~ label {
|
||||
background-color: $ck-color-deny-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// NAV BAR
|
||||
.cn-nav {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 3rem * 2;
|
||||
flex-shrink: 0;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
border-top: 1px solid $ck-borders-color;
|
||||
|
||||
#cn-deny-banner {
|
||||
@extend %nav-button;
|
||||
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
#cn-accept-banner {
|
||||
@extend %nav-button;
|
||||
|
||||
width: 50%;
|
||||
border-right: 1px solid $ck-borders-color;
|
||||
border-left: 1px solid $ck-borders-color;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
#cn-settings-banner {
|
||||
@extend %nav-button;
|
||||
|
||||
width: 100%;
|
||||
border-top: 1px solid $ck-borders-color;
|
||||
}
|
||||
|
||||
@media (min-width: $breakpoint-mobile) {
|
||||
height: 3rem;
|
||||
flex-wrap: initial;
|
||||
border-bottom-left-radius: 0.5rem;
|
||||
border-bottom-right-radius: 0.5rem;
|
||||
|
||||
#cn-deny-banner {
|
||||
width: 33.33%;
|
||||
}
|
||||
|
||||
#cn-accept-banner {
|
||||
width: 33.33%;
|
||||
}
|
||||
|
||||
#cn-settings-banner {
|
||||
width: 33.33%;
|
||||
border-top: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $breakpoint-mobile) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// SHOW CN BANNER MODAL
|
||||
.cn-open {
|
||||
overflow: hidden !important;
|
||||
|
||||
#cn-wrapper #cn-banner {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
|
||||
@media (min-width: $breakpoint-mobile) {
|
||||
right: $cn-cookie-button-position-right;
|
||||
left: $cn-cookie-button-position-left;
|
||||
}
|
||||
}
|
||||
|
||||
#cn-wrapper #cn-cookie-btn {
|
||||
@media (min-width: $breakpoint-mobile) {
|
||||
right: $cn-cookie-button-position-right;
|
||||
bottom: $cn-cookie-button-position-bottom;
|
||||
left: $cn-cookie-button-position-left;
|
||||
transition: $cn-cookie-button-transition-hide;
|
||||
}
|
||||
}
|
||||
}
|
||||
@import "@ldc-web/cookie-notice";
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
<div class="row w-100 mx-auto">
|
||||
<div class="col-12 col-md-6 p-0">
|
||||
<div class="h-100 me-md-5 position-relative">
|
||||
<fieldset class="select-form d-flex flex-column justify-content-end align-items-start h-100">
|
||||
<fieldset class="select-form d-flex flex-column justify-content-end align-items-start h-100" inert="true">
|
||||
<select class="form-control text-capitalize" name="civility" role="button">
|
||||
<option class="text-capitalize" disabled selected>{{ __('validation.custom.civility') }}</option>
|
||||
@foreach (\App\Enums\Contact\CivilityEnum::toArray() as $key => $enumObject)
|
||||
|
|
@ -48,56 +48,56 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 p-0">
|
||||
<fieldset class="d-flex flex-column justify-content-center align-items-start ps-md-5">
|
||||
<fieldset class="d-flex flex-column justify-content-center align-items-start ps-md-5" inert="true">
|
||||
<label class="mt-1">{{ Str::of(__('validation.attributes.last_name'))->ucFirst() }} :</label>
|
||||
<input class="form-control" name="last_name" value="{{ old('last_name') }}">
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 p-0">
|
||||
<fieldset class="d-flex flex-column justify-content-center align-items-start pe-md-5">
|
||||
<fieldset class="d-flex flex-column justify-content-center align-items-start pe-md-5" inert="true">
|
||||
<label class="mt-1">{{ Str::of(__('validation.attributes.first_name'))->ucFirst() }} :</label>
|
||||
<input class="form-control" name="first_name" value="{{ old('first_name') }}">
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 p-0">
|
||||
<fieldset class="d-flex flex-column justify-content-center align-items-start ps-md-5">
|
||||
<fieldset class="d-flex flex-column justify-content-center align-items-start ps-md-5" inert="true">
|
||||
<label class="mt-1">{{ Str::of(__('validation.custom.society'))->ucFirst() }} :</label>
|
||||
<input class="form-control" name="society" value="{{ old('society') }}">
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 p-0">
|
||||
<fieldset class="d-flex flex-column justify-content-center align-items-start pe-md-5">
|
||||
<fieldset class="d-flex flex-column justify-content-center align-items-start pe-md-5" inert="true">
|
||||
<label class="mt-1">{{ Str::of(__('validation.attributes.email'))->ucFirst() }}* :</label>
|
||||
<input class="form-control" name="email" value="{{ old('email') }}" required>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 p-0">
|
||||
<fieldset class="d-flex flex-column justify-content-center align-items-start ps-md-5">
|
||||
<fieldset class="d-flex flex-column justify-content-center align-items-start ps-md-5" inert="true">
|
||||
<label class="mt-1">{{ Str::of(__('validation.attributes.phone'))->ucFirst() }} :</label>
|
||||
<input class="form-control" name="phone" type="number" value="{{ old('phone') }}">
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 p-0">
|
||||
<fieldset class="d-flex flex-column justify-content-center align-items-start pe-md-5">
|
||||
<fieldset class="d-flex flex-column justify-content-center align-items-start pe-md-5" inert="true">
|
||||
<label class="mt-1">{{ Str::of(__('validation.attributes.address'))->ucFirst() }}* :</label>
|
||||
<input class="form-control" name="address" value="{{ old('address') }}" required>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 p-0">
|
||||
<fieldset class="d-flex flex-column justify-content-center align-items-start ps-md-5">
|
||||
<fieldset class="d-flex flex-column justify-content-center align-items-start ps-md-5" inert="true">
|
||||
<label class="mt-1">{{ Str::of(__('validation.attributes.postal_code'))->ucFirst() }}* :</label>
|
||||
<input class="form-control" name="postal_code" type="number" value="{{ old('postal_code') }}" required>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 p-0">
|
||||
<fieldset class="d-flex flex-column justify-content-center align-items-start pe-md-5">
|
||||
<fieldset class="d-flex flex-column justify-content-center align-items-start pe-md-5" inert="true">
|
||||
<label class="mt-1">{{ Str::of(__('validation.attributes.city'))->ucFirst()->value() }}* :</label>
|
||||
<input class="form-control" name="city" value="{{ old('city') }}" required>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 p-0">
|
||||
<div class="ms-md-5 position-relative pt-md-0 h-100 pt-4">
|
||||
<fieldset class="select-form d-flex flex-column justify-content-end align-items-start h-100">
|
||||
<fieldset class="select-form d-flex flex-column justify-content-end align-items-start h-100" inert="true">
|
||||
<select class="form-control text-capitalize" name="object" role="button" required>
|
||||
<option class="text-capitalize" disabled selected>{{ __('validation.custom.object') }}</option>
|
||||
@foreach (\App\Enums\Contact\ObjectEnum::toArray() as $key => $enumObject)
|
||||
|
|
@ -115,15 +115,16 @@
|
|||
{{ Str::of(__('pour pouvoir vous répondre nous avons besoin de quelques informations :'))->ucFirst()->value() }}
|
||||
</p>
|
||||
<div class="col-12 col-md-6 p-0">
|
||||
<fieldset class="d-flex flex-column justify-content-center align-items-start pe-md-5">
|
||||
<fieldset class="d-flex flex-column justify-content-center align-items-start pe-md-5" inert="true">
|
||||
<label class="mt-1" for="product_name">
|
||||
{{ Str::of(__('validation.custom.product_name'))->ucFirst()->value() }}* :
|
||||
</label>
|
||||
<input class="form-control" id="product_name" name="product_name" value="{{ old('product_name') }}">
|
||||
<input class="form-control" id="product_name" name="product_name"
|
||||
value="{{ old('product_name') }}">
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 p-0">
|
||||
<fieldset class="d-flex flex-column justify-content-center align-items-start ps-md-5">
|
||||
<fieldset class="d-flex flex-column justify-content-center align-items-start ps-md-5" inert="true">
|
||||
<label class="mt-1" for="product_date_limit">
|
||||
{{ Str::of(__('validation.custom.product_date_limit'))->ucFirst()->value() }}* :
|
||||
<span class="text-body-secondary">{{ __('Ex : 25/08/2028') }}</span>
|
||||
|
|
@ -133,7 +134,7 @@
|
|||
</fieldset>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 p-0">
|
||||
<fieldset class="d-flex flex-column justify-content-center align-items-start pe-md-5">
|
||||
<fieldset class="d-flex flex-column justify-content-center align-items-start pe-md-5" inert="true">
|
||||
<label class="mt-1" for="product_barcode">
|
||||
{{ Str::of(__('validation.custom.product_barcode'))->ucFirst()->value() }}*
|
||||
{{ __('validation.custom.product_barcode_detail') }} :
|
||||
|
|
@ -143,7 +144,7 @@
|
|||
</fieldset>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 p-0">
|
||||
<fieldset class="d-flex flex-column justify-content-center align-items-start ps-md-5">
|
||||
<fieldset class="d-flex flex-column justify-content-center align-items-start ps-md-5" inert="true">
|
||||
<label class="mt-1" for="product_lot">
|
||||
{{ Str::of(__('validation.custom.product_lot'))->ucFirst()->value() }}* :
|
||||
</label>
|
||||
|
|
@ -152,7 +153,7 @@
|
|||
</fieldset>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 p-0">
|
||||
<fieldset class="d-flex flex-column justify-content-center align-items-start pe-md-5">
|
||||
<fieldset class="d-flex flex-column justify-content-center align-items-start pe-md-5" inert="true">
|
||||
<label class="mt-1" for="product_date_consumption">
|
||||
{{ Str::of(__('validation.custom.product_date_consumption'))->ucFirst()->value() }}* :
|
||||
<span class="text-body-secondary">{{ __('Ex : 25/08/2028') }}</span>
|
||||
|
|
@ -162,7 +163,7 @@
|
|||
</fieldset>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 p-0">
|
||||
<fieldset class="d-flex flex-column justify-content-center align-items-start ps-md-5">
|
||||
<fieldset class="d-flex flex-column justify-content-center align-items-start ps-md-5" inert="true">
|
||||
<label class="mt-1" for="product_location">
|
||||
{{ Str::of(__('validation.custom.product_location'))->ucFirst()->value() }}* :
|
||||
</label>
|
||||
|
|
@ -171,7 +172,7 @@
|
|||
</fieldset>
|
||||
</div>
|
||||
<div class="col-12 my-3 p-0">
|
||||
<fieldset class="row">
|
||||
<fieldset class="row" inert="true">
|
||||
<div class="col-12 col-md-6 pe-md-5 m-xl-0 mb-2">
|
||||
<p class="mb-0 mt-1">
|
||||
{{ Str::of(__('souhaitez-vous joindre une photo ?'))->ucFirst()->value() }}
|
||||
|
|
@ -195,7 +196,7 @@
|
|||
</p>
|
||||
</div>
|
||||
<div class="col-12 mb-3 p-0">
|
||||
<fieldset class="d-flex flex-column justify-content-center align-items-start">
|
||||
<fieldset class="d-flex flex-column justify-content-center align-items-start" inert="true">
|
||||
<label class="mt-1" for="message">
|
||||
{{ Str::of(__('message'))->ucFirst()->value() }} {{ __('(entre 3 et 500 caractères)') }}* :
|
||||
</label>
|
||||
|
|
@ -203,7 +204,8 @@
|
|||
</fieldset>
|
||||
</div>
|
||||
<div class="col-12 mb-1 p-0">
|
||||
<fieldset class="d-flex justify-content-start align-items-start align-items-md-center flex-row">
|
||||
<fieldset class="d-flex justify-content-start align-items-start align-items-md-center flex-row"
|
||||
inert="true">
|
||||
<input class="form-check-input rounded-0 mt-2 p-3" id="accept_rules" name="accept_rules" type="checkbox"
|
||||
value="{{ old('accept_rules') }}" role="button" required>
|
||||
<label class="ms-2 mt-1" for="accept_rules" role="button">
|
||||
|
|
@ -217,7 +219,8 @@
|
|||
</fieldset>
|
||||
</div>
|
||||
<div class="col-12 mb-1 p-0">
|
||||
<fieldset class="d-flex justify-content-start align-items-start align-items-md-center flex-row">
|
||||
<fieldset class="d-flex justify-content-start align-items-start align-items-md-center flex-row"
|
||||
inert="true">
|
||||
<input class="form-check-input rounded-0 mt-2 p-3" id="send_data" name="send_data" type="checkbox"
|
||||
value="{{ old('send_data') }}" role="button" required>
|
||||
<label class="ms-2 mt-1" for="send_data" role="button">
|
||||
|
|
@ -247,8 +250,8 @@
|
|||
</div>
|
||||
</div>
|
||||
<button class="g-recaptcha btn btn-primary w-100 text-capitalize"
|
||||
data-sitekey="{{ config('services.google.recaptcha.public') }}"
|
||||
type="submit">{{ Str::ucfirst(__('contact.send')) }}</button>
|
||||
data-sitekey="{{ config('services.google.recaptcha.public') }}" type="submit"
|
||||
inert="true">{{ Str::ucfirst(__('contact.send')) }}</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
|
@ -270,7 +273,9 @@
|
|||
'sitekey': '{{ config('services.google.recaptcha.public') }}'
|
||||
});
|
||||
document.getElementById('recaptcha-warning').remove();
|
||||
document.getElementById('contact-form').inert = false;
|
||||
document.getElementById('contact-form').querySelectorAll('[inert="true"]').forEach(element => {
|
||||
element.inert = false;
|
||||
});
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -5,15 +5,15 @@
|
|||
<title>{{ $strings->picture_cookie_title }}</title>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M14.0001 2.93383C14.0001 4.16622 14.6159 5.25477 15.5567 5.90849C15.3526 6.46423 15.2412 7.06473 15.2412 7.69126C15.2412 10.5472 17.5564 12.8624 20.4123 12.8624C21.0807 12.8624 21.7195 12.7356 22.3059 12.5047C22.9456 13.527 24.0817 14.2069 25.3766 14.2069C26.1872 14.2069 26.9357 13.9404 27.539 13.4903C27.5453 13.6594 27.5484 13.8294 27.5484 14C27.5484 21.4826 21.4826 27.5484 14 27.5484C6.51748 27.5484 0.45166 21.4826 0.45166 14C0.45166 6.51748 6.51748 0.45166 14 0.45166C14.3209 0.45166 14.6391 0.462811 14.9543 0.484747C14.3618 1.12929 14.0001 1.98931 14.0001 2.93383ZM21.2176 2.53212C21.2195 2.54914 21.2213 2.56619 21.2229 2.58328C21.2569 2.58864 21.2909 2.59433 21.3247 2.60035C21.2891 2.57745 21.2534 2.5547 21.2176 2.53212ZM25.5171 6.86104C25.523 6.89745 25.5285 6.93399 25.5336 6.97066C25.5512 6.97141 25.5687 6.97228 25.5861 6.97328C25.5633 6.93574 25.5403 6.89833 25.5171 6.86104ZM12.5247 2.09283C12.4748 2.38291 12.4487 2.68118 12.4487 2.98553C12.4487 4.33316 12.9591 5.56158 13.7972 6.48802C13.7266 6.87842 13.6898 7.28054 13.6898 7.69126C13.6898 11.404 16.6996 14.4137 20.4123 14.4137C20.8725 14.4137 21.3219 14.3675 21.7562 14.2794C22.689 15.1941 23.9669 15.7582 25.3766 15.7582C25.5439 15.7582 25.7094 15.7503 25.8726 15.7347C25.0321 21.5385 20.0368 25.9971 14.0001 25.9971C7.37431 25.9971 2.00305 20.6258 2.00305 14.0001C2.00305 7.87378 6.59498 2.82 12.5247 2.09283Z"
|
||||
fill="#FF4E4E" />
|
||||
<circle cx="7.58784" cy="12.8624" r="1.96503" fill="#FF4E4E" />
|
||||
<circle cx="8.82887" cy="19.2745" r="1.3445" fill="#FF4E4E" />
|
||||
<circle cx="13.6897" cy="14.5171" r="1.03423" fill="#FF4E4E" />
|
||||
<circle cx="11.4144" cy="7.48439" r="0.930805" fill="#FF4E4E" />
|
||||
<circle cx="17.5164" cy="20.3089" r="1.86161" fill="#FF4E4E" />
|
||||
<circle cx="21.3432" cy="6.7604" r="0.930805" fill="#FF4E4E" />
|
||||
<circle cx="22.1706" cy="1.89958" r="1.44792" fill="#FF4E4E" />
|
||||
<circle cx="26.8245" cy="8.31185" r="0.72396" fill="#FF4E4E" />
|
||||
fill="#000000" />
|
||||
<circle cx="7.58784" cy="12.8624" r="1.96503" fill="#000000" />
|
||||
<circle cx="8.82887" cy="19.2745" r="1.3445" fill="#000000" />
|
||||
<circle cx="13.6897" cy="14.5171" r="1.03423" fill="#000000" />
|
||||
<circle cx="11.4144" cy="7.48439" r="0.930805" fill="#000000" />
|
||||
<circle cx="17.5164" cy="20.3089" r="1.86161" fill="#000000" />
|
||||
<circle cx="21.3432" cy="6.7604" r="0.930805" fill="#000000" />
|
||||
<circle cx="22.1706" cy="1.89958" r="1.44792" fill="#000000" />
|
||||
<circle cx="26.8245" cy="8.31185" r="0.72396" fill="#000000" />
|
||||
</svg>
|
||||
</button>
|
||||
{{-- BANNER --}}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue