Merge pull request #168 from OmgImAlexis/master

Add span separator to header.

dist/mini-dark.css

@@ -1,9 +1,9 @@
 @charset "UTF-8";
-/*
-  Flavor name: Dark (mini-dark)
-  Author: Angelos Chalaris (chalarangelo@gmail.com)
-  Maintainers: Angelos Chalaris
-  mini.css version: v3.0.1
+/*
+  Flavor name: Dark (mini-dark)
+  Author: Angelos Chalaris (chalarangelo@gmail.com)
+  Maintainers: Angelos Chalaris
+  mini.css version: v3.0.1
 */
 /*
   Browsers resets and base typography.
@@ -22,8 +22,8 @@
   --universal-margin: 0.5rem;
   --universal-padding: 0.5rem;
   --universal-border-radius: 0.125rem;
-  --a-link-color: #0277bd;
-  --a-visited-color: #01579b;
+  --a-link-color: #65A0C7;
+  --a-visited-color: #3985B7;
 }
 
 html {
@@ -689,8 +689,8 @@ a:hover, a:focus {
   border-bottom: 0;
 }
 
-/*
-	 Custom elements for card elements.
+/*
+	 Custom elements for card elements.
 */
 @media screen and (min-width: 240px) {
   .card.small {
@@ -986,8 +986,8 @@ input:disabled, input[disabled], textarea:disabled, textarea[disabled], select:d
   }
 }
 
-/*
-	 Custom elements for forms and input elements.
+/*
+	 Custom elements for forms and input elements.
 */
 button.primary, [type="button"].primary, [type="submit"].primary, [type="reset"].primary, .button.primary, [role="button"].primary {
   --button-back-color: #1976d2;
@@ -1074,6 +1074,10 @@ header.row {
   box-sizing: content-box;
 }
 
+header.row .logo {
+  line-height: 1;
+}
+
 header .logo {
   color: var(--header-fore-color);
   font-size: 1.75rem;
@@ -1374,6 +1378,22 @@ table:not(.horizontal) tbody tr:first-child td {
   border-top: 0;
 }
 
+table:not(.horizontal) thead tr:first-child th:first-child {
+  border-top-left-radius: var(--universal-border-radius);
+}
+
+table:not(.horizontal) thead tr:first-child th:last-child {
+  border-top-right-radius: var(--universal-border-radius);
+}
+
+table:not(.horizontal) tbody tr:last-child td:first-child {
+  border-bottom-left-radius: var(--universal-border-radius);
+}
+
+table:not(.horizontal) tbody tr:last-child td:last-child {
+  border-bottom-right-radius: var(--universal-border-radius);
+}
+
 table.horizontal {
   border: 0;
 }
@@ -1608,11 +1628,11 @@ mark.inline-block {
 }
 
 .tooltip:not(.bottom):before {
-  border-top-color: #fafafa;
+  border-top-color: var(--tooltip-back-color);
 }
 
 .tooltip.bottom:before {
-  border-bottom-color: #fafafa;
+  border-bottom-color: var(--tooltip-back-color);
 }
 
 .tooltip:after {
@@ -1810,8 +1830,8 @@ mark.inline-block {
   border-radius: 0 0 var(--universal-border-radius) var(--universal-border-radius);
 }
 
-/*
-	 Custom elements for contextual background elements, toasts and tooltips.
+/*
+	 Custom elements for contextual background elements, toasts and tooltips.
 */
 mark.secondary {
   --mark-back-color: #d32f2f;
@@ -1905,8 +1925,8 @@ progress.inline {
   animation: spinner-donut-anim 1.2s linear infinite;
 }
 
-/*
-	 Custom elements for progress bars and spinners.
+/*
+	 Custom elements for progress bars and spinners.
 */
 progress.primary {
   --progress-fore-color: #1976d2;

docs/doc-fragments/formsAndInput.js

@@ -54,16 +54,16 @@ module.exports = {
   modifiers: [],
   dos: [
     {
-      description: 'Form inputs are inline by defaut, however you can combine forms with the <a href="#grid">grid system</a> to create aligned forms.',
+      description: 'Form inputs are inline by default, however you can combine forms with the <a href="#grid">grid system</a> to create aligned forms.',
       sample: `<pre><span class="code-line"><span class="highlight-a">&lt;form&gt;</span></span>
 <span class="code-line">  <span class="highlight-a">&lt;fieldset&gt;</span></span>
 <span class="code-line">    <span class="highlight-a">&lt;legend&gt;</span>Simple form<span class="highlight-a">&lt;/legend&gt;</span></span>
-<span class="code-line">    <span class="highlight-a">&lt;div&gt;</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;row&quot;</span><span class="highlight-a">&gt;</span></span>
-<span class="code-line">      <span class="highlight-a">&lt;div&gt;</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;col-sm-12 col-md-6&quot;</span><span class="highlight-a">&gt;</span></span>
+<span class="code-line">    <span class="highlight-a">&lt;div</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;row&quot;</span><span class="highlight-a">&gt;</span></span>
+<span class="code-line">      <span class="highlight-a">&lt;div</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;col-sm-12 col-md-6&quot;</span><span class="highlight-a">&gt;</span></span>
 <span class="code-line">        <span class="highlight-a">&lt;label</span> <span class="highlight-b">for</span>=<span class="highlight-c">&quot;username&quot;</span><span class="highlight-a">&gt;</span>Username<span class="highlight-a">&lt;/label&gt;</span></span>
 <span class="code-line">        <span class="highlight-a">&lt;input</span> <span class="highlight-b">type</span>=<span class="highlight-c">&quot;text&quot;</span> <span class="highlight-b">id</span>=<span class="highlight-c">&quot;Username&quot;</span> <span class="highlight-b">placeholder</span>=<span class="highlight-c">&quot;Username&quot;</span><span class="highlight-a">/&gt;</span></span>
 <span class="code-line">      <span class="highlight-a">&lt;/div&gt;</span></span>
-<span class="code-line">      <span class="highlight-a">&lt;div&gt;</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;col-sm-12 col-md-6&quot;</span><span class="highlight-a">&gt;</span></span>
+<span class="code-line">      <span class="highlight-a">&lt;div</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;col-sm-12 col-md-6&quot;</span><span class="highlight-a">&gt;</span></span>
 <span class="code-line">        <span class="highlight-a">&lt;label</span> <span class="highlight-b">for</span>=<span class="highlight-c">&quot;password&quot;</span><span class="highlight-a">&gt;</span>Password<span class="highlight-a">&lt;/label&gt;</span></span>
 <span class="code-line">        <span class="highlight-a">&lt;input</span> <span class="highlight-b">type</span>=<span class="highlight-c">&quot;password&quot;</span> <span class="highlight-b">id</span>=<span class="highlight-c">&quot;password&quot;</span> <span class="highlight-b">placeholder</span>=<span class="highlight-c">&quot;Password&quot;</span><span class="highlight-a">/&gt;</span></span>
 <span class="code-line">      <span class="highlight-a">&lt;/div&gt;</span></span>

docs/docs.html

@@ -423,18 +423,18 @@
   <div class="section double-padded"><h3>Best practices</h3><div class="row dodos"><div class="col-sm-12 col-md-6"><pre><span class="code-line"><span class="highlight-a">&lt;form&gt;</span></span>
 <span class="code-line">  <span class="highlight-a">&lt;fieldset&gt;</span></span>
 <span class="code-line">    <span class="highlight-a">&lt;legend&gt;</span>Simple form<span class="highlight-a">&lt;/legend&gt;</span></span>
-<span class="code-line">    <span class="highlight-a">&lt;div&gt;</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;row&quot;</span><span class="highlight-a">&gt;</span></span>
-<span class="code-line">      <span class="highlight-a">&lt;div&gt;</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;col-sm-12 col-md-6&quot;</span><span class="highlight-a">&gt;</span></span>
+<span class="code-line">    <span class="highlight-a">&lt;div</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;row&quot;</span><span class="highlight-a">&gt;</span></span>
+<span class="code-line">      <span class="highlight-a">&lt;div</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;col-sm-12 col-md-6&quot;</span><span class="highlight-a">&gt;</span></span>
 <span class="code-line">        <span class="highlight-a">&lt;label</span> <span class="highlight-b">for</span>=<span class="highlight-c">&quot;username&quot;</span><span class="highlight-a">&gt;</span>Username<span class="highlight-a">&lt;/label&gt;</span></span>
 <span class="code-line">        <span class="highlight-a">&lt;input</span> <span class="highlight-b">type</span>=<span class="highlight-c">&quot;text&quot;</span> <span class="highlight-b">id</span>=<span class="highlight-c">&quot;Username&quot;</span> <span class="highlight-b">placeholder</span>=<span class="highlight-c">&quot;Username&quot;</span><span class="highlight-a">/&gt;</span></span>
 <span class="code-line">      <span class="highlight-a">&lt;/div&gt;</span></span>
-<span class="code-line">      <span class="highlight-a">&lt;div&gt;</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;col-sm-12 col-md-6&quot;</span><span class="highlight-a">&gt;</span></span>
+<span class="code-line">      <span class="highlight-a">&lt;div</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;col-sm-12 col-md-6&quot;</span><span class="highlight-a">&gt;</span></span>
 <span class="code-line">        <span class="highlight-a">&lt;label</span> <span class="highlight-b">for</span>=<span class="highlight-c">&quot;password&quot;</span><span class="highlight-a">&gt;</span>Password<span class="highlight-a">&lt;/label&gt;</span></span>
 <span class="code-line">        <span class="highlight-a">&lt;input</span> <span class="highlight-b">type</span>=<span class="highlight-c">&quot;password&quot;</span> <span class="highlight-b">id</span>=<span class="highlight-c">&quot;password&quot;</span> <span class="highlight-b">placeholder</span>=<span class="highlight-c">&quot;Password&quot;</span><span class="highlight-a">/&gt;</span></span>
 <span class="code-line">      <span class="highlight-a">&lt;/div&gt;</span></span>
 <span class="code-line">    <span class="highlight-a">&lt;/div&gt;</span></span>
 <span class="code-line">  <span class="highlight-a">&lt;/fieldset&gt;</span></span>
-<span class="code-line"><span class="highlight-a">&lt;/form&gt;</span></span></pre></div><div class="col-sm-12 col-md-6"><p><mark class="do">Do:</mark>&nbsp;Form inputs are inline by defaut, however you can combine forms with the <a href="#grid">grid system</a> to create aligned forms.</p></div></div></div>
+<span class="code-line"><span class="highlight-a">&lt;/form&gt;</span></span></pre></div><div class="col-sm-12 col-md-6"><p><mark class="do">Do:</mark>&nbsp;Form inputs are inline by default, however you can combine forms with the <a href="#grid">grid system</a> to create aligned forms.</p></div></div></div>
   <div class="section double-padded"><h3>Notes</h3><ul><li>Using the <code>&lt;fieldset&gt;</code> and <code>&lt;legend&gt;</code> elements is highly recommended, as it improves semantic markup and accessibility.</li><li>Some input elements, such as date &amp; time, color and range types, are not supported and, as a result, do not have a default style defined for them. You can define said styles manually if you need to use them in your web app.</li></ul></div>
   <div class="section double-padded"><h3>Customization</h3><ul><li>Text color for forms and legend elements can be changed by changing the value of the <code>--form-fore-color</code> variable.</li><li>Background color for forms can be changed by changing the value of the <code>--form-back-color</code> variable.</li><li>Border color for forms and fieldset elements can be changed by changing the value of the <code>--form-border-color</code> variable.</li><li>Text color for input elements can be changed by changing the value of the <code>--input-fore-color</code> variable.</li><li>Background color for input elements can be changed by changing the value of the <code>--input-back-color</code> variable.</li><li>Border color for input elements can be changed by changing the value of the <code>--input-border-color</code> variable.</li><li>Border color for focused and invalid input elements can be changed by changing the value of the <code>--input-focus-color</code> and <code>--input-invalid-color</code> variables respectively.</li><li>Universal margin for elements can be changed globally by changing the value of the <code>--universal-margin</code> variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen.</li><li>Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.</li><li>Universal border radius for elements can be changed globally by changing the value of the <code>--universal-border-radius</code> variable.</li></ul></div>
 </div><br/><div id="buttons" class="card fluid">

docs/flavorFiles/mini-dark.css

@@ -3,7 +3,7 @@
   Flavor name: Dark (mini-dark)
   Author: Angelos Chalaris (chalarangelo@gmail.com)
   Maintainers: Angelos Chalaris
-  mini.css version: v3.0.0
+  mini.css version: v3.0.1
 */
 /*
   Browsers resets and base typography.

docs/flavorFiles/mini-default.css

@@ -3,7 +3,7 @@
   Flavor name: Default (mini-default)
   Author: Angelos Chalaris (chalarangelo@gmail.com)
   Maintainers: Angelos Chalaris
-  mini.css version: v3.0.0-alpha.3
+  mini.css version: v3.0.1
 */
 /*
   Browsers resets and base typography.

docs/flavorFiles/mini-nord.css

@@ -3,7 +3,7 @@
   Flavor name: Nord (mini-nord)
   Author: tphecca (https://github.com/tphecca)
   Maintainers: tphecca
-  mini.css version: v3.0.0
+  mini.css version: v3.0.1
 */
 /*
   Browsers resets and base typography.

src/flavors/mini-dark.scss

@@ -34,8 +34,8 @@ $blockquote-cite-size: 0.75em; // Font size for the [cite] of <blockquote>
 $code-font-size: 0.85em; // Font size for <code>, <kbd>
 $sup-top: -0.5em; // <sup> top
 $sub-bottom: -0.25em; // <sub> bottom
-$a-link-color: #0277bd; // Color for <a>:link
-$a-visited-color: #01579b; // Color for <a>:visited
+$a-link-color: #65A0C7; // Color for <a>:link
+$a-visited-color: #3985B7; // Color for <a>:visited
 $bold-font-weight: 700; // Font weight for <b> and <strong>
 $mobile-breakpoint: 768px; // Breakpoint between small and medium screens (px)
 $large-screen-breakpoint: 1280px; // Breakpoint between medium and large screens (px)

src/mini/_contextual.scss

@@ -161,10 +161,10 @@ mark {
       left: calc(50% - var(#{$universal-margin-var}));
     }
     &:not(.#{$tooltip-bottom-name}):before { // Top (default) tooltip styling
-      border-top-color: $tooltip-back-color;
+      border-top-color: var(#{$tooltip-back-color-var});
     }
     &.#{$tooltip-bottom-name}:before { // Bottom tooltip styling
-      border-bottom-color: $tooltip-back-color;
+      border-bottom-color: var(#{$tooltip-back-color-var});
     }
     &:after {  // This is the actual tooltip's text block
       content: attr(aria-label);

src/mini/_navigation.scss

@@ -115,6 +115,9 @@ header {
   // Fix for responsive header, using the grid system's row and column alignment.
   &.#{$grid-row-name} {
     box-sizing: content-box;
+    & .#{$header-logo-name} {
+      line-height: 1;
+    }
   }
   // Header logo styling.
   .#{$header-logo-name} {
@@ -123,8 +126,8 @@ header {
     padding: var(#{$universal-padding-var}) calc(2 * var(#{$universal-padding-var}));
     text-decoration: none;
   }
-  // Link styling.
-  button, [type="button"], .#{$button-class-name}, [role="button"] {
+  // Link and span styling.
+  span, button, [type="button"], .#{$button-class-name}, [role="button"] {
     box-sizing: border-box;
     position: relative;
     top: calc(0rem - var(#{$universal-padding-var}) / 4);  // Use universal-padding to offset the padding of the header.
@@ -139,7 +142,9 @@ header {
     @if $_header-links-uppercase {
       text-transform: uppercase;
     }
-    &:hover, &:focus {
+  }
+  button, [type="button"], .#{$button-class-name}, [role="button"] {
+   &:hover, &:focus {
       background: var(#{$header-hover-back-color-var});
     }
   }

src/mini/_table.scss

@@ -160,6 +160,22 @@ table {
     tbody tr:first-child td {
       border-top: 0;
     }
+    thead tr:first-child th {
+      &:first-child{
+          border-top-left-radius: var(--universal-border-radius);
+      }
+      &:last-child{
+          border-top-right-radius: var(--universal-border-radius);
+      }
+    }
+    tbody tr:last-child td {
+      &:first-child{
+          border-bottom-left-radius: var(--universal-border-radius);
+      }
+      &:last-child{
+          border-bottom-right-radius: var(--universal-border-radius);
+      }
+    }
   }
   table.#{$table-horizontal-name} {
     border: 0;
@@ -219,6 +235,26 @@ table {
     }
   }
 }
+@else {
+  table {
+    thead tr:first-child th {
+      &:first-child{
+          border-top-left-radius: var(--universal-border-radius);
+      }
+      &:last-child{
+          border-top-right-radius: var(--universal-border-radius);
+      }
+    }
+    tbody tr:last-child td {
+      &:first-child{
+          border-bottom-left-radius: var(--universal-border-radius);
+      }
+      &:last-child{
+          border-bottom-right-radius: var(--universal-border-radius);
+      }
+    }
+  }
+}
 // Mobile
 @media screen and (max-width: #{$table-mobile-breakpoint - 1px}){
   @if $_include-horizontal-table {