r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

Added hover effect on sidebar elements (#887)

Browse source 
* fixes

* changes

* fixes #886, adjusts sidebar styling to match navigation dropdown, move nav dropdown and sidebar dropdowns into common placeholder
This commit is contained in:
Apoorv Taneja 2019-06-13 01:28:02 +05:30 committed by Cassie Tarakajian
parent d2cad7438e
commit d778a07541
3 changed files with 80 additions and 160 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
client/styles/abstracts/_placeholders.scss
View file

@ -197,3 +197,66 @@
} }
} }
} }
%dropdown-open {
@include themify() {
background-color: map-get($theme-map, 'modal-background-color');
border: 1px solid map-get($theme-map, 'modal-border-color');
box-shadow: 0 0 18px 0 getThemifyVariable('shadow-color');
color: getThemifyVariable('dropdown-color');
}
text-align: left;
width: #{180 / $base-font-size}rem;
display: flex;
position: absolute;
flex-direction: column;
top: 100%;
height: auto;
z-index: 9999;
border-radius: #{6 / $base-font-size}rem;
& li:last-child {
border-radius: 0 0 #{5 / $base-font-size}rem #{5 / $base-font-size}rem;
}
& li {
& button,
& a {
@include themify() {
color: getThemifyVariable('dropdown-color');
}
}
padding: #{8 / $base-font-size}rem #{16 / $base-font-size}rem;
height: #{35 / $base-font-size}rem;
cursor: pointer;
display: flex;
align-items: center;
}
& li:hover {
@include themify() {
background-color: getThemifyVariable('button-background-hover-color');
color: getThemifyVariable('button-hover-color')
}
& button, & a {
@include themify() {
color: getThemifyVariable('button-hover-color');
}
}
}
}
%dropdown-open-left {
@extend %dropdown-open;
left: 0;
border-top-left-radius: 0px;
& li:first-child {
border-radius: 0 #{5 / $base-font-size}rem 0 0;
}
}
%dropdown-open-right {
@extend %dropdown-open;
right: 0;
border-top-right-radius: 0px;
& li:first-child {
border-radius: #{5 / $base-font-size}rem 0 0 0;
}
}

110
client/styles/components/_nav.scss
View file

@ -76,29 +76,11 @@
} }
.nav__dropdown { .nav__dropdown {
@include themify() { @extend %dropdown-open-left;
background-color: map-get($theme-map, 'modal-background-color');
border: 1px solid map-get($theme-map, 'modal-border-color');
box-shadow: 0 0 18px 0 getThemifyVariable('shadow-color');
color: getThemifyVariable('dropdown-color');
}
display: none; display: none;
text-align: left;
width: #{180 / $base-font-size}rem;
.nav__item--open & { .nav__item--open & {
display: flex; display: flex;
position: absolute;
flex-direction: column;
top: #{40 / $base-font-size}rem;
left: 0;
height: auto;
} }
z-index: 9999;
border-radius: #{6 / $base-font-size}rem;
border-top-left-radius: 0px;
} }
.nav__items-right { .nav__items-right {
@ -116,94 +98,11 @@
} }
} }
.nav__dropdown a,
button {
@include themify() {
color: getThemifyVariable('secondary-text-color');
}
}
.nav__dropdown button { .nav__dropdown button {
padding: 0; padding: 0;
} }
.nav__dropdown a:hover {
@include themify() {
color: getThemifyVariable('primary-text-color');
}
}
.nav__dropdown-heading {
@include themify() {
border-bottom: 1px dashed map-get($theme-map, 'inactive-text-color');
}
height: #{(42 - 5) / $base-font-size}rem;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 #{16 / $base-font-size}rem;
cursor: pointer;
&:hover {
span {
@include themify() {
color: getThemifyVariable('nav-hover-color');
}
}
polygon {
@include themify() {
fill: getThemifyVariable('nav-hover-color');
}
}
}
}
.nav__dropdown-heading a,
.nav__dropdown-heading a:hover {
@include themify() {
color: getThemifyVariable('inactive-text-color');
}
cursor: default;
width: 100%;
}
.nav__dropdown-heading svg {
transform-origin: 50% 50%;
transform: rotate(180deg);
}
.nav__dropdown-item { .nav__dropdown-item {
height: #{32 / $base-font-size}rem;
width: 100%;
display: flex;
align-items: center;
padding: 0 #{16 / $base-font-size}rem;
cursor: pointer;
& button,
& a {
@include themify() {
color: getThemifyVariable('dropdown-color');
}
}
&:hover {
@include themify() {
background-color: getThemifyVariable('button-background-hover-color');
color: getThemifyVariable('button-hover-color')
}
& button,
& a {
@include themify() {
color: getThemifyVariable('button-hover-color');
}
}
}
& button, & button,
& a { & a {
width: 100%; width: 100%;
@ -214,13 +113,6 @@ button {
} }
} }
.nav__dropdown-item:last-child {
border-radius: 0 0 #{5 / $base-font-size}rem #{5 / $base-font-size}rem;
}
.nav__dropdown-item:first-child {
border-radius: 0 #{5 / $base-font-size}rem 0 0;
}
.nav__announce { .nav__announce {
position: absolute; position: absolute;
top: #{40 / $base-font-size}rem; top: #{40 / $base-font-size}rem;

67
client/styles/components/_sidebar.scss
View file

@ -1,7 +1,6 @@
.sidebar { .sidebar {
display: flex; display: flex;
flex-flow: column; flex-flow: column;
} }
.sidebar__header { .sidebar__header {
@ -12,6 +11,7 @@
align-items: center; align-items: center;
height: #{29 / $base-font-size}rem; height: #{29 / $base-font-size}rem;
min-height: #{29 / $base-font-size}rem; min-height: #{29 / $base-font-size}rem;
position: relative;
} }
.sidebar__title { .sidebar__title {
@ -51,7 +51,6 @@
} }
.sidebar__file-item { .sidebar__file-item {
// height: #{20 / $base-font-size}rem;
font-size: #{12 / $base-font-size}rem; font-size: #{12 / $base-font-size}rem;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
@ -151,30 +150,12 @@
} }
.sidebar__file-item-options { .sidebar__file-item-options {
@extend %modal; @extend %dropdown-open-right;
@include themify() {
background-color: getThemifyVariable('modal-background-color');
box-shadow: 0 0 18px getThemifyVariable('shadow-color');
}
position: absolute;
top: 95%;
left: #{15 / $base-font-size}rem;
right: #{0 / $base-font-size}rem;
display: none; display: none;
z-index: 100; width: 100%;
padding: #{8 / $base-font-size}rem #{16 / $base-font-size}rem; max-width: #{180 / $base-font-size}rem;
.sidebar__file-item--open > .file-item__content & { .sidebar__file-item--open > .file-item__content & {
display: block; display: flex;
}
}
.sidebar__project-options li, .sidebar__file-item-options li {
padding: #{4 / $base-font-size}rem 0;
}
.sidebar__project-options a, .sidebar__file-item-options a {
@include themify() {
color: getThemifyVariable('secondary-text-color');
} }
} }
@ -220,7 +201,7 @@
.sidebar__icons { .sidebar__icons {
display: flex; display: flex;
align-items: center; align-items: center;
position: relative; height: 100%;
.sidebar--cant-edit & { .sidebar--cant-edit & {
display: none; display: none;
} }
@ -270,32 +251,16 @@
} }
} }
.sidebar__project-options {
@extend %modal;
@include themify() {
background-color: getThemifyVariable('modal-background-color');
box-shadow: 0 0 18px getThemifyVariable('shadow-color');
}
display: none;
position: absolute;
.sidebar--project-options & {
display: block;
}
top: #{22 / $base-font-size}rem;
right: #{-6 / $base-font-size}rem;
padding: #{8 / $base-font-size}rem #{16 / $base-font-size}rem;
width: #{145 / $base-font-size}rem;
}
.sidebar__file-item-option {
@include themify() {
@extend %link;
}
background-color: transparent;
border: none;
}
.sidebar__file-item--closed .file-item__children { .sidebar__file-item--closed .file-item__children {
display: none; display: none;
} }
.sidebar__project-options {
@extend %dropdown-open-right;
display: none;
width: 100%;
max-width: #{180 / $base-font-size}rem;
.sidebar--project-options & {
display: flex;
}
}