Bulma SCSS 0.7.4

Converted from: https://github.com/jgthms/bulma/releases/tag/0.7.4 Many thanks to Jeremy Thomas (@jgthms) and other Bulma contributors
j1mc · Feb 8, 2019 · 3ad510c · 3ad510c
1 parent 234cd3d
commit 3ad510c
Show file tree

Hide file tree

Showing 18 changed files with 184 additions and 85 deletions.
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2018 Jeremy Thomas
+Copyright (c) 2019 Jeremy Thomas
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/README.md b/README.md
@@ -3,7 +3,7 @@
 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.7.2, and will be updated
+Currently, these files are based on Bulma version 0.7.4, 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
@@ -120,6 +120,10 @@ strong {
 
 // Block
 
+fieldset {
+  border: none;
+}
+
 pre {
   @include overflow-touch;
 

diff --git a/base/_helpers.scss b/base/_helpers.scss
@@ -201,6 +201,26 @@ $alignments: ("centered": "center", "justified": "justify", "left": "left", "rig
   font-weight: $weight-bold !important;
 }
 
+.is-family-primary {
+  font-family: $family-primary !important;
+}
+
+.is-family-secondary {
+  font-family: $family-secondary !important;
+}
+
+.is-family-sans-serif {
+  font-family: $family-sans-serif !important;
+}
+
+.is-family-monospace {
+  font-family: $family-monospace !important;
+}
+
+.is-family-code {
+  font-family: $family-code !important;
+}
+
 // Visibility
 
 $displays: "block" "flex" "inline" "inline-block" "inline-flex";

diff --git a/base/_minireset.scss b/base/_minireset.scss
@@ -1,4 +1,4 @@
-/*! minireset.css v0.0.3 | MIT License | github.com/jgthms/minireset.css */
+/*! minireset.css v0.0.4 | MIT License | github.com/jgthms/minireset.css */
 // Blocks
 html,
 body,
@@ -66,12 +66,18 @@ html {
 
 // Media
 img,
-audio,
+embed,
+iframe,
+object,
 video {
   height: auto;
   max-width: 100%;
 }
 
+audio {
+  max-width: 100%;
+}
+
 // Iframe
 iframe {
   border: 0;

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

diff --git a/components/_message.scss b/components/_message.scss
@@ -29,7 +29,7 @@ $message-header-body-border-width: 0 !default;
     color: currentColor;
   }
 
-  a:not(.button):not(.tag) {
+  a:not(.button):not(.tag):not(.dropdown-item) {
     color: currentColor;
     text-decoration: underline;
   }

diff --git a/components/_navbar.scss b/components/_navbar.scss
@@ -635,3 +635,12 @@ a.navbar-item,
     }
   }
 }
+
+
+// Combination
+
+.hero {
+  &.is-fullheight-with-navbar {
+    min-height: calc(100vh - #{$navbar-height});
+  }
+}
diff --git a/elements/_button.scss b/elements/_button.scss
@@ -37,6 +37,10 @@ $button-static-border-color: $grey-lighter !default;
   font-size: $size-small;
 }
 
+@mixin button-normal {
+  font-size: $size-normal;
+}
+
 @mixin button-medium {
   font-size: $size-medium;
 }
@@ -136,7 +140,8 @@ $button-static-border-color: $grey-lighter !default;
       color: $button-text-hover-color;
     }
 
-    &[disabled] {
+    &[disabled],
+    fieldset[disabled] & {
       background-color: transparent;
       border-color: transparent;
       box-shadow: none;
@@ -176,7 +181,8 @@ $button-static-border-color: $grey-lighter !default;
         color: $color-invert;
       }
 
-      &[disabled] {
+      &[disabled],
+      fieldset[disabled] & {
         background-color: $color;
         border-color: transparent;
         box-shadow: none;
@@ -190,7 +196,8 @@ $button-static-border-color: $grey-lighter !default;
           background-color: darken($color-invert, 5%);
         }
 
-        &[disabled] {
+        &[disabled],
+        fieldset[disabled] & {
           background-color: $color-invert;
           border-color: transparent;
           box-shadow: none;
@@ -222,7 +229,8 @@ $button-static-border-color: $grey-lighter !default;
           }
         }
 
-        &[disabled] {
+        &[disabled],
+        fieldset[disabled] & {
           background-color: transparent;
           border-color: $color;
           box-shadow: none;
@@ -241,7 +249,8 @@ $button-static-border-color: $grey-lighter !default;
           color: $color;
         }
 
-        &[disabled] {
+        &[disabled],
+        fieldset[disabled] & {
           background-color: transparent;
           border-color: $color-invert;
           box-shadow: none;
@@ -256,6 +265,10 @@ $button-static-border-color: $grey-lighter !default;
     @include button-small;
   }
 
+  &.is-normal {
+    @include button-normal;
+  }
+
   &.is-medium {
     @include button-medium;
   }
@@ -265,7 +278,8 @@ $button-static-border-color: $grey-lighter !default;
   }
 
   // Modifiers
-  &[disabled] {
+  &[disabled],
+  fieldset[disabled] & {
     background-color: $button-disabled-background-color;
     border-color: $button-disabled-border-color;
     box-shadow: $button-disabled-shadow;
@@ -327,6 +341,25 @@ $button-static-border-color: $grey-lighter !default;
     margin-bottom: 1rem;
   }
 
+  // Sizes
+  &.are-small {
+    .button:not(.is-normal):not(.is-medium):not(.is-large) {
+      @include button-small;
+    }
+  }
+
+  &.are-medium {
+    .button:not(.is-small):not(.is-normal):not(.is-large) {
+      @include button-medium;
+    }
+  }
+
+  &.are-large {
+    .button:not(.is-small):not(.is-normal):not(.is-medium) {
+      @include button-large;
+    }
+  }
+
   &.has-addons {
     .button {
       &:not(:first-child) {

diff --git a/elements/_form.scss b/elements/_form.scss
@@ -3,6 +3,7 @@ $input-background-color: $white !default;
 $input-border-color: $grey-lighter !default;
 $input-height: $control-height !default;
 $input-shadow: inset 0 1px 2px rgba($black, 0.1) !default;
+$input-placeholder-color: rgba($input-color, 0.3) !default;
 
 $input-hover-color: $grey-darker !default;
 $input-hover-border-color: $grey-light !default;
@@ -15,6 +16,7 @@ $input-focus-box-shadow-color: rgba($link, 0.25) !default;
 $input-disabled-color: $text-light !default;
 $input-disabled-background-color: $background !default;
 $input-disabled-border-color: $background !default;
+$input-disabled-placeholder-color: rgba($input-disabled-color, 0.3) !default;
 
 $input-arrow: $link !default;
 
@@ -49,7 +51,7 @@ $help-size: $size-small !default;
   color: $input-color;
 
   @include placeholder {
-    color: rgba($input-color, 0.3);
+    color: $input-placeholder-color;
   }
 
 
@@ -66,14 +68,15 @@ $help-size: $size-small !default;
     box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color;
   }
 
-  &[disabled] {
+  &[disabled],
+  fieldset[disabled] & {
     background-color: $input-disabled-background-color;
     border-color: $input-disabled-border-color;
     box-shadow: none;
     color: $input-disabled-color;
 
     @include placeholder {
-      color: rgba($input-disabled-color, 0.3);
+      color: $input-disabled-placeholder-color;
     }
   }
 }
@@ -184,7 +187,8 @@ $help-size: $size-small !default;
     color: $input-hover-color;
   }
 
-  &[disabled] {
+  &[disabled],
+  fieldset[disabled] & {
     color: $input-disabled-color;
     cursor: not-allowed;
   }
@@ -236,7 +240,8 @@ $help-size: $size-small !default;
       display: none;
     }
 
-    &[disabled]:hover {
+    &[disabled]:hover,
+    fieldset[disabled] &:hover {
       border-color: $input-disabled-border-color;
     }
 
@@ -667,7 +672,7 @@ $help-size: $size-small !default;
         }
       }
 
-      &:first-child {
+      &:first-child:not(:only-child) {
         .button,
         .input,
         .select select {
@@ -676,7 +681,7 @@ $help-size: $size-small !default;
         }
       }
 
-      &:last-child {
+      &:last-child:not(:only-child) {
         .button,
         .input,
         .select select {
@@ -849,71 +854,13 @@ $help-size: $size-small !default;
 }
 
 .control {
+  box-sizing: border-box;
   clear: both;
   font-size: $size-normal;
   position: relative;
   text-align: left;
 
   // Modifiers
-  // DEPRECATED
-  &.has-icon {
-    .icon {
-      color: $input-icon-color;
-      height: $input-height;
-      pointer-events: none;
-      position: absolute;
-      top: 0;
-      width: $input-height;
-      z-index: 4;
-    }
-
-    .input {
-      &:focus {
-        & + .icon {
-          color: $input-icon-active-color;
-        }
-      }
-
-      &.is-small {
-        & + .icon {
-          font-size: $size-small;
-        }
-      }
-
-      &.is-medium {
-        & + .icon {
-          font-size: $size-medium;
-        }
-      }
-
-      &.is-large {
-        & + .icon {
-          font-size: $size-large;
-        }
-      }
-    }
-
-    &:not(.has-icon-right) {
-      .icon {
-        left: 0;
-      }
-
-      .input {
-        padding-left: $input-height;
-      }
-    }
-
-    &.has-icon-right {
-      .icon {
-        right: 0;
-      }
-
-      .input {
-        padding-right: $input-height;
-      }
-    }
-  }
-
   &.has-icons-left,
   &.has-icons-right {
     .input,

diff --git a/elements/_image.scss b/elements/_image.scss
@@ -31,7 +31,8 @@ $dimensions: 16 24 32 48 64 96 128 !default;
   &.is-9by16,
   &.is-1by2,
   &.is-1by3 {
-    img {
+    img,
+    .has-ratio {
       @extend %overlay;
 
       height: 100%;