Skip to content

Commit 7b83e27

Browse files
author
James Mejia
authored
Merge pull request #4085 from uswds/dw-prefix-separator
Allow custom prefix separator
2 parents 5eaf9de + ee82b68 commit 7b83e27

File tree

6 files changed

+54
-14
lines changed

6 files changed

+54
-14
lines changed

‎src/stylesheets/components/_icon-list.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ $icon-list-breakpoints: map-merge($this-null, $system-breakpoints);
104104
}
105105
// Or the standard prefix if the breakpoint is output
106106
@else if map-get($theme-utility-breakpoints, $mq-key) {
107-
$prefix: "#{$mq-key}\\:";
107+
$prefix: "#{$mq-key}#{$separator}";
108108
}
109109

110110
@include at-media($mq-key) {

‎src/stylesheets/core/_variables.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,14 @@ Namespace
3131
$ns-utility: ns("utility");
3232
$ns-grid: ns("grid");
3333

34+
/*
35+
----------------------------------------
36+
Separator
37+
----------------------------------------
38+
*/
39+
40+
$separator: $theme-prefix-separator;
41+
3442
/*
3543
----------------------------------------
3644
Spacing

‎src/stylesheets/core/mixins/_utility-builder.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ loop
2121
$important: if($utilities-use-important, " !important", null);
2222
$this-mq: null;
2323

24-
.#{$media-prefix}#{$pseudoclass}\:#{ns("utility")}#{$selector}:#{$pseudoclass} {
24+
.#{$media-prefix}#{$pseudoclass}#{$separator}#{ns("utility")}#{$selector}:#{$pseudoclass} {
2525
@each $this-property in $property {
2626
#{$this-property}: unquote("#{$value}#{$important}");
2727
}
@@ -63,7 +63,7 @@ future version of Sass' warning.
6363
$value-is-map: if(type-of($val-props) == "map", true, false);
6464

6565
@if $media-key {
66-
$media-prefix: #{$media-key}\:;
66+
$media-prefix: #{$media-key}#{$separator};
6767
}
6868

6969
.#{$media-prefix}#{ns("utility")}#{$selector} {

‎src/stylesheets/elements/_layout-grid.scss‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,14 @@ $namespace-grid: ns("grid");
2020
@each $mq-key, $mq-value in $system-breakpoints {
2121
@if map-get($theme-utility-breakpoints, $mq-key) {
2222
@include at-media($mq-key) {
23-
.#{$mq-key}\:#{$namespace-grid}container {
23+
.#{$mq-key}#{$separator}#{$namespace-grid}container {
2424
$props: append-important($grid-global, desktop);
2525
@include grid-container($props);
2626
}
2727

2828
// ...with custom widths
2929
@each $width-key, $width-value in $system-breakpoints {
30-
.#{$mq-key}\:#{$namespace-grid}container-#{$width-key} {
30+
.#{$mq-key}#{$separator}#{$namespace-grid}container-#{$width-key} {
3131
$props: append-important($grid-global, $width-key);
3232
@include grid-container($props);
3333
}
@@ -58,7 +58,7 @@ $namespace-grid: ns("grid");
5858
@each $gap-key,
5959
$gap-val in map-deep-get($system-properties, gap, standard)
6060
{
61-
&.#{$mq-key}\:#{$namespace-grid}gap-#{$gap-key} {
61+
&.#{$mq-key}#{$separator}#{$namespace-grid}gap-#{$gap-key} {
6262
$props: append-important($grid-global, $gap-key);
6363
@include grid-gap($props);
6464
}
@@ -102,21 +102,21 @@ $namespace-grid: ns("grid");
102102
@each $mq-key, $mq-value in $system-breakpoints {
103103
@if map-get($theme-utility-breakpoints, $mq-key) {
104104
@include at-media($mq-key) {
105-
.#{$mq-key}\:#{$namespace-grid}col {
105+
.#{$mq-key}#{$separator}#{$namespace-grid}col {
106106
$props: append-important($grid-global, fill);
107107
@include grid-col($props);
108108
}
109-
.#{$mq-key}\:#{$namespace-grid}col-fill {
109+
.#{$mq-key}#{$separator}#{$namespace-grid}col-fill {
110110
$props: append-important($grid-global, fill);
111111
@include grid-col($props);
112112
}
113-
.#{$mq-key}\:#{$namespace-grid}col-auto {
113+
.#{$mq-key}#{$separator}#{$namespace-grid}col-auto {
114114
$props: append-important($grid-global, auto);
115115
@include grid-col($props);
116116
}
117117

118118
@each $width-key, $width-value in $system-layout-grid-widths {
119-
.#{$mq-key}\:#{$namespace-grid}col-#{$width-key} {
119+
.#{$mq-key}#{$separator}#{$namespace-grid}col-#{$width-key} {
120120
$props: append-important($grid-global, $width-key);
121121
@include grid-col($props);
122122
}
@@ -142,14 +142,14 @@ $namespace-grid: ns("grid");
142142
@if map-get($theme-utility-breakpoints, $mq-key) {
143143
@each $width-key, $width-value in $system-layout-grid-widths {
144144
@include at-media($mq-key) {
145-
.#{$mq-key}\:#{$namespace-grid}offset-#{$width-key} {
145+
.#{$mq-key}#{$separator}#{$namespace-grid}offset-#{$width-key} {
146146
$props: append-important($grid-global, $width-key);
147147
@include grid-offset($props);
148148
}
149149
}
150150
}
151151
@include at-media($mq-key) {
152-
.#{$mq-key}\:#{$namespace-grid}offset-none {
152+
.#{$mq-key}#{$separator}#{$namespace-grid}offset-none {
153153
$props: append-important($grid-global, none);
154154
@include grid-offset($props);
155155
}

‎src/stylesheets/settings/_settings-general.scss‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,22 @@ $theme-namespace: (
5858
),
5959
) !default;
6060

61+
/*
62+
----------------------------------------
63+
Prefix separator
64+
----------------------------------------
65+
Set the character the separates
66+
responsive and state prefixes from the
67+
main class name.
68+
69+
The default (":") needs to be preceded
70+
by two backslashes to be properly
71+
escaped.
72+
----------------------------------------
73+
*/
74+
75+
$theme-prefix-separator: "\\:" !default;
76+
6177
/*
6278
----------------------------------------
6379
Layout grid

‎src/stylesheets/theme/_uswds-theme-general.scss‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ https://designsystem.digital.gov/design-tokens
1919

2020
/*
2121
----------------------------------------
22-
Image Path
22+
Image path
2323
----------------------------------------
2424
Relative image file path
2525
----------------------------------------
@@ -58,6 +58,22 @@ $theme-namespace: (
5858
),
5959
);
6060

61+
/*
62+
----------------------------------------
63+
Prefix separator
64+
----------------------------------------
65+
Set the character the separates
66+
responsive and state prefixes from the
67+
main class name.
68+
69+
The default (":") needs to be preceded
70+
by two backslashes to be properly
71+
escaped.
72+
----------------------------------------
73+
*/
74+
75+
$theme-prefix-separator: "\\:";
76+
6177
/*
6278
----------------------------------------
6379
Layout grid
@@ -67,7 +83,7 @@ with !important
6783
----------------------------------------
6884
*/
6985

70-
$theme-layout-grid-use-important: false !default;
86+
$theme-layout-grid-use-important: false;
7187

7288
/*
7389
----------------------------------------

0 commit comments

Comments
 (0)