Verified Commit 929caa86 authored by Dave Long's avatar Dave Long
Browse files

task: #3565630 Existing Safari workarounds for details element seems to be no longer needed 

By: tom konda
By: smustgrave
(cherry picked from commit fb0bd735)
parent cb0ba704

core/themes/claro/css/components/details.css

+0 −41
Original line number Diff line number Diff line
@@ -181,33 +181,6 @@ 
  }

}



/**

 * Safari (at least version 12.1) cannot handle our details marker

 * transition properly.

 *

 * Every additional pointer triggered toggle event freezes the transition,

 * and the transition is continued and finished after the pointer leaves

 * the Detail elements' summary.

 *

 * Even that it is possible to provide a JavaScript workaround for it (by

 * adding/removing a helper class with JavaScript if the Details is

 * toggled), that hack will make RTL details worse than without the hack.

 *

 * This weird query was found in

 * https://stackoverflow.com/questions/16348489#25975282 (based on the

 * answer it works for Safari 10.1+)

 */



/* stylelint-disable-next-line unit-allowed-list */



@media not all and (min-resolution: 0.001dpcm) {

  @supports (-webkit-appearance: none) {

    .claro-details__summary::before {

      transition: none;

    }

  }

}



/**

 * Details summary focus.

 */
@@ -336,20 +309,6 @@ 
  opacity: 1;

}



/**

 * Safari workaround.

 */



/* stylelint-disable-next-line unit-allowed-list */



@media not all and (min-resolution: 0.001dpcm) {

  @supports (-webkit-appearance: none) {

    .claro-details__summary::after {

      transition: none;

    }

  }

}



.claro-details[open] > .claro-details__summary:focus {

  color: var(--color-absolutezero);

}

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

+0 −37
Original line number Diff line number Diff line
@@ -171,31 +171,6 @@ 
  }

}



/**

 * Safari (at least version 12.1) cannot handle our details marker

 * transition properly.

 *

 * Every additional pointer triggered toggle event freezes the transition,

 * and the transition is continued and finished after the pointer leaves

 * the Detail elements' summary.

 *

 * Even that it is possible to provide a JavaScript workaround for it (by

 * adding/removing a helper class with JavaScript if the Details is

 * toggled), that hack will make RTL details worse than without the hack.

 *

 * This weird query was found in

 * https://stackoverflow.com/questions/16348489#25975282 (based on the

 * answer it works for Safari 10.1+)

 */

/* stylelint-disable-next-line unit-allowed-list */

@media not all and (min-resolution: 0.001dpcm) {

  @supports (-webkit-appearance: none) {

    .claro-details__summary::before {

      transition: none;

    }

  }

}



/**

 * Details summary focus.

 */
@@ -320,18 +295,6 @@ 
  opacity: 1;

}



/**

 * Safari workaround.

 */

/* stylelint-disable-next-line unit-allowed-list */

@media not all and (min-resolution: 0.001dpcm) {

  @supports (-webkit-appearance: none) {

    .claro-details__summary::after {

      transition: none;

    }

  }

}



.claro-details[open] > .claro-details__summary:focus {

  color: var(--color-absolutezero);

}