Skip to content

Commit b2953e5

Browse files
JackuBJackuB
committed
feat(css): add dark mode CSS
1 parent b3db58c commit b2953e5

File tree

5 files changed

+106
-89
lines changed

5 files changed

+106
-89
lines changed

‎.npmignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,5 @@ node_modules
1010
cypress.json
1111
index.html
1212
webpack.config.js
13-
dist/ignore.min.js
13+
dist/ace-diff-light.min.js
14+
dist/ace-diff-dark.min.js

‎src/styles/ace-diff-base.scss

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
.acediff { // .acediff class itself got no styles
2+
3+
// We have to provide some dimensions for the ACE editor
4+
// This will expand to whathever space is available
5+
&__wrap {
6+
display: flex;
7+
flex-direction: row;
8+
position: absolute;
9+
bottom: 0;
10+
width: 100%;
11+
top: 0px;
12+
left: 0px;
13+
14+
// these 3 lines are to prevents an unsightly scrolling bounce affect on Safari
15+
height: 100%;
16+
width: 100%;
17+
overflow: auto;
18+
}
19+
20+
&__gutter {
21+
flex: 0 0 60px;
22+
border-left: 1px solid darken($gutterBackground, 20);
23+
border-right: 1px solid darken($gutterBackground, 20);
24+
background-color: $gutterBackground;
25+
overflow: hidden;
26+
27+
svg {
28+
background-color: $gutterBackground;
29+
}
30+
}
31+
&__left, &__right {
32+
height: 100%;
33+
flex: 1;
34+
}
35+
36+
// The line that's rendered in ACE editor under diffed lines
37+
&__diffLine {
38+
background-color: $connectorBackground;
39+
border-top: 1px solid $connectorBorder;
40+
border-bottom: 1px solid $connectorBorder;
41+
position: absolute;
42+
z-index: 4;
43+
&.targetOnly {
44+
height: 0px !important;
45+
border-top: 1px solid $connectorBorder;
46+
border-bottom: 0px;
47+
position: absolute;
48+
}
49+
}
50+
51+
// SVG connector
52+
&__connector {
53+
fill: $connectorBackground;
54+
stroke: $connectorBorder;
55+
}
56+
57+
// Arrows for merging diffs
58+
&__copy--right,
59+
&__copy--left {
60+
position: relative;
61+
62+
div {
63+
color: $copyArrowsColor;
64+
text-shadow: 1px 1px rgba(invert($copyArrowsColor), .7);
65+
position: absolute;
66+
margin: 2px 3px;
67+
cursor: pointer;
68+
}
69+
}
70+
&__copy--right div:hover {
71+
color: $mergeLeftColor;
72+
}
73+
74+
&__copy--left {
75+
float: right;
76+
77+
div {
78+
right: 0px;
79+
80+
&:hover {
81+
color: $mergeRightColor;
82+
}
83+
}
84+
}
85+
}
86+

‎src/styles/ace-diff-dark.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
$connectorBackground: #004d7a;
2+
$connectorBorder: #003554;
3+
$gutterBackground: #272727;
4+
$copyArrowsColor: #fff;
5+
$mergeRightColor: #f7b742;
6+
$mergeLeftColor: #61a2e7;
7+
8+
@import './ace-diff-base.scss';

‎src/styles/ace-diff.scss

Lines changed: 5 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,8 @@
11
$connectorBackground: #d8f2ff;
22
$connectorBorder: #a2d7f2;
3+
$gutterBackground: #efefef;
4+
$copyArrowsColor: #000;
5+
$mergeRightColor: #c98100;
6+
$mergeLeftColor: #004ea0;
37

4-
.acediff { // .acediff class itself got no styles
5-
6-
// We have to provide some dimensions for the ACE editor
7-
// This will expand to whathever space is available
8-
&__wrap {
9-
display: flex;
10-
flex-direction: row;
11-
position: absolute;
12-
bottom: 0;
13-
width: 100%;
14-
top: 0px;
15-
left: 0px;
16-
17-
// these 3 lines are to prevents an unsightly scrolling bounce affect on Safari
18-
height: 100%;
19-
width: 100%;
20-
overflow: auto;
21-
}
22-
23-
&__gutter {
24-
flex: 0 0 60px;
25-
border-left: 1px solid #999999;
26-
border-right: 1px solid #999999;
27-
background-color: #efefef;
28-
overflow: hidden;
29-
30-
svg {
31-
background-color: #efefef;
32-
}
33-
}
34-
&__left, &__right {
35-
height: 100%;
36-
flex: 1;
37-
}
38-
39-
// The line that's rendered in ACE editor under diffed lines
40-
&__diffLine {
41-
background-color: $connectorBackground;
42-
border-top: 1px solid $connectorBorder;
43-
border-bottom: 1px solid $connectorBorder;
44-
position: absolute;
45-
z-index: 4;
46-
&.targetOnly {
47-
height: 0px !important;
48-
border-top: 1px solid $connectorBorder;
49-
border-bottom: 0px;
50-
position: absolute;
51-
}
52-
}
53-
54-
// SVG connector
55-
&__connector {
56-
fill: $connectorBackground;
57-
stroke: $connectorBorder;
58-
}
59-
60-
// Arrows for merging diffs
61-
&__copy--right,
62-
&__copy--left {
63-
position: relative;
64-
65-
div {
66-
color: #000000;
67-
text-shadow: 1px 1px #ffffff;
68-
position: absolute;
69-
margin: 2px 3px;
70-
cursor: pointer;
71-
}
72-
}
73-
&__copy--right div:hover {
74-
color: #004ea0;
75-
}
76-
77-
&__copy--left {
78-
float: right;
79-
80-
div {
81-
right: 0px;
82-
83-
&:hover {
84-
color: #c98100;
85-
}
86-
}
87-
}
88-
}
89-
8+
@import './ace-diff-base.scss';

‎webpack.config.js

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,18 @@ const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
44
const ExtractTextPlugin = require('extract-text-webpack-plugin');
55
const autoprefixer = require('autoprefixer');
66

7-
const extractSass = new ExtractTextPlugin({ filename: 'ace-diff.min.css' });
7+
const extractSass = new ExtractTextPlugin({
8+
filename: getPath => getPath('[name].min.css').replace('-light', ''),
9+
});
810

911
// Using CSS import in /src would mean that anyone using this package
1012
// with /src would also need to include and transpile our CSS
1113
// I'd rather have it as a choice whether I want to use that CSS or my own
1214
module.exports = {
1315
entry: {
1416
'ace-diff': './src/index.js',
15-
ignore: './src/styles/ace-diff.scss', // We need a standalone file
17+
'ace-diff-light': './src/styles/ace-diff.scss',
18+
'ace-diff-dark': './src/styles/ace-diff-dark.scss',
1619
},
1720
output: {
1821
path: path.resolve(__dirname, 'dist'),

0 commit comments

Comments
 (0)