github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-14 20:40:17 -05:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #21281 from overleaf/ii-bs5-toolbar-items-border-radius

Browse source 
[web] BS5 toolbar buttons border radius

GitOrigin-RevId: b07a7bb16ab7a933dfa714a128f88f2ee006cf04
This commit is contained in:
ilkin-overleaf 2024-10-24 13:02:14 +03:00 committed by Copybot
parent 4bc5a0f1d9
commit ed8fc2747a
3 changed files with 62 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
services/web/frontend/js/features/source-editor/extensions/toolbar/toolbar-panel.ts
View file

@ -1,5 +1,6 @@
import { StateEffect, StateField } from '@codemirror/state'
import { EditorView, showPanel } from '@codemirror/view'
import { isBootstrap5 } from '@/features/utils/bootstrap-5'
const toggleToolbarEffect = StateEffect.define<boolean>()
const toolbarState = StateField.define<boolean>({
@ -116,7 +117,7 @@ const toolbarTheme = EditorView.theme({
margin: '0 1px',
backgroundColor: 'transparent',
border: 'none',
borderRadius: '1px',
borderRadius: isBootstrap5() ? 'var(--border-radius-base)' : '1px',
lineHeight: '1',
width: '24px',
height: '24px',
@ -176,7 +177,7 @@ const toolbarTheme = EditorView.theme({
border: 'none',
whiteSpace: 'nowrap',
color: 'inherit',
borderRadius: '0',
borderRadius: isBootstrap5() ? 'var(--border-radius-base)' : '0',
opacity: 0.8,
width: '120px',
fontSize: '13px',

55
services/web/frontend/stylesheets/bootstrap-5/pages/editor/file-tree.scss
View file

@ -45,6 +45,31 @@
}
}
@include theme('default') {
.file-tree {
.toolbar {
.toolbar-right,
.toolbar-left {
button {
opacity: 0.8;
&:hover,
&:focus,
&:active,
&.active {
background-color: rgba(125 125 125 / 20%);
}
&.active,
&:active {
background-color: rgba(125 125 125 / 40%);
}
}
}
}
}
}
.file-tree {
display: flex !important; // To work around jQuery layout's inline styles
flex-direction: column;
@ -73,6 +98,36 @@
margin: var(--spacing-05);
}
.toolbar {
.toolbar-right,
.toolbar-left {
button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 0;
box-shadow: none;
border-radius: var(--border-radius-base);
border: none;
&:hover,
&:focus,
&:active,
&.active {
background-color: rgb(125 125 125 / 10%);
color: var(--toolbar-btn-color) !important;
}
&.active,
&:active {
background-color: rgb(125 125 125 / 20%);
}
}
}
}
&-history {
.entity-name {
padding-left: var(--spacing-03);

4
services/web/frontend/stylesheets/bootstrap-5/pages/editor/pdf.scss
View file

@ -242,6 +242,10 @@
gap: var(--spacing-04);
margin-left: var(--spacing-04);
margin-right: var(--spacing-04);
.btn {
border-radius: var(--border-radius-base) !important;
}
}
.pdfjs-toolbar-button {