carbon-components-svelte/css/_copy-input.scss at master · carbon-design-system/carbon-components-svelte · 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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
@import "carbon-components/scss/globals/scss/vars";
@import "carbon-components/scss/globals/scss/helper-mixins";
@import "carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once";

/// Room for the copy button at the page's inline end. The field has
/// `dir="auto"`, so its own direction follows the value, not the page.
/// Logical padding would resolve against the value and leave the room on
/// the wrong side, so this side is physical, with a twin for an RTL page.
/// 16px is the text input's own inline padding.
/// @access private
/// @group components
@mixin copy-input-end-padding($value) {
  padding-right: $value;

  [dir="rtl"] & {
    padding-right: ccs-dir($value, $carbon--spacing-05);
    padding-left: ccs-dir($carbon--spacing-05, $value);
  }
}

/// CopyInput: a read-only text input with a trailing copy button
/// @access private
/// @group components
@mixin copy-input {
  // Reserve room so the value never sits under the copy button.
  .#{$prefix}--copy-input__field-wrapper .#{$prefix}--text-input {
    @include copy-input-end-padding(to-rem(40px));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .#{$prefix}--copy-input__field-wrapper .#{$prefix}--text-input--xs {
    @include copy-input-end-padding(to-rem(24px));
  }

  .#{$prefix}--copy-input__field-wrapper .#{$prefix}--text-input--sm {
    @include copy-input-end-padding(to-rem(32px));
  }

  .#{$prefix}--copy-input__field-wrapper .#{$prefix}--text-input--xl {
    @include copy-input-end-padding(to-rem(48px));
  }

  // Fluid form shorthand padding must not collapse the end padding below
  // the button width.
  .#{$prefix}--form--fluid,
  .#{$prefix}--text-input--fluid {
    .#{$prefix}--copy-input__field-wrapper .#{$prefix}--text-input {
      @include copy-input-end-padding($carbon--spacing-08);
    }

    // The fluid copy button stays 32px at every size.
    .#{$prefix}--copy-input__field-wrapper .#{$prefix}--text-input--xs,
    .#{$prefix}--copy-input__field-wrapper .#{$prefix}--text-input--sm {
      @include copy-input-end-padding($carbon--spacing-07);
    }

    .#{$prefix}--copy-input__field-wrapper .#{$prefix}--text-input--xl {
      @include copy-input-end-padding($carbon--spacing-09);
    }
  }

  .#{$prefix}--copy-input__field-wrapper .#{$prefix}--copy-btn {
    @include focus-outline("reset");

    position: absolute;
    display: flex;
    width: to-rem(40px);
    height: 100%;
    min-height: auto;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    @include ccs-inset-inline($end: 0);

    &:active {
      background: none;
    }

    // Show the button's own focus ring when it (not the input) is focused.
    &:focus {
      @include focus-outline("outline");
    }

    .#{$prefix}--snippet__icon {
      fill: $icon-secondary;
      transition: fill $duration--fast-01 motion(standard, productive);
    }

    // Hover only where a pointer can hover, so a tap does not leave it stuck.
    // Stays ahead of `:disabled`, which must keep beating it.
    @media (any-hover: hover) {
      &:hover {
        background: none;
      }

      &:hover .#{$prefix}--snippet__icon {
        fill: $icon-primary;
      }
    }

    &:focus .#{$prefix}--snippet__icon {
      fill: $icon-primary;
    }

    &:disabled {
      cursor: not-allowed;
    }

    &:disabled .#{$prefix}--snippet__icon {
      fill: $icon-disabled;
    }
  }

  .#{$prefix}--copy-input__field-wrapper
    .#{$prefix}--text-input--xs
    ~ .#{$prefix}--copy-btn {
    width: to-rem(24px);
  }

  .#{$prefix}--copy-input__field-wrapper
    .#{$prefix}--text-input--sm
    ~ .#{$prefix}--copy-btn {
    width: to-rem(32px);
  }

  .#{$prefix}--copy-input__field-wrapper
    .#{$prefix}--text-input--xl
    ~ .#{$prefix}--copy-btn {
    width: to-rem(48px);
  }

  // Fluid copy button matches the password visibility toggle in
  // `_fluid-text-input.scss` (32×32px on the value row).
  .#{$prefix}--form--fluid,
  .#{$prefix}--text-input--fluid {
    .#{$prefix}--copy-input__field-wrapper .#{$prefix}--copy-btn {
      block-size: to-rem(32px);
      inline-size: to-rem(32px);
      min-height: to-rem(32px);
      inset-block-start: to-rem(26px);
      align-items: center;
      padding: 0;
      @include ccs-inset-inline($end: $carbon--spacing-03);
    }
  }
}

@include exports("copy-input") {
  @include copy-input;
}