Bulma 0.7.5

Converted from: https://github.com/jgthms/bulma/releases/tag/0.7.5 Many thanks to Jeremy Thomas (@jgthms) and other Bulma contributors
j1mc · May 20, 2019 · f8c1a89 · f8c1a89
1 parent c4e8e3a
commit f8c1a89
Show file tree

Hide file tree

Showing 38 changed files with 1,204 additions and 1,071 deletions.
diff --git a/README.md b/README.md
@@ -3,7 +3,7 @@
 This is a port of the [Bulma](https://bulma.io/) project SASS files to the
 SCSS syntax.
 
-Currently, these files are based on Bulma version 0.7.4, and will be updated
+Currently, these files are based on Bulma version 0.7.5, and will be updated
 with later releases. The files are converted to SCSS with
 [this script](https://gist.github.com/j1mc/ff1ff83e277b1e221761fc0c0ee3b164).
 

diff --git a/base/_generic.scss b/base/_generic.scss
@@ -1,8 +1,13 @@
 $body-background-color: $white !default;
 $body-size: 16px !default;
+$body-min-width: 300px !default;
 $body-rendering: optimizeLegibility !default;
 $body-family: $family-primary !default;
+$body-overflow-x: hidden !default;
+$body-overflow-y: scroll !default;
+
 $body-color: $text !default;
+$body-font-size: 1em !default;
 $body-weight: $weight-normal !default;
 $body-line-height: 1.5 !default;
 
@@ -11,21 +16,27 @@ $code-padding: 0.25em 0.5em 0.25em !default;
 $code-weight: normal !default;
 $code-size: 0.875em !default;
 
+$small-font-size: 0.875em !default;
+
 $hr-background-color: $background !default;
 $hr-height: 2px !default;
 $hr-margin: 1.5rem 0 !default;
 
 $strong-color: $text-strong !default;
 $strong-weight: $weight-bold !default;
 
+$pre-font-size: 0.875em !default;
+$pre-padding: 1.25rem 1.5rem !default;
+$pre-code-font-size: 1em !default;
+
 html {
   background-color: $body-background-color;
   font-size: $body-size;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
-  min-width: 300px;
-  overflow-x: hidden;
-  overflow-y: scroll;
+  min-width: $body-min-width;
+  overflow-x: $body-overflow-x;
+  overflow-y: $body-overflow-y;
   text-rendering: $body-rendering;
   text-size-adjust: 100%;
 }
@@ -57,7 +68,7 @@ pre {
 
 body {
   color: $body-color;
-  font-size: 1rem;
+  font-size: $body-font-size;
   font-weight: $body-weight;
   line-height: $body-line-height;
 }
@@ -105,7 +116,7 @@ input[type="radio"] {
 }
 
 small {
-  font-size: 0.875em;
+  font-size: $small-font-size;
 }
 
 span {
@@ -129,25 +140,28 @@ pre {
 
   background-color: $pre-background;
   color: $pre;
-  font-size: 0.875em;
+  font-size: $pre-font-size;
   overflow-x: auto;
-  padding: 1.25rem 1.5rem;
+  padding: $pre-padding;
   white-space: pre;
   word-wrap: normal;
 
   code {
     background-color: transparent;
     color: currentColor;
-    font-size: 1em;
+    font-size: $pre-code-font-size;
     padding: 0;
   }
 }
 
 table {
   td,
   th {
-    text-align: left;
     vertical-align: top;
+
+    &:not([align]) {
+      text-align: left;
+    }
   }
 
   th {

diff --git a/base/_helpers.scss b/base/_helpers.scss
@@ -193,6 +193,10 @@ $alignments: ("centered": "center", "justified": "justify", "left": "left", "rig
   font-weight: $weight-normal !important;
 }
 
+.has-text-weight-medium {
+  font-weight: $weight-medium !important;
+}
+
 .has-text-weight-semibold {
   font-weight: $weight-semibold !important;
 }
@@ -459,3 +463,7 @@ $displays: "block" "flex" "inline" "inline-block" "inline-flex";
 .is-unselectable {
   @extend %unselectable;
 }
+
+.is-relative {
+  position: relative !important;
+}
diff --git a/base/_minireset.scss b/base/_minireset.scss
@@ -92,5 +92,8 @@ table {
 td,
 th {
   padding: 0;
-  text-align: left;
+
+  &:not([align]) {
+    text-align: left;
+  }
 }
diff --git a/bulma.scss b/bulma.scss
@@ -1,7 +1,8 @@
-/*! bulma.io v0.7.4 | MIT License | github.com/jgthms/bulma */
+/*! bulma.io v0.7.5 | MIT License | github.com/jgthms/bulma */
 @import "utilities/_all";
 @import "base/_all";
 @import "elements/_all";
+@import "form/_all";
 @import "components/_all";
 @import "grid/_all";
 @import "layout/_all";
diff --git a/components/_card.scss b/components/_card.scss
@@ -4,13 +4,18 @@ $card-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default;
 
 $card-header-background-color: transparent !default;
 $card-header-color: $text-strong !default;
+$card-header-padding: 0.75rem !default;
 $card-header-shadow: 0 1px 2px rgba($black, 0.1) !default;
 $card-header-weight: $weight-bold !default;
 
 $card-content-background-color: transparent !default;
+$card-content-padding: 1.5rem !default;
 
 $card-footer-background-color: transparent !default;
 $card-footer-border-top: 1px solid $border !default;
+$card-footer-padding: 0.75rem !default;
+
+$card-media-margin: $block-spacing !default;
 
 .card {
   background-color: $card-background-color;
@@ -33,7 +38,7 @@ $card-footer-border-top: 1px solid $border !default;
   display: flex;
   flex-grow: 1;
   font-weight: $card-header-weight;
-  padding: 0.75rem;
+  padding: $card-header-padding;
 
   &.is-centered {
     justify-content: center;
@@ -45,7 +50,7 @@ $card-footer-border-top: 1px solid $border !default;
   cursor: pointer;
   display: flex;
   justify-content: center;
-  padding: 0.75rem;
+  padding: $card-header-padding;
 }
 
 .card-image {
@@ -55,7 +60,7 @@ $card-footer-border-top: 1px solid $border !default;
 
 .card-content {
   background-color: $card-content-background-color;
-  padding: 1.5rem;
+  padding: $card-content-padding;
 }
 
 .card-footer {
@@ -72,7 +77,7 @@ $card-footer-border-top: 1px solid $border !default;
   flex-grow: 1;
   flex-shrink: 0;
   justify-content: center;
-  padding: 0.75rem;
+  padding: $card-footer-padding;
 
   &:not(:last-child) {
     border-right: $card-footer-border-top;
@@ -83,6 +88,6 @@ $card-footer-border-top: 1px solid $border !default;
 
 .card {
   .media:not(:last-child) {
-    margin-bottom: 0.75rem;
+    margin-bottom: $card-media-margin;
   }
 }
diff --git a/components/_dropdown.scss b/components/_dropdown.scss
@@ -1,6 +1,10 @@
+$dropdown-menu-min-width: 12rem !default;
+
 $dropdown-content-background-color: $white !default;
 $dropdown-content-arrow: $link !default;
 $dropdown-content-offset: 4px !default;
+$dropdown-content-padding-bottom: 0.5rem !default;
+$dropdown-content-padding-top: 0.5rem !default;
 $dropdown-content-radius: $radius !default;
 $dropdown-content-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default;
 $dropdown-content-z: 20 !default;
@@ -45,7 +49,7 @@ $dropdown-divider-background-color: $border !default;
 .dropdown-menu {
   display: none;
   left: 0;
-  min-width: 12rem;
+  min-width: $dropdown-menu-min-width;
   padding-top: $dropdown-content-offset;
   position: absolute;
   top: 100%;
@@ -56,8 +60,8 @@ $dropdown-divider-background-color: $border !default;
   background-color: $dropdown-content-background-color;
   border-radius: $dropdown-content-radius;
   box-shadow: $dropdown-content-shadow;
-  padding-bottom: 0.5rem;
-  padding-top: 0.5rem;
+  padding-bottom: $dropdown-content-padding-bottom;
+  padding-top: $dropdown-content-padding-top;
 }
 
 .dropdown-item {

diff --git a/components/_level.scss b/components/_level.scss
@@ -1,3 +1,5 @@
+$level-item-spacing: $block-spacing / 2 !default;
+
 .level {
   @extend %block;
 
@@ -29,7 +31,7 @@
     .level-item {
       &:not(:last-child) {
         margin-bottom: 0;
-        margin-right: 0.75rem;
+        margin-right: $level-item-spacing;
       }
 
       &:not(.is-narrow) {
@@ -66,7 +68,7 @@
   // Responsiveness
   @include mobile {
     &:not(:last-child) {
-      margin-bottom: 0.75rem;
+      margin-bottom: $level-item-spacing;
     }
   }
 }
@@ -86,7 +88,7 @@
     // Responsiveness
     @include tablet {
       &:not(:last-child) {
-        margin-right: 0.75rem;
+        margin-right: $level-item-spacing;
       }
     }
   }

diff --git a/components/_list.scss b/components/_list.scss
@@ -34,8 +34,8 @@ $list-item-hover-background-color: $background !default;
   }
 
   &:last-child {
-    border-top-left-radius: $list-radius;
-    border-top-right-radius: $list-radius;
+    border-bottom-left-radius: $list-radius;
+    border-bottom-right-radius: $list-radius;
   }
 
   &:not(:last-child) {

diff --git a/components/_menu.scss b/components/_menu.scss
@@ -6,8 +6,15 @@ $menu-item-active-color: $link-invert !default;
 $menu-item-active-background-color: $link !default;
 
 $menu-list-border-left: 1px solid $border !default;
+$menu-list-line-height: 1.25 !default;
+$menu-list-link-padding: 0.5em 0.75em !default;
+$menu-nested-list-margin: 0.75em !default;
+$menu-nested-list-padding-left: 0.75em !default;
 
 $menu-label-color: $text-light !default;
+$menu-label-font-size: 0.75em !default;
+$menu-label-letter-spacing: 0.1em !default;
+$menu-label-spacing: 1em !default;
 
 .menu {
   font-size: $size-normal;
@@ -27,13 +34,13 @@ $menu-label-color: $text-light !default;
 }
 
 .menu-list {
-  line-height: 1.25;
+  line-height: $menu-list-line-height;
 
   a {
     border-radius: $menu-item-radius;
     color: $menu-item-color;
     display: block;
-    padding: 0.5em 0.75em;
+    padding: $menu-list-link-padding;
 
     &:hover {
       background-color: $menu-item-hover-background-color;
@@ -50,23 +57,23 @@ $menu-label-color: $text-light !default;
   li {
     ul {
       border-left: $menu-list-border-left;
-      margin: 0.75em;
-      padding-left: 0.75em;
+      margin: $menu-nested-list-margin;
+      padding-left: $menu-nested-list-padding-left;
     }
   }
 }
 
 .menu-label {
   color: $menu-label-color;
-  font-size: 0.75em;
-  letter-spacing: 0.1em;
+  font-size: $menu-label-font-size;
+  letter-spacing: $menu-label-letter-spacing;
   text-transform: uppercase;
 
   &:not(:first-child) {
-    margin-top: 1em;
+    margin-top: $menu-label-spacing;
   }
 
   &:not(:last-child) {
-    margin-bottom: 1em;
+    margin-bottom: $menu-label-spacing;
   }
 }
diff --git a/components/_message.scss b/components/_message.scss
@@ -17,6 +17,7 @@ $message-body-pre-background-color: $white !default;
 $message-body-pre-code-background-color: transparent !default;
 
 $message-header-body-border-width: 0 !default;
+$message-colors: $colors !default;
 
 .message {
   @extend %block;
@@ -48,7 +49,7 @@ $message-header-body-border-width: 0 !default;
   }
 
   // Colors
-  @each $name, $pair in $colors {
+  @each $name, $pair in $message-colors {
     $color: nth($pair, 1);
     $color-invert: nth($pair, 2);
     $color-lightning: max(100% - lightness($color) - 2%, 0%);

diff --git a/components/_modal.scss b/components/_modal.scss
@@ -118,7 +118,7 @@ $modal-card-body-padding: 20px !default;
 
   .button {
     &:not(:last-child) {
-      margin-right: 10px;
+      margin-right: 0.5em;
     }
   }
 }