diff --git a/docs/_includes/deprecated.html b/docs/_includes/deprecated.html new file mode 100644 index 00000000..8b238876 --- /dev/null +++ b/docs/_includes/deprecated.html @@ -0,0 +1,8 @@ +{% if site.deprecated %} +
+

+ You are viewing the deprecated {{site.version}} version of the website. + Click here to view the latest version +

+
+{% endif %} diff --git a/docs/_includes/navbar.html b/docs/_includes/navbar.html index aa229bd5..49b60ba4 100644 --- a/docs/_includes/navbar.html +++ b/docs/_includes/navbar.html @@ -62,7 +62,14 @@
-
version

{{ site.version }}

+
+

{{ site.version }}

+ {{#unless site.deprecated}} + + View all versions + + {{/unless}} +
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index 0521f28a..fdc52d80 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -2,6 +2,7 @@ {% include head.html %} + {% include deprecated.html %} {{ content }} {% include footer.html %} diff --git a/docs/_sass/specific.sass b/docs/_sass/specific.sass index e5cfe394..ec4c60be 100644 --- a/docs/_sass/specific.sass +++ b/docs/_sass/specific.sass @@ -20,3 +20,8 @@ background-color: darken(#f26522, 5%) &:active background-color: darken(#f26522, 10%) + +.view-all-versions + color: $text-light + &:hover + text-decoration: underline diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 2e21cb3e..8ab78ab5 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -524,242 +524,242 @@ table th { } .is-size-1 { - font-size: 3rem; + font-size: 3rem !important; } @media screen and (max-width: 768px) { .is-size-1-mobile { - font-size: 3rem; + font-size: 3rem !important; } } @media screen and (min-width: 769px), print { .is-size-1-tablet { - font-size: 3rem; + font-size: 3rem !important; } } @media screen and (max-width: 1007px) { .is-size-1-touch { - font-size: 3rem; + font-size: 3rem !important; } } @media screen and (min-width: 1008px) { .is-size-1-desktop { - font-size: 3rem; + font-size: 3rem !important; } } @media screen and (min-width: 1200px) { .is-size-1-widescreen { - font-size: 3rem; + font-size: 3rem !important; } } @media screen and (min-width: 1392px) { .is-size-1-fullhd { - font-size: 3rem; + font-size: 3rem !important; } } .is-size-2 { - font-size: 2.5rem; + font-size: 2.5rem !important; } @media screen and (max-width: 768px) { .is-size-2-mobile { - font-size: 2.5rem; + font-size: 2.5rem !important; } } @media screen and (min-width: 769px), print { .is-size-2-tablet { - font-size: 2.5rem; + font-size: 2.5rem !important; } } @media screen and (max-width: 1007px) { .is-size-2-touch { - font-size: 2.5rem; + font-size: 2.5rem !important; } } @media screen and (min-width: 1008px) { .is-size-2-desktop { - font-size: 2.5rem; + font-size: 2.5rem !important; } } @media screen and (min-width: 1200px) { .is-size-2-widescreen { - font-size: 2.5rem; + font-size: 2.5rem !important; } } @media screen and (min-width: 1392px) { .is-size-2-fullhd { - font-size: 2.5rem; + font-size: 2.5rem !important; } } .is-size-3 { - font-size: 2rem; + font-size: 2rem !important; } @media screen and (max-width: 768px) { .is-size-3-mobile { - font-size: 2rem; + font-size: 2rem !important; } } @media screen and (min-width: 769px), print { .is-size-3-tablet { - font-size: 2rem; + font-size: 2rem !important; } } @media screen and (max-width: 1007px) { .is-size-3-touch { - font-size: 2rem; + font-size: 2rem !important; } } @media screen and (min-width: 1008px) { .is-size-3-desktop { - font-size: 2rem; + font-size: 2rem !important; } } @media screen and (min-width: 1200px) { .is-size-3-widescreen { - font-size: 2rem; + font-size: 2rem !important; } } @media screen and (min-width: 1392px) { .is-size-3-fullhd { - font-size: 2rem; + font-size: 2rem !important; } } .is-size-4 { - font-size: 1.5rem; + font-size: 1.5rem !important; } @media screen and (max-width: 768px) { .is-size-4-mobile { - font-size: 1.5rem; + font-size: 1.5rem !important; } } @media screen and (min-width: 769px), print { .is-size-4-tablet { - font-size: 1.5rem; + font-size: 1.5rem !important; } } @media screen and (max-width: 1007px) { .is-size-4-touch { - font-size: 1.5rem; + font-size: 1.5rem !important; } } @media screen and (min-width: 1008px) { .is-size-4-desktop { - font-size: 1.5rem; + font-size: 1.5rem !important; } } @media screen and (min-width: 1200px) { .is-size-4-widescreen { - font-size: 1.5rem; + font-size: 1.5rem !important; } } @media screen and (min-width: 1392px) { .is-size-4-fullhd { - font-size: 1.5rem; + font-size: 1.5rem !important; } } .is-size-5 { - font-size: 1.25rem; + font-size: 1.25rem !important; } @media screen and (max-width: 768px) { .is-size-5-mobile { - font-size: 1.25rem; + font-size: 1.25rem !important; } } @media screen and (min-width: 769px), print { .is-size-5-tablet { - font-size: 1.25rem; + font-size: 1.25rem !important; } } @media screen and (max-width: 1007px) { .is-size-5-touch { - font-size: 1.25rem; + font-size: 1.25rem !important; } } @media screen and (min-width: 1008px) { .is-size-5-desktop { - font-size: 1.25rem; + font-size: 1.25rem !important; } } @media screen and (min-width: 1200px) { .is-size-5-widescreen { - font-size: 1.25rem; + font-size: 1.25rem !important; } } @media screen and (min-width: 1392px) { .is-size-5-fullhd { - font-size: 1.25rem; + font-size: 1.25rem !important; } } .is-size-6 { - font-size: 1rem; + font-size: 1rem !important; } @media screen and (max-width: 768px) { .is-size-6-mobile { - font-size: 1rem; + font-size: 1rem !important; } } @media screen and (min-width: 769px), print { .is-size-6-tablet { - font-size: 1rem; + font-size: 1rem !important; } } @media screen and (max-width: 1007px) { .is-size-6-touch { - font-size: 1rem; + font-size: 1rem !important; } } @media screen and (min-width: 1008px) { .is-size-6-desktop { - font-size: 1rem; + font-size: 1rem !important; } } @media screen and (min-width: 1200px) { .is-size-6-widescreen { - font-size: 1rem; + font-size: 1rem !important; } } @media screen and (min-width: 1392px) { .is-size-6-fullhd { - font-size: 1rem; + font-size: 1rem !important; } } @@ -776,7 +776,7 @@ table th { } .has-text-white { - color: white; + color: white !important; } a.has-text-white:hover, a.has-text-white:focus { @@ -784,7 +784,7 @@ a.has-text-white:hover, a.has-text-white:focus { } .has-text-black { - color: #0a0a0a; + color: #0a0a0a !important; } a.has-text-black:hover, a.has-text-black:focus { @@ -792,7 +792,7 @@ a.has-text-black:hover, a.has-text-black:focus { } .has-text-light { - color: whitesmoke; + color: whitesmoke !important; } a.has-text-light:hover, a.has-text-light:focus { @@ -800,7 +800,7 @@ a.has-text-light:hover, a.has-text-light:focus { } .has-text-dark { - color: #363636; + color: #363636 !important; } a.has-text-dark:hover, a.has-text-dark:focus { @@ -808,7 +808,7 @@ a.has-text-dark:hover, a.has-text-dark:focus { } .has-text-primary { - color: #00d1b2; + color: #00d1b2 !important; } a.has-text-primary:hover, a.has-text-primary:focus { @@ -816,7 +816,7 @@ a.has-text-primary:hover, a.has-text-primary:focus { } .has-text-info { - color: #3273dc; + color: #3273dc !important; } a.has-text-info:hover, a.has-text-info:focus { @@ -824,7 +824,7 @@ a.has-text-info:hover, a.has-text-info:focus { } .has-text-success { - color: #23d160; + color: #23d160 !important; } a.has-text-success:hover, a.has-text-success:focus { @@ -832,7 +832,7 @@ a.has-text-success:hover, a.has-text-success:focus { } .has-text-warning { - color: #ffdd57; + color: #ffdd57 !important; } a.has-text-warning:hover, a.has-text-warning:focus { @@ -840,13 +840,49 @@ a.has-text-warning:hover, a.has-text-warning:focus { } .has-text-danger { - color: #ff3860; + color: #ff3860 !important; } a.has-text-danger:hover, a.has-text-danger:focus { color: #ff0537; } +.has-text-black-bis { + color: #121212 !important; +} + +.has-text-black-ter { + color: #242424 !important; +} + +.has-text-grey-darker { + color: #363636 !important; +} + +.has-text-grey-dark { + color: #4a4a4a !important; +} + +.has-text-grey { + color: #7a7a7a !important; +} + +.has-text-grey-light { + color: #b5b5b5 !important; +} + +.has-text-grey-lighter { + color: #dbdbdb !important; +} + +.has-text-white-ter { + color: whitesmoke !important; +} + +.has-text-white-bis { + color: #fafafa !important; +} + .is-hidden { display: none !important; } @@ -2815,6 +2851,22 @@ input[type="submit"].button { justify-content: flex-end; } +.field.is-grouped.is-grouped-multiline { + flex-wrap: wrap; +} + +.field.is-grouped.is-grouped-multiline > .control:last-child, .field.is-grouped.is-grouped-multiline > .control:not(:last-child) { + margin-bottom: 0.75rem; +} + +.field.is-grouped.is-grouped-multiline:last-child { + margin-bottom: -0.75rem; +} + +.field.is-grouped.is-grouped-multiline:not(:last-child) { + margin-bottom: 0; +} + @media screen and (min-width: 769px), print { .field.is-horizontal { display: -webkit-box; @@ -9303,6 +9355,14 @@ html.route-index #carbon { background-color: #d54d0d; } +.view-all-versions { + color: #7a7a7a; +} + +.view-all-versions:hover { + text-decoration: underline; +} + .example, .structure { border: 1px solid #ffdd57; diff --git a/docs/lib/javascript/main.js b/docs/lib/javascript/main.js deleted file mode 100644 index fe028148..00000000 --- a/docs/lib/javascript/main.js +++ /dev/null @@ -1,57 +0,0 @@ -'use strict'; - -document.addEventListener('DOMContentLoaded', function () { - - // Navbar burger menu - - var $navBurger = document.getElementById('navBurger'); - var $navMenu = document.getElementById('navMenu'); - - if ($navBurger) { - $navBurger.addEventListener('click', function () { - $navBurger.classList.toggle('is-active'); - $navMenu.classList.toggle('is-active'); - }); - } - - // Modals - - var $html = document.documentElement; - var $modals = Array.prototype.slice.call(document.querySelectorAll('.modal'), 0); - var $modalButtons = Array.prototype.slice.call(document.querySelectorAll('.modal-button'), 0); - var $modalCloses = Array.prototype.slice.call(document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button'), 0); - - if ($modalButtons.length > 0) { - $modalButtons.forEach(function ($el) { - $el.addEventListener('click', function () { - var target = $el.dataset.target; - console.log('target', target); - var $target = document.getElementById(target); - $html.classList.add('is-clipped'); - $target.classList.add('is-active'); - }); - }); - } - - if ($modalCloses.length > 0) { - $modalCloses.forEach(function ($el) { - $el.addEventListener('click', function () { - $html.classList.remove('is-clipped'); - closeModals(); - }); - }); - } - - document.addEventListener('keydown', function (e) { - if (e.keyCode === 27) { - $html.classList.remove('is-clipped'); - closeModals(); - } - }); - - function closeModals() { - $modals.forEach(function ($el) { - $el.classList.remove('is-active'); - }); - } -}); \ No newline at end of file diff --git a/docs/versions.html b/docs/versions.html new file mode 100644 index 00000000..983638d1 --- /dev/null +++ b/docs/versions.html @@ -0,0 +1,35 @@ +--- +layout: default +route: versions +--- + +
+ {% include navbar.html id="VersionsHero" %} +
+ +
+
+
+
+
+

+ Versions +

+

+ Access previous versions of Bulma +

+
+
+ + 0.4.4 + +
+
+
+
+ {% include carbon.html %} +
+
+
+
+
diff --git a/sass/base/helpers.sass b/sass/base/helpers.sass index 84d85e1d..abe5ca94 100644 --- a/sass/base/helpers.sass +++ b/sass/base/helpers.sass @@ -53,25 +53,25 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex' @each $size in $sizes $i: index($sizes, $size) .is-size-#{$i} - font-size: $size + font-size: $size !important +mobile .is-size-#{$i}-mobile - font-size: $size + font-size: $size !important +tablet .is-size-#{$i}-tablet - font-size: $size + font-size: $size !important +touch .is-size-#{$i}-touch - font-size: $size + font-size: $size !important +desktop .is-size-#{$i}-desktop - font-size: $size + font-size: $size !important +widescreen .is-size-#{$i}-widescreen - font-size: $size + font-size: $size !important +fullhd .is-size-#{$i}-fullhd - font-size: $size + font-size: $size !important .has-text-centered text-align: center !important @@ -85,12 +85,16 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex' @each $name, $pair in $colors $color: nth($pair, 1) .has-text-#{$name} - color: $color + color: $color !important a.has-text-#{$name} &:hover, &:focus color: darken($color, 10%) +@each $name, $shade in $shades + .has-text-#{$name} + color: $shade !important + // Visibility .is-hidden diff --git a/sass/elements/form.sass b/sass/elements/form.sass index af1a120b..1c6495bb 100644 --- a/sass/elements/form.sass +++ b/sass/elements/form.sass @@ -262,6 +262,17 @@ $input-radius: $radius !default justify-content: center &.is-grouped-right justify-content: flex-end + &.is-grouped-multiline + flex-wrap: wrap + & > .control + &:last-child, + &:not(:last-child) + margin-bottom: 0.75rem + &:last-child + margin-bottom: -0.75rem + &:not(:last-child) + margin-bottom: 0 + &.is-horizontal +tablet display: flex diff --git a/sass/utilities/derived-variables.sass b/sass/utilities/derived-variables.sass index 73e8a66b..50729ebe 100644 --- a/sass/utilities/derived-variables.sass +++ b/sass/utilities/derived-variables.sass @@ -76,5 +76,6 @@ $size-large: $size-4 !default // Lists and maps $colors: ("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert)) !default +$shades: ("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis) !default $sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 !default