Skip to content

Commit

Permalink
feat: update the sass variables used in new grid class #129
Browse files Browse the repository at this point in the history
  • Loading branch information
@marnel-mangrubang
marnel-mangrubang committed May 15, 2023
1 parent 49a2f13 commit d0f6cd3
Show file tree
Hide file tree
Showing 2 changed files with 27 additions and 25 deletions.
22 changes: 11 additions & 11 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
#{$scope}.#{$prefix}baseType" data-type="css"><a href="#essentials-css-#{$scope}#{$sym}#{$prefix}body,
#{$scope}.#{$prefix}baseType">#{$scope}#{$sym}#{$prefix}body, #{$scope}.#{$prefix}baseType</a></li><li class="sidebar__item sassdoc__item" data-group="essentials" data-name="#{$scope}.#{$prefix}baseParagraph" data-type="css"><a href="#essentials-css-#{$scope}.#{$prefix}baseParagraph">#{$scope}.#{$prefix}baseParagraph</a></li><li class="sidebar__item sassdoc__item" data-group="essentials" data-name="#{$scope}.#{$prefix}hyperlink" data-type="css"><a href="#essentials-css-#{$scope}.#{$prefix}hyperlink">#{$scope}.#{$prefix}hyperlink</a></li><li class="sidebar__item sassdoc__item" data-group="essentials" data-name="#{$scope}#{$sym}#{$prefix}img" data-type="css"><a href="#essentials-css-#{$scope}#{$sym}#{$prefix}img">#{$scope}#{$sym}#{$prefix}img</a></li><li class="sidebar__item sassdoc__item" data-group="essentials" data-name="#{$scope}#{$sym}#{$prefix}small,
#{$scope}.#{$prefix}type--small" data-type="css"><a href="#essentials-css-#{$scope}#{$sym}#{$prefix}small,
#{$scope}.#{$prefix}type--small">#{$scope}#{$sym}#{$prefix}small, #{$scope}.#{$prefix}type--small</a></li><li class="sidebar__item sassdoc__item" data-group="essentials" data-name="#{$scope}#{$sym}#{$prefix}p" data-type="css"><a href="#essentials-css-#{$scope}#{$sym}#{$prefix}p">#{$scope}#{$sym}#{$prefix}p</a></li><li class="sidebar__item sassdoc__item" data-group="essentials" data-name="#{$scope}.#{$prefix}fineprint" data-type="css"><a href="#essentials-css-#{$scope}.#{$prefix}fineprint">#{$scope}.#{$prefix}fineprint</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="grid"><a href="#grid">grid</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="grid-mixin"><a href="#grid-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="grid" data-name="grid_width" data-type="mixin"><a href="#grid-mixin-grid_width">grid_width</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="grid_margin" data-type="mixin"><a href="#grid-mixin-grid_margin">grid_margin</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="grid_gap" data-type="mixin"><a href="#grid-mixin-grid_gap">grid_gap</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="grid-css"><a href="#grid-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="grid" data-name="#{$scope}.#{$prefix}the_grid" data-type="css"><a href="#grid-css-#{$scope}.#{$prefix}the_grid">#{$scope}.#{$prefix}the_grid</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="headings"><a href="#headings">headings</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="headings-css"><a href="#headings-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="headings" data-name="#{$scope}.#{$prefix}heading" data-type="css"><a href="#headings-css-#{$scope}.#{$prefix}heading">#{$scope}.#{$prefix}heading</a></li><li class="sidebar__item sassdoc__item" data-group="headings" data-name="#{$scope}.#{$prefix}heading--display" data-type="css"><a href="#headings-css-#{$scope}.#{$prefix}heading--display">#{$scope}.#{$prefix}heading--display</a></li><li class="sidebar__item sassdoc__item" data-group="headings" data-name="#{$scope}.#{$prefix}heading--800" data-type="css"><a href="#headings-css-#{$scope}.#{$prefix}heading--800">#{$scope}.#{$prefix}heading--800</a></li><li class="sidebar__item sassdoc__item" data-group="headings" data-name="#{$scope}.#{$prefix}heading--700" data-type="css"><a href="#headings-css-#{$scope}.#{$prefix}heading--700">#{$scope}.#{$prefix}heading--700</a></li><li class="sidebar__item sassdoc__item" data-group="headings" data-name="#{$scope}.#{$prefix}heading--600" data-type="css"><a href="#headings-css-#{$scope}.#{$prefix}heading--600">#{$scope}.#{$prefix}heading--600</a></li><li class="sidebar__item sassdoc__item" data-group="headings" data-name="#{$scope}.#{$prefix}heading--500" data-type="css"><a href="#headings-css-#{$scope}.#{$prefix}heading--500">#{$scope}.#{$prefix}heading--500</a></li><li class="sidebar__item sassdoc__item" data-group="headings" data-name="#{$scope}.#{$prefix}heading--400" data-type="css"><a href="#headings-css-#{$scope}.#{$prefix}heading--400">#{$scope}.#{$prefix}heading--400</a></li><li class="sidebar__item sassdoc__item" data-group="headings" data-name="#{$scope}.#{$prefix}heading--300" data-type="css"><a href="#headings-css-#{$scope}.#{$prefix}heading--300">#{$scope}.#{$prefix}heading--300</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="normalize"><a href="#normalize">normalize</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="normalize-css"><a href="#normalize-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="normalize" data-name="html#{$scope}" data-type="css"><a href="#normalize-css-html#{$scope}">html#{$scope}</a></li><li class="sidebar__item sassdoc__item" data-group="normalize" data-name="#{$scope}body" data-type="css"><a href="#normalize-css-#{$scope}body">#{$scope}body</a></li><li class="sidebar__item sassdoc__item" data-group="normalize" data-name="#{$scope}main" data-type="css"><a href="#normalize-css-#{$scope}main">#{$scope}main</a></li><li class="sidebar__item sassdoc__item" data-group="normalize" data-name="#{$scope}hr" data-type="css"><a href="#normalize-css-#{$scope}hr">#{$scope}hr</a></li><li class="sidebar__item sassdoc__item" data-group="normalize" data-name="#{$scope}pre" data-type="css"><a href="#normalize-css-#{$scope}pre">#{$scope}pre</a></li><li class="sidebar__item sassdoc__item" data-group="normalize" data-name="#{$scope}a" data-type="css"><a href="#normalize-css-#{$scope}a">#{$scope}a</a></li><li class="sidebar__item sassdoc__item" data-group="normalize" data-name="#{$scope}abbr" data-type="css"><a href="#normalize-css-#{$scope}abbr">#{$scope}abbr</a></li><li class="sidebar__item sassdoc__item" data-group="normalize" data-name="#{$scope}b,
#{$scope}.#{$prefix}type--small">#{$scope}#{$sym}#{$prefix}small, #{$scope}.#{$prefix}type--small</a></li><li class="sidebar__item sassdoc__item" data-group="essentials" data-name="#{$scope}#{$sym}#{$prefix}p" data-type="css"><a href="#essentials-css-#{$scope}#{$sym}#{$prefix}p">#{$scope}#{$sym}#{$prefix}p</a></li><li class="sidebar__item sassdoc__item" data-group="essentials" data-name="#{$scope}.#{$prefix}fineprint" data-type="css"><a href="#essentials-css-#{$scope}.#{$prefix}fineprint">#{$scope}.#{$prefix}fineprint</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="grid"><a href="#grid">grid</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="grid-mixin"><a href="#grid-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="grid" data-name="grid_width" data-type="mixin"><a href="#grid-mixin-grid_width">grid_width</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="grid_margin" data-type="mixin"><a href="#grid-mixin-grid_margin">grid_margin</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="grid_gap" data-type="mixin"><a href="#grid-mixin-grid_gap">grid_gap</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="grid-css"><a href="#grid-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="grid" data-name="#{$scope}.#{$prefix}grid" data-type="css"><a href="#grid-css-#{$scope}.#{$prefix}grid">#{$scope}.#{$prefix}grid</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="headings"><a href="#headings">headings</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="headings-css"><a href="#headings-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="headings" data-name="#{$scope}.#{$prefix}heading" data-type="css"><a href="#headings-css-#{$scope}.#{$prefix}heading">#{$scope}.#{$prefix}heading</a></li><li class="sidebar__item sassdoc__item" data-group="headings" data-name="#{$scope}.#{$prefix}heading--display" data-type="css"><a href="#headings-css-#{$scope}.#{$prefix}heading--display">#{$scope}.#{$prefix}heading--display</a></li><li class="sidebar__item sassdoc__item" data-group="headings" data-name="#{$scope}.#{$prefix}heading--800" data-type="css"><a href="#headings-css-#{$scope}.#{$prefix}heading--800">#{$scope}.#{$prefix}heading--800</a></li><li class="sidebar__item sassdoc__item" data-group="headings" data-name="#{$scope}.#{$prefix}heading--700" data-type="css"><a href="#headings-css-#{$scope}.#{$prefix}heading--700">#{$scope}.#{$prefix}heading--700</a></li><li class="sidebar__item sassdoc__item" data-group="headings" data-name="#{$scope}.#{$prefix}heading--600" data-type="css"><a href="#headings-css-#{$scope}.#{$prefix}heading--600">#{$scope}.#{$prefix}heading--600</a></li><li class="sidebar__item sassdoc__item" data-group="headings" data-name="#{$scope}.#{$prefix}heading--500" data-type="css"><a href="#headings-css-#{$scope}.#{$prefix}heading--500">#{$scope}.#{$prefix}heading--500</a></li><li class="sidebar__item sassdoc__item" data-group="headings" data-name="#{$scope}.#{$prefix}heading--400" data-type="css"><a href="#headings-css-#{$scope}.#{$prefix}heading--400">#{$scope}.#{$prefix}heading--400</a></li><li class="sidebar__item sassdoc__item" data-group="headings" data-name="#{$scope}.#{$prefix}heading--300" data-type="css"><a href="#headings-css-#{$scope}.#{$prefix}heading--300">#{$scope}.#{$prefix}heading--300</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="normalize"><a href="#normalize">normalize</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="normalize-css"><a href="#normalize-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="normalize" data-name="html#{$scope}" data-type="css"><a href="#normalize-css-html#{$scope}">html#{$scope}</a></li><li class="sidebar__item sassdoc__item" data-group="normalize" data-name="#{$scope}body" data-type="css"><a href="#normalize-css-#{$scope}body">#{$scope}body</a></li><li class="sidebar__item sassdoc__item" data-group="normalize" data-name="#{$scope}main" data-type="css"><a href="#normalize-css-#{$scope}main">#{$scope}main</a></li><li class="sidebar__item sassdoc__item" data-group="normalize" data-name="#{$scope}hr" data-type="css"><a href="#normalize-css-#{$scope}hr">#{$scope}hr</a></li><li class="sidebar__item sassdoc__item" data-group="normalize" data-name="#{$scope}pre" data-type="css"><a href="#normalize-css-#{$scope}pre">#{$scope}pre</a></li><li class="sidebar__item sassdoc__item" data-group="normalize" data-name="#{$scope}a" data-type="css"><a href="#normalize-css-#{$scope}a">#{$scope}a</a></li><li class="sidebar__item sassdoc__item" data-group="normalize" data-name="#{$scope}abbr" data-type="css"><a href="#normalize-css-#{$scope}abbr">#{$scope}abbr</a></li><li class="sidebar__item sassdoc__item" data-group="normalize" data-name="#{$scope}b,
#{$scope}strong" data-type="css"><a href="#normalize-css-#{$scope}b,
#{$scope}strong">#{$scope}b, #{$scope}strong</a></li><li class="sidebar__item sassdoc__item" data-group="normalize" data-name="#{$scope}code,
#{$scope}kbd,
Expand Down Expand Up @@ -230,26 +230,26 @@
@import &quot;./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids&quot;;</code></pre></div></section><section class="main__item container item" id="grid-mixin-grid_gap"><h3 class="item__heading"><a class="item__name" href="#mixin-grid_gap">grid_gap</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin grid_gap($gap: 16px) {
gap: $gap;
}" data-collapsed="@mixin grid_gap($gap: 16px) { ... }"><code>@mixin grid_gap($gap: 16px) { ... }</code></pre></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$gap</code></th><td data-label="desc"><p>Specifies the gutter/gap(horizontal &amp; vertical spacing) value between each cell of the grid.</p></td><td data-label="type"><code>String</code></td><td data-label="default"><code>16px</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>import mixin file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids&quot;;</code></pre></div><div class="item__example example"><div class="example__description"><p>import mixin file with altered output values prior to import</p></div><pre class="example__code language-scss"><code>$gap: 16px !default;
@import &quot;./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids&quot;;</code></pre></div></section></section><section class="main__sub-section" id="grid-css"><h2 class="main__heading--secondary"><div class="container">css</div></h2><section class="main__item container item" id="grid-css-#{$scope}.#{$prefix}the_grid"><h3 class="item__heading"><a class="item__name" href="#css-#{$scope}.#{$prefix}the_grid">#{$scope}.#{$prefix}the_grid</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>#{$scope}.#{$prefix}the_grid {
@import &quot;./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids&quot;;</code></pre></div></section></section><section class="main__sub-section" id="grid-css"><h2 class="main__heading--secondary"><div class="container">css</div></h2><section class="main__item container item" id="grid-css-#{$scope}.#{$prefix}grid"><h3 class="item__heading"><a class="item__name" href="#css-#{$scope}.#{$prefix}grid">#{$scope}.#{$prefix}grid</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>#{$scope}.#{$prefix}grid {
display: grid;
@include grid_width(1232px);
@include grid_margin(16px);
@include grid_gap(8px);
@include grid_width($auro-grid-width);
@include grid_margin(calc($auro-grid-spacing * 2));
@include grid_gap($auro-grid-spacing);
@include auro_breakpoint--sm {
@include grid_gap(16px);
@include grid_gap(calc($auro-grid-spacing * 2));
}
@include auro_breakpoint--md {
@include grid_margin(24px);
@include grid_gap(24px);
@include grid_margin(calc($auro-grid-spacing * 3));
@include grid_gap(calc($auro-grid-spacing * 3));
}
@include auro_breakpoint--lg {
@include grid_margin(32px);
@include grid_gap(24px);
@include grid_margin(calc($auro-grid-spacing * 4));
@include grid_gap(calc($auro-grid-spacing * 3));
}
}</code>" data-collapsed="#{$scope}.#{$prefix}the_grid { ... }"><code>#{$scope}.#{$prefix}the_grid { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Grid class</p><p><a href="/#scope-prefix-variable">Manage</a> <code>$scope</code> and <code>$prefix</code> options.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Default selector(s)</p></div><pre class="example__code language-scss"><code>.the_grid {}</code></pre></div><div class="item__example example"><div class="example__description"><p>Selector(s) when $scope: true;</p></div><pre class="example__code language-scss"><code>.auro .the_grid {}</code></pre></div><div class="item__example example"><div class="example__description"><p>Selector(s) when $prefix: true;</p></div><pre class="example__code language-scss"><code>.auro_the_grid {}</code></pre></div><div class="item__example example"><div class="example__description"><p>Example HTML selector use</p></div><pre class="example__code language-html"><code>&lt;element class=&quot;the_grid&quot;&gt; ... &lt;/element&gt;</code></pre></div><div class="item__example example"><div class="example__description"><p>import file;</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids&quot;;</code></pre></div></section></section></section><section class="main__section"><h1 class="main__heading" id="headings"><div class="container">headings</div></h1><section class="main__sub-section" id="headings-css"><h2 class="main__heading--secondary"><div class="container">css</div></h2><section class="main__item container item" id="headings-css-#{$scope}.#{$prefix}heading"><h3 class="item__heading"><a class="item__name" href="#css-#{$scope}.#{$prefix}heading">#{$scope}.#{$prefix}heading</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>#{$scope}.#{$prefix}heading {
}</code>" data-collapsed="#{$scope}.#{$prefix}grid { ... }"><code>#{$scope}.#{$prefix}grid { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Grid class</p><p><a href="/#scope-prefix-variable">Manage</a> <code>$scope</code> and <code>$prefix</code> options.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Default selector(s)</p></div><pre class="example__code language-scss"><code>.grid {}</code></pre></div><div class="item__example example"><div class="example__description"><p>Selector(s) when $scope: true;</p></div><pre class="example__code language-scss"><code>.auro .grid {}</code></pre></div><div class="item__example example"><div class="example__description"><p>Selector(s) when $prefix: true;</p></div><pre class="example__code language-scss"><code>.auro_grid {}</code></pre></div><div class="item__example example"><div class="example__description"><p>Example HTML selector use</p></div><pre class="example__code language-html"><code>&lt;element class=&quot;grid&quot;&gt; ... &lt;/element&gt;</code></pre></div><div class="item__example example"><div class="example__description"><p>import file;</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids&quot;;</code></pre></div></section></section></section><section class="main__section"><h1 class="main__heading" id="headings"><div class="container">headings</div></h1><section class="main__sub-section" id="headings-css"><h2 class="main__heading--secondary"><div class="container">css</div></h2><section class="main__item container item" id="headings-css-#{$scope}.#{$prefix}heading"><h3 class="item__heading"><a class="item__name" href="#css-#{$scope}.#{$prefix}heading">#{$scope}.#{$prefix}heading</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>#{$scope}.#{$prefix}heading {
margin: calc(#{$auro-size-200} + #{$auro-size-150}) 0;
letter-spacing: $auro-text-heading-default-spacing;
Expand Down
Loading

0 comments on commit d0f6cd3

Please sign in to comment.