mirror of
https://github.com/jgthms/bulma.git
synced 2024-10-17 09:04:18 +00:00
Add versions
This commit is contained in:
Jeremy Thomas
parent
42780d04a7
commit
f9223ad360
8
docs/_includes/deprecated.html
Normal file
8
docs/_includes/deprecated.html
Normal file
@ -0,0 +1,8 @@
|
||||
{% if site.deprecated %}
|
||||
<div class="notification is-info" style="border-radius: 0; margin-bottom: 0;">
|
||||
<p>
|
||||
You are viewing the deprecated <strong>{{site.version}}</strong> version of the website.
|
||||
<a href="/">Click here to view the latest version</a>
|
||||
</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -62,7 +62,14 @@
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div>version <p class="has-text-info is-size-6-desktop">{{ site.version }}</p></div>
|
||||
<div>
|
||||
<p class="has-text-info is-size-6-desktop"><strong>{{ site.version }}</strong></p>
|
||||
{{#unless site.deprecated}}
|
||||
<small>
|
||||
<a class="view-all-versions" href="/versions">View all versions</a>
|
||||
</small>
|
||||
{{/unless}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
<html lang="en" class="{% if page.route %}route-{{page.route}}{% elsif page.layout %}route-{{page.layout}}{% endif %}">
|
||||
{% include head.html %}
|
||||
<body class="layout-{{ page.layout }}{% if page.doc-tab %} page-{{ page.doc-tab}}{% endif %}">
|
||||
{% include deprecated.html %}
|
||||
{{ content }}
|
||||
{% include footer.html %}
|
||||
</body>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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');
|
||||
});
|
||||
}
|
||||
});
|
||||
35
docs/versions.html
Normal file
35
docs/versions.html
Normal file
@ -0,0 +1,35 @@
|
||||
---
|
||||
layout: default
|
||||
route: versions
|
||||
---
|
||||
|
||||
<div class="container">
|
||||
{% include navbar.html id="VersionsHero" %}
|
||||
</div>
|
||||
|
||||
<section class="hero is-halfheight">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column">
|
||||
<h1 class="title">
|
||||
Versions
|
||||
</h1>
|
||||
<p class="subtitle">
|
||||
Access previous versions of Bulma
|
||||
</p>
|
||||
<div class="field is-grouped is-grouped-multiline">
|
||||
<div class="control">
|
||||
<a class="button" href="{{site.url}}/versions/0.4.4">
|
||||
0.4.4
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
{% include carbon.html %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user