Mark base and variants
This commit is contained in:
Angelos Chalaris
parent
f723e23b8a
commit
c5247edfb8
|
|
@ -73,3 +73,11 @@
|
||||||
## 20161015
|
## 20161015
|
||||||
|
|
||||||
- Updated references to `background-color` and `background-image` to use the `background` shorthand instead.
|
- Updated references to `background-color` and `background-image` to use the `background` shorthand instead.
|
||||||
|
- Changed palette white from `#f9f9f9` to `#fcfcf` to pass all WCAG tests.
|
||||||
|
- Added styling for `mark` elements to serve as primary contextual elements.
|
||||||
|
- Added mixin for `mark` elements (`make-mark-alt-color`) to make variants of the `mark` element (`secondary` and `tertiary`).
|
||||||
|
- Made color palette for marks, passes all WCAG tests.
|
||||||
|
- `mark` element styling (`padding`, `margin`, `font-size`, `line-height`) implemented and optimized.
|
||||||
|
- Optimized `mark` color variant mixin.
|
||||||
|
- Tweaked values of `mark` color variants to be less strict but still pass the WCAG AA test and most other tests (sometimes they won't pass the WCAG AAA test but that's ok).
|
||||||
|
- Added mixin for `mark` elements (`make-mark-alt-style`) to make style variants (`tag` and `bubble`). Optimized.
|
||||||
|
|
@ -12,7 +12,7 @@
|
||||||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||||||
<link rel="stylesheet" href="../../flavors/v2/mini-default.css">
|
<link rel="stylesheet" href="../../flavors/v2/mini-default.css">
|
||||||
<!-- Live demo styled as of commit 42817a3 (20161014) -->
|
<!-- Live demo styled as of commit 42817a3 (20161014) -->
|
||||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/42817a32139e62d3af599280fb07906ca6c40d39/flavors/v2/mini-default.min.css">
|
<!-- <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/42817a32139e62d3af599280fb07906ca6c40d39/flavors/v2/mini-default.min.css"> -->
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<span style="text-align: center;">
|
<span style="text-align: center;">
|
||||||
|
|
@ -39,6 +39,8 @@
|
||||||
Stuff here....
|
Stuff here....
|
||||||
}</pre>
|
}</pre>
|
||||||
<hr>
|
<hr>
|
||||||
<p>This is some text with <small>small text</small>, superscript<sup>12</sup> and subscript<sub>4</sub>.</p>
|
<p>This is some text with <small>small text</small>, superscript<sup>12</sup> and subscript<sub>4</sub>. Oh, I am a <mark>primary mark</mark> and I am a <mark class="secondary">secondary mark</mark> and I am a <mark class="tertiary">tertiary mark</mark>.</p>
|
||||||
|
<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>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -12,7 +12,7 @@ html, * {
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: #222;
|
color: #222;
|
||||||
background: #f9f9f9; }
|
background: #fcfcfc; }
|
||||||
|
|
||||||
article, aside, footer, header, nav, section, figcaption, figure, main {
|
article, aside, footer, header, nav, section, figcaption, figure, main {
|
||||||
display: block; }
|
display: block; }
|
||||||
|
|
@ -80,7 +80,7 @@ pre {
|
||||||
kbd {
|
kbd {
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
background: #222;
|
background: #222;
|
||||||
color: #f9f9f9;
|
color: #fcfcfc;
|
||||||
padding: 2px 4px; }
|
padding: 2px 4px; }
|
||||||
|
|
||||||
small, sup, sub {
|
small, sup, sub {
|
||||||
|
|
@ -97,6 +97,13 @@ sup, sub {
|
||||||
position: relative;
|
position: relative;
|
||||||
vertical-align: baseline; }
|
vertical-align: baseline; }
|
||||||
|
|
||||||
|
mark {
|
||||||
|
background: #0047b3;
|
||||||
|
color: #fcfcfc;
|
||||||
|
font-size: 95%;
|
||||||
|
line-height: 1;
|
||||||
|
padding: 1px; }
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 1. Remove the gray background on active links in IE 10.
|
* 1. Remove the gray background on active links in IE 10.
|
||||||
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
|
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
|
||||||
|
|
@ -133,13 +140,6 @@ abbr[title] {
|
||||||
dfn {
|
dfn {
|
||||||
font-style: italic; }
|
font-style: italic; }
|
||||||
|
|
||||||
/**
|
|
||||||
* Add the correct background and color in IE 9-.
|
|
||||||
*/
|
|
||||||
mark {
|
|
||||||
background: #ff0;
|
|
||||||
color: #000; }
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Add the correct display in IE 9-.
|
* Add the correct display in IE 9-.
|
||||||
*/
|
*/
|
||||||
|
|
@ -307,3 +307,17 @@ menu {
|
||||||
*/
|
*/
|
||||||
summary {
|
summary {
|
||||||
display: list-item; }
|
display: list-item; }
|
||||||
|
|
||||||
|
mark.secondary {
|
||||||
|
background: #cc2900; }
|
||||||
|
|
||||||
|
mark.tertiary {
|
||||||
|
background: #00802b; }
|
||||||
|
|
||||||
|
mark.tag {
|
||||||
|
border-radius: 2px;
|
||||||
|
padding: 2px; }
|
||||||
|
|
||||||
|
mark.bubble {
|
||||||
|
border-radius: 200px;
|
||||||
|
padding: 3px 5px; }
|
||||||
|
|
|
||||||
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:#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;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,#ccc,#666,#ccc);background:-webkit-linear-gradient(to right,#ccc,#666,#ccc)}code,kbd,pre,samp{font-family:monospace,monospace}code{border-radius:2px;background:#ddd;padding:2px 4px}pre{overflow:auto;border-radius:0 2px 2px 0;background:#ddd;padding:12px;margin:1px 10px;border-left:3px solid #0039e6}kbd{border-radius:2px;background:#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}dfn{font-style:italic}mark{background:#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:#fcfcfc}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;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,#ccc,#666,#ccc);background:-webkit-linear-gradient(to right,#ccc,#666,#ccc)}code,kbd,pre,samp{font-family:monospace,monospace}code{border-radius:2px;background:#ddd;padding:2px 4px}pre{overflow:auto;border-radius:0 2px 2px 0;background:#ddd;padding:12px;margin:1px 10px;border-left:3px solid #0039e6}kbd{border-radius:2px;background:#222;color:#fcfcfc;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:#0047b3;color:#fcfcfc;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:#cc2900}mark.tertiary{background:#00802b}mark.tag{border-radius:2px;padding:2px}mark.bubble{border-radius:200px;padding:3px 5px}
|
||||||
|
|
@ -10,7 +10,7 @@
|
||||||
*/
|
*/
|
||||||
// Basic rules for body and typography
|
// Basic rules for body and typography
|
||||||
$fore-color: #222; // Text and general foreground color
|
$fore-color: #222; // Text and general foreground color
|
||||||
$back-color: #f9f9f9; // Body background color
|
$back-color: #fcfcfc; // Body background color
|
||||||
$base-font-family: "\"Helvetica Neue\", Helvetica, sans-serif"; // Default fonts for all elements
|
$base-font-family: "\"Helvetica Neue\", Helvetica, sans-serif"; // Default fonts for all elements
|
||||||
$base-font-size: 1em; // Default font sizing for all elements
|
$base-font-size: 1em; // Default font sizing for all elements
|
||||||
$base-line-height: 1.5; // Default line height for all elements.
|
$base-line-height: 1.5; // Default line height for all elements.
|
||||||
|
|
@ -74,8 +74,29 @@ $sup-font-size: 75%; // Font size for <sup> elements
|
||||||
$sub-font-size: 75%; // Font size for <sub> elements
|
$sub-font-size: 75%; // Font size for <sub> elements
|
||||||
$sup-top: -0.5em; // <sup> top
|
$sup-top: -0.5em; // <sup> top
|
||||||
$sub-bottom: -0.25em; // <sub> bottom
|
$sub-bottom: -0.25em; // <sub> bottom
|
||||||
|
$mark-back-color: #0047b3; // Background color for <mark>
|
||||||
|
$mark-fore-color: $back-color; // Text color for <mark>
|
||||||
|
$mark-font-size: 95%; // Font size for <mark>
|
||||||
|
$mark-line-height: 1; // Line height for <mark>
|
||||||
|
$mark-padding: 1px; // Padding for <mark>
|
||||||
|
$mark-margin: 0; // Margin for <mark>
|
||||||
|
$mark-variant1-name: 'secondary'; // Class name for <mark> variant 1
|
||||||
|
$mark-variant1-back-color: #cc2900; // Background color for <mark> variant 1
|
||||||
|
$mark-variant2-name: 'tertiary'; // Class name for <mark> variant 2
|
||||||
|
$mark-variant2-back-color: #00802b; // Background color for <mark> variant 2
|
||||||
|
$mark-style1-name: 'tag'; // Class name for <mark> style 1
|
||||||
|
$mark-style1-border-radius: 2px; // Border radius for <mark> style 1
|
||||||
|
$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
|
||||||
// Enable base
|
// Enable base
|
||||||
@import '../../scss/v2/base';
|
@import '../../scss/v2/base';
|
||||||
|
// Use mixins frm base
|
||||||
|
@include make-mark-alt-color($mark-variant1-name, $mark-variant1-back-color);
|
||||||
|
@include make-mark-alt-color($mark-variant2-name, $mark-variant2-back-color);
|
||||||
|
@include make-mark-alt-style($mark-style1-name, $mark-style1-border-radius, $mark-style1-padding);
|
||||||
|
@include make-mark-alt-style($mark-style2-name, $mark-style2-border-radius, $mark-style2-padding);
|
||||||
// Notes:
|
// Notes:
|
||||||
// [1] - It is recommended to set the value of $apply-defaults-to-all to `true`, unless you want to apply extra styling
|
// [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.
|
// to elements manually.
|
||||||
|
|
|
||||||
|
|
@ -276,6 +276,49 @@ sup, sub {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Default styling for mark. Use mixins for alternate styles.
|
||||||
|
mark {
|
||||||
|
background: $mark-back-color;
|
||||||
|
color: $mark-fore-color;
|
||||||
|
@if $mark-font-size != 100% {
|
||||||
|
font-size: $mark-font-size;
|
||||||
|
}
|
||||||
|
@if $mark-line-height != $base-line-height {
|
||||||
|
line-height: $mark-line-height;
|
||||||
|
}
|
||||||
|
@if $mark-padding != 0 {
|
||||||
|
padding: $mark-padding;
|
||||||
|
}
|
||||||
|
@if $mark-margin != 0 {
|
||||||
|
margin: $mark-margin;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Mixin for alternate mark (contextual color variants).
|
||||||
|
// TODO: DOCUMENTATION
|
||||||
|
@mixin make-mark-alt-color ($mark-alt-name, $mark-alt-back-color, $mark-alt-fore-color: $mark-fore-color) {
|
||||||
|
mark.#{$mark-alt-name} {
|
||||||
|
@if $mark-alt-back-color != $mark-back-color {
|
||||||
|
background: $mark-alt-back-color;
|
||||||
|
}
|
||||||
|
@if $mark-alt-fore-color != $mark-fore-color {
|
||||||
|
color: $mark-alt-fore-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Mixin for alternative mark styles (contextual tags).
|
||||||
|
// TODO: DOCUMENTATION
|
||||||
|
@mixin make-mark-alt-style ($mark-alt-name, $mark-alt-border-radius, $mark-alt-padding: $mark-padding) {
|
||||||
|
mark.#{$mark-alt-name} {
|
||||||
|
@if $mark-alt-border-radius != 0 {
|
||||||
|
border-radius: $mark-alt-border-radius;
|
||||||
|
}
|
||||||
|
@if $mark-alt-padding != $mark-padding {
|
||||||
|
padding: $mark-alt-padding;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 1. Remove the gray background on active links in IE 10.
|
* 1. Remove the gray background on active links in IE 10.
|
||||||
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
|
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
|
||||||
|
|
@ -315,15 +358,6 @@ dfn {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Add the correct background and color in IE 9-.
|
|
||||||
*/
|
|
||||||
|
|
||||||
mark {
|
|
||||||
background: #ff0;
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Add the correct display in IE 9-.
|
* Add the correct display in IE 9-.
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue