mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-05-19 17:55:17 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: use css vars in sidebar

Browse source 
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
Signed-off-by: Erik Michelson <github@erik.michelson.eu>
This commit is contained in:
Tilman Vatteroth 2023-04-17 13:25:47 +02:00
parent b454e3be03
commit 43a85f54ca
4 changed files with 35 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

31
frontend/src/components/editor-page/sidebar/sidebar-button/sidebar-button.module.scss
View file

@ -1,29 +1,29 @@
/* /*!
* SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
* *
* SPDX-License-Identifier: AGPL-3.0-only * SPDX-License-Identifier: AGPL-3.0-only
*/ */
.sidebar-button { .sidebar-button {
@import '../style/variables.scss'; height: var(--sidebar-entry-height);
flex: 0 0 var(--sidebar-entry-height);
height: $height;
flex: 0 0 $height;
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
border: solid 1px rgba(0, 0, 0, 0.15); border: solid 1px var(--sidebar-separator-color);
border-left: none;
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
background: transparent; background: transparent;
padding: 0; padding: 0;
transition: height 0.2s, flex-basis 0.2s; transition: height 0.2s, flex-basis 0.2s;
overflow: hidden; overflow: hidden;
color: var(--bs-dark);
&.hide { &.hide {
flex-basis: 0; flex-basis: 0;
height: 0px; height: 0;
border-width: 0px; border-width: 0;
.sidebar-icon { .sidebar-icon {
opacity: 0; opacity: 0;
@ -37,13 +37,13 @@
.sidebar-icon { .sidebar-icon {
transition: opacity 0.2s; transition: opacity 0.2s;
opacity: 1; opacity: 1;
height: $height; height: var(--sidebar-entry-height);
width: $height; width: var(--sidebar-entry-height);
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: relative; position: relative;
flex: 0 0 40px; flex: 0 0 var(--sidebar-entry-height);
} }
.sidebar-text { .sidebar-text {
@ -57,9 +57,6 @@
width: 0; width: 0;
} }
@mixin colors {
color: var(--bs-dark);
&.sidebar-button-primary { &.sidebar-button-primary {
color: var(--bs-light); color: var(--bs-light);
background: var(--bs-primary); background: var(--bs-primary);
@ -76,8 +73,4 @@
} }
} }
$entry-hover-bg: darken(black, 10%);
@include colors;
}

2
frontend/src/components/editor-page/sidebar/sidebar-menu-info-entry/sidebar-menu-info-entry.module.css
View file

@ -4,7 +4,7 @@
* SPDX-License-Identifier: AGPL-3.0-only * SPDX-License-Identifier: AGPL-3.0-only
*/ */
.entry { .entry {
border: solid 1px rgba(0, 0, 0, 0.15); border: solid 1px var(--sidebar-separator-color);
} }
.title { .title {

19
frontend/src/components/editor-page/sidebar/style/sidebar.module.scss
View file

@ -1,13 +1,19 @@
/* /*!
* SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
* *
* SPDX-License-Identifier: AGPL-3.0-only * SPDX-License-Identifier: AGPL-3.0-only
*/ */
.slide-sidebar { .slide-sidebar {
@import "./variables.scss"; --sidebar-entry-height: 44px;
--sidebar-menu-width: 280px;
--sidebar-separator-color: rgba(0, 0, 0, 0.15);
flex: 0 0 $height; :global(body.dark) & {
--sidebar-separator-color: rgba(255, 255, 255, 0.2);
}
flex: 0 0 var(--sidebar-entry-height);
position: relative; position: relative;
.sidebar-inner { .sidebar-inner {
@ -17,15 +23,16 @@
flex-direction: column; flex-direction: column;
position: absolute; position: absolute;
z-index: 999; z-index: 999;
width: $menu-width; width: var(--sidebar-menu-width);
top: 0; top: 0;
left: 0; left: 0;
transition: left 0.3s; transition: left 0.3s;
box-shadow: 0 0 0 rgba(0, 0, 0, 0.15); box-shadow: 0 0 0 rgba(0, 0, 0, 0.15);
border-left: solid 1px var(--sidebar-separator-color);
&:hover, &.show { &:hover, &.show {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
left: (-$menu-width + $height); left: calc(0px - var(--sidebar-menu-width) + var(--sidebar-entry-height));
} }
background: var(--bs-light); background: var(--bs-light);

8
frontend/src/components/editor-page/sidebar/style/variables.scss
View file

@ -1,8 +0,0 @@
/*
* SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
$height: 40px;
$menu-width: 240px;