Dark: Teaching & PhD
+Danger: Teaching & PhD
+Success: Teaching & PhD
+Info: Teaching & PhD
+Warning: Teaching & PhD
diff --git a/assets/components/atoms/link/link.scss b/assets/components/atoms/link/link.scss index 0b011e673..ccc8702fe 100644 --- a/assets/components/atoms/link/link.scss +++ b/assets/components/atoms/link/link.scss @@ -23,6 +23,36 @@ a { text-decoration-color: $body-color; } } + + .text-white &, + &.text-white { + text-decoration-color: currentcolor; + + @include hover-focus-active { + text-decoration-color: transparent; + } + } + + // add styles for background color variants + @each $color, $value in $theme-colors { + .bg-#{$color} & { + color: color-yiq($value); + text-decoration-color: currentcolor; + + @include hover-focus-active { + text-decoration-color: transparent; + } + } + } +} + +a, +a:hover, +a:focus, +a:active { + text-decoration-thickness: 0.08em; + text-decoration-thickness: min(0.08em, 0.1rem); + text-underline-offset: 0.14em; } // Manage all the underline colors based on `text-` helper class. @@ -30,15 +60,40 @@ a { @include text-emphasis-variant-decoration(".text-#{$color}", $value); } -// Special case for white links. -@include text-emphasis-variant-decoration(".text-white", $white); - // The link pretty allows you to have more cross-browser friendly link styles and the fancy focus box. +// Removed in July 2023, text-decoration color is now well supported by all major broswers: https://caniuse.com/mdn-css_properties_text-decoration-color +/* .link-pretty { @include link-pretty($red, $body-bg); @extend .focused; } +*/ + +// Fix for existing links with class '.link-pretty' + +.nav-link.link-pretty { + text-decoration: underline; + text-decoration-color: $link-hover-color; + text-decoration-thickness: 0.08em; + text-decoration-thickness: min(0.08em, 0.1rem); + text-underline-offset: 0.14em; + + @include hover-focus-active { + text-decoration-color: $link-color; + } +} + +.bg-dark .link-pretty, +.bg-gray-600 .link-pretty{ + color: #fff; + + &:focus, + &:hover, + &:active { + text-decoration-color: #fff; + } +} // Link collapse, see collapse component diff --git a/assets/components/atoms/link/link.twig b/assets/components/atoms/link/link.twig index 3d7755736..002f08f54 100644 --- a/assets/components/atoms/link/link.twig +++ b/assets/components/atoms/link/link.twig @@ -1,4 +1,3 @@ -Vanilla link: Teaching & PhD
-Pretty link: Teaching & PhD
-Dark link: Teaching & PhD
-Dark pretty link:Teaching & PhD
+Regular link: Teaching & PhD
+Light background: Teaching & PhD
+Dark background: Teaching & PhD
diff --git a/assets/components/atoms/link/link.yml b/assets/components/atoms/link/link.yml index 00ffa1fb9..55f486cac 100644 --- a/assets/components/atoms/link/link.yml +++ b/assets/components/atoms/link/link.yml @@ -12,11 +12,12 @@ notes: > browsers](https://caniuse.com/#feat=text-decoration). In other browsers, the underline uses text color. - The `link-pretty` class creates a better and more cross-browser style. - The `link-collapse` class sets the link to have a red triangle and special styles. variants: + - name: bg-variants + title: Background variants + notes: - name: icon title: Icon notes: | diff --git a/assets/components/content-types/event/event.scss b/assets/components/content-types/event/event.scss index 6f3a8a2fb..7472aa2a1 100644 --- a/assets/components/content-types/event/event.scss +++ b/assets/components/content-types/event/event.scss @@ -11,7 +11,6 @@ color 0.2s ease-in-out; @include hover-focus-active { - background: transparent !important; text-decoration-color: $link-color !important; } diff --git a/assets/components/content-types/news/news-latest-two.twig b/assets/components/content-types/news/news-latest-two.twig index 4849dad77..5dc1b9578 100644 --- a/assets/components/content-types/news/news-latest-two.twig +++ b/assets/components/content-types/news/news-latest-two.twig @@ -7,5 +7,5 @@ {% endfor %} diff --git a/assets/components/content-types/press-review/press-review.twig b/assets/components/content-types/press-review/press-review.twig index af66ce028..427f85799 100644 --- a/assets/components/content-types/press-review/press-review.twig +++ b/assets/components/content-types/press-review/press-review.twig @@ -16,8 +16,8 @@Le prototype de joystick imaginé par la start-up de l'EPFL MotionPilot permet de piloter un drone d’une seule main, de manière intuitive, rapporte L'Agefi.
- Détails du communiqué- See all projects + See all projects
diff --git a/assets/components/content-types/publication/publication.twig b/assets/components/content-types/publication/publication.twig index 58ed1601d..ef6e7d279 100644 --- a/assets/components/content-types/publication/publication.twig +++ b/assets/components/content-types/publication/publication.twig @@ -62,7 +62,7 @@ {% if bottomlink %}- See all publications + See all publications
{% endif %} diff --git a/assets/components/molecules/card/card.scss b/assets/components/molecules/card/card.scss index fe3578bab..7e28bebc1 100644 --- a/assets/components/molecules/card/card.scss +++ b/assets/components/molecules/card/card.scss @@ -145,10 +145,6 @@ a.card-gray:hover .card-body { background: $white; } color: $red; text-decoration: none; - @include hover { - @include link-pretty($red, $body-bg, $body-color); - } - &.btn { &:hover, &.hover { @@ -202,19 +198,6 @@ a.card-img-top { } } -a.card-title, -.card-title a { - transition: color 0.3s; - - @include link-pretty($red, $body-bg, $body-color); - - background-position: 0 90%; - - .card-gray & { - @include link-pretty($red, gray('100'), $body-color); - } -} - // Whole card as a link a.card { text-decoration: none; diff --git a/assets/components/molecules/list-group/list-group.scss b/assets/components/molecules/list-group/list-group.scss index 91a940041..a4603d232 100644 --- a/assets/components/molecules/list-group/list-group.scss +++ b/assets/components/molecules/list-group/list-group.scss @@ -22,7 +22,6 @@ background: var(--card-bg); .card-title a { - @include link-pretty($red, var(--card-bg), $body-color); transition: color 0.3s, text-shadow 0.25s; } diff --git a/assets/components/organisms/contact/contact-compact-for-columns.twig b/assets/components/organisms/contact/contact-compact-for-columns.twig index efbb38005..d53354938 100644 --- a/assets/components/organisms/contact/contact-compact-for-columns.twig +++ b/assets/components/organisms/contact/contact-compact-for-columns.twig @@ -8,13 +8,13 @@
{% endif %}
-
- {{ homepage.section_one.readmore }} + {{ homepage.section_one.readmore }}
{% endif %} diff --git a/assets/components/pages/event-detail/event-detail.twig b/assets/components/pages/event-detail/event-detail.twig index de8f61a2b..454dd1184 100644 --- a/assets/components/pages/event-detail/event-detail.twig +++ b/assets/components/pages/event-detail/event-detail.twig @@ -56,7 +56,7 @@ diff --git a/assets/components/pages/news-detail/news-detail.twig b/assets/components/pages/news-detail/news-detail.twig index d9d1cb99f..de268a7d0 100644 --- a/assets/components/pages/news-detail/news-detail.twig +++ b/assets/components/pages/news-detail/news-detail.twig @@ -87,17 +87,17 @@