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