rayan/bruno
1
0
Fork 0
mirror of https://github.com/usebruno/bruno.git synced 2026-07-08 22:45:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

style(app): app mode toggle button styling (#8523)

Browse Source
This commit is contained in:
naman-bruno
2026-07-08 14:57:30 +05:30
committed by GitHub
parent 2079c7a452
commit 7a1ea5e381
1 changed files with 27 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
packages/bruno-app/src/components/RequestTabs/CollectionHeader/StyledWrapper.js
View File

@@ -1,4 +1,5 @@
import styled from 'styled-components';
import { rgba } from 'polished';
const StyledWrapper = styled.div`
.collection-switcher {
@@ -219,35 +220,50 @@ const StyledWrapper = styled.div`
.mode-toggle {
display: inline-flex;
align-items: stretch;
padding: 2px;
gap: 2px;
background: ${(props) => props.theme.sidebar.collection.item.hoverBg};
border-radius: ${(props) => props.theme.border.radius.base};
background: transparent;
> * + * .mode-btn,
.mode-btn + .mode-btn {
margin-left: -1px;
}
.mode-btn {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 26px;
width: 28px;
height: 26px;
padding: 0;
border: 1px solid transparent;
border: 1px solid ${(props) => props.theme.input.border};
background: transparent;
color: ${(props) => props.theme.colors.text.muted};
border-radius: ${(props) => props.theme.border.radius.sm};
border-radius: 0;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
&:hover:not(.active) {
color: ${(props) => props.theme.text};
z-index: 1;
}
&.active {
background: ${(props) => props.theme.bg};
color: ${(props) => props.theme.text};
border-color: ${(props) => props.theme.input.border};
box-shadow: ${(props) => props.theme.shadow.sm};
background: ${(props) => rgba(props.theme.primary.solid, 0.12)};
color: ${(props) => props.theme.primary.solid};
border-color: ${(props) => rgba(props.theme.primary.solid, 0.4)};
z-index: 2;
}
}
> *:first-child .mode-btn {
border-top-left-radius: ${(props) => props.theme.border.radius.sm};
border-bottom-left-radius: ${(props) => props.theme.border.radius.sm};
}
> *:last-child .mode-btn {
border-top-right-radius: ${(props) => props.theme.border.radius.sm};
border-bottom-right-radius: ${(props) => props.theme.border.radius.sm};
}
}
`;