Fix tab styling and add user_guide stub (#382)

* Add sphinx-design and copybutton PST extensions

* Use tabs shortcode

* Try 2

* Remove extensions

* Fix tab background

* Try 3

* Fix linter

* Try 4

* Add tabs example with headings

* Fix linter

Author: jarrodmillman

assets/theme-css/bulma.css

@@ -1,5 +1,4 @@
 /*! bulma.io v0.9.4 | MIT License | github.com/jgthms/bulma */
-.button,
 .input,
 .select select {
   -moz-appearance: none;
@@ -20,24 +19,19 @@
   position: relative;
   vertical-align: top;
 }
-.button:active,
-.button:focus,
 .input:active,
 .input:focus,
-.is-active.button,
 .is-active.input,
 .select select.is-active,
 .select select:active,
 .select select:focus {
   outline: 0;
 }
-.button[disabled],
 .input[disabled],
 .select select[disabled] {
   cursor: not-allowed;
 }
 
-.button,
 .file,
 .navbar-link:not(.is-arrowless)::after,
 .select:not(.is-multiple):not(.is-loading)::after {
@@ -149,7 +143,6 @@
 ul {
   list-style: none;
 }
-button,
 input,
 select {
   margin: 0;
@@ -256,120 +249,6 @@ a.box:active {
     inset 0 1px 2px rgba(10, 10, 10, 0.2),
     0 0 0 1px #485fc7;
 }
-.button {
-  background-color: #fff;
-  border-color: #dbdbdb;
-  border-width: 1px;
-  color: #363636;
-  cursor: pointer;
-  justify-content: center;
-  padding-bottom: calc(0.5em - 1px);
-  padding-left: 1em;
-  padding-right: 1em;
-  padding-top: calc(0.5em - 1px);
-  text-align: center;
-  white-space: nowrap;
-}
-.button strong {
-  color: inherit;
-}
-.button .icon {
-  height: 1.5em;
-  width: 1.5em;
-}
-.button .icon:first-child:not(:last-child) {
-  margin-left: calc(-0.5em - 1px);
-  margin-right: 0.25em;
-}
-.button .icon:last-child:not(:first-child) {
-  margin-left: 0.25em;
-  margin-right: calc(-0.5em - 1px);
-}
-.button .icon:first-child:last-child {
-  margin-left: calc(-0.5em - 1px);
-  margin-right: calc(-0.5em - 1px);
-}
-
-.button:hover {
-  border-color: #b5b5b5;
-  color: #363636;
-}
-
-.button:focus {
-  border-color: #485fc7;
-  color: #363636;
-}
-
-.button:focus:not(:active) {
-  box-shadow: 0 0 0 0.125em rgba(72, 95, 199, 0.25);
-}
-.button.is-active,
-.button:active {
-  border-color: #4a4a4a;
-  color: #363636;
-}
-.button.is-light {
-  background-color: #f5f5f5;
-  border-color: transparent;
-  color: rgba(0, 0, 0, 0.7);
-}
-
-.button.is-light:hover {
-  background-color: #eee;
-  border-color: transparent;
-  color: rgba(0, 0, 0, 0.7);
-}
-
-.button.is-light:focus {
-  border-color: transparent;
-  color: rgba(0, 0, 0, 0.7);
-}
-
-.button.is-light:focus:not(:active) {
-  box-shadow: 0 0 0 0.125em rgba(245, 245, 245, 0.25);
-}
-.button.is-light.is-active,
-.button.is-light:active {
-  background-color: #e8e8e8;
-  border-color: transparent;
-  color: rgba(0, 0, 0, 0.7);
-}
-.button.is-light[disabled] {
-  background-color: #f5f5f5;
-  border-color: #f5f5f5;
-  box-shadow: none;
-}
-.button[disabled] {
-  background-color: #fff;
-  border-color: #dbdbdb;
-  box-shadow: none;
-  opacity: 0.5;
-}
-.button.is-static {
-  background-color: #f5f5f5;
-  border-color: #dbdbdb;
-  color: #7a7a7a;
-  box-shadow: none;
-  pointer-events: none;
-}
-.buttons {
-  align-items: center;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-}
-.buttons .button {
-  margin-bottom: 0.5rem;
-}
-.buttons .button:not(:last-child):not(.is-fullwidth) {
-  margin-right: 0.5rem;
-}
-.buttons:last-child {
-  margin-bottom: -0.5rem;
-}
-.buttons:not(:last-child) {
-  margin-bottom: 1rem;
-}
 .container {
   flex-grow: 1;
   margin: 0 auto;

assets/theme-css/fresh.css

@@ -141,10 +141,7 @@
 section:focus {
   outline: none !important;
 }
-button:focus,
-button:active {
-  outline: none;
-}
+
 #status {
   width: 200px;
   height: 200px;

assets/theme-css/tabs.css

@@ -11,40 +11,43 @@
   min-width: 100%;
 }
 
-[role="tab"],
-[role="tab"]:focus,
-[role="tab"]:hover {
-  display: inline-block;
-  position: relative;
-  z-index: 2;
-  top: 1px;
-  margin: 0;
-  margin-top: 4px;
+[role="tab"] {
   padding: 2px 2px 4px;
-  border: 1px solid hsl(219deg 1% 72%);
-  border-bottom: 1px solid hsl(219deg 1% 72%);
-  border-radius: 5px 5px 0 0;
+  background-color: var(--pst-color-background);
+  border-color: transparent transparent var(--pst-color-primary);
+  color: var(--pst-color-text);
   outline: none;
   font-weight: bold;
   max-width: 22%;
   overflow: hidden;
   text-align: left;
   cursor: pointer;
+  font-size: 1rem;
+}
+
+[role="tab"]:hover {
+  color: var(--pst-color-secondary);
+  border-color: var(--pst-color-secondary) transparent
+    var(--pst-color-secondary);
 }
 
 [role="tab"][aria-selected="true"] {
-  padding: 2px 2px 4px;
-  margin-top: 0;
-  border-width: 1px;
-  border-top-width: 6px;
-  border-top-color: rgb(36 116 214);
-  border-bottom-color: hsl(220deg 43% 99%);
-  background: hsl(220deg 43% 99%);
+  border-color: transparent transparent var(--pst-color-primary);
+  color: var(--pst-color-primary);
+}
+
+[role="tab"][aria-selected="true"]:hover {
+  border-color: var(--pst-color-secondary) transparent
+    var(--pst-color-secondary);
+  color: var(--pst-color-secondary);
 }
 
 [role="tab"][aria-selected="false"] {
-  padding: 2px 2px 4px;
-  border-bottom: 1px solid hsl(219deg 1% 72%);
+  border-bottom: 0rem solid;
+}
+
+[role="tab"][aria-selected="false"]:hover {
+  border-bottom: 0.0625rem solid var(--pst-color-secondary);
 }
 
 [role="tab"] span.focus {
@@ -53,23 +56,12 @@
   padding: 4px 6px;
 }
 
-/* This makes the tab bounce around */
-/* [role="tab"]:hover span.focus, */
-/* [role="tab"]:focus span.focus, */
-/* [role="tab"]:active span.focus { */
-/*   padding: 2px 2px 4px; */
-/*   border: 1px solid rgb(36 116 214); */
-/*   border-radius: 3px; */
-/* } */
-
 [role="tabpanel"] {
-  padding: 1rem;
-  border: 1px solid hsl(219deg 1% 72%);
-  border-radius: 0 5px 5px;
-  min-height: 10em;
+  box-shadow:
+    0 -0.0625rem var(--pst-color-text-muted),
+    0 0.0625rem var(--pst-color-text-muted);
   width: 100%;
   overflow: auto;
-  background: var(--pst-color-on-background);
 }
 
 [role="tabpanel"].is-hidden {