Restructure files, Add back inline-flex for controls and tags

sass/base/base.sass

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

sass/base/classes.sass

@@ -0,0 +1,18 @@
+.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
+
+.fa
+  font-size: 21px
+  text-align: center
+  vertical-align: top

sass/base/generic.sass

@@ -97,24 +97,3 @@ table
     vertical-align: top
   th
     color: $text-strong
-
-// Classes
-
-.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
-
-.fa
-  font-size: 21px
-  text-align: center
-  vertical-align: top

sass/components/components.sass

@@ -2,6 +2,7 @@
 
 @import "card"
 @import "grid"
+@import "highlight"
 @import "media"
 @import "menu"
 @import "message"
@@ -10,19 +11,3 @@
 @import "pagination"
 @import "panel"
 @import "tabs"
-
-.box
-  @extend .block
-  background: white
-  border-radius: 5px
-  box-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px rgba(black, 0.1)
-  display: block
-  padding: 20px
-
-a.box
-  &:hover,
-  &:focus
-    box-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px $link
-  &:active
-    box-shadow: inset 0 1px 2px rgba(black, 0.2), 0 0 0 1px $link
-

sass/elements/box.sass

@@ -0,0 +1,14 @@
+.box
+  @extend .block
+  background: white
+  border-radius: 5px
+  box-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px rgba(black, 0.1)
+  display: block
+  padding: 20px
+
+a.box
+  &:hover,
+  &:focus
+    box-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px $link
+  &:active
+    box-shadow: inset 0 1px 2px rgba(black, 0.2), 0 0 0 1px $link

sass/elements/controls.sass

@@ -1,11 +1,12 @@
 =control
   -moz-appearance: none
   -webkit-appearance: none
+  align-items: center
   background: $control-background
   border: 1px solid $control-border
   border-radius: $radius
   color: $control
-  display: inline-block
+  display: inline-flex
   font-size: $size-normal
   height: 32px
   line-height: 24px

sass/elements/elements.sass

@@ -2,6 +2,7 @@
 
 @import "controls"
 
+@import "box"
 @import "button"
 @import "content"
 @import "image"
@@ -10,183 +11,4 @@
 @import "table"
 @import "title"
 
-.delete
-  +unselectable
-  -moz-appearance: none
-  -webkit-appearance: none
-  background: 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: 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: 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)
-  .fa
-    font-size: inherit
-    line-height: inherit
-  // Sizes
-  &.is-small
-    +fa(14px, 16px)
-  &.is-medium
-    +fa(28px, 32px)
-  &.is-large
-    +fa(42px, 48px)
-
-.hamburger
-  cursor: pointer
-  display: block
-  height: 50px
-  position: relative
-  width: 50px
-  span
-    background: $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: $background
-  // Modifers
-  &.is-active
-    span
-      background: $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
-  +tablet
-    height: $header-height
-    width: $header-height
-
-.heading
-  display: block
-  font-size: 11px
-  letter-spacing: 1px
-  margin-bottom: 5px
-  text-transform: uppercase
-
-.highlight
-  @extend .block
-  font-size: 12px
-  font-weight: normal
-  max-width: 100%
-  overflow: hidden
-  padding: 0
-  pre
-    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: $background
-  border-radius: 290486px
-  display: inline-block
-  font-size: $size-medium
-  vertical-align: top
-
-.tag
-  background: $background
-  border-radius: 290486px
-  color: $text
-  display: inline-block
-  font-size: 12px
-  height: 24px
-  justify-content: center
-  line-height: 16px
-  padding: 4px 10px
-  vertical-align: top
-  white-space: nowrap
-  .delete
-    margin-left: 4px
-    margin-right: -6px
-  &:not(.is-large)
-    .delete
-      @extend .delete.is-small
-  // Colors
-  @each $name, $pair in $colors
-    $color: nth($pair, 1)
-    $color-invert: nth($pair, 2)
-    &.is-#{$name}
-      background: $color
-      color: $color-invert
-  &.is-dark
-    background: $text
-    color: $text-invert
-  // Sizes
-  &.is-small
-    font-size: $size-small
-    height: 20px
-    padding: 2px 8px
-  &.is-medium
-    font-size: $size-normal
-    height: 32px
-    padding: 8px 14px
-  &.is-large
-    font-size: $size-5
-    height: 40px
-    line-height: 24px
-    padding: 8px 18px
-    .delete
-      margin-left: 4px
-      margin-right: -8px
+@import "other"

sass/elements/other.sass

@@ -0,0 +1,181 @@
+.delete
+  +unselectable
+  -moz-appearance: none
+  -webkit-appearance: none
+  background: 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: 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: 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)
+  .fa
+    font-size: inherit
+    line-height: inherit
+  // Sizes
+  &.is-small
+    +fa(14px, 16px)
+  &.is-medium
+    +fa(28px, 32px)
+  &.is-large
+    +fa(42px, 48px)
+
+.hamburger
+  cursor: pointer
+  display: block
+  height: 50px
+  position: relative
+  width: 50px
+  span
+    background: $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: $background
+  // Modifers
+  &.is-active
+    span
+      background: $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
+  +tablet
+    height: $header-height
+    width: $header-height
+
+.heading
+  display: block
+  font-size: 11px
+  letter-spacing: 1px
+  margin-bottom: 5px
+  text-transform: uppercase
+
+.highlight
+  @extend .block
+  font-size: 12px
+  font-weight: normal
+  max-width: 100%
+  overflow: hidden
+  padding: 0
+  pre
+    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: $background
+  border-radius: 290486px
+  display: inline-block
+  font-size: $size-medium
+  vertical-align: top
+
+.tag
+  align-items: center
+  background: $background
+  border-radius: 290486px
+  color: $text
+  display: inline-flex
+  font-size: 12px
+  height: 24px
+  justify-content: center
+  line-height: 16px
+  padding: 4px 10px
+  vertical-align: top
+  white-space: nowrap
+  .delete
+    margin-left: 4px
+    margin-right: -6px
+  &:not(.is-large)
+    .delete
+      @extend .delete.is-small
+  // Colors
+  @each $name, $pair in $colors
+    $color: nth($pair, 1)
+    $color-invert: nth($pair, 2)
+    &.is-#{$name}
+      background: $color
+      color: $color-invert
+  &.is-dark
+    background: $text
+    color: $text-invert
+  // Sizes
+  &.is-small
+    font-size: $size-small
+    height: 20px
+    padding: 2px 8px
+  &.is-medium
+    font-size: $size-normal
+    height: 32px
+    padding: 8px 14px
+  &.is-large
+    font-size: $size-5
+    height: 40px
+    line-height: 24px
+    padding: 8px 18px
+    .delete
+      margin-left: 4px
+      margin-right: -8px