Skip to content

Commit f13e806

Browse files
plxitycatarak
plxity
authored and
catarak
committed
Added hover effect on sidebar elements (#887)
* fixes * changes * fixes #886, adjusts sidebar styling to match navigation dropdown, move nav dropdown and sidebar dropdowns into common placeholder
1 parent e81cce1 commit f13e806

File tree

3 files changed

+78
-158
lines changed

3 files changed

+78
-158
lines changed

‎client/styles/abstracts/_placeholders.scss

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -176,3 +176,66 @@
176176
}
177177
}
178178
}
179+
180+
%dropdown-open {
181+
@include themify() {
182+
background-color: map-get($theme-map, 'modal-background-color');
183+
border: 1px solid map-get($theme-map, 'modal-border-color');
184+
box-shadow: 0 0 18px 0 getThemifyVariable('shadow-color');
185+
color: getThemifyVariable('dropdown-color');
186+
}
187+
text-align: left;
188+
width: #{180 / $base-font-size}rem;
189+
display: flex;
190+
position: absolute;
191+
flex-direction: column;
192+
top: 100%;
193+
height: auto;
194+
z-index: 9999;
195+
border-radius: #{6 / $base-font-size}rem;
196+
& li:last-child {
197+
border-radius: 0 0 #{5 / $base-font-size}rem #{5 / $base-font-size}rem;
198+
}
199+
& li {
200+
& button,
201+
& a {
202+
@include themify() {
203+
color: getThemifyVariable('dropdown-color');
204+
}
205+
}
206+
padding: #{8 / $base-font-size}rem #{16 / $base-font-size}rem;
207+
height: #{35 / $base-font-size}rem;
208+
cursor: pointer;
209+
display: flex;
210+
align-items: center;
211+
}
212+
& li:hover {
213+
@include themify() {
214+
background-color: getThemifyVariable('button-background-hover-color');
215+
color: getThemifyVariable('button-hover-color')
216+
}
217+
& button, & a {
218+
@include themify() {
219+
color: getThemifyVariable('button-hover-color');
220+
}
221+
}
222+
}
223+
}
224+
225+
%dropdown-open-left {
226+
@extend %dropdown-open;
227+
left: 0;
228+
border-top-left-radius: 0px;
229+
& li:first-child {
230+
border-radius: 0 #{5 / $base-font-size}rem 0 0;
231+
}
232+
}
233+
234+
%dropdown-open-right {
235+
@extend %dropdown-open;
236+
right: 0;
237+
border-top-right-radius: 0px;
238+
& li:first-child {
239+
border-radius: #{5 / $base-font-size}rem 0 0 0;
240+
}
241+
}

‎client/styles/components/_nav.scss

Lines changed: 1 addition & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -76,29 +76,11 @@
7676
}
7777

7878
.nav__dropdown {
79-
@include themify() {
80-
background-color: map-get($theme-map, 'modal-background-color');
81-
border: 1px solid map-get($theme-map, 'modal-border-color');
82-
box-shadow: 0 0 18px 0 getThemifyVariable('shadow-color');
83-
color: getThemifyVariable('dropdown-color');
84-
}
85-
79+
@extend %dropdown-open-left;
8680
display: none;
87-
text-align: left;
88-
width: #{180 / $base-font-size}rem;
89-
9081
.nav__item--open & {
9182
display: flex;
92-
position: absolute;
93-
flex-direction: column;
94-
top: #{40 / $base-font-size}rem;
95-
left: 0;
96-
height: auto;
9783
}
98-
99-
z-index: 9999;
100-
border-radius: #{6 / $base-font-size}rem;
101-
border-top-left-radius: 0px;
10284
}
10385

10486
.nav__items-right {
@@ -116,94 +98,11 @@
11698
}
11799
}
118100

119-
.nav__dropdown a,
120-
button {
121-
@include themify() {
122-
color: getThemifyVariable('secondary-text-color');
123-
}
124-
}
125-
126101
.nav__dropdown button {
127102
padding: 0;
128103
}
129104

130-
.nav__dropdown a:hover {
131-
@include themify() {
132-
color: getThemifyVariable('primary-text-color');
133-
}
134-
}
135-
136-
.nav__dropdown-heading {
137-
@include themify() {
138-
border-bottom: 1px dashed map-get($theme-map, 'inactive-text-color');
139-
}
140-
141-
height: #{(42 - 5) / $base-font-size}rem;
142-
display: flex;
143-
align-items: center;
144-
justify-content: space-between;
145-
margin: 0 #{16 / $base-font-size}rem;
146-
cursor: pointer;
147-
148-
&:hover {
149-
span {
150-
@include themify() {
151-
color: getThemifyVariable('nav-hover-color');
152-
}
153-
}
154-
155-
polygon {
156-
@include themify() {
157-
fill: getThemifyVariable('nav-hover-color');
158-
}
159-
}
160-
}
161-
}
162-
163-
.nav__dropdown-heading a,
164-
.nav__dropdown-heading a:hover {
165-
@include themify() {
166-
color: getThemifyVariable('inactive-text-color');
167-
}
168-
169-
cursor: default;
170-
width: 100%;
171-
}
172-
173-
.nav__dropdown-heading svg {
174-
transform-origin: 50% 50%;
175-
transform: rotate(180deg);
176-
}
177-
178105
.nav__dropdown-item {
179-
height: #{32 / $base-font-size}rem;
180-
width: 100%;
181-
display: flex;
182-
align-items: center;
183-
padding: 0 #{16 / $base-font-size}rem;
184-
cursor: pointer;
185-
186-
& button,
187-
& a {
188-
@include themify() {
189-
color: getThemifyVariable('dropdown-color');
190-
}
191-
}
192-
193-
&:hover {
194-
@include themify() {
195-
background-color: getThemifyVariable('button-background-hover-color');
196-
color: getThemifyVariable('button-hover-color')
197-
}
198-
199-
& button,
200-
& a {
201-
@include themify() {
202-
color: getThemifyVariable('button-hover-color');
203-
}
204-
}
205-
}
206-
207106
& button,
208107
& a {
209108
width: 100%;
@@ -214,13 +113,6 @@ button {
214113
}
215114
}
216115

217-
.nav__dropdown-item:last-child {
218-
border-radius: 0 0 #{5 / $base-font-size}rem #{5 / $base-font-size}rem;
219-
}
220-
.nav__dropdown-item:first-child {
221-
border-radius: 0 #{5 / $base-font-size}rem 0 0;
222-
}
223-
224116
.nav__announce {
225117
position: absolute;
226118
top: #{40 / $base-font-size}rem;

‎client/styles/components/_sidebar.scss

Lines changed: 14 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
.sidebar {
22
display: flex;
33
flex-flow: column;
4-
54
}
65

76
.sidebar__header {
@@ -12,6 +11,7 @@
1211
align-items: center;
1312
height: #{29 / $base-font-size}rem;
1413
min-height: #{29 / $base-font-size}rem;
14+
position: relative;
1515
}
1616

1717
.sidebar__title {
@@ -51,7 +51,6 @@
5151
}
5252

5353
.sidebar__file-item {
54-
// height: #{20 / $base-font-size}rem;
5554
font-size: #{12 / $base-font-size}rem;
5655
cursor: pointer;
5756
position: relative;
@@ -151,30 +150,12 @@
151150
}
152151

153152
.sidebar__file-item-options {
154-
@extend %modal;
155-
@include themify() {
156-
background-color: getThemifyVariable('modal-background-color');
157-
box-shadow: 0 0 18px getThemifyVariable('shadow-color');
158-
}
159-
position: absolute;
160-
top: 95%;
161-
left: #{15 / $base-font-size}rem;
162-
right: #{0 / $base-font-size}rem;
153+
@extend %dropdown-open-right;
163154
display: none;
164-
z-index: 100;
165-
padding: #{8 / $base-font-size}rem #{16 / $base-font-size}rem;
155+
width: 100%;
156+
max-width: #{180 / $base-font-size}rem;
166157
.sidebar__file-item--open > .file-item__content & {
167-
display: block;
168-
}
169-
}
170-
171-
.sidebar__project-options li, .sidebar__file-item-options li {
172-
padding: #{4 / $base-font-size}rem 0;
173-
}
174-
175-
.sidebar__project-options a, .sidebar__file-item-options a {
176-
@include themify() {
177-
color: getThemifyVariable('secondary-text-color');
158+
display: flex;
178159
}
179160
}
180161

@@ -220,7 +201,7 @@
220201
.sidebar__icons {
221202
display: flex;
222203
align-items: center;
223-
position: relative;
204+
height: 100%;
224205
.sidebar--cant-edit & {
225206
display: none;
226207
}
@@ -270,32 +251,16 @@
270251
}
271252
}
272253

273-
.sidebar__project-options {
274-
@extend %modal;
275-
@include themify() {
276-
background-color: getThemifyVariable('modal-background-color');
277-
box-shadow: 0 0 18px getThemifyVariable('shadow-color');
278-
}
254+
.sidebar__file-item--closed .file-item__children {
279255
display: none;
280-
position: absolute;
281-
.sidebar--project-options & {
282-
display: block;
283-
}
284-
top: #{22 / $base-font-size}rem;
285-
right: #{-6 / $base-font-size}rem;
286-
padding: #{8 / $base-font-size}rem #{16 / $base-font-size}rem;
287-
width: #{145 / $base-font-size}rem;
288256
}
289257

290-
.sidebar__file-item-option {
291-
@include themify() {
292-
@extend %link;
293-
}
294-
background-color: transparent;
295-
border: none;
296-
}
297-
298-
299-
.sidebar__file-item--closed .file-item__children {
258+
.sidebar__project-options {
259+
@extend %dropdown-open-right;
300260
display: none;
261+
width: 100%;
262+
max-width: #{180 / $base-font-size}rem;
263+
.sidebar--project-options & {
264+
display: flex;
265+
}
301266
}

0 commit comments

Comments
 (0)