Add placeholders

bulma.sass

@@ -1,6 +1,5 @@
 @charset "utf-8"
 
-@import "sass/utilities/utilities"
 @import "sass/base/base"
 @import "sass/elements/elements"
 @import "sass/components/components"

docs/bulma-docs.sass

@@ -235,7 +235,7 @@ $structure-invert: $danger-invert
   position: relative
   .copy,
   .expand
-    @extend .unselectable
+    @extend %unselectable
     background: $white
     border: solid $border
     border-width: 0 0 1px 1px

sass/base/base.sass

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

sass/base/classes.sass

@@ -1,22 +0,0 @@
-@import "../utilities/mixins.sass"
-
-.block
-  &:not(:last-child)
-    margin-bottom: 20px
-
-.container
-  position: relative
-  +desktop
-    margin: 0 auto
-    max-width: 960px
-    // Modifiers
-    &.is-fluid
-      margin: 0 20px
-      max-width: none
-  +widescreen
-    max-width: 1200px
-
-.fa
-  font-size: 21px
-  text-align: center
-  vertical-align: top

sass/base/helpers.sass

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

sass/base/placeholders.sass

@@ -0,0 +1,107 @@
+@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,4 @@
-@import "../base/classes.sass"
+@import "../base/placeholders.sass"
 @import "../utilities/mixins.sass"
 @import "../utilities/variables.sass"
 
@@ -37,7 +37,7 @@
     justify-content: flex-end
 
 .level
-  @extend .block
+  @extend %block
   align-items: center
   justify-content: space-between
   code

sass/components/message.sass

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

sass/components/modal.sass

@@ -1,4 +1,4 @@
-@import "../elements/other.sass"
+@import "../base/placeholders.sass"
 @import "../utilities/mixins.sass"
 @import "../utilities/variables.sass"
 
@@ -6,7 +6,8 @@
   +overlay
   background-color: rgba($black, 0.86)
 
-.modal-content
+.modal-content,
+.modal-card
   margin: 0 20px
   max-height: calc(100vh - 160px)
   overflow: auto
@@ -19,7 +20,7 @@
     width: 640px
 
 .modal-close
-  @extend .delete
+  @extend %delete
   background: none
   height: 40px
   position: fixed
@@ -28,7 +29,6 @@
   width: 40px
 
 .modal-card
-  @extend .modal-content
   display: flex
   flex-direction: column
   max-height: calc(100vh - 40px)

sass/components/nav.sass

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

sass/components/tabs.sass

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

sass/elements/box.sass

@@ -1,8 +1,8 @@
-@import "../base/classes.sass"
+@import "../base/placeholders.sass"
 @import "../utilities/variables.sass"
 
 .box
-  @extend .block
+  @extend %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,4 @@
-@import "../elements/other.sass"
+@import "../base/placeholders.sass"
 @import "../utilities/controls.sass"
 @import "../utilities/variables.sass"
 
@@ -22,7 +22,7 @@
 
 .button
   +control
-  @extend .unselectable
+  @extend %unselectable
   justify-content: center
   padding-left: 10px
   padding-right: 10px
@@ -109,6 +109,6 @@
     color: transparent !important
     pointer-events: none
     &:after
-      @extend .loader
+      @extend %loader
       +center(16px)
       position: absolute !important

sass/elements/content.sass

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

sass/elements/form.sass

@@ -1,4 +1,4 @@
-@import "../elements/other.sass"
+@import "../base/placeholders.sass"
 @import "../utilities/controls.sass"
 @import "../utilities/mixins.sass"
 
@@ -9,7 +9,8 @@
     &.is-#{$name}
       border-color: $color
 
-.input
+.input,
+.textarea
   +form-control
   box-shadow: inset 0 1px 2px rgba($black, 0.1)
   max-width: 100%
@@ -32,7 +33,6 @@
     width: auto
 
 .textarea
-  @extend .input
   display: block
   line-height: 1.2
   max-height: 600px
@@ -257,7 +257,7 @@
         flex-shrink: 1
   &.is-loading
     &:after
-      @extend .loader
+      @extend %loader
       position: absolute !important
       right: 8px
       top: 8px

sass/elements/notification.sass

@@ -1,9 +1,9 @@
-@import "../base/classes.sass"
+@import "../base/placeholders.sass"
 @import "../utilities/mixins.sass"
 @import "../utilities/variables.sass"
 
 .notification
-  @extend .block
+  @extend %block
   +clearfix
   background-color: $background
   border-radius: $radius

sass/elements/other.sass

@@ -1,48 +1,23 @@
-@import "../base/classes.sass"
+@import "../base/placeholders.sass"
 @import "../utilities/mixins.sass"
 @import "../utilities/variables.sass"
 
-.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
+.container
   position: relative
+  +desktop
+    margin: 0 auto
+    max-width: 960px
+    // Modifiers
+    &.is-fluid
+      margin: 0 20px
+      max-width: none
+  +widescreen
+    max-width: 1200px
+
+.fa
+  font-size: 21px
+  text-align: center
   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
 
 .icon
   +fa(21px, 24px)
@@ -57,46 +32,6 @@
   &.is-large
     +fa(42px, 48px)
 
-.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
-
 .heading
   display: block
   font-size: 11px
@@ -105,7 +40,7 @@
   text-transform: uppercase
 
 .highlight
-  @extend .block
+  @extend %block
   font-size: 12px
   font-weight: normal
   max-width: 100%
@@ -115,18 +50,6 @@
     overflow: auto
     max-width: 100%
 
-.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
-
 .number
   background-color: $background
   border-radius: 290486px
@@ -178,11 +101,3 @@
     .delete
       margin-left: 4px
       margin-right: -8px
-
-.unselectable
-  -webkit-touch-callout: none
-  -webkit-user-select: none
-  -moz-user-select: none
-  -ms-user-select: none
-  user-select: none
-

sass/elements/progress.sass

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

sass/elements/title.sass

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

sass/utilities/utilities.sass

@@ -1,8 +0,0 @@
-@charset "utf-8"
-
-@import "reset"
-@import "functions"
-@import "mixins"
-@import "animations"
-@import "controls"
-@import "variables"