update buttons, forms, labels, tables, tooltips and example docs

1 files changed, 49 insertions, 65 deletions

diff --git a/dist/spectre.css b/dist/spectre.css
index b7002db..d197a20 100644
--- a/dist/spectre.css
+++ b/dist/spectre.css
@@ -460,9 +460,9 @@ pre {
   display: block;
   margin-top: 1em;
   margin-bottom: 1em;
-  border-left: .2rem solid #ddd;
+  border-left: 0.2rem solid #5764c6;
   line-height: 1.8rem;
-  background-color: #efefef;
+  background-color: #f9f9f9;
 }
 code {
   padding: 1rem 2rem;
@@ -639,23 +639,22 @@ ol ol {
   max-width: 100%;
   height: auto;
 }
-table {
+.table {
   width: 100%;
 }
-table th,
-table td {
+.table th,
+.table td {
   text-align: left;
   padding: 1.5rem 1rem;
   border-bottom: 0.1rem solid #efefef;
 }
-table th {
+.table th {
   border-color: #c9c9c9;
 }
-table tr.selected {
+.table tr.selected {
   background-color: #f4f4f4;
 }
-.btn,
-button {
+.btn {
   display: inline-block;
   height: 3.2rem;
   padding: .7rem 1.5rem;
@@ -678,27 +677,21 @@ button {
   outline: 0;
 }
 .btn:hover,
-button:hover,
-.btn:focus,
-button:focus {
+.btn:focus {
   color: #fff;
   background-color: #5764c6;
 }
 .btn:active,
-button:active,
-.btn.active,
-button.active {
+.btn.active {
   color: #fff;
   background-color: #4452c0;
 }
-.btn.loading,
-button.loading {
+.btn.loading {
   color: transparent !important;
   position: relative;
   pointer-events: none;
 }
-.btn.loading::after,
-button.loading::after {
+.btn.loading::after {
   border: 2px solid #5764c6;
   border-right-color: transparent;
   border-top-color: transparent;
@@ -716,79 +709,64 @@ button.loading::after {
           animation: loading 500ms infinite linear;
 }
 .btn[disabled],
-button[disabled] {
+.btn .disabled {
   opacity: .5;
   cursor: default;
 }
-.btn.btn-primary,
-button.btn-primary {
+.btn.btn-primary {
   color: #fff;
   border-color: #4452c0;
   background-color: #5764c6;
 }
 .btn.btn-primary:hover,
-button.btn-primary:hover,
-.btn.btn-primary:focus,
-button.btn-primary:focus {
+.btn.btn-primary:focus {
   color: #fff;
   border-color: #3b49af;
   background-color: #4452c0;
 }
 .btn.btn-primary:active,
-button.btn-primary:active,
-.btn.btn-primary.active,
-button.btn-primary.active {
+.btn.btn-primary.active {
   color: #fff;
   border-color: #3b49af;
   background-color: #3b49af;
 }
-.btn.btn-primary.loading::after,
-button.btn-primary.loading::after {
+.btn.btn-primary.loading::after {
   border-color: #fff;
   border-right-color: transparent;
   border-top-color: transparent;
 }
-.btn.btn-link,
-button.btn-link {
+.btn.btn-link {
   color: #5764c6;
   border-color: transparent;
   background-color: transparent;
 }
 .btn.btn-link:hover,
-button.btn-link:hover,
-.btn.btn-link:focus,
-button.btn-link:focus {
+.btn.btn-link:focus {
   color: #35419c;
 }
 .btn.btn-link:active,
-button.btn-link:active,
-.btn.btn-link.active,
-button.btn-link.active {
+.btn.btn-link.active {
   color: #283176;
 }
-.btn.btn-sm,
-button.btn-sm {
+.btn.btn-sm {
   height: 2.4rem;
   border-radius: 2px;
   font-size: 1.2rem;
   line-height: 1.4rem;
   padding: .4rem 1rem;
 }
-.btn.btn-lg,
-button.btn-lg {
+.btn.btn-lg {
   height: 4.2rem;
   border-radius: 4px;
   font-size: 1.8rem;
   line-height: 2rem;
   padding: 1rem 1.8rem;
 }
-.btn.btn-block,
-button.btn-block {
+.btn.btn-block {
   width: 100%;
   display: block;
 }
-.btn.btn-clear,
-button.btn-clear {
+.btn.btn-clear {
   width: 1.4rem;
   height: 1.4rem;
   padding: 0;
@@ -801,14 +779,11 @@ button.btn-clear {
   -webkit-transform: rotate(-45deg);
           transform: rotate(-45deg);
 }
-.btn.btn-clear:hover,
-button.btn-clear:hover {
+.btn.btn-clear:hover {
   opacity: .75;
 }
 .btn.btn-clear::before,
-button.btn-clear::before,
-.btn.btn-clear::after,
-button.btn-clear::after {
+.btn.btn-clear::after {
   content: "";
   display: block;
   position: absolute;
@@ -816,15 +791,13 @@ button.btn-clear::after {
   left: 50%;
   background-color: #333;
 }
-.btn.btn-clear::before,
-button.btn-clear::before {
+.btn.btn-clear::before {
   width: 1rem;
   height: .2rem;
   margin-left: -0.5rem;
   margin-top: -0.1rem;
 }
-.btn.btn-clear::after,
-button.btn-clear::after {
+.btn.btn-clear::after {
   width: .2rem;
   height: 1rem;
   margin-left: -0.1rem;
@@ -1093,6 +1066,13 @@ textarea.form-input {
   border-radius: .3rem;
   background-color: #efefef;
 }
+.input-group .input-group-addon,
+.input-group .input-group-btn {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1 0 auto;
+      -ms-flex: 1 0 auto;
+          flex: 1 0 auto;
+}
 .input-group .form-input:first-child:not(:last-child),
 .input-group .input-group-addon:first-child:not(:last-child),
 .input-group .input-group-btn:first-child:not(:last-child) {
@@ -1328,15 +1308,15 @@ textarea.form-input {
 }
 .label {
   display: inline-block;
-  padding: .3rem .5rem;
-  font-size: 80%;
-  line-height: 1;
-  color: #666;
+  padding: .3rem .4rem;
+  font-size: 90%;
+  line-height: 1em;
+  color: #737373;
   background-color: #efefef;
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
-  margin: -0.3rem 0.5rem 0 0.5rem;
+  margin: -0.3rem 0.1em 0 0.1em;
   border-radius: .2rem;
 }
 .label.label-primary {
@@ -1362,7 +1342,7 @@ textarea.form-input {
 .label.label-lg {
   font-size: 100%;
   line-height: 1.2;
-  padding: .3rem .8rem;
+  padding: .3rem .5rem;
 }
 .menu {
   display: block;
@@ -1602,7 +1582,8 @@ textarea.form-input {
   -webkit-transition: all .216s ease;
   transition: all .216s ease;
 }
-.tooltip:hover::after {
+.tooltip:hover::after,
+.tooltip:focus::after {
   opacity: 1;
   -webkit-transform: translate(-50%, -0.5rem);
           transform: translate(-50%, -0.5rem);
@@ -1613,7 +1594,8 @@ textarea.form-input {
   -webkit-transform: translate(0, 50%);
           transform: translate(0, 50%);
 }
-.tooltip.tooltip-right:hover::after {
+.tooltip.tooltip-right:hover::after,
+.tooltip.tooltip-right:focus::after {
   -webkit-transform: translate(0.5rem, 50%);
           transform: translate(0.5rem, 50%);
 }
@@ -1623,7 +1605,8 @@ textarea.form-input {
   -webkit-transform: translate(-50%, 0);
           transform: translate(-50%, 0);
 }
-.tooltip.tooltip-bottom:hover::after {
+.tooltip.tooltip-bottom:hover::after,
+.tooltip.tooltip-bottom:focus::after {
   -webkit-transform: translate(-50%, 0.5rem);
           transform: translate(-50%, 0.5rem);
 }
@@ -1634,7 +1617,8 @@ textarea.form-input {
   -webkit-transform: translate(0, 50%);
           transform: translate(0, 50%);
 }
-.tooltip.tooltip-left:hover::after {
+.tooltip.tooltip-left:hover::after,
+.tooltip.tooltip-left:focus::after {
   -webkit-transform: translate(-0.5rem, 50%);
           transform: translate(-0.5rem, 50%);
 }