Verified Commit e45ee776 authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

Issue #3305148 by Harish1688, Aditya4478, Gauravvvv, smustgrave: Refactor... 

Issue #3305148 by Harish1688, Aditya4478, Gauravvvv, smustgrave: Refactor Claro's image-preview stylesheet
parent 103b774c

core/themes/claro/css/components/image-preview.css

+7 −7
Original line number Diff line number Diff line
@@ -23,6 +23,12 @@ 
  line-height: 0;

}



.image-preview img {

  background-image: linear-gradient(-45deg, var(--color-pattern) 25%, transparent 26%), linear-gradient(-45deg, var(--color-pattern) 25%, transparent 26%), linear-gradient(135deg, var(--color-pattern) 25%, transparent 26%), linear-gradient(135deg, var(--color-pattern) 25%, transparent 26%);

  background-position: 0 0, var(--size-pattern-square) var(--size-pattern-square), var(--size-pattern-square) var(--size-pattern-square), 0 0;

  background-size: calc(var(--size-pattern-square) * 2) calc(var(--size-pattern-square) * 2);

}



.image-preview__img-wrapper {

  display: inline-block;

  max-width: 100%;
@@ -30,17 +36,11 @@ 
  box-shadow: inset 0 0 var(--size-pattern-square) var(--color-pattern);

}



.image-preview img {

  background-image: linear-gradient(-45deg, var(--color-pattern) 25%, transparent 26%), linear-gradient(-45deg, var(--color-pattern) 25%, transparent 26%), linear-gradient(135deg, var(--color-pattern) 25%, transparent 26%), linear-gradient(135deg, var(--color-pattern) 25%, transparent 26%);

  background-position: 0 0, var(--size-pattern-square) var(--size-pattern-square), var(--size-pattern-square) var(--size-pattern-square), 0 0;

  background-size: calc(var(--size-pattern-square) * 2) calc(var(--size-pattern-square) * 2);

}



/**

 * Don't display file icon in image widgets.

 */



.image-widget .file.file {

  padding: 0; /* LTR and RTL */

  padding: 0;

  background: none;

}

core/themes/claro/css/components/image-preview.pcss.css

+7 −15
Original line number Diff line number Diff line
@@ -13,6 +13,12 @@ 
 */

.image-preview {

  line-height: 0;



  & img {

    background-image: linear-gradient(-45deg, var(--color-pattern) 25%, transparent 26%), linear-gradient(-45deg, var(--color-pattern) 25%, transparent 26%), linear-gradient(135deg, var(--color-pattern) 25%, transparent 26%), linear-gradient(135deg, var(--color-pattern) 25%, transparent 26%);

    background-position: 0 0, var(--size-pattern-square) var(--size-pattern-square), var(--size-pattern-square) var(--size-pattern-square), 0 0;

    background-size: calc(var(--size-pattern-square) * 2) calc(var(--size-pattern-square) * 2);

  }

}



.image-preview__img-wrapper {
@@ -22,24 +28,10 @@ 
  box-shadow: inset 0 0 var(--size-pattern-square) var(--color-pattern);

}



.image-preview img {

  background-image:

    linear-gradient(-45deg, var(--color-pattern) 25%, transparent 26%),

    linear-gradient(-45deg, var(--color-pattern) 25%, transparent 26%),

    linear-gradient(135deg, var(--color-pattern) 25%, transparent 26%),

    linear-gradient(135deg, var(--color-pattern) 25%, transparent 26%);

  background-position:

    0 0,

    var(--size-pattern-square) var(--size-pattern-square),

    var(--size-pattern-square) var(--size-pattern-square),

    0 0;

  background-size: calc(var(--size-pattern-square) * 2) calc(var(--size-pattern-square) * 2);

}



/**

 * Don't display file icon in image widgets.

 */

.image-widget .file.file {

  padding: 0; /* LTR and RTL */

  padding: 0;

  background: none;

}