diff --git a/content/scss/_c-content-display.scss b/content/scss/_c-content-display.scss
index ba092cfa..9ee86e37 100644
--- a/content/scss/_c-content-display.scss
+++ b/content/scss/_c-content-display.scss
@@ -29,10 +29,6 @@
border-right: .2rem solid $color-gray-200;
}
- table td {
- border-bottom: 1px solid $color-gray-100;
- }
-
table tr:last-child td,
table tr:last-child th[scope="row"] {
border-bottom: none;
diff --git a/content/scss/_c-table.scss b/content/scss/_c-table.scss
index 5ac2ea29..b2298f02 100644
--- a/content/scss/_c-table.scss
+++ b/content/scss/_c-table.scss
@@ -128,6 +128,9 @@ $c-table-border-radius: $g-border-radius-medium !default;
.dotted{
border-right: none;
border-right: 2px dashed white;
+ &:last-child{
+ border-right: 2px solid $color-gray-50;
+ }
}
.dotted-bottom{
border-bottom: none;
diff --git a/content/scss/_c-tooltip.scss b/content/scss/_c-tooltip.scss
index ed03e237..10d8ef39 100644
--- a/content/scss/_c-tooltip.scss
+++ b/content/scss/_c-tooltip.scss
@@ -5,7 +5,8 @@
/* Variables
========================================================================== */
-$c-tooltip-bg: rgba(0,0,0,0.75) !default;
+
+$c-tooltip-bg: rgba(0,0,0,0.85) !default;
/* Component
========================================================================== */
@@ -14,7 +15,7 @@ $c-tooltip-bg: rgba(0,0,0,0.75) !default;
display: none;
background: $c-tooltip-bg;
color: #FFF;
- padding: .8rem 1.2rem;
+ padding: 1rem 1.2rem;
font-size: 1.3rem;
border-radius: 0.4rem;
max-width: 24rem;
diff --git a/content/templates/_components/c-table/02-c-table-styled.pug b/content/templates/_components/c-table/02-c-table-styled.pug
index bbbabe67..41ae7bc8 100644
--- a/content/templates/_components/c-table/02-c-table-styled.pug
+++ b/content/templates/_components/c-table/02-c-table-styled.pug
@@ -12,8 +12,7 @@ div.bckg-gray-50.u-padding-l
th(colspan="4").u-text-center.dotted-bottom Lorem Ipsum Dolor
tr
th.u-text-center.dotted Lorem Ipsum
- th.u-text-center Total
-
+ th.u-text-center.dotted Total
tbody
tr
td(rowspan="3").border-top-left-r Lorem Ipsum
diff --git a/content/templates/examples/template-examples/recap-table-a.pug b/content/templates/examples/template-examples/recap-table-a.pug
new file mode 100644
index 00000000..e8de1e02
--- /dev/null
+++ b/content/templates/examples/template-examples/recap-table-a.pug
@@ -0,0 +1,54 @@
+extends /templates/prototypes/_layouts/default
+
+block append pageVariables
+ - var moduleTitle = "Récapitulatif des sommes des rémunérations"
+
+block content
+ .c-app-layout-inner
+ //- .c-app-layout-inner__sidebar.u-position-fixed
+ //- include /templates/prototypes/partials/side-menu
+
+ .c-app-layout-inner__content
+ include /templates/prototypes/partials/main-title-concessions
+
+ .o-container.c-content
+ .o-container-vertical--padding-small.u-position-relative
+ h3.c-h2.u-spacer-bottom-xl.o-flex.o-flex--vertical-center(style="margin-left: 12%;")
+ | Unité de production : “Nom de l’activité”
+ span(class="c-tooltip-icon u-spacer-left-s" data-tooltip="tooltip-5" data-tooltip-placement="bottom")
+ +icon('circle-help')
+ .c-tooltip#tooltip-5(role="tooltip")
+ | Information sur l'unité de production ou autre explication venant en aide à l'utilisateur
+ .c-tooltip__arrow(data-popper-arrow)
+ table.c-table.c-table--styled.c-table--bordered.js-data-table
+ thead
+ tr
+ th(rowspan="2" class="disabled")
+ th(rowspan="2") Statut
+ th(colspan="3").u-text-center.dotted-bottom Concession de droit d’auteur
+ th(rowspan="2").u-text-center salaire brut (b)
+ th(rowspan="2").u-text-center Ratio (a/a+b)
+ tr
+ th.u-text-center.dotted Autre
+ th.u-text-center.dotted Lié à une prestation (a)
+ th.u-text-center.dotted Total
+
+ tbody
+ tr
+ td(rowspan="1" style="width: 12%;").border-top-left-r Nom Prénom
+ td
+ +c-status-pill({skin: 'success'}) Validées
+ td.u-text-center 300,00 €
+ td.u-text-center 500,00 €
+ td.u-text-center 700,00 €
+ td.u-text-center 1000,00 €
+ td.u-text-center 33%
+ tr
+ td(rowspan="1" style="width: 12%;").border-bottom-left-r Nom Prénom
+ td
+ +c-status-pill({skin: 'success'}) Validées
+ td.u-text-center 300,00 €
+ td.u-text-center 500,00 €
+ td.u-text-center 700,00 €
+ td.u-text-center 1000,00 €
+ td.u-text-center 33%
\ No newline at end of file
diff --git a/content/templates/examples/template-examples/recap-table-m.pug b/content/templates/examples/template-examples/recap-table-m.pug
new file mode 100644
index 00000000..7c61957f
--- /dev/null
+++ b/content/templates/examples/template-examples/recap-table-m.pug
@@ -0,0 +1,45 @@
+extends /templates/prototypes/_layouts/default
+
+block append pageVariables
+ - var moduleTitle = "Récapitulatif des sommes des rémunérations"
+
+block content
+ .c-app-layout-inner
+ //- .c-app-layout-inner__sidebar.u-position-fixed
+ //- include /templates/prototypes/partials/side-menu
+
+ .c-app-layout-inner__content
+ include /templates/prototypes/partials/main-title-concessions
+
+ .o-container.c-content
+ .o-container-vertical--padding-small.u-position-relative
+ h3.c-h2.u-spacer-bottom-xl.o-flex.o-flex--vertical-center(style="margin-left: 12%;")
+ | Mon récapitulatif pour PA
+ span(class="c-tooltip-icon u-spacer-left-s" data-tooltip="tooltip-5" data-tooltip-placement="bottom")
+ +icon('circle-help')
+ .c-tooltip#tooltip-5(role="tooltip")
+ | Information sur l'unité de production ou autre explication venant en aide à l'utilisateur
+ .c-tooltip__arrow(data-popper-arrow)
+ table.c-table.c-table--styled.c-table--bordered.js-data-table
+ thead
+ tr
+ th(rowspan="2" class="disabled")
+ th(rowspan="2") Statut
+ th(colspan="3").u-text-center.dotted-bottom Concession de droit d’auteur
+ th(rowspan="2").u-text-center salaire brut (b)
+ th(rowspan="2").u-text-center Ratio (a/a+b)
+ tr
+ th.u-text-center.dotted Autre
+ th.u-text-center.dotted Lié à une prestation (a)
+ th.u-text-center.dotted Total
+
+ tbody
+ tr
+ td(rowspan="1" style="width: 12%;").border-top-left-r Nom Prénom
+ td
+ +c-status-pill({skin: 'success'}) Validées
+ td.u-text-center 300,00 €
+ td.u-text-center 500,00 €
+ td.u-text-center 700,00 €
+ td.u-text-center 1000,00 €
+ td.u-text-center 33%
\ No newline at end of file
diff --git a/content/templates/examples/template-examples/recap-table-phase-2.pug b/content/templates/examples/template-examples/recap-table-phase-2.pug
new file mode 100644
index 00000000..3701c0cc
--- /dev/null
+++ b/content/templates/examples/template-examples/recap-table-phase-2.pug
@@ -0,0 +1,84 @@
+extends /templates/prototypes/_layouts/default
+
+block append pageVariables
+ - var moduleTitle = "Récapitulatif des sommes des rémunérations"
+
+block content
+ .c-app-layout-inner
+ //- .c-app-layout-inner__sidebar.u-position-fixed
+ //- include /templates/prototypes/partials/side-menu
+
+ .c-app-layout-inner__content
+ include /templates/prototypes/partials/main-title-concessions
+
+ .o-container.c-content
+ .o-container-vertical--padding-small.u-position-relative
+ h3.c-h2.u-spacer-bottom-xl.o-flex.o-flex--vertical-center(style="margin-left: 12%;")
+ | Activité: ABC
+ span(class="c-tooltip-icon u-spacer-left-s" data-tooltip="tooltip-5" data-tooltip-placement="bottom")
+ +icon('circle-help')
+ .c-tooltip#tooltip-5(role="tooltip")
+ | Information sur l'unité de production ou autre explication venant en aide à l'utilisateur
+ .c-tooltip__arrow(data-popper-arrow)
+ table.c-table.c-table--styled.c-table--bordered.js-data-table
+ thead
+ tr
+ th(rowspan="2" class="disabled")
+ th(rowspan="2") Statut
+ th(colspan="3").u-text-center.dotted-bottom Concession de droit d’auteur
+ th(rowspan="2").u-text-center salaire brut (b)
+ th(rowspan="2").u-text-center Ratio (a/a+b)
+ tr
+ th.u-text-center.dotted Autre
+ th.u-text-center.dotted Lié à une prestation (a)
+ th.u-text-center.dotted Total
+
+ tbody
+ tr
+ td(rowspan="3" style="width: 12%;").border-top-left-r Nom Prénom
+ td
+ +c-status-pill({skin: 'success'}) Validées
+ td.u-text-center 300,00 €
+ td.u-text-center 500,00 €
+ td.u-text-center 700,00 €
+ td.u-text-center 1000,00 €
+ td.u-text-center 33%
+ tr.bckg-gray
+ td
+ +c-status-pill({skin: 'pending'}) En attente
+ td.u-text-center 300,00 €
+ td.u-text-center 500,00 €
+ td.u-text-center 700,00 €
+ td.u-text-center 1000,00 €
+ td.u-text-center 33%
+ tr.bckg-yellow
+ td Total
+ td.u-text-center 300,00 €
+ td.u-text-center 500,00 €
+ td.u-text-center 700,00 €
+ td.u-text-center 1000,00 €
+ td.u-text-center 33%
+ tr
+ td(rowspan="3" style="width: 12%;").border-bottom-left-r Nom Prénom
+ td
+ +c-status-pill({skin: 'success'}) Validées
+ td.u-text-center 300,00 €
+ td.u-text-center 500,00 €
+ td.u-text-center 700,00 €
+ td.u-text-center 1000,00 €
+ td.u-text-center 33%
+ tr.bckg-gray
+ td
+ +c-status-pill({skin: 'pending'}) En attente
+ td.u-text-center 300,00 €
+ td.u-text-center 500,00 €
+ td.u-text-center 700,00 €
+ td.u-text-center 1000,00 €
+ td.u-text-center 33%
+ tr.bckg-yellow
+ td Total
+ td.u-text-center 300,00 €
+ td.u-text-center 500,00 €
+ td.u-text-center 700,00 €
+ td.u-text-center 1000,00 €
+ td.u-text-center 33%
\ No newline at end of file
diff --git a/content/templates/examples/templates.pug b/content/templates/examples/templates.pug
index 56923ac5..01151c6c 100644
--- a/content/templates/examples/templates.pug
+++ b/content/templates/examples/templates.pug
@@ -32,7 +32,9 @@ block content
ul
h4 Concession de droits d'auteurs
- li: a(href="/examples/template-examples/recap-table.html") Récapitulatif des sommes des rémunérations
+ li: a(href="/examples/template-examples/recap-table-m.html") Récapitulatif des sommes des rémunérations (Vue M)
+ li: a(href="/examples/template-examples/recap-table-a.html") Récapitulatif des sommes des rémunérations (Vue A)
+ li: a(href="/examples/template-examples/recap-table-phase-2.html") Récapitulatif des sommes des rémunérations (Phase 2)
h4 Curu
li: a(href="/examples/template-examples/terms-and-conditions.html") Terms and conditions