├── .gitignore ├── README.md ├── build ├── assets │ ├── css │ │ ├── main.css │ │ └── main.css.map │ └── js │ │ ├── script.js │ │ ├── script.min.js │ │ └── script.min.js.map └── index.html ├── client ├── data │ └── index.twig.json └── templates │ ├── blocks │ ├── block-main-bottom.twig │ └── block-main-top.twig │ ├── includes │ ├── footer.twig │ ├── head.twig │ ├── header.twig │ ├── scripts.twig │ └── styles.twig │ ├── index.twig │ └── layouts │ └── default.twig ├── docs ├── assets │ ├── css │ │ ├── main.css │ │ └── main.css.map │ └── js │ │ ├── script.js │ │ ├── script.min.js │ │ └── script.min.js.map ├── development │ ├── about.html │ ├── assets │ │ ├── css │ │ │ ├── main.css │ │ │ └── main.css.map │ │ └── js │ │ │ ├── script.min.js │ │ │ └── script.min.js.map │ ├── contact.html │ ├── index.html │ └── service.html └── index.html ├── gulpfile.js ├── package.json └── scss └── vendors ├── _variables.scss ├── bootstrap ├── _alert.scss ├── _badge.scss ├── _breadcrumb.scss ├── _button-group.scss ├── _buttons.scss ├── _card.scss ├── _carousel.scss ├── _close.scss ├── _code.scss ├── _custom-forms.scss ├── _dropdown.scss ├── _forms.scss ├── _functions.scss ├── _grid.scss ├── _images.scss ├── _input-group.scss ├── _jumbotron.scss ├── _list-group.scss ├── _media.scss ├── _mixins.scss ├── _modal.scss ├── _nav.scss ├── _navbar.scss ├── _pagination.scss ├── _popover.scss ├── _print.scss ├── _progress.scss ├── _reboot.scss ├── _root.scss ├── _tables.scss ├── _tooltip.scss ├── _transitions.scss ├── _type.scss ├── _utilities.scss ├── _variables.scss ├── bootstrap-grid.scss ├── bootstrap-reboot.scss ├── bootstrap.scss ├── mixins │ ├── _alert.scss │ ├── _background-variant.scss │ ├── _badge.scss │ ├── _border-radius.scss │ ├── _box-shadow.scss │ ├── _breakpoints.scss │ ├── _buttons.scss │ ├── _caret.scss │ ├── _clearfix.scss │ ├── _float.scss │ ├── _forms.scss │ ├── _gradients.scss │ ├── _grid-framework.scss │ ├── _grid.scss │ ├── _hover.scss │ ├── _image.scss │ ├── _list-group.scss │ ├── _lists.scss │ ├── _nav-divider.scss │ ├── _pagination.scss │ ├── _reset-text.scss │ ├── _resize.scss │ ├── _screen-reader.scss │ ├── _size.scss │ ├── _table-row.scss │ ├── _text-emphasis.scss │ ├── _text-hide.scss │ ├── _text-truncate.scss │ ├── _transition.scss │ └── _visibility.scss └── utilities │ ├── _align.scss │ ├── _background.scss │ ├── _borders.scss │ ├── _clearfix.scss │ ├── _display.scss │ ├── _embed.scss │ ├── _flex.scss │ ├── _float.scss │ ├── _position.scss │ ├── _screenreaders.scss │ ├── _shadows.scss │ ├── _sizing.scss │ ├── _spacing.scss │ ├── _text.scss │ └── _visibility.scss └── main.scss /.gitignore: -------------------------------------------------------------------------------- 1 | _site 2 | .sass-cache 3 | node_modules/ 4 | package-lock.json 5 | gulpfile.*.js 6 | #build/ 7 | .netlify/ -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Frontend Development with Gulp, Twig and SCSS 2 | Tools : 3 | 4 | * [Gulp](https://gulpjs.com) 5 | * [Gulp Twig](https://www.npmjs.com/package/gulp-twig) 6 | * [Bootstrap SCSS](https://github.com/twbs/bootstrap/tree/v4.1.2/scss) 7 | 8 | Demos : 9 | * [Medium](https://medium.com/p/65f4b40d3b8e/) 10 | 11 | **gulp** and **Watch!** :coffee: :heart: -------------------------------------------------------------------------------- /build/assets/js/script.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function() { 2 | // Your jquery scripts in here 3 | }); -------------------------------------------------------------------------------- /build/assets/js/script.min.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function() { 2 | // Your jquery scripts in here 3 | }); 4 | //# sourceMappingURL=script.min.js.map 5 | -------------------------------------------------------------------------------- /build/assets/js/script.min.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["script.js"],"names":[],"mappings":"AAAA;AACA;AACA","file":"script.min.js","sourcesContent":["$(document).ready(function() {\n // Your jquery scripts in here\n});"]} -------------------------------------------------------------------------------- /build/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Web page title 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 |
19 | 20 | 21 |
22 | 23 | 24 | 25 |
26 |
27 |

Gulp, Twig and SCSS

28 | A Gulp setup by @dyarfi 29 |
30 |
31 | 32 | 33 | 34 |
35 | 36 | 37 | 38 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /client/data/index.twig.json: -------------------------------------------------------------------------------- 1 | { 2 | "title":"Web page title", 3 | "description":"A Gulp setup by @dyarfi" 4 | } -------------------------------------------------------------------------------- /client/templates/blocks/block-main-bottom.twig: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /client/templates/blocks/block-main-top.twig: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /client/templates/includes/footer.twig: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /client/templates/includes/head.twig: -------------------------------------------------------------------------------- 1 | 2 | {{ title }} 3 | {% include "../includes/styles.twig" %} -------------------------------------------------------------------------------- /client/templates/includes/header.twig: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 |
5 | -------------------------------------------------------------------------------- /client/templates/includes/scripts.twig: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /client/templates/includes/styles.twig: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /client/templates/index.twig: -------------------------------------------------------------------------------- 1 | {% extends "layouts/default.twig" %} 2 | 3 | {% block content %} 4 | 5 | 6 | {% include 'blocks/block-main-top.twig' %} 7 | 8 |
9 |
10 |

Gulp, Twig and SCSS

11 | {{description}} 12 |
13 |
14 | 15 | 16 | {% include 'blocks/block-main-bottom.twig' %} 17 | 18 | {% endblock %} -------------------------------------------------------------------------------- /client/templates/layouts/default.twig: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {% include "../includes/head.twig" %} 5 | 6 | 7 | 8 | {% include "../includes/header.twig" %} 9 | 10 | 11 |
12 | {% block content %} 13 | 14 | {% endblock %} 15 |
16 | 17 | 18 | {% include "../includes/footer.twig" %} 19 | 20 | 21 | {% include "../includes/scripts.twig" %} 22 | 23 | 24 | -------------------------------------------------------------------------------- /docs/assets/js/script.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function() { 2 | // Your jquery scripts in here 3 | }); -------------------------------------------------------------------------------- /docs/assets/js/script.min.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function() { 2 | // Your jquery scripts in here 3 | }); 4 | //# sourceMappingURL=script.min.js.map 5 | -------------------------------------------------------------------------------- /docs/assets/js/script.min.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["script.js"],"names":[],"mappings":"AAAA;AACA;AACA","file":"script.min.js","sourcesContent":["$(document).ready(function() {\n // Your jquery scripts in here\n});"]} -------------------------------------------------------------------------------- /docs/development/about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | About Us 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 51 |
52 | 53 | 54 |
55 | 56 | 57 | 58 | 59 | 60 |
61 |
62 |
63 |

About Us The IOT Service Agent Company

64 |
65 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

Learn More Getting Started 66 |
67 |
68 |
69 |
70 | 71 |
72 |
73 |

About Us

74 |
75 |
76 |
77 |

We are the IOT Service Agency

78 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum quos minus saepe.

79 | Analysis for your IOT Projects 80 |
81 |
82 |

Connected, Collect and Analyze

83 |
84 |

Weather stations, motion detections or heat maps with any sensor on connected devices

85 | — We covered all your dashboard analytics data 86 |
87 |
88 |
89 |
90 | 91 |
92 |
93 |

Getting Started

94 |
95 |
96 |
97 |
98 |
99 |

Lorem ipsum dolor sit amet.

100 |

Learn More About IOTA Connect

101 |

IOTA Connect is an IoT analytics platform service that allows you to aggregate, visualize and analyze live data streams in the cloud. IOTA Connect provides instant visualizations of data posted by your devices to IOTA Connect. With the ability to execute MATLAB® code in IOTA Connect you can perform online analysis and processing of the data as it comes in. IOTA Connect is often used for prototyping and proof of concept IoT systems that require analytics.

102 |
103 |
104 |
105 |
106 |

Lorem ipsum dolor sit amet.

107 |

What is IoT?

108 |

Internet of Things (IoT) describes an emerging trend where a large number of embedded devices (things) are connected to the Internet.

109 | IoT solutions are built for many vertical applications such as environmental monitoring and control, health monitoring, vehicle fleet monitoring, industrial monitoring and control, and various home automation.

110 |
111 |
112 |
113 |
114 |

Lorem ipsum dolor sit amet.

115 |

Learn More About IOTA Connect

116 |

IOTA Connect is an IoT analytics platform service that allows you to aggregate, visualize and analyze live data streams in the cloud. IOTA Connect provides instant visualizations of data posted by your devices to IOTA Connect. With the ability to execute MATLAB® code in IOTA Connect you can perform online analysis and processing of the data as it comes in. IOTA Connect is often used for prototyping and proof of concept IoT systems that require analytics.

117 |
118 |
119 |
120 |
121 |
122 | 123 | 124 | 125 | 126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 | 134 | 135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 | 144 | 145 | 146 | 147 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | -------------------------------------------------------------------------------- /docs/development/assets/js/script.min.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function() { 2 | // Your jquery scripts in here 3 | // Console console.log('===================================='); 4 | console.log('===================================='); 5 | }); 6 | //# sourceMappingURL=script.min.js.map 7 | -------------------------------------------------------------------------------- /docs/development/assets/js/script.min.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["script.js"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA","file":"script.min.js","sourcesContent":["$(document).ready(function() {\n // Your jquery scripts in here\n // Console console.log('====================================');\n console.log('====================================');\n});"]} -------------------------------------------------------------------------------- /docs/development/service.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Our Services 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 51 |
52 | 53 | 54 |
55 | 56 | 57 |
58 | 59 | 60 | 61 | 62 |
63 | 64 | 65 |
66 |
67 |
68 | 69 |
70 |
71 |
72 |
73 |
74 |
75 |

Development

76 |

77 | IOTA is also a workshop of skilled developers and architects. We take care of the complete development cycle, including design, planning, testing, and deployment. We emphasize quality and robustness, to match the requirements of our very demanding customers (security, performance, availability, maintainability).

Our development stack (React.js, Node.js, GraphQL, Symfony, PostgreSQL, NoSQL) supports incremental development, from prototyping to large software architectures, seamlessly.

We put value creation at the heart of the development process. We build products, not programs. 78 |

79 | 80 |
Read More
81 |
82 |
83 |
84 |
85 |
86 |
87 | 88 | 89 |
90 |
91 |
92 | 93 |
94 |
95 |
96 |
97 |
98 |
99 |

Innovation

100 |

101 | Our definition of innovation: finding the sweet spot for a viable product in an ocean of uncertainty made of new technologies, new customer behaviors, and new business models.

Our lab helps startups and industry leaders to detect, design, and build new innovative digital products. We leverage creative methods inspired by Design Thinking, rapid prototyping iterations driven by Lean startup, and an obsession for progress metrics. You can only improve what you measure, right?

It's like your own private startup. 102 |

103 | 104 |
Read More
105 |
106 |
107 |
108 |
109 |
110 |
111 | 112 | 113 |
114 |
115 |
116 | 117 |
118 |
119 |
120 |
121 |
122 |
123 |

Consulting

124 |

125 | We have developed expertise in agile product management, microservices, API-centric architectures, real-time communication, and Single-Page applications. We use it to assist CTOs and startups both during the early steps of a major strategic move, as well as during "spikes" or technical explorations.

IOTA cultivates a spirit of partnership ; our services range from hosting to support, including tech training and agile coaching. 126 |

127 | 128 |
Read More
129 |
130 |
131 |
132 |
133 |
134 |
135 | 136 | 137 |
138 | 139 |
140 | 141 | 142 | 143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 | 151 | 152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 | 161 | 162 | 163 | 164 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Web page title 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 |
19 | 20 | 21 |
22 | 23 | 24 | 25 |
26 |
27 |

Gulp, Twig and SCSS

28 | A Gulp setup by @dyarfi 29 |
30 |
31 | 32 | 33 | 34 |
35 | 36 | 37 | 38 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | /*global require*/ 2 | "use strict"; 3 | 4 | var gulp = require('gulp'), 5 | path = require('path'), 6 | data = require('gulp-data'), 7 | twig = require('gulp-twig'), // Decided to use twig, because already familiar with it 8 | prefix = require('gulp-autoprefixer'), 9 | sass = require('gulp-sass'), 10 | plumber = require('gulp-plumber'), 11 | concat = require('gulp-concat'), 12 | sourcemaps = require('gulp-sourcemaps'), 13 | browserSync = require('browser-sync'), 14 | fs = require('fs'); 15 | 16 | /* 17 | * Directories here 18 | */ 19 | var paths = { 20 | build: './build/', 21 | sass: './scss/', 22 | css: './build/assets/css/', 23 | data: './client/data/' 24 | }; 25 | 26 | /** 27 | * Compile .twig files and pass in data from json file 28 | * matching file name. index.twig - index.twig.json 29 | */ 30 | gulp.task('twig', function () { 31 | // return gulp.src(['./client/templates/*.twig','./client/data/head.twig']) 32 | return gulp.src(['./client/templates/*.twig']) 33 | // Stay live and reload on error 34 | .pipe(plumber({ 35 | handleError: function (err) { 36 | console.log(err); 37 | this.emit('end'); 38 | } 39 | })) 40 | // Load template pages json data 41 | .pipe(data(function (file) { 42 | return JSON.parse(fs.readFileSync(paths.data + path.basename(file.path) + '.json')); 43 | })) 44 | .pipe(twig()) 45 | .on('error', function (err) { 46 | process.stderr.write(err.message + '\n'); 47 | this.emit('end'); 48 | }) 49 | .pipe(gulp.dest(paths.build)); 50 | }); 51 | 52 | /** 53 | * Recompile .twig files and live reload the browser 54 | */ 55 | gulp.task('rebuild', ['twig'], function () { 56 | // BrowserSync Reload 57 | browserSync.reload(); 58 | }); 59 | 60 | /** 61 | * Wait for twig, js and sass tasks, then launch the browser-sync Server 62 | */ 63 | gulp.task('browser-sync', ['sass', 'twig', 'js'], function () { 64 | browserSync({ 65 | server: { 66 | baseDir: paths.build 67 | }, 68 | notify: false, 69 | browser:"google chrome" 70 | }); 71 | }); 72 | 73 | /** 74 | * Compile .scss files into build css directory With autoprefixer no 75 | * need for vendor prefixes then live reload the browser. 76 | */ 77 | gulp.task('sass', function () { 78 | return gulp.src(paths.sass + 'vendors/main.scss') 79 | .pipe(sourcemaps.init()) 80 | // Stay live and reload on error 81 | .pipe(plumber({ 82 | handleError: function (err) { 83 | console.log(err); 84 | this.emit('end'); 85 | } 86 | })) 87 | .pipe(sass({ 88 | includePaths: [paths.sass + 'vendors/'], 89 | outputStyle: 'expanded' 90 | }) 91 | .on('error', function (err) { 92 | console.log(err.message); 93 | // sass.logError 94 | this.emit('end'); 95 | }) 96 | ) 97 | .pipe(prefix(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { 98 | cascade: true 99 | })) 100 | .pipe(sourcemaps.write('.')) 101 | .pipe(gulp.dest(paths.css)); 102 | }); 103 | 104 | /** 105 | * Compile .js files into build js directory With app.min.js 106 | */ 107 | gulp.task('js', function(){ 108 | return gulp.src('build/assets/js/script.js') 109 | .pipe(sourcemaps.init()) 110 | .pipe(concat('script.min.js')) 111 | .on('error', function (err) { 112 | console.log(err.toString()); 113 | this.emit('end'); 114 | }) 115 | .pipe(sourcemaps.write('.')) 116 | .pipe(gulp.dest('build/assets/js')); 117 | }); 118 | 119 | /** 120 | * Watch scss files for changes & recompile 121 | * Watch .twig files run twig-rebuild then reload BrowserSync 122 | */ 123 | gulp.task('watch', function () { 124 | gulp.watch(paths.build + 'assets/js/script.js', ['js', browserSync.reload]); 125 | gulp.watch(paths.sass + 'vendors/main.scss', ['sass', browserSync.reload]); 126 | gulp.watch(['client/templates/**/*.twig','client/data/*.twig.json'], {cwd:'./'}, ['rebuild']); 127 | }); 128 | 129 | // Build task compile sass and twig. 130 | gulp.task('build', ['sass', 'twig']); 131 | 132 | /** 133 | * Default task, running just `gulp` will compile the sass, 134 | * compile the project site, launch BrowserSync then watch 135 | * files for changes 136 | */ 137 | gulp.task('default', ['browser-sync', 'watch']); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gulp-twig-scss", 3 | "version": "1.0.0", 4 | "description": "Frontend development using Gulp, Twig and SCSS", 5 | "main": "gulpfile.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/dyarfi/gulp-twig-scss" 12 | }, 13 | "keywords": [ 14 | "twig", 15 | "gulp", 16 | "HTML", 17 | "frontend", 18 | "SCSS" 19 | ], 20 | "author": "Defrian Yarfi", 21 | "license": "ISC", 22 | "homepage": "https://dyarfi.github.io", 23 | "dependencies": { 24 | "browser-sync": "^2.26.3", 25 | "gulp": "^3.9.1", 26 | "gulp-autoprefixer": "^6.0.0", 27 | "gulp-concat": "^2.6.1", 28 | "gulp-data": "^1.3.1", 29 | "gulp-plumber": "^1.2.0", 30 | "gulp-sass": "^4.0.2", 31 | "gulp-sourcemaps": "^2.6.4", 32 | "gulp-twig": "^1.2.0", 33 | "gulp-watch": "^5.0.1" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /scss/vendors/_variables.scss: -------------------------------------------------------------------------------- 1 | // Bootstrap Variables 2 | 3 | // Set a specific jump point for requesting color jumps 4 | $theme-color-interval: 8% !default; 5 | 6 | // The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255. 7 | $yiq-contrasted-threshold: 200 !default; 8 | 9 | // Borders 10 | $border-width: 3px !default; 11 | 12 | $border-radius: .25rem !default; 13 | $border-radius-lg: .3rem !default; 14 | $border-radius-sm: .2rem !default; 15 | 16 | // Brands 17 | 18 | // Typography 19 | // Fonts 20 | // 21 | // Font, line-height, and color for body text, headings, and more. 22 | 23 | // stylelint-disable value-keyword-case 24 | $font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default; 25 | $font-family-monospace: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; 26 | $font-family-base: $font-family-sans-serif !default; 27 | // stylelint-enable value-keyword-case 28 | 29 | // $font-size-base: 1rem !default; // Assumes the browser default, typically `16px` 30 | $font-size-base: .90rem !default; // Assumes the browser default, typically `16px` 31 | $font-size-lg: ($font-size-base * 1.25) !default; 32 | $font-size-md: ($font-size-base * 1.115) !default; 33 | $font-size-sm: ($font-size-base * .875) !default; 34 | 35 | $font-weight-light: 300 !default; 36 | $font-weight-normal: 400 !default; 37 | $font-weight-bold: 700 !default; 38 | 39 | $font-weight-base: $font-weight-normal !default; 40 | $line-height-base: 1.5 !default; 41 | 42 | $h1-font-size: $font-size-base * 2.5 !default; 43 | $h2-font-size: $font-size-base * 2 !default; 44 | $h3-font-size: $font-size-base * 1.75 !default; 45 | $h4-font-size: $font-size-base * 1.5 !default; 46 | $h5-font-size: $font-size-base * 1.25 !default; 47 | $h6-font-size: $font-size-base !default; 48 | 49 | 50 | // Buttons 51 | // 52 | // For each of Bootstrap's buttons, define text, background and border color. 53 | 54 | $input-btn-padding-y: .375rem !default; 55 | $input-btn-padding-x: .75rem !default; 56 | $input-btn-line-height: $line-height-base !default; 57 | 58 | $input-btn-focus-width: .0rem !default; 59 | $input-btn-focus-box-shadow: .0rem !default; 60 | 61 | $input-btn-padding-y-sm: .25rem !default; 62 | $input-btn-padding-x-sm: .5rem !default; 63 | 64 | $input-btn-padding-y-lg: .5rem !default; 65 | $input-btn-padding-x-lg: 1rem !default; 66 | 67 | $btn-block-spacing-y: .5rem !default; 68 | 69 | // Allows for customizing button radius independently from global border radius 70 | $btn-border-radius: $border-radius !default; 71 | $btn-border-radius-lg: $border-radius-lg !default; 72 | $btn-border-radius-sm: $border-radius-sm !default; 73 | 74 | 75 | $btn-transition: background-color .30s ease-in-out, border-color .30s ease-in-out, box-shadow .30s ease-in-out !default; 76 | 77 | // Inputs 78 | $input-transition: border-color ease-in-out .30s, box-shadow ease-in-out .30s !default; 79 | 80 | // Cards 81 | $card-border-radius:1rem !default; 82 | 83 | // Transition 84 | $transition-base: all .5s ease-in-out !default; 85 | $transition-fade: opacity .35s linear !default; 86 | $transition-collapse: height .55s ease !default; 87 | 88 | // Navs 89 | $nav-pills-border-radius: $border-radius !default; 90 | 91 | // This cause error on webpack compile on node-sass components 92 | $navbar-dark-toggler-icon-bg: none; 93 | $navbar-light-toggler-icon-bg: none; 94 | 95 | // Carousel 96 | $white: #ffffff; 97 | $carousel-control-color: $white !default; 98 | $carousel-control-width: 15% !default; 99 | $carousel-control-opacity: .5 !default; 100 | 101 | $carousel-indicator-width: 30px !default; 102 | $carousel-indicator-height: 3px !default; 103 | $carousel-indicator-spacer: 3px !default; 104 | 105 | $carousel-caption-width: 70% !default; 106 | 107 | $carousel-control-icon-width: 20px !default; 108 | 109 | $carousel-control-prev-icon-bg: none; 110 | $carousel-control-next-icon-bg: none; 111 | 112 | $carousel-transition: transform .6s ease !default; 113 | 114 | // Dropdowns 115 | // 116 | // Dropdown menu container and contents. 117 | 118 | $dropdown-min-width: 10rem !default; 119 | $dropdown-padding-y: .5rem !default; 120 | $dropdown-spacer: .125rem !default; 121 | $dropdown-border-radius: $border-radius !default; 122 | $dropdown-border-width: $border-width !default; 123 | 124 | $dropdown-item-padding-y: .25rem !default; 125 | $dropdown-item-padding-x: 1.5rem !default; 126 | 127 | 128 | // Modals 129 | // Padding applied to the modal body 130 | $modal-inner-padding: 1rem !default; 131 | 132 | $modal-dialog-margin: .5rem !default; 133 | $modal-dialog-margin-y-sm-up: 1.75rem !default; 134 | 135 | $modal-title-line-height: $line-height-base !default; 136 | 137 | // $modal-backdrop-bg: $black !default; 138 | $modal-backdrop-opacity: .5 !default; 139 | $modal-header-padding: 1rem !default; 140 | 141 | $modal-lg: 800px !default; 142 | $modal-md: 500px !default; 143 | $modal-sm: 300px !default; 144 | 145 | $modal-transition: transform .3s ease-out !default; 146 | 147 | // Globals 148 | $enable-caret: true !default; 149 | $enable-rounded: false !default; 150 | $enable-shadows: false !default; 151 | $enable-gradients: false !default; 152 | $enable-transitions: true !default; 153 | $enable-hover-media-query: true !default; 154 | $enable-grid-classes: true !default; 155 | $enable-print-styles: true !default; 156 | 157 | -------------------------------------------------------------------------------- /scss/vendors/bootstrap/_alert.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Base styles 3 | // 4 | 5 | .alert { 6 | position: relative; 7 | padding: $alert-padding-y $alert-padding-x; 8 | margin-bottom: $alert-margin-bottom; 9 | border: $alert-border-width solid transparent; 10 | @include border-radius($alert-border-radius); 11 | } 12 | 13 | // Headings for larger alerts 14 | .alert-heading { 15 | // Specified to prevent conflicts of changing $headings-color 16 | color: inherit; 17 | } 18 | 19 | // Provide class for links that match alerts 20 | .alert-link { 21 | font-weight: $alert-link-font-weight; 22 | } 23 | 24 | 25 | // Dismissible alerts 26 | // 27 | // Expand the right padding and account for the close button's positioning. 28 | 29 | .alert-dismissible { 30 | padding-right: ($close-font-size + $alert-padding-x * 2); 31 | 32 | // Adjust close link position 33 | .close { 34 | position: absolute; 35 | top: 0; 36 | right: 0; 37 | padding: $alert-padding-y $alert-padding-x; 38 | color: inherit; 39 | } 40 | } 41 | 42 | 43 | // Alternate styles 44 | // 45 | // Generate contextual modifier classes for colorizing the alert. 46 | 47 | @each $color, $value in $theme-colors { 48 | .alert-#{$color} { 49 | @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level)); 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /scss/vendors/bootstrap/_badge.scss: -------------------------------------------------------------------------------- 1 | // Base class 2 | // 3 | // Requires one of the contextual, color modifier classes for `color` and 4 | // `background-color`. 5 | 6 | .badge { 7 | display: inline-block; 8 | padding: $badge-padding-y $badge-padding-x; 9 | font-size: $badge-font-size; 10 | font-weight: $badge-font-weight; 11 | line-height: 1; 12 | text-align: center; 13 | white-space: nowrap; 14 | vertical-align: baseline; 15 | @include border-radius($badge-border-radius); 16 | 17 | // Empty badges collapse automatically 18 | &:empty { 19 | display: none; 20 | } 21 | } 22 | 23 | // Quick fix for badges in buttons 24 | .btn .badge { 25 | position: relative; 26 | top: -1px; 27 | } 28 | 29 | // Pill badges 30 | // 31 | // Make them extra rounded with a modifier to replace v3's badges. 32 | 33 | .badge-pill { 34 | padding-right: $badge-pill-padding-x; 35 | padding-left: $badge-pill-padding-x; 36 | @include border-radius($badge-pill-border-radius); 37 | } 38 | 39 | // Colors 40 | // 41 | // Contextual variations (linked badges get darker on :hover). 42 | 43 | @each $color, $value in $theme-colors { 44 | .badge-#{$color} { 45 | @include badge-variant($value); 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /scss/vendors/bootstrap/_breadcrumb.scss: -------------------------------------------------------------------------------- 1 | .breadcrumb { 2 | display: flex; 3 | flex-wrap: wrap; 4 | padding: $breadcrumb-padding-y $breadcrumb-padding-x; 5 | margin-bottom: $breadcrumb-margin-bottom; 6 | list-style: none; 7 | background-color: $breadcrumb-bg; 8 | @include border-radius($breadcrumb-border-radius); 9 | } 10 | 11 | .breadcrumb-item { 12 | // The separator between breadcrumbs (by default, a forward-slash: "/") 13 | + .breadcrumb-item { 14 | padding-left: $breadcrumb-item-padding; 15 | 16 | &::before { 17 | display: inline-block; // Suppress underlining of the separator in modern browsers 18 | padding-right: $breadcrumb-item-padding; 19 | color: $breadcrumb-divider-color; 20 | content: $breadcrumb-divider; 21 | } 22 | } 23 | 24 | // IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built 25 | // without `