Verified Commit 99c88f91 authored by Théodore Biadala's avatar Théodore Biadala
Browse files

Issue #3332441 by Gauravvvv: Refactor Claro's shortcut stylesheet

parent 2f8c7039

core/themes/claro/css/components/shortcut.css

+10 −19
Original line number Diff line number Diff line
@@ -26,16 +26,18 @@ 


.shortcut-action {

  display: inline-block;

  margin-left: var(--space-xs); /* LTR */

  margin-inline-start: var(--space-xs);

}



[dir="rtl"] .shortcut-action {

  margin-right: var(--space-xs);

.shortcut-action:hover .shortcut-action__message,

.shortcut-action:focus .shortcut-action__message {

  transform: translateY(0);

  opacity: 1;

}



.shortcut-action__message {

  display: inline-block;

  margin-left: var(--space-s); /* LTR */

  margin-inline-start: var(--space-s);

  padding: var(--shortcut-padding-size);

  transition: var(--transition);

  transform: translateY(calc(-1 * var(--space-xs)));
@@ -49,17 +51,6 @@ 
  backface-visibility: hidden;

}



[dir="rtl"] .shortcut-action__message {

  margin-right: var(--space-s);

  margin-left: 0;

}



.shortcut-action:hover .shortcut-action__message,

.shortcut-action:focus .shortcut-action__message {

  transform: translateY(0);

  opacity: 1;

}



.shortcut-action__icon {

  display: inline-block;

  width: var(--shortcut-icon-size);
@@ -68,10 +59,6 @@ 
  background: transparent url("data:image/svg+xml,%3csvg height='24' width='96' xmlns='http://www.w3.org/2000/svg'%3e%3cg stroke='%238e929c'%3e%3cpath d='m94.46 9.667h-7.937l-2.523-8.007-2.523 8.007h-7.937l6.768 4.926-3.076 8.007 6.768-4.927 6.768 4.927-3.076-8.007zm-24 0h-7.937l-2.523-8.007-2.523 8.007h-7.937l6.768 4.926-3.076 8.007 6.768-4.927 6.768 4.927-3.076-8.007z' fill='%23ffd23f'/%3e%3cg fill='none'%3e%3cpath d='m38.42 9.327.11.35h7.934l-6.521 4.742-.31.225.138.358 2.922 7.599-6.397-4.653-.294-.214-.294.214-6.397 4.653 2.923-7.599.137-.358-.31-.225-6.521-4.742h7.934l.11-.35 2.418-7.665zm-24.002 0 .11.35h7.934l-6.521 4.742-.31.225.138.358 2.922 7.599-6.397-4.653-.294-.214-.294.214-6.397 4.653 2.923-7.599.137-.358-.31-.225-6.521-4.742h7.934l.11-.35 2.418-7.665z'/%3e%3cpath d='m42.5 1v7m-3.5-3.5h7m42 2.5 6-6m0 6-6-6' stroke-linecap='square' stroke-miterlimit='3'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e") left top / calc(var(--shortcut-icon-size) * 4) var(--shortcut-icon-size) no-repeat;

}



[dir="rtl"] .shortcut-action__icon {

  background-image: url("data:image/svg+xml,%3csvg height='24' width='96' xmlns='http://www.w3.org/2000/svg'%3e%3cg stroke='%238e929c'%3e%3cpath d='m94.46 9.667h-7.937l-2.523-8.007-2.523 8.007h-7.937l6.768 4.926-3.076 8.007 6.768-4.927 6.768 4.927-3.076-8.007zm-24 0h-7.937l-2.523-8.007-2.523 8.007h-7.937l6.768 4.926-3.076 8.007 6.768-4.927 6.768 4.927-3.076-8.007z' fill='%23ffd23f'/%3e%3cg fill='none'%3e%3cpath d='m38.42 9.327.11.35h7.934l-6.521 4.742-.31.225.138.358 2.922 7.599-6.397-4.653-.294-.214-.294.214-6.397 4.653 2.923-7.599.137-.358-.31-.225-6.521-4.742h7.934l.11-.35 2.418-7.665zm-24.002 0 .11.35h7.934l-6.521 4.742-.31.225.138.358 2.922 7.599-6.397-4.653-.294-.214-.294.214-6.397 4.653 2.923-7.599.137-.358-.31-.225-6.521-4.742h7.934l.11-.35 2.418-7.665z'/%3e%3cpath d='m29.5 1v7m-3.5-3.5h7m42 2.5 6-6m0 6-6-6' stroke-linecap='square' stroke-miterlimit='3'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e");

}



.shortcut-action--add:hover .shortcut-action__icon,

.shortcut-action--add:focus .shortcut-action__icon {

  background-position: calc(-1 * var(--shortcut-icon-size)) top;
@@ -85,3 +72,7 @@ 
.shortcut-action--remove:hover .shortcut-action__icon {

  background-position: calc(-3 * var(--shortcut-icon-size)) top;

}



[dir="rtl"] .shortcut-action__icon {

  background-image: url("data:image/svg+xml,%3csvg height='24' width='96' xmlns='http://www.w3.org/2000/svg'%3e%3cg stroke='%238e929c'%3e%3cpath d='m94.46 9.667h-7.937l-2.523-8.007-2.523 8.007h-7.937l6.768 4.926-3.076 8.007 6.768-4.927 6.768 4.927-3.076-8.007zm-24 0h-7.937l-2.523-8.007-2.523 8.007h-7.937l6.768 4.926-3.076 8.007 6.768-4.927 6.768 4.927-3.076-8.007z' fill='%23ffd23f'/%3e%3cg fill='none'%3e%3cpath d='m38.42 9.327.11.35h7.934l-6.521 4.742-.31.225.138.358 2.922 7.599-6.397-4.653-.294-.214-.294.214-6.397 4.653 2.923-7.599.137-.358-.31-.225-6.521-4.742h7.934l.11-.35 2.418-7.665zm-24.002 0 .11.35h7.934l-6.521 4.742-.31.225.138.358 2.922 7.599-6.397-4.653-.294-.214-.294.214-6.397 4.653 2.923-7.599.137-.358-.31-.225-6.521-4.742h7.934l.11-.35 2.418-7.665z'/%3e%3cpath d='m29.5 1v7m-3.5-3.5h7m42 2.5 6-6m0 6-6-6' stroke-linecap='square' stroke-miterlimit='3'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e");

}

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

+26 −28
Original line number Diff line number Diff line
@@ -18,14 +18,17 @@ 
 */

.shortcut-action {

  display: inline-block;

  margin-left: var(--space-xs); /* LTR */

  margin-inline-start: var(--space-xs);



  &:hover .shortcut-action__message,

  &:focus .shortcut-action__message {

    transform: translateY(0);

    opacity: 1;

  }

[dir="rtl"] .shortcut-action {

  margin-right: var(--space-xs);

}

.shortcut-action__message {

  display: inline-block;

  margin-left: var(--space-s); /* LTR */

  margin-inline-start: var(--space-s);

  padding: var(--shortcut-padding-size);

  transition: var(--transition);

  transform: translateY(calc(-1 * var(--space-xs)));
@@ -37,15 +40,6 @@ 
  font-size: var(--font-size-label);

  backface-visibility: hidden;

}

[dir="rtl"] .shortcut-action__message {

  margin-right: var(--space-s);

  margin-left: 0;

}

.shortcut-action:hover .shortcut-action__message,

.shortcut-action:focus .shortcut-action__message {

  transform: translateY(0);

  opacity: 1;

}



.shortcut-action__icon {

  display: inline-block;
@@ -53,18 +47,22 @@ 
  height: var(--shortcut-icon-size);

  vertical-align: -0.0625rem;

  background: transparent url(../../images/shortcut/favstar.svg) left top / calc(var(--shortcut-icon-size) * 4) var(--shortcut-icon-size) no-repeat;

}

[dir="rtl"] .shortcut-action__icon {

  background-image: url(../../images/shortcut/favstar-rtl.svg);

}

.shortcut-action--add:hover .shortcut-action__icon,

.shortcut-action--add:focus .shortcut-action__icon {



  @nest .shortcut-action--add:hover &,

  .shortcut-action--add:focus & {

    background-position: calc(-1 * var(--shortcut-icon-size)) top;

  }

.shortcut-action--remove .shortcut-action__icon {



  @nest .shortcut-action--remove & {

    background-position: calc(-2 * var(--shortcut-icon-size)) top;

  }

.shortcut-action--remove:focus .shortcut-action__icon,

.shortcut-action--remove:hover .shortcut-action__icon {



  @nest .shortcut-action--remove:focus &,

  .shortcut-action--remove:hover & {

    background-position: calc(-3 * var(--shortcut-icon-size)) top;

  }



  @nest [dir="rtl"] & {

    background-image: url(../../images/shortcut/favstar-rtl.svg);

  }

}