Update: code cleanup and labels section moved

1 files changed, 392 insertions, 392 deletions

diff --git a/dist/spectre.css b/dist/spectre.css
index ca7003f..436d54d 100644
--- a/dist/spectre.css
+++ b/dist/spectre.css
@@ -522,37 +522,6 @@ pre code {
   margin-bottom: 0;
   margin-top: 0;
 }
-.img-responsive {
-  display: block;
-  height: auto;
-  max-width: 100%;
-}
-.video-responsive {
-  height: 0;
-  overflow: hidden;
-  padding-bottom: 56.25%;
-  /* Default 16:9, you can calculate this value by dividing 9 by 16 */
-  padding-top: 3rem;
-  position: relative;
-}
-.video-responsive iframe,
-.video-responsive object,
-.video-responsive embed {
-  height: 100%;
-  left: 0;
-  position: absolute;
-  top: 0;
-  width: 100%;
-}
-.video-responsive video {
-  height: auto;
-  max-width: 100%;
-  width: 100%;
-}
-.video-responsive-4-3 {
-  padding-bottom: 75%;
-  /* 4:3 */
-}
 .table {
   border-collapse: collapse;
   border-spacing: 0;
@@ -1030,6 +999,60 @@ textarea.form-input {
 .input-group .input-group-btn:focus {
   z-index: 99;
 }
+.label {
+  background: #efefef;
+  border-radius: .2rem;
+  color: #666;
+  display: inline;
+  font-size: 1em;
+  padding: .1em .3em;
+  vertical-align: baseline;
+  white-space: nowrap;
+}
+.label.label-primary {
+  background: #5764c6;
+  border-color: #4f5dc3;
+  color: #fff;
+}
+.label.label-primary a {
+  color: #fff;
+}
+.label.label-primary a:hover,
+.label.label-primary a:focus,
+.label.label-primary a:active {
+  opacity: .75;
+}
+.img-responsive {
+  display: block;
+  height: auto;
+  max-width: 100%;
+}
+.video-responsive {
+  height: 0;
+  overflow: hidden;
+  padding-bottom: 56.25%;
+  /* Default 16:9, you can calculate this value by dividing 9 by 16 */
+  padding-top: 3rem;
+  position: relative;
+}
+.video-responsive iframe,
+.video-responsive object,
+.video-responsive embed {
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.video-responsive video {
+  height: auto;
+  max-width: 100%;
+  width: 100%;
+}
+.video-responsive-4-3 {
+  padding-bottom: 75%;
+  /* 4:3 */
+}
 .container {
   margin-left: auto;
   margin-right: auto;
@@ -1457,45 +1480,93 @@ textarea.form-input {
   transform: translate(-50%, -50%);
   z-index: 0;
 }
-@-webkit-keyframes loading {
-  0% {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
+.chip {
+  -webkit-align-content: space-around;
+  align-content: space-around;
+  -webkit-align-items: center;
+  align-items: center;
+  border: .1rem solid transparent;
+  border-radius: .3rem;
+  display: flex;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  -ms-flex-align: center;
+  -ms-flex-line-pack: distribute;
+  list-style: none;
+  margin: 0;
+  padding: .5rem 0;
 }
-@keyframes loading {
-  0% {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
+.chip .chip-icon {
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
 }
-@-webkit-keyframes slide-down {
-  0% {
-    margin-top: -3rem;
-    opacity: 0;
-  }
-  100% {
-    margin-top: 0;
-    opacity: 1;
-  }
+.chip .chip-content {
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  overflow: hidden;
+  padding: 0 1rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-@keyframes slide-down {
-  0% {
-    margin-top: -3rem;
-    opacity: 0;
-  }
-  100% {
-    margin-top: 0;
-    opacity: 1;
-  }
+.chip .chip-action {
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+}
+.chip .chip-title {
+  font-size: 1.4rem;
+}
+.chip .chip-meta {
+  color: #b3b3b3;
+  font-size: 1.2rem;
+}
+.chip-sm {
+  -webkit-align-items: center;
+  align-items: center;
+  background: #eff1fa;
+  border-radius: .3rem;
+  color: #666;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  display: -webkit-inline-flex;
+  -ms-flex-align: center;
+  font-size: 1.2rem;
+  height: 2.4rem;
+  max-width: 100%;
+  padding: .3rem .6rem;
+  text-decoration: none;
+  vertical-align: middle;
+}
+.chip-sm:hover,
+.chip-sm:focus {
+  background: #e8eaf7;
+}
+.chip-sm .btn-clear {
+  margin-top: -.2rem;
+}
+.chip-sm .btn-clear::before {
+  color: #3b49af;
+  font-size: 1.6rem;
+}
+.chip-sm.selected {
+  background: #5764c6;
+  color: #fff;
+}
+.chip-sm.selected .btn-clear::before {
+  color: #eff1fa;
+}
+.chip-sm .chip-name {
+  margin-left: .4rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.chip-sm .avatar {
+  font-size: .8rem;
+  height: 1.6rem;
+  width: 1.6rem;
 }
 .form-autocomplete {
   position: relative;
@@ -1555,6 +1626,83 @@ textarea.form-input {
 .form-autocomplete .form-autocomplete-item.active {
   background: #eff1fa;
 }
+.tooltip {
+  position: relative;
+}
+.tooltip::after {
+  background: rgba(51, 51, 51, .9);
+  border-radius: .3rem;
+  bottom: 100%;
+  color: #fff;
+  content: attr(data-tooltip);
+  display: block;
+  font-size: 1.2rem;
+  left: 50%;
+  line-height: 1.6rem;
+  max-width: 32rem;
+  opacity: 0;
+  overflow: hidden;
+  padding: .6rem 1rem;
+  pointer-events: none;
+  position: absolute;
+  text-overflow: ellipsis;
+  -webkit-transform: translate(-50%, 0);
+  -ms-transform: translate(-50%, 0);
+  transform: translate(-50%, 0);
+  transition: all .216s ease;
+  z-index: 99;
+}
+.tooltip:focus::after,
+.tooltip:hover::after {
+  opacity: 1;
+  -webkit-transform: translate(-50%, -.5rem);
+  -ms-transform: translate(-50%, -.5rem);
+  transform: translate(-50%, -.5rem);
+}
+.tooltip[disabled],
+.tooltip.disabled {
+  pointer-events: auto;
+}
+.tooltip.tooltip-right::after {
+  bottom: 50%;
+  left: 100%;
+  -webkit-transform: translate(0, 50%);
+  -ms-transform: translate(0, 50%);
+  transform: translate(0, 50%);
+}
+.tooltip.tooltip-right:focus::after,
+.tooltip.tooltip-right:hover::after {
+  -webkit-transform: translate(.5rem, 50%);
+  -ms-transform: translate(.5rem, 50%);
+  transform: translate(.5rem, 50%);
+}
+.tooltip.tooltip-bottom::after {
+  bottom: auto;
+  top: 100%;
+  -webkit-transform: translate(-50%, 0);
+  -ms-transform: translate(-50%, 0);
+  transform: translate(-50%, 0);
+}
+.tooltip.tooltip-bottom:focus::after,
+.tooltip.tooltip-bottom:hover::after {
+  -webkit-transform: translate(-50%, .5rem);
+  -ms-transform: translate(-50%, .5rem);
+  transform: translate(-50%, .5rem);
+}
+.tooltip.tooltip-left::after {
+  bottom: 50%;
+  left: auto;
+  right: 100%;
+  -webkit-transform: translate(0, 50%);
+  -ms-transform: translate(0, 50%);
+  transform: translate(0, 50%);
+}
+.tooltip.tooltip-left:focus::after,
+.tooltip.tooltip-left:hover::after {
+  -webkit-transform: translate(-.5rem, 50%);
+  -ms-transform: translate(-.5rem, 50%);
+  transform: translate(-.5rem, 50%);
+}
 .badge {
   position: relative;
 }
@@ -1577,163 +1725,59 @@ textarea.form-input {
   transform: translate(-.2rem, -.8rem);
   white-space: nowrap;
 }
-.card {
-  background: #fff;
-  border: .1rem solid #efefef;
-  border-radius: .3rem;
-  display: block;
-  margin: 0;
-  padding: 0;
-  text-align: left;
-  z-index: 999;
-}
-.card .card-header,
-.card .card-body,
-.card .card-footer {
-  padding: 1.5rem 1.5rem 0 1.5rem;
-}
-.card .card-header:last-child,
-.card .card-body:last-child,
-.card .card-footer:last-child {
-  padding-bottom: 1.5rem;
-}
-.card .card-image {
-  padding-top: 1.5rem;
-}
-.card .card-image:first-child {
-  padding-top: 0;
-}
-.card .card-image:first-child img {
-  border-top-left-radius: .3rem;
-  border-top-right-radius: .3rem;
-}
-.card .card-image:last-child img {
-  border-bottom-left-radius: .3rem;
-  border-bottom-right-radius: .3rem;
-}
-.card .card-title {
-  font-size: 1.4em;
-  line-height: 1;
-  margin-bottom: .5rem;
-  margin-top: 0;
-}
-.card .card-meta {
-  color: #b3b3b3;
-  font-size: 1em;
-  margin-bottom: 0;
-  margin-top: 0;
-}
-.chip {
-  -webkit-align-content: space-around;
-  align-content: space-around;
-  -webkit-align-items: center;
-  align-items: center;
-  border: .1rem solid transparent;
-  border-radius: .3rem;
-  display: flex;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  -ms-flex-align: center;
-  -ms-flex-line-pack: distribute;
-  list-style: none;
-  margin: 0;
-  padding: .5rem 0;
-}
-.chip .chip-icon {
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-}
-.chip .chip-content {
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  overflow: hidden;
-  padding: 0 1rem;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.chip .chip-action {
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-}
-.chip .chip-title {
-  font-size: 1.4rem;
-}
-.chip .chip-meta {
-  color: #b3b3b3;
-  font-size: 1.2rem;
-}
-.chip-sm {
-  -webkit-align-items: center;
-  align-items: center;
-  background: #eff1fa;
+.toast {
+  background: #efefef;
+  border: .1rem solid #eaeaea;
   border-radius: .3rem;
   color: #666;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  display: -webkit-inline-flex;
-  -ms-flex-align: center;
-  font-size: 1.2rem;
-  height: 2.4rem;
-  max-width: 100%;
-  padding: .3rem .6rem;
-  text-decoration: none;
-  vertical-align: middle;
-}
-.chip-sm:hover,
-.chip-sm:focus {
-  background: #e8eaf7;
-}
-.chip-sm .btn-clear {
-  margin-top: -.2rem;
-}
-.chip-sm .btn-clear::before {
-  color: #3b49af;
-  font-size: 1.6rem;
+  display: block;
+  padding: 1.4rem;
+  width: 100%;
 }
-.chip-sm.selected {
+.toast.toast-primary {
   background: #5764c6;
+  border-color: #4f5dc3;
   color: #fff;
 }
-.chip-sm.selected .btn-clear::before {
-  color: #eff1fa;
+.toast.toast-primary a {
+  color: #fff;
 }
-.chip-sm .chip-name {
-  margin-left: .4rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.toast.toast-primary a:hover,
+.toast.toast-primary a:focus,
+.toast.toast-primary a:active {
+  opacity: .75;
 }
-.chip-sm .avatar {
-  font-size: .8rem;
-  height: 1.6rem;
-  width: 1.6rem;
+.toast.toast-success {
+  background: #32b643;
+  border-color: #30ae40;
+  color: #fff;
 }
-.label {
-  background: #efefef;
-  border-radius: .2rem;
-  color: #666;
-  display: inline;
-  font-size: 1em;
-  padding: .1em .3em;
-  vertical-align: baseline;
-  white-space: nowrap;
+.toast.toast-success a {
+  color: #fff;
 }
-.label.label-primary {
-  background: #5764c6;
-  border-color: #4f5dc3;
+.toast.toast-success a:hover,
+.toast.toast-success a:focus,
+.toast.toast-success a:active {
+  opacity: .75;
+}
+.toast.toast-danger {
+  background: #e85600;
+  border-color: #de5200;
   color: #fff;
 }
-.label.label-primary a {
+.toast.toast-danger a {
   color: #fff;
 }
-.label.label-primary a:hover,
-.label.label-primary a:focus,
-.label.label-primary a:active {
+.toast.toast-danger a:hover,
+.toast.toast-danger a:focus,
+.toast.toast-danger a:active {
   opacity: .75;
 }
+.toast.toast-primary .btn-clear,
+.toast.toast-success .btn-clear,
+.toast.toast-danger .btn-clear {
+  color: #fff;
+}
 .menu {
   background: #fff;
   border-radius: .3rem;
@@ -1800,82 +1844,6 @@ textarea.form-input {
   transform: translateY(-1rem);
   width: 100%;
 }
-.modal {
-  -webkit-align-items: center;
-  align-items: center;
-  bottom: 0;
-  display: none;
-  -ms-flex-align: center;
-  -ms-flex-pack: center;
-  -ms-grid-row-align: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  left: 0;
-  opacity: 0;
-  overflow: hidden;
-  position: fixed;
-  right: 0;
-  top: 0;
-}
-.modal.active {
-  display: flex;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  opacity: 1;
-  z-index: 1988;
-}
-.modal.active .modal-overlay {
-  background: rgba(0, 0, 0, .75);
-  bottom: 0;
-  display: block;
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-}
-.modal.active .modal-container {
-  -webkit-animation: slide-down .216s;
-  animation: slide-down .216s;
-}
-.modal-container {
-  -webkit-animation: slide-up .216s;
-  animation: slide-up .216s;
-  background: #fff;
-  border-radius: .3rem;
-  box-shadow: 0 .1rem .4rem rgba(0, 0, 0, .3);
-  display: block;
-  margin: 0 auto;
-  padding: 0;
-  text-align: left;
-  z-index: 1988;
-}
-.modal-container .modal-header {
-  padding: 1.5rem;
-}
-.modal-container .modal-header .modal-title {
-  font-size: 1.5rem;
-  margin: 0;
-}
-.modal-container .modal-body {
-  max-height: 50vh;
-  overflow-y: auto;
-  padding: 1.5rem;
-  position: relative;
-}
-.modal-container .modal-footer {
-  padding: 1.5rem;
-  text-align: right;
-}
-@media screen and (min-width: 640px) {
-  .modal-container {
-    width: 64rem;
-  }
-}
-@media screen and (min-width: 320px) {
-  .modal-sm .modal-container {
-    width: 32rem;
-  }
-}
 .breadcrumb,
 .tab,
 .pagination {
@@ -1967,135 +1935,167 @@ textarea.form-input {
   background: #5764c6;
   color: #fff;
 }
-.toast {
-  background: #efefef;
-  border: .1rem solid #eaeaea;
-  border-radius: .3rem;
-  color: #666;
-  display: block;
-  padding: 1.4rem;
-  width: 100%;
-}
-.toast.toast-primary {
-  background: #5764c6;
-  border-color: #4f5dc3;
-  color: #fff;
+.modal {
+  -webkit-align-items: center;
+  align-items: center;
+  bottom: 0;
+  display: none;
+  -ms-flex-align: center;
+  -ms-flex-pack: center;
+  -ms-grid-row-align: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  left: 0;
+  opacity: 0;
+  overflow: hidden;
+  position: fixed;
+  right: 0;
+  top: 0;
 }
-.toast.toast-primary a {
-  color: #fff;
+.modal.active {
+  display: flex;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  opacity: 1;
+  z-index: 1988;
 }
-.toast.toast-primary a:hover,
-.toast.toast-primary a:focus,
-.toast.toast-primary a:active {
-  opacity: .75;
+.modal.active .modal-overlay {
+  background: rgba(0, 0, 0, .75);
+  bottom: 0;
+  display: block;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
 }
-.toast.toast-success {
-  background: #32b643;
-  border-color: #30ae40;
-  color: #fff;
+.modal.active .modal-container {
+  -webkit-animation: slide-down .216s;
+  animation: slide-down .216s;
 }
-.toast.toast-success a {
-  color: #fff;
+.modal-container {
+  -webkit-animation: slide-up .216s;
+  animation: slide-up .216s;
+  background: #fff;
+  border-radius: .3rem;
+  box-shadow: 0 .1rem .4rem rgba(0, 0, 0, .3);
+  display: block;
+  margin: 0 auto;
+  padding: 0;
+  text-align: left;
+  z-index: 1988;
 }
-.toast.toast-success a:hover,
-.toast.toast-success a:focus,
-.toast.toast-success a:active {
-  opacity: .75;
+.modal-container .modal-header {
+  padding: 1.5rem;
 }
-.toast.toast-danger {
-  background: #e85600;
-  border-color: #de5200;
-  color: #fff;
+.modal-container .modal-header .modal-title {
+  font-size: 1.5rem;
+  margin: 0;
 }
-.toast.toast-danger a {
-  color: #fff;
+.modal-container .modal-body {
+  max-height: 50vh;
+  overflow-y: auto;
+  padding: 1.5rem;
+  position: relative;
 }
-.toast.toast-danger a:hover,
-.toast.toast-danger a:focus,
-.toast.toast-danger a:active {
-  opacity: .75;
+.modal-container .modal-footer {
+  padding: 1.5rem;
+  text-align: right;
 }
-.toast.toast-primary .btn-clear,
-.toast.toast-success .btn-clear,
-.toast.toast-danger .btn-clear {
-  color: #fff;
+@media screen and (min-width: 640px) {
+  .modal-container {
+    width: 64rem;
+  }
 }
-.tooltip {
-  position: relative;
+@media screen and (min-width: 320px) {
+  .modal-sm .modal-container {
+    width: 32rem;
+  }
 }
-.tooltip::after {
-  background: rgba(51, 51, 51, .9);
+.card {
+  background: #fff;
+  border: .1rem solid #efefef;
   border-radius: .3rem;
-  bottom: 100%;
-  color: #fff;
-  content: attr(data-tooltip);
   display: block;
-  font-size: 1.2rem;
-  left: 50%;
-  line-height: 1.6rem;
-  max-width: 32rem;
-  opacity: 0;
-  overflow: hidden;
-  padding: .6rem 1rem;
-  pointer-events: none;
-  position: absolute;
-  text-overflow: ellipsis;
-  -webkit-transform: translate(-50%, 0);
-  -ms-transform: translate(-50%, 0);
-  transform: translate(-50%, 0);
-  transition: all .216s ease;
-  z-index: 99;
+  margin: 0;
+  padding: 0;
+  text-align: left;
+  z-index: 999;
 }
-.tooltip:focus::after,
-.tooltip:hover::after {
-  opacity: 1;
-  -webkit-transform: translate(-50%, -.5rem);
-  -ms-transform: translate(-50%, -.5rem);
-  transform: translate(-50%, -.5rem);
+.card .card-header,
+.card .card-body,
+.card .card-footer {
+  padding: 1.5rem 1.5rem 0 1.5rem;
 }
-.tooltip[disabled],
-.tooltip.disabled {
-  pointer-events: auto;
+.card .card-header:last-child,
+.card .card-body:last-child,
+.card .card-footer:last-child {
+  padding-bottom: 1.5rem;
 }
-.tooltip.tooltip-right::after {
-  bottom: 50%;
-  left: 100%;
-  -webkit-transform: translate(0, 50%);
-  -ms-transform: translate(0, 50%);
-  transform: translate(0, 50%);
+.card .card-image {
+  padding-top: 1.5rem;
 }
-.tooltip.tooltip-right:focus::after,
-.tooltip.tooltip-right:hover::after {
-  -webkit-transform: translate(.5rem, 50%);
-  -ms-transform: translate(.5rem, 50%);
-  transform: translate(.5rem, 50%);
+.card .card-image:first-child {
+  padding-top: 0;
 }
-.tooltip.tooltip-bottom::after {
-  bottom: auto;
-  top: 100%;
-  -webkit-transform: translate(-50%, 0);
-  -ms-transform: translate(-50%, 0);
-  transform: translate(-50%, 0);
+.card .card-image:first-child img {
+  border-top-left-radius: .3rem;
+  border-top-right-radius: .3rem;
 }
-.tooltip.tooltip-bottom:focus::after,
-.tooltip.tooltip-bottom:hover::after {
-  -webkit-transform: translate(-50%, .5rem);
-  -ms-transform: translate(-50%, .5rem);
-  transform: translate(-50%, .5rem);
+.card .card-image:last-child img {
+  border-bottom-left-radius: .3rem;
+  border-bottom-right-radius: .3rem;
 }
-.tooltip.tooltip-left::after {
-  bottom: 50%;
-  left: auto;
-  right: 100%;
-  -webkit-transform: translate(0, 50%);
-  -ms-transform: translate(0, 50%);
-  transform: translate(0, 50%);
+.card .card-title {
+  font-size: 1.4em;
+  line-height: 1;
+  margin-bottom: .5rem;
+  margin-top: 0;
 }
-.tooltip.tooltip-left:focus::after,
-.tooltip.tooltip-left:hover::after {
-  -webkit-transform: translate(-.5rem, 50%);
-  -ms-transform: translate(-.5rem, 50%);
-  transform: translate(-.5rem, 50%);
+.card .card-meta {
+  color: #b3b3b3;
+  font-size: 1em;
+  margin-bottom: 0;
+  margin-top: 0;
+}
+@-webkit-keyframes loading {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes loading {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-webkit-keyframes slide-down {
+  0% {
+    margin-top: -3rem;
+    opacity: 0;
+  }
+  100% {
+    margin-top: 0;
+    opacity: 1;
+  }
+}
+@keyframes slide-down {
+  0% {
+    margin-top: -3rem;
+    opacity: 0;
+  }
+  100% {
+    margin-top: 0;
+    opacity: 1;
+  }
 }
 .clearfix::after,
 .container::after {