├── .gitignore
├── README.md
├── assets
    ├── js
    │   ├── angular-front-end-app.js
    │   ├── controllers
    │   │   ├── list-controller.js
    │   │   └── term-controller.js
    │   └── factories
    │   │   └── posts-factory.js
    └── scss
    │   ├── bootstrap
    │       ├── _bootstrap-custom.scss
    │       └── _variables.scss
    │   └── styles.scss
├── gulpfile.js
├── index.html
├── package.json
└── templates
    ├── list.html
    ├── pagination.tpl.html
    └── single.html


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | config.js
3 | build/
4 | build/*
5 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## Decoupled Angular Front End APP ##
 2 | This is a decoupled but powered by WordPress Angular app. It is a simple boilerplate to show a list and single view powered by a WordPress website that is located elsewhere.
 3 | 
 4 | ## Installation ##
 5 | * Clone/Fork
 6 | * Run `npm install`
 7 | * Create a config file in `assets/js/config.js`
 8 | * Run `gulp`
 9 | * Open up `./assets/js/angular-front-end-app.js`
10 | 
11 | ## Config File ##
12 | Your `assets/js/config.js` config file should create an object called ngWP with an index called config, with indexes for "api" and "menu" for example:
13 | 
14 | ```
15 |     var ngWP = ngWP || {};
16 |     ngWP.config = {
17 |         api: 'http://v-jpress.dev/wp-json/',
18 |         menu: 'app'
19 |     };
20 | ```
21 | 


--------------------------------------------------------------------------------
/assets/js/angular-front-end-app.js:
--------------------------------------------------------------------------------
  1 | ngWP.app = angular.module( 'angular-front-end', ['ngResource', 'ui.router', 'LocalStorageModule', 'angularUtils.directives.dirPagination'] )
  2 |     .run(function( $rootScope, localStorageService, $http ){
  3 |         console.log('app init');
  4 |         $rootScope.posts_per_page = ngWP.config.posts_per_page;
  5 | 
  6 |         /** Localize Categories **/
  7 |         $http.get(ngWP.config.api + 'wp/v2/categories' ).then(function(res){
  8 |             var cats = [];
  9 |             angular.forEach( res.data, function( value, key ) {
 10 |                 cats.push(value);
 11 |             });
 12 |             localStorageService.set( 'cats', cats );
 13 |         });
 14 | 
 15 |         /** State Change Logging **/
 16 |         $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams, options){
 17 |             //console.log( 'from ',fromState );
 18 |             //console.log( 'to ', toState );
 19 |         });
 20 |     })
 21 |     .config(
 22 |         ['localStorageServiceProvider', 'paginationTemplateProvider', '$stateProvider', '$urlRouterProvider',
 23 |         function( localStorageServiceProvider, paginationTemplateProvider, $stateProvider,$urlRouterProvider ) {
 24 |         localStorageServiceProvider.setPrefix('wp');
 25 |         paginationTemplateProvider.setPath('./templates/pagination.tpl.html');
 26 | 
 27 |         $urlRouterProvider.otherwise('/');
 28 |         $stateProvider
 29 |             .state('archive',{
 30 |                 url:'/:post_type',
 31 |                 controller:'listView',
 32 |                 templateUrl: 'templates/list.html'
 33 |             })
 34 |             .state('author',{
 35 |                 url:'/author/:author',
 36 |                 controller:'authorView',
 37 |                 templateUrl: 'templates/list.html'
 38 |             })
 39 |             .state('category',{
 40 |                 url:'/category/:term',
 41 |                 controller: 'termView',
 42 |                 templateUrl: 'templates/list.html'
 43 |             })
 44 |             .state('single',{
 45 |                 url:'/:cpt/:slug',
 46 |                 controller:'singleView',
 47 |                 templateUrl: 'templates/single.html'
 48 |             })
 49 |     }])
 50 |     .filter( 'to_trusted', function( $sce ){
 51 |         return function( text ){
 52 |             return $sce.trustAsHtml( text );
 53 |         }
 54 |     })
 55 |     /**
 56 |      * Single Post View
 57 |      */
 58 |     .controller('singleView', ['$scope', '$http', 'LocalPosts', '$stateParams', 'localStorageService',
 59 |         function( $scope, $http, LocalPosts, $stateParams, localStorageService ){
 60 | 
 61 |         LocalPosts.getSingle({slug:$stateParams.slug, post_type:$stateParams.cpt}).then(function(res){
 62 |             $scope.post = res;
 63 |             $http.get(ngWP.config.api + 'wp/v2/users/' + $scope.post.author ).then(function(res){
 64 |                 $scope.author = res.data;
 65 |             });
 66 |             if( $scope.post.categories.length ) {
 67 |                 var cats = localStorageService.get('cats');
 68 |                 $scope.cats = [];
 69 |                 angular.forEach( cats, function( value, key ) {
 70 |                     if( $scope.post.categories.indexOf( value.id ) > -1 ) {
 71 |                         $scope.cats.push( value );
 72 |                     }
 73 |                 });
 74 |             }
 75 |         });
 76 | 
 77 |     }])
 78 |     .controller('authorView', ['$scope', '$http', '$stateParams', 'Posts', 'LocalPosts', 'localStorageService',
 79 |         function( $scope, $http, $stateParams, Posts, LocalPosts, localStorageService ){
 80 |             console.log( 'loading author ' + $stateParams.author );
 81 | 
 82 |         $scope.posts = [];
 83 |         $scope.next_page = 2;
 84 |         $http.get( ngWP.config.api + 'wp/v2/posts/?filter[posts_per_page]=' + ngWP.config.posts_per_page*3 + '&filter[post_author]=' + $stateParams.author ).then(function(res){
 85 |             $scope.total_posts = res.headers();
 86 |             $scope.total_posts = $scope.total_posts['x-wp-total']
 87 |             $scope.posts = res.data;
 88 |             $scope.pagination = {
 89 |                 current: 1
 90 |             };
 91 |         });
 92 | 
 93 |         /**
 94 |          * Page Change
 95 |          * Find total pages, if on last page, query next page
 96 |          * Next page query is next 3 pages
 97 |          * @param newPage
 98 |          */
 99 |         $scope.pageChanged = function( newPage ) {
100 |             /**
101 |              * How many pages based on current amount of posts
102 |              * @type {number}
103 |              */
104 |             $scope.total_current_pages = $scope.posts.length / ngWP.config.posts_per_page;
105 |             /**
106 |              * How many total available pages
107 |              * @type {number}
108 |              */
109 |             $scope.total_available_pages = $scope.total_posts / ngWP.config.posts_per_page;
110 | 
111 |             if (newPage == $scope.total_current_pages && $scope.total_current_pages < $scope.total_available_pages ) {
112 |                 $http.get(ngWP.config.api + 'wp/v2/posts/?page=' + $scope.next_page + '&filter[posts_per_page]=' + ngWP.config.posts_per_page*3 + '&filter[post_author]=' + $stateParams.author )
113 |                     .then(function(new_posts){
114 |                     angular.forEach(new_posts.data, function (value, key) {
115 |                         $scope.posts.push(value);
116 |                     });
117 |                 });
118 |                 $scope.next_page++;
119 |             };
120 |         };
121 |     }])
122 |     .controller('header', ['$scope', '$http', function ($scope, $http ) {
123 | 
124 |         $http({
125 |             url: ngWP.config.api
126 |         } ).success( function( res ){
127 |             $scope.site = {};
128 |             $scope.site.name = res.name;
129 |             $scope.site.desc = res.description;
130 |         });
131 | 
132 |     }])
133 | ;
134 | 


--------------------------------------------------------------------------------
/assets/js/controllers/list-controller.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * List Posts View
 3 |  */
 4 | ngWP.app.controller('listView', ['$scope', '$http', '$stateParams', 'LocalPosts', 'localStorageService', function( $scope, $http, $stateParams, LocalPosts, localStorageService ){
 5 |     /**
 6 |      * Set a controller wide CPT
 7 |      * @type {string}
 8 |      */
 9 | 
10 |     $scope.posts = [];
11 |     $scope.next_page = 2;
12 |     $scope.posts = LocalPosts.query({per_page: [ngWP.config.posts_per_page * 3], post_type: $stateParams.post_type}).then(function(res){
13 |         $scope.total_posts = res.total_posts;
14 |         $scope.posts = res.posts;
15 |         $scope.pagination = {
16 |             current: 1
17 |         };
18 |     });
19 | 
20 |     /**
21 |      * Page Change
22 |      * Find total pages, if on last page, query next page
23 |      * Next page query is next 3 pages
24 |      * @param newPage
25 |      */
26 |     $scope.pageChanged = function( newPage ) {
27 |         /**
28 |          * How many pages based on current amount of posts
29 |          * @type {number}
30 |          */
31 |         $scope.total_current_pages = $scope.posts.length / ngWP.config.posts_per_page;
32 |         /**
33 |          * How many total available pages
34 |          * @type {number}
35 |          */
36 |         $scope.total_available_pages = $scope.total_posts / ngWP.config.posts_per_page;
37 | 
38 |         if (newPage == $scope.total_current_pages && $scope.total_current_pages < $scope.total_available_pages ) {
39 |             LocalPosts.getPage({page: $scope.next_page, per_page: ngWP.config.posts_per_page * 3}).then(function (new_posts) {
40 |                 angular.forEach(new_posts, function (value, key) {
41 |                     $scope.posts.push(value);
42 |                 });
43 |             });
44 |             $scope.next_page++;
45 |         };
46 |     };
47 | }])


--------------------------------------------------------------------------------
/assets/js/controllers/term-controller.js:
--------------------------------------------------------------------------------
 1 | ngWP.app.controller('termView', ['$scope', '$http', 'LocalPosts', 'localStorageService', '$stateParams',
 2 |     function( $scope, $http, LocalPosts, localStorageService, $stateParams ) {
 3 | 
 4 |         $scope.posts = [];
 5 |         $scope.next_page = 2;
 6 |         var cats = localStorageService.get('cats');
 7 |         $scope.term = {};
 8 | 
 9 |         angular.forEach( cats, function( value, key ) {
10 |             if( value.slug == $stateParams.term ) {
11 |                 $scope.term = value;
12 |             }
13 |         });
14 |         LocalPosts.query({per_page: [ngWP.config.posts_per_page * 3], categories: $scope.term.id}).then(function(res){
15 |             $scope.total_posts = res.total_posts;
16 |             $scope.posts = res.posts;
17 |             $scope.pagination = {
18 |                 current: 1
19 |             };
20 |         });
21 | 
22 |         /**
23 |          * Page Change
24 |          * Find total pages, if on last page, query next page
25 |          * Next page query is next 3 pages
26 |          * @param newPage
27 |          */
28 |         $scope.pageChanged = function( newPage ) {
29 |             /**
30 |              * How many pages based on current amount of posts
31 |              * @type {number}
32 |              */
33 |             $scope.total_current_pages = $scope.posts.length / ngWP.config.posts_per_page;
34 |             /**
35 |              * How many total available pages
36 |              * @type {number}
37 |              */
38 |             $scope.total_available_pages = Math.ceil( $scope.total_posts / ngWP.config.posts_per_page );
39 | 
40 |             if (newPage == $scope.total_current_pages && $scope.total_current_pages < $scope.total_available_pages ) {
41 |                 LocalPosts.getPage({page: $scope.next_page, per_page: ngWP.config.posts_per_page * 3, post_type: $scope.post_type, categories: $scope.term.id}).then(function (new_posts) {
42 |                     angular.forEach(new_posts.posts, function (value, key) {
43 |                         $scope.posts.push(value);
44 |                     });
45 |                 });
46 |                 $scope.next_page++;
47 |             };
48 |         };
49 | }]);


--------------------------------------------------------------------------------
/assets/js/factories/posts-factory.js:
--------------------------------------------------------------------------------
  1 | ngWP.app
  2 |     .factory('Posts',function($resource){
  3 |         return $resource( ngWP.config.api + 'wp/v2/:post_type/:ID?filter[posts_per_page]=:per_page&filter[post_author]=:author', {
  4 |             /**
  5 |              * without @ is default value
  6 |              */
  7 |             post_type: 'posts',
  8 |             ID:'@id',
  9 |             per_page: ngWP.config.posts_per_page,
 10 |             author: '@author'
 11 |         });
 12 |     })
 13 |     .factory( 'LocalPosts', function( $http, $resource, localStorageService, Posts, $q ) {
 14 |         localPostObj = {
 15 |             query: function( data ) {
 16 |                 var deferred = $q.defer();
 17 |                 var more_data = {},
 18 |                     posts_res = {};
 19 |                 if( !data.post_type ) {
 20 |                     data.post_type = 'posts';
 21 |                 }
 22 | 
 23 |                 /**
 24 |                  * If category
 25 |                  */
 26 |                 if( data.categories ) {
 27 |                     var url = ngWP.config.api + 'wp/v2/' + data.post_type + '?filter[posts_per_page]=' + ngWP.config.posts_per_page * 3 + '&categories=' + data.categories;
 28 |                     $http.get( url ).success(function(posts_res, status, headers ) {
 29 |                         var more_data = headers();
 30 |                         deferred.resolve({
 31 |                             posts: posts_res,
 32 |                             total_posts: more_data['x-wp-total']
 33 |                         });
 34 |                     });
 35 |                     return deferred.promise;
 36 |                 }
 37 |                 console.log( 'not category' );
 38 | 
 39 |                 Posts.query(data, function(res, status, headers, config){
 40 |                     var posts_res = res,
 41 |                         more_data = status();
 42 | 
 43 |                     /**
 44 |                      * Check localStorage first
 45 |                      */
 46 |                     if(
 47 |                         localStorageService.get('posts[' + data.post_type + ']') &&
 48 |                         localStorageService.get('posts[' + data.post_type + ']').length > 0
 49 |                     ) {
 50 |                         deferred.resolve({
 51 |                             posts: localStorageService.get('posts[' + data.post_type + ']'),
 52 |                             total_posts: more_data['x-wp-total']
 53 |                         });
 54 |                     } else {
 55 |                         localStorageService.set( 'posts[' + data.post_type + ']', posts_res );
 56 |                         deferred.resolve({
 57 |                             posts: posts_res,
 58 |                             total_posts: more_data['x-wp-total']
 59 |                         });
 60 |                     }
 61 |                 });
 62 |                 return deferred.promise;
 63 |             },
 64 |             /**
 65 |              * Get a specific page number based on per_page
 66 |              * @param data
 67 |              * @returns {*}
 68 |              */
 69 |             getPage: function( data ) {
 70 |                 if( !data || !data.page ) {
 71 |                     return false;
 72 |                 }
 73 |                 if( !data.post_type ) {
 74 |                     data.post_type = 'posts';
 75 |                 }
 76 |                 var deferred = $q.defer();
 77 |                 Posts.query(data, function(res){
 78 | 
 79 |                     /**
 80 |                      * If category
 81 |                      */
 82 |                     if( data.categories ) {
 83 |                         deferred.resolve({
 84 |                             posts: res,
 85 |                         });
 86 |                         return deferred.promise;
 87 |                     }
 88 | 
 89 |                     var current_posts = localStorageService.get('posts[' + data.post_type + ']');
 90 |                     angular.forEach( res, function( value, key ) {
 91 |                         current_posts.push( value );
 92 |                     });
 93 |                     localStorageService.set('posts[' + data.post_type + ']', current_posts );
 94 |                     deferred.resolve( res );
 95 |                 });
 96 |                 return deferred.promise;
 97 |             },
 98 |             /**
 99 |              * Get Single Post (any post type)
100 |              * @param data
101 |              * @returns {*}
102 |              */
103 |             getSingle: function( data ) {
104 |                 if( !data || !data.slug || !data.post_type ) {
105 |                     return false;
106 |                 }
107 |                 if( data.post_type == 'post' ) {
108 |                     data.post_type = 'posts';
109 |                 }
110 |                 var deferred = $q.defer();
111 |                 var current_posts = localStorageService.get( 'posts[' + data.post_type + ']' );
112 |                 var found_post = false;
113 |                 data.per_page = 1;
114 |                 for( var i = 0; i < current_posts.length; i++ ) {
115 |                     if( current_posts[i].slug == data.slug ) {
116 |                         found_post = true;
117 |                         deferred.resolve( current_posts[i] );
118 |                         break;
119 |                     }
120 |                 };
121 |                 if( !found_post ) {
122 |                     this.refreshLocal( data );
123 |                     current_posts = localStorageService.get( 'posts[' + data.post_type + ']' );
124 |                     for( var i = 0; i < current_posts.length; i++ ) {
125 |                         if( current_posts[i].slug == data.slug ) {
126 |                             found_post = true;
127 |                             deferred.resolve( current_posts[i] );
128 |                             break;
129 |                         }
130 |                     };
131 |                 }
132 |                 return deferred.promise;
133 |             },
134 |             refreshLocal: function( data ) {
135 |                 if( !data || !data.post_type ) {
136 |                     return false;
137 |                 }
138 |                 data.per_page = ngWP.config.posts_per_page * 3;
139 |                 var deferred = $q.defer();
140 |                 Posts.query(data, function(res, status, headers, config){
141 |                     localStorageService.set('posts[' + data.post_type + ']', res );
142 |                 });
143 |             }
144 |         };
145 | 
146 |         return localPostObj;
147 |     })


--------------------------------------------------------------------------------
/assets/scss/bootstrap/_bootstrap-custom.scss:
--------------------------------------------------------------------------------
 1 | // Core variables and mixins
 2 | @import "variables";
 3 | @import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins";
 4 | 
 5 | // Reset and dependencies
 6 | @import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/normalize";
 7 | @import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/print";
 8 | @import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/glyphicons";
 9 | 
10 | // Core CSS
11 | @import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/scaffolding";
12 | @import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/type";
13 | @import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/code";
14 | @import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/grid";
15 | @import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/tables";
16 | @import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/forms";
17 | @import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/buttons";
18 | 
19 | // Components
20 | @import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/component-animations";
21 | @import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/dropdowns";
22 | @import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/button-groups";
23 | @import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/input-groups";
24 | @import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/navs";
25 | @import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/navbar";
26 | @import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/breadcrumbs";
27 | @import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/pagination";
28 | @import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/pager";
29 | @import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/labels";
30 | @import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/badges";
31 | @import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/jumbotron";
32 | @import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/thumbnails";
33 | @import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/alerts";
34 | @import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/progress-bars";
35 | @import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/media";
36 | @import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/list-group";
37 | @import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/panels";
38 | @import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/responsive-embed";
39 | @import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/wells";
40 | @import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/close";
41 | 
42 | // Components w/ JavaScript
43 | @import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/modals";
44 | @import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/tooltip";
45 | @import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/popovers";
46 | @import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/carousel";
47 | 
48 | // Utility classes
49 | @import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/utilities";
50 | @import "../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/responsive-utilities";
51 | 


--------------------------------------------------------------------------------
/assets/scss/bootstrap/_variables.scss:
--------------------------------------------------------------------------------
  1 | $bootstrap-sass-asset-helper: false !default;
  2 | //
  3 | // Variables
  4 | // --------------------------------------------------
  5 | 
  6 | 
  7 | //== Colors
  8 | //
  9 | //## Gray and brand colors for use across Bootstrap.
 10 | 
 11 | $gray-base:              #000 !default;
 12 | $gray-darker:            lighten($gray-base, 13.5%) !default; // #222
 13 | $gray-dark:              lighten($gray-base, 20%) !default;   // #333
 14 | $gray:                   lighten($gray-base, 33.5%) !default; // #555
 15 | $gray-light:             lighten($gray-base, 46.7%) !default; // #777
 16 | $gray-lighter:           lighten($gray-base, 93.5%) !default; // #eee
 17 | 
 18 | $brand-primary:         darken(#428bca, 6.5%) !default; // #337ab7
 19 | $brand-success:         #5cb85c !default;
 20 | $brand-info:            #5bc0de !default;
 21 | $brand-warning:         #f0ad4e !default;
 22 | $brand-danger:          #d9534f !default;
 23 | 
 24 | 
 25 | //== Scaffolding
 26 | //
 27 | //## Settings for some of the most global styles.
 28 | 
 29 | //** Background color for `<body>`.
 30 | $body-bg:               #fff !default;
 31 | //** Global text color on `<body>`.
 32 | $text-color:            $gray-dark !default;
 33 | 
 34 | //** Global textual link color.
 35 | $link-color:            $brand-primary !default;
 36 | //** Link hover color set via `darken()` function.
 37 | $link-hover-color:      darken($link-color, 15%) !default;
 38 | //** Link hover decoration.
 39 | $link-hover-decoration: underline !default;
 40 | 
 41 | 
 42 | //== Typography
 43 | //
 44 | //## Font, line-height, and color for body text, headings, and more.
 45 | 
 46 | $font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif !default;
 47 | $font-family-serif:       Georgia, "Times New Roman", Times, serif !default;
 48 | //** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
 49 | $font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace !default;
 50 | $font-family-base:        $font-family-sans-serif !default;
 51 | 
 52 | $font-size-base:          14px !default;
 53 | $font-size-large:         ceil(($font-size-base * 1.25)) !default; // ~18px
 54 | $font-size-small:         ceil(($font-size-base * 0.85)) !default; // ~12px
 55 | 
 56 | $font-size-h1:            floor(($font-size-base * 2.6)) !default; // ~36px
 57 | $font-size-h2:            floor(($font-size-base * 2.15)) !default; // ~30px
 58 | $font-size-h3:            ceil(($font-size-base * 1.7)) !default; // ~24px
 59 | $font-size-h4:            ceil(($font-size-base * 1.25)) !default; // ~18px
 60 | $font-size-h5:            $font-size-base !default;
 61 | $font-size-h6:            ceil(($font-size-base * 0.85)) !default; // ~12px
 62 | 
 63 | //** Unit-less `line-height` for use in components like buttons.
 64 | $line-height-base:        1.428571429 !default; // 20/14
 65 | //** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
 66 | $line-height-computed:    floor(($font-size-base * $line-height-base)) !default; // ~20px
 67 | 
 68 | //** By default, this inherits from the `<body>`.
 69 | $headings-font-family:    inherit !default;
 70 | $headings-font-weight:    500 !default;
 71 | $headings-line-height:    1.1 !default;
 72 | $headings-color:          inherit !default;
 73 | 
 74 | 
 75 | //== Iconography
 76 | //
 77 | //## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
 78 | 
 79 | //** Load fonts from this directory.
 80 | 
 81 | // [converter] If $bootstrap-sass-asset-helper if used, provide path relative to the assets load path.
 82 | // [converter] This is because some asset helpers, such as Sprockets, do not work with file-relative paths.
 83 | $icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../fonts/bootstrap/") !default;
 84 | 
 85 | //** File name for all font files.
 86 | $icon-font-name:          "glyphicons-halflings-regular" !default;
 87 | //** Element ID within SVG icon file.
 88 | $icon-font-svg-id:        "glyphicons_halflingsregular" !default;
 89 | 
 90 | 
 91 | //== Components
 92 | //
 93 | //## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
 94 | 
 95 | $padding-base-vertical:     6px !default;
 96 | $padding-base-horizontal:   12px !default;
 97 | 
 98 | $padding-large-vertical:    10px !default;
 99 | $padding-large-horizontal:  16px !default;
100 | 
101 | $padding-small-vertical:    5px !default;
102 | $padding-small-horizontal:  10px !default;
103 | 
104 | $padding-xs-vertical:       1px !default;
105 | $padding-xs-horizontal:     5px !default;
106 | 
107 | $line-height-large:         1.3333333 !default; // extra decimals for Win 8.1 Chrome
108 | $line-height-small:         1.5 !default;
109 | 
110 | $border-radius-base:        4px !default;
111 | $border-radius-large:       6px !default;
112 | $border-radius-small:       3px !default;
113 | 
114 | //** Global color for active items (e.g., navs or dropdowns).
115 | $component-active-color:    #fff !default;
116 | //** Global background color for active items (e.g., navs or dropdowns).
117 | $component-active-bg:       $brand-primary !default;
118 | 
119 | //** Width of the `border` for generating carets that indicator dropdowns.
120 | $caret-width-base:          4px !default;
121 | //** Carets increase slightly in size for larger components.
122 | $caret-width-large:         5px !default;
123 | 
124 | 
125 | //== Tables
126 | //
127 | //## Customizes the `.table` component with basic values, each used across all table variations.
128 | 
129 | //** Padding for `<th>`s and `<td>`s.
130 | $table-cell-padding:            8px !default;
131 | //** Padding for cells in `.table-condensed`.
132 | $table-condensed-cell-padding:  5px !default;
133 | 
134 | //** Default background color used for all tables.
135 | $table-bg:                      transparent !default;
136 | //** Background color used for `.table-striped`.
137 | $table-bg-accent:               #f9f9f9 !default;
138 | //** Background color used for `.table-hover`.
139 | $table-bg-hover:                #f5f5f5 !default;
140 | $table-bg-active:               $table-bg-hover !default;
141 | 
142 | //** Border color for table and cell borders.
143 | $table-border-color:            #ddd !default;
144 | 
145 | 
146 | //== Buttons
147 | //
148 | //## For each of Bootstrap's buttons, define text, background and border color.
149 | 
150 | $btn-font-weight:                normal !default;
151 | 
152 | $btn-default-color:              #333 !default;
153 | $btn-default-bg:                 #fff !default;
154 | $btn-default-border:             #ccc !default;
155 | 
156 | $btn-primary-color:              #fff !default;
157 | $btn-primary-bg:                 $brand-primary !default;
158 | $btn-primary-border:             darken($btn-primary-bg, 5%) !default;
159 | 
160 | $btn-success-color:              #fff !default;
161 | $btn-success-bg:                 $brand-success !default;
162 | $btn-success-border:             darken($btn-success-bg, 5%) !default;
163 | 
164 | $btn-info-color:                 #fff !default;
165 | $btn-info-bg:                    $brand-info !default;
166 | $btn-info-border:                darken($btn-info-bg, 5%) !default;
167 | 
168 | $btn-warning-color:              #fff !default;
169 | $btn-warning-bg:                 $brand-warning !default;
170 | $btn-warning-border:             darken($btn-warning-bg, 5%) !default;
171 | 
172 | $btn-danger-color:               #fff !default;
173 | $btn-danger-bg:                  $brand-danger !default;
174 | $btn-danger-border:              darken($btn-danger-bg, 5%) !default;
175 | 
176 | $btn-link-disabled-color:        $gray-light !default;
177 | 
178 | // Allows for customizing button radius independently from global border radius
179 | $btn-border-radius-base:         $border-radius-base !default;
180 | $btn-border-radius-large:        $border-radius-large !default;
181 | $btn-border-radius-small:        $border-radius-small !default;
182 | 
183 | 
184 | //== Forms
185 | //
186 | //##
187 | 
188 | //** `<input>` background color
189 | $input-bg:                       #fff !default;
190 | //** `<input disabled>` background color
191 | $input-bg-disabled:              $gray-lighter !default;
192 | 
193 | //** Text color for `<input>`s
194 | $input-color:                    $gray !default;
195 | //** `<input>` border color
196 | $input-border:                   #ccc !default;
197 | 
198 | // TODO: Rename `$input-border-radius` to `$input-border-radius-base` in v4
199 | //** Default `.form-control` border radius
200 | // This has no effect on `<select>`s in some browsers, due to the limited stylability of `<select>`s in CSS.
201 | $input-border-radius:            $border-radius-base !default;
202 | //** Large `.form-control` border radius
203 | $input-border-radius-large:      $border-radius-large !default;
204 | //** Small `.form-control` border radius
205 | $input-border-radius-small:      $border-radius-small !default;
206 | 
207 | //** Border color for inputs on focus
208 | $input-border-focus:             #66afe9 !default;
209 | 
210 | //** Placeholder text color
211 | $input-color-placeholder:        #999 !default;
212 | 
213 | //** Default `.form-control` height
214 | $input-height-base:              ($line-height-computed + ($padding-base-vertical * 2) + 2) !default;
215 | //** Large `.form-control` height
216 | $input-height-large:             (ceil($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) !default;
217 | //** Small `.form-control` height
218 | $input-height-small:             (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default;
219 | 
220 | //** `.form-group` margin
221 | $form-group-margin-bottom:       15px !default;
222 | 
223 | $legend-color:                   $gray-dark !default;
224 | $legend-border-color:            #e5e5e5 !default;
225 | 
226 | //** Background color for textual input addons
227 | $input-group-addon-bg:           $gray-lighter !default;
228 | //** Border color for textual input addons
229 | $input-group-addon-border-color: $input-border !default;
230 | 
231 | //** Disabled cursor for form controls and buttons.
232 | $cursor-disabled:                not-allowed !default;
233 | 
234 | 
235 | //== Dropdowns
236 | //
237 | //## Dropdown menu container and contents.
238 | 
239 | //** Background for the dropdown menu.
240 | $dropdown-bg:                    #fff !default;
241 | //** Dropdown menu `border-color`.
242 | $dropdown-border:                rgba(0,0,0,.15) !default;
243 | //** Dropdown menu `border-color` **for IE8**.
244 | $dropdown-fallback-border:       #ccc !default;
245 | //** Divider color for between dropdown items.
246 | $dropdown-divider-bg:            #e5e5e5 !default;
247 | 
248 | //** Dropdown link text color.
249 | $dropdown-link-color:            $gray-dark !default;
250 | //** Hover color for dropdown links.
251 | $dropdown-link-hover-color:      darken($gray-dark, 5%) !default;
252 | //** Hover background for dropdown links.
253 | $dropdown-link-hover-bg:         #f5f5f5 !default;
254 | 
255 | //** Active dropdown menu item text color.
256 | $dropdown-link-active-color:     $component-active-color !default;
257 | //** Active dropdown menu item background color.
258 | $dropdown-link-active-bg:        $component-active-bg !default;
259 | 
260 | //** Disabled dropdown menu item background color.
261 | $dropdown-link-disabled-color:   $gray-light !default;
262 | 
263 | //** Text color for headers within dropdown menus.
264 | $dropdown-header-color:          $gray-light !default;
265 | 
266 | //** Deprecated `$dropdown-caret-color` as of v3.1.0
267 | $dropdown-caret-color:           #000 !default;
268 | 
269 | 
270 | //-- Z-index master list
271 | //
272 | // Warning: Avoid customizing these values. They're used for a bird's eye view
273 | // of components dependent on the z-axis and are designed to all work together.
274 | //
275 | // Note: These variables are not generated into the Customizer.
276 | 
277 | $zindex-navbar:            1000 !default;
278 | $zindex-dropdown:          1000 !default;
279 | $zindex-popover:           1060 !default;
280 | $zindex-tooltip:           1070 !default;
281 | $zindex-navbar-fixed:      1030 !default;
282 | $zindex-modal-background:  1040 !default;
283 | $zindex-modal:             1050 !default;
284 | 
285 | 
286 | //== Media queries breakpoints
287 | //
288 | //## Define the breakpoints at which your layout will change, adapting to different screen sizes.
289 | 
290 | // Extra small screen / phone
291 | //** Deprecated `$screen-xs` as of v3.0.1
292 | $screen-xs:                  480px !default;
293 | //** Deprecated `$screen-xs-min` as of v3.2.0
294 | $screen-xs-min:              $screen-xs !default;
295 | //** Deprecated `$screen-phone` as of v3.0.1
296 | $screen-phone:               $screen-xs-min !default;
297 | 
298 | // Small screen / tablet
299 | //** Deprecated `$screen-sm` as of v3.0.1
300 | $screen-sm:                  768px !default;
301 | $screen-sm-min:              $screen-sm !default;
302 | //** Deprecated `$screen-tablet` as of v3.0.1
303 | $screen-tablet:              $screen-sm-min !default;
304 | 
305 | // Medium screen / desktop
306 | //** Deprecated `$screen-md` as of v3.0.1
307 | $screen-md:                  992px !default;
308 | $screen-md-min:              $screen-md !default;
309 | //** Deprecated `$screen-desktop` as of v3.0.1
310 | $screen-desktop:             $screen-md-min !default;
311 | 
312 | // Large screen / wide desktop
313 | //** Deprecated `$screen-lg` as of v3.0.1
314 | $screen-lg:                  1200px !default;
315 | $screen-lg-min:              $screen-lg !default;
316 | //** Deprecated `$screen-lg-desktop` as of v3.0.1
317 | $screen-lg-desktop:          $screen-lg-min !default;
318 | 
319 | // So media queries don't overlap when required, provide a maximum
320 | $screen-xs-max:              ($screen-sm-min - 1) !default;
321 | $screen-sm-max:              ($screen-md-min - 1) !default;
322 | $screen-md-max:              ($screen-lg-min - 1) !default;
323 | 
324 | 
325 | //== Grid system
326 | //
327 | //## Define your custom responsive grid.
328 | 
329 | //** Number of columns in the grid.
330 | $grid-columns:              12 !default;
331 | //** Padding between columns. Gets divided in half for the left and right.
332 | $grid-gutter-width:         30px !default;
333 | // Navbar collapse
334 | //** Point at which the navbar becomes uncollapsed.
335 | $grid-float-breakpoint:     $screen-sm-min !default;
336 | //** Point at which the navbar begins collapsing.
337 | $grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !default;
338 | 
339 | 
340 | //== Container sizes
341 | //
342 | //## Define the maximum width of `.container` for different screen sizes.
343 | 
344 | // Small screen / tablet
345 | $container-tablet:             (720px + $grid-gutter-width) !default;
346 | //** For `$screen-sm-min` and up.
347 | $container-sm:                 $container-tablet !default;
348 | 
349 | // Medium screen / desktop
350 | $container-desktop:            (940px + $grid-gutter-width) !default;
351 | //** For `$screen-md-min` and up.
352 | $container-md:                 $container-desktop !default;
353 | 
354 | // Large screen / wide desktop
355 | $container-large-desktop:      (1140px + $grid-gutter-width) !default;
356 | //** For `$screen-lg-min` and up.
357 | $container-lg:                 $container-large-desktop !default;
358 | 
359 | 
360 | //== Navbar
361 | //
362 | //##
363 | 
364 | // Basics of a navbar
365 | $navbar-height:                    50px !default;
366 | $navbar-margin-bottom:             $line-height-computed !default;
367 | $navbar-border-radius:             $border-radius-base !default;
368 | $navbar-padding-horizontal:        floor(($grid-gutter-width / 2)) !default;
369 | $navbar-padding-vertical:          (($navbar-height - $line-height-computed) / 2) !default;
370 | $navbar-collapse-max-height:       340px !default;
371 | 
372 | $navbar-default-color:             #777 !default;
373 | $navbar-default-bg:                #f8f8f8 !default;
374 | $navbar-default-border:            darken($navbar-default-bg, 6.5%) !default;
375 | 
376 | // Navbar links
377 | $navbar-default-link-color:                #777 !default;
378 | $navbar-default-link-hover-color:          #333 !default;
379 | $navbar-default-link-hover-bg:             transparent !default;
380 | $navbar-default-link-active-color:         #555 !default;
381 | $navbar-default-link-active-bg:            darken($navbar-default-bg, 6.5%) !default;
382 | $navbar-default-link-disabled-color:       #ccc !default;
383 | $navbar-default-link-disabled-bg:          transparent !default;
384 | 
385 | // Navbar brand label
386 | $navbar-default-brand-color:               $navbar-default-link-color !default;
387 | $navbar-default-brand-hover-color:         darken($navbar-default-brand-color, 10%) !default;
388 | $navbar-default-brand-hover-bg:            transparent !default;
389 | 
390 | // Navbar toggle
391 | $navbar-default-toggle-hover-bg:           #ddd !default;
392 | $navbar-default-toggle-icon-bar-bg:        #888 !default;
393 | $navbar-default-toggle-border-color:       #ddd !default;
394 | 
395 | 
396 | //=== Inverted navbar
397 | // Reset inverted navbar basics
398 | $navbar-inverse-color:                      lighten($gray-light, 15%) !default;
399 | $navbar-inverse-bg:                         #222 !default;
400 | $navbar-inverse-border:                     darken($navbar-inverse-bg, 10%) !default;
401 | 
402 | // Inverted navbar links
403 | $navbar-inverse-link-color:                 lighten($gray-light, 15%) !default;
404 | $navbar-inverse-link-hover-color:           #fff !default;
405 | $navbar-inverse-link-hover-bg:              transparent !default;
406 | $navbar-inverse-link-active-color:          $navbar-inverse-link-hover-color !default;
407 | $navbar-inverse-link-active-bg:             darken($navbar-inverse-bg, 10%) !default;
408 | $navbar-inverse-link-disabled-color:        #444 !default;
409 | $navbar-inverse-link-disabled-bg:           transparent !default;
410 | 
411 | // Inverted navbar brand label
412 | $navbar-inverse-brand-color:                $navbar-inverse-link-color !default;
413 | $navbar-inverse-brand-hover-color:          #fff !default;
414 | $navbar-inverse-brand-hover-bg:             transparent !default;
415 | 
416 | // Inverted navbar toggle
417 | $navbar-inverse-toggle-hover-bg:            #333 !default;
418 | $navbar-inverse-toggle-icon-bar-bg:         #fff !default;
419 | $navbar-inverse-toggle-border-color:        #333 !default;
420 | 
421 | 
422 | //== Navs
423 | //
424 | //##
425 | 
426 | //=== Shared nav styles
427 | $nav-link-padding:                          10px 15px !default;
428 | $nav-link-hover-bg:                         $gray-lighter !default;
429 | 
430 | $nav-disabled-link-color:                   $gray-light !default;
431 | $nav-disabled-link-hover-color:             $gray-light !default;
432 | 
433 | //== Tabs
434 | $nav-tabs-border-color:                     #ddd !default;
435 | 
436 | $nav-tabs-link-hover-border-color:          $gray-lighter !default;
437 | 
438 | $nav-tabs-active-link-hover-bg:             $body-bg !default;
439 | $nav-tabs-active-link-hover-color:          $gray !default;
440 | $nav-tabs-active-link-hover-border-color:   #ddd !default;
441 | 
442 | $nav-tabs-justified-link-border-color:            #ddd !default;
443 | $nav-tabs-justified-active-link-border-color:     $body-bg !default;
444 | 
445 | //== Pills
446 | $nav-pills-border-radius:                   $border-radius-base !default;
447 | $nav-pills-active-link-hover-bg:            $component-active-bg !default;
448 | $nav-pills-active-link-hover-color:         $component-active-color !default;
449 | 
450 | 
451 | //== Pagination
452 | //
453 | //##
454 | 
455 | $pagination-color:                     $link-color !default;
456 | $pagination-bg:                        #fff !default;
457 | $pagination-border:                    #ddd !default;
458 | 
459 | $pagination-hover-color:               $link-hover-color !default;
460 | $pagination-hover-bg:                  $gray-lighter !default;
461 | $pagination-hover-border:              #ddd !default;
462 | 
463 | $pagination-active-color:              #fff !default;
464 | $pagination-active-bg:                 $brand-primary !default;
465 | $pagination-active-border:             $brand-primary !default;
466 | 
467 | $pagination-disabled-color:            $gray-light !default;
468 | $pagination-disabled-bg:               #fff !default;
469 | $pagination-disabled-border:           #ddd !default;
470 | 
471 | 
472 | //== Pager
473 | //
474 | //##
475 | 
476 | $pager-bg:                             $pagination-bg !default;
477 | $pager-border:                         $pagination-border !default;
478 | $pager-border-radius:                  15px !default;
479 | 
480 | $pager-hover-bg:                       $pagination-hover-bg !default;
481 | 
482 | $pager-active-bg:                      $pagination-active-bg !default;
483 | $pager-active-color:                   $pagination-active-color !default;
484 | 
485 | $pager-disabled-color:                 $pagination-disabled-color !default;
486 | 
487 | 
488 | //== Jumbotron
489 | //
490 | //##
491 | 
492 | $jumbotron-padding:              30px !default;
493 | $jumbotron-color:                inherit !default;
494 | $jumbotron-bg:                   $gray-lighter !default;
495 | $jumbotron-heading-color:        inherit !default;
496 | $jumbotron-font-size:            ceil(($font-size-base * 1.5)) !default;
497 | $jumbotron-heading-font-size:    ceil(($font-size-base * 4.5)) !default;
498 | 
499 | 
500 | //== Form states and alerts
501 | //
502 | //## Define colors for form feedback states and, by default, alerts.
503 | 
504 | $state-success-text:             #3c763d !default;
505 | $state-success-bg:               #dff0d8 !default;
506 | $state-success-border:           darken(adjust-hue($state-success-bg, -10), 5%) !default;
507 | 
508 | $state-info-text:                #31708f !default;
509 | $state-info-bg:                  #d9edf7 !default;
510 | $state-info-border:              darken(adjust-hue($state-info-bg, -10), 7%) !default;
511 | 
512 | $state-warning-text:             #8a6d3b !default;
513 | $state-warning-bg:               #fcf8e3 !default;
514 | $state-warning-border:           darken(adjust-hue($state-warning-bg, -10), 5%) !default;
515 | 
516 | $state-danger-text:              #a94442 !default;
517 | $state-danger-bg:                #f2dede !default;
518 | $state-danger-border:            darken(adjust-hue($state-danger-bg, -10), 5%) !default;
519 | 
520 | 
521 | //== Tooltips
522 | //
523 | //##
524 | 
525 | //** Tooltip max width
526 | $tooltip-max-width:           200px !default;
527 | //** Tooltip text color
528 | $tooltip-color:               #fff !default;
529 | //** Tooltip background color
530 | $tooltip-bg:                  #000 !default;
531 | $tooltip-opacity:             .9 !default;
532 | 
533 | //** Tooltip arrow width
534 | $tooltip-arrow-width:         5px !default;
535 | //** Tooltip arrow color
536 | $tooltip-arrow-color:         $tooltip-bg !default;
537 | 
538 | 
539 | //== Popovers
540 | //
541 | //##
542 | 
543 | //** Popover body background color
544 | $popover-bg:                          #fff !default;
545 | //** Popover maximum width
546 | $popover-max-width:                   276px !default;
547 | //** Popover border color
548 | $popover-border-color:                rgba(0,0,0,.2) !default;
549 | //** Popover fallback border color
550 | $popover-fallback-border-color:       #ccc !default;
551 | 
552 | //** Popover title background color
553 | $popover-title-bg:                    darken($popover-bg, 3%) !default;
554 | 
555 | //** Popover arrow width
556 | $popover-arrow-width:                 10px !default;
557 | //** Popover arrow color
558 | $popover-arrow-color:                 $popover-bg !default;
559 | 
560 | //** Popover outer arrow width
561 | $popover-arrow-outer-width:           ($popover-arrow-width + 1) !default;
562 | //** Popover outer arrow color
563 | $popover-arrow-outer-color:           fade_in($popover-border-color, 0.05) !default;
564 | //** Popover outer arrow fallback color
565 | $popover-arrow-outer-fallback-color:  darken($popover-fallback-border-color, 20%) !default;
566 | 
567 | 
568 | //== Labels
569 | //
570 | //##
571 | 
572 | //** Default label background color
573 | $label-default-bg:            $gray-light !default;
574 | //** Primary label background color
575 | $label-primary-bg:            $brand-primary !default;
576 | //** Success label background color
577 | $label-success-bg:            $brand-success !default;
578 | //** Info label background color
579 | $label-info-bg:               $brand-info !default;
580 | //** Warning label background color
581 | $label-warning-bg:            $brand-warning !default;
582 | //** Danger label background color
583 | $label-danger-bg:             $brand-danger !default;
584 | 
585 | //** Default label text color
586 | $label-color:                 #fff !default;
587 | //** Default text color of a linked label
588 | $label-link-hover-color:      #fff !default;
589 | 
590 | 
591 | //== Modals
592 | //
593 | //##
594 | 
595 | //** Padding applied to the modal body
596 | $modal-inner-padding:         15px !default;
597 | 
598 | //** Padding applied to the modal title
599 | $modal-title-padding:         15px !default;
600 | //** Modal title line-height
601 | $modal-title-line-height:     $line-height-base !default;
602 | 
603 | //** Background color of modal content area
604 | $modal-content-bg:                             #fff !default;
605 | //** Modal content border color
606 | $modal-content-border-color:                   rgba(0,0,0,.2) !default;
607 | //** Modal content border color **for IE8**
608 | $modal-content-fallback-border-color:          #999 !default;
609 | 
610 | //** Modal backdrop background color
611 | $modal-backdrop-bg:           #000 !default;
612 | //** Modal backdrop opacity
613 | $modal-backdrop-opacity:      .5 !default;
614 | //** Modal header border color
615 | $modal-header-border-color:   #e5e5e5 !default;
616 | //** Modal footer border color
617 | $modal-footer-border-color:   $modal-header-border-color !default;
618 | 
619 | $modal-lg:                    900px !default;
620 | $modal-md:                    600px !default;
621 | $modal-sm:                    300px !default;
622 | 
623 | 
624 | //== Alerts
625 | //
626 | //## Define alert colors, border radius, and padding.
627 | 
628 | $alert-padding:               15px !default;
629 | $alert-border-radius:         $border-radius-base !default;
630 | $alert-link-font-weight:      bold !default;
631 | 
632 | $alert-success-bg:            $state-success-bg !default;
633 | $alert-success-text:          $state-success-text !default;
634 | $alert-success-border:        $state-success-border !default;
635 | 
636 | $alert-info-bg:               $state-info-bg !default;
637 | $alert-info-text:             $state-info-text !default;
638 | $alert-info-border:           $state-info-border !default;
639 | 
640 | $alert-warning-bg:            $state-warning-bg !default;
641 | $alert-warning-text:          $state-warning-text !default;
642 | $alert-warning-border:        $state-warning-border !default;
643 | 
644 | $alert-danger-bg:             $state-danger-bg !default;
645 | $alert-danger-text:           $state-danger-text !default;
646 | $alert-danger-border:         $state-danger-border !default;
647 | 
648 | 
649 | //== Progress bars
650 | //
651 | //##
652 | 
653 | //** Background color of the whole progress component
654 | $progress-bg:                 #f5f5f5 !default;
655 | //** Progress bar text color
656 | $progress-bar-color:          #fff !default;
657 | //** Variable for setting rounded corners on progress bar.
658 | $progress-border-radius:      $border-radius-base !default;
659 | 
660 | //** Default progress bar color
661 | $progress-bar-bg:             $brand-primary !default;
662 | //** Success progress bar color
663 | $progress-bar-success-bg:     $brand-success !default;
664 | //** Warning progress bar color
665 | $progress-bar-warning-bg:     $brand-warning !default;
666 | //** Danger progress bar color
667 | $progress-bar-danger-bg:      $brand-danger !default;
668 | //** Info progress bar color
669 | $progress-bar-info-bg:        $brand-info !default;
670 | 
671 | 
672 | //== List group
673 | //
674 | //##
675 | 
676 | //** Background color on `.list-group-item`
677 | $list-group-bg:                 #fff !default;
678 | //** `.list-group-item` border color
679 | $list-group-border:             #ddd !default;
680 | //** List group border radius
681 | $list-group-border-radius:      $border-radius-base !default;
682 | 
683 | //** Background color of single list items on hover
684 | $list-group-hover-bg:           #f5f5f5 !default;
685 | //** Text color of active list items
686 | $list-group-active-color:       $component-active-color !default;
687 | //** Background color of active list items
688 | $list-group-active-bg:          $component-active-bg !default;
689 | //** Border color of active list elements
690 | $list-group-active-border:      $list-group-active-bg !default;
691 | //** Text color for content within active list items
692 | $list-group-active-text-color:  lighten($list-group-active-bg, 40%) !default;
693 | 
694 | //** Text color of disabled list items
695 | $list-group-disabled-color:      $gray-light !default;
696 | //** Background color of disabled list items
697 | $list-group-disabled-bg:         $gray-lighter !default;
698 | //** Text color for content within disabled list items
699 | $list-group-disabled-text-color: $list-group-disabled-color !default;
700 | 
701 | $list-group-link-color:         #555 !default;
702 | $list-group-link-hover-color:   $list-group-link-color !default;
703 | $list-group-link-heading-color: #333 !default;
704 | 
705 | 
706 | //== Panels
707 | //
708 | //##
709 | 
710 | $panel-bg:                    #fff !default;
711 | $panel-body-padding:          15px !default;
712 | $panel-heading-padding:       10px 15px !default;
713 | $panel-footer-padding:        $panel-heading-padding !default;
714 | $panel-border-radius:         $border-radius-base !default;
715 | 
716 | //** Border color for elements within panels
717 | $panel-inner-border:          #ddd !default;
718 | $panel-footer-bg:             #f5f5f5 !default;
719 | 
720 | $panel-default-text:          $gray-dark !default;
721 | $panel-default-border:        #ddd !default;
722 | $panel-default-heading-bg:    #f5f5f5 !default;
723 | 
724 | $panel-primary-text:          #fff !default;
725 | $panel-primary-border:        $brand-primary !default;
726 | $panel-primary-heading-bg:    $brand-primary !default;
727 | 
728 | $panel-success-text:          $state-success-text !default;
729 | $panel-success-border:        $state-success-border !default;
730 | $panel-success-heading-bg:    $state-success-bg !default;
731 | 
732 | $panel-info-text:             $state-info-text !default;
733 | $panel-info-border:           $state-info-border !default;
734 | $panel-info-heading-bg:       $state-info-bg !default;
735 | 
736 | $panel-warning-text:          $state-warning-text !default;
737 | $panel-warning-border:        $state-warning-border !default;
738 | $panel-warning-heading-bg:    $state-warning-bg !default;
739 | 
740 | $panel-danger-text:           $state-danger-text !default;
741 | $panel-danger-border:         $state-danger-border !default;
742 | $panel-danger-heading-bg:     $state-danger-bg !default;
743 | 
744 | 
745 | //== Thumbnails
746 | //
747 | //##
748 | 
749 | //** Padding around the thumbnail image
750 | $thumbnail-padding:           4px !default;
751 | //** Thumbnail background color
752 | $thumbnail-bg:                $body-bg !default;
753 | //** Thumbnail border color
754 | $thumbnail-border:            #ddd !default;
755 | //** Thumbnail border radius
756 | $thumbnail-border-radius:     $border-radius-base !default;
757 | 
758 | //** Custom text color for thumbnail captions
759 | $thumbnail-caption-color:     $text-color !default;
760 | //** Padding around the thumbnail caption
761 | $thumbnail-caption-padding:   9px !default;
762 | 
763 | 
764 | //== Wells
765 | //
766 | //##
767 | 
768 | $well-bg:                     #f5f5f5 !default;
769 | $well-border:                 darken($well-bg, 7%) !default;
770 | 
771 | 
772 | //== Badges
773 | //
774 | //##
775 | 
776 | $badge-color:                 #fff !default;
777 | //** Linked badge text color on hover
778 | $badge-link-hover-color:      #fff !default;
779 | $badge-bg:                    $gray-light !default;
780 | 
781 | //** Badge text color in active nav link
782 | $badge-active-color:          $link-color !default;
783 | //** Badge background color in active nav link
784 | $badge-active-bg:             #fff !default;
785 | 
786 | $badge-font-weight:           bold !default;
787 | $badge-line-height:           1 !default;
788 | $badge-border-radius:         10px !default;
789 | 
790 | 
791 | //== Breadcrumbs
792 | //
793 | //##
794 | 
795 | $breadcrumb-padding-vertical:   8px !default;
796 | $breadcrumb-padding-horizontal: 15px !default;
797 | //** Breadcrumb background color
798 | $breadcrumb-bg:                 #f5f5f5 !default;
799 | //** Breadcrumb text color
800 | $breadcrumb-color:              #ccc !default;
801 | //** Text color of current page in the breadcrumb
802 | $breadcrumb-active-color:       $gray-light !default;
803 | //** Textual separator for between breadcrumb elements
804 | $breadcrumb-separator:          "/" !default;
805 | 
806 | 
807 | //== Carousel
808 | //
809 | //##
810 | 
811 | $carousel-text-shadow:                        0 1px 2px rgba(0,0,0,.6) !default;
812 | 
813 | $carousel-control-color:                      #fff !default;
814 | $carousel-control-width:                      15% !default;
815 | $carousel-control-opacity:                    .5 !default;
816 | $carousel-control-font-size:                  20px !default;
817 | 
818 | $carousel-indicator-active-bg:                #fff !default;
819 | $carousel-indicator-border-color:             #fff !default;
820 | 
821 | $carousel-caption-color:                      #fff !default;
822 | 
823 | 
824 | //== Close
825 | //
826 | //##
827 | 
828 | $close-font-weight:           bold !default;
829 | $close-color:                 #000 !default;
830 | $close-text-shadow:           0 1px 0 #fff !default;
831 | 
832 | 
833 | //== Code
834 | //
835 | //##
836 | 
837 | $code-color:                  #c7254e !default;
838 | $code-bg:                     #f9f2f4 !default;
839 | 
840 | $kbd-color:                   #fff !default;
841 | $kbd-bg:                      #333 !default;
842 | 
843 | $pre-bg:                      #f5f5f5 !default;
844 | $pre-color:                   $gray-dark !default;
845 | $pre-border-color:            #ccc !default;
846 | $pre-scrollable-max-height:   340px !default;
847 | 
848 | 
849 | //== Type
850 | //
851 | //##
852 | 
853 | //** Horizontal offset for forms and lists.
854 | $component-offset-horizontal: 180px !default;
855 | //** Text muted color
856 | $text-muted:                  $gray-light !default;
857 | //** Abbreviations and acronyms border color
858 | $abbr-border-color:           $gray-light !default;
859 | //** Headings small color
860 | $headings-small-color:        $gray-light !default;
861 | //** Blockquote small color
862 | $blockquote-small-color:      $gray-light !default;
863 | //** Blockquote font size
864 | $blockquote-font-size:        ($font-size-base * 1.25) !default;
865 | //** Blockquote border color
866 | $blockquote-border-color:     $gray-lighter !default;
867 | //** Page header border color
868 | $page-header-border-color:    $gray-lighter !default;
869 | //** Width of horizontal description list titles
870 | $dl-horizontal-offset:        $component-offset-horizontal !default;
871 | //** Point at which .dl-horizontal becomes horizontal
872 | $dl-horizontal-breakpoint:    $grid-float-breakpoint !default;
873 | //** Horizontal line color.
874 | $hr-border:                   $gray-lighter !default;
875 | 


--------------------------------------------------------------------------------
/assets/scss/styles.scss:
--------------------------------------------------------------------------------
1 | @import 'bootstrap/bootstrap-custom';


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | var gulp = require('gulp'),
 3 |     concat = require('gulp-concat'),
 4 |     uglify = require('gulp-uglify'),
 5 |     sass = require('gulp-sass'),
 6 |     minify = require('gulp-minify-css'),
 7 |     sourcemaps = require('gulp-sourcemaps'),
 8 |     watch = require('gulp-watch');
 9 | 
10 | var jsFileList = [
11 |     './node_modules/jquery/dist/jquery.min.js',
12 |     './node_modules/bootstrap-sass/assets/javascripts/bootstrap/transition.js',
13 |     './node_modules/bootstrap-sass/assets/javascripts/bootstrap/alert.js',
14 |     './node_modules/bootstrap-sass/assets/javascripts/bootstrap/button.js',
15 |     './node_modules/bootstrap-sass/assets/javascripts/bootstrap/carousel.js',
16 |     './node_modules/bootstrap-sass/assets/javascripts/bootstrap/collapse.js',
17 |     './node_modules/bootstrap-sass/assets/javascripts/bootstrap/dropdown.js',
18 |     './node_modules/bootstrap-sass/assets/javascripts/bootstrap/modal.js',
19 |     './node_modules/bootstrap-sass/assets/javascripts/bootstrap/tooltip.js',
20 |     './node_modules/bootstrap-sass/assets/javascripts/bootstrap/popover.js',
21 |     './node_modules/bootstrap-sass/assets/javascripts/bootstrap/scrollspy.js',
22 |     './node_modules/bootstrap-sass/assets/javascripts/bootstrap/tab.js',
23 |     './node_modules/bootstrap-sass/assets/javascripts/bootstrap/affix.js',
24 |     './node_modules/angular/angular.min.js',
25 |     './node_modules/angular-resource/angular-resource.min.js',
26 |     './node_modules/angular-ui-router/release/angular-ui-router.min.js',
27 |     './node_modules/angular-local-storage/dist/angular-local-storage.min.js',
28 |     './node_modules/angular-utils-pagination/dirPagination.js',
29 |     './assets/js/config.js',
30 |     './assets/js/angular-front-end-app.js',
31 |     './assets/js/factories/*.js',
32 |     './assets/js/controllers/*.js'
33 | ];
34 | 
35 | gulp.task('sass', function() {
36 |     gulp.src('./assets/scss/*.scss')
37 |         .pipe(sourcemaps.init())
38 |         .pipe(sass().on('error', sass.logError))
39 |         .pipe(minify())
40 |         .pipe(sourcemaps.write())
41 |         .pipe(gulp.dest('./build/css'));
42 | });
43 | 
44 | gulp.task('js', function(){
45 |     return gulp.src(jsFileList)
46 |         .pipe(concat({ path:'scripts.js' }))
47 |         //.pipe(uglify())
48 |         .pipe(gulp.dest('./build/js'));
49 | });
50 | 
51 | gulp.task('default', ['sass', 'js'], function(){
52 |     gulp.watch( './assets/scss/*.scss', ['sass'] );
53 |     gulp.watch( './assets/js/**/*.js', ['js'] );
54 | });
55 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" ng-app="angular-front-end">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Angular Front End</title>
 6 |     <link href="build/css/styles.css" rel="stylesheet" type="text/css" />
 7 | </head>
 8 | <body>
 9 |     <div class="container">
10 |         <div id="header" ng-controller="header">
11 |             <nav class="navbar navbar-default">
12 |                 <div class="container-fluid">
13 |                     <div class="navbar-header">
14 |                         <a class="navbar-brand" ui-sref="home">{{site.name}}</a>
15 |                         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
16 |                             <span class="sr-only">Toggle navigation</span>
17 |                             <span class="icon-bar"></span>
18 |                             <span class="icon-bar"></span>
19 |                             <span class="icon-bar"></span>
20 |                         </button>
21 |                     </div>
22 |                     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
23 |                         <ul class="nav navbar-nav">
24 |                             <li><a ui-sref="lists">Blog</a></li>
25 |                         </ul>
26 |                     </div>
27 |                 </div>
28 |             </nav>
29 |             <h1 id="site-title">{{site.name}}</h1>
30 | 
31 |             <h3 id="site-description">{{site.desc}}</h3>
32 |         </div>
33 | 
34 | 
35 |         <div ui-view></div>
36 |     </div>
37 | <script type="text/javascript" src="build/js/scripts.js"></script>
38 | </body>
39 | </html>
40 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular-wp-front-end",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/CalderaWP/angular-wp-front-end.git"
12 |   },
13 |   "author": "caldera",
14 |   "license": "GPL-3.0",
15 |   "bugs": {
16 |     "url": "https://github.com/CalderaWP/angular-wp-front-end/issues"
17 |   },
18 |   "homepage": "https://github.com/CalderaWP/angular-wp-front-end#readme",
19 |   "devDependencies": {
20 |     "angular": "^1.5.5",
21 |     "angular-local-storage": "^0.2.7",
22 |     "angular-resource": "^1.5.5",
23 |     "angular-ui-router": "^0.2.18",
24 |     "angular-utils-pagination": "^0.11.1",
25 |     "bootstrap-sass": "^3.3.6",
26 |     "gulp": "^3.9.1",
27 |     "gulp-concat": "^2.6.0",
28 |     "gulp-minify-css": "^1.2.4",
29 |     "gulp-sass": "^2.3.1",
30 |     "gulp-sourcemaps": "^1.6.0",
31 |     "gulp-uglify": "^1.5.3",
32 |     "gulp-watch": "^4.3.5",
33 |     "jquery": "^2.2.3"
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/templates/list.html:
--------------------------------------------------------------------------------
 1 | <div class="row">
 2 |     <div class="col-sm-12">
 3 |         <h2>List View</h2>
 4 |         <div class="row">
 5 |             <div class="col-sm-12">
 6 |                 <article class="row" dir-paginate="post in posts | itemsPerPage: posts_per_page" current-page="pagination.current">
 7 |                     <div class="col-sm-7">
 8 |                         <h3>{{post.title.rendered}}</h3>
 9 |                     </div>
10 |                     <div class="col-sm-3">
11 |                         {{post.date}}
12 |                     </div>
13 |                     <div class="col-sm-2">
14 |                         <a class="btn btn-primary btn-block" ui-sref="single({cpt:post.type,slug:post.slug})">View</a>
15 |                     </div>
16 |                 </article>
17 |             </div>
18 |         </div>
19 |         <div class="row">
20 |             <div class="col-sm-12">
21 |                 <dir-pagination-controls on-page-change="pageChanged(newPageNumber)"></dir-pagination-controls>
22 |             </div>
23 |         </div>
24 |     </div>
25 | </div>


--------------------------------------------------------------------------------
/templates/pagination.tpl.html:
--------------------------------------------------------------------------------
 1 | <ul class="pagination" ng-if="1 < pages.length || !autoHide">
 2 |     <li ng-if="boundaryLinks" ng-class="{ disabled : pagination.current == 1 }">
 3 |         <a href="" ng-click="setCurrent(1)">&laquo;</a>
 4 |     </li>
 5 |     <li ng-if="directionLinks" ng-class="{ disabled : pagination.current == 1 }">
 6 |         <a href="" ng-click="setCurrent(pagination.current - 1)">&lsaquo;</a>
 7 |     </li>
 8 |     <li ng-repeat="pageNumber in pages track by tracker(pageNumber, $index)" ng-class="{ active : pagination.current == pageNumber, disabled : pageNumber == '...' }">
 9 |         <a href="" ng-click="setCurrent(pageNumber)">{{ pageNumber }}</a>
10 |     </li>
11 | 
12 |     <li ng-if="directionLinks" ng-class="{ disabled : pagination.current == pagination.last }">
13 |         <a href="" ng-click="setCurrent(pagination.current + 1)">&rsaquo;</a>
14 |     </li>
15 |     <li ng-if="boundaryLinks"  ng-class="{ disabled : pagination.current == pagination.last }">
16 |         <a href="" ng-click="setCurrent(pagination.last)">&raquo;</a>
17 |     </li>
18 | </ul>


--------------------------------------------------------------------------------
/templates/single.html:
--------------------------------------------------------------------------------
 1 | <div class="row">
 2 |     <div class="col-sm-12">
 3 |         <a ui-sref="archive">Back to List</a>
 4 |         <h2>{{post.title.rendered}}</h2>
 5 |         <dl class="post-meta" ng-show="author">
 6 |            <dt>Posted</dt>
 7 |             <dd>{{post.date}}</dd>
 8 |             <dt>Posted By</dt>
 9 |             <dd>
10 |                 <a ui-sref="author({author:author.slug})">{{author.name}}</a>
11 |             </dd>
12 |             <dt>Categories</dt>
13 |             <dd>
14 |                 <a ng-repeat="cat in cats" ui-sref="category({term:cat.slug})">{{cat.name}} </a>
15 |             </dd>
16 |         </dl>
17 |         <div ng-bind-html="post.content.rendered | to_trusted"></div>
18 |     </div>
19 | </div>


--------------------------------------------------------------------------------