diff --git a/src/page-admin.pug b/src/page-admin.pug
index 32af5c631b7e6d17a66c32bc9c458a235fe7bc73..2d297765e18d23962548ecd37b9ddb950616a8e3 100644
--- a/src/page-admin.pug
+++ b/src/page-admin.pug
@@ -9,19 +9,23 @@
#admin-communities(hidden, data-view="admin-communities")
include views/admin/page-admin-communities.pug
nav.jsRightMenu(role='navigation')
- solid-router(default-route='admin-circles')
+ solid-router.text-color-heading.reverse.text-bold(default-route='admin-circles')
ul
- li.jsOffsiteToggle
- a(data-trans='admin.menuRight.fold')
+ li.segment.padding-small.text-right.jsOffsiteToggle
+ span.icon.icon-arrow-right.xxsmall.icon-margin-right-xxsmall
+ a.text-normal.text-xsmall(data-trans='admin.menuRight.fold')
if (endpoints.users || (endpoints.get && endpoints.get.users))
solid-route(name='admin-communities')
- li
+ li.segment.padding-large
+ span.icon.ci-networking.large.icon-margin-right
a(data-trans='admin.menuRight.community')
if endpoints.circles || (endpoints.get && endpoints.get.circles)
solid-route(name='admin-circles')
- li
+ li.segment.padding-large
+ span.icon.ci-bubble-add.large.icon-margin-right
a(data-trans='admin.menuRight.circles')
if endpoints.projects || (endpoints.get && endpoints.get.projects)
solid-route(name='admin-projects')
- li
+ li.segment.padding-large
+ span.icon.ci-add.large.icon-margin-right
a(data-trans='admin.menuRight.projects')
diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss
index c73283684040b9f857a7f250a0d71c5b89386582..db4b4be07c74d400c725eb13c2964549e21cbfff 100644
--- a/src/styles/base/main.scss
+++ b/src/styles/base/main.scss
@@ -11,7 +11,7 @@
background-color: var(--color-main-background);
box-sizing: border-box;
color: var(--color-grey) !important;
- font-size: 1.6rem;
+ font-size: 14px;
/* Fix for viewport height bug in webkit for mobile */
height: -webkit-fill-available;
min-height: -webkit-fill-available;
@@ -81,6 +81,9 @@
&.margin-left {
margin-left: 20px;
}
+ &.margin-right-xsmall {
+ margin-right: 15px;
+ }
&.margin-bottom {
margin-bottom: 20px;
}
@@ -108,6 +111,9 @@
&.margin-bottom {
margin-bottom: 20px;
}
+ &.padding-small {
+ padding: 10px;
+ }
&.padding-y-small {
padding-top: 10px;
padding-bottom: 10px;
@@ -173,6 +179,59 @@
background: white;
}
+.icon {
+
+ &::before {
+ font-size: 20px;
+ }
+
+ &.icon-magnify {
+ background-image: url();
+ }
+ &.icon-arrow-down {
+ background-image: url();
+ }
+ &.rounded{
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ &-small {
+ height: 35px;
+ width: 35px;
+ }
+ &-large {
+ height: 70px;
+ width: 70px;
+ }
+ }
+ &.xxsmall::before {
+ font-size: 12px;
+ }
+ &.xsmall::before {
+ font-size: 15px;
+ }
+ &.small::before {
+ font-size: 18px;
+ }
+ &.large::before {
+ font-size: 30px;
+ }
+ &.xlarge::before {
+ font-size: 40px;
+ }
+ &.centered {
+ margin: 0 auto;
+ }
+ &.icon-margin-right::before {
+ margin-right: 15px;
+ }
+ &.icon-margin-right-xxsmall::before {
+ margin-right: 5px;
+ }
+}
+
.icon-color-primary::before {
color: var(--color-primary);
}
diff --git a/src/styles/components/sidebar.scss b/src/styles/components/sidebar.scss
index 1e567ce75595349f8730a4346821e6d257803872..3fb5421b250ed98c9f3c71c1b0de25bcd775c311 100644
--- a/src/styles/components/sidebar.scss
+++ b/src/styles/components/sidebar.scss
@@ -34,8 +34,8 @@
&.sidebar-is-closed {
@include breakpoint(lg) {
- margin-left: -15.5rem;
- transform: translate(15.5rem);
+ margin-left: -18.5rem;
+ transform: translate(18.5rem);
}
}
}
@@ -45,14 +45,12 @@
}
nav {
- background: var(--color-right-menu-background);
+ background: #F1F1F1;
transition: all 0.5s;
width: 25rem;
>solid-router {
- color: var(--color-right-menu-text);
flex: 0 0 auto;
- font-weight: 600;
>ul {
cursor: pointer;
@@ -62,26 +60,33 @@
margin: 0;
padding-left: 0;
+ &>li>a {
+ vertical-align: middle;
+ }
+
li {
- align-items: center;
- border-bottom: 1px solid var(--color-right-menu-link-border);
- display: flex;
- margin: 0;
- padding: 2.15rem 2.55rem;
- position: relative;
+ border-bottom: 1px solid #D6CECE;
+ /*align-items: center;
+ display: flex;*/
+ /*margin: 0;*/
+ /*padding: 2.15rem 2.55rem;*/
+ /*position: relative;*/
/*width: 12em;*/
- &::before {
+ /*&::before {
float: left;
font-size: 4rem;
margin-left: 0;
margin-right: 2.85rem;
+ }*/
+ &>a {
+ vertical-align: super;
}
}
- >li {
- @include icon('arrow-right-circle');
- }
+ /*>li {
+ @include icon('arrow-right');
+ }*/
>solid-route {
@@ -121,29 +126,33 @@
@include ci('file');
}
- &[name='admin-communities']>li {
+ /*&[name='admin-communities']>li {
@include ci('networking');
- }
+ }*/
- &[name='admin-circles']>li {
+ /*&[name='admin-circles']>li {
@include ci('bubble-add');
- }
+ }*/
- &[name='admin-projects']>li {
+ /*&[name='admin-projects']>li {
@include ci('add');
- }
+ }*/
&[active] {
- background-color: var(--color-right-menu-active-background);
- color: var(--color-right-menu-active-text);
+ background-color: var(--color-heading);
+ color: white;
display: inline-block;
}
&.active-color[active] {
>li::before {
- background-color: var(--color-right-menu-active-icon);
+ background-color: white;
}
}
+
+ &:hover:not([active]) {
+ background: #E4E4E4;
+ }
}
}
}
@@ -157,7 +166,7 @@
}
&.jsRightMenu:not([open]) {
- transform: translate(15.5rem);
+ transform: translate(18.5rem);
& .jsOffsiteToggle::before {
transform: rotate(180deg);