/ittf/meta/folder/styles.css.ittf (primary)
1 css 2 $include options-init 3 $ 4 opt.prettyprint = true; 5 opt.l_mc_top = 8; 6 opt.c_bg_tn_bar = '#fafafa'; 7 opt.c_bg_tn_main = '#ededed'; 8 $include options-analize 9 css/layouts/meta_main( &opt) 10 < body 11 background-color ${opt.c_bg_0} 12 color ${opt.c_0} 13 font-size 16px 14 font-family roboto, verdana, tahoma, arial, sans-serif 15 line-height 1.8em 16 < h1 17 font-size 2rem 18 padding 1rem 0 0.5rem 0 19 < h2 20 font-size 1.5rem 21 padding 0.6rem 0 0.3rem 0 22 . clear 23 clear both 24 $include css/tn 25 $include css/fsitems 26 $include css/mc 27 $include css/sidebar-left 28 $include css/breadcrumbs
/ittf/meta/t/options-init.ittf
1 $group 2 $ 3 var opt = { 4 resetMarginsPaddingsBorders: true, 5 resetDisplayBlock: false, 6 resetOlUl: true, 7 resetBlockquote: false, 8 resetTable: false, 9 resetLinks: true, 10 prettyprint: false, 11 debug_css: false, 12 c_0: '#000', 13 c_bg_0: '#fff', 14 fa_1: false, 15 sidebar_1: false, 16 sb_1_min_w: 0, 17 logo_w: 70, 18 logo_h: 35, 19 };
/ittf/meta/t/options-analize.ittf
1 $group 2 $ 3 if (opt.sidebar_1) { 4 opt.fa_1 = true; 5 }
/ittf/meta/folder/t/css/tn.css.ittf
1 $group 2 # tn-input-toggle 3 display none 4 . tn-bar 5 - We ensure that the navigation stays at the top of the browser window by giving it a position: fixed property. 6 - Setting its width to min-width: 100% will ensure that the navigation spans the full width of the browser window. 7 background-color ${opt.c_bg_tn_bar} 8 position fixed 9 min-width 100% 10 . tn-main 11 - flex for logo and menu UL 12 display flex 13 align-items center 14 - space-between evenly distributes the child elements within the parent flex container 15 justify-content space-between 16 padding 1rem 1rem 17 . logo 18 background-color ${opt.c_bg_tn_bar} 19 < img 20 width 7rem 21 height 3rem 22 & :hover 23 background-color ${opt.c_tn_bg_logo_hover} 24 . tn-breadcrumbs 25 margin 5px 26 background-color $opt.c_bg_tn_main}
/ittf/meta/folder/t/css/fsitems.css.ittf
1 $group 2 . breadcrumbs-panel 3 display flex 4 flex-direction row 5 padding 0 0.5rem 0.5rem 0.5rem 6 . breadcrumb-item 7 padding 0.5rem 1rem 8 font-size 1.5rem 9 . fsitem 10 < img 11 position relative 12 top 3px 13 < a 14 padding-left 0.5rem
/ittf/meta/folder/t/css/mc.css.ittf
1 $group 2 # mc-wrapper 3 position fixed 4 width 100% 5 height 100% 6 $if opt.debug_css 7 border 1px solid blue 8 . mc-wrapper-layout 9 top ${opt.l_mc_top}rem 10 height calc(100% - ${opt.l_mc_top + 10}rem) 11 . mc-frame 12 display flex 13 flex-direction row 14 height 100% 15 $if opt.debug_css 16 border 1px solid red 17 . mc-content 18 padding 20px 20px 19 height calc(100% - 10rem) 20 overflow auto
/ittf/meta/t/css/sidebar-left.css.ittf
1 $group 2 . mc-sidebar-left 3 padding 20px 30px 4 $$ still i can't find why i need to subtract these 5 height calc(100% - 10rem) 6 min-width 20rem 7 overflow auto 8 < ul 9 display flex 10 justify-content space-between 11 flex-direction column 12 list-style-type none 13 transition all 1s ease 14 < li 15 border-bottom 1px solid ${opt.c_0} 16 color ${opt.c_0} 17 display block 18 font-size 0.8rem 19 $$ padding 0.1rem 0 0.1rem 1rem 20 padding 0 21 < a 22 color ${opt.c_0} 23 < li:last-child 24 border-bottom 0 25 . mc-sidebar-left-title 26 display none
/ittf/meta/t/css/breadcrumbs.css.ittf
1 $group 2 . breadcrumb 3 # centering 4 display inline-block 5 box-shadow 0 0 15px 1px rgba(0, 0, 0, 0.35) 6 overflow hidden 7 border-radius 5px 8 # Lets add the numbers for each link using CSS counters. flag is the name of the counter. to be defined using counter-reset in the parent element of the links 9 counter-reset flag 10 . breadcrumb a 11 text-decoration none 12 outline none 13 display block 14 float left 15 font-size 12px 16 line-height 36px 17 color white 18 # need more margin on the left of links to accomodate the numbers 19 padding 0 10px 0 60px 20 background #666 21 background linear-gradient(#666, #333) 22 position relative 23 # since the first link does not have a triangle before it we can reduce the left padding to make it look consistent with other links 24 . breadcrumb a:first-child 25 padding-left 46px 26 border-radius 5px 0 0 5px 27 # to match with the parent's radius 28 . breadcrumb a:first-child:before 29 left 14px 30 . breadcrumb a:last-child 31 border-radius 0 5px 5px 0 32 # this was to prevent glitches on hover 33 padding-right 20px 34 # hover/active styles 35 . breadcrumb a.active 36 + .breadcrumb a:hover 37 background #333 38 background linear-gradient(#333, #000) 39 . breadcrumb a.active:after 40 + .breadcrumb a:hover:after 41 background #333 42 background linear-gradient(135deg, #333, #000) 43 # adding the arrows for the breadcrumbs using rotated pseudo elements 44 . breadcrumb a:after 45 content '' 46 position absolute 47 top 0 48 right -18px 49 # half of square's length 50 # same dimension as the line-height of .breadcrumb a 51 width 36px 52 height 36px 53 # 54 # as you see the rotated square takes a larger height. which makes it tough to position it properly. So we are going to scale it down so that the diagonals become equal to the line-height of the link. We scale it to 70.7% because if square's: 55 # length = 1; diagonal = (1^2 + 1^2)^0.5 = 1.414 (pythagoras theorem) 56 # if diagonal required = 1; length = 1/1.414 = 0.707 57 transform scale(0.707) rotate(45deg) 58 # we need to prevent the arrows from getting buried under the next link 59 z-index 1 60 # background same as links but the gradient will be rotated to compensate with the transform applied 61 background #666 62 background linear-gradient(135deg, #666, #333) 63 # stylish arrow design using box shadow 64 box-shadow 2px -2px 0 2px rgba(0, 0, 0, 0.4), 3px -3px 0 2px rgba(255, 255, 255, 0.1) 65 # 66 # 67 # 5px - for rounded arrows and 68 # 50px - to prevent hover glitches on the border created using shadows 69 border-radius 0 5px 0 50px 70 # we dont need an arrow after the last link 71 . breadcrumb a:last-child:after 72 content none 73 # we will use the :before element to show numbers 74 . breadcrumb a:before 75 content counter(flag) 76 counter-increment flag 77 # some styles now 78 border-radius 100% 79 width 20px 80 height 20px 81 line-height 20px 82 margin 8px 0 83 position absolute 84 top 0 85 left 30px 86 background #444 87 background linear-gradient(#444, #222) 88 font-weight bold 89 . flat a 90 + .flat a:after 91 background white 92 color black 93 transition all 0.5s 94 . flat a:before 95 background white 96 box-shadow 0 0 0 1px #ccc 97 . flat a:hover 98 + .flat a.active 99 + .flat a:hover:after 100 + .flat a.active:after 101 background #9EEB62