/ittf/css/main-react.css.ittf (primary)
1 css 2 $ 3 var count = [0,1,2,3,4,5]; 4 var sizes = ['s','m','l','x','xl','xxl']; 5 var scale = ['0.6','0.8','1','1.3','1.6','2']; 6 var scaleRad = ['3','6','12','18','30','48']; 7 var scaleWidth = [15,25,35,65,75,85]; 8 var scale50 = [50,100,150,200]; 9 $include ./wz-react/root 10 < body 11 margin 0 12 min-height 100vh 13 display grid 14 grid-gap 1px 15 grid-template-areas 16 @ header 17 @ main 18 @ footer 19 grid-template-rows 56.766px 1fr 50px 20 grid-template-columns 1fr 21 < header 22 grid-area header 23 background-color #eeffff 24 < main 25 grid-area main 26 background-color #ffeeff 27 < footer 28 grid-area footer 29 background-color #ffffee 30 $include ./wz-react/colors 31 $include ./wz-react/fonts 32 $include ./wz-react/layout 33 $include ./margin-padding 34 $include ./borders 35 $include ./layout 36 $include ./links 37 $include ./toolbars 38 . header-m-item 39 margin ${scale[0]}em 40 padding ${scale[0]}em 41 . header-m-item-inverse 42 margin ${scale[0]}em 43 padding ${scale[0]}em 44 $* 45 var ca = 'm-s p-s color-header font-l font-w-xxl'; 46 var ca_inverse = 'm-s p-s color-header-inverse bg-color-header-inverse font-l font-w-xxl'; 47 *$
/ittf/css/t/wz-react/root.css.ittf
1 $group 2 - header 3 - main 4 - main-content 5 - footer 6 < :root 7 --color-tn-bg #313131 8 --color-input-bg #dedede 9 --color-input-border #767676 10 --color-shadow-inset #a0a0a0 11 --color-text-primary #000000 12 --color-success #2ea44f 13 --color-error #ff0000 14 --color-warning #dbab09
/ittf/css/t/wz-react/colors.css.ittf
1 $group 2 . color-header 3 color #000000 4 . bg-color-header 5 background-color #ffffff 6 . color-header-inverse 7 color #000000 8 . bg-color-header-inverse 9 background-color #dddddd 10 . color-main 11 color #efefef 12 . bg-color-main 13 background-color #494949 14 . color-main-content 15 color #efefef 16 . bg-color-main-content 17 background-color #515151 18 . color-black 19 color #000000 20 . bg-white 21 background-color #000000 22 . color-white 23 color #ffffff 24 . bg-black 25 background-color #000000 26 . color-success 27 color var(--color-success) 28 . bg-success 29 background-color var(--color-success) 30 . color-error 31 color var(--color-error) 32 . bg-error 33 background-color var(--color-error) 34 . color-warning 35 color var(--color-warning) 36 . bg-warning 37 background-color var(--color-warning) 38 . bg-filter 39 background-color #eeeeff 40 . bg-list 41 background-color #eeffee
/ittf/css/t/wz-react/fonts.css.ittf
1 $group 2 . font-w-s 3 font-weight 300 4 . font-w-x 5 font-weight 500 6 . font-w-xxl 7 font-weight 700
/ittf/css/t/wz-react/layout.css.ittf
1 $group 2 # root 3 height 100% 4 # content-page 5 height 100% 6 display grid 7 grid-gap 1px 8 grid-template-areas 9 @ content-bar content-bar content-bar 10 @ content-left content-main content-right 11 grid-template-rows 30px 1fr 12 grid-template-columns 700px 350px 1fr 13 # content-page .content-bar 14 grid-area content-bar 15 background-color cyan 16 # content-page .content-left 17 grid-area content-left 18 background-color beige 19 # content-page .content-main 20 grid-area content-main 21 background-color lightgreen 22 # content-page .content-right 23 grid-area content-right 24 background-color pink 25 # content-page .content-left 26 + .content-main 27 + .content-right 28 padding 0.5em
/ittf/css/t/margin-padding.css.ittf
1 $group 2 $foreach c in scale50 3 . m-${c} 4 margin ${c}px 5 . m-l-${c} 6 margin-left ${c}px 7 . m-r-${c} 8 margin-right ${c}px 9 . m-t-${c} 10 margin-top ${c}px 11 . m-b-${c} 12 margin-bottom ${c}px 13 $foreach c in count 14 . font-${sizes[c]} 15 font-size ${scale[c]}em 16 . m-${sizes[c]} 17 margin ${scale[c]}em 18 . m-t-${sizes[c]} 19 margin-top ${scale[c]}em 20 . m-b-${sizes[c]} 21 margin-bottom ${scale[c]}em 22 . m-l-${sizes[c]} 23 margin-left ${scale[c]}em 24 . m-r-${sizes[c]} 25 margin-right ${scale[c]}em 26 . m-w-${sizes[c]} 27 margin-left ${scale[c]}em 28 margin-right ${scale[c]}em 29 . m-y-${sizes[c]} 30 margin-top ${scale[c]}em 31 margin-bottom ${scale[c]}em 32 . p-${sizes[c]} 33 padding ${scale[c]}em 34 . p-t-${sizes[c]} 35 padding-top ${scale[c]}em 36 . p-b-${sizes[c]} 37 padding-bottom ${scale[c]}em 38 . p-l-${sizes[c]} 39 padding-left ${scale[c]}em 40 . p-r-${sizes[c]} 41 padding-right ${scale[c]}em 42 . p-w-${sizes[c]} 43 padding-left ${scale[c]}em 44 padding-right ${scale[c]}em 45 . p-y-${sizes[c]} 46 padding-top ${scale[c]}em 47 padding-bottom ${scale[c]}em
/ittf/css/t/borders.css.ittf
1 $group 2 $ 3 var sides = ['', 'top', 'right', 'bottom', 'left']; 4 var pixels = ['1','2']; 5 $foreach s in sides 6 $foreach p in pixels 7 . border-${ s.length > 0 ? s + '-' + p : p }px 8 @ border${ s.length > 0 ? '-' + s : ''} solid ${p}px #434343
/ittf/css/t/layout.css.ittf
1 $group 2 . container-70 3 width 70% 4 margin 0 auto 5 . container-80 6 width 80% 7 margin 0 auto 8 . container-90 9 width 90% 10 margin 0 auto 11 . flex-row 12 display flex 13 flex-direction row 14 . flex-column 15 display flex 16 flex-direction column 17 . justify-content-start 18 justify-content start 19 . justify-content-center 20 justify-content center 21 . justify-content-space-between 22 justify-content space-between 23 . space-between 24 justify-content space-between 25 . align-items-start 26 align-items start 27 . align-items-center 28 align-items center 29 . grid 30 display grid 31 . width-100 32 width 100% 33 . width-50 34 width 50% 35 . height-100 36 height 100% 37 . height-50 38 height 50%
/ittf/css/t/links.css.ittf
1 $group 2 < a 3 text-decoration none
/ittf/css/t/toolbars.css.ittf
1 $group 2 . tlb-button 3 line-height 20px 4 display inline-block 5 padding 0 15px 6 cursor pointer 7 color #000000 8 background #ffffff 9 font-family 'Roboto, Arial, Helvetica Neue, sans-serif' 10 transition all 0.4s ease 11 font-size 12px 12 font-weight 700 13 border 1px solid #ffffff 14 . tlb-button:hover 15 color #ff0000 16 . tlb-button--radius 17 border-radius 3px 18 . tlb-button--green 19 background #57b846 20 . tlb-button--green:hover 21 background #4dae3c