Initial commit

resources/styles/nextbestnetwork.scss

@@ -0,0 +1,7 @@
+@import "nextbestnetwork/variables";
+
+@import "~bootstrap/scss/bootstrap";
+
+@import "~bootstrap-icons/font/bootstrap-icons";
+
+@import "nextbestnetwork/index";

resources/styles/nextbestnetwork/_buttons.scss

@@ -0,0 +1,130 @@
+input[type=submit], input[type=button] {
+  @extend .btn;
+  @extend .btn-secondary;
+
+  &[name=wpUpload] {
+    @extend .btn-primary;
+  }
+}
+
+// UI buttons (e.g. in the login form)
+#maincontentwrapper {
+  .mw-ui-button.mw-ui-progressive {
+    @extend .btn;
+    @extend .btn-primary;
+  }
+}
+
+/*.btn-default:active,
+.btn-default.active,*/
+input[type=submit]:active, input[type=button]:active,
+input[type=submit].active, input[type=button].active {
+  // @extend .btn;
+  // @extend .btn-secondary;
+}
+
+/*.btn-default {* /
+input[type=submit], input[type=button] {
+  text-shadow: 0 1px 0 #fff;
+  background-image: -webkit-linear-gradient(top, #fff 0%, #e0e0e0 100%);
+  background-image:      -o-linear-gradient(top, #fff 0%, #e0e0e0 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e0e0e0));
+  background-image:         linear-gradient(to bottom, #fff 0%, #e0e0e0 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  background-repeat: repeat-x;
+  border-color: #dbdbdb;
+  border-color: #ccc;
+}
+/*.btn-default:hover,
+.btn-default:focus {* /
+input[type=submit]:hover, input[type=button]:hover,
+input[type=submit]:focus, input[type=button]:focus {
+  background-color: #e0e0e0;
+  background-position: 0 -15px;
+}
+/*.btn-default:active,
+.btn-default.active {* /
+input[type=submit]:active, input[type=button]:active,
+input[type=submit].active, input[type=button].active {
+  background-color: #e0e0e0;
+  border-color: #dbdbdb;
+}
+/*.btn-default.disabled,
+.btn-default:disabled,
+.btn-default[disabled] {* /
+input[type=submit]:disabled, input[type=button]:disabled,
+input[type=submit].disabled, input[type=button].disabled,
+input[type=submit][disabled], input[type=button][disabled] {
+  background-color: #e0e0e0;
+  background-image: none;
+}
+/**/
+
+
+
+body #contentwrapper #maincontentwrapper {
+  .oo-ui-buttonElement {
+    & > * {
+      font-weight: normal !important;
+    }
+  }
+
+  // Buttons on page edit
+  input.oo-ui-buttonElement-button,
+  button.oo-ui-buttonElement-button {
+    @extend .btn;
+    @extend .btn-primary;
+  }
+
+  // Buttons in preferences (e.g. for changing password)
+  label a.oo-ui-buttonElement-button {
+    @extend .btn;
+    @extend .btn-secondary;
+  }
+
+  // Cancel link on page edit
+  .cancelLink .oo-ui-buttonElement-button {
+    @extend .btn-link;
+
+    &:hover,
+    &:active,
+    &.active,
+    &:focus,
+    &.focus {
+      background-color:transparent;
+    }
+  }
+
+  // Button and icons on page forms
+  input, button {
+    &[name=wpPreview], &[name=wpDiff], &[name=add_section] {
+      @extend .btn-primary;
+    }
+  }
+  .oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button {
+    @extend .btn-danger;
+  }
+
+  button .oo-ui-iconElement-icon {
+    // Apply fa styles for icons inside buttons
+    display: contents;
+
+    &:before {
+      font-family: "Font Awesome 5 Free";
+      font-weight: $font-weight-bold;
+    }
+
+    &.oo-ui-icon-subtract:before {
+      content: "\f068"; // fa-minus
+    }
+
+    &.oo-ui-icon-add:before {
+      content: "\2b"; // fa-plus
+    }
+
+    &+.oo-ui-labelElement-label::before {
+      content: " ";
+    }
+  }
+}

resources/styles/nextbestnetwork/_editors.scss

@@ -0,0 +1,16 @@
+/**
+ * VisualEditor
+ */
+
+.ve-ui-toolbar *,
+.ve-ui-overlay * {
+  box-sizing:content-box;
+}
+
+
+// Modals above Navbar
+.oo-ui-windowManager-modal,
+.wikiEditor-toolbar-dialog,
+.ve-ui-overlay-global {
+  z-index: 1031 !important;
+}

resources/styles/nextbestnetwork/_footer.scss

@@ -0,0 +1,31 @@
+#footer {
+  display: block;
+  background: $gray-200;
+  margin-top: auto !important;
+  padding-top: $spacer;
+  padding-bottom: $spacer * 3;
+  font-size: 0.75rem; // $font-size-xs;
+
+  a {
+    color: $gray-600;
+    text-decoration: none;
+    cursor: pointer;
+
+    &:hover {
+      color: $gray-800;
+      cursor: pointer;
+    }
+  }
+
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: $spacer 0;
+    color: $gray-600;
+
+    li#footer-poweredbyico {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+}

resources/styles/nextbestnetwork/_forms.scss

@@ -0,0 +1,65 @@
+body #contentwrapper #maincontentwrapper {
+	.oo-ui-textInputWidget .oo-ui-inputWidget-input {
+		@extend .form-control;
+	}
+
+	.oo-ui-textInputWidget.oo-ui-iconElement .oo-ui-inputWidget-input {
+		padding-left: 2.42857143em;
+	}
+
+	.oo-ui-textInputWidget.oo-ui-indicatorElement .oo-ui-inputWidget-input {
+		padding-right: 28px;
+	}
+
+	.oo-ui-textInputWidget.oo-ui-comboBoxInputWidget .oo-ui-inputWidget-input {
+		border-top-right-radius:0;
+		border-bottom-right-radius:0;
+	}
+
+	.mw-ui-checkbox:not(#noop) [type="checkbox"]:enabled:checked + label::before {
+		background-color:$primary;
+		border-color:$primary;
+	}
+}
+
+
+// Form elements (e.g. in the upload form)
+.mw-htmlform-field-HTMLTextField input {
+	@extend .form-control;
+}
+.mw-input {
+	textarea,
+	select {
+		@extend .form-control;
+	}
+	select {
+		background-color:transparent;
+	}
+}
+
+
+// datepicker
+.pfPickerWrapper {
+	display: inline-block;
+}
+.pfDatePicker.oo-ui-textInputWidget {
+	width:200px;
+}
+
+.oo-ui-checkboxInputWidget + t {
+	margin-left:8px;
+}
+
+// ugly hack: without it, checkboxes are only partly clickable
+.oo-ui-checkboxInputWidget {
+	width: 1.42857143em;
+}
+#maincontentwrapper #pfForm select, 
+#maincontentwrapper #pfForm input[type="checkbox"] {
+	width: 100% !important;
+}
+
+
+.multipleTemplateInstance {
+	background-color:$light !important;
+}

resources/styles/nextbestnetwork/_history.scss

@@ -0,0 +1,28 @@
+#contentSub br {
+  display: none;
+}
+
+#mw-revision-info,
+#mw-revision-nav {
+  background: #f6f6f6;
+  border: 1px solid #eee;
+  display: block;
+  margin: 0 auto;
+  padding: 20px;
+  text-align: center;
+  width: auto;
+}
+
+#mw-revision-info {
+  border-bottom: none;
+  border-radius: 6px 6px 0 0;
+  font-size: 16px;
+  padding-bottom: 0.25em;
+}
+
+#mw-revision-nav {
+  border-radius: 0 0 6px 6px;
+  border-top: none;
+  margin-top: 0;
+  padding-top: 0;
+}

resources/styles/nextbestnetwork/_index.scss

@@ -0,0 +1,11 @@
+@import "navigation";
+@import "toc";
+@import "footer";
+@import "buttons";
+@import "forms";
+@import "history";
+@import "loginext";
+@import "preferences";
+@import "editors";
+@import "overwrites";
+@import "print";

resources/styles/nextbestnetwork/_loginext.scss

@@ -0,0 +1,36 @@
+/**
+ * LOGIN-EXT
+ */
+
+#loginext {
+  padding:0 10px;
+}
+
+@include media-breakpoint-up(md) {
+  #loginext {
+    width:250px;
+  }
+}
+
+#loginext .form-group {
+    margin-bottom:2px;
+}
+
+#loginext #wpLoginAttempt2 {
+    margin-top:8px;
+    margin-bottom:5px;
+}
+
+#loginext label {
+    margin-bottom: 3px;
+}
+
+#tw-createaccount {
+  text-align:center;
+}
+
+.dropdown-menu > li#tw-createaccount > a:hover,
+.dropdown-menu > li#tw-createaccount > a:focus {
+  color:#000;
+  background-color:transparent;
+}

resources/styles/nextbestnetwork/_navigation.scss

@@ -0,0 +1,5 @@
+// correct margins for tabs
+.mw-content-ltr ul.nav-tabs, 
+.mw-content-rtl .mw-content-ltr ul.nav-tabs {
+	margin:0;
+}

resources/styles/nextbestnetwork/_overwrites.scss

@@ -0,0 +1,548 @@
+
+/**
+ * Grid spacing
+ */
+
+// #contentwrapper {
+//   padding-top: $spacer * 3;
+//   padding-bottom: $spacer * 3;
+//   min-height: 70vh;
+// }
+
+#maincontentwrapper {
+  overflow-wrap:break-word; // headings and content that is to long should break
+}
+
+
+@include media-breakpoint-up(md) {
+  #sidebar {
+    &-right {
+      order:2;
+    }
+    &-left {
+      order:0;
+    }
+  }
+  #maincontentwrapper {
+    order:1;
+  }
+}
+
+.navbar {
+  .form-group {
+    // margin-bottom: 0;
+  }
+
+  .nav.icon {
+    @extend .nav-item;
+  }
+}
+
+
+// #ca-unwatch,
+// #ca-watch {
+//   &.icon a {
+//     width: $spacer;
+//     height: $spacer;
+//     display: inline-block;
+//     background: fuchsia;
+//   }
+// }
+
+html {
+  height: 100% !important;
+}
+
+body {
+  height: 100% !important;
+  display: flex !important;
+  flex-direction: column !important;
+
+  .formtable {
+    @extend .table;
+  }
+
+  .oo-ui {
+    &-widget-enabled {
+      [type="checkbox"] {
+        &:checked {
+          & + span {
+            background-color: $primary !important;
+            border-color: $primary !important;
+          }
+        }
+      }
+    }
+  }
+
+  .editButtons {
+    .editHelp {
+      margin: $spacer * 0.5 0 $spacer;
+      display: block;
+      width: 100%;
+      font-size: $font-size-sm;
+      color: $gray-600;
+
+      a {
+        font-weight: normal;
+        color: $gray-600;
+        text-decoration: underline;
+
+        &:hover {
+          color: $gray-800;
+        }
+      }
+    }
+  }
+
+
+  /**
+   * Tabs
+   */
+
+  .nav {
+    &-tabs {
+      //
+    }
+  }
+
+
+  /**
+   * Sidebar
+   */
+
+  #sidebar {
+    &-right,
+    &-left {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+  main {
+    margin-bottom: $spacer * 3;
+  }
+
+  #content {
+    //padding: 0 $spacer * 2 0 0;
+  }
+
+
+  /**
+   * Cookie Warning
+   */
+  .mw-cookiewarning-container {
+    top:unset;
+    bottom:0;
+    text-align:center;
+  }
+
+  .mw-editsection-bracket {
+    display:none;
+  }
+}
+
+
+
+
+/**
+ * NextBestNetwork Base (less import)
+ */
+
+/**
+ * NextBestNetwork screen styles
+ *
+ * part of this has been taken from Garret LeSage's Strapping
+ */
+
+
+/**
+ * CONTENT
+ */
+
+#content {
+  clear:both;
+  margin-bottom:1em;
+  padding-top:.5em;
+  padding-bottom:1em;
+
+  a {
+    text-decoration:none;
+
+    &:hover {
+      text-decoration:underline;
+    }
+  }
+}
+
+@include media-breakpoint-up(md) {
+  #content {
+    padding:1em 2em;
+    -moz-border-radius:5px;
+    -webkit-border-radius:5px;
+    border-radius:5px;
+  }
+}
+
+
+
+/**
+ * CORRECTION FOR MAIN CONTENT
+ */
+.with-navbar {
+}
+
+.without-navbar {
+  padding-top:20px;
+}
+
+.with-navbar.with-navbar-fixed {
+  padding-top: 60px;
+}
+@media (min-width: 768px) {
+  .with-navbar.with-navbar-fixed #maincontentwrapper {
+    padding-top:30px;
+  }
+}
+
+/* navigation - accessibility */
+#mw-navigation h2 {
+    position: absolute;
+    top: -9999px;
+}
+
+/* image in brand */
+.navbar-brand img {
+  height:40px;
+  margin-top:-10px;
+}
+
+/* correction for searchform in navbar */
+#searchform + .navbar-nav.navbar-right:last-child {
+    margin-right: 0;
+}
+
+/* correction for dropdowns (conflicting with mediawiki.legacy.shared) */
+.mw-content-ltr ul.dropdown-menu {
+  margin: 2px 0 0;
+  padding: 5px 0;
+}
+
+/* correction for selflinks in dropdowns (they're no links actually) */
+.dropdown-menu > li > .selflink {
+  padding: 3px 20px;
+  display: block;
+}
+
+/* correction for uls */
+.mw-content-ltr,
+.mw-content-rtl {
+  .mw-parser-output {
+    > ul {
+      margin: 0.3em 0 0.6em 1.6em;
+    }
+  }
+}
+
+/**
+ * SMALL CORRECTIONS
+ */
+
+/* postedit: would otherwise be hidden behind navbar */
+.postedit {
+  top: 5em !important;
+}
+
+/* editsectionlink: hide brackets */
+.mw-editsection-bracket {
+  display:none;
+}
+
+/* show editsectionlink only on hover */
+.tw-editsection-onhover,
+.tw-editsection-onhover + .mw-editsection-divider {
+  display:none;
+  color:#ccc;
+}
+.tw-editsection-onhover:hover,
+.tw-editsection-onhover:focus {
+  color:#666;
+  text-decoration:none;
+}
+.mw-editsection {
+  vertical-align:middle;
+}
+.mw-editable {
+	h1:hover .tw-editsection-onhover,
+	h2:hover .tw-editsection-onhover,
+	h3:hover .tw-editsection-onhover,
+	h4:hover .tw-editsection-onhover,
+	h5:hover .tw-editsection-onhover,
+	h6:hover .tw-editsection-onhover {
+	  display:inline-block;
+	}
+	h1:hover .tw-editsection-onhover + .mw-editsection-divider,
+	h2:hover .tw-editsection-onhover + .mw-editsection-divider,
+	h3:hover .tw-editsection-onhover + .mw-editsection-divider,
+	h4:hover .tw-editsection-onhover + .mw-editsection-divider,
+	h5:hover .tw-editsection-onhover + .mw-editsection-divider,
+	h6:hover .tw-editsection-onhover + .mw-editsection-divider {
+	  display:inline-block;
+	}
+}
+
+/* hide categories */
+#catlinks {
+  display:none;
+}
+
+/* make edit window bigger */
+#wpTextbox1 {
+  width:100%;
+}
+
+/* adjust upload description */
+#wpUploadDescription {
+  width:100%;
+}
+
+.firstHeading,
+.nextbestnetworkFirstHeading {
+  text-align:center;
+  margin-bottom:15px;
+  margin-top:10px;
+  font-weight:600;
+  letter-spacing:-.01em;
+}
+
+// obsolete since MW 1.39
+.firstHeading .namespace {
+  font-weight:300;
+}
+
+.mw-page-title-namespace {
+  font-weight:300;
+}
+.mw-page-title-separator {
+  font-weight:300;
+  margin-right:( $spacer * .25 );
+}
+
+/* Hide empty portlets */
+div.emptyPortlet {
+  display: none;
+}
+
+/* Sub-navigation */
+#siteSub {
+  display: none;
+}
+
+#jump-to-nav {
+  display: none;
+}
+
+.mw-body .printfooter {
+  display: none;
+}
+
+label {
+  display:inline-block;
+  margin-bottom:0;
+}
+
+input[type=radio], input[type=checkbox] {
+  margin:-2px 0 0;
+}
+
+label > input[type=checkbox],
+label > input[type=radio] {
+  margin-right:5px;
+  vertical-align:middle;
+}
+
+
+
+#bodyContent {
+  ul {
+    &.card-header-tabs {
+      padding: 0;
+
+      @extend .card-header-tabs;
+    }
+  }
+
+  .card {
+    &-header {
+      position: relative;
+
+      & > h3 {
+        margin-top: $spacer * 2;
+        margin-bottom: $spacer * 2;
+      }
+
+      & > a {
+        @extend .badge;
+
+        position: absolute;
+        top: $spacer;
+        left: $spacer;
+        font-weight: normal;
+      }
+    }
+
+    &-body {
+      &-table {
+        margin: 0 $spacer * -1.25;
+
+        .table,
+        .table.table-bordered {
+          border-left-width: 0;
+          border-right-width: 0;
+
+          thead,
+          tbody {
+            tr {
+              th,
+              td {
+                &:first-child {
+                  border-left-width: 0;
+                }
+
+                &:last-child {
+                  border-right-width: 0;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+
+/**
+ * Body class display classes
+ */
+.nextbestnetwork-advanced .d-advanced-none,
+.nextbestnetwork-non-advanced .d-non-advanced-none,
+.nextbestnetwork-user-logged-in .d-logged-in-none,
+.nextbestnetwork-user-logged-in .d-anon,
+.nextbestnetwork-user-anon .d-anon-none,
+.nextbestnetwork-user-anon .d-logged-in {
+  display:none
+}
+
+
+
+/**
+ * Sticky Sidebar 
+ */
+.sidebar-sticky {
+  position: sticky;
+  top: 80px;
+  z-index: 1;
+}
+
+@include media-breakpoint-up(md) {
+  .sidebar-sticky {
+    height: calc(100%);
+  }
+}
+
+/**
+ * EDIT-EXT Dropdown 
+ */
+[name=ca-edit-ext] + .dropdown-toggle {
+  max-width: 40px;
+}
+
+
+/**
+ * Watch/Unwatch Icon Styling 
+ */
+#ca-unwatch.icon a,
+#ca-watch.icon a {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  display: inline-block;
+  font-style: normal;
+  font-variant: normal;
+  text-rendering: auto;
+  font-family: "Font Awesome 5 Free";
+  height:40px;
+  width:2.2rem;
+  overflow:hidden;
+}
+.navbar #ca-unwatch.icon a,
+.navbar #ca-watch.icon a {
+  /* should be 1.2em + padding of .navbar-expand-lg .navbar-nav -nav-link */
+  width:2.2rem;
+}
+#ca-unwatch.icon a:before,
+#ca-watch.icon a:before {
+  content: "\f005";
+  /* hide text */
+  padding-right:50em;
+}
+#ca-unwatch.icon a {
+  font-weight: 900;
+}
+#ca-watch.icon a {
+  font-weight: 400;
+}
+#ca-unwatch.icon a.loading,
+#ca-watch.icon a.loading {
+  animation: fa-spin 5s infinite linear;
+}
+
+.mw-content-ltr ul.nav, 
+.mw-content-rtl .mw-content-ltr ul.nav {
+  margin-left:0;
+}
+.mw-content-ltr ul.nav.card-header-tabs, 
+.mw-content-rtl .mw-content-ltr ul.nav.card-header-tabs {
+  margin-right:-.625rem;
+  margin-left:-.625rem;
+  margin-bottom:-.75rem
+}
+
+
+
+#bodyContent ul.select2-choices {
+  padding:0;
+}
+
+
+
+
+
+a.mw-selflink {
+  color: inherit;
+  text-decoration: none;
+}
+
+
+// make mw-collapsible work in card headers
+.card .mw-collapsible-toggle {
+  position:relative;
+  z-index: 1;
+  padding: $card-spacer-y $card-spacer-x;
+}
+
+
+.btn-block + .btn-block.dropdown-toggle {
+  margin-top:0;
+}
+
+
+.nextbestnetwork-user-image {
+  border-radius:30px;
+  margin-top:-5px;
+  margin-bottom:-5px;
+}
+
+.btn-close {
+	cursor:pointer;
+}

resources/styles/nextbestnetwork/_preferences.scss

@@ -0,0 +1,90 @@
+/* TODO: is this just a duplication of Bootstrap's nav-tabs?
+ then we should mark it somehow to check after updates... */
+
+#preferences .mainLegend {
+  display: none;
+}
+
+#preftoc {
+  margin: 40px 0 -2px;
+}
+
+#preferences {
+  border: 1px solid #ccc;
+  margin: 0 20px;
+}
+
+#preftoc ul,
+#preftoc li {
+  display: inline;
+  list-style: none;
+}
+
+#preftoc li a {
+  position: relative;
+  z-index: 2;
+  font: inherit;
+  margin: 0;
+  padding: 8px 15px;
+  display: inline-block;
+}
+
+#preftoc li.selected a {
+  background-color: white;
+  border: 1px solid #ccc;
+  border-bottom: none;
+  border-radius: 6px 6px 0 0;
+  color: inherit;
+  cursor: default;
+  padding: 7px 14px;
+}
+
+#preferences fieldset.prefsection {
+  margin: 0;
+  padding: 40px;
+}
+
+#preferences legend {
+  border-bottom: none;
+}
+
+#preferences fieldset + fieldset > legend {
+  padding-top: 40px;
+}
+
+#preferences .mw-label label {
+  white-space: nowrap;
+  margin: 0;
+  color: #777;
+}
+
+#preferences td {
+  padding: 5px;
+}
+
+#preferences .htmlform-tip {
+  color: #999;
+  padding: 1em 0 3em 12em;
+}
+
+#preferences div.mw-prefs-buttons {
+  margin: 20px auto 0;
+  padding: 40px 40px 20px;
+  text-align: center;
+  overflow: hidden;
+}
+
+.mw-prefs-buttons a,
+.mw-prefs-buttons input {
+  font: inherit;
+  padding: 3px 15px;
+}
+
+.mw-prefs-buttons a {
+  padding: 8px 20px;
+  float: left;
+}
+
+.mw-prefs-buttons input {
+  float: right;
+}

resources/styles/nextbestnetwork/_print.scss

@@ -0,0 +1,33 @@
+/* NextBestNetwork print styles */
+
+@media print {
+	/* hide most of the unimportant stuff */
+	.noprint,
+	#mw-navigation,
+	#mw-page-base,
+	#mw-head-base,
+	#toc,
+	.sidebar-wrapper,
+	body #footer,
+	#page-header,
+	body #sidebar-left,
+	body #sidebar-right {
+		display:none;
+	}
+
+	#maincontentwrapper {
+		max-width:100%;
+		flex:auto;
+	}
+
+	.printfooter {
+		color:#666;
+		font-style:italic;
+		font-size:smaller;
+	}
+
+	/* print accordions */
+	.collapse {
+		display:block;
+	}
+}

resources/styles/nextbestnetwork/_toc.scss

@@ -0,0 +1,102 @@
+#sidebar {
+  &-right,
+  &-left {
+    #nextbestnetworkTOC {
+      margin-top:25px;
+    }
+
+    #nextbestnetworkTOC:first-child {
+      margin-top:0;
+    }
+  }
+
+}
+
+// Hide default TOC in content
+#bodyContent #toc {
+  display: none;
+}
+
+// hide by default and make it visible by javascript only
+#nextbestnetworkDropdownTOC {
+  display:none;
+}
+
+#nextbestnetworkTOC {
+  font-size: $font-size-sm;
+
+  // hide .toctogglespan, introduced in MW 1.32
+  .toctogglespan,
+  .toctoggle,
+  .tocnumber {
+    display:none;
+  }
+
+  // backwards compatibility for MW < 1.30
+  #toctitle,
+  .toctitle {
+    h2 {
+      font-size: $font-size-sm;
+      font-weight: normal;
+      text-transform: none;
+      position: relative;
+
+      a {
+        @extend .badge;
+
+        display: block;
+        position: absolute;
+        font-size: 0.75rem;
+        right: 0;
+        top: 0;
+        background-color: $gray-200;
+        font-weight: normal;
+      }
+    }
+  }
+
+  #toc {
+    width:100%;
+    display:none;
+
+    a {
+      padding: 0;
+      color: #999;
+
+      &.active,
+      &:hover,
+      &:focus,
+      &:hover {
+        color: #000;
+      }
+    }
+
+    ul {
+      margin: 0 !important;
+
+      & > li {
+        & > ul {
+          display: none;
+          border-left: 1px solid $gray-400;
+          margin: $spacer 0;
+          padding: 0 0 0 $spacer;
+
+          li,
+          a {
+            font-size: 0.75rem;
+            line-height: 0.75rem * 1.5;
+            justify-content: flex-end;
+          }
+        }
+
+        .active + ul {
+          display: block;
+        }
+      }
+    }
+  }
+}
+
+#tw-filetoc {
+  margin-bottom: $spacer;
+}

resources/styles/nextbestnetwork/_variables.scss

@@ -0,0 +1,2 @@
+$font-size-xs: 0.75rem;
+$border-radius: 0.25rem;