composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-05-01 06:28:46 +02:00
Code Issues Packages Projects Releases Wiki Activity

N°3523 Adjust buttons and links colors to make application more accessible

Browse Source
This commit is contained in:
Stephen Abello
2021-11-23 10:38:18 +01:00
parent f77b3bedaf
commit e11d5c142c
6 changed files with 111 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
css/backoffice/components/_button.scss
View File

@@ -54,22 +54,22 @@ $ibo-button-colors: (
/* Primary action does not have the colors from the primary brand color, at least not for now */
'primary': (
'': (
$ibo-color-cyan-700,
$ibo-color-white-100,
$ibo-button--box-shadow-bottom $ibo-color-cyan-900,
$ibo-color-cyan-800,
$ibo-color-white-100,
$ibo-button--box-shadow-bottom $ibo-color-cyan-950,
$ibo-color-cyan-900,
),
':hover': (
$ibo-color-cyan-800,
$ibo-color-cyan-900,
$ibo-color-white-100,
$ibo-button--box-shadow-bottom $ibo-color-cyan-900,
$ibo-color-cyan-800,
$ibo-button--box-shadow-bottom $ibo-color-cyan-950,
$ibo-color-cyan-900,
),
':active': (
$ibo-color-cyan-800,
$ibo-color-cyan-900,
$ibo-color-white-100,
$ibo-button--box-shadow-top $ibo-color-cyan-900 #{','} $ibo-button--box-shadow-bottom $ibo-color-cyan-800,
$ibo-color-cyan-800,
$ibo-button--box-shadow-top $ibo-color-cyan-950 #{','} $ibo-button--box-shadow-bottom $ibo-color-cyan-900,
$ibo-color-cyan-900,
),
':disabled': (
$ibo-color-grey-300,
@@ -106,22 +106,22 @@ $ibo-button-colors: (
),
'danger': (
'': (
$ibo-color-danger-600,
$ibo-color-white-100,
$ibo-button--box-shadow-bottom $ibo-color-danger-800,
$ibo-color-danger-700,
$ibo-color-white-100,
$ibo-button--box-shadow-bottom $ibo-color-danger-900,
$ibo-color-danger-800,
),
':hover': (
$ibo-color-danger-700,
$ibo-color-danger-800,
$ibo-color-white-100,
$ibo-button--box-shadow-bottom $ibo-color-danger-800,
$ibo-color-danger-700,
$ibo-button--box-shadow-bottom $ibo-color-danger-900,
$ibo-color-danger-800,
),
':active': (
$ibo-color-danger-700,
$ibo-color-danger-800,
$ibo-color-white-100,
$ibo-button--box-shadow-top $ibo-color-danger-800 #{','} $ibo-button--box-shadow-bottom $ibo-color-danger-700,
$ibo-color-danger-700,
$ibo-button--box-shadow-top $ibo-color-danger-900 #{','} $ibo-button--box-shadow-bottom $ibo-color-danger-800,
$ibo-color-danger-800,
),
':disabled': (
$ibo-color-grey-300,
@@ -132,22 +132,22 @@ $ibo-button-colors: (
),
'success': (
'': (
$ibo-color-success-700,
$ibo-color-white-100,
$ibo-button--box-shadow-bottom $ibo-color-success-900,
$ibo-color-success-800,
$ibo-color-white-100,
$ibo-button--box-shadow-bottom $ibo-color-success-950,
$ibo-color-success-900,
),
':hover': (
$ibo-color-success-800,
$ibo-color-success-900,
$ibo-color-white-100,
$ibo-button--box-shadow-bottom $ibo-color-success-900,
$ibo-color-success-800,
$ibo-button--box-shadow-bottom $ibo-color-success-950,
$ibo-color-success-900,
),
':active': (
$ibo-color-success-800,
$ibo-color-success-900,
$ibo-color-white-100,
$ibo-button--box-shadow-top $ibo-color-success-900 #{','} $ibo-button--box-shadow-bottom $ibo-color-success-800,
$ibo-color-success-800,
$ibo-button--box-shadow-top $ibo-color-success-950 #{','} $ibo-button--box-shadow-bottom $ibo-color-success-900,
$ibo-color-success-900,
),
':disabled': (
$ibo-color-grey-300,
@@ -159,22 +159,22 @@ $ibo-button-colors: (
/* Colors */
'red': (
'': (
$ibo-color-red-600,
$ibo-color-white-100,
$ibo-button--box-shadow-bottom $ibo-color-red-800,
$ibo-color-red-700,
$ibo-color-white-100,
$ibo-button--box-shadow-bottom $ibo-color-red-900,
$ibo-color-red-800,
),
':hover': (
$ibo-color-red-700,
$ibo-color-red-800,
$ibo-color-white-100,
$ibo-button--box-shadow-bottom $ibo-color-red-800,
$ibo-color-red-700,
$ibo-button--box-shadow-bottom $ibo-color-red-900,
$ibo-color-red-800,
),
':active': (
$ibo-color-red-700,
$ibo-color-red-800,
$ibo-color-white-100,
$ibo-button--box-shadow-top $ibo-color-red-800 #{','} $ibo-button--box-shadow-bottom $ibo-color-red-700,
$ibo-color-red-700,
$ibo-button--box-shadow-top $ibo-color-red-900 #{','} $ibo-button--box-shadow-bottom $ibo-color-red-800,
$ibo-color-red-800,
),
':disabled': (
$ibo-color-grey-300,
@@ -185,22 +185,22 @@ $ibo-button-colors: (
),
'green': (
'': (
$ibo-color-green-700,
$ibo-color-white-100,
$ibo-button--box-shadow-bottom $ibo-color-green-900,
$ibo-color-green-800,
$ibo-color-white-100,
$ibo-button--box-shadow-bottom $ibo-color-green-950,
$ibo-color-green-900,
),
':hover': (
$ibo-color-green-800,
$ibo-color-green-900,
$ibo-color-white-100,
$ibo-button--box-shadow-bottom $ibo-color-green-900,
$ibo-color-green-800,
$ibo-button--box-shadow-bottom $ibo-color-green-950,
$ibo-color-green-900,
),
':active': (
$ibo-color-green-800,
$ibo-color-green-900,
$ibo-color-white-100,
$ibo-button--box-shadow-top $ibo-color-green-900 #{','} $ibo-button--box-shadow-bottom $ibo-color-green-800,
$ibo-color-green-800,
$ibo-button--box-shadow-top $ibo-color-green-950 #{','} $ibo-button--box-shadow-bottom $ibo-color-green-900,
$ibo-color-green-900,
),
':disabled': (
$ibo-color-grey-300,
@@ -211,22 +211,22 @@ $ibo-button-colors: (
),
'cyan': (
'': (
$ibo-color-cyan-500,
$ibo-color-cyan-800,
$ibo-color-white-100,
$ibo-button--box-shadow-bottom $ibo-color-cyan-900,
$ibo-button--box-shadow-bottom $ibo-color-cyan-950,
$ibo-color-cyan-900,
),
':hover': (
$ibo-color-cyan-700,
$ibo-color-cyan-900,
$ibo-color-white-100,
$ibo-button--box-shadow-bottom $ibo-color-cyan-900,
$ibo-button--box-shadow-bottom $ibo-color-cyan-950,
$ibo-color-cyan-900,
),
':active': (
$ibo-color-cyan-700,
$ibo-color-cyan-900,
$ibo-color-white-100,
$ibo-button--box-shadow-top $ibo-color-cyan-900 #{','} $ibo-button--box-shadow-bottom $ibo-color-cyan-700,
$ibo-color-cyan-700,
$ibo-button--box-shadow-top $ibo-color-cyan-950 #{','} $ibo-button--box-shadow-bottom $ibo-color-cyan-900,
$ibo-color-cyan-900,
),
':disabled': (
$ibo-color-grey-300,
@@ -268,9 +268,9 @@ $ibo-button-colors: (
'primary': (
'': (
transparent,
$ibo-color-cyan-800,
$ibo-color-cyan-900,
$ibo-button--box-shadow-bottom transparent,
$ibo-color-cyan-700,
$ibo-color-cyan-800,
),
':hover': (
$ibo-color-white-100,

12
css/backoffice/components/_global-search.scss
View File

@@ -8,6 +8,10 @@ $ibo-global-search--head--background-color: $ibo-color-white-100 !default;
$ibo-global-search--icon-padding-x: 16px !default;
$ibo-global-search--icon-padding-y: 0 !default;
$ibo-global-search--icon--color: $ibo-color-primary-600 !default;
$ibo-global-search--icon--color--on-hover: $ibo-color-primary-700 !default;
$ibo-global-search--icon--color--on-active: $ibo-color-primary-800 !default;
$ibo-global-search--input--padding: 0 !default;
$ibo-global-search--input--padding-x--is-opened: 8px !default;
@@ -81,9 +85,17 @@ $ibo-global-search--compartment--placeholder-hint--text-color: $ibo-color-grey-7
background-color: $ibo-global-search--head--background-color;
}
.ibo-global-search--icon{
color: $ibo-global-search--icon--color;
align-self: center;
padding: $ibo-global-search--icon-padding-y $ibo-global-search--icon-padding-x;
@extend %ibo-font-ral-nor-400;
&:hover{
color: $ibo-global-search--icon--color--on-hover;
}
&:active{
color: $ibo-global-search--icon--color--on-active;
}
}
.ibo-global-search--input{
padding: $ibo-global-search--input--padding;

11
css/backoffice/components/_quick-create.scss
View File

@@ -8,6 +8,9 @@ $ibo-quick-create--head--background-color: $ibo-color-white-100 !default;
$ibo-quick-create--icon-padding-x: 16px !default;
$ibo-quick-create--icon-padding-y: 0 !default;
$ibo-quick-create--icon--color: $ibo-color-primary-600 !default;
$ibo-quick-create--icon--color--on-hover: $ibo-color-primary-700 !default;
$ibo-quick-create--icon--color--on-active: $ibo-color-primary-800 !default;
$ibo-quick-create--input--padding: 0 default;
$ibo-quick-create--input--padding-x--is-opened: 8px !default;
@@ -91,9 +94,17 @@ $ibo-quick-create--compartment--placeholder-hint--text-color: $ibo-color-grey-70
background-color: $ibo-quick-create--head--background-color;
}
.ibo-quick-create--icon{
color: $ibo-quick-create--icon--color;
align-self: center;
padding: $ibo-quick-create--icon-padding-y $ibo-quick-create--icon-padding-x;
@extend %ibo-font-ral-nor-400;
&:hover{
color: $ibo-quick-create--icon--color--on-hover;
}
&:active{
color: $ibo-quick-create--icon--color--on-active;
}
}
.ibo-quick-create--input{
width: $ibo-quick-create--input--width;