@adobe/coral-spectrum/coral-css-fieldlabel/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-FieldLabel,
.coral-FormGroup-itemLabel {
  display: block;

  box-sizing: border-box;

  padding: 4px 0 5px;

  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;

  vertical-align: top;

  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  font-smoothing: subpixel-antialiased;
}
.coral-FieldLabel-requiredIcon {
  margin: 4px 0 0 2px;
}
.coral-FieldLabel--left {
  display: inline-block;
  padding: 8px 8px 0 0;
}
.coral-FieldLabel--left .coral-FieldLabel-requiredIcon {
    margin: 0px 0 0 2px;
  }
.coral-FieldLabel--right {
  display: inline-block;
  text-align: right;
  padding: 8px 8px 0 0;
}
.coral-FormGroup {
  display: table;
  border-collapse: separate;
  border-spacing: 0 24px;
  margin: -20px 0;
}
.coral-FormGroup-item {
  display: table-row;
}
.coral-FormGroup-itemLabel,.coral-FormGroup-itemField {
  display: table-cell;
}
.coral-FormGroup--labelsAbove {
  margin: 0;
}
.coral-FormGroup--labelsAbove,.coral-FormGroup--labelsAbove .coral-FormGroup-item {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  }
.coral-FormGroup--labelsAbove .coral-FormGroup-item + .coral-FormGroup-item {
      margin-top: 8px;
    }

.coral--large .coral-FieldLabel,
.coral--large .coral-FormGroup-itemLabel {

  padding: 5px 0 6px;

  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
}
.coral--large .coral-FieldLabel-requiredIcon {
  margin: 5px 0 0 2px;
}
.coral--large .coral-FieldLabel--left {
  padding: 10px 10px 0 0;
}
.coral--large .coral-FieldLabel--left .coral-FieldLabel-requiredIcon {
    margin: 0px 0 0 2px;
  }
.coral--large .coral-FieldLabel--right {
  padding: 10px 10px 0 0;
}
.coral--large .coral-FormGroup {
  border-spacing: 0 30px;
  margin: -25px 0;
}
.coral--large .coral-FormGroup--labelsAbove .coral-FormGroup-item + .coral-FormGroup-item {
      margin-top: 10px;
    }

.coral--light .coral-FieldLabel,
.coral--light .coral-FormGroup-itemLabel {
  color: rgb(110, 110, 110);
}
.coral--light .coral-FieldLabel.is-disabled,
.coral--light .coral-FormGroup-itemLabel.is-disabled,.coral--light .coral-FieldLabel.is-disabled .coral-FieldLabel-requiredIcon,
.coral--light .coral-FormGroup-itemLabel.is-disabled .coral-FieldLabel-requiredIcon {
      color: rgb(179, 179, 179);
    }
.coral--light .coral-FieldLabel-requiredIcon {
  color: rgb(142, 142, 142);
}

.coral--lightest .coral-FieldLabel,
.coral--lightest .coral-FormGroup-itemLabel {
  color: rgb(116, 116, 116);
}
.coral--lightest .coral-FieldLabel.is-disabled,
.coral--lightest .coral-FormGroup-itemLabel.is-disabled,.coral--lightest .coral-FieldLabel.is-disabled .coral-FieldLabel-requiredIcon,
.coral--lightest .coral-FormGroup-itemLabel.is-disabled .coral-FieldLabel-requiredIcon {
      color: rgb(188, 188, 188);
    }
.coral--lightest .coral-FieldLabel-requiredIcon {
  color: rgb(149, 149, 149);
}

.coral--dark .coral-FieldLabel,
.coral--dark .coral-FormGroup-itemLabel {
  color: rgb(185, 185, 185);
}
.coral--dark .coral-FieldLabel.is-disabled,
.coral--dark .coral-FormGroup-itemLabel.is-disabled,.coral--dark .coral-FieldLabel.is-disabled .coral-FieldLabel-requiredIcon,
.coral--dark .coral-FormGroup-itemLabel.is-disabled .coral-FieldLabel-requiredIcon {
      color: rgb(110, 110, 110);
    }
.coral--dark .coral-FieldLabel-requiredIcon {
  color: rgb(144, 144, 144);
}

.coral--darkest .coral-FieldLabel,
.coral--darkest .coral-FormGroup-itemLabel {
  color: rgb(162, 162, 162);
}
.coral--darkest .coral-FieldLabel.is-disabled,
.coral--darkest .coral-FormGroup-itemLabel.is-disabled,.coral--darkest .coral-FieldLabel.is-disabled .coral-FieldLabel-requiredIcon,
.coral--darkest .coral-FormGroup-itemLabel.is-disabled .coral-FieldLabel-requiredIcon {
      color: rgb(92, 92, 92);
    }
.coral--darkest .coral-FieldLabel-requiredIcon {
  color: rgb(124, 124, 124);
}