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

Jump to bottom

Expose internal component vars to settings #2901

Merged
merged 2 commits into from Feb 1, 2019
Merged

Expose internal component vars to settings #2901

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
07d1e1f
Expose custom component vars in component settings
thisisdano Feb 1, 2019
15bff38
Use proper units() formate for alerts vars
thisisdano Feb 1, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/stylesheets/components/_accordions.scss
View file
Open in desktop
@@ -1,6 +1,6 @@
// Variables

$accordion-border: units(0.5) solid color('base-lightest');
$accordion-border: units($theme-accordion-border-width) solid color($theme-accordion-border-color);

// Accordion Styles

Expand Down
28 changes: 12 additions & 16 deletions src/stylesheets/components/_alerts.scss
View file
Open in desktop
Expand Up @@ -20,24 +20,20 @@ $usa-alerts-bar: (

$alerts: map-merge($usa-alerts, $usa-custom-alerts);
$alerts-bar: map-merge($usa-alerts-bar, $usa-custom-alerts-bar);

$h-padding: units(2.5);
$bar-size: units(1);
$left-padding: $h-padding + $bar-size;
$icon-size: units(4);
$padding-left: units($theme-alert-padding-x) + units($theme-alert-bar-width);

.usa-alert {
@include typeset($theme-alert-font-family);
@include border-box-sizing;

background-color: color('base-lightest');
background-position: $h-padding $h-padding;
background-position: units($theme-alert-padding-x) units($theme-alert-padding-x);
background-repeat: no-repeat;
background-size: units(7);
padding-bottom: units(2);
padding-left: $left-padding;
padding-right: $h-padding;
padding-top: $h-padding;
padding-left: $padding-left;
padding-right: units($theme-alert-padding-x);
padding-top: units($theme-alert-padding-x);
position: relative;

* + & {
Expand All @@ -52,7 +48,7 @@ $icon-size: units(4);
left: 0;
position: absolute;
top: 0;
width: $bar-size;
width: units($theme-alert-bar-width);
}

a {
Expand All @@ -76,9 +72,9 @@ $icon-size: units(4);
}

.usa-alert-slim {
background-position: $h-padding center;
padding-bottom: $bar-size;
padding-top: $bar-size;
background-position: units($theme-alert-padding-x) center;
padding-bottom: units($theme-alert-bar-width);
padding-top: units($theme-alert-bar-width);

.usa-alert-text:only-child {
margin-bottom: units(0.5);
Expand All @@ -88,7 +84,7 @@ $icon-size: units(4);

.usa-alert-icon {
display: table-cell;
padding-right: $bar-size;
padding-right: units($theme-alert-bar-width);
}

.usa-alert-body {
Expand All @@ -107,7 +103,7 @@ $icon-size: units(4);
}

.usa-alert-text:only-child {
margin-bottom: $bar-size;
margin-bottom: units($theme-alert-bar-width);
padding-top: units(0.5);
}

Expand All @@ -121,7 +117,7 @@ $icon-size: units(4);
}

.usa-alert-body {
padding-left: $icon-size + $h-padding;
padding-left: units($theme-alert-icon-size) + units($theme-alert-padding-x);
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/stylesheets/elements/_buttons.scss
View file
Open in desktop
@@ -1,6 +1,6 @@
// Buttons variables

$button-stroke: inset 0 0 0 units(2px);
$button-stroke: inset 0 0 0 units($theme-button-stroke-width);

// Buttons

Expand Down
35 changes: 16 additions & 19 deletions src/stylesheets/elements/_inputs.scss
View file
Open in desktop
@@ -1,9 +1,6 @@
// Helpers

$box-input-size: 2.5;
$box-input-border-width: 2px;
$box-input-margin-right: 1.5;
$input-state-border-width: 0.5;
$input-select-margin-right: 1.5;

@mixin range-focus {
background-color: color('white');
Expand All @@ -20,10 +17,10 @@ $input-state-border-width: 0.5;
}

@mixin range-thumb {
@include u-circle($box-input-size);
@include u-circle($theme-input-select-size);
background: color('base-lightest');
border: none;
box-shadow: 0 0 0 units($box-input-border-width) color('base');
box-shadow: 0 0 0 units($theme-input-select-border-width) color('base');
cursor: pointer;
}

Expand Down Expand Up @@ -64,7 +61,7 @@ $input-state-border-width: 0.5;
width: 100%;

&.usa-input-success {
@include u-border($input-state-border-width, 'success');
@include u-border($theme-input-state-border-width, 'success');
}
}

Expand All @@ -86,7 +83,7 @@ $input-state-border-width: 0.5;
}

.usa-input-error {
@include u-border($input-state-border-width, 'error-dark');
@include u-border($theme-input-state-border-width, 'error-dark');
}

.usa-input-error-label {
Expand Down Expand Up @@ -190,45 +187,45 @@ $input-state-border-width: 0.5;
display: inherit;
font-weight: font-weight('normal');
margin-bottom: units(1.5);
padding-left: units($box-input-margin-right + $box-input-size);
padding-left: units($input-select-margin-right + $theme-input-select-size);
position: relative;
text-indent: units(-$box-input-margin-right - $box-input-size);
text-indent: units(-$input-select-margin-right - $theme-input-select-size);
}

.usa-checkbox-label::before,
.usa-radio-label::before {
background: color('white');
content: '\a0';
display: inline-block;
left: units($box-input-border-width);
left: units($theme-input-select-border-width);
position: relative;
vertical-align: middle\0; // Target IE 11 and below to vertically center inputs
}

.usa-checkbox-label::before {
@include u-square($box-input-size);
@include u-square($theme-input-select-size);
border-radius: radius($theme-checkbox-border-radius);
}

.usa-radio-label::before {
@include u-circle($box-input-size);
@include u-circle($theme-input-select-size);
}

.usa-checkbox-label::before,
.usa-radio-label::before {
box-shadow: 0 0 0 units($box-input-border-width) color('base');
line-height: units($box-input-size);
margin-right: units($box-input-margin-right);
box-shadow: 0 0 0 units($theme-input-select-border-width) color('base');
line-height: units($theme-input-select-size);
margin-right: units($input-select-margin-right);
}

.usa-checkbox-input:checked + .usa-checkbox-label::before,
.usa-radio-input:checked + .usa-radio-label::before {
background-color: color('primary');
box-shadow: 0 0 0 units($box-input-border-width) color('primary');
box-shadow: 0 0 0 units($theme-input-select-border-width) color('primary');
}

.usa-radio-input:checked + .usa-radio-label::before {
box-shadow: 0 0 0 units($box-input-border-width) color('primary'), inset 0 0 0 units($box-input-border-width) color('white');
box-shadow: 0 0 0 units($theme-input-select-border-width) color('primary'), inset 0 0 0 units($theme-input-select-border-width) color('white');
}

.usa-checkbox-input:checked + .usa-checkbox-label::before,
Expand Down Expand Up @@ -260,7 +257,7 @@ $input-state-border-width: 0.5;
.usa-checkbox-input:disabled + .usa-checkbox-label::before,
.usa-radio-input:disabled + .usa-radio-label::before {
background: color('disabled-light');
box-shadow: 0 0 0 units($box-input-border-width) color('disabled');
box-shadow: 0 0 0 units($theme-input-select-border-width) color('disabled');
cursor: not-allowed;
}

Expand Down
9 changes: 9 additions & 0 deletions src/stylesheets/settings/_settings-components.scss
View file
Open in desktop
Expand Up @@ -18,11 +18,16 @@ https://v2.designsystem.digital.gov/style-tokens
*/

// Accordion
$theme-accordion-border-width: 0.5 !default;
$theme-accordion-border-color: 'base-lightest' !default;
$theme-accordion-font-family: 'body' !default;

// Alert
$theme-alert-bar-width: 1 !default;
$theme-alert-font-family: 'ui' !default;
$theme-alert-icon-size: 4 !default;
$theme-alert-measure: 3 !default;
$theme-alert-padding-x: 2.5 !default;

// Banner
$theme-banner-font-family: 'ui' !default;
Expand All @@ -31,6 +36,7 @@ $theme-banner-font-family: 'ui' !default;
$theme-button-font-family: 'ui' !default;
$theme-button-border-radius: 'md' !default;
$theme-button-small-width: 6 !default;
$theme-button-stroke-width: 2px !default;

// Footer
$theme-footer-font-family: 'body' !default;
Expand All @@ -40,6 +46,9 @@ $theme-checkbox-border-radius: 'sm' !default;
$theme-form-font-family: 'ui' !default;
$theme-input-line-height: 3 !default;
$theme-input-max-width: 'mobile-lg' !default;
$theme-input-select-border-width: 2px !default;
$theme-input-select-size: 2.5 !default;
$theme-input-state-border-width: 0.5 !default;

// Header
$theme-header-font-family: 'ui' !default;
Expand Down
9 changes: 9 additions & 0 deletions src/stylesheets/theme/_uswds-theme-components.scss
View file
Open in desktop
Expand Up @@ -18,11 +18,16 @@ https://v2.designsystem.digital.gov/style-tokens
*/

// Accordion
$theme-accordion-border-width: 0.5;
$theme-accordion-border-color: 'base-lightest';
$theme-accordion-font-family: 'body';

// Alert
$theme-alert-bar-width: 1;
$theme-alert-font-family: 'ui';
$theme-alert-icon-size: 4;
$theme-alert-measure: 3;
$theme-alert-padding-x: 2.5;

// Banner
$theme-banner-font-family: 'ui';
Expand All @@ -31,6 +36,7 @@ $theme-banner-font-family: 'ui';
$theme-button-font-family: 'ui';
$theme-button-border-radius: 'md';
$theme-button-small-width: 6;
$theme-button-stroke-width: 2px;

// Footer
$theme-footer-font-family: 'body';
Expand All @@ -40,6 +46,9 @@ $theme-checkbox-border-radius: 'sm';
$theme-form-font-family: 'ui';
$theme-input-line-height: 3;
$theme-input-max-width: 'mobile-lg';
$theme-input-select-border-width: 2px;
$theme-input-select-size: 2.5;
$theme-input-state-border-width: 0.5;

// Header
$theme-header-font-family: 'ui';
Expand Down