From a6b48378f8e15cba400d1fef765633fae89bf66f Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Mon, 9 Apr 2018 01:12:55 +0100 Subject: [PATCH 01/56] New docs init --- docs/_data/global.json | 44 + docs/_includes/navbar.html | 253 +--- docs/_javascript/main.js | 7 +- docs/_sass/override.sass | 5 + docs/css/bulma-docs.css | 2686 +++++++++-------------------------- docs/lib/main.js | 7 +- docs/thank-you.html | 2 +- sass/components/navbar.sass | 31 +- 8 files changed, 799 insertions(+), 2236 deletions(-) create mode 100644 docs/_data/global.json diff --git a/docs/_data/global.json b/docs/_data/global.json new file mode 100644 index 00000000..fc5f0e3e --- /dev/null +++ b/docs/_data/global.json @@ -0,0 +1,44 @@ +{ + "more_items": [ + { + "id": "bulma-start", + "color": "success", + "fa_type": "fas", + "fa_icon": "fa-rocket", + "title": "Bulma start", + "description": "A tiny npm package to get started" + }, + { + "id": "made-with-bulma", + "color": "primary", + "fa_type": "fas", + "fa_icon": "fa-certificate", + "title": "Made with Bulma", + "description": "The official community badge" + }, + { + "id": "alternative-to-bootstrap", + "color": "bootstrap", + "fa_type": "fas", + "fa_icon": "fa-exchange-alt", + "title": "Coming from Bootstrap", + "description": "See how Bulma is an alternative to Bootstrap" + }, + { + "id": "backers", + "color": "patreon", + "fa_type": "fab", + "fa_icon": "fa-patreon", + "title": "Patreon backers", + "description": "Everyone who is supporting Bulma" + }, + { + "id": "extensions", + "color": "danger", + "fa_type": "fas", + "fa_icon": "fa-plug", + "title": "Extensions", + "description": "Side projects to enhance Bulma", + } + ] +} diff --git a/docs/_includes/navbar.html b/docs/_includes/navbar.html index 6d419991..4f5f3c92 100644 --- a/docs/_includes/navbar.html +++ b/docs/_includes/navbar.html @@ -1,14 +1,10 @@ - -{% unless include.hide_fortyfour %} - {% include fortyfour.html %} -{% endunless %} diff --git a/docs/_javascript/main.js b/docs/_javascript/main.js index 431b55cb..5bad7b56 100644 --- a/docs/_javascript/main.js +++ b/docs/_javascript/main.js @@ -280,8 +280,11 @@ document.addEventListener('DOMContentLoaded', () => { } const translateFactor = 1 + translateValue / NAVBAR_HEIGHT; - specialShadow.style.opacity = scrollFactor; - specialShadow.style.transform = 'scaleY(' + translateFactor + ')'; + + if (specialShadow) { + specialShadow.style.opacity = scrollFactor; + specialShadow.style.transform = 'scaleY(' + translateFactor + ')'; + } } translateHeader(window.scrollY, false); diff --git a/docs/_sass/override.sass b/docs/_sass/override.sass index 19e048b4..44d1a139 100644 --- a/docs/_sass/override.sass +++ b/docs/_sass/override.sass @@ -11,6 +11,11 @@ body.page-grid .column > .notification padding-right: 0 text-align: center +a.navbar-item + & > .icon:not(:last-child) + margin-left: -0.25em + margin-right: 0.25em + +tablet .header-item .button + .button margin-left: 0.75rem diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index d05d2ec2..6b3f2098 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -1,23 +1,11 @@ @charset "UTF-8"; /*! bulma.io v0.6.2 | MIT License | github.com/jgthms/bulma */ -@-webkit-keyframes spinAround { - from { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - to { - -webkit-transform: rotate(359deg); - transform: rotate(359deg); - } -} @keyframes spinAround { from { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); + transform: rotate(0deg); } to { - -webkit-transform: rotate(359deg); - transform: rotate(359deg); + transform: rotate(359deg); } } @@ -41,10 +29,8 @@ height: 0.5em; pointer-events: none; position: absolute; - -webkit-transform: rotate(-45deg); - transform: rotate(-45deg); - -webkit-transform-origin: center; - transform-origin: center; + transform: rotate(-45deg); + transform-origin: center; width: 0.5em; } @@ -61,11 +47,8 @@ border-radius: 290486px; cursor: pointer; display: inline-block; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - -ms-flex-negative: 0; - flex-shrink: 0; + flex-grow: 0; + flex-shrink: 0; font-size: 0; height: 20px; max-height: 20px; @@ -85,10 +68,8 @@ left: 50%; position: absolute; top: 50%; - -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg); - transform: translateX(-50%) translateY(-50%) rotate(45deg); - -webkit-transform-origin: center center; - transform-origin: center center; + transform: translateX(-50%) translateY(-50%) rotate(45deg); + transform-origin: center center; } .delete::before, .modal-close::before { @@ -137,8 +118,7 @@ } .button.is-loading::after, .select.is-loading::after, .control.is-loading::after, .loader, .intro-spinner::before { - -webkit-animation: spinAround 500ms infinite linear; - animation: spinAround 500ms infinite linear; + animation: spinAround 500ms infinite linear; border: 2px solid #dbdbdb; border-radius: 290486px; border-right-color: transparent; @@ -168,21 +148,14 @@ .pagination-ellipsis { -moz-appearance: none; -webkit-appearance: none; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + align-items: center; border: 1px solid transparent; border-radius: 3px; - -webkit-box-shadow: none; - box-shadow: none; - display: -webkit-inline-box; - display: -ms-inline-flexbox; + box-shadow: none; display: inline-flex; font-size: 1rem; height: 2.25em; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; + justify-content: flex-start; line-height: 1.5; padding-bottom: calc(0.375em - 1px); padding-left: calc(0.625em - 1px); @@ -275,13 +248,11 @@ textarea { } html { - -webkit-box-sizing: border-box; - box-sizing: border-box; + box-sizing: border-box; } *, *::before, *::after { - -webkit-box-sizing: inherit; - box-sizing: inherit; + box-sizing: inherit; } img, @@ -318,10 +289,7 @@ html { overflow-x: hidden; overflow-y: scroll; text-rendering: optimizeLegibility; - -webkit-text-size-adjust: 100%; - -moz-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; - text-size-adjust: 100%; + text-size-adjust: 100%; } article, @@ -1107,79 +1075,59 @@ a.has-text-danger:hover, a.has-text-danger:focus { } .is-flex { - display: -webkit-box !important; - display: -ms-flexbox !important; display: flex !important; } @media screen and (max-width: 768px) { .is-flex-mobile { - display: -webkit-box !important; - display: -ms-flexbox !important; display: flex !important; } } @media screen and (min-width: 769px), print { .is-flex-tablet { - display: -webkit-box !important; - display: -ms-flexbox !important; display: flex !important; } } @media screen and (min-width: 769px) and (max-width: 1023px) { .is-flex-tablet-only { - display: -webkit-box !important; - display: -ms-flexbox !important; display: flex !important; } } @media screen and (max-width: 1023px) { .is-flex-touch { - display: -webkit-box !important; - display: -ms-flexbox !important; display: flex !important; } } @media screen and (min-width: 1024px) { .is-flex-desktop { - display: -webkit-box !important; - display: -ms-flexbox !important; display: flex !important; } } @media screen and (min-width: 1024px) and (max-width: 1215px) { .is-flex-desktop-only { - display: -webkit-box !important; - display: -ms-flexbox !important; display: flex !important; } } @media screen and (min-width: 1216px) { .is-flex-widescreen { - display: -webkit-box !important; - display: -ms-flexbox !important; display: flex !important; } } @media screen and (min-width: 1216px) and (max-width: 1407px) { .is-flex-widescreen-only { - display: -webkit-box !important; - display: -ms-flexbox !important; display: flex !important; } } @media screen and (min-width: 1408px) { .is-flex-fullhd { - display: -webkit-box !important; - display: -ms-flexbox !important; display: flex !important; } } @@ -1301,79 +1249,59 @@ a.has-text-danger:hover, a.has-text-danger:focus { } .is-inline-flex { - display: -webkit-inline-box !important; - display: -ms-inline-flexbox !important; display: inline-flex !important; } @media screen and (max-width: 768px) { .is-inline-flex-mobile { - display: -webkit-inline-box !important; - display: -ms-inline-flexbox !important; display: inline-flex !important; } } @media screen and (min-width: 769px), print { .is-inline-flex-tablet { - display: -webkit-inline-box !important; - display: -ms-inline-flexbox !important; display: inline-flex !important; } } @media screen and (min-width: 769px) and (max-width: 1023px) { .is-inline-flex-tablet-only { - display: -webkit-inline-box !important; - display: -ms-inline-flexbox !important; display: inline-flex !important; } } @media screen and (max-width: 1023px) { .is-inline-flex-touch { - display: -webkit-inline-box !important; - display: -ms-inline-flexbox !important; display: inline-flex !important; } } @media screen and (min-width: 1024px) { .is-inline-flex-desktop { - display: -webkit-inline-box !important; - display: -ms-inline-flexbox !important; display: inline-flex !important; } } @media screen and (min-width: 1024px) and (max-width: 1215px) { .is-inline-flex-desktop-only { - display: -webkit-inline-box !important; - display: -ms-inline-flexbox !important; display: inline-flex !important; } } @media screen and (min-width: 1216px) { .is-inline-flex-widescreen { - display: -webkit-inline-box !important; - display: -ms-inline-flexbox !important; display: inline-flex !important; } } @media screen and (min-width: 1216px) and (max-width: 1407px) { .is-inline-flex-widescreen-only { - display: -webkit-inline-box !important; - display: -ms-inline-flexbox !important; display: inline-flex !important; } } @media screen and (min-width: 1408px) { .is-inline-flex-fullhd { - display: -webkit-inline-box !important; - display: -ms-inline-flexbox !important; display: inline-flex !important; } } @@ -1507,28 +1435,24 @@ a.has-text-danger:hover, a.has-text-danger:focus { } .is-shadowless { - -webkit-box-shadow: none !important; - box-shadow: none !important; + box-shadow: none !important; } .box { background-color: white; border-radius: 5px; - -webkit-box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1); - box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1); + box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1); color: #4a4a4a; display: block; padding: 1.25rem; } a.box:hover, a.box:focus { - -webkit-box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px #3273dc; - box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px #3273dc; + box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px #3273dc; } a.box:active { - -webkit-box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2), 0 0 0 1px #3273dc; - box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2), 0 0 0 1px #3273dc; + box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2), 0 0 0 1px #3273dc; } .button { @@ -1537,9 +1461,7 @@ a.box:active { border-width: 1px; color: #363636; cursor: pointer; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; padding-bottom: calc(0.375em - 1px); padding-left: 0.75em; padding-right: 0.75em; @@ -1583,8 +1505,7 @@ a.box:active { } .button:focus:not(:active), .button.is-focused:not(:active) { - -webkit-box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25); - box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25); + box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25); } .button:active, .button.is-active { @@ -1612,8 +1533,7 @@ a.box:active { .button.is-text[disabled] { background-color: transparent; border-color: transparent; - -webkit-box-shadow: none; - box-shadow: none; + box-shadow: none; } .button.is-white { @@ -1634,8 +1554,7 @@ a.box:active { } .button.is-white:focus:not(:active), .button.is-white.is-focused:not(:active) { - -webkit-box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25); - box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25); + box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25); } .button.is-white:active, .button.is-white.is-active { @@ -1647,8 +1566,7 @@ a.box:active { .button.is-white[disabled] { background-color: white; border-color: transparent; - -webkit-box-shadow: none; - box-shadow: none; + box-shadow: none; } .button.is-white.is-inverted { @@ -1663,8 +1581,7 @@ a.box:active { .button.is-white.is-inverted[disabled] { background-color: #0a0a0a; border-color: transparent; - -webkit-box-shadow: none; - box-shadow: none; + box-shadow: none; color: white; } @@ -1691,8 +1608,7 @@ a.box:active { .button.is-white.is-outlined[disabled] { background-color: transparent; border-color: white; - -webkit-box-shadow: none; - box-shadow: none; + box-shadow: none; color: white; } @@ -1710,8 +1626,7 @@ a.box:active { .button.is-white.is-inverted.is-outlined[disabled] { background-color: transparent; border-color: #0a0a0a; - -webkit-box-shadow: none; - box-shadow: none; + box-shadow: none; color: #0a0a0a; } @@ -1733,8 +1648,7 @@ a.box:active { } .button.is-black:focus:not(:active), .button.is-black.is-focused:not(:active) { - -webkit-box-shadow: 0 0 0 0.125em rgba(10, 10, 10, 0.25); - box-shadow: 0 0 0 0.125em rgba(10, 10, 10, 0.25); + box-shadow: 0 0 0 0.125em rgba(10, 10, 10, 0.25); } .button.is-black:active, .button.is-black.is-active { @@ -1746,8 +1660,7 @@ a.box:active { .button.is-black[disabled] { background-color: #0a0a0a; border-color: transparent; - -webkit-box-shadow: none; - box-shadow: none; + box-shadow: none; } .button.is-black.is-inverted { @@ -1762,8 +1675,7 @@ a.box:active { .button.is-black.is-inverted[disabled] { background-color: white; border-color: transparent; - -webkit-box-shadow: none; - box-shadow: none; + box-shadow: none; color: #0a0a0a; } @@ -1790,8 +1702,7 @@ a.box:active { .button.is-black.is-outlined[disabled] { background-color: transparent; border-color: #0a0a0a; - -webkit-box-shadow: none; - box-shadow: none; + box-shadow: none; color: #0a0a0a; } @@ -1809,8 +1720,7 @@ a.box:active { .button.is-black.is-inverted.is-outlined[disabled] { background-color: transparent; border-color: white; - -webkit-box-shadow: none; - box-shadow: none; + box-shadow: none; color: white; } @@ -1832,8 +1742,7 @@ a.box:active { } .button.is-light:focus:not(:active), .button.is-light.is-focused:not(:active) { - -webkit-box-shadow: 0 0 0 0.125em rgba(245, 245, 245, 0.25); - box-shadow: 0 0 0 0.125em rgba(245, 245, 245, 0.25); + box-shadow: 0 0 0 0.125em rgba(245, 245, 245, 0.25); } .button.is-light:active, .button.is-light.is-active { @@ -1845,8 +1754,7 @@ a.box:active { .button.is-light[disabled] { background-color: whitesmoke; border-color: transparent; - -webkit-box-shadow: none; - box-shadow: none; + box-shadow: none; } .button.is-light.is-inverted { @@ -1861,8 +1769,7 @@ a.box:active { .button.is-light.is-inverted[disabled] { background-color: #363636; border-color: transparent; - -webkit-box-shadow: none; - box-shadow: none; + box-shadow: none; color: whitesmoke; } @@ -1889,8 +1796,7 @@ a.box:active { .button.is-light.is-outlined[disabled] { background-color: transparent; border-color: whitesmoke; - -webkit-box-shadow: none; - box-shadow: none; + box-shadow: none; color: whitesmoke; } @@ -1908,8 +1814,7 @@ a.box:active { .button.is-light.is-inverted.is-outlined[disabled] { background-color: transparent; border-color: #363636; - -webkit-box-shadow: none; - box-shadow: none; + box-shadow: none; color: #363636; } @@ -1931,8 +1836,7 @@ a.box:active { } .button.is-dark:focus:not(:active), .button.is-dark.is-focused:not(:active) { - -webkit-box-shadow: 0 0 0 0.125em rgba(54, 54, 54, 0.25); - box-shadow: 0 0 0 0.125em rgba(54, 54, 54, 0.25); + box-shadow: 0 0 0 0.125em rgba(54, 54, 54, 0.25); } .button.is-dark:active, .button.is-dark.is-active { @@ -1944,8 +1848,7 @@ a.box:active { .button.is-dark[disabled] { background-color: #363636; border-color: transparent; - -webkit-box-shadow: none; - box-shadow: none; + box-shadow: none; } .button.is-dark.is-inverted { @@ -1960,8 +1863,7 @@ a.box:active { .button.is-dark.is-inverted[disabled] { background-color: whitesmoke; border-color: transparent; - -webkit-box-shadow: none; - box-shadow: none; + box-shadow: none; color: #363636; } @@ -1988,8 +1890,7 @@ a.box:active { .button.is-dark.is-outlined[disabled] { background-color: transparent; border-color: #363636; - -webkit-box-shadow: none; - box-shadow: none; + box-shadow: none; color: #363636; } @@ -2007,8 +1908,7 @@ a.box:active { .button.is-dark.is-inverted.is-outlined[disabled] { background-color: transparent; border-color: whitesmoke; - -webkit-box-shadow: none; - box-shadow: none; + box-shadow: none; color: whitesmoke; } @@ -2030,8 +1930,7 @@ a.box:active { } .button.is-primary:focus:not(:active), .button.is-primary.is-focused:not(:active) { - -webkit-box-shadow: 0 0 0 0.125em rgba(0, 209, 178, 0.25); - box-shadow: 0 0 0 0.125em rgba(0, 209, 178, 0.25); + box-shadow: 0 0 0 0.125em rgba(0, 209, 178, 0.25); } .button.is-primary:active, .button.is-primary.is-active { @@ -2043,8 +1942,7 @@ a.box:active { .button.is-primary[disabled] { background-color: #00d1b2; border-color: transparent; - -webkit-box-shadow: none; - box-shadow: none; + box-shadow: none; } .button.is-primary.is-inverted { @@ -2059,8 +1957,7 @@ a.box:active { .button.is-primary.is-inverted[disabled] { background-color: #fff; border-color: transparent; - -webkit-box-shadow: none; - box-shadow: none; + box-shadow: none; color: #00d1b2; } @@ -2087,8 +1984,7 @@ a.box:active { .button.is-primary.is-outlined[disabled] { background-color: transparent; border-color: #00d1b2; - -webkit-box-shadow: none; - box-shadow: none; + box-shadow: none; color: #00d1b2; } @@ -2106,8 +2002,7 @@ a.box:active { .button.is-primary.is-inverted.is-outlined[disabled] { background-color: transparent; border-color: #fff; - -webkit-box-shadow: none; - box-shadow: none; + box-shadow: none; color: #fff; } @@ -2129,8 +2024,7 @@ a.box:active { } .button.is-link:focus:not(:active), .button.is-link.is-focused:not(:active) { - -webkit-box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25); - box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25); + box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25); } .button.is-link:active, .button.is-link.is-active { @@ -2142,8 +2036,7 @@ a.box:active { .button.is-link[disabled] { background-color: #3273dc; border-color: transparent; - -webkit-box-shadow: none; - box-shadow: none; + box-shadow: none; } .button.is-link.is-inverted { @@ -2158,8 +2051,7 @@ a.box:active { .button.is-link.is-inverted[disabled] { background-color: #fff; border-color: transparent; - -webkit-box-shadow: none; - box-shadow: none; + box-shadow: none; color: #3273dc; } @@ -2186,8 +2078,7 @@ a.box:active { .button.is-link.is-outlined[disabled] { background-color: transparent; border-color: #3273dc; - -webkit-box-shadow: none; - box-shadow: none; + box-shadow: none; color: #3273dc; } @@ -2205,8 +2096,7 @@ a.box:active { .button.is-link.is-inverted.is-outlined[disabled] { background-color: transparent; border-color: #fff; - -webkit-box-shadow: none; - box-shadow: none; + box-shadow: none; color: #fff; } @@ -2228,8 +2118,7 @@ a.box:active { } .button.is-info:focus:not(:active), .button.is-info.is-focused:not(:active) { - -webkit-box-shadow: 0 0 0 0.125em rgba(32, 156, 238, 0.25); - box-shadow: 0 0 0 0.125em rgba(32, 156, 238, 0.25); + box-shadow: 0 0 0 0.125em rgba(32, 156, 238, 0.25); } .button.is-info:active, .button.is-info.is-active { @@ -2241,8 +2130,7 @@ a.box:active { .button.is-info[disabled] { background-color: #209cee; border-color: transparent; - -webkit-box-shadow: none; - box-shadow: none; + box-shadow: none; } .button.is-info.is-inverted { @@ -2257,8 +2145,7 @@ a.box:active { .button.is-info.is-inverted[disabled] { background-color: #fff; border-color: transparent; - -webkit-box-shadow: none; - box-shadow: none; + box-shadow: none; color: #209cee; } @@ -2285,8 +2172,7 @@ a.box:active { .button.is-info.is-outlined[disabled] { background-color: transparent; border-color: #209cee; - -webkit-box-shadow: none; - box-shadow: none; + box-shadow: none; color: #209cee; } @@ -2304,8 +2190,7 @@ a.box:active { .button.is-info.is-inverted.is-outlined[disabled] { background-color: transparent; border-color: #fff; - -webkit-box-shadow: none; - box-shadow: none; + box-shadow: none; color: #fff; } @@ -2327,8 +2212,7 @@ a.box:active { } .button.is-success:focus:not(:active), .button.is-success.is-focused:not(:active) { - -webkit-box-shadow: 0 0 0 0.125em rgba(35, 209, 96, 0.25); - box-shadow: 0 0 0 0.125em rgba(35, 209, 96, 0.25); + box-shadow: 0 0 0 0.125em rgba(35, 209, 96, 0.25); } .button.is-success:active, .button.is-success.is-active { @@ -2340,8 +2224,7 @@ a.box:active { .button.is-success[disabled] { background-color: #23d160; border-color: transparent; - -webkit-box-shadow: none; - box-shadow: none; + box-shadow: none; } .button.is-success.is-inverted { @@ -2356,8 +2239,7 @@ a.box:active { .button.is-success.is-inverted[disabled] { background-color: #fff; border-color: transparent; - -webkit-box-shadow: none; - box-shadow: none; + box-shadow: none; color: #23d160; } @@ -2384,8 +2266,7 @@ a.box:active { .button.is-success.is-outlined[disabled] { background-color: transparent; border-color: #23d160; - -webkit-box-shadow: none; - box-shadow: none; + box-shadow: none; color: #23d160; } @@ -2403,8 +2284,7 @@ a.box:active { .button.is-success.is-inverted.is-outlined[disabled] { background-color: transparent; border-color: #fff; - -webkit-box-shadow: none; - box-shadow: none; + box-shadow: none; color: #fff; } @@ -2426,8 +2306,7 @@ a.box:active { } .button.is-warning:focus:not(:active), .button.is-warning.is-focused:not(:active) { - -webkit-box-shadow: 0 0 0 0.125em rgba(255, 221, 87, 0.25); - box-shadow: 0 0 0 0.125em rgba(255, 221, 87, 0.25); + box-shadow: 0 0 0 0.125em rgba(255, 221, 87, 0.25); } .button.is-warning:active, .button.is-warning.is-active { @@ -2439,8 +2318,7 @@ a.box:active { .button.is-warning[disabled] { background-color: #ffdd57; border-color: transparent; - -webkit-box-shadow: none; - box-shadow: none; + box-shadow: none; } .button.is-warning.is-inverted { @@ -2455,8 +2333,7 @@ a.box:active { .button.is-warning.is-inverted[disabled] { background-color: rgba(0, 0, 0, 0.7); border-color: transparent; - -webkit-box-shadow: none; - box-shadow: none; + box-shadow: none; color: #ffdd57; } @@ -2483,8 +2360,7 @@ a.box:active { .button.is-warning.is-outlined[disabled] { background-color: transparent; border-color: #ffdd57; - -webkit-box-shadow: none; - box-shadow: none; + box-shadow: none; color: #ffdd57; } @@ -2502,8 +2378,7 @@ a.box:active { .button.is-warning.is-inverted.is-outlined[disabled] { background-color: transparent; border-color: rgba(0, 0, 0, 0.7); - -webkit-box-shadow: none; - box-shadow: none; + box-shadow: none; color: rgba(0, 0, 0, 0.7); } @@ -2525,8 +2400,7 @@ a.box:active { } .button.is-danger:focus:not(:active), .button.is-danger.is-focused:not(:active) { - -webkit-box-shadow: 0 0 0 0.125em rgba(255, 56, 96, 0.25); - box-shadow: 0 0 0 0.125em rgba(255, 56, 96, 0.25); + box-shadow: 0 0 0 0.125em rgba(255, 56, 96, 0.25); } .button.is-danger:active, .button.is-danger.is-active { @@ -2538,8 +2412,7 @@ a.box:active { .button.is-danger[disabled] { background-color: #ff3860; border-color: transparent; - -webkit-box-shadow: none; - box-shadow: none; + box-shadow: none; } .button.is-danger.is-inverted { @@ -2554,8 +2427,7 @@ a.box:active { .button.is-danger.is-inverted[disabled] { background-color: #fff; border-color: transparent; - -webkit-box-shadow: none; - box-shadow: none; + box-shadow: none; color: #ff3860; } @@ -2582,8 +2454,7 @@ a.box:active { .button.is-danger.is-outlined[disabled] { background-color: transparent; border-color: #ff3860; - -webkit-box-shadow: none; - box-shadow: none; + box-shadow: none; color: #ff3860; } @@ -2601,8 +2472,7 @@ a.box:active { .button.is-danger.is-inverted.is-outlined[disabled] { background-color: transparent; border-color: #fff; - -webkit-box-shadow: none; - box-shadow: none; + box-shadow: none; color: #fff; } @@ -2622,14 +2492,11 @@ a.box:active { .button[disabled] { background-color: white; border-color: #dbdbdb; - -webkit-box-shadow: none; - box-shadow: none; + box-shadow: none; opacity: 0.5; } .button.is-fullwidth { - display: -webkit-box; - display: -ms-flexbox; display: flex; width: 100%; } @@ -2650,8 +2517,7 @@ a.box:active { background-color: whitesmoke; border-color: #dbdbdb; color: #7a7a7a; - -webkit-box-shadow: none; - box-shadow: none; + box-shadow: none; pointer-events: none; } @@ -2662,17 +2528,10 @@ a.box:active { } .buttons { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -ms-flexbox; + align-items: center; display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; + flex-wrap: wrap; + justify-content: flex-start; } .buttons .button { @@ -2719,21 +2578,15 @@ a.box:active { } .buttons.has-addons .button.is-expanded { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; + flex-grow: 1; } .buttons.is-centered { - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; } .buttons.is-right { - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; + justify-content: flex-end; } .container { @@ -2966,8 +2819,7 @@ a.box:active { background-color: white; border-color: #dbdbdb; color: #363636; - -webkit-box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1); - box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1); + box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1); max-width: 100%; width: 100%; } @@ -3004,16 +2856,14 @@ a.box:active { .textarea:active, .textarea.is-active { border-color: #3273dc; - -webkit-box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25); - box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25); + box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25); } .input[disabled], .textarea[disabled] { background-color: whitesmoke; border-color: whitesmoke; - -webkit-box-shadow: none; - box-shadow: none; + box-shadow: none; color: #7a7a7a; } @@ -3039,8 +2889,7 @@ a.box:active { .input[readonly], .textarea[readonly] { - -webkit-box-shadow: none; - box-shadow: none; + box-shadow: none; } .input.is-white, @@ -3053,8 +2902,7 @@ a.box:active { .textarea.is-white.is-focused, .textarea.is-white:active, .textarea.is-white.is-active { - -webkit-box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25); - box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25); + box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25); } .input.is-black, @@ -3067,8 +2915,7 @@ a.box:active { .textarea.is-black.is-focused, .textarea.is-black:active, .textarea.is-black.is-active { - -webkit-box-shadow: 0 0 0 0.125em rgba(10, 10, 10, 0.25); - box-shadow: 0 0 0 0.125em rgba(10, 10, 10, 0.25); + box-shadow: 0 0 0 0.125em rgba(10, 10, 10, 0.25); } .input.is-light, @@ -3081,8 +2928,7 @@ a.box:active { .textarea.is-light.is-focused, .textarea.is-light:active, .textarea.is-light.is-active { - -webkit-box-shadow: 0 0 0 0.125em rgba(245, 245, 245, 0.25); - box-shadow: 0 0 0 0.125em rgba(245, 245, 245, 0.25); + box-shadow: 0 0 0 0.125em rgba(245, 245, 245, 0.25); } .input.is-dark, @@ -3095,8 +2941,7 @@ a.box:active { .textarea.is-dark.is-focused, .textarea.is-dark:active, .textarea.is-dark.is-active { - -webkit-box-shadow: 0 0 0 0.125em rgba(54, 54, 54, 0.25); - box-shadow: 0 0 0 0.125em rgba(54, 54, 54, 0.25); + box-shadow: 0 0 0 0.125em rgba(54, 54, 54, 0.25); } .input.is-primary, @@ -3109,8 +2954,7 @@ a.box:active { .textarea.is-primary.is-focused, .textarea.is-primary:active, .textarea.is-primary.is-active { - -webkit-box-shadow: 0 0 0 0.125em rgba(0, 209, 178, 0.25); - box-shadow: 0 0 0 0.125em rgba(0, 209, 178, 0.25); + box-shadow: 0 0 0 0.125em rgba(0, 209, 178, 0.25); } .input.is-link, @@ -3123,8 +2967,7 @@ a.box:active { .textarea.is-link.is-focused, .textarea.is-link:active, .textarea.is-link.is-active { - -webkit-box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25); - box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25); + box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25); } .input.is-info, @@ -3137,8 +2980,7 @@ a.box:active { .textarea.is-info.is-focused, .textarea.is-info:active, .textarea.is-info.is-active { - -webkit-box-shadow: 0 0 0 0.125em rgba(32, 156, 238, 0.25); - box-shadow: 0 0 0 0.125em rgba(32, 156, 238, 0.25); + box-shadow: 0 0 0 0.125em rgba(32, 156, 238, 0.25); } .input.is-success, @@ -3151,8 +2993,7 @@ a.box:active { .textarea.is-success.is-focused, .textarea.is-success:active, .textarea.is-success.is-active { - -webkit-box-shadow: 0 0 0 0.125em rgba(35, 209, 96, 0.25); - box-shadow: 0 0 0 0.125em rgba(35, 209, 96, 0.25); + box-shadow: 0 0 0 0.125em rgba(35, 209, 96, 0.25); } .input.is-warning, @@ -3165,8 +3006,7 @@ a.box:active { .textarea.is-warning.is-focused, .textarea.is-warning:active, .textarea.is-warning.is-active { - -webkit-box-shadow: 0 0 0 0.125em rgba(255, 221, 87, 0.25); - box-shadow: 0 0 0 0.125em rgba(255, 221, 87, 0.25); + box-shadow: 0 0 0 0.125em rgba(255, 221, 87, 0.25); } .input.is-danger, @@ -3179,8 +3019,7 @@ a.box:active { .textarea.is-danger.is-focused, .textarea.is-danger:active, .textarea.is-danger.is-active { - -webkit-box-shadow: 0 0 0 0.125em rgba(255, 56, 96, 0.25); - box-shadow: 0 0 0 0.125em rgba(255, 56, 96, 0.25); + box-shadow: 0 0 0 0.125em rgba(255, 56, 96, 0.25); } .input.is-small, @@ -3220,8 +3059,7 @@ a.box:active { .input.is-static { background-color: transparent; border-color: transparent; - -webkit-box-shadow: none; - box-shadow: none; + box-shadow: none; padding-left: 0; padding-right: 0; } @@ -3332,15 +3170,13 @@ a.box:active { .select select:focus, .select select.is-focused, .select select:active, .select select.is-active { border-color: #3273dc; - -webkit-box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25); - box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25); + box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25); } .select select[disabled] { background-color: whitesmoke; border-color: whitesmoke; - -webkit-box-shadow: none; - box-shadow: none; + box-shadow: none; color: #7a7a7a; } @@ -3390,8 +3226,7 @@ a.box:active { } .select.is-white select:focus, .select.is-white select.is-focused, .select.is-white select:active, .select.is-white select.is-active { - -webkit-box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25); - box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25); + box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25); } .select.is-black select { @@ -3399,8 +3234,7 @@ a.box:active { } .select.is-black select:focus, .select.is-black select.is-focused, .select.is-black select:active, .select.is-black select.is-active { - -webkit-box-shadow: 0 0 0 0.125em rgba(10, 10, 10, 0.25); - box-shadow: 0 0 0 0.125em rgba(10, 10, 10, 0.25); + box-shadow: 0 0 0 0.125em rgba(10, 10, 10, 0.25); } .select.is-light select { @@ -3408,8 +3242,7 @@ a.box:active { } .select.is-light select:focus, .select.is-light select.is-focused, .select.is-light select:active, .select.is-light select.is-active { - -webkit-box-shadow: 0 0 0 0.125em rgba(245, 245, 245, 0.25); - box-shadow: 0 0 0 0.125em rgba(245, 245, 245, 0.25); + box-shadow: 0 0 0 0.125em rgba(245, 245, 245, 0.25); } .select.is-dark select { @@ -3417,8 +3250,7 @@ a.box:active { } .select.is-dark select:focus, .select.is-dark select.is-focused, .select.is-dark select:active, .select.is-dark select.is-active { - -webkit-box-shadow: 0 0 0 0.125em rgba(54, 54, 54, 0.25); - box-shadow: 0 0 0 0.125em rgba(54, 54, 54, 0.25); + box-shadow: 0 0 0 0.125em rgba(54, 54, 54, 0.25); } .select.is-primary select { @@ -3426,8 +3258,7 @@ a.box:active { } .select.is-primary select:focus, .select.is-primary select.is-focused, .select.is-primary select:active, .select.is-primary select.is-active { - -webkit-box-shadow: 0 0 0 0.125em rgba(0, 209, 178, 0.25); - box-shadow: 0 0 0 0.125em rgba(0, 209, 178, 0.25); + box-shadow: 0 0 0 0.125em rgba(0, 209, 178, 0.25); } .select.is-link select { @@ -3435,8 +3266,7 @@ a.box:active { } .select.is-link select:focus, .select.is-link select.is-focused, .select.is-link select:active, .select.is-link select.is-active { - -webkit-box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25); - box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25); + box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25); } .select.is-info select { @@ -3444,8 +3274,7 @@ a.box:active { } .select.is-info select:focus, .select.is-info select.is-focused, .select.is-info select:active, .select.is-info select.is-active { - -webkit-box-shadow: 0 0 0 0.125em rgba(32, 156, 238, 0.25); - box-shadow: 0 0 0 0.125em rgba(32, 156, 238, 0.25); + box-shadow: 0 0 0 0.125em rgba(32, 156, 238, 0.25); } .select.is-success select { @@ -3453,8 +3282,7 @@ a.box:active { } .select.is-success select:focus, .select.is-success select.is-focused, .select.is-success select:active, .select.is-success select.is-active { - -webkit-box-shadow: 0 0 0 0.125em rgba(35, 209, 96, 0.25); - box-shadow: 0 0 0 0.125em rgba(35, 209, 96, 0.25); + box-shadow: 0 0 0 0.125em rgba(35, 209, 96, 0.25); } .select.is-warning select { @@ -3462,8 +3290,7 @@ a.box:active { } .select.is-warning select:focus, .select.is-warning select.is-focused, .select.is-warning select:active, .select.is-warning select.is-active { - -webkit-box-shadow: 0 0 0 0.125em rgba(255, 221, 87, 0.25); - box-shadow: 0 0 0 0.125em rgba(255, 221, 87, 0.25); + box-shadow: 0 0 0 0.125em rgba(255, 221, 87, 0.25); } .select.is-danger select { @@ -3471,8 +3298,7 @@ a.box:active { } .select.is-danger select:focus, .select.is-danger select.is-focused, .select.is-danger select:active, .select.is-danger select.is-active { - -webkit-box-shadow: 0 0 0 0.125em rgba(255, 56, 96, 0.25); - box-shadow: 0 0 0 0.125em rgba(255, 56, 96, 0.25); + box-shadow: 0 0 0 0.125em rgba(255, 56, 96, 0.25); } .select.is-small { @@ -3505,8 +3331,7 @@ a.box:active { position: absolute; right: 0.625em; top: 0.625em; - -webkit-transform: none; - transform: none; + transform: none; } .select.is-loading.is-small:after { @@ -3522,15 +3347,9 @@ a.box:active { } .file { - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; - display: -webkit-box; - display: -ms-flexbox; + align-items: stretch; display: flex; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; + justify-content: flex-start; position: relative; } @@ -3548,8 +3367,7 @@ a.box:active { .file.is-white:focus .file-cta, .file.is-white.is-focused .file-cta { border-color: transparent; - -webkit-box-shadow: 0 0 0.5em rgba(255, 255, 255, 0.25); - box-shadow: 0 0 0.5em rgba(255, 255, 255, 0.25); + box-shadow: 0 0 0.5em rgba(255, 255, 255, 0.25); color: #0a0a0a; } @@ -3573,8 +3391,7 @@ a.box:active { .file.is-black:focus .file-cta, .file.is-black.is-focused .file-cta { border-color: transparent; - -webkit-box-shadow: 0 0 0.5em rgba(10, 10, 10, 0.25); - box-shadow: 0 0 0.5em rgba(10, 10, 10, 0.25); + box-shadow: 0 0 0.5em rgba(10, 10, 10, 0.25); color: white; } @@ -3598,8 +3415,7 @@ a.box:active { .file.is-light:focus .file-cta, .file.is-light.is-focused .file-cta { border-color: transparent; - -webkit-box-shadow: 0 0 0.5em rgba(245, 245, 245, 0.25); - box-shadow: 0 0 0.5em rgba(245, 245, 245, 0.25); + box-shadow: 0 0 0.5em rgba(245, 245, 245, 0.25); color: #363636; } @@ -3623,8 +3439,7 @@ a.box:active { .file.is-dark:focus .file-cta, .file.is-dark.is-focused .file-cta { border-color: transparent; - -webkit-box-shadow: 0 0 0.5em rgba(54, 54, 54, 0.25); - box-shadow: 0 0 0.5em rgba(54, 54, 54, 0.25); + box-shadow: 0 0 0.5em rgba(54, 54, 54, 0.25); color: whitesmoke; } @@ -3648,8 +3463,7 @@ a.box:active { .file.is-primary:focus .file-cta, .file.is-primary.is-focused .file-cta { border-color: transparent; - -webkit-box-shadow: 0 0 0.5em rgba(0, 209, 178, 0.25); - box-shadow: 0 0 0.5em rgba(0, 209, 178, 0.25); + box-shadow: 0 0 0.5em rgba(0, 209, 178, 0.25); color: #fff; } @@ -3673,8 +3487,7 @@ a.box:active { .file.is-link:focus .file-cta, .file.is-link.is-focused .file-cta { border-color: transparent; - -webkit-box-shadow: 0 0 0.5em rgba(50, 115, 220, 0.25); - box-shadow: 0 0 0.5em rgba(50, 115, 220, 0.25); + box-shadow: 0 0 0.5em rgba(50, 115, 220, 0.25); color: #fff; } @@ -3698,8 +3511,7 @@ a.box:active { .file.is-info:focus .file-cta, .file.is-info.is-focused .file-cta { border-color: transparent; - -webkit-box-shadow: 0 0 0.5em rgba(32, 156, 238, 0.25); - box-shadow: 0 0 0.5em rgba(32, 156, 238, 0.25); + box-shadow: 0 0 0.5em rgba(32, 156, 238, 0.25); color: #fff; } @@ -3723,8 +3535,7 @@ a.box:active { .file.is-success:focus .file-cta, .file.is-success.is-focused .file-cta { border-color: transparent; - -webkit-box-shadow: 0 0 0.5em rgba(35, 209, 96, 0.25); - box-shadow: 0 0 0.5em rgba(35, 209, 96, 0.25); + box-shadow: 0 0 0.5em rgba(35, 209, 96, 0.25); color: #fff; } @@ -3748,8 +3559,7 @@ a.box:active { .file.is-warning:focus .file-cta, .file.is-warning.is-focused .file-cta { border-color: transparent; - -webkit-box-shadow: 0 0 0.5em rgba(255, 221, 87, 0.25); - box-shadow: 0 0 0.5em rgba(255, 221, 87, 0.25); + box-shadow: 0 0 0.5em rgba(255, 221, 87, 0.25); color: rgba(0, 0, 0, 0.7); } @@ -3773,8 +3583,7 @@ a.box:active { .file.is-danger:focus .file-cta, .file.is-danger.is-focused .file-cta { border-color: transparent; - -webkit-box-shadow: 0 0 0.5em rgba(255, 56, 96, 0.25); - box-shadow: 0 0 0.5em rgba(255, 56, 96, 0.25); + box-shadow: 0 0 0.5em rgba(255, 56, 96, 0.25); color: #fff; } @@ -3823,17 +3632,11 @@ a.box:active { } .file.is-boxed .file-label { - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; + flex-direction: column; } .file.is-boxed .file-cta { - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; + flex-direction: column; height: auto; padding: 1em 3em; } @@ -3873,9 +3676,7 @@ a.box:active { } .file.is-centered { - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; } .file.is-fullwidth .file-label { @@ -3883,16 +3684,12 @@ a.box:active { } .file.is-fullwidth .file-name { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; + flex-grow: 1; max-width: none; } .file.is-right { - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; + justify-content: flex-end; } .file.is-right .file-cta { @@ -3902,22 +3699,14 @@ a.box:active { .file.is-right .file-name { border-radius: 3px 0 0 3px; border-width: 1px 0 1px 1px; - -webkit-box-ordinal-group: 0; - -ms-flex-order: -1; - order: -1; + order: -1; } .file-label { - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; - display: -webkit-box; - display: -ms-flexbox; + align-items: stretch; display: flex; cursor: pointer; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; + justify-content: flex-start; overflow: hidden; position: relative; } @@ -3976,16 +3765,10 @@ a.box:active { } .file-icon { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -ms-flexbox; + align-items: center; display: flex; height: 1em; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; margin-right: 0.5em; width: 1em; } @@ -4068,12 +3851,8 @@ a.box:active { } .field.has-addons { - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; + justify-content: flex-start; } .field.has-addons .control:not(:last-child) { @@ -4133,43 +3912,29 @@ a.box:active { } .field.has-addons .control.is-expanded { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; + flex-grow: 1; } .field.has-addons.has-addons-centered { - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; } .field.has-addons.has-addons-right { - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; + justify-content: flex-end; } .field.has-addons.has-addons-fullwidth .control { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-negative: 0; - flex-shrink: 0; + flex-grow: 1; + flex-shrink: 0; } .field.is-grouped { - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; + justify-content: flex-start; } .field.is-grouped > .control { - -ms-flex-negative: 0; - flex-shrink: 0; + flex-shrink: 0; } .field.is-grouped > .control:not(:last-child) { @@ -4178,28 +3943,20 @@ a.box:active { } .field.is-grouped > .control.is-expanded { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-negative: 1; - flex-shrink: 1; + flex-grow: 1; + flex-shrink: 1; } .field.is-grouped.is-grouped-centered { - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; } .field.is-grouped.is-grouped-right { - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; + justify-content: flex-end; } .field.is-grouped.is-grouped-multiline { - -ms-flex-wrap: wrap; - flex-wrap: wrap; + flex-wrap: wrap; } .field.is-grouped.is-grouped-multiline > .control:last-child, .field.is-grouped.is-grouped-multiline > .control:not(:last-child) { @@ -4216,8 +3973,6 @@ a.box:active { @media screen and (min-width: 769px), print { .field.is-horizontal { - display: -webkit-box; - display: -ms-flexbox; display: flex; } } @@ -4234,13 +3989,9 @@ a.box:active { @media screen and (min-width: 769px), print { .field-label { - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-negative: 0; - flex-shrink: 0; + flex-basis: 0; + flex-grow: 1; + flex-shrink: 0; margin-right: 1.5rem; text-align: right; } @@ -4267,28 +4018,19 @@ a.box:active { @media screen and (min-width: 769px), print { .field-body { - display: -webkit-box; - display: -ms-flexbox; display: flex; - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 5; - -ms-flex-positive: 5; - flex-grow: 5; - -ms-flex-negative: 1; - flex-shrink: 1; + flex-basis: 0; + flex-grow: 5; + flex-shrink: 1; } .field-body .field { margin-bottom: 0; } .field-body > .field { - -ms-flex-negative: 1; - flex-shrink: 1; + flex-shrink: 1; } .field-body > .field:not(.is-narrow) { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; + flex-grow: 1; } .field-body > .field:not(:last-child) { margin-right: 0.75rem; @@ -4415,15 +4157,9 @@ a.box:active { } .icon { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-inline-box; - display: -ms-inline-flexbox; + align-items: center; display: inline-flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; height: 1.5rem; width: 1.5rem; } @@ -4986,17 +4722,10 @@ a.box:active { } .tags { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -ms-flexbox; + align-items: center; display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; + flex-wrap: wrap; + justify-content: flex-start; } .tags .tag { @@ -5030,9 +4759,7 @@ a.box:active { } .tags.is-centered { - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; } .tags.is-centered .tag { @@ -5041,9 +4768,7 @@ a.box:active { } .tags.is-right { - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; + justify-content: flex-end; } .tags.is-right .tag:not(:first-child) { @@ -5055,20 +4780,14 @@ a.box:active { } .tag:not(body) { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + align-items: center; background-color: whitesmoke; border-radius: 3px; color: #4a4a4a; - display: -webkit-inline-box; - display: -ms-inline-flexbox; display: inline-flex; font-size: 0.75rem; height: 2em; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; line-height: 1.5; padding-left: 0.75em; padding-right: 0.75em; @@ -5167,10 +4886,8 @@ a.box:active { left: 50%; position: absolute; top: 50%; - -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg); - transform: translateX(-50%) translateY(-50%) rotate(45deg); - -webkit-transform-origin: center center; - transform-origin: center center; + transform: translateX(-50%) translateY(-50%) rotate(45deg); + transform-origin: center center; } .tag:not(body).is-delete::before { @@ -5339,19 +5056,13 @@ a.tag:hover { } .number { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + align-items: center; background-color: whitesmoke; border-radius: 290486px; - display: -webkit-inline-box; - display: -ms-inline-flexbox; display: inline-flex; font-size: 1.25rem; height: 2em; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; margin-right: 1.5rem; min-width: 2.5em; padding: 0.25rem 0.5rem; @@ -5360,11 +5071,7 @@ a.tag:hover { } .breadcrumb { - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; - display: -webkit-box; - display: -ms-flexbox; + align-items: stretch; display: flex; font-size: 1rem; overflow: hidden; @@ -5373,16 +5080,10 @@ a.tag:hover { } .breadcrumb a { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + align-items: center; color: #3273dc; - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; padding: 0.5em 0.75em; } @@ -5391,11 +5092,7 @@ a.tag:hover { } .breadcrumb li { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -ms-flexbox; + align-items: center; display: flex; } @@ -5415,20 +5112,11 @@ a.tag:hover { } .breadcrumb ul, .breadcrumb ol { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -ms-flexbox; + align-items: center; display: flex; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-negative: 0; - flex-shrink: 0; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; + flex-grow: 1; + flex-shrink: 0; + justify-content: flex-start; } .breadcrumb .icon:first-child { @@ -5440,15 +5128,11 @@ a.tag:hover { } .breadcrumb.is-centered ol, .breadcrumb.is-centered ul { - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; } .breadcrumb.is-right ol, .breadcrumb.is-right ul { - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; + justify-content: flex-end; } .breadcrumb.is-small { @@ -5481,8 +5165,7 @@ a.tag:hover { .card { background-color: white; - -webkit-box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1); - box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1); + box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1); color: #4a4a4a; max-width: 100%; position: relative; @@ -5490,48 +5173,29 @@ a.tag:hover { .card-header { background-color: none; - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; - -webkit-box-shadow: 0 1px 2px rgba(10, 10, 10, 0.1); - box-shadow: 0 1px 2px rgba(10, 10, 10, 0.1); - display: -webkit-box; - display: -ms-flexbox; + align-items: stretch; + box-shadow: 0 1px 2px rgba(10, 10, 10, 0.1); display: flex; } .card-header-title { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + align-items: center; color: #363636; - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; + flex-grow: 1; font-weight: 700; padding: 0.75rem; } .card-header-title.is-centered { - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; } .card-header-icon { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + align-items: center; cursor: pointer; - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; padding: 0.75rem; } @@ -5548,31 +5212,17 @@ a.tag:hover { .card-footer { background-color: none; border-top: 1px solid #dbdbdb; - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; - display: -webkit-box; - display: -ms-flexbox; + align-items: stretch; display: flex; } .card-footer-item { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -ms-flexbox; + align-items: center; display: flex; - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-negative: 0; - flex-shrink: 0; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + flex-basis: 0; + flex-grow: 1; + flex-shrink: 0; + justify-content: center; padding: 0.75rem; } @@ -5585,8 +5235,6 @@ a.tag:hover { } .dropdown { - display: -webkit-inline-box; - display: -ms-inline-flexbox; display: inline-flex; position: relative; vertical-align: top; @@ -5621,8 +5269,7 @@ a.tag:hover { .dropdown-content { background-color: white; border-radius: 3px; - -webkit-box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1); - box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1); + box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1); padding-bottom: 0.5rem; padding-top: 0.5rem; } @@ -5660,12 +5307,8 @@ a.dropdown-item.is-active { } .level { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; + align-items: center; + justify-content: space-between; } .level code { @@ -5678,15 +5321,11 @@ a.dropdown-item.is-active { } .level.is-mobile { - display: -webkit-box; - display: -ms-flexbox; display: flex; } .level.is-mobile .level-left, .level.is-mobile .level-right { - display: -webkit-box; - display: -ms-flexbox; display: flex; } @@ -5703,41 +5342,25 @@ a.dropdown-item.is-active { } .level.is-mobile .level-item:not(.is-narrow) { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; + flex-grow: 1; } @media screen and (min-width: 769px), print { .level { - display: -webkit-box; - display: -ms-flexbox; display: flex; } .level > .level-item:not(.is-narrow) { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; + flex-grow: 1; } } .level-item { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -ms-flexbox; + align-items: center; display: flex; - -ms-flex-preferred-size: auto; - flex-basis: auto; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + flex-basis: auto; + flex-grow: 0; + flex-shrink: 0; + justify-content: center; } .level-item .title, @@ -5753,20 +5376,14 @@ a.dropdown-item.is-active { .level-left, .level-right { - -ms-flex-preferred-size: auto; - flex-basis: auto; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - -ms-flex-negative: 0; - flex-shrink: 0; + flex-basis: auto; + flex-grow: 0; + flex-shrink: 0; } .level-left .level-item.is-flexible, .level-right .level-item.is-flexible { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; + flex-grow: 1; } @media screen and (min-width: 769px), print { @@ -5777,12 +5394,8 @@ a.dropdown-item.is-active { } .level-left { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; + align-items: center; + justify-content: flex-start; } @media screen and (max-width: 768px) { @@ -5793,35 +5406,23 @@ a.dropdown-item.is-active { @media screen and (min-width: 769px), print { .level-left { - display: -webkit-box; - display: -ms-flexbox; display: flex; } } .level-right { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; + align-items: center; + justify-content: flex-end; } @media screen and (min-width: 769px), print { .level-right { - display: -webkit-box; - display: -ms-flexbox; display: flex; } } .media { - -webkit-box-align: start; - -ms-flex-align: start; - align-items: flex-start; - display: -webkit-box; - display: -ms-flexbox; + align-items: flex-start; display: flex; text-align: left; } @@ -5832,8 +5433,6 @@ a.dropdown-item.is-active { .media .media { border-top: 1px solid rgba(219, 219, 219, 0.5); - display: -webkit-box; - display: -ms-flexbox; display: flex; padding-top: 0.75rem; } @@ -5864,13 +5463,9 @@ a.dropdown-item.is-active { .media-left, .media-right { - -ms-flex-preferred-size: auto; - flex-basis: auto; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - -ms-flex-negative: 0; - flex-shrink: 0; + flex-basis: auto; + flex-grow: 0; + flex-shrink: 0; } .media-left { @@ -5882,13 +5477,9 @@ a.dropdown-item.is-active { } .media-content { - -ms-flex-preferred-size: auto; - flex-basis: auto; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-negative: 1; - flex-shrink: 1; + flex-basis: auto; + flex-grow: 1; + flex-shrink: 1; text-align: left; } @@ -6118,29 +5709,20 @@ a.dropdown-item.is-active { } .message-header { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + align-items: center; background-color: #4a4a4a; border-radius: 3px 3px 0 0; color: #fff; - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; + justify-content: space-between; line-height: 1.25; padding: 0.5em 0.75em; position: relative; } .message-header .delete { - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - -ms-flex-negative: 0; - flex-shrink: 0; + flex-grow: 0; + flex-shrink: 0; margin-left: 0.75em; } @@ -6167,21 +5749,15 @@ a.dropdown-item.is-active { } .modal { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + align-items: center; display: none; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; overflow: hidden; position: fixed; z-index: 40; } .modal.is-active { - display: -webkit-box; - display: -ms-flexbox; display: flex; } @@ -6217,31 +5793,19 @@ a.dropdown-item.is-active { } .modal-card { - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; + flex-direction: column; max-height: calc(100vh - 40px); overflow: hidden; } .modal-card-head, .modal-card-foot { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + align-items: center; background-color: whitesmoke; - display: -webkit-box; - display: -ms-flexbox; display: flex; - -ms-flex-negative: 0; - flex-shrink: 0; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; + flex-shrink: 0; + justify-content: flex-start; padding: 20px; position: relative; } @@ -6254,11 +5818,8 @@ a.dropdown-item.is-active { .modal-card-title { color: #363636; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-negative: 0; - flex-shrink: 0; + flex-grow: 1; + flex-shrink: 0; font-size: 1.5rem; line-height: 1; } @@ -6276,17 +5837,15 @@ a.dropdown-item.is-active { .modal-card-body { -webkit-overflow-scrolling: touch; background-color: white; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-negative: 1; - flex-shrink: 1; + flex-grow: 1; + flex-shrink: 1; overflow: auto; padding: 20px; } .navbar { background-color: white; + box-shadow: 0 2px 0 0 whitesmoke; min-height: 3.25rem; position: relative; } @@ -6822,19 +6381,14 @@ a.dropdown-item.is-active { } .navbar > .container { - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; - display: -webkit-box; - display: -ms-flexbox; + align-items: stretch; display: flex; min-height: 3.25rem; width: 100%; } .navbar.has-shadow { - -webkit-box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1); - box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1); + box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1); } .navbar.is-fixed-bottom, .navbar.is-fixed-top { @@ -6849,8 +6403,7 @@ a.dropdown-item.is-active { } .navbar.is-fixed-bottom.has-shadow { - -webkit-box-shadow: 0 -2px 3px rgba(10, 10, 10, 0.1); - box-shadow: 0 -2px 3px rgba(10, 10, 10, 0.1); + box-shadow: 0 -2px 3px rgba(10, 10, 10, 0.1); } .navbar.is-fixed-top { @@ -6869,14 +6422,9 @@ body.has-navbar-fixed-bottom { .navbar-brand, .navbar-tabs { - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; - display: -webkit-box; - display: -ms-flexbox; + align-items: stretch; display: flex; - -ms-flex-negative: 0; - flex-shrink: 0; + flex-shrink: 0; min-height: 3.25rem; } @@ -6902,16 +6450,10 @@ body.has-navbar-fixed-bottom { height: 1px; left: calc(50% - 8px); position: absolute; - -webkit-transform-origin: center; - transform-origin: center; - -webkit-transition-duration: 86ms; - transition-duration: 86ms; - -webkit-transition-property: background-color, opacity, -webkit-transform; - transition-property: background-color, opacity, -webkit-transform; + transform-origin: center; + transition-duration: 86ms; transition-property: background-color, opacity, transform; - transition-property: background-color, opacity, transform, -webkit-transform; - -webkit-transition-timing-function: ease-out; - transition-timing-function: ease-out; + transition-timing-function: ease-out; width: 16px; } @@ -6932,8 +6474,7 @@ body.has-navbar-fixed-bottom { } .navbar-burger.is-active span:nth-child(1) { - -webkit-transform: translateY(5px) rotate(45deg); - transform: translateY(5px) rotate(45deg); + transform: translateY(5px) rotate(45deg); } .navbar-burger.is-active span:nth-child(2) { @@ -6941,8 +6482,7 @@ body.has-navbar-fixed-bottom { } .navbar-burger.is-active span:nth-child(3) { - -webkit-transform: translateY(-5px) rotate(-45deg); - transform: translateY(-5px) rotate(-45deg); + transform: translateY(-5px) rotate(-45deg); } .navbar-menu { @@ -6954,23 +6494,27 @@ body.has-navbar-fixed-bottom { color: #4a4a4a; display: block; line-height: 1.5; - padding: 0.5rem 1rem; + padding: 0.5rem 0.75rem; position: relative; } +a.navbar-item, +.navbar-link { + border-radius: 3px; + cursor: pointer; +} + a.navbar-item:hover, a.navbar-item.is-active, -a.navbar-link:hover, -a.navbar-link.is-active { - background-color: whitesmoke; +.navbar-link:hover, +.navbar-link.is-active { + background-color: #fafafa; color: #3273dc; } .navbar-item { - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - -ms-flex-negative: 0; - flex-shrink: 0; + display: flex; + flex-grow: 0; + flex-shrink: 0; } .navbar-item img { @@ -6982,11 +6526,8 @@ a.navbar-link.is-active { } .navbar-item.is-expanded { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-negative: 1; - flex-shrink: 1; + flex-grow: 1; + flex-shrink: 1; } .navbar-item.is-tab { @@ -7010,11 +6551,8 @@ a.navbar-link.is-active { } .navbar-content { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-negative: 1; - flex-shrink: 1; + flex-grow: 1; + flex-shrink: 1; } .navbar-link { @@ -7050,11 +6588,7 @@ a.navbar-link.is-active { } .navbar-brand .navbar-item, .navbar-tabs .navbar-item { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -ms-flexbox; + align-items: center; display: flex; } .navbar-link::after { @@ -7062,8 +6596,7 @@ a.navbar-link.is-active { } .navbar-menu { background-color: white; - -webkit-box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1); - box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1); + box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1); padding: 0.5rem 0; } .navbar-menu.is-active { @@ -7079,8 +6612,7 @@ a.navbar-link.is-active { bottom: 0; } .navbar.is-fixed-bottom-touch.has-shadow { - -webkit-box-shadow: 0 -2px 3px rgba(10, 10, 10, 0.1); - box-shadow: 0 -2px 3px rgba(10, 10, 10, 0.1); + box-shadow: 0 -2px 3px rgba(10, 10, 10, 0.1); } .navbar.is-fixed-top-touch { top: 0; @@ -7103,19 +6635,16 @@ a.navbar-link.is-active { .navbar-menu, .navbar-start, .navbar-end { - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; - display: -webkit-box; - display: -ms-flexbox; + align-items: center; display: flex; } .navbar { min-height: 3.25rem; + padding: 1rem 2rem; } .navbar.is-transparent a.navbar-item:hover, .navbar.is-transparent a.navbar-item.is-active, - .navbar.is-transparent a.navbar-link:hover, - .navbar.is-transparent a.navbar-link.is-active { + .navbar.is-transparent .navbar-link:hover, + .navbar.is-transparent .navbar-link.is-active { background-color: transparent !important; } .navbar.is-transparent .navbar-item.has-dropdown.is-active .navbar-link, .navbar.is-transparent .navbar-item.has-dropdown.is-hoverable:hover .navbar-link { @@ -7134,29 +6663,21 @@ a.navbar-link.is-active { } .navbar-item, .navbar-link { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -ms-flexbox; + align-items: center; display: flex; } .navbar-item.has-dropdown { - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; + align-items: stretch; } .navbar-item.has-dropdown-up .navbar-link::after { - -webkit-transform: rotate(135deg) translate(0.25em, -0.25em); - transform: rotate(135deg) translate(0.25em, -0.25em); + transform: rotate(135deg) translate(0.25em, -0.25em); } .navbar-item.has-dropdown-up .navbar-dropdown { border-bottom: 1px solid #dbdbdb; border-radius: 5px 5px 0 0; border-top: none; bottom: 100%; - -webkit-box-shadow: 0 -8px 8px rgba(10, 10, 10, 0.1); - box-shadow: 0 -8px 8px rgba(10, 10, 10, 0.1); + box-shadow: 0 -8px 8px rgba(10, 10, 10, 0.1); top: auto; } .navbar-item.is-active .navbar-dropdown, .navbar-item.is-hoverable:hover .navbar-dropdown { @@ -7165,8 +6686,7 @@ a.navbar-link.is-active { .navbar-item.is-active .navbar-dropdown.is-boxed, .navbar-item.is-hoverable:hover .navbar-dropdown.is-boxed { opacity: 1; pointer-events: auto; - -webkit-transform: translateY(0); - transform: translateY(0); + transform: translateY(0); } .navbar-link::after { margin-top: -0.375em; @@ -7174,22 +6694,15 @@ a.navbar-link.is-active { top: 50%; } .navbar-menu { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-negative: 0; - flex-shrink: 0; + flex-grow: 1; + flex-shrink: 0; } .navbar-start { - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; + justify-content: flex-start; margin-right: auto; } .navbar-end { - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; + justify-content: flex-end; margin-left: auto; } .navbar-dropdown { @@ -7197,8 +6710,7 @@ a.navbar-link.is-active { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top: 1px solid #dbdbdb; - -webkit-box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1); - box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1); + box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1); display: none; font-size: 0.875rem; left: 0; @@ -7225,20 +6737,14 @@ a.navbar-link.is-active { .navbar-dropdown.is-boxed { border-radius: 5px; border-top: none; - -webkit-box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1); - box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1); + box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1); display: block; opacity: 0; pointer-events: none; top: calc(100% + (-4px)); - -webkit-transform: translateY(-5px); - transform: translateY(-5px); - -webkit-transition-duration: 86ms; - transition-duration: 86ms; - -webkit-transition-property: opacity, -webkit-transform; - transition-property: opacity, -webkit-transform; + transform: translateY(-5px); + transition-duration: 86ms; transition-property: opacity, transform; - transition-property: opacity, transform, -webkit-transform; } .navbar-dropdown.is-right { left: auto; @@ -7265,8 +6771,7 @@ a.navbar-link.is-active { bottom: 0; } .navbar.is-fixed-bottom-desktop.has-shadow { - -webkit-box-shadow: 0 -2px 3px rgba(10, 10, 10, 0.1); - box-shadow: 0 -2px 3px rgba(10, 10, 10, 0.1); + box-shadow: 0 -2px 3px rgba(10, 10, 10, 0.1); } .navbar.is-fixed-top-desktop { top: 0; @@ -7278,15 +6783,15 @@ a.navbar-link.is-active { padding-bottom: 3.25rem; } a.navbar-item.is-active, - a.navbar-link.is-active { + .navbar-link.is-active { color: #0a0a0a; } a.navbar-item.is-active:not(:hover), - a.navbar-link.is-active:not(:hover) { + .navbar-link.is-active:not(:hover) { background-color: transparent; } .navbar-item.has-dropdown:hover .navbar-link, .navbar-item.has-dropdown.is-active .navbar-link { - background-color: whitesmoke; + background-color: #fafafa; } } @@ -7320,15 +6825,9 @@ a.navbar-link.is-active { .pagination, .pagination-list { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -ms-flexbox; + align-items: center; display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; text-align: center; } @@ -7339,9 +6838,7 @@ a.navbar-link.is-active { font-size: 1em; padding-left: 0.5em; padding-right: 0.5em; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; margin: 0.25rem; text-align: center; } @@ -7370,8 +6867,7 @@ a.navbar-link.is-active { .pagination-previous:active, .pagination-next:active, .pagination-link:active { - -webkit-box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2); - box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2); + box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2); } .pagination-previous[disabled], @@ -7379,8 +6875,7 @@ a.navbar-link.is-active { .pagination-link[disabled] { background-color: #dbdbdb; border-color: #dbdbdb; - -webkit-box-shadow: none; - box-shadow: none; + box-shadow: none; color: #7a7a7a; opacity: 0.5; } @@ -7404,96 +6899,59 @@ a.navbar-link.is-active { } .pagination-list { - -ms-flex-wrap: wrap; - flex-wrap: wrap; + flex-wrap: wrap; } @media screen and (max-width: 768px) { .pagination { - -ms-flex-wrap: wrap; - flex-wrap: wrap; + flex-wrap: wrap; } .pagination-previous, .pagination-next { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-negative: 1; - flex-shrink: 1; + flex-grow: 1; + flex-shrink: 1; } .pagination-list li { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-negative: 1; - flex-shrink: 1; + flex-grow: 1; + flex-shrink: 1; } } @media screen and (min-width: 769px), print { .pagination-list { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-negative: 1; - flex-shrink: 1; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; - -webkit-box-ordinal-group: 2; - -ms-flex-order: 1; - order: 1; + flex-grow: 1; + flex-shrink: 1; + justify-content: flex-start; + order: 1; } .pagination-previous { - -webkit-box-ordinal-group: 3; - -ms-flex-order: 2; - order: 2; + order: 2; } .pagination-next { - -webkit-box-ordinal-group: 4; - -ms-flex-order: 3; - order: 3; + order: 3; } .pagination { - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; + justify-content: space-between; } .pagination.is-centered .pagination-previous { - -webkit-box-ordinal-group: 2; - -ms-flex-order: 1; - order: 1; + order: 1; } .pagination.is-centered .pagination-list { - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-box-ordinal-group: 3; - -ms-flex-order: 2; - order: 2; + justify-content: center; + order: 2; } .pagination.is-centered .pagination-next { - -webkit-box-ordinal-group: 4; - -ms-flex-order: 3; - order: 3; + order: 3; } .pagination.is-right .pagination-previous { - -webkit-box-ordinal-group: 2; - -ms-flex-order: 1; - order: 1; + order: 1; } .pagination.is-right .pagination-next { - -webkit-box-ordinal-group: 3; - -ms-flex-order: 2; - order: 2; + order: 2; } .pagination.is-right .pagination-list { - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; - -webkit-box-ordinal-group: 4; - -ms-flex-order: 3; - order: 3; + justify-content: flex-end; + order: 3; } } @@ -7530,16 +6988,10 @@ a.navbar-link.is-active { } .panel-tabs { - -webkit-box-align: end; - -ms-flex-align: end; - align-items: flex-end; - display: -webkit-box; - display: -ms-flexbox; + align-items: flex-end; display: flex; font-size: 0.875em; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; } .panel-tabs a { @@ -7562,16 +7014,10 @@ a.navbar-link.is-active { } .panel-block { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + align-items: center; color: #363636; - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; + justify-content: flex-start; padding: 0.5em 0.75em; } @@ -7580,17 +7026,13 @@ a.navbar-link.is-active { } .panel-block > .control { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-negative: 1; - flex-shrink: 1; + flex-grow: 1; + flex-shrink: 1; width: 100%; } .panel-block.is-wrapped { - -ms-flex-wrap: wrap; - flex-wrap: wrap; + flex-wrap: wrap; } .panel-block.is-active { @@ -7631,35 +7073,23 @@ label.panel-block:hover { .tabs { -webkit-overflow-scrolling: touch; - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; - display: -webkit-box; - display: -ms-flexbox; + align-items: stretch; display: flex; font-size: 1rem; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; + justify-content: space-between; overflow: hidden; overflow-x: auto; white-space: nowrap; } .tabs a { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + align-items: center; border-bottom-color: #dbdbdb; border-bottom-style: solid; border-bottom-width: 1px; color: #4a4a4a; - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; margin-bottom: -1px; padding: 0.5em 1em; vertical-align: top; @@ -7680,23 +7110,14 @@ label.panel-block:hover { } .tabs ul { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + align-items: center; border-bottom-color: #dbdbdb; border-bottom-style: solid; border-bottom-width: 1px; - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-negative: 0; - flex-shrink: 0; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; + flex-grow: 1; + flex-shrink: 0; + justify-content: flex-start; } .tabs ul.is-left { @@ -7704,20 +7125,14 @@ label.panel-block:hover { } .tabs ul.is-center { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + flex: none; + justify-content: center; padding-left: 0.75em; padding-right: 0.75em; } .tabs ul.is-right { - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; + justify-content: flex-end; padding-left: 0.75em; } @@ -7730,15 +7145,11 @@ label.panel-block:hover { } .tabs.is-centered ul { - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; } .tabs.is-right ul { - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; + justify-content: flex-end; } .tabs.is-boxed a { @@ -7758,11 +7169,8 @@ label.panel-block:hover { } .tabs.is-fullwidth li { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-negative: 0; - flex-shrink: 0; + flex-grow: 1; + flex-shrink: 0; } .tabs.is-toggle a { @@ -7828,89 +7236,63 @@ label.panel-block:hover { .column { display: block; - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-negative: 1; - flex-shrink: 1; + flex-basis: 0; + flex-grow: 1; + flex-shrink: 1; padding: 0.75rem; } .columns.is-mobile > .column.is-narrow { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; } .columns.is-mobile > .column.is-full { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 100%; } .columns.is-mobile > .column.is-three-quarters { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 75%; } .columns.is-mobile > .column.is-two-thirds { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 66.6666%; } .columns.is-mobile > .column.is-half { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 50%; } .columns.is-mobile > .column.is-one-third { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 33.3333%; } .columns.is-mobile > .column.is-one-quarter { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 25%; } .columns.is-mobile > .column.is-one-fifth { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 20%; } .columns.is-mobile > .column.is-two-fifths { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 40%; } .columns.is-mobile > .column.is-three-fifths { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 60%; } .columns.is-mobile > .column.is-four-fifths { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 80%; } @@ -7951,9 +7333,7 @@ label.panel-block:hover { } .columns.is-mobile > .column.is-1 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 8.33333%; } @@ -7962,9 +7342,7 @@ label.panel-block:hover { } .columns.is-mobile > .column.is-2 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 16.66667%; } @@ -7973,9 +7351,7 @@ label.panel-block:hover { } .columns.is-mobile > .column.is-3 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 25%; } @@ -7984,9 +7360,7 @@ label.panel-block:hover { } .columns.is-mobile > .column.is-4 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 33.33333%; } @@ -7995,9 +7369,7 @@ label.panel-block:hover { } .columns.is-mobile > .column.is-5 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 41.66667%; } @@ -8006,9 +7378,7 @@ label.panel-block:hover { } .columns.is-mobile > .column.is-6 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 50%; } @@ -8017,9 +7387,7 @@ label.panel-block:hover { } .columns.is-mobile > .column.is-7 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 58.33333%; } @@ -8028,9 +7396,7 @@ label.panel-block:hover { } .columns.is-mobile > .column.is-8 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 66.66667%; } @@ -8039,9 +7405,7 @@ label.panel-block:hover { } .columns.is-mobile > .column.is-9 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 75%; } @@ -8050,9 +7414,7 @@ label.panel-block:hover { } .columns.is-mobile > .column.is-10 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 83.33333%; } @@ -8061,9 +7423,7 @@ label.panel-block:hover { } .columns.is-mobile > .column.is-11 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 91.66667%; } @@ -8072,9 +7432,7 @@ label.panel-block:hover { } .columns.is-mobile > .column.is-12 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 100%; } @@ -8084,68 +7442,46 @@ label.panel-block:hover { @media screen and (max-width: 768px) { .column.is-narrow-mobile { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; } .column.is-full-mobile { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 100%; } .column.is-three-quarters-mobile { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 75%; } .column.is-two-thirds-mobile { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 66.6666%; } .column.is-half-mobile { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 50%; } .column.is-one-third-mobile { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 33.3333%; } .column.is-one-quarter-mobile { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 25%; } .column.is-one-fifth-mobile { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 20%; } .column.is-two-fifths-mobile { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 40%; } .column.is-three-fifths-mobile { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 60%; } .column.is-four-fifths-mobile { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 80%; } .column.is-offset-three-quarters-mobile { @@ -8176,108 +7512,84 @@ label.panel-block:hover { margin-left: 80%; } .column.is-1-mobile { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 8.33333%; } .column.is-offset-1-mobile { margin-left: 8.33333%; } .column.is-2-mobile { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 16.66667%; } .column.is-offset-2-mobile { margin-left: 16.66667%; } .column.is-3-mobile { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 25%; } .column.is-offset-3-mobile { margin-left: 25%; } .column.is-4-mobile { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 33.33333%; } .column.is-offset-4-mobile { margin-left: 33.33333%; } .column.is-5-mobile { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 41.66667%; } .column.is-offset-5-mobile { margin-left: 41.66667%; } .column.is-6-mobile { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 50%; } .column.is-offset-6-mobile { margin-left: 50%; } .column.is-7-mobile { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 58.33333%; } .column.is-offset-7-mobile { margin-left: 58.33333%; } .column.is-8-mobile { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 66.66667%; } .column.is-offset-8-mobile { margin-left: 66.66667%; } .column.is-9-mobile { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 75%; } .column.is-offset-9-mobile { margin-left: 75%; } .column.is-10-mobile { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 83.33333%; } .column.is-offset-10-mobile { margin-left: 83.33333%; } .column.is-11-mobile { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 91.66667%; } .column.is-offset-11-mobile { margin-left: 91.66667%; } .column.is-12-mobile { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 100%; } .column.is-offset-12-mobile { @@ -8287,68 +7599,46 @@ label.panel-block:hover { @media screen and (min-width: 769px), print { .column.is-narrow, .column.is-narrow-tablet { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; } .column.is-full, .column.is-full-tablet { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 100%; } .column.is-three-quarters, .column.is-three-quarters-tablet { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 75%; } .column.is-two-thirds, .column.is-two-thirds-tablet { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 66.6666%; } .column.is-half, .column.is-half-tablet { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 50%; } .column.is-one-third, .column.is-one-third-tablet { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 33.3333%; } .column.is-one-quarter, .column.is-one-quarter-tablet { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 25%; } .column.is-one-fifth, .column.is-one-fifth-tablet { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 20%; } .column.is-two-fifths, .column.is-two-fifths-tablet { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 40%; } .column.is-three-fifths, .column.is-three-fifths-tablet { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 60%; } .column.is-four-fifths, .column.is-four-fifths-tablet { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 80%; } .column.is-offset-three-quarters, .column.is-offset-three-quarters-tablet { @@ -8379,108 +7669,84 @@ label.panel-block:hover { margin-left: 80%; } .column.is-1, .column.is-1-tablet { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 8.33333%; } .column.is-offset-1, .column.is-offset-1-tablet { margin-left: 8.33333%; } .column.is-2, .column.is-2-tablet { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 16.66667%; } .column.is-offset-2, .column.is-offset-2-tablet { margin-left: 16.66667%; } .column.is-3, .column.is-3-tablet { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 25%; } .column.is-offset-3, .column.is-offset-3-tablet { margin-left: 25%; } .column.is-4, .column.is-4-tablet { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 33.33333%; } .column.is-offset-4, .column.is-offset-4-tablet { margin-left: 33.33333%; } .column.is-5, .column.is-5-tablet { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 41.66667%; } .column.is-offset-5, .column.is-offset-5-tablet { margin-left: 41.66667%; } .column.is-6, .column.is-6-tablet { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 50%; } .column.is-offset-6, .column.is-offset-6-tablet { margin-left: 50%; } .column.is-7, .column.is-7-tablet { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 58.33333%; } .column.is-offset-7, .column.is-offset-7-tablet { margin-left: 58.33333%; } .column.is-8, .column.is-8-tablet { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 66.66667%; } .column.is-offset-8, .column.is-offset-8-tablet { margin-left: 66.66667%; } .column.is-9, .column.is-9-tablet { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 75%; } .column.is-offset-9, .column.is-offset-9-tablet { margin-left: 75%; } .column.is-10, .column.is-10-tablet { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 83.33333%; } .column.is-offset-10, .column.is-offset-10-tablet { margin-left: 83.33333%; } .column.is-11, .column.is-11-tablet { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 91.66667%; } .column.is-offset-11, .column.is-offset-11-tablet { margin-left: 91.66667%; } .column.is-12, .column.is-12-tablet { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 100%; } .column.is-offset-12, .column.is-offset-12-tablet { @@ -8490,68 +7756,46 @@ label.panel-block:hover { @media screen and (max-width: 1023px) { .column.is-narrow-touch { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; } .column.is-full-touch { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 100%; } .column.is-three-quarters-touch { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 75%; } .column.is-two-thirds-touch { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 66.6666%; } .column.is-half-touch { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 50%; } .column.is-one-third-touch { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 33.3333%; } .column.is-one-quarter-touch { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 25%; } .column.is-one-fifth-touch { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 20%; } .column.is-two-fifths-touch { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 40%; } .column.is-three-fifths-touch { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 60%; } .column.is-four-fifths-touch { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 80%; } .column.is-offset-three-quarters-touch { @@ -8582,108 +7826,84 @@ label.panel-block:hover { margin-left: 80%; } .column.is-1-touch { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 8.33333%; } .column.is-offset-1-touch { margin-left: 8.33333%; } .column.is-2-touch { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 16.66667%; } .column.is-offset-2-touch { margin-left: 16.66667%; } .column.is-3-touch { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 25%; } .column.is-offset-3-touch { margin-left: 25%; } .column.is-4-touch { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 33.33333%; } .column.is-offset-4-touch { margin-left: 33.33333%; } .column.is-5-touch { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 41.66667%; } .column.is-offset-5-touch { margin-left: 41.66667%; } .column.is-6-touch { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 50%; } .column.is-offset-6-touch { margin-left: 50%; } .column.is-7-touch { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 58.33333%; } .column.is-offset-7-touch { margin-left: 58.33333%; } .column.is-8-touch { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 66.66667%; } .column.is-offset-8-touch { margin-left: 66.66667%; } .column.is-9-touch { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 75%; } .column.is-offset-9-touch { margin-left: 75%; } .column.is-10-touch { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 83.33333%; } .column.is-offset-10-touch { margin-left: 83.33333%; } .column.is-11-touch { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 91.66667%; } .column.is-offset-11-touch { margin-left: 91.66667%; } .column.is-12-touch { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 100%; } .column.is-offset-12-touch { @@ -8693,68 +7913,46 @@ label.panel-block:hover { @media screen and (min-width: 1024px) { .column.is-narrow-desktop { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; } .column.is-full-desktop { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 100%; } .column.is-three-quarters-desktop { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 75%; } .column.is-two-thirds-desktop { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 66.6666%; } .column.is-half-desktop { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 50%; } .column.is-one-third-desktop { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 33.3333%; } .column.is-one-quarter-desktop { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 25%; } .column.is-one-fifth-desktop { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 20%; } .column.is-two-fifths-desktop { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 40%; } .column.is-three-fifths-desktop { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 60%; } .column.is-four-fifths-desktop { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 80%; } .column.is-offset-three-quarters-desktop { @@ -8785,108 +7983,84 @@ label.panel-block:hover { margin-left: 80%; } .column.is-1-desktop { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 8.33333%; } .column.is-offset-1-desktop { margin-left: 8.33333%; } .column.is-2-desktop { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 16.66667%; } .column.is-offset-2-desktop { margin-left: 16.66667%; } .column.is-3-desktop { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 25%; } .column.is-offset-3-desktop { margin-left: 25%; } .column.is-4-desktop { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 33.33333%; } .column.is-offset-4-desktop { margin-left: 33.33333%; } .column.is-5-desktop { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 41.66667%; } .column.is-offset-5-desktop { margin-left: 41.66667%; } .column.is-6-desktop { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 50%; } .column.is-offset-6-desktop { margin-left: 50%; } .column.is-7-desktop { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 58.33333%; } .column.is-offset-7-desktop { margin-left: 58.33333%; } .column.is-8-desktop { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 66.66667%; } .column.is-offset-8-desktop { margin-left: 66.66667%; } .column.is-9-desktop { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 75%; } .column.is-offset-9-desktop { margin-left: 75%; } .column.is-10-desktop { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 83.33333%; } .column.is-offset-10-desktop { margin-left: 83.33333%; } .column.is-11-desktop { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 91.66667%; } .column.is-offset-11-desktop { margin-left: 91.66667%; } .column.is-12-desktop { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 100%; } .column.is-offset-12-desktop { @@ -8896,68 +8070,46 @@ label.panel-block:hover { @media screen and (min-width: 1216px) { .column.is-narrow-widescreen { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; } .column.is-full-widescreen { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 100%; } .column.is-three-quarters-widescreen { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 75%; } .column.is-two-thirds-widescreen { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 66.6666%; } .column.is-half-widescreen { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 50%; } .column.is-one-third-widescreen { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 33.3333%; } .column.is-one-quarter-widescreen { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 25%; } .column.is-one-fifth-widescreen { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 20%; } .column.is-two-fifths-widescreen { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 40%; } .column.is-three-fifths-widescreen { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 60%; } .column.is-four-fifths-widescreen { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 80%; } .column.is-offset-three-quarters-widescreen { @@ -8988,108 +8140,84 @@ label.panel-block:hover { margin-left: 80%; } .column.is-1-widescreen { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 8.33333%; } .column.is-offset-1-widescreen { margin-left: 8.33333%; } .column.is-2-widescreen { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 16.66667%; } .column.is-offset-2-widescreen { margin-left: 16.66667%; } .column.is-3-widescreen { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 25%; } .column.is-offset-3-widescreen { margin-left: 25%; } .column.is-4-widescreen { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 33.33333%; } .column.is-offset-4-widescreen { margin-left: 33.33333%; } .column.is-5-widescreen { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 41.66667%; } .column.is-offset-5-widescreen { margin-left: 41.66667%; } .column.is-6-widescreen { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 50%; } .column.is-offset-6-widescreen { margin-left: 50%; } .column.is-7-widescreen { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 58.33333%; } .column.is-offset-7-widescreen { margin-left: 58.33333%; } .column.is-8-widescreen { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 66.66667%; } .column.is-offset-8-widescreen { margin-left: 66.66667%; } .column.is-9-widescreen { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 75%; } .column.is-offset-9-widescreen { margin-left: 75%; } .column.is-10-widescreen { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 83.33333%; } .column.is-offset-10-widescreen { margin-left: 83.33333%; } .column.is-11-widescreen { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 91.66667%; } .column.is-offset-11-widescreen { margin-left: 91.66667%; } .column.is-12-widescreen { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 100%; } .column.is-offset-12-widescreen { @@ -9099,68 +8227,46 @@ label.panel-block:hover { @media screen and (min-width: 1408px) { .column.is-narrow-fullhd { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; } .column.is-full-fullhd { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 100%; } .column.is-three-quarters-fullhd { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 75%; } .column.is-two-thirds-fullhd { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 66.6666%; } .column.is-half-fullhd { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 50%; } .column.is-one-third-fullhd { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 33.3333%; } .column.is-one-quarter-fullhd { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 25%; } .column.is-one-fifth-fullhd { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 20%; } .column.is-two-fifths-fullhd { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 40%; } .column.is-three-fifths-fullhd { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 60%; } .column.is-four-fifths-fullhd { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 80%; } .column.is-offset-three-quarters-fullhd { @@ -9191,108 +8297,84 @@ label.panel-block:hover { margin-left: 80%; } .column.is-1-fullhd { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 8.33333%; } .column.is-offset-1-fullhd { margin-left: 8.33333%; } .column.is-2-fullhd { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 16.66667%; } .column.is-offset-2-fullhd { margin-left: 16.66667%; } .column.is-3-fullhd { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 25%; } .column.is-offset-3-fullhd { margin-left: 25%; } .column.is-4-fullhd { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 33.33333%; } .column.is-offset-4-fullhd { margin-left: 33.33333%; } .column.is-5-fullhd { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 41.66667%; } .column.is-offset-5-fullhd { margin-left: 41.66667%; } .column.is-6-fullhd { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 50%; } .column.is-offset-6-fullhd { margin-left: 50%; } .column.is-7-fullhd { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 58.33333%; } .column.is-offset-7-fullhd { margin-left: 58.33333%; } .column.is-8-fullhd { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 66.66667%; } .column.is-offset-8-fullhd { margin-left: 66.66667%; } .column.is-9-fullhd { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 75%; } .column.is-offset-9-fullhd { margin-left: 75%; } .column.is-10-fullhd { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 83.33333%; } .column.is-offset-10-fullhd { margin-left: 83.33333%; } .column.is-11-fullhd { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 91.66667%; } .column.is-offset-11-fullhd { margin-left: 91.66667%; } .column.is-12-fullhd { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 100%; } .column.is-offset-12-fullhd { @@ -9315,9 +8397,7 @@ label.panel-block:hover { } .columns.is-centered { - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; } .columns.is-gapless { @@ -9340,34 +8420,25 @@ label.panel-block:hover { } .columns.is-mobile { - display: -webkit-box; - display: -ms-flexbox; display: flex; } .columns.is-multiline { - -ms-flex-wrap: wrap; - flex-wrap: wrap; + flex-wrap: wrap; } .columns.is-vcentered { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + align-items: center; } @media screen and (min-width: 769px), print { .columns:not(.is-desktop) { - display: -webkit-box; - display: -ms-flexbox; display: flex; } } @media screen and (min-width: 1024px) { .columns.is-desktop { - display: -webkit-box; - display: -ms-flexbox; display: flex; } } @@ -9420,19 +8491,11 @@ label.panel-block:hover { } .tile { - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; + align-items: stretch; display: block; - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-negative: 1; - flex-shrink: 1; - min-height: -webkit-min-content; - min-height: -moz-min-content; + flex-basis: 0; + flex-grow: 1; + flex-shrink: 1; min-height: min-content; } @@ -9459,10 +8522,7 @@ label.panel-block:hover { } .tile.is-vertical { - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; + flex-direction: column; } .tile.is-vertical > .tile.is-child:not(:last-child) { @@ -9471,98 +8531,63 @@ label.panel-block:hover { @media screen and (min-width: 769px), print { .tile:not(.is-child) { - display: -webkit-box; - display: -ms-flexbox; display: flex; } .tile.is-1 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 8.33333%; } .tile.is-2 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 16.66667%; } .tile.is-3 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 25%; } .tile.is-4 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 33.33333%; } .tile.is-5 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 41.66667%; } .tile.is-6 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 50%; } .tile.is-7 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 58.33333%; } .tile.is-8 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 66.66667%; } .tile.is-9 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 75%; } .tile.is-10 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 83.33333%; } .tile.is-11 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 91.66667%; } .tile.is-12 { - -webkit-box-flex: 0; - -ms-flex: none; - flex: none; + flex: none; width: 100%; } } .hero { - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; - display: -webkit-box; - display: -ms-flexbox; + align-items: stretch; display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; + flex-direction: column; + justify-content: space-between; } .hero .navbar { @@ -10373,20 +9398,13 @@ label.panel-block:hover { } .hero.is-halfheight .hero-body, .hero.is-fullheight .hero-body { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -ms-flexbox; + align-items: center; display: flex; } .hero.is-halfheight .hero-body > .container, .hero.is-fullheight .hero-body > .container { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-negative: 1; - flex-shrink: 1; + flex-grow: 1; + flex-shrink: 1; } .hero.is-halfheight { @@ -10407,8 +9425,7 @@ label.panel-block:hover { min-width: 100%; position: absolute; top: 50%; - -webkit-transform: translate3d(-50%, -50%, 0); - transform: translate3d(-50%, -50%, 0); + transform: translate3d(-50%, -50%, 0); } .hero-video.is-transparent { @@ -10427,8 +9444,6 @@ label.panel-block:hover { @media screen and (max-width: 768px) { .hero-buttons .button { - display: -webkit-box; - display: -ms-flexbox; display: flex; } .hero-buttons .button:not(:last-child) { @@ -10438,12 +9453,8 @@ label.panel-block:hover { @media screen and (min-width: 769px), print { .hero-buttons { - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; } .hero-buttons .button:not(:last-child) { margin-right: 1.5rem; @@ -10452,19 +9463,13 @@ label.panel-block:hover { .hero-head, .hero-foot { - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - -ms-flex-negative: 0; - flex-shrink: 0; + flex-grow: 0; + flex-shrink: 0; } .hero-body { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-negative: 0; - flex-shrink: 0; + flex-grow: 1; + flex-shrink: 0; padding: 3rem 1.5rem; } @@ -10743,6 +9748,11 @@ body.page-grid .column > .notification { text-align: center; } +a.navbar-item > .icon:not(:last-child) { + margin-left: -0.25em; + margin-right: 0.25em; +} + @media screen and (min-width: 769px), print { .header-item .button + .button { margin-left: 0.75rem; @@ -10755,15 +9765,9 @@ svg { } #carboncontainer { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -ms-flexbox; + align-items: center; display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; margin-left: auto; margin-right: auto; max-width: 340px; @@ -10771,17 +9775,14 @@ svg { } #carbon { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; + flex-grow: 1; min-height: 130px; padding: 0; position: relative; } #carbon:hover { - -webkit-box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px #00d1b2; - box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px #00d1b2; + box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px #00d1b2; } @media screen and (min-width: 769px), print { @@ -10874,13 +9875,9 @@ svg { background: #242424; border-radius: 5px; color: white; - display: -webkit-box; - display: -ms-flexbox; display: flex; font-size: 15px; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; + justify-content: space-between; line-height: 20px; padding: 15px 25px; position: relative; @@ -10954,46 +9951,27 @@ svg { opacity: 1; } -@-webkit-keyframes introSpinner { - from { - opacity: 0; - -webkit-transform: scale(1.14); - transform: scale(1.14); - } - to { - opacity: 1; - -webkit-transform: scale(1); - transform: scale(1); - } -} - @keyframes introSpinner { from { opacity: 0; - -webkit-transform: scale(1.14); - transform: scale(1.14); + transform: scale(1.14); } to { opacity: 1; - -webkit-transform: scale(1); - transform: scale(1); + transform: scale(1); } } .intro-spinner, .intro-shadow { - -webkit-animation-duration: 500ms; - animation-duration: 500ms; + animation-duration: 500ms; animation-easing-function: ease-out; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-transform-origin: center; - transform-origin: center; + animation-fill-mode: both; + transform-origin: center; } .intro-spinner { - -webkit-animation-name: introSpinner; - animation-name: introSpinner; + animation-name: introSpinner; } .intro-spinner::before { @@ -11006,29 +9984,14 @@ svg { width: 1.5em; } -@-webkit-keyframes introShadow { - from { - opacity: 0; - -webkit-transform: scale(0.86); - transform: scale(0.86); - } - to { - opacity: 1; - -webkit-transform: scale(1); - transform: scale(1); - } -} - @keyframes introShadow { from { opacity: 0; - -webkit-transform: scale(0.86); - transform: scale(0.86); + transform: scale(0.86); } to { opacity: 1; - -webkit-transform: scale(1); - transform: scale(1); + transform: scale(1); } } @@ -11037,19 +10000,15 @@ svg { background-position: center center; background-repeat: no-repeat; background-size: cover; - -webkit-box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.2); - box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.2); - -webkit-animation-name: introShadow; - animation-name: introShadow; + box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.2); + animation-name: introShadow; } .intro-iframe { opacity: 0; padding-top: 56.25%; position: relative; - -webkit-transition-duration: 500ms; - transition-duration: 500ms; - -webkit-transition-property: opacity; + transition-duration: 500ms; transition-property: opacity; } @@ -11078,7 +10037,6 @@ svg { .intro-author span { opacity: 0.5; - -webkit-transition: 100ms opacity; transition: 100ms opacity; } @@ -11096,8 +10054,6 @@ svg { @media screen and (max-width: 768px) { .intro-buttons .button { - display: -webkit-box; - display: -ms-flexbox; display: flex; width: 100%; } @@ -11111,15 +10067,9 @@ svg { font-size: 2.25rem; } .intro-buttons { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -ms-flexbox; + align-items: center; display: flex; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; + justify-content: space-between; } } @@ -11131,12 +10081,8 @@ svg { @media screen and (min-width: 1024px) { .intro-columns { - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; } .intro-column { width: calc(50% - 1.5rem); @@ -11221,9 +10167,7 @@ svg { white-space: normal; } #moreDropdown .navbar-item .level { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; + flex-grow: 1; } } @@ -11253,17 +10197,10 @@ svg { } #social { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -ms-flexbox; + align-items: center; display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; + flex-wrap: wrap; + justify-content: flex-start; max-width: 400px; } @@ -11292,11 +10229,7 @@ svg { } #social .fb-like { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -ms-flexbox; + align-items: center; display: flex; width: 130px; } @@ -11309,21 +10242,15 @@ svg { #newsletter .input { border-color: white; - -webkit-box-shadow: none; - box-shadow: none; + box-shadow: none; } #sister ul { - display: -webkit-box; - display: -ms-flexbox; display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; + flex-wrap: wrap; } #sister li { - display: -webkit-box; - display: -ms-flexbox; display: flex; height: 30px; margin: 5px 1rem 0 0; @@ -11356,7 +10283,6 @@ svg { } .bd-special-shadow { - background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), to(transparent)); background-image: linear-gradient(rgba(0, 0, 0, 0.1), transparent); height: 8px; left: 0; @@ -11364,10 +10290,8 @@ svg { position: absolute; right: 0; top: 100%; - -webkit-transform: scaleY(0); - transform: scaleY(0); - -webkit-transform-origin: center top; - transform-origin: center top; + transform: scaleY(0); + transform-origin: center top; } @media screen and (max-width: 1023px) { @@ -11382,8 +10306,7 @@ svg { .bd-color { border-radius: 2px; - -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.1); - box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.1); + box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.1); display: inline-block; float: left; height: 24px; @@ -11517,18 +10440,15 @@ svg { } .bd-article-image:hover .bd-article-icon { - -webkit-transform: scale(1.4); - transform: scale(1.4); + transform: scale(1.4); } .bd-article-image:hover .bd-article-date { - -webkit-transform: scale(0.9); - transform: scale(0.9); + transform: scale(0.9); } .bd-article-image:hover .bd-article-title { - -webkit-transform: scale(1.1); - transform: scale(1.1); + transform: scale(1.1); } .bd-article-image.is-single { @@ -11545,38 +10465,24 @@ svg { .bd-article-overlay { background-color: #0a0a0a; opacity: 0; - -webkit-transition-duration: 86ms; - transition-duration: 86ms; - -webkit-transition-property: opacity; + transition-duration: 86ms; transition-property: opacity; - -webkit-transition-timing-function: ease-out; - transition-timing-function: ease-out; + transition-timing-function: ease-out; } .bd-article-icon, .bd-article-info { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -ms-flexbox; + align-items: center; display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; } .bd-article-icon, .bd-article-date, .bd-article-title { - -webkit-transition-duration: 86ms; - transition-duration: 86ms; - -webkit-transition-property: -webkit-transform; - transition-property: -webkit-transform; + transition-duration: 86ms; transition-property: transform; - transition-property: transform, -webkit-transform; - -webkit-transition-timing-function: ease-out; - transition-timing-function: ease-out; + transition-timing-function: ease-out; } .bd-article-icon { @@ -11777,11 +10683,7 @@ svg { .bd-snippet::before { content: "Snippet"; - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; - display: -webkit-box; - display: -ms-flexbox; + align-items: stretch; display: flex; } @@ -11803,8 +10705,6 @@ svg { } .bd-snippet-code.bd-is-more.bd-is-more-clipped .highlight .bd-show { - display: -webkit-box; - display: -ms-flexbox; display: flex; } @@ -11823,17 +10723,11 @@ svg { @media screen and (min-width: 1024px) { .bd-snippet.bd-is-vertical { - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; + align-items: stretch; border-radius: 5px; border-top-left-radius: 0; - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; } .bd-snippet.bd-is-vertical .bd-snippet-preview, .bd-snippet.bd-is-vertical .bd-snippet-code { @@ -11842,53 +10736,32 @@ svg { .bd-snippet.bd-is-vertical .bd-snippet-code, .bd-snippet.bd-is-vertical .bd-snippet-code .highlight, .bd-snippet.bd-is-vertical .bd-snippet-code .highlight pre { - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; + align-items: stretch; border-radius: 0 5px 5px 0; - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; + flex-direction: column; } .bd-snippet.bd-is-vertical .bd-snippet-code .highlight, .bd-snippet.bd-is-vertical .bd-snippet-code .highlight pre, .bd-snippet.bd-is-vertical .bd-snippet-code .highlight .language-html { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; + flex-grow: 1; } .bd-snippet.bd-is-vertical .bd-snippet-code .highlight pre { white-space: pre; } .bd-snippet.bd-is-vertical.bd-is-one-fifth .bd-snippet-preview { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -ms-flexbox; + align-items: center; display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; width: calc(128px + 3rem); } .bd-snippet.bd-is-vertical.bd-is-one-fifth .bd-snippet-code { width: calc(100% - 128px - 3rem); } .bd-snippet.bd-is-vertical.bd-is-two-fifths .bd-snippet-preview { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -ms-flexbox; + align-items: center; display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; width: calc(256px + 3rem); } .bd-snippet.bd-is-vertical.bd-is-two-fifths .bd-snippet-code { @@ -11904,8 +10777,7 @@ svg { .highlight.bd-is-hovering { border-radius: 2px; - -webkit-box-shadow: 0 0 0 2px #ffdd57; - box-shadow: 0 0 0 2px #ffdd57; + box-shadow: 0 0 0 2px #ffdd57; } .highlight pre { @@ -11949,18 +10821,12 @@ svg { } .bd-structure-item::after { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + align-items: center; content: attr(title); - display: -webkit-box; - display: -ms-flexbox; display: flex; font-family: monospace; font-size: 11px; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; padding: 3px 5px; z-index: 2; } @@ -11970,12 +10836,8 @@ svg { } .bd-structure-item.bd-is-structure-container::after { - -webkit-box-align: start; - -ms-flex-align: start; - align-items: flex-start; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; + align-items: flex-start; + justify-content: flex-start; padding: 0.5rem 0.75rem; } @@ -12007,8 +10869,7 @@ svg { .highlight .bd-copy:focus, .highlight .bd-copy:active, .highlight .bd-expand:focus, .highlight .bd-expand:active { - -webkit-box-shadow: none; - box-shadow: none; + box-shadow: none; } .highlight .bd-expand { @@ -12016,18 +10877,14 @@ svg { } .highlight .bd-show { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + align-items: center; background-color: rgba(245, 245, 245, 0.7); border: none; color: rgba(0, 0, 0, 0.5); cursor: pointer; display: none; font-size: 0.75rem; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; width: 100%; } @@ -12161,8 +11018,7 @@ svg { #_default_ > a { background-color: white; border-radius: 5px; - -webkit-box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1); - box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1); + box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1); color: #4a4a4a; display: block; line-height: 1.375; @@ -12174,13 +11030,11 @@ svg { } #_default_ > a:hover, #_default_ > a:focus { - -webkit-box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px #3273dc; - box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px #3273dc; + box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px #3273dc; } #_default_ > a:active { - -webkit-box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2), 0 0 0 1px #3273dc; - box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2), 0 0 0 1px #3273dc; + box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2), 0 0 0 1px #3273dc; } #_default_ > a span { @@ -12221,12 +11075,8 @@ svg { min-height: 120px; } #_default_ { - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; position: relative; } #_default_ .default-ad { @@ -12293,11 +11143,8 @@ html.route-index .hero.is-primary a.column:hover .title strong { .bd-tws-home { background-color: whitesmoke; - display: -webkit-box; - display: -ms-flexbox; display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; + flex-wrap: wrap; overflow: auto; padding: 20px; } @@ -12307,32 +11154,21 @@ html.route-index .hero.is-primary a.column:hover .title strong { border: 1px solid #e1e8ed; border-radius: 5px; color: #697882; - -ms-flex-negative: 0; - flex-shrink: 0; + flex-shrink: 0; font-family: Helvetica, Roboto, "Segoe UI", Calibri, sans-serif; font-size: 16px; padding: 20px; } .bd-tw-header { - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; - display: -webkit-box; - display: -ms-flexbox; + align-items: stretch; display: flex; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; + justify-content: flex-start; } .bd-tw-author { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + align-items: center; color: #1c2022; - display: -webkit-box; - display: -ms-flexbox; display: flex; line-height: 1.2; } @@ -12342,8 +11178,7 @@ html.route-index .hero.is-primary a.column:hover .title strong { } .bd-tw-avatar { - -ms-flex-negative: 0; - flex-shrink: 0; + flex-shrink: 0; height: 36px; margin-right: 9px; width: 36px; @@ -12402,11 +11237,7 @@ html.route-index .hero.is-primary a.column:hover .title strong { } .Tweet-actions { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -ms-flexbox; + align-items: center; display: flex; margin-top: 8.4px; } @@ -12416,11 +11247,7 @@ html.route-index .hero.is-primary a.column:hover .title strong { } .TweetAction { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -ms-flexbox; + align-items: center; display: flex; height: 24px; min-width: 24px; @@ -12500,11 +11327,8 @@ html.route-index .hero.is-primary a.column:hover .title strong { min-height: 595px; } .bd-tws-love { - display: -webkit-box; - display: -ms-flexbox; display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; + flex-wrap: wrap; margin: -0.75rem; } .bd-tws-love .bd-tw { @@ -12575,15 +11399,9 @@ html.route-index .hero.is-primary a.column:hover .title strong { } .bd-website-image { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -ms-flexbox; + align-items: center; display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; margin-bottom: 1.5rem; position: relative; } @@ -12598,7 +11416,6 @@ html.route-index .hero.is-primary a.column:hover .title strong { .bd-website-image .b-lazy { opacity: 0; - -webkit-transition: opacity 500ms ease-out; transition: opacity 500ms ease-out; } @@ -12608,14 +11425,12 @@ html.route-index .hero.is-primary a.column:hover .title strong { .bd-website-shadow { border: 1px solid rgba(0, 0, 0, 0.04); - -webkit-transition: opacity 200ms ease-out; transition: opacity 200ms ease-out; } .bd-website-overlay { background-color: #0a0a0a; opacity: 0; - -webkit-transition: opacity 200ms ease-out; transition: opacity 200ms ease-out; } @@ -12631,14 +11446,9 @@ html.route-index .hero.is-primary a.column:hover .title strong { padding-top: 3rem; } .bd-websites { - display: -webkit-box; - display: -ms-flexbox; display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; + flex-wrap: wrap; + justify-content: space-between; } .bd-website { margin-top: 3rem; @@ -12664,15 +11474,9 @@ html.route-index .hero.is-primary a.column:hover .title strong { } .bd-testimonial { - -webkit-box-align: start; - -ms-flex-align: start; - align-items: flex-start; - display: -webkit-box; - display: -ms-flexbox; + align-items: flex-start; display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; } .bd-testimonial-tweet { @@ -12680,15 +11484,9 @@ html.route-index .hero.is-primary a.column:hover .title strong { } .bd-more-loves { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -ms-flexbox; + align-items: center; display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; margin-top: 1.5rem; text-align: center; } @@ -12699,17 +11497,12 @@ html.route-index .hero.is-primary a.column:hover .title strong { } .bd-more-loves .button span { - -webkit-transform-origin: center center; - transform-origin: center center; - -webkit-transition: -webkit-transform 86ms ease-out; - transition: -webkit-transform 86ms ease-out; + transform-origin: center center; transition: transform 86ms ease-out; - transition: transform 86ms ease-out, -webkit-transform 86ms ease-out; } .bd-more-loves .button:hover span { - -webkit-transform: scale(1.04); - transform: scale(1.04); + transform: scale(1.04); } @media screen and (max-width: 768px) { @@ -12749,8 +11542,7 @@ html.route-index .hero.is-primary a.column:hover .title strong { } .bd-rainbow { - -webkit-animation: rainbow 8s ease infinite; - animation: rainbow 8s ease infinite; + animation: rainbow 8s ease infinite; background-image: linear-gradient(124deg, #ff470f, #ff3860, #b86bff, #3273dc); background-size: 800% 800%; } @@ -12760,18 +11552,6 @@ html.route-index .hero.is-primary a.column:hover .title strong { color: white; } -@-webkit-keyframes rainbow { - 0% { - background-position: 1% 80%; - } - 50% { - background-position: 99% 20%; - } - 100% { - background-position: 1% 80%; - } -} - @keyframes rainbow { 0% { background-position: 1% 80%; @@ -12785,15 +11565,9 @@ html.route-index .hero.is-primary a.column:hover .title strong { } .bd-hug { - -webkit-box-align: start; - -ms-flex-align: start; - align-items: flex-start; - display: -webkit-box; - display: -ms-flexbox; + align-items: flex-start; display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; } @media screen and (max-width: 768px) { @@ -12822,15 +11596,9 @@ html.route-index .hero.is-primary a.column:hover .title strong { padding: 3rem 1.5rem; } .bd-embrace { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -ms-flexbox; + align-items: center; display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; } .bd-embrace:not(:first-child) { margin-top: 3rem; @@ -12842,11 +11610,8 @@ html.route-index .hero.is-primary a.column:hover .title strong { margin-left: 1.5rem; } .bd-hugs { - display: -webkit-box; - display: -ms-flexbox; display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; + flex-wrap: wrap; padding-bottom: 3rem; } .bd-hug { @@ -12997,17 +11762,10 @@ html.route-index .hero.is-primary a.column:hover .title strong { } .bd-klmn-gaps { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -ms-flexbox; + align-items: center; display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; + flex-wrap: wrap; + justify-content: flex-start; margin-bottom: 1.25rem; } @@ -13039,15 +11797,9 @@ html.route-index .hero.is-primary a.column:hover .title strong { } .bd-banner { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -ms-flexbox; + align-items: center; display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; overflow: hidden; padding: 1rem; position: relative; @@ -13072,19 +11824,13 @@ html.route-index .hero.is-primary a.column:hover .title strong { } .bd-banner .button { - -webkit-transform-origin: center; - transform-origin: center; - -webkit-transition-duration: 86ms; - transition-duration: 86ms; - -webkit-transition-property: -webkit-transform; - transition-property: -webkit-transform; + transform-origin: center; + transition-duration: 86ms; transition-property: transform; - transition-property: transform, -webkit-transform; } .bd-banner:hover .button { - -webkit-transform: scale(1.1); - transform: scale(1.1); + transform: scale(1.1); } .bd-banner-background { @@ -13102,8 +11848,7 @@ html.route-index .hero.is-primary a.column:hover .title strong { .bd-banner-button { display: inline-block; - -ms-flex-negative: 0; - flex-shrink: 0; + flex-shrink: 0; height: 34px; position: relative; width: 145px; @@ -13124,24 +11869,14 @@ html.route-index .hero.is-primary a.column:hover .title strong { } .bd-sponsors { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -ms-flexbox; + align-items: center; display: flex; } .bd-sponsors a { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -ms-flexbox; + align-items: center; display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; margin-right: 3rem; width: 150px; } @@ -13159,29 +11894,16 @@ html.route-index .hero.is-primary a.column:hover .title strong { } .bd-sponsor-list { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -ms-flexbox; + align-items: center; display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + flex-wrap: wrap; + justify-content: center; } .bd-sponsor-list a { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -ms-flexbox; + align-items: center; display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; margin: 1rem; width: 160px; } @@ -13191,15 +11913,6 @@ html.route-index .hero.is-primary a.column:hover .title strong { width: auto; } -@-webkit-keyframes fadeIn { - from { - opacity: 0; - } - to { - opacity: 1; - } -} - @keyframes fadeIn { from { opacity: 0; @@ -13209,25 +11922,12 @@ html.route-index .hero.is-primary a.column:hover .title strong { } } -@-webkit-keyframes zoomIn { - from { - -webkit-transform: scale(0.8); - transform: scale(0.8); - } - to { - -webkit-transform: scale(1); - transform: scale(1); - } -} - @keyframes zoomIn { from { - -webkit-transform: scale(0.8); - transform: scale(0.8); + transform: scale(0.8); } to { - -webkit-transform: scale(1); - transform: scale(1); + transform: scale(1); } } @@ -13271,8 +11971,7 @@ html.route-index .hero.is-primary a.column:hover .title strong { .bd-book-content { background-color: white; - -webkit-box-shadow: 0 40px 40px -20px rgba(10, 10, 10, 0.1); - box-shadow: 0 40px 40px -20px rgba(10, 10, 10, 0.1); + box-shadow: 0 40px 40px -20px rgba(10, 10, 10, 0.1); max-width: 520px; padding: 3rem; } @@ -13336,15 +12035,9 @@ html.route-index .hero.is-primary a.column:hover .title strong { } .bd-book-columns { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -ms-flexbox; + align-items: center; display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; margin-left: auto; margin-right: auto; max-width: 1080px; @@ -13356,23 +12049,18 @@ html.route-index .hero.is-primary a.column:hover .title strong { .bd-book-modal .bd-book-modal-background, .bd-book-modal .modal-content { - -webkit-animation-duration: 250ms; - animation-duration: 250ms; + animation-duration: 250ms; animation-easing-function: ease-out; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; + animation-fill-mode: both; } .bd-book-modal .bd-book-modal-background { - -webkit-animation-name: fadeIn; - animation-name: fadeIn; + animation-name: fadeIn; } .bd-book-modal .modal-content { - -webkit-animation-name: zoomIn; - animation-name: zoomIn; - -webkit-transform-origin: center; - transform-origin: center; + animation-name: zoomIn; + transform-origin: center; } .bd-book-modal-cover { @@ -13381,23 +12069,14 @@ html.route-index .hero.is-primary a.column:hover .title strong { } .bd-book-modal-columns { - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; - display: -webkit-box; - display: -ms-flexbox; + align-items: stretch; display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; } @media screen and (max-width: 768px) { .bd-book-columns { - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; + flex-direction: column; } .bd-book-buttons .button { width: 100%; @@ -13416,8 +12095,7 @@ html.route-index .hero.is-primary a.column:hover .title strong { @media screen and (min-width: 769px), print { .bd-book-columns { - -ms-flex-pack: distribute; - justify-content: space-around; + justify-content: space-around; } .bd-book-header .tag { position: absolute; @@ -13438,20 +12116,13 @@ html.route-index .hero.is-primary a.column:hover .title strong { position: relative; } .bd-book-modal-column.bd-is-cover { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -ms-flexbox; + align-items: center; display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; padding: 2rem; } .bd-book-modal-column.bd-is-content .bd-book-content { - -webkit-box-shadow: none; - box-shadow: none; + box-shadow: none; } } @@ -13469,47 +12140,30 @@ html.route-index .hero.is-primary a.column:hover .title strong { } .native-flex { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -ms-flexbox; + align-items: center; display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + justify-content: center; padding: 2em; text-decoration: none; } .native-img { border-radius: 3px; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - -ms-flex-negative: 0; - flex-shrink: 0; + flex-grow: 0; + flex-shrink: 0; height: 50px; width: 125px; } .native-details { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-negative: 1; - flex-shrink: 1; + flex-grow: 1; + flex-shrink: 1; } .native-main { - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - -ms-flex-negative: 1; - flex-shrink: 1; + align-items: center; + flex-grow: 0; + flex-shrink: 1; max-width: 640px; } @@ -13528,33 +12182,23 @@ html.route-index .hero.is-primary a.column:hover .title strong { .native-cta { border: none; border-radius: 3px; - -webkit-box-shadow: 0 6px 13px 0 rgba(0, 0, 0, 0.15); - box-shadow: 0 6px 13px 0 rgba(0, 0, 0, 0.15); + box-shadow: 0 6px 13px 0 rgba(0, 0, 0, 0.15); display: inline-block; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - -ms-flex-negative: 0; - flex-shrink: 0; + flex-grow: 0; + flex-shrink: 0; font-size: 0.75em; font-weight: 400; padding: 0.75em 1em; text-transform: uppercase; - -webkit-transform: translateY(-1px); - transform: translateY(-1px); - -webkit-transition: -webkit-transform .3s ease-in-out; - transition: -webkit-transform .3s ease-in-out; + transform: translateY(-1px); transition: transform .3s ease-in-out; - transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out; vertical-align: top; white-space: nowrap; } .native-cta:hover { - -webkit-box-shadow: none; - box-shadow: none; - -webkit-transform: translateY(1px); - transform: translateY(1px); + box-shadow: none; + transform: translateY(1px); } @media screen and (max-width: 599px) { @@ -13572,15 +12216,11 @@ html.route-index .hero.is-primary a.column:hover .title strong { @media screen and (min-width: 600px) { .native-flex { - display: -webkit-box; - display: -ms-flexbox; display: flex; padding: 4em; text-align: left; } .native-main { - display: -webkit-box; - display: -ms-flexbox; display: flex; margin-right: 2em; } @@ -13594,5 +12234,3 @@ html.route-index .hero.is-primary a.column:hover .title strong { font-size: 1.25rem; } } - -/*# sourceMappingURL=bulma-docs.css.map */ \ No newline at end of file diff --git a/docs/lib/main.js b/docs/lib/main.js index bfca7426..e4ae35b2 100644 --- a/docs/lib/main.js +++ b/docs/lib/main.js @@ -280,8 +280,11 @@ document.addEventListener('DOMContentLoaded', function () { } var translateFactor = 1 + translateValue / NAVBAR_HEIGHT; - specialShadow.style.opacity = scrollFactor; - specialShadow.style.transform = 'scaleY(' + translateFactor + ')'; + + if (specialShadow) { + specialShadow.style.opacity = scrollFactor; + specialShadow.style.transform = 'scaleY(' + translateFactor + ')'; + } } translateHeader(window.scrollY, false); diff --git a/docs/thank-you.html b/docs/thank-you.html index 9bc74c4a..e5e75a5e 100644 --- a/docs/thank-you.html +++ b/docs/thank-you.html @@ -4,7 +4,7 @@ layout: default route: index --- -{% include navbar.html id="ThankYou" fixed=true has_container=true boxed=true transparent=true %} +{% include navbar.html id="ThankYou" %}
diff --git a/sass/components/navbar.sass b/sass/components/navbar.sass index a15ea421..3e539fa2 100644 --- a/sass/components/navbar.sass +++ b/sass/components/navbar.sass @@ -4,7 +4,7 @@ $navbar-fixed-z: 30 !default $navbar-item-color: $grey-dark !default $navbar-item-hover-color: $link !default -$navbar-item-hover-background-color: $background !default +$navbar-item-hover-background-color: $white-bis !default $navbar-item-active-color: $black !default $navbar-item-active-background-color: transparent !default $navbar-item-img-max-height: 1.75rem !default @@ -42,6 +42,7 @@ $navbar-divider-background-color: $border !default .navbar background-color: $navbar-background-color + box-shadow: 0 2px 0 0 $background min-height: $navbar-height position: relative @each $name, $pair in $colors @@ -104,13 +105,15 @@ $navbar-divider-background-color: $border !default &.is-fixed-top top: 0 -html.has-navbar-fixed-top, -body.has-navbar-fixed-top - padding-top: $navbar-height +html, +body + &.has-navbar-fixed-top + padding-top: $navbar-height -html.has-navbar-fixed-bottom, -body.has-navbar-fixed-bottom - padding-bottom: $navbar-height +html, +body + &.has-navbar-fixed-bottom + padding-bottom: $navbar-height .navbar-brand, .navbar-tabs @@ -137,17 +140,20 @@ body.has-navbar-fixed-bottom color: $navbar-item-color display: block line-height: 1.5 - padding: 0.5rem 1rem + padding: 0.5rem 0.75rem position: relative a.navbar-item, -a.navbar-link +.navbar-link + border-radius: $radius + cursor: pointer &:hover, &.is-active background-color: $navbar-item-hover-background-color color: $navbar-item-hover-color .navbar-item + display: flex flex-grow: 0 flex-shrink: 0 img @@ -240,13 +246,14 @@ a.navbar-link .navbar-menu, .navbar-start, .navbar-end - align-items: stretch + align-items: center display: flex .navbar min-height: $navbar-height + padding: 1rem 2rem &.is-transparent a.navbar-item, - a.navbar-link + .navbar-link &:hover, &.is-active background-color: transparent !important @@ -367,7 +374,7 @@ a.navbar-link padding-bottom: $navbar-height // Hover/Active states a.navbar-item, - a.navbar-link + .navbar-link &.is-active color: $navbar-item-active-color &.is-active:not(:hover) From 4ede497c96634a029cc86bff3899d7ac7ef897a1 Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Mon, 9 Apr 2018 10:35:44 +0100 Subject: [PATCH 02/56] Add main layout --- docs/_data/global.json | 37 ++ docs/_includes/elements/improve-page.html | 16 + docs/_includes/navbar.html | 46 +- docs/_javascript/main.js | 24 +- docs/_layouts/default.html | 2 +- docs/_layouts/documentation.html | 104 ++-- docs/_sass/global.sass | 6 +- docs/_sass/main.sass | 64 +++ docs/_sass/specific.sass | 31 +- docs/bulma-docs.sass | 3 + docs/css/bulma-docs.css | 184 ++++++- docs/documentation/elements/button.html | 615 +++++++++++----------- docs/index.html | 2 +- docs/lib/main.js | 24 +- sass/components/breadcrumb.sass | 5 +- sass/components/navbar.sass | 2 + 16 files changed, 719 insertions(+), 446 deletions(-) create mode 100644 docs/_includes/elements/improve-page.html create mode 100644 docs/_sass/main.sass diff --git a/docs/_data/global.json b/docs/_data/global.json index fc5f0e3e..bcc1dc61 100644 --- a/docs/_data/global.json +++ b/docs/_data/global.json @@ -1,4 +1,41 @@ { + "navbar_items": [ + { + "id": "templates", + "color": "has-text-info", + "fa_type": "fas", + "fa_icon": "fa-code", + "title": "Templates" + }, + { + "id": "videos", + "color": "has-text-success", + "fa_type": "fas", + "fa_icon": "fa-play-circle", + "title": "Videos" + }, + { + "id": "blog", + "color": "bd-has-text-rss", + "fa_type": "fas", + "fa_icon": "fa-rss", + "title": "Blog" + }, + { + "id": "expo", + "color": "bd-has-text-star", + "fa_type": "fas", + "fa_icon": "fa-star", + "title": "Expo" + }, + { + "id": "love", + "color": "has-text-danger", + "fa_type": "fas", + "fa_icon": "fa-heart", + "title": "Love" + } + ], "more_items": [ { "id": "bulma-start", diff --git a/docs/_includes/elements/improve-page.html b/docs/_includes/elements/improve-page.html new file mode 100644 index 00000000..791877a3 --- /dev/null +++ b/docs/_includes/elements/improve-page.html @@ -0,0 +1,16 @@ +
+
+

+ + Made with Bulma + +
+ This page is open source. + Noticed a typo? Or something unclear? +
+ + Improve this page on GitHub + +

+
+
diff --git a/docs/_includes/navbar.html b/docs/_includes/navbar.html index 4f5f3c92..08909a01 100644 --- a/docs/_includes/navbar.html +++ b/docs/_includes/navbar.html @@ -1,4 +1,4 @@ -
- {% endcapture %} -{% include subnav/subnav-columns.html %} +{% include anchor.html name="Default gap" %} -
-
-

Columns gap

-

- Customize the gap between the columns -

+
+

+ Each column has a gap equal to the variable $column-gap, which has a default value of 0.75rem. +
+ Since the gap is on each side of a column, the gap between two adjacent columns will be twice the value of $column-gap, or 1.5rem by default. +

+
- {% include anchor.html name="Default gap" %} +{{ columns_default_gap }} -
-

- Each column has a gap equal to the variable $column-gap, which has a default value of 0.75rem. -
- Since the gap is on each side of a column, the gap between two adjacent columns will be twice the value of $column-gap, or 1.5rem by default. -

-
+{% include anchor.html name="Gapless" %} - {{ columns_default_gap }} - - {% include anchor.html name="Gapless" %} - -
-

- If you want to remove the space between the columns, add the is-gapless modifier on the columns container: -

-
- -
-
-

First column

-
-
-

Second column

-
-
-

Third column

-
-
-

Fourth column

-
-
- -
- {% highlight html %}{{ columns_gapless }}{% endhighlight %} -
- -
-

You can combine it with the is-multiline modifier:

-
- -
-
-

is-one-quarter

-
-
-

is-one-quarter

-
-
-

is-one-quarter

-
-
-

is-one-quarter

-
-
-

is-half

-
-
-

is-one-quarter

-
-
-

is-one-quarter

-
-
-

is-one-quarter

-
-
-

Auto

-
-
- -
- {% highlight html %}{{ columns_gapless_multiline }}{% endhighlight %} -
- - {% include anchor.html name="Variable gap" %} - -
-
-
- Experimental -
-
- -
-
- New - 0.5.2 -
-
-
- -
-

- You can specify a custom column gap by appending one of 9 modifiers on the .columns container. -

-
    -
  • - is-0 will remove any gap (similar to is-gapless) -
  • -
  • - is-3 is the default value, equivalent to the 0.75rem value -
  • -
  • - is-8 is the maximum gap of 2rem -
  • -
-

- Additionally, .is-variable should be added on the .columns container. -

-
- - {% include klmn.html %} - -
-
-

- This feature is only available in browsers that support CSS Variables: -

-
-
- -
-
-

- If your Sass setup doesn't support CSS Variables, you can disable this feature by setting $variable-columns to false. -

-
-
+
+

+ If you want to remove the space between the columns, add the is-gapless modifier on the columns container: +

+
+
+
+

First column

-
+
+

Second column

+
+
+

Third column

+
+
+

Fourth column

+
+ + +
+ {% highlight html %}{{ columns_gapless }}{% endhighlight %} +
+ +
+

You can combine it with the is-multiline modifier:

+
+ +
+
+

is-one-quarter

+
+
+

is-one-quarter

+
+
+

is-one-quarter

+
+
+

is-one-quarter

+
+
+

is-half

+
+
+

is-one-quarter

+
+
+

is-one-quarter

+
+
+

is-one-quarter

+
+
+

Auto

+
+
+ +
+ {% highlight html %}{{ columns_gapless_multiline }}{% endhighlight %} +
+ +{% include anchor.html name="Variable gap" %} + +
+
+
+ Experimental +
+
+ +
+
+ New + 0.5.2 +
+
+
+ +
+

+ You can specify a custom column gap by appending one of 9 modifiers on the .columns container. +

+
    +
  • + is-0 will remove any gap (similar to is-gapless) +
  • +
  • + is-3 is the default value, equivalent to the 0.75rem value +
  • +
  • + is-8 is the maximum gap of 2rem +
  • +
+

+ Additionally, .is-variable should be added on the .columns container. +

+
+ +{% include klmn.html %} + +
+
+

+ This feature is only available in browsers that support CSS Variables: +

+
+
+ +
+
+

+ If your Sass setup doesn't support CSS Variables, you can disable this feature by setting $variable-columns to false. +

+
+
diff --git a/docs/documentation/columns/nesting.html b/docs/documentation/columns/nesting.html index 7c66cc6e..64cf551c 100644 --- a/docs/documentation/columns/nesting.html +++ b/docs/documentation/columns/nesting.html @@ -1,79 +1,75 @@ --- title: Nesting columns +subtitle: "A simple way to build responsive columns" layout: documentation doc-tab: columns doc-subtab: nesting +breadcrumb: +- home +- documentation +- columns +- columns-nesting --- -{% include subnav/subnav-columns.html %} - -
-
-

Nesting columns

-

A simple way to build responsive columns

-
- -
-

- You can nest columns to have more flexibility in your design. You only need to follow this structure: -

+
+

+ You can nest columns to have more flexibility in your design. You only need to follow this structure: +

+
    +
  • + columns: top-level columns container
    • - columns: top-level columns container + column
      • - column + columns: nested columns
        • - columns: nested columns -
            -
          • - column and so on… -
          • -
          + column and so on…
    -

    - The difference with multiline columns is the order in the HTML code: all the blue columns appear before the red ones. Resize to a narrower viewport to see the result. -

    -
+ + +

+ The difference with multiline columns is the order in the HTML code: all the blue columns appear before the red ones. Resize to a narrower viewport to see the result. +

+
-
+
+
+

First column

+
-

First column

-
-
-

First nested column

-
-
-

Second nested column

-
-
+

First nested column

-

Second column

-
-
-

50%

-
-
-

Auto

-
-
-

Auto

-
-
+

Second nested column

- -
-

- Multiline columns will also have a gap between each line. -

-
-
+
+

Second column

+
+
+

50%

+
+
+

Auto

+
+
+

Auto

+
+
+
+ + +
+

+ Multiline columns will also have a gap between each line. +

+
diff --git a/docs/documentation/columns/options.html b/docs/documentation/columns/options.html index 9662ca20..5448a6c8 100644 --- a/docs/documentation/columns/options.html +++ b/docs/documentation/columns/options.html @@ -1,8 +1,14 @@ --- title: Column options +subtitle: "Design different types of column layouts" layout: documentation doc-tab: columns doc-subtab: options +breadcrumb: +- home +- documentation +- columns +- columns-options --- {% capture columns_multiline %} @@ -83,111 +89,100 @@ doc-subtab: options {% endcapture %} -{% include subnav/subnav-columns.html %} +{% include anchor.html name="Multiline" %} -
-
-

Column options

-

- Design different types of column layouts -

+
+

Whenever you want to start a new line, you can close a columns container and start a new one. But you can also add the is-multiline modifier and add more column elements that would fit in a single row.

+
- {% include anchor.html name="Multiline" %} - -
-

Whenever you want to start a new line, you can close a columns container and start a new one. But you can also add the is-multiline modifier and add more column elements that would fit in a single row.

-
- -
-
-

is-one-quarter

-
-
-

is-one-quarter

-
-
-

is-one-quarter

-
-
-

is-one-quarter

-
-
-

is-half

-
-
-

is-one-quarter

-
-
-

is-one-quarter

-
-
-

is-one-quarter

-
-
-

Auto

-
-
- - {% highlight html %}{{ columns_multiline }}{% endhighlight %} - - {% include anchor.html name="Centering columns" %} - -
-

- While you can use empty columns (like <div class="column"></div>) to create horizontal space around .column elements, you can also use .is-centered on the parent .columns element: -

-
- -
-
-

- is-half
- is-narrow -

-
-
- - {% highlight html %}{{ columns_mobile_centered }}{% endhighlight %} - -
-

- Use with .is-multiline to create a flexible, centered list (try resizing to see centering in different viewport sizes): -

-
- -
-
-

- is-narrow
- First Column -

-
-
-

- is-narrow
- Our Second Column -

-
-
-

- is-narrow
- Third Column -

-
-
-

- is-narrow
- The Fourth Column -

-
-
-

- is-narrow
- Fifth Column -

-
-
- - {% highlight html %}{{ columns_mobile_multiline_centered }}{% endhighlight %} +
+
+

is-one-quarter

-
+
+

is-one-quarter

+
+
+

is-one-quarter

+
+
+

is-one-quarter

+
+
+

is-half

+
+
+

is-one-quarter

+
+
+

is-one-quarter

+
+
+

is-one-quarter

+
+
+

Auto

+
+ + +{% highlight html %}{{ columns_multiline }}{% endhighlight %} + +{% include anchor.html name="Centering columns" %} + +
+

+ While you can use empty columns (like <div class="column"></div>) to create horizontal space around .column elements, you can also use .is-centered on the parent .columns element: +

+
+ +
+
+

+ is-half
+ is-narrow +

+
+
+ +{% highlight html %}{{ columns_mobile_centered }}{% endhighlight %} + +
+

+ Use with .is-multiline to create a flexible, centered list (try resizing to see centering in different viewport sizes): +

+
+ +
+
+

+ is-narrow
+ First Column +

+
+
+

+ is-narrow
+ Our Second Column +

+
+
+

+ is-narrow
+ Third Column +

+
+
+

+ is-narrow
+ The Fourth Column +

+
+
+

+ is-narrow
+ Fifth Column +

+
+
+ +{% highlight html %}{{ columns_mobile_multiline_centered }}{% endhighlight %} diff --git a/docs/documentation/columns/responsiveness.html b/docs/documentation/columns/responsiveness.html index c10ebc8f..139c0c10 100644 --- a/docs/documentation/columns/responsiveness.html +++ b/docs/documentation/columns/responsiveness.html @@ -1,8 +1,14 @@ --- title: Columns responsiveness +subtitle: "Handle different column layouts for each breakpoint" layout: documentation doc-tab: columns doc-subtab: responsiveness +breadcrumb: +- home +- documentation +- columns +- columns-responsiveness --- {% capture columns_mobile %} @@ -37,107 +43,96 @@ doc-subtab: responsiveness {% endcapture %} -{% include subnav/subnav-columns.html %} +{% include anchor.html name="Mobile columns" %} -
-
-

Columns responsiveness

-

- Handle different column layouts for each breakpoint -

+
+

+ By default, columns are only activated from tablet onwards. This means columns are stacked on top of each other on mobile. +
+ If you want columns to work on mobile too, just add the is-mobile modifier on the columns container: +

+
- {% include anchor.html name="Mobile columns" %} - -
-

- By default, columns are only activated from tablet onwards. This means columns are stacked on top of each other on mobile. -
- If you want columns to work on mobile too, just add the is-mobile modifier on the columns container: -

-
- -
-
-

1

-
-
-

2

-
-
-

3

-
-
-

4

-
-
- - {% highlight html %}{{ columns_mobile }}{% endhighlight %} - -
-

- Resize -

-

- If you want to see the difference, resize your browser and see when the columns are stacked and when they are horizontally distributed. -

-
- -
-

- If you only want columns on desktop upwards, just use the is-desktop modifier on the columns container: -

-
- -
-
-

1

-
-
-

2

-
-
-

3

-
-
-

4

-
-
- - {% highlight html %}{{ columns_desktop }}{% endhighlight %} - - {% include anchor.html name="Different column sizes per breakpoint" %} - -
-

You can define a column size for each viewport size: mobile, tablet, and desktop.

-
- -
-
-

- is-half-mobile
- is-one-third-tablet
- is-one-quarter-desktop -

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
- -
-

Resize

-

If you want to see these classes in action, resize your browser window and see how the same column varies in width at each breakpoint.

-
- - {% highlight html %}{{ columns_multiple_breakpoints }}{% endhighlight %} +
+
+

1

-
+
+

2

+
+
+

3

+
+
+

4

+
+ + +{% highlight html %}{{ columns_mobile }}{% endhighlight %} + +
+

+ Resize +

+

+ If you want to see the difference, resize your browser and see when the columns are stacked and when they are horizontally distributed. +

+
+ +
+

+ If you only want columns on desktop upwards, just use the is-desktop modifier on the columns container: +

+
+ +
+
+

1

+
+
+

2

+
+
+

3

+
+
+

4

+
+
+ +{% highlight html %}{{ columns_desktop }}{% endhighlight %} + +{% include anchor.html name="Different column sizes per breakpoint" %} + +
+

You can define a column size for each viewport size: mobile, tablet, and desktop.

+
+ +
+
+

+ is-half-mobile
+ is-one-third-tablet
+ is-one-quarter-desktop +

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+ +
+

Resize

+

If you want to see these classes in action, resize your browser window and see how the same column varies in width at each breakpoint.

+
+ +{% highlight html %}{{ columns_multiple_breakpoints }}{% endhighlight %} diff --git a/docs/documentation/columns/sizes.html b/docs/documentation/columns/sizes.html index fe47b563..901698f3 100644 --- a/docs/documentation/columns/sizes.html +++ b/docs/documentation/columns/sizes.html @@ -1,8 +1,14 @@ --- title: Column sizes +subtitle: "Define the size of each column individually" layout: documentation doc-tab: columns doc-subtab: sizes +breadcrumb: +- home +- documentation +- columns +- columns-sizes --- {% capture columns_sizes %} @@ -95,514 +101,501 @@ doc-subtab: sizes {% endcapture %} -{% include subnav/subnav-columns.html %} +
+

If you want to change the size of a single column, you can use one of the following classes:

+
    +
  • + is-three-quarters +
  • +
  • + is-two-thirds +
  • +
  • + is-half +
  • +
  • + is-one-third +
  • +
  • + is-one-quarter +
  • +
+

The other columns will fill up the remaining space automatically.

+
-
-
-

Column sizes

-

- Define the size of each column individually -

+{% include elements/new-tag.html version="0.6.1" %} -
+
+

You can now use the following multiples of 20% as well:

+
    +
  • + is-four-fifths +
  • +
  • + is-three-fifths +
  • +
  • + is-two-fifths +
  • +
  • + is-one-fifth +
  • +
+
-
-

If you want to change the size of a single column, you can use one of the following classes:

-
    -
  • - is-three-quarters -
  • -
  • - is-two-thirds -
  • -
  • - is-half -
  • -
  • - is-one-third -
  • -
  • - is-one-quarter -
  • -
-

The other columns will fill up the remaining space automatically.

-
+
+
+

+ is-four-fifths +

+
+
+

Auto

+
+
+

Auto

+
+
- {% include elements/new-tag.html version="0.6.1" %} +
+
+

+ is-three-quarters +

+
+
+

Auto

+
+
+

Auto

+
+
-
-

You can now use the following multiples of 20% as well:

-
    -
  • - is-four-fifths -
  • -
  • - is-three-fifths -
  • -
  • - is-two-fifths -
  • -
  • - is-one-fifth -
  • -
-
+
+
+

+ is-two-thirds +

+
+
+

Auto

+
+
+

Auto

+
+
-
-
-

- is-four-fifths -

-
-
-

Auto

-
-
-

Auto

-
-
+
+
+

+ is-three-fifths +

+
+
+

Auto

+
+
+

Auto

+
+
-
-
-

- is-three-quarters -

-
-
-

Auto

-
-
-

Auto

-
-
+
+
+

+ is-half +

+
+
+

Auto

+
+
+

Auto

+
+
-
-
-

- is-two-thirds -

-
-
-

Auto

-
-
-

Auto

-
-
+
+
+

+ is-two-fifths +

+
+
+

Auto

+
+
+

Auto

+
+
-
-
-

- is-three-fifths -

-
-
-

Auto

-
-
-

Auto

-
-
+
+
+

+ is-one-third +

+
+
+

Auto

+
+
+

Auto

+
+
-
-
-

- is-half -

-
-
-

Auto

-
-
-

Auto

-
-
+
+
+

+ is-one-quarter +

+
+
+

Auto

+
+
+

Auto

+
+
-
-
-

- is-two-fifths -

-
-
-

Auto

-
-
-

Auto

-
-
+
+
+

+ is-one-fifth +

+
+
+

Auto

+
+
+

Auto

+
+
-
-
-

- is-one-third -

-
-
-

Auto

-
-
-

Auto

-
-
+
+ {% highlight html %}{{ columns_sizes }}{% endhighlight %} +
-
-
-

- is-one-quarter -

-
-
-

Auto

-
-
-

Auto

-
-
+{% include anchor.html name="12 columns system" %} -
-
-

- is-one-fifth -

-
-
-

Auto

-
-
-

Auto

-
-
+
+

As the grid can be divided into 12 columns, there are size classes for each division:

+
    +
  • is-2
  • +
  • is-3
  • +
  • is-4
  • +
  • is-5
  • +
  • is-6
  • +
  • is-7
  • +
  • is-8
  • +
  • is-9
  • +
  • is-10
  • +
  • is-11
  • +
+
-
- {% highlight html %}{{ columns_sizes }}{% endhighlight %} -
+
+

Naming convention

+

Each modifier class is named after how many columns you want out of 12. So if you want 7 columns out of 12, use is-7.

+
- {% include anchor.html name="12 columns system" %} +
+
+

is-2

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+
+
+

is-3

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+
+
+

is-4

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+
+
+

is-5

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+
+
+

is-6

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+
+
+

is-7

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+
+
+

is-8

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+
+
+

is-9

+
+
+

1

+
+
+

1

+
+
+

1

+
+
+
+
+

is-10

+
+
+

1

+
+
+

1

+
+
+
+
+

is-11

+
+
+

1

+
+
-
-

As the grid can be divided into 12 columns, there are size classes for each division:

-
    -
  • is-2
  • -
  • is-3
  • -
  • is-4
  • -
  • is-5
  • -
  • is-6
  • -
  • is-7
  • -
  • is-8
  • -
  • is-9
  • -
  • is-10
  • -
  • is-11
  • -
-
+{% include anchor.html name="Offset" %} -
-

Naming convention

-

Each modifier class is named after how many columns you want out of 12. So if you want 7 columns out of 12, use is-7.

-
+
+

+ While you can use empty columns (like <div class="column"></div>) to create horizontal space around .column elements, you can also use offset modifiers like .is-offset-x: +

+
-
-
-

is-2

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-
-
-

is-3

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-
-
-

is-4

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-
-
-

is-5

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-
-
-

is-6

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-
-
-

is-7

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-
-
-

is-8

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-
-
-

is-9

-
-
-

1

-
-
-

1

-
-
-

1

-
-
-
-
-

is-10

-
-
-

1

-
-
-

1

-
-
-
-
-

is-11

-
-
-

1

-
-
+
+
+

+ is-half
+ is-offset-one-quarter +

+
+
- {% include anchor.html name="Offset" %} +
+
+

+ is-three-fifths
+ is-offset-one-fifth +

+
+
-
-

- While you can use empty columns (like <div class="column"></div>) to create horizontal space around .column elements, you can also use offset modifiers like .is-offset-x: -

-
+
+
+

+ is-4
+ is-offset-8 +

+
+
-
-
-

- is-half
- is-offset-one-quarter -

-
-
+
+
+

+ is-11
+ is-offset-1 +

+
+
-
-
-

- is-three-fifths
- is-offset-one-fifth -

-
-
+
+ {% highlight html %}{{ columns_offset }}{% endhighlight %} +
-
-
-

- is-4
- is-offset-8 -

-
-
+{% include anchor.html name="Narrow column" %} -
-
-

- is-11
- is-offset-1 -

-
-
+
+

If you want a column to only take the space it needs, use the is-narrow modifier. The other column(s) will fill up the remaining space.

+
-
- {% highlight html %}{{ columns_offset }}{% endhighlight %} -
- - {% include anchor.html name="Narrow column" %} - -
-

If you want a column to only take the space it needs, use the is-narrow modifier. The other column(s) will fill up the remaining space.

-
- -
-
-
-

Narrow column

-

This column is only 200px wide.

-
-
-
-
-

Flexible column

-

This column will take up the remaining space available.

-
-
-
- -
- {% highlight html %}{{ columns_narrow }}{% endhighlight %} -
- -
-

As for the size modifiers, you can have narrow columns for different breakpoints:

-
    -
  • - is-narrow-mobile -
  • -
  • - is-narrow-tablet -
  • -
  • - is-narrow-desktop -
  • -
+
+
+
+

Narrow column

+

This column is only 200px wide.

-
+
+
+

Flexible column

+

This column will take up the remaining space available.

+
+
+ + +
+ {% highlight html %}{{ columns_narrow }}{% endhighlight %} +
+ +
+

As for the size modifiers, you can have narrow columns for different breakpoints:

+
    +
  • + is-narrow-mobile +
  • +
  • + is-narrow-tablet +
  • +
  • + is-narrow-desktop +
  • +
+
diff --git a/docs/documentation/elements/button.html b/docs/documentation/elements/button.html index 47989a99..122a2147 100644 --- a/docs/documentation/elements/button.html +++ b/docs/documentation/elements/button.html @@ -4,6 +4,11 @@ subtitle: "The classic button, in different colors, sizes, and layout: documentation doc-tab: elements doc-subtab: button +breadcrumb: +- home +- documentation +- elements +- button meta: - colors: true - sizes: true diff --git a/sass/base/generic.sass b/sass/base/generic.sass index 6fd58484..bb0e37af 100644 --- a/sass/base/generic.sass +++ b/sass/base/generic.sass @@ -11,8 +11,8 @@ $code-padding: 0.25em 0.5em 0.25em !default $code-weight: normal !default $code-size: 0.875em !default -$hr-background-color: $border !default -$hr-height: 1px !default +$hr-background-color: $background !default +$hr-height: 2px !default $hr-margin: 1.5rem 0 !default $strong-color: $text-strong !default diff --git a/sass/components/breadcrumb.sass b/sass/components/breadcrumb.sass index 57bb2de2..fb84b229 100644 --- a/sass/components/breadcrumb.sass +++ b/sass/components/breadcrumb.sass @@ -5,16 +5,12 @@ $breadcrumb-item-active-color: $text-strong !default $breadcrumb-item-padding-vertical: 0 !default $breadcrumb-item-padding-horizontal: 0.75em !default -$breadcrumb-item-separator-color: $text !default +$breadcrumb-item-separator-color: $grey-light !default .breadcrumb +block +unselectable - align-items: stretch - display: flex font-size: $size-normal - overflow: hidden - overflow-x: auto white-space: nowrap a align-items: center @@ -37,11 +33,11 @@ $breadcrumb-item-separator-color: $text !default & + li::before color: $breadcrumb-item-separator-color content: "\0002f" - ul, ol - align-items: center + ul, + ol + align-items: flex-start display: flex - flex-grow: 1 - flex-shrink: 0 + flex-wrap: wrap justify-content: flex-start .icon &:first-child @@ -50,10 +46,12 @@ $breadcrumb-item-separator-color: $text !default margin-left: 0.5em // Alignment &.is-centered - ol, ul + ol, + ul justify-content: center &.is-right - ol, ul + ol, + ul justify-content: flex-end // Sizes &.is-small diff --git a/sass/elements/title.sass b/sass/elements/title.sass index 77353601..46f66680 100644 --- a/sass/elements/title.sass +++ b/sass/elements/title.sass @@ -1,6 +1,7 @@ $title-color: $grey-darker !default $title-size: $size-3 !default $title-weight: $weight-semibold !default +$title-line-height: 1.125 !default $title-strong-color: inherit !default $title-strong-weight: inherit !default $title-sub-size: 0.75em !default @@ -9,8 +10,10 @@ $title-sup-size: 0.75em !default $subtitle-color: $grey-dark !default $subtitle-size: $size-5 !default $subtitle-weight: $weight-normal !default +$subtitle-line-height: 1.25 !default $subtitle-strong-color: $grey-darker !default $subtitle-strong-weight: $weight-semibold !default +$subtitle-negative-margin: -1.25rem !default .title, .subtitle @@ -30,14 +33,14 @@ $subtitle-strong-weight: $weight-semibold !default color: $title-color font-size: $title-size font-weight: $title-weight - line-height: 1.125 + line-height: $title-line-height strong color: $title-strong-color font-weight: $title-strong-weight & + .highlight margin-top: -0.75rem &:not(.is-spaced) + .subtitle - margin-top: -1.5rem + margin-top: $subtitle-negative-margin // Sizes @each $size in $sizes $i: index($sizes, $size) @@ -48,12 +51,12 @@ $subtitle-strong-weight: $weight-semibold !default color: $subtitle-color font-size: $subtitle-size font-weight: $subtitle-weight - line-height: 1.25 + line-height: $subtitle-line-height strong color: $subtitle-strong-color font-weight: $subtitle-strong-weight &:not(.is-spaced) + .title - margin-top: -1.5rem + margin-top: $subtitle-negative-margin // Sizes @each $size in $sizes $i: index($sizes, $size) From e75fd365e380110b52e5ffcd70cc3b621e336cc4 Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Mon, 9 Apr 2018 13:18:46 +0100 Subject: [PATCH 04/56] Component links --- docs/_data/links.json | 47 +- docs/documentation/components/breadcrumb.html | 101 +- docs/documentation/components/card.html | 156 ++- docs/documentation/components/dropdown.html | 247 ++-- docs/documentation/components/menu.html | 32 +- docs/documentation/components/message.html | 58 +- docs/documentation/components/modal.html | 146 +-- docs/documentation/components/navbar.html | 1146 ++++++++--------- docs/documentation/components/pagination.html | 122 +- docs/documentation/components/panel.html | 78 +- docs/documentation/components/tabs.html | 137 +- 11 files changed, 1110 insertions(+), 1160 deletions(-) diff --git a/docs/_data/links.json b/docs/_data/links.json index 187dc34e..f7abf855 100644 --- a/docs/_data/links.json +++ b/docs/_data/links.json @@ -43,9 +43,54 @@ "button": { "name": "Button", "path": "/documentation/elements/button" + }, + "components": { + "name": "Components", + "path": "/documentation/components" + }, + "components-breadcrumb": { + "name": "Breadcrumb", + "path": "/documentation/components/breadcrumb" + }, + "components-card": { + "name": "Card", + "path": "/documentation/components/card" + }, + "components-dropdown": { + "name": "Dropdown", + "path": "/documentation/components/dropdown" + }, + "components-menu": { + "name": "Menu", + "path": "/documentation/components/menu" + }, + "components-message": { + "name": "Message", + "path": "/documentation/components/message" + }, + "components-modal": { + "name": "Modal", + "path": "/documentation/components/modal" + }, + "components-navbar": { + "name": "Navbar", + "path": "/documentation/components/navbar" + }, + "components-pagination": { + "name": "Pagination", + "path": "/documentation/components/pagination" + }, + "components-panel": { + "name": "Panel", + "path": "/documentation/components/panel" + }, + "components-tabs": { + "name": "Tabs", + "path": "/documentation/components/tabs" } }, "order": { - "columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"] + "columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"], + "components": ["components-breadcrumb", "components-card", "components-dropdown", "components-menu", "components-message", "components-modal", "components-navbar", "components-pagination", "components-panel", "components-tabs"] } } diff --git a/docs/documentation/components/breadcrumb.html b/docs/documentation/components/breadcrumb.html index bd4b64ec..a6e56f7a 100644 --- a/docs/documentation/components/breadcrumb.html +++ b/docs/documentation/components/breadcrumb.html @@ -1,12 +1,21 @@ --- title: Breadcrumb +subtitle: "A simple breadcrumb component to improve your navigation experience" layout: documentation doc-tab: components doc-subtab: breadcrumb +breadcrumb: +- home +- documentation +- components +- components-breadcrumb +meta: +- since: "0.4.3" +- variables: true +- colors: false +- sizes: true --- -{% include subnav/subnav-components.html %} - {% capture breadcrumb_example %} {% endcapture %} -
-
+
+

The breadcrumb component only requires a .breadcrumb container and a ul list.

+

The dividers are automatically created in the content of the ::before pseudo-element of li tags.

+

You can inform the current page using the is-active modifier in a li tag. It will disable the navigation of inner links.

+
-

Breadcrumb

-

- A simple breadcrumb component to improve your navigation experience -

- {% - include meta.html - since="0.4.3" - variables=true - colors=false - sizes=true - %} +
+{% include snippet.html content=breadcrumb_example horizontal=true clipped=true %} -
+{% include anchor.html name="Alignment" %} -
-

The breadcrumb component only requires a .breadcrumb container and a ul list.

-

The dividers are automatically created in the content of the ::before pseudo-element of li tags.

-

You can inform the current page using the is-active modifier in a li tag. It will disable the navigation of inner links.

-
+
+

For alternative alignments, use the is-centered and is-right modifiers on the .breadcrumb container.

+
-
- {% include snippet.html content=breadcrumb_example horizontal=true clipped=true %} +{% include snippet.html content=breadcrumb_centered_example horizontal=true clipped=true %} - {% include anchor.html name="Alignment" %} +{% include snippet.html content=breadcrumb_right_example horizontal=true clipped=true %} -
-

For alternative alignments, use the is-centered and is-right modifiers on the .breadcrumb container.

-
+{% include anchor.html name="Icons" %} - {% include snippet.html content=breadcrumb_centered_example horizontal=true clipped=true %} +
+

You can use any of the Font Awesome icons.

+
- {% include snippet.html content=breadcrumb_right_example horizontal=true clipped=true %} +{% include snippet.html content=breadcrumb_icons_example horizontal=true clipped=true %} - {% include anchor.html name="Icons" %} +{% include anchor.html name="Alternative separators" %} -
-

You can use any of the Font Awesome icons.

-
+
+

You can choose between 4 additional separators: has-arrow-separator has-bullet-separator has-dot-separator and has-succeeds-separator.

+
- {% include snippet.html content=breadcrumb_icons_example horizontal=true clipped=true %} +{% include snippet.html content=breadcrumb_arrow_example horizontal=true clipped=true %} - {% include anchor.html name="Alternative separators" %} +{% include snippet.html content=breadcrumb_bullet_example horizontal=true clipped=true %} -
-

You can choose between 4 additional separators: has-arrow-separator has-bullet-separator has-dot-separator and has-succeeds-separator.

-
+{% include snippet.html content=breadcrumb_dot_example horizontal=true clipped=true %} - {% include snippet.html content=breadcrumb_arrow_example horizontal=true clipped=true %} +{% include snippet.html content=breadcrumb_succeeds_example horizontal=true clipped=true %} - {% include snippet.html content=breadcrumb_bullet_example horizontal=true clipped=true %} +{% include anchor.html name="Sizes" %} - {% include snippet.html content=breadcrumb_dot_example horizontal=true clipped=true %} +
+

You can choose between 3 additional sizes: is-small is-medium and is-large.

+
- {% include snippet.html content=breadcrumb_succeeds_example horizontal=true clipped=true %} +{% include snippet.html content=breadcrumb_small_example horizontal=true clipped=true %} - {% include anchor.html name="Sizes" %} +{% include snippet.html content=breadcrumb_medium_example horizontal=true clipped=true %} -
-

You can choose between 3 additional sizes: is-small is-medium and is-large.

-
+{% include snippet.html content=breadcrumb_large_example horizontal=true clipped=true %} - {% include snippet.html content=breadcrumb_small_example horizontal=true clipped=true %} - - {% include snippet.html content=breadcrumb_medium_example horizontal=true clipped=true %} - - {% include snippet.html content=breadcrumb_large_example horizontal=true clipped=true %} - - {% include variables.html type='component' %} - -
-
+{% include variables.html type='component' %} diff --git a/docs/documentation/components/card.html b/docs/documentation/components/card.html index 466a12db..c74fb681 100644 --- a/docs/documentation/components/card.html +++ b/docs/documentation/components/card.html @@ -1,8 +1,18 @@ --- title: Card +subtile: "An all-around flexible and composable component" layout: documentation doc-tab: components doc-subtab: card +breadcrumb: +- home +- documentation +- components +- components-card +meta: +- variables: true +- colors: false +- sizes: false --- {% capture card_example %} @@ -89,102 +99,84 @@ doc-subtab: card {% endcapture %} -{% include subnav/subnav-components.html %} - -
-
-

Card

-

An all-around flexible and composable component

- {% - include meta.html - variables=true - colors=false - sizes=false - %} - -
- -
-

The card component comprises several elements that you can mix and match:

+
+

The card component comprises several elements that you can mix and match:

+
    +
  • + card: the main container
    • - card: the main container + card-header: a horizontal bar with a shadow
      • - card-header: a horizontal bar with a shadow -
          -
        • - card-header-title: a left-aligned bold text -
        • -
        • - card-header-icon: a placeholder for an icon -
        • -
        + card-header-title: a left-aligned bold text
      • - card-image: a fullwidth container for a responsive image + card-header-icon: a placeholder for an icon
      • +
      +
    • +
    • + card-image: a fullwidth container for a responsive image +
    • +
    • + card-content: a multi-purpose container for any other element +
    • +
    • + card-footer: a horizontal list of controls +
      • - card-content: a multi-purpose container for any other element -
      • -
      • - card-footer: a horizontal list of controls -
          -
        • - card-footer-item: a repeatable list item -
        • -
        + card-footer-item: a repeatable list item
    -
+ + +
-
- New - 0.5.3 -
+
+ New + 0.5.3 +
-
-

- You can center the card-header-title by appending the is-centered modifier. -

-
+
+

+ You can center the card-header-title by appending the is-centered modifier. +

+
-
- -
-
- {{card_example}} -
-
- {% highlight html %}{{card_example}}{% endhighlight %} -
-
- -
- -
-
- {{card_header_example}} -
-
- {% highlight html %}{{card_header_example}}{% endhighlight %} -
-
- -
- -
-
- {{card_title_example}} -
-
- {% highlight html %}{{card_title_example}}{% endhighlight %} -
-
- - {% include variables.html type='component' %} +
+
+
+ {{card_example}}
-
+
+ {% highlight html %}{{card_example}}{% endhighlight %} +
+ + +
+ +
+
+ {{card_header_example}} +
+
+ {% highlight html %}{{card_header_example}}{% endhighlight %} +
+
+ +
+ +
+
+ {{card_title_example}} +
+
+ {% highlight html %}{{card_title_example}}{% endhighlight %} +
+
+ +{% include variables.html type='component' %} diff --git a/docs/documentation/components/dropdown.html b/docs/documentation/components/dropdown.html index f470f487..07f60058 100644 --- a/docs/documentation/components/dropdown.html +++ b/docs/documentation/components/dropdown.html @@ -1,8 +1,18 @@ --- title: Dropdown +subtitle: "An interactive dropdown menu for discoverable content" layout: documentation doc-tab: components doc-subtab: dropdown +breadcrumb: +- home +- documentation +- components +- components-dropdown +meta: +- colors: false +- sizes: false +- variables: true --- {% capture dropdown_example %} @@ -188,161 +198,138 @@ doc-subtab: dropdown {% endcapture %} -{% include subnav/subnav-components.html %} - -
-
- -

Dropdown

-

- An interactive dropdown menu for discoverable content -

- {% - include meta.html - new=true - since="0.4.4" - colors=false - sizes=false - variables=true - %} - -
- -
-

- The dropdown component is a container for a dropdown button and a dropdown menu. -

+
+

+ The dropdown component is a container for a dropdown button and a dropdown menu. +

+
    +
  • + dropdown the main container
    • - dropdown the main container + dropdown-trigger the container for a button +
    • +
    • + dropdown-menu the toggable menu, hidden by default
      • - dropdown-trigger the container for a button -
      • -
      • - dropdown-menu the toggable menu, hidden by default + dropdown-content the dropdown box, with a white background and a shadow
        • - dropdown-content the dropdown box, with a white background and a shadow -
            -
          • - dropdown-item each single item of the dropdown, which can either be a a or a div -
          • -
          • - dropdown-divider a horizontal line to separate dropdown items -
          • -
          + dropdown-item each single item of the dropdown, which can either be a a or a div +
        • +
        • + dropdown-divider a horizontal line to separate dropdown items
    -
+ + +
-
-
- {{dropdown_example}} -
-
- {% highlight html %}{{dropdown_example}}{% endhighlight %} -
-
+
+
+ {{dropdown_example}} +
+
+ {% highlight html %}{{dropdown_example}}{% endhighlight %} +
+
- {% include anchor.html name="Dropdown content" %} +{% include anchor.html name="Dropdown content" %} -
-

- While the dropdown-item can be used as an anchor link <a>, you can also use a <div> and insert almost any type of content. -

-
+
+

+ While the dropdown-item can be used as an anchor link <a>, you can also use a <div> and insert almost any type of content. +

+
-
-
- {{dropdown_content_example}} -
-
- {% highlight html %}{{dropdown_content_example}}{% endhighlight %} -
-
+
+
+ {{dropdown_content_example}} +
+
+ {% highlight html %}{{dropdown_content_example}}{% endhighlight %} +
+
- {% include anchor.html name="Hoverable or Toggable" %} +{% include anchor.html name="Hoverable or Toggable" %} -
-

- The dropdown component has 2 additional modifiers -

-
    -
  • - is-hoverable: the dropdown will show up when hovering the dropdown-trigger -
  • -
  • - is-active: the dropdown will show up all the time -
  • -
-
+
+

+ The dropdown component has 2 additional modifiers +

+
    +
  • + is-hoverable: the dropdown will show up when hovering the dropdown-trigger +
  • +
  • + is-active: the dropdown will show up all the time +
  • +
+
-
-

- While the CSS :hover implementation works perfectly, the is-active class is available for users who want to control the display of the dropdown with JavaScript. -

-
+
+

+ While the CSS :hover implementation works perfectly, the is-active class is available for users who want to control the display of the dropdown with JavaScript. +

+
-
-
- {{dropdown_click_example}}{{dropdown_info_example}} -
-
- {% highlight html %}{{dropdown_click_example}}{{dropdown_info_example}}{% endhighlight %} -
-
+
+
+ {{dropdown_click_example}}{{dropdown_info_example}} +
+
+ {% highlight html %}{{dropdown_click_example}}{{dropdown_info_example}}{% endhighlight %} +
+
- {% include anchor.html name="Right aligned" %} +{% include anchor.html name="Right aligned" %} -
-

- You can add the is-right modifier to have a right-aligned dropdown. -

-
+
+

+ You can add the is-right modifier to have a right-aligned dropdown. +

+
-
-
-
-
-
- {{dropdown_left_example}} -
-
-
-
- {{dropdown_right_example}} -
-
+
+
+
+
+
+ {{dropdown_left_example}}
-
- {% highlight html %}{{dropdown_right_example}}{% endhighlight %} +
+
+ {{dropdown_right_example}} +
- - {% include anchor.html name="Dropup" %} - -
-

- You can add the is-up modifier to have a dropdown menu that appears above the dropdown button. -

-
- -
-
- {{ dropdown_up_example }} -
-
- {% highlight html %}{{dropdown_up_example}}{% endhighlight %} -
-
- - {% include variables.html type='component' %} -
-
+
+ {% highlight html %}{{dropdown_right_example}}{% endhighlight %} +
+ + +{% include anchor.html name="Dropup" %} + +
+

+ You can add the is-up modifier to have a dropdown menu that appears above the dropdown button. +

+
+ +
+
+ {{ dropdown_up_example }} +
+
+ {% highlight html %}{{dropdown_up_example}}{% endhighlight %} +
+
+ +{% include variables.html type='component' %} diff --git a/docs/documentation/components/menu.html b/docs/documentation/components/menu.html index def25cf2..34a83c08 100644 --- a/docs/documentation/components/menu.html +++ b/docs/documentation/components/menu.html @@ -1,8 +1,18 @@ --- title: Menu +subtitle: "A simple menu, for any type of vertical navigation" layout: documentation doc-tab: components doc-subtab: menu +breadcrumb: +- home +- documentation +- components +- components-menu +meta: +- colors: false +- sizes: false +- variables: true --- {% capture menu_example %} @@ -42,24 +52,6 @@ doc-subtab: menu {% endcapture %} -{% include subnav/subnav-components.html %} +{% include snippet.html content=menu_example size="one-third" %} -
-
-

Menu

-

A simple menu, for any type of vertical navigation

- {% - include meta.html - colors=false - sizes=false - variables=true - %} - -
- - {% include snippet.html content=menu_example size="one-third" %} - - {% include variables.html type='component' %} - -
-
+{% include variables.html type='component' %} diff --git a/docs/documentation/components/message.html b/docs/documentation/components/message.html index 9e320ed7..c9ef7440 100644 --- a/docs/documentation/components/message.html +++ b/docs/documentation/components/message.html @@ -1,8 +1,18 @@ --- title: Message +subtitle: "Colored message blocks, to emphasize part of your page" layout: documentation doc-tab: components doc-subtab: message +meta: +- colors: true +- sizes: true +- variables: true +breadcrumb: +- home +- documentation +- components +- components-message --- {% capture message_example %} @@ -108,48 +118,28 @@ doc-subtab: message {% endfor %} {% endcapture %} -{% include subnav/subnav-components.html %} +{% include snippet.html content=message_example %} -
-
-

Messages

-

- Colored message blocks, to emphasize part of your page -

- {% - include meta.html - colors=true - sizes=true - variables=true - %} +{% include anchor.html name="Colors" %} -
+{% include snippet.html content=message_colors_example %} - {% include snippet.html content=message_example %} +{% include anchor.html name="Message body only" %} - {% include anchor.html name="Colors" %} +
+

You can omit the message header:

+
- {% include snippet.html content=message_colors_example %} +{% include snippet.html content=message_body_example %} - {% include anchor.html name="Message body only" %} +{% include anchor.html name="Sizes" %} -
-

You can omit the message header:

-
+{% include snippet.html content=message_small %} - {% include snippet.html content=message_body_example %} +{% include snippet.html content=message_normal %} - {% include anchor.html name="Sizes" %} +{% include snippet.html content=message_medium %} - {% include snippet.html content=message_small %} +{% include snippet.html content=message_large %} - {% include snippet.html content=message_normal %} - - {% include snippet.html content=message_medium %} - - {% include snippet.html content=message_large %} - - {% include variables.html type='component' %} - -
-
+{% include variables.html type='component' %} diff --git a/docs/documentation/components/modal.html b/docs/documentation/components/modal.html index 30cd3e1a..c044eb6e 100644 --- a/docs/documentation/components/modal.html +++ b/docs/documentation/components/modal.html @@ -1,8 +1,18 @@ --- title: Modal +subtitle: "A classic modal overlay, in which you can include any content you want" layout: documentation doc-tab: components doc-subtab: modal +meta: +- colors: false +- sizes: false +- variables: true +breadcrumb: +- home +- documentation +- components +- components-modal --- {% capture modal %} @@ -46,91 +56,73 @@ doc-subtab: modal {% endcapture %} -{% include subnav/subnav-components.html %} - -
-
-

Modal

-

A classic modal overlay, in which you can include any content you want

- {% - include meta.html - colors=false - sizes=false - variables=true - %} - -
- -
-

The modal structure is very simple:

+
+

The modal structure is very simple:

+
    +
  • + modal: the main container
    • - modal: the main container -
        -
      • - modal-background: a transparent overlay that can act as a click target to close the modal -
      • -
      • - modal-content: a horizontally and vertically centered container, with a maximum width of 640px, in which you can include any content -
      • -
      • - modal-close: a simple cross located in the top right corner -
      • -
      + modal-background: a transparent overlay that can act as a click target to close the modal +
    • +
    • + modal-content: a horizontally and vertically centered container, with a maximum width of 640px, in which you can include any content +
    • +
    • + modal-close: a simple cross located in the top right corner
    -

    - -

    -
+ + +

+ +

+
- {% highlight html %}{{ modal }}{% endhighlight %} +{% highlight html %}{{ modal }}{% endhighlight %} -
-

To activate the modal, just add the is-active modifier on the .modal container

-
- -
-
- No JavaScript -
-
- Bulma does not include any JavaScript interaction. You will have to implement the class toggle yourself. -
-
- -
- -

Image modal

- -
-

Because a modal can contain anything you want, you can very simply use it to build an image gallery for example:

-

- Launch image modal -

-
- - {% highlight html %}{{ image_modal }}{% endhighlight %} - -
- -

Modal card

- -
-

If you want a more classic modal, with a head, a body and a foot, use the modal-card.

-

- -

-
- -
- {% highlight html %}{{ modal_card }}{% endhighlight %} -
- - {% include variables.html type='component' %} +
+

To activate the modal, just add the is-active modifier on the .modal container

+
+
+
+ No JavaScript
-
+
+ Bulma does not include any JavaScript interaction. You will have to implement the class toggle yourself. +
+ + +
+ +

Image modal

+ +
+

Because a modal can contain anything you want, you can very simply use it to build an image gallery for example:

+

+ Launch image modal +

+
+ +{% highlight html %}{{ image_modal }}{% endhighlight %} + +
+ +

Modal card

+ +
+

If you want a more classic modal, with a head, a body and a foot, use the modal-card.

+

+ +

+
+ +
+ {% highlight html %}{{ modal_card }}{% endhighlight %} +
+ +{% include variables.html type='component' %} + +{% include anchor.html name="Navbar start and navbar end" %} + +
+

+ The navbar-start and navbar-end are the two direct and only children of the navbar-menu. +

+

+ On desktop {% include bp/desktop.html %}: +

+
    +
  • + navbar-start will appear on the left +
  • +
  • + navbar-end will appear on the right +
  • +
+

+ Each of them can contain any number of navbar-item. +

+
+ +{% highlight html %}{{navbar_start_end_example}}{% endhighlight %} + +{% include anchor.html name="Navbar item" %} + +
+

+ A navbar-item is a repeatable element that can be: +

+
    +
  • + a navigation link + {% highlight html %}{{ navbar_item_link_example }}{% endhighlight %} +
  • +
  • + a container for the brand logo + {% highlight html %}{{ navbar_item_brand_example }}{% endhighlight %} +
  • +
  • + the parent of a dropdown menu + {% highlight html %}{{ navbar_item_dropdown_example }}{% endhighlight %} +
  • +
  • + a child of a navbar dropdown + {% highlight html %}{{ navbar_item_dropdown_bis_example }}{% endhighlight %} +
  • +
  • + a container for almost anything you want, like a field +
    + {% highlight html %}{{ navbar_item_other_example }}{% endhighlight %} +
    +
  • +
+

+ It can either be an anchor tag <a> or a <div>, as a direct child of either: +

+
    +
  • + navbar +
  • +
  • + navbar-brand +
  • +
  • + navbar-start +
  • +
  • + navbar-end +
  • +
  • + navbar-dropdown +
  • +
+

+ You can add the modifier class is-expanded to turn it into a full-width element. +

+
+ +{% include anchor.html name="Transparent navbar" %} + +
+

+ To seamlessly integrate the navbar in any visual context, you can add the is-transparent modifier on the navbar component. This will remove any hover or active background from the navbar items. +

+
+ +{% include snippet.html content=navbar_transparent_example paddingless=true horizontal=true more=true %} + +{% include anchor.html name="Fixed navbar" %} + +{% include elements/new-tag.html version="0.6.1" %} + +
+

+ You can now fix the navbar to either the top or bottom of the page. This is a 2-step process: +

+
    +
  • + Add either is-fixed-top or is-fixed-bottom to the navbar component + {% highlight html %}
  • +
  • + Add the corresponding has-navbar-fixed-top or has-navbar-fixed-bottom modifier to either <html> or <body> element to provide the appropriate padding to the page + {% highlight html %}{% endhighlight %} +
  • +
+
+ +

Try it out!

+ + + +{% include anchor.html name="Dropdown menu" %} + +
+

+ To create a dropdown menu, you will need 4 elements: +

+
    +
  • + navbar-item with the has-dropdown modifier +
  • +
  • + navbar-link which contains the dropdown arrow +
  • +
  • + navbar-dropdown which can contain instances of navbar-item and navbar-divider +
  • +
+
+ +
+
+
+ {{ navbar_dropdown_example }} +
+
+ +
+ {% highlight html %}{{ navbar_dropdown_example }}{% endhighlight %} +
+
+ +

+ Show/hide the dropdown with either CSS or JavaScript +

+ +
+

+ The navbar-dropdown is visible on touch devices {% include bp/touch.html %} but hidden on desktop {% include bp/desktop.html %}. How the dropdown is displayed on desktop depends on the parent's class. +

+

+ The navbar-item with the has-dropdown modifier, has 2 additional modifiers +

+
    +
  • + is-hoverable: the dropdown will show up when hovering the parent navbar-item +
  • +
  • + is-active: the dropdown will show up all the time +
  • +
+
+ +
+

+ While the CSS :hover implementation works perfectly, the is-active class is available for users who want to control the display of the dropdown with JavaScript. +

+
+ +{% highlight html %}{{ navbar_dropdown_hover_snippet }}{% endhighlight %} + +
+
+
+ {{ navbar_dropdown_hover_example }} +
+
+ +
+ {% highlight html %}{{ navbar_dropdown_hover_example }}{% endhighlight %} +
+
+ +{% highlight html %}{{ navbar_dropdown_active_snippet }}{% endhighlight %} + +
+
+
+ {{ navbar_dropdown_active_example }} +
+
+ +
+ {% highlight html %}{{ navbar_dropdown_active_example }}{% endhighlight %} +
+
+ +

+ Right dropdown +

+ +
+

+ If your parent navbar-item is on the right side, you can position the dropdown to start from the right with the is-right modifier. +

+
+ +{% highlight html %}{{ navbar_dropdown_right_snippet }}{% endhighlight %} + +
+
+
+ {{ navbar_dropdown_right_example }} +
+
+ +
+ {% highlight html %}{{ navbar_dropdown_right_example }}{% endhighlight %} +
+
+ +

+ Dropup +

+ +{% include elements/new-tag.html version="0.6.1" %} + +
+

+ If you're using a navbar at the bottom, like the fixed bottom navbar, you might want to use a dropup menu. Simply add the has-dropdown and has-dropdown-up modifiers to the parent navbar-item. +

+
+ +{% highlight html %}{{ navbar_dropup_snippet }}{% endhighlight %} + +
+
+
+ {{ navbar_dropup_example }} +
+
+ +
+ {% highlight html %}{{ navbar_dropup_example }}{% endhighlight %} +
+
+ +

+ Styles for the dropdown menu +

+ +
+

+ By default, the navbar-dropdown has: +

+
    +
  • + a grey border-top +
  • +
  • + a border-radius at both bottom corners +
  • +
+
+ +
+
+
+ {{ navbar_dropdown_default_example }} +
+
+ +
+ {% highlight html %}{{ navbar_dropdown_default_example }}{% endhighlight %} +
+
+ +
+

+ When having a transparent navbar, it is preferable to use the boxed version of the dropdown, by using the is-boxed modifier. +

+
    +
  • + the grey border is removed +
  • +
  • + a slight inner shadow is added +
  • +
  • + all corners are rounded +
  • +
  • + the hover/active state is animated +
  • +
+
+ +
+
+
+ {{ navbar_dropdown_boxed_example }} +
+
+ +
+ {% highlight html %}{{ navbar_dropdown_boxed_example }}{% endhighlight %} +
+
+ +

+ Active dropdown navbar item +

+ +
+
+
+ {{ navbar_dropdown_item_active_example }} +
+
+ +
+ {% highlight html %}{{ navbar_dropdown_item_active_example }}{% endhighlight %} +
+
+ +

+ Dropdown divider +

+ +
+

+ You can add a navbar-divider to display a horizontal rule in a navbar-dropdown. +

+
+ +{% highlight html %}{{ navbar_divider_example }}{% endhighlight %} + +{% include anchor.html name="Colors" %} + +
+ New! + 0.5.2 +
+ +
+

+ You can change the background color of the navbar by using one of the 9 color modifiers: +

+
    +
  • is-primary
  • +
  • is-link
  • +
  • is-info
  • +
  • is-success
  • +
  • is-warning
  • +
  • is-danger
  • +
  • is-black
  • +
  • is-dark
  • +
  • is-light
  • +
  • is-white
  • +
+
+ +{% highlight html %}{{ navbar_color_markup }}{% endhighlight %} + +
+ {% include examples/navbar-color.html color="primary" %} +
+ +
+ {% include examples/navbar-color.html color="link" %} +
+ +
+ {% include examples/navbar-color.html color="info" %} +
+ +
+ {% include examples/navbar-color.html color="success" %} +
+ +
+ {% include examples/navbar-color.html color="warning" light=true %} +
+ +
+ {% include examples/navbar-color.html color="danger" %} +
+ +
+ {% include examples/navbar-color.html color="black" %} +
+ +
+ {% include examples/navbar-color.html color="dark" %} +
+ +
+ {% include examples/navbar-color.html color="light" light=true %} +
+ +
+ {% include examples/navbar-color.html color="white" light=true %} +
+ +{% include variables.html type='component' %} + diff --git a/docs/documentation/components/pagination.html b/docs/documentation/components/pagination.html index fb17d828..b3052e29 100644 --- a/docs/documentation/components/pagination.html +++ b/docs/documentation/components/pagination.html @@ -1,8 +1,18 @@ --- title: Pagination +subtitle: "A responsive, usable, and flexible pagination" layout: documentation doc-tab: components doc-subtab: pagination +breadcrumb: +- home +- documentation +- components +- components-pagination +meta: +- colors: false +- sizes: true +- variables: true --- {% capture pagination_example %} @@ -149,90 +159,72 @@ doc-subtab: pagination {% endcapture %} -{% include subnav/subnav-components.html %} - -
-
-

Pagination

-

A responsive, usable, and flexible pagination

- {% - include meta.html - colors=false - sizes=true - variables=true - %} - -
- -
-

- The pagination component consists of several elements: -

+
+

+ The pagination component consists of several elements: +

+
    +
  • + pagination-previous and pagination-next for incremental navigation +
  • +
  • + pagination-list which displays page items:
    • - pagination-previous and pagination-next for incremental navigation + pagination-link for the page numbers
    • - pagination-list which displays page items: -
        -
      • - pagination-link for the page numbers -
      • -
      • - pagination-ellipsis for range separators -
      • -
      + pagination-ellipsis for range separators
    -

    - All elements are optional so you can compose your pagination as you wish. -

    -
+ + +

+ All elements are optional so you can compose your pagination as you wish. +

+
- {% include snippet.html content=pagination_example horizontal=true more=true %} +{% include snippet.html content=pagination_example horizontal=true more=true %} -
-

- You can disable some links if they are not active, or change the amount of page numbers available. -

-
+
+

+ You can disable some links if they are not active, or change the amount of page numbers available. +

+
- {% include snippet.html content=pagination_options_example horizontal=true more=true %} +{% include snippet.html content=pagination_options_example horizontal=true more=true %} -
-

- By default on tablet, the list is located on the left, and the previous/next buttons on the right. But you can change the order of these elements by using the is-centered and is-right modifiers. -

-
+
+

+ By default on tablet, the list is located on the left, and the previous/next buttons on the right. But you can change the order of these elements by using the is-centered and is-right modifiers. +

+
- {% include snippet.html content=pagination_centered_example horizontal=true more=true %} +{% include snippet.html content=pagination_centered_example horizontal=true more=true %} - {% include snippet.html content=pagination_right_example horizontal=true more=true %} +{% include snippet.html content=pagination_right_example horizontal=true more=true %} - {% include anchor.html name="Styles" %} +{% include anchor.html name="Styles" %} - {% include elements/new-tag.html version="0.6.2" %} +{% include elements/new-tag.html version="0.6.2" %} -

- Add the is-rounded modifier to have rounded pagination items. -

+

+ Add the is-rounded modifier to have rounded pagination items. +

- {% include snippet.html content=pagination_rounded_example horizontal=true more=true %} +{% include snippet.html content=pagination_rounded_example horizontal=true more=true %} - {% include anchor.html name="Sizes" %} +{% include anchor.html name="Sizes" %} -

- The pagination comes in 3 additional sizes.
- You only need to append the modifier is-small, is-medium, or is-large to the pagination component. -

+

+ The pagination comes in 3 additional sizes.
+ You only need to append the modifier is-small, is-medium, or is-large to the pagination component. +

- {% include snippet.html content=pagination_small_example horizontal=true more=true %} +{% include snippet.html content=pagination_small_example horizontal=true more=true %} - {% include snippet.html content=pagination_medium_example horizontal=true more=true %} +{% include snippet.html content=pagination_medium_example horizontal=true more=true %} - {% include snippet.html content=pagination_large_example horizontal=true more=true %} +{% include snippet.html content=pagination_large_example horizontal=true more=true %} - {% include variables.html type='component' %} - -
-
+{% include variables.html type='component' %} diff --git a/docs/documentation/components/panel.html b/docs/documentation/components/panel.html index 93658565..0a169ce7 100644 --- a/docs/documentation/components/panel.html +++ b/docs/documentation/components/panel.html @@ -1,8 +1,18 @@ --- title: Panel +subtitle: "A composable panel, for compact controls" layout: documentation doc-tab: components doc-subtab: panel +breadcrumb: +- home +- documentation +- components +- components-panel +meta: +- colors: false +- sizes: false +- variables: true --- {% capture panel_example %} @@ -73,50 +83,32 @@ doc-subtab: panel {% endcapture %} -{% include subnav/subnav-components.html %} - -
-
-

Panel

-

A composable panel, for compact controls

- {% - include meta.html - colors=false - sizes=false - variables=true - %} - -
- -
-

- The panel is container for several types: -

+
+

+ The panel is container for several types: +

+
    +
  • + panel-heading as the first child +
  • +
  • + panel-tabs for navigation +
  • +
  • + panel-block which can contain other elements, like:
      -
    • - panel-heading as the first child -
    • -
    • - panel-tabs for navigation -
    • -
    • - panel-block which can contain other elements, like: -
        -
      • control
      • -
      • input
      • -
      • button
      • -
      • panel-icon
      • -
      -
    • +
    • control
    • +
    • input
    • +
    • button
    • +
    • panel-icon
    -

    - The panel-block can be an anchor tag <a> or a label <label> with a checkbox inside. -

    -
+ + +

+ The panel-block can be an anchor tag <a> or a label <label> with a checkbox inside. +

+
- {% include snippet.html content=panel_example size="one-third" %} +{% include snippet.html content=panel_example size="one-third" %} - {% include variables.html type='component' %} - -
-
+{% include variables.html type='component' %} diff --git a/docs/documentation/components/tabs.html b/docs/documentation/components/tabs.html index 2e7998d5..fdf60c26 100644 --- a/docs/documentation/components/tabs.html +++ b/docs/documentation/components/tabs.html @@ -1,8 +1,18 @@ --- title: Tabs +subtitle: "Simple responsive horizontal navigation tabs, with different styles" layout: documentation doc-tab: components doc-subtab: tabs +breadcrumb: +- home +- documentation +- components +- components-tabs +meta: +- colors: false +- sizes: true +- variables: true --- {% capture tabs_example %} @@ -344,107 +354,88 @@ doc-subtab: tabs {% endcapture %} -{% include subnav/subnav-components.html %} +
+

Tabs only require a tabs container and a <ul> list.
+ The default tabs style has a single border at the bottom.

+
-
-
-

Tabs

-

Simple responsive horizontal navigation tabs, with different styles

- {% - include meta.html - since="0.4.4" - colors=false - sizes=true - variables=true - %} +{% include snippet.html content=tabs_example horizontal=true %} -
+{% include snippet.html content=tabs_example horizontal=true more=true %} -
-

Tabs only require a tabs container and a <ul> list.
- The default tabs style has a single border at the bottom.

-
+{% include anchor.html name="Alignment" %} - {% include snippet.html content=tabs_example horizontal=true %} +
+

+ To align the tabs list, use the is-centered or is-right modifier on the .tabs container: +

+
- {% include snippet.html content=tabs_example horizontal=true more=true %} +{% include snippet.html content=tabs_centered_example horizontal=true more=true %} - {% include anchor.html name="Alignment" %} +{% include snippet.html content=tabs_right_example horizontal=true more=true %} -
-

- To align the tabs list, use the is-centered or is-right modifier on the .tabs container: -

-
+{% include anchor.html name="Icons" %} - {% include snippet.html content=tabs_centered_example horizontal=true more=true %} +
+

You can use any of the Font Awesome icons.

+
- {% include snippet.html content=tabs_right_example horizontal=true more=true %} +{% include snippet.html content=tabs_icons_example horizontal=true more=true %} - {% include anchor.html name="Icons" %} +{% include snippet.html content=tabs_icons_example horizontal=true more=true %} -
-

You can use any of the Font Awesome icons.

-
+{% include anchor.html name="Sizes" %} +
+

You can choose between 3 additional sizes: is-small is-medium and is-large.

+
- {% include snippet.html content=tabs_icons_example horizontal=true more=true %} +{% include snippet.html content=tabs_small_example horizontal=true more=true %} - {% include snippet.html content=tabs_icons_example horizontal=true more=true %} +{% include snippet.html content=tabs_medium_example horizontal=true more=true %} - {% include anchor.html name="Sizes" %} -
-

You can choose between 3 additional sizes: is-small is-medium and is-large.

-
+{% include snippet.html content=tabs_large_example horizontal=true more=true %} - {% include snippet.html content=tabs_small_example horizontal=true more=true %} +{% include anchor.html name="Styles" %} - {% include snippet.html content=tabs_medium_example horizontal=true more=true %} +
+ If you want a more classic style with borders, just append the is-boxed modifier. +
- {% include snippet.html content=tabs_large_example horizontal=true more=true %} +{% include snippet.html content=tabs_boxed_example horizontal=true more=true %} - {% include anchor.html name="Styles" %} +

+ If you want mutually exclusive tabs (like radio buttons where clicking one deselects all other ones), use the is-toggle modifier. +

-
- If you want a more classic style with borders, just append the is-boxed modifier. -
+{% include snippet.html content=tabs_toggle_example horizontal=true more=true %} - {% include snippet.html content=tabs_boxed_example horizontal=true more=true %} +{% include elements/new-tag.html version="0.6.2" %} -

- If you want mutually exclusive tabs (like radio buttons where clicking one deselects all other ones), use the is-toggle modifier. -

+

+ If you use both is-toggle and is-toggle-rounded, the first and last items will be rounded. +

- {% include snippet.html content=tabs_toggle_example horizontal=true more=true %} +{% include snippet.html content=tabs_toggle_rounded_example horizontal=true more=true %} - {% include elements/new-tag.html version="0.6.2" %} +

+ If you want the tabs to take up the whole width available, use is-fullwidth. +

-

- If you use both is-toggle and is-toggle-rounded, the first and last items will be rounded. -

+{% include snippet.html content=tabs_fullwidth_example horizontal=true more=true %} - {% include snippet.html content=tabs_toggle_rounded_example horizontal=true more=true %} +{% include anchor.html name="Combining" %} -

- If you want the tabs to take up the whole width available, use is-fullwidth. -

+
+

You can combine different modifiers. For example, you can have centered boxed tabs, or fullwidth toggle ones.

+
- {% include snippet.html content=tabs_fullwidth_example horizontal=true more=true %} +{% include snippet.html content=tabs_centered_boxed_example horizontal=true more=true %} - {% include anchor.html name="Combining" %} +{% include snippet.html content=tabs_toggle_fullwidth_example horizontal=true more=true %} -
-

You can combine different modifiers. For example, you can have centered boxed tabs, or fullwidth toggle ones.

-
+{% include snippet.html content=tabs_centered_boxed_medium_example horizontal=true more=true %} - {% include snippet.html content=tabs_centered_boxed_example horizontal=true more=true %} +{% include snippet.html content=tabs_toggle_fullwidth_large_example horizontal=true more=true %} - {% include snippet.html content=tabs_toggle_fullwidth_example horizontal=true more=true %} - - {% include snippet.html content=tabs_centered_boxed_medium_example horizontal=true more=true %} - - {% include snippet.html content=tabs_toggle_fullwidth_large_example horizontal=true more=true %} - - {% include variables.html type='component' %} - -
-
+{% include variables.html type='component' %} From f0074aa33980467b399754a60bce0822f4c7d6ab Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Mon, 9 Apr 2018 14:15:31 +0100 Subject: [PATCH 05/56] Do elements --- docs/_data/links.json | 43 +- docs/_includes/elements/improve-page.html | 30 +- docs/_layouts/documentation.html | 51 +- docs/_sass/main.sass | 3 +- docs/_sass/native.sass | 3 +- docs/_sass/specific.sass | 3 + docs/css/bulma-docs.css | 11 +- docs/documentation.html | 8 + docs/documentation/components/breadcrumb.html | 7 +- docs/documentation/components/card.html | 8 +- docs/documentation/components/dropdown.html | 6 +- docs/documentation/components/menu.html | 6 +- docs/documentation/components/message.html | 8 +- docs/documentation/components/modal.html | 8 +- docs/documentation/components/navbar.html | 6 +- docs/documentation/components/pagination.html | 6 +- docs/documentation/components/panel.html | 6 +- docs/documentation/components/tabs.html | 6 +- docs/documentation/elements/box.html | 48 +- docs/documentation/elements/button.html | 8 +- docs/documentation/elements/content.html | 150 +- docs/documentation/elements/delete.html | 76 +- docs/documentation/elements/icon.html | 1776 ++++++++--------- docs/documentation/elements/image.html | 262 ++- docs/documentation/elements/notification.html | 38 +- docs/documentation/elements/progress.html | 42 +- docs/documentation/elements/table.html | 538 +++-- docs/documentation/elements/tag.html | 533 +++-- docs/documentation/elements/title.html | 258 ++- sass/elements/table.sass | 4 +- 30 files changed, 1966 insertions(+), 1986 deletions(-) create mode 100644 docs/documentation.html diff --git a/docs/_data/links.json b/docs/_data/links.json index f7abf855..19b160e4 100644 --- a/docs/_data/links.json +++ b/docs/_data/links.json @@ -40,10 +40,50 @@ "name": "Elements", "path": "/documentation/elements" }, - "button": { + "elements-box": { + "name": "Box", + "path": "/documentation/elements/box" + }, + "elements-button": { "name": "Button", "path": "/documentation/elements/button" }, + "elements-content": { + "name": "Content", + "path": "/documentation/elements/content" + }, + "elements-delete": { + "name": "Delete", + "path": "/documentation/elements/delete" + }, + "elements-icon": { + "name": "Icon", + "path": "/documentation/elements/icon" + }, + "elements-image": { + "name": "Image", + "path": "/documentation/elements/image" + }, + "elements-notification": { + "name": "Notification", + "path": "/documentation/elements/notification" + }, + "elements-progress": { + "name": "Progress bars", + "path": "/documentation/elements/progress" + }, + "elements-table": { + "name": "Table", + "path": "/documentation/elements/table" + }, + "elements-tag": { + "name": "Tag", + "path": "/documentation/elements/tag" + }, + "elements-title": { + "name": "Title", + "path": "/documentation/elements/title" + }, "components": { "name": "Components", "path": "/documentation/components" @@ -91,6 +131,7 @@ }, "order": { "columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"], + "elements": ["elements-box", "elements-button", "elements-content", "elements-delete", "elements-icon", "elements-image", "elements-notification", "elements-progress", "elements-table", "elements-tag", "elements-title"], "components": ["components-breadcrumb", "components-card", "components-dropdown", "components-menu", "components-message", "components-modal", "components-navbar", "components-pagination", "components-panel", "components-tabs"] } } diff --git a/docs/_includes/elements/improve-page.html b/docs/_includes/elements/improve-page.html index 738dd03f..05b3c6fc 100644 --- a/docs/_includes/elements/improve-page.html +++ b/docs/_includes/elements/improve-page.html @@ -1,16 +1,14 @@ -
-
-

- - Made with Bulma - -
- This page is open source. - Noticed a typo? Or something unclear? -
- - Improve this page on GitHub - -

-
-
+
+

+ + Made with Bulma + +
+ This page is open source. + Noticed a typo? Or something unclear? +
+ + Improve this page on GitHub + +

+
diff --git a/docs/_layouts/documentation.html b/docs/_layouts/documentation.html index a2603258..8da5ff8e 100644 --- a/docs/_layouts/documentation.html +++ b/docs/_layouts/documentation.html @@ -41,27 +41,29 @@ route: documentation - + {% endif %}
@@ -71,6 +73,15 @@ route: documentation

{{ page.subtitle }}

+ + {% if page.meta %} + {% + include meta.html + colors=page.meta.colors + sizes=page.meta.sizes + variables=page.meta.variables + %} + {% endif %}
diff --git a/docs/_sass/main.sass b/docs/_sass/main.sass index 442f3896..411f60fd 100644 --- a/docs/_sass/main.sass +++ b/docs/_sass/main.sass @@ -81,6 +81,7 @@ .bd-main padding: 0 3rem .bd-lead - padding: 3rem 3rem 3rem 0 + margin-left: -3rem + padding: 3rem .bd-side padding: 3rem 0 3rem 1.5rem diff --git a/docs/_sass/native.sass b/docs/_sass/native.sass index e1a6c91b..446d7a32 100644 --- a/docs/_sass/native.sass +++ b/docs/_sass/native.sass @@ -1,4 +1,5 @@ .native-js + border-top: 2px solid $background display: none font-size: 1rem opacity: 0 @@ -86,4 +87,4 @@ $native-bp: 600px +widescreen .native-js - font-size: 1.25rem \ No newline at end of file + font-size: 1.25rem diff --git a/docs/_sass/specific.sass b/docs/_sass/specific.sass index f4d5b7e4..e67d8bc3 100644 --- a/docs/_sass/specific.sass +++ b/docs/_sass/specific.sass @@ -1,3 +1,6 @@ +.bd-typo + margin-top: 3rem + .bd-has-text-rss color: $rss diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 5e804bc8..91d26ac7 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -34,7 +34,7 @@ width: 0.5em; } -.box:not(:last-child), .content:not(:last-child), .notification:not(:last-child), .progress:not(:last-child), .table-container:not(:last-child), .title:not(:last-child), +.box:not(:last-child), .content:not(:last-child), .notification:not(:last-child), .progress:not(:last-child), .table:not(:last-child), .table-container:not(:last-child), .title:not(:last-child), .subtitle:not(:last-child), .block:not(:last-child), .highlight:not(:last-child), .breadcrumb:not(:last-child), .level:not(:last-child), .message:not(:last-child), .tabs:not(:last-child), .bd-snippet:not(:last-child), .bd-callout:not(:last-child) { margin-bottom: 1.5rem; } @@ -4545,7 +4545,6 @@ a.box:active { .table { background-color: white; color: #363636; - margin-bottom: 1.5rem; } .table td, @@ -9592,7 +9591,8 @@ label.panel-block:hover { padding: 0 3rem; } .bd-lead { - padding: 3rem 3rem 3rem 0; + margin-left: -3rem; + padding: 3rem; } .bd-side { padding: 3rem 0 3rem 1.5rem; @@ -10391,6 +10391,10 @@ svg { text-decoration: underline; } +.bd-typo { + margin-top: 3rem; +} + .bd-has-text-rss { color: #f26522; } @@ -12330,6 +12334,7 @@ html.route-index .hero.is-primary a.column:hover .title strong { } .native-js { + border-top: 2px solid whitesmoke; display: none; font-size: 1rem; opacity: 0; diff --git a/docs/documentation.html b/docs/documentation.html new file mode 100644 index 00000000..6bfe7ea9 --- /dev/null +++ b/docs/documentation.html @@ -0,0 +1,8 @@ +--- +title: Documentation +subtitle: "Everything you need to create a website with Bulma" +layout: documentation +breadcrumb: +- home +- documentation +--- diff --git a/docs/documentation/components/breadcrumb.html b/docs/documentation/components/breadcrumb.html index a6e56f7a..28ce30c5 100644 --- a/docs/documentation/components/breadcrumb.html +++ b/docs/documentation/components/breadcrumb.html @@ -10,10 +10,9 @@ breadcrumb: - components - components-breadcrumb meta: -- since: "0.4.3" -- variables: true -- colors: false -- sizes: true + variables: true + colors: false + sizes: true --- {% capture breadcrumb_example %} diff --git a/docs/documentation/components/card.html b/docs/documentation/components/card.html index c74fb681..3205544b 100644 --- a/docs/documentation/components/card.html +++ b/docs/documentation/components/card.html @@ -1,6 +1,6 @@ --- title: Card -subtile: "An all-around flexible and composable component" +subtitle: "An all-around flexible and composable component" layout: documentation doc-tab: components doc-subtab: card @@ -10,9 +10,9 @@ breadcrumb: - components - components-card meta: -- variables: true -- colors: false -- sizes: false + variables: true + colors: false + sizes: false --- {% capture card_example %} diff --git a/docs/documentation/components/dropdown.html b/docs/documentation/components/dropdown.html index 07f60058..262261eb 100644 --- a/docs/documentation/components/dropdown.html +++ b/docs/documentation/components/dropdown.html @@ -10,9 +10,9 @@ breadcrumb: - components - components-dropdown meta: -- colors: false -- sizes: false -- variables: true + colors: false + sizes: false + variables: true --- {% capture dropdown_example %} diff --git a/docs/documentation/components/menu.html b/docs/documentation/components/menu.html index 34a83c08..66f24dfe 100644 --- a/docs/documentation/components/menu.html +++ b/docs/documentation/components/menu.html @@ -10,9 +10,9 @@ breadcrumb: - components - components-menu meta: -- colors: false -- sizes: false -- variables: true + colors: false + sizes: false + variables: true --- {% capture menu_example %} diff --git a/docs/documentation/components/message.html b/docs/documentation/components/message.html index c9ef7440..f7e1e481 100644 --- a/docs/documentation/components/message.html +++ b/docs/documentation/components/message.html @@ -4,15 +4,15 @@ subtitle: "Colored message blocks, to emphasize part of your pa layout: documentation doc-tab: components doc-subtab: message -meta: -- colors: true -- sizes: true -- variables: true breadcrumb: - home - documentation - components - components-message +meta: + colors: true + sizes: true + variables: true --- {% capture message_example %} diff --git a/docs/documentation/components/modal.html b/docs/documentation/components/modal.html index c044eb6e..25f3933b 100644 --- a/docs/documentation/components/modal.html +++ b/docs/documentation/components/modal.html @@ -4,15 +4,15 @@ subtitle: "A classic modal overlay, in which you can include box to contain other elements" layout: documentation doc-tab: elements doc-subtab: box +breadcrumb: +- home +- documentation +- elements +- elements-box +meta: + colors: false + sizes: false + variables: true --- -{% include subnav/subnav-elements.html %} - {% capture box_example %}
@@ -47,32 +55,14 @@ doc-subtab: box
{% endcapture %} -
-
-

Box

-

- A white box to contain other elements -

- {% - include meta.html - colors=false - sizes=false - variables=true - %} +
+

+ The .box element is simply a container with a shadow, a border, a radius, and some padding. +
+ For example, you can include a media object: +

+
-
+{% include snippet.html content=box_example more=true %} -
-

- The .box element is simply a container with a shadow, a border, a radius, and some padding. -
- For example, you can include a media object: -

-
- - {% include snippet.html content=box_example more=true %} - - {% include variables.html type='element' %} - -
-
+{% include variables.html type='element' %} diff --git a/docs/documentation/elements/button.html b/docs/documentation/elements/button.html index 122a2147..fdf2341d 100644 --- a/docs/documentation/elements/button.html +++ b/docs/documentation/elements/button.html @@ -8,11 +8,11 @@ breadcrumb: - home - documentation - elements -- button +- elements-button meta: -- colors: true -- sizes: true -- variables: true + colors: true + sizes: true + variables: true --- {% capture button_example %} diff --git a/docs/documentation/elements/content.html b/docs/documentation/elements/content.html index 60a87137..01a0067a 100644 --- a/docs/documentation/elements/content.html +++ b/docs/documentation/elements/content.html @@ -1,8 +1,18 @@ --- title: Content +subtitle: "A single class to handle WYSIWYG generated content, where only HTML tags are available" layout: documentation doc-tab: elements doc-subtab: content +breadcrumb: +- home +- documentation +- elements +- elements-content +meta: + colors: false + sizes: true + variables: true --- {% capture content_pre %} @@ -101,87 +111,67 @@ doc-subtab: content
{% endcapture %} -{% include subnav/subnav-elements.html %} +
+

When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use content as container. It can handle almost any HTML tag:

+
    +
  • <p> paragraphs
  • +
  • <ul> <ol> <dl> lists
  • +
  • <h1> to <h6> headings
  • +
  • <blockquote> quotes
  • +
  • <em> and <strong>
  • +
  • <table> <tr> <th> <td> tables
  • +
+

This content class can be used in any context where you just want to (or can only) write some text. For example, it's used for the paragraph you're currently reading.

+
-
-
-

Content

-

- A single class to handle WYSIWYG generated content, where only HTML tags are available -

- {% - include meta.html - colors=false - sizes=true - variables=true - %} +{% include snippet.html content=content_example %} -
- -
-

When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use content as container. It can handle almost any HTML tag:

-
    -
  • <p> paragraphs
  • -
  • <ul> <ol> <dl> lists
  • -
  • <h1> to <h6> headings
  • -
  • <blockquote> quotes
  • -
  • <em> and <strong>
  • -
  • <table> <tr> <th> <td> tables
  • -
-

This content class can be used in any context where you just want to (or can only) write some text. For example, it's used for the paragraph you're currently reading.

-
- - {% include snippet.html content=content_example %} - - {% include anchor.html name="Sizes" %} - -
-

You can use the is-small, is-medium and is-large modifiers to change the font size.

-
-
-
-

Hello World

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.

-

Second level

-

Curabitur accumsan turpis pharetra augue tincidunt blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.

-
    -
  • In fermentum leo eu lectus mollis, quis dictum mi aliquet.
  • -
  • Morbi eu nulla lobortis, lobortis est in, fringilla felis.
  • -
  • Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
  • -
  • Ut non enim metus.
  • -
-
-
-
-
-

Hello World

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.

-

Second level

-

Curabitur accumsan turpis pharetra augue tincidunt blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.

-
    -
  • In fermentum leo eu lectus mollis, quis dictum mi aliquet.
  • -
  • Morbi eu nulla lobortis, lobortis est in, fringilla felis.
  • -
  • Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
  • -
  • Ut non enim metus.
  • -
-
-
-
-
-

Hello World

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.

-

Second level

-

Curabitur accumsan turpis pharetra augue tincidunt blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.

-
    -
  • In fermentum leo eu lectus mollis, quis dictum mi aliquet.
  • -
  • Morbi eu nulla lobortis, lobortis est in, fringilla felis.
  • -
  • Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
  • -
  • Ut non enim metus.
  • -
-
-
- - {% include variables.html type='element' %} +{% include anchor.html name="Sizes" %} +
+

You can use the is-small, is-medium and is-large modifiers to change the font size.

+
+
+
+

Hello World

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.

+

Second level

+

Curabitur accumsan turpis pharetra augue tincidunt blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.

+
    +
  • In fermentum leo eu lectus mollis, quis dictum mi aliquet.
  • +
  • Morbi eu nulla lobortis, lobortis est in, fringilla felis.
  • +
  • Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
  • +
  • Ut non enim metus.
  • +
-
+ +
+
+

Hello World

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.

+

Second level

+

Curabitur accumsan turpis pharetra augue tincidunt blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.

+
    +
  • In fermentum leo eu lectus mollis, quis dictum mi aliquet.
  • +
  • Morbi eu nulla lobortis, lobortis est in, fringilla felis.
  • +
  • Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
  • +
  • Ut non enim metus.
  • +
+
+
+
+
+

Hello World

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.

+

Second level

+

Curabitur accumsan turpis pharetra augue tincidunt blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.

+
    +
  • In fermentum leo eu lectus mollis, quis dictum mi aliquet.
  • +
  • Morbi eu nulla lobortis, lobortis est in, fringilla felis.
  • +
  • Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
  • +
  • Ut non enim metus.
  • +
+
+
+ +{% include variables.html type='element' %} diff --git a/docs/documentation/elements/delete.html b/docs/documentation/elements/delete.html index d2ba8d72..62dae380 100644 --- a/docs/documentation/elements/delete.html +++ b/docs/documentation/elements/delete.html @@ -1,8 +1,18 @@ --- title: Delete +subtitle: "A versatile delete cross" layout: documentation doc-tab: elements doc-subtab: delete +breadcrumb: +- home +- documentation +- elements +- elements-delete +meta: + colors: false + sizes: true + variables: false --- {% capture cross_example %} @@ -40,53 +50,33 @@ doc-subtab: delete {% endcapture %} -{% include subnav/subnav-elements.html %} +
+

+ The .delete element is a stand-alone element that can be used in different contexts. +

+

+ On its own, it's a simple circle with a cross: +

+
-
-
-

Delete

-

- A versatile delete cross -

- {% - include meta.html - colors=false - sizes=true - variables=false - %} +{% include snippet.html content=cross_example %} -
+{% include anchor.html name="Sizes" %} -
-

- The .delete element is a stand-alone element that can be used in different contexts. -

-

- On its own, it's a simple circle with a cross: -

-
+
+

+ It comes in 4 sizes: +

+
- {% include snippet.html content=cross_example %} +{% include snippet.html content=cross_sizes_example %} - {% include anchor.html name="Sizes" %} +{% include anchor.html name="Combinations" %} -
-

- It comes in 4 sizes: -

-
+
+

+ Bulma uses it for the tags, the notifications, and the messages: +

+
- {% include snippet.html content=cross_sizes_example %} - - {% include anchor.html name="Combinations" %} - -
-

- Bulma uses it for the tags, the notifications, and the messages: -

-
- - {% include snippet.html content=cross_elements_example %} - -
-
+{% include snippet.html content=cross_elements_example %} diff --git a/docs/documentation/elements/icon.html b/docs/documentation/elements/icon.html index 970bb3a4..caa100f2 100644 --- a/docs/documentation/elements/icon.html +++ b/docs/documentation/elements/icon.html @@ -1,5 +1,6 @@ --- title: Icon +subtitle: 'Bulma is compatible with all icon font libraries: Font Awesome 5, Font Awesome 4, Material Design Icons, Open Iconic, Ionicons etc.' fontawesome4: true iconic: true ionicons: true @@ -7,6 +8,15 @@ mdi: true layout: documentation doc-tab: elements doc-subtab: icon +breadcrumb: +- home +- documentation +- elements +- elements-icon +meta: + colors: true + sizes: true + variables: true --- {% capture icon_example %} @@ -48,904 +58,892 @@ doc-subtab: icon {% endcapture %} -{% include subnav/subnav-elements.html %} - -
-
-

Icons

-

- Bulma is compatible with all icon font libraries: Font Awesome 5, Font Awesome 4, Material Design Icons, Open Iconic, Ionicons etc. -

- {% - include meta.html - colors=true - sizes=true - variables=true - %} - -
- -
-

- The icon element is a container for any type of icon font. Because the icons can take a few seconds to load, and because you want control over the space the icons will take, you can use the icon class as a reliable square container that will prevent the page to "jump" on page load.

-
- -
- {% include snippet.html content=icon_example %} -
- -
-
- The yellow background is only here for demonstration purposes, to highlight the icon container's area. -
-
- - -
-

- By default, the icon container will take up exactly 1.5rem x 1.5rem. The icon itself is sized accordingly to the icon library you're using. For example, Font Awesome 5 icons will inherit the font size.

-
- - {% include anchor.html name="Colors" %} - -
-

- Since icon fonts are simply text, you can use the text color modifiers to change the icon's color. -

-
- - {% include snippet.html content=icon_color_example %} - - {% include anchor.html name="Sizes" %} - -
-

- The Bulma icon container comes in 4 sizes. It should always be slightly bigger than the icon it contains. For example, Font Awesome 5 icons use a font-size of 1em by default (since it inherits the font size), but provides additional sizes. -

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Container classContainer sizeFont Awesome 5 classIcon sizeResult
- icon is-small - - 1rem x 1rem - - fas - - 1em - - - - -
- icon - - 1.5rem x 1.5rem - - fas - - 1em - - - - -
- fas fa-lg - - 1.33em - - - - -
- icon is-medium - - 2rem x 2rem - - fas - - 1em - - - - -
- fas fa-lg - - 1.33em - - - - -
- fas fa-2x - - 2em - - - - -
- icon is-large - - 3rem x 3rem - - fas - - 1em - - - - -
- fas fa-lg - - 1.33em - - - - -
- fas fa-2x - - 2em - - - - -
- fas fa-3x - - 3em - - - - -
- - {% include anchor.html name="Font Awesome variations" %} - -
-

- Font Awesome also provides modifier classes for: -

-
    -
  • - fixed width icons -
  • -
  • - bordered icons -
  • -
  • - animated icons -
  • -
  • - rotated & flipped icons -
  • -
  • - stacked icons -
  • -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
TypeFont Awesome classResult
- Fixed width - - fas fa-fw - - - - -
- Bordered - - fas fa-border - - - - -
- Animated - - fas fa-spinner fa-pulse - - - - -
- Rotated & flipped - - fas fa-shield-alt
- fas fa-shield-alt data-fa-transform="rotate-90"
- fas fa-shield-alt data-fa-transform="rotate-180"
- fas fa-shield-alt data-fa-transform="rotate-270"
- fas fa-shield-alt data-fa-transform="flip-h"
- fas fa-shield-alt data-fa-transform="flip-v" -
- - - -
- - - -
- - - -
- - - -
- - - -
- - - -
- Stacked - - {% highlight html %} +{% capture stacked_medium %} + -{% endhighlight %} - - - - - - - -
- {% highlight html %} + +{% endcapture %} + +{% capture stacked_large %} + -{% endhighlight %} - - - - - - - -
+ +{% endcapture %} - {% include anchor.html name="Material Design Icons" %} +
+

+ The icon element is a container for any type of icon font. Because the icons can take a few seconds to load, and because you want control over the space the icons will take, you can use the icon class as a reliable square container that will prevent the page to "jump" on page load.

+
-
-

- Here is how the icon container can be used with Material Design Icons. -

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Container classContainer sizeMDI classIcon sizeResult
- icon is-small - - 1rem x 1rem - - mdi - - 1em - - - - -
- icon - - 1.5rem x 1.5rem - - mdi mdi-18px - - 18px - - - - -
- mdi mdi-24px - - 24px - - - - -
- icon is-medium - - 2rem x 2rem - - mdi - - 1em - - - - -
- mdi mdi-18px - - 18px - - - - -
- mdi mdi-24px - - 24px - - - - -
- mdi mdi-36px - - 36px - - - - -
- icon is-large - - 3rem x 3rem - - mdi - - 1em - - - - -
- mdi mdi-18px - - 18px - - - - -
- mdi mdi-24px - - 24px - - - - -
- mdi mdi-36px - - 36px - - - - -
- mdi mdi-48px - - 48px - - - - -
- -
-

- MDI also provides modifier classes for: -

-
    -
  • - light and dark icons -
  • -
  • - rotated & flipped icons -
  • -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
TypeMaterial Design Icon classResult
- Light color - - mdi mdi-light - - - - -
- Dark color - - mdi mdi-dark - - - - -
- Light inactive color - - mdi mdi-light mdi-inactive - - - - -
- Dark inactive color - - mdi mdi-dark mdi-inactive - - - - -
- Flipped - - mdi mdi-flip-h -
- mdi mdi-flip-v -
- - - -
- - - -
- Rotated - - mdi mdi-rotate-45 -
- mdi mdi-rotate-90 -
- mdi mdi-rotate-180 -
- - - -
- - - -
- - - -
- - {% include anchor.html name="Open Iconic" %} - -
-

- Here is how the icon container can be used with Open Iconic. -

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Container classContainer sizeIconic classIcon sizeResult
- icon is-small - - 1rem x 1rem - - oi [data-glyph=puzzle-piece] - - 1em - - - - -
- icon - - 1.5rem x 1.5rem - - oi [data-glyph=puzzle-piece] - - 1em - - - - -
- icon is-medium - - 2rem x 2rem - - oi [data-glyph=puzzle-piece] - - 1em - - - - -
- icon is-large - - 3rem x 3rem - - oi [data-glyph=puzzle-piece] - - 1em - - - - -
- - {% include anchor.html name="Ionicons" %} - -
-

- Here is how the icon container can be used with Ionicons. -

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Container classContainer sizeIonicon classIcon sizeResult
- icon is-small - - 1rem x 1rem - - ion-ionic - - 1em - - - - -
- icon - - 1.5rem x 1.5rem - - ion-ionic - - 1em - - - - -
- icon is-medium - - 2rem x 2rem - - ion-ionic - - 1em - - - - -
- icon is-large - - 3rem x 3rem - - ion-ionic - - 1em - - - - -
- - {% include variables.html type='element' %} +
+ {% include snippet.html content=icon_example %} +
+
+
+ The yellow background is only here for demonstration purposes, to highlight the icon container's area.
-
+ + + +
+

+ By default, the icon container will take up exactly 1.5rem x 1.5rem. The icon itself is sized accordingly to the icon library you're using. For example, Font Awesome 5 icons will inherit the font size.

+
+ +{% include anchor.html name="Colors" %} + +
+

+ Since icon fonts are simply text, you can use the text color modifiers to change the icon's color. +

+
+ +{% include snippet.html content=icon_color_example %} + +{% include anchor.html name="Sizes" %} + +
+

+ The Bulma icon container comes in 4 sizes. It should always be slightly bigger than the icon it contains. For example, Font Awesome 5 icons use a font-size of 1em by default (since it inherits the font size), but provides additional sizes. +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Container classContainer sizeFont Awesome 5 classIcon sizeResult
+ icon is-small + + 1rem x 1rem + + fas + + 1em + + + + +
+ icon + + 1.5rem x 1.5rem + + fas + + 1em + + + + +
+ fas fa-lg + + 1.33em + + + + +
+ icon is-medium + + 2rem x 2rem + + fas + + 1em + + + + +
+ fas fa-lg + + 1.33em + + + + +
+ fas fa-2x + + 2em + + + + +
+ icon is-large + + 3rem x 3rem + + fas + + 1em + + + + +
+ fas fa-lg + + 1.33em + + + + +
+ fas fa-2x + + 2em + + + + +
+ fas fa-3x + + 3em + + + + +
+ +{% include anchor.html name="Font Awesome variations" %} + +
+

+ Font Awesome also provides modifier classes for: +

+
    +
  • + fixed width icons +
  • +
  • + bordered icons +
  • +
  • + animated icons +
  • +
  • + rotated & flipped icons +
  • +
  • + stacked icons +
  • +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TypeFont Awesome classResult
+ Fixed width + + fas fa-fw + + + + +
+ Bordered + + fas fa-border + + + + +
+ Animated + + fas fa-spinner fa-pulse + + + + +
+ Rotated & flipped + + fas fa-shield-alt
+ fas fa-shield-alt data-fa-transform="rotate-90"
+ fas fa-shield-alt data-fa-transform="rotate-180"
+ fas fa-shield-alt data-fa-transform="rotate-270"
+ fas fa-shield-alt data-fa-transform="flip-h"
+ fas fa-shield-alt data-fa-transform="flip-v" +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ Stacked + + {% highlight html %}{{ stacked_medium }}{% endhighlight %} + + + + + + + +
+ {% highlight html %}{{ stacked_large }}{% endhighlight %} + + + + + + + +
+ +{% include anchor.html name="Material Design Icons" %} + +
+

+ Here is how the icon container can be used with Material Design Icons. +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Container classContainer sizeMDI classIcon sizeResult
+ icon is-small + + 1rem x 1rem + + mdi + + 1em + + + + +
+ icon + + 1.5rem x 1.5rem + + mdi mdi-18px + + 18px + + + + +
+ mdi mdi-24px + + 24px + + + + +
+ icon is-medium + + 2rem x 2rem + + mdi + + 1em + + + + +
+ mdi mdi-18px + + 18px + + + + +
+ mdi mdi-24px + + 24px + + + + +
+ mdi mdi-36px + + 36px + + + + +
+ icon is-large + + 3rem x 3rem + + mdi + + 1em + + + + +
+ mdi mdi-18px + + 18px + + + + +
+ mdi mdi-24px + + 24px + + + + +
+ mdi mdi-36px + + 36px + + + + +
+ mdi mdi-48px + + 48px + + + + +
+ +
+

+ MDI also provides modifier classes for: +

+
    +
  • + light and dark icons +
  • +
  • + rotated & flipped icons +
  • +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TypeMaterial Design Icon classResult
+ Light color + + mdi mdi-light + + + + +
+ Dark color + + mdi mdi-dark + + + + +
+ Light inactive color + + mdi mdi-light mdi-inactive + + + + +
+ Dark inactive color + + mdi mdi-dark mdi-inactive + + + + +
+ Flipped + + mdi mdi-flip-h +
+ mdi mdi-flip-v +
+ + + +
+ + + +
+ Rotated + + mdi mdi-rotate-45 +
+ mdi mdi-rotate-90 +
+ mdi mdi-rotate-180 +
+ + + +
+ + + +
+ + + +
+ +{% include anchor.html name="Open Iconic" %} + +
+

+ Here is how the icon container can be used with Open Iconic. +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Container classContainer sizeIconic classIcon sizeResult
+ icon is-small + + 1rem x 1rem + + oi [data-glyph=puzzle-piece] + + 1em + + + + +
+ icon + + 1.5rem x 1.5rem + + oi [data-glyph=puzzle-piece] + + 1em + + + + +
+ icon is-medium + + 2rem x 2rem + + oi [data-glyph=puzzle-piece] + + 1em + + + + +
+ icon is-large + + 3rem x 3rem + + oi [data-glyph=puzzle-piece] + + 1em + + + + +
+ +{% include anchor.html name="Ionicons" %} + +
+

+ Here is how the icon container can be used with Ionicons. +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Container classContainer sizeIonicon classIcon sizeResult
+ icon is-small + + 1rem x 1rem + + ion-ionic + + 1em + + + + +
+ icon + + 1.5rem x 1.5rem + + ion-ionic + + 1em + + + + +
+ icon is-medium + + 2rem x 2rem + + ion-ionic + + 1em + + + + +
+ icon is-large + + 3rem x 3rem + + ion-ionic + + 1em + + + + +
+ +{% include variables.html type='element' %} diff --git a/docs/documentation/elements/image.html b/docs/documentation/elements/image.html index 1cd6b449..ed742d9a 100644 --- a/docs/documentation/elements/image.html +++ b/docs/documentation/elements/image.html @@ -1,5 +1,6 @@ --- title: Image +subtitle: "A container for responsive images" layout: documentation doc-tab: elements doc-subtab: image @@ -11,6 +12,15 @@ dimensions: - 64 - 96 - 128 +breadcrumb: +- home +- documentation +- elements +- elements-image +meta: + colors: false + sizes: false + variables: true --- {% capture image %} @@ -25,151 +35,131 @@ dimensions: {% endcapture %} -{% include subnav/subnav-elements.html %} +
+

Because images can take a few seconds to load (or not at all), use the .image container to specify a precisely sized container so that your layout isn't broken because of image loading or image errors.

+
-
-
-

Images

-

- A container for responsive images -

- {% - include meta.html - colors=false - sizes=false - variables=true - %} +{% include snippet.html content=image %} -
+{% include anchor.html name="Fixed square images" %} -
-

Because images can take a few seconds to load (or not at all), use the .image container to specify a precisely sized container so that your layout isn't broken because of image loading or image errors.

-
+
+

There are 7 dimensions to choose from, useful for avatars:

+
- {% include snippet.html content=image %} + + + {% for dimension in page.dimensions %} + + + + + + {% endfor %} + +
image is-{{ dimension }}x{{ dimension }}
{{ dimension }}x{{ dimension }}px
- {% include anchor.html name="Fixed square images" %} +{% include anchor.html name="Retina images" %} -
-

There are 7 dimensions to choose from, useful for avatars:

-
+
+

Because the image is fixed in size, you can use an image that is twice as big. So for example, in a 128x128 container, you can use a 256x256 image, but resized to 128x128 pixels.

+
- - - {% for dimension in page.dimensions %} - - - - - - {% endfor %} - -
image is-{{ dimension }}x{{ dimension }}
{{ dimension }}x{{ dimension }}px
+{% include snippet.html content=retina_image %} - {% include anchor.html name="Retina images" %} +{% include anchor.html name="Responsive images with ratios" %} -
-

Because the image is fixed in size, you can use an image that is twice as big. So for example, in a 128x128 container, you can use a 256x256 image, but resized to 128x128 pixels.

-
+
+

If you don't know the exact dimensions but know the ratio instead, you can use one of the 16 ratio modifiers, which include [common aspect ratios in still photography](https://en.wikipedia.org/wiki/Aspect_ratio_(image)#Still_photography):

+
- {% include snippet.html content=retina_image %} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
image is-square
Square (or 1 by 1)
image is-1by1
1 by 1
image is-5by4
5 by 4
image is-4by3
4 by 3
image is-3by2
3 by 2
image is-5by3
5 by 3
image is-16by9
16 by 9
image is-2by1
2 by 1
image is-3by1
3 by 1
image is-4by5
4 by 5
image is-3by4
3 by 4
image is-2by3
2 by 3
image is-3by5
3 by 5
image is-9by16
9 by 16
image is-1by2
1 by 2
image is-1by3
1 by 3
- {% include anchor.html name="Responsive images with ratios" %} +
+

The .image container will take up the whole width while maintaining the perfect ratio.

+
-
-

If you don't know the exact dimensions but know the ratio instead, you can use one of the 16 ratio modifiers, which include [common aspect ratios in still photography](https://en.wikipedia.org/wiki/Aspect_ratio_(image)#Still_photography):

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
image is-square
Square (or 1 by 1)
image is-1by1
1 by 1
image is-5by4
5 by 4
image is-4by3
4 by 3
image is-3by2
3 by 2
image is-5by3
5 by 3
image is-16by9
16 by 9
image is-2by1
2 by 1
image is-3by1
3 by 1
image is-4by5
4 by 5
image is-3by4
3 by 4
image is-2by3
2 by 3
image is-3by5
3 by 5
image is-9by16
9 by 16
image is-1by2
1 by 2
image is-1by3
1 by 3
- -
-

The .image container will take up the whole width while maintaining the perfect ratio.

-
- - {% include variables.html type='element' %} - -
-
+{% include variables.html type='element' %} diff --git a/docs/documentation/elements/notification.html b/docs/documentation/elements/notification.html index 3078b595..4164f233 100644 --- a/docs/documentation/elements/notification.html +++ b/docs/documentation/elements/notification.html @@ -1,8 +1,18 @@ --- title: Notification +subtitle: "Bold notification blocks, to alert your users of something" layout: documentation doc-tab: elements doc-subtab: notification +breadcrumb: +- home +- documentation +- elements +- elements-notification +meta: + colors: true + sizes: false + variables: true --- {% capture notification %} @@ -25,30 +35,10 @@ doc-subtab: notification {% endfor %} {% endcapture %} -{% include subnav/subnav-elements.html %} +{% include snippet.html content=notification %} -
-
-

Notifications

-

- Bold notification blocks, to alert your users of something -

- {% - include meta.html - colors=true - sizes=false - variables=true - %} +{% include anchor.html name="Colors" %} -
+{% include snippet.html content=notification_colors %} - {% include snippet.html content=notification %} - - {% include anchor.html name="Colors" %} - - {% include snippet.html content=notification_colors %} - - {% include variables.html type='element' %} - -
-
+{% include variables.html type='element' %} diff --git a/docs/documentation/elements/progress.html b/docs/documentation/elements/progress.html index 7e48d809..44d7d270 100644 --- a/docs/documentation/elements/progress.html +++ b/docs/documentation/elements/progress.html @@ -1,8 +1,18 @@ --- title: Progress Bar +subtitle: "Native HTML progress bars" layout: documentation doc-tab: elements doc-subtab: progress +breadcrumb: +- home +- documentation +- elements +- elements-progress +meta: + colors: true + sizes: true + variables: true --- {% capture progress %} @@ -25,34 +35,14 @@ doc-subtab: progress 60% {% endcapture %} -{% include subnav/subnav-elements.html %} +{% include snippet.html content=progress %} -
-
-

Progress bars

-

- Native HTML progress bars -

- {% - include meta.html - colors=true - sizes=true - variables=true - %} +{% include anchor.html name="Colors" %} -
+{% include snippet.html content=progress_colors %} - {% include snippet.html content=progress %} +{% include anchor.html name="Sizes" %} - {% include anchor.html name="Colors" %} +{% include snippet.html content=progress_sizes %} - {% include snippet.html content=progress_colors %} - - {% include anchor.html name="Sizes" %} - - {% include snippet.html content=progress_sizes %} - - {% include variables.html type='element' %} - -
-
+{% include variables.html type='element' %} diff --git a/docs/documentation/elements/table.html b/docs/documentation/elements/table.html index 1bfda503..1d801df7 100644 --- a/docs/documentation/elements/table.html +++ b/docs/documentation/elements/table.html @@ -1,8 +1,18 @@ --- title: Table +subtitle: "The inevitable HTML table, with special case cells" layout: documentation doc-tab: elements doc-subtab: table +breadcrumb: +- home +- documentation +- elements +- elements-table +meta: + colors: false + sizes: false + variables: true --- {% capture table_example %} @@ -305,292 +315,274 @@ doc-subtab: table {% endcapture %} -{% include subnav/subnav-elements.html %} - -
-
-

Tables

-

The inevitable HTML table, with special case cells

- {% - include meta.html - colors=false - sizes=false - variables=true - %} - -
- -
-

You simply need to attach a single .table CSS class on a <table> with the following structure:

+
+

You simply need to attach a single .table CSS class on a <table> with the following structure:

+
    +
  • + table the main container
    • - table the main container + thead the optional top part of the table +
    • +
    • + tfoot the optional bottom part of the table +
    • +
    • + tbody the main content of the table
      • - thead the optional top part of the table -
      • -
      • - tfoot the optional bottom part of the table -
      • -
      • - tbody the main content of the table + tr each table row
        • - tr each table row -
            -
          • - th a table cell heading -
          • -
          • - td a table cell -
          • -
          + th a table cell heading +
        • +
        • + td a table cell
    -

    - You can set a table row as selected by appending the is-selected modifier on a <tr> -

    -
+ + +

+ You can set a table row as selected by appending the is-selected modifier on a <tr> +

+
- {% include snippet.html content=table_example horizontal=true more=true %} +{% include snippet.html content=table_example horizontal=true more=true %} - {% include anchor.html name="Modifiers" %} - -
-
-

Add borders to all the cells.

-
-
- table is-bordered -
-
- - - - - - - - - - - - - -
OneTwo
ThreeFour
-
-
- -
-
-

Add stripes to the table.

-
-
- table is-striped -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OneTwo
ThreeFour
FiveSix
SevenEight
NineTen
ElevenTwelve
-
-
- -
-
-

Make the cells narrower.

-
-
- table is-narrow -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OneTwo
ThreeFour
FiveSix
SevenEight
NineTen
ElevenTwelve
-
-
- -
-
-

You can add a hover effect on each row

-
-
- table is-hoverable -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OneTwo
ThreeFour
FiveSix
SevenEight
NineTen
ElevenTwelve
-
-
- -
-
-

You can have a fullwidth table.

-
-
- table is-fullwidth -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OneTwo
ThreeFour
FiveSix
SevenEight
NineTen
ElevenTwelve
-
-
- -
-
-

You can combine all five modifiers.

-
-
- table is-bordered is-striped is-narrow is-hoverable is-fullwidth -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OneTwo
ThreeFour
FiveSix
SevenEight
NineTen
ElevenTwelve
-
-
- - {% include variables.html type='element' %} +{% include anchor.html name="Modifiers" %} +
+
+

Add borders to all the cells.

-
+
+ table is-bordered +
+
+ + + + + + + + + + + + + +
OneTwo
ThreeFour
+
+ + +
+
+

Add stripes to the table.

+
+
+ table is-striped +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OneTwo
ThreeFour
FiveSix
SevenEight
NineTen
ElevenTwelve
+
+
+ +
+
+

Make the cells narrower.

+
+
+ table is-narrow +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OneTwo
ThreeFour
FiveSix
SevenEight
NineTen
ElevenTwelve
+
+
+ +
+
+

You can add a hover effect on each row

+
+
+ table is-hoverable +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OneTwo
ThreeFour
FiveSix
SevenEight
NineTen
ElevenTwelve
+
+
+ +
+
+

You can have a fullwidth table.

+
+
+ table is-fullwidth +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OneTwo
ThreeFour
FiveSix
SevenEight
NineTen
ElevenTwelve
+
+
+ +
+
+

You can combine all five modifiers.

+
+
+ table is-bordered is-striped is-narrow is-hoverable is-fullwidth +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OneTwo
ThreeFour
FiveSix
SevenEight
NineTen
ElevenTwelve
+
+
+ +{% include variables.html type='element' %} diff --git a/docs/documentation/elements/tag.html b/docs/documentation/elements/tag.html index 39582caa..5cc32a98 100644 --- a/docs/documentation/elements/tag.html +++ b/docs/documentation/elements/tag.html @@ -1,8 +1,18 @@ --- title: Tags +subtitle: "Small tag labels to insert anywhere" layout: documentation doc-tab: elements doc-subtab: tag +breadcrumb: +- home +- documentation +- elements +- elements-tag +meta: + colors: true + sizes: true + variables: true --- {% capture tag %} @@ -179,274 +189,257 @@ doc-subtab: tag {% endcapture %} -
-
-

Tags

-

- Small tag labels to insert anywhere -

- {% - include meta.html - colors=true - sizes=true - variables=true - %} - -
- -
-
- By default, a tag is a 1.5rem high label. -
-
- - Tag label - -
-
- {% highlight html %}{{ tag }}{% endhighlight %} -
-
- - {% include anchor.html name="Colors" %} - -
-
- Like with buttons, there are 10 different colors available. -
-
-

- - Black - -

-

- - Dark - -

-

- - Light - -

-

- - White - -

-

- - Primary - -

-

- - Link - -

-

- - Info - -

-

- - Success - -

-

- - Warning - -

- - Danger - -
-
- {% highlight html %}{{ tags_colors }}{% endhighlight %} -
-
- - {% include anchor.html name="Sizes" %} - -
-
- And 2 additional sizes. -
-
-

- - Medium - -

-

- - Large - -

-
-
- {% highlight html %}{{ sizes }}{% endhighlight %} -
-
- - {% include anchor.html name="Modifiers" %} - -
-
- You can add the is-rounded modifier to make a rounded tag. -
-
- {{ rounded }} -
-
- {% highlight html %}{{ rounded }}{% endhighlight %} -
-
- -
-
- You can add the is-delete modifier to turn the tag into a delete button. -
-
- {{ is_delete }} -
-
- {% highlight html %}{{ is_delete }}{% endhighlight %} -
-
- - {% include anchor.html name="Combinations" %} - -
-
- You can append a delete button. -
-
-

- - Bar - - -

-

- - Hello - - -

-

- - World - - -

-
-
- {% highlight html %}{{ delete }}{% endhighlight %} -
-
- - {% include anchor.html name="List of tags" %} - -
-
-
-

- You can now create a list of tags with the .tags container. -

-
-
- {{ tags }} -
-
-
- {% highlight html %}{{ tags }}{% endhighlight %} -
-
- -
-
-
-

- If the list is very long, it will automatically wrap on multiple lines, while keeping all tags evenly spaced. -

-
-
- {{ tags_multiple }} -
-
-
- {% highlight html %}{{ tags_multiple }}{% endhighlight %} -
-
- -
-
-
-

- You can attach tags together with the .has-addons modifier. -

-
-
- {{ tags_addons }} -
-
-
- {% highlight html %}{{ tags_addons }}{% endhighlight %} -
-
- -
-
-
-

- You can attach a text tag with a delete tag together. -

-
-
- {{ tags_delete_addons }} -
-
-
- {% highlight html %}{{ tags_delete_addons }}{% endhighlight %} -
-
- -
-
-
-

- If you want to attach .tags containers together, simply use the .field element with the .is-grouped and .is-grouped-multiline modifiers. -

-
-
- {{ tags_field_addons }} -
-
-
- {% highlight html %}{{ tags_field_addons }}{% endhighlight %} -
-
- -
-
-
-

- This can be useful for a long list of blog tags. -

-
-
- {{ tags_blog_addons }} -
-
-
- {% highlight html %}{{ tags_blog_addons }}{% endhighlight %} -
-
- - {% include variables.html type='element' %} +
+
+ By default, a tag is a 1.5rem high label.
-
+
+ + Tag label + +
+
+ {% highlight html %}{{ tag }}{% endhighlight %} +
+ + +{% include anchor.html name="Colors" %} + +
+
+ Like with buttons, there are 10 different colors available. +
+
+

+ + Black + +

+

+ + Dark + +

+

+ + Light + +

+

+ + White + +

+

+ + Primary + +

+

+ + Link + +

+

+ + Info + +

+

+ + Success + +

+

+ + Warning + +

+ + Danger + +
+
+ {% highlight html %}{{ tags_colors }}{% endhighlight %} +
+
+ +{% include anchor.html name="Sizes" %} + +
+
+ And 2 additional sizes. +
+
+

+ + Medium + +

+

+ + Large + +

+
+
+ {% highlight html %}{{ sizes }}{% endhighlight %} +
+
+ +{% include anchor.html name="Modifiers" %} + +
+
+ You can add the is-rounded modifier to make a rounded tag. +
+
+ {{ rounded }} +
+
+ {% highlight html %}{{ rounded }}{% endhighlight %} +
+
+ +
+
+ You can add the is-delete modifier to turn the tag into a delete button. +
+
+ {{ is_delete }} +
+
+ {% highlight html %}{{ is_delete }}{% endhighlight %} +
+
+ +{% include anchor.html name="Combinations" %} + +
+
+ You can append a delete button. +
+
+

+ + Bar + + +

+

+ + Hello + + +

+

+ + World + + +

+
+
+ {% highlight html %}{{ delete }}{% endhighlight %} +
+
+ +{% include anchor.html name="List of tags" %} + +
+
+
+

+ You can now create a list of tags with the .tags container. +

+
+
+ {{ tags }} +
+
+
+ {% highlight html %}{{ tags }}{% endhighlight %} +
+
+ +
+
+
+

+ If the list is very long, it will automatically wrap on multiple lines, while keeping all tags evenly spaced. +

+
+
+ {{ tags_multiple }} +
+
+
+ {% highlight html %}{{ tags_multiple }}{% endhighlight %} +
+
+ +
+
+
+

+ You can attach tags together with the .has-addons modifier. +

+
+
+ {{ tags_addons }} +
+
+
+ {% highlight html %}{{ tags_addons }}{% endhighlight %} +
+
+ +
+
+
+

+ You can attach a text tag with a delete tag together. +

+
+
+ {{ tags_delete_addons }} +
+
+
+ {% highlight html %}{{ tags_delete_addons }}{% endhighlight %} +
+
+ +
+
+
+

+ If you want to attach .tags containers together, simply use the .field element with the .is-grouped and .is-grouped-multiline modifiers. +

+
+
+ {{ tags_field_addons }} +
+
+
+ {% highlight html %}{{ tags_field_addons }}{% endhighlight %} +
+
+ +
+
+
+

+ This can be useful for a long list of blog tags. +

+
+
+ {{ tags_blog_addons }} +
+
+
+ {% highlight html %}{{ tags_blog_addons }}{% endhighlight %} +
+
+ +{% include variables.html type='element' %} diff --git a/docs/documentation/elements/title.html b/docs/documentation/elements/title.html index d7178f29..27614db7 100644 --- a/docs/documentation/elements/title.html +++ b/docs/documentation/elements/title.html @@ -1,8 +1,18 @@ --- title: Title and Subtitle +subtitle: "Simple headings to add depth to your page" layout: documentation doc-tab: elements doc-subtab: title +breadcrumb: +- home +- documentation +- elements +- elements-title +meta: + colors: false + sizes: true + variables: true --- {% capture default %} @@ -50,139 +60,119 @@ doc-subtab: title

Subtitle 5

{% endcapture %} -{% include subnav/subnav-elements.html %} - -
-
-

Titles

-

- Simple headings to add depth to your page -

- {% - include meta.html - colors=false - sizes=true - variables=true - %} - -
- -
-
-
-

There are 2 types of heading:

-
    -
  • - .title -
  • -
  • - .subtitle -
  • -
-
-
-
-

Title

-

Subtitle

-
-
- {% highlight html %}{{ default }}{% endhighlight %} -
+
+
+
+

There are 2 types of heading:

+
    +
  • + .title +
  • +
  • + .subtitle +
  • +
- - {% include anchor.html name="Sizes" %} - -
-
-

There are 6 sizes available:

-
-
-

Title 1

-

Title 2

-

Title 3 (default size)

-

Title 4

-

Title 5

-

Title 6

-
-
- {% highlight html %}{{ title_sizes }}{% endhighlight %} -
-
- -
-
-
-

Subtitle 1

-

Subtitle 2

-

Subtitle 3

-

Subtitle 4

-

Subtitle 5 (default size)

-

Subtitle 6

-
-
- {% highlight html %}{{ subtitle_sizes }}{% endhighlight %} -
-
- -
- -
-
-
-

When you combine a title and a subtitle, they move closer together.

-

As a rule of thumb, it is recommended to use a size difference of two. So if you use a title is-1, combine it with a subtitle is-3.

-
-
-
-
-

Title 1

-

Subtitle 3

-
-
-

Title 2

-

Subtitle 4

-
-
-

Title 3

-

Subtitle 5

-
-
-
- {% highlight html %}{{ combine }}{% endhighlight %} -
-
- -
- -
-
-
-

- New! -

-

You can maintain the normal spacing between titles and subtitles if you use the is-spaced modifier on the first element.

-
-
-
-
-

Title 1

-

Subtitle 3

-
-
-

Title 2

-

Subtitle 4

-
-
-

Title 3

-

Subtitle 5

-
-
-
- {% highlight html %}{{ spaced }}{% endhighlight %} -
-
- - {% include variables.html type='element' %} -
-
+
+

Title

+

Subtitle

+
+
+ {% highlight html %}{{ default }}{% endhighlight %} +
+ + +{% include anchor.html name="Sizes" %} + +
+
+

There are 6 sizes available:

+
+
+

Title 1

+

Title 2

+

Title 3 (default size)

+

Title 4

+

Title 5

+

Title 6

+
+
+ {% highlight html %}{{ title_sizes }}{% endhighlight %} +
+
+ +
+
+
+

Subtitle 1

+

Subtitle 2

+

Subtitle 3

+

Subtitle 4

+

Subtitle 5 (default size)

+

Subtitle 6

+
+
+ {% highlight html %}{{ subtitle_sizes }}{% endhighlight %} +
+
+ +
+ +
+
+
+

When you combine a title and a subtitle, they move closer together.

+

As a rule of thumb, it is recommended to use a size difference of two. So if you use a title is-1, combine it with a subtitle is-3.

+
+
+
+
+

Title 1

+

Subtitle 3

+
+
+

Title 2

+

Subtitle 4

+
+
+

Title 3

+

Subtitle 5

+
+
+
+ {% highlight html %}{{ combine }}{% endhighlight %} +
+
+ +
+ +
+
+
+

+ New! +

+

You can maintain the normal spacing between titles and subtitles if you use the is-spaced modifier on the first element.

+
+
+
+
+

Title 1

+

Subtitle 3

+
+
+

Title 2

+

Subtitle 4

+
+
+

Title 3

+

Subtitle 5

+
+
+
+ {% highlight html %}{{ spaced }}{% endhighlight %} +
+
+ +{% include variables.html type='element' %} diff --git a/sass/elements/table.sass b/sass/elements/table.sass index 00133748..d0e94e56 100644 --- a/sass/elements/table.sass +++ b/sass/elements/table.sass @@ -20,9 +20,9 @@ $table-striped-row-even-background-color: $white-bis !default $table-striped-row-even-hover-background-color: $white-ter !default .table + +block background-color: $table-background-color color: $table-color - margin-bottom: 1.5rem td, th border: $table-cell-border @@ -114,4 +114,4 @@ $table-striped-row-even-hover-background-color: $white-ter !default +overflow-touch overflow: auto overflow-y: hidden - max-width: 100% \ No newline at end of file + max-width: 100% From 25d0ea113652e68b7d051e54763f000a9127227a Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Mon, 9 Apr 2018 16:15:58 +0100 Subject: [PATCH 06/56] Container broken layout --- docs/_data/links.json | 33 ++ docs/_includes/carbon.html | 2 +- docs/_includes/layout/main-close.html | 11 + docs/_includes/layout/main-open.html | 6 + docs/_layouts/documentation.html | 7 +- docs/_sass/global.sass | 47 +- docs/_sass/main.sass | 2 +- docs/bulma-docs.sass | 2 + docs/css/bulma-docs.css | 45 +- docs/documentation/form.html | 9 + docs/documentation/form/checkbox.html | 101 ++-- docs/documentation/form/file.html | 443 +++++++++--------- docs/documentation/form/general.html | 478 ++++++++++--------- docs/documentation/form/input.html | 556 +++++++++++------------ docs/documentation/form/radio.html | 119 +++-- docs/documentation/form/select.html | 390 ++++++++-------- docs/documentation/form/textarea.html | 148 +++--- docs/documentation/layout/container.html | 107 +++-- 18 files changed, 1262 insertions(+), 1244 deletions(-) create mode 100644 docs/_includes/layout/main-close.html create mode 100644 docs/_includes/layout/main-open.html create mode 100644 docs/documentation/form.html diff --git a/docs/_data/links.json b/docs/_data/links.json index 19b160e4..4d45689d 100644 --- a/docs/_data/links.json +++ b/docs/_data/links.json @@ -36,6 +36,38 @@ "name": "Sizes", "path": "/documentation/columns/sizes" }, + "form": { + "name": "Form", + "path": "/documentation/form" + }, + "form-general": { + "name": "General", + "path": "/documentation/form/general" + }, + "form-input": { + "name": "Input", + "path": "/documentation/form/input" + }, + "form-textarea": { + "name": "Textarea", + "path": "/documentation/form/textarea" + }, + "form-select": { + "name": "Select", + "path": "/documentation/form/select" + }, + "form-checkbox": { + "name": "Checkbox", + "path": "/documentation/form/checkbox" + }, + "form-radio": { + "name": "Radio", + "path": "/documentation/form/radio" + }, + "form-file": { + "name": "File", + "path": "/documentation/form/file" + }, "elements": { "name": "Elements", "path": "/documentation/elements" @@ -131,6 +163,7 @@ }, "order": { "columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"], + "form": ["form-general", "form-input", "form-textarea", "form-select", "form-checkbox", "form-radio", "form-file"], "elements": ["elements-box", "elements-button", "elements-content", "elements-delete", "elements-icon", "elements-image", "elements-notification", "elements-progress", "elements-table", "elements-tag", "elements-title"], "components": ["components-breadcrumb", "components-card", "components-dropdown", "components-menu", "components-message", "components-modal", "components-navbar", "components-pagination", "components-panel", "components-tabs"] } diff --git a/docs/_includes/carbon.html b/docs/_includes/carbon.html index 59c9af7b..feaf514b 100644 --- a/docs/_includes/carbon.html +++ b/docs/_includes/carbon.html @@ -1,5 +1,5 @@
-
+
{% endhighlight %} -
-
- - {% include anchor.html name="Code requirements" %} - -
-

- For Bulma to work correctly, you need to make your webpage responsive. -

-
- -
-
-

1

-
-
-

- Use the HTML5 doctype -

- {% highlight html %}{% endhighlight %} -
-
- -
-
-

2

-
-
-

- Add the responsive viewport meta tag -

- {% highlight html %}{% endhighlight %} -
-
- - {% include anchor.html name="Starter template" %} - -
-

- If you want to get started right away, you can use this HTML starter template. Just copy/paste this code in a file and save it on your computer. -

-
- -
- {% highlight html %}{% include getting-started.html %}{% endhighlight %} -
- - {% include anchor.html name="bulma-start" %} - -
-

- bulma-start is a tiny npm package that includes the npm dependencies you need to build your own website with Bulma. -

-

- Check it out -

-
+
+

+ There are several ways to get started with Bulma. You can either: +

+
    +
  1. + use npm to install the Bulma package +
  2. +
  3. + use the cdnjs CDN to link to the Bulma stylesheet +
  4. +
  5. + use the GitHub repository to get the latest development version +
  6. +
+
+
+
+

1

-
+
+

+ Use NPM (recommended): +

+ {% highlight bash %}npm install bulma{% endhighlight %} +
+ + +
+
+

2

+
+
+

+ Use the cdnjs CDN +
+ https://cdnjs.com/libraries/bulma +

+
+
+ +
+
+

3

+
+
+

+ Download from the repository +
+ https://github.com/jgthms/bulma/tree/master/css +

+
+
+ +
+ +
+
+ Font Awesome icons +
+
+

If you want to use icons with Bulma, don't forget to include Font Awesome 5:

+ {% highlight html %}{% endhighlight %} +
+
+ +{% include anchor.html name="Code requirements" %} + +
+

+ For Bulma to work correctly, you need to make your webpage responsive. +

+
+ +
+
+

1

+
+
+

+ Use the HTML5 doctype +

+ {% highlight html %}{% endhighlight %} +
+
+ +
+
+

2

+
+
+

+ Add the responsive viewport meta tag +

+ {% highlight html %}{% endhighlight %} +
+
+ +{% include anchor.html name="Starter template" %} + +
+

+ If you want to get started right away, you can use this HTML starter template. Just copy/paste this code in a file and save it on your computer. +

+
+ +
+ {% highlight html %}{% include getting-started.html %}{% endhighlight %} +
+ +{% include anchor.html name="bulma-start" %} + +
+

+ bulma-start is a tiny npm package that includes the npm dependencies you need to build your own website with Bulma. +

+

+ Check it out +

+
diff --git a/docs/documentation/overview/variables.html b/docs/documentation/overview/variables.html index 618015a2..099db28d 100644 --- a/docs/documentation/overview/variables.html +++ b/docs/documentation/overview/variables.html @@ -1,121 +1,115 @@ --- title: Variables +subtitle: "Easily customize Bulma to match your design" layout: documentation doc-tab: overview doc-subtab: variables +breadcrumb: +- home +- documentation +- overview +- overview-variables --- -{% include subnav/subnav-overview.html %} +{% assign initial_variables = site.data.variables.utilities.initial-variables %} +{% assign initial_vars = initial_variables.vars %} +{% assign derived_variables = site.data.variables.utilities.derived-variables %} +{% assign derived_vars = derived_variables.vars %} -
-
-

Variables

-

Easily customize Bulma to match your design

- -
- - {% assign initial_variables = site.data.variables.utilities.initial-variables %} - {% assign initial_vars = initial_variables.vars %} - {% assign derived_variables = site.data.variables.utilities.derived-variables %} - {% assign derived_vars = derived_variables.vars %} - -
-

Bulma has two variable files divided into 4 sections:

-
    +
    +

    Bulma has two variable files divided into 4 sections:

    +
      +
    1. + Initial variables: where you define variables by literal value, like: +
        +
      • colors: {{ initial_vars.blue.name }}: {{ initial_vars.blue.value }}
      • +
      • font sizes: {{ initial_vars.size-1.name }}: {{ initial_vars.size-1.value }}
      • +
      • dimensions: {{ initial_vars.gap.name }}: {{ initial_vars.gap.value }}
      • +
      • other values: {{ initial_vars.easing.name }}: {{ initial_vars.easing.value }} or {{ initial_vars.radius-large.name }}: {{ initial_vars.radius-large.value }}
      • +
      +
    2. +
    3. + Derived variables where variables are calculated from the values set in the previous file. For example, you can have: +
      • - Initial variables: where you define variables by literal value, like: + Primary colors derived from the initial variables:
          -
        • colors: {{ initial_vars.blue.name }}: {{ initial_vars.blue.value }}
        • -
        • font sizes: {{ initial_vars.size-1.name }}: {{ initial_vars.size-1.value }}
        • -
        • dimensions: {{ initial_vars.gap.name }}: {{ initial_vars.gap.value }}
        • -
        • other values: {{ initial_vars.easing.name }}: {{ initial_vars.easing.value }} or {{ initial_vars.radius-large.name }}: {{ initial_vars.radius-large.value }}
        • +
        • {{ derived_vars.primary.name }}: {{ derived_vars.primary.value }}
        • +
        • {{ derived_vars.link.name }}: {{ derived_vars.link.value }}
        • +
        • {{ derived_vars.info.name }}: {{ derived_vars.info.value }}
        • +
        • {{ derived_vars.success.name }}: {{ derived_vars.success.value }}
        • +
        • {{ derived_vars.warning.name }}: {{ derived_vars.warning.value }}
        • +
        • {{ derived_vars.danger.name }}: {{ derived_vars.danger.value }}
        • +
        • {{ derived_vars.dark.name }}: {{ derived_vars.dark.value }}
        • +
        • {{ derived_vars.text.name }}: {{ derived_vars.text.value }}
      • +
      • {{ derived_vars.background.name }}: {{ derived_vars.background.value }}: a general background color
      • +
      • {{ derived_vars.link.name }}: {{ derived_vars.link.value }}: the links use the primary color
      • +
      • {{ derived_vars.family-primary.name }}: {{ derived_vars.family-primary.value }}: the primary font family is the sans-serif one
      • - Derived variables where variables are calculated from the values set in the previous file. For example, you can have: + Lists and maps which are collections of already defined variables:
          -
        • - Primary colors derived from the initial variables: -
            -
          • {{ derived_vars.primary.name }}: {{ derived_vars.primary.value }}
          • -
          • {{ derived_vars.link.name }}: {{ derived_vars.link.value }}
          • -
          • {{ derived_vars.info.name }}: {{ derived_vars.info.value }}
          • -
          • {{ derived_vars.success.name }}: {{ derived_vars.success.value }}
          • -
          • {{ derived_vars.warning.name }}: {{ derived_vars.warning.value }}
          • -
          • {{ derived_vars.danger.name }}: {{ derived_vars.danger.value }}
          • -
          • {{ derived_vars.dark.name }}: {{ derived_vars.dark.value }}
          • -
          • {{ derived_vars.text.name }}: {{ derived_vars.text.value }}
          • -
          -
        • -
        • {{ derived_vars.background.name }}: {{ derived_vars.background.value }}: a general background color
        • -
        • {{ derived_vars.link.name }}: {{ derived_vars.link.value }}: the links use the primary color
        • -
        • {{ derived_vars.family-primary.name }}: {{ derived_vars.family-primary.value }}: the primary font family is the sans-serif one
        • -
        • - Lists and maps which are collections of already defined variables: -
            -
          • {{ derived_vars.colors.name }}: {{ derived_vars.colors.value }}
          • -
          • {{ derived_vars.shades.name }}: {{ derived_vars.shades.value }}
          • -
          • {{ derived_vars.sizes.name }}: {{ derived_vars.sizes.value }}
          • -
          -
        • +
        • {{ derived_vars.colors.name }}: {{ derived_vars.colors.value }}
        • +
        • {{ derived_vars.shades.name }}: {{ derived_vars.shades.value }}
        • +
        • {{ derived_vars.sizes.name }}: {{ derived_vars.sizes.value }}
      • -
    -

    - To override any of these variables, just set them before importing Bulma. -

    -
    + + +
+

+ To override any of these variables, just set them before importing Bulma. +

+
- {% include anchor.html name="Initial variables" %} +{% include anchor.html name="Initial variables" %} -
-

- These are variables with a literal value. -

-
+
+

+ These are variables with a literal value. +

+
- - - {% for variable_hash in initial_vars %} - {% assign variable = variable_hash[1] %} - {% assign starts_with = variable.value | slice: 0, 3 %} - - - - - {% endfor %} - -
- {{ variable.name }} - - {% if starts_with == 'hsl' %} - - {% endif %} - {{ variable.value }} -
+ + + {% for variable_hash in initial_vars %} + {% assign variable = variable_hash[1] %} + {% assign starts_with = variable.value | slice: 0, 3 %} + + + + + {% endfor %} + +
+ {{ variable.name }} + + {% if starts_with == 'hsl' %} + + {% endif %} + {{ variable.value }} +
- {% capture custom_message %} - These are variables with a value that references another variable. - {% endcapture %} - {% - include variables.html - anchor_name = 'Derived variables' - data = derived_variables - custom_message = custom_message - table_class = 'is-bordered is-striped' - %} +{% capture custom_message %} + These are variables with a value that references another variable. +{% endcapture %} +{% + include variables.html + anchor_name = 'Derived variables' + data = derived_variables + custom_message = custom_message + table_class = 'is-bordered is-striped' +%} - {% capture custom_message %} - You can use the following generic variables for general customization. Simply set one or multiple of these variables before importing Bulma. Learn how. - {% endcapture %} - {% - include variables.html - anchor_name = 'Generic variables' - tab = 'base' - subtab = 'generic' - custom_message = custom_message - table_class = 'is-bordered is-striped' - %} - -
-
+{% capture custom_message %} + You can use the following generic variables for general customization. Simply set one or multiple of these variables before importing Bulma. Learn how. +{% endcapture %} +{% + include variables.html + anchor_name = 'Generic variables' + tab = 'base' + subtab = 'generic' + custom_message = custom_message + table_class = 'is-bordered is-striped' +%} From 5ffedabb070a16df14032960035a349a3ab327b8 Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Mon, 9 Apr 2018 17:59:04 +0100 Subject: [PATCH 11/56] Add docs menu --- docs/_data/links.json | 2 +- docs/_layouts/documentation.html | 36 +++++++++++++++++++-- docs/_sass/main.sass | 40 ++++++++++++++++++++++- docs/css/bulma-docs.css | 54 ++++++++++++++++++++++++++++++-- 4 files changed, 125 insertions(+), 7 deletions(-) diff --git a/docs/_data/links.json b/docs/_data/links.json index 16512a1d..3469a7bd 100644 --- a/docs/_data/links.json +++ b/docs/_data/links.json @@ -249,7 +249,7 @@ "path": "/documentation/components/tabs" } }, - "order": { + "categories": { "overview": ["overview-start", "overview-classes", "overview-modular", "overview-responsiveness", "overview-variables", "overview-colors", "overview-functions", "overview-mixins"], "columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"], "modifiers": ["modifiers-syntax", "modifiers-helpers", "modifiers-responsive-helpers", "modifiers-color-helpers", "modifiers-typography-helpers"], diff --git a/docs/_layouts/documentation.html b/docs/_layouts/documentation.html index 07626370..68434cc9 100644 --- a/docs/_layouts/documentation.html +++ b/docs/_layouts/documentation.html @@ -5,8 +5,9 @@ route: documentation {% include navbar.html id="Documentation" %} +{% assign current_category = page.doc-tab %} {% assign current_link_id = page.breadcrumb | last %} -{% assign category_links = site.data.links.order[page.doc-tab] %} +{% assign category_links = site.data.links.categories[current_category] %} {% for link_id in category_links %} {% if link_id == current_link_id %} @@ -98,9 +99,38 @@ route: documentation diff --git a/docs/_sass/main.sass b/docs/_sass/main.sass index 06dcb8e1..7da720cc 100644 --- a/docs/_sass/main.sass +++ b/docs/_sass/main.sass @@ -66,6 +66,44 @@ $main-spacing: 2.5rem right: 0 top: 0 +.bd-category + a + &:hover + color: $link + &:not(:last-child) + margin-bottom: 0.5rem + +.bd-category-header + position: relative + +.bd-category-toggle + +overlay + align-items: center + color: $grey-light + display: flex + justify-content: flex-end + .icon + font-size: 0.75rem + +.bd-category-name + color: $text-strong + position: relative + +.bd-category-list + display: none + font-size: 0.875rem + padding: 0.5rem + li + &:not(:last-child) + margin-bottom: 0.5em + &.is-current + a + color: $link + a + color: $text-light + &.is-active + display: block + +touch .bd-lead, .bd-side @@ -77,7 +115,7 @@ $main-spacing: 2.5rem .bd-side-background display: none -$sidebar-width: 16rem +$sidebar-width: 14rem +tablet .bd-duo diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index d6c93d40..47bbf03d 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -130,7 +130,7 @@ width: 1em; } -.is-overlay, .image.is-square img, .image.is-1by1 img, .image.is-5by4 img, .image.is-4by3 img, .image.is-3by2 img, .image.is-5by3 img, .image.is-16by9 img, .image.is-2by1 img, .image.is-3by1 img, .image.is-4by5 img, .image.is-3by4 img, .image.is-2by3 img, .image.is-3by5 img, .image.is-9by16 img, .image.is-1by2 img, .image.is-1by3 img, .modal, .modal-background, .hero-video, .intro-spinner, .intro-shadow, .bd-article-overlay, .bd-article-icon, +.is-overlay, .image.is-square img, .image.is-1by1 img, .image.is-5by4 img, .image.is-4by3 img, .image.is-3by2 img, .image.is-5by3 img, .image.is-16by9 img, .image.is-2by1 img, .image.is-3by1 img, .image.is-4by5 img, .image.is-3by4 img, .image.is-2by3 img, .image.is-3by5 img, .image.is-9by16 img, .image.is-1by2 img, .image.is-1by3 img, .modal, .modal-background, .hero-video, .bd-category-toggle, .intro-spinner, .intro-shadow, .bd-article-overlay, .bd-article-icon, .bd-article-info, .bd-structure-item::before, .bd-structure-item::after, .highlight .bd-show, .bd-banner-background, .bd-book-pattern::before, .bd-book-modal-column.bd-is-cover::before, .bd-book-pattern, .bd-book-modal-background { bottom: 0; @@ -9570,6 +9570,56 @@ label.panel-block:hover { top: 0; } +.bd-category a:hover { + color: #3273dc; +} + +.bd-category:not(:last-child) { + margin-bottom: 0.5rem; +} + +.bd-category-header { + position: relative; +} + +.bd-category-toggle { + align-items: center; + color: #b5b5b5; + display: flex; + justify-content: flex-end; +} + +.bd-category-toggle .icon { + font-size: 0.75rem; +} + +.bd-category-name { + color: #363636; + position: relative; +} + +.bd-category-list { + display: none; + font-size: 0.875rem; + padding: 0.5rem; +} + +.bd-category-list li:not(:last-child) { + margin-bottom: 0.5em; +} + +.bd-category-list li.is-current a { + color: #3273dc; +} + +.bd-category-list a { + color: #7a7a7a; +} + +.bd-category-list.is-active { + display: block; +} + @media screen and (max-width: 1023px) { .bd-lead, .bd-side { @@ -9600,7 +9650,7 @@ label.panel-block:hover { display: flex; } .bd-side { - flex: 0 0 calc(16rem + 1.5rem); + flex: 0 0 calc(14rem + 1.5rem); } } From 6b53425544cd15bb848750fb8eac3cd0cf8c71bd Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Mon, 9 Apr 2018 20:19:29 +0100 Subject: [PATCH 12/56] Top-level pages --- docs/_data/global.json | 14 - docs/_data/links.json | 27 +- docs/_includes/components/docs.html | 28 + docs/_includes/components/links.html | 21 + docs/_includes/elements/categories-nav.html | 31 ++ docs/_includes/layout/main-close.html | 8 +- docs/_includes/navbar.html | 4 +- docs/_javascript/main.js | 29 +- docs/_layouts/documentation.html | 56 +- docs/_sass/example.sass | 2 +- docs/_sass/global.sass | 10 +- docs/_sass/highlight.sass | 2 + docs/_sass/main.sass | 29 +- docs/_sass/specific.sass | 76 ++- docs/bulma-docs.sass | 1 + docs/css/bulma-docs.css | 518 +++++++++++------- docs/documentation.html | 3 +- docs/documentation/columns.html | 11 + docs/documentation/components.html | 11 + docs/documentation/elements.html | 11 + docs/documentation/form.html | 4 +- docs/documentation/modifiers.html | 11 + .../modifiers/typography-helpers.html | 3 +- docs/documentation/overview.html | 11 + docs/documentation/overview/classes.html | 1 - docs/documentation/overview/colors.html | 1 - docs/documentation/overview/customize.html | 1 - docs/documentation/overview/functions.html | 1 - docs/documentation/overview/mixins.html | 1 - docs/documentation/overview/modular.html | 6 +- .../overview/responsiveness.html | 3 +- docs/documentation/overview/start.html | 1 - docs/documentation/overview/variables.html | 1 - docs/lib/main.js | 29 +- sass/utilities/initial-variables.sass | 6 +- 35 files changed, 692 insertions(+), 280 deletions(-) create mode 100644 docs/_includes/components/docs.html create mode 100644 docs/_includes/components/links.html create mode 100644 docs/_includes/elements/categories-nav.html create mode 100644 docs/documentation/columns.html create mode 100644 docs/documentation/components.html create mode 100644 docs/documentation/elements.html create mode 100644 docs/documentation/modifiers.html create mode 100644 docs/documentation/overview.html diff --git a/docs/_data/global.json b/docs/_data/global.json index bcc1dc61..307a1029 100644 --- a/docs/_data/global.json +++ b/docs/_data/global.json @@ -1,19 +1,5 @@ { "navbar_items": [ - { - "id": "templates", - "color": "has-text-info", - "fa_type": "fas", - "fa_icon": "fa-code", - "title": "Templates" - }, - { - "id": "videos", - "color": "has-text-success", - "fa_type": "fas", - "fa_icon": "fa-play-circle", - "title": "Videos" - }, { "id": "blog", "color": "bd-has-text-rss", diff --git a/docs/_data/links.json b/docs/_data/links.json index 3469a7bd..c1a7c85c 100644 --- a/docs/_data/links.json +++ b/docs/_data/links.json @@ -6,46 +6,62 @@ }, "documentation": { "name": "Documentation", + "subtitle": "Everything you need to create a website with Bulma", "path": "/documentation" }, "overview": { "name": "Overview", + "subtitle": "An overview of what Bulma as a framework is all about", "path": "/documentation/overview" }, "overview-start": { - "name": "Start", + "name": "Getting started", + "subtitle": "You only need 1 CSS file to use Bulma", "path": "/documentation/overview/start" }, + "overview-customize": { + "name": "Customize", + "subtitle": "Create your own theme with a simple set of variables", + "path": "/documentation/overview/customize" + }, "overview-classes": { - "name": "Classes", + "name": "CSS Classes", + "subtitle": "Bulma is simply a collection of CSS classes. Write the HTML code you want.", "path": "/documentation/overview/classes" }, "overview-modular": { - "name": "Modular", + "name": "Modularity", + "subtitle": "Just import what you need", "path": "/documentation/overview/modular" }, "overview-responsiveness": { "name": "Responsiveness", + "subtitle": "Bulma is a mobile-first framework", "path": "/documentation/overview/responsiveness" }, "overview-variables": { "name": "Variables", + "subtitle": "Easily customize Bulma to match your design", "path": "/documentation/overview/variables" }, "overview-colors": { "name": "Colors", + "subtitle": "The colors that style most Bulma elements and components", "path": "/documentation/overview/colors" }, "overview-functions": { "name": "Functions", + "subtitle": "Utility functions to calculate colors and other values", "path": "/documentation/overview/functions" }, "overview-mixins": { "name": "Mixins", + "subtitle": "Utility mixins for custom elements and responsive helpers", "path": "/documentation/overview/mixins" }, "modifiers": { "name": "Modifiers", + "subtitle": "An easy-to-read naming system designed for humans", "path": "/documentation/modifiers" }, "modifiers-syntax": { @@ -70,6 +86,7 @@ }, "columns": { "name": "Columns", + "subtitle": "The power of Flexbox in a simple interface", "path": "/documentation/columns" }, "columns-basics": { @@ -98,6 +115,7 @@ }, "layout": { "name": "Layout", + "subtitle": "Design the structure of your webpage with these CSS classes", "path": "/documentation/layout" }, "layout-level": { @@ -251,8 +269,9 @@ }, "categories": { "overview": ["overview-start", "overview-classes", "overview-modular", "overview-responsiveness", "overview-variables", "overview-colors", "overview-functions", "overview-mixins"], - "columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"], "modifiers": ["modifiers-syntax", "modifiers-helpers", "modifiers-responsive-helpers", "modifiers-color-helpers", "modifiers-typography-helpers"], + "columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"], + "layout": ["layout-level", "layout-media", "layout-hero", "layout-section", "layout-footer", "layout-tiles"], "form": ["form-general", "form-input", "form-textarea", "form-select", "form-checkbox", "form-radio", "form-file"], "elements": ["elements-box", "elements-button", "elements-content", "elements-delete", "elements-icon", "elements-image", "elements-notification", "elements-progress", "elements-table", "elements-tag", "elements-title"], "components": ["components-breadcrumb", "components-card", "components-dropdown", "components-menu", "components-message", "components-modal", "components-navbar", "components-pagination", "components-panel", "components-tabs"] diff --git a/docs/_includes/components/docs.html b/docs/_includes/components/docs.html new file mode 100644 index 00000000..0238c6f9 --- /dev/null +++ b/docs/_includes/components/docs.html @@ -0,0 +1,28 @@ + diff --git a/docs/_includes/components/links.html b/docs/_includes/components/links.html new file mode 100644 index 00000000..0bb3ddbd --- /dev/null +++ b/docs/_includes/components/links.html @@ -0,0 +1,21 @@ + diff --git a/docs/_includes/elements/categories-nav.html b/docs/_includes/elements/categories-nav.html new file mode 100644 index 00000000..8011ebe0 --- /dev/null +++ b/docs/_includes/elements/categories-nav.html @@ -0,0 +1,31 @@ + diff --git a/docs/_includes/layout/main-close.html b/docs/_includes/layout/main-close.html index f2015f68..db38d4c0 100644 --- a/docs/_includes/layout/main-close.html +++ b/docs/_includes/layout/main-close.html @@ -1,8 +1,14 @@ +{% assign current_category = page.doc-tab %} +{% assign current_link_id = page.breadcrumb | last %} +{% assign category_links = site.data.links.categories[current_category] %} + diff --git a/docs/_includes/navbar.html b/docs/_includes/navbar.html index 08909a01..c4493e24 100644 --- a/docs/_includes/navbar.html +++ b/docs/_includes/navbar.html @@ -4,7 +4,7 @@ {{ site.data.meta.title }} - + + + {% include elements/improve-page.html %} diff --git a/docs/_sass/example.sass b/docs/_sass/example.sass index 3936522b..837747a8 100644 --- a/docs/_sass/example.sass +++ b/docs/_sass/example.sass @@ -46,7 +46,7 @@ // Snippet .bd-snippet +block - border: 1px solid $yellow + border: 2px solid $background margin-top: 2rem position: relative &::before diff --git a/docs/_sass/global.sass b/docs/_sass/global.sass index 8e3250aa..762c9dd5 100644 --- a/docs/_sass/global.sass +++ b/docs/_sass/global.sass @@ -40,8 +40,12 @@ $carbon-poweredby-height: 20px min-height: $carbon-height position: relative &:hover - .carbon-img - opacity: 0.9 + .carbon-img::after + +overlay + background-color: rgba(#000, 0.05) + content: "" + display: block + right: $carbon-spacing .carbon-img bottom: 0 float: left @@ -70,7 +74,7 @@ $carbon-poweredby-height: 20px color: $link .carbon-poweredby bottom: 0 - color: $text-light + color: $grey-light display: inline font-size: $size-small line-height: $carbon-poweredby-height diff --git a/docs/_sass/highlight.sass b/docs/_sass/highlight.sass index f6827fec..d9576b0d 100644 --- a/docs/_sass/highlight.sass +++ b/docs/_sass/highlight.sass @@ -1,6 +1,8 @@ .highlight background-color: #f5f5f5 color: #586e75 + pre + font-size: 12px .c color: #93a1a1 .err, diff --git a/docs/_sass/main.sass b/docs/_sass/main.sass index 7da720cc..5ffe3be3 100644 --- a/docs/_sass/main.sass +++ b/docs/_sass/main.sass @@ -1,5 +1,3 @@ -$main-spacing: 2.5rem - .bd-main overflow: hidden position: relative @@ -32,6 +30,20 @@ $main-spacing: 2.5rem &:hover background-color: $background +.bd-prev-next-bis + border-top: 2px solid $background + display: flex + justify-content: space-between + margin-top: $main-spacing + a + margin-top: $main-spacing / 2 + +.bd-prev-next-bis-previous + margin-right: auto + +.bd-prev-next-bis-next + margin-left: auto + .bd-header border-bottom: 2px solid $background margin-bottom: $main-spacing @@ -72,6 +84,12 @@ $main-spacing: 2.5rem color: $link &:not(:last-child) margin-bottom: 0.5rem + &.is-active + .bd-category-toggle + .icon + transform: rotate(180deg) + .bd-category-list + display: block .bd-category-header position: relative @@ -84,6 +102,9 @@ $main-spacing: 2.5rem justify-content: flex-end .icon font-size: 0.75rem + transform-origin: center + transition-duration: $speed + transition-property: transform .bd-category-name color: $text-strong @@ -101,8 +122,6 @@ $main-spacing: 2.5rem color: $link a color: $text-light - &.is-active - display: block +touch .bd-lead, @@ -146,7 +165,7 @@ $sidebar-width: 14rem .bd-header-carbon flex-grow: 0 flex-shrink: 0 - margin: -15px 0 -15px 1.5rem + margin: -15px 0 -15px $main-spacing width: $carbon-width .bd-side padding: 3rem 0 3rem 1.5rem diff --git a/docs/_sass/specific.sass b/docs/_sass/specific.sass index c4884131..f557a5f0 100644 --- a/docs/_sass/specific.sass +++ b/docs/_sass/specific.sass @@ -1,6 +1,75 @@ +.bd-links + counter-reset: bd-links + +.bd-link + border-radius: $radius-large + color: $text-light + display: block + font-size: $size-5 + padding: 1rem 3rem 1.5rem + strong + font-weight: $weight-semibold + &:hover + background-color: $white-bis + +.bd-link-name + position: relative + &::before + color: $link + counter-increment: bd-links + content: counter(bd-links) + font-weight: $weight-normal + position: absolute + right: calc(100% + 0.625em) + ++desktop + .bd-links + display: flex + flex-wrap: wrap + .bd-link + width: 50% + +.bd-link-name + color: $text-strong + font-size: $size-4 + font-weight: $weight-semibold + +.bd-docs + display: flex + flex-wrap: wrap + +.bd-doc + margin: 0 3rem 1.5rem 0 + +mobile + min-width: calc(50% - 3rem) + +tablet + min-width: calc(33.3333% - 3rem) + +.bd-doc-title + color: $text-strong + a + color: currentColor + &:hover + color: $link + &:not(:last-child) + margin-bottom: 0.75rem + +.bd-boxes + display: flex + flex-wrap: wrap + justify-content: space-between + +.bd-box + border: 4px solid $background + border-radius: $radius + +.bd-box-header + text-align: center + .bd-typo + text-align: center &:not(:first-child) - margin-top: 3rem + margin-top: $main-spacing .bd-has-text-rss color: $rss @@ -22,10 +91,9 @@ $navbar-items: ("documentation": $primary, "templates": $info, "videos": $succes .bd-navbar-item-expo &:hover - color: #744F09 !important + color: #8F6900 !important .icon - color: #FF7B00 !important - + color: #F4B300 !important .bd-special-shadow background-image: linear-gradient(rgba(#000, 0.1), rgba(#000, 0)) diff --git a/docs/bulma-docs.sass b/docs/bulma-docs.sass index 7b745a6d..3f339667 100644 --- a/docs/bulma-docs.sass +++ b/docs/bulma-docs.sass @@ -13,6 +13,7 @@ $star: #FFD257 $rss: #f26522 $carbon-width: 300px +$main-spacing: 3rem @import "../bulma" @import "./_sass/main" diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 47bbf03d..525f5828 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -130,7 +130,7 @@ width: 1em; } -.is-overlay, .image.is-square img, .image.is-1by1 img, .image.is-5by4 img, .image.is-4by3 img, .image.is-3by2 img, .image.is-5by3 img, .image.is-16by9 img, .image.is-2by1 img, .image.is-3by1 img, .image.is-4by5 img, .image.is-3by4 img, .image.is-2by3 img, .image.is-3by5 img, .image.is-9by16 img, .image.is-1by2 img, .image.is-1by3 img, .modal, .modal-background, .hero-video, .bd-category-toggle, .intro-spinner, .intro-shadow, .bd-article-overlay, .bd-article-icon, +.is-overlay, .image.is-square img, .image.is-1by1 img, .image.is-5by4 img, .image.is-4by3 img, .image.is-3by2 img, .image.is-5by3 img, .image.is-16by9 img, .image.is-2by1 img, .image.is-3by1 img, .image.is-4by5 img, .image.is-3by4 img, .image.is-2by3 img, .image.is-3by5 img, .image.is-9by16 img, .image.is-1by2 img, .image.is-1by3 img, .modal, .modal-background, .hero-video, .bd-category-toggle, #carbonads .carbon-wrap:hover .carbon-img::after, .intro-spinner, .intro-shadow, .bd-article-overlay, .bd-article-icon, .bd-article-info, .bd-structure-item::before, .bd-structure-item::after, .highlight .bd-show, .bd-banner-background, .bd-book-pattern::before, .bd-book-modal-column.bd-is-cover::before, .bd-book-pattern, .bd-book-modal-background { bottom: 0; @@ -150,7 +150,7 @@ -webkit-appearance: none; align-items: center; border: 1px solid transparent; - border-radius: 3px; + border-radius: 4px; box-shadow: none; display: inline-flex; font-size: 1rem; @@ -500,7 +500,7 @@ table th { } } -@media screen and (max-width: 1023px) { +@media screen and (max-width: 1087px) { .is-size-1-touch { font-size: 3rem !important; } @@ -524,7 +524,7 @@ table th { } } -@media screen and (min-width: 1024px) { +@media screen and (min-width: 1088px) { .is-size-1-desktop { font-size: 3rem !important; } @@ -548,7 +548,7 @@ table th { } } -@media screen and (min-width: 1216px) { +@media screen and (min-width: 1280px) { .is-size-1-widescreen { font-size: 3rem !important; } @@ -572,7 +572,7 @@ table th { } } -@media screen and (min-width: 1408px) { +@media screen and (min-width: 1472px) { .is-size-1-fullhd { font-size: 3rem !important; } @@ -624,43 +624,43 @@ table th { } } -@media screen and (min-width: 769px) and (max-width: 1023px) { +@media screen and (min-width: 769px) and (max-width: 1087px) { .has-text-centered-tablet-only { text-align: center !important; } } -@media screen and (max-width: 1023px) { +@media screen and (max-width: 1087px) { .has-text-centered-touch { text-align: center !important; } } -@media screen and (min-width: 1024px) { +@media screen and (min-width: 1088px) { .has-text-centered-desktop { text-align: center !important; } } -@media screen and (min-width: 1024px) and (max-width: 1215px) { +@media screen and (min-width: 1088px) and (max-width: 1279px) { .has-text-centered-desktop-only { text-align: center !important; } } -@media screen and (min-width: 1216px) { +@media screen and (min-width: 1280px) { .has-text-centered-widescreen { text-align: center !important; } } -@media screen and (min-width: 1216px) and (max-width: 1407px) { +@media screen and (min-width: 1280px) and (max-width: 1471px) { .has-text-centered-widescreen-only { text-align: center !important; } } -@media screen and (min-width: 1408px) { +@media screen and (min-width: 1472px) { .has-text-centered-fullhd { text-align: center !important; } @@ -678,43 +678,43 @@ table th { } } -@media screen and (min-width: 769px) and (max-width: 1023px) { +@media screen and (min-width: 769px) and (max-width: 1087px) { .has-text-justified-tablet-only { text-align: justify !important; } } -@media screen and (max-width: 1023px) { +@media screen and (max-width: 1087px) { .has-text-justified-touch { text-align: justify !important; } } -@media screen and (min-width: 1024px) { +@media screen and (min-width: 1088px) { .has-text-justified-desktop { text-align: justify !important; } } -@media screen and (min-width: 1024px) and (max-width: 1215px) { +@media screen and (min-width: 1088px) and (max-width: 1279px) { .has-text-justified-desktop-only { text-align: justify !important; } } -@media screen and (min-width: 1216px) { +@media screen and (min-width: 1280px) { .has-text-justified-widescreen { text-align: justify !important; } } -@media screen and (min-width: 1216px) and (max-width: 1407px) { +@media screen and (min-width: 1280px) and (max-width: 1471px) { .has-text-justified-widescreen-only { text-align: justify !important; } } -@media screen and (min-width: 1408px) { +@media screen and (min-width: 1472px) { .has-text-justified-fullhd { text-align: justify !important; } @@ -732,43 +732,43 @@ table th { } } -@media screen and (min-width: 769px) and (max-width: 1023px) { +@media screen and (min-width: 769px) and (max-width: 1087px) { .has-text-left-tablet-only { text-align: left !important; } } -@media screen and (max-width: 1023px) { +@media screen and (max-width: 1087px) { .has-text-left-touch { text-align: left !important; } } -@media screen and (min-width: 1024px) { +@media screen and (min-width: 1088px) { .has-text-left-desktop { text-align: left !important; } } -@media screen and (min-width: 1024px) and (max-width: 1215px) { +@media screen and (min-width: 1088px) and (max-width: 1279px) { .has-text-left-desktop-only { text-align: left !important; } } -@media screen and (min-width: 1216px) { +@media screen and (min-width: 1280px) { .has-text-left-widescreen { text-align: left !important; } } -@media screen and (min-width: 1216px) and (max-width: 1407px) { +@media screen and (min-width: 1280px) and (max-width: 1471px) { .has-text-left-widescreen-only { text-align: left !important; } } -@media screen and (min-width: 1408px) { +@media screen and (min-width: 1472px) { .has-text-left-fullhd { text-align: left !important; } @@ -786,43 +786,43 @@ table th { } } -@media screen and (min-width: 769px) and (max-width: 1023px) { +@media screen and (min-width: 769px) and (max-width: 1087px) { .has-text-right-tablet-only { text-align: right !important; } } -@media screen and (max-width: 1023px) { +@media screen and (max-width: 1087px) { .has-text-right-touch { text-align: right !important; } } -@media screen and (min-width: 1024px) { +@media screen and (min-width: 1088px) { .has-text-right-desktop { text-align: right !important; } } -@media screen and (min-width: 1024px) and (max-width: 1215px) { +@media screen and (min-width: 1088px) and (max-width: 1279px) { .has-text-right-desktop-only { text-align: right !important; } } -@media screen and (min-width: 1216px) { +@media screen and (min-width: 1280px) { .has-text-right-widescreen { text-align: right !important; } } -@media screen and (min-width: 1216px) and (max-width: 1407px) { +@media screen and (min-width: 1280px) and (max-width: 1471px) { .has-text-right-widescreen-only { text-align: right !important; } } -@media screen and (min-width: 1408px) { +@media screen and (min-width: 1472px) { .has-text-right-fullhd { text-align: right !important; } @@ -1032,43 +1032,43 @@ a.has-text-danger:hover, a.has-text-danger:focus { } } -@media screen and (min-width: 769px) and (max-width: 1023px) { +@media screen and (min-width: 769px) and (max-width: 1087px) { .is-block-tablet-only { display: block !important; } } -@media screen and (max-width: 1023px) { +@media screen and (max-width: 1087px) { .is-block-touch { display: block !important; } } -@media screen and (min-width: 1024px) { +@media screen and (min-width: 1088px) { .is-block-desktop { display: block !important; } } -@media screen and (min-width: 1024px) and (max-width: 1215px) { +@media screen and (min-width: 1088px) and (max-width: 1279px) { .is-block-desktop-only { display: block !important; } } -@media screen and (min-width: 1216px) { +@media screen and (min-width: 1280px) { .is-block-widescreen { display: block !important; } } -@media screen and (min-width: 1216px) and (max-width: 1407px) { +@media screen and (min-width: 1280px) and (max-width: 1471px) { .is-block-widescreen-only { display: block !important; } } -@media screen and (min-width: 1408px) { +@media screen and (min-width: 1472px) { .is-block-fullhd { display: block !important; } @@ -1090,43 +1090,43 @@ a.has-text-danger:hover, a.has-text-danger:focus { } } -@media screen and (min-width: 769px) and (max-width: 1023px) { +@media screen and (min-width: 769px) and (max-width: 1087px) { .is-flex-tablet-only { display: flex !important; } } -@media screen and (max-width: 1023px) { +@media screen and (max-width: 1087px) { .is-flex-touch { display: flex !important; } } -@media screen and (min-width: 1024px) { +@media screen and (min-width: 1088px) { .is-flex-desktop { display: flex !important; } } -@media screen and (min-width: 1024px) and (max-width: 1215px) { +@media screen and (min-width: 1088px) and (max-width: 1279px) { .is-flex-desktop-only { display: flex !important; } } -@media screen and (min-width: 1216px) { +@media screen and (min-width: 1280px) { .is-flex-widescreen { display: flex !important; } } -@media screen and (min-width: 1216px) and (max-width: 1407px) { +@media screen and (min-width: 1280px) and (max-width: 1471px) { .is-flex-widescreen-only { display: flex !important; } } -@media screen and (min-width: 1408px) { +@media screen and (min-width: 1472px) { .is-flex-fullhd { display: flex !important; } @@ -1148,43 +1148,43 @@ a.has-text-danger:hover, a.has-text-danger:focus { } } -@media screen and (min-width: 769px) and (max-width: 1023px) { +@media screen and (min-width: 769px) and (max-width: 1087px) { .is-inline-tablet-only { display: inline !important; } } -@media screen and (max-width: 1023px) { +@media screen and (max-width: 1087px) { .is-inline-touch { display: inline !important; } } -@media screen and (min-width: 1024px) { +@media screen and (min-width: 1088px) { .is-inline-desktop { display: inline !important; } } -@media screen and (min-width: 1024px) and (max-width: 1215px) { +@media screen and (min-width: 1088px) and (max-width: 1279px) { .is-inline-desktop-only { display: inline !important; } } -@media screen and (min-width: 1216px) { +@media screen and (min-width: 1280px) { .is-inline-widescreen { display: inline !important; } } -@media screen and (min-width: 1216px) and (max-width: 1407px) { +@media screen and (min-width: 1280px) and (max-width: 1471px) { .is-inline-widescreen-only { display: inline !important; } } -@media screen and (min-width: 1408px) { +@media screen and (min-width: 1472px) { .is-inline-fullhd { display: inline !important; } @@ -1206,43 +1206,43 @@ a.has-text-danger:hover, a.has-text-danger:focus { } } -@media screen and (min-width: 769px) and (max-width: 1023px) { +@media screen and (min-width: 769px) and (max-width: 1087px) { .is-inline-block-tablet-only { display: inline-block !important; } } -@media screen and (max-width: 1023px) { +@media screen and (max-width: 1087px) { .is-inline-block-touch { display: inline-block !important; } } -@media screen and (min-width: 1024px) { +@media screen and (min-width: 1088px) { .is-inline-block-desktop { display: inline-block !important; } } -@media screen and (min-width: 1024px) and (max-width: 1215px) { +@media screen and (min-width: 1088px) and (max-width: 1279px) { .is-inline-block-desktop-only { display: inline-block !important; } } -@media screen and (min-width: 1216px) { +@media screen and (min-width: 1280px) { .is-inline-block-widescreen { display: inline-block !important; } } -@media screen and (min-width: 1216px) and (max-width: 1407px) { +@media screen and (min-width: 1280px) and (max-width: 1471px) { .is-inline-block-widescreen-only { display: inline-block !important; } } -@media screen and (min-width: 1408px) { +@media screen and (min-width: 1472px) { .is-inline-block-fullhd { display: inline-block !important; } @@ -1264,43 +1264,43 @@ a.has-text-danger:hover, a.has-text-danger:focus { } } -@media screen and (min-width: 769px) and (max-width: 1023px) { +@media screen and (min-width: 769px) and (max-width: 1087px) { .is-inline-flex-tablet-only { display: inline-flex !important; } } -@media screen and (max-width: 1023px) { +@media screen and (max-width: 1087px) { .is-inline-flex-touch { display: inline-flex !important; } } -@media screen and (min-width: 1024px) { +@media screen and (min-width: 1088px) { .is-inline-flex-desktop { display: inline-flex !important; } } -@media screen and (min-width: 1024px) and (max-width: 1215px) { +@media screen and (min-width: 1088px) and (max-width: 1279px) { .is-inline-flex-desktop-only { display: inline-flex !important; } } -@media screen and (min-width: 1216px) { +@media screen and (min-width: 1280px) { .is-inline-flex-widescreen { display: inline-flex !important; } } -@media screen and (min-width: 1216px) and (max-width: 1407px) { +@media screen and (min-width: 1280px) and (max-width: 1471px) { .is-inline-flex-widescreen-only { display: inline-flex !important; } } -@media screen and (min-width: 1408px) { +@media screen and (min-width: 1472px) { .is-inline-flex-fullhd { display: inline-flex !important; } @@ -1322,43 +1322,43 @@ a.has-text-danger:hover, a.has-text-danger:focus { } } -@media screen and (min-width: 769px) and (max-width: 1023px) { +@media screen and (min-width: 769px) and (max-width: 1087px) { .is-hidden-tablet-only { display: none !important; } } -@media screen and (max-width: 1023px) { +@media screen and (max-width: 1087px) { .is-hidden-touch { display: none !important; } } -@media screen and (min-width: 1024px) { +@media screen and (min-width: 1088px) { .is-hidden-desktop { display: none !important; } } -@media screen and (min-width: 1024px) and (max-width: 1215px) { +@media screen and (min-width: 1088px) and (max-width: 1279px) { .is-hidden-desktop-only { display: none !important; } } -@media screen and (min-width: 1216px) { +@media screen and (min-width: 1280px) { .is-hidden-widescreen { display: none !important; } } -@media screen and (min-width: 1216px) and (max-width: 1407px) { +@media screen and (min-width: 1280px) and (max-width: 1471px) { .is-hidden-widescreen-only { display: none !important; } } -@media screen and (min-width: 1408px) { +@media screen and (min-width: 1472px) { .is-hidden-fullhd { display: none !important; } @@ -1380,43 +1380,43 @@ a.has-text-danger:hover, a.has-text-danger:focus { } } -@media screen and (min-width: 769px) and (max-width: 1023px) { +@media screen and (min-width: 769px) and (max-width: 1087px) { .is-invisible-tablet-only { visibility: hidden !important; } } -@media screen and (max-width: 1023px) { +@media screen and (max-width: 1087px) { .is-invisible-touch { visibility: hidden !important; } } -@media screen and (min-width: 1024px) { +@media screen and (min-width: 1088px) { .is-invisible-desktop { visibility: hidden !important; } } -@media screen and (min-width: 1024px) and (max-width: 1215px) { +@media screen and (min-width: 1088px) and (max-width: 1279px) { .is-invisible-desktop-only { visibility: hidden !important; } } -@media screen and (min-width: 1216px) { +@media screen and (min-width: 1280px) { .is-invisible-widescreen { visibility: hidden !important; } } -@media screen and (min-width: 1216px) and (max-width: 1407px) { +@media screen and (min-width: 1280px) and (max-width: 1471px) { .is-invisible-widescreen-only { visibility: hidden !important; } } -@media screen and (min-width: 1408px) { +@media screen and (min-width: 1472px) { .is-invisible-fullhd { visibility: hidden !important; } @@ -1440,7 +1440,7 @@ a.has-text-danger:hover, a.has-text-danger:focus { .box { background-color: white; - border-radius: 5px; + border-radius: 6px; box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1); color: #4a4a4a; display: block; @@ -2594,41 +2594,41 @@ a.box:active { position: relative; } -@media screen and (min-width: 1024px) { +@media screen and (min-width: 1088px) { .container { max-width: 960px; width: 960px; } .container.is-fluid { - margin-left: 32px; - margin-right: 32px; + margin-left: 64px; + margin-right: 64px; max-width: none; width: auto; } } -@media screen and (max-width: 1215px) { +@media screen and (max-width: 1279px) { .container.is-widescreen { max-width: 1152px; width: auto; } } -@media screen and (max-width: 1407px) { +@media screen and (max-width: 1471px) { .container.is-fullhd { max-width: 1344px; width: auto; } } -@media screen and (min-width: 1216px) { +@media screen and (min-width: 1280px) { .container { max-width: 1152px; width: 1152px; } } -@media screen and (min-width: 1408px) { +@media screen and (min-width: 1472px) { .container { max-width: 1344px; width: 1344px; @@ -3624,7 +3624,7 @@ a.box:active { } .file.has-name.is-empty .file-cta { - border-radius: 3px; + border-radius: 4px; } .file.has-name.is-empty .file-name { @@ -3667,11 +3667,11 @@ a.box:active { } .file.is-boxed.has-name .file-cta { - border-radius: 3px 3px 0 0; + border-radius: 4px 4px 0 0; } .file.is-boxed.has-name .file-name { - border-radius: 0 0 3px 3px; + border-radius: 0 0 4px 4px; border-width: 0 1px 1px; } @@ -3693,11 +3693,11 @@ a.box:active { } .file.is-right .file-cta { - border-radius: 0 3px 3px 0; + border-radius: 0 4px 4px 0; } .file.is-right .file-name { - border-radius: 3px 0 0 3px; + border-radius: 4px 0 0 4px; border-width: 1px 0 1px 1px; order: -1; } @@ -3741,7 +3741,7 @@ a.box:active { .file-cta, .file-name { border-color: #dbdbdb; - border-radius: 3px; + border-radius: 4px; font-size: 1em; padding-left: 1em; padding-right: 1em; @@ -4296,7 +4296,7 @@ a.box:active { .notification { background-color: whitesmoke; - border-radius: 3px; + border-radius: 4px; padding: 1.25rem 2.5rem 1.25rem 1.5rem; position: relative; } @@ -4781,7 +4781,7 @@ a.box:active { .tag:not(body) { align-items: center; background-color: whitesmoke; - border-radius: 3px; + border-radius: 4px; color: #4a4a4a; display: inline-flex; font-size: 0.75rem; @@ -5263,7 +5263,7 @@ a.tag:hover { .dropdown-content { background-color: white; - border-radius: 3px; + border-radius: 4px; box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1); padding-bottom: 0.5rem; padding-top: 0.5rem; @@ -5307,7 +5307,7 @@ a.dropdown-item.is-active { } .level code { - border-radius: 3px; + border-radius: 4px; } .level img { @@ -5538,7 +5538,7 @@ a.dropdown-item.is-active { .message { background-color: whitesmoke; - border-radius: 3px; + border-radius: 4px; font-size: 1rem; } @@ -5706,7 +5706,7 @@ a.dropdown-item.is-active { .message-header { align-items: center; background-color: #4a4a4a; - border-radius: 3px 3px 0 0; + border-radius: 4px 4px 0 0; color: #fff; display: flex; justify-content: space-between; @@ -5729,7 +5729,7 @@ a.dropdown-item.is-active { .message-body { border: 1px solid #dbdbdb; - border-radius: 3px; + border-radius: 4px; color: #4a4a4a; padding: 1em 1.25em; } @@ -5807,8 +5807,8 @@ a.dropdown-item.is-active { .modal-card-head { border-bottom: 1px solid #dbdbdb; - border-top-left-radius: 5px; - border-top-right-radius: 5px; + border-top-left-radius: 6px; + border-top-right-radius: 6px; } .modal-card-title { @@ -5820,8 +5820,8 @@ a.dropdown-item.is-active { } .modal-card-foot { - border-bottom-left-radius: 5px; - border-bottom-right-radius: 5px; + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; border-top: 1px solid #dbdbdb; } @@ -5867,7 +5867,7 @@ a.dropdown-item.is-active { border-color: #0a0a0a; } -@media screen and (min-width: 1024px) { +@media screen and (min-width: 1088px) { .navbar.is-white .navbar-start > .navbar-item, .navbar.is-white .navbar-start .navbar-link, .navbar.is-white .navbar-end > .navbar-item, @@ -5920,7 +5920,7 @@ a.dropdown-item.is-active { border-color: white; } -@media screen and (min-width: 1024px) { +@media screen and (min-width: 1088px) { .navbar.is-black .navbar-start > .navbar-item, .navbar.is-black .navbar-start .navbar-link, .navbar.is-black .navbar-end > .navbar-item, @@ -5973,7 +5973,7 @@ a.dropdown-item.is-active { border-color: #363636; } -@media screen and (min-width: 1024px) { +@media screen and (min-width: 1088px) { .navbar.is-light .navbar-start > .navbar-item, .navbar.is-light .navbar-start .navbar-link, .navbar.is-light .navbar-end > .navbar-item, @@ -6026,7 +6026,7 @@ a.dropdown-item.is-active { border-color: whitesmoke; } -@media screen and (min-width: 1024px) { +@media screen and (min-width: 1088px) { .navbar.is-dark .navbar-start > .navbar-item, .navbar.is-dark .navbar-start .navbar-link, .navbar.is-dark .navbar-end > .navbar-item, @@ -6079,7 +6079,7 @@ a.dropdown-item.is-active { border-color: #fff; } -@media screen and (min-width: 1024px) { +@media screen and (min-width: 1088px) { .navbar.is-primary .navbar-start > .navbar-item, .navbar.is-primary .navbar-start .navbar-link, .navbar.is-primary .navbar-end > .navbar-item, @@ -6132,7 +6132,7 @@ a.dropdown-item.is-active { border-color: #fff; } -@media screen and (min-width: 1024px) { +@media screen and (min-width: 1088px) { .navbar.is-link .navbar-start > .navbar-item, .navbar.is-link .navbar-start .navbar-link, .navbar.is-link .navbar-end > .navbar-item, @@ -6185,7 +6185,7 @@ a.dropdown-item.is-active { border-color: #fff; } -@media screen and (min-width: 1024px) { +@media screen and (min-width: 1088px) { .navbar.is-info .navbar-start > .navbar-item, .navbar.is-info .navbar-start .navbar-link, .navbar.is-info .navbar-end > .navbar-item, @@ -6238,7 +6238,7 @@ a.dropdown-item.is-active { border-color: #fff; } -@media screen and (min-width: 1024px) { +@media screen and (min-width: 1088px) { .navbar.is-success .navbar-start > .navbar-item, .navbar.is-success .navbar-start .navbar-link, .navbar.is-success .navbar-end > .navbar-item, @@ -6291,7 +6291,7 @@ a.dropdown-item.is-active { border-color: rgba(0, 0, 0, 0.7); } -@media screen and (min-width: 1024px) { +@media screen and (min-width: 1088px) { .navbar.is-warning .navbar-start > .navbar-item, .navbar.is-warning .navbar-start .navbar-link, .navbar.is-warning .navbar-end > .navbar-item, @@ -6344,7 +6344,7 @@ a.dropdown-item.is-active { border-color: #fff; } -@media screen and (min-width: 1024px) { +@media screen and (min-width: 1088px) { .navbar.is-danger .navbar-start > .navbar-item, .navbar.is-danger .navbar-start .navbar-link, .navbar.is-danger .navbar-end > .navbar-item, @@ -6496,7 +6496,7 @@ body.has-navbar-fixed-bottom { a.navbar-item, .navbar-link { - border-radius: 3px; + border-radius: 4px; cursor: pointer; } @@ -6578,7 +6578,7 @@ a.navbar-item:hover, a.navbar-item.is-active, margin: 0.5rem 0; } -@media screen and (max-width: 1023px) { +@media screen and (max-width: 1087px) { .navbar > .container { display: block; } @@ -6626,7 +6626,7 @@ a.navbar-item:hover, a.navbar-item.is-active, } } -@media screen and (min-width: 1024px) { +@media screen and (min-width: 1088px) { .navbar, .navbar-menu, .navbar-start, @@ -6670,7 +6670,7 @@ a.navbar-item:hover, a.navbar-item.is-active, } .navbar-item.has-dropdown-up .navbar-dropdown { border-bottom: 1px solid #dbdbdb; - border-radius: 5px 5px 0 0; + border-radius: 6px 6px 0 0; border-top: none; bottom: 100%; box-shadow: 0 -8px 8px rgba(10, 10, 10, 0.1); @@ -6703,8 +6703,8 @@ a.navbar-item:hover, a.navbar-item.is-active, } .navbar-dropdown { background-color: white; - border-bottom-left-radius: 5px; - border-bottom-right-radius: 5px; + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; border-top: 1px solid #dbdbdb; box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1); display: none; @@ -6731,7 +6731,7 @@ a.navbar-item:hover, a.navbar-item.is-active, color: #3273dc; } .navbar-dropdown.is-boxed { - border-radius: 5px; + border-radius: 6px; border-top: none; box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1); display: block; @@ -6975,7 +6975,7 @@ a.navbar-item:hover, a.navbar-item.is-active, .panel-heading { background-color: whitesmoke; - border-radius: 3px 3px 0 0; + border-radius: 4px 4px 0 0; color: #363636; font-size: 1.25em; font-weight: 300; @@ -7150,7 +7150,7 @@ label.panel-block:hover { .tabs.is-boxed a { border: 1px solid transparent; - border-radius: 3px 3px 0 0; + border-radius: 4px 4px 0 0; } .tabs.is-boxed a:hover { @@ -7188,11 +7188,11 @@ label.panel-block:hover { } .tabs.is-toggle li:first-child a { - border-radius: 3px 0 0 3px; + border-radius: 4px 0 0 4px; } .tabs.is-toggle li:last-child a { - border-radius: 0 3px 3px 0; + border-radius: 0 4px 4px 0; } .tabs.is-toggle li.is-active a { @@ -7750,7 +7750,7 @@ label.panel-block:hover { } } -@media screen and (max-width: 1023px) { +@media screen and (max-width: 1087px) { .column.is-narrow-touch { flex: none; } @@ -7907,7 +7907,7 @@ label.panel-block:hover { } } -@media screen and (min-width: 1024px) { +@media screen and (min-width: 1088px) { .column.is-narrow-desktop { flex: none; } @@ -8064,7 +8064,7 @@ label.panel-block:hover { } } -@media screen and (min-width: 1216px) { +@media screen and (min-width: 1280px) { .column.is-narrow-widescreen { flex: none; } @@ -8221,7 +8221,7 @@ label.panel-block:hover { } } -@media screen and (min-width: 1408px) { +@media screen and (min-width: 1472px) { .column.is-narrow-fullhd { flex: none; } @@ -8433,7 +8433,7 @@ label.panel-block:hover { } } -@media screen and (min-width: 1024px) { +@media screen and (min-width: 1088px) { .columns.is-desktop { display: flex; } @@ -8617,7 +8617,7 @@ label.panel-block:hover { color: #0a0a0a; } -@media screen and (max-width: 1023px) { +@media screen and (max-width: 1087px) { .hero.is-white .navbar-menu { background-color: white; } @@ -8695,7 +8695,7 @@ label.panel-block:hover { color: white; } -@media screen and (max-width: 1023px) { +@media screen and (max-width: 1087px) { .hero.is-black .navbar-menu { background-color: #0a0a0a; } @@ -8773,7 +8773,7 @@ label.panel-block:hover { color: #363636; } -@media screen and (max-width: 1023px) { +@media screen and (max-width: 1087px) { .hero.is-light .navbar-menu { background-color: whitesmoke; } @@ -8851,7 +8851,7 @@ label.panel-block:hover { color: whitesmoke; } -@media screen and (max-width: 1023px) { +@media screen and (max-width: 1087px) { .hero.is-dark .navbar-menu { background-color: #363636; } @@ -8929,7 +8929,7 @@ label.panel-block:hover { color: #fff; } -@media screen and (max-width: 1023px) { +@media screen and (max-width: 1087px) { .hero.is-primary .navbar-menu { background-color: #00d1b2; } @@ -9007,7 +9007,7 @@ label.panel-block:hover { color: #fff; } -@media screen and (max-width: 1023px) { +@media screen and (max-width: 1087px) { .hero.is-link .navbar-menu { background-color: #3273dc; } @@ -9085,7 +9085,7 @@ label.panel-block:hover { color: #fff; } -@media screen and (max-width: 1023px) { +@media screen and (max-width: 1087px) { .hero.is-info .navbar-menu { background-color: #209cee; } @@ -9163,7 +9163,7 @@ label.panel-block:hover { color: #fff; } -@media screen and (max-width: 1023px) { +@media screen and (max-width: 1087px) { .hero.is-success .navbar-menu { background-color: #23d160; } @@ -9241,7 +9241,7 @@ label.panel-block:hover { color: rgba(0, 0, 0, 0.7); } -@media screen and (max-width: 1023px) { +@media screen and (max-width: 1087px) { .hero.is-warning .navbar-menu { background-color: #ffdd57; } @@ -9319,7 +9319,7 @@ label.panel-block:hover { color: #fff; } -@media screen and (max-width: 1023px) { +@media screen and (max-width: 1087px) { .hero.is-danger .navbar-menu { background-color: #ff3860; } @@ -9473,7 +9473,7 @@ label.panel-block:hover { padding: 3rem 1.5rem; } -@media screen and (min-width: 1024px) { +@media screen and (min-width: 1088px) { .section.is-medium { padding: 9rem 1.5rem; } @@ -9499,7 +9499,7 @@ label.panel-block:hover { .bd-breadcrumb { display: flex; justify-content: space-between; - margin-bottom: 2.5rem; + margin-bottom: 3rem; } .bd-breadcrumb .breadcrumb:not(:last-child) { @@ -9518,7 +9518,7 @@ label.panel-block:hover { .bd-prev-next a, .bd-prev-next span { - border-radius: 3px; + border-radius: 4px; width: 1.5rem; } @@ -9526,10 +9526,29 @@ label.panel-block:hover { background-color: whitesmoke; } +.bd-prev-next-bis { + border-top: 2px solid whitesmoke; + display: flex; + justify-content: space-between; + margin-top: 3rem; +} + +.bd-prev-next-bis a { + margin-top: 1.5rem; +} + +.bd-prev-next-bis-previous { + margin-right: auto; +} + +.bd-prev-next-bis-next { + margin-left: auto; +} + .bd-header { border-bottom: 2px solid whitesmoke; - margin-bottom: 2.5rem; - padding-bottom: 2.5rem; + margin-bottom: 3rem; + padding-bottom: 3rem; } .bd-header .subtitle { @@ -9578,6 +9597,14 @@ label.panel-block:hover { margin-bottom: 0.5rem; } +.bd-category.is-active .bd-category-toggle .icon { + transform: rotate(180deg); +} + +.bd-category.is-active .bd-category-list { + display: block; +} + .bd-category-header { position: relative; } @@ -9591,6 +9618,9 @@ label.panel-block:hover { .bd-category-toggle .icon { font-size: 0.75rem; + transform-origin: center; + transition-duration: 86ms; + transition-property: transform; } .bd-category-name { @@ -9616,11 +9646,7 @@ label.panel-block:hover { color: #7a7a7a; } -.bd-category-list.is-active { - display: block; -} - -@media screen and (max-width: 1023px) { +@media screen and (max-width: 1087px) { .bd-lead, .bd-side { padding: 1.5rem; @@ -9654,7 +9680,7 @@ label.panel-block:hover { } } -@media screen and (min-width: 1024px) { +@media screen and (min-width: 1088px) { .bd-main { padding: 0 3rem; } @@ -9674,7 +9700,7 @@ label.panel-block:hover { .bd-header-carbon { flex-grow: 0; flex-shrink: 0; - margin: -15px 0 -15px 1.5rem; + margin: -15px 0 -15px 3rem; width: 300px; } .bd-side { @@ -9687,6 +9713,10 @@ label.panel-block:hover { color: #586e75; } +.highlight pre { + font-size: 12px; +} + .highlight .c { color: #93a1a1; } @@ -9999,8 +10029,11 @@ svg { position: relative; } -#carbonads .carbon-wrap:hover .carbon-img { - opacity: 0.9; +#carbonads .carbon-wrap:hover .carbon-img::after { + background-color: rgba(0, 0, 0, 0.05); + content: ""; + display: block; + right: 1rem; } #carbonads .carbon-img { @@ -10042,7 +10075,7 @@ svg { #carbonads .carbon-poweredby { bottom: 0; - color: #7a7a7a; + color: #b5b5b5; display: inline; font-size: 0.75rem; line-height: 20px; @@ -10076,7 +10109,7 @@ svg { .intro-npm { background: #242424; - border-radius: 5px; + border-radius: 6px; color: white; display: flex; font-size: 15px; @@ -10093,7 +10126,7 @@ svg { } .intro-npm .intro-npm-copy { - border-radius: 3px; + border-radius: 4px; color: #ffdd57; cursor: pointer; margin: -2px -7px -3px; @@ -10276,13 +10309,13 @@ svg { } } -@media screen and (max-width: 1023px) { +@media screen and (max-width: 1087px) { .intro-column.is-video { margin-top: 3rem; } } -@media screen and (min-width: 1024px) { +@media screen and (min-width: 1088px) { .intro-columns { display: flex; justify-content: center; @@ -10355,7 +10388,7 @@ svg { color: #f96854; } -@media screen and (min-width: 1024px) { +@media screen and (min-width: 1088px) { #blogDropdown { width: 17rem; } @@ -10485,6 +10518,111 @@ svg { text-decoration: underline; } +.bd-links { + counter-reset: bd-links; +} + +.bd-link { + border-radius: 6px; + color: #7a7a7a; + display: block; + font-size: 1.25rem; + padding: 1rem 3rem 1.5rem; +} + +.bd-link strong { + font-weight: 600; +} + +.bd-link:hover { + background-color: #fafafa; +} + +.bd-link-name { + position: relative; +} + +.bd-link-name::before { + color: #3273dc; + counter-increment: bd-links; + content: counter(bd-links); + font-weight: 400; + position: absolute; + right: calc(100% + 0.625em); +} + +@media screen and (min-width: 1088px) { + .bd-links { + display: flex; + flex-wrap: wrap; + } + .bd-link { + width: 50%; + } +} + +.bd-link-name { + color: #363636; + font-size: 1.5rem; + font-weight: 600; +} + +.bd-docs { + display: flex; + flex-wrap: wrap; +} + +.bd-doc { + margin: 0 3rem 1.5rem 0; +} + +@media screen and (max-width: 768px) { + .bd-doc { + min-width: calc(50% - 3rem); + } +} + +@media screen and (min-width: 769px), print { + .bd-doc { + min-width: calc(33.3333% - 3rem); + } +} + +.bd-doc-title { + color: #363636; +} + +.bd-doc-title a { + color: currentColor; +} + +.bd-doc-title a:hover { + color: #3273dc; +} + +.bd-doc-title:not(:last-child) { + margin-bottom: 0.75rem; +} + +.bd-boxes { + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + +.bd-box { + border: 4px solid whitesmoke; + border-radius: 4px; +} + +.bd-box-header { + text-align: center; +} + +.bd-typo { + text-align: center; +} + .bd-typo:not(:first-child) { margin-top: 3rem; } @@ -10576,11 +10714,11 @@ svg { } .bd-navbar-item-expo:hover { - color: #744F09 !important; + color: #8F6900 !important; } .bd-navbar-item-expo:hover .icon { - color: #FF7B00 !important; + color: #F4B300 !important; } .bd-special-shadow { @@ -10595,7 +10733,7 @@ svg { transform-origin: center top; } -@media screen and (max-width: 1023px) { +@media screen and (max-width: 1087px) { .bd-is-clipped-touch { overflow: hidden !important; } @@ -10655,7 +10793,7 @@ svg { position: relative; } -@media screen and (max-width: 1215px) { +@media screen and (max-width: 1279px) { .bd-anchor-title { padding-left: 2rem; } @@ -10666,7 +10804,7 @@ svg { right: calc(100% + 1rem); } -@media screen and (max-width: 1215px) { +@media screen and (max-width: 1279px) { .bd-anchor-link { left: 0; right: auto; @@ -10826,7 +10964,7 @@ svg { .bd-notification { background-color: whitesmoke; - border-radius: 3px; + border-radius: 4px; padding: 1.25rem 0; position: relative; text-align: center; @@ -10921,7 +11059,7 @@ svg { .bd-structure::before, .bd-snippet::before { background: #ffdd57; - border-radius: 3px 3px 0 0; + border-radius: 4px 4px 0 0; bottom: 100%; color: rgba(0, 0, 0, 0.7); content: "Example"; @@ -10962,12 +11100,12 @@ svg { } .bd-example.bd-is-clipped { - border-top-right-radius: 5px; + border-top-right-radius: 6px; } .bd-example + .highlight { border: 1px solid #ffdd57; - border-radius: 0 0 3px 3px; + border-radius: 0 0 4px 4px; border-top: none; margin-top: -1.5rem; } @@ -10977,7 +11115,7 @@ svg { } .bd-snippet { - border: 1px solid #ffdd57; + border: 2px solid whitesmoke; margin-top: 2rem; position: relative; } @@ -11010,7 +11148,7 @@ svg { } .bd-snippet.bd-is-horizontal { - border-radius: 5px; + border-radius: 6px; border-top-left-radius: 0; } @@ -11027,10 +11165,10 @@ svg { border-width: 1px 0; } -@media screen and (min-width: 1024px) { +@media screen and (min-width: 1088px) { .bd-snippet.bd-is-vertical { align-items: stretch; - border-radius: 5px; + border-radius: 6px; border-top-left-radius: 0; display: flex; justify-content: center; @@ -11043,7 +11181,7 @@ svg { .bd-snippet.bd-is-vertical .bd-snippet-code .highlight, .bd-snippet.bd-is-vertical .bd-snippet-code .highlight pre { align-items: stretch; - border-radius: 0 5px 5px 0; + border-radius: 0 6px 6px 0; display: flex; flex-direction: column; } @@ -11103,7 +11241,7 @@ svg { .bd-structure { border-color: #ff3860; - border-radius: 3px; + border-radius: 4px; padding: 1.5rem; } @@ -11246,7 +11384,7 @@ svg { .bd-callout { background-color: whitesmoke; - border-radius: 3px; + border-radius: 4px; padding: 1.25rem 2.5rem 1.25rem 1.5rem; position: relative; } @@ -11323,7 +11461,7 @@ svg { #_default_ > a { background-color: white; - border-radius: 5px; + border-radius: 6px; box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1); color: #4a4a4a; display: block; @@ -11622,13 +11760,13 @@ html.route-index .hero.is-primary a.column:hover .title strong { } } -@media screen and (max-width: 1023px) { +@media screen and (max-width: 1087px) { .bd-tws-love .bd-tw:not(:last-child) { margin-bottom: 1.5rem; } } -@media screen and (min-width: 1024px) { +@media screen and (min-width: 1088px) { .bd-tws-home { min-height: 595px; } @@ -11643,13 +11781,13 @@ html.route-index .hero.is-primary a.column:hover .title strong { } } -@media screen and (min-width: 1216px) { +@media screen and (min-width: 1280px) { .bd-tws-home { min-height: 653px; } } -@media screen and (min-width: 1408px) { +@media screen and (min-width: 1472px) { .bd-tws-home { min-height: 632px; } @@ -11829,19 +11967,19 @@ html.route-index .hero.is-primary a.column:hover .title strong { } } -@media screen and (min-width: 1024px) { +@media screen and (min-width: 1088px) { .bd-testimonials { min-height: 595px; } } -@media screen and (min-width: 1216px) { +@media screen and (min-width: 1280px) { .bd-testimonials { min-height: 653px; } } -@media screen and (min-width: 1408px) { +@media screen and (min-width: 1472px) { .bd-testimonials { min-height: 632px; } @@ -12081,7 +12219,7 @@ html.route-index .hero.is-primary a.column:hover .title strong { .bd-klmn-gap { background-color: whitesmoke; - border-radius: 3px; + border-radius: 4px; color: #ff3860; font-family: monospace; font-size: 0.75rem; @@ -12536,7 +12674,7 @@ html.route-index .hero.is-primary a.column:hover .title strong { } } -@media screen and (min-width: 1216px) { +@media screen and (min-width: 1280px) { .native-js { font-size: 1.25rem; } diff --git a/docs/documentation.html b/docs/documentation.html index 6bfe7ea9..b1dd2301 100644 --- a/docs/documentation.html +++ b/docs/documentation.html @@ -1,8 +1,9 @@ --- title: Documentation -subtitle: "Everything you need to create a website with Bulma" layout: documentation breadcrumb: - home - documentation --- + +{% include components/links.html %} diff --git a/docs/documentation/columns.html b/docs/documentation/columns.html new file mode 100644 index 00000000..b4778ff5 --- /dev/null +++ b/docs/documentation/columns.html @@ -0,0 +1,11 @@ +--- +title: Columns +layout: documentation +doc-tab: columns +breadcrumb: +- home +- documentation +- columns +--- + +{% include components/links.html category_id='columns' %} diff --git a/docs/documentation/components.html b/docs/documentation/components.html new file mode 100644 index 00000000..777293f2 --- /dev/null +++ b/docs/documentation/components.html @@ -0,0 +1,11 @@ +--- +title: Components +layout: documentation +doc-tab: components +breadcrumb: +- home +- documentation +- components +--- + +{% include components/links.html category_id='components' %} diff --git a/docs/documentation/elements.html b/docs/documentation/elements.html new file mode 100644 index 00000000..d87f2a08 --- /dev/null +++ b/docs/documentation/elements.html @@ -0,0 +1,11 @@ +--- +title: Elements +layout: documentation +doc-tab: elements +breadcrumb: +- home +- documentation +- elements +--- + +{% include components/links.html category_id='elements' %} diff --git a/docs/documentation/form.html b/docs/documentation/form.html index e3627319..7c0e87f2 100644 --- a/docs/documentation/form.html +++ b/docs/documentation/form.html @@ -1,9 +1,11 @@ --- title: Form -subtitle: "All form controls" layout: documentation +doc-tab: form breadcrumb: - home - documentation - form --- + +{% include components/links.html category_id='form' %} diff --git a/docs/documentation/modifiers.html b/docs/documentation/modifiers.html new file mode 100644 index 00000000..265f8e41 --- /dev/null +++ b/docs/documentation/modifiers.html @@ -0,0 +1,11 @@ +--- +title: Modifiers +layout: documentation +doc-tab: modifiers +breadcrumb: +- home +- documentation +- modifiers +--- + +{% include components/links.html category_id='modifiers' %} diff --git a/docs/documentation/modifiers/typography-helpers.html b/docs/documentation/modifiers/typography-helpers.html index 74f0b214..db492715 100644 --- a/docs/documentation/modifiers/typography-helpers.html +++ b/docs/documentation/modifiers/typography-helpers.html @@ -2,6 +2,7 @@ title: Typography helpers subtitle: "Change the size and color of the text for one or multiple viewport width" layout: documentation +hide_categories: true doc-tab: modifiers doc-subtab: typography-helpers breadcrumb: @@ -96,7 +97,7 @@ breadcrumb:

-{% include layout/main-close.html %} +{% include layout/main-close.html show_categories=true %}
diff --git a/docs/documentation/overview.html b/docs/documentation/overview.html new file mode 100644 index 00000000..cbfea21b --- /dev/null +++ b/docs/documentation/overview.html @@ -0,0 +1,11 @@ +--- +title: Overview +layout: documentation +doc-tab: overview +breadcrumb: +- home +- documentation +- overview +--- + +{% include components/links.html category_id='overview' %} diff --git a/docs/documentation/overview/classes.html b/docs/documentation/overview/classes.html index ac7b857a..9a074976 100644 --- a/docs/documentation/overview/classes.html +++ b/docs/documentation/overview/classes.html @@ -1,6 +1,5 @@ --- title: CSS classes -subtitle: "Bulma is simply a collection of CSS classes. Write the HTML code you want." layout: documentation doc-tab: overview doc-subtab: classes diff --git a/docs/documentation/overview/colors.html b/docs/documentation/overview/colors.html index 87bf25e8..52d7edc1 100644 --- a/docs/documentation/overview/colors.html +++ b/docs/documentation/overview/colors.html @@ -1,6 +1,5 @@ --- title: Colors -subtitle: "The colors that style most Bulma elements and components" layout: documentation doc-tab: overview doc-subtab: colors diff --git a/docs/documentation/overview/customize.html b/docs/documentation/overview/customize.html index 98d15ac5..e3191085 100644 --- a/docs/documentation/overview/customize.html +++ b/docs/documentation/overview/customize.html @@ -1,6 +1,5 @@ --- title: Customize Bulma with Sass -subtitle: "Create your own theme with a simple set of variables" layout: documentation doc-tab: overview doc-subtab: customize diff --git a/docs/documentation/overview/functions.html b/docs/documentation/overview/functions.html index 8b12ad38..80abc189 100644 --- a/docs/documentation/overview/functions.html +++ b/docs/documentation/overview/functions.html @@ -1,6 +1,5 @@ --- title: Functions -subtitle: "Utility functions to calculate colors and other values" layout: documentation doc-tab: overview doc-subtab: functions diff --git a/docs/documentation/overview/mixins.html b/docs/documentation/overview/mixins.html index 3721b0a1..b8aa7866 100644 --- a/docs/documentation/overview/mixins.html +++ b/docs/documentation/overview/mixins.html @@ -1,6 +1,5 @@ --- title: Mixins -subtitle: "Utility mixins for custom elements and responsive helpers" layout: documentation doc-tab: overview doc-subtab: mixins diff --git a/docs/documentation/overview/modular.html b/docs/documentation/overview/modular.html index 02135faa..2075b6cd 100644 --- a/docs/documentation/overview/modular.html +++ b/docs/documentation/overview/modular.html @@ -1,6 +1,5 @@ --- title: Modularity -subtitle: "Just import what you need" layout: documentation doc-tab: overview doc-subtab: modular @@ -99,5 +98,8 @@ breadcrumb: [disabled] - {% highlight html %}{{ buttons }}{% endhighlight %} + +
+ {% highlight html %}{{ buttons }}{% endhighlight %} +
diff --git a/docs/documentation/overview/responsiveness.html b/docs/documentation/overview/responsiveness.html index c6a2b586..8c118801 100644 --- a/docs/documentation/overview/responsiveness.html +++ b/docs/documentation/overview/responsiveness.html @@ -1,6 +1,5 @@ --- title: Responsiveness -subtitle: "Bulma is a mobile-first framework" layout: documentation doc-tab: overview doc-subtab: responsiveness @@ -36,7 +35,7 @@ $fullhd-enabled: false
  • the level component will show its children stacked vertically
  • the nav menu will be hidden
  • -

    For example, you can enforce the horizontal layout for both columns or nav by appending the is-mobile modifier.

    +

    You can however enforce the horizontal layout for both columns or nav by appending the is-mobile modifier.

    {% include anchor.html name="Breakpoints" %} diff --git a/docs/documentation/overview/start.html b/docs/documentation/overview/start.html index aa23c584..e48c93f9 100644 --- a/docs/documentation/overview/start.html +++ b/docs/documentation/overview/start.html @@ -1,6 +1,5 @@ --- title: Getting started with Bulma -subtitle: "You only need 1 CSS file to use Bulma" layout: documentation doc-tab: overview doc-subtab: start diff --git a/docs/documentation/overview/variables.html b/docs/documentation/overview/variables.html index 099db28d..7532f723 100644 --- a/docs/documentation/overview/variables.html +++ b/docs/documentation/overview/variables.html @@ -1,6 +1,5 @@ --- title: Variables -subtitle: "Easily customize Bulma to match your design" layout: documentation doc-tab: overview doc-subtab: variables diff --git a/docs/lib/main.js b/docs/lib/main.js index 4063ee49..7c526ee8 100644 --- a/docs/lib/main.js +++ b/docs/lib/main.js @@ -27,6 +27,30 @@ document.addEventListener('DOMContentLoaded', function () { // }); // } + // Sidebar links + + var $categories = getAll('#categories .bd-category'); + + if ($categories.length > 0) { + $categories.forEach(function (el) { + var toggle_el = el.querySelector('.bd-category-toggle'); + + toggle_el.addEventListener('click', function (event) { + closeCategories(el); + el.classList.toggle('is-active'); + }); + }); + } + + function closeCategories(current_el) { + $categories.forEach(function (el) { + if (current_el == el) { + return; + } + el.classList.remove('is-active'); + }); + } + // Meta links var $metalinks = getAll('#meta a'); @@ -38,7 +62,6 @@ document.addEventListener('DOMContentLoaded', function () { var target = $el.getAttribute('href'); var $target = document.getElementById(target.substring(1)); $target.scrollIntoView(true); - // window.history.replaceState(null, document.title, `${window.location.origin}${window.location.pathname}${target}`); return false; }); }); @@ -289,8 +312,8 @@ document.addEventListener('DOMContentLoaded', function () { // translateHeader(window.scrollY, false); - var ticking = false; - var lastY = 0; + // let ticking = false; + // let lastY = 0; // window.addEventListener('scroll', function() { // const currentY = window.scrollY; diff --git a/sass/utilities/initial-variables.sass b/sass/utilities/initial-variables.sass index 6a9ad80c..421bd3d5 100644 --- a/sass/utilities/initial-variables.sass +++ b/sass/utilities/initial-variables.sass @@ -46,7 +46,7 @@ $weight-bold: 700 !default // Responsiveness // The container horizontal gap, which acts as the offset for breakpoints -$gap: 32px !default +$gap: 64px !default // 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16 $tablet: 769px !default // 960px container + 4rem @@ -62,8 +62,8 @@ $fullhd-enabled: true !default $easing: ease-out !default $radius-small: 2px !default -$radius: 3px !default -$radius-large: 5px !default +$radius: 4px !default +$radius-large: 6px !default $radius-rounded: 290486px !default $speed: 86ms !default From e3ecca6432d49ef0eba71fe1ea287818c4623b7a Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Mon, 9 Apr 2018 20:37:05 +0100 Subject: [PATCH 13/56] Move all subtitles --- docs/_data/links.json | 55 ++++++++++++++++++- docs/_sass/main.sass | 2 +- docs/css/bulma-docs.css | 2 +- docs/documentation/columns/basics.html | 1 - docs/documentation/columns/gap.html | 1 - docs/documentation/columns/nesting.html | 1 - docs/documentation/columns/options.html | 1 - .../documentation/columns/responsiveness.html | 1 - docs/documentation/columns/sizes.html | 1 - docs/documentation/components/breadcrumb.html | 1 - docs/documentation/components/card.html | 1 - docs/documentation/components/dropdown.html | 1 - docs/documentation/components/menu.html | 1 - docs/documentation/components/message.html | 1 - docs/documentation/components/modal.html | 1 - docs/documentation/components/navbar.html | 1 - docs/documentation/components/pagination.html | 1 - docs/documentation/components/panel.html | 1 - docs/documentation/components/tabs.html | 1 - docs/documentation/elements/box.html | 1 - docs/documentation/elements/button.html | 1 - docs/documentation/elements/content.html | 1 - docs/documentation/elements/delete.html | 1 - docs/documentation/elements/icon.html | 1 - docs/documentation/elements/image.html | 1 - docs/documentation/elements/notification.html | 1 - docs/documentation/elements/progress.html | 1 - docs/documentation/elements/table.html | 1 - docs/documentation/elements/tag.html | 1 - docs/documentation/elements/title.html | 1 - docs/documentation/form/checkbox.html | 1 - docs/documentation/form/file.html | 1 - docs/documentation/form/general.html | 1 - docs/documentation/form/input.html | 1 - docs/documentation/form/radio.html | 1 - docs/documentation/form/select.html | 1 - docs/documentation/form/textarea.html | 1 - docs/documentation/layout.html | 11 ++++ docs/documentation/layout/container.html | 1 - docs/documentation/layout/footer.html | 1 - docs/documentation/layout/hero.html | 1 - docs/documentation/layout/level.html | 1 - docs/documentation/layout/media-object.html | 1 - docs/documentation/layout/section.html | 1 - docs/documentation/layout/tiles.html | 1 - .../modifiers/color-helpers.html | 1 - docs/documentation/modifiers/helpers.html | 1 - .../modifiers/responsive-helpers.html | 1 - docs/documentation/modifiers/syntax.html | 1 - .../modifiers/typography-helpers.html | 1 - 50 files changed, 67 insertions(+), 49 deletions(-) create mode 100644 docs/documentation/layout.html diff --git a/docs/_data/links.json b/docs/_data/links.json index c1a7c85c..944d1085 100644 --- a/docs/_data/links.json +++ b/docs/_data/links.json @@ -66,22 +66,27 @@ }, "modifiers-syntax": { "name": "Syntax", + "subtitle": "Most Bulma elements have alternative styles. To apply them, you only need to append one of the modifier classes. They all start with is- or has-.", "path": "/documentation/modifiers/syntax" }, "modifiers-helpers": { "name": "Helpers", + "subtitle": "Apply helper classes to almost any element, in order to alter its style", "path": "/documentation/modifiers/helpers" }, "modifiers-responsive-helpers": { "name": "Responsive helpers", + "subtitle": "Show/hide content depending on the width of the viewport", "path": "/documentation/modifiers/responsive-helpers" }, "modifiers-color-helpers": { "name": "Color helpers", + "subtitle": "Change the color of the text and/or background", "path": "/documentation/modifiers/color-helpers" }, "modifiers-typography-helpers": { "name": "Typography helpers", + "subtitle": "Change the size and color of the text for one or multiple viewport width", "path": "/documentation/modifiers/typography-helpers" }, "columns": { @@ -91,26 +96,32 @@ }, "columns-basics": { "name": "Basics", + "subtitle": "A simple way to build responsive columns", "path": "/documentation/columns/basics" }, "columns-gap": { "name": "Gap", + "subtitle": Customize the gap between the columns, "path": "/documentation/columns/gap" }, "columns-nesting": { "name": "Nesting", + "subtitle": "A simple way to build responsive columns", "path": "/documentation/columns/nesting" }, "columns-options": { "name": "Options", + "subtitle": "Design different types of column layouts", "path": "/documentation/columns/options" }, "columns-responsiveness": { "name": "Responsiveness", + "subtitle": "Handle different column layouts for each breakpoint", "path": "/documentation/columns/responsiveness" }, "columns-sizes": { "name": "Sizes", + "subtitle": "Define the size of each column individually", "path": "/documentation/columns/sizes" }, "layout": { @@ -118,152 +129,194 @@ "subtitle": "Design the structure of your webpage with these CSS classes", "path": "/documentation/layout" }, + "layout-container": { + "name": "Container", + "subtitle": "A simple container to center your content horizontally", + "path": "/documentation/layout/container" + }, "layout-level": { "name": "Level", + "subtitle": "A multi-purpose horizontal level, which can contain almost any other element", "path": "/documentation/layout/level" }, "layout-media": { "name": "Media Object", + "subtitle": "The famous media object prevalent in social media interfaces, but useful in any context", "path": "/documentation/layout/media" }, "layout-hero": { "name": "Hero", + "subtitle": "An imposing hero banner to showcase something", "path": "/documentation/layout/hero" }, "layout-section": { "name": "Section", + "subtitle": "A simple container to divide your page into sections, like the one you're currently reading", "path": "/documentation/layout/section" }, "layout-footer": { "name": "Footer", + "subtitle": "A simple responsive footer which can include anything: lists, headings, columns, icons, buttons, etc.", "path": "/documentation/layout/footer" }, "layout-tiles": { "name": "Tiles", + "subtitle": "A single tile element to build 2-dimensional Metro-like, Pinterest-like, or whatever-you-like grids", "path": "/documentation/layout/tiles" }, "form": { "name": "Form", + "subtitle": "The indispensable form controls, designed for maximum clarity", "path": "/documentation/form" }, "form-general": { "name": "General", + "subtitle": "All generic form controls, designed for consistency", "path": "/documentation/form/general" }, "form-input": { "name": "Input", + "subtitle": "The text input and its variations", "path": "/documentation/form/input" }, "form-textarea": { "name": "Textarea", + "subtitle": "The multiline textarea and its variations", "path": "/documentation/form/textarea" }, "form-select": { "name": "Select", + "subtitle": "The browser built-in select dropdown, styled accordingly", "path": "/documentation/form/select" }, "form-checkbox": { "name": "Checkbox", + "subtitle": "The 2-state checkbox in its native format", "path": "/documentation/form/checkbox" }, "form-radio": { "name": "Radio", + "subtitle": "The mutually exclusive radio buttons in their native format", "path": "/documentation/form/radio" }, "form-file": { "name": "File", + "subtitle": "A custom file upload input, without JavaScript", "path": "/documentation/form/file" }, "elements": { "name": "Elements", + "subtitle": "Essential interface elements that only require a single CSS class", "path": "/documentation/elements" }, "elements-box": { "name": "Box", + "subtitle": "A white box to contain other elements", "path": "/documentation/elements/box" }, "elements-button": { "name": "Button", + "subtitle": "The classic button, in different colors, sizes, and states", "path": "/documentation/elements/button" }, "elements-content": { "name": "Content", + "subtitle": "A single class to handle WYSIWYG generated content, where only HTML tags are available", "path": "/documentation/elements/content" }, "elements-delete": { "name": "Delete", + "subtitle": "A versatile delete cross", "path": "/documentation/elements/delete" }, "elements-icon": { "name": "Icon", + "subtitle": "Compatible with all icon font libraries, including Font Awesome 5", "path": "/documentation/elements/icon" }, "elements-image": { "name": "Image", + "subtitle": "A container for responsive images", "path": "/documentation/elements/image" }, "elements-notification": { "name": "Notification", + "subtitle": "Bold notification blocks, to alert your users of something", "path": "/documentation/elements/notification" }, "elements-progress": { "name": "Progress bars", + "subtitle": "Native HTML progress bars", "path": "/documentation/elements/progress" }, "elements-table": { "name": "Table", + "subtitle": "The inevitable HTML table, with special case cells", "path": "/documentation/elements/table" }, "elements-tag": { "name": "Tag", + "subtitle": "Small tag labels to insert anywhere", "path": "/documentation/elements/tag" }, "elements-title": { "name": "Title", + "subtitle": "Simple headings to add depth to your page", "path": "/documentation/elements/title" }, "components": { "name": "Components", + "subtitle": "Advanced multi-part components with lots of possibilities", "path": "/documentation/components" }, "components-breadcrumb": { "name": "Breadcrumb", + "subtitle": "A simple breadcrumb component to improve your navigation experience", "path": "/documentation/components/breadcrumb" }, "components-card": { "name": "Card", + "subtitle": "An all-around flexible and composable component", "path": "/documentation/components/card" }, "components-dropdown": { "name": "Dropdown", + "subtitle": "An interactive dropdown menu for discoverable content", "path": "/documentation/components/dropdown" }, "components-menu": { "name": "Menu", + "subtitle": "A simple menu, for any type of vertical navigation", "path": "/documentation/components/menu" }, "components-message": { "name": "Message", + "subtitle": "Colored message blocks, to emphasize part of your page", "path": "/documentation/components/message" }, "components-modal": { "name": "Modal", + "subtitle": "A classic modal overlay, in which you can include any content you want", "path": "/documentation/components/modal" }, "components-navbar": { "name": "Navbar", + "subtitle": "A responsive horizontal navbar that can support images, links, buttons, and dropdowns", "path": "/documentation/components/navbar" }, "components-pagination": { "name": "Pagination", + "subtitle": "A responsive, usable, and flexible pagination", "path": "/documentation/components/pagination" }, "components-panel": { "name": "Panel", + "subtitle": "A composable panel, for compact controls", "path": "/documentation/components/panel" }, "components-tabs": { "name": "Tabs", + "subtitle": "Simple responsive horizontal navigation tabs, with different styles", "path": "/documentation/components/tabs" } }, @@ -271,7 +324,7 @@ "overview": ["overview-start", "overview-classes", "overview-modular", "overview-responsiveness", "overview-variables", "overview-colors", "overview-functions", "overview-mixins"], "modifiers": ["modifiers-syntax", "modifiers-helpers", "modifiers-responsive-helpers", "modifiers-color-helpers", "modifiers-typography-helpers"], "columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"], - "layout": ["layout-level", "layout-media", "layout-hero", "layout-section", "layout-footer", "layout-tiles"], + "layout": ["layout-container", "layout-level", "layout-media", "layout-hero", "layout-section", "layout-footer", "layout-tiles"], "form": ["form-general", "form-input", "form-textarea", "form-select", "form-checkbox", "form-radio", "form-file"], "elements": ["elements-box", "elements-button", "elements-content", "elements-delete", "elements-icon", "elements-image", "elements-notification", "elements-progress", "elements-table", "elements-tag", "elements-title"], "components": ["components-breadcrumb", "components-card", "components-dropdown", "components-menu", "components-message", "components-modal", "components-navbar", "components-pagination", "components-panel", "components-tabs"] diff --git a/docs/_sass/main.sass b/docs/_sass/main.sass index 5ffe3be3..2e7c3d9c 100644 --- a/docs/_sass/main.sass +++ b/docs/_sass/main.sass @@ -50,7 +50,7 @@ padding-bottom: $main-spacing .subtitle color: $text-light - max-width: 21em + max-width: 16em strong color: currentColor #meta diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 525f5828..30b901fc 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -9553,7 +9553,7 @@ label.panel-block:hover { .bd-header .subtitle { color: #7a7a7a; - max-width: 21em; + max-width: 16em; } .bd-header .subtitle strong { diff --git a/docs/documentation/columns/basics.html b/docs/documentation/columns/basics.html index 023663c0..1c4eb15c 100644 --- a/docs/documentation/columns/basics.html +++ b/docs/documentation/columns/basics.html @@ -1,6 +1,5 @@ --- title: Columns powered by Flexbox -subtitle: "A simple way to build responsive columns" layout: documentation doc-tab: columns doc-subtab: basics diff --git a/docs/documentation/columns/gap.html b/docs/documentation/columns/gap.html index 727dbfb0..44e9e0bc 100644 --- a/docs/documentation/columns/gap.html +++ b/docs/documentation/columns/gap.html @@ -1,6 +1,5 @@ --- title: Columns gap -subtitle: Customize the gap between the columns layout: documentation doc-tab: columns doc-subtab: gap diff --git a/docs/documentation/columns/nesting.html b/docs/documentation/columns/nesting.html index 64cf551c..18632b31 100644 --- a/docs/documentation/columns/nesting.html +++ b/docs/documentation/columns/nesting.html @@ -1,6 +1,5 @@ --- title: Nesting columns -subtitle: "A simple way to build responsive columns" layout: documentation doc-tab: columns doc-subtab: nesting diff --git a/docs/documentation/columns/options.html b/docs/documentation/columns/options.html index 5448a6c8..586ddc3d 100644 --- a/docs/documentation/columns/options.html +++ b/docs/documentation/columns/options.html @@ -1,6 +1,5 @@ --- title: Column options -subtitle: "Design different types of column layouts" layout: documentation doc-tab: columns doc-subtab: options diff --git a/docs/documentation/columns/responsiveness.html b/docs/documentation/columns/responsiveness.html index 139c0c10..23fdaa73 100644 --- a/docs/documentation/columns/responsiveness.html +++ b/docs/documentation/columns/responsiveness.html @@ -1,6 +1,5 @@ --- title: Columns responsiveness -subtitle: "Handle different column layouts for each breakpoint" layout: documentation doc-tab: columns doc-subtab: responsiveness diff --git a/docs/documentation/columns/sizes.html b/docs/documentation/columns/sizes.html index 901698f3..465596dc 100644 --- a/docs/documentation/columns/sizes.html +++ b/docs/documentation/columns/sizes.html @@ -1,6 +1,5 @@ --- title: Column sizes -subtitle: "Define the size of each column individually" layout: documentation doc-tab: columns doc-subtab: sizes diff --git a/docs/documentation/components/breadcrumb.html b/docs/documentation/components/breadcrumb.html index 28ce30c5..f001c525 100644 --- a/docs/documentation/components/breadcrumb.html +++ b/docs/documentation/components/breadcrumb.html @@ -1,6 +1,5 @@ --- title: Breadcrumb -subtitle: "A simple breadcrumb component to improve your navigation experience" layout: documentation doc-tab: components doc-subtab: breadcrumb diff --git a/docs/documentation/components/card.html b/docs/documentation/components/card.html index 3205544b..dbed0f12 100644 --- a/docs/documentation/components/card.html +++ b/docs/documentation/components/card.html @@ -1,6 +1,5 @@ --- title: Card -subtitle: "An all-around flexible and composable component" layout: documentation doc-tab: components doc-subtab: card diff --git a/docs/documentation/components/dropdown.html b/docs/documentation/components/dropdown.html index 262261eb..76e0909e 100644 --- a/docs/documentation/components/dropdown.html +++ b/docs/documentation/components/dropdown.html @@ -1,6 +1,5 @@ --- title: Dropdown -subtitle: "An interactive dropdown menu for discoverable content" layout: documentation doc-tab: components doc-subtab: dropdown diff --git a/docs/documentation/components/menu.html b/docs/documentation/components/menu.html index 66f24dfe..476de2e4 100644 --- a/docs/documentation/components/menu.html +++ b/docs/documentation/components/menu.html @@ -1,6 +1,5 @@ --- title: Menu -subtitle: "A simple menu, for any type of vertical navigation" layout: documentation doc-tab: components doc-subtab: menu diff --git a/docs/documentation/components/message.html b/docs/documentation/components/message.html index f7e1e481..90aa3f05 100644 --- a/docs/documentation/components/message.html +++ b/docs/documentation/components/message.html @@ -1,6 +1,5 @@ --- title: Message -subtitle: "Colored message blocks, to emphasize part of your page" layout: documentation doc-tab: components doc-subtab: message diff --git a/docs/documentation/components/modal.html b/docs/documentation/components/modal.html index 25f3933b..9bf7a2f9 100644 --- a/docs/documentation/components/modal.html +++ b/docs/documentation/components/modal.html @@ -1,6 +1,5 @@ --- title: Modal -subtitle: "A classic modal overlay, in which you can include any content you want" layout: documentation doc-tab: components doc-subtab: modal diff --git a/docs/documentation/components/navbar.html b/docs/documentation/components/navbar.html index e8b9f644..ac5759be 100644 --- a/docs/documentation/components/navbar.html +++ b/docs/documentation/components/navbar.html @@ -1,6 +1,5 @@ --- title: Navbar -subtitle: "A responsive horizontal navbar that can support images, links, buttons, and dropdowns" layout: documentation doc-tab: components doc-subtab: navbar diff --git a/docs/documentation/components/pagination.html b/docs/documentation/components/pagination.html index a8649cdb..7ba7a630 100644 --- a/docs/documentation/components/pagination.html +++ b/docs/documentation/components/pagination.html @@ -1,6 +1,5 @@ --- title: Pagination -subtitle: "A responsive, usable, and flexible pagination" layout: documentation doc-tab: components doc-subtab: pagination diff --git a/docs/documentation/components/panel.html b/docs/documentation/components/panel.html index df734453..2695e45f 100644 --- a/docs/documentation/components/panel.html +++ b/docs/documentation/components/panel.html @@ -1,6 +1,5 @@ --- title: Panel -subtitle: "A composable panel, for compact controls" layout: documentation doc-tab: components doc-subtab: panel diff --git a/docs/documentation/components/tabs.html b/docs/documentation/components/tabs.html index 543014a5..fef4f7d3 100644 --- a/docs/documentation/components/tabs.html +++ b/docs/documentation/components/tabs.html @@ -1,6 +1,5 @@ --- title: Tabs -subtitle: "Simple responsive horizontal navigation tabs, with different styles" layout: documentation doc-tab: components doc-subtab: tabs diff --git a/docs/documentation/elements/box.html b/docs/documentation/elements/box.html index 3126ec91..fc21761a 100644 --- a/docs/documentation/elements/box.html +++ b/docs/documentation/elements/box.html @@ -1,6 +1,5 @@ --- title: Box -subtitle: "A white box to contain other elements" layout: documentation doc-tab: elements doc-subtab: box diff --git a/docs/documentation/elements/button.html b/docs/documentation/elements/button.html index fdf2341d..da566aec 100644 --- a/docs/documentation/elements/button.html +++ b/docs/documentation/elements/button.html @@ -1,6 +1,5 @@ --- title: Button -subtitle: "The classic button, in different colors, sizes, and states" layout: documentation doc-tab: elements doc-subtab: button diff --git a/docs/documentation/elements/content.html b/docs/documentation/elements/content.html index 01a0067a..331c5522 100644 --- a/docs/documentation/elements/content.html +++ b/docs/documentation/elements/content.html @@ -1,6 +1,5 @@ --- title: Content -subtitle: "A single class to handle WYSIWYG generated content, where only HTML tags are available" layout: documentation doc-tab: elements doc-subtab: content diff --git a/docs/documentation/elements/delete.html b/docs/documentation/elements/delete.html index 62dae380..3332f9f6 100644 --- a/docs/documentation/elements/delete.html +++ b/docs/documentation/elements/delete.html @@ -1,6 +1,5 @@ --- title: Delete -subtitle: "A versatile delete cross" layout: documentation doc-tab: elements doc-subtab: delete diff --git a/docs/documentation/elements/icon.html b/docs/documentation/elements/icon.html index caa100f2..d7deafa7 100644 --- a/docs/documentation/elements/icon.html +++ b/docs/documentation/elements/icon.html @@ -1,6 +1,5 @@ --- title: Icon -subtitle: 'Bulma is compatible with all icon font libraries: Font Awesome 5, Font Awesome 4, Material Design Icons, Open Iconic, Ionicons etc.' fontawesome4: true iconic: true ionicons: true diff --git a/docs/documentation/elements/image.html b/docs/documentation/elements/image.html index ed742d9a..92419252 100644 --- a/docs/documentation/elements/image.html +++ b/docs/documentation/elements/image.html @@ -1,6 +1,5 @@ --- title: Image -subtitle: "A container for responsive images" layout: documentation doc-tab: elements doc-subtab: image diff --git a/docs/documentation/elements/notification.html b/docs/documentation/elements/notification.html index 4164f233..de251176 100644 --- a/docs/documentation/elements/notification.html +++ b/docs/documentation/elements/notification.html @@ -1,6 +1,5 @@ --- title: Notification -subtitle: "Bold notification blocks, to alert your users of something" layout: documentation doc-tab: elements doc-subtab: notification diff --git a/docs/documentation/elements/progress.html b/docs/documentation/elements/progress.html index 44d7d270..51b4bafb 100644 --- a/docs/documentation/elements/progress.html +++ b/docs/documentation/elements/progress.html @@ -1,6 +1,5 @@ --- title: Progress Bar -subtitle: "Native HTML progress bars" layout: documentation doc-tab: elements doc-subtab: progress diff --git a/docs/documentation/elements/table.html b/docs/documentation/elements/table.html index 1d801df7..16d64d49 100644 --- a/docs/documentation/elements/table.html +++ b/docs/documentation/elements/table.html @@ -1,6 +1,5 @@ --- title: Table -subtitle: "The inevitable HTML table, with special case cells" layout: documentation doc-tab: elements doc-subtab: table diff --git a/docs/documentation/elements/tag.html b/docs/documentation/elements/tag.html index 5cc32a98..a130a066 100644 --- a/docs/documentation/elements/tag.html +++ b/docs/documentation/elements/tag.html @@ -1,6 +1,5 @@ --- title: Tags -subtitle: "Small tag labels to insert anywhere" layout: documentation doc-tab: elements doc-subtab: tag diff --git a/docs/documentation/elements/title.html b/docs/documentation/elements/title.html index 27614db7..4a170168 100644 --- a/docs/documentation/elements/title.html +++ b/docs/documentation/elements/title.html @@ -1,6 +1,5 @@ --- title: Title and Subtitle -subtitle: "Simple headings to add depth to your page" layout: documentation doc-tab: elements doc-subtab: title diff --git a/docs/documentation/form/checkbox.html b/docs/documentation/form/checkbox.html index 9f09b53b..e59da574 100644 --- a/docs/documentation/form/checkbox.html +++ b/docs/documentation/form/checkbox.html @@ -1,6 +1,5 @@ --- title: Checkbox -subtitle: "The 2-state checkbox in its native format" layout: documentation doc-tab: form doc-subtab: checkbox diff --git a/docs/documentation/form/file.html b/docs/documentation/form/file.html index 9fbaf31f..268d6610 100644 --- a/docs/documentation/form/file.html +++ b/docs/documentation/form/file.html @@ -1,6 +1,5 @@ --- title: File upload -subtitle: "A custom file upload input, without JavaScript" layout: documentation doc-tab: form doc-subtab: file diff --git a/docs/documentation/form/general.html b/docs/documentation/form/general.html index a8b9e702..c7da8696 100644 --- a/docs/documentation/form/general.html +++ b/docs/documentation/form/general.html @@ -1,6 +1,5 @@ --- title: Form controls -subtitle: "All generic form controls, designed for consistency" layout: documentation doc-tab: form doc-subtab: general diff --git a/docs/documentation/form/input.html b/docs/documentation/form/input.html index 9fb837f0..d0248ad5 100644 --- a/docs/documentation/form/input.html +++ b/docs/documentation/form/input.html @@ -1,6 +1,5 @@ --- title: Input -subtitle: "The text input and its variations" layout: documentation doc-tab: form doc-subtab: input diff --git a/docs/documentation/form/radio.html b/docs/documentation/form/radio.html index 44cad938..c3229593 100644 --- a/docs/documentation/form/radio.html +++ b/docs/documentation/form/radio.html @@ -1,6 +1,5 @@ --- title: Radio button -subtitle: "The mutually exclusive radio buttons in their native format" layout: documentation doc-tab: form doc-subtab: radio diff --git a/docs/documentation/form/select.html b/docs/documentation/form/select.html index 29da1bd7..dd616ad5 100644 --- a/docs/documentation/form/select.html +++ b/docs/documentation/form/select.html @@ -1,6 +1,5 @@ --- title: Select -subtitle: "The browser built-in select dropdown, styled accordingly" layout: documentation doc-tab: form doc-subtab: select diff --git a/docs/documentation/form/textarea.html b/docs/documentation/form/textarea.html index b9446050..bf89339c 100644 --- a/docs/documentation/form/textarea.html +++ b/docs/documentation/form/textarea.html @@ -1,6 +1,5 @@ --- title: Textarea -subtitle: "The multiline textarea and its variations" layout: documentation doc-tab: form doc-subtab: textarea diff --git a/docs/documentation/layout.html b/docs/documentation/layout.html new file mode 100644 index 00000000..7c4db1ae --- /dev/null +++ b/docs/documentation/layout.html @@ -0,0 +1,11 @@ +--- +title: Layout +layout: documentation +doc-tab: layout +breadcrumb: +- home +- documentation +- layout +--- + +{% include components/links.html category_id='layout' %} diff --git a/docs/documentation/layout/container.html b/docs/documentation/layout/container.html index 6ccc9efe..dbc2f54f 100644 --- a/docs/documentation/layout/container.html +++ b/docs/documentation/layout/container.html @@ -1,6 +1,5 @@ --- title: Container -subtitle: "A simple container to center your content horizontally" layout: documentation hide_carbon: true doc-tab: layout diff --git a/docs/documentation/layout/footer.html b/docs/documentation/layout/footer.html index 3872f2a0..4d2d3132 100644 --- a/docs/documentation/layout/footer.html +++ b/docs/documentation/layout/footer.html @@ -1,6 +1,5 @@ --- title: Footer -subtitle: "A simple responsive footer which can include anything: lists, headings, columns, icons, buttons, etc." layout: documentation hide_carbon: true doc-tab: layout diff --git a/docs/documentation/layout/hero.html b/docs/documentation/layout/hero.html index 8132a50c..004de36c 100644 --- a/docs/documentation/layout/hero.html +++ b/docs/documentation/layout/hero.html @@ -1,6 +1,5 @@ --- title: Hero -subtitle: "An imposing hero banner to showcase something" layout: documentation hide_carbon: true doc-tab: layout diff --git a/docs/documentation/layout/level.html b/docs/documentation/layout/level.html index 1cc144e3..2d453639 100644 --- a/docs/documentation/layout/level.html +++ b/docs/documentation/layout/level.html @@ -1,6 +1,5 @@ --- title: Level -subtitle: "A multi-purpose horizontal level, which can contain almost any other element" layout: documentation doc-tab: layout doc-subtab: level diff --git a/docs/documentation/layout/media-object.html b/docs/documentation/layout/media-object.html index 5155db1e..5bd3fb00 100644 --- a/docs/documentation/layout/media-object.html +++ b/docs/documentation/layout/media-object.html @@ -1,6 +1,5 @@ --- title: Media Object -subtitle: "The famous media object prevalent in social media interfaces, but useful in any context" layout: documentation doc-tab: layout doc-subtab: media-object diff --git a/docs/documentation/layout/section.html b/docs/documentation/layout/section.html index b7811c1b..ea865f79 100644 --- a/docs/documentation/layout/section.html +++ b/docs/documentation/layout/section.html @@ -1,6 +1,5 @@ --- title: Section -subtitle: "A simple container to divide your page into sections, like the one you're currently reading" layout: documentation doc-tab: layout doc-subtab: section diff --git a/docs/documentation/layout/tiles.html b/docs/documentation/layout/tiles.html index a8f892cc..1bc38352 100644 --- a/docs/documentation/layout/tiles.html +++ b/docs/documentation/layout/tiles.html @@ -1,6 +1,5 @@ --- title: Tiles powered by Flexbox -subtitle: "A single tile element to build 2-dimensional Metro-like, Pinterest-like, or whatever-you-like grids" layout: documentation doc-tab: layout doc-subtab: tiles diff --git a/docs/documentation/modifiers/color-helpers.html b/docs/documentation/modifiers/color-helpers.html index b5a9c6ed..fbd8fb4a 100644 --- a/docs/documentation/modifiers/color-helpers.html +++ b/docs/documentation/modifiers/color-helpers.html @@ -1,6 +1,5 @@ --- title: Color helpers -subtitle: "Change the color of the text and/or background" layout: documentation doc-tab: modifiers doc-subtab: color-helpers diff --git a/docs/documentation/modifiers/helpers.html b/docs/documentation/modifiers/helpers.html index f829ea7f..3c1c915f 100644 --- a/docs/documentation/modifiers/helpers.html +++ b/docs/documentation/modifiers/helpers.html @@ -1,6 +1,5 @@ --- title: Helpers -subtitle: "You can apply helper classes to almost any element, in order to alter its style." layout: documentation doc-tab: modifiers doc-subtab: helpers diff --git a/docs/documentation/modifiers/responsive-helpers.html b/docs/documentation/modifiers/responsive-helpers.html index aae26776..7a2b2977 100644 --- a/docs/documentation/modifiers/responsive-helpers.html +++ b/docs/documentation/modifiers/responsive-helpers.html @@ -1,6 +1,5 @@ --- title: Responsive helpers -subtitle: "Show/hide content depending on the width of the viewport" layout: documentation doc-tab: modifiers doc-subtab: responsive-helpers diff --git a/docs/documentation/modifiers/syntax.html b/docs/documentation/modifiers/syntax.html index be87980b..949cccf2 100644 --- a/docs/documentation/modifiers/syntax.html +++ b/docs/documentation/modifiers/syntax.html @@ -1,6 +1,5 @@ --- title: Modifiers syntax -subtitle: "Most Bulma elements have alternative styles. To apply them, you only need to append one of the modifier classes.
    They all start with is- or has-." layout: documentation doc-tab: modifiers doc-subtab: syntax diff --git a/docs/documentation/modifiers/typography-helpers.html b/docs/documentation/modifiers/typography-helpers.html index db492715..509097f9 100644 --- a/docs/documentation/modifiers/typography-helpers.html +++ b/docs/documentation/modifiers/typography-helpers.html @@ -1,6 +1,5 @@ --- title: Typography helpers -subtitle: "Change the size and color of the text for one or multiple viewport width" layout: documentation hide_categories: true doc-tab: modifiers From a1c19090014eb0e59800be94b605fa5a671babe8 Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Mon, 9 Apr 2018 21:16:50 +0100 Subject: [PATCH 14/56] Fix blog --- docs/_data/links.json | 4 + docs/_data/meta.json | 4 +- docs/_includes/blog-hero.html | 45 +++-- docs/_includes/components/breadcrumb.html | 36 ++++ docs/_includes/components/links.html | 9 +- docs/_includes/navbar.html | 2 + docs/_layouts/documentation.html | 43 +---- docs/_layouts/post.html | 125 +++++++++----- docs/_posts/2017-03-10-new-field-element.md | 1 + docs/_posts/2017-08-03-list-of-tags.md | 4 +- ...2017-10-09-roses-are-red-links-are-blue.md | 6 +- docs/_posts/2017-11-14-bulma-is-on-patreon.md | 2 +- ...018-01-18-bulma-supports-font-awesome-5.md | 2 +- docs/_sass/specific.sass | 103 +++-------- docs/blog.html | 71 +++++--- docs/css/bulma-docs.css | 161 +++--------------- docs/documentation/elements/icon.html | 1 + 17 files changed, 262 insertions(+), 357 deletions(-) create mode 100644 docs/_includes/components/breadcrumb.html diff --git a/docs/_data/links.json b/docs/_data/links.json index 944d1085..470ee9d1 100644 --- a/docs/_data/links.json +++ b/docs/_data/links.json @@ -318,6 +318,10 @@ "name": "Tabs", "subtitle": "Simple responsive horizontal navigation tabs, with different styles", "path": "/documentation/components/tabs" + }, + "blog": { + "name": "Blog", + "path": "/blog" } }, "categories": { diff --git a/docs/_data/meta.json b/docs/_data/meta.json index a171d2d6..83273d3c 100644 --- a/docs/_data/meta.json +++ b/docs/_data/meta.json @@ -1,7 +1,7 @@ { "title": "Bulma: a modern CSS framework based on Flexbox", "description": "Bulma is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.", - "documentation": "/documentation/overview/start/", + "documentation": "/documentation", "download": "https://github.com/jgthms/bulma/releases/download/0.6.2/bulma-0.6.2.zip", "github": "https://github.com/jgthms/bulma", "twitter": "https://twitter.com/jgthms", @@ -9,4 +9,4 @@ "book_url": "https://bleedingedgepress.com/creating-interfaces-bulma/", "book_amazon": "https://www.amazon.com/Creating-Interfaces-Bulma-Jeremy-Thomas-ebook/dp/B079M1BJG4/", "book_sample": "http://www.bleedingedgepress.com/book_excerpts/01E9D1/creating_interfaces_with_bulma_sample.pdf" -} \ No newline at end of file +} diff --git a/docs/_includes/blog-hero.html b/docs/_includes/blog-hero.html index 3a49c3c5..b43648da 100644 --- a/docs/_includes/blog-hero.html +++ b/docs/_includes/blog-hero.html @@ -1,27 +1,20 @@ -{% include navbar.html id="BlogHero" %} - -
    -
    -
    -
    -
    -

    - Blog -

    -

    - Stay updated about new features, bug fixes, and releases -

    - - - - - Subscribe - -
    -
    - {% include carbon.html %} -
    -
    -
    +
    +
    +

    + Blog +

    +

    + Stay updated about new features, bug fixes, and releases +

    + + + + + Subscribe +
    -
    + +
    + {% include carbon.html %} +
    + diff --git a/docs/_includes/components/breadcrumb.html b/docs/_includes/components/breadcrumb.html new file mode 100644 index 00000000..26a63db2 --- /dev/null +++ b/docs/_includes/components/breadcrumb.html @@ -0,0 +1,36 @@ +
    + + + {% if previous_link or next_link %} + + {% endif %} +
    diff --git a/docs/_includes/components/links.html b/docs/_includes/components/links.html index 0bb3ddbd..35363a5f 100644 --- a/docs/_includes/components/links.html +++ b/docs/_includes/components/links.html @@ -14,8 +14,13 @@ {% assign link = site.data.links.by_id[thingy] %} {% endif %} - - + + {% endfor %} diff --git a/docs/_includes/navbar.html b/docs/_includes/navbar.html index c4493e24..ef57d4ac 100644 --- a/docs/_includes/navbar.html +++ b/docs/_includes/navbar.html @@ -1,4 +1,5 @@ diff --git a/docs/_layouts/documentation.html b/docs/_layouts/documentation.html index 3689cdb2..89b8dea4 100644 --- a/docs/_layouts/documentation.html +++ b/docs/_layouts/documentation.html @@ -31,42 +31,7 @@ route: documentation
    -
    - - - {% if previous_link or next_link %} - - {% endif %} -
    + {% include components/breadcrumb.html %}
    @@ -74,10 +39,10 @@ route: documentation {{ page.title }}

    - {% if current_link.subtitle %} - {{ current_link.subtitle }} - {% else %} + {% if page.subtitle %} {{ page.subtitle }} + {% else %} + {{ current_link.subtitle }} {% endif %}

    {% if page.meta %} diff --git a/docs/_layouts/post.html b/docs/_layouts/post.html index e9a0c648..188b020f 100644 --- a/docs/_layouts/post.html +++ b/docs/_layouts/post.html @@ -1,51 +1,96 @@ --- layout: default route: blog +breadcrumb: +- home +- blog --- -{% include navbar.html id="BlogHero" %} +{% include navbar.html id="Blog" %} -
    - - - - - -
    +
    +
    +
    +
    +
    +
    + -
    -
    -
    -
    -

    - Back to Blog home -

    -

    - {{ page.title }} -

    - -
    -
    - {{ content }} + {% if page.previous.url or page.next.url %} + + {% endif %} +
    + + +
    +
    +

    + {{ page.title }} +

    +

    + {{ page.date | date_to_string }} +

    +
    + +
    + {% include carbon.html %} +
    +
    + +
    +
    + {{ content }} +
    -
    + +
    -
    +
    diff --git a/docs/_posts/2017-03-10-new-field-element.md b/docs/_posts/2017-03-10-new-field-element.md index f01ab647..75cf7dc3 100644 --- a/docs/_posts/2017-03-10-new-field-element.md +++ b/docs/_posts/2017-03-10-new-field-element.md @@ -6,6 +6,7 @@ introduction: "

    The .control element has been a very versatile co color: "success" name: "Field element" icon: "square" +icon_regular: true --- **TL;DR: there's a new `.field` container, and `.control` has been re-purposed.** diff --git a/docs/_posts/2017-08-03-list-of-tags.md b/docs/_posts/2017-08-03-list-of-tags.md index 4806fb49..88794dcc 100644 --- a/docs/_posts/2017-08-03-list-of-tags.md +++ b/docs/_posts/2017-08-03-list-of-tags.md @@ -2,7 +2,7 @@ layout: post title: "New feature: list of tags" introduction: "What's better than one tag? Multiple tags!" -color: "orange" +color: "success" name: "List of tags" icon: "tag" --- @@ -17,4 +17,4 @@ A tag rarely comes on its own though, so Bulma now supports [list of tags](/docu -As a **bonus**, there is also a [delete tag](/documentation/elements/tag/#combinations) available! \ No newline at end of file +As a **bonus**, there is also a [delete tag](/documentation/elements/tag/#combinations) available! diff --git a/docs/_posts/2017-10-09-roses-are-red-links-are-blue.md b/docs/_posts/2017-10-09-roses-are-red-links-are-blue.md index 2e3afbc8..223e7852 100644 --- a/docs/_posts/2017-10-09-roses-are-red-links-are-blue.md +++ b/docs/_posts/2017-10-09-roses-are-red-links-are-blue.md @@ -3,8 +3,8 @@ layout: post title: "Roses are red – Links are blue" introduction: "What's better than one tag? Multiple tags!" color: "link" -name: "Roses are red
    Links are blue" -icon: "tag" +name: "Roses are red and links are blue" +icon: "link" --- By default, a browser will display links in blue. Bulma has up until now used the `$primary` color as the `$link` color: @@ -89,4 +89,4 @@ If you want to use the `$primary` color for your links, just **customize** your $link: $primary !default $link-invert: $primary-invert !default $link-focus-border: $primary !default -``` \ No newline at end of file +``` diff --git a/docs/_posts/2017-11-14-bulma-is-on-patreon.md b/docs/_posts/2017-11-14-bulma-is-on-patreon.md index b57b61ef..6c75c269 100644 --- a/docs/_posts/2017-11-14-bulma-is-on-patreon.md +++ b/docs/_posts/2017-11-14-bulma-is-on-patreon.md @@ -2,7 +2,7 @@ title: "Bulma is on Patreon!" layout: post introduction: "Support Bulma's future" -color: "primary" +color: "patreon" name: "Bulma on Patreon" icon: "patreon" icon_brand: true diff --git a/docs/_posts/2018-01-18-bulma-supports-font-awesome-5.md b/docs/_posts/2018-01-18-bulma-supports-font-awesome-5.md index cf4ca5cb..59ad057c 100644 --- a/docs/_posts/2018-01-18-bulma-supports-font-awesome-5.md +++ b/docs/_posts/2018-01-18-bulma-supports-font-awesome-5.md @@ -4,7 +4,7 @@ layout: post introduction: "No change required!" color: "info" name: "Font Awesome 5" -icon: "font-awesome-alt" +icon: "font-awesome" icon_brand: true --- diff --git a/docs/_sass/specific.sass b/docs/_sass/specific.sass index f557a5f0..89bbf036 100644 --- a/docs/_sass/specific.sass +++ b/docs/_sass/specific.sass @@ -11,16 +11,29 @@ font-weight: $weight-semibold &:hover background-color: $white-bis + &.bd-is-post + padding-left: 5rem .bd-link-name + line-height: 1.25 + margin-bottom: 0.25em position: relative + +.bd-link-counter + color: $link + counter-increment: bd-links + font-weight: $weight-normal + position: absolute + right: calc(100% + 0.625em) &::before - color: $link - counter-increment: bd-links content: counter(bd-links) - font-weight: $weight-normal - position: absolute - right: calc(100% + 0.625em) + +.bd-link-icon + font-size: 2rem + position: absolute + right: calc(100% + 0.5em) + text-align: center + width: 1.5em +desktop .bd-links @@ -162,83 +175,11 @@ $navbar-items: ("documentation": $primary, "templates": $info, "videos": $succes .has-text-orange color: $orange !important -.bd-article-image - background-color: $primary - display: block - height: 240px - margin-left: auto - margin-right: auto - overflow: hidden - position: relative - text-align: center - @each $name, $pair in $colors - $color: nth($pair, 1) - &.is-#{$name} - background-color: $color - &.is-bootstrap - background-color: $bootstrap - &.is-orange - background-color: $orange - &:hover - .bd-article-overlay - opacity: 0.25 - .bd-article-icon - transform: scale(1.4) - .bd-article-date - transform: scale(0.9) - .bd-article-title - transform: scale(1.1) - &.is-single - margin-bottom: 2rem - width: 100% - &.is-share - height: 315px - margin: 2rem auto - width: 600px +.has-text-bootstrap + color: $bootstrap !important -.bd-article-overlay - +overlay - background-color: $black - opacity: 0 - transition-duration: $speed - transition-property: opacity - transition-timing-function: $easing - -.bd-article-icon, -.bd-article-info - +overlay - align-items: center - display: flex - justify-content: center - -.bd-article-icon, -.bd-article-date, -.bd-article-title - transition-duration: $speed - transition-property: transform - transition-timing-function: $easing - -.bd-article-icon - color: $black - font-size: 56px - opacity: 0.25 - & > span - display: block - -.bd-article-info - padding: 20px - -.bd-article-date - color: rgba(#000, 0.5) - display: block - -.bd-article-title - color: $white - display: block - font-size: 2.5rem - font-weight: $weight-bold - line-height: 1.25 - padding: 0 20px +.has-text-patreon + color: $patreon !important .bd-emoji margin-right: 0.5em diff --git a/docs/blog.html b/docs/blog.html index e4cd4136..fe865409 100644 --- a/docs/blog.html +++ b/docs/blog.html @@ -1,33 +1,58 @@ --- layout: default route: blog +breadcrumb: +- home +- blog --- -{% include blog-hero.html %} +{% include navbar.html id="Blog" %} -

    - +
    - + diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 30b901fc..bd49c968 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -130,8 +130,7 @@ width: 1em; } -.is-overlay, .image.is-square img, .image.is-1by1 img, .image.is-5by4 img, .image.is-4by3 img, .image.is-3by2 img, .image.is-5by3 img, .image.is-16by9 img, .image.is-2by1 img, .image.is-3by1 img, .image.is-4by5 img, .image.is-3by4 img, .image.is-2by3 img, .image.is-3by5 img, .image.is-9by16 img, .image.is-1by2 img, .image.is-1by3 img, .modal, .modal-background, .hero-video, .bd-category-toggle, #carbonads .carbon-wrap:hover .carbon-img::after, .intro-spinner, .intro-shadow, .bd-article-overlay, .bd-article-icon, -.bd-article-info, .bd-structure-item::before, .bd-structure-item::after, .highlight .bd-show, .bd-banner-background, .bd-book-pattern::before, +.is-overlay, .image.is-square img, .image.is-1by1 img, .image.is-5by4 img, .image.is-4by3 img, .image.is-3by2 img, .image.is-5by3 img, .image.is-16by9 img, .image.is-2by1 img, .image.is-3by1 img, .image.is-4by5 img, .image.is-3by4 img, .image.is-2by3 img, .image.is-3by5 img, .image.is-9by16 img, .image.is-1by2 img, .image.is-1by3 img, .modal, .modal-background, .hero-video, .bd-category-toggle, #carbonads .carbon-wrap:hover .carbon-img::after, .intro-spinner, .intro-shadow, .bd-structure-item::before, .bd-structure-item::after, .highlight .bd-show, .bd-banner-background, .bd-book-pattern::before, .bd-book-modal-column.bd-is-cover::before, .bd-book-pattern, .bd-book-modal-background { bottom: 0; left: 0; @@ -10538,19 +10537,36 @@ svg { background-color: #fafafa; } +.bd-link.bd-is-post { + padding-left: 5rem; +} + .bd-link-name { + line-height: 1.25; + margin-bottom: 0.25em; position: relative; } -.bd-link-name::before { +.bd-link-counter { color: #3273dc; counter-increment: bd-links; - content: counter(bd-links); font-weight: 400; position: absolute; right: calc(100% + 0.625em); } +.bd-link-counter::before { + content: counter(bd-links); +} + +.bd-link-icon { + font-size: 2rem; + position: absolute; + right: calc(100% + 0.5em); + text-align: center; + width: 1.5em; +} + @media screen and (min-width: 1088px) { .bd-links { display: flex; @@ -10815,141 +10831,12 @@ svg { color: #ff470f !important; } -.bd-article-image { - background-color: #00d1b2; - display: block; - height: 240px; - margin-left: auto; - margin-right: auto; - overflow: hidden; - position: relative; - text-align: center; +.has-text-bootstrap { + color: #6f5499 !important; } -.bd-article-image.is-white { - background-color: white; -} - -.bd-article-image.is-black { - background-color: #0a0a0a; -} - -.bd-article-image.is-light { - background-color: whitesmoke; -} - -.bd-article-image.is-dark { - background-color: #363636; -} - -.bd-article-image.is-primary { - background-color: #00d1b2; -} - -.bd-article-image.is-link { - background-color: #3273dc; -} - -.bd-article-image.is-info { - background-color: #209cee; -} - -.bd-article-image.is-success { - background-color: #23d160; -} - -.bd-article-image.is-warning { - background-color: #ffdd57; -} - -.bd-article-image.is-danger { - background-color: #ff3860; -} - -.bd-article-image.is-bootstrap { - background-color: #6f5499; -} - -.bd-article-image.is-orange { - background-color: #ff470f; -} - -.bd-article-image:hover .bd-article-overlay { - opacity: 0.25; -} - -.bd-article-image:hover .bd-article-icon { - transform: scale(1.4); -} - -.bd-article-image:hover .bd-article-date { - transform: scale(0.9); -} - -.bd-article-image:hover .bd-article-title { - transform: scale(1.1); -} - -.bd-article-image.is-single { - margin-bottom: 2rem; - width: 100%; -} - -.bd-article-image.is-share { - height: 315px; - margin: 2rem auto; - width: 600px; -} - -.bd-article-overlay { - background-color: #0a0a0a; - opacity: 0; - transition-duration: 86ms; - transition-property: opacity; - transition-timing-function: ease-out; -} - -.bd-article-icon, -.bd-article-info { - align-items: center; - display: flex; - justify-content: center; -} - -.bd-article-icon, -.bd-article-date, -.bd-article-title { - transition-duration: 86ms; - transition-property: transform; - transition-timing-function: ease-out; -} - -.bd-article-icon { - color: #0a0a0a; - font-size: 56px; - opacity: 0.25; -} - -.bd-article-icon > span { - display: block; -} - -.bd-article-info { - padding: 20px; -} - -.bd-article-date { - color: rgba(0, 0, 0, 0.5); - display: block; -} - -.bd-article-title { - color: white; - display: block; - font-size: 2.5rem; - font-weight: 700; - line-height: 1.25; - padding: 0 20px; +.has-text-patreon { + color: #f96854 !important; } .bd-emoji { diff --git a/docs/documentation/elements/icon.html b/docs/documentation/elements/icon.html index d7deafa7..c5ee6ab8 100644 --- a/docs/documentation/elements/icon.html +++ b/docs/documentation/elements/icon.html @@ -1,5 +1,6 @@ --- title: Icon +subtitle: "Bulma is compatible with all icon font libraries: Font Awesome 5, Font Awesome 4, Material Design Icons, Open Iconic, Ionicons etc." fontawesome4: true iconic: true ionicons: true From e8d4efb2745dddfd5a2523606c60bacaf38fb8f5 Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Mon, 9 Apr 2018 22:25:26 +0100 Subject: [PATCH 15/56] Organize partials --- docs/_data/links.json | 8 + docs/_includes/blog-hero.html | 20 - docs/_includes/{ => book}/book-banner.html | 6 +- docs/_includes/{ => book}/book-content.html | 2 +- docs/_includes/{ => book}/book-cover.html | 0 docs/_includes/{ => book}/book-modal.html | 6 +- docs/_includes/{ => content}/comparison.html | 0 docs/_includes/{ => content}/klmn.html | 0 docs/_includes/{ => content}/pro.html | 0 docs/_includes/{ => elements}/anchor.html | 0 docs/_includes/{ => elements}/bsa.html | 0 docs/_includes/{ => elements}/carbon.html | 0 docs/_includes/{ => elements}/meta.html | 0 docs/_includes/{ => elements}/patreon.html | 0 docs/_includes/{ => elements}/snippet.html | 0 docs/_includes/{ => elements}/tw.html | 0 docs/_includes/{ => elements}/tws.html | 24 +- docs/_includes/{ => elements}/variables.html | 2 +- docs/_includes/{ => global}/deprecated.html | 0 docs/_includes/{ => global}/footer.html | 12 +- docs/_includes/{ => global}/fortyfour.html | 0 docs/_includes/{ => global}/head.html | 0 docs/_includes/{ => global}/native.html | 0 docs/_includes/{ => global}/navbar.html | 0 docs/_includes/{ => global}/newsletter.html | 0 docs/_includes/{ => global}/scripts.html | 0 docs/_includes/{ => global}/sponsors.html | 0 docs/_includes/header.html | 69 --- docs/_includes/{ => index}/features.html | 0 docs/_includes/index/intro.html | 4 +- docs/_includes/{ => index}/sponsor.html | 0 .../{ => snippets}/getting-started.html | 0 docs/_includes/subnav-columns.html | 24 - docs/_includes/testimonials.html | 41 -- docs/_layouts/default.html | 6 +- docs/_layouts/documentation.html | 6 +- docs/_layouts/post.html | 4 +- docs/_sass/expo.sass | 2 +- docs/_sass/love.sass | 12 - docs/_sass/twitter.sass | 4 +- docs/alternative-to-bootstrap.html | 12 +- docs/backers.html | 4 +- docs/blog.html | 4 +- docs/bulma-start.html | 8 +- docs/css/bulma-docs.css | 16 +- docs/documentation/columns/gap.html | 8 +- docs/documentation/columns/options.html | 4 +- .../documentation/columns/responsiveness.html | 4 +- docs/documentation/columns/sizes.html | 6 +- docs/documentation/components/breadcrumb.html | 32 +- docs/documentation/components/card.html | 2 +- docs/documentation/components/dropdown.html | 10 +- docs/documentation/components/menu.html | 4 +- docs/documentation/components/message.html | 22 +- docs/documentation/components/modal.html | 2 +- docs/documentation/components/navbar.html | 22 +- docs/documentation/components/pagination.html | 22 +- docs/documentation/components/panel.html | 4 +- docs/documentation/components/tabs.html | 46 +- docs/documentation/elements/box.html | 4 +- docs/documentation/elements/button.html | 46 +- docs/documentation/elements/content.html | 6 +- docs/documentation/elements/delete.html | 10 +- docs/documentation/elements/icon.html | 18 +- docs/documentation/elements/image.html | 12 +- docs/documentation/elements/notification.html | 8 +- docs/documentation/elements/progress.html | 12 +- docs/documentation/elements/table.html | 6 +- docs/documentation/elements/tag.html | 12 +- docs/documentation/elements/title.html | 4 +- docs/documentation/form/file.html | 28 +- docs/documentation/form/general.html | 64 +-- docs/documentation/form/input.html | 12 +- docs/documentation/form/select.html | 6 +- docs/documentation/form/textarea.html | 26 +- docs/documentation/grid/columns.html | 16 +- docs/documentation/layout/footer.html | 4 +- docs/documentation/layout/hero.html | 6 +- docs/documentation/layout/level.html | 12 +- docs/documentation/layout/media-object.html | 8 +- docs/documentation/layout/section.html | 2 +- docs/documentation/layout/tiles.html | 12 +- .../modifiers/color-helpers.html | 4 +- .../modifiers/responsive-helpers.html | 421 +++++++++--------- .../modifiers/typography-helpers.html | 14 +- docs/documentation/overview/functions.html | 2 +- .../overview/responsiveness.html | 8 +- docs/documentation/overview/start.html | 8 +- docs/documentation/overview/variables.html | 6 +- docs/expo.html | 136 +++--- docs/extensions.html | 4 +- docs/index.html | 6 +- docs/love.html | 76 ++-- docs/made-with-bulma.html | 8 +- docs/templates.html | 5 - docs/thank-you.html | 2 +- docs/tiles.html | 8 +- 97 files changed, 691 insertions(+), 835 deletions(-) delete mode 100644 docs/_includes/blog-hero.html rename docs/_includes/{ => book}/book-banner.html (74%) rename docs/_includes/{ => book}/book-content.html (98%) rename docs/_includes/{ => book}/book-cover.html (100%) rename docs/_includes/{ => book}/book-modal.html (78%) rename docs/_includes/{ => content}/comparison.html (100%) rename docs/_includes/{ => content}/klmn.html (100%) rename docs/_includes/{ => content}/pro.html (100%) rename docs/_includes/{ => elements}/anchor.html (100%) rename docs/_includes/{ => elements}/bsa.html (100%) rename docs/_includes/{ => elements}/carbon.html (100%) rename docs/_includes/{ => elements}/meta.html (100%) rename docs/_includes/{ => elements}/patreon.html (100%) rename docs/_includes/{ => elements}/snippet.html (100%) rename docs/_includes/{ => elements}/tw.html (100%) rename docs/_includes/{ => elements}/tws.html (67%) rename docs/_includes/{ => elements}/variables.html (97%) rename docs/_includes/{ => global}/deprecated.html (100%) rename docs/_includes/{ => global}/footer.html (94%) rename docs/_includes/{ => global}/fortyfour.html (100%) rename docs/_includes/{ => global}/head.html (100%) rename docs/_includes/{ => global}/native.html (100%) rename docs/_includes/{ => global}/navbar.html (100%) rename docs/_includes/{ => global}/newsletter.html (100%) rename docs/_includes/{ => global}/scripts.html (100%) rename docs/_includes/{ => global}/sponsors.html (100%) delete mode 100644 docs/_includes/header.html rename docs/_includes/{ => index}/features.html (100%) rename docs/_includes/{ => index}/sponsor.html (100%) rename docs/_includes/{ => snippets}/getting-started.html (100%) delete mode 100644 docs/_includes/subnav-columns.html delete mode 100644 docs/_includes/testimonials.html diff --git a/docs/_data/links.json b/docs/_data/links.json index 470ee9d1..c22fd67d 100644 --- a/docs/_data/links.json +++ b/docs/_data/links.json @@ -322,6 +322,14 @@ "blog": { "name": "Blog", "path": "/blog" + }, + "expo": { + "name": "Expo", + "path": "/expo" + }, + "love": { + "name": "Love", + "path": "/love" } }, "categories": { diff --git a/docs/_includes/blog-hero.html b/docs/_includes/blog-hero.html deleted file mode 100644 index b43648da..00000000 --- a/docs/_includes/blog-hero.html +++ /dev/null @@ -1,20 +0,0 @@ -
    -
    -

    - Blog -

    -

    - Stay updated about new features, bug fixes, and releases -

    - - - - - Subscribe - -
    - -
    - {% include carbon.html %} -
    -
    diff --git a/docs/_includes/book-banner.html b/docs/_includes/book/book-banner.html similarity index 74% rename from docs/_includes/book-banner.html rename to docs/_includes/book/book-banner.html index 11234408..1cd99b95 100644 --- a/docs/_includes/book-banner.html +++ b/docs/_includes/book/book-banner.html @@ -4,12 +4,12 @@
    - {% include book-cover.html %} + {% include book/book-cover.html %}
    - {% include book-content.html show_cover=false %} + {% include book/book-content.html show_cover=false %}
    - \ No newline at end of file + diff --git a/docs/_includes/book-content.html b/docs/_includes/book/book-content.html similarity index 98% rename from docs/_includes/book-content.html rename to docs/_includes/book/book-content.html index e6cf82eb..1c9c8db6 100644 --- a/docs/_includes/book-content.html +++ b/docs/_includes/book/book-content.html @@ -7,7 +7,7 @@ {% if include.show_cover %}
    - {% include book-cover.html %} + {% include book/book-cover.html %}
    {% endif %} diff --git a/docs/_includes/book-cover.html b/docs/_includes/book/book-cover.html similarity index 100% rename from docs/_includes/book-cover.html rename to docs/_includes/book/book-cover.html diff --git a/docs/_includes/book-modal.html b/docs/_includes/book/book-modal.html similarity index 78% rename from docs/_includes/book-modal.html rename to docs/_includes/book/book-modal.html index 182ab0bd..a99d164f 100644 --- a/docs/_includes/book-modal.html +++ b/docs/_includes/book/book-modal.html @@ -3,12 +3,12 @@ - \ No newline at end of file + diff --git a/docs/_includes/comparison.html b/docs/_includes/content/comparison.html similarity index 100% rename from docs/_includes/comparison.html rename to docs/_includes/content/comparison.html diff --git a/docs/_includes/klmn.html b/docs/_includes/content/klmn.html similarity index 100% rename from docs/_includes/klmn.html rename to docs/_includes/content/klmn.html diff --git a/docs/_includes/pro.html b/docs/_includes/content/pro.html similarity index 100% rename from docs/_includes/pro.html rename to docs/_includes/content/pro.html diff --git a/docs/_includes/anchor.html b/docs/_includes/elements/anchor.html similarity index 100% rename from docs/_includes/anchor.html rename to docs/_includes/elements/anchor.html diff --git a/docs/_includes/bsa.html b/docs/_includes/elements/bsa.html similarity index 100% rename from docs/_includes/bsa.html rename to docs/_includes/elements/bsa.html diff --git a/docs/_includes/carbon.html b/docs/_includes/elements/carbon.html similarity index 100% rename from docs/_includes/carbon.html rename to docs/_includes/elements/carbon.html diff --git a/docs/_includes/meta.html b/docs/_includes/elements/meta.html similarity index 100% rename from docs/_includes/meta.html rename to docs/_includes/elements/meta.html diff --git a/docs/_includes/patreon.html b/docs/_includes/elements/patreon.html similarity index 100% rename from docs/_includes/patreon.html rename to docs/_includes/elements/patreon.html diff --git a/docs/_includes/snippet.html b/docs/_includes/elements/snippet.html similarity index 100% rename from docs/_includes/snippet.html rename to docs/_includes/elements/snippet.html diff --git a/docs/_includes/tw.html b/docs/_includes/elements/tw.html similarity index 100% rename from docs/_includes/tw.html rename to docs/_includes/elements/tw.html diff --git a/docs/_includes/tws.html b/docs/_includes/elements/tws.html similarity index 67% rename from docs/_includes/tws.html rename to docs/_includes/elements/tws.html index 6aaf83cf..55e5d3cd 100644 --- a/docs/_includes/tws.html +++ b/docs/_includes/elements/tws.html @@ -1,24 +1,24 @@
    - {% assign tweet = site.data.love.tweetsById.868829487072464897 %}{% include tw.html tweet=tweet%} - {% assign tweet = site.data.love.tweetsById.912690697416753152 %}{% include tw.html tweet=tweet%} - {% assign tweet = site.data.love.tweetsById.907551723459416071 %}{% include tw.html tweet=tweet%} - {% assign tweet = site.data.love.tweetsById.834140257054502913 %}{% include tw.html tweet=tweet%} + {% assign tweet = site.data.love.tweetsById.868829487072464897 %}{% include elements/tw.html tweet=tweet%} + {% assign tweet = site.data.love.tweetsById.912690697416753152 %}{% include elements/tw.html tweet=tweet%} + {% assign tweet = site.data.love.tweetsById.907551723459416071 %}{% include elements/tw.html tweet=tweet%} + {% assign tweet = site.data.love.tweetsById.834140257054502913 %}{% include elements/tw.html tweet=tweet%}
    - {% assign tweet = site.data.love.tweetsById.869284735440363520 %}{% include tw.html tweet=tweet%} - {% assign tweet = site.data.love.tweetsById.910956939886043136 %}{% include tw.html tweet=tweet%} - {% assign tweet = site.data.love.tweetsById.860885116909998080 %}{% include tw.html tweet=tweet%} - {% assign tweet = site.data.love.tweetsById.835834634655174658 %}{% include tw.html tweet=tweet%} + {% assign tweet = site.data.love.tweetsById.869284735440363520 %}{% include elements/tw.html tweet=tweet%} + {% assign tweet = site.data.love.tweetsById.910956939886043136 %}{% include elements/tw.html tweet=tweet%} + {% assign tweet = site.data.love.tweetsById.860885116909998080 %}{% include elements/tw.html tweet=tweet%} + {% assign tweet = site.data.love.tweetsById.835834634655174658 %}{% include elements/tw.html tweet=tweet%}
    - {% assign tweet = site.data.love.tweetsById.874925154475929602 %}{% include tw.html tweet=tweet%} - {% assign tweet = site.data.love.tweetsById.915580081938018304 %}{% include tw.html tweet=tweet%} - {% assign tweet = site.data.love.tweetsById.903629781744439297 %}{% include tw.html tweet=tweet%} - {% assign tweet = site.data.love.tweetsById.909653512010833920 %}{% include tw.html tweet=tweet%} + {% assign tweet = site.data.love.tweetsById.874925154475929602 %}{% include elements/tw.html tweet=tweet%} + {% assign tweet = site.data.love.tweetsById.915580081938018304 %}{% include elements/tw.html tweet=tweet%} + {% assign tweet = site.data.love.tweetsById.903629781744439297 %}{% include elements/tw.html tweet=tweet%} + {% assign tweet = site.data.love.tweetsById.909653512010833920 %}{% include elements/tw.html tweet=tweet%}
    diff --git a/docs/_includes/variables.html b/docs/_includes/elements/variables.html similarity index 97% rename from docs/_includes/variables.html rename to docs/_includes/elements/variables.html index de0d3e7a..786164ab 100644 --- a/docs/_includes/variables.html +++ b/docs/_includes/elements/variables.html @@ -24,7 +24,7 @@ {% endcapture %} -{% include anchor.html name=anchor_name %} +{% include elements/anchor.html name=anchor_name %}

    {{ content | strip }}

    diff --git a/docs/_includes/deprecated.html b/docs/_includes/global/deprecated.html similarity index 100% rename from docs/_includes/deprecated.html rename to docs/_includes/global/deprecated.html diff --git a/docs/_includes/footer.html b/docs/_includes/global/footer.html similarity index 94% rename from docs/_includes/footer.html rename to docs/_includes/global/footer.html index bff37d9c..05be9bfd 100644 --- a/docs/_includes/footer.html +++ b/docs/_includes/global/footer.html @@ -1,10 +1,10 @@ -{% include native.html %} +{% include global/native.html %} -{% include book-banner.html %} +{% include book/book-banner.html %} -{% include sponsors.html %} +{% include global/sponsors.html %} -{% include newsletter.html %} +{% include global/newsletter.html %}
    @@ -83,6 +83,6 @@
    -{% include book-modal.html %} +{% include book/book-modal.html %} -{% include scripts.html %} +{% include global/scripts.html %} diff --git a/docs/_includes/fortyfour.html b/docs/_includes/global/fortyfour.html similarity index 100% rename from docs/_includes/fortyfour.html rename to docs/_includes/global/fortyfour.html diff --git a/docs/_includes/head.html b/docs/_includes/global/head.html similarity index 100% rename from docs/_includes/head.html rename to docs/_includes/global/head.html diff --git a/docs/_includes/native.html b/docs/_includes/global/native.html similarity index 100% rename from docs/_includes/native.html rename to docs/_includes/global/native.html diff --git a/docs/_includes/navbar.html b/docs/_includes/global/navbar.html similarity index 100% rename from docs/_includes/navbar.html rename to docs/_includes/global/navbar.html diff --git a/docs/_includes/newsletter.html b/docs/_includes/global/newsletter.html similarity index 100% rename from docs/_includes/newsletter.html rename to docs/_includes/global/newsletter.html diff --git a/docs/_includes/scripts.html b/docs/_includes/global/scripts.html similarity index 100% rename from docs/_includes/scripts.html rename to docs/_includes/global/scripts.html diff --git a/docs/_includes/sponsors.html b/docs/_includes/global/sponsors.html similarity index 100% rename from docs/_includes/sponsors.html rename to docs/_includes/global/sponsors.html diff --git a/docs/_includes/header.html b/docs/_includes/header.html deleted file mode 100644 index fa63e9db..00000000 --- a/docs/_includes/header.html +++ /dev/null @@ -1,69 +0,0 @@ - diff --git a/docs/_includes/features.html b/docs/_includes/index/features.html similarity index 100% rename from docs/_includes/features.html rename to docs/_includes/index/features.html diff --git a/docs/_includes/index/intro.html b/docs/_includes/index/intro.html index cc4b2171..ac46242c 100644 --- a/docs/_includes/index/intro.html +++ b/docs/_includes/index/intro.html @@ -50,10 +50,10 @@
    - {% include sponsor.html %} + {% include index/sponsor.html %}
    - {% include carbon.html %} + {% include elements/carbon.html %}
    diff --git a/docs/_includes/sponsor.html b/docs/_includes/index/sponsor.html similarity index 100% rename from docs/_includes/sponsor.html rename to docs/_includes/index/sponsor.html diff --git a/docs/_includes/getting-started.html b/docs/_includes/snippets/getting-started.html similarity index 100% rename from docs/_includes/getting-started.html rename to docs/_includes/snippets/getting-started.html diff --git a/docs/_includes/subnav-columns.html b/docs/_includes/subnav-columns.html deleted file mode 100644 index 3542fff1..00000000 --- a/docs/_includes/subnav-columns.html +++ /dev/null @@ -1,24 +0,0 @@ - diff --git a/docs/_includes/testimonials.html b/docs/_includes/testimonials.html deleted file mode 100644 index 06707ead..00000000 --- a/docs/_includes/testimonials.html +++ /dev/null @@ -1,41 +0,0 @@ -
    -
    -
    -
    - -
    - -
    - -
    -
    - -
    - - - -
    - -
    - - -
    - -
    -
    -
    - - -
    diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index fdc52d80..fed367e1 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -1,9 +1,9 @@ - {% include head.html %} + {% include global/head.html %} - {% include deprecated.html %} + {% include global/deprecated.html %} {{ content }} - {% include footer.html %} + {% include global/footer.html %} diff --git a/docs/_layouts/documentation.html b/docs/_layouts/documentation.html index 89b8dea4..201633eb 100644 --- a/docs/_layouts/documentation.html +++ b/docs/_layouts/documentation.html @@ -3,7 +3,7 @@ layout: default route: documentation --- -{% include navbar.html id="Documentation" %} +{% include global/navbar.html id="Documentation" %} {% assign current_category = page.doc-tab %} {% assign current_link_id = page.breadcrumb | last %} @@ -47,7 +47,7 @@ route: documentation

    {% if page.meta %} {% - include meta.html + include elements/meta.html colors=page.meta.colors sizes=page.meta.sizes variables=page.meta.variables @@ -57,7 +57,7 @@ route: documentation
    - {% include carbon.html %} + {% include elements/carbon.html %}
    diff --git a/docs/_layouts/post.html b/docs/_layouts/post.html index 188b020f..552e49d7 100644 --- a/docs/_layouts/post.html +++ b/docs/_layouts/post.html @@ -6,7 +6,7 @@ breadcrumb: - blog --- -{% include navbar.html id="Blog" %} +{% include global/navbar.html id="Blog" %}
    @@ -67,7 +67,7 @@ breadcrumb:
    - {% include carbon.html %} + {% include elements/carbon.html %}
    diff --git a/docs/_sass/expo.sass b/docs/_sass/expo.sass index d488fe63..a30f43f4 100644 --- a/docs/_sass/expo.sass +++ b/docs/_sass/expo.sass @@ -1,5 +1,5 @@ .bd-expo - background-color: $background + background-color: $white padding: 1.5rem .bd-website diff --git a/docs/_sass/love.sass b/docs/_sass/love.sass index 7e60de31..f00f585b 100644 --- a/docs/_sass/love.sass +++ b/docs/_sass/love.sass @@ -1,6 +1,3 @@ -.bd-love - background-color: $background - .bd-testimonials background-color: $background @@ -75,14 +72,7 @@ display: flex justify-content: center -// .bd-embrace -// background-color: $background -// border-radius: $radius -// padding: 1.5rem - +mobile - .bd-love - padding: 1.5rem .bd-hug margin: 1.5rem .bd-embrace @@ -95,8 +85,6 @@ margin-top: 0.75rem +tablet - .bd-love - padding: 3rem 1.5rem .bd-embrace align-items: center display: flex diff --git a/docs/_sass/twitter.sass b/docs/_sass/twitter.sass index 0690447b..b837a510 100644 --- a/docs/_sass/twitter.sass +++ b/docs/_sass/twitter.sass @@ -11,8 +11,8 @@ $tw-grey: #697882 .bd-tw background-color: #fff - border: 1px solid #e1e8ed - border-radius: 5px + border: 2px solid #e1e8ed + border-radius: $radius-large color: $tw-grey flex-shrink: 0 font-family: Helvetica, Roboto, "Segoe UI", Calibri, sans-serif diff --git a/docs/alternative-to-bootstrap.html b/docs/alternative-to-bootstrap.html index 85f848e5..8c7a366b 100644 --- a/docs/alternative-to-bootstrap.html +++ b/docs/alternative-to-bootstrap.html @@ -89,7 +89,7 @@ bootstrap: - {% include navbar.html id="Documentation" %} + {% include global/navbar.html id="Documentation" %}
    @@ -105,7 +105,7 @@ bootstrap:

    - {% include carbon.html %} + {% include elements/carbon.html %}
    @@ -135,7 +135,7 @@ bootstrap:
    {% for pro in page.bulma %} {% - include pro.html + include content/pro.html type=pro.type icon=pro.icon icon_brand=pro.icon_brand @@ -156,7 +156,7 @@ bootstrap:
    {% for pro in page.bootstrap %} {% - include pro.html + include content/pro.html type=pro.type icon=pro.icon icon_brand=pro.icon_brand @@ -198,13 +198,13 @@ bootstrap: - {% include comparison.html %} + {% include content/comparison.html %}
    - {% include footer.html %} + {% include global/footer.html %} diff --git a/docs/backers.html b/docs/backers.html index d8fa9762..ff917940 100644 --- a/docs/backers.html +++ b/docs/backers.html @@ -4,7 +4,7 @@ layout: default route: backers --- -{% include navbar.html id="BackersNavbar" %} +{% include global/navbar.html id="BackersNavbar" %}
    @@ -19,7 +19,7 @@ route: backers

    - {% include carbon.html %} + {% include elements/carbon.html %}
    diff --git a/docs/blog.html b/docs/blog.html index fe865409..1576f033 100644 --- a/docs/blog.html +++ b/docs/blog.html @@ -6,7 +6,7 @@ breadcrumb: - blog --- -{% include navbar.html id="Blog" %} +{% include global/navbar.html id="Blog" %}
    @@ -31,7 +31,7 @@ breadcrumb:
    - {% include carbon.html %} + {% include elements/carbon.html %}
    diff --git a/docs/bulma-start.html b/docs/bulma-start.html index ff7d2452..24055c6c 100644 --- a/docs/bulma-start.html +++ b/docs/bulma-start.html @@ -7,7 +7,7 @@ github_url: https://github.com/jgthms/bulma-start npm_url: https://www.npmjs.com/package/bulma-start --- -{% include navbar.html id="BulmaStartHero" %} +{% include global/navbar.html id="BulmaStartHero" %}
    @@ -22,7 +22,7 @@ npm_url: https://www.npmjs.com/package/bulma-start

    - {% include carbon.html %} + {% include elements/carbon.html %}
    @@ -47,7 +47,7 @@ npm_url: https://www.npmjs.com/package/bulma-start - {% include anchor.html name="Install" %} + {% include elements/anchor.html name="Install" %} {% highlight bash %}npm install bulma-start{% endhighlight %} @@ -55,7 +55,7 @@ npm_url: https://www.npmjs.com/package/bulma-start {% highlight bash %}yarn add bulma-start{% endhighlight %} - {% include anchor.html name="What’s included" %} + {% include elements/anchor.html name="What’s included" %}

    The npm dependencies included in package.json are:

    diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index bd49c968..eaa75d87 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -11482,8 +11482,8 @@ html.route-index .hero.is-primary a.column:hover .title strong { .bd-tw { background-color: #fff; - border: 1px solid #e1e8ed; - border-radius: 5px; + border: 2px solid #e1e8ed; + border-radius: 6px; color: #697882; flex-shrink: 0; font-family: Helvetica, Roboto, "Segoe UI", Calibri, sans-serif; @@ -11715,7 +11715,7 @@ html.route-index .hero.is-primary a.column:hover .title strong { } .bd-expo { - background-color: whitesmoke; + background-color: white; padding: 1.5rem; } @@ -11796,10 +11796,6 @@ html.route-index .hero.is-primary a.column:hover .title strong { } } -.bd-love { - background-color: whitesmoke; -} - .bd-testimonials { background-color: whitesmoke; } @@ -11902,9 +11898,6 @@ html.route-index .hero.is-primary a.column:hover .title strong { } @media screen and (max-width: 768px) { - .bd-love { - padding: 1.5rem; - } .bd-hug { margin: 1.5rem; } @@ -11923,9 +11916,6 @@ html.route-index .hero.is-primary a.column:hover .title strong { } @media screen and (min-width: 769px), print { - .bd-love { - padding: 3rem 1.5rem; - } .bd-embrace { align-items: center; display: flex; diff --git a/docs/documentation/columns/gap.html b/docs/documentation/columns/gap.html index 44e9e0bc..3172ffac 100644 --- a/docs/documentation/columns/gap.html +++ b/docs/documentation/columns/gap.html @@ -84,7 +84,7 @@ breadcrumb:
    {% endcapture %} -{% include anchor.html name="Default gap" %} +{% include elements/anchor.html name="Default gap" %}

    @@ -96,7 +96,7 @@ breadcrumb: {{ columns_default_gap }} -{% include anchor.html name="Gapless" %} +{% include elements/anchor.html name="Gapless" %}

    @@ -161,7 +161,7 @@ breadcrumb: {% highlight html %}{{ columns_gapless_multiline }}{% endhighlight %}

    -{% include anchor.html name="Variable gap" %} +{% include elements/anchor.html name="Variable gap" %}
    @@ -198,7 +198,7 @@ breadcrumb:

    -{% include klmn.html %} +{% include content/klmn.html %}
    diff --git a/docs/documentation/columns/options.html b/docs/documentation/columns/options.html index 586ddc3d..b3ae3092 100644 --- a/docs/documentation/columns/options.html +++ b/docs/documentation/columns/options.html @@ -88,7 +88,7 @@ breadcrumb:
    {% endcapture %} -{% include anchor.html name="Multiline" %} +{% include elements/anchor.html name="Multiline" %}

    Whenever you want to start a new line, you can close a columns container and start a new one. But you can also add the is-multiline modifier and add more column elements that would fit in a single row.

    @@ -126,7 +126,7 @@ breadcrumb: {% highlight html %}{{ columns_multiline }}{% endhighlight %} -{% include anchor.html name="Centering columns" %} +{% include elements/anchor.html name="Centering columns" %}

    diff --git a/docs/documentation/columns/responsiveness.html b/docs/documentation/columns/responsiveness.html index 23fdaa73..c4112058 100644 --- a/docs/documentation/columns/responsiveness.html +++ b/docs/documentation/columns/responsiveness.html @@ -42,7 +42,7 @@ breadcrumb:

    {% endcapture %} -{% include anchor.html name="Mobile columns" %} +{% include elements/anchor.html name="Mobile columns" %}

    @@ -101,7 +101,7 @@ breadcrumb: {% highlight html %}{{ columns_desktop }}{% endhighlight %} -{% include anchor.html name="Different column sizes per breakpoint" %} +{% include elements/anchor.html name="Different column sizes per breakpoint" %}

    You can define a column size for each viewport size: mobile, tablet, and desktop.

    diff --git a/docs/documentation/columns/sizes.html b/docs/documentation/columns/sizes.html index 465596dc..bcc2d098 100644 --- a/docs/documentation/columns/sizes.html +++ b/docs/documentation/columns/sizes.html @@ -272,7 +272,7 @@ breadcrumb: {% highlight html %}{{ columns_sizes }}{% endhighlight %}
    -{% include anchor.html name="12 columns system" %} +{% include elements/anchor.html name="12 columns system" %}

    As the grid can be divided into 12 columns, there are size classes for each division:

    @@ -511,7 +511,7 @@ breadcrumb:
    -{% include anchor.html name="Offset" %} +{% include elements/anchor.html name="Offset" %}

    @@ -559,7 +559,7 @@ breadcrumb: {% highlight html %}{{ columns_offset }}{% endhighlight %}

    -{% include anchor.html name="Narrow column" %} +{% include elements/anchor.html name="Narrow column" %}

    If you want a column to only take the space it needs, use the is-narrow modifier. The other column(s) will fill up the remaining space.

    diff --git a/docs/documentation/components/breadcrumb.html b/docs/documentation/components/breadcrumb.html index f001c525..42b4d759 100644 --- a/docs/documentation/components/breadcrumb.html +++ b/docs/documentation/components/breadcrumb.html @@ -170,50 +170,50 @@ meta:

    -{% include snippet.html content=breadcrumb_example horizontal=true clipped=true %} +{% include elements/snippet.html content=breadcrumb_example horizontal=true clipped=true %} -{% include anchor.html name="Alignment" %} +{% include elements/anchor.html name="Alignment" %}

    For alternative alignments, use the is-centered and is-right modifiers on the .breadcrumb container.

    -{% include snippet.html content=breadcrumb_centered_example horizontal=true clipped=true %} +{% include elements/snippet.html content=breadcrumb_centered_example horizontal=true clipped=true %} -{% include snippet.html content=breadcrumb_right_example horizontal=true clipped=true %} +{% include elements/snippet.html content=breadcrumb_right_example horizontal=true clipped=true %} -{% include anchor.html name="Icons" %} +{% include elements/anchor.html name="Icons" %}

    You can use any of the Font Awesome icons.

    -{% include snippet.html content=breadcrumb_icons_example horizontal=true clipped=true %} +{% include elements/snippet.html content=breadcrumb_icons_example horizontal=true clipped=true %} -{% include anchor.html name="Alternative separators" %} +{% include elements/anchor.html name="Alternative separators" %}

    You can choose between 4 additional separators: has-arrow-separator has-bullet-separator has-dot-separator and has-succeeds-separator.

    -{% include snippet.html content=breadcrumb_arrow_example horizontal=true clipped=true %} +{% include elements/snippet.html content=breadcrumb_arrow_example horizontal=true clipped=true %} -{% include snippet.html content=breadcrumb_bullet_example horizontal=true clipped=true %} +{% include elements/snippet.html content=breadcrumb_bullet_example horizontal=true clipped=true %} -{% include snippet.html content=breadcrumb_dot_example horizontal=true clipped=true %} +{% include elements/snippet.html content=breadcrumb_dot_example horizontal=true clipped=true %} -{% include snippet.html content=breadcrumb_succeeds_example horizontal=true clipped=true %} +{% include elements/snippet.html content=breadcrumb_succeeds_example horizontal=true clipped=true %} -{% include anchor.html name="Sizes" %} +{% include elements/anchor.html name="Sizes" %}

    You can choose between 3 additional sizes: is-small is-medium and is-large.

    -{% include snippet.html content=breadcrumb_small_example horizontal=true clipped=true %} +{% include elements/snippet.html content=breadcrumb_small_example horizontal=true clipped=true %} -{% include snippet.html content=breadcrumb_medium_example horizontal=true clipped=true %} +{% include elements/snippet.html content=breadcrumb_medium_example horizontal=true clipped=true %} -{% include snippet.html content=breadcrumb_large_example horizontal=true clipped=true %} +{% include elements/snippet.html content=breadcrumb_large_example horizontal=true clipped=true %} -{% include variables.html type='component' %} +{% include elements/variables.html type='component' %} diff --git a/docs/documentation/components/card.html b/docs/documentation/components/card.html index dbed0f12..7534c9b3 100644 --- a/docs/documentation/components/card.html +++ b/docs/documentation/components/card.html @@ -178,4 +178,4 @@ meta:
    -{% include variables.html type='component' %} +{% include elements/variables.html type='component' %} diff --git a/docs/documentation/components/dropdown.html b/docs/documentation/components/dropdown.html index 76e0909e..9cfb01ad 100644 --- a/docs/documentation/components/dropdown.html +++ b/docs/documentation/components/dropdown.html @@ -238,7 +238,7 @@ meta:
    -{% include anchor.html name="Dropdown content" %} +{% include elements/anchor.html name="Dropdown content" %}

    @@ -255,7 +255,7 @@ meta:

    -{% include anchor.html name="Hoverable or Toggable" %} +{% include elements/anchor.html name="Hoverable or Toggable" %}

    @@ -286,7 +286,7 @@ meta:

    -{% include anchor.html name="Right aligned" %} +{% include elements/anchor.html name="Right aligned" %}

    @@ -314,7 +314,7 @@ meta:

    -{% include anchor.html name="Dropup" %} +{% include elements/anchor.html name="Dropup" %}

    @@ -331,4 +331,4 @@ meta:

    -{% include variables.html type='component' %} +{% include elements/variables.html type='component' %} diff --git a/docs/documentation/components/menu.html b/docs/documentation/components/menu.html index 476de2e4..c5d3c1ce 100644 --- a/docs/documentation/components/menu.html +++ b/docs/documentation/components/menu.html @@ -51,6 +51,6 @@ meta: {% endcapture %} -{% include snippet.html content=menu_example size="one-third" %} +{% include elements/snippet.html content=menu_example size="one-third" %} -{% include variables.html type='component' %} +{% include elements/variables.html type='component' %} diff --git a/docs/documentation/components/message.html b/docs/documentation/components/message.html index 90aa3f05..b595b33d 100644 --- a/docs/documentation/components/message.html +++ b/docs/documentation/components/message.html @@ -117,28 +117,28 @@ meta: {% endfor %} {% endcapture %} -{% include snippet.html content=message_example %} +{% include elements/snippet.html content=message_example %} -{% include anchor.html name="Colors" %} +{% include elements/anchor.html name="Colors" %} -{% include snippet.html content=message_colors_example %} +{% include elements/snippet.html content=message_colors_example %} -{% include anchor.html name="Message body only" %} +{% include elements/anchor.html name="Message body only" %}

    You can omit the message header:

    -{% include snippet.html content=message_body_example %} +{% include elements/snippet.html content=message_body_example %} -{% include anchor.html name="Sizes" %} +{% include elements/anchor.html name="Sizes" %} -{% include snippet.html content=message_small %} +{% include elements/snippet.html content=message_small %} -{% include snippet.html content=message_normal %} +{% include elements/snippet.html content=message_normal %} -{% include snippet.html content=message_medium %} +{% include elements/snippet.html content=message_medium %} -{% include snippet.html content=message_large %} +{% include elements/snippet.html content=message_large %} -{% include variables.html type='component' %} +{% include elements/variables.html type='component' %} diff --git a/docs/documentation/components/modal.html b/docs/documentation/components/modal.html index 9bf7a2f9..0d36d6ad 100644 --- a/docs/documentation/components/modal.html +++ b/docs/documentation/components/modal.html @@ -121,7 +121,7 @@ meta: {% highlight html %}{{ modal_card }}{% endhighlight %} -{% include variables.html type='component' %} +{% include elements/variables.html type='component' %} -{% include anchor.html name="Navbar brand" %} +{% include elements/anchor.html name="Navbar brand" %}

    @@ -622,7 +622,7 @@ document.addEventListener('DOMContentLoaded', function () {

    -{% include anchor.html name="Navbar burger" %} +{% include elements/anchor.html name="Navbar burger" %}

    @@ -654,7 +654,7 @@ document.addEventListener('DOMContentLoaded', function () {

    -{% include anchor.html name="Navbar menu" %} +{% include elements/anchor.html name="Navbar menu" %}

    @@ -705,7 +705,7 @@ document.addEventListener('DOMContentLoaded', function () {

    -{% include anchor.html name="Navbar start and navbar end" %} +{% include elements/anchor.html name="Navbar start and navbar end" %}

    @@ -729,7 +729,7 @@ document.addEventListener('DOMContentLoaded', function () { {% highlight html %}{{navbar_start_end_example}}{% endhighlight %} -{% include anchor.html name="Navbar item" %} +{% include elements/anchor.html name="Navbar item" %}

    @@ -784,7 +784,7 @@ document.addEventListener('DOMContentLoaded', function () {

    -{% include anchor.html name="Transparent navbar" %} +{% include elements/anchor.html name="Transparent navbar" %}

    @@ -792,9 +792,9 @@ document.addEventListener('DOMContentLoaded', function () {

    -{% include snippet.html content=navbar_transparent_example paddingless=true horizontal=true more=true %} +{% include elements/snippet.html content=navbar_transparent_example paddingless=true horizontal=true more=true %} -{% include anchor.html name="Fixed navbar" %} +{% include elements/anchor.html name="Fixed navbar" %} {% include elements/new-tag.html version="0.6.1" %} @@ -822,7 +822,7 @@ document.addEventListener('DOMContentLoaded', function () {
    -{% include anchor.html name="Dropdown menu" %} +{% include elements/anchor.html name="Dropdown menu" %}

    @@ -1048,7 +1048,7 @@ document.addEventListener('DOMContentLoaded', function () { {% highlight html %}{{ navbar_divider_example }}{% endhighlight %} -{% include anchor.html name="Colors" %} +{% include elements/anchor.html name="Colors" %}

    New! @@ -1115,5 +1115,5 @@ document.addEventListener('DOMContentLoaded', function () { {% include examples/navbar-color.html color="white" light=true %}
    -{% include variables.html type='component' %} +{% include elements/variables.html type='component' %} diff --git a/docs/documentation/components/pagination.html b/docs/documentation/components/pagination.html index 7ba7a630..b1dbe225 100644 --- a/docs/documentation/components/pagination.html +++ b/docs/documentation/components/pagination.html @@ -183,7 +183,7 @@ meta:

    -{% include snippet.html content=pagination_example horizontal=true more=true %} +{% include elements/snippet.html content=pagination_example horizontal=true more=true %}

    @@ -191,7 +191,7 @@ meta:

    -{% include snippet.html content=pagination_options_example horizontal=true more=true %} +{% include elements/snippet.html content=pagination_options_example horizontal=true more=true %}

    @@ -199,11 +199,11 @@ meta:

    -{% include snippet.html content=pagination_centered_example horizontal=true more=true %} +{% include elements/snippet.html content=pagination_centered_example horizontal=true more=true %} -{% include snippet.html content=pagination_right_example horizontal=true more=true %} +{% include elements/snippet.html content=pagination_right_example horizontal=true more=true %} -{% include anchor.html name="Styles" %} +{% include elements/anchor.html name="Styles" %} {% include elements/new-tag.html version="0.6.2" %} @@ -211,19 +211,19 @@ meta: Add the is-rounded modifier to have rounded pagination items.

    -{% include snippet.html content=pagination_rounded_example horizontal=true more=true %} +{% include elements/snippet.html content=pagination_rounded_example horizontal=true more=true %} -{% include anchor.html name="Sizes" %} +{% include elements/anchor.html name="Sizes" %}

    The pagination comes in 3 additional sizes.
    You only need to append the modifier is-small, is-medium, or is-large to the pagination component.

    -{% include snippet.html content=pagination_small_example horizontal=true more=true %} +{% include elements/snippet.html content=pagination_small_example horizontal=true more=true %} -{% include snippet.html content=pagination_medium_example horizontal=true more=true %} +{% include elements/snippet.html content=pagination_medium_example horizontal=true more=true %} -{% include snippet.html content=pagination_large_example horizontal=true more=true %} +{% include elements/snippet.html content=pagination_large_example horizontal=true more=true %} -{% include variables.html type='component' %} +{% include elements/variables.html type='component' %} diff --git a/docs/documentation/components/panel.html b/docs/documentation/components/panel.html index 2695e45f..9fa379ad 100644 --- a/docs/documentation/components/panel.html +++ b/docs/documentation/components/panel.html @@ -108,6 +108,6 @@ meta:

    -{% include snippet.html content=panel_example size="one-third" %} +{% include elements/snippet.html content=panel_example size="one-third" %} -{% include variables.html type='component' %} +{% include elements/variables.html type='component' %} diff --git a/docs/documentation/components/tabs.html b/docs/documentation/components/tabs.html index fef4f7d3..afe949c5 100644 --- a/docs/documentation/components/tabs.html +++ b/docs/documentation/components/tabs.html @@ -358,11 +358,11 @@ meta: The default tabs style has a single border at the bottom.

    -{% include snippet.html content=tabs_example horizontal=true %} +{% include elements/snippet.html content=tabs_example horizontal=true %} -{% include snippet.html content=tabs_example horizontal=true more=true %} +{% include elements/snippet.html content=tabs_example horizontal=true more=true %} -{% include anchor.html name="Alignment" %} +{% include elements/anchor.html name="Alignment" %}

    @@ -370,44 +370,44 @@ meta:

    -{% include snippet.html content=tabs_centered_example horizontal=true more=true %} +{% include elements/snippet.html content=tabs_centered_example horizontal=true more=true %} -{% include snippet.html content=tabs_right_example horizontal=true more=true %} +{% include elements/snippet.html content=tabs_right_example horizontal=true more=true %} -{% include anchor.html name="Icons" %} +{% include elements/anchor.html name="Icons" %}

    You can use any of the Font Awesome icons.

    -{% include snippet.html content=tabs_icons_example horizontal=true more=true %} +{% include elements/snippet.html content=tabs_icons_example horizontal=true more=true %} -{% include snippet.html content=tabs_icons_example horizontal=true more=true %} +{% include elements/snippet.html content=tabs_icons_example horizontal=true more=true %} -{% include anchor.html name="Sizes" %} +{% include elements/anchor.html name="Sizes" %}

    You can choose between 3 additional sizes: is-small is-medium and is-large.

    -{% include snippet.html content=tabs_small_example horizontal=true more=true %} +{% include elements/snippet.html content=tabs_small_example horizontal=true more=true %} -{% include snippet.html content=tabs_medium_example horizontal=true more=true %} +{% include elements/snippet.html content=tabs_medium_example horizontal=true more=true %} -{% include snippet.html content=tabs_large_example horizontal=true more=true %} +{% include elements/snippet.html content=tabs_large_example horizontal=true more=true %} -{% include anchor.html name="Styles" %} +{% include elements/anchor.html name="Styles" %}
    If you want a more classic style with borders, just append the is-boxed modifier.
    -{% include snippet.html content=tabs_boxed_example horizontal=true more=true %} +{% include elements/snippet.html content=tabs_boxed_example horizontal=true more=true %}

    If you want mutually exclusive tabs (like radio buttons where clicking one deselects all other ones), use the is-toggle modifier.

    -{% include snippet.html content=tabs_toggle_example horizontal=true more=true %} +{% include elements/snippet.html content=tabs_toggle_example horizontal=true more=true %} {% include elements/new-tag.html version="0.6.2" %} @@ -415,26 +415,26 @@ meta: If you use both is-toggle and is-toggle-rounded, the first and last items will be rounded.

    -{% include snippet.html content=tabs_toggle_rounded_example horizontal=true more=true %} +{% include elements/snippet.html content=tabs_toggle_rounded_example horizontal=true more=true %}

    If you want the tabs to take up the whole width available, use is-fullwidth.

    -{% include snippet.html content=tabs_fullwidth_example horizontal=true more=true %} +{% include elements/snippet.html content=tabs_fullwidth_example horizontal=true more=true %} -{% include anchor.html name="Combining" %} +{% include elements/anchor.html name="Combining" %}

    You can combine different modifiers. For example, you can have centered boxed tabs, or fullwidth toggle ones.

    -{% include snippet.html content=tabs_centered_boxed_example horizontal=true more=true %} +{% include elements/snippet.html content=tabs_centered_boxed_example horizontal=true more=true %} -{% include snippet.html content=tabs_toggle_fullwidth_example horizontal=true more=true %} +{% include elements/snippet.html content=tabs_toggle_fullwidth_example horizontal=true more=true %} -{% include snippet.html content=tabs_centered_boxed_medium_example horizontal=true more=true %} +{% include elements/snippet.html content=tabs_centered_boxed_medium_example horizontal=true more=true %} -{% include snippet.html content=tabs_toggle_fullwidth_large_example horizontal=true more=true %} +{% include elements/snippet.html content=tabs_toggle_fullwidth_large_example horizontal=true more=true %} -{% include variables.html type='component' %} +{% include elements/variables.html type='component' %} diff --git a/docs/documentation/elements/box.html b/docs/documentation/elements/box.html index fc21761a..2368ed41 100644 --- a/docs/documentation/elements/box.html +++ b/docs/documentation/elements/box.html @@ -62,6 +62,6 @@ meta:

    -{% include snippet.html content=box_example more=true %} +{% include elements/snippet.html content=box_example more=true %} -{% include variables.html type='element' %} +{% include elements/variables.html type='element' %} diff --git a/docs/documentation/elements/button.html b/docs/documentation/elements/button.html index da566aec..e57add8d 100644 --- a/docs/documentation/elements/button.html +++ b/docs/documentation/elements/button.html @@ -463,7 +463,7 @@ meta:

    -{% include snippet.html content=button_example %} +{% include elements/snippet.html content=button_example %}

    @@ -485,23 +485,23 @@ meta:

    -{% include snippet.html content=button_tags_example %} +{% include elements/snippet.html content=button_tags_example %} -{% include anchor.html name="Colors" %} +{% include elements/anchor.html name="Colors" %} -{% include snippet.html content=button_colors_a_example %} +{% include elements/snippet.html content=button_colors_a_example %} -{% include snippet.html content=button_colors_b_example %} +{% include elements/snippet.html content=button_colors_b_example %} -{% include anchor.html name="Sizes" %} +{% include elements/anchor.html name="Sizes" %} -{% include snippet.html content=button_sizes_example %} +{% include elements/snippet.html content=button_sizes_example %} -{% include anchor.html name="Styles" %} +{% include elements/anchor.html name="Styles" %}

    Outlined

    -{% include snippet.html content=button_outlined_example %} +{% include elements/snippet.html content=button_outlined_example %}

    Inverted (the text color becomes the background color, and vice-versa)

    @@ -541,23 +541,23 @@ meta: -{% include anchor.html name="States" %} +{% include elements/anchor.html name="States" %}

    Normal

    -{% include snippet.html content=button_normal_example %} +{% include elements/snippet.html content=button_normal_example %}

    Hover

    -{% include snippet.html content=button_hover_example %} +{% include elements/snippet.html content=button_hover_example %}

    Focus

    -{% include snippet.html content=button_focus_example %} +{% include elements/snippet.html content=button_focus_example %}

    Active

    -{% include snippet.html content=button_active_example %} +{% include elements/snippet.html content=button_active_example %}

    Loading

    @@ -617,7 +617,7 @@ meta:

    With Font Awesome icons

    -{% include snippet.html content=button_fa_example clipped=true %} +{% include elements/snippet.html content=button_fa_example clipped=true %}
    @@ -633,31 +633,31 @@ meta:
    -{% include anchor.html name="Button group" %} +{% include elements/anchor.html name="Button group" %}

    If you want to group buttons together on a single line, use the is-grouped modifier on the field container:

    -{% include snippet.html content=button_group_example %} +{% include elements/snippet.html content=button_group_example %} -{% include anchor.html name="Button addons" %} +{% include elements/anchor.html name="Button addons" %}

    If you want to use buttons as addons, use the has-addons modifier on the field container:

    -{% include snippet.html content=button_addons_example %} +{% include elements/snippet.html content=button_addons_example %} -{% include anchor.html name="Button group with addons" %} +{% include elements/anchor.html name="Button group with addons" %}

    You can group together addons as well:

    -{% include snippet.html content=button_group_addons_example %} +{% include elements/snippet.html content=button_group_addons_example %} -{% include anchor.html name="List of buttons" %} +{% include elements/anchor.html name="List of buttons" %} {% include elements/new-tag.html version="0.6.1" %} @@ -775,4 +775,4 @@ meta: -{% include variables.html type='element' %} +{% include elements/variables.html type='element' %} diff --git a/docs/documentation/elements/content.html b/docs/documentation/elements/content.html index 331c5522..675a47e2 100644 --- a/docs/documentation/elements/content.html +++ b/docs/documentation/elements/content.html @@ -123,9 +123,9 @@ meta:

    This content class can be used in any context where you just want to (or can only) write some text. For example, it's used for the paragraph you're currently reading.

    -{% include snippet.html content=content_example %} +{% include elements/snippet.html content=content_example %} -{% include anchor.html name="Sizes" %} +{% include elements/anchor.html name="Sizes" %}

    You can use the is-small, is-medium and is-large modifiers to change the font size.

    @@ -173,4 +173,4 @@ meta:
    -{% include variables.html type='element' %} +{% include elements/variables.html type='element' %} diff --git a/docs/documentation/elements/delete.html b/docs/documentation/elements/delete.html index 3332f9f6..666904d8 100644 --- a/docs/documentation/elements/delete.html +++ b/docs/documentation/elements/delete.html @@ -58,9 +58,9 @@ meta:

    -{% include snippet.html content=cross_example %} +{% include elements/snippet.html content=cross_example %} -{% include anchor.html name="Sizes" %} +{% include elements/anchor.html name="Sizes" %}

    @@ -68,9 +68,9 @@ meta:

    -{% include snippet.html content=cross_sizes_example %} +{% include elements/snippet.html content=cross_sizes_example %} -{% include anchor.html name="Combinations" %} +{% include elements/anchor.html name="Combinations" %}

    @@ -78,4 +78,4 @@ meta:

    -{% include snippet.html content=cross_elements_example %} +{% include elements/snippet.html content=cross_elements_example %} diff --git a/docs/documentation/elements/icon.html b/docs/documentation/elements/icon.html index c5ee6ab8..3ba2ff5b 100644 --- a/docs/documentation/elements/icon.html +++ b/docs/documentation/elements/icon.html @@ -82,7 +82,7 @@ meta:
    - {% include snippet.html content=icon_example %} + {% include elements/snippet.html content=icon_example %}
    @@ -97,7 +97,7 @@ meta: By default, the icon container will take up exactly 1.5rem x 1.5rem. The icon itself is sized accordingly to the icon library you're using. For example, Font Awesome 5 icons will inherit the font size.

    -{% include anchor.html name="Colors" %} +{% include elements/anchor.html name="Colors" %}

    @@ -105,9 +105,9 @@ meta:

    -{% include snippet.html content=icon_color_example %} +{% include elements/snippet.html content=icon_color_example %} -{% include anchor.html name="Sizes" %} +{% include elements/anchor.html name="Sizes" %}

    @@ -283,7 +283,7 @@ meta: -{% include anchor.html name="Font Awesome variations" %} +{% include elements/anchor.html name="Font Awesome variations" %}

    @@ -426,7 +426,7 @@ meta: -{% include anchor.html name="Material Design Icons" %} +{% include elements/anchor.html name="Material Design Icons" %}

    @@ -750,7 +750,7 @@ meta: -{% include anchor.html name="Open Iconic" %} +{% include elements/anchor.html name="Open Iconic" %}

    @@ -848,7 +848,7 @@ meta: -{% include anchor.html name="Ionicons" %} +{% include elements/anchor.html name="Ionicons" %}

    @@ -946,4 +946,4 @@ meta: -{% include variables.html type='element' %} +{% include elements/variables.html type='element' %} diff --git a/docs/documentation/elements/image.html b/docs/documentation/elements/image.html index 92419252..8ed13870 100644 --- a/docs/documentation/elements/image.html +++ b/docs/documentation/elements/image.html @@ -38,9 +38,9 @@ meta:

    Because images can take a few seconds to load (or not at all), use the .image container to specify a precisely sized container so that your layout isn't broken because of image loading or image errors.

    -{% include snippet.html content=image %} +{% include elements/snippet.html content=image %} -{% include anchor.html name="Fixed square images" %} +{% include elements/anchor.html name="Fixed square images" %}

    There are 7 dimensions to choose from, useful for avatars:

    @@ -58,15 +58,15 @@ meta: -{% include anchor.html name="Retina images" %} +{% include elements/anchor.html name="Retina images" %}

    Because the image is fixed in size, you can use an image that is twice as big. So for example, in a 128x128 container, you can use a 256x256 image, but resized to 128x128 pixels.

    -{% include snippet.html content=retina_image %} +{% include elements/snippet.html content=retina_image %} -{% include anchor.html name="Responsive images with ratios" %} +{% include elements/anchor.html name="Responsive images with ratios" %}

    If you don't know the exact dimensions but know the ratio instead, you can use one of the 16 ratio modifiers, which include [common aspect ratios in still photography](https://en.wikipedia.org/wiki/Aspect_ratio_(image)#Still_photography):

    @@ -161,4 +161,4 @@ meta:

    The .image container will take up the whole width while maintaining the perfect ratio.

    -{% include variables.html type='element' %} +{% include elements/variables.html type='element' %} diff --git a/docs/documentation/elements/notification.html b/docs/documentation/elements/notification.html index de251176..d3ceb3b3 100644 --- a/docs/documentation/elements/notification.html +++ b/docs/documentation/elements/notification.html @@ -34,10 +34,10 @@ meta: {% endfor %} {% endcapture %} -{% include snippet.html content=notification %} +{% include elements/snippet.html content=notification %} -{% include anchor.html name="Colors" %} +{% include elements/anchor.html name="Colors" %} -{% include snippet.html content=notification_colors %} +{% include elements/snippet.html content=notification_colors %} -{% include variables.html type='element' %} +{% include elements/variables.html type='element' %} diff --git a/docs/documentation/elements/progress.html b/docs/documentation/elements/progress.html index 51b4bafb..ee0320a2 100644 --- a/docs/documentation/elements/progress.html +++ b/docs/documentation/elements/progress.html @@ -34,14 +34,14 @@ meta: 60% {% endcapture %} -{% include snippet.html content=progress %} +{% include elements/snippet.html content=progress %} -{% include anchor.html name="Colors" %} +{% include elements/anchor.html name="Colors" %} -{% include snippet.html content=progress_colors %} +{% include elements/snippet.html content=progress_colors %} -{% include anchor.html name="Sizes" %} +{% include elements/anchor.html name="Sizes" %} -{% include snippet.html content=progress_sizes %} +{% include elements/snippet.html content=progress_sizes %} -{% include variables.html type='element' %} +{% include elements/variables.html type='element' %} diff --git a/docs/documentation/elements/table.html b/docs/documentation/elements/table.html index 16d64d49..d5b7d4cf 100644 --- a/docs/documentation/elements/table.html +++ b/docs/documentation/elements/table.html @@ -350,9 +350,9 @@ meta:

    -{% include snippet.html content=table_example horizontal=true more=true %} +{% include elements/snippet.html content=table_example horizontal=true more=true %} -{% include anchor.html name="Modifiers" %} +{% include elements/anchor.html name="Modifiers" %}
    @@ -584,4 +584,4 @@ meta:
    -{% include variables.html type='element' %} +{% include elements/variables.html type='element' %} diff --git a/docs/documentation/elements/tag.html b/docs/documentation/elements/tag.html index a130a066..07443454 100644 --- a/docs/documentation/elements/tag.html +++ b/docs/documentation/elements/tag.html @@ -202,7 +202,7 @@ meta:
    -{% include anchor.html name="Colors" %} +{% include elements/anchor.html name="Colors" %}
    @@ -263,7 +263,7 @@ meta:
    -{% include anchor.html name="Sizes" %} +{% include elements/anchor.html name="Sizes" %}
    @@ -286,7 +286,7 @@ meta:
    -{% include anchor.html name="Modifiers" %} +{% include elements/anchor.html name="Modifiers" %}
    @@ -312,7 +312,7 @@ meta:
    -{% include anchor.html name="Combinations" %} +{% include elements/anchor.html name="Combinations" %}
    @@ -343,7 +343,7 @@ meta:
    -{% include anchor.html name="List of tags" %} +{% include elements/anchor.html name="List of tags" %}
    @@ -441,4 +441,4 @@ meta:
    -{% include variables.html type='element' %} +{% include elements/variables.html type='element' %} diff --git a/docs/documentation/elements/title.html b/docs/documentation/elements/title.html index 4a170168..55614e8e 100644 --- a/docs/documentation/elements/title.html +++ b/docs/documentation/elements/title.html @@ -82,7 +82,7 @@ meta:
    -{% include anchor.html name="Sizes" %} +{% include elements/anchor.html name="Sizes" %}
    @@ -174,4 +174,4 @@ meta:
    -{% include variables.html type='element' %} +{% include elements/variables.html type='element' %} diff --git a/docs/documentation/form/file.html b/docs/documentation/form/file.html index 268d6610..ad028553 100644 --- a/docs/documentation/form/file.html +++ b/docs/documentation/form/file.html @@ -572,9 +572,9 @@ meta: -{% include snippet.html content=file %} +{% include elements/snippet.html content=file %} -{% include anchor.html name="Modifiers" %} +{% include elements/anchor.html name="Modifiers" %}
    @@ -656,7 +656,7 @@ meta:
    -{% include anchor.html name="Colors" %} +{% include elements/anchor.html name="Colors" %}

    @@ -671,9 +671,9 @@ meta:

    -{% include snippet.html content=file_colors clipped=true %} +{% include elements/snippet.html content=file_colors clipped=true %} -{% include anchor.html name="Sizes" %} +{% include elements/anchor.html name="Sizes" %}

    @@ -692,15 +692,15 @@ meta:

    -{% include snippet.html content=file_sizes clipped=true %} +{% include elements/snippet.html content=file_sizes clipped=true %} -{% include snippet.html content=file_sizes_name clipped=true %} +{% include elements/snippet.html content=file_sizes_name clipped=true %} -{% include snippet.html content=file_sizes_boxed clipped=true %} +{% include elements/snippet.html content=file_sizes_boxed clipped=true %} -{% include snippet.html content=file_sizes_boxed_name clipped=true %} +{% include elements/snippet.html content=file_sizes_boxed_name clipped=true %} -{% include anchor.html name="Alignment" %} +{% include elements/anchor.html name="Alignment" %}

    @@ -716,11 +716,11 @@ meta:

    -{% include snippet.html content=file_centered %} +{% include elements/snippet.html content=file_centered %} -{% include snippet.html content=file_right %} +{% include elements/snippet.html content=file_right %} -{% include anchor.html name="JavaScript" %} +{% include elements/anchor.html name="JavaScript" %}

    @@ -730,7 +730,7 @@ meta:

    -{% include anchor.html name="Variables" %} +{% include elements/anchor.html name="Variables" %}

    diff --git a/docs/documentation/form/general.html b/docs/documentation/form/general.html index c7da8696..0c68ba33 100644 --- a/docs/documentation/form/general.html +++ b/docs/documentation/form/general.html @@ -816,9 +816,9 @@ variables_form_keys: When combining several controls in a form, use the .field class as a container, to keep the spacing consistent.

    -{% include snippet.html content=example more=true %} +{% include elements/snippet.html content=example more=true %} -{% include anchor.html name="Form field" %} +{% include elements/anchor.html name="Form field" %}

    The field container is a simple container for:

    @@ -829,15 +829,15 @@ variables_form_keys:
    -{% include snippet.html content=field_example %} +{% include elements/snippet.html content=field_example %}

    This container allows form fields to be spaced consistently.

    -{% include snippet.html content=fields_example %} +{% include elements/snippet.html content=fields_example %} -{% include anchor.html name="Form control" %} +{% include elements/anchor.html name="Form control" %}

    The control is a versatile container meant to enhance single form controls. Because it has the same height as a control elements, it can only contain the following elements:

    @@ -849,14 +849,14 @@ variables_form_keys:
    -{% include snippet.html content=control_input_example %} +{% include elements/snippet.html content=control_input_example %} -{% include snippet.html content=control_select_example %} +{% include elements/snippet.html content=control_select_example %} -{% include snippet.html content=control_button_example %} +{% include elements/snippet.html content=control_button_example %} -{% include anchor.html name="With icons" %} +{% include elements/anchor.html name="With icons" %}

    You can append one of 2 modifiers on a control:

    @@ -880,7 +880,7 @@ variables_form_keys:

    The size of the input will define the size of the icon container.

    -{% include snippet.html content=icons_example clipped=true %} +{% include elements/snippet.html content=icons_example clipped=true %}

    @@ -888,7 +888,7 @@ variables_form_keys:

    -{% include snippet.html content=select_icons_example %} +{% include elements/snippet.html content=select_icons_example %}

    @@ -896,21 +896,21 @@ variables_form_keys:

    -{% include snippet.html content=has_icons_small_example %} +{% include elements/snippet.html content=has_icons_small_example %} -{% include snippet.html content=has_icons_normal_example clipped=true %} +{% include elements/snippet.html content=has_icons_normal_example clipped=true %} -{% include snippet.html content=has_icons_medium_example clipped=true %} +{% include elements/snippet.html content=has_icons_medium_example clipped=true %} -{% include snippet.html content=has_icons_large_example clipped=true %} +{% include elements/snippet.html content=has_icons_large_example clipped=true %} -{% include anchor.html name="Form addons" %} +{% include elements/anchor.html name="Form addons" %}

    If you want to attach controls together, use the has-addons modifier on the field container:

    -{% include snippet.html content=addons_example %} +{% include elements/snippet.html content=addons_example %}

    You can attach inputs, buttons, and dropdowns only.

    @@ -920,29 +920,29 @@ variables_form_keys:

    It can be useful to append a static button.

    -{% include snippet.html content=addons_static_example %} +{% include elements/snippet.html content=addons_static_example %}

    Use the is-expanded modifier on the element you want to fill up the remaining space (in this case, the input):

    -{% include snippet.html content=addons_expanded_example horizontal=true more=true %} +{% include elements/snippet.html content=addons_expanded_example horizontal=true more=true %}

    If you want a full width select dropdown, pair control is-expanded with select is-fullwidth.

    -{% include snippet.html content=addons_expanded_fullwidth_example %} +{% include elements/snippet.html content=addons_expanded_fullwidth_example %}

    Use the has-addons-centered or the has-addons-right modifiers to alter the alignment.

    -{% include snippet.html content=addons_center_example %} +{% include elements/snippet.html content=addons_center_example %} -{% include snippet.html content=addons_right_example %} +{% include elements/snippet.html content=addons_right_example %} -{% include anchor.html name="Form group" %} +{% include elements/anchor.html name="Form group" %}

    @@ -950,16 +950,16 @@ variables_form_keys:

    -{% include snippet.html content=group_example %} +{% include elements/snippet.html content=group_example %}
    Use the is-grouped-centered or the is-grouped-right modifiers to alter the alignment.

    -{% include snippet.html content=group_centered_example %} +{% include elements/snippet.html content=group_centered_example %} -{% include snippet.html content=group_right_example %} +{% include elements/snippet.html content=group_right_example %}

    @@ -967,7 +967,7 @@ variables_form_keys:

    -{% include snippet.html content=group_expanded_example %} +{% include elements/snippet.html content=group_expanded_example %}

    @@ -975,7 +975,7 @@ variables_form_keys:

    -{% include snippet.html content=group_multiline_example clipped=true %} +{% include elements/snippet.html content=group_multiline_example clipped=true %}
    @@ -990,7 +990,7 @@ variables_form_keys:
    -{% include anchor.html name="Horizontal form" %} +{% include elements/anchor.html name="Horizontal form" %}

    If you want a horizontal form control, use the is-horizontal modifier on the field container, in which you include:

    @@ -1005,7 +1005,7 @@ variables_form_keys:

    You can use is-grouped or has-addons for the child elements.

    -{% include snippet.html content=horizontal_form_example horizontal=true more=true %} +{% include elements/snippet.html content=horizontal_form_example horizontal=true more=true %}

    @@ -1027,9 +1027,9 @@ variables_form_keys:

    -{% include snippet.html content=field_label_example horizontal=true more=true %} +{% include elements/snippet.html content=field_label_example horizontal=true more=true %} -{% include anchor.html name="Variables" %} +{% include elements/anchor.html name="Variables" %}

    diff --git a/docs/documentation/form/input.html b/docs/documentation/form/input.html index d0248ad5..d32fcc95 100644 --- a/docs/documentation/form/input.html +++ b/docs/documentation/form/input.html @@ -273,7 +273,7 @@ meta:

    -{% include anchor.html name="Colors" %} +{% include elements/anchor.html name="Colors" %}
    @@ -284,7 +284,7 @@ meta:
    -{% include anchor.html name="Sizes" %} +{% include elements/anchor.html name="Sizes" %}
    @@ -295,7 +295,7 @@ meta:
    -{% include anchor.html name="Styles" %} +{% include elements/anchor.html name="Styles" %} {% include elements/new-tag.html version="0.6.2" %} @@ -308,7 +308,7 @@ meta: -{% include anchor.html name="States" %} +{% include elements/anchor.html name="States" %}

    Normal

    @@ -405,7 +405,7 @@ meta: {% highlight html %}{{ static_example }}{% endhighlight %} -{% include anchor.html name="With Font Awesome icons" %} +{% include elements/anchor.html name="With Font Awesome icons" %}

    You can append one of 2 modifiers on a control:

    @@ -478,7 +478,7 @@ meta:
    -{% include anchor.html name="Variables" %} +{% include elements/anchor.html name="Variables" %}

    diff --git a/docs/documentation/form/select.html b/docs/documentation/form/select.html index dd616ad5..dea0d061 100644 --- a/docs/documentation/form/select.html +++ b/docs/documentation/form/select.html @@ -315,7 +315,7 @@ meta:

    -{% include anchor.html name="Colors" %} +{% include elements/anchor.html name="Colors" %}
    @@ -326,7 +326,7 @@ meta:
    -{% include anchor.html name="Styles" %} +{% include elements/anchor.html name="Styles" %} {% include elements/new-tag.html version="0.6.2" %} @@ -339,7 +339,7 @@ meta: -{% include anchor.html name="Sizes" %} +{% include elements/anchor.html name="Sizes" %}
    diff --git a/docs/documentation/form/textarea.html b/docs/documentation/form/textarea.html index bf89339c..6a353ba5 100644 --- a/docs/documentation/form/textarea.html +++ b/docs/documentation/form/textarea.html @@ -132,7 +132,7 @@ meta:
    {% endcapture %} -{% include snippet.html content=textarea_example %} +{% include elements/snippet.html content=textarea_example %}

    @@ -140,33 +140,33 @@ meta:

    -{% include snippet.html content=textarea_rows_example %} +{% include elements/snippet.html content=textarea_rows_example %} -{% include anchor.html name="Colors" %} +{% include elements/anchor.html name="Colors" %} -{% include snippet.html content=colors_example %} +{% include elements/snippet.html content=colors_example %} -{% include anchor.html name="Sizes" %} +{% include elements/anchor.html name="Sizes" %} -{% include snippet.html content=sizes_example %} +{% include elements/snippet.html content=sizes_example %} -{% include anchor.html name="States" %} +{% include elements/anchor.html name="States" %}

    Normal

    -{% include snippet.html content=normal_example %} +{% include elements/snippet.html content=normal_example %}

    Hover

    -{% include snippet.html content=hover_example %} +{% include elements/snippet.html content=hover_example %}

    Focus

    -{% include snippet.html content=focus_example %} +{% include elements/snippet.html content=focus_example %}

    Loading

    -{% include snippet.html content=loading_example %} +{% include elements/snippet.html content=loading_example %}
    @@ -184,7 +184,7 @@ meta:

    Disabled

    -{% include snippet.html content=disabled_example %} +{% include elements/snippet.html content=disabled_example %}

    Readonly

    @@ -199,4 +199,4 @@ meta:

    -{% include snippet.html content=readonly_example %} +{% include elements/snippet.html content=readonly_example %} diff --git a/docs/documentation/grid/columns.html b/docs/documentation/grid/columns.html index 4ccd2441..47e8b946 100644 --- a/docs/documentation/grid/columns.html +++ b/docs/documentation/grid/columns.html @@ -360,7 +360,7 @@ doc-subtab: columns {% highlight html %}{{ columns }}{% endhighlight %} - {% include anchor.html name="Sizes" %} + {% include elements/anchor.html name="Sizes" %}

    If you want to change the size of a single column, you can use one the following classes:

    @@ -685,7 +685,7 @@ doc-subtab: columns
    - {% include anchor.html name="Offset" %} + {% include elements/anchor.html name="Offset" %}

    @@ -722,7 +722,7 @@ doc-subtab: columns {% highlight html %}{{ columns_offset }}{% endhighlight %} - {% include anchor.html name="Centering columns" %} + {% include elements/anchor.html name="Centering columns" %}

    @@ -782,7 +782,7 @@ doc-subtab: columns {% highlight html %}{{ columns_mobile_multiline_centered }}{% endhighlight %} - {% include anchor.html name="Responsiveness" %} + {% include elements/anchor.html name="Responsiveness" %}

    By default, columns are only activated from tablet onwards. This means columns are stacked on top of each other on mobile.

    @@ -857,7 +857,7 @@ doc-subtab: columns
    {% highlight html %}{{ columns_multiple_breakpoints }}{% endhighlight %} - {% include anchor.html name="Nesting" %} + {% include elements/anchor.html name="Nesting" %}

    @@ -918,7 +918,7 @@ doc-subtab: columns {% highlight html %}{{ columns_nesting }}{% endhighlight %} - {% include anchor.html name="Multiline" %} + {% include elements/anchor.html name="Multiline" %}

    Whenever you want to start a new line, you can close a columns container and start a new one. But you can also add the is-multiline modifier and add more column elements that would fit in a single row.

    @@ -955,7 +955,7 @@ doc-subtab: columns {% highlight html %}{{ columns_multiline }}{% endhighlight %} - {% include anchor.html name="Gapless" %} + {% include elements/anchor.html name="Gapless" %}

    If you want to remove the space between the columns, add the is-gapless modifier on the columns container:

    @@ -1018,7 +1018,7 @@ doc-subtab: columns
    {% highlight html %}{{ columns_gapless_multiline }}{% endhighlight %} - {% include anchor.html name="Narrow column" %} + {% include elements/anchor.html name="Narrow column" %}

    If you want a column to only take the space it needs, use the is-narrow modifier. The other column(s) will fill up the remaining space.

    diff --git a/docs/documentation/layout/footer.html b/docs/documentation/layout/footer.html index 4d2d3132..4e840d09 100644 --- a/docs/documentation/layout/footer.html +++ b/docs/documentation/layout/footer.html @@ -27,8 +27,8 @@ breadcrumb: {% include layout/main-close.html %} -{% include snippet.html content=footer_example horizontal=true more=true fullwidth=true %} +{% include elements/snippet.html content=footer_example horizontal=true more=true fullwidth=true %} {% include layout/main-open.html %} -{% include variables.html %} +{% include elements/variables.html %} diff --git a/docs/documentation/layout/hero.html b/docs/documentation/layout/hero.html index 004de36c..197e2946 100644 --- a/docs/documentation/layout/hero.html +++ b/docs/documentation/layout/hero.html @@ -648,9 +648,9 @@ breadcrumb: {% endcapture %}
    - {% include snippet.html content=heroNavbarA horizontal=true more=true %} - {% include snippet.html content=heroNavbarB horizontal=true more=true %} - {% include snippet.html content=heroNavbarC horizontal=true more=true %} + {% include elements/snippet.html content=heroNavbarA horizontal=true more=true %} + {% include elements/snippet.html content=heroNavbarB horizontal=true more=true %} + {% include elements/snippet.html content=heroNavbarC horizontal=true more=true %}
    {% include layout/main-open.html %} diff --git a/docs/documentation/layout/level.html b/docs/documentation/layout/level.html index 2d453639..19124925 100644 --- a/docs/documentation/layout/level.html +++ b/docs/documentation/layout/level.html @@ -185,22 +185,22 @@ breadcrumb:
    -{% include snippet.html content=nav_example horizontal=true more=true %} +{% include elements/snippet.html content=nav_example horizontal=true more=true %} -{% include anchor.html name="Centered level" %} +{% include elements/anchor.html name="Centered level" %}
    If you want a centered level, you can use as many level-item as you want, as long as they are direct children of the level container.
    -{% include snippet.html content=nav_centered_example horizontal=true more=true %} +{% include elements/snippet.html content=nav_centered_example horizontal=true more=true %} -{% include snippet.html content=nav_centered_bis_example horizontal=true more=true %} +{% include elements/snippet.html content=nav_centered_bis_example horizontal=true more=true %} -{% include anchor.html name="Mobile level" %} +{% include elements/anchor.html name="Mobile level" %}
    By default, for space concerns, the level is vertical on mobile. If you want the level to be horizontal on mobile as well, add the is-mobile modifier on the level container.
    -{% include snippet.html content=nav_mobile_example horizontal=true more=true %} +{% include elements/snippet.html content=nav_mobile_example horizontal=true more=true %} diff --git a/docs/documentation/layout/media-object.html b/docs/documentation/layout/media-object.html index 5bd3fb00..ad78477e 100644 --- a/docs/documentation/layout/media-object.html +++ b/docs/documentation/layout/media-object.html @@ -200,18 +200,18 @@ breadcrumb:
    -{% include snippet.html content=media_example horizontal=true more=true %} +{% include elements/snippet.html content=media_example horizontal=true more=true %}

    You can include any other Bulma element, like inputs, textareas, icons, buttons... or even a nav bar.

    -{% include snippet.html content=media_bis_example horizontal=true more=true %} +{% include elements/snippet.html content=media_bis_example horizontal=true more=true %} -{% include anchor.html name="Nesting" %} +{% include elements/anchor.html name="Nesting" %}

    You can nest media objects up to 3 levels deep.

    -{% include snippet.html content=media_nested_example horizontal=true more=true %} +{% include elements/snippet.html content=media_nested_example horizontal=true more=true %} diff --git a/docs/documentation/layout/section.html b/docs/documentation/layout/section.html index ea865f79..393c7620 100644 --- a/docs/documentation/layout/section.html +++ b/docs/documentation/layout/section.html @@ -33,4 +33,4 @@ breadcrumb:

    You can use the modifiers is-medium and is-large to change the spacing.

    -{% include variables.html %} +{% include elements/variables.html %} diff --git a/docs/documentation/layout/tiles.html b/docs/documentation/layout/tiles.html index 1bc38352..dbd3bebb 100644 --- a/docs/documentation/layout/tiles.html +++ b/docs/documentation/layout/tiles.html @@ -440,7 +440,7 @@ tile is-ancestor {% highlight html %}{{ tile_empty }}{% endhighlight %} -{% include anchor.html name="Example" %} +{% include elements/anchor.html name="Example" %}
    @@ -492,7 +492,7 @@ tile is-ancestor {% highlight html %}{{ tile_default }}{% endhighlight %} -{% include anchor.html name="Modifiers" %} +{% include elements/anchor.html name="Modifiers" %}

    The tile element has 16 modifiers:

    @@ -521,7 +521,7 @@ tile is-ancestor
    -{% include anchor.html name="How it works: Nesting" %} +{% include elements/anchor.html name="How it works: Nesting" %}

    Everything is a tile! To create a grid of tiles, you only need to nest tile elements.

    @@ -606,7 +606,7 @@ tile is-ancestor {% highlight html %}{{ tile_lorem }}{% endhighlight %} -{% include anchor.html name="Nesting requirements" %} +{% include elements/anchor.html name="Nesting requirements" %}
    @@ -682,7 +682,7 @@ tile is-ancestor {% highlight html %}{{ tile_any_content }}{% endhighlight %} -{% include anchor.html name="3 columns" %} +{% include elements/anchor.html name="3 columns" %}
    @@ -777,7 +777,7 @@ tile is-ancestor {% highlight html %}{{ tile_3_columns }}{% endhighlight %} -{% include anchor.html name="4 columns" %} +{% include elements/anchor.html name="4 columns" %}
    diff --git a/docs/documentation/modifiers/color-helpers.html b/docs/documentation/modifiers/color-helpers.html index fbd8fb4a..57567feb 100644 --- a/docs/documentation/modifiers/color-helpers.html +++ b/docs/documentation/modifiers/color-helpers.html @@ -10,7 +10,7 @@ breadcrumb: - modifiers-color-helpers --- -{% include anchor.html name="Text color" %} +{% include elements/anchor.html name="Text color" %}

    @@ -52,7 +52,7 @@ breadcrumb: -{% include anchor.html name="Background color" %} +{% include elements/anchor.html name="Background color" %} {% include elements/new-tag.html version="0.6.3" %} diff --git a/docs/documentation/modifiers/responsive-helpers.html b/docs/documentation/modifiers/responsive-helpers.html index 7a2b2977..db580fd0 100644 --- a/docs/documentation/modifiers/responsive-helpers.html +++ b/docs/documentation/modifiers/responsive-helpers.html @@ -1,6 +1,7 @@ --- title: Responsive helpers layout: documentation +hide_categories: true doc-tab: modifiers doc-subtab: responsive-helpers breadcrumb: @@ -57,7 +58,7 @@ breadcrumb: {% endcapture %} -{% include anchor.html name="Show" %} +{% include elements/anchor.html name="Show" %}

    @@ -73,106 +74,114 @@ breadcrumb:

    For example, here's how the is-flex helper works:

    - - {{ thead }} - - - - {{ flex }} - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - - - - {{ unchanged }} - {{ flex }} - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - - - - {{ unchanged }} - {{ unchanged }} - {{ flex }} - {{ unchanged }} - {{ unchanged }} - - - - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - {{ flex }} - {{ unchanged }} - - - - - - - {{ flex }} - {{ flex }} - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - - - - {{ unchanged }} - {{ flex }} - {{ flex }} - {{ flex }} - {{ flex }} - - - - {{ unchanged }} - {{ unchanged }} - {{ flex }} - {{ flex }} - {{ flex }} - - - - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - {{ flex }} - {{ flex }} - - - - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - {{ flex }} - - -
    - is-flex-mobile -
    - is-flex-tablet-only -
    - is-flex-desktop-only -
    - is-flex-widescreen-only -
    -

    Classes to display up to or from a specific breakpoint

    -
    - is-flex-touch -
    - is-flex-tablet -
    - is-flex-desktop -
    - is-flex-widescreen -
    - is-flex-fullhd -
    +{% include layout/main-close.html show_categories=true %} + +
    +
    + + {{ thead }} + + + + {{ flex }} + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + + + + {{ unchanged }} + {{ flex }} + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + + + + {{ unchanged }} + {{ unchanged }} + {{ flex }} + {{ unchanged }} + {{ unchanged }} + + + + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + {{ flex }} + {{ unchanged }} + + + + + + + {{ flex }} + {{ flex }} + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + + + + {{ unchanged }} + {{ flex }} + {{ flex }} + {{ flex }} + {{ flex }} + + + + {{ unchanged }} + {{ unchanged }} + {{ flex }} + {{ flex }} + {{ flex }} + + + + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + {{ flex }} + {{ flex }} + + + + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + {{ flex }} + + +
    + is-flex-mobile +
    + is-flex-tablet-only +
    + is-flex-desktop-only +
    + is-flex-widescreen-only +
    +

    Classes to display up to or from a specific breakpoint

    +
    + is-flex-touch +
    + is-flex-tablet +
    + is-flex-desktop +
    + is-flex-widescreen +
    + is-flex-fullhd +
    +
    +
    + +{% include layout/main-open.html %}

    @@ -180,105 +189,113 @@ breadcrumb:

    -{% include anchor.html name="Hide" %} +{% include elements/anchor.html name="Hide" %} - - {{ thead }} - - - - {{ hidden }} - {{ visible }} - {{ visible }} - {{ visible }} - {{ visible }} - - - - {{ visible }} - {{ hidden }} - {{ visible }} - {{ visible }} - {{ visible }} - - - - {{ visible }} - {{ visible }} - {{ hidden }} - {{ visible }} - {{ visible }} - - - - {{ visible }} - {{ visible }} - {{ visible }} - {{ hidden }} - {{ visible }} - - - - - - - {{ hidden }} - {{ hidden }} - {{ visible }} - {{ visible }} - {{ visible }} - - - - {{ visible }} - {{ hidden }} - {{ hidden }} - {{ hidden }} - {{ hidden }} - - - - {{ visible }} - {{ visible }} - {{ hidden }} - {{ hidden }} - {{ hidden }} - - - - {{ visible }} - {{ visible }} - {{ visible }} - {{ hidden }} - {{ hidden }} - - - - {{ visible }} - {{ visible }} - {{ visible }} - {{ visible }} - {{ hidden }} - - -
    - is-hidden-mobile -
    - is-hidden-tablet-only -
    - is-hidden-desktop-only -
    - is-hidden-widescreen-only -
    -

    Classes to hide up to or from a specific breakpoint

    -
    - is-hidden-touch -
    - is-hidden-tablet -
    - is-hidden-desktop -
    - is-hidden-widescreen -
    - is-hidden-fullhd -
    +{% include layout/main-close.html %} + +
    +
    + + {{ thead }} + + + + {{ hidden }} + {{ visible }} + {{ visible }} + {{ visible }} + {{ visible }} + + + + {{ visible }} + {{ hidden }} + {{ visible }} + {{ visible }} + {{ visible }} + + + + {{ visible }} + {{ visible }} + {{ hidden }} + {{ visible }} + {{ visible }} + + + + {{ visible }} + {{ visible }} + {{ visible }} + {{ hidden }} + {{ visible }} + + + + + + + {{ hidden }} + {{ hidden }} + {{ visible }} + {{ visible }} + {{ visible }} + + + + {{ visible }} + {{ hidden }} + {{ hidden }} + {{ hidden }} + {{ hidden }} + + + + {{ visible }} + {{ visible }} + {{ hidden }} + {{ hidden }} + {{ hidden }} + + + + {{ visible }} + {{ visible }} + {{ visible }} + {{ hidden }} + {{ hidden }} + + + + {{ visible }} + {{ visible }} + {{ visible }} + {{ visible }} + {{ hidden }} + + +
    + is-hidden-mobile +
    + is-hidden-tablet-only +
    + is-hidden-desktop-only +
    + is-hidden-widescreen-only +
    +

    Classes to hide up to or from a specific breakpoint

    +
    + is-hidden-touch +
    + is-hidden-tablet +
    + is-hidden-desktop +
    + is-hidden-widescreen +
    + is-hidden-fullhd +
    +
    +
    + +{% include layout/main-open.html %} diff --git a/docs/documentation/modifiers/typography-helpers.html b/docs/documentation/modifiers/typography-helpers.html index 509097f9..8cd74842 100644 --- a/docs/documentation/modifiers/typography-helpers.html +++ b/docs/documentation/modifiers/typography-helpers.html @@ -55,7 +55,7 @@ breadcrumb: {% endcapture %} -{% include anchor.html name="Size" %} +{% include elements/anchor.html name="Size" %}

    @@ -85,7 +85,7 @@ breadcrumb: -{% include anchor.html name="Responsive size" %} +{% include elements/anchor.html name="Responsive size" %}

    @@ -164,7 +164,7 @@ breadcrumb:

    -{% include anchor.html name="Colors" %} +{% include elements/anchor.html name="Colors" %}

    @@ -206,7 +206,7 @@ breadcrumb: -{% include anchor.html name="Alignment" %} +{% include elements/anchor.html name="Alignment" %}

    @@ -245,7 +245,7 @@ breadcrumb: -{% include anchor.html name="Responsive Alignment" %} +{% include elements/anchor.html name="Responsive Alignment" %}

    @@ -343,7 +343,7 @@ breadcrumb: {% include layout/main-open.html %} -{% include anchor.html name="Text transformation" %} +{% include elements/anchor.html name="Text transformation" %}

    @@ -382,7 +382,7 @@ breadcrumb: -{% include anchor.html name="Text weight" %} +{% include elements/anchor.html name="Text weight" %}

    diff --git a/docs/documentation/overview/functions.html b/docs/documentation/overview/functions.html index 80abc189..596bc1ce 100644 --- a/docs/documentation/overview/functions.html +++ b/docs/documentation/overview/functions.html @@ -19,7 +19,7 @@ breadcrumb:

    -{% include anchor.html name="The findColorInvert() function" %} +{% include elements/anchor.html name="The findColorInvert() function" %}

    The findColorInvert($color) function takes a color as an input, and outputs either transparent black rgba(#000, 0.7) or white #fff:

    diff --git a/docs/documentation/overview/responsiveness.html b/docs/documentation/overview/responsiveness.html index 8c118801..3bffc396 100644 --- a/docs/documentation/overview/responsiveness.html +++ b/docs/documentation/overview/responsiveness.html @@ -24,7 +24,7 @@ $widescreen-enabled: false $fullhd-enabled: false {% endcapture %} -{% include anchor.html name="Vertical by default" %} +{% include elements/anchor.html name="Vertical by default" %}

    @@ -38,7 +38,7 @@ $fullhd-enabled: false

    You can however enforce the horizontal layout for both columns or nav by appending the is-mobile modifier.

    -{% include anchor.html name="Breakpoints" %} +{% include elements/anchor.html name="Breakpoints" %} {% assign variables_file_url = "/blob/master/sass/utilities/initial-variables.sass#L46,L57" | prepend: site.data.meta.github %} {% assign mixins_file_url = "/blob/master/sass/utilities/mixins.sass#L182,L226" | prepend: site.data.meta.github %} @@ -206,7 +206,7 @@ $fullhd-enabled: false -{% include anchor.html name="Disabling breakpoints" %} +{% include elements/anchor.html name="Disabling breakpoints" %} {% include elements/new-tag.html version="0.6.3" %} @@ -220,7 +220,7 @@ $fullhd-enabled: false {% highlight sass %}{{ scss_code }}{% endhighlight %}
    -{% include anchor.html name="Variables" %} +{% include elements/anchor.html name="Variables" %}

    diff --git a/docs/documentation/overview/start.html b/docs/documentation/overview/start.html index e48c93f9..8ad3e9df 100644 --- a/docs/documentation/overview/start.html +++ b/docs/documentation/overview/start.html @@ -77,7 +77,7 @@ breadcrumb:

    -{% include anchor.html name="Code requirements" %} +{% include elements/anchor.html name="Code requirements" %}

    @@ -109,7 +109,7 @@ breadcrumb:

    -{% include anchor.html name="Starter template" %} +{% include elements/anchor.html name="Starter template" %}

    @@ -118,10 +118,10 @@ breadcrumb:

    - {% highlight html %}{% include getting-started.html %}{% endhighlight %} + {% highlight html %}{% include snippets/getting-started.html %}{% endhighlight %}
    -{% include anchor.html name="bulma-start" %} +{% include elements/anchor.html name="bulma-start" %}

    diff --git a/docs/documentation/overview/variables.html b/docs/documentation/overview/variables.html index 7532f723..fb0f9ff1 100644 --- a/docs/documentation/overview/variables.html +++ b/docs/documentation/overview/variables.html @@ -62,7 +62,7 @@ breadcrumb:

    -{% include anchor.html name="Initial variables" %} +{% include elements/anchor.html name="Initial variables" %}

    @@ -94,7 +94,7 @@ breadcrumb: These are variables with a value that references another variable. {% endcapture %} {% - include variables.html + include elements/variables.html anchor_name = 'Derived variables' data = derived_variables custom_message = custom_message @@ -105,7 +105,7 @@ breadcrumb: You can use the following generic variables for general customization. Simply set one or multiple of these variables before importing Bulma. Learn how. {% endcapture %} {% - include variables.html + include elements/variables.html anchor_name = 'Generic variables' tab = 'base' subtab = 'generic' diff --git a/docs/expo.html b/docs/expo.html index 11d56640..350bb265 100644 --- a/docs/expo.html +++ b/docs/expo.html @@ -5,6 +5,9 @@ share_image: "/images/expo/bulma-expo-share.png" share_description: "Get inspired! The Bulma Expo is a curated collection of the most beautiful websites designed with Bulma. It showcases how you can easily customize Bulma for your own personal or business needs." layout: default route: expo +breadcrumb: +- home +- expo other: - name: Apache BookKeeper url: https://lucperkins.github.io/bookkeeper/ @@ -139,76 +142,79 @@ websites:

    {% endcapture %} -{% include navbar.html id="ExpoHero" %} +{% include global/navbar.html id="Expo" %} -
    -
    -
    -
    -
    -

    - Expo -

    -

    - How people used Bulma to design beautiful websites 😍 -

    -
    -
    - {% include carbon.html %} +
    +
    +
    +
    + {% include components/breadcrumb.html %} + +
    +
    +

    + Expo +

    +

    + How people used Bulma to design beautiful websites 😍 +

    +
    + +
    + {% include elements/carbon.html %} +
    +
    + +
    + {{ embrace_expo }} + +
    + {% for website in page.websites %} + {% assign imageName = website.name | slugify %} + {% assign imagePath = "/images/expo/" | prepend: site.url | append: imageName %} + + {% endfor %} +
    + + {{ embrace_expo }}
    -
    - -
    -
    - {{ embrace_expo }} - -
    - {% for website in page.websites %} - {% assign imageName = website.name | slugify %} - {% assign imagePath = "/images/expo/" | prepend: site.url | append: imageName %} - - {% endfor %} -
    - - {{ embrace_expo }} -
    diff --git a/docs/extensions.html b/docs/extensions.html index d38dc1fe..1c23ef5a 100644 --- a/docs/extensions.html +++ b/docs/extensions.html @@ -110,7 +110,7 @@ extensions: height: 469 --- -{% include navbar.html id="Extensions" %} +{% include global/navbar.html id="Extensions" %}
    @@ -125,7 +125,7 @@ extensions:

    - {% include carbon.html %} + {% include elements/carbon.html %}
    diff --git a/docs/index.html b/docs/index.html index 57ce2caa..1882bec7 100644 --- a/docs/index.html +++ b/docs/index.html @@ -4,7 +4,7 @@ route: index fixed_navbar: true --- -{% include navbar.html id="Index" %} +{% include global/navbar.html id="Index" %} {% include index/intro.html %} @@ -52,7 +52,7 @@ fixed_navbar: true
    - {% include tws.html %} + {% include elements/tws.html %}
    @@ -472,7 +472,7 @@ fixed_navbar: true
    -{% include features.html %} +{% include index/features.html %}
    diff --git a/docs/love.html b/docs/love.html index eb02e55f..cf25905f 100644 --- a/docs/love.html +++ b/docs/love.html @@ -2,6 +2,9 @@ fulltitle: Love for Bulma 😍 layout: default route: love +breadcrumb: +- home +- love tweets: - id: "900692286744535041" date: "2:12 PM - 24 Aug 2017" @@ -13,44 +16,47 @@ tweets: retweets: "0" --- -{% include navbar.html id="LoveHero" %} +{% include global/navbar.html id="Love" %} -
    -
    -
    -
    -
    -

    - Love -

    -

    - Happy thoughts from Twitter 😃 -

    -
    -
    - {% include carbon.html %} +
    +
    +
    +
    + {% include components/breadcrumb.html %} + +
    +
    +

    + Love +

    +

    + Happy thoughts from Twitter 😃 +

    +
    + +
    + {% include elements/carbon.html %} +
    +
    + +
    +
    +

    + Are you a Bulma fan too? Show your support! 🤗 +

    +

    + {% include elements/tw-button.html label="Tweet #bulmaio" %} +

    +
    + +
    + {% for tweetId in site.data.love.tweets reversed %} + {% assign tweet = site.data.love.tweetsById[tweetId] %} + {% include elements/tw.html tweet=tweet %} + {% endfor %} +
    -
    - -
    -
    -
    -

    - Are you a Bulma fan too? Show your support! 🤗 -

    -

    - {% include elements/tw-button.html label="Tweet #bulmaio" %} -

    -
    - -
    - {% for tweetId in site.data.love.tweets reversed %} - {% assign tweet = site.data.love.tweetsById[tweetId] %} - {% include tw.html tweet=tweet %} - {% endfor %} -
    -
    diff --git a/docs/made-with-bulma.html b/docs/made-with-bulma.html index 9666ccef..ef52d8a6 100644 --- a/docs/made-with-bulma.html +++ b/docs/made-with-bulma.html @@ -41,7 +41,7 @@ images: {% endcapture %} -{% include navbar.html id="MadeWithBulmaHero" %} +{% include global/navbar.html id="MadeWithBulmaHero" %}
    @@ -56,7 +56,7 @@ images:

    - {% include carbon.html %} + {% include elements/carbon.html %}
    @@ -100,7 +100,7 @@ images: - {% include anchor.html name="Usage" %} + {% include elements/anchor.html name="Usage" %}

    @@ -136,7 +136,7 @@ images:

    - {% include anchor.html name="Badge snippets" %} + {% include elements/anchor.html name="Badge snippets" %}

    diff --git a/docs/templates.html b/docs/templates.html index ed21cadc..8d0ab973 100644 --- a/docs/templates.html +++ b/docs/templates.html @@ -4,11 +4,6 @@ route: templates ---

    -
    -
    - {% include header.html %} -
    -
    diff --git a/docs/thank-you.html b/docs/thank-you.html index e5e75a5e..f085c06d 100644 --- a/docs/thank-you.html +++ b/docs/thank-you.html @@ -4,7 +4,7 @@ layout: default route: index --- -{% include navbar.html id="ThankYou" %} +{% include global/navbar.html id="ThankYou" %}
    diff --git a/docs/tiles.html b/docs/tiles.html index 15720ed5..b2ae139c 100644 --- a/docs/tiles.html +++ b/docs/tiles.html @@ -45,7 +45,7 @@ route: tiles
    - {% include anchor.html name="How it works: Nesting" %} + {% include elements/anchor.html name="How it works: Nesting" %}

    Everything is a tile! To create a grid of tiles, you only need to nest tile elements.

    @@ -203,7 +203,7 @@ route: tiles
    {% endhighlight %} - {% include anchor.html name="Nesting requirements" %} + {% include elements/anchor.html name="Nesting requirements" %}
    @@ -334,7 +334,7 @@ tile is-ancestor
    {% endhighlight %} - {% include anchor.html name="3 columns" %} + {% include elements/anchor.html name="3 columns" %}
    @@ -522,7 +522,7 @@ tile is-ancestor
    {% endhighlight %} - {% include anchor.html name="4 columns" %} + {% include elements/anchor.html name="4 columns" %}
    From f123eb9562ab9b340647c00f626575c696e66525 Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Mon, 9 Apr 2018 23:53:34 +0100 Subject: [PATCH 16/56] Add focus --- docs/_includes/index/focus.html | 63 ++++++++ docs/_includes/index/intro.html | 9 +- docs/_includes/index/sponsor.html | 78 +++++----- docs/_layouts/post.html | 14 ++ docs/_sass/example.sass | 3 +- docs/_sass/index.sass | 29 ++++ docs/_sass/main.sass | 5 +- docs/_sass/specific.sass | 30 ++-- docs/css/bulma-docs.css | 137 ++++++----------- .../modifiers/responsive-helpers.html | 4 +- docs/documentation/modifiers/syntax.html | 138 +++++++++++------- .../modifiers/typography-helpers.html | 4 +- docs/index.html | 43 ------ 13 files changed, 310 insertions(+), 247 deletions(-) create mode 100644 docs/_includes/index/focus.html diff --git a/docs/_includes/index/focus.html b/docs/_includes/index/focus.html new file mode 100644 index 00000000..f987e501 --- /dev/null +++ b/docs/_includes/index/focus.html @@ -0,0 +1,63 @@ + diff --git a/docs/_includes/index/intro.html b/docs/_includes/index/intro.html index ac46242c..61f915f0 100644 --- a/docs/_includes/index/intro.html +++ b/docs/_includes/index/intro.html @@ -48,14 +48,7 @@
    -
    -
    - {% include index/sponsor.html %} -
    -
    - {% include elements/carbon.html %} -
    -
    + {% include index/focus.html %}
    diff --git a/docs/_includes/index/sponsor.html b/docs/_includes/index/sponsor.html index c77a2fc4..7bf9daa3 100644 --- a/docs/_includes/index/sponsor.html +++ b/docs/_includes/index/sponsor.html @@ -1,38 +1,44 @@ -
    -{% highlight html %} - - Button - - - Button - - - Button - - - Button - -{% endhighlight %} -
    + {% highlight html %}{{ button_sizes }}{% endhighlight %} +
    @@ -167,23 +195,35 @@ breadcrumb: Button

    - Button + Button

    - Button + Button

    -{% highlight html %} - - Button - - - Button - - - Button - -{% endhighlight %} -
    + {% highlight html %}{{ button_states }}{% endhighlight %} + + + +
    +
    +
    + As a result, it's very easy to combine modifiers: +
    +
    +
    +

    + Button +

    +

    + Button +

    +

    + Button +

    +
    +
    + {% highlight html %}{{ button_combinations }}{% endhighlight %} +
    diff --git a/docs/documentation/modifiers/typography-helpers.html b/docs/documentation/modifiers/typography-helpers.html index 8cd74842..ebe81459 100644 --- a/docs/documentation/modifiers/typography-helpers.html +++ b/docs/documentation/modifiers/typography-helpers.html @@ -39,7 +39,7 @@ breadcrumb: {% capture size1 %} -

    {{ initial_vars.size-1.value }}

    +

    {{ initial_vars.size-1.value }}

    {% endcapture %} @@ -51,7 +51,7 @@ breadcrumb: {% capture left %} -

    left-aligned

    +

    left-aligned

    {% endcapture %} diff --git a/docs/index.html b/docs/index.html index 1882bec7..17be4190 100644 --- a/docs/index.html +++ b/docs/index.html @@ -8,49 +8,6 @@ fixed_navbar: true {% include index/intro.html %} -
    - -
    -
    {% include elements/tws.html %}
    From 79888359d22443fa6c626ff460b5d0dda963008b Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Tue, 10 Apr 2018 11:45:48 +0100 Subject: [PATCH 17/56] Reorganize index --- docs/_includes/content/klmn.html | 26 +- docs/_includes/global/navbar.html | 4 +- docs/_includes/index/columns.html | 98 ++ docs/_includes/index/fullheight.html | 35 + docs/_includes/index/level.html | 60 + docs/_includes/index/media-object.html | 51 + docs/_includes/index/modifiers.html | 51 + docs/_includes/index/start.html | 19 + docs/_includes/index/tiles.html | 93 ++ docs/_includes/index/tws.html | 3 + docs/_includes/index/usual.html | 12 + docs/_layouts/post.html | 23 +- docs/_sass/example.sass | 5 +- docs/_sass/highlight.sass | 3 +- docs/_sass/route.sass | 8 - docs/_sass/specific.sass | 12 +- docs/bulma-docs.sass | 12 + docs/css/bulma-docs.css | 37 +- docs/documentation/columns/gap.html | 41 +- docs/documentation/columns/options.html | 42 +- .../documentation/columns/responsiveness.html | 26 +- docs/documentation/columns/sizes.html | 192 +-- docs/documentation/elements/tag.html | 2 - docs/documentation/grid/columns.html | 1056 ----------------- docs/documentation/grid/tiles.html | 899 -------------- docs/documentation/layout/container.html | 4 +- docs/documentation/layout/footer.html | 4 +- docs/documentation/layout/hero.html | 4 +- .../modifiers/color-helpers.html | 6 + docs/index.html | 455 +------ 30 files changed, 657 insertions(+), 2626 deletions(-) create mode 100644 docs/_includes/index/columns.html create mode 100644 docs/_includes/index/fullheight.html create mode 100644 docs/_includes/index/level.html create mode 100644 docs/_includes/index/media-object.html create mode 100644 docs/_includes/index/modifiers.html create mode 100644 docs/_includes/index/start.html create mode 100644 docs/_includes/index/tiles.html create mode 100644 docs/_includes/index/tws.html create mode 100644 docs/_includes/index/usual.html delete mode 100644 docs/documentation/grid/columns.html delete mode 100644 docs/documentation/grid/tiles.html diff --git a/docs/_includes/content/klmn.html b/docs/_includes/content/klmn.html index 6fcec764..81c74783 100644 --- a/docs/_includes/content/klmn.html +++ b/docs/_includes/content/klmn.html @@ -19,7 +19,7 @@
    -
    +
    Main
    @@ -27,17 +27,17 @@
    -
    +
    Three columns
    -
    +
    Three columns
    -
    +
    Three columns
    @@ -50,22 +50,22 @@
    -
    +
    2
    -
    +
    3
    -
    +
    4
    -
    +
    5
    @@ -75,22 +75,22 @@
    -
    +
    7
    -
    +
    8
    -
    +
    9
    -
    +
    10
    @@ -100,7 +100,7 @@
    -
    +
    12
    diff --git a/docs/_includes/global/navbar.html b/docs/_includes/global/navbar.html index ef57d4ac..a9a8a959 100644 --- a/docs/_includes/global/navbar.html +++ b/docs/_includes/global/navbar.html @@ -7,7 +7,7 @@ - + @@ -72,7 +72,7 @@ -

    @@ -72,8 +71,12 @@ breadcrumb:

    -
    - {{ content }} +
    +
    +
    + {{ content }} +
    +
    @@ -91,20 +94,6 @@ breadcrumb: {% endif %}
    - -
    diff --git a/docs/_sass/example.sass b/docs/_sass/example.sass index 0b31b5c3..435910f7 100644 --- a/docs/_sass/example.sass +++ b/docs/_sass/example.sass @@ -1,7 +1,7 @@ .bd-example, .bd-structure, .bd-snippet - border: 1px solid $yellow + border: 2px solid $background position: relative &::before background: $yellow @@ -14,6 +14,7 @@ font-weight: bold left: -1px letter-spacing: 1px + margin-left: -1px padding: 3px 5px position: absolute text-transform: uppercase @@ -46,14 +47,12 @@ // Snippet .bd-snippet +block - border: 2px solid $background margin-top: 2rem position: relative &::before content: "Snippet" align-items: stretch display: flex - margin-left: -1px .bd-snippet-preview padding: 1.5rem diff --git a/docs/_sass/highlight.sass b/docs/_sass/highlight.sass index d9576b0d..ff2f896f 100644 --- a/docs/_sass/highlight.sass +++ b/docs/_sass/highlight.sass @@ -2,7 +2,8 @@ background-color: #f5f5f5 color: #586e75 pre - font-size: 12px + font-size: 0.875em + line-height: 1.375 .c color: #93a1a1 .err, diff --git a/docs/_sass/route.sass b/docs/_sass/route.sass index 9b0fa342..baca58a0 100644 --- a/docs/_sass/route.sass +++ b/docs/_sass/route.sass @@ -6,12 +6,6 @@ html.route-index position: relative .title.is-2 a:hover color: $blue - .title.is-2 .icon.is-medium - font-size: 56px - left: -80px - opacity: 0.1 - position: absolute - top: 10px .hero .title.is-2 a color: $white .hero .title.is-2 a:hover @@ -24,5 +18,3 @@ html.route-index @media screen and (max-width: 979px) .title.is-2 a padding-left: 0 - .title.is-2 .icon.is-medium - display: none diff --git a/docs/_sass/specific.sass b/docs/_sass/specific.sass index 7a67a7fc..94983954 100644 --- a/docs/_sass/specific.sass +++ b/docs/_sass/specific.sass @@ -1,3 +1,7 @@ ++selection + background-color: $primary + color: $primary-invert + .bd-links counter-reset: bd-links @@ -196,6 +200,8 @@ $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default .bd-notification background-color: $background border-radius: $radius + color: $text-light + font-weight: $weight-semibold padding: 1.25rem 0 position: relative text-align: center @@ -206,9 +212,11 @@ $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default color: currentColor code, pre - background: $white + background-color: rgba($black, 0.2) + border-radius: $radius + color: $white pre code - background: transparent + background-color: transparent // Colors @each $name, $pair in $colors $color: nth($pair, 1) diff --git a/docs/bulma-docs.sass b/docs/bulma-docs.sass index 3f339667..830f2da2 100644 --- a/docs/bulma-docs.sass +++ b/docs/bulma-docs.sass @@ -15,6 +15,18 @@ $rss: #f26522 $carbon-width: 300px $main-spacing: 3rem +=selection($current-selector: false) + @if $current-selector + &::-moz-selection + @content + &::selection + @content + @else + \::-moz-selection + @content + \::selection + @content + @import "../bulma" @import "./_sass/main" @import "./_sass/highlight" diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 55ade0eb..cc554e99 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -9715,7 +9715,8 @@ label.panel-block:hover { } .highlight pre { - font-size: 12px; + font-size: 0.875em; + line-height: 1.375; } .highlight .c { @@ -10561,6 +10562,16 @@ svg { text-decoration: underline; } +::-moz-selection { + background-color: #00d1b2; + color: #fff; +} + +::selection { + background-color: #00d1b2; + color: #fff; +} + .bd-links { counter-reset: bd-links; } @@ -10810,6 +10821,8 @@ svg { .bd-notification { background-color: whitesmoke; border-radius: 4px; + color: #7a7a7a; + font-weight: 600; padding: 1.25rem 0; position: relative; text-align: center; @@ -10824,11 +10837,13 @@ svg { .bd-notification code, .bd-notification pre { - background: white; + background-color: rgba(10, 10, 10, 0.2); + border-radius: 4px; + color: white; } .bd-notification pre code { - background: transparent; + background-color: transparent; } .bd-notification.is-white { @@ -10896,7 +10911,7 @@ svg { .bd-example, .bd-structure, .bd-snippet { - border: 1px solid #ffdd57; + border: 2px solid whitesmoke; position: relative; } @@ -10913,6 +10928,7 @@ svg { font-weight: bold; left: -1px; letter-spacing: 1px; + margin-left: -1px; padding: 3px 5px; position: absolute; text-transform: uppercase; @@ -10960,7 +10976,6 @@ svg { } .bd-snippet { - border: 2px solid whitesmoke; margin-top: 2rem; position: relative; } @@ -10969,7 +10984,6 @@ svg { content: "Snippet"; align-items: stretch; display: flex; - margin-left: -1px; } .bd-snippet-preview { @@ -11397,14 +11411,6 @@ html.route-index .title.is-2 a:hover { color: #3273dc; } -html.route-index .title.is-2 .icon.is-medium { - font-size: 56px; - left: -80px; - opacity: 0.1; - position: absolute; - top: 10px; -} - html.route-index .hero .title.is-2 a { color: white; } @@ -11426,9 +11432,6 @@ html.route-index .hero.is-primary a.column:hover .title strong { html.route-index .title.is-2 a { padding-left: 0; } - html.route-index .title.is-2 .icon.is-medium { - display: none; - } } .bd-tws-home { diff --git a/docs/documentation/columns/gap.html b/docs/documentation/columns/gap.html index 3172ffac..50c7e44b 100644 --- a/docs/documentation/columns/gap.html +++ b/docs/documentation/columns/gap.html @@ -13,22 +13,22 @@ breadcrumb: {% capture columns_default_gap %}
    -

    +

    Default gap

    -

    +

    Default gap

    -

    +

    Default gap

    -

    +

    Default gap

    @@ -106,16 +106,16 @@ breadcrumb:
    -

    First column

    +

    First column

    -

    Second column

    +

    Second column

    -

    Third column

    +

    Third column

    -

    Fourth column

    +

    Fourth column

    @@ -129,31 +129,31 @@ breadcrumb:
    -

    is-one-quarter

    +

    is-one-quarter

    -

    is-one-quarter

    +

    is-one-quarter

    -

    is-one-quarter

    +

    is-one-quarter

    -

    is-one-quarter

    +

    is-one-quarter

    -

    is-half

    +

    is-half

    -

    is-one-quarter

    +

    is-one-quarter

    -

    is-one-quarter

    +

    is-one-quarter

    -

    is-one-quarter

    +

    is-one-quarter

    -

    Auto

    +

    Auto

    @@ -169,13 +169,6 @@ breadcrumb: Experimental
    - -
    -
    - New - 0.5.2 -
    -
    diff --git a/docs/documentation/columns/options.html b/docs/documentation/columns/options.html index b3ae3092..d82dedb1 100644 --- a/docs/documentation/columns/options.html +++ b/docs/documentation/columns/options.html @@ -45,7 +45,7 @@ breadcrumb: {% capture columns_mobile_centered %}
    -

    +

    is-half
    is-narrow

    @@ -56,31 +56,31 @@ breadcrumb: {% capture columns_mobile_multiline_centered %}
    -

    +

    is-narrow
    First Column

    -

    +

    is-narrow
    Our Second Column

    -

    +

    is-narrow
    Third Column

    -

    +

    is-narrow
    The Fourth Column

    -

    +

    is-narrow
    Fifth Column

    @@ -96,31 +96,31 @@ breadcrumb:
    -

    is-one-quarter

    +

    is-one-quarter

    -

    is-one-quarter

    +

    is-one-quarter

    -

    is-one-quarter

    +

    is-one-quarter

    -

    is-one-quarter

    +

    is-one-quarter

    -

    is-half

    +

    is-half

    -

    is-one-quarter

    +

    is-one-quarter

    -

    is-one-quarter

    +

    is-one-quarter

    -

    is-one-quarter

    +

    is-one-quarter

    -

    Auto

    +

    Auto

    @@ -136,7 +136,7 @@ breadcrumb:
    -

    +

    is-half
    is-narrow

    @@ -153,31 +153,31 @@ breadcrumb:
    -

    +

    is-narrow
    First Column

    -

    +

    is-narrow
    Our Second Column

    -

    +

    is-narrow
    Third Column

    -

    +

    is-narrow
    The Fourth Column

    -

    +

    is-narrow
    Fifth Column

    diff --git a/docs/documentation/columns/responsiveness.html b/docs/documentation/columns/responsiveness.html index c4112058..b04f1e22 100644 --- a/docs/documentation/columns/responsiveness.html +++ b/docs/documentation/columns/responsiveness.html @@ -54,16 +54,16 @@ breadcrumb:
    -

    1

    +

    1

    -

    2

    +

    2

    -

    3

    +

    3

    -

    4

    +

    4

    @@ -86,16 +86,16 @@ breadcrumb:
    -

    1

    +

    1

    -

    2

    +

    2

    -

    3

    +

    3

    -

    4

    +

    4

    @@ -109,23 +109,23 @@ breadcrumb:
    -

    +

    is-half-mobile
    is-one-third-tablet
    is-one-quarter-desktop

    -

    1

    +

    1

    -

    1

    +

    1

    -

    1

    +

    1

    -

    1

    +

    1

    diff --git a/docs/documentation/columns/sizes.html b/docs/documentation/columns/sizes.html index bcc2d098..71bed26c 100644 --- a/docs/documentation/columns/sizes.html +++ b/docs/documentation/columns/sizes.html @@ -144,127 +144,127 @@ breadcrumb:
    -

    +

    is-four-fifths

    -

    Auto

    +

    Auto

    -

    Auto

    +

    Auto

    -

    +

    is-three-quarters

    -

    Auto

    +

    Auto

    -

    Auto

    +

    Auto

    -

    +

    is-two-thirds

    -

    Auto

    +

    Auto

    -

    Auto

    +

    Auto

    -

    +

    is-three-fifths

    -

    Auto

    +

    Auto

    -

    Auto

    +

    Auto

    -

    +

    is-half

    -

    Auto

    +

    Auto

    -

    Auto

    +

    Auto

    -

    +

    is-two-fifths

    -

    Auto

    +

    Auto

    -

    Auto

    +

    Auto

    -

    +

    is-one-third

    -

    Auto

    +

    Auto

    -

    Auto

    +

    Auto

    -

    +

    is-one-quarter

    -

    Auto

    +

    Auto

    -

    Auto

    +

    Auto

    -

    +

    is-one-fifth

    -

    Auto

    +

    Auto

    -

    Auto

    +

    Auto

    @@ -297,217 +297,217 @@ breadcrumb:
    -

    is-2

    +

    is-2

    -

    1

    +

    1

    -

    1

    +

    1

    -

    1

    +

    1

    -

    1

    +

    1

    -

    1

    +

    1

    -

    1

    +

    1

    -

    1

    +

    1

    -

    1

    +

    1

    -

    1

    +

    1

    -

    1

    +

    1

    -

    is-3

    +

    is-3

    -

    1

    +

    1

    -

    1

    +

    1

    -

    1

    +

    1

    -

    1

    +

    1

    -

    1

    +

    1

    -

    1

    +

    1

    -

    1

    +

    1

    -

    1

    +

    1

    -

    1

    +

    1

    -

    is-4

    +

    is-4

    -

    1

    +

    1

    -

    1

    +

    1

    -

    1

    +

    1

    -

    1

    +

    1

    -

    1

    +

    1

    -

    1

    +

    1

    -

    1

    +

    1

    -

    1

    +

    1

    -

    is-5

    +

    is-5

    -

    1

    +

    1

    -

    1

    +

    1

    -

    1

    +

    1

    -

    1

    +

    1

    -

    1

    +

    1

    -

    1

    +

    1

    -

    1

    +

    1

    -

    is-6

    +

    is-6

    -

    1

    +

    1

    -

    1

    +

    1

    -

    1

    +

    1

    -

    1

    +

    1

    -

    1

    +

    1

    -

    1

    +

    1

    -

    is-7

    +

    is-7

    -

    1

    +

    1

    -

    1

    +

    1

    -

    1

    +

    1

    -

    1

    +

    1

    -

    1

    +

    1

    -

    is-8

    +

    is-8

    -

    1

    +

    1

    -

    1

    +

    1

    -

    1

    +

    1

    -

    1

    +

    1

    -

    is-9

    +

    is-9

    -

    1

    +

    1

    -

    1

    +

    1

    -

    1

    +

    1

    -

    is-10

    +

    is-10

    -

    1

    +

    1

    -

    1

    +

    1

    -

    is-11

    +

    is-11

    -

    1

    +

    1

    @@ -521,7 +521,7 @@ breadcrumb:
    -

    +

    is-half
    is-offset-one-quarter

    @@ -530,7 +530,7 @@ breadcrumb:
    -

    +

    is-three-fifths
    is-offset-one-fifth

    @@ -539,7 +539,7 @@ breadcrumb:
    -

    +

    is-4
    is-offset-8

    @@ -548,7 +548,7 @@ breadcrumb:
    -

    +

    is-11
    is-offset-1

    diff --git a/docs/documentation/elements/tag.html b/docs/documentation/elements/tag.html index 07443454..bb925391 100644 --- a/docs/documentation/elements/tag.html +++ b/docs/documentation/elements/tag.html @@ -133,8 +133,6 @@ meta:
    {% endcapture %} -{% include subnav/subnav-elements.html %} - {% capture tags_blog_addons %}
    diff --git a/docs/documentation/grid/columns.html b/docs/documentation/grid/columns.html deleted file mode 100644 index 47e8b946..00000000 --- a/docs/documentation/grid/columns.html +++ /dev/null @@ -1,1056 +0,0 @@ ---- -title: Columns powered by Flexbox -layout: documentation -doc-tab: grid -doc-subtab: columns ---- - - - -{% capture columns %} -
    -
    - First column -
    -
    - Second column -
    -
    - Third column -
    -
    - Fourth column -
    -
    -{% endcapture %} - -{% capture columns_sizes %} -
    -
    -

    - is-four-fifths -

    -
    -
    -

    Auto

    -
    -
    - -
    -
    -

    - is-three-quarters -

    -
    -
    -

    Auto

    -
    -
    -

    Auto

    -
    -
    - -
    -
    -

    - is-two-thirds -

    -
    -
    -

    Auto

    -
    -
    -

    Auto

    -
    -
    - -
    -
    -

    - is-half -

    -
    -
    -

    Auto

    -
    -
    -

    Auto

    -
    -
    - -
    -
    -

    - is-one-third -

    -
    -
    -

    Auto

    -
    -
    -

    Auto

    -
    -
    - -
    -
    -

    - is-one-quarter -

    -
    -
    -

    Auto

    -
    -
    - -
    -
    -

    - is-one-fifth -

    -
    -
    -

    Auto

    -
    -
    -

    Auto

    -
    -
    -

    Auto

    -
    -
    -{% endcapture %} - -{% capture columns_offset %} -
    -
    -
    - -
    -
    -
    - -
    -
    -
    -{% endcapture %} - -{% capture columns_mobile_centered %} -
    -
    -

    - is-half
    - is-narrow -

    -
    -
    -{% endcapture %} - -{% capture columns_mobile_multiline_centered %} -
    -
    -

    - is-narrow
    - First Column -

    -
    -
    -

    - is-narrow
    - Our Second Column -

    -
    -
    -

    - is-narrow
    - Third Column -

    -
    -
    -

    - is-narrow
    - The Fourth Column -

    -
    -
    -

    - is-narrow
    - Fifth Column -

    -
    -
    -{% endcapture %} - -{% capture columns_mobile %} -
    -
    1
    -
    2
    -
    3
    -
    4
    -
    -{% endcapture %} - -{% capture columns_desktop %} -
    -
    1
    -
    2
    -
    3
    -
    4
    -
    -{% endcapture %} - -{% capture columns_multiple_breakpoints %} -
    -
    - is-half-mobile
    - is-one-third-tablet
    - is-one-quarter-desktop -
    -
    1
    -
    1
    -
    1
    -
    1
    -
    -{% endcapture %} - -{% capture columns_nesting %} -
    -
    - First column -
    -
    - First nested column -
    -
    - Second nested column -
    -
    -
    -
    - Second column -
    -
    - 50% -
    -
    - Auto -
    -
    - Auto -
    -
    -
    -
    -{% endcapture %} - -{% capture columns_multiline %} -
    -
    - is-one-quarter -
    -
    - is-one-quarter -
    -
    - is-one-quarter -
    -
    - is-one-quarter -
    -
    - is-half -
    -
    - is-one-quarter -
    -
    - is-one-quarter -
    -
    - Auto -
    -
    -{% endcapture %} - -{% capture columns_gapless %} -
    -
    First column
    -
    Second column
    -
    Third column
    -
    Fourth column
    -
    -{% endcapture %} - -{% capture columns_gapless_multiline %} -
    -
    - is-one-quarter -
    -
    - is-one-quarter -
    -
    - is-one-quarter -
    -
    - is-one-quarter -
    -
    - is-half -
    -
    - is-one-quarter -
    -
    - is-one-quarter -
    -
    - Auto -
    -
    -{% endcapture %} - -{% capture columns_narrow %} -
    -
    -
    -

    Narrow column

    -

    This column is only 200px wide.

    -
    -
    -
    -
    -

    Flexible column

    -

    This column will take up the remaining space available.

    -
    -
    -
    -{% endcapture %} - -{% include subnav/subnav-grid.html %} - -
    -
    -

    Columns

    -

    A simple way to build responsive columns

    -
    -
    -

    To build a grid, just:

    -
      -
    1. Add a columns container
    2. -
    3. Add as many column elements as you want
    4. -
    -

    Each column will have an equal width, no matter the number of columns.

    -
    - -
    -
    -

    First column

    -
    -
    -

    Second column

    -
    -
    -

    Third column

    -
    -
    -

    Fourth column

    -
    -
    - - {% highlight html %}{{ columns }}{% endhighlight %} - - {% include elements/anchor.html name="Sizes" %} - -
    -

    If you want to change the size of a single column, you can use one the following classes:

    -
      -
    • - is-three-quarters -
    • -
    • - is-two-thirds -
    • -
    • - is-half -
    • -
    • - is-one-third -
    • -
    • - is-one-quarter -
    • -
    -

    The other columns will fill up the remaining space automatically.

    -
    -
    -
    -

    - is-three-quarters -

    -
    -
    -

    Auto

    -
    -
    -

    Auto

    -
    -
    -
    -
    -

    - is-two-thirds -

    -
    -
    -

    Auto

    -
    -
    -

    Auto

    -
    -
    -
    -
    -

    - is-half -

    -
    -
    -

    Auto

    -
    -
    -

    Auto

    -
    -
    -
    -
    -

    - is-one-third -

    -
    -
    -

    Auto

    -
    -
    -

    Auto

    -
    -
    -
    -
    -

    - is-one-quarter -

    -
    -
    -

    Auto

    -
    -
    - - {% highlight html %}{{ columns_sizes }}{% endhighlight %} - -

    12 columns

    -
    -

    As the grid can be divided into 12 columns, there are size classes for each division:

    -
      -
    • is-2
    • -
    • is-3
    • -
    • is-4
    • -
    • is-5
    • -
    • is-6
    • -
    • is-7
    • -
    • is-8
    • -
    • is-9
    • -
    • is-10
    • -
    • is-11
    • -
    -
    -
    -

    Naming

    -

    Each modifier class is named after how many columns you want out of 12. So if you want 7 columns out of 12, use is-7.

    -
    - -
    -
    -

    is-2

    -
    -
    -

    1

    -
    -
    -

    1

    -
    -
    -

    1

    -
    -
    -

    1

    -
    -
    -

    1

    -
    -
    -

    1

    -
    -
    -

    1

    -
    -
    -

    1

    -
    -
    -

    1

    -
    -
    -

    1

    -
    -
    -
    -
    -

    is-3

    -
    -
    -

    1

    -
    -
    -

    1

    -
    -
    -

    1

    -
    -
    -

    1

    -
    -
    -

    1

    -
    -
    -

    1

    -
    -
    -

    1

    -
    -
    -

    1

    -
    -
    -

    1

    -
    -
    -
    -
    -

    is-4

    -
    -
    -

    1

    -
    -
    -

    1

    -
    -
    -

    1

    -
    -
    -

    1

    -
    -
    -

    1

    -
    -
    -

    1

    -
    -
    -

    1

    -
    -
    -

    1

    -
    -
    -
    -
    -

    is-5

    -
    -
    -

    1

    -
    -
    -

    1

    -
    -
    -

    1

    -
    -
    -

    1

    -
    -
    -

    1

    -
    -
    -

    1

    -
    -
    -

    1

    -
    -
    -
    -
    -

    is-6

    -
    -
    -

    1

    -
    -
    -

    1

    -
    -
    -

    1

    -
    -
    -

    1

    -
    -
    -

    1

    -
    -
    -

    1

    -
    -
    -
    -
    -

    is-7

    -
    -
    -

    1

    -
    -
    -

    1

    -
    -
    -

    1

    -
    -
    -

    1

    -
    -
    -

    1

    -
    -
    -
    -
    -

    is-8

    -
    -
    -

    1

    -
    -
    -

    1

    -
    -
    -

    1

    -
    -
    -

    1

    -
    -
    -
    -
    -

    is-9

    -
    -
    -

    1

    -
    -
    -

    1

    -
    -
    -

    1

    -
    -
    -
    -
    -

    is-10

    -
    -
    -

    1

    -
    -
    -

    1

    -
    -
    -
    -
    -

    is-11

    -
    -
    -

    1

    -
    -
    - - {% include elements/anchor.html name="Offset" %} - -
    -

    - While you can use empty columns (like <div class="column"></div>) to create horizontal space around .column elements, you can also use offset modifiers like .is-offset-x: -

    -
    - -
    -
    -

    - is-half
    - is-offset-one-quarter -

    -
    -
    - -
    -
    -

    - is-4
    - is-offset-8 -

    -
    -
    - -
    -
    -

    - is-11
    - is-offset-1 -

    -
    -
    - - {% highlight html %}{{ columns_offset }}{% endhighlight %} - - {% include elements/anchor.html name="Centering columns" %} - -
    -

    - While you can use empty columns (like <div class="column"></div>) to create horizontal space around .column elements, you can also use .is-centered on the parent .columns element: -

    -
    - -
    -
    -

    - is-half
    - is-narrow -

    -
    -
    - - {% highlight html %}{{ columns_mobile_centered }}{% endhighlight %} - -
    -

    - Use with .is-multiline to create a flexible, centered list (try resizing to see centering in different viewport sizes): -

    -
    - -
    -
    -

    - is-narrow
    - First Column -

    -
    -
    -

    - is-narrow
    - Our Second Column -

    -
    -
    -

    - is-narrow
    - Third Column -

    -
    -
    -

    - is-narrow
    - The Fourth Column -

    -
    -
    -

    - is-narrow
    - Fifth Column -

    -
    -
    - - {% highlight html %}{{ columns_mobile_multiline_centered }}{% endhighlight %} - - {% include elements/anchor.html name="Responsiveness" %} - -
    -

    By default, columns are only activated from tablet onwards. This means columns are stacked on top of each other on mobile.

    -

    If you want columns to work on mobile too, just add the is-mobile modifier on the columns container:

    -
    -
    -
    -

    1

    -
    -
    -

    2

    -
    -
    -

    3

    -
    -
    -

    4

    -
    -
    - {% highlight html %}{{ columns_mobile }}{% endhighlight %} -
    -

    Resize

    -

    If you want to see the difference, resize your browser and see when the columns are stacked and when they are horizontally distributed.

    -
    -
    -

    If you only want columns on desktop, just use the is-desktop modifier on the columns container:

    -
    -
    -
    -

    1

    -
    -
    -

    2

    -
    -
    -

    3

    -
    -
    -

    4

    -
    -
    - {% highlight html %}{{ columns_desktop }}{% endhighlight %} - -

    Different sizes per breakpoint

    -
    -

    You can define a column size for each viewport size: mobile, tablet, and desktop.

    -
    -
    -
    -

    - is-half-mobile
    - is-one-third-tablet
    - is-one-quarter-desktop -

    -
    -
    -

    1

    -
    -
    -

    1

    -
    -
    -

    1

    -
    -
    -

    1

    -
    -
    -
    -

    Resize

    -

    If you want to see these classes in action, resize your browser window and see how the same column varies in width at each breakpoint.

    -
    - {% highlight html %}{{ columns_multiple_breakpoints }}{% endhighlight %} - - {% include elements/anchor.html name="Nesting" %} - -
    -

    - You can nest columns to have more flexibility in your design. You only need to follow this structure: -

    -
      -
    • - columns: top-level columns container -
        -
      • - column -
          -
        • - columns: nested columns -
            -
          • - column and so on… -
          • -
          -
        • -
        -
      • -
      -
    • -
    -

    - The difference with multiline columns is the order in the HTML code: all the blue columns appear before the red ones. Resize to a narrower viewport to see the result. -

    -
    - -
    -
    -

    First column

    -
    -
    -

    First nested column

    -
    -
    -

    Second nested column

    -
    -
    -
    -
    -

    Second column

    -
    -
    -

    50%

    -
    -
    -

    Auto

    -
    -
    -

    Auto

    -
    -
    -
    -
    - - {% highlight html %}{{ columns_nesting }}{% endhighlight %} - - {% include elements/anchor.html name="Multiline" %} - -
    -

    Whenever you want to start a new line, you can close a columns container and start a new one. But you can also add the is-multiline modifier and add more column elements that would fit in a single row.

    -
    -
    -
    -

    is-one-quarter

    -
    -
    -

    is-one-quarter

    -
    -
    -

    is-one-quarter

    -
    -
    -

    is-one-quarter

    -
    -
    -

    is-half

    -
    -
    -

    is-one-quarter

    -
    -
    -

    is-one-quarter

    -
    -
    -

    is-one-quarter

    -
    -
    -

    Auto

    -
    -
    - - {% highlight html %}{{ columns_multiline }}{% endhighlight %} - - {% include elements/anchor.html name="Gapless" %} - -
    -

    If you want to remove the space between the columns, add the is-gapless modifier on the columns container:

    -
    -
    -
    -

    First column

    -
    -
    -

    Second column

    -
    -
    -

    Third column

    -
    -
    -

    Fourth column

    -
    -
    - {% highlight html %}{{ columns_gapless }}{% endhighlight %} -
    -

    You can combine it with the is-multiline modifier:

    -
    -
    -
    -

    is-one-quarter

    -
    -
    -

    is-one-quarter

    -
    -
    -

    is-one-quarter

    -
    -
    -

    is-one-quarter

    -
    -
    -

    is-half

    -
    -
    -

    is-one-quarter

    -
    -
    -

    is-one-quarter

    -
    -
    -

    is-two-fifths

    -
    -
    -

    is-one-fifth

    -
    -
    -

    is-two-fifths

    -
    -
    -

    is-one-quarter

    -
    -
    -

    Auto

    -
    -
    - {% highlight html %}{{ columns_gapless_multiline }}{% endhighlight %} - - {% include elements/anchor.html name="Narrow column" %} - -
    -

    If you want a column to only take the space it needs, use the is-narrow modifier. The other column(s) will fill up the remaining space.

    -
    -
    -
    -
    -

    Narrow column

    -

    This column is only 200px wide.

    -
    -
    -
    -
    -

    Flexible column

    -

    This column will take up the remaining space available.

    -
    -
    -
    - {% highlight html %}{{ columns_narrow }}{% endhighlight %} -
    -

    As for the size modifiers, you can have narrow columns for different breakpoints:

    -
      -
    • - is-narrow-mobile -
    • -
    • - is-narrow-tablet -
    • -
    • - is-narrow-desktop -
    • -
    -
    -
    -
    diff --git a/docs/documentation/grid/tiles.html b/docs/documentation/grid/tiles.html deleted file mode 100644 index d42fded0..00000000 --- a/docs/documentation/grid/tiles.html +++ /dev/null @@ -1,899 +0,0 @@ ---- -title: Tiles powered by Flexbox -layout: documentation -doc-tab: grid -doc-subtab: tiles ---- - - - -{% include subnav/subnav-grid.html %} - -
    -
    -

    Tiles

    -

    A single tile element to build 2-dimensional Metro-like, Pinterest-like, or whatever-you-like grids

    - -
    - -
    -

    To build intricate 2-dimensional layouts, you only need a single element: the tile:

    -
    - -{% highlight html %} -
    - -
    -{% endhighlight %} - -
    - -

    Example

    -
    -
    -
    -
    -
    -

    Vertical...

    -

    Top tile

    -
    -
    -

    ...tiles

    -

    Bottom tile

    -
    -
    -
    -
    -

    Middle tile

    -

    With an image

    -
    - -
    -
    -
    -
    -
    -
    -

    Wide tile

    -

    Aligned with the right tile

    -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

    -
    -
    -
    -
    -
    -
    -
    -

    Tall tile

    -

    With even more content

    -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.

    -

    Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.

    -

    Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.

    -
    -
    -
    -
    -
    - -{% highlight html %} -
    -
    -
    -
    -
    -

    Vertical...

    -

    Top tile

    -
    -
    -

    ...tiles

    -

    Bottom tile

    -
    -
    -
    -
    -

    Middle tile

    -

    With an image

    -
    - -
    -
    -
    -
    -
    -
    -

    Wide tile

    -

    Aligned with the right tile

    -
    - -
    -
    -
    -
    -
    -
    -
    -

    Tall tile

    -

    With even more content

    -
    - -
    -
    -
    -
    -
    -{% endhighlight %} - -
    - -

    Modifiers

    - -
    -

    The tile element has 16 modifiers:

    -
      -
    • - 3 contextual modifiers -
        -
      • is-ancestor
      • -
      • is-parent
      • -
      • is-child
      • -
      -
    • -
    • - 1 directional modifier -
        -
      • is-vertical
      • -
      -
    • -
    • - 12 horizontal size modifiers -
        -
      • from is-1
      • -
      • to is-12
      • -
      -
    • -
    -
    - -
    - -

    How it works: Nesting

    -
    -

    Everything is a tile! To create a grid of tiles, you only need to nest tile elements.

    -
    - -
    -
    -

    Start with an ancestor tile that will wrap all other tiles:

    -
    -
    -{% highlight html %} -
    - -
    -{% endhighlight %} -
    -
    - -
    -
    -

    Add tile elements that will distribute themselves horizontally:

    -
    -
    -{% highlight html %} -
    -
    - -
    -
    - -
    -
    -{% endhighlight %} -
    -
    - -
    -
    -

    - You can resize any tile according to a 12 column grid. -
    - For example, is-4 will take up 1/3 of the horizontal space: -

    -
    -
    -{% highlight html %} -
    -
    - -
    -
    - -
    -
    -{% endhighlight %} -
    -
    - -
    -
    -

    If you want to stack tiles vertically, add is-vertical on the parent tile:

    -
    -
    -{% highlight html %} -
    -
    -
    - -
    -
    - -
    -
    -
    - -
    -
    -{% endhighlight %} -
    -
    - -
    -
    -
    -

    As soon as you want to add content to a tile, just:

    -
      -
    • add any class you want, like box
    • -
    • add the is-child modifier on the tile
    • -
    • add the is-parent modifier on the parent tile
    • -
    -
    -
    -
    -{% highlight html %} -
    -
    -
    -

    One

    -
    -
    -

    Two

    -
    -
    -
    -
    -

    Three

    -
    -
    -
    -{% endhighlight %} -
    -
    - -
    -
    -
    -

    One

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

    -
    -
    -

    Two

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

    -
    -
    -
    -
    -

    Three

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.

    -

    Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.

    -

    Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.

    -
    -
    -
    - -{% highlight html %} -
    -
    -
    -

    One

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

    -
    -
    -

    Two

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

    -
    -
    -
    -
    -

    Three

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.

    -

    Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.

    -

    Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.

    -
    -
    -
    -{% endhighlight %} - -
    - -

    Nesting requirements

    - -
    -
    - 3 levels deep at least... -
    -
    -
    -

    You need at least 3 levels of hierarchy:

    -{% highlight markdown %} -tile is-ancestor -| -└───tile is-parent - | - └───tile is-child -{% endhighlight %} -
    -
    -
    - -
    -
    - ...but more levels if you want! -
    -
    -
    -

    You can, however, nest tiles deeper than that, and mix it up!

    -{% highlight markdown %} -tile is-ancestor -| -├───tile is-vertical is-8 -| | -| ├───tile -| | | -| | ├───tile is-parent is-vertical -| | | ├───tile is-child -| | | └───tile is-child -| | | -| | └───tile is-parent -| | └───tile is-child -| | -| └───tile is-parent -| └───tile is-child -| -└───tile is-parent - └───tile is-child -{% endhighlight %} -
    -
    -
    - -
    -
    -
    -
    -
    -

    Vertical tiles

    -

    Top box

    -
    -
    -

    Vertical tiles

    -

    Bottom box

    -
    -
    -
    -
    -

    Middle box

    -

    With an image

    -
    - -
    -
    -
    -
    -
    -
    -

    Wide column

    -

    Aligned with the right column

    -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

    -
    -
    -
    -
    -
    -
    -
    -

    Tall column

    -

    With even more content

    -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.

    -

    Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.

    -

    Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.

    -
    -
    -
    -
    -
    - -{% highlight html %} -
    -
    -
    -
    -
    - -
    -
    - -
    -
    -
    -
    - -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    - -
    -
    -
    -{% endhighlight %} - -
    - -

    3 columns

    - -
    -
    -
    -

    Hello World

    -

    What is up?

    -
    -
    -
    -
    -

    Foo

    -

    Bar

    -
    -
    -
    -
    -

    Third column

    -

    With some content

    -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -

    Vertical tiles

    -

    Top box

    -
    -
    -

    Vertical tiles

    -

    Bottom box

    -
    -
    -
    -
    -

    Middle box

    -

    With an image

    -
    - -
    -
    -
    -
    -
    -
    -

    Wide column

    -

    Aligned with the right column

    -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

    -
    -
    -
    -
    -
    -
    -
    -

    Tall column

    -

    With even more content

    -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.

    -

    Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.

    -

    Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.

    -
    -
    -
    -
    -
    -
    -
    -
    -

    Side column

    -

    With some content

    -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

    -
    -
    -
    -
    -
    -

    Main column

    -

    With some content

    -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

    -
    -
    -
    -
    - -{% highlight html %} -
    -
    -
    -

    Hello World

    -

    What is up?

    -
    -
    -
    -
    -

    Foo

    -

    Bar

    -
    -
    -
    -
    -

    Third column

    -

    With some content

    -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

    -
    -
    -
    -
    - -
    -
    -
    -
    -
    -

    Vertical tiles

    -

    Top box

    -
    -
    -

    Vertical tiles

    -

    Bottom box

    -
    -
    -
    -
    -

    Middle box

    -

    With an image

    -
    - -
    -
    -
    -
    -
    -
    -

    Wide column

    -

    Aligned with the right column

    -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

    -
    -
    -
    -
    -
    -
    -
    -

    Tall column

    -

    With even more content

    -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.

    -

    Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.

    -

    Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.

    -
    -
    -
    -
    -
    - -
    -
    -
    -

    Side column

    -

    With some content

    -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

    -
    -
    -
    -
    -
    -

    Main column

    -

    With some content

    -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

    -
    -
    -
    -
    -{% endhighlight %} - -
    - -

    4 columns

    - -
    -
    -
    -

    One

    -

    Subtitle

    -
    -
    -
    -
    -

    Two

    -

    Subtitle

    -
    -
    -
    -
    -

    Three

    -

    Subtitle

    -
    -
    -
    -
    -

    Four

    -

    Subtitle

    -
    -
    -
    -
    -
    -
    -
    -
    -

    Five

    -

    Subtitle

    -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.

    -
    -
    -
    -
    -
    -
    -
    -

    Six

    -

    Subtitle

    -
    -
    -
    -
    -

    Seven

    -

    Subtitle

    -
    -
    -
    -
    -
    -

    Eight

    -

    Subtitle

    -
    -
    -
    -
    -
    -
    -
    -

    Nine

    -

    Subtitle

    -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

    -
    -
    -
    -
    -
    -

    Ten

    -

    Subtitle

    -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

    -
    -
    -
    -
    -
    -
    -
    -
    -

    Eleven

    -

    Subtitle

    -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.

    -

    Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.

    -
    -
    -
    -
    -
    -
    -
    -
    -

    Twelve

    -

    Subtitle

    -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.

    -
    -
    -
    -
    -
    -

    Thirteen

    -

    Subtitle

    -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

    -
    -
    -
    -
    -
    -

    Fourteen

    -

    Subtitle

    -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.

    -
    -
    -
    -
    - -{% highlight html %} -
    -
    -
    -

    One

    -

    Subtitle

    -
    -
    -
    -
    -

    Two

    -

    Subtitle

    -
    -
    -
    -
    -

    Three

    -

    Subtitle

    -
    -
    -
    -
    -

    Four

    -

    Subtitle

    -
    -
    -
    - -
    -
    -
    -
    -
    -

    Five

    -

    Subtitle

    -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.

    -
    -
    -
    -
    -
    -
    -
    -

    Six

    -

    Subtitle

    -
    -
    -
    -
    -

    Seven

    -

    Subtitle

    -
    -
    -
    -
    -
    -

    Eight

    -

    Subtitle

    -
    -
    -
    -
    -
    -
    -
    -

    Nine

    -

    Subtitle

    -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

    -
    -
    -
    -
    -
    -

    Ten

    -

    Subtitle

    -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

    -
    -
    -
    -
    -
    -
    -
    -
    -

    Eleven

    -

    Subtitle

    -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.

    -

    Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.

    -
    -
    -
    -
    -
    - -
    -
    -
    -

    Twelve

    -

    Subtitle

    -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.

    -
    -
    -
    -
    -
    -

    Thirteen

    -

    Subtitle

    -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

    -
    -
    -
    -
    -
    -

    Fourteen

    -

    Subtitle

    -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.

    -
    -
    -
    -
    -{% endhighlight %} -
    -
    diff --git a/docs/documentation/layout/container.html b/docs/documentation/layout/container.html index dbc2f54f..8fd56411 100644 --- a/docs/documentation/layout/container.html +++ b/docs/documentation/layout/container.html @@ -1,7 +1,7 @@ --- title: Container layout: documentation -hide_carbon: true +hide_categories: true doc-tab: layout doc-subtab: container breadcrumb: @@ -66,7 +66,7 @@ breadcrumb:

    The values 960, 1152 and 1344 have been chosen because they are divisible by both 12 and 16.

    -{% include layout/main-close.html %} +{% include layout/main-close.html show_categories=true %}
    {{container_example}} diff --git a/docs/documentation/layout/footer.html b/docs/documentation/layout/footer.html index 4e840d09..c61bf2cc 100644 --- a/docs/documentation/layout/footer.html +++ b/docs/documentation/layout/footer.html @@ -1,7 +1,7 @@ --- title: Footer layout: documentation -hide_carbon: true +hide_categories: true doc-tab: layout doc-subtab: footer breadcrumb: @@ -25,7 +25,7 @@ breadcrumb: {% endcapture %} -{% include layout/main-close.html %} +{% include layout/main-close.html show_categories=true %} {% include elements/snippet.html content=footer_example horizontal=true more=true fullwidth=true %} diff --git a/docs/documentation/layout/hero.html b/docs/documentation/layout/hero.html index 197e2946..64c07970 100644 --- a/docs/documentation/layout/hero.html +++ b/docs/documentation/layout/hero.html @@ -1,7 +1,7 @@ --- title: Hero layout: documentation -hide_carbon: true +hide_categories: true doc-tab: layout doc-subtab: hero breadcrumb: @@ -11,7 +11,7 @@ breadcrumb: - layout-hero --- -{% include layout/main-close.html %} +{% include layout/main-close.html show_categories=true %}
    diff --git a/docs/documentation/modifiers/color-helpers.html b/docs/documentation/modifiers/color-helpers.html index 57567feb..c4c1e79f 100644 --- a/docs/documentation/modifiers/color-helpers.html +++ b/docs/documentation/modifiers/color-helpers.html @@ -52,6 +52,10 @@ breadcrumb: +{% assign vernum = site.version | downcase | remove: "." | plus: 0 %} + +{% if vernum >= 63 %} + {% include elements/anchor.html name="Background color" %} {% include elements/new-tag.html version="0.6.3" %} @@ -95,3 +99,5 @@ breadcrumb: has-background-white-bis{% include color/white-bis.html %} + +{% endif %} diff --git a/docs/index.html b/docs/index.html index 17be4190..0b965faf 100644 --- a/docs/index.html +++ b/docs/index.html @@ -5,450 +5,13 @@ fixed_navbar: true --- {% include global/navbar.html id="Index" %} - {% include index/intro.html %} - -
    - {% include elements/tws.html %} -
    - -
    -
    -

    - - - - - Simple columns - -

    -

    Just add columns, they will resize themselves

    -
    -
    -
    -

    1

    -
    -
    -
    -
    -

    2

    -
    -
    -
    -
    -

    3

    -
    -
    -
    -
    -

    4

    -
    -
    -
    -
    -

    5

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

    - Add column -

    -

    - Remove column -

    -
    -
    -

    Info

    -

    While it's possible to add as many columns as you want, it is recommended to stick with 12 columns.
    - If you want smaller divisions, you can always nest columns.

    -
    -
    -{% highlight html %} -
    -
    1
    -
    2
    -
    3
    -
    4
    -
    5
    -
    -{% endhighlight %} -
    -
    -
    - -
    - -
    -
    -

    - - - - - Magic tiles - -

    -

    A single element for a Metro UI-style CSS grid

    -
    -
    -
    -
    -
    -

    Vertical...

    -

    Top tile

    -
    -
    -

    ...tiles

    -

    Bottom tile

    -
    -
    -
    -
    -

    Middle tile

    -

    With an image

    -
    - -
    -
    -
    -
    -
    -
    -

    Wide tile

    -

    Aligned with the right tile

    -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

    -
    -
    -
    -
    -
    -
    -

    Tall tile

    -

    With even more content

    -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.

    -

    Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.

    -

    Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.

    -
    -
    -
    -
    -
    -{% highlight html %} -
    -
    -
    -
    -
    - -
    -
    - -
    -
    -
    -
    - -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    - -
    -
    -
    -{% endhighlight %} -
    -
    -
    - -
    - -
    -
    -

    - - - - - Flexible horizontal level - -

    -

    Include any type of element, they will remain vertically centered

    - -
    -
    - -
    - -
    -
    -
    -
    -

    - - - - - Versatile media object - -

    -

    A simple block with an image that will solve 90% of your UI problems

    -
    - -
    -
    -
    -
    -
    - Image -
    -
    -
    -
    -

    - John Smith @johnsmith 31m -
    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis. -

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

    - - - - - Easy vertical centering in fullscreen - -

    -

    Include any content you want, it's always centered

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

    - - - - - Compose your element with modifier classes - -

    -

    Add and combine is-* CSS classes to quickly alter styles

    -
    -
    -
    -
    -

    - button -

    -
    - Button -
    -
    -
    -

    - button is-primary -

    -
    - Button -
    -
    -
    -

    - button is-primary is-large -

    -
    - Button -
    -
    -
    -

    - button is-primary is-large is-loading -

    -
    - Button -
    -
    -
    -
    -
    - -
    - -
    - -
    - -{% include index/features.html %} - -
    - -
    - -
    +{% include index/tws.html %} +{% include index/columns.html %} + +{% include index/level.html %} +{% include index/media-object.html %} +{% include index/fullheight.html %} + + +{% include index/start.html %} From b61f9d15dca75cb998f1eeb996af33d35814d21b Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Tue, 10 Apr 2018 12:04:10 +0100 Subject: [PATCH 18/56] Add index sponsor --- docs/_includes/index/sponsor.html | 89 +++++++++++++++++-------------- docs/_sass/global.sass | 1 - docs/_sass/index.sass | 8 +-- docs/_sass/sponsors.sass | 50 +++++++++++------ docs/bulma-docs.sass | 2 + docs/css/bulma-docs.css | 73 +++++++++++++++---------- docs/index.html | 3 +- 7 files changed, 130 insertions(+), 96 deletions(-) diff --git a/docs/_includes/index/sponsor.html b/docs/_includes/index/sponsor.html index 7bf9daa3..b357216c 100644 --- a/docs/_includes/index/sponsor.html +++ b/docs/_includes/index/sponsor.html @@ -1,44 +1,51 @@ -
    -
    -
    -

    Sponsors

    -
    - - themeisle logo - - - {% - include elements/responsive-image.html - path="sponsors/chainaxe" - extension="png" - alt="chainaxe logo" - width="99" - height="70" - %} - - - {% - include elements/responsive-image.html - path="sponsors/keycdn" - extension="png" - alt="keycdn logo" - width="200" - height="58" - %} - - - {% - include elements/responsive-image.html - path="sponsors/tooltwist" - extension="png" - alt="tooltwist logo" - width="200" - height="64" - %} - + diff --git a/docs/_sass/global.sass b/docs/_sass/global.sass index 762c9dd5..af545e69 100644 --- a/docs/_sass/global.sass +++ b/docs/_sass/global.sass @@ -4,7 +4,6 @@ svg $carbon-spacing: 1rem $carbon-shadow-size: 0.75rem -$carbon-height: 100px $carbon-image-height: 100px $carbon-image-width: 130px $carbon-poweredby-height: 20px diff --git a/docs/_sass/index.sass b/docs/_sass/index.sass index 985b9868..090c5bee 100644 --- a/docs/_sass/index.sass +++ b/docs/_sass/index.sass @@ -1,6 +1,6 @@ .bd-focus margin: 6rem auto 0 - max-width: 1080px + max-width: $intro-width .bd-focus-item .subtitle @@ -174,12 +174,6 @@ &:hover opacity: 1 -.intro-partners - margin-top: 6rem - -.intro-carbon - margin-top: 0.5rem - +mobile .intro-buttons .button diff --git a/docs/_sass/sponsors.sass b/docs/_sass/sponsors.sass index c13295ac..2d5ab668 100644 --- a/docs/_sass/sponsors.sass +++ b/docs/_sass/sponsors.sass @@ -8,28 +8,44 @@ margin-right: 3rem width: 150px -.bd-sponsor - margin-left: auto - margin-right: auto - text-align: center - -.bd-sponsor-title - font-size: $size-small - margin-bottom: 1em - opacity: 0.5 - -.bd-sponsor-list +.bd-partner-sponsors align-items: center display: flex flex-wrap: wrap - justify-content: center + justify-content: space-between + margin-bottom: -1rem a align-items: center display: flex justify-content: center - margin: 1rem - width: 160px - img - max-height: 60px - width: auto + margin: 0 1rem 1rem 0 + min-height: $carbon-height +.bd-partners + background-color: $white-bis + .container + max-width: $intro-width + #carbonads + .carbon-text + padding-bottom: 0 + .carbon-poweredby + display: none + +.bd-partner-title + color: $grey-light + font-size: 0.875rem + margin-bottom: 1rem + ++tablet + .bd-partners-list + align-items: flex-start + display: flex + .bd-partner + &.bd-is-sponsor + flex-grow: 1 + flex-shrink: 1 + &.bd-is-carbon + flex-grow: 0 + flex-shrink: 0 + margin-left: ($main-spacing * 2) + width: $carbon-width diff --git a/docs/bulma-docs.sass b/docs/bulma-docs.sass index 830f2da2..1f615134 100644 --- a/docs/bulma-docs.sass +++ b/docs/bulma-docs.sass @@ -13,7 +13,9 @@ $star: #FFD257 $rss: #f26522 $carbon-width: 300px +$carbon-height: 100px $main-spacing: 3rem +$intro-width: 1130px =selection($current-selector: false) @if $current-selector diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index cc554e99..8c66779b 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -10091,7 +10091,7 @@ svg { .bd-focus { margin: 6rem auto 0; - max-width: 1080px; + max-width: 1130px; } .bd-focus-item .subtitle { @@ -10324,14 +10324,6 @@ svg { opacity: 1; } -.intro-partners { - margin-top: 6rem; -} - -.intro-carbon { - margin-top: 0.5rem; -} - @media screen and (max-width: 768px) { .intro-buttons .button { display: flex; @@ -12164,36 +12156,59 @@ html.route-index .hero.is-primary a.column:hover .title strong { width: 150px; } -.bd-sponsor { - margin-left: auto; - margin-right: auto; - text-align: center; -} - -.bd-sponsor-title { - font-size: 0.75rem; - margin-bottom: 1em; - opacity: 0.5; -} - -.bd-sponsor-list { +.bd-partner-sponsors { align-items: center; display: flex; flex-wrap: wrap; - justify-content: center; + justify-content: space-between; + margin-bottom: -1rem; } -.bd-sponsor-list a { +.bd-partner-sponsors a { align-items: center; display: flex; justify-content: center; - margin: 1rem; - width: 160px; + margin: 0 1rem 1rem 0; + min-height: 100px; } -.bd-sponsor-list a img { - max-height: 60px; - width: auto; +.bd-partners { + background-color: #fafafa; +} + +.bd-partners .container { + max-width: 1130px; +} + +.bd-partners #carbonads .carbon-text { + padding-bottom: 0; +} + +.bd-partners #carbonads .carbon-poweredby { + display: none; +} + +.bd-partner-title { + color: #b5b5b5; + font-size: 0.875rem; + margin-bottom: 1rem; +} + +@media screen and (min-width: 769px), print { + .bd-partners-list { + align-items: flex-start; + display: flex; + } + .bd-partner.bd-is-sponsor { + flex-grow: 1; + flex-shrink: 1; + } + .bd-partner.bd-is-carbon { + flex-grow: 0; + flex-shrink: 0; + margin-left: 6rem; + width: 300px; + } } @keyframes fadeIn { diff --git a/docs/index.html b/docs/index.html index 0b965faf..271e0532 100644 --- a/docs/index.html +++ b/docs/index.html @@ -6,8 +6,9 @@ fixed_navbar: true {% include global/navbar.html id="Index" %} {% include index/intro.html %} -{% include index/tws.html %} +{% include index/sponsor.html %} {% include index/columns.html %} +{% include index/tws.html %} {% include index/level.html %} {% include index/media-object.html %} From 8932a3e67fb2c8320c17163cc207b452a2cdcb74 Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Tue, 10 Apr 2018 12:26:37 +0100 Subject: [PATCH 19/56] Fix index columns --- docs/_includes/index/columns.html | 59 +++++++++++++------ docs/_javascript/index.js | 2 +- docs/_sass/index.sass | 67 ++++++++++++++++++---- docs/_sass/route.sass | 13 +++-- docs/_sass/sponsors.sass | 3 +- docs/bulma-docs.sass | 5 ++ docs/css/bulma-docs.css | 94 +++++++++++++++++++++++++------ docs/lib/index.js | 2 +- 8 files changed, 188 insertions(+), 57 deletions(-) diff --git a/docs/_includes/index/columns.html b/docs/_includes/index/columns.html index 7a722587..8aa126b7 100644 --- a/docs/_includes/index/columns.html +++ b/docs/_includes/index/columns.html @@ -8,14 +8,30 @@
    {% endcapture %} -
    +{% assign columns_link = site.data.links.by_id['columns-basics'] %} + +
    -

    - - Simple columns - -

    -

    Just add columns, they will resize themselves

    +
    +

    + + The simplest grid system + +

    +

    + Just add columns, they will resize themselves +

    +
    + +
    +

    + Better on desktop +

    +

    + This interactive tool works better on larger screens! That's because Bulma columns are vertical by default. I recommend revisiting this page later when you're on desktop. 😉 +

    +
    +
    @@ -78,21 +94,30 @@
    -
    -

    - Add column -

    -

    - Remove column -

    + +
    + + +
    +
    + {% highlight html %}{{ columns }}{% endhighlight %} +
    +
    +

    Info

    While it's possible to add as many columns as you want, it is recommended to stick with 12 columns.
    If you want smaller divisions, you can always nest columns.

    -
    - {% highlight html %}{{ columns }}{% endhighlight %} -
    diff --git a/docs/_javascript/index.js b/docs/_javascript/index.js index fd09327c..08753358 100644 --- a/docs/_javascript/index.js +++ b/docs/_javascript/index.js @@ -47,7 +47,7 @@ document.addEventListener('DOMContentLoaded', () => { $message.style.display = 'none'; } - showing = Math.min(Math.max(parseInt(showing), 2), 12); + showing = Math.min(Math.max(parseInt(showing), 1), 12); $columns.forEach($el => { $el.style.display = 'none'; diff --git a/docs/_sass/index.sass b/docs/_sass/index.sass index 090c5bee..2378bf6d 100644 --- a/docs/_sass/index.sass +++ b/docs/_sass/index.sass @@ -1,3 +1,56 @@ +// Columns + +.bd-columns-header + margin-bottom: 3rem + text-align: center + strong + color: $primary + font-weight: $weight-semibold + .subtitle + color: $grey-light + +#grid + .notification + padding-left: 0 + padding-right: 0 + +.bd-columns-tools + margin-top: 3rem + +.bd-columns-tool + @extend %center + &.bd-is-try + .buttons + justify-content: center + .button + strong + font-weight: $weight-semibold + +#markup + width: 100% + .highlight pre + max-height: none + +#message + display: none + margin-top: 3rem + ++mobile + .bd-columns-tool + &.bd-is-markup + margin-top: 3rem + ++tablet + .bd-columns-tools + align-items: flex-start + display: flex + .bd-columns-tool + width: 50% + &.bd-is-try + padding-top: 60px + +// Focus + .bd-focus margin: 6rem auto 0 max-width: $intro-width @@ -27,6 +80,8 @@ .fa-github-alt color: $github +// Intro + .intro-content margin-left: auto margin-right: auto @@ -210,15 +265,3 @@ margin-top: -11px &:not(:last-child) margin-bottom: 20px - -#grid - .notification - padding-left: 0 - padding-right: 0 - -#message - display: none - -#markup - .highlight pre - max-height: none diff --git a/docs/_sass/route.sass b/docs/_sass/route.sass index baca58a0..3084fb3f 100644 --- a/docs/_sass/route.sass +++ b/docs/_sass/route.sass @@ -1,11 +1,12 @@ html.route-index - .title.is-2 + .title.is-2, + .title.is-3 position: relative - .title.is-2 a - color: $text-strong - position: relative - .title.is-2 a:hover - color: $blue + a + color: $text-strong + position: relative + a:hover + color: $blue .hero .title.is-2 a color: $white .hero .title.is-2 a:hover diff --git a/docs/_sass/sponsors.sass b/docs/_sass/sponsors.sass index 2d5ab668..8556a645 100644 --- a/docs/_sass/sponsors.sass +++ b/docs/_sass/sponsors.sass @@ -13,12 +13,11 @@ display: flex flex-wrap: wrap justify-content: space-between - margin-bottom: -1rem a align-items: center display: flex justify-content: center - margin: 0 1rem 1rem 0 + margin-right: 1rem min-height: $carbon-height .bd-partners diff --git a/docs/bulma-docs.sass b/docs/bulma-docs.sass index 1f615134..f0b63562 100644 --- a/docs/bulma-docs.sass +++ b/docs/bulma-docs.sass @@ -17,6 +17,11 @@ $carbon-height: 100px $main-spacing: 3rem $intro-width: 1130px +%center + align-items: center + display: flex + justify-content: center + =selection($current-selector: false) @if $current-selector &::-moz-selection diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 8c66779b..1b45110a 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -1,4 +1,10 @@ @charset "UTF-8"; +.bd-columns-tool { + align-items: center; + display: flex; + justify-content: center; +} + /*! bulma.io v0.6.2 | MIT License | github.com/jgthms/bulma */ @keyframes spinAround { from { @@ -10089,6 +10095,69 @@ svg { text-decoration: underline; } +.bd-columns-header { + margin-bottom: 3rem; + text-align: center; +} + +.bd-columns-header strong { + color: #00d1b2; + font-weight: 600; +} + +.bd-columns-header .subtitle { + color: #b5b5b5; +} + +#grid .notification { + padding-left: 0; + padding-right: 0; +} + +.bd-columns-tools { + margin-top: 3rem; +} + +.bd-columns-tool.bd-is-try .buttons { + justify-content: center; +} + +.bd-columns-tool.bd-is-try .button strong { + font-weight: 600; +} + +#markup { + width: 100%; +} + +#markup .highlight pre { + max-height: none; +} + +#message { + display: none; + margin-top: 3rem; +} + +@media screen and (max-width: 768px) { + .bd-columns-tool.bd-is-markup { + margin-top: 3rem; + } +} + +@media screen and (min-width: 769px), print { + .bd-columns-tools { + align-items: flex-start; + display: flex; + } + .bd-columns-tool { + width: 50%; + } + .bd-columns-tool.bd-is-try { + padding-top: 60px; + } +} + .bd-focus { margin: 6rem auto 0; max-width: 1130px; @@ -10376,19 +10445,6 @@ svg { } } -#grid .notification { - padding-left: 0; - padding-right: 0; -} - -#message { - display: none; -} - -#markup .highlight pre { - max-height: none; -} - #github { color: #333333; border-color: #333333; @@ -11390,16 +11446,19 @@ svg { } } -html.route-index .title.is-2 { +html.route-index .title.is-2, +html.route-index .title.is-3 { position: relative; } -html.route-index .title.is-2 a { +html.route-index .title.is-2 a, +html.route-index .title.is-3 a { color: #363636; position: relative; } -html.route-index .title.is-2 a:hover { +html.route-index .title.is-2 a:hover, +html.route-index .title.is-3 a:hover { color: #3273dc; } @@ -12161,14 +12220,13 @@ html.route-index .hero.is-primary a.column:hover .title strong { display: flex; flex-wrap: wrap; justify-content: space-between; - margin-bottom: -1rem; } .bd-partner-sponsors a { align-items: center; display: flex; justify-content: center; - margin: 0 1rem 1rem 0; + margin-right: 1rem; min-height: 100px; } diff --git a/docs/lib/index.js b/docs/lib/index.js index 9546d5d0..e476325a 100644 --- a/docs/lib/index.js +++ b/docs/lib/index.js @@ -49,7 +49,7 @@ document.addEventListener('DOMContentLoaded', function () { $message.style.display = 'none'; } - showing = Math.min(Math.max(parseInt(showing), 2), 12); + showing = Math.min(Math.max(parseInt(showing), 1), 12); $columns.forEach(function ($el) { $el.style.display = 'none'; From abaf686b257f4235238242ae9efb84fefc592b23 Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Tue, 10 Apr 2018 12:48:58 +0100 Subject: [PATCH 20/56] More index sections --- docs/_includes/elements/tw.html | 2 +- docs/_includes/elements/tws.html | 2 +- docs/_includes/index/columns.html | 2 +- docs/_includes/index/customize.html | 55 ++++++++++++++++++ docs/_includes/index/fullheight.html | 2 +- docs/_includes/index/modifiers.html | 29 ++++++---- docs/_includes/index/start.html | 18 ++++-- docs/_includes/index/tws.html | 16 +++++- docs/_sass/index.sass | 20 ++++++- docs/_sass/twitter.sass | 15 ++--- docs/bulma-docs.sass | 2 +- docs/css/bulma-docs.css | 84 ++++++++++++---------------- docs/index.html | 7 ++- 13 files changed, 173 insertions(+), 81 deletions(-) create mode 100644 docs/_includes/index/customize.html diff --git a/docs/_includes/elements/tw.html b/docs/_includes/elements/tw.html index f2fcbdcc..70f16378 100644 --- a/docs/_includes/elements/tw.html +++ b/docs/_includes/elements/tw.html @@ -1,6 +1,6 @@ {% assign twUrl = "https://twitter.com/" | append: include.tweet.username | append: "/status/" | append: include.tweet.id %} -
    +
    diff --git a/docs/_includes/elements/tws.html b/docs/_includes/elements/tws.html index 55e5d3cd..942913fd 100644 --- a/docs/_includes/elements/tws.html +++ b/docs/_includes/elements/tws.html @@ -24,7 +24,7 @@

    - + See more love 🤗

    diff --git a/docs/_includes/index/columns.html b/docs/_includes/index/columns.html index 8aa126b7..4907a381 100644 --- a/docs/_includes/index/columns.html +++ b/docs/_includes/index/columns.html @@ -12,7 +12,7 @@
    -
    +

    The simplest grid system diff --git a/docs/_includes/index/customize.html b/docs/_includes/index/customize.html new file mode 100644 index 00000000..621f344d --- /dev/null +++ b/docs/_includes/index/customize.html @@ -0,0 +1,55 @@ +{% assign customize_link = site.data.links.by_id['overview-customize'] %} + +
    +
    +
    +
    +
    +

    + + So quick to customize + +

    +

    + Simply set your own Sass variables before importing Bulma +

    +
    +
    + +
    +
    +
    +

    + button +

    +
    + Button +
    +
    +
    +

    + button is-primary +

    +
    + Button +
    +
    +
    +

    + button is-primary is-large +

    +
    + Button +
    +
    +
    +

    + button is-primary is-large is-loading +

    +
    + Button +
    +
    +
    +
    +
    diff --git a/docs/_includes/index/fullheight.html b/docs/_includes/index/fullheight.html index 79dd9343..6d32da90 100644 --- a/docs/_includes/index/fullheight.html +++ b/docs/_includes/index/fullheight.html @@ -13,7 +13,7 @@

    - + Easy vertical centering in fullscreen diff --git a/docs/_includes/index/modifiers.html b/docs/_includes/index/modifiers.html index 32eede46..86a92cf0 100644 --- a/docs/_includes/index/modifiers.html +++ b/docs/_includes/index/modifiers.html @@ -1,17 +1,26 @@ -
    +{% assign modifiers_link = site.data.links.by_id['modifiers-syntax'] %} + +
    -

    - - - - - Compose your element with modifier classes - -

    -

    Add and combine is-* CSS classes to quickly alter styles

    +
    +

    + + So easy to learn + +

    +

    + Get a design started within minutes +

    +
    + +
    + {% assign tweet = site.data.love.tweetsById.868829487072464897 %} + {% include elements/tw.html tweet=tweet modifier='bd-is-grey' %} +
    +
    diff --git a/docs/_includes/index/start.html b/docs/_includes/index/start.html index fbbe19ff..fb933cc8 100644 --- a/docs/_includes/index/start.html +++ b/docs/_includes/index/start.html @@ -1,12 +1,22 @@ -
    +{% assign docs_link = site.data.links.by_id['documentation'] %} +{% assign docs_url = site.url | append: docs_link.path %} + +
    -

    Get started

    +
    +

    + + Get started + +

    +
    +
    - + - Check the docs + Read the docs diff --git a/docs/_includes/index/tws.html b/docs/_includes/index/tws.html index de1cf176..31bb7711 100644 --- a/docs/_includes/index/tws.html +++ b/docs/_includes/index/tws.html @@ -1,3 +1,17 @@ -
    +{% assign love_link = site.data.links.by_id['love'] %} +{% assign love_url = site.url | append: love_link.path %} + +
    +
    +

    + + A growing community + +

    +

    + See what Bulma fans are saying +

    +
    + {% include elements/tws.html %}
    diff --git a/docs/_sass/index.sass b/docs/_sass/index.sass index 2378bf6d..a304de39 100644 --- a/docs/_sass/index.sass +++ b/docs/_sass/index.sass @@ -1,13 +1,27 @@ -// Columns +// Index common -.bd-columns-header +.bd-index-header margin-bottom: 3rem text-align: center + a + color: currentColor + &:hover + color: $blue + strong + color: currentColor strong - color: $primary font-weight: $weight-semibold + .title + strong + color: $primary .subtitle color: $grey-light + strong + color: currentColor + &.bd-is-left + text-align: left + +// Columns #grid .notification diff --git a/docs/_sass/twitter.sass b/docs/_sass/twitter.sass index b837a510..4d7683f1 100644 --- a/docs/_sass/twitter.sass +++ b/docs/_sass/twitter.sass @@ -1,23 +1,24 @@ $tw-black: #1c2022 $tw-blue: #2b7bb9 $tw-grey: #697882 +$tw-border: #e1e8ed .bd-tws-home - background-color: $background - display: flex - flex-wrap: wrap - overflow: auto - padding: 20px + background-color: $white-bis .bd-tw background-color: #fff - border: 2px solid #e1e8ed + border: 2px solid $background border-radius: $radius-large color: $tw-grey flex-shrink: 0 font-family: Helvetica, Roboto, "Segoe UI", Calibri, sans-serif font-size: 16px + max-width: 420px padding: 20px + &.bd-is-grey + background-color: $white-bis + border: none .bd-tw-header align-items: stretch @@ -163,7 +164,7 @@ $tw-grey: #697882 .twitter-tweet:not(.twitter-tweet-rendered) background-color: $white - border: 1px solid #e1e8ed + border: 1px solid $tw-border border-radius: 5px color: $tw-grey font-size: 14px diff --git a/docs/bulma-docs.sass b/docs/bulma-docs.sass index f0b63562..00ed3a5e 100644 --- a/docs/bulma-docs.sass +++ b/docs/bulma-docs.sass @@ -46,7 +46,7 @@ $intro-width: 1130px @import "./_sass/example" @import "./_sass/callout" @import "./_sass/bsa" -@import "./_sass/route" +// @import "./_sass/route" @import "./_sass/twitter" @import "./_sass/expo" @import "./_sass/love" diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 1b45110a..f8f21f3f 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -10095,20 +10095,43 @@ svg { text-decoration: underline; } -.bd-columns-header { +.bd-index-header { margin-bottom: 3rem; text-align: center; } -.bd-columns-header strong { - color: #00d1b2; +.bd-index-header a { + color: currentColor; +} + +.bd-index-header a:hover { + color: #3273dc; +} + +.bd-index-header a:hover strong { + color: currentColor; +} + +.bd-index-header strong { font-weight: 600; } -.bd-columns-header .subtitle { +.bd-index-header .title strong { + color: #00d1b2; +} + +.bd-index-header .subtitle { color: #b5b5b5; } +.bd-index-header .subtitle strong { + color: currentColor; +} + +.bd-index-header.bd-is-left { + text-align: left; +} + #grid .notification { padding-left: 0; padding-right: 0; @@ -11446,64 +11469,27 @@ svg { } } -html.route-index .title.is-2, -html.route-index .title.is-3 { - position: relative; -} - -html.route-index .title.is-2 a, -html.route-index .title.is-3 a { - color: #363636; - position: relative; -} - -html.route-index .title.is-2 a:hover, -html.route-index .title.is-3 a:hover { - color: #3273dc; -} - -html.route-index .hero .title.is-2 a { - color: white; -} - -html.route-index .hero .title.is-2 a:hover { - color: white; -} - -html.route-index .hero.is-primary a.column, -html.route-index .hero.is-primary a.column:hover { - color: white; -} - -html.route-index .hero.is-primary a.column:hover .title strong { - border-bottom: 1px solid; -} - -@media screen and (max-width: 979px) { - html.route-index .title.is-2 a { - padding-left: 0; - } -} - .bd-tws-home { - background-color: whitesmoke; - display: flex; - flex-wrap: wrap; - overflow: auto; - padding: 20px; + background-color: #fafafa; } .bd-tw { background-color: #fff; - border: 2px solid #e1e8ed; + border: 2px solid whitesmoke; border-radius: 6px; color: #697882; flex-shrink: 0; font-family: Helvetica, Roboto, "Segoe UI", Calibri, sans-serif; font-size: 16px; + max-width: 420px; padding: 20px; } +.bd-tw.bd-is-grey { + background-color: #fafafa; + border: none; +} + .bd-tw-header { align-items: stretch; display: flex; diff --git a/docs/index.html b/docs/index.html index 271e0532..8118c99f 100644 --- a/docs/index.html +++ b/docs/index.html @@ -9,9 +9,12 @@ fixed_navbar: true {% include index/sponsor.html %} {% include index/columns.html %} {% include index/tws.html %} +{% include index/modifiers.html %} +
    +{% include index/customize.html %} -{% include index/level.html %} -{% include index/media-object.html %} + + {% include index/fullheight.html %} From 69899e57f5bea8e1f09b2258ee78638d36e22b32 Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Tue, 10 Apr 2018 14:28:45 +0100 Subject: [PATCH 21/56] Add index customized --- docs/_includes/global/head.html | 3 + docs/_includes/index/customize.html | 109 ++-- docs/_includes/index/fullheight.html | 25 +- docs/_includes/snippets/customized.html | 25 + docs/_includes/test/features.html | 638 ++++++++++++++++++++++++ docs/_includes/test/from-to.html | 31 ++ docs/_sass/index.sass | 61 ++- docs/bulma-docs.sass | 6 + docs/css/bulma-docs.css | 86 +++- docs/test.html | 22 + package.json | 3 +- 11 files changed, 955 insertions(+), 54 deletions(-) create mode 100644 docs/_includes/snippets/customized.html create mode 100644 docs/_includes/test/features.html create mode 100644 docs/_includes/test/from-to.html create mode 100644 docs/test.html diff --git a/docs/_includes/global/head.html b/docs/_includes/global/head.html index 39fba8bc..29ce1e02 100644 --- a/docs/_includes/global/head.html +++ b/docs/_includes/global/head.html @@ -18,6 +18,9 @@ {% if page.mdi %} {% endif %} + {% if page.route == 'index' %} + + {% endif %} diff --git a/docs/_includes/index/customize.html b/docs/_includes/index/customize.html index 621f344d..8a1680a8 100644 --- a/docs/_includes/index/customize.html +++ b/docs/_includes/index/customize.html @@ -2,52 +2,83 @@
    -
    -
    -
    -

    - - So quick to customize - -

    -

    - Simply set your own Sass variables before importing Bulma -

    -
    +
    +

    + + So quick to customize + +

    +

    + Simply set your own Sass variables before importing Bulma +

    +
    + +
    +
    +
    + {% highlight scss %}{% include snippets/customized.html %}{% endhighlight %} +
    -
    -
    -
    -

    - button +

    +
    +

    Before

    +
    +

    + Bulma +

    +

    + Modern CSS framework based on Flexbox

    +
    +
    + +
    +
    +
    +

    + + + +

    +
    +
    + Primary + Link +
    - Button
    -
    -
    -

    - button is-primary + +

    +

    After

    +
    +

    + Bulma +

    +

    + Modern CSS framework based on Flexbox

    +
    +
    + +
    +
    +
    +

    + + + +

    +
    +
    + Primary + Link +
    - Button -
    -
    -
    -

    - button is-primary is-large -

    -
    - Button -
    -
    -
    -

    - button is-primary is-large is-loading -

    -
    - Button
    diff --git a/docs/_includes/index/fullheight.html b/docs/_includes/index/fullheight.html index 6d32da90..fb451e92 100644 --- a/docs/_includes/index/fullheight.html +++ b/docs/_includes/index/fullheight.html @@ -1,4 +1,6 @@ -
    +{% assign hero_link = site.data.links.by_id['layout-hero'] %} + +
    @@ -10,16 +12,17 @@
    -
    -

    - - - - - Easy vertical centering in fullscreen - -

    -

    Include any content you want, it's always centered

    +
    +
    +

    + + Fullscreen vertical centering + +

    +

    + Include any content you want, it's always centered +

    +
    diff --git a/docs/_includes/snippets/customized.html b/docs/_includes/snippets/customized.html new file mode 100644 index 00000000..9501367a --- /dev/null +++ b/docs/_includes/snippets/customized.html @@ -0,0 +1,25 @@ +// Import a Google Font +@import url('https://fonts.googleapis.com/css?family=Nunito:400,700'); + +// Set your brand colors +$purple: #8A4D76; +$pink: #FA7C91; +$brown: #757763; +$beige-light: #D0D1CD; +$beige-lighter: #EFF0EB; + +// Update Bulma's global variables +$family-sans-serif: "Nunito", serif; +$grey-dark: $brown; +$grey-light: $beige-light; +$primary: $purple; +$link: $pink; + +// Update some of Bulma's component variables +$control-border-width: 2px; +$input-background-color: $beige-lighter; +$input-border-color: transparent; +$input-shadow: none; + +// Import the rest of Bulma +@import "../bulma"; diff --git a/docs/_includes/test/features.html b/docs/_includes/test/features.html new file mode 100644 index 00000000..29699ea7 --- /dev/null +++ b/docs/_includes/test/features.html @@ -0,0 +1,638 @@ +{% capture form %} +
    + +
    + +
    +
    +
    +

    + + + +

    +
    +
    +

    + +

    +
    +
    +

    + +

    +
    +
    +

    + + +

    +
    +
    +

    + Button +

    +
    +{% endcapture %} + +{% capture box %} +
    +
    +
    +
    + Image +
    +
    +
    +
    +

    + John Smith @johnsmith 31m +
    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis. +

    +
    + +
    +
    +
    +{% endcapture %} + +{% capture button %} +
    + + + + + + +
    + + +{% endcapture %} + +{% capture notification %} +
    + + Lorem ipsum dolor sit amet, consectetur + adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Sit amet, + consectetur adipiscing elit +
    +{% endcapture %} + +{% capture progress %} +30% +{% endcapture %} + +{% capture tags %} +Black +Dark +Light +White +Primary +Link +Info +Success +Warning +Danger +{% endcapture %} + +{% capture cards %} +
    +
    +
    +
    +
    + Image +
    +
    +
    +
    +
    +
    + Image +
    +
    +
    +

    John Smith

    +

    @johnsmith

    +
    +
    + +
    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Phasellus nec iaculis mauris. @bulmaio. + #css #responsive +
    + 11:09 PM - 1 Jan 2016 +
    +
    +
    +
    + +
    +
    +
    +

    + “There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.” +

    +

    + Jeff Atwood +

    +
    + +
    +
    +
    +{% endcapture %} + +{% capture dropdown %} + +{% endcapture %} + +{% capture message %} +
    +
    +

    Primary

    + +
    +
    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem. +
    +
    +{% endcapture %} + +{% capture pagination %} + +{% endcapture %} + +{% capture panel %} + +{% endcapture %} + +{% capture tabs %} + +{% endcapture %} + +{% capture media %} +
    +
    +

    + +

    +
    +
    +
    +

    + John Smith @johnsmith 31m +
    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis. +

    +
    + +
    +
    + +
    +
    +{% endcapture %} + +{% capture menu %} + +{% endcapture %} + +
    +
    +
    +
    +

    Elements

    +
    +
    +
    +
    +

    + + Form + +

    +
    +
    + {{ form }} +
    +
    + +
    +
    +

    + + Box + +

    +
    +
    + {{ box }} +
    +
    + +
    +
    +

    + + Button + +

    +
    +
    + {{ button }} +
    +
    + +
    + +
    + {{ notification }} +
    +
    + +
    + +
    + {{ progress }} +
    +
    + +
    +
    +

    + + Tags + +

    +
    +
    + {{ tags }} +
    +
    +
    +
    +
    +
    + +
    + +
    +
    +
    +
    +

    Components

    +
    +
    +
    +
    +

    + + Card + +

    +
    +
    + {{ cards }} +
    +
    + +
    + +
    + {{ dropdown }} +
    +
    + +
    + +
    + {{ message }} +
    +
    + +
    + +
    + {{ pagination }} +
    +
    + +
    +
    +

    + + Tabs + +

    +
    +
    + {{ tabs }} +
    +
    + +
    + +
    + {{ media }} +
    +
    + +
    +
    +

    + + Menu + + and + + Panel + +

    +
    +
    +
    +
    + {{ menu }} +
    +
    + {{ panel }} +
    +
    +
    +
    + +
    +
    +
    +
    diff --git a/docs/_includes/test/from-to.html b/docs/_includes/test/from-to.html new file mode 100644 index 00000000..5d065c12 --- /dev/null +++ b/docs/_includes/test/from-to.html @@ -0,0 +1,31 @@ +
    +
    +
    +

    + Bulma +

    +

    + Modern CSS framework based on Flexbox +

    +
    + +
    + +
    +
    +
    +

    + + + +

    +
    +
    + Primary + Link +
    +
    +
    +
    diff --git a/docs/_sass/index.sass b/docs/_sass/index.sass index a304de39..e01572fe 100644 --- a/docs/_sass/index.sass +++ b/docs/_sass/index.sass @@ -15,12 +15,71 @@ strong color: $primary .subtitle - color: $grey-light + color: $grey-light !important strong color: currentColor &.bd-is-left text-align: left +// Customize + +.bd-index-custom-title + color: $grey-light + +.bd-index-custom-example + padding: 1rem + .subtitle + margin-bottom: 0.5rem + +.bd-index-custom.bd-is-after + color: $brown + font-family: "Nunito", serif + margin-top: 0.5rem + a + color: $pink + &:hover + color: #363636 + .subtitle + color: $brown + .input, + .select select + background-color: $beige-lighter + border-color: transparent + border-width: 2px + box-shadow: none + font-family: "Nunito", serif + &:hover + border-color: $beige-light + &:focus + border-color: $pink + box-shadow: 0 0 0 0.125em rgba($pink, 0.25) + .select + &:not(.is-multiple):not(:hover) + &::after + border-color: $pink + .button + &.is-primary + background-color: $mauve + color: $white + &:hover + background-color: darken($mauve, 2.5%) + &:active + background-color: darken($mauve, 5%) + &.is-link + background-color: $pink + color: $white + &:hover + background-color: darken($pink, 2.5%) + &:active + background-color: darken($pink, 5%) + +// Fullscreen + +.bd-index-fullscreen + .tabs + a + color: $grey-light !important + // Columns #grid diff --git a/docs/bulma-docs.sass b/docs/bulma-docs.sass index 00ed3a5e..f43e6a93 100644 --- a/docs/bulma-docs.sass +++ b/docs/bulma-docs.sass @@ -12,6 +12,12 @@ $bleeding-red: #CA1F26 $star: #FFD257 $rss: #f26522 +$mauve: #8A4D76; +$pink: #FA7C91; +$brown: #757763; +$beige-light: #D0D1CD; +$beige-lighter: #EFF0EB; + $carbon-width: 300px $carbon-height: 100px $main-spacing: 3rem diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index f8f21f3f..b7ee680c 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -10121,7 +10121,7 @@ svg { } .bd-index-header .subtitle { - color: #b5b5b5; + color: #b5b5b5 !important; } .bd-index-header .subtitle strong { @@ -10132,6 +10132,90 @@ svg { text-align: left; } +.bd-index-custom-title { + color: #b5b5b5; +} + +.bd-index-custom-example { + padding: 1rem; +} + +.bd-index-custom-example .subtitle { + margin-bottom: 0.5rem; +} + +.bd-index-custom.bd-is-after { + color: #757763; + font-family: "Nunito", serif; + margin-top: 0.5rem; +} + +.bd-index-custom.bd-is-after a { + color: #FA7C91; +} + +.bd-index-custom.bd-is-after a:hover { + color: #363636; +} + +.bd-index-custom.bd-is-after .subtitle { + color: #757763; +} + +.bd-index-custom.bd-is-after .input, +.bd-index-custom.bd-is-after .select select { + background-color: #EFF0EB; + border-color: transparent; + border-width: 2px; + box-shadow: none; + font-family: "Nunito", serif; +} + +.bd-index-custom.bd-is-after .input:hover, +.bd-index-custom.bd-is-after .select select:hover { + border-color: #D0D1CD; +} + +.bd-index-custom.bd-is-after .input:focus, +.bd-index-custom.bd-is-after .select select:focus { + border-color: #FA7C91; + box-shadow: 0 0 0 0.125em rgba(250, 124, 145, 0.25); +} + +.bd-index-custom.bd-is-after .select:not(.is-multiple):not(:hover)::after { + border-color: #FA7C91; +} + +.bd-index-custom.bd-is-after .button.is-primary { + background-color: #8A4D76; + color: white; +} + +.bd-index-custom.bd-is-after .button.is-primary:hover { + background-color: #82486f; +} + +.bd-index-custom.bd-is-after .button.is-primary:active { + background-color: #7a4468; +} + +.bd-index-custom.bd-is-after .button.is-link { + background-color: #FA7C91; + color: white; +} + +.bd-index-custom.bd-is-after .button.is-link:hover { + background-color: #fa7087; +} + +.bd-index-custom.bd-is-after .button.is-link:active { + background-color: #f9637c; +} + +.bd-index-fullscreen .tabs a { + color: #b5b5b5 !important; +} + #grid .notification { padding-left: 0; padding-right: 0; diff --git a/docs/test.html b/docs/test.html new file mode 100644 index 00000000..3d198abf --- /dev/null +++ b/docs/test.html @@ -0,0 +1,22 @@ +--- +--- + + + + + + + + Bulma test page + + + + + {% include global/navbar.html %} + {% include test/from-to.html %} + {% include test/features.html %} + + + + + diff --git a/package.json b/package.json index d9994293..e51f57fa 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,7 @@ "docs-sass": "node-sass --output-style expanded docs/bulma-docs.sass docs/css/bulma-docs.css", "start": "npm run build-sass -- --watch", "start-docs": "npm run docs-sass -- --watch", - "start-test": "npm run test-sass -- --watch", - "test-sass": "node-sass --output-style expanded docs/bulma-test.sass docs/css/bulma-test.css", + "start-test": "npm run test-scss -- --watch", "test-scss": "node-sass --output-style expanded docs/bulma-test.scss docs/css/bulma-test.css" }, "files": [ From cbf8c62ddede1875bba55b2cfc42072c41ec0dae Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Tue, 10 Apr 2018 15:38:50 +0100 Subject: [PATCH 22/56] Add JS --- docs/_data/love.json | 6 ++-- docs/_includes/elements/tws.html | 7 ++-- docs/_includes/global/head.html | 3 -- docs/_includes/global/scripts.html | 15 ++++++++- docs/_includes/index/focus.html | 12 ++++--- docs/_includes/index/js.html | 28 ++++++++++++++++ docs/_includes/index/modifiers.html | 6 ++-- docs/_includes/index/start.html | 2 +- docs/_sass/index.sass | 24 +++++++++++++- docs/_sass/specific.sass | 2 ++ docs/_sass/sponsors.sass | 2 -- docs/bulma-docs.sass | 2 +- docs/css/bulma-docs.css | 48 ++++++++++++++++++++++++---- docs/images/index/js-frameworks.png | Bin 0 -> 65092 bytes docs/index.html | 7 ++-- 15 files changed, 128 insertions(+), 36 deletions(-) create mode 100644 docs/_includes/index/js.html create mode 100644 docs/images/index/js-frameworks.png diff --git a/docs/_data/love.json b/docs/_data/love.json index 42d4d79e..c6033044 100644 --- a/docs/_data/love.json +++ b/docs/_data/love.json @@ -83,7 +83,7 @@ "835834634655174658": { "id": "835834634655174658", "date": "12:51 PM - 26 Feb 2017", - "content": "bulma.io is an impressive CSS framework. Flexbox grid, no JS, modular components (use what you need), Sass.

    💯 @jgthmss.", + "content": "bulma.io is an impressive CSS framework. Flexbox grid, no JS, modular components (use what you need), Sass.

    💯 @jgthms.", "fullname": "scottgallant", "username": "scottgallant", "avatar": "https://pbs.twimg.com/profile_images/737847066030936064/1yHqQT-h_normal.jpg", @@ -693,7 +693,7 @@ "915580081938018304": { "id": "915580081938018304", "date": "3:11 PM - 4 Oct 2017", - "content": "Best css framework, amazing implementation. No idea how I lived without this.
    bulma.io #bulmaio via @jgthms", + "content": "Best css framework, amazing implementation. No idea how I lived without this.", "fullname": "Juan Carlos Andreu", "username": "andreujuanc", "avatar": "https://pbs.twimg.com/profile_images/530443756114153472/nSmN8eUj_normal.jpeg", @@ -1281,4 +1281,4 @@ "963476902324391937", "966731525709619200" ] -} \ No newline at end of file +} diff --git a/docs/_includes/elements/tws.html b/docs/_includes/elements/tws.html index 942913fd..8f3ab9ab 100644 --- a/docs/_includes/elements/tws.html +++ b/docs/_includes/elements/tws.html @@ -1,21 +1,18 @@
    - {% assign tweet = site.data.love.tweetsById.868829487072464897 %}{% include elements/tw.html tweet=tweet%} + {% assign tweet = site.data.love.tweetsById.910956939886043136 %}{% include elements/tw.html tweet=tweet%} {% assign tweet = site.data.love.tweetsById.912690697416753152 %}{% include elements/tw.html tweet=tweet%} - {% assign tweet = site.data.love.tweetsById.907551723459416071 %}{% include elements/tw.html tweet=tweet%} {% assign tweet = site.data.love.tweetsById.834140257054502913 %}{% include elements/tw.html tweet=tweet%}
    {% assign tweet = site.data.love.tweetsById.869284735440363520 %}{% include elements/tw.html tweet=tweet%} - {% assign tweet = site.data.love.tweetsById.910956939886043136 %}{% include elements/tw.html tweet=tweet%} - {% assign tweet = site.data.love.tweetsById.860885116909998080 %}{% include elements/tw.html tweet=tweet%} {% assign tweet = site.data.love.tweetsById.835834634655174658 %}{% include elements/tw.html tweet=tweet%} + {% assign tweet = site.data.love.tweetsById.874925154475929602 %}{% include elements/tw.html tweet=tweet%}
    - {% assign tweet = site.data.love.tweetsById.874925154475929602 %}{% include elements/tw.html tweet=tweet%} {% assign tweet = site.data.love.tweetsById.915580081938018304 %}{% include elements/tw.html tweet=tweet%} {% assign tweet = site.data.love.tweetsById.903629781744439297 %}{% include elements/tw.html tweet=tweet%} {% assign tweet = site.data.love.tweetsById.909653512010833920 %}{% include elements/tw.html tweet=tweet%} diff --git a/docs/_includes/global/head.html b/docs/_includes/global/head.html index 29ce1e02..39fba8bc 100644 --- a/docs/_includes/global/head.html +++ b/docs/_includes/global/head.html @@ -18,9 +18,6 @@ {% if page.mdi %} {% endif %} - {% if page.route == 'index' %} - - {% endif %} diff --git a/docs/_includes/global/scripts.html b/docs/_includes/global/scripts.html index 42cd1b04..c4241cfd 100644 --- a/docs/_includes/global/scripts.html +++ b/docs/_includes/global/scripts.html @@ -3,8 +3,21 @@ {% if page.route == 'index' %} - + + {% elsif page.doc-subtab == 'navbar' %} {% include examples/navbar-bottom.html %} diff --git a/docs/_includes/index/focus.html b/docs/_includes/index/focus.html index f987e501..4282477d 100644 --- a/docs/_includes/index/focus.html +++ b/docs/_includes/index/focus.html @@ -1,6 +1,10 @@ +{% assign responsiveness_link = site.data.links.by_id['overview-responsiveness'] %} +{% assign modularity_link = site.data.links.by_id['overview-modular'] %} +{% assign columns_link = site.data.links.by_id['columns-basics'] %} +

    - +

    Modular

    @@ -32,7 +36,7 @@
    - +

    Modern

    @@ -46,7 +50,7 @@
    - +

    Free

    diff --git a/docs/_includes/index/js.html b/docs/_includes/index/js.html new file mode 100644 index 00000000..e123711e --- /dev/null +++ b/docs/_includes/index/js.html @@ -0,0 +1,28 @@ +{% assign css_only_link = site.data.links.by_id['overview-classes'] %} + +
    +
    +
    +
    +
    +

    + + No JavaScript required + +

    +

    + CSS only, so it integrates in any JS environment +

    + +
    +
    + +
    +
    + {% assign tweet = site.data.love.tweetsById.860885116909998080 %} + {% include elements/tw.html tweet=tweet modifier='bd-is-grey' %} +
    +
    +
    +
    +
    diff --git a/docs/_includes/index/modifiers.html b/docs/_includes/index/modifiers.html index 86a92cf0..f679faff 100644 --- a/docs/_includes/index/modifiers.html +++ b/docs/_includes/index/modifiers.html @@ -15,10 +15,8 @@
    -
    - {% assign tweet = site.data.love.tweetsById.868829487072464897 %} - {% include elements/tw.html tweet=tweet modifier='bd-is-grey' %} -
    + {% assign tweet = site.data.love.tweetsById.868829487072464897 %} + {% include elements/tw.html tweet=tweet modifier='bd-is-grey' %}
    diff --git a/docs/_includes/index/start.html b/docs/_includes/index/start.html index fb933cc8..6ce44d1c 100644 --- a/docs/_includes/index/start.html +++ b/docs/_includes/index/start.html @@ -18,7 +18,7 @@ Read the docs - + diff --git a/docs/_sass/index.sass b/docs/_sass/index.sass index e01572fe..c5d0bd1c 100644 --- a/docs/_sass/index.sass +++ b/docs/_sass/index.sass @@ -1,7 +1,6 @@ // Index common .bd-index-header - margin-bottom: 3rem text-align: center a color: currentColor @@ -18,9 +17,18 @@ color: $grey-light !important strong color: currentColor + &:not(:last-child) + margin-bottom: 3rem &.bd-is-left text-align: left +// JS + +.bd-index-js-tweet + .bd-tw + margin-left: auto + margin-right: auto + // Customize .bd-index-custom-title @@ -72,6 +80,9 @@ background-color: darken($pink, 2.5%) &:active background-color: darken($pink, 5%) + +selection + background-color: $pink + color: $white // Fullscreen @@ -129,10 +140,21 @@ max-width: $intro-width .bd-focus-item + border-radius: $radius-large + padding-top: 1.25rem + transition-duration: $speed * 2 + transition-property: background-color .subtitle color: $grey-light strong color: currentColor + .title + transition-duration: $speed * 2 + transition-property: color + &:hover + background-color: $white-bis + .title + color: $link .bd-focus-icon .fa-mobile-alt diff --git a/docs/_sass/specific.sass b/docs/_sass/specific.sass index 94983954..6a260f47 100644 --- a/docs/_sass/specific.sass +++ b/docs/_sass/specific.sass @@ -11,6 +11,8 @@ display: block font-size: $size-5 padding: 1rem 3rem 1.5rem + transition-duration: $speed + transition-property: background-color, color strong font-weight: $weight-semibold &:hover diff --git a/docs/_sass/sponsors.sass b/docs/_sass/sponsors.sass index 8556a645..6659cd01 100644 --- a/docs/_sass/sponsors.sass +++ b/docs/_sass/sponsors.sass @@ -22,8 +22,6 @@ .bd-partners background-color: $white-bis - .container - max-width: $intro-width #carbonads .carbon-text padding-bottom: 0 diff --git a/docs/bulma-docs.sass b/docs/bulma-docs.sass index f43e6a93..0477776d 100644 --- a/docs/bulma-docs.sass +++ b/docs/bulma-docs.sass @@ -21,7 +21,7 @@ $beige-lighter: #EFF0EB; $carbon-width: 300px $carbon-height: 100px $main-spacing: 3rem -$intro-width: 1130px +$intro-width: 1080px %center align-items: center diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index b7ee680c..24715d72 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -10096,7 +10096,6 @@ svg { } .bd-index-header { - margin-bottom: 3rem; text-align: center; } @@ -10128,10 +10127,19 @@ svg { color: currentColor; } +.bd-index-header:not(:last-child) { + margin-bottom: 3rem; +} + .bd-index-header.bd-is-left { text-align: left; } +.bd-index-js-tweet .bd-tw { + margin-left: auto; + margin-right: auto; +} + .bd-index-custom-title { color: #b5b5b5; } @@ -10212,6 +10220,16 @@ svg { background-color: #f9637c; } +.bd-index-custom.bd-is-after ::-moz-selection { + background-color: #FA7C91; + color: white; +} + +.bd-index-custom.bd-is-after ::selection { + background-color: #FA7C91; + color: white; +} + .bd-index-fullscreen .tabs a { color: #b5b5b5 !important; } @@ -10267,7 +10285,14 @@ svg { .bd-focus { margin: 6rem auto 0; - max-width: 1130px; + max-width: 1080px; +} + +.bd-focus-item { + border-radius: 6px; + padding-top: 1.25rem; + transition-duration: 172ms; + transition-property: background-color; } .bd-focus-item .subtitle { @@ -10278,6 +10303,19 @@ svg { color: currentColor; } +.bd-focus-item .title { + transition-duration: 172ms; + transition-property: color; +} + +.bd-focus-item:hover { + background-color: #fafafa; +} + +.bd-focus-item:hover .title { + color: #3273dc; +} + .bd-focus-icon .fa-mobile-alt { color: #b86bff; margin-right: -20px; @@ -10737,6 +10775,8 @@ svg { display: block; font-size: 1.25rem; padding: 1rem 3rem 1.5rem; + transition-duration: 86ms; + transition-property: background-color, color; } .bd-link strong { @@ -12304,10 +12344,6 @@ svg { background-color: #fafafa; } -.bd-partners .container { - max-width: 1130px; -} - .bd-partners #carbonads .carbon-text { padding-bottom: 0; } diff --git a/docs/images/index/js-frameworks.png b/docs/images/index/js-frameworks.png new file mode 100644 index 0000000000000000000000000000000000000000..5db9084f8fc4fc62dcc4f2de9a8984e23227dc90 GIT binary patch literal 65092 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 {% include index/customize.html %} - - - +
    +{% include index/js.html %} {% include index/fullheight.html %} - - {% include index/start.html %} From 3dd37841867dc30ae16c7b9ac0c306d928a78a49 Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Tue, 10 Apr 2018 15:56:31 +0100 Subject: [PATCH 23/56] Add npm badge --- docs/_includes/index/intro.html | 4 ++-- docs/_includes/index/start.html | 6 +++--- docs/_sass/index.sass | 8 +++++--- docs/css/bulma-docs.css | 9 +++++++-- 4 files changed, 17 insertions(+), 10 deletions(-) diff --git a/docs/_includes/index/intro.html b/docs/_includes/index/intro.html index 61f915f0..f56219d0 100644 --- a/docs/_includes/index/intro.html +++ b/docs/_includes/index/intro.html @@ -5,12 +5,12 @@

    - Bulma is a free and open source CSS framework based on Flexbox. + Bulma is an open source CSS framework based on Flexbox and used by more than 100,000 developers.

    - +
    {% assign npmInstall = 'npm install bulma' %} diff --git a/docs/_includes/index/start.html b/docs/_includes/index/start.html index 6ce44d1c..127859c4 100644 --- a/docs/_includes/index/start.html +++ b/docs/_includes/index/start.html @@ -6,17 +6,17 @@

    - Get started + And much more!

    - + - Read the docs + Get started diff --git a/docs/_sass/index.sass b/docs/_sass/index.sass index c5d0bd1c..cefe414c 100644 --- a/docs/_sass/index.sass +++ b/docs/_sass/index.sass @@ -190,8 +190,10 @@ .intro-ghbtns height: 30px - // margin-bottom: 24px - margin-bottom: 46px + margin-bottom: 26px + iframe, + img + height: 30px .intro-npm background: $black-ter @@ -312,7 +314,7 @@ .intro-author color: $text-light font-size: $size-small - margin-top: 1rem + margin-top: 40px text-align: center a color: $text-strong diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 24715d72..2df869ae 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -10362,7 +10362,12 @@ svg { .intro-ghbtns { height: 30px; - margin-bottom: 46px; + margin-bottom: 26px; +} + +.intro-ghbtns iframe, +.intro-ghbtns img { + height: 30px; } .intro-npm { @@ -10517,7 +10522,7 @@ svg { .intro-author { color: #7a7a7a; font-size: 0.75rem; - margin-top: 1rem; + margin-top: 40px; text-align: center; } From 91776c091f787cd357ac84b4784dca1f922ea70a Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Tue, 10 Apr 2018 17:33:43 +0100 Subject: [PATCH 24/56] Footer stars --- docs/_data/links.json | 4 + docs/_includes/elements/patreon.html | 11 +- docs/_includes/footer/about.html | 13 ++ docs/_includes/footer/boxes.html | 48 +++++ docs/_includes/footer/contribute.html | 9 + docs/_includes/footer/share.html | 9 + docs/_includes/footer/support.html | 30 +++ docs/_includes/global/footer.html | 71 +------ docs/_includes/global/navbar.html | 12 +- docs/_includes/global/newsletter.html | 54 ++--- docs/_includes/global/sponsors.html | 38 ++-- docs/_sass/footer.sass | 183 ++++++++++------- docs/_sass/global.sass | 4 + docs/bulma-docs.sass | 2 + docs/css/bulma-docs.css | 229 +++++++++++++--------- docs/images/become-a-patron.png | Bin 0 -> 5120 bytes docs/images/become_a_patron_button.png | Bin 3086 -> 0 bytes docs/images/become_a_patron_button@2x.png | Bin 6579 -> 0 bytes docs/images/become_a_patron_button@3x.png | Bin 10221 -> 0 bytes docs/images/footer/bootstrap-to-bulma.png | Bin 0 -> 6723 bytes docs/images/footer/expo-examples.png | Bin 0 -> 165211 bytes docs/images/footer/jesse.png | Bin 0 -> 41712 bytes docs/images/footer/love-film.png | Bin 0 -> 148034 bytes docs/images/footer/love.png | Bin 0 -> 101025 bytes docs/test.html | 41 +++- sass/base/minireset.sass | 3 - sass/layout/footer.sass | 2 +- 27 files changed, 459 insertions(+), 304 deletions(-) create mode 100644 docs/_includes/footer/about.html create mode 100644 docs/_includes/footer/boxes.html create mode 100644 docs/_includes/footer/contribute.html create mode 100644 docs/_includes/footer/share.html create mode 100644 docs/_includes/footer/support.html create mode 100644 docs/images/become-a-patron.png delete mode 100644 docs/images/become_a_patron_button.png delete mode 100644 docs/images/become_a_patron_button@2x.png delete mode 100644 docs/images/become_a_patron_button@3x.png create mode 100644 docs/images/footer/bootstrap-to-bulma.png create mode 100644 docs/images/footer/expo-examples.png create mode 100644 docs/images/footer/jesse.png create mode 100644 docs/images/footer/love-film.png create mode 100644 docs/images/footer/love.png diff --git a/docs/_data/links.json b/docs/_data/links.json index c22fd67d..ef01cc05 100644 --- a/docs/_data/links.json +++ b/docs/_data/links.json @@ -330,6 +330,10 @@ "love": { "name": "Love", "path": "/love" + }, + "bootstrap": { + "name": "Alternative to Bootstrap", + "path": "/alternative-to-bootstrap" } }, "categories": { diff --git a/docs/_includes/elements/patreon.html b/docs/_includes/elements/patreon.html index 1277955c..06731557 100644 --- a/docs/_includes/elements/patreon.html +++ b/docs/_includes/elements/patreon.html @@ -1,8 +1,3 @@ - + + Become a patron + diff --git a/docs/_includes/footer/about.html b/docs/_includes/footer/about.html new file mode 100644 index 00000000..97d39d8e --- /dev/null +++ b/docs/_includes/footer/about.html @@ -0,0 +1,13 @@ + + + + + diff --git a/docs/_includes/footer/boxes.html b/docs/_includes/footer/boxes.html new file mode 100644 index 00000000..624bb11d --- /dev/null +++ b/docs/_includes/footer/boxes.html @@ -0,0 +1,48 @@ +{% assign boostrap_link = site.data.links.by_id['boostrap'] %} +{% assign expo_link = site.data.links.by_id['expo'] %} +{% assign love_link = site.data.links.by_id['love'] %} + + diff --git a/docs/_includes/footer/contribute.html b/docs/_includes/footer/contribute.html new file mode 100644 index 00000000..50454906 --- /dev/null +++ b/docs/_includes/footer/contribute.html @@ -0,0 +1,9 @@ + + + diff --git a/docs/_includes/footer/share.html b/docs/_includes/footer/share.html new file mode 100644 index 00000000..71174f01 --- /dev/null +++ b/docs/_includes/footer/share.html @@ -0,0 +1,9 @@ + + + diff --git a/docs/_includes/footer/support.html b/docs/_includes/footer/support.html new file mode 100644 index 00000000..936995cd --- /dev/null +++ b/docs/_includes/footer/support.html @@ -0,0 +1,30 @@ + diff --git a/docs/_includes/global/footer.html b/docs/_includes/global/footer.html index 05be9bfd..fe9a63eb 100644 --- a/docs/_includes/global/footer.html +++ b/docs/_includes/global/footer.html @@ -4,81 +4,16 @@ {% include global/sponsors.html %} +
    + {% include global/newsletter.html %} diff --git a/docs/_includes/global/navbar.html b/docs/_includes/global/navbar.html index a9a8a959..d5eed583 100644 --- a/docs/_includes/global/navbar.html +++ b/docs/_includes/global/navbar.html @@ -83,17 +83,7 @@ diff --git a/docs/_layouts/documentation.html b/docs/_layouts/documentation.html index 201633eb..d4c07c4b 100644 --- a/docs/_layouts/documentation.html +++ b/docs/_layouts/documentation.html @@ -84,7 +84,7 @@ route: documentation
    diff --git a/docs/_layouts/more.html b/docs/_layouts/more.html new file mode 100644 index 00000000..8d9d1d61 --- /dev/null +++ b/docs/_layouts/more.html @@ -0,0 +1,85 @@ +--- +layout: default +route: more +--- + +{% include global/navbar.html id="More" %} + +{% assign current_link_id = page.breadcrumb | last %} +{% assign current_link = site.data.links.by_id[current_link_id] %} + +{% assign category_links = site.data.links.more %} + +{% for link_id in category_links %} + {% if link_id == current_link_id %} + {% unless forloop.first %} + {% assign previous_index = forloop.index0 | minus: 1 %} + {% assign previous_link_id = category_links[previous_index] %} + {% assign previous_link = site.data.links.by_id[previous_link_id] %} + {% endunless %} + + {% unless forloop.last %} + {% assign next_index = forloop.index0 | plus: 1 %} + {% assign next_link_id = category_links[next_index] %} + {% assign next_link = site.data.links.by_id[next_link_id] %} + {% endunless %} + {% endif %} +{% endfor %} + +
    +
    +
    +
    +
    + {% include components/breadcrumb.html %} + +
    +
    +

    + {% if page.title %} + {{ page.title }} + {% else %} + {{ current_link.name }} + {% endif %} +

    +

    + {% if page.subtitle %} + {{ page.subtitle }} + {% else %} + {{ current_link.subtitle }} + {% endif %} +

    +
    + +
    + {% include elements/carbon.html %} +
    +
    + +
    + {{ content }} +
    + + + + {% include elements/improve-page.html %} +
    + + +
    +
    +
    diff --git a/docs/_sass/bootstrap.sass b/docs/_sass/bootstrap.sass index 5c7335d8..7398075c 100644 --- a/docs/_sass/bootstrap.sass +++ b/docs/_sass/bootstrap.sass @@ -1,20 +1,8 @@ $bootstrap: #6f5499 $bootstrap-invert: #fff -.bd-bootstrap - .hero - background-color: $bootstrap - color: $bootstrap-invert - .title, - .subtitle - color: currentColor - .subtitle - color: rgba($bootstrap-invert, 0.5) - .subtitle a - border-bottom: 1px solid currentColor - color: currentColor - &:hover - color: $bootstrap-invert +.bd-bootstrap-table + margin: 3rem 0 .bd-pros-heading padding: 0 2rem @@ -54,11 +42,7 @@ $bootstrap-invert: #fff .icon color: $bootstrap -.bd-separator - color: $border - margin: 0 0.25em - -.bd-comparison +.bd-bootstrap-comparison margin: 0 auto max-width: 42rem .table @@ -93,5 +77,5 @@ $bootstrap-invert: #fff color: $text-strong font-weight: $weight-bold -.bd-comparison-header +.bd-bootstrap-comparison-header margin-bottom: 3rem diff --git a/docs/alternative-to-bootstrap.html b/docs/alternative-to-bootstrap.html index 8c7a366b..c431d86a 100644 --- a/docs/alternative-to-bootstrap.html +++ b/docs/alternative-to-bootstrap.html @@ -1,4 +1,10 @@ --- +fulltitle: "Bulma: an alternative to Bootstrap" +layout: more +breadcrumb: +- home +- more +- bootstrap bulma: - type: "bulma" icon: "css3" @@ -25,7 +31,7 @@ bulma: - type: "bulma" icon: "code" title: "No JavaScript" - content: '

    By focusing only on CSS, Bulma provides a lightweight solution that can easily be implemented in any development context.

    ' + content: '

    By focusing only on CSS, Bulma provides a lightweight solution that can easily be implemented in any development context.

    ' bootstrap: - type: "bootstrap" icon: "plug" @@ -46,165 +52,82 @@ bootstrap: content: "Bootstrap has some **elements** like [list group](https://getbootstrap.com/components/#list-group), [wells](https://getbootstrap.com/components/#wells), or [page header](https://getbootstrap.com/components/#page-header) that Bulma doesn't have." --- - - - - - - - +
    +

    + Both Bulma and Bootstrap are CSS frameworks that allow developers to quickly build web interfaces with ease. While they have fairly similar features, they still differ in some ways, and you might wonder why you should choose one framework over the other. This page is here to help answer that. +

    +
    - Bulma: an alternative to Bootstrap - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - {% include global/navbar.html id="Documentation" %} - -
    -
    -
    -
    -
    -
    -

    - Bulma: an alternative to Bootstrap -

    -

    - Learn how Bulma can become a replacement for Bootstrap -

    -
    -
    - {% include elements/carbon.html %} -
    -
    -
    -
    -
    -
    - -
    -

    -
    - Both Bulma and Bootstrap are CSS frameworks that allow developers to quickly build web interfaces with ease. While they have fairly similar features, they still differ in some ways, and you might wonder why you should choose one framework over the other. This page is here to help answer that. -
    -

    +
    +
    +
    +

    + Why choose Bulma +

    +
    + {% include svg/bulma-b.svg %} +
    +
    + {% for pro in page.bulma %} + {% + include content/pro.html + type=pro.type + icon=pro.icon + icon_brand=pro.icon_brand + title=pro.title + content=pro.content + %} + {% endfor %} +
    -
    -
    - -
    -
    -

    - Why choose Bulma -

    -
    - {% include svg/bulma-b.svg %} -
    -
    - {% for pro in page.bulma %} - {% - include content/pro.html - type=pro.type - icon=pro.icon - icon_brand=pro.icon_brand - title=pro.title - content=pro.content - %} - {% endfor %} -
    -
    - -
    -

    - Why choose Bootstrap -

    -
    - {% include svg/bootstrap-icon.svg %} -
    -
    - {% for pro in page.bootstrap %} - {% - include content/pro.html - type=pro.type - icon=pro.icon - icon_brand=pro.icon_brand - title=pro.title - content=pro.content - %} - {% endfor %} -
    -
    -
    - +
    +

    + Why choose Bootstrap +

    +
    + {% include svg/bootstrap-icon.svg %} +
    +
    + {% for pro in page.bootstrap %} + {% + include content/pro.html + type=pro.type + icon=pro.icon + icon_brand=pro.icon_brand + title=pro.title + content=pro.content + %} + {% endfor %}
    -
    +
    +
    +
    -
    - -
    -
    -
    -
    -

    - Comparison table -

    -

    - See which elements of the framework exist (or not) in the other -

    -
    - - - - - - - - - - - - - - - {% include content/comparison.html %} - -
    {% include svg/bulma-b.svg %}Bulma{% include svg/bootstrap-icon.svg %}Bootstrap
    {% include svg/bulma-b.svg %}Bulma{% include svg/bootstrap-icon.svg %}Bootstrap
    -
    -
    -
    - - {% include global/footer.html %} - - +
    +
    +

    + Comparison table +

    +

    + See which elements of the framework exist (or not) in the other +

    +
    + + + + + + + + + + + + + + + {% include content/comparison.html %} + +
    {% include svg/bulma-b.svg %}Bulma{% include svg/bootstrap-icon.svg %}Bootstrap
    {% include svg/bulma-b.svg %}Bulma{% include svg/bootstrap-icon.svg %}Bootstrap
    +
    diff --git a/docs/backers.html b/docs/backers.html index ff917940..eea3d86e 100644 --- a/docs/backers.html +++ b/docs/backers.html @@ -1,75 +1,53 @@ --- title: Backers via Patreon -layout: default +layout: more route: backers +breadcrumb: +- home +- more +- patreon-backers --- -{% include global/navbar.html id="BackersNavbar" %} +

    + Website sponsors via Patreon ($300+) +

    +
    +
      + {% for backer in site.data.backers["300"] reversed %} + {% include elements/patreon-item.html %} + {% endfor %} +
    +
    -
    -
    -
    -
    -
    -

    - Backers via Patreon -

    -

    - Everyone who is supporting Bulma -

    -
    -
    - {% include elements/carbon.html %} -
    -
    -
    -
    -
    +

    + Homepage sponsors via Patreon ($100+) +

    +
    +
      + {% for backer in site.data.backers["100"] reversed %} + {% include elements/patreon-item.html %} + {% endfor %} +
    +
    -
    -
    -

    - Website sponsors via Patreon ($300+) -

    -
    -
      - {% for backer in site.data.backers["300"] reversed %} - {% include elements/patreon-item.html %} - {% endfor %} -
    -
    +

    + Generous backers via Patreon ($30+) +

    +
    +
      + {% for backer in site.data.backers["30"] reversed %} + {% include elements/patreon-item.html %} + {% endfor %} +
    +
    -

    - Homepage sponsors via Patreon ($100+) -

    -
    -
      - {% for backer in site.data.backers["100"] reversed %} - {% include elements/patreon-item.html %} - {% endfor %} -
    -
    - -

    - Generous backers via Patreon ($30+) -

    -
    -
      - {% for backer in site.data.backers["30"] reversed %} - {% include elements/patreon-item.html %} - {% endfor %} -
    -
    - -

    - Backers via Patreon ($10+) -

    -
    -
      - {% for backer in site.data.backers["10"] reversed %} - {% include elements/patreon-item.html %} - {% endfor %} -
    -
    -
    -
    +

    + Backers via Patreon ($10+) +

    +
    +
      + {% for backer in site.data.backers["10"] reversed %} + {% include elements/patreon-item.html %} + {% endfor %} +
    +
    diff --git a/docs/bulma-start.html b/docs/bulma-start.html index 24055c6c..9177b1f0 100644 --- a/docs/bulma-start.html +++ b/docs/bulma-start.html @@ -1,81 +1,60 @@ --- +title: "Bulma start" fulltitle: "Bulma start: a tiny npm package to get started with Bulma" -layout: default +layout: more route: bulma-start download_url: https://github.com/jgthms/bulma-start/archive/master.zip github_url: https://github.com/jgthms/bulma-start npm_url: https://www.npmjs.com/package/bulma-start +breadcrumb: +- home +- more +- bulma-start --- -{% include global/navbar.html id="BulmaStartHero" %} - -
    -
    -
    -
    -
    -

    - Bulma Start -

    -

    - Tiny npm package to get started with Bulma -

    -
    -
    - {% include elements/carbon.html %} -
    -
    +
    +
    +

    bulma-start is a tiny npm package that includes the npm dependencies you need to build your own website with Bulma.

    +
    + Download +
    +
    -
    - -
    -
    -
    -
    -

    bulma-start is a tiny npm package that includes the npm dependencies you need to build your own website with Bulma.

    -
    - Download -
    - -
    -
    -

    Bulma: a Flexbox CSS framework

    -
    -
    - - {% include elements/anchor.html name="Install" %} - - {% highlight bash %}npm install bulma-start{% endhighlight %} - -

    or

    - - {% highlight bash %}yarn add bulma-start{% endhighlight %} - - {% include elements/anchor.html name="What’s included" %} - -
    -

    The npm dependencies included in package.json are:

    - - - -

    Apart from package.json, the following files are included:

    - -
      -
    • .babelrc configuration file for Babel
    • -
    • .gitignore common Git ignored files
    • -
    • index.html this HTML5 file
    • -
    • _sass/main.scss a basic SCSS file that imports Bulma and explains how to customize your styles, and compiles to css/main.css
    • -
    • _javascript/main.js an ES6 JavaScript that compiles to lib/main.js
    • -
    -
    +
    +

    Bulma: a Flexbox CSS framework

    -
    +
    + +{% include elements/anchor.html name="Install" %} + +{% highlight bash %}npm install bulma-start{% endhighlight %} + +

    or

    + +{% highlight bash %}yarn add bulma-start{% endhighlight %} + +{% include elements/anchor.html name="What’s included" %} + +
    +

    The npm dependencies included in package.json are:

    + + + +

    Apart from package.json, the following files are included:

    + +
      +
    • .babelrc configuration file for Babel
    • +
    • .gitignore common Git ignored files
    • +
    • index.html this HTML5 file
    • +
    • _sass/main.scss a basic SCSS file that imports Bulma and explains how to customize your styles, and compiles to css/main.css
    • +
    • _javascript/main.js an ES6 JavaScript that compiles to lib/main.js
    • +
    +
    diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 1263cd94..91e25386 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -12212,27 +12212,8 @@ svg { } } -.bd-bootstrap .hero { - background-color: #6f5499; - color: #fff; -} - -.bd-bootstrap .hero .title, -.bd-bootstrap .hero .subtitle { - color: currentColor; -} - -.bd-bootstrap .hero .subtitle { - color: rgba(255, 255, 255, 0.5); -} - -.bd-bootstrap .hero .subtitle a { - border-bottom: 1px solid currentColor; - color: currentColor; -} - -.bd-bootstrap .hero .subtitle a:hover { - color: #fff; +.bd-bootstrap-table { + margin: 3rem 0; } .bd-pros-heading { @@ -12281,28 +12262,23 @@ svg { color: #6f5499; } -.bd-separator { - color: #dbdbdb; - margin: 0 0.25em; -} - -.bd-comparison { +.bd-bootstrap-comparison { margin: 0 auto; max-width: 42rem; } -.bd-comparison .table { +.bd-bootstrap-comparison .table { color: #ff3860; } -.bd-comparison .table thead th, -.bd-comparison .table tfoot th { +.bd-bootstrap-comparison .table thead th, +.bd-bootstrap-comparison .table tfoot th { font-size: 1.5rem; text-align: center; } -.bd-comparison .table thead svg, -.bd-comparison .table tfoot svg { +.bd-bootstrap-comparison .table thead svg, +.bd-bootstrap-comparison .table tfoot svg { height: 1.5rem; margin-right: 1rem; position: relative; @@ -12310,36 +12286,36 @@ svg { width: auto; } -.bd-comparison .table tbody th { +.bd-bootstrap-comparison .table tbody th { font-size: 1.25rem; text-align: center; } -.bd-comparison .table tbody td { +.bd-bootstrap-comparison .table tbody td { font-family: monospace; width: 50%; } -.bd-comparison .table tbody a { +.bd-bootstrap-comparison .table tbody a { color: currentColor; } -.bd-comparison .table tbody a:hover { +.bd-bootstrap-comparison .table tbody a:hover { text-decoration: underline; } -.bd-comparison .table .bd-is-empty { +.bd-bootstrap-comparison .table .bd-is-empty { background-color: whitesmoke; color: #7a7a7a; } -.bd-comparison .table .bd-is-unique { +.bd-bootstrap-comparison .table .bd-is-unique { background-color: rgba(35, 209, 96, 0.25); color: #363636; font-weight: 700; } -.bd-comparison-header { +.bd-bootstrap-comparison-header { margin-bottom: 3rem; } diff --git a/docs/extensions.html b/docs/extensions.html index 1c23ef5a..e97867d7 100644 --- a/docs/extensions.html +++ b/docs/extensions.html @@ -1,7 +1,12 @@ --- title: Extensions -layout: default +layout: more route: extensions +route: backers +breadcrumb: +- home +- more +- extensions extensions: - name: bulma-accordion url: https://wikiki.github.io/components/accordion @@ -110,65 +115,39 @@ extensions: height: 469 --- -{% include global/navbar.html id="Extensions" %} +{% for extension in page.extensions %} + +
    +
    +

    + {{ extension.name }} +

    +

    + {{ extension.url | remove:'http://' | remove:'https://' | remove:'www.' }} +

    +
    +
    + +
    +
    +
    +{% endfor %} -
    -
    -
    -
    -
    -

    - Extensions -

    -

    - Side projects to enhance Bulma -

    +
    +
    +
    +
    +
    +

    Have an extension to share with the community?

    -
    - {% include elements/carbon.html %} +
    +
    -
    - -
    -
    - {% for extension in page.extensions %} - -
    -
    -

    - {{ extension.name }} -

    -

    - {{ extension.url | remove:'http://' | remove:'https://' | remove:'www.' }} -

    -
    -
    - -
    -
    -
    - {% endfor %} - -
    -
    -
    -
    -
    -

    Have an extension to share with the community?

    -
    -
    - -
    -
    -
    -
    -
    +
    diff --git a/docs/made-with-bulma.html b/docs/made-with-bulma.html index ef52d8a6..db5fa4db 100644 --- a/docs/made-with-bulma.html +++ b/docs/made-with-bulma.html @@ -1,7 +1,11 @@ --- fulltitle: Made with Bulma badges -layout: default +layout: more route: made-with-bulma +breadcrumb: +- home +- more +- made-with-bulma images: - name: "Default" description: "White boxed" @@ -41,123 +45,96 @@ images: {% endcapture %} -{% include global/navbar.html id="MadeWithBulmaHero" %} - -
    -
    -
    -
    -
    -

    - Made with Bulma -

    -

    - Join the Bulma community by displaying a badge on your website -

    -
    -
    - {% include elements/carbon.html %} -
    -
    -
    -
    -
    - -
    -
    -

    6 badges available

    -
    -

    - The Made with Bulma badge is available in 6 different versions: -

    -
    - - - - - - - - - - - {% for image in page.images %} - {% assign imageUrl = "/images/made-with-bulma" | prepend: site.url | append: image.type | append: ".png" %} - - - - - - - {% endfor %} - - - - - - -
    TypePreviewDescriptionDownload
    {{ image.name }}Made with Bulma{{ image.description }} - Download image -
    All 6made-with-bulma-badges.zipDownload all 6 badges
    - - {% include elements/anchor.html name="Usage" %} - -
    -

    - Ideally the image is displayed at 128x24 pixels, and links back to the Bulma website: -

    -
    - -
    -
    - - Made with Bulma - -
    -
    - {% highlight html %}{{ image_example }}{% endhighlight %} -
    -
    - -
    -

    - Since the original image dimensions are 512x96 pixels, you can also display it at 256x48 without losing any quality: -

    -
    - -
    -
    - - Made with Bulma - -
    -
    - {% highlight html %}{{ image_bigger_example }}{% endhighlight %} -
    -
    - - {% include elements/anchor.html name="Badge snippets" %} - -
    -

    - You can simply embed an image directly on your website by using one of the following snippets. -

    -
    +

    6 badges available

    +
    +

    + The Made with Bulma badge is available in 6 different versions: +

    +
    + + + + + + + + + + {% for image in page.images %} + {% assign imageUrl = "/images/made-with-bulma" | prepend: site.url | append: image.type | append: ".png" %} + + + + + + + {% endfor %} + + + + + + +
    TypePreviewDescriptionDownload
    {{ image.name }}Made with Bulma{{ image.description }} + Download image +
    All 6made-with-bulma-badges.zipDownload all 6 badges
    + +{% include elements/anchor.html name="Usage" %} + +
    +

    + Ideally the image is displayed at 128x24 pixels, and links back to the Bulma website: +

    +
    + +
    +
    + + Made with Bulma + +
    +
    + {% highlight html %}{{ image_example }}{% endhighlight %} +
    +
    + +
    +

    + Since the original image dimensions are 512x96 pixels, you can also display it at 256x48 without losing any quality: +

    +
    + +
    +
    + + Made with Bulma + +
    +
    + {% highlight html %}{{ image_bigger_example }}{% endhighlight %} +
    +
    + +{% include elements/anchor.html name="Badge snippets" %} + +
    +

    + You can simply embed an image directly on your website by using one of the following snippets. +

    +
    +{% for image in page.images %} {% capture image_example %} - Made with Bulma +Made with Bulma {% endcapture %} -
    -
    - {{ image_example }} -
    -
    - {% highlight html %}{{ image_example }}{% endhighlight %} -
    -
    - {% endfor %} +
    +
    + {{ image_example }}
    -
    - +
    + {% highlight html %}{{ image_example }}{% endhighlight %} +
    +
    +{% endfor %} From a88b024dcc280fa7c5125a920addf09f622009a6 Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Tue, 10 Apr 2018 22:38:00 +0100 Subject: [PATCH 28/56] Add documentation icons --- docs/_data/icons.json | 2 +- docs/_data/links.json | 15 ++++++++ docs/_includes/components/links.html | 10 +++++- docs/_includes/global/navbar.html | 43 +++++++++++----------- docs/_includes/index/start.html | 7 ++-- docs/_sass/header.sass | 13 ++++++- docs/_sass/specific.sass | 19 +++++----- docs/_sass/sponsors.sass | 3 ++ docs/blog.html | 8 +++-- docs/css/bulma-docs.css | 53 ++++++++++++++++++++-------- docs/documentation.html | 2 +- docs/made-with-bulma.html | 3 +- docs/more.html | 8 +++-- sass/components/navbar.sass | 13 +++++-- 14 files changed, 139 insertions(+), 60 deletions(-) diff --git a/docs/_data/icons.json b/docs/_data/icons.json index 72f712f4..b5ed5b53 100644 --- a/docs/_data/icons.json +++ b/docs/_data/icons.json @@ -1,6 +1,6 @@ { "fontawesome4": "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css", - "fontawesome5": "https://use.fontawesome.com/releases/v5.0.6/js/all.js", + "fontawesome5": "https://use.fontawesome.com/releases/v5.0.7/js/all.js", "iconic": "https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic.min.css", "ionicons": "https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css", "mdi": "https://cdn.materialdesignicons.com/2.1.19/css/materialdesignicons.min.css" diff --git a/docs/_data/links.json b/docs/_data/links.json index 962d6c72..cddf5800 100644 --- a/docs/_data/links.json +++ b/docs/_data/links.json @@ -12,6 +12,8 @@ "overview": { "name": "Overview", "subtitle": "An overview of what Bulma as a framework is all about", + "color": "primary", + "icon": "eye", "path": "/documentation/overview" }, "overview-start": { @@ -62,6 +64,8 @@ "modifiers": { "name": "Modifiers", "subtitle": "An easy-to-read naming system designed for humans", + "color": "info", + "icon": "cogs", "path": "/documentation/modifiers" }, "modifiers-syntax": { @@ -92,6 +96,8 @@ "columns": { "name": "Columns", "subtitle": "The power of Flexbox in a simple interface", + "color": "star", + "icon": "columns", "path": "/documentation/columns" }, "columns-basics": { @@ -127,6 +133,8 @@ "layout": { "name": "Layout", "subtitle": "Design the structure of your webpage with these CSS classes", + "color": "success", + "icon": "warehouse", "path": "/documentation/layout" }, "layout-container": { @@ -167,6 +175,9 @@ "form": { "name": "Form", "subtitle": "The indispensable form controls, designed for maximum clarity", + "color": "link", + "icon_brand": "true", + "icon": "wpforms", "path": "/documentation/form" }, "form-general": { @@ -207,6 +218,8 @@ "elements": { "name": "Elements", "subtitle": "Essential interface elements that only require a single CSS class", + "color": "orange", + "icon": "cube", "path": "/documentation/elements" }, "elements-box": { @@ -267,6 +280,8 @@ "components": { "name": "Components", "subtitle": "Advanced multi-part components with lots of possibilities", + "color": "danger", + "icon": "cubes", "path": "/documentation/components" }, "components-breadcrumb": { diff --git a/docs/_includes/components/links.html b/docs/_includes/components/links.html index 35363a5f..5e2faa96 100644 --- a/docs/_includes/components/links.html +++ b/docs/_includes/components/links.html @@ -15,7 +15,15 @@ {% endif %} diff --git a/docs/_sass/native.sass b/docs/_sass/native.sass index 446d7a32..ca27aaa9 100644 --- a/docs/_sass/native.sass +++ b/docs/_sass/native.sass @@ -16,6 +16,10 @@ justify-content: center padding: 2em text-decoration: none + &:hover + .native-cta + box-shadow: 0 1rem 2rem 0 rgba($black, 0.1) + transform: translateY(-0.25rem) .native-img border-radius: 3px @@ -46,22 +50,15 @@ .native-cta border: none - border-radius: 3px - box-shadow: 0 6px 13px 0 hsla(0, 0%, 0%, .15) - display: inline-block + box-shadow: 0 0.5rem 1rem 0 rgba($black, 0.2) flex-grow: 0 flex-shrink: 0 - font-size: 0.75em - font-weight: $weight-normal - padding: 0.75em 1em - text-transform: uppercase - transform: translateY(-1px) - transition: transform .3s ease-in-out - vertical-align: top - white-space: nowrap - &:hover - box-shadow: none - transform: translateY(1px) + font-weight: $weight-semibold + height: auto + padding: 0.5em 1em + transition-duration: $speed * 2 + transition-property: box-shadow, transform + will-change: box-shadow, transform $native-bp: 600px diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 4bb7ddf9..068c01b2 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -12754,6 +12754,11 @@ svg { text-decoration: none; } +.native-flex:hover .native-cta { + box-shadow: 0 1rem 2rem 0 rgba(10, 10, 10, 0.1); + transform: translateY(-0.25rem); +} + .native-img { border-radius: 3px; flex-grow: 0; @@ -12788,24 +12793,15 @@ svg { .native-cta { border: none; - border-radius: 3px; - box-shadow: 0 6px 13px 0 rgba(0, 0, 0, 0.15); - display: inline-block; + box-shadow: 0 0.5rem 1rem 0 rgba(10, 10, 10, 0.2); flex-grow: 0; flex-shrink: 0; - font-size: 0.75em; - font-weight: 400; - padding: 0.75em 1em; - text-transform: uppercase; - transform: translateY(-1px); - transition: transform .3s ease-in-out; - vertical-align: top; - white-space: nowrap; -} - -.native-cta:hover { - box-shadow: none; - transform: translateY(1px); + font-weight: 600; + height: auto; + padding: 0.5em 1em; + transition-duration: 172ms; + transition-property: box-shadow, transform; + will-change: box-shadow, transform; } @media screen and (max-width: 599px) { From 96f216488391f3329d6b5cd17b92682d9e6e38ea Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Tue, 10 Apr 2018 23:52:51 +0100 Subject: [PATCH 32/56] Add anchors --- docs/_includes/components/anchors.html | 8 ++ docs/_includes/elements/anchor.html | 4 +- docs/_javascript/main.js | 112 +++++++++++++++++-------- docs/_layouts/documentation.html | 1 + docs/_sass/main.sass | 42 ++++++++-- docs/css/bulma-docs.css | 45 ++++++++-- docs/lib/main.js | 112 +++++++++++++++++-------- 7 files changed, 238 insertions(+), 86 deletions(-) create mode 100644 docs/_includes/components/anchors.html diff --git a/docs/_includes/components/anchors.html b/docs/_includes/components/anchors.html new file mode 100644 index 00000000..c66065c4 --- /dev/null +++ b/docs/_includes/components/anchors.html @@ -0,0 +1,8 @@ +
    + diff --git a/docs/_includes/elements/anchor.html b/docs/_includes/elements/anchor.html index 946f49ca..5ab9cf67 100644 --- a/docs/_includes/elements/anchor.html +++ b/docs/_includes/elements/anchor.html @@ -1,7 +1,9 @@

    - {{ include.name }} + + {{ include.name }} + # diff --git a/docs/_javascript/main.js b/docs/_javascript/main.js index 67459d3b..7df0b12f 100644 --- a/docs/_javascript/main.js +++ b/docs/_javascript/main.js @@ -5,26 +5,6 @@ document.addEventListener('DOMContentLoaded', () => { const cookieBookModalName = 'bulma_closed_book_modal'; const cookieBookModal = Cookies.getJSON(cookieBookModalName) || false; - // Book modal - - // const $bookModal = document.getElementById('bookModal'); - // const $bookModalCloseButtons = getAll('.bd-book-modal-close'); - - // if (!cookieBookModal) { - // setTimeout(() => { - // openModal('bookModal'); - // }, 5000); - // } - - // if ($bookModalCloseButtons.length > 0) { - // $bookModalCloseButtons.forEach($el => { - // $el.addEventListener('click', event => { - // event.stopPropagation(); - // Cookies.set(cookieBookModalName, true, { expires: 30 }); - // }); - // }); - // } - // Sidebar links const $categories = getAll('#categories .bd-category'); @@ -49,6 +29,56 @@ document.addEventListener('DOMContentLoaded', () => { }); } + const anchors_ref_el = document.getElementById('anchorsReference'); + const anchors_el = document.getElementById('anchors'); + const anchor_links_el = getAll('.bd-anchor-link'); + + if (anchors_el && anchor_links_el.length > 0) { + const anchors_el_list = anchors_el.querySelector('.bd-anchors-list'); + + anchor_links_el.forEach(el => { + const link_target = el.getAttribute('href'); + const link_text = el.previousElementSibling.innerText; + + if (link_text != '') { + const item_el = createAnchorLink(link_text, link_target); + anchors_el_list.appendChild(item_el); + } + }); + + const back_to_top_el = createAnchorLink('Back to top', ''); + back_to_top_el.onclick = scrollToTop; + anchors_el_list.appendChild(back_to_top_el); + } + + function scrollToTop() { + window.scrollTo(0, 0); + } + + function createAnchorLink(text, target) { + const item_el = document.createElement('li'); + const link_el = document.createElement('a'); + const text_node = document.createTextNode(text); + + if (target) { + link_el.setAttribute('href', target); + } + + link_el.appendChild(text_node); + item_el.appendChild(link_el); + + return item_el; + } + + function closeCategories(current_el) { + $categories.forEach(el => { + if (current_el == el) { + return; + } + el.classList.remove('is-active'); + }); + } + // Meta links const $metalinks = getAll('#meta a'); @@ -220,6 +250,7 @@ document.addEventListener('DOMContentLoaded', () => { // Scrolling + const html_el = document.documentElement; const navbarEl = document.getElementById('navbar'); const navbarBurger = document.getElementById('navbarBurger'); const specialShadow = document.getElementById('specialShadow'); @@ -241,6 +272,18 @@ document.addEventListener('DOMContentLoaded', () => { } }); + function whenScrolling(lastY, currentY) { + if (anchors_ref_el) { + const bounds = anchors_ref_el.getBoundingClientRect(); + + if (bounds.top < 1) { + anchors_el.classList.add('is-pinned'); + } else { + anchors_el.classList.remove('is-pinned'); + } + } + } + function upOrDown(lastY, currentY) { if (currentY >= lastY) { return goingDown(currentY); @@ -310,23 +353,22 @@ document.addEventListener('DOMContentLoaded', () => { } } - // translateHeader(window.scrollY, false); + let ticking = false; + let lastY = 0; - // let ticking = false; - // let lastY = 0; + window.addEventListener('scroll', function() { + const currentY = window.scrollY; - // window.addEventListener('scroll', function() { - // const currentY = window.scrollY; + if (!ticking) { + window.requestAnimationFrame(function() { + // upOrDown(lastY, currentY); + whenScrolling(lastY, currentY); + ticking = false; + lastY = currentY; + }); + } - // if (!ticking) { - // window.requestAnimationFrame(function() { - // upOrDown(lastY, currentY); - // ticking = false; - // lastY = currentY; - // }); - // } - - // ticking = true; - // }); + ticking = true; + }); }); diff --git a/docs/_layouts/documentation.html b/docs/_layouts/documentation.html index d4c07c4b..a2eccb6f 100644 --- a/docs/_layouts/documentation.html +++ b/docs/_layouts/documentation.html @@ -85,6 +85,7 @@ route: documentation

    diff --git a/docs/_sass/main.sass b/docs/_sass/main.sass index 38cc1af6..53f2fb92 100644 --- a/docs/_sass/main.sass +++ b/docs/_sass/main.sass @@ -77,6 +77,19 @@ right: 0 top: 0 +%bd-list + font-size: 0.875rem + li + &:not(:last-child) + margin-bottom: 0.5em + &.is-current + a + color: $link + a + color: $text-light + &:hover + color: $link + .bd-category a &:hover @@ -110,17 +123,30 @@ position: relative .bd-category-list + @extend %bd-list display: none - font-size: 0.875rem padding: 0.5rem + +.bd-anchors-reference + height: 1px + +.bd-anchors + padding-top: calc(1.5rem - 1px) + &.is-pinned + position: fixed + top: 0 + +.bd-anchors-title + color: $grey-light + font-size: 0.875rem + font-weight: $weight-semibold + margin-bottom: 0.5rem + +.bd-anchors-list + @extend %bd-list li - &:not(:last-child) - margin-bottom: 0.5em - &.is-current - a - color: $link - a - color: $text-light + &:last-child + margin-top: 1em +touch .bd-lead, diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 068c01b2..975aec77 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -9604,6 +9604,26 @@ label.panel-block:hover { top: 0; } +.bd-category-list, .bd-anchors-list { + font-size: 0.875rem; +} + +.bd-category-list li:not(:last-child), .bd-anchors-list li:not(:last-child) { + margin-bottom: 0.5em; +} + +.bd-category-list li.is-current a, .bd-anchors-list li.is-current a { + color: #3273dc; +} + +.bd-category-list a, .bd-anchors-list a { + color: #7a7a7a; +} + +.bd-category-list a:hover, .bd-anchors-list a:hover { + color: #3273dc; +} + .bd-category a:hover { color: #3273dc; } @@ -9645,20 +9665,31 @@ label.panel-block:hover { .bd-category-list { display: none; - font-size: 0.875rem; padding: 0.5rem; } -.bd-category-list li:not(:last-child) { - margin-bottom: 0.5em; +.bd-anchors-reference { + height: 1px; } -.bd-category-list li.is-current a { - color: #3273dc; +.bd-anchors { + padding-top: calc(1.5rem - 1px); } -.bd-category-list a { - color: #7a7a7a; +.bd-anchors.is-pinned { + position: fixed; + top: 0; +} + +.bd-anchors-title { + color: #b5b5b5; + font-size: 0.875rem; + font-weight: 600; + margin-bottom: 0.5rem; +} + +.bd-anchors-list li:last-child { + margin-top: 1em; } @media screen and (max-width: 1087px) { diff --git a/docs/lib/main.js b/docs/lib/main.js index 7c526ee8..5ff21d05 100644 --- a/docs/lib/main.js +++ b/docs/lib/main.js @@ -7,26 +7,6 @@ document.addEventListener('DOMContentLoaded', function () { var cookieBookModalName = 'bulma_closed_book_modal'; var cookieBookModal = Cookies.getJSON(cookieBookModalName) || false; - // Book modal - - // const $bookModal = document.getElementById('bookModal'); - // const $bookModalCloseButtons = getAll('.bd-book-modal-close'); - - // if (!cookieBookModal) { - // setTimeout(() => { - // openModal('bookModal'); - // }, 5000); - // } - - // if ($bookModalCloseButtons.length > 0) { - // $bookModalCloseButtons.forEach($el => { - // $el.addEventListener('click', event => { - // event.stopPropagation(); - // Cookies.set(cookieBookModalName, true, { expires: 30 }); - // }); - // }); - // } - // Sidebar links var $categories = getAll('#categories .bd-category'); @@ -51,6 +31,56 @@ document.addEventListener('DOMContentLoaded', function () { }); } + var anchors_ref_el = document.getElementById('anchorsReference'); + var anchors_el = document.getElementById('anchors'); + var anchor_links_el = getAll('.bd-anchor-link'); + + if (anchors_el && anchor_links_el.length > 0) { + var anchors_el_list = anchors_el.querySelector('.bd-anchors-list'); + + anchor_links_el.forEach(function (el) { + var link_target = el.getAttribute('href'); + var link_text = el.previousElementSibling.innerText; + + if (link_text != '') { + var item_el = createAnchorLink(link_text, link_target); + anchors_el_list.appendChild(item_el); + } + }); + + var back_to_top_el = createAnchorLink('Back to top', ''); + back_to_top_el.onclick = scrollToTop; + anchors_el_list.appendChild(back_to_top_el); + } + + function scrollToTop() { + window.scrollTo(0, 0); + } + + function createAnchorLink(text, target) { + var item_el = document.createElement('li'); + var link_el = document.createElement('a'); + var text_node = document.createTextNode(text); + + if (target) { + link_el.setAttribute('href', target); + } + + link_el.appendChild(text_node); + item_el.appendChild(link_el); + + return item_el; + } + + function closeCategories(current_el) { + $categories.forEach(function (el) { + if (current_el == el) { + return; + } + el.classList.remove('is-active'); + }); + } + // Meta links var $metalinks = getAll('#meta a'); @@ -222,6 +252,7 @@ document.addEventListener('DOMContentLoaded', function () { // Scrolling + var html_el = document.documentElement; var navbarEl = document.getElementById('navbar'); var navbarBurger = document.getElementById('navbarBurger'); var specialShadow = document.getElementById('specialShadow'); @@ -243,6 +274,18 @@ document.addEventListener('DOMContentLoaded', function () { } }); + function whenScrolling(lastY, currentY) { + if (anchors_ref_el) { + var bounds = anchors_ref_el.getBoundingClientRect(); + + if (bounds.top < 1) { + anchors_el.classList.add('is-pinned'); + } else { + anchors_el.classList.remove('is-pinned'); + } + } + } + function upOrDown(lastY, currentY) { if (currentY >= lastY) { return goingDown(currentY); @@ -310,22 +353,21 @@ document.addEventListener('DOMContentLoaded', function () { } } - // translateHeader(window.scrollY, false); + var ticking = false; + var lastY = 0; - // let ticking = false; - // let lastY = 0; + window.addEventListener('scroll', function () { + var currentY = window.scrollY; - // window.addEventListener('scroll', function() { - // const currentY = window.scrollY; + if (!ticking) { + window.requestAnimationFrame(function () { + // upOrDown(lastY, currentY); + whenScrolling(lastY, currentY); + ticking = false; + lastY = currentY; + }); + } - // if (!ticking) { - // window.requestAnimationFrame(function() { - // upOrDown(lastY, currentY); - // ticking = false; - // lastY = currentY; - // }); - // } - - // ticking = true; - // }); + ticking = true; + }); }); \ No newline at end of file From 077763cb74824633d7da68702c7b5b51606e3123 Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Wed, 11 Apr 2018 01:14:29 +0100 Subject: [PATCH 33/56] Add scroll spy --- docs/_includes/elements/improve-page.html | 2 +- docs/_javascript/main.js | 96 +++++++++++++++++++++- docs/_sass/main.sass | 12 ++- docs/css/bulma-docs.css | 16 +++- docs/lib/main.js | 98 ++++++++++++++++++++++- 5 files changed, 209 insertions(+), 15 deletions(-) diff --git a/docs/_includes/elements/improve-page.html b/docs/_includes/elements/improve-page.html index 05b3c6fc..f431d11c 100644 --- a/docs/_includes/elements/improve-page.html +++ b/docs/_includes/elements/improve-page.html @@ -1,4 +1,4 @@ -
    +

    Made with Bulma diff --git a/docs/_javascript/main.js b/docs/_javascript/main.js index 7df0b12f..b3392c8d 100644 --- a/docs/_javascript/main.js +++ b/docs/_javascript/main.js @@ -33,16 +33,31 @@ document.addEventListener('DOMContentLoaded', () => { const anchors_el = document.getElementById('anchors'); const anchor_links_el = getAll('.bd-anchor-link'); + let anchors_by_id = {}; + let anchors_order = []; + let anchor_nav_els = []; + if (anchors_el && anchor_links_el.length > 0) { const anchors_el_list = anchors_el.querySelector('.bd-anchors-list'); - anchor_links_el.forEach(el => { + anchor_links_el.forEach((el, index) => { const link_target = el.getAttribute('href'); const link_text = el.previousElementSibling.innerText; if (link_text != '') { const item_el = createAnchorLink(link_text, link_target); anchors_el_list.appendChild(item_el); + + const anchor_key = link_target.substring(1); // #target -> target + anchors_by_id[anchor_key] = { + id: anchor_key, + index, + target: link_target, + text: link_text, + nav_el: item_el, + }; + anchors_order.push(anchor_key); + anchor_nav_els.push(item_el); } }); @@ -272,18 +287,76 @@ document.addEventListener('DOMContentLoaded', () => { } }); - function whenScrolling(lastY, currentY) { + // Anchors highlight + + let past_anchors = []; + anchor_links_el.reverse(); + const trigger_offset = 24 ; // In pixels + const typo_el = document.getElementById('typo'); + + function whenScrolling() { if (anchors_ref_el) { const bounds = anchors_ref_el.getBoundingClientRect(); + const anchors_height = anchors_el.clientHeight; + const typo_bounds = typo_el.getBoundingClientRect(); + const typo_height = typo_el.clientHeight; - if (bounds.top < 1) { + if (bounds.top < 1 && typo_bounds.top - anchors_height + typo_height > 0) { anchors_el.classList.add('is-pinned'); } else { anchors_el.classList.remove('is-pinned'); } + + anchor_links_el.some(el => { + const bounds = el.getBoundingClientRect(); + const href = el.getAttribute('href'); + const key = href.substring(1); // #target -> target + + if (bounds.top < 1 + trigger_offset && past_anchors.indexOf(key) == -1) { + past_anchors.push(key); + highlightAnchor(); + return; + } else if (bounds.top > 0 + trigger_offset && past_anchors.indexOf(key) != -1) { + removeFromArray(past_anchors, key); + highlightAnchor(); + return; + } + }); } } + function highlightAnchor() { + const future_anchors = anchors_order.diff(past_anchors); + let highest_index = -1; + let highest_anchor_key = ''; + + if (past_anchors.length > 0) { + past_anchors.forEach((key, index) => { + const anchor = anchors_by_id[key]; + anchor.nav_el.className = 'is-past'; + + // Keep track of the bottom most item + if (anchor.index > highest_index) { + highest_index = anchor.index; + highest_anchor_key = key; + } + }); + + if (highest_anchor_key in anchors_by_id) { + anchors_by_id[highest_anchor_key].nav_el.className = 'is-current'; + } + } + + if (future_anchors.length > 0) { + future_anchors.forEach((key, index) => { + const anchor = anchors_by_id[key]; + anchor.nav_el.className = ''; + }); + } + } + + // Scroll + function upOrDown(lastY, currentY) { if (currentY >= lastY) { return goingDown(currentY); @@ -362,7 +435,7 @@ document.addEventListener('DOMContentLoaded', () => { if (!ticking) { window.requestAnimationFrame(function() { // upOrDown(lastY, currentY); - whenScrolling(lastY, currentY); + whenScrolling(); ticking = false; lastY = currentY; }); @@ -371,4 +444,19 @@ document.addEventListener('DOMContentLoaded', () => { ticking = true; }); + // Utils + + function removeFromArray(array, value) { + if (array.includes(value)) { + const value_index = array.indexOf(value); + array.splice(value_index, 1); + } + + return array; + } + + Array.prototype.diff = function(a) { + return this.filter(function(i) {return a.indexOf(i) < 0;}); + }; + }); diff --git a/docs/_sass/main.sass b/docs/_sass/main.sass index 53f2fb92..ac739fdd 100644 --- a/docs/_sass/main.sass +++ b/docs/_sass/main.sass @@ -82,6 +82,9 @@ li &:not(:last-child) margin-bottom: 0.5em + &.is-past + a + color: $grey-light &.is-current a color: $link @@ -132,9 +135,10 @@ .bd-anchors padding-top: calc(1.5rem - 1px) - &.is-pinned - position: fixed - top: 0 + +tablet + &.is-pinned + position: fixed + top: 0 .bd-anchors-title color: $grey-light @@ -147,6 +151,8 @@ li &:last-child margin-top: 1em + a + color: $text-strong +touch .bd-lead, diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 975aec77..6804174e 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -9612,6 +9612,10 @@ label.panel-block:hover { margin-bottom: 0.5em; } +.bd-category-list li.is-past a, .bd-anchors-list li.is-past a { + color: #b5b5b5; +} + .bd-category-list li.is-current a, .bd-anchors-list li.is-current a { color: #3273dc; } @@ -9676,9 +9680,11 @@ label.panel-block:hover { padding-top: calc(1.5rem - 1px); } -.bd-anchors.is-pinned { - position: fixed; - top: 0; +@media screen and (min-width: 769px), print { + .bd-anchors.is-pinned { + position: fixed; + top: 0; + } } .bd-anchors-title { @@ -9692,6 +9698,10 @@ label.panel-block:hover { margin-top: 1em; } +.bd-anchors-list a { + color: #363636; +} + @media screen and (max-width: 1087px) { .bd-lead, .bd-side { diff --git a/docs/lib/main.js b/docs/lib/main.js index 5ff21d05..880f8551 100644 --- a/docs/lib/main.js +++ b/docs/lib/main.js @@ -35,16 +35,31 @@ document.addEventListener('DOMContentLoaded', function () { var anchors_el = document.getElementById('anchors'); var anchor_links_el = getAll('.bd-anchor-link'); + var anchors_by_id = {}; + var anchors_order = []; + var anchor_nav_els = []; + if (anchors_el && anchor_links_el.length > 0) { var anchors_el_list = anchors_el.querySelector('.bd-anchors-list'); - anchor_links_el.forEach(function (el) { + anchor_links_el.forEach(function (el, index) { var link_target = el.getAttribute('href'); var link_text = el.previousElementSibling.innerText; if (link_text != '') { var item_el = createAnchorLink(link_text, link_target); anchors_el_list.appendChild(item_el); + + var anchor_key = link_target.substring(1); // #target -> target + anchors_by_id[anchor_key] = { + id: anchor_key, + index: index, + target: link_target, + text: link_text, + nav_el: item_el + }; + anchors_order.push(anchor_key); + anchor_nav_els.push(item_el); } }); @@ -274,18 +289,76 @@ document.addEventListener('DOMContentLoaded', function () { } }); - function whenScrolling(lastY, currentY) { + // Anchors highlight + + var past_anchors = []; + anchor_links_el.reverse(); + var trigger_offset = 24; // In pixels + var typo_el = document.getElementById('typo'); + + function whenScrolling() { if (anchors_ref_el) { var bounds = anchors_ref_el.getBoundingClientRect(); + var anchors_height = anchors_el.clientHeight; + var typo_bounds = typo_el.getBoundingClientRect(); + var typo_height = typo_el.clientHeight; - if (bounds.top < 1) { + if (bounds.top < 1 && typo_bounds.top - anchors_height + typo_height > 0) { anchors_el.classList.add('is-pinned'); } else { anchors_el.classList.remove('is-pinned'); } + + anchor_links_el.some(function (el) { + var bounds = el.getBoundingClientRect(); + var href = el.getAttribute('href'); + var key = href.substring(1); // #target -> target + + if (bounds.top < 1 + trigger_offset && past_anchors.indexOf(key) == -1) { + past_anchors.push(key); + highlightAnchor(); + return; + } else if (bounds.top > 0 + trigger_offset && past_anchors.indexOf(key) != -1) { + removeFromArray(past_anchors, key); + highlightAnchor(); + return; + } + }); } } + function highlightAnchor() { + var future_anchors = anchors_order.diff(past_anchors); + var highest_index = -1; + var highest_anchor_key = ''; + + if (past_anchors.length > 0) { + past_anchors.forEach(function (key, index) { + var anchor = anchors_by_id[key]; + anchor.nav_el.className = 'is-past'; + + // Keep track of the bottom most item + if (anchor.index > highest_index) { + highest_index = anchor.index; + highest_anchor_key = key; + } + }); + + if (highest_anchor_key in anchors_by_id) { + anchors_by_id[highest_anchor_key].nav_el.className = 'is-current'; + } + } + + if (future_anchors.length > 0) { + future_anchors.forEach(function (key, index) { + var anchor = anchors_by_id[key]; + anchor.nav_el.className = ''; + }); + } + } + + // Scroll + function upOrDown(lastY, currentY) { if (currentY >= lastY) { return goingDown(currentY); @@ -362,7 +435,7 @@ document.addEventListener('DOMContentLoaded', function () { if (!ticking) { window.requestAnimationFrame(function () { // upOrDown(lastY, currentY); - whenScrolling(lastY, currentY); + whenScrolling(); ticking = false; lastY = currentY; }); @@ -370,4 +443,21 @@ document.addEventListener('DOMContentLoaded', function () { ticking = true; }); + + // Utils + + function removeFromArray(array, value) { + if (array.includes(value)) { + var value_index = array.indexOf(value); + array.splice(value_index, 1); + } + + return array; + } + + Array.prototype.diff = function (a) { + return this.filter(function (i) { + return a.indexOf(i) < 0; + }); + }; }); \ No newline at end of file From 89f2c47003c22eecfaebd22e9887b0846703e7d9 Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Wed, 11 Apr 2018 01:38:07 +0100 Subject: [PATCH 34/56] Add spaced navbar --- docs/_includes/global/navbar.html | 4 ++-- docs/_includes/global/scripts.html | 4 ++-- docs/css/bulma-docs.css | 21 +++++++++++++++------ docs/images/placeholders/240x720.png | Bin 0 -> 739 bytes docs/images/placeholders/320x480.png | Bin 0 -> 928 bytes docs/images/placeholders/320x640.png | Bin 0 -> 957 bytes docs/images/placeholders/360x640.png | Bin 0 -> 1158 bytes docs/images/placeholders/480x600.png | Bin 0 -> 1466 bytes docs/images/placeholders/480x640.png | Bin 0 -> 1570 bytes docs/images/placeholders/480x800.png | Bin 0 -> 1510 bytes docs/images/placeholders/600x480.png | Bin 0 -> 1862 bytes docs/images/placeholders/720x240.png | Bin 0 -> 1980 bytes docs/images/placeholders/800x480.png | Bin 0 -> 2537 bytes sass/components/navbar.sass | 22 +++++++++++++++++----- 14 files changed, 36 insertions(+), 15 deletions(-) create mode 100644 docs/images/placeholders/240x720.png create mode 100644 docs/images/placeholders/320x480.png create mode 100644 docs/images/placeholders/320x640.png create mode 100644 docs/images/placeholders/360x640.png create mode 100644 docs/images/placeholders/480x600.png create mode 100644 docs/images/placeholders/480x640.png create mode 100644 docs/images/placeholders/480x800.png create mode 100644 docs/images/placeholders/600x480.png create mode 100644 docs/images/placeholders/720x240.png create mode 100644 docs/images/placeholders/800x480.png diff --git a/docs/_includes/global/navbar.html b/docs/_includes/global/navbar.html index 996852eb..49be6c07 100644 --- a/docs/_includes/global/navbar.html +++ b/docs/_includes/global/navbar.html @@ -1,4 +1,4 @@ -