Jeremy Thomas 8 سال پیش
والد
کامیت
f9223ad360

+ 8 - 0
docs/_includes/deprecated.html

@@ -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 %}

+ 8 - 1
docs/_includes/navbar.html

@@ -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>

+ 1 - 0
docs/_layouts/default.html

@@ -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>

+ 5 - 0
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

+ 111 - 51
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;

+ 0 - 57
docs/lib/javascript/main.js

@@ -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 - 0
docs/versions.html

@@ -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>

+ 12 - 8
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

+ 11 - 0
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

+ 1 - 0
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