IMPORTANT: Increase control font sizes #271

1 files changed, 82 insertions, 80 deletions

diff --git a/docs/dist/spectre.css b/docs/dist/spectre.css
index a8c5343..3023e1d 100644
--- a/docs/dist/spectre.css
+++ b/docs/dist/spectre.css
@@ -281,7 +281,7 @@ template {
 html {
   box-sizing: border-box;
   font-size: 20px;
-  line-height: 1.428571429;
+  line-height: 1.5;
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -289,7 +289,7 @@ body {
   background: #fff;
   color: #50596c;
   font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
-  font-size: .7rem;
+  font-size: .8rem;
   overflow-x: hidden;
   text-rendering: optimizeLegibility;
 }
@@ -321,7 +321,7 @@ h6 {
   color: inherit;
   font-weight: 500;
   line-height: 1.2;
-  margin-bottom: .25em;
+  margin-bottom: .5em;
   margin-top: 0;
 }
 
@@ -366,7 +366,7 @@ h6,
 
 p {
   line-height: 1.2rem;
-  margin: 0 0 .8rem;
+  margin: 0 0 1rem;
 }
 
 a,
@@ -386,9 +386,9 @@ kbd {
   background: #454d5d;
   border-radius: .1rem;
   color: #fff;
-  font-size: .65rem; 
-  line-height: 1;
-  padding: .15rem;
+  font-size: .7rem; 
+  line-height: 1.2;
+  padding: .1rem .15rem;
 }
 
 mark {
@@ -539,11 +539,11 @@ dl dd {
   color: #5755d9;
   cursor: pointer;
   display: inline-block;
-  font-size: .7rem;
-  height: 1.6rem;
+  font-size: .8rem;
+  height: 1.8rem;
   line-height: 1rem;
   outline: none;
-  padding: .25rem .4rem;
+  padding: .35rem .4rem;
   text-align: center;
   text-decoration: none;
   transition: all .2s ease;
@@ -627,13 +627,13 @@ dl dd {
 }
 
 .btn.btn-sm {
-  font-size: .6rem;
-  height: 1.2rem;
-  padding: .05rem .3rem;
+  font-size: .7rem;
+  height: 1.4rem;
+  padding: .15rem .3rem;
 }
 
 .btn.btn-lg {
-  font-size: .8rem;
+  font-size: .9rem;
   height: 2rem;
   padding: .45rem .6rem;
 }
@@ -646,11 +646,11 @@ dl dd {
 .btn.btn-action {
   padding-left: 0;
   padding-right: 0; 
-  width: 1.6rem;
+  width: 1.8rem;
 }
 
 .btn.btn-action.btn-sm {
-  width: 1.2rem;
+  width: 1.4rem;
 }
 
 .btn.btn-action.btn-lg {
@@ -733,18 +733,19 @@ fieldset {
 }
 
 legend {
-  font-size: .8rem;
+  font-size: .9rem;
   font-weight: 500;
   margin-bottom: .8rem;
 }
 
 .form-label {
   display: block;
-  padding: .3rem 0;
+  line-height: 1rem;
+  padding: .4rem 0;
 }
 
 .form-label.label-sm {
-  padding: .1rem 0;
+  padding: .2rem 0;
 }
 
 .form-label.label-lg {
@@ -761,12 +762,12 @@ legend {
   border-radius: .1rem;
   color: #50596c;
   display: block;
-  font-size: .7rem;
-  height: 1.6rem;
+  font-size: .8rem;
+  height: 1.8rem;
   line-height: 1rem;
   max-width: 100%;
   outline: none;
-  padding: .25rem .4rem;
+  padding: .35rem .4rem;
   position: relative;
   transition: all .2s ease;
   width: 100%;
@@ -790,13 +791,13 @@ legend {
 }
 
 .form-input.input-sm {
-  font-size: .6rem;
-  height: 1.2rem;
-  padding: .05rem .3rem;
+  font-size: .7rem;
+  height: 1.4rem;
+  padding: .15rem .3rem;
 }
 
 .form-input.input-lg {
-  font-size: .8rem;
+  font-size: .9rem;
   height: 2rem;
   padding: .45rem .6rem;
 }
@@ -817,7 +818,7 @@ textarea.form-input {
 
 .form-input-hint {
   color: #acb3c2;
-  font-size: .6rem;
+  font-size: .7rem;
   margin-top: .2rem;
 }
 
@@ -838,11 +839,11 @@ textarea.form-input {
   border: .05rem solid #caced7;
   border-radius: .1rem;
   color: inherit;
-  font-size: .7rem;
-  height: 1.6rem;
+  font-size: .8rem;
+  height: 1.8rem;
   line-height: 1rem;
   outline: none;
-  padding: .25rem .4rem;
+  padding: .35rem .4rem;
   vertical-align: middle;
   width: 100%;
 }
@@ -859,7 +860,7 @@ textarea.form-input {
 
 .form-select:not([multiple]):not([size]) {
   background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center/.4rem .5rem;
-  padding-right: 1.1rem;
+  padding-right: 1.2rem;
 }
 
 .form-select:focus {
@@ -872,15 +873,15 @@ textarea.form-input {
 }
 
 .form-select.select-sm {
-  font-size: .6rem;
-  height: 1.2rem;
-  padding: .05rem 1rem .05rem .3rem;
+  font-size: .7rem;
+  height: 1.4rem;
+  padding: .15rem 1.1rem .15rem .3rem;
 }
 
 .form-select.select-lg {
-  font-size: .8rem;
+  font-size: .9rem;
   height: 2rem;
-  padding: .45rem 1.3rem .45rem .6rem;
+  padding: .45rem 1.4rem .45rem .6rem;
 }
 
 .has-icon-left,
@@ -890,12 +891,12 @@ textarea.form-input {
 
 .has-icon-left .form-icon,
 .has-icon-right .form-icon {
-  height: .7rem;
-  margin: 0 .25rem;
+  height: .8rem;
+  margin: 0 .35rem;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
-  width: .7rem;
+  width: .8rem;
 }
 
 .has-icon-left .form-icon {
@@ -903,7 +904,7 @@ textarea.form-input {
 }
 
 .has-icon-left .form-input {
-  padding-left: 1.2rem;
+  padding-left: 1.5rem;
 }
 
 .has-icon-right .form-icon {
@@ -911,7 +912,7 @@ textarea.form-input {
 }
 
 .has-icon-right .form-input {
-  padding-right: 1.2rem;
+  padding-right: 1.5rem;
 }
 
 .form-checkbox,
@@ -919,7 +920,7 @@ textarea.form-input {
 .form-switch {
   display: inline-block;
   line-height: 1rem;
-  padding: .1rem 1.1rem;
+  padding: .2rem 1.2rem;
   position: relative;
 }
 
@@ -961,10 +962,10 @@ textarea.form-input {
 .form-checkbox .form-icon,
 .form-radio .form-icon {
   background: #fff;
-  height: .7rem;
+  height: .8rem;
   left: 0;
-  top: .25rem;
-  width: .7rem;
+  top: .3rem;
+  width: .8rem;
 }
 
 .form-checkbox input:active + .form-icon,
@@ -1010,20 +1011,20 @@ textarea.form-input {
 }
 
 .form-radio .form-icon {
-  border-radius: .35rem;
+  border-radius: 50%;
 }
 
 .form-radio input:checked + .form-icon::before {
   background: #fff;
-  border-radius: .1rem;
+  border-radius: 50%;
   content: "";
-  height: 4px;
+  height: 6px;
   left: 50%;
-  margin-left: -2px;
-  margin-top: -2px;
+  margin-left: -3px;
+  margin-top: -3px;
   position: absolute;
   top: 50%;
-  width: 4px;
+  width: 6px;
 }
 
 .form-switch {
@@ -1036,7 +1037,7 @@ textarea.form-input {
   border-radius: .45rem;
   height: .9rem;
   left: 0;
-  top: .15rem;
+  top: .25rem;
   width: 1.6rem;
 }
 
@@ -1071,16 +1072,16 @@ textarea.form-input {
   border: .05rem solid #caced7;
   border-radius: .1rem;
   line-height: 1rem;
-  padding: .25rem .4rem;
+  padding: .35rem .4rem;
 }
 
 .input-group .input-group-addon.addon-sm {
-  font-size: .6rem;
-  padding: .05rem .3rem;
+  font-size: .7rem;
+  padding: .15rem .3rem;
 }
 
 .input-group .input-group-addon.addon-lg {
-  font-size: .8rem;
+  font-size: .9rem;
   padding: .45rem .6rem;
 }
 
@@ -1249,8 +1250,8 @@ input.disabled + .form-icon {
   border-radius: .1rem;
   color: #5b657a;
   display: inline-block; 
-  line-height: 1;
-  padding: .15rem;
+  line-height: 1.2;
+  padding: .1rem .15rem;
 }
 
 .label.label-rounded {
@@ -1288,9 +1289,9 @@ code {
   background: #fdf4f4;
   border-radius: .1rem;
   color: #e06870;
-  font-size: .65rem; 
-  line-height: 1;
-  padding: .15rem;
+  font-size: .7rem; 
+  line-height: 1.2;
+  padding: .1rem .15rem;
 }
 
 .code {
@@ -1303,7 +1304,7 @@ code {
 .code::before {
   color: #acb3c2;
   content: attr(data-lang);
-  font-size: .6rem;
+  font-size: .7rem;
   position: absolute;
   right: .4rem;
   top: .1rem;
@@ -1382,7 +1383,7 @@ video.video-responsive::before {
 }
 
 .figure .figure-caption {
-  color: #727e96;
+  color: #667189;
   margin-top: .4rem;
 }
 
@@ -1874,7 +1875,7 @@ video.video-responsive::before {
 }
 
 .navbar .navbar-brand {
-  font-size: .8rem;
+  font-size: .9rem;
   font-weight: 500;
   text-decoration: none;
 }
@@ -2057,11 +2058,11 @@ summary.accordion-header::-webkit-details-marker {
 }
 
 .badge[data-badge]::after {
-  font-size: .6rem;
-  height: 18px;
+  font-size: .7rem;
+  height: .9rem;
   line-height: 1;
-  min-width: 18px;
-  padding: 3px 5px;
+  min-width: .9rem;
+  padding: .1rem .2rem;
   text-align: center;
   white-space: nowrap;
 }
@@ -2104,7 +2105,7 @@ summary.accordion-header::-webkit-details-marker {
 }
 
 .breadcrumb .breadcrumb-item {
-  color: #727e96;
+  color: #667189;
   display: inline-block;
   margin: 0;
   padding: .2rem 0;
@@ -2115,7 +2116,7 @@ summary.accordion-header::-webkit-details-marker {
 }
 
 .breadcrumb .breadcrumb-item:not(:last-child) a {
-  color: #727e96;
+  color: #667189;
 }
 
 .breadcrumb .breadcrumb-item:not(:first-child)::before {
@@ -2145,7 +2146,7 @@ summary.accordion-header::-webkit-details-marker {
   display: block;
   -ms-flex-negative: 0;
   flex-shrink: 0;
-  font-size: .6rem;
+  font-size: .7rem;
   height: 100%;
   line-height: .8rem;
   position: relative;
@@ -2244,10 +2245,11 @@ summary.accordion-header::-webkit-details-marker {
   align-items: center;
   background: #f0f1f4;
   border-radius: 5rem;
-  color: #727e96;
-  display: -ms-inline-flexbox;
+  color: #667189;
   display: inline-flex;
+  display: -ms-inline-flexbox;
   -ms-flex-align: center;
+  font-size: 95%;
   height: 1.2rem;
   margin: .1rem;
   max-width: 100%;
@@ -2300,7 +2302,7 @@ summary.accordion-header::-webkit-details-marker {
 .empty {
   background: #f8f9fa;
   border-radius: .1rem;
-  color: #727e96;
+  color: #667189;
   padding: 3.2rem 1.6rem; 
   text-align: center;
 }
@@ -2475,7 +2477,7 @@ summary.accordion-header::-webkit-details-marker {
 }
 
 .nav .nav-item a {
-  color: #727e96;
+  color: #667189;
   padding: .2rem .4rem;
   text-decoration: none;
 }
@@ -2486,7 +2488,7 @@ summary.accordion-header::-webkit-details-marker {
 }
 
 .nav .nav-item.active > a {
-  color: #5b657a;
+  color: #50596c;
   font-weight: bold;
 }
 
@@ -2519,7 +2521,7 @@ summary.accordion-header::-webkit-details-marker {
 
 .pagination .page-item a {
   border-radius: .1rem;
-  color: #727e96;
+  color: #667189;
   display: inline-block;
   padding: .2rem .4rem;
   text-decoration: none;
@@ -2887,7 +2889,7 @@ summary.accordion-header::-webkit-details-marker {
   color: #fff;
   content: attr(data-tooltip);
   display: block;
-  font-size: .6rem;
+  font-size: .7rem;
   left: 50%;
   max-width: 320px;
   opacity: 0;
@@ -3149,9 +3151,9 @@ a.text-error:hover {
   color: #acb3c2;
   content: attr(data-content);
   display: inline-block;
-  font-size: .6rem;
+  font-size: .7rem;
   padding: 0 .4rem;
-  transform: translateY(-.55rem);
+  transform: translateY(-.65rem);
 }
 
 .divider {