diff --git a/docs/assets/css/code.scss b/docs/assets/css/code.scss index b06924a7c..5486a5643 100644 --- a/docs/assets/css/code.scss +++ b/docs/assets/css/code.scss @@ -18,24 +18,11 @@ pre[class*='language-'] { word-wrap: normal; line-height: 1.5; - -moz-tab-size: 4; - -o-tab-size: 4; tab-size: 4; - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; hyphens: none; } -pre[class*='language-']::-moz-selection, -pre[class*='language-'] ::-moz-selection, -code[class*='language-']::-moz-selection, -code[class*='language-'] ::-moz-selection { - text-shadow: none; - background: #b3d4fc; -} - pre[class*='language-']::selection, pre[class*='language-'] ::selection, code[class*='language-']::selection, @@ -110,8 +97,9 @@ pre[class*='language-'] { .language-css .token.string, .style .token.string { color: #9a6e3a; + /* This background color was intended by the author of this theme. */ - background: hsla(0, 0%, 100%, 0.5); + background: hsla(0deg, 0%, 100%, 50%); } .token.atrule, @@ -135,6 +123,7 @@ pre[class*='language-'] { .token.bold { font-weight: bold; } + .token.italic { font-style: italic; } @@ -156,7 +145,7 @@ pre[class*='language-'] { /* Error */ .highlight .err { - color: #a00; + color: #a10000; background-color: #faa; } @@ -273,7 +262,7 @@ pre[class*='language-'] { /* Literal.Number */ .highlight .m { - color: #f60; + color: #c04d00; } /* Literal.String */ @@ -293,7 +282,7 @@ pre[class*='language-'] { /* Name.Class */ .highlight .nc { - color: #0a8; + color: #008067; } /* Name.Constant */ @@ -323,7 +312,7 @@ pre[class*='language-'] { /* Name.Label */ .highlight .nl { - color: #99f; + color: #6a6ab0; } /* Name.Namespace */ @@ -353,17 +342,17 @@ pre[class*='language-'] { /* Literal.Number.Float */ .highlight .mf { - color: #f60; + color: #c04d00; } /* Literal.Number.Hex */ .highlight .mh { - color: #f60; + color: #c04d00; } /* Literal.Number.Integer */ .highlight .mi { - color: #f60; + color: #c04d00; } /* Literal.Number.Oct */ @@ -414,7 +403,7 @@ pre[class*='language-'] { /* Literal.String.Regex */ .highlight .sr { - color: #3aa; + color: #257d7d; } /* Literal.String.Single */ diff --git a/docs/pages/grid.md b/docs/pages/grid.md index e2dd28195..101192fe7 100644 --- a/docs/pages/grid.md +++ b/docs/pages/grid.md @@ -137,18 +137,12 @@ variation_groups: ```scss - .u-grid-column( @columns: 1; @total: @grid_total-columns; @prefix: 0; @suffix: 0 ) + @include u-grid-column( $columns: 1, $total: $grid-total-columns ) ``` - Create a grid column that is `@columns` wide given `@total` total grid columns. - - - Optionally give the column left or right padding with the - - `@prefix` and `@suffix` parameters. - + Create a grid column that is `$columns` wide given `$total` total grid columns. Grid columns use transparent borders to create the gutters of the grid, @@ -383,16 +377,6 @@ variation_groups: Read on for more details on the variables and mixins this component provides. - - > NOTE: If you use `cf-grid.scss` directly, - - > be sure to run the file through - - > [Autoprefixer](https://github.com/postcss/autoprefixer), - - > or your compiled Capital Framework CSS will - - > not work perfectly in older browsers. guidelines: '' eyebrow: Basics title: Grid diff --git a/docs/pages/helper-classes-mixins.md b/docs/pages/helper-classes-mixins.md index 801d4727b..ac836eec3 100644 --- a/docs/pages/helper-classes-mixins.md +++ b/docs/pages/helper-classes-mixins.md @@ -2,9 +2,6 @@ title: Helper classes and mixins layout: variation section: development -status: Released -description: 'Helper classes and mixins are utilities to help front-end web - development meet our design standards. ' variation_groups: - variations: - variation_code_snippet: >- @@ -23,7 +20,7 @@ variation_groups: `.no-js` class. - 1. Add a `no-js` class to the html + * Add a `no-js` class to the html @@ -34,20 +31,21 @@ variation_groups: ``` - 2. Add a script to remove the no-js class after confirming JavaScript is available + * Add a script to remove the no-js class after confirming JavaScript is available ```html + // Confirm availability of JavaScript and remove no-js class from html + var docElement = document.documentElement; + docElement.className = docElement.className.replace(/(^|\s)no-js(\s|$)/, '$1$2'); + + ``` - 3. Add the utility class to the element you want to hide + * Add the utility class to the element you want to hide ```html @@ -263,7 +261,13 @@ variation_groups:

16:9 flexible video player

-

To create a 16:9 flexible video player, wrap the video element in an element with u-flexible-container and add the u-flexible-container__inner to the video element.

+

+ To create a 16:9 flexible video player, + wrap the video element in an element with + u-flexible-container + and add the u-flexible-container__inner + to the video element. +