faststore/packages/ui/src/components/molecules/RatingField/styles.scss at 9d611249d483f439a50bfa2e2248904c502f57b1 · vtex/faststore · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
[data-fs-rating-field] {
  // --------------------------------------------------------
  // Design Tokens for Rating Field
  // --------------------------------------------------------

  // Label
  --fs-rating-field-label-color: var(--fs-color-text-light);
  --fs-rating-field-label-size: var(--fs-text-size-2);
  --fs-rating-field-label-line-height: var(--fs-text-size-4);

  // Error
  --fs-rating-field-error-message-size: var(--fs-text-size-legend);
  --fs-rating-field-error-message-line-height: 1.1;
  --fs-rating-field-error-message-color: var(--fs-color-danger-text);

  // --------------------------------------------------------
  // Structural Styles
  // --------------------------------------------------------
  display: flex;
  flex-direction: column;

  [data-fs-rating-field-label] {
    font-size: var(--fs-rating-field-label-size);
    line-height: var(--fs-rating-field-label-line-height);
    color: var(--fs-rating-field-label-color);
  }

  [data-fs-rating-field-error-message] {
    font-size: var(--fs-rating-field-error-message-size);
    line-height: var(--fs-rating-field-error-message-line-height);
    color: var(--fs-rating-field-error-message-color);
  }

  //  --------------------------------------------------------
  // Variants Styles
  // --------------------------------------------------------
  &[data-fs-rating-field-error="true"] {
    [data-fs-rating-item="empty"] [data-fs-icon] {
      color: var(--fs-rating-field-error-message-color);
    }
  }
}