Skip to content

Commit 5007617

Browse files
anselmbradfordanselmbradford
authored
Merge pull request #1957 from cfpb/ans_bem_followup
Fix some modifiers to updated BEM | Clean up CSS nesting | add stylelint BEM rule
2 parents e8073f6 + 95508b6 commit 5007617

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

60 files changed

+319
-284
lines changed

‎docs/assets/css/color-swatches.less‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@
5656
.grid__column( 6 );
5757

5858
th {
59-
width: unit((70px / @base-font-size-px), em);
59+
width: unit(70px / @base-font-size-px, em);
6060
}
6161
}
6262
}
@@ -208,7 +208,7 @@
208208

209209
.color-table {
210210
width: 100%;
211-
margin-bottom: unit((45px / @base-font-size-px), em);
211+
margin-bottom: unit(45px / @base-font-size-px, em);
212212

213213
.swatch__field {
214214
width: 30%;

‎docs/assets/css/global-eyebrow.less‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
// Taken from global-eyebrow.less in cfgov.
22

33
.m-global-eyebrow {
4-
font-size: unit((12px / @base-font-size-px), em);
5-
padding-top: unit((@grid_gutter-width / 3 / @base-font-size-px), em);
6-
padding-bottom: unit((@grid_gutter-width / 3 / @base-font-size-px), em);
4+
font-size: unit(12px / @base-font-size-px, em);
5+
padding-top: unit(@grid_gutter-width / 3 / @base-font-size-px, em);
6+
padding-bottom: unit(@grid_gutter-width / 3 / @base-font-size-px, em);
77
background: var(--gray-5);
88
border-bottom: 1px solid var(--gray-40);
99
}

‎docs/assets/css/grid-demo.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
background-color: var(--gray-10);
1111
font-weight: bold;
1212
text-align: center;
13-
margin-bottom: unit((15px / @base-font-size-px), em);
13+
margin-bottom: unit(15px / @base-font-size-px, em);
1414
}
1515
}
1616

‎docs/assets/css/header.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
========================================================================== */
44

55
.title {
6-
font-size: unit((16px / @base-font-size-px), em);
6+
font-size: unit(16px / @base-font-size-px, em);
77
margin-top: 30px;
88

99
a {

‎docs/assets/css/main-content.less‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@
77

88
td:nth-child(1),
99
td:nth-child(2) {
10-
font-size: unit((32px / @base-font-size-px), em);
10+
font-size: unit(32px / @base-font-size-px, em);
1111
text-align: center;
12-
padding: unit((10px / 32px), em);
12+
padding: unit(10px / 32px, em);
1313
width: 15%;
1414
}
1515

‎docs/assets/css/skip-nav.less‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@
2222
&:focus {
2323
.a-btn();
2424
// Adjustments to button to make it appear like a super button.
25-
padding: unit((11px / 18px), em) unit((29px / 18px), em);
26-
font-size: unit((18px / @base-font-size-px), em);
25+
padding: unit(11px / 18px, em) unit(29px / 18px, em);
26+
font-size: unit(18px / @base-font-size-px, em);
2727

2828
top: 15px;
2929
left: 15px;

‎docs/assets/css/variation.less‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232

3333
&__deprecated {
3434
background: var(--gray-10);
35-
font-size: unit((10px / @base-font-size-px), em);
35+
font-size: unit(10px / @base-font-size-px, em);
3636
font-variant: small-caps;
3737
border-radius: 5px;
3838
padding: 5px;
@@ -59,11 +59,11 @@
5959

6060
// Wrapping long horizontal lists.
6161
.m-list--horizontal-spaced {
62-
margin-bottom: unit((30px / @base-font-size-px), em);
62+
margin-bottom: unit(30px / @base-font-size-px, em);
6363
}
6464

6565
.m-list--horizontal-spaced > .m-list__item {
66-
margin-bottom: unit((15px / @base-font-size-px), em);
66+
margin-bottom: unit(15px / @base-font-size-px, em);
6767
}
6868

6969
// Gives 100% width to all tables

‎docs/pages/blocks.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@ variation_groups:
129129
<aside class="content__sidebar">
130130
Section navigation
131131
</aside>
132-
<section class="content__main content__flush-bottom">
132+
<section class="content__main content--flush-bottom">
133133
Main content...
134134
<div class="block block--flush-sides block--bg">
135135
Content block with a background and flush sides

‎docs/pages/sidebars-prefooters.md‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -109,23 +109,23 @@ variation_groups:
109109
variations:
110110
- variation_name: Flush bottom modifier
111111
variation_description: >+
112-
Add a class of `.content__flush-bottom` to `.content__main` or
112+
Add a class of `.content--flush-bottom` to `.content__main` or
113113
`.content__sidebar` to remove bottom padding.
114114
115115
variation_code_snippet: >-
116116
<main class="content content--1-3" role="main">
117117
<div class="content__line"></div>
118118
<div class="content__wrapper">
119-
<aside class="content__sidebar content__flush-bottom">
119+
<aside class="content__sidebar content--flush-bottom">
120120
Side with no bottom padding...
121121
</aside>
122-
<section class="content__main content__flush-bottom">
122+
<section class="content__main content--flush-bottom">
123123
Main content with no bottom padding...
124124
<div class="block
125125
block--flush-bottom
126126
block--flush-sides
127127
block--bg">
128-
.content__flush-bottom is very useful when you have a
128+
.content--flush-bottom is very useful when you have a
129129
content block inside of .content__main with a background
130130
and flush sides.
131131
</div>
@@ -140,7 +140,7 @@ variation_groups:
140140
</footer>
141141
- variation_name: Flush top modifier (only on small screens)
142142
variation_description: >+
143-
Add a class of `.content__flush-top-on-small` to `.content__main` or
143+
Add a class of `.content--flush-top-on-small` to `.content__main` or
144144
`.content__sidebar` to remove top padding on small screens only.
145145
‘Small’ screens in this case refers to the breakpoint where
146146
`.content__main` and `.content__sidebar` single column layout.
@@ -149,7 +149,7 @@ variation_groups:
149149
<main class="content content--1-3" role="main">
150150
<div class="content__line"></div>
151151
<div class="content__wrapper">
152-
<aside class="content__sidebar content__flush-top-on-small">
152+
<aside class="content__sidebar content--flush-top-on-small">
153153
Side with no top padding on small screens...
154154
</aside>
155155
<section class="content__main">
@@ -164,7 +164,7 @@ variation_groups:
164164
</footer>
165165
- variation_name: Flush all modifier (only on small screens)
166166
variation_description: >+
167-
Add a class of `.content__flush-all-on-small` to `.content__main` or
167+
Add a class of `.content--flush-all-on-small` to `.content__main` or
168168
`.content__sidebar` to remove all padding and border-based gutters on
169169
small screens only. ‘Small’ screens in this case refers to the
170170
breakpoint where .content__main and .content__sidebar single column
@@ -174,7 +174,7 @@ variation_groups:
174174
<main class="content content--1-3" role="main">
175175
<div class="content__line"></div>
176176
<div class="content__wrapper">
177-
<aside class="content__sidebar content__flush-all-on-small">
177+
<aside class="content__sidebar content--flush-all-on-small">
178178
Side with no padding or border-based gutters on small screens...
179179
</aside>
180180
<section class="content__main">

‎docs/pages/text-inputs.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -87,15 +87,15 @@ variation_groups:
8787
variation_description: Use for simple forms where a full filter isn’t necessary.
8888
variation_code_snippet: |-
8989
<div class="o-form--input-w-btn">
90-
<div class="o-form--input-w-btn_input-container">
90+
<div class="o-form--input-w-btn__input-container">
9191
<input class="a-text-input a-text-input--full"
9292
type="text"
9393
id="full-textinput-w-btn-example"
9494
placeholder="Placeholder text"
9595
value="Input text">
96-
96+
9797
</div>
98-
<div class="o-form--input-w-btn_btn-container">
98+
<div class="o-form--input-w-btn__btn-container">
9999
<button class="a-btn">Search</button>
100100
</div>
101101
</div>
@@ -122,7 +122,7 @@ variation_groups:
122122
creating a typical site search form.
123123
variation_code_snippet: >-
124124
<div class="o-form--input-w-btn">
125-
<div class="o-form--input-w-btn_input-container">
125+
<div class="o-form--input-w-btn__input-container">
126126
<div class="m-btn-inside-input">
127127
<input type="text"
128128
value="This is some really long text to make sure that the button doesn't overlap the content in such a way that this input becomes unusable."
@@ -134,7 +134,7 @@ variation_groups:
134134
</button>
135135
</div>
136136
</div>
137-
<div class="o-form--input-w-btn_btn-container">
137+
<div class="o-form--input-w-btn__btn-container">
138138
<button class="a-btn">Search</button>
139139
</div>
140140
</div>

0 commit comments

Comments
 (0)