Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Try out standard indentation #57

Merged
merged 12 commits into from
Jun 1, 2023
Merged

Try out standard indentation #57

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
57ef8c1
Try out standard indentation
jgerigmeyer May 30, 2023
d8eec31
Strip indentation from more paired shortcodes.
jgerigmeyer May 31, 2023
a46eb6b
indentation for breaking-changes
jgerigmeyer May 31, 2023
fdcb4e4
indentation for cli docs
jgerigmeyer May 31, 2023
c146c76
indentation for style-rules docs
jgerigmeyer May 31, 2023
5bead6b
indentation for syntax docs
jgerigmeyer May 31, 2023
2646cc0
indentation for remainder of docs
jgerigmeyer May 31, 2023
3b97839
combine more markdown blocks
jgerigmeyer May 31, 2023
9f62b1d
Do not autoformat md files
jgerigmeyer May 31, 2023
d546a85
silence sass warnings
jgerigmeyer May 31, 2023
a331c72
add missing @use
jgerigmeyer May 31, 2023
b1dcf05
clearer example line breaks
jgerigmeyer May 31, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@
"rollup": "^3.23.0",
"sass": "^1.62.1",
"semver-parser": "^4.1.4",
"strip-indent": "^3.0.0",
"stylelint": "^15.6.2",
"stylelint-config-standard-scss": "^9.0.0",
"truncate-html": "^1.0.4",
Expand All @@ -96,7 +97,8 @@
"yarn-upgrade-all": {
"ignore": [
"@sindresorhus/slugify",
"@types/node"
"@types/node",
"strip-indent"
]
}
}
64 changes: 32 additions & 32 deletions source/code-snippets/example-advanced-nesting.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,49 +1,49 @@
{% markdown %}
For example, suppose you want to write a selector that matches the outer
selector *and* an element selector. You could write a mixin like this one that
uses the [`selector.unify()` function][] to combine `&` with a user's selector.
For example, suppose you want to write a selector that matches the outer
selector *and* an element selector. You could write a mixin like this one that
uses the [`selector.unify()` function][] to combine `&` with a user's selector.

[`selector.unify()` function]: /documentation/modules/selector#unify
[`selector.unify()` function]: /documentation/modules/selector#unify
{% endmarkdown %}

{% codeExample 'advanced-nesting' %}
@use "sass:selector";
@use "sass:selector";

@mixin unify-parent($child) {
@at-root #{selector.unify(&, $child)} {
@content;
@mixin unify-parent($child) {
@at-root #{selector.unify(&, $child)} {
@content;
}
}
}

.wrapper .field {
@include unify-parent("input") {
/* ... */
}
@include unify-parent("select") {
/* ... */
.wrapper .field {
@include unify-parent("input") {
/* ... */
}
@include unify-parent("select") {
/* ... */
}
}
}
===
@use "sass:selector"
===
@use "sass:selector"

@mixin unify-parent($child)
@at-root #{selector.unify(&, $child)}
@content
@mixin unify-parent($child)
@at-root #{selector.unify(&, $child)}
@content



.wrapper .field
@include unify-parent("input")
.wrapper .field
@include unify-parent("input")
/* ... */

@include unify-parent("select")
/* ... */
===
.wrapper input.field {
/* ... */
}

@include unify-parent("select")
.wrapper select.field {
/* ... */
===
.wrapper input.field {
/* ... */
}

.wrapper select.field {
/* ... */
}
}
{% endcodeExample %}
28 changes: 14 additions & 14 deletions source/code-snippets/example-each-list.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
{% codeExample 'each-list' %}
$sizes: 40px, 50px, 80px;
$sizes: 40px, 50px, 80px;

@each $size in $sizes {
.icon-#{$size} {
font-size: $size;
height: $size;
width: $size;
@each $size in $sizes {
.icon-#{$size} {
font-size: $size;
height: $size;
width: $size;
}
}
}
===
$sizes: 40px, 50px, 80px
===
$sizes: 40px, 50px, 80px

@each $size in $sizes
.icon-#{$size}
font-size: $size
height: $size
width: $size
@each $size in $sizes
.icon-#{$size}
font-size: $size
height: $size
width: $size
{% endcodeExample %}
28 changes: 14 additions & 14 deletions source/code-snippets/example-each-map.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
{% codeExample 'each-map' %}
$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f");
$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f");

@each $name, $glyph in $icons {
.icon-#{$name}:before {
display: inline-block;
font-family: "Icon Font";
content: $glyph;
@each $name, $glyph in $icons {
.icon-#{$name}:before {
display: inline-block;
font-family: "Icon Font";
content: $glyph;
}
}
}
===
$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f")
===
$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f")

@each $name, $glyph in $icons
.icon-#{$name}:before
display: inline-block
font-family: "Icon Font"
content: $glyph
@each $name, $glyph in $icons
.icon-#{$name}:before
display: inline-block
font-family: "Icon Font"
content: $glyph
{% endcodeExample %}
34 changes: 17 additions & 17 deletions source/code-snippets/example-if-parent-selector.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
{% codeExample 'if-parent-selector' %}
@mixin app-background($color) {
#{if(&, '&.app-background', '.app-background')} {
background-color: $color;
color: rgba(#fff, 0.75);
@mixin app-background($color) {
#{if(&, '&.app-background', '.app-background')} {
background-color: $color;
color: rgba(#fff, 0.75);
}
}
}

@include app-background(#036);
@include app-background(#036);

.sidebar {
@include app-background(#c6538c);
}
===
@mixin app-background($color)
#{if(&, '&.app-background', '.app-background')}
background-color: $color
color: rgba(#fff, 0.75)
.sidebar {
@include app-background(#c6538c);
}
===
@mixin app-background($color)
#{if(&, '&.app-background', '.app-background')}
background-color: $color
color: rgba(#fff, 0.75)



@include app-background(#036)
@include app-background(#036)

.sidebar
@include app-background(#c6538c)
.sidebar
@include app-background(#c6538c)
{% endcodeExample %}
44 changes: 22 additions & 22 deletions source/code-snippets/example-if.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,29 @@
{% codeExample 'example-if' %}
@mixin avatar($size, $circle: false) {
width: $size;
height: $size;
@mixin avatar($size, $circle: false) {
width: $size;
height: $size;

@if $circle {
border-radius: $size / 2;
@if $circle {
border-radius: $size / 2;
}
}
}

.square-av {
@include avatar(100px, $circle: false);
}
.circle-av {
@include avatar(100px, $circle: true);
}
===
@mixin avatar($size, $circle: false)
width: $size
height: $size
.square-av {
@include avatar(100px, $circle: false);
}
.circle-av {
@include avatar(100px, $circle: true);
}
===
@mixin avatar($size, $circle: false)
jerivas marked this conversation as resolved.
Show resolved Hide resolved
width: $size
height: $size

@if $circle
border-radius: $size / 2
@if $circle
border-radius: $size / 2

.square-av
@include avatar(100px, $circle: false)
.circle-av
@include avatar(100px, $circle: true)
.square-av
@include avatar(100px, $circle: false)
.circle-av
@include avatar(100px, $circle: true)
{% endcodeExample %}
64 changes: 32 additions & 32 deletions source/code-snippets/example-mixin-arbitrary-keyword-arguments.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,47 +1,47 @@
{% codeExample 'mixin-arbitrary-keyword' %}
@use "sass:meta";
@use "sass:meta";

@mixin syntax-colors($args...) {
@debug meta.keywords($args);
// (string: #080, comment: #800, variable: #60b)
@mixin syntax-colors($args...) {
@debug meta.keywords($args);
// (string: #080, comment: #800, variable: #60b)

@each $name, $color in meta.keywords($args) {
pre span.stx-#{$name} {
color: $color;
@each $name, $color in meta.keywords($args) {
pre span.stx-#{$name} {
color: $color;
}
}
}
}

@include syntax-colors(
$string: #080,
$comment: #800,
$variable: #60b,
)
===
@use "sass:meta"
@include syntax-colors(
$string: #080,
$comment: #800,
$variable: #60b,
)
===
@use "sass:meta"

@mixin syntax-colors($args...)
@debug meta.keywords($args)
// (string: #080, comment: #800, variable: #60b)
@mixin syntax-colors($args...)
@debug meta.keywords($args)
// (string: #080, comment: #800, variable: #60b)

@each $name, $color in meta.keywords($args)
pre span.stx-#{$name}
color: $color
@each $name, $color in meta.keywords($args)
pre span.stx-#{$name}
color: $color




@include syntax-colors($string: #080, $comment: #800, $variable: #60b)
===
pre span.stx-string {
color: #080;
}
@include syntax-colors($string: #080, $comment: #800, $variable: #60b)
===
pre span.stx-string {
color: #080;
}

pre span.stx-comment {
color: #800;
}
pre span.stx-comment {
color: #800;
}

pre span.stx-variable {
color: #60b;
}
pre span.stx-variable {
color: #60b;
}
{% endcodeExample %}
48 changes: 24 additions & 24 deletions source/code-snippets/example-nesting.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,31 @@
{% codeExample 'nesting' %}
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}

li { display: inline-block; }
li { display: inline-block; }

a {
display: block;
padding: 6px 12px;
text-decoration: none;
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
}
===
nav
ul
margin: 0
padding: 0
list-style: none
===
nav
ul
margin: 0
padding: 0
list-style: none

li
display: inline-block
li
display: inline-block

a
display: block
padding: 6px 12px
text-decoration: none
a
display: block
padding: 6px 12px
text-decoration: none
{% endcodeExample %}
Loading