Merge pull request #36 from picturepan2/feature/more-layout v0.1.19

Feature/more layout

1 files changed, 336 insertions, 302 deletions

diff --git a/dist/spectre.css b/dist/spectre.css
index 89ae1d7..fdb7b99 100644
--- a/dist/spectre.css
+++ b/dist/spectre.css
@@ -368,7 +368,7 @@ textarea {
 html {
   box-sizing: border-box;
   font-size: 10px;
-  line-height: 1.428571429;
+  line-height: 1.42857143;
   -webkit-tap-highlight-color: transparent;
 }
 body {
@@ -513,306 +513,6 @@ pre code {
   margin-bottom: 0;
   margin-top: 0;
 }
-.container {
-  margin-left: auto;
-  margin-right: auto;
-  overflow-x: hidden;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  width: 100%;
-}
-@media screen and (min-width: 981px) {
-  .grid-960 {
-    margin-left: auto;
-    margin-right: auto;
-    width: 96rem;
-  }
-}
-@media screen and (min-width: 481px) {
-  .grid-480 {
-    margin-left: auto;
-    margin-right: auto;
-    width: 48rem;
-  }
-}
-.columns {
-  display: flex;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  margin-left: -1rem;
-  margin-right: -1rem;
-}
-.column {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  padding: 1rem;
-}
-.column.col-12,
-.column.col-11,
-.column.col-10,
-.column.col-9,
-.column.col-8,
-.column.col-7,
-.column.col-6,
-.column.col-5,
-.column.col-4,
-.column.col-3,
-.column.col-2,
-.column.col-1 {
-  -webkit-flex: none;
-  -ms-flex: none;
-  flex: none;
-}
-.col-12 {
-  width: 100%;
-}
-.col-11 {
-  width: 91.66666667%;
-}
-.col-10 {
-  width: 83.33333333%;
-}
-.col-9 {
-  width: 75%;
-}
-.col-8 {
-  width: 66.66666667%;
-}
-.col-7 {
-  width: 58.33333333%;
-}
-.col-6 {
-  width: 50%;
-}
-.col-5 {
-  width: 41.66666667%;
-}
-.col-4 {
-  width: 33.33333333%;
-}
-.col-3 {
-  width: 25%;
-}
-.col-2 {
-  width: 16.66666667%;
-}
-.col-1 {
-  width: 8.33333333%;
-}
-@media screen and (min-width: 481px) {
-  .col-xs-12,
-  .col-xs-11,
-  .col-xs-10,
-  .col-xs-9,
-  .col-xs-8,
-  .col-xs-7,
-  .col-xs-6,
-  .col-xs-5,
-  .col-xs-4,
-  .col-xs-3,
-  .col-xs-2,
-  .col-xs-1 {
-    -webkit-flex: none;
-    -ms-flex: none;
-    flex: none;
-  }
-  .col-xs-12 {
-    width: 100%;
-  }
-  .col-xs-11 {
-    width: 91.66666667%;
-  }
-  .col-xs-10 {
-    width: 83.33333333%;
-  }
-  .col-xs-9 {
-    width: 75%;
-  }
-  .col-xs-8 {
-    width: 66.66666667%;
-  }
-  .col-xs-7 {
-    width: 58.33333333%;
-  }
-  .col-xs-6 {
-    width: 50%;
-  }
-  .col-xs-5 {
-    width: 41.66666667%;
-  }
-  .col-xs-4 {
-    width: 33.33333333%;
-  }
-  .col-xs-3 {
-    width: 25%;
-  }
-  .col-xs-2 {
-    width: 16.66666667%;
-  }
-  .col-xs-1 {
-    width: 8.33333333%;
-  }
-}
-@media screen and (min-width: 601px) {
-  .col-sm-12,
-  .col-sm-11,
-  .col-sm-10,
-  .col-sm-9,
-  .col-sm-8,
-  .col-sm-7,
-  .col-sm-6,
-  .col-sm-5,
-  .col-sm-4,
-  .col-sm-3,
-  .col-sm-2,
-  .col-sm-1 {
-    -webkit-flex: none;
-    -ms-flex: none;
-    flex: none;
-  }
-  .col-sm-12 {
-    width: 100%;
-  }
-  .col-sm-11 {
-    width: 91.66666667%;
-  }
-  .col-sm-10 {
-    width: 83.33333333%;
-  }
-  .col-sm-9 {
-    width: 75%;
-  }
-  .col-sm-8 {
-    width: 66.66666667%;
-  }
-  .col-sm-7 {
-    width: 58.33333333%;
-  }
-  .col-sm-6 {
-    width: 50%;
-  }
-  .col-sm-5 {
-    width: 41.66666667%;
-  }
-  .col-sm-4 {
-    width: 33.33333333%;
-  }
-  .col-sm-3 {
-    width: 25%;
-  }
-  .col-sm-2 {
-    width: 16.66666667%;
-  }
-  .col-sm-1 {
-    width: 8.33333333%;
-  }
-}
-@media screen and (min-width: 841px) {
-  .col-md-12,
-  .col-md-11,
-  .col-md-10,
-  .col-md-9,
-  .col-md-8,
-  .col-md-7,
-  .col-md-6,
-  .col-md-5,
-  .col-md-4,
-  .col-md-3,
-  .col-md-2,
-  .col-md-1 {
-    -webkit-flex: none;
-    -ms-flex: none;
-    flex: none;
-  }
-  .col-md-12 {
-    width: 100%;
-  }
-  .col-md-11 {
-    width: 91.66666667%;
-  }
-  .col-md-10 {
-    width: 83.33333333%;
-  }
-  .col-md-9 {
-    width: 75%;
-  }
-  .col-md-8 {
-    width: 66.66666667%;
-  }
-  .col-md-7 {
-    width: 58.33333333%;
-  }
-  .col-md-6 {
-    width: 50%;
-  }
-  .col-md-5 {
-    width: 41.66666667%;
-  }
-  .col-md-4 {
-    width: 33.33333333%;
-  }
-  .col-md-3 {
-    width: 25%;
-  }
-  .col-md-2 {
-    width: 16.66666667%;
-  }
-  .col-md-1 {
-    width: 8.33333333%;
-  }
-}
-@media screen and (min-width: 841px) {
-  .form-horizontal {
-    padding: 1rem;
-  }
-  .form-horizontal .form-group {
-    display: flex;
-    display: -ms-flexbox;
-    display: -webkit-flex;
-  }
-  .form-horizontal .form-label {
-    margin-bottom: 0;
-    padding: .8rem .4rem;
-  }
-  .form-horizontal .form-checkbox,
-  .form-horizontal .form-radio {
-    margin: .5rem 0;
-  }
-}
-@media screen and (max-width: 480px) {
-  .columns {
-    display: block;
-  }
-  .columns .column {
-    width: 100%;
-  }
-}
-@media screen and (max-width: 480px) {
-  .hide-xs {
-    display: none !important;
-  }
-}
-@media screen and (max-width: 600px) {
-  .hide-sm {
-    display: none !important;
-  }
-}
-@media screen and (max-width: 840px) {
-  .hide-md {
-    display: none !important;
-  }
-}
-@media screen and (max-width: 960px) {
-  .hide-lg {
-    display: none !important;
-  }
-}
-@media screen and (max-width: 1280px) {
-  .hide-xl {
-    display: none !important;
-  }
-}
 .img-responsive {
   display: block;
   height: auto;
@@ -1212,7 +912,7 @@ textarea.form-input {
   display: -webkit-flex;
 }
 .input-group .input-group-addon {
-  background: #efefef;
+  background: #f9f9f9;
   border: .1rem solid #c5c5c5;
   border-radius: .3rem;
   line-height: 1.6rem;
@@ -1248,6 +948,340 @@ textarea.form-input {
 .input-group .input-group-btn:focus {
   z-index: 99;
 }
+.form-inline {
+  display: inline-block;
+  vertical-align: middle;
+  width: auto;
+}
+.container {
+  margin-left: auto;
+  margin-right: auto;
+  overflow-x: hidden;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  width: 100%;
+}
+@media screen and (min-width: 980px) {
+  .grid-960 {
+    width: 98rem;
+  }
+}
+@media screen and (min-width: 500px) {
+  .grid-480 {
+    width: 50rem;
+  }
+}
+.columns {
+  display: flex;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  margin-left: -1rem;
+  margin-right: -1rem;
+}
+.column {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  padding: 1rem;
+}
+.column.col-12,
+.column.col-11,
+.column.col-10,
+.column.col-9,
+.column.col-8,
+.column.col-7,
+.column.col-6,
+.column.col-5,
+.column.col-4,
+.column.col-3,
+.column.col-2,
+.column.col-1 {
+  -webkit-flex: none;
+  -ms-flex: none;
+  flex: none;
+}
+.col-12 {
+  width: 100%;
+}
+.col-11 {
+  width: 91.66666667%;
+}
+.col-10 {
+  width: 83.33333333%;
+}
+.col-9 {
+  width: 75%;
+}
+.col-8 {
+  width: 66.66666667%;
+}
+.col-7 {
+  width: 58.33333333%;
+}
+.col-6 {
+  width: 50%;
+}
+.col-5 {
+  width: 41.66666667%;
+}
+.col-4 {
+  width: 33.33333333%;
+}
+.col-3 {
+  width: 25%;
+}
+.col-2 {
+  width: 16.66666667%;
+}
+.col-1 {
+  width: 8.33333333%;
+}
+@media screen and (min-width: 481px) {
+  .col-xs-12,
+  .col-xs-11,
+  .col-xs-10,
+  .col-xs-9,
+  .col-xs-8,
+  .col-xs-7,
+  .col-xs-6,
+  .col-xs-5,
+  .col-xs-4,
+  .col-xs-3,
+  .col-xs-2,
+  .col-xs-1 {
+    -webkit-flex: none;
+    -ms-flex: none;
+    flex: none;
+  }
+  .col-xs-12 {
+    width: 100%;
+  }
+  .col-xs-11 {
+    width: 91.66666667%;
+  }
+  .col-xs-10 {
+    width: 83.33333333%;
+  }
+  .col-xs-9 {
+    width: 75%;
+  }
+  .col-xs-8 {
+    width: 66.66666667%;
+  }
+  .col-xs-7 {
+    width: 58.33333333%;
+  }
+  .col-xs-6 {
+    width: 50%;
+  }
+  .col-xs-5 {
+    width: 41.66666667%;
+  }
+  .col-xs-4 {
+    width: 33.33333333%;
+  }
+  .col-xs-3 {
+    width: 25%;
+  }
+  .col-xs-2 {
+    width: 16.66666667%;
+  }
+  .col-xs-1 {
+    width: 8.33333333%;
+  }
+}
+@media screen and (min-width: 601px) {
+  .col-sm-12,
+  .col-sm-11,
+  .col-sm-10,
+  .col-sm-9,
+  .col-sm-8,
+  .col-sm-7,
+  .col-sm-6,
+  .col-sm-5,
+  .col-sm-4,
+  .col-sm-3,
+  .col-sm-2,
+  .col-sm-1 {
+    -webkit-flex: none;
+    -ms-flex: none;
+    flex: none;
+  }
+  .col-sm-12 {
+    width: 100%;
+  }
+  .col-sm-11 {
+    width: 91.66666667%;
+  }
+  .col-sm-10 {
+    width: 83.33333333%;
+  }
+  .col-sm-9 {
+    width: 75%;
+  }
+  .col-sm-8 {
+    width: 66.66666667%;
+  }
+  .col-sm-7 {
+    width: 58.33333333%;
+  }
+  .col-sm-6 {
+    width: 50%;
+  }
+  .col-sm-5 {
+    width: 41.66666667%;
+  }
+  .col-sm-4 {
+    width: 33.33333333%;
+  }
+  .col-sm-3 {
+    width: 25%;
+  }
+  .col-sm-2 {
+    width: 16.66666667%;
+  }
+  .col-sm-1 {
+    width: 8.33333333%;
+  }
+}
+@media screen and (min-width: 841px) {
+  .col-md-12,
+  .col-md-11,
+  .col-md-10,
+  .col-md-9,
+  .col-md-8,
+  .col-md-7,
+  .col-md-6,
+  .col-md-5,
+  .col-md-4,
+  .col-md-3,
+  .col-md-2,
+  .col-md-1 {
+    -webkit-flex: none;
+    -ms-flex: none;
+    flex: none;
+  }
+  .col-md-12 {
+    width: 100%;
+  }
+  .col-md-11 {
+    width: 91.66666667%;
+  }
+  .col-md-10 {
+    width: 83.33333333%;
+  }
+  .col-md-9 {
+    width: 75%;
+  }
+  .col-md-8 {
+    width: 66.66666667%;
+  }
+  .col-md-7 {
+    width: 58.33333333%;
+  }
+  .col-md-6 {
+    width: 50%;
+  }
+  .col-md-5 {
+    width: 41.66666667%;
+  }
+  .col-md-4 {
+    width: 33.33333333%;
+  }
+  .col-md-3 {
+    width: 25%;
+  }
+  .col-md-2 {
+    width: 16.66666667%;
+  }
+  .col-md-1 {
+    width: 8.33333333%;
+  }
+}
+@media screen and (min-width: 841px) {
+  .form-horizontal {
+    padding: 1rem;
+  }
+  .form-horizontal .form-group {
+    display: flex;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+  }
+  .form-horizontal .form-label {
+    margin-bottom: 0;
+    padding: .8rem .4rem;
+  }
+  .form-horizontal .form-checkbox,
+  .form-horizontal .form-radio {
+    margin: .5rem 0;
+  }
+}
+@media screen and (max-width: 480px) {
+  .columns {
+    display: block;
+  }
+  .columns .column {
+    width: 100%;
+  }
+}
+@media screen and (max-width: 480px) {
+  .hide-xs {
+    display: none !important;
+  }
+}
+@media screen and (max-width: 600px) {
+  .hide-sm {
+    display: none !important;
+  }
+}
+@media screen and (max-width: 840px) {
+  .hide-md {
+    display: none !important;
+  }
+}
+@media screen and (max-width: 960px) {
+  .hide-lg {
+    display: none !important;
+  }
+}
+@media screen and (max-width: 1280px) {
+  .hide-xl {
+    display: none !important;
+  }
+}
+.navbar {
+  -webkit-align-items: center;
+  align-items: center;
+  display: flex;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  -ms-flex-align: center;
+  -ms-flex-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  padding: 1rem;
+}
+.navbar .navbar-brand {
+  font-size: 2rem;
+  text-decoration: none;
+  vertical-align: middle;
+}
+.empty {
+  background: #f8f8f8;
+  border-radius: .3rem;
+  padding: 2rem;
+  text-align: center;
+}
+.empty .empty-title {
+  font-size: 1.8rem;
+  margin: 1.5rem 0 .5rem 0;
+}
+.empty .empty-meta {
+  color: #888;
+}
+.empty .btn {
+  margin-top: 1.5rem;
+}
 .avatar {
   border-radius: 50%;
   display: inline-block;