mirror of
https://github.com/Combodo/iTop.git
synced 2026-02-13 15:34:12 +01:00
498 lines
23 KiB
SCSS
498 lines
23 KiB
SCSS
/*
|
|
* @copyright Copyright (C) 2010-2021 Combodo SARL
|
|
* @license http://opensource.org/licenses/AGPL-3.0
|
|
*/
|
|
|
|
$ibo-button--padding-y: 6px !default;
|
|
$ibo-button--padding-x: 9px !default;
|
|
$ibo-button--border: 0 !default;
|
|
$ibo-button--border-radius: $ibo-border-radius-400 !default;
|
|
$ibo-button--box-shadow-bottom: 0px 2px 0px !default;
|
|
$ibo-button--box-shadow-top: inset 0px 2px 0px !default;
|
|
|
|
$ibo-button--label--margin-left: $ibo-spacing-200 !default;
|
|
|
|
$ibo-button--vertical-align--margin-bottom: $ibo-spacing-200 !default;
|
|
$ibo-button--vertical-align--margin-top: $ibo-spacing-200 !default;
|
|
|
|
/**
|
|
* - Text color
|
|
* - Background color
|
|
* - Box shadow
|
|
* - Accent color
|
|
*/
|
|
$ibo-button-colors: (
|
|
'regular': (
|
|
/* Semantics */
|
|
'neutral': (
|
|
'': (
|
|
$ibo-color-secondary-100,
|
|
$ibo-color-grey-900,
|
|
$ibo-button--box-shadow-bottom $ibo-color-secondary-300,
|
|
$ibo-color-secondary-300,
|
|
),
|
|
':hover': (
|
|
$ibo-color-secondary-200,
|
|
$ibo-color-grey-900,
|
|
$ibo-button--box-shadow-bottom $ibo-color-secondary-300,
|
|
$ibo-color-secondary-300,
|
|
),
|
|
':active': (
|
|
$ibo-color-secondary-200,
|
|
$ibo-color-grey-900,
|
|
$ibo-button--box-shadow-top $ibo-color-secondary-300 #{','} $ibo-button--box-shadow-bottom $ibo-color-secondary-200,
|
|
$ibo-color-secondary-200,
|
|
),
|
|
':disabled': (
|
|
$ibo-color-grey-300,
|
|
$ibo-color-grey-700,
|
|
$ibo-button--box-shadow-top $ibo-color-grey-300,
|
|
$ibo-color-grey-500,
|
|
),
|
|
),
|
|
/* Primary action does not have the colors from the primary brand color, at least not for now */
|
|
'primary': (
|
|
'': (
|
|
$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-900,
|
|
$ibo-color-white-100,
|
|
$ibo-button--box-shadow-bottom $ibo-color-cyan-950,
|
|
$ibo-color-cyan-900,
|
|
),
|
|
':active': (
|
|
$ibo-color-cyan-900,
|
|
$ibo-color-white-100,
|
|
$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,
|
|
$ibo-color-grey-700,
|
|
$ibo-button--box-shadow-top $ibo-color-grey-300,
|
|
$ibo-color-grey-500,
|
|
),
|
|
),
|
|
'secondary': (
|
|
'': (
|
|
$ibo-color-secondary-100,
|
|
$ibo-color-grey-900,
|
|
$ibo-button--box-shadow-bottom $ibo-color-secondary-300,
|
|
$ibo-color-secondary-300,
|
|
),
|
|
':hover': (
|
|
$ibo-color-secondary-200,
|
|
$ibo-color-grey-900,
|
|
$ibo-button--box-shadow-bottom $ibo-color-secondary-300,
|
|
$ibo-color-secondary-300,
|
|
),
|
|
':active': (
|
|
$ibo-color-secondary-200,
|
|
$ibo-color-grey-900,
|
|
$ibo-button--box-shadow-top $ibo-color-secondary-300 #{','} $ibo-button--box-shadow-bottom $ibo-color-secondary-200,
|
|
$ibo-color-secondary-200,
|
|
),
|
|
':disabled': (
|
|
$ibo-color-grey-300,
|
|
$ibo-color-grey-700,
|
|
$ibo-button--box-shadow-top $ibo-color-grey-300,
|
|
$ibo-color-grey-500,
|
|
),
|
|
),
|
|
'danger': (
|
|
'': (
|
|
$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-800,
|
|
$ibo-color-white-100,
|
|
$ibo-button--box-shadow-bottom $ibo-color-danger-900,
|
|
$ibo-color-danger-800,
|
|
),
|
|
':active': (
|
|
$ibo-color-danger-800,
|
|
$ibo-color-white-100,
|
|
$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,
|
|
$ibo-color-grey-700,
|
|
$ibo-button--box-shadow-top $ibo-color-grey-300,
|
|
$ibo-color-grey-500,
|
|
),
|
|
),
|
|
'success': (
|
|
'': (
|
|
$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-900,
|
|
$ibo-color-white-100,
|
|
$ibo-button--box-shadow-bottom $ibo-color-success-950,
|
|
$ibo-color-success-900,
|
|
),
|
|
':active': (
|
|
$ibo-color-success-900,
|
|
$ibo-color-white-100,
|
|
$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,
|
|
$ibo-color-grey-700,
|
|
$ibo-button--box-shadow-top $ibo-color-grey-300,
|
|
$ibo-color-grey-500,
|
|
),
|
|
),
|
|
/* Colors */
|
|
'red': (
|
|
'': (
|
|
$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-800,
|
|
$ibo-color-white-100,
|
|
$ibo-button--box-shadow-bottom $ibo-color-red-900,
|
|
$ibo-color-red-800,
|
|
),
|
|
':active': (
|
|
$ibo-color-red-800,
|
|
$ibo-color-white-100,
|
|
$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,
|
|
$ibo-color-grey-700,
|
|
$ibo-button--box-shadow-top $ibo-color-grey-300,
|
|
$ibo-color-grey-500,
|
|
),
|
|
),
|
|
'green': (
|
|
'': (
|
|
$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-900,
|
|
$ibo-color-white-100,
|
|
$ibo-button--box-shadow-bottom $ibo-color-green-950,
|
|
$ibo-color-green-900,
|
|
),
|
|
':active': (
|
|
$ibo-color-green-900,
|
|
$ibo-color-white-100,
|
|
$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,
|
|
$ibo-color-grey-700,
|
|
$ibo-button--box-shadow-top $ibo-color-grey-300,
|
|
$ibo-color-grey-500,
|
|
),
|
|
),
|
|
'cyan': (
|
|
'': (
|
|
$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-900,
|
|
$ibo-color-white-100,
|
|
$ibo-button--box-shadow-bottom $ibo-color-cyan-950,
|
|
$ibo-color-cyan-900,
|
|
),
|
|
':active': (
|
|
$ibo-color-cyan-900,
|
|
$ibo-color-white-100,
|
|
$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,
|
|
$ibo-color-grey-700,
|
|
$ibo-button--box-shadow-top $ibo-color-grey-300,
|
|
$ibo-color-grey-500,
|
|
),
|
|
)
|
|
),
|
|
'alternative': (
|
|
/* Semantics */
|
|
'neutral': (
|
|
'': (
|
|
transparent,
|
|
$ibo-color-grey-900,
|
|
$ibo-button--box-shadow-bottom transparent,
|
|
$ibo-color-grey-800,
|
|
),
|
|
':hover': (
|
|
$ibo-color-secondary-100,
|
|
$ibo-color-grey-900,
|
|
$ibo-button--box-shadow-bottom $ibo-color-secondary-100,
|
|
$ibo-color-grey-800,
|
|
),
|
|
':active': (
|
|
$ibo-color-secondary-100,
|
|
$ibo-color-grey-900,
|
|
$ibo-button--box-shadow-top $ibo-color-secondary-200 #{','} $ibo-button--box-shadow-bottom $ibo-color-secondary-100,
|
|
$ibo-color-grey-800,
|
|
),
|
|
':disabled': (
|
|
transparent,
|
|
$ibo-color-grey-600,
|
|
$ibo-button--box-shadow-top transparent,
|
|
$ibo-color-grey-500,
|
|
),
|
|
),
|
|
/* Primary action does not have the colors from the primary brand color, at least not for now */
|
|
'primary': (
|
|
'': (
|
|
transparent,
|
|
$ibo-color-cyan-900,
|
|
$ibo-button--box-shadow-bottom transparent,
|
|
$ibo-color-cyan-800,
|
|
),
|
|
':hover': (
|
|
$ibo-color-white-100,
|
|
$ibo-color-grey-900,
|
|
$ibo-button--box-shadow-bottom $ibo-color-white-100,
|
|
$ibo-color-grey-800,
|
|
),
|
|
':active': (
|
|
$ibo-color-white-100,
|
|
$ibo-color-grey-900,
|
|
$ibo-button--box-shadow-top $ibo-color-white-100 #{','} $ibo-button--box-shadow-bottom $ibo-color-white-100,
|
|
$ibo-color-grey-800,
|
|
),
|
|
':disabled': (
|
|
transparent,
|
|
$ibo-color-grey-600,
|
|
$ibo-button--box-shadow-top transparent,
|
|
$ibo-color-grey-500,
|
|
),
|
|
),
|
|
'secondary': (
|
|
'': (
|
|
transparent,
|
|
$ibo-color-grey-900,
|
|
$ibo-button--box-shadow-bottom transparent,
|
|
$ibo-color-grey-800,
|
|
),
|
|
':hover': (
|
|
$ibo-color-secondary-100,
|
|
$ibo-color-grey-900,
|
|
$ibo-button--box-shadow-bottom $ibo-color-secondary-100,
|
|
$ibo-color-grey-800,
|
|
),
|
|
':active': (
|
|
$ibo-color-secondary-100,
|
|
$ibo-color-grey-900,
|
|
$ibo-button--box-shadow-top $ibo-color-secondary-200 #{','} $ibo-button--box-shadow-bottom $ibo-color-secondary-100,
|
|
$ibo-color-grey-800,
|
|
),
|
|
':disabled': (
|
|
transparent,
|
|
$ibo-color-grey-600,
|
|
$ibo-button--box-shadow-top transparent,
|
|
$ibo-color-grey-500,
|
|
),
|
|
),
|
|
'danger': (
|
|
'': (
|
|
transparent,
|
|
$ibo-color-danger-700,
|
|
$ibo-button--box-shadow-bottom transparent,
|
|
$ibo-color-danger-600,
|
|
),
|
|
':hover': (
|
|
$ibo-color-danger-200,
|
|
$ibo-color-danger-900,
|
|
$ibo-button--box-shadow-bottom $ibo-color-danger-200,
|
|
$ibo-color-danger-800,
|
|
),
|
|
':active': (
|
|
$ibo-color-danger-200,
|
|
$ibo-color-danger-900,
|
|
$ibo-button--box-shadow-top $ibo-color-danger-700 #{','} $ibo-button--box-shadow-bottom $ibo-color-danger-200,
|
|
$ibo-color-danger-800,
|
|
),
|
|
':disabled': (
|
|
transparent,
|
|
$ibo-color-grey-600,
|
|
$ibo-button--box-shadow-top transparent,
|
|
$ibo-color-grey-500,
|
|
),
|
|
),
|
|
'success': (
|
|
'': (
|
|
transparent,
|
|
$ibo-color-success-900,
|
|
$ibo-button--box-shadow-bottom transparent,
|
|
$ibo-color-success-800,
|
|
),
|
|
':hover': (
|
|
$ibo-color-success-100,
|
|
$ibo-color-success-900,
|
|
$ibo-button--box-shadow-bottom $ibo-color-success-100,
|
|
$ibo-color-success-800,
|
|
),
|
|
':active': (
|
|
$ibo-color-success-100,
|
|
$ibo-color-success-900,
|
|
$ibo-button--box-shadow-top $ibo-color-success-700 #{','} $ibo-button--box-shadow-bottom $ibo-color-success-100,
|
|
$ibo-color-success-800,
|
|
),
|
|
':disabled': (
|
|
transparent,
|
|
$ibo-color-grey-600,
|
|
$ibo-button--box-shadow-top transparent,
|
|
$ibo-color-grey-500,
|
|
),
|
|
),
|
|
/* Colors */
|
|
'red': (
|
|
'': (
|
|
transparent,
|
|
$ibo-color-red-700,
|
|
$ibo-button--box-shadow-bottom transparent,
|
|
$ibo-color-red-600,
|
|
),
|
|
':hover': (
|
|
$ibo-color-red-200,
|
|
$ibo-color-red-900,
|
|
$ibo-button--box-shadow-bottom $ibo-color-red-200,
|
|
$ibo-color-red-800,
|
|
),
|
|
':active': (
|
|
$ibo-color-red-200,
|
|
$ibo-color-red-900,
|
|
$ibo-button--box-shadow-top $ibo-color-red-700 #{','} $ibo-button--box-shadow-bottom $ibo-color-red-200,
|
|
$ibo-color-red-800,
|
|
),
|
|
':disabled': (
|
|
transparent,
|
|
$ibo-color-grey-600,
|
|
$ibo-button--box-shadow-top transparent,
|
|
$ibo-color-grey-500,
|
|
),
|
|
),
|
|
'green': (
|
|
'': (
|
|
transparent,
|
|
$ibo-color-green-900,
|
|
$ibo-button--box-shadow-bottom transparent,
|
|
$ibo-color-green-800,
|
|
),
|
|
':hover': (
|
|
$ibo-color-green-100,
|
|
$ibo-color-green-900,
|
|
$ibo-button--box-shadow-bottom $ibo-color-green-100,
|
|
$ibo-color-green-800,
|
|
),
|
|
':active': (
|
|
$ibo-color-green-100,
|
|
$ibo-color-green-900,
|
|
$ibo-button--box-shadow-top $ibo-color-green-700 #{','} $ibo-button--box-shadow-bottom $ibo-color-green-100,
|
|
$ibo-color-green-800,
|
|
),
|
|
':disabled': (
|
|
transparent,
|
|
$ibo-color-grey-600,
|
|
$ibo-button--box-shadow-top transparent,
|
|
$ibo-color-grey-500,
|
|
),
|
|
),
|
|
'cyan': (
|
|
'': (
|
|
transparent,
|
|
$ibo-color-cyan-900,
|
|
$ibo-button--box-shadow-bottom transparent,
|
|
$ibo-color-cyan-800,
|
|
),
|
|
':hover': (
|
|
$ibo-color-cyan-100,
|
|
$ibo-color-cyan-900,
|
|
$ibo-button--box-shadow-bottom $ibo-color-cyan-100,
|
|
$ibo-color-cyan-800,
|
|
),
|
|
':active': (
|
|
$ibo-color-cyan-100,
|
|
$ibo-color-cyan-900,
|
|
$ibo-button--box-shadow-top $ibo-color-cyan-800 #{','} $ibo-button--box-shadow-bottom $ibo-color-cyan-100,
|
|
$ibo-color-cyan-800,
|
|
),
|
|
':disabled': (
|
|
transparent,
|
|
$ibo-color-grey-600,
|
|
$ibo-button--box-shadow-top transparent,
|
|
$ibo-color-grey-500,
|
|
),
|
|
),
|
|
)
|
|
) !default;
|
|
@each $sType, $aColors in $ibo-button-colors {
|
|
@each $sColor, $aPseudoclasses in $aColors {
|
|
@each $sPseudoclass, $sAttributes in $aPseudoclasses {
|
|
$bg-color: nth($sAttributes, 1);
|
|
$font-color: nth($sAttributes, 2);
|
|
$box-shadow: nth($sAttributes, 3);
|
|
.ibo-button.ibo-is-#{$sType}.ibo-is-#{$sColor}#{$sPseudoclass} {
|
|
background-color: $bg-color;
|
|
color: $font-color;
|
|
box-shadow: $box-shadow;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.ibo-button {
|
|
position: relative;
|
|
display: inline-block; /* Used to allow truncated text on .ibo-button--label */
|
|
padding: $ibo-button--padding-y $ibo-button--padding-x;
|
|
border: $ibo-button--border;
|
|
border-radius: $ibo-button--border-radius;
|
|
cursor: pointer;
|
|
text-transform: uppercase;
|
|
white-space: nowrap; /* To force sub elements to be on 1 line */
|
|
@extend %ibo-font-ral-sembol-100;
|
|
|
|
|
|
&.ibo-action-button {
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
.ibo-button--label {
|
|
@extend %ibo-text-truncated-with-ellipsis;
|
|
}
|
|
|
|
/* Only when a button has both an icon and a label */
|
|
.ibo-button--icon + .ibo-button--label {
|
|
margin-left: $ibo-button--label--margin-left;
|
|
}
|
|
|
|
.ibo-button--vertical-align {
|
|
margin-top: $ibo-button--vertical-align--margin-top;
|
|
margin-bottom: $ibo-button--vertical-align--margin-bottom;
|
|
}
|
|
|