Skip to content

Commit

Permalink
Merge pull request #5859 from uswds/al-util-doc-examples-addons
Browse files Browse the repository at this point in the history 
USWDS - Utilities: Update inaccurate comments
  • Loading branch information
@thisisdano
thisisdano committed Apr 26, 2024
2 parents 98566ec + 267fc6d commit 4ed0998
Show file tree
Hide file tree
Showing 57 changed files with 250 additions and 176 deletions.
14 changes: 8 additions & 6 deletions packages/uswds-utilities/src/styles/rules/add-aspect.scss
View file
Expand Up @@ -3,16 +3,18 @@
ASPECT
----------------------------------------
usage:
.aspect-[value]
.add-aspect-[key]
----------------------------------------
output:
padding-left: 0;
padding-right: 0;
padding-top: 0;
padding-bottom: 100%;
aspect-ratio: [value];
----------------------------------------
example:
.aspect-16x9
.add-aspect-16x9 {
height: inherit;
padding: inherit;
aspect-ratio: 1.7777777778;
max-width: 100%;
}
----------------------------------------
*/
@use "sass:map";
Expand Down
13 changes: 9 additions & 4 deletions packages/uswds-utilities/src/styles/rules/add-list-reset.scss
View file
Expand Up @@ -3,16 +3,21 @@
LIST RESET
----------------------------------------
usage:
.list-reset
.add-list-reset
----------------------------------------
output:
list-style: none;
margin-bottom: 0;
margin-top: 0;
padding-left: 0;
list-style: none;
----------------------------------------
example:
.list-reset {
.add-list-reset {
margin-bottom: 0;
margin-top: 0;
padding-left: 0;
list-style: none;
padding-left: 0; }
}
----------------------------------------
*/

Expand Down
3 changes: 2 additions & 1 deletion packages/uswds-utilities/src/styles/rules/align-items.scss
View file
Expand Up @@ -10,7 +10,8 @@ output:
----------------------------------------
example:
.flex-align-start {
align-items: flex-start; }
align-items: flex-start;
}
----------------------------------------
*/

Expand Down
3 changes: 2 additions & 1 deletion packages/uswds-utilities/src/styles/rules/align-self.scss
View file
Expand Up @@ -10,7 +10,8 @@ output:
----------------------------------------
example:
.flex-align-self-start {
align-self: flex-start; }
align-self: flex-start;
}
----------------------------------------
*/

Expand Down
5 changes: 3 additions & 2 deletions packages/uswds-utilities/src/styles/rules/background-color.scss
View file
Expand Up @@ -9,8 +9,9 @@ output:
background-color: [value];
----------------------------------------
example:
.bg-red-50v {
background-color: #be4900; }
.bg-red {
background-color: #e52207;
}
----------------------------------------
*/

Expand Down
9 changes: 5 additions & 4 deletions packages/uswds-utilities/src/styles/rules/border-color.scss
View file
@@ -1,16 +1,17 @@
/*
========================================
background-color
border-color
----------------------------------------
usage:
.border-[color]
.border-[key]
----------------------------------------
output:
border[-color]: [color];
border-color: [value];
----------------------------------------
example:
.border-red {
border-color: #be4900; }
border-color: #e52207;
}
----------------------------------------
*/

Expand Down
12 changes: 7 additions & 5 deletions packages/uswds-utilities/src/styles/rules/border-radius.scss
View file
Expand Up @@ -3,17 +3,19 @@
border-radius
----------------------------------------
usage:
.border-radius-[key]
.radius-[key]
----------------------------------------
output:
border-radius: [value];
----------------------------------------
example:
.border-radius-0 {
border-radius: 0; }
.radius-0 {
border-radius: 0;
}
.border-radius-pill {
border-radius: 10em; }
.radius-pill {
border-radius: 99rem;
}
----------------------------------------
*/

Expand Down
5 changes: 3 additions & 2 deletions packages/uswds-utilities/src/styles/rules/border-style.scss
View file
Expand Up @@ -3,14 +3,15 @@
border-style
----------------------------------------
usage:
.border[-modifier]*-[key]
.border-[key]
----------------------------------------
output:
border-style: [value];
----------------------------------------
example:
.border-dotted {
border-style: dotted; }
border-style: dotted;
}
----------------------------------------
*/

Expand Down
3 changes: 2 additions & 1 deletion packages/uswds-utilities/src/styles/rules/border-width.scss
View file
Expand Up @@ -10,7 +10,8 @@ output:
----------------------------------------
example:
.border-top-width-1px {
border-top-width: 1px; }
border-top-width: 1px;
}
----------------------------------------
*/

Expand Down
8 changes: 5 additions & 3 deletions packages/uswds-utilities/src/styles/rules/border.scss
View file
Expand Up @@ -12,11 +12,13 @@ output:
border-[modifier]: [value];
----------------------------------------
example:
.border-t-1px {
border-top: 1px solid; }
.border-top-1px {
border-top: 1px solid;
}
.border-0 {
border: none; }
border: 0 solid;
}
----------------------------------------
*/

Expand Down
13 changes: 8 additions & 5 deletions packages/uswds-utilities/src/styles/rules/bottom.scss
View file
@@ -1,8 +1,6 @@
/*
========================================
.bottom
----------------------------------------
property: bottom
bottom
----------------------------------------
usage:
.bottom-[key]
Expand All @@ -11,8 +9,13 @@ output:
bottom: [value];
----------------------------------------
example:
.bottom-n2px {
bottom: -2px; }
.bottom-3 {
bottom: 1.5rem;
}
.bottom-neg-2px {
bottom: -2px;
}
----------------------------------------
*/

Expand Down
7 changes: 4 additions & 3 deletions packages/uswds-utilities/src/styles/rules/box-shadow.scss
View file
Expand Up @@ -3,14 +3,15 @@
box-shadow
----------------------------------------
usage:
.box-shadow-[value]
.shadow-[key]
----------------------------------------
output:
box-shadow: [value];
----------------------------------------
example:
.box-shadow-1 {
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.10); }
.shadow-1 {
box-shadow: 0 1px 0.25rem 0 rgba(0, 0, 0, 0.1);
}
----------------------------------------
*/

Expand Down
4 changes: 3 additions & 1 deletion packages/uswds-utilities/src/styles/rules/circle.scss
View file
Expand Up @@ -13,7 +13,9 @@ output:
example:
.circle-6 {
height: 3rem;
width: 3rem; }
width: 3rem;
border-radius: 50%;
}
----------------------------------------
*/

Expand Down
3 changes: 2 additions & 1 deletion packages/uswds-utilities/src/styles/rules/clearfix.scss
View file
Expand Up @@ -9,7 +9,8 @@ example:
.clearfix::after {
clear: both;
content: "";
display: block; }
display: block;
}
----------------------------------------
*/

Expand Down
7 changes: 4 additions & 3 deletions packages/uswds-utilities/src/styles/rules/color.scss
View file
Expand Up @@ -3,14 +3,15 @@
color
----------------------------------------
usage:
.color-[key]
.text-[key]
----------------------------------------
output:
color: [value];
----------------------------------------
example:
.color-black-100 {
color: #000; }
.text-black {
color: black;
}
----------------------------------------
*/

Expand Down
5 changes: 3 additions & 2 deletions packages/uswds-utilities/src/styles/rules/cursor.scss
View file
@@ -1,6 +1,6 @@
/*
========================================
color
cursor
----------------------------------------
usage:
.cursor-[key]
Expand All @@ -10,7 +10,8 @@ output:
----------------------------------------
example:
.cursor-pointer {
cursor: pointer; }
cursor: pointer;
}
----------------------------------------
*/

Expand Down
5 changes: 3 additions & 2 deletions packages/uswds-utilities/src/styles/rules/display.scss
View file
Expand Up @@ -6,11 +6,12 @@ usage:
.display-[key]
----------------------------------------
output:
display: [value]
display: [value];
----------------------------------------
example:
.display-none {
display: none; }
display: none;
}
----------------------------------------
*/

Expand Down
13 changes: 9 additions & 4 deletions packages/uswds-utilities/src/styles/rules/flex-direction.scss
View file
Expand Up @@ -3,14 +3,19 @@
flex-direction
----------------------------------------
usage:
.flex-direction-[value]
.flex-[key]
----------------------------------------
output:
flex-direction: [value]
flex-direction: [value];
----------------------------------------
example:
.flex-direction-row {
flex-direction: row; }
.flex-row {
flex-direction: row;
}
.flex-column {
flex-direction: column;
}
----------------------------------------
*/

Expand Down
9 changes: 7 additions & 2 deletions packages/uswds-utilities/src/styles/rules/flex-wrap.scss
View file
Expand Up @@ -3,14 +3,19 @@
flex-wrap
----------------------------------------
usage:
.flex-wrap-[key]
.flex-[key]
----------------------------------------
output:
flex-wrap: [value];
----------------------------------------
example:
.flex-wrap {
flex-wrap: wrap; }
flex-wrap: wrap;
}
.flex-no-wrap {
flex-wrap: nowrap;
}
----------------------------------------
*/

Expand Down
9 changes: 6 additions & 3 deletions packages/uswds-utilities/src/styles/rules/flex.scss
View file
Expand Up @@ -10,13 +10,16 @@ output:
----------------------------------------
example:
.flex-1 {
flex: 1 0 0; }
flex: 1 0 0;
}
.flex-fill {
flex: 1 0 0; }
flex: 1 0 0;
}
.flex-auto {
flex: none; }
flex: 0 1 auto;
}
----------------------------------------
*/

Expand Down
3 changes: 2 additions & 1 deletion packages/uswds-utilities/src/styles/rules/float.scss
View file
Expand Up @@ -10,7 +10,8 @@ output:
----------------------------------------
example:
.float-left {
float: left; }
float: left;
}
----------------------------------------
*/

Expand Down

0 comments on commit 4ed0998

Please sign in to comment.