├── .htaccess ├── 404.php ├── README.md ├── communities.json ├── css ├── bootstrap.css ├── custom.css ├── flickity.css ├── font-frankruhl-firasans.css ├── font-karla.css ├── font-merriweather-ptsans.css ├── font-raleway.css ├── font-roboto.css ├── font-robotoslab.css ├── font-rubiklato.css ├── font-sourcesanspro.css ├── iconsmind.css ├── jquery.steps.css ├── lightbox.min.css ├── socicon.css ├── stack-interface.css ├── theme-aqua.css ├── theme-cedar.css ├── theme-charcoal.css ├── theme-greensea.css ├── theme-red.css ├── theme-rtl.css ├── theme-serpent.css ├── theme-tangerine.css ├── theme-yeller.css └── theme.css ├── fonts ├── iconsmind.eot ├── iconsmind.ttf ├── iconsmind.woff ├── socicon.eot ├── socicon.svg ├── socicon.ttf ├── socicon.woff ├── stack-interface.eot ├── stack-interface.svg ├── stack-interface.ttf ├── stack-interface.woff └── stack-interface.woff2 ├── footer.php ├── header.php ├── ico.png ├── img ├── DCB9E219.png ├── crypto-2.svg ├── logo-dark.png ├── logo-round.png ├── logo-variant.png └── mapmarker.png ├── index.php ├── js ├── countdown.min.js ├── datepicker.js ├── easypiechart.min.js ├── flickity.min.js ├── granim.min.js ├── isotope.min.js ├── jquery-3.1.1.min.js ├── jquery.steps.min.js ├── lightbox.min.js ├── parallax.js ├── scripts.js ├── smooth-scroll.min.js ├── spectragram.min.js ├── twitterfetcher.min.js ├── typed.min.js └── ytplayer.min.js ├── less ├── framework_components │ ├── accordions.less │ ├── alerts.less │ ├── bars.less │ ├── boxed-layout.less │ ├── boxes.less │ ├── breadcrumbs.less │ ├── buttons.less │ ├── colors.less │ ├── dropdowns.less │ ├── flickity.less │ ├── forms-v2.less │ ├── granim.less │ ├── helpers.less │ ├── hover-elements.less │ ├── icons.less │ ├── image-blocks.less │ ├── images.less │ ├── lightbox-images.less │ ├── lists.less │ ├── maps.less │ ├── masonry.less │ ├── menus.less │ ├── mixins.less │ ├── modals.less │ ├── navigation-inpage.less │ ├── newsletter-providers.less │ ├── notifications.less │ ├── parallax.less │ ├── position.less │ ├── progress-horizontal.less │ ├── radials.less │ ├── reset.less │ ├── size.less │ ├── spacing.less │ ├── switchable.less │ ├── tabs.less │ ├── transitions.less │ ├── twitter.less │ ├── typed-effect.less │ ├── typography.less │ ├── variables.less │ ├── video.less │ └── wizard.less ├── theme-overrides.less ├── theme-variables.less ├── theme.less └── theme_components │ ├── accordions.less │ ├── alerts.less │ ├── animations.less │ ├── bars.less │ ├── blog.less │ ├── boxes.less │ ├── buttons.less │ ├── cards.less │ ├── checkmarks.less │ ├── colors.less │ ├── covers.less │ ├── cta.less │ ├── customizers.less │ ├── dropdowns.less │ ├── features-large.less │ ├── features-small.less │ ├── footers.less │ ├── forms.less │ ├── helpers.less │ ├── icons.less │ ├── images.less │ ├── instagram.less │ ├── labels.less │ ├── lightbox.less │ ├── links.less │ ├── lists.less │ ├── loader.less │ ├── maps.less │ ├── masonry.less │ ├── modals.less │ ├── navigation-fullscreen.less │ ├── navigation-menu-toggle.less │ ├── navigation-sidebar-column.less │ ├── navigation-sidebar.less │ ├── navigation-stacked.less │ ├── navigation-utility.less │ ├── navigation.less │ ├── notifications.less │ ├── portfolio.less │ ├── pricing.less │ ├── processes.less │ ├── progress-horizontal.less │ ├── radials.less │ ├── rules.less │ ├── sections.less │ ├── shop.less │ ├── sliders.less │ ├── switchable.less │ ├── tables.less │ ├── tabs.less │ ├── testimonials.less │ ├── titles.less │ ├── tooltips.less │ ├── twitter.less │ ├── typed-text.less │ ├── typography.less │ ├── utilities.less │ ├── videos.less │ └── wizard.less └── logo-dark.png /.htaccess: -------------------------------------------------------------------------------- 1 | RewriteEngine on 2 | RewriteCond %{REQUEST_FILENAME} !-d 3 | RewriteCond %{REQUEST_FILENAME}\.php -f 4 | RewriteRule ^(.*)$ $1.php [NC,L] 5 | ErrorDocument 404 /404.php 6 | -------------------------------------------------------------------------------- /404.php: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 |
5 |
6 |
7 |

404

8 |

9 | The page you were looking for was not found. 10 |

11 | Go back to home page 12 |
13 |
14 | 15 |
16 | 17 |
18 |
19 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [DEVS INFO KENYA](http://devs.info.ke/) 2 | 3 | a Kenyan software developers directory 4 | 5 | # Want to add your Community? 6 | - Pull request to edit communities.json i.e. add a new meetup, update info for a certain meetup 7 | 8 | # Want to add your Developer profile or a Software firm? 9 | - Create an account and GET Knowticed! 10 | 11 | # Exciting Features! 12 | - List a community/ group 13 | - List a software firm 14 | - Upload your profile 15 | - Post a job/ opportunity 16 | 17 | # Upcoming Features! 18 | - Post a job/ opportunity EDD 15th Dec 19 | 20 | -------------------------------------------------------------------------------- /css/custom.css: -------------------------------------------------------------------------------- 1 | /*! Place your custom styles here */ -------------------------------------------------------------------------------- /css/flickity.css: -------------------------------------------------------------------------------- 1 | /*! Flickity v2.0.2 2 | http://flickity.metafizzy.co 3 | ---------------------------------------------- */ 4 | 5 | .flickity-enabled { 6 | position: relative; 7 | } 8 | 9 | .flickity-enabled:focus { outline: none; } 10 | 11 | .flickity-viewport { 12 | overflow: hidden; 13 | position: relative; 14 | height: 100%; 15 | } 16 | 17 | .flickity-slider { 18 | position: absolute; 19 | width: 100%; 20 | height: 100%; 21 | } 22 | 23 | /* draggable */ 24 | 25 | .flickity-enabled.is-draggable { 26 | -webkit-tap-highlight-color: transparent; 27 | tap-highlight-color: transparent; 28 | -webkit-user-select: none; 29 | -moz-user-select: none; 30 | -ms-user-select: none; 31 | user-select: none; 32 | } 33 | 34 | .flickity-enabled.is-draggable .flickity-viewport { 35 | cursor: move; 36 | cursor: -webkit-grab; 37 | cursor: grab; 38 | } 39 | 40 | .flickity-enabled.is-draggable .flickity-viewport.is-pointer-down { 41 | cursor: -webkit-grabbing; 42 | cursor: grabbing; 43 | } 44 | 45 | /* ---- previous/next buttons ---- */ 46 | 47 | .flickity-prev-next-button { 48 | position: absolute; 49 | top: 50%; 50 | width: 44px; 51 | height: 44px; 52 | border: none; 53 | border-radius: 50%; 54 | background: white; 55 | background: hsla(0, 0%, 100%, 0.75); 56 | cursor: pointer; 57 | /* vertically center */ 58 | -webkit-transform: translateY(-50%); 59 | transform: translateY(-50%); 60 | } 61 | 62 | .flickity-prev-next-button:hover { background: white; } 63 | 64 | .flickity-prev-next-button:focus { 65 | outline: none; 66 | box-shadow: 0 0 0 5px #09F; 67 | } 68 | 69 | .flickity-prev-next-button:active { 70 | opacity: 0.6; 71 | } 72 | 73 | .flickity-prev-next-button.previous { left: 10px; } 74 | .flickity-prev-next-button.next { right: 10px; } 75 | /* right to left */ 76 | .flickity-rtl .flickity-prev-next-button.previous { 77 | left: auto; 78 | right: 10px; 79 | } 80 | .flickity-rtl .flickity-prev-next-button.next { 81 | right: auto; 82 | left: 10px; 83 | } 84 | 85 | .flickity-prev-next-button:disabled { 86 | opacity: 0.3; 87 | cursor: auto; 88 | } 89 | 90 | .flickity-prev-next-button svg { 91 | position: absolute; 92 | left: 20%; 93 | top: 20%; 94 | width: 60%; 95 | height: 60%; 96 | } 97 | 98 | .flickity-prev-next-button .arrow { 99 | fill: #333; 100 | } 101 | 102 | /* ---- page dots ---- */ 103 | 104 | .flickity-page-dots { 105 | position: absolute; 106 | width: 100%; 107 | bottom: -25px; 108 | padding: 0; 109 | margin: 0; 110 | list-style: none; 111 | text-align: center; 112 | line-height: 1; 113 | } 114 | 115 | .flickity-rtl .flickity-page-dots { direction: rtl; } 116 | 117 | .flickity-page-dots .dot { 118 | display: inline-block; 119 | width: 10px; 120 | height: 10px; 121 | margin: 0 8px; 122 | background: #333; 123 | border-radius: 50%; 124 | opacity: 0.25; 125 | cursor: pointer; 126 | } 127 | 128 | .flickity-page-dots .dot.is-selected { 129 | opacity: 1; 130 | } -------------------------------------------------------------------------------- /css/font-frankruhl-firasans.css: -------------------------------------------------------------------------------- 1 | body{ 2 | font-family: 'Fira Sans','Verdana','Helvetica', sans-serif; 3 | } 4 | 5 | .menu > li{ 6 | font-family: 'Fira Sans','Verdana','Helvetica', sans-serif; 7 | } 8 | 9 | .btn,.btn__text,button{ 10 | font-family: 'Fira Sans','Verdana','Helvetica', sans-serif; 11 | } 12 | 13 | h1,h2,h3,h4,h5,h6, 14 | .h1,.h2,.h3,.h4,.h5,.h6{ 15 | font-family: 'Frank Ruhl Libre','Georgia', serif; 16 | } -------------------------------------------------------------------------------- /css/font-karla.css: -------------------------------------------------------------------------------- 1 | body,.btn,.btn__text{ 2 | font-family: 'Karla','Verdana','Helvetica', sans-serif; 3 | } 4 | 5 | h1,h2,h3,h4,h5,h6, 6 | .h1,.h2,.h3,.h4,.h5,.h6{ 7 | font-family: 'Karla','Verdana','Helvetica', sans-serif; 8 | } -------------------------------------------------------------------------------- /css/font-merriweather-ptsans.css: -------------------------------------------------------------------------------- 1 | body{ 2 | font-family: 'PT Sans','Verdana','Helvetica', sans-serif; 3 | } 4 | 5 | h1,h2,h3,h4,h5,h6, 6 | .h1,.h2,.h3,.h4,.h5,.h6{ 7 | font-family: 'Merriweather','Georgia', serif; 8 | } -------------------------------------------------------------------------------- /css/font-raleway.css: -------------------------------------------------------------------------------- 1 | .menu > li{ 2 | font-family: 'Raleway','Verdana','Helvetica', sans-serif; 3 | } 4 | 5 | .btn,.btn__text,button{ 6 | font-family: 'Raleway','Verdana','Helvetica', sans-serif; 7 | } 8 | 9 | h1,h2,h3,h4,h5,h6, 10 | .h1,.h2,.h3,.h4,.h5,.h6{ 11 | font-family: 'Raleway','Helvetica', sans-serif; 12 | } -------------------------------------------------------------------------------- /css/font-roboto.css: -------------------------------------------------------------------------------- 1 | body{ 2 | font-family: 'Roboto','Verdana','Helvetica', sans-serif; 3 | } 4 | 5 | .menu > li{ 6 | font-family: 'Roboto','Verdana','Helvetica', sans-serif; 7 | } 8 | 9 | .btn,.btn__text,button{ 10 | font-family: 'Roboto','Verdana','Helvetica', sans-serif; 11 | } 12 | 13 | h1,h2,h3,h4,h5,h6, 14 | .h1,.h2,.h3,.h4,.h5,.h6{ 15 | font-family: 'Roboto','Helvetica', sans-serif; 16 | } 17 | 18 | h5{ 19 | font-weight: 500; 20 | } 21 | 22 | .bar-1 .menu-horizontal>li>.dropdown__trigger, .bar-1 .menu-horizontal>li>a{ 23 | font-weight: 500; 24 | } -------------------------------------------------------------------------------- /css/font-robotoslab.css: -------------------------------------------------------------------------------- 1 | /*body{ 2 | font-family: 'PT Sans','Verdana','Helvetica', sans-serif; 3 | }*/ 4 | 5 | h1,h2,h3,h4,h5,h6, 6 | .h1,.h2,.h3,.h4,.h5,.h6{ 7 | font-family: 'Roboto Slab','Helvetica', sans-serif; 8 | } -------------------------------------------------------------------------------- /css/font-rubiklato.css: -------------------------------------------------------------------------------- 1 | body{ 2 | font-family: 'Lato','Verdana','Helvetica', sans-serif; 3 | } 4 | 5 | h1,h2,h3,h4,h5,h6, 6 | .h1,.h2,.h3,.h4,.h5,.h6{ 7 | font-family: 'Rubik','Helvetica', sans-serif; 8 | } 9 | 10 | h5,h6,.h5,.h6{ 11 | font-weight: 500; 12 | } 13 | 14 | .menu > li{ 15 | font-family: 'Lato','Verdana','Helvetica', sans-serif; 16 | } 17 | 18 | .btn,.btn__text,button{ 19 | font-family: 'Lato','Verdana','Helvetica', sans-serif; 20 | } 21 | 22 | -------------------------------------------------------------------------------- /css/font-sourcesanspro.css: -------------------------------------------------------------------------------- 1 | body{ 2 | font-family: 'Source Sans Pro','Verdana','Helvetica', sans-serif; 3 | } 4 | 5 | h1,h2,h3,h4,h5,h6, 6 | .h1,.h2,.h3,.h4,.h5,.h6{ 7 | font-family: 'Source Sans Pro','Helvetica', sans-serif; 8 | } -------------------------------------------------------------------------------- /css/lightbox.min.css: -------------------------------------------------------------------------------- 1 | body:after { 2 | display: none 3 | } 4 | 5 | .lightboxOverlay { 6 | position: absolute; 7 | top: 0; 8 | left: 0; 9 | z-index: 9999; 10 | background-color: #000; 11 | filter: alpha(Opacity=80); 12 | opacity: .8; 13 | display: none 14 | } 15 | 16 | .lightbox { 17 | position: fixed; 18 | top: 50% !important; 19 | transform: translate3d(0,-50%,0); 20 | left: 0; 21 | width: 100%; 22 | z-index: 10000; 23 | text-align: center; 24 | line-height: 0; 25 | font-weight: 400 26 | } 27 | 28 | .lightbox .lb-image { 29 | display: block; 30 | height: auto; 31 | max-width: inherit; 32 | -webkit-border-radius: 3px; 33 | -moz-border-radius: 3px; 34 | -ms-border-radius: 3px; 35 | -o-border-radius: 3px; 36 | border-radius: 3px 37 | } 38 | 39 | .lightbox a img { 40 | border: none 41 | } 42 | 43 | .lb-outerContainer { 44 | position: relative; 45 | background-color: #222; 46 | *zoom: 1; 47 | width: 250px; 48 | height: 250px; 49 | margin: 0 auto; 50 | -webkit-border-radius: 4px; 51 | -moz-border-radius: 4px; 52 | -ms-border-radius: 4px; 53 | -o-border-radius: 4px; 54 | border-radius: 4px 55 | } 56 | 57 | .lb-outerContainer:after { 58 | content: ""; 59 | display: table; 60 | clear: both 61 | } 62 | 63 | .lb-container { 64 | padding: 4px 65 | } 66 | 67 | .lb-loader { 68 | position: absolute; 69 | top: 43%; 70 | left: 0; 71 | height: 25%; 72 | width: 100%; 73 | text-align: center; 74 | line-height: 0 75 | } 76 | 77 | .lb-cancel { 78 | display: block; 79 | width: 32px; 80 | height: 32px; 81 | margin: 0 auto; 82 | } 83 | 84 | .lb-nav { 85 | position: absolute; 86 | top: 0; 87 | left: 0; 88 | height: 100%; 89 | width: 100%; 90 | z-index: 10 91 | } 92 | 93 | .lb-container>.nav { 94 | left: 0 95 | } 96 | 97 | .lb-nav a { 98 | outline: 0; 99 | } 100 | 101 | .lb-next, 102 | .lb-prev { 103 | height: 100%; 104 | cursor: pointer; 105 | display: block 106 | } 107 | 108 | .lb-nav a.lb-prev { 109 | width: 34%; 110 | left: 0; 111 | float: left; 112 | filter: alpha(Opacity=0); 113 | opacity: .5; 114 | -webkit-transition: opacity .6s; 115 | -moz-transition: opacity .6s; 116 | -o-transition: opacity .6s; 117 | transition: opacity .6s 118 | } 119 | 120 | .lb-nav a.lb-prev:hover { 121 | filter: alpha(Opacity=100); 122 | opacity: 1 123 | } 124 | 125 | .lb-nav a.lb-next { 126 | width: 64%; 127 | right: 0; 128 | float: right; 129 | filter: alpha(Opacity=0); 130 | opacity: .5; 131 | -webkit-transition: opacity .6s; 132 | -moz-transition: opacity .6s; 133 | -o-transition: opacity .6s; 134 | transition: opacity .6s 135 | } 136 | 137 | .lb-nav a.lb-next:hover { 138 | filter: alpha(Opacity=100); 139 | opacity: 1 140 | } 141 | 142 | .lb-prev:after,.lb-next:after{ 143 | content: '\2190'; 144 | position: absolute; 145 | top: 50%; 146 | color: #fff; 147 | font-size: 24px; 148 | } 149 | .lb-prev:after{ 150 | left: -60px; 151 | } 152 | .lb-next:after{ 153 | right: -60px; 154 | content: '\2192'; 155 | } 156 | 157 | .lb-dataContainer { 158 | margin: 0 auto; 159 | padding-top: 5px; 160 | min-height: 35px; 161 | *zoom: 1; 162 | width: 100%; 163 | -moz-border-radius-bottomleft: 4px; 164 | -webkit-border-bottom-left-radius: 4px; 165 | border-bottom-left-radius: 4px; 166 | -moz-border-radius-bottomright: 4px; 167 | -webkit-border-bottom-right-radius: 4px; 168 | border-bottom-right-radius: 4px 169 | } 170 | 171 | .lb-dataContainer:after { 172 | content: ""; 173 | display: table; 174 | clear: both 175 | } 176 | 177 | .lb-data { 178 | padding: 0 4px; 179 | color: #ccc 180 | } 181 | 182 | .lb-data .lb-details { 183 | width: 85%; 184 | float: left; 185 | text-align: left; 186 | line-height: 1.1em 187 | } 188 | 189 | .lb-data .lb-caption { 190 | font-size: 13px; 191 | font-weight: 700; 192 | line-height: 1em 193 | } 194 | 195 | .lb-data .lb-number { 196 | display: block; 197 | clear: left; 198 | padding-bottom: 1em; 199 | font-size: 12px; 200 | color: #999 201 | } 202 | 203 | .lb-data .lb-close { 204 | display: block; 205 | float: right; 206 | width: 30px; 207 | height: 30px; 208 | text-align: right; 209 | outline: 0; 210 | filter: alpha(Opacity=70); 211 | opacity: .7; 212 | -webkit-transition: opacity .2s; 213 | -moz-transition: opacity .2s; 214 | -o-transition: opacity .2s; 215 | transition: opacity .2s 216 | } 217 | 218 | .lb-data .lb-close:hover { 219 | cursor: pointer; 220 | filter: alpha(Opacity=100); 221 | opacity: 1 222 | } -------------------------------------------------------------------------------- /css/stack-interface.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'stack-interface'; 3 | src: url('../fonts/stack-interface.eot?33839631'); 4 | src: url('../fonts/stack-interface.eot?33839631#iefix') format('embedded-opentype'), 5 | url('../fonts/stack-interface.woff2?33839631') format('woff2'), 6 | url('../fonts/stack-interface.woff?33839631') format('woff'), 7 | url('../fonts/stack-interface.ttf?33839631') format('truetype'), 8 | url('../fonts/stack-interface.svg?33839631#stack-interface') format('svg'); 9 | font-weight: normal; 10 | font-style: normal; 11 | } 12 | /* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */ 13 | /* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */ 14 | /* 15 | @media screen and (-webkit-min-device-pixel-ratio:0) { 16 | @font-face { 17 | font-family: 'stack-interface'; 18 | src: url('../font/stack-interface.svg?34857618#stack-interface') format('svg'); 19 | } 20 | } 21 | */ 22 | 23 | [class^="stack-"]:before, [class*=" stack-"]:before { 24 | font-family: "stack-interface"; 25 | font-style: normal; 26 | font-weight: normal; 27 | speak: none; 28 | 29 | display: inline-block; 30 | text-decoration: inherit; 31 | width: 1em; 32 | margin-right: .2em; 33 | text-align: center; 34 | /* opacity: .8; */ 35 | 36 | /* For safety - reset parent styles, that can break glyph codes*/ 37 | font-variant: normal; 38 | text-transform: none; 39 | 40 | /* fix buttons height, for twitter bootstrap */ 41 | line-height: 1em; 42 | 43 | /* Animation center compensation - margins should be symmetric */ 44 | /* remove if not needed */ 45 | margin-left: .2em; 46 | 47 | /* you can be more comfortable with increased icons size */ 48 | /* font-size: 120%; */ 49 | 50 | /* Font smoothing. That was taken from TWBS */ 51 | -webkit-font-smoothing: antialiased; 52 | -moz-osx-font-smoothing: grayscale; 53 | 54 | /* Uncomment for 3D effect */ 55 | /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ 56 | } 57 | 58 | .stack-down-open-big:before { content: '\e800'; } /* '' */ 59 | .stack-left-open-big:before { content: '\e801'; } /* '' */ 60 | .stack-right-open-big:before { content: '\e802'; } /* '' */ 61 | .stack-up-open-big:before { content: '\e803'; } /* '' */ 62 | .stack-basket:before { content: '\e804'; } /* '' */ 63 | .stack-search:before { content: '\e805'; } /* '' */ 64 | .stack-down-dir:before { content: '\e806'; } /* '' */ 65 | .stack-left-dir:before { content: '\e807'; } /* '' */ 66 | .stack-right-dir:before { content: '\e808'; } /* '' */ 67 | .stack-up-dir:before { content: '\e809'; } /* '' */ 68 | .stack-down-open:before { content: '\e80a'; } /* '' */ 69 | .stack-left-open:before { content: '\e80b'; } /* '' */ 70 | .stack-right-open:before { content: '\e80c'; } /* '' */ 71 | .stack-up-open:before { content: '\e80d'; } /* '' */ 72 | .stack-menu:before { content: '\e80e'; } /* '' */ 73 | .stack-users:before { content: '\e80f'; } /* '' */ 74 | .stack-publish:before { content: '\e810'; } /* '' */ 75 | .stack-trash:before { content: '\e811'; } /* '' */ 76 | .stack-bell:before { content: '\e812'; } /* '' */ 77 | .stack-cog:before { content: '\e813'; } /* '' */ 78 | .stack-plus-circled:before { content: '\e814'; } /* '' */ 79 | .stack-dot-3:before { content: '\e815'; } /* '' */ -------------------------------------------------------------------------------- /fonts/iconsmind.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linkeefe/devsinfoKE/bd05b4d569fcf48a337a1e434cf44822006d7df2/fonts/iconsmind.eot -------------------------------------------------------------------------------- /fonts/iconsmind.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linkeefe/devsinfoKE/bd05b4d569fcf48a337a1e434cf44822006d7df2/fonts/iconsmind.ttf -------------------------------------------------------------------------------- /fonts/iconsmind.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linkeefe/devsinfoKE/bd05b4d569fcf48a337a1e434cf44822006d7df2/fonts/iconsmind.woff -------------------------------------------------------------------------------- /fonts/socicon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linkeefe/devsinfoKE/bd05b4d569fcf48a337a1e434cf44822006d7df2/fonts/socicon.eot -------------------------------------------------------------------------------- /fonts/socicon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linkeefe/devsinfoKE/bd05b4d569fcf48a337a1e434cf44822006d7df2/fonts/socicon.ttf -------------------------------------------------------------------------------- /fonts/socicon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linkeefe/devsinfoKE/bd05b4d569fcf48a337a1e434cf44822006d7df2/fonts/socicon.woff -------------------------------------------------------------------------------- /fonts/stack-interface.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linkeefe/devsinfoKE/bd05b4d569fcf48a337a1e434cf44822006d7df2/fonts/stack-interface.eot -------------------------------------------------------------------------------- /fonts/stack-interface.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linkeefe/devsinfoKE/bd05b4d569fcf48a337a1e434cf44822006d7df2/fonts/stack-interface.ttf -------------------------------------------------------------------------------- /fonts/stack-interface.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linkeefe/devsinfoKE/bd05b4d569fcf48a337a1e434cf44822006d7df2/fonts/stack-interface.woff -------------------------------------------------------------------------------- /fonts/stack-interface.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linkeefe/devsinfoKE/bd05b4d569fcf48a337a1e434cf44822006d7df2/fonts/stack-interface.woff2 -------------------------------------------------------------------------------- /footer.php: -------------------------------------------------------------------------------- 1 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /ico.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linkeefe/devsinfoKE/bd05b4d569fcf48a337a1e434cf44822006d7df2/ico.png -------------------------------------------------------------------------------- /img/DCB9E219.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linkeefe/devsinfoKE/bd05b4d569fcf48a337a1e434cf44822006d7df2/img/DCB9E219.png -------------------------------------------------------------------------------- /img/logo-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linkeefe/devsinfoKE/bd05b4d569fcf48a337a1e434cf44822006d7df2/img/logo-dark.png -------------------------------------------------------------------------------- /img/logo-round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linkeefe/devsinfoKE/bd05b4d569fcf48a337a1e434cf44822006d7df2/img/logo-round.png -------------------------------------------------------------------------------- /img/logo-variant.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linkeefe/devsinfoKE/bd05b4d569fcf48a337a1e434cf44822006d7df2/img/logo-variant.png -------------------------------------------------------------------------------- /img/mapmarker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linkeefe/devsinfoKE/bd05b4d569fcf48a337a1e434cf44822006d7df2/img/mapmarker.png -------------------------------------------------------------------------------- /js/countdown.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * The Final Countdown for jQuery v2.2.0 (http://hilios.github.io/jQuery.countdown/) 3 | * Copyright (c) 2016 Edson Hilios 4 | * 5 | * Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | * this software and associated documentation files (the "Software"), to deal in 7 | * the Software without restriction, including without limitation the rights to 8 | * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | * the Software, and to permit persons to whom the Software is furnished to do so, 10 | * subject to the following conditions: 11 | * 12 | * The above copyright notice and this permission notice shall be included in all 13 | * copies or substantial portions of the Software. 14 | * 15 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | */ 22 | !function(a){"use strict";"function"==typeof define&&define.amd?define(["jquery"],a):a(jQuery)}(function(a){"use strict";function b(a){if(a instanceof Date)return a;if(String(a).match(g))return String(a).match(/^[0-9]*$/)&&(a=Number(a)),String(a).match(/\-/)&&(a=String(a).replace(/\-/g,"/")),new Date(a);throw new Error("Couldn't cast `"+a+"` to a date object.")}function c(a){var b=a.toString().replace(/([.?*+^$[\]\\(){}|-])/g,"\\$1");return new RegExp(b)}function d(a){return function(b){var d=b.match(/%(-|!)?[A-Z]{1}(:[^;]+;)?/gi);if(d)for(var f=0,g=d.length;f1?c:d}var f=[],g=[],h={precision:100,elapse:!1,defer:!1};g.push(/^[0-9]*$/.source),g.push(/([0-9]{1,2}\/){2}[0-9]{4}( [0-9]{1,2}(:[0-9]{2}){2})?/.source),g.push(/[0-9]{4}([\/\-][0-9]{1,2}){2}( [0-9]{1,2}(:[0-9]{2}){2})?/.source),g=new RegExp(g.join("|"));var i={Y:"years",m:"months",n:"daysToMonth",d:"daysToWeek",w:"weeks",W:"weeksToMonth",H:"hours",M:"minutes",S:"seconds",D:"totalDays",I:"totalHours",N:"totalMinutes",T:"totalSeconds"},j=function(b,c,d){this.el=b,this.$el=a(b),this.interval=null,this.offset={},this.options=a.extend({},h),this.instanceNumber=f.length,f.push(this),this.$el.data("countdown-instance",this.instanceNumber),d&&("function"==typeof d?(this.$el.on("update.countdown",d),this.$el.on("stoped.countdown",d),this.$el.on("finish.countdown",d)):this.options=a.extend({},h,d)),this.setFinalDate(c),this.options.defer===!1&&this.start()};a.extend(j.prototype,{start:function(){null!==this.interval&&clearInterval(this.interval);var a=this;this.update(),this.interval=setInterval(function(){a.update.call(a)},this.options.precision)},stop:function(){clearInterval(this.interval),this.interval=null,this.dispatchEvent("stoped")},toggle:function(){this.interval?this.stop():this.start()},pause:function(){this.stop()},resume:function(){this.start()},remove:function(){this.stop.call(this),f[this.instanceNumber]=null,delete this.$el.data().countdownInstance},setFinalDate:function(a){this.finalDate=b(a)},update:function(){if(0===this.$el.closest("html").length)return void this.remove();var b,c=void 0!==a._data(this.el,"events"),d=new Date;b=this.finalDate.getTime()-d.getTime(),b=Math.ceil(b/1e3),b=!this.options.elapse&&b<0?0:Math.abs(b),this.totalSecsLeft!==b&&c&&(this.totalSecsLeft=b,this.elapsed=d>=this.finalDate,this.offset={seconds:this.totalSecsLeft%60,minutes:Math.floor(this.totalSecsLeft/60)%60,hours:Math.floor(this.totalSecsLeft/60/60)%24,days:Math.floor(this.totalSecsLeft/60/60/24)%7,daysToWeek:Math.floor(this.totalSecsLeft/60/60/24)%7,daysToMonth:Math.floor(this.totalSecsLeft/60/60/24%30.4368),weeks:Math.floor(this.totalSecsLeft/60/60/24/7),weeksToMonth:Math.floor(this.totalSecsLeft/60/60/24/7)%4,months:Math.floor(this.totalSecsLeft/60/60/24/30.4368),years:Math.abs(this.finalDate.getFullYear()-d.getFullYear()),totalDays:Math.floor(this.totalSecsLeft/60/60/24),totalHours:Math.floor(this.totalSecsLeft/60/60),totalMinutes:Math.floor(this.totalSecsLeft/60),totalSeconds:this.totalSecsLeft},this.options.elapse||0!==this.totalSecsLeft?this.dispatchEvent("update"):(this.stop(),this.dispatchEvent("finish")))},dispatchEvent:function(b){var c=a.Event(b+".countdown");c.finalDate=this.finalDate,c.elapsed=this.elapsed,c.offset=a.extend({},this.offset),c.strftime=d(this.offset),this.$el.trigger(c)}}),a.fn.countdown=function(){var b=Array.prototype.slice.call(arguments,0);return this.each(function(){var c=a(this).data("countdown-instance");if(void 0!==c){var d=f[c],e=b[0];j.prototype.hasOwnProperty(e)?d[e].apply(d,b.slice(1)):null===String(e).match(/^[$A-Z_][0-9A-Z_$]*$/i)?(d.setFinalDate.call(d,e),d.start()):a.error("Method %s does not exist on jQuery.countdown".replace(/\%s/gi,e))}else new j(this,b[0],b[1])})}}); -------------------------------------------------------------------------------- /js/easypiechart.min.js: -------------------------------------------------------------------------------- 1 | /**! 2 | * easy-pie-chart 3 | * Lightweight plugin to render simple, animated and retina optimized pie charts 4 | * 5 | * @license 6 | * @author Robert Fleischmann (http://robert-fleischmann.de) 7 | * @version 2.1.7 8 | **/ 9 | !function(a,b){"function"==typeof define&&define.amd?define(["jquery"],function(a){return b(a)}):"object"==typeof exports?module.exports=b(require("jquery")):b(jQuery)}(this,function(a){var b=function(a,b){var c,d=document.createElement("canvas");a.appendChild(d),"object"==typeof G_vmlCanvasManager&&G_vmlCanvasManager.initElement(d);var e=d.getContext("2d");d.width=d.height=b.size;var f=1;window.devicePixelRatio>1&&(f=window.devicePixelRatio,d.style.width=d.style.height=[b.size,"px"].join(""),d.width=d.height=b.size*f,e.scale(f,f)),e.translate(b.size/2,b.size/2),e.rotate((-0.5+b.rotate/180)*Math.PI);var g=(b.size-b.lineWidth)/2;b.scaleColor&&b.scaleLength&&(g-=b.scaleLength+2),Date.now=Date.now||function(){return+new Date};var h=function(a,b,c){c=Math.min(Math.max(-1,c||0),1);var d=0>=c?!0:!1;e.beginPath(),e.arc(0,0,g,0,2*Math.PI*c,d),e.strokeStyle=a,e.lineWidth=b,e.stroke()},i=function(){var a,c;e.lineWidth=1,e.fillStyle=b.scaleColor,e.save();for(var d=24;d>0;--d)d%6===0?(c=b.scaleLength,a=0):(c=.6*b.scaleLength,a=b.scaleLength-c),e.fillRect(-b.size/2+a,0,c,1),e.rotate(Math.PI/12);e.restore()},j=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(a){window.setTimeout(a,1e3/60)}}(),k=function(){b.scaleColor&&i(),b.trackColor&&h(b.trackColor,b.trackWidth||b.lineWidth,1)};this.getCanvas=function(){return d},this.getCtx=function(){return e},this.clear=function(){e.clearRect(b.size/-2,b.size/-2,b.size,b.size)},this.draw=function(a){b.scaleColor||b.trackColor?e.getImageData&&e.putImageData?c?e.putImageData(c,0,0):(k(),c=e.getImageData(0,0,b.size*f,b.size*f)):(this.clear(),k()):this.clear(),e.lineCap=b.lineCap;var d;d="function"==typeof b.barColor?b.barColor(a):b.barColor,h(d,b.lineWidth,a/100)}.bind(this),this.animate=function(a,c){var d=Date.now();b.onStart(a,c);var e=function(){var f=Math.min(Date.now()-d,b.animate.duration),g=b.easing(this,f,a,c-a,b.animate.duration);this.draw(g),b.onStep(a,c,g),f>=b.animate.duration?b.onStop(a,c):j(e)}.bind(this);j(e)}.bind(this)},c=function(a,c){var d={barColor:"#ef1e25",trackColor:"#f9f9f9",scaleColor:"#dfe0e0",scaleLength:5,lineCap:"round",lineWidth:3,trackWidth:void 0,size:110,rotate:0,animate:{duration:1e3,enabled:!0},easing:function(a,b,c,d,e){return b/=e/2,1>b?d/2*b*b+c:-d/2*(--b*(b-2)-1)+c},onStart:function(a,b){},onStep:function(a,b,c){},onStop:function(a,b){}};if("undefined"!=typeof b)d.renderer=b;else{if("undefined"==typeof SVGRenderer)throw new Error("Please load either the SVG- or the CanvasRenderer");d.renderer=SVGRenderer}var e={},f=0,g=function(){this.el=a,this.options=e;for(var b in d)d.hasOwnProperty(b)&&(e[b]=c&&"undefined"!=typeof c[b]?c[b]:d[b],"function"==typeof e[b]&&(e[b]=e[b].bind(this)));"string"==typeof e.easing&&"undefined"!=typeof jQuery&&jQuery.isFunction(jQuery.easing[e.easing])?e.easing=jQuery.easing[e.easing]:e.easing=d.easing,"number"==typeof e.animate&&(e.animate={duration:e.animate,enabled:!0}),"boolean"!=typeof e.animate||e.animate||(e.animate={duration:1e3,enabled:e.animate}),this.renderer=new e.renderer(a,e),this.renderer.draw(f),a.dataset&&a.dataset.percent?this.update(parseFloat(a.dataset.percent)):a.getAttribute&&a.getAttribute("data-percent")&&this.update(parseFloat(a.getAttribute("data-percent")))}.bind(this);this.update=function(a){return a=parseFloat(a),e.animate.enabled?this.renderer.animate(f,a):this.renderer.draw(a),f=a,this}.bind(this),this.disableAnimation=function(){return e.animate.enabled=!1,this},this.enableAnimation=function(){return e.animate.enabled=!0,this},g()};a.fn.easyPieChart=function(b){return this.each(function(){var d;a.data(this,"easyPieChart")||(d=a.extend({},b,a(this).data()),a.data(this,"easyPieChart",new c(this,d)))})}}); -------------------------------------------------------------------------------- /js/parallax.js: -------------------------------------------------------------------------------- 1 | function mr_parallax(){"use strict";function a(a){for(var b=0;bscreen.width?screen.height:screen.width:Math.max(document.documentElement.clientHeight,window.innerHeight||0)}function d(){p===!1&&(p=!0,h(q.mr_parallaxBackground))}function e(a){var b={};return a&&"[object Function]"===b.toString.call(a)}function f(){return"undefined"==typeof window.mr_variant?!1:!0}var g,h=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame,i=["transform","msTransform","webkitTransform","mozTransform","oTransform"],j=a(i),k="translate3d(0,",l="px,0)",m=c(),n=0,o=window,p=(f(),!1),q=this;jQuery(document).ready(function(){q.documentReady()}),jQuery(window).on("load",function(){q.windowLoad()}),this.documentReady=function(a){return m=c(),jQuery("body").hasClass("parallax-2d")&&(k="translate(0,",l="px)"),h&&(q.profileParallaxElements(),q.setupParallax()),e(a)?void a():void 0},this.windowLoad=function(){m=c(),n=b(),window.mr_parallax.profileParallaxElements()},this.setupParallax=function(){f()&&(o=jQuery(".viu").get(0)),"undefined"!=typeof o&&(("undefined"==typeof window.mr||f())&&(o.onscroll=d),window.addEventListener("resize",function(){m=c(),n=b(),q.profileParallaxElements(),q.mr_parallaxBackground()},!1),window.addEventListener("orientationchange",function(){},!1),q.mr_parallaxBackground())},this.profileParallaxElements=function(){var a;g=[],m=c(),n=b();var d=".parallax > .background-image-holder, .parallax ul.slides > li > .background-image-holder, .parallax ul.slides .owl-item > li > .background-image-holder";f()&&(d=".viu .parallax > .background-image-holder, .viu .parallax ul.slides > li > .background-image-holder, .parallax ul.slides .owl-item > li > .background-image-holder"),a=jQuery(d),/Android|iPad|iPhone|iPod/i.test(navigator.userAgent||navigator.vendor||window.opera)&&(a=a.not(".parallax-disable-mobile .background-image-holder, body.parallax-disable-mobile *")),jQuery(a).each(function(a){var b=jQuery(this).closest(".parallax"),c=f()?b.position().top:b.offset().top,d=screen.height,e=screen.width;g.push({section:b.get(0),outerHeight:b.outerHeight(),elemTop:c,elemBottom:c+b.outerHeight(),isFirstSection:b.is(":nth-of-type(1)")?!0:!1,imageHolder:jQuery(this).get(0)}),/iPad|iPhone|iPod/i.test(navigator.userAgent||navigator.vendor||window.opera)&&screen.width<1024&&(0===window.orientation&&d>e?(jQuery(this).css("top","-"+d/2+"px"),jQuery(this).css({"min-height":b.is(":nth-of-type(1)")?1.5*d:1.2*d})):(jQuery(this).css("top","-"+e/2+"px"),jQuery(this).css({"min-height":b.is(":nth-of-type(1)")?1.5*e:1.2*e}))),/iPad|iPhone|iPod/i.test(navigator.userAgent||navigator.vendor||window.opera)&&screen.width>=1024&&(0===window.orientation&&d>e?(jQuery(this).css("top","-"+d/2+"px"),jQuery(this).css({"min-height":b.is(":nth-of-type(1)")?1.5*d:1.2*d})):(jQuery(this).css("top","-"+e/2+"px"),jQuery(this).css({"min-height":b.is(":nth-of-type(1)")?1.5*e:1.2*e}))),/Android/i.test(navigator.userAgent||navigator.vendor||window.opera)&&(jQuery(this).css({top:"-"+d*window.devicePixelRatio/(b.is(":nth-of-type(1)")?8:2)+"px"}),jQuery(this).css({"min-height":b.is(":nth-of-type(1)")?1.5*d:1.2*d})),f()?f()&&(b.is(":nth-of-type(1)")?q.mr_setTranslate3DTransform(jQuery(this).get(0),0===q.mr_getScrollPosition()?0:q.mr_getScrollPosition()/2):q.mr_setTranslate3DTransform(jQuery(this).get(0),(q.mr_getScrollPosition()-c-n)/2)):b.is(":nth-of-type(1)")?q.mr_setTranslate3DTransform(jQuery(this).get(0),0===q.mr_getScrollPosition()?0:q.mr_getScrollPosition()/2):q.mr_setTranslate3DTransform(jQuery(this).get(0),(q.mr_getScrollPosition()+m-c)/2)})},this.mr_parallaxBackground=function(){for(var a,b=g.length,c="undefined"==typeof mr||f()?q.mr_getScrollPosition():mr.scroll.y;b--;)a=g[b],f()?c+m-n>a.elemTop&&c-n=a.elemTop&&c<=a.elemBottom&&(a.isFirstSection?a.imageHolder.style[j]=k+c/2+l:a.imageHolder.style[j]=k+(c+m-a.elemTop)/2+l);p=!1},this.mr_setTranslate3DTransform=function(a,b){a.style[j]=k+b+l},this.mr_getScrollPosition=function(){return o!==window?o.scrollTop:0===document.documentElement.scrollTop?document.body.scrollTop:document.documentElement.scrollTop}}window.mr_parallax=new mr_parallax; -------------------------------------------------------------------------------- /js/typed.min.js: -------------------------------------------------------------------------------- 1 | !function(t){"use strict";var s=function(s,e){this.el=t(s),this.options=t.extend({},t.fn.typed.defaults,e),this.isInput=this.el.is("input"),this.attr=this.options.attr,this.showCursor=this.isInput?!1:this.options.showCursor,this.elContent=this.attr?this.el.attr(this.attr):this.el.text(),this.contentType=this.options.contentType,this.typeSpeed=this.options.typeSpeed,this.startDelay=this.options.startDelay,this.backSpeed=this.options.backSpeed,this.backDelay=this.options.backDelay,this.stringsElement=this.options.stringsElement,this.strings=this.options.strings,this.strPos=0,this.arrayPos=0,this.stopNum=0,this.loop=this.options.loop,this.loopCount=this.options.loopCount,this.curLoop=0,this.stop=!1,this.cursorChar=this.options.cursorChar,this.shuffle=this.options.shuffle,this.sequence=[],this.build()};s.prototype={constructor:s,init:function(){var t=this;t.timeout=setTimeout(function(){for(var s=0;s'+this.cursorChar+""),this.el.after(this.cursor)),this.stringsElement){this.strings=[],this.stringsElement.hide(),console.log(this.stringsElement.children());var e=this.stringsElement.children();t.each(e,function(e,i){s.strings.push(t(i).html())})}this.init()},typewrite:function(t,s){if(this.stop!==!0){var e=Math.round(70*Math.random())+this.typeSpeed,i=this;i.timeout=setTimeout(function(){var e=0,r=t.substr(s);if("^"===r.charAt(0)){var o=1;/^\^\d+/.test(r)&&(r=/\d+/.exec(r)[0],o+=r.length,e=parseInt(r)),t=t.substring(0,s)+t.substring(s+o)}if("html"===i.contentType){var n=t.substr(s).charAt(0);if("<"===n||"&"===n){var a="",h="";for(h="<"===n?">":";";t.substr(s+1).charAt(0)!==h&&(a+=t.substr(s).charAt(0),s++,!(s+1>t.length)););s++,a+=h}}i.timeout=setTimeout(function(){if(s===t.length){if(i.options.onStringTyped(i.arrayPos),i.arrayPos===i.strings.length-1&&(i.options.callback(),i.curLoop++,i.loop===!1||i.curLoop===i.loopCount))return;i.timeout=setTimeout(function(){i.backspace(t,s)},i.backDelay)}else{0===s&&i.options.preStringTyped(i.arrayPos);var e=t.substr(0,s+1);i.attr?i.el.attr(i.attr,e):i.isInput?i.el.val(e):"html"===i.contentType?i.el.html(e):i.el.text(e),s++,i.typewrite(t,s)}},e)},e)}},backspace:function(t,s){if(this.stop!==!0){var e=Math.round(70*Math.random())+this.backSpeed,i=this;i.timeout=setTimeout(function(){if("html"===i.contentType&&">"===t.substr(s).charAt(0)){for(var e="";"<"!==t.substr(s-1).charAt(0)&&(e-=t.substr(s).charAt(0),s--,!(0>s)););s--,e+="<"}var r=t.substr(0,s);i.attr?i.el.attr(i.attr,r):i.isInput?i.el.val(r):"html"===i.contentType?i.el.html(r):i.el.text(r),s>i.stopNum?(s--,i.backspace(t,s)):s<=i.stopNum&&(i.arrayPos++,i.arrayPos===i.strings.length?(i.arrayPos=0,i.shuffle&&(i.sequence=i.shuffleArray(i.sequence)),i.init()):i.typewrite(i.strings[i.sequence[i.arrayPos]],s))},e)}},shuffleArray:function(t){var s,e,i=t.length;if(i)for(;--i;)e=Math.floor(Math.random()*(i+1)),s=t[e],t[e]=t[i],t[i]=s;return t},reset:function(){var t=this;clearInterval(t.timeout);this.el.attr("id");this.el.empty(),"undefined"!=typeof this.cursor&&this.cursor.remove(),this.strPos=0,this.arrayPos=0,this.curLoop=0,this.options.resetCallback()}},t.fn.typed=function(e){return this.each(function(){var i=t(this),r=i.data("typed"),o="object"==typeof e&&e;r&&r.reset(),i.data("typed",r=new s(this,o)),"string"==typeof e&&r[e]()})},t.fn.typed.defaults={strings:["These are the default values...","You know what you should do?","Use your own!","Have a great day!"],stringsElement:null,typeSpeed:0,startDelay:0,backSpeed:0,shuffle:!1,backDelay:500,loop:!1,loopCount:!1,showCursor:!0,cursorChar:"|",attr:null,contentType:"html",callback:function(){},preStringTyped:function(){},onStringTyped:function(){},resetCallback:function(){}}}(window.jQuery); -------------------------------------------------------------------------------- /less/framework_components/accordions.less: -------------------------------------------------------------------------------- 1 | // MARKUP: 2 | // 3 | //
    4 | //
  • 5 | //
    6 | // Title 7 | //
    8 | //
    9 | // ... 10 | //
    11 | //
    • 12 | //
13 | // 14 | // MODIFIERS: 15 | // 16 | // .accordion--oneopen - means that only one panel can be open at once 17 | 18 | 19 | .accordion li{ 20 | .accordion__title, .accordion__content, .accordion__content *{ 21 | .transition(.3s,linear); 22 | } 23 | .accordion__title{ 24 | cursor: pointer; 25 | padding: @accordion-title-padding; 26 | border: @accordion-title-border; 27 | border-bottom: none; 28 | background: @accordion-title-bg; 29 | .disable-select; 30 | } 31 | &:last-child{ 32 | .accordion__title{ 33 | border-bottom: @accordion-title-border; 34 | } 35 | } 36 | .accordion__content{ 37 | opacity: 0; 38 | visibility: hidden; 39 | max-height: 0; 40 | >*{ 41 | display: none; 42 | } 43 | >*:first-child{ 44 | padding-top: @accordion-content-padding; 45 | } 46 | >*:last-child{ 47 | padding-bottom: @accordion-content-padding; 48 | } 49 | } 50 | } 51 | 52 | .accordion li.active{ 53 | .accordion__title{ 54 | background: @accordion-title-bg-active; 55 | border-bottom: @accordion-title-border; 56 | } 57 | .accordion__content{ 58 | opacity: 1; 59 | visibility: visible; 60 | max-height: 500px; 61 | >*{ 62 | display: inline-block; 63 | } 64 | } 65 | } -------------------------------------------------------------------------------- /less/framework_components/alerts.less: -------------------------------------------------------------------------------- 1 | // MARKUP: 2 | // 3 | //
4 | //
5 | //
6 | //
7 | // 8 | // MODIFIERS: 9 | // 10 | // .bg--error, .bg--success, .bg--primary 11 | 12 | 13 | .alert{ 14 | overflow: hidden; 15 | border: 1px solid darken(@color-bg-site, 10%); 16 | padding: @base-line-height/2; 17 | .alert__body, .alert__close{ 18 | display: inline-block; 19 | user-select: none; 20 | } 21 | .alert__body{ 22 | float: left; 23 | } 24 | .alert__close{ 25 | float: right; 26 | cursor: pointer; 27 | } 28 | &.bg--error{ 29 | background: lighten(@color-error, 40%); 30 | border-color: @color-error; 31 | .alert__close{ 32 | color: @color-error; 33 | } 34 | } 35 | &.bg--success{ 36 | background: lighten(@color-success, 40%); 37 | border-color: @color-success; 38 | .alert__close{ 39 | color: @color-success; 40 | } 41 | } 42 | &.bg--primary{ 43 | background: lighten(@color-primary, 40%); 44 | border-color: @color-primary; 45 | .alert__body{ 46 | > span{ 47 | color: @color-body; 48 | } 49 | } 50 | .alert__close{ 51 | color: @color-primary; 52 | } 53 | } 54 | &.alert--dismissed{ 55 | display: none; 56 | } 57 | } -------------------------------------------------------------------------------- /less/framework_components/bars.less: -------------------------------------------------------------------------------- 1 | // DESCRIPTION: 2 | // Defines the structure of bars for navigation / utility 3 | // 4 | // 5 | // MARKUP: 6 | // 7 | //
8 | // ... 9 | //
10 | // 11 | // MODIFIERS: 12 | //.bar--sm - Add class to bar to make slightly smaller with larger logo 13 | //.bar--lg - Add class to bar to make taller with larger logo 14 | //.bar--xlg - Add class to bar to make much taller with larger logo 15 | 16 | .bar{ 17 | padding: @base-line-height 0; 18 | .logo{ 19 | margin: 0; 20 | position: relative; 21 | top: 4px; 22 | } 23 | .menu-horizontal{ 24 | position: relative; 25 | top: 6px; 26 | } 27 | &:not([class*='visible-']){ 28 | +.bar{ 29 | margin-top: @base-line-height/2; 30 | } 31 | } 32 | &.bar--xs{ 33 | padding: @base-line-height/4 0; 34 | } 35 | &.bar--sm{ 36 | padding: @base-line-height/2 0; 37 | } 38 | &.bar--lg{ 39 | padding: @base-line-height*1.5 0; 40 | .logo{ 41 | top: 0; 42 | } 43 | } 44 | &.bar--xlg{ 45 | padding: @base-line-height*2.5 0; 46 | .logo{ 47 | top: 0; 48 | } 49 | } 50 | &.bg--dark{ 51 | .logo-dark{ 52 | display: none; 53 | } 54 | } 55 | &:not(.bg--dark):not(.bar--transparent){ 56 | .logo-light{ 57 | display: none; 58 | } 59 | } 60 | } 61 | 62 | @media all and (max-width: 767px){ 63 | .bar{ 64 | &.bar--mobile-sticky[data-scroll-class*='fixed'].pos-fixed{ 65 | position: fixed; 66 | width: 100%; 67 | background: #fff; 68 | z-index: 999; 69 | } 70 | &.bar--mobile-sticky[data-scroll-class*='fixed'] + .bar.pos-fixed{ 71 | top: @base-line-height * 2; 72 | position: fixed; 73 | width: 100%; 74 | background: #fff; 75 | z-index: 999; 76 | } 77 | } 78 | } 79 | 80 | // Desktop 81 | @media all and (min-width: 991px){ 82 | .bar__module{ 83 | &:not(:only-child){ 84 | display: inline-block; 85 | } 86 | &:not(:last-child){ 87 | margin-right: @base-line-height/2; 88 | } 89 | } 90 | .bar--transparent:not(.bar--dark){ 91 | background: none; 92 | .logo-dark{ 93 | display: none; 94 | } 95 | .logo-light{ 96 | display: inline-block; 97 | } 98 | &:not(.pos-fixed){ 99 | .menu-horizontal{ 100 | > li{ 101 | > a, > span{ 102 | color: #fff; 103 | } 104 | } 105 | } 106 | .btn:not([class*='primary']){ 107 | .btn__text{ 108 | color: #fff; 109 | } 110 | border-color: rgba(255,255,255,.3); 111 | &:hover{ 112 | border-color: rgba(255,255,255,.7); 113 | } 114 | } 115 | } 116 | } 117 | .bar--absolute{ 118 | position: absolute; 119 | } 120 | .bar--absolute, .pos-fixed{ 121 | z-index: 99; 122 | width: 100%; 123 | } 124 | .bar{ 125 | &.pos-fixed{ 126 | position: fixed; 127 | top: 0; 128 | animation: fadeInDown .3s ease-out forwards; 129 | .box-shadow; 130 | &:not([class*='bg-']){ 131 | background: @color-bg-site; 132 | .logo-dark{ 133 | display: inline-block; 134 | } 135 | .logo-light{ 136 | display: none; 137 | } 138 | } 139 | &.bg--dark{ 140 | background: @color-dark; 141 | } 142 | } 143 | } 144 | } 145 | 146 | // Mobile 147 | @media all and (max-width: 767px){ 148 | .bar__module{ 149 | margin-bottom: @base-line-height/2; 150 | +.bar__module{ 151 | margin-top: @base-line-height; 152 | } 153 | .btn{ 154 | display: block; 155 | +.btn{ 156 | margin-left: 0 !important; 157 | } 158 | &:not(:last-child){ 159 | margin-bottom: @base-line-height/2; 160 | } 161 | } 162 | } 163 | .bar{ 164 | +nav.bar{ 165 | padding-top: 0; 166 | } 167 | } 168 | } -------------------------------------------------------------------------------- /less/framework_components/boxed-layout.less: -------------------------------------------------------------------------------- 1 | // DESCRIPTION: 2 | // Add the class "boxed-layout" to the element. 3 | 4 | @media all and (min-width: (@boxed-layout-width)){ 5 | body.boxed-layout{ 6 | padding: @base-line-height*2 0; 7 | background: darken(@color-bg-secondary, 5%); 8 | section:not([class*='bg-']):not(.imagebg),footer:not([class*='bg-']):not(.imagebg),nav:not([class*='bg-']):not(.bar--transparent):not(.bar--absolute),.tabs-container:not([class*='bg-']):not(.imagebg){ 9 | background: @color-bg-site; 10 | } 11 | .nav-container, .main-container, > section, nav{ 12 | max-width: @boxed-layout-width; 13 | margin: 0 auto; 14 | } 15 | } 16 | } -------------------------------------------------------------------------------- /less/framework_components/boxes.less: -------------------------------------------------------------------------------- 1 | // DESCRIPTION: 2 | // An easy way to create 'card' like content 3 | // that appears inside a padded box. 4 | // 5 | // 6 | // MARKUP: 7 | // 8 | //
9 | // ... 10 | //
11 | // 12 | // MODIFIERS: 13 | // .boxed--lg - place more padding on the box 14 | // .boxed--sm - place less padding on the box 15 | // .boxed--border - place a border around the box 16 | // .bg--primary, .bg--primary-1 etc. - Change the BG colour of the box 17 | 18 | .boxed{ 19 | position: relative; 20 | overflow: hidden; 21 | padding: @box-padding; 22 | margin-bottom: 30px; 23 | &.boxed--lg{ 24 | padding: @box-padding * 1.5; 25 | } 26 | &.boxed--sm{ 27 | padding: @box-padding / 1.5; 28 | } 29 | &.boxed--border{ 30 | border: @box-border; 31 | } 32 | >div[class*='col-']:first-child:not(.boxed){ 33 | padding-left: 0; 34 | } 35 | >div[class*='col-']:last-child:not(.boxed){ 36 | padding-right: 0; 37 | } 38 | } 39 | 40 | img + .boxed{ 41 | margin-top: -@base-line-height; 42 | } 43 | 44 | @media all and (max-width: 767px){ 45 | .boxed{ 46 | padding: @box-padding/1.5; 47 | margin-bottom: 15px; 48 | &.boxed--lg{ 49 | padding: @box-padding/1.5; 50 | } 51 | div[class*='col-']:not(.boxed){ 52 | padding: 0; 53 | } 54 | &:last-child{ 55 | margin-bottom: 15px; 56 | } 57 | } 58 | } -------------------------------------------------------------------------------- /less/framework_components/breadcrumbs.less: -------------------------------------------------------------------------------- 1 | .breadcrumb{ 2 | padding: 0; 3 | margin: 0; 4 | background: none; 5 | display: inline-block; 6 | li{ 7 | font-size: @breadcrumb-font-size; 8 | &when(@breadcrumbs-uppercase = true){ 9 | text-transform: uppercase; 10 | } 11 | } 12 | li+li:before{ 13 | padding: 0 @breadcrumb-item-padding; 14 | } 15 | } -------------------------------------------------------------------------------- /less/framework_components/buttons.less: -------------------------------------------------------------------------------- 1 | // MARKUP: 2 | // 3 | // 4 | // Button Title 5 | // 6 | // 7 | // MODIFIERS: 8 | // .btn--sm - smaller button 9 | // .btn--lg - larger button 10 | // .btn--primary,-1,-2 - modify the background and text color of the button 11 | 12 | .btn{ 13 | font-family: @button-font, 'Helvetica', 'Arial', sans-serif; 14 | .transition(0.1s,linear); 15 | border-radius: @button-radius; 16 | padding-top: @button-padding-n; 17 | padding-bottom: @button-padding-s; 18 | padding-right: @button-padding-e; 19 | padding-left: @button-padding-w; 20 | border: 1px solid @color-dark; 21 | border-width: @border-width; 22 | font-size: inherit; 23 | line-height: @base-line-height; 24 | .btn__text,i{ 25 | color: @color-heading; 26 | border-color: @color-heading; 27 | font-weight: @button-font-weight; 28 | font-size: @button-text-size; 29 | } 30 | &when(@buttons-uppercase = true){ 31 | text-transform: uppercase; 32 | } 33 | &[class*='col-']{ 34 | margin-left: 0; 35 | margin-right: 0; 36 | } 37 | &:active{ 38 | box-shadow: none; 39 | -webkit-box-shadow: none; 40 | } 41 | &.bg--facebook, &.bg--twitter, &.bg--instagram, &.bg--googleplus, &.bg--pinterest, &.bg--dribbble, &.bg--behance, &.bg--dark{ 42 | .btn__text{ 43 | color: #fff; 44 | i{ 45 | color: #fff; 46 | } 47 | } 48 | border-color: rgba(0,0,0,0) !important; 49 | &:hover{ 50 | opacity: .9; 51 | } 52 | } 53 | &.bg--error{ 54 | background: @color-error; 55 | border-color: @color-error !important; 56 | &:hover{ 57 | background: lighten(@color-error, 5%); 58 | border-color: lighten(@color-error, 5%) !important; 59 | color: #fff !important; 60 | } 61 | .btn__text{ 62 | color: #fff; 63 | i{ 64 | color: #fff; 65 | } 66 | } 67 | } 68 | } 69 | 70 | @media all and (min-width: 768px){ 71 | .btn{ 72 | &+.btn{ 73 | margin-left: @button-spacing; 74 | } 75 | } 76 | } 77 | 78 | .btn:first-child{ 79 | margin-left: 0; 80 | } 81 | 82 | .btn:last-child{ 83 | margin-right: 0; 84 | } 85 | 86 | .btn--xs{ 87 | padding-top: 0; 88 | padding-bottom: 0; 89 | padding-right: @button-padding-e/2; 90 | padding-left: @button-padding-w/2; 91 | } 92 | 93 | .btn--sm{ 94 | padding-top: @button-padding-n/1.5; 95 | padding-bottom: @button-padding-s/1.5; 96 | padding-right: @button-padding-e/1.5; 97 | padding-left: @button-padding-w/1.5; 98 | } 99 | 100 | .btn--lg{ 101 | padding-top: @button-padding-n*1.25; 102 | padding-bottom: @button-padding-s*1.25; 103 | padding-right: @button-padding-e*1.25; 104 | padding-left: @button-padding-w*1.25; 105 | .btn__text{ 106 | font-size: @button-text-size*1.25; 107 | } 108 | } 109 | 110 | // Primary 111 | 112 | .btn--primary, .btn--primary:visited{ 113 | background: @color-primary; 114 | border-color: @color-primary; 115 | .btn__text{ 116 | color: #fff; 117 | i{ 118 | color: #fff; 119 | } 120 | } 121 | } 122 | 123 | .btn--primary:hover{ 124 | background: lighten(@color-primary,5%); 125 | } 126 | 127 | .btn--primary:active{ 128 | background: darken(@color-primary,5%); 129 | } 130 | 131 | // Primary 1 132 | 133 | & when (@has-primary-1 = true){ 134 | .btn--primary-1, .btn--primary-1:visited{ 135 | background: @color-primary-1; 136 | border-color: @color-primary-1; 137 | .btn__text{ 138 | color: #fff; 139 | } 140 | } 141 | 142 | .btn--primary-1:hover{ 143 | background: lighten(@color-primary-1,5%); 144 | } 145 | 146 | .btn--primary-1:active{ 147 | background: darken(@color-primary-1,5%); 148 | } 149 | } 150 | 151 | // Primary 2 152 | 153 | & when (@has-primary-2 = true){ 154 | .btn--primary-2, .btn--primary-2:visited{ 155 | background: @color-primary-2; 156 | border-color: @color-primary-2; 157 | .btn__text{ 158 | color: #fff; 159 | } 160 | } 161 | 162 | .btn--primary-2:hover{ 163 | background: lighten(@color-primary-2,5%); 164 | } 165 | 166 | .btn--primary-2:active{ 167 | background: darken(@color-primary-2,5%); 168 | } 169 | } 170 | 171 | .btn--secondary{ 172 | background: @color-bg-secondary; 173 | border-color: @color-bg-secondary; 174 | &:hover{ 175 | background: lighten(@color-bg-secondary,2%); 176 | } 177 | &:active{ 178 | background: darken(@color-bg-secondary,2%); 179 | } 180 | } 181 | 182 | .btn--white{ 183 | background: #fff; 184 | color: @color-heading; 185 | border-color: #fff; 186 | i{ 187 | color: @color-heading; 188 | } 189 | } 190 | 191 | .btn--transparent{ 192 | background: none; 193 | border-color: rgba(0,0,0,0); 194 | padding-left: 0; 195 | padding-right: 0; 196 | &.btn--white{ 197 | .btn__text{ 198 | color: #fff; 199 | } 200 | } 201 | } 202 | 203 | .btn--unfilled{ 204 | background: none; 205 | &.btn--white{ 206 | .btn__text{ 207 | color: #fff; 208 | } 209 | i{ 210 | color: #fff; 211 | } 212 | } 213 | } 214 | 215 | // Floating 216 | 217 | .btn--floating{ 218 | position: fixed; 219 | bottom: @base-line-height*2; 220 | right: @base-line-height*2; 221 | z-index: 10; 222 | } 223 | -------------------------------------------------------------------------------- /less/framework_components/colors.less: -------------------------------------------------------------------------------- 1 | body{ 2 | background: @color-bg-site; 3 | } 4 | 5 | .color--primary{ 6 | color: @color-primary !important; 7 | } 8 | 9 | a{ 10 | color: @color-primary; 11 | } 12 | 13 | &when (@has-primary-1 = true){ 14 | .color--primary-1{ 15 | color: @color-primary-1 !important; 16 | } 17 | } 18 | 19 | &when (@has-primary-2 = true){ 20 | .color--primary-2{ 21 | color: @color-primary-2 !important; 22 | } 23 | } 24 | 25 | .color--white{ 26 | color: #fff; 27 | } 28 | 29 | .color--dark{ 30 | color: @color-dark; 31 | } 32 | 33 | .color--success{ 34 | color: @color-success; 35 | } 36 | 37 | .color--error{ 38 | color: @color-error; 39 | } 40 | 41 | .bg--dark{ 42 | background: @color-dark; 43 | &:not(.nav-bar):not(.bar){ 44 | h1,h2,h3,h4,h5,h6,i,span:not(.btn__text),p{ 45 | color: @color-on-dark; 46 | } 47 | color: @color-on-dark; 48 | a:not(.btn){ 49 | color: #fff; 50 | } 51 | } 52 | } 53 | 54 | .bg--site{ 55 | background: @color-bg-site; 56 | } 57 | 58 | .bg--secondary{ 59 | background: @color-bg-secondary; 60 | } 61 | 62 | .bg--primary{ 63 | background: @color-primary; 64 | p,span,ul,a:not(.btn){ 65 | color: #fff; 66 | } 67 | h1,h2,h3,h4,h5,h6,i{ 68 | color: #fff; 69 | } 70 | .color--primary{ 71 | color: #fff !important; 72 | } 73 | } 74 | 75 | .bg--white{ 76 | background: #fff; 77 | p,span,ul,a:not(.btn){ 78 | color: @color-body; 79 | } 80 | h1,h2,h3,h4,h5,h6,i{ 81 | color: @color-dark; 82 | } 83 | } 84 | 85 | .bg--error{ 86 | background: @color-error; 87 | } 88 | 89 | .bg--success{ 90 | background: @color-success; 91 | } 92 | 93 | .imagebg:not(.image--light){ 94 | .bg--white{ 95 | p,span,ul,a:not(.btn){ 96 | color: @color-body; 97 | } 98 | h1,h2,h3,h4,h5,h6,i{ 99 | color: @color-dark; 100 | } 101 | } 102 | .bg--secondary{ 103 | background: rgba(red(@color-bg-secondary),green(@color-bg-secondary),blue(@color-bg-secondary),.2); 104 | } 105 | } 106 | 107 | &when (@has-primary-1 = true){ 108 | .bg--primary-1{ 109 | background: @color-primary-1; 110 | p,span,ul,a:not(.btn){ 111 | color: #fff; 112 | } 113 | h1,h2,h3,h4,h5,h6,i{ 114 | color: #fff; 115 | } 116 | } 117 | } 118 | 119 | &when (@has-primary-2 = true){ 120 | .bg--primary-2{ 121 | background: @color-primary-2; 122 | p,span,ul,a:not(.btn){ 123 | color: #fff; 124 | } 125 | h1,h2,h3,h4,h5,h6,i{ 126 | color: #fff; 127 | } 128 | } 129 | } 130 | 131 | .image-bg:not(.image-light){ 132 | *:not(a){ 133 | color: #fff; 134 | } 135 | } 136 | 137 | .color--facebook{ 138 | color: #3b5998; 139 | } 140 | .color--twitter{ 141 | color: #00aced; 142 | } 143 | .color--googleplus{ 144 | color: #dd4b39; 145 | } 146 | .color--instagram{ 147 | color: #125688; 148 | } 149 | .color--pinterest{ 150 | color: #cb2027; 151 | } 152 | .color--dribbble{ 153 | color: #ea4c89; 154 | } 155 | .color--behance{ 156 | color: #053eff; 157 | } 158 | 159 | .bg--facebook{ 160 | background: #3b5998; 161 | color: #fff; 162 | } 163 | .bg--twitter{ 164 | background: #00aced; 165 | color: #fff; 166 | } 167 | .bg--googleplus{ 168 | background: #dd4b39; 169 | color: #fff; 170 | } 171 | .bg--instagram{ 172 | background: #125688; 173 | color: #fff; 174 | } 175 | .bg--pinterest{ 176 | background: #cb2027; 177 | color: #fff; 178 | } 179 | .bg--dribbble{ 180 | background: #ea4c89; 181 | color: #fff; 182 | } 183 | .bg--behance{ 184 | background: #053eff; 185 | color: #fff; 186 | } -------------------------------------------------------------------------------- /less/framework_components/dropdowns.less: -------------------------------------------------------------------------------- 1 | .dropdown{ 2 | position: relative; 3 | .dropdown__container{ 4 | .transition(0.3s,ease); 5 | opacity: 0; 6 | pointer-events: none; 7 | position: absolute; 8 | z-index: 999; 9 | .dropdown__container{ 10 | &:before{ 11 | height: 0; 12 | } 13 | } 14 | } 15 | .dropdown__content{ 16 | padding: @base-line-height; 17 | &:not([class*='col-']){ 18 | width: @base-line-height*10; 19 | } 20 | &:not([class*='bg-']){ 21 | background: @color-bg-site; 22 | } 23 | &:not([class='bg--dark']){ 24 | .menu-vertical{ 25 | a{ 26 | color: @color-body; 27 | } 28 | } 29 | } 30 | } 31 | .dropdown__trigger{ 32 | cursor: pointer; 33 | user-select: none; 34 | } 35 | &.dropdown--active{ 36 | >.dropdown__container{ 37 | opacity: 1; 38 | >.container{ 39 | >.row{ 40 | > .dropdown__content{ 41 | pointer-events: all; 42 | } 43 | } 44 | } 45 | } 46 | } 47 | } 48 | 49 | //Desktop 50 | @media all and (min-width: 991px){ 51 | .dropdown{ 52 | .dropdown__container{ 53 | &:before{ 54 | height: @base-line-height/2; 55 | width: 100%; 56 | content: ''; 57 | display: block; 58 | } 59 | } 60 | .dropdown__content{ 61 | &.dropdown__content--md{ 62 | padding: @base-line-height*1.5; 63 | } 64 | &.dropdown__content--lg{ 65 | padding: @base-line-height*2; 66 | } 67 | &.dropdown__content--xlg{ 68 | padding: @base-line-height*2.5; 69 | } 70 | } 71 | } 72 | } 73 | 74 | // Tablet Down 75 | @media all and (max-width: 767px){ 76 | .dropdown{ 77 | .dropdown__container{ 78 | min-width: 100%; 79 | position: relative; 80 | display: none; 81 | } 82 | .dropdown__content{ 83 | padding: @base-line-height; 84 | left: 0 !important; 85 | } 86 | &.dropdown--active{ 87 | >.dropdown__container{ 88 | display: block; 89 | } 90 | } 91 | } 92 | } 93 | 94 | // Dropdown Hovers 95 | 96 | body.dropdowns--hover{ 97 | .dropdown:not(.dropdown--click){ 98 | &:hover{ 99 | >.dropdown__container{ 100 | &:before{ 101 | pointer-events: all; 102 | } 103 | opacity: 1; 104 | .dropdown__content{ 105 | pointer-events: all; 106 | } 107 | } 108 | } 109 | } 110 | } 111 | 112 | body:not(.dropdowns--hover){ 113 | .dropdown.dropdown--hover{ 114 | &:hover{ 115 | >.dropdown__container{ 116 | &:before{ 117 | pointer-events: all; 118 | } 119 | opacity: 1; 120 | .dropdown__content{ 121 | pointer-events: all; 122 | } 123 | } 124 | } 125 | } 126 | } 127 | 128 | // Tablet Down 129 | @media all and (max-width: 990px){ 130 | body.dropdowns--hover{ 131 | .dropdown:not(.dropdown--click){ 132 | &.dropdown--active{ 133 | >.dropdown__container{ 134 | &:before{ 135 | pointer-events: all; 136 | } 137 | display: block; 138 | } 139 | } 140 | } 141 | } 142 | } 143 | 144 | @media all and (max-width: 767px){ 145 | .dropdown{ 146 | &.dropdown--absolute{ 147 | .dropdown__container{ 148 | position: absolute; 149 | } 150 | } 151 | } 152 | } 153 | 154 | -------------------------------------------------------------------------------- /less/framework_components/flickity.less: -------------------------------------------------------------------------------- 1 | .heightSlides(@number) when (@number > 0){ 2 | .heightSlides((@number - 1)); 3 | @multiplier: @number*10; 4 | &.height-@{multiplier}{ 5 | height: auto; 6 | .slides .flickity-slider > li{ 7 | height: @number*10vh; 8 | padding: 0; 9 | } 10 | } 11 | @media all and (min-width: 768px){ 12 | &.height-@{multiplier}{ 13 | .slides li.imagebg{ 14 | min-height: @number*10vh; 15 | } 16 | } 17 | } 18 | } 19 | 20 | .slides:not(.flickity-enabled){ 21 | li.imagebg:not(:first-child){ 22 | display: none; 23 | } 24 | li.imagebg:first-child{ 25 | .container{ 26 | opacity: 0; 27 | } 28 | background: @color-dark; 29 | animation: backgroundLoad .5s ease alternate infinite; 30 | } 31 | } 32 | 33 | @keyframes backgroundLoad{ 34 | 0%{ background: @color-dark; } 35 | 100%{ background: lighten(@color-dark, 10%) } 36 | } 37 | 38 | .slider{ 39 | .heightSlides(10); 40 | .slides{ 41 | .flickity-slider{ 42 | > li{ 43 | &:not([class*='col-']){ 44 | width: 100%; 45 | } 46 | } 47 | } 48 | &.slides--gapless{ 49 | li[class*='col-']{ 50 | padding-left: 0; 51 | padding-right: 0; 52 | } 53 | } 54 | } 55 | &[data-arrows="true"]{ 56 | &.slider--arrows-hover{ 57 | &:not(:hover){ 58 | .flickity-prev-next-button{ 59 | opacity: 0; 60 | } 61 | } 62 | } 63 | } 64 | &[data-paging="true"]{ 65 | &:not(section){ 66 | margin-bottom: @base-line-height*2; 67 | .flickity-page-dots{ 68 | bottom: -@base-line-height*2; 69 | } 70 | } 71 | &:not([class*='text-']){ 72 | .flickity-page-dots{ 73 | text-align: center; 74 | } 75 | } 76 | } 77 | &[data-children="1"]{ 78 | .flickity-prev-next-button{ 79 | display: none; 80 | } 81 | } 82 | &:not([data-paging="true"]){ 83 | .slides{ 84 | margin: 0; 85 | } 86 | } 87 | &.controls--dark{ 88 | .flickity-page-dots{ 89 | .dot{ 90 | background: @color-dark; 91 | } 92 | } 93 | .flickity-prev-next-button{ 94 | &:before{ 95 | color: @color-dark; 96 | } 97 | } 98 | } 99 | } 100 | 101 | section.slider{ 102 | padding: 0; 103 | .heightSlides(10); 104 | &[data-paging="true"]{ 105 | .flickity-page-dots{ 106 | bottom: @base-line-height; 107 | } 108 | } 109 | &:not(.image--light){ 110 | &[data-paging="true"]{ 111 | .flickity-page-dots{ 112 | .dot{ 113 | background: #fff; 114 | } 115 | } 116 | } 117 | } 118 | .slides{ 119 | margin: 0; 120 | } 121 | } 122 | 123 | @media all and (max-width: 767px){ 124 | section.slider{ 125 | &[class*='height-']{ 126 | .slides .flickity-slider > li{ 127 | height: auto; 128 | padding: @standard-space-n 0; 129 | } 130 | } 131 | &.space--lg{ 132 | .slides .flickity-slider > li{ 133 | padding: @standard-space-mobile * 2 0; 134 | } 135 | } 136 | &.space--xlg{ 137 | .slides .flickity-slider > li{ 138 | padding: @standard-space-mobile * 2 0; 139 | } 140 | } 141 | } 142 | } 143 | 144 | section.bg--dark,section.bg--primary{ 145 | .slider{ 146 | &[data-paging="true"]{ 147 | .flickity-page-dots{ 148 | .dot{ 149 | background: #fff; 150 | } 151 | } 152 | } 153 | } 154 | } 155 | 156 | .flickity-page-dots{ 157 | .dot{ 158 | .transition(0.3s,ease); 159 | width: @slider-paging-height; 160 | height: @slider-paging-width; 161 | border-radius: @slider-paging-radius; 162 | background: @slider-paging-bg; 163 | border: @slider-paging-border; 164 | margin: 0 @slider-paging-spacing; 165 | &:hover{ 166 | &:not(.is-selected){ 167 | opacity: .6; 168 | } 169 | } 170 | } 171 | } 172 | 173 | .text-center, section.slider{ 174 | .flickity-page-dots{ 175 | text-align: center; 176 | } 177 | } 178 | 179 | .flickity-prev-next-button{ 180 | svg{ 181 | display: none; 182 | } 183 | &:before{ 184 | font-family: @slider-arrow-font; 185 | content: @slider-arrow-right; 186 | font-size: @slider-arrow-size; 187 | font-weight: normal; 188 | } 189 | &.previous{ 190 | &:before{ 191 | content: @slider-arrow-left; 192 | } 193 | } 194 | } 195 | 196 | .imagebg:not(.image--light),.bg--dark{ 197 | .flickity-page-dots{ 198 | .dot{ 199 | background: #fff; 200 | } 201 | } 202 | } -------------------------------------------------------------------------------- /less/framework_components/granim.less: -------------------------------------------------------------------------------- 1 | [data-gradient-bg]{ 2 | position: relative; 3 | background: @color-dark; 4 | > canvas{ 5 | position: absolute; 6 | width: 100%; 7 | height: 100%; 8 | top: 0; 9 | left: 0; 10 | +.background-image-holder{ 11 | opacity: .2 !important; 12 | } 13 | } 14 | } -------------------------------------------------------------------------------- /less/framework_components/helpers.less: -------------------------------------------------------------------------------- 1 | .clearfix{ 2 | overflow: hidden; 3 | } 4 | 5 | .clearfix-after{ 6 | &:after{ 7 | content: ""; 8 | display: table; 9 | clear: both; 10 | } 11 | } 12 | 13 | .allow-overflow{ 14 | overflow: visible; 15 | } 16 | 17 | .container{ 18 | .row--gapless{ 19 | padding-left: 15px; 20 | padding-right: 15px; 21 | > div[class*='col-']{ 22 | padding: 0; 23 | } 24 | } 25 | } 26 | 27 | @media all and (max-width: 767px){ 28 | .text-left-xs{ 29 | text-align: left; 30 | } 31 | } 32 | 33 | @media all and (max-width: 991px){ 34 | .text-left-sm{ 35 | text-align: left; 36 | } 37 | } 38 | 39 | section{ 40 | > .row--gapless{ 41 | padding-left: 0; 42 | padding-right: 0; 43 | > div[class*='col-']{ 44 | padding: 0; 45 | } 46 | } 47 | } 48 | 49 | div{ 50 | &.right{ 51 | float: right; 52 | } 53 | &.left{ 54 | float: left; 55 | } 56 | } 57 | 58 | section.text-right{ 59 | > .container:last-child > .row:only-child > div[class*='col-']:only-child{ 60 | float: right; 61 | } 62 | } -------------------------------------------------------------------------------- /less/framework_components/hover-elements.less: -------------------------------------------------------------------------------- 1 | // MARKUP: 2 | // 3 | //
4 | //
5 | // .. 6 | //
7 | // 8 | //
9 | // .. 10 | //
11 | //
12 | // 13 | // 14 | // 15 | // MODIFIERS: 16 | // .hover--active - simulates a permanent hover on the element 17 | 18 | 19 | .hover-element{ 20 | position: relative; 21 | overflow: hidden; 22 | margin-bottom: 30px; 23 | *{ 24 | .transition(0.3s,ease); 25 | } 26 | .hover-element__reveal{ 27 | position: absolute; 28 | top: 0; 29 | left: 0; 30 | opacity: 0; 31 | width: 100%; 32 | height: 100%; 33 | .boxed{ 34 | height: 100%; 35 | } 36 | } 37 | &:hover,&.hover--active{ 38 | .hover-element__reveal{ 39 | opacity: 1; 40 | } 41 | } 42 | img{ 43 | margin-bottom: 0; 44 | } 45 | } 46 | 47 | @media all and (max-width: 1024px){ 48 | .hover-element{ 49 | cursor: pointer; 50 | } 51 | } 52 | 53 | .row{ 54 | &:last-child{ 55 | div[class*='col-']{ 56 | &:last-child{ 57 | .hover-element{ 58 | margin-bottom: 0; 59 | } 60 | } 61 | } 62 | } 63 | } -------------------------------------------------------------------------------- /less/framework_components/icons.less: -------------------------------------------------------------------------------- 1 | .icon{ 2 | line-height: 1em; 3 | font-size: @icon-md-size; 4 | } 5 | 6 | .icon--xs{ 7 | font-size: 1em; 8 | } 9 | 10 | .icon--sm{ 11 | font-size: @icon-sm-size; 12 | } 13 | 14 | .icon--lg{ 15 | font-size: @icon-lg-size; 16 | } -------------------------------------------------------------------------------- /less/framework_components/image-blocks.less: -------------------------------------------------------------------------------- 1 | // MARKUP: 2 | // 3 | //
4 | //
5 | // ... 6 | //
7 | // 8 | //
9 | // ... 10 | //
11 | //
12 | // 13 | // MODIFIERS: 14 | // .pos-left,.pos-right,.col-* - Adjust the position and width of the image blocks content on the '.imaeg-block__content' element. 15 | 16 | .imageblock{ 17 | position: relative; 18 | padding: 0; 19 | > .container, > div[class*='col-']:not(.imageblock__content){ 20 | padding-top: @standard-space-n; 21 | padding-bottom: @standard-space-s; 22 | float: none; 23 | overflow: hidden; 24 | } 25 | &.imageblock--lg{ 26 | > .container, > div[class*='col-']:not(.imageblock__content){ 27 | padding-top: @standard-space-s * 1.25; 28 | padding-bottom: @standard-space-s * 1.25; 29 | float: none; 30 | overflow: hidden; 31 | } 32 | } 33 | .imageblock__content{ 34 | position: absolute; 35 | height: 100%; 36 | top: 0; 37 | z-index: 2; 38 | padding: 0; 39 | .slider{ 40 | position: absolute; 41 | width: 100%; 42 | height: 100%; 43 | top: 0; 44 | .slides{ 45 | > li{ 46 | padding: 0; 47 | min-height: 100%; 48 | position: absolute !important; 49 | } 50 | } 51 | } 52 | } 53 | &.allow-overflow{ 54 | .imageblock__content{ 55 | overflow: visible; 56 | } 57 | } 58 | } 59 | 60 | @media all and (max-height: 728px){ 61 | .imageblock{ 62 | > .container, > div[class*='col-']:not(.imageblock__content){ 63 | padding-top: @standard-space-n/2; 64 | padding-bottom: @standard-space-s/2; 65 | } 66 | } 67 | } 68 | 69 | @media all and (max-width: 767px){ 70 | .imageblock{ 71 | &[class*='space-']{ 72 | padding-bottom: 0; 73 | padding-top: 0; 74 | } 75 | .imageblock__content{ 76 | position: relative; 77 | min-height: @base-line-height * 10; 78 | } 79 | > .container, > div[class*='col-']:not(.imageblock__content){ 80 | padding-top: @standard-space-mobile; 81 | padding-bottom: @standard-space-mobile; 82 | float: none; 83 | overflow: hidden; 84 | } 85 | &.imageblock--lg{ 86 | > .container, > div[class*='col-']:not(.imageblock__content){ 87 | padding-top: @standard-space-mobile; 88 | padding-bottom: @standard-space-mobile; 89 | float: none; 90 | overflow: hidden; 91 | } 92 | } 93 | } 94 | } -------------------------------------------------------------------------------- /less/framework_components/lightbox-images.less: -------------------------------------------------------------------------------- 1 | // MARKUP: 2 | // 3 | // 10 | // 11 | // 12 | // MODIFIERS: 13 | // .gallery--gaps - make whitespace around each item 14 | // .masonry - arrange the items in a masonry layout 15 | // [data-grid] - how many items per row 16 | 17 | .lb-outerContainer{ 18 | border-radius: 0; 19 | .lb-container{ 20 | padding: 0; 21 | img{ 22 | margin: 0; 23 | } 24 | } 25 | } 26 | 27 | .lightbox-gallery{ 28 | overflow: hidden; 29 | li{ 30 | float: left; 31 | img{ 32 | margin: 0; 33 | width: 100%; 34 | } 35 | } 36 | &.gallery--gaps{ 37 | li{ 38 | padding: @default-gap-padding; 39 | } 40 | } 41 | } -------------------------------------------------------------------------------- /less/framework_components/lists.less: -------------------------------------------------------------------------------- 1 | ul{ 2 | &:last-child{ 3 | margin: 0; 4 | } 5 | } 6 | 7 | .list-inline li{ 8 | padding: 0 1em; 9 | margin-left: 0; 10 | &:first-child{ 11 | padding-left: 0; 12 | } 13 | 14 | &:last-child{ 15 | padding-right: 0; 16 | } 17 | } 18 | 19 | .list-inline.list-inline--narrow li{ 20 | padding: 0 .5em; 21 | } 22 | 23 | .list-inline.list-inline--wide li{ 24 | padding: 0 2em; 25 | } -------------------------------------------------------------------------------- /less/framework_components/maps.less: -------------------------------------------------------------------------------- 1 | .map-container{ 2 | position: relative; 3 | overflow: hidden; 4 | iframe, .map-canvas{ 5 | position: absolute; 6 | width: 100%; 7 | height: 100%; 8 | top: 0; 9 | } 10 | } -------------------------------------------------------------------------------- /less/framework_components/masonry.less: -------------------------------------------------------------------------------- 1 | // MARKUP: 2 | // 3 | //
4 | //
5 | // ... 6 | //
7 | //
8 | // 9 | // MODIFIERS: 10 | // .modal-trigger[data-modal-id] - use any element to trigger a modal using its ID 11 | // [data-autoshow] - place on '.modal-container' outside the main container for autoshow modals 12 | // [data-width][data-height] - place on modal content to control height in % 13 | 14 | .masonry{ 15 | .masonry__container{ 16 | &.masonry--active{ 17 | .masonry__item{ 18 | opacity: 1; 19 | pointer-events: all; 20 | } 21 | } 22 | .masonry__item{ 23 | opacity: 0; 24 | pointer-events: none; 25 | } 26 | } 27 | .masonry__filters{ 28 | li{ 29 | display: inline-block; 30 | cursor: pointer; 31 | text-transform: capitalize; 32 | .disable-select(); 33 | &.active{ 34 | cursor: default; 35 | } 36 | } 37 | } 38 | &.masonry--gapless{ 39 | .masonry__item{ 40 | padding: 0 !important; 41 | margin-bottom: 0; 42 | } 43 | } 44 | } -------------------------------------------------------------------------------- /less/framework_components/menus.less: -------------------------------------------------------------------------------- 1 | .menu-horizontal{ 2 | > li{ 3 | &:not(:hover){ 4 | >a,>span,>.modal-instance>.modal-trigger{ 5 | opacity: .5; 6 | } 7 | } 8 | >a,>span,>.modal-instance>.modal-trigger{ 9 | .transition(0.3s,ease); 10 | color: @color-heading; 11 | &:hover{ 12 | color: @color-heading; 13 | } 14 | } 15 | } 16 | } 17 | 18 | .bg--dark{ 19 | .menu-horizontal{ 20 | >li{ 21 | >a,>span{ 22 | color: #fff; 23 | &:hover{ 24 | color: #fff; 25 | } 26 | } 27 | } 28 | } 29 | } 30 | 31 | .menu-vertical{ 32 | width: 100%; 33 | li{ 34 | width: 100%; 35 | a{ 36 | font-weight: normal; 37 | } 38 | } 39 | } 40 | 41 | @media all and (min-width: 990px){ 42 | .menu-horizontal{ 43 | display: inline-block; 44 | >li{ 45 | display: inline-block; 46 | &:not(:last-child){ 47 | margin-right: @base-line-height; 48 | } 49 | } 50 | } 51 | .menu-vertical{ 52 | display: inline-block; 53 | li{ 54 | white-space: nowrap; 55 | } 56 | .dropdown__container{ 57 | top: 0; 58 | .dropdown__content:not([class*='bg-']){ 59 | background: @color-bg-site; 60 | } 61 | .dropdown__content{ 62 | transform: translateX(75%); 63 | } 64 | } 65 | } 66 | } -------------------------------------------------------------------------------- /less/framework_components/mixins.less: -------------------------------------------------------------------------------- 1 | .transition(@time,@ease){ 2 | transition: @time @ease ; 3 | -webkit-transition: @time @ease ; 4 | -moz-transition: @time @ease ; 5 | } 6 | 7 | .rotate(@amount){ 8 | transform: rotate(@amount); 9 | -webkit-transform: rotate(@amount); 10 | } 11 | 12 | .scale(@amount){ 13 | transform: scale(@amount); 14 | -webkit-transform: scale(@amount); 15 | } 16 | 17 | .translate3d(@x,@y,@z){ 18 | transform: translate3d(@x,@y,@z); 19 | -webkit-transform: translate3d(@x,@y,@z); 20 | } 21 | 22 | .placeholder-text(@color){ 23 | &::-webkit-input-placeholder { 24 | color: @color; 25 | font-size: @input-placeholder-size; 26 | } 27 | &:-moz-placeholder { /* Firefox 18- */ 28 | color: @color; 29 | font-size: @input-placeholder-size; 30 | } 31 | &::-moz-placeholder { /* Firefox 19+ */ 32 | color: @color; 33 | font-size: @input-placeholder-size; 34 | } 35 | &:-ms-input-placeholder { 36 | color: @color; 37 | font-size: @input-placeholder-size; 38 | } 39 | } 40 | 41 | .disable-select() { 42 | -webkit-user-select: none; 43 | -moz-user-select: none; 44 | -ms-user-select: none; 45 | user-select: none; 46 | } 47 | 48 | .smart-text-color (@color,@amount) when (lightness(@color) >= 50%) { 49 | color: darken(@color,@amount); 50 | } 51 | .smart-text-color (@color,@amount) when (lightness(@color) < 50%) { 52 | color: lighten(@color,@amount); 53 | } 54 | .smart-text-color (@color,@amount) when (lightness(@color) < 20%) { 55 | color: lighten(@color,80%); 56 | } 57 | 58 | .translate3d(@x,@y,@z){ 59 | transform: translate3d(@x,@y,@z); 60 | -webkit-transform: translate3d(@x,@y,@z); 61 | } 62 | 63 | .animation(@name,@duration,@timing,@delay,@fillmode){ 64 | animation: @name @duration @timing @delay @fillmode; 65 | -webkit-animation: @name @duration @timing @delay @fillmode; 66 | -moz-animation: @name @duration @timing @delay @fillmode; 67 | } 68 | 69 | .box-shadow(@level: 1){ 70 | & when (@level = 1) { 71 | box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 72 | } 73 | & when (@level = 2) { 74 | box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); 75 | } 76 | & when (@level = 3) { 77 | box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); 78 | } 79 | & when (@level = 4) { 80 | box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); 81 | } 82 | & when (@level = 5) { 83 | box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22); 84 | } 85 | } -------------------------------------------------------------------------------- /less/framework_components/modals.less: -------------------------------------------------------------------------------- 1 | // MARKUP: 2 | // 3 | //
4 | // Trigger 5 | //
6 | //
7 | // ... 8 | //
9 | //
10 | //
11 | // 12 | // MODIFIERS: 13 | // .modal-trigger[data-modal-id] - use any element to trigger a modal using its ID 14 | // [data-autoshow] - place on '.modal-container' outside the main container for autoshow modals 15 | // [data-width][data-height] - place on modal content to control height in % 16 | // .height--natural - (on modal-content) content dictates the height and width for the modal 17 | 18 | .modal-instance{ 19 | .modal-body{ 20 | display: none; 21 | } 22 | } 23 | .modal-container{ 24 | .transition(0.3s,linear); 25 | padding: 0; 26 | visibility: hidden; 27 | opacity: 0; 28 | z-index: 999; 29 | pointer-events: none; 30 | position: fixed; 31 | width: 100%; 32 | height: 100%; 33 | top: 0; 34 | left: 0; 35 | &.modal-active{ 36 | opacity: 1; 37 | visibility: visible; 38 | pointer-events: all; 39 | } 40 | &:before{ 41 | background: rgba(0,0,0,0.85); 42 | content: ''; 43 | position: fixed; 44 | width: 100%; 45 | height: 100%; 46 | top: 0; 47 | left: 0; 48 | z-index: 1; 49 | } 50 | .modal-content{ 51 | backface-visibility: hidden; 52 | position: fixed; 53 | z-index: 2; 54 | top: 50%; 55 | left: 50%; 56 | max-height: 100%; 57 | overflow-y: scroll; 58 | border: none; 59 | .translate3d(-50%,-50%,0); 60 | &:not(.height--natural){ 61 | width: 50%; 62 | height: 50%; 63 | } 64 | padding: @default-modal-padding; 65 | border-radius: 0; 66 | box-shadow: none; 67 | .modal-close-cross{ 68 | cursor: pointer; 69 | position: absolute; 70 | opacity: .5; 71 | .transition(0.1s,linear); 72 | top: 1em; 73 | right: 1em; 74 | z-index: 99; 75 | &:before{ 76 | content: '\00D7'; 77 | font-size: 1.5em; 78 | } 79 | &:hover{ 80 | opacity: 1; 81 | } 82 | } 83 | &.imagebg:not(.image--light) .modal-close-cross{ 84 | &:before{ 85 | color: #fff; 86 | } 87 | } 88 | 89 | iframe{ 90 | width: 100%; 91 | outline: none; 92 | border: none; 93 | height: 100%; 94 | backface-visibility: hidden; 95 | &:first-child{ 96 | +.modal-close-cross{ 97 | &:last-child{ 98 | top: -@base-line-height*2; 99 | } 100 | } 101 | } 102 | } 103 | } 104 | } 105 | 106 | .modal-content{ 107 | &.section-modal{ 108 | pointer-events: none; 109 | [class*='col-']{ 110 | pointer-events: all; 111 | } 112 | } 113 | } 114 | 115 | @media all and (max-width: 767px){ 116 | .modal-container{ 117 | .modal-content{ 118 | width: 97% !important; 119 | height: auto !important; 120 | padding-top: 2em; 121 | padding-bottom: 2em; 122 | } 123 | } 124 | } -------------------------------------------------------------------------------- /less/framework_components/navigation-inpage.less: -------------------------------------------------------------------------------- 1 | .page-navigator{ 2 | position: fixed; 3 | padding: 0; 4 | top: 50%; 5 | transform: translateY(-50%); 6 | right: @base-line-height; 7 | z-index: 10; 8 | } 9 | 10 | .page-navigator ul{ 11 | display: inline-block; 12 | padding: @base-line-height/2; 13 | background: rgba(0,0,0,0.4); 14 | border-radius: @base-line-height; 15 | transition: all .2s ease; 16 | &:hover{ 17 | background: rgba(0,0,0,0.6); 18 | } 19 | li{ 20 | &:not(:last-child){ 21 | margin-bottom: @base-line-height; 22 | } 23 | } 24 | } 25 | 26 | @media all and (max-width: 767px){ 27 | .page-navigator{ 28 | right: 0; 29 | ul{ 30 | border-radius: @base-line-height 0 0 @base-line-height; 31 | padding: @base-line-height @base-line-height/2; 32 | } 33 | } 34 | } 35 | 36 | .page-navigator li a{ 37 | width: 8px; 38 | height: 8px; 39 | background: #fff; 40 | border-radius: 50%; 41 | transition: all .2s ease; 42 | display: block; 43 | position: relative; 44 | &:not(:hover){ 45 | opacity: .5; 46 | } 47 | &.inner-link--active{ 48 | opacity: 1; 49 | animation: bulge .5s ease; 50 | -webkit-animation: bulge .5s ease; 51 | } 52 | } 53 | 54 | @keyframes bulge{ 55 | 0%{ transform: scale(1); } 56 | 50%{ transform: scale(1.3); } 57 | 100%{ transform: scale(1); } 58 | } 59 | 60 | @-webkit-keyframes bulge{ 61 | 0%{ transform: scale(1); } 62 | 50%{ transform: scale(1.3); } 63 | 100%{ transform: scale(1); } 64 | } 65 | 66 | .page-navigator li a[data-title]{ 67 | &:before{ 68 | content: attr(data-title); 69 | position: absolute; 70 | right: 12px; 71 | top: -14px; 72 | background: #222; 73 | color: #fff; 74 | border-radius: 6px; 75 | padding: 4px 8px; 76 | display: inline-block; 77 | transition: all .2s ease; 78 | white-space: nowrap; 79 | } 80 | &:not(:hover){ 81 | &:before{ 82 | opacity: 0; 83 | transform: translateX(-20px); 84 | } 85 | } 86 | } -------------------------------------------------------------------------------- /less/framework_components/newsletter-providers.less: -------------------------------------------------------------------------------- 1 | form[action*='createsend.com']{ 2 | *{ 3 | .transition(0.3s,linear); 4 | opacity: 0; 5 | } 6 | &.form--active{ 7 | *{ 8 | opacity: 1; 9 | } 10 | } 11 | .input-checkbox{ 12 | + br{ 13 | display: none; 14 | } 15 | } 16 | &.no-labels{ 17 | label{ 18 | display: none 19 | } 20 | } 21 | br{ 22 | display: none; 23 | } 24 | p{ 25 | > label{ 26 | &:first-child{ 27 | margin-bottom: @base-line-height / 2; 28 | } 29 | } 30 | } 31 | } 32 | 33 | form[action*='list-manage.com']{ 34 | h2{ 35 | .h4; 36 | } 37 | .input-group{ 38 | ul{ 39 | overflow: hidden; 40 | li{ 41 | float: left; 42 | } 43 | } 44 | } 45 | *{ 46 | .transition(0.3s,linear); 47 | opacity: 0; 48 | } 49 | &.form--active{ 50 | *{ 51 | opacity: 1; 52 | } 53 | } 54 | &.no-labels{ 55 | label{ 56 | display: none 57 | } 58 | } 59 | .small-meta{ 60 | font-size: 0.5em; 61 | } 62 | } -------------------------------------------------------------------------------- /less/framework_components/notifications.less: -------------------------------------------------------------------------------- 1 | // MARKUP 2 | // 3 | //
4 | // ... 5 | // Shut It Down 6 | //
7 | // 8 | // MODIFIERS: 9 | // .pos-right,top,left,bottom - position the notification 10 | // .col-* - control the width of the notification 11 | // [data-animation] - from top,bottom,left,right 12 | 13 | .notification{ 14 | .box-shadow(@box-shadow-level); 15 | position: fixed; 16 | z-index: 99; 17 | pointer-events: none; 18 | padding: @default-notification-padding; 19 | margin: 1em; 20 | &:not([class*='bg-']){ 21 | background: #fff; 22 | } 23 | &[class*='col-']{ 24 | min-width: 400px; 25 | } 26 | opacity: 0; 27 | .transition(0.3s,linear); 28 | .notification-close-cross{ 29 | position: absolute; 30 | top: 1em; 31 | z-index: 99; 32 | right: 1em; 33 | cursor: pointer; 34 | .transition(0.1s,linear); 35 | opacity: .7; 36 | &:before{ 37 | content: '\00D7'; 38 | font-size: 1.5em; 39 | } 40 | &:hover{ 41 | opacity: 1; 42 | } 43 | } 44 | &.notification--reveal{ 45 | z-index: 99; 46 | pointer-events: initial; 47 | &[data-animation="from-bottom"]{ 48 | .animation(from-bottom,.3s,linear,0s,forwards); 49 | } 50 | &[data-animation="from-top"]{ 51 | .animation(from-top,.3s,linear,0s,forwards); 52 | } 53 | &[data-animation="from-left"]{ 54 | .animation(from-left,.3s,linear,0s,forwards); 55 | } 56 | &[data-animation="from-right"]{ 57 | .animation(from-right,.3s,linear,0s,forwards); 58 | } 59 | } 60 | &.notification--dismissed{ 61 | .animation(fade-out,.4s,linear,0s,forwards) !important; 62 | pointer-events: none; 63 | } 64 | } 65 | 66 | .bg--dark + .notification-close-cross{ 67 | &:before{ 68 | color: #fff; 69 | } 70 | } 71 | 72 | a[data-notification-link]{ 73 | text-decoration: none; 74 | &:hover{ 75 | text-decoration: none; 76 | } 77 | } 78 | 79 | @media all and (max-width: 767px){ 80 | .notification{ 81 | &[class*='col-']{ 82 | min-width: 0; 83 | } 84 | } 85 | } 86 | 87 | @keyframes from-bottom{ 88 | from{ .translate3d(0,100%,0); opacity: 0; } 89 | to{ .translate3d(0,0,0); opacity: 1; } 90 | } 91 | 92 | @-moz-keyframes from-bottom{ 93 | from{ .translate3d(0,100%,0); opacity: 0; } 94 | to{ .translate3d(0,0,0); opacity: 1; } 95 | } 96 | 97 | @-webkit-keyframes from-bottom{ 98 | from{ .translate3d(0,100%,0); opacity: 0; } 99 | to{ .translate3d(0,0,0); opacity: 1; } 100 | } 101 | 102 | @keyframes from-top{ 103 | from{ .translate3d(0,-100%,0); opacity: 0; } 104 | to{ .translate3d(0,0,0); opacity: 1; } 105 | } 106 | 107 | @-moz-keyframes from-top{ 108 | from{ .translate3d(0,-100%,0); opacity: 0; } 109 | to{ .translate3d(0,0,0); opacity: 1; } 110 | } 111 | 112 | @-webkit-keyframes from-top{ 113 | from{ .translate3d(0,-100%,0); opacity: 0; } 114 | to{ .translate3d(0,0,0); opacity: 1; } 115 | } 116 | 117 | @keyframes from-left{ 118 | from{ .translate3d(-100%,0,0); opacity: 0; } 119 | to{ .translate3d(0,0,0); opacity: 1; } 120 | } 121 | 122 | @-moz-keyframes from-left{ 123 | from{ .translate3d(-100%,0,0); opacity: 0; } 124 | to{ .translate3d(0,0,0); opacity: 1; } 125 | } 126 | 127 | @-webkit-keyframes from-left{ 128 | from{ .translate3d(-100%,0,0); opacity: 0; } 129 | to{ .translate3d(0,0,0); opacity: 1; } 130 | } 131 | 132 | @keyframes from-right{ 133 | from{ .translate3d(100%,0,0); opacity: 1; } 134 | to{ .translate3d(0,0,0); opacity: 1; } 135 | } 136 | 137 | @-moz-keyframes from-right{ 138 | from{ .translate3d(100%,0,0); opacity: 0; } 139 | to{ .translate3d(0,0,0); opacity: 1; } 140 | } 141 | 142 | @-webkit-keyframes from-right{ 143 | from{ .translate3d(100%,0,0); opacity: 0; } 144 | to{ .translate3d(0,0,0); opacity: 1; } 145 | } 146 | 147 | @keyframes fade-out{ 148 | 0%{ opacity: 1; } 149 | 100%{ opacity: 0;} 150 | } 151 | 152 | @-webkit-keyframes fade-out{ 153 | 0%{ opacity: 1; } 154 | 100%{ opacity: 0;} 155 | } 156 | 157 | @-moz-keyframes fade-out{ 158 | 0%{ opacity: 1; } 159 | 100%{ opacity: 0; } 160 | } 161 | 162 | -------------------------------------------------------------------------------- /less/framework_components/parallax.less: -------------------------------------------------------------------------------- 1 | .parallax > .background-image-holder, 2 | .parallax .slides li > .background-image-holder { 3 | height: 100%; 4 | min-height: 100vh; 5 | top: -50vh; 6 | transition: opacity 0.3s ease !important; 7 | -webkit-transition: opacity 0.3s ease !important; 8 | -webkit-transform-style: preserve-3d; 9 | } 10 | .parallax:first-child .slides li > .background-image-holder, 11 | .parallax:first-child .background-image-holder { 12 | top: 0; 13 | } 14 | .main-container > a:first-child + .parallax .background-image-holder { 15 | top: 0; 16 | } 17 | @media all and (max-width: 1024px) { 18 | .parallax > .background-image-holder, 19 | .parallax .slides li > .background-image-holder { 20 | -webkit-transition: transform 0.016s linear !important; 21 | transition: transform 0.016s linear !important; 22 | } 23 | .parallax.parallax-disable-mobile .background-image-holder, 24 | .parallax.parallax-disable-mobile .slides li > .background-image-holder{ 25 | top: 0 !important; 26 | transform: none !important; 27 | } 28 | } -------------------------------------------------------------------------------- /less/framework_components/position.less: -------------------------------------------------------------------------------- 1 | body{ 2 | overflow-x: hidden; 3 | } 4 | 5 | .pos-relative{ 6 | position: relative; 7 | } 8 | 9 | .pos-absolute{ 10 | position: absolute; 11 | &.container{ 12 | left: 0; 13 | right: 0; 14 | } 15 | } 16 | 17 | .pos-top{ 18 | top: 0; 19 | } 20 | 21 | .pos-bottom{ 22 | bottom: 0; 23 | } 24 | 25 | .pos-right{ 26 | right: 0; 27 | } 28 | 29 | .pos-left{ 30 | left: 0; 31 | } 32 | 33 | .float-left{ 34 | float: left; 35 | } 36 | 37 | .float-right{ 38 | float: right; 39 | } 40 | 41 | @media all and (max-width: 767px){ 42 | .float-left,.float-right{ 43 | float: none; 44 | } 45 | .float-left-xs{ 46 | float: left; 47 | } 48 | .float-right-xs{ 49 | float: right; 50 | } 51 | } 52 | 53 | .pos-vertical-center{ 54 | position: relative; 55 | top: 50%; 56 | transform: translateY(-50%); 57 | -webkit-transform: translateY(-50%); 58 | } 59 | 60 | @media all and (max-width: 767px){ 61 | .pos-vertical-center{ 62 | top: 0; 63 | transform: none; 64 | -webkit-transform: none; 65 | } 66 | } 67 | 68 | @media all and (max-height: 600px){ 69 | .pos-vertical-center{ 70 | top: 0; 71 | transform: none; 72 | -webkit-transform: none; 73 | } 74 | } 75 | 76 | .pos-vertical-align-columns{ 77 | display: table; 78 | table-layout: fixed; 79 | width: 100%; 80 | > div[class*='col-']{ 81 | display: table-cell; 82 | float: none; 83 | vertical-align: middle; 84 | } 85 | } 86 | 87 | @media all and (max-width: 990px){ 88 | .pos-vertical-align-columns{ 89 | display: block; 90 | width: auto; 91 | > div[class*='col-']{ 92 | display: block; 93 | } 94 | } 95 | } 96 | 97 | .inline-block{ 98 | display: inline-block; 99 | } 100 | 101 | .block{ 102 | display: block; 103 | } 104 | 105 | @media all and (max-width: 767px){ 106 | .block--xs{ 107 | display: block; 108 | } 109 | } 110 | 111 | @media all and (max-width: 990px){ 112 | .text-center-md{ 113 | text-align: center; 114 | } 115 | 116 | .text-left-md{ 117 | text-align: left; 118 | } 119 | 120 | .text-right-md{ 121 | text-align: right; 122 | } 123 | } 124 | 125 | @media all and (max-width: 767px){ 126 | .text-center-xs{ 127 | text-align: center; 128 | } 129 | 130 | .text-left-xs{ 131 | text-align: left; 132 | } 133 | 134 | .text-right-xs{ 135 | text-align: right; 136 | } 137 | } -------------------------------------------------------------------------------- /less/framework_components/progress-horizontal.less: -------------------------------------------------------------------------------- 1 | // MARKUP 2 | // 3 | // 6 | // 7 | // MODIFIERS: 8 | // .twitter-feed--slider - make each tweet a slide 9 | // [data-widget-id] - a uninque widget ID obtained from twitter 10 | 11 | .progress-horizontal{ 12 | .clearfix-after; 13 | .progress-horizontal__bar{ 14 | position: relative; 15 | overflow: hidden; 16 | } 17 | .progress-horizontal__progress{ 18 | position: absolute; 19 | top: 0; 20 | left: 0; 21 | height: 100%; 22 | } 23 | .progress-horizontal__label{ 24 | 25 | } 26 | } -------------------------------------------------------------------------------- /less/framework_components/radials.less: -------------------------------------------------------------------------------- 1 | .radial{ 2 | position: relative; 3 | .radial__label{ 4 | position: absolute; 5 | top: 50%; 6 | left: 50%; 7 | transform: translateX(-50%) translateY(-50%); 8 | -webkit-transform: translateX(-50%) translateY(-50%); 9 | margin-bottom: 0; 10 | } 11 | } -------------------------------------------------------------------------------- /less/framework_components/reset.less: -------------------------------------------------------------------------------- 1 | *,h1,h2,h3,h4,h5,h6,p,ul,a{ 2 | margin: 0; padding: 0; 3 | } -------------------------------------------------------------------------------- /less/framework_components/size.less: -------------------------------------------------------------------------------- 1 | .height-100,.height-90,.height-80,.height-70,.height-60,.height-50,.height-40,.height-30,.height-20,.height-10{ 2 | height: auto; 3 | padding: 5em 0; 4 | } 5 | 6 | @media all and (max-width: 767px){ 7 | .height-100,.height-90,.height-80,.height-70,.height-60,.height-50,.height-40,.height-30,.height-20,.height-10{ 8 | height: auto; 9 | padding: 4em 0; 10 | } 11 | } 12 | 13 | .heightClasses(@number) when (@number > 0){ 14 | .heightClasses((@number - 1)); 15 | @multiplier: @number*10; 16 | .height-@{multiplier}{ 17 | height: @number*10vh; 18 | } 19 | } 20 | 21 | @media all and (min-height: 600px) and (min-width: 767px){ 22 | .heightClasses(10); 23 | } 24 | 25 | section.height-auto{ 26 | height: auto; 27 | .pos-vertical-center{ 28 | top: 0; 29 | position: relative; 30 | transform: none; 31 | } 32 | } 33 | 34 | @media all and (max-width: 767px){ 35 | div[class*='col-'][class*='height-']{ 36 | padding-top: @standard-space-mobile !important; 37 | padding-bottom: @standard-space-mobile !important; 38 | } 39 | } -------------------------------------------------------------------------------- /less/framework_components/spacing.less: -------------------------------------------------------------------------------- 1 | section,footer{ 2 | padding-top: @standard-space-n; 3 | padding-bottom: @standard-space-s; 4 | &.space--xxs{ 5 | padding-top: @standard-space-n/4; 6 | padding-bottom: @standard-space-n/4; 7 | } 8 | &.space--xs{ 9 | padding-top: @standard-space-n/2; 10 | padding-bottom: @standard-space-n/2; 11 | } 12 | &.space--sm{ 13 | padding-top: @standard-space-n/1.5; 14 | padding-bottom: @standard-space-n/1.5; 15 | } 16 | &.space--md{ 17 | padding-top: @standard-space-n *1.5; 18 | padding-bottom: @standard-space-n *1.5; 19 | } 20 | &.space--lg{ 21 | padding-top: @standard-space-n * 2; 22 | padding-bottom: @standard-space-n * 2; 23 | } 24 | &.space--xlg{ 25 | padding-top: @standard-space-n * 4; 26 | padding-bottom: @standard-space-s * 4; 27 | } 28 | &.space--0{ 29 | padding: 0; 30 | } 31 | &.section--even{ 32 | padding-top: @standard-space-s; 33 | padding-bottom: @standard-space-s; 34 | } 35 | &.space-bottom--sm{ 36 | padding-bottom: @standard-space-n/1.5; 37 | } 38 | } 39 | 40 | 41 | @media all and (max-width: 767px){ 42 | section,footer,section.section--even{ 43 | padding: @standard-space-mobile 0; 44 | &.space--lg,&.space--md{ 45 | padding: @standard-space-mobile 0; 46 | } 47 | &.space--xlg{ 48 | padding: @standard-space-mobile * 1.5 0; 49 | } 50 | } 51 | 52 | } 53 | 54 | // Bootstrap nested columns 55 | 56 | div[class*='col-'] > div[class*='col-']:first-child{ 57 | padding-left: 0; 58 | } 59 | 60 | div[class*='col-'] > div[class*='col-']:last-child{ 61 | padding-right: 0; 62 | } 63 | 64 | // Bootstrap six col fix 65 | 66 | @media all and (max-width: 767px){ 67 | .col-xs-6:nth-child(odd){ 68 | padding-right: 7.5px; 69 | } 70 | .col-xs-6:nth-child(even){ 71 | padding-left: 7.5px; 72 | } 73 | } 74 | 75 | // Spacing Classes 76 | 77 | @media all and (min-width: 768px){ 78 | .mt--1{ 79 | margin-top: @base-line-height; 80 | } 81 | .mt--2{ 82 | margin-top: @base-line-height*2; 83 | } 84 | .mt--3{ 85 | margin-top: @base-line-height*3; 86 | } 87 | .mb--1{ 88 | margin-bottom: @base-line-height; 89 | } 90 | .mb--2{ 91 | margin-bottom: @base-line-height*2; 92 | } 93 | .mb--3{ 94 | margin-bottom: @base-line-height*3; 95 | } 96 | } 97 | 98 | @media all and (max-width: 990px){ 99 | .mt--1,.mt--2{ 100 | margin-top: @base-line-height; 101 | } 102 | .mt--3{ 103 | margin-top: @base-line-height*1.5; 104 | } 105 | } 106 | 107 | .unpad{ 108 | padding: 0; 109 | } 110 | 111 | .unpad--bottom{ 112 | padding-bottom: 0; 113 | } 114 | 115 | .unpad--top{ 116 | padding-top: 0; 117 | } 118 | 119 | section{ 120 | &.unpad--bottom{ 121 | padding-bottom: 0; 122 | } 123 | &.unpad{ 124 | padding: 0; 125 | } 126 | &.unpad--top{ 127 | padding-top: 0; 128 | } 129 | } 130 | 131 | .unmarg--bottom{ 132 | margin-bottom: 0; 133 | } 134 | 135 | .unmarg{ 136 | margin: 0; 137 | } 138 | 139 | .unmarg--top{ 140 | margin-top: 0; 141 | } 142 | -------------------------------------------------------------------------------- /less/framework_components/switchable.less: -------------------------------------------------------------------------------- 1 | // MARKUP: 2 | //
3 | //
4 | // ... 5 | //
6 | //
7 | // 8 | // MODIFIERS 9 | // .switchable--switch - reverses the direction of content in the section 10 | 11 | .switchable{ 12 | position: relative; 13 | div[class*='col-']:first-child{ 14 | float: left; 15 | &:not([class*='pull']):not([class*='push']){ 16 | left: 0; 17 | } 18 | right: auto; 19 | } 20 | div[class*='col-']:last-child{ 21 | float: right; 22 | &:not([class*='pull']):not([class*='push']){ 23 | right: 0; 24 | } 25 | left: auto; 26 | } 27 | &.switchable--switch{ 28 | div[class*='col-']:first-child{ 29 | float: right; 30 | right: 0; 31 | left: auto; 32 | &:not([class*='pull']):not([class*='push']){ 33 | left: auto; 34 | } 35 | } 36 | div[class*='col-']:last-child{ 37 | float: left; 38 | left: 0; 39 | right: auto; 40 | } 41 | } 42 | .switchable__text{ 43 | margin-top: @base-line-height * 2; 44 | } 45 | >div[class*='col-']{ 46 | padding: 0; 47 | } 48 | } -------------------------------------------------------------------------------- /less/framework_components/tabs.less: -------------------------------------------------------------------------------- 1 | // MARKUP: 2 | // 3 | //
    4 | //
  • 5 | //
    6 | // ... 7 | //
    8 | //
    9 | // ... 10 | //
    11 | //
    • 12 | //
13 | // 14 | // MODIFIERS: 15 | // .active - place this class on the tab you want initially to be open. 16 | // [data-content-align] - set to 'left' when you want the tabs aligned center but the content aligned left 17 | 18 | .tabs{ 19 | display: block; 20 | margin-bottom: 0; 21 | 22 | > li{ 23 | display: inline-block; 24 | opacity: .5; 25 | .transition(0.3s,ease); 26 | .disable-select; 27 | } 28 | > .active, &:hover{ 29 | opacity: 1; 30 | } 31 | .tab__title{ 32 | cursor: pointer; 33 | &:not(.btn){ 34 | padding: @tab-title-padding; 35 | } 36 | } 37 | li:first-child{ 38 | .tab__title{ 39 | &:not(.btn){ 40 | padding-left: 0; 41 | } 42 | } 43 | } 44 | .tab__content{ 45 | display: none; 46 | } 47 | } 48 | 49 | .tabs-content{ 50 | margin-top: 1em; 51 | li > .tab__content{ 52 | width: 100%; 53 | display: none; 54 | } 55 | > .active{ 56 | > .tab__content{ 57 | display: block; 58 | } 59 | } 60 | } 61 | 62 | .tabs-container{ 63 | &[data-content-align="left"]{ 64 | .tabs-content{ 65 | text-align: left; 66 | } 67 | } 68 | } 69 | 70 | @media all and (max-width: 767px){ 71 | .tabs-content{ 72 | > li:not(.active) .tab__content{ 73 | display: none !important; 74 | } 75 | } 76 | } -------------------------------------------------------------------------------- /less/framework_components/transitions.less: -------------------------------------------------------------------------------- 1 | // MARKUP: 2 | // 3 | //
...
4 | // 5 | // 6 | // MODIFIERS: 7 | // --fade - will fade the transition element in with opacity 8 | // --scale - will make the element grow to full size on load 9 | // --slide - will bring the content in from the right-side on load 10 | 11 | [class*='transition--']{ 12 | .transition(0.3s,ease); 13 | opacity: 0; 14 | &.transition--active{ 15 | opacity: 1; 16 | } 17 | } 18 | 19 | .transition--scale{ 20 | .scale(.98); 21 | &.transition--active{ 22 | opacity: 1; 23 | .scale(1); 24 | } 25 | } 26 | 27 | .transition--slide{ 28 | .translate3d(200px,0,0); 29 | .translate3d(30vw,0,0); 30 | &.transition--active{ 31 | .translate3d(0,0,0); 32 | } 33 | } -------------------------------------------------------------------------------- /less/framework_components/twitter.less: -------------------------------------------------------------------------------- 1 | // MARKUP 2 | // 3 | // 6 | // 7 | // MODIFIERS: 8 | // .twitter-feed--slider - make each tweet a slide 9 | // [data-widget-id] - a uninque widget ID obtained from twitter 10 | 11 | .twitter-feed{ 12 | .user{ 13 | display: none; 14 | } 15 | .interact{ 16 | display: none; 17 | } 18 | .timePosted{ 19 | font-size: .87em; 20 | } 21 | } -------------------------------------------------------------------------------- /less/framework_components/typed-effect.less: -------------------------------------------------------------------------------- 1 | .typed-text{ 2 | display: inline-block; 3 | &.typed-text--cursor{ 4 | &:after{ 5 | content: '|'; 6 | font-size: 1.2em; 7 | -webkit-animation: blink 0.7s infinite; 8 | animation: blink 0.7s infinite; 9 | position: relative; 10 | right: 6px; 11 | } 12 | } 13 | } 14 | 15 | @keyframes blink{ 16 | 0% { opacity:1; } 17 | 50% { opacity:0; } 18 | 100% { opacity:1; } 19 | } 20 | @-webkit-keyframes blink{ 21 | 0% { opacity:1; } 22 | 50% { opacity:0; } 23 | 100% { opacity:1; } 24 | } -------------------------------------------------------------------------------- /less/framework_components/typography.less: -------------------------------------------------------------------------------- 1 | html{ 2 | font-size: @base-font-size; 3 | } 4 | @media all and (max-width: 768px){ 5 | html{ 6 | font-size: @base-font-size-mobile; 7 | } 8 | } 9 | body { 10 | font-size: 1em; 11 | line-height: @base-line-height; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | font-family: @body-font, 'Helvetica', 'Arial', sans-serif; 15 | color: @color-body; 16 | font-weight: @body-font-weight; 17 | } 18 | h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{ 19 | font-family: @heading-font, 'Helvetica', 'Arial', sans-serif; 20 | color: @color-heading; 21 | font-weight: @heading-weight; 22 | &when (@heading-uppercase = true){ 23 | text-transform: uppercase; 24 | } 25 | &when(@ligatures-active = true){ 26 | font-variant-ligatures: common-ligatures; 27 | } 28 | margin-top: 0; 29 | margin-bottom: 0; 30 | } 31 | 32 | h1,.h1 { 33 | font-size: @h1-size; 34 | line-height: @h1-line-height; 35 | } 36 | 37 | h2,.h2 { 38 | font-size: @h2-size; 39 | line-height: @h2-line-height; 40 | } 41 | h3,.h3 { 42 | font-size: @h3-size; 43 | line-height: @h3-line-height; 44 | } 45 | h4,.h4 { 46 | font-size: @h4-size; 47 | line-height: @h4-line-height; 48 | } 49 | h5,.h5 { 50 | font-size: @h5-size; 51 | line-height: @h5-line-height; 52 | } 53 | h6,.h6 { 54 | font-size: @h6-size; 55 | line-height: @h6-line-height; 56 | } 57 | .lead{ 58 | font-size: @p-lead-size; 59 | line-height: @p-lead-line-height; 60 | } 61 | 62 | @media all and (max-width: 767px){ 63 | h1,.h1{ 64 | font-size: @h2-size; 65 | line-height: @h2-line-height; 66 | } 67 | 68 | h2,.h2{ 69 | font-size: @h3-size; 70 | line-height: @h3-line-height; 71 | } 72 | h3,.h3{ 73 | font-size: @h4-size; 74 | line-height: @h5-line-height; 75 | } 76 | .lead{ 77 | font-size: @h4-size; 78 | line-height: @h4-line-height; 79 | } 80 | } 81 | 82 | p, ul, ol, pre, table, blockquote { 83 | margin-bottom: @base-line-height; 84 | } 85 | ul,ol{ 86 | list-style: none; 87 | line-height: @ul-line-height; 88 | } 89 | ul.bullets{ 90 | list-style: inside; 91 | } 92 | ol{ 93 | list-style-type: upper-roman; 94 | list-style-position: inside; 95 | } 96 | 97 | blockquote{ 98 | font-size: @blockquote-size; 99 | line-height: @blockquote-line-height; 100 | padding: 0; 101 | margin: 0; 102 | border-left: 0; 103 | } 104 | 105 | strong{ 106 | font-weight: @strong-font-weight; 107 | } 108 | 109 | hr{ 110 | margin: @base-line-height 0; 111 | border-color: @color-bg-secondary; 112 | } 113 | a:hover,a:focus,a:active{ 114 | text-decoration: none; 115 | outline: none; 116 | } 117 | 118 | /*! Typography -- Helpers */ 119 | 120 | .type--fade{ 121 | opacity: .5; 122 | } 123 | 124 | .type--uppercase{ 125 | text-transform: uppercase; 126 | } 127 | .type--bold{ 128 | font-weight: bold; 129 | } 130 | .type--italic{ 131 | font-style: italic; 132 | } 133 | 134 | .type--fine-print{ 135 | font-size: @fine-print-size; 136 | } 137 | 138 | .type--strikethrough{ 139 | text-decoration: line-through; 140 | opacity: .5; 141 | } 142 | 143 | .type--underline{ 144 | text-decoration: underline; 145 | } 146 | 147 | .type--body-font{ 148 | font-family: @body-font, 'Helvetica'; 149 | } 150 | -------------------------------------------------------------------------------- /less/framework_components/wizard.less: -------------------------------------------------------------------------------- 1 | // MARKUP FOR WIZARD 2 | // 3 | //
    4 | //
  1. 5 | // ... 6 | //
    2. 7 | //
8 | // 9 | // 10 | 11 | 12 | .wizard__body{ 13 | list-style: none; 14 | } 15 | 16 | .wizard__step{ 17 | &:not(.active){ 18 | display: none; 19 | } 20 | .wizard__title{ 21 | display: none; 22 | } 23 | } 24 | 25 | .wizard__controls{ 26 | .clearfix; 27 | .wizard-prev{ 28 | float: left; 29 | } 30 | .wizard-next{ 31 | float: right; 32 | } 33 | .wizard-prev:hover, .wizard-next:hover{ 34 | transform: none !important; 35 | } 36 | .wizard-prev, .wizard-next{ 37 | &.inactive{ 38 | pointer-events: none; 39 | opacity: .3; 40 | cursor: not-allowed; 41 | } 42 | } 43 | } -------------------------------------------------------------------------------- /less/theme-overrides.less: -------------------------------------------------------------------------------- 1 | // Core Elements (DO NOT REMOVE) 2 | 3 | @import "theme_components/customizers.less"; 4 | 5 | @import "theme_components/helpers.less"; 6 | 7 | @import "theme_components/animations.less"; 8 | 9 | @import "theme_components/sections.less"; 10 | 11 | @import "theme_components/typography.less"; 12 | 13 | @import "theme_components/colors.less"; 14 | 15 | @import "theme_components/links.less"; 16 | 17 | @import "theme_components/tables.less"; 18 | 19 | @import "theme_components/lists.less"; 20 | 21 | @import "theme_components/rules.less"; 22 | 23 | @import "theme_components/buttons.less"; 24 | 25 | @import "theme_components/images.less"; 26 | 27 | @import "theme_components/titles.less"; 28 | 29 | @import "theme_components/labels.less"; 30 | 31 | @import "theme_components/bars.less"; 32 | 33 | @import "theme_components/utilities.less"; 34 | 35 | // Modules (REMOVABLE) 36 | 37 | @import "theme_components/alerts.less"; 38 | 39 | @import "theme_components/navigation-menu-toggle.less"; 40 | 41 | @import "theme_components/navigation-utility.less"; 42 | 43 | @import "theme_components/navigation-stacked.less"; 44 | 45 | @import "theme_components/navigation-sidebar.less"; 46 | 47 | @import "theme_components/navigation-sidebar-column.less"; 48 | 49 | @import "theme_components/navigation-fullscreen.less"; 50 | 51 | @import "theme_components/dropdowns.less"; 52 | 53 | @import "theme_components/twitter.less"; 54 | 55 | @import "theme_components/instagram.less"; 56 | 57 | @import "theme_components/cards.less"; 58 | 59 | @import "theme_components/checkmarks.less"; 60 | 61 | @import "theme_components/icons.less"; 62 | 63 | @import "theme_components/tooltips.less"; 64 | 65 | @import "theme_components/boxes.less"; 66 | 67 | @import "theme_components/features-small.less"; 68 | 69 | @import "theme_components/features-large.less"; 70 | 71 | @import "theme_components/accordions.less"; 72 | 73 | @import "theme_components/tabs.less"; 74 | 75 | @import "theme_components/switchable.less"; 76 | 77 | @import "theme_components/cta.less"; 78 | 79 | @import "theme_components/videos.less"; 80 | 81 | @import "theme_components/modals.less"; 82 | 83 | @import "theme_components/notifications.less"; 84 | 85 | @import "theme_components/loader.less"; 86 | 87 | @import "theme_components/lightbox.less"; 88 | 89 | @import "theme_components/covers.less"; 90 | 91 | @import "theme_components/processes.less"; 92 | 93 | @import "theme_components/typed-text.less"; 94 | 95 | @import "theme_components/forms.less"; 96 | 97 | @import "theme_components/sliders.less"; 98 | 99 | @import "theme_components/radials.less"; 100 | 101 | @import "theme_components/pricing.less"; 102 | 103 | @import "theme_components/progress-horizontal.less"; 104 | 105 | @import "theme_components/maps.less"; 106 | 107 | @import "theme_components/testimonials.less"; 108 | 109 | @import "theme_components/masonry.less"; 110 | 111 | @import "theme_components/blog.less"; 112 | 113 | @import "theme_components/portfolio.less"; 114 | 115 | @import "theme_components/shop.less"; 116 | 117 | @import "theme_components/wizard.less"; 118 | 119 | @import "theme_components/footers.less"; -------------------------------------------------------------------------------- /less/theme-variables.less: -------------------------------------------------------------------------------- 1 | //////// Logo Width 2 | 3 | @logo-max-height: @base-line-height; // default @base-line-height, change to a pixel value (eg: 50px) for fine control 4 | 5 | //////// Colours 6 | 7 | @color-bg-site: #FFFFFF; 8 | @color-primary: #4A90E2; 9 | @color-primary-1: #31639C; 10 | @color-primary-2: #465773; 11 | @color-primary-3: #4A90E2; 12 | @color-dark: #252525; 13 | @color-bg-secondary: #FAFAFA; 14 | @color-on-dark: #FFFFFF; 15 | 16 | @has-primary-1: true; 17 | @has-primary-2: true; 18 | 19 | @color-error: #E23636; 20 | @color-success: #4EBF56; 21 | 22 | //////// Typography 23 | 24 | @base-font-size: percentage(14/16); // change first value to pixel font size 25 | @base-font-size-px: 14px; // the first value from above; 26 | @base-font-size-mobile: percentage(13/16); // change first value to pixel font size 27 | @base-font-size-mobile-px: 13px; // the first value from above; 28 | 29 | @base-line-height: 1.85714285714286em; 30 | 31 | @body-font: 'Open Sans'; 32 | @heading-font: 'Open Sans'; 33 | @button-font: 'Open Sans'; 34 | @nav-item-font: 'Open Sans'; 35 | 36 | @h1-size: 3.14285714285714em; 37 | @h2-size: 2.35714285714286em; 38 | @h3-size: 1.78571428571429em; 39 | @h4-size: 1.35714285714286em; 40 | @h5-size: 1em; 41 | @h6-size: 0.85714285714286em; 42 | 43 | @ligatures-active: true; 44 | 45 | @h1-line-height: 1.31818181818182em; 46 | @h2-line-height: 1.36363636363636em; 47 | @h3-line-height: 1.5em; 48 | @h4-line-height: 1.368421052631579em; 49 | @h5-line-height: @base-line-height; 50 | @h6-line-height: 2.16666666666667em; 51 | 52 | @p-lead-size: 1.35714285714286em; 53 | @p-lead-line-height: 1.68421052631579em; 54 | 55 | @blockquote-size: @h3-size; 56 | @blockquote-line-height: @h3-line-height; 57 | 58 | @fine-print-size: 0.85714285714286em; 59 | 60 | @ul-line-height: @base-line-height; 61 | 62 | @color-body: #666666; 63 | @color-heading: @color-dark; 64 | 65 | @heading-uppercase: false; 66 | @heading-weight: 300; 67 | 68 | @body-font-weight: 400; 69 | @strong-font-weight: 600; 70 | 71 | //////// Standard Space 72 | 73 | @standard-space-n: 4 * @base-line-height; 74 | @standard-space-s: 4 * @base-line-height; 75 | @standard-space-mobile: 3 * @base-line-height; 76 | 77 | //////// Boxed Layouts 78 | 79 | @boxed-layout-width: 1280px; 80 | 81 | //////// Buttons 82 | 83 | @buttons-uppercase: false; 84 | 85 | @button-radius: 6px; 86 | @button-padding-n: @base-line-height / 4; 87 | @button-padding-s: @base-line-height / 4; 88 | @button-padding-e: @base-line-height *1.5; 89 | @button-padding-w: @base-line-height *1.5; 90 | @border-width: 1px; 91 | @button-text-size: @h6-size; 92 | @button-font-weight: 700; 93 | @button-spacing: @base-line-height; 94 | 95 | //////// Icon 96 | 97 | @icon-sm-size: @h2-size; 98 | @icon-md-size: @h1-size; 99 | @icon-lg-size: 5.57142857142857em; 100 | 101 | //////// Forms 102 | 103 | @input-label-font-size: 1.14285714285714em; 104 | @input-label-font-weight: 400; 105 | 106 | @inputs-have-border: true; 107 | 108 | @input-padding: @base-line-height/4; 109 | @input-border-radius: 6px; 110 | @input-border: 1px solid #ECECEC; 111 | @input-background-color: #FCFCFC; 112 | @input-placeholder-color: lighten(@color-body, 30%); 113 | @input-placeholder-size: 1.14285714285714em; 114 | 115 | @checkbox-height: @base-line-height; 116 | @checkbox-width: @base-line-height; 117 | @checkbox-border-radius: 6px; 118 | @checkbox-padding: 0; 119 | 120 | @radio-height: @base-line-height; 121 | @radio-width: @base-line-height; 122 | @radio-border-radius: 50%; 123 | @radio-padding: 0; 124 | 125 | //////// Accordions 126 | 127 | @accordion-title-padding: @base-line-height/4 @base-line-height/2; 128 | @accordion-title-border: 1px solid #ECECEC; 129 | @accordion-title-bg: none; 130 | @accordion-title-bg-active: @color-primary; 131 | 132 | @accordion-content-padding: 0; 133 | 134 | //////// Breadcrumbs 135 | 136 | @breadcrumbs-uppercase: false; 137 | @breadcrumb-item-padding: @base-line-height/4; // space between breadcrumbs 138 | @breadcrumb-font-size: 1em; 139 | 140 | //////// Tabs 141 | 142 | @tab-title-padding: 0 @base-line-height; // space between tabs 143 | 144 | //////// Boxes 145 | 146 | @box-padding: @base-line-height; 147 | @box-border: 1px solid #ECECEC; 148 | @box-shadow-level: 1; // value from 1 - 5, shallow - deep 149 | 150 | //////// Image Grid Settings 151 | 152 | @default-gap-padding: @base-line-height/4; 153 | 154 | //////// Sliders 155 | 156 | @slider-paging-alignment: center; 157 | 158 | @slider-paging-height: 8px; 159 | @slider-paging-width: 8px; 160 | @slider-paging-radius: 50%; 161 | @slider-paging-bg: @color-dark; 162 | @slider-paging-bg-active: #fff; 163 | @slider-paging-border: none; 164 | @slider-paging-spacing: @base-line-height/4; // space between each paging button 165 | 166 | @slider-arrow-font: 'stack-interface'; 167 | @slider-arrow-right: "\e80c"; 168 | @slider-arrow-left: "\e80b"; 169 | @slider-arrow-size: 1em; 170 | 171 | //////// Video Styling 172 | 173 | @play-icon-default-color: #fff; 174 | @play-icon-filled: true; 175 | @play-icon-width-height: @base-line-height*4; 176 | @play-icon-border: 2px solid @play-icon-default-color; 177 | @play-icon-triangle: 6px; 178 | 179 | //////// Modals 180 | 181 | @default-modal-padding: 0; 182 | 183 | //////// Notifications 184 | 185 | @default-notification-padding: 0; 186 | -------------------------------------------------------------------------------- /less/theme.less: -------------------------------------------------------------------------------- 1 | @import "framework_components/variables.less"; 2 | @import "theme-variables.less"; 3 | @import "framework_components/mixins.less"; 4 | /**!**************/ 5 | /**! Contents **/ 6 | /**! 01. Reset **/ 7 | /**! 02. Typography **/ 8 | /**! 03. Position **/ 9 | /**! 04. Element Size **/ 10 | /**! 05. Images **/ 11 | /**! 06. Buttons **/ 12 | /**! 07. Icons **/ 13 | /**! 08. Lists **/ 14 | /**! 09. Lightbox **/ 15 | /**! 10. Menus **/ 16 | /**! 11. Dropdowns **/ 17 | /**! 12. Form Elements **/ 18 | /**! 13. Accordions **/ 19 | /**! 14. Breadcrumbs **/ 20 | /**! 15. Radials **/ 21 | /**! 16. Tabs **/ 22 | /**! 17. Boxes **/ 23 | /**! 18. Sliders Flickity **/ 24 | /**! 19. Hover Elements **/ 25 | /**! 20. Masonry **/ 26 | /**! 21. Modals **/ 27 | /**! 22. Maps **/ 28 | /**! 23. Parallax **/ 29 | /**! 24. Notifications **/ 30 | /**! 25. Video **/ 31 | /**! 26. Colors **/ 32 | /**! 27. Image Blocks **/ 33 | /**! 28. MailChimp & Campaign Monitor **/ 34 | /**! 29. Twitter **/ 35 | /**! 30. Transitions **/ 36 | /**! 31. Switchable Sections **/ 37 | /**! 32. Typed Effect **/ 38 | /**! 33. Gradient BG **/ 39 | /**! 34. Bars **/ 40 | /**! 35. Navigation In Page **/ 41 | /**! 36. Helper Classes **/ 42 | /**! 37. Spacing **/ 43 | /**! 38. Boxed Layout **/ 44 | /**! 39. Wizard **/ 45 | /**! 40. Alerts **/ 46 | /**! 41. Progress - Horizontal **/ 47 | /**! 42. Theme Overrides **/ 48 | /**!**************/ 49 | /**!**************/ 50 | /**!**************/ 51 | 52 | /**! 01. Reset **/ 53 | @import "framework_components/reset.less"; 54 | 55 | /**! 02. Typography **/ 56 | @import "framework_components/typography.less"; 57 | 58 | /**! 03. Position **/ 59 | @import "framework_components/position.less"; 60 | 61 | /**! 04. Element Size **/ 62 | @import "framework_components/size.less"; 63 | 64 | /**! 05. Images **/ 65 | @import "framework_components/images.less"; 66 | 67 | /**! 06. Buttons **/ 68 | @import "framework_components/buttons.less"; 69 | 70 | /**! 07. Icons **/ 71 | @import "framework_components/icons.less"; 72 | 73 | /**! 08. Lists **/ 74 | @import "framework_components/lists.less"; 75 | 76 | /**! 09. Lightbox **/ 77 | @import "framework_components/lightbox-images.less"; 78 | 79 | /**! 10. Menus **/ 80 | @import "framework_components/menus.less"; 81 | 82 | /**! 11. Dropdowns **/ 83 | @import "framework_components/dropdowns.less"; 84 | 85 | /**! 12. Form Elements **/ 86 | @import "framework_components/forms-v2.less"; 87 | 88 | /**! 13. Accordions **/ 89 | @import "framework_components/accordions.less"; 90 | 91 | /**! 14. Breadcrumbs **/ 92 | @import "framework_components/breadcrumbs.less"; 93 | 94 | /**! 15. Pie Charts **/ 95 | @import "framework_components/radials.less"; 96 | 97 | /**! 16. Tabs **/ 98 | @import "framework_components/tabs.less"; 99 | 100 | /**! 17. Boxes **/ 101 | @import "framework_components/boxes.less"; 102 | 103 | /**! 18. Sliders Flickity **/ 104 | @import "framework_components/flickity.less"; 105 | 106 | /**! 19. Hover Elements **/ 107 | @import "framework_components/hover-elements.less"; 108 | 109 | /**! 20. Masonry **/ 110 | @import "framework_components/masonry.less"; 111 | 112 | /**! 21. Modals **/ 113 | @import "framework_components/modals.less"; 114 | 115 | /**! 22. Maps **/ 116 | @import "framework_components/maps.less"; 117 | 118 | /**! 23. Parallax **/ 119 | @import "framework_components/parallax.less"; 120 | 121 | /**! 24. Notifications **/ 122 | @import "framework_components/notifications.less"; 123 | 124 | /**! 25. Video **/ 125 | @import "framework_components/video.less"; 126 | 127 | /**! 26. Colors **/ 128 | @import "framework_components/colors.less"; 129 | 130 | /**! 27. Image Blocks **/ 131 | @import "framework_components/image-blocks.less"; 132 | 133 | /**! 28. MailChimp & Campaign Monitor **/ 134 | @import "framework_components/newsletter-providers.less"; 135 | 136 | /**! 29. Twitter **/ 137 | @import "framework_components/twitter.less"; 138 | 139 | /**! 30. Transitions **/ 140 | @import "framework_components/transitions.less"; 141 | 142 | /**! 31. Switchable Sections **/ 143 | @import "framework_components/switchable.less"; 144 | 145 | /**! 32. Typed Effect **/ 146 | @import "framework_components/typed-effect.less"; 147 | 148 | /**! 33. Gradient BG **/ 149 | @import "framework_components/granim.less"; 150 | 151 | /**! 34. Bars **/ 152 | @import "framework_components/bars.less"; 153 | 154 | /**! 35. Navigation InPage **/ 155 | @import "framework_components/navigation-inpage.less"; 156 | 157 | /**! 36. Helper Classes **/ 158 | @import "framework_components/helpers.less"; 159 | 160 | /**! 37. Spacing **/ 161 | @import "framework_components/spacing.less"; 162 | 163 | /**! 38. Boxed Layout **/ 164 | @import "framework_components/boxed-layout.less"; 165 | 166 | /**! 39. Wizard **/ 167 | @import "framework_components/wizard.less"; 168 | 169 | /**! 40. Alerts **/ 170 | 171 | @import "framework_components/alerts.less"; 172 | 173 | /**! 41. Progress - Horizontal **/ 174 | 175 | @import "framework_components/progress-horizontal.less"; 176 | 177 | /**! 42. Theme Overrides **/ 178 | 179 | @import "theme-overrides.less"; -------------------------------------------------------------------------------- /less/theme_components/accordions.less: -------------------------------------------------------------------------------- 1 | /*! -- Stack Accordions -- */ 2 | 3 | .accordion{ 4 | .accordion__title{ 5 | .transition(0.5s,ease); 6 | opacity: .5; 7 | margin-bottom: @base-line-height/2; 8 | &:hover{ 9 | opacity: 1; 10 | } 11 | &:before{ 12 | font-family: "stack-interface"; 13 | content: '\e80d'; 14 | margin-right: 6px; 15 | color: @color-dark; 16 | } 17 | span{ 18 | display: inline-block; 19 | } 20 | } 21 | li{ 22 | &.active{ 23 | margin-bottom: @base-line-height/2; 24 | .accordion__title{ 25 | opacity: 1; 26 | &:before{ 27 | content: '\e80a'; 28 | } 29 | } 30 | .accordion__content{ 31 | animation: fadeUp .5s ease forwards; 32 | -webkit-animation: fadeUp .5s ease forwards; 33 | } 34 | } 35 | } 36 | } 37 | 38 | .accordion-1{ 39 | li{ 40 | &.active{ 41 | .accordion__title{ 42 | span{ 43 | color: #fff; 44 | } 45 | &:before{ 46 | color: #fff; 47 | } 48 | border-color: @color-primary; 49 | } 50 | } 51 | .accordion__title{ 52 | border-radius: 6px; 53 | border-bottom: 1px solid #ECECEC; 54 | } 55 | } 56 | } 57 | 58 | .accordion-2{ 59 | li{ 60 | .accordion__title{ 61 | border-left: none; 62 | border-right: none; 63 | border-top: none; 64 | border-bottom: 1px solid #ECECEC; 65 | padding-left: 0; 66 | } 67 | &.active{ 68 | .accordion__title{ 69 | background: none; 70 | border-bottom: 1px solid rgba(0,0,0,0); 71 | } 72 | } 73 | } 74 | } 75 | 76 | .bg--dark,.imagebg:not(.image--light), .bg--primary{ 77 | .accordion-2, .accordion-1{ 78 | li{ 79 | .accordion__title{ 80 | &:before{ 81 | color: #fff; 82 | } 83 | border-color: lighten(@color-dark, 15%) 84 | } 85 | } 86 | } 87 | } 88 | 89 | .imagebg:not(.image--light), .bg--primary{ 90 | .accordion{ 91 | li{ 92 | .accordion__title{ 93 | border-color: rgba(255,255,255,.3); 94 | } 95 | } 96 | } 97 | } -------------------------------------------------------------------------------- /less/theme_components/alerts.less: -------------------------------------------------------------------------------- 1 | /*! -- Stack Alerts -- */ 2 | 3 | .alert{ 4 | border-radius: 6px; 5 | &:not(:last-child){ 6 | margin-bottom: @base-line-height; 7 | } 8 | .alert__close{ 9 | font-size: @h4-size; 10 | } 11 | } -------------------------------------------------------------------------------- /less/theme_components/animations.less: -------------------------------------------------------------------------------- 1 | /*! -- Stack Animations -- */ 2 | 3 | @keyframes fadeInUp{ 4 | from{ opacity: 0; .translate3d(0,50px,0); } 5 | to{ opacity: 1; .translate3d(0,0,0); -webkit-font-smoothing: antialiased; } 6 | } 7 | 8 | @-webkit-keyframes fadeInUp{ 9 | from{ opacity: 0; .translate3d(0,50px,0); } 10 | to{ opacity: 1; .translate3d(0,0,0); -webkit-font-smoothing: antialiased; } 11 | } 12 | 13 | @keyframes fadeInDown{ 14 | from{ opacity: 0; .translate3d(0,-100px,0); } 15 | to{ opacity: 1; .translate3d(0,0,0); -webkit-font-smoothing: antialiased; } 16 | } 17 | 18 | @-webkit-keyframes fadeInDown{ 19 | from{ opacity: 0; .translate3d(0,-100px,0); } 20 | to{ opacity: 1; .translate3d(0,0,0); -webkit-font-smoothing: antialiased; } 21 | } 22 | 23 | @keyframes fadeOutUp{ 24 | from{ opacity: 1; .translate3d(0,0,0); } 25 | to{ opacity: 0; .translate3d(0,-50px,0); -webkit-font-smoothing: antialiased; } 26 | } 27 | 28 | @-webkit-keyframes fadeOutUp{ 29 | from{ opacity: 1; .translate3d(0,0,0); } 30 | to{ opacity: 0; .translate3d(0,-50px,0); -webkit-font-smoothing: antialiased; } 31 | } 32 | 33 | @keyframes fadeOutRight{ 34 | from{ opacity: 1; .translate3d(0,0,0); } 35 | to{ opacity: 0; .translate3d(50px,0,0); -webkit-font-smoothing: antialiased; } 36 | } 37 | 38 | @-webkit-keyframes fadeOutRight{ 39 | from{ opacity: 1; .translate3d(0,0,0); } 40 | to{ opacity: 0; .translate3d(50px,0,0); -webkit-font-smoothing: antialiased; } 41 | } 42 | 43 | @keyframes fadeInLeft{ 44 | from{ opacity: 0; .translate3d(-50px,0,0); } 45 | to{ opacity: 1; .translate3d(0,0,0); -webkit-font-smoothing: antialiased; } 46 | } 47 | 48 | @-webkit-keyframes fadeInLeft{ 49 | from{ opacity: 0; .translate3d(-50px,0,0); } 50 | to{ opacity: 1; .translate3d(0,0,0); -webkit-font-smoothing: antialiased; } 51 | } 52 | 53 | @keyframes pulse{ 54 | 0%{ opacity: 0; .scale(1); } 55 | 50%{ opacity: 1; } 56 | 100%{ opacity: 0; .scale(2); } 57 | } 58 | 59 | @-webkit-keyframes pulse{ 60 | 0%{ opacity: 0; .scale(1); } 61 | 50%{ opacity: 1; } 62 | 100%{ opacity: 0; .scale(2); } 63 | } 64 | 65 | @keyframes kenBurns{ 66 | 0%{ transform: scale(1); } 67 | 100%{ transform: scale(1.1); } 68 | } 69 | 70 | @-webkit-keyframes kenBurns{ 71 | 0%{ transform: scale(1); } 72 | 100%{ transform: scale(1.1); } 73 | } -------------------------------------------------------------------------------- /less/theme_components/bars.less: -------------------------------------------------------------------------------- 1 | /*! -- Stack Bars -- */ 2 | 3 | .menu-horizontal > li, .menu-vertical > li{ 4 | font-family: @nav-item-font, 'Roboto', 'Helvetica', Sans-Serif; 5 | } 6 | 7 | .bar{ 8 | .logo{ 9 | max-height: @logo-max-height; 10 | max-width: none; 11 | } 12 | } 13 | 14 | .menu-horizontal{ 15 | > li{ 16 | > a, > .modal-instance > a{ 17 | font-weight: 500; 18 | } 19 | a{ 20 | &:hover{ 21 | text-decoration: none; 22 | } 23 | } 24 | } 25 | } 26 | 27 | .hamburger-toggle{ 28 | i{ 29 | color: @color-dark; 30 | } 31 | } 32 | 33 | // Desktop 34 | @media all and (min-width: 990px){ 35 | .menu-horizontal{ 36 | li{ 37 | &:not(:last-child){ 38 | margin-right: @base-line-height/1.5; 39 | } 40 | } 41 | } 42 | .bar__module{ 43 | &:not(:only-child){ 44 | .menu-horizontal{ 45 | top: 0; 46 | } 47 | } 48 | } 49 | } 50 | 51 | @media all and (min-width: 768px) and (max-width: 1023px){ 52 | .bar-2, .bar-1{ 53 | .menu-horizontal{ 54 | > li{ 55 | display: inline-block; 56 | &:not(:first-child){ 57 | margin-left: @base-line-height/2; 58 | } 59 | } 60 | } 61 | .bar__module{ 62 | margin-bottom: @base-line-height; 63 | } 64 | .row{ 65 | div[class*='col-']{ 66 | &:last-child{ 67 | .bar__module{ 68 | &:last-child{ 69 | margin-bottom: 0; 70 | } 71 | } 72 | } 73 | } 74 | } 75 | } 76 | } 77 | 78 | .bar-1{ 79 | .menu-horizontal{ 80 | > li{ 81 | > .dropdown__trigger, > a{ 82 | font-size: 0.857142857142857em; 83 | line-height: 2.166666666666667em; 84 | text-transform: uppercase; 85 | font-weight: 600; 86 | letter-spacing: .5px; 87 | } 88 | } 89 | } 90 | } 91 | 92 | // Desktop 93 | @media all and (min-width: 1024px){ 94 | .bar-1{ 95 | .bar__module{ 96 | +.bar__module{ 97 | margin-left: @base-line-height; 98 | } 99 | } 100 | } 101 | } 102 | 103 | @media all and (min-width: 991px){ 104 | .bar-2{ 105 | .logo{ 106 | position: absolute; 107 | left: 50%; 108 | transform: translateX(-50%); 109 | } 110 | } 111 | } 112 | 113 | .bar-3{ 114 | font-size: @fine-print-size; 115 | .menu-horizontal{ 116 | top: 0; 117 | } 118 | } 119 | 120 | @media all and (max-width: 990px){ 121 | .bar-3{ 122 | .menu-horizontal{ 123 | li{ 124 | display: inline-block; 125 | &:not(:last-child){ 126 | margin-right: @base-line-height/2; 127 | } 128 | } 129 | } 130 | } 131 | } 132 | 133 | // Desktop 134 | @media all and (min-width: 990px){ 135 | .bar-toggle{ 136 | .col-md-1{ 137 | .logo{ 138 | top: 10px; 139 | } 140 | } 141 | } 142 | } 143 | 144 | @media all and (max-width: 767px){ 145 | .bar-4{ 146 | .logo-light{ 147 | display: none; 148 | } 149 | .logo-dark{ 150 | margin-bottom: @base-line-height; 151 | } 152 | } 153 | .bar.bg--dark{ 154 | background: @color-dark; 155 | .hamburger-toggle i{ 156 | color: #fff; 157 | } 158 | } 159 | } -------------------------------------------------------------------------------- /less/theme_components/boxes.less: -------------------------------------------------------------------------------- 1 | /*! -- Stack Boxes -- */ 2 | 3 | .boxed{ 4 | border-radius: 6px; 5 | .background-image-holder{ 6 | border-radius: 6px; 7 | } 8 | &:before{ 9 | border-radius: 6px; 10 | } 11 | &:not(:last-child){ 12 | margin-bottom: 30px; 13 | } 14 | &:not([class*='bg-']){ 15 | background: @color-bg-site; 16 | } 17 | &.bg--secondary{ 18 | .boxed{ 19 | background: @color-bg-secondary; 20 | } 21 | } 22 | } 23 | 24 | @media all and (min-width: 768px){ 25 | .switchable{ 26 | .imagebg{ 27 | .boxed{ 28 | padding-left: @base-line-height*3; 29 | } 30 | } 31 | } 32 | } 33 | 34 | .bg--dark,.imagebg:not(.image--light){ 35 | .boxed:not([class*='bg-']){ 36 | background: none; 37 | color: #fff; 38 | &.boxed--border{ 39 | border-color: lighten(@color-dark, 10%); 40 | } 41 | } 42 | .boxed{ 43 | &[class*='bg-']{ 44 | &.boxed--border{ 45 | border: none; 46 | } 47 | } 48 | } 49 | } 50 | 51 | .imagebg{ 52 | &:not(.image--light){ 53 | .boxed:not(.bg--white):not(.bg--none){ 54 | background: rgba(20,20,20,0.3); 55 | &.boxed--border{ 56 | border: none; 57 | } 58 | .boxed{ 59 | background: none; 60 | } 61 | } 62 | } 63 | } 64 | 65 | .bg--primary{ 66 | .boxed:not(.imagebg){ 67 | color: @color-body; 68 | p{ 69 | color: @color-body; 70 | } 71 | h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,i{ 72 | color: @color-dark; 73 | } 74 | a{ 75 | color: @color-primary; 76 | } 77 | .color--primary{ 78 | color: @color-primary !important; 79 | } 80 | } 81 | } 82 | 83 | @media all and (min-width: 768px){ 84 | .boxed{ 85 | &.boxed--emphasis{ 86 | .scale(1.075); 87 | } 88 | } 89 | } -------------------------------------------------------------------------------- /less/theme_components/buttons.less: -------------------------------------------------------------------------------- 1 | /*! -- Stack Buttons -- */ 2 | 3 | .btn{ 4 | position: relative; 5 | &:not([class*='primary']){ 6 | border-color: #d3d3d3; 7 | &:hover{ 8 | border-color: @color-dark; 9 | } 10 | } 11 | &.type--uppercase{ 12 | letter-spacing: .5px; 13 | .btn__text{ 14 | letter-spacing: .5px; 15 | margin-right: -.5px; 16 | } 17 | } 18 | .label{ 19 | top: -@base-line-height/2; 20 | right: -@base-line-height*2; 21 | } 22 | &.btn--lg{ 23 | .btn__text{ 24 | font-weight: 600; 25 | } 26 | &.type--uppercase{ 27 | .btn__text{ 28 | letter-spacing: 1px; 29 | } 30 | } 31 | } 32 | +p.type--fine-print,+span.type--fine-print{ 33 | margin-top: 1.08333333333334em; 34 | } 35 | &.block{ 36 | margin-left: 0; 37 | +.btn.block{ 38 | margin-top: @base-line-height/2; 39 | } 40 | } 41 | &:hover{ 42 | .translate3d(0,-2px,0); 43 | } 44 | &.btn--sm{ 45 | +.btn--sm{ 46 | margin-left: @base-line-height/2; 47 | } 48 | } 49 | } 50 | 51 | p{ 52 | > .btn{ 53 | text-decoration: none; 54 | } 55 | } 56 | 57 | @media all and (max-width: 767px){ 58 | .btn{ 59 | &:not(:last-child){ 60 | margin-bottom: @base-line-height; 61 | } 62 | } 63 | } 64 | 65 | .btn--icon{ 66 | padding-left: @base-line-height*3; 67 | i{ 68 | position: absolute; 69 | height: 100%; 70 | left: 0; 71 | top: 0; 72 | background: rgba(0,0,0,.1); 73 | padding: 0 13px; 74 | border-radius: @button-radius 0 0 @button-radius; 75 | font-size: 16px; 76 | line-height: 41px; 77 | &.socicon{ 78 | line-height: 42px; 79 | } 80 | } 81 | } 82 | 83 | .btn--cart{ 84 | width: @base-line-height*2; 85 | height: @base-line-height*2; 86 | border: 2px solid @color-dark; 87 | display: block; 88 | text-align: center; 89 | border-radius: 6px; 90 | opacity: .4; 91 | padding: 0; 92 | &:hover{ 93 | opacity: 1; 94 | } 95 | .btn__text{ 96 | position: absolute; 97 | width: 100%; 98 | left: 0; 99 | top: 50%; 100 | transform: translateY(-50%); 101 | font-size: 1.142857142857143em; 102 | } 103 | } 104 | 105 | .imagebg:not(.image--light){ 106 | .btn--icon{ 107 | &:not([class*='bg']):not([class*='primary']){ 108 | i{ 109 | color: #fff; 110 | background: rgba(255,255,255,.2); 111 | } 112 | } 113 | } 114 | } 115 | 116 | @media all and (min-width: 768px){ 117 | .btn-group{ 118 | .btn{ 119 | margin-bottom: 0 !important; 120 | margin-left: 0; 121 | +.btn{ 122 | margin-left: 0; 123 | } 124 | &:not(:first-child):not(:last-child){ 125 | border-radius: 0; 126 | } 127 | &:first-child{ 128 | border-radius: 6px 0 0 6px; 129 | } 130 | &:last-child{ 131 | border-radius: 0 6px 6px 0; 132 | } 133 | &:first-child:nth-last-child(2),&:last-child:nth-child(2){ 134 | width: 50%; 135 | } 136 | } 137 | } 138 | } 139 | 140 | .btn-group{ 141 | border: none; 142 | padding: 0; 143 | } 144 | 145 | @media all and (max-width: 767px){ 146 | .btn-group{ 147 | .btn{ 148 | display: block; 149 | } 150 | } 151 | } 152 | 153 | 154 | .bg--primary{ 155 | div:not([class*='feature']){ 156 | .btn--primary{ 157 | background: #fff; 158 | border-color: #fff; 159 | .btn__text{ 160 | color: @color-primary; 161 | } 162 | } 163 | } 164 | > .btn--primary{ 165 | background: #fff; 166 | border-color: #fff; 167 | .btn__text{ 168 | color: @color-primary; 169 | } 170 | } 171 | } 172 | 173 | .bg--dark{ 174 | .btn{ 175 | &:not(.btn--primary){ 176 | border-color: lighten(@color-dark, 10%); 177 | &:hover{ 178 | border-color: lighten(@color-dark, 25%); 179 | } 180 | } 181 | .btn__text{ 182 | color: #fff; 183 | } 184 | } 185 | } 186 | 187 | .imagebg:not(.image--light){ 188 | .btn{ 189 | &:not([class*='primary']){ 190 | border-color: rgba(255,255,255,0.3); 191 | &:hover{ 192 | border-color: #fff; 193 | } 194 | } 195 | } 196 | } 197 | 198 | .imagebg.image--light{ 199 | .btn{ 200 | &:not([class*='primary']){ 201 | border-color: @color-dark; 202 | background: rgba(255,255,255,.3); 203 | &:hover{ 204 | background: rgba(255,255,255,.5); 205 | } 206 | } 207 | } 208 | } 209 | 210 | h1,.h1{ 211 | +.btn{ 212 | margin-top: @base-line-height; 213 | } 214 | } 215 | 216 | h2,.h2{ 217 | +.btn{ 218 | margin-top: @base-line-height/2; 219 | } 220 | } -------------------------------------------------------------------------------- /less/theme_components/cards.less: -------------------------------------------------------------------------------- 1 | /*! -- Stack Cards -- */ 2 | 3 | .card__top{ 4 | position: relative; 5 | overflow: hidden; 6 | } 7 | 8 | .card__action{ 9 | a{ 10 | color: @color-body; 11 | i{ 12 | color: @color-dark; 13 | font-size: 1em; 14 | } 15 | span{ 16 | position: relative; 17 | bottom: 2px; 18 | } 19 | text-decoration: none; 20 | .transition(0.3s,ease); 21 | &:not(:hover){ 22 | opacity: .5; 23 | } 24 | } 25 | } 26 | 27 | .card p a{ 28 | text-decoration: none; 29 | } 30 | 31 | .masonry__item{ 32 | .card.boxed{ 33 | margin-bottom: 0; 34 | } 35 | } 36 | 37 | .card-1{ 38 | .card__avatar{ 39 | img{ 40 | max-height: @base-line-height*1.5; 41 | margin-right: @base-line-height/4; 42 | margin-bottom: 0; 43 | } 44 | margin-bottom: @base-line-height/2; 45 | } 46 | .card__avatar, .card__meta{ 47 | display: inline-block; 48 | } 49 | .card__meta{ 50 | float: right; 51 | } 52 | .card__body{ 53 | img{ 54 | margin-bottom: @base-line-height/2; 55 | } 56 | h4{ 57 | margin-bottom: 0.342105263157895em; 58 | } 59 | border-bottom: 1px solid #ececec; 60 | padding-bottom: @base-line-height/2; 61 | margin-bottom: @base-line-height/2; 62 | } 63 | } 64 | 65 | .bg--dark{ 66 | .card-1{ 67 | .card__body{ 68 | border-color: lighten(@color-dark, 10%) 69 | } 70 | } 71 | } 72 | 73 | @media all and (max-width: 767px){ 74 | .card{ 75 | .list-inline:not(.social-list){ 76 | li{ 77 | display: inline-block; 78 | &:not(:first-child){ 79 | margin-left: @base-line-height/2; 80 | } 81 | } 82 | } 83 | } 84 | } 85 | 86 | .card-2{ 87 | .card__top{ 88 | img{ 89 | border-radius: 6px 6px 0 0; 90 | } 91 | } 92 | .card__body{ 93 | h4{ 94 | margin: 0; 95 | } 96 | p{ 97 | margin-top: @base-line-height/2; 98 | } 99 | border-bottom: 1px solid #ececec; 100 | padding-bottom: @base-line-height; 101 | } 102 | .card__bottom{ 103 | overflow: hidden; 104 | > div{ 105 | display: inline-block; 106 | width: 50%; 107 | float: left; 108 | } 109 | .h6{ 110 | margin-bottom: 0.541666666666667em; 111 | } 112 | } 113 | .card__body, .card__bottom{ 114 | padding: @base-line-height; 115 | border: 1px solid #ececec; 116 | } 117 | .card__body{ 118 | border-bottom: none; 119 | border-top: none; 120 | } 121 | .card__bottom{ 122 | border-radius: 0 0 6px 6px; 123 | padding: @base-line-height/2 @base-line-height; 124 | } 125 | .card__action{ 126 | i{ 127 | font-size: @h3-size; 128 | } 129 | } 130 | } 131 | 132 | .bg--dark{ 133 | .card-2{ 134 | .card__body, .card__bottom{ 135 | border-color: lighten(@color-dark, 10%) 136 | } 137 | } 138 | } -------------------------------------------------------------------------------- /less/theme_components/checkmarks.less: -------------------------------------------------------------------------------- 1 | /*! -- Stack Checkmarks & Crosses -- */ 2 | 3 | .checkmark{ 4 | display: inline-block; 5 | position: relative; 6 | width: @base-line-height/1.5; 7 | height: @base-line-height/1.5; 8 | border-radius: 50%; 9 | text-align: center; 10 | &:not([class*='bg-']){ 11 | background: @color-primary; 12 | } 13 | &:before{ 14 | content: '\2713'; 15 | color: #fff; 16 | font-size: 11px; 17 | position: absolute; 18 | width: 100%; 19 | left: 0; 20 | top: -4px; 21 | } 22 | &.checkmark--cross{ 23 | &:before{ 24 | content: '\2717'; 25 | } 26 | } 27 | &:not(:last-child){ 28 | margin-right: 13px; 29 | } 30 | } -------------------------------------------------------------------------------- /less/theme_components/colors.less: -------------------------------------------------------------------------------- 1 | /*! -- Stack Colours -- */ 2 | 3 | .bg--dark{ 4 | .bg--secondary{ 5 | background: lighten(@color-dark, 6%) 6 | } 7 | } -------------------------------------------------------------------------------- /less/theme_components/covers.less: -------------------------------------------------------------------------------- 1 | /*! -- Stack Covers -- */ 2 | 3 | .cover{ 4 | .typed-headline{ 5 | margin-bottom: @base-line-height*2; 6 | .type--bold{ 7 | font-weight: 400; 8 | } 9 | } 10 | .triptych{ 11 | margin-top: @base-line-height*2; 12 | } 13 | .btn{ 14 | +.modal-instance{ 15 | margin-top: @base-line-height; 16 | } 17 | } 18 | h3,.h3{ 19 | +form{ 20 | margin-top: @base-line-height*1.5; 21 | } 22 | } 23 | .lead{ 24 | +.boxed{ 25 | margin-top: @base-line-height*2; 26 | } 27 | } 28 | &.unpad--bottom{ 29 | overflow: hidden; 30 | } 31 | .modal-instance.block{ 32 | &:not(:first-child):not(:last-child){ 33 | margin: @base-line-height*1.5 0; 34 | } 35 | } 36 | .pos-bottom{ 37 | margin-bottom: @base-line-height; 38 | } 39 | } 40 | 41 | @media all and (min-width: 768px){ 42 | .cover{ 43 | .row{ 44 | .row{ 45 | &:last-child{ 46 | margin-top: @base-line-height*3; 47 | } 48 | } 49 | } 50 | } 51 | } 52 | 53 | @media all and (max-width: 767px){ 54 | .cover{ 55 | .pos-bottom.pos-absolute{ 56 | position: relative; 57 | margin-top: @base-line-height; 58 | } 59 | } 60 | } 61 | 62 | @media all and (max-width: 990px){ 63 | .cover{ 64 | .mt--3{ 65 | margin-top: 0; 66 | } 67 | } 68 | } 69 | 70 | @media all and (min-width: 768px){ 71 | .cover{ 72 | .triptych{ 73 | margin-top: @base-line-height*4; 74 | } 75 | } 76 | } 77 | 78 | .cover-fullscreen{ 79 | min-height: 100vh; 80 | &.slider[data-paging="true"]{ 81 | .slides{ 82 | .flickity-slider{ 83 | > li{ 84 | height: 100vh; 85 | } 86 | } 87 | } 88 | .pos-bottom{ 89 | bottom: @base-line-height*3; 90 | width: 100%; 91 | } 92 | h4{ 93 | margin: 0; 94 | } 95 | } 96 | } 97 | 98 | .cover-slider{ 99 | overflow: hidden; 100 | .slider{ 101 | position: relative; 102 | width: 100%; 103 | pointer-events: none; 104 | &:nth-child(1){ 105 | transform: translateY(-30%); 106 | } 107 | &:nth-child(2){ 108 | transform: translateY(-25%); 109 | } 110 | &:nth-child(3){ 111 | transform: translateY(-20%); 112 | } 113 | .slide{ 114 | opacity: .05; 115 | } 116 | } 117 | .typed-headline{ 118 | margin: 0; 119 | +.btn{ 120 | margin-top: @base-line-height/2; 121 | } 122 | } 123 | .slider-container{ 124 | transform: rotateZ(-30deg) translateY(-10%); 125 | -webkit-transform: rotateZ(-30deg) translateY(-10%); 126 | position: absolute; 127 | width: 100%; 128 | height: 100%; 129 | top: 0; 130 | } 131 | } 132 | 133 | // Desktop 134 | @media all and (min-width: 768px){ 135 | .cover-slider{ 136 | +.cta-4{ 137 | position: absolute; 138 | background: none; 139 | color: #fff; 140 | border-bottom: none !important; 141 | width: 100%; 142 | .translate3d(0,-100%,0); 143 | a{ 144 | color: #fff; 145 | font-weight: 600; 146 | } 147 | } 148 | } 149 | } 150 | 151 | .cover-features{ 152 | &.space--lg{ 153 | padding-bottom: @base-line-height * 2; 154 | } 155 | .row:nth-child(2){ 156 | margin-top: @base-line-height* 6; 157 | } 158 | } 159 | 160 | @media all and (max-width: 767px){ 161 | .cover-features{ 162 | &.space--lg{ 163 | padding-bottom: @base-line-height; 164 | } 165 | .row:nth-child(2){ 166 | margin-top: @base-line-height * 2; 167 | } 168 | } 169 | } -------------------------------------------------------------------------------- /less/theme_components/cta.less: -------------------------------------------------------------------------------- 1 | /*! -- Stack CTA -- */ 2 | 3 | .cta{ 4 | .btn{ 5 | &:first-child{ 6 | &:not(:last-child){ 7 | margin-bottom: @base-line-height; 8 | } 9 | } 10 | } 11 | &.boxed{ 12 | &:last-child{ 13 | margin-bottom: 0; 14 | } 15 | } 16 | } 17 | 18 | @media all and (min-width: 768px){ 19 | .cta--horizontal{ 20 | h4,.lead,.btn{ 21 | margin: 0; 22 | } 23 | h4,.lead{ 24 | position: relative; 25 | top: 4px; 26 | } 27 | } 28 | .bg--dark,.imagebg{ 29 | .cta-1{ 30 | >div[class*='col-']{ 31 | &:last-child{ 32 | border-left: none; 33 | } 34 | } 35 | } 36 | } 37 | } 38 | 39 | @media all and (min-width: 1200px){ 40 | .cta-1{ 41 | &.boxed--border{ 42 | padding: 0; 43 | } 44 | >div[class*='col-']{ 45 | padding: @base-line-height/1.5 15px; 46 | &:last-child{ 47 | border-left: 1px solid #ECECEC; 48 | } 49 | } 50 | } 51 | } 52 | 53 | @media all and (max-width: 990px){ 54 | .cta-1{ 55 | text-align: center; 56 | >div[class*='col-']{ 57 | padding-left: 0; 58 | padding-right: 0; 59 | &:not(:last-child){ 60 | margin-bottom: @base-line-height/2; 61 | } 62 | &:last-child{ 63 | margin-top: @base-line-height; 64 | } 65 | } 66 | } 67 | } 68 | 69 | @media all and (max-width: 767px){ 70 | .cta{ 71 | .lead{ 72 | margin: 1.36842105263158em 0; 73 | } 74 | } 75 | } 76 | 77 | .cta-2{ 78 | .transition(0.3s,ease); 79 | h2{ 80 | margin: 1.57575757575758em 0; 81 | } 82 | &.bg--primary{ 83 | &:hover{ 84 | background: lighten(@color-primary, 3%) 85 | } 86 | } 87 | &:hover{ 88 | background: lighten(@color-bg-site, 3%) 89 | } 90 | } 91 | 92 | @media all and (min-width: 768px){ 93 | .cta-3{ 94 | .switchable__text{ 95 | margin-top: @base-line-height*3; 96 | } 97 | } 98 | } -------------------------------------------------------------------------------- /less/theme_components/customizers.less: -------------------------------------------------------------------------------- 1 | /*! -- Stack Customizers -- */ 2 | 3 | .box-shadow{ 4 | box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.04); 5 | } 6 | 7 | .box-shadow-shallow{ 8 | box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.06); 9 | } 10 | 11 | .box-shadow-wide{ 12 | box-shadow: 0 23px 40px rgba(0, 0, 0, 0.2); 13 | } 14 | 15 | .border--round{ 16 | border-radius: 6px; 17 | &:before{ 18 | border-radius: 6px; 19 | } 20 | .background-image-holder{ 21 | border-radius: 6px; 22 | } 23 | [data-scrim-top]:before,[data-scrim-bottom]:before,[data-overlay]:before{ 24 | border-radius: 6px; 25 | } 26 | } 27 | 28 | .imageblock.border--round{ 29 | .background-image-holder{ 30 | border-radius: 6px 0 0 6px; 31 | } 32 | } 33 | 34 | @media all and (max-width: 767px){ 35 | .imageblock.border--round{ 36 | .background-image-holder{ 37 | border-radius: 6px 6px 0 0; 38 | } 39 | } 40 | } 41 | 42 | .theme--square{ 43 | .border--round,.btn{ 44 | border-radius: 0px; 45 | } 46 | } 47 | 48 | .theme--bordered{ 49 | border: @base-line-height/2 solid @color-dark; 50 | } 51 | 52 | .main-container{ 53 | &.transition--fade{ 54 | &:not(.transition--active){ 55 | cursor: wait; 56 | } 57 | } 58 | } 59 | 60 | @media all and (min-width: (@boxed-layout-width)){ 61 | body.boxed-layout{ 62 | > section.bar-3:first-of-type{ 63 | border-radius: 6px 6px 0 0; 64 | } 65 | .main-container{ 66 | > footer{ 67 | &:last-child{ 68 | border-radius: 0 0 6px 6px; 69 | } 70 | } 71 | } 72 | } 73 | } 74 | 75 | body.boxed-layout{ 76 | .modal-container{ 77 | section:not([class*='bg-']){ 78 | background: none; 79 | } 80 | } 81 | } -------------------------------------------------------------------------------- /less/theme_components/dropdowns.less: -------------------------------------------------------------------------------- 1 | /*! -- Stack Dropdowns -- */ 2 | 3 | .dropdown{ 4 | > .dropdown__trigger{ 5 | &:after{ 6 | font-family: "stack-interface"; 7 | display: inline-block; 8 | font-size: 8px; 9 | position: relative; 10 | bottom: 2px; 11 | } 12 | .image--xxs{ 13 | margin-right: @base-line-height/4; 14 | } 15 | } 16 | .dropdown__content{ 17 | border-radius: 6px; 18 | box-shadow: 0 0 25px 0 rgba(0,0,0,0.08); 19 | -webkit-box-shadow: 0 0 25px 0 rgba(0,0,0,0.08); 20 | padding: @base-line-height/1.5 @base-line-height; 21 | h5{ 22 | &:not(:last-child){ 23 | margin-bottom: @base-line-height/2; 24 | } 25 | } 26 | .background-image-holder{ 27 | border-radius: 6px 0 0 6px; 28 | } 29 | >.pos-absolute[class*='col-']{ 30 | left: 0; 31 | top: 0; 32 | height: 100%; 33 | position: absolute !important; 34 | &[data-overlay]{ 35 | &:before{ 36 | border-radius: 6px 0 0 6px; 37 | } 38 | } 39 | } 40 | } 41 | } 42 | 43 | .menu-horizontal{ 44 | > .dropdown{ 45 | > .dropdown__trigger{ 46 | &:after{ 47 | content: '\e80a'; 48 | margin-left: 4px; 49 | } 50 | } 51 | } 52 | } 53 | 54 | .menu-vertical{ 55 | > .dropdown{ 56 | > .dropdown__trigger{ 57 | display: inline-block; 58 | width: 100%; 59 | } 60 | } 61 | } 62 | 63 | // Mobile 64 | @media all and (max-width: 767px){ 65 | .dropdown{ 66 | [class*='col-']+[class*='col-']{ 67 | margin-top: @base-line-height/2; 68 | } 69 | .dropdown__content{ 70 | &:not([class*='bg-']){ 71 | border: none; 72 | box-shadow: none; 73 | } 74 | } 75 | } 76 | } 77 | 78 | @media all and (max-width: 767px){ 79 | .dropdown__container{ 80 | left: 0 !important; 81 | } 82 | } 83 | 84 | .menu-vertical{ 85 | li{ 86 | .transition(0.3s,ease); 87 | &:not(:hover):not(.dropdown--active){ 88 | opacity: .75; 89 | } 90 | &:not(:last-child){ 91 | margin-bottom: @base-line-height/6; 92 | } 93 | &.dropdown{ 94 | position: relative; 95 | &:after{ 96 | content: '\e80c'; 97 | font-family: 'stack-interface'; 98 | right: 0; 99 | top: 0; 100 | position: absolute; 101 | .transition(0.3s,ease); 102 | display: inline-block; 103 | .translate3d(-10px,0,0); 104 | } 105 | &:hover{ 106 | &:after{ 107 | .translate3d(-5px,0,0); 108 | } 109 | } 110 | } 111 | &.separate{ 112 | border-top: 1px solid lighten(@color-body, 50%); 113 | margin-top: @base-line-height/2; 114 | padding-top: @base-line-height/2; 115 | &.dropdown{ 116 | &:after{ 117 | top: .92857143em; 118 | } 119 | } 120 | } 121 | } 122 | +h5{ 123 | margin-top: @base-line-height; 124 | } 125 | } 126 | 127 | .dropdown__container{ 128 | > .container{ 129 | width: 100vw; 130 | } 131 | } 132 | 133 | @media all and (min-width: 768px){ 134 | .dropdown__container{ 135 | > .container{ 136 | max-width: 720px; 137 | } 138 | } 139 | } 140 | 141 | @media all and (min-width: 992px){ 142 | .dropdown__container{ 143 | > .container{ 144 | max-width: 960px; 145 | } 146 | } 147 | } 148 | @media all and (min-width: 1200px){ 149 | .dropdown__container{ 150 | > .container{ 151 | max-width: 1140px; 152 | } 153 | } 154 | } 155 | 156 | // Mobile 157 | @media all and (max-width: 990px){ 158 | .menu-vertical{ 159 | .dropdown{ 160 | &.dropdown--active{ 161 | &:after{ 162 | opacity: 0; 163 | } 164 | } 165 | } 166 | } 167 | } 168 | 169 | @media all and (min-width: 991px){ 170 | .dropdown{ 171 | .dropdown__container{ 172 | &:before{ 173 | height: 18px; 174 | } 175 | } 176 | } 177 | } -------------------------------------------------------------------------------- /less/theme_components/features-large.less: -------------------------------------------------------------------------------- 1 | /*! -- Stack Features Large -- */ 2 | 3 | 4 | @media all and (min-width: 768px){ 5 | .staggered{ 6 | div[class*='col-']{ 7 | &:nth-child(2):last-child{ 8 | margin-top: @base-line-height*7; 9 | &:not(:last-child){ 10 | margin-bottom: @base-line-height*5; 11 | } 12 | } 13 | .feature{ 14 | &:not(:last-child){ 15 | margin-bottom: @base-line-height*5; 16 | } 17 | } 18 | } 19 | } 20 | } 21 | 22 | .feature-large{ 23 | h4{ 24 | &:first-child{ 25 | margin-bottom: 0.68421052631579em; 26 | } 27 | } 28 | .feature{ 29 | &:not(.boxed){ 30 | margin-bottom: 30px; 31 | } 32 | } 33 | .feature-3{ 34 | &.text-center{ 35 | p{ 36 | margin: 0 auto; 37 | } 38 | } 39 | } 40 | .lead{ 41 | +.feature-large__group{ 42 | margin-top: @base-line-height*2; 43 | } 44 | } 45 | .feature-large__group{ 46 | overflow: hidden; 47 | } 48 | } 49 | 50 | .feature-large-1{ 51 | .lead{ 52 | margin-bottom: 2.73684210526316em; 53 | } 54 | } 55 | 56 | @media all and (min-width: 768px){ 57 | .feature-large-2{ 58 | div[class*='col-']{ 59 | &:first-child{ 60 | margin-top: @base-line-height*3; 61 | } 62 | &:last-child{ 63 | margin-top: @base-line-height*4; 64 | } 65 | } 66 | } 67 | } 68 | 69 | @media all and (max-width: 767px){ 70 | .feature-large-2{ 71 | img{ 72 | margin: @base-line-height 0; 73 | } 74 | } 75 | } 76 | 77 | .feature-large-7{ 78 | &.switchable{ 79 | .boxed{ 80 | div[class*='col-']:only-child{ 81 | float: none; 82 | } 83 | } 84 | } 85 | } 86 | 87 | .feature-large-13{ 88 | p.lead +.text-block{ 89 | margin-top: @base-line-height * 2; 90 | } 91 | div[class*='col-']{ 92 | .text-block + .text-block{ 93 | margin-top: @base-line-height * 1.5; 94 | } 95 | } 96 | } 97 | 98 | @media all and (min-width: 1200px){ 99 | .feature-large-13:not(.text-center){ 100 | .text-block{ 101 | p{ 102 | max-width: @base-line-height * 14; 103 | } 104 | } 105 | } 106 | } 107 | 108 | .feature-large-14{ 109 | h5{ 110 | margin-bottom: @base-line-height/4; 111 | } 112 | .boxed{ 113 | margin-bottom: 0; 114 | &.boxed--border{ 115 | img{ 116 | border-radius: 6px; 117 | } 118 | } 119 | } 120 | } 121 | 122 | @media all and (min-width: 768px){ 123 | .feature-large-14{ 124 | &.switchable{ 125 | .switchable__text{ 126 | margin-top: @base-line-height*3; 127 | } 128 | } 129 | } 130 | } -------------------------------------------------------------------------------- /less/theme_components/footers.less: -------------------------------------------------------------------------------- 1 | /*! -- Stack Footers -- */ 2 | 3 | footer{ 4 | .type--fine-print{ 5 | &:not(p){ 6 | opacity: .5; 7 | } 8 | } 9 | a{ 10 | font-weight: normal; 11 | } 12 | &:not(.bg--primary):not(.bg--dark){ 13 | a{ 14 | color: @color-body; 15 | } 16 | } 17 | a.type--fine-print{ 18 | &:not(:first-child){ 19 | margin-left: @base-line-height; 20 | } 21 | } 22 | .logo{ 23 | max-height: @base-line-height*.9; 24 | } 25 | ul{ 26 | &:not(.list-inline):not(.slides){ 27 | > li{ 28 | line-height: @base-line-height*1.25 !important; 29 | } 30 | } 31 | } 32 | &.footer-2{ 33 | .row{ 34 | &:last-child{ 35 | margin-top: @base-line-height*2; 36 | } 37 | } 38 | } 39 | &.footer-5{ 40 | .row{ 41 | [class*='col-']{ 42 | >div{ 43 | &:nth-last-child(2){ 44 | margin: @base-line-height/2; 45 | .type--fine-print{ 46 | opacity: 1; 47 | } 48 | } 49 | } 50 | } 51 | } 52 | } 53 | &.footer-6{ 54 | .footer__lower{ 55 | background: @color-bg-secondary; 56 | margin-top: @base-line-height; 57 | padding: @base-line-height 0; 58 | } 59 | &.bg--dark{ 60 | .footer__lower{ 61 | background: darken(@color-dark, 5%); 62 | } 63 | } 64 | &.bg--secondary{ 65 | .footer__lower{ 66 | background: darken(@color-bg-secondary, 2%); 67 | } 68 | } 69 | &.bg--primary{ 70 | .footer__lower{ 71 | background: darken(@color-primary, 5%); 72 | } 73 | } 74 | } 75 | &.footer-7{ 76 | padding: @base-line-height 0; 77 | } 78 | } 79 | 80 | @media all and (min-width: 768px){ 81 | footer{ 82 | .list-inline{ 83 | +.btn{ 84 | position: relative; 85 | bottom: 4px; 86 | } 87 | } 88 | .logo{ 89 | margin: 0; 90 | &:not(:last-child){ 91 | margin-right: @base-line-height; 92 | } 93 | } 94 | &.footer-3{ 95 | .logo{ 96 | +ul{ 97 | position: relative; 98 | top: 5px; 99 | a{ 100 | color: @color-dark; 101 | } 102 | } 103 | } 104 | .social-list{ 105 | position: relative; 106 | top: 9px; 107 | } 108 | .row:last-child{ 109 | margin-top: @base-line-height; 110 | } 111 | } 112 | &.footer-4{ 113 | .logo{ 114 | +span{ 115 | position: relative; 116 | } 117 | } 118 | form{ 119 | position: relative; 120 | bottom: 4px; 121 | } 122 | .row{ 123 | &:last-child{ 124 | margin-top: @base-line-height; 125 | } 126 | } 127 | } 128 | &.imagebg:not(.image--light){ 129 | span,p,a{ 130 | color: #fff; 131 | } 132 | } 133 | } 134 | .footer-1{ 135 | .type--fine-print{ 136 | position: relative; 137 | top: 2px; 138 | } 139 | } 140 | } 141 | 142 | @media all and (max-width: 767px){ 143 | footer{ 144 | .social-list{ 145 | margin: @base-line-height 0; 146 | } 147 | } 148 | .footer-4{ 149 | form{ 150 | margin: @base-line-height 0; 151 | } 152 | .logo{ 153 | margin: 0; 154 | } 155 | } 156 | .footer-6{ 157 | .footer__lower{ 158 | .social-list{ 159 | margin-top: @base-line-height; 160 | } 161 | } 162 | } 163 | .footer-7{ 164 | .social-list{ 165 | margin-top: @base-line-height; 166 | } 167 | } 168 | .footer-1{ 169 | .social-list{ 170 | margin-top: @base-line-height; 171 | } 172 | .logo{ 173 | display: block; 174 | margin-top: @base-line-height; 175 | margin-bottom: @base-line-height/2; 176 | margin-left: auto; 177 | margin-right: auto; 178 | } 179 | } 180 | } -------------------------------------------------------------------------------- /less/theme_components/helpers.less: -------------------------------------------------------------------------------- 1 | /*! -- Stack Helpers -- */ 2 | 3 | @media all and (max-width: 767px){ 4 | .block--xs{ 5 | margin-top: @base-line-height/2; 6 | } 7 | } 8 | 9 | .container{ 10 | .container{ 11 | max-width: 100%; 12 | } 13 | } 14 | 15 | .switchable-toggle{ 16 | cursor: pointer; 17 | user-select: none; 18 | -webkit-user-select: none; 19 | } 20 | 21 | .back-to-top{ 22 | position: fixed; 23 | width: @base-line-height*2; 24 | height: @base-line-height*2; 25 | background: #fff; 26 | border-radius: 50%; 27 | text-align: center; 28 | right: @base-line-height; 29 | bottom: @base-line-height*2; 30 | padding-top: 12px; 31 | .box-shadow; 32 | z-index: 99; 33 | border: 1px solid #ececec; 34 | i{ 35 | color: @color-dark; 36 | } 37 | .transition(0.2s,ease-out); 38 | &:not(.active){ 39 | opacity: 0; 40 | .translate3d(0,20px,0); 41 | pointer-events: none; 42 | } 43 | &.active{ 44 | &:hover{ 45 | .translate3d(0,-5px,0); 46 | } 47 | } 48 | } 49 | 50 | .disable-scroll-bars{ 51 | -ms-overflow-style: none; 52 | &::-webkit-scrollbar { 53 | display: none; 54 | } 55 | } -------------------------------------------------------------------------------- /less/theme_components/icons.less: -------------------------------------------------------------------------------- 1 | /*! -- Stack Icons -- */ 2 | 3 | .icon{ 4 | &:not(.block){ 5 | display: inline-block; 6 | } 7 | &.icon--xs{ 8 | font-size: 1.14285714285714em; 9 | } 10 | } 11 | 12 | .text-block{ 13 | .icon{ 14 | +h4{ 15 | margin-top: 0.6842105263158em; 16 | } 17 | } 18 | } 19 | 20 | .imagebg{ 21 | .icon{ 22 | color: #fff; 23 | } 24 | } 25 | 26 | p{ 27 | .material-icons{ 28 | font-size: 1em; 29 | &:first-child{ 30 | margin-right: @base-line-height/6; 31 | } 32 | } 33 | } 34 | 35 | .material-icons{ 36 | font-family: 'Material Icons' !important; 37 | } 38 | 39 | .icon-circle{ 40 | position: relative; 41 | display: inline-block; 42 | width: @base-line-height*2; 43 | height: @base-line-height*2; 44 | border-radius: 50%; 45 | border: 1px solid #ececec; 46 | background: @color-bg-secondary; 47 | text-align: center; 48 | i{ 49 | font-size: 24px; 50 | position: absolute; 51 | top: 50%; 52 | transform: translateY(-50%); 53 | width: 100%; 54 | left: 0; 55 | 56 | } 57 | } -------------------------------------------------------------------------------- /less/theme_components/images.less: -------------------------------------------------------------------------------- 1 | /*! -- Stack Images -- */ 2 | 3 | img{ 4 | &:last-child{ 5 | margin-bottom: 0; 6 | } 7 | &.flag{ 8 | max-height: @base-line-height; 9 | } 10 | &.image--sm{ 11 | &:not(:last-child){ 12 | margin-bottom: @base-line-height/2; 13 | } 14 | } 15 | &.promo{ 16 | &.border--round{ 17 | border: 1px solid #ececec; 18 | } 19 | } 20 | } 21 | 22 | p.lead{ 23 | img{ 24 | max-height: 1.68421053em; 25 | } 26 | } 27 | 28 | .imagebg{ 29 | h1,h2,h3,h4,h5,h6{ 30 | position: relative; 31 | } 32 | &:not(.image--light){ 33 | span{ 34 | color: #fff; 35 | } 36 | } 37 | &.border--round{ 38 | overflow: hidden; 39 | } 40 | } 41 | 42 | section.parallax{ 43 | .row{ 44 | .background-image-holder{ 45 | transform: none !important; 46 | top: 0 !important; 47 | } 48 | } 49 | } 50 | 51 | .triptych{ 52 | &.border--round{ 53 | img{ 54 | position: relative; 55 | border-radius: 6px; 56 | width: 33.333333%; 57 | float: left; 58 | margin: 0; 59 | &:first-child,&:last-child{ 60 | } 61 | &:nth-child(2){ 62 | .scale(1.2); 63 | z-index: 2; 64 | .box-shadow-wide; 65 | } 66 | } 67 | } 68 | } 69 | 70 | .gallery{ 71 | >div[class*='col-']{ 72 | margin-bottom: 30px; 73 | } 74 | } 75 | 76 | .gallery-1{ 77 | overflow: hidden; 78 | position: relative; 79 | .gallery__image{ 80 | &:not(:last-child){ 81 | margin-bottom: 30px; 82 | } 83 | } 84 | > div[class*='col-']{ 85 | &:first-child{ 86 | > .gallery__image{ 87 | height: 800px; 88 | } 89 | } 90 | &:last-child{ 91 | > .gallery__image{ 92 | height: calc(800px/2 - 15); 93 | } 94 | } 95 | } 96 | } 97 | 98 | .gallery__image{ 99 | position: relative; 100 | overflow: hidden; 101 | } 102 | 103 | @media all and (max-width: 767px){ 104 | .gallery-1{ 105 | .gallery__image{ 106 | max-height: 300px; 107 | margin-bottom: 15px; 108 | &:not(:last-child){ 109 | margin-bottom: 15px; 110 | } 111 | } 112 | } 113 | } 114 | 115 | .section--ken-burns{ 116 | overflow: hidden; 117 | > .background-image-holder, > img:only-child{ 118 | animation: kenBurns 15s ease alternate infinite; 119 | -webkit-animation: kenBurns 15s ease alternate infinite; 120 | } 121 | } -------------------------------------------------------------------------------- /less/theme_components/instagram.less: -------------------------------------------------------------------------------- 1 | /*! -- Stack Instagram -- */ 2 | 3 | .instafeed{ 4 | a{ 5 | .transition(0.3s,ease); 6 | &:hover{ 7 | opacity: .75; 8 | } 9 | } 10 | &:not(.instafeed--gapless){ 11 | li{ 12 | padding: @base-line-height/4; 13 | } 14 | } 15 | &.instafeed--gapless{ 16 | li{ 17 | margin-bottom: -1px; 18 | } 19 | } 20 | +.btn{ 21 | margin-top: @base-line-height*1.5; 22 | } 23 | &[data-grid="1"][data-amount="8"]{ 24 | li{ 25 | display: inline-block; 26 | width: 12.5%; 27 | } 28 | } 29 | } 30 | 31 | .instagram{ 32 | position: relative; 33 | &.unpad{ 34 | .btn{ 35 | position: absolute; 36 | z-index: 2; 37 | top: 50%; 38 | .translate3d(-50%,-50%,0); 39 | margin: 0; 40 | } 41 | } 42 | } -------------------------------------------------------------------------------- /less/theme_components/labels.less: -------------------------------------------------------------------------------- 1 | /*! -- Stack Labels -- */ 2 | 3 | .label{ 4 | &:not([class*='bg--']){ 5 | background: @color-primary-1; 6 | } 7 | display: inline-block; 8 | font-size: 9px; 9 | font-weight: 700; 10 | letter-spacing: .5px; 11 | color: #fff; 12 | text-transform: uppercase; 13 | height: 26px; 14 | min-width: 65px; 15 | padding: 0 10px; 16 | text-align: center; 17 | border-radius: 50px; 18 | position: absolute; 19 | z-index: 3; 20 | top: @base-line-height/1.5; 21 | right: @base-line-height/1.5; 22 | &.label--inline{ 23 | position: relative; 24 | top: 0; 25 | right: 0; 26 | &:not(:last-child){ 27 | margin-right: @base-line-height/2; 28 | } 29 | +span, +p{ 30 | position: relative; 31 | top: 1px; 32 | } 33 | } 34 | &.switchable-toggle{ 35 | left: 50%; 36 | right: auto; 37 | .translate3d(-50%,0,0); 38 | .box-shadow-shallow; 39 | } 40 | } 41 | 42 | .bg--primary-1{ 43 | .label{ 44 | &:not([class*='bg--']){ 45 | background: @color-primary-2; 46 | } 47 | } 48 | } -------------------------------------------------------------------------------- /less/theme_components/lightbox.less: -------------------------------------------------------------------------------- 1 | /*! -- Stack Lightboxes -- */ 2 | 3 | .lb-close{ 4 | position: relative; 5 | top: 10px; 6 | &:before{ 7 | content: '\00D7'; 8 | color: #fff; 9 | font-size: 2.5em; 10 | font-weight: 400; 11 | } 12 | &:hover{ 13 | text-decoration: none; 14 | } 15 | } 16 | 17 | .lb-prev,.lb-next{ 18 | &:after{ 19 | font-family: 'stack-interface'; 20 | position: fixed; 21 | } 22 | } 23 | .lb-prev{ 24 | &:after{ 25 | content: '\e801'; 26 | left: @base-line-height; 27 | } 28 | } 29 | .lb-next{ 30 | &:after{ 31 | content: '\e802'; 32 | right: @base-line-height; 33 | } 34 | } 35 | 36 | .lb-data{ 37 | overflow: hidden; 38 | min-height: 30px; 39 | } 40 | 41 | a[data-lightbox]{ 42 | .transition(0.3s,ease); 43 | &:hover{ 44 | opacity: .8; 45 | cursor: zoom-in; 46 | } 47 | } -------------------------------------------------------------------------------- /less/theme_components/links.less: -------------------------------------------------------------------------------- 1 | /*! -- Stack Links -- */ 2 | 3 | a{ 4 | color: @color-primary; 5 | font-weight: 700; 6 | &:hover{ 7 | color: darken(@color-primary,10%); 8 | text-decoration: underline; 9 | } 10 | &.block{ 11 | font-weight: normal; 12 | text-decoration: none; 13 | color: @color-body; 14 | } 15 | } 16 | 17 | p a, span a, label a{ 18 | font-size: 1em; 19 | text-decoration: underline; 20 | font-weight: 400; 21 | line-height: @base-line-height; 22 | } 23 | 24 | p+a:not(.btn){ 25 | font-size: @h6-size; 26 | line-height: @h6-line-height; 27 | } 28 | 29 | .imagebg:not(.image--light){ 30 | a{ 31 | color: #fff; 32 | font-weight: 600; 33 | } 34 | } -------------------------------------------------------------------------------- /less/theme_components/lists.less: -------------------------------------------------------------------------------- 1 | /*! -- Stack Lists -- */ 2 | 3 | ul:not([class*='menu']){ 4 | li{ 5 | > a{ 6 | font-weight: normal; 7 | &:hover{ 8 | text-decoration: none; 9 | } 10 | } 11 | } 12 | } 13 | 14 | ol{ 15 | list-style-position: outside; 16 | list-style-type: decimal; 17 | li{ 18 | &:not(:last-child){ 19 | margin-bottom: @base-line-height; 20 | } 21 | } 22 | &.lead{ 23 | li{ 24 | &:not(:last-child){ 25 | margin-bottom: 1.26315789473684em; 26 | } 27 | } 28 | } 29 | } 30 | 31 | .list-inline{ 32 | margin-left: 0; 33 | display: inline-block; 34 | li{ 35 | display: inline-block; 36 | padding: 0; 37 | &:not(:last-child){ 38 | margin-right: @base-line-height; 39 | } 40 | } 41 | &:not(:last-child){ 42 | margin-right: @base-line-height; 43 | } 44 | } 45 | 46 | .list-inline--images{ 47 | img{ 48 | max-height: @base-line-height*1.5; 49 | } 50 | } 51 | 52 | @media all and (min-width: 768px){ 53 | .list-inline--images{ 54 | li{ 55 | &:not(:last-child){ 56 | margin-right: @base-line-height*3; 57 | } 58 | } 59 | } 60 | } 61 | 62 | @media all and (max-width: 767px){ 63 | .list-inline--images{ 64 | li{ 65 | &:not(:last-child){ 66 | margin-bottom: @base-line-height; 67 | } 68 | } 69 | } 70 | } 71 | 72 | .list--loose{ 73 | > li{ 74 | &:not(:last-child){ 75 | margin-bottom: @base-line-height/4; 76 | } 77 | } 78 | } 79 | 80 | .list--hover{ 81 | li{ 82 | .transition(0.2s,ease); 83 | &:not(:hover){ 84 | opacity: .6; 85 | } 86 | } 87 | } 88 | 89 | .social-list{ 90 | a{ 91 | color: @color-dark; 92 | } 93 | } 94 | 95 | .imagebg:not(.image--light){ 96 | .social-list{ 97 | a{ 98 | color: #fff; 99 | } 100 | } 101 | } 102 | 103 | .results-list{ 104 | > li > a:first-child{ 105 | display: flex; 106 | align-items: center; 107 | span{ 108 | display: inline-block; 109 | margin-left: @base-line-height/4; 110 | } 111 | h4{ 112 | display: inline-block; 113 | margin-bottom: 0; 114 | } 115 | &:hover{ 116 | h4,span{ 117 | text-decoration: underline; 118 | } 119 | } 120 | margin-bottom: @base-line-height/2; 121 | } 122 | > li{ 123 | &:not(:last-child){ 124 | margin-bottom: @base-line-height; 125 | padding-bottom: @base-line-height; 126 | border-bottom: 1px solid rgba(0,0,0,0.1); 127 | } 128 | } 129 | } 130 | 131 | @media all and (max-width: 767px){ 132 | .list-inline{ 133 | &:not(.social-list):not(.list-inline--images){ 134 | display: block; 135 | li{ 136 | display: block; 137 | margin: 0; 138 | &:not(:last-child){ 139 | margin-bottom: @base-line-height/4; 140 | } 141 | } 142 | } 143 | } 144 | } 145 | 146 | @media all and (max-width: 767px){ 147 | .list-inline{ 148 | min-width: 100%; 149 | } 150 | } 151 | 152 | .row--list{ 153 | span.h6{ 154 | margin-bottom: 0; 155 | } 156 | span.h3{ 157 | &:last-child{ 158 | margin-bottom: 0; 159 | } 160 | } 161 | } 162 | 163 | @media all and (max-width: 767px){ 164 | .row--list{ 165 | > li{ 166 | margin-bottom: @base-line-height/2; 167 | } 168 | } 169 | } -------------------------------------------------------------------------------- /less/theme_components/loader.less: -------------------------------------------------------------------------------- 1 | /*! -- Stack Loader -- */ 2 | 3 | .loader{ 4 | border: 3px solid @color-primary; 5 | border-radius: 30px; 6 | height: 30px; 7 | left: 50%; 8 | margin: -15px 0 0 -15px; 9 | opacity: 0; 10 | position: fixed; 11 | z-index: 10; 12 | top: 50%; 13 | width: 30px; 14 | animation: pulsate .7s ease-out infinite; 15 | &.loader--fade{ 16 | opacity: 0; 17 | animation: none; 18 | } 19 | } 20 | 21 | @keyframes pulsate { 22 | 0% { 23 | transform: scale(.1); 24 | opacity: 0.0; 25 | } 26 | 50% { 27 | opacity: 1; 28 | } 29 | 100% { 30 | transform: scale(1.2); 31 | opacity: 0; 32 | } 33 | } -------------------------------------------------------------------------------- /less/theme_components/maps.less: -------------------------------------------------------------------------------- 1 | /*! -- Stack Maps -- */ 2 | 3 | iframe[src*='google.com/maps']{ 4 | border: none; 5 | } 6 | 7 | .map-container{ 8 | min-height: 400px; 9 | &:not(:last-child){ 10 | margin-bottom: @base-line-height; 11 | } 12 | &.border--round{ 13 | overflow: hidden; 14 | z-index: 2; 15 | .gm-style{ 16 | border-radius: 6px; 17 | } 18 | } 19 | iframe{ 20 | left: 0; 21 | } 22 | } 23 | 24 | @media all and (min-width: 768px){ 25 | .background-image-holder, .imageblock__content{ 26 | .map-container{ 27 | position: absolute; 28 | width: 100%; 29 | height: 100%; 30 | top: 0; 31 | left: 0; 32 | } 33 | } 34 | .map-container{ 35 | +div[class*='col-']{ 36 | margin-top: @base-line-height*2; 37 | } 38 | } 39 | } -------------------------------------------------------------------------------- /less/theme_components/masonry.less: -------------------------------------------------------------------------------- 1 | /*! -- Stack Masonry -- */ 2 | 3 | .masonry__item:not(:empty){ 4 | margin-bottom: 30px; 5 | article{ 6 | margin: 0; 7 | .boxed{ 8 | margin: 0; 9 | } 10 | } 11 | transform-style: preserve-3d; 12 | } 13 | 14 | .masonry__item:empty{ 15 | height: 0; 16 | min-height: 0; 17 | } 18 | 19 | .masonry{ 20 | hr{ 21 | +.masonry__container, +.row{ 22 | margin-top: @base-line-height*2.5; 23 | } 24 | } 25 | } 26 | 27 | .masonry-filter-holder:not(.masonry-filters--horizontal){ 28 | display: inline-block; 29 | cursor: pointer; 30 | height: @base-line-height*2; 31 | position: relative; 32 | z-index: 9; 33 | min-width: 143px; 34 | .masonry__filters{ 35 | cursor: pointer; 36 | .transition(0.3s,ease); 37 | z-index: 2; 38 | display: inline-block; 39 | position: absolute; 40 | left: 0; 41 | text-align: left; 42 | padding: @base-line-height/2 @base-line-height; 43 | border: 1px solid #ececec; 44 | background: @color-bg-site; 45 | border-radius: 6px; 46 | ul{ 47 | margin: 0; 48 | cursor: pointer; 49 | li{ 50 | .transition(0.3s,ease); 51 | display: block; 52 | color: @color-body; 53 | white-space: nowrap; 54 | &:not(:last-child){ 55 | margin-bottom: @base-line-height/2; 56 | } 57 | &.active{ 58 | color: @color-primary; 59 | cursor: pointer; 60 | &:after{ 61 | content: '\25bc'; 62 | font-size: 8px; 63 | margin-left: 6px; 64 | position: relative; 65 | bottom: 2px; 66 | display: inline-block; 67 | transform: scaleX(1.4) scaleY(0.9); 68 | .transition(0.2s,linear); 69 | } 70 | } 71 | &:hover{ 72 | color: @color-primary; 73 | } 74 | } 75 | &:hover{ 76 | li{ 77 | &.active{ 78 | &:after{ 79 | opacity: 0; 80 | } 81 | } 82 | } 83 | } 84 | } 85 | } 86 | &:not(:hover){ 87 | .masonry__filters{ 88 | ul{ 89 | max-height: @base-line-height; 90 | overflow: hidden; 91 | li{ 92 | &:not(.active){ 93 | display: none; 94 | } 95 | } 96 | } 97 | } 98 | } 99 | &:hover{ 100 | .masonry__filters{ 101 | 102 | .box-shadow; 103 | ul{ 104 | li{ 105 | &.active{ 106 | cursor: default; 107 | } 108 | } 109 | } 110 | } 111 | } 112 | } 113 | 114 | .masonry-filters--horizontal{ 115 | display: inline-block; 116 | .masonry__filters{ 117 | display: inline-block; 118 | position: relative; 119 | margin-left: @base-line-height/2; 120 | } 121 | .masonry__filters ul li{ 122 | transition: all .3s ease; 123 | cursor: pointer; 124 | display: inline-block; 125 | &:not(:last-child){ 126 | margin-right: @base-line-height; 127 | } 128 | &.active{ 129 | color: @color-primary; 130 | } 131 | &:not(.active){ 132 | opacity: .5; 133 | } 134 | &:hover{ 135 | opacity: 1; 136 | } 137 | } 138 | } 139 | 140 | .masonry-filter-holder{ 141 | +.masonry__container{ 142 | margin-top: @base-line-height*2; 143 | } 144 | } 145 | 146 | .bg--dark{ 147 | .masonry-filter-holder{ 148 | .masonry__filters{ 149 | background: lighten(@color-dark, 2%); 150 | border-color: lighten(@color-dark, 10%); 151 | li{ 152 | color: #fff; 153 | } 154 | } 155 | } 156 | } 157 | 158 | .masonry.masonry-demos{ 159 | .masonry__item{ 160 | &:not(:empty){ 161 | margin-bottom: @base-line-height*2; 162 | } 163 | h5{ 164 | margin-bottom: 0; 165 | } 166 | &:not([style]){ 167 | .hover-item{ 168 | min-height: 450px; 169 | background: lighten(@color-dark, 5%); 170 | border: 1px solid lighten(@color-dark, 10%); 171 | } 172 | } 173 | } 174 | .hover-item{ 175 | .transition(0.35s,ease-out); 176 | border-radius: 6px; 177 | overflow: hidden; 178 | &:hover{ 179 | transform: translateY(-10px); 180 | } 181 | } 182 | .masonry__container{ 183 | margin-top: @base-line-height*2; 184 | } 185 | } -------------------------------------------------------------------------------- /less/theme_components/modals.less: -------------------------------------------------------------------------------- 1 | /*! -- Stack Modals -- */ 2 | 3 | .modal-container .modal-content:not(.height--natural){ 4 | height: auto; 5 | width: auto; 6 | } 7 | 8 | .modal-instance{ 9 | &:not(.block){ 10 | display: inline-block; 11 | } 12 | &.block{ 13 | > .btn{ 14 | display: block; 15 | } 16 | } 17 | } 18 | 19 | @media all and (min-width: 768px){ 20 | .modal-instance{ 21 | +span{ 22 | &:last-child{ 23 | display: inline-block; 24 | margin-left: @base-line-height/2; 25 | } 26 | } 27 | } 28 | } 29 | 30 | .modal-container{ 31 | .modal-content{ 32 | max-height: 95%; 33 | transform: translateX(-50%) translateY(-50%); 34 | -webkit-transform: translateX(-50%) translateY(-50%); 35 | .feature:only-child{ 36 | margin-bottom: 0; 37 | .boxed{ 38 | margin-bottom: 0; 39 | } 40 | } 41 | .imagebg:not(.image--light){ 42 | .modal-close-cross{ 43 | &:before{ 44 | color: #fff; 45 | } 46 | } 47 | } 48 | .container{ 49 | width: 100vw; 50 | } 51 | } 52 | } 53 | 54 | @media all and (max-width: 767px){ 55 | .modal-container{ 56 | .modal-content{ 57 | >.modal-close-cross{ 58 | top: 3em; 59 | background: #222; 60 | width: 2em; 61 | height: 2em; 62 | text-align: center; 63 | border-radius: 50%; 64 | color: #fff; 65 | } 66 | } 67 | &:not(.modal-active){ 68 | .modal-content{ 69 | display: none; 70 | } 71 | } 72 | } 73 | } 74 | 75 | .modal-content{ 76 | -ms-overflow-style: none; 77 | } 78 | .modal-content::-webkit-scrollbar { 79 | display: none; 80 | } -------------------------------------------------------------------------------- /less/theme_components/navigation-fullscreen.less: -------------------------------------------------------------------------------- 1 | /*! -- Stack Nav Fullscreen -- */ 2 | 3 | .menu-fullscreen{ 4 | .pos-absolute{ 5 | width: 100%; 6 | } 7 | color: #fff; 8 | a{ 9 | color: #fff; 10 | &:hover{ 11 | text-decoration: none; 12 | } 13 | } 14 | .social-list{ 15 | margin-right: 0; 16 | } 17 | &:before{ 18 | background: rgba(0,0,0,0.9); 19 | } 20 | .modal-content .modal-close-cross{ 21 | right: @base-line-height*2; 22 | top: 1em; 23 | } 24 | } 25 | 26 | // Mobile 27 | @media all and (max-width: 767px){ 28 | .menu-fullscreen{ 29 | .pos-bottom{ 30 | position: relative; 31 | } 32 | } 33 | } -------------------------------------------------------------------------------- /less/theme_components/navigation-menu-toggle.less: -------------------------------------------------------------------------------- 1 | /*! -- Stack Menu Toggle -- */ 2 | 3 | .menu-toggle{ 4 | .box-shadow; 5 | width: @base-line-height*2; 6 | height: @base-line-height*2; 7 | border-radius: 50%; 8 | text-align: center; 9 | background: #fff; 10 | display: inline-block; 11 | .transition(0.2s,ease); 12 | i{ 13 | font-size: @h3-size; 14 | position: relative; 15 | top: 13px; 16 | color: @color-dark; 17 | } 18 | &:hover{ 19 | .box-shadow-wide; 20 | .translate3d(0,-2px,0); 21 | } 22 | } -------------------------------------------------------------------------------- /less/theme_components/navigation-sidebar-column.less: -------------------------------------------------------------------------------- 1 | /*! -- Stack Nav Sidebar Column -- */ 2 | 3 | @sidebar-column-width: @base-line-height*11; 4 | 5 | .nav-container{ 6 | &.nav-container--sidebar{ 7 | + .main-container{ 8 | width: ~"calc(100vw - @{sidebar-column-width})"; 9 | float: right; 10 | } 11 | } 12 | } 13 | 14 | .nav-sidebar-column{ 15 | position: fixed; 16 | z-index: 3; 17 | left: 0; 18 | width: @sidebar-column-width; 19 | &:not([class*='bg-']){ 20 | background: @color-bg-site; 21 | } 22 | border-right: 1px solid #ececec; 23 | &.bg--dark{ 24 | border-right: 1px solid lighten(@color-dark, 10%); 25 | } 26 | height: 100vh; 27 | overflow-y:scroll; 28 | .disable-scroll-bars; 29 | padding: @base-line-height*1.5 @base-line-height; 30 | } 31 | 32 | .nav-sidebar-column{ 33 | .logo{ 34 | max-height: @base-line-height*1.25; 35 | margin-bottom: @base-line-height/2; 36 | } 37 | .text-block{ 38 | > p{ 39 | margin-bottom: @base-line-height/2; 40 | } 41 | } 42 | .menu-vertical{ 43 | li.dropdown:not(:hover){ 44 | &:after{ 45 | opacity: .35; 46 | } 47 | } 48 | a{ 49 | &:hover{ 50 | text-decoration: none; 51 | } 52 | } 53 | } 54 | .dropdown{ 55 | .dropdown__container, .dropdown__content{ 56 | left: 0 !important; 57 | position: relative; 58 | pointer-events: all; 59 | } 60 | .dropdown__container{ 61 | &:before{ 62 | height: 0; 63 | } 64 | } 65 | .dropdown__content{ 66 | transform: none !important; 67 | box-shadow: none; 68 | -webkit-box-shadow: none; 69 | padding-top: @base-line-height/4; 70 | padding-right: 0; 71 | padding-left: @base-line-height/4; 72 | background: none !important; 73 | } 74 | .menu-vertical{ 75 | li.dropdown{ 76 | &:after{ 77 | right: @base-line-height; 78 | } 79 | } 80 | } 81 | &:not(.dropdown--active){ 82 | .dropdown__container{ 83 | display: none; 84 | } 85 | } 86 | &.dropdown--hover{ 87 | &:hover{ 88 | > .dropdown__container{ 89 | display: block; 90 | } 91 | } 92 | } 93 | } 94 | .social-list{ 95 | margin-bottom: @base-line-height/2; 96 | } 97 | } 98 | 99 | body.dropdowns--hover{ 100 | .nav-sidebar-column{ 101 | .dropdown{ 102 | &:hover{ 103 | > .dropdown__container{ 104 | display: block; 105 | } 106 | } 107 | } 108 | } 109 | } 110 | 111 | .nav-sidebar-column-toggle{ 112 | transition: all .3s ease; 113 | left: 0; 114 | width: @base-line-height*2; 115 | height: @base-line-height*2; 116 | background: @color-bg-site; 117 | text-align: center; 118 | position: fixed; 119 | z-index: 4; 120 | cursor: pointer; 121 | border-radius: 0 0 6px 0; 122 | box-shadow: 2px 1px 4px rgba(0,0,0,0.1); 123 | > i{ 124 | transition: all .3s ease; 125 | font-size: @h3-size; 126 | position: relative; 127 | top: 11px; 128 | } 129 | &:not(.toggled-class){ 130 | > i{ 131 | opacity: .5; 132 | } 133 | } 134 | &.toggled-class{ 135 | i{ 136 | &:before{ 137 | content: '\e80b'; 138 | } 139 | } 140 | } 141 | } 142 | 143 | @media all and (max-width: 990px){ 144 | .nav-sidebar-column{ 145 | transition: all .3s ease; 146 | left: -@sidebar-column-width; 147 | box-shadow: 2px 0px 4px rgba(0,0,0,0); 148 | &.active{ 149 | left: 0; 150 | box-shadow: 2px 0px 4px rgba(0,0,0,0.1); 151 | } 152 | } 153 | .nav-sidebar-column-toggle{ 154 | &.toggled-class{ 155 | left: @sidebar-column-width; 156 | } 157 | } 158 | .nav-container{ 159 | &.nav-container--sidebar{ 160 | + .main-container{ 161 | width: 100%; 162 | float: none; 163 | } 164 | } 165 | } 166 | } 167 | 168 | .nav-container{ 169 | &.nav-container--right{ 170 | .nav-sidebar-column{ 171 | right: 0; 172 | left: auto; 173 | } 174 | +.main-container{ 175 | float: left; 176 | } 177 | .nav-sidebar-column-toggle{ 178 | left: auto; 179 | right: 0; 180 | border-radius: 0 0 0 6px; 181 | box-shadow: -2px 1px 4px rgba(0,0,0,0.1); 182 | } 183 | } 184 | } 185 | 186 | @media all and (max-width: 990px){ 187 | .nav-container{ 188 | &.nav-container--right{ 189 | .nav-sidebar-column{ 190 | right: -@sidebar-column-width; 191 | left: auto; 192 | &.active{ 193 | left: auto; 194 | right: 0; 195 | box-shadow: -2px 0px 4px rgba(0,0,0,0.1); 196 | } 197 | } 198 | .nav-sidebar-column-toggle{ 199 | &.toggled-class{ 200 | left: auto; 201 | right: @sidebar-column-width; 202 | } 203 | } 204 | } 205 | } 206 | } -------------------------------------------------------------------------------- /less/theme_components/navigation-sidebar.less: -------------------------------------------------------------------------------- 1 | /*! -- Stack Nav Side Menu -- */ 2 | 3 | .notification.side-menu{ 4 | z-index: 9999; 5 | background: @color-bg-site; 6 | padding-top: @base-line-height; 7 | margin: 0; 8 | height: 100%; 9 | .box-shadow-wide; 10 | width: @base-line-height*15; 11 | .side-menu__module{ 12 | overflow: hidden; 13 | padding: @base-line-height*1.5; 14 | +hr{ 15 | &:not(:last-child){ 16 | margin: 0; 17 | } 18 | } 19 | } 20 | .menu-vertical{ 21 | li{ 22 | a{ 23 | font-size: @h4-size; 24 | line-height: @h4-line-height; 25 | &:hover{ 26 | text-decoration: none; 27 | } 28 | } 29 | } 30 | } 31 | .btn{ 32 | &:not(:last-child){ 33 | margin-bottom: @base-line-height; 34 | } 35 | + ul.list--loose{ 36 | margin-top: @base-line-height/2; 37 | } 38 | } 39 | .notification-close-cross{ 40 | top: @base-line-height/2; 41 | right: @base-line-height*1.5; 42 | margin-top: 8px; 43 | } 44 | .social-list{ 45 | &:not(:first-child){ 46 | margin-top: @base-line-height; 47 | } 48 | } 49 | } 50 | 51 | .menu-toggle.pos-fixed{ 52 | position: fixed; 53 | right: @base-line-height * 3; 54 | animation: fadeInDown .3s ease forwards; 55 | } 56 | 57 | @media all and (min-width: 768px){ 58 | .side-menu{ 59 | .side-menu__module{ 60 | span.type--fine-print{ 61 | position: relative; 62 | top: 8px; 63 | } 64 | } 65 | } 66 | } 67 | 68 | @media all and (max-width: 767px){ 69 | .side-menu{ 70 | width: 100%; 71 | .side-menu__module{ 72 | .float-right,.float-left{ 73 | display: block; 74 | } 75 | } 76 | } 77 | } -------------------------------------------------------------------------------- /less/theme_components/navigation-stacked.less: -------------------------------------------------------------------------------- 1 | /*! -- Stack Nav Stacked -- */ 2 | 3 | .bar-stacked{ 4 | .logo{ 5 | margin-bottom: @base-line-height*2; 6 | } 7 | } 8 | 9 | -------------------------------------------------------------------------------- /less/theme_components/navigation-utility.less: -------------------------------------------------------------------------------- 1 | /*! -- Stack Nav Utility -- */ 2 | 3 | .nav-utility{ 4 | padding: @base-line-height/2 0; 5 | .nav-utility__module{ 6 | font-size: 0.85714285714286em; 7 | a{ 8 | color: @color-body; 9 | font-weight: normal; 10 | i{ 11 | .transition(0.3s,ease); 12 | display: inline-block; 13 | } 14 | &:hover{ 15 | i{ 16 | .scale(1.5); 17 | } 18 | } 19 | } 20 | &.right{ 21 | &:not(:last-child){ 22 | margin-left: 2.16666666666667em; 23 | } 24 | } 25 | } 26 | } 27 | 28 | .utility-toggle{ 29 | display: inline-block; 30 | cursor: pointer; 31 | width: 3px; 32 | height: 3px; 33 | position: relative; 34 | bottom: 8px; 35 | border-radius: 50%; 36 | background: @color-dark; 37 | &:before, &:after{ 38 | content: ''; 39 | width: 3px; 40 | height: 3px; 41 | border-radius: 50%; 42 | position: absolute; 43 | background: @color-dark; 44 | } 45 | &:before{ 46 | top: 6px; 47 | } 48 | &:after{ 49 | top: 12px; 50 | } 51 | } -------------------------------------------------------------------------------- /less/theme_components/notifications.less: -------------------------------------------------------------------------------- 1 | /*! -- Stack Notifications -- */ 2 | 3 | .notification{ 4 | box-shadow: none; 5 | &:not([class*='bg--']){ 6 | background: none; 7 | } 8 | >.boxed{ 9 | margin: 0; 10 | } 11 | >.feature, .feature__body{ 12 | margin-bottom: 0; 13 | } 14 | } 15 | 16 | 17 | .notification[class*='col-']{ 18 | margin: 0; 19 | .boxed{ 20 | border-radius: 0; 21 | } 22 | } 23 | 24 | .search-box{ 25 | width: 100%; 26 | margin: 0; 27 | &.notification--reveal{ 28 | z-index: 9999; 29 | } 30 | padding: @base-line-height; 31 | .notification-close-cross{ 32 | top: @base-line-height*1.25; 33 | right: @base-line-height; 34 | } 35 | .box-shadow; 36 | } 37 | 38 | .notification-close-cross{ 39 | &.notification-close-cross--circle{ 40 | background: #222; 41 | width: 2em; 42 | height: 2em; 43 | text-align: center; 44 | border-radius: 50%; 45 | color: #fff; 46 | } 47 | } -------------------------------------------------------------------------------- /less/theme_components/portfolio.less: -------------------------------------------------------------------------------- 1 | /*! -- Stack Portfolio -- */ 2 | 3 | .project-thumb{ 4 | > a{ 5 | display: block; 6 | } 7 | &:not(.hover-element){ 8 | > a{ 9 | .transition(0.3s,ease); 10 | margin-bottom: @base-line-height; 11 | &:hover{ 12 | opacity: .85; 13 | } 14 | } 15 | } 16 | &.hover-element{ 17 | margin: 0; 18 | > a{ 19 | height: @base-line-height*13; 20 | text-decoration: none; 21 | font-weight: normal; 22 | } 23 | .background-image-holder{ 24 | .transition(0.5s,ease-out); 25 | } 26 | .hover-element__reveal{ 27 | .project-thumb__title{ 28 | padding: @base-line-height; 29 | z-index: 2; 30 | position: relative; 31 | color: #fff; 32 | h5{ 33 | margin: 0; 34 | } 35 | } 36 | } 37 | &.hover--active{ 38 | .transition(0.3s,ease); 39 | &:hover{ 40 | opacity: .85; 41 | } 42 | } 43 | &:not(.hover--active)[data-scrim-top]{ 44 | .hover-element__reveal{ 45 | .transition(0.5s,ease); 46 | .translate3d(0,-100px,0); 47 | } 48 | &:hover{ 49 | .hover-element__reveal{ 50 | .translate3d(0,0,0); 51 | } 52 | } 53 | } 54 | [data-scrim-top]{ 55 | &:before{ 56 | height: 100%; 57 | } 58 | } 59 | } 60 | h4{ 61 | margin-bottom: 0; 62 | } 63 | &.height-40{ 64 | min-height: 350px; 65 | } 66 | } 67 | 68 | @media all and (max-width: 767px){ 69 | .project-thumb{ 70 | &.height-40{ 71 | height: 350px; 72 | min-width: 100%; 73 | } 74 | } 75 | } 76 | 77 | @media all and (min-width: 768px){ 78 | .col-xs-12:not(.col-sm-6){ 79 | .project-thumb{ 80 | &.hover-element{ 81 | >a{ 82 | height: @base-line-height*25; 83 | } 84 | } 85 | } 86 | } 87 | } 88 | 89 | .project-thumb{ 90 | &.border--round{ 91 | .background-image-holder{ 92 | border-radius: 6px; 93 | } 94 | >a{ 95 | border-radius: 6px; 96 | overflow: hidden; 97 | } 98 | &:before{ 99 | border-radius: 6px; 100 | overflow: hidden; 101 | } 102 | } 103 | } 104 | 105 | .col-md-4{ 106 | .project-thumb{ 107 | > a{ 108 | &:not(.imagebg){ 109 | margin-bottom: @base-line-height/2; 110 | } 111 | } 112 | } 113 | } -------------------------------------------------------------------------------- /less/theme_components/pricing.less: -------------------------------------------------------------------------------- 1 | /*! -- Stack Pricing -- */ 2 | 3 | .pricing{ 4 | .transition(0.3s,ease); 5 | position: relative; 6 | h3{ 7 | &:first-child{ 8 | margin: 0; 9 | } 10 | } 11 | .label{ 12 | top: @base-line-height*1.5; 13 | right: @base-line-height*1.5; 14 | } 15 | .h2{ 16 | margin-bottom: 0.3939393939394em; 17 | } 18 | ul{ 19 | li{ 20 | &:not(:last-child){ 21 | margin-bottom: @base-line-height/4; 22 | } 23 | .checkmark{ 24 | +span{ 25 | position: relative; 26 | bottom: 3px; 27 | } 28 | } 29 | } 30 | } 31 | &:hover{ 32 | .box-shadow; 33 | } 34 | .h1{ 35 | font-size: 4.21428571428571em; 36 | line-height: 1.10169491525424em; 37 | margin-bottom: 0.22033898305085em; 38 | .pricing__dollar{ 39 | font-size: 0.51020408163265em; 40 | position: relative; 41 | bottom: 20px; 42 | } 43 | } 44 | .feature-6{ 45 | p{ 46 | min-height: @base-line-height*3; 47 | } 48 | } 49 | } 50 | 51 | .pricing-1{ 52 | .btn{ 53 | &:last-child{ 54 | position: absolute; 55 | width: 100%; 56 | bottom: 0; 57 | left: 0; 58 | border-radius: 0 0 @button-radius @button-radius; 59 | padding: @base-line-height/2 0; 60 | margin: 0; 61 | &:hover{ 62 | transform: none !important; 63 | } 64 | } 65 | } 66 | ul{ 67 | margin-bottom: @base-line-height*3; 68 | } 69 | p{ 70 | &:first-of-type{ 71 | margin-top: @base-line-height; 72 | } 73 | &:last-of-type{ 74 | margin-bottom: @base-line-height*3; 75 | } 76 | min-height: @base-line-height*3; 77 | } 78 | img{ 79 | +p{ 80 | &:first-of-type{ 81 | margin-top: 0; 82 | } 83 | } 84 | } 85 | } 86 | 87 | @media all and (min-width: 991px){ 88 | .pricing-2{ 89 | ul{ 90 | &:first-child{ 91 | margin-top: @base-line-height*2.5; 92 | } 93 | } 94 | } 95 | } 96 | 97 | @media all and (max-width: 990px){ 98 | .pricing-2{ 99 | text-align: center; 100 | ul{ 101 | &:first-child{ 102 | margin-top: @base-line-height; 103 | } 104 | } 105 | } 106 | } 107 | 108 | .pricing-3{ 109 | border: 1px solid #ececec; 110 | border-radius: 6px; 111 | .pricing__head{ 112 | margin: 0; 113 | +.btn{ 114 | display: block; 115 | border-radius: 0; 116 | padding: @base-line-height/2 0; 117 | } 118 | border-bottom: 1px solid #ececec; 119 | } 120 | ul{ 121 | border-radius: 0 0 6px 6px; 122 | li{ 123 | padding: @base-line-height/2 0; 124 | &:not(:last-child){ 125 | border-bottom: 1px solid #ececec; 126 | margin: 0; 127 | } 128 | } 129 | &:last-child{ 130 | margin: 0; 131 | } 132 | } 133 | } 134 | 135 | @media all and (max-width: 990px){ 136 | .pricing-3{ 137 | margin-bottom: @base-line-height; 138 | } 139 | } 140 | 141 | @media all and (min-width: 768px){ 142 | .pricing-section-1{ 143 | .pricing{ 144 | &:not(.boxed--emphasis){ 145 | left: @base-line-height/2; 146 | } 147 | &.boxed--emphasis{ 148 | right: @base-line-height/2; 149 | } 150 | } 151 | } 152 | } 153 | 154 | @media all and (min-width: 990px){ 155 | .pricing-section-2{ 156 | div[class*='col-']{ 157 | padding: 0; 158 | &:not(:first-child):not(:last-child){ 159 | .pricing__head{ 160 | border-radius: 0; 161 | } 162 | } 163 | &:first-child{ 164 | .pricing{ 165 | border-radius: 6px 0 0 6px; 166 | .pricing__head{ 167 | border-radius: 6px 0 0 0; 168 | } 169 | } 170 | } 171 | &:last-child{ 172 | .pricing{ 173 | .pricing__head{ 174 | border-radius: 0 6px 0 0; 175 | } 176 | border-radius: 0 6px 6px 6px; 177 | border-right: 1px solid #ececec; 178 | } 179 | } 180 | } 181 | .pricing{ 182 | border: 1px solid #ececec; 183 | border-radius: 0 0 0 6px; 184 | border-right: none; 185 | &:hover{ 186 | box-shadow: none; 187 | } 188 | ul{ 189 | margin: 0; 190 | } 191 | } 192 | } 193 | } 194 | 195 | .pricing-section-2{ 196 | &.bg--dark{ 197 | .pricing, .pricing .pricing__head, .pricing ul li:not(:last-child), div[class*='col-']:last-child .pricing{ 198 | border-color: lighten(@color-dark, 10%); 199 | } 200 | } 201 | &.imagebg{ 202 | .pricing, .pricing .pricing__head, .pricing ul li:not(:last-child), div[class*='col-']:last-child .pricing{ 203 | border-color: rgba(255,255,255,.2); 204 | } 205 | } 206 | } -------------------------------------------------------------------------------- /less/theme_components/progress-horizontal.less: -------------------------------------------------------------------------------- 1 | /*! -- Stack Progress Horizontal -- */ 2 | 3 | .progress-horizontal{ 4 | &:not(:last-child){ 5 | margin-bottom: @base-line-height; 6 | } 7 | &.progress-horizontal--lg{ 8 | .progress-horizontal__bar{ 9 | height: @base-line-height; 10 | } 11 | } 12 | &.progress-horizontal--sm{ 13 | .progress-horizontal__bar{ 14 | height: @base-line-height/4; 15 | } 16 | } 17 | } 18 | 19 | .progress-horizontal__bar{ 20 | height: @base-line-height/2; 21 | border-radius: 100px; 22 | background: @color-bg-secondary; 23 | border: 1px solid rgba(0,0,0,0.1); 24 | &:not(:last-child){ 25 | margin-bottom: @base-line-height/4; 26 | } 27 | } 28 | 29 | .progress-horizontal__progress{ 30 | background: @color-primary; 31 | border-radius: 100px; 32 | } 33 | 34 | .imagebg{ 35 | .progress-horizontal__bar{ 36 | background: rgba(20,20,20,0.2); 37 | border: none; 38 | } 39 | } -------------------------------------------------------------------------------- /less/theme_components/radials.less: -------------------------------------------------------------------------------- 1 | .radial{ 2 | margin-left: auto; 3 | margin-right: auto; 4 | .radial__label{ 5 | transition: opacity .3s ease; 6 | -webkit-transition: opacity .3s ease; 7 | } 8 | &:not(.radial--active){ 9 | .radial__label{ 10 | opacity: 0; 11 | } 12 | } 13 | &:not(:last-child){ 14 | margin-bottom: @base-line-height; 15 | } 16 | } 17 | 18 | @media all and (max-width: 767px){ 19 | .radial{ 20 | margin-bottom: @base-line-height; 21 | } 22 | } -------------------------------------------------------------------------------- /less/theme_components/rules.less: -------------------------------------------------------------------------------- 1 | /*! -- Stack Rules -- */ 2 | 3 | hr{ 4 | &:first-child{ 5 | margin-top: 0; 6 | } 7 | &.short{ 8 | width: @base-line-height*1.5; 9 | border-color: @color-primary; 10 | } 11 | &[data-title]{ 12 | margin: @base-line-height*1.5 0; 13 | text-align: center; 14 | &:before{ 15 | content: attr(data-title); 16 | background: @color-bg-site; 17 | position: relative; 18 | bottom:14px; 19 | padding: @base-line-height/2; 20 | font-style: italic; 21 | } 22 | } 23 | } 24 | 25 | .bg--dark,.imagebg,.bg--primary{ 26 | hr:not(.short){ 27 | opacity: .3; 28 | } 29 | } -------------------------------------------------------------------------------- /less/theme_components/sections.less: -------------------------------------------------------------------------------- 1 | /*! -- Stack Sections -- */ 2 | 3 | section{ 4 | &:not(.unpad):not(.imagebg):not([class*='bg--']):not(.imageblock):not(.unpad--bottom):not(.border--bottom):not(.space--xxs){ 5 | + section:not(.unpad):not(.imagebg):not([class*='bg--']):not(.imageblock):not(.border--bottom):not(.space--xxs){ 6 | padding-top: 0; 7 | } 8 | } 9 | &:not(.unpad):not(.imagebg):not([class*='bg--']):not(.imageblock):not(.unpad--bottom):not(.border--bottom){ 10 | +footer:not(.unpad):not(.imagebg):not([class*='bg--']):not(.imageblock):not(.unpad--bottom):not(.border--bottom){ 11 | padding-top: 0; 12 | } 13 | } 14 | &:not(.imagebg):not([class*='bg-']){ 15 | +section{ 16 | &.bg--secondary{ 17 | border-top: 1px solid darken(@color-bg-secondary, 6%); 18 | } 19 | } 20 | } 21 | &.bg--secondary{ 22 | &:not(.imagebg){ 23 | +section:not(.imagebg):not([class*='bg-']){ 24 | border-top: 1px solid darken(@color-bg-secondary, 6%); 25 | } 26 | } 27 | &:not(.unpad):not(.imageblock):not(.unpad--bottom):not(.border--bottom){ 28 | +section.bg--secondary{ 29 | padding-top: 0; 30 | } 31 | } 32 | +footer{ 33 | &:not(.bg--dark):not(.bg--secondary){ 34 | border-top: 1px solid darken(@color-bg-secondary, 6%); 35 | } 36 | } 37 | } 38 | &.bg--dark{ 39 | +section.bg--dark{ 40 | padding-top: 0; 41 | } 42 | &:last-of-type{ 43 | +footer.bg--dark{ 44 | background: darken(@color-dark, 4%) 45 | } 46 | } 47 | } 48 | &.border--bottom{ 49 | &:not([data-gradient-bg]){ 50 | border-bottom: 1px solid #ececec; 51 | } 52 | } 53 | &.unpad{ 54 | overflow: hidden; 55 | } 56 | &:not([class*='bg--']){ 57 | +footer{ 58 | &.bg--secondary{ 59 | border-top: 1px solid darken(@color-bg-secondary, 6%); 60 | } 61 | } 62 | } 63 | &.text-center{ 64 | div[class*='col-']{ 65 | &:first-child:last-child{ 66 | margin: 0 auto; 67 | float: none; 68 | } 69 | } 70 | } 71 | } 72 | 73 | .section--overlap{ 74 | z-index: 2; 75 | position: relative; 76 | } -------------------------------------------------------------------------------- /less/theme_components/shop.less: -------------------------------------------------------------------------------- 1 | /*! -- Stack Shop -- */ 2 | 3 | .cart-form{ 4 | button{ 5 | &[type="submit"]{ 6 | margin-top: @base-line-height; 7 | } 8 | } 9 | } 10 | 11 | .cart-total{ 12 | > div{ 13 | overflow: hidden; 14 | } 15 | } 16 | 17 | @media all and (min-width: 768px){ 18 | .cart-total{ 19 | margin-top: @base-line-height*2; 20 | } 21 | .cart-customer-details{ 22 | margin-top: @base-line-height*4; 23 | } 24 | } 25 | 26 | @media all and (max-width: 767px){ 27 | .cart-total{ 28 | margin-top: @base-line-height; 29 | } 30 | } 31 | 32 | .cart-customer-details{ 33 | div[class*='col-']{ 34 | margin-top: @base-line-height/4; 35 | } 36 | .input-checkbox{ 37 | margin: @base-line-height 0; 38 | + span{ 39 | bottom: 38px; 40 | } 41 | } 42 | } 43 | 44 | .product{ 45 | margin-bottom: @base-line-height/2; 46 | img{ 47 | margin-bottom: @base-line-height/2; 48 | .transition(0.3s,ease); 49 | backface-visibility: hidden; 50 | } 51 | a:hover{ 52 | img{ 53 | .translate3d(0,-5px,0); 54 | } 55 | } 56 | .label+img{ 57 | margin-top: @base-line-height*1.5; 58 | } 59 | h5{ 60 | display: inline-block; 61 | margin-bottom: 0; 62 | margin-right: @base-line-height/4; 63 | } 64 | .h4{ 65 | &:first-child{ 66 | clear: left; 67 | } 68 | margin-bottom: 0; 69 | } 70 | .product__controls{ 71 | overflow: hidden; 72 | margin-bottom: @base-line-height/2; 73 | label, button{ 74 | position: relative; 75 | top: 6px; 76 | } 77 | } 78 | &.product--tile{ 79 | padding: @base-line-height; 80 | border-radius: 6px; 81 | } 82 | } 83 | 84 | @media all and(min-width: 1200px){ 85 | .product{ 86 | .btn--cart{ 87 | position: absolute; 88 | right: @base-line-height; 89 | bottom: @base-line-height; 90 | } 91 | } 92 | } 93 | 94 | .col-sm-6:not(.col-md-3){ 95 | .product{ 96 | text-align: center; 97 | } 98 | } 99 | 100 | .col-md-3{ 101 | .product--tile{ 102 | h5{ 103 | display: block; 104 | } 105 | } 106 | } 107 | 108 | .masonry--tiles{ 109 | padding: 10px; 110 | .masonry__item:not(:empty){ 111 | padding: 0 6px; 112 | margin-bottom: 12px; 113 | .product--tile{ 114 | margin: 0; 115 | .label{ 116 | top: @base-line-height; 117 | right: @base-line-height*1.5; 118 | } 119 | } 120 | } 121 | } -------------------------------------------------------------------------------- /less/theme_components/sliders.less: -------------------------------------------------------------------------------- 1 | /*! -- Stack Sliders -- */ 2 | 3 | .flickity-prev-next-button{ 4 | .transition(0.3s,ease); 5 | border-radius: 0; 6 | background: @color-dark; 7 | width: @base-line-height*1.5; 8 | height: @base-line-height*3; 9 | &:not(:hover){ 10 | opacity: .5; 11 | } 12 | &:hover{ 13 | background: @color-dark; 14 | } 15 | &.previous{ 16 | left: 0; 17 | } 18 | &.next{ 19 | right: 0; 20 | } 21 | &:before{ 22 | color: #fff; 23 | } 24 | } 25 | 26 | .slider{ 27 | &.slider--inline-arrows{ 28 | .flickity-prev-next-button{ 29 | background: none; 30 | &:before{ 31 | font-size: @h3-size; 32 | color: @color-dark; 33 | content: '\e802'; 34 | } 35 | &.previous{ 36 | &:before{ 37 | content: '\e801'; 38 | } 39 | } 40 | } 41 | } 42 | &.slider--columns{ 43 | .previous{ 44 | left: 15px; 45 | } 46 | .next{ 47 | right: 15px; 48 | } 49 | } 50 | &.border--round{ 51 | .slides{ 52 | li{ 53 | border-radius: 6px; 54 | overflow: hidden; 55 | } 56 | } 57 | } 58 | &.boxed--border{ 59 | .slides{ 60 | li{ 61 | border: 1px solid #ececec; 62 | } 63 | } 64 | } 65 | .slides{ 66 | li{ 67 | .feature:not(.feature-9){ 68 | margin-bottom: 0; 69 | } 70 | } 71 | } 72 | } 73 | 74 | .slide{ 75 | .boxed{ 76 | &:last-child{ 77 | margin-bottom: 0; 78 | } 79 | } 80 | &:not([class*='col-']){ 81 | >img{ 82 | &:only-child{ 83 | width: 100%; 84 | } 85 | } 86 | } 87 | } 88 | 89 | .bg--dark,.bg--primary,.imagebg:not(.image--light){ 90 | .slider{ 91 | &.slider--inline-arrows{ 92 | .flickity-prev-next-button{ 93 | &:before{ 94 | color: #fff; 95 | } 96 | } 97 | } 98 | } 99 | } 100 | 101 | @media all and (max-width: 990px){ 102 | .flickity-prev-next-button{ 103 | display: none; 104 | } 105 | } 106 | 107 | @media all and (min-width: 768px){ 108 | h2+.slider,.h2+.slider{ 109 | margin-top: @base-line-height*2; 110 | } 111 | } 112 | 113 | .slider.slider--ken-burns:not(.parallax) .slide.is-selected{ 114 | > .background-image-holder, > img:only-child{ 115 | animation: kenBurns 15s ease alternate infinite; 116 | -webkit-animation: kenBurns 15s ease alternate infinite; 117 | } 118 | } -------------------------------------------------------------------------------- /less/theme_components/switchable.less: -------------------------------------------------------------------------------- 1 | /*! -- Stack Switchable Sections -- */ 2 | 3 | @media all and (min-width: 768px){ 4 | .switchable{ 5 | .container > .row{ 6 | flex-flow: row-reverse; 7 | } 8 | &.switchable--switch{ 9 | .container > .row{ 10 | flex-flow: row; 11 | } 12 | } 13 | } 14 | } 15 | 16 | .switchable{ 17 | .switchable__text{ 18 | margin-top: @base-line-height; 19 | } 20 | [class*='col-']{ 21 | &:first-child{ 22 | .switchable__text{ 23 | margin-bottom: @base-line-height*1.5; 24 | } 25 | } 26 | } 27 | } 28 | 29 | .section--overlap{ 30 | .row{ 31 | position: relative; 32 | margin-top: -@base-line-height*7; 33 | } 34 | } 35 | 36 | @media all and (max-width: 990px){ 37 | .switchable{ 38 | .switchable__text{ 39 | margin-top: 0; 40 | } 41 | } 42 | } 43 | 44 | 45 | @media all and (max-width: 767px){ 46 | .switchable{ 47 | .switchable__text{ 48 | margin-top: @base-line-height; 49 | } 50 | .imageblock__content[class*='col-']{ 51 | float: none !important; 52 | } 53 | .row{ 54 | > div[class*='col-']{ 55 | float: none !important; 56 | &:last-child:not(:only-child){ 57 | margin-top: @base-line-height; 58 | } 59 | } 60 | } 61 | } 62 | } -------------------------------------------------------------------------------- /less/theme_components/tables.less: -------------------------------------------------------------------------------- 1 | /*! -- Stack Tables -- */ 2 | 3 | table{ 4 | width: 100%; 5 | border-collapse: separate; 6 | th,td{ 7 | padding: @base-line-height/2; 8 | } 9 | th{ 10 | background: @color-bg-secondary; 11 | color: @color-dark; 12 | } 13 | tr{ 14 | &:not(:last-of-type){ 15 | border-bottom: 1px solid #ececec; 16 | } 17 | } 18 | &.border--round{ 19 | border-radius: 6px; 20 | border: 1px solid #ececec; 21 | } 22 | } 23 | 24 | .table--alternate-column{ 25 | th{ 26 | &:nth-child(odd){ 27 | background: none; 28 | } 29 | } 30 | td{ 31 | &:nth-child(even){ 32 | background: @color-bg-secondary; 33 | } 34 | } 35 | } 36 | 37 | .table--alternate-row{ 38 | tbody{ 39 | tr{ 40 | &:nth-child(even){ 41 | background: @color-bg-secondary; 42 | } 43 | } 44 | } 45 | } 46 | 47 | .bg--dark{ 48 | table{ 49 | &.border--round{ 50 | border-radius: 6px; 51 | border: 1px solid lighten(@color-dark, 10%); 52 | } 53 | th{ 54 | background: lighten(@color-dark, 10%); 55 | color: #fff; 56 | } 57 | } 58 | .table--alternate-row{ 59 | tbody{ 60 | tr{ 61 | &:nth-child(even){ 62 | background: lighten(@color-dark, 5%) 63 | } 64 | } 65 | } 66 | } 67 | } -------------------------------------------------------------------------------- /less/theme_components/tabs.less: -------------------------------------------------------------------------------- 1 | /*! -- Stack Tabs -- */ 2 | 3 | .tabs-container{ 4 | &.tabs--vertical{ 5 | overflow: hidden; 6 | .tabs{ 7 | width: 25%; 8 | float: left; 9 | li{ 10 | display: block; 11 | &:not(:last-child){ 12 | border-right: none; 13 | border-bottom: 1px solid #ECECEC; 14 | } 15 | } 16 | } 17 | .tabs-content{ 18 | width: 70%; 19 | float: right; 20 | margin-top: 0; 21 | > li{ 22 | &:not(.active){ 23 | .tab__content{ 24 | animation: fadeOutUp .5s ease forwards; 25 | -webkit-animation: fadeOutUp .5s ease forwards; 26 | } 27 | } 28 | &.active{ 29 | .tab__content{ 30 | animation: fadeInUp .5s ease forwards; 31 | -webkit-animation: fadeInUp .5s ease forwards; 32 | backface-visibility: hidden; 33 | } 34 | } 35 | } 36 | } 37 | &.tabs--icons{ 38 | .tabs{ 39 | width: 15%; 40 | text-align: center; 41 | } 42 | .tabs-content{ 43 | width: 80%; 44 | } 45 | } 46 | } 47 | } 48 | 49 | @media all and (max-width: 767px){ 50 | .tabs-container{ 51 | &.tabs--vertical{ 52 | .tabs,.tabs-content{ 53 | width: 100%; 54 | float: none; 55 | } 56 | .tabs{ 57 | margin-bottom: @base-line-height; 58 | } 59 | .tabs-content{ 60 | > li{ 61 | &:not(.active){ 62 | .tab__content{ 63 | animation: fadeOutRight .5s ease forwards; 64 | -webkit-animation: fadeOutRight .5s ease forwards; 65 | } 66 | } 67 | &.active{ 68 | .tab__content{ 69 | animation: fadeInLeft .5s ease forwards; 70 | -webkit-animation: fadeInLeft .5s ease forwards; 71 | backface-visibility: hidden; 72 | } 73 | } 74 | } 75 | } 76 | } 77 | } 78 | } 79 | 80 | .tabs{ 81 | display: inline-block; 82 | border: 1px solid #ECECEC; 83 | border-radius: 6px; 84 | margin-bottom: @base-line-height; 85 | li{ 86 | .transition(0.3s,ease); 87 | padding: @base-line-height/2 @base-line-height; 88 | &:not(:last-child){ 89 | border-right: 1px solid #ECECEC; 90 | } 91 | &.active{ 92 | opacity: 1; 93 | .tab__title{ 94 | color: @color-primary; 95 | span{ 96 | color: @color-primary; 97 | } 98 | } 99 | } 100 | &:not(.active){ 101 | opacity: .5; 102 | } 103 | &:hover{ 104 | opacity: 1; 105 | cursor: pointer; 106 | } 107 | } 108 | .tab__title{ 109 | .transition(0.3s,ease); 110 | &:not(.btn){ 111 | padding-right: 0; 112 | padding-left: 0; 113 | } 114 | i+span{ 115 | margin-top: @base-line-height/4; 116 | display: inline-block; 117 | margin-bottom: 0; 118 | } 119 | } 120 | } 121 | 122 | .bg--primary{ 123 | .tabs{ 124 | border-color: #fff; 125 | li{ 126 | &.active{ 127 | .tab__title{ 128 | color: #fff; 129 | span{ 130 | color: #fff; 131 | } 132 | } 133 | } 134 | &:not(:last-child){ 135 | border-color: #fff; 136 | } 137 | } 138 | } 139 | } 140 | 141 | @media all and (min-width: 768px){ 142 | .tabs{ 143 | &.tabs--spaced{ 144 | margin-bottom: @base-line-height*2; 145 | } 146 | } 147 | } 148 | 149 | .tabs-content{ 150 | position: relative; 151 | >li{ 152 | &:not(.active){ 153 | .tab__content{ 154 | position: absolute; 155 | left: 0; 156 | top: 0; 157 | display: block; 158 | opacity: 0; 159 | pointer-events: none; 160 | animation: fadeOutRight .5s ease forwards; 161 | -webkit-animation: fadeOutRight .5s ease forwards; 162 | } 163 | } 164 | &.active{ 165 | animation: fadeInLeft .5s ease forwards; 166 | -webkit-animation: fadeInLeft .5s ease forwards; 167 | backface-visibility: hidden; 168 | } 169 | } 170 | } 171 | 172 | @media all and (max-width: 767px){ 173 | .tabs{ 174 | li{ 175 | display: block; 176 | &:not(:last-child){ 177 | border-bottom: 1px solid #ECECEC; 178 | border-right: none; 179 | } 180 | } 181 | } 182 | } 183 | 184 | .tabs--folder{ 185 | .tabs{ 186 | overflow: hidden; 187 | margin-bottom: 0; 188 | border-radius: 6px 6px 0 0; 189 | border-bottom: none; 190 | > li{ 191 | border-top: 3px solid rgba(0,0,0,0); 192 | &.active{ 193 | border-top: 3px solid @color-primary; 194 | } 195 | } 196 | } 197 | .tabs-content{ 198 | overflow: hidden; 199 | position: relative; 200 | bottom: 8px; 201 | padding: @base-line-height; 202 | border: 1px solid #ECECEC; 203 | border-radius: 0 0 6px 6px; 204 | > li{ 205 | &:not(.active){ 206 | .tab__content{ 207 | top: @base-line-height; 208 | left: @base-line-height; 209 | } 210 | } 211 | } 212 | } 213 | .tab__title{ 214 | .h5{ 215 | margin: 0; 216 | display: inline-block; 217 | } 218 | .label{ 219 | position: relative; 220 | color: #fff !important; 221 | top: -2px; 222 | right: 0; 223 | margin-left: @base-line-height/4; 224 | min-width: 0; 225 | } 226 | } 227 | } -------------------------------------------------------------------------------- /less/theme_components/testimonials.less: -------------------------------------------------------------------------------- 1 | /*! -- Stack Testimonials -- */ 2 | 3 | .testimonial{ 4 | position: relative; 5 | overflow: hidden; 6 | h5{ 7 | &:nth-last-child(2){ 8 | margin: 0; 9 | } 10 | } 11 | .testimonial__image{ 12 | margin-bottom: @base-line-height; 13 | } 14 | } 15 | 16 | @media all and (min-width: 1025px){ 17 | .testimonial-1{ 18 | .switchable__text{ 19 | margin-top: @base-line-height*4; 20 | } 21 | } 22 | } 23 | 24 | .testimonial-2{ 25 | float: none; 26 | width: 100%; 27 | .testimonial__image{ 28 | img{ 29 | max-height: @base-line-height*2; 30 | float: left; 31 | margin-right: @base-line-height; 32 | } 33 | } 34 | .boxed{ 35 | width: 100%; 36 | } 37 | } 38 | 39 | .bg--secondary{ 40 | .testimonial-2{ 41 | .boxed{ 42 | background: #fff; 43 | } 44 | } 45 | } 46 | 47 | @media all and (max-width: 990px){ 48 | .testimonial-2{ 49 | p{ 50 | min-height: @base-line-height*4; 51 | } 52 | } 53 | } 54 | 55 | @media all and (max-width: 767px){ 56 | .testimonial-2{ 57 | p{ 58 | min-height: 0; 59 | } 60 | } 61 | } 62 | 63 | @media all and (min-width: 768px){ 64 | .lead{ 65 | +.testimonial-2{ 66 | margin-top: @base-line-height*2; 67 | } 68 | } 69 | } 70 | 71 | @media all and (min-width: 768px){ 72 | .testimonials-1{ 73 | .list-inline{ 74 | position: relative; 75 | top: @base-line-height/2; 76 | li{ 77 | &:not(:last-child){ 78 | margin-right: @base-line-height*2; 79 | } 80 | } 81 | } 82 | } 83 | } 84 | 85 | @media all and (max-width: 767px){ 86 | .testimonials-1{ 87 | .list-inline{ 88 | margin-top: @base-line-height; 89 | li{ 90 | margin-bottom: @base-line-height; 91 | } 92 | } 93 | } 94 | } -------------------------------------------------------------------------------- /less/theme_components/titles.less: -------------------------------------------------------------------------------- 1 | /*! -- Stack Titles -- */ 2 | 3 | .breadcrumbs{ 4 | list-style: none; 5 | li{ 6 | font-size: 0.85714285714286em; 7 | display: inline-block; 8 | &:not(:last-child){ 9 | margin-right: 1.08333333333334em; 10 | &:after{ 11 | content: '\00bb'; 12 | margin-left: 1.08333333333334em; 13 | } 14 | } 15 | a{ 16 | font-weight: normal; 17 | } 18 | } 19 | } 20 | 21 | .imagebg,.bg--primary{ 22 | .breadcrumbs{ 23 | color: #fff; 24 | a{ 25 | color: #fff; 26 | font-weight: 600; 27 | } 28 | } 29 | } 30 | 31 | .elements-title{ 32 | border-top: none !important; 33 | +.tabs-container,+section{ 34 | &:not(:nth-last-child(2)){ 35 | margin-bottom: @base-line-height*5; 36 | } 37 | } 38 | +section:not(.imagebg):not([class*='bg-']):not(.unpad){ 39 | padding-top: @base-line-height; 40 | } 41 | } -------------------------------------------------------------------------------- /less/theme_components/tooltips.less: -------------------------------------------------------------------------------- 1 | /*! -- Stack Tooltips -- */ 2 | 3 | .tooltip{ 4 | position: relative; 5 | top: 3px; 6 | display: inline-block; 7 | width: @base-line-height/1.5; 8 | height: @base-line-height/1.5; 9 | border-radius: 50%; 10 | background: @color-dark; 11 | text-align: center; 12 | cursor: pointer; 13 | .tooltip__anchor{ 14 | color: #fff; 15 | font-weight: 700; 16 | font-size: 11px; 17 | position: absolute; 18 | top: -5px; 19 | left: 6px; 20 | } 21 | .tooltip__text{ 22 | .transition(0.2s,ease); 23 | text-align: left; 24 | z-index: 10; 25 | position: absolute; 26 | width: 280px; 27 | background: @color-bg-secondary; 28 | border: 1px solid #ececec; 29 | padding: @base-line-height/3; 30 | left: @base-line-height/1.25; 31 | top: -@base-line-height/2; 32 | opacity: 0; 33 | pointer-events: none; 34 | cursor: default; 35 | .box-shadow; 36 | line-height: 20px; 37 | } 38 | &:hover{ 39 | .tooltip__text{ 40 | opacity: 1; 41 | } 42 | } 43 | &:last-child{ 44 | margin-left: @base-line-height/2; 45 | } 46 | } 47 | 48 | [data-tooltip]{ 49 | position: relative; 50 | overflow: visible; 51 | &:after{ 52 | transition: all .2s ease; 53 | content: attr(data-tooltip); 54 | position: absolute; 55 | top: -24px; 56 | left: 50%; 57 | transform: translateX(-50%); 58 | background: @color-dark; 59 | color: #fff; 60 | border: 1px solid #e7e7e7; 61 | padding: 2px 12px; 62 | pointer-events: none; 63 | white-space: nowrap; 64 | font-size: 11px; 65 | line-height: 18px; 66 | font-weight: 600; 67 | border-radius: 2px; 68 | z-index: 2; 69 | font-family: @body-font; 70 | } 71 | } 72 | 73 | [data-tooltip]:not(:hover){ 74 | &:after{ 75 | opacity: 0; 76 | } 77 | } -------------------------------------------------------------------------------- /less/theme_components/twitter.less: -------------------------------------------------------------------------------- 1 | /*! -- Stack Twitter Feeds -- */ 2 | 3 | .tweets-feed{ 4 | .interact{ 5 | display: none; 6 | } 7 | .user{ 8 | a{ 9 | &:hover{ 10 | text-decoration: none; 11 | } 12 | } 13 | img{ 14 | border-radius: 50%; 15 | } 16 | } 17 | } 18 | 19 | .tweets-feed-1{ 20 | border-radius: 6px; 21 | border: 1px solid #ececec; 22 | overflow: hidden; 23 | li{ 24 | overflow: hidden; 25 | padding: @base-line-height; 26 | padding-bottom: 0; 27 | &:not(:last-child){ 28 | border-bottom: 1px solid #ececec; 29 | } 30 | } 31 | .user{ 32 | width: 20%; 33 | float: left; 34 | img{ 35 | max-height: @base-line-height*2; 36 | margin-right: @base-line-height/4; 37 | } 38 | [data-scribe="element:name"],[data-scribe="element:screen_name"]{ 39 | display: none; 40 | } 41 | margin-bottom: @base-line-height/2; 42 | } 43 | .tweet,.timePosted{ 44 | width: 80%; 45 | float: right; 46 | } 47 | .tweet{ 48 | margin-bottom: @base-line-height/4; 49 | } 50 | .timePosted{ 51 | font-size: @h6-size; 52 | line-height: @h6-line-height; 53 | } 54 | &:not(:last-child){ 55 | +.btn{ 56 | margin-top: @base-line-height*1.5; 57 | } 58 | } 59 | } 60 | 61 | .imagebg,.bg--dark{ 62 | .tweets-feed-1{ 63 | border-color: rgba(255,255,255,.1); 64 | li{ 65 | &:not(:last-child){ 66 | border-color: rgba(255,255,255,.1); 67 | } 68 | } 69 | } 70 | } 71 | 72 | .tweets-feed-2{ 73 | .user{ 74 | display: none; 75 | } 76 | .timePosted{ 77 | display: none; 78 | } 79 | li{ 80 | &:before{ 81 | font-family: 'socicon'; 82 | content: "\e08d"; 83 | } 84 | overflow: hidden; 85 | .tweet{ 86 | width: 85%; 87 | float: right; 88 | } 89 | } 90 | } 91 | 92 | .tweets-feed.slider{ 93 | .user{ 94 | img{ 95 | display: inline-block; 96 | clear: both; 97 | margin-bottom: @base-line-height/2; 98 | } 99 | [data-scribe="element:name"]{ 100 | display: none; 101 | } 102 | [data-scribe="element:screen_name"]{ 103 | display: block; 104 | font-size: @h4-size; 105 | line-height: @h4-line-height; 106 | font-weight: normal; 107 | } 108 | } 109 | .tweet{ 110 | margin-top: 1.36842105263158em; 111 | margin-bottom: 0.68421052631579em; 112 | font-size: @h4-size; 113 | line-height: @h4-line-height; 114 | } 115 | .timePosted{ 116 | margin: 0; 117 | } 118 | &:not(:last-child){ 119 | +.btn{ 120 | margin-top: @base-line-height*1.5; 121 | } 122 | } 123 | } -------------------------------------------------------------------------------- /less/theme_components/typed-text.less: -------------------------------------------------------------------------------- 1 | /*! -- Stack Typed Text -- */ 2 | 3 | span{ 4 | +.typed-text{ 5 | &.h2{ 6 | margin-left: 4px; 7 | } 8 | &.h1{ 9 | margin-left: 6px; 10 | } 11 | } 12 | } 13 | 14 | @media all and (max-width: 767px){ 15 | .typed-text{ 16 | display: block; 17 | } 18 | .typed-headline{ 19 | h1,.h1{ 20 | margin-bottom: 0; 21 | } 22 | margin-bottom: @base-line-height; 23 | } 24 | } -------------------------------------------------------------------------------- /less/theme_components/typography.less: -------------------------------------------------------------------------------- 1 | /*! -- Stack Typography -- */ 2 | 3 | @media all and (max-width: 1024px){ 4 | html{ 5 | font-size: 80%; 6 | } 7 | } 8 | 9 | h1,.h1{ 10 | &:not(:last-child){ 11 | margin-bottom: 0.59090909090909em; 12 | } 13 | letter-spacing: -.01em; 14 | } 15 | 16 | @media all and (min-width: 768px){ 17 | h1,.h1{ 18 | &.h1--large{ 19 | font-weight: 200; 20 | font-size: 4.428571428571429em; 21 | line-height: 1.048387096774194em; 22 | &:not(:last-child){ 23 | margin-bottom: 0.419354838709677em; 24 | } 25 | &.type--uppercase{ 26 | letter-spacing: 10px; 27 | margin-right: -10px; 28 | } 29 | +p.lead{ 30 | margin-top: 2.052631578947368em; 31 | } 32 | } 33 | } 34 | } 35 | 36 | h2,.h2{ 37 | margin-bottom: 0.78787878787879em; 38 | } 39 | 40 | h3,.h3{ 41 | margin-bottom: 1.04em; 42 | strong{ 43 | font-weight: 400; 44 | } 45 | } 46 | 47 | blockquote{ 48 | &:not(:last-child){ 49 | margin-bottom: 1.04em; 50 | } 51 | font-family: 'Merriweather', serif; 52 | font-style: italic; 53 | font-weight: 300; 54 | > p{ 55 | font-size: 1em !important; 56 | } 57 | } 58 | 59 | h4,.h4{ 60 | margin-bottom: 1.36842105263158em; 61 | font-weight: 400; 62 | &.inline-block{ 63 | +.h4{ 64 | &.inline-block:not(.typed-text){ 65 | margin-left: 0.68421052631579em; 66 | } 67 | } 68 | } 69 | } 70 | 71 | h5,.h5{ 72 | font-weight: 600; 73 | &:not(:last-child){ 74 | margin-bottom: @base-line-height; 75 | } 76 | } 77 | 78 | h6,.h6{ 79 | &:not(:last-child){ 80 | margin-bottom: 2.16666666666667em; 81 | } 82 | font-weight: 700; 83 | &.type--uppercase{ 84 | letter-spacing: 1px; 85 | margin-right: -1px; 86 | } 87 | } 88 | 89 | span{ 90 | &.h1,&.h2,&.h3,&.h4,&.h5,&.h6{ 91 | &:not(.inline-block){ 92 | display: block; 93 | } 94 | } 95 | } 96 | 97 | b{ 98 | font-weight: 600; 99 | } 100 | 101 | hr{ 102 | border-color: #ECECEC; 103 | } 104 | 105 | .bg--dark{ 106 | hr{ 107 | border-color: lighten(@color-dark, 20%) 108 | } 109 | } 110 | 111 | [class*='bg-']:not(.bg--white):not(.bg--secondary), [class*='imagebg']:not(.image--light){ 112 | p{ 113 | opacity: .9; 114 | } 115 | } 116 | 117 | .lead{ 118 | font-weight: 400; 119 | color: lighten(@color-body, 10%); 120 | &:not(:last-child){ 121 | margin-bottom: 1.36842105263158em; 122 | } 123 | +.btn{ 124 | &:last-child{ 125 | margin-top: @base-line-height/2; 126 | } 127 | } 128 | } 129 | 130 | p{ 131 | &:last-child{ 132 | margin-bottom: 0; 133 | } 134 | strong{ 135 | color: @color-dark; 136 | } 137 | } 138 | 139 | pre{ 140 | padding: @base-line-height/2; 141 | background: @color-bg-secondary; 142 | border: 1px solid #ececec; 143 | border-radius: 6px; 144 | line-height: 20px; 145 | max-height: 500px; 146 | } 147 | 148 | .bg--secondary{ 149 | > pre{ 150 | background: darken(@color-bg-secondary, 2%); 151 | border-color: #ddd; 152 | } 153 | } 154 | 155 | .text-block{ 156 | margin-bottom: @base-line-height; 157 | h2,.h2{ 158 | margin-bottom: 0.3939393939394em; 159 | } 160 | h5,.h5{ 161 | margin: 0; 162 | } 163 | h4,.h4{ 164 | &:not(:last-child){ 165 | margin-bottom: 0.3421052631579em; 166 | } 167 | } 168 | h3,.h3{ 169 | margin-bottom: 0.52em; 170 | } 171 | } 172 | 173 | @media all and (min-width: 768px){ 174 | div[class*='col-']{ 175 | .text-block{ 176 | +.text-block{ 177 | margin-top: @base-line-height*2; 178 | } 179 | } 180 | } 181 | } 182 | 183 | .heading-block{ 184 | margin-bottom: @base-line-height*2; 185 | h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{ 186 | margin-bottom: 0; 187 | } 188 | } -------------------------------------------------------------------------------- /less/theme_components/videos.less: -------------------------------------------------------------------------------- 1 | /*! -- Stack Videos -- */ 2 | 3 | .video-play-icon{ 4 | &:before{ 5 | border-color: transparent transparent transparent @color-dark; 6 | margin-top: -3px; 7 | } 8 | } 9 | 10 | .modal-instance{ 11 | .video-play-icon{ 12 | +span{ 13 | position: relative; 14 | display: inline-block; 15 | margin-left: @base-line-height/2; 16 | white-space: nowrap; 17 | bottom: 22px; 18 | } 19 | &.video-play-icon--xs{ 20 | +span{ 21 | bottom: 8px; 22 | margin-left: @base-line-height/4; 23 | } 24 | } 25 | } 26 | } 27 | 28 | .video-cover{ 29 | background: @color-dark; 30 | &.border--round{ 31 | overflow: hidden; 32 | iframe{ 33 | border-radius: 6px; 34 | } 35 | } 36 | &:not(:last-child){ 37 | margin-bottom: @base-line-height; 38 | } 39 | +span.h4{ 40 | +span{ 41 | display: inline-block; 42 | margin-left: @base-line-height/2; 43 | } 44 | } 45 | } 46 | 47 | @media all and (min-width: 1025px){ 48 | .video-cover{ 49 | .video-play-icon{ 50 | .transition(0.2s,ease-out); 51 | &:hover{ 52 | .box-shadow-wide; 53 | .translate3d(-50%,-52%,0); 54 | } 55 | } 56 | } 57 | } 58 | 59 | .imagebg{ 60 | .video-cover{ 61 | .video-play-icon{ 62 | z-index: 10; 63 | } 64 | } 65 | } 66 | 67 | @media all and (min-width: 768px){ 68 | h2{ 69 | +.video-cover{ 70 | margin-top: @base-line-height*2; 71 | } 72 | } 73 | } 74 | 75 | @media all and (min-width: 768px){ 76 | .video-1{ 77 | .video-play-icon{ 78 | margin-right: @base-line-height; 79 | } 80 | h2{ 81 | display: inline-block; 82 | position: relative; 83 | bottom: 14px; 84 | } 85 | } 86 | div[class*='col-sm-6']{ 87 | .video-1{ 88 | h2{ 89 | bottom: 0; 90 | display: block; 91 | } 92 | .video-play-icon{ 93 | margin-bottom: @base-line-height/4; 94 | } 95 | } 96 | } 97 | } 98 | 99 | .video-1{ 100 | h2{ 101 | margin: 0; 102 | } 103 | } 104 | 105 | .imageblock__content{ 106 | .modal-instance{ 107 | position: absolute; 108 | top: 50%; 109 | left: 50%; 110 | .translate3d(-50%,-50%,0); 111 | } 112 | } -------------------------------------------------------------------------------- /less/theme_components/wizard.less: -------------------------------------------------------------------------------- 1 | /*! -- Stack Wizard -- */ 2 | 3 | .wizard{ 4 | transition: opacity .3s ease; 5 | opacity: 0; 6 | &.active{ 7 | opacity: 1; 8 | } 9 | } 10 | 11 | .wizard > .actions a, .wizard > .actions a:hover, .wizard > .actions a:active{ 12 | background: @color-primary; 13 | transition: all .3s ease; 14 | padding: @base-line-height/4 @base-line-height; 15 | font-size: 12px; 16 | text-transform: uppercase; 17 | font-weight: 700; 18 | letter-spacing: 1px; 19 | color: #fff; 20 | } 21 | 22 | .wizard > .steps .current a, .wizard > .steps .current a:hover, .wizard > .steps .current a:active{ 23 | background: none; 24 | color: @color-dark; 25 | } 26 | 27 | .wizard > .steps a{ 28 | position: relative; 29 | &:before{ 30 | content: ''; 31 | width: 15px; 32 | height: 15px; 33 | border-radius: 50%; 34 | position: absolute; 35 | left: 50%; 36 | margin-left: -10px; 37 | background: #eee; 38 | display: block; 39 | bottom: 0; 40 | transition: all .2s ease; 41 | } 42 | &:after{ 43 | content: ''; 44 | position: absolute; 45 | width: 100%; 46 | bottom: 7px; 47 | height: 2px; 48 | background: #eee; 49 | left: 0; 50 | transition: all .2s ease; 51 | } 52 | } 53 | 54 | .wizard > .steps li{ 55 | &:first-child{ 56 | a{ 57 | &:after{ 58 | width: 50%; 59 | left: 50%; 60 | } 61 | } 62 | } 63 | &:last-child{ 64 | a{ 65 | &:after{ 66 | width: 50%; 67 | } 68 | } 69 | } 70 | &.current{ 71 | a{ 72 | &:after, &:before{ 73 | background-color: @color-primary; 74 | } 75 | } 76 | } 77 | } 78 | 79 | .wizard > .steps a, .wizard > .steps a:hover{ 80 | padding-bottom: @base-line-height*1.5; 81 | } 82 | 83 | .wizard > .steps .done a, .wizard > .steps .done a:hover, .wizard > .steps .done a:active, .wizard > .steps .disabled a, .wizard > .steps .disabled a:hover, .wizard > .steps .disabled a:active{ 84 | background: none; 85 | color: @color-dark; 86 | } 87 | 88 | .wizard > .steps a, .wizard > .steps a:hover, .wizard > .steps a:active{ 89 | margin: 0; 90 | } 91 | 92 | .wizard > .actions a, .wizard > .actions a:hover, .wizard > .actions a:active{ 93 | user-select: none; 94 | -moz-user-select: none; 95 | -webkit-user-select: none; 96 | } 97 | 98 | .wizard > .steps > ul, .wizard > .actions{ 99 | text-align: center; 100 | } 101 | 102 | .wizard > .steps > ul > li, .wizard > .actions > ul > li{ 103 | float: none; 104 | display: inline-block; 105 | } 106 | 107 | .wizard > section{ 108 | padding: 0; 109 | } 110 | 111 | .wizard > .content{ 112 | background: @color-bg-secondary; 113 | margin-top: @base-line-height; 114 | margin-bottom: @base-line-height; 115 | border: 1px solid #ececec; 116 | } 117 | 118 | .wizard > .content > .body{ 119 | padding: @base-line-height; 120 | width: 100%; 121 | height: 100%; 122 | } 123 | 124 | .wizard > .steps .number{ 125 | font-size: 1em; 126 | } 127 | 128 | @media all and (max-width: 767px){ 129 | .wizard > .steps .number{ 130 | display: block; 131 | } 132 | .wizard > .content{ 133 | min-height: 25em; 134 | } 135 | .wizard{ 136 | .pos-vertical-center{ 137 | top: 50%; 138 | transform: translateY(-50%); 139 | -wekbit-transform: translateY(-50%); 140 | } 141 | } 142 | } 143 | 144 | .wizard{ 145 | &.bg--white{ 146 | background: none !important; 147 | > .content{ 148 | background: #fff; 149 | } 150 | } 151 | > .content{ 152 | img{ 153 | max-height: 240px; 154 | } 155 | } 156 | } 157 | 158 | @media all and (max-width: 767px){ 159 | .wizard{ 160 | > .content{ 161 | img{ 162 | max-height: 120px; 163 | margin-bottom: @base-line-height/2; 164 | } 165 | } 166 | } 167 | } -------------------------------------------------------------------------------- /logo-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/linkeefe/devsinfoKE/bd05b4d569fcf48a337a1e434cf44822006d7df2/logo-dark.png --------------------------------------------------------------------------------