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

Link styling added to base

Browse source
This commit is contained in:
Angelos Chalaris 2016-10-19 19:52:31 +03:00
parent 25792357ab
commit 696bbcbdac
6 changed files with 62 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
docs/v2/DEVLOG.md
View file

@ -95,4 +95,9 @@
## 20161019
- More fiddling with palettes. Tried to update colors to material design: `body` `color` is now `#212121`. `body` `background` is now `#fafafa`. `small` inside header `color` is now `#424242`. Codeblock `background` is now `#e0e0e0` and `pre` sidebar `border-color` is `#1565c0`. `mark` `background`s changed to `#0277bd`, `#f44336` and `#558b2f` respectively.
- Added `display: inline-block` to `mark` alternate styles, to avoid splitting of the element into smaller parts (e.g. broken pills).
- Added `display: inline-block` to `mark` alternate styles, to avoid splitting of the element into smaller parts (e.g. broken pills).
- Started styling links. `a` `color` will be `#0277bd` normally.
- Added `background` property to `a` in order to apply underlining using image.
- Added flag for `a` `text-decoration:underline` (`$apply-link-underline`) and checks/optimizations for `font-weight`.
- Removed fixes from Normalize about `a` elements, as they were opinionated and unnecessary.
- Added flag for `a` using fancy `:hover` and other focused effects instead of `color` (`$apply-link-hover-fade`).

7
docs/v2/index.html
View file

@ -11,13 +11,13 @@
<!-- Github buttons javascript file -->
<script async defer src="https://buttons.github.io/buttons.js"></script>
<!-- Live demo styled as of commit 42817a3 (20161014) -->
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/9f771efecf44e0600e2359690be260181aad8290/flavors/v2/mini-default.min.css">
<!-- <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/9f771efecf44e0600e2359690be260181aad8290/flavors/v2/mini-default.min.css"> -->
<link rel="stylesheet" href="../../flavors/v2/mini-default.css">
</head>
<body>
<span style="text-align: center;">
<img src="mini-logo.svg" style="display: block; height: 80px; width: 84px; margin: 10px auto -14px; background: #00802b; border-radius: 6px; padding: 8px; padding-top: 12px;">
<h1>mini.css v2.0 - <span style="color: #00802b; line-height: 1em;">Fermion</span><small>Minimal responsive style-agnostic front end framework</small></h1>
<img src="mini-logo.svg" style="display: block; height: 80px; width: 84px; margin: 10px auto -14px; background: #558b2f; border-radius: 6px; padding: 8px; padding-top: 12px;">
<h1>mini.css v2.0 - <span style="color: #558b2f; line-height: 1em;">Fermion</span><small>Minimal responsive style-agnostic front end framework</small></h1>
<p style="margin-top: -1em;">
<a class="github-button" href="https://github.com/chalarangelo/mini.css" data-icon="octicon-eye" data-count-href="/chalarangelo/mini.css/watchers" data-count-api="/repos/chalarangelo/mini.css#subscribers_count" data-count-aria-label="# watchers on GitHub" aria-label="Watch chalarangelo/mini.css on GitHub">Watch</a>
<a class="github-button" href="https://github.com/chalarangelo/mini.css" data-icon="octicon-star" data-count-href="/chalarangelo/mini.css/stargazers" data-count-api="/repos/chalarangelo/mini.css#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star chalarangelo/mini.css on GitHub">Star</a>
@ -44,5 +44,6 @@
<p>Tag marks are like this: <mark class="tag">primary mark</mark>, <mark class="tag secondary">secondary mark</mark>, <mark class="tag tertiary">tertiary mark</mark>.</p>
<p>Bubble marks are like this: <mark class="bubble">primary mark</mark>, <mark class="bubble secondary">secondary mark</mark>, <mark class="bubble tertiary">tertiary mark</mark>.</p>
<h3>I am a header with <mark class="bubble secondary">bubbles</mark> and <mark class="tag">tags</mark></h3>
<p>I am a paragraph and I have a <a href="https://github.com/Chalarangelo/mini.css">link to the Github repo</a>.</p>
</body>
</html>

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

@ -104,23 +104,15 @@ mark {
line-height: 1;
padding: 1px; }
/**
* 1. Remove the gray background on active links in IE 10.
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
*/
a {
background-color: transparent;
/* 1 */
-webkit-text-decoration-skip: objects;
/* 2 */ }
/**
* Remove the outline on focused links when they are also active or hovered
* in all browsers (opinionated).
*/
a:active,
a:hover {
outline-width: 0; }
color: #0277bd;
text-decoration: underline;
opacity: 1;
transition: all 0.3s ease 0s; }
a:visited {
color: #01579b; }
a:hover, a:focus, a:active {
opacity: 0.75; }
/**
* 1. Remove the bottom border in Firefox 39-.

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:#212121;background:#fafafa}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:#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}mark{background:#0277bd;color:#fafafa;font-size:95%;line-height:1;padding:1px}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}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}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}mark{background:#0277bd;color:#fafafa;font-size:95%;line-height:1;padding:1px}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}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}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}

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

@ -90,6 +90,15 @@ $mark-style1-padding: 2px; // Padding for <mark> style 1
$mark-style2-name: 'bubble'; // Class name for <mark> style 2
$mark-style2-border-radius: 200px; // Border radius for <mark> style 2
$mark-style2-padding: 3px 5px; // Padding for <mark> style 2
$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]
$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]
//$link-hover-fore-color: #0288d1; // Text color for <a> when hovered or focused
// Enable base
@import '../../scss/v2/base';
// Use mixins frm base
@ -109,4 +118,8 @@ $mark-style2-padding: 3px 5px; // Padding for <mark> style 2
// [5] - if the value of $add-pre-element-sidebar is set to true, the style specified in $pre-element-sidebar-style will
// 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.
// `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
// 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.

47
scss/v2/_base.scss
View file

@ -325,25 +325,36 @@ mark.#{$mark-alt-name} {
}
}
/**
* 1. Remove the gray background on active links in IE 10.
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
*/
a {
background-color: transparent; /* 1 */
-webkit-text-decoration-skip: objects; /* 2 */
$apply-link-underline: true !default;
$apply-link-hover-fade: true !default;
a{
color: $link-fore-color;
@if $apply-link-underline {
text-decoration: underline;
}
@else {
text-decoration: none;
}
@if $link-font-weight != 500 {
font-weight: $link-font-weight;
}
@if $apply-link-hover-fade {
opacity: 1;
transition: all 0.3s ease 0s;
}
&:visited {
color: $link-visited-fore-color;
}
@if $apply-link-hover-fade {
&:hover, &:focus, &:active {
opacity: 0.75;
}
}
@else {
&:hover, &:focus, &:active {
color: $link-hover-fore-color;
}
}
/**
* Remove the outline on focused links when they are also active or hovered
* in all browsers (opinionated).
*/
a:active,
a:hover {
outline-width: 0;
}
/**