components
1 week ago
styles
1 week ago
edit.js
1 week ago
index.js
1 week ago
index.php
1 week ago
tb_generatecss.js
1 week ago
tb_styling.js
1 week ago
tb_styling.js
159 lines
| 1 | /** |
| 2 | * Set inline styles. |
| 3 | * @param {object} props - The block object. |
| 4 | * @return {object} The inline background type CSS. |
| 5 | */ |
| 6 | |
| 7 | import tb_generateCSS from "./tb_generateCSS" |
| 8 | |
| 9 | function tb_styling( props, id ) { |
| 10 | |
| 11 | const { |
| 12 | boxbgColor, |
| 13 | titleColor, |
| 14 | primaryColor, |
| 15 | secondaryColor, |
| 16 | postmetaColor, |
| 17 | postexcerptColor, |
| 18 | postctaColor, |
| 19 | socialShareColor, |
| 20 | readmoreBgColor, |
| 21 | timelineBgColor, |
| 22 | timelineFgColor, |
| 23 | titlefontSize, |
| 24 | postmetafontSize, |
| 25 | postexcerptfontSize, |
| 26 | postctafontSize, |
| 27 | socialSharefontSize, |
| 28 | belowTitleSpace, |
| 29 | belowImageSpace, |
| 30 | belowexerptSpace, |
| 31 | belowctaSpace, |
| 32 | innerSpace, |
| 33 | titleFontFamily, |
| 34 | titleFontWeight, |
| 35 | titleFontSubset, |
| 36 | excerptFontFamily, |
| 37 | excerptFontWeight, |
| 38 | excerptFontSubset, |
| 39 | metaFontFamily, |
| 40 | metaFontSubset, |
| 41 | metafontWeight, |
| 42 | ctaFontFamily, |
| 43 | ctaFontSubset, |
| 44 | ctafontWeight, |
| 45 | } = props.attributes |
| 46 | |
| 47 | var selectors = { |
| 48 | " .tb-content-wrap" : { |
| 49 | "padding-left" : innerSpace + "px", |
| 50 | "padding-right" : innerSpace + "px", |
| 51 | "margin-bottom" : innerSpace + "px", |
| 52 | }, |
| 53 | " .tb-image": { |
| 54 | "padding-bottom" : belowImageSpace + "px", |
| 55 | }, |
| 56 | " div.tb-blogpost-title": { |
| 57 | "padding-bottom" : belowTitleSpace + "px", |
| 58 | }, |
| 59 | " .tb-blogpost-excerpt a.tb-link, .text-only a.tb-link, div.text-only ": { |
| 60 | "font-size": postctafontSize + "px", |
| 61 | "font-family": ctaFontFamily, |
| 62 | "font-weight": ctafontWeight, |
| 63 | "color": postctaColor + "!important", |
| 64 | "margin-bottom" : belowctaSpace + "px", |
| 65 | }, |
| 66 | " .tb-blogpost-excerpt a.tb-button, .tb-button-view a.tb-button ": { |
| 67 | "border-radius": '5px', |
| 68 | "padding": '10px 20px', |
| 69 | "background-color": readmoreBgColor + "!important", |
| 70 | "font-size": postctafontSize + "px", |
| 71 | "font-family": ctaFontFamily, |
| 72 | "font-weight": ctafontWeight, |
| 73 | "color": postctaColor + "!important", |
| 74 | "margin-bottom" : belowctaSpace + "px", |
| 75 | }, |
| 76 | " .tb-button-view ": { |
| 77 | "margin-bottom" : belowctaSpace + "px", |
| 78 | }, |
| 79 | ".tb-timeline-template1 .tb-timeline-item .tb-timeline-content:before" : { |
| 80 | "border-left-color" : boxbgColor + "!important", |
| 81 | }, |
| 82 | ".tb-timeline-template1 .tb-timeline-item:nth-child(even) .tb-timeline-content:before" : { |
| 83 | "border-right-color" : boxbgColor + "!important", |
| 84 | }, |
| 85 | ".tb-timeline-template1:before " : { |
| 86 | "background" : timelineBgColor + " !important", |
| 87 | }, |
| 88 | " .tb-title .tb-layout-1" : { |
| 89 | "background" : boxbgColor + "!important", |
| 90 | }, |
| 91 | " .tb-is-list .tb-category-link-wraper div.category-link a": { |
| 92 | "background": primaryColor + "!important", |
| 93 | "color": secondaryColor + "!important", |
| 94 | }, |
| 95 | " .tb-items-2 .tb-category-link-wraper": { |
| 96 | "background": secondaryColor + "!important", |
| 97 | }, |
| 98 | " .tb-items-2 .tb-blogpost-bototm-wrap": { |
| 99 | "border-top": "2px solid" + secondaryColor + "!important", |
| 100 | "border-bottom": "2px solid" + secondaryColor + "!important", |
| 101 | }, |
| 102 | " .tb-blogpost-excerpt p": { |
| 103 | "font-family": excerptFontFamily, |
| 104 | "font-weight": excerptFontWeight, |
| 105 | "color" : postexcerptColor + "!important", |
| 106 | "font-size" : postexcerptfontSize + "px", |
| 107 | "margin-bottom" : belowexerptSpace + "px", |
| 108 | }, |
| 109 | " .tb-blogpost-title a": { |
| 110 | "font-family": titleFontFamily, |
| 111 | "font-weight": titleFontWeight, |
| 112 | "color" : titleColor + " !important", |
| 113 | "font-size" : titlefontSize + "px", |
| 114 | }, |
| 115 | " .tb-blogpost-author a, .tb-timeline-post-tags a, .tb-timeline-category-link a, .mdate span, .post-comments": { |
| 116 | "font-family": metaFontFamily + " !important", |
| 117 | "font-weight": metafontWeight + " !important", |
| 118 | "color" : postmetaColor + " !important", |
| 119 | "font-size" : postmetafontSize + "px" + " !important", |
| 120 | //"text-transform" : "uppercase", |
| 121 | }, |
| 122 | " .mdate i, .post-comments i, .post-author i": { |
| 123 | "font-weight": metafontWeight + " !important", |
| 124 | "color" : postmetaColor + " !important", |
| 125 | "font-size" : postmetafontSize + "px" + " !important", |
| 126 | }, |
| 127 | " .tb-blogpost-byline div": { |
| 128 | "font-family": metaFontFamily, |
| 129 | "font-weight": metafontWeight, |
| 130 | "color" : postmetaColor + "!important", |
| 131 | "font-size" : postmetafontSize + "px", |
| 132 | }, |
| 133 | " .tb-social-wrap .social-share-data a": { |
| 134 | "padding" : '0px 5px', |
| 135 | "display" : "table-cell", |
| 136 | "vertical-align" : "middle", |
| 137 | "color" : socialShareColor + " !important", |
| 138 | "font-size" : socialSharefontSize + "px", |
| 139 | }, |
| 140 | ".tb-timeline-template2 .tb-timeline-item .timeline-icon, .tb-timeline-template2:before " : { |
| 141 | "background" : timelineBgColor + " !important", |
| 142 | }, |
| 143 | " .timeline-icon path" : { |
| 144 | "fill" : timelineFgColor + "!important", |
| 145 | }, |
| 146 | " .tb-svg-icon" : { |
| 147 | "fill" : timelineFgColor + "!important", |
| 148 | }, |
| 149 | } |
| 150 | |
| 151 | var tb_styling_css = "" |
| 152 | |
| 153 | tb_styling_css = tb_generateCSS( selectors, `#${id}-${ props.clientId }` ) |
| 154 | |
| 155 | return tb_styling_css |
| 156 | } |
| 157 | |
| 158 | export default tb_styling |
| 159 |