MODULE-TYPO

- Sass set-up
- md-list
- md-theming (install)

UI/WebServerResources/scss/components/_modules/_article-nav.scss

@@ -0,0 +1,88 @@
+/**
+*
+* Article nav
+*
+**/
+
+.article-nav {
+  overflow: hidden;
+  position: relative;
+
+  &::before {
+    content: '';
+    border-left: 2px solid $colorGrayKeyline;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 50%;
+  }
+}
+
+.article-nav-link {
+  padding: $lineHeight 32px;
+  float: left;
+  width: 50%;
+  position: relative;
+
+  &::before{
+    position: absolute;
+    top: 21px;
+    font-family: $fontHighlight;
+    font-size: $fontMedium;
+    font-weight: 400;
+
+    @include medium {
+      top: 25px;
+      font-size: $fontLarge;
+      display: block;
+      padding: 13px 10px;
+      color: #ffffff;
+      background: $colorBlue;
+    }
+  }
+}
+
+.article-nav p {
+  padding: 0;
+  margin: 0;
+}
+
+.article-nav-link--prev {
+  text-align: right;
+  // border-right-width: 1px;
+
+  &::before {
+    font-family: $fontIcon;
+    @extend .icon-chevron-left::before;
+    left: 32px;
+  }
+
+  p {
+    @include medium {
+      padding-left: 52px;
+    }
+  }
+}
+
+.article-nav-link--next {
+  // border-left-width: 1px;
+
+  &::before {
+    font-family: $fontIcon;
+    @extend .icon-chevron-right::before;
+    right: 32px;
+  }
+
+  p {
+    @include medium {
+      padding-right: 52px;
+    }
+  }
+}
+
+.article-nav-count {
+  @include type--large;
+  font-weight: 700;
+  @include medium {font-weight: 400;}
+}
+

UI/WebServerResources/scss/components/_modules/_articles-section.scss

@@ -0,0 +1,25 @@
+/**
+*
+* Articles section
+*
+**/
+
+.articles-section {
+  background: $colorGrayBackground;
+  text-align: center;
+  padding: $lineHeight 0 $lineHeight*4;
+}
+
+.articles-count {
+  color: $colorBlue;
+  font-family: $fontHighlight;
+  font-weight: 400;
+}
+
+.article-section__icon {
+  top: -($lineHeight);
+
+  @include medium {
+    top: -($lineHeight + $lineHeight/2);
+  }
+}

UI/WebServerResources/scss/components/_modules/_did-you-know.scss

@@ -0,0 +1,56 @@
+/**
+*
+* Text module
+*
+**/
+
+.did-you-know {
+
+  ol {
+    @include medium {
+      padding-top: 0 !important;
+    }
+  }
+
+  .cta--primary {
+    margin-top: $lineHeight;
+    font-weight: 500;
+  }
+
+  &>.g--half {
+    position: relative;
+    padding-left: 0;
+    @include medium {padding-left: 32px}
+  }
+}
+
+.did-you-know__symbol {
+  padding-bottom: $lineHeight*12;
+  @include medium {padding-bottom: $lineHeight}
+
+  &::after {
+    content: $icon-question;
+    color: $colorBlue;
+    font-family: $fontIcon;
+    font-size: 300px;
+    top: 150px;
+    left: 30%;
+    position: relative;
+    display: block;
+    width: 0;
+
+    @include medium {
+      position: absolute;
+      font-size: 400px;
+      top: 200px;
+      left: 110%;
+    }
+
+    @include wide {
+      position: absolute;
+      font-size: 400px;
+      top: 200px;
+      left: 124%;
+    }
+  }
+}

UI/WebServerResources/scss/components/_modules/_editorial-header.scss

@@ -0,0 +1,78 @@
+/**
+*
+* Editorial Header
+*
+**/
+
+.editorial-header {
+  overflow: hidden;
+
+  .breadcrumbs {
+    color: $colorBlue;
+
+    a {
+      color: $colorBlue;
+    }
+  }
+
+  .container {
+
+    @include medium {
+      position: relative;
+
+      // Pseudo elements to add the background characters
+      &::before {
+        content: $icon-chevron-large;
+        font-family: $fontIcon;
+        font-size: 1000px;
+        line-height: 0;
+        display: block;
+        position: absolute;
+        top: 0;
+        right: 100%;
+        color: $colorGrayBackground;
+        margin: 168px -35px 0 0;
+      }
+    }
+  }
+
+}
+
+.editorial-header__excerpt {
+  @include type--medium(true);
+  font-family: $fontHighlight;
+}
+
+.editorial-header .tag{
+  padding-top: $lineHeight*2;
+}
+
+.editorial-header__subtitle {
+  @include type--xxlarge;
+  padding-top: 0;
+  @include medium {
+    padding-top: 0;
+    padding-bottom: $lineHeight;
+  }
+  color: $colorBlue;
+}
+
+.editorial-header__toc {
+  margin-top: $lineHeight;
+
+  ol {
+    padding-top: 0;
+
+    @include medium {
+      padding-top: 0;
+    }
+  }
+}
+
+.editorial-header__toc-title {
+  font-family: $fontHighlight;
+  border-bottom: 1px solid $colorGrayKeyline;
+  margin-bottom: 13px;
+  padding-bottom: 13px !important;
+  color: $colorBlue;
+}

UI/WebServerResources/scss/components/_modules/_featured-section.scss

@@ -0,0 +1,9 @@
+/**
+*
+* Editorial Header
+*
+**/
+
+.featured-section {
+  background: $colorGrayBackground;
+}

UI/WebServerResources/scss/components/_modules/_featured-spotlight.scss

@@ -0,0 +1,61 @@
+/**
+*
+* Editorial Header
+*
+**/
+
+.featured-spotlight {
+  background: $colorGrayDark;
+  color: #ffffff;
+  overflow: hidden;
+  padding-bottom: $lineHeight * 3 - 1;
+  margin-top: $lineHeight * 2;
+
+  p {
+    padding-bottom: $lineHeight;
+  }
+
+  .cta--primary {
+    color: #ffffff;
+
+    &:hover {
+      color: #ffffff;
+    }
+  }
+}
+
+.featured-spotlight__container {
+  position: relative;
+}
+
+.featured-spotlight__img {
+  @include small-only {
+    padding-top: 58.4%;
+    padding-bottom: 0;
+    height: 0;
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+  }
+
+  img {
+    margin: 0 auto;
+    display: block;
+    width: 100%;
+
+    position: absolute;
+    left: 0;
+    top: 0;
+    margin: 0;
+
+    @include medium {
+      width: auto;
+      max-width: none;
+      left: 100% + $mediumGutterWidth * 2;
+    }
+
+    @include wide {
+      left: 100% + $wideGutterWidth * 2;
+    }
+  }
+}

UI/WebServerResources/scss/components/_modules/_guides-section.scss

@@ -0,0 +1,5 @@
+.guides-section {
+  background: $colorGrayBackground;
+  text-align: center;
+  padding: $lineHeight 0 $lineHeight * 4;
+}

UI/WebServerResources/scss/components/_modules/_highlight.scss

@@ -0,0 +1,269 @@
+/**
+*
+* Highlight
+*
+**/
+
+.highlight-module {
+  overflow: hidden;
+  margin-top: $lineHeight * 2;
+  margin-bottom: $lineHeight;
+  position: relative;
+
+  &::after {
+    background: $colorGrayBackground;
+    content: '';
+    height: 100%;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    z-index: 0;
+    width: 100%;
+    right: 0;
+    left: 0;
+  }
+
+  ul,
+  ol {
+    padding-left: 0;
+  }
+}
+
+.highlight-module__container {
+  @include container;
+  padding-bottom: $lineHeight * 3;
+  z-index: 1;
+  @include highlight-symbol();
+
+  @include medium {
+    padding-bottom: $lineHeight * 2;
+  }
+
+  @include wide {
+    min-height: $lineHeight * 8;
+  }
+}
+
+.highlight-module__title {
+  @include type--huge;
+  padding-top: $lineHeight;
+
+  @include wide {
+    @include type--xxlarge;
+  }
+}
+
+.highlight-module__cta {
+  display: block;
+}
+
+
+/*==========  LEARNING  ==========*/
+.highlight-module--learning {
+  color: #ffffff;
+
+  &::after {
+    background-color: $colorLearning;
+  }
+
+  a {
+    color: #ffffff;
+    text-decoration: underline;
+  }
+}
+
+
+/*==========  REMEMBER  ==========*/
+.highlight-module--remember {
+  color: #ffffff;
+
+  &::after {
+    background-color: $colorRemember;
+  }
+
+  a {
+    color: #ffffff;
+    text-decoration: underline;
+  }
+}
+
+
+/*==========  CODE  ==========*/
+.highlight-module--code {
+  overflow: visible;
+  margin-bottom: $lineHeight * 2;
+
+  pre {
+    margin: 0;
+    padding-top: $lineHeight;
+    font-size: $fontBase - 2;
+    line-height: $lineHeight;
+    padding-bottom: 0;
+    padding-left: 0;
+    padding-right: 0;
+
+    span {
+      margin: 0;
+      padding: 0;
+      display: inline-block;
+    }
+  }
+
+  code {
+    margin: 0;
+    padding: 0;
+    word-spacing: -2px;
+    display: block;
+  }
+
+  .highlight-module__container {
+    padding-bottom: 0;
+  }
+
+  .highlight-module__cta {
+    position: absolute;
+    bottom: -$lineHeight;
+  }
+
+}
+
+
+/*==========  LEFT  ==========*/
+.highlight-module--left {
+  &::after {
+    @include wide {
+      width: 80%;
+      right: 20%;
+    }
+  }
+}
+
+
+/*==========  RIGHT  ==========*/
+.highlight-module--right {
+  &::after {
+    @include wide {
+      width: 80%;
+      left: 20%;
+    }
+  }
+
+  &.highlight-module--code {
+    &::after {
+      @include wide {
+        width: 100%;
+        left: 0;
+      }
+    }
+  }
+}
+
+/*==========  INLINE  ==========*/
+.highlight-module--inline {
+  color: $colorText;
+  overflow: visible;
+  margin: $lineHeight 0 0;
+
+  & .highlight-module__container {
+    padding-bottom: 0;
+
+    &::before {
+      display: none;
+    }
+  }
+
+  & .highlight-module__content {
+    border-color: $colorGrayKeyline;
+    border-style: solid;
+    border-width: 1px;
+    border-left-width: 0;
+    border-right-width: 0;
+    margin-bottom: -2px; // Offsetting 2px to considerate border top/bottom - baseline rules.
+    padding:  0 0 $lineHeight;
+  }
+
+  & .highlight-module__title {
+    @include type--large;
+  }
+
+  &.highlight-module--remember {
+    & .highlight-module__title,
+    & li::before {
+      color: $colorRemember;
+    }
+  }
+
+  &.highlight-module--learning {
+    & .highlight-module__title,
+    & li::before {
+      color: $colorLearning;
+    }
+  }
+
+  &::after {
+    display: none !important;
+  }
+}
+
+/*==========  COLORS  ==========*/
+
+div.highlight > pre > code, code .highlight  { background: transparent; }
+div.highlight > pre > code .c, code .highlight .c { color: #999988; font-style: italic } /* Comment */
+div.highlight > pre > code .err, code .highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
+div.highlight > pre > code .k, code .highlight .k { } /* Keyword */
+div.highlight > pre > code .o, code .highlight .o { } /* Operator */
+div.highlight > pre > code .cm, code .highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
+div.highlight > pre > code .cp, code .highlight .cp { color: $colorGray; } /* Comment.Preproc */
+div.highlight > pre > code .c1, code .highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
+div.highlight > pre > code .cs, code .highlight .cs { color: $colorGray; font-style: italic } /* Comment.Special */
+div.highlight > pre > code .gs, code .highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
+div.highlight > pre > code .gd .x, code .highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */
+div.highlight > pre > code .ge, code .highlight .ge { font-style: italic } /* Generic.Emph */
+div.highlight > pre > code .gr, code .highlight .gr { color: #aa0000 } /* Generic.Error */
+div.highlight > pre > code .gh, code .highlight .gh { color: $colorGray } /* Generic.Heading */
+div.highlight > pre > code .gi, code .highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
+div.highlight > pre > code .gi .x, code .highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */
+div.highlight > pre > code .go, code .highlight .go { color: #888888 } /* Generic.Output */
+div.highlight > pre > code .gp, code .highlight .gp { color: #555555 } /* Generic.Prompt */
+div.highlight > pre > code .gs, code .highlight .gs { } /* Generic.Strong */
+div.highlight > pre > code .gu, code .highlight .gu { color: #aaaaaa } /* Generic.Subheading */
+div.highlight > pre > code .gt, code .highlight .gt { color: #aa0000 } /* Generic.Traceback */
+div.highlight > pre > code .kc, code .highlight .kc { } /* Keyword.Constant */
+div.highlight > pre > code .kd, code .highlight .kd { } /* Keyword.Declaration */
+div.highlight > pre > code .kp, code .highlight .kp { } /* Keyword.Pseudo */
+div.highlight > pre > code .kr, code .highlight .kr { } /* Keyword.Reserved */
+div.highlight > pre > code .kt, code .highlight .kt { color: #445588; } /* Keyword.Type */
+div.highlight > pre > code .m, code .highlight .m { color: #009999 } /* Literal.Number */
+div.highlight > pre > code .s, code .highlight .s { color: $colorLearning } /* Literal.String */
+div.highlight > pre > code .na, code .highlight .na { color: #008080 } /* Name.Attribute */
+div.highlight > pre > code .nb, code .highlight .nb { color: #0086B3 } /* Name.Builtin */
+div.highlight > pre > code .nc, code .highlight .nc { color: #445588; } /* Name.Class */
+div.highlight > pre > code .no, code .highlight .no { color: #008080 } /* Name.Constant */
+div.highlight > pre > code .ni, code .highlight .ni { color: #800080 } /* Name.Entity */
+div.highlight > pre > code .ne, code .highlight .ne { color: #990000; } /* Name.Exception */
+div.highlight > pre > code .nf, code .highlight .nf { color: #990000; } /* Name.Function */
+div.highlight > pre > code .nn, code .highlight .nn { color: #555555 } /* Name.Namespace */
+div.highlight > pre > code .nt, code .highlight .nt { color: $colorRemember } /* Name.Tag */
+div.highlight > pre > code .nv, code .highlight .nv { color: #008080 } /* Name.Variable */
+div.highlight > pre > code .ow, code .highlight .ow { } /* Operator.Word */
+div.highlight > pre > code .w, code .highlight .w { color: #bbbbbb } /* Text.Whitespace */
+div.highlight > pre > code .mf, code .highlight .mf { color: #009999 } /* Literal.Number.Float */
+div.highlight > pre > code .mh, code .highlight .mh { color: #009999 } /* Literal.Number.Hex */
+div.highlight > pre > code .mi, code .highlight .mi { color: #009999 } /* Literal.Number.Integer */
+div.highlight > pre > code .mo, code .highlight .mo { color: #009999 } /* Literal.Number.Oct */
+div.highlight > pre > code .sb, code .highlight .sb { color: $colorLearning } /* Literal.String.Backtick */
+div.highlight > pre > code .sc, code .highlight .sc { color: $colorLearning } /* Literal.String.Char */
+div.highlight > pre > code .sd, code .highlight .sd { color: $colorLearning } /* Literal.String.Doc */
+div.highlight > pre > code .s2, code .highlight .s2 { color: $colorLearning } /* Literal.String.Double */
+div.highlight > pre > code .se, code .highlight .se { color: $colorLearning } /* Literal.String.Escape */
+div.highlight > pre > code .sh, code .highlight .sh { color: $colorLearning } /* Literal.String.Heredoc */
+div.highlight > pre > code .si, code .highlight .si { color: $colorLearning } /* Literal.String.Interpol */
+div.highlight > pre > code .sx, code .highlight .sx { color: $colorLearning } /* Literal.String.Other */
+div.highlight > pre > code .sr, code .highlight .sr { color: #009926 } /* Literal.String.Regex */
+div.highlight > pre > code .s1, code .highlight .s1 { color: $colorLearning } /* Literal.String.Single */
+div.highlight > pre > code .ss, code .highlight .ss { color: #990073 } /* Literal.String.Symbol */
+div.highlight > pre > code .bp, code .highlight .bp { color: $colorGray } /* Name.Builtin.Pseudo */
+div.highlight > pre > code .vc, code .highlight .vc { color: #008080 } /* Name.Variable.Class */
+div.highlight > pre > code .vg, code .highlight .vg { color: #008080 } /* Name.Variable.Global */
+div.highlight > pre > code .vi, code .highlight .vi { color: #008080 } /* Name.Variable.Instance */
+div.highlight > pre > code .il, code .highlight .il { color: #009999 } /* Literal.Number.Integer.Long */

UI/WebServerResources/scss/components/_modules/_in-this-guide.scss

@@ -0,0 +1,15 @@
+/**
+*
+* In this guide
+*
+**/
+
+.in-this-guide {
+  margin-top: - $lineHeight * 3;
+}
+
+.in-this-guide__title {
+  @include type--medium(true);
+  font-family: $fontHighlight;
+  margin-bottom: $lineHeight;
+}

UI/WebServerResources/scss/components/_modules/_next-lessons.scss

@@ -0,0 +1,79 @@
+/**
+*
+* Next Lessons
+*
+**/
+
+.next-lessons {
+  background: $colorGrayDark;
+  padding: $lineHeight $lineHeight $lineHeight * 2;
+  margin-top: $lineHeight;
+  color: #ffffff;
+  position: relative;
+
+  h3 {
+    i {
+      @include medium {
+        display: none;
+      }
+    }
+  }
+
+  &::before,
+  &::after {
+    color: rgba(255, 255, 255, 0.5);
+    position: absolute;
+    display: none;
+
+    @include medium {
+      display: inline-block;
+    }
+  }
+
+  &::before {
+    @include medium {
+      content: attr(data-current-lesson);
+
+      font-family: $fontHighlight;
+      font-size: $fontBase;
+      font-weight: 400;
+      line-height: 1;
+
+      background: $colorGrayDark;
+      display: inline-block;
+      padding: 5px 7px;
+
+      right: 127px;
+      top: 143px;
+
+      z-index: 1;
+      color: rgba(255, 255, 255, 0.5);
+    }
+
+    @include wide {
+      font-size: $fontMedium;
+      padding-left: 15px;
+      padding-right: 15px;
+      top: 126px;
+      right: 230px;
+    }
+
+  }
+
+  &::after {
+    @include medium {
+      content: $icon-lessons;
+      font-family: $fontIcon;
+      font-size: 150px;
+
+      right: 40px;
+      top: 185px;
+    }
+
+    @include wide {
+      font-size: 210px;
+      right: 120px;
+    }
+
+  }
+}

UI/WebServerResources/scss/components/_modules/_page-header.scss

@@ -0,0 +1,32 @@
+/**
+*
+* Page header
+*
+**/
+
+.page-header {
+  text-align: center;
+
+  .breadcrumbs {
+    text-align: left;
+    color: $colorBlue;
+
+    a {
+      color: $colorBlue;
+    }
+  }
+
+  h3 {
+    color: $colorGrayDark;
+    padding-top: $lineHeight * 2;
+  }
+}
+
+.page-header__excerpt {
+  position: relative;
+  padding-top: 0;
+
+  &:last-child {
+    padding-bottom: $lineHeight * 3;
+  }
+}

UI/WebServerResources/scss/components/_modules/_quote.scss

@@ -0,0 +1,44 @@
+/**
+*
+* Quote
+*
+**/
+
+.quote__content {
+  position: relative;
+  font-family: $fontHighlight;
+  @include type--medium;
+  padding-top: $lineHeight * 4;
+  padding-left: $lineHeight;
+
+  @include medium {
+    padding-top: $lineHeight * 2;
+    padding-left: 0;
+  }
+
+  p {
+    border-top: 1px solid $colorGrayKeyline;
+    text-align: right;
+    font-weight: 500;
+    margin-top: $lineHeight/2 - 1;
+    padding-top: $lineHeight/2;
+  }
+
+  &::before {
+    content: open-quote;
+    display: block;
+    position: absolute;
+    font-family: $fontHighlight;
+    font-weight: 700;
+    color: $colorGrayBackground;
+    top: 90px;
+    left: $lineHeight;
+    font-size: 260px;
+
+    @include medium {
+      top: 225px;
+      left: -210px;
+      font-size: 540px;
+    }
+  }
+}

UI/WebServerResources/scss/components/_modules/_related-guides.scss

@@ -0,0 +1,41 @@
+/**
+*
+* Related items
+*
+**/
+
+.related-guides {
+  margin-top: $lineHeight*3;
+  padding-bottom: ($lineHeight*2) - 2;
+  border-top: 2px solid $colorGrayKeyline;
+  padding-top: ($lineHeight*2) - 2;
+}
+
+.related-guides__list {
+  .list-links {
+    padding-top: 0;
+  }
+
+  a {
+    display: block;
+  }
+}
+
+.related-guides__title {
+  @include type--xlarge;
+  padding-top: 0;
+
+  @include medium {
+    padding-top: 0;
+  }
+}
+
+.related-guides__main-link {
+  text-transform: uppercase;
+
+  &::before {
+    content: '#';
+    display: inline-block;
+    padding-right: 2px;
+  }
+}

UI/WebServerResources/scss/components/_modules/_related-items.scss

@@ -0,0 +1,19 @@
+/**
+*
+* Related items
+*
+**/
+
+.related-items {
+  background-color: $colorGrayDark;
+  color: #ffffff;
+  padding-bottom: $lineHeight * 2;
+  margin-top: $lineHeight * 2;
+
+  .list-links {
+    a {
+      color: #ffffff;
+    }
+  }
+
+}

UI/WebServerResources/scss/components/_modules/_summary-header.scss

@@ -0,0 +1,29 @@
+/**
+*
+* Editorial Header
+*
+**/
+
+.summary-header {
+  background-color: $colorBlue;
+  padding-bottom: $lineHeight * 3;
+  color: #ffffff;
+  margin-bottom: $lineHeight;
+  box-shadow: inset 0 2px 0 0 #fff;
+
+  .breadcrumbs__link {
+    color: #ffffff;
+  }
+
+}
+
+.summary-header__anchor-list {
+  margin-top: $lineHeight * 2;
+}
+
+
+.summary-header__anchors-item {
+  & a {
+    color: #ffffff;
+  }
+}

UI/WebServerResources/scss/components/_modules/_toc.scss

@@ -0,0 +1,34 @@
+/**
+*
+* Table of contents
+*
+**/
+
+.toc__title {
+  @include type--medium;
+  font-family: $fontHighlight;
+  padding-bottom: $lineHeight/2;
+  margin-bottom: ($lineHeight/2) - 1;
+  border-bottom: 1px solid $colorGrayKeyline;
+
+  @include medium {
+    padding-bottom: $lineHeight/2;
+    margin-bottom: $lineHeight/2;
+  }
+}
+
+.toc__list {
+  padding-top: 0;
+
+  border-bottom: 1px solid $colorGrayKeyline;
+  padding-bottom: ($lineHeight/2) - 1;
+  margin-bottom: $lineHeight/2;
+
+  a {
+    display: block;
+  }
+}
+
+.toc__sublist {
+  padding-top: 0;
+}