From 7f67a2926d30af8f3ea6f1f877850dc00fa2d87e Mon Sep 17 00:00:00 2001
From: Maya Gao <mayagao@users.noreply.github.com>
Date: Fri, 16 Dec 2016 16:11:47 -0800
Subject: iOS jazzy theme improvements (#7422)

some small improvements to the theme
---
 .../darwin/docs/theme/assets/css/jazzy.css.scss    | 275 ++++++++++++++-------
 1 file changed, 183 insertions(+), 92 deletions(-)

(limited to 'platform/darwin/docs/theme/assets/css/jazzy.css.scss')

diff --git a/platform/darwin/docs/theme/assets/css/jazzy.css.scss b/platform/darwin/docs/theme/assets/css/jazzy.css.scss
index 99eebd0572..cad4764d50 100644
--- a/platform/darwin/docs/theme/assets/css/jazzy.css.scss
+++ b/platform/darwin/docs/theme/assets/css/jazzy.css.scss
@@ -5,7 +5,7 @@
 // ===========================================================================
 
 $body_background: #fff;
-$body_font: 15px/25px 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+$body_font: 14px/25px 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 $text_color: #333;
 $gray_border: 1px solid #ddd;
 
@@ -18,9 +18,15 @@ $link_hover_color: #63b6e5;
 $table_alt_row_color: #fbfbfb;
 $table_border_color: #ddd;
 
-$code_bg_color: #f6f6f6;
+$color_light: #F5F8FC;
+$color_darkblue: #0B293A;
+$color_brightblue: #3A68D8;
+$color_darkblue_lighten: rgba(11, 41, 58, 0.75);
+$keyline_color: rgba(12, 40, 73, 0.08);
 $code_font: Menlo, Bitstream Vera Sans Mono, Monaco, Consolas, monospacee;
 
+$purple: #9595D1;
+$blue: #4092C5;
 
 // ----- Layout
 
@@ -34,38 +40,29 @@ $navigation_max_width: 300px;
 $header_weight: normal;
 $header_color: #555;
 $header_font: 'Open Sans Bold', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-$header_bg_color: #3887be;
 $header_link_color: #fff;
 $doc_coverage_color: #999;
 
 
-// ----- Breadcrumbs
-
-$breadcrumbs_bg_color: #fbfbfb;
-$breadcrumbs_border_color: #ddd;
-
-
 // ----- Navigation
 
 $navigation_max_width: 300px;
 $navigation_bg_color: #fbfbfb;
-$navigation_border_color: #ddd;
-$navigation_title_color: rgba(0, 0, 0, 0.5);
 $navigation_task_color: $link_color;
 
-$section_name_color: $navigation_title_color;
+$section_name_color: $color_darkblue;
 
 // ----- Content
 
 $declaration_title_language_color: #4183c4;
-$declaration_language_border: 5px solid #cde9f4;
+$declaration_language_border: 4px solid $color_brightblue;
 $declaration_bg_color: #fdfeff;
 $declaration_border_color: #ddd;
 
 $aside_color: #aaa;
-$aside_border: 5px solid lighten($aside_color, 20%);
+$aside_border: 4px solid lighten($aside_color, 20%);
 $aside_warning_color: #ff0000;
-$aside_warning_border: 5px solid lighten($aside_warning_color, 20%);
+$aside_warning_border: 4px solid lighten($aside_warning_color, 20%);
 
 // ----- Footer
 
@@ -86,9 +83,8 @@ $footer_link_color: #555;
 body {
   margin: 0;
   background: $body_background;
-  color: $text_color;
+  color: $color_darkblue;
   font: $body_font;
-  letter-spacing: .2px;
   -webkit-font-smoothing: antialiased;
   box-sizing: border-box;
 }
@@ -99,16 +95,16 @@ body {
   font-family: $header_font;
   font-size: $font-size;
   font-weight: $header_weight;
-  color: $header_color;
+  color: $color_darkblue;
   margin: $margin;
 }
 
 h1 {
-  @include heading(2.0rem, 0.5em 0 0.6em);
+  @include heading(1.7rem, 0.5em 0 0.6em);
 }
 
 h1 a {
-  color: $header_color;
+  color: $color_darkblue;
 }
 
 h2 {
@@ -116,7 +112,7 @@ h2 {
 }
 
 h3 {
-  @include heading(1rem, 1em 0 0.3em);
+  @include heading(14px, 1em 0 0.3em);
 }
 
 h4 {
@@ -132,10 +128,19 @@ p {
 }
 
 ul, ol {
-  padding: 0 0 0 2em;
+  padding: 0 0 0 1.5em;
   margin: 0 0 0.85em;
 }
 
+ul.item-container {
+  padding: 0px;
+}
+
+ul:first-of-type,
+ol:first-of-type {
+  margin: 0px;
+}
+
 blockquote {
   margin: 0 0 0.85em;
   padding: 0 15px;
@@ -153,11 +158,9 @@ img {
 a {
   color: $link_color;
   text-decoration: none;
-
-  &:hover, &:focus {
-    color: $link_hover_color;
+  > *:hover, &:hover, &:focus {
+    opacity: 0.7;
   }
-  
   &:focus {
     box-shadow:inset 0 0 0 1px rgba(0,0,0,0.05);
   }
@@ -168,21 +171,17 @@ a {
 table {
   background: $body_background;
   width: 100%;
+  font-size: 13px;
+  line-height: 23px;
   border-collapse: collapse;
   border-spacing: 0;
   overflow: auto;
   margin: 0 0 0.85em;
 }
 
-tr {
-  &:nth-child(2n) {
-    background-color: $table_alt_row_color;
-  }
-}
-
 th, td {
   padding: 6px 13px;
-  border: 1px solid $table_border_color;
+  border: 1px solid $keyline_color;
 }
 
 
@@ -192,29 +191,33 @@ pre {
   margin: 0 0 1.275em;
   padding: .85em 1em;
   overflow: auto;
-  background: $code_bg_color;
+  background: $color_light;
   font-family: $code_font;
   border-radius: 4px;
 }
 
 code {
   font-family: $code_font;
-  font-size: .85em;
+  font-size: 13px;
   line-height: .85em;
 }
 
 p, li {
   > code {
-    background: $code_bg_color;
-    padding: .2em;
+    background: $color_light;
+    padding: 0.1em 0.2em;
+    font-weight: bold;
+    border: 1px solid #D5D5D5;
     border-radius: 4px;
-    &:before, &:after {
-      letter-spacing: -.35em;
-      content: "\00a0";
-    }
   }
 }
 
+td > code,
+.graybox code {
+  font-weight: bold;
+  font-size: 12px;
+}
+
 pre code {
   padding: 0;
   white-space: pre;
@@ -234,7 +237,14 @@ pre code {
     flex-direction: row;
   }
 }
-
+.limiter {
+  max-width: 1360px;
+  margin: auto;
+  padding: 0px 30px;
+}
+.space-right2 {
+  margin-right: 20px;
+}
 
 // ===========================================================================
 //
@@ -242,17 +252,31 @@ pre code {
 //
 // ===========================================================================
 
+.header-container {
+  background: $color_brightblue;
+}
 .header {
   display: flex;
-  padding: $gutter/2;
-  font-size: 0.875em;
-  background: $header_bg_color;
+  padding: 12px 0px;
+  font-size: 12px;
   color: $doc_coverage_color;
+  @media (max-width: 768px) {
+    display: block;
+  }
 }
+.header-tag {
+  vertical-align: text-top;
+  line-height: 10px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  padding: 2px 5px;
+  margin-left: 5px;
+  opacity: 0.9;
 
+}
 .header-col {
-  margin: 0;
-  padding: 0 $gutter/2
+  margin: 5px 0 0 0;
+  padding: 0
 }
 
 .header-col--primary {
@@ -260,11 +284,12 @@ pre code {
 }
 
 .header-link {
+  font-family: $header_font;
   color: $header_link_color;
 }
 
 .header-image, .header-icon {
-  padding-right: 6px;
+  padding-right: 2px;
   vertical-align: -4px;
   height: 16px;
 }
@@ -276,11 +301,11 @@ pre code {
 // ===========================================================================
 
 .breadcrumbs {
-  font-size: 0.875em;
-  padding: $gutter / 2 $gutter;
+  font-size: 13px;
+  padding: $gutter / 2 0px;
   margin: 0;
-  background: $breadcrumbs_bg_color;
-  border-bottom: 1px solid $breadcrumbs_border_color;
+  background: $color_light;
+  border-bottom: 1px solid $keyline_color;
 }
 
 .carat {
@@ -297,18 +322,17 @@ pre code {
 
 .navigation {
   order: 2;
-
+  font-size: 13px;
+  padding-top: 20px;
   @media (min-width: 768px) {
     order: 1;
     width: 25%;
     min-width: $navigation_min_width;
     max-width: $navigation_max_width;
     padding-bottom: $gutter*4;
-    font-size: 12px;
     line-height: 20px;
     overflow: hidden;
-    background: $navigation_bg_color;
-    border-right: 1px solid $navigation_border_color;
+    border-right: 1px solid $keyline_color;
   }
 }
 
@@ -318,18 +342,20 @@ pre code {
 }
 
 .nav-group-name {
-  border-bottom: 1px solid $navigation_border_color;
-  padding: $gutter/2 0 $gutter/2 $gutter;
+  padding: $gutter/2 0 $gutter/2 0px;
 }
 
-.nav-group-name-link {
+.small-heading, h4 {
+  font-size: 13px;
   font-family: $header_font;
-  color: $navigation_title_color;
+  text-transform: uppercase;
+  color: $color_darkblue;
+  letter-spacing: 1px;
 }
 
 .nav-group-tasks {
   margin: $gutter/2 0;
-  padding: 0 0 0 $gutter/2;
+  padding: 0 0 0 0;
 }
 
 .nav-group-task {
@@ -342,9 +368,8 @@ pre code {
 }
 
 .nav-group-task-link {
-   color: $navigation_task_color;
+   color: $color_darkblue_lighten;
 }
-
 // ===========================================================================
 //
 //  Content
@@ -362,18 +387,20 @@ pre code {
 }
 
 .section {
-  padding: 0 $gutter * 2;
-  border-bottom: 1px solid $navigation_border_color;
+  padding: 0px 20px;
+  @media (max-width: 768px) {
+    padding: inherit;
+  }
 }
 
 .section-content {
   margin: 0 auto;
   padding: $gutter 0;
+  border-bottom: 1px solid $keyline_color;
 }
 
 .section-content img {
   margin: 0 auto;
-  display: block;
 }
 
 .section-name {
@@ -381,14 +408,29 @@ pre code {
   display: block;
 }
 
+.anchor-icon {
+  margin-left: 4px;
+  opacity: 0.7;
+  display: inline-block;
+  background: url("../img/link.svg");
+  background-repeat: no-repeat;
+  width: 10px;
+  height: 10px;
+}
+
+h1 > .anchor-icon { margin-bottom: 2px; }
 .declaration .highlight {
+  font-size: 15px;
   overflow-x: initial; // This allows the scrollbar to show up inside declarations
   padding: $gutter/2 0;
+  line-height: 20px;
   margin: 0;
   background-color: transparent;
   border: none;
 }
 
+.highlight a { text-decoration: underline; }
+
 .task-group-section {
   border-top: $gray_border;
 }
@@ -406,10 +448,7 @@ pre code {
   }
 }
 
-.item-container { }
-
 .item {
-  padding-top: 8px;
   width: 100%;
   list-style-type: none;
 
@@ -421,19 +460,42 @@ pre code {
   }
 
   .token {
-    padding-left: 3px;
     margin-left: 0px;
-    font-size: 1em;
-    word-break: break-all;
+    font-size: 13px;
+    display: flex;
+    padding: 5px 0px;
+    line-height: 14px;
+  }
+  .token-name {
+    display: inline-block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .token-icon {
+    background: url('../img/plus.svg');
+    width: 17px;
+    display: inline-block;
+    vertical-align: middle;
+    height: 13px;
+    opacity: 1;
+    margin-left: 5px;
+    background-repeat: no-repeat;
+  }
+  .token-icon-minus {
+    background: url('../img/minus.svg');
+    background-repeat: no-repeat;
   }
 
   .declaration-note {
-    font-size: .85em;
+    font-size: 13px;
     color: #808080;
     font-style: italic;
   }
+
 }
 
+
 .pointer-container {
   border-bottom: $gray_border;
   left: -23px;
@@ -462,9 +524,10 @@ pre code {
   overflow: hidden;
   .section {
     background: $declaration_bg_color;
-    border: $gray_border;
-    border-top-width: 0;
-    padding: $gutter / 1.5 $gutter;
+    border: 1px solid $keyline_color;
+    padding: 15px 20px;
+    border-radius: 4px;
+    margin: 10px 0px 30px;
   }
 }
 
@@ -474,12 +537,14 @@ pre code {
   border-left: $aside_border;
   overflow-y: hidden;
   .aside-title {
-    font-size: 9px;
+    font-size: 10px;
+    font-family: $header_font;
     letter-spacing: 2px;
     text-transform: uppercase;
-    padding-bottom: 0;
+    padding: 2px 8px;
+    display: inline;
+    border-radius: 4px;
     margin: 0;
-    color: $aside_color;
     -webkit-user-select: none;
   }
   p:last-child {
@@ -488,9 +553,16 @@ pre code {
 }
 
 .language {
+  background: $color_light;
+  border-radius: 4px;
   border-left: $declaration_language_border;
+}
+
+.aside.aside-see, .aside.aside-note, {
+  background: $color_light;
+  border-radius: 4px;
   .aside-title {
-    color: $declaration_title_language_color;
+    padding-left: 0px;
   }
 }
 
@@ -502,15 +574,17 @@ pre code {
 }
 
 .graybox {
-  border-collapse: collapse;
   width: 100%;
+  border-collapse:separate;
+  border:solid $keyline_color 1px;
+  border-radius:6px;
+  -moz-border-radius:6px;
   p {
     margin: 0;
     word-break: break-word;
     min-width: 50px;
   }
   td {
-    border: $gray_border;
     padding: 5px 25px 5px 10px;
     vertical-align: middle;
   }
@@ -520,15 +594,19 @@ pre code {
     vertical-align: top;
     word-break: normal;
     width: 40px;
+    border-left: none;
+    border-top: none;
+  }
+  th, td {
+    border-right:none;
+    border-top: none;
+  }
+  td:first-child, th:first-child {
+     border-left: none;
+  }
+  tr:last-of-type td {
+    border-bottom: none;
   }
-}
-
-.slightly-smaller {
-  font-size: 0.9em;
-}
-
-.show-on-github {
-  font-variant: small-caps;
 }
 
 .show-on-github-icon {
@@ -538,6 +616,12 @@ pre code {
   padding-left: 2px;
 }
 
+.show-on-github a {
+  margin: 10px 0 10px;
+  display: inline-block;
+  font-size: 13px;
+}
+
 
 // ===========================================================================
 //
@@ -546,10 +630,9 @@ pre code {
 // ===========================================================================
 
 .footer {
-  border-top: 1px $navigation_border_color solid;
+  border-top: 1px $keyline_color solid;
   padding: $gutter/2 $gutter;
   color: $footer_text_color;
-  font-size: 0.8em;
 
   p {
     display: inline;
@@ -598,3 +681,11 @@ html.dash {
     src:url('../fonts/opensans-bold.eot#iefix') format('embedded-opentype'),
         url('../fonts/opensans-bold.woff') format('woff');
   }
+
+
+.strong { font-family: $header_font;}
+.text-purple { color: $purple; }
+.text-blue { color: $blue; }
+.keyline-purple { border-color: $purple; }
+.keyline-blue { border-color: $blue; }
+
-- 
cgit v1.2.1