Restructure elements and components

sass/elements/button.sass

@@ -0,0 +1,111 @@
+=button-small
+  border-radius: 2px
+  font-size: 11px
+  height: 24px
+  line-height: 16px
+  padding: 3px 6px
+=button-medium
+  font-size: 18px
+  height: 40px
+  padding: 7px 14px
+=button-large
+  font-size: 22px
+  height: 48px
+  padding: 11px 20px
+
+.button
+  +control
+  +unselectable
+  justify-content: center
+  padding: 3px 10px
+  text-align: center
+  white-space: nowrap
+  strong
+    color: inherit
+  small
+    display: block
+    font-size: $size-small
+    line-height: 1
+    margin-top: 5px
+  .icon,
+  .tag
+    &:first-child
+      margin-left: -2px
+      margin-right: 4px
+    &:last-child
+      margin-left: 4px
+      margin-right: -2px
+  &:hover
+    color: $control-hover
+  &:active
+    box-shadow: inset 0 1px 2px rgba(black, 0.2)
+  // Colors
+  @each $name, $pair in $colors
+    $color: nth($pair, 1)
+    $color-invert: nth($pair, 2)
+    &.is-#{$name}
+      background: $color
+      border-color: transparent
+      color: $color-invert
+      &:hover,
+      &:focus
+        background: darken($color, 10%)
+        border-color: transparent
+        color: $color-invert
+      &:active
+        border-color: transparent
+      &.is-inverted
+        background: $color-invert
+        color: $color
+        &:hover
+          background: darken($color-invert, 5%)
+        &.is-outlined
+          background-color: transparent
+          border-color: $color-invert
+          color: $color-invert
+          &:hover
+            background: rgba(black, 0.05)
+            border-color: $color-invert
+            color: $color-invert
+      &.is-loading
+        &:after
+          border-color: transparent transparent $color-invert $color-invert !important
+      &.is-outlined
+        background: transparent
+        border-color: $color
+        color: $color
+        &:hover,
+        &:focus
+          border-color: darken($color, 10%)
+          color: darken($color, 10%)
+  &.is-link
+    border-color: transparent
+    color: $text
+    text-decoration: underline
+    &:hover,
+    &:focus
+      background: $border
+      color: $text-strong
+  // Sizes
+  &.is-small
+    +button-small
+  &.is-medium
+    +button-medium
+  &.is-large
+    +button-large
+  // Modifiers
+  &[disabled],
+  &.is-disabled
+    opacity: 0.5
+  &.is-flexible
+    height: auto
+  &.is-fullwidth
+    display: block
+    width: 100%
+  &.is-loading
+    color: transparent
+    pointer-events: none
+    &:after
+      @extend .loader
+      +center(16px)
+      position: absolute !important