mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[AAE-5637] Remove SCSS mixins and use CSS variables (#7250)
* remove default-class mixin and use regular import * cleanup colors * remove variables file, fix bugs in animations * proper ordering of imports, core css vars * cleanup snackbar and material themes * tags component * login component styles * app login * toolbar component styles * breadcrumb styles * dropdown breadcrumb * app layout component * demo shell: files component * aspect list styles * content metadata styles * node selector * name location cell * node share dialog * content type dialog * folder dialog * document list * datatable theme * pagination theme * viewer theme * viewer theme * user-info theme * container widget * dynamic table theme * form widgets * form theme * form renderer * sidebar menu * header theme * info drawer theme * comment list * commens and layout container * sidenav layout * empty content * error content * clipboard theme * search input * tooltip card and notification history * card view theme * remove unused keys * add permission dialog * search and permission dialogs * version comparison and column themes * upload drag area and cleanup references * remove the need for content styles * insight components * cleanup insights theme * process components * process components * process cloud themes * cleanup unsed imports * cleanup mixins * update build scripts * test fixes * remove fdescribe * css fixes * update unit tests
This commit is contained in:
108
lib/core/layout/components/header/header.component.scss
Normal file
108
lib/core/layout/components/header/header.component.scss
Normal file
@@ -0,0 +1,108 @@
|
||||
adf-layout-header .mat-toolbar-single-row {
|
||||
|
||||
color: var(--theme-primary-color-default-contrast) !important;
|
||||
position: relative;
|
||||
padding: 0 24px;
|
||||
|
||||
.adf-menu-icon {
|
||||
position: relative;
|
||||
margin-right: 0;
|
||||
|
||||
.mat-icon {
|
||||
font-size: 29px;
|
||||
padding: 0 5px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-app-logo {
|
||||
position: relative;
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
vertical-align: middle;
|
||||
margin-top: -3px;
|
||||
}
|
||||
|
||||
.adf-app-title {
|
||||
cursor: pointer;
|
||||
letter-spacing: -0.3px;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
.adf-toolbar-divider {
|
||||
margin: 0 5px;
|
||||
|
||||
& > div {
|
||||
background-color: var(--theme-card-bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
.adf-header-delimiter {
|
||||
height: 24px;
|
||||
width: 2px;
|
||||
background-color: var(--theme-primary-color-default-contrast);
|
||||
}
|
||||
|
||||
.adf-userinfo-container {
|
||||
flex-direction: row;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 599px) {
|
||||
.adf-app-logo,
|
||||
.adf-app-title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[dir='rtl'] adf-layout-header .mat-toolbar-single-row {
|
||||
.adf-menu-icon {
|
||||
margin-right: -11px;
|
||||
}
|
||||
|
||||
.adf-app-logo {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.adf-app-title {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.adf-header-delimiter {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.adf-userinfo-container {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.adf-userinfo-name {
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
[dir='ltr'] adf-layout-header .mat-toolbar-single-row {
|
||||
.adf-menu-icon {
|
||||
margin-left: -11px;
|
||||
}
|
||||
|
||||
.adf-app-logo {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.adf-app-title {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.adf-header-delimiter {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.adf-userinfo-container {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.adf-userinfo-name {
|
||||
padding-right: 8px;
|
||||
}
|
||||
}
|
@@ -21,6 +21,7 @@ import { ThemePalette } from '@angular/material/core';
|
||||
@Component({
|
||||
selector: 'adf-layout-header',
|
||||
templateUrl: './header.component.html',
|
||||
styleUrls: ['./header.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
host: { class: 'adf-layout-header' }
|
||||
})
|
||||
|
@@ -1,116 +0,0 @@
|
||||
@mixin adf-header-layout-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$accent: map-get($theme, accent);
|
||||
$background: map-get($theme, background);
|
||||
|
||||
adf-layout-header .mat-toolbar-single-row {
|
||||
|
||||
color: mat-color($primary, default-contrast) !important;
|
||||
position: relative;
|
||||
padding: 0 24px;
|
||||
|
||||
.adf-menu-icon {
|
||||
position: relative;
|
||||
margin-right: 0;
|
||||
|
||||
.mat-icon {
|
||||
font-size: 29px;
|
||||
padding: 0 5px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-app-logo {
|
||||
position: relative;
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
vertical-align: middle;
|
||||
margin-top: -3px;
|
||||
}
|
||||
|
||||
.adf-app-title {
|
||||
cursor: pointer;
|
||||
letter-spacing: -0.3px;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
.adf-toolbar-divider {
|
||||
margin: 0 5px;
|
||||
|
||||
& > div {
|
||||
background-color: mat-color($background, card, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.adf-header-delimiter {
|
||||
height: 24px;
|
||||
width: 2px;
|
||||
background-color: mat-color($primary, default-contrast);
|
||||
}
|
||||
|
||||
.adf-userinfo-container {
|
||||
flex-direction: row;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 599px) {
|
||||
.adf-app-logo,
|
||||
.adf-app-title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[dir='rtl'] adf-layout-header .mat-toolbar-single-row {
|
||||
.adf-menu-icon {
|
||||
margin-right: -11px;
|
||||
}
|
||||
|
||||
.adf-app-logo {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.adf-app-title {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.adf-header-delimiter {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.adf-userinfo-container {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.adf-userinfo-name {
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
[dir='ltr'] adf-layout-header .mat-toolbar-single-row {
|
||||
.adf-menu-icon {
|
||||
margin-left: -11px;
|
||||
}
|
||||
|
||||
.adf-app-logo {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.adf-app-title {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.adf-header-delimiter {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.adf-userinfo-container {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.adf-userinfo-name {
|
||||
padding-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
Reference in New Issue
Block a user