nexmo-oas-renderer 0.1.0

data/lib/nexmo/oas/renderer/public/assets/stylesheets/sass/nexmo.scss

@@ -0,0 +1,61 @@
+$blue-light: $blue;
+$pink: #E6547B;
+$peach: #F88175;
+$ice: #f9fbfd;
+$mint: #E4EEF3;
+$atom: #282c34;
+
+$gray: #A1A1A1;
+$gray-light: lighten($gray, 25%);
+$stone-light: #93B6C7;
+$stone: #224E66;
+$stone-dark: #193c56;
+$gray-dark: #252A2D;
+
+$sms: #40569F;
+$sms-light: #EFF3FE;
+$number-insight: #57AF7B;
+$number-insight-light: #F3FFF8;
+$voice: #E7883C;
+$voice-light: #FDF7F1;
+$chat: #CA579C;
+$verify: #7C578D;
+$verify-light: #FCF8FF;
+$account: #D65E7C;
+$account-light: #FDF3F8;
+
+$primary: $pink;
+$positive: $green;
+$negative: $red;
+$warning: $orange;
+$background: $ice;
+$text: $stone;
+$text-subtle: desaturate(lighten($text, 15%), 20%);
+$code-background: $atom;
+
+$callback: $orange;
+$webhook: $orange;
+
+$spacing: 20px;
+$radius: 3px;
+$radius-top: $radius $radius 0 0;
+$radius-bottom: 0 0 $radius $radius;
+$shadow-soft: 1px 0 8px rgba(44, 45, 48, 0.2);
+$shadow: 0 2px 14px 0 rgba(0,0,0,0.12);
+$shadow-hard: 0 1px 8px 0 rgba(0,0,0,0.30);
+
+$border-color: darken($mint, 5%);
+$border-color-ligher: $mint;
+$border: 1px solid $border-color;
+
+$golden-ratio: 1.618;
+
+$font-family: 'Lato', sans-serif;
+
+.Vlt-sidenav {
+  display: inline-flex; // Temporary
+}
+
+body {
+  background: $grey-lighter;
+}

data/lib/nexmo/oas/renderer/public/assets/stylesheets/sass/style.scss

@@ -0,0 +1,10 @@
+@import "./variables";
+@import "./nexmo";
+@import "./mediaqueries";
+
+@import "./api";
+@import "./core";
+@import "./navigation";
+@import "./syntax";
+@import "./typography";
+@import "./volta-templates";

data/lib/nexmo/oas/renderer/public/assets/stylesheets/sass/syntax.scss

@@ -0,0 +1,63 @@
+.highlight .c { color: $grey-dark } /* Comment */
+.highlight .err { color: $red-lighter; background-color: rgba($red-light, 0.7) } /* Error */
+.highlight .k { color: $blue-light } /* Keyword */
+.highlight .l { color: $purple-light } /* Literal */
+.highlight .n { color: $grey } /* Name */
+.highlight .o { color: $red-light } /* Operator */
+.highlight .p { color: $grey } /* Punctuation */
+.highlight .cm { color: $grey-dark } /* Comment.Multiline */
+.highlight .cp { color: $grey-dark } /* Comment.Preproc */
+.highlight .c1 { color: $grey-dark } /* Comment.Single */
+.highlight .cs { color: $grey-dark } /* Comment.Special */
+.highlight .ge { font-style: italic } /* Generic.Emph */
+.highlight .gs { font-weight: bold } /* Generic.Strong */
+.highlight .kc { color: $blue-light } /* Keyword.Constant */
+.highlight .kd { color: $blue-light } /* Keyword.Declaration */
+.highlight .kn { color: $red-light } /* Keyword.Namespace */
+.highlight .kp { color: $blue-light } /* Keyword.Pseudo */
+.highlight .kr { color: $blue-light } /* Keyword.Reserved */
+.highlight .kt { color: $blue-light } /* Keyword.Type */
+.highlight .ld { color: $yellow } /* Literal.Date */
+.highlight .m { color: $purple-light } /* Literal.Number */
+.highlight .s { color: $yellow } /* Literal.String */
+.highlight .na { color: $green-light } /* Name.Attribute */
+.highlight .nb { color: $grey } /* Name.Builtin */
+.highlight .nc { color: $green-light } /* Name.Class */
+.highlight .no { color: $blue-light } /* Name.Constant */
+.highlight .nd { color: $green-light } /* Name.Decorator */
+.highlight .ni { color: $grey } /* Name.Entity */
+.highlight .ne { color: $green-light } /* Name.Exception */
+.highlight .nf { color: $green-light } /* Name.Function */
+.highlight .nl { color: $grey } /* Name.Label */
+.highlight .nn { color: $grey } /* Name.Namespace */
+.highlight .nx { color: $green-light } /* Name.Other */
+.highlight .py { color: $grey } /* Name.Property */
+.highlight .nt { color: $red-light } /* Name.Tag */
+.highlight .nv { color: $grey } /* Name.Variable */
+.highlight .ow { color: $red-light } /* Operator.Word */
+.highlight .w { color: $grey } /* Text.Whitespace */
+.highlight .mf { color: $purple-light } /* Literal.Number.Float */
+.highlight .mh { color: $purple-light } /* Literal.Number.Hex */
+.highlight .mi { color: $purple-light } /* Literal.Number.Integer */
+.highlight .mo { color: $purple-light } /* Literal.Number.Oct */
+.highlight .sb { color: $yellow } /* Literal.String.Backtick */
+.highlight .sc { color: $yellow } /* Literal.String.Char */
+.highlight .sd { color: $yellow } /* Literal.String.Doc */
+.highlight .s2 { color: $yellow } /* Literal.String.Double */
+.highlight .se { color: $purple-light } /* Literal.String.Escape */
+.highlight .sh { color: $yellow } /* Literal.String.Heredoc */
+.highlight .si { color: $orange-light } /* Literal.String.Interpol */
+.highlight .sx { color: $yellow } /* Literal.String.Other */
+.highlight .sr { color: $yellow } /* Literal.String.Regex */
+.highlight .s1 { color: $yellow } /* Literal.String.Single */
+.highlight .ss { color: $yellow } /* Literal.String.Symbol */
+.highlight .bp { color: $grey } /* Name.Builtin.Pseudo */
+.highlight .vc { color: $grey } /* Name.Variable.Class */
+.highlight .vg { color: $grey } /* Name.Variable.Global */
+.highlight .vi { color: $grey } /* Name.Variable.Instance */
+.highlight .il { color: $purple-light } /* Literal.Number.Integer.Long */
+
+.highlight .gh { } /* Generic Heading & Diff Header */
+.highlight .gu { color: $grey-dark; } /* Generic.Subheading & Diff Unified/Comment? */
+.highlight .gd { color: $red-light; } /* Generic.Deleted & Diff Deleted */
+.highlight .gi { color: $green-light; } /* Generic.Inserted & Diff Inserted */

data/lib/nexmo/oas/renderer/public/assets/stylesheets/sass/typography.scss

@@ -0,0 +1,248 @@
+ul, ol, p, h1, h2, h3, h4, h5, h6, table {
+  pre code {
+    display: inline;
+    border: none;
+    color: inherit;
+    background: none;
+    padding: 0;
+    margin: 0;
+    border-radius: none;
+  }
+}
+
+a {
+  nav &, h1 & {
+    border-bottom: none;
+  }
+}
+
+.center {
+  text-align: center;
+}
+
+.left {
+  text-align: left;
+}
+
+.right {
+  text-align: right;
+}
+
+.indent {
+  margin-left: $spacing * 1.5;
+}
+
+pre.highlight {
+  background: $black;
+  -webkit-font-smoothing: antialiased;
+  padding: $spacing;
+  color: $white;
+  margin-bottom: $spacing;
+  line-height: 1.35;
+  overflow: auto;
+  position: relative;
+  border-radius: 4px;
+
+  code {
+    color: $grey-light;
+  }
+}
+
+pre {
+  font-family: Consolas, monospace;
+  font-size: 16px;
+}
+
+.gutter {
+  color: #5f697c;
+  text-align: right;
+  padding-right: 5px;
+  user-select: none;
+}
+
+.active {
+  color: $blue-dark;
+}
+
+.Nxd-article {
+
+  li ul, li ol {
+    margin-top: 5px;
+  }
+
+  ul {
+    margin-bottom: 15px;
+  }
+
+  ul li {
+    font-size: 1em;
+    margin-bottom: 5px;
+  }
+
+  .tight {
+    margin: 0;
+  }
+}
+
+.tight {
+  margin: 0;
+}
+
+.color-text {
+  color: $text;
+}
+
+.color--warn {
+  color: $orange;
+}
+
+.color--error {
+  color: $red;
+}
+
+.color--success {
+  color: $green;
+}
+
+.meta {
+  display: block;
+  color: mix($stone, $stone-light);
+  text-transform: uppercase;
+  font-weight: 700;
+  font-size: 13px;
+  margin-bottom: 5px;
+}
+
+.tooltip {
+  position: relative;
+  display: inline-block;
+  color: $text-subtle;
+  border-bottom: 1px dotted $stone-light;
+  font-size: 0.95em;
+  cursor: pointer;
+
+  &:before {
+    display: none;
+    content: ' ';
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 0 10px 12px 10px;
+    border-color: transparent transparent $atom transparent;
+    position: absolute;
+    left: 50%;
+    margin-left: -5px;
+    bottom: -12px;
+  }
+
+  &:after {
+    display: none;
+    content: attr(data-text);
+    pointer-events: none;
+    background: $atom;
+    color: $white;
+    padding: $spacing / 2;
+    position: absolute;
+    width: 300px;
+    left: 50%;
+    margin-left: -150px;
+    margin-top: 10px;
+    text-align: center;
+    z-index: 2;
+  }
+
+  &:hover, &:focus {
+    outline: none;
+    color: $pink;
+    border-bottom-color: $pink;
+    &:before, &:after {
+      display: block;
+    }
+  }
+}
+
+.flash {
+  font-size: 1.2em;
+  margin: $spacing 0;
+  color: $pink;
+}
+
+.version {
+  margin-top: $spacing * 2;
+}
+
+.api-path {
+  display: block;
+  border: 2px solid $mint;
+  border-radius: 4px;
+  overflow: hidden;
+  margin-bottom: $spacing;
+  font-size: 1.2em;
+  background: $white;
+
+  .api-path-parameter {
+    color: $pink;
+  }
+
+  .api-path-method {
+    display: inline-block;
+    font-family: Consolas, monospace;
+    color: $blue-dark;
+    background: mix($blue-dark, $white, 5%);
+    border-right: 1px solid mix($blue-dark, $white, 15%);
+    margin-right: 10px;
+    font-weight: 700;
+    padding: 6px $spacing 3px $spacing;
+
+    &--post {
+      color: $green;
+      background: mix($green, $white, 5%);
+      border-right: 1px solid mix($green, $white, 15%);
+    }
+
+    &--delete {
+      color: $red;
+      background: mix($red, $white, 5%);
+      border-right: 1px solid mix($red, $white, 15%);
+    }
+
+    &--update {
+      color: $orange;
+      background: mix($orange, $white, 5%);
+      border-right: 1px solid mix($orange, $white, 15%);
+    }
+  }
+
+  .api-path-host {
+    margin-right: -10px;
+    color: mix($text-subtle, $gray-light);
+  }
+}
+
+.api-reference {
+  b {
+    color: $text-subtle;
+  }
+}
+
+.flag {
+  text-transform: uppercase;
+  font-size: 0.82em;
+  font-weight: 600;
+  color: $blue-dark;
+
+  &--strong {
+    color: $red;
+  }
+}
+
+.subtle {
+  color: $text-subtle;
+}
+
+.truncate {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}

data/lib/nexmo/oas/renderer/public/assets/stylesheets/sass/variables.scss

@@ -0,0 +1,91 @@
+$deep-black: #000000;
+$white: #ffffff;
+
+$orange-lighter: #ffe9cc;
+$orange-light: #ffbc67;
+$orange: #ff8f02;
+$orange-dark: #c05717;
+$orange-darker: #4a1504;
+$orange-text: #594430;
+
+$blue-lighter: #d6eefc;
+$blue-light: #85ccf5;
+$blue: #33aaee;
+$blue-dark: #117bb8;
+$blue-darker: #005282;
+$blue-text: #3e4e57;
+
+$red-lighter: #fde8eb;
+$red-light: #f79ca6;
+$red: #f25a6b;
+$red-dark: #bb3241;
+$red-darker: #330202;
+$red-text: #583c35;
+
+$green-lighter: #d7f2e8;
+$green-light: #86d8b9;
+$green: #35be8b;
+$green-dark: #2d966f;
+$green-darker: #173630;
+$green-text: #414f3e;
+
+$purple-lighter: #f3e7f8;
+$purple-light: #dcb6e9;
+$purple: #c485db;
+$purple-dark: #8f4fa7;
+$purple-darker: #230051;
+$purple-text: #50495a;
+
+$teal-lighter: #dbf3f6;
+$teal-light: #94dbe4;
+$teal: #4cc3d2;
+$teal-dark: #00848e;
+$teal-darker: #003136;
+$teal-text: #405352;
+
+$yellow-lighter: #fff2cc;
+$yellow-light: #f8e71c;
+$yellow: #ffc000;
+$yellow-dark: #9c6f19;
+$yellow-darker: #573b00;
+$yellow-text: #595130;
+
+$indigo-lighter: #e4e6f7;
+$indigo-light: #b3bcf5;
+$indigo: #7683d8;
+$indigo-dark: #5664b5;
+$indigo-darker: #202e78;
+$indigo-text: #3e4155;
+
+$grey-lighter: #f8fafc;
+$grey-light: #e7ebee;
+$grey: #c4cdd5;
+$grey-dark: #919eab;
+$grey-darker: #4e5a64;
+$black: #2c2d30;
+
+$aqua-lighter: #d0e7f1;
+$aqua-light: #9ccde2;
+$aqua: #3298c4;
+$aqua-dark: #0070a1;
+$aqua-darker: #035879;
+$aqua-text: #004059;
+
+$unitN: 0;
+$unit0: 4px;
+$unit1: 8px;
+$unit2: 16px;
+$unit3: 24px;
+$unit4: 32px;
+$unit5: 40px;
+
+$Vlt-font-url: '../../fonts/' !default;
+
+$z-index-dropdowns: 500;
+$z-index-flash: 1000;
+$z-index-modals: 900;
+$z-index-tooltips: 600;
+$z-index-sidenav: 650;
+$z-index-sidenav-mobile: 800; // Sidenav needs to be higher than the header for mobile
+$z-index-sidenav-mobile-trigger: 650; // Sidenav button on mobile needs to be lower than the header for mobile
+$z-index-header: 700;