update shared button styles
authorDan Allen <dan@opendevise.com>
Fri, 19 Jul 2019 20:27:10 +0000 (14:27 -0600)
committerDan Allen <dan@opendevise.com>
Fri, 19 Jul 2019 20:27:10 +0000 (14:27 -0600)
- use less aggressive generic styles
- override line height at location where button is used

src/css/base.css
src/css/header.css
src/css/nav.css
src/css/page-versions.css
src/css/toolbar.css

index 6656706..c3d1e7e 100644 (file)
@@ -60,6 +60,13 @@ strong strong {
 
 button {
   cursor: pointer;
-  font-size: inherit;
-  line-height: inherit;
+  font-family: inherit;
+  font-size: 1em;
+  line-height: 1.15;
+  margin: 0;
+}
+
+button::-moz-focus-inner {
+  border: none;
+  padding: 0;
 }
index 0c7c56e..134b47a 100644 (file)
@@ -66,6 +66,7 @@ body {
   background: none;
   border: none;
   outline: none;
+  line-height: 1;
   height: var(--navbar-height);
   position: relative;
   /* width: var(--navbar-height); */
@@ -74,10 +75,6 @@ body {
   padding: 0;
 }
 
-.navbar-burger::-moz-focus-inner {
-  border: none;
-}
-
 .navbar-burger span {
   background: var(--navbar-font-color);
   display: block;
index 29ecd28..471dfee 100644 (file)
@@ -152,16 +152,13 @@ html.is-clipped--nav {
   background-size: 55%;
   border: none;
   outline: none;
+  line-height: inherit;
   position: absolute;
   height: 1.4em; /* NOTE must match line-height of text; slightly tweaked for alignment */
   width: 1.5em;
   margin-left: -1.5em;
 }
 
-.nav-item-toggle::-moz-focus-inner {
-  border: none;
-}
-
 .nav-item.is-active > .nav-item-toggle {
   transform: rotate(90deg);
 }
index 7e15515..b317e9c 100644 (file)
 
 .page-versions .version-menu-toggle {
   color: inherit;
-  font-family: inherit;
   background: url(../img/chevron.svg) no-repeat;
   background-position: right 0.5rem top 50%;
   background-size: auto 0.75em;
   border: none;
   outline: none;
+  line-height: inherit;
   padding: 0.5rem 1.5rem 0.5rem 0.5rem;
   position: relative;
   z-index: var(--z-index-page-version-menu);
 }
 
-.page-versions .version-menu-toggle::-moz-focus-inner {
-  border: none;
-}
-
 .page-versions .version-menu {
   border: 1px solid transparent;
   background-color: var(--page-version-menu-background);
index 1505680..cf39164 100644 (file)
   background-size: 49%;
   border: none;
   outline: none;
+  line-height: inherit;
   height: 2.5rem;
   padding: 0;
   width: 2.5rem;
   margin-right: -0.25rem;
 }
 
-.nav-toggle::-moz-focus-inner {
-  border: none;
-}
-
 @media screen and (min-width: 1024px) {
   .nav-toggle {
     display: none;