github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-04-15 00:53:26 +00:00
Code Issues Projects Releases Packages Wiki Activity

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
Show stats Download patch file Download diff file Expand all files Collapse all files

49
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
*/
.sidebar-button {
@import '../style/variables.scss';
height: $height;
flex: 0 0 $height;
height: var(--sidebar-entry-height);
flex: 0 0 var(--sidebar-entry-height);
width: 100%;
display: flex;
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;
cursor: pointer;
background: transparent;
padding: 0;
transition: height 0.2s, flex-basis 0.2s;
overflow: hidden;
color: var(--bs-dark);
&.hide {
flex-basis: 0;
height: 0px;
border-width: 0px;
height: 0;
border-width: 0;
.sidebar-icon {
opacity: 0;
@ -37,13 +37,13 @@
.sidebar-icon {
transition: opacity 0.2s;
opacity: 1;
height: $height;
width: $height;
height: var(--sidebar-entry-height);
width: var(--sidebar-entry-height);
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
flex: 0 0 40px;
flex: 0 0 var(--sidebar-entry-height);
}
.sidebar-text {
@ -57,27 +57,20 @@
width: 0;
}
@mixin colors {
color: var(--bs-dark);
&.sidebar-button-primary {
color: var(--bs-light);
background: var(--bs-primary);
&:hover {
color: var(--bs-primary);
background: var(--bs-light);
}
}
&.sidebar-button-primary {
color: var(--bs-light);
background: var(--bs-primary);
&:hover {
color: var(--bs-light);
background: var(--bs-primary);
color: var(--bs-primary);
background: var(--bs-light);
}
}
$entry-hover-bg: darken(black, 10%);
@include colors;
&:hover {
color: var(--bs-light);
background: var(--bs-primary);
}
}

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
*/
.entry {
border: solid 1px rgba(0, 0, 0, 0.15);
border: solid 1px var(--sidebar-separator-color);
}
.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
*/
.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;
.sidebar-inner {
@ -17,15 +23,16 @@
flex-direction: column;
position: absolute;
z-index: 999;
width: $menu-width;
width: var(--sidebar-menu-width);
top: 0;
left: 0;
transition: left 0.3s;
box-shadow: 0 0 0 rgba(0, 0, 0, 0.15);
border-left: solid 1px var(--sidebar-separator-color);
&:hover, &.show {
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);

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;