@lyra/base
Version:
Lyra plugin containing the base components and roles for a Lyra configuration
73 lines (71 loc) • 3.43 kB
CSS
@import 'part:@lyra/base/theme/variables/gray-colors-style';
@import 'part:@lyra/base/theme/variables/globals-style';
:root {
--default-button-color: var(--gray-lighter);
--default-button-color--text: var(--black);
--default-button-color--hover: var(--gray-light);
--default-button-color--active: var(--gray);
--button-border-radius: var(--border-radius-base);
--input-bg: var(--component-bg);
--input-bg-error: var(--component-bg);
--input-bg-disabled: var(--gray-lighter);
--input-color: var(--text-color);
--input-border-color: var(--component-border-color);
--input-border-size: 1px;
--input-line-height: 2em;
--input-padding-vertical: 0.5em;
--input-padding-horizontal: 0.2em;
--input-border-radius: var(--border-radius-small);
--input-border-radius-large: var(--border-radius-large);
--input-border-radius-small: var(--border-radius-small);
--input-border-color-hover: var(--gray);
--input-border-color-focus: var(--brand-primary);
--input-border-color-active: var(--brand-primary);
--input-border-color-invalid: var(--state-danger-color);
--focus-color: color(var(--brand-primary) alpha(40%));
--input-color-placeholder: var(--gray-lighter);
--form-group-margin-bottom: 1em;
--legend-color: var(--gray-dark);
--input-group-addon-bg: var(--gray-lighter);
--input-group-addon-border-color: var(--input-border);
--cursor-disabled: not-allowed;
--clear-cross-color: var(--gray-light);
--clear-cross-color-hover: var(--state-danger-color);
--input-box-shadow-base: var(--gray-base);
--input-box-shadow: none;
--input-box-shadow--hover: none;
--input-box-shadow--focus: 0 0 2px 0
color(var(--input-border-color-focus) a(42%)),
0 2px 5px 0 color(var(--input-border-color-focus) a(45%)),
0 0 1px 1px color(var(--input-border-color-focus) a(80%));
--input-box-shadow--error: none;
--input-box-shadow--error-focus: 0 0 2px 0
color(var(--state-danger-color) a(42%)),
0 2px 5px 0 color(var(--state-danger-color) a(45%)),
0 0 1px 1px color(var(--state-danger-color) a(80%));
--input-box-shadow--error-hover: 0 0 2px 0
color(var(--state-danger-color) a(12%)),
0 2px 5px 0 color(var(--state-danger-color) a(15%)),
0 0 1px 1px color(var(--state-danger-color) a(20%));
--form-builder-block-border-color: var(--component-border-color);
--form-builder-block-border-color-focus: var(--input-border-color-focus);
--form-builder-block-border-color-error: var(--input-border-color-invalid);
--form-builder-block-background: var(--gray-lighter);
--form-builder-block-background-hover: var(--gray-lightest);
--form-builder-block-background-selected: var(--text-selection-color);
--form-builder-block-shadow: var(--input-box-shadow);
--form-builder-block-shadow--hover: 0 0 2px 0
color(var(--input-border-color-focus) a(22%)),
0 2px 5px 0 color(var(--input-border-color-focus) a(25%)),
0 0 1px 1px color(var(--input-border-color-focus) a(40%));
--form-builder-block-shadow--focus: var(--input-box-shadow--focus);
--form-builder-block-shadow--error: var(--input-box-shadow--error);
--form-builder-block-shadow--error-focus: var(
--input-box-shadow--error-focus
);
--form-builder-block-shadow--error-hover: var(
--input-box-shadow--error-hover
);
--form-builder-block-shadow--focus: var(--input-box-shadow--focus);
--form-builder-block-border-radius: var(--border-radius-small);
}