entrouvert
/
publik-base-theme
15
1
Fork 1
Code Issues Pull Requests 11 Releases Wiki Activity

caen: add alternates icons for pk-attention & top-message block (#64594)

This commit is contained in:
Thomas Jund 2022-05-09 10:19:45 +02:00
parent f090e979a7
commit 01dab235a8
10 changed files with 42 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
static/caen/_custom.scss
View File

@ -1,8 +1,8 @@
$notification-blocks:
"info" "info-icon" "#0d74ef",
"success" "info-icon" "#0d74ef",
"info" "info-icon-blue-neg" "#0d74ef",
"success" "info-icon-blue-neg" "#0d74ef",
"error" "error-icon" "#ff5801",
"warning" "warning-icon" "#ff1400",
"warning" "warning-icon-red" "#ff1400",
;
@each $name, $img, $color in $notification-blocks {
@ -16,6 +16,21 @@ $notification-blocks:
}
}
$warningnotice-alt :
"icon-news" "news-icon-red",
"icon-info" "info-icon-red",
"icon-warning" "warning-icon-red",
"icon-calendar" "calendar-icon-red"
;
.warningnotice {
@each $class, $img in $warningnotice-alt {
&.#{$class}::before {
content: url('img/#{$img}.svg');
}
}
}
@mixin fill-viewport() {
width: 100vw;
@ -272,6 +287,14 @@ div#main-content {
// TOP MESSAGE
//
$topmessage-alt :
"icon-news" "news-icon-blue",
"icon-info" "info-icon-blue",
"icon-warning" "warning-icon-blue",
"icon-calendar" "calendar-icon-blue"
;
.top-message {
@media ($max-mobile-viewport) {
margin: 0 0.7em;
@ -290,17 +313,26 @@ div#main-content {
align-self: stretch;
flex: 0 0 65px;
margin-right: 40px;
background: url(img/top-message-icon.svg) no-repeat;
background: url(img/info-icon-blue.svg) no-repeat;
background-size: contain;
background-position: center;
}
a {
color: inherit;
}
@each $class, $img in $topmessage-alt {
&.#{$class}::before {
background-image: url(img/#{$img}.svg);
}
}
}
}
//
// CELLS
//

1
static/caen/img/calendar-icon-blue.svg Normal file
View File

@ -0,0 +1 @@
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 66 66"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#0d74ef;}</style></defs><circle class="cls-1" cx="33" cy="33" r="33"/><path class="cls-2" d="M33,36.88a2.21,2.21,0,1,0-2.21-2.21A2.21,2.21,0,0,0,33,36.88Z"/><path class="cls-2" d="M33,44.09h0a2.21,2.21,0,0,0,0-4.42,2.21,2.21,0,1,0,0,4.42Z"/><circle class="cls-2" cx="41.73" cy="34.67" r="2.21"/><path class="cls-2" d="M41.73,44.1a2.21,2.21,0,1,0-2.21-2.21A2.21,2.21,0,0,0,41.73,44.1Z"/><circle class="cls-2" cx="24.27" cy="34.67" r="2.21"/><path class="cls-2" d="M40.83,20.06v1.22a1.06,1.06,0,1,0,2.12,0V20.06h3.1a1.79,1.79,0,0,1,1.79,1.79v4.23H18.17V22.91A2.86,2.86,0,0,1,21,20.06h2v1.22a1.06,1.06,0,1,0,2.12,0V20.06h12A1.06,1.06,0,0,0,38.28,19h0a1.07,1.07,0,0,0-1.06-1.06h-12V16.59a1.06,1.06,0,1,0-2.12,0v1.35H21a5,5,0,0,0-5,5V46.29a5,5,0,0,0,5,5h.8a1.06,1.06,0,0,0,1.06-1.06h0a1.07,1.07,0,0,0-1.06-1.06H21a2.86,2.86,0,0,1-2.85-2.85V28.21H47.84V46.29A2.85,2.85,0,0,1,45,49.14H26.73a1.06,1.06,0,0,0-1.06,1.06h0a1.05,1.05,0,0,0,1.06,1.06H45a5,5,0,0,0,5-5V22.91a5,5,0,0,0-5-5H43V16.59a1.06,1.06,0,0,0-2.12,0v1.35"/><path class="cls-2" d="M26.48,41.89a2.21,2.21,0,1,0-2.21,2.21A2.21,2.21,0,0,0,26.48,41.89Z"/><path class="cls-2" d="M43,18h2a5,5,0,0,1,5,5v3.33l-2.13-.16V23A2.84,2.84,0,0,0,45,20.1H43"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

1
static/caen/img/calendar-icon-red.svg Normal file
View File

@ -0,0 +1 @@
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 66 66"><defs><style>.cls-1{fill:#f31228;}.cls-2{fill:#fff;}</style></defs><circle class="cls-1" cx="33.03" cy="33" r="33"/><path class="cls-2" d="M33,36.88a2.21,2.21,0,1,0-2.21-2.21A2.21,2.21,0,0,0,33,36.88Z"/><path class="cls-2" d="M33,44.09h0a2.21,2.21,0,0,0,0-4.42,2.21,2.21,0,1,0,0,4.42Z"/><circle class="cls-2" cx="41.76" cy="34.67" r="2.21"/><path class="cls-2" d="M41.76,44.1a2.21,2.21,0,1,0-2.21-2.21A2.22,2.22,0,0,0,41.76,44.1Z"/><circle class="cls-2" cx="24.3" cy="34.67" r="2.21"/><path class="cls-2" d="M40.86,20.06v1.22a1.06,1.06,0,1,0,2.12,0V20.06h3.1a1.79,1.79,0,0,1,1.79,1.79v4.23H18.2V22.91a2.86,2.86,0,0,1,2.85-2.85h2v1.22a1.06,1.06,0,0,0,2.12,0V20.06h12A1.06,1.06,0,0,0,38.31,19h0a1.07,1.07,0,0,0-1.06-1.06h-12V16.59a1.06,1.06,0,0,0-2.12,0v1.35h-2a5,5,0,0,0-5,5V46.29a5,5,0,0,0,5,5h.8a1.06,1.06,0,0,0,1.06-1.06h0a1.07,1.07,0,0,0-1.06-1.06h-.8a2.86,2.86,0,0,1-2.85-2.85V28.21H47.87V46.29A2.86,2.86,0,0,1,45,49.14H26.76A1.06,1.06,0,0,0,25.7,50.2h0a1.05,1.05,0,0,0,1.06,1.06H45a5,5,0,0,0,5-5V22.91a5,5,0,0,0-5-5H43V16.59a1.06,1.06,0,0,0-2.12,0v1.35"/><path class="cls-2" d="M26.51,41.89A2.21,2.21,0,1,0,24.3,44.1,2.21,2.21,0,0,0,26.51,41.89Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

0
static/caen/img/info-icon.svg → static/caen/img/info-icon-blue-neg.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

0
static/caen/img/top-message-icon.svg → static/caen/img/info-icon-blue.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 361 B

After

Width:  |  Height:  |  Size: 361 B

1
static/caen/img/info-icon-red.svg Normal file
View File

@ -0,0 +1 @@
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 66 66"><defs><style>.cls-1{fill:#f31228;}.cls-2{fill:#fff;}</style></defs><circle class="cls-1" cx="33.03" cy="33" r="33"/><circle class="cls-2" cx="33.03" cy="19.96" r="3.9"/><path class="cls-2" d="M36.28,30.63V43.48a3.25,3.25,0,0,1-6.49,0V30.63a3.25,3.25,0,0,1,6.49,0Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 367 B

1
static/caen/img/news-icon-blue.svg Normal file
View File

@ -0,0 +1 @@
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 66 66"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#0d74ef;}</style></defs><circle class="cls-1" cx="33" cy="33" r="33"/><path class="cls-2" d="M38.79,41.27a.61.61,0,0,0-.13,0,.5.5,0,0,0-.13,0H22.06l.42-.81a28,28,0,0,0,2.28-8.89c.45-3.2.87-5.65,1.95-7.31v0a1.23,1.23,0,0,0,.21-.66,1.25,1.25,0,0,0-1.25-1.26,1.19,1.19,0,0,0-.64.21,1.12,1.12,0,0,0-.34.31c-.06.09-.12.18-.17.27-1.39,2.26-1.82,5.21-2.23,8.12-.54,3.8-1.09,7.72-3.68,10.44a1.25,1.25,0,0,0,.9,2.11h8.06a.06.06,0,0,1,.06.06v.31a5.45,5.45,0,0,0,4.13,5.29,5.33,5.33,0,0,0,6.5-5.11v-.55h.54a1.25,1.25,0,0,0,0-2.5Zm-3,3.08a2.1,2.1,0,0,1-.08.56c0,.07,0,.12-.05.18a3.62,3.62,0,0,1-.13.35,1.18,1.18,0,0,1-.11.19c-.05.09-.1.19-.16.28l-.15.17-.21.23c-.06.06-.13.1-.19.15l-.24.18-.22.11-.27.13L33.7,47a1.63,1.63,0,0,1-.3.07l-.26,0c-.11,0-.21,0-.32,0l-.27,0L32.26,47l-.16,0a3,3,0,0,1-2-2.75h0v-.34a.06.06,0,0,1,.06-.06h5.59Z"/><path class="cls-2" d="M47.39,41.65c-2.61-2.71-3.17-6.64-3.71-10.43-.78-5.52-1.59-11.22-9-12l-.5-.05v-1.5a1.25,1.25,0,0,0-2.5,0v1.5l-.5.05a10.59,10.59,0,0,0-3.3.87l-.12,0a1.23,1.23,0,0,0-.7,1.06s0,0,0,.05a1.25,1.25,0,0,0,1.25,1.24h0a1.87,1.87,0,0,0,.41-.09l.06,0h0A9.63,9.63,0,0,1,33,21.64c6.55,0,7.33,3.41,8.26,9.93.4,2.87.86,6.11,2.3,8.89l.42.81H42.78a1.25,1.25,0,0,0,0,2.5h3.71a1.25,1.25,0,0,0,.9-2.12Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

1
static/caen/img/news-icon-red.svg Normal file
View File

@ -0,0 +1 @@
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 66 66"><defs><style>.cls-1{fill:#f31228;}.cls-2{fill:#fff;}</style></defs><circle class="cls-1" cx="33.03" cy="33" r="33"/><path class="cls-2" d="M38.82,41.27l-.13,0a.5.5,0,0,0-.13,0H22.09l.42-.81a28,28,0,0,0,2.28-8.89c.45-3.2.87-5.65,1.95-7.31v0a1.24,1.24,0,0,0,.22-.66,1.25,1.25,0,0,0-1.26-1.26,1.19,1.19,0,0,0-.64.21,1.12,1.12,0,0,0-.34.31c-.06.09-.12.18-.17.27-1.39,2.26-1.82,5.21-2.23,8.12-.54,3.8-1.09,7.72-3.68,10.44a1.25,1.25,0,0,0,.9,2.11H27.6a.06.06,0,0,1,.06.06v.31a5.45,5.45,0,0,0,4.13,5.29,5.33,5.33,0,0,0,6.5-5.11v-.55h.54a1.25,1.25,0,0,0,0-2.5Zm-3,3.08a2.6,2.6,0,0,1-.07.56,1.89,1.89,0,0,0-.06.18,3.62,3.62,0,0,1-.13.35,1.18,1.18,0,0,1-.11.19c0,.09-.1.19-.16.28l-.15.17-.21.23c-.06.06-.13.1-.19.15l-.24.18-.22.11-.27.13-.24.07a1.63,1.63,0,0,1-.3.07l-.26,0c-.11,0-.21,0-.32,0l-.26,0-.3-.06-.16,0a3,3,0,0,1-2-2.75h0v-.34a.06.06,0,0,1,.06-.06H35.8Z"/><path class="cls-2" d="M47.42,41.65c-2.61-2.71-3.17-6.64-3.71-10.43-.78-5.52-1.59-11.22-9-12l-.5-.05v-1.5a1.25,1.25,0,1,0-2.5,0v1.5l-.5.05a10.59,10.59,0,0,0-3.3.87l-.12,0a1.23,1.23,0,0,0-.7,1.06s0,0,0,.05a1.25,1.25,0,0,0,1.25,1.24h0a1.87,1.87,0,0,0,.41-.09l.06,0h0A9.63,9.63,0,0,1,33,21.64c6.55,0,7.33,3.41,8.26,9.93.41,2.87.87,6.11,2.3,8.89l.42.81H42.81a1.25,1.25,0,0,0,0,2.5h3.71A1.24,1.24,0,0,0,47.67,43,1.25,1.25,0,0,0,47.42,41.65Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

1
static/caen/img/warning-icon-blue.svg Normal file
View File

@ -0,0 +1 @@
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 66 66"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:none;}.cls-3{fill:#0d74ef;}</style></defs><circle class="cls-1" cx="33" cy="33" r="33"/><path class="cls-2" d="M32.89,22.93a1.79,1.79,0,0,1,1.86,1.71v.15L34.38,34a1.36,1.36,0,0,1-1.45,1.34A1.51,1.51,0,0,1,31.55,34l-.37-9.22A1.79,1.79,0,0,1,32.89,22.93ZM33,40.74a2,2,0,1,1,2-2A2,2,0,0,1,33,40.74Z"/><path class="cls-3" d="M50.07,39.55,36.83,16.69A4.35,4.35,0,0,0,33,14.49a4.4,4.4,0,0,0-3.83,2.2L15.94,39.55a4.41,4.41,0,0,0,0,4.39,4.36,4.36,0,0,0,3.83,2.19H37.9a1.39,1.39,0,0,0,1.39-1.39h0a1.4,1.4,0,0,0-1.39-1.4H19.77a1.61,1.61,0,0,1-1.38-.78,1.56,1.56,0,0,1,0-1.6L31.63,18.14a1.6,1.6,0,0,1,2.75,0L47.61,41a1.58,1.58,0,0,1-1.37,2.38H43.46a1.4,1.4,0,0,0-1.4,1.4h0a1.4,1.4,0,0,0,1.4,1.39h2.78a4.39,4.39,0,0,0,3.83-6.58Z"/><path class="cls-3" d="M32.93,35.35A1.36,1.36,0,0,0,34.38,34l.37-9.22v-.15a1.79,1.79,0,1,0-3.57.15L31.55,34A1.51,1.51,0,0,0,32.93,35.35Z"/><path class="cls-3" d="M33,36.73a2,2,0,1,0,2,2A2,2,0,0,0,33,36.73Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

0
static/caen/img/warning-icon.svg → static/caen/img/warning-icon-red.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB