├── README.md ├── components ├── flatpickr-material-design-theme │ ├── README.md │ ├── flatpickr-material-design-theme.css │ └── flatpickr-material-design-theme.gif └── material-design-range-input │ └── readme.md └── images ├── bootstrap-5columns.png ├── bootstrap-touchspin.png ├── bsreveal.gif ├── card-as-radio-material.gif ├── clear-button.gif ├── clockpicker.gif ├── contenteditable.gif ├── custom-scrollbar.gif ├── datepicker.gif ├── datetimepicker.gif ├── dropzone.png ├── form-validation.gif ├── formatted-inputs.gif ├── input-icons.png ├── ionrangeslider-material.gif ├── line-ripple.gif ├── maxlength.gif ├── range-sliders-material.gif ├── right-click.gif ├── snackbar.gif ├── summernote.png ├── switch.gif ├── test.png └── textarea-autosize.gif /README.md: -------------------------------------------------------------------------------- 1 | # Bootstrap-4-Advanced-Components 2 | 3 | The ultimate plugins to enhance Bootstrap 4. 4 | 5 | Here is the beginning of a collection of plugins and tweaks to enhance Bootstrap 4 standard components. 6 | 7 | At first I will focus on bringing the material design components to Bootstrap 4, enhancing the wonderfull [Daemonite material design 2 for Bootstrap 4](https://djibe.github.io/material/). 8 | 9 | Later, I will provide both standard Bootstrap 4 and material Bootstrap 4 versions. 10 | NB. WIP means work in progress ;-) 11 | 12 | ## Bootstrap tricks 13 | 14 | ### Bootstrap 4 - How to set 5 columns per row 15 | 16 | Learn how to add the capacity of a 5 column grid to Bootstrap 4. 17 | See my fiddle on StackOverflow [for 5 columns with Bootstrap 4](https://stackoverflow.com/questions/50734727/5-columns-per-row-in-bootstrap-4/50747942#50747942); 18 | 19 | ![Bootstrap 4 5 column grid](images/bootstrap-5columns.png?raw=true "Bootstrap 4 how to set 5 columns per row") 20 | 21 | ## DROPPED Alerts and notifications 22 | 23 | BS 4.3+ have built-in toasts components. See [material design Toast/snackbar demo](https://djibe.github.io/material/docs/4.5/material/snackbars/). 24 | 25 | ### Archived 26 | 27 | Bootstrap Notify plugin by mouse0270 to add snackbar and toasts notifications to Bootstrap < 4.3. 28 | [See the Bootstrap 4 demo](https://jsfiddle.net/djibe89/5hw6ktkk/). 29 | 30 | ![Toasts and snackbars](images/snackbar.gif?raw=true "mouse0270 Bootstrap Notify plugin with material design") 31 | 32 | ## Badges 33 | 34 | All you need is [available in Material UI 2](https://djibe.github.io/material/docs/4.5/material/badges/). 35 | 36 | ## Collapse 37 | 38 | All you need is [available in Material UI 2](https://djibe.github.io/material/docs/4.5/components/collapse/). 39 | 40 | ## Forms 41 | 42 | These components try to bring material components to Bootstrap 4 : [Google material design sepcs for Text fields](https://material.io/guidelines/components/text-fields.html). 43 | 44 | ### Text fields and inputs - input spinners 45 | 46 | Bootstrap Touchspin adds useful input spinners to your form fields. [Bootstrap 4 demo here](https://jsfiddle.net/djibe89/q25m35ot/). 47 | 48 | ![Input spinners](images/bootstrap-touchspin.png?raw=true "Bootstrap Touchspin for Bootstrap 4.1") 49 | 50 | ### Text fields - add icons to input or placeholder 51 | 52 | 7 ways to add an incon to an input in material design, before it as an input-group or within it, using CSS or hacking the placeholder. Enjoy my [Bootstrap 4 demo here](https://jsfiddle.net/djibe89/tyh21Lxe/). 53 | 54 | ![Icons for inputs](images/input-icons.png?raw=true "7 ways to add an icon to a Bootstrap 4 input by djibe") 55 | 56 | ### Text fields - Clear button 57 | 58 | The Clear button for input fields in Bootstrap 4 demo is available here. 59 | 60 | ![Clear button for inputs](images/clear-button.gif?raw=true "Clear button by djibe") 61 | 62 | ### Text fields - Multi-line fields, Textarea autosize 63 | 64 | Multi-line fields is brought to you in Bootstrap 4 through the use of textarea autosize plugin, see the Bootstrap 4 demo here. 65 | 66 | ![Textarea autosize screen](images/textarea-autosize.gif?raw=true "Textarea autosize plugin adapted by Maya Ma") 67 | 68 | ### Text fields - Character or word counter 69 | 70 | Character counter is brought to you in Bootstrap 4 through the use of maxlength plugin, see the Bootstrap 4 demo here. 71 | 72 | ![Character counter screen](images/maxlength.gif?raw=true "Maxlength plugin adapted by djibe") 73 | 74 | ### Text fields - label color on focus and line ripple effect 75 | 76 | Daemonite material UI 2 has all you need for your forms. 77 | 78 | See the Bootstrap 4 demo here. 79 | 80 | ![Material line ripple on inputs](images/line-ripple.gif?raw=true "Line ripple on ibputs by djibe") 81 | 82 | ### Text fields - Password redaction 83 | 84 | Here is my plugin to show/reveal the password with a toggle icon on a password input field, see the Bootstrap 4 demo here 85 | 86 | ![Material reveal password](images/bsreveal.gif?raw=true "Reveal password by djibe") 87 | 88 | ### Text fields - text field error, form validation 89 | 90 | I chose Parsley jQuery plugin to introduce form validation in Bootstrap 4, see the Bootstrap 4 demo here. 91 | 92 | ![Parsley screen](images/form-validation.gif?raw=true "Parsley plugin adapted to Bootstrap 4 and material design by djibe") 93 | 94 | ### Text fields - touch spin, input spinner 95 | 96 | I chose bootstrapTouchSpin plugin to use spinners in Bootstrap 4, here is the concept but the plugin is not yet Bootstrap 4 compatible, see the Bootstrap 4 demo here. 97 | 98 | ### Text fields - Formatted inputs 99 | 100 | I chose inputMask plugin to enhance inputs masking, see the Bootstrap 4 demo here 101 | 102 | ![Input mask screen](images/formatted-inputs.gif?raw=true "Input masks plugin adapted by djibe") 103 | 104 | ### Switches 105 | 106 | Bootstrap 4 has the [switches you need](https://djibe.github.io/material/docs/4.5/components/forms/#switches). 107 | 108 | For extra switches: 109 | 110 | I chose Bootstrap switch plugin to transform BS checkboxes and radio buttons into switches, see the demo of switches for Bootstrap 4. 111 | 112 | ![Switches for checkboxes and radios](images/switch.gif?raw=true "Bootstrap switches plugin") 113 | 114 | ### Radio buttons alternative : use cards as radio buttons 115 | 116 | I coded a demo to apply a card styling to radio buttons. 117 | Play with my [djibe material cards as radio buttons demo ](https://jsfiddle.net/djibe89/g5nz7kmo/64/). 118 | 119 | ![djibe cards as radio buttons](images/card-as-radio-material.gif?raw=true "Radio buttons restyled for card-like sleection") 120 | 121 | ### Inline editing with contenteditable 122 | 123 | I styled the HTML5 contenteditable aspect for a material look of this HTML5 standard component. See the demo for Bootstrap 4 inline editing. 124 | 125 | ![Inline editing](images/contenteditable.gif?raw=true "Inline editing") 126 | 127 | ### Summernote text editor 128 | 129 | I styled Summernote plugin to give it a material look. See the demo and tutorial for Bootstrap 4 Summernote text editor. 130 | 131 | ![Summernote material design](images/summernote.png?raw=true "Summernote for Bootstrap 4 with material design") 132 | 133 | ### Other to be delivered 134 | 135 | * Search panel 136 | * Edit-inline (X-editable) 137 | 138 | *** 139 | 140 | ## Pickers 141 | 142 | ### Time picker 143 | 144 | I forked Clockpicker plugin by Weareoutman for effective time picking in Bootstrap 4 with updated styles, see the Clockpicker for Bootstrap 4 demo. 145 | 146 | ![Clockpicker screen](images/clockpicker.gif?raw=true "Clockpicker plugin adapted by djibe") 147 | 148 | ### Date picker 149 | 150 | Use the built-in datepicker from Daemonite material UI for effective date picking, see the Daemonite documentation here 151 | 152 | ![Datepicker screen](images/datepicker.gif?raw=true "Datepicker plugin by Daemonite material UI") 153 | 154 | ### DateTime picker 155 | 156 | I updated bootstrap Material Datetimepicker by t00rk plugin for effective date and time picking, see the fork here 157 | 158 | See the Bootstrap 4 demo here 159 | 160 | See the Bootstrap 4 demo with material UI here : here 161 | 162 | ![Datetimepicker screen](images/datetimepicker.gif?raw=true "DateTimepicker plugin by t00rk enhenced by djibe") 163 | 164 | ### Drag and drop files for upload 165 | 166 | I chose DropzoneJS plugin to enhence file upload, then I gave it a mterial look. See the Bootstrap 4 tutorial and demo here. 167 | 168 | ![DropzoneJS in material UI](images/dropzone.png?raw=true "DropzoneJS") 169 | 170 | *** 171 | 172 | ## Scrollbar - smooth and design 173 | 174 | I chose m-custom-scrollbar by malihu plugin for a cross-browser custom scrollbar with smooth scroll. 175 | 176 | See the Bootstrap 4 demo here. 177 | 178 | ![Custom scrollbar screen](images/custom-scrollbar.gif?raw=true "malihu Custom scrollbar plugin") 179 | 180 | ## Sliders - input type="range" and alternatives 181 | 182 | ### HTML5 input range cross-browser styling 183 | 184 | Material design look for HTML5 range sliders. Pure CSS code. Works with Chrome, Safari, Firefox and Edge. 185 | Compatible with Bootstrap 4. 186 | Play with [pure CSS range sliders demo by djibe](https://jsfiddle.net/djibe89/g5nz7kmo). 187 | 188 | ![Material design HTML5 range sliders](images/range-sliders-material.gif?raw=true "djibe material design range sliders") 189 | 190 | ### Material design theme for ionRangeSlider plugin 191 | 192 | My material design theme for [ionRangeSlider plugin](https://github.com/IonDen/ion.rangeSlider). jQuery dependency. 193 | Play with [material theme demo for ionRangeSlider](https://djibe.github.io/material/docs/4.5/plugins/sliders-ionrangeslider/). 194 | 195 | ## Right click menu 196 | 197 | Want a context menu for your site ? 198 | 199 | See the tutorial and demo for a context menu - right click menu using Bootstrap 4 200 | 201 | ![Bootstrap 4 Right click menu](images/right-click.gif?raw=true "A right click menu for Bootstrap 4") 202 | 203 | ## Other utilities for Bootstrap 4 204 | 205 | WIP, to be delivered : 206 | 207 | - Sticky content 208 | -------------------------------------------------------------------------------- /components/flatpickr-material-design-theme/README.md: -------------------------------------------------------------------------------- 1 | # Material design theme for flatpickr v4 2 | 3 | [Flatpickr](https://github.com/flatpickr/flatpickr) is an awesome inline date picker. 4 | 5 | I did a material skin to reproduce latest [Material design studies](https://material.io/components/pickers). 6 | 7 | It fits perfectly into my [Material UI theme for Bootstrap 4](https://djibe.github.io/material/). 8 | 9 | ## Demo 10 | 11 | ![Material design theme for Flatpickr by djibe](flatpickr-material-design-theme.gif) 12 | 13 | You can play with my [Flatpickr fiddle](https://jsfiddle.net/djibe89/xn153qdg/) here. 14 | 15 | ## How to use 16 | 17 | Download CSS file from this repository. 18 | 19 | Add my flatpickr theme in your `head`. 20 | 21 | ```html 22 | 23 | ``` 24 | 25 | Add flatpickr JavaScript before your `body` closing tag. 26 | 27 | ```html 28 | 29 | ``` 30 | 31 | Declare a simple input. 32 | 33 | ```html 34 |
35 | 36 |
37 | ``` 38 | 39 | Initialize your picker. 40 | 41 | ```javascript 42 | $("#inline").flatpickr({ 43 | inline: false, 44 | mode: "single" 45 | }); 46 | ``` 47 | -------------------------------------------------------------------------------- /components/flatpickr-material-design-theme/flatpickr-material-design-theme.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Flatpickr Material Design theme 0.3.0 by djibe 3 | */ 4 | 5 | .flatpickr-calendar { 6 | -webkit-animation: none; 7 | animation: none; 8 | background: #ffffff; 9 | border-radius: 4px; 10 | box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); 11 | box-sizing: border-box; 12 | direction: ltr; 13 | display: none; 14 | font-family: Roboto, -apple-system, BlinkMacSystemFont, Arial, sans-serif; 15 | opacity: 0; 16 | position: absolute; 17 | touch-action: manipulation; 18 | visibility: hidden; 19 | width: 307.875px; 20 | } 21 | 22 | .flatpickr-calendar.open, 23 | .flatpickr-calendar.inline { 24 | max-height: 640px; 25 | opacity: 1; 26 | visibility: visible; 27 | } 28 | 29 | .flatpickr-calendar.open { 30 | display: inline-block; 31 | z-index: 99999; 32 | } 33 | 34 | .flatpickr-calendar.animate.open { 35 | -webkit-animation: fpFadeInDown 250ms cubic-bezier(0, 0, 0.2, 1); 36 | animation: fpFadeInDown 250ms cubic-bezier(0, 0, 0.2, 1); 37 | } 38 | 39 | .flatpickr-calendar.inline { 40 | display: block; 41 | position: relative; 42 | top: 4px; 43 | } 44 | 45 | .flatpickr-calendar.static { 46 | position: absolute; 47 | top: calc(100% + 2px); 48 | } 49 | 50 | .flatpickr-calendar.static.open { 51 | display: block; 52 | z-index: 999; 53 | } 54 | 55 | .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) { 56 | box-shadow: none !important; 57 | } 58 | 59 | .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) { 60 | box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6; 61 | } 62 | 63 | .flatpickr-calendar .hasWeeks .dayContainer, 64 | .flatpickr-calendar .hasTime .dayContainer { 65 | border-bottom: 0; 66 | border-bottom-right-radius: 0; 67 | border-bottom-left-radius: 0; 68 | } 69 | 70 | .flatpickr-calendar .hasWeeks .dayContainer { 71 | border-left: 0; 72 | } 73 | 74 | .flatpickr-calendar.showTimeInput.hasTime .flatpickr-time { 75 | border-top: 1px solid #d7d7d7; 76 | height: 40px; 77 | } 78 | 79 | .flatpickr-calendar.noCalendar.hasTime .flatpickr-time { 80 | height: auto; 81 | } 82 | 83 | .flatpickr-calendar:focus { 84 | outline: 0; 85 | } 86 | 87 | .flatpickr-wrapper { 88 | display: inline-block; 89 | position: relative; 90 | } 91 | 92 | .flatpickr-months { 93 | -webkit-box-align: center; 94 | align-items: center; 95 | display: -webkit-box; 96 | display: flex; 97 | padding: 16px 0 12px; 98 | } 99 | 100 | .flatpickr-months .flatpickr-month { 101 | background: transparent; 102 | color: rgba(0, 0, 0, 0.9); 103 | fill: rgba(0, 0, 0, 0.9); 104 | position: relative; 105 | -webkit-user-select: none; 106 | -moz-user-select: none; 107 | -ms-user-select: none; 108 | user-select: none; 109 | overflow: hidden; 110 | -webkit-box-flex: 1; 111 | flex: 1; 112 | margin-left: 32px; 113 | } 114 | 115 | .flatpickr-months .flatpickr-prev-month, 116 | .flatpickr-months .flatpickr-next-month { 117 | border-radius: 12px; 118 | text-decoration: none; 119 | cursor: pointer; 120 | position: relative; 121 | z-index: 3; 122 | height: 24px; 123 | width: 24px; 124 | display: -webkit-box; 125 | display: flex; 126 | -webkit-box-align: center; 127 | align-items: center; 128 | -webkit-box-pack: center; 129 | justify-content: center; 130 | } 131 | 132 | .flatpickr-months .flatpickr-prev-month { 133 | -webkit-box-ordinal-group: 2; 134 | order: 1; 135 | } 136 | 137 | .flatpickr-months .flatpickr-next-month { 138 | margin: 0 16px 0 24px; 139 | -webkit-box-ordinal-group: 3; 140 | order: 2; 141 | } 142 | 143 | .flatpickr-months .flatpickr-prev-month:hover, 144 | .flatpickr-months .flatpickr-next-month:hover { 145 | background-color: #f5f5f5; 146 | } 147 | 148 | .flatpickr-months .flatpickr-prev-month:active, 149 | .flatpickr-months .flatpickr-next-month:active { 150 | background-color: #d7d7d7; 151 | } 152 | 153 | .flatpickr-months .flatpickr-prev-month.flatpickr-disabled, 154 | .flatpickr-months .flatpickr-next-month.flatpickr-disabled { 155 | display: none; 156 | } 157 | 158 | .flatpickr-months .flatpickr-prev-month i, 159 | .flatpickr-months .flatpickr-next-month i { 160 | position: relative; 161 | } 162 | 163 | .flatpickr-months .flatpickr-prev-month svg, 164 | .flatpickr-months .flatpickr-next-month svg { 165 | height: 14px; 166 | width: 14px; 167 | } 168 | 169 | .flatpickr-months .flatpickr-prev-month svg path, 170 | .flatpickr-months .flatpickr-next-month svg path { 171 | fill: #757575; 172 | stroke: #757575; 173 | stroke-width: 1px; 174 | } 175 | 176 | .numInputWrapper { 177 | height: auto; 178 | position: relative; 179 | } 180 | 181 | .numInputWrapper input, 182 | .numInputWrapper span { 183 | display: inline-block; 184 | } 185 | 186 | .numInputWrapper input { 187 | width: 100%; 188 | } 189 | 190 | .numInputWrapper input::-ms-clear { 191 | display: none; 192 | } 193 | 194 | .numInputWrapper input::-webkit-outer-spin-button, 195 | .numInputWrapper input::-webkit-inner-spin-button { 196 | -webkit-appearance: none; 197 | margin: 0; 198 | } 199 | 200 | .numInputWrapper span { 201 | position: absolute; 202 | right: 0; 203 | width: 14px; 204 | padding: 0 4px 0 2px; 205 | height: 50%; 206 | line-height: 50%; 207 | opacity: 0; 208 | cursor: pointer; 209 | border: 1px solid rgba(57, 57, 57, 0.15); 210 | box-sizing: border-box; 211 | } 212 | 213 | .numInputWrapper span:hover { 214 | background: rgba(0, 0, 0, 0.1); 215 | } 216 | 217 | .numInputWrapper span:active { 218 | background: rgba(0, 0, 0, 0.2); 219 | } 220 | 221 | .numInputWrapper span::after { 222 | content: ''; 223 | display: block; 224 | position: absolute; 225 | } 226 | 227 | .numInputWrapper span.arrowUp { 228 | border-bottom: 0; 229 | top: 0; 230 | } 231 | 232 | .numInputWrapper span.arrowUp::after { 233 | border-left: 4px solid transparent; 234 | border-right: 4px solid transparent; 235 | border-bottom: 4px solid #757575; 236 | top: 26%; 237 | } 238 | 239 | .numInputWrapper span.arrowDown { 240 | top: 50%; 241 | } 242 | 243 | .numInputWrapper span.arrowDown::after { 244 | border-left: 4px solid transparent; 245 | border-right: 4px solid transparent; 246 | border-top: 4px solid #757575; 247 | top: 40%; 248 | } 249 | 250 | .numInputWrapper span svg { 251 | height: auto; 252 | width: inherit; 253 | } 254 | 255 | .numInputWrapper span svg path { 256 | fill: #757575; 257 | } 258 | 259 | .flatpickr-current-month { 260 | color: inherit; 261 | height: 24px; 262 | display: inline-block; 263 | text-align: center; 264 | width: auto; 265 | line-height: 24px; 266 | } 267 | 268 | .flatpickr-current-month span.cur-month { 269 | font-family: inherit; 270 | font-weight: 500; 271 | color: inherit; 272 | display: inline-block; 273 | padding: 0; 274 | } 275 | 276 | .flatpickr-current-month span.cur-month:hover { 277 | background: #f5f5f5; 278 | } 279 | 280 | .flatpickr-current-month .numInputWrapper { 281 | border-radius: 12px; 282 | display: inline-block; 283 | height: 24px; 284 | width: 60px; 285 | } 286 | 287 | .numInputWrapper:hover { 288 | background: #f5f5f5; 289 | } 290 | 291 | .numInputWrapper:focus { 292 | background: #dedede; 293 | } 294 | 295 | .numInputWrapper:hover span { 296 | opacity: 1; 297 | } 298 | 299 | .flatpickr-current-month .numInputWrapper span.arrowUp::after { 300 | border-bottom-color: #757575; 301 | } 302 | 303 | .flatpickr-current-month .numInputWrapper span.arrowDown::after { 304 | border-top-color: #757575; 305 | } 306 | 307 | .flatpickr-current-month input.cur-year { 308 | background: transparent; 309 | box-sizing: border-box; 310 | color: inherit; 311 | cursor: text; 312 | padding: 0 0 0 8px; 313 | margin: 0; 314 | display: inline-block; 315 | font-size: 14px; 316 | font-family: inherit; 317 | font-weight: 500; 318 | line-height: inherit; 319 | height: auto; 320 | border: 0; 321 | border-radius: 0; 322 | vertical-align: initial; 323 | -webkit-appearance: textfield; 324 | -moz-appearance: textfield; 325 | appearance: textfield; 326 | } 327 | 328 | .flatpickr-current-month input.cur-year:focus { 329 | outline: 0; 330 | } 331 | 332 | .flatpickr-current-month input.cur-year[disabled] { 333 | background: transparent; 334 | color: #9e9e9e; 335 | pointer-events: none; 336 | } 337 | 338 | .flatpickr-current-month .flatpickr-monthDropdown-months { 339 | -webkit-appearance: none; 340 | -moz-appearance: none; 341 | appearance: none; 342 | border: none; 343 | box-sizing: border-box; 344 | cursor: pointer; 345 | font-size: 14px; 346 | font-family: inherit; 347 | font-weight: 500; 348 | height: auto; 349 | margin: -1px 0 0 -4px; 350 | outline: none; 351 | padding: 4px 28px 4px 4px; 352 | position: relative; 353 | background-image: url('data:image/svg+xml;charset=utf8,%3csvg fill="%23000000" fill-opacity="0.54" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M7 10l5 5 5-5z"/%3e%3cpath d="M0 0h24v24H0z" fill="none"/%3e%3c/svg%3e'); 354 | background-position: 100% 50%; 355 | background-repeat: no-repeat; 356 | background-size: 24px 24px; 357 | } 358 | 359 | .flatpickr-current-month .flatpickr-monthDropdown-months:focus, 360 | .flatpickr-current-month .flatpickr-monthDropdown-months:active { 361 | outline: none; 362 | } 363 | 364 | .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month { 365 | outline: none; 366 | padding: 8px 0; 367 | } 368 | 369 | .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month:hover { 370 | background-color: #f5f5f5; 371 | } 372 | 373 | .flatpickr-weekdays { 374 | background: transparent; 375 | overflow: hidden; 376 | width: 100%; 377 | display: -webkit-box; 378 | display: flex; 379 | -webkit-box-align: center; 380 | align-items: center; 381 | height: 28px; 382 | } 383 | 384 | .flatpickr-weekdays .flatpickr-weekdaycontainer { 385 | display: -webkit-box; 386 | display: flex; 387 | -webkit-box-flex: 1; 388 | flex: 1; 389 | padding: 0 16px; 390 | } 391 | 392 | .flatpickr-weekday { 393 | color: transparent; 394 | display: block; 395 | cursor: default; 396 | -webkit-box-flex: 1; 397 | flex: 1; 398 | font-size: 13px; 399 | font-weight: 500; 400 | line-height: 1; 401 | margin: 0; 402 | -webkit-user-select: none; 403 | -moz-user-select: none; 404 | -ms-user-select: none; 405 | user-select: none; 406 | 407 | -webkit-transform: translateX(15px); 408 | 409 | transform: translateX(15px); 410 | } 411 | 412 | .flatpickr-weekday::first-letter { 413 | color: #757575; 414 | } 415 | 416 | .flatpickr-weeks { 417 | padding: 1px 0 0 0; 418 | } 419 | 420 | .flatpickr-days { 421 | position: relative; 422 | overflow: hidden; 423 | display: -webkit-box; 424 | display: flex; 425 | -webkit-box-align: start; 426 | align-items: flex-start; 427 | width: 307.875px; 428 | } 429 | 430 | .flatpickr-days:focus { 431 | outline: 0; 432 | } 433 | 434 | .dayContainer { 435 | padding: 0 16px 8px; 436 | outline: 0; 437 | text-align: left; 438 | width: 307.875px; 439 | min-width: 307.875px; 440 | max-width: 307.875px; 441 | box-sizing: border-box; 442 | display: -webkit-box; 443 | display: flex; 444 | flex-wrap: wrap; 445 | justify-content: space-around; 446 | -webkit-transform: translate3d(0, 0, 0); 447 | transform: translate3d(0, 0, 0); 448 | opacity: 1; 449 | } 450 | 451 | .dayContainer + .dayContainer { 452 | box-shadow: -1px 0 0 #e6e6e6; 453 | } 454 | 455 | .flatpickr-day { 456 | -webkit-box-align: center; 457 | align-items: center; 458 | border-radius: 150px; 459 | box-sizing: border-box; 460 | color: #212121; 461 | cursor: pointer; 462 | display: -webkit-box; 463 | display: flex; 464 | /*flex-basis: 14.2857143%;*/ 465 | font-weight: 400; 466 | font-size: 13px; 467 | -webkit-box-pack: center; 468 | justify-content: center; 469 | height: 39px; 470 | max-width: 39px; 471 | outline: 0; 472 | position: relative; 473 | -webkit-user-select: none; 474 | -moz-user-select: none; 475 | -ms-user-select: none; 476 | user-select: none; 477 | width: 14.2857143%; 478 | } 479 | 480 | .flatpickr-day:hover, 481 | .flatpickr-day.prevMonthDay:hover, 482 | .flatpickr-day.nextMonthDay:hover { 483 | background: #f7f2fe; 484 | color: inherit; 485 | cursor: pointer; 486 | outline: 0; 487 | z-index: 2; 488 | } 489 | 490 | .flatpickr-day.today { 491 | border: 1px solid #5a5a5a; 492 | } 493 | 494 | .flatpickr-day.prevMonthDay, 495 | .flatpickr-day.nextMonthDay { 496 | color: #757575; 497 | } 498 | 499 | .flatpickr-day.inRange, 500 | .flatpickr-day.inRange:hover { 501 | border-radius: 0; 502 | background-color: #e5d7fb; 503 | box-shadow: -5px 0 0 #e5d7fb, 5px 0 0 #e5d7fb; 504 | } 505 | 506 | .flatpickr-day:nth-of-type(7n + 1).inRange { 507 | border-radius: 50% 0 0 50%; 508 | } 509 | 510 | .flatpickr-day:nth-of-type(7n).inRange { 511 | border-radius: 0 50% 50% 0; 512 | } 513 | 514 | .flatpickr-day.startRange, 515 | .flatpickr-day.startRange:hover { 516 | box-shadow: none; 517 | } 518 | 519 | .flatpickr-day.startRange + .flatpickr-day.inRange { 520 | box-shadow: -10px 0 0 #e5d7fb, 5px 0 0 #e5d7fb; 521 | } 522 | 523 | .flatpickr-day.endRange, 524 | .flatpickr-day.endRange:hover { 525 | box-shadow: -10px 0 0 #e5d7fb; 526 | } 527 | 528 | .flatpickr-day:nth-of-type(7n).startRange { 529 | box-shadow: none !important; 530 | } 531 | 532 | .flatpickr-day:nth-of-type(7n+1).endRange { 533 | box-shadow: none !important; 534 | } 535 | 536 | .flatpickr-day.selected, 537 | .flatpickr-day.selected.inRange { 538 | background: #6200ee; 539 | border-radius: 50%; 540 | color: #ffffff; 541 | z-index: 3; 542 | } 543 | 544 | .flatpickr-day.selected.startRange + .flatpickr-day.selected.endRange { 545 | box-shadow: none; 546 | } 547 | 548 | .flatpickr-day.selected.startRange { 549 | z-index: 4; 550 | } 551 | 552 | 553 | .flatpickr-day.flatpickr-disabled, 554 | .flatpickr-day.flatpickr-disabled:hover, 555 | .flatpickr-day.notAllowed, 556 | .flatpickr-day.notAllowed.prevMonthDay, 557 | .flatpickr-day.notAllowed.nextMonthDay { 558 | background: transparent; 559 | color: #b3b3b3; 560 | cursor: default; 561 | } 562 | 563 | .flatpickr-day.week.selected { 564 | border-radius: 0; 565 | box-shadow: -5px 0 0 #e5d7fb, 5px 0 0 #e5d7fb; 566 | } 567 | 568 | .flatpickr-day.hidden { 569 | visibility: hidden; 570 | } 571 | 572 | .rangeMode .flatpickr-day { 573 | margin-top: 1px; 574 | } 575 | 576 | .flatpickr-weekwrapper { 577 | float: left; 578 | } 579 | 580 | .flatpickr-weekwrapper .flatpickr-weeks { 581 | padding: 0 12px; 582 | box-shadow: 1px 0 0 #e6e6e6; 583 | } 584 | 585 | .flatpickr-weekwrapper .flatpickr-weekday { 586 | float: none; 587 | width: 100%; 588 | line-height: 28px; 589 | } 590 | 591 | .flatpickr-weekwrapper .flatpickr-day, 592 | .flatpickr-weekwrapper .flatpickr-day:hover { 593 | width: 100%; 594 | max-width: none; 595 | color: #b3b3b3; 596 | background: transparent; 597 | cursor: default; 598 | } 599 | 600 | .flatpickr-innerContainer { 601 | display: -webkit-box; 602 | display: flex; 603 | box-sizing: border-box; 604 | overflow: hidden; 605 | } 606 | 607 | .flatpickr-rContainer { 608 | box-sizing: border-box; 609 | display: inline-block; 610 | padding: 0; 611 | } 612 | 613 | .flatpickr-time { 614 | text-align: center; 615 | outline: 0; 616 | height: 0; 617 | line-height: 40px; 618 | max-height: 40px; 619 | box-sizing: border-box; 620 | overflow: hidden; 621 | display: -webkit-box; 622 | display: flex; 623 | } 624 | 625 | .flatpickr-time:after { 626 | content: ''; 627 | display: table; 628 | clear: both; 629 | } 630 | 631 | .flatpickr-time .numInputWrapper { 632 | -webkit-box-flex: 1; 633 | flex: 1; 634 | width: 40%; 635 | height: 40px; 636 | float: left; 637 | } 638 | 639 | .flatpickr-time .numInputWrapper .arrowUp:after { 640 | border-bottom-color: #757575; 641 | } 642 | 643 | .flatpickr-time .numInputWrapper .arrowDown:after { 644 | border-top-color: #757575; 645 | } 646 | 647 | .flatpickr-time.hasSeconds .numInputWrapper { 648 | width: 26%; 649 | } 650 | 651 | .flatpickr-time.time24hr .numInputWrapper { 652 | width: 49%; 653 | } 654 | 655 | .flatpickr-time input { 656 | background: transparent; 657 | border: 0; 658 | color: #212121; 659 | text-align: center; 660 | margin: 0; 661 | padding: 0; 662 | height: inherit; 663 | line-height: inherit; 664 | position: relative; 665 | box-sizing: border-box; 666 | -webkit-appearance: textfield; 667 | -moz-appearance: textfield; 668 | appearance: textfield; 669 | font-weight: 400; 670 | font-size: 14px; 671 | } 672 | 673 | .flatpickr-time input.flatpickr-hour { 674 | font-weight: 500; 675 | } 676 | 677 | .flatpickr-time .flatpickr-time-separator, 678 | .flatpickr-time .flatpickr-am-pm { 679 | height: inherit; 680 | float: left; 681 | line-height: inherit; 682 | color: #393939; 683 | width: 2%; 684 | -webkit-user-select: none; 685 | -moz-user-select: none; 686 | -ms-user-select: none; 687 | user-select: none; 688 | align-self: center; 689 | } 690 | 691 | .flatpickr-time .flatpickr-am-pm { 692 | cursor: pointer; 693 | font-size: 14px; 694 | width: 18%; 695 | } 696 | 697 | .flatpickr-time input:hover, 698 | .flatpickr-time .flatpickr-am-pm:hover { 699 | background: #f5f5f5; 700 | } 701 | 702 | .flatpickr-time input:focus, 703 | .flatpickr-time .flatpickr-am-pm:focus { 704 | background: #dedede; 705 | outline: 0; 706 | } 707 | 708 | .flatpickr-input[readonly] { 709 | cursor: pointer; 710 | } 711 | 712 | @-webkit-keyframes fpFadeInDown { 713 | from { 714 | opacity: 0; 715 | -webkit-transform: translate3d(0, -20px, 0); 716 | transform: translate3d(0, -20px, 0); 717 | } 718 | to { 719 | opacity: 1; 720 | -webkit-transform: translate3d(0, 0, 0); 721 | transform: translate3d(0, 0, 0); 722 | } 723 | } 724 | 725 | @keyframes fpFadeInDown { 726 | from { 727 | opacity: 0; 728 | -webkit-transform: translate3d(0, -20px, 0); 729 | transform: translate3d(0, -20px, 0); 730 | } 731 | to { 732 | opacity: 1; 733 | -webkit-transform: translate3d(0, 0, 0); 734 | transform: translate3d(0, 0, 0); 735 | } 736 | } 737 | -------------------------------------------------------------------------------- /components/flatpickr-material-design-theme/flatpickr-material-design-theme.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djibe/Bootstrap-4-Advanced-Components/19e65caaedf2f206e098c8e8a51dc4e156e37669/components/flatpickr-material-design-theme/flatpickr-material-design-theme.gif -------------------------------------------------------------------------------- /components/material-design-range-input/readme.md: -------------------------------------------------------------------------------- 1 | Readme of djibe Material design sliders for the web 2 | TODO 3 | -------------------------------------------------------------------------------- /images/bootstrap-5columns.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djibe/Bootstrap-4-Advanced-Components/19e65caaedf2f206e098c8e8a51dc4e156e37669/images/bootstrap-5columns.png -------------------------------------------------------------------------------- /images/bootstrap-touchspin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djibe/Bootstrap-4-Advanced-Components/19e65caaedf2f206e098c8e8a51dc4e156e37669/images/bootstrap-touchspin.png -------------------------------------------------------------------------------- /images/bsreveal.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djibe/Bootstrap-4-Advanced-Components/19e65caaedf2f206e098c8e8a51dc4e156e37669/images/bsreveal.gif -------------------------------------------------------------------------------- /images/card-as-radio-material.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djibe/Bootstrap-4-Advanced-Components/19e65caaedf2f206e098c8e8a51dc4e156e37669/images/card-as-radio-material.gif -------------------------------------------------------------------------------- /images/clear-button.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djibe/Bootstrap-4-Advanced-Components/19e65caaedf2f206e098c8e8a51dc4e156e37669/images/clear-button.gif -------------------------------------------------------------------------------- /images/clockpicker.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djibe/Bootstrap-4-Advanced-Components/19e65caaedf2f206e098c8e8a51dc4e156e37669/images/clockpicker.gif -------------------------------------------------------------------------------- /images/contenteditable.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djibe/Bootstrap-4-Advanced-Components/19e65caaedf2f206e098c8e8a51dc4e156e37669/images/contenteditable.gif -------------------------------------------------------------------------------- /images/custom-scrollbar.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djibe/Bootstrap-4-Advanced-Components/19e65caaedf2f206e098c8e8a51dc4e156e37669/images/custom-scrollbar.gif -------------------------------------------------------------------------------- /images/datepicker.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djibe/Bootstrap-4-Advanced-Components/19e65caaedf2f206e098c8e8a51dc4e156e37669/images/datepicker.gif -------------------------------------------------------------------------------- /images/datetimepicker.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djibe/Bootstrap-4-Advanced-Components/19e65caaedf2f206e098c8e8a51dc4e156e37669/images/datetimepicker.gif -------------------------------------------------------------------------------- /images/dropzone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djibe/Bootstrap-4-Advanced-Components/19e65caaedf2f206e098c8e8a51dc4e156e37669/images/dropzone.png -------------------------------------------------------------------------------- /images/form-validation.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djibe/Bootstrap-4-Advanced-Components/19e65caaedf2f206e098c8e8a51dc4e156e37669/images/form-validation.gif -------------------------------------------------------------------------------- /images/formatted-inputs.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djibe/Bootstrap-4-Advanced-Components/19e65caaedf2f206e098c8e8a51dc4e156e37669/images/formatted-inputs.gif -------------------------------------------------------------------------------- /images/input-icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djibe/Bootstrap-4-Advanced-Components/19e65caaedf2f206e098c8e8a51dc4e156e37669/images/input-icons.png -------------------------------------------------------------------------------- /images/ionrangeslider-material.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djibe/Bootstrap-4-Advanced-Components/19e65caaedf2f206e098c8e8a51dc4e156e37669/images/ionrangeslider-material.gif -------------------------------------------------------------------------------- /images/line-ripple.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djibe/Bootstrap-4-Advanced-Components/19e65caaedf2f206e098c8e8a51dc4e156e37669/images/line-ripple.gif -------------------------------------------------------------------------------- /images/maxlength.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djibe/Bootstrap-4-Advanced-Components/19e65caaedf2f206e098c8e8a51dc4e156e37669/images/maxlength.gif -------------------------------------------------------------------------------- /images/range-sliders-material.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djibe/Bootstrap-4-Advanced-Components/19e65caaedf2f206e098c8e8a51dc4e156e37669/images/range-sliders-material.gif -------------------------------------------------------------------------------- /images/right-click.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djibe/Bootstrap-4-Advanced-Components/19e65caaedf2f206e098c8e8a51dc4e156e37669/images/right-click.gif -------------------------------------------------------------------------------- /images/snackbar.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djibe/Bootstrap-4-Advanced-Components/19e65caaedf2f206e098c8e8a51dc4e156e37669/images/snackbar.gif -------------------------------------------------------------------------------- /images/summernote.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djibe/Bootstrap-4-Advanced-Components/19e65caaedf2f206e098c8e8a51dc4e156e37669/images/summernote.png -------------------------------------------------------------------------------- /images/switch.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djibe/Bootstrap-4-Advanced-Components/19e65caaedf2f206e098c8e8a51dc4e156e37669/images/switch.gif -------------------------------------------------------------------------------- /images/test.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djibe/Bootstrap-4-Advanced-Components/19e65caaedf2f206e098c8e8a51dc4e156e37669/images/test.png -------------------------------------------------------------------------------- /images/textarea-autosize.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/djibe/Bootstrap-4-Advanced-Components/19e65caaedf2f206e098c8e8a51dc4e156e37669/images/textarea-autosize.gif --------------------------------------------------------------------------------