1
2
3
4
5
6

window.addEventListener('resize',   MediaSize.DebounceBuilder(() => {
      this.setAttribute("media-size", MediaSize.GetMediaSize())
    }, MediaSize.HANDLE_RESIZE_DEBOUNCE_RATE)
);
// initial size
this.setAttribute("media-size", MediaSize.GetMediaSize())

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

 :host([media-size='XXL']) {
         --FuroUi5MediaSizeIndentation: 2rem 3rem 1rem 3rem;
         --FuroUi5MediaSizeIndentationTop: 2rem;
         --FuroUi5MediaSizeIndentationRight: 3rem;
         --FuroUi5MediaSizeIndentationBottom: 1;
         --FuroUi5MediaSizeIndentationLeft: 3rem;
       }

:host([media-size='XL']) {
         --FuroUi5MediaSizeIndentation: 2rem 3rem 1rem 3rem;
         --FuroUi5MediaSizeIndentationTop: 2rem;
         --FuroUi5MediaSizeIndentationRight: 3rem;
         --FuroUi5MediaSizeIndentationBottom: 1;
         --FuroUi5MediaSizeIndentationLeft: 3rem;
       }

:host([media-size='L']) {
         --FuroUi5MediaSizeIndentation: 1rem 2rem 0 2rem;
         --FuroUi5MediaSizeIndentationTop: 1rem;
         --FuroUi5MediaSizeIndentationRight: 2rem;
         --FuroUi5MediaSizeIndentationBottom: 0;
         --FuroUi5MediaSizeIndentationLeft: 2rem;
       }

:host([media-size='M']) {
         --FuroUi5MediaSizeIndentation: 0.625rem 2rem 0 2rem;
         --FuroUi5MediaSizeIndentationTop: 0.625rem;
         --FuroUi5MediaSizeIndentationRight: 2rem;
         --FuroUi5MediaSizeIndentationBottom: 0;
         --FuroUi5MediaSizeIndentationLeft: 2rem;
       }

:host([media-size='S']) {
         --FuroUi5MediaSizeIndentation: 0.625rem 1rem 0 1rem;
         --FuroUi5MediaSizeIndentationTop: 0.625rem;
         --FuroUi5MediaSizeIndentationRight: 1rem;
         --FuroUi5MediaSizeIndentationBottom: 0;
         --FuroUi5MediaSizeIndentationLeft: 1rem;
     }