mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[AAE-12872] custom css variables replaced with theme related variables (#8332)
* AAE-12872 replaced global variables related to foreground text * AAE-12872 replaced global css variables related to foreground * AAE-12872 replaced global css variables related to background,palette colors
This commit is contained in:
@@ -10,7 +10,7 @@
|
||||
padding-top: 3px;
|
||||
height: 400px;
|
||||
overflow: auto;
|
||||
border: 1px solid var(--theme-border-color);
|
||||
border: 1px solid var(--theme-foreground-text-color-007);
|
||||
|
||||
.adf-aspect-list-check-button {
|
||||
margin-right: 5px;
|
||||
|
@@ -5,7 +5,7 @@
|
||||
font-size: var(--theme-body-1-font-size);
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.2px;
|
||||
color: var(--theme-text-color);
|
||||
color: var(--theme-foreground-text-color-054);
|
||||
overflow: hidden;
|
||||
|
||||
&-container {
|
||||
@@ -79,7 +79,7 @@
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.2px;
|
||||
text-align: left;
|
||||
color: var(--theme-text-color);
|
||||
color: var(--theme-foreground-text-color-054);
|
||||
flex: 0 1 auto;
|
||||
min-width: 35px;
|
||||
margin-top: auto;
|
||||
@@ -87,11 +87,11 @@
|
||||
|
||||
&:hover,
|
||||
&.adf-active {
|
||||
color: var(--adf-breadcrumb-item-active-hover-color);
|
||||
color: var(--theme-foreground-text-color-064);
|
||||
}
|
||||
|
||||
&.adf-active {
|
||||
color: var(--adf-breadcrumb-item-active-color);
|
||||
color: var(--theme-foreground-text-color-087);
|
||||
}
|
||||
|
||||
&-chevron {
|
||||
|
@@ -8,7 +8,7 @@ $dropdown-horizontal-offset: 30px;
|
||||
font-size: var(--theme-body-1-font-size);
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.2px;
|
||||
color: var(--theme-text-color);
|
||||
color: var(--theme-foreground-text-color-054);
|
||||
overflow: hidden;
|
||||
margin-top: 10px;
|
||||
|
||||
|
@@ -10,13 +10,13 @@
|
||||
&-footer.mat-card-footer {
|
||||
margin: 0;
|
||||
padding: 8px 12px;
|
||||
border-top: 1px solid var(--theme-border-color);
|
||||
border-top: 1px solid var(--theme-foreground-text-color-007);
|
||||
|
||||
button {
|
||||
color: var(--theme-text-color);
|
||||
color: var(--theme-foreground-text-color-054);
|
||||
|
||||
&:hover {
|
||||
color: var(--theme-text-bold-color);
|
||||
color: var(--theme-foreground-text-color-087);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@@ -2,7 +2,7 @@
|
||||
&-metadata-properties {
|
||||
.mat-expansion-panel-header.mat-expanded:hover,
|
||||
.mat-expansion-panel-header.mat-expanded:focus {
|
||||
background: var(--theme-bg-hover-color);
|
||||
background: var(--theme-background-hover-color);
|
||||
}
|
||||
|
||||
mat-expansion-panel-header {
|
||||
|
@@ -10,7 +10,7 @@ h2.adf-search-results-label {
|
||||
font-stretch: normal;
|
||||
line-height: 1.43;
|
||||
letter-spacing: -0.2px;
|
||||
color: var(--theme-text-bold-color);
|
||||
color: var(--theme-foreground-text-color-087);
|
||||
}
|
||||
|
||||
.adf-toolbar .mat-toolbar {
|
||||
@@ -39,11 +39,11 @@ h2.adf-search-results-label {
|
||||
width: 100%;
|
||||
|
||||
&-icon {
|
||||
color: var(--adf-node-selector-icon-color);
|
||||
color: var(--theme-foreground-icon-color-054);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: var(--theme-fg-base-color);
|
||||
color: var(--theme-foreground-base-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -74,10 +74,10 @@ h2.adf-search-results-label {
|
||||
outline: none;
|
||||
|
||||
.mat-icon {
|
||||
color: var(--adf-node-selector-base-color);
|
||||
color: var(--theme-foreground-base-color-045);
|
||||
|
||||
&:hover {
|
||||
color: var(--adf-node-selector-base-bold-color);
|
||||
color: var(--theme-foreground-base-color-065);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -87,14 +87,14 @@ h2.adf-search-results-label {
|
||||
}
|
||||
|
||||
.adf-dropdown-breadcrumb-item-chevron {
|
||||
color: var(--adf-node-selector-base-color);
|
||||
color: var(--theme-foreground-base-color-045);
|
||||
}
|
||||
}
|
||||
|
||||
&-list {
|
||||
height: 40vh;
|
||||
overflow: auto;
|
||||
border: 1px solid var(--theme-border-color);
|
||||
border: 1px solid var(--theme-foreground-text-color-007);
|
||||
border-top: 0;
|
||||
position: relative;
|
||||
|
||||
|
@@ -60,7 +60,7 @@ adf-content-node-selector {
|
||||
font-stretch: normal;
|
||||
line-height: 1.6;
|
||||
letter-spacing: -0.5px;
|
||||
color: var(--theme-text-bold-color);
|
||||
color: var(--theme-foreground-text-color-087);
|
||||
|
||||
h2 {
|
||||
margin: unset;
|
||||
@@ -94,7 +94,7 @@ adf-content-node-selector {
|
||||
|
||||
.adf-choose-action {
|
||||
&[disabled] {
|
||||
color: var(--theme-secondary-text-color);
|
||||
color: var(--theme-foreground-secondary-text-color);
|
||||
}
|
||||
|
||||
&:enabled {
|
||||
|
@@ -2,7 +2,7 @@
|
||||
display: grid;
|
||||
|
||||
&-location {
|
||||
color: var(--theme-text-color);
|
||||
color: var(--theme-foreground-text-color-054);
|
||||
font-size: var(--theme-caption-font-size);
|
||||
}
|
||||
}
|
||||
|
@@ -18,7 +18,7 @@
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
font-size: var(--theme-subheading-2-font-size);
|
||||
color: var(--theme-text-bold-color);
|
||||
color: var(--theme-foreground-text-color-087);
|
||||
}
|
||||
|
||||
&__label {
|
||||
@@ -26,7 +26,7 @@
|
||||
}
|
||||
|
||||
&__info {
|
||||
color: var(--theme-text-color);
|
||||
color: var(--theme-foreground-text-color-054);
|
||||
font-size: var(--theme-caption-font-size);
|
||||
}
|
||||
|
||||
@@ -39,7 +39,7 @@
|
||||
}
|
||||
|
||||
&__input {
|
||||
color: var(--theme-text-bold-color);
|
||||
color: var(--theme-foreground-text-color-087);
|
||||
}
|
||||
}
|
||||
|
||||
|
@@ -18,7 +18,7 @@
|
||||
}
|
||||
|
||||
&-userinfo-pic {
|
||||
background: var(--adf-user-info-color);
|
||||
background: var(--theme-primary-300);
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
@@ -32,7 +32,7 @@
|
||||
}
|
||||
|
||||
&-userinfo-profile-image {
|
||||
background: var(--adf-user-info-color);
|
||||
background: var(--theme-primary-300);
|
||||
text-align: center;
|
||||
border-radius: 90%;
|
||||
width: 40px;
|
||||
@@ -132,7 +132,7 @@
|
||||
}
|
||||
|
||||
&-userinfo-profile-picture {
|
||||
background: var(--adf-user-info-color);
|
||||
background: var(--theme-primary-300);
|
||||
background-size: cover;
|
||||
border-radius: 50%;
|
||||
height: 80px;
|
||||
@@ -144,7 +144,7 @@
|
||||
&-userinfo-profile-initials {
|
||||
text-transform: uppercase;
|
||||
background-size: cover;
|
||||
background-color: var(--adf-user-info-color);
|
||||
background-color: var(--theme-primary-300);
|
||||
border-radius: 50%;
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
|
@@ -30,7 +30,7 @@
|
||||
}
|
||||
|
||||
.adf-dialog-action-button:disabled > span {
|
||||
color: var(--theme-text-color);
|
||||
color: var(--theme-foreground-text-color-054);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 380px) {
|
||||
|
@@ -56,7 +56,7 @@
|
||||
}
|
||||
|
||||
&--text {
|
||||
color: var(--theme-text-fg-color);
|
||||
color: var(--theme-foreground-text-color);
|
||||
font-size: var(--theme-subheading-2-font-size);
|
||||
}
|
||||
}
|
||||
@@ -67,7 +67,7 @@
|
||||
font-size: var(--theme-headline-font-size);
|
||||
line-height: 1.33;
|
||||
letter-spacing: -1px;
|
||||
color: var(--theme-text-fg-color);
|
||||
color: var(--theme-foreground-text-color);
|
||||
}
|
||||
|
||||
.adf-document-list__drag-drop {
|
||||
@@ -76,7 +76,7 @@
|
||||
font-size: 56px;
|
||||
line-height: 1;
|
||||
letter-spacing: -2px;
|
||||
color: var(--theme-text-fg-color);
|
||||
color: var(--theme-foreground-text-color);
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
@@ -86,7 +86,7 @@
|
||||
font-size: var(--theme-subheading-2-font-size);
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.4px;
|
||||
color: var(--theme-text-fg-color);
|
||||
color: var(--theme-foreground-text-color);
|
||||
margin-top: 17px;
|
||||
}
|
||||
|
||||
@@ -114,11 +114,11 @@
|
||||
font-size: var(--theme-headline-font-size);
|
||||
line-height: 1.33;
|
||||
letter-spacing: -1px;
|
||||
color: var(--theme-text-fg-color);
|
||||
color: var(--theme-foreground-text-color);
|
||||
}
|
||||
|
||||
.adf-documentlist-pagination {
|
||||
color: var(--theme-text-fg-color);
|
||||
color: var(--theme-foreground-text-color);
|
||||
|
||||
.adf-pagination__block {
|
||||
border-right: none;
|
||||
@@ -131,7 +131,7 @@
|
||||
font-size: var(--theme-headline-font-size);
|
||||
line-height: 1.33;
|
||||
letter-spacing: -1px;
|
||||
color: var(--theme-text-color);
|
||||
color: var(--theme-foreground-text-color-054);
|
||||
}
|
||||
|
||||
&-drag-drop {
|
||||
|
@@ -34,7 +34,7 @@
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
letter-spacing: -0.5px;
|
||||
color: var(--theme-text-bold-color);
|
||||
color: var(--theme-foreground-text-color-087);
|
||||
}
|
||||
|
||||
&-content {
|
||||
@@ -51,7 +51,7 @@
|
||||
padding: 8px 8px 24px 8px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
color: var(--theme-text-color);
|
||||
color: var(--theme-foreground-text-color-054);
|
||||
|
||||
button {
|
||||
text-transform: uppercase;
|
||||
|
@@ -8,7 +8,7 @@
|
||||
font-stretch: normal;
|
||||
line-height: 1.6;
|
||||
letter-spacing: -0.5px;
|
||||
color: var(--theme-text-bold-color);
|
||||
color: var(--theme-foreground-text-color-087);
|
||||
}
|
||||
|
||||
.mat-dialog-container {
|
||||
@@ -45,7 +45,7 @@
|
||||
|
||||
.adf-choose-action {
|
||||
&[disabled] {
|
||||
color: var(--theme-secondary-text-color);
|
||||
color: var(--theme-foreground-secondary-text-color);
|
||||
}
|
||||
|
||||
&:enabled {
|
||||
|
@@ -5,7 +5,7 @@ $search-result-height: calc(100% - 75px);
|
||||
display: flex;
|
||||
height: $search-result-height;
|
||||
overflow: auto;
|
||||
border: 2px solid var(--theme-border-color);
|
||||
border: 2px solid var(--theme-foreground-text-color-007);
|
||||
|
||||
&-elements {
|
||||
width: 100%;
|
||||
@@ -22,7 +22,7 @@ $search-result-height: calc(100% - 75px);
|
||||
justify-content: space-around;
|
||||
height: $search-result-height;
|
||||
overflow: auto;
|
||||
border: 2px solid var(--theme-border-color);
|
||||
border: 2px solid var(--theme-foreground-text-color-007);
|
||||
}
|
||||
|
||||
&-permission-no-result {
|
||||
@@ -37,11 +37,11 @@ $search-result-height: calc(100% - 75px);
|
||||
width: 100%;
|
||||
|
||||
&-icon {
|
||||
color: var(--theme-selected-button-bg-color);
|
||||
color: var(--theme-background-selected-button-color);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: var(--theme-fg-base-color);
|
||||
color: var(--theme-foreground-base-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@@ -18,7 +18,7 @@
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 15px;
|
||||
border: 1px solid var(--theme-border-color);
|
||||
border: 1px solid var(--theme-foreground-text-color-007);
|
||||
}
|
||||
|
||||
&-inherit-container {
|
||||
@@ -89,6 +89,6 @@
|
||||
.adf-pop-over-card {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8px 9px -5px var(--theme-fg-divider), 0 15px 22px 2px var(--theme-fg-divider);
|
||||
box-shadow: 0 8px 9px -5px var(--theme-foreground-divider-color), 0 15px 22px 2px var(--theme-foreground-divider-color);
|
||||
}
|
||||
}
|
||||
|
@@ -19,8 +19,8 @@ $mat-menu-overlay-max-width: 280px !default; // 56 * 5
|
||||
margin-top: -22px;
|
||||
font-size: var(--theme-subheading-1-font-size);
|
||||
z-index: 5;
|
||||
color: var(--theme-text-fg-color);
|
||||
background-color: var(--theme-card-bg-color);
|
||||
color: var(--theme-foreground-text-color);
|
||||
background-color: var(--theme-background-card-color);
|
||||
border-radius: 2px;
|
||||
|
||||
@media screen and (max-width: 959px) {
|
||||
@@ -32,7 +32,7 @@ $mat-menu-overlay-max-width: 280px !default; // 56 * 5
|
||||
|
||||
&-search-autocomplete-item {
|
||||
&:hover {
|
||||
background-color: var(--theme-bg-hover-color);
|
||||
background-color: var(--theme-background-hover-color);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
@@ -83,6 +83,6 @@
|
||||
|
||||
.mat-checkbox-label,
|
||||
.mat-radio-label {
|
||||
color: var(--theme-text-color);
|
||||
color: var(--theme-foreground-text-color-054);
|
||||
}
|
||||
}
|
||||
|
@@ -7,14 +7,14 @@
|
||||
max-width: 320px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
background: var(--theme-unselected-chip-bg-color);
|
||||
background: var(--theme-background-unselected-chip-color);
|
||||
|
||||
&:focus {
|
||||
color: unset;
|
||||
}
|
||||
|
||||
&.mat-standard-chip::after {
|
||||
background: var(--theme-unselected-chip-bg-color);
|
||||
background: var(--theme-background-unselected-chip-color);
|
||||
color: unset;
|
||||
}
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
}
|
||||
|
||||
&.adf-search-toggle-chip {
|
||||
background: var(--theme-card-bg-color);
|
||||
background: var(--theme-background-card-color);
|
||||
border: 2px solid var(--theme-accent-color);
|
||||
|
||||
&.mat-chip::after {
|
||||
@@ -35,7 +35,7 @@
|
||||
.adf-search-filter-placeholder {
|
||||
flex: 1 1 auto;
|
||||
white-space: nowrap;
|
||||
color: var(--theme-disabled-text-color);
|
||||
color: var(--theme-foreground-disabled-text-color);
|
||||
}
|
||||
|
||||
.adf-search-filter-ellipsis {
|
||||
|
@@ -1,6 +1,6 @@
|
||||
.adf-search-filter-menu-card {
|
||||
color: var(--theme-text-fg-color);
|
||||
background: var(--theme-card-bg-color);
|
||||
color: var(--theme-foreground-text-color);
|
||||
background: var(--theme-background-card-color);
|
||||
|
||||
.adf-search-filter-title {
|
||||
padding: 16px 12px;
|
||||
|
@@ -4,14 +4,14 @@
|
||||
|
||||
.adf-icon {
|
||||
opacity: 1;
|
||||
color: var(--theme-icon-fg-color);
|
||||
color: var(--theme-foreground-icon-color);
|
||||
|
||||
&-active {
|
||||
color: var(--theme-primary-color);
|
||||
}
|
||||
|
||||
.mat-badge-active {
|
||||
border: 2px solid var(--theme-card-bg-color) !important;
|
||||
border: 2px solid var(--theme-background-card-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 15px 15px 10px;
|
||||
color: var(--theme-text-bold-color) !important;
|
||||
color: var(--theme-foreground-text-color-087) !important;
|
||||
|
||||
.adf-facet-buttons {
|
||||
display: none;
|
||||
@@ -38,25 +38,25 @@
|
||||
}
|
||||
|
||||
input {
|
||||
background: 2px solid var(--theme-card-bg-color) !important;
|
||||
background: 2px solid var(--theme-background-card-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: 1.1em;
|
||||
padding-bottom: 5px;
|
||||
color: var(--theme-text-bold-color);
|
||||
color: var(--theme-foreground-text-color-087);
|
||||
}
|
||||
|
||||
&-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 15px;
|
||||
background-color: var(--theme-hover-bg-color);
|
||||
background-color: var(--theme-background-hover-color);
|
||||
|
||||
> button {
|
||||
font-size: 0.9em;
|
||||
color: var(--theme-text-bold-color);
|
||||
color: var(--theme-foreground-text-color-087);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@@ -1,11 +1,11 @@
|
||||
.adf-search-filter {
|
||||
.mat-expansion-panel-header-title {
|
||||
font-size: var(--theme-body-1-font-size);
|
||||
color: var(--theme-text-bold-color);
|
||||
color: var(--theme-foreground-text-color-087);
|
||||
}
|
||||
|
||||
.mat-checkbox-label,
|
||||
.mat-radio-label {
|
||||
color: var(--theme-text-color);
|
||||
color: var(--theme-foreground-text-color-054);
|
||||
}
|
||||
}
|
||||
|
@@ -1,5 +1,5 @@
|
||||
.adf-search-sorting-picker {
|
||||
.mat-icon-button {
|
||||
color: var(--theme-text-color);
|
||||
color: var(--theme-foreground-text-color-054);
|
||||
}
|
||||
}
|
||||
|
@@ -10,7 +10,7 @@
|
||||
|
||||
.adf-view-more-button {
|
||||
margin: 4px;
|
||||
color: var(--theme-text-color);
|
||||
color: var(--theme-foreground-text-color-054);
|
||||
}
|
||||
|
||||
.adf-full-width {
|
||||
|
@@ -24,7 +24,7 @@ $tree-header-font-size: 12px !default;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
transition-property: background-color;
|
||||
border-bottom: 1px solid var(--theme-border-color);
|
||||
border-bottom: 1px solid var(--theme-foreground-text-color-007);
|
||||
min-height: $tree-row-height;
|
||||
user-select: none;
|
||||
|
||||
@@ -33,7 +33,7 @@ $tree-header-font-size: 12px !default;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--theme-bg-hover-color);
|
||||
background-color: var(--theme-background-hover-color);
|
||||
|
||||
.adf-tree-actions {
|
||||
display: flex;
|
||||
@@ -41,7 +41,7 @@ $tree-header-font-size: 12px !default;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: var(--theme-bg-hover-color);
|
||||
background-color: var(--theme-background-hover-color);
|
||||
outline-offset: -1px;
|
||||
outline: 1px solid var(--theme-accent-color-a200);
|
||||
}
|
||||
@@ -55,7 +55,7 @@ $tree-header-font-size: 12px !default;
|
||||
}
|
||||
|
||||
.adf-tree-cell {
|
||||
color: var(--theme-text-fg-color);
|
||||
color: var(--theme-foreground-text-color);
|
||||
width: 100%;
|
||||
|
||||
.adf-tree-cell-value {
|
||||
@@ -82,7 +82,7 @@ $tree-header-font-size: 12px !default;
|
||||
letter-spacing: 0;
|
||||
min-height: $tree-row-height !important;
|
||||
font-size: $tree-header-font-size;
|
||||
color: var(--theme-text-fg-color);
|
||||
color: var(--theme-foreground-text-color);
|
||||
box-sizing: border-box;
|
||||
padding-top: 12px !important;
|
||||
|
||||
|
@@ -1,7 +1,7 @@
|
||||
/* stylelint-disable no-descending-specificity */
|
||||
.adf-upload-dialog {
|
||||
background: var(--theme-dialog-bg-color);
|
||||
color: var(--theme-text-color);
|
||||
background: var(--theme-background-dialog-color);
|
||||
color: var(--theme-foreground-text-color-054);
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
width: 40%;
|
||||
@@ -33,7 +33,7 @@
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
line-height: 0;
|
||||
color: var(--theme-text-color) !important;
|
||||
color: var(--theme-foreground-text-color-054) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -49,8 +49,8 @@
|
||||
&__content {
|
||||
overflow: auto;
|
||||
max-height: 194px;
|
||||
border-top: 1px solid var(--adf-upload-border-color);
|
||||
border-bottom: 1px solid var(--adf-upload-border-color);
|
||||
border-top: 1px solid var(--theme-foreground-text-color-014);
|
||||
border-bottom: 1px solid var(--theme-foreground-text-color-014);
|
||||
}
|
||||
|
||||
&__confirmation {
|
||||
@@ -61,7 +61,7 @@
|
||||
font-size: var(--theme-subheading-2-font-size);
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.4px;
|
||||
color: var(--theme-text-bold-color);
|
||||
color: var(--theme-foreground-text-color-087);
|
||||
}
|
||||
|
||||
&__confirmation--text {
|
||||
|
@@ -2,7 +2,7 @@ $file-uploading-row-hover-color: #eee !default;
|
||||
|
||||
adf-file-uploading-list-row:not(:first-child) {
|
||||
display: block;
|
||||
border-top: 1px solid var(--adf-upload-border-color);
|
||||
border-top: 1px solid var(--theme-foreground-text-color-014);
|
||||
}
|
||||
|
||||
.adf-file-uploading-row {
|
||||
|
Reference in New Issue
Block a user