Skip to content

Commit b85e3cb

Browse files
jakezateckyjakezatecky
committed
Update style format dependencies
1 parent c8b01fe commit b85e3cb

File tree

4 files changed

+103
-96
lines changed

4 files changed

+103
-96
lines changed

‎examples/src/scss/_cayman.scss‎

Lines changed: 55 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// stylelint-disable
1+
// stylelint-disable value-keyword-case
22

33
// Breakpoints
44
$large-breakpoint: 64em;
@@ -10,12 +10,14 @@ $header-bg-color: #159957 !default;
1010
$header-bg-color-secondary: #155799 !default;
1111

1212
// Text
13+
$font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !default;
1314
$section-headings-color: #159957 !default;
1415
$body-text-color: #606c71 !default;
1516
$body-link-color: #1e6bb8 !default;
1617
$blockquote-text-color: #819198 !default;
1718

1819
// Code
20+
$font-family-code: Consolas, "Liberation Mono", Menlo, Courier, monospace !default;
1921
$code-bg-color: #f3f6fa !default;
2022
$code-text-color: #567482 !default;
2123

@@ -49,7 +51,7 @@ $hr-border-color: #eff0f1 !default;
4951
body {
5052
padding: 0;
5153
margin: 0;
52-
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
54+
font-family: $font-family;
5355
font-size: 16px;
5456
line-height: 1.5;
5557
color: $body-text-color;
@@ -65,27 +67,6 @@ a {
6567
}
6668

6769
.btn {
68-
display: inline-block;
69-
margin-bottom: 1rem;
70-
color: rgba(255, 255, 255, 0.7);
71-
background-color: rgba(255, 255, 255, 0.08);
72-
border-color: rgba(255, 255, 255, 0.2);
73-
border-style: solid;
74-
border-width: 1px;
75-
border-radius: 0.3rem;
76-
transition: color 0.2s, background-color 0.2s, border-color 0.2s;
77-
78-
&:hover {
79-
color: rgba(255, 255, 255, 0.8);
80-
text-decoration: none;
81-
background-color: rgba(255, 255, 255, 0.2);
82-
border-color: rgba(255, 255, 255, 0.3);
83-
}
84-
85-
+ .btn {
86-
margin-left: 1rem;
87-
}
88-
8970
@include large {
9071
padding: 0.75rem 1rem;
9172
}
@@ -106,14 +87,30 @@ a {
10687
margin-left: 0;
10788
}
10889
}
90+
91+
display: inline-block;
92+
margin-bottom: 1rem;
93+
color: rgba(255, 255, 255, 0.7);
94+
background-color: rgba(255, 255, 255, 0.08);
95+
border-color: rgba(255, 255, 255, 0.2);
96+
border-style: solid;
97+
border-width: 1px;
98+
border-radius: 0.3rem;
99+
transition: color 0.2s, background-color 0.2s, border-color 0.2s;
100+
101+
&:hover {
102+
color: rgba(255, 255, 255, 0.8);
103+
text-decoration: none;
104+
background-color: rgba(255, 255, 255, 0.2);
105+
border-color: rgba(255, 255, 255, 0.3);
106+
}
107+
108+
+ .btn {
109+
margin-left: 1rem;
110+
}
109111
}
110112

111113
.page-header {
112-
color: $header-heading-color;
113-
text-align: center;
114-
background-color: $header-bg-color;
115-
background-image: linear-gradient(120deg, $header-bg-color-secondary, $header-bg-color);
116-
117114
@include large {
118115
padding: 5rem 6rem;
119116
}
@@ -125,12 +122,18 @@ a {
125122
@include small {
126123
padding: 2rem 1rem;
127124
}
125+
126+
color: $header-heading-color;
127+
text-align: center;
128+
background-color: $header-bg-color;
129+
background-image: linear-gradient(
130+
120deg,
131+
$header-bg-color-secondary,
132+
$header-bg-color
133+
);
128134
}
129135

130136
.project-name {
131-
margin-top: 0;
132-
margin-bottom: 0.1rem;
133-
134137
@include large {
135138
font-size: 3.25rem;
136139
}
@@ -142,13 +145,12 @@ a {
142145
@include small {
143146
font-size: 1.75rem;
144147
}
148+
149+
margin-top: 0;
150+
margin-bottom: 0.1rem;
145151
}
146152

147153
.project-tagline {
148-
margin-bottom: 2rem;
149-
font-weight: normal;
150-
opacity: 0.7;
151-
152154
@include large {
153155
font-size: 1.25rem;
154156
}
@@ -160,15 +162,13 @@ a {
160162
@include small {
161163
font-size: 1rem;
162164
}
165+
166+
margin-bottom: 2rem;
167+
font-weight: normal;
168+
opacity: 0.7;
163169
}
164170

165171
.main-content {
166-
word-wrap: break-word;
167-
168-
:first-child {
169-
margin-top: 0;
170-
}
171-
172172
@include large {
173173
max-width: 64rem;
174174
padding: 2rem 6rem;
@@ -186,6 +186,12 @@ a {
186186
font-size: 1rem;
187187
}
188188

189+
word-wrap: break-word;
190+
191+
:first-child {
192+
margin-top: 0;
193+
}
194+
189195
img {
190196
max-width: 100%;
191197
}
@@ -208,7 +214,7 @@ a {
208214

209215
code {
210216
padding: 2px 4px;
211-
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
217+
font-family: $font-family-code;
212218
font-size: 0.9rem;
213219
color: $code-text-color;
214220
background-color: $code-bg-color;
@@ -219,7 +225,7 @@ a {
219225
padding: 0.8rem;
220226
margin-top: 0;
221227
margin-bottom: 1rem;
222-
font: 1rem Consolas, "Liberation Mono", Menlo, Courier, monospace;
228+
font: 1rem $font-family-code;
223229
color: $code-text-color;
224230
word-wrap: normal;
225231
background-color: $code-bg-color;
@@ -269,8 +275,8 @@ a {
269275
background-color: transparent;
270276
border: 0;
271277

272-
&:before,
273-
&:after {
278+
&::before,
279+
&::after {
274280
content: normal;
275281
}
276282
}
@@ -300,8 +306,6 @@ a {
300306
width: 100%;
301307
overflow: auto;
302308
word-break: normal;
303-
word-break: keep-all; // For Firefox to horizontally scroll wider tables.
304-
-webkit-overflow-scrolling: touch;
305309

306310
th {
307311
font-weight: bold;
@@ -340,10 +344,6 @@ a {
340344
}
341345

342346
.site-footer {
343-
padding-top: 2rem;
344-
margin-top: 2rem;
345-
border-top: solid 1px $hr-border-color;
346-
347347
@include large {
348348
font-size: 1rem;
349349
}
@@ -355,6 +355,10 @@ a {
355355
@include small {
356356
font-size: 0.9rem;
357357
}
358+
359+
padding-top: 2rem;
360+
margin-top: 2rem;
361+
border-top: solid 1px $hr-border-color;
358362
}
359363

360364
.site-footer-owner {

‎examples/src/scss/style.scss‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@ $tree-font-family: "Roboto", sans-serif;
2626
}
2727

2828
.react-checkbox-tree {
29-
color: $rct-color;
3029
font-family: $tree-font-family;
30+
color: $rct-color;
3131
}
3232

3333
.clickable-labels {
@@ -49,11 +49,11 @@ $tree-font-family: "Roboto", sans-serif;
4949

5050
.filter-container > .filter-text {
5151
display: block;
52-
margin-bottom: .75rem;
53-
border: 1px solid $input-border-color;
54-
border-radius: .25rem;
55-
background-clip: padding-box;
56-
padding: .375rem .75rem;
57-
line-height: 1.5;
52+
padding: 0.375rem 0.75rem;
53+
margin-bottom: 0.75rem;
5854
font-size: 1rem;
55+
line-height: 1.5;
56+
background-clip: padding-box;
57+
border: 1px solid $input-border-color;
58+
border-radius: 0.25rem;
5959
}

‎package.json‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -19,23 +19,25 @@
1919
"main": "lib/index.js",
2020
"browser": "lib/index.browser.js",
2121
"scripts": {
22-
"build-script": "npm run build-script-node && npm run build-script-web",
23-
"build-script-node": "webpack --env=target=node",
24-
"build-script-web": "webpack --env=target=web",
25-
"build-scss": "sass src/scss/react-checkbox-tree.scss lib/react-checkbox-tree.css",
26-
"build-style": "npm run build-scss && npm run build-style-autoprefix",
27-
"build-style-autoprefix": "postcss lib/react-checkbox-tree.css --use autoprefixer --output lib/react-checkbox-tree.css",
22+
"build:script": "npm run build:script-node && npm run build:script-web",
23+
"build:script-node": "webpack --env=target=node",
24+
"build:script-web": "webpack --env=target=web",
25+
"build:scss": "sass src/scss/react-dual-listbox.scss lib/react-dual-listbox.css",
26+
"build:style": "npm run build:scss && npm run build:style-autoprefix",
27+
"build:style-autoprefix": "postcss lib/react-dual-listbox.css --use autoprefixer --output lib/react-dual-listbox.css",
2828
"build": "npm run build-script && npm run build-style",
2929
"examples": "webpack serve --config=webpack.config.test.js",
30+
"format:style": "prettier --write src/scss/**/*.scss examples/src/scss/**/*.scss",
31+
"lint": "npm run lint:script && npm run lint:style",
32+
"lint:script": "eslint src/**/*.{js,jsx} examples/src/**/*.{js,jsx} test/**/*.{js,jsx} *.{js,jsx}",
33+
"lint:style": "stylelint src/scss/**/*.scss examples/src/scss/**/*.scss",
3034
"gh-build": "webpack --config=webpack.config.test.js --mode=production",
3135
"gh-deploy": "npm run gh-build && bash ./gh-deploy.sh",
3236
"prepublishOnly": "npm run release",
3337
"release": "npm run test && npm run build",
34-
"test": "npm run test-script && npm run test-style",
35-
"test-script": "npm run test-script-format && npm run test-script-mocha",
36-
"test-script-format": "eslint src/**/*.{js,jsx} examples/src/**/*.{js,jsx} test/**/*.{js,jsx} *.{js,jsx}",
37-
"test-script-mocha": "cross-env NODE_PATH=./src mocha test/**/*.{js,jsx} --exit",
38-
"test-style": "stylelint src/scss/**/*.scss examples/src/scss/**/*.scss"
38+
"test": "npm run lint && npm run test:script && npm run test:style-format",
39+
"test:script": "cross-env NODE_PATH=./src mocha test/**/*.{js,jsx} --exit",
40+
"test:style-format": "prettier --check src/scss/**/*.scss examples/src/scss/**/*.scss"
3941
},
4042
"peerDependencies": {
4143
"react": "^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
@@ -71,12 +73,13 @@
7173
"mocha": "^10.0.0",
7274
"postcss": "^8.4.21",
7375
"postcss-cli": "^10.1.0",
76+
"prettier": "^2.8.7",
7477
"react": "^18.2.0",
7578
"react-dom": "^18.2.0",
7679
"sass": "^1.58.2",
7780
"sass-loader": "^13.2.0",
7881
"stylelint": "^15.1.0",
79-
"stylelint-config-takiyon": "^2.0.4",
82+
"stylelint-config-takiyon": "^3.0.0",
8083
"webpack": "^5.3.2",
8184
"webpack-cli": "^5.0.1",
8285
"webpack-dev-server": "^4.11.1"

0 commit comments

Comments
 (0)