Unverified Commit 66f0b9e2 authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

Issue #3269417 by mherchel, cindytwilliams: Claro: Breadcrumb divider icon not... 

Issue #3269417 by mherchel, cindytwilliams: Claro: Breadcrumb divider icon not always visible in forced colors
parent 0592f24a

core/themes/claro/css/components/breadcrumb.css

+21 −2
Original line number Diff line number Diff line
@@ -32,12 +32,31 @@ 
}



.breadcrumb__item + .breadcrumb__item::before {

  display: inline-block;

  padding: 0 0.75rem;

  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' height='8' width='5'%3e%3cpath fill='currentColor' d='M1.207.647L.5 1.354 3.146 4 .5 6.647l.707.707L4.561 4z'/%3e%3c/svg%3e");

  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' height='8' width='5'%3e%3cpath fill='currentColor' d='M1.207.647L.5 1.354 3.146 4 .5 6.647l.707.707L4.561 4z'/%3e%3c/svg%3e")

}



[dir="rtl"] .breadcrumb__item + .breadcrumb__item::before {

  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='5' height='8'%3e%3cpath fill='currentColor' d='M3.793.647l.707.707L1.854 4 4.5 6.647l-.707.707L.439 4z'/%3e%3c/svg%3e");

    transform: scaleX(-1)

}



@media (forced-colors: active) {



.breadcrumb__item + .breadcrumb__item::before {

    width: 0.3125rem; /* Width and height of the SVG. */

    height: 0.5rem;

    content: "";

    background-color: canvastext;

    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' height='8' width='5'%3e%3cpath fill='currentColor' d='M1.207.647L.5 1.354 3.146 4 .5 6.647l.707.707L4.561 4z'/%3e%3c/svg%3e");

    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' height='8' width='5'%3e%3cpath fill='currentColor' d='M1.207.647L.5 1.354 3.146 4 .5 6.647l.707.707L4.561 4z'/%3e%3c/svg%3e");

    -webkit-mask-size: contain;

    mask-size: contain;

    -webkit-mask-repeat: no-repeat;

    mask-repeat: no-repeat;

    -webkit-mask-position: center;

    mask-position: center

}

  }



.breadcrumb__link:hover,

core/themes/claro/css/components/breadcrumb.pcss.css

+15 −3
Original line number Diff line number Diff line
@@ -27,12 +27,24 @@ 
}



.breadcrumb__item + .breadcrumb__item::before {

  display: inline-block;

  padding: 0 0.75rem;

  content: url(../../images/icons/currentColor/arrow-breadcrumb.svg);



  @nest [dir="rtl"] & {

    transform: scaleX(-1);

  }



[dir="rtl"] .breadcrumb__item + .breadcrumb__item::before {

  content: url(../../images/icons/currentColor/arrow-breadcrumb-rtl.svg);

  @media (forced-colors: active) {

    width: 5px; /* Width and height of the SVG. */

    height: 8px;

    content: "";

    background-color: canvastext;

    mask-image: url(../../images/icons/currentColor/arrow-breadcrumb.svg);

    mask-size: contain;

    mask-repeat: no-repeat;

    mask-position: center;

  }

}



.breadcrumb__link:hover,

core/themes/claro/images/icons/currentColor/arrow-breadcrumb-rtl.svg

deleted100644 → 0
+0 −1
Original line number Diff line number Diff line 
<svg xmlns="http://www.w3.org/2000/svg" width="5" height="8"><path fill="currentColor" d="M3.793.647l.707.707L1.854 4 4.5 6.647l-.707.707L.439 4z"/></svg>