saas-one/frontend/operation-web/ext/modern/theme-neptune/sass/var/Component.scss

$touch-theme-neptune: true;

/**
 * @class Global_CSS
 */

/**
 * @var {boolean} $include-default-uis
 * Decides whether or not to include the default UIs for all components.
 */
$include-default-uis: dynamic(true); //legacy fallback < 6.1
$enable-default-uis: dynamic($include-default-uis);

/**
 * @var {boolean} $enable-highlights=true
 * Optionally disable all gradients, text-shadows, and box-shadows. Useful for CSS debugging,
 * non-performant browsers, or minimalist designs.
 */
$include-highlights: dynamic(true);
$enable-highlights: dynamic($include-highlights); // Can disable all theme-generated gradients, text-shadows, and box-shadows.

/**
 * @var {boolean} $include-border-radius
 * Optionally disable all border-radius. Useful for CSS debugging, non-performant browsers, or minimalist designs.
 */
$include-border-radius: dynamic(true); //legacy fallback < 6.1
$enable-border-radius: dynamic($include-border-radius); // Can disable all rounded corners
/**
 * @var {boolean} $basic-slider
 * Optionally remove CSS3 effects from the slider component for improved performance.
 */
$basic-slider: dynamic(false);

/**
 * @var {color} $base-color
 * The primary color variable from which most elements derive their color scheme.
 */
$base-color: dynamic(#157fcc);

/**
 * @var {color}
 * A slightly lightened shade of the base color
 */
$base-highlight-color: dynamic(mix(#fff, $base-color, 15%));

/**
 * @var {color}
 * A light shade of the base color
 */
$base-light-color: dynamic(mix(#fff, $base-color, 65%));

/**
 * @var {color}
 * A dark shade of the base color
 */
$base-dark-color: dynamic(mix(#000, $base-color, 14%));

/**
 * @var {color}
 * Base neutral color from which neutral colors throughout the theme are derived
 */
$neutral-color: dynamic(#e1e1e1);

/**
 * @var {color}
 * A light shade of the neutral color
 */
$neutral-light-color: dynamic(mix(#fff, $neutral-color, 68%));

/**
 * @var {color}
 * A light shade of the neutral color
 */
$neutral-highlight-color: dynamic(mix(#fff, $neutral-color, 50%));

/**
 * @var {color}
 * A medium-dark shade of the neutral color
 */
$neutral-medium-dark-color: dynamic(mix(#000, $neutral-color, 14%));

/**
 * @var {color}
 * A dark shade of the neutral color
 */
$neutral-dark-color: dynamic(mix(#000, $neutral-color, 22%));

/**
 * @var {color}
 * Base text color to be used throughout the theme
 */
$color: dynamic(#000);

/**
 * @var {color}
 * A somewhat lightened shade of the base text color
 */
$highlight-color: dynamic(#666);

/**
 * @var {color}
 * A light text color for use on dark backgrounds
 */
$light-color: dynamic(#fff);

/**
 * @var {string} $base-background-gradient
 * The primary gradient variable from which most elements derive their color scheme.
 *
 * See background-gradient mixin.
 */
$base-background-gradient: dynamic(if($enable-highlights, matte, null));

/**
 * @var {string} $font-family
 * The font-family to be used throughout the theme.
 *
 * See background-gradient mixin.
 */
$font-family: dynamic(helvetica, arial, sans-serif);

/**
 * @var {number} $font-size
 * The base font-size to be used throughout the theme.
 */
$font-size: dynamic(13px);

/**
 * @var {number}
 * The base font-size to be used throughout the theme in the
 * {@link Global_CSS#$enable-big big} sizing scheme
 */
$font-size-big: dynamic(15px);

/**
 * @var {number} $line-height
 * The base line-height to be used throughout the theme.
 */
$line-height: dynamic(1.25);

/**
 * @var {color} $alert-color
 * Color used for elements like badges, errors, and "decline" UIs (eg. on buttons).
 */
$alert-color: dynamic(#c30);

/**
 * @var {color} $confirm-color
 * Color used for elements like success messages, and "confirm" UIs (eg. on buttons).
 */
$confirm-color: dynamic(#92cf00);  // Green

/**
 * @var {color} $active-color
 * Color used for elements like selected rows and certain overlays like the picker mask.
 */
$active-color: dynamic(darken(saturate($base-color, 55%), 10%));

/**
 * @var {measurement} $global-row-height
 * The minimum row height for items like toolbars.
 * @private
 */
$global-row-height: dynamic(34px);

/**
 * @var {measurement} $global-list-height
 * The minimum row height for items like toolbars.
 @private
 */
$global-list-height: dynamic(46px);

/**
 * @var {color} $loading-spinner-color
 * Background-color for the bars in the loading spinner.
 */
$loading-spinner-color: dynamic(#333);

/**
 * @var {boolean}
 * `true` to enable support for a "big" sizing scheme.
 * "Big" sizing is enabled by a `'x-big'` CSS class on the `<html>` element.
 * Typically used to provide "tappable sizing for touch-enabled devices.
 */
$enable-big: dynamic(true);

/**
 * @var {string/number}
 * The "normal" font-weight to be used throughout the theme.
 */
$font-weight-normal: dynamic(normal);

/**
 * @var {string/number}
 * The "bold" font-weight to be used throughout the theme.
 */
$font-weight-bold: dynamic(bold);

//# fashion replaces $include-css-variables
/**
 * @var {boolean} $enable-css-variables
 * When true will reference CSS variables for all exported variables
 * used in the theme. Otherwise normal sass conversion will apply.
 */
$enable-css-variables: dynamic(true);

/**
 * @var {string} $css-variable-selector
 * Selector to determine where CSS variables are inserted
 */
$css-variable-selector: dynamic(':root');

/**
 * @var {number} $default-calc-value
 * Number that is used to replace null values in calc formulas
 * @private
 */
$default-calc-value: dynamic(0%);

$background-color: dynamic(#fff);

$color-by-background-dark-color: dynamic($highlight-color);
$color-by-background-light-color: dynamic($light-color);

/**
 * @var {string}
 * Cursor for draggable components
 */
$draggable-cursor: dynamic(move);