From e867634f9fca28d5307e1c6af5c8b14e9dcb398f Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Thu, 13 Oct 2016 18:56:17 +0300
Subject: [PATCH] Small element styles

---
 docs/v2/DEVLOG.md               |   4 +-
 docs/v2/index.html              |   3 +-
 flavors/v2/mini-default.css     |  37 +++-----
 flavors/v2/mini-default.min.css |   2 +-
 flavors/v2/mini-default.scss    |   9 +-
 scss/v2/_base.scss              | 154 ++++++++++++++++++++++----------
 6 files changed, 134 insertions(+), 75 deletions(-)

diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md
index f2bb6ab..505b89d 100644
--- a/docs/v2/DEVLOG.md
+++ b/docs/v2/DEVLOG.md
@@ -47,4 +47,6 @@
 - Removed the `font-size: 1em` for the code elements (`code`, `pre`, `kbd`, `samp`) as they should normally be styled using the first style that applies to `html` and all elements. **Highly suggested to use `$apply-defaults-to-all:	true;` always.**
 - Added variables for `code`, `pre`, `kbd`, `samp` and a flag for `samp` (`$style-samp-element`) to make sure that no unnecessary styles are added if the `samp` element is not to be used by the developer.
 - Added conditions to make sure the least amount of code is used and no defaults are redefined when styling `code`. `kbd`, `samp` and `pre`.
-- Changed padding of `pre` elements to `6px` and later to `8px`. Changed color for `hr` to `#666` and later to `#888`.
\ No newline at end of file
+- Changed padding of `pre` elements to `6px` and later to `8px`. Changed color for `hr` to `#666` and later to `#888`.
+- Styling and optimization for `small`, `sub` and `sup` elements.
+- Changed `font-size` of `small`, `sub` and `sup` elements to `75%`.
\ No newline at end of file
diff --git a/docs/v2/index.html b/docs/v2/index.html
index 257d91e..77e81d7 100644
--- a/docs/v2/index.html
+++ b/docs/v2/index.html
@@ -29,6 +29,7 @@
   <pre>Line 1 {
     Stuff here....
 }</pre>
-<hr>
+  <hr>
+  <p>This is some text with <small>small text</small>, superscript<sup>12</sup> and subscript<sub>4</sub>.</p>
   </body>
 </html>
\ No newline at end of file
diff --git a/flavors/v2/mini-default.css b/flavors/v2/mini-default.css
index 6792e24..ec8b95a 100644
--- a/flavors/v2/mini-default.css
+++ b/flavors/v2/mini-default.css
@@ -70,6 +70,20 @@ kbd {
   color: #f9f9f9;
   padding: 2px 4px; }
 
+small, sup, sub {
+  font-size: 75%; }
+
+sup {
+  top: -0.5em; }
+
+sub {
+  bottom: -0.25em; }
+
+sup, sub {
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline; }
+
 /**
  * 1. Remove the gray background on active links in IE 10.
  * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
@@ -127,29 +141,6 @@ mark {
   background-color: #ff0;
   color: #000; }
 
-/**
- * Add the correct font size in all browsers.
- */
-small {
-  font-size: 80%; }
-
-/**
- * Prevent `sub` and `sup` elements from affecting the line height in
- * all browsers.
- */
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline; }
-
-sub {
-  bottom: -0.25em; }
-
-sup {
-  top: -0.5em; }
-
 /**
  * Add the correct display in IE 9-.
  */
diff --git a/flavors/v2/mini-default.min.css b/flavors/v2/mini-default.min.css
index 82f8ab4..4965621 100644
--- a/flavors/v2/mini-default.min.css
+++ b/flavors/v2/mini-default.min.css
@@ -1 +1 @@
-*,html{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:1em;line-height:1.5;-webkit-text-size-adjust:100%}body{margin:0;color:#222;background-color:#f9f9f9}article,aside,figcaption,figure,footer,header,main,nav,section{display:block}h1,h2,h3,h4,h5,h6{line-height:1.2em;margin:.7em 0;font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#444}h1{font-size:2em}h2{font-size:1.5em}h3{font-size:1.15em}h4{font-size:1em}h5{font-size:.85em}h6{font-size:.75em}hr{box-sizing:content-box;border:0;height:0;overflow:visible;line-height:1.2em;margin:.5em 4px;border-top:1px solid #888}code,kbd,pre,samp{font-family:monospace,monospace}code{border-radius:2px;background-color:#ddd;padding:2px 4px}pre{border-radius:2px;background-color:#ddd;padding:8px}kbd{border-radius:2px;background-color:#222;color:#f9f9f9;padding:2px 4px}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}
\ No newline at end of file
+*,html{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:1em;line-height:1.5;-webkit-text-size-adjust:100%}body{margin:0;color:#222;background-color:#f9f9f9}article,aside,figcaption,figure,footer,header,main,nav,section{display:block}h1,h2,h3,h4,h5,h6{line-height:1.2em;margin:.7em 0;font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#444}h1{font-size:2em}h2{font-size:1.5em}h3{font-size:1.15em}h4{font-size:1em}h5{font-size:.85em}h6{font-size:.75em}hr{box-sizing:content-box;border:0;height:0;overflow:visible;line-height:1.2em;margin:.5em 4px;border-top:1px solid #888}code,kbd,pre,samp{font-family:monospace,monospace}code{border-radius:2px;background-color:#ddd;padding:2px 4px}pre{border-radius:2px;background-color:#ddd;padding:8px}kbd{border-radius:2px;background-color:#222;color:#f9f9f9;padding:2px 4px}small,sub,sup{font-size:75%}sup{top:-.5em}sub{bottom:-.25em}sub,sup{line-height:0;position:relative;vertical-align:baseline}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}audio,video{display:inline-block}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}
\ No newline at end of file
diff --git a/flavors/v2/mini-default.scss b/flavors/v2/mini-default.scss
index 536720e..0ac171f 100644
--- a/flavors/v2/mini-default.scss
+++ b/flavors/v2/mini-default.scss
@@ -50,12 +50,17 @@ $kbd-element-back-color:		$fore-color;									// Background color for <kbd>
 $kbd-element-border-style:		0;												// Border style for <kbd>
 $kbd-element-border-radius:		2px;											// Border radius for <kbd>
 $style-samp-element:			false;											// Should styles for <samp> be included? 
-																				// (`true`/`false`)
+																				// (`true`/`false`) [3]
 //$samp-element-padding:		2px 4px;										// Padding for <samp>
 //$samp-element-fore-color:		$fore-color;									// Text color for <samp>
 //$samp-element-back-color:		#2678b3;										// Background color for <samp>
 //$samp-element-border-style:	0;												// Border style for <samp>
 //$samp-element-border-radius:	2px;											// Border radius for <samp>
+$small-font-size:				75%;											// Font size for <small> elements
+$sup-font-size:					75%;											// Font size for <sup> elements
+$sub-font-size:					75%;											// Font size for <sub> elements
+$sup-top:						-0.5em;											// <sup> top
+$sub-bottom:					-0.25em;										// <sub> bottom
 //	Enable base
 @import '../../scss/v2/base';
 //	Notes:
@@ -63,3 +68,5 @@ $style-samp-element:			false;											// Should styles for <samp> be included?
 //	to elements manually.
 // [2] - If the value of $use-default-code-fonts is set to `false` the value of $code-font-family will be used. `true`
 //	will apply the proper fix to use monospace font without any problems on all browsers.
+// [3] - If the value of $style-samp-element is set to `false`, no styling will be included in the final CSS file for
+//	`samp` elements. Otherwise, the styling defined in the $samp-... variables will be applied.
\ No newline at end of file
diff --git a/scss/v2/_base.scss b/scss/v2/_base.scss
index aa17bd5..83755d8 100644
--- a/scss/v2/_base.scss
+++ b/scss/v2/_base.scss
@@ -85,52 +85,52 @@ code {
 @if $code-element-border-style != 0{
   border: $code-element-border-style;
 }
-@if $code-element-border-radius != 0{
+@if $code-element-border-radius != 0 {
   border-radius: $code-element-border-radius;
 }
-@if $code-element-back-color != $back-color{
+@if $code-element-back-color != $back-color {
  background-color: $code-element-back-color;
 }
-@if $code-element-fore-color != $fore-color{
+@if $code-element-fore-color != $fore-color {
   color: $code-element-fore-color;
 }
-@if $code-element-padding != 0{
+@if $code-element-padding != 0 {
   padding: $code-element-padding;
 }
 }
 
 pre {
-@if $pre-element-border-style != 0{
+@if $pre-element-border-style != 0 {
   border: $pre-element-border-style;
 }
-@if $pre-element-border-radius != 0{
+@if $pre-element-border-radius != 0 {
   border-radius: $pre-element-border-radius;
 }
-@if $pre-element-back-color != $back-color{
+@if $pre-element-back-color != $back-color {
  background-color: $pre-element-back-color;
 }
-@if $pre-element-fore-color != $fore-color{
+@if $pre-element-fore-color != $fore-color {
   color: $pre-element-fore-color;
 }
-@if $pre-element-padding != 0{
+@if $pre-element-padding != 0 {
   padding: $pre-element-padding;
 }
 }
 
 kbd {
-@if $kbd-element-border-style != 0{
+@if $kbd-element-border-style != 0 {
   border: $kbd-element-border-style;
 }
-@if $kbd-element-border-radius != 0{
+@if $kbd-element-border-radius != 0 {
   border-radius: $kbd-element-border-radius;
 }
-@if $kbd-element-back-color != $back-color{
+@if $kbd-element-back-color != $back-color {
  background-color: $kbd-element-back-color;
 }
-@if $kbd-element-fore-color != $fore-color{
+@if $kbd-element-fore-color != $fore-color {
   color: $kbd-element-fore-color;
 }
-@if $kbd-element-padding != 0{
+@if $kbd-element-padding != 0 {
   padding: $kbd-element-padding;
 }
 }
@@ -138,24 +138,111 @@ kbd {
 $style-samp-element: false !default;
 @if $style-samp-element {
 samp{
-@if $samp-element-border-style != 0{
+@if $samp-element-border-style != 0 {
   border: $samp-element-border-style;
 }
-@if $samp-element-border-radius != 0{
+@if $samp-element-border-radius != 0 {
   border-radius: $samp-element-border-radius;
 }
-@if $samp-element-back-color != $back-color{
+@if $samp-element-back-color != $back-color {
  background-color: $samp-element-back-color;
 }
-@if $samp-element-fore-color != $fore-color{
+@if $samp-element-fore-color != $fore-color {
   color: $samp-element-fore-color;
 }
-@if $samp-element-padding != 0{
+@if $samp-element-padding != 0 {
   padding: $samp-element-padding;
 }
 }
 }
 
+
+@if $small-font-size == $sub-font-size and $small-font-size == $sup-font-size {
+small, sup, sub {
+  font-size: $small-font-size;
+}
+sup {
+  top: $sup-top;
+}
+sub{
+  bottom: $sub-bottom;
+}
+sup, sub {
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+}
+@else if $small-font-size == $sub-font-size {
+small, sub {
+  font-size: $small-font-size;
+}
+sup {
+  font-size: $sup-font-size;
+  top: $sup-top;
+}
+sub {
+  bottom: $sub-bottom;
+}
+sup, sub {
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+}
+@else if $small-font-size == $sup-font-size {
+small, sup {
+  font-size: $small-font-size;
+}
+sup {
+  top: $sup-top;
+}
+sub {
+  font-size: $sub-font-size;
+  bottom: $sub-bottom;
+}
+sup, sub {
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+}
+@else if $sup-font-size == $sub-font-size {
+small {
+  font-size: $small-font-size;
+}
+sup, sub {
+  font-size: $sup-font-size;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+sup {
+  top: $sup-top;
+}
+sub{
+  bottom: $sub-bottom;
+}
+}
+@else {
+small {
+  font-size: $small-font-size;
+}
+sup {
+  font-size: $sup-font-size;
+  top: $sup-top;
+}
+sub{
+  font-size: $sub-font-size;
+  bottom: $sub-bottom;
+}
+sup, sub {
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+}
+
 /**
  * 1. Remove the gray background on active links in IE 10.
  * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
@@ -222,35 +309,6 @@ mark {
   color: #000;
 }
 
-/**
- * Add the correct font size in all browsers.
- */
-
-small {
-  font-size: 80%;
-}
-
-/**
- * Prevent `sub` and `sup` elements from affecting the line height in
- * all browsers.
- */
-
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-sup {
-  top: -0.5em;
-}
-
 /**
  * Add the correct display in IE 9-.
  */