opendoc-theme 2.0.0

data/_sass/_print.scss

@@ -0,0 +1,43 @@
+#print-content {
+  /* print styles go here */
+  .site-header-text {
+    color: $primary-brand-color;
+    font-family: $header-font-family;
+    font-size: 40px;
+  }
+
+  #document-title {
+    color: $primary-brand-color;
+    margin-bottom: 30px;
+    font-size: 30px;
+  }
+
+  #main-content {
+    padding-left: 0;
+    padding-right: 0;
+    padding-top: 0;
+    margin-top: -40px;
+    position: relative;
+    font-size: $base-font-size;
+  }
+}
+
+@media print {
+  @page {
+    size: A4;
+    margin: 1.5cm;
+  }
+
+  .site-main {
+    height: auto;
+    left: 0;
+    top: 0;
+    position: relative;
+    padding-top: 20px;
+    padding-bottom: 20px;
+  }
+
+  .no-print {
+    display: none !important;
+  }
+}

data/_sass/_syntax-highlighting.scss

@@ -0,0 +1,61 @@
+.highlight  { 
+  .c { color: #999988; font-style: italic } // Comment
+  .err { color: #a61717; background-color: #e3d2d2 } // Error
+  .k { font-weight: bold } // Keyword
+  .o { font-weight: bold } // Operator
+  .cm { color: #999988; font-style: italic } // Comment.Multiline
+  .cp { color: #999999; font-weight: bold } // Comment.Preproc
+  .c1 { color: #999988; font-style: italic } // Comment.Single
+  .cs { color: #999999; font-weight: bold; font-style: italic } // Comment.Special
+  .gd { color: #000000; background-color: #ffdddd } // Generic.Deleted
+  .gd .x { color: #000000; background-color: #ffaaaa } // Generic.Deleted.Specific
+  .ge { font-style: italic } // Generic.Emph
+  .gr { color: #aa0000 } // Generic.Error
+  .gh { color: #999999 } // Generic.Heading
+  .gi { color: #000000; background-color: #ddffdd } // Generic.Inserted
+  .gi .x { color: #000000; background-color: #aaffaa } // Generic.Inserted.Specific
+  .go { color: #888888 } // Generic.Output
+  .gp { color: #555555 } // Generic.Prompt
+  .gs { font-weight: bold } // Generic.Strong
+  .gu { color: #aaaaaa } // Generic.Subheading
+  .gt { color: #aa0000 } // Generic.Traceback
+  .kc { font-weight: bold } // Keyword.Constant
+  .kd { font-weight: bold } // Keyword.Declaration
+  .kp { font-weight: bold } // Keyword.Pseudo
+  .kr { font-weight: bold } // Keyword.Reserved
+  .kt { color: #445588; font-weight: bold } // Keyword.Type
+  .m { color: #009999 } // Literal.Number
+  .s { color: #d14 } // Literal.String
+  .na { color: #008080 } // Name.Attribute
+  .nb { color: #0086B3 } // Name.Builtin
+  .nc { color: #445588; font-weight: bold } // Name.Class
+  .no { color: #008080 } // Name.Constant
+  .ni { color: #800080 } // Name.Entity
+  .ne { color: #990000; font-weight: bold } // Name.Exception
+  .nf { color: #990000; font-weight: bold } // Name.Function
+  .nn { color: #555555 } // Name.Namespace
+  .nt { color: #000080 } // Name.Tag
+  .nv { color: #008080 } // Name.Variable
+  .ow { font-weight: bold } // Operator.Word
+  .w { color: #bbbbbb } // Text.Whitespace
+  .mf { color: #009999 } // Literal.Number.Float
+  .mh { color: #009999 } // Literal.Number.Hex
+  .mi { color: #009999 } // Literal.Number.Integer
+  .mo { color: #009999 } // Literal.Number.Oct
+  .sb { color: #d14 } // Literal.String.Backtick
+  .sc { color: #d14 } // Literal.String.Char
+  .sd { color: #d14 } // Literal.String.Doc
+  .s2 { color: #d14 } // Literal.String.Double
+  .se { color: #d14 } // Literal.String.Escape
+  .sh { color: #d14 } // Literal.String.Heredoc
+  .si { color: #d14 } // Literal.String.Interpol
+  .sx { color: #d14 } // Literal.String.Other
+  .sr { color: #009926 } // Literal.String.Regex
+  .s1 { color: #d14 } // Literal.String.Single
+  .ss { color: #990073 } // Literal.String.Symbol
+  .bp { color: #999999 } // Name.Builtin.Pseudo
+  .vc { color: #008080 } // Name.Variable.Class
+  .vg { color: #008080 } // Name.Variable.Global
+  .vi { color: #008080 } // Name.Variable.Instance
+  .il { color: #009999 } // Literal.Number.Integer.Long
+}

data/_sass/_toolbar.scss

@@ -0,0 +1,372 @@
+// Button Group
+// ------------
+.toolbar-container {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid $divider-color;
+  border-radius: $base-border-radius;
+  overflow: hidden;
+  z-index: $toolbar-z-index;
+  flex-shrink: 0;
+  right: $large-spacing;
+  top: calc(#{$site-doc-header-height} + (2 * #{$block-spacing}));
+  transition: top 0.3s;
+
+  .toolbar-button {
+    cursor: pointer;
+    background: transparent;
+    // Fixed width here to allow popper to position properly in safari
+    width: $toolbar-button-height;
+    height: $toolbar-button-height;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-bottom: 1px solid $divider-color;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    .btn-icon {
+      height: 1.2rem;
+      width: 1.2rem;
+      pointer-events: none;
+      user-select: none;
+      display: block;
+    }
+
+    .mobile-btn-icon {
+      display: none;
+    }
+
+    &:not(:hover) {
+      .btn-icon.hover {
+        display: none;
+      }
+    }
+
+    .tooltip {
+      position: fixed;
+      right: $toolbar-button-height + 40px;
+      font-size: 12px;
+      color: $well-background-color;
+      background-color: $slate-gray;
+      border-radius: $base-border-radius;
+      padding: 2px 8px;
+      display: none;
+    }
+
+    &:hover {
+      background: $well-background-color;
+      .btn-icon.hover {
+        display: block;
+      }
+      .btn-icon:not(.hover) {
+        display: none;
+      }
+      .tooltip {
+        display: block;
+      }
+    }
+
+    &:active {
+      background: $divider-color;
+    }
+
+    // Needed to prevent doule tap bug for ios devices
+    @media (hover: none) {
+      &:hover {
+        background: transparent;
+        .btn-icon.hover {
+          display: none;
+        }
+        .btn-icon:not(.hover) {
+          display: block;
+        }
+      }
+    }
+    //  specifically for menu button
+    #menu-toggle:checked ~ .btn-icon.hover {
+      display: block;
+    }
+
+    #menu-toggle:checked ~ .btn-icon:not(.hover) {
+      display: none;
+    }
+  }
+  // For mobile menu
+  @include mobile-screen {
+    right: 0;
+    top: 0;
+    border-radius: 0;
+    border: none;
+
+    .toolbar-button {
+      border: none;
+      background: $primary-brand-color;
+      width: $mobile-site-header-height;
+      height: $mobile-site-header-height;
+
+      &:not(#menu-toggle-btn) {
+        display: none;
+      }
+
+      &:hover {
+        background: $primary-brand-color;
+        .tooltip {
+          // absolutely dont display tooltip in mobile
+          display: none;
+        }
+      }
+
+      .mobile-btn-icon {
+        display: block;
+        user-select: none;
+
+        &.close {
+          display: none;
+        }
+      }
+      #menu-toggle:checked {
+        & ~ .mobile-btn-icon.close {
+          display: block;
+        }
+        & ~ .mobile-btn-icon:not(.close) {
+          display: none;
+        }
+      }
+      // Always disable btn-icon in mobile view
+      .btn-icon {
+        display: none !important;
+      }
+    }
+  }
+}
+
+@include mobile-screen {
+  body.menu-toggled #menu-toggle-btn {
+    background: $header-text-color;
+  }
+}
+
+// Floating action button
+// ----------------------
+$max-child-actions: 4;
+$transition-duration: 0.4s;
+
+.fab {
+  position: fixed;
+  bottom: $med-spacing;
+  right: $med-spacing;
+  text-align: center;
+  z-index: $fab-z-index;
+  font-family: Arial, Helvetica, sans-serif;
+
+  @include desktop-screen {
+    display: none;
+  }
+
+  .back-to-top,
+  .trigger,
+  .action {
+    @include flex-center();
+    user-select: none;
+    border-radius: 50%;
+    height: $fab-button-size;
+    width: $fab-button-size;
+    box-shadow: 4px 4px 4px 2px rgba(0, 0, 0, 0.05);
+    cursor: pointer;
+
+    &:active {
+      box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.25);
+    }
+  }
+
+  .trigger {
+    position: relative;
+    background: $primary-brand-color;
+    z-index: $fab-trigger-z-index;
+    img.close {
+      display: none;
+    }
+  }
+
+  .back-to-top {
+    position: absolute;
+    z-index: $fab-trigger-z-index;
+    background: $dark-button-color;
+    bottom: $fab-button-size + $med-spacing;
+    visibility: visible;
+    opacity: 1;
+    transition: opacity $fab-transtition-duration ease-in;
+    &.hidden {
+      visibility: hidden;
+      opacity: 0;
+    }
+  }
+
+  .overlay {
+    position: fixed;
+    background: black;
+    opacity: 0;
+    top: 0;
+    left: 0;
+    height: 0;
+    width: 0;
+  }
+
+  .action {
+    position: absolute;
+    top: 0;
+    margin: 0;
+    opacity: 0;
+    background: $divider-color;
+    height: $fab-button-size;
+    width: $fab-button-size;
+    transition: transform $fab-transtition-duration ease, opacity $fab-transtition-duration/3 ease-out;
+    img {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  .actions {
+    transition: opacity $fab-transtition-duration ease;
+  }
+
+  &.open {
+    .actions {
+      $action-space: $fab-button-size + $med-spacing;
+      opacity: 1;
+
+      @for $i from 1 through $max-child-actions {
+        $distance: $action-space * $i;
+        .action:nth-child(#{$i}) {
+          transform: translateY(-$distance);
+          transition: transform $fab-transtition-duration ease,
+            opacity $fab-transtition-duration ease-in $fab-transtition-duration/3;
+          opacity: 1;
+        }
+      }
+    }
+
+    .overlay {
+      opacity: 0.8;
+      height: 100vh;
+      width: 100vw;
+    }
+
+    .back-to-top {
+      display: none;
+    }
+
+    .trigger {
+      img.close {
+        display: flex;
+      }
+      img {
+        display: none;
+      }
+    }
+
+    .tooltip {
+      opacity: 1;
+      transform: translateY(-50%) scale(1);
+      right: $fab-button-size + $spacing;
+      transition-delay: $fab-transtition-duration/2;
+    }
+  }
+
+  .tooltip {
+    position: absolute;
+    top: 50%;
+    right: 0;
+    padding: 4px 8px;
+    font-size: 11px;
+    color: $divider-color;
+    background-color: rgba(39, 46, 54, 0.8);
+    transform: translateY(-50%) scale(0);
+    transform-origin: right center 0;
+    text-align: right;
+    transition: all $transition-duration ease;
+    opacity: 0;
+    white-space: nowrap;
+    width: auto;
+    border-radius: $base-border-radius;
+    font-family: $base-font-family;
+    border: 1px solid $divider-color;
+  }
+}
+
+// Hide on first page
+// -----------------
+@include desktop-screen {
+  .index .toolbar-container {
+    display: none;
+  }
+}
+
+@include mobile-screen {
+  .index .fab {
+    display: none;
+  }
+}
+
+// Banner
+// ------------
+$banner-bg: #15499b;
+#banner {
+  background: $banner-bg;
+  box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.24), 0 0 8px 0 rgba(0, 0, 0, 0.12);
+  font-size: 14px;
+  line-height: normal;
+  width: 330px;
+  max-width: 80vw;
+  padding: $spacing $med-spacing;
+  color: #f0f4f6;
+  display: none;
+  -webkit-font-smoothing: antialiased;
+  border-radius: $base-border-radius;
+  align-items: center;
+  #close-banner {
+    margin-left: 15px;
+    cursor: pointer;
+    height: 100%;
+    img {
+      width: 24px;
+      height: 24px;
+      max-width: 24px;
+    }
+  }
+  .popper__arrow {
+    width: 0;
+    height: 0;
+    border-style: solid;
+    position: absolute;
+    margin: 5px;
+  }
+
+  &[x-placement^="bottom"] {
+    margin-top: 5px;
+    .popper__arrow {
+      border-width: 0 5px 5px 5px;
+      border-color: transparent transparent $banner-bg transparent;
+      top: -4px;
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+  &[x-placement^="top"] {
+    margin-bottom: 5px;
+    .popper__arrow {
+      border-width: 5px 5px 0 5px;
+      border-color: $banner-bg transparent transparent transparent;
+      bottom: -4px;
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+}