Skip to content

Commit e217faf

Browse files
committed
Complete rewrite for ui-variables
1 parent 53a93e9 commit e217faf

31 files changed

+1259
-1039
lines changed

index.less

+21-17
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,21 @@
1-
@import "stylesheets/atom";
2-
@import "stylesheets/editor";
3-
@import "stylesheets/overlay";
4-
@import "stylesheets/select-list";
5-
@import "stylesheets/tree-view";
6-
@import "stylesheets/tabs";
7-
@import "stylesheets/panes";
8-
@import "stylesheets/status-bar";
9-
@import "stylesheets/command-panel";
10-
@import "stylesheets/command-logger";
11-
@import "stylesheets/blurred";
12-
@import "stylesheets/image-view";
13-
@import "stylesheets/results";
14-
@import "stylesheets/tooltip";
15-
@import "stylesheets/background-tips";
16-
@import "stylesheets/release-notes";
17-
@import "stylesheets/plugin-styles";
1+
@import (reference) "styles/ui-variables";
2+
@import (reference) "styles/ui-mixins";
3+
@import (reference) "octicon-mixins";
4+
5+
@import "styles/badges";
6+
@import "styles/buttons";
7+
@import "styles/editor";
8+
@import "styles/git";
9+
@import "styles/lists";
10+
@import "styles/overlay";
11+
@import "styles/overrides";
12+
@import "styles/panels";
13+
@import "styles/project-find";
14+
@import "styles/release-notes";
15+
@import "styles/settings";
16+
@import "styles/site";
17+
@import "styles/spinner";
18+
@import "styles/tabs";
19+
@import "styles/text";
20+
@import "styles/tooltip";
21+
@import "styles/tree-view";

lib/unity-ui.coffee

+13-13
Original file line numberDiff line numberDiff line change
@@ -11,19 +11,19 @@ removeClass = (el, klass) ->
1111

1212
module.exports =
1313
configDefaults:
14-
allowTreeViewToScrollHorizontally: false
14+
showIcons: false
15+
colorStatusIndicatorsInTreeView: false
1516

1617
activate: (state) ->
17-
atom.config.observe 'unity-ui.allowTreeViewToScrollHorizontally', ->
18-
scroller = document.getElementsByClassName('tree-view-scroller')[0]
19-
if atom.config.get('unity-ui.allowTreeViewToScrollHorizontally')
20-
addClass(scroller, 'tree-view-scrolls-horizontally')
18+
atom.config.observe 'unity-ui.showIcons', ->
19+
body = document.body
20+
if atom.config.get('unity-ui.showIcons')
21+
addClass(body, 'unity-ui-show-icons')
2122
else
22-
removeClass(scroller, 'tree-view-scrolls-horizontally')
23-
24-
useragent = navigator.userAgent
25-
26-
if matches = useragent.match(/Mac OS X 10_([0-9]+)_[0-9]+/i)
27-
version = parseInt(matches[1], 10)
28-
osstyle = if version >= 10 then 'unity-mac-new' else 'unity-mac-old'
29-
addClass(document.body, osstyle)
23+
removeClass(body, 'unity-ui-show-icons')
24+
atom.config.observe 'unity-ui.colorStatusIndicatorsInTreeView', ->
25+
treeView = document.querySelector('.tree-view')
26+
if atom.config.get('unity-ui.colorStatusIndicatorsInTreeView')
27+
removeClass(treeView, 'unity-ui-fade-status')
28+
else
29+
addClass(treeView, 'unity-ui-fade-status')

styles/badges.less

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.badge.icon {
2+
padding:@component-padding/3 @component-padding/1.5;
3+
}

styles/buttons.less

+127
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
.btn {
2+
font-size:@font-size;
3+
height:24px;
4+
box-shadow:0 0 3px 7px fade(#92bcea, 0), 0 1px 0 rgba(0,0,0,0.1);
5+
transition:box-shadow 0.1s ease-in-out;
6+
7+
&:active {
8+
background:#f4f4f4;
9+
box-shadow:inset #fff 0 1px 0, rgba(0,0,0,0.1) 0 1px 0;
10+
outline:none;
11+
}
12+
13+
&:focus, &.selected {
14+
box-shadow:0 0 0px 3px #92bcea;
15+
outline:none;
16+
}
17+
18+
&.btn-primary {
19+
color:@text-color-selected;
20+
background:@background-color-selected;
21+
22+
&:hover {
23+
color:@text-color-selected;
24+
}
25+
26+
&:active, &.selected {
27+
background:darken(@background-color-selected, 10%);
28+
color:@text-color-selected;
29+
}
30+
}
31+
32+
&.btn-info {
33+
color:@text-color-selected;
34+
background:@background-color-info;
35+
36+
&:hover {
37+
color:@text-color-selected;
38+
}
39+
40+
&:active, &.selected {
41+
background:darken(@background-color-info, 10%);
42+
color:@text-color-selected;
43+
}
44+
}
45+
46+
&.btn-success {
47+
color:@text-color-selected;
48+
background:@background-color-success;
49+
50+
&:hover {
51+
color:@text-color-selected;
52+
}
53+
54+
&:active, &.selected {
55+
background:darken(@background-color-success, 10%);
56+
color:@text-color-selected;
57+
}
58+
}
59+
60+
&.btn-warning {
61+
color:@text-color-selected;
62+
background:@background-color-warning;
63+
64+
&:hover {
65+
color:@text-color-selected;
66+
}
67+
68+
&:active, &.selected {
69+
background:darken(@background-color-warning, 10%);
70+
color:@text-color-selected;
71+
}
72+
}
73+
74+
&.btn-error {
75+
color:@text-color-selected;
76+
background:@background-color-error;
77+
78+
&:hover {
79+
color:@text-color-selected;
80+
}
81+
82+
&:active, &.selected {
83+
background:darken(@background-color-error, 10%);
84+
color:@text-color-selected;
85+
}
86+
}
87+
88+
&.icon:before {
89+
margin-right:5px;
90+
}
91+
92+
}
93+
94+
.btn-group {
95+
.btn {
96+
box-shadow:rgba(0,0,0,0.1) 0 1px 0;
97+
margin:0;
98+
border:none;
99+
100+
& + .btn {
101+
box-shadow:inset rgba(0,0,0,0.05) 1px 0 0, rgba(0,0,0,0.1) 0 1px 0;
102+
margin-left:0;
103+
}
104+
105+
&.selected {
106+
background:#6a6a6a;
107+
color:#fff;
108+
box-shadow:inset rgba(0,0,0,0.15) 1px 0 0, inset rgba(0,0,0,0.15) -1px 0 0, rgba(0,0,0,0.1) 0 1px 0;
109+
110+
& + .btn {
111+
box-shadow:rgba(0,0,0,0.1) 0 1px 0;
112+
113+
&.selected {
114+
box-shadow:inset rgba(0,0,0,0.15) -1px 0 0, rgba(0,0,0,0.1) 0 1px 0;
115+
}
116+
}
117+
}
118+
}
119+
}
120+
121+
.find-and-replace .btn-group-options.btn-group .btn {
122+
width:35px;
123+
124+
&:first-child {
125+
width:34px;
126+
}
127+
}

styles/editor.less

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
atom-text-editor[mini] {
2+
padding-left: 0;
3+
font-size:@font-size;
4+
padding:4px 0;
5+
border-radius: @component-border-radius;
6+
color: @text-color-highlight;
7+
border:none;
8+
font-family:@font-family;
9+
background-color: @input-background-color;
10+
padding-left: @component-padding/2;
11+
box-shadow:0 0 3px 7px fade(#92bcea, 0), 0 1px 0 rgba(0,0,0,0.1);
12+
transition:box-shadow 0.1s ease-in-out;
13+
height:24px;
14+
15+
&,
16+
&::shadow {
17+
.placeholder-text {
18+
color: @text-color-subtle;
19+
}
20+
.selection .region {
21+
background-color: #ededed;
22+
}
23+
.cursor {
24+
border-color: #222;
25+
border-width: 1px;
26+
}
27+
}
28+
29+
&.is-focused,
30+
&.is-focused::shadow {
31+
background-color: #fff;
32+
opacity:1;
33+
outline:none;
34+
box-shadow:0 0 0px 3px #92bcea;
35+
border:none;
36+
37+
.selection .region {
38+
background-color: #B2D7FF;
39+
}
40+
}
41+
}

styles/git.less

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.status { .text(normal); }
2+
.status-added { .text(success); } // green
3+
.status-ignored { .text(subtle); } // faded
4+
.status-modified { .text(warning); } // orange
5+
.status-removed { .text(error); } // red
6+
.status-renamed { .text(info); } // blue

styles/images/loading-spin.svg

+6
Loading

styles/lists.less

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
@item-height: 21px;
2+
3+
.list-tree {
4+
li:not(.list-nested-item),
5+
li.list-nested-item > .list-item {
6+
line-height:@item-height;
7+
min-height:@item-height;
8+
}
9+
10+
&.has-collapsable-children .list-nested-item.collapsed > .list-item:before {
11+
content:'';
12+
font-size:10px;
13+
top:0px;
14+
left:-7px;
15+
opacity:0.5;
16+
}
17+
18+
&.has-collapsable-children .list-nested-item > .list-item:before {
19+
content:'';
20+
font-size:10px;
21+
top:1px;
22+
left:-7px;
23+
opacity:0.5;
24+
}
25+
}
26+
27+
.list-group, .list-tree {
28+
li {
29+
min-height:@item-height;
30+
box-sizing:border-box;
31+
}
32+
33+
.icon:before {
34+
margin-right:4px;
35+
}
36+
37+
.no-icon {
38+
padding-left:20px;
39+
}
40+
41+
.icon:before {
42+
display:none;
43+
}
44+
45+
.unity-ui-show-icons & .icon:before {
46+
display:inline-block;
47+
}
48+
}

0 commit comments

Comments
 (0)