j1-template 2020.0.14 → 2020.0.19
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 +3 -3
- data/_includes/themes/j1/blocks/footer/boxes/news_box.proc +2 -2
- 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 +4 -2
- data/_includes/themes/j1/modules/navigator/procedures/topsearch.proc +1 -1
- data/_includes/themes/j1/procedures/global/create_bs_button.proc +10 -10
- data/_includes/themes/j1/procedures/posts/collate_timeline.proc +39 -40
- 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 +33 -34
- data/apps/public/cc/index.adoc +1 -1
- data/assets/data/authclient.html +39 -28
- data/assets/data/banner.html +10 -10
- data/assets/data/cookiebar.html +5 -5
- data/assets/data/gallery_customizer.html +2 -2
- data/assets/data/jupyter/notebooks/visualisation.ipynb +1 -1
- data/assets/data/menu.html +6 -6
- data/assets/data/mmenu.html +4 -4
- data/assets/data/mmenu_sidebar.html +1 -1
- data/assets/data/mmenu_toc.html +1 -1
- data/assets/data/panel.html +114 -96
- data/assets/data/quicklinks.html +8 -2
- data/assets/data/search.json +25 -22
- data/assets/data/ssm.html +1 -1
- data/assets/data/themes.json +2 -0
- data/assets/themes/j1/adapter/js/back2top.js +233 -0
- data/assets/themes/j1/adapter/js/carousel.js +134 -133
- data/assets/themes/j1/adapter/js/clipboard.js +1 -0
- data/assets/themes/j1/adapter/js/cookiebar.js +1 -0
- data/assets/themes/j1/adapter/js/gallery_customizer.js +1 -0
- data/assets/themes/j1/adapter/js/j1.js +61 -11
- data/assets/themes/j1/adapter/js/logger.js +1 -0
- data/assets/themes/j1/adapter/js/mmenu.js +9 -7
- data/assets/themes/j1/adapter/js/navigator.js +89 -31
- data/assets/themes/j1/adapter/js/ssm.js +5 -21
- data/assets/themes/j1/adapter/js/themer.js +7 -13
- data/assets/themes/j1/adapter/js/toccer.js +36 -6
- 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} +1740 -1401
- data/assets/themes/j1/core/css/theme-extensions.min.css +1 -0
- data/assets/themes/j1/core/css/uno-dark.css +7886 -0
- data/assets/themes/j1/core/css/uno-dark.min.css +6 -0
- data/assets/themes/j1/core/css/uno.css +15079 -2831
- data/assets/themes/j1/core/css/uno.min.css +8 -1
- data/assets/themes/j1/core/css/vendor.css +48 -13411
- 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/bsThemeSwitcher/js/switcher.js +33 -22
- 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/jekyllSearch/js/simple-jekyll-search.js +11 -167
- data/assets/themes/j1/modules/jekyllSearch/js/simple-jekyll-search.min.js +2 -2
- 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/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/theme/uno.css +3 -3
- 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 +11 -12
- data/assets/themes/j1/modules/twemoji/js/twemoji.js +1 -10
- data/assets/themes/j1/modules/twemoji/js/twemoji.min.js +1 -6
- 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 +391 -389
- data/lib/starter_web/Gemfile +13 -6
- data/lib/starter_web/_config.yml +4 -4
- 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 +27 -23
- 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 +1 -2
- 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 +6 -4
- data/lib/starter_web/_data/modules/defaults/authentication.yml +8 -10
- 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 +4 -2
- 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 +17 -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 +69 -29
- data/lib/starter_web/_data/utilities/util_srv.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/banner/admin-dashboard-bootstrap-1280x800-bw.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/banner/docker-1280x600-bw.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/banner/jekyll.1200x600-bw.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/banner/library-1920x800-bw.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/banner/signpost-1920x800-bw.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/banner/water-journal-1280x600.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/banner/write-1280x600-bw.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/modules/lightbox/close.png +0 -0
- data/lib/starter_web/assets/images/modules/lightbox/loading.gif +0 -0
- data/lib/starter_web/assets/images/modules/lightbox/next.png +0 -0
- data/lib/starter_web/assets/images/modules/lightbox/prev.png +0 -0
- data/lib/starter_web/assets/images/pages/material/apple-touch-icon.png +0 -0
- 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/posts/public/featured/_posts/0000-00-00-welcome-to-j1-template.adoc.erb +2 -2
- data/lib/starter_web/collections/posts/public/featured/_posts/2018-05-01-confusion-about-base-url.adoc +2 -2
- data/lib/starter_web/collections/posts/public/featured/_posts/2019-05-01-top-open-source-static-site-generators.adoc +4 -4
- data/lib/starter_web/collections/posts/public/featured/_posts/2019-06-01-about-cookies.adoc +3 -3
- data/lib/starter_web/collections/posts/public/series/_posts/2018-11-01-docker-using-shared-folders.adoc +3 -2
- data/lib/starter_web/index.html +4 -6
- data/lib/starter_web/package.json +11 -11
- data/lib/starter_web/pages/{public → protected}/site_search.adoc +3 -3
- data/lib/starter_web/pages/public/000_nav_pagination_tester.adoc +297 -0
- data/lib/starter_web/pages/public/about/about_site.adoc +1 -1
- data/lib/starter_web/pages/public/about/become_a_patron.adoc +1 -1
- data/lib/starter_web/pages/public/blog/navigator/archive.html +12 -18
- data/lib/starter_web/pages/public/blog/navigator/archive/categoryview.html +14 -19
- data/lib/starter_web/pages/public/blog/navigator/archive/dateview.html +14 -20
- data/lib/starter_web/pages/public/blog/navigator/archive/tagview.html +12 -13
- data/lib/starter_web/pages/public/blog/navigator/index.html +1 -1
- data/lib/starter_web/pages/public/learn/examples/floating_div.adoc +1 -1
- data/lib/starter_web/pages/public/learn/kickstarter/web_in_a_day/100_meet_and_greet_jekyll.adoc +1 -0
- data/lib/starter_web/pages/public/learn/roundtrip/000_includes/attributes.asciidoc +2 -2
- data/lib/starter_web/pages/public/learn/roundtrip/000_includes/documents/410_bottom_info.asciidoc +5 -2
- data/lib/starter_web/pages/public/learn/roundtrip/000_includes/documents/410_bottom_left_warning.asciidoc +2 -2
- data/lib/starter_web/pages/public/learn/roundtrip/000_includes/documents/410_bottom_right_danger.asciidoc +2 -2
- data/lib/starter_web/pages/public/learn/roundtrip/000_includes/documents/410_central_success.asciidoc +2 -2
- data/lib/starter_web/pages/public/learn/roundtrip/000_includes/documents/410_full_height_left_info.asciidoc +2 -2
- data/lib/starter_web/pages/public/learn/roundtrip/000_includes/documents/410_full_height_right_success.asciidoc +2 -2
- data/lib/starter_web/pages/public/learn/roundtrip/000_includes/documents/410_top_info.asciidoc +3 -3
- data/lib/starter_web/pages/public/learn/roundtrip/000_includes/documents/410_top_left_info.asciidoc +2 -2
- data/lib/starter_web/pages/public/learn/roundtrip/000_includes/documents/410_top_right_success.asciidoc +2 -2
- data/lib/starter_web/pages/public/learn/roundtrip/000_includes/documents/419_advanced_modals_demo.asciidoc +337 -0
- data/lib/starter_web/pages/public/learn/roundtrip/100_present_images.adoc +52 -60
- data/lib/starter_web/pages/public/learn/roundtrip/100_present_videos.adoc +22 -22
- data/lib/starter_web/pages/public/learn/roundtrip/200_typography.adoc +24 -24
- data/lib/starter_web/pages/public/learn/roundtrip/300_icon_fonts.adoc +21 -21
- data/lib/starter_web/pages/public/learn/roundtrip/400_asciidoc_extensions.adoc +68 -68
- data/lib/starter_web/pages/public/learn/roundtrip/410_bs_modals_extentions.adoc +2 -28
- data/lib/starter_web/pages/public/learn/roundtrip/420_responsive_tables_extensions.adoc +19 -19
- data/lib/starter_web/pages/public/learn/roundtrip/500_themes.adoc +12 -12
- data/lib/starter_web/pages/public/learn/vtutorials/000_includes/attributes.asciidoc +2 -2
- 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 +1 -1
- data/lib/starter_web/pages/public/legal/de/300_privacy.adoc +1 -1
- data/lib/starter_web/pages/public/legal/en/000_copyright.adoc +1 -1
- data/lib/starter_web/pages/public/legal/en/100_impress.adoc +1 -1
- data/lib/starter_web/pages/public/legal/en/300_privacy.adoc +3 -3
- data/lib/starter_web/pages/public/panels/intro_panel/panel.adoc +1 -1
- data/lib/starter_web/pages/public/previewer/bootstrap_theme.adoc +737 -196
- data/lib/starter_web/pages/public/previewer/iframer.adoc +1 -1
- data/lib/starter_web/pages/public/previewer/justified_gallery.html +1 -1
- data/lib/starter_web/pages/public/previewer/mdi_icons_preview.adoc +3 -3
- data/lib/starter_web/pages/public/previewer/twitter_emoji_preview.adoc +14 -12
- data/lib/starter_web/utilsrv/_defaults/package.json +1 -1
- data/lib/starter_web/utilsrv/package.json +1 -1
- metadata +81 -68
- data/_includes/themes/j1/blocks/footer/boxes/about_box.proc.org +0 -40
- data/_includes/themes/j1/procedures/layouts/module_writer.1.proc +0 -270
- 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/lib/starter_web/assets/images/modules/attics/aditya-joshi-1920x1280.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/admin-dashboard-bootstrap-1280x600.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/alex-holyoake-1920x1280.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/anaya-katlego-1920x1280.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/antonella-lombardi-1920x1280.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/antonino-visalli-1920x1280.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/banner/admin-dashboard-bootstrap-1280x800-bw.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/banner/docker-1280x600-bw.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/banner/jekyll.1200x600-bw.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/banner/library-1920x800-bw.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/banner/signpost-1920x800-bw.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/banner/water-journal-1280x600.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/banner/write-1280x600-bw.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/brandon-mowinkel-1920x1280.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/building-blocks-1920x1280-bw.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/cookies-1920x1200-bw.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/daniel-jensen-1920x1280.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/giammarco-boscaro-1920x1280.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/go-up-1920x1280-bw.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/ian-schneider-1920x1280.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/ideas-start-here-1920x1280-bw.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/jason-rosewell-1920x1280.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/jessica-ruscello-1920x1280.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/lianhao-1920x1280.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/library-1920x1280-bw.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/matthaeus-1920x1280.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/nousnou-iwasaki-1920x1280.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/premium-1920x1280-bw.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/robert-v-ruggiero-1920x1280.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/romain-vignes-1920x1280.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/runner-1920x1200-bw.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/spider-web-1920x1200-bw.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/the-place-1920x1280-bw.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/welcome-1920x1280-bw.webp +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/bootstrap-1920x1000-bw.webp +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/cards-1920x1280-bw.webp +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/emojies-1920x1280-bw.webp +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/icon-fonts-1920x1280-bw.webp +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/images-1920x1280-bw.webp +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/puzzle-1920x1280-bw.webp +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/tables-1920x1280-bw.webp +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/themes-1920x1280-bw.webp +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/typography-1920x1280-bw.webp +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/419_advanced_modals_html.asciidoc +0 -928
|
@@ -19,7 +19,7 @@ resource_options:
|
|
|
19
19
|
padding_bottom: 50
|
|
20
20
|
opacity: 0.5
|
|
21
21
|
slides:
|
|
22
|
-
- url: /assets/images/pages/roundtrip/bootstrap-1920x1000-bw.
|
|
22
|
+
- url: /assets/images/pages/roundtrip/bootstrap-1920x1000-bw.jpg
|
|
23
23
|
alt: bootstrap
|
|
24
24
|
---
|
|
25
25
|
|
|
@@ -68,7 +68,6 @@ notifications. To highlight important information to your vistors. Modals
|
|
|
68
68
|
are positioned over everything else in the document so that the notification
|
|
69
69
|
gets the users attention.
|
|
70
70
|
|
|
71
|
-
|
|
72
71
|
== BS advanced Modals
|
|
73
72
|
|
|
74
73
|
To improve your visitors experience on important information that shouldn't
|
|
@@ -80,34 +79,10 @@ critical messages.
|
|
|
80
79
|
NOTE: For more information on how to use Bootstrap’s JavaScript modal
|
|
81
80
|
plugin, refer to: link:{bs_doc_components_modal}[Bootstrap Docs, {window}].
|
|
82
81
|
|
|
83
|
-
|
|
84
82
|
// Include sub-documents
|
|
85
83
|
// -----------------------------------------------------------------------------
|
|
86
84
|
include::{documentsdir}/410_table_3_column.asciidoc[]
|
|
87
85
|
|
|
88
|
-
//////////
|
|
89
|
-
include::{documentsdir}/410_top_info.asciidoc[]
|
|
90
|
-
include::{documentsdir}/410_top_right_success.asciidoc[]
|
|
91
|
-
include::{documentsdir}/410_top_left_info.asciidoc[]
|
|
92
|
-
include::{documentsdir}/410_bottom_info.asciidoc[]
|
|
93
|
-
include::{documentsdir}/410_bottom_right_danger.asciidoc[]
|
|
94
|
-
include::{documentsdir}/410_bottom_left_warning.asciidoc[]
|
|
95
|
-
include::{documentsdir}/410_full_height_right_success.asciidoc[]
|
|
96
|
-
include::{documentsdir}/410_full_height_left_info.asciidoc[]
|
|
97
|
-
//////////
|
|
98
|
-
|
|
99
|
-
//////////
|
|
100
|
-
include::{documentsdir}/410_position_and_sizes.asciidoc[]
|
|
101
|
-
include::{documentsdir}/410_contact_form.asciidoc[]
|
|
102
|
-
include::{documentsdir}/410_form_login_with_avatar.asciidoc[]
|
|
103
|
-
include::{documentsdir}/410_omni_login.asciidoc[]
|
|
104
|
-
include::{documentsdir}/410_central_large_info.asciidoc[]
|
|
105
|
-
include::{documentsdir}/410_central_fluid_success.asciidoc[]
|
|
106
|
-
include::{documentsdir}/410_full_height_top_warning.asciidoc[]
|
|
107
|
-
include::{documentsdir}/410_full_height_bottom_danger.asciidoc[]
|
|
108
|
-
include::{documentsdir}/410_full_height_right_success.asciidoc[]
|
|
109
|
-
//////////
|
|
110
|
-
|
|
111
86
|
== Whats next
|
|
112
87
|
|
|
113
88
|
Bootstrap is really a great CSS framework that offers in the current V4
|
|
@@ -123,5 +98,4 @@ what the link:{roundtrip-responsive-tables}[BS tables extensions] can do!
|
|
|
123
98
|
|
|
124
99
|
// Include the modals HTML portion
|
|
125
100
|
// -------------------------------------------------------------------
|
|
126
|
-
|
|
127
|
-
include::{documentsdir}/419_advanced_modals_html.asciidoc[]
|
|
101
|
+
include::{documentsdir}/419_advanced_modals_demo.asciidoc[]
|
|
@@ -20,7 +20,7 @@ resource_options:
|
|
|
20
20
|
padding_bottom: 50
|
|
21
21
|
opacity: 0.7
|
|
22
22
|
slides:
|
|
23
|
-
- url: /assets/images/pages/roundtrip/tables-1920x1280-bw.
|
|
23
|
+
- url: /assets/images/pages/roundtrip/tables-1920x1280-bw.jpg
|
|
24
24
|
alt: Photo by Markus Spiske on Unsplash
|
|
25
25
|
badge:
|
|
26
26
|
type: unsplash
|
|
@@ -70,7 +70,7 @@ simplicity and portability to be viewed best on all devices and browsers.
|
|
|
70
70
|
== Table types
|
|
71
71
|
|
|
72
72
|
But, for sure, the solution provided is a compromise. To fit the common needs
|
|
73
|
-
for tables viewed on desktop
|
|
73
|
+
for tables viewed on desktop and mobile devices, three types of responsive
|
|
74
74
|
tables are implemented:
|
|
75
75
|
|
|
76
76
|
.Types of responsive tables
|
|
@@ -81,45 +81,45 @@ tables are implemented:
|
|
|
81
81
|
|Bootstrap
|
|
82
82
|
|`table-responsive`
|
|
83
83
|
|The adding the class `table-responsive`, it creates a responsive table based
|
|
84
|
-
on BS CSS styles. The table will then
|
|
85
|
-
Making
|
|
84
|
+
on BS CSS styles. The table will then scroll horizontally on small devices.
|
|
85
|
+
Making any table responsive across all viewports, the additonal class
|
|
86
86
|
`table-responsive` is to applied. For specific (Bootstrap) breakpoints, the
|
|
87
87
|
classes `table-responsive-lg{-sm\|-md\|-lg\|-xl}` are available to have better
|
|
88
88
|
control on what viewport sizes tables are being transformed.
|
|
89
89
|
|
|
90
90
|
|R Tables
|
|
91
91
|
|`r-text-xxx`
|
|
92
|
-
|R tables are used by J1 Template for
|
|
92
|
+
|R tables are used by J1 Template for default. Those tables are using the
|
|
93
93
|
responsive text feature (presented in section link:{roundtrip-typography}[Typography])
|
|
94
|
-
with
|
|
94
|
+
with no additonal CSS classes to be applied. For smaller viewports, the text
|
|
95
95
|
scales down and should fit the cells automatically. The default text size for
|
|
96
96
|
J1 is `r-text-300`.
|
|
97
97
|
|
|
98
98
|
|F Tables
|
|
99
99
|
|`no-r-text`
|
|
100
|
-
|If the responsive text feature from J1 is
|
|
101
|
-
`no-r-text` is to be applied. F (fixed) tables are
|
|
100
|
+
|If the responsive text feature from J1 is not wanted, the CSS class
|
|
101
|
+
`no-r-text` is to be applied. F (fixed) tables are not responsive per
|
|
102
102
|
default, but in combination with the CSS class `table-responsive-stacked-lg` (Bootstrap),
|
|
103
103
|
this type behaves like classic Bootstrap responsive table (see above).
|
|
104
104
|
|
|
105
105
|
|S Tables
|
|
106
106
|
|`table-responsive-stacked-lg-stacked`
|
|
107
|
-
|The style `table-responsive-stacked-lg-stacked`
|
|
108
|
-
to
|
|
107
|
+
|The style `table-responsive-stacked-lg-stacked` rebuilds a table. The header is set
|
|
108
|
+
to invisible and all columns gets vertically stacked as rows. For
|
|
109
109
|
specific (Bootstrap) breakpoints, the classes `table-responsive-stacked-lg-stacked{-sm\|-md\|-lg\|-xl}`
|
|
110
110
|
are available to have better control on what viewport sizes tables are
|
|
111
111
|
being transformed. The class `table-responsive-stacked-lg-stacked` is using the breakpoint
|
|
112
|
-
at
|
|
112
|
+
at 768px what is the same as `table-responsive-stacked-lg-stacked-md`
|
|
113
113
|
|
|
114
114
|
|===============================================================================
|
|
115
115
|
|
|
116
116
|
[TIP]
|
|
117
117
|
====
|
|
118
|
-
The styles for responsive tables takes effect for
|
|
118
|
+
The styles for responsive tables takes effect for default if the viewport
|
|
119
119
|
(window size) is smaller than 768px for the width (x-axis). Typical for small
|
|
120
120
|
devices like tablets or mobiles.
|
|
121
121
|
|
|
122
|
-
The styles for F
|
|
122
|
+
The styles for F and S Tables can be combined with the Bootstrap responsive
|
|
123
123
|
table approach (`table-responsive-stacked-lg`).
|
|
124
124
|
====
|
|
125
125
|
|
|
@@ -136,7 +136,7 @@ templating your content pages.
|
|
|
136
136
|
|
|
137
137
|
=== Bootstrap
|
|
138
138
|
|
|
139
|
-
Responsive Bootstrap tables support tables to be
|
|
139
|
+
Responsive Bootstrap tables support tables to be scrolled horizontally
|
|
140
140
|
on smaller viewports. From a specified breakpoint and up, the table will
|
|
141
141
|
behave normally and do not scroll horizontally.
|
|
142
142
|
|
|
@@ -207,7 +207,7 @@ Post's front matter by specifying a new date/time in the format
|
|
|
207
207
|
|
|
208
208
|
== Multi-column Table
|
|
209
209
|
|
|
210
|
-
Responsive Bootstrap tables support tables to be
|
|
210
|
+
Responsive Bootstrap tables support tables to be scrolled horizontally
|
|
211
211
|
on smaller viewports. Making any table responsive across all viewports, the
|
|
212
212
|
additonal class `table-responsive-stacked-lg` is used. For specific (Bootstrap)
|
|
213
213
|
breakpoints, the classes `table-responsive-stacked-lg{-sm|-md|-lg|-xl}` are available
|
|
@@ -227,9 +227,9 @@ In particular, this can clip off dropdown menus and other third-party widgets.
|
|
|
227
227
|
|`color`
|
|
228
228
|
|Hash
|
|
229
229
|
|`md_white`
|
|
230
|
-
|The
|
|
230
|
+
|The background_color hash contains a pair of colors to control the header
|
|
231
231
|
background as a gradient.
|
|
232
|
-
|The
|
|
232
|
+
|The background_color hash contains a pair of colors to control the header
|
|
233
233
|
background as a gradient.
|
|
234
234
|
|
|
235
235
|
|`background_color_1`
|
|
@@ -253,9 +253,9 @@ the form `#RRGGBB`
|
|
|
253
253
|
|`color`
|
|
254
254
|
|Hash
|
|
255
255
|
|`md_white`
|
|
256
|
-
|The
|
|
256
|
+
|The background_color hash contains a pair of colors to control the header
|
|
257
257
|
background as a gradient.
|
|
258
|
-
|The
|
|
258
|
+
|The background_color hash contains a pair of colors to control the header
|
|
259
259
|
background as a gradient.
|
|
260
260
|
|
|
261
261
|
|`background_color_1`
|
|
@@ -17,7 +17,7 @@ resource_options:
|
|
|
17
17
|
padding_bottom: 50
|
|
18
18
|
opacity: 0.5
|
|
19
19
|
slides:
|
|
20
|
-
- url: /assets/images/pages/roundtrip/themes-1920x1280-bw.
|
|
20
|
+
- url: /assets/images/pages/roundtrip/themes-1920x1280-bw.jpg
|
|
21
21
|
alt: Photo by Clem Onojeghuo on Unsplash
|
|
22
22
|
badge:
|
|
23
23
|
type: unsplash
|
|
@@ -65,14 +65,14 @@ include::{includedir}/attributes.asciidoc[tag=data]
|
|
|
65
65
|
<!-- site.source.size: {{site.source.size | debug}} -->
|
|
66
66
|
++++
|
|
67
67
|
|
|
68
|
-
The themes feature for J1 Template is in a
|
|
69
|
-
system. Anyway, it makes sense to present what is possible using
|
|
68
|
+
The themes feature for J1 Template is in a alpha status of the template
|
|
69
|
+
system. Anyway, it makes sense to present what is possible using different
|
|
70
70
|
versions of Bootstrap's CSS styles for a website.
|
|
71
71
|
|
|
72
72
|
== Themes
|
|
73
73
|
|
|
74
74
|
It is expected that many people will change the template for their needs. To
|
|
75
|
-
really create
|
|
75
|
+
really create unique websites. Fundamental to do this is are CSS styles
|
|
76
76
|
defined by Bootstrap.
|
|
77
77
|
|
|
78
78
|
Modifying the CSS styles of link:{bootstrap-home}[Bootstrap, {window}] is not
|
|
@@ -85,7 +85,7 @@ Independendly from using Bootstrap or any other CSS framwork.
|
|
|
85
85
|
Thanks to the people at link:{bootswatch-home}[Bootswatch, {window}], a great
|
|
86
86
|
set of already prepared Bootstrap stylesheets in various designs are available
|
|
87
87
|
at their website. No need to start from the scratch, to re-define all the
|
|
88
|
-
Bootstrap variables and
|
|
88
|
+
Bootstrap variables and rebuild the framework files to create a new theme. Many
|
|
89
89
|
different styles are available. What is already available is at least a good
|
|
90
90
|
base for your modifications: your unique design.
|
|
91
91
|
|
|
@@ -99,20 +99,20 @@ Thanks again the people at Bootswatch for this great work.
|
|
|
99
99
|
|
|
100
100
|
== Apply a theme
|
|
101
101
|
|
|
102
|
-
The base for designing pages using J1 Template is the theme
|
|
102
|
+
The base for designing pages using J1 Template is the theme Uno, a modern
|
|
103
103
|
light theme that can be used for many types of websites. And what we mentioned
|
|
104
|
-
already, web design is not: one size fits all. The theme
|
|
104
|
+
already, web design is not: one size fits all. The theme Uno can be seen as
|
|
105
105
|
good base, a starting point. Combining Uno and a different theme may a fast
|
|
106
106
|
solution for your site!?
|
|
107
107
|
|
|
108
108
|
You can find all available themes, all stylesheets to be applied to your pages
|
|
109
|
-
from the menu
|
|
109
|
+
from the menu Themes. You're invited to check how a page is changing for
|
|
110
110
|
their design if other stylesheets, other ideas of web design is used.
|
|
111
111
|
|
|
112
112
|
NOTE: Changing BS-based styles is one thing, changing from one theme to the
|
|
113
113
|
next at runtime a bit more challanging. For the alpha version of J1 Template,
|
|
114
114
|
many styles are automatically changed for J1 specific components as well, but
|
|
115
|
-
|
|
115
|
+
not all of them for now.
|
|
116
116
|
|
|
117
117
|
Simply select a theme from this menu and a new BS-based stylesheet is
|
|
118
118
|
automatically applied to your pages.
|
|
@@ -128,9 +128,9 @@ This was the last place to go for the roundtrip. More details of the most
|
|
|
128
128
|
common elements of Bootstrap can be found on the previewer for a theme. Have
|
|
129
129
|
a look at the link:{previewer-theme}[Theme previewer].
|
|
130
130
|
|
|
131
|
-
To make things real for your new site, go for
|
|
131
|
+
To make things real for your new site, go for Web in a day. This tutorial
|
|
132
132
|
guides you through all the steps how to build a website - your site using
|
|
133
|
-
Jekyll nd the template system J1. It's really a nice journey to
|
|
134
|
-
and
|
|
133
|
+
Jekyll nd the template system J1. It's really a nice journey to explore
|
|
134
|
+
and learn creating a static web.
|
|
135
135
|
|
|
136
136
|
Start your journey from here: link:{kickstarter-web-in-a-day}[Web in a day].
|
|
@@ -95,8 +95,8 @@ end::tags[]
|
|
|
95
95
|
// -----------------------------------------------------------------------------
|
|
96
96
|
tag::data[]
|
|
97
97
|
|
|
98
|
-
:data-images-standalone: "pages/roundtrip/100_present_images/lightbox-image-1.jpg, Golden Gate Bridge with San Francisco in distance, pages/roundtrip/100_present_images/lightbox-image-2.
|
|
99
|
-
:data-images-group: "pages/roundtrip/100_present_images/lightbox-image-1.jpg, Golden Gate Bridge with San Francisco in distance, pages/roundtrip/100_present_images/lightbox-image-2.
|
|
98
|
+
:data-images-standalone: "pages/roundtrip/100_present_images/lightbox-image-1.jpg, Golden Gate Bridge with San Francisco in distance, pages/roundtrip/100_present_images/lightbox-image-2.jpg, Forest with mountains behind"
|
|
99
|
+
:data-images-group: "pages/roundtrip/100_present_images/lightbox-image-1.jpg, Golden Gate Bridge with San Francisco in distance, pages/roundtrip/100_present_images/lightbox-image-2.jpg, Forest with mountains behind"
|
|
100
100
|
|
|
101
101
|
end::data[]
|
|
102
102
|
|
data/lib/starter_web/pages/public/learn/vtutorials/000_includes/documents/410_bottom_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="#frameModalBottomSuccessDemo">
|
|
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="#sideModalBLWarningDemo">
|
|
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="#sideModalBRDangerDemo">
|
|
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="#centralModalSuccessDemo">
|
|
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="#fluidModalLeftInfoDemo">
|
|
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="#fluidModalRightSuccessDemo">
|
|
8
8
|
Launch Modal Example
|
|
9
9
|
</button>
|
|
10
10
|
</div>
|
data/lib/starter_web/pages/public/learn/vtutorials/000_includes/documents/410_top_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="#frameModalTopInfoDemo">
|
|
8
8
|
Launch Modal Example
|
|
9
9
|
</button>
|
|
10
10
|
</div>
|
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>
|
|
@@ -20,7 +20,7 @@ resource_options:
|
|
|
20
20
|
padding_bottom: 50
|
|
21
21
|
opacity: 0.5
|
|
22
22
|
slides:
|
|
23
|
-
- url: /assets/images/modules/attics/runner-1920x1200-bw.
|
|
23
|
+
- url: /assets/images/modules/attics/runner-1920x1200-bw.jpg
|
|
24
24
|
alt: Photo by Alexander Redl on Unsplash
|
|
25
25
|
badge:
|
|
26
26
|
type: unsplash
|
|
@@ -82,7 +82,7 @@ all cookies left.
|
|
|
82
82
|
|
|
83
83
|
++++
|
|
84
84
|
<div class="ml-0 mb-0">
|
|
85
|
-
<button type="button" name="revokeCookieConsent" class="btn btn-
|
|
85
|
+
<button type="button" name="revokeCookieConsent" class="btn btn-secondary btn-raised btn-flex mb-3">
|
|
86
86
|
<i class="toggle-button mdi mdi-toggle-switch-off mdi-lg mdi-md-bg-primary-50 mr-1"></i>
|
|
87
87
|
Revoke Cookie Consent
|
|
88
88
|
</button>
|
|
@@ -17,7 +17,7 @@ resource_options:
|
|
|
17
17
|
padding_bottom: 50
|
|
18
18
|
opacity: 0.5
|
|
19
19
|
slides:
|
|
20
|
-
- url: /assets/images/modules/attics/giammarco-boscaro-1920x1280.
|
|
20
|
+
- url: /assets/images/modules/attics/giammarco-boscaro-1920x1280.jpg
|
|
21
21
|
alt: Photo by Giammarco Boscaro
|
|
22
22
|
alignY: 0.5
|
|
23
23
|
badge:
|
|
@@ -17,7 +17,7 @@ resource_options:
|
|
|
17
17
|
padding_bottom: 50
|
|
18
18
|
opacity: 0.5
|
|
19
19
|
slides:
|
|
20
|
-
- url: /assets/images/modules/attics/lianhao-1920x1280.
|
|
20
|
+
- url: /assets/images/modules/attics/lianhao-1920x1280.jpg
|
|
21
21
|
alt: Photo by Lianhao Qu
|
|
22
22
|
alignY: top
|
|
23
23
|
badge:
|
|
@@ -113,7 +113,7 @@ all cookies left.
|
|
|
113
113
|
|
|
114
114
|
++++
|
|
115
115
|
<div class="ml-0 mb-0">
|
|
116
|
-
<button type="button" name="revokeCookieConsent" class="btn btn-
|
|
116
|
+
<button type="button" name="revokeCookieConsent" class="btn btn-secondary btn-raised btn-flex mb-3">
|
|
117
117
|
<i class="toggle-button mdi mdi-toggle-switch-off mdi-lg mdi-md-bg-primary-50 mr-1"></i>
|
|
118
118
|
Revoke Cookie Consent
|
|
119
119
|
</button>
|
|
@@ -189,7 +189,7 @@ deleted.
|
|
|
189
189
|
|
|
190
190
|
++++
|
|
191
191
|
<div class="ml-0 mb-0">
|
|
192
|
-
<button type="button" name="deleteCookies" class="btn btn-
|
|
192
|
+
<button type="button" name="deleteCookies" class="btn btn-secondary btn-raised btn-flex mb-3">
|
|
193
193
|
<i class="mdi mdi-cookie mdi-lg mdi-md-bg-primary-50 mr-1"></i>
|
|
194
194
|
Delete Cookies
|
|
195
195
|
</button>
|
|
@@ -27,7 +27,7 @@ resource_options:
|
|
|
27
27
|
padding_bottom: 50
|
|
28
28
|
opacity: 0.5
|
|
29
29
|
slides:
|
|
30
|
-
- url: /assets/images/pages/roundtrip/themes-1920x1280-bw.
|
|
30
|
+
- url: /assets/images/pages/roundtrip/themes-1920x1280-bw.jpg
|
|
31
31
|
alt: Photo by Clem Onojeghuo on Unsplash
|
|
32
32
|
badge:
|
|
33
33
|
type: unsplash
|
|
@@ -100,13 +100,461 @@ include::{includedir}/attributes.asciidoc[tag=urls]
|
|
|
100
100
|
|
|
101
101
|
lorem:sentences[5]
|
|
102
102
|
|
|
103
|
+
== MD Color palette
|
|
104
|
+
|
|
105
|
+
The MD color palette comprises primary and accent colors that can be used for
|
|
106
|
+
illustration or to develop your brand colors. They’ve been designed to work
|
|
107
|
+
harmoniously with each other.
|
|
108
|
+
|
|
109
|
+
The color palette starts with primary colors and fills in the spectrum to
|
|
110
|
+
create a complete and usable palette for Android, Web, and iOS. Google
|
|
111
|
+
suggests using the 500 colors as the primary colors in your app and the
|
|
112
|
+
other colors as accents colors.
|
|
113
|
+
|
|
114
|
+
=== Red and Pink
|
|
115
|
+
++++
|
|
116
|
+
<div class="row col-list">
|
|
117
|
+
<div class="color-palette col-lg-12">
|
|
118
|
+
<div class="color-group col-lg-6">
|
|
119
|
+
<ul>
|
|
120
|
+
<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>
|
|
121
|
+
<li class="color dark" style="background-color: #ffebee;"><span class="shade expanded">50</span><span class="hex">#ffebee</span> </li>
|
|
122
|
+
<li class="color dark" style="background-color: #ffcdd2;"><span class="shade">100</span><span class="hex">#ffcdd2</span> </li>
|
|
123
|
+
<li class="color dark" style="background-color: #ef9a9a"><span class="shade expanded">200</span><span class="hex">#ef9a9a</span> </li>
|
|
124
|
+
<li class="color dark" style="background-color: #e57373;"><span class="shade">300</span><span class="hex">#e57373</span> </li>
|
|
125
|
+
<li class="color" style="background-color: #ef5350;"><span class="shade expanded">400</span><span class="hex">#ef5350</span> </li>
|
|
126
|
+
<li class="color" style="background-color: #f44336;"><span class="shade">500</span><span class="hex">#f44336</span> </li>
|
|
127
|
+
<li class="color" style="background-color: #e53935;"><span class="shade expanded">600</span><span class="hex">#e53935</span> </li>
|
|
128
|
+
<li class="color" style="background-color: #d32f2f;"><span class="shade">700</span><span class="hex">#d32f2f</span> </li>
|
|
129
|
+
<li class="color" style="background-color: #c62828;"><span class="shade expanded">800</span><span class="hex">#c62828</span> </li>
|
|
130
|
+
<li class="color" style="background-color: #b71c1c;"><span class="shade expanded">900</span><span class="hex">#b71c1c</span> </li>
|
|
131
|
+
<li class="color dark divide" style="background-color: #ff8a80;"><span class="shade accent">A100</span><span class="hex">#ff8a80</span> </li>
|
|
132
|
+
<li class="color light-strong" style="background-color: #ff5252;"><span class="shade accent expanded">A200</span><span class="hex">#ff5252</span> </li>
|
|
133
|
+
<li class="color" style="background-color: #ff1744;"><span class="shade accent expanded">A400</span><span class="hex">#ff1744</span> </li>
|
|
134
|
+
<li class="color" style="background-color: #d50000;"><span class="shade accent">A700</span><span class="hex">#d50000</span> </li>
|
|
135
|
+
</ul>
|
|
136
|
+
</div>
|
|
137
|
+
<div class="color-group col-lg-6">
|
|
138
|
+
<ul>
|
|
139
|
+
<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>
|
|
140
|
+
<li class="color dark" style="background-color: #fce4ec;"><span class="shade expanded">50</span><span class="hex">#fce4ec</span> </li>
|
|
141
|
+
<li class="color dark" style="background-color: #f8bbd0;"><span class="shade">100</span><span class="hex">#f8bbd0</span> </li>
|
|
142
|
+
<li class="color dark" style="background-color: #f48fb1;"><span class="shade expanded">200</span><span class="hex">#f48fb1</span> </li>
|
|
143
|
+
<li class="color light-strong" style="background-color: #f06292;"><span class="shade">300</span><span class="hex">#f06292</span> </li>
|
|
144
|
+
<li class="color " style="background-color: #ec407a;"><span class="shade expanded">400</span><span class="hex">#ec407a</span> </li>
|
|
145
|
+
<li class="color" style="background-color: #e91e63;"><span class="shade">500</span><span class="hex">#e91e63</span> </li>
|
|
146
|
+
<li class="color" style="background-color: #d81b60;"><span class="shade expanded">600</span><span class="hex">#d81b60</span> </li>
|
|
147
|
+
<li class="color" style="background-color: #c2185b;"><span class="shade">700</span><span class="hex">#c2185b</span> </li>
|
|
148
|
+
<li class="color" style="background-color: #ad1457;"><span class="shade">800</span><span class="hex">#ad1457</span> </li>
|
|
149
|
+
<li class="color" style="background-color: #880e4f;"><span class="shade">900</span><span class="hex">#880e4f</span> </li>
|
|
150
|
+
<li class="color dark divide" style="background-color: #ff80ab;"><span class="shade accent">A100</span><span class="hex">#ff80ab</span> </li>
|
|
151
|
+
<li class="color light-strong" style="background-color: #ff4081;"><span class="shade accent expanded">A200</span><span class="hex">#ff4081</span> </li>
|
|
152
|
+
<li class="color" style="background-color: #f50057;"><span class="shade accent expanded">A400</span><span class="hex">#f50057</span> </li>
|
|
153
|
+
<li class="color" style="background-color: #c51162;"><span class="shade accent">A700</span><span class="hex">#c51162</span> </li>
|
|
154
|
+
</ul>
|
|
155
|
+
</div>
|
|
156
|
+
</div>
|
|
157
|
+
</div>
|
|
158
|
+
++++
|
|
159
|
+
|
|
160
|
+
|
|
161
|
+
=== Purple and Deep Purple
|
|
162
|
+
++++
|
|
163
|
+
<div class="row col-list">
|
|
164
|
+
<div class="color-palette col-lg-12">
|
|
165
|
+
<div class="color-group col-lg-6">
|
|
166
|
+
<ul>
|
|
167
|
+
<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>
|
|
168
|
+
<li class="color dark" style="background-color: #f3e5f5;"><span class="shade expanded">50</span><span class="hex">#f3e5f5</span> </li>
|
|
169
|
+
<li class="color dark" style="background-color: #e1bee7;"><span class="shade">100</span><span class="hex">#e1bee7</span> </li>
|
|
170
|
+
<li class="color dark" style="background-color: #ce93d8;"><span class="shade expanded">200</span><span class="hex">#ce93d8</span> </li>
|
|
171
|
+
<li class="color light-strong" style="background-color: #ba68c8;"><span class="shade">300</span><span class="hex">#ba68c8</span> </li>
|
|
172
|
+
<li class="color light-strong" style="background-color: #ab47bc;"><span class="shade expanded">400</span><span class="hex">#ab47bc</span> </li>
|
|
173
|
+
<li class="color" style="background-color: #9c27b0;"><span class="shade">500</span><span class="hex">#9c27b0</span> </li>
|
|
174
|
+
<li class="color" style="background-color: #8e24aa;"><span class="shade expanded">600</span><span class="hex">#8e24aa</span> </li>
|
|
175
|
+
<li class="color" style="background-color: #7b1fa2;"><span class="shade">700</span><span class="hex">#7b1fa2</span> </li>
|
|
176
|
+
<li class="color" style="background-color: #6a1b9a;"><span class="shade expanded">800</span><span class="hex">#6a1b9a</span> </li>
|
|
177
|
+
<li class="color" style="background-color: #4a148c;"><span class="shade expanded">900</span><span class="hex">#4a148c</span> </li>
|
|
178
|
+
<li class="color dark divide" style="background-color: #ea80fc;"><span class="shade accent">A100</span><span class="hex">#ea80fc</span> </li>
|
|
179
|
+
<li class="color light-strong" style="background-color: #e040fb;"><span class="shade accent expanded">A200</span><span class="hex">#e040fb</span> </li>
|
|
180
|
+
<li class="color" style="background-color: #d500f9;"><span class="shade accent expanded">A400</span><span class="hex">#d500f9</span> </li>
|
|
181
|
+
<li class="color" style="background-color: #aa00ff;"><span class="shade accent">A700</span><span class="hex">#aa00ff</span> </li>
|
|
182
|
+
</ul>
|
|
183
|
+
</div>
|
|
184
|
+
<div class="color-group col-lg-6">
|
|
185
|
+
<ul>
|
|
186
|
+
<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>
|
|
187
|
+
<li class="color dark" style="background-color: #ede7f6;"><span class="shade expanded">50</span><span class="hex">#ede7f6</span> </li>
|
|
188
|
+
<li class="color dark" style="background-color: #d1c4e9;"><span class="shade">100</span><span class="hex">#d1c4e9</span> </li>
|
|
189
|
+
<li class="color dark" style="background-color: #b39ddb;"><span class="shade expanded">200</span><span class="hex">#b39ddb</span> </li>
|
|
190
|
+
<li class="color" style="background-color: #9575cd;"><span class="shade">300</span><span class="hex">#9575cd</span> </li>
|
|
191
|
+
<li class="color" style="background-color: #7e57c2;"><span class="shade expanded">400</span><span class="hex">#7e57c2</span> </li>
|
|
192
|
+
<li class="color" style="background-color: #673ab7;"><span class="shade">500</span><span class="hex">#673ab7</span> </li>
|
|
193
|
+
<li class="color" style="background-color: #5e35b1;"><span class="shade expanded">600</span><span class="hex">#5e35b1</span> </li>
|
|
194
|
+
<li class="color" style="background-color: #512da8;"><span class="shade">700</span><span class="hex">#512da8</span> </li>
|
|
195
|
+
<li class="color" style="background-color: #4527a0;"><span class="shade expanded">800</span><span class="hex">#4527a0</span> </li>
|
|
196
|
+
<li class="color" style="background-color: #311b92;"><span class="shade expanded">900</span><span class="hex">#311b92</span> </li>
|
|
197
|
+
<li class="color dark divide" style="background-color: #b388ff;"><span class="shade accent">A100</span><span class="hex">#b388ff</span> </li>
|
|
198
|
+
<li class="color light-strong" style="background-color: #7c4dff;"><span class="shade accent expanded">A200</span><span class="hex">#7c4dff</span> </li>
|
|
199
|
+
<li class="color" style="background-color: #651fff;"><span class="shade accent expanded">A400</span><span class="hex">#651fff</span> </li>
|
|
200
|
+
<li class="color" style="background-color: #6200ea;"><span class="shade accent">A700</span><span class="hex">#6200ea</span> </li>
|
|
201
|
+
</ul>
|
|
202
|
+
</div>
|
|
203
|
+
</div>
|
|
204
|
+
</div>
|
|
205
|
+
++++
|
|
206
|
+
|
|
207
|
+
=== Indigo and Blue
|
|
208
|
+
++++
|
|
209
|
+
<div class="row col-list">
|
|
210
|
+
<div class="color-palette col-lg-12">
|
|
211
|
+
<div class="color-group col-lg-6">
|
|
212
|
+
<ul>
|
|
213
|
+
<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>
|
|
214
|
+
<li class="color dark" style="background-color: #e8eaf6;"><span class="shade expanded">50</span><span class="hex">#e8eaf6</span> </li>
|
|
215
|
+
<li class="color dark" style="background-color: #c5cae9;"><span class="shade">100</span><span class="hex">#c5cae9</span> </li>
|
|
216
|
+
<li class="color dark" style="background-color: #9fa8da;"><span class="shade expanded">200</span><span class="hex">#9fa8da</span> </li>
|
|
217
|
+
<li class="color" style="background-color: #7986cb;"><span class="shade">300</span><span class="hex">#7986cb</span> </li>
|
|
218
|
+
<li class="color" style="background-color: #5c6bc0;"><span class="shade expanded">400</span><span class="hex">#5c6bc0</span> </li>
|
|
219
|
+
<li class="color" style="background-color: #3f51b5;"><span class="shade">500</span><span class="hex">#3f51b5</span> </li>
|
|
220
|
+
<li class="color" style="background-color: #3949ab;"><span class="shade expanded">600</span><span class="hex">#3949ab</span> </li>
|
|
221
|
+
<li class="color" style="background-color: #303f9f;"><span class="shade">700</span><span class="hex">#303f9f</span> </li>
|
|
222
|
+
<li class="color" style="background-color: #283593;"><span class="shade expanded">800</span><span class="hex">#283593</span> </li>
|
|
223
|
+
<li class="color" style="background-color: #1a237e;"><span class="shade expanded">900</span><span class="hex">#1a237e</span> </li>
|
|
224
|
+
<li class="color dark divide" style="background-color: #8c9eff;"><span class="shade accent">A100</span><span class="hex">#8c9eff</span> </li>
|
|
225
|
+
<li class="color" style="background-color: #536dfe;"><span class="shade accent expanded">A200</span><span class="hex">#536dfe</span> </li>
|
|
226
|
+
<li class="color" style="background-color: #3d5afe;"><span class="shade accent expanded">A400</span><span class="hex">#3d5afe</span> </li>
|
|
227
|
+
<li class="color" style="background-color: #304ffe;"><span class="shade accent">A700</span><span class="hex">#304ffe</span> </li>
|
|
228
|
+
</ul>
|
|
229
|
+
</div>
|
|
230
|
+
<div class="color-group col-lg-6">
|
|
231
|
+
<ul>
|
|
232
|
+
<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>
|
|
233
|
+
<li class="color dark" style="background-color: #e3f2fd;"><span class="shade expanded">50</span><span class="hex">#e3f2fd</span> </li>
|
|
234
|
+
<li class="color dark" style="background-color: #bbdefb;"><span class="shade">100</span><span class="hex">#bbdefb</span> </li>
|
|
235
|
+
<li class="color dark" style="background-color: #90caf9;"><span class="shade expanded">200</span><span class="hex">#90caf9</span> </li>
|
|
236
|
+
<li class="color dark" style="background-color: #64b5f6;"><span class="shade">300</span><span class="hex">#64b5f6</span> </li>
|
|
237
|
+
<li class="color dark" style="background-color: #42a5f5;"><span class="shade expanded">400</span><span class="hex">#42a5f5</span> </li>
|
|
238
|
+
<li class="color light-strong" style="background-color: #2196f3;"><span class="shade">500</span><span class="hex">#2196f3</span> </li>
|
|
239
|
+
<li class="color" style="background-color: #1e88e5;"><span class="shade expanded">600</span><span class="hex">#1e88e5</span> </li>
|
|
240
|
+
<li class="color" style="background-color: #1976d2;"><span class="shade">700</span><span class="hex">#1976d2</span> </li>
|
|
241
|
+
<li class="color" style="background-color: #1565c0;"><span class="shade expanded">800</span><span class="hex">#1565c0</span> </li>
|
|
242
|
+
<li class="color" style="background-color: #0d47a1;"><span class="shade expanded">900</span><span class="hex">#0d47a1</span> </li>
|
|
243
|
+
<li class="color dark divide" style="background-color: #82b1ff;"><span class="shade accent">A100</span><span class="hex">#82b1ff</span> </li>
|
|
244
|
+
<li class="color light-strong" style="background-color: #448aff;"><span class="shade accent expanded">A200</span><span class="hex">#448aff</span> </li>
|
|
245
|
+
<li class="color" style="background-color: #2979ff;"><span class="shade accent expanded">A400</span><span class="hex">#2979ff</span> </li>
|
|
246
|
+
<li class="color" style="background-color: #2962ff;"><span class="shade accent">A700</span><span class="hex">#2962ff</span> </li>
|
|
247
|
+
</ul>
|
|
248
|
+
</div>
|
|
249
|
+
</div>
|
|
250
|
+
</div>
|
|
251
|
+
++++
|
|
252
|
+
|
|
253
|
+
=== Light Blue and Cyan
|
|
254
|
+
++++
|
|
255
|
+
<div class="row col-list">
|
|
256
|
+
<div class="color-palette col-lg-12">
|
|
257
|
+
<div class="color-group col-lg-6">
|
|
258
|
+
<ul>
|
|
259
|
+
<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>
|
|
260
|
+
<li class="color dark" style="background-color: #e1f5fe;"><span class="shade expanded">50</span><span class="hex">#e1f5fe</span> </li>
|
|
261
|
+
<li class="color dark" style="background-color: #b3e5fc;"><span class="shade">100</span><span class="hex">#b3e5fc</span> </li>
|
|
262
|
+
<li class="color dark" style="background-color: #81d4fa;"><span class="shade expanded">200</span><span class="hex">#81d4fa</span> </li>
|
|
263
|
+
<li class="color dark" style="background-color: #4fc3f7;"><span class="shade">300</span><span class="hex">#4fc3f7</span> </li>
|
|
264
|
+
<li class="color dark" style="background-color: #29b6f6;"><span class="shade expanded">400</span><span class="hex">#29b6f6</span> </li>
|
|
265
|
+
<li class="color dark" style="background-color: #03a9f4;"><span class="shade">500</span><span class="hex">#03a9f4</span> </li>
|
|
266
|
+
<li class="color light-strong" style="background-color: #039be5;"><span class="shade expanded">600</span><span class="hex">#039be5</span> </li>
|
|
267
|
+
<li class="color" style="background-color: #0288d1;"><span class="shade">700</span><span class="hex">#0288d1</span> </li>
|
|
268
|
+
<li class="color" style="background-color: #0277bd;"><span class="shade expanded">800</span><span class="hex">#0277bd</span> </li>
|
|
269
|
+
<li class="color" style="background-color: #01579b;"><span class="shade expanded">900</span><span class="hex">#01579b</span> </li>
|
|
270
|
+
<li class="color dark divide" style="background-color: #80d8ff;"><span class="shade accent">A100</span><span class="hex">#80d8ff</span> </li>
|
|
271
|
+
<li class="color dark" style="background-color: #40c4ff;"><span class="shade accent expanded">A200</span><span class="hex">#40c4ff</span> </li>
|
|
272
|
+
<li class="color dark" style="background-color: #00b0ff;"><span class="shade accent expanded">A400</span><span class="hex">#00b0ff</span> </li>
|
|
273
|
+
<li class="color light-strong" style="background-color: #0091ea;"><span class="shade accent">A700</span><span class="hex">#0091ea</span> </li>
|
|
274
|
+
</ul>
|
|
275
|
+
</div>
|
|
276
|
+
<div class="color-group col-lg-6">
|
|
277
|
+
<ul>
|
|
278
|
+
<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>
|
|
279
|
+
<li class="color dark" style="background-color: #e0f7fa;"><span class="shade expanded">50</span><span class="hex">#e0f7fa</span> </li>
|
|
280
|
+
<li class="color dark" style="background-color: #b2ebf2;"><span class="shade">100</span><span class="hex">#b2ebf2</span> </li>
|
|
281
|
+
<li class="color dark" style="background-color: #80deea;"><span class="shade expanded">200</span><span class="hex">#80deea</span> </li>
|
|
282
|
+
<li class="color dark" style="background-color: #4dd0e1;"><span class="shade">300</span><span class="hex">#4dd0e1</span> </li>
|
|
283
|
+
<li class="color dark" style="background-color: #26c6da;"><span class="shade expanded">400</span><span class="hex">#26c6da</span> </li>
|
|
284
|
+
<li class="color dark" style="background-color: #00bcd4;"><span class="shade">500</span><span class="hex">#00bcd4</span> </li>
|
|
285
|
+
<li class="color dark" style="background-color: #00acc1;"><span class="shade expanded">600</span><span class="hex">#00acc1</span> </li>
|
|
286
|
+
<li class="color" style="background-color: #0097a7;"><span class="shade">700</span><span class="hex">#0097a7</span> </li>
|
|
287
|
+
<li class="color" style="background-color: #00838f;"><span class="shade expanded">800</span><span class="hex">#00838f</span> </li>
|
|
288
|
+
<li class="color" style="background-color: #006064;"><span class="shade expanded">900</span><span class="hex">#006064</span> </li>
|
|
289
|
+
<li class="color dark divide" style="background-color: #84ffff;"><span class="shade accent">A100</span><span class="hex">#84ffff</span> </li>
|
|
290
|
+
<li class="color dark" style="background-color: #18ffff;"><span class="shade accent expanded">A200</span><span class="hex">#18ffff</span> </li>
|
|
291
|
+
<li class="color dark" style="background-color: #00e5ff;"><span class="shade accent expanded">A400</span><span class="hex">#00e5ff</span> </li>
|
|
292
|
+
<li class="color dark" style="background-color: #00b8d4;"><span class="shade accent">A700</span><span class="hex">#00b8d4</span> </li>
|
|
293
|
+
</ul>
|
|
294
|
+
</div>
|
|
295
|
+
</div>
|
|
296
|
+
</div>
|
|
297
|
+
++++
|
|
298
|
+
|
|
299
|
+
=== Teal and Green
|
|
300
|
+
++++
|
|
301
|
+
<div class="row col-list">
|
|
302
|
+
<div class="color-palette col-lg-12">
|
|
303
|
+
<div class="color-group col-lg-6">
|
|
304
|
+
<ul>
|
|
305
|
+
<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>
|
|
306
|
+
<li class="color dark" style="background-color: #e0f2f1;"><span class="shade expanded">50</span><span class="hex">#e0f2f1</span> </li>
|
|
307
|
+
<li class="color dark" style="background-color: #b2dfdb;"><span class="shade">100</span><span class="hex">#b2dfdb</span> </li>
|
|
308
|
+
<li class="color dark" style="background-color: #80cbc4;"><span class="shade expanded">200</span><span class="hex">#80cbc4</span> </li>
|
|
309
|
+
<li class="color dark" style="background-color: #4db6ac;"><span class="shade">300</span><span class="hex">#4db6ac</span> </li>
|
|
310
|
+
<li class="color dark" style="background-color: #26a69a;"><span class="shade expanded">400</span><span class="hex">#26a69a</span> </li>
|
|
311
|
+
<li class="color light-strong" style="background-color: #009688;"><span class="shade">500</span><span class="hex">#009688</span> </li>
|
|
312
|
+
<li class="color light-strong" style="background-color: #00897b;"><span class="shade expanded">600</span><span class="hex">#00897b</span> </li>
|
|
313
|
+
<li class="color light-strong" style="background-color: #00796b;"><span class="shade">700</span><span class="hex">#00796b</span> </li>
|
|
314
|
+
<li class="color" style="background-color: #00695c;"><span class="shade expanded">800</span><span class="hex">#00695c</span> </li>
|
|
315
|
+
<li class="color" style="background-color: #004d40;"><span class="shade expanded">900</span><span class="hex">#004d40</span> </li>
|
|
316
|
+
<li class="color dark divide" style="background-color: #a7ffeb;"><span class="shade accent">A100</span><span class="hex">#a7ffeb</span> </li>
|
|
317
|
+
<li class="color dark" style="background-color: #64ffda;"><span class="shade accent expanded">A200</span><span class="hex">#64ffda</span> </li>
|
|
318
|
+
<li class="color dark" style="background-color: #1de9b6;"><span class="shade accent expanded">A400</span><span class="hex">#1de9b6</span> </li>
|
|
319
|
+
<li class="color dark" style="background-color: #00bfa5;"><span class="shade accent">A700</span><span class="hex">#00bfa5</span> </li>
|
|
320
|
+
</ul>
|
|
321
|
+
</div>
|
|
322
|
+
<div class="color-group col-lg-6">
|
|
323
|
+
<ul>
|
|
324
|
+
<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>
|
|
325
|
+
<li class="color dark" style="background-color: #e8f5e9;"><span class="shade expanded">50</span><span class="hex">#e8f5e9</span> </li>
|
|
326
|
+
<li class="color dark" style="background-color: #c8e6c9;"><span class="shade">100</span><span class="hex">#c8e6c9</span> </li>
|
|
327
|
+
<li class="color dark" style="background-color: #a5d6a7;"><span class="shade expanded">200</span><span class="hex">#a5d6a7</span> </li>
|
|
328
|
+
<li class="color dark" style="background-color: #81c784;"><span class="shade">300</span><span class="hex">#81c784</span> </li>
|
|
329
|
+
<li class="color dark" style="background-color: #66bb6a;"><span class="shade expanded">400</span><span class="hex">#66bb6a</span> </li>
|
|
330
|
+
<li class="color dark" style="background-color: #4caf50;"><span class="shade">500</span><span class="hex">#4caf50</span> </li>
|
|
331
|
+
<li class="color light-strong" style="background-color: #43a047;"><span class="shade expanded">600</span><span class="hex">#43a047</span> </li>
|
|
332
|
+
<li class="color" style="background-color: #388e3c;"><span class="shade">700</span><span class="hex">#388e3c</span> </li>
|
|
333
|
+
<li class="color" style="background-color: #2e7d32;"><span class="shade expanded">800</span><span class="hex">#2e7d32</span> </li>
|
|
334
|
+
<li class="color" style="background-color: #1b5e20;"><span class="shade expanded">900</span><span class="hex">#1b5e20</span> </li>
|
|
335
|
+
<li class="color dark divide" style="background-color: #b9f6ca;"><span class="shade accent">A100</span><span class="hex">#b9f6ca</span> </li>
|
|
336
|
+
<li class="color dark" style="background-color: #69f0ae;"><span class="shade accent expanded">A200</span><span class="hex">#69f0ae</span> </li>
|
|
337
|
+
<li class="color dark" style="background-color: #00e676;"><span class="shade accent expanded">A400</span><span class="hex">#00e676</span> </li>
|
|
338
|
+
<li class="color dark" style="background-color: #00c853;"><span class="shade accent">A700</span><span class="hex">#00c853</span> </li>
|
|
339
|
+
</ul>
|
|
340
|
+
</div>
|
|
341
|
+
</div>
|
|
342
|
+
</div>
|
|
343
|
+
++++
|
|
344
|
+
|
|
345
|
+
=== Light Green and Lime
|
|
346
|
+
++++
|
|
347
|
+
<div class="row col-list">
|
|
348
|
+
<div class="color-palette col-lg-12">
|
|
349
|
+
<div class="color-group col-lg-6">
|
|
350
|
+
<ul>
|
|
351
|
+
<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>
|
|
352
|
+
<li class="color dark" style="background-color: #f1f8e9;"><span class="shade expanded">50</span><span class="hex">#f1f8e9</span> </li>
|
|
353
|
+
<li class="color dark" style="background-color: #dcedc8;"><span class="shade">100</span><span class="hex">#dcedc8</span> </li>
|
|
354
|
+
<li class="color dark" style="background-color: #c5e1a5;"><span class="shade expanded">200</span><span class="hex">#c5e1a5</span> </li>
|
|
355
|
+
<li class="color dark" style="background-color: #aed581;"><span class="shade">300</span><span class="hex">#aed581</span> </li>
|
|
356
|
+
<li class="color dark" style="background-color: #9ccc65;"><span class="shade expanded">400</span><span class="hex">#9ccc65</span> </li>
|
|
357
|
+
<li class="color dark" style="background-color: #8bc34a;"><span class="shade">500</span><span class="hex">#8bc34a</span> </li>
|
|
358
|
+
<li class="color dark" style="background-color: #7cb342;"><span class="shade expanded">600</span><span class="hex">#7cb342</span> </li>
|
|
359
|
+
<li class="color light-strong" style="background-color: #689f38;"><span class="shade">700</span><span class="hex">#689f38</span> </li>
|
|
360
|
+
<li class="color" style="background-color: #558b2f;"><span class="shade expanded">800</span><span class="hex">#558b2f</span> </li>
|
|
361
|
+
<li class="color" style="background-color: #33691e;"><span class="shade expanded">900</span><span class="hex">#33691e</span> </li>
|
|
362
|
+
<li class="color dark divide" style="background-color: #ccff90;"><span class="shade accent">A100</span><span class="hex">#ccff90</span> </li>
|
|
363
|
+
<li class="color dark" style="background-color: #b2ff59;"><span class="shade accent expanded">A200</span><span class="hex">#b2ff59</span> </li>
|
|
364
|
+
<li class="color dark" style="background-color: #76ff03;"><span class="shade accent expanded">A400</span><span class="hex">#76ff03</span> </li>
|
|
365
|
+
<li class="color dark" style="background-color: #64dd17;"><span class="shade accent">A700</span><span class="hex">#64dd17</span> </li>
|
|
366
|
+
</ul>
|
|
367
|
+
</div>
|
|
368
|
+
<div class="color-group col-lg-6">
|
|
369
|
+
<ul>
|
|
370
|
+
<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>
|
|
371
|
+
<li class="color dark" style="background-color: #f9fbe7;"><span class="shade expanded">50</span><span class="hex">#f9fbe7</span> </li>
|
|
372
|
+
<li class="color dark" style="background-color: #f0f4c3;"><span class="shade">100</span><span class="hex">#f0f4c3</span> </li>
|
|
373
|
+
<li class="color dark" style="background-color: #e6ee9c;"><span class="shade expanded">200</span><span class="hex">#e6ee9c</span> </li>
|
|
374
|
+
<li class="color dark" style="background-color: #dce775;"><span class="shade">300</span><span class="hex">#dce775</span> </li>
|
|
375
|
+
<li class="color dark" style="background-color: #d4e157;"><span class="shade expanded">400</span><span class="hex">#d4e157</span> </li>
|
|
376
|
+
<li class="color dark" style="background-color: #cddc39;"><span class="shade">500</span><span class="hex">#cddc39</span> </li>
|
|
377
|
+
<li class="color dark" style="background-color: #c0ca33;"><span class="shade expanded">600</span><span class="hex">#c0ca33</span> </li>
|
|
378
|
+
<li class="color dark" style="background-color: #afb42b;"><span class="shade">700</span><span class="hex">#afb42b</span> </li>
|
|
379
|
+
<li class="color dark" style="background-color: #9e9d24;"><span class="shade expanded">800</span><span class="hex">#9e9d24</span> </li>
|
|
380
|
+
<li class="color" style="background-color: #827717;"><span class="shade expanded">900</span><span class="hex">#827717</span> </li>
|
|
381
|
+
<li class="color dark divide" style="background-color: #f4ff81;"><span class="shade accent">A100</span><span class="hex">#f4ff81</span> </li>
|
|
382
|
+
<li class="color dark" style="background-color: #eeff41;"><span class="shade accent expanded">A200</span><span class="hex">#eeff41</span> </li>
|
|
383
|
+
<li class="color dark" style="background-color: #c6ff00;"><span class="shade accent expanded">A400</span><span class="hex">#c6ff00</span> </li>
|
|
384
|
+
<li class="color dark" style="background-color: #aeea00;"><span class="shade accent">A700</span><span class="hex">#aeea00</span> </li>
|
|
385
|
+
</ul>
|
|
386
|
+
</div>
|
|
387
|
+
</div>
|
|
388
|
+
</div>
|
|
389
|
+
++++
|
|
390
|
+
|
|
391
|
+
=== Yellow and Amber
|
|
392
|
+
++++
|
|
393
|
+
<div class="row col-list">
|
|
394
|
+
<div class="color-palette col-lg-12">
|
|
395
|
+
<div class="color-group col-lg-6">
|
|
396
|
+
<ul>
|
|
397
|
+
<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>
|
|
398
|
+
<li class="color dark" style="background-color: #fffde7;"><span class="shade expanded">50</span><span class="hex">#fffde7</span> </li>
|
|
399
|
+
<li class="color dark" style="background-color: #fff9c4;"><span class="shade">100</span><span class="hex">#fff9c4</span> </li>
|
|
400
|
+
<li class="color dark" style="background-color: #fff59d;"><span class="shade expanded">200</span><span class="hex">#fff59d</span> </li>
|
|
401
|
+
<li class="color dark" style="background-color: #fff176;"><span class="shade">300</span><span class="hex">#fff176</span> </li>
|
|
402
|
+
<li class="color dark" style="background-color: #ffee58;"><span class="shade expanded">400</span><span class="hex">#ffee58</span> </li>
|
|
403
|
+
<li class="color dark" style="background-color: #ffeb3b;"><span class="shade">500</span><span class="hex">#ffeb3b</span> </li>
|
|
404
|
+
<li class="color dark" style="background-color: #fdd835;"><span class="shade expanded">600</span><span class="hex">#fdd835</span> </li>
|
|
405
|
+
<li class="color dark" style="background-color: #fbc02d;"><span class="shade">700</span><span class="hex">#fbc02d</span> </li>
|
|
406
|
+
<li class="color dark" style="background-color: #f9a825;"><span class="shade expanded">800</span><span class="hex">#f9a825</span> </li>
|
|
407
|
+
<li class="color dark" style="background-color: #f57f17;"><span class="shade expanded">900</span><span class="hex">#f57f17</span> </li>
|
|
408
|
+
<li class="color dark divide" style="background-color: #ffff8d;"><span class="shade accent">A100</span><span class="hex">#ffff8d</span> </li>
|
|
409
|
+
<li class="color dark" style="background-color: #ffff00;"><span class="shade accent expanded">A200</span><span class="hex">#ffff00</span> </li>
|
|
410
|
+
<li class="color dark" style="background-color: #ffea00;"><span class="shade accent expanded">A400</span><span class="hex">#ffea00</span> </li>
|
|
411
|
+
<li class="color dark" style="background-color: #ffd600;"><span class="shade accent">A700</span><span class="hex">#ffd600</span> </li>
|
|
412
|
+
</ul>
|
|
413
|
+
</div>
|
|
414
|
+
<div class="color-group col-lg-6">
|
|
415
|
+
<ul>
|
|
416
|
+
<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>
|
|
417
|
+
<li class="color dark" style="background-color: #fff8e1;"><span class="shade expanded">50</span><span class="hex">#fff8e1</span> </li>
|
|
418
|
+
<li class="color dark" style="background-color: #ffecb3;"><span class="shade">100</span><span class="hex">#ffecb3</span> </li>
|
|
419
|
+
<li class="color dark" style="background-color: #ffe082;"><span class="shade expanded">200</span><span class="hex">#ffe082</span> </li>
|
|
420
|
+
<li class="color dark" style="background-color: #ffd54f;"><span class="shade">300</span><span class="hex">#ffd54f</span> </li>
|
|
421
|
+
<li class="color dark" style="background-color: #ffca28;"><span class="shade expanded">400</span><span class="hex">#ffca28</span> </li>
|
|
422
|
+
<li class="color dark" style="background-color: #ffc107;"><span class="shade">500</span><span class="hex">#ffc107</span> </li>
|
|
423
|
+
<li class="color dark" style="background-color: #ffb300;"><span class="shade expanded">600</span><span class="hex">#ffb300</span> </li>
|
|
424
|
+
<li class="color dark" style="background-color: #ffa000;"><span class="shade">700</span><span class="hex">#ffa000</span> </li>
|
|
425
|
+
<li class="color dark" style="background-color: #ff8f00;"><span class="shade expanded">800</span><span class="hex">#ff8f00</span> </li>
|
|
426
|
+
<li class="color dark" style="background-color: #ff6f00;"><span class="shade expanded">900</span><span class="hex">#ff6f00</span> </li>
|
|
427
|
+
<li class="color dark divide" style="background-color: #ffe57f;"><span class="shade accent">A100</span><span class="hex">#ffe57f</span> </li>
|
|
428
|
+
<li class="color dark" style="background-color: #ffd740;"><span class="shade accent expanded">A200</span><span class="hex">#ffd740</span> </li>
|
|
429
|
+
<li class="color dark" style="background-color: #ffc400;"><span class="shade accent expanded">A400</span><span class="hex">#ffc400</span> </li>
|
|
430
|
+
<li class="color dark" style="background-color: #ffab00;"><span class="shade accent">A700</span><span class="hex">#ffab00</span> </li>
|
|
431
|
+
</ul>
|
|
432
|
+
</div>
|
|
433
|
+
</div>
|
|
434
|
+
</div>
|
|
435
|
+
++++
|
|
436
|
+
|
|
437
|
+
=== Orange and Deep Orange
|
|
438
|
+
++++
|
|
439
|
+
<div class="row col-list">
|
|
440
|
+
<div class="color-palette col-lg-12">
|
|
441
|
+
<div class="color-group col-lg-6">
|
|
442
|
+
<ul>
|
|
443
|
+
<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>
|
|
444
|
+
<li class="color dark" style="background-color: #fff3e0;"><span class="shade expanded">50</span><span class="hex">#fff3e0</span> </li>
|
|
445
|
+
<li class="color dark" style="background-color: #ffe0b2;"><span class="shade">100</span><span class="hex">#ffe0b2</span> </li>
|
|
446
|
+
<li class="color dark" style="background-color: #ffcc80;"><span class="shade expanded">200</span><span class="hex">#ffcc80</span> </li>
|
|
447
|
+
<li class="color dark" style="background-color: #ffb74d;"><span class="shade">300</span><span class="hex">#ffb74d</span> </li>
|
|
448
|
+
<li class="color dark" style="background-color: #ffa726;"><span class="shade expanded">400</span><span class="hex">#ffa726</span> </li>
|
|
449
|
+
<li class="color dark" style="background-color: #ff9800;"><span class="shade">500</span><span class="hex">#ff9800</span> </li>
|
|
450
|
+
<li class="color dark" style="background-color: #fb8c00;"><span class="shade expanded">600</span><span class="hex">#fb8c00</span> </li>
|
|
451
|
+
<li class="color dark" style="background-color: #f57c00;"><span class="shade">700</span><span class="hex">#f57c00</span> </li>
|
|
452
|
+
<li class="color light-strong" style="background-color: #ef6c00;"><span class="shade expanded">800</span><span class="hex">#ef6c00</span> </li>
|
|
453
|
+
<li class="color" style="background-color: #e65100;"><span class="shade expanded">900</span><span class="hex">#e65100</span> </li>
|
|
454
|
+
<li class="color dark divide" style="background-color: #ffd180;"><span class="shade accent">A100</span><span class="hex">#ffd180</span> </li>
|
|
455
|
+
<li class="color dark" style="background-color: #ffab40;"><span class="shade accent expanded">A200</span><span class="hex">#ffab40</span> </li>
|
|
456
|
+
<li class="color dark" style="background-color: #ff9100;"><span class="shade accent expanded">A400</span><span class="hex">#ff9100</span> </li>
|
|
457
|
+
<li class="color dark" style="background-color: #ff6d00;"><span class="shade accent">A700</span><span class="hex">#ff6d00</span> </li>
|
|
458
|
+
</ul>
|
|
459
|
+
</div>
|
|
460
|
+
<div class="color-group col-lg-6">
|
|
461
|
+
<ul>
|
|
462
|
+
<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>
|
|
463
|
+
<li class="color dark" style="background-color: #fbe9e7;"><span class="shade expanded">50</span><span class="hex">#fbe9e7</span> </li>
|
|
464
|
+
<li class="color dark" style="background-color: #ffccbc;"><span class="shade">100</span><span class="hex">#ffccbc</span> </li>
|
|
465
|
+
<li class="color dark" style="background-color: #ffab91;"><span class="shade expanded">200</span><span class="hex">#ffab91</span> </li>
|
|
466
|
+
<li class="color dark" style="background-color: #ff8a65;"><span class="shade">300</span><span class="hex">#ff8a65</span> </li>
|
|
467
|
+
<li class="color dark" style="background-color: #ff7043;"><span class="shade expanded">400</span><span class="hex">#ff7043</span> </li>
|
|
468
|
+
<li class="color light-strong" style="background-color: #ff5722;"><span class="shade">500</span><span class="hex">#ff5722</span> </li>
|
|
469
|
+
<li class="color" style="background-color: #f4511e;"><span class="shade expanded">600</span><span class="hex">#f4511e</span> </li>
|
|
470
|
+
<li class="color" style="background-color: #e64a19;"><span class="shade">700</span><span class="hex">#e64a19</span> </li>
|
|
471
|
+
<li class="color" style="background-color: #d84315;"><span class="shade expanded">800</span><span class="hex">#d84315</span> </li>
|
|
472
|
+
<li class="color" style="background-color: #bf360c;"><span class="shade expanded">900</span><span class="hex">#bf360c</span> </li>
|
|
473
|
+
<li class="color dark divide" style="background-color: #ff9e80;"><span class="shade accent">A100</span><span class="hex">#ff9e80</span> </li>
|
|
474
|
+
<li class="color dark" style="background-color: #ff6e40;"><span class="shade accent expanded">A200</span><span class="hex">#ff6e40</span> </li>
|
|
475
|
+
<li class="color" style="background-color: #ff3d00;"><span class="shade accent expanded">A400</span><span class="hex">#ff3d00</span> </li>
|
|
476
|
+
<li class="color" style="background-color: #dd2c00;"><span class="shade accent">A700</span><span class="hex">#dd2c00</span> </li>
|
|
477
|
+
</ul>
|
|
478
|
+
</div>
|
|
479
|
+
</div>
|
|
480
|
+
</div>
|
|
481
|
+
++++
|
|
482
|
+
|
|
483
|
+
=== Brown and Grey
|
|
484
|
+
++++
|
|
485
|
+
<div class="row col-list">
|
|
486
|
+
<div class="color-palette col-lg-12">
|
|
487
|
+
<div class="color-group col-lg-6">
|
|
488
|
+
<ul>
|
|
489
|
+
<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>
|
|
490
|
+
<li class="color dark" style="background-color: #efebe9;"><span class="shade expanded">50</span><span class="hex">#efebe9</span> </li>
|
|
491
|
+
<li class="color dark" style="background-color: #d7ccc8;"><span class="shade">100</span><span class="hex">#d7ccc8</span> </li>
|
|
492
|
+
<li class="color dark" style="background-color: #bcaaa4;"><span class="shade expanded">200</span><span class="hex">#bcaaa4</span> </li>
|
|
493
|
+
<li class="color light-strong" style="background-color: #a1887f;"><span class="shade">300</span><span class="hex">#a1887f</span> </li>
|
|
494
|
+
<li class="color" style="background-color: #8d6e63;"><span class="shade expanded">400</span><span class="hex">#8d6e63</span> </li>
|
|
495
|
+
<li class="color" style="background-color: #795548;"><span class="shade">500</span><span class="hex">#795548</span> </li>
|
|
496
|
+
<li class="color" style="background-color: #6d4c41;"><span class="shade expanded">600</span><span class="hex">#6d4c41</span> </li>
|
|
497
|
+
<li class="color" style="background-color: #5d4037;"><span class="shade">700</span><span class="hex">#5d4037</span> </li>
|
|
498
|
+
<li class="color" style="background-color: #4e342e;"><span class="shade expanded">800</span><span class="hex">#4e342e</span> </li>
|
|
499
|
+
<li class="color" style="background-color: #3e2723;"><span class="shade expanded">900</span><span class="hex">#3e2723</span> </li>
|
|
500
|
+
</ul>
|
|
501
|
+
</div>
|
|
502
|
+
<div class="color-group col-lg-6">
|
|
503
|
+
<ul>
|
|
504
|
+
<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>
|
|
505
|
+
<li class="color dark" style="background-color: #fafafa;"><span class="shade expanded">50</span><span class="hex">#fafafa</span> </li>
|
|
506
|
+
<li class="color dark" style="background-color: #f5f5f5;"><span class="shade">100</span><span class="hex">#f5f5f5</span> </li>
|
|
507
|
+
<li class="color dark" style="background-color: #eeeeee;"><span class="shade expanded">200</span><span class="hex">#eeeeee</span> </li>
|
|
508
|
+
<li class="color dark" style="background-color: #e0e0e0;"><span class="shade">300</span><span class="hex">#e0e0e0</span> </li>
|
|
509
|
+
<li class="color dark" style="background-color: #bdbdbd;"><span class="shade expanded">400</span><span class="hex">#bdbdbd</span> </li>
|
|
510
|
+
<li class="color dark" style="background-color: #9e9e9e;"><span class="shade">500</span><span class="hex">#9e9e9e</span> </li>
|
|
511
|
+
<li class="color" style="background-color: #757575;"><span class="shade expanded">600</span><span class="hex">#757575</span> </li>
|
|
512
|
+
<li class="color" style="background-color: #616161;"><span class="shade">700</span><span class="hex">#616161</span> </li>
|
|
513
|
+
<li class="color" style="background-color: #424242;"><span class="shade expanded">800</span><span class="hex">#424242</span> </li>
|
|
514
|
+
<li class="color" style="background-color: #212121;"><span class="shade expanded">900</span><span class="hex">#212121</span> </li>
|
|
515
|
+
</ul>
|
|
516
|
+
</div>
|
|
517
|
+
</div>
|
|
518
|
+
</div>
|
|
519
|
+
++++
|
|
520
|
+
|
|
521
|
+
=== Blue Grey and BW
|
|
522
|
+
++++
|
|
523
|
+
<div class="row col-list">
|
|
524
|
+
<div class="color-palette col-lg-12">
|
|
525
|
+
<div class="color-group col-lg-6">
|
|
526
|
+
<ul>
|
|
527
|
+
<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>
|
|
528
|
+
<li class="color dark" style="background-color: #eceff1;"><span class="shade expanded">50</span><span class="hex">#eceff1</span> </li>
|
|
529
|
+
<li class="color dark" style="background-color: #cfd8dc;"><span class="shade">100</span><span class="hex">#cfd8dc</span> </li>
|
|
530
|
+
<li class="color dark" style="background-color: #b0bec5;"><span class="shade expanded">200</span><span class="hex">#b0bec5</span> </li>
|
|
531
|
+
<li class="color dark" style="background-color: #90a4ae;"><span class="shade">300</span><span class="hex">#90a4ae</span> </li>
|
|
532
|
+
<li class="color light-strong" style="background-color: #78909c;"><span class="shade expanded">400</span><span class="hex">#78909c</span> </li>
|
|
533
|
+
<li class="color" style="background-color: #607d8b;"><span class="shade">500</span><span class="hex">#607d8b</span> </li>
|
|
534
|
+
<li class="color" style="background-color: #546e7a;"><span class="shade expanded">600</span><span class="hex">#546e7a</span> </li>
|
|
535
|
+
<li class="color" style="background-color: #455a64;"><span class="shade">700</span><span class="hex">#455a64</span> </li>
|
|
536
|
+
<li class="color" style="background-color: #37474f;"><span class="shade expanded">800</span><span class="hex">#37474f</span> </li>
|
|
537
|
+
<li class="color" style="background-color: #263238;"><span class="shade expanded">900</span><span class="hex">#263238</span> </li>
|
|
538
|
+
</ul>
|
|
539
|
+
</div>
|
|
540
|
+
<div class="color-group col-lg-6">
|
|
541
|
+
<ul>
|
|
542
|
+
<li class="color" style="background-color: #000000;"><span class="shade accent">Black</span><span class="hex">#000000</span> </li>
|
|
543
|
+
<li class="color dark" style="background-color: #ffffff;"><span class="shade accent expanded">White</span><span class="hex">#ffffff</span> </li>
|
|
544
|
+
</ul>
|
|
545
|
+
</div>
|
|
546
|
+
</div>
|
|
547
|
+
</div>
|
|
548
|
+
++++
|
|
549
|
+
|
|
550
|
+
|
|
103
551
|
== Navbars
|
|
104
552
|
|
|
105
553
|
See examples for Bootstrap’s powerful, responsive navigation header, the
|
|
106
554
|
navbar. Includes support for branding, navigation, and more, including
|
|
107
555
|
support for the collapse plugin.
|
|
108
556
|
|
|
109
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
|
557
|
+
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-blue"></i>]
|
|
110
558
|
Refer to: link:{bs_doc_components_navbar}[Bootstrap Docs, window="_blank"].
|
|
111
559
|
|
|
112
560
|
Theming the navbar has never been easier thanks to the combination of
|
|
@@ -225,7 +673,7 @@ more with support for multiple sizes, states, and more. Bootstrap includes
|
|
|
225
673
|
several predefined button styles, each serving its own semantic purpose,
|
|
226
674
|
with a few extras thrown in for more control.
|
|
227
675
|
|
|
228
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
|
676
|
+
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-blue"></i>]
|
|
229
677
|
Refer to: link:{bs_doc_components_buttons}[Bootstrap Docs, window="_blank"].
|
|
230
678
|
|
|
231
679
|
=== Active buttons
|
|
@@ -244,6 +692,18 @@ inset shadow) when active.
|
|
|
244
692
|
</div>
|
|
245
693
|
++++
|
|
246
694
|
|
|
695
|
+
[source, html, role="noclip"]
|
|
696
|
+
----
|
|
697
|
+
<button type="button" class="btn btn-primary btn-raised">Primary</button>
|
|
698
|
+
<button type="button" class="btn btn-secondary btn-raised">Secondary</button>
|
|
699
|
+
<button type="button" class="btn btn-success btn-raised">Success</button>
|
|
700
|
+
<button type="button" class="btn btn-info btn-raised">Info</button>
|
|
701
|
+
<button type="button" class="btn btn-warning btn-raised">Warning</button>
|
|
702
|
+
<button type="button" class="btn btn-danger btn-raised">Danger</button>
|
|
703
|
+
<button type="button" class="btn btn-link btn-raised">Link</button>
|
|
704
|
+
----
|
|
705
|
+
|
|
706
|
+
|
|
247
707
|
=== Disabled buttons
|
|
248
708
|
|
|
249
709
|
Buttons look inactive by adding the disabled boolean attribute to any
|
|
@@ -260,6 +720,17 @@ Buttons look inactive by adding the disabled boolean attribute to any
|
|
|
260
720
|
</div>
|
|
261
721
|
++++
|
|
262
722
|
|
|
723
|
+
[source, html, role="noclip"]
|
|
724
|
+
----
|
|
725
|
+
<button type="button" class="btn btn-primary btn-raised disabled">Primary</button>
|
|
726
|
+
<button type="button" class="btn btn-secondary btn-raised disabled">Secondary</button>
|
|
727
|
+
<button type="button" class="btn btn-success btn-raised disabled">Success</button>
|
|
728
|
+
<button type="button" class="btn btn-info btn-raised disabled">Info</button>
|
|
729
|
+
<button type="button" class="btn btn-warning btn-raised disabled">Warning</button>
|
|
730
|
+
<button type="button" class="btn btn-danger btn-raised disabled">Danger</button>
|
|
731
|
+
<button type="button" class="btn btn-link btn-raised disabled">Link</button>
|
|
732
|
+
----
|
|
733
|
+
|
|
263
734
|
=== Outline buttons
|
|
264
735
|
|
|
265
736
|
In need of a button, but not the hefty background colors they bring? Replace
|
|
@@ -277,18 +748,34 @@ background images and colors on any button.
|
|
|
277
748
|
</div>
|
|
278
749
|
++++
|
|
279
750
|
|
|
751
|
+
[source, html, role="noclip"]
|
|
752
|
+
----
|
|
753
|
+
<button type="button" class="btn btn-outline-primary btn-raised">Primary</button>
|
|
754
|
+
<button type="button" class="btn btn-outline-secondary btn-raised">Secondary</button>
|
|
755
|
+
<button type="button" class="btn btn-outline-success btn-raised">Success</button>
|
|
756
|
+
<button type="button" class="btn btn-outline-info btn-raised">Info</button>
|
|
757
|
+
<button type="button" class="btn btn-outline-warning btn-raised">Warning</button>
|
|
758
|
+
<button type="button" class="btn btn-outline-danger btn-raised">Danger</button>
|
|
759
|
+
----
|
|
760
|
+
|
|
280
761
|
=== Button sizes
|
|
281
762
|
|
|
282
763
|
Beside the default size, small and large buttons are available.
|
|
283
764
|
|
|
284
765
|
++++
|
|
285
766
|
<div class="doc-example mb-3">
|
|
286
|
-
<button type="button" class="btn btn-
|
|
287
|
-
<button type="button" class="btn btn-
|
|
288
|
-
<button type="button" class="btn btn-
|
|
767
|
+
<button type="button" class="btn btn-secondary btn-raised btn-lg">Large button</button>
|
|
768
|
+
<button type="button" class="btn btn-secondary btn-raised">Default button</button>
|
|
769
|
+
<button type="button" class="btn btn-secondary btn-raised btn-sm">Small button</button>
|
|
289
770
|
</div>
|
|
290
771
|
++++
|
|
291
772
|
|
|
773
|
+
[source, html, role="noclip"]
|
|
774
|
+
----
|
|
775
|
+
<button type="button" class="btn btn-secondary btn-raised btn-lg">Large button</button>
|
|
776
|
+
<button type="button" class="btn btn-secondary btn-raised">Default button</button>
|
|
777
|
+
<button type="button" class="btn btn-secondary btn-raised btn-sm">Small button</button>
|
|
778
|
+
----
|
|
292
779
|
=== Block level button
|
|
293
780
|
|
|
294
781
|
Create block level buttons—those that span the full width of a parent—by
|
|
@@ -301,38 +788,42 @@ adding .btn-block.
|
|
|
301
788
|
</div>
|
|
302
789
|
++++
|
|
303
790
|
|
|
791
|
+
[source, html, role="noclip"]
|
|
792
|
+
----
|
|
793
|
+
<button type="button"
|
|
794
|
+
class="btn btn-primary btn-lg btn-block btn-raised">
|
|
795
|
+
Block level button
|
|
796
|
+
</button>
|
|
797
|
+
<button type="button"
|
|
798
|
+
class="btn btn-secondary btn-lg btn-block btn-raised">
|
|
799
|
+
Block level button
|
|
800
|
+
</button>
|
|
801
|
+
----
|
|
802
|
+
|
|
304
803
|
=== Toggle button
|
|
305
804
|
|
|
306
805
|
++++
|
|
307
806
|
<div class="doc-example mb-3">
|
|
308
|
-
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
|
|
807
|
+
<button type="button" class="btn btn-primary btn-raised" data-toggle="button" aria-pressed="false" autocomplete="off">
|
|
309
808
|
Single toggle
|
|
310
809
|
</button>
|
|
311
810
|
</div>
|
|
312
811
|
++++
|
|
313
812
|
|
|
813
|
+
[source, html, role="noclip"]
|
|
814
|
+
----
|
|
815
|
+
<button type="button" class="btn btn-primary btn-raised"
|
|
816
|
+
data-toggle="button" aria-pressed="false" autocomplete="off">
|
|
817
|
+
Single toggle
|
|
818
|
+
</button>
|
|
819
|
+
----
|
|
820
|
+
|
|
314
821
|
=== Checkbox and radio buttons
|
|
315
822
|
|
|
316
823
|
Bootstrap’s .button styles can be applied to other elements, such as
|
|
317
824
|
`<label>`, to provide checkbox or radio style button toggling. The checked
|
|
318
825
|
state for these buttons is only updated via click event on the button.
|
|
319
826
|
|
|
320
|
-
++++
|
|
321
|
-
<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
827
|
++++
|
|
337
828
|
<div class="doc-example mb-5">
|
|
338
829
|
<div class="btn-group btn-group-toggle" data-toggle="buttons">
|
|
@@ -349,6 +840,20 @@ state for these buttons is only updated via click event on the button.
|
|
|
349
840
|
</div>
|
|
350
841
|
++++
|
|
351
842
|
|
|
843
|
+
[source, html, role="noclip"]
|
|
844
|
+
----
|
|
845
|
+
<div class="btn-group btn-group-toggle" data-toggle="buttons">
|
|
846
|
+
<label class="btn btn-secondary btn-raised btn-flex active">
|
|
847
|
+
<input type="radio" name="options" id="option1" autocomplete="off" checked> Active
|
|
848
|
+
</label>
|
|
849
|
+
<label class="btn btn-secondary btn-raised btn-flex">
|
|
850
|
+
<input type="radio" name="options" id="option2" autocomplete="off"> Radio
|
|
851
|
+
</label>
|
|
852
|
+
<label class="btn btn-secondary btn-raised btn-flex">
|
|
853
|
+
<input type="radio" name="options" id="option3" autocomplete="off"> Radio
|
|
854
|
+
</label>
|
|
855
|
+
</div>
|
|
856
|
+
----
|
|
352
857
|
|
|
353
858
|
== Typography
|
|
354
859
|
|
|
@@ -359,7 +864,7 @@ For a more inclusive and accessible type scale, it is assuemed that
|
|
|
359
864
|
the browser default root font-size (typically 16px) so visitors can
|
|
360
865
|
customize their browser defaults as needed.
|
|
361
866
|
|
|
362
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
|
867
|
+
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-blue"></i>]
|
|
363
868
|
Refer to: link:{bs_doc_content_typography}[Bootstrap Docs, window="_blank"].
|
|
364
869
|
|
|
365
870
|
=== Headings
|
|
@@ -443,7 +948,7 @@ Using the most basic table markup, here’s how .table-based tables look in
|
|
|
443
948
|
Bootstrap. All table styles are inherited in Bootstrap 4, meaning any nested
|
|
444
949
|
tables will be styled in the same manner as the parent.
|
|
445
950
|
|
|
446
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
|
951
|
+
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-blue"></i>]
|
|
447
952
|
Refer to: link:{bs_doc_content_tables}[Bootstrap Docs, window="_blank"].
|
|
448
953
|
|
|
449
954
|
|
|
@@ -521,7 +1026,7 @@ of newer input controls like email verification, number selection, and more.
|
|
|
521
1026
|
Here’s a quick example to demonstrate Bootstrap’s form styles. Keep reading
|
|
522
1027
|
for documentation on required classes, form layout, and more.
|
|
523
1028
|
|
|
524
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
|
1029
|
+
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-blue"></i>]
|
|
525
1030
|
Refer to: link:{bs_doc_components_forms}[Bootstrap Docs, window="_blank"].
|
|
526
1031
|
|
|
527
1032
|
++++
|
|
@@ -542,7 +1047,7 @@ Refer to: link:{bs_doc_components_forms}[Bootstrap Docs, window="_blank"].
|
|
|
542
1047
|
<input type="checkbox" class="form-check-input" id="exampleCheck1">
|
|
543
1048
|
<label class="form-check-label" for="exampleCheck1">Check me out</label>
|
|
544
1049
|
</div>
|
|
545
|
-
<button type="submit" class="btn btn-
|
|
1050
|
+
<button type="submit" class="btn btn-secondary btn-raised">Submit</button>
|
|
546
1051
|
</form>
|
|
547
1052
|
</div>
|
|
548
1053
|
++++
|
|
@@ -555,11 +1060,11 @@ state, sizing, and more.
|
|
|
555
1060
|
<div class="doc-example mb-3">
|
|
556
1061
|
<form>
|
|
557
1062
|
<div class="form-group">
|
|
558
|
-
<label for="exampleInputEmail1">Email address</label>
|
|
559
|
-
<input type="email" class="form-control" id="exampleFormControlInput1"
|
|
1063
|
+
<label for="exampleInputEmail1" class="bmd-label-floating">Email address</label>
|
|
1064
|
+
<input type="email" class="form-control" id="exampleFormControlInput1">
|
|
560
1065
|
</div>
|
|
561
1066
|
<div class="form-group">
|
|
562
|
-
<label for="exampleFormControlSelect1">Example select</label>
|
|
1067
|
+
<label for="exampleFormControlSelect1" class="bmd-label-floating">Example select</label>
|
|
563
1068
|
<select class="form-control" id="exampleFormControlSelect1">
|
|
564
1069
|
<option>1</option>
|
|
565
1070
|
<option>2</option>
|
|
@@ -569,7 +1074,7 @@ state, sizing, and more.
|
|
|
569
1074
|
</select>
|
|
570
1075
|
</div>
|
|
571
1076
|
<div class="form-group">
|
|
572
|
-
<label for="exampleFormControlSelect2">Example multiple select</label>
|
|
1077
|
+
<label for="exampleFormControlSelect2" class="bmd-label-floating">Example multiple select</label>
|
|
573
1078
|
<select multiple class="form-control" id="exampleFormControlSelect2">
|
|
574
1079
|
<option>option 1</option>
|
|
575
1080
|
<option>option 2</option>
|
|
@@ -577,7 +1082,7 @@ state, sizing, and more.
|
|
|
577
1082
|
</select>
|
|
578
1083
|
</div>
|
|
579
1084
|
<div class="form-group">
|
|
580
|
-
<label for="exampleFormControlTextarea1">Example textarea</label>
|
|
1085
|
+
<label for="exampleFormControlTextarea1" class="bmd-label-floating">Example textarea</label>
|
|
581
1086
|
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
|
|
582
1087
|
</div>
|
|
583
1088
|
</form>
|
|
@@ -590,7 +1095,7 @@ For file inputs, swap the .form-control for .form-control-file.
|
|
|
590
1095
|
<div class="doc-example mb-3">
|
|
591
1096
|
<form>
|
|
592
1097
|
<div class="form-group">
|
|
593
|
-
<label for="exampleFormControlFile1">Example file input</label>
|
|
1098
|
+
<label for="exampleFormControlFile1" class="bmd-label-floating">Example file input</label>
|
|
594
1099
|
<input type="file" class="form-control-file" id="exampleFormControlFile1">
|
|
595
1100
|
</div>
|
|
596
1101
|
</form>
|
|
@@ -608,7 +1113,7 @@ for building all types of navigation components. It includes some style
|
|
|
608
1113
|
overrides (for working with lists), some link padding for larger hit areas,
|
|
609
1114
|
and basic disabled styling.
|
|
610
1115
|
|
|
611
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
|
1116
|
+
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-blue"></i>]
|
|
612
1117
|
Refer to: link:{bs_doc_components_navs}[Bootstrap Docs, window="_blank"].
|
|
613
1118
|
|
|
614
1119
|
=== Tabs
|
|
@@ -622,7 +1127,7 @@ JavaScript plugin.
|
|
|
622
1127
|
<div class="bs-component">
|
|
623
1128
|
<ul class="nav nav-tabs">
|
|
624
1129
|
<li class="nav-item">
|
|
625
|
-
<a class="nav-link
|
|
1130
|
+
<a class="nav-link" data-toggle="tab" href="#home">Home</a>
|
|
626
1131
|
</li>
|
|
627
1132
|
<li class="nav-item">
|
|
628
1133
|
<a class="nav-link" data-toggle="tab" href="#profile">Profile</a>
|
|
@@ -851,7 +1356,7 @@ button. For proper styling, use one of the eight required contextual classes
|
|
|
851
1356
|
(e.g., .alert-success). For inline dismissal, use the alerts
|
|
852
1357
|
https://getbootstrap.com/docs/4.0/components/alerts/#dismissing[jQuery plugin].
|
|
853
1358
|
|
|
854
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
|
1359
|
+
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-blue"></i>]
|
|
855
1360
|
Refer to: link:{bs_doc_components_alerts}[Bootstrap Docs, window="_blank"].
|
|
856
1361
|
|
|
857
1362
|
++++
|
|
@@ -908,7 +1413,7 @@ be presented with the content of the badge. Depending on the specific
|
|
|
908
1413
|
situation, these badges may seem like random additional words or numbers
|
|
909
1414
|
at the end of a sentence, link, or button.
|
|
910
1415
|
|
|
911
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
|
1416
|
+
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-blue"></i>]
|
|
912
1417
|
Refer to: link:{bs_doc_components_badges}[Bootstrap Docs, window="_blank"].
|
|
913
1418
|
|
|
914
1419
|
++++
|
|
@@ -944,7 +1449,7 @@ elements, some CSS to set the width, and a few attributes. We don’t use the
|
|
|
944
1449
|
HTML5 <progress> element, ensuring you can stack progress bars, animate them,
|
|
945
1450
|
and place text labels over them.
|
|
946
1451
|
|
|
947
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
|
1452
|
+
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-blue"></i>]
|
|
948
1453
|
Refer to: link:{bs_doc_components_progress}[Bootstrap Docs, window="_blank"].
|
|
949
1454
|
|
|
950
1455
|
=== Basic
|
|
@@ -1040,7 +1545,7 @@ lorem:sentences[2]
|
|
|
1040
1545
|
|
|
1041
1546
|
Lightweight, flexible component for showcasing hero unit style content.
|
|
1042
1547
|
|
|
1043
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
|
1548
|
+
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-blue"></i>]
|
|
1044
1549
|
Refer to: link:{bs_doc_components_jumbotron}[Bootstrap Docs, window="_blank"].
|
|
1045
1550
|
|
|
1046
1551
|
++++
|
|
@@ -1052,7 +1557,7 @@ Refer to: link:{bs_doc_components_jumbotron}[Bootstrap Docs, window="_blank"].
|
|
|
1052
1557
|
<hr class="my-4">
|
|
1053
1558
|
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
|
|
1054
1559
|
<p class="lead">
|
|
1055
|
-
<a class="btn btn-
|
|
1560
|
+
<a class="btn btn-secondary btn-raised btn-lg" href="javascript:(void)" role="button">Learn more</a>
|
|
1056
1561
|
</p>
|
|
1057
1562
|
</div>
|
|
1058
1563
|
</div>
|
|
@@ -1064,7 +1569,7 @@ Refer to: link:{bs_doc_components_jumbotron}[Bootstrap Docs, window="_blank"].
|
|
|
1064
1569
|
List groups are a flexible and powerful component for displaying a series of
|
|
1065
1570
|
content. Modify and extend them to support just about any content within.
|
|
1066
1571
|
|
|
1067
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
|
1572
|
+
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-blue"></i>]
|
|
1068
1573
|
Refer to: link:{bs_doc_components_list_group}[Bootstrap Docs, window="_blank"].
|
|
1069
1574
|
|
|
1070
1575
|
++++
|
|
@@ -1147,7 +1652,7 @@ manage to deliver a ton of control and customization. Built with flexbox,
|
|
|
1147
1652
|
they offer easy alignment and mix well with other Bootstrap components.
|
|
1148
1653
|
They have no margin by default, so use spacing utilities as needed.
|
|
1149
1654
|
|
|
1150
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
|
1655
|
+
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-blue"></i>]
|
|
1151
1656
|
Refer to: link:{bs_doc_components_cards}[Bootstrap Docs, window="_blank"].
|
|
1152
1657
|
|
|
1153
1658
|
++++
|
|
@@ -1329,32 +1834,82 @@ built with HTML, CSS, and JavaScript. They’re positioned over everything
|
|
|
1329
1834
|
else in the document and remove scroll from the <body> so that modal
|
|
1330
1835
|
content scrolls instead.
|
|
1331
1836
|
|
|
1332
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
|
1837
|
+
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-blue"></i>]
|
|
1333
1838
|
Refer to: link:{bs_doc_components_modal}[Bootstrap Docs, window="_blank"].
|
|
1334
1839
|
|
|
1335
1840
|
.Modal types
|
|
1336
|
-
[cols="3a,
|
|
1841
|
+
[cols="3a,6a,3a", options="header", width="100%", role="table-responsive-stacked-lg"]
|
|
1337
1842
|
|===============================================================================
|
|
1338
|
-
|Type |Description |Launch
|
|
1843
|
+
|Type |Description |Launch Example
|
|
1339
1844
|
|
|
1340
1845
|
|*Base*
|
|
1341
|
-
|
|
|
1342
|
-
|
|
1846
|
+
|Lauch the modal by clicking the button below. It will slide down and fade in
|
|
1847
|
+
from the top of the page.
|
|
1848
|
+
|
|
|
1849
|
+
++++
|
|
1850
|
+
<div class="ml-2 mb-5">
|
|
1851
|
+
<!-- Button trigger modal -->
|
|
1852
|
+
<button type="button"
|
|
1853
|
+
class="btn btn-secondary btn-raised"
|
|
1854
|
+
data-toggle="modal"
|
|
1855
|
+
data-target="#exampleSimpleModal">
|
|
1856
|
+
Launch Example
|
|
1857
|
+
</button>
|
|
1858
|
+
</div>
|
|
1859
|
+
|
|
1860
|
+
<!-- Modal -->
|
|
1861
|
+
<div id="exampleSimpleModal"
|
|
1862
|
+
class="modal fade top"
|
|
1863
|
+
tabindex="-1"
|
|
1864
|
+
role="dialog"
|
|
1865
|
+
aria-labelledby="exampleSimpleModalLabel" aria-hidden="true">
|
|
1866
|
+
<div class="modal-dialog">
|
|
1867
|
+
<div class="modal-content">
|
|
1868
|
+
<div class="modal-header">
|
|
1869
|
+
<h5 id="exampleSimpleModalLabel" class="modal-title notoc">Modal title</h5>
|
|
1870
|
+
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
1871
|
+
<span aria-hidden="true">×</span>
|
|
1872
|
+
</button>
|
|
1873
|
+
</div>
|
|
1874
|
+
<div class="modal-body">
|
|
1875
|
+
<p>Modal body text goes here.</p>
|
|
1876
|
+
</div>
|
|
1877
|
+
<div class="modal-footer">
|
|
1878
|
+
<button type="button" class="btn btn-primary btn-raised mr-2" data-dismiss="modal">Close</button>
|
|
1879
|
+
<button type="button" class="btn btn-secondary btn-raised">Save changes</button>
|
|
1880
|
+
</div>
|
|
1881
|
+
</div>
|
|
1882
|
+
</div>
|
|
1883
|
+
</div>
|
|
1884
|
+
++++
|
|
1885
|
+
|
|
1886
|
+
|*Static backdrop*
|
|
1887
|
+
|This model is set to *static* and is will *not* close when clicking outside
|
|
1888
|
+
it (the backdrop).
|
|
1343
1889
|
|
|
|
1344
1890
|
++++
|
|
1345
1891
|
<div class="ml-2 mb-5">
|
|
1346
1892
|
<!-- Button trigger modal -->
|
|
1347
|
-
<button type="button"
|
|
1348
|
-
|
|
1893
|
+
<button type="button"
|
|
1894
|
+
class="btn btn-secondary btn-raised"
|
|
1895
|
+
data-toggle="modal"
|
|
1896
|
+
data-target="#exampleStaticModal">
|
|
1897
|
+
Launch Example
|
|
1349
1898
|
</button>
|
|
1350
1899
|
</div>
|
|
1351
1900
|
|
|
1352
1901
|
<!-- Modal -->
|
|
1353
|
-
<div
|
|
1354
|
-
|
|
1902
|
+
<div id="exampleStaticModal"
|
|
1903
|
+
class="modal fade"
|
|
1904
|
+
tabindex="-1"
|
|
1905
|
+
role="dialog"
|
|
1906
|
+
aria-labelledby="exampleStaticModalLabel" aria-hidden="true"
|
|
1907
|
+
data-keyboard="false"
|
|
1908
|
+
data-backdrop="static">
|
|
1909
|
+
<div class="modal-dialog">
|
|
1355
1910
|
<div class="modal-content">
|
|
1356
1911
|
<div class="modal-header">
|
|
1357
|
-
<h5 class="modal-title notoc"
|
|
1912
|
+
<h5 id="exampleStatcModalLabel" class="modal-title notoc">Modal title</h5>
|
|
1358
1913
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
1359
1914
|
<span aria-hidden="true">×</span>
|
|
1360
1915
|
</button>
|
|
@@ -1363,8 +1918,8 @@ down and fade in from the top of the page.
|
|
|
1363
1918
|
<p>Modal body text goes here.</p>
|
|
1364
1919
|
</div>
|
|
1365
1920
|
<div class="modal-footer">
|
|
1366
|
-
<button type="button" class="btn btn-
|
|
1367
|
-
<button type="button" class="btn btn-
|
|
1921
|
+
<button type="button" class="btn btn-primary btn-raised mr-2" data-dismiss="modal">Close</button>
|
|
1922
|
+
<button type="button" class="btn btn-secondary btn-raised">Save changes</button>
|
|
1368
1923
|
</div>
|
|
1369
1924
|
</div>
|
|
1370
1925
|
</div>
|
|
@@ -1379,31 +1934,55 @@ the height.
|
|
|
1379
1934
|
++++
|
|
1380
1935
|
<div class="ml-2 mb-5">
|
|
1381
1936
|
<!-- Button trigger modal -->
|
|
1382
|
-
<button type="button"
|
|
1383
|
-
|
|
1937
|
+
<button type="button"
|
|
1938
|
+
class="btn btn-secondary btn-raised"
|
|
1939
|
+
data-toggle="modal"
|
|
1940
|
+
data-target="#exampleModalLong">
|
|
1941
|
+
Launch Example
|
|
1384
1942
|
</button>
|
|
1385
1943
|
</div>
|
|
1386
1944
|
|
|
1387
1945
|
<!-- Modal -->
|
|
1388
|
-
<div
|
|
1389
|
-
|
|
1946
|
+
<div
|
|
1947
|
+
id="exampleModalLong"
|
|
1948
|
+
class="modal fade"
|
|
1949
|
+
tabindex="-1"
|
|
1950
|
+
role="dialog"
|
|
1951
|
+
aria-labelledby="exampleModalLongTitle" aria-hidden="true">
|
|
1952
|
+
<div class="modal-dialog">
|
|
1390
1953
|
<div class="modal-content">
|
|
1391
1954
|
<div class="modal-header">
|
|
1392
|
-
<h5 class="modal-title notoc" id="exampleModalLongTitle">
|
|
1955
|
+
<h5 class="modal-title notoc" id="exampleModalLongTitle">The Extremes of Good and Evil</h5>
|
|
1393
1956
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
1394
1957
|
<span aria-hidden="true">×</span>
|
|
1395
1958
|
</button>
|
|
1396
1959
|
</div>
|
|
1397
1960
|
<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">
|
|
1961
|
+
<p>
|
|
1401
1962
|
On the other hand, we denounce with righteous indignation and dislike men who
|
|
1402
1963
|
are so beguiled and demoralized by the charms of pleasure of the moment, so
|
|
1403
1964
|
blinded by desire, that they cannot foresee the pain and trouble that are
|
|
1404
1965
|
bound to ensue; and equal blame belongs to those who fail in their duty through
|
|
1405
1966
|
weakness of will, which is the same as saying through shrinking from toil and pain.
|
|
1406
|
-
|
|
1967
|
+
</p>
|
|
1968
|
+
<p>
|
|
1969
|
+
These cases are perfectly simple and easy to distinguish. In a free hour, when
|
|
1970
|
+
our power of choice is untrammelled and when nothing prevents our being able to
|
|
1971
|
+
do what we like best, every pleasure is to be welcomed and every pain avoided.
|
|
1972
|
+
But in certain circumstances and owing to the claims of duty or the obligations
|
|
1973
|
+
of business is will frequently occur that pleasures have to be repudiated and
|
|
1974
|
+
annoyances accepted. The wise man therefore always holds in these matters to
|
|
1975
|
+
this principle of selection: he rejects pleasures to secure other greater
|
|
1976
|
+
pleasures, or else he endures pains to avoid worse pains.
|
|
1977
|
+
</p>
|
|
1978
|
+
<p>
|
|
1979
|
+
On the other hand, we denounce with righteous indignation and dislike men who
|
|
1980
|
+
are so beguiled and demoralized by the charms of pleasure of the moment, so
|
|
1981
|
+
blinded by desire, that they cannot foresee the pain and trouble that are
|
|
1982
|
+
bound to ensue; and equal blame belongs to those who fail in their duty through
|
|
1983
|
+
weakness of will, which is the same as saying through shrinking from toil and pain.
|
|
1984
|
+
</p>
|
|
1985
|
+
<p>
|
|
1407
1986
|
These cases are perfectly simple and easy to distinguish. In a free hour, when
|
|
1408
1987
|
our power of choice is untrammelled and when nothing prevents our being able to
|
|
1409
1988
|
do what we like best, every pleasure is to be welcomed and every pain avoided.
|
|
@@ -1415,175 +1994,130 @@ the height.
|
|
|
1415
1994
|
</p>
|
|
1416
1995
|
</div>
|
|
1417
1996
|
<div class="modal-footer">
|
|
1418
|
-
<button type="button" class="btn btn-
|
|
1419
|
-
<button type="button" class="btn btn-
|
|
1997
|
+
<button type="button" class="btn btn-primary btn-raised mr-2" data-dismiss="modal">Close</button>
|
|
1998
|
+
<button type="button" class="btn btn-secondary btn-raised">Save changes</button>
|
|
1420
1999
|
</div>
|
|
1421
2000
|
</div>
|
|
1422
2001
|
</div>
|
|
1423
2002
|
</div>
|
|
1424
2003
|
++++
|
|
1425
2004
|
|
|
1426
|
-
|*
|
|
1427
|
-
|
|
|
2005
|
+
|*Scrollable long content*
|
|
2006
|
+
|It#s also possible to create a scrollable modal that allows scroll the
|
|
2007
|
+
modal body. Try the demo and scroll the content.
|
|
1428
2008
|
|
|
|
1429
2009
|
++++
|
|
1430
2010
|
<div class="ml-2 mb-5">
|
|
1431
2011
|
<!-- Button trigger modal -->
|
|
1432
|
-
<button type="button"
|
|
1433
|
-
|
|
2012
|
+
<button type="button"
|
|
2013
|
+
class="btn btn-secondary btn-raised"
|
|
2014
|
+
data-toggle="modal"
|
|
2015
|
+
data-target="#exampleModalLongScrollable">
|
|
2016
|
+
Launch Example
|
|
1434
2017
|
</button>
|
|
1435
2018
|
</div>
|
|
1436
2019
|
|
|
1437
2020
|
<!-- Modal -->
|
|
1438
|
-
<div
|
|
1439
|
-
|
|
2021
|
+
<div
|
|
2022
|
+
id="exampleModalLongScrollable"
|
|
2023
|
+
class="modal fade"
|
|
2024
|
+
tabindex="-1"
|
|
2025
|
+
role="dialog"
|
|
2026
|
+
aria-labelledby="exampleModalLongScrollableTitle" aria-hidden="true">
|
|
2027
|
+
<div class="modal-dialog modal-dialog-scrollable">
|
|
1440
2028
|
<div class="modal-content">
|
|
1441
2029
|
<div class="modal-header">
|
|
1442
|
-
<h5 class="modal-title notoc" id="
|
|
2030
|
+
<h5 class="modal-title notoc" id="exampleModalLongScrollableTitle">The Extremes of Good and Evil</h5>
|
|
1443
2031
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
1444
2032
|
<span aria-hidden="true">×</span>
|
|
1445
2033
|
</button>
|
|
1446
2034
|
</div>
|
|
1447
2035
|
<div class="modal-body">
|
|
1448
|
-
|
|
1449
|
-
|
|
1450
|
-
|
|
2036
|
+
<p>
|
|
2037
|
+
On the other hand, we denounce with righteous indignation and dislike men who
|
|
2038
|
+
are so beguiled and demoralized by the charms of pleasure of the moment, so
|
|
2039
|
+
blinded by desire, that they cannot foresee the pain and trouble that are
|
|
2040
|
+
bound to ensue; and equal blame belongs to those who fail in their duty through
|
|
2041
|
+
weakness of will, which is the same as saying through shrinking from toil and pain.
|
|
2042
|
+
</p>
|
|
2043
|
+
<p>
|
|
2044
|
+
These cases are perfectly simple and easy to distinguish. In a free hour, when
|
|
2045
|
+
our power of choice is untrammelled and when nothing prevents our being able to
|
|
2046
|
+
do what we like best, every pleasure is to be welcomed and every pain avoided.
|
|
2047
|
+
But in certain circumstances and owing to the claims of duty or the obligations
|
|
2048
|
+
of business is will frequently occur that pleasures have to be repudiated and
|
|
2049
|
+
annoyances accepted. The wise man therefore always holds in these matters to
|
|
2050
|
+
this principle of selection: he rejects pleasures to secure other greater
|
|
2051
|
+
pleasures, or else he endures pains to avoid worse pains.
|
|
2052
|
+
</p>
|
|
2053
|
+
<p>
|
|
2054
|
+
On the other hand, we denounce with righteous indignation and dislike men who
|
|
2055
|
+
are so beguiled and demoralized by the charms of pleasure of the moment, so
|
|
2056
|
+
blinded by desire, that they cannot foresee the pain and trouble that are
|
|
2057
|
+
bound to ensue; and equal blame belongs to those who fail in their duty through
|
|
2058
|
+
weakness of will, which is the same as saying through shrinking from toil and pain.
|
|
2059
|
+
</p>
|
|
2060
|
+
<p>
|
|
2061
|
+
These cases are perfectly simple and easy to distinguish. In a free hour, when
|
|
2062
|
+
our power of choice is untrammelled and when nothing prevents our being able to
|
|
2063
|
+
do what we like best, every pleasure is to be welcomed and every pain avoided.
|
|
2064
|
+
But in certain circumstances and owing to the claims of duty or the obligations
|
|
2065
|
+
of business is will frequently occur that pleasures have to be repudiated and
|
|
2066
|
+
annoyances accepted. The wise man therefore always holds in these matters to
|
|
2067
|
+
this principle of selection: he rejects pleasures to secure other greater
|
|
2068
|
+
pleasures, or else he endures pains to avoid worse pains.
|
|
2069
|
+
</p>
|
|
1451
2070
|
</div>
|
|
1452
2071
|
<div class="modal-footer">
|
|
1453
|
-
<button type="button" class="btn btn-
|
|
1454
|
-
<button type="button" class="btn btn-
|
|
2072
|
+
<button type="button" class="btn btn-primary btn-raised mr-2" data-dismiss="modal">Close</button>
|
|
2073
|
+
<button type="button" class="btn btn-secondary btn-raised">Save changes</button>
|
|
1455
2074
|
</div>
|
|
1456
2075
|
</div>
|
|
1457
2076
|
</div>
|
|
1458
2077
|
</div>
|
|
1459
2078
|
++++
|
|
1460
2079
|
|
|
1461
|
-
|
|
1462
|
-
|
|
1463
|
-
|To save space on forms, dialogs can be part of a modal.
|
|
2080
|
+
|*Vertically centered*
|
|
2081
|
+
|For important messages, center the modal.
|
|
1464
2082
|
|
|
|
1465
2083
|
++++
|
|
1466
2084
|
<div class="ml-2 mb-5">
|
|
1467
2085
|
<!-- Button trigger modal -->
|
|
1468
|
-
<button type="button"
|
|
1469
|
-
|
|
2086
|
+
<button type="button"
|
|
2087
|
+
class="btn btn-secondary btn-raised"
|
|
2088
|
+
data-toggle="modal" data-target="#exampleModalVerticalCenter">
|
|
2089
|
+
Launch Example
|
|
1470
2090
|
</button>
|
|
1471
2091
|
</div>
|
|
1472
2092
|
|
|
1473
|
-
|
|
1474
|
-
|
|
1475
|
-
|
|
2093
|
+
<!-- Modal -->
|
|
2094
|
+
<div id="exampleModalVerticalCenter"
|
|
2095
|
+
class="modal fade"
|
|
2096
|
+
tabindex="-1"
|
|
2097
|
+
role="dialog"
|
|
2098
|
+
aria-labelledby="exampleModalVerticalCenterTitle" aria-hidden="true">
|
|
2099
|
+
<div class="modal-dialog modal-dialog-centered">
|
|
1476
2100
|
<div class="modal-content">
|
|
1477
|
-
|
|
1478
|
-
|
|
1479
|
-
<button type="button" class="close
|
|
1480
|
-
|
|
2101
|
+
<div class="modal-header">
|
|
2102
|
+
<h5 id="exampleModalVerticalCenterTitle" class="modal-title notoc">Modal title</h5>
|
|
2103
|
+
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
2104
|
+
<span aria-hidden="true">×</span>
|
|
1481
2105
|
</button>
|
|
1482
|
-
<h4 class="title notoc"><i class="fa fa-pencil"></i> Contact form</h4>
|
|
1483
2106
|
</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>
|
|
2107
|
+
<div class="modal-body">
|
|
2108
|
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
|
|
2109
|
+
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
|
|
2110
|
+
voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
|
|
2111
|
+
</div>
|
|
2112
|
+
<div class="modal-footer">
|
|
2113
|
+
<button type="button" class="btn btn-primary btn-raised mr-2" data-dismiss="modal">Close</button>
|
|
2114
|
+
<button type="button" class="btn btn-secondary btn-raised">Save changes</button>
|
|
1509
2115
|
</div>
|
|
1510
2116
|
</div>
|
|
1511
|
-
<!--/.Content-->
|
|
1512
2117
|
</div>
|
|
1513
2118
|
</div>
|
|
1514
2119
|
++++
|
|
1515
2120
|
|
|
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
2121
|
|*Tooltips and Popovers*
|
|
1588
2122
|
|Tooltips and popovers can be placed within modals as needed. When modals are
|
|
1589
2123
|
closed, any tooltips and popovers within are also automatically dismissed.
|
|
@@ -1591,14 +2125,21 @@ closed, any tooltips and popovers within are also automatically dismissed.
|
|
|
1591
2125
|
++++
|
|
1592
2126
|
<div class="ml-2 mb-5">
|
|
1593
2127
|
<!-- Button trigger modal -->
|
|
1594
|
-
<button type="button"
|
|
1595
|
-
|
|
2128
|
+
<button type="button"
|
|
2129
|
+
class="btn btn-secondary btn-raised"
|
|
2130
|
+
data-toggle="modal"
|
|
2131
|
+
data-target="#exampleModalTooltip">
|
|
2132
|
+
Launch Example
|
|
1596
2133
|
</button>
|
|
1597
2134
|
</div>
|
|
1598
2135
|
|
|
1599
2136
|
<!-- Modal -->
|
|
1600
|
-
<div
|
|
1601
|
-
|
|
2137
|
+
<div id="exampleModalTooltip"
|
|
2138
|
+
class="modal fade"
|
|
2139
|
+
tabindex="-1"
|
|
2140
|
+
role="dialog"
|
|
2141
|
+
aria-labelledby="exampleModalTooltipTitle" aria-hidden="true">
|
|
2142
|
+
<div class="modal-dialog modal-dialog-centered">
|
|
1602
2143
|
<div class="modal-content">
|
|
1603
2144
|
<div class="modal-header">
|
|
1604
2145
|
<h5 class="modal-title notoc" id="exampleModalTooltipTitle">Modal title</h5>
|
|
@@ -1608,14 +2149,14 @@ closed, any tooltips and popovers within are also automatically dismissed.
|
|
|
1608
2149
|
</div>
|
|
1609
2150
|
<div class="modal-body">
|
|
1610
2151
|
<h5>Popover in a modal</h5>
|
|
1611
|
-
<p>This <a href="#" role="button" class="btn btn-secondary btn-
|
|
2152
|
+
<p>This <a href="#" role="button" class="btn btn-secondary 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
2153
|
<hr>
|
|
1613
2154
|
<h5>Tooltips in a modal</h5>
|
|
1614
2155
|
<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
2156
|
</div>
|
|
1616
2157
|
<div class="modal-footer">
|
|
1617
|
-
<button type="button" class="btn btn-
|
|
1618
|
-
<button type="button" class="btn btn-
|
|
2158
|
+
<button type="button" class="btn btn-primary btn-raised mr-2" data-dismiss="modal">Close</button>
|
|
2159
|
+
<button type="button" class="btn btn-secondary btn-raised">Save changes</button>
|
|
1619
2160
|
</div>
|
|
1620
2161
|
</div>
|
|
1621
2162
|
</div>
|
|
@@ -1632,7 +2173,7 @@ bootstrap.bundle.js which contains Popper.js in order for popovers to work.
|
|
|
1632
2173
|
|
|
1633
2174
|
Note: Popovers require the tooltip plugin as a dependency.
|
|
1634
2175
|
|
|
1635
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
|
2176
|
+
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-blue"></i>]
|
|
1636
2177
|
Refer to: link:{bs_doc_components_popovers}[Bootstrap Docs, window="_blank"].
|
|
1637
2178
|
|
|
1638
2179
|
++++
|
|
@@ -1654,7 +2195,7 @@ bootstrap.bundle.js which contains Popper.js in order for tooltips to work.
|
|
|
1654
2195
|
Note: Tooltips are opt-in for performance reasons, so you must initialize
|
|
1655
2196
|
them yourself.
|
|
1656
2197
|
|
|
1657
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
|
2198
|
+
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-blue"></i>]
|
|
1658
2199
|
Refer to: link:{bs_doc_components_tooltips}[Bootstrap Docs, window="_blank"].
|
|
1659
2200
|
|
|
1660
2201
|
++++
|