xxxxxxxxxx
1
<div class="pt-4">
2
<div class="p-3">
3
<div class="row">
4
<div class="col-12 text-left pt-5">
5
<h2 class="fw-bold color-h2">Test</h2>
6
</div>
7
<div class="col-12 pt-4 text-left">
8
<div class="bg-white p-4">
9
<p class="color-text">
10
Test
11
</p>
12
<form id="form" class="g-3 needs-validation" novalidate role="form">
13
<div class="d-flex d-lg-none btn-group btn-group-nav" role="group" aria-label="navigation">
14
<button type="button" data-section="section-info" class="btn btn-nav btn-group-color active w-100 text-center" onClick="initFloatingLabel('info');">
15
<svg id="id-svg-section-info" xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-info-circle icon-ffffff" viewBox="0 0 16 16">
16
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
17
<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
18
</svg>
19
</button>
20
<button type="button" data-section="section-configuration" class="btn btn-nav btn-nav btn-group-color w-100 text-center" onClick="initFloatingLabel('configuration');">
21
<svg id="id-svg-section-configuration" xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-gear icon-main-color" viewBox="0 0 16 16">
22
<path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z"/>
23
<path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z"/>
24
</svg>
25
</button>
26
<button type="button" data-section="section-colis" class="btn btn-nav btn-group-color w-100 text-center" onClick="initFloatingLabel('colis');">
27
<svg id="id-svg-section-colis" xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-box-seam icon-main-color" viewBox="0 0 16 16">
28
<path d="M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5l2.404.961L10.404 2l-2.218-.887zm3.564 1.426L5.596 5 8 5.961 14.154 3.5l-2.404-.961zm3.25 1.7-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z"/>
29
</svg>
30
</button>
31
<button type="button" data-section="section-scan" class="btn btn-nav btn-group-color w-100 text-center" onClick="initFloatingLabel('scan');">
32
<svg id="id-svg-section-scan" xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-upc-scan icon-main-color" viewBox="0 0 16 16">
33
<path d="M1.5 1a.5.5 0 0 0-.5.5v3a.5.5 0 0 1-1 0v-3A1.5 1.5 0 0 1 1.5 0h3a.5.5 0 0 1 0 1h-3zM11 .5a.5.5 0 0 1 .5-.5h3A1.5 1.5 0 0 1 16 1.5v3a.5.5 0 0 1-1 0v-3a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 1-.5-.5zM.5 11a.5.5 0 0 1 .5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 1 0 1h-3A1.5 1.5 0 0 1 0 14.5v-3a.5.5 0 0 1 .5-.5zm15 0a.5.5 0 0 1 .5.5v3a1.5 1.5 0 0 1-1.5 1.5h-3a.5.5 0 0 1 0-1h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 1 .5-.5zM3 4.5a.5.5 0 0 1 1 0v7a.5.5 0 0 1-1 0v-7zm2 0a.5.5 0 0 1 1 0v7a.5.5 0 0 1-1 0v-7zm2 0a.5.5 0 0 1 1 0v7a.5.5 0 0 1-1 0v-7zm2 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-7zm3 0a.5.5 0 0 1 1 0v7a.5.5 0 0 1-1 0v-7z"/>
34
</svg>
35
</button>
36
</div>
37
<div class="d-lg-flex pt-2">
38
<div class="">
39
<div class="content-section mt-1 mb-3 pt-2 pb-1 pe-2 bg_content" id="section-info">
40
<ul>
41
<li class="color-text list-unstyled">Text</li>
42
</ul>
43
</div>
44
</div>
45
<div class="col-12 col-lg-4 pe-lg-4">
46
<div class="content-section d-none d-lg-block" id="section-scan">
47
<div class="col-12 pt-3">
48
<div class="form-outline">
49
<input type="text" class="form-control" name="test_3" id="test_3" value="" />
50
<label for="identifiant_1" class="form-label color-text">Test 3</label>
51
</div>
52
</div>
53
</div>
54
<div class="content-section d-none d-lg-block" id="section-configuration">
55
<div class="col-12 pt-3">
56
<div class="form-outline">
57
<input type="text" class="form-control" name="test_1" id="test_1" value="" />
58
<label for="identifiant_1" class="form-label color-text">Test 1</label>
59
</div>
60
</div>
61
</div>
62
</div>
63
<div class="col-12 col-lg-8 ps-lg-4">
64
<div class="content-section d-none d-lg-block" id="section-colis" style="display: none;">
65
<div class="col-12 pt-3">
66
<div class="form-outline">
67
<input type="text" class="form-control" name="test_2" id="test_2" value="" />
68
<label for="identifiant_1" class="form-label color-text">Test 2</label>
69
</div>
70
</div>
71
</div>
72
</div>
73
</div>
74
</form>
75
</div>
76
</div>
77
</div>
78
</div>
79
</div>
xxxxxxxxxx
1
.btn-group-color,
2
.btn-group-color:not(:active)>svg,
3
.btn-group-color:not(.active)>svg
4
{
5
color: var(--color-gray-blue);
6
background-color: var(--color-white);
7
border-color: var(--color-gray-blue);
8
}
9
10
.btn-group-color:hover,
11
.btn-group-color:hover>svg,
12
.btn-group-color:active>svg,
13
.btn-group-color.active>svg
14
{
15
color: var(--color-white);
16
background-color: var(--color-gray-blue);
17
border-color: var(--color-gray-blue);
18
}
19
20
.btn-check:checked + .btn-group-color, .btn-check:active + .btn-group-color, .btn-group-color-main:active, .btn-group-color.active, .show > .btn-group-color.dropdown-toggle
21
{
22
color: var(--color-white);
23
background-color: var(--color-gray-blue);
24
border-color: var(--color-gray-blue-border);
25
}
26
27
.btn-check:checked + .btn-group-color:focus, .btn-check:active + .btn-group-color:focus, .btn-group-color:active, .btn-group-color.active, .btn-group-color:active:focus, .btn-group-color.active:focus, .show > .btn-group-color.dropdown-toggle:focus
28
{
29
box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
30
}
31
32
.btn-group-color:disabled, .btn-group-color.disabled
33
{
34
color: var(--color-white);
35
background-color: var(--color-gray-blue);
36
border-color: var(--color-gray-blue);
37
}
38
39
.bg_content
40
{
41
background-color: #ECEFF1;
42
}
43
44
.icon-ffffff
45
{
46
color: #FFFFFF;
47
}
48
49
.icon-main-color
50
{
51
color: #34515E;
52
}
53
54
.color-h2
55
{
56
color: #607D8B;
57
}
58
59
.select-input.form-control[readonly]:not([disabled])
60
{
61
background-color: #fff;
62
}
63
64
.select-arrow:before
65
{
66
position: relative;
67
content: "";
68
display: inline-block;
69
width: 0.6em;
70
height: 0.6em;
71
border-right: 0.15em solid black;
72
border-top: 0.15em solid black;
73
transform: rotate(135deg);
74
margin-right: 0.6em;
75
top:0.25em;
76
}
77
78
.input-group > .form-control
79
{
80
min-height: calc(2.08rem + 7px);
81
height: calc(2.08rem + 7px);
82
padding-top: 0.6rem;
83
}
84
85
.color-text
86
{
87
color: #34515E;
88
}
89
90
.color-text:hover
91
{
92
color: #34515E;
93
}
94
95
.btn-color-main
96
{
97
color: #FFFFFF;
98
background-color: #34515E;
99
border-color: #34515E;
100
}
101
102
.btn-color-main:hover
103
{
104
color: #34515E;
105
background-color: #FFFFFF;
106
border-color: #34515E;
107
}
xxxxxxxxxx
1
function ajouteClass(id, valeur) {
2
document.getElementById(id).classList.add(valeur);
3
}
4
5
function supprimeClass(id, valeur) {
6
document.getElementById(id).classList.remove(valeur);
7
}
8
9
function initFloatingLabel(svg_selected) {
10
/*ajouteClass('section-info', 'd-none');
11
ajouteClass('section-configuration', 'd-none');
12
ajouteClass('section-colis', 'd-none');
13
ajouteClass('section-scan', 'd-none');
14
15
supprimeClass('section-'+svg_selected, 'd-none');*/
16
17
document.querySelectorAll('.form-outline').forEach((formOutline) => {
18
const instance = mdb.Input.getInstance(formOutline)
19
20
if (instance) {
21
instance.update();
22
} else {
23
new mdb.Input(formOutline).init();
24
}
25
});
26
}
27
Console errors: 0