mirror of
https://github.com/Alfresco/alfresco-content-app.git
synced 2025-07-24 17:31:52 +00:00
[ACS-4792] provide support for style linting (#3055)
* [ACS-4792] provide support for style linting * style fixes * style fixes * style fixes * disable yarn licenses until the issue is fixed * fix package lock * fix after rebase
This commit is contained in:
Denys Vuika
GitHub
@@ -1,7 +1,3 @@
|
||||
.app-create-menu:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.app-create-menu {
|
||||
.mat-stroked-button {
|
||||
width: 100%;
|
||||
@@ -26,7 +22,7 @@
|
||||
&:not(.app-create-menu-secondary-button) {
|
||||
background-color: var(--theme-accent-color);
|
||||
color: var(--theme-accent-color-default-contrast);
|
||||
margin-top: 0px;
|
||||
margin-top: 0;
|
||||
|
||||
.mat-icon {
|
||||
color: var(--theme-accent-color-default-contrast);
|
||||
@@ -46,25 +42,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
&--collapsed {
|
||||
outline: none;
|
||||
color: var(--theme-secondary-text-color);
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
|
||||
&:not(.app-create-menu-secondary-button) {
|
||||
.app-create-menu--icon {
|
||||
color: var(--theme-accent-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--theme-accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-create-menu--icon {
|
||||
&__sub-menu {
|
||||
.mat-menu-item {
|
||||
@@ -94,4 +71,27 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--collapsed {
|
||||
outline: none;
|
||||
color: var(--theme-secondary-text-color);
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
|
||||
&:not(.app-create-menu-secondary-button) {
|
||||
.app-create-menu--icon {
|
||||
color: var(--theme-accent-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--theme-accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-create-menu:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
.app-header {
|
||||
box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.02), 0px 6px 10px 0px rgba(0, 0, 0, 0.014), 0px 1px 18px 0px rgba(0, 0, 0, 0.012);
|
||||
box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.02), 0 6px 10px 0 rgba(0, 0, 0, 0.014), 0 1px 18px 0 rgba(0, 0, 0, 0.012);
|
||||
z-index: 2;
|
||||
|
||||
.mat-toolbar {
|
||||
|
||||
@@ -2,10 +2,6 @@
|
||||
display: flex;
|
||||
max-width: 400px;
|
||||
|
||||
.form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form__version {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -17,6 +13,7 @@
|
||||
}
|
||||
|
||||
.form {
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -1,5 +1,21 @@
|
||||
$top-margin: 12px;
|
||||
|
||||
.app-suffix-search-icon-wrapper {
|
||||
height: 6px;
|
||||
margin: 14px 1px;
|
||||
float: left;
|
||||
|
||||
.mat-icon {
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.app-clear-icon {
|
||||
font-size: 18px;
|
||||
margin: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.app-search-container {
|
||||
margin-top: -$top-margin;
|
||||
padding-top: 2px;
|
||||
@@ -43,19 +59,3 @@ $top-margin: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-suffix-search-icon-wrapper {
|
||||
height: 6px;
|
||||
margin: 14px 1px;
|
||||
float: left;
|
||||
|
||||
.mat-icon {
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.app-clear-icon {
|
||||
font-size: 18px;
|
||||
margin: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,6 +6,9 @@ $top-margin: 12px;
|
||||
|
||||
.app-search-container {
|
||||
color: var(--theme-foreground-text-color);
|
||||
width: 100%;
|
||||
max-width: $search-width;
|
||||
height: $search-height + $top-margin;
|
||||
|
||||
.app-input-form-field {
|
||||
.mat-input-element {
|
||||
@@ -37,11 +40,6 @@ $top-margin: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
#search-options {
|
||||
color: var(--theme-text-color);
|
||||
border-top: 1px solid var(--theme-divider-color);
|
||||
}
|
||||
|
||||
mat-checkbox {
|
||||
.mat-checkbox-frame {
|
||||
border-color: var(--theme-text-color);
|
||||
@@ -56,17 +54,13 @@ mat-checkbox {
|
||||
height: $search-height;
|
||||
}
|
||||
|
||||
.app-search-container {
|
||||
width: 100%;
|
||||
max-width: $search-width;
|
||||
height: $search-height + $top-margin;
|
||||
}
|
||||
|
||||
.app-search-control {
|
||||
margin-top: -$top-margin;
|
||||
}
|
||||
|
||||
#search-options {
|
||||
color: var(--theme-text-color);
|
||||
border-top: 1px solid var(--theme-divider-color);
|
||||
padding: 20px 0;
|
||||
font-size: 16px;
|
||||
letter-spacing: -0.7px;
|
||||
|
||||
@@ -5,12 +5,13 @@
|
||||
|
||||
&__content {
|
||||
@include flex-column;
|
||||
|
||||
border-left: 1px solid #eee;
|
||||
}
|
||||
|
||||
&__content-header {
|
||||
display: flex;
|
||||
padding: 0 25px 0 25px;
|
||||
padding: 0 25px;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #eee;
|
||||
@@ -28,6 +29,7 @@
|
||||
|
||||
.content {
|
||||
@include flex-row;
|
||||
|
||||
flex: unset;
|
||||
height: unset;
|
||||
padding-top: 8px;
|
||||
@@ -36,6 +38,7 @@
|
||||
|
||||
&__side--left {
|
||||
@include flex-column;
|
||||
|
||||
height: unset;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
.aca-search-results-row {
|
||||
|
||||
.result-location {
|
||||
height: 15px;
|
||||
padding-top: 3px;
|
||||
|
||||
@@ -15,12 +15,13 @@ $contrast-gray: #646569;
|
||||
|
||||
&__content {
|
||||
@include flex-column;
|
||||
|
||||
border-left: 1px solid #eee;
|
||||
}
|
||||
|
||||
&__content-header {
|
||||
display: flex;
|
||||
padding: 0 25px 0 25px;
|
||||
padding: 0 25px;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #eee;
|
||||
@@ -30,6 +31,7 @@ $contrast-gray: #646569;
|
||||
background-color: $adf-chip-background;
|
||||
color: $contrast-gray;
|
||||
}
|
||||
|
||||
.adf-search-filter-placeholder {
|
||||
color: $contrast-gray;
|
||||
}
|
||||
@@ -63,7 +65,7 @@ $contrast-gray: #646569;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
margin: 5px 5px;
|
||||
margin: 5px;
|
||||
padding-right: 24px;
|
||||
}
|
||||
|
||||
@@ -113,7 +115,6 @@ $contrast-gray: #646569;
|
||||
}
|
||||
|
||||
.adf-datatable {
|
||||
|
||||
aca-search-action-menu button {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
@@ -6,20 +6,6 @@
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.aca-menu-panel {
|
||||
.action-button--active {
|
||||
color: var(--theme-accent-color) !important;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
color: var(--theme-primary-color);
|
||||
}
|
||||
|
||||
.action-button:hover {
|
||||
color: var(--theme-accent-color);
|
||||
}
|
||||
}
|
||||
|
||||
.sidenav {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
@@ -27,10 +13,6 @@
|
||||
height: 100%;
|
||||
background-color: var(--theme-background-color);
|
||||
|
||||
.section:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.action-menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -52,6 +34,10 @@
|
||||
border-bottom: 1px solid var(--theme-divider-color);
|
||||
}
|
||||
|
||||
.section:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.section--collapsed {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -88,13 +74,6 @@
|
||||
margin: 0 8px !important;
|
||||
}
|
||||
|
||||
.app-item,
|
||||
.app-item .item {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 12px 0;
|
||||
flex-direction: row;
|
||||
@@ -106,6 +85,13 @@
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.app-item,
|
||||
.app-item .item {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.item:hover .action-button__label {
|
||||
color: var(--theme-primary-color);
|
||||
}
|
||||
@@ -143,7 +129,22 @@
|
||||
}
|
||||
}
|
||||
|
||||
.aca-menu-panel {
|
||||
.action-button--active {
|
||||
color: var(--theme-accent-color) !important;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
color: var(--theme-primary-color);
|
||||
}
|
||||
|
||||
.action-button:hover {
|
||||
color: var(--theme-accent-color);
|
||||
}
|
||||
}
|
||||
|
||||
[dir='rtl'] .sidenav {
|
||||
/* stylelint-disable-next-line no-descending-specificity */
|
||||
.mat-expansion-panel-header {
|
||||
padding: 0 0 0 8px !important;
|
||||
}
|
||||
|
||||
@@ -10,6 +10,7 @@ app-view-profile {
|
||||
|
||||
.app-profile-row {
|
||||
width: 100%;
|
||||
margin: 2rem 0 0;
|
||||
}
|
||||
|
||||
.app-profile-title {
|
||||
@@ -84,13 +85,7 @@ app-view-profile {
|
||||
box-shadow: 0 0 2px (--theme-blue-button-color);
|
||||
}
|
||||
|
||||
.app-profile-row {
|
||||
width: 100%;
|
||||
margin: 2rem 0 0 0;
|
||||
}
|
||||
|
||||
.app-general-edit {
|
||||
margin: 0.7rem;
|
||||
background: var(--theme-grey-text-background-color);
|
||||
height: 30px;
|
||||
margin: 1rem;
|
||||
@@ -122,7 +117,7 @@ app-view-profile {
|
||||
}
|
||||
|
||||
.app-general-dropdown {
|
||||
padding: 0rem 1rem;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.app-general-dropdown-details {
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
/* stylelint-disable scss/no-global-function-names */
|
||||
@use '@angular/material' as mat;
|
||||
@import 'mixins';
|
||||
@import 'theme';
|
||||
@@ -8,6 +9,7 @@ $foreground: map-get($custom-theme, foreground);
|
||||
html,
|
||||
body {
|
||||
@include flex-column;
|
||||
|
||||
font-size: 14px;
|
||||
font-family: $default-font-family;
|
||||
color: mat.get-color-from-palette($foreground, text, 0.87);
|
||||
@@ -30,6 +32,7 @@ body {
|
||||
.adf-container-full-width {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
app-root,
|
||||
app-shell,
|
||||
app-about,
|
||||
@@ -38,6 +41,7 @@ aca-search-results,
|
||||
ng-component {
|
||||
@include flex-column;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
app-root,
|
||||
app-about,
|
||||
|
||||
@@ -30,7 +30,6 @@ $aca-primary-blue: (
|
||||
A700: white,
|
||||
)
|
||||
);
|
||||
|
||||
$aca-accent-green: (
|
||||
50: #e7f3e7,
|
||||
100: #c2e1c2,
|
||||
@@ -63,7 +62,6 @@ $aca-accent-green: (
|
||||
A700: white,
|
||||
)
|
||||
);
|
||||
|
||||
$aca-warn: (
|
||||
50: #f6e1e5,
|
||||
100: #eab5bf,
|
||||
|
||||
@@ -1,18 +1,17 @@
|
||||
/* stylelint-disable value-keyword-case */
|
||||
@use '@angular/material' as mat;
|
||||
@import './overrides/adf-style-fixes.theme';
|
||||
@import './overrides/adf-pagination.theme';
|
||||
@import './overrides/ay11';
|
||||
@import './overrides/adf-about.theme.scss';
|
||||
@import './overrides/adf-about.theme';
|
||||
@import './colors';
|
||||
|
||||
$mat-primary-palette: mat.define-palette($aca-primary-blue, A100);
|
||||
$mat-accent-palette: mat.define-palette($aca-accent-green, A200);
|
||||
$mat-warn-palette: mat.define-palette($aca-warn, A100);
|
||||
$app-typography: mat.define-typography-config($font-family: 'Open Sans');
|
||||
|
||||
$app-typography: mat.define-typography-config($font-family: 'Open Sans'
|
||||
);
|
||||
|
||||
@include mat.core();
|
||||
@include mat.core($app-typography);
|
||||
|
||||
$custom-theme: mat.define-light-theme(
|
||||
(
|
||||
@@ -30,6 +29,6 @@ $custom-theme: mat.define-light-theme(
|
||||
@include adf-core-theme($theme);
|
||||
@include adf-style-fixes($theme);
|
||||
@include adf-pagination-theme($theme);
|
||||
@include ay11-theme();
|
||||
@include ay11-theme;
|
||||
@include adf-about-theme($theme);
|
||||
}
|
||||
|
||||
@@ -1,11 +1,9 @@
|
||||
/* stylelint-disable scss/no-global-function-names */
|
||||
@function get-custom-background-color($background-color, $theme) {
|
||||
$background: map-get($theme, background);
|
||||
|
||||
$card: map-get($background, card);
|
||||
|
||||
$new-card-color: lighten($background-color, 10%);
|
||||
$new-selected-button: lighten($background-color, 5%);
|
||||
|
||||
$background: map_merge($background, (background: $background-color));
|
||||
$background: map_merge($background, (card: $new-card-color));
|
||||
$background: map_merge($background, (modal: $new-card-color));
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
/* stylelint-disable scss/dollar-variable-pattern */
|
||||
/* stylelint-disable scss/no-global-function-names */
|
||||
/* stylelint-disable value-keyword-case */
|
||||
@use "sass:math";
|
||||
|
||||
@function multiply($fore, $back) {
|
||||
@@ -8,7 +11,7 @@
|
||||
@return rgb($red, $green, $blue);
|
||||
}
|
||||
|
||||
@function getColorLuminance($color) {
|
||||
@function get-color-luminance($color) {
|
||||
$colors: (
|
||||
'red': red($color),
|
||||
'green': green($color),
|
||||
@@ -19,7 +22,7 @@
|
||||
$adjusted: 0;
|
||||
$value: $value / 255;
|
||||
|
||||
@if $value < 0.03928 {
|
||||
@if $value < 0.0393 {
|
||||
$value: $value / 12.92;
|
||||
} @else {
|
||||
$value: ($value + .055) / 1.055;
|
||||
@@ -32,75 +35,66 @@
|
||||
@return (map-get($colors, 'red') * .2126) + (map-get($colors, 'green') * .7152) + (map-get($colors, 'blue') * .0722);
|
||||
}
|
||||
|
||||
@function createTextColor($color, $colorType: 'primary') {
|
||||
@function create-text-color($color, $color-type: 'primary') {
|
||||
$red: red($color);
|
||||
$green: green($color);
|
||||
$blue: blue($color);
|
||||
$light-text: $light-primary-text;
|
||||
$dark-text: $dark-primary-text;
|
||||
|
||||
$lightText: $light-primary-text;
|
||||
$darkText: $dark-primary-text;
|
||||
|
||||
@if ($colorType == 'accent') {
|
||||
$lightText: $light-secondary-text;
|
||||
$darkText: $dark-secondary-text;
|
||||
@if $color-type == 'accent' {
|
||||
$light-text: $light-secondary-text;
|
||||
$dark-text: $dark-secondary-text;
|
||||
}
|
||||
|
||||
$lightTextLuminance: getColorLuminance($lightText);
|
||||
$darkTextLuminance: getColorLuminance($darkText);
|
||||
$backgroundColorLuminance: getColorLuminance($color);
|
||||
$light-text-luminance: get-color-luminance($light-text);
|
||||
$dark-text-luminance: get-color-luminance($dark-text);
|
||||
$background-color-luminance: get-color-luminance($color);
|
||||
$light-text-luminance: $light-text-luminance + 0.5;
|
||||
$dark-text-luminance: $dark-text-luminance + 0.5;
|
||||
$background-color-luminance: $background-color-luminance + 0.5;
|
||||
$luminance-contrast-for-light-text: $light-text-luminance / $background-color-luminance;
|
||||
$luminance-contrast-for-dark-text: $background-color-luminance / $dark-text-luminance;
|
||||
$text-colour: $light-text;
|
||||
|
||||
$lightTextLuminance: $lightTextLuminance + 0.5;
|
||||
$darkTextLuminance: $darkTextLuminance + 0.5;
|
||||
$backgroundColorLuminance: $backgroundColorLuminance + 0.5;
|
||||
|
||||
$luminanceContrastForLightText: $lightTextLuminance / $backgroundColorLuminance;
|
||||
$luminanceContrastForDarkText: $backgroundColorLuminance / $darkTextLuminance;
|
||||
|
||||
$textColour: $lightText;
|
||||
|
||||
@if ($luminanceContrastForDarkText > $luminanceContrastForLightText) {
|
||||
$textColour: $darkText;
|
||||
@if $luminance-contrast-for-dark-text > $luminance-contrast-for-light-text {
|
||||
$text-colour: $dark-text;
|
||||
}
|
||||
|
||||
@return $textColour;
|
||||
@return $text-colour;
|
||||
}
|
||||
|
||||
@function createColorPalette($color, $colorType: 'primary') {
|
||||
@function create-color-palette($color, $color-type: 'primary') {
|
||||
$light: #fff;
|
||||
$dark: multiply($color, $color);
|
||||
|
||||
$color50: mix($light, $color, 88%);
|
||||
$color100: mix($light, $color, 70%);
|
||||
$color200: mix($light, $color, 50%);
|
||||
$color300: mix($light, $color, 30%);
|
||||
$color400: mix($light, $color, 15%);
|
||||
$color500: mix($light, $color, 0%);
|
||||
$color600: mix($dark, $color, 13%);
|
||||
$color700: mix($dark, $color, 30%);
|
||||
$color800: mix($dark, $color, 46%);
|
||||
$color900: mix($dark, $color, 75%);
|
||||
|
||||
$color50: mix($light, $color, 88%);
|
||||
$color100: mix($light, $color, 70%);
|
||||
$color200: mix($light, $color, 50%);
|
||||
$color300: mix($light, $color, 30%);
|
||||
$color400: mix($light, $color, 15%);
|
||||
$color500: mix($light, $color, 0%);
|
||||
$color600: mix($dark, $color, 13%);
|
||||
$color700: mix($dark, $color, 30%);
|
||||
$color800: mix($dark, $color, 46%);
|
||||
$color900: mix($dark, $color, 75%);
|
||||
$colorA100: lighten(saturate(mix($dark, $color, 15%), 80%), 45.6%);
|
||||
$colorA200: lighten(saturate(mix($dark, $color, 15%), 80%), 35.6%);
|
||||
$colorA400: lighten(saturate(mix($dark, $color, 15%), 100%), 25.6%);
|
||||
$colorA700: lighten(saturate(mix($dark, $color, 15%), 100%), 20.5%);
|
||||
|
||||
$contrast50: createTextColor($color50, $colorType);
|
||||
$contrast100: createTextColor($color100, $colorType);
|
||||
$contrast200: createTextColor($color200, $colorType);
|
||||
$contrast300: createTextColor($color300, $colorType);
|
||||
$contrast400: createTextColor($color400, $colorType);
|
||||
$contrast500: createTextColor($color500, $colorType);
|
||||
$contrast600: createTextColor($color600, $colorType);
|
||||
$contrast700: createTextColor($color700, $colorType);
|
||||
$contrast800: createTextColor($color800, $colorType);
|
||||
$contrast900: createTextColor($color900, $colorType);
|
||||
|
||||
$contrastA100: createTextColor($colorA100, $colorType);
|
||||
$contrastA200: createTextColor($colorA200, $colorType);
|
||||
$contrastA400: createTextColor($colorA400, $colorType);
|
||||
$contrastA700: createTextColor($colorA700, $colorType);
|
||||
|
||||
$contrast50: create-text-color($color50, $color-type);
|
||||
$contrast100: create-text-color($color100, $color-type);
|
||||
$contrast200: create-text-color($color200, $color-type);
|
||||
$contrast300: create-text-color($color300, $color-type);
|
||||
$contrast400: create-text-color($color400, $color-type);
|
||||
$contrast500: create-text-color($color500, $color-type);
|
||||
$contrast600: create-text-color($color600, $color-type);
|
||||
$contrast700: create-text-color($color700, $color-type);
|
||||
$contrast800: create-text-color($color800, $color-type);
|
||||
$contrast900: create-text-color($color900, $color-type);
|
||||
$contrastA100: create-text-color($colorA100, $color-type);
|
||||
$contrastA200: create-text-color($colorA200, $color-type);
|
||||
$contrastA400: create-text-color($colorA400, $color-type);
|
||||
$contrastA700: create-text-color($colorA700, $color-type);
|
||||
$palette: (
|
||||
50: $color50,
|
||||
100: $color50,
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
/* stylelint-disable scss/no-global-function-names */
|
||||
@function get-custom-text-color($text-color, $theme) {
|
||||
$foreground: map-get($custom-theme, foreground);
|
||||
|
||||
$foreground: map_merge($foreground, (text: $text-color));
|
||||
$foreground: map_merge($foreground, (secondary-text: $text-color));
|
||||
|
||||
|
||||
@@ -1,19 +1,23 @@
|
||||
/* stylelint-disable value-keyword-case */
|
||||
|
||||
@use '@angular/material' as mat;
|
||||
@import '../colors';
|
||||
@import './custom-palette-creator.scss';
|
||||
@import './custom-palette-creator';
|
||||
|
||||
@function get-mat-palettes($primary-color, $accent-color) {
|
||||
$mat-primary-palette: null;
|
||||
|
||||
@if $primary-color {
|
||||
$custom-theme-primary-palette: createColorPalette($primary-color, 'primary');
|
||||
$custom-theme-primary-palette: create-color-palette($primary-color, 'primary');
|
||||
$mat-primary-palette: mat.define-palette($custom-theme-primary-palette, 500);
|
||||
} @else {
|
||||
$mat-primary-palette: mat.define-palette($aca-primary-blue, A100);
|
||||
}
|
||||
|
||||
$mat-accent-palette: null;
|
||||
|
||||
@if $accent-color {
|
||||
$custom-theme-accent-palette: createColorPalette($accent-color, 'accent');
|
||||
$custom-theme-accent-palette: create-color-palette($accent-color, 'accent');
|
||||
$mat-accent-palette: mat.define-palette($custom-theme-accent-palette, 500);
|
||||
} @else {
|
||||
$mat-accent-palette: mat.define-palette($aca-accent-green, A200);
|
||||
|
||||
@@ -1 +1 @@
|
||||
@import '../theme.scss';
|
||||
@import '../theme';
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
/* stylelint-disable scss/no-global-function-names */
|
||||
@use '@angular/material' as mat;
|
||||
@import '../variables/font-family.scss';
|
||||
@import '../variables/font-family';
|
||||
|
||||
@function get-mat-typography(
|
||||
$base-font-size,
|
||||
@@ -44,7 +45,7 @@
|
||||
|
||||
@if $font-family {
|
||||
@each $key, $level in $custom-typography {
|
||||
@if (type-of($level) == 'map') {
|
||||
@if type-of($level) == 'map' {
|
||||
$new-level: map-merge($level, (font-family: $font-family));
|
||||
$custom-typography: map-merge($custom-typography, ($key: $new-level));
|
||||
}
|
||||
|
||||
@@ -15,9 +15,9 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@mixin rounded-outline($border-color: var(--theme-blue-button-color), $thickness: 2px, $radius: 4px) {
|
||||
outline: $thickness solid $border-color;
|
||||
border-radius: $radius;
|
||||
@mixin rounded-outline() {
|
||||
outline: 2px solid var(--theme-blue-button-color);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
@mixin rounded-border($border-color: var(--theme-blue-button-color), $thickness: 2px, $radius: 4px) {
|
||||
|
||||
@@ -17,13 +17,12 @@
|
||||
width: 95%;
|
||||
border: 1px solid var(--theme-about-panel-border-color);
|
||||
background-color: var(--theme-about-panel-background-color);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
mat-expansion-panel-header {
|
||||
display: flex;
|
||||
height: 80px !important;
|
||||
padding: 24px 24px;
|
||||
padding: 24px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
@@ -36,4 +35,4 @@
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
@mixin adf-pagination-theme($theme) {
|
||||
|
||||
.adf-pagination__block {
|
||||
flex: none !important;
|
||||
padding: 0 !important;
|
||||
|
||||
@@ -1,36 +1,21 @@
|
||||
@mixin ay11-theme() {
|
||||
.adf-pagination {
|
||||
&__perpage-block,
|
||||
&__actualinfo-block {
|
||||
|
||||
.mat-icon-button {
|
||||
left: 3px;
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&.cdk-keyboard-focused {
|
||||
.mat-icon {
|
||||
@include rounded-outline();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-icon-button, .mat-button, .mat-checkbox, .mat-raised-button {
|
||||
&:focus-visible {
|
||||
@include rounded-outline();
|
||||
@include rounded-outline;
|
||||
}
|
||||
|
||||
.mat-ripple-element {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.cdk-keyboard-focused {
|
||||
.mat-button-focus-overlay {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mat-checkbox-ripple {
|
||||
@include rounded-outline();
|
||||
@include rounded-outline;
|
||||
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
left: calc(50% - 11px);
|
||||
@@ -44,34 +29,41 @@
|
||||
}
|
||||
|
||||
.mat-list-base .mat-list-option {
|
||||
&:focus-visible {
|
||||
background-color: white;
|
||||
.mat-list-item-content {
|
||||
@include rounded-border();
|
||||
}
|
||||
}
|
||||
.mat-list-item-content {
|
||||
@include rounded-border(transparent);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
background-color: white;
|
||||
|
||||
.mat-list-item-content {
|
||||
@include rounded-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.acs-close-members-container {
|
||||
.mat-icon-button {
|
||||
outline: none;
|
||||
line-height: 36px !important;
|
||||
|
||||
@include rounded-border(transparent);
|
||||
|
||||
&:focus-visible {
|
||||
@include rounded-border();
|
||||
@include rounded-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-search-user-button, .app-search-button {
|
||||
line-height: 36px !important;
|
||||
|
||||
@include rounded-border(transparent);
|
||||
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
@include rounded-border();
|
||||
|
||||
@include rounded-border;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -79,11 +71,15 @@
|
||||
.mat-menu-ripple {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include rounded-border(transparent);
|
||||
|
||||
&:focus-visible {
|
||||
@include rounded-border();
|
||||
@include rounded-border;
|
||||
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
&.cdk-keyboard-focused:not([disabled]) {
|
||||
background-color: white;
|
||||
}
|
||||
@@ -96,21 +92,12 @@
|
||||
.mat-option {
|
||||
&.cdk-keyboard-focused {
|
||||
.mat-option-ripple {
|
||||
@include rounded-outline();
|
||||
@include rounded-outline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-slide-toggle {
|
||||
&.mat-primary.mat-checked:not(.mat-disabled) {
|
||||
.mat-slide-toggle-bar {
|
||||
background-color: var(--theme-blue-button-color);
|
||||
}
|
||||
.mat-slide-toggle-thumb {
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-slide-toggle-thumb {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
@@ -130,11 +117,22 @@
|
||||
.mat-slide-toggle-ripple {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.cdk-keyboard-focused {
|
||||
.mat-slide-toggle-bar {
|
||||
outline: 2px solid var(--theme-blue-button-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.mat-primary.mat-checked:not(.mat-disabled) {
|
||||
.mat-slide-toggle-bar {
|
||||
background-color: var(--theme-blue-button-color);
|
||||
}
|
||||
|
||||
.mat-slide-toggle-thumb {
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-stroked-button, .mat-flat-button {
|
||||
@@ -149,14 +147,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.mat-option {
|
||||
&.cdk-keyboard-focused {
|
||||
.mat-option-ripple {
|
||||
@include rounded-outline();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-datetimepicker-calendar-body-active .mat-datetimepicker-calendar-body-cell-content {
|
||||
outline: 2px solid var(--theme-datetimepicker-cell-focus-border);
|
||||
}
|
||||
@@ -165,28 +155,34 @@
|
||||
background-color: var(--theme-datetimepicker-cell-background) !important;
|
||||
}
|
||||
|
||||
.mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected {
|
||||
background-color: var(--theme-datetimepicker-selected-date-background);
|
||||
}
|
||||
|
||||
.mat-datetimepicker-calendar-body-active .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected {
|
||||
background-color: var(--theme-datetimepicker-cell-focus-background);
|
||||
color: var(--theme-datetimepicker-font-color);
|
||||
}
|
||||
|
||||
.mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected {
|
||||
background-color: var(--theme-datetimepicker-selected-date-background);
|
||||
}
|
||||
|
||||
.mat-expansion-panel .mat-expansion-panel-header {
|
||||
border: 2px solid transparent;
|
||||
|
||||
.mat-button {
|
||||
outline: none;
|
||||
|
||||
@include rounded-border(transparent);
|
||||
|
||||
&:focus-visible {
|
||||
@include rounded-border();
|
||||
@include rounded-border;
|
||||
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
&.cdk-keyboard-focused:not([aria-disabled=true]) {
|
||||
|
||||
&.cdk-keyboard-focused:not([aria-disabled="true"]) {
|
||||
background-color: white;
|
||||
@include rounded-border();
|
||||
|
||||
@include rounded-border;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -209,4 +205,24 @@
|
||||
.adf-filter-button {
|
||||
margin-left: -2px !important;
|
||||
}
|
||||
|
||||
.adf-pagination {
|
||||
&__perpage-block,
|
||||
&__actualinfo-block {
|
||||
/* stylelint-disable-next-line no-descending-specificity */
|
||||
.mat-icon-button {
|
||||
left: 3px;
|
||||
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&.cdk-keyboard-focused {
|
||||
.mat-icon {
|
||||
@include rounded-outline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
@use '@angular/material' as mat;
|
||||
@import '@alfresco/adf-core/theming';
|
||||
|
||||
@import 'custom-theme';
|
||||
@import 'variables/variables';
|
||||
|
||||
@include custom-theme($custom-theme);
|
||||
|
||||
$contrast-gray: #646569;
|
||||
|
||||
@@ -1,23 +1,24 @@
|
||||
/* stylelint-disable scss/no-global-function-names */
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
$warn: map-get($custom-theme, warn);
|
||||
$accent: map-get($custom-theme, accent);
|
||||
$primary: map-get($custom-theme, primary);
|
||||
|
||||
$foreground: map-get($custom-theme, foreground);
|
||||
$background: map-get($custom-theme, background);
|
||||
|
||||
//Custom variables - ACA specific styling:
|
||||
// Custom variables - ACA specific styling:
|
||||
$data-table-thumbnail-width: 35px;
|
||||
$data-table-cell-min-width: 150px;
|
||||
$data-table-cell-min-width--no-grow: 120px;
|
||||
$data-table-cell-min-width--file-size: 110px !important;
|
||||
$data-table-cell-min-width-no-grow: 120px;
|
||||
$data-table-cell-min-width-file-size: 110px !important;
|
||||
|
||||
// Upload drag
|
||||
$adf-upload-dragging-color: unset;
|
||||
$adf-upload-dragging-border: 1px solid #00bcd4;
|
||||
$adf-upload-dragging-background: #e0f7fa;
|
||||
$adf-upload-dragging-level1-color: unset;
|
||||
$adf-upload-dragging-level1-border: none;
|
||||
|
||||
$grey-background: rgba(33, 33, 33, 0.12);
|
||||
$grey-text-background: rgba(33, 33, 33, 0.05);
|
||||
$grey-hover-background: rgba(33, 33, 33, 0.24);
|
||||
@@ -25,13 +26,14 @@ $blue-save-button-background: #1F74DB;
|
||||
$black-heading: #4e4c4c;
|
||||
$grey-dropdown-background: #eee;
|
||||
$grey-divider: rgba(0,0,0,.22);
|
||||
$pagination-background-color: #ffffff;
|
||||
$pagination-background-color: #fff;
|
||||
$datetimepicker-font-color: rgba(black, 0.87);
|
||||
$datetimepicker-selected-date-background: #2254b2;
|
||||
$datetimepicker-cell-background-color: #ffffff;
|
||||
$datetimepicker-cell-background-color: #fff;
|
||||
$datetimepicker-cell-focus-border-color: #1F74DB;
|
||||
$datetimepicker-cell-focus-background-color: rgba(33, 33, 33, 0.12);
|
||||
|
||||
// CSS Variables
|
||||
$defaults: (
|
||||
--theme-primary-color: mat.get-color-from-palette($primary),
|
||||
--theme-primary-color-default-contrast: mat.get-color-from-palette($primary, default-contrast),
|
||||
@@ -61,7 +63,7 @@ $defaults: (
|
||||
--theme-grey-divider-color: $grey-divider,
|
||||
--theme-pagination-background-color: $pagination-background-color,
|
||||
--theme-about-panel-border-color: $grey-background,
|
||||
--theme-about-panel-background-color: #ffffff,
|
||||
--theme-about-panel-background-color: #fff,
|
||||
--theme-about-panel-title-color: #212121,
|
||||
--theme-datetimepicker-font-color: $datetimepicker-font-color,
|
||||
--theme-datetimepicker-selected-date-background: $datetimepicker-selected-date-background,
|
||||
|
||||
Reference in New Issue
Block a user