1862 | var el = e.target;
1863 | while (el && el.tagName !== 'A' && el !== _this.el) {
1864 | el = el.parentNode;
1865 | }
1866 | if (!el) return;
1867 | if (el.tagName !== 'A' || !el.href) {
1868 | // allow not anchor
1869 | go(target);
1870 | } else if (sameOrigin(el)) {
1871 | go({
1872 | path: el.pathname,
1873 | replace: target && target.replace,
1874 | append: target && target.append
1875 | });
1876 | }
1877 | }
1878 | };
1879 | this.el.addEventListener('click', this.handler);
1880 | // manage active link class
1881 | this.unwatch = vm.$watch('$route.path', _.bind(this.updateClasses, this));
1882 | },
1883 |
1884 | update: function update(path) {
1885 | var router = this.vm.$route.router;
1886 | var append = undefined;
1887 | this.target = path;
1888 | if (_.isObject(path)) {
1889 | append = path.append;
1890 | this.exact = path.exact;
1891 | this.prevActiveClass = this.activeClass;
1892 | this.activeClass = path.activeClass;
1893 | }
1894 | path = this.path = router._stringifyPath(path);
1895 | this.activeRE = path && !this.exact ? new RegExp('^' + path.replace(/\/$/, '').replace(regexEscapeRE, '\\$&') + '(\\/|$)') : null;
1896 | this.updateClasses(this.vm.$route.path);
1897 | var isAbsolute = path.charAt(0) === '/';
1898 | // do not format non-hash relative paths
1899 | var href = path && (router.mode === 'hash' || isAbsolute) ? router.history.formatPath(path, append) : path;
1900 | if (this.el.tagName === 'A') {
1901 | if (href) {
1902 | this.el.href = href;
1903 | } else {
1904 | this.el.removeAttribute('href');
1905 | }
1906 | }
1907 | },
1908 |
1909 | updateClasses: function updateClasses(path) {
1910 | var el = this.el;
1911 | var router = this.vm.$route.router;
1912 | var activeClass = this.activeClass || router._linkActiveClass;
1913 | // clear old class
1914 | if (this.prevActiveClass !== activeClass) {
1915 | _.removeClass(el, this.prevActiveClass);
1916 | }
1917 | // remove query string before matching
1918 | var dest = this.path.replace(queryStringRE, '');
1919 | path = path.replace(queryStringRE, '');
1920 | // add new class
1921 | if (this.exact) {
1922 | if (dest === path ||
1923 | // also allow additional trailing slash
1924 | dest.charAt(dest.length - 1) !== '/' && dest === path.replace(trailingSlashRE, '')) {
1925 | _.addClass(el, activeClass);
1926 | } else {
1927 | _.removeClass(el, activeClass);
1928 | }
1929 | } else {
1930 | if (this.activeRE && this.activeRE.test(path)) {
1931 | _.addClass(el, activeClass);
1932 | } else {
1933 | _.removeClass(el, activeClass);
1934 | }
1935 | }
1936 | },
1937 |
1938 | unbind: function unbind() {
1939 | this.el.removeEventListener('click', this.handler);
1940 | this.unwatch && this.unwatch();
1941 | }
1942 | });
1943 |
1944 | function sameOrigin(link) {
1945 | return link.protocol === location.protocol && link.hostname === location.hostname && link.port === location.port;
1946 | }
1947 | }
1948 |
1949 | var historyBackends = {
1950 | abstract: AbstractHistory,
1951 | hash: HashHistory,
1952 | html5: HTML5History
1953 | };
1954 |
1955 | // late bind during install
1956 | var Vue = undefined;
1957 |
1958 | /**
1959 | * Router constructor
1960 | *
1961 | * @param {Object} [options]
1962 | */
1963 |
1964 | var Router = (function () {
1965 | function Router() {
1966 | var _ref = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
1967 |
1968 | var _ref$hashbang = _ref.hashbang;
1969 | var hashbang = _ref$hashbang === undefined ? true : _ref$hashbang;
1970 | var _ref$abstract = _ref.abstract;
1971 | var abstract = _ref$abstract === undefined ? false : _ref$abstract;
1972 | var _ref$history = _ref.history;
1973 | var history = _ref$history === undefined ? false : _ref$history;
1974 | var _ref$saveScrollPosition = _ref.saveScrollPosition;
1975 | var saveScrollPosition = _ref$saveScrollPosition === undefined ? false : _ref$saveScrollPosition;
1976 | var _ref$transitionOnLoad = _ref.transitionOnLoad;
1977 | var transitionOnLoad = _ref$transitionOnLoad === undefined ? false : _ref$transitionOnLoad;
1978 | var _ref$suppressTransitionError = _ref.suppressTransitionError;
1979 | var suppressTransitionError = _ref$suppressTransitionError === undefined ? false : _ref$suppressTransitionError;
1980 | var _ref$root = _ref.root;
1981 | var root = _ref$root === undefined ? null : _ref$root;
1982 | var _ref$linkActiveClass = _ref.linkActiveClass;
1983 | var linkActiveClass = _ref$linkActiveClass === undefined ? 'v-link-active' : _ref$linkActiveClass;
1984 | babelHelpers.classCallCheck(this, Router);
1985 |
1986 | /* istanbul ignore if */
1987 | if (!Router.installed) {
1988 | throw new Error('Please install the Router with Vue.use() before ' + 'creating an instance.');
1989 | }
1990 |
1991 | // Vue instances
1992 | this.app = null;
1993 | this._views = [];
1994 | this._children = [];
1995 |
1996 | // route recognizer
1997 | this._recognizer = new RouteRecognizer();
1998 | this._guardRecognizer = new RouteRecognizer();
1999 |
2000 | // state
2001 | this._started = false;
2002 | this._startCb = null;
2003 | this._currentRoute = {};
2004 | this._currentTransition = null;
2005 | this._previousTransition = null;
2006 | this._notFoundHandler = null;
2007 | this._notFoundRedirect = null;
2008 | this._beforeEachHooks = [];
2009 | this._afterEachHooks = [];
2010 |
2011 | // feature detection
2012 | this._hasPushState = typeof window !== 'undefined' && window.history && window.history.pushState;
2013 |
2014 | // trigger transition on initial render?
2015 | this._rendered = false;
2016 | this._transitionOnLoad = transitionOnLoad;
2017 |
2018 | // history mode
2019 | this._abstract = abstract;
2020 | this._hashbang = hashbang;
2021 | this._history = this._hasPushState && history;
2022 |
2023 | // other options
2024 | this._saveScrollPosition = saveScrollPosition;
2025 | this._linkActiveClass = linkActiveClass;
2026 | this._suppress = suppressTransitionError;
2027 |
2028 | // create history object
2029 | var inBrowser = Vue.util.inBrowser;
2030 | this.mode = !inBrowser || this._abstract ? 'abstract' : this._history ? 'html5' : 'hash';
2031 |
2032 | var History = historyBackends[this.mode];
2033 | var self = this;
2034 | this.history = new History({
2035 | root: root,
2036 | hashbang: this._hashbang,
2037 | onChange: function onChange(path, state, anchor) {
2038 | self._match(path, state, anchor);
2039 | }
2040 | });
2041 | }
2042 |
2043 | /**
2044 | * Allow directly passing components to a route
2045 | * definition.
2046 | *
2047 | * @param {String} path
2048 | * @param {Object} handler
2049 | */
2050 |
2051 | // API ===================================================
2052 |
2053 | /**
2054 | * Register a map of top-level paths.
2055 | *
2056 | * @param {Object} map
2057 | */
2058 |
2059 | Router.prototype.map = function map(_map) {
2060 | for (var route in _map) {
2061 | this.on(route, _map[route]);
2062 | }
2063 | };
2064 |
2065 | /**
2066 | * Register a single root-level path
2067 | *
2068 | * @param {String} rootPath
2069 | * @param {Object} handler
2070 | * - {String} component
2071 | * - {Object} [subRoutes]
2072 | * - {Boolean} [forceRefresh]
2073 | * - {Function} [before]
2074 | * - {Function} [after]
2075 | */
2076 |
2077 | Router.prototype.on = function on(rootPath, handler) {
2078 | if (rootPath === '*') {
2079 | this._notFound(handler);
2080 | } else {
2081 | this._addRoute(rootPath, handler, []);
2082 | }
2083 | };
2084 |
2085 | /**
2086 | * Set redirects.
2087 | *
2088 | * @param {Object} map
2089 | */
2090 |
2091 | Router.prototype.redirect = function redirect(map) {
2092 | for (var path in map) {
2093 | this._addRedirect(path, map[path]);
2094 | }
2095 | };
2096 |
2097 | /**
2098 | * Set aliases.
2099 | *
2100 | * @param {Object} map
2101 | */
2102 |
2103 | Router.prototype.alias = function alias(map) {
2104 | for (var path in map) {
2105 | this._addAlias(path, map[path]);
2106 | }
2107 | };
2108 |
2109 | /**
2110 | * Set global before hook.
2111 | *
2112 | * @param {Function} fn
2113 | */
2114 |
2115 | Router.prototype.beforeEach = function beforeEach(fn) {
2116 | this._beforeEachHooks.push(fn);
2117 | };
2118 |
2119 | /**
2120 | * Set global after hook.
2121 | *
2122 | * @param {Function} fn
2123 | */
2124 |
2125 | Router.prototype.afterEach = function afterEach(fn) {
2126 | this._afterEachHooks.push(fn);
2127 | };
2128 |
2129 | /**
2130 | * Navigate to a given path.
2131 | * The path can be an object describing a named path in
2132 | * the format of { name: '...', params: {}, query: {}}
2133 | * The path is assumed to be already decoded, and will
2134 | * be resolved against root (if provided)
2135 | *
2136 | * @param {String|Object} path
2137 | * @param {Boolean} [replace]
2138 | */
2139 |
2140 | Router.prototype.go = function go(path) {
2141 | var replace = false;
2142 | var append = false;
2143 | if (Vue.util.isObject(path)) {
2144 | replace = path.replace;
2145 | append = path.append;
2146 | }
2147 | path = this._stringifyPath(path);
2148 | if (path) {
2149 | this.history.go(path, replace, append);
2150 | }
2151 | };
2152 |
2153 | /**
2154 | * Short hand for replacing current path
2155 | *
2156 | * @param {String} path
2157 | */
2158 |
2159 | Router.prototype.replace = function replace(path) {
2160 | if (typeof path === 'string') {
2161 | path = { path: path };
2162 | }
2163 | path.replace = true;
2164 | this.go(path);
2165 | };
2166 |
2167 | /**
2168 | * Start the router.
2169 | *
2170 | * @param {VueConstructor} App
2171 | * @param {String|Element} container
2172 | * @param {Function} [cb]
2173 | */
2174 |
2175 | Router.prototype.start = function start(App, container, cb) {
2176 | /* istanbul ignore if */
2177 | if (this._started) {
2178 | warn('already started.');
2179 | return;
2180 | }
2181 | this._started = true;
2182 | this._startCb = cb;
2183 | if (!this.app) {
2184 | /* istanbul ignore if */
2185 | if (!App || !container) {
2186 | throw new Error('Must start vue-router with a component and a ' + 'root container.');
2187 | }
2188 | this._appContainer = container;
2189 | var Ctor = this._appConstructor = typeof App === 'function' ? App : Vue.extend(App);
2190 | // give it a name for better debugging
2191 | Ctor.options.name = Ctor.options.name || 'RouterApp';
2192 | }
2193 | this.history.start();
2194 | };
2195 |
2196 | /**
2197 | * Stop listening to route changes.
2198 | */
2199 |
2200 | Router.prototype.stop = function stop() {
2201 | this.history.stop();
2202 | this._started = false;
2203 | };
2204 |
2205 | // Internal methods ======================================
2206 |
2207 | /**
2208 | * Add a route containing a list of segments to the internal
2209 | * route recognizer. Will be called recursively to add all
2210 | * possible sub-routes.
2211 | *
2212 | * @param {String} path
2213 | * @param {Object} handler
2214 | * @param {Array} segments
2215 | */
2216 |
2217 | Router.prototype._addRoute = function _addRoute(path, handler, segments) {
2218 | guardComponent(path, handler);
2219 | handler.path = path;
2220 | handler.fullPath = (segments.reduce(function (path, segment) {
2221 | return path + segment.path;
2222 | }, '') + path).replace('//', '/');
2223 | segments.push({
2224 | path: path,
2225 | handler: handler
2226 | });
2227 | this._recognizer.add(segments, {
2228 | as: handler.name
2229 | });
2230 | // add sub routes
2231 | if (handler.subRoutes) {
2232 | for (var subPath in handler.subRoutes) {
2233 | // recursively walk all sub routes
2234 | this._addRoute(subPath, handler.subRoutes[subPath],
2235 | // pass a copy in recursion to avoid mutating
2236 | // across branches
2237 | segments.slice());
2238 | }
2239 | }
2240 | };
2241 |
2242 | /**
2243 | * Set the notFound route handler.
2244 | *
2245 | * @param {Object} handler
2246 | */
2247 |
2248 | Router.prototype._notFound = function _notFound(handler) {
2249 | guardComponent('*', handler);
2250 | this._notFoundHandler = [{ handler: handler }];
2251 | };
2252 |
2253 | /**
2254 | * Add a redirect record.
2255 | *
2256 | * @param {String} path
2257 | * @param {String} redirectPath
2258 | */
2259 |
2260 | Router.prototype._addRedirect = function _addRedirect(path, redirectPath) {
2261 | if (path === '*') {
2262 | this._notFoundRedirect = redirectPath;
2263 | } else {
2264 | this._addGuard(path, redirectPath, this.replace);
2265 | }
2266 | };
2267 |
2268 | /**
2269 | * Add an alias record.
2270 | *
2271 | * @param {String} path
2272 | * @param {String} aliasPath
2273 | */
2274 |
2275 | Router.prototype._addAlias = function _addAlias(path, aliasPath) {
2276 | this._addGuard(path, aliasPath, this._match);
2277 | };
2278 |
2279 | /**
2280 | * Add a path guard.
2281 | *
2282 | * @param {String} path
2283 | * @param {String} mappedPath
2284 | * @param {Function} handler
2285 | */
2286 |
2287 | Router.prototype._addGuard = function _addGuard(path, mappedPath, _handler) {
2288 | var _this = this;
2289 |
2290 | this._guardRecognizer.add([{
2291 | path: path,
2292 | handler: function handler(match, query) {
2293 | var realPath = mapParams(mappedPath, match.params, query);
2294 | _handler.call(_this, realPath);
2295 | }
2296 | }]);
2297 | };
2298 |
2299 | /**
2300 | * Check if a path matches any redirect records.
2301 | *
2302 | * @param {String} path
2303 | * @return {Boolean} - if true, will skip normal match.
2304 | */
2305 |
2306 | Router.prototype._checkGuard = function _checkGuard(path) {
2307 | var matched = this._guardRecognizer.recognize(path);
2308 | if (matched) {
2309 | matched[0].handler(matched[0], matched.queryParams);
2310 | return true;
2311 | } else if (this._notFoundRedirect) {
2312 | matched = this._recognizer.recognize(path);
2313 | if (!matched) {
2314 | this.replace(this._notFoundRedirect);
2315 | return true;
2316 | }
2317 | }
2318 | };
2319 |
2320 | /**
2321 | * Match a URL path and set the route context on vm,
2322 | * triggering view updates.
2323 | *
2324 | * @param {String} path
2325 | * @param {Object} [state]
2326 | * @param {String} [anchor]
2327 | */
2328 |
2329 | Router.prototype._match = function _match(path, state, anchor) {
2330 | var _this2 = this;
2331 |
2332 | if (this._checkGuard(path)) {
2333 | return;
2334 | }
2335 |
2336 | var currentRoute = this._currentRoute;
2337 | var currentTransition = this._currentTransition;
2338 |
2339 | if (currentTransition) {
2340 | if (currentTransition.to.path === path) {
2341 | // do nothing if we have an active transition going to the same path
2342 | return;
2343 | } else if (currentRoute.path === path) {
2344 | // We are going to the same path, but we also have an ongoing but
2345 | // not-yet-validated transition. Abort that transition and reset to
2346 | // prev transition.
2347 | currentTransition.aborted = true;
2348 | this._currentTransition = this._prevTransition;
2349 | return;
2350 | } else {
2351 | // going to a totally different path. abort ongoing transition.
2352 | currentTransition.aborted = true;
2353 | }
2354 | }
2355 |
2356 | // construct new route and transition context
2357 | var route = new Route(path, this);
2358 | var transition = new RouteTransition(this, route, currentRoute);
2359 |
2360 | // current transition is updated right now.
2361 | // however, current route will only be updated after the transition has
2362 | // been validated.
2363 | this._prevTransition = currentTransition;
2364 | this._currentTransition = transition;
2365 |
2366 | if (!this.app) {
2367 | // initial render
2368 | this.app = new this._appConstructor({
2369 | el: this._appContainer,
2370 | _meta: {
2371 | $route: route
2372 | }
2373 | });
2374 | }
2375 |
2376 | // check global before hook
2377 | var beforeHooks = this._beforeEachHooks;
2378 | var startTransition = function startTransition() {
2379 | transition.start(function () {
2380 | _this2._postTransition(route, state, anchor);
2381 | });
2382 | };
2383 |
2384 | if (beforeHooks.length) {
2385 | transition.runQueue(beforeHooks, function (hook, _, next) {
2386 | if (transition === _this2._currentTransition) {
2387 | transition.callHook(hook, null, next, {
2388 | expectBoolean: true
2389 | });
2390 | }
2391 | }, startTransition);
2392 | } else {
2393 | startTransition();
2394 | }
2395 |
2396 | if (!this._rendered && this._startCb) {
2397 | this._startCb.call(null);
2398 | }
2399 |
2400 | // HACK:
2401 | // set rendered to true after the transition start, so
2402 | // that components that are acitvated synchronously know
2403 | // whether it is the initial render.
2404 | this._rendered = true;
2405 | };
2406 |
2407 | /**
2408 | * Set current to the new transition.
2409 | * This is called by the transition object when the
2410 | * validation of a route has succeeded.
2411 | *
2412 | * @param {Transition} transition
2413 | */
2414 |
2415 | Router.prototype._onTransitionValidated = function _onTransitionValidated(transition) {
2416 | // set current route
2417 | var route = this._currentRoute = transition.to;
2418 | // update route context for all children
2419 | if (this.app.$route !== route) {
2420 | this.app.$route = route;
2421 | this._children.forEach(function (child) {
2422 | child.$route = route;
2423 | });
2424 | }
2425 | // call global after hook
2426 | if (this._afterEachHooks.length) {
2427 | this._afterEachHooks.forEach(function (hook) {
2428 | return hook.call(null, {
2429 | to: transition.to,
2430 | from: transition.from
2431 | });
2432 | });
2433 | }
2434 | this._currentTransition.done = true;
2435 | };
2436 |
2437 | /**
2438 | * Handle stuff after the transition.
2439 | *
2440 | * @param {Route} route
2441 | * @param {Object} [state]
2442 | * @param {String} [anchor]
2443 | */
2444 |
2445 | Router.prototype._postTransition = function _postTransition(route, state, anchor) {
2446 | // handle scroll positions
2447 | // saved scroll positions take priority
2448 | // then we check if the path has an anchor
2449 | var pos = state && state.pos;
2450 | if (pos && this._saveScrollPosition) {
2451 | Vue.nextTick(function () {
2452 | window.scrollTo(pos.x, pos.y);
2453 | });
2454 | } else if (anchor) {
2455 | Vue.nextTick(function () {
2456 | var el = document.getElementById(anchor.slice(1));
2457 | if (el) {
2458 | window.scrollTo(window.scrollX, el.offsetTop);
2459 | }
2460 | });
2461 | }
2462 | };
2463 |
2464 | /**
2465 | * Normalize named route object / string paths into
2466 | * a string.
2467 | *
2468 | * @param {Object|String|Number} path
2469 | * @return {String}
2470 | */
2471 |
2472 | Router.prototype._stringifyPath = function _stringifyPath(path) {
2473 | if (path && typeof path === 'object') {
2474 | if (path.name) {
2475 | var params = path.params || {};
2476 | if (path.query) {
2477 | params.queryParams = path.query;
2478 | }
2479 | return this._recognizer.generate(path.name, params);
2480 | } else if (path.path) {
2481 | var fullPath = path.path;
2482 | if (path.query) {
2483 | var query = this._recognizer.generateQueryString(path.query);
2484 | if (fullPath.indexOf('?') > -1) {
2485 | fullPath += '&' + query.slice(1);
2486 | } else {
2487 | fullPath += query;
2488 | }
2489 | }
2490 | return fullPath;
2491 | } else {
2492 | return '';
2493 | }
2494 | } else {
2495 | return path ? path + '' : '';
2496 | }
2497 | };
2498 |
2499 | return Router;
2500 | })();
2501 |
2502 | function guardComponent(path, handler) {
2503 | var comp = handler.component;
2504 | if (Vue.util.isPlainObject(comp)) {
2505 | comp = handler.component = Vue.extend(comp);
2506 | }
2507 | /* istanbul ignore if */
2508 | if (typeof comp !== 'function') {
2509 | handler.component = null;
2510 | warn('invalid component for route "' + path + '".');
2511 | }
2512 | }
2513 |
2514 | /* Installation */
2515 |
2516 | Router.installed = false;
2517 |
2518 | /**
2519 | * Installation interface.
2520 | * Install the necessary directives.
2521 | */
2522 |
2523 | Router.install = function (externalVue) {
2524 | /* istanbul ignore if */
2525 | if (Router.installed) {
2526 | warn('already installed.');
2527 | return;
2528 | }
2529 | Vue = externalVue;
2530 | applyOverride(Vue);
2531 | View(Vue);
2532 | Link(Vue);
2533 | exports$1.Vue = Vue;
2534 | Router.installed = true;
2535 | };
2536 |
2537 | // auto install
2538 | /* istanbul ignore if */
2539 | if (typeof window !== 'undefined' && window.Vue) {
2540 | window.Vue.use(Router);
2541 | }
2542 |
2543 | return Router;
2544 |
2545 | }));
2546 | //# sourceMappingURL=vue-router.js.map
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "olympos-gulp",
3 | "version": "1.0.0",
4 | "description": "Gulp dependencies for Olympos WordPress theme",
5 | "main": "gulpfile.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "repository": {
10 | "type": "git",
11 | "url": "https://github.com/ivandoric/olympos.git"
12 | },
13 | "author": "Ivan Dorić",
14 | "license": "ISC",
15 | "devDependencies": {
16 | "gulp": "^3.9.0",
17 | "gulp-autoprefixer": "^3.0.2",
18 | "gulp-livereload": "^3.8.0",
19 | "gulp-sass": "^2.0.4",
20 | "gulp-sourcemaps": "^1.5.2"
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | This is a repository for "One Page App With Drupal 8 and Vue.js" tutorial series. You can [check out the series here](http://watch-learn.com/series/one-page-app-with-drupal-and-vue/).
2 |
3 | You can go to [releases](https://github.com/ivandoric/one-page-app-with-drupal-and-vue/releases) to download the code for most of the videos of the series. Releases are made per episode.
--------------------------------------------------------------------------------
/sass/_fonts.scss:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/sass/_footer.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivandoric/one-page-app-with-drupal-and-vue/147e312632721ef2455755b7f59a4c5af825a401/sass/_footer.scss
--------------------------------------------------------------------------------
/sass/_globals.scss:
--------------------------------------------------------------------------------
1 | /* =======================================================================
2 | ## ++ Globals
3 | ========================================================================== */
4 | html{
5 | font-size: 100%;
6 | }
7 |
8 | body{
9 | -webkit-font-smoothing: antialiased;
10 | padding:60px 0;
11 | }
12 |
13 | *{
14 | box-sizing:border-box;
15 | }
16 |
17 | .movie-item{
18 | border-bottom:1px solid #ccc;
19 | margin-bottom: 20px;
20 | padding:10px;
21 |
22 | img{
23 | max-width: 100%;
24 | height:auto;
25 | }
26 |
27 | h4{
28 | margin-top: 0;
29 | }
30 | }
31 |
32 | .filter{
33 | padding: 40px;
34 | background: #efefef;
35 | margin-bottom:40px;
36 | }
37 |
38 |
39 | /* =======================================================================
40 | ## ++ Cleafix
41 | ========================================================================== */
42 |
43 | /* float clearing for IE6 */
44 | * html .clearfix{
45 | height: 1%;
46 | overflow: visible;
47 | }
48 |
49 | /* float clearing for IE7 */
50 | *+html .clearfix{
51 | min-height: 1%;
52 | }
53 |
54 | /* float clearing for everyone else */
55 | .clearfix:after{
56 | clear: both;
57 | content: ".";
58 | display: block;
59 | height: 0;
60 | visibility: hidden;
61 | font-size: 0;
62 | }
63 |
64 | .clr{clear:both;}
65 |
66 |
67 |
68 |
69 |
70 |
71 |
--------------------------------------------------------------------------------
/sass/_header.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivandoric/one-page-app-with-drupal-and-vue/147e312632721ef2455755b7f59a4c5af825a401/sass/_header.scss
--------------------------------------------------------------------------------
/sass/_homepage.scss:
--------------------------------------------------------------------------------
1 | .loading-transition{
2 | transition: all .3s ease;
3 | padding:20px;
4 | color:#fff;
5 | background:#5CB85C;
6 | margin:20px 0;
7 | width:100%;
8 | }
9 |
10 | .loading-enter,
11 | .loading-leave{
12 | width:0;
13 | }
--------------------------------------------------------------------------------
/sass/_mixins.scss:
--------------------------------------------------------------------------------
1 | /* =======================================================================
2 | ## ++ Media Queries
3 | ========================================================================== */
4 |
5 | /*
6 | Used for media queries.
7 | Add these mixins in your normal scss flow.
8 |
9 | Eg.
10 | .container{
11 | width:1024px;
12 |
13 | @include tablets{
14 | width:90%;
15 | }
16 | }
17 | */
18 |
19 | @mixin lowresmonitors{
20 | @media screen and (max-width: 1350px){ @content;}
21 | }
22 |
23 | @mixin tablets{
24 | @media screen and (max-width: 1100px){ @content; }
25 | }
26 |
27 | @mixin phones{
28 | @media screen and (max-width: 720px){ @content; }
29 | }
30 |
31 | /* =======================================================================
32 | ## ++ Unit transform
33 | ========================================================================== */
34 |
35 | /*
36 | Used for making containers have width in percentages.
37 | Usage: define elemnt width in px and the width of parent elemnt in px.
38 | eg. .block{width:cp(512px, 1024px)} this will result in .block{width:50%;}
39 | */
40 |
41 | @function cp($target, $container) {
42 | @return ($target / $container) * 100%;
43 | }
44 |
45 | /*
46 | Used for making px values convert to rem values
47 | Usage: define font-size in px and it will convert to rems
48 | eg. font-size: rem(14px);
49 | */
50 |
51 | @function rem($target, $context: $base-font-size) {
52 | @if $target == 0 { @return 0 }
53 | @return $target / $context + 0rem;
54 | }
55 | $base-font-size:16px;
--------------------------------------------------------------------------------
/sass/_su.scss:
--------------------------------------------------------------------------------
1 | // Su
2 | // ==
3 |
4 | @import 'susy/su';
5 |
--------------------------------------------------------------------------------
/sass/_susy.scss:
--------------------------------------------------------------------------------
1 | // Susy
2 | // ====
3 |
4 | @import 'susy/language/susy';
5 |
--------------------------------------------------------------------------------
/sass/_variables.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ivandoric/one-page-app-with-drupal-and-vue/147e312632721ef2455755b7f59a4c5af825a401/sass/_variables.scss
--------------------------------------------------------------------------------
/sass/style.scss:
--------------------------------------------------------------------------------
1 | /* Vendor */
2 | @import "susy";
3 | @import "su";
4 |
5 |
6 | /* Setup */
7 | @import "mixins";
8 | @import "variables";
9 | @import "fonts";
10 | @import "globals";
11 |
12 | @import "header";
13 | @import "footer";
14 | @import "homepage";
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/sass/susy/_su.scss:
--------------------------------------------------------------------------------
1 | // Su
2 | // ==
3 |
4 | @import "su/utilities";
5 | @import "su/settings";
6 | @import "su/validation";
7 | @import "su/grid";
8 |
--------------------------------------------------------------------------------
/sass/susy/language/_susy.scss:
--------------------------------------------------------------------------------
1 | // Susy Next Syntax
2 | // ================
3 |
4 | $susy-version: 2.1;
5 |
6 | @import "../su";
7 | @import "../output/float";
8 |
9 | @import "susy/settings";
10 | @import "susy/validation";
11 | @import "susy/grids";
12 | @import "susy/box-sizing";
13 | @import "susy/context";
14 | @import "susy/background";
15 | @import "susy/container";
16 | @import "susy/span";
17 | @import "susy/gutters";
18 | @import "susy/isolate";
19 | @import "susy/gallery";
20 | @import "susy/rows";
21 | @import "susy/margins";
22 | @import "susy/padding";
23 | @import "susy/bleed";
24 | @import "susy/breakpoint-plugin";
25 |
--------------------------------------------------------------------------------
/sass/susy/language/susy/_background.scss:
--------------------------------------------------------------------------------
1 | // Background Grid Syntax
2 | // ======================
3 |
4 | $susy-overlay-grid-head-exists: false;
5 |
6 |
7 | // Show Grid/s
8 | // -----------
9 | // Show grid on any element using either background or overlay.
10 | // - [$grid] :
11 | @mixin show-grid(
12 | $grid: $susy
13 | ) {
14 | $inspect: $grid;
15 | $_output: debug-get(output, $grid);
16 |
17 | @include susy-inspect(show-grid, $inspect);
18 | @if $_output == overlay and susy-get(debug image, $grid) != hide {
19 | @include overlay-grid($grid);
20 | } @else {
21 | @include background-grid($grid);
22 | }
23 | }
24 |
25 | @mixin show-grids(
26 | $grid: $susy
27 | ) {
28 | @include show-grid($grid);
29 | }
30 |
31 | // Background Grid
32 | // ---------------
33 | // Show a grid background on any element.
34 | // - [$grid] :
35 | @mixin background-grid(
36 | $grid: $susy
37 | ) {
38 | $inspect : $grid;
39 | $_output : get-background($grid);
40 |
41 | @if length($_output) > 0 {
42 | $_flow: susy-get(flow, $grid);
43 |
44 | $_image: ();
45 | @each $name, $layer in map-get($_output, image) {
46 | $_direction: if($name == baseline, to bottom, to to($_flow));
47 | $_image: append($_image, linear-gradient($_direction, $layer), comma);
48 | }
49 | $_output: map-merge($_output, (image: $_image));
50 |
51 | @include background-grid-output($_output...);
52 | @include susy-inspect(background-grid, $inspect);
53 | }
54 | }
55 |
56 |
57 | // Overlay Grid
58 | // ------------
59 | // Generate an icon to trigger grid-overlays on any given elements.
60 | // $grids... : [] [, ]*
61 | @mixin overlay-grid (
62 | $grid: $susy
63 | ) {
64 | @if not($susy-overlay-grid-head-exists) {
65 | @at-root head { @include overlay-head($grid); }
66 | @at-root head:before { @include overlay-trigger; }
67 | @at-root head:hover { @include overlay-trigger-hover; }
68 | $susy-overlay-grid-head-exists: true !global;
69 | }
70 |
71 | head:hover ~ &,
72 | head:hover ~ body & {
73 | position: relative;
74 | &:before {
75 | @include grid-overlay-base;
76 | @include background-grid($grid);
77 | }
78 | }
79 | }
80 |
81 |
82 | // [Private] Overlay Trigger
83 | // -------------------------
84 | @mixin overlay-trigger {
85 | content: "|||";
86 | display: block;
87 | padding: 5px 10px;
88 | font: {
89 | family: sans-serif;
90 | size: 16px;
91 | weight: bold;
92 | }
93 | }
94 |
95 |
96 | // [Private] Overlay Trigger Hover
97 | // -------------------------------
98 | @mixin overlay-trigger-hover {
99 | background: rgba(white, .5);
100 | color: red;
101 | }
102 |
103 |
104 | // [Private] Overlay Head
105 | // ----------------------
106 | // styles to create grid overlay toggle
107 | @mixin overlay-head (
108 | $grid: $susy
109 | ) {
110 | $_toggle: debug-get(toggle, $grid);
111 | $_horz: null;
112 | $_vert: null;
113 |
114 | @each $side in $_toggle {
115 | $_horz: if($side == left or $side == right, $side, $_horz);
116 | $_vert: if($side == top or $side == bottom, $side, $_vert);
117 | }
118 |
119 | display: block;
120 | position: fixed;
121 | #{$_horz}: 10px;
122 | #{$_vert}: 10px;
123 | z-index: 999;
124 | color: #333;
125 | background: rgba(white, .25);
126 | }
127 |
128 |
129 | // [Private] Grid Overlay Base
130 | // ---------------------------
131 | // Base styles for generating a grid overlay
132 | @mixin grid-overlay-base() {
133 | position: absolute;
134 | top: 0;
135 | left: 0;
136 | bottom: 0;
137 | right: 0;
138 | content: " ";
139 | z-index: 998;
140 | }
141 |
142 |
143 | // Get Symmetrical Background
144 | // --------------------------
145 | // - $grid: