diff --git a/static/publik-famille-demo/_cells.scss b/static/publik-famille-demo/_cells.scss
index 24f132b7..1832137c 100644
--- a/static/publik-famille-demo/_cells.scss
+++ b/static/publik-famille-demo/_cells.scss
@@ -12,16 +12,6 @@
}
}
-%pf-icon {
- background: var(--pf-icon-picture) no-repeat bottom left;
- background-size: contain;
- content: var(--pf-icon-content);
- display: flex;
- align-items: start;
- color: $orange;
- font-family: 'FontAwesome';
-}
-
// Links
%cell-links-list {
& > li {
diff --git a/static/publik-famille-demo/_custom.scss b/static/publik-famille-demo/_custom.scss
index 4a784dde..950511d7 100644
--- a/static/publik-famille-demo/_custom.scss
+++ b/static/publik-famille-demo/_custom.scss
@@ -1,7 +1,3 @@
-:root {
- --pf-icon-content: "";
-}
-
h1 {
font-size: $fz-1;
font-weight: 800;
diff --git a/static/publik-famille-demo/_custom_classes.scss b/static/publik-famille-demo/_custom_classes.scss
index 98b7b63a..c2f13b57 100644
--- a/static/publik-famille-demo/_custom_classes.scss
+++ b/static/publik-famille-demo/_custom_classes.scss
@@ -26,34 +26,106 @@
}
}
-div.pf-icon-list {
- ul > li:not(.add-more-items) > a {
- background: url(img/bubble.svg);
- background-position: bottom left;
- background-repeat: no-repeat;
- transition: background-position 0.2s ease-out;
+.pf-icon {
+ display: flex;
+ align-items: center;
+
+ background: bottom 30% left / 1.8rem no-repeat url(img/bubble.svg);
+ transition: all 0.2s ease-out;
+
+ &:hover {
+ background-size: 2.5rem;
+ background-position: bottom 40% left;
+ }
+
+ a {
+ padding-left: 3rem !important;
&::before {
- @extend %pf-icon;
- width: 35px;
- height: 35px;
- font-size: 35px;
- margin-right: 1rem;
- }
+ position: absolute;
+ left: 0;
+ width: 2rem;
+ height: 2rem;
+ margin: 0 0.5rem;
- &:hover {
- background-position-x: 10px;
+ background-repeat: no-repeat;
+ background-position: bottom left;
background-size: contain;
+
+ content: "";
}
}
}
+.pf-icon-button {
+ @extend %inverted-button;
+ position: relative;
+ padding: 0.8rem 4rem 0.8rem 1rem;
+
+ display: inline-block;
+ font-size: 1.2rem;
+ font-weight: bold;
+ text-decoration: none !important;
+ text-transform: uppercase;
+
+ &::after {
+ position: absolute;
+
+ width: 2rem;
+ top: calc((100% - 2rem) / 2);
+ right: 1rem;
+ height: 2rem;
+
+ background-repeat: no-repeat;
+ background-position: bottom left;
+ background-size: contain;
+
+ content: "";
+ }
+
+ &:hover {
+ text-decoration: underline !important;
+ }
+}
+
+@mixin icon($name) {
+ .pf-icon.#{$name} a::before {
+ background-image: url("img/icons/" + $name + ".svg")
+ }
+
+ .pf-icon-button.#{$name}::after {
+ background-image: url("img/icons/" + $name + ".svg")
+ }
+}
+
+@include icon("admin");
+@include icon("agent");
+@include icon("assmat");
+@include icon("calendrier");
+@include icon("cloche");
+@include icon("creche");
+@include icon("demandes");
+@include icon("dsi");
+@include icon("facture");
+@include icon("gestionnaire");
+@include icon("incsriptions");
+@include icon("left");
+@include icon("loisirs");
+@include icon("nuage");
+@include icon("periscolaire");
+@include icon("restauration");
+@include icon("right");
+@include icon("scolarisation");
+@include icon("tribu");
+@include icon("warning");
+
div.card.pf-card-detail {
h2:first-child {
border-bottom: 2px solid $gray;
padding: 1rem 0;
border-radius: 0;
}
+
.label {
color: $gray-dark;
font-size: $fz-3;
@@ -62,51 +134,10 @@ div.card.pf-card-detail {
margin-top: 0.3rem;
text-align: right;
}
+
.value {
@extend %pf-field;
margin-bottom: 0.3rem;
margin-top: 0.3rem;
}
}
-
-%icon-button {
- &:not(.pf-big-button) {
- div.links-list {
- ul > li > a {
- &::before {
- @extend %pf-icon;
- padding-right: 1rem;
- }
- }
- }
- }
-
- &.pf-big-button {
- div.links-list {
- ul > li > a {
- border: 2px solid $orange;
- padding: 0.3rem 1.5rem;
- width: max-content;
- color: $orange;
- &::after {
- @extend %pf-icon;
- margin-left: 1rem;
- font-size: 35px;
- width: 35px;
- height: 35px;
- margin-bottom: 3px;
- }
- }
- }
- }
-}
-
-.pf-icon-famille {
- @extend %icon-button;
- --pf-icon-picture: url('img/icon_famille.svg');
-}
-
-.pf-icon-add {
- @extend %icon-button;
- --pf-icon-content: '\f055';
-}
diff --git a/static/publik-famille-demo/_vars.scss b/static/publik-famille-demo/_vars.scss
index 384a2bc6..fea25af0 100644
--- a/static/publik-famille-demo/_vars.scss
+++ b/static/publik-famille-demo/_vars.scss
@@ -85,6 +85,7 @@ $button-background: $orange-dark;
$button-color: white;
$button-hover-background: $orange;
$cancel-button-style: "%inverted-button";
+$button-border: 2px solid $orange;
$error-color: $red;
$widget-unique-checkbox-position: left;
diff --git a/static/publik-famille-demo/_wcs.scss b/static/publik-famille-demo/_wcs.scss
index ff52fb7b..59edbc6b 100644
--- a/static/publik-famille-demo/_wcs.scss
+++ b/static/publik-famille-demo/_wcs.scss
@@ -30,3 +30,10 @@ div.cell.wcs-card-cell.card-table {
}
}
}
+
+%button {
+ box-shadow: none;
+ &:hover {
+ box-shadow: none;
+ }
+}
diff --git a/static/publik-famille-demo/img/icons/admin.svg b/static/publik-famille-demo/img/icons/admin.svg
new file mode 100755
index 00000000..30dc493a
--- /dev/null
+++ b/static/publik-famille-demo/img/icons/admin.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/static/publik-famille-demo/img/icons/agent.svg b/static/publik-famille-demo/img/icons/agent.svg
new file mode 100755
index 00000000..3deb6d74
--- /dev/null
+++ b/static/publik-famille-demo/img/icons/agent.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/static/publik-famille-demo/img/icons/assmat.svg b/static/publik-famille-demo/img/icons/assmat.svg
new file mode 100644
index 00000000..520be0c7
--- /dev/null
+++ b/static/publik-famille-demo/img/icons/assmat.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/static/publik-famille-demo/img/icons/calendrier.svg b/static/publik-famille-demo/img/icons/calendrier.svg
new file mode 100755
index 00000000..15bc96d7
--- /dev/null
+++ b/static/publik-famille-demo/img/icons/calendrier.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/static/publik-famille-demo/img/icons/cloche.svg b/static/publik-famille-demo/img/icons/cloche.svg
new file mode 100644
index 00000000..aa3cda43
--- /dev/null
+++ b/static/publik-famille-demo/img/icons/cloche.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/static/publik-famille-demo/img/icons/creche.svg b/static/publik-famille-demo/img/icons/creche.svg
new file mode 100644
index 00000000..8a45ff78
--- /dev/null
+++ b/static/publik-famille-demo/img/icons/creche.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/static/publik-famille-demo/img/icons/demandes.svg b/static/publik-famille-demo/img/icons/demandes.svg
new file mode 100644
index 00000000..0d2fa5e9
--- /dev/null
+++ b/static/publik-famille-demo/img/icons/demandes.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/static/publik-famille-demo/img/icons/dsi.svg b/static/publik-famille-demo/img/icons/dsi.svg
new file mode 100755
index 00000000..b5370afc
--- /dev/null
+++ b/static/publik-famille-demo/img/icons/dsi.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/static/publik-famille-demo/img/icons/facture.svg b/static/publik-famille-demo/img/icons/facture.svg
new file mode 100644
index 00000000..87b637c2
--- /dev/null
+++ b/static/publik-famille-demo/img/icons/facture.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/static/publik-famille-demo/img/icons/gestionnaire.svg b/static/publik-famille-demo/img/icons/gestionnaire.svg
new file mode 100755
index 00000000..50eb23bc
--- /dev/null
+++ b/static/publik-famille-demo/img/icons/gestionnaire.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/static/publik-famille-demo/img/icons/incsriptions.svg b/static/publik-famille-demo/img/icons/incsriptions.svg
new file mode 100644
index 00000000..78a9d185
--- /dev/null
+++ b/static/publik-famille-demo/img/icons/incsriptions.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/static/publik-famille-demo/img/icons/left.svg b/static/publik-famille-demo/img/icons/left.svg
new file mode 100644
index 00000000..cd92e89a
--- /dev/null
+++ b/static/publik-famille-demo/img/icons/left.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/static/publik-famille-demo/img/icons/loisirs.svg b/static/publik-famille-demo/img/icons/loisirs.svg
new file mode 100644
index 00000000..e09bf50f
--- /dev/null
+++ b/static/publik-famille-demo/img/icons/loisirs.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/static/publik-famille-demo/img/icons/nuage.svg b/static/publik-famille-demo/img/icons/nuage.svg
new file mode 100755
index 00000000..d262719d
--- /dev/null
+++ b/static/publik-famille-demo/img/icons/nuage.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/static/publik-famille-demo/img/icons/periscolaire.svg b/static/publik-famille-demo/img/icons/periscolaire.svg
new file mode 100644
index 00000000..4e339ffb
--- /dev/null
+++ b/static/publik-famille-demo/img/icons/periscolaire.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/static/publik-famille-demo/img/icons/restauration.svg b/static/publik-famille-demo/img/icons/restauration.svg
new file mode 100755
index 00000000..b0f829a1
--- /dev/null
+++ b/static/publik-famille-demo/img/icons/restauration.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/static/publik-famille-demo/img/icons/right.svg b/static/publik-famille-demo/img/icons/right.svg
new file mode 100644
index 00000000..0f8bd398
--- /dev/null
+++ b/static/publik-famille-demo/img/icons/right.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/static/publik-famille-demo/img/icons/scolarisation.svg b/static/publik-famille-demo/img/icons/scolarisation.svg
new file mode 100644
index 00000000..26f9e72d
--- /dev/null
+++ b/static/publik-famille-demo/img/icons/scolarisation.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/static/publik-famille-demo/img/icons/tribu.svg b/static/publik-famille-demo/img/icons/tribu.svg
new file mode 100644
index 00000000..7d33de77
--- /dev/null
+++ b/static/publik-famille-demo/img/icons/tribu.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/static/publik-famille-demo/img/icons/warning.svg b/static/publik-famille-demo/img/icons/warning.svg
new file mode 100644
index 00000000..a615c0f2
--- /dev/null
+++ b/static/publik-famille-demo/img/icons/warning.svg
@@ -0,0 +1 @@
+
\ No newline at end of file