├── .eslintrc ├── .gitignore ├── Gulpfile.js ├── LICENSE ├── README.md ├── package.json └── src ├── .htaccess ├── assets ├── css │ ├── scss │ │ ├── core │ │ │ ├── _base.scss │ │ │ ├── _fonts.scss │ │ │ ├── _icons.scss │ │ │ ├── _layout.scss │ │ │ ├── _presentation.scss │ │ │ ├── _print.scss │ │ │ └── partials │ │ │ │ ├── _colors.vars.scss │ │ │ │ ├── _layout.vars.scss │ │ │ │ └── _responsive.partial.scss │ │ ├── modules │ │ │ ├── _footer.scss │ │ │ ├── _header.scss │ │ │ ├── _loading.scss │ │ │ └── _nav.scss │ │ ├── pages │ │ │ └── _404.scss │ │ ├── styles.scss │ │ └── vendor │ │ │ ├── _foundation.scss │ │ │ └── foundation │ │ │ ├── _global.scss │ │ │ ├── _settings.scss │ │ │ ├── components │ │ │ ├── _accordion-menu.scss │ │ │ ├── _accordion.scss │ │ │ ├── _badge.scss │ │ │ ├── _breadcrumbs.scss │ │ │ ├── _button-group.scss │ │ │ ├── _button.scss │ │ │ ├── _callout.scss │ │ │ ├── _close-button.scss │ │ │ ├── _drilldown.scss │ │ │ ├── _dropdown-menu.scss │ │ │ ├── _dropdown.scss │ │ │ ├── _flex-video.scss │ │ │ ├── _flex.scss │ │ │ ├── _float.scss │ │ │ ├── _label.scss │ │ │ ├── _media-object.scss │ │ │ ├── _menu-icon.scss │ │ │ ├── _menu.scss │ │ │ ├── _off-canvas.scss │ │ │ ├── _orbit.scss │ │ │ ├── _pagination.scss │ │ │ ├── _progress-bar.scss │ │ │ ├── _reveal.scss │ │ │ ├── _slider.scss │ │ │ ├── _sticky.scss │ │ │ ├── _switch.scss │ │ │ ├── _table.scss │ │ │ ├── _tabs.scss │ │ │ ├── _thumbnail.scss │ │ │ ├── _title-bar.scss │ │ │ ├── _tooltip.scss │ │ │ ├── _top-bar.scss │ │ │ └── _visibility.scss │ │ │ ├── forms │ │ │ ├── _checkbox.scss │ │ │ ├── _error.scss │ │ │ ├── _fieldset.scss │ │ │ ├── _forms.scss │ │ │ ├── _help-text.scss │ │ │ ├── _input-group.scss │ │ │ ├── _label.scss │ │ │ ├── _meter.scss │ │ │ ├── _progress.scss │ │ │ ├── _range.scss │ │ │ ├── _select.scss │ │ │ └── _text.scss │ │ │ ├── foundation.scss │ │ │ ├── grid │ │ │ ├── _classes.scss │ │ │ ├── _column.scss │ │ │ ├── _flex-grid.scss │ │ │ ├── _grid.scss │ │ │ ├── _gutter.scss │ │ │ ├── _layout.scss │ │ │ ├── _position.scss │ │ │ ├── _row.scss │ │ │ └── _size.scss │ │ │ ├── settings │ │ │ └── _settings.scss │ │ │ ├── typography │ │ │ ├── _alignment.scss │ │ │ ├── _base.scss │ │ │ ├── _helpers.scss │ │ │ ├── _print.scss │ │ │ └── _typography.scss │ │ │ └── util │ │ │ ├── _breakpoint.scss │ │ │ ├── _color.scss │ │ │ ├── _flex.scss │ │ │ ├── _mixins.scss │ │ │ ├── _selector.scss │ │ │ ├── _unit.scss │ │ │ ├── _util.scss │ │ │ └── _value.scss │ └── styles.css ├── images │ ├── ajax-loader.gif │ ├── svg │ │ └── sprite.symbol.svg │ └── svgSrc │ │ ├── caret-down.svg │ │ ├── caret-left.svg │ │ ├── caret-right.svg │ │ └── caret-up.svg └── js │ ├── helpers.js │ ├── scripts.js │ └── vendor │ ├── angular-resource.js │ ├── angular-route.js │ ├── angular-sanitize.js │ ├── angular.js │ ├── jquery.js │ ├── mediaCheck.js │ ├── modernizr.min.js │ ├── resize.js │ ├── svg4everybody.min.js │ └── vendor.js ├── data └── data.json ├── index.html └── reStart-app ├── .eslintrc ├── core ├── Metadata.factory.js ├── Page.ctrl.js ├── Utils.factory.js ├── app-setup │ ├── app.config.js │ └── app.module.js ├── get-data │ ├── JSONData.factory.js │ └── Res.factory.js └── ui │ ├── MQ.constant.js │ ├── loading.dir.js │ ├── loading.tpl.html │ ├── svgIcon.dir.js │ └── trustAsHTML.filter.js ├── modules ├── footer │ └── footer.tpl.html └── header │ ├── Header.ctrl.js │ ├── header.tpl.html │ └── navControl.dir.js ├── pages ├── error404 │ ├── Error404.ctrl.js │ └── Error404.view.html ├── home │ ├── Home.ctrl.js │ ├── Home.view.html │ ├── large.tpl.html │ └── small.tpl.html └── sub │ ├── Sub.ctrl.js │ ├── Sub.view.html │ ├── sample.dir.js │ └── sample.tpl.html └── reStart-app.js /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | // http://eslint.org/docs/rules/ 3 | 4 | "env": { 5 | "jquery": true 6 | }, 7 | 8 | "globals": { 9 | "$" : true 10 | }, 11 | 12 | "extends": ["eslint:recommended"], 13 | 14 | "rules": { 15 | // General 16 | "no-console": 0, 17 | "no-undef": 0, 18 | "no-use-before-define": 0, 19 | "valid-jsdoc": [1, { 20 | "requireReturn": false, 21 | "requireReturnDescription": false 22 | }], 23 | 24 | // Best Practices 25 | "no-loop-func": 2, 26 | "no-return-assign": 2, 27 | "wrap-iife": 2, 28 | "vars-on-top": 2, 29 | 30 | // Stylistic issues 31 | "quotes": [2, "single", "avoid-escape"], 32 | "indent": [2, "tab"], 33 | "one-var": [2, "never"], 34 | "no-spaced-func": 2, 35 | "space-before-function-paren": [2, "never"], 36 | "space-before-blocks": [2, "always"], 37 | "semi": 2 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .sass-cache 3 | .idea 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Kim Maida 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, 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, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | reStart-angularjs 2 | ========== 3 | 4 | A mobile-first, responsive boilerplate in AngularJS with all basic features needed to get a scalable single page application started. 5 | 6 | Currently supports modern browsers and IE9+. This boilerplate will attempt to stay in sync with latest AngularJS stable 7 | releases, so the browser support may change over time. 8 | 9 | ## Dependencies 10 | 11 | * AngularJS v1.5.8 12 | * jQuery v3.1.1 13 | * Node >= v4 14 | * Gulp 15 | * Sass (Node/libsass, not Ruby) 16 | 17 | ## Style 18 | 19 | * single responsibility 20 | * modular 21 | * scalable 22 | * opinionated ESLint 23 | * for more on style, see [https://github.com/johnpapa/angular-styleguide](Angular Styleguide) 24 | 25 | ## Features 26 | 27 | * route resolve 28 | * loading states 29 | * sample API promises 30 | * error handling 31 | * mobile navigation 32 | * mediaquery-based view switching 33 | * utility filters 34 | * example factories and directives 35 | * controller and directive namespacing 36 | * mobile-first SCSS, reset, normalize 37 | * jsDoc comments 38 | * ESLint 39 | 40 | ## Demo 41 | 42 | Demo available at [http://restart-angular.kmaida.io](http://restart-angular.kmaida.io) 43 | 44 | ## Run 45 | 46 | Run `gulp` from command line to begin the server and watch tasks. Visit [http://localhost:8000] 47 | (http://localhost:8000) in a browser window to view the site. 48 | 49 | Run `gulp --prod` to use the `production` flag, minifying files (no server, no `watch`). 50 | 51 | ## Changelog 52 | 53 | * 03/24/17: Rename repo to reStart-angularjs. 54 | * 10/18/16: Upgrade to Angular 1.5.8. Upgrade jQuery to 3.1.1. Upgrade Modernizr to 3.3.1 55 | * 2/27/16: Upgrade to Angular 1.5.0 56 | * 12/04/15: Add ESLint and upgrade to Angular 1.4.8 57 | * 11/23/15: Rename module and folders for better scalability. Additional dependency upgrades and styleguide compliance edits. 58 | * 11/16/15: App-wide updates to greatly enhance base features, upgrade dependencies, and comply much more fully with John Papa's AngularJS styleguide 59 | * 10/18/15: Upgrade to Angular 1.4.7, upgrade `gulp-sass` to use latest and lowercase package name (for Node v4), add 60 | error response to `$http` promises 61 | * 8/23/15: Add gulp `connect` and server task 62 | * 8/19/15: Upgrade to Angular 1.4.4, upgrade to jQuery 2.1.4, fix `controllerAs` to reference named functions instead of using anonymous functions 63 | * 5/29/15: Upgrade to Angular 1.4.0 64 | * **release v0.2.0-beta** - 5/02/15: Refine Sass, update menu styles, get rid of anonymous functions, add jsDoc 65 | comments, add data, deploy demo -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "restart-angularjs", 3 | "version": "0.2.3", 4 | "author": "Kim Maida", 5 | "description": "Mobile first responsive AngularJS boilerplate", 6 | "main": "index.html", 7 | "repository": { 8 | "type": "git", 9 | "url": "https://github.com/kmaida/reStart-angularjs.git" 10 | }, 11 | "keywords": [ 12 | "angular", 13 | "sass", 14 | "gulp", 15 | "responsive" 16 | ], 17 | "license": "MIT", 18 | "bugs": { 19 | "url": "https://github.com/kmaida/reStart-angularjs/issues" 20 | }, 21 | "scripts": { 22 | "test": "echo \"Error: no test specified\" && exit 1" 23 | }, 24 | "homepage": "https://github.com/kmaida/reStart-angularjs", 25 | "dependencies": {}, 26 | "devDependencies": { 27 | "eslint-config-angular": "^0.4.0", 28 | "eslint-plugin-angular": "^0.14.0", 29 | "gulp": "^3.9.1", 30 | "gulp-autoprefixer": "^2.3.1", 31 | "gulp-concat": "^2.6.0", 32 | "gulp-connect": "^2.2.0", 33 | "gulp-debug": "^2.1.2", 34 | "gulp-eslint": "^1.1.1", 35 | "gulp-imagemin": "^2.4.0", 36 | "gulp-minify-css": "^1.2.2", 37 | "gulp-sass": "^2.1.1", 38 | "gulp-sourcemaps": "^1.6.0", 39 | "gulp-svg-sprite": "^1.2.16", 40 | "gulp-uglify": "^1.5.1", 41 | "gulp-util": "^3.0.7", 42 | "imagemin-gifsicle": "^4.2.0", 43 | "imagemin-mozjpeg": "^5.1.0", 44 | "imagemin-optipng": "^4.3.0", 45 | "imagemin-pngquant": "^4.2.0", 46 | "imagemin-svgo": "^4.2.0" 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /src/.htaccess: -------------------------------------------------------------------------------- 1 | 2 | RewriteEngine On 3 | RewriteCond %{REQUEST_FILENAME} !-d 4 | RewriteCond %{REQUEST_FILENAME} !-f 5 | RewriteCond %{REQUEST_METHOD} !OPTIONS 6 | RewriteRule ^(.*)$ index.html [L] 7 | 8 | 9 | # Allow cross-origin access to web fonts. 10 | 11 | 12 | Header set Access-Control-Allow-Origin "*" 13 | 14 | 15 | 16 | # ---------------------------------------------------------------------- 17 | # | Compression | 18 | # ---------------------------------------------------------------------- 19 | 20 | 21 | 22 | # Force compression for mangled `Accept-Encoding` request headers 23 | # https://developer.yahoo.com/blogs/ydn/pushing-beyond-gzipping-25601.html 24 | 25 | 26 | 27 | SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding 28 | RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding 29 | 30 | 31 | 32 | # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 33 | 34 | # Compress all output labeled with one of the following media types. 35 | # 36 | # (!) For Apache versions below version 2.3.7 you don't need to 37 | # enable `mod_filter` and can remove the `` 38 | # and `` lines as `AddOutputFilterByType` is still in 39 | # the core directives. 40 | # 41 | # https://httpd.apache.org/docs/current/mod/mod_filter.html#addoutputfilterbytype 42 | 43 | 44 | AddOutputFilterByType DEFLATE "application/atom+xml" \ 45 | "application/javascript" \ 46 | "application/json" \ 47 | "application/ld+json" \ 48 | "application/manifest+json" \ 49 | "application/rdf+xml" \ 50 | "application/rss+xml" \ 51 | "application/schema+json" \ 52 | "application/vnd.geo+json" \ 53 | "application/vnd.ms-fontobject" \ 54 | "application/x-font-ttf" \ 55 | "application/x-javascript" \ 56 | "application/x-web-app-manifest+json" \ 57 | "application/xhtml+xml" \ 58 | "application/xml" \ 59 | "font/eot" \ 60 | "font/opentype" \ 61 | "image/bmp" \ 62 | "image/svg+xml" \ 63 | "image/vnd.microsoft.icon" \ 64 | "image/x-icon" \ 65 | "text/cache-manifest" \ 66 | "text/css" \ 67 | "text/html" \ 68 | "text/javascript" \ 69 | "text/plain" \ 70 | "text/vcard" \ 71 | "text/vnd.rim.location.xloc" \ 72 | "text/vtt" \ 73 | "text/x-component" \ 74 | "text/x-cross-domain-policy" \ 75 | "text/xml" 76 | 77 | 78 | 79 | # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 80 | 81 | # Map the following filename extensions to the specified 82 | # encoding type in order to make Apache serve the file types 83 | # with the appropriate `Content-Encoding` response header 84 | # (do note that this will NOT make Apache compress them!). 85 | # 86 | # If these files types would be served without an appropriate 87 | # `Content-Enable` response header, client applications (e.g.: 88 | # browsers) wouldn't know that they first need to uncompress 89 | # the response, and thus, wouldn't be able to understand the 90 | # content. 91 | # 92 | # https://httpd.apache.org/docs/current/mod/mod_mime.html#addencoding 93 | 94 | 95 | AddEncoding gzip svgz 96 | 97 | 98 | -------------------------------------------------------------------------------- /src/assets/css/scss/core/_base.scss: -------------------------------------------------------------------------------- 1 | /*-------------------- 2 | CSS RESET 3 | --------------------*/ 4 | 5 | html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, 6 | a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, 7 | kbd, q, s, samp, small, strong, tt, var, dl, dt, 8 | dd, ol, ul, li, fieldset, form, input, button, textarea, label, legend, table, caption, 9 | tbody, tfoot, thead, tr, th, td, 10 | article, aside, canvas, details, figcaption, figure, 11 | footer, header, hgroup, menu, nav, section { 12 | margin: 0; padding: 0; 13 | border: 0; 14 | border-radius: 0; /* for iOS */ 15 | font-weight: inherit; font-style: inherit; font-family: inherit; 16 | line-height: 1; 17 | text-decoration: none; 18 | vertical-align: baseline; 19 | } 20 | html { overflow-y: scroll; -webkit-text-size-adjust: 100%; } 21 | ol, ul { list-style: none; } 22 | table { border-collapse: collapse; border-spacing: 0; } 23 | caption, th, td { text-align: left; font-weight: normal; } 24 | sup, sub { line-height: 1; } 25 | h1, h2, h3, h4, h5, h6 { font-weight: normal; } 26 | article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } 27 | *,*:before,*:after { 28 | box-sizing: border-box; 29 | } 30 | 31 | /*-------------------- 32 | BASICS 33 | --------------------*/ 34 | 35 | /*-- Normalize --*/ 36 | 37 | em { font-style: italic; } 38 | strong { font-weight: bold; } 39 | q:lang(en) { quotes: '“' '”' '‘' '’'; } 40 | h1, h2, h3, h4, h5, h6, p { margin-bottom: 15px; } 41 | ul { list-style: outside disc; padding-left: 24px; } 42 | ol { list-style: outside decimal; padding-left: 24px; } 43 | a, label, input[type=button], input[type=submit], button { cursor: pointer; } 44 | del { text-decoration: line-through; } 45 | abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; } 46 | pre,code { background: #eee; border: 1px solid #ccc; font-family: Consolas, 'Lucida Console', 'Courier New', serif; padding: 2%; } 47 | input, select, textarea { border: 1px solid #ccc; font-family: inherit; font-size: inherit; padding: 3px 6px; } 48 | input, select { vertical-align: middle; } 49 | textarea { overflow: auto; } /* prevents scrollbar from showing up when unneeded in IE */ 50 | small, sup, sub { font-size: 85%; } 51 | sup { vertical-align: super; } 52 | sub { vertical-align: sub; } 53 | table { margin: 10px 0; padding: 3px; } 54 | thead { border-bottom: 2px solid $color-border; } 55 | th { font-weight: bold; } 56 | th, tr, td { padding: 4px 12px; } 57 | tr { border-bottom: 1px solid $color-border} 58 | 59 | /*-- Clearfix --*/ 60 | 61 | .clearfix:before, 62 | .clearfix:after { 63 | content: " "; 64 | display: table; 65 | } 66 | .clearfix:after { clear: both; } 67 | .ie7 .clearfix { zoom: 1; } 68 | 69 | /*-- ng-cloak: prevent FOUC before Angular JavaScript loads --*/ 70 | 71 | [ng\:cloak], 72 | [ng-cloak], 73 | [data-ng-cloak], 74 | [x-ng-cloak], 75 | .ng-cloak, 76 | .x-ng-cloak { 77 | display: none !important; 78 | } 79 | 80 | /*-- Image Replacement --*/ 81 | 82 | .ir { 83 | overflow: hidden; 84 | text-indent: 200%; 85 | white-space: nowrap; 86 | } 87 | 88 | /*-- Inline link touch targets --*/ 89 | 90 | .touch p a { 91 | margin: 0 -.5em; 92 | padding: 0 .5em; 93 | } 94 | 95 | /*-- Forms --*/ 96 | 97 | input[type="text"], 98 | input[type="number"], 99 | input[type="password"], 100 | textarea { 101 | font-size: 16px; /* for iOS phones */ 102 | } 103 | input.ng-dirty.ng-invalid { 104 | border-color: $color-invalid-rgba; 105 | box-shadow: 0 0 6px $color-invalid-rgba; 106 | } 107 | button { 108 | border-radius: 4px; 109 | display: inline-block; 110 | font-size: inherit; 111 | padding: 5px 4px; 112 | vertical-align: middle; 113 | } -------------------------------------------------------------------------------- /src/assets/css/scss/core/_fonts.scss: -------------------------------------------------------------------------------- 1 | /*-------------------- 2 | FONTS 3 | --------------------*/ 4 | 5 | /* Full @font-face declaration */ 6 | 7 | @media only screen and (max-width: 320px), screen and (max-device-width: 720px) and (orientation:portrait), screen and (max-device-width: 1280px) and (orientation:landscape) { 8 | /* for mobile devices, only load SVG font 9 | see: http://stackoverflow.com/questions/20890489/font-face-declarations-dont-work-in-android-4-3-internet-browser 10 | 11 | @font-face { 12 | font-family: 'FontName'; 13 | src: url('../fonts/FontName.svg#FontName') format('svg'); 14 | font-weight: normal; 15 | font-style: normal; 16 | } */ 17 | } -------------------------------------------------------------------------------- /src/assets/css/scss/core/_icons.scss: -------------------------------------------------------------------------------- 1 | /*-------------------- 2 | ICONS 3 | --------------------*/ 4 | 5 | /* 6 | SVG icon styling: 7 | 8 | - color dictates fill color 9 | - stroke: $color-black; only needed if the SVG has a stroke; if just a path, it will pick up color 10 | - must set both height and width or icon will grow to default size (will not skew ratio, will just match smallest size) 11 | 12 | HTML Example: 13 | 14 | 15 | 16 | 17 | 18 | - Replace the #caret-right with your icon's filename (the SVG ID) 19 | */ 20 | 21 | .icon { 22 | color: $color-icon-default; 23 | display: inline-block; 24 | fill: currentColor; 25 | height: 16px; // default 26 | width: 16px; // default 27 | } 28 | .caret-up, 29 | .caret-down, 30 | .caret-left, 31 | .caret-right { 32 | margin-bottom: -2px; 33 | } -------------------------------------------------------------------------------- /src/assets/css/scss/core/_layout.scss: -------------------------------------------------------------------------------- 1 | /*-------------------- 2 | LAYOUT FUNCTIONALITY 3 | --------------------*/ 4 | 5 | body { 6 | min-width: 320px; 7 | } 8 | .layout-overflow { 9 | overflow: hidden; /* necessary to handle offcanvas scrollbar behavior */ 10 | } 11 | 12 | /*------------------------------------------------------------------------- Off-canvas Functionality --*/ 13 | 14 | /*-- Content canvas wrapper --*/ 15 | 16 | .layout-canvas { 17 | backface-visibility: hidden; 18 | position: relative; 19 | left: 0; 20 | width: 100%; 21 | 22 | @include mq($large) { 23 | transition: none; 24 | transform: none; 25 | } 26 | .csstransforms3d & { 27 | transition: transform 250ms ease; 28 | transform: translate3d(0,0,0); 29 | } 30 | .csstransforms3d &.nav-open { 31 | transform: translate3d(270px,0,0); 32 | } 33 | .no-csstransforms3d &.nav-open { 34 | left: 270px; 35 | } 36 | } 37 | 38 | /*-- Header --*/ 39 | 40 | .header-mobile-page { 41 | @include mq($large) { 42 | display: none; 43 | } 44 | } 45 | 46 | /*-- Navigation --*/ 47 | 48 | .header .nav { 49 | backface-visibility: hidden; 50 | display: none; /* deal with FOUC */ 51 | height: 100%; 52 | overflow-y: auto; 53 | position: absolute; 54 | top: 0; 55 | width: 270px; 56 | 57 | @include mq($large) { 58 | display: block; 59 | position: relative; 60 | width: 100%; 61 | } 62 | .nav-closed &, 63 | .nav-open & { 64 | display: block; /* deal with FOUC */ 65 | } 66 | .csstransforms3d & { 67 | transform: translate3d(-100%,0,0); 68 | 69 | @include mq($large) { 70 | transform: none; 71 | } 72 | } 73 | .no-csstransforms3d .nav-closed & { 74 | left: -100%; 75 | } 76 | .no-csstransforms3d .nav-open & { 77 | left: -270px; 78 | 79 | @include mq($large) { 80 | left: 0; 81 | } 82 | } 83 | } -------------------------------------------------------------------------------- /src/assets/css/scss/core/_presentation.scss: -------------------------------------------------------------------------------- 1 | /*-------------------- 2 | PRESENTATION 3 | --------------------*/ 4 | 5 | body { 6 | background: $color-bg-light; 7 | color: $color-text; 8 | font: normal 16px/1.2 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif; 9 | } 10 | .layout-canvas { 11 | background: $color-bg; 12 | } 13 | 14 | /*------------------------------------------------------------------------- Content --*/ 15 | 16 | .content-wrapper { 17 | padding: $padding-screen-small; 18 | 19 | @include mq($large) { 20 | padding: $padding-screen-large; 21 | } 22 | } 23 | .content-heading { 24 | font-size: 36px; 25 | margin: -1.5% 0 20px; 26 | 27 | @include mq($large) { 28 | margin-top: 0; 29 | text-align: center; 30 | } 31 | } -------------------------------------------------------------------------------- /src/assets/css/scss/core/_print.scss: -------------------------------------------------------------------------------- 1 | /*-------------------- 2 | PRINT 3 | --------------------*/ 4 | 5 | @media print { 6 | 7 | * { 8 | background: #fff; 9 | } 10 | body { 11 | color: #000; 12 | font: normal 16px/1.4 Georgia, 'Times New Roman', serif; 13 | } 14 | 15 | /*-- Hidden Elements --*/ 16 | 17 | .header, 18 | .footer { 19 | display: none; 20 | } 21 | 22 | /*-- Show link URLs --*/ 23 | 24 | a:link, 25 | a:visited { 26 | color: blue; 27 | text-decoration: underline; 28 | } 29 | a:link:after, 30 | a:visited:after { 31 | content:" [" attr(href) "] "; 32 | font-size: 75%; 33 | } 34 | 35 | } -------------------------------------------------------------------------------- /src/assets/css/scss/core/partials/_colors.vars.scss: -------------------------------------------------------------------------------- 1 | /*-------------------- 2 | COLOR VARIABLES 3 | --------------------*/ 4 | 5 | /*-- Color definitions --*/ 6 | 7 | /* Hex code names from http://name-of-color.com/ */ 8 | 9 | $color-black: #000; 10 | $color-white: #fff; 11 | $color-mineShaft: #333; 12 | $color-davysGray: #555; 13 | $color-celeste: #ccc; 14 | $color-gallery: #eee; 15 | 16 | /* Color partially defined by opacity */ 17 | 18 | $color-gray-rgba: rgba(255,255,255,.5); 19 | $color-red-rgba: rgba(169,68,66,.6); 20 | 21 | /*-- Color by function --*/ 22 | 23 | $color-bg-light: $color-gallery; 24 | $color-bg: $color-white; 25 | $color-border: $color-celeste; 26 | $color-module-bg: $color-celeste; 27 | $color-nav-bg: $color-davysGray; 28 | $color-text: $color-mineShaft; 29 | $color-icon-default: $color-mineShaft; 30 | $color-link-contrast: $color-white; 31 | $color-disabled-rgba: $color-gray-rgba; 32 | $color-invalid-rgba: $color-red-rgba; -------------------------------------------------------------------------------- /src/assets/css/scss/core/partials/_layout.vars.scss: -------------------------------------------------------------------------------- 1 | /*-------------------- 2 | LAYOUT VARIABLES 3 | --------------------*/ 4 | 5 | /*-- Padding --*/ 6 | 7 | $padding-screen-small: 3%; 8 | $padding-screen-large: 1.5% 3%; -------------------------------------------------------------------------------- /src/assets/css/scss/core/partials/_responsive.partial.scss: -------------------------------------------------------------------------------- 1 | /*-------------------- 2 | RESPONSIVE 3 | --------------------*/ 4 | 5 | /*-- Variables --*/ 6 | 7 | $small: 'screen and (max-width: 767px)'; // should not use this (default is mobile-first) 8 | $large: 'screen and (min-width: 768px)'; 9 | 10 | /*-- Mixins --*/ 11 | 12 | @mixin mq($mqString) { 13 | @media #{$mqString} { 14 | @content; 15 | } 16 | } -------------------------------------------------------------------------------- /src/assets/css/scss/modules/_footer.scss: -------------------------------------------------------------------------------- 1 | /*-------------------- 2 | FOOTER 3 | --------------------*/ 4 | 5 | .footer { 6 | padding: $padding-screen-small; 7 | text-align: center; 8 | 9 | @include mq($large) { 10 | padding: $padding-screen-large; 11 | } 12 | } -------------------------------------------------------------------------------- /src/assets/css/scss/modules/_header.scss: -------------------------------------------------------------------------------- 1 | /*-------------------- 2 | HEADER 3 | --------------------*/ 4 | 5 | .header-mobile-page { 6 | background: $color-nav-bg; 7 | color: $color-white; 8 | height: 50px; 9 | margin-bottom: 10px; 10 | position: relative; 11 | 12 | &-siteTitle { 13 | font-size: 30px; 14 | line-height: 50px; 15 | margin: 0; 16 | padding: 0 0 0 50px; 17 | position: absolute; 18 | top: 0; 19 | text-align: center; 20 | width: 100%; 21 | } 22 | } -------------------------------------------------------------------------------- /src/assets/css/scss/modules/_loading.scss: -------------------------------------------------------------------------------- 1 | /*-------------------- 2 | LOADING 3 | --------------------*/ 4 | 5 | .loading { 6 | &-wrapper { 7 | height: 100%; 8 | position: fixed; 9 | top: 0; left: 0; 10 | width: 100%; 11 | z-index: 999; 12 | } 13 | &-overlay { 14 | background: rgba(255,255,255,.9); 15 | position: absolute; 16 | top: 0; bottom: 0; 17 | width: 100%; 18 | } 19 | &-spinner { 20 | margin: -16px 0 0 -16px; 21 | position: absolute; 22 | top: 50%; left: 50%; 23 | } 24 | } -------------------------------------------------------------------------------- /src/assets/css/scss/modules/_nav.scss: -------------------------------------------------------------------------------- 1 | /*-------------------- 2 | NAVIGATION 3 | --------------------*/ 4 | 5 | /*------------------------------------------------------------------------- Hamburger menu toggle --*/ 6 | 7 | .toggle-offcanvas { 8 | background: $color-nav-bg; 9 | border-right: 1px solid $color-disabled-rgba; 10 | display: inline-block; 11 | height: 50px; 12 | padding: 23.5px 13px; 13 | position: relative; 14 | text-align: center; 15 | width: 50px; 16 | z-index: 100; 17 | 18 | span, 19 | span:before, 20 | span:after { 21 | background: $color-white; 22 | border-radius: 1px; 23 | content: ''; 24 | display: block; 25 | height: 3px; 26 | position: absolute; 27 | transition: all 250ms ease-in-out; 28 | width: 24px; 29 | } 30 | span { 31 | &:before { 32 | top: -9px; 33 | } 34 | &:after { 35 | bottom: -9px; 36 | } 37 | } 38 | .nav-open & { 39 | span { 40 | background: transparent; 41 | 42 | &:before, 43 | &:after { 44 | top: 0; 45 | } 46 | &:before { 47 | transform: rotate(45deg); 48 | } 49 | &:after { 50 | transform: rotate(-45deg); 51 | } 52 | } 53 | } 54 | } 55 | 56 | /*------------------------------------------------------------------------- Navigation --*/ 57 | 58 | .header .nav { 59 | box-shadow: inset -8px 0 8px -6px rgba(0,0,0,0.2); 60 | padding: $padding-screen-small; 61 | 62 | @include mq($large) { 63 | background: $color-nav-bg; 64 | box-shadow: none; 65 | padding: $padding-screen-large; 66 | } 67 | 68 | .active .nav-list-item-text { 69 | font-weight: bold; 70 | 71 | @include mq($large) { 72 | border-bottom: 1px solid $color-disabled-rgba; 73 | } 74 | } 75 | &-list { 76 | list-style: none; 77 | margin-bottom: 0; 78 | padding-left: 0; 79 | 80 | a { 81 | display: block; 82 | padding: 6px; 83 | 84 | &:hover, 85 | &:active, 86 | &:focus { 87 | text-decoration: none; 88 | } 89 | } 90 | 91 | @include mq($large) { 92 | display: flex; 93 | flex-wrap: wrap; 94 | justify-content: center; 95 | padding: 0; 96 | width: 100%; 97 | 98 | a, 99 | a:hover, 100 | a:active, 101 | a:focus { 102 | color: $color-white; 103 | } 104 | li { 105 | padding: 0 20px; 106 | } 107 | } 108 | } 109 | } -------------------------------------------------------------------------------- /src/assets/css/scss/pages/_404.scss: -------------------------------------------------------------------------------- 1 | /*-------------------- 2 | 404 3 | --------------------*/ 4 | 5 | .error404-wrapper { 6 | 7 | } -------------------------------------------------------------------------------- /src/assets/css/scss/styles.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * reStart Boilerplate / reStart Angular 3 | * Author: Kim Maida 4 | * Author URI: 5 | * Source: 6 | * License: GNU Public License 7 | */ 8 | 9 | /*-- Vendors --*/ 10 | 11 | @import 'vendor/foundation'; 12 | 13 | /*-- Core --*/ 14 | 15 | // partials 16 | @import 'core/partials/colors.vars'; 17 | @import 'core/partials/layout.vars'; 18 | @import 'core/partials/responsive.partial'; 19 | 20 | @import 'core/base'; 21 | @import 'core/fonts'; 22 | @import 'core/icons'; 23 | @import 'core/presentation'; 24 | @import 'core/layout'; 25 | @import 'core/print'; 26 | 27 | /*-- Modules --*/ 28 | 29 | @import 'modules/header'; 30 | @import 'modules/nav'; 31 | @import 'modules/footer'; 32 | @import 'modules/loading'; 33 | 34 | /*-- Pages --*/ 35 | 36 | @import 'pages/404'; -------------------------------------------------------------------------------- /src/assets/css/scss/vendor/_foundation.scss: -------------------------------------------------------------------------------- 1 | @import 'foundation/foundation'; 2 | 3 | @include foundation-everything(true); -------------------------------------------------------------------------------- /src/assets/css/scss/vendor/foundation/components/_accordion-menu.scss: -------------------------------------------------------------------------------- 1 | //// 2 | /// @group accordion-menu 3 | //// 4 | 5 | /// Sets if accordion menus have the default arrow styles. 6 | /// @type Boolean 7 | $accordionmenu-arrows: true !default; 8 | 9 | /// Sets accordion menu arrow color if arrow is used. 10 | /// @type Color 11 | $accordionmenu-arrow-color: $primary-color !default; 12 | 13 | @mixin foundation-accordion-menu { 14 | @if $accordionmenu-arrows { 15 | .is-accordion-submenu-parent > a { 16 | position: relative; 17 | 18 | &::after { 19 | @include css-triangle(6px, $accordionmenu-arrow-color, down); 20 | position: absolute; 21 | top: 50%; 22 | margin-top: -4px; 23 | right: 1rem; 24 | } 25 | } 26 | 27 | .is-accordion-submenu-parent[aria-expanded='true'] > a::after { 28 | transform-origin: 50% 50%; 29 | transform: scaleY(-1); 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/assets/css/scss/vendor/foundation/components/_accordion.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Sites by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | //// 6 | /// @group accordion 7 | //// 8 | 9 | /// Default background color of an accordion group. 10 | /// @type Color 11 | $accordion-background: $white !default; 12 | 13 | /// If `true`, adds plus and minus icons to the side of each accordion title. 14 | /// @type Boolean 15 | $accordion-plusminus: true !default; 16 | 17 | /// Default text color for items in a Menu. 18 | /// @type Color 19 | $accordion-item-color: foreground($accordion-background, $primary-color) !default; 20 | 21 | /// Default background color on hover for items in a Menu. 22 | /// @type Color 23 | $accordion-item-background-hover: $light-gray !default; 24 | 25 | /// Default padding of an accordion item. 26 | /// @type Number | List 27 | $accordion-item-padding: 1.25rem 1rem !default; 28 | 29 | /// Default background color of tab content. 30 | /// @type Color 31 | $accordion-content-background: $white !default; 32 | 33 | /// Default border color of tab content. 34 | /// @type Color 35 | $accordion-content-border: 1px solid $light-gray !default; 36 | 37 | /// Default text color of tab content. 38 | /// @type Color 39 | $accordion-content-color: foreground($accordion-content-background, $body-font-color) !default; 40 | 41 | /// Default padding for tab content. 42 | /// @type Number | List 43 | $accordion-content-padding: 1rem !default; 44 | 45 | /// Adds styles for an accordion container. Apply this to the same element that gets `data-accordion`. 46 | @mixin accordion-container { 47 | list-style-type: none; 48 | background: $accordion-background; 49 | margin-#{$global-left}: 0; 50 | } 51 | 52 | /// Adds styles for the accordion item. Apply this to the list item within an accordion ul. 53 | @mixin accordion-item { 54 | &:first-child > :first-child { 55 | border-radius: $global-radius $global-radius 0 0; 56 | } 57 | 58 | &:last-child > :last-child { 59 | border-radius: 0 0 $global-radius $global-radius; 60 | } 61 | } 62 | 63 | /// Adds styles for the title of an accordion item. Apply this to the link within an accordion item. 64 | @mixin accordion-title { 65 | display: block; 66 | padding: $accordion-item-padding; 67 | line-height: 1; 68 | font-size: rem-calc(12); 69 | color: $accordion-item-color; 70 | position: relative; 71 | border: $accordion-content-border; 72 | border-bottom: 0; 73 | 74 | :last-child:not(.is-active) > & { 75 | border-radius: 0 0 $global-radius $global-radius; 76 | border-bottom: $accordion-content-border; 77 | } 78 | 79 | &:hover, 80 | &:focus { 81 | background-color: $accordion-item-background-hover; 82 | } 83 | 84 | @if $accordion-plusminus { 85 | &::before { 86 | content: '+'; 87 | position: absolute; 88 | #{$global-right}: 1rem; 89 | top: 50%; 90 | margin-top: -0.5rem; 91 | } 92 | 93 | .is-active > &::before { 94 | content: '–'; 95 | } 96 | } 97 | } 98 | 99 | /// Adds styles for accordion content. Apply this to the content pane below an accordion item's title. 100 | @mixin accordion-content { 101 | padding: $accordion-content-padding; 102 | display: none; 103 | border: $accordion-content-border; 104 | border-bottom: 0; 105 | background-color: $accordion-content-background; 106 | color: $accordion-content-color; 107 | 108 | :last-child > &:last-child { 109 | border-bottom: $accordion-content-border; 110 | } 111 | } 112 | 113 | @mixin foundation-accordion { 114 | .accordion { 115 | @include accordion-container; 116 | } 117 | 118 | .accordion-item { 119 | @include accordion-item; 120 | } 121 | 122 | .accordion-title { 123 | @include accordion-title; 124 | } 125 | 126 | .accordion-content { 127 | @include accordion-content; 128 | } 129 | } 130 | -------------------------------------------------------------------------------- /src/assets/css/scss/vendor/foundation/components/_badge.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Sites by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | //// 6 | /// @group badge 7 | //// 8 | 9 | /// Default background color for badges. 10 | /// @type Color 11 | $badge-background: $primary-color !default; 12 | 13 | /// Default text color for badges. 14 | /// @type Color 15 | $badge-color: foreground($badge-background) !default; 16 | 17 | /// Default padding inside badges. 18 | /// @type Number 19 | $badge-padding: 0.3em !default; 20 | 21 | /// Minimum width of a badge. 22 | /// @type Number 23 | $badge-minwidth: 2.1em !default; 24 | 25 | /// Default font size for badges. 26 | /// @type Number 27 | $badge-font-size: 0.6rem !default; 28 | 29 | /// Generates the base styles for a badge. 30 | @mixin badge { 31 | display: inline-block; 32 | padding: $badge-padding; 33 | min-width: $badge-minwidth; 34 | font-size: $badge-font-size; 35 | text-align: center; 36 | border-radius: 50%; 37 | } 38 | 39 | @mixin foundation-badge { 40 | .badge { 41 | @include badge; 42 | 43 | background: $badge-background; 44 | color: $badge-color; 45 | 46 | @each $name, $color in $foundation-palette { 47 | @if $name != primary { 48 | &.#{$name} { 49 | background: $color; 50 | color: foreground($color); 51 | } 52 | } 53 | } 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /src/assets/css/scss/vendor/foundation/components/_breadcrumbs.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Sites by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | //// 6 | /// @group breadcrumbs 7 | //// 8 | 9 | /// Margin around a breadcrumbs container. 10 | /// @type Number 11 | $breadcrumbs-margin: 0 0 $global-margin 0 !default; 12 | 13 | /// Font size of breadcrumb links. 14 | /// @type Number 15 | $breadcrumbs-item-font-size: rem-calc(11) !default; 16 | 17 | /// Color of breadcrumb links. 18 | /// @type Color 19 | $breadcrumbs-item-color: $primary-color !default; 20 | 21 | /// Color of the active breadcrumb link. 22 | /// @type Color 23 | $breadcrumbs-item-color-current: $black !default; 24 | 25 | /// Opacity of disabled breadcrumb links. 26 | /// @type Number 27 | $breadcrumbs-item-color-disabled: $medium-gray !default; 28 | 29 | /// Margin between breadcrumb items. 30 | /// @type Number 31 | $breadcrumbs-item-margin: 0.75rem !default; 32 | 33 | /// If `true`, makes breadcrumb links uppercase. 34 | /// @type Boolean 35 | $breadcrumbs-item-uppercase: true !default; 36 | 37 | /// If `true`, adds a slash between breadcrumb links. 38 | /// @type Boolean 39 | $breadcrumbs-item-slash: true !default; 40 | 41 | /// Adds styles for a breadcrumbs container, along with the styles for the `
  • ` and `` elements inside of it. 42 | @mixin breadcrumbs-container { 43 | @include clearfix; 44 | list-style: none; 45 | margin: $breadcrumbs-margin; 46 | 47 | // Item wrapper 48 | li { 49 | float: #{$global-left}; 50 | color: $breadcrumbs-item-color-current; 51 | font-size: $breadcrumbs-item-font-size; 52 | cursor: default; 53 | 54 | @if $breadcrumbs-item-uppercase { 55 | text-transform: uppercase; 56 | } 57 | 58 | @if $breadcrumbs-item-slash { 59 | // Need to escape the backslash 60 | $slash: if($global-text-direction == 'ltr', '/', '\\'); 61 | 62 | &:not(:last-child)::after { 63 | color: $medium-gray; 64 | content: $slash; 65 | margin: 0 $breadcrumbs-item-margin; 66 | position: relative; 67 | top: 1px; 68 | opacity: 1; 69 | } 70 | } 71 | @else { 72 | margin-#{$global-right}: $breadcrumbs-item-margin; 73 | } 74 | } 75 | 76 | // Page links 77 | a { 78 | color: $breadcrumbs-item-color; 79 | 80 | &:hover { 81 | text-decoration: underline; 82 | } 83 | } 84 | } 85 | 86 | @mixin foundation-breadcrumbs { 87 | .breadcrumbs { 88 | @include breadcrumbs-container; 89 | 90 | .disabled { 91 | color: $breadcrumbs-item-color-disabled; 92 | cursor: not-allowed; 93 | } 94 | } 95 | } 96 | -------------------------------------------------------------------------------- /src/assets/css/scss/vendor/foundation/components/_button-group.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Sites by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | //// 6 | /// @group button-group 7 | //// 8 | 9 | /// Margin for button groups. 10 | /// @type Number 11 | $buttongroup-margin: 1rem !default; 12 | 13 | /// Margin between buttons in a button group. 14 | /// @type Border 15 | $buttongroup-spacing: 1px !default; 16 | 17 | /// Selector for the buttons inside a button group. 18 | /// @type String 19 | $buttongroup-child-selector: '.button' !default; 20 | 21 | /// Maximum number of buttons that can be in an even-width button group. 22 | /// @type Number 23 | $buttongroup-expand-max: 6 !default; 24 | 25 | /// Add styles for a button group container. 26 | /// @param {String} $child-selector [$buttongroup-child-selector] - Selector for the buttons inside a button group. 27 | @mixin button-group( 28 | $child-selector: $buttongroup-child-selector 29 | ) { 30 | @include clearfix; 31 | margin-bottom: $buttongroup-margin; 32 | 33 | @if $global-flexbox { 34 | display: flex; 35 | flex-wrap: nowrap; 36 | align-items: stretch; 37 | } 38 | @else { 39 | font-size: 0; 40 | } 41 | 42 | #{$child-selector} { 43 | margin: 0; 44 | margin-#{$global-right}: $buttongroup-spacing; 45 | margin-bottom: $buttongroup-spacing; 46 | font-size: map-get($button-sizes, default); 47 | 48 | @if $global-flexbox { 49 | flex: 0 0 auto; 50 | } 51 | 52 | &:last-child { 53 | margin-#{$global-right}: 0; 54 | } 55 | } 56 | } 57 | 58 | /// Creates a full-width button group, making each button equal width. 59 | /// @param {String} $selector [$buttongroup-child-selector] - Selector for the buttons inside a button group. 60 | @mixin button-group-expand( 61 | $selector: $buttongroup-child-selector, 62 | $count: null 63 | ) { 64 | @if not $global-flexbox { 65 | margin-#{$global-right}: -$buttongroup-spacing; 66 | 67 | &::before, 68 | &::after { 69 | display: none; 70 | } 71 | } 72 | 73 | // scss-lint:disable ZeroUnit 74 | #{$selector} { 75 | @if $global-flexbox { 76 | flex: 1 1 0px; 77 | } 78 | @else { 79 | @for $i from 2 through $buttongroup-expand-max { 80 | &:first-child:nth-last-child(#{$i}) { 81 | &, &:first-child:nth-last-child(#{$i}) ~ #{$selector} { 82 | display: inline-block; 83 | width: calc(#{percentage(1 / $i)} - #{$buttongroup-spacing}); 84 | margin-#{$global-right}: $buttongroup-spacing; 85 | 86 | &:last-child { 87 | margin-#{$global-right}: $buttongroup-spacing * -$buttongroup-expand-max; 88 | } 89 | } 90 | } 91 | } 92 | } 93 | } 94 | } 95 | 96 | /// Stacks the buttons in a button group. 97 | /// @param {String} $selector [$buttongroup-child-selector] - Selector for the buttons inside the button group. 98 | @mixin button-group-stack( 99 | $selector: $buttongroup-child-selector 100 | ) { 101 | @if $global-flexbox { 102 | flex-wrap: wrap; 103 | } 104 | 105 | #{$selector} { 106 | @if $global-flexbox { 107 | flex: 0 0 100%; 108 | } 109 | @else { 110 | width: 100%; 111 | } 112 | 113 | &:last-child { 114 | margin-bottom: 0; 115 | } 116 | } 117 | } 118 | 119 | /// Un-stacks the buttons in a button group. 120 | /// @param {String} $selector [$buttongroup-child-selector] - Selector for the buttons inside the button group. 121 | @mixin button-group-unstack( 122 | $selector: $buttongroup-child-selector 123 | ) { 124 | // scss-lint:disable ZeroUnit 125 | #{$selector} { 126 | @if $global-flexbox { 127 | flex: 1 1 0px; 128 | } 129 | @else { 130 | width: auto; 131 | } 132 | margin-bottom: 0; 133 | } 134 | } 135 | 136 | @mixin foundation-button-group { 137 | .button-group { 138 | @include button-group; 139 | 140 | // Sizes 141 | @each $size, $value in map-remove($button-sizes, default) { 142 | &.#{$size} #{$buttongroup-child-selector} { 143 | font-size: $value; 144 | } 145 | } 146 | 147 | // Even-width Group 148 | &.expanded { @include button-group-expand; } 149 | 150 | // Colors 151 | @each $name, $color in $foundation-palette { 152 | @if $button-fill != hollow { 153 | &.#{$name} #{$buttongroup-child-selector} { 154 | @include button-style($color, auto, auto); 155 | } 156 | } 157 | @else { 158 | &.#{$name} #{$buttongroup-child-selector} { 159 | @include button-hollow; 160 | @include button-hollow-style($color); 161 | } 162 | } 163 | } 164 | 165 | &.stacked, 166 | &.stacked-for-small, 167 | &.stacked-for-medium { 168 | @include button-group-stack; 169 | } 170 | 171 | &.stacked-for-small { 172 | @include breakpoint(medium) { 173 | @include button-group-unstack; 174 | } 175 | } 176 | 177 | &.stacked-for-medium { 178 | @include breakpoint(large) { 179 | @include button-group-unstack; 180 | } 181 | } 182 | 183 | // scss-lint:disable MergeableSelector 184 | &.stacked-for-small.expanded { 185 | @include breakpoint(small only) { 186 | display: block; 187 | 188 | #{$buttongroup-child-selector} { 189 | display: block; 190 | margin-#{$global-right}: 0; 191 | } 192 | } 193 | } 194 | } 195 | } 196 | -------------------------------------------------------------------------------- /src/assets/css/scss/vendor/foundation/components/_callout.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Sites by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | //// 6 | /// @group callout 7 | //// 8 | 9 | /// Default background color. 10 | /// @type Color 11 | $callout-background: $white !default; 12 | 13 | /// Default fade value for callout backgrounds. 14 | /// @type Number 15 | $callout-background-fade: 85% !default; 16 | 17 | /// Default border style for callouts. 18 | /// @type List 19 | $callout-border: 1px solid rgba($black, 0.25) !default; 20 | 21 | /// Default bottom margin for callouts. 22 | /// @type Number 23 | $callout-margin: 0 0 1rem 0 !default; 24 | 25 | /// Default inner padding for callouts. 26 | /// @type Number 27 | $callout-padding: 1rem !default; 28 | 29 | /// Default font color for callouts. 30 | /// @type Color 31 | $callout-font-color: $body-font-color !default; 32 | 33 | /// Default font color for callouts, if the callout has a dark background. 34 | /// @type Color 35 | $callout-font-color-alt: $body-background !default; 36 | 37 | /// Default border radius for callouts. 38 | /// @type Color 39 | $callout-radius: $global-radius !default; 40 | 41 | /// Amount to tint links used within colored panels. Set to `false` to disable this feature. 42 | /// @type Number | Boolean 43 | $callout-link-tint: 30% !default; 44 | 45 | /// Adds basic styles for a callout, including padding and margin. 46 | @mixin callout-base() { 47 | margin: $callout-margin; 48 | padding: $callout-padding; 49 | border: $callout-border; 50 | border-radius: $callout-radius; 51 | position: relative; 52 | color: $callout-font-color; 53 | 54 | // Respect the padding, fool. 55 | > :first-child { 56 | margin-top: 0; 57 | } 58 | 59 | > :last-child { 60 | margin-bottom: 0; 61 | } 62 | } 63 | 64 | /// Generate quick styles for a callout using a single color as a baseline. 65 | /// @param {Color} $color [$callout-background] - Color to use. 66 | @mixin callout-style($color: $callout-background) { 67 | $background: scale-color($color, $lightness: $callout-background-fade); 68 | 69 | background-color: $background; 70 | } 71 | 72 | @mixin callout-size($padding) { 73 | padding-top: $padding; 74 | padding-right: $padding; 75 | padding-bottom: $padding; 76 | padding-left: $padding; 77 | } 78 | 79 | 80 | /// Adds styles for a callout. 81 | /// @param {Color} $color [$callout-background] - Color to use. 82 | @mixin callout($color: $callout-background) { 83 | @include callout-base; 84 | @include callout-style($color); 85 | } 86 | 87 | @mixin foundation-callout { 88 | .callout { 89 | @include callout; 90 | 91 | @each $name, $color in $foundation-palette { 92 | &.#{$name} { 93 | @include callout-style($color); 94 | } 95 | } 96 | 97 | &.small { 98 | @include callout-size(0.5rem); 99 | } 100 | 101 | &.large { 102 | @include callout-size(3rem); 103 | } 104 | } 105 | } 106 | -------------------------------------------------------------------------------- /src/assets/css/scss/vendor/foundation/components/_close-button.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Sites by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | //// 6 | /// @group close-button 7 | //// 8 | 9 | /// Default position of the close button. The first value should be `right` or `left`, and the second value should be `top` or `bottom`. 10 | /// @type List 11 | $closebutton-position: right top !default; 12 | 13 | /// Right (or left) offset for a close button. 14 | /// @type Number 15 | $closebutton-offset-horizontal: 1rem !default; 16 | 17 | /// Top (or bottom) offset for a close button. 18 | /// @type Number 19 | $closebutton-offset-vertical: 0.5rem !default; 20 | 21 | /// Default font size of the close button. 22 | /// @type Number 23 | $closebutton-size: 2em !default; 24 | 25 | /// The line-height of the close button. It affects the spacing of the element. 26 | /// @type Number 27 | $closebutton-lineheight: 1 !default; 28 | 29 | /// Default color of the close button. 30 | /// @type Color 31 | $closebutton-color: $dark-gray !default; 32 | 33 | /// Default color of the close button when being hovered on. 34 | /// @type Color 35 | $closebutton-color-hover: $black !default; 36 | 37 | /// Adds styles for a close button, using the styles in the settings variables. 38 | @mixin close-button { 39 | $x: nth($closebutton-position, 1); 40 | $y: nth($closebutton-position, 2); 41 | 42 | @include disable-mouse-outline; 43 | position: absolute; 44 | color: $closebutton-color; 45 | #{$x}: $closebutton-offset-horizontal; 46 | #{$y}: $closebutton-offset-vertical; 47 | font-size: $closebutton-size; 48 | line-height: $closebutton-lineheight; 49 | cursor: pointer; 50 | 51 | &:hover, 52 | &:focus { 53 | color: $closebutton-color-hover; 54 | } 55 | } 56 | 57 | @mixin foundation-close-button { 58 | .close-button { 59 | @include close-button; 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /src/assets/css/scss/vendor/foundation/components/_drilldown.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Sites by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | //// 6 | /// @group drilldown 7 | //// 8 | 9 | /// Transition property to use for animating menus. 10 | /// @type Transition 11 | $drilldown-transition: transform 0.15s linear !default; 12 | 13 | /// Adds arrows to drilldown items with submenus, as well as the back button. 14 | /// @type Boolean 15 | $drilldown-arrows: true !default; 16 | 17 | /// Sets drilldown arrow color if arrow is used. 18 | /// @type Color 19 | $drilldown-arrow-color: $primary-color !default; 20 | 21 | /// Background color for drilldown submenus. 22 | /// @type Color 23 | $drilldown-background: $white !default; 24 | 25 | @mixin foundation-drilldown-menu { 26 | // Applied to the Menu container 27 | .is-drilldown { 28 | position: relative; 29 | overflow: hidden; 30 | 31 | li { 32 | display: block !important; 33 | } 34 | } 35 | 36 | // Applied to nested