1
0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-04-13 08:51:52 +02:00

Mostly housekeeping

This commit is contained in:
Angelos Chalaris 2016-10-19 22:28:40 +03:00
parent 8e4629b240
commit 936e32048d
5 changed files with 46 additions and 50 deletions

View File

@ -107,4 +107,10 @@
- Created `_contextual.scss` for `mark` styling.
- Comments and sections for core.
- Changed import in flavor, imported contextual in core.
- Corrected and finalized display of `abbr` elements with a `title` attribute: Border fix for older Firefox version was kept, dropped some styling for the underline, underline will now always be normal `text-decoration: underline` on all browsers (opinionated).
- Corrected and finalized display of `abbr` elements with a `title` attribute: Border fix for older Firefox version was kept, dropped some styling for the underline, underline will now always be normal `text-decoration: underline` on all browsers (opinionated).
- Kept display fix for `audio` and `video` for IE 9, as the elements are supported, moved to top of head.
- Added flag (`$include-dfn-fix`) to enable/disable the fix of `dfn` element on older Android versions based on user preference.
- Disabled said flag, due to hope that when this framework releases, there will be too few people using said older Android versions, so this will not be an issue. Also, `dfn` is not a very commonly used element in a lot of pages, might go unnoticed.
- Moved fix for `svg` in IE at the top.
- Added `TODO`s for other fixes.
- Updated index page, probably broke the live version for a while.

View File

@ -21,6 +21,12 @@ abbr[title] {
border-bottom: none;
text-decoration: underline; }
audio, video {
display: inline-block; }
svg:not(:root) {
overflow: hidden; }
h1, h2, h3, h4, h5, h6 {
line-height: 1.2em;
margin: 0.7em 8px;
@ -118,25 +124,6 @@ mark {
line-height: 1;
padding: 1px; }
/**
* Add the correct font style in Android 4.3-.
*/
dfn {
font-style: italic; }
/**
* Add the correct display in IE 9-.
*/
audio,
video {
display: inline-block; }
/**
* Hide the overflow in IE.
*/
svg:not(:root) {
overflow: hidden; }
/**
* 1. Change the font styles in all browsers (opinionated).
* 2. Remove the margin in Firefox and Safari.

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:#212121;background:#fafafa}article,aside,figcaption,figure,footer,header,main,nav,section{display:block}abbr[title]{border-bottom:none;text-decoration:underline}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:#424242;display:block;margin-top:-.35em;font-size:45%}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}b,strong{font-weight:700}hr{box-sizing:content-box;border:0;overflow:visible;line-height:1.2em;margin:.5em 4px;height:1px;background:linear-gradient(to right,#bdbdbd,#616161,#bdbdbd);background:-webkit-linear-gradient(to right,#bdbdbd,#616161,#bdbdbd)}code,kbd,pre,samp{font-family:monospace,monospace}code{border-radius:2px;background:#e0e0e0;padding:2px 4px}pre{overflow:auto;border-radius:0 2px 2px 0;background:#e0e0e0;padding:12px;margin:1px 10px;border-left:3px solid #1565c0}kbd{border-radius:2px;background:#212121;color:#fafafa;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{color:#0277bd;text-decoration:underline;opacity:1;transition:all .3s ease 0s}a:visited{color:#01579b}a:active,a:focus,a:hover{opacity:.75}mark{background:#0277bd;color:#fafafa;font-size:95%;line-height:1;padding:1px}dfn{font-style:italic}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}mark.secondary{background:#f44336}mark.tertiary{background:#558b2f}mark.tag{display:inline-block;border-radius:2px;padding:2px}mark.bubble{display:inline-block;border-radius:200px;padding:3px 5px}
*,html{font-family:"Helvetica Neue",Helvetica,sans-serif;font-size:1em;line-height:1.5;-webkit-text-size-adjust:100%}body{margin:0;color:#212121;background:#fafafa}article,aside,figcaption,figure,footer,header,main,nav,section{display:block}abbr[title]{border-bottom:none;text-decoration:underline}audio,video{display:inline-block}svg:not(:root){overflow:hidden}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:#424242;display:block;margin-top:-.35em;font-size:45%}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}b,strong{font-weight:700}hr{box-sizing:content-box;border:0;overflow:visible;line-height:1.2em;margin:.5em 4px;height:1px;background:linear-gradient(to right,#bdbdbd,#616161,#bdbdbd);background:-webkit-linear-gradient(to right,#bdbdbd,#616161,#bdbdbd)}code,kbd,pre,samp{font-family:monospace,monospace}code{border-radius:2px;background:#e0e0e0;padding:2px 4px}pre{overflow:auto;border-radius:0 2px 2px 0;background:#e0e0e0;padding:12px;margin:1px 10px;border-left:3px solid #1565c0}kbd{border-radius:2px;background:#212121;color:#fafafa;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{color:#0277bd;text-decoration:underline;opacity:1;transition:all .3s ease 0s}a:visited{color:#01579b}a:active,a:focus,a:hover{opacity:.75}mark{background:#0277bd;color:#fafafa;font-size:95%;line-height:1;padding:1px}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}mark.secondary{background:#f44336}mark.tertiary{background:#558b2f}mark.tag{display:inline-block;border-radius:2px;padding:2px}mark.bubble{display:inline-block;border-radius:200px;padding:3px 5px}

View File

@ -69,6 +69,8 @@ $style-samp-element: false; // Should styles for <samp> be included?
//$samp-element-back-color: #2196f3; // Background color for <samp>
//$samp-element-border-style: 0; // Border style for <samp>
//$samp-element-border-radius: 2px; // Border radius for <samp>
$include-dfn-fix: false; // Should the fix for Android 4.3 concerning <dfn>
// be included (`true`/`false`) [7]
$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
@ -94,10 +96,10 @@ $link-fore-color: #0277bd; // Text color for <a>
$link-visited-fore-color: #01579b; // Text color for visited <a>
$link-font-weight: 500; // Font weight for <a>
$apply-link-underline: true; // Should an underline be applied to all <a>
// elements? (`true`/`false`) [7]
// elements? (`true`/`false`) [8]
$apply-link-hover-fade: true; // Should the :hover and :focus state of <a>
// elements use fade-out instead of a different
// color (`true`/`false`) [8]
// color (`true`/`false`) [9]
//$link-hover-fore-color: #0288d1; // Text color for <a> when hovered or focused
// Enable base
@import '../../scss/v2/core';
@ -119,7 +121,9 @@ $apply-link-hover-fade: true; // Should the :hover and :focus state
// be applied as a left border for the <pre> elements.
// [6] - 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.
// [7] - If the value of $apply-link-underline is set to `true`, an underline will be applied to the link in its normal
// [7] - If the value of $include-dfn-fix is set to `true` a styling fix will be applied, so that the <dfn> elements are
// displayed properly on older versions of Android (4.3-) in italics. Otherwise, said fix will not be included.
// [8] - If the value of $apply-link-underline is set to `true`, an underline will be applied to the link in its normal
// color, as defined in $link-fore-color.
// [8] - If `apply-link-hover-fade` is set to `true`, a fading transition will be used for the link when hovered over or
// focused. Otherwise, the color specified in $link-hover-fore-color will be used.
// [9] - If `apply-link-hover-fade` is set to `true`, a fading transition will be used for the link when hovered over or
// focused. Otherwise, the color specified in $link-hover-fore-color will be used.

View File

@ -39,6 +39,24 @@ abbr[title] {
// &:hover:after { content: " ("attr(title) ")"; }
}
// Correct display for older versions of IE.
audio, video {
display: inline-block;
}
// Hide overflow in IE
svg:not(:root) {
overflow: hidden;
}
// Fix display in older versions of Android.
$include-dfn-fix: true !default;
@if $include-dfn-fix {
dfn {
font-style: italic;
}
}
h1, h2, h3, h4, h5, h6 {
line-height: $header-line-height;
margin: $header-margin;
@ -323,30 +341,7 @@ a{
// Contextual background elements.
@import 'mini-core/contextual';
/**
* Add the correct font style in Android 4.3-.
*/
dfn {
font-style: italic;
}
/**
* Add the correct display in IE 9-.
*/
audio,
video {
display: inline-block;
}
/**
* Hide the overflow in IE.
*/
svg:not(:root) {
overflow: hidden;
}
// TODO: Move to forms and buttons respectively
/**
* 1. Change the font styles in all browsers (opinionated).
@ -446,6 +441,8 @@ legend {
white-space: normal; /* 1 */
}
// TODO: Move to progress module
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
@ -458,6 +455,8 @@ progress {
* Remove the default vertical scrollbar in IE.
*/
// TODO: Move to forms
textarea {
overflow: auto;
}