j1-template 2020.0.18 → 2020.0.24

data/lib/starter_web/pages/public/test_pages/_includes/attributes.asciidoc

@@ -0,0 +1,49 @@
+// ~/document_base_folder/includes/attributes.asciidoc
+// Local Asciidoc attribute includes
+// -----------------------------------------------------------------------------
+
+// URL, local references to internal|external web links
+// -----------------------------------------------------------------------------
+tag::urls[]
+
+:url-local--source:                               https://example.com/home
+:url-wikipedia_de--yandex:                        https://de.wikipedia.org/wiki/Yandex
+
+:url-stackoverflow--card_deck:                    https://stackoverflow.com/questions/36430816/bootstrap-4-card-deck-with-number-of-columns-based-on-viewport
+:url-codeply--card_deck:                          https://www.codeply.com/go/nIB6oSbv6q
+
+end::urls[]
+
+// TAGS, local Asciidoc attributes (variables)
+// -----------------------------------------------------------------------------
+tag::tags[]
+:documents-dir:                                   documents
+:tables-dir:                                      tables
+:images-dir--pages:                               images/pages
+end::tags[]
+
+
+// IMAGES, local references to images
+// -----------------------------------------------------------------------------
+tag::images[]
+:image-wikipedia--minneapolis:                    {images-dir--pages}/minneapolis.1200x400.jpg
+end::images[]
+
+
+// DATA, local references to data elements (asciidoc extensions)
+// -----------------------------------------------------------------------------
+tag::data[]
+:data-wikipedia--minneapolis:                     "{images-dir--pages}/minneapolis.1200x400.jpg, local image"
+end::data[]
+
+
+// PRODUCTS, local product information (e.g. release)
+// -----------------------------------------------------------------------------
+tag::products[]
+end::products[]
+
+
+// AUTHORS, local author information (e.g. article)
+// -----------------------------------------------------------------------------
+tag::authors[]
+end::authors[]

data/lib/starter_web/pages/public/test_pages/_includes/tables/000_bem_specifiers.asciidoc

@@ -0,0 +1,22 @@
+
+.BEM specifiers for J1 Template __variables__
+[cols="1a,3a,8a", options="header", width="100%", role="rtable mt-3"]
+|===============================================================================
+|Specifier |Example |Description
+
+|Block
+|`url` \| `image` \| `data`
+|Top level specifier. Defines the (global) resource type, e.g. an URL, image
+or a dataset
+
+|Element
+|`url-j1`
+|Specifier to express the dependency upon the block, e.g. a site prefix like
+`https://jekyll.one`
+
+|Modifier
+|`url-j1\--home` \| `url-j1\--learn_present_images`
+|Specifier that adresses a specific source: e.g. web page like
+`https://jekyll.one/` \| `https://jekyll.one/pages/public/learn/roundtrip/present_images`
+
+|===============================================================================

data/lib/starter_web/pages/public/test_pages/_includes/tables/000_specifier_examples.asciidoc

@@ -0,0 +1,56 @@
+
+.Examples for attributes
+[cols="1a,4a,7a", options="header", width="100%", role="rtable mt-3"]
+|===============================================================================
+|Tag |BEM |Value\|Example
+
+|url
+|`url-j1\--home`
+|{url-j1--home} {char-emdash}
+link:{url-j1--home}[Jekyll One {char-middot} Home, {browser-window--new}]
+[source, prometheus, role="noclip"]
+----
+link:{url-j1--home}[Jekyll One {char-middot} Home, {browser-window--new}]
+----
+
+|tag
+|`browser-window\--new`
+|{browser-window--new}
+[source, prometheus, role="noclip"]
+----
+link:{url}[link title, {browser-window--new}]
+----
+
+|tag
+|`icon-battery\--quarter`
+|icon:battery-quarter[role="md-blue"]
+[source, prometheus, role="noclip"]
+----
+icon:battery-quarter[role="md-blue"]
+----
+
+|tag
+|`figure-caption\--text`
+|{figure-caption--text}
+[source, prometheus, role="noclip"]
+----
+.{figure-caption--text} image description\|text
+----
+
+|image
+|`image-attic\--cookies`
+|{image-attic--cookies}
+[source, prometheus, role="noclip"]
+----
+image:{image-attic--cookies}[image title]
+----
+
+|data
+|`data-lightbox\--example`
+|{data-lightbox--example}
+[source, prometheus, role="noclip"]
+----
+lightbox::lightbox--example[600, {data-lightbox--example}]
+----
+
+|===============================================================================

data/lib/starter_web/pages/public/test_pages/breadcrumbs_tester.adoc

@@ -0,0 +1,62 @@
+---
+title:                                  breadcrumbs Tester
+tagline:                                breadcrumbs
+description:                            breadcrumbs
+
+tags:                                   [ Page, Roundtrip ]
+index:                                  [ Template, Roundtrip, Images ]
+categories:                             [ pages ]
+
+toc:                                    true
+scrollbar:                              false
+date:                                   2020-11-08 12:00:00
+
+permalink:                              /pages/public/tester/breadcrumbs/
+regenerate:                             true
+
+resources:                              [ lunr ]
+resource_options:
+  - attic:
+      padding_top:                      400
+      padding_bottom:                   50
+      opacity:                          0.5
+#     slides:
+#       - url:                          /assets/images/pages/roundtrip/images-1920x1280-bw.jpg
+#         alt:                          Photo by Ricardo Gomez Angel on Unsplash
+#         badge:
+#           type:                       unsplash
+#           author:                     Ricardo Gomez Angel
+#           href:                       https://unsplash.com/@ripato/portfolio
+---
+
+// Page Initializer
+// =============================================================================
+// Enable the Liquid Preprocessor
+:page-liquid:
+
+// Set page (local) attributes here
+// -----------------------------------------------------------------------------
+// :page--attr:                         <attr-value>
+
+//  Load Liquid procedures
+// -----------------------------------------------------------------------------
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
+
+// Load page attributes
+// -----------------------------------------------------------------------------
+{% include {{load_attributes}} scope="all" %}
+
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+++++
+{% include breadcrumbs.html %}
+++++
+
+== Deck of posts
+
+Bootstrap `card decks` are *not* responsive by default. Additional breakpoint
+classes for J1 Template introduce support on card decks for responsiveness.
+With the values for `break_on_XX`, the number of cards can be specified to be
+shown on a deck per *row*.

data/lib/starter_web/pages/public/test_pages/deck_of_posts.adoc

@@ -0,0 +1,165 @@
+---
+title:                                  Cards Tester
+tagline:                                deck of posts
+description:                            responsive deck
+
+tags:                                   [ Cards, Tester ]
+index:                                  [ deck, post ]
+categories:                             [ pages ]
+
+toc:                                    true
+advertising:                            false
+date:                                   2020-11-08 12:00:00
+
+permalink:                              /pages/public/test_pages/deck_of_posts/
+regenerate:                             false
+
+resources:                              [ lightbox, rtable ]
+resource_options:
+---
+
+// Page Initializer
+// =============================================================================
+// Enable the Liquid Preprocessor
+:page-liquid:
+
+// Set page (local) attributes here
+// -----------------------------------------------------------------------------
+// :page--attr:                         <attr-value>
+
+//  Load Liquid procedures
+// -----------------------------------------------------------------------------
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
+
+// Load page attributes
+// -----------------------------------------------------------------------------
+{% include {{load_attributes}} scope="all" %}
+
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+
+== Deck of posts
+
+Bootstrap `card decks` are *not* responsive by default. Additional breakpoint
+classes for J1 Template introduce support on card decks for responsiveness.
+With the values for `break_on_XX`, the number of cards can be specified to be
+shown on a deck per *row*.
+
+.Read more
+. link:{url-stackoverflow--card_deck}[Stackoverflow {char-middot} Deck of Cards, {browser-window--new}]
+. link:{url-codeply--card_deck}[Codeply {char-middot} Deck of Cards, {browser-window--new}]
+
+++++
+{% comment %} Set config files
+-------------------------------------------------------------------------------- {% endcomment %}
+{% assign template_config           = site.data.j1_config %}
+{% assign bs_config                 = template_config.bootstrap %}
+
+{% comment %} Set config data
+-------------------------------------------------------------------------------- {% endcomment %}
+{% assign bs_card_deck              = bs_config.cards.card_deck %}
+
+  {% assign posts_max = 6 %}
+  {% assign post_category = 'featured' %}
+  {% assign readmore_text = 'read' %}
+
+  {% assign total_categoray_posts = 0 %}
+  {% for cat in site.categories %}
+     {% if cat[0] == post_category %}
+      {% assign total_category_posts = cat[1].size %}
+     {% endif %}
+  {% endfor %}
+
+  {% assign debug = true %}
+  {% if debug %}
+  <div>
+    <h3> Total posts per category </h3>
+    <ul>
+    {% for cat in site.categories %}
+        <li>{{cat[0]}} ({{cat[1].size}})</li>
+    {% endfor %}
+    </ul>
+  </div>
+  {% endif %}
+
+  <h3> Posts per category <i>{{post_category}}</i></h3>
+
+  <p> Total posts in {{post_category}}: {{ total_category_posts }} <br/>
+      Max posts written: {{ posts_max }} <br/><br/>
+      Settings for break_on_XX
+  </p>
+
+  <ul>
+  {% for bp in bs_card_deck %}
+      <li>{{bp[0]}}: {{bp[1]}}</li>
+  {% endfor %}
+  </ul>
+
+  <div class="container mt-5">
+    <!-- Recent posts -->
+    <div class="card-deck -mb-5">
+    {% for post in site.posts %} {% for category in post.categories %}
+      {% if posts_written == posts_max %} {% assign last_post_written = true %} {% break %}{% endif %}
+
+      {% if category == post_category and last_post_written != true %}
+        {% assign posts_written = posts_written|plus:1 %}
+        <!-- Post -->
+          <article class="card raised-z5 mb-3">
+            {% if post.image %}
+              <img class="img-fluid img__object--cover g-height-200" src="{{post.image}}" alt="{{post.title}}">
+              {% assign post_width = '80x' %}
+            {% else %}
+              <img class="mt-2" src="" alt="">
+              {% assign post_width = '100x' %}
+            {% endif %}
+            <h3 class="card-header bg-primary notoc">{{post.title}}</h3>
+            <!-- Body|Excerpt -->
+            <div class="card-body r-text-300">
+              {{post.excerpt|truncatewords:50|replace:'...',' ...'|remove:'<div class="paragraph">'|remove:'</div>'|remove:'<p>'|remove:'</p>'}}
+            </div>
+            <!-- End Body|Excerpt -->
+            <div class="card-footer r-text-200">
+              <div class="text-muted r-text-200">
+                <i class="mdi mdi-calendar-blank mr-1"></i>
+                {{post.date|date:"%Y %B, %e"}}
+              </div>
+              <a class="card-link md-blue font-weight-bold g-font-size-12 text-uppercase"
+                 href="{{post.url}}">
+                 {{readmore_text}} · {{post.tagline}}
+              </a>
+            </div>
+          </article>
+          <!-- End Post -->
+
+          <!-- Calculate 'column setters' to manage BS break points for 'responsive' card deck (rcard-deck) -->
+          {% assign sm = posts_written | modulo: bs_card_deck.break_on_sm %}
+          {% assign md = posts_written | modulo: bs_card_deck.break_on_md %}
+          {% assign lg = posts_written | modulo: bs_card_deck.break_on_lg %}
+          {% assign xl = posts_written | modulo: bs_card_deck.break_on_xl %}
+
+          <!-- Add 'column setters' for BS break points -->
+          {% if sm == 0 %}
+            <div class="w-100 d-none d-sm-block d-md-none"> <!-- break on sm --> </div>
+          {% endif %}
+
+          {% if md == 0 %}
+            <div class="w-100 d-none d-md-block d-lg-none"> <!-- break on md --> </div>
+          {% endif %}
+
+          {% if lg == 0 %}
+            <div class="w-100 d-none d-lg-block d-xl-none"> <!-- break on lg --> </div>
+          {% endif %}
+
+          {% if xl == 0 %}
+            <div class="w-100 d-none d-xl-block" ><!-- break on xl --> </div>
+          {% endif %}
+
+      {% endif %}
+    {% endfor %} {% endfor %}
+    </div>
+    <!-- End recent posts -->
+
+  </div>
+++++

data/lib/starter_web/pages/public/test_pages/floating_actions_button.adoc

@@ -0,0 +1,523 @@
+---
+title:                                  Floating Button
+tagline:                                check floating actions
+description:                            check floating actions
+
+tags:                                   [ Page, Tester ]
+index:                                  [ floating, buttons ]
+categories:                             [ pages ]
+
+fam:                                    false
+toc:                                    true
+advertising:                            false
+scrollbar:                              false
+date:                                   2020-11-08 12:00:00
+
+image:                                  /assets/images/modules/attics/cookies-1920x1200-bw.jpg
+
+permalink:                              /pages/public/test_pages/floating_buttons/
+regenerate:                             true
+
+resources:                              [ lightbox ]
+resource_options:
+  - attic:
+      padding_top:                      400
+      padding_bottom:                   50
+      opacity:                          0.5
+      slides:
+        - url:                          /assets/images/modules/attics/cookies-1920x1200-bw.jpg
+          alt:                          jekyll.1200x600-bw.jpg
+---
+
+// Page Initializer
+// =============================================================================
+// Enable the Liquid Preprocessor
+:page-liquid:
+
+// Set page (local) attributes here
+// -----------------------------------------------------------------------------
+// :page--attr:                         <attr-value>
+
+//  Load Liquid procedures
+// -----------------------------------------------------------------------------
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
+
+// Load page attributes
+// -----------------------------------------------------------------------------
+{% include {{load_attributes}} scope="none" %}
+
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+== Floating action buttons
+
+.Release Loeb Classical Library, Harvard University Press, edition, 1931
+The title *About the Ends of Goods and Evils* requires explanation. It was
+Aristotle who put the ethical problem in the form of the question, What is the
+T𝜆o or End, the supreme end of man’s endeavour, in the attainment of which his
+Good or Well-being lies?
+
+For Aristotle, Telos connoted not only *aim*, but *completion*; and he found
+the answer to his question in the complete development and right exercise of
+the faculties of man’s nature, and particularly of the distinctively human
+faculty of Reason. The life of the Intellect was the Best, the Chief Good; and
+lesser Goods were Means to the attainment of this End.
+
+Thus was introduced the notion of an ascending scale of Goods, and this affected
+the interpretation of the term Telos. Telos came to be understood as denoting
+not so much the end or aim of endeavour as the end or extreme point of a series,
+the topmost good. To this was naturally opposed an extreme of minus value,
+the topmost, or rather bottommost, evil.
+
+Hence arose the expressions 𝜏𝜆o 𝛾𝛼𝜃𝜈, 𝜏𝜆o 𝜅𝛼𝜅𝜈, *End of Goods, of Evils*, which
+occur in Philodemus, Rhetoric I, 218.8 ff. (Südhans), and are translated by
+Cicero finis bonorum et malorum.
+
+As a title for his book he throws this phrase into the plural, meaning
+*different views as to the Chief Good and Evil*. Hence in title and to some
+extent in method, the de Finibus may be compared with such modern works a
+Martineau’s Types of Ethical Theory and Sidgwick’s Methods of Ethics.
+
+[quote, Cicero · Paragraph 1.10.32, Translation by H. Rackham · Issue 1914 - De Finibus]
+____
+But I must explain to you how all this mistaken idea of denouncing
+pleasure and praising pain was born and I will give you a complete
+account of the system, and expound the actual teachings of the great
+explorer of the truth, the master-builder of human happiness.
+
+No one rejects, dislikes, or avoids pleasure itself, because it is
+pleasure, but because those who do not know how to pursue pleasure
+rationally encounter consequences that are extremely painful. Nor
+again is there anyone who loves or pursues or desires to obtain pain
+of itself, because it is pain, but because occasionally circumstances
+occur in which toil and pain can procure him some great pleasure.
+
+To take a trivial example, which of us ever undertakes laborious
+physical exercise, except to obtain some advantage from it? But who
+has any right to find fault with a man who chooses to enjoy a pleasure
+that has no annoying consequences, or one who avoids a pain that
+produces no resultant pleasure?
+____
+
+This he sets out to prove as follows: every animal, as soon as it is born,
+seeks for pleasure, and delights in it as the Chief Good, while it recoils
+from pain as the Chief Evil, and so far as possible avoids it. This it does
+as long as it remains unperverted, at the prompting of Nature’s own unbiased
+and honest verdict.
+
+Hence Epicurus refuses to admit any necessity for argument or discussion to
+prove that pleasure is desirable and pain to be avoided. These facts, he
+thinks, are perceived by the senses, as that fire is hot, snow white, honey
+sweet, none of which things need be proved by elaborate argument: it is enough
+merely to draw attention to them.
+
+For there is a difference, he holds, between formal syllogistic proof of a
+thing and a mere notice or reminder: the former is the method for discovering
+abstruse and recondite truths, the latter for indicating facts that are obvious
+and evident.
+
+Strip mankind of sensation, and nothing remains; it follows that Nature herself
+is the judge of that which is in accordance with or contrary to nature. What
+does Nature perceive or what does she judge of, beside pleasure and pain, to
+guide her actions of desire and of avoidance?
+
+++++
+
+<div class="doc-example">
+  <button type="button" class="btn bmd-btn-fab btn-primary">
+    <i class="mdi mdi-plus mdi-2x"></i>
+</div>
+
+
+<div class="fixed-action-btn direction-top">
+  <a id="fam_button" class="btn-floating btn-large btn-md-red raised-z5"><i class="mdi mdi-chevron-down"></i></a>
+  <ul id="ssm_menu">
+    <li><a id="ssm_reload_page" class="btn-floating btn-md-red raised-z5"><i class="mdi mdi-reload"></i></a></li>
+    <li><a id="ssm_toc" class="btn-floating btn-md-blue raised-z5"><i class="mdi mdi-wrap"></i></a></li>
+    <li><a id="ssm_scroll_to_top" class="btn-floating btn-md-green raised-z5"><i class="mdi mdi-step-backward-2 mdi-rotate-90"></i></a></li>
+    <li><a id="ssm_previous_section" class="btn-floating btn-md-green raised-z5"><i class="mdi mdi-step-backward mdi-rotate-90"></i></a></li>
+    <li><a id="ssm_next_section" class="btn-floating btn-md-green raised-z5"><i class="mdi  mdi-step-forward mdi-rotate-90"></i></a></li>
+    <li><a id="ssm_scroll_to_bottom" class="btn-floating btn-md-green raised-z5"><i class="mdi mdi-step-forward-2 mdi-rotate-90"></i></a></li>
+  </ul>
+</div>
+++++
+
+++++
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    var FloatingActionOptions = { direction: 'top',
+                                  hoverEnabled: false,
+                                  toolbarEnabled: true };
+
+    var elems         = document.querySelectorAll('.fixed-action-btn');
+    var instances     = j1.FloatingActionButton.init(elems, FloatingActionOptions);
+    var $ActionButton = $('#fam_button');
+
+    if (FloatingActionOptions.hoverEnabled) {
+      $ActionButton.hover(
+        function() {
+          $('.mdi').toggleClass('mdi-chevron-down mdi-chevron-up');
+        }, function() {
+          $('.mdi').toggleClass('mdi-chevron-down mdi-chevron-up');
+        }
+      );
+    } else {
+      $ActionButton.on('click', function (e) {
+        $('.mdi').toggleClass('mdi-chevron-down mdi-chevron-up');
+      });
+    }
+
+  });
+</script>
+++++
+
+++++
+<style>
+
+.fixed-action-btn ul {
+    left: 0;
+    right: 0;
+    text-align: center;
+    position: absolute;
+    bottom: 64px;
+    margin: 0;
+    visibility: hidden;
+    padding-left: 0;
+    list-style-type: none;
+}
+
+.btn,.btn-large,.btn-small,.btn-flat {
+    border: none;
+    border-radius: 2px;
+    display: inline-block;
+    height: 36px;
+    line-height: 36px;
+    padding: 0 16px;
+    text-transform: uppercase;
+    vertical-align: middle;
+    -webkit-tap-highlight-color: transparent
+}
+
+.btn.disabled,.disabled.btn-large,.disabled.btn-small,.btn-floating.disabled,.btn-large.disabled,.btn-small.disabled,.btn-flat.disabled,.btn:disabled,.btn-large:disabled,.btn-small:disabled,.btn-floating:disabled,.btn-large:disabled,.btn-small:disabled,.btn-flat:disabled,.btn[disabled],[disabled].btn-large,[disabled].btn-small,.btn-floating[disabled],.btn-large[disabled],.btn-small[disabled],.btn-flat[disabled] {
+    pointer-events: none;
+    background-color: #DFDFDF !important;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    color: #9F9F9F !important;
+    cursor: default
+}
+
+.btn.disabled:hover,.disabled.btn-large:hover,.disabled.btn-small:hover,.btn-floating.disabled:hover,.btn-large.disabled:hover,.btn-small.disabled:hover,.btn-flat.disabled:hover,.btn:disabled:hover,.btn-large:disabled:hover,.btn-small:disabled:hover,.btn-floating:disabled:hover,.btn-large:disabled:hover,.btn-small:disabled:hover,.btn-flat:disabled:hover,.btn[disabled]:hover,[disabled].btn-large:hover,[disabled].btn-small:hover,.btn-floating[disabled]:hover,.btn-large[disabled]:hover,.btn-small[disabled]:hover,.btn-flat[disabled]:hover {
+    background-color: #DFDFDF !important;
+    color: #9F9F9F !important
+}
+
+.btn,.btn-large,.btn-small,.btn-floating,.btn-large,.btn-small,.btn-flat {
+    font-size: 14px;
+    outline: 0
+}
+
+.btn i,.btn-large i,.btn-small i,.btn-floating i,.btn-large i,.btn-small i,.btn-flat i {
+    font-size: 1.3rem;
+    line-height: inherit
+}
+
+.btn:focus,.btn-large:focus,.btn-small:focus,.btn-floating:focus {
+    background-color: #1d7d74
+}
+
+.btn,.btn-large,.btn-small {
+    text-decoration: none;
+    color: #fff;
+    background-color: #26a69a;
+    text-align: center;
+    letter-spacing: .5px;
+    -webkit-transition: background-color .2s ease-out;
+    transition: background-color .2s ease-out;
+    cursor: pointer
+}
+
+.btn:hover,.btn-large:hover,.btn-small:hover {
+    background-color: #2bbbad
+}
+
+.btn-floating {
+    display: inline-block;
+    color: #fff;
+    position: relative;
+    overflow: hidden;
+    z-index: 1;
+    width: 40px;
+    height: 40px;
+    line-height: 40px;
+    padding: 0;
+    background-color: #26a69a;
+    border-radius: 50%;
+    -webkit-transition: background-color .3s;
+    transition: background-color .3s;
+    cursor: pointer;
+    vertical-align: middle
+}
+
+.btn-floating:hover {
+    background-color: #26a69a
+}
+
+.btn-floating:before {
+    border-radius: 0
+}
+
+.btn-floating.btn-large {
+    width: 56px;
+    height: 56px;
+    padding: 0
+}
+
+.btn-floating.btn-large.halfway-fab {
+    bottom: -28px
+}
+
+.btn-floating.btn-large i {
+    line-height: 56px
+}
+
+.btn-floating.btn-small {
+    width: 32.4px;
+    height: 32.4px
+}
+
+.btn-floating.btn-small.halfway-fab {
+    bottom: -16.2px
+}
+
+.btn-floating.btn-small i {
+    line-height: 32.4px
+}
+
+.btn-floating.halfway-fab {
+    position: absolute;
+    right: 24px;
+    bottom: -20px
+}
+
+.btn-floating.halfway-fab.left {
+    right: auto;
+    left: 24px
+}
+
+.btn-floating i {
+    width: inherit;
+    display: inline-block;
+    text-align: center;
+    color: #fff;
+    font-size: 1.6rem;
+    line-height: 40px
+}
+
+button.btn-floating {
+    border: none
+}
+
+.fixed-action-btn {
+    position: fixed;
+    right: .5rem;
+    bottom: 1rem;
+    padding-top: 1rem;
+    margin-bottom: 0;
+    z-index: 997
+}
+
+.fixed-action-btn.active ul {
+    visibility: visible
+}
+
+.fixed-action-btn.direction-left,.fixed-action-btn.direction-right {
+    padding: 0 0 0 15px
+}
+
+.fixed-action-btn.direction-left ul,.fixed-action-btn.direction-right ul {
+    text-align: right;
+    right: 64px;
+    top: 50%;
+    -webkit-transform: translateY(-50%);
+    transform: translateY(-50%);
+    height: 100%;
+    left: auto;
+    width: 500px
+}
+
+.fixed-action-btn.direction-left ul li,.fixed-action-btn.direction-right ul li {
+    display: inline-block;
+    margin: 7.5px 15px 0 0
+}
+
+.fixed-action-btn.direction-right {
+    padding: 0 15px 0 0
+}
+
+.fixed-action-btn.direction-right ul {
+    text-align: left;
+    direction: rtl;
+    left: 64px;
+    right: auto
+}
+
+.fixed-action-btn.direction-right ul li {
+    margin: 7.5px 0 0 15px
+}
+
+.fixed-action-btn.direction-bottom {
+    padding: 0 0 15px 0
+}
+
+.fixed-action-btn.direction-bottom ul {
+    top: 64px;
+    bottom: auto;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: reverse;
+    -webkit-flex-direction: column-reverse;
+    -ms-flex-direction: column-reverse;
+    flex-direction: column-reverse
+}
+
+.fixed-action-btn.direction-bottom ul li {
+    margin: 15px 0 0 0
+}
+
+.fixed-action-btn.toolbar {
+    padding: 0;
+    height: 56px
+}
+
+.fixed-action-btn.toolbar.active>a i {
+    opacity: 0
+}
+
+.fixed-action-btn.toolbar ul {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    top: 0;
+    bottom: 0;
+    z-index: 1
+}
+
+.fixed-action-btn.toolbar ul li {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+    display: inline-block;
+    margin: 0;
+    height: 100%;
+    -webkit-transition: none;
+    transition: none
+}
+
+.fixed-action-btn.toolbar ul li a {
+    display: block;
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background-color: transparent;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    color: #fff;
+    line-height: 56px;
+    z-index: 1
+}
+
+.fixed-action-btn.toolbar ul li a i {
+    line-height: inherit
+}
+
+.fixed-action-btn ul {
+    left: 0;
+    right: 0;
+    text-align: center;
+    position: absolute;
+    bottom: 64px;
+    margin: 0;
+    visibility: hidden
+}
+
+.fixed-action-btn ul li {
+    margin-bottom: 15px
+}
+
+.fixed-action-btn ul a.btn-floating {
+    opacity: 0
+}
+
+.fixed-action-btn .fab-backdrop {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    width: 40px;
+    height: 40px;
+    background-color: #26a69a;
+    border-radius: 50%;
+    -webkit-transform: scale(0);
+    transform: scale(0)
+}
+
+.btn-flat {
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    background-color: transparent;
+    color: #343434;
+    cursor: pointer;
+    -webkit-transition: background-color .2s;
+    transition: background-color .2s
+}
+
+.btn-flat:focus,.btn-flat:hover {
+    -webkit-box-shadow: none;
+    box-shadow: none
+}
+
+.btn-flat:focus {
+    background-color: rgba(0,0,0,0.1)
+}
+
+.btn-flat.disabled,.btn-flat.btn-flat[disabled] {
+    background-color: transparent !important;
+    color: #b3b2b2 !important;
+    cursor: default
+}
+
+.btn-large {
+    height: 54px;
+    line-height: 54px;
+    font-size: 15px;
+    padding: 0 28px
+}
+
+.btn-large i {
+    font-size: 1.6rem
+}
+
+.btn-small {
+    height: 32.4px;
+    line-height: 32.4px;
+    font-size: 13px
+}
+
+.btn-small i {
+    font-size: 1.2rem
+}
+
+.btn-block {
+    display: block
+}
+
+</style>
+++++