swedbank-pay-design-guide-jekyll-theme 1.5.1.pre.article.pre.no.pre.main0001

data/_assets/scss/swedbank-pay-design-guide-theme.scss

@@ -0,0 +1,290 @@
+@import 'colors.scss';
+@import 'fonts.scss';
+@import 'variables.scss';
+
+@import 'card.scss';
+@import 'code-view.scss';
+@import 'front-page.scss';
+@import 'heading.scss';
+@import 'paragraph-highlight.scss';
+@import 'sidebar.scss';
+@import 'title-header.scss';
+
+$bg: #f5f2f0;
+$darkened-bg: darken($bg, 10%);
+
+img {
+    max-width: 100%;
+}
+
+.table {
+
+    th,
+    td {
+        >.material-icons {
+            float: none;
+        }
+    }
+}
+
+.jumbotron {
+    /* TODO: Make .jumbotron @extend .slab. */
+    font-family: Roboto, sans-serif;
+    font-size: 21px;
+    font-weight: 1;
+    min-height: 1rem;
+    padding: 3rem;
+    margin-bottom: 1rem;
+    border-radius: 4px;
+    background-color: #ebe7e2;
+
+    strong {
+        font-weight: bold;
+    }
+
+    p:last-of-type {
+        margin-bottom: 0;
+    }
+}
+
+a[href ^='//']:not([href *='{{ site.url }}']):after,
+a[href ^='http://']:not([href *='{{ site.url }}']):after,
+a[href ^='https://']:not([href *='{{ site.url }}']):after {
+    content: url('../img/external-url.svg');
+    margin-left: .3rem;
+    display: inline-block;
+    width: .8rem;
+    background-repeat: none;
+    color: #257886;
+
+    &.front-page-demoshop {
+        display: none;
+    }
+}
+
+#designguide .designguide-header .topbar-info a {
+    margin-left: 5px;
+    color: rgba(34, 34, 34, .75);
+    fill: rgba(34, 34, 34, .75);
+    border: none
+}
+
+#designguide .designguide-header .topbar-info a:after {
+    content: none;
+    display: inline;
+}
+
+#designguide .designguide-header .topbar-info a svg {
+    overflow: visible;
+    width: 2rem;
+    height: 2rem;
+    display: inline-block;
+    vertical-align: top;
+}
+
+#designguide .designguide-header .topbar-info a:hover {
+    color: rgba(0, 0, 0, .75);
+    fill: rgba(0, 0, 0, .75)
+}
+
+.iterator {
+    margin: 1rem 0;
+}
+
+.iterator a.btn {
+    justify-content: center;
+    width: 49%;
+    min-width: 8rem;
+}
+
+.iterator a.btn[rel='prev']:before {
+    content: '❮';
+    position: absolute;
+    left: 1rem;
+}
+
+.iterator a.btn[rel='next']:after {
+    content: '❯';
+    position: absolute;
+    right: 1rem;
+}
+
+#designguide {
+    .dg-sidebar {
+        border-right: 1px solid $background-gray;
+
+        .main-nav-ul {
+            border-bottom: 1px solid $background-gray;
+        }
+    }
+}
+
+.documentation {
+    code[data-processed='true'].language-mermaid {
+        background: none;
+        border: none;
+        padding: 0px
+    }
+
+    .highlighter-rouge {
+        margin-bottom: 1rem;
+
+        code {
+            padding: 0;
+            background-color: none;
+            border: none;
+            font-size: 1rem;
+        }
+
+        pre.highlight {
+            background-color: #f5f2f0;
+            margin: 0;
+        }
+
+        .rouge-table {
+            position: relative;
+
+            &,
+            tbody,
+            tr {
+                display: block;
+            }
+
+            pre {
+                font-family: 'Akkurat Mono', monospace;
+            }
+
+            .rouge-gutter {
+                text-align: right;
+                padding: 0 .7rem;
+                position: absolute;
+                left: 0;
+                top: 0;
+                background-color: #f5f2f0;
+                border-right: 1px solid #e1d7d1;
+            }
+
+            .rouge-code {
+                padding-left: 50px;
+                display: block;
+                overflow-x: auto;
+            }
+        }
+    }
+
+    .no-padding {
+        padding: 0;
+        padding-bottom: 5rem;
+    }
+
+    .normal-padding {
+        padding: 3rem 1rem 5rem;
+    }
+
+    .max-width {
+        max-width: $max-width;
+    }
+
+    .max-width-card-overview {
+        max-width: 880px;
+    }
+
+
+    .language-mermaid {
+        $apricot: #fbf2ea;
+        $pink: #efb7b6;
+        $brand-info-light: #e8eff9;
+        $brand-success-light: #f2f7eb;
+        $darker-apricot: darken($apricot, 10%);
+        $black: #222;
+        $brown: #2f2424;
+
+        svg {
+            width: 100% !important;
+            height: 100%;
+        }
+
+        rect.actor {
+            fill: $apricot !important;
+            stroke: $darker-apricot !important;
+        }
+
+        .activation0,
+        .activation1,
+        .activation2 {
+            fill: $brand-success-light !important;
+            stroke: darken($brand-success-light, 10%) !important;
+        }
+
+        text.actor {
+            font-family: Arial, sans-serif !important;
+            font-size: 1rem !important;
+        }
+
+        .actor-line {
+            stroke: $apricot !important;
+            stroke-width: 4 !important;
+        }
+
+        .messageLine0 {
+            stroke-width: 2 !important;
+            stroke-dasharray: "2 2";
+            marker-end: "url(#arrowhead)";
+            stroke: $black !important;
+        }
+
+        .messageLine1 {
+            stroke-width: 1.5;
+            stroke-dasharray: "2 2";
+            stroke: $brown !important;
+        }
+
+        #arrowhead {
+            fill: $brown !important;
+        }
+
+        .messageText {
+            fill: $black !important;
+            stroke: none;
+            font-family: Arial, sans-serif !important;
+            font-size: 1rem !important;
+        }
+
+        .labelBox {
+            stroke: $pink !important;
+            fill: $pink !important;
+        }
+
+        .labelText {
+            fill: $black !important;
+            stroke: none;
+            font-family: Arial, sans-serif !important;
+        }
+
+        .loopText {
+            fill: $black !important;
+            stroke: none;
+            font-family: Arial, sans-serif !important;
+            font-size: 1rem !important;
+        }
+
+        .loopLine {
+            stroke-width: 2;
+            stroke-dasharray: "2 2";
+            marker-end: "url(#arrowhead)";
+            stroke: $pink !important;
+        }
+
+        .note {
+            stroke: darken($brand-info-light, 20%) !important;
+            fill: $brand-info-light !important;
+        }
+
+        .noteText {
+            fill: $black !important;
+            stroke: none;
+            font-family: Arial, sans-serif !important;
+            font-size: 1rem !important;
+        }
+    }
+}

data/_assets/scss/title-header.scss

@@ -0,0 +1,39 @@
+@import 'colors.scss';
+
+.title-header {
+    display: flex;
+    justify-content: center;
+    background-color: $dark-brown;
+
+    .title-header-container {
+        width: 100%;
+        padding: 3rem 1rem;
+
+        h1,
+        h4,
+        p {
+            color: $white;
+        }
+
+        h1 {
+            margin-top: 0;
+        }
+
+        p {
+            font-size: 1.125rem;
+        }
+
+        .title-header-estimated-read {
+            color: $yellow;
+            display: flex;
+            margin-bottom: 0.75rem;
+
+            i {
+                margin-right: 0.5rem;
+            }
+        }
+    }
+
+
+
+}

data/_assets/scss/variables.scss

@@ -0,0 +1 @@
+$max-width: 704px;

data/_includes/alert.html

@@ -0,0 +1,34 @@
+{% assign type = include.type | default: 'default' %}
+{% assign type_class = 'alert-' | append: type %}
+{% assign icon = include.icon | strip %}
+{% assign header = include.header | markdownify | remove: '<p>' | remove: '</p>' | strip %}
+{% assign body = include.body | markdownify | remove: '<p>' | remove: '</p>' | strip %}
+
+<div
+    class="alert {% if header != blank and header != empty and header != nil %}alert-complex{% endif %} {{ type_class }}">
+    {% if header != blank and header != empty and header != nil %}
+    <header class="alert-header">
+        {% if icon != blank and icon != empty and icon != nil %}
+        <i class="material-icons alert-icon">{{ icon }}</i>
+        {% endif %}
+
+        {% if header != blank and header != empty and header != nil %}
+        <h3>{{ header }}</h3>
+        {% endif %}
+    </header>
+    {% else %}
+    {% if icon != blank and icon != empty and icon != nil %}
+    <i class="material-icons alert-icon">{{ icon }}</i>
+    {% endif %}
+    {% endif %}
+
+    {% if body != blank and body != empty and body != nil %}
+    {% if header != blank and header != empty and header != nil %}
+    <div class="alert-body">
+        <p>{{ body }}</p>
+    </div>
+    {% else %}
+    <p>{{ body }}</p>
+    {% endif %}
+    {% endif %}
+</div>

data/_includes/anchor_headings.html

@@ -0,0 +1,100 @@
+{% capture headingsWorkspace %}
+  {% comment %}
+    Version 1.0.3
+      https://github.com/allejo/jekyll-anchor-headings
+
+    "Be the pull request you wish to see in the world." ~Ben Balter
+
+    Usage:
+      {% include anchor_headings.html html=content %}
+
+    Parameters:
+      * html          (string) - the HTML of compiled markdown generated by kramdown in Jekyll
+
+    Optional Parameters:
+      * beforeHeading (bool)   : false  - Set to true if the anchor should be placed _before_ the heading's content
+      * anchorBody    (string) :  ''    - The content that will be placed inside the anchor; the `%heading%` placeholder is available
+      * anchorClass   (string) :  ''    - The class(es) that will be used for each anchor. Separate multiple classes with a space
+      * anchorTitle   (string) :  ''    - The `title` attribute that will be used for anchors
+      * h_min         (int)    :  1     - The minimum header level to build an anchor for; any header lower than this value will be ignored
+      * h_max         (int)    :  6     - The maximum header level to build an anchor for; any header greater than this value will be ignored
+      * bodyPrefix    (string) :  ''    - Anything that should be inserted inside of the heading tag _before_ its anchor and content
+      * bodySuffix    (string) :  ''    - Anything that should be inserted inside of the heading tag _after_ its anchor and content
+
+    Output:
+      The original HTML with the addition of anchors inside of all of the h1-h6 headings.
+  {% endcomment %}
+
+  {% assign minHeader = include.h_min | default: 1 %}
+  {% assign maxHeader = include.h_max | default: 6 %}
+  {% assign beforeHeading = include.beforeHeading %}
+  {% assign nodes = include.html | split: '<h' %}
+
+  {% capture edited_headings %}{% endcapture %}
+
+  {% for _node in nodes %}
+    {% capture node %}{{ _node | strip }}{% endcapture %}
+
+    {% if node == "" %}
+      {% continue %}
+    {% endif %}
+
+    {% assign nextChar = node | replace: '"', '' | strip | slice: 0, 1 %}
+    {% assign headerLevel = nextChar | times: 1 %}
+
+    <!-- If the level is cast to 0, it means it's not a h1-h6 tag, so let's try to fix it -->
+    {% if headerLevel == 0 %}
+      {% if nextChar != '<' and nextChar != '' %}
+        {% capture node %}<h{{ node }}{% endcapture %}
+      {% endif %}
+
+      {% capture edited_headings %}{{ edited_headings }}{{ node }}{% endcapture %}
+      {% continue %}
+    {% endif %}
+
+    {% assign _workspace = node | split: '</h' %}
+    {% assign _idWorkspace = _workspace[0] | split: 'id="' %}
+    {% assign _idWorkspace = _idWorkspace[1] | split: '"' %}
+    {% assign html_id = _idWorkspace[0] %}
+
+    {% capture _hAttrToStrip %}{{ _workspace[0] | split: '>' | first }}>{% endcapture %}
+    {% assign header = _workspace[0] | replace: _hAttrToStrip, '' %}
+
+    <!-- Build the anchor to inject for our heading -->
+    {% capture anchor %}{% endcapture %}
+
+    {% if html_id and headerLevel >= minHeader and headerLevel <= maxHeader %}
+      {% capture anchor %}href="#{{ html_id}}"{% endcapture %}
+
+      {% if include.anchorClass %}
+        {% capture anchor %}{{ anchor }} class="{{ include.anchorClass }}"{% endcapture %}
+      {% endif %}
+
+      {% if include.anchorTitle %}
+        {% capture anchor %}{{ anchor }} title="{{ include.anchorTitle | replace: '%heading%', header }}"{% endcapture %}
+      {% endif %}
+
+      {% capture anchor %}<a {{ anchor }}>{{ include.anchorBody | replace: '%heading%', header | default: '' }}</a>{% endcapture %}
+
+      <!-- In order to prevent adding extra space after a heading, we'll let the 'anchor' value contain it -->
+      {% if beforeHeading %}
+        {% capture anchor %}{{ anchor }} {% endcapture %}
+      {% else %}
+        {% capture anchor %} {{ anchor }}{% endcapture %}
+      {% endif %}
+    {% endif %}
+
+    {% capture new_heading %}
+      <h{{ _hAttrToStrip }}
+        {{ include.bodyPrefix }}
+        {% if beforeHeading %}
+          {{ anchor }}{{ header }}
+        {% else %}
+          {{ header }}{{ anchor }}
+        {% endif %}
+        {{ include.bodySuffix }}
+      </h{{ _workspace | last }}
+    {% endcapture %}
+    {% capture edited_headings %}{{ edited_headings }}{{ new_heading }}{% endcapture %}
+  {% endfor %}
+{% endcapture %}{% assign headingsWorkspace = '' %}{{ edited_headings | strip }}