next-ucap-messenger/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss

82 lines
1.9 KiB
SCSS
Raw Normal View History

:host {
.app-layout-native-title-bar {
-webkit-user-select: none;
-webkit-app-region: drag;
position: fixed;
right: 0;
top: 0;
display: flex;
// align-items: center;
// justify-content: center;
// flex-direction: row-reverse;
cursor: pointer;
background: white;
height: 30px;
.app-layout-native-title-bar-spacer {
flex: 1 1 auto;
}
.app-layout-native-title-bar-actions {
position: relative;
.button {
-webkit-app-region: no-drag;
outline: 0;
cursor: pointer;
border: none;
height: 100%;
min-width: 30px;
max-width: 30px;
padding: 5px;
line-height: 10px;
border-radius: 0;
background: transparent;
transition: background 0.2s linear, color 0.2s linear;
text-align: center;
font-size: 10px;
.mat-icon {
transform: translateY(-2px);
width: 16px;
height: 16px;
font-size: 16px;
}
&.app-layout-native-title-bar-close,
&.app-layout-native-title-bar-maximize,
&.app-layout-native-title-bar-minimize {
color: black;
font-weight: lighter;
}
// &.app-layout-native-title-bar-minimize .mat-icon {
// transform: translateY(-43%);
// }
&:hover {
&.app-layout-native-title-bar-close {
background: #e81123;
color: darken(white, 20%);
}
&.app-layout-native-title-bar-minimize {
background: darken(#673ab7, 10%);
color: darken(white, 20%);
}
&.app-layout-native-title-bar-maximize {
background: darken(#673ab7, 10%);
color: darken(white, 20%);
}
}
}
}
.app-layout-native-title-bar-title {
font-size: 12px;
}
}
}