Add minireset, Fix color luminance

bulma.sass

@@ -1,6 +1,7 @@
 @charset "utf-8"
 
-@import "sass/base/base"
+@import "sass/base/base.sass"
-@import "sass/elements/elements"
+@import "sass/elements/elements.sass"
-@import "sass/components/components"
+@import "sass/components/components.sass"
-@import "sass/layout/layout"
+@import "sass/layout/layout.sass"
+@import "sass/utilities/mixins.sass"

docs/_includes/footer.html

@@ -68,18 +68,13 @@
 
 {% if page.route == 'index' %}
   <style type="text/css">
-    @media screen and (max-width: 979px) {
-      .title.is-2 .icon.is-large {
-        display: none;
-      }
-    }
-
     .title.is-2 {
       position: relative;
     }
 
     .title.is-2 a {
       color: #222324;
+      padding-left: 60px;
     }
 
     .title.is-2 a:hover {
@@ -87,7 +82,7 @@
     }
 
     .title.is-2 .icon.is-large {
-      left: -72px;
+      left: 0;
       position: absolute;
       top: -1px;
     }
@@ -99,6 +94,16 @@
     .hero .title.is-2 a:hover {
       color: white;
     }
+
+    @media screen and (max-width: 979px) {
+      .title.is-2 a {
+        padding-left: 0;
+      }
+
+      .title.is-2 .icon.is-large {
+        display: none;
+      }
+    }
   </style>
 {% endif %}
 

docs/bulma-docs.sass

@@ -52,7 +52,6 @@ $carbon-space: 15px
   .carbon-text
     display: block
     color: $text-strong
-    margin-bottom: 5px
     margin-left: 130px + $carbon-space
   .carbon-poweredby
     font-size: $size-small
@@ -235,7 +234,7 @@ $structure-invert: $danger-invert
   position: relative
   .copy,
   .expand
-    @extend %unselectable
+    +unselectable
     background: $white
     border: solid $border
     border-width: 0 0 1px 1px

docs/documentation/elements/tag.html

@@ -102,6 +102,7 @@ doc-subtab: tag
       </div>
       <div class="column is-6">
 {% highlight html %}
+<span class="tag is-dark is-small">Small</span>
 <span class="tag is-primary is-medium">Medium</span>
 <span class="tag is-info is-large">Large</span>
 {% endhighlight %}
@@ -116,19 +117,19 @@ doc-subtab: tag
         <p class="control">
           <span class="tag is-info is-small">
             Foo
-            <button class="delete"></button>
+            <button class="delete is-small"></button>
           </span>
         </p>
         <p class="control">
           <span class="tag is-success">
             Bar
-            <button class="delete"></button>
+            <button class="delete is-small"></button>
           </span>
         </p>
         <p class="control">
           <span class="tag is-warning is-medium">
             Hello
-            <button class="delete"></button>
+            <button class="delete is-small"></button>
           </span>
         </p>
         <p class="control">
@@ -140,16 +141,20 @@ doc-subtab: tag
       </div>
       <div class="column is-6">
 {% highlight html %}
-<span class="tag is-success">
+<span class="tag is-info is-small">
   Foo
-  <button class="delete"></button>
+  <button class="delete is-small"></button>
+</span>
+<span class="tag is-success">
+  Bar
+  <button class="delete is-small"></button>
 </span>
 <span class="tag is-warning is-medium">
-  Bar
+  Hello
-  <button class="delete"></button>
+  <button class="delete is-small"></button>
 </span>
 <span class="tag is-danger is-large">
-  Foo bar
+  World
   <button class="delete"></button>
 </span>
 {% endhighlight %}

docs/index.html

@@ -220,14 +220,12 @@ route: index
       </div>
       <div class="tile is-parent">
         <article class="tile is-child notification is-success">
+          <p class="title">Tall tile</p>
+          <p class="subtitle">With even more content</p>
           <div class="content">
-            <p class="title">Tall tile</p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
-            <p class="subtitle">With even more content</p>
+            <p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
-            <div class="content">
+            <p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
-              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
-              <p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
-              <p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
-            </div>
           </div>
         </article>
       </div>
@@ -568,9 +566,9 @@ route: index
           </ul>
         </div>
         <p class="block">
-          <span class="tag is-dark">Tag<button class="delete"></button></span>
+          <span class="tag is-dark">Tag<button class="delete is-small"></button></span>
-          <span class="tag is-info">Two<button class="delete"></button></span>
+          <span class="tag is-info">Two<button class="delete is-small"></button></span>
-          <span class="tag is-danger">Three<button class="delete"></button></span>
+          <span class="tag is-danger">Three<button class="delete is-small"></button></span>
         </p>
         <div class="message is-warning">
           <div class="message-header">

sass/base/base.sass

@@ -1,4 +1,5 @@
 @charset "utf-8"
 
+@import "minireset"
 @import "generic"
 @import "helpers"

sass/base/generic.sass

@@ -58,7 +58,10 @@ code
   padding: 1px 2px 2px
 
 hr
-  border-top-color: $border
+  background-color: $border
+  border: none
+  display: block
+  height: 1px
   margin: 40px 0
 
 img

sass/base/helpers.sass

@@ -1,4 +1,3 @@
-@import "./placeholders.sass"
 @import "../utilities/mixins.sass"
 
 // Display
@@ -107,4 +106,4 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
   padding: 0 !important
 
 .is-unselectable
-  @extend %unselectable
+  +unselectable

sass/base/minireset.sass

@@ -0,0 +1,81 @@
+/*! minireset.css v0.0.2 | MIT License | github.com/jgthms/minireset.css */
+// Blocks
+html,
+body,
+p,
+ol,
+ul,
+li,
+dl,
+dt,
+dd,
+blockquote,
+figure,
+fieldset,
+legend,
+textarea,
+pre,
+iframe,
+hr,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6
+  margin: 0
+  padding: 0
+
+// Headings
+h1,
+h2,
+h3,
+h4,
+h5,
+h6
+  font-size: 100%
+  font-weight: normal
+
+// List
+ul
+  list-style: none
+
+// Form
+button,
+input,
+select,
+textarea
+  margin: 0
+
+// Box sizing
+html
+  box-sizing: border-box
+
+*
+  box-sizing: inherit
+  &:before,
+  &:after
+    box-sizing: inherit
+
+// Media
+img,
+embed,
+object,
+audio,
+video
+  height: auto
+  max-width: 100%
+
+// Iframe
+iframe
+  border: 0
+
+// Table
+table
+  border-collapse: collapse
+  border-spacing: 0
+
+td,
+th
+  padding: 0
+  text-align: left

sass/base/placeholders.sass

@@ -1,107 +0,0 @@
-@import "../utilities/animations.sass"
-@import "../utilities/variables.sass"
-
-%block
-  &:not(:last-child)
-    margin-bottom: 20px
-
-%delete
-  @extend %unselectable
-  -moz-appearance: none
-  -webkit-appearance: none
-  background-color: rgba($black, 0.2)
-  border: none
-  border-radius: 290486px
-  cursor: pointer
-  display: inline-block
-  height: 24px
-  position: relative
-  vertical-align: top
-  width: 24px
-  &:before,
-  &:after
-    background-color: $white
-    content: ""
-    display: block
-    height: 2px
-    left: 50%
-    margin-left: -25%
-    margin-top: -1px
-    position: absolute
-    top: 50%
-    width: 50%
-  &:before
-    transform: rotate(45deg)
-  &:after
-    transform: rotate(-45deg)
-  &:hover
-    background-color: rgba($black, 0.5)
-  // Sizes
-  &.is-small
-    height: 16px
-    width: 16px
-  &.is-medium
-    height: 32px
-    width: 32px
-  &.is-large
-    height: 40px
-    width: 40px
-
-%hamburger
-  cursor: pointer
-  display: block
-  height: $nav-height
-  position: relative
-  width: $nav-height
-  span
-    background-color: $text
-    display: block
-    height: 1px
-    left: 50%
-    margin-left: -7px
-    position: absolute
-    top: 50%
-    transition: none $speed $easing
-    transition-property: background, left, opacity, transform
-    width: 15px
-    &:nth-child(1)
-      margin-top: -6px
-    &:nth-child(2)
-      margin-top: -1px
-    &:nth-child(3)
-      margin-top: 4px
-  &:hover
-    background-color: $background
-  // Modifers
-  &.is-active
-    span
-      background-color: $link
-      &:nth-child(1)
-        margin-left: -5px
-        transform: rotate(45deg)
-        transform-origin: left top
-      &:nth-child(2)
-        opacity: 0
-      &:nth-child(3)
-        margin-left: -5px
-        transform: rotate(-45deg)
-        transform-origin: left bottom
-
-%loader
-  animation: spin-around 500ms infinite linear
-  border: 2px solid $border
-  border-radius: 290486px
-  border-right-color: transparent
-  border-top-color: transparent
-  content: ""
-  display: block
-  height: 16px
-  position: relative
-  width: 16px
-
-%unselectable
-  -webkit-touch-callout: none
-  -webkit-user-select: none
-  -moz-user-select: none
-  -ms-user-select: none
-  user-select: none

sass/components/level.sass

@@ -1,4 +1,3 @@
-@import "../base/placeholders.sass"
 @import "../utilities/mixins.sass"
 @import "../utilities/variables.sass"
 
@@ -37,7 +36,7 @@
     justify-content: flex-end
 
 .level
-  @extend %block
+  +block
   align-items: center
   justify-content: space-between
   code

sass/components/message.sass

@@ -1,4 +1,3 @@
-@import "../base/placeholders.sass"
 @import "../utilities/functions.sass"
 @import "../utilities/variables.sass"
 
@@ -21,7 +20,7 @@
     border-top: none
 
 .message
-  @extend %block
+  +block
   background-color: $background
   border-radius: $radius
   // Colors

sass/components/modal.sass

@@ -1,4 +1,3 @@
-@import "../base/placeholders.sass"
 @import "../utilities/mixins.sass"
 @import "../utilities/variables.sass"
 
@@ -20,7 +19,7 @@
     width: 640px
 
 .modal-close
-  @extend %delete
+  +delete
   background: none
   height: 40px
   position: fixed

sass/components/nav.sass

@@ -1,11 +1,10 @@
-@import "../base/placeholders.sass"
 @import "../utilities/mixins.sass"
 @import "../utilities/variables.sass"
 
 // Components
 
 .nav-toggle
-  @extend %hamburger
+  +hamburger
   // Responsiveness
   +tablet
     display: none

sass/components/tabs.sass

@@ -1,9 +1,9 @@
-@import "../base/placeholders.sass"
+@import "../utilities/mixins.sass"
 @import "../utilities/variables.sass"
 
 .tabs
-  @extend %block
+  +block
-  @extend %unselectable
+  +unselectable
   align-items: stretch
   display: flex
   justify-content: space-between

sass/elements/box.sass

@@ -1,8 +1,7 @@
-@import "../base/placeholders.sass"
 @import "../utilities/variables.sass"
 
 .box
-  @extend %block
+  +block
   background-color: $white
   border-radius: $radius-large
   box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)

sass/elements/button.sass

@@ -1,4 +1,3 @@
-@import "../base/placeholders.sass"
 @import "../utilities/controls.sass"
 @import "../utilities/variables.sass"
 
@@ -22,7 +21,8 @@
 
 .button
   +control
-  @extend %unselectable
+  +unselectable
+  cursor: pointer
   justify-content: center
   padding-left: 10px
   padding-right: 10px
@@ -109,6 +109,6 @@
     color: transparent !important
     pointer-events: none
     &:after
-      @extend %loader
+      +loader
       +center(16px)
       position: absolute !important

sass/elements/content.sass

@@ -1,8 +1,7 @@
-@import "../base/placeholders.sass"
 @import "../utilities/variables.sass"
 
 .content
-  @extend %block
+  +block
   color: $text
   // Inline
   a:not(.button)

sass/elements/form.sass

@@ -1,4 +1,3 @@
-@import "../base/placeholders.sass"
 @import "../utilities/controls.sass"
 @import "../utilities/mixins.sass"
 
@@ -42,7 +41,8 @@
   padding: 10px
   resize: vertical
 
-%control-with-element
+.checkbox,
+.radio
   cursor: pointer
   display: inline-block
   line-height: 16px
@@ -58,11 +58,7 @@
     input
       pointer-events: none
 
-.checkbox
-  @extend %control-with-element
-
 .radio
-  @extend %control-with-element
   & + .radio
     margin-left: 10px
 
@@ -257,7 +253,7 @@
         flex-shrink: 1
   &.is-loading
     &:after
-      @extend %loader
+      +loader
       position: absolute !important
       right: 8px
       top: 8px

sass/elements/notification.sass

@@ -1,9 +1,8 @@
-@import "../base/placeholders.sass"
 @import "../utilities/mixins.sass"
 @import "../utilities/variables.sass"
 
 .notification
-  @extend %block
+  +block
   +clearfix
   background-color: $background
   border-radius: $radius
@@ -13,8 +12,9 @@
     border-radius: 0 $radius
     float: right
     margin: -16px -20px 0 20px
+  .title,
   .subtitle,
-  .title
+  .content
     color: inherit
   // Colors
   @each $name, $pair in $colors

sass/elements/other.sass

@@ -1,7 +1,9 @@
-@import "../base/placeholders.sass"
 @import "../utilities/mixins.sass"
 @import "../utilities/variables.sass"
 
+.block
+  +block
+
 .container
   position: relative
   +desktop
@@ -14,11 +16,17 @@
   +widescreen
     max-width: 1200px
 
+.delete
+  +delete
+
 .fa
   font-size: 21px
   text-align: center
   vertical-align: top
 
+.hamburger
+  +hamburger
+
 .icon
   +fa(21px, 24px)
   .fa
@@ -40,7 +48,7 @@
   text-transform: uppercase
 
 .highlight
-  @extend %block
+  +block
   font-size: 12px
   font-weight: normal
   max-width: 100%
@@ -50,6 +58,9 @@
     overflow: auto
     max-width: 100%
 
+.loader
+  +loader
+
 .number
   background-color: $background
   border-radius: 290486px

sass/elements/progress.sass

@@ -1,8 +1,7 @@
-@import "../base/placeholders.sass"
 @import "../utilities/variables.sass"
 
 .progress
-  @extend %block
+  +block
   -moz-appearance: none
   -webkit-appearance: none
   border: none

sass/elements/title.sass

@@ -1,10 +1,9 @@
-@import "../base/placeholders.sass"
 @import "../utilities/mixins.sass"
 @import "../utilities/variables.sass"
 
 .title,
 .subtitle
-  @extend %block
+  +block
   font-weight: $weight-title-normal
   word-break: break-word
   em,

sass/utilities/functions.sass

@@ -22,7 +22,7 @@
   @return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722)
 
 @function findColorInvert($color)
-  @if (colorLuminance($color) > 0.7)
+  @if (colorLuminance($color) > 0.67)
-    @return rgba($black, 0.7)
+    @return rgba(black, 0.7)
   @else
     @return white

sass/utilities/mixins.sass

@@ -1,3 +1,6 @@
+@import "./animations.sass"
+@import "./variables.sass"
+
 =arrow($color)
   border: 1px solid $color
   border-right: 0
@@ -10,6 +13,10 @@
   transform: rotate(-45deg)
   width: 7px
 
+=block
+  &:not(:last-child)
+    margin-bottom: 20px
+
 =clearfix
   &:after
     clear: both
@@ -23,6 +30,48 @@
   position: absolute
   top: 50%
 
+=delete
+  +unselectable
+  -moz-appearance: none
+  -webkit-appearance: none
+  background-color: rgba($black, 0.2)
+  border: none
+  border-radius: 290486px
+  cursor: pointer
+  display: inline-block
+  height: 24px
+  position: relative
+  vertical-align: top
+  width: 24px
+  &:before,
+  &:after
+    background-color: $white
+    content: ""
+    display: block
+    height: 2px
+    left: 50%
+    margin-left: -25%
+    margin-top: -1px
+    position: absolute
+    top: 50%
+    width: 50%
+  &:before
+    transform: rotate(45deg)
+  &:after
+    transform: rotate(-45deg)
+  &:hover
+    background-color: rgba($black, 0.5)
+  // Sizes
+  &.is-small
+    height: 16px
+    width: 16px
+  &.is-medium
+    height: 32px
+    width: 32px
+  &.is-large
+    height: 40px
+    width: 40px
+
 =fa($size, $dimensions)
   display: inline-block
   font-size: $size
@@ -32,6 +81,58 @@
   vertical-align: top
   width: $dimensions
 
+=hamburger
+  cursor: pointer
+  display: block
+  height: $nav-height
+  position: relative
+  width: $nav-height
+  span
+    background-color: $text
+    display: block
+    height: 1px
+    left: 50%
+    margin-left: -7px
+    position: absolute
+    top: 50%
+    transition: none $speed $easing
+    transition-property: background, left, opacity, transform
+    width: 15px
+    &:nth-child(1)
+      margin-top: -6px
+    &:nth-child(2)
+      margin-top: -1px
+    &:nth-child(3)
+      margin-top: 4px
+  &:hover
+    background-color: $background
+  // Modifers
+  &.is-active
+    span
+      background-color: $link
+      &:nth-child(1)
+        margin-left: -5px
+        transform: rotate(45deg)
+        transform-origin: left top
+      &:nth-child(2)
+        opacity: 0
+      &:nth-child(3)
+        margin-left: -5px
+        transform: rotate(-45deg)
+        transform-origin: left bottom
+
+=loader
+  animation: spin-around 500ms infinite linear
+  border: 2px solid $border
+  border-radius: 290486px
+  border-right-color: transparent
+  border-top-color: transparent
+  content: ""
+  display: block
+  height: 16px
+  position: relative
+  width: 16px
+
 =overlay($offset: 0)
   bottom: $offset
   left: $offset
@@ -57,6 +158,13 @@
   text-indent: -290486px
   width: $width
 
+=unselectable
+  -webkit-touch-callout: none
+  -webkit-user-select: none
+  -moz-user-select: none
+  -ms-user-select: none
+  user-select: none
+
 // Responsiveness
 
 $tablet: 769px !default

sass/utilities/reset.sass

@@ -1,174 +0,0 @@
-//
-//  HTML5 Reset :: style.css
-//  ----------------------------------------------------------
-//  We have learned much from/been inspired by/taken code where offered from:
-//
-//  Eric Meyer          :: http://meyerweb.com
-//  HTML5 Doctor        :: http://html5doctor.com
-//  and the HTML5 Boilerplate :: http://html5boilerplate.com
-//
-//-------------------------------------------------------------------------------
-
-// Let's default this puppy out
-
-html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary
-  margin: 0
-  padding: 0
-  border: 0
-  font-size: 100%
-  font-weight: normal
-  vertical-align: baseline
-  background: transparent
-
-article, aside, figure, footer, header, nav, section, details, summary
-  display: block
-
-// Handle box-sizing while better addressing child elements:
-// http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
-html
-  box-sizing: border-box
-
-*,
-*:before,
-*:after
-  box-sizing: inherit
-
-// consider resetting the default cursor: https://gist.github.com/murtaugh/5247154
-
-// Responsive images and other embedded objects
-img,
-object,
-embed
-  max-width: 100%
-
-//
-//   Note: keeping IMG here will cause problems if you're using foreground images as sprites.
-//   In fact, it *will* cause problems with Google Maps' controls at small size.
-//  If this is the case for you, try uncommenting the following:
-//
-//#map img {
-//    max-width: none;
-//}
-
-// force a vertical scrollbar to prevent a jumpy page
-html
-  overflow-y: scroll
-
-// we use a lot of ULs that aren't bulleted.
-//  don't forget to restore the bullets within content.
-ul
-  list-style: none
-
-blockquote, q
-  quotes: none
-
-blockquote:before,
-blockquote:after,
-q:before,
-q:after
-  content: ''
-  content: none
-
-a
-  margin: 0
-  padding: 0
-  font-size: 100%
-  vertical-align: baseline
-  background: transparent
-
-del
-  text-decoration: line-through
-
-abbr[title], dfn[title]
-  border-bottom: 1px dotted #000
-  cursor: help
-
-// tables still need cellspacing="0" in the markup
-table
-  border-collapse: collapse
-  border-spacing: 0
-
-th
-  font-weight: bold
-  vertical-align: bottom
-
-td
-  font-weight: normal
-  vertical-align: top
-
-hr
-  display: block
-  height: 1px
-  border: 0
-  border-top: 1px solid #ccc
-  margin: 1em 0
-  padding: 0
-
-input, select
-  vertical-align: middle
-
-pre
-  white-space: pre
-  // CSS2
-  white-space: pre-wrap
-  // CSS 2.1
-  white-space: pre-line
-  // CSS 3 (and 2.1 as well, actually)
-  word-wrap: break-word
-  // IE
-
-input[type="radio"]
-  vertical-align: text-bottom
-
-input[type="checkbox"]
-  vertical-align: bottom
-
-select, input, textarea
-  font: 99% sans-serif
-
-table
-  font-size: inherit
-  font: 100%
-
-small
-  font-size: 85%
-
-strong
-  font-weight: bold
-
-td, td img
-  vertical-align: top
-
-// Make sure sup and sub don't mess with your line-heights http://gist.github.com/413930
-sub, sup
-  font-size: 75%
-  line-height: 0
-  position: relative
-
-sup
-  top: -0.5em
-
-sub
-  bottom: -0.25em
-
-// standardize any monospaced elements
-pre, code, kbd, samp
-  font-family: monospace, sans-serif
-
-// hand cursor on clickable elements
-label,
-input[type=button],
-input[type=submit],
-input[type=file],
-button
-  cursor: pointer
-
-// Webkit browsers add a 2px margin outside the chrome of form elements
-button, input, select, textarea
-  margin: 0
-
-// make buttons play nice in IE
-button,
-input[type=button]
-  width: auto
-  overflow: visible