ui-default: init

将ui-default合并至主存储库便于维护

packages/ui-default/misc/structure.styl

@@ -0,0 +1,129 @@
+.hasjs .hasjs--hide
+  display: none
+
+.nojs .nojs--hide
+  display: none
+
+.non-scratchpad--hide
+  display: none
+
+.mode--scratchpad .non-scratchpad--hide
+  display: block
+
+.scratchpad--hide
+  display: block
+
+.mode--scratchpad .scratchpad--hide
+  display: none
+
+.main
+  padding: rem(20px 0)
+  flex: 1
+
+  +above(rupture.desktop-cutoff)
+    padding: rem(30px 0)
+
+  +mobile()
+    padding: 0
+
+.v-center
+  vertical-align: middle
+
+// Media Object
+// Heavily borrowed from http://csswizardry.com/2013/05/the-flag-object/
+
+.media
+  display: table
+  width: 100%
+
+.media__left, .media__right, .media__body
+  display: table-cell
+  vertical-align: middle
+
+  &.top
+    vertical-align: top
+
+  &.bottom
+    vertical-align: bottom
+
+.media__left
+  padding-right: rem(10px)
+
+.media__right
+  padding-left: rem(10px)
+
+.media__left, .media__right
+  img
+    display: block
+
+.media__body
+  width: 100%
+
+.display-hidden
+  display: none
+
+// Number Box Object
+.numbox
+  text-align: center
+
+.numbox__num.large
+  font-size: 1.6rem
+
+.numbox__num.medium
+  font-size: 1.3rem
+
+.numbox__text
+  font-size: rem($font-size-small)
+  margin-top: rem(10px)
+  color: #AAA
+
+// Balancer: horizontally equally distributed columns
+.balancer
+  width: 100%
+  display: table
+  table-layout: fixed
+
+.balancer__body
+  display: table-cell
+  vertical-align: middle
+
+  &.top
+    vertical-align: top
+
+  &.bottom
+    vertical-align: bottom
+
+// Flexbox helper
+.flex-row
+  display: flex
+  flex-direction: row
+
+.flex-col
+  display: flex
+  flex-direction: column
+
+.flex-fill
+  flex: 1
+  min-width: 0
+  min-height: 0
+
+.flex-main-start
+  justify-content: flex-start
+
+.flex-main-end
+  justify-content: flex-end
+
+.flex-main-center
+  justify-content: center
+
+.flex-cross-start
+  align-items: flex-start
+
+.flex-cross-end
+  align-items: flex-end
+
+.flex-cross-center
+  align-items: center
+
+.flex-cross-stretch
+  align-items: stretch