/ittf/css/main.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.4','0.6','1','1.3','1.6','3']; 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 < html 10 font-family -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif 11 font-size 16px 12 < body 13 margin 0 14 < a 15 text-decoration none 16 color #ffffff 17 $include colors 18 $include layout 19 . fixed 20 position fixed 21 . relative 22 position relative 23 . absolute 24 position absolute 25 . flex-row 26 display flex 27 flex-direction row 28 . flex-column 29 display flex 30 flex-direction column 31 . justify-content-start 32 justify-content start 33 . justify-content-center 34 justify-content center 35 . justify-content-space-between 36 justify-content space-between 37 . space-between 38 justify-content space-between 39 . align-items-start 40 align-items start 41 . align-items-center 42 align-items center 43 . width-full 44 width 100%!important 45 . width-half 46 width 50%!important 47 . text-align-center 48 text-align center 49 . text-align-left 50 text-align left 51 . text-align-right 52 text-align right 53 . text-align-justify 54 text-align justify 55 . m-0-auto 56 margin 0 auto 57 $foreach c in scale50 58 . m-${c} 59 margin ${c}px 60 . m-l-${c} 61 margin-left ${c}px 62 . m-r-${c} 63 margin-right ${c}px 64 . m-t-${c} 65 margin-top ${c}px 66 . m-b-${c} 67 margin-bottom ${c}px 68 $foreach c in count 69 . font-${sizes[c]} 70 font-size ${scale[c]}em 71 . m-${sizes[c]} 72 margin ${scale[c]}em 73 . m-t-${sizes[c]} 74 margin-top ${scale[c]}em 75 . m-b-${sizes[c]} 76 margin-bottom ${scale[c]}em 77 . m-l-${sizes[c]} 78 margin-left ${scale[c]}em 79 . m-r-${sizes[c]} 80 margin-right ${scale[c]}em 81 . m-w-${sizes[c]} 82 margin-left ${scale[c]}em 83 margin-right ${scale[c]}em 84 . m-y-${sizes[c]} 85 margin-top ${scale[c]}em 86 margin-bottom ${scale[c]}em 87 . p-${sizes[c]} 88 padding ${scale[c]}em 89 . p-t-${sizes[c]} 90 padding-top ${scale[c]}em 91 . p-b-${sizes[c]} 92 padding-bottom ${scale[c]}em 93 . p-l-${sizes[c]} 94 padding-left ${scale[c]}em 95 . p-r-${sizes[c]} 96 padding-right ${scale[c]}em 97 . p-w-${sizes[c]} 98 padding-left ${scale[c]}em 99 padding-right ${scale[c]}em 100 . p-y-${sizes[c]} 101 padding-top ${scale[c]}em 102 padding-bottom ${scale[c]}em 103 . border-${sizes[c]} 104 border ${c+1}px solid #323232 105 . border-t-${sizes[c]} 106 border-top ${c+1}px solid #323232 107 . border-b-${sizes[c]} 108 border-bottom ${c+1}px solid #323232 109 . border-l-${sizes[c]} 110 border-left ${c+1}px solid #323232 111 . border-r-${sizes[c]} 112 border-right ${c+1}px solid #323232 113 . radius-${sizes[c]} 114 border-radius ${scaleRad[c]}px 115 . width-${sizes[c]} 116 width ${scaleWidth[c]}%!important 117 . font-w-s 118 font-weight 300 119 . font-w-x 120 font-weight 500 121 . font-w-xxl 122 font-weight 700 123 $include form 124 $include icons
/ittf/css/t/colors.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 15 . color-header 16 color #efefef 17 . bg-color-header 18 background-color #434343 19 . color-header-inverse 20 color #ff4790 21 . bg-color-header-inverse 22 background-color #737373 23 . color-main 24 color #efefef 25 . bg-color-main 26 background-color #494949 27 . color-main-content 28 color #efefef 29 . bg-color-main-content 30 background-color #515151 31 . color-black 32 color #000000 33 . bg-white 34 background-color #000000 35 . color-white 36 color #ffffff 37 . bg-black 38 background-color #000000 39 . color-success 40 color var(--color-success) 41 . bg-success 42 background-color var(--color-success) 43 . color-error 44 color var(--color-error) 45 . bg-error 46 background-color var(--color-error) 47 . color-warning 48 color var(--color-warning) 49 . bg-warning 50 background-color var(--color-warning) 51 . bg-filter 52 background-color #eeeeff 53 . bg-list 54 background-color #eeffee
/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/form.css.ittf
1 $group 2 . form-control 3 background-color var(--color-input-bg) 4 background-position right 8px center 5 background-repeat no-repeat 6 border 1px solid var(--color-input-border) 7 border-radius 6px 8 box-shadow var(--color-shadow-inset) 9 color var(--color-text-primary) 10 font-size 14px 11 line-height 20px 12 outline none 13 padding 5px 12px 14 vertical-align middle 15 # ========================================================================== 16 # Form 17 # ========================================================================== 18 . form-card 19 padding 30px 20 border 1px solid #ebebeb 21 . form-title 22 font-size 30px 23 font-weight 700 24 margin-bottom 20px 25 # ========================================================================== 26 # Control 27 # ========================================================================== 28 . control-group 29 width 100% 30 padding 10px 31 margin-bottom 5px 32 . single-control 33 width 100% 34 margin-bottom 5px 35 . control-label 36 font-weight bold 37 margin-bottom 7px 38 . control-error 39 font-size 12px 40 color red 41 # ========================================================================== 42 # Label 43 # ========================================================================== 44 < label.required 45 position relative 46 < label.required:after 47 content '*' 48 margin-left 2px 49 color #b90000 50 # ========================================================================== 51 # GRID 52 # ========================================================================== 53 . grid-row-2 54 display grid 55 grid-template-columns 1fr 1fr 56 . grid-row-3 57 display grid 58 grid-template-columns 1fr 1fr 1fr 59 . input-group 60 position relative 61 width 100% 62 margin-bottom 1px 63 padding-bottom 4px 64 # ========================================================================== 65 # BUTTON 66 # ========================================================================== 67 . btn 68 line-height 40px 69 display inline-block 70 padding 0 25px 71 cursor pointer 72 color #fff 73 font-family "Roboto", "Arial", "Helvetica Neue", sans-serif 74 transition all 0.4s ease 75 font-size 14px 76 font-weight 700 77 . btn--radius 78 border-radius 3px 79 . btn--green 80 background #57b846 81 . btn--green:hover 82 background #4dae3c 83 # ========================================================================== 84 # Input 85 # ========================================================================== 86 < input 87 box-sizing border-box 88 border 1px solid #ebebeb 89 padding 14px 20px 90 border-radius 5px 91 font-size 14px 92 font-family inherit 93 < input:focus 94 border 1px solid #009e00 95 < input.error 96 border 1px solid #c70000 97 . input-icon 98 position absolute 99 font-size 18px 100 color #ccc 101 right 8px 102 top 50% 103 transform translateY(-50%) 104 cursor pointer 105 . input--style-2 106 color #666 107 font-size 16px 108 font-weight 500 109 . input--style-2::-webkit-input-placeholder 110 color #808080 111 opacity .4 112 . input--style-2:-moz-placeholder 113 color #808080 114 opacity .4 115 . input--style-2::-moz-placeholder 116 color #808080 117 opacity .4 118 . input--style-2:-ms-input-placeholder 119 color #808080 120 opacity .4 121 . input--style-2:-ms-input-placeholder 122 color #808080 123 opacity .4 124 # ========================================================================== 125 # Object condition 126 # ========================================================================== 127 . object-condition 128 border 1px solid #cbcbcb 129 padding 5px 130 background-color #efefef 131 . object-condition-checkbox 132 background-color #fff
/ittf/css/t/icons.css.ittf
1 $group 2 . octicon 3 fill currentColor 4 display inline-block 5 overflow visible!important 6 vertical-align text-bottom