├── .gitattributes ├── .gitignore ├── assets ├── blocks.css ├── blocks.css.map ├── blocks.es6 ├── blocks.min.js ├── blocks.scss ├── caxton-utils.js ├── caxton-utils.min.js ├── caxton.es6 ├── caxton.min.js ├── compat │ └── 2019.css ├── es6 │ ├── multiSelectComponent.es6 │ └── react-sortable-list.es6 ├── flexslider.css ├── flexslider.css.map ├── flexslider.min.js ├── flexslider.scss ├── font-awesome.css ├── font-awesome.css.map ├── font-awesome.scss ├── fonts │ ├── flexslider-icon.eot │ ├── flexslider-icon.svg │ ├── flexslider-icon.ttf │ └── flexslider-icon.woff ├── front.css ├── front.css.map ├── front.scss ├── icons-data.js ├── icons-svg.js ├── ie.css ├── ie.css.map ├── ie.scss ├── layout-blocks │ ├── alt-layouts.json │ ├── fields.es6 │ ├── flex.es6 │ ├── grid.es6 │ ├── layout-blocks.es6 │ ├── layouts.json │ ├── section.es6 │ └── tpl.es6 └── scss │ ├── _block-styles.scss │ ├── _caxton-grid.scss │ ├── _caxton-section-grid.scss │ ├── _ordered-select-control.scss │ ├── _tachyons.scss │ ├── _utils.scss │ ├── tachyons-vars.css │ ├── tachyons-vars.css.map │ ├── tachyons-vars.scss │ └── tachyons │ ├── _aspect-ratios.scss │ ├── _background-position.scss │ ├── _background-size.scss │ ├── _border-colors.scss │ ├── _border-radius.scss │ ├── _border-style.scss │ ├── _border-widths.scss │ ├── _borders.scss │ ├── _box-shadow.scss │ ├── _box-sizing.scss │ ├── _clears.scss │ ├── _code.scss │ ├── _coordinates.scss │ ├── _debug-children.scss │ ├── _debug-grid.scss │ ├── _debug.scss │ ├── _debug_children.scss │ ├── _display.scss │ ├── _flexbox.scss │ ├── _floats.scss │ ├── _font-family.scss │ ├── _font-style.scss │ ├── _font-weight.scss │ ├── _forms.scss │ ├── _gradients.scss │ ├── _heights.scss │ ├── _hovers.scss │ ├── _images.scss │ ├── _letter-spacing.scss │ ├── _line-height.scss │ ├── _links.scss │ ├── _lists.scss │ ├── _max-widths.scss │ ├── _module-template.scss │ ├── _negative-margins.scss │ ├── _nested.scss │ ├── _normalize.scss │ ├── _opacity.scss │ ├── _outlines.scss │ ├── _overflow.scss │ ├── _position.scss │ ├── _rotations.scss │ ├── _skins-pseudo.scss │ ├── _skins.scss │ ├── _spacing.scss │ ├── _styles.scss │ ├── _tables.scss │ ├── _text-align.scss │ ├── _text-decoration.scss │ ├── _text-transform.scss │ ├── _type-scale.scss │ ├── _typography.scss │ ├── _utilities.scss │ ├── _variables.scss │ ├── _vertical-align.scss │ ├── _visibility.scss │ ├── _white-space.scss │ ├── _widths.scss │ ├── _word-break.scss │ └── _z-index.scss ├── build.node.js ├── caxton-main.php ├── caxton.php ├── inc ├── class-admin.php ├── class-public.php ├── tpl.caxton-admin-disable-blocks.php ├── tpl.caxton-admin-page.php └── vars.php ├── license.txt ├── package.json ├── readme.txt └── yarn.lock /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/* 2 | package-lock.json 3 | .DS_Store 4 | *-env 5 | build/ 6 | Icon? 7 | inc/wp-sdk/assets/img/woobuilder-blocks.png 8 | .wp-env.json -------------------------------------------------------------------------------- /assets/blocks.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["blocks.scss","scss/_ordered-select-control.scss","scss/_caxton-section-grid.scss"],"names":[],"mappings":"CAOA,qBACC,aACA,kBACA,gBACA,YAIA,uCACC,eAED,eACC,eAIF,4DAEC,mBAGD,wEACC,mBACA,iBACA,yCAGD,uEACC,gBAGD,mBACC,gBACA,8BACC,gBAGA,6HACC,mBACA,SACA,gBACA,wBACA,uBACA,oBACA,eACA,WACA,gBAIA,yFACC,yBAGD,oGACC,WACA,kBACA,SACA,OACA,YACA,eAEA,2GACC,YACA,gBAQJ,2EACC,cAIF,oCACC,uBAGD,8BACC,gBACA,yDACC,YAIF,0BACC,eACA,cACA,qBAIA,iaACC,cAKD,kJACC,UAxGa,OA0Hd,0JACC,WACA,WACA,gBACA,wKACC,aAIF,kHACC,WAED,kHACC,YAIF,uEACC,+BAGD,qGACC,+BACA,gBAIA,8CACC,sBACA,kBACA,gBACA,qBAEA,qEACC,aACA,eACA,iBACA,cAGD,2EACC,QAGD,4HAEC,kBACA,QACA,SACA,WACA,YAED,4DACC,UACA,QACA,MACA,YAGD,2DACC,YACA,aACA,iBACA,eACA,kBACA,uBACA,eAGD,gDACC,qBACA,SAGD,oDACC,WACA,8BACA,YACA,6BAMF,kCACC,UACA,sBACA,mBACA,YAED,yCACC,kBACA,WACA,0BACA,cACA,iBACA,qBACA,WACA,+CACC,UAMH,0CACC,WAGD,oFACC,kBACA,mBACA,kHACC,SAED,yHACC,kBACA,mBAIF,mEACC,iBAIA,oDACC,WACA,cACA,gBAED,2CACC,uCACA,mDAED,uBACC,yCACA,wCAGA,iFACC,uCACA,mDAED,0CACC,yCACA,wCAIF,2CACC,qBAGD,mCACC,eACA,gBAGD,kCACC,aACA,sBACA,mBACA,kCACA,wBACA,mBACA,kBACA,qCACA,gBACA,sCACC,mBAED,qCACC,qBACA,SACA,cAKH,0BAEE,mCACC,gBCtTH,2BACC,kBAEA,wDACC,gBACA,oBACA,sBACA,cACA,wBAEA,4EACC,gBAMF,uFACC,YAGD,2DACC,sBACA,iBACA,cAIF,gCACC,aACA,sBACA,kBACA,gBACA,OACA,QACA,gBACA,UACA,cACA,YAEA,mEACC,gBAKF,6BACC,aACA,mBACA,gBACA,eACA,qBACA,iBACA,iCACC,YACA,iBAIF,+BACC,sBACA,yBACA,kBAEA,4DACC,mBACA,yBAGD,0CACC,kBACA,UACA,QACA,2BAKD,kEACC,gBAGD,kEACC,YACA,oBACA,oBACA,kBCrFD,oCACC,sBACA,aACA,iBACA,2DACC,aACA,uCACA,aACA,YACA,oBACA,sBACA,gBACA,eACA,YACA,iEACC,kBACA,UAED,0FACC,gBAED,kFACC,gBACA,iHACC,gBAIH,gEACC,WACA,kBACA,qBAEA,qGACC,WACA,2GACC,UAIH,mEACC,kBACA,uBACA,QACA,UACA,UACA,8EACC,WAGF,oEACC,YACA,UACA,eACA,eACA,2FACC,sCACA,aACA,YACA,oBAED,gGACC,qBACA,kCACA,wBACA,mBACA,SACA,gBACA,WAKH,8BACC,2BACA,0FAIC,aACA,aACA,kCALA,iGACC,aAKD,0HACC,SACA,UACA,eAGF,oDACC,2BACA,qFACC,SAKD,2GACC,qCADD,2GACC,qCADD,2GACC,qCADD,2GACC,qCADD,2GACC,qCAOH,8CACC,aACA,iBACA,iBACA,+EACC,aACA,iBACA,iBACA,aACA,SAED,8EACC,SACA,eAGF,qEACC,kBACA,SACA,QACA,yEACC,aAED,4EACC,kBAGF,sHACC,aAKF,sBACC,wBACA,oBACA,mBACA,4BACA,6CACA,0BACA,2EAEC,yBACA,6CAED,2DACC,2BACA,wEACC,SAED,wEACC,YACA,sBACA,qLACC,YACA,sBAMJ,0HACC,SACA,YAGD,oGACC,wBAGD,qFACC,wBACA,cACA,YACA,YACA,kBACA,aACA,mBACA,WACA,kBACA,yBACA,gBACA,yBACA,YACA,UAGD,4IACC,0BACA","file":"blocks.css"} -------------------------------------------------------------------------------- /assets/blocks.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Plugin front end styles 3 | * @package Caxton 4 | */ 5 | 6 | $caxton-width: 1060px; 7 | 8 | .caxton-notification { 9 | padding: 50px; 10 | text-align: center; 11 | max-width: 430px; 12 | margin: auto; 13 | } 14 | 15 | .caxton-grid { 16 | .grid-image h3.grid-title { 17 | font-size: 16px; 18 | } 19 | p { 20 | font-size: 14px; 21 | } 22 | } 23 | 24 | .block-editor-inner-blocks, 25 | .block-editor-block-list__layout { 26 | min-height: inherit; 27 | } 28 | 29 | .edit-post-block-inspector-panel .components-panel__body.caxton-section { 30 | margin-bottom: 16px; 31 | padding-bottom: 0; 32 | box-shadow: 0 0 0 1px #ddd, 0 2px 3px #eee; 33 | } 34 | 35 | .caxton-section .components-panel__body .components-panel__body-toggle { 36 | font-weight: 400; 37 | } 38 | 39 | .caxton-flex-block { 40 | --caxton-gap: 0; 41 | .rich-text { 42 | min-width: 100px; // Keep width on the rich text, becomes 0 width and inaccessible without it. 43 | } 44 | > .block-editor-inner-blocks { 45 | &, > .block-editor-block-list__layout { 46 | min-height: inherit; 47 | margin: 0; 48 | display: inherit; 49 | justify-content: inherit; 50 | flex-direction: inherit; 51 | align-items: inherit; 52 | flex-wrap: wrap; 53 | width: 100%; 54 | position: static; 55 | } 56 | 57 | > .block-editor-block-list__layout { 58 | > .wp-block { 59 | margin: var(--caxton-gap); 60 | } 61 | 62 | > .block-list-appender { 63 | width: 100%; 64 | position: absolute; 65 | top: 100%; 66 | left: 0; 67 | z-index: 999; 68 | margin: 5px 0 0; 69 | 70 | button { 71 | padding: 2px; 72 | background: #eee; 73 | } 74 | } 75 | } 76 | } 77 | } 78 | 79 | .has-child-selected, .is-selected { 80 | > .block-list-appender { 81 | display: block; 82 | } 83 | } 84 | 85 | .caxton-resizable:not(.is-resizing) { 86 | height: auto !important; 87 | } 88 | 89 | .caxton-resizable.is-resizing { 90 | overflow: hidden; 91 | .caxton-resizable-contents { 92 | height: 100%; 93 | } 94 | } 95 | 96 | [data-caxtoneditableprop] { 97 | min-height: 1em; 98 | min-width: 1em; 99 | display: inline-block; 100 | } 101 | 102 | div, h1, h2, h3, h4, h5, h6, p, blockquote, header, footer, section { 103 | > span[data-caxtonEditableProp] { 104 | display: block; 105 | } 106 | } 107 | 108 | .block-editor .block-editor-block-list__block[data-type*='caxton/'] { 109 | &, .wp-block { 110 | max-width: $caxton-width; 111 | } 112 | } 113 | 114 | .edit-post-visual-editor .block-editor-block-list__block { 115 | &[data-type="caxton/grid"] { 116 | &:hover { 117 | // Add hover styles here for easy selection 118 | } 119 | &[data-type="caxton/section"] { 120 | &:hover { 121 | // Add hover styles here for easy selection 122 | } 123 | } 124 | } 125 | } 126 | 127 | .edit-post-visual-editor .block-editor-block-list__block { 128 | &[caxton-float=" fl"], &[caxton-float=" fr"] { 129 | z-index: 20; 130 | width: 100%; 131 | margin-bottom: 0; 132 | &:before { 133 | content: none; 134 | } 135 | 136 | } 137 | &[caxton-float=" fl"] .block-editor-block-list__block-edit { 138 | float: left; 139 | } 140 | &[caxton-float=" fr"] .block-editor-block-list__block-edit { 141 | float: right; 142 | } 143 | } 144 | 145 | .edit-post-block-sidebar__panel .components-panel__body.caxton-section { 146 | box-shadow: inset 0 -1px 0 #ddd; 147 | } 148 | 149 | .edit-post-block-sidebar__panel .components-panel__body.caxton-section > .components-panel__body-title { 150 | box-shadow: inset 0 -1px 0 #ddd; 151 | background: #eee; 152 | } 153 | 154 | .caxton-icon-picker-panel { 155 | .caxton-icon-picker { 156 | border: 1px solid #ccc; 157 | position: relative; 158 | overflow: hidden; 159 | margin: 0 -3px 0 -1px; 160 | 161 | .caxton-matching-icons { 162 | display: flex; 163 | flex-wrap: wrap; 164 | max-height: 200px; 165 | overflow: auto; 166 | } 167 | 168 | .caxton-matching-icons .o-70 { 169 | order: 1; 170 | } 171 | 172 | .dashicons-no, 173 | .dashicons-search { 174 | position: absolute; 175 | top: 5px; 176 | left: 5px; 177 | width: auto; 178 | height: auto; 179 | } 180 | .dashicons-no { 181 | left: auto; 182 | right: 0; 183 | top: 0; 184 | padding: 5px; 185 | } 186 | 187 | .icon-choice { 188 | margin: 0.4em; 189 | width: 1.25em; 190 | line-height: 1.25; 191 | font-size: 20px; 192 | text-align: center; 193 | box-sizing: content-box; 194 | cursor: pointer; 195 | } 196 | 197 | p { 198 | padding: .7em 1em 1em; 199 | margin: 0; 200 | } 201 | 202 | input { 203 | width: 100%; 204 | padding-left: 2.5em !important; 205 | border: none; 206 | border-bottom: 1px solid #ccc; 207 | } 208 | } 209 | } 210 | 211 | .caxton-file-picker { 212 | .image-button { 213 | padding: 0; 214 | flex-direction: column; 215 | align-items: center; 216 | height: auto; 217 | } 218 | a.caxton-remove-file { 219 | position: absolute; 220 | color: #fff; 221 | background: rgba(0, 0, 0, 0.5); 222 | display: block; 223 | padding: 5px 11px; 224 | text-decoration: none; 225 | opacity: .5; 226 | &:hover { 227 | opacity: 1; 228 | } 229 | } 230 | } 231 | 232 | // 2018 fix 233 | .block-editor-styles-wrapper div.wp-block { 234 | width: auto; 235 | } 236 | 237 | .block-editor-block-list__layout .layout-caxton-col .block-editor-block-list__block { 238 | padding-left: 36px; 239 | padding-right: 36px; 240 | .block-editor-block-drop-zone { 241 | margin: 0; 242 | } 243 | .block-editor-block-list__breadcrumb { 244 | margin-left: -38px; 245 | margin-right: -38px; 246 | } 247 | } 248 | 249 | .caxton-columns .block-editor-block-list__layout.layout-caxton-col { 250 | overflow: visible; 251 | } 252 | 253 | .wp-core-ui { 254 | .block-editor-block-list__layout:before { 255 | content: ''; 256 | display: block; 257 | padding-top: 1px; 258 | } 259 | .vw-100, .vw-100-bg { 260 | width: calc( 100vw - 200px ) !important; 261 | margin-left: calc( -50vw + 50% + 100px ) !important; 262 | } 263 | .vw-100-bg { 264 | padding-right: calc( 50vw - 50% - 100px ); 265 | padding-left: calc( 50vw - 50% - 100px ); 266 | } 267 | .is-sidebar-opened { 268 | .vw-100, .vw-100-bg { 269 | width: calc( 100vw - 480px ) !important; 270 | margin-left: calc( -50vw + 50% + 240px ) !important; 271 | } 272 | .vw-100-bg { 273 | padding-right: calc( 50vw - 50% - 240px ); 274 | padding-left: calc( 50vw - 50% - 240px ); 275 | } 276 | } 277 | 278 | .caxton-layout-options-heading { 279 | font: 25px sans-serif; 280 | } 281 | 282 | .caxton-layout-options { 283 | column-count: 2; 284 | column-gap: .7em; 285 | } 286 | 287 | .caxton-layout-option { 288 | padding: .5em; 289 | border: 1px solid #ccc; 290 | margin-bottom: .7em; 291 | -webkit-column-break-inside: avoid; 292 | page-break-inside: avoid; 293 | break-inside: avoid; 294 | text-align: center; 295 | box-shadow: 0 1px 3px rgba(0,0,0,0.15); 296 | background: #fff; 297 | img { 298 | margin-bottom: .5em; 299 | } 300 | h5 { 301 | font: 18px sans-serif; 302 | margin: 0; 303 | line-height: 1; 304 | } 305 | } 306 | } 307 | 308 | @media (min-width:1024px) { 309 | .wp-core-ui { 310 | .caxton-layout-options { 311 | column-count: 3; 312 | } 313 | } 314 | } 315 | 316 | @import 'scss/ordered-select-control'; 317 | 318 | @import 'scss/caxton-section-grid'; 319 | -------------------------------------------------------------------------------- /assets/caxton-utils.min.js: -------------------------------------------------------------------------------- 1 | var CaxtonUtils={closest:function(el,predicate){return predicate(el)?el:el&&CaxtonUtils.closest(el.parentNode,predicate)},watchMouse:function(selector){var monitorMouse=document.querySelectorAll(selector);if(0=-1*height&&top<=docHeight){scrollArea=docHeight+height;el.classList.add("-in-view");el.style.setProperty("--scroll",2*(height+top)/scrollArea-1)}else{el.classList.remove("-in-view")}}};window.addEventListener("scroll",function(e){console.log("scroll");if(!ticking){window.requestAnimationFrame(function(){watchScroll(e);ticking=false});ticking=true}});watchScroll()},watchScroll:function(selector){CaxtonUtils.watchScrollSetup.targets=document.querySelectorAll(selector);if(CaxtonUtils.watchScrollSetup.targets.length){CaxtonUtils.watchScrollSetup()}},each:function(selector,callback){var els=document.querySelectorAll(selector);for(var i=0;i-1?_url:caxtonUtilProps.assetsUrl+_url;if(!callback){callback=function(){}}if(url.indexOf(".css")>-1){el=head.querySelector('link[href="'+url.replace(/"/g,'\\"')+'"]');if(!el){el=document.createElement("link");el.type="text/css";el.rel="stylesheet";el.href=url;head.appendChild(el)}}else if(url.indexOf(".js")>-1){el=head.querySelector('script[src="'+url.replace(/"/g,'\\"')+'"]');if(!el){el=document.createElement("script");el.type="text/javascript";el.src=url;head.appendChild(el)}}else{return console.error("Unhandled URL, neither JS nor CSS "+_url)}if(el){if(!CaxtonUtils.loadedAssets[url]){el.addEventListener("load",function(e){CaxtonUtils.loadedAssets[url]=true;callback(el)})}else{callback(el)}}return el},ready:function(fn){if(document.readyState!="loading"){fn()}else{document.addEventListener("DOMContentLoaded",fn)}},addFlexslider:function(callback){if(typeof jQuery==="undefined"){CaxtonUtils.asset("https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js")}CaxtonUtils.asset("flexslider.css");if(typeof jQuery.flexslider==="undefined"){CaxtonUtils.asset("flexslider.min.js",callback)}else{callback()}},flexslider:function(){if(document.querySelector(".caxton-slider-pending-setup")){CaxtonUtils.addFlexslider(function(){CaxtonUtils.each(".caxton-slider-pending-setup",function(){jQuery(this).flexslider().removeClass("caxton-slider-pending-setup")})})}if(document.querySelector(".caxton-carousel-pending-setup")){CaxtonUtils.addFlexslider(function(){CaxtonUtils.each(".caxton-carousel-pending-setup",function(){var $t=jQuery(this);$t.flexslider({move:1,animation:"slide",animationLoop:false,itemWidth:250,itemMargin:+($t.data("item-margin")||16),minItems:1.6,maxItems:4.3}).removeClass("caxton-carousel-pending-setup")})})}},applyCSS:function(css,that,saveCurrentStyles){if(css==="default"){that.setAttribute("style",that.getAttribute("data-default-css"));that.removeAttribute("data-default-css");return}var styles={},attributes=css.split(";");for(var i=0;i1024){body.setAttribute("data-rwd","desktop");CaxtonUtils.each("[data-desktop-css]",function(){CaxtonUtils.applyCSS(this.getAttribute("data-desktop-css"),this)})}else if(width>700){body.setAttribute("data-rwd","tablet");CaxtonUtils.each("[data-tablet-css]",function(){CaxtonUtils.applyCSS(this.getAttribute("data-tablet-css"),this)})}else{body.setAttribute("data-rwd","mobile");CaxtonUtils.each("[data-mobile-css]",function(){CaxtonUtils.applyCSS(this.getAttribute("data-mobile-css"),this)})}},_stylesManager:function(){window.addEventListener("resize",function(){CaxtonUtils.responsiveStyling()});CaxtonUtils.delegate("mouseover","[data-hover-css]",function(){CaxtonUtils.applyCSS(this.getAttribute("data-hover-css"),this,"saveCurrentStyles")});CaxtonUtils.delegate("mouseout","[data-hover-css]",function(){CaxtonUtils.applyCSS("default",this)})},_interactionsManager:function(){function findTarget(el,selector){if(!selector){return el.parentElement}var target=el.parentElement.querySelector(selector);if(!target){target=document.querySelector(selector)}return target}CaxtonUtils.delegate("click","[data-toggle-class]",function(e){var el=this,target=findTarget(el,el.getAttribute("data-toggle-class")),toggleClass=el.getAttribute("data-toggle-classname")||"toggle";e.preventDefault();target.classList.toggle(toggleClass)})},newContentManager:function(){CaxtonUtils.loadFonts();CaxtonUtils.flexslider();CaxtonUtils.responsiveStyling();if(document.querySelector(".fa,.fas,.fab,.far")){CaxtonUtils.asset("font-awesome.css")}CaxtonUtils.watchScroll(".cxp-scroll");CaxtonUtils.watchMouse(".cxp-mouse")}};CaxtonUtils._stylesManager();CaxtonUtils._interactionsManager();CaxtonUtils.ready(CaxtonUtils.newContentManager); -------------------------------------------------------------------------------- /assets/compat/2019.css: -------------------------------------------------------------------------------- 1 | .entry .entry-content [class*="wp-block-caxton"] { 2 | margin-top: 0 !important; 3 | margin-bottom: 0 !important; 4 | max-width: none; 5 | } -------------------------------------------------------------------------------- /assets/es6/multiSelectComponent.es6: -------------------------------------------------------------------------------- 1 | import SortableList from './react-sortable-list.es6' 2 | 3 | function optionEl( opt ) { 4 | const {el} = window.Caxton; 5 | return el( 6 | 'div', 7 | { 8 | className : 'caxton-orderedselect-option', 9 | 'data-val': opt.value, 10 | key : `option-${opt.value}`, 11 | }, 12 | ( 13 | opt.image ? el( 'img', {src: opt.image} ) : null 14 | ), 15 | opt.label 16 | ); 17 | } 18 | 19 | export default function MultiSelectComponent( props ) { 20 | const {el} = window.Caxton; 21 | $ = window.jQuery; 22 | const [search, setSearch] = wp.element.useState( '' ); 23 | const 24 | delimiter = props.delimiter ? props.delimiter : ',', 25 | isMultiple = typeof props.multiple === 'undefined' ? true : props.multiple, 26 | selectedOptionsData = {}, 27 | selectedOptions = {}, 28 | availableOptions = []; 29 | 30 | let 31 | opt, optEl, 32 | controlValue = props.value ? props.value.split( delimiter ) : []; 33 | 34 | for ( var i = 0; i < props.options.length; i ++ ) { 35 | opt = props.options[i]; 36 | optEl = optionEl( opt ); 37 | 38 | if ( typeof opt.value === 'number' ) { 39 | opt.value = opt.value.toString(); 40 | } 41 | 42 | if ( - 1 !== controlValue.indexOf( opt.value ) ) { 43 | selectedOptionsData[opt.value] = opt; 44 | selectedOptions[opt.value] = optEl; 45 | } else { 46 | if ( availableOptions.length > 99 ) { 47 | continue; 48 | } 49 | if ( ! search || opt.label.toLowerCase().indexOf( search.toLowerCase() ) > - 1 ) { 50 | availableOptions.push( optEl ); 51 | } 52 | } 53 | } 54 | if ( availableOptions.length < 2 ) { 55 | availableOptions.push( el( 'span', { 56 | className: 'caxton-placeholder o70', 57 | key : 'placeholder', 58 | }, `No items found${search && ' for ' + search}...` ) ) 59 | } 60 | 61 | availableOptions.splice( 0, 0, el( 'input', { 62 | className : 'caxton-orderedselect-search', 63 | placeholder: 'Search...', 64 | value : search, 65 | onChange : ( {target} ) => setSearch( target.value ), 66 | key : 'search', 67 | } ) ); 68 | 69 | return el( 70 | 'div', 71 | { 72 | className: 'caxton-orderedselect-wrap caxton-orderedselect-' + 73 | ( isMultiple ? 'multiple' : 'single' ), 74 | key : 'orderedselect-wrap', 75 | }, 76 | el( 77 | 'div', { 78 | className: 'caxton-orderedselect-selected', 79 | key : 'selected-options', 80 | onClick( {target} ) { 81 | let val; 82 | const $target = $( target ); 83 | // Remove items only if multiple is set 84 | if ( isMultiple && $target.hasClass( 'caxton-orderedselect-option' ) ) { 85 | val = $target.attr( 'data-val' ); 86 | controlValue.splice( controlValue.indexOf( val ), 1 ); 87 | props.onChange( controlValue.join( delimiter ) ); 88 | } else { 89 | $target.closest( '.caxton-orderedselect-wrap' ).toggleClass( 'caxton-orderedselect-open' ); 90 | } 91 | }, 92 | }, 93 | el( SortableList, { 94 | data: controlValue, 95 | renderItem: i => selectedOptions[i], 96 | onChange: order => { 97 | props.onChange( order.join( delimiter ) ); 98 | } 99 | } ), 100 | ! controlValue.length && 101 | el( 'span', { 102 | className: 'caxton-placeholder o70', 103 | key : 'placeholder', 104 | }, 'Please choose...' ), 105 | el( 'i', { 106 | className: 'dashicons dashicons-arrow-down', 107 | key : 'down-arrow-icon', 108 | } ) 109 | ), 110 | el( 'div', { 111 | className: 'caxton-orderedselect-available', 112 | key : 'available-options', 113 | onClick( {target} ) { 114 | let val; 115 | const $target = $( target ); 116 | if ( $target.hasClass( 'caxton-orderedselect-option' ) ) { 117 | val = $target.attr( 'data-val' ); 118 | if ( isMultiple ) { 119 | controlValue.push( val ); 120 | } else { 121 | controlValue = [val]; 122 | $target.closest( '.caxton-orderedselect-wrap' ).toggleClass( 'caxton-orderedselect-open' ); 123 | } 124 | props.onChange( controlValue.join( delimiter ) ); 125 | } 126 | }, 127 | }, availableOptions ) 128 | ); 129 | }; -------------------------------------------------------------------------------- /assets/es6/react-sortable-list.es6: -------------------------------------------------------------------------------- 1 | /** 2 | * Sortable List module 3 | * A sortable list component using html5 drag and drop api. 4 | * @param {array} data Array of data to resort 5 | * @param {function} renderItem Callback function to render item element from data item 6 | * @param {function} onChange Callback function called with newly ordered data 7 | **/ 8 | 9 | export default class SortableItems extends wp.element.Component { 10 | constructor(props) { 11 | super(props); 12 | let placeholder = document.createElement('div'); 13 | placeholder.className = 'placeholder'; 14 | this.state = { 15 | data: [...props.data], 16 | placeholder: placeholder 17 | }; 18 | this.dragEnd = this.dragEnd.bind(this); 19 | this.dragStart = this.dragStart.bind(this); 20 | this.dragOver = this.dragOver.bind(this); 21 | } 22 | 23 | componentWillMount() { 24 | this.setState( {data: [...this.props.data]} ); 25 | } 26 | 27 | componentDidUpdate( prevProps ) { 28 | if ( 29 | this.props.data.length !== this.state.data.length || 30 | JSON.stringify( this.props.data ) !== JSON.stringify( prevProps.data ) 31 | ) { 32 | this.setState( {data: [...this.props.data]} ); 33 | } 34 | } 35 | 36 | sortData(from, to) { 37 | let data = [...this.state.data]; 38 | data.splice(to, 0, data.splice(from, 1)[0]); 39 | 40 | let onChange = this.props.onChange || (items => null); 41 | 42 | onChange(data); 43 | this.setState({ 44 | data 45 | }); 46 | } 47 | /** 48 | * On drag start, set data. 49 | **/ 50 | 51 | 52 | dragStart(e) { 53 | this.dragged = e.currentTarget; 54 | e.dataTransfer.effectAllowed = 'move'; 55 | e.dataTransfer.setData('text/html', e.currentTarget); 56 | this.state.placeholder.style.height = this.dragged.offsetHeight + 'px'; 57 | } 58 | /** 59 | * On drag end, update the data state. 60 | **/ 61 | 62 | 63 | dragEnd(e) { 64 | this.dragged.style.display = 'block'; 65 | this.dragged.parentNode.removeChild(this.state.placeholder); 66 | let from = Number(this.dragged.dataset.ind); 67 | let to = Number(this.over.dataset.ind); 68 | if (from < to) to--; 69 | if (this.nodePlacement == 'after') to++; 70 | this.sortData(from, to); 71 | } 72 | /** 73 | * On drag over, update items. 74 | **/ 75 | 76 | 77 | dragOver(e) { 78 | e.preventDefault(); 79 | this.dragged.style.display = 'none'; 80 | 81 | if (e.target.className == 'placeholder') { 82 | return; 83 | } 84 | 85 | this.over = e.target; 86 | 87 | while ( ! this.over.classList.contains( 'sortable-items--item' ) ) { 88 | if ( this.over.classList.contains( 'sortable-items--wrap' ) ) { 89 | return; 90 | } 91 | this.over = this.over.parentNode; 92 | } 93 | 94 | let relY = this.dragged.offsetTop - this.over.offsetTop; 95 | let mid = this.over.offsetHeight / 2; 96 | let parent = this.over.parentNode; 97 | 98 | if (relY > mid) { 99 | this.nodePlacement = 'after'; 100 | parent.insertBefore(this.state.placeholder, this.over.nextElementSibling); 101 | } else if (relY < mid) { 102 | this.nodePlacement = 'before'; 103 | parent.insertBefore(this.state.placeholder, this.over); 104 | } 105 | } 106 | 107 | renderItem(item, i) { 108 | const {el} = window.Caxton; 109 | let { 110 | renderItem 111 | } = this.props; 112 | 113 | if (!renderItem) { 114 | renderItem = item => item; 115 | } 116 | 117 | const props = { 118 | key: i, 119 | draggable: "true", 120 | onDragEnd: this.dragEnd, 121 | onDragStart: this.dragStart, 122 | className: '', 123 | 'data-ind': i, 124 | ...(this.props.itemProps || {}) 125 | }; 126 | 127 | props.className += ' sortable-items--item'; 128 | return el("div", props, renderItem(item)); 129 | } 130 | 131 | render() { 132 | const {el} = window.Caxton; 133 | const {data} = this.state; 134 | const listItems = data.map((item, i) => this.renderItem(item, i)); 135 | const props = { 136 | onDragOver: this.dragOver, 137 | className: '', 138 | ...(this.props.wrapProps || {}) 139 | }; 140 | 141 | props.className += ' sortable-items--wrap'; 142 | 143 | return el("div", props, listItems); 144 | } 145 | } -------------------------------------------------------------------------------- /assets/flexslider.css: -------------------------------------------------------------------------------- 1 | @font-face{font-family:flexslider-icon;src:url(fonts/flexslider-icon.eot);src:url(fonts/flexslider-icon.eot?#iefix) format("embedded-opentype"),url(fonts/flexslider-icon.woff) format("woff"),url(fonts/flexslider-icon.ttf) format("truetype"),url(fonts/flexslider-icon.svg#flexslider-icon) format("svg");font-weight:400;font-style:normal}.caxton-slider{margin-bottom:1em;max-width:100vw;transition:opacity .5s;position:relative;overflow:hidden}.caxton-slider:after{content:"";display:block;clear:both}.caxton-slider .flex-container a:hover,.caxton-slider .flex-slider a:hover{outline:0}.caxton-slider .flex-control-nav,.caxton-slider .flex-direction-nav{margin:0;padding:0;list-style:none;display:block}.caxton-slider ul,.caxton-slider ol{margin:0;padding:0;list-style:none;display:block}.caxton-slider ul>li,.caxton-slider ol>li{display:block;margin:0;padding:0}.caxton-slider .slides{min-height:inherit;display:flex}.caxton-slider .slides li{min-height:inherit;position:relative;overflow:hidden;display:flex !important;padding:7vh 0 9vh;align-items:center;justify-content:center;background:#fff center/cover}.caxton-slider .slides p,.caxton-slider .slides h1,.caxton-slider .slides h2,.caxton-slider .slides h3,.caxton-slider .slides h4,.caxton-slider .slides h5,.caxton-slider .slides h6,.caxton-slider .slides a:not(.alt){color:inherit;font-family:inherit}.caxton-slider .slides p,.caxton-slider .slides a{font-size:inherit}.caxton-slider .slides a{opacity:.9}.caxton-slider .slides .flex-caption{position:relative;z-index:1;padding:20px 25px;min-width:calc( 25% + 200px );max-width:calc( 100% - 40px )}.caxton-slider .slides .flex-caption.flex-caption-overlay{background:rgba(0,0,0,.35)}.caxton-slider .slides .flex-caption.header-slide-text{text-align:center}.caxton-slider .slides .flex-caption.entry-title{font-size:25px;line-height:40px;opacity:1 !important}.caxton-slider .slides .flex-caption.entry-excerpt{top:70px}.caxton-slider .slides .flex-caption>p:last-child{margin:0}.caxton-slider .slides li img.wp-post-image,.caxton-slider .slides li .slide-img{width:100%;margin:0;padding:0;transition:transform .5s}.caxton-slider .slides li .slide-img{position:absolute;top:0;left:0;bottom:0;right:0;background:center/cover}.caxton-slider .slides li:after{content:"";display:block;clear:both}.caxton-slider .flex-pauseplay span{text-transform:capitalize}.caxton-slider .flex-direction-nav a,.caxton-slider .flex-pauseplay a{text-decoration:none;display:block;width:50px;height:50px;line-height:50px;border:none;margin:0;position:absolute;bottom:50%;z-index:10;overflow:hidden;opacity:0;cursor:pointer;transition:all .3s ease-in-out;text-align:center}.ppb-panels #TB_secondLine,.ppb-panels .tb-close-icon,.ppb-panels #TB_prev a,.ppb-panels #TB_next a{color:#fff;text-shadow:0 0 1px rgba(0,0,0,.5);text-shadow:1px 1px 1px rgba(0,0,0,.5),-1px 1px 1px rgba(0,0,0,.5),-1px -1px 1px rgba(0,0,0,.5),1px -1px 1px rgba(0,0,0,.5)}.caxton-slider .flex-direction-nav a,.caxton-slider .flex-pauseplay a{color:inherit;text-shadow:0 0 1px rgba(0,0,0,.5);text-shadow:1px 1px 1px rgba(0,0,0,.5),-1px 1px 1px rgba(0,0,0,.5),-1px -1px 1px rgba(0,0,0,.5),1px -1px 1px rgba(0,0,0,.5)}.caxton-slider:hover a{opacity:1}.caxton-slider .flex-direction-nav a{transition:all .3s ease-in-out}.caxton-slider .flex-direction-nav a:before{font-family:flexslider-icon;font-size:44px;display:inline-block;content:"";opacity:.5}.caxton-slider .flex-pauseplay a:before{font-family:flexslider-icon;font-size:44px;display:inline-block;opacity:.5;content:""}.caxton-slider .flex-direction-nav a.flex-next:before{content:""}.caxton-slider .flex-direction-nav .flex-prev{left:0}.caxton-slider .flex-direction-nav .flex-next{right:0}.caxton-slider .flex-direction-nav .flex-disabled{opacity:0 !important;filter:alpha(opacity=0);cursor:default;z-index:-1}.caxton-slider .flex-pauseplay a{right:60px}.caxton-slider .flex-pauseplay a.flex-play:before{content:""}.caxton-slider .flex-control-nav{position:absolute;left:0;right:0;bottom:0;display:block;width:100%;text-align:center;transition:all .3s ease-in-out;height:50px;z-index:9}.caxton-slider .flex-control-nav li{margin:16px;display:inline-block;zoom:1}.caxton-slider .flex-control-nav a{width:16px;height:16px;display:block;box-shadow:0 0 3px rgba(0,0,0,.25);border:2px solid rgba(255,255,255,.7);cursor:pointer;text-indent:-9999px;border-radius:50%}.caxton-slider .flex-control-nav a.flex-active{background:rgba(255,255,255,.88);cursor:default}.caxton-slider .flex-control-nav li a:hover{background:rgba(255,255,255,.5)}.caxton-slider .flex-control-thumbs{margin:5px 0 0;position:static;overflow:hidden}.caxton-slider .flex-control-thumbs li{width:25%;float:left;margin:0}.caxton-slider .flex-control-thumbs img{width:100%;height:auto;display:block;opacity:.7;cursor:pointer;-moz-user-select:none;transition:all 1s ease}.caxton-slider .flex-control-thumbs img:hover{opacity:1}.caxton-slider .flex-control-thumbs .flex-active{opacity:1;cursor:default}.caxton-carousel .slides li{flex-direction:column;align-items:stretch}/*# sourceMappingURL=flexslider.css.map */ 2 | -------------------------------------------------------------------------------- /assets/flexslider.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["flexslider.scss"],"names":[],"mappings":"CACA,WACC,4BACA,mCACA,oOACA,gBACA,kBAGD,eACC,kBACA,gBACA,uBACA,kBACA,gBACA,qBACC,WACA,cACA,WAED,2EACC,UAED,oEACC,SACA,UACA,gBACA,cAED,oCACC,SACA,UACA,gBACA,cACA,0CACC,cACA,SACA,UAIF,uBACC,mBACA,aACA,0BACC,mBACA,kBACA,gBACA,wBACA,kBACA,mBACA,uBACA,6BAED,wNACC,cACA,oBAED,kDACC,kBAED,yBACC,WAED,qCACC,kBACA,UACA,kBACA,8BACA,8BACA,0DACC,2BAGD,uDACC,kBAED,iDACC,eACA,iBACA,qBAED,mDACC,SAED,kDACC,SAID,iFACC,WACA,SACA,UACA,yBAED,qCACC,kBACA,MACA,OACA,SACA,QACA,wBAED,gCACC,WACA,cACA,WAIH,oCACC,0BAED,sEACC,qBACA,cACA,WACA,YACA,iBACA,YACA,SACA,kBACA,WACA,WACA,gBACA,UACA,eACA,+BACA,kBAKD,oGACC,WACA,mCACA,4HAKD,sEACC,cACA,mCACA,4HAED,uBACC,UAED,qCACC,+BAKD,4CACC,4BACA,eACA,qBACA,YACA,WAED,wCACC,4BACA,eACA,qBACA,WACA,YAGA,sDACC,YAED,8CACC,OAED,8CACC,QAED,kDACC,qBACA,wBACA,eACA,WAGF,iCACC,WACA,kDACC,YAGF,iCACC,kBACA,OACA,QACA,SACA,cACA,WACA,kBACA,+BACA,YACA,UACA,oCACC,YACA,qBACA,OAED,mCACC,WACA,YACA,cACA,mCACA,sCACA,eACA,oBACA,kBACA,+CACC,iCACA,eAID,4CACC,gCAIH,oCACC,eACA,gBACA,gBACA,uCACC,UACA,WACA,SAED,wCACC,WACA,YACA,cACA,WACA,eACA,sBACA,uBACA,8CACC,UAGF,iDACC,UACA,eAMF,4BACC,sBACA","file":"flexslider.css"} -------------------------------------------------------------------------------- /assets/flexslider.scss: -------------------------------------------------------------------------------- 1 | /* FlexSlider Styling */ 2 | @font-face { 3 | font-family: flexslider-icon; 4 | src: url(fonts/flexslider-icon.eot); 5 | src: url(fonts/flexslider-icon.eot?#iefix) format("embedded-opentype"), url(fonts/flexslider-icon.woff) format("woff"), url(fonts/flexslider-icon.ttf) format("truetype"), url(fonts/flexslider-icon.svg#flexslider-icon) format("svg"); 6 | font-weight: 400; 7 | font-style: normal; 8 | } 9 | 10 | .caxton-slider { 11 | margin-bottom: 1em; 12 | max-width: 100vw; 13 | transition: opacity 0.5s; 14 | position: relative; 15 | overflow: hidden; 16 | &:after { 17 | content: ''; 18 | display: block; 19 | clear: both; 20 | } 21 | .flex-container a:hover, .flex-slider a:hover { 22 | outline: 0; 23 | } 24 | .flex-control-nav, .flex-direction-nav { 25 | margin: 0; 26 | padding: 0; 27 | list-style: none; 28 | display: block; 29 | } 30 | ul, ol { 31 | margin: 0; 32 | padding: 0; 33 | list-style: none; 34 | display: block; 35 | > li { 36 | display: block; 37 | margin: 0; 38 | padding: 0; 39 | } 40 | } 41 | 42 | .slides { 43 | min-height: inherit; 44 | display: flex; 45 | li { 46 | min-height: inherit; 47 | position: relative; 48 | overflow: hidden; 49 | display: flex !important; 50 | padding: 7vh 0 9vh; 51 | align-items: center; 52 | justify-content: center; 53 | background: #fff center/cover; 54 | } 55 | p, h1, h2, h3, h4, h5, h6, a:not(.alt) { 56 | color: inherit; 57 | font-family: inherit; 58 | } 59 | p, a { 60 | font-size:inherit; 61 | } 62 | a { 63 | opacity: .9; 64 | } 65 | .flex-caption { 66 | position: relative; 67 | z-index: 1; 68 | padding: 20px 25px; 69 | min-width: calc( 25% + 200px ); 70 | max-width: calc( 100% - 40px ); 71 | &.flex-caption-overlay { 72 | background: rgba(0,0,0,0.35); 73 | //box-shadow: 0 0 5px 5px rgba(0,0,0,0.35); 74 | } 75 | &.header-slide-text { 76 | text-align: center; 77 | } 78 | &.entry-title { 79 | font-size: 25px; 80 | line-height: 40px; 81 | opacity: 1!important; 82 | } 83 | &.entry-excerpt { 84 | top: 70px; 85 | } 86 | > p:last-child { 87 | margin: 0; 88 | } 89 | } 90 | li { 91 | img.wp-post-image, .slide-img { 92 | width: 100%; 93 | margin: 0; 94 | padding: 0; 95 | transition: transform 0.5s; 96 | } 97 | .slide-img { 98 | position: absolute; 99 | top: 0; 100 | left: 0; 101 | bottom: 0; 102 | right: 0; 103 | background: center/cover; 104 | } 105 | &:after { 106 | content: ''; 107 | display: block; 108 | clear: both; 109 | } 110 | } 111 | } 112 | .flex-pauseplay span { 113 | text-transform: capitalize; 114 | } 115 | .flex-direction-nav a, .flex-pauseplay a { 116 | text-decoration: none; 117 | display: block; 118 | width: 50px; 119 | height: 50px; 120 | line-height: 50px; 121 | border: none; 122 | margin: 0; 123 | position: absolute; 124 | bottom: 50%; 125 | z-index: 10; 126 | overflow: hidden; 127 | opacity: 0; 128 | cursor: pointer; 129 | transition: all .3s ease-in-out; 130 | text-align: center; 131 | } 132 | } 133 | 134 | .ppb-panels { 135 | #TB_secondLine, .tb-close-icon, #TB_prev a, #TB_next a { 136 | color: #fff; 137 | text-shadow: 0 0 1px rgba(0, 0, 0, 0.5); 138 | text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5), -1px 1px 1px rgba(0, 0, 0, 0.5), -1px -1px 1px rgba(0, 0, 0, 0.5), 1px -1px 1px rgba(0, 0, 0, 0.5); 139 | } 140 | } 141 | 142 | .caxton-slider { 143 | .flex-direction-nav a, .flex-pauseplay a { 144 | color: inherit; 145 | text-shadow: 0 0 1px rgba(0, 0, 0, 0.5); 146 | text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5), -1px 1px 1px rgba(0, 0, 0, 0.5), -1px -1px 1px rgba(0, 0, 0, 0.5), 1px -1px 1px rgba(0, 0, 0, 0.5); 147 | } 148 | &:hover a { 149 | opacity: 1; 150 | } 151 | .flex-direction-nav a { 152 | transition: all .3s ease-in-out; 153 | } 154 | } 155 | 156 | .caxton-slider { 157 | .flex-direction-nav a:before { 158 | font-family: flexslider-icon; 159 | font-size: 44px; 160 | display: inline-block; 161 | content: '\f001'; 162 | opacity: 0.5; 163 | } 164 | .flex-pauseplay a:before { 165 | font-family: flexslider-icon; 166 | font-size: 44px; 167 | display: inline-block; 168 | opacity: 0.5; 169 | content: '\f004'; 170 | } 171 | .flex-direction-nav { 172 | a.flex-next:before { 173 | content: '\f002'; 174 | } 175 | .flex-prev { 176 | left: 0; 177 | } 178 | .flex-next { 179 | right: 0; 180 | } 181 | .flex-disabled { 182 | opacity: 0 !important; 183 | filter: alpha(opacity = 0); 184 | cursor: default; 185 | z-index: -1; 186 | } 187 | } 188 | .flex-pauseplay a { 189 | right: 60px; 190 | &.flex-play:before { 191 | content: '\f003'; 192 | } 193 | } 194 | .flex-control-nav { 195 | position: absolute; 196 | left: 0; 197 | right: 0; 198 | bottom: 0; 199 | display: block; 200 | width: 100%; 201 | text-align: center; 202 | transition: all .3s ease-in-out; 203 | height: 50px; 204 | z-index: 9; 205 | li { 206 | margin: 16px; 207 | display: inline-block; 208 | zoom: 1; 209 | } 210 | a { 211 | width: 16px; 212 | height: 16px; 213 | display: block; 214 | box-shadow: 0 0 3px rgba(0,0,0,0.25); 215 | border: 2px solid rgba(255,255,255,0.7); 216 | cursor: pointer; 217 | text-indent: -9999px; 218 | border-radius: 50%; 219 | &.flex-active { 220 | background: rgba(255,255,255,0.88); 221 | cursor: default; 222 | } 223 | } 224 | li a { 225 | &:hover { 226 | background: rgba(255,255,255,0.5); 227 | } 228 | } 229 | } 230 | .flex-control-thumbs { 231 | margin: 5px 0 0; 232 | position: static; 233 | overflow: hidden; 234 | li { 235 | width: 25%; 236 | float: left; 237 | margin: 0; 238 | } 239 | img { 240 | width: 100%; 241 | height: auto; 242 | display: block; 243 | opacity: .7; 244 | cursor: pointer; 245 | -moz-user-select: none; 246 | transition: all 1s ease; 247 | &:hover { 248 | opacity: 1; 249 | } 250 | } 251 | .flex-active { 252 | opacity: 1; 253 | cursor: default; 254 | } 255 | } 256 | } 257 | 258 | .caxton-carousel { 259 | .slides li { 260 | flex-direction: column; 261 | align-items: stretch; 262 | } 263 | } -------------------------------------------------------------------------------- /assets/fonts/flexslider-icon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pootlepress/caxton/643d4ba5b988df6fcf3d975f067bdfaa3eaba4c9/assets/fonts/flexslider-icon.eot -------------------------------------------------------------------------------- /assets/fonts/flexslider-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | This is a custom SVG font generated by IcoMoon. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /assets/fonts/flexslider-icon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pootlepress/caxton/643d4ba5b988df6fcf3d975f067bdfaa3eaba4c9/assets/fonts/flexslider-icon.ttf -------------------------------------------------------------------------------- /assets/fonts/flexslider-icon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pootlepress/caxton/643d4ba5b988df6fcf3d975f067bdfaa3eaba4c9/assets/fonts/flexslider-icon.woff -------------------------------------------------------------------------------- /assets/front.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Plugin front end styles 3 | * 4 | * @package Caxton 5 | * @version 1.0.0 6 | */ 7 | 8 | @import "scss/tachyons-vars"; 9 | 10 | @import "scss/tachyons"; 11 | 12 | @import "scss/utils"; 13 | 14 | @import "scss/caxton-grid"; 15 | 16 | @import "scss/block-styles"; 17 | -------------------------------------------------------------------------------- /assets/ie.css: -------------------------------------------------------------------------------- 1 | /*# sourceMappingURL=ie.css.map */ 2 | -------------------------------------------------------------------------------- /assets/ie.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"ie.css"} -------------------------------------------------------------------------------- /assets/ie.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pootlepress/caxton/643d4ba5b988df6fcf3d975f067bdfaa3eaba4c9/assets/ie.scss -------------------------------------------------------------------------------- /assets/layout-blocks/alt-layouts.json: -------------------------------------------------------------------------------- 1 | { 2 | "2-sections": [ 3 | [ "1,12", "1,12" ], 4 | [ "1,6", "1,6" ], 5 | [ "1,8", "1,4" ], 6 | [ "1,4", "1,8" ] 7 | ], 8 | "3-sections": [ 9 | [ "1,12", "1,12", "1,12" ], 10 | [ "1,12", "1,6", "1,6" ], 11 | [ "1,6", "1,6", "1,12" ], 12 | [ "1,4", "1,4", "1,4" ] 13 | ], 14 | "4-sections": [ 15 | [ "1,12", "1,12", "1,12", "1,12" ], 16 | [ "1,6", "1,6", "1,6", "1,6" ], 17 | [ "1,12", "1,4", "1,4", "1,4" ], 18 | [ "1,4", "1,4", "1,4", "1,12" ] 19 | ], 20 | "5-sections": [ 21 | [ "1,12", "1,12", "1,12", "1,12", "1,12" ], 22 | [ "1,12", "1,6", "1,6", "1,6", "1,6" ], 23 | [ "1,6", "1,6", "1,12", "1,6", "1,6" ], 24 | [ "1,6", "1,6", "1,6", "1,6", "1,12" ] 25 | ], 26 | "6-sections": [ 27 | [ "1,12", "1,12", "1,12", "1,12", "1,12", "1,12" ], 28 | [ "1,12", "1,6", "1,6", "1,12", "1,6", "1,6" ], 29 | [ "1,12", "1,6", "1,6", "1,6" , "1,6", "1,12" ], 30 | [ "1,6", "1,6", "1,6", "1,6", "1,6", "1,6" ], 31 | [ "1,4", "1,4", "1,4", "1,4", "1,4", "1,4" ] 32 | ], 33 | "7-sections": [] 34 | } -------------------------------------------------------------------------------- /assets/layout-blocks/fields.es6: -------------------------------------------------------------------------------- 1 | export const gridFields = { 2 | 'Background' : { 3 | type : 'background', 4 | section: 'Background', 5 | }, 6 | 'Layout' : { 7 | type : 'select', 8 | options: [ 9 | {value: '', label: 'Normal',}, 10 | {value: 'vw-100-bg', label: 'Full width background',}, 11 | {value: 'vw-100', label: 'Full width content',}, 12 | ], 13 | section: 'Layout', 14 | }, 15 | 'Column gap' : { 16 | type : 'select', 17 | options: [ 18 | {value: 'grid-gap-none', label: 'None',}, 19 | {value: 'grid-gap-tight', label: 'Tight',}, 20 | {value: '', label: 'Normal',}, 21 | {value: 'grid-gap-wide', label: 'Wide',}, 22 | {value: 'grid-gap-wider', label: 'Wider',}, 23 | ], 24 | section: 'Layout', 25 | }, 26 | // 'Full height': { 27 | // type: 'toggle', 28 | // value: 'min-vh-100', 29 | // section: 'Layout', 30 | // }, 31 | 'Inner Padding top' : { 32 | type : 'range', 33 | section: 'Layout', 34 | }, 35 | 'Inner Padding left' : { 36 | type : 'range', 37 | max : 70, 38 | section: 'Layout', 39 | }, 40 | 'Inner Padding bottom' : { 41 | type : 'range', 42 | section: 'Layout', 43 | }, 44 | 'Inner Padding right' : { 45 | type : 'range', 46 | max : 70, 47 | section: 'Layout', 48 | }, 49 | 'Inner Padding left/right tablet': { 50 | type : 'range', 51 | max : 70, 52 | section: 'Layout', 53 | }, 54 | 'Inner Padding left/right mobile': { 55 | type : 'range', 56 | max : 70, 57 | section: 'Layout', 58 | }, 59 | 'Inner Padding unit' : { 60 | type : 'select', 61 | options: [ 62 | {value: 'vw', label: 'Responsive',}, 63 | {value: 'px', label: 'Pixels x 5',}, 64 | ], 65 | default: 'px', 66 | section: 'Layout', 67 | }, 68 | 69 | 'Mobile layout': { 70 | type : 'select', 71 | section : 'Responsive layout', 72 | childField: 'Mobile grid area', 73 | }, 74 | 75 | 'Tablet layout': { 76 | type : 'select', 77 | section : 'Responsive layout', 78 | childField: 'Tablet grid area', 79 | }, 80 | 81 | }; 82 | 83 | export const sectionFields = { 84 | 'Background' : { 85 | type : 'background', 86 | section: 'Background', 87 | }, 88 | 'Inner Padding top' : { 89 | type : 'range', 90 | section: 'Layout', 91 | default: 1, 92 | }, 93 | 'Inner Padding bottom' : { 94 | type : 'range', 95 | section: 'Layout', 96 | default: 1, 97 | }, 98 | 'Inner Padding left' : { 99 | type : 'range', 100 | max : 50, 101 | section: 'Layout', 102 | default: 1, 103 | }, 104 | 'Inner Padding right' : { 105 | type : 'range', 106 | max : 50, 107 | section: 'Layout', 108 | default: 1, 109 | }, 110 | 'Inner Padding left/right tablet': { 111 | type : 'range', 112 | max : 50, 113 | section: 'Layout', 114 | default: 1, 115 | }, 116 | 'Inner Padding left/right mobile': { 117 | type : 'range', 118 | max : 50, 119 | section: 'Layout', 120 | default: 1, 121 | }, 122 | 'Inner Padding unit' : { 123 | type : 'select', 124 | options: [ 125 | {value: 'vw', label: 'Responsive',}, 126 | {value: 'px', label: 'Pixels x 5',}, 127 | ], 128 | default: 'px', 129 | section: 'Layout', 130 | }, 131 | 'Vertical Alignment' : { 132 | type : 'select', 133 | section: 'Layout', 134 | options: [ 135 | {value: 'flex-start', label: 'Top',}, 136 | {value: 'center', label: 'Center',}, 137 | {value: 'flex-end', label: 'Bottom',}, 138 | ], 139 | }, 140 | 'Grid area' : { 141 | type : 'text', 142 | description: 'Change grid-area CSS property.', 143 | section : 'Jedi controls', 144 | default : 'span 1 / span 4 / auto / auto', 145 | }, 146 | 'Tablet grid area' : { 147 | type : 'text', 148 | description: 'Change grid-area CSS property for Tablet devices.', 149 | section : 'Jedi controls', 150 | }, 151 | 'Mobile grid area' : { 152 | type : 'text', 153 | description: 'Change grid-area CSS property for Mobile devices.', 154 | section : 'Jedi controls', 155 | }, 156 | }; 157 | 158 | export const flexFields = { 159 | 'Background' : { 160 | type : 'background', 161 | section: 'Background', 162 | }, 163 | 'Content direction' : { 164 | type : 'select', 165 | section: 'Layout', 166 | options: [ 167 | {value: '', label: 'Horizontal'}, 168 | {value: 'column', label: 'Vertical'}, 169 | ], 170 | }, 171 | 'Content justify' : { 172 | type : 'select', 173 | section: 'Layout', 174 | options: [ 175 | {value: 'flex-start', label: 'Start',}, 176 | {value: 'center', label: 'Center',}, 177 | {value: 'flex-end', label: 'End',}, 178 | {value: 'space-between', label: 'Justify',}, 179 | ], 180 | }, 181 | 'Alignment' : { 182 | type : 'select', 183 | section: 'Layout', 184 | options: [ 185 | {value: 'flex-start', label: 'Start',}, 186 | {value: 'center', label: 'Center',}, 187 | {value: 'flex-end', label: 'End',}, 188 | ], 189 | }, 190 | 'Items margin' : { 191 | type : 'range', 192 | section: 'Layout', 193 | }, 194 | 'Minimum content height' : { 195 | type : 'range', 196 | section: 'Layout', 197 | }, 198 | 'Content height unit' : { 199 | type : 'select', 200 | options: [ 201 | {value: 'px', label: 'Pixels x 10',}, 202 | {value: 'vh', label: 'Screen Height %',}, 203 | {value: 'vw', label: 'Screen Width %',}, 204 | ], 205 | default: 'vh', 206 | section: 'Layout', 207 | }, 208 | 'Inner Padding top' : { 209 | type : 'range', 210 | section: 'Layout', 211 | default: 1, 212 | }, 213 | 'Inner Padding bottom' : { 214 | type : 'range', 215 | section: 'Layout', 216 | default: 1, 217 | }, 218 | 'Inner Padding left' : { 219 | type : 'range', 220 | max : 50, 221 | section: 'Layout', 222 | default: 1, 223 | }, 224 | 'Inner Padding right' : { 225 | type : 'range', 226 | max : 50, 227 | section: 'Layout', 228 | default: 1, 229 | }, 230 | 'Inner Padding left/right tablet': { 231 | type : 'range', 232 | max : 50, 233 | section: 'Layout', 234 | default: 1, 235 | }, 236 | 'Inner Padding left/right mobile': { 237 | type : 'range', 238 | max : 50, 239 | section: 'Layout', 240 | default: 1, 241 | }, 242 | 'Inner Padding unit' : { 243 | type : 'select', 244 | options: [ 245 | {value: 'vw', label: 'Responsive',}, 246 | {value: 'px', label: 'Pixels x 5',}, 247 | ], 248 | default: 'px', 249 | section: 'Layout', 250 | }, 251 | 'Tablet Alignment' : { 252 | type : 'select', 253 | section: 'Layout', 254 | options: [ 255 | {value: 'flex-start', label: 'Left'}, 256 | {value: 'center', label: 'Center'}, 257 | {value: 'flex-end', label: 'Right'}, 258 | {value: 'space-between', label: 'Justify'}, 259 | ], 260 | }, 261 | 'Mobile Alignment' : { 262 | type : 'select', 263 | section: 'Layout', 264 | options: [ 265 | {value: 'flex-start', label: 'Left'}, 266 | {value: 'center', label: 'Center'}, 267 | {value: 'flex-end', label: 'Right'}, 268 | {value: 'space-between', label: 'Justify'}, 269 | ], 270 | }, 271 | }; 272 | 273 | export const tplFields = { 274 | 'Background' : { 275 | type : 'background', 276 | section: 'Background', 277 | }, 278 | 'Alignment' : { 279 | type : 'select', 280 | section: 'Layout', 281 | options: [ 282 | {value: 'flex-start', label: 'Left',}, 283 | {value: 'center', label: 'Center',}, 284 | {value: 'flex-end', label: 'Right',}, 285 | {value: 'space-between', label: 'Justify',}, 286 | ], 287 | default: 1, 288 | }, 289 | 'Vertical Alignment' : { 290 | type : 'select', 291 | section: 'Layout', 292 | options: [ 293 | {value: 'flex-start', label: 'Top',}, 294 | {value: 'center', label: 'Center',}, 295 | {value: 'flex-end', label: 'Bottom',}, 296 | ], 297 | }, 298 | 'Inner Padding top' : { 299 | type : 'range', 300 | section: 'Layout', 301 | default: 1, 302 | }, 303 | 'Inner Padding bottom' : { 304 | type : 'range', 305 | section: 'Layout', 306 | default: 1, 307 | }, 308 | 'Inner Padding left' : { 309 | type : 'range', 310 | max : 50, 311 | section: 'Layout', 312 | default: 1, 313 | }, 314 | 'Inner Padding right' : { 315 | type : 'range', 316 | max : 50, 317 | section: 'Layout', 318 | default: 1, 319 | }, 320 | 'Inner Padding left/right tablet': { 321 | type : 'range', 322 | max : 50, 323 | section: 'Layout', 324 | default: 1, 325 | }, 326 | 'Inner Padding left/right mobile': { 327 | type : 'range', 328 | max : 50, 329 | section: 'Layout', 330 | default: 1, 331 | }, 332 | 'Inner Padding unit' : { 333 | type : 'select', 334 | options: [ 335 | {value: 'vw', label: 'Responsive',}, 336 | {value: 'px', label: 'Pixels x 5',}, 337 | ], 338 | default: 'px', 339 | section: 'Layout', 340 | }, 341 | }; 342 | -------------------------------------------------------------------------------- /assets/layout-blocks/flex.es6: -------------------------------------------------------------------------------- 1 | export const flexRender = function ( props, block, childrenBlocks ) { 2 | const el = wp.element.createElement; 3 | var 4 | cls = 'relative', bgHTML, padUnit, padT, padL, padB, padR, 5 | blkProps = { 6 | className: 'relative caxton-flex-block', 7 | 'data-mobile-css': '', 8 | 'data-tablet-css': '', 9 | key : 'block', 10 | }, 11 | padMob = block.attrs['Inner Padding left/right tablet'], 12 | padTab = block.attrs['Inner Padding left/right mobile']; 13 | 14 | if ( block.name === 'caxon/horizontal' ) { 15 | blkProps.className = 'relative caxton-listing-block'; 16 | } 17 | 18 | padUnit = block.attrs['Inner Padding unit']; 19 | padT = block.attrs['Inner Padding top']; 20 | padL = block.attrs['Inner Padding left']; 21 | padB = block.attrs['Inner Padding bottom']; 22 | padR = block.attrs['Inner Padding right']; 23 | 24 | if ( 'px' === padUnit ) { 25 | padT *= 5; 26 | padL *= 5; 27 | padB *= 5; 28 | padR *= 5; 29 | } 30 | 31 | padT = padT ? padT + padUnit : 0; 32 | padL = padL ? padL + padUnit : 0; 33 | padB = padB ? padB + padUnit : 0; 34 | padR = padR ? padR + padUnit : 0; 35 | 36 | blkProps.style = { 37 | paddingTop : padT, 38 | paddingLeft : padL, 39 | paddingBottom : padB, 40 | paddingRight : padR, 41 | justifyContent: block.attrs['Alignment'], 42 | minHeight : block.attrs['Minimum content height'], 43 | alignItems : block.attrs['Alignment'], 44 | }; 45 | 46 | blkProps['data-desktop-css'] = 'padding-left:' + padL + 'em;padding-right:' + padR + 'em;'; 47 | blkProps['data-mobile-css'] = 'padding-left:' + padMob + 'em;padding-right:' + padMob + 'em;'; 48 | blkProps['data-tablet-css'] = 'padding-left:' + padTab + 'em;padding-right:' + padTab + 'em;'; 49 | 50 | if ( block.attrs['Column gap'] ) { 51 | blkProps.className += ' ' + block.attrs['Column gap']; 52 | } 53 | 54 | if ( block.attrs['Content height unit'] === 'px' ) { 55 | blkProps.style.minHeight = parseInt( blkProps.style.minHeight ) * 10 + 'px'; 56 | } else { 57 | blkProps.style.minHeight = parseInt( blkProps.style.minHeight ) + block.attrs['Content height unit']; 58 | } 59 | 60 | if ( block.attrs['Content direction'] ) { 61 | blkProps.style['flex-direction'] = block.attrs['Content direction']; 62 | } 63 | 64 | if ( block.attrs['Items margin'] ) { 65 | blkProps.style['--caxton-gap'] = block.attrs['Items margin'] + 'px'; 66 | } 67 | 68 | if ( block.attrs['Content justify'] ) { 69 | blkProps.style['justify-content'] = block.attrs['Content justify']; 70 | } 71 | 72 | if ( block.attrs['Mobile Alignment'] ) { 73 | blkProps['data-mobile-css'] += 'justify-content:' + block.attrs['Mobile Alignment'] + ';'; 74 | blkProps['data-desktop-css'] += 'justify-content:' + block.attrs['Content justify'] + ';'; 75 | } 76 | 77 | if ( block.attrs['Tablet Alignment'] ) { 78 | blkProps['data-tablet-css'] += 'justify-content:' + block.attrs['Tablet Alignment'] + ';'; 79 | blkProps['data-desktop-css'] += 'justify-content:' + block.attrs['Content justify'] + ';'; 80 | } 81 | 82 | return el( 83 | 'div', { 84 | className: cls, 85 | key : 'caxton-flex-block-wrap', 86 | }, 87 | [ 88 | // Background div 89 | el( 'div', { key: 'bg', className: 'absolute absolute--fill', dangerouslySetInnerHTML: block.outputHTML( '{{Background}}' ) } ), 90 | // Blocks inserter 91 | el( 'div', blkProps, 92 | childrenBlocks 93 | ) 94 | ] 95 | ); 96 | }; -------------------------------------------------------------------------------- /assets/layout-blocks/layout-blocks.es6: -------------------------------------------------------------------------------- 1 | import {gridFields, sectionFields, flexFields, tplFields} from './fields.es6'; 2 | import {gridRender, gridContent, responsiveLayoutPicker} from './grid.es6'; 3 | import {sectionRender} from './section.es6'; 4 | import {flexRender} from './flex.es6'; 5 | import {tplRender, tplContent} from './tpl.es6'; 6 | 7 | export const CaxtonLayoutBlocksSetup = ( $, {element} ) => { 8 | const {InnerBlocks} = caxtonWPEditor; 9 | const el = element.createElement; 10 | 11 | gridFields['Mobile layout'].render = responsiveLayoutPicker; 12 | gridFields['Tablet layout'].render = responsiveLayoutPicker; 13 | 14 | // region grid block 15 | CaxtonBlock( { 16 | id : 'caxton/grid', 17 | title : 'Caxton Layouts', 18 | icon : 'screenoptions', 19 | category : 'caxton', 20 | fields : gridFields, 21 | attributes: { tpl: { type: 'string' }, }, 22 | edit : function ( props, block ) { 23 | return gridRender( props, block, gridContent( props, block ) ); 24 | }, 25 | save : function ( props, block ) { 26 | return gridRender( props, block, el( InnerBlocks.Content, {key: 'innerblockscontent'} ) ); 27 | } 28 | } ); 29 | // endregion grid block 30 | 31 | // region Caxton section block 32 | CaxtonBlock( { 33 | id : 'caxton/section', 34 | title : 'Caxton section', 35 | icon : 'screenoptions', 36 | parent : ['caxton/grid'], 37 | category : 'caxton', 38 | attributes: { tpl: { type: 'string' }, }, 39 | fields : sectionFields, 40 | edit : function ( props, block ) { 41 | let tpl = []; 42 | if ( props.attributes.tpl && props.attributes.tpl.indexOf( '[' ) === 0 && props.attributes.tpl.indexOf( ']' ) > 0 ) { 43 | tpl = JSON.parse( props.attributes.tpl ); 44 | } 45 | const content = el( 46 | InnerBlocks, 47 | { 48 | template : tpl, 49 | templateLock : false, 50 | key : 'innerblocks' 51 | } 52 | ); 53 | return sectionRender( props, block, content ); 54 | }, 55 | save : function ( props, block ) { 56 | return sectionRender( 57 | props, block, 58 | [el( InnerBlocks.Content, {key: 'innerblockscontent'} )] 59 | ); 60 | }, 61 | wrapperProps: function ( attrs, props ) { 62 | attrs['data-caxton-section'] = props['Grid area']; 63 | attrs.style = {}; 64 | attrs.style.gridArea = props['Grid area']; 65 | 66 | function styleContent() { 67 | var els = document.querySelectorAll( '[data-caxtonsection]:not([data-caxtonsectiondone])' ); 68 | for ( var i = 0; i < els.length; i ++ ) { 69 | els[i].style.gridArea = els[i].dataset.caxtonSection; 70 | els[i].setAttribute( 'data-caxtonsectiondone', '1' ); 71 | } 72 | } 73 | 74 | return attrs; 75 | } 76 | } ); 77 | // endregion Caxton section block 78 | 79 | // region Horizontal listings block 80 | CaxtonBlock( { 81 | id : 'caxton/horizontal', 82 | title : 'Horizontal blocks (deprecated)', 83 | icon : 'text', 84 | category : 'caxton', 85 | fields : flexFields, 86 | edit : function ( props, block ) { 87 | return flexRender( 88 | props, block, 89 | [el( InnerBlocks, {key: 'innerblocks', templateLock: false,} )] 90 | ); 91 | }, 92 | save : function ( props, block ) { 93 | return flexRender( 94 | props, block, 95 | [el( InnerBlocks.Content, {key: 'innerblockscontent'} )] 96 | ); 97 | }, 98 | } ); 99 | // endregion Horizontal listings block 100 | 101 | // region Flex block 102 | CaxtonBlock( { 103 | id : 'caxton/flex', 104 | title : 'Flex blocks (beta)', 105 | icon : 'text', 106 | category : 'caxton', 107 | fields : flexFields, 108 | edit : function ( props, block ) { 109 | return flexRender( 110 | props, block, 111 | [el( InnerBlocks, { 112 | key: 'innerblocks', 113 | templateLock: false, 114 | renderAppender: () => el( InnerBlocks.ButtonBlockAppender ) 115 | } )] 116 | ); 117 | }, 118 | save : function ( props, block ) { 119 | return flexRender( 120 | props, block, 121 | [el( InnerBlocks.Content, {key: 'innerblockscontent'} )] 122 | ); 123 | }, 124 | transforms: { 125 | from: [ 126 | { 127 | type: 'caxton/horizontal', 128 | }, 129 | ] 130 | } 131 | } ); 132 | // endregion Flex block 133 | 134 | // region Template block 135 | window.CaxtonLayoutOptionsBlock = ( blockArgs, options ) => { 136 | if ( ! blockArgs.id || ! blockArgs.title ) { 137 | console.error( 'Function CaxtonLayoutOptionsBlock requires `id` and `title` properties on first parameter object.' ); 138 | } 139 | 140 | if ( typeof blockArgs.fields !== 'function' ) { 141 | blockArgs.fields = fields => fields; 142 | } 143 | 144 | if ( blockArgs.debug ) { 145 | tplFields.tpl = { 146 | type : 'textarea', 147 | section: 'Layout', 148 | }; 149 | } 150 | 151 | 152 | 153 | let blockProps = { 154 | icon : 'screenoptions', 155 | category : 'caxton', 156 | fields : blockArgs.fields( tplFields, blockArgs ), // Call the fields function 157 | attributes: {tpl: {type: 'string'},}, 158 | chooseLayoutTitle: 'Please choose a layout', 159 | optionsRenderer: ( props, block ) => { 160 | var applyProps = function ( e ) { 161 | let newProps = jQuery( e.target ).closest( '.caxton-layout-option' ).data( 'props' ); 162 | if ( typeof newProps === 'string' ) { 163 | newProps = JSON.parse( newProps ); 164 | } 165 | if ( typeof newProps.tpl === 'object' ) { 166 | newProps.tpl = JSON.stringify( newProps.tpl ); 167 | } 168 | props.setAttributes( newProps ); 169 | }; 170 | 171 | var optEls = []; 172 | 173 | for ( var i = 0; i < options.length; i ++ ) { 174 | var opt = options[i]; 175 | optEls.push( 176 | el( 177 | 'div', 178 | { 179 | className : 'caxton-layout-option', 180 | key : 'option-' + i, 181 | "data-props": JSON.stringify( opt.props ), 182 | onClick : applyProps 183 | }, 184 | el( 'img', {src: opt.img} ), 185 | el( 'h5', {}, opt.title ), 186 | ) 187 | ); 188 | } 189 | 190 | return el( 'div', {}, [ 191 | el( 'h4', {key: 'heading'}, blockProps.chooseLayoutTitle ), 192 | el( 'div', {key: 'options', className: 'caxton-layout-options'}, optEls ), 193 | ] ); 194 | }, 195 | render: ( props, block, childrenBlocks ) => tplRender( props, block, childrenBlocks ), 196 | edit : function ( props, block ) { 197 | return blockProps.render( props, block, tplContent( props, block, blockProps.optionsRenderer ) ); 198 | }, 199 | save : function ( props, block ) { 200 | return blockProps.render( props, block, el( InnerBlocks.Content, {key: 'innerblockscontent'} ) ); 201 | }, 202 | }; 203 | 204 | delete blockArgs.fields; 205 | 206 | for ( let prop in blockArgs ) { 207 | if ( blockArgs.hasOwnProperty( prop ) ) { 208 | blockProps[ prop ] = blockArgs[ prop ]; 209 | } 210 | } 211 | 212 | CaxtonBlock( blockProps ); 213 | }; 214 | // endregion Template block 215 | }; 216 | -------------------------------------------------------------------------------- /assets/layout-blocks/layouts.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "tpl": [ 4 | { 5 | "Grid area": "span 1/span 12" 6 | } 7 | ] 8 | }, 9 | { 10 | "tpl": [ 11 | { 12 | "Grid area": "span 1/span 6" 13 | }, 14 | { 15 | "Grid area": "span 1/span 6" 16 | } 17 | ] 18 | }, 19 | { 20 | "tpl": [ 21 | { 22 | "Grid area": "span 1/span 4" 23 | }, 24 | { 25 | "Grid area": "span 1/span 4" 26 | }, 27 | { 28 | "Grid area": "span 1/span 4" 29 | } 30 | ] 31 | }, 32 | { 33 | "tpl": [ 34 | { 35 | "Grid area": "span 1/span 3" 36 | }, 37 | { 38 | "Grid area": "span 1/span 3" 39 | }, 40 | { 41 | "Grid area": "span 1/span 3" 42 | }, 43 | { 44 | "Grid area": "span 1/span 3" 45 | } 46 | ] 47 | }, 48 | { 49 | "tpl": [ 50 | { 51 | "Grid area": "span 1/span 8" 52 | }, 53 | { 54 | "Grid area": "span 1/span 4" 55 | } 56 | ] 57 | }, 58 | { 59 | "tpl": [ 60 | { 61 | "Grid area": "span 1/span 4" 62 | }, 63 | { 64 | "Grid area": "span 1/span 8" 65 | } 66 | ] 67 | }, 68 | { 69 | "tpl": [ 70 | { 71 | "Grid area": "span 1/span 9" 72 | }, 73 | { 74 | "Grid area": "span 1/span 3" 75 | } 76 | ] 77 | }, 78 | { 79 | "tpl": [ 80 | { 81 | "Grid area": "span 1/span 3" 82 | }, 83 | { 84 | "Grid area": "span 1/span 9" 85 | } 86 | ] 87 | }, 88 | { 89 | "tpl": [ 90 | { 91 | "Grid area": "span 1/span 6" 92 | }, 93 | { 94 | "Grid area": "span 1/span 3" 95 | }, 96 | { 97 | "Grid area": "span 1/span 3" 98 | } 99 | ] 100 | }, 101 | { 102 | "tpl": [ 103 | { 104 | "Grid area": "span 1/span 3" 105 | }, 106 | { 107 | "Grid area": "span 1/span 3" 108 | }, 109 | { 110 | "Grid area": "span 1/span 6" 111 | } 112 | ] 113 | }, 114 | { 115 | "tpl": [ 116 | { 117 | "Grid area": "span 1/span 3" 118 | }, 119 | { 120 | "Grid area": "span 1/span 6" 121 | }, 122 | { 123 | "Grid area": "span 1/span 3" 124 | } 125 | ] 126 | }, 127 | { 128 | "tpl": [ 129 | { 130 | "Grid area": "span 1/span 2" 131 | }, 132 | { 133 | "Grid area": "span 1/span 2" 134 | }, 135 | { 136 | "Grid area": "span 1/span 2" 137 | }, 138 | { 139 | "Grid area": "span 1/span 2" 140 | }, 141 | { 142 | "Grid area": "span 1/span 2" 143 | }, 144 | { 145 | "Grid area": "span 1/span 2" 146 | } 147 | ] 148 | }, 149 | { 150 | "tpl": [ 151 | { 152 | "Grid area": "span 1/span 12" 153 | }, 154 | { 155 | "Grid area": "span 2/span 6" 156 | }, 157 | { 158 | "Grid area": "span 2/span 6" 159 | } 160 | ] 161 | }, 162 | { 163 | "tpl": [ 164 | { 165 | "Grid area": "span 1/span 12" 166 | }, 167 | { 168 | "Grid area": "span 2/span 4" 169 | }, 170 | { 171 | "Grid area": "span 2/span 4" 172 | }, 173 | { 174 | "Grid area": "span 2/span 4" 175 | } 176 | ] 177 | }, 178 | { 179 | "tpl": [ 180 | { 181 | "Grid area": "span 2/span 8" 182 | }, 183 | { 184 | "Grid area": "span 1/span 4" 185 | }, 186 | { 187 | "Grid area": "span 1/span 4" 188 | }, 189 | { 190 | "Grid area": "span 1/span 4" 191 | }, 192 | { 193 | "Grid area": "span 1/span 8" 194 | } 195 | ] 196 | }, 197 | { 198 | "tpl": [ 199 | { 200 | "Grid area": "span 1/span 4" 201 | }, 202 | { 203 | "Grid area": "span 1/span 8" 204 | }, 205 | { 206 | "Grid area": "span 1/span 4" 207 | }, 208 | { 209 | "Grid area": "span 2/span 8" 210 | }, 211 | { 212 | "Grid area": "span 1/span 4" 213 | } 214 | ] 215 | }, 216 | { 217 | "tpl": [ 218 | { 219 | "Grid area": "span 2/span 4" 220 | }, 221 | { 222 | "Grid area": "span 2/span 8" 223 | }, 224 | { 225 | "Grid area": "span 1/span 4" 226 | }, 227 | { 228 | "Grid area": "span 1/span 4" 229 | }, 230 | { 231 | "Grid area": "span 1/span 4" 232 | } 233 | ] 234 | }, 235 | { 236 | "tpl": [ 237 | { 238 | "Grid area": "span 2/span 8" 239 | }, 240 | { 241 | "Grid area": "span 2/span 4" 242 | }, 243 | { 244 | "Grid area": "span 1/span 4" 245 | }, 246 | { 247 | "Grid area": "span 1/span 4" 248 | }, 249 | { 250 | "Grid area": "span 1/span 4" 251 | } 252 | ] 253 | }, 254 | { 255 | "tpl": [ 256 | { 257 | "Grid area": "span 2/span 6" 258 | }, 259 | { 260 | "Grid area": "span 1/span 3" 261 | }, 262 | { 263 | "Grid area": "span 1/span 3" 264 | }, 265 | { 266 | "Grid area": "span 2/span 6" 267 | }, 268 | { 269 | "Grid area": "span 1/span 3" 270 | }, 271 | { 272 | "Grid area": "span 1/span 3" 273 | } 274 | ] 275 | }, 276 | { 277 | "tpl": [ 278 | { 279 | "Grid area": "span 2/span 6" 280 | }, 281 | { 282 | "Grid area": "span 2/span 6" 283 | }, 284 | { 285 | "Grid area": "span 1/span 3" 286 | }, 287 | { 288 | "Grid area": "span 1/span 3" 289 | }, 290 | { 291 | "Grid area": "span 1/span 3" 292 | }, 293 | { 294 | "Grid area": "span 1/span 3" 295 | } 296 | ] 297 | } 298 | ] -------------------------------------------------------------------------------- /assets/layout-blocks/section.es6: -------------------------------------------------------------------------------- 1 | export const sectionRender = function ( props, block, childrenBlocks ) { 2 | const el = wp.element.createElement; 3 | var 4 | cls = 'relative', bgHTML, padUnit, padT, padL, padB, padR, 5 | childWrapCls = 'relative caxton-section-block', 6 | padMob = block.attrs['Inner Padding left/right tablet'], 7 | padTab = block.attrs['Inner Padding left/right mobile']; 8 | 9 | padUnit = block.attrs['Inner Padding unit']; 10 | padT = block.attrs['Inner Padding top']; 11 | padL = block.attrs['Inner Padding left']; 12 | padB = block.attrs['Inner Padding bottom']; 13 | padR = block.attrs['Inner Padding right']; 14 | 15 | if ( 'px' === padUnit ) { 16 | padT *= 5; 17 | padL *= 5; 18 | padB *= 5; 19 | padR *= 5; 20 | } 21 | 22 | padT = padT ? padT + padUnit : 0; 23 | padL = padL ? padL + padUnit : 0; 24 | padB = padB ? padB + padUnit : 0; 25 | padR = padR ? padR + padUnit : 0; 26 | 27 | if ( block.attrs['Column gap'] ) { 28 | childWrapCls += ' ' + block.attrs['Column gap']; 29 | } 30 | 31 | var elProps = { 32 | className : cls, 33 | key : 'caxton-section-block', 34 | style : { 35 | 'gridArea': block.attrs['Grid area'], 36 | }, 37 | }; 38 | const childWrapProps = { 39 | className : childWrapCls, 40 | style : { 41 | 'paddingTop' : padT, 42 | 'paddingLeft' : padL, 43 | 'paddingBottom': padB, 44 | 'paddingRight' : padR, 45 | }, 46 | 'data-mobile-css': 'padding-left:' + padMob + 'em;padding-right:' + padMob + 'em;', 47 | 'data-tablet-css': 'padding-left:' + padTab + 'em;padding-right:' + padTab + 'em;', 48 | key : 'block', 49 | }; 50 | 51 | if ( block.attrs['Mobile grid area'] ) { 52 | elProps['data-mobile-css'] = 'grid-area:' + block.attrs['Mobile grid area'] + ';'; 53 | elProps['data-desktop-css'] = 'grid-area:' + block.attrs['Grid area'] + ';'; 54 | } 55 | if ( block.attrs['Tablet grid area'] ) { 56 | elProps['data-tablet-css'] = 'grid-area:' + block.attrs['Tablet grid area'] + ';'; 57 | elProps['data-desktop-css'] = 'grid-area:' + block.attrs['Grid area'] + ';'; 58 | } 59 | 60 | if ( block.attrs['Vertical Alignment'] ) { 61 | childWrapProps.style['justify-content'] = block.attrs['Vertical Alignment']; 62 | } 63 | 64 | return el( 65 | 'div', elProps, 66 | [ 67 | // Background div 68 | el( 'div', { key: 'bg', className: 'absolute absolute--fill', dangerouslySetInnerHTML: block.outputHTML( '{{Background}}' ) } ), 69 | // Blocks inserter 70 | el( 'div', childWrapProps, 71 | childrenBlocks 72 | ) 73 | ] 74 | ); 75 | }; -------------------------------------------------------------------------------- /assets/layout-blocks/tpl.es6: -------------------------------------------------------------------------------- 1 | export function tplRender ( props, block, childrenBlocks ) { 2 | const el = wp.element.createElement; 3 | var cls = 'relative ', bgHTML, padUnit, padT, padL, padB, padR, 4 | colCls = 'relative ' + block.block.id.replace( '/', '-' ), 5 | padMob = block.attrs['Inner Padding left/right tablet'], 6 | padTab = block.attrs['Inner Padding left/right mobile']; 7 | 8 | padUnit = block.attrs['Inner Padding unit']; 9 | padT = block.attrs['Inner Padding top']; 10 | padL = block.attrs['Inner Padding left']; 11 | padB = block.attrs['Inner Padding bottom']; 12 | padR = block.attrs['Inner Padding right']; 13 | 14 | if ( 'px' === padUnit ) { 15 | padT *= 5; 16 | padL *= 5; 17 | padB *= 5; 18 | padR *= 5; 19 | } 20 | 21 | padT = padT ? padT + padUnit : 0; 22 | padL = padL ? padL + padUnit : 0; 23 | padB = padB ? padB + padUnit : 0; 24 | padR = padR ? padR + padUnit : 0; 25 | 26 | if ( block.attrs['Layout'] ) { 27 | cls += ' ' + block.attrs['Layout']; 28 | } 29 | 30 | if ( block.attrs['Column gap'] ) { 31 | colCls += ' ' + block.attrs['Column gap']; 32 | } 33 | 34 | if ( block.attrs['Full height'] ) { 35 | colCls += ' ' + block.attrs['Full height']; 36 | } 37 | 38 | return el( 39 | // Element 40 | 'div', {className: cls, key: 'caxton-grid-block'}, 41 | // Background div 42 | el( 'div', { 43 | key : 'bg', 44 | className : 'absolute absolute--fill', 45 | dangerouslySetInnerHTML: block.outputHTML( '{{Background}}' ) 46 | } ), 47 | // Blocks inserter 48 | el( 'div', { 49 | className : colCls, 50 | style : { 51 | 'paddingTop' : padT, 52 | 'paddingLeft' : padL, 53 | 'paddingBottom' : padB, 54 | 'paddingRight' : padR, 55 | 'gridTemplateColumns': 'repeat(12, 1fr)', 56 | }, 57 | 'data-tablet-css': 'padding-left:' + padTab + 'em;padding-right:' + padTab + 'em;', 58 | 'data-mobile-css': 'padding-left:' + padMob + 'em;padding-right:' + padMob + 'em;', 59 | key : 'block', 60 | }, 61 | childrenBlocks 62 | ) 63 | ); 64 | } 65 | 66 | export function tplContent( props, block, optionsRenderer ) { 67 | const el = wp.element.createElement; 68 | if ( props.attributes.tpl && props.attributes.tpl.indexOf( '[' ) === 0 && props.attributes.tpl.indexOf( ']' ) > 0 ) { 69 | 70 | let 71 | tpl = JSON.parse( props.attributes.tpl ); 72 | 73 | return el( 74 | caxtonWPEditor.InnerBlocks, 75 | { 76 | template : tpl, 77 | templateLock : false, 78 | key : 'innerblocks', 79 | renderAppender: () => el( caxtonWPEditor.InnerBlocks.ButtonBlockAppender ), 80 | } 81 | ); 82 | } else { 83 | return optionsRenderer( props, block ); 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /assets/scss/_block-styles.scss: -------------------------------------------------------------------------------- 1 | .wp-block-caxton-super-text > * { 2 | margin: 0; 3 | } 4 | 5 | .caxton-slider { 6 | h2 { 7 | font-size: 2em; 8 | color: inherit; 9 | } 10 | p, a:not([class*='button']):not([class*='btn']) { 11 | font-size: 1em; 12 | color: inherit; 13 | } 14 | } 15 | 16 | body:not(.wp-admin) { 17 | .caxton-shape-divider-onxt, 18 | .caxton-shape-divider-oprv { 19 | height: 0; 20 | > div { 21 | position: absolute; 22 | left: 0; 23 | right: 0; 24 | } 25 | } 26 | } 27 | 28 | .wp-block-caxton-divider, 29 | .caxton-shape-divider { 30 | position: relative; 31 | z-index: 999; 32 | margin-top: 0 !important; 33 | margin-bottom: 0 !important; 34 | } 35 | 36 | .caxton-shape-divider { 37 | &.caxton-shape-divider-onxt > div { 38 | bottom: 0; 39 | } 40 | &.caxton-shape-divider-oprv > div { 41 | top: 0; 42 | } 43 | > div { 44 | overflow: hidden; 45 | margin: -1px 0; 46 | } 47 | svg { 48 | position: relative; 49 | fill: currentColor; 50 | display: block; 51 | } 52 | } 53 | 54 | .caxton-listing-block, 55 | .caxton-flex-block { 56 | flex-wrap: wrap; 57 | display: flex; 58 | > * { 59 | margin: var( --caxton-gap ); 60 | } 61 | } 62 | 63 | .caxton-icon { 64 | vertical-align: middle; 65 | display: inline-block; 66 | svg { 67 | height: 1em; 68 | width: auto; 69 | display: block; 70 | } 71 | path { 72 | fill: currentColor; 73 | stroke: currentColor; 74 | } 75 | } 76 | 77 | .caxton-carousel-pending-setup, 78 | .caxton-slider-pending-setup { 79 | opacity: 0; 80 | } -------------------------------------------------------------------------------- /assets/scss/_caxton-grid.scss: -------------------------------------------------------------------------------- 1 | .caxton-grid { 2 | display: flex; 3 | flex-wrap: wrap; 4 | margin: 1% -1%; 5 | 6 | .grid-item { 7 | border-color: inherit; 8 | box-sizing: border-box; 9 | width: 31.33%; 10 | margin: 1%; 11 | padding: 0; 12 | &.ba { 13 | padding: 2%; 14 | } 15 | > a { 16 | display: block; 17 | } 18 | } 19 | 20 | h3.grid-title { 21 | padding: 0 7%; 22 | margin: 0; 23 | font-size: 18px; 24 | text-align: center; 25 | display: none; 26 | } 27 | 28 | .grid-image { 29 | position: relative; 30 | padding-top: 100%; 31 | background: center/cover; 32 | overflow: hidden; 33 | margin: 0; 34 | 35 | h3.grid-title, 36 | &:before { 37 | content: ''; 38 | position: absolute; 39 | display: block; 40 | top: 50%; 41 | right: 0; 42 | left: 0; 43 | transform: translateY(-50%); 44 | opacity: .7; 45 | } 46 | &:before { 47 | opacity: .2; 48 | } 49 | 50 | h3.grid-title { 51 | margin: 0; 52 | color: #ffffff; 53 | text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5), 0 0 3px #000; 54 | } 55 | 56 | &:before { 57 | background: rgba(0, 0, 0, .5); 58 | height: 9999px; 59 | } 60 | 61 | &:hover { 62 | h3.grid-title, 63 | &:before { 64 | opacity: 1; 65 | } 66 | } 67 | } 68 | 69 | &.caxton-circle-images { 70 | .grid-image { 71 | border-radius: 999px; 72 | overflow: hidden; 73 | z-index: 7; 74 | } 75 | .ba { 76 | border-radius: 999px; 77 | } 78 | } 79 | 80 | &.caxton-title-below-image { 81 | .grid-image { 82 | margin: 0 0 1em; 83 | } 84 | 85 | h3.grid-title { 86 | display: block; 87 | } 88 | 89 | .grid-image { 90 | h3.grid-title, 91 | &:before { 92 | display: none; 93 | } 94 | } 95 | .ba { 96 | border-radius: 0; 97 | } 98 | } 99 | 100 | &.caxton-rectangle-images { 101 | .grid-image { 102 | padding-top: 56.25%; 103 | } 104 | } 105 | time { 106 | text-align: center; 107 | display: block; 108 | margin: .5em 0 .2em; 109 | } 110 | 111 | .grid-meta { 112 | display: flex; 113 | justify-content: space-between; 114 | flex-wrap: wrap; 115 | .author, .comments { 116 | margin: 0; 117 | } 118 | .fa:before { 119 | margin-right: 7px; 120 | } 121 | } 122 | } 123 | 124 | .caxton-columns { 125 | display: grid; 126 | grid-auto-flow: dense; 127 | grid-gap: 16px; 128 | 129 | &.grid-gap-none { 130 | grid-gap: 0; 131 | } 132 | 133 | &.grid-gap-tight { 134 | grid-gap: 8px; 135 | } 136 | 137 | &.grid-gap-wide { 138 | grid-gap: 25px; 139 | } 140 | 141 | &.grid-gap-wider { 142 | grid-gap: 32px; 143 | } 144 | 145 | @for $i from 1 to 6 { 146 | &.caxton-#{$i}-columns { 147 | grid-template-columns: repeat( $i , 1fr); 148 | } 149 | } 150 | 151 | &.layout-caxton-col { 152 | overflow: hidden; 153 | } 154 | 155 | .layout-caxton-col { 156 | overflow: hidden; 157 | } 158 | 159 | @for $i from 1 through 6 { 160 | .caxton-col-#{ $i } { 161 | grid-column: #{ $i }; 162 | } 163 | } 164 | } 165 | 166 | .caxton-section-block { 167 | display: flex; 168 | flex-direction: column; 169 | height: 100%; 170 | } 171 | 172 | @media (max-width:1024px) AND (min-width:768px) { 173 | .caxton-columns:not(.caxton-responsive-phone):not(caxton-responsive-never) { 174 | grid-template-columns: 100%; 175 | .layout-caxton-col { 176 | grid-column: 1; 177 | } 178 | } 179 | .wp-block-caxton-section:not([data-tablet-css*='grid-area']) { 180 | grid-area: span 1 / span 12 / auto / auto !important; 181 | } 182 | } 183 | 184 | @media (max-width:767px) { 185 | .caxton-columns:not(caxton-responsive-never) { 186 | grid-template-columns: 100%; 187 | .layout-caxton-col { 188 | grid-column: 1; 189 | } 190 | } 191 | .wp-block-caxton-section:not([data-mobile-css*=grid-area]) { 192 | grid-area: span 1 / span 12 / auto / auto !important; 193 | } 194 | .caxton-grid .grid-item { 195 | width: 100% !important; 196 | } 197 | } 198 | -------------------------------------------------------------------------------- /assets/scss/_caxton-section-grid.scss: -------------------------------------------------------------------------------- 1 | .block-editor { 2 | .caxton-layout-picker { 3 | border: 1px solid #aaa; 4 | padding: 16px; 5 | grid-column: 1/-1; 6 | .caxton-layout-preview { 7 | display: grid; 8 | grid-template-columns: repeat(12, 12px); 9 | grid-gap: 5px; 10 | padding: 4px; 11 | grid-auto-rows: 25px; 12 | border: 3px solid #eee; 13 | background: #eee; 14 | cursor: pointer; 15 | opacity: .88; 16 | &:hover { 17 | border-color: #aaa; 18 | opacity: 1; 19 | } 20 | .caxton-layout-preview-section { 21 | background: #999; 22 | } 23 | &.caxton-layout-selected { 24 | background: #ccc; 25 | .caxton-layout-preview-section { 26 | background: #777; 27 | } 28 | } 29 | } 30 | .caxton-layout-preview-wrap { 31 | float: left; 32 | position: relative; 33 | margin: 0 25px 25px 0; 34 | 35 | &:hover .caxton-layout-preview-legends { 36 | opacity: .7; 37 | &:hover { 38 | opacity: 1; 39 | } 40 | } 41 | } 42 | .caxton-layout-preview-legends { 43 | position: absolute; 44 | top: calc( 100% - 1px ); 45 | right: 0; 46 | z-index: 1; 47 | opacity: 0; 48 | .dashicons { 49 | float: left; 50 | } 51 | } 52 | &.caxton-responsive-layout-picker { 53 | border: none; 54 | padding: 0; 55 | column-count: 2; 56 | column-gap: 5px; 57 | .caxton-layout-preview { 58 | grid-template-columns: repeat(12, 1fr); 59 | grid-gap: 2px; 60 | padding: 2px; 61 | grid-auto-rows: 11px; 62 | } 63 | .caxton-layout-preview-wrap { 64 | display: inline-block; 65 | -webkit-column-break-inside: avoid; 66 | page-break-inside: avoid; 67 | break-inside: avoid; 68 | margin: 0; 69 | padding: 2.5px 0; 70 | width: 100%; 71 | } 72 | } 73 | } 74 | 75 | .caxton-columns { 76 | grid-template-columns: 100%; 77 | > .block-editor-inner-blocks > .block-editor-block-list__layout { 78 | &:before { 79 | display: none; 80 | } 81 | display: grid; 82 | grid: inherit; 83 | grid-auto-rows: minmax( 70px, auto ); 84 | > .block-editor-block-list__block { 85 | margin: 0; 86 | padding: 0; 87 | transform: none; 88 | } 89 | } 90 | .caxton-section-block { 91 | grid-template-columns: 100%; 92 | .block-editor-block-list__layout { 93 | margin: 0; 94 | } 95 | } 96 | 97 | @for $i from 1 to 6 { 98 | &.caxton-#{$i}-columns > .block-editor-inner-blocks > .block-editor-block-list__layout { 99 | grid-template-columns: repeat($i, 1fr); 100 | } 101 | } 102 | } 103 | } 104 | 105 | .caxton-grid-block { 106 | > .block-editor-inner-blocks { 107 | grid: inherit; 108 | grid-gap: inherit; 109 | grid-column: 1 / -1; 110 | > .block-editor-block-list__layout { 111 | grid: inherit; 112 | grid-gap: inherit; 113 | grid-column: 1/-1; 114 | display: grid; 115 | margin: 0; 116 | } 117 | .block-editor-block-list__block { 118 | margin: 0; 119 | max-width: none; 120 | } 121 | } 122 | .block-editor-inner-blocks + .block-editor-inserter { 123 | position: absolute; 124 | bottom: 0; 125 | right: 0; 126 | svg { 127 | fill: #e74c3c; 128 | } 129 | button { 130 | border-radius: 50%; 131 | } 132 | } 133 | .block-editor-block-list__block:not(:last-child) .block-editor-inner-blocks + .block-editor-inserter { 134 | display: none; 135 | } 136 | 137 | } 138 | 139 | [data-caxton-section] { 140 | justify-content: stretch; 141 | align-items: stretch; 142 | transition: all .7s; 143 | background: rgba(0,0,0,0.025); 144 | box-shadow: inset 0 0 7px 2px rgba(0,0,0,0.05); 145 | transform: none !important; 146 | &.is-selected-parent, 147 | &.is-selected { 148 | background: rgba(0,0,0,0); 149 | box-shadow: inset 0 0 1px 1px rgba(0,0,0,0.07); 150 | } 151 | > .block-editor-block-list__block-edit { 152 | height: calc( 100% - 64px ); 153 | > [data-block] { 154 | margin: 0; 155 | } 156 | [data-block] { 157 | height: 100%; 158 | box-sizing: border-box; 159 | > div, .relative:first-child:last-child { 160 | height: 100%; 161 | box-sizing: border-box; 162 | } 163 | } 164 | } 165 | } 166 | 167 | .edit-post-visual-editor .block-editor-block-list__block[data-type='caxton/section'] > .block-editor-block-list__block-edit { 168 | margin: 0; 169 | height: 100%; 170 | } 171 | 172 | [data-type='caxton/grid'] > .block-editor-block-list__block-edit > .block-editor-block-list__breadcrumb { 173 | display: none !important; 174 | } 175 | 176 | .block-editor-block-list__block[data-type='caxton/grid']:hover > div:first-child:after { 177 | content: "Caxton Layout"; 178 | display: block; 179 | width: 106px; 180 | right: -16px; 181 | position: absolute; 182 | bottom: -16px; 183 | background: #007cba; 184 | color: #fff; 185 | text-align: center; 186 | font: 11px/1.8 sans-serif; 187 | padding: 2px 0 0; 188 | text-transform: uppercase; 189 | z-index: 999; 190 | opacity: 1; 191 | } 192 | 193 | .block-editor-block-list__layout .block-editor-block-list__block[data-type='caxton/grid']:hover > .block-editor-block-list__block-edit:before { 194 | outline: 1px solid #007cba; 195 | outline-offset: 2px; 196 | } 197 | -------------------------------------------------------------------------------- /assets/scss/_ordered-select-control.scss: -------------------------------------------------------------------------------- 1 | .caxton-orderedselect-wrap { 2 | position: relative; 3 | 4 | .caxton-orderedselect-search { 5 | padding: 3px 5px; 6 | margin: 3px 5px 11px; 7 | border: 1px solid #ccc; 8 | display: block; 9 | width: calc(100% - 10px); 10 | 11 | + .caxton-placeholder { 12 | padding: 3px 5px; 13 | } 14 | } 15 | } 16 | 17 | .caxton-orderedselect-open { 18 | .caxton-orderedselect-selected .dashicons-arrow-down:before { 19 | content: "\f142"; 20 | } 21 | 22 | .caxton-orderedselect-available { 23 | border: 1px solid #ccc; 24 | max-height: 200px; 25 | padding: 3px 0; 26 | } 27 | } 28 | 29 | .caxton-orderedselect-available { 30 | max-height: 0; 31 | box-sizing: border-box; 32 | position: absolute; 33 | background: #fff; 34 | left: 0; 35 | right: 0; 36 | margin-top: -1px; 37 | padding: 0; 38 | overflow: auto; 39 | z-index: 999; 40 | 41 | .caxton-orderedselect-option:hover { 42 | background: #eee; 43 | } 44 | 45 | } 46 | 47 | .caxton-orderedselect-option { 48 | display: flex; 49 | align-items: center; 50 | padding: 3px 4px; 51 | cursor: pointer; 52 | margin: 2px 3px 2px 0; 53 | line-height: 21px; 54 | img { 55 | height: 21px; 56 | margin: 0 4px 0 0; 57 | } 58 | } 59 | 60 | .caxton-orderedselect-selected { 61 | border: 1px solid #ccc; 62 | padding: 3px 20px 3px 5px; 63 | position: relative; 64 | 65 | .caxton-orderedselect-option { 66 | background: #f5f5f5; 67 | border: 1px solid #e5e5e5; 68 | } 69 | 70 | .dashicons { 71 | position: absolute; 72 | right: 1px; 73 | top: 50%; 74 | transform: translateY(-52%); 75 | } 76 | } 77 | 78 | .caxton-orderedselect-multiple .caxton-orderedselect-option { 79 | &:hover { 80 | background: #eee; 81 | } 82 | 83 | &:after { 84 | content: "\f335"; 85 | font: 16px dashicons; 86 | vertical-align: -3px; 87 | margin: 0 0 0 auto; 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /assets/scss/_tachyons.scss: -------------------------------------------------------------------------------- 1 | // ! TACHYONS v4.9.0 | http://tachyons.io 2 | 3 | // External Library Includes 4 | //@import 'tachyons/normalize'; 5 | 6 | // Variables 7 | // Importing here will allow you to override any variables in the modules 8 | 9 | @import 'tachyons/variables'; 10 | 11 | // Debugging 12 | //@import 'tachyons/debug-children'; 13 | //@import 'tachyons/debug-grid'; 14 | 15 | // Uncomment out the line below to help debug layout issues 16 | // @import 'tachyons/debug'; 17 | 18 | // Modules 19 | @import 'tachyons/box-sizing'; 20 | @import 'tachyons/aspect-ratios'; 21 | @import 'tachyons/images'; 22 | @import 'tachyons/background-size'; 23 | @import 'tachyons/background-position'; 24 | @import 'tachyons/outlines'; 25 | @import 'tachyons/borders'; 26 | 27 | //@import 'tachyons/border-colors'; 28 | 29 | @import 'tachyons/border-radius'; 30 | @import 'tachyons/border-style'; 31 | @import 'tachyons/border-widths'; 32 | @import 'tachyons/box-shadow'; 33 | @import 'tachyons/code'; 34 | @import 'tachyons/coordinates'; 35 | @import 'tachyons/clears'; 36 | @import 'tachyons/display'; 37 | @import 'tachyons/flexbox'; 38 | @import 'tachyons/floats'; 39 | @import 'tachyons/font-family'; 40 | @import 'tachyons/font-style'; 41 | @import 'tachyons/font-weight'; 42 | @import 'tachyons/forms'; 43 | @import 'tachyons/heights'; 44 | @import 'tachyons/letter-spacing'; 45 | @import 'tachyons/line-height'; 46 | @import 'tachyons/links'; 47 | @import 'tachyons/lists'; 48 | @import 'tachyons/max-widths'; 49 | @import 'tachyons/widths'; 50 | @import 'tachyons/overflow'; 51 | @import 'tachyons/position'; 52 | @import 'tachyons/opacity'; 53 | @import 'tachyons/rotations'; 54 | 55 | //@import 'tachyons/skins'; 56 | //@import 'tachyons/skins-pseudo'; 57 | 58 | @import 'tachyons/spacing'; 59 | @import 'tachyons/negative-margins'; 60 | @import 'tachyons/tables'; 61 | @import 'tachyons/text-decoration'; 62 | @import 'tachyons/text-align'; 63 | @import 'tachyons/text-transform'; 64 | @import 'tachyons/type-scale'; 65 | @import 'tachyons/typography'; 66 | @import 'tachyons/utilities'; 67 | @import 'tachyons/visibility'; 68 | @import 'tachyons/white-space'; 69 | @import 'tachyons/vertical-align'; 70 | @import 'tachyons/hovers'; 71 | @import 'tachyons/z-index'; 72 | @import 'tachyons/nested'; 73 | @import 'tachyons/styles'; 74 | -------------------------------------------------------------------------------- /assets/scss/_utils.scss: -------------------------------------------------------------------------------- 1 | .absolute--fill { 2 | position: absolute; 3 | } 4 | 5 | .br-i { 6 | border-radius: inherit; 7 | > .absolute--fill { 8 | border-radius: inherit; 9 | } 10 | } 11 | 12 | .fixed { 13 | position: fixed; 14 | } 15 | 16 | a.no-underline { 17 | text-decoration: none !important; 18 | } 19 | 20 | .nowrap { 21 | white-space: nowrap; 22 | } 23 | 24 | .vw-100, .vw-100-bg { 25 | width: 100vw; 26 | margin-left: calc( -50vw + 50% ) !important; 27 | margin-right: calc( -50vw + 50% ) !important; 28 | max-width: none !important; 29 | } 30 | 31 | .vw-100-bg { 32 | padding-right: calc( 50vw - 50% ); 33 | padding-left: calc( 50vw - 50% ); 34 | } 35 | 36 | .shadow { 37 | box-shadow: 0 0 0.16em #000; 38 | } 39 | 40 | .glow { 41 | box-shadow: 0 0 0.16em #fff; 42 | } 43 | 44 | .text-shadow { 45 | text-shadow: 0 0 0.16em #000; 46 | } 47 | 48 | .text-glow { 49 | text-shadow: 0 0 0.16em #fff; 50 | } 51 | 52 | .center-mid-children { 53 | display: flex; 54 | align-items: center; 55 | justify-content: center; 56 | flex-direction: column; 57 | } 58 | 59 | .min-h4 { min-height: $height-4; } 60 | .min-h5 { min-height: $height-5; } 61 | 62 | .min-h-6{ min-height: 25rem; } 63 | .min-h-7{ min-height: 32rem; } 64 | .min-h-8{ min-height: 40rem; } 65 | .min-h-9{ min-height: 50rem; } 66 | .min-vh-100 { min-height: 100vh; } 67 | 68 | .tj { text-align:justify; } 69 | 70 | .maa{ margin: auto; } 71 | .mla{ margin-left: auto; } 72 | .mra{ margin-right: auto; } 73 | .mba{ margin-bottom: auto; } 74 | .mta{ margin-top: auto; } 75 | .mva{ margin-top: auto; margin-bottom: auto; } 76 | .mha{ margin-left: auto; margin-right: auto; } 77 | 78 | .fas.fab { 79 | font-family: Font Awesome\ 5 Brands; 80 | font-weight: 400; 81 | } 82 | 83 | .caxton-icon.fas { 84 | width: 1.25em; 85 | line-height: 1.25; 86 | text-align: center; 87 | box-sizing: content-box; 88 | } 89 | 90 | .caxton-hide-image img { 91 | display: none !important; 92 | } 93 | 94 | .caxton-flex-row-reverse .flex { 95 | flex-direction: row-reverse !important; 96 | } 97 | 98 | .blur, .blur-children > * { 99 | -webkit-filter: blur(7px); 100 | filter: blur(7px); 101 | } 102 | 103 | .blur-children .absolute--fill { 104 | top: -7px; 105 | left: -7px; 106 | right: -7px; 107 | bottom: -7px; 108 | } 109 | 110 | .blur-children { 111 | overflow: hidden; 112 | } 113 | 114 | .flip { 115 | transform: scale( -1, -1 ); 116 | } 117 | 118 | .flip-h { 119 | transform: scale( -1, 1 ); 120 | } 121 | 122 | .flip-v { 123 | transform: scale( 1, -1 ); 124 | } 125 | 126 | .toggle-close, 127 | .toggle-close-9999, 128 | .toggle-open, 129 | .toggle-open-9999 { 130 | overflow: hidden; 131 | transition: max-height .5s; 132 | max-height: 0; 133 | } 134 | .toggle-close:not(.toggle), 135 | .toggle-close-9999:not(.toggle) { 136 | max-height: 1920px; 137 | } 138 | 139 | .toggle-open:not(.toggle), 140 | .toggle-open-9999:not(.toggle) { 141 | border-top-width: 0; 142 | border-bottom-width: 0; 143 | padding: 0; 144 | margin: 0; 145 | max-height: 0; 146 | } 147 | 148 | .toggle-close-9999:not(.toggle) { 149 | max-height: 9999px; 150 | } 151 | 152 | .toggle-show:not(.toggle), 153 | .toggle-dib:not(.toggle) { 154 | display: none !important; 155 | } 156 | 157 | .toggle { 158 | .toggle-hide { 159 | display: none; 160 | } 161 | .toggle-show { 162 | display: block !important; 163 | } 164 | .toggle-dib { 165 | display: inline-block !important; 166 | } 167 | .toggle-close, .toggle-close-9999 { 168 | max-height: 0; 169 | padding: 0; 170 | margin: 0; 171 | } 172 | .toggle-open { 173 | max-height: 1920px; 174 | } 175 | .toggle-open-9999 { 176 | max-height: 9999px; 177 | } 178 | } 179 | 180 | .bg-black-90 {background-color: rgba(0,0,0,.90); } 181 | .bg-black-80 {background-color: rgba(0,0,0,.80); } 182 | .bg-black-70 {background-color: rgba(0,0,0,.70); } 183 | .bg-black-60 {background-color: rgba(0,0,0,.60); } 184 | .bg-black-50 {background-color: rgba(0,0,0,.50); } 185 | .bg-black-40 {background-color: rgba(0,0,0,.40); } 186 | .bg-black-30 {background-color: rgba(0,0,0,.30); } 187 | .bg-black-20 {background-color: rgba(0,0,0,.20); } 188 | .bg-black-10 {background-color: rgba(0,0,0,.10); } 189 | .bg-black-05 {background-color: rgba(0,0,0,.05); } 190 | .bg-black {background-color: #000; } 191 | 192 | .bg-white-90 {background-color: rgba(255,255,255,.90); } 193 | .bg-white-80 {background-color: rgba(255,255,255,.80); } 194 | .bg-white-70 {background-color: rgba(255,255,255,.70); } 195 | .bg-white-60 {background-color: rgba(255,255,255,.60); } 196 | .bg-white-50 {background-color: rgba(255,255,255,.50); } 197 | .bg-white-40 {background-color: rgba(255,255,255,.40); } 198 | .bg-white-30 {background-color: rgba(255,255,255,.30); } 199 | .bg-white-20 {background-color: rgba(255,255,255,.20); } 200 | .bg-white-10 {background-color: rgba(255,255,255,.10); } 201 | .bg-white {background-color: #fff; } 202 | 203 | .white-80 { 204 | color: rgba(255,255,255,.8); 205 | } -------------------------------------------------------------------------------- /assets/scss/tachyons-vars.css: -------------------------------------------------------------------------------- 1 | /*# sourceMappingURL=tachyons-vars.css.map */ 2 | -------------------------------------------------------------------------------- /assets/scss/tachyons-vars.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"tachyons-vars.css"} -------------------------------------------------------------------------------- /assets/scss/tachyons-vars.scss: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_aspect-ratios.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | ASPECT RATIOS 11 | 12 | */ 13 | 14 | /* This is for fluid media that is embedded from third party sites like youtube, vimeo etc. 15 | * Wrap the outer element in aspect-ratio and then extend it with the desired ratio i.e 16 | * Make sure there are no height and width attributes on the embedded media. 17 | * Adapted from: https://github.com/suitcss/components-flex-embed 18 | * 19 | * Example: 20 | * 21 | *
22 | * 23 | *
24 | * 25 | * */ 26 | 27 | .aspect-ratio { 28 | height: 0; 29 | position: relative; 30 | } 31 | 32 | .aspect-ratio--16x9 { padding-bottom: 56.25%; } 33 | .aspect-ratio--9x16 { padding-bottom: 177.77%; } 34 | 35 | .aspect-ratio--4x3 { padding-bottom: 75%; } 36 | .aspect-ratio--3x4 { padding-bottom: 133.33%; } 37 | 38 | .aspect-ratio--6x4 { padding-bottom: 66.6%; } 39 | .aspect-ratio--4x6 { padding-bottom: 150%; } 40 | 41 | .aspect-ratio--8x5 { padding-bottom: 62.5%; } 42 | .aspect-ratio--5x8 { padding-bottom: 160%; } 43 | 44 | .aspect-ratio--7x5 { padding-bottom: 71.42%; } 45 | .aspect-ratio--5x7 { padding-bottom: 140%; } 46 | 47 | .aspect-ratio--1x1 { padding-bottom: 100%; } 48 | 49 | .aspect-ratio--object { 50 | position: absolute; 51 | top: 0; 52 | right: 0; 53 | bottom: 0; 54 | left: 0; 55 | width: 100%; 56 | height: 100%; 57 | z-index: 100; 58 | } 59 | 60 | @media #{$breakpoint-not-small}{ 61 | .aspect-ratio-ns { 62 | height: 0; 63 | position: relative; 64 | } 65 | .aspect-ratio--16x9-ns { padding-bottom: 56.25%; } 66 | .aspect-ratio--9x16-ns { padding-bottom: 177.77%; } 67 | .aspect-ratio--4x3-ns { padding-bottom: 75%; } 68 | .aspect-ratio--3x4-ns { padding-bottom: 133.33%; } 69 | .aspect-ratio--6x4-ns { padding-bottom: 66.6%; } 70 | .aspect-ratio--4x6-ns { padding-bottom: 150%; } 71 | .aspect-ratio--8x5-ns { padding-bottom: 62.5%; } 72 | .aspect-ratio--5x8-ns { padding-bottom: 160%; } 73 | .aspect-ratio--7x5-ns { padding-bottom: 71.42%; } 74 | .aspect-ratio--5x7-ns { padding-bottom: 140%; } 75 | .aspect-ratio--1x1-ns { padding-bottom: 100%; } 76 | .aspect-ratio--object-ns { 77 | position: absolute; 78 | top: 0; 79 | right: 0; 80 | bottom: 0; 81 | left: 0; 82 | width: 100%; 83 | height: 100%; 84 | z-index: 100; 85 | } 86 | } 87 | 88 | @media #{$breakpoint-medium}{ 89 | .aspect-ratio-m { 90 | height: 0; 91 | position: relative; 92 | } 93 | .aspect-ratio--16x9-m { padding-bottom: 56.25%; } 94 | .aspect-ratio--9x16-m { padding-bottom: 177.77%; } 95 | .aspect-ratio--4x3-m { padding-bottom: 75%; } 96 | .aspect-ratio--3x4-m { padding-bottom: 133.33%; } 97 | .aspect-ratio--6x4-m { padding-bottom: 66.6%; } 98 | .aspect-ratio--4x6-m { padding-bottom: 150%; } 99 | .aspect-ratio--8x5-m { padding-bottom: 62.5%; } 100 | .aspect-ratio--5x8-m { padding-bottom: 160%; } 101 | .aspect-ratio--7x5-m { padding-bottom: 71.42%; } 102 | .aspect-ratio--5x7-m { padding-bottom: 140%; } 103 | .aspect-ratio--1x1-m { padding-bottom: 100%; } 104 | .aspect-ratio--object-m { 105 | position: absolute; 106 | top: 0; 107 | right: 0; 108 | bottom: 0; 109 | left: 0; 110 | width: 100%; 111 | height: 100%; 112 | z-index: 100; 113 | } 114 | } 115 | 116 | @media #{$breakpoint-large}{ 117 | .aspect-ratio-l { 118 | height: 0; 119 | position: relative; 120 | } 121 | .aspect-ratio--16x9-l { padding-bottom: 56.25%; } 122 | .aspect-ratio--9x16-l { padding-bottom: 177.77%; } 123 | .aspect-ratio--4x3-l { padding-bottom: 75%; } 124 | .aspect-ratio--3x4-l { padding-bottom: 133.33%; } 125 | .aspect-ratio--6x4-l { padding-bottom: 66.6%; } 126 | .aspect-ratio--4x6-l { padding-bottom: 150%; } 127 | .aspect-ratio--8x5-l { padding-bottom: 62.5%; } 128 | .aspect-ratio--5x8-l { padding-bottom: 160%; } 129 | .aspect-ratio--7x5-l { padding-bottom: 71.42%; } 130 | .aspect-ratio--5x7-l { padding-bottom: 140%; } 131 | .aspect-ratio--1x1-l { padding-bottom: 100%; } 132 | .aspect-ratio--object-l { 133 | position: absolute; 134 | top: 0; 135 | right: 0; 136 | bottom: 0; 137 | left: 0; 138 | width: 100%; 139 | height: 100%; 140 | z-index: 100; 141 | } 142 | } 143 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_background-position.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | BACKGROUND POSITION 11 | 12 | Base: 13 | bg = background 14 | 15 | Modifiers: 16 | -center = center center 17 | -top = top center 18 | -right = center right 19 | -bottom = bottom center 20 | -left = center left 21 | 22 | Media Query Extensions: 23 | -ns = not-small 24 | -m = medium 25 | -l = large 26 | 27 | */ 28 | 29 | .bg-center { 30 | background-repeat: no-repeat; 31 | background-position: center center; 32 | } 33 | 34 | .bg-top { 35 | background-repeat: no-repeat; 36 | background-position: top center; 37 | } 38 | 39 | .bg-right { 40 | background-repeat: no-repeat; 41 | background-position: center right; 42 | } 43 | 44 | .bg-bottom { 45 | background-repeat: no-repeat; 46 | background-position: bottom center; 47 | } 48 | 49 | .bg-left { 50 | background-repeat: no-repeat; 51 | background-position: center left; 52 | } 53 | 54 | @media #{$breakpoint-not-small} { 55 | .bg-center-ns { 56 | background-repeat: no-repeat; 57 | background-position: center center; 58 | } 59 | 60 | .bg-top-ns { 61 | background-repeat: no-repeat; 62 | background-position: top center; 63 | } 64 | 65 | .bg-right-ns { 66 | background-repeat: no-repeat; 67 | background-position: center right; 68 | } 69 | 70 | .bg-bottom-ns { 71 | background-repeat: no-repeat; 72 | background-position: bottom center; 73 | } 74 | 75 | .bg-left-ns { 76 | background-repeat: no-repeat; 77 | background-position: center left; 78 | } 79 | } 80 | 81 | @media #{$breakpoint-medium} { 82 | .bg-center-m { 83 | background-repeat: no-repeat; 84 | background-position: center center; 85 | } 86 | 87 | .bg-top-m { 88 | background-repeat: no-repeat; 89 | background-position: top center; 90 | } 91 | 92 | .bg-right-m { 93 | background-repeat: no-repeat; 94 | background-position: center right; 95 | } 96 | 97 | .bg-bottom-m { 98 | background-repeat: no-repeat; 99 | background-position: bottom center; 100 | } 101 | 102 | .bg-left-m { 103 | background-repeat: no-repeat; 104 | background-position: center left; 105 | } 106 | } 107 | 108 | @media #{$breakpoint-large} { 109 | .bg-center-l { 110 | background-repeat: no-repeat; 111 | background-position: center center; 112 | } 113 | 114 | .bg-top-l { 115 | background-repeat: no-repeat; 116 | background-position: top center; 117 | } 118 | 119 | .bg-right-l { 120 | background-repeat: no-repeat; 121 | background-position: center right; 122 | } 123 | 124 | .bg-bottom-l { 125 | background-repeat: no-repeat; 126 | background-position: bottom center; 127 | } 128 | 129 | .bg-left-l { 130 | background-repeat: no-repeat; 131 | background-position: center left; 132 | } 133 | } 134 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_background-size.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | BACKGROUND SIZE 11 | Docs: http://tachyons.io/docs/themes/background-size/ 12 | 13 | Media Query Extensions: 14 | -ns = not-small 15 | -m = medium 16 | -l = large 17 | 18 | */ 19 | 20 | /* 21 | Often used in combination with background image set as an inline style 22 | on an html element. 23 | */ 24 | 25 | .cover { background-size: cover!important; } 26 | .contain { background-size: contain!important; } 27 | 28 | @media #{$breakpoint-not-small} { 29 | .cover-ns { background-size: cover!important; } 30 | .contain-ns { background-size: contain!important; } 31 | } 32 | 33 | @media #{$breakpoint-medium} { 34 | .cover-m { background-size: cover!important; } 35 | .contain-m { background-size: contain!important; } 36 | } 37 | 38 | @media #{$breakpoint-large} { 39 | .cover-l { background-size: cover!important; } 40 | .contain-l { background-size: contain!important; } 41 | } 42 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_border-colors.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | BORDER COLORS 11 | Docs: http://tachyons.io/docs/themes/borders/ 12 | 13 | Border colors can be used to extend the base 14 | border classes ba,bt,bb,br,bl found in the _borders.css file. 15 | 16 | The base border class by default will set the color of the border 17 | to that of the current text color. These classes are for the cases 18 | where you desire for the text and border colors to be different. 19 | 20 | Base: 21 | b = border 22 | 23 | Modifiers: 24 | --color-name = each color variable name is also a border color name 25 | 26 | */ 27 | 28 | .b--black { border-color: $black; } 29 | .b--near-black { border-color: $near-black; } 30 | .b--dark-gray { border-color: $dark-gray; } 31 | .b--mid-gray { border-color: $mid-gray; } 32 | .b--gray { border-color: $gray; } 33 | .b--silver { border-color: $silver; } 34 | .b--light-silver { border-color: $light-silver; } 35 | .b--moon-gray { border-color: $moon-gray; } 36 | .b--light-gray { border-color: $light-gray; } 37 | .b--near-white { border-color: $near-white; } 38 | .b--white { border-color: $white; } 39 | 40 | .b--white-90 { border-color: $white-90; } 41 | .b--white-80 { border-color: $white-80; } 42 | .b--white-70 { border-color: $white-70; } 43 | .b--white-60 { border-color: $white-60; } 44 | .b--white-50 { border-color: $white-50; } 45 | .b--white-40 { border-color: $white-40; } 46 | .b--white-30 { border-color: $white-30; } 47 | .b--white-20 { border-color: $white-20; } 48 | .b--white-10 { border-color: $white-10; } 49 | .b--white-05 { border-color: $white-05; } 50 | .b--white-025 { border-color: $white-025; } 51 | .b--white-0125 { border-color: $white-0125; } 52 | 53 | .b--black-90 { border-color: $black-90; } 54 | .b--black-80 { border-color: $black-80; } 55 | .b--black-70 { border-color: $black-70; } 56 | .b--black-60 { border-color: $black-60; } 57 | .b--black-50 { border-color: $black-50; } 58 | .b--black-40 { border-color: $black-40; } 59 | .b--black-30 { border-color: $black-30; } 60 | .b--black-20 { border-color: $black-20; } 61 | .b--black-10 { border-color: $black-10; } 62 | .b--black-05 { border-color: $black-05; } 63 | .b--black-025 { border-color: $black-025; } 64 | .b--black-0125 { border-color: $black-0125; } 65 | 66 | .b--dark-red { border-color: $dark-red; } 67 | .b--red { border-color: $red; } 68 | .b--light-red { border-color: $light-red; } 69 | .b--orange { border-color: $orange; } 70 | .b--gold { border-color: $gold; } 71 | .b--yellow { border-color: $yellow; } 72 | .b--light-yellow { border-color: $light-yellow; } 73 | .b--purple { border-color: $purple; } 74 | .b--light-purple { border-color: $light-purple; } 75 | .b--dark-pink { border-color: $dark-pink; } 76 | .b--hot-pink { border-color: $hot-pink; } 77 | .b--pink { border-color: $pink; } 78 | .b--light-pink { border-color: $light-pink; } 79 | .b--dark-green { border-color: $dark-green; } 80 | .b--green { border-color: $green; } 81 | .b--light-green { border-color: $light-green; } 82 | .b--navy { border-color: $navy; } 83 | .b--dark-blue { border-color: $dark-blue; } 84 | .b--blue { border-color: $blue; } 85 | .b--light-blue { border-color: $light-blue; } 86 | .b--lightest-blue { border-color: $lightest-blue; } 87 | .b--washed-blue { border-color: $washed-blue; } 88 | .b--washed-green { border-color: $washed-green; } 89 | .b--washed-yellow { border-color: $washed-yellow; } 90 | .b--washed-red { border-color: $washed-red; } 91 | 92 | .b--transparent { border-color: $transparent; } 93 | .b--inherit { border-color: inherit; } 94 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_border-radius.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | BORDER RADIUS 11 | Docs: http://tachyons.io/docs/themes/border-radius/ 12 | 13 | Base: 14 | br = border-radius 15 | 16 | Modifiers: 17 | 0 = 0/none 18 | 1 = 1st step in scale 19 | 2 = 2nd step in scale 20 | 3 = 3rd step in scale 21 | 4 = 4th step in scale 22 | 23 | Literal values: 24 | -100 = 100% 25 | -pill = 9999px 26 | 27 | Media Query Extensions: 28 | -ns = not-small 29 | -m = medium 30 | -l = large 31 | 32 | */ 33 | 34 | .br0 { border-radius: $border-radius-none } 35 | .br1 { border-radius: $border-radius-1; } 36 | .br2 { border-radius: $border-radius-2; } 37 | .br3 { border-radius: $border-radius-3; } 38 | .br4 { border-radius: $border-radius-4; } 39 | .br-100 { border-radius: $border-radius-circle; } 40 | .br-pill { border-radius: $border-radius-pill; } 41 | .br--bottom { 42 | border-top-left-radius: 0; 43 | border-top-right-radius: 0; 44 | } 45 | .br--top { 46 | border-bottom-left-radius: 0; 47 | border-bottom-right-radius: 0; 48 | } 49 | .br--right { 50 | border-top-left-radius: 0; 51 | border-bottom-left-radius: 0; 52 | } 53 | .br--left { 54 | border-top-right-radius: 0; 55 | border-bottom-right-radius: 0; 56 | } 57 | 58 | @media #{$breakpoint-not-small} { 59 | .br0-ns { border-radius: $border-radius-none } 60 | .br1-ns { border-radius: $border-radius-1; } 61 | .br2-ns { border-radius: $border-radius-2; } 62 | .br3-ns { border-radius: $border-radius-3; } 63 | .br4-ns { border-radius: $border-radius-4; } 64 | .br-100-ns { border-radius: $border-radius-circle; } 65 | .br-pill-ns { border-radius: $border-radius-pill; } 66 | .br--bottom-ns { 67 | border-top-left-radius: 0; 68 | border-top-right-radius: 0; 69 | } 70 | .br--top-ns { 71 | border-bottom-left-radius: 0; 72 | border-bottom-right-radius: 0; 73 | } 74 | .br--right-ns { 75 | border-top-left-radius: 0; 76 | border-bottom-left-radius: 0; 77 | } 78 | .br--left-ns { 79 | border-top-right-radius: 0; 80 | border-bottom-right-radius: 0; 81 | } 82 | } 83 | 84 | @media #{$breakpoint-medium} { 85 | .br0-m { border-radius: $border-radius-none } 86 | .br1-m { border-radius: $border-radius-1; } 87 | .br2-m { border-radius: $border-radius-2; } 88 | .br3-m { border-radius: $border-radius-3; } 89 | .br4-m { border-radius: $border-radius-4; } 90 | .br-100-m { border-radius: $border-radius-circle; } 91 | .br-pill-m { border-radius: $border-radius-pill; } 92 | .br--bottom-m { 93 | border-top-left-radius: 0; 94 | border-top-right-radius: 0; 95 | } 96 | .br--top-m { 97 | border-bottom-left-radius: 0; 98 | border-bottom-right-radius: 0; 99 | } 100 | .br--right-m { 101 | border-top-left-radius: 0; 102 | border-bottom-left-radius: 0; 103 | } 104 | .br--left-m { 105 | border-top-right-radius: 0; 106 | border-bottom-right-radius: 0; 107 | } 108 | } 109 | 110 | @media #{$breakpoint-large} { 111 | .br0-l { border-radius: $border-radius-none } 112 | .br1-l { border-radius: $border-radius-1; } 113 | .br2-l { border-radius: $border-radius-2; } 114 | .br3-l { border-radius: $border-radius-3; } 115 | .br4-l { border-radius: $border-radius-4; } 116 | .br-100-l { border-radius: $border-radius-circle; } 117 | .br-pill-l { border-radius: $border-radius-pill; } 118 | .br--bottom-l { 119 | border-radius-top-left: 0; 120 | border-radius-top-right: 0; 121 | } 122 | .br--top-l { 123 | border-bottom-left-radius: 0; 124 | border-bottom-right-radius: 0; 125 | } 126 | .br--right-l { 127 | border-top-left-radius: 0; 128 | border-bottom-left-radius: 0; 129 | } 130 | .br--left-l { 131 | border-top-right-radius: 0; 132 | border-bottom-right-radius: 0; 133 | } 134 | } 135 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_border-style.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | BORDER STYLES 11 | Docs: http://tachyons.io/docs/themes/borders/ 12 | 13 | Depends on base border module in _borders.css 14 | 15 | Base: 16 | b = border-style 17 | 18 | Modifiers: 19 | --none = none 20 | --dotted = dotted 21 | --dashed = dashed 22 | --solid = solid 23 | 24 | Media Query Extensions: 25 | -ns = not-small 26 | -m = medium 27 | -l = large 28 | 29 | */ 30 | 31 | .b--dotted { border-style: dotted; } 32 | .b--dashed { border-style: dashed; } 33 | .b--solid { border-style: solid; } 34 | .b--none { border-style: none; } 35 | 36 | @media #{$breakpoint-not-small} { 37 | .b--dotted-ns { border-style: dotted; } 38 | .b--dashed-ns { border-style: dashed; } 39 | .b--solid-ns { border-style: solid; } 40 | .b--none-ns { border-style: none; } 41 | } 42 | 43 | @media #{$breakpoint-medium} { 44 | .b--dotted-m { border-style: dotted; } 45 | .b--dashed-m { border-style: dashed; } 46 | .b--solid-m { border-style: solid; } 47 | .b--none-m { border-style: none; } 48 | } 49 | 50 | @media #{$breakpoint-large} { 51 | .b--dotted-l { border-style: dotted; } 52 | .b--dashed-l { border-style: dashed; } 53 | .b--solid-l { border-style: solid; } 54 | .b--none-l { border-style: none; } 55 | } 56 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_border-widths.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | BORDER WIDTHS 11 | Docs: http://tachyons.io/docs/themes/borders/ 12 | 13 | Base: 14 | bw = border-width 15 | 16 | Modifiers: 17 | 0 = 0 width border 18 | 1 = 1st step in border-width scale 19 | 2 = 2nd step in border-width scale 20 | 3 = 3rd step in border-width scale 21 | 4 = 4th step in border-width scale 22 | 5 = 5th step in border-width scale 23 | 24 | Media Query Extensions: 25 | -ns = not-small 26 | -m = medium 27 | -l = large 28 | 29 | */ 30 | 31 | .bw0 { border-width: $border-width-none; } 32 | .bw1 { border-width: $border-width-1; } 33 | .bw2 { border-width: $border-width-2; } 34 | .bw3 { border-width: $border-width-3; } 35 | .bw4 { border-width: $border-width-4; } 36 | .bw5 { border-width: $border-width-5; } 37 | 38 | /* Resets */ 39 | .bt-0 { border-top-width: $border-width-none } 40 | .br-0 { border-right-width: $border-width-none } 41 | .bb-0 { border-bottom-width: $border-width-none } 42 | .bl-0 { border-left-width: $border-width-none } 43 | 44 | @media #{$breakpoint-not-small} { 45 | .bw0-ns { border-width: $border-width-none; } 46 | .bw1-ns { border-width: $border-width-1; } 47 | .bw2-ns { border-width: $border-width-2; } 48 | .bw3-ns { border-width: $border-width-3; } 49 | .bw4-ns { border-width: $border-width-4; } 50 | .bw5-ns { border-width: $border-width-5; } 51 | .bt-0-ns { border-top-width: $border-width-none } 52 | .br-0-ns { border-right-width: $border-width-none } 53 | .bb-0-ns { border-bottom-width: $border-width-none } 54 | .bl-0-ns { border-left-width: $border-width-none } 55 | } 56 | 57 | @media #{$breakpoint-medium} { 58 | .bw0-m { border-width: $border-width-none; } 59 | .bw1-m { border-width: $border-width-1; } 60 | .bw2-m { border-width: $border-width-2; } 61 | .bw3-m { border-width: $border-width-3; } 62 | .bw4-m { border-width: $border-width-4; } 63 | .bw5-m { border-width: $border-width-5; } 64 | .bt-0-m { border-top-width: $border-width-none } 65 | .br-0-m { border-right-width: $border-width-none } 66 | .bb-0-m { border-bottom-width: $border-width-none } 67 | .bl-0-m { border-left-width: $border-width-none } 68 | } 69 | 70 | @media #{$breakpoint-large} { 71 | .bw0-l { border-width: $border-width-none; } 72 | .bw1-l { border-width: $border-width-1; } 73 | .bw2-l { border-width: $border-width-2; } 74 | .bw3-l { border-width: $border-width-3; } 75 | .bw4-l { border-width: $border-width-4; } 76 | .bw5-l { border-width: $border-width-5; } 77 | .bt-0-l { border-top-width: $border-width-none } 78 | .br-0-l { border-right-width: $border-width-none } 79 | .bb-0-l { border-bottom-width: $border-width-none } 80 | .bl-0-l { border-left-width: $border-width-none } 81 | } 82 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_borders.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | BORDERS 11 | Docs: http://tachyons.io/docs/themes/borders/ 12 | 13 | Base: 14 | b = border 15 | 16 | Modifiers: 17 | a = all 18 | t = top 19 | r = right 20 | b = bottom 21 | l = left 22 | n = none 23 | 24 | Media Query Extensions: 25 | -ns = not-small 26 | -m = medium 27 | -l = large 28 | 29 | */ 30 | 31 | .ba { border-style: solid; border-width: 1px; } 32 | .bt { border-top-style: solid; border-top-width: 1px; } 33 | .br { border-right-style: solid; border-right-width: 1px; } 34 | .bb { border-bottom-style: solid; border-bottom-width: 1px; } 35 | .bl { border-left-style: solid; border-left-width: 1px; } 36 | .bn { border-style: none; border-width: 0; } 37 | 38 | 39 | @media #{$breakpoint-not-small} { 40 | .ba-ns { border-style: solid; border-width: 1px; } 41 | .bt-ns { border-top-style: solid; border-top-width: 1px; } 42 | .br-ns { border-right-style: solid; border-right-width: 1px; } 43 | .bb-ns { border-bottom-style: solid; border-bottom-width: 1px; } 44 | .bl-ns { border-left-style: solid; border-left-width: 1px; } 45 | .bn-ns { border-style: none; border-width: 0; } 46 | } 47 | 48 | @media #{$breakpoint-medium} { 49 | .ba-m { border-style: solid; border-width: 1px; } 50 | .bt-m { border-top-style: solid; border-top-width: 1px; } 51 | .br-m { border-right-style: solid; border-right-width: 1px; } 52 | .bb-m { border-bottom-style: solid; border-bottom-width: 1px; } 53 | .bl-m { border-left-style: solid; border-left-width: 1px; } 54 | .bn-m { border-style: none; border-width: 0; } 55 | } 56 | 57 | @media #{$breakpoint-large} { 58 | .ba-l { border-style: solid; border-width: 1px; } 59 | .bt-l { border-top-style: solid; border-top-width: 1px; } 60 | .br-l { border-right-style: solid; border-right-width: 1px; } 61 | .bb-l { border-bottom-style: solid; border-bottom-width: 1px; } 62 | .bl-l { border-left-style: solid; border-left-width: 1px; } 63 | .bn-l { border-style: none; border-width: 0; } 64 | } 65 | 66 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_box-shadow.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | BOX-SHADOW 11 | Docs: http://tachyons.io/docs/themes/box-shadow/ 12 | 13 | Media Query Extensions: 14 | -ns = not-small 15 | -m = medium 16 | -l = large 17 | 18 | */ 19 | 20 | .shadow-1 { box-shadow: $box-shadow-1; } 21 | .shadow-2 { box-shadow: $box-shadow-2; } 22 | .shadow-3 { box-shadow: $box-shadow-3; } 23 | .shadow-4 { box-shadow: $box-shadow-4; } 24 | .shadow-5 { box-shadow: $box-shadow-5; } 25 | 26 | @media #{$breakpoint-not-small} { 27 | .shadow-1-ns { box-shadow: $box-shadow-1; } 28 | .shadow-2-ns { box-shadow: $box-shadow-2; } 29 | .shadow-3-ns { box-shadow: $box-shadow-3; } 30 | .shadow-4-ns { box-shadow: $box-shadow-4; } 31 | .shadow-5-ns { box-shadow: $box-shadow-5; } 32 | } 33 | 34 | @media #{$breakpoint-medium} { 35 | .shadow-1-m { box-shadow: $box-shadow-1; } 36 | .shadow-2-m { box-shadow: $box-shadow-2; } 37 | .shadow-3-m { box-shadow: $box-shadow-3; } 38 | .shadow-4-m { box-shadow: $box-shadow-4; } 39 | .shadow-5-m { box-shadow: $box-shadow-5; } 40 | } 41 | 42 | @media #{$breakpoint-large} { 43 | .shadow-1-l { box-shadow: $box-shadow-1; } 44 | .shadow-2-l { box-shadow: $box-shadow-2; } 45 | .shadow-3-l { box-shadow: $box-shadow-3; } 46 | .shadow-4-l { box-shadow: $box-shadow-4; } 47 | .shadow-5-l { box-shadow: $box-shadow-5; } 48 | } 49 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_box-sizing.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | BOX SIZING 11 | 12 | */ 13 | 14 | /* 15 | html, 16 | body, 17 | div, 18 | article, 19 | section, 20 | main, 21 | footer, 22 | header, 23 | form, 24 | fieldset, 25 | legend, 26 | pre, 27 | code, 28 | a, 29 | h1,h2,h3,h4,h5,h6, 30 | p, 31 | ul, 32 | ol, 33 | li, 34 | dl, 35 | dt, 36 | dd, 37 | textarea, 38 | table, 39 | td, 40 | th, 41 | tr, 42 | input[type="email"], 43 | input[type="number"], 44 | input[type="password"], 45 | input[type="tel"], 46 | input[type="text"], 47 | input[type="url"], 48 | */ 49 | .border-box { 50 | box-sizing: border-box; 51 | } 52 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_clears.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | CLEARFIX 11 | http://tachyons.io/docs/layout/clearfix/ 12 | 13 | */ 14 | 15 | /* Nicolas Gallaghers Clearfix solution 16 | Ref: http://nicolasgallagher.com/micro-clearfix-hack/ */ 17 | 18 | .cf:before, 19 | .cf:after { content: " "; display: table; } 20 | .cf:after { clear: both; } 21 | .cf { *zoom: 1; } 22 | 23 | .cl { clear: left; } 24 | .cr { clear: right; } 25 | .cb { clear: both; } 26 | .cn { clear: none; } 27 | 28 | @media #{$breakpoint-not-small} { 29 | .cl-ns { clear: left; } 30 | .cr-ns { clear: right; } 31 | .cb-ns { clear: both; } 32 | .cn-ns { clear: none; } 33 | } 34 | 35 | @media #{$breakpoint-medium} { 36 | .cl-m { clear: left; } 37 | .cr-m { clear: right; } 38 | .cb-m { clear: both; } 39 | .cn-m { clear: none; } 40 | } 41 | 42 | @media #{$breakpoint-large} { 43 | .cl-l { clear: left; } 44 | .cr-l { clear: right; } 45 | .cb-l { clear: both; } 46 | .cn-l { clear: none; } 47 | } 48 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_code.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | CODE 11 | 12 | */ 13 | 14 | .pre { 15 | overflow-x: auto; 16 | overflow-y: hidden; 17 | overflow: scroll; 18 | } 19 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_coordinates.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | COORDINATES 11 | Docs: http://tachyons.io/docs/layout/position/ 12 | 13 | Use in combination with the position module. 14 | 15 | Base: 16 | top 17 | bottom 18 | right 19 | left 20 | 21 | Modifiers: 22 | -0 = literal value 0 23 | -1 = literal value 1 24 | -2 = literal value 2 25 | --1 = literal value -1 26 | --2 = literal value -2 27 | 28 | Media Query Extensions: 29 | -ns = not-small 30 | -m = medium 31 | -l = large 32 | 33 | */ 34 | 35 | .top-0 { top: 0; } 36 | .right-0 { right: 0; } 37 | .bottom-0 { bottom: 0; } 38 | .left-0 { left: 0; } 39 | 40 | .top-1 { top: 1rem; } 41 | .right-1 { right: 1rem; } 42 | .bottom-1 { bottom: 1rem; } 43 | .left-1 { left: 1rem; } 44 | 45 | .top-2 { top: 2rem; } 46 | .right-2 { right: 2rem; } 47 | .bottom-2 { bottom: 2rem; } 48 | .left-2 { left: 2rem; } 49 | 50 | .top--1 { top: -1rem; } 51 | .right--1 { right: -1rem; } 52 | .bottom--1 { bottom: -1rem; } 53 | .left--1 { left: -1rem; } 54 | 55 | .top--2 { top: -2rem; } 56 | .right--2 { right: -2rem; } 57 | .bottom--2 { bottom: -2rem; } 58 | .left--2 { left: -2rem; } 59 | 60 | 61 | .absolute--fill { 62 | top: 0; 63 | right: 0; 64 | bottom: 0; 65 | left: 0; 66 | } 67 | 68 | @media #{$breakpoint-not-small} { 69 | .top-0-ns { top: 0; } 70 | .left-0-ns { left: 0; } 71 | .right-0-ns { right: 0; } 72 | .bottom-0-ns { bottom: 0; } 73 | .top-1-ns { top: 1rem; } 74 | .left-1-ns { left: 1rem; } 75 | .right-1-ns { right: 1rem; } 76 | .bottom-1-ns { bottom: 1rem; } 77 | .top-2-ns { top: 2rem; } 78 | .left-2-ns { left: 2rem; } 79 | .right-2-ns { right: 2rem; } 80 | .bottom-2-ns { bottom: 2rem; } 81 | .top--1-ns { top: -1rem; } 82 | .right--1-ns { right: -1rem; } 83 | .bottom--1-ns { bottom: -1rem; } 84 | .left--1-ns { left: -1rem; } 85 | .top--2-ns { top: -2rem; } 86 | .right--2-ns { right: -2rem; } 87 | .bottom--2-ns { bottom: -2rem; } 88 | .left--2-ns { left: -2rem; } 89 | .absolute--fill-ns { 90 | top: 0; 91 | right: 0; 92 | bottom: 0; 93 | left: 0; 94 | } 95 | } 96 | 97 | @media #{$breakpoint-medium} { 98 | .top-0-m { top: 0; } 99 | .left-0-m { left: 0; } 100 | .right-0-m { right: 0; } 101 | .bottom-0-m { bottom: 0; } 102 | .top-1-m { top: 1rem; } 103 | .left-1-m { left: 1rem; } 104 | .right-1-m { right: 1rem; } 105 | .bottom-1-m { bottom: 1rem; } 106 | .top-2-m { top: 2rem; } 107 | .left-2-m { left: 2rem; } 108 | .right-2-m { right: 2rem; } 109 | .bottom-2-m { bottom: 2rem; } 110 | .top--1-m { top: -1rem; } 111 | .right--1-m { right: -1rem; } 112 | .bottom--1-m { bottom: -1rem; } 113 | .left--1-m { left: -1rem; } 114 | .top--2-m { top: -2rem; } 115 | .right--2-m { right: -2rem; } 116 | .bottom--2-m { bottom: -2rem; } 117 | .left--2-m { left: -2rem; } 118 | .absolute--fill-m { 119 | top: 0; 120 | right: 0; 121 | bottom: 0; 122 | left: 0; 123 | } 124 | } 125 | 126 | @media #{$breakpoint-large} { 127 | .top-0-l { top: 0; } 128 | .left-0-l { left: 0; } 129 | .right-0-l { right: 0; } 130 | .bottom-0-l { bottom: 0; } 131 | .top-1-l { top: 1rem; } 132 | .left-1-l { left: 1rem; } 133 | .right-1-l { right: 1rem; } 134 | .bottom-1-l { bottom: 1rem; } 135 | .top-2-l { top: 2rem; } 136 | .left-2-l { left: 2rem; } 137 | .right-2-l { right: 2rem; } 138 | .bottom-2-l { bottom: 2rem; } 139 | .top--1-l { top: -1rem; } 140 | .right--1-l { right: -1rem; } 141 | .bottom--1-l { bottom: -1rem; } 142 | .left--1-l { left: -1rem; } 143 | .top--2-l { top: -2rem; } 144 | .right--2-l { right: -2rem; } 145 | .bottom--2-l { bottom: -2rem; } 146 | .left--2-l { left: -2rem; } 147 | .absolute--fill-l { 148 | top: 0; 149 | right: 0; 150 | bottom: 0; 151 | left: 0; 152 | } 153 | } 154 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_debug-children.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | DEBUG CHILDREN 11 | Docs: http://tachyons.io/docs/debug/ 12 | 13 | Just add the debug class to any element to see outlines on its 14 | children. 15 | 16 | */ 17 | 18 | .debug * { outline: 1px solid gold; } 19 | .debug-white * { outline: 1px solid white; } 20 | .debug-black * { outline: 1px solid black; } 21 | 22 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_debug-grid.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | DEBUG GRID 11 | http://tachyons.io/docs/debug-grid/ 12 | 13 | Can be useful for debugging layout issues 14 | or helping to make sure things line up perfectly. 15 | Just tack one of these classes onto a parent element. 16 | 17 | */ 18 | 19 | .debug-grid { 20 | background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTRDOTY4N0U2N0VFMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTRDOTY4N0Q2N0VFMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3NjY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3NzY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsBS+GMAAAAjSURBVHjaYvz//z8DLsD4gcGXiYEAGBIKGBne//fFpwAgwAB98AaF2pjlUQAAAABJRU5ErkJggg==) repeat top left; 21 | } 22 | 23 | .debug-grid-16 { 24 | background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODYyRjhERDU2N0YyMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODYyRjhERDQ2N0YyMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3QTY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3QjY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvCS01IAAABMSURBVHjaYmR4/5+BFPBfAMFm/MBgx8RAGWCn1AAmSg34Q6kBDKMGMDCwICeMIemF/5QawEipAWwUhwEjMDvbAWlWkvVBwu8vQIABAEwBCph8U6c0AAAAAElFTkSuQmCC) repeat top left; 25 | } 26 | 27 | .debug-grid-8-solid { 28 | background:white url(data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAAAAAD/4QMxaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzExMSA3OS4xNTgzMjUsIDIwMTUvMDkvMTAtMDE6MTA6MjAgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE1IChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkIxMjI0OTczNjdCMzExRTZCMkJDRTI0MDgxMDAyMTcxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkIxMjI0OTc0NjdCMzExRTZCMkJDRTI0MDgxMDAyMTcxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QjEyMjQ5NzE2N0IzMTFFNkIyQkNFMjQwODEwMDIxNzEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QjEyMjQ5NzI2N0IzMTFFNkIyQkNFMjQwODEwMDIxNzEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAbGhopHSlBJiZBQi8vL0JHPz4+P0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHAR0pKTQmND8oKD9HPzU/R0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0f/wAARCAAIAAgDASIAAhEBAxEB/8QAWQABAQAAAAAAAAAAAAAAAAAAAAYBAQEAAAAAAAAAAAAAAAAAAAIEEAEBAAMBAAAAAAAAAAAAAAABADECA0ERAAEDBQAAAAAAAAAAAAAAAAARITFBUWESIv/aAAwDAQACEQMRAD8AoOnTV1QTD7JJshP3vSM3P//Z) repeat top left; 29 | } 30 | 31 | .debug-grid-16-solid { 32 | background:white url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzY3MkJEN0U2N0M1MTFFNkIyQkNFMjQwODEwMDIxNzEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzY3MkJEN0Y2N0M1MTFFNkIyQkNFMjQwODEwMDIxNzEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3QzY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3RDY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pve6J3kAAAAzSURBVHjaYvz//z8D0UDsMwMjSRoYP5Gq4SPNbRjVMEQ1fCRDg+in/6+J1AJUxsgAEGAA31BAJMS0GYEAAAAASUVORK5CYII=) repeat top left; 33 | } 34 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_debug.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | 9 | body { outline: 1px solid #2980B9!important; } 10 | article { outline: 1px solid #3498DB!important; } 11 | nav { outline: 1px solid #0088C3!important; } 12 | aside { outline: 1px solid #33A0CE!important; } 13 | section { outline: 1px solid #66B8DA!important; } 14 | header { outline: 1px solid #99CFE7!important; } 15 | footer { outline: 1px solid #CCE7F3!important; } 16 | h1 { outline: 1px solid #162544!important; } 17 | h2 { outline: 1px solid #314E6E!important; } 18 | h3 { outline: 1px solid #3E5E85!important; } 19 | h4 { outline: 1px solid #449BAF!important; } 20 | h5 { outline: 1px solid #C7D1CB!important; } 21 | h6 { outline: 1px solid #4371D0!important; } 22 | main { outline: 1px solid #2F4F90!important; } 23 | address { outline: 1px solid #1A2C51!important; } 24 | div { outline: 1px solid #036CDB!important; } 25 | 26 | 27 | p { outline: 1px solid #AC050B!important; } 28 | hr { outline: 1px solid #FF063F!important; } 29 | pre { outline: 1px solid #850440!important; } 30 | blockquote { outline: 1px solid #F1B8E7!important; } 31 | ol { outline: 1px solid #FF050C!important; } 32 | ul { outline: 1px solid #D90416!important; } 33 | li { outline: 1px solid #D90416!important; } 34 | dl { outline: 1px solid #FD3427!important; } 35 | dt { outline: 1px solid #FF0043!important; } 36 | dd { outline: 1px solid #E80174!important; } 37 | figure { outline: 1px solid #FF00BB!important; } 38 | figcaption { outline: 1px solid #BF0032!important; } 39 | 40 | 41 | 42 | table { outline: 1px solid #00CC99!important; } 43 | caption { outline: 1px solid #37FFC4!important; } 44 | thead { outline: 1px solid #98DACA!important; } 45 | tbody { outline: 1px solid #64A7A0!important; } 46 | tfoot { outline: 1px solid #22746B!important; } 47 | tr { outline: 1px solid #86C0B2!important; } 48 | th { outline: 1px solid #A1E7D6!important; } 49 | td { outline: 1px solid #3F5A54!important; } 50 | col { outline: 1px solid #6C9A8F!important; } 51 | colgroup { outline: 1px solid #6C9A9D!important; } 52 | 53 | 54 | button { outline: 1px solid #DA8301!important; } 55 | datalist { outline: 1px solid #C06000!important; } 56 | fieldset { outline: 1px solid #D95100!important; } 57 | form { outline: 1px solid #D23600!important; } 58 | input { outline: 1px solid #FCA600!important; } 59 | keygen { outline: 1px solid #B31E00!important; } 60 | label { outline: 1px solid #EE8900!important; } 61 | legend { outline: 1px solid #DE6D00!important; } 62 | meter { outline: 1px solid #E8630C!important; } 63 | optgroup { outline: 1px solid #B33600!important; } 64 | option { outline: 1px solid #FF8A00!important; } 65 | output { outline: 1px solid #FF9619!important; } 66 | progress { outline: 1px solid #E57C00!important; } 67 | select { outline: 1px solid #E26E0F!important; } 68 | textarea { outline: 1px solid #CC5400!important; } 69 | 70 | 71 | 72 | details { outline: 1px solid #33848F!important; } 73 | summary { outline: 1px solid #60A1A6!important; } 74 | command { outline: 1px solid #438DA1!important; } 75 | menu { outline: 1px solid #449DA6!important; } 76 | 77 | 78 | 79 | del { outline: 1px solid #BF0000!important; } 80 | ins { outline: 1px solid #400000!important; } 81 | 82 | 83 | 84 | img { outline: 1px solid #22746B!important; } 85 | iframe { outline: 1px solid #64A7A0!important; } 86 | embed { outline: 1px solid #98DACA!important; } 87 | object { outline: 1px solid #00CC99!important; } 88 | param { outline: 1px solid #37FFC4!important; } 89 | video { outline: 1px solid #6EE866!important; } 90 | audio { outline: 1px solid #027353!important; } 91 | source { outline: 1px solid #012426!important; } 92 | canvas { outline: 1px solid #A2F570!important; } 93 | track { outline: 1px solid #59A600!important; } 94 | map { outline: 1px solid #7BE500!important; } 95 | area { outline: 1px solid #305900!important; } 96 | 97 | 98 | 99 | a { outline: 1px solid #FF62AB!important; } 100 | em { outline: 1px solid #800B41!important; } 101 | strong { outline: 1px solid #FF1583!important; } 102 | i { outline: 1px solid #803156!important; } 103 | b { outline: 1px solid #CC1169!important; } 104 | u { outline: 1px solid #FF0430!important; } 105 | s { outline: 1px solid #F805E3!important; } 106 | small { outline: 1px solid #D107B2!important; } 107 | abbr { outline: 1px solid #4A0263!important; } 108 | q { outline: 1px solid #240018!important; } 109 | cite { outline: 1px solid #64003C!important; } 110 | dfn { outline: 1px solid #B4005A!important; } 111 | sub { outline: 1px solid #DBA0C8!important; } 112 | sup { outline: 1px solid #CC0256!important; } 113 | time { outline: 1px solid #D6606D!important; } 114 | code { outline: 1px solid #E04251!important; } 115 | kbd { outline: 1px solid #5E001F!important; } 116 | samp { outline: 1px solid #9C0033!important; } 117 | var { outline: 1px solid #D90047!important; } 118 | mark { outline: 1px solid #FF0053!important; } 119 | bdi { outline: 1px solid #BF3668!important; } 120 | bdo { outline: 1px solid #6F1400!important; } 121 | ruby { outline: 1px solid #FF7B93!important; } 122 | rt { outline: 1px solid #FF2F54!important; } 123 | rp { outline: 1px solid #803E49!important; } 124 | span { outline: 1px solid #CC2643!important; } 125 | br { outline: 1px solid #DB687D!important; } 126 | wbr { outline: 1px solid #DB175B!important; } 127 | 128 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_debug_children.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | DEBUG CHILDREN 11 | 12 | Just add the debug class to any element to see outlines on its 13 | children. 14 | 15 | */ 16 | 17 | .debug * { outline: 1px solid gold; } 18 | 19 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_display.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | DISPLAY 11 | Docs: http://tachyons.io/docs/layout/display 12 | 13 | Base: 14 | d = display 15 | 16 | Modifiers: 17 | n = none 18 | b = block 19 | ib = inline-block 20 | it = inline-table 21 | t = table 22 | tc = table-cell 23 | tr = table-row 24 | tcol = table-column 25 | tcolg = table-column-group 26 | 27 | Media Query Extensions: 28 | -ns = not-small 29 | -m = medium 30 | -l = large 31 | 32 | */ 33 | 34 | .dn { display: none; } 35 | .di { display: inline; } 36 | .db { display: block; } 37 | .dib { display: inline-block; } 38 | .dit { display: inline-table; } 39 | .dt { display: table; } 40 | .dtc { display: table-cell; } 41 | .dt-row { display: table-row; } 42 | .dt-row-group { display: table-row-group; } 43 | .dt-column { display: table-column; } 44 | .dt-column-group { display: table-column-group; } 45 | 46 | /* 47 | This will set table to full width and then 48 | all cells will be equal width 49 | */ 50 | .dt--fixed { 51 | table-layout: fixed; 52 | width: 100%; 53 | } 54 | 55 | @media #{$breakpoint-not-small} { 56 | .dn-ns { display: none; } 57 | .di-ns { display: inline; } 58 | .db-ns { display: block; } 59 | .dib-ns { display: inline-block; } 60 | .dit-ns { display: inline-table; } 61 | .dt-ns { display: table; } 62 | .dtc-ns { display: table-cell; } 63 | .dt-row-ns { display: table-row; } 64 | .dt-row-group-ns { display: table-row-group; } 65 | .dt-column-ns { display: table-column; } 66 | .dt-column-group-ns { display: table-column-group; } 67 | 68 | .dt--fixed-ns { 69 | table-layout: fixed; 70 | width: 100%; 71 | } 72 | } 73 | 74 | @media #{$breakpoint-medium} { 75 | .dn-m { display: none; } 76 | .di-m { display: inline; } 77 | .db-m { display: block; } 78 | .dib-m { display: inline-block; } 79 | .dit-m { display: inline-table; } 80 | .dt-m { display: table; } 81 | .dtc-m { display: table-cell; } 82 | .dt-row-m { display: table-row; } 83 | .dt-row-group-m { display: table-row-group; } 84 | .dt-column-m { display: table-column; } 85 | .dt-column-group-m { display: table-column-group; } 86 | 87 | .dt--fixed-m { 88 | table-layout: fixed; 89 | width: 100%; 90 | } 91 | } 92 | 93 | @media #{$breakpoint-large} { 94 | .dn-l { display: none; } 95 | .di-l { display: inline; } 96 | .db-l { display: block; } 97 | .dib-l { display: inline-block; } 98 | .dit-l { display: inline-table; } 99 | .dt-l { display: table; } 100 | .dtc-l { display: table-cell; } 101 | .dt-row-l { display: table-row; } 102 | .dt-row-group-l { display: table-row-group; } 103 | .dt-column-l { display: table-column; } 104 | .dt-column-group-l { display: table-column-group; } 105 | 106 | .dt--fixed-l { 107 | table-layout: fixed; 108 | width: 100%; 109 | } 110 | } 111 | 112 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_floats.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | FLOATS 11 | http://tachyons.io/docs/layout/floats/ 12 | 13 | 1. Floated elements are automatically rendered as block level elements. 14 | Setting floats to display inline will fix the double margin bug in 15 | ie6. You know... just in case. 16 | 17 | 2. Don't forget to clearfix your floats with .cf 18 | 19 | Base: 20 | f = float 21 | 22 | Modifiers: 23 | l = left 24 | r = right 25 | n = none 26 | 27 | Media Query Extensions: 28 | -ns = not-small 29 | -m = medium 30 | -l = large 31 | 32 | */ 33 | 34 | 35 | 36 | .fl { float: left; _display: inline; } 37 | .fr { float: right; _display: inline; } 38 | .fn { float: none; } 39 | 40 | @media #{$breakpoint-not-small} { 41 | .fl-ns { float: left; _display: inline; } 42 | .fr-ns { float: right; _display: inline; } 43 | .fn-ns { float: none; } 44 | } 45 | 46 | @media #{$breakpoint-medium} { 47 | .fl-m { float: left; _display: inline; } 48 | .fr-m { float: right; _display: inline; } 49 | .fn-m { float: none; } 50 | } 51 | 52 | @media #{$breakpoint-large} { 53 | .fl-l { float: left; _display: inline; } 54 | .fr-l { float: right; _display: inline; } 55 | .fn-l { float: none; } 56 | } 57 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_font-family.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | FONT FAMILY GROUPS 11 | Docs: http://tachyons.io/docs/typography/font-family/ 12 | 13 | */ 14 | 15 | 16 | .sans-serif { 17 | font-family: $sans-serif; 18 | } 19 | 20 | .serif { 21 | font-family: $serif; 22 | } 23 | 24 | .system-sans-serif { 25 | font-family: sans-serif; 26 | } 27 | 28 | .system-serif { 29 | font-family: serif; 30 | } 31 | 32 | 33 | /* Monospaced Typefaces (for code) */ 34 | 35 | /* From http://cssfontstack.com */ 36 | code, .code { 37 | font-family: Consolas, 38 | monaco, 39 | monospace; 40 | } 41 | 42 | .courier { 43 | font-family: 'Courier Next', 44 | courier, 45 | monospace; 46 | } 47 | 48 | 49 | /* Sans-Serif Typefaces */ 50 | 51 | .helvetica { 52 | font-family: 'helvetica neue', helvetica, 53 | sans-serif; 54 | } 55 | 56 | .avenir { 57 | font-family: 'avenir next', avenir, 58 | sans-serif; 59 | } 60 | 61 | 62 | /* Serif Typefaces */ 63 | 64 | .athelas { 65 | font-family: athelas, 66 | georgia, 67 | serif; 68 | } 69 | 70 | .georgia { 71 | font-family: georgia, 72 | serif; 73 | } 74 | 75 | .times { 76 | font-family: times, 77 | serif; 78 | } 79 | 80 | .bodoni { 81 | font-family: "Bodoni MT", 82 | serif; 83 | } 84 | 85 | .calisto { 86 | font-family: "Calisto MT", 87 | serif; 88 | } 89 | 90 | .garamond { 91 | font-family: garamond, 92 | serif; 93 | } 94 | 95 | .baskerville { 96 | font-family: baskerville, 97 | serif; 98 | } 99 | 100 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_font-style.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | FONT STYLE 11 | Docs: http://tachyons.io/docs/typography/font-style/ 12 | 13 | Media Query Extensions: 14 | -ns = not-small 15 | -m = medium 16 | -l = large 17 | 18 | */ 19 | 20 | .i { font-style: italic; } 21 | .fs-normal { font-style: normal; } 22 | 23 | @media #{$breakpoint-not-small} { 24 | .i-ns { font-style: italic; } 25 | .fs-normal-ns { font-style: normal; } 26 | } 27 | 28 | @media #{$breakpoint-medium} { 29 | .i-m { font-style: italic; } 30 | .fs-normal-m { font-style: normal; } 31 | } 32 | 33 | @media #{$breakpoint-large} { 34 | .i-l { font-style: italic; } 35 | .fs-normal-l { font-style: normal; } 36 | } 37 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_font-weight.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | FONT WEIGHT 11 | Docs: http://tachyons.io/docs/typography/font-weight/ 12 | 13 | Base 14 | fw = font-weight 15 | 16 | Modifiers: 17 | 1 = literal value 100 18 | 2 = literal value 200 19 | 3 = literal value 300 20 | 4 = literal value 400 21 | 5 = literal value 500 22 | 6 = literal value 600 23 | 7 = literal value 700 24 | 8 = literal value 800 25 | 9 = literal value 900 26 | 27 | Media Query Extensions: 28 | -ns = not-small 29 | -m = medium 30 | -l = large 31 | 32 | */ 33 | 34 | .normal { font-weight: normal; } 35 | .b { font-weight: bold; } 36 | .fw1 { font-weight: 100; } 37 | .fw2 { font-weight: 200; } 38 | .fw3 { font-weight: 300; } 39 | .fw4 { font-weight: 400; } 40 | .fw5 { font-weight: 500; } 41 | .fw6 { font-weight: 600; } 42 | .fw7 { font-weight: 700; } 43 | .fw8 { font-weight: 800; } 44 | .fw9 { font-weight: 900; } 45 | 46 | 47 | @media #{$breakpoint-not-small} { 48 | .normal-ns { font-weight: normal; } 49 | .b-ns { font-weight: bold; } 50 | .fw1-ns { font-weight: 100; } 51 | .fw2-ns { font-weight: 200; } 52 | .fw3-ns { font-weight: 300; } 53 | .fw4-ns { font-weight: 400; } 54 | .fw5-ns { font-weight: 500; } 55 | .fw6-ns { font-weight: 600; } 56 | .fw7-ns { font-weight: 700; } 57 | .fw8-ns { font-weight: 800; } 58 | .fw9-ns { font-weight: 900; } 59 | } 60 | 61 | @media #{$breakpoint-medium} { 62 | .normal-m { font-weight: normal; } 63 | .b-m { font-weight: bold; } 64 | .fw1-m { font-weight: 100; } 65 | .fw2-m { font-weight: 200; } 66 | .fw3-m { font-weight: 300; } 67 | .fw4-m { font-weight: 400; } 68 | .fw5-m { font-weight: 500; } 69 | .fw6-m { font-weight: 600; } 70 | .fw7-m { font-weight: 700; } 71 | .fw8-m { font-weight: 800; } 72 | .fw9-m { font-weight: 900; } 73 | } 74 | 75 | @media #{$breakpoint-large} { 76 | .normal-l { font-weight: normal; } 77 | .b-l { font-weight: bold; } 78 | .fw1-l { font-weight: 100; } 79 | .fw2-l { font-weight: 200; } 80 | .fw3-l { font-weight: 300; } 81 | .fw4-l { font-weight: 400; } 82 | .fw5-l { font-weight: 500; } 83 | .fw6-l { font-weight: 600; } 84 | .fw7-l { font-weight: 700; } 85 | .fw8-l { font-weight: 800; } 86 | .fw9-l { font-weight: 900; } 87 | } 88 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_forms.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | FORMS 11 | 12 | */ 13 | 14 | .input-reset { 15 | -webkit-appearance: none; 16 | -moz-appearance: none; 17 | } 18 | 19 | .button-reset::-moz-focus-inner, 20 | .input-reset::-moz-focus-inner { 21 | border: 0; 22 | padding: 0; 23 | } 24 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_gradients.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | GRADIENTS 11 | 12 | 13 | */ 14 | 15 | .gradient-blue { 16 | background-image: linear-gradient(#4570B0, #0081C2); 17 | } 18 | 19 | .gradient-blue-reversed { 20 | background-image: linear-gradient(#0081C2, #4570B0); 21 | } 22 | 23 | .gradient-light-blue { 24 | background-image: linear-gradient(#76D3FE, #008AE0); 25 | } 26 | 27 | .gradient-light-blue-reversed { 28 | background-image: linear-gradient(#008AE0, #76D3FE); 29 | } 30 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_heights.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | HEIGHTS 11 | Docs: http://tachyons.io/docs/layout/heights/ 12 | 13 | Base: 14 | h = height 15 | min-h = min-height 16 | min-vh = min-height vertical screen height 17 | vh = vertical screen height 18 | 19 | Modifiers 20 | 1 = 1st step in height scale 21 | 2 = 2nd step in height scale 22 | 3 = 3rd step in height scale 23 | 4 = 4th step in height scale 24 | 5 = 5th step in height scale 25 | 26 | -25 = literal value 25% 27 | -50 = literal value 50% 28 | -75 = literal value 75% 29 | -100 = literal value 100% 30 | 31 | -auto = string value of auto 32 | -inherit = string value of inherit 33 | 34 | Media Query Extensions: 35 | -ns = not-small 36 | -m = medium 37 | -l = large 38 | 39 | */ 40 | 41 | /* Height Scale */ 42 | 43 | .h1 { height: $height-1; } 44 | .h2 { height: $height-2; } 45 | .h3 { height: $height-3; } 46 | .h4 { height: $height-4; } 47 | .h5 { height: $height-5; } 48 | 49 | /* Height Percentages - Based off of height of parent */ 50 | 51 | .h-25 { height: 25%; } 52 | .h-50 { height: 50%; } 53 | .h-75 { height: 75%; } 54 | .h-100 { height: 100%; } 55 | 56 | .min-h-100 { min-height: 100%; } 57 | 58 | /* Screen Height Percentage */ 59 | 60 | .vh-25 { height: 25vh; } 61 | .vh-50 { height: 50vh; } 62 | .vh-75 { height: 75vh; } 63 | .vh-100 { height: 100vh; } 64 | 65 | .min-vh-100 { min-height: 100vh; } 66 | 67 | 68 | /* String Properties */ 69 | 70 | .h-auto { height: auto; } 71 | .h-inherit { height: inherit; } 72 | 73 | @media #{$breakpoint-not-small} { 74 | .h1-ns { height: $height-1; } 75 | .h2-ns { height: $height-2; } 76 | .h3-ns { height: $height-3; } 77 | .h4-ns { height: $height-4; } 78 | .h5-ns { height: $height-5; } 79 | .h-25-ns { height: 25%; } 80 | .h-50-ns { height: 50%; } 81 | .h-75-ns { height: 75%; } 82 | .h-100-ns { height: 100%; } 83 | .min-h-100-ns { min-height: 100%; } 84 | .vh-25-ns { height: 25vh; } 85 | .vh-50-ns { height: 50vh; } 86 | .vh-75-ns { height: 75vh; } 87 | .vh-100-ns { height: 100vh; } 88 | .min-vh-100-ns { min-height: 100vh; } 89 | .h-auto-ns { height: auto; } 90 | .h-inherit-ns { height: inherit; } 91 | } 92 | 93 | @media #{$breakpoint-medium} { 94 | .h1-m { height: $height-1; } 95 | .h2-m { height: $height-2; } 96 | .h3-m { height: $height-3; } 97 | .h4-m { height: $height-4; } 98 | .h5-m { height: $height-5; } 99 | .h-25-m { height: 25%; } 100 | .h-50-m { height: 50%; } 101 | .h-75-m { height: 75%; } 102 | .h-100-m { height: 100%; } 103 | .min-h-100-m { min-height: 100%; } 104 | .vh-25-m { height: 25vh; } 105 | .vh-50-m { height: 50vh; } 106 | .vh-75-m { height: 75vh; } 107 | .vh-100-m { height: 100vh; } 108 | .min-vh-100-m { min-height: 100vh; } 109 | .h-auto-m { height: auto; } 110 | .h-inherit-m { height: inherit; } 111 | } 112 | 113 | @media #{$breakpoint-large} { 114 | .h1-l { height: $height-1; } 115 | .h2-l { height: $height-2; } 116 | .h3-l { height: $height-3; } 117 | .h4-l { height: $height-4; } 118 | .h5-l { height: $height-5; } 119 | .h-25-l { height: 25%; } 120 | .h-50-l { height: 50%; } 121 | .h-75-l { height: 75%; } 122 | .h-100-l { height: 100%; } 123 | .min-h-100-l { min-height: 100%; } 124 | .vh-25-l { height: 25vh; } 125 | .vh-50-l { height: 50vh; } 126 | .vh-75-l { height: 75vh; } 127 | .vh-100-l { height: 100vh; } 128 | .min-vh-100-l { min-height: 100vh; } 129 | .h-auto-l { height: auto; } 130 | .h-inherit-l { height: inherit; } 131 | } 132 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_hovers.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | HOVER EFFECTS 11 | Docs: http://tachyons.io/docs/themes/hovers/ 12 | 13 | - Dim 14 | - Glow 15 | - Hide Child 16 | - Underline text 17 | - Grow 18 | - Pointer 19 | - Shadow 20 | 21 | */ 22 | 23 | /* 24 | 25 | Dim element on hover by adding the dim class. 26 | 27 | */ 28 | .dim { 29 | opacity: 1; 30 | transition: opacity .15s ease-in; 31 | } 32 | .dim:hover, 33 | .dim:focus { 34 | opacity: .5; 35 | transition: opacity .15s ease-in; 36 | } 37 | .dim:active { 38 | opacity: .8; transition: opacity .15s ease-out; 39 | } 40 | 41 | /* 42 | 43 | Animate opacity to 100% on hover by adding the glow class. 44 | 45 | */ 46 | .glow { 47 | transition: opacity .15s ease-in; 48 | } 49 | .glow:hover, 50 | .glow:focus { 51 | opacity: 1; 52 | transition: opacity .15s ease-in; 53 | } 54 | 55 | /* 56 | 57 | Hide child & reveal on hover: 58 | 59 | Put the hide-child class on a parent element and any nested element with the 60 | child class will be hidden and displayed on hover or focus. 61 | 62 |
63 |
Hidden until hover or focus
64 |
Hidden until hover or focus
65 |
Hidden until hover or focus
66 |
Hidden until hover or focus
67 |
68 | */ 69 | 70 | .hide-child .child { 71 | opacity: 0; 72 | transition: opacity .15s ease-in; 73 | } 74 | .hide-child:hover .child, 75 | .hide-child:focus .child, 76 | .hide-child:active .child { 77 | opacity: 1; 78 | transition: opacity .15s ease-in; 79 | } 80 | 81 | .underline-hover:hover, 82 | .underline-hover:focus { 83 | text-decoration: underline; 84 | } 85 | 86 | /* Can combine this with overflow-hidden to make background images grow on hover 87 | * even if you are using background-size: cover */ 88 | 89 | .grow { 90 | -moz-osx-font-smoothing: grayscale; 91 | backface-visibility: hidden; 92 | transform: translateZ(0); 93 | transition: transform 0.25s ease-out; 94 | } 95 | 96 | .grow:hover, 97 | .grow:focus { 98 | transform: scale(1.05); 99 | } 100 | 101 | .grow:active { 102 | transform: scale(.90); 103 | } 104 | 105 | .grow-large { 106 | -moz-osx-font-smoothing: grayscale; 107 | backface-visibility: hidden; 108 | transform: translateZ(0); 109 | transition: transform .25s ease-in-out; 110 | } 111 | 112 | .grow-large:hover, 113 | .grow-large:focus { 114 | transform: scale(1.2); 115 | } 116 | 117 | .grow-large:active { 118 | transform: scale(.95); 119 | } 120 | 121 | /* Add pointer on hover */ 122 | 123 | .pointer:hover { 124 | cursor: pointer; 125 | } 126 | 127 | /* 128 | Add shadow on hover. 129 | 130 | Performant box-shadow animation pattern from 131 | http://tobiasahlin.com/blog/how-to-animate-box-shadow/ 132 | */ 133 | 134 | .shadow-hover { 135 | cursor: pointer; 136 | position: relative; 137 | transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); 138 | } 139 | 140 | .shadow-hover::after { 141 | content: ''; 142 | box-shadow: 0px 0px 16px 2px rgba( 0, 0, 0, .2 ); 143 | border-radius: inherit; 144 | opacity: 0; 145 | position: absolute; 146 | top: 0; 147 | left: 0; 148 | width: 100%; 149 | height: 100%; 150 | z-index: -1; 151 | transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); 152 | } 153 | 154 | .shadow-hover:hover::after, 155 | .shadow-hover:focus::after { 156 | opacity: 1; 157 | } 158 | 159 | /* Combine with classes in skins and skins-pseudo for 160 | * many different transition possibilities. */ 161 | 162 | .bg-animate, 163 | .bg-animate:hover, 164 | .bg-animate:focus { 165 | transition: background-color .15s ease-in-out; 166 | } 167 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_images.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | IMAGES 11 | Docs: http://tachyons.io/docs/elements/images/ 12 | 13 | */ 14 | 15 | /* Responsive images! */ 16 | 17 | img { max-width: 100%; } 18 | 19 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_letter-spacing.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | LETTER SPACING 11 | Docs: http://tachyons.io/docs/typography/tracking/ 12 | 13 | Media Query Extensions: 14 | -ns = not-small 15 | -m = medium 16 | -l = large 17 | 18 | */ 19 | 20 | .tracked { letter-spacing: $letter-spacing-1; } 21 | .tracked-tight { letter-spacing: $letter-spacing-tight; } 22 | .tracked-mega { letter-spacing: $letter-spacing-2; } 23 | 24 | @media #{$breakpoint-not-small} { 25 | .tracked-ns { letter-spacing: $letter-spacing-1; } 26 | .tracked-tight-ns { letter-spacing: $letter-spacing-tight; } 27 | .tracked-mega-ns { letter-spacing: $letter-spacing-2; } 28 | } 29 | 30 | @media #{$breakpoint-medium} { 31 | .tracked-m { letter-spacing: $letter-spacing-1; } 32 | .tracked-tight-m { letter-spacing: $letter-spacing-tight; } 33 | .tracked-mega-m { letter-spacing: $letter-spacing-2; } 34 | } 35 | 36 | @media #{$breakpoint-large} { 37 | .tracked-l { letter-spacing: $letter-spacing-1; } 38 | .tracked-tight-l { letter-spacing: $letter-spacing-tight; } 39 | .tracked-mega-l { letter-spacing: $letter-spacing-2; } 40 | } 41 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_line-height.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | LINE HEIGHT / LEADING 11 | Docs: http://tachyons.io/docs/typography/line-height 12 | 13 | Media Query Extensions: 14 | -ns = not-small 15 | -m = medium 16 | -l = large 17 | 18 | */ 19 | 20 | .lh-solid { line-height: $line-height-solid; } 21 | .lh-title { line-height: $line-height-title; } 22 | .lh-copy { line-height: $line-height-copy; } 23 | 24 | @media #{$breakpoint-not-small} { 25 | .lh-solid-ns { line-height: $line-height-solid; } 26 | .lh-title-ns { line-height: $line-height-title; } 27 | .lh-copy-ns { line-height: $line-height-copy; } 28 | } 29 | 30 | @media #{$breakpoint-medium} { 31 | .lh-solid-m { line-height: $line-height-solid; } 32 | .lh-title-m { line-height: $line-height-title; } 33 | .lh-copy-m { line-height: $line-height-copy; } 34 | } 35 | 36 | @media #{$breakpoint-large} { 37 | .lh-solid-l { line-height: $line-height-solid; } 38 | .lh-title-l { line-height: $line-height-title; } 39 | .lh-copy-l { line-height: $line-height-copy; } 40 | } 41 | 42 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_links.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | LINKS 11 | Docs: http://tachyons.io/docs/elements/links/ 12 | 13 | */ 14 | 15 | .link { 16 | text-decoration: none; 17 | transition: color .15s ease-in; 18 | } 19 | 20 | .link:link, 21 | .link:visited { 22 | transition: color .15s ease-in; 23 | } 24 | .link:hover { 25 | transition: color .15s ease-in; 26 | } 27 | .link:active { 28 | transition: color .15s ease-in; 29 | } 30 | .link:focus { 31 | transition: color .15s ease-in; 32 | outline: 1px dotted currentColor; 33 | } 34 | 35 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_lists.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | LISTS 11 | http://tachyons.io/docs/elements/lists/ 12 | 13 | */ 14 | 15 | .list { list-style-type: none; } 16 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_max-widths.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | MAX WIDTHS 11 | Docs: http://tachyons.io/docs/layout/max-widths/ 12 | 13 | Base: 14 | mw = max-width 15 | 16 | Modifiers 17 | 1 = 1st step in width scale 18 | 2 = 2nd step in width scale 19 | 3 = 3rd step in width scale 20 | 4 = 4th step in width scale 21 | 5 = 5th step in width scale 22 | 6 = 6st step in width scale 23 | 7 = 7nd step in width scale 24 | 8 = 8rd step in width scale 25 | 9 = 9th step in width scale 26 | 27 | -100 = literal value 100% 28 | 29 | -none = string value none 30 | 31 | 32 | Media Query Extensions: 33 | -ns = not-small 34 | -m = medium 35 | -l = large 36 | 37 | */ 38 | 39 | /* Max Width Percentages */ 40 | 41 | .mw-100 { max-width: 100%; } 42 | 43 | /* Max Width Scale */ 44 | 45 | .mw1 { max-width: $max-width-1; } 46 | .mw2 { max-width: $max-width-2; } 47 | .mw3 { max-width: $max-width-3; } 48 | .mw4 { max-width: $max-width-4; } 49 | .mw5 { max-width: $max-width-5; } 50 | .mw6 { max-width: $max-width-6; } 51 | .mw7 { max-width: $max-width-7; } 52 | .mw8 { max-width: $max-width-8; } 53 | .mw9 { max-width: $max-width-9; } 54 | 55 | /* Max Width String Properties */ 56 | 57 | .mw-none { max-width: none; } 58 | 59 | @media #{$breakpoint-not-small} { 60 | .mw-100-ns { max-width: 100%; } 61 | 62 | .mw1-ns { max-width: $max-width-1; } 63 | .mw2-ns { max-width: $max-width-2; } 64 | .mw3-ns { max-width: $max-width-3; } 65 | .mw4-ns { max-width: $max-width-4; } 66 | .mw5-ns { max-width: $max-width-5; } 67 | .mw6-ns { max-width: $max-width-6; } 68 | .mw7-ns { max-width: $max-width-7; } 69 | .mw8-ns { max-width: $max-width-8; } 70 | .mw9-ns { max-width: $max-width-9; } 71 | 72 | .mw-none-ns { max-width: none; } 73 | } 74 | 75 | @media #{$breakpoint-medium} { 76 | .mw-100-m { max-width: 100%; } 77 | 78 | .mw1-m { max-width: $max-width-1; } 79 | .mw2-m { max-width: $max-width-2; } 80 | .mw3-m { max-width: $max-width-3; } 81 | .mw4-m { max-width: $max-width-4; } 82 | .mw5-m { max-width: $max-width-5; } 83 | .mw6-m { max-width: $max-width-6; } 84 | .mw7-m { max-width: $max-width-7; } 85 | .mw8-m { max-width: $max-width-8; } 86 | .mw9-m { max-width: $max-width-9; } 87 | 88 | .mw-none-m { max-width: none; } 89 | } 90 | 91 | @media #{$breakpoint-large} { 92 | .mw-100-l { max-width: 100%; } 93 | 94 | .mw1-l { max-width: $max-width-1; } 95 | .mw2-l { max-width: $max-width-2; } 96 | .mw3-l { max-width: $max-width-3; } 97 | .mw4-l { max-width: $max-width-4; } 98 | .mw5-l { max-width: $max-width-5; } 99 | .mw6-l { max-width: $max-width-6; } 100 | .mw7-l { max-width: $max-width-7; } 101 | .mw8-l { max-width: $max-width-8; } 102 | .mw9-l { max-width: $max-width-9; } 103 | 104 | .mw-none-l { max-width: none; } 105 | } 106 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_module-template.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | MODULE NAME 11 | 12 | Use this scaffolding to create or extend your own modules with tachyons 13 | style architecture. 14 | 15 | */ 16 | 17 | 18 | @media #{$breakpoint-not-small} { 19 | 20 | } 21 | 22 | @media #{$breakpoint-medium} { 23 | 24 | } 25 | 26 | @media #{$breakpoint-large} { 27 | 28 | } 29 | 30 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_negative-margins.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | NEGATIVE MARGINS 10 | 11 | Base: 12 | n = negative 13 | 14 | Modifiers: 15 | a = all 16 | t = top 17 | r = right 18 | b = bottom 19 | l = left 20 | 21 | 1 = 1st step in spacing scale 22 | 2 = 2nd step in spacing scale 23 | 3 = 3rd step in spacing scale 24 | 4 = 4th step in spacing scale 25 | 5 = 5th step in spacing scale 26 | 6 = 6th step in spacing scale 27 | 7 = 7th step in spacing scale 28 | 29 | Media Query Extensions: 30 | -ns = not-small 31 | -m = medium 32 | -l = large 33 | 34 | */ 35 | 36 | 37 | 38 | .na1 { margin: -$spacing-extra-small; } 39 | .na2 { margin: -$spacing-small; } 40 | .na3 { margin: -$spacing-medium; } 41 | .na4 { margin: -$spacing-large; } 42 | .na5 { margin: -$spacing-extra-large; } 43 | .na6 { margin: -$spacing-extra-extra-large; } 44 | .na7 { margin: -$spacing-extra-extra-extra-large; } 45 | 46 | .nl1 { margin-left: -$spacing-extra-small; } 47 | .nl2 { margin-left: -$spacing-small; } 48 | .nl3 { margin-left: -$spacing-medium; } 49 | .nl4 { margin-left: -$spacing-large; } 50 | .nl5 { margin-left: -$spacing-extra-large; } 51 | .nl6 { margin-left: -$spacing-extra-extra-large; } 52 | .nl7 { margin-left: -$spacing-extra-extra-extra-large; } 53 | 54 | .nr1 { margin-right: -$spacing-extra-small; } 55 | .nr2 { margin-right: -$spacing-small; } 56 | .nr3 { margin-right: -$spacing-medium; } 57 | .nr4 { margin-right: -$spacing-large; } 58 | .nr5 { margin-right: -$spacing-extra-large; } 59 | .nr6 { margin-right: -$spacing-extra-extra-large; } 60 | .nr7 { margin-right: -$spacing-extra-extra-extra-large; } 61 | 62 | .nb1 { margin-bottom: -$spacing-extra-small; } 63 | .nb2 { margin-bottom: -$spacing-small; } 64 | .nb3 { margin-bottom: -$spacing-medium; } 65 | .nb4 { margin-bottom: -$spacing-large; } 66 | .nb5 { margin-bottom: -$spacing-extra-large; } 67 | .nb6 { margin-bottom: -$spacing-extra-extra-large; } 68 | .nb7 { margin-bottom: -$spacing-extra-extra-extra-large; } 69 | 70 | .nt1 { margin-top: -$spacing-extra-small; } 71 | .nt2 { margin-top: -$spacing-small; } 72 | .nt3 { margin-top: -$spacing-medium; } 73 | .nt4 { margin-top: -$spacing-large; } 74 | .nt5 { margin-top: -$spacing-extra-large; } 75 | .nt6 { margin-top: -$spacing-extra-extra-large; } 76 | .nt7 { margin-top: -$spacing-extra-extra-extra-large; } 77 | 78 | @media #{$breakpoint-not-small} { 79 | 80 | .na1-ns { margin: -$spacing-extra-small; } 81 | .na2-ns { margin: -$spacing-small; } 82 | .na3-ns { margin: -$spacing-medium; } 83 | .na4-ns { margin: -$spacing-large; } 84 | .na5-ns { margin: -$spacing-extra-large; } 85 | .na6-ns { margin: -$spacing-extra-extra-large; } 86 | .na7-ns { margin: -$spacing-extra-extra-extra-large; } 87 | 88 | .nl1-ns { margin-left: -$spacing-extra-small; } 89 | .nl2-ns { margin-left: -$spacing-small; } 90 | .nl3-ns { margin-left: -$spacing-medium; } 91 | .nl4-ns { margin-left: -$spacing-large; } 92 | .nl5-ns { margin-left: -$spacing-extra-large; } 93 | .nl6-ns { margin-left: -$spacing-extra-extra-large; } 94 | .nl7-ns { margin-left: -$spacing-extra-extra-extra-large; } 95 | 96 | .nr1-ns { margin-right: -$spacing-extra-small; } 97 | .nr2-ns { margin-right: -$spacing-small; } 98 | .nr3-ns { margin-right: -$spacing-medium; } 99 | .nr4-ns { margin-right: -$spacing-large; } 100 | .nr5-ns { margin-right: -$spacing-extra-large; } 101 | .nr6-ns { margin-right: -$spacing-extra-extra-large; } 102 | .nr7-ns { margin-right: -$spacing-extra-extra-extra-large; } 103 | 104 | .nb1-ns { margin-bottom: -$spacing-extra-small; } 105 | .nb2-ns { margin-bottom: -$spacing-small; } 106 | .nb3-ns { margin-bottom: -$spacing-medium; } 107 | .nb4-ns { margin-bottom: -$spacing-large; } 108 | .nb5-ns { margin-bottom: -$spacing-extra-large; } 109 | .nb6-ns { margin-bottom: -$spacing-extra-extra-large; } 110 | .nb7-ns { margin-bottom: -$spacing-extra-extra-extra-large; } 111 | 112 | .nt1-ns { margin-top: -$spacing-extra-small; } 113 | .nt2-ns { margin-top: -$spacing-small; } 114 | .nt3-ns { margin-top: -$spacing-medium; } 115 | .nt4-ns { margin-top: -$spacing-large; } 116 | .nt5-ns { margin-top: -$spacing-extra-large; } 117 | .nt6-ns { margin-top: -$spacing-extra-extra-large; } 118 | .nt7-ns { margin-top: -$spacing-extra-extra-extra-large; } 119 | 120 | } 121 | 122 | @media #{$breakpoint-medium} { 123 | .na1-m { margin: -$spacing-extra-small; } 124 | .na2-m { margin: -$spacing-small; } 125 | .na3-m { margin: -$spacing-medium; } 126 | .na4-m { margin: -$spacing-large; } 127 | .na5-m { margin: -$spacing-extra-large; } 128 | .na6-m { margin: -$spacing-extra-extra-large; } 129 | .na7-m { margin: -$spacing-extra-extra-extra-large; } 130 | 131 | .nl1-m { margin-left: -$spacing-extra-small; } 132 | .nl2-m { margin-left: -$spacing-small; } 133 | .nl3-m { margin-left: -$spacing-medium; } 134 | .nl4-m { margin-left: -$spacing-large; } 135 | .nl5-m { margin-left: -$spacing-extra-large; } 136 | .nl6-m { margin-left: -$spacing-extra-extra-large; } 137 | .nl7-m { margin-left: -$spacing-extra-extra-extra-large; } 138 | 139 | .nr1-m { margin-right: -$spacing-extra-small; } 140 | .nr2-m { margin-right: -$spacing-small; } 141 | .nr3-m { margin-right: -$spacing-medium; } 142 | .nr4-m { margin-right: -$spacing-large; } 143 | .nr5-m { margin-right: -$spacing-extra-large; } 144 | .nr6-m { margin-right: -$spacing-extra-extra-large; } 145 | .nr7-m { margin-right: -$spacing-extra-extra-extra-large; } 146 | 147 | .nb1-m { margin-bottom: -$spacing-extra-small; } 148 | .nb2-m { margin-bottom: -$spacing-small; } 149 | .nb3-m { margin-bottom: -$spacing-medium; } 150 | .nb4-m { margin-bottom: -$spacing-large; } 151 | .nb5-m { margin-bottom: -$spacing-extra-large; } 152 | .nb6-m { margin-bottom: -$spacing-extra-extra-large; } 153 | .nb7-m { margin-bottom: -$spacing-extra-extra-extra-large; } 154 | 155 | .nt1-m { margin-top: -$spacing-extra-small; } 156 | .nt2-m { margin-top: -$spacing-small; } 157 | .nt3-m { margin-top: -$spacing-medium; } 158 | .nt4-m { margin-top: -$spacing-large; } 159 | .nt5-m { margin-top: -$spacing-extra-large; } 160 | .nt6-m { margin-top: -$spacing-extra-extra-large; } 161 | .nt7-m { margin-top: -$spacing-extra-extra-extra-large; } 162 | 163 | } 164 | 165 | @media #{$breakpoint-large} { 166 | .na1-l { margin: -$spacing-extra-small; } 167 | .na2-l { margin: -$spacing-small; } 168 | .na3-l { margin: -$spacing-medium; } 169 | .na4-l { margin: -$spacing-large; } 170 | .na5-l { margin: -$spacing-extra-large; } 171 | .na6-l { margin: -$spacing-extra-extra-large; } 172 | .na7-l { margin: -$spacing-extra-extra-extra-large; } 173 | 174 | .nl1-l { margin-left: -$spacing-extra-small; } 175 | .nl2-l { margin-left: -$spacing-small; } 176 | .nl3-l { margin-left: -$spacing-medium; } 177 | .nl4-l { margin-left: -$spacing-large; } 178 | .nl5-l { margin-left: -$spacing-extra-large; } 179 | .nl6-l { margin-left: -$spacing-extra-extra-large; } 180 | .nl7-l { margin-left: -$spacing-extra-extra-extra-large; } 181 | 182 | .nr1-l { margin-right: -$spacing-extra-small; } 183 | .nr2-l { margin-right: -$spacing-small; } 184 | .nr3-l { margin-right: -$spacing-medium; } 185 | .nr4-l { margin-right: -$spacing-large; } 186 | .nr5-l { margin-right: -$spacing-extra-large; } 187 | .nr6-l { margin-right: -$spacing-extra-extra-large; } 188 | .nr7-l { margin-right: -$spacing-extra-extra-extra-large; } 189 | 190 | .nb1-l { margin-bottom: -$spacing-extra-small; } 191 | .nb2-l { margin-bottom: -$spacing-small; } 192 | .nb3-l { margin-bottom: -$spacing-medium; } 193 | .nb4-l { margin-bottom: -$spacing-large; } 194 | .nb5-l { margin-bottom: -$spacing-extra-large; } 195 | .nb6-l { margin-bottom: -$spacing-extra-extra-large; } 196 | .nb7-l { margin-bottom: -$spacing-extra-extra-extra-large; } 197 | 198 | .nt1-l { margin-top: -$spacing-extra-small; } 199 | .nt2-l { margin-top: -$spacing-small; } 200 | .nt3-l { margin-top: -$spacing-medium; } 201 | .nt4-l { margin-top: -$spacing-large; } 202 | .nt5-l { margin-top: -$spacing-extra-large; } 203 | .nt6-l { margin-top: -$spacing-extra-extra-large; } 204 | .nt7-l { margin-top: -$spacing-extra-extra-extra-large; } 205 | } 206 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_nested.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | NESTED 11 | Tachyons module for styling nested elements 12 | that are generated by a cms. 13 | 14 | */ 15 | 16 | .nested-copy-line-height p, 17 | .nested-copy-line-height ul, 18 | .nested-copy-line-height ol { 19 | line-height: $line-height-copy; 20 | } 21 | 22 | .nested-headline-line-height h1, 23 | .nested-headline-line-height h2, 24 | .nested-headline-line-height h3, 25 | .nested-headline-line-height h4, 26 | .nested-headline-line-height h5, 27 | .nested-headline-line-height h6 { 28 | line-height: $font-size-4; 29 | } 30 | 31 | .nested-list-reset ul, 32 | .nested-list-reset ol { 33 | padding-left: 0; 34 | margin-left: 0; 35 | list-style-type: none; 36 | } 37 | 38 | .nested-copy-indent p+p { 39 | text-indent: $letter-spacing-1; 40 | margin-top: $spacing-none; 41 | margin-bottom: $spacing-none; 42 | } 43 | 44 | .nested-copy-seperator p+p { 45 | margin-top: $spacing-copy-separator; 46 | } 47 | 48 | .nested-img img { 49 | width: 100%; 50 | max-width: 100%; 51 | display: block; 52 | } 53 | 54 | .nested-links a { 55 | color: $blue; 56 | transition: color .15s ease-in; 57 | } 58 | 59 | .nested-links a:hover, 60 | .nested-links a:focus { 61 | color: $light-blue; 62 | transition: color .15s ease-in; 63 | } 64 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_opacity.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | OPACITY 11 | Docs: http://tachyons.io/docs/themes/opacity/ 12 | 13 | */ 14 | 15 | .o-100 { opacity: 1; } 16 | .o-90 { opacity: .9; } 17 | .o-80 { opacity: .8; } 18 | .o-70 { opacity: .7; } 19 | .o-60 { opacity: .6; } 20 | .o-50 { opacity: .5; } 21 | .o-40 { opacity: .4; } 22 | .o-30 { opacity: .3; } 23 | .o-20 { opacity: .2; } 24 | .o-10 { opacity: .1; } 25 | .o-05 { opacity: .05; } 26 | .o-025 { opacity: .025; } 27 | .o-0 { opacity: 0; } 28 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_outlines.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | OUTLINES 11 | 12 | Media Query Extensions: 13 | -ns = not-small 14 | -m = medium 15 | -l = large 16 | 17 | */ 18 | 19 | .outline { outline: 1px solid; } 20 | .outline-transparent { outline: 1px solid transparent; } 21 | .outline-0 { outline: 0; } 22 | 23 | @media #{$breakpoint-not-small} { 24 | .outline-ns { outline: 1px solid; } 25 | .outline-transparent-ns { outline: 1px solid transparent; } 26 | .outline-0-ns { outline: 0; } 27 | } 28 | 29 | @media #{$breakpoint-medium} { 30 | .outline-m { outline: 1px solid; } 31 | .outline-transparent-m { outline: 1px solid transparent; } 32 | .outline-0-m { outline: 0; } 33 | } 34 | 35 | @media #{$breakpoint-large} { 36 | .outline-l { outline: 1px solid; } 37 | .outline-transparent-l { outline: 1px solid transparent; } 38 | .outline-0-l { outline: 0; } 39 | } 40 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_overflow.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | OVERFLOW 11 | 12 | Media Query Extensions: 13 | -ns = not-small 14 | -m = medium 15 | -l = large 16 | 17 | */ 18 | 19 | .overflow-visible { overflow: visible; } 20 | .overflow-hidden { overflow: hidden; } 21 | .overflow-scroll { overflow: scroll; } 22 | .overflow-auto { overflow: auto; } 23 | 24 | .overflow-x-visible { overflow-x: visible; } 25 | .overflow-x-hidden { overflow-x: hidden; } 26 | .overflow-x-scroll { overflow-x: scroll; } 27 | .overflow-x-auto { overflow-x: auto; } 28 | 29 | .overflow-y-visible { overflow-y: visible; } 30 | .overflow-y-hidden { overflow-y: hidden; } 31 | .overflow-y-scroll { overflow-y: scroll; } 32 | .overflow-y-auto { overflow-y: auto; } 33 | 34 | @media #{$breakpoint-not-small} { 35 | .overflow-visible-ns { overflow: visible; } 36 | .overflow-hidden-ns { overflow: hidden; } 37 | .overflow-scroll-ns { overflow: scroll; } 38 | .overflow-auto-ns { overflow: auto; } 39 | .overflow-x-visible-ns { overflow-x: visible; } 40 | .overflow-x-hidden-ns { overflow-x: hidden; } 41 | .overflow-x-scroll-ns { overflow-x: scroll; } 42 | .overflow-x-auto-ns { overflow-x: auto; } 43 | 44 | .overflow-y-visible-ns { overflow-y: visible; } 45 | .overflow-y-hidden-ns { overflow-y: hidden; } 46 | .overflow-y-scroll-ns { overflow-y: scroll; } 47 | .overflow-y-auto-ns { overflow-y: auto; } 48 | } 49 | 50 | @media #{$breakpoint-medium} { 51 | .overflow-visible-m { overflow: visible; } 52 | .overflow-hidden-m { overflow: hidden; } 53 | .overflow-scroll-m { overflow: scroll; } 54 | .overflow-auto-m { overflow: auto; } 55 | 56 | .overflow-x-visible-m { overflow-x: visible; } 57 | .overflow-x-hidden-m { overflow-x: hidden; } 58 | .overflow-x-scroll-m { overflow-x: scroll; } 59 | .overflow-x-auto-m { overflow-x: auto; } 60 | 61 | .overflow-y-visible-m { overflow-y: visible; } 62 | .overflow-y-hidden-m { overflow-y: hidden; } 63 | .overflow-y-scroll-m { overflow-y: scroll; } 64 | .overflow-y-auto-m { overflow-y: auto; } 65 | } 66 | 67 | @media #{$breakpoint-large} { 68 | .overflow-visible-l { overflow: visible; } 69 | .overflow-hidden-l { overflow: hidden; } 70 | .overflow-scroll-l { overflow: scroll; } 71 | .overflow-auto-l { overflow: auto; } 72 | 73 | .overflow-x-visible-l { overflow-x: visible; } 74 | .overflow-x-hidden-l { overflow-x: hidden; } 75 | .overflow-x-scroll-l { overflow-x: scroll; } 76 | .overflow-x-auto-l { overflow-x: auto; } 77 | 78 | .overflow-y-visible-l { overflow-y: visible; } 79 | .overflow-y-hidden-l { overflow-y: hidden; } 80 | .overflow-y-scroll-l { overflow-y: scroll; } 81 | .overflow-y-auto-l { overflow-y: auto; } 82 | } 83 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_position.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | POSITIONING 11 | Docs: http://tachyons.io/docs/layout/position/ 12 | 13 | Media Query Extensions: 14 | -ns = not-small 15 | -m = medium 16 | -l = large 17 | 18 | */ 19 | 20 | .static { position: static; } 21 | .relative { position: relative; } 22 | .absolute { position: absolute; } 23 | .fixed { position: fixed; } 24 | 25 | @media #{$breakpoint-not-small} { 26 | .static-ns { position: static; } 27 | .relative-ns { position: relative; } 28 | .absolute-ns { position: absolute; } 29 | .fixed-ns { position: fixed; } 30 | } 31 | 32 | @media #{$breakpoint-medium} { 33 | .static-m { position: static; } 34 | .relative-m { position: relative; } 35 | .absolute-m { position: absolute; } 36 | .fixed-m { position: fixed; } 37 | } 38 | 39 | @media #{$breakpoint-large} { 40 | .static-l { position: static; } 41 | .relative-l { position: relative; } 42 | .absolute-l { position: absolute; } 43 | .fixed-l { position: fixed; } 44 | } 45 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_rotations.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | ROTATIONS 11 | 12 | */ 13 | 14 | .rotate-45 { transform: rotate(45deg); } 15 | .rotate-90 { transform: rotate(90deg); } 16 | .rotate-135 { transform: rotate(135deg); } 17 | .rotate-180 { transform: rotate(180deg); } 18 | .rotate-225 { transform: rotate(225deg); } 19 | .rotate-270 { transform: rotate(270deg); } 20 | .rotate-315 { transform: rotate(315deg); } 21 | 22 | @media #{$breakpoint-not-small}{ 23 | .rotate-45-ns { transform: rotate(45deg); } 24 | .rotate-90-ns { transform: rotate(90deg); } 25 | .rotate-135-ns { transform: rotate(135deg); } 26 | .rotate-180-ns { transform: rotate(180deg); } 27 | .rotate-225-ns { transform: rotate(225deg); } 28 | .rotate-270-ns { transform: rotate(270deg); } 29 | .rotate-315-ns { transform: rotate(315deg); } 30 | } 31 | 32 | @media #{$breakpoint-medium}{ 33 | .rotate-45-m { transform: rotate(45deg); } 34 | .rotate-90-m { transform: rotate(90deg); } 35 | .rotate-135-m { transform: rotate(135deg); } 36 | .rotate-180-m { transform: rotate(180deg); } 37 | .rotate-225-m { transform: rotate(225deg); } 38 | .rotate-270-m { transform: rotate(270deg); } 39 | .rotate-315-m { transform: rotate(315deg); } 40 | } 41 | 42 | @media #{$breakpoint-large}{ 43 | .rotate-45-l { transform: rotate(45deg); } 44 | .rotate-90-l { transform: rotate(90deg); } 45 | .rotate-135-l { transform: rotate(135deg); } 46 | .rotate-180-l { transform: rotate(180deg); } 47 | .rotate-225-l { transform: rotate(225deg); } 48 | .rotate-270-l { transform: rotate(270deg); } 49 | .rotate-315-l { transform: rotate(315deg); } 50 | } 51 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_skins.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | SKINS 11 | Docs: http://tachyons.io/docs/themes/skins/ 12 | 13 | Classes for setting foreground and background colors on elements. 14 | If you haven't declared a border color, but set border on an element, it will 15 | be set to the current text color. 16 | 17 | */ 18 | 19 | /* Text colors */ 20 | 21 | .black-90 { color: $black-90; } 22 | .black-80 { color: $black-80; } 23 | .black-70 { color: $black-70; } 24 | .black-60 { color: $black-60; } 25 | .black-50 { color: $black-50; } 26 | .black-40 { color: $black-40; } 27 | .black-30 { color: $black-30; } 28 | .black-20 { color: $black-20; } 29 | .black-10 { color: $black-10; } 30 | .black-05 { color: $black-05; } 31 | 32 | .white-90 { color: $white-90; } 33 | .white-80 { color: $white-80; } 34 | .white-70 { color: $white-70; } 35 | .white-60 { color: $white-60; } 36 | .white-50 { color: $white-50; } 37 | .white-40 { color: $white-40; } 38 | .white-30 { color: $white-30; } 39 | .white-20 { color: $white-20; } 40 | .white-10 { color: $white-10; } 41 | 42 | .black { color: $black; } 43 | .near-black { color: $near-black; } 44 | .dark-gray { color: $dark-gray; } 45 | .mid-gray { color: $mid-gray; } 46 | .gray { color: $gray; } 47 | .silver { color: $silver; } 48 | .light-silver { color: $light-silver; } 49 | .moon-gray { color: $moon-gray; } 50 | .light-gray { color: $light-gray; } 51 | .near-white { color: $near-white; } 52 | .white { color: $white; } 53 | 54 | .dark-red { color: $dark-red; } 55 | .red { color: $red; } 56 | .light-red { color: $light-red; } 57 | .orange { color: $orange; } 58 | .gold { color: $gold; } 59 | .yellow { color: $yellow; } 60 | .light-yellow { color: $light-yellow; } 61 | .purple { color: $purple; } 62 | .light-purple { color: $light-purple; } 63 | .dark-pink { color: $dark-pink; } 64 | .hot-pink { color: $hot-pink; } 65 | .pink { color: $pink; } 66 | .light-pink { color: $light-pink; } 67 | .dark-green { color: $dark-green; } 68 | .green { color: $green; } 69 | .light-green { color: $light-green; } 70 | .navy { color: $navy; } 71 | .dark-blue { color: $dark-blue; } 72 | .blue { color: $blue; } 73 | .light-blue { color: $light-blue; } 74 | .lightest-blue { color: $lightest-blue; } 75 | .washed-blue { color: $washed-blue; } 76 | .washed-green { color: $washed-green; } 77 | .washed-yellow { color: $washed-yellow; } 78 | .washed-red { color: $washed-red; } 79 | .color-inherit { color: inherit; } 80 | 81 | .bg-black-90 { background-color: $black-90; } 82 | .bg-black-80 { background-color: $black-80; } 83 | .bg-black-70 { background-color: $black-70; } 84 | .bg-black-60 { background-color: $black-60; } 85 | .bg-black-50 { background-color: $black-50; } 86 | .bg-black-40 { background-color: $black-40; } 87 | .bg-black-30 { background-color: $black-30; } 88 | .bg-black-20 { background-color: $black-20; } 89 | .bg-black-10 { background-color: $black-10; } 90 | .bg-black-05 { background-color: $black-05; } 91 | .bg-white-90 { background-color: $white-90; } 92 | .bg-white-80 { background-color: $white-80; } 93 | .bg-white-70 { background-color: $white-70; } 94 | .bg-white-60 { background-color: $white-60; } 95 | .bg-white-50 { background-color: $white-50; } 96 | .bg-white-40 { background-color: $white-40; } 97 | .bg-white-30 { background-color: $white-30; } 98 | .bg-white-20 { background-color: $white-20; } 99 | .bg-white-10 { background-color: $white-10; } 100 | 101 | 102 | 103 | /* Background colors */ 104 | 105 | .bg-black { background-color: $black; } 106 | .bg-near-black { background-color: $near-black; } 107 | .bg-dark-gray { background-color: $dark-gray; } 108 | .bg-mid-gray { background-color: $mid-gray; } 109 | .bg-gray { background-color: $gray; } 110 | .bg-silver { background-color: $silver; } 111 | .bg-light-silver { background-color: $light-silver; } 112 | .bg-moon-gray { background-color: $moon-gray; } 113 | .bg-light-gray { background-color: $light-gray; } 114 | .bg-near-white { background-color: $near-white; } 115 | .bg-white { background-color: $white; } 116 | .bg-transparent { background-color: $transparent; } 117 | 118 | .bg-dark-red { background-color: $dark-red; } 119 | .bg-red { background-color: $red; } 120 | .bg-light-red { background-color: $light-red; } 121 | .bg-orange { background-color: $orange; } 122 | .bg-gold { background-color: $gold; } 123 | .bg-yellow { background-color: $yellow; } 124 | .bg-light-yellow { background-color: $light-yellow; } 125 | .bg-purple { background-color: $purple; } 126 | .bg-light-purple { background-color: $light-purple; } 127 | .bg-dark-pink { background-color: $dark-pink; } 128 | .bg-hot-pink { background-color: $hot-pink; } 129 | .bg-pink { background-color: $pink; } 130 | .bg-light-pink { background-color: $light-pink; } 131 | .bg-dark-green { background-color: $dark-green; } 132 | .bg-green { background-color: $green; } 133 | .bg-light-green { background-color: $light-green; } 134 | .bg-navy { background-color: $navy; } 135 | .bg-dark-blue { background-color: $dark-blue; } 136 | .bg-blue { background-color: $blue; } 137 | .bg-light-blue { background-color: $light-blue; } 138 | .bg-lightest-blue { background-color: $lightest-blue; } 139 | .bg-washed-blue { background-color: $washed-blue; } 140 | .bg-washed-green { background-color: $washed-green; } 141 | .bg-washed-yellow { background-color: $washed-yellow; } 142 | .bg-washed-red { background-color: $washed-red; } 143 | .bg-inherit { background-color: inherit; } 144 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_styles.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | STYLES 11 | 12 | Add custom styles here. 13 | 14 | */ 15 | 16 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_tables.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | TABLES 11 | Docs: http://tachyons.io/docs/elements/tables/ 12 | 13 | */ 14 | 15 | .collapse { 16 | border-collapse: collapse; 17 | border-spacing: 0; 18 | } 19 | 20 | .striped--light-silver:nth-child(odd) { 21 | background-color: $light-silver; 22 | } 23 | 24 | .striped--moon-gray:nth-child(odd) { 25 | background-color: $moon-gray; 26 | } 27 | 28 | .striped--light-gray:nth-child(odd) { 29 | background-color: $light-gray; 30 | } 31 | 32 | .striped--near-white:nth-child(odd) { 33 | background-color: $near-white; 34 | } 35 | 36 | .stripe-light:nth-child(odd) { 37 | background-color: $white-10; 38 | } 39 | 40 | .stripe-dark:nth-child(odd) { 41 | background-color: $black-10; 42 | } 43 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_text-align.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | TEXT ALIGN 11 | Docs: http://tachyons.io/docs/typography/text-align/ 12 | 13 | Base 14 | t = text-align 15 | 16 | Modifiers 17 | l = left 18 | r = right 19 | c = center 20 | 21 | Media Query Extensions: 22 | -ns = not-small 23 | -m = medium 24 | -l = large 25 | 26 | */ 27 | 28 | .tl { text-align: left; } 29 | .tr { text-align: right; } 30 | .tc { text-align: center; } 31 | 32 | @media #{$breakpoint-not-small} { 33 | .tl-ns { text-align: left; } 34 | .tr-ns { text-align: right; } 35 | .tc-ns { text-align: center; } 36 | } 37 | 38 | @media #{$breakpoint-medium} { 39 | .tl-m { text-align: left; } 40 | .tr-m { text-align: right; } 41 | .tc-m { text-align: center; } 42 | } 43 | 44 | @media #{$breakpoint-large} { 45 | .tl-l { text-align: left; } 46 | .tr-l { text-align: right; } 47 | .tc-l { text-align: center; } 48 | } 49 | 50 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_text-decoration.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | TEXT DECORATION 11 | Docs: http://tachyons.io/docs/typography/text-decoration/ 12 | 13 | 14 | Media Query Extensions: 15 | -ns = not-small 16 | -m = medium 17 | -l = large 18 | 19 | */ 20 | 21 | .strike { text-decoration: line-through; } 22 | .underline { text-decoration: underline; } 23 | .no-underline { text-decoration: none; } 24 | 25 | 26 | @media #{$breakpoint-not-small} { 27 | .strike-ns { text-decoration: line-through; } 28 | .underline-ns { text-decoration: underline; } 29 | .no-underline-ns { text-decoration: none; } 30 | } 31 | 32 | @media #{$breakpoint-medium} { 33 | .strike-m { text-decoration: line-through; } 34 | .underline-m { text-decoration: underline; } 35 | .no-underline-m { text-decoration: none; } 36 | } 37 | 38 | @media #{$breakpoint-large} { 39 | .strike-l { text-decoration: line-through; } 40 | .underline-l { text-decoration: underline; } 41 | .no-underline-l { text-decoration: none; } 42 | } 43 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_text-transform.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | TEXT TRANSFORM 11 | Docs: http://tachyons.io/docs/typography/text-transform/ 12 | 13 | Base: 14 | tt = text-transform 15 | 16 | Modifiers 17 | c = capitalize 18 | l = lowercase 19 | u = uppercase 20 | n = none 21 | 22 | Media Query Extensions: 23 | -ns = not-small 24 | -m = medium 25 | -l = large 26 | 27 | */ 28 | 29 | .ttc { text-transform: capitalize; } 30 | .ttl { text-transform: lowercase; } 31 | .ttu { text-transform: uppercase; } 32 | .ttn { text-transform: none; } 33 | 34 | @media #{$breakpoint-not-small} { 35 | .ttc-ns { text-transform: capitalize; } 36 | .ttl-ns { text-transform: lowercase; } 37 | .ttu-ns { text-transform: uppercase; } 38 | .ttn-ns { text-transform: none; } 39 | } 40 | 41 | @media #{$breakpoint-medium} { 42 | .ttc-m { text-transform: capitalize; } 43 | .ttl-m { text-transform: lowercase; } 44 | .ttu-m { text-transform: uppercase; } 45 | .ttn-m { text-transform: none; } 46 | } 47 | 48 | @media #{$breakpoint-large} { 49 | .ttc-l { text-transform: capitalize; } 50 | .ttl-l { text-transform: lowercase; } 51 | .ttu-l { text-transform: uppercase; } 52 | .ttn-l { text-transform: none; } 53 | } 54 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_type-scale.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | TYPE SCALE 11 | Docs: http://tachyons.io/docs/typography/scale/ 12 | 13 | Base: 14 | f = font-size 15 | 16 | Modifiers 17 | 1 = 1st step in size scale 18 | 2 = 2nd step in size scale 19 | 3 = 3rd step in size scale 20 | 4 = 4th step in size scale 21 | 5 = 5th step in size scale 22 | 6 = 6th step in size scale 23 | 24 | Media Query Extensions: 25 | -ns = not-small 26 | -m = medium 27 | -l = large 28 | */ 29 | 30 | /* 31 | * For Hero/Marketing Titles 32 | * 33 | * These generally are too large for mobile 34 | * so be careful using them on smaller screens. 35 | * */ 36 | 37 | .f-6, 38 | .f-headline { 39 | font-size: $font-size-headline; 40 | } 41 | .f-5, 42 | .f-subheadline { 43 | font-size: $font-size-subheadline; 44 | } 45 | 46 | 47 | /* Type Scale */ 48 | 49 | 50 | .f1 { font-size: $font-size-1; } 51 | .f2 { font-size: $font-size-2; } 52 | .f3 { font-size: $font-size-3; } 53 | .f4 { font-size: $font-size-4; } 54 | .f5 { font-size: $font-size-5; } 55 | .f6 { font-size: $font-size-6; } 56 | .f7 { font-size: $font-size-7; } 57 | 58 | @media #{$breakpoint-not-small}{ 59 | .f-6-ns, 60 | .f-headline-ns { font-size: $font-size-headline; } 61 | .f-5-ns, 62 | .f-subheadline-ns { font-size: $font-size-subheadline; } 63 | .f1-ns { font-size: $font-size-1; } 64 | .f2-ns { font-size: $font-size-2; } 65 | .f3-ns { font-size: $font-size-3; } 66 | .f4-ns { font-size: $font-size-4; } 67 | .f5-ns { font-size: $font-size-5; } 68 | .f6-ns { font-size: $font-size-6; } 69 | .f7-ns { font-size: $font-size-7; } 70 | } 71 | 72 | @media #{$breakpoint-medium} { 73 | .f-6-m, 74 | .f-headline-m { font-size: $font-size-headline; } 75 | .f-5-m, 76 | .f-subheadline-m { font-size: $font-size-subheadline; } 77 | .f1-m { font-size: $font-size-1; } 78 | .f2-m { font-size: $font-size-2; } 79 | .f3-m { font-size: $font-size-3; } 80 | .f4-m { font-size: $font-size-4; } 81 | .f5-m { font-size: $font-size-5; } 82 | .f6-m { font-size: $font-size-6; } 83 | .f7-m { font-size: $font-size-7; } 84 | } 85 | 86 | @media #{$breakpoint-large} { 87 | .f-6-l, 88 | .f-headline-l { 89 | font-size: $font-size-headline; 90 | } 91 | .f-5-l, 92 | .f-subheadline-l { 93 | font-size: $font-size-subheadline; 94 | } 95 | .f1-l { font-size: $font-size-1; } 96 | .f2-l { font-size: $font-size-2; } 97 | .f3-l { font-size: $font-size-3; } 98 | .f4-l { font-size: $font-size-4; } 99 | .f5-l { font-size: $font-size-5; } 100 | .f6-l { font-size: $font-size-6; } 101 | .f7-l { font-size: $font-size-7; } 102 | } 103 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_typography.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | TYPOGRAPHY 11 | http://tachyons.io/docs/typography/measure/ 12 | 13 | Media Query Extensions: 14 | -ns = not-small 15 | -m = medium 16 | -l = large 17 | 18 | */ 19 | 20 | 21 | 22 | /* Measure is limited to ~66 characters */ 23 | .measure { 24 | max-width: $measure; 25 | } 26 | 27 | /* Measure is limited to ~80 characters */ 28 | .measure-wide { 29 | max-width: $measure-wide; 30 | } 31 | 32 | /* Measure is limited to ~45 characters */ 33 | .measure-narrow { 34 | max-width: $measure-narrow; 35 | } 36 | 37 | /* Book paragraph style - paragraphs are indented with no vertical spacing. */ 38 | .indent { 39 | text-indent: 1em; 40 | margin-top: 0; 41 | margin-bottom: 0; 42 | } 43 | 44 | .small-caps { 45 | font-variant: small-caps; 46 | } 47 | 48 | /* Combine this class with a width to truncate text (or just leave as is to truncate at width of containing element. */ 49 | 50 | .truncate { 51 | white-space: nowrap; 52 | overflow: hidden; 53 | text-overflow: ellipsis; 54 | } 55 | 56 | @media #{$breakpoint-not-small} { 57 | .measure-ns { 58 | max-width: $measure; 59 | } 60 | .measure-wide-ns { 61 | max-width: $measure-wide; 62 | } 63 | .measure-narrow-ns { 64 | max-width: $measure-narrow; 65 | } 66 | .indent-ns { 67 | text-indent: 1em; 68 | margin-top: 0; 69 | margin-bottom: 0; 70 | } 71 | .small-caps-ns { 72 | font-variant: small-caps; 73 | } 74 | .truncate-ns { 75 | white-space: nowrap; 76 | overflow: hidden; 77 | text-overflow: ellipsis; 78 | } 79 | } 80 | 81 | @media #{$breakpoint-medium} { 82 | .measure-m { 83 | max-width: $measure; 84 | } 85 | .measure-wide-m { 86 | max-width: $measure-wide; 87 | } 88 | .measure-narrow-m { 89 | max-width: $measure-narrow; 90 | } 91 | .indent-m { 92 | text-indent: 1em; 93 | margin-top: 0; 94 | margin-bottom: 0; 95 | } 96 | .small-caps-m { 97 | font-variant: small-caps; 98 | } 99 | .truncate-m { 100 | white-space: nowrap; 101 | overflow: hidden; 102 | text-overflow: ellipsis; 103 | } 104 | } 105 | 106 | @media #{$breakpoint-large} { 107 | .measure-l { 108 | max-width: $measure; 109 | } 110 | .measure-wide-l { 111 | max-width: $measure-wide; 112 | } 113 | .measure-narrow-l { 114 | max-width: $measure-narrow; 115 | } 116 | .indent-l { 117 | text-indent: 1em; 118 | margin-top: 0; 119 | margin-bottom: 0; 120 | } 121 | .small-caps-l { 122 | font-variant: small-caps; 123 | } 124 | .truncate-l { 125 | white-space: nowrap; 126 | overflow: hidden; 127 | text-overflow: ellipsis; 128 | } 129 | } 130 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_utilities.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | UTILITIES 11 | 12 | Media Query Extensions: 13 | -ns = not-small 14 | -m = medium 15 | -l = large 16 | 17 | */ 18 | 19 | /* Equivalent to .overflow-y-scroll */ 20 | .overflow-container { 21 | overflow-y: scroll; 22 | } 23 | 24 | .center { 25 | margin-right: auto; 26 | margin-left: auto; 27 | } 28 | 29 | .mr-auto { margin-right: auto; } 30 | .ml-auto { margin-left: auto; } 31 | 32 | @media #{$breakpoint-not-small}{ 33 | .center-ns { 34 | margin-right: auto; 35 | margin-left: auto; 36 | } 37 | .mr-auto-ns { margin-right: auto; } 38 | .ml-auto-ns { margin-left: auto; } 39 | } 40 | 41 | @media #{$breakpoint-medium}{ 42 | .center-m { 43 | margin-right: auto; 44 | margin-left: auto; 45 | } 46 | .mr-auto-m { margin-right: auto; } 47 | .ml-auto-m { margin-left: auto; } 48 | } 49 | 50 | @media #{$breakpoint-large}{ 51 | .center-l { 52 | margin-right: auto; 53 | margin-left: auto; 54 | } 55 | .mr-auto-l { margin-right: auto; } 56 | .ml-auto-l { margin-left: auto; } 57 | } 58 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_variables.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | $sans-serif: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, helvetica, 'helvetica neue', ubuntu, roboto, noto, 'segoe ui', arial, sans-serif !default; 5 | $serif: georgia, serif !default; 6 | $code: consolas, monaco, monospace !default; 7 | $font-size-headline: 6rem !default; 8 | $font-size-subheadline: 5rem !default; 9 | $font-size-1: 3rem !default; 10 | $font-size-2: 2.25rem !default; 11 | $font-size-3: 1.5rem !default; 12 | $font-size-4: 1.25rem !default; 13 | $font-size-5: 1rem !default; 14 | $font-size-6: .875rem !default; 15 | $font-size-7: .75rem !default; 16 | $letter-spacing-tight: -.05em !default; 17 | $letter-spacing-1: .1em !default; 18 | $letter-spacing-2: .25em !default; 19 | $line-height-solid: 1 !default; 20 | $line-height-title: 1.25 !default; 21 | $line-height-copy: 1.5 !default; 22 | $measure: 30em !default; 23 | $measure-narrow: 20em !default; 24 | $measure-wide: 34em !default; 25 | $spacing-none: 0 !default; 26 | $spacing-extra-small: .25rem !default; 27 | $spacing-small: .5rem !default; 28 | $spacing-medium: 1rem !default; 29 | $spacing-large: 2rem !default; 30 | $spacing-extra-large: 4rem !default; 31 | $spacing-extra-extra-large: 8rem !default; 32 | $spacing-extra-extra-extra-large: 16rem !default; 33 | $spacing-copy-separator: 1.5em !default; 34 | $height-1: 1rem !default; 35 | $height-2: 2rem !default; 36 | $height-3: 4rem !default; 37 | $height-4: 8rem !default; 38 | $height-5: 16rem !default; 39 | $width-1: 1rem !default; 40 | $width-2: 2rem !default; 41 | $width-3: 4rem !default; 42 | $width-4: 8rem !default; 43 | $width-5: 16rem !default; 44 | $max-width-1: 1rem !default; 45 | $max-width-2: 2rem !default; 46 | $max-width-3: 4rem !default; 47 | $max-width-4: 8rem !default; 48 | $max-width-5: 16rem !default; 49 | $max-width-6: 32rem !default; 50 | $max-width-7: 48rem !default; 51 | $max-width-8: 64rem !default; 52 | $max-width-9: 96rem !default; 53 | $border-radius-none: 0 !default; 54 | $border-radius-1: .125rem !default; 55 | $border-radius-2: .25rem !default; 56 | $border-radius-3: .5rem !default; 57 | $border-radius-4: 1rem !default; 58 | $border-radius-circle: 100% !default; 59 | $border-radius-pill: 9999px !default; 60 | $border-width-none: 0 !default; 61 | $border-width-1: .125rem !default; 62 | $border-width-2: .25rem !default; 63 | $border-width-3: .5rem !default; 64 | $border-width-4: 1rem !default; 65 | $border-width-5: 2rem !default; 66 | $box-shadow-1: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ) !default; 67 | $box-shadow-2: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ) !default; 68 | $box-shadow-3: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ) !default; 69 | $box-shadow-4: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ) !default; 70 | $box-shadow-5: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ) !default; 71 | $black: #000 !default; 72 | $near-black: #111 !default; 73 | $dark-gray: #333 !default; 74 | $mid-gray: #555 !default; 75 | $gray: #777 !default; 76 | $silver: #999 !default; 77 | $light-silver: #aaa !default; 78 | $moon-gray: #ccc !default; 79 | $light-gray: #eee !default; 80 | $near-white: #f4f4f4 !default; 81 | $white: #fff !default; 82 | $transparent: transparent !default; 83 | $black-90: rgba(0,0,0,.9) !default; 84 | $black-80: rgba(0,0,0,.8) !default; 85 | $black-70: rgba(0,0,0,.7) !default; 86 | $black-60: rgba(0,0,0,.6) !default; 87 | $black-50: rgba(0,0,0,.5) !default; 88 | $black-40: rgba(0,0,0,.4) !default; 89 | $black-30: rgba(0,0,0,.3) !default; 90 | $black-20: rgba(0,0,0,.2) !default; 91 | $black-10: rgba(0,0,0,.1) !default; 92 | $black-05: rgba(0,0,0,.05) !default; 93 | $black-025: rgba(0,0,0,.025) !default; 94 | $black-0125: rgba(0,0,0,.0125) !default; 95 | $white-90: rgba(255,255,255,.9) !default; 96 | $white-80: rgba(255,255,255,.8) !default; 97 | $white-70: rgba(255,255,255,.7) !default; 98 | $white-60: rgba(255,255,255,.6) !default; 99 | $white-50: rgba(255,255,255,.5) !default; 100 | $white-40: rgba(255,255,255,.4) !default; 101 | $white-30: rgba(255,255,255,.3) !default; 102 | $white-20: rgba(255,255,255,.2) !default; 103 | $white-10: rgba(255,255,255,.1) !default; 104 | $white-05: rgba(255,255,255,.05) !default; 105 | $white-025: rgba(255,255,255,.025) !default; 106 | $white-0125: rgba(255,255,255,.0125) !default; 107 | $dark-red: #e7040f !default; 108 | $red: #ff4136 !default; 109 | $light-red: #ff725c !default; 110 | $orange: #ff6300 !default; 111 | $gold: #ffb700 !default; 112 | $yellow: #ffd700 !default; 113 | $light-yellow: #fbf1a9 !default; 114 | $purple: #5e2ca5 !default; 115 | $light-purple: #a463f2 !default; 116 | $dark-pink: #d5008f !default; 117 | $hot-pink: #ff41b4 !default; 118 | $pink: #ff80cc !default; 119 | $light-pink: #ffa3d7 !default; 120 | $dark-green: #137752 !default; 121 | $green: #19a974 !default; 122 | $light-green: #9eebcf !default; 123 | $navy: #001b44 !default; 124 | $dark-blue: #00449e !default; 125 | $blue: #357edd !default; 126 | $light-blue: #96ccff !default; 127 | $lightest-blue: #cdecff !default; 128 | $washed-blue: #f6fffe !default; 129 | $washed-green: #e8fdf5 !default; 130 | $washed-yellow: #fffceb !default; 131 | $washed-red: #ffdfdf !default; 132 | 133 | // Custom Media Query Variables 134 | 135 | $breakpoint-not-small: 'screen and (min-width: 30em)' !default; 136 | $breakpoint-medium: 'screen and (min-width: 30em) and (max-width: 60em)' !default; 137 | $breakpoint-large: 'screen and (min-width: 60em)' !default; 138 | 139 | /* 140 | 141 | VARIABLES 142 | 143 | */ 144 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_vertical-align.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | VERTICAL ALIGN 11 | 12 | Media Query Extensions: 13 | -ns = not-small 14 | -m = medium 15 | -l = large 16 | 17 | */ 18 | 19 | .v-base { vertical-align: baseline; } 20 | .v-mid { vertical-align: middle; } 21 | .v-top { vertical-align: top; } 22 | .v-btm { vertical-align: bottom; } 23 | 24 | @media #{$breakpoint-not-small} { 25 | .v-base-ns { vertical-align: baseline; } 26 | .v-mid-ns { vertical-align: middle; } 27 | .v-top-ns { vertical-align: top; } 28 | .v-btm-ns { vertical-align: bottom; } 29 | } 30 | 31 | @media #{$breakpoint-medium} { 32 | .v-base-m { vertical-align: baseline; } 33 | .v-mid-m { vertical-align: middle; } 34 | .v-top-m { vertical-align: top; } 35 | .v-btm-m { vertical-align: bottom; } 36 | } 37 | 38 | @media #{$breakpoint-large} { 39 | .v-base-l { vertical-align: baseline; } 40 | .v-mid-l { vertical-align: middle; } 41 | .v-top-l { vertical-align: top; } 42 | .v-btm-l { vertical-align: bottom; } 43 | } 44 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_visibility.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | VISIBILITY 11 | 12 | Media Query Extensions: 13 | -ns = not-small 14 | -m = medium 15 | -l = large 16 | 17 | */ 18 | 19 | 20 | /* 21 | Text that is hidden but accessible 22 | Ref: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility 23 | */ 24 | 25 | .clip { 26 | position: fixed !important; 27 | _position: absolute !important; 28 | clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 29 | clip: rect(1px, 1px, 1px, 1px); 30 | } 31 | 32 | @media #{$breakpoint-not-small} { 33 | .clip-ns { 34 | position: fixed !important; 35 | _position: absolute !important; 36 | clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 37 | clip: rect(1px, 1px, 1px, 1px); 38 | } 39 | } 40 | 41 | @media #{$breakpoint-medium} { 42 | .clip-m { 43 | position: fixed !important; 44 | _position: absolute !important; 45 | clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 46 | clip: rect(1px, 1px, 1px, 1px); 47 | } 48 | } 49 | 50 | @media #{$breakpoint-large} { 51 | .clip-l { 52 | position: fixed !important; 53 | _position: absolute !important; 54 | clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 55 | clip: rect(1px, 1px, 1px, 1px); 56 | } 57 | } 58 | 59 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_white-space.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | WHITE SPACE 11 | 12 | Media Query Extensions: 13 | -ns = not-small 14 | -m = medium 15 | -l = large 16 | 17 | */ 18 | 19 | 20 | .ws-normal { white-space: normal; } 21 | .nowrap { white-space: nowrap; } 22 | .pre { white-space: pre; } 23 | 24 | @media #{$breakpoint-not-small} { 25 | .ws-normal-ns { white-space: normal; } 26 | .nowrap-ns { white-space: nowrap; } 27 | .pre-ns { white-space: pre; } 28 | } 29 | 30 | @media #{$breakpoint-medium} { 31 | .ws-normal-m { white-space: normal; } 32 | .nowrap-m { white-space: nowrap; } 33 | .pre-m { white-space: pre; } 34 | } 35 | 36 | @media #{$breakpoint-large} { 37 | .ws-normal-l { white-space: normal; } 38 | .nowrap-l { white-space: nowrap; } 39 | .pre-l { white-space: pre; } 40 | } 41 | 42 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_widths.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | WIDTHS 11 | Docs: http://tachyons.io/docs/layout/widths/ 12 | 13 | Base: 14 | w = width 15 | 16 | Modifiers 17 | 1 = 1st step in width scale 18 | 2 = 2nd step in width scale 19 | 3 = 3rd step in width scale 20 | 4 = 4th step in width scale 21 | 5 = 5th step in width scale 22 | 23 | -10 = literal value 10% 24 | -20 = literal value 20% 25 | -25 = literal value 25% 26 | -30 = literal value 30% 27 | -33 = literal value 33% 28 | -34 = literal value 34% 29 | -40 = literal value 40% 30 | -50 = literal value 50% 31 | -60 = literal value 60% 32 | -70 = literal value 70% 33 | -75 = literal value 75% 34 | -80 = literal value 80% 35 | -90 = literal value 90% 36 | -100 = literal value 100% 37 | 38 | -third = 100% / 3 (Not supported in opera mini or IE8) 39 | -two-thirds = 100% / 1.5 (Not supported in opera mini or IE8) 40 | -auto = string value auto 41 | 42 | 43 | Media Query Extensions: 44 | -ns = not-small 45 | -m = medium 46 | -l = large 47 | 48 | */ 49 | 50 | /* Width Scale */ 51 | 52 | .w1 { width: $width-1; } 53 | .w2 { width: $width-2; } 54 | .w3 { width: $width-3; } 55 | .w4 { width: $width-4; } 56 | .w5 { width: $width-5; } 57 | 58 | .w-10 { width: 10%; } 59 | .w-20 { width: 20%; } 60 | .w-25 { width: 25%; } 61 | .w-30 { width: 30%; } 62 | .w-33 { width: 33%; } 63 | .w-34 { width: 34%; } 64 | .w-40 { width: 40%; } 65 | .w-50 { width: 50%; } 66 | .w-60 { width: 60%; } 67 | .w-70 { width: 70%; } 68 | .w-75 { width: 75%; } 69 | .w-80 { width: 80%; } 70 | .w-90 { width: 90%; } 71 | .w-100 { width: 100%; } 72 | 73 | .w-third { width: (100% / 3); } 74 | .w-two-thirds { width: (100% / 1.5); } 75 | .w-auto { width: auto; } 76 | 77 | @media #{$breakpoint-not-small} { 78 | .w1-ns { width: $width-1; } 79 | .w2-ns { width: $width-2; } 80 | .w3-ns { width: $width-3; } 81 | .w4-ns { width: $width-4; } 82 | .w5-ns { width: $width-5; } 83 | .w-10-ns { width: 10%; } 84 | .w-20-ns { width: 20%; } 85 | .w-25-ns { width: 25%; } 86 | .w-30-ns { width: 30%; } 87 | .w-33-ns { width: 33%; } 88 | .w-34-ns { width: 34%; } 89 | .w-40-ns { width: 40%; } 90 | .w-50-ns { width: 50%; } 91 | .w-60-ns { width: 60%; } 92 | .w-70-ns { width: 70%; } 93 | .w-75-ns { width: 75%; } 94 | .w-80-ns { width: 80%; } 95 | .w-90-ns { width: 90%; } 96 | .w-100-ns { width: 100%; } 97 | .w-third-ns { width: (100% / 3); } 98 | .w-two-thirds-ns { width: (100% / 1.5); } 99 | .w-auto-ns { width: auto; } 100 | } 101 | 102 | @media #{$breakpoint-medium} { 103 | .w1-m { width: $width-1; } 104 | .w2-m { width: $width-2; } 105 | .w3-m { width: $width-3; } 106 | .w4-m { width: $width-4; } 107 | .w5-m { width: $width-5; } 108 | .w-10-m { width: 10%; } 109 | .w-20-m { width: 20%; } 110 | .w-25-m { width: 25%; } 111 | .w-30-m { width: 30%; } 112 | .w-33-m { width: 33%; } 113 | .w-34-m { width: 34%; } 114 | .w-40-m { width: 40%; } 115 | .w-50-m { width: 50%; } 116 | .w-60-m { width: 60%; } 117 | .w-70-m { width: 70%; } 118 | .w-75-m { width: 75%; } 119 | .w-80-m { width: 80%; } 120 | .w-90-m { width: 90%; } 121 | .w-100-m { width: 100%; } 122 | .w-third-m { width: (100% / 3); } 123 | .w-two-thirds-m { width: (100% / 1.5); } 124 | .w-auto-m { width: auto; } 125 | } 126 | 127 | @media #{$breakpoint-large} { 128 | .w1-l { width: $width-1; } 129 | .w2-l { width: $width-2; } 130 | .w3-l { width: $width-3; } 131 | .w4-l { width: $width-4; } 132 | .w5-l { width: $width-5; } 133 | .w-10-l { width: 10%; } 134 | .w-20-l { width: 20%; } 135 | .w-25-l { width: 25%; } 136 | .w-30-l { width: 30%; } 137 | .w-33-l { width: 33%; } 138 | .w-34-l { width: 34%; } 139 | .w-40-l { width: 40%; } 140 | .w-50-l { width: 50%; } 141 | .w-60-l { width: 60%; } 142 | .w-70-l { width: 70%; } 143 | .w-75-l { width: 75%; } 144 | .w-80-l { width: 80%; } 145 | .w-90-l { width: 90%; } 146 | .w-100-l { width: 100%; } 147 | .w-third-l { width: (100% / 3); } 148 | .w-two-thirds-l { width: (100% / 1.5); } 149 | .w-auto-l { width: auto; } 150 | } 151 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_word-break.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | WORD BREAK 11 | 12 | Base: 13 | word = word-break 14 | 15 | Media Query Extensions: 16 | -ns = not-small 17 | -m = medium 18 | -l = large 19 | 20 | */ 21 | 22 | .word-normal { word-break: normal; } 23 | .word-wrap { word-break: break-all; } 24 | .word-nowrap { word-break: keep-all; } 25 | 26 | @media #{$breakpoint-not-small} { 27 | .word-normal-ns { word-break: normal; } 28 | .word-wrap-ns { word-break: break-all; } 29 | .word-nowrap-ns { word-break: keep-all; } 30 | } 31 | 32 | @media #{$breakpoint-medium} { 33 | .word-normal-m { word-break: normal; } 34 | .word-wrap-m { word-break: break-all; } 35 | .word-nowrap-m { word-break: keep-all; } 36 | } 37 | 38 | @media #{$breakpoint-large} { 39 | .word-normal-l { word-break: normal; } 40 | .word-wrap-l { word-break: break-all; } 41 | .word-nowrap-l { word-break: keep-all; } 42 | } 43 | 44 | -------------------------------------------------------------------------------- /assets/scss/tachyons/_z-index.scss: -------------------------------------------------------------------------------- 1 | 2 | // Converted Variables 3 | 4 | 5 | // Custom Media Query Variables 6 | 7 | 8 | /* 9 | 10 | Z-INDEX 11 | 12 | Base 13 | z = z-index 14 | 15 | Modifiers 16 | -0 = literal value 0 17 | -1 = literal value 1 18 | -2 = literal value 2 19 | -3 = literal value 3 20 | -4 = literal value 4 21 | -5 = literal value 5 22 | -999 = literal value 999 23 | -9999 = literal value 9999 24 | 25 | -max = largest accepted z-index value as integer 26 | 27 | -inherit = string value inherit 28 | -initial = string value initial 29 | -unset = string value unset 30 | 31 | MDN: https://developer.mozilla.org/en/docs/Web/CSS/z-index 32 | Spec: http://www.w3.org/TR/CSS2/zindex.html 33 | Articles: 34 | https://philipwalton.com/articles/what-no-one-told-you-about-z-index/ 35 | 36 | Tips on extending: 37 | There might be a time worth using negative z-index values. 38 | Or if you are using tachyons with another project, you might need to 39 | adjust these values to suit your needs. 40 | 41 | */ 42 | 43 | .z-0 { z-index: 0; } 44 | .z-1 { z-index: 1; } 45 | .z-2 { z-index: 2; } 46 | .z-3 { z-index: 3; } 47 | .z-4 { z-index: 4; } 48 | .z-5 { z-index: 5; } 49 | 50 | .z-999 { z-index: 999; } 51 | .z-9999 { z-index: 9999; } 52 | 53 | .z-max { 54 | z-index: 2147483647; 55 | } 56 | 57 | .z-inherit { z-index: inherit; } 58 | .z-initial { z-index: initial; } 59 | .z-unset { z-index: unset; } 60 | 61 | -------------------------------------------------------------------------------- /build.node.js: -------------------------------------------------------------------------------- 1 | const fs = require( 'fs' ); 2 | const browserify = require( 'browserify' ); 3 | 4 | browserify( './assets/blocks.es6' ) 5 | .transform( 'babelify', {presets: ['@babel/preset-env']} ) 6 | .transform( 'uglifyify' ) 7 | .bundle() 8 | .pipe( fs.createWriteStream( './assets/blocks.min.js' ) ); 9 | 10 | browserify( './assets/caxton.es6' ) 11 | .transform( 'babelify', {presets: ['@babel/preset-env']} ) 12 | .transform( 'uglifyify' ) 13 | .bundle() 14 | .pipe( fs.createWriteStream( './assets/caxton.min.js' ) ); 15 | 16 | console.log( 'Compiled' ); -------------------------------------------------------------------------------- /caxton-main.php: -------------------------------------------------------------------------------- 1 | init(); 64 | 65 | } 66 | 67 | public function init() { 68 | $this->_admin(); //Initiate admin 69 | $this->_public(); //Initiate public 70 | } 71 | 72 | /** 73 | * Initiates admin class and adds admin hooks 74 | */ 75 | private function _admin() { 76 | //Instantiating admin class 77 | $this->admin = Caxton_Admin::instance(); 78 | 79 | //Enqueue admin end JS and CSS 80 | add_action( 'admin_init', array( $this->admin, 'admin_init' ), 5 ); 81 | add_action( 'admin_menu', array( $this->admin, 'admin_menu' ), 5 ); 82 | add_action( 'enqueue_block_editor_assets', array( $this->admin, 'enqueue' ), 5 ); 83 | add_action( 'wp_ajax_caxton_save_blocks', array( $this->admin, 'caxton_save_blocks' ), 5 ); 84 | add_action( 'save_post', array( $this->admin, 'save_post' ), 5 ); 85 | add_action( 'block_categories_all', array( $this->admin, 'block_categories' ), 5 ); 86 | add_action( 'rest_api_init', array( $this->admin, 'rest_api_init' ) ); 87 | add_action( 'wp_ajax_caxton_posts', array( $this->admin, 'posts' ) ); 88 | } 89 | 90 | /** 91 | * Initiates public class and adds public hooks 92 | */ 93 | private function _public() { 94 | //Instantiating public class 95 | $this->public = Caxton_Public::instance(); 96 | 97 | //Enqueue front end JS and CSS 98 | add_action( 'wp_enqueue_scripts', array( $this->public, 'enqueue' ) ); 99 | add_action( 'init', array( $this->public, 'register_blocks' ) ); 100 | add_action( 'init', array( $this->public, 'register_scripts' ) ); 101 | } 102 | } -------------------------------------------------------------------------------- /caxton.php: -------------------------------------------------------------------------------- 1 | 10 | * TACHYONS v4.9.0 | http://tachyons.io - MIT License 11 | */ 12 | function caxton_init() { 13 | if ( function_exists( 'register_block_type' ) ) { 14 | define( 'CAXTON_VERSION', '1.30.2' ); 15 | /** Plugin variables */ 16 | require 'inc/vars.php'; 17 | /** Plugin admin class */ 18 | require 'inc/class-admin.php'; 19 | /** Plugin public class */ 20 | require 'inc/class-public.php'; 21 | /** Plugin main class */ 22 | require 'caxton-main.php'; 23 | 24 | /** Intantiating main plugin class */ 25 | Caxton::instance( __FILE__ ); 26 | } 27 | } 28 | add_action( 'plugins_loaded', 'caxton_init', 0 ); -------------------------------------------------------------------------------- /inc/class-public.php: -------------------------------------------------------------------------------- 1 | token = Caxton::$token; 41 | $this->url = Caxton::$url; 42 | $this->path = Caxton::$path; 43 | $this->version = Caxton::$version; 44 | } 45 | 46 | /** 47 | * Registers Caxton scripts 48 | */ 49 | public function register_scripts() { 50 | $ver = $this->version; 51 | $assets = $this->url . 'assets'; 52 | 53 | wp_register_style( 'caxton-front', "$assets/front.css", [], $ver ); 54 | wp_register_script( 'caxton-utils', "$assets/caxton-utils.min.js", [], $ver, 'in_footer' ); 55 | 56 | $this->localize(); 57 | } 58 | 59 | /** 60 | * Adds front end stylesheet and js 61 | * @action wp_enqueue_scripts 62 | */ 63 | public function enqueue() { 64 | wp_enqueue_style( 'caxton-front' ); 65 | wp_enqueue_script( 'caxton-utils' ); 66 | 67 | $this->enqueue_compat(); 68 | } 69 | 70 | private function enqueue_compat() { 71 | $ver = $this->version; 72 | $url = $this->url . 'assets/compat'; 73 | 74 | if ( function_exists( 'twentynineteen_setup' ) ) { 75 | wp_enqueue_style( 'caxton-2019', "$url/2019.css", [], $ver, 'in_footer' ); 76 | } 77 | } 78 | 79 | private function localize() { 80 | wp_localize_script( "caxton-utils", 'caxtonUtilProps', [ 81 | 'assetsUrl' => $this->url . 'assets/', 82 | ] ); 83 | } 84 | 85 | public function register_blocks() { 86 | register_block_type( 87 | 'caxton/posts-grid', 88 | [ 89 | 'render_callback' => [ $this, 'post_grid' ], 90 | 'supports' => [], 91 | 'script' => 'caxton-front', 92 | 'style' => 'caxton-utils', 93 | ] 94 | ); 95 | } 96 | 97 | 98 | public function post_grid( $block ) { 99 | $order = ! empty( $block['order'] ) ? explode( '/', $block['order'] ) : [ 'date', 'desc' ]; 100 | // var_dump( $block ); 101 | $block = wp_parse_args( $block, [ 102 | 'cat' => [], 103 | 'order' => 'date/desc', 104 | 'rows' => 4, 105 | 'columns' => 2, 106 | 'titleSize' => 20, 107 | 'imagesType' => '', 108 | ] ); 109 | $args = [ 110 | 'posts_per_page' => $block['rows'] * $block['columns'], 111 | 'cat' => $block['cat'], 112 | 'orderby' => $order[0], 113 | 'order' => $order[1], 114 | ]; 115 | if ( ! empty( $block['displayPostWithoutImages'] ) ) { 116 | $args['meta_key'] = ''; 117 | } 118 | $posts = Caxton_Admin::instance()->posts( $args ); 119 | ob_start(); 120 | 121 | $classes = "caxton-posts-grid caxton-grid"; 122 | 123 | $classes .= " caxton-" . sanitize_html_class($block['imagesType']) . "-images"; 124 | 125 | if ( ! empty( $block['titleBelowImage'] ) ) $classes .= ' caxton-title-below-image'; 126 | 127 | $postClass = 'grid-item'; 128 | if ( ! empty( $block['border'] ) ) $postClass .= ' ba'; 129 | 130 | echo "
"; 131 | $width = $block['columns'] ? 100 / $block['columns'] - 2 : 48; 132 | foreach ( $posts as $post ) { 133 | $in_image = $after_image = ''; 134 | 135 | $title = "

$post[title]

\n"; 136 | 137 | if ( empty( $block['titleBelowImage'] ) ) { 138 | $in_image .= $title; 139 | } else { 140 | $after_image .= $title; 141 | } 142 | 143 | if ( ! empty( $block['displayDate'] ) ) $after_image .= "\n"; 144 | if ( ! empty( $block['displayExcerpt'] ) ) $after_image .= "

$post[excerpt]

\n"; 145 | if ( ! empty( $block['displayMeta'] ) ) { 146 | $after_image .= 147 | '
' . 148 | "$post[author]" . 149 | "$post[comments]" . 150 | '
'; 151 | } 152 | echo << 154 | 155 |
156 | $in_image 157 |
158 | 159 | $after_image 160 |
161 | HTML; 162 | } 163 | echo ''; 164 | 165 | return ob_get_clean(); 166 | } 167 | 168 | public static function processTemplate( $template, $properties ) { 169 | $search = $replace = []; 170 | foreach ( $properties as $k => $v ) { 171 | $search[] = '{{' . $k . '}}'; 172 | $replace[] = $v; 173 | } 174 | return str_replace( $search, $replace, $template ); 175 | } 176 | } 177 | -------------------------------------------------------------------------------- /inc/tpl.caxton-admin-disable-blocks.php: -------------------------------------------------------------------------------- 1 | 4 | 43 | 44 |
45 |

Caxton blocks toggle

46 |

Click the blocks below to turn them on/off in Gutenberg editor

47 |
48 | 49 | 50 |
51 | $block ) { 56 | ?> 57 | > 60 | 64 | 67 |
68 |
69 | 70 |
71 |
-------------------------------------------------------------------------------- /inc/tpl.caxton-admin-page.php: -------------------------------------------------------------------------------- 1 |
2 |

Caxton

3 |

Create Pro page layouts in Gutenberg

4 | 5 | 6 | 7 |

Caxton is a page layout plugin for Gutenberg. Caxton makes it easy to layout your pages in any grid configuration, 8 | and then add blocks within your layout. Caxton layouts support nesting of rows, row backgrounds, and is fully 9 | responsive.

10 |

Caxton also contains a growing library of blocks to enhance your layouts, including Posts Grid, Slider, Button, 11 | Hero, Social Icons and Shape Divider.

12 |
-------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "caxton", 3 | "version": "1.27.0", 4 | "description": "", 5 | "author": "Shramee", 6 | "scripts": { 7 | "build": "node build.node.js" 8 | }, 9 | "devDependencies": { 10 | "@babel/core": "^7.7.2", 11 | "@babel/preset-env": "^7.7.1", 12 | "@wordpress/env": "^10.5.0", 13 | "babelify": "^10.0.0", 14 | "browserify": "^16.5.0", 15 | "uglify-js": "^3.6.8", 16 | "uglifyify": "^5.0.2" 17 | }, 18 | "dependencies": { 19 | "react-sortable-list": "^1.1.1" 20 | } 21 | } 22 | --------------------------------------------------------------------------------