@adobe/coral-spectrum/coral-css-inputgroup/src/styles/index.css

Coral Spectrum is a JavaScript library of Web Components following Spectrum design patterns.

/**
 * Copyright 2019 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

.coral-InputGroup {
  display: inline-flex;
  width: 208px;
}
.coral-InputGroup--block {
  display: flex;
  width: 100%;
}
.coral-InputGroup-input {
  width: 100%;
}
._coral-InputGroup ._coral-FieldButton {
  min-width: 32px;
  padding: 0 6px;
}
.coral-InputGroup-button ._coral-Button {
  min-width: 32px;
  padding: 0 6px;
  border-width: 1px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
}
.coral-InputGroup-input.focus-ring,
.coral-InputGroup-button ._coral-Button.focus-ring {
  position: relative;
  z-index: 1;
}
.coral-InputGroup > .coral-InputGroup-button:first-child ._coral-Button {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.coral-InputGroup > .coral-InputGroup-button:first-child ._coral-Button:not(.focus-ring) {
  border-right-color: transparent;
}
.coral-InputGroup > .coral-InputGroup-button:last-child ._coral-Button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.coral-InputGroup > .coral-InputGroup-button:last-child ._coral-Button:not(.focus-ring) {
  border-left-color: transparent;
}
.coral-InputGroup > .coral-InputGroup-input {
  border-radius: 0;
}
.coral-InputGroup > .coral-InputGroup-input:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.coral-InputGroup > .coral-InputGroup-input:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.coral--light .coral-InputGroup-button ._coral-Button {
  color: rgb(75, 75, 75);
  background-color: rgb(250, 250, 250);
  border-color: rgb(225, 225, 225);
}
.coral--light .coral-InputGroup-button ._coral-Button:hover {
  color: rgb(44, 44, 44);
  background-color: rgb(255, 255, 255);
  border-color: rgb(202, 202, 202);
  box-shadow: none;
}
.coral--light .coral-InputGroup-button ._coral-Button:active {
  color: rgb(44, 44, 44);
  background-color: rgb(234, 234, 234);
  border-color: rgb(202, 202, 202);
  box-shadow: none;
}
.coral--lightest .coral-InputGroup-button ._coral-Button {
  color: rgb(80, 80, 80);
  background-color: rgb(255, 255, 255);
  border-color: rgb(234, 234, 234);
}
.coral--lightest .coral-InputGroup-button ._coral-Button:hover {
  color: rgb(50, 50, 50);
  background-color: rgb(255, 255, 255);
  border-color: rgb(211, 211, 211);
  box-shadow: none;
}
.coral--lightest .coral-InputGroup-button ._coral-Button:active {
  color: rgb(50, 50, 50);
  background-color: rgb(244, 244, 244);
  border-color: rgb(211, 211, 211);
  box-shadow: none;
}
.coral--dark .coral-InputGroup-button ._coral-Button {
  color: rgb(227, 227, 227);
  background-color: rgb(47, 47, 47);
  border-color: rgb(74, 74, 74);
}
.coral--dark .coral-InputGroup-button ._coral-Button:hover {
  color: rgb(255, 255, 255);
  background-color: rgb(37, 37, 37);
  border-color: rgb(90, 90, 90);
  box-shadow: none;
}
.coral--dark .coral-InputGroup-button ._coral-Button:active {
  color: rgb(255, 255, 255);
  background-color: rgb(62, 62, 62);
  border-color: rgb(90, 90, 90);
  box-shadow: none;
}
.coral--darkest .coral-InputGroup-button ._coral-Button {
  color: rgb(200, 200, 200);
  background-color: rgb(26, 26, 26);
  border-color: rgb(57, 57, 57);
}
.coral--darkest .coral-InputGroup-button ._coral-Button:hover {
  color: rgb(239, 239, 239);
  background-color: rgb(8, 8, 8);
  border-color: rgb(73, 73, 73);
  box-shadow: none;
}
.coral--darkest .coral-InputGroup-button ._coral-Button:active {
  color: rgb(239, 239, 239);
  background-color: rgb(44, 44, 44);
  border-color: rgb(73, 73, 73);
  box-shadow: none;
}