N°2847 Add disabled state for Button component

This commit is contained in:
Stephen Abello
2020-09-10 15:26:17 +02:00
parent 580e8ffa08
commit 163c1ebc91
4 changed files with 97 additions and 1 deletions

View File

@@ -23,6 +23,11 @@ $ibo-button-colors: (
$ibo-color-grey-900,
$ibo-button--box-shadow-top $ibo-color-secondary-300 #{','} $ibo-button--box-shadow-bottom $ibo-color-secondary-200,
),
':disabled': (
$ibo-color-grey-300,
$ibo-color-grey-700,
$ibo-button--box-shadow-top $ibo-color-grey-300,
),
),
'primary': (
'': (
@@ -40,6 +45,11 @@ $ibo-button-colors: (
$ibo-color-grey-900,
$ibo-button--box-shadow-top $ibo-color-primary-800 #{','} $ibo-button--box-shadow-bottom $ibo-color-primary-600,
),
':disabled': (
$ibo-color-grey-300,
$ibo-color-grey-700,
$ibo-button--box-shadow-top $ibo-color-grey-300,
),
),
'secondary': (
'': (
@@ -57,6 +67,11 @@ $ibo-button-colors: (
$ibo-color-grey-900,
$ibo-button--box-shadow-top $ibo-color-secondary-300 #{','} $ibo-button--box-shadow-bottom $ibo-color-secondary-200,
),
':disabled': (
$ibo-color-grey-300,
$ibo-color-grey-700,
$ibo-button--box-shadow-top $ibo-color-grey-300,
),
),
'red': (
'': (
@@ -74,6 +89,11 @@ $ibo-button-colors: (
$ibo-color-white-100,
$ibo-button--box-shadow-top $ibo-color-red-800 #{','} $ibo-button--box-shadow-bottom $ibo-color-red-700,
),
':disabled': (
$ibo-color-grey-300,
$ibo-color-grey-700,
$ibo-button--box-shadow-top $ibo-color-grey-300,
),
),
'green': (
'': (
@@ -91,6 +111,11 @@ $ibo-button-colors: (
$ibo-color-white-100,
$ibo-button--box-shadow-top $ibo-color-green-900 #{','} $ibo-button--box-shadow-bottom $ibo-color-green-800,
),
':disabled': (
$ibo-color-grey-300,
$ibo-color-grey-700,
$ibo-button--box-shadow-top $ibo-color-grey-300,
),
),
'cyan': (
'': (
@@ -108,6 +133,11 @@ $ibo-button-colors: (
$ibo-color-white-100,
$ibo-button--box-shadow-top $ibo-color-cyan-900 #{','} $ibo-button--box-shadow-bottom $ibo-color-cyan-700,
),
':disabled': (
$ibo-color-grey-300,
$ibo-color-grey-700,
$ibo-button--box-shadow-top $ibo-color-grey-300,
),
)
),
'alternative': (
@@ -127,6 +157,11 @@ $ibo-button-colors: (
$ibo-color-grey-900,
$ibo-button--box-shadow-top $ibo-color-secondary-200 #{','} $ibo-button--box-shadow-bottom $ibo-color-secondary-100,
),
':disabled': (
transparent,
$ibo-color-grey-600,
$ibo-button--box-shadow-top transparent,
),
),
'primary': (
'': (
@@ -144,6 +179,11 @@ $ibo-button-colors: (
$ibo-color-grey-900,
$ibo-button--box-shadow-top $ibo-color-primary-700 #{','} $ibo-button--box-shadow-bottom $ibo-color-primary-300,
),
':disabled': (
transparent,
$ibo-color-grey-600,
$ibo-button--box-shadow-top transparent,
),
),
'secondary': (
'': (
@@ -161,6 +201,11 @@ $ibo-button-colors: (
$ibo-color-grey-900,
$ibo-button--box-shadow-top $ibo-color-secondary-200 #{','} $ibo-button--box-shadow-bottom $ibo-color-secondary-100,
),
':disabled': (
transparent,
$ibo-color-grey-600,
$ibo-button--box-shadow-top transparent,
),
),
'red': (
'': (
@@ -178,6 +223,11 @@ $ibo-button-colors: (
$ibo-color-red-900,
$ibo-button--box-shadow-top $ibo-color-red-700 #{','} $ibo-button--box-shadow-bottom $ibo-color-red-200,
),
':disabled': (
transparent,
$ibo-color-grey-600,
$ibo-button--box-shadow-top transparent,
),
),
'green': (
'': (
@@ -195,6 +245,11 @@ $ibo-button-colors: (
$ibo-color-green-900,
$ibo-button--box-shadow-top $ibo-color-green-700 #{','} $ibo-button--box-shadow-bottom $ibo-color-green-100,
),
':disabled': (
transparent,
$ibo-color-grey-600,
$ibo-button--box-shadow-top transparent,
),
),
'cyan': (
'': (
@@ -212,6 +267,11 @@ $ibo-button-colors: (
$ibo-color-cyan-900,
$ibo-button--box-shadow-top $ibo-color-cyan-800 #{','} $ibo-button--box-shadow-bottom $ibo-color-cyan-100,
),
':disabled': (
transparent,
$ibo-color-grey-600,
$ibo-button--box-shadow-top transparent,
),
),
)
) !default;