Bulma SCSS 0.7.0

Converted from: https://github.com/jgthms/bulma/releases/tag/0.7.0 Many thanks to Jeremy Thomas (@jgthms) and other Bulma contributors
j1mc · Apr 17, 2018 · f31beed · f31beed
1 parent a005d45
commit f31beed
Show file tree

Hide file tree

Showing 24 changed files with 554 additions and 284 deletions.
diff --git a/README.md b/README.md
@@ -3,10 +3,6 @@
 This is a port of the [Bulma](https://github.com/jgthms/bulma) project SASS
 files to the SCSS syntax.
 
-Currently, these files are based on Bulma version 0.6.2, and will be updated
-with later releases.
-
-I've converted these files using
-[this script](https://gist.github.com/Prezto/e72e77e0f35352f5fcf5881b73b7d81b),
-so you are free to perform the conversion yourself - I only thought I would
-save others the trouble.
+Currently, these files are based on Bulma version 0.7.0, and will be updated
+with later releases. The files are converted to SCSS with
+[this script](https://gist.github.com/Prezto/e72e77e0f35352f5fcf5881b73b7d81b).
diff --git a/base/_generic.scss b/base/_generic.scss
@@ -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/base/_helpers.scss b/base/_helpers.scss
@@ -74,7 +74,9 @@ $alignments: ("centered": "center", "justified": "justify", "left": "left", "rig
   .has-text-#{$alignment} {
     text-align: #{$text-align} !important;
   }
+}
 
+@each $alignment, $text-align in $alignments {
   @include mobile {
     .has-text-#{$alignment}-mobile {
       text-align: #{$text-align} !important;
@@ -167,12 +169,20 @@ $alignments: ("centered": "center", "justified": "justify", "left": "left", "rig
       color: darken($color, 10%) !important;
     }
   }
+
+  .has-background-#{$name} {
+    background-color: $color !important;
+  }
 }
 
 @each $name, $shade in $shades {
   .has-text-#{$name} {
     color: $shade !important;
   }
+
+  .has-background-#{$name} {
+    background-color: $shade !important;
+  }
 }
 
 .has-text-weight-light {

diff --git a/base/_minireset.scss b/base/_minireset.scss
@@ -1,4 +1,4 @@
-/*! minireset.css v0.0.2 | MIT License | github.com/jgthms/minireset.css */
+/*! minireset.css v0.0.3 | MIT License | github.com/jgthms/minireset.css */
 // Blocks
 html,
 body,
@@ -57,20 +57,18 @@ html {
 }
 
 * {
-  box-sizing: inherit;
-
-  &:before,
-  &:after {
+  &,
+  &::before,
+  &::after {
     box-sizing: inherit;
   }
 }
 
 // Media
 img,
-embed,
-object,
 audio,
 video {
+  height: auto;
   max-width: 100%;
 }
 

diff --git a/bulma.scss b/bulma.scss
@@ -1,4 +1,4 @@
-/*! bulma.io v0.6.2 | MIT License | github.com/jgthms/bulma */
+/*! bulma.io v0.7.0 | MIT License | github.com/jgthms/bulma */
 @import "utilities/_all";
 @import "base/_all";
 @import "elements/_all";

diff --git a/components/_breadcrumb.scss b/components/_breadcrumb.scss
@@ -2,25 +2,24 @@ $breadcrumb-item-color: $link !default;
 $breadcrumb-item-hover-color: $link-hover !default;
 $breadcrumb-item-active-color: $text-strong !default;
 
-$breadcrumb-item-separator-color: $text !default;
+$breadcrumb-item-padding-vertical: 0 !default;
+$breadcrumb-item-padding-horizontal: 0.75em !default;
+
+$breadcrumb-item-separator-color: $grey-light !default;
 
 .breadcrumb {
   @include block;
   @include unselectable;
 
-  align-items: stretch;
-  display: flex;
   font-size: $size-normal;
-  overflow: hidden;
-  overflow-x: auto;
   white-space: nowrap;
 
   a {
     align-items: center;
     color: $breadcrumb-item-color;
     display: flex;
     justify-content: center;
-    padding: 0.5em 0.75em;
+    padding: $breadcrumb-item-padding-vertical $breadcrumb-item-padding-horizontal;
 
     &:hover {
       color: $breadcrumb-item-hover-color;
@@ -49,11 +48,11 @@ $breadcrumb-item-separator-color: $text !default;
     }
   }
 
-  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;
   }
 
@@ -69,13 +68,15 @@ $breadcrumb-item-separator-color: $text !default;
 
   // Alignment
   &.is-centered {
-    ol, ul {
+    ol,
+    ul {
       justify-content: center;
     }
   }
 
   &.is-right {
-    ol, ul {
+    ol,
+    ul {
       justify-content: flex-end;
     }
   }

diff --git a/components/_card.scss b/components/_card.scss
@@ -2,10 +2,14 @@ $card-color: $text !default;
 $card-background-color: $white !default;
 $card-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default;
 
+$card-header-background-color: none !default;
 $card-header-color: $text-strong !default;
 $card-header-shadow: 0 1px 2px rgba($black, 0.1) !default;
 $card-header-weight: $weight-bold !default;
 
+$card-content-background-color: none !default;
+
+$card-footer-background-color: none !default;
 $card-footer-border-top: 1px solid $border !default;
 
 .card {
@@ -17,6 +21,7 @@ $card-footer-border-top: 1px solid $border !default;
 }
 
 .card-header {
+  background-color: $card-header-background-color;
   align-items: stretch;
   box-shadow: $card-header-shadow;
   display: flex;
@@ -49,10 +54,12 @@ $card-footer-border-top: 1px solid $border !default;
 }
 
 .card-content {
+  background-color: $card-content-background-color;
   padding: 1.5rem;
 }
 
 .card-footer {
+  background-color: $card-footer-background-color;
   border-top: $card-footer-border-top;
   align-items: stretch;
   display: flex;

diff --git a/components/_message.scss b/components/_message.scss
@@ -3,17 +3,21 @@ $message-radius: $radius !default;
 
 $message-header-background-color: $text !default;
 $message-header-color: $text-invert !default;
-$message-header-padding: 0.5em 0.75em !default;
+$message-header-weight: $weight-bold !default;
+$message-header-padding: 0.75em 1em !default;
 $message-header-radius: $radius !default;
 
-$message-body-border: 1px solid $border !default;
+$message-body-border-color: $border !default;
+$message-body-border-width: 0 0 0 4px !default;
 $message-body-color: $text !default;
-$message-body-padding: 1em 1.25em !default;
+$message-body-padding: 1.25em 1.5em !default;
 $message-body-radius: $radius !default;
 
 $message-body-pre-background-color: $white !default;
 $message-body-pre-code-background-color: transparent !default;
 
+$message-header-body-border-width: 0 !default;
+
 .message {
   @include block;
 
@@ -74,6 +78,7 @@ $message-body-pre-code-background-color: transparent !default;
   border-radius: $message-header-radius $message-header-radius 0 0;
   color: $message-header-color;
   display: flex;
+  font-weight: $message-header-weight;
   justify-content: space-between;
   line-height: 1.25;
   padding: $message-header-padding;
@@ -86,15 +91,17 @@ $message-body-pre-code-background-color: transparent !default;
   }
 
   & + .message-body {
+    border-width: $message-header-body-border-width;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
-    border-top: none;
   }
 }
 
 .message-body {
-  border: $message-body-border;
+  border-color: $message-body-border-color;
   border-radius: $message-body-radius;
+  border-style: solid;
+  border-width: $message-body-border-width;
   color: $message-body-color;
   padding: $message-body-padding;