дописана кнопка доп контейнера, которая имеет большую ширину

This commit is contained in:
DmitriyB
2022-08-11 18:39:46 +05:00
parent 3eb626b403
commit 26ecc099e9
2 changed files with 37 additions and 6 deletions
+32 -4
View File
@@ -103,9 +103,7 @@
align-items: center;
}
.toolbar-button.large {
width: 196px;
}
.toolbar-button:hover {
opacity: .7;
@@ -119,7 +117,7 @@
display: flex;
padding: 8px;
box-sizing: border-box;
border-radius: 28px;
border-radius: 50px;
background: #333333;
border: 1px solid #4F4F4F;
gap: 8px;
@@ -282,10 +280,40 @@
background-color: #CE56C2;
}
.toolbar-button.large,
.toolbar-button.control.large {
width: 196px;
background-image: none;
}
.toolbar-button-large-view {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
width: 100%;
}
.toolbar-button.large.control .toolbar-button-large-view-icon {
width: 24px;
height: 24px;
background: url('icons/constrolOffIcon.svg') 50% 50% no-repeat;
background-size: 100% 100%;
}
.toolbar-button.large.control.on .toolbar-button-large-view-icon {
width: 24px;
height: 24px;
background: url('icons/constrolOnIcon.svg') 50% 50% no-repeat;
background-size: 100% 100%;
}
.toolbar-button-large-view-title {
font-weight: 400;
font-size: 14px;
line-height: 130%;
color: #FFFFFF;
}
.show-toolbar-enter {
transform: translateX(-60px);
@@ -32,7 +32,7 @@ export const ToolbarButton:React.FC<TProps> = React.memo((props) => {
${props.type} ${isActive ? 'on' : ''}
${props?.isNotification ? 'notification' : ''}
${props?.isSelected ? 'selected' : ''}
${props?.isLarge ? 'large' : ''}
${props?.isLarge ? `large ${props.type}` : ''}
`
}
onClick={() => {
@@ -45,7 +45,10 @@ export const ToolbarButton:React.FC<TProps> = React.memo((props) => {
>
{
props?.isLarge
? CaptionToolbarButtons[props.type]
? <div className="toolbar-button-large-view">
<span className="toolbar-button-large-view-icon"></span>
<span className="toolbar-button-large-view-title">{CaptionToolbarButtons[props.type]}</span>
</div>
: null
}
</button>