diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md index 39684f4..9f3e0ce 100644 --- a/docs/v2/DEVLOG.md +++ b/docs/v2/DEVLOG.md @@ -72,4 +72,12 @@ ## 20161015 -- Updated references to `background-color` and `background-image` to use the `background` shorthand instead. \ No newline at end of file +- 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. \ No newline at end of file diff --git a/docs/v2/index.html b/docs/v2/index.html index 9868e23..8aa85d0 100644 --- a/docs/v2/index.html +++ b/docs/v2/index.html @@ -12,7 +12,7 @@ - + @@ -39,6 +39,8 @@ Stuff here.... }
-

This is some text with small text, superscript12 and subscript4.

+

This is some text with small text, superscript12 and subscript4. Oh, I am a primary mark and I am a secondary mark and I am a tertiary mark.

+

Tag marks are like this: primary mark, secondary mark, tertiary mark.

+

Bubble marks are like this: primary mark, secondary mark, tertiary mark.

\ No newline at end of file diff --git a/flavors/v2/mini-default.css b/flavors/v2/mini-default.css index 28eccea..0203f9f 100644 --- a/flavors/v2/mini-default.css +++ b/flavors/v2/mini-default.css @@ -12,7 +12,7 @@ html, * { body { margin: 0; color: #222; - background: #f9f9f9; } + background: #fcfcfc; } article, aside, footer, header, nav, section, figcaption, figure, main { display: block; } @@ -80,7 +80,7 @@ pre { kbd { border-radius: 2px; background: #222; - color: #f9f9f9; + color: #fcfcfc; padding: 2px 4px; } small, sup, sub { @@ -97,6 +97,13 @@ sup, sub { position: relative; 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. * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. @@ -133,13 +140,6 @@ abbr[title] { dfn { font-style: italic; } -/** - * Add the correct background and color in IE 9-. - */ -mark { - background: #ff0; - color: #000; } - /** * Add the correct display in IE 9-. */ @@ -307,3 +307,17 @@ menu { */ 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; } diff --git a/flavors/v2/mini-default.min.css b/flavors/v2/mini-default.min.css index b726f2a..1117aee 100644 --- a/flavors/v2/mini-default.min.css +++ b/flavors/v2/mini-default.min.css @@ -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} \ No newline at end of file +*,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} \ No newline at end of file diff --git a/flavors/v2/mini-default.scss b/flavors/v2/mini-default.scss index 4c8c501..2c5343c 100644 --- a/flavors/v2/mini-default.scss +++ b/flavors/v2/mini-default.scss @@ -10,7 +10,7 @@ */ // Basic rules for body and typography $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-size: 1em; // Default font sizing 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 elements $sub-font-size: 75%; // Font size for elements $sup-top: -0.5em; // top $sub-bottom: -0.25em; // bottom +$mark-back-color: #0047b3; // Background color for +$mark-fore-color: $back-color; // Text color for +$mark-font-size: 95%; // Font size for +$mark-line-height: 1; // Line height for +$mark-padding: 1px; // Padding for +$mark-margin: 0; // Margin for +$mark-variant1-name: 'secondary'; // Class name for variant 1 +$mark-variant1-back-color: #cc2900; // Background color for variant 1 +$mark-variant2-name: 'tertiary'; // Class name for variant 2 +$mark-variant2-back-color: #00802b; // Background color for variant 2 +$mark-style1-name: 'tag'; // Class name for style 1 +$mark-style1-border-radius: 2px; // Border radius for style 1 +$mark-style1-padding: 2px; // Padding for style 1 +$mark-style2-name: 'bubble'; // Class name for style 2 +$mark-style2-border-radius: 200px; // Border radius for style 2 +$mark-style2-padding: 3px 5px; // Padding for style 2 // Enable 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: // [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. diff --git a/scss/v2/_base.scss b/scss/v2/_base.scss index dfa2444..7a48218 100644 --- a/scss/v2/_base.scss +++ b/scss/v2/_base.scss @@ -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. * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. @@ -315,15 +358,6 @@ dfn { font-style: italic; } -/** - * Add the correct background and color in IE 9-. - */ - -mark { - background: #ff0; - color: #000; -} - /** * Add the correct display in IE 9-. */