git.iko.soy/typeable/elm-ui
on master help sign in
typeable/elm-ui/src/Internal/Style.elm
1798 lines 55 kB history raw
1module Internal.Style exposing (classes, dot, rules)
3{-| -}
6type Class
7 = Class String (List Rule)
10type Rule
11 = Prop String String
12 | Child String (List Rule)
13 | AllChildren String (List Rule)
14 | Supports ( String, String ) (List ( String, String ))
15 | Descriptor String (List Rule)
16 | Adjacent String (List Rule)
17 | Batch (List Rule)
20type StyleClasses
21 = Root
22 | Any
23 | Single
24 | Row
25 | Column
26 | Paragraph
27 | Page
28 | Text
29 | Grid
30 | Spacer
34-- lengths
37alignments =
38 [ Top
39 , Bottom
40 , Right
41 , Left
42 , CenterX
43 , CenterY
44 ]
47type Location
48 = Above
49 | Below
50 | OnRight
51 | OnLeft
52 | Within
53 | Behind
56locations =
57 let
58 loc =
59 Above
61 _ =
62 case loc of
63 Above ->
64 ()
66 Below ->
67 ()
69 OnRight ->
70 ()
72 OnLeft ->
73 ()
75 Within ->
76 ()
78 Behind ->
79 ()
80 in
81 [ Above
82 , Below
83 , OnRight
84 , OnLeft
85 , Within
86 , Behind
87 ]
90selfName desc =
91 case desc of
92 Self Top ->
93 dot classes.alignTop
95 Self Bottom ->
96 dot classes.alignBottom
98 Self Right ->
99 dot classes.alignRight
101 Self Left ->
102 dot classes.alignLeft
104 Self CenterX ->
105 dot classes.alignCenterX
107 Self CenterY ->
108 dot classes.alignCenterY
111contentName desc =
112 case desc of
113 Content Top ->
114 dot classes.contentTop
116 Content Bottom ->
117 dot classes.contentBottom
119 Content Right ->
120 dot classes.contentRight
122 Content Left ->
123 dot classes.contentLeft
125 Content CenterX ->
126 dot classes.contentCenterX
128 Content CenterY ->
129 dot classes.contentCenterY
132classes =
133 { root = "ui"
134 , any = "s"
135 , single = "e"
136 , row = "r"
137 , column = "c"
138 , page = "pg"
139 , paragraph = "p"
140 , text = "t"
141 , grid = "g"
142 , imageContainer = "ic"
143 , wrapped = "wrp"
145 -- widhts/heights
146 , widthFill = "wf"
147 , widthContent = "wc"
148 , widthExact = "we"
149 , widthFillPortion = "wfp"
150 , heightFill = "hf"
151 , heightContent = "hc"
152 , heightExact = "he"
153 , heightFillPortion = "hfp"
154 , seButton = "sbt"
156 -- nearby elements
157 , nearby = "nb"
158 , above = "a"
159 , below = "b"
160 , onRight = "or"
161 , onLeft = "ol"
162 , inFront = "fr"
163 , behind = "bh"
164 , hasBehind = "hbh"
166 -- alignments
167 , alignTop = "at"
168 , alignBottom = "ab"
169 , alignRight = "ar"
170 , alignLeft = "al"
171 , alignCenterX = "cx"
172 , alignCenterY = "cy"
173 , alignedHorizontally = "ah"
174 , alignedVertically = "av"
176 -- space evenly
177 , spaceEvenly = "sev"
178 , container = "ctr"
179 , alignContainerRight = "acr"
180 , alignContainerBottom = "acb"
181 , alignContainerCenterX = "accx"
182 , alignContainerCenterY = "accy"
184 -- content alignments
185 , contentTop = "ct"
186 , contentBottom = "cb"
187 , contentRight = "cr"
188 , contentLeft = "cl"
189 , contentCenterX = "ccx"
190 , contentCenterY = "ccy"
192 -- selection
193 , noTextSelection = "notxt"
194 , cursorPointer = "cptr"
195 , cursorText = "ctxt"
197 -- pointer events
198 , passPointerEvents = "ppe"
199 , capturePointerEvents = "cpe"
200 , transparent = "clr"
201 , opaque = "oq"
202 , overflowHidden = "oh"
204 -- special state classes
205 , hover = "hv"
207 -- , hoverOpaque = "hover-opaque"
208 , focus = "fcs"
209 , focusedWithin = "focus-within"
211 -- , focusOpaque = "focus-opaque"
212 , active = "atv"
214 -- , activeOpaque = "active-opaque"
215 --scrollbars
216 , scrollbars = "sb"
217 , scrollbarsX = "sbx"
218 , scrollbarsY = "sby"
219 , clip = "cp"
220 , clipX = "cpx"
221 , clipY = "cpy"
223 -- borders
224 , borderNone = "bn"
225 , borderDashed = "bd"
226 , borderDotted = "bdt"
227 , borderSolid = "bs"
229 -- text weight
230 , sizeByCapital = "cap"
231 , fullSize = "fs"
232 , textThin = "w1"
233 , textExtraLight = "w2"
234 , textLight = "w3"
235 , textNormalWeight = "w4"
236 , textMedium = "w5"
237 , textSemiBold = "w6"
238 , bold = "w7"
239 , textExtraBold = "w8"
240 , textHeavy = "w9"
241 , italic = "i"
242 , strike = "sk"
243 , underline = "u"
244 , textUnitalicized = "tun"
246 -- text alignment
247 , textJustify = "tj"
248 , textJustifyAll = "tja"
249 , textCenter = "tc"
250 , textRight = "tr"
251 , textLeft = "tl"
252 , transition = "ts"
254 -- inputText
255 , inputText = "it"
256 , inputMultiline = "iml"
257 , inputMultilineParent = "imlp"
258 , inputMultilineFiller = "imlf"
259 , inputMultilineWrapper = "implw"
260 , inputLabel = "lbl"
262 -- link
263 , link = "lnk"
264 }
267{-| The indulgent unicode character version.
268-}
269unicode =
270 { root = "style-elements"
271 , any = "s"
272 , single = "e"
273 , row = "ā‹Æ"
274 , column = "ā‹®"
275 , page = "šŸ—"
276 , paragraph = "p"
277 , text = "text"
278 , grid = "ā–¦"
280 -- widhts/heights
281 , widthFill = "ā†”"
282 , widthContent = "width-content"
283 , widthExact = "width-exact"
284 , heightFill = "ā†•"
285 , heightContent = "height-content"
286 , heightExact = "height-exact"
288 -- nearby elements
289 , above = "above"
290 , below = "below"
291 , onRight = "on-right"
292 , onLeft = "on-left"
293 , inFront = "infront"
294 , behind = "behind"
296 -- alignments
297 , alignTop = "ā¤’"
298 , alignBottom = "ā¤“"
299 , alignRight = "ā‡„"
300 , alignLeft = "ā‡¤"
301 , alignCenterX = "self-center-x"
302 , alignCenterY = "self-center-y"
304 -- space evenly
305 , spaceEvenly = "space-evenly"
306 , container = "container"
308 -- content alignments
309 , contentTop = "content-top"
310 , contentBottom = "content-bottom"
311 , contentRight = "content-right"
312 , contentLeft = "content-left"
313 , contentCenterX = "content-center-x"
314 , contentCenterY = "content-center-y"
316 -- selection
317 , noTextSelection = "no-text-selection"
318 , cursorPointer = "cursor-pointer"
319 , cursorText = "cursor-text"
321 -- pointer events
322 , passPointerEvents = "pass-pointer-events"
323 , capturePointerEvents = "capture-pointer-events"
324 , transparent = "transparent"
325 , opaque = "opaque"
327 --scrollbars
328 , scrollbars = "scrollbars"
329 , scrollbarsX = "scrollbars-x"
330 , scrollbarsY = "scrollbars-y"
331 , clip = "āœ‚"
332 , clipX = "āœ‚x"
333 , clipY = "āœ‚y"
335 -- borders
336 , borderNone = "border-none"
337 , borderDashed = "border-dashed"
338 , borderDotted = "border-dotted"
339 , borderSolid = "border-solid"
341 -- text weight
342 , textThin = "text-thin"
343 , textExtraLight = "text-extra-light"
344 , textLight = "text-light"
345 , textNormalWeight = "text-normal-weight"
346 , textMedium = "text-medium"
347 , textSemiBold = "text-semi-bold"
348 , bold = "bold"
349 , textExtraBold = "text-extra-bold"
350 , textHeavy = "text-heavy"
351 , italic = "italic"
352 , strike = "strike"
353 , underline = "underline"
354 , textUnitalicized = "text-unitalicized"
356 -- text alignment
357 , textJustify = "text-justify"
358 , textJustifyAll = "text-justify-all"
359 , textCenter = "text-center"
360 , textRight = "text-right"
361 , textLeft = "text-left"
362 }
365single =
366 { root = "z"
367 , any = "s"
368 , single = "e"
369 , row = "r"
370 , column = "c"
371 , page = "l"
372 , paragraph = "p"
373 , text = "t"
374 , grid = "g"
376 -- widhts/heights
377 , widthFill = "ā†”"
378 , widthContent = "wc"
379 , widthExact = "w"
380 , heightFill = "ā†•"
381 , heightContent = "hc"
382 , heightExact = "h"
384 -- nearby elements
385 , above = "o"
386 , below = "u"
387 , onRight = "r"
388 , onLeft = "l"
389 , inFront = "f"
390 , behind = "b"
392 -- alignments
393 , alignTop = "ā¤’"
394 , alignBottom = "ā¤“"
395 , alignRight = "ā‡„"
396 , alignLeft = "ā‡¤"
397 , alignCenterX = "self-center-x"
398 , alignCenterY = "self-center-y"
400 -- space evenly
401 , spaceEvenly = "space-evenly"
402 , container = "container"
404 -- content alignments
405 , contentTop = "cā¤’"
406 , contentBottom = "cā¤“"
407 , contentRight = "cā‡„"
408 , contentLeft = "cā‡¤"
409 , contentCenterX = "content-center-x"
410 , contentCenterY = "content-center-y"
412 -- selection
413 , noTextSelection = "no-text-selection"
414 , cursorPointer = "cursor-pointer"
415 , cursorText = "cursor-text"
417 -- pointer events
418 , passPointerEvents = "pass-pointer-events"
419 , capturePointerEvents = "capture-pointer-events"
420 , transparent = "transparent"
421 , opaque = "opaque"
423 --scrollbars
424 , scrollbars = "scrollbars"
425 , scrollbarsX = "scrollbars-x"
426 , scrollbarsY = "scrollbars-y"
427 , clip = "āœ‚"
428 , clipX = "āœ‚x"
429 , clipY = "āœ‚y"
431 -- borders
432 , borderNone = "border-none"
433 , borderDashed = "border-dashed"
434 , borderDotted = "border-dotted"
435 , borderSolid = "border-solid"
437 -- text weight
438 , textThin = "text-thin"
439 , textExtraLight = "text-extra-light"
440 , textLight = "text-light"
441 , textNormalWeight = "text-normal-weight"
442 , textMedium = "text-medium"
443 , textSemiBold = "text-semi-bold"
444 , bold = "b"
445 , textExtraBold = "text-extra-bold"
446 , textHeavy = "text-heavy"
447 , italic = "i"
448 , strike = "-"
449 , underline = "u"
450 , textUnitalicized = "text-unitalicized"
452 -- text alignment
453 , textJustify = "text-justify"
454 , textJustifyAll = "text-justify-all"
455 , textCenter = "text-center"
456 , textRight = "text-right"
457 , textLeft = "text-left"
458 }
461describeAlignment values =
462 let
463 createDescription alignment =
464 let
465 ( content, indiv ) =
466 values alignment
467 in
468 [ Descriptor (contentName (Content alignment)) <|
469 content
470 , Child (dot classes.any)
471 [ Descriptor (selfName <| Self alignment) indiv
472 ]
473 ]
474 in
475 Batch <|
476 List.concatMap createDescription alignments
479gridAlignments values =
480 let
481 createDescription alignment =
482 [ Child (dot classes.any)
483 [ Descriptor (selfName <| Self alignment) (values alignment)
484 ]
485 ]
486 in
487 Batch <|
488 List.concatMap createDescription alignments
491type SelfDescriptor
492 = Self Alignment
495type ContentDescriptor
496 = Content Alignment
499type Alignment
500 = Top
501 | Bottom
502 | Right
503 | Left
504 | CenterX
505 | CenterY
508type Intermediate
509 = Intermediate
510 { selector : String
511 , props : List ( String, String )
512 , closing : String
513 , others : List Intermediate
514 }
517emptyIntermediate : String -> String -> Intermediate
518emptyIntermediate selector closing =
519 Intermediate
520 { selector = selector
521 , props = []
522 , closing = closing
523 , others = []
524 }
527renderRules : Intermediate -> List Rule -> Intermediate
528renderRules (Intermediate parent) rulesToRender =
529 let
530 generateIntermediates rule rendered =
531 case rule of
532 Prop name val ->
533 { rendered | props = ( name, val ) :: rendered.props }
535 Supports ( prop, value ) props ->
536 { rendered
537 | others =
538 Intermediate
539 { selector = "@supports (" ++ prop ++ ":" ++ value ++ ") {" ++ parent.selector
540 , props = props
541 , closing = "\n}"
542 , others = []
543 }
544 :: rendered.others
545 }
547 Adjacent selector adjRules ->
548 { rendered
549 | others =
550 renderRules
551 (emptyIntermediate (parent.selector ++ " + " ++ selector) "")
552 adjRules
553 :: rendered.others
554 }
556 Child child childRules ->
557 { rendered
558 | others =
559 renderRules
560 (emptyIntermediate (parent.selector ++ " > " ++ child) "")
561 childRules
562 :: rendered.others
563 }
565 AllChildren child childRules ->
566 { rendered
567 | others =
568 renderRules
569 (emptyIntermediate (parent.selector ++ " " ++ child) "")
570 childRules
571 :: rendered.others
572 }
574 Descriptor descriptor descriptorRules ->
575 { rendered
576 | others =
577 renderRules
578 (emptyIntermediate (parent.selector ++ descriptor) "")
579 descriptorRules
580 :: rendered.others
581 }
583 Batch batched ->
584 { rendered
585 | others =
586 renderRules (emptyIntermediate parent.selector "") batched
587 :: rendered.others
588 }
589 in
590 Intermediate <| List.foldr generateIntermediates parent rulesToRender
593render : List Class -> String
594render classNames =
595 let
596 renderValues values =
597 values
598 |> List.map (\( x, y ) -> " " ++ x ++ ": " ++ y ++ ";")
599 |> String.join "\n"
601 renderClass rule =
602 case rule.props of
603 [] ->
604 ""
606 _ ->
607 rule.selector ++ " {\n" ++ renderValues rule.props ++ rule.closing ++ "\n}"
609 renderIntermediate (Intermediate rule) =
610 renderClass rule
611 ++ String.join "\n" (List.map renderIntermediate rule.others)
612 in
613 classNames
614 |> List.foldr
615 (\(Class name styleRules) existing ->
616 renderRules (emptyIntermediate name "") styleRules :: existing
617 )
618 []
619 |> List.map renderIntermediate
620 |> String.join "\n"
623renderCompact : List Class -> String
624renderCompact styleClasses =
625 let
626 renderValues values =
627 values
628 |> List.map (\( x, y ) -> x ++ ":" ++ y ++ ";")
629 |> String.concat
631 renderClass rule =
632 case rule.props of
633 [] ->
634 ""
636 _ ->
637 rule.selector ++ "{" ++ renderValues rule.props ++ rule.closing ++ "}"
639 renderIntermediate (Intermediate rule) =
640 renderClass rule
641 ++ String.concat (List.map renderIntermediate rule.others)
642 in
643 styleClasses
644 |> List.foldr
645 (\(Class name styleRules) existing ->
646 renderRules (emptyIntermediate name "") styleRules :: existing
647 )
648 []
649 |> List.map renderIntermediate
650 |> String.concat
653viewportRules : String
654viewportRules =
655 """html, body {
656 height: 100%;
657 width: 100%;
658} """ ++ rules
661describeText : String -> List Rule -> Rule
662describeText cls props =
663 Descriptor cls
664 (List.map makeImportant props
665 ++ [ Child ".text"
666 props
667 , Child ".el"
668 props
669 , Child ".el > .text"
670 props
671 ]
672 )
675makeImportant : Rule -> Rule
676makeImportant rule =
677 case rule of
678 Prop name prop ->
679 Prop name (prop ++ " !important")
681 _ ->
682 rule
685dot c =
686 "." ++ c
689overrides =
690 """@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {"""
691 ++ dot classes.any
692 ++ dot classes.row
693 ++ " > "
694 ++ dot classes.any
695 ++ " { flex-basis: auto !important; } "
696 ++ dot classes.any
697 ++ dot classes.row
698 ++ " > "
699 ++ dot classes.any
700 ++ dot classes.container
701 ++ " { flex-basis: auto !important; }}"
702 ++ inputTextReset
703 ++ sliderReset
704 ++ trackReset
705 ++ thumbReset
706 ++ explainer
709inputTextReset =
710 """
711input[type="search"],
712input[type="search"]::-webkit-search-decoration,
713input[type="search"]::-webkit-search-cancel-button,
714input[type="search"]::-webkit-search-results-button,
715input[type="search"]::-webkit-search-results-decoration {
716 -webkit-appearance:none;
718"""
721sliderReset =
722 """
723input[type=range] {
724 -webkit-appearance: none;
725 background: transparent;
726 position:absolute;
727 left:0;
728 top:0;
729 z-index:10;
730 width: 100%;
731 outline: dashed 1px;
732 height: 100%;
733 opacity: 0;
735"""
738trackReset =
739 """
740input[type=range]::-moz-range-track {
741 background: transparent;
742 cursor: pointer;
744input[type=range]::-ms-track {
745 background: transparent;
746 cursor: pointer;
748input[type=range]::-webkit-slider-runnable-track {
749 background: transparent;
750 cursor: pointer;
752"""
755thumbReset =
756 """
757input[type=range]::-webkit-slider-thumb {
758 -webkit-appearance: none;
759 opacity: 0.5;
760 width: 80px;
761 height: 80px;
762 background-color: black;
763 border:none;
764 border-radius: 5px;
766input[type=range]::-moz-range-thumb {
767 opacity: 0.5;
768 width: 80px;
769 height: 80px;
770 background-color: black;
771 border:none;
772 border-radius: 5px;
774input[type=range]::-ms-thumb {
775 opacity: 0.5;
776 width: 80px;
777 height: 80px;
778 background-color: black;
779 border:none;
780 border-radius: 5px;
782input[type=range][orient=vertical]{
783 writing-mode: bt-lr; /* IE */
784 -webkit-appearance: slider-vertical; /* WebKit */
786"""
789explainer =
790 """
791.explain {
792 border: 6px solid rgb(174, 121, 15) !important;
794.explain > .""" ++ classes.any ++ """ {
795 border: 4px dashed rgb(0, 151, 167) !important;
798.ctr {
799 border: none !important;
801.explain > .ctr > .""" ++ classes.any ++ """ {
802 border: 4px dashed rgb(0, 151, 167) !important;
805"""
808commonValues =
809 List.concat
810 [ List.map
811 (\x ->
812 Class (".border-" ++ String.fromInt x) [ Prop "border-width" (String.fromInt x ++ "px") ]
813 )
814 (List.range 0 6)
815 , List.map
816 (\i ->
817 Class (".font-size-" ++ String.fromInt i) [ Prop "font-size" (String.fromInt i ++ "px") ]
818 )
819 (List.range 8 32)
820 , List.map
821 (\i ->
822 Class (".p-" ++ String.fromInt i) [ Prop "padding" (String.fromInt i ++ "px") ]
823 )
824 (List.range 0 24)
826 -- Common Font Variants
827 , [ Class ".v-smcp"
828 [ Prop "font-variant" "small-caps"
829 ]
830 , Class ".v-smcp-off"
831 [ Prop "font-variant" "normal"
832 ]
833 ]
835 -- , fontVariant "smcp"
836 , fontVariant "zero"
837 , fontVariant "onum"
838 , fontVariant "liga"
839 , fontVariant "dlig"
840 , fontVariant "ordn"
841 , fontVariant "tnum"
842 , fontVariant "afrc"
843 , fontVariant "frac"
844 ]
847fontVariant var =
848 [ Class (".v-" ++ var)
849 [ Prop "font-feature-settings" ("\"" ++ var ++ "\"")
850 ]
851 , Class (".v-" ++ var ++ "-off")
852 [ Prop "font-feature-settings" ("\"" ++ var ++ "\" 0")
853 ]
854 ]
857rules : String
858rules =
859 overrides
860 ++ renderCompact (baseSheet ++ commonValues)
863elDescription =
864 [ Prop "display" "flex"
865 , Prop "flex-direction" "column"
866 , Prop "white-space" "pre"
867 , Descriptor (dot classes.hasBehind)
868 [ Prop "z-index" "0"
869 , Child (dot classes.behind)
870 [ Prop "z-index" "-1"
871 ]
872 ]
873 , Descriptor (dot classes.seButton)
874 -- Special default for text in a button.
875 -- This is overridden is they put the text inside an `el`
876 [ Child (dot classes.text)
877 [ Descriptor (dot classes.heightFill)
878 [ Prop "flex-grow" "0"
879 ]
880 , Descriptor (dot classes.widthFill)
881 [ Prop "align-self" "auto !important"
882 ]
883 ]
884 ]
885 , Child (dot classes.heightContent)
886 [ Prop "height" "auto"
887 ]
888 , Child (dot classes.heightFill)
889 [ Prop "flex-grow" "100000"
890 ]
891 , Child (dot classes.widthFill)
892 [ -- alignLeft, alignRight, centerX are overridden by width.
893 -- Prop "align-self" "stretch !important"
894 Prop "width" "100%"
895 ]
896 , Child (dot classes.widthFillPortion)
897 [ Prop "width" "100%"
898 ]
899 , Child (dot classes.widthContent)
900 [ Prop "align-self" "flex-start"
901 ]
903 -- , Child (dot classes.widthFill)
904 -- [ Prop "align-self" "stretch"
905 -- , Descriptor (dot classes.alignedHorizontally)
906 -- [ Prop "width" "100%"
907 -- ]
908 -- ]
909 , describeAlignment <|
910 \alignment ->
911 case alignment of
912 Top ->
913 ( [ Prop "justify-content" "flex-start" ]
914 , [ Prop "margin-bottom" "auto !important"
915 , Prop "margin-top" "0 !important"
916 ]
917 )
919 Bottom ->
920 ( [ Prop "justify-content" "flex-end" ]
921 , [ Prop "margin-top" "auto !important"
922 , Prop "margin-bottom" "0 !important"
923 ]
924 )
926 Right ->
927 ( [ Prop "align-items" "flex-end" ]
928 , [ Prop "align-self" "flex-end" ]
929 )
931 Left ->
932 ( [ Prop "align-items" "flex-start" ]
933 , [ Prop "align-self" "flex-start" ]
934 )
936 CenterX ->
937 ( [ Prop "align-items" "center" ]
938 , [ Prop "align-self" "center"
939 ]
940 )
942 CenterY ->
943 ( [ -- Prop "justify-content" "center"
944 Child (dot classes.any)
945 [ Prop "margin-top" "auto"
946 , Prop "margin-bottom" "auto"
947 ]
948 ]
949 , [ Prop "margin-top" "auto !important"
950 , Prop "margin-bottom" "auto !important"
951 ]
952 )
953 ]
956baseSheet =
957 [ Class "html,body"
958 [ Prop "height" "100%"
959 , Prop "padding" "0"
960 , Prop "margin" "0"
961 ]
962 , Class (dot classes.any ++ dot classes.single ++ dot classes.imageContainer)
963 [ Prop "display" "block"
964 , Descriptor (dot classes.heightFill)
965 [ Child "img"
966 [ Prop "max-height" "100%"
967 , Prop "object-fit" "cover"
968 ]
969 ]
970 , Descriptor (dot classes.widthFill)
971 [ Child "img"
972 [ Prop "max-width" "100%"
973 , Prop "object-fit" "cover"
974 ]
975 ]
976 ]
977 , Class (dot classes.any ++ ":focus")
978 [ Prop "outline" "none"
979 ]
980 , Class (dot classes.root)
981 [ Prop "width" "100%"
982 , Prop "height" "auto"
983 , Prop "min-height" "100%"
984 , Prop "z-index" "0"
985 , Descriptor
986 (dot classes.any
987 -- ++ dot classes.single
988 ++ dot classes.heightFill
989 )
990 [ Prop "height" "100%"
991 , Child (dot classes.heightFill)
992 [ Prop "height" "100%"
993 ]
994 ]
995 , Child (dot classes.inFront)
996 [ Descriptor (dot classes.nearby)
997 [ Prop "position" "fixed"
998 , Prop "z-index" "20"
999 ]
1002 , Class (dot classes.nearby)
1003 [ Prop "position" "relative"
1004 , Prop "border" "none"
1005 , Prop "display" "flex"
1006 , Prop "flex-direction" "row"
1007 , Prop "flex-basis" "auto"
1008 , Descriptor (dot classes.single)
1009 elDescription
1010 , Batch <|
1011 (\fn -> List.map fn locations) <|
1012 \loc ->
1013 case loc of
1014 Above ->
1015 Descriptor (dot classes.above)
1016 [ Prop "position" "absolute"
1017 , Prop "bottom" "100%"
1018 , Prop "left" "0"
1019 , Prop "width" "100%"
1020 , Prop "z-index" "20"
1021 , Prop "margin" "0 !important"
1022 , Child (dot classes.heightFill)
1023 [ Prop "height" "auto"
1025 , Child (dot classes.widthFill)
1026 [ Prop "width" "100%"
1028 , Prop "pointer-events" "none"
1029 , Child "*"
1030 [ Prop "pointer-events" "auto"
1034 Below ->
1035 Descriptor (dot classes.below)
1036 [ Prop "position" "absolute"
1037 , Prop "bottom" "0"
1038 , Prop "left" "0"
1039 , Prop "height" "0"
1040 , Prop "width" "100%"
1041 , Prop "z-index" "20"
1042 , Prop "margin" "0 !important"
1043 , Prop "pointer-events" "none"
1044 , Child "*"
1045 [ Prop "pointer-events" "auto"
1047 , Child (dot classes.heightFill)
1048 [ Prop "height" "auto"
1052 OnRight ->
1053 Descriptor (dot classes.onRight)
1054 [ Prop "position" "absolute"
1055 , Prop "left" "100%"
1056 , Prop "top" "0"
1057 , Prop "height" "100%"
1058 , Prop "margin" "0 !important"
1059 , Prop "z-index" "20"
1060 , Prop "pointer-events" "none"
1061 , Child "*"
1062 [ Prop "pointer-events" "auto"
1066 OnLeft ->
1067 Descriptor (dot classes.onLeft)
1068 [ Prop "position" "absolute"
1069 , Prop "right" "100%"
1070 , Prop "top" "0"
1071 , Prop "height" "100%"
1072 , Prop "margin" "0 !important"
1073 , Prop "z-index" "20"
1074 , Prop "pointer-events" "none"
1075 , Child "*"
1076 [ Prop "pointer-events" "auto"
1080 Within ->
1081 Descriptor (dot classes.inFront)
1082 [ Prop "position" "absolute"
1083 , Prop "width" "100%"
1084 , Prop "height" "100%"
1085 , Prop "left" "0"
1086 , Prop "top" "0"
1087 , Prop "margin" "0 !important"
1088 , Prop "pointer-events" "none"
1089 , Child "*"
1090 [ Prop "pointer-events" "auto"
1094 Behind ->
1095 Descriptor (dot classes.behind)
1096 [ Prop "position" "absolute"
1097 , Prop "width" "100%"
1098 , Prop "height" "100%"
1099 , Prop "left" "0"
1100 , Prop "top" "0"
1101 , Prop "margin" "0 !important"
1102 , Prop "z-index" "0"
1103 , Prop "pointer-events" "none"
1104 , Child "*"
1105 [ Prop "pointer-events" "auto"
1109 , Class (dot classes.any)
1110 [ Prop "position" "relative"
1111 , Prop "border" "none"
1112 , Prop "flex-shrink" "0"
1113 , Prop "display" "flex"
1114 , Prop "flex-direction" "row"
1115 , Prop "flex-basis" "auto"
1116 , Prop "resize" "none"
1117 , Prop "font-feature-settings" "inherit"
1119 -- , Prop "flex-basis" "0%"
1120 , Prop "box-sizing" "border-box"
1121 , Prop "margin" "0"
1122 , Prop "padding" "0"
1123 , Prop "border-width" "0"
1124 , Prop "border-style" "solid"
1126 -- inheritable font properties
1127 , Prop "font-size" "inherit"
1128 , Prop "color" "inherit"
1129 , Prop "font-family" "inherit"
1130 , Prop "line-height" "1"
1131 , Prop "font-weight" "inherit"
1133 -- Text decoration is *mandatorily inherited* in the css spec.
1134 -- There's no way to change this. How crazy is that?
1135 , Prop "text-decoration" "none"
1136 , Prop "font-style" "inherit"
1137 , Descriptor (dot classes.wrapped)
1138 [ Prop "flex-wrap" "wrap"
1140 , Descriptor (dot classes.noTextSelection)
1141 [ Prop "-moz-user-select" "none"
1142 , Prop "-webkit-user-select" "none"
1143 , Prop "-ms-user-select" "none"
1144 , Prop "user-select" "none"
1146 , Descriptor (dot classes.cursorPointer)
1147 [ Prop "cursor" "pointer"
1149 , Descriptor (dot classes.cursorText)
1150 [ Prop "cursor" "text"
1152 , Descriptor (dot classes.passPointerEvents)
1153 [ Prop "pointer-events" "none !important"
1155 , Descriptor (dot classes.capturePointerEvents)
1156 [ Prop "pointer-events" "auto !important"
1158 , Descriptor (dot classes.transparent)
1159 [ Prop "opacity" "0"
1161 , Descriptor (dot classes.opaque)
1162 [ Prop "opacity" "1"
1164 , Descriptor (dot (classes.hover ++ classes.transparent) ++ ":hover")
1165 [ Prop "opacity" "0"
1167 , Descriptor (dot (classes.hover ++ classes.opaque) ++ ":hover")
1168 [ Prop "opacity" "1"
1170 , Descriptor (dot (classes.focus ++ classes.transparent) ++ ":focus")
1171 [ Prop "opacity" "0"
1173 , Descriptor (dot (classes.focus ++ classes.opaque) ++ ":focus")
1174 [ Prop "opacity" "1"
1176 , Descriptor (dot (classes.active ++ classes.transparent) ++ ":active")
1177 [ Prop "opacity" "0"
1179 , Descriptor (dot (classes.active ++ classes.opaque) ++ ":active")
1180 [ Prop "opacity" "1"
1182 , Descriptor (dot classes.transition)
1183 [ Prop "transition"
1184 (String.join ", " <|
1185 List.map (\x -> x ++ " 160ms")
1186 [ "transform"
1187 , "opacity"
1188 , "filter"
1189 , "background-color"
1190 , "color"
1191 , "font-size"
1195 , Descriptor (dot classes.scrollbars)
1196 [ Prop "overflow" "auto"
1197 , Prop "flex-shrink" "1"
1199 , Descriptor (dot classes.scrollbarsX)
1200 [ Prop "overflow-x" "auto"
1201 , Descriptor (dot classes.row)
1202 [ Prop "flex-shrink" "1"
1205 , Descriptor (dot classes.scrollbarsY)
1206 [ Prop "overflow-y" "auto"
1207 , Descriptor (dot classes.column)
1208 [ Prop "flex-shrink" "1"
1210 , Descriptor (dot classes.single)
1211 [ Prop "flex-shrink" "1"
1214 , Descriptor (dot classes.clip)
1215 [ Prop "overflow" "hidden"
1217 , Descriptor (dot classes.clipX)
1218 [ Prop "overflow-x" "hidden"
1220 , Descriptor (dot classes.clipY)
1221 [ Prop "overflow-y" "hidden"
1223 , Descriptor (dot classes.widthContent)
1224 [ Prop "width" "auto"
1226 , Descriptor (dot classes.borderNone)
1227 [ Prop "border-width" "0"
1229 , Descriptor (dot classes.borderDashed)
1230 [ Prop "border-style" "dashed"
1232 , Descriptor (dot classes.borderDotted)
1233 [ Prop "border-style" "dotted"
1235 , Descriptor (dot classes.borderSolid)
1236 [ Prop "border-style" "solid"
1238 , Descriptor (dot classes.text)
1239 [ Prop "white-space" "pre"
1240 , Prop "display" "inline-block"
1242 , Descriptor (dot classes.inputText)
1243 -- chrome and safari have a minimum recognized line height for text input of 1.05
1244 -- If it's 1, it bumps up to something like 1.2
1245 [ Prop "line-height" "1.05"
1246 , Prop "background" "transparent"
1247 , Prop "text-align" "inherit"
1249 , Descriptor (dot classes.single)
1250 elDescription
1251 , Descriptor (dot classes.row)
1252 [ Prop "display" "flex"
1253 , Prop "flex-direction" "row"
1254 , Child (dot classes.any)
1255 [ Prop "flex-basis" "0%"
1256 , Descriptor (dot classes.widthExact)
1257 [ Prop "flex-basis" "auto"
1259 , Descriptor (dot classes.link)
1260 [ Prop "flex-basis" "auto"
1263 , Child (dot classes.heightFill)
1264 [ -- alignTop, centerY, and alignBottom need to be disabled
1265 Prop "align-self" "stretch !important"
1267 , Child (dot classes.heightFillPortion)
1268 [ -- alignTop, centerY, and alignBottom need to be disabled
1269 Prop "align-self" "stretch !important"
1272 -- TODO:: This may be necessary..should it move to classes.heightFIll?
1273 -- , Child (dot classes.heightFillBetween)
1274 -- [ Prop "align-self" "stretch"
1275 -- , Descriptor ".aligned-vertically"
1276 -- [ Prop "height" "100%"
1277 -- ]
1278 -- ]
1279 , Child (dot classes.widthFill)
1280 [ Prop "flex-grow" "100000"
1282 , Child (dot classes.container)
1283 [ Prop "flex-grow" "0"
1284 , Prop "flex-basis" "auto"
1285 , Prop "align-self" "stretch"
1288 -- , Child "alignLeft:last-of-type.align-container-left"
1289 -- [ Prop "flex-grow" "1"
1290 -- ]
1291 -- alignRight -> <u>
1292 --centerX -> <s>
1293 , Child ("u:first-of-type." ++ classes.alignContainerRight)
1294 [ Prop "flex-grow" "1"
1297 -- first center y
1298 , Child ("s:first-of-type." ++ classes.alignContainerCenterX)
1299 [ Prop "flex-grow" "1"
1300 , Child (dot classes.alignCenterX)
1301 [ Prop "margin-left" "auto !important"
1304 , Child ("s:last-of-type." ++ classes.alignContainerCenterX)
1305 [ Prop "flex-grow" "1"
1306 , Child (dot classes.alignCenterX)
1307 [ Prop "margin-right" "auto !important"
1311 -- lonley centerX
1312 , Child ("s:only-of-type." ++ classes.alignContainerCenterX)
1313 [ Prop "flex-grow" "1"
1314 , Child (dot classes.alignCenterY)
1315 [ Prop "margin-top" "auto !important"
1316 , Prop "margin-bottom" "auto !important"
1320 -- alignBottom's after a centerX should not grow
1321 , Child
1322 ("s:last-of-type." ++ classes.alignContainerCenterX ++ " ~ u")
1323 [ Prop "flex-grow" "0"
1326 -- centerX's after an alignBottom should be ignored
1327 , Child ("u:first-of-type." ++ classes.alignContainerRight ++ " ~ s." ++ classes.alignContainerCenterX)
1328 -- Bottom alignment always overrides center alignment
1329 [ Prop "flex-grow" "0"
1331 , describeAlignment <|
1332 \alignment ->
1333 case alignment of
1334 Top ->
1335 ( [ Prop "align-items" "flex-start" ]
1336 , [ Prop "align-self" "flex-start"
1340 Bottom ->
1341 ( [ Prop "align-items" "flex-end" ]
1342 , [ Prop "align-self" "flex-end"
1346 Right ->
1347 ( [ Prop "justify-content" "flex-end"
1349 , []
1352 Left ->
1353 ( [ Prop "justify-content" "flex-start"
1355 , []
1358 CenterX ->
1359 ( [ Prop "justify-content" "center"
1361 , []
1364 CenterY ->
1365 ( [ Prop "align-items" "center" ]
1366 , [ Prop "align-self" "center"
1370 -- Must be below the alignment rules or else it interferes
1371 , Descriptor (dot classes.spaceEvenly)
1372 [ Prop "justify-content" "space-between"
1374 , Descriptor (dot classes.inputLabel)
1375 [ Prop "align-items" "baseline"
1378 , Descriptor (dot classes.column)
1379 [ Prop "display" "flex"
1380 , Prop "flex-direction" "column"
1381 , Child (dot classes.any)
1382 -- *Note* - While rows have flex-basis 0%,
1383 -- which allows for the children of a row to default to their content size
1384 -- This apparently is a different story for columns.
1385 -- Safari has an issue if this is flex-basis: 0%, as it goes entirely to 0,
1386 -- instead of the expected content size.
1387 -- So we add `min-height: min-content`, which isn't supported by IE, but works for all other browsers!
1388 -- Separately, 0% is different than 0px, but only for columns
1389 -- In columns, 0% will actually be calculated as `auto` for columns
1390 -- So, 0px is the one we want.
1391 [ Prop "flex-basis" "0px"
1392 , Prop "min-height" "min-content"
1393 , Descriptor (dot classes.heightExact)
1394 [ Prop "flex-basis" "auto"
1397 , Child (dot classes.heightFill)
1398 [ Prop "flex-grow" "100000"
1400 , Child (dot classes.widthFill)
1401 [ -- alignLeft, alignRight, centerX need to be disabled
1402 -- Prop "align-self" "stretch !important"
1403 Prop "width" "100%"
1405 , Child (dot classes.widthFillPortion)
1406 [ -- alignLeft, alignRight, centerX need to be disabled
1407 -- Prop "align-self" "stretch !important"
1408 Prop "width" "100%"
1411 -- TODO:: This might be necessary, maybe it should move to widthFill?
1412 -- , Child (dot classes.widthFill)
1413 -- [ Prop "align-self" "stretch"
1414 -- , Descriptor (dot classes.alignedHorizontally)
1415 -- [ Prop "width" "100%"
1416 -- ]
1417 -- ]
1418 , Child (dot classes.widthContent)
1419 [ Prop "align-self" "flex-start"
1422 -- , Child "alignTop:last-of-type.align-container-top"
1423 -- [ Prop "flex-grow" "1"
1424 -- ]
1425 , Child ("u:first-of-type." ++ classes.alignContainerBottom)
1426 [ Prop "flex-grow" "1"
1429 -- centerY -> <s>
1430 -- alignBottom -> <u>
1431 -- first center y
1432 , Child ("s:first-of-type." ++ classes.alignContainerCenterY)
1433 [ Prop "flex-grow" "1"
1434 , Child (dot classes.alignCenterY)
1435 [ Prop "margin-top" "auto !important"
1436 , Prop "margin-bottom" "0 !important"
1439 , Child ("s:last-of-type." ++ classes.alignContainerCenterY)
1440 [ Prop "flex-grow" "1"
1441 , Child (dot classes.alignCenterY)
1442 [ Prop "margin-bottom" "auto !important"
1443 , Prop "margin-top" "0 !important"
1447 -- lonley centerY
1448 , Child ("s:only-of-type." ++ classes.alignContainerCenterY)
1449 [ Prop "flex-grow" "1"
1450 , Child (dot classes.alignCenterY)
1451 [ Prop "margin-top" "auto !important"
1452 , Prop "margin-bottom" "auto !important"
1456 -- alignBottom's after a centerY should not grow
1457 , Child ("s:last-of-type." ++ classes.alignContainerCenterY ++ " ~ u")
1458 [ Prop "flex-grow" "0"
1461 -- centerY's after an alignBottom should be ignored
1462 , Child ("u:first-of-type." ++ classes.alignContainerBottom ++ " ~ s." ++ classes.alignContainerCenterY)
1463 -- Bottom alignment always overrides center alignment
1464 [ Prop "flex-grow" "0"
1466 , describeAlignment <|
1467 \alignment ->
1468 case alignment of
1469 Top ->
1470 ( [ Prop "justify-content" "flex-start" ]
1471 , [ Prop "margin-bottom" "auto" ]
1474 Bottom ->
1475 ( [ Prop "justify-content" "flex-end" ]
1476 , [ Prop "margin-top" "auto" ]
1479 Right ->
1480 ( [ Prop "align-items" "flex-end" ]
1481 , [ Prop "align-self" "flex-end" ]
1484 Left ->
1485 ( [ Prop "align-items" "flex-start" ]
1486 , [ Prop "align-self" "flex-start" ]
1489 CenterX ->
1490 ( [ Prop "align-items" "center" ]
1491 , [ Prop "align-self" "center"
1495 CenterY ->
1496 ( [ Prop "justify-content" "center" ]
1497 , []
1499 , Child (dot classes.container)
1500 [ Prop "flex-grow" "0"
1501 , Prop "flex-basis" "auto"
1502 , Prop "width" "100%"
1503 , Prop "align-self" "stretch !important"
1505 , Descriptor (dot classes.spaceEvenly)
1506 [ Prop "justify-content" "space-between"
1509 , Descriptor (dot classes.grid)
1510 [ Prop "display" "-ms-grid"
1511 , Child ".gp"
1512 [ Child (dot classes.any)
1513 [ Prop "width" "100%"
1516 , Supports ( "display", "grid" )
1517 [ ( "display", "grid" )
1519 , gridAlignments <|
1520 \alignment ->
1521 case alignment of
1522 Top ->
1523 [ Prop "justify-content" "flex-start" ]
1525 Bottom ->
1526 [ Prop "justify-content" "flex-end" ]
1528 Right ->
1529 [ Prop "align-items" "flex-end" ]
1531 Left ->
1532 [ Prop "align-items" "flex-start" ]
1534 CenterX ->
1535 [ Prop "align-items" "center" ]
1537 CenterY ->
1538 [ Prop "justify-content" "center" ]
1540 , Descriptor (dot classes.page)
1541 [ Prop "display" "block"
1542 , Child (dot <| classes.any ++ ":first-child")
1543 [ Prop "margin" "0 !important"
1546 -- clear spacing of any subsequent element if an element is float-left
1547 , Child (dot <| classes.any ++ selfName (Self Left) ++ ":first-child + ." ++ classes.any)
1548 [ Prop "margin" "0 !important"
1550 , Child (dot <| classes.any ++ selfName (Self Right) ++ ":first-child + ." ++ classes.any)
1551 [ Prop "margin" "0 !important"
1553 , describeAlignment <|
1554 \alignment ->
1555 case alignment of
1556 Top ->
1557 ( []
1558 , []
1561 Bottom ->
1562 ( []
1563 , []
1566 Right ->
1567 ( []
1568 , [ Prop "float" "right"
1569 , Descriptor "::after"
1570 [ Prop "content" "\"\""
1571 , Prop "display" "table"
1572 , Prop "clear" "both"
1577 Left ->
1578 ( []
1579 , [ Prop "float" "left"
1580 , Descriptor "::after"
1581 [ Prop "content" "\"\""
1582 , Prop "display" "table"
1583 , Prop "clear" "both"
1588 CenterX ->
1589 ( []
1590 , []
1593 CenterY ->
1594 ( []
1595 , []
1598 , Descriptor (dot classes.inputMultiline)
1599 [ Prop "white-space" "pre-wrap !important"
1600 , Prop "height" "100%"
1601 , Prop "width" "100%"
1602 , Prop "background-color" "transparent"
1604 , Descriptor (dot classes.inputMultilineWrapper)
1605 -- Get this.
1606 -- This allows multiline input to anchor scrolling to the bottom of the node
1607 -- when in a scrolling viewport, and the user is adding content.
1608 -- however, it only works in chrome. In firefox, it prevents scrolling.
1609 --
1610 -- But how crazy is this solution?
1611 -- [ Prop "display" "flex"
1612 -- , Prop "flex-direction" "column-reverse"
1613 -- ]
1614 [ -- to increase specificity to beat another rule
1615 Descriptor (dot classes.single)
1616 [ Prop "flex-basis" "auto" ]
1618 , Descriptor (dot classes.inputMultilineParent)
1619 [ Prop "white-space" "pre-wrap !important"
1620 , Prop "cursor" "text"
1621 , Child (dot classes.inputMultilineFiller)
1622 [ Prop "white-space" "pre-wrap !important"
1623 , Prop "color" "transparent"
1626 , Descriptor (dot classes.paragraph)
1627 [ Prop "display" "block"
1628 , Prop "white-space" "normal"
1629 , Prop "overflow-wrap" "break-word"
1630 , Descriptor (dot classes.hasBehind)
1631 [ Prop "z-index" "0"
1632 , Child (dot classes.behind)
1633 [ Prop "z-index" "-1"
1636 , AllChildren (dot classes.text)
1637 [ Prop "display" "inline"
1638 , Prop "white-space" "normal"
1640 , AllChildren (dot classes.paragraph)
1641 [ Prop "display" "inline"
1642 , Descriptor "::after"
1643 [ Prop "content" "none"
1645 , Descriptor "::before"
1646 [ Prop "content" "none"
1649 , AllChildren (dot classes.single)
1650 [ Prop "display" "inline"
1651 , Prop "white-space" "normal"
1653 -- Inline block allows the width of the item to be set
1654 -- but DOES NOT like wrapping text in a standard, normal, sane way.
1655 -- We're sorta counting that if an exact width has been set,
1656 -- people aren't expecting proper text wrapping for this element
1657 , Descriptor (dot classes.widthExact)
1658 [ Prop "display" "inline-block"
1660 , Descriptor (dot classes.inFront)
1661 [ Prop "display" "flex"
1663 , Descriptor (dot classes.behind)
1664 [ Prop "display" "flex"
1666 , Descriptor (dot classes.above)
1667 [ Prop "display" "flex"
1669 , Descriptor (dot classes.below)
1670 [ Prop "display" "flex"
1672 , Descriptor (dot classes.onRight)
1673 [ Prop "display" "flex"
1675 , Descriptor (dot classes.onLeft)
1676 [ Prop "display" "flex"
1678 , Child (dot classes.text)
1679 [ Prop "display" "inline"
1680 , Prop "white-space" "normal"
1683 , Child (dot classes.row)
1684 [ Prop "display" "inline"
1686 , Child (dot classes.column)
1687 [ Prop "display" "inline-flex"
1689 , Child (dot classes.grid)
1690 [ Prop "display" "inline-grid"
1692 , describeAlignment <|
1693 \alignment ->
1694 case alignment of
1695 Top ->
1696 ( []
1697 , []
1700 Bottom ->
1701 ( []
1702 , []
1705 Right ->
1706 ( []
1707 , [ Prop "float" "right" ]
1710 Left ->
1711 ( []
1712 , [ Prop "float" "left" ]
1715 CenterX ->
1716 ( []
1717 , []
1720 CenterY ->
1721 ( []
1722 , []
1725 , Descriptor ".hidden"
1726 [ Prop "display" "none"
1728 , Descriptor (dot classes.textThin)
1729 [ Prop "font-weight" "100"
1731 , Descriptor (dot classes.textExtraLight)
1732 [ Prop "font-weight" "200"
1734 , Descriptor (dot classes.textLight)
1735 [ Prop "font-weight" "300"
1737 , Descriptor (dot classes.textNormalWeight)
1738 [ Prop "font-weight" "400"
1740 , Descriptor (dot classes.textMedium)
1741 [ Prop "font-weight" "500"
1743 , Descriptor (dot classes.textSemiBold)
1744 [ Prop "font-weight" "600"
1746 , Descriptor (dot classes.bold)
1747 [ Prop "font-weight" "700"
1749 , Descriptor (dot classes.textExtraBold)
1750 [ Prop "font-weight" "800"
1752 , Descriptor (dot classes.textHeavy)
1753 [ Prop "font-weight" "900"
1755 , Descriptor (dot classes.italic)
1756 [ Prop "font-style" "italic"
1758 , Descriptor (dot classes.strike)
1759 [ Prop "text-decoration" "line-through"
1761 , Descriptor (dot classes.underline)
1762 [ Prop "text-decoration" "underline"
1763 , Prop "text-decoration-skip-ink" "auto"
1764 , Prop "text-decoration-skip" "ink"
1766 , Descriptor (dot classes.underline ++ dot classes.strike)
1767 [ Prop "text-decoration" "line-through underline"
1768 , Prop "text-decoration-skip-ink" "auto"
1769 , Prop "text-decoration-skip" "ink"
1771 , Descriptor (dot classes.textUnitalicized)
1772 [ Prop "font-style" "normal"
1774 , Descriptor (dot classes.textJustify)
1775 [ Prop "text-align" "justify"
1777 , Descriptor (dot classes.textJustifyAll)
1778 [ Prop "text-align" "justify-all"
1780 , Descriptor (dot classes.textCenter)
1781 [ Prop "text-align" "center"
1783 , Descriptor (dot classes.textRight)
1784 [ Prop "text-align" "right"
1786 , Descriptor (dot classes.textLeft)
1787 [ Prop "text-align" "left"
1789 , Descriptor ".modal"
1790 [ Prop "position" "fixed"
1791 , Prop "left" "0"
1792 , Prop "top" "0"
1793 , Prop "width" "100%"
1794 , Prop "height" "100%"
1795 , Prop "pointer-events" "none"