Skip to content

Commit 443b529

Browse files
Rokt33rRokt33r
committed
extract stylus vars of nav
1 parent c3e62f5 commit 443b529

5 files changed

Lines changed: 79 additions & 138 deletions

File tree

‎browser/main/SideNav/FolderItem.styl‎

Lines changed: 14 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,15 @@
33
width 100%
44
position relative
55
cursor pointer
6-
transition 0.15s
7-
color $nav-inactive-text-color
8-
&:hover
9-
background-color $nav-hover-background
10-
.control
11-
opacity 1
12-
&:active, &:hover:active
13-
background-color $nav-active-background
14-
color $nav-text-color
6+
navButtonColor()
157

168
.root--active
179
@extend .root
18-
background-color $nav-active-background
19-
color $nav-text-color
10+
background-color $ui-button--active-backgroundColor
11+
color $ui-button--active-color
2012
&:hover
21-
background-color $nav-active-background
22-
color $nav-text-color
13+
background-color $ui-button--active-backgroundColor
14+
color $ui-button--active-color
2315
.control
2416
opacity 1
2517

@@ -46,19 +38,11 @@
4638
transition opacity 0.15s
4739

4840
.control-button
41+
navButtonColor()
4942
width 24px
5043
height 24px
5144
margin-top 4.5px
52-
border none
5345
border-radius 5px
54-
background-color transparent
55-
color $nav-inactive-text-color
56-
transition color background-color 0.15s
57-
&:hover
58-
background-color $nav-hover-background
59-
&:active
60-
background-color $nav-active-background
61-
color $nav-text-color
6246
.root--edit
6347
@extend .root
6448

@@ -69,12 +53,12 @@
6953
height 33px
7054
padding 0 10px
7155
border-radius 5px
72-
border solid 1px $nav-border-color
56+
border $ui-border
7357
outline none
7458
&:focus
75-
border-color $focus-border-color
59+
border-color $ui-input--focus-borderColor
7660
&:disabled
77-
background-color $disabled-input-background
61+
background-color $ui-input--disabled-backgroundColor
7862

7963
.root--folded
8064
@extend .root
@@ -95,7 +79,7 @@
9579
box-sizing border-box
9680
margin-left 0
9781
overflow ellipsis
98-
background-color $nav-tooltip-background-color
82+
background-color $ui-tooltip-backgroundColor
9983
color white
10084
line-height 34px
10185
border-top-right-radius 5px
@@ -107,11 +91,11 @@
10791

10892
.root--folded--active
10993
@extend .root--folded
110-
background-color $nav-active-background
111-
color $nav-text-color
94+
background-color $ui-button--active-backgroundColor
95+
color $ui-button--active-color
11296
&:hover
113-
background-color $nav-active-background
114-
color $nav-text-color
97+
background-color $ui-button--active-backgroundColor
98+
color $ui-button--active-color
11599

116100
.root--edit--folded
117101
@extend .root--edit

‎browser/main/SideNav/RepositorySection.styl‎

Lines changed: 20 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -3,33 +3,25 @@
33
color $nav-text-color
44

55
.header
6+
navButtonColor()
67
position relative
8+
width 100%
79
height 33px
810
cursor pointer
9-
color $nav-inactive-text-color
10-
transition 0.15s
11-
border none
12-
width 100%
1311
text-align left
14-
background-color transparent
1512
font-size 14px
16-
&:hover
17-
background-color $nav-hover-background
18-
.header-control-button
19-
opacity 1
20-
&:active, &:active:hover
21-
background-color $nav-active-background
22-
color $nav-text-color
13+
&:hover .header-control-button
14+
opacity 1
2315

2416
.header--active
2517
@extend .header
26-
background-color $nav-active-background
27-
color $nav-text-color
18+
background-color $ui-button--active-backgroundColor
19+
color $ui-button--active-color
2820
.header-control-button
2921
opacity 1
3022
&:hover
31-
background-color $nav-active-background
32-
color $nav-text-color
23+
background-color $ui-button--active-backgroundColor
24+
color $ui-button--active-color
3325

3426
.header-name
3527
position absolute
@@ -51,21 +43,13 @@
5143
width 48px
5244

5345
.header-control-button
46+
navButtonColor()
5447
width 24px
48+
height 24px
5549
padding 0
5650
margin-top 4.5px
57-
height 24px
58-
border none
5951
border-radius 5px
60-
background-color transparent
61-
color $nav-inactive-text-color
6252
opacity 0
63-
transition color background-color 0.15s
64-
&:hover
65-
background-color $nav-hover-background
66-
&:active
67-
background-color $nav-active-background
68-
color $nav-text-color
6953

7054
.header-control-button--show
7155
@extend .header-control-button
@@ -81,31 +65,22 @@
8165
height 33px
8266
padding 0 10px
8367
border-radius 5px
84-
border solid 1px $nav-border-color
68+
border $ui-border
8569
outline none
8670
&:focus
87-
border-color $focus-border-color
71+
border-color $ui-input--focus-borderColor
8872
&:disabled
89-
background-color $disabled-input-background
73+
background-color $ui-input--disabled-backgroundColor
9074

9175
.newFolderButton
92-
height 33px
76+
navButtonColor()
77+
height 34px
9378
width 100%
9479
border none
9580
padding-left 20px
9681
text-align left
97-
color $nav-inactive-text-color
98-
background-color transparent
99-
transition color background-color 0.15s
100-
&:hover
101-
background-color $nav-hover-background
102-
&:active
103-
background-color $nav-active-background
104-
color $nav-text-color
105-
106-
.newFolderButton
107-
height 34px
10882
line-height 34px
83+
10984
.newFolderButton-label
11085
margin-left 0
11186

@@ -135,7 +110,7 @@
135110
box-sizing border-box
136111
margin-left 0
137112
overflow ellipsis
138-
background-color $nav-tooltip-background-color
113+
background-color $ui-tooltip-backgroundColor
139114
color white
140115
line-height 34px
141116
border-top-right-radius 5px
@@ -155,9 +130,9 @@
155130
display none
156131
.header-control-button--show
157132
float right
158-
background-color $nav-tooltip-button-background
133+
background-color $ui-tooltip-button-backgroundColor
159134
&:hover
160-
background-color $nav-tooltip-button-background--hover
135+
background-color $ui-tooltip-button--hover-backgroundColor
161136
.newFolderButton
162137
width 44px
163138
padding 0
@@ -175,7 +150,7 @@
175150
box-sizing border-box
176151
margin-left 0
177152
overflow ellipsis
178-
background-color $nav-tooltip-background-color
153+
background-color $ui-tooltip-backgroundColor
179154
color white
180155
line-height 34px
181156
border-top-right-radius 5px

‎browser/main/SideNav/SideNav.styl‎

Lines changed: 11 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@
22
absolute top left
33
bottom 24px
44
width 200px
5-
border-right solid 1px $nav-border-color
6-
background-color $nav-background-color
5+
border-right $ui-border
6+
background-color $ui-backgroundColor
77
user-select none
8-
color $nav-text-color
8+
color $ui-text-color
99

1010
.top
1111
height 60px
12-
border-bottom solid 1px $nav-border-color
12+
border-bottom $ui-border
1313

1414
.top-menu
1515
navButtonColor()
@@ -35,10 +35,10 @@
3535

3636
.menu-button--active
3737
@extend .menu-button
38-
background-color $nav-active-background
39-
color $nav-text-color
38+
background-color $ui-button--active-backgroundColor
39+
color $ui-button--active-color
4040
&:hover
41-
background-color $nav-active-background
41+
background-color $ui-button--active-backgroundColor
4242

4343
.menu-button-label
4444
margin-left 5px
@@ -52,26 +52,17 @@
5252
padding 0 10px
5353
margin-top 15px
5454
line-height 24px
55-
color $nav-inactive-color
55+
color $ui-inactive-text-color
5656

5757
.navToggle
58+
navButtonColor()
5859
display block
5960
position absolute
6061
right 5px
6162
bottom 5px
6263
border-radius 16.5px
6364
height 33px
6465
width 33px
65-
color $nav-inactive-text-color
66-
border none
67-
background-color transparent
68-
transition color background-color 0.15s
69-
&:hover
70-
background-color $nav-hover-background
71-
color $nav-inactive-text-color
72-
&:active
73-
background-color $nav-active-background
74-
color $nav-text-color
7566

7667
.root-folded
7768
@extend .root
@@ -93,7 +84,7 @@
9384
margin-top -5px
9485
margin-left 0
9586
overflow hidden
96-
background-color $nav-tooltip-background-color
87+
background-color $ui-tooltip-backgroundColor
9788
color white
9889
line-height 34px
9990
border-top-right-radius 5px
@@ -115,7 +106,7 @@
115106
margin-top -9px
116107
margin-left 0
117108
overflow ellipsis
118-
background-color $nav-tooltip-background-color
109+
background-color $ui-tooltip-backgroundColor
119110
color white
120111
line-height 34px
121112
border-top-right-radius 5px

‎browser/main/StatusBar/StatusBar.styl‎

Lines changed: 6 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,23 @@
11
.root
22
absolute bottom left right
33
height 24px
4-
border-top solid 1px $nav-border-color
5-
background-color $nav-background-color
4+
border-top $ui-border
5+
background-color $ui-backgroundColor
66

77
.zoom
8+
navButtonColor()
89
absolute right
910
height 24px
1011
width 60px
1112
border-width 0 1px
1213
border-style solid
13-
border-color $nav-border-color
14-
background-color transparent
15-
color $nav-inactive-text-color
16-
transition color background-color 0.15s
17-
&:hover
18-
background-color $nav-hover-background
19-
color $nav-inactive-text-color
20-
&:active
21-
background-color $nav-active-background
22-
color $nav-text-color
14+
border-color $ui-borderColor
2315

2416
.update
17+
navButtonColor()
2518
position absolute
2619
right 60px
2720
height 24px
2821
border-width 0 0 0 1px
2922
border-style solid
30-
border-color $nav-border-color
31-
background-color transparent
32-
color $brand-color
33-
transition color background-color 0.15s
34-
&:hover
35-
background-color $nav-hover-background
36-
color $brand-color
37-
&:active
38-
background-color $nav-active-background
39-
color $brand-color
40-
23+
border-color $ui-borderColor

0 commit comments

Comments
 (0)