Skip to content

Commit b6c28ef

Browse files
bradfrostbmuenzenmeyer
bradfrost
authored and
bmuenzenmeyer
committed
Style formatting
1 parent 405bfe3 commit b6c28ef

File tree

5 files changed

+128
-101
lines changed

5 files changed

+128
-101
lines changed

‎packages/docs/src/scss/abstracts/_variables.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,8 @@ $spacing-large: round(2 * $spacing);
140140
/**
141141
* Border
142142
*/
143-
$border-thickness: 1px;
143+
$border-width: 1px;
144+
$border-width-thick: 0.5rem;
144145

145146
/**
146147
* Border radius

‎packages/docs/src/scss/base/_forms.scss

Lines changed: 55 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -10,111 +10,121 @@
1010
* Input placeholder text base styles
1111
*/
1212
::-webkit-input-placeholder {
13-
color: $color-form-placeholder;
13+
color: $color-form-placeholder;
1414
}
1515

1616
::-moz-placeholder {
17-
color: $color-form-placeholder;
17+
color: $color-form-placeholder;
1818
}
1919

2020
:-ms-input-placeholder {
21-
color: $color-form-placeholder;
21+
color: $color-form-placeholder;
2222
}
2323

2424
/**
2525
* Fieldset base styles
2626
*/
2727
fieldset {
28-
border: 0;
29-
padding: 0;
30-
margin: 0;
28+
border: 0;
29+
padding: 0;
30+
margin: 0;
3131
}
3232

3333
/**
3434
* Legend base styles
3535
*/
3636
legend {
37-
margin-bottom: 0.25rem;
37+
margin-bottom: 0.25rem;
3838
}
3939

4040
/**
4141
* Label base styles
4242
*/
4343
label {
44-
display: block;
45-
padding-bottom: 0.25rem;
46-
color: $color-form-label;
44+
display: block;
45+
padding-bottom: 0.25rem;
46+
color: $color-form-label;
4747
}
4848

4949
/**
5050
* Add font size 100% of form element and margin 0 to these elements
5151
*/
52-
button, input, select, textarea {
53-
font-family: inherit;
54-
font-size: $font-size-med;
55-
margin: 0;
52+
button,
53+
input,
54+
select,
55+
textarea {
56+
font-family: inherit;
57+
font-size: $font-size-med;
58+
margin: 0;
5659
}
5760

5861
/**
5962
* Text area base styles
6063
*/
6164
textarea {
62-
resize: none;
65+
resize: none;
6366
}
6467

6568
/**
6669
* Input and text area base styles
6770
*/
68-
input, textarea {
69-
width: 100%;
70-
padding: 0.5rem;
71-
border: $border-thickness solid $color-form-border;
72-
background: $color-form-bg;
73-
74-
&:focus {
75-
border-color: $color-form-border-focus;
76-
}
71+
input,
72+
textarea {
73+
width: 100%;
74+
padding: 0.5rem;
75+
border: $border-width solid $color-form-border;
76+
background: $color-form-bg;
77+
78+
&:focus {
79+
border-color: $color-form-border-focus;
80+
}
7781
}
7882

7983
/**
8084
* Remove webkit appearance styles from these elements
8185
*/
82-
input[type=text], input[type=search], input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration, input[type=url], input[type=number], textarea {
83-
-webkit-appearance: none;
86+
input[type='text'],
87+
input[type='search'],
88+
input[type='search']::-webkit-search-cancel-button,
89+
input[type='search']::-webkit-search-decoration,
90+
input[type='url'],
91+
input[type='number'],
92+
textarea {
93+
-webkit-appearance: none;
8494
}
8595

8696
/**
8797
* Checkbox and radio button base styles
8898
*/
89-
input[type="checkbox"],
90-
input[type="radio"] {
91-
width: auto;
92-
margin-right: 0.3rem;
93-
border-color: $color-form-border;
99+
input[type='checkbox'],
100+
input[type='radio'] {
101+
width: auto;
102+
margin-right: 0.3rem;
103+
border-color: $color-form-border;
94104
}
95105

96106
/**
97107
* Search input base styles
98108
*/
99-
input[type="search"] {
100-
-webkit-appearance: none;
101-
border-radius: 0;
109+
input[type='search'] {
110+
-webkit-appearance: none;
111+
border-radius: 0;
102112
}
103113

104114
/**
105115
* Select
106116
* 1) Remove default styling
107117
*/
108118
select {
109-
display: block;
110-
font-size: $font-size-med;
111-
width: 100%;
112-
border: $border-thickness solid $color-form-border;
113-
padding: 0.5rem;
114-
background: $color-form-bg;
115-
color: $color-form;
116-
117-
&:focus {
118-
border-color: $color-form-border-focus;
119-
}
119+
display: block;
120+
font-size: $font-size-med;
121+
width: 100%;
122+
border: $border-width solid $color-form-border;
123+
padding: 0.5rem;
124+
background: $color-form-bg;
125+
color: $color-form;
126+
127+
&:focus {
128+
border-color: $color-form-border-focus;
129+
}
120130
}

‎packages/docs/src/scss/base/_text.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,9 @@ blockquote {
2525
*/
2626
hr {
2727
border: 0;
28-
height: 1px;
28+
height: $border-width-thick;
2929
background: $color-gray-13;
30-
margin: 1rem 0;
30+
margin: 2rem 0;
3131
}
3232

3333
/**

‎packages/docs/src/scss/components/_buttons.scss

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -7,41 +7,41 @@
77
* 1) Button or link that has functionality to it
88
*/
99
.c-btn {
10-
font-family: $font-secondary;
11-
display: inline-flex;
12-
align-items: center;
13-
justify-content: center;
14-
border: $border-thickness solid $color-btn-primary-border;
15-
background: $color-brand-green;
16-
color: $color-black;
17-
line-height: 1;
18-
padding: 1rem 2rem;
19-
border: 0;
20-
text-align: center;
21-
transition: all $anim-fade-quick $anim-ease;
10+
font-family: $font-secondary;
11+
display: inline-flex;
12+
align-items: center;
13+
justify-content: center;
14+
border: $border-width solid $color-btn-primary-border;
15+
background: $color-brand-green;
16+
color: $color-black;
17+
line-height: 1;
18+
padding: 1rem 2rem;
19+
border: 0;
20+
text-align: center;
21+
transition: all $anim-fade-quick $anim-ease;
2222

23-
&:hover,
24-
&:focus {
25-
background: $color-btn-primary-bg-hover;
26-
}
23+
&:hover,
24+
&:focus {
25+
background: $color-btn-primary-bg-hover;
26+
}
2727
}
2828

2929
.c-btn--inverted {
30-
background: none;
31-
border: 1px solid $color-gray-50;
32-
color: $color-gray-27;
30+
background: none;
31+
border: 1px solid $color-gray-50;
32+
color: $color-gray-27;
3333
}
3434

3535
.c-btn--small {
36-
padding: 1rem;
36+
padding: 1rem;
3737
}
3838

3939
/*
4040
* Button icon
4141
*/
4242
.c-btn__icon {
43-
width: 1rem;
44-
height: 1rem;
45-
fill: $color-btn-primary;
46-
transition: fill $anim-fade-quick $anim-ease;
43+
width: 1rem;
44+
height: 1rem;
45+
fill: $color-btn-primary;
46+
transition: fill $anim-fade-quick $anim-ease;
4747
}

‎packages/docs/src/scss/components/_tree-nav.scss

Lines changed: 45 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -10,48 +10,64 @@
1010
}
1111

1212
.c-tree-nav__link {
13-
display: block;
14-
margin-bottom: 1.2rem;
15-
color: inherit;
16-
font-weight: $font-weight-bold;
17-
transition: color 0.2s ease;
18-
19-
&:hover {
20-
color: $color-white;
21-
}
22-
23-
&:focus {
24-
color: $color-white;
25-
}
13+
display: block;
14+
margin-bottom: 1.2rem;
15+
color: inherit;
16+
font-weight: $font-weight-bold;
17+
transition: color 0.2s ease;
18+
19+
&:hover {
20+
color: $color-white;
21+
}
22+
23+
&:focus {
24+
color: $color-white;
25+
}
2626
}
2727

2828
.c-tree-nav__link--is-active {
29-
color: $color-white;
30-
font-weight: bold;
29+
color: $color-white;
30+
font-weight: bold;
3131
}
3232

3333
/**
3434
* Subnav
3535
*/
3636
.c-tree-nav__subnav {
37-
padding-left: 1.5rem;
38-
border-left: 1px solid $color-gray-73;
39-
margin-bottom: 1rem;
40-
font-size: $font-size-med;
37+
padding-left: 1rem;
38+
border-left: 1px solid $color-gray-73;
39+
margin-bottom: 1rem;
40+
font-size: $font-size-med;
41+
display: none;
42+
43+
.c-tree-nav__item.is-active & {
44+
display: block;
45+
}
4146
}
4247

4348
.c-tree-nav__subnav-link {
44-
color: inherit;
45-
display: block;
46-
margin-bottom: 1rem;
47-
48-
&:hover,
49-
&:focus {
50-
color: $color-white;
51-
}
49+
color: inherit;
50+
display: block;
51+
margin-bottom: 1rem;
52+
53+
&:hover,
54+
&:focus {
55+
color: $color-white;
56+
}
57+
}
58+
59+
.c-tree-nav__link--btn {
60+
background: transparent;
61+
border: 0;
62+
padding: 0;
63+
font-size: inherit;
64+
65+
svg {
66+
fill: currentColor;
67+
}
5268
}
5369

5470
.c-tree-nav__subnav-link--heading {
55-
font-weight: bold;
56-
color: $color-white;
71+
font-weight: bold;
72+
color: $color-white;
5773
}

0 commit comments

Comments
 (0)