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
This commit is contained in:
parent
d2cad7438e
commit
d778a07541
3 changed files with 80 additions and 160 deletions
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -76,29 +76,11 @@
|
|||
}
|
||||
|
||||
.nav__dropdown {
|
||||
@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');
|
||||
}
|
||||
|
||||
@extend %dropdown-open-left;
|
||||
display: none;
|
||||
text-align: left;
|
||||
width: #{180 / $base-font-size}rem;
|
||||
|
||||
.nav__item--open & {
|
||||
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 {
|
||||
|
@ -116,94 +98,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.nav__dropdown a,
|
||||
button {
|
||||
@include themify() {
|
||||
color: getThemifyVariable('secondary-text-color');
|
||||
}
|
||||
}
|
||||
|
||||
.nav__dropdown button {
|
||||
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 {
|
||||
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,
|
||||
& a {
|
||||
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 {
|
||||
position: absolute;
|
||||
top: #{40 / $base-font-size}rem;
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
.sidebar {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
|
||||
}
|
||||
|
||||
.sidebar__header {
|
||||
|
@ -12,6 +11,7 @@
|
|||
align-items: center;
|
||||
height: #{29 / $base-font-size}rem;
|
||||
min-height: #{29 / $base-font-size}rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sidebar__title {
|
||||
|
@ -51,7 +51,6 @@
|
|||
}
|
||||
|
||||
.sidebar__file-item {
|
||||
// height: #{20 / $base-font-size}rem;
|
||||
font-size: #{12 / $base-font-size}rem;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
@ -151,30 +150,12 @@
|
|||
}
|
||||
|
||||
.sidebar__file-item-options {
|
||||
@extend %modal;
|
||||
@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;
|
||||
@extend %dropdown-open-right;
|
||||
display: none;
|
||||
z-index: 100;
|
||||
padding: #{8 / $base-font-size}rem #{16 / $base-font-size}rem;
|
||||
width: 100%;
|
||||
max-width: #{180 / $base-font-size}rem;
|
||||
.sidebar__file-item--open > .file-item__content & {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.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');
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -220,7 +201,7 @@
|
|||
.sidebar__icons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
.sidebar--cant-edit & {
|
||||
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 {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue