405 lines
17 KiB
CSS
405 lines
17 KiB
CSS
.spectrum-InputGroup {
|
||
--spectrum-combobox-quiet-fieldbutton-border-radius: 0;
|
||
--spectrum-combobox-field-border-width-right: 0;
|
||
|
||
--spectrum-inputgroup-generic-padding: var(--spectrum-global-dimension-size-150);
|
||
|
||
--spectrum-datepicker-range-input-width-first: calc(var(--spectrum-global-dimension-size-1600) - 2 * var(--spectrum-inputgroup-generic-padding));
|
||
--spectrum-datepicker-input-width: calc(var(--spectrum-datepicker-range-input-width-first) + var(--spectrum-icon-alert-medium-width, var(--spectrum-global-dimension-size-225)));
|
||
--spectrum-datepicker-range-input-width-quiet-first: calc(var(--spectrum-global-dimension-size-900) + var(--spectrum-global-dimension-size-200));
|
||
--spectrum-datepicker-input-width-quiet: calc(var(--spectrum-datepicker-range-input-width-quiet-first) + var(--spectrum-icon-alert-medium-width, var(--spectrum-global-dimension-size-225)));
|
||
|
||
--spectrum-datepicker-datetime-input-width-first: calc(var(--spectrum-datepicker-input-width) + var(--spectrum-global-dimension-size-450));
|
||
--spectrum-datepicker-datetime-input-width: calc(var(--spectrum-datepicker-datetime-input-width-first) + var(--spectrum-icon-alert-medium-width, var(--spectrum-global-dimension-size-225)));
|
||
|
||
--spectrum-datepicker-datetime-quiet-input-width-first: calc(var(--spectrum-datepicker-input-width) + var(--spectrum-global-dimension-size-300));
|
||
--spectrum-datepicker-datetime-quiet-input-width: calc(var(--spectrum-datepicker-datetime-quiet-input-width-first) + var(--spectrum-icon-alert-medium-width, var(--spectrum-global-dimension-size-225)));
|
||
|
||
--spectrum-datepicker-range-dash-margin-left: calc(-0.5 * var(--spectrum-global-dimension-static-font-size-100, 14px));
|
||
--spectrum-datepicker-range-dash-padding-top: 0;
|
||
--spectrum-datepicker-range-dash-line-height: calc(var(--spectrum-textfield-m-height, var(--spectrum-alias-item-height-m)) - var(--spectrum-global-dimension-size-100));
|
||
--spectrum-combobox-button-width: var(--spectrum-global-dimension-size-400);
|
||
|
||
--spectrum-combobox-quiet-button-offset: calc(var(--spectrum-actionbutton-m-min-width, var(--spectrum-global-dimension-size-400)) / 2 - var(--spectrum-icon-chevron-down-medium-width) / 2);
|
||
}
|
||
|
||
.spectrum-InputGroup {
|
||
position: relative;
|
||
display: -ms-inline-flexbox;
|
||
display: inline-flex;
|
||
-ms-flex-direction: row;
|
||
flex-direction: row;
|
||
-ms-flex-wrap: nowrap;
|
||
flex-wrap: nowrap;
|
||
min-width: var(--spectrum-alias-single-line-width, var(--spectrum-global-dimension-size-2400));
|
||
border-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));
|
||
}
|
||
|
||
[dir="ltr"] .spectrum-InputGroup .spectrum-InputGroup-button {
|
||
border-top-left-radius: var(--spectrum-combobox-fieldbutton-border-top-left-radius, 0);
|
||
}
|
||
|
||
[dir="rtl"] .spectrum-InputGroup .spectrum-InputGroup-button {
|
||
border-top-right-radius: var(--spectrum-combobox-fieldbutton-border-top-left-radius, 0);
|
||
}
|
||
|
||
[dir="ltr"] .spectrum-InputGroup .spectrum-InputGroup-button {
|
||
border-bottom-left-radius: var(--spectrum-combobox-fieldbutton-border-bottom-left-radius, 0);
|
||
}
|
||
|
||
[dir="rtl"] .spectrum-InputGroup .spectrum-InputGroup-button {
|
||
border-bottom-right-radius: var(--spectrum-combobox-fieldbutton-border-bottom-left-radius, 0);
|
||
}
|
||
|
||
.spectrum-InputGroup .spectrum-InputGroup-button {
|
||
padding: 0;
|
||
width: var(--spectrum-combobox-button-width);
|
||
}
|
||
|
||
.spectrum-InputGroup .spectrum-InputGroup-input {
|
||
width: auto;
|
||
}
|
||
|
||
.spectrum-InputGroup-button {
|
||
position: relative;
|
||
}
|
||
|
||
[dir="ltr"] .spectrum-InputGroup-input {
|
||
border-top-right-radius: var(--spectrum-combobox-textfield-border-top-right-radius, 0);
|
||
}
|
||
|
||
[dir="rtl"] .spectrum-InputGroup-input {
|
||
border-top-left-radius: var(--spectrum-combobox-textfield-border-top-right-radius, 0);
|
||
}
|
||
|
||
[dir="ltr"] .spectrum-InputGroup-input {
|
||
border-bottom-right-radius: var(--spectrum-combobox-textfield-border-bottom-right-radius, 0);
|
||
}
|
||
|
||
[dir="rtl"] .spectrum-InputGroup-input {
|
||
border-bottom-left-radius: var(--spectrum-combobox-textfield-border-bottom-right-radius, 0);
|
||
}
|
||
|
||
[dir="ltr"] .spectrum-InputGroup-input {
|
||
border-right-width: var(--spectrum-combobox-field-border-width-right);
|
||
}
|
||
|
||
[dir="rtl"] .spectrum-InputGroup-input {
|
||
border-left-width: var(--spectrum-combobox-field-border-width-right);
|
||
}
|
||
|
||
.spectrum-InputGroup-input {
|
||
-ms-flex: 1;
|
||
flex: 1;
|
||
}
|
||
|
||
.spectrum-InputGroup--quiet {
|
||
border-radius: var(--spectrum-combobox-quiet-fieldbutton-border-radius);
|
||
}
|
||
|
||
[dir="ltr"] .spectrum-InputGroup--quiet .spectrum-InputGroup-button {
|
||
|
||
padding-left: var(--spectrum-combobox-quiet-button-offset);
|
||
}
|
||
|
||
[dir="rtl"] .spectrum-InputGroup--quiet .spectrum-InputGroup-button {
|
||
|
||
padding-right: var(--spectrum-combobox-quiet-button-offset);
|
||
}
|
||
|
||
[dir="ltr"] .spectrum-InputGroup--quiet .spectrum-InputGroup-button {
|
||
padding-right: var(
|
||
--spectrum-combobox-quiet-fieldbutton-padding-right
|
||
);
|
||
}
|
||
|
||
[dir="rtl"] .spectrum-InputGroup--quiet .spectrum-InputGroup-button {
|
||
padding-left: var(
|
||
--spectrum-combobox-quiet-fieldbutton-padding-right
|
||
);
|
||
}
|
||
|
||
[dir="ltr"] .spectrum-InputGroup--quiet .spectrum-InputGroup-button {
|
||
border-left: 0;
|
||
}
|
||
|
||
[dir="rtl"] .spectrum-InputGroup--quiet .spectrum-InputGroup-button {
|
||
border-right: 0;
|
||
}
|
||
|
||
[dir="ltr"] .spectrum-InputGroup--quiet .spectrum-InputGroup-button {
|
||
border-right: 0;
|
||
}
|
||
|
||
[dir="rtl"] .spectrum-InputGroup--quiet .spectrum-InputGroup-button {
|
||
border-left: 0;
|
||
}
|
||
|
||
.spectrum-InputGroup--quiet .spectrum-InputGroup-button {
|
||
width: auto;
|
||
position: relative;
|
||
|
||
|
||
border-top: 0;
|
||
border-bottom: var(--spectrum-textfield-quiet-m-border-size, var(--spectrum-alias-border-size-thin)) solid;
|
||
border-radius: var(--spectrum-combobox-quiet-fieldbutton-border-radius);
|
||
}
|
||
|
||
[dir="ltr"] .spectrum-InputGroup--quiet .spectrum-InputGroup-button:after {
|
||
right: calc(var(--spectrum-combobox-quiet-button-offset) * -1);
|
||
}
|
||
|
||
[dir="rtl"] .spectrum-InputGroup--quiet .spectrum-InputGroup-button:after {
|
||
left: calc(var(--spectrum-combobox-quiet-button-offset) * -1);
|
||
}
|
||
|
||
.spectrum-InputGroup--quiet .spectrum-InputGroup-button:after {
|
||
content: "";
|
||
position: absolute;
|
||
height: 100%;
|
||
width: var(--spectrum-combobox-quiet-button-offset);
|
||
}
|
||
|
||
[dir="ltr"] .spectrum-InputGroup--quiet .spectrum-InputGroup-icon {
|
||
right: 0;
|
||
}
|
||
|
||
[dir="rtl"] .spectrum-InputGroup--quiet .spectrum-InputGroup-icon {
|
||
left: 0;
|
||
}
|
||
|
||
.spectrum-Datepicker--range {
|
||
border-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));
|
||
}
|
||
|
||
.spectrum-Datepicker--range.spectrum-InputGroup--quiet {
|
||
border-radius: var(--spectrum-combobox-quiet-fieldbutton-border-radius);
|
||
}
|
||
|
||
.spectrum-Datepicker--range.spectrum-InputGroup--quiet .spectrum-InputGroup-textfield {
|
||
min-width: 0;
|
||
width: var(--spectrum-datepicker-input-width-quiet);
|
||
}
|
||
|
||
.spectrum-Datepicker--range.spectrum-InputGroup--quiet .spectrum-InputGroup-textfield:first-of-type {
|
||
width: var(--spectrum-datepicker-range-input-width-quiet-first);
|
||
}
|
||
|
||
.spectrum-Datepicker--range.spectrum-InputGroup--quiet .spectrum-InputGroup-button {
|
||
border-radius: var(--spectrum-combobox-quiet-fieldbutton-border-radius);
|
||
}
|
||
|
||
.spectrum-Datepicker--range.spectrum-Datepicker--datetimeRange .spectrum-InputGroup-textfield {
|
||
width: var(--spectrum-datepicker-datetime-input-width);
|
||
min-width: 0;
|
||
}
|
||
|
||
.spectrum-Datepicker--range.spectrum-Datepicker--datetimeRange .spectrum-InputGroup-textfield:first-of-type {
|
||
width: var(--spectrum-datepicker-datetime-input-width-first);
|
||
}
|
||
|
||
.spectrum-Datepicker--range.spectrum-Datepicker--datetimeRange.spectrum-InputGroup--quiet .spectrum-InputGroup-textfield {
|
||
width: var(--spectrum-datepicker-datetime-quiet-input-width);
|
||
}
|
||
|
||
.spectrum-Datepicker--range.spectrum-Datepicker--datetimeRange.spectrum-InputGroup--quiet .spectrum-InputGroup-textfield:first-of-type {
|
||
width: var(
|
||
--spectrum-datepicker-datetime-quiet-input-width-first
|
||
);
|
||
}
|
||
|
||
.spectrum-Datepicker--range .spectrum-InputGroup-textfield {
|
||
-ms-flex: initial;
|
||
flex: initial;
|
||
min-width: 0;
|
||
width: var(--spectrum-datepicker-input-width);
|
||
}
|
||
|
||
.spectrum-Datepicker--range .spectrum-InputGroup-textfield:first-of-type {
|
||
width: var(--spectrum-datepicker-range-input-width-first);
|
||
}
|
||
|
||
[dir="ltr"] .spectrum-Datepicker--range .spectrum-InputGroup-textfield.is-invalid .spectrum-InputGroup-input {
|
||
padding-right: var(--spectrum-inputgroup-generic-padding);
|
||
}
|
||
|
||
[dir="rtl"] .spectrum-Datepicker--range .spectrum-InputGroup-textfield.is-invalid .spectrum-InputGroup-input {
|
||
padding-left: var(--spectrum-inputgroup-generic-padding);
|
||
}
|
||
|
||
.spectrum-Datepicker--range .spectrum-InputGroup-input {
|
||
width: 100%;
|
||
}
|
||
|
||
[dir="ltr"] .spectrum-Datepicker--range .spectrum-InputGroup-input.spectrum-Datepicker-startField {
|
||
border-right: 0;
|
||
}
|
||
|
||
[dir="rtl"] .spectrum-Datepicker--range .spectrum-InputGroup-input.spectrum-Datepicker-startField {
|
||
border-left: 0;
|
||
}
|
||
|
||
[dir="ltr"] .spectrum-Datepicker--range .spectrum-InputGroup-input.spectrum-Datepicker-startField {
|
||
padding-right: var(--spectrum-inputgroup-generic-padding);
|
||
}
|
||
|
||
[dir="rtl"] .spectrum-Datepicker--range .spectrum-InputGroup-input.spectrum-Datepicker-startField {
|
||
padding-left: var(--spectrum-inputgroup-generic-padding);
|
||
}
|
||
|
||
[dir="ltr"] .spectrum-Datepicker--range .spectrum-InputGroup-input.spectrum-Datepicker-endField {
|
||
border-left: 0;
|
||
}
|
||
|
||
[dir="rtl"] .spectrum-Datepicker--range .spectrum-InputGroup-input.spectrum-Datepicker-endField {
|
||
border-right: 0;
|
||
}
|
||
|
||
[dir="ltr"] .spectrum-Datepicker--range .spectrum-InputGroup-input.spectrum-Datepicker-endField {
|
||
padding-left: var(--spectrum-inputgroup-generic-padding);
|
||
}
|
||
|
||
[dir="rtl"] .spectrum-Datepicker--range .spectrum-InputGroup-input.spectrum-Datepicker-endField {
|
||
padding-right: var(--spectrum-inputgroup-generic-padding);
|
||
}
|
||
|
||
.spectrum-Datepicker--range .spectrum-InputGroup-input.spectrum-Datepicker-endField {
|
||
border-radius: 0;
|
||
}
|
||
|
||
.spectrum-Datepicker--range .spectrum-Datepicker-rangeDash {
|
||
line-height: var(--spectrum-datepicker-range-dash-line-height);
|
||
padding-top: var(--spectrum-datepicker-range-dash-padding-top);
|
||
-ms-flex: initial;
|
||
flex: initial;
|
||
width: 0;
|
||
z-index: 1;
|
||
}
|
||
|
||
.spectrum-Datepicker--range .spectrum-Datepicker-rangeDash:before {
|
||
content: "–";
|
||
display: inline-block;
|
||
margin-top: 0;
|
||
margin-bottom: 0;
|
||
margin-left: var(--spectrum-datepicker-range-dash-margin-left);
|
||
margin-right: var(--spectrum-datepicker-range-dash-margin-left);
|
||
overflow: hidden;
|
||
text-align: center;
|
||
vertical-align: middle;
|
||
width: var(--spectrum-global-dimension-static-font-size-100, 14px);
|
||
}
|
||
|
||
[dir="ltr"] .spectrum-Datepicker--range.spectrum-InputGroup--quiet .spectrum-Datepicker--rangeDash:before {
|
||
margin-left: var(--spectrum-datepicker-range-dash-margin-left);
|
||
}
|
||
|
||
[dir="rtl"] .spectrum-Datepicker--range.spectrum-InputGroup--quiet .spectrum-Datepicker--rangeDash:before {
|
||
margin-right: var(--spectrum-datepicker-range-dash-margin-left);
|
||
}
|
||
|
||
.spectrum-InputGroup.is-focused:not(.is-invalid) .spectrum-InputGroup-textfield .spectrum-InputGroup-input {
|
||
border-color: var(--spectrum-textfield-m-border-color-key-focus, var(--spectrum-alias-border-color-focus));
|
||
}
|
||
|
||
.spectrum-InputGroup.is-focused:not(.is-invalid) .spectrum-InputGroup-button {
|
||
border-color: var(--spectrum-textfield-m-border-color-key-focus, var(--spectrum-alias-border-color-focus));
|
||
}
|
||
|
||
.spectrum-InputGroup:hover:not(.is-focused):not(.is-keyboardFocused):not(.is-disabled) .spectrum-InputGroup-textfield .spectrum-InputGroup-input {
|
||
border-color: var(--spectrum-textfield-m-border-color-hover, var(--spectrum-alias-border-color-hover));
|
||
}
|
||
|
||
.spectrum-InputGroup:hover:not(.is-focused):not(.is-keyboardFocused):not(.is-disabled) .spectrum-InputGroup-button {
|
||
border-color: var(--spectrum-textfield-m-border-color-hover, var(--spectrum-alias-border-color-hover));
|
||
}
|
||
|
||
.spectrum-InputGroup:hover:not(.is-focused):not(.is-keyboardFocused):not(.is-disabled).is-invalid .spectrum-InputGroup-textfield .spectrum-InputGroup-input {
|
||
border-color: var(--spectrum-textfield-m-border-color-error-hover, var(--spectrum-semantic-negative-color-state-hover));
|
||
}
|
||
|
||
.spectrum-InputGroup:hover:not(.is-focused):not(.is-keyboardFocused):not(.is-disabled).is-invalid .spectrum-InputGroup-button {
|
||
border-color: var(--spectrum-textfield-m-border-color-error-hover, var(--spectrum-semantic-negative-color-state-hover));
|
||
}
|
||
|
||
.spectrum-InputGroup.is-disabled .spectrum-Datepicker-rangeDash {
|
||
color: var(--spectrum-alias-text-color-disabled, var(--spectrum-global-color-gray-500));
|
||
}
|
||
|
||
.spectrum-InputGroup.is-focused .spectrum-InputGroup-button,
|
||
.spectrum-InputGroup.is-focused .spectrum-InputGroup-input {
|
||
border-color: var(--spectrum-picker-m-border-color-key-focus, var(--spectrum-alias-border-color-focus));
|
||
}
|
||
|
||
.spectrum-InputGroup.is-focused.is-invalid .spectrum-InputGroup-button,
|
||
.spectrum-InputGroup.is-focused.is-invalid .spectrum-InputGroup-input {
|
||
border-color: var(--spectrum-picker-m-border-color-error, var(--spectrum-global-color-red-500));
|
||
}
|
||
|
||
.spectrum-InputGroup:not(.spectrum-InputGroup--quiet).is-keyboardFocused {
|
||
box-shadow: 0 0 0 1px var(--spectrum-picker-m-border-color-key-focus, var(--spectrum-alias-border-color-focus));
|
||
}
|
||
|
||
.spectrum-InputGroup:not(.spectrum-InputGroup--quiet).is-keyboardFocused .spectrum-InputGroup-input,
|
||
.spectrum-InputGroup:not(.spectrum-InputGroup--quiet).is-keyboardFocused .spectrum-InputGroup-input.focus-ring {
|
||
box-shadow: none ;
|
||
}
|
||
|
||
.spectrum-InputGroup:not(.spectrum-InputGroup--quiet).is-keyboardFocused.is-invalid {
|
||
box-shadow: 0 0 0 1px var(--spectrum-picker-m-border-color-error-key-focus, var(--spectrum-alias-border-color-focus));
|
||
}
|
||
|
||
.spectrum-InputGroup:not(.spectrum-InputGroup--quiet).is-keyboardFocused.is-invalid .spectrum-InputGroup-button,
|
||
.spectrum-InputGroup:not(.spectrum-InputGroup--quiet).is-keyboardFocused.is-invalid .spectrum-InputGroup-input {
|
||
border-color: var(--spectrum-picker-m-border-color-error-key-focus, var(--spectrum-alias-border-color-focus));
|
||
}
|
||
|
||
.spectrum-InputGroup:not(.spectrum-InputGroup--quiet).is-keyboardFocused .spectrum-InputGroup-button {
|
||
box-shadow: none;
|
||
}
|
||
|
||
.spectrum-InputGroup--quiet .spectrum-InputGroup-button,
|
||
.spectrum-InputGroup--quiet .spectrum-InputGroup-button:hover,
|
||
.spectrum-InputGroup--quiet .spectrum-InputGroup-button:focus,
|
||
.spectrum-InputGroup--quiet .spectrum-InputGroup-button:active,
|
||
.spectrum-InputGroup--quiet .spectrum-InputGroup-button.is-selected,
|
||
.spectrum-InputGroup--quiet .spectrum-InputGroup-button.is-invalid {
|
||
border-color: var(--spectrum-textfield-quiet-m-border-color, var(--spectrum-alias-border-color));
|
||
}
|
||
|
||
.spectrum-InputGroup--quiet .spectrum-InputGroup-button:disabled,
|
||
.spectrum-InputGroup--quiet .spectrum-InputGroup-button:disabled:hover {
|
||
border-color: var(--spectrum-textfield-quiet-m-border-color-disabled, var(--spectrum-alias-border-color-mid));
|
||
}
|
||
|
||
.spectrum-InputGroup--quiet:hover:not(.is-focused):not(.is-keyboardFocused):not(.is-disabled) .spectrum-InputGroup-input,
|
||
.spectrum-InputGroup--quiet:hover:not(.is-focused):not(.is-keyboardFocused):not(.is-disabled) .spectrum-InputGroup-button {
|
||
border-color: var(--spectrum-textfield-quiet-m-border-color-hover, var(--spectrum-alias-border-color-hover));
|
||
}
|
||
|
||
.spectrum-InputGroup--quiet.is-invalid .spectrum-InputGroup-input,
|
||
.spectrum-InputGroup--quiet.is-invalid .spectrum-InputGroup-button {
|
||
border-color: var(--spectrum-textfield-quiet-m-border-color-error, var(--spectrum-semantic-negative-color-default));
|
||
}
|
||
|
||
.spectrum-InputGroup--quiet.is-focused .spectrum-InputGroup-input,
|
||
.spectrum-InputGroup--quiet.is-focused .spectrum-InputGroup-button {
|
||
border-color: var(--spectrum-textfield-quiet-m-border-color-mouse-focus, var(--spectrum-alias-border-color-mouse-focus));
|
||
}
|
||
|
||
.spectrum-InputGroup--quiet.is-focused.is-invalid .spectrum-InputGroup-input,
|
||
.spectrum-InputGroup--quiet.is-focused.is-invalid .spectrum-InputGroup-button {
|
||
border-color: var(--spectrum-textfield-quiet-m-border-color-error-mouse-focus, var(--spectrum-semantic-negative-color-state-hover));
|
||
}
|
||
|
||
.spectrum-InputGroup--quiet.is-keyboardFocused .spectrum-InputGroup-input,
|
||
.spectrum-InputGroup--quiet.is-keyboardFocused .spectrum-InputGroup-button {
|
||
box-shadow: 0 1px 0 var(--spectrum-textfield-quiet-m-border-color-key-focus, var(--spectrum-alias-border-color-focus));
|
||
border-color: var(--spectrum-textfield-quiet-m-border-color-key-focus, var(--spectrum-alias-border-color-focus));
|
||
}
|
||
|
||
.spectrum-InputGroup--quiet.is-keyboardFocused.is-invalid .spectrum-InputGroup-input,
|
||
.spectrum-InputGroup--quiet.is-keyboardFocused.is-invalid .spectrum-InputGroup-button {
|
||
box-shadow: 0 1px 0 var(--spectrum-picker-m-border-color-error-key-focus, var(--spectrum-alias-border-color-focus));
|
||
border-color: var(--spectrum-picker-m-border-color-error-key-focus, var(--spectrum-alias-border-color-focus));
|
||
}
|