Small element styles
This commit is contained in:
Angelos Chalaris
parent
77213d3211
commit
e867634f9f
6 changed files with 134 additions and 75 deletions
|
|
@ -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`.
|
||||
- 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%`.
|
||||
|
|
@ -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>
|
||||
|
|
@ -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-.
|
||||
*/
|
||||
|
|
|
|||
2
flavors/v2/mini-default.min.css
vendored
2
flavors/v2/mini-default.min.css
vendored
|
|
@ -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}
|
||||
*,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}
|
||||
|
|
@ -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.
|
||||
|
|
@ -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-.
|
||||
*/
|
||||
|
|
|
|||
Loading…
Reference in a new issue