dev/scss/base/choose.scss

@use 'sass:color';
@use "colors";

/**
 * Some color definitions and mixins for
 * buttons and menus.
 */
$choose-bg:           colors.$light-grey;
$choose-color:        colors.$dark-grey;
$choose-blind-color:  colors.$middle-grey;
$choose-border-color: colors.$middle-grey;
$choose-border:       2px solid $choose-border-color;
$choose-box-shadow:   2px 2px 2px  rgba(0,0,0,0.2);


/**
 * Chooseable items (default)
 */
@mixin choose-item {
  color:            $choose-color;
  background-color: $choose-bg;
  border-color:     $choose-border-color;
  text-shadow:      colors.$light-shadow;
}


/**
 * Chooseable items (mouse over)
 */
@mixin choose-hover {
  color:            colors.$nearly-white;
  background-color: colors.$dark-orange;
  border-color:     colors.$darker-orange;
  text-shadow:      none;
}


/**
 * Chooseable items (not available)
 */
@mixin choose-inactive {
  color:            color.adjust($choose-color, $lightness: 20%, $space: hsl);
  background-color: color.adjust($choose-bg, $lightness: 20%, $space: hsl);
  border-color:     transparent;
  text-shadow:      none;
}

/**
 * Chooseable items (active)
 */
@mixin choose-active {
  color:            colors.$dark-green;
  background-color: colors.$light-green;
  border-color:     colors.$dark-green;
  text-shadow:      none;
}


/**
 * Chooseable items (action: remove something)
 */
@mixin choose-remove {
  color:            colors.$nearly-white;
  background-color: colors.$middle-red;
  border-color:     colors.$dark-red;
  text-shadow:      none;
}