UNPKG

@lyra/base

Version:

Lyra plugin containing the base components and roles for a Lyra configuration

73 lines (71 loc) 3.43 kB
@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); }