Bulma SCSS 0.7.2

Converted from: https://github.com/jgthms/bulma/releases/tag/0.7.2 Many thanks to Jeremy Thomas (@jgthms) and other Bulma contributors
j1mc · Oct 12, 2018 · 67465a6 · 67465a6
1 parent 366b0e6
commit 67465a6
Show file tree

Hide file tree

Showing 28 changed files with 303 additions and 116 deletions.
diff --git a/base/_helpers.scss b/base/_helpers.scss
@@ -21,7 +21,7 @@
 // Overlay
 
 .is-overlay {
-  @include overlay;
+  @extend %overlay;
 }
 
 // Typography
@@ -277,6 +277,17 @@ $displays: "block" "flex" "inline" "inline-block" "inline-flex";
   display: none !important;
 }
 
+.is-sr-only {
+  border: none !important;
+  clip: rect(0, 0, 0, 0) !important;
+  height: 0.01em !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+  position: absolute !important;
+  white-space: nowrap !important;
+  width: 0.01em !important;
+}
+
 @include mobile {
   .is-hidden-mobile {
     display: none !important;
@@ -426,5 +437,5 @@ $displays: "block" "flex" "inline" "inline-block" "inline-flex";
 }
 
 .is-unselectable {
-  @include unselectable;
+  @extend %unselectable;
 }
diff --git a/bulma.scss b/bulma.scss
@@ -1,4 +1,4 @@
-/*! bulma.io v0.7.1 | MIT License | github.com/jgthms/bulma */
+/*! bulma.io v0.7.2 | MIT License | github.com/jgthms/bulma */
 @import "utilities/_all";
 @import "base/_all";
 @import "elements/_all";

diff --git a/components/_all.scss b/components/_all.scss
@@ -2,6 +2,7 @@
 @import "card";
 @import "dropdown";
 @import "level";
+@import "list";
 @import "media";
 @import "menu";
 @import "message";

diff --git a/components/_breadcrumb.scss b/components/_breadcrumb.scss
@@ -8,8 +8,9 @@ $breadcrumb-item-padding-horizontal: 0.75em !default;
 $breadcrumb-item-separator-color: $grey-light !default;
 
 .breadcrumb {
-  @include block;
-  @include unselectable;
+  @extend %block;
+
+  @extend %unselectable;
 
   font-size: $size-normal;
   white-space: nowrap;

diff --git a/components/_card.scss b/components/_card.scss
@@ -2,14 +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-background-color: transparent !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-content-background-color: transparent !default;
 
-$card-footer-background-color: none !default;
+$card-footer-background-color: transparent !default;
 $card-footer-border-top: 1px solid $border !default;
 
 .card {

diff --git a/components/_dropdown.scss b/components/_dropdown.scss
@@ -69,9 +69,12 @@ $dropdown-divider-background-color: $border !default;
   position: relative;
 }
 
-a.dropdown-item {
+a.dropdown-item,
+button.dropdown-item {
   padding-right: 3rem;
+  text-align: left;
   white-space: nowrap;
+  width: 100%;
 
   &:hover {
     background-color: $dropdown-item-hover-background-color;

diff --git a/components/_level.scss b/components/_level.scss
@@ -1,5 +1,5 @@
 .level {
-  @include block;
+  @extend %block;
 
   align-items: center;
   justify-content: space-between;
@@ -29,13 +29,12 @@
     .level-item {
       &:not(:last-child) {
         margin-bottom: 0;
+        margin-right: 0.75rem;
       }
 
       &:not(.is-narrow) {
         flex-grow: 1;
       }
-
-      margin-right: 0.75rem;
     }
   }
 

diff --git a/components/_list.scss b/components/_list.scss
@@ -0,0 +1,54 @@
+$list-background-color: $white !default;
+$list-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default;
+$list-radius: $radius !default;
+
+$list-item-border: 1px solid $border !default;
+$list-item-color: $text !default;
+$list-item-active-background-color: $link !default;
+$list-item-active-color: $link-invert !default;
+$list-item-hover-background-color: $background !default;
+
+.list {
+  @extend %block;
+
+  background-color: $list-background-color;
+  border-radius: $list-radius;
+  box-shadow: $list-shadow;
+
+  // &.is-hoverable > .list-item:hover:not(.is-active)
+  //   background-color: $list-item-hover-background-color
+  //   cursor: pointer
+}
+
+.list-item {
+  display: block;
+  padding: 0.5em 1em;
+
+  &:not(a) {
+    color: $list-item-color;
+  }
+
+  &:first-child {
+    border-top-left-radius: $list-radius;
+    border-top-right-radius: $list-radius;
+  }
+
+  &:last-child {
+    border-top-left-radius: $list-radius;
+    border-top-right-radius: $list-radius;
+  }
+
+  &:not(:last-child) {
+    border-bottom: $list-item-border;
+  }
+
+  &.is-active {
+    background-color: $list-item-active-background-color;
+    color: $list-item-active-color;
+  }
+}
+
+a.list-item {
+  background-color: $list-item-hover-background-color;
+  cursor: pointer;
+}
diff --git a/components/_media.scss b/components/_media.scss
@@ -62,3 +62,9 @@
   flex-shrink: 1;
   text-align: left;
 }
+
+@include mobile {
+  .media-content {
+    overflow-x: auto;
+  }
+}
diff --git a/components/_message.scss b/components/_message.scss
@@ -19,7 +19,7 @@ $message-body-pre-code-background-color: transparent !default;
 $message-header-body-border-width: 0 !default;
 
 .message {
-  @include block;
+  @extend %block;
 
   background-color: $message-background-color;
   border-radius: $message-radius;

diff --git a/components/_modal.scss b/components/_modal.scss
@@ -29,10 +29,11 @@ $modal-card-body-background-color: $white !default;
 $modal-card-body-padding: 20px !default;
 
 .modal {
-  @include overlay;
+  @extend %overlay;
 
   align-items: center;
   display: none;
+  flex-direction: column;
   justify-content: center;
   overflow: hidden;
   position: fixed;
@@ -45,7 +46,7 @@ $modal-card-body-padding: 20px !default;
 }
 
 .modal-background {
-  @include overlay;
+  @extend %overlay;
 
   background-color: $modal-background-background-color;
 }
@@ -67,7 +68,7 @@ $modal-card-body-padding: 20px !default;
 }
 
 .modal-close {
-  @include delete;
+  @extend %delete;
 
   background: none;
   height: $modal-close-dimensions;
@@ -82,6 +83,7 @@ $modal-card-body-padding: 20px !default;
   flex-direction: column;
   max-height: calc(100vh - #{$modal-card-spacing});
   overflow: hidden;
+  -ms-overflow-y: visible;
 }
 
 .modal-card-head,

diff --git a/components/_navbar.scss b/components/_navbar.scss
@@ -14,6 +14,8 @@ $navbar-item-active-color: $black !default;
 $navbar-item-active-background-color: transparent !default;
 $navbar-item-img-max-height: 1.75rem !default;
 
+$navbar-burger-color: $navbar-item-color !default;
+
 $navbar-tab-hover-background-color: transparent !default;
 $navbar-tab-hover-border-bottom-color: $link !default;
 $navbar-tab-active-color: $link !default;
@@ -42,6 +44,8 @@ $navbar-divider-height: 2px !default;
 
 $navbar-bottom-box-shadow-size: 0 -2px 0 0 !default;
 
+$navbar-breakpoint: $desktop !default;
+
 @mixin navbar-fixed {
   left: 0;
   position: fixed;
@@ -85,7 +89,11 @@ $navbar-bottom-box-shadow-size: 0 -2px 0 0 !default;
         }
       }
 
-      @include desktop {
+      .navbar-burger {
+        color: $color-invert;
+      }
+
+      @include from($navbar-breakpoint) {
         .navbar-start,
         .navbar-end {
           & > .navbar-item,
@@ -192,6 +200,8 @@ body {
 }
 
 .navbar-burger {
+  color: $navbar-burger-color;
+
   @include hamburger($navbar-height);
 
   margin-left: auto;
@@ -272,12 +282,13 @@ a.navbar-item,
   flex-shrink: 1;
 }
 
-.navbar-link {
+.navbar-link:not(.is-arrowless) {
   padding-right: 2.5em;
 
   &::after {
-    @include arrow($navbar-dropdown-arrow);
+    @extend %arrow;
 
+    border-color: $navbar-dropdown-arrow;
     margin-top: -0.375em;
     right: 1.125em;
   }
@@ -302,7 +313,7 @@ a.navbar-item,
   margin: 0.5rem 0;
 }
 
-@include touch {
+@include until($navbar-breakpoint) {
   .navbar > .container {
     display: block;
   }
@@ -374,7 +385,7 @@ a.navbar-item,
 }
 
 
-@include desktop {
+@include from($navbar-breakpoint) {
   .navbar,
   .navbar-menu,
   .navbar-start,
@@ -556,11 +567,11 @@ a.navbar-item,
   .navbar > .container,
   .container > .navbar {
     .navbar-brand {
-      margin-left: -1rem;
+      margin-left: -0.75rem;
     }
 
     .navbar-menu {
-      margin-right: -1rem;
+      margin-right: -0.75rem;
     }
   }
 

diff --git a/components/_pagination.scss b/components/_pagination.scss
@@ -1,6 +1,7 @@
 $pagination-color: $grey-darker !default;
 $pagination-border-color: $grey-lighter !default;
 $pagination-margin: -0.25rem !default;
+$pagination-min-width: $control-height !default;
 
 $pagination-hover-color: $link-hover !default;
 $pagination-hover-border-color: $link-hover-border !default;
@@ -66,8 +67,9 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2);
 .pagination-next,
 .pagination-link,
 .pagination-ellipsis {
-  @include control;
-  @include unselectable;
+  @extend %control;
+
+  @extend %unselectable;
 
   font-size: 1em;
   padding-left: 0.5em;
@@ -82,7 +84,7 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2);
 .pagination-link {
   border-color: $pagination-border-color;
   color: $pagination-color;
-  min-width: 2.25em;
+  min-width: $pagination-min-width;
 
   &:hover {
     border-color: $pagination-hover-border-color;

diff --git a/components/_tabs.scss b/components/_tabs.scss
@@ -27,9 +27,11 @@ $tabs-toggle-link-active-border-color: $link !default;
 $tabs-toggle-link-active-color: $link-invert !default;
 
 .tabs {
-  @include block;
+  @extend %block;
+
   @include overflow-touch;
-  @include unselectable;
+
+  @extend %unselectable;
 
   align-items: stretch;
   display: flex;

diff --git a/elements/_box.scss b/elements/_box.scss
@@ -8,7 +8,7 @@ $box-link-hover-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $link !default;
 $box-link-active-shadow: inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link !default;
 
 .box {
-  @include block;
+  @extend %block;
 
   background-color: $box-background-color;
   border-radius: $box-radius;

diff --git a/elements/_button.scss b/elements/_button.scss
@@ -46,8 +46,9 @@ $button-static-border-color: $grey-lighter !default;
 }
 
 .button {
-  @include control;
-  @include unselectable;
+  @extend %control;
+
+  @extend %unselectable;
 
   background-color: $button-background-color;
   border-color: $button-border-color;
@@ -281,7 +282,8 @@ $button-static-border-color: $grey-lighter !default;
     pointer-events: none;
 
     &::after {
-      @include loader;
+      @extend %loader;
+
       @include center(1em);
 
       position: absolute !important;
@@ -312,7 +314,7 @@ $button-static-border-color: $grey-lighter !default;
   .button {
     margin-bottom: 0.5rem;
 
-    &:not(:last-child) {
+    &:not(:last-child):not(.is-fullwidth) {
       margin-right: 0.5rem;
     }
   }