Restructure elements and components

sass/elements/content.sass

@@ -0,0 +1,67 @@
+.content
+  @extend .block
+  // Inline
+  li + li
+    margin-top: 0.25em
+  // Block
+  blockquote,
+  p,
+  ol,
+  ul
+    &:not(:last-child)
+      margin-bottom: 1em
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6
+    color: $text-strong
+    font-weight: 300
+    line-height: 1.125
+    margin-bottom: 20px
+  h1,
+  h2,
+  h3
+    &:not(:first-child)
+      margin-top: 40px
+  blockquote
+    background: $background
+    border-left: 5px solid $border
+    padding: 1.5em
+  h1
+    font-size: 2em
+  h2
+    font-size: 1.75em
+  h3
+    font-size: 1.5em
+  h4
+    font-size: 1.25em
+  h5
+    font-size: 1.125em
+  h6
+    font-size: 1em
+  ol
+    list-style: decimal outside
+    margin-left: 2em
+    margin-right: 2em
+    margin-top: 1em
+  ul
+    list-style: disc outside
+    margin-left: 2em
+    margin-right: 2em
+    margin-top: 1em
+    ul
+      list-style-type: circle
+      margin-top: 0.5em
+      ul
+        list-style-type: square
+  // Sizes
+  &.is-medium
+    font-size: $size-5
+    code
+      font-size: $size-6
+  &.is-large
+    font-size: $size-4
+    code
+      font-size: $size-5

sass/elements/elements.sass

@@ -1,12 +1,14 @@
 @charset "utf-8"
 
 @import "controls"
-@import "buttons"
-@import "titles"
-@import "images"
-@import "messages"
-@import "notifications"
+
+@import "button"
+@import "content"
+@import "image"
+@import "notification"
 @import "progress"
+@import "table"
+@import "title"
 
 .delete
   +unselectable

sass/elements/messages.sass

@@ -1,39 +0,0 @@
-.message-body
-  border: 1px solid $border
-  border-radius: $radius
-  padding: 12px 15px
-  strong
-    color: inherit
-
-.message-header
-  background: $text
-  border-radius: $radius $radius 0 0
-  color: $text-invert
-  padding: 7px 10px
-  strong
-    color: inherit
-  & + .message-body
-    border-radius: 0 0 $radius $radius
-    border-top: none
-
-.message
-  @extend .block
-  background: $background
-  border-radius: $radius
-  // Colors
-  @each $name, $pair in $colors
-    $color: nth($pair, 1)
-    $color-invert: nth($pair, 2)
-    $lightning: (100% - lightness($color)) - 4%
-    $darkness: max(lightness($color) - 10%, lightness($color))
-    &.is-#{$name}
-      background: lighten($color, $lightning)
-      .message-header
-        background: $color
-        color: $color-invert
-      .message-body
-        border-color: $color
-        @if (colorLuminance($color) > 0.8)
-          color: desaturate(lighten(darken($color, 100%), 40%), 40%)
-        @else
-          color: desaturate(lighten(darken($color, 100%), 50%), 30%)

sass/elements/table.sass

@@ -0,0 +1,89 @@
+.table
+  background: white
+  color: $text-strong
+  margin-bottom: 20px
+  width: 100%
+  td,
+  th
+    border: 1px solid $border
+    border-width: 0 0 1px
+    padding: 8px 10px
+    vertical-align: top
+    // Modifiers
+    &.is-icon
+      padding: 5px
+      text-align: center
+      white-space: nowrap
+      width: 1%
+      .fa
+        +fa(21px, 24px)
+      &.is-link
+        padding: 0
+        & > a
+          padding: 5px
+    &.is-link
+      padding: 0
+      & > a
+        display: block
+        padding: 8px 10px
+        &:hover
+          background: $link
+          color: $link-invert
+    &.is-narrow
+      white-space: nowrap
+      width: 1%
+  th
+    color: $text-strong
+    text-align: left
+  tr
+    &:hover
+      background: $background
+      color: $text-strong
+  thead
+    td,
+    th
+      border-width: 0 0 2px
+      color: $text-light
+  tbody
+    tr
+      &:last-child
+        td,
+        th
+          border-bottom-width: 0
+  tfoot
+    td,
+    th
+      border-width: 2px 0 0
+      color: $text-light
+  // Modifiers
+  &.is-bordered
+    td,
+    th
+      border-width: 1px
+    tr
+      &:last-child
+        td,
+        th
+          border-bottom-width: 1px
+  &.is-narrow
+    td,
+    th
+      padding: 5px 10px
+      // Modifiers
+      &.is-icon
+        padding: 2px
+        &.is-link
+          padding: 0
+          & > a
+            padding: 2px
+      &.is-link
+        padding: 0
+        & > a
+          padding: 5px 10px
+  &.is-striped
+    tbody
+      tr
+        &:nth-child(2n)
+          background: $background
+          &:hover
+            background: $border