diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index 283f1be..45a44a7 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -20,12 +20,11 @@ $breakpoints: (phone: 480px, background-color: $color-210-25-95; color: $color-213-4-50; font-size: 1.6rem; - overflow: hidden; - overflow-wrap: break-word; - display: flex; - flex-direction: column; - height: 100vh; - overflow: hidden; + overflow-y: scroll; + } + + html { + overflow-y: scroll; } main { diff --git a/src/styles/base/menu-left.scss b/src/styles/base/menu-left.scss index 35409ef..77a273d 100644 --- a/src/styles/base/menu-left.scss +++ b/src/styles/base/menu-left.scss @@ -2,8 +2,8 @@ background-color: $color-233-18-29; color: $color-0-0-100; display: block; - overflow: auto; - flex: 0 0 16em; + height: calc(100vh - 82px); + max-width: 250px; transition: flex-basis 0.5s ease-in-out; &.open { @@ -90,6 +90,43 @@ } .sub-menu { + + sib-set-default[name='project'] { + padding: 1rem 1rem 1rem 3.2rem; + + .project-customer, + .project-name { + display: inline-block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .project-customer { + font-weight: bold; + width: 150px; + } + + .project-name { + padding-left: 14px; + width: calc(150px - 10px); + /* 10px = padding of the sib-set-default = better alignment */ + } + + &:hover { + background-color: $color-233-20-17; + box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.26); + color: $color-218-100-98; + /* transition: all 0.6s cubic-bezier(0.39, 0.575, 0.565, 1); Need better animation */ + width: auto; + z-index: 1000; + + .project-customer, + .project-name { + width: auto; + } + } + } sib-display>div { @@ -107,21 +144,11 @@ >div { color: $color-244-10-70; cursor: pointer; - padding: 10px 10px 10px 32px; - } - - sib-route[name='project'] { - display: flex; - flex: 3; + padding: 1rem 1rem 1rem 3.2rem; + } - sib-display-value { - display: block; - height: 20px; - } - - sib-display-value[name='dash'] { - margin: 0 0.4em; - } + &[fields="project(customer.name, name), badge"]>div { + padding: 0; } }