Permalink
Fetching contributors…
Cannot retrieve contributors at this time
152 lines (122 sloc) 3.5 KB
/// Global namespace for token component
/// @access public
/// @group token
/// @type string
$DBtoken-namespace: "c-token" !default;
/// Neutral background color for token component
/// @access public
/// @group token
/// @type color
$DBtoken-background-neutral: color(gray, x-light) !default;
/// Warning background color for token component
/// @access public
/// @group token
/// @type color
$DBtoken-background-warning: color(yellow, x-light) !default;
/// Error background color for token component
/// @access public
/// @group token
/// @type color
$DBtoken-background-error: color(red, x-light) !default;
/// Selected neutral background color for token component
/// @access public
/// @group token
/// @type color
$DBtoken-background-neutral-selected: color(gray, medium) !default;
/// Selected warning background color for token component
/// @access public
/// @group token
/// @type color
$DBtoken-background-warning-selected: color(yellow, dark) !default;
/// Selected error background color for token component
/// @access public
/// @group token
/// @type color
$DBtoken-background-error-selected: color(red, dark) !default;
/// Neutral text color for token component
/// @access public
/// @group token
/// @type color
$DBtoken-text-neutral: color(gray) !default;
/// Warning text color for token component
/// @access public
/// @group token
/// @type color
$DBtoken-text-warning: color(yellow, x-dark) !default;
/// Error text color for token component
/// @access public
/// @group token
/// @type color
$DBtoken-text-error: color(red, x-dark) !default;
// Tokens component
// @example html
// <div class="c-token [modifier]">
// [avatar/icon]
// <span class="c-token__name">{{Name/email}}</span>
// <i class="c-token__delete">&times;</i>
// </div>
.#{$DBtoken-namespace} {
display: inline-block;
// We want tokens to always remain on one line
white-space: nowrap;
padding: 4px;
line-height: 1;
color: $DBtoken-text-neutral;
border-radius: 3px;
box-shadow: inset 0 0 0 1px color(gray, x-dark, 0.1);
background-color: $DBtoken-background-neutral;
cursor: default;
&:hover {
box-shadow: inset 0 0 0 1px color(gray, x-dark, 0.3);
}
> * {
vertical-align: middle;
margin-left: 0.25em;
&:first-child {
margin-left: 0;
}
}
}
// Warning state
// (Out-of-org, non-blocking)
.#{$DBtoken-namespace}--warning {
color: $DBtoken-text-warning;
background-color: $DBtoken-background-warning;
}
// Invalid state
// (Out-of-org, suspended)
.#{$DBtoken-namespace}--invalid {
color: $DBtoken-text-error;
background-color: $DBtoken-background-error;
}
// Pending state
// Transient state while actual state is determined
.#{$DBtoken-namespace}--pending {
opacity: 0.5;
}
// Selected state
.#{$DBtoken-namespace}.is-selected, .#{$DBtoken-namespace}.is-selected:hover {
color: color(white);
background-color: $DBtoken-background-neutral-selected;
&.#{$DBtoken-namespace}--warning {
background-color: $DBtoken-background-warning-selected;
}
&.#{$DBtoken-namespace}--invalid {
background-color: $DBtoken-background-error-selected;
}
}
// User name or email
.#{$DBtoken-namespace}__name {
// Open Sans' line-height needs some manual correction
top: 1px;
margin-left: 0.25em;
}
// Delete token glyph
.#{$DBtoken-namespace}__delete {
margin-right: 0.15em;
margin-left: 0.25em;
font-size: 1.25em;
color: currentColor;
opacity: 0.7;
cursor: pointer;
}