j1-template 2020.0.16 → 2020.0.21
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/_includes/themes/j1/blocks/footer/boxes/about_box.proc +2 -2
- data/_includes/themes/j1/blocks/footer/boxes/links_box.proc +4 -4
- data/_includes/themes/j1/blocks/footer/boxes/news_box.proc +2 -2
- data/_includes/themes/j1/blocks/footer/generator.html +1 -1
- data/_includes/themes/j1/layouts/content_generator_blog_archive.html +19 -16
- data/_includes/themes/j1/layouts/content_generator_collection.html +2 -2
- data/_includes/themes/j1/layouts/content_generator_page.html +8 -56
- data/_includes/themes/j1/layouts/content_generator_post.html +5 -3
- data/_includes/themes/j1/procedures/global/attributes_loader.proc +117 -0
- data/_includes/themes/j1/procedures/global/create_bs_button.proc +10 -10
- data/_includes/themes/j1/procedures/global/create_word_cloud.proc +14 -12
- data/_includes/themes/j1/procedures/global/get_documents_dir.proc +1 -1
- data/_includes/themes/j1/procedures/global/set_env_entry_document.proc +3 -3
- data/_includes/themes/j1/procedures/posts/collate_timeline.proc +37 -38
- data/_layouts/blog_archive.html +4 -3
- data/_layouts/collection.html +1 -1
- data/_layouts/home.html +1 -1
- data/_layouts/page.html +2 -2
- data/_layouts/post.html +3 -3
- data/apps/public/cc/cc.yml +0 -2
- data/assets/data/authclient.html +15 -15
- data/assets/data/banner.html +11 -11
- data/assets/data/carousel.json +1 -1
- data/assets/data/cookiebar.html +8 -8
- data/assets/data/footer.html +1 -1
- data/assets/data/galleries.json +1 -1
- data/assets/data/gallery_customizer.html +4 -4
- data/assets/data/mdi_icons.json +1 -1
- data/assets/data/menu.html +7 -7
- data/assets/data/mmenu.html +5 -5
- data/assets/data/mmenu_sidebar.html +2 -2
- data/assets/data/mmenu_toc.html +2 -2
- data/assets/data/panel.html +115 -95
- data/assets/data/quicklinks.html +2 -2
- data/assets/data/search.json +1 -1
- data/assets/data/ssm.html +2 -2
- data/assets/data/themes.json +3 -1
- data/assets/data/twa_v1.json +1 -1
- data/assets/themes/j1/adapter/js/algolia.js +1 -1
- data/assets/themes/j1/adapter/js/attic.js +1 -1
- data/assets/themes/j1/adapter/js/back2top.js +231 -0
- data/assets/themes/j1/adapter/js/{mdb.js → bmd.js} +11 -11
- data/assets/themes/j1/adapter/js/carousel.js +135 -134
- data/assets/themes/j1/adapter/js/clipboard.js +2 -1
- data/assets/themes/j1/adapter/js/cookiebar.js +2 -1
- data/assets/themes/j1/adapter/js/framer.js +1 -5
- data/assets/themes/j1/adapter/js/gallery_customizer.js +2 -1
- data/assets/themes/j1/adapter/js/j1.js +36 -10
- data/assets/themes/j1/adapter/js/jf_gallery.js +1 -1
- data/assets/themes/j1/adapter/js/lightbox.js +1 -1
- data/assets/themes/j1/adapter/js/logger.js +2 -1
- data/assets/themes/j1/adapter/js/mmenu.js +10 -8
- data/assets/themes/j1/adapter/js/navigator.js +101 -31
- data/assets/themes/j1/adapter/js/searcher.js +1 -1
- data/assets/themes/j1/adapter/js/ssm.js +30 -29
- data/assets/themes/j1/adapter/js/themer.js +7 -13
- data/assets/themes/j1/adapter/js/toccer.js +37 -7
- data/assets/themes/j1/core/css/animate.css +17 -0
- data/assets/themes/j1/core/css/bootstrap.css +54 -48
- data/assets/themes/j1/core/css/bootstrap.min.css +3 -3
- data/assets/themes/j1/core/css/{fontawesome.css → icons-fontawesome.css} +31 -12
- data/assets/themes/j1/core/css/{fontawesome.min.css → icons-fontawesome.min.css} +0 -0
- data/assets/themes/j1/core/css/{iconify-icons.css → icons-iconify.css} +51 -38
- data/assets/themes/j1/core/css/{iconify-icons.min.css → icons-iconify.min.css} +1 -1
- data/assets/themes/j1/core/css/{material-design-icons.css → icons-materialdesign.css} +326 -244
- data/assets/themes/j1/core/css/icons-materialdesign.min.css +1 -0
- data/assets/themes/j1/core/css/{twemoji.css → icons-twemoji.css} +61 -51
- data/assets/themes/j1/core/css/{twemoji.min.css → icons-twemoji.min.css} +0 -0
- data/assets/themes/j1/core/css/{theme_extensions.css → theme-extensions.css} +1754 -1429
- data/assets/themes/j1/core/css/theme-extensions.min.css +1 -0
- data/assets/themes/j1/core/css/uno-dark.css +8109 -0
- data/assets/themes/j1/core/css/uno-dark.min.css +6 -0
- data/assets/themes/j1/core/css/uno.css +15337 -3046
- data/assets/themes/j1/core/css/uno.min.css +8 -1
- data/assets/themes/j1/core/css/vendor.css +86 -13430
- data/assets/themes/j1/core/css/vendor.min.css +1 -7
- data/assets/themes/j1/core/js/template.js +6 -6
- data/assets/themes/j1/core/js/template.js.map +1 -1
- data/assets/themes/j1/core/js/template.min.js +1 -1
- data/assets/themes/j1/modules/backstretch/js/backstretch.js +12 -13
- data/assets/themes/j1/modules/backstretch/js/backstretch.min.js +12 -13
- data/assets/themes/j1/modules/bsThemeSwitcher/js/switcher.js +43 -34
- data/assets/themes/j1/modules/bsThemeSwitcher/js/switcher.min.js +11 -12
- data/assets/themes/j1/modules/carousel/css/carousel.css +8 -9
- data/assets/themes/j1/modules/carousel/css/carousel.min.css +7 -9
- data/assets/themes/j1/modules/carousel/css/carousel_transitions.css +7 -8
- data/assets/themes/j1/modules/carousel/css/carousel_transitions.min.css +7 -9
- data/assets/themes/j1/modules/carousel/css/theme/uno.css +7 -8
- data/assets/themes/j1/modules/carousel/css/theme/uno.min.css +8 -9
- data/assets/themes/j1/modules/clipboard/css/theme/uno.css +7 -7
- data/assets/themes/j1/modules/clipboard/css/theme/uno.min.css +8 -45
- data/assets/themes/j1/modules/iframeResizer/examples/frame.absolute.html +2 -5
- data/assets/themes/j1/modules/iframeResizer/examples/frame.content.html +17 -44
- data/assets/themes/j1/modules/iframeResizer/examples/frame.hover.html +2 -5
- data/assets/themes/j1/modules/iframeResizer/examples/frame.nested.html +5 -7
- data/assets/themes/j1/modules/iframeResizer/examples/frame.textarea.html +1 -1
- data/assets/themes/j1/modules/iframeResizer/examples/frame.tolerance.html +3 -5
- data/assets/themes/j1/modules/iframeResizer/examples/index.html +4 -3
- data/assets/themes/j1/modules/iframeResizer/examples/two.html +4 -3
- data/assets/themes/j1/modules/justifiedGallery/css/theme/uno.css +8 -9
- data/assets/themes/j1/modules/justifiedGallery/css/theme/uno.min.css +8 -31
- data/assets/themes/j1/modules/lightGallery/css/themes/uno.css +7 -8
- data/assets/themes/j1/modules/lightGallery/css/themes/uno.min.css +8 -10
- data/assets/themes/j1/modules/lightbox/css/lightbox.css +11 -12
- data/assets/themes/j1/modules/lightbox/css/lightbox.min.css +11 -12
- data/assets/themes/j1/modules/lightbox/css/theme/uno.css +7 -7
- data/assets/themes/j1/modules/lightbox/css/theme/uno.min.css +7 -8
- data/assets/themes/j1/modules/lightbox/js/lightbox.js +11 -12
- data/assets/themes/j1/modules/lightbox/js/lightbox.min.js +11 -27
- data/assets/themes/j1/modules/mdiPreviewer/css/previewer.css +82 -0
- data/assets/themes/j1/modules/mdiPreviewer/css/previewer.min.css +15 -0
- data/assets/{README.md → themes/j1/modules/mdiPreviewer/js/readme} +0 -0
- data/assets/themes/j1/modules/mmenuLight/css/mmenu.css +11 -11
- data/assets/themes/j1/modules/mmenuLight/css/mmenu.min.css +12 -386
- data/assets/themes/j1/modules/mmenuLight/css/theme/uno.css +15 -19
- data/assets/themes/j1/modules/mmenuLight/css/theme/uno.min.css +8 -163
- data/assets/themes/j1/modules/popper/js/popper.js +1 -1
- data/assets/themes/j1/modules/popper/js/popper.js.map +1 -1
- data/assets/themes/j1/modules/popper/js/popper.min.js.map +1 -1
- data/assets/themes/j1/modules/tocbot/css/theme/uno.css +12 -19
- data/assets/themes/j1/modules/tocbot/css/theme/uno.min.css +8 -82
- data/assets/themes/j1/modules/twemoji/css/picker/twemoji-picker.css +153 -0
- data/assets/themes/j1/modules/twemoji/css/picker/twemoji-picker.min.css +19 -0
- data/assets/themes/j1/modules/twemoji/js/picker/twemoji-picker.js +12 -13
- data/assets/themes/j1/modules/twemoji/js/picker/twemoji-picker.min.js +12 -268
- data/assets/themes/j1/modules/twemoji/js/twemoji.js +11 -20
- data/assets/themes/j1/modules/twemoji/js/twemoji.min.js +11 -17
- data/lib/j1/version.rb +1 -1
- data/lib/j1_app/j1_auth_manager/config.rb +10 -5
- data/lib/j1_app/j1_auth_manager/views/auth_manager_ui.erb +5 -5
- data/lib/starter_web/Gemfile +6 -2
- data/lib/starter_web/_config.yml +2 -2
- data/lib/starter_web/_data/apps/carousel.yml +6 -7
- data/lib/starter_web/_data/apps/defaults/carousel.yml +2 -3
- data/lib/starter_web/_data/apps/defaults/gallery_customizer.yml +1 -2
- data/lib/starter_web/_data/apps/defaults/justified_gallery.yml +1 -2
- data/lib/starter_web/_data/apps/defaults/light_gallery.yml +1 -2
- data/lib/starter_web/_data/apps/defaults/lightbox.yml +1 -2
- data/lib/starter_web/_data/apps/gallery_customizer.yml +1 -2
- data/lib/starter_web/_data/apps/justified_gallery.yml +4 -5
- data/lib/starter_web/_data/apps/light_gallery.yml +1 -2
- data/lib/starter_web/_data/apps/lightbox.yml +1 -2
- data/lib/starter_web/_data/blocks/banner.yml +25 -21
- data/lib/starter_web/_data/blocks/defaults/banner.yml +3 -4
- data/lib/starter_web/_data/blocks/defaults/footer.yml +1 -2
- data/lib/starter_web/_data/blocks/defaults/panel.yml +3 -4
- data/lib/starter_web/_data/blocks/footer.yml +1 -2
- data/lib/starter_web/_data/blocks/panel.yml +29 -23
- data/lib/starter_web/_data/builder/blog_navigator.yml +1 -2
- data/lib/starter_web/_data/layouts/app.yml +1 -2
- data/lib/starter_web/_data/layouts/blog_archive.yml +1 -2
- data/lib/starter_web/_data/layouts/collection.yml +1 -2
- data/lib/starter_web/_data/layouts/home.yml +7 -28
- data/lib/starter_web/_data/layouts/post.yml +1 -2
- data/lib/starter_web/_data/layouts/raw.yml +1 -2
- data/lib/starter_web/_data/modules/advertising.yml +0 -1
- data/lib/starter_web/_data/modules/attics.yml +0 -1
- data/lib/starter_web/_data/modules/authentication.yml +0 -1
- data/lib/starter_web/_data/modules/back2top.yml +30 -0
- data/lib/starter_web/_data/modules/defaults/attics.yml +5 -3
- data/lib/starter_web/_data/modules/defaults/authentication.yml +0 -1
- data/lib/starter_web/_data/modules/defaults/back2top.yml +146 -0
- data/lib/starter_web/_data/modules/defaults/framer.yml +1 -3
- data/lib/starter_web/_data/modules/defaults/jekyll_search.yml +0 -1
- data/lib/starter_web/_data/modules/defaults/log4javascript.yml +4 -5
- data/lib/starter_web/_data/modules/defaults/log4r.yml +1 -2
- data/lib/starter_web/_data/modules/defaults/navigator.yml +15 -15
- data/lib/starter_web/_data/modules/defaults/stickybits.yml +1 -2
- data/lib/starter_web/_data/modules/defaults/themer.yml +3 -3
- data/lib/starter_web/_data/modules/defaults/toccer.yml +1 -2
- data/lib/starter_web/_data/modules/framer.yml +1 -2
- data/lib/starter_web/_data/modules/log4javascript.yml +4 -5
- data/lib/starter_web/_data/modules/log4r.yml +1 -2
- data/lib/starter_web/_data/modules/navigator_menu.yml +3 -3
- data/lib/starter_web/_data/modules/themer.yml +2 -1
- data/lib/starter_web/_data/modules/toccer.yml +1 -1
- data/lib/starter_web/_data/private.yml +56 -108
- data/lib/starter_web/_data/resources.yml +107 -32
- data/lib/starter_web/_data/template_settings.yml +1 -1
- data/lib/starter_web/assets/images/modules/attics/aditya-joshi-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/admin-dashboard-bootstrap-1280x600.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/alex-holyoake-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/anaya-katlego-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/antonella-lombardi-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/antonino-visalli-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/brandon-mowinkel-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/building-blocks-1920x1280-bw.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/cookies-1920x1200-bw.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/daniel-jensen-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/giammarco-boscaro-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/go-up-1920x1280-bw.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/ian-schneider-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/ideas-start-here-1920x1280-bw.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/jason-rosewell-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/jessica-ruscello-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/lianhao-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/library-1920x1280-bw.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/mae-mue-1920x1280-v.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/mae-mue-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/matthaeus-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/nousnou-iwasaki-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/premium-1920x1280-bw.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/robert-v-ruggiero-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/romain-vignes-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/runner-1920x1200-bw.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/spider-web-1920x1200-bw.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/the-place-1920x1280-bw.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/welcome-1920x1280-bw.jpg +0 -0
- data/lib/starter_web/assets/images/modules/carousel/cats/cat-1.jpg +0 -0
- data/lib/starter_web/assets/images/modules/carousel/cats/cat-2.jpg +0 -0
- data/lib/starter_web/assets/images/modules/carousel/cats/cat-3.jpg +0 -0
- data/lib/starter_web/assets/images/modules/carousel/cats/cat-4.jpg +0 -0
- data/lib/starter_web/assets/images/modules/carousel/cats/cat-5.jpg +0 -0
- data/lib/starter_web/assets/images/modules/carousel/cats/cat-6.jpg +0 -0
- data/lib/starter_web/assets/images/modules/carousel/cats/cat-7.jpg +0 -0
- data/lib/starter_web/assets/images/modules/carousel/cats/cat-8.jpg +0 -0
- data/lib/starter_web/assets/images/modules/carousel/mega_cities/andreas-brucker_b.jpg +0 -0
- data/lib/starter_web/assets/images/modules/carousel/mega_cities/denys-nevozhai-1_b.jpg +0 -0
- data/lib/starter_web/assets/images/modules/carousel/mega_cities/denys-nevozhai-2_b.jpg +0 -0
- data/lib/starter_web/assets/images/modules/carousel/mega_cities/luca-bravo_b.jpg +0 -0
- data/lib/starter_web/assets/images/modules/carousel/mega_cities/thomas-tucker_b.jpg +0 -0
- data/lib/starter_web/assets/images/modules/gallery/mega_cities/andreas-brucker_b.jpg +0 -0
- data/lib/starter_web/assets/images/modules/gallery/mega_cities/banter-snaps_b.jpg +0 -0
- data/lib/starter_web/assets/images/modules/gallery/mega_cities/denys-nevozhai-1_b.jpg +0 -0
- data/lib/starter_web/assets/images/modules/gallery/mega_cities/denys-nevozhai-2-bw.jpg +0 -0
- data/lib/starter_web/assets/images/modules/gallery/mega_cities/denys-nevozhai-2_b.jpg +0 -0
- data/lib/starter_web/assets/images/modules/gallery/mega_cities/emmad-mazhari_b.jpg +0 -0
- data/lib/starter_web/assets/images/modules/gallery/mega_cities/ethan-brooke_b.jpg +0 -0
- data/lib/starter_web/assets/images/modules/gallery/mega_cities/federico-rizzarelli_b.jpg +0 -0
- data/lib/starter_web/assets/images/modules/gallery/mega_cities/gints-gailis_b.jpg +0 -0
- data/lib/starter_web/assets/images/modules/gallery/mega_cities/johan-mouchet_b.jpg +0 -0
- data/lib/starter_web/assets/images/modules/gallery/mega_cities/luca-bravo_b.jpg +0 -0
- data/lib/starter_web/assets/images/modules/gallery/mega_cities/oskars-sylwan_b.jpg +0 -0
- data/lib/starter_web/assets/images/modules/gallery/mega_cities/steven-diaz_b.jpg +0 -0
- data/lib/starter_web/assets/images/modules/gallery/mega_cities/thomas-tucker-bw.jpg +0 -0
- data/lib/starter_web/assets/images/modules/gallery/mega_cities/thomas-tucker_b.jpg +0 -0
- data/lib/starter_web/assets/images/modules/icons/j1/favicon.ico +0 -0
- data/lib/starter_web/assets/images/modules/icons/j1/j1-256x256.png +0 -0
- data/lib/starter_web/assets/images/modules/icons/j1/j1-32x32.ico +0 -0
- data/lib/starter_web/assets/images/modules/icons/j1/j1-512x512.png +0 -0
- data/lib/starter_web/assets/images/modules/icons/j1/j1-64x64.png +0 -0
- data/lib/starter_web/assets/images/modules/icons/j1/j1.ico +0 -0
- data/lib/starter_web/assets/images/modules/icons/j1/scalable/j1.svg +31 -35
- data/lib/starter_web/assets/images/pages/roundtrip/100_present_images/lightbox-image-1.jpg +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/100_present_images/lightbox-image-2.jpg +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/100_present_images/lightbox-image-3.jpg +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/bootstrap-1920x1000-bw.jpg +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/cards-1920x1280-bw.jpg +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/emojies-1920x1280-bw.jpg +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/icon-fonts-1920x1280-bw.jpg +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/images-1920x1280-bw.jpg +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/puzzle-1920x1280-bw.jpg +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/tables-1920x1280-bw.jpg +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/themes-1920x1280-bw.jpg +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/typography-1920x1280-bw.jpg +0 -0
- data/lib/starter_web/assets/videos/gallery/adriana-lima-poster.jpg +0 -0
- data/lib/starter_web/assets/videos/gallery/kick-it-old-school-poster.jpg +0 -0
- data/lib/starter_web/assets/videos/gallery/video1-poster.jpg +0 -0
- data/lib/starter_web/assets/videos/gallery/video2-poster.jpg +0 -0
- data/lib/starter_web/assets/videos/gallery/video2-thumb.jpg +0 -0
- data/lib/starter_web/assets/videos/headers/still/underground-broadway.jpg +0 -0
- data/lib/starter_web/assets/videos/headers/still/victoria-oskolovich-on-vimeo.jpg +0 -0
- data/lib/starter_web/collections/_biography/a-life-in-questions.adoc +81 -0
- data/lib/starter_web/collections/_biography/becoming.adoc +72 -0
- data/lib/starter_web/collections/_biography/born-to-run.adoc +78 -0
- data/lib/starter_web/collections/_biography/forty-autumns.adoc +75 -0
- data/lib/starter_web/collections/_biography/not-dead-yet.adoc +69 -0
- data/lib/starter_web/collections/_biography/princess-diarist-the.adoc +72 -0
- data/lib/starter_web/collections/_biography/when-breath-becomes-air.adoc +73 -0
- data/lib/starter_web/collections/_fantasy/harry-potter-deathly-hallows.adoc +64 -0
- data/lib/starter_web/collections/_fantasy/harry-potter-philosophers-stone.adoc +64 -0
- data/lib/starter_web/collections/_fantasy/mistborn-trilogy.adoc +62 -0
- data/lib/starter_web/collections/_fantasy/ready-player-one.adoc +63 -0
- data/lib/starter_web/collections/_fantasy/sword-of-destiny.adoc +62 -0
- data/lib/starter_web/collections/_fantasy/terry-pratchet-diary-2017.adoc +60 -0
- data/lib/starter_web/collections/_romance/breath-of-snow-and-ashes-a.adoc +67 -0
- data/lib/starter_web/collections/_romance/dressmaker-the.adoc +61 -0
- data/lib/starter_web/collections/_romance/fiery-cross-the.adoc +69 -0
- data/lib/starter_web/collections/_romance/it-ends-with-us.adoc +66 -0
- data/lib/starter_web/collections/_romance/outlander-novel.adoc +78 -0
- data/lib/starter_web/collections/_romance/virgins-outlander-short-story.adoc +62 -0
- data/lib/starter_web/collections/posts/public/featured/_posts/2019-05-01-top-open-source-static-site-generators.adoc +2 -2
- data/lib/starter_web/collections/posts/public/featured/_posts/2019-06-01-about-cookies.adoc +1 -1
- data/lib/starter_web/collections/posts/public/series/_posts/2018-11-01-docker-using-shared-folders.adoc +28 -24
- data/lib/starter_web/collections/posts/public/series/_posts/includes/attributes.asciidoc +66 -0
- data/lib/starter_web/collections/posts/public/series/_posts/includes/documents/100-docker-using-shared-folders.asciidoc +430 -0
- data/lib/starter_web/collections/posts/public/series/_posts/includes/documents/loop.sh +28 -0
- data/lib/starter_web/collections/posts/public/series/_posts/includes/tables/debug_variables.asciidoc +48 -0
- data/lib/starter_web/collections/posts/public/test_posts/_posts/2020-09-11-test_post.adoc +134 -0
- data/lib/starter_web/collections/posts/public/test_posts/_posts/includes/attributes.asciidoc +41 -0
- data/lib/starter_web/collections/posts/public/test_posts/_posts/includes/tables/debug_variables.asciidoc +48 -0
- data/lib/starter_web/includes/attributes.asciidoc +183 -0
- data/lib/starter_web/index.html +1 -1
- data/lib/starter_web/package.json +2 -2
- data/lib/starter_web/pages/protected/site_search.adoc +8 -19
- data/lib/starter_web/pages/public/blog/navigator/archive.html +11 -17
- data/lib/starter_web/pages/public/blog/navigator/archive/categoryview.html +13 -19
- data/lib/starter_web/pages/public/blog/navigator/archive/dateview.html +13 -19
- data/lib/starter_web/pages/public/blog/navigator/archive/tagview.html +11 -12
- data/lib/starter_web/pages/public/bookshelf/100_whats_up.adoc +281 -0
- data/lib/starter_web/pages/public/bookshelf/200_book_shelf_biography.adoc +52 -0
- data/lib/starter_web/pages/public/bookshelf/300_book_shelf_fantasy.adoc +54 -0
- data/lib/starter_web/pages/public/bookshelf/400_book_shelf_romance.adoc +54 -0
- data/lib/starter_web/pages/public/learn/kickstarter/web_in_a_day/100_meet_and_greet_jekyll.adoc +10 -19
- data/lib/starter_web/pages/public/learn/kickstarter/web_in_a_day/200_preparations.adoc +12 -23
- data/lib/starter_web/pages/public/learn/kickstarter/web_in_a_day/300_first_awesome_web.adoc +11 -21
- data/lib/starter_web/pages/public/learn/kickstarter/web_in_a_day/{000_includes → includes}/attributes.asciidoc +21 -12
- data/lib/starter_web/pages/public/learn/kickstarter/web_in_a_day/{000_includes → includes}/documents/100_meet_and_greet_jekyll.asciidoc +0 -0
- data/lib/starter_web/pages/public/learn/kickstarter/web_in_a_day/{000_includes → includes}/documents/200_preparations.asciidoc +0 -0
- data/lib/starter_web/pages/public/learn/kickstarter/web_in_a_day/{000_includes → includes}/documents/300_first_awesome_web.asciidoc +0 -0
- data/lib/starter_web/pages/public/learn/kickstarter/web_in_a_day/{000_includes → includes}/parts.asciidoc +0 -0
- data/lib/starter_web/pages/public/learn/roundtrip/100_present_images.adoc +58 -79
- data/lib/starter_web/pages/public/learn/roundtrip/100_present_videos.adoc +27 -40
- data/lib/starter_web/pages/public/learn/roundtrip/200_typography.adoc +33 -48
- data/lib/starter_web/pages/public/learn/roundtrip/300_icon_fonts.adoc +40 -54
- data/lib/starter_web/pages/public/learn/roundtrip/400_asciidoc_extensions.adoc +81 -96
- data/lib/starter_web/pages/public/learn/roundtrip/410_bs_modals_extentions.adoc +14 -54
- data/lib/starter_web/pages/public/learn/roundtrip/420_responsive_tables_extensions.adoc +25 -40
- data/lib/starter_web/pages/public/learn/roundtrip/500_themes.adoc +21 -36
- data/lib/starter_web/pages/public/learn/roundtrip/510_mdb_preview/mdb_previewer.adoc +2 -2
- data/lib/starter_web/pages/public/learn/roundtrip/{000_includes → includes}/attributes.asciidoc +7 -32
- data/lib/starter_web/pages/public/learn/roundtrip/{000_includes → includes}/documents/100_gistblock.asciidoc +0 -0
- data/lib/starter_web/pages/public/learn/roundtrip/includes/documents/410_bottom_info.asciidoc +14 -0
- data/lib/starter_web/pages/public/learn/roundtrip/{000_includes → includes}/documents/410_bottom_left_warning.asciidoc +2 -2
- data/lib/starter_web/pages/public/learn/roundtrip/{000_includes → includes}/documents/410_bottom_right_danger.asciidoc +2 -2
- data/lib/starter_web/pages/public/learn/roundtrip/{000_includes → includes}/documents/410_central_success.asciidoc +2 -2
- data/lib/starter_web/pages/public/learn/roundtrip/{000_includes → includes}/documents/410_full_height_left_info.asciidoc +2 -2
- data/lib/starter_web/pages/public/learn/roundtrip/{000_includes → includes}/documents/410_full_height_right_success.asciidoc +2 -2
- data/lib/starter_web/pages/public/learn/roundtrip/{000_includes → includes}/documents/410_table_3_column.asciidoc +0 -0
- data/lib/starter_web/pages/public/learn/roundtrip/{000_includes → includes}/documents/410_top_info.asciidoc +3 -3
- data/lib/starter_web/pages/public/learn/roundtrip/{000_includes → includes}/documents/410_top_left_info.asciidoc +2 -2
- data/lib/starter_web/pages/public/learn/roundtrip/{000_includes → includes}/documents/410_top_right_success.asciidoc +2 -2
- data/lib/starter_web/pages/public/learn/roundtrip/includes/documents/419_advanced_modals_demo.asciidoc +337 -0
- data/lib/starter_web/pages/public/learn/vtutorials/000_includes/documents/410_bottom_info.asciidoc +1 -1
- data/lib/starter_web/pages/public/learn/vtutorials/000_includes/documents/410_bottom_left_warning.asciidoc +1 -1
- data/lib/starter_web/pages/public/learn/vtutorials/000_includes/documents/410_bottom_right_danger.asciidoc +1 -1
- data/lib/starter_web/pages/public/learn/vtutorials/000_includes/documents/410_central_success.asciidoc +1 -1
- data/lib/starter_web/pages/public/learn/vtutorials/000_includes/documents/410_full_height_left_info.asciidoc +1 -1
- data/lib/starter_web/pages/public/learn/vtutorials/000_includes/documents/410_full_height_right_success.asciidoc +1 -1
- data/lib/starter_web/pages/public/learn/vtutorials/000_includes/documents/410_top_info.asciidoc +1 -1
- data/lib/starter_web/pages/public/learn/vtutorials/000_includes/documents/410_top_left_info.asciidoc +1 -1
- data/lib/starter_web/pages/public/learn/vtutorials/000_includes/documents/410_top_right_success.asciidoc +1 -1
- data/lib/starter_web/pages/public/learn/whats_up.adoc +6 -25
- data/lib/starter_web/pages/public/legal/de/300_privacy.adoc +6 -12
- data/lib/starter_web/pages/public/legal/en/300_privacy.adoc +27 -33
- data/lib/starter_web/pages/public/legal/en/400_license_agreement.adoc +3 -2
- data/lib/starter_web/pages/public/panels/intro_panel/panel.adoc +2 -0
- data/lib/starter_web/pages/public/previewer/bootstrap_theme.adoc +1297 -717
- data/lib/starter_web/pages/public/previewer/iframer.adoc +2 -7
- data/lib/starter_web/pages/public/previewer/{000_includes → includes}/attributes.asciidoc +16 -8
- data/lib/starter_web/pages/public/previewer/{000_includes → includes}/tables/mdi_icons/100_absolute_sizes.asciidoc +0 -0
- data/lib/starter_web/pages/public/previewer/{000_includes → includes}/tables/mdi_icons/110_bs_grid_sizes.asciidoc +0 -0
- data/lib/starter_web/pages/public/previewer/{000_includes → includes}/tables/mdi_icons/120_relative_sizes.asciidoc +0 -0
- data/lib/starter_web/pages/public/previewer/{000_includes → includes}/tables/mdi_icons/200_rotate.asciidoc +0 -0
- data/lib/starter_web/pages/public/previewer/{000_includes → includes}/tables/mdi_icons/300_flip.asciidoc +0 -0
- data/lib/starter_web/pages/public/previewer/{000_includes → includes}/tables/mdi_icons/400_spin_pulsed.asciidoc +0 -0
- data/lib/starter_web/pages/public/previewer/{000_includes → includes}/tables/mdi_icons/500_bw_color_palette.asciidoc +0 -0
- data/lib/starter_web/pages/public/previewer/{000_includes → includes}/tables/mdi_icons/510_bs_color_palette.asciidoc +0 -0
- data/lib/starter_web/pages/public/previewer/{000_includes → includes}/tables/mdi_icons/600_md_color_palette.asciidoc +0 -0
- data/lib/starter_web/pages/public/previewer/{000_includes → includes}/tables/mdi_icons/601_md_color_palette_indigo.asciidoc +0 -0
- data/lib/starter_web/pages/public/previewer/{000_includes → includes}/tables/mdi_icons/602_md_color_palette_pink.asciidoc +0 -0
- data/lib/starter_web/pages/public/previewer/{000_includes → includes}/tables/twitter_emoji/100_bs_sizes.asciidoc +0 -0
- data/lib/starter_web/pages/public/previewer/{000_includes → includes}/tables/twitter_emoji/100_relative_sizes.asciidoc +0 -0
- data/lib/starter_web/pages/public/previewer/{000_includes → includes}/tables/twitter_emoji/200_rotate.asciidoc +0 -0
- data/lib/starter_web/pages/public/previewer/{000_includes → includes}/tables/twitter_emoji/300_flip.asciidoc +0 -0
- data/lib/starter_web/pages/public/previewer/{000_includes → includes}/tables/twitter_emoji/400_spin_pulsed.asciidoc +0 -0
- data/lib/starter_web/pages/public/previewer/mdi_icons_preview.adoc +9 -22
- data/lib/starter_web/pages/public/previewer/twitter_emoji_preview.adoc +22 -29
- data/lib/starter_web/pages/public/{learn/examples → test_pages}/floating_ad.adoc +0 -0
- data/lib/starter_web/pages/public/{learn/examples → test_pages}/floating_div.adoc +1 -1
- data/lib/starter_web/pages/public/test_pages/includes/attributes.asciidoc +47 -0
- data/lib/starter_web/pages/public/test_pages/includes/documents/100_gistblock.asciidoc +27 -0
- data/lib/starter_web/pages/public/test_pages/includes/images/pages/minneapolis.1200x400.jpg +0 -0
- data/lib/starter_web/pages/public/test_pages/includes/tables/000_bem_specifiers.asciidoc +22 -0
- data/lib/starter_web/pages/public/test_pages/includes/tables/000_specifier_examples.asciidoc +56 -0
- data/lib/starter_web/pages/public/test_pages/nav_pagination_tester.adoc +297 -0
- data/lib/starter_web/pages/public/test_pages/page_attribute_tester.adoc +103 -0
- data/lib/starter_web/utilsrv/_defaults/package.json +1 -1
- data/lib/starter_web/utilsrv/package.json +1 -1
- metadata +106 -65
- data/_includes/themes/j1/blocks/footer/boxes/about_box.proc.org +0 -40
- data/assets/themes/j1/core/css/material-design-icons.min.css +0 -1
- data/assets/themes/j1/core/css/theme_extensions.min.css +0 -1
- data/assets/themes/j1/modules/backstretch/js/backstretch.min.js.org +0 -1
- data/lib/starter_web/assets/images/modules/attics/admin-dashboard-bootstrap-1280x600.png +0 -0
- data/lib/starter_web/assets/images/modules/attics/mae-mu-Vf9gbsLZyf0-unsplash.jpg +0 -0
- data/lib/starter_web/assets/videos/headers/still/underground-broadway.webp +0 -0
- data/lib/starter_web/assets/videos/headers/still/victoria-oskolovich-on-vimeo.webp +0 -0
- data/lib/starter_web/pages/public/learn/roundtrip/000_bs_tour.1.asciidoc +0 -120
- data/lib/starter_web/pages/public/learn/roundtrip/000_bs_tour.adoc +0 -144
- data/lib/starter_web/pages/public/learn/roundtrip/000_bs_tour_api.adoc +0 -642
- data/lib/starter_web/pages/public/learn/roundtrip/000_includes/documents/410_bottom_info.asciidoc +0 -11
- data/lib/starter_web/pages/public/learn/roundtrip/000_includes/documents/419_advanced_modals_html.asciidoc +0 -928
- data/lib/starter_web/pages/public/learn/roundtrip/bs_tour.js +0 -98
data/lib/starter_web/pages/public/learn/vtutorials/000_includes/documents/410_top_left_info.asciidoc
CHANGED
@@ -4,7 +4,7 @@
|
|
4
4
|
++++
|
5
5
|
<div class="ml-2 mb-5">
|
6
6
|
<!-- Button trigger modal -->
|
7
|
-
<button type="button" class="btn btn-
|
7
|
+
<button type="button" class="btn btn-secondary btn-raised" data-toggle="modal" data-target="#sideModalTLInfoDemo">
|
8
8
|
Launch Modal Example
|
9
9
|
</button>
|
10
10
|
</div>
|
@@ -4,7 +4,7 @@
|
|
4
4
|
++++
|
5
5
|
<div class="ml-2 mb-5">
|
6
6
|
<!-- Button trigger modal -->
|
7
|
-
<button type="button" class="btn btn-
|
7
|
+
<button type="button" class="btn btn-secondary btn-raised" data-toggle="modal" data-target="#sideModalTRSuccessDemo">
|
8
8
|
Launch Modal Example
|
9
9
|
</button>
|
10
10
|
</div>
|
@@ -28,40 +28,21 @@ resource_options:
|
|
28
28
|
href: https://unsplash.com/@alexanderredl
|
29
29
|
---
|
30
30
|
|
31
|
+
// Page Initializer
|
32
|
+
// =============================================================================
|
31
33
|
// Enable the Liquid Preprocessor
|
32
|
-
// -----------------------------------------------------------------------------
|
33
34
|
:page-liquid:
|
34
35
|
|
35
|
-
|
36
|
-
// Set other global page attributes here
|
37
|
-
// -----------------------------------------------------------------------------
|
38
|
-
//:my-asciidoc-attribute:
|
39
|
-
|
40
36
|
// Load Liquid procedures
|
41
37
|
// -----------------------------------------------------------------------------
|
42
|
-
{% capture
|
43
|
-
|
44
|
-
|
45
|
-
// Initialize entry document environmental attributes
|
46
|
-
// -----------------------------------------------------------------------------
|
47
|
-
{% include {{set_env_entry_document}} %}
|
48
|
-
|
49
|
-
// Load tag, url and data attributes
|
50
|
-
// -----------------------------------------------------------------------------
|
51
|
-
// include::{includedir}/attributes.asciidoc[tag=tags]
|
52
|
-
// include::{includedir}/attributes.asciidoc[tag=urls]
|
53
|
-
// include::{includedir}/attributes.asciidoc[tag=data]
|
38
|
+
{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
|
54
39
|
|
55
|
-
//
|
40
|
+
// Load page attributes (all)
|
56
41
|
// -----------------------------------------------------------------------------
|
57
|
-
|
58
|
-
|
42
|
+
{% include {{load_attributes}} %}
|
59
43
|
|
60
44
|
// Page content
|
61
|
-
//
|
62
|
-
|
63
|
-
// Include sub-documents
|
64
|
-
// -----------------------------------------------------------------------------
|
45
|
+
// =============================================================================
|
65
46
|
|
66
47
|
Welcome to the pages of J1 Template. If your here first time,
|
67
48
|
hopefully you get on that page first. For sure, there is no better
|
@@ -14,18 +14,13 @@ resources: []
|
|
14
14
|
resource_options:
|
15
15
|
---
|
16
16
|
|
17
|
-
//
|
18
|
-
//
|
19
|
-
:page-liquid:
|
20
|
-
|
21
|
-
// NOTE: Attributes settings for section control
|
17
|
+
// Attribute settings for section control
|
22
18
|
//
|
23
19
|
:cookies:
|
24
20
|
:revoke_cookie_consent:
|
25
21
|
:content_permissions:
|
26
22
|
:server-logs:
|
27
23
|
|
28
|
-
|
29
24
|
Die Betreiber dieser Seiten nehmen den Schutz Ihrer persönlichen Daten sehr
|
30
25
|
ernst. Wir behandeln Ihre personenbezogenen Daten vertraulich und entsprechend
|
31
26
|
der gesetzlichen Datenschutzvorschriften sowie dieser Datenschutzerklärung.
|
@@ -76,13 +71,13 @@ revoke the cookie consent you've given. Furthermore, you may be able to refuse
|
|
76
71
|
them by adjusting your *browser* settings to *reject on cookies*.
|
77
72
|
|
78
73
|
CAUTION: If you have previously visited our website -- or any pages this
|
79
|
-
session -- *and* agreed on the use of cookies, you may also have to
|
74
|
+
session -- *and* agreed on the use of cookies, you may also have to
|
80
75
|
*delete* already existing *cookies* by your *browser* in order to clean
|
81
76
|
all cookies left.
|
82
77
|
|
83
78
|
++++
|
84
79
|
<div class="ml-0 mb-0">
|
85
|
-
<button type="button" name="revokeCookieConsent" class="btn btn-
|
80
|
+
<button type="button" name="revokeCookieConsent" class="btn btn-secondary btn-raised btn-flex mb-3">
|
86
81
|
<i class="toggle-button mdi mdi-toggle-switch-off mdi-lg mdi-md-bg-primary-50 mr-1"></i>
|
87
82
|
Revoke Cookie Consent
|
88
83
|
</button>
|
@@ -119,15 +114,15 @@ all cookies left.
|
|
119
114
|
}
|
120
115
|
|
121
116
|
/* Manage button click events from "Cookie Consent REVOKE" dialog */
|
122
|
-
$('a.btn').click(function() {
|
117
|
+
$('a.btn').click(function() {
|
123
118
|
if (this.id === 'revokeCookies') {
|
124
119
|
logger.debug('User clicked revokeCookiesButton');
|
125
120
|
user_state.cookies_accepted = 'declined';
|
126
121
|
j1.writeCookie({
|
127
|
-
name: cookie_user_session_name,
|
122
|
+
name: cookie_user_session_name,
|
128
123
|
data: user_state
|
129
124
|
});
|
130
|
-
|
125
|
+
|
131
126
|
$('.toggle-button').toggleClass('mdi-toggle-switch-off mdi-toggle-switch');
|
132
127
|
|
133
128
|
// Hide cookie icon
|
@@ -297,4 +292,3 @@ Sie verhindern, indem Sie sich aus Ihrem YouTube Account ausloggen.
|
|
297
292
|
Weitere Informationen zum Umgang von Nutzerdaten finden Sie in der
|
298
293
|
https://www.google.de/intl/de/policies/privacy[Datenschutzerklärung von YouTube, window="_blank"].
|
299
294
|
endif::[]
|
300
|
-
|
@@ -15,7 +15,7 @@ resource_options:
|
|
15
15
|
- attic:
|
16
16
|
padding_top: 400
|
17
17
|
padding_bottom: 50
|
18
|
-
opacity: 0.5
|
18
|
+
opacity: 0.5
|
19
19
|
slides:
|
20
20
|
- url: /assets/images/modules/attics/lianhao-1920x1280.jpg
|
21
21
|
alt: Photo by Lianhao Qu
|
@@ -26,11 +26,7 @@ resource_options:
|
|
26
26
|
href: https://unsplash.com/@lianhao
|
27
27
|
---
|
28
28
|
|
29
|
-
//
|
30
|
-
//
|
31
|
-
:page-liquid:
|
32
|
-
|
33
|
-
// NOTE: Attributes settings for section control
|
29
|
+
// Attribute settings for section control
|
34
30
|
//
|
35
31
|
:cookies:
|
36
32
|
:revoke_cookie_consent:
|
@@ -38,12 +34,11 @@ resource_options:
|
|
38
34
|
:content_permissions:
|
39
35
|
:server-logs:
|
40
36
|
|
41
|
-
|
42
37
|
The operators of this website take protection of your personal data extremely
|
43
38
|
seriously. We treat your personal data as confidential and comply with the
|
44
39
|
data protection legislation and this privacy policy.
|
45
40
|
|
46
|
-
It is generally *not* possible to use our website without disclosing personal
|
41
|
+
It is generally *not* possible to use our website without disclosing personal
|
47
42
|
data. Where personal data (for example a user name, page visits) is collected
|
48
43
|
on our website, this is voluntary insofar as is possible. This data is never
|
49
44
|
disclosed to third parties without your express consent.
|
@@ -52,32 +47,32 @@ ifdef::cookies[]
|
|
52
47
|
== Cookies
|
53
48
|
|
54
49
|
A cookie is a commonly used automated data collection method. Cookies are
|
55
|
-
small text files that are placed on your computer or device by websites that
|
50
|
+
small text files that are placed on your computer or device by websites that
|
56
51
|
you visit in order to make websites work, or work more efficiently.
|
57
52
|
|
58
53
|
We, may our partners, make use of cookies, web beacons, pixel tags, scripts
|
59
|
-
or other similar technologies on our websites to improve the browsing
|
54
|
+
or other similar technologies on our websites to improve the browsing
|
60
55
|
experience of our pages:
|
61
56
|
|
62
57
|
* Tailor information presented to you based on your browsing preferences,
|
63
|
-
such as language, user account data, selected content and geographical
|
58
|
+
such as language, user account data, selected content and geographical
|
64
59
|
region
|
65
60
|
|
66
61
|
* Collect statistics regarding your website usage
|
67
62
|
|
68
|
-
All personal data collected is stored in Cookies. We use different kinds
|
69
|
-
of cookies. Cookies are classified by its *lifespan* and the *domain* to
|
63
|
+
All personal data collected is stored in Cookies. We use different kinds
|
64
|
+
of cookies. Cookies are classified by its *lifespan* and the *domain* to
|
70
65
|
which it belongs.
|
71
|
-
|
66
|
+
|
72
67
|
Session Cookie::
|
73
|
-
Classified by *lifespan*. Necessary to provide you with services and
|
74
|
-
features available through our websites for the time of your visit. If you
|
68
|
+
Classified by *lifespan*. Necessary to provide you with services and
|
69
|
+
features available through our websites for the time of your visit. If you
|
75
70
|
leave our pages, these Cookies are automatically deleted by your web browser.
|
76
71
|
Without these cookies, services you may need cannot be provided.
|
77
72
|
|
78
73
|
Persistent Cookie::
|
79
|
-
Classified by *lifespan*. Necessary to provide you with services and
|
80
|
-
features available through our websites if you return the site. Without
|
74
|
+
Classified by *lifespan*. Necessary to provide you with services and
|
75
|
+
features available through our websites if you return the site. Without
|
81
76
|
these cookies, services cannot be provided.
|
82
77
|
|
83
78
|
First-party Cookie::
|
@@ -85,13 +80,13 @@ Classified by the *domain*. First-party Cookies are created by *this* site.
|
|
85
80
|
We are using both types: Session Cookies *and* Persistent Cookies.
|
86
81
|
|
87
82
|
Second-party Cookie::
|
88
|
-
Classified by the *domain*. Used to integrate services from *other* sites
|
83
|
+
Classified by the *domain*. Used to integrate services from *other* sites
|
89
84
|
like Github, Patreon, Disqus and others.
|
90
85
|
|
91
86
|
[NOTE]
|
92
87
|
====
|
93
88
|
If you do not wish to receive cookies you may be able to refuse them by
|
94
|
-
adjusting your browser settings to reject cookies. If you do so, we may
|
89
|
+
adjusting your browser settings to reject cookies. If you do so, we may
|
95
90
|
*not* unable to offer you *any* of our functionalities, services or support.
|
96
91
|
If you have previously visited our websites, you may also have to delete any
|
97
92
|
existing cookies from your browser.
|
@@ -107,13 +102,13 @@ revoke the cookie consent you've given. Furthermore, you may be able to refuse
|
|
107
102
|
them by adjusting your *browser* settings to *reject on cookies*.
|
108
103
|
|
109
104
|
CAUTION: If you have previously visited our website -- or any pages this
|
110
|
-
session -- *and* agreed on the use of cookies, you may also have to
|
105
|
+
session -- *and* agreed on the use of cookies, you may also have to
|
111
106
|
*delete* already existing *cookies* by your *browser* in order to clean
|
112
107
|
all cookies left.
|
113
108
|
|
114
109
|
++++
|
115
110
|
<div class="ml-0 mb-0">
|
116
|
-
<button type="button" name="revokeCookieConsent" class="btn btn-
|
111
|
+
<button type="button" name="revokeCookieConsent" class="btn btn-secondary btn-raised btn-flex mb-3">
|
117
112
|
<i class="toggle-button mdi mdi-toggle-switch-off mdi-lg mdi-md-bg-primary-50 mr-1"></i>
|
118
113
|
Revoke Cookie Consent
|
119
114
|
</button>
|
@@ -150,15 +145,15 @@ all cookies left.
|
|
150
145
|
}
|
151
146
|
|
152
147
|
/* Manage button click events from "Cookie Consent REVOKE" dialog */
|
153
|
-
$('a.btn').click(function() {
|
148
|
+
$('a.btn').click(function() {
|
154
149
|
if (this.id === 'revokeCookies') {
|
155
150
|
logger.debug('User clicked revokeCookiesButton');
|
156
151
|
user_state.cookies_accepted = 'declined';
|
157
152
|
j1.writeCookie({
|
158
|
-
name: cookie_user_session_name,
|
153
|
+
name: cookie_user_session_name,
|
159
154
|
data: user_state
|
160
155
|
});
|
161
|
-
|
156
|
+
|
162
157
|
$('.toggle-button').toggleClass('mdi-toggle-switch-off mdi-toggle-switch');
|
163
158
|
|
164
159
|
// Hide cookie icon
|
@@ -180,16 +175,16 @@ ifdef::delete_cookies[]
|
|
180
175
|
== Delete cookies
|
181
176
|
|
182
177
|
If you have previously visited our website -- or any pages this
|
183
|
-
session -- *and* agreed on the use of cookies, you may also have to
|
178
|
+
session -- *and* agreed on the use of cookies, you may also have to
|
184
179
|
*delete* already existing *cookies* by your *browser* in order to clean
|
185
|
-
all cookies left.
|
180
|
+
all cookies left.
|
186
181
|
|
187
|
-
By clicking the button below, all cookies related to *this* site will be
|
182
|
+
By clicking the button below, all cookies related to *this* site will be
|
188
183
|
deleted.
|
189
184
|
|
190
185
|
++++
|
191
186
|
<div class="ml-0 mb-0">
|
192
|
-
<button type="button" name="deleteCookies" class="btn btn-
|
187
|
+
<button type="button" name="deleteCookies" class="btn btn-secondary btn-raised btn-flex mb-3">
|
193
188
|
<i class="mdi mdi-cookie mdi-lg mdi-md-bg-primary-50 mr-1"></i>
|
194
189
|
Delete Cookies
|
195
190
|
</button>
|
@@ -227,9 +222,9 @@ endif::[]
|
|
227
222
|
ifdef::server-logs[]
|
228
223
|
== Server log files
|
229
224
|
|
230
|
-
We gather certain information automatically by our webservers and store it in
|
231
|
-
log files. This information may include Internet protocol (IP) addresses,
|
232
|
-
browser type, internet service provider (ISP), referring/exit pages, operating
|
225
|
+
We gather certain information automatically by our webservers and store it in
|
226
|
+
log files. This information may include Internet protocol (IP) addresses,
|
227
|
+
browser type, internet service provider (ISP), referring/exit pages, operating
|
233
228
|
system, date/time stamp, and/or clickstream data.
|
234
229
|
|
235
230
|
These are:
|
@@ -391,4 +386,3 @@ Sie verhindern, indem Sie sich aus Ihrem YouTube Account ausloggen.
|
|
391
386
|
Weitere Informationen zum Umgang von Nutzerdaten finden Sie in der
|
392
387
|
https://www.google.de/intl/de/policies/privacy[Datenschutzerklärung von YouTube, window="_blank"].
|
393
388
|
endif::[]
|
394
|
-
|
@@ -14,16 +14,17 @@ resources: []
|
|
14
14
|
resource_options:
|
15
15
|
---
|
16
16
|
|
17
|
+
// Attribute settings for section control
|
18
|
+
//
|
17
19
|
:mit-license:
|
18
20
|
:unlicense-license:
|
19
21
|
|
20
|
-
|
21
22
|
J1 Template, and most of the software products used, are licensed under the
|
22
23
|
conditions of Open source licenses. Open source licenses grant permission
|
23
24
|
to everyone to use, modify, and share licensed software for any purpose,
|
24
25
|
subject to conditions preserving the provenance and openness of the software.
|
25
26
|
|
26
|
-
See for more details at
|
27
|
+
See for more details at
|
27
28
|
https://opensource.org/licenses/category[opensource.org, window="_blank"]
|
28
29
|
|
29
30
|
|
@@ -35,30 +35,21 @@ resource_options:
|
|
35
35
|
href: https://unsplash.com/@clemono
|
36
36
|
---
|
37
37
|
|
38
|
+
// Page Initializer
|
39
|
+
// =============================================================================
|
38
40
|
// Enable the Liquid Preprocessor
|
39
|
-
//
|
40
41
|
:page-liquid:
|
41
42
|
|
42
|
-
//
|
43
|
-
//
|
43
|
+
// Load Liquid procedures
|
44
|
+
// -----------------------------------------------------------------------------
|
45
|
+
{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
|
44
46
|
|
47
|
+
// Load page attributes (all)
|
48
|
+
// -----------------------------------------------------------------------------
|
49
|
+
{% include {{load_attributes}} scope="all" %}
|
45
50
|
|
46
|
-
|
47
|
-
|
48
|
-
{% capture set_env_entry_document %}themes/{{site.template.name}}/procedures/global/set_env_entry_document.proc{%endcapture%}
|
49
|
-
|
50
|
-
|
51
|
-
// NOTE: Initialize entry document paths
|
52
|
-
//
|
53
|
-
{% include {{set_env_entry_document}} init_folders=all %}
|
54
|
-
|
55
|
-
// Load tags and urls
|
56
|
-
//
|
57
|
-
include::{includedir}/attributes.asciidoc[tag=tags]
|
58
|
-
include::{includedir}/attributes.asciidoc[tag=urls]
|
59
|
-
|
60
|
-
// Additional ASCIIDOC attributes goes here
|
61
|
-
//
|
51
|
+
// Page content
|
52
|
+
// =============================================================================
|
62
53
|
|
63
54
|
++++
|
64
55
|
<!-- Prepend H1 tag here -->
|
@@ -98,16 +89,14 @@ include::{includedir}/attributes.asciidoc[tag=urls]
|
|
98
89
|
</div>
|
99
90
|
++++
|
100
91
|
|
101
|
-
lorem:sentences[5]
|
102
|
-
|
103
92
|
== Navbars
|
104
93
|
|
105
94
|
See examples for Bootstrap’s powerful, responsive navigation header, the
|
106
95
|
navbar. Includes support for branding, navigation, and more, including
|
107
96
|
support for the collapse plugin.
|
108
97
|
|
109
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
110
|
-
|
98
|
+
pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
|
99
|
+
link:{bs_doc_components_navbar}[Bootstrap Docs {middot} Navbar, {browser-window--new}]
|
111
100
|
|
112
101
|
Theming the navbar has never been easier thanks to the combination of
|
113
102
|
theming classes and background-color utilities. Choose from `.navbar-light`
|
@@ -115,8 +104,8 @@ for use with light background colors, or '.navbar-dark' for dark background
|
|
115
104
|
colors. Then, customize with `.bg-*` utilities.
|
116
105
|
|
117
106
|
++++
|
118
|
-
<div class="doc-example">
|
119
|
-
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
107
|
+
<div class="doc-example mb-3">
|
108
|
+
<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-1">
|
120
109
|
<a class="navbar-brand" href="#">Navbar<div class="ripple-container"></div></a>
|
121
110
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
|
122
111
|
<span class="navbar-toggler-icon"></span>
|
@@ -144,7 +133,7 @@ colors. Then, customize with `.bg-*` utilities.
|
|
144
133
|
</div>
|
145
134
|
</nav>
|
146
135
|
|
147
|
-
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
|
136
|
+
<nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-1">
|
148
137
|
<a class="navbar-brand" href="#">Navbar</a>
|
149
138
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
|
150
139
|
<span class="navbar-toggler-icon"></span>
|
@@ -225,8 +214,8 @@ more with support for multiple sizes, states, and more. Bootstrap includes
|
|
225
214
|
several predefined button styles, each serving its own semantic purpose,
|
226
215
|
with a few extras thrown in for more control.
|
227
216
|
|
228
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
229
|
-
|
217
|
+
pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
|
218
|
+
link:{bs_doc_components_buttons}[Bootstrap Docs {middot} Buttons, {browser-window--new}]
|
230
219
|
|
231
220
|
=== Active buttons
|
232
221
|
|
@@ -235,7 +224,7 @@ inset shadow) when active.
|
|
235
224
|
++++
|
236
225
|
<div class="doc-example mb-3">
|
237
226
|
<button type="button" class="btn btn-primary btn-raised">Primary</button>
|
238
|
-
<button type="button" class="btn btn-
|
227
|
+
<button type="button" class="btn btn-primary btn-raised">Secondary</button>
|
239
228
|
<button type="button" class="btn btn-success btn-raised">Success</button>
|
240
229
|
<button type="button" class="btn btn-info btn-raised">Info</button>
|
241
230
|
<button type="button" class="btn btn-warning btn-raised">Warning</button>
|
@@ -244,6 +233,18 @@ inset shadow) when active.
|
|
244
233
|
</div>
|
245
234
|
++++
|
246
235
|
|
236
|
+
[source, html, role="noclip"]
|
237
|
+
----
|
238
|
+
<button type="button" class="btn btn-primary btn-raised">Primary</button>
|
239
|
+
<button type="button" class="btn btn-primary btn-raised">Secondary</button>
|
240
|
+
<button type="button" class="btn btn-success btn-raised">Success</button>
|
241
|
+
<button type="button" class="btn btn-info btn-raised">Info</button>
|
242
|
+
<button type="button" class="btn btn-warning btn-raised">Warning</button>
|
243
|
+
<button type="button" class="btn btn-danger btn-raised">Danger</button>
|
244
|
+
<button type="button" class="btn btn-link btn-raised">Link</button>
|
245
|
+
----
|
246
|
+
|
247
|
+
|
247
248
|
=== Disabled buttons
|
248
249
|
|
249
250
|
Buttons look inactive by adding the disabled boolean attribute to any
|
@@ -251,7 +252,7 @@ Buttons look inactive by adding the disabled boolean attribute to any
|
|
251
252
|
++++
|
252
253
|
<div class="doc-example mb-3">
|
253
254
|
<button type="button" class="btn btn-primary btn-raised disabled">Primary</button>
|
254
|
-
<button type="button" class="btn btn-
|
255
|
+
<button type="button" class="btn btn-primary btn-raised disabled">Secondary</button>
|
255
256
|
<button type="button" class="btn btn-success btn-raised disabled">Success</button>
|
256
257
|
<button type="button" class="btn btn-info btn-raised disabled">Info</button>
|
257
258
|
<button type="button" class="btn btn-warning btn-raised disabled">Warning</button>
|
@@ -260,6 +261,17 @@ Buttons look inactive by adding the disabled boolean attribute to any
|
|
260
261
|
</div>
|
261
262
|
++++
|
262
263
|
|
264
|
+
[source, html, role="noclip"]
|
265
|
+
----
|
266
|
+
<button type="button" class="btn btn-primary btn-raised disabled">Primary</button>
|
267
|
+
<button type="button" class="btn btn-primary btn-raised disabled">Secondary</button>
|
268
|
+
<button type="button" class="btn btn-success btn-raised disabled">Success</button>
|
269
|
+
<button type="button" class="btn btn-info btn-raised disabled">Info</button>
|
270
|
+
<button type="button" class="btn btn-warning btn-raised disabled">Warning</button>
|
271
|
+
<button type="button" class="btn btn-danger btn-raised disabled">Danger</button>
|
272
|
+
<button type="button" class="btn btn-link btn-raised disabled">Link</button>
|
273
|
+
----
|
274
|
+
|
263
275
|
=== Outline buttons
|
264
276
|
|
265
277
|
In need of a button, but not the hefty background colors they bring? Replace
|
@@ -277,6 +289,16 @@ background images and colors on any button.
|
|
277
289
|
</div>
|
278
290
|
++++
|
279
291
|
|
292
|
+
[source, html, role="noclip"]
|
293
|
+
----
|
294
|
+
<button type="button" class="btn btn-outline-primary btn-raised">Primary</button>
|
295
|
+
<button type="button" class="btn btn-outline-secondary btn-raised">Secondary</button>
|
296
|
+
<button type="button" class="btn btn-outline-success btn-raised">Success</button>
|
297
|
+
<button type="button" class="btn btn-outline-info btn-raised">Info</button>
|
298
|
+
<button type="button" class="btn btn-outline-warning btn-raised">Warning</button>
|
299
|
+
<button type="button" class="btn btn-outline-danger btn-raised">Danger</button>
|
300
|
+
----
|
301
|
+
|
280
302
|
=== Button sizes
|
281
303
|
|
282
304
|
Beside the default size, small and large buttons are available.
|
@@ -289,6 +311,12 @@ Beside the default size, small and large buttons are available.
|
|
289
311
|
</div>
|
290
312
|
++++
|
291
313
|
|
314
|
+
[source, html, role="noclip"]
|
315
|
+
----
|
316
|
+
<button type="button" class="btn btn-primary btn-raised btn-lg">Large button</button>
|
317
|
+
<button type="button" class="btn btn-primary btn-raised">Default button</button>
|
318
|
+
<button type="button" class="btn btn-primary btn-raised btn-sm">Small button</button>
|
319
|
+
----
|
292
320
|
=== Block level button
|
293
321
|
|
294
322
|
Create block level buttons—those that span the full width of a parent—by
|
@@ -301,17 +329,37 @@ adding .btn-block.
|
|
301
329
|
</div>
|
302
330
|
++++
|
303
331
|
|
332
|
+
[source, html, role="noclip"]
|
333
|
+
----
|
334
|
+
<button type="button"
|
335
|
+
class="btn btn-primary btn-lg btn-block btn-raised">
|
336
|
+
Block level button
|
337
|
+
</button>
|
338
|
+
<button type="button"
|
339
|
+
class="btn btn-secondary btn-lg btn-block btn-raised">
|
340
|
+
Block level button
|
341
|
+
</button>
|
342
|
+
----
|
343
|
+
|
304
344
|
=== Toggle button
|
305
345
|
|
306
346
|
++++
|
307
347
|
<div class="doc-example mb-3">
|
308
|
-
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
|
348
|
+
<button type="button" class="btn btn-primary btn-raised" data-toggle="button" aria-pressed="false" autocomplete="off">
|
309
349
|
Single toggle
|
310
350
|
</button>
|
311
351
|
</div>
|
312
352
|
++++
|
313
353
|
|
314
|
-
|
354
|
+
[source, html, role="noclip"]
|
355
|
+
----
|
356
|
+
<button type="button" class="btn btn-primary btn-raised"
|
357
|
+
data-toggle="button" aria-pressed="false" autocomplete="off">
|
358
|
+
Single toggle
|
359
|
+
</button>
|
360
|
+
----
|
361
|
+
|
362
|
+
=== Checkboxes and Radio buttons
|
315
363
|
|
316
364
|
Bootstrap’s .button styles can be applied to other elements, such as
|
317
365
|
`<label>`, to provide checkbox or radio style button toggling. The checked
|
@@ -319,36 +367,34 @@ state for these buttons is only updated via click event on the button.
|
|
319
367
|
|
320
368
|
++++
|
321
369
|
<div class="doc-example mb-3">
|
322
|
-
<div class="btn-group" data-toggle="buttons">
|
323
|
-
<label class="btn btn-primary btn-raised btn-flex active">
|
324
|
-
<input type="checkbox" checked> Checkbox 1
|
325
|
-
</label>
|
326
|
-
<label class="btn btn-primary btn-raised btn-flex">
|
327
|
-
<input type="checkbox"> Checkbox 2
|
328
|
-
</label>
|
329
|
-
<label class="btn btn-primary btn-flex btn-raised">
|
330
|
-
<input type="checkbox"> Checkbox 3
|
331
|
-
</label>
|
332
|
-
</div>
|
333
|
-
</div>
|
334
|
-
++++
|
335
|
-
|
336
|
-
++++
|
337
|
-
<div class="doc-example mb-5">
|
338
370
|
<div class="btn-group btn-group-toggle" data-toggle="buttons">
|
339
|
-
<label class="btn btn-
|
371
|
+
<label class="btn btn-primary btn-raised btn-flex active">
|
340
372
|
<input type="radio" name="options" id="option1" autocomplete="off" checked> Active
|
341
373
|
</label>
|
342
|
-
<label class="btn btn-
|
374
|
+
<label class="btn btn-primary btn-raised btn-flex">
|
343
375
|
<input type="radio" name="options" id="option2" autocomplete="off"> Radio
|
344
376
|
</label>
|
345
|
-
<label class="btn btn-
|
377
|
+
<label class="btn btn-primary btn-raised btn-flex">
|
346
378
|
<input type="radio" name="options" id="option3" autocomplete="off"> Radio
|
347
379
|
</label>
|
348
380
|
</div>
|
349
381
|
</div>
|
350
382
|
++++
|
351
383
|
|
384
|
+
[source, html, role="noclip"]
|
385
|
+
----
|
386
|
+
<div class="btn-group btn-group-toggle" data-toggle="buttons">
|
387
|
+
<label class="btn btn-primary btn-raised btn-flex active">
|
388
|
+
<input type="radio" name="options" id="option1" autocomplete="off" checked> Active
|
389
|
+
</label>
|
390
|
+
<label class="btn btn-primary btn-raised btn-flex">
|
391
|
+
<input type="radio" name="options" id="option2" autocomplete="off"> Radio
|
392
|
+
</label>
|
393
|
+
<label class="btn btn-primary btn-raised btn-flex">
|
394
|
+
<input type="radio" name="options" id="option3" autocomplete="off"> Radio
|
395
|
+
</label>
|
396
|
+
</div>
|
397
|
+
----
|
352
398
|
|
353
399
|
== Typography
|
354
400
|
|
@@ -359,49 +405,43 @@ For a more inclusive and accessible type scale, it is assuemed that
|
|
359
405
|
the browser default root font-size (typically 16px) so visitors can
|
360
406
|
customize their browser defaults as needed.
|
361
407
|
|
362
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
363
|
-
|
408
|
+
pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
|
409
|
+
link:{bs_doc_content_typography}[Bootstrap Docs {middot} Typography, {browser-window--new}]
|
364
410
|
|
365
411
|
=== Headings
|
366
412
|
|
367
413
|
++++
|
368
414
|
<div class="doc-example mb-3">
|
369
415
|
<div class="row mb-5">
|
370
|
-
|
371
|
-
<
|
372
|
-
|
373
|
-
|
374
|
-
|
375
|
-
|
376
|
-
|
377
|
-
|
378
|
-
|
379
|
-
|
380
|
-
|
381
|
-
|
382
|
-
<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
383
|
-
</div>
|
416
|
+
<div class="col-md-4">
|
417
|
+
<h1 class="notoc">Heading 1</h1>
|
418
|
+
<h2 class="notoc">Heading 2</h2>
|
419
|
+
<h3 class="notoc">Heading 3</h3>
|
420
|
+
<h4 class="notoc">Heading 4</h4>
|
421
|
+
<h5 class="notoc">Heading 5</h5>
|
422
|
+
<h6 class="notoc">Heading 6</h6>
|
423
|
+
<h3 class="notoc">
|
424
|
+
Heading 3
|
425
|
+
<small class="text-muted">with muted text</small>
|
426
|
+
</h3>
|
427
|
+
<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
384
428
|
</div>
|
385
429
|
<div class="col-md-4">
|
386
|
-
<
|
387
|
-
|
388
|
-
|
389
|
-
|
390
|
-
|
391
|
-
|
392
|
-
<p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
|
393
|
-
</div>
|
430
|
+
<h3 class="notoc">Example body text</h2>
|
431
|
+
<p>Nullam quis risus eget <a href="javascript:(void)">urna mollis ornare</a> vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
|
432
|
+
<p><small>This line of text is meant to be treated as fine print.</small></p>
|
433
|
+
<p>The following is <strong>rendered as bold text</strong>.</p>
|
434
|
+
<p>The following is <em>rendered as italicized text</em>.</p>
|
435
|
+
<p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
|
394
436
|
</div>
|
395
437
|
<div class="col-md-4">
|
396
|
-
<
|
397
|
-
|
398
|
-
|
399
|
-
|
400
|
-
|
401
|
-
|
402
|
-
|
403
|
-
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
|
404
|
-
</div>
|
438
|
+
<h3 class="notoc">Emphasis classes</h2>
|
439
|
+
<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
|
440
|
+
<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
441
|
+
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
|
442
|
+
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
|
443
|
+
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
|
444
|
+
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
|
405
445
|
</div>
|
406
446
|
</div>
|
407
447
|
</div>
|
@@ -413,20 +453,16 @@ Refer to: link:{bs_doc_content_typography}[Bootstrap Docs, window="_blank"].
|
|
413
453
|
<div class="doc-example mb-3">
|
414
454
|
<div class="row">
|
415
455
|
<div class="col-md-6">
|
416
|
-
<
|
417
|
-
<
|
418
|
-
|
419
|
-
|
420
|
-
</blockquote>
|
421
|
-
</div>
|
456
|
+
<blockquote class="blockquote">
|
457
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
458
|
+
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
459
|
+
</blockquote>
|
422
460
|
</div>
|
423
461
|
<div class="col-md-6">
|
424
|
-
<
|
425
|
-
<
|
426
|
-
|
427
|
-
|
428
|
-
</blockquote>
|
429
|
-
</div>
|
462
|
+
<blockquote class="blockquote blockquote-reverse">
|
463
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
464
|
+
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
465
|
+
</blockquote>
|
430
466
|
</div>
|
431
467
|
</div>
|
432
468
|
</div>
|
@@ -443,68 +479,66 @@ Using the most basic table markup, here’s how .table-based tables look in
|
|
443
479
|
Bootstrap. All table styles are inherited in Bootstrap 4, meaning any nested
|
444
480
|
tables will be styled in the same manner as the parent.
|
445
481
|
|
446
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
447
|
-
|
482
|
+
pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
|
483
|
+
link:{bs_doc_content_tables}[Bootstrap Docs {middot} Tables, {browser-window--new}]
|
448
484
|
|
449
485
|
|
450
486
|
++++
|
451
487
|
<div class="doc-example mb-3">
|
452
|
-
<
|
453
|
-
<
|
454
|
-
<
|
455
|
-
<
|
456
|
-
|
457
|
-
|
458
|
-
|
459
|
-
|
460
|
-
|
461
|
-
|
462
|
-
<
|
463
|
-
<
|
464
|
-
|
465
|
-
|
466
|
-
|
467
|
-
|
468
|
-
|
469
|
-
<
|
470
|
-
|
471
|
-
|
472
|
-
|
473
|
-
|
474
|
-
|
475
|
-
<
|
476
|
-
|
477
|
-
|
478
|
-
|
479
|
-
|
480
|
-
|
481
|
-
<
|
482
|
-
|
483
|
-
|
484
|
-
|
485
|
-
|
486
|
-
|
487
|
-
<
|
488
|
-
|
489
|
-
|
490
|
-
|
491
|
-
|
492
|
-
|
493
|
-
<
|
494
|
-
|
495
|
-
|
496
|
-
|
497
|
-
|
498
|
-
|
499
|
-
<
|
500
|
-
|
501
|
-
|
502
|
-
|
503
|
-
|
504
|
-
|
505
|
-
|
506
|
-
</table>
|
507
|
-
</div>
|
488
|
+
<table class="table table-striped table-hover table-bordered">
|
489
|
+
<thead>
|
490
|
+
<tr>
|
491
|
+
<th>#</th>
|
492
|
+
<th>Column heading</th>
|
493
|
+
<th>Column heading</th>
|
494
|
+
<th>Column heading</th>
|
495
|
+
</tr>
|
496
|
+
</thead>
|
497
|
+
<tbody>
|
498
|
+
<tr>
|
499
|
+
<td>1</td>
|
500
|
+
<td>Column content</td>
|
501
|
+
<td>Column content</td>
|
502
|
+
<td>Column content</td>
|
503
|
+
</tr>
|
504
|
+
<tr>
|
505
|
+
<td>2</td>
|
506
|
+
<td>Column content</td>
|
507
|
+
<td>Column content</td>
|
508
|
+
<td>Column content</td>
|
509
|
+
</tr>
|
510
|
+
<tr class="table-info">
|
511
|
+
<td>3</td>
|
512
|
+
<td>Column content</td>
|
513
|
+
<td>Column content</td>
|
514
|
+
<td>Column content</td>
|
515
|
+
</tr>
|
516
|
+
<tr class="table-success">
|
517
|
+
<td>4</td>
|
518
|
+
<td>Column content</td>
|
519
|
+
<td>Column content</td>
|
520
|
+
<td>Column content</td>
|
521
|
+
</tr>
|
522
|
+
<tr class="table-danger">
|
523
|
+
<td>5</td>
|
524
|
+
<td>Column content</td>
|
525
|
+
<td>Column content</td>
|
526
|
+
<td>Column content</td>
|
527
|
+
</tr>
|
528
|
+
<tr class="table-warning">
|
529
|
+
<td>6</td>
|
530
|
+
<td>Column content</td>
|
531
|
+
<td>Column content</td>
|
532
|
+
<td>Column content</td>
|
533
|
+
</tr>
|
534
|
+
<tr class="table-active">
|
535
|
+
<td>7</td>
|
536
|
+
<td>Column content</td>
|
537
|
+
<td>Column content</td>
|
538
|
+
<td>Column content</td>
|
539
|
+
</tr>
|
540
|
+
</tbody>
|
541
|
+
</table>
|
508
542
|
</div>
|
509
543
|
++++
|
510
544
|
|
@@ -521,8 +555,8 @@ of newer input controls like email verification, number selection, and more.
|
|
521
555
|
Here’s a quick example to demonstrate Bootstrap’s form styles. Keep reading
|
522
556
|
for documentation on required classes, form layout, and more.
|
523
557
|
|
524
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
525
|
-
|
558
|
+
pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
|
559
|
+
link:{bs_doc_components_forms}[Bootstrap Docs {middot} Forms, {browser-window--new}]
|
526
560
|
|
527
561
|
++++
|
528
562
|
<div class="doc-example mb-3">
|
@@ -555,11 +589,11 @@ state, sizing, and more.
|
|
555
589
|
<div class="doc-example mb-3">
|
556
590
|
<form>
|
557
591
|
<div class="form-group">
|
558
|
-
<label for="exampleInputEmail1">Email address</label>
|
559
|
-
<input type="email" class="form-control" id="exampleFormControlInput1"
|
592
|
+
<label for="exampleInputEmail1" class="bmd-label-floating">Email address</label>
|
593
|
+
<input type="email" class="form-control" id="exampleFormControlInput1">
|
560
594
|
</div>
|
561
595
|
<div class="form-group">
|
562
|
-
<label for="exampleFormControlSelect1">Example select</label>
|
596
|
+
<label for="exampleFormControlSelect1" class="bmd-label-floating">Example select</label>
|
563
597
|
<select class="form-control" id="exampleFormControlSelect1">
|
564
598
|
<option>1</option>
|
565
599
|
<option>2</option>
|
@@ -569,7 +603,7 @@ state, sizing, and more.
|
|
569
603
|
</select>
|
570
604
|
</div>
|
571
605
|
<div class="form-group">
|
572
|
-
<label for="exampleFormControlSelect2">Example multiple select</label>
|
606
|
+
<label for="exampleFormControlSelect2" class="bmd-label-floating">Example multiple select</label>
|
573
607
|
<select multiple class="form-control" id="exampleFormControlSelect2">
|
574
608
|
<option>option 1</option>
|
575
609
|
<option>option 2</option>
|
@@ -577,7 +611,7 @@ state, sizing, and more.
|
|
577
611
|
</select>
|
578
612
|
</div>
|
579
613
|
<div class="form-group">
|
580
|
-
<label for="exampleFormControlTextarea1">Example textarea</label>
|
614
|
+
<label for="exampleFormControlTextarea1" class="bmd-label-floating">Example textarea</label>
|
581
615
|
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
|
582
616
|
</div>
|
583
617
|
</form>
|
@@ -590,7 +624,7 @@ For file inputs, swap the .form-control for .form-control-file.
|
|
590
624
|
<div class="doc-example mb-3">
|
591
625
|
<form>
|
592
626
|
<div class="form-group">
|
593
|
-
<label for="exampleFormControlFile1">Example file input</label>
|
627
|
+
<label for="exampleFormControlFile1" class="bmd-label-floating">Example file input</label>
|
594
628
|
<input type="file" class="form-control-file" id="exampleFormControlFile1">
|
595
629
|
</div>
|
596
630
|
</form>
|
@@ -608,8 +642,8 @@ for building all types of navigation components. It includes some style
|
|
608
642
|
overrides (for working with lists), some link padding for larger hit areas,
|
609
643
|
and basic disabled styling.
|
610
644
|
|
611
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
612
|
-
|
645
|
+
pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
|
646
|
+
link:{bs_doc_components_navs}[Bootstrap Docs {middot} Navs, {browser-window--new}]
|
613
647
|
|
614
648
|
=== Tabs
|
615
649
|
|
@@ -619,46 +653,44 @@ JavaScript plugin.
|
|
619
653
|
|
620
654
|
++++
|
621
655
|
<div class="doc-example mb-3">
|
622
|
-
<
|
623
|
-
<
|
624
|
-
<
|
625
|
-
|
626
|
-
|
627
|
-
<
|
628
|
-
|
629
|
-
|
630
|
-
<
|
631
|
-
|
632
|
-
|
633
|
-
|
634
|
-
|
635
|
-
|
636
|
-
|
637
|
-
<
|
638
|
-
|
639
|
-
|
640
|
-
|
641
|
-
|
642
|
-
<a class="dropdown-item" href="javascript:(void)">Separated link</a>
|
643
|
-
</div>
|
644
|
-
</li>
|
645
|
-
<li class="nav-item">
|
646
|
-
<a class="nav-link disabled" href="javascript:(void)">Disabled</a>
|
647
|
-
</li>
|
648
|
-
</ul>
|
649
|
-
<div id="myTabContent" class="tab-content">
|
650
|
-
<div class="tab-pane fade active in" id="home">
|
651
|
-
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
|
652
|
-
</div>
|
653
|
-
<div class="tab-pane fade" id="profile">
|
654
|
-
<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.</p>
|
655
|
-
</div>
|
656
|
-
<div class="tab-pane fade" id="dropdown1">
|
657
|
-
<p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork.</p>
|
658
|
-
</div>
|
659
|
-
<div class="tab-pane fade" id="dropdown2">
|
660
|
-
<p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater.</p>
|
656
|
+
<ul class="nav nav-tabs">
|
657
|
+
<li class="nav-item">
|
658
|
+
<a class="nav-link" data-toggle="tab" href="#home">Home</a>
|
659
|
+
</li>
|
660
|
+
<li class="nav-item">
|
661
|
+
<a class="nav-link" data-toggle="tab" href="#profile">Profile</a>
|
662
|
+
</li>
|
663
|
+
<li class="nav-item dropdown">
|
664
|
+
<a class="nav-link dropdown-toggle" data-toggle="dropdown"
|
665
|
+
href="javascript:(void)"
|
666
|
+
role="button"
|
667
|
+
aria-haspopup="true" aria-expanded="false">
|
668
|
+
Dropdown
|
669
|
+
</a>
|
670
|
+
<div class="dropdown-menu">
|
671
|
+
<a class="dropdown-item" href="javascript:(void)">Action</a>
|
672
|
+
<a class="dropdown-item" href="javascript:(void)">Another action</a>
|
673
|
+
<a class="dropdown-item" href="javascript:(void)">Something else here</a>
|
674
|
+
<div class="dropdown-divider"></div>
|
675
|
+
<a class="dropdown-item" href="javascript:(void)">Separated link</a>
|
661
676
|
</div>
|
677
|
+
</li>
|
678
|
+
<li class="nav-item">
|
679
|
+
<a class="nav-link disabled" href="javascript:(void)">Disabled</a>
|
680
|
+
</li>
|
681
|
+
</ul>
|
682
|
+
<div id="myTabContent" class="tab-content">
|
683
|
+
<div class="tab-pane fade active in" id="home">
|
684
|
+
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
|
685
|
+
</div>
|
686
|
+
<div class="tab-pane fade" id="profile">
|
687
|
+
<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.</p>
|
688
|
+
</div>
|
689
|
+
<div class="tab-pane fade" id="dropdown1">
|
690
|
+
<p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork.</p>
|
691
|
+
</div>
|
692
|
+
<div class="tab-pane fade" id="dropdown2">
|
693
|
+
<p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater.</p>
|
662
694
|
</div>
|
663
695
|
</div>
|
664
696
|
</div>
|
@@ -671,54 +703,56 @@ Take that same HTML as Tabs, but use .nav-pills class instead.
|
|
671
703
|
|
672
704
|
++++
|
673
705
|
<div class="doc-example mb-3">
|
674
|
-
<
|
675
|
-
|
676
|
-
<
|
677
|
-
<
|
678
|
-
|
679
|
-
|
680
|
-
|
681
|
-
|
682
|
-
<
|
683
|
-
<a class="dropdown-
|
684
|
-
<
|
685
|
-
|
686
|
-
|
687
|
-
|
688
|
-
|
689
|
-
|
690
|
-
|
691
|
-
|
692
|
-
|
693
|
-
|
694
|
-
|
695
|
-
|
696
|
-
|
697
|
-
|
698
|
-
|
699
|
-
|
700
|
-
|
701
|
-
|
702
|
-
<
|
703
|
-
<
|
704
|
-
|
705
|
-
|
706
|
-
<
|
707
|
-
|
708
|
-
<
|
709
|
-
|
710
|
-
|
711
|
-
|
712
|
-
|
713
|
-
|
714
|
-
|
715
|
-
|
716
|
-
<
|
717
|
-
|
718
|
-
|
719
|
-
<
|
720
|
-
|
721
|
-
|
706
|
+
<div class="row mb-5">
|
707
|
+
|
708
|
+
<div class="col-md-6">
|
709
|
+
<h5 class="notoc">Standard Pills</h5>
|
710
|
+
<ul class="nav nav-pills">
|
711
|
+
<li class="nav-item mr-1">
|
712
|
+
<a class="nav-link active" href="javascript:(void)">Active</a>
|
713
|
+
</li>
|
714
|
+
<li class="nav-item dropdown mr-1">
|
715
|
+
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:(void)" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
716
|
+
<div class="dropdown-menu">
|
717
|
+
<a class="dropdown-item" href="javascript:(void)">Action</a>
|
718
|
+
<a class="dropdown-item" href="javascript:(void)">Another action</a>
|
719
|
+
<a class="dropdown-item" href="javascript:(void)">Something else here</a>
|
720
|
+
<div class="dropdown-divider"></div>
|
721
|
+
<a class="dropdown-item" href="javascript:(void)">Separated link</a>
|
722
|
+
</div>
|
723
|
+
</li>
|
724
|
+
<li class="nav-item mr-1">
|
725
|
+
<a class="nav-link" href="javascript:(void)">Link</a>
|
726
|
+
</li>
|
727
|
+
<li class="nav-item mr-1">
|
728
|
+
<a class="nav-link disabled" href="javascript:(void)">Disabled</a>
|
729
|
+
</li>
|
730
|
+
</ul>
|
731
|
+
</div>
|
732
|
+
<div class="col-md-6">
|
733
|
+
<h5 class="notoc">Stacked Pills (vertical)</h5>
|
734
|
+
<ul class="nav nav-pills flex-column">
|
735
|
+
<li class="nav-item mb-1">
|
736
|
+
<a class="nav-link active" href="javascript:(void)">Active</a>
|
737
|
+
</li>
|
738
|
+
<li class="nav-item dropdown mb-1">
|
739
|
+
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:(void)" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
740
|
+
<div class="dropdown-menu">
|
741
|
+
<a class="dropdown-item" href="javascript:(void)">Action</a>
|
742
|
+
<a class="dropdown-item" href="javascript:(void)">Another action</a>
|
743
|
+
<a class="dropdown-item" href="javascript:(void)">Something else here</a>
|
744
|
+
<div class="dropdown-divider"></div>
|
745
|
+
<a class="dropdown-item" href="javascript:(void)">Separated link</a>
|
746
|
+
</div>
|
747
|
+
</li>
|
748
|
+
<li class="nav-item mb-1">
|
749
|
+
<a class="nav-link" href="javascript:(void)">Link</a>
|
750
|
+
</li>
|
751
|
+
<li class="nav-item mb-1">
|
752
|
+
<a class="nav-link disabled" href="javascript:(void)">Disabled</a>
|
753
|
+
</li>
|
754
|
+
</ul>
|
755
|
+
</div>
|
722
756
|
</div>
|
723
757
|
</div>
|
724
758
|
++++
|
@@ -732,20 +766,18 @@ Separators are automatically added in CSS through ::before and content.
|
|
732
766
|
|
733
767
|
++++
|
734
768
|
<div class="doc-example mb-3">
|
735
|
-
<
|
736
|
-
<
|
737
|
-
|
738
|
-
|
739
|
-
<
|
740
|
-
|
741
|
-
|
742
|
-
|
743
|
-
<
|
744
|
-
|
745
|
-
|
746
|
-
|
747
|
-
</ol>
|
748
|
-
</div>
|
769
|
+
<ol class="breadcrumb">
|
770
|
+
<li class="breadcrumb-item active">Home</li>
|
771
|
+
</ol>
|
772
|
+
<ol class="breadcrumb">
|
773
|
+
<li class="breadcrumb-item"><a href="javascript:(void)">Home</a></li>
|
774
|
+
<li class="breadcrumb-item active">Library</li>
|
775
|
+
</ol>
|
776
|
+
<ol class="breadcrumb">
|
777
|
+
<li class="breadcrumb-item"><a href="javascript:(void)">Home</a></li>
|
778
|
+
<li class="breadcrumb-item"><a href="javascript:(void)">Library</a></li>
|
779
|
+
<li class="breadcrumb-item active">Data</li>
|
780
|
+
</ol>
|
749
781
|
</div>
|
750
782
|
++++
|
751
783
|
|
@@ -851,45 +883,37 @@ button. For proper styling, use one of the eight required contextual classes
|
|
851
883
|
(e.g., .alert-success). For inline dismissal, use the alerts
|
852
884
|
https://getbootstrap.com/docs/4.0/components/alerts/#dismissing[jQuery plugin].
|
853
885
|
|
854
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
855
|
-
|
886
|
+
pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
|
887
|
+
link:{bs_doc_components_alerts}[Bootstrap Docs {middot} Alerts, {browser-window--new}]
|
856
888
|
|
857
889
|
++++
|
858
890
|
<div class="doc-example mb-3">
|
859
891
|
<div class="row mb-3">
|
860
892
|
<div class="col-md-12">
|
861
|
-
<div class="
|
862
|
-
<
|
863
|
-
|
864
|
-
|
865
|
-
<p class="mb-0">Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, <a href="javascript:(void)" class="alert-link">vel scelerisque nisl consectetur et</a>.</p>
|
866
|
-
</div>
|
893
|
+
<div class="alert alert-dismissible alert-warning">
|
894
|
+
<button type="button" class="close" data-dismiss="alert">×</button>
|
895
|
+
<h4 class="alert-heading notoc">Warning!</h4>
|
896
|
+
<p class="mb-0">Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, <a href="javascript:(void)" class="alert-link">vel scelerisque nisl consectetur et</a>.</p>
|
867
897
|
</div>
|
868
898
|
</div>
|
869
899
|
</div>
|
870
900
|
<div class="row mb-5">
|
871
901
|
<div class="col-md-4">
|
872
|
-
<div class="
|
873
|
-
<
|
874
|
-
|
875
|
-
<strong>Oh snap!</strong> <a href="javascript:(void)" class="alert-link">Change a few things up</a> and try submitting again.
|
876
|
-
</div>
|
902
|
+
<div class="alert alert-dismissible alert-danger">
|
903
|
+
<button type="button" class="close" data-dismiss="alert">×</button>
|
904
|
+
<strong>Oh snap!</strong> <a href="javascript:(void)" class="alert-link">Change a few things up</a> and try submitting again.
|
877
905
|
</div>
|
878
906
|
</div>
|
879
907
|
<div class="col-md-4">
|
880
|
-
<div class="
|
881
|
-
<
|
882
|
-
|
883
|
-
<strong>Well done!</strong> You successfully read <a href="javascript:(void)" class="alert-link">this important alert message</a>.
|
884
|
-
</div>
|
908
|
+
<div class="alert alert-dismissible alert-success">
|
909
|
+
<button type="button" class="close" data-dismiss="alert">×</button>
|
910
|
+
<strong>Well done!</strong> You successfully read <a href="javascript:(void)" class="alert-link">this important alert message</a>.
|
885
911
|
</div>
|
886
912
|
</div>
|
887
913
|
<div class="col-md-4">
|
888
|
-
<div class="
|
889
|
-
<
|
890
|
-
|
891
|
-
<strong>Heads up!</strong> This <a href="javascript:(void)" class="alert-link">alert needs your attention</a>, but it's not super important.
|
892
|
-
</div>
|
914
|
+
<div class="alert alert-dismissible alert-info">
|
915
|
+
<button type="button" class="close" data-dismiss="alert">×</button>
|
916
|
+
<strong>Heads up!</strong> This <a href="javascript:(void)" class="alert-link">alert needs your attention</a>, but it's not super important.
|
893
917
|
</div>
|
894
918
|
</div>
|
895
919
|
</div>
|
@@ -908,8 +932,8 @@ be presented with the content of the badge. Depending on the specific
|
|
908
932
|
situation, these badges may seem like random additional words or numbers
|
909
933
|
at the end of a sentence, link, or button.
|
910
934
|
|
911
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
912
|
-
|
935
|
+
pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
|
936
|
+
link:{bs_doc_components_badges}[Bootstrap Docs {middot} Badge, {browser-window--new}]
|
913
937
|
|
914
938
|
++++
|
915
939
|
<div class="doc-example mb-3">
|
@@ -944,52 +968,72 @@ elements, some CSS to set the width, and a few attributes. We don’t use the
|
|
944
968
|
HTML5 <progress> element, ensuring you can stack progress bars, animate them,
|
945
969
|
and place text labels over them.
|
946
970
|
|
947
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
948
|
-
|
971
|
+
pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
|
972
|
+
link:{bs_doc_components_progress}[Bootstrap Docs {middot} Progress, {browser-window--new}]
|
949
973
|
|
950
974
|
=== Basic
|
951
975
|
|
952
976
|
++++
|
953
977
|
<div class="doc-example mb-3">
|
954
|
-
<div class="
|
955
|
-
<div class="progress">
|
956
|
-
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
957
|
-
</div>
|
978
|
+
<div class="progress">
|
979
|
+
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
958
980
|
</div>
|
959
981
|
</div>
|
960
982
|
++++
|
961
983
|
|
984
|
+
.Basic progressbar
|
985
|
+
[source, html, role="noclip"]
|
986
|
+
----
|
987
|
+
<div class="progress">
|
988
|
+
<div class="progress-bar" role="progressbar"
|
989
|
+
style="width: 25%;"
|
990
|
+
aria-valuenow="25"
|
991
|
+
aria-valuemin="0"
|
992
|
+
aria-valuemax="100">
|
993
|
+
</div>
|
994
|
+
</div>
|
995
|
+
----
|
996
|
+
|
962
997
|
=== Contextual alternatives
|
963
998
|
|
964
999
|
++++
|
965
1000
|
<div class="doc-example mb-3">
|
966
|
-
<div class="
|
967
|
-
<div class="progress">
|
968
|
-
|
969
|
-
|
970
|
-
<div class="progress">
|
971
|
-
|
972
|
-
|
973
|
-
<div class="progress">
|
974
|
-
|
975
|
-
|
976
|
-
<div class="progress">
|
977
|
-
<div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
978
|
-
</div>
|
1001
|
+
<div class="progress mb-1">
|
1002
|
+
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
1003
|
+
</div>
|
1004
|
+
<div class="progress mb-1">
|
1005
|
+
<div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
1006
|
+
</div>
|
1007
|
+
<div class="progress mb-1">
|
1008
|
+
<div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
1009
|
+
</div>
|
1010
|
+
<div class="progress">
|
1011
|
+
<div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
979
1012
|
</div>
|
980
1013
|
</div>
|
981
1014
|
++++
|
982
1015
|
|
1016
|
+
.Progressbar SUCCESS
|
1017
|
+
[source, html, role="noclip"]
|
1018
|
+
----
|
1019
|
+
<div class="progress">
|
1020
|
+
<div class="progress-bar bg-success" role="progressbar"
|
1021
|
+
style="width: 25%;"
|
1022
|
+
aria-valuenow="25"
|
1023
|
+
aria-valuemin="0"
|
1024
|
+
aria-valuemax="100">
|
1025
|
+
</div>
|
1026
|
+
</div>
|
1027
|
+
----
|
1028
|
+
|
983
1029
|
=== Multiple bars
|
984
1030
|
|
985
1031
|
++++
|
986
1032
|
<div class="doc-example mb-3">
|
987
|
-
<div class="
|
988
|
-
<div class="progress">
|
989
|
-
|
990
|
-
|
991
|
-
<div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
|
992
|
-
</div>
|
1033
|
+
<div class="progress">
|
1034
|
+
<div class="progress-bar bg-success" role="progressbar" style="width: 50%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
|
1035
|
+
<div class="progress-bar bg-warning" role="progressbar" style="width: 25%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
|
1036
|
+
<div class="progress-bar bg-danger" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
|
993
1037
|
</div>
|
994
1038
|
</div>
|
995
1039
|
++++
|
@@ -998,22 +1042,20 @@ Refer to: link:{bs_doc_components_progress}[Bootstrap Docs, window="_blank"].
|
|
998
1042
|
|
999
1043
|
++++
|
1000
1044
|
<div class="doc-example mb-3">
|
1001
|
-
<div class="
|
1002
|
-
<div class="progress">
|
1003
|
-
|
1004
|
-
|
1005
|
-
<div class="progress">
|
1006
|
-
|
1007
|
-
|
1008
|
-
<div class="progress">
|
1009
|
-
|
1010
|
-
|
1011
|
-
<div class="progress">
|
1012
|
-
|
1013
|
-
|
1014
|
-
<div class="progress">
|
1015
|
-
<div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
1016
|
-
</div>
|
1045
|
+
<div class="progress mb-1">
|
1046
|
+
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
|
1047
|
+
</div>
|
1048
|
+
<div class="progress mb-1">
|
1049
|
+
<div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
1050
|
+
</div>
|
1051
|
+
<div class="progress mb-1">
|
1052
|
+
<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
1053
|
+
</div>
|
1054
|
+
<div class="progress mb-1">
|
1055
|
+
<div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
1056
|
+
</div>
|
1057
|
+
<div class="progress">
|
1058
|
+
<div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
1017
1059
|
</div>
|
1018
1060
|
</div>
|
1019
1061
|
++++
|
@@ -1022,10 +1064,8 @@ Refer to: link:{bs_doc_components_progress}[Bootstrap Docs, window="_blank"].
|
|
1022
1064
|
|
1023
1065
|
++++
|
1024
1066
|
<div class="doc-example mb-3">
|
1025
|
-
<div class="
|
1026
|
-
<div class="progress">
|
1027
|
-
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
|
1028
|
-
</div>
|
1067
|
+
<div class="progress">
|
1068
|
+
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
|
1029
1069
|
</div>
|
1030
1070
|
</div>
|
1031
1071
|
++++
|
@@ -1040,21 +1080,19 @@ lorem:sentences[2]
|
|
1040
1080
|
|
1041
1081
|
Lightweight, flexible component for showcasing hero unit style content.
|
1042
1082
|
|
1043
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
1044
|
-
|
1083
|
+
pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
|
1084
|
+
link:{bs_doc_components_jumbotron}[Bootstrap Docs {middot} Jumbotron, {browser-window--new}]
|
1045
1085
|
|
1046
1086
|
++++
|
1047
1087
|
<div class="doc-example mb-3">
|
1048
|
-
<div class="
|
1049
|
-
<
|
1050
|
-
|
1051
|
-
|
1052
|
-
|
1053
|
-
|
1054
|
-
<
|
1055
|
-
|
1056
|
-
</p>
|
1057
|
-
</div>
|
1088
|
+
<div class="jumbotron">
|
1089
|
+
<h1 class="display-3">Hello, world!</h1>
|
1090
|
+
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
|
1091
|
+
<hr class="my-4">
|
1092
|
+
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
|
1093
|
+
<p class="lead">
|
1094
|
+
<a class="btn btn-primary btn-raised btn-lg" href="javascript:(void)" role="button">Learn more</a>
|
1095
|
+
</p>
|
1058
1096
|
</div>
|
1059
1097
|
</div>
|
1060
1098
|
++++
|
@@ -1064,65 +1102,59 @@ Refer to: link:{bs_doc_components_jumbotron}[Bootstrap Docs, window="_blank"].
|
|
1064
1102
|
List groups are a flexible and powerful component for displaying a series of
|
1065
1103
|
content. Modify and extend them to support just about any content within.
|
1066
1104
|
|
1067
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
1068
|
-
|
1105
|
+
pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
|
1106
|
+
link:{bs_doc_components_list_group}[Bootstrap Docs {middot} List group, {browser-window--new}]
|
1069
1107
|
|
1070
1108
|
++++
|
1071
1109
|
<div class="doc-example mb-3">
|
1072
1110
|
<div class="row mb-5">
|
1073
1111
|
<div class="col-md-4">
|
1074
|
-
<
|
1075
|
-
<
|
1076
|
-
|
1077
|
-
|
1078
|
-
|
1079
|
-
|
1080
|
-
|
1081
|
-
|
1082
|
-
|
1083
|
-
|
1084
|
-
|
1085
|
-
|
1086
|
-
|
1087
|
-
|
1088
|
-
</ul>
|
1089
|
-
</div>
|
1112
|
+
<ul class="list-group">
|
1113
|
+
<li class="list-group-item d-flex justify-content-between align-items-center">
|
1114
|
+
Cras justo odio
|
1115
|
+
<span class="badge badge-primary badge-pill">14</span>
|
1116
|
+
</li>
|
1117
|
+
<li class="list-group-item d-flex justify-content-between align-items-center">
|
1118
|
+
Dapibus ac facilisis
|
1119
|
+
<span class="badge badge-primary badge-pill">2</span>
|
1120
|
+
</li>
|
1121
|
+
<li class="list-group-item d-flex justify-content-between align-items-center">
|
1122
|
+
Morbi leo risus
|
1123
|
+
<span class="badge badge-primary badge-pill">1</span>
|
1124
|
+
</li>
|
1125
|
+
</ul>
|
1090
1126
|
</div>
|
1091
1127
|
|
1092
1128
|
<div class="col-md-4">
|
1093
|
-
<div class="
|
1094
|
-
<
|
1095
|
-
|
1096
|
-
|
1097
|
-
|
1098
|
-
|
1099
|
-
|
1100
|
-
|
1101
|
-
</a>
|
1102
|
-
</div>
|
1129
|
+
<div class="list-group">
|
1130
|
+
<a href="javascript:(void)" class="list-group-item list-group-item-action active">
|
1131
|
+
Cras justo odio
|
1132
|
+
</a>
|
1133
|
+
<a href="javascript:(void)" class="list-group-item list-group-item-action">Dapibus ac facilisis
|
1134
|
+
</a>
|
1135
|
+
<a href="javascript:(void)" class="list-group-item list-group-item-action disabled">Morbi leo risus
|
1136
|
+
</a>
|
1103
1137
|
</div>
|
1104
1138
|
</div>
|
1105
1139
|
|
1106
1140
|
<div class="col-md-4">
|
1107
|
-
<div class="
|
1108
|
-
<
|
1109
|
-
<
|
1110
|
-
<
|
1111
|
-
|
1112
|
-
|
1113
|
-
|
1114
|
-
|
1115
|
-
|
1116
|
-
|
1117
|
-
<
|
1118
|
-
<
|
1119
|
-
|
1120
|
-
|
1121
|
-
|
1122
|
-
|
1123
|
-
|
1124
|
-
</a>
|
1125
|
-
</div>
|
1141
|
+
<div class="list-group">
|
1142
|
+
<a href="javascript:(void)" class="list-group-item list-group-item-action flex-column align-items-start active">
|
1143
|
+
<div class="d-flex w-100 justify-content-between">
|
1144
|
+
<h5 class="mb-1 notoc">List group item heading</h5>
|
1145
|
+
<small>3 days ago</small>
|
1146
|
+
</div>
|
1147
|
+
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
1148
|
+
<small>Donec id elit non mi porta.</small>
|
1149
|
+
</a>
|
1150
|
+
<a href="javascript:(void)" class="list-group-item list-group-item-action flex-column align-items-start">
|
1151
|
+
<div class="d-flex w-100 justify-content-between">
|
1152
|
+
<h5 class="mb-1 notoc">List group item heading</h5>
|
1153
|
+
<small class="text-muted">3 days ago</small>
|
1154
|
+
</div>
|
1155
|
+
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
1156
|
+
<small class="text-muted">Donec id elit non mi porta.</small>
|
1157
|
+
</a>
|
1126
1158
|
</div>
|
1127
1159
|
</div>
|
1128
1160
|
|
@@ -1147,173 +1179,164 @@ manage to deliver a ton of control and customization. Built with flexbox,
|
|
1147
1179
|
they offer easy alignment and mix well with other Bootstrap components.
|
1148
1180
|
They have no margin by default, so use spacing utilities as needed.
|
1149
1181
|
|
1150
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
1151
|
-
|
1182
|
+
pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
|
1183
|
+
link:{bs_doc_components_cards}[Bootstrap Docs {middot} Card, {browser-window--new}]
|
1152
1184
|
|
1153
1185
|
++++
|
1154
1186
|
<div class="doc-example mb-3">
|
1155
|
-
<div class="row">
|
1156
1187
|
|
1157
|
-
|
1158
|
-
|
1159
|
-
|
1160
|
-
|
1161
|
-
<
|
1162
|
-
|
1163
|
-
|
1164
|
-
</
|
1188
|
+
<div class="row">
|
1189
|
+
<div class="col-md-4 col-sm-4 col-xs-12">
|
1190
|
+
<div class="card mb-3" style="max-width: 20rem;">
|
1191
|
+
<div class="card-body">
|
1192
|
+
<h4 class="card-title notoc">Card title</h4>
|
1193
|
+
<h6 class="card-subtitle mb-2 text-muted notoc">Card subtitle</h6>
|
1194
|
+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
1195
|
+
<a href="javascript:(void)" class="card-link">Card link</a>
|
1196
|
+
<a href="javascript:(void)" class="card-link">Another link</a>
|
1165
1197
|
</div>
|
1166
|
-
|
1167
|
-
|
1168
|
-
|
1169
|
-
|
1170
|
-
|
1171
|
-
</
|
1198
|
+
</div>
|
1199
|
+
</div>
|
1200
|
+
<div class="col-md-4 col-sm-4 col-xs-12">
|
1201
|
+
<div class="card mb-3" style="max-width: 20rem;">
|
1202
|
+
<div class="card-body">
|
1203
|
+
<h4 class="card-title notoc">Card title</h4>
|
1204
|
+
<h6 class="card-subtitle mb-2 text-muted notoc">Card subtitle</h6>
|
1205
|
+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
1206
|
+
<a href="javascript:(void)" class="card-link">Card link</a>
|
1207
|
+
<a href="javascript:(void)" class="card-link">Another link</a>
|
1172
1208
|
</div>
|
1173
|
-
|
1174
|
-
|
1175
|
-
|
1176
|
-
|
1177
|
-
|
1178
|
-
</
|
1209
|
+
</div>
|
1210
|
+
</div>
|
1211
|
+
<div class="col-md-4 col-sm-4 col-xs-12">
|
1212
|
+
<div class="card mb-3" style="max-width: 20rem;">
|
1213
|
+
<div class="card-body">
|
1214
|
+
<h4 class="card-title notoc">Card title</h4>
|
1215
|
+
<h6 class="card-subtitle mb-2 text-muted notoc">Card subtitle</h6>
|
1216
|
+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
1217
|
+
<a href="javascript:(void)" class="card-link">Card link</a>
|
1218
|
+
<a href="javascript:(void)" class="card-link">Another link</a>
|
1179
1219
|
</div>
|
1180
|
-
|
1181
|
-
|
1182
|
-
|
1183
|
-
|
1184
|
-
|
1185
|
-
|
1220
|
+
</div>
|
1221
|
+
</div>
|
1222
|
+
</div>
|
1223
|
+
|
1224
|
+
<div class="row">
|
1225
|
+
<div class="col-md-4 col-sm-4 col-xs-12 pl-3">
|
1226
|
+
<div class="card mb-3" style="max-width: 20rem;">
|
1227
|
+
<div class="card-header text-white bg-primary">
|
1228
|
+
<h3 class="notoc">Header</h3>
|
1186
1229
|
</div>
|
1187
|
-
<div class="card
|
1188
|
-
<
|
1189
|
-
<
|
1190
|
-
<h4 class="card-title notoc">Warning card title</h4>
|
1191
|
-
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
1192
|
-
</div>
|
1230
|
+
<div class="card-body">
|
1231
|
+
<h4 class="card-title notoc">Primary card title</h4>
|
1232
|
+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
1193
1233
|
</div>
|
1194
|
-
|
1195
|
-
|
1196
|
-
|
1197
|
-
|
1198
|
-
|
1199
|
-
</
|
1234
|
+
</div>
|
1235
|
+
</div>
|
1236
|
+
<div class="col-md-4 col-sm-4 col-xs-12">
|
1237
|
+
<div class="card mb-3" style="max-width: 20rem;">
|
1238
|
+
<div class="card-header text-white bg-secondary">
|
1239
|
+
<h3 class="notoc">Header</h3>
|
1200
1240
|
</div>
|
1201
|
-
<div class="card
|
1202
|
-
<
|
1203
|
-
<
|
1204
|
-
<h4 class="card-title notoc">Light card title</h4>
|
1205
|
-
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
1206
|
-
</div>
|
1241
|
+
<div class="card-body">
|
1242
|
+
<h4 class="card-title notoc">Secondary card title</h4>
|
1243
|
+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
1207
1244
|
</div>
|
1208
|
-
|
1209
|
-
|
1210
|
-
|
1211
|
-
|
1212
|
-
|
1213
|
-
</
|
1245
|
+
</div>
|
1246
|
+
</div>
|
1247
|
+
<div class="col-md-4 col-sm-4 col-xs-12">
|
1248
|
+
<div class="card mb-3" style="max-width: 20rem;">
|
1249
|
+
<div class="card-header text-white bg-success">
|
1250
|
+
<h3 class="notoc">Header</h3>
|
1251
|
+
</div>
|
1252
|
+
<div class="card-body">
|
1253
|
+
<h4 class="card-title notoc">Success card title</h4>
|
1254
|
+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
1214
1255
|
</div>
|
1215
1256
|
</div>
|
1216
1257
|
</div>
|
1258
|
+
</div>
|
1217
1259
|
|
1218
|
-
|
1219
|
-
|
1220
|
-
|
1221
|
-
|
1222
|
-
<
|
1223
|
-
<h4 class="card-title notoc">Primary card title</h4>
|
1224
|
-
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
1225
|
-
</div>
|
1260
|
+
<div class="row">
|
1261
|
+
<div class="col-md-4 col-sm-4 col-xs-12 pl-3">
|
1262
|
+
<div class="card mb-3" style="max-width: 20rem;">
|
1263
|
+
<div class="card-header text-white bg-info">
|
1264
|
+
<h3 class="notoc">Header</h3>
|
1226
1265
|
</div>
|
1227
|
-
<div class="card
|
1228
|
-
<
|
1229
|
-
<
|
1230
|
-
<h4 class="card-title notoc">Secondary card title</h4>
|
1231
|
-
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
1232
|
-
</div>
|
1266
|
+
<div class="card-body">
|
1267
|
+
<h4 class="card-title notoc">Info card title</h4>
|
1268
|
+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
1233
1269
|
</div>
|
1234
|
-
<div class="card
|
1235
|
-
<
|
1236
|
-
|
1237
|
-
|
1238
|
-
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
1239
|
-
</div>
|
1270
|
+
<div class="card-footer r-text-200">
|
1271
|
+
<a class="card-link bs-info font-weight-bold g-font-size-12 text-uppercase"
|
1272
|
+
href="javascript:(void)">Action · Footer Link
|
1273
|
+
</a>
|
1240
1274
|
</div>
|
1241
|
-
|
1242
|
-
|
1243
|
-
|
1244
|
-
|
1245
|
-
|
1246
|
-
</
|
1275
|
+
</div>
|
1276
|
+
</div>
|
1277
|
+
<div class="col-md-4 col-sm-4 col-xs-12">
|
1278
|
+
<div class="card mb-3" style="max-width: 20rem;">
|
1279
|
+
<div class="card-header text-white bg-warning">
|
1280
|
+
<h3 class="notoc">Header</h3>
|
1247
1281
|
</div>
|
1248
|
-
<div class="card
|
1249
|
-
<
|
1250
|
-
<
|
1251
|
-
<h4 class="card-title notoc">Warning card title</h4>
|
1252
|
-
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
1253
|
-
</div>
|
1282
|
+
<div class="card-body">
|
1283
|
+
<h4 class="card-title notoc">Warning card title</h4>
|
1284
|
+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
1254
1285
|
</div>
|
1255
|
-
<div class="card
|
1256
|
-
<
|
1257
|
-
|
1258
|
-
|
1259
|
-
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
1260
|
-
</div>
|
1286
|
+
<div class="card-footer r-text-200">
|
1287
|
+
<a class="card-link bs-warning font-weight-bold g-font-size-12 text-uppercase"
|
1288
|
+
href="javascript:(void)">Action · Footer Link
|
1289
|
+
</a>
|
1261
1290
|
</div>
|
1262
|
-
|
1263
|
-
|
1264
|
-
|
1265
|
-
|
1266
|
-
|
1267
|
-
</
|
1291
|
+
</div>
|
1292
|
+
</div>
|
1293
|
+
<div class="col-md-4 col-sm-4 col-xs-12">
|
1294
|
+
<div class="card mb-3" style="max-width: 20rem;">
|
1295
|
+
<div class="card-header text-white bg-danger">
|
1296
|
+
<h3 class="notoc">Header</h3>
|
1268
1297
|
</div>
|
1269
|
-
<div class="card
|
1270
|
-
<
|
1271
|
-
<
|
1272
|
-
|
1273
|
-
|
1274
|
-
|
1298
|
+
<div class="card-body">
|
1299
|
+
<h4 class="card-title notoc">Danger card title</h4>
|
1300
|
+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
1301
|
+
</div>
|
1302
|
+
<div class="card-footer r-text-200">
|
1303
|
+
<a class="card-link bs-danger font-weight-bold g-font-size-12 text-uppercase"
|
1304
|
+
href="javascript:(void)">Action · Footer Link
|
1305
|
+
</a>
|
1275
1306
|
</div>
|
1276
1307
|
</div>
|
1277
1308
|
</div>
|
1309
|
+
</div>
|
1278
1310
|
|
1279
|
-
|
1280
|
-
|
1281
|
-
|
1282
|
-
|
1283
|
-
|
1284
|
-
|
1285
|
-
|
1286
|
-
</
|
1287
|
-
<img style="height: 200px; width: 100%; display: block;" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22318%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20318%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_158bd1d28ef%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A16pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_158bd1d28ef%22%3E%3Crect%20width%3D%22318%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22129.359375%22%20y%3D%2297.35%22%3EImage%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Card image">
|
1288
|
-
<div class="card-body">
|
1289
|
-
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
1290
|
-
</div>
|
1291
|
-
<ul class="list-group list-group-flush">
|
1292
|
-
<li class="list-group-item">Cras justo odio</li>
|
1293
|
-
<li class="list-group-item">Dapibus ac facilisis</li>
|
1294
|
-
<li class="list-group-item">Vestibulum at eros</li>
|
1295
|
-
</ul>
|
1296
|
-
<div class="card-body">
|
1297
|
-
<a href="javascript:(void)" class="card-link">Card link</a>
|
1298
|
-
<a href="javascript:(void)" class="card-link">Another link</a>
|
1299
|
-
</div>
|
1300
|
-
<div class="card-footer text-muted">
|
1301
|
-
2 days ago
|
1302
|
-
</div>
|
1311
|
+
<div class="row">
|
1312
|
+
<div class="col-md-4 col-sm-4 col-xs-12">
|
1313
|
+
<div class="card mb-3" style="max-width: 20rem;">
|
1314
|
+
<h3 class="card-header notoc">Header</h3>
|
1315
|
+
<img style="height: 200px; width: 100%; display: block;" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22318%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20318%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_158bd1d28ef%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A16pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_158bd1d28ef%22%3E%3Crect%20width%3D%22318%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22129.359375%22%20y%3D%2297.35%22%3EImage%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Card image">
|
1316
|
+
<div class="card-body">
|
1317
|
+
<h5 class="card-title notoc">Special title treatment</h5>
|
1318
|
+
<h6 class="card-subtitle text-muted notoc">Support card subtitle</h6>
|
1303
1319
|
</div>
|
1304
|
-
|
1305
|
-
|
1306
|
-
|
1307
|
-
|
1308
|
-
|
1309
|
-
|
1310
|
-
|
1311
|
-
</
|
1320
|
+
|
1321
|
+
<div class="card-body">
|
1322
|
+
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
1323
|
+
</div>
|
1324
|
+
<ul class="list-group list-group-flush">
|
1325
|
+
<li class="list-group-item">Cras justo odio</li>
|
1326
|
+
<li class="list-group-item">Dapibus ac facilisis</li>
|
1327
|
+
<li class="list-group-item">Vestibulum at eros</li>
|
1328
|
+
</ul>
|
1329
|
+
<div class="card-body">
|
1330
|
+
<a href="javascript:(void)" class="card-link">Card link</a>
|
1331
|
+
<a href="javascript:(void)" class="card-link">Another link</a>
|
1332
|
+
</div>
|
1333
|
+
<div class="card-footer text-muted">
|
1334
|
+
2 days ago
|
1312
1335
|
</div>
|
1313
1336
|
</div>
|
1314
1337
|
</div>
|
1315
|
-
|
1316
1338
|
</div>
|
1339
|
+
|
1317
1340
|
</div>
|
1318
1341
|
++++
|
1319
1342
|
|
@@ -1329,32 +1352,39 @@ built with HTML, CSS, and JavaScript. They’re positioned over everything
|
|
1329
1352
|
else in the document and remove scroll from the <body> so that modal
|
1330
1353
|
content scrolls instead.
|
1331
1354
|
|
1332
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
1333
|
-
|
1355
|
+
pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
|
1356
|
+
link:{bs_doc_components_modal}[Bootstrap Docs {middot} Modal, {browser-window--new}]
|
1334
1357
|
|
1335
1358
|
.Modal types
|
1336
|
-
[cols="
|
1359
|
+
[cols="2a,8a,2a", options="header", width="100%", role="table-responsive-stacked-lg"]
|
1337
1360
|
|===============================================================================
|
1338
|
-
|Type |Description |Launch
|
1361
|
+
|Type |Description |Launch Example
|
1339
1362
|
|
1340
1363
|
|*Base*
|
1341
|
-
|
|
1342
|
-
|
1364
|
+
|Lauch the modal by clicking the button below. It will slide down and fade in
|
1365
|
+
from the top of the page.
|
1343
1366
|
|
|
1344
1367
|
++++
|
1345
|
-
<div class="ml-
|
1368
|
+
<div class="ml-0">
|
1346
1369
|
<!-- Button trigger modal -->
|
1347
|
-
<button type="button"
|
1348
|
-
|
1370
|
+
<button type="button"
|
1371
|
+
class="btn btn-primary btn-raised"
|
1372
|
+
data-toggle="modal"
|
1373
|
+
data-target="#exampleSimpleModal">
|
1374
|
+
Launch Example
|
1349
1375
|
</button>
|
1350
1376
|
</div>
|
1351
1377
|
|
1352
1378
|
<!-- Modal -->
|
1353
|
-
<div
|
1354
|
-
|
1379
|
+
<div id="exampleSimpleModal"
|
1380
|
+
class="modal fade top"
|
1381
|
+
tabindex="-1"
|
1382
|
+
role="dialog"
|
1383
|
+
aria-labelledby="exampleSimpleModalLabel" aria-hidden="true">
|
1384
|
+
<div class="modal-dialog">
|
1355
1385
|
<div class="modal-content">
|
1356
1386
|
<div class="modal-header">
|
1357
|
-
<h5 class="modal-title notoc"
|
1387
|
+
<h5 id="exampleSimpleModalLabel" class="modal-title notoc">Modal title</h5>
|
1358
1388
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
1359
1389
|
<span aria-hidden="true">×</span>
|
1360
1390
|
</button>
|
@@ -1363,8 +1393,51 @@ down and fade in from the top of the page.
|
|
1363
1393
|
<p>Modal body text goes here.</p>
|
1364
1394
|
</div>
|
1365
1395
|
<div class="modal-footer">
|
1366
|
-
<button type="button" class="btn btn-
|
1367
|
-
<button type="button" class="btn btn-
|
1396
|
+
<button type="button" class="btn btn-primary btn-flex btn-raised mr-2">Do nothing</button>
|
1397
|
+
<button type="button" class="btn btn-secondary btn-flex btn-raised" data-dismiss="modal">Close</button>
|
1398
|
+
</div>
|
1399
|
+
</div>
|
1400
|
+
</div>
|
1401
|
+
</div>
|
1402
|
+
++++
|
1403
|
+
|
1404
|
+
|*Static backdrop*
|
1405
|
+
|This model is set to *static* and is will *not* close when clicking outside
|
1406
|
+
it (the backdrop).
|
1407
|
+
|
|
1408
|
+
++++
|
1409
|
+
<div class="ml-0">
|
1410
|
+
<!-- Button trigger modal -->
|
1411
|
+
<button type="button"
|
1412
|
+
class="btn btn-primary btn-raised"
|
1413
|
+
data-toggle="modal"
|
1414
|
+
data-target="#exampleStaticModal">
|
1415
|
+
Launch Example
|
1416
|
+
</button>
|
1417
|
+
</div>
|
1418
|
+
|
1419
|
+
<!-- Modal -->
|
1420
|
+
<div id="exampleStaticModal"
|
1421
|
+
class="modal fade"
|
1422
|
+
tabindex="-1"
|
1423
|
+
role="dialog"
|
1424
|
+
aria-labelledby="exampleStaticModalLabel" aria-hidden="true"
|
1425
|
+
data-keyboard="false"
|
1426
|
+
data-backdrop="static">
|
1427
|
+
<div class="modal-dialog">
|
1428
|
+
<div class="modal-content">
|
1429
|
+
<div class="modal-header">
|
1430
|
+
<h5 id="exampleStatcModalLabel" class="modal-title notoc">Modal title</h5>
|
1431
|
+
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
1432
|
+
<span aria-hidden="true">×</span>
|
1433
|
+
</button>
|
1434
|
+
</div>
|
1435
|
+
<div class="modal-body">
|
1436
|
+
<p>Modal body text goes here.</p>
|
1437
|
+
</div>
|
1438
|
+
<div class="modal-footer">
|
1439
|
+
<button type="button" class="btn btn-primary btn-flex btn-raised mr-2">Do nothing</button>
|
1440
|
+
<button type="button" class="btn btn-secondary btn-flex btn-raised" data-dismiss="modal">Close</button>
|
1368
1441
|
</div>
|
1369
1442
|
</div>
|
1370
1443
|
</div>
|
@@ -1377,33 +1450,57 @@ independent of the page itself. Try the demo and resize your browser for
|
|
1377
1450
|
the height.
|
1378
1451
|
|
|
1379
1452
|
++++
|
1380
|
-
<div class="ml-
|
1453
|
+
<div class="ml-0">
|
1381
1454
|
<!-- Button trigger modal -->
|
1382
|
-
<button type="button"
|
1383
|
-
|
1455
|
+
<button type="button"
|
1456
|
+
class="btn btn-primary btn-raised"
|
1457
|
+
data-toggle="modal"
|
1458
|
+
data-target="#exampleModalLong">
|
1459
|
+
Launch Example
|
1384
1460
|
</button>
|
1385
1461
|
</div>
|
1386
1462
|
|
1387
1463
|
<!-- Modal -->
|
1388
|
-
<div
|
1389
|
-
|
1464
|
+
<div
|
1465
|
+
id="exampleModalLong"
|
1466
|
+
class="modal fade"
|
1467
|
+
tabindex="-1"
|
1468
|
+
role="dialog"
|
1469
|
+
aria-labelledby="exampleModalLongTitle" aria-hidden="true">
|
1470
|
+
<div class="modal-dialog">
|
1390
1471
|
<div class="modal-content">
|
1391
1472
|
<div class="modal-header">
|
1392
|
-
<h5 class="modal-title notoc"
|
1473
|
+
<h5 id="exampleModalLongTitle" class="modal-title notoc">The Extremes of Good and Evil</h5>
|
1393
1474
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
1394
1475
|
<span aria-hidden="true">×</span>
|
1395
1476
|
</button>
|
1396
1477
|
</div>
|
1397
1478
|
<div class="modal-body">
|
1398
|
-
<
|
1399
|
-
<h6 class="notoc category text-gray mb-3">Cicero, Paragraph 1.10.33 · Translation by H. Rackham, Issue 1914 - De Finibus</h6>
|
1400
|
-
<p class="card-description scale-description r-text-200">
|
1479
|
+
<p>
|
1401
1480
|
On the other hand, we denounce with righteous indignation and dislike men who
|
1402
1481
|
are so beguiled and demoralized by the charms of pleasure of the moment, so
|
1403
1482
|
blinded by desire, that they cannot foresee the pain and trouble that are
|
1404
1483
|
bound to ensue; and equal blame belongs to those who fail in their duty through
|
1405
1484
|
weakness of will, which is the same as saying through shrinking from toil and pain.
|
1406
|
-
|
1485
|
+
</p>
|
1486
|
+
<p>
|
1487
|
+
These cases are perfectly simple and easy to distinguish. In a free hour, when
|
1488
|
+
our power of choice is untrammelled and when nothing prevents our being able to
|
1489
|
+
do what we like best, every pleasure is to be welcomed and every pain avoided.
|
1490
|
+
But in certain circumstances and owing to the claims of duty or the obligations
|
1491
|
+
of business is will frequently occur that pleasures have to be repudiated and
|
1492
|
+
annoyances accepted. The wise man therefore always holds in these matters to
|
1493
|
+
this principle of selection: he rejects pleasures to secure other greater
|
1494
|
+
pleasures, or else he endures pains to avoid worse pains.
|
1495
|
+
</p>
|
1496
|
+
<p>
|
1497
|
+
On the other hand, we denounce with righteous indignation and dislike men who
|
1498
|
+
are so beguiled and demoralized by the charms of pleasure of the moment, so
|
1499
|
+
blinded by desire, that they cannot foresee the pain and trouble that are
|
1500
|
+
bound to ensue; and equal blame belongs to those who fail in their duty through
|
1501
|
+
weakness of will, which is the same as saying through shrinking from toil and pain.
|
1502
|
+
</p>
|
1503
|
+
<p>
|
1407
1504
|
These cases are perfectly simple and easy to distinguish. In a free hour, when
|
1408
1505
|
our power of choice is untrammelled and when nothing prevents our being able to
|
1409
1506
|
do what we like best, every pleasure is to be welcomed and every pain avoided.
|
@@ -1415,253 +1512,736 @@ the height.
|
|
1415
1512
|
</p>
|
1416
1513
|
</div>
|
1417
1514
|
<div class="modal-footer">
|
1418
|
-
<button type="button" class="btn btn-
|
1419
|
-
<button type="button" class="btn btn-
|
1515
|
+
<button type="button" class="btn btn-primary btn-flex btn-raised mr-2">Do nothing</button>
|
1516
|
+
<button type="button" class="btn btn-secondary btn-flex btn-raised" data-dismiss="modal">Close</button>
|
1420
1517
|
</div>
|
1421
1518
|
</div>
|
1422
1519
|
</div>
|
1423
1520
|
</div>
|
1424
1521
|
++++
|
1425
1522
|
|
1426
|
-
|*
|
1427
|
-
|
|
1523
|
+
|*Scrollable long content*
|
1524
|
+
|It#s also possible to create a scrollable modal that allows scroll the
|
1525
|
+
modal body. Try the demo and scroll the content.
|
1428
1526
|
|
|
1429
1527
|
++++
|
1430
|
-
<div class="ml-
|
1528
|
+
<div class="ml-0">
|
1431
1529
|
<!-- Button trigger modal -->
|
1432
|
-
<button type="button"
|
1433
|
-
|
1530
|
+
<button type="button"
|
1531
|
+
class="btn btn-primary btn-raised"
|
1532
|
+
data-toggle="modal"
|
1533
|
+
data-target="#exampleModalLongScrollable">
|
1534
|
+
Launch Example
|
1434
1535
|
</button>
|
1435
1536
|
</div>
|
1436
1537
|
|
1437
1538
|
<!-- Modal -->
|
1438
|
-
<div
|
1439
|
-
|
1539
|
+
<div
|
1540
|
+
id="exampleModalLongScrollable"
|
1541
|
+
class="modal fade"
|
1542
|
+
tabindex="-1"
|
1543
|
+
role="dialog"
|
1544
|
+
aria-labelledby="exampleModalLongScrollableTitle" aria-hidden="true">
|
1545
|
+
<div class="modal-dialog modal-dialog-scrollable">
|
1440
1546
|
<div class="modal-content">
|
1441
1547
|
<div class="modal-header">
|
1442
|
-
<h5 class="modal-title notoc"
|
1548
|
+
<h5 id="exampleModalLongScrollableTitle" class="modal-title notoc">The Extremes of Good and Evil</h5>
|
1443
1549
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
1444
1550
|
<span aria-hidden="true">×</span>
|
1445
1551
|
</button>
|
1446
1552
|
</div>
|
1447
1553
|
<div class="modal-body">
|
1448
|
-
|
1449
|
-
|
1450
|
-
|
1554
|
+
<p>
|
1555
|
+
On the other hand, we denounce with righteous indignation and dislike men who
|
1556
|
+
are so beguiled and demoralized by the charms of pleasure of the moment, so
|
1557
|
+
blinded by desire, that they cannot foresee the pain and trouble that are
|
1558
|
+
bound to ensue; and equal blame belongs to those who fail in their duty through
|
1559
|
+
weakness of will, which is the same as saying through shrinking from toil and pain.
|
1560
|
+
</p>
|
1561
|
+
<p>
|
1562
|
+
These cases are perfectly simple and easy to distinguish. In a free hour, when
|
1563
|
+
our power of choice is untrammelled and when nothing prevents our being able to
|
1564
|
+
do what we like best, every pleasure is to be welcomed and every pain avoided.
|
1565
|
+
But in certain circumstances and owing to the claims of duty or the obligations
|
1566
|
+
of business is will frequently occur that pleasures have to be repudiated and
|
1567
|
+
annoyances accepted. The wise man therefore always holds in these matters to
|
1568
|
+
this principle of selection: he rejects pleasures to secure other greater
|
1569
|
+
pleasures, or else he endures pains to avoid worse pains.
|
1570
|
+
</p>
|
1571
|
+
<p>
|
1572
|
+
On the other hand, we denounce with righteous indignation and dislike men who
|
1573
|
+
are so beguiled and demoralized by the charms of pleasure of the moment, so
|
1574
|
+
blinded by desire, that they cannot foresee the pain and trouble that are
|
1575
|
+
bound to ensue; and equal blame belongs to those who fail in their duty through
|
1576
|
+
weakness of will, which is the same as saying through shrinking from toil and pain.
|
1577
|
+
</p>
|
1578
|
+
<p>
|
1579
|
+
These cases are perfectly simple and easy to distinguish. In a free hour, when
|
1580
|
+
our power of choice is untrammelled and when nothing prevents our being able to
|
1581
|
+
do what we like best, every pleasure is to be welcomed and every pain avoided.
|
1582
|
+
But in certain circumstances and owing to the claims of duty or the obligations
|
1583
|
+
of business is will frequently occur that pleasures have to be repudiated and
|
1584
|
+
annoyances accepted. The wise man therefore always holds in these matters to
|
1585
|
+
this principle of selection: he rejects pleasures to secure other greater
|
1586
|
+
pleasures, or else he endures pains to avoid worse pains.
|
1587
|
+
</p>
|
1451
1588
|
</div>
|
1452
1589
|
<div class="modal-footer">
|
1453
|
-
<button type="button" class="btn btn-
|
1454
|
-
<button type="button" class="btn btn-
|
1590
|
+
<button type="button" class="btn btn-primary btn-flex btn-raised mr-2">Do nothing</button>
|
1591
|
+
<button type="button" class="btn btn-secondary btn-flex btn-raised" data-dismiss="modal">Close</button>
|
1455
1592
|
</div>
|
1456
1593
|
</div>
|
1457
1594
|
</div>
|
1458
1595
|
</div>
|
1459
1596
|
++++
|
1460
1597
|
|
1461
|
-
|
1462
|
-
|
1463
|
-
|To save space on forms, dialogs can be part of a modal.
|
1598
|
+
|*Vertically centered*
|
1599
|
+
|For important messages, center the modal.
|
1464
1600
|
|
|
1465
1601
|
++++
|
1466
|
-
<div class="ml-
|
1602
|
+
<div class="ml-0">
|
1467
1603
|
<!-- Button trigger modal -->
|
1468
|
-
<button type="button"
|
1469
|
-
|
1604
|
+
<button type="button"
|
1605
|
+
class="btn btn-primary btn-raised"
|
1606
|
+
data-toggle="modal" data-target="#exampleModalVerticalCenter">
|
1607
|
+
Launch Example
|
1470
1608
|
</button>
|
1471
1609
|
</div>
|
1472
1610
|
|
1473
|
-
|
1474
|
-
|
1475
|
-
|
1611
|
+
<!-- Modal -->
|
1612
|
+
<div id="exampleModalVerticalCenter"
|
1613
|
+
class="modal fade"
|
1614
|
+
tabindex="-1"
|
1615
|
+
role="dialog"
|
1616
|
+
aria-labelledby="exampleModalVerticalCenterTitle" aria-hidden="true">
|
1617
|
+
<div class="modal-dialog modal-dialog-centered">
|
1476
1618
|
<div class="modal-content">
|
1477
|
-
|
1478
|
-
|
1479
|
-
<button type="button" class="close
|
1480
|
-
|
1619
|
+
<div class="modal-header">
|
1620
|
+
<h5 id="exampleModalVerticalCenterTitle" class="modal-title notoc">Modal title</h5>
|
1621
|
+
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
1622
|
+
<span aria-hidden="true">×</span>
|
1481
1623
|
</button>
|
1482
|
-
<h4 class="title notoc"><i class="fa fa-pencil"></i> Contact form</h4>
|
1483
1624
|
</div>
|
1484
|
-
|
1485
|
-
|
1486
|
-
|
1487
|
-
|
1488
|
-
|
1489
|
-
|
1490
|
-
</
|
1491
|
-
<
|
1492
|
-
<i class="fa fa-lock prefix"></i>
|
1493
|
-
<input type="password" id="form20" class="form-control">
|
1494
|
-
<label for="form20">Your email</label>
|
1495
|
-
</div>
|
1496
|
-
<div class="md-form form-sm">
|
1497
|
-
<i class="fa fa-tag prefix"></i>
|
1498
|
-
<input type="text" id="form21" class="form-control">
|
1499
|
-
<label for="form21">Subject</label>
|
1500
|
-
</div>
|
1501
|
-
<div class="md-form form-sm">
|
1502
|
-
<i class="fa fa-pencil prefix"></i>
|
1503
|
-
<textarea type="text" id="form8" class="md-textarea form-control mb-0"></textarea>
|
1504
|
-
<label for="form8">Your message</label>
|
1505
|
-
</div>
|
1506
|
-
<div class="text-center mt-1-half">
|
1507
|
-
<button class="btn btn-info mb-2 waves-effect waves-light">Send <i class="fa fa-send ml-1"></i></button>
|
1508
|
-
</div>
|
1625
|
+
<div class="modal-body">
|
1626
|
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
|
1627
|
+
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
|
1628
|
+
voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
|
1629
|
+
</div>
|
1630
|
+
<div class="modal-footer">
|
1631
|
+
<button type="button" class="btn btn-primary btn-flex btn-raised mr-2">Do nothing</button>
|
1632
|
+
<button type="button" class="btn btn-secondary btn-flex btn-raised" data-dismiss="modal">Close</button>
|
1509
1633
|
</div>
|
1510
1634
|
</div>
|
1511
|
-
<!--/.Content-->
|
1512
1635
|
</div>
|
1513
1636
|
</div>
|
1514
1637
|
++++
|
1515
1638
|
|
1516
|
-
|*Fluid*
|
1517
|
-
|For e.g larger summaries, a vertical fluid modal can be used for that.
|
1518
|
-
|
|
1519
|
-
++++
|
1520
|
-
<div class="ml-2 mb-5">
|
1521
|
-
<!-- Button trigger modal -->
|
1522
|
-
<button type="button" class="btn btn-primary btn-round btn-raised" data-toggle="modal" data-target="#fluidModalRightSuccess">
|
1523
|
-
Launch
|
1524
|
-
</button>
|
1525
|
-
</div>
|
1526
|
-
|
1527
|
-
<!-- Full Height Modal Right Success-->
|
1528
|
-
<div class="modal fade right" id="fluidModalRightSuccess" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
1529
|
-
<div class="modal-dialog modal-full-height modal-right modal-notify modal-success" role="document">
|
1530
|
-
<!--Content-->
|
1531
|
-
<div class="modal-content">
|
1532
|
-
<!--Header-->
|
1533
|
-
<div class="modal-header">
|
1534
|
-
<p class="heading lead">Modal Success</p>
|
1535
|
-
|
1536
|
-
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
1537
|
-
<span aria-hidden="true" class="white-text">×</span>
|
1538
|
-
</button>
|
1539
|
-
</div>
|
1540
|
-
|
1541
|
-
<!--Body-->
|
1542
|
-
<div class="modal-body">
|
1543
|
-
<div class="text-center">
|
1544
|
-
<i class="fa fa-check fa-4x mb-1 animated rotateIn"></i>
|
1545
|
-
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione fuga, enim, ab officiis totam.</p>
|
1546
|
-
</div>
|
1547
|
-
<ul class="list-group z-depth-0">
|
1548
|
-
<li class="list-group-item justify-content-between">
|
1549
|
-
Cras justo odio
|
1550
|
-
<span class="badge badge-primary badge-pill">14</span>
|
1551
|
-
</li>
|
1552
|
-
<li class="list-group-item justify-content-between">
|
1553
|
-
Dapibus ac facilisis in
|
1554
|
-
<span class="badge badge-primary badge-pill">2</span>
|
1555
|
-
</li>
|
1556
|
-
<li class="list-group-item justify-content-between">
|
1557
|
-
Morbi leo risus
|
1558
|
-
<span class="badge badge-primary badge-pill">1</span>
|
1559
|
-
</li>
|
1560
|
-
<li class="list-group-item justify-content-between">
|
1561
|
-
Cras justo odio
|
1562
|
-
<span class="badge badge-primary badge-pill">14</span>
|
1563
|
-
</li>
|
1564
|
-
<li class="list-group-item justify-content-between">
|
1565
|
-
Dapibus ac facilisis in
|
1566
|
-
<span class="badge badge-primary badge-pill">2</span>
|
1567
|
-
</li>
|
1568
|
-
<li class="list-group-item justify-content-between">
|
1569
|
-
Morbi leo risus
|
1570
|
-
<span class="badge badge-primary badge-pill">1</span>
|
1571
|
-
</li>
|
1572
|
-
</ul>
|
1573
|
-
</div>
|
1574
|
-
|
1575
|
-
<!--Footer-->
|
1576
|
-
<div class="modal-footer">
|
1577
|
-
<a type="button" class="btn btn-primary-modal">Get it now <i class="fa fa-diamond ml-1"></i></a>
|
1578
|
-
<a type="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">No, thanks</a>
|
1579
|
-
</div>
|
1580
|
-
</div>
|
1581
|
-
<!--/.Content-->
|
1582
|
-
</div>
|
1583
|
-
</div>
|
1584
|
-
<!-- Full Height Modal Right Success-->
|
1585
|
-
++++
|
1586
|
-
|
1587
1639
|
|*Tooltips and Popovers*
|
1588
1640
|
|Tooltips and popovers can be placed within modals as needed. When modals are
|
1589
1641
|
closed, any tooltips and popovers within are also automatically dismissed.
|
1590
1642
|
|
|
1591
1643
|
++++
|
1592
|
-
<div class="ml-
|
1644
|
+
<div class="ml-0">
|
1593
1645
|
<!-- Button trigger modal -->
|
1594
|
-
<button type="button"
|
1595
|
-
|
1646
|
+
<button type="button"
|
1647
|
+
class="btn btn-primary btn-raised"
|
1648
|
+
data-toggle="modal"
|
1649
|
+
data-target="#exampleModalTooltip">
|
1650
|
+
Launch Example
|
1596
1651
|
</button>
|
1597
1652
|
</div>
|
1598
1653
|
|
1599
1654
|
<!-- Modal -->
|
1600
|
-
<div
|
1601
|
-
|
1655
|
+
<div id="exampleModalTooltip"
|
1656
|
+
class="modal fade"
|
1657
|
+
tabindex="-1"
|
1658
|
+
role="dialog"
|
1659
|
+
aria-labelledby="exampleModalTooltipTitle" aria-hidden="true">
|
1660
|
+
<div class="modal-dialog modal-dialog-centered">
|
1602
1661
|
<div class="modal-content">
|
1603
1662
|
<div class="modal-header">
|
1604
|
-
<h5 class="modal-title notoc"
|
1663
|
+
<h5 id="exampleModalTooltipTitle" class="modal-title notoc">Modal title</h5>
|
1605
1664
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
1606
1665
|
<span aria-hidden="true">×</span>
|
1607
1666
|
</button>
|
1608
1667
|
</div>
|
1609
1668
|
<div class="modal-body">
|
1610
|
-
<h5>Popover in a modal</h5>
|
1611
|
-
<p>This <a href="#" role="button" class="btn btn-
|
1669
|
+
<h5 class="notoc">Popover in a modal</h5>
|
1670
|
+
<p>This <a href="#" role="button" class="btn btn-primary btn-raised popover-test" data-toggle="popover" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on hover or click.</p>
|
1612
1671
|
<hr>
|
1613
|
-
<h5>Tooltips in a modal</h5>
|
1672
|
+
<h5 class="notoc">Tooltips in a modal</h5>
|
1614
1673
|
<p><a href="javascript:(void)" class="tooltip-test" data-toggle="tooltip" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" data-toggle="tooltip" title="Tooltip">that link</a> have tooltips on hover.</p>
|
1615
1674
|
</div>
|
1616
1675
|
<div class="modal-footer">
|
1617
|
-
<button type="button" class="btn btn-
|
1618
|
-
<button type="button" class="btn btn-
|
1676
|
+
<button type="button" class="btn btn-primary btn-flex btn-raised mr-2">Do nothing</button>
|
1677
|
+
<button type="button" class="btn btn-secondary btn-flex btn-raised" data-dismiss="modal">Close</button>
|
1619
1678
|
</div>
|
1620
1679
|
</div>
|
1621
1680
|
</div>
|
1622
1681
|
</div>
|
1623
1682
|
++++
|
1624
|
-
|
1625
1683
|
|===============================================================================
|
1626
1684
|
|
1627
|
-
|
1685
|
+
.Base Modal example
|
1686
|
+
[source, html, role="noclip"]
|
1687
|
+
----
|
1688
|
+
<!-- Trigger Button (modal) -->
|
1689
|
+
<div class="ml-0">
|
1690
|
+
<button type="button"
|
1691
|
+
class="btn btn-primary btn-raised"
|
1692
|
+
data-toggle="modal"
|
1693
|
+
data-target="#exampleSimpleModal">
|
1694
|
+
Launch Example
|
1695
|
+
</button>
|
1696
|
+
</div>
|
1628
1697
|
|
1629
|
-
|
1630
|
-
|
1631
|
-
|
1698
|
+
<!-- Modal -->
|
1699
|
+
<div id="exampleSimpleModal"
|
1700
|
+
class="modal fade top"
|
1701
|
+
tabindex="-1"
|
1702
|
+
role="dialog"
|
1703
|
+
aria-labelledby="exampleSimpleModalLabel"
|
1704
|
+
aria-hidden="true">
|
1705
|
+
<div class="modal-dialog">
|
1706
|
+
<div class="modal-content">
|
1707
|
+
<div class="modal-header">
|
1708
|
+
<h5 id="exampleSimpleModalLabel" class="modal-title notoc">Modal title</h5>
|
1709
|
+
<button
|
1710
|
+
type="button"
|
1711
|
+
class="close"
|
1712
|
+
data-dismiss="modal"
|
1713
|
+
aria-label="Close">
|
1714
|
+
<span aria-hidden="true">×</span>
|
1715
|
+
</button>
|
1716
|
+
</div>
|
1717
|
+
<div class="modal-body">
|
1718
|
+
<p>Modal body text goes here.</p>
|
1719
|
+
</div>
|
1720
|
+
<div class="modal-footer">
|
1721
|
+
<button type="button"
|
1722
|
+
class="btn btn-primary btn-flex btn-raised mr-2"> Do nothing
|
1723
|
+
</button>
|
1724
|
+
<button
|
1725
|
+
type="button"
|
1726
|
+
class="btn btn-secondary btn-flex btn-raised"
|
1727
|
+
data-dismiss="modal"> Close
|
1728
|
+
</button>
|
1729
|
+
</div>
|
1730
|
+
</div>
|
1731
|
+
</div>
|
1732
|
+
</div>
|
1733
|
+
----
|
1734
|
+
|
1735
|
+
=== Popovers and Tooltips
|
1632
1736
|
|
1633
|
-
|
1737
|
+
Popovers and Tooltips rely on the 3rd party library __Popper.js__ for positioning.
|
1738
|
+
To make them properly positioned, the Javascript library `popper.min.js` has to
|
1739
|
+
be included before `bootstrap.js` in order to make popovers and tooltips to work.
|
1634
1740
|
|
1635
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
1636
|
-
|
1741
|
+
pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
|
1742
|
+
link:{bs_doc_components_popovers}[Bootstrap Docs {middot} Popovers, {browser-window--new}]
|
1743
|
+
|
1744
|
+
pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
|
1745
|
+
link:{bs_doc_components_tooltips}[Bootstrap Docs {middot} Tooltips, {browser-window--new}]
|
1746
|
+
|
1747
|
+
NOTE: Popovers and Tooltips require the BS tooltip plugin as a dependency.
|
1637
1748
|
|
1638
1749
|
++++
|
1639
1750
|
<div class="doc-example mb-3">
|
1640
|
-
<
|
1641
|
-
|
1642
|
-
|
1643
|
-
|
1644
|
-
|
1751
|
+
<div class="row mb-5">
|
1752
|
+
<div class="col-md-6">
|
1753
|
+
<h5 class="mb-5 notoc">Popovers</h5>
|
1754
|
+
<button type="button" class="btn btn-primary btn-raised" title="Popover Title" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Top</button>
|
1755
|
+
<button type="button" class="btn btn-primary btn-raised" title="Popover Title" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Bottom</button>
|
1756
|
+
<button type="button" class="btn btn-primary btn-raised" title="Popover Title" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Right</button>
|
1757
|
+
<button type="button" class="btn btn-primary btn-raised" title="Popover Title" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Left</button>
|
1758
|
+
</div>
|
1759
|
+
<div class="col-md-6">
|
1760
|
+
<h5 class="mb-5 notoc">Tooltips</h5>
|
1761
|
+
<button type="button" class="btn btn-primary btn-raised" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Top</button>
|
1762
|
+
<button type="button" class="btn btn-primary btn-raised" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Bottom</button>
|
1763
|
+
<button type="button" class="btn btn-primary btn-raised" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Right</button>
|
1764
|
+
<button type="button" class="btn btn-primary btn-raised" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Left</button>
|
1765
|
+
</div>
|
1766
|
+
</div>
|
1645
1767
|
</div>
|
1646
1768
|
++++
|
1647
1769
|
|
1648
|
-
|
1770
|
+
.Example for Popovers and Tooltips
|
1771
|
+
[source, html, role="noclip"]
|
1772
|
+
----
|
1773
|
+
<div class="row mb-5">
|
1774
|
+
<div class="col-md-6">
|
1775
|
+
<h5 class="mb-5 notoc">Popovers</h5>
|
1776
|
+
<button type="button" class="btn btn-primary btn-raised"
|
1777
|
+
title="Popover Title" data-container="body"
|
1778
|
+
data-toggle="popover" data-placement="top"
|
1779
|
+
data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Top
|
1780
|
+
</button>
|
1781
|
+
...
|
1782
|
+
</div>
|
1783
|
+
<div class="col-md-6">
|
1784
|
+
<h5 class="mb-5 notoc">Tooltips</h5>
|
1785
|
+
<button type="button" class="btn btn-primary btn-raised"
|
1786
|
+
data-toggle="tooltip" data-placement="top"
|
1787
|
+
title="Tooltip on top">Top
|
1788
|
+
</button>
|
1789
|
+
...
|
1790
|
+
</div>
|
1791
|
+
</div>
|
1792
|
+
----
|
1649
1793
|
|
1650
|
-
|
1651
|
-
include popper.min.js before bootstrap.js or use bootstrap.bundle.min.js or
|
1652
|
-
bootstrap.bundle.js which contains Popper.js in order for tooltips to work.
|
1794
|
+
== Bootstrap Material Design
|
1653
1795
|
|
1654
|
-
|
1655
|
-
|
1796
|
+
lorem:sentences[5]
|
1797
|
+
|
1798
|
+
=== MD Color Palette
|
1799
|
+
|
1800
|
+
The MD color palette comprises primary and accent colors that can be used for
|
1801
|
+
illustration or to develop your brand colors. They’ve been designed to work
|
1802
|
+
harmoniously with each other.
|
1803
|
+
|
1804
|
+
The color palette starts with primary colors and fills in the spectrum to
|
1805
|
+
create a complete and usable palette for Android, Web, and iOS. Google
|
1806
|
+
suggests using the 500 colors as the primary colors in your app and the
|
1807
|
+
other colors as accents colors.
|
1808
|
+
|
1809
|
+
=== Red and Pink
|
1810
|
+
++++
|
1811
|
+
<div class="row col-list">
|
1812
|
+
<div class="color-palette col-lg-12">
|
1813
|
+
<div class="color-group col-lg-6">
|
1814
|
+
<ul>
|
1815
|
+
<li class="color main-color" style="background-color: #f44336;"> <span class="name light-strong">Red</span> <span class="shade light-strong">500</span> <span class="hex light-strong">#f44336</span> </li>
|
1816
|
+
<li class="color dark" style="background-color: #ffebee;"><span class="shade expanded">50</span><span class="hex">#ffebee</span> </li>
|
1817
|
+
<li class="color dark" style="background-color: #ffcdd2;"><span class="shade">100</span><span class="hex">#ffcdd2</span> </li>
|
1818
|
+
<li class="color dark" style="background-color: #ef9a9a"><span class="shade expanded">200</span><span class="hex">#ef9a9a</span> </li>
|
1819
|
+
<li class="color dark" style="background-color: #e57373;"><span class="shade">300</span><span class="hex">#e57373</span> </li>
|
1820
|
+
<li class="color" style="background-color: #ef5350;"><span class="shade expanded">400</span><span class="hex">#ef5350</span> </li>
|
1821
|
+
<li class="color" style="background-color: #f44336;"><span class="shade">500</span><span class="hex">#f44336</span> </li>
|
1822
|
+
<li class="color" style="background-color: #e53935;"><span class="shade expanded">600</span><span class="hex">#e53935</span> </li>
|
1823
|
+
<li class="color" style="background-color: #d32f2f;"><span class="shade">700</span><span class="hex">#d32f2f</span> </li>
|
1824
|
+
<li class="color" style="background-color: #c62828;"><span class="shade expanded">800</span><span class="hex">#c62828</span> </li>
|
1825
|
+
<li class="color" style="background-color: #b71c1c;"><span class="shade expanded">900</span><span class="hex">#b71c1c</span> </li>
|
1826
|
+
<li class="color dark divide" style="background-color: #ff8a80;"><span class="shade accent">A100</span><span class="hex">#ff8a80</span> </li>
|
1827
|
+
<li class="color light-strong" style="background-color: #ff5252;"><span class="shade accent expanded">A200</span><span class="hex">#ff5252</span> </li>
|
1828
|
+
<li class="color" style="background-color: #ff1744;"><span class="shade accent expanded">A400</span><span class="hex">#ff1744</span> </li>
|
1829
|
+
<li class="color" style="background-color: #d50000;"><span class="shade accent">A700</span><span class="hex">#d50000</span> </li>
|
1830
|
+
</ul>
|
1831
|
+
</div>
|
1832
|
+
<div class="color-group col-lg-6">
|
1833
|
+
<ul>
|
1834
|
+
<li class="color main-color" style="background-color: #E91E63;"> <span class="name light-strong">Pink</span> <span class="shade light-strong">500</span> <span class="hex light-strong">#e91e63</span> </li>
|
1835
|
+
<li class="color dark" style="background-color: #fce4ec;"><span class="shade expanded">50</span><span class="hex">#fce4ec</span> </li>
|
1836
|
+
<li class="color dark" style="background-color: #f8bbd0;"><span class="shade">100</span><span class="hex">#f8bbd0</span> </li>
|
1837
|
+
<li class="color dark" style="background-color: #f48fb1;"><span class="shade expanded">200</span><span class="hex">#f48fb1</span> </li>
|
1838
|
+
<li class="color light-strong" style="background-color: #f06292;"><span class="shade">300</span><span class="hex">#f06292</span> </li>
|
1839
|
+
<li class="color " style="background-color: #ec407a;"><span class="shade expanded">400</span><span class="hex">#ec407a</span> </li>
|
1840
|
+
<li class="color" style="background-color: #e91e63;"><span class="shade">500</span><span class="hex">#e91e63</span> </li>
|
1841
|
+
<li class="color" style="background-color: #d81b60;"><span class="shade expanded">600</span><span class="hex">#d81b60</span> </li>
|
1842
|
+
<li class="color" style="background-color: #c2185b;"><span class="shade">700</span><span class="hex">#c2185b</span> </li>
|
1843
|
+
<li class="color" style="background-color: #ad1457;"><span class="shade">800</span><span class="hex">#ad1457</span> </li>
|
1844
|
+
<li class="color" style="background-color: #880e4f;"><span class="shade">900</span><span class="hex">#880e4f</span> </li>
|
1845
|
+
<li class="color dark divide" style="background-color: #ff80ab;"><span class="shade accent">A100</span><span class="hex">#ff80ab</span> </li>
|
1846
|
+
<li class="color light-strong" style="background-color: #ff4081;"><span class="shade accent expanded">A200</span><span class="hex">#ff4081</span> </li>
|
1847
|
+
<li class="color" style="background-color: #f50057;"><span class="shade accent expanded">A400</span><span class="hex">#f50057</span> </li>
|
1848
|
+
<li class="color" style="background-color: #c51162;"><span class="shade accent">A700</span><span class="hex">#c51162</span> </li>
|
1849
|
+
</ul>
|
1850
|
+
</div>
|
1851
|
+
</div>
|
1852
|
+
</div>
|
1853
|
+
++++
|
1656
1854
|
|
1657
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
|
1658
|
-
Refer to: link:{bs_doc_components_tooltips}[Bootstrap Docs, window="_blank"].
|
1659
1855
|
|
1856
|
+
=== Purple and Deep Purple
|
1857
|
+
++++
|
1858
|
+
<div class="row col-list">
|
1859
|
+
<div class="color-palette col-lg-12">
|
1860
|
+
<div class="color-group col-lg-6">
|
1861
|
+
<ul>
|
1862
|
+
<li class="color main-color" style="background-color: #9c27b0;"> <span class="name">Purple</span> <span class="shade">500</span> <span class="hex">#9c27b0</span> </li>
|
1863
|
+
<li class="color dark" style="background-color: #f3e5f5;"><span class="shade expanded">50</span><span class="hex">#f3e5f5</span> </li>
|
1864
|
+
<li class="color dark" style="background-color: #e1bee7;"><span class="shade">100</span><span class="hex">#e1bee7</span> </li>
|
1865
|
+
<li class="color dark" style="background-color: #ce93d8;"><span class="shade expanded">200</span><span class="hex">#ce93d8</span> </li>
|
1866
|
+
<li class="color light-strong" style="background-color: #ba68c8;"><span class="shade">300</span><span class="hex">#ba68c8</span> </li>
|
1867
|
+
<li class="color light-strong" style="background-color: #ab47bc;"><span class="shade expanded">400</span><span class="hex">#ab47bc</span> </li>
|
1868
|
+
<li class="color" style="background-color: #9c27b0;"><span class="shade">500</span><span class="hex">#9c27b0</span> </li>
|
1869
|
+
<li class="color" style="background-color: #8e24aa;"><span class="shade expanded">600</span><span class="hex">#8e24aa</span> </li>
|
1870
|
+
<li class="color" style="background-color: #7b1fa2;"><span class="shade">700</span><span class="hex">#7b1fa2</span> </li>
|
1871
|
+
<li class="color" style="background-color: #6a1b9a;"><span class="shade expanded">800</span><span class="hex">#6a1b9a</span> </li>
|
1872
|
+
<li class="color" style="background-color: #4a148c;"><span class="shade expanded">900</span><span class="hex">#4a148c</span> </li>
|
1873
|
+
<li class="color dark divide" style="background-color: #ea80fc;"><span class="shade accent">A100</span><span class="hex">#ea80fc</span> </li>
|
1874
|
+
<li class="color light-strong" style="background-color: #e040fb;"><span class="shade accent expanded">A200</span><span class="hex">#e040fb</span> </li>
|
1875
|
+
<li class="color" style="background-color: #d500f9;"><span class="shade accent expanded">A400</span><span class="hex">#d500f9</span> </li>
|
1876
|
+
<li class="color" style="background-color: #aa00ff;"><span class="shade accent">A700</span><span class="hex">#aa00ff</span> </li>
|
1877
|
+
</ul>
|
1878
|
+
</div>
|
1879
|
+
<div class="color-group col-lg-6">
|
1880
|
+
<ul>
|
1881
|
+
<li class="color main-color" style="background-color: #673ab7;"> <span class="name">Deep Purple</span> <span class="shade">500</span> <span class="hex">#673ab7</span> </li>
|
1882
|
+
<li class="color dark" style="background-color: #ede7f6;"><span class="shade expanded">50</span><span class="hex">#ede7f6</span> </li>
|
1883
|
+
<li class="color dark" style="background-color: #d1c4e9;"><span class="shade">100</span><span class="hex">#d1c4e9</span> </li>
|
1884
|
+
<li class="color dark" style="background-color: #b39ddb;"><span class="shade expanded">200</span><span class="hex">#b39ddb</span> </li>
|
1885
|
+
<li class="color" style="background-color: #9575cd;"><span class="shade">300</span><span class="hex">#9575cd</span> </li>
|
1886
|
+
<li class="color" style="background-color: #7e57c2;"><span class="shade expanded">400</span><span class="hex">#7e57c2</span> </li>
|
1887
|
+
<li class="color" style="background-color: #673ab7;"><span class="shade">500</span><span class="hex">#673ab7</span> </li>
|
1888
|
+
<li class="color" style="background-color: #5e35b1;"><span class="shade expanded">600</span><span class="hex">#5e35b1</span> </li>
|
1889
|
+
<li class="color" style="background-color: #512da8;"><span class="shade">700</span><span class="hex">#512da8</span> </li>
|
1890
|
+
<li class="color" style="background-color: #4527a0;"><span class="shade expanded">800</span><span class="hex">#4527a0</span> </li>
|
1891
|
+
<li class="color" style="background-color: #311b92;"><span class="shade expanded">900</span><span class="hex">#311b92</span> </li>
|
1892
|
+
<li class="color dark divide" style="background-color: #b388ff;"><span class="shade accent">A100</span><span class="hex">#b388ff</span> </li>
|
1893
|
+
<li class="color light-strong" style="background-color: #7c4dff;"><span class="shade accent expanded">A200</span><span class="hex">#7c4dff</span> </li>
|
1894
|
+
<li class="color" style="background-color: #651fff;"><span class="shade accent expanded">A400</span><span class="hex">#651fff</span> </li>
|
1895
|
+
<li class="color" style="background-color: #6200ea;"><span class="shade accent">A700</span><span class="hex">#6200ea</span> </li>
|
1896
|
+
</ul>
|
1897
|
+
</div>
|
1898
|
+
</div>
|
1899
|
+
</div>
|
1660
1900
|
++++
|
1661
|
-
|
1662
|
-
|
1663
|
-
|
1664
|
-
|
1665
|
-
<
|
1901
|
+
|
1902
|
+
=== Indigo and Blue
|
1903
|
+
++++
|
1904
|
+
<div class="row col-list">
|
1905
|
+
<div class="color-palette col-lg-12">
|
1906
|
+
<div class="color-group col-lg-6">
|
1907
|
+
<ul>
|
1908
|
+
<li class="color main-color" style="background-color: #3f51b5;"> <span class="name">Indigo</span> <span class="shade">500</span> <span class="hex">#3f51b5</span> </li>
|
1909
|
+
<li class="color dark" style="background-color: #e8eaf6;"><span class="shade expanded">50</span><span class="hex">#e8eaf6</span> </li>
|
1910
|
+
<li class="color dark" style="background-color: #c5cae9;"><span class="shade">100</span><span class="hex">#c5cae9</span> </li>
|
1911
|
+
<li class="color dark" style="background-color: #9fa8da;"><span class="shade expanded">200</span><span class="hex">#9fa8da</span> </li>
|
1912
|
+
<li class="color" style="background-color: #7986cb;"><span class="shade">300</span><span class="hex">#7986cb</span> </li>
|
1913
|
+
<li class="color" style="background-color: #5c6bc0;"><span class="shade expanded">400</span><span class="hex">#5c6bc0</span> </li>
|
1914
|
+
<li class="color" style="background-color: #3f51b5;"><span class="shade">500</span><span class="hex">#3f51b5</span> </li>
|
1915
|
+
<li class="color" style="background-color: #3949ab;"><span class="shade expanded">600</span><span class="hex">#3949ab</span> </li>
|
1916
|
+
<li class="color" style="background-color: #303f9f;"><span class="shade">700</span><span class="hex">#303f9f</span> </li>
|
1917
|
+
<li class="color" style="background-color: #283593;"><span class="shade expanded">800</span><span class="hex">#283593</span> </li>
|
1918
|
+
<li class="color" style="background-color: #1a237e;"><span class="shade expanded">900</span><span class="hex">#1a237e</span> </li>
|
1919
|
+
<li class="color dark divide" style="background-color: #8c9eff;"><span class="shade accent">A100</span><span class="hex">#8c9eff</span> </li>
|
1920
|
+
<li class="color" style="background-color: #536dfe;"><span class="shade accent expanded">A200</span><span class="hex">#536dfe</span> </li>
|
1921
|
+
<li class="color" style="background-color: #3d5afe;"><span class="shade accent expanded">A400</span><span class="hex">#3d5afe</span> </li>
|
1922
|
+
<li class="color" style="background-color: #304ffe;"><span class="shade accent">A700</span><span class="hex">#304ffe</span> </li>
|
1923
|
+
</ul>
|
1924
|
+
</div>
|
1925
|
+
<div class="color-group col-lg-6">
|
1926
|
+
<ul>
|
1927
|
+
<li class="color main-color" style="background-color: #2196F3;"> <span class="name light-strong">Blue</span> <span class="shade light-strong">500</span> <span class="hex light-strong">#2196f3</span> </li>
|
1928
|
+
<li class="color dark" style="background-color: #e3f2fd;"><span class="shade expanded">50</span><span class="hex">#e3f2fd</span> </li>
|
1929
|
+
<li class="color dark" style="background-color: #bbdefb;"><span class="shade">100</span><span class="hex">#bbdefb</span> </li>
|
1930
|
+
<li class="color dark" style="background-color: #90caf9;"><span class="shade expanded">200</span><span class="hex">#90caf9</span> </li>
|
1931
|
+
<li class="color dark" style="background-color: #64b5f6;"><span class="shade">300</span><span class="hex">#64b5f6</span> </li>
|
1932
|
+
<li class="color dark" style="background-color: #42a5f5;"><span class="shade expanded">400</span><span class="hex">#42a5f5</span> </li>
|
1933
|
+
<li class="color light-strong" style="background-color: #2196f3;"><span class="shade">500</span><span class="hex">#2196f3</span> </li>
|
1934
|
+
<li class="color" style="background-color: #1e88e5;"><span class="shade expanded">600</span><span class="hex">#1e88e5</span> </li>
|
1935
|
+
<li class="color" style="background-color: #1976d2;"><span class="shade">700</span><span class="hex">#1976d2</span> </li>
|
1936
|
+
<li class="color" style="background-color: #1565c0;"><span class="shade expanded">800</span><span class="hex">#1565c0</span> </li>
|
1937
|
+
<li class="color" style="background-color: #0d47a1;"><span class="shade expanded">900</span><span class="hex">#0d47a1</span> </li>
|
1938
|
+
<li class="color dark divide" style="background-color: #82b1ff;"><span class="shade accent">A100</span><span class="hex">#82b1ff</span> </li>
|
1939
|
+
<li class="color light-strong" style="background-color: #448aff;"><span class="shade accent expanded">A200</span><span class="hex">#448aff</span> </li>
|
1940
|
+
<li class="color" style="background-color: #2979ff;"><span class="shade accent expanded">A400</span><span class="hex">#2979ff</span> </li>
|
1941
|
+
<li class="color" style="background-color: #2962ff;"><span class="shade accent">A700</span><span class="hex">#2962ff</span> </li>
|
1942
|
+
</ul>
|
1943
|
+
</div>
|
1944
|
+
</div>
|
1666
1945
|
</div>
|
1667
1946
|
++++
|
1947
|
+
|
1948
|
+
=== Light Blue and Cyan
|
1949
|
+
++++
|
1950
|
+
<div class="row col-list">
|
1951
|
+
<div class="color-palette col-lg-12">
|
1952
|
+
<div class="color-group col-lg-6">
|
1953
|
+
<ul>
|
1954
|
+
<li class="color main-color" style="background-color: #03a9f4;"> <span class="name dark">Light Blue</span> <span class="shade dark">500</span> <span class="hex dark">#03a9f4</span> </li>
|
1955
|
+
<li class="color dark" style="background-color: #e1f5fe;"><span class="shade expanded">50</span><span class="hex">#e1f5fe</span> </li>
|
1956
|
+
<li class="color dark" style="background-color: #b3e5fc;"><span class="shade">100</span><span class="hex">#b3e5fc</span> </li>
|
1957
|
+
<li class="color dark" style="background-color: #81d4fa;"><span class="shade expanded">200</span><span class="hex">#81d4fa</span> </li>
|
1958
|
+
<li class="color dark" style="background-color: #4fc3f7;"><span class="shade">300</span><span class="hex">#4fc3f7</span> </li>
|
1959
|
+
<li class="color dark" style="background-color: #29b6f6;"><span class="shade expanded">400</span><span class="hex">#29b6f6</span> </li>
|
1960
|
+
<li class="color dark" style="background-color: #03a9f4;"><span class="shade">500</span><span class="hex">#03a9f4</span> </li>
|
1961
|
+
<li class="color light-strong" style="background-color: #039be5;"><span class="shade expanded">600</span><span class="hex">#039be5</span> </li>
|
1962
|
+
<li class="color" style="background-color: #0288d1;"><span class="shade">700</span><span class="hex">#0288d1</span> </li>
|
1963
|
+
<li class="color" style="background-color: #0277bd;"><span class="shade expanded">800</span><span class="hex">#0277bd</span> </li>
|
1964
|
+
<li class="color" style="background-color: #01579b;"><span class="shade expanded">900</span><span class="hex">#01579b</span> </li>
|
1965
|
+
<li class="color dark divide" style="background-color: #80d8ff;"><span class="shade accent">A100</span><span class="hex">#80d8ff</span> </li>
|
1966
|
+
<li class="color dark" style="background-color: #40c4ff;"><span class="shade accent expanded">A200</span><span class="hex">#40c4ff</span> </li>
|
1967
|
+
<li class="color dark" style="background-color: #00b0ff;"><span class="shade accent expanded">A400</span><span class="hex">#00b0ff</span> </li>
|
1968
|
+
<li class="color light-strong" style="background-color: #0091ea;"><span class="shade accent">A700</span><span class="hex">#0091ea</span> </li>
|
1969
|
+
</ul>
|
1970
|
+
</div>
|
1971
|
+
<div class="color-group col-lg-6">
|
1972
|
+
<ul>
|
1973
|
+
<li class="color main-color" style="background-color: #00bcd4;"> <span class="name dark">Cyan</span> <span class="shade dark">500</span> <span class="hex dark">#00bcd4</span> </li>
|
1974
|
+
<li class="color dark" style="background-color: #e0f7fa;"><span class="shade expanded">50</span><span class="hex">#e0f7fa</span> </li>
|
1975
|
+
<li class="color dark" style="background-color: #b2ebf2;"><span class="shade">100</span><span class="hex">#b2ebf2</span> </li>
|
1976
|
+
<li class="color dark" style="background-color: #80deea;"><span class="shade expanded">200</span><span class="hex">#80deea</span> </li>
|
1977
|
+
<li class="color dark" style="background-color: #4dd0e1;"><span class="shade">300</span><span class="hex">#4dd0e1</span> </li>
|
1978
|
+
<li class="color dark" style="background-color: #26c6da;"><span class="shade expanded">400</span><span class="hex">#26c6da</span> </li>
|
1979
|
+
<li class="color dark" style="background-color: #00bcd4;"><span class="shade">500</span><span class="hex">#00bcd4</span> </li>
|
1980
|
+
<li class="color dark" style="background-color: #00acc1;"><span class="shade expanded">600</span><span class="hex">#00acc1</span> </li>
|
1981
|
+
<li class="color" style="background-color: #0097a7;"><span class="shade">700</span><span class="hex">#0097a7</span> </li>
|
1982
|
+
<li class="color" style="background-color: #00838f;"><span class="shade expanded">800</span><span class="hex">#00838f</span> </li>
|
1983
|
+
<li class="color" style="background-color: #006064;"><span class="shade expanded">900</span><span class="hex">#006064</span> </li>
|
1984
|
+
<li class="color dark divide" style="background-color: #84ffff;"><span class="shade accent">A100</span><span class="hex">#84ffff</span> </li>
|
1985
|
+
<li class="color dark" style="background-color: #18ffff;"><span class="shade accent expanded">A200</span><span class="hex">#18ffff</span> </li>
|
1986
|
+
<li class="color dark" style="background-color: #00e5ff;"><span class="shade accent expanded">A400</span><span class="hex">#00e5ff</span> </li>
|
1987
|
+
<li class="color dark" style="background-color: #00b8d4;"><span class="shade accent">A700</span><span class="hex">#00b8d4</span> </li>
|
1988
|
+
</ul>
|
1989
|
+
</div>
|
1990
|
+
</div>
|
1991
|
+
</div>
|
1992
|
+
++++
|
1993
|
+
|
1994
|
+
=== Teal and Green
|
1995
|
+
++++
|
1996
|
+
<div class="row col-list">
|
1997
|
+
<div class="color-palette col-lg-12">
|
1998
|
+
<div class="color-group col-lg-6">
|
1999
|
+
<ul>
|
2000
|
+
<li class="color main-color" style="background-color: #009688;"> <span class="name light-strong">Teal</span> <span class="shade light-strong">500</span> <span class="hex light-strong">#009688</span> </li>
|
2001
|
+
<li class="color dark" style="background-color: #e0f2f1;"><span class="shade expanded">50</span><span class="hex">#e0f2f1</span> </li>
|
2002
|
+
<li class="color dark" style="background-color: #b2dfdb;"><span class="shade">100</span><span class="hex">#b2dfdb</span> </li>
|
2003
|
+
<li class="color dark" style="background-color: #80cbc4;"><span class="shade expanded">200</span><span class="hex">#80cbc4</span> </li>
|
2004
|
+
<li class="color dark" style="background-color: #4db6ac;"><span class="shade">300</span><span class="hex">#4db6ac</span> </li>
|
2005
|
+
<li class="color dark" style="background-color: #26a69a;"><span class="shade expanded">400</span><span class="hex">#26a69a</span> </li>
|
2006
|
+
<li class="color light-strong" style="background-color: #009688;"><span class="shade">500</span><span class="hex">#009688</span> </li>
|
2007
|
+
<li class="color light-strong" style="background-color: #00897b;"><span class="shade expanded">600</span><span class="hex">#00897b</span> </li>
|
2008
|
+
<li class="color light-strong" style="background-color: #00796b;"><span class="shade">700</span><span class="hex">#00796b</span> </li>
|
2009
|
+
<li class="color" style="background-color: #00695c;"><span class="shade expanded">800</span><span class="hex">#00695c</span> </li>
|
2010
|
+
<li class="color" style="background-color: #004d40;"><span class="shade expanded">900</span><span class="hex">#004d40</span> </li>
|
2011
|
+
<li class="color dark divide" style="background-color: #a7ffeb;"><span class="shade accent">A100</span><span class="hex">#a7ffeb</span> </li>
|
2012
|
+
<li class="color dark" style="background-color: #64ffda;"><span class="shade accent expanded">A200</span><span class="hex">#64ffda</span> </li>
|
2013
|
+
<li class="color dark" style="background-color: #1de9b6;"><span class="shade accent expanded">A400</span><span class="hex">#1de9b6</span> </li>
|
2014
|
+
<li class="color dark" style="background-color: #00bfa5;"><span class="shade accent">A700</span><span class="hex">#00bfa5</span> </li>
|
2015
|
+
</ul>
|
2016
|
+
</div>
|
2017
|
+
<div class="color-group col-lg-6">
|
2018
|
+
<ul>
|
2019
|
+
<li class="color main-color" style="background-color: #4caf50;"> <span class="name dark">Green</span> <span class="shade dark">500</span> <span class="hex dark">#4caf50</span> </li>
|
2020
|
+
<li class="color dark" style="background-color: #e8f5e9;"><span class="shade expanded">50</span><span class="hex">#e8f5e9</span> </li>
|
2021
|
+
<li class="color dark" style="background-color: #c8e6c9;"><span class="shade">100</span><span class="hex">#c8e6c9</span> </li>
|
2022
|
+
<li class="color dark" style="background-color: #a5d6a7;"><span class="shade expanded">200</span><span class="hex">#a5d6a7</span> </li>
|
2023
|
+
<li class="color dark" style="background-color: #81c784;"><span class="shade">300</span><span class="hex">#81c784</span> </li>
|
2024
|
+
<li class="color dark" style="background-color: #66bb6a;"><span class="shade expanded">400</span><span class="hex">#66bb6a</span> </li>
|
2025
|
+
<li class="color dark" style="background-color: #4caf50;"><span class="shade">500</span><span class="hex">#4caf50</span> </li>
|
2026
|
+
<li class="color light-strong" style="background-color: #43a047;"><span class="shade expanded">600</span><span class="hex">#43a047</span> </li>
|
2027
|
+
<li class="color" style="background-color: #388e3c;"><span class="shade">700</span><span class="hex">#388e3c</span> </li>
|
2028
|
+
<li class="color" style="background-color: #2e7d32;"><span class="shade expanded">800</span><span class="hex">#2e7d32</span> </li>
|
2029
|
+
<li class="color" style="background-color: #1b5e20;"><span class="shade expanded">900</span><span class="hex">#1b5e20</span> </li>
|
2030
|
+
<li class="color dark divide" style="background-color: #b9f6ca;"><span class="shade accent">A100</span><span class="hex">#b9f6ca</span> </li>
|
2031
|
+
<li class="color dark" style="background-color: #69f0ae;"><span class="shade accent expanded">A200</span><span class="hex">#69f0ae</span> </li>
|
2032
|
+
<li class="color dark" style="background-color: #00e676;"><span class="shade accent expanded">A400</span><span class="hex">#00e676</span> </li>
|
2033
|
+
<li class="color dark" style="background-color: #00c853;"><span class="shade accent">A700</span><span class="hex">#00c853</span> </li>
|
2034
|
+
</ul>
|
2035
|
+
</div>
|
2036
|
+
</div>
|
2037
|
+
</div>
|
2038
|
+
++++
|
2039
|
+
|
2040
|
+
=== Light Green and Lime
|
2041
|
+
++++
|
2042
|
+
<div class="row col-list">
|
2043
|
+
<div class="color-palette col-lg-12">
|
2044
|
+
<div class="color-group col-lg-6">
|
2045
|
+
<ul>
|
2046
|
+
<li class="color main-color" style="background-color: #8bc34a;"> <span class="name dark">Light Green</span> <span class="shade dark">500</span> <span class="hex dark">#8bc34a</span> </li>
|
2047
|
+
<li class="color dark" style="background-color: #f1f8e9;"><span class="shade expanded">50</span><span class="hex">#f1f8e9</span> </li>
|
2048
|
+
<li class="color dark" style="background-color: #dcedc8;"><span class="shade">100</span><span class="hex">#dcedc8</span> </li>
|
2049
|
+
<li class="color dark" style="background-color: #c5e1a5;"><span class="shade expanded">200</span><span class="hex">#c5e1a5</span> </li>
|
2050
|
+
<li class="color dark" style="background-color: #aed581;"><span class="shade">300</span><span class="hex">#aed581</span> </li>
|
2051
|
+
<li class="color dark" style="background-color: #9ccc65;"><span class="shade expanded">400</span><span class="hex">#9ccc65</span> </li>
|
2052
|
+
<li class="color dark" style="background-color: #8bc34a;"><span class="shade">500</span><span class="hex">#8bc34a</span> </li>
|
2053
|
+
<li class="color dark" style="background-color: #7cb342;"><span class="shade expanded">600</span><span class="hex">#7cb342</span> </li>
|
2054
|
+
<li class="color light-strong" style="background-color: #689f38;"><span class="shade">700</span><span class="hex">#689f38</span> </li>
|
2055
|
+
<li class="color" style="background-color: #558b2f;"><span class="shade expanded">800</span><span class="hex">#558b2f</span> </li>
|
2056
|
+
<li class="color" style="background-color: #33691e;"><span class="shade expanded">900</span><span class="hex">#33691e</span> </li>
|
2057
|
+
<li class="color dark divide" style="background-color: #ccff90;"><span class="shade accent">A100</span><span class="hex">#ccff90</span> </li>
|
2058
|
+
<li class="color dark" style="background-color: #b2ff59;"><span class="shade accent expanded">A200</span><span class="hex">#b2ff59</span> </li>
|
2059
|
+
<li class="color dark" style="background-color: #76ff03;"><span class="shade accent expanded">A400</span><span class="hex">#76ff03</span> </li>
|
2060
|
+
<li class="color dark" style="background-color: #64dd17;"><span class="shade accent">A700</span><span class="hex">#64dd17</span> </li>
|
2061
|
+
</ul>
|
2062
|
+
</div>
|
2063
|
+
<div class="color-group col-lg-6">
|
2064
|
+
<ul>
|
2065
|
+
<li class="color main-color" style="background-color: #cddc39;"> <span class="name dark">Lime</span> <span class="shade dark">500</span> <span class="hex dark">#cddc39</span> </li>
|
2066
|
+
<li class="color dark" style="background-color: #f9fbe7;"><span class="shade expanded">50</span><span class="hex">#f9fbe7</span> </li>
|
2067
|
+
<li class="color dark" style="background-color: #f0f4c3;"><span class="shade">100</span><span class="hex">#f0f4c3</span> </li>
|
2068
|
+
<li class="color dark" style="background-color: #e6ee9c;"><span class="shade expanded">200</span><span class="hex">#e6ee9c</span> </li>
|
2069
|
+
<li class="color dark" style="background-color: #dce775;"><span class="shade">300</span><span class="hex">#dce775</span> </li>
|
2070
|
+
<li class="color dark" style="background-color: #d4e157;"><span class="shade expanded">400</span><span class="hex">#d4e157</span> </li>
|
2071
|
+
<li class="color dark" style="background-color: #cddc39;"><span class="shade">500</span><span class="hex">#cddc39</span> </li>
|
2072
|
+
<li class="color dark" style="background-color: #c0ca33;"><span class="shade expanded">600</span><span class="hex">#c0ca33</span> </li>
|
2073
|
+
<li class="color dark" style="background-color: #afb42b;"><span class="shade">700</span><span class="hex">#afb42b</span> </li>
|
2074
|
+
<li class="color dark" style="background-color: #9e9d24;"><span class="shade expanded">800</span><span class="hex">#9e9d24</span> </li>
|
2075
|
+
<li class="color" style="background-color: #827717;"><span class="shade expanded">900</span><span class="hex">#827717</span> </li>
|
2076
|
+
<li class="color dark divide" style="background-color: #f4ff81;"><span class="shade accent">A100</span><span class="hex">#f4ff81</span> </li>
|
2077
|
+
<li class="color dark" style="background-color: #eeff41;"><span class="shade accent expanded">A200</span><span class="hex">#eeff41</span> </li>
|
2078
|
+
<li class="color dark" style="background-color: #c6ff00;"><span class="shade accent expanded">A400</span><span class="hex">#c6ff00</span> </li>
|
2079
|
+
<li class="color dark" style="background-color: #aeea00;"><span class="shade accent">A700</span><span class="hex">#aeea00</span> </li>
|
2080
|
+
</ul>
|
2081
|
+
</div>
|
2082
|
+
</div>
|
2083
|
+
</div>
|
2084
|
+
++++
|
2085
|
+
|
2086
|
+
=== Yellow and Amber
|
2087
|
+
++++
|
2088
|
+
<div class="row col-list">
|
2089
|
+
<div class="color-palette col-lg-12">
|
2090
|
+
<div class="color-group col-lg-6">
|
2091
|
+
<ul>
|
2092
|
+
<li class="color main-color" style="background-color: #ffeb3b;"> <span class="name dark">Yellow</span> <span class="shade dark">500</span> <span class="hex dark">#ffeb3b</span> </li>
|
2093
|
+
<li class="color dark" style="background-color: #fffde7;"><span class="shade expanded">50</span><span class="hex">#fffde7</span> </li>
|
2094
|
+
<li class="color dark" style="background-color: #fff9c4;"><span class="shade">100</span><span class="hex">#fff9c4</span> </li>
|
2095
|
+
<li class="color dark" style="background-color: #fff59d;"><span class="shade expanded">200</span><span class="hex">#fff59d</span> </li>
|
2096
|
+
<li class="color dark" style="background-color: #fff176;"><span class="shade">300</span><span class="hex">#fff176</span> </li>
|
2097
|
+
<li class="color dark" style="background-color: #ffee58;"><span class="shade expanded">400</span><span class="hex">#ffee58</span> </li>
|
2098
|
+
<li class="color dark" style="background-color: #ffeb3b;"><span class="shade">500</span><span class="hex">#ffeb3b</span> </li>
|
2099
|
+
<li class="color dark" style="background-color: #fdd835;"><span class="shade expanded">600</span><span class="hex">#fdd835</span> </li>
|
2100
|
+
<li class="color dark" style="background-color: #fbc02d;"><span class="shade">700</span><span class="hex">#fbc02d</span> </li>
|
2101
|
+
<li class="color dark" style="background-color: #f9a825;"><span class="shade expanded">800</span><span class="hex">#f9a825</span> </li>
|
2102
|
+
<li class="color dark" style="background-color: #f57f17;"><span class="shade expanded">900</span><span class="hex">#f57f17</span> </li>
|
2103
|
+
<li class="color dark divide" style="background-color: #ffff8d;"><span class="shade accent">A100</span><span class="hex">#ffff8d</span> </li>
|
2104
|
+
<li class="color dark" style="background-color: #ffff00;"><span class="shade accent expanded">A200</span><span class="hex">#ffff00</span> </li>
|
2105
|
+
<li class="color dark" style="background-color: #ffea00;"><span class="shade accent expanded">A400</span><span class="hex">#ffea00</span> </li>
|
2106
|
+
<li class="color dark" style="background-color: #ffd600;"><span class="shade accent">A700</span><span class="hex">#ffd600</span> </li>
|
2107
|
+
</ul>
|
2108
|
+
</div>
|
2109
|
+
<div class="color-group col-lg-6">
|
2110
|
+
<ul>
|
2111
|
+
<li class="color main-color" style="background-color: #ffc107;"> <span class="name dark">Amber</span> <span class="shade dark">500</span> <span class="hex dark">#ffc107</span> </li>
|
2112
|
+
<li class="color dark" style="background-color: #fff8e1;"><span class="shade expanded">50</span><span class="hex">#fff8e1</span> </li>
|
2113
|
+
<li class="color dark" style="background-color: #ffecb3;"><span class="shade">100</span><span class="hex">#ffecb3</span> </li>
|
2114
|
+
<li class="color dark" style="background-color: #ffe082;"><span class="shade expanded">200</span><span class="hex">#ffe082</span> </li>
|
2115
|
+
<li class="color dark" style="background-color: #ffd54f;"><span class="shade">300</span><span class="hex">#ffd54f</span> </li>
|
2116
|
+
<li class="color dark" style="background-color: #ffca28;"><span class="shade expanded">400</span><span class="hex">#ffca28</span> </li>
|
2117
|
+
<li class="color dark" style="background-color: #ffc107;"><span class="shade">500</span><span class="hex">#ffc107</span> </li>
|
2118
|
+
<li class="color dark" style="background-color: #ffb300;"><span class="shade expanded">600</span><span class="hex">#ffb300</span> </li>
|
2119
|
+
<li class="color dark" style="background-color: #ffa000;"><span class="shade">700</span><span class="hex">#ffa000</span> </li>
|
2120
|
+
<li class="color dark" style="background-color: #ff8f00;"><span class="shade expanded">800</span><span class="hex">#ff8f00</span> </li>
|
2121
|
+
<li class="color dark" style="background-color: #ff6f00;"><span class="shade expanded">900</span><span class="hex">#ff6f00</span> </li>
|
2122
|
+
<li class="color dark divide" style="background-color: #ffe57f;"><span class="shade accent">A100</span><span class="hex">#ffe57f</span> </li>
|
2123
|
+
<li class="color dark" style="background-color: #ffd740;"><span class="shade accent expanded">A200</span><span class="hex">#ffd740</span> </li>
|
2124
|
+
<li class="color dark" style="background-color: #ffc400;"><span class="shade accent expanded">A400</span><span class="hex">#ffc400</span> </li>
|
2125
|
+
<li class="color dark" style="background-color: #ffab00;"><span class="shade accent">A700</span><span class="hex">#ffab00</span> </li>
|
2126
|
+
</ul>
|
2127
|
+
</div>
|
2128
|
+
</div>
|
2129
|
+
</div>
|
2130
|
+
++++
|
2131
|
+
|
2132
|
+
=== Orange and Deep Orange
|
2133
|
+
++++
|
2134
|
+
<div class="row col-list">
|
2135
|
+
<div class="color-palette col-lg-12">
|
2136
|
+
<div class="color-group col-lg-6">
|
2137
|
+
<ul>
|
2138
|
+
<li class="color main-color" style="background-color: #ff9800;"> <span class="name dark-when-small">Orange</span> <span class="shade dark-when-small">500</span> <span class="hex dark-when-small">#ff9800</span> </li>
|
2139
|
+
<li class="color dark" style="background-color: #fff3e0;"><span class="shade expanded">50</span><span class="hex">#fff3e0</span> </li>
|
2140
|
+
<li class="color dark" style="background-color: #ffe0b2;"><span class="shade">100</span><span class="hex">#ffe0b2</span> </li>
|
2141
|
+
<li class="color dark" style="background-color: #ffcc80;"><span class="shade expanded">200</span><span class="hex">#ffcc80</span> </li>
|
2142
|
+
<li class="color dark" style="background-color: #ffb74d;"><span class="shade">300</span><span class="hex">#ffb74d</span> </li>
|
2143
|
+
<li class="color dark" style="background-color: #ffa726;"><span class="shade expanded">400</span><span class="hex">#ffa726</span> </li>
|
2144
|
+
<li class="color dark" style="background-color: #ff9800;"><span class="shade">500</span><span class="hex">#ff9800</span> </li>
|
2145
|
+
<li class="color dark" style="background-color: #fb8c00;"><span class="shade expanded">600</span><span class="hex">#fb8c00</span> </li>
|
2146
|
+
<li class="color dark" style="background-color: #f57c00;"><span class="shade">700</span><span class="hex">#f57c00</span> </li>
|
2147
|
+
<li class="color light-strong" style="background-color: #ef6c00;"><span class="shade expanded">800</span><span class="hex">#ef6c00</span> </li>
|
2148
|
+
<li class="color" style="background-color: #e65100;"><span class="shade expanded">900</span><span class="hex">#e65100</span> </li>
|
2149
|
+
<li class="color dark divide" style="background-color: #ffd180;"><span class="shade accent">A100</span><span class="hex">#ffd180</span> </li>
|
2150
|
+
<li class="color dark" style="background-color: #ffab40;"><span class="shade accent expanded">A200</span><span class="hex">#ffab40</span> </li>
|
2151
|
+
<li class="color dark" style="background-color: #ff9100;"><span class="shade accent expanded">A400</span><span class="hex">#ff9100</span> </li>
|
2152
|
+
<li class="color dark" style="background-color: #ff6d00;"><span class="shade accent">A700</span><span class="hex">#ff6d00</span> </li>
|
2153
|
+
</ul>
|
2154
|
+
</div>
|
2155
|
+
<div class="color-group col-lg-6">
|
2156
|
+
<ul>
|
2157
|
+
<li class="color main-color" style="background-color: #ff5722;"> <span class="name light-strong">Deep Orange</span> <span class="shade light-strong">500</span> <span class="hex light-strong">#ff5722</span> </li>
|
2158
|
+
<li class="color dark" style="background-color: #fbe9e7;"><span class="shade expanded">50</span><span class="hex">#fbe9e7</span> </li>
|
2159
|
+
<li class="color dark" style="background-color: #ffccbc;"><span class="shade">100</span><span class="hex">#ffccbc</span> </li>
|
2160
|
+
<li class="color dark" style="background-color: #ffab91;"><span class="shade expanded">200</span><span class="hex">#ffab91</span> </li>
|
2161
|
+
<li class="color dark" style="background-color: #ff8a65;"><span class="shade">300</span><span class="hex">#ff8a65</span> </li>
|
2162
|
+
<li class="color dark" style="background-color: #ff7043;"><span class="shade expanded">400</span><span class="hex">#ff7043</span> </li>
|
2163
|
+
<li class="color light-strong" style="background-color: #ff5722;"><span class="shade">500</span><span class="hex">#ff5722</span> </li>
|
2164
|
+
<li class="color" style="background-color: #f4511e;"><span class="shade expanded">600</span><span class="hex">#f4511e</span> </li>
|
2165
|
+
<li class="color" style="background-color: #e64a19;"><span class="shade">700</span><span class="hex">#e64a19</span> </li>
|
2166
|
+
<li class="color" style="background-color: #d84315;"><span class="shade expanded">800</span><span class="hex">#d84315</span> </li>
|
2167
|
+
<li class="color" style="background-color: #bf360c;"><span class="shade expanded">900</span><span class="hex">#bf360c</span> </li>
|
2168
|
+
<li class="color dark divide" style="background-color: #ff9e80;"><span class="shade accent">A100</span><span class="hex">#ff9e80</span> </li>
|
2169
|
+
<li class="color dark" style="background-color: #ff6e40;"><span class="shade accent expanded">A200</span><span class="hex">#ff6e40</span> </li>
|
2170
|
+
<li class="color" style="background-color: #ff3d00;"><span class="shade accent expanded">A400</span><span class="hex">#ff3d00</span> </li>
|
2171
|
+
<li class="color" style="background-color: #dd2c00;"><span class="shade accent">A700</span><span class="hex">#dd2c00</span> </li>
|
2172
|
+
</ul>
|
2173
|
+
</div>
|
2174
|
+
</div>
|
2175
|
+
</div>
|
2176
|
+
++++
|
2177
|
+
|
2178
|
+
=== Brown and Grey
|
2179
|
+
++++
|
2180
|
+
<div class="row col-list">
|
2181
|
+
<div class="color-palette col-lg-12">
|
2182
|
+
<div class="color-group col-lg-6">
|
2183
|
+
<ul>
|
2184
|
+
<li class="color main-color" style="background-color: #795548;"> <span class="name">Brown</span> <span class="shade">500</span> <span class="hex">#795548</span> </li>
|
2185
|
+
<li class="color dark" style="background-color: #efebe9;"><span class="shade expanded">50</span><span class="hex">#efebe9</span> </li>
|
2186
|
+
<li class="color dark" style="background-color: #d7ccc8;"><span class="shade">100</span><span class="hex">#d7ccc8</span> </li>
|
2187
|
+
<li class="color dark" style="background-color: #bcaaa4;"><span class="shade expanded">200</span><span class="hex">#bcaaa4</span> </li>
|
2188
|
+
<li class="color light-strong" style="background-color: #a1887f;"><span class="shade">300</span><span class="hex">#a1887f</span> </li>
|
2189
|
+
<li class="color" style="background-color: #8d6e63;"><span class="shade expanded">400</span><span class="hex">#8d6e63</span> </li>
|
2190
|
+
<li class="color" style="background-color: #795548;"><span class="shade">500</span><span class="hex">#795548</span> </li>
|
2191
|
+
<li class="color" style="background-color: #6d4c41;"><span class="shade expanded">600</span><span class="hex">#6d4c41</span> </li>
|
2192
|
+
<li class="color" style="background-color: #5d4037;"><span class="shade">700</span><span class="hex">#5d4037</span> </li>
|
2193
|
+
<li class="color" style="background-color: #4e342e;"><span class="shade expanded">800</span><span class="hex">#4e342e</span> </li>
|
2194
|
+
<li class="color" style="background-color: #3e2723;"><span class="shade expanded">900</span><span class="hex">#3e2723</span> </li>
|
2195
|
+
</ul>
|
2196
|
+
</div>
|
2197
|
+
<div class="color-group col-lg-6">
|
2198
|
+
<ul>
|
2199
|
+
<li class="color main-color" style="background-color: #9e9e9e;"> <span class="name dark-when-small">Grey</span> <span class="shade dark-when-small">500</span> <span class="hex dark-when-small">#9e9e9e</span> </li>
|
2200
|
+
<li class="color dark" style="background-color: #fafafa;"><span class="shade expanded">50</span><span class="hex">#fafafa</span> </li>
|
2201
|
+
<li class="color dark" style="background-color: #f5f5f5;"><span class="shade">100</span><span class="hex">#f5f5f5</span> </li>
|
2202
|
+
<li class="color dark" style="background-color: #eeeeee;"><span class="shade expanded">200</span><span class="hex">#eeeeee</span> </li>
|
2203
|
+
<li class="color dark" style="background-color: #e0e0e0;"><span class="shade">300</span><span class="hex">#e0e0e0</span> </li>
|
2204
|
+
<li class="color dark" style="background-color: #bdbdbd;"><span class="shade expanded">400</span><span class="hex">#bdbdbd</span> </li>
|
2205
|
+
<li class="color dark" style="background-color: #9e9e9e;"><span class="shade">500</span><span class="hex">#9e9e9e</span> </li>
|
2206
|
+
<li class="color" style="background-color: #757575;"><span class="shade expanded">600</span><span class="hex">#757575</span> </li>
|
2207
|
+
<li class="color" style="background-color: #616161;"><span class="shade">700</span><span class="hex">#616161</span> </li>
|
2208
|
+
<li class="color" style="background-color: #424242;"><span class="shade expanded">800</span><span class="hex">#424242</span> </li>
|
2209
|
+
<li class="color" style="background-color: #212121;"><span class="shade expanded">900</span><span class="hex">#212121</span> </li>
|
2210
|
+
</ul>
|
2211
|
+
</div>
|
2212
|
+
</div>
|
2213
|
+
</div>
|
2214
|
+
++++
|
2215
|
+
|
2216
|
+
=== Blue Grey and BW
|
2217
|
+
++++
|
2218
|
+
<div class="row col-list">
|
2219
|
+
<div class="color-palette col-lg-12">
|
2220
|
+
<div class="color-group col-lg-6">
|
2221
|
+
<ul>
|
2222
|
+
<li class="color main-color" style="background-color: #607d8b;"> <span class="name light-strong">Blue Grey</span> <span class="shade light-strong">500</span> <span class="hex light-strong">#607d8b</span> </li>
|
2223
|
+
<li class="color dark" style="background-color: #eceff1;"><span class="shade expanded">50</span><span class="hex">#eceff1</span> </li>
|
2224
|
+
<li class="color dark" style="background-color: #cfd8dc;"><span class="shade">100</span><span class="hex">#cfd8dc</span> </li>
|
2225
|
+
<li class="color dark" style="background-color: #b0bec5;"><span class="shade expanded">200</span><span class="hex">#b0bec5</span> </li>
|
2226
|
+
<li class="color dark" style="background-color: #90a4ae;"><span class="shade">300</span><span class="hex">#90a4ae</span> </li>
|
2227
|
+
<li class="color light-strong" style="background-color: #78909c;"><span class="shade expanded">400</span><span class="hex">#78909c</span> </li>
|
2228
|
+
<li class="color" style="background-color: #607d8b;"><span class="shade">500</span><span class="hex">#607d8b</span> </li>
|
2229
|
+
<li class="color" style="background-color: #546e7a;"><span class="shade expanded">600</span><span class="hex">#546e7a</span> </li>
|
2230
|
+
<li class="color" style="background-color: #455a64;"><span class="shade">700</span><span class="hex">#455a64</span> </li>
|
2231
|
+
<li class="color" style="background-color: #37474f;"><span class="shade expanded">800</span><span class="hex">#37474f</span> </li>
|
2232
|
+
<li class="color" style="background-color: #263238;"><span class="shade expanded">900</span><span class="hex">#263238</span> </li>
|
2233
|
+
</ul>
|
2234
|
+
</div>
|
2235
|
+
<div class="color-group col-lg-6">
|
2236
|
+
<ul>
|
2237
|
+
<li class="color" style="background-color: #000000;"><span class="shade accent">Black</span><span class="hex">#000000</span> </li>
|
2238
|
+
<li class="color dark" style="background-color: #ffffff;"><span class="shade accent expanded">White</span><span class="hex">#ffffff</span> </li>
|
2239
|
+
</ul>
|
2240
|
+
</div>
|
2241
|
+
</div>
|
2242
|
+
</div>
|
2243
|
+
++++
|
2244
|
+
|
2245
|
+
== Final words
|
2246
|
+
|
2247
|
+
lorem:sentences[5]
|