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

Issue #3303541 by Gauravvvv, Aditya4478, pradhumanjainOSL, smustgrave:... 

Issue #3303541 by Gauravvvv, Aditya4478, pradhumanjainOSL, smustgrave: Refactor Claro's action-link stylesheet
parent 7cb4919f

core/themes/claro/css/components/action-link.css

+176 −198

File changed.

Preview size limit exceeded, changes collapsed.

core/themes/claro/css/components/action-link.pcss.css

+391 −343
Original line number Diff line number Diff line
@@ -8,30 +8,23 @@ 
/**

 * Action links layout.

 */

.action-links,

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

.action-links {

  margin: var(--space-l) 0;

  list-style: none;

}



.action-links__item {

  display: inline-block;

}



.action-links__item + .action-links__item > .action-link {

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

}

[dir="rtl"] .action-links__item + .action-links__item > .action-link {

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

  margin-left: 0;

  & + .action-links__item {

    & > .action-link {

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

    }



.action-links__item + .action-links__item > .action-link--small {

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

    & > .action-link--small {

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

    }

  }

[dir="rtl"] .action-links__item + .action-links__item > .action-link--small {

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

  margin-left: 0;

}



/**
@@ -47,37 +40,50 @@ 
  background-color: var(--color-bg);

  font-size: var(--font-size-base);

  font-weight: 700;

  line-height: var(--space-l); /* Bigger line-height needed to prevent the icon from increasing the height */

  line-height: var(--space-l);

  /* Bigger line-height needed to prevent the icon from increasing the height */

  -webkit-font-smoothing: antialiased;

}



/* Small variant. */

.no-touchevents .action-link--small {

  padding: calc(var(--space-s) - ((var(--space-l) - var(--space-s)) / 2)) var(--space-s);

  font-size: var(--font-size-s);

  /* Action link states */

  &:hover {

    text-decoration: none;

    color: var(--color-absolutezero-hover);

    background-color: var(--color-bgblue-hover);

  }



/* Extra small variant. */

.no-touchevents .action-link--extrasmall {

  padding: 0 var(--space-xs);

  font-size: var(--font-size-s);

  &:focus {

    position: relative;

    z-index: 1;

    text-decoration: none;

  }



.action-link + .action-link {

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

}

[dir="rtl"] .action-link + .action-link {

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

  margin-left: 0;

  &:active {

    color: var(--color-absolutezero-active);

    background-color: var(--color-bgblue-active);

  }

.no-touchevents .action-link--small + .action-link--small,

.no-touchevents .action-link--extrasmall + .action-link--extrasmall {

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



  /**

  * Action link icons with states.

  *

  * We use parent-relative units here to follow the .action-link's font size.

  */



  /* Defaults for icons */

  &::before {

    position: relative;

    inset-block-start: 0.125rem;

    /* Set the proper vertical alignment */

    display: inline-block;

    width: 1em;

    height: 1em;

    margin-inline: calc(var(--space-s) - var(--space-m)) 0.5em;

    background-repeat: no-repeat;

    background-position: center;

    background-size: contain;

  }

[dir="rtl"] .no-touchevents .action-link--small + .action-link--small,

[dir="rtl"] .no-touchevents .action-link--extrasmall + .action-link--extrasmall {

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

  margin-left: 0;



  & + .action-link {

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

  }



  /**
@@ -85,29 +91,29 @@ 
  *

  * Add the same margin for action-link inside form-actions as button has.

  */

.form-actions .action-link {

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

  margin-left: 0; /* LTR */

  @nest .form-actions & {

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

  }

[dir="rtl"] .form-actions .action-link {

  margin-right: 0;

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

}



/* Action link states */

.action-link:hover {

  text-decoration: none;

  color: var(--color-absolutezero-hover);

  background-color: var(--color-bgblue-hover);

.no-touchevents {



  /* Small variant. */

  & .action-link--small {

    padding: calc(var(--space-s) - ((var(--space-l) - var(--space-s)) / 2)) var(--space-s);

    font-size: var(--font-size-s);

  }

.action-link:focus {

  position: relative;

  z-index: 1;

  text-decoration: none;



  /* Extra small variant. */

  & .action-link--extrasmall {

    padding: 0 var(--space-xs);

    font-size: var(--font-size-s);

  }



  & .action-link--small + .action-link--small,

  & .action-link--extrasmall + .action-link--extrasmall {

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

  }

.action-link:active {

  color: var(--color-absolutezero-active);

  background-color: var(--color-bgblue-active);

}



/**
@@ -116,332 +122,374 @@ 
/* Danger. */

.action-link--danger {

  color: var(--color-maximumred);

}

.action-link--danger:hover {



  &:hover {

    color: var(--color-maximumred-hover);

    background-color: var(--color-bgred-hover);

  }

.action-link--danger:active {



  &:active {

    color: var(--color-maximumred-active);

    background-color: var(--color-bgred-active);

  }



/**

 * Action link icons with states.

 *

 * We use parent-relative units here to follow the .action-link's font size.

 */



/* Defaults for icons */

.action-link::before {

  position: relative;

  top: 0.125rem; /* Set the proper vertical alignment */

  display: inline-block;

  width: 1em;

  height: 1em;

  margin-right: 0.5em; /* LTR */

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

  background-repeat: no-repeat;

  background-position: center;

  background-size: contain;

}

[dir="rtl"] .action-link::before {

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

  margin-left: 0.5em;

}



.no-touchevents .action-link--small::before,

.no-touchevents .action-link--extrasmall::before {

  top: 0.0625rem; /* Set the proper vertical alignment */

  inset-block-start: 0.0625rem;

  /* Set the proper vertical alignment */

  width: var(--space-s);

  height: var(--space-s);

  margin-inline: -0.125rem 0.4em;

}



.no-touchevents .action-link--extrasmall::before {

  margin-right: 0.4em; /* LTR */

  margin-left: -0.125rem; /* LTR */

}

[dir="rtl"].no-touchevents .action-link--extrasmall::before {

  margin-right: -0.125rem;

  margin-left: 0.4em;

}

.action-link--icon-plus {



  /* Plus */

.action-link--icon-plus::before {

  &::before {

    content: "";

    background-image: url(../../images/icons/545560/plus.svg);



    @media (forced-colors: active) {

      background: linktext !important;

      mask-repeat: no-repeat;

      mask-image: url(../../images/icons/d72222/plus.svg);

    }

  }



.action-link--icon-plus:hover::before {

  &:hover::before {

    background-image: url(../../images/icons/0036b1/plus.svg);

  }

.action-link--icon-plus:active::before {



  &:active::before {

    background-image: url(../../images/icons/002e9a/plus.svg);

  }



  &.action-link--danger {



    /* Plus — danger */

.action-link--icon-plus.action-link--danger::before {

    &::before {

      background-image: url(../../images/icons/d72222/plus.svg);

    }

.action-link--icon-plus.action-link--danger:hover::before {



    &:hover::before {

      background-image: url(../../images/icons/c11f1f/plus.svg);

    }

.action-link--icon-plus.action-link--danger:active::before {



    &:active::before {

      background-image: url(../../images/icons/ab1b1b/plus.svg);

    }



@media (forced-colors: active) {

  .action-link--icon-plus::before {

    background: linktext !important;

    mask-repeat: no-repeat;

    mask-image: url(../../images/icons/d72222/plus.svg);

  }

}



.action-link--icon-trash {



  /* Trash */

.action-link--icon-trash::before {

  &::before {

    content: "";

    background-image: url(../../images/icons/545560/trash.svg);



    @media (forced-colors: active) {

      background: linktext !important;

      mask-repeat: no-repeat;

      mask-image: url(../../images/icons/d72222/trash.svg);

    }

  }

.action-link--icon-trash:hover::before {



  &:hover::before {

    background-image: url(../../images/icons/0036b1/trash.svg);

  }

.action-link--icon-trash:active::before {



  &:active::before {

    background-image: url(../../images/icons/002e9a/trash.svg);

  }



  &.action-link--danger {



    /* Trash — danger */

.action-link--icon-trash.action-link--danger::before {

    &::before {

      background-image: url(../../images/icons/d72222/trash.svg);

    }

.action-link--icon-trash.action-link--danger:hover::before {



    &:hover::before {

      background-image: url(../../images/icons/c11f1f/trash.svg);

    }

.action-link--icon-trash.action-link--danger:active::before {



    &:active::before {

      background-image: url(../../images/icons/ab1b1b/trash.svg);

    }



@media (forced-colors: active) {

  .action-link--icon-trash::before {

    background: linktext !important;

    mask-repeat: no-repeat;

    mask-image: url(../../images/icons/d72222/trash.svg);

  }

}



.action-link--icon-ex {



  /* Ex */

.action-link--icon-ex::before {

  &::before {

    content: "";

    background-image: url(../../images/icons/545560/ex.svg);



    @media (forced-colors: active) {

      background: linktext !important;

      mask-repeat: no-repeat;

      mask-image: url(../../images/icons/d72222/ex.svg);

    }

  }

.action-link--icon-ex:hover::before {



  &:hover::before {

    background-image: url(../../images/icons/0036b1/ex.svg);

  }

.action-link--icon-ex:active::before {



  &:active::before {

    background-image: url(../../images/icons/002e9a/ex.svg);

  }



  &.action-link--danger {



    /* Ex — danger */

.action-link--icon-ex.action-link--danger::before {

    &::before {

      background-image: url(../../images/icons/d72222/ex.svg);

    }

.action-link--icon-ex.action-link--danger:hover::before {



    &:hover::before {

      background-image: url(../../images/icons/c11f1f/ex.svg);

    }

.action-link--icon-ex.action-link--danger:active::before {



    &:active::before {

      background-image: url(../../images/icons/ab1b1b/ex.svg);

    }



@media (forced-colors: active) {

  .action-link--icon-ex::before {

    background: linktext !important;

    mask-repeat: no-repeat;

    mask-image: url(../../images/icons/d72222/ex.svg);

  }

}



.action-link--icon-checkmark {



  /* Checkmark */

.action-link--icon-checkmark::before {

  &::before {

    content: "";

    background-image: url(../../images/icons/545560/checkmark.svg);



    @media (forced-colors: active) {

      background: linktext !important;

      mask-repeat: no-repeat;

      mask-image: url(../../images/icons/d72222/checkmark.svg);

    }

  }

.action-link--icon-checkmark:hover::before {



  &:hover::before {

    background-image: url(../../images/icons/0036b1/checkmark.svg);

  }

.action-link--icon-checkmark:active::before {



  &:active::before {

    background-image: url(../../images/icons/002e9a/checkmark.svg);

  }



  &.action-link--danger {



    /* Checkmark — danger */

.action-link--icon-checkmark.action-link--danger::before {

    &::before {

      background-image: url(../../images/icons/d72222/checkmark.svg);

    }

.action-link--icon-checkmark.action-link--danger:hover::before {



    &:hover::before {

      background-image: url(../../images/icons/c11f1f/checkmark.svg);

    }

.action-link--icon-checkmark.action-link--danger:active::before {



    &:active::before {

      background-image: url(../../images/icons/ab1b1b/checkmark.svg);

    }



@media (forced-colors: active) {

  .action-link--icon-checkmark::before {

    background: linktext !important;

    mask-repeat: no-repeat;

    mask-image: url(../../images/icons/d72222/checkmark.svg);

  }

}



.action-link--icon-cog {



  /* Cog */

.action-link--icon-cog::before {

  &::before {

    content: "";

    background-image: url(../../images/icons/545560/cog.svg);



    @media (forced-colors: active) {

      background: linktext !important;

      mask-repeat: no-repeat;

      mask-image: url(../../images/icons/d72222/cog.svg);

    }

  }

.action-link--icon-cog:hover::before {



  &:hover::before {

    background-image: url(../../images/icons/0036b1/cog.svg);

  }

.action-link--icon-cog:active::before {



  &:active::before {

    background-image: url(../../images/icons/002e9a/cog.svg);

  }



  &.action-link--danger {



    /* Cog — danger */

.action-link--icon-cog.action-link--danger::before {

    &::before {

      background-image: url(../../images/icons/d72222/cog.svg);

    }

.action-link--icon-cog.action-link--danger:hover::before {



    &:hover::before {

      background-image: url(../../images/icons/c11f1f/cog.svg);

    }

.action-link--icon-cog.action-link--danger:active::before {



    &:active::before {

      background-image: url(../../images/icons/ab1b1b/cog.svg);

    }



@media (forced-colors: active) {

  .action-link--icon-cog::before {

    background: linktext !important;

    mask-repeat: no-repeat;

    mask-image: url(../../images/icons/d72222/cog.svg);

  }

}



.action-link--icon-show {



  /* Show */

.action-link--icon-show::before {

  &::before {

    content: "";

    background-image: url(../../images/icons/545560/show.svg);



    @media (forced-colors: active) {

      background: linktext !important;

      mask-repeat: no-repeat;

      mask-image: url(../../images/icons/d72222/show.svg);

    }

.action-link--icon-show:hover::before {

  }



  &:hover::before {

    background-image: url(../../images/icons/0036b1/show.svg);

  }

.action-link--icon-show:active::before {



  &:active::before {

    background-image: url(../../images/icons/002e9a/show.svg);

  }



  &.action-link--danger {



    /* Show - danger */

.action-link--icon-show.action-link--danger::before {

    &::before {

      background-image: url(../../images/icons/d72222/show.svg);

    }

.action-link--icon-show.action-link--danger:hover::before {



    &:hover::before {

      background-image: url(../../images/icons/c11f1f/show.svg);

    }

.action-link--icon-show.action-link--danger:active::before {



    &:active::before {

      background-image: url(../../images/icons/ab1b1b/show.svg);

    }



@media (forced-colors: active) {

  .action-link--icon-show::before {

    background: linktext !important;

    mask-repeat: no-repeat;

    mask-image: url(../../images/icons/d72222/show.svg);

  }

}



.action-link--icon-hide {



  /* Hide */

.action-link--icon-hide::before {

  &::before {

    content: "";

    background-image: url(../../images/icons/545560/hide.svg);



    @media (forced-colors: active) {

      background: linktext !important;

      mask-repeat: no-repeat;

      mask-image: url(../../images/icons/d72222/hide.svg);

    }

.action-link--icon-hide:hover::before {

  }



  &:hover::before {

    background-image: url(../../images/icons/0036b1/hide.svg);

  }

.action-link--icon-hide:active::before {



  &:active::before {

    background-image: url(../../images/icons/002e9a/hide.svg);

  }



  &.action-link--danger {



    /* Hide - danger */

.action-link--icon-hide.action-link--danger::before {

    &::before {

      background-image: url(../../images/icons/d72222/hide.svg);

    }

.action-link--icon-hide.action-link--danger:hover::before {



    &:hover::before {

      background-image: url(../../images/icons/c11f1f/hide.svg);

    }

.action-link--icon-hide.action-link--danger:active::before {



    &:active::before {

      background-image: url(../../images/icons/ab1b1b/hide.svg);

    }



@media (forced-colors: active) {

  .action-link--icon-hide::before {

    background: linktext !important;

    mask-repeat: no-repeat;

    mask-image: url(../../images/icons/d72222/hide.svg);

  }

}



.action-link--icon-key {



  /* Key */

.action-link--icon-key::before {

  &::before {

    content: "";

    background-image: url("../../images/icons/545560/key.svg");



    @media (forced-colors: active) {

      background: linktext !important;

      mask-repeat: no-repeat;

      mask-image: url(../../images/icons/d72222/key.svg);

    }

.action-link--icon-key:hover::before {

  }



  &:hover::before {

    background-image: url("../../images/icons/0036b1/key.svg");

  }

.action-link--icon-key:active::before {



  &:active::before {

    background-image: url("../../images/icons/002e9a/key.svg");

  }



  &.action-link--danger {



    /* Key — danger */

.action-link--icon-key.action-link--danger::before {

    &::before {

      background-image: url("../../images/icons/d72222/key.svg");

    }

.action-link--icon-key.action-link--danger:hover::before {



    &:hover::before {

      background-image: url("../../images/icons/c11f1f/key.svg");

    }

.action-link--icon-key.action-link--danger:active::before {



    &:active::before {

      background-image: url("../../images/icons/ab1b1b/key.svg");

    }



@media (forced-colors: active) {

  .action-link--icon-key::before {

    background: linktext !important;

    mask-repeat: no-repeat;

    mask-image: url(../../images/icons/d72222/key.svg);

  }

}



.action-link--icon-questionmark {



  /* Question Mark */

.action-link--icon-questionmark::before {

  &::before {

    content: "";

    background-image: url("../../images/icons/545560/questionmark.svg");



    @media (forced-colors: active) {

      background: linktext !important;

      mask-repeat: no-repeat;

      mask-image: url(../../images/icons/d72222/questionmark.svg);

    }

  }

.action-link--icon-questionmark:hover::before {



  &:hover::before {

    background-image: url("../../images/icons/0036b1/questionmark.svg");

  }

.action-link--icon-questionmark:active::before {



  &:active::before {

    background-image: url("../../images/icons/002e9a/questionmark.svg");

  }



  &.action-link--danger {



    /* Question Mark - danger */

.action-link--icon-questionmark.action-link--danger::before {

    &::before {

      background-image: url("../../images/icons/d72222/questionmark.svg");

    }

.action-link--icon-questionmark.action-link--danger:hover::before {



    &:hover::before {

      background-image: url("../../images/icons/c11f1f/questionmark.svg");

    }

.action-link--icon-questionmark.action-link--danger:active::before {



    &:active::before {

      background-image: url("../../images/icons/ab1b1b/questionmark.svg");

    }



@media (forced-colors: active) {

  .action-link--icon-questionmark::before {

    background: linktext !important;

    mask-repeat: no-repeat;

    mask-image: url(../../images/icons/d72222/questionmark.svg);

  }

}