Bulma 0.9.2

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.9.1, and will be updated
+Currently, these files are based on Bulma version 0.9.2, and will be updated
 with later releases. The files are converted to SCSS with
 [this script](https://gist.github.com/j1mc/ff1ff83e277b1e221761fc0c0ee3b164).
 

base/_all.scss

@@ -1,3 +1,4 @@
 /* Bulma Base */
 @import "minireset";
 @import "generic";
+@import "animations";

base/_animations.scss

@@ -0,0 +1,9 @@
+@keyframes spinAround {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(359deg);
+  }
+}

base/_generic.scss

@@ -1,3 +1,5 @@
+@import "../utilities/mixins";
+
 $body-background-color: $scheme-main !default;
 $body-size: 16px !default;
 $body-min-width: 300px !default;

bulma.scss

@@ -1,4 +1,4 @@
-/*! bulma.io v0.9.1 | MIT License | github.com/jgthms/bulma */
+/*! bulma.io v0.9.2 | MIT License | github.com/jgthms/bulma */
 @import "utilities/_all";
 @import "base/_all";
 @import "elements/_all";

components/_breadcrumb.scss

@@ -1,3 +1,5 @@
+@import "../utilities/mixins";
+
 $breadcrumb-item-color: $link !default;
 $breadcrumb-item-hover-color: $link-hover !default;
 $breadcrumb-item-active-color: $text-strong !default;

components/_card.scss

@@ -1,8 +1,9 @@
+@import "../utilities/mixins";
+
 $card-color: $text !default;
 $card-background-color: $scheme-main !default;
 $card-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default;
 $card-radius: 0.25rem !default;
-$card-overflow: hidden !default;
 
 $card-header-background-color: transparent !default;
 $card-header-color: $text-strong !default;
@@ -25,11 +26,24 @@ $card-media-margin: $block-spacing !default;
   box-shadow: $card-shadow;
   color: $card-color;
   max-width: 100%;
-  overflow: $card-overflow;
   position: relative;
 }
 
+%card-item {
+  &:first-child {
+    border-top-left-radius: $card-radius;
+    border-top-right-radius: $card-radius;
+  }
+
+  &:last-child {
+    border-bottom-left-radius: $card-radius;
+    border-bottom-right-radius: $card-radius;
+  }
+}
+
 .card-header {
+  @extend %card-item;
+
   background-color: $card-header-background-color;
   align-items: stretch;
   box-shadow: $card-header-shadow;
@@ -60,14 +74,32 @@ $card-media-margin: $block-spacing !default;
 .card-image {
   display: block;
   position: relative;
+
+  &:first-child {
+    img {
+      border-top-left-radius: $card-radius;
+      border-top-right-radius: $card-radius;
+    }
+  }
+
+  &:last-child {
+    img {
+      border-bottom-left-radius: $card-radius;
+      border-bottom-right-radius: $card-radius;
+    }
+  }
 }
 
 .card-content {
+  @extend %card-item;
+
   background-color: $card-content-background-color;
   padding: $card-content-padding;
 }
 
 .card-footer {
+  @extend %card-item;
+
   background-color: $card-footer-background-color;
   border-top: $card-footer-border-top;
   align-items: stretch;

components/_dropdown.scss

@@ -1,3 +1,5 @@
+@import "../utilities/mixins";
+
 $dropdown-menu-min-width: 12rem !default;
 
 $dropdown-content-background-color: $scheme-main !default;

components/_level.scss

@@ -1,3 +1,5 @@
+@import "../utilities/mixins";
+
 $level-item-spacing: $block-spacing / 2 !default;
 
 .level {

components/_media.scss

@@ -1,37 +1,44 @@
+@import "../utilities/mixins";
+
 $media-border-color: bulmaRgba($border, 0.5) !default;
-$media-spacing: 1rem;
-$media-spacing-large: 1.5rem;
+$media-border-size: 1px !default;
+$media-spacing: 1rem !default;
+$media-spacing-large: 1.5rem !default;
+$media-content-spacing: 0.75rem !default;
+$media-level-1-spacing: 0.75rem !default;
+$media-level-1-content-spacing: 0.5rem !default;
+$media-level-2-spacing: 0.5rem !default;
 
 .media {
   align-items: flex-start;
   display: flex;
   text-align: inherit;
 
   .content:not(:last-child) {
-    margin-bottom: 0.75rem;
+    margin-bottom: $media-content-spacing;
   }
 
   .media {
-    border-top: 1px solid $media-border-color;
+    border-top: $media-border-size solid $media-border-color;
     display: flex;
-    padding-top: 0.75rem;
+    padding-top: $media-level-1-spacing;
 
     .content:not(:last-child),
     .control:not(:last-child) {
-      margin-bottom: 0.5rem;
+      margin-bottom: $media-level-1-content-spacing;
     }
 
     .media {
-      padding-top: 0.5rem;
+      padding-top: $media-level-2-spacing;
 
       & + .media {
-        margin-top: 0.5rem;
+        margin-top: $media-level-2-spacing;
       }
     }
   }
 
   & + .media {
-    border-top: 1px solid $media-border-color;
+    border-top: $media-border-size solid $media-border-color;
     margin-top: $media-spacing;
     padding-top: $media-spacing;
   }

components/_menu.scss

@@ -1,3 +1,5 @@
+@import "../utilities/mixins";
+
 $menu-item-color: $text !default;
 $menu-item-radius: $radius-small !default;
 $menu-item-hover-color: $text-strong !default;

components/_message.scss

@@ -1,3 +1,5 @@
+@import "../utilities/mixins";
+
 $message-background-color: $background !default;
 $message-radius: $radius !default;
 

components/_modal.scss

@@ -1,3 +1,5 @@
+@import "../utilities/mixins";
+
 $modal-z: 40 !default;
 
 $modal-background-background-color: bulmaRgba($scheme-invert, 0.86) !default;

components/_navbar.scss

@@ -1,3 +1,5 @@
+@import "../utilities/mixins";
+
 $navbar-background-color: $scheme-main !default;
 $navbar-box-shadow-size: 0 2px 0 0 !default;
 $navbar-box-shadow-color: $background !default;

components/_pagination.scss

@@ -1,3 +1,6 @@
+@import "../utilities/controls";
+@import "../utilities/mixins";
+
 $pagination-color: $text-strong !default;
 $pagination-border-color: $border !default;
 $pagination-margin: -0.25rem !default;
@@ -8,6 +11,9 @@ $pagination-item-margin: 0.25rem !default;
 $pagination-item-padding-left: 0.5em !default;
 $pagination-item-padding-right: 0.5em !default;
 
+$pagination-nav-padding-left: 0.75em !default;
+$pagination-nav-padding-right: 0.75em !default;
+
 $pagination-hover-color: $link-hover !default;
 $pagination-hover-border-color: $link-hover-border !default;
 
@@ -27,7 +33,7 @@ $pagination-current-border-color: $link !default;
 
 $pagination-ellipsis-color: $grey-light !default;
 
-$pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2);
+$pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2) !default;
 
 .pagination {
   @extend %block;
@@ -117,8 +123,8 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2);
 
 .pagination-previous,
 .pagination-next {
-  padding-left: 0.75em;
-  padding-right: 0.75em;
+  padding-left: $pagination-nav-padding-left;
+  padding-right: $pagination-nav-padding-right;
   white-space: nowrap;
 }
 
@@ -137,6 +143,10 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2);
 
 .pagination-list {
   flex-wrap: wrap;
+
+  li {
+    list-style: none;
+  }
 }
 
 @include mobile {

components/_panel.scss

@@ -1,3 +1,5 @@
+@import "../utilities/mixins";
+
 $panel-margin: $block-spacing !default;
 $panel-item-border: 1px solid $border-light !default;
 $panel-radius: $radius-large !default;

components/_tabs.scss

@@ -1,3 +1,5 @@
+@import "../utilities/mixins";
+
 $tabs-border-bottom-color: $border !default;
 $tabs-border-bottom-style: solid !default;
 $tabs-border-bottom-width: 1px !default;

elements/_box.scss

@@ -1,3 +1,5 @@
+@import "../utilities/mixins";
+
 $box-color: $text !default;
 $box-background-color: $scheme-main !default;
 $box-radius: $radius-large !default;

elements/_button.scss

@@ -1,3 +1,6 @@
+@import "../utilities/controls";
+@import "../utilities/mixins";
+
 $button-color: $text-strong !default;
 $button-background-color: $scheme-main !default;
 $button-family: false !default;
@@ -24,6 +27,13 @@ $button-text-decoration: underline !default;
 $button-text-hover-background-color: $background !default;
 $button-text-hover-color: $text-strong !default;
 
+$button-ghost-background: none !default;
+$button-ghost-border-color: transparent !default;
+$button-ghost-color: $link !default;
+$button-ghost-decoration: none !default;
+$button-ghost-hover-color: $link !default;
+$button-ghost-hover-decoration: underline !default;
+
 $button-disabled-background-color: $scheme-main !default;
 $button-disabled-border-color: $border !default;
 $button-disabled-shadow: none !default;
@@ -37,7 +47,10 @@ $button-colors: $colors !default;
 
 // The button sizes use mixins so they can be used at different breakpoints
 @mixin button-small {
-  border-radius: $radius-small;
+  &:not(.is-rounded) {
+    border-radius: $radius-small;
+  }
+
   font-size: $size-small;
 }
 
@@ -157,6 +170,19 @@ $button-colors: $colors !default;
     }
   }
 
+  &.is-ghost {
+    background: $button-ghost-background;
+    border-color: $button-ghost-border-color;
+    color: $button-ghost-color;
+    text-decoration: $button-ghost-decoration;
+
+    &:hover,
+    &.is-hovered {
+      color: $button-ghost-hover-color;
+      text-decoration: $button-ghost-hover-decoration;
+    }
+  }
+
   @each $name, $pair in $button-colors {
     $color: nth($pair, 1);
     $color-invert: nth($pair, 2);

elements/_container.scss

@@ -1,3 +1,5 @@
+@import "../utilities/mixins";
+
 $container-offset: 2 * $gap !default;
 $container-max-width: $fullhd !default;
 

elements/_content.scss

@@ -1,3 +1,5 @@
+@import "../utilities/mixins";
+
 $content-heading-color: $text-strong !default;
 $content-heading-weight: $weight-semibold !default;
 $content-heading-line-height: 1.125 !default;