beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fancy horizontal rule styles

Browse source
This commit is contained in:
Angelos Chalaris 2016-10-13 19:33:21 +03:00
parent 51561e8ae3
commit 27527bdc4b
5 changed files with 25 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
docs/v2/DEVLOG.md
View file

@ -51,4 +51,5 @@
- Styling and optimization for `small`, `sub` and `sup` elements.
- Changed `font-size` of `small`, `sub` and `sup` elements to `75%`.
- Changed all header `margin`s to be `8px` left and right.
- Added `margin` for paragraphs (`1px` top and bottom and `10px` left and right).
- Added `margin` for paragraphs (`1px` top and bottom and `10px` left and right).
- Specified fancy styling flag (`$horizontal-rule-fancy-style`) for `hr` elements and variable (`$horizontal-rule-fancy-gradient`) to specify linear gradient styling to be used instead of the default `border` styling. This styling supports most browsers, but does not work with IE 9- and Opera Mini. Prefix `-webkit` is added to support some browsers.

5
flavors/v2/mini-default.css
View file

@ -48,11 +48,12 @@ p {
hr {
box-sizing: content-box;
border: 0;
height: 0;
overflow: visible;
line-height: 1.2em;
margin: 0.5em 4px;
border-top: 1px solid #888; }
height: 1px;
background-image: linear-gradient(to right, #ccc, #666, #ccc);
background-image: -webkit-linear-gradient(to right, #ccc, #666, #ccc); }
code, kbd, pre, samp {
font-family: monospace, monospace; }

2
flavors/v2/mini-default.min.css vendored
View file

@ -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 8px;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}p{margin:1px 10px}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}
*,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 8px;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}p{margin:1px 10px}hr{box-sizing:content-box;border:0;overflow:visible;line-height:1.2em;margin:.5em 4px;height:1px;background-image:linear-gradient(to right,#ccc,#666,#ccc);background-image:-webkit-linear-gradient(to right,#ccc,#666,#ccc)}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}

13
flavors/v2/mini-default.scss
View file

@ -32,8 +32,11 @@ $horizontal-rule-line-height: 1.2em; // <hr> line height
$horizontal-rule-margin: 0.5em 4px; // <hr> margin
$horizontal-rule-border-style: 1px solid #888; // Border style for horizontal rules (used
// in the <hr> element's border-top)
$horizontal-rule-fancy-style: true; // Should a fancy styling be applied for the
// <hr> element (`true`/`false`) [2]
$horizontal-rule-fancy-gradient:"to right, #ccc, #666, #ccc"; // Gradient style for fancy horizontal rule
$use-default-code-fonts: true; // Should default font choice (monospace) be
// used for code elements? (`true`/`false`) [2]
// used for code elements? (`true`/`false`) [3]
//$code-font-family: monospace, monospace; // Fonts for code elements if not default
$code-element-padding: 2px 4px; // Padding for <code>
$code-element-fore-color: $fore-color; // Text color for <code>
@ -51,7 +54,7 @@ $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`) [3]
// (`true`/`false`) [4]
//$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>
@ -67,7 +70,9 @@ $sub-bottom: -0.25em; // <sub> bottom
// Notes:
// [1] - It is recommended to set the value of $apply-defaults-to-all to `true`, unless you want to apply extra styling
// 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`
// [2] - If $horizontal-rule-fancy-style is set to `true` the value of $horizontal-rule-border-style will not be used and
// a gradient with the style specified in $horizontal-rule-fancy-gradient will be applied instead.
// [3] - 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
// [4] - 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.

12
scss/v2/_base.scss
View file

@ -65,12 +65,20 @@ hr {
// Fixes and defaults for styling
box-sizing: content-box;
border: 0;
height: 0;
overflow: visible;
// Actual styling using variables
line-height: $horizontal-rule-line-height;
margin: $horizontal-rule-margin;
border-top: $horizontal-rule-border-style;
$horizontal-rule-fancy-style: false !default;
@if $horizontal-rule-fancy-style {
height: 1px;
background-image: linear-gradient(#{$horizontal-rule-fancy-gradient});
background-image: -webkit-linear-gradient(#{$horizontal-rule-fancy-gradient});
}
@else {
height: 0;
border-top: $horizontal-rule-border-style;
}
}
$use-default-code-fonts: true !default;