mfbs

commit

fc81e24f9090d9944d09716e19383e5291b03005

parent

67db45373f101c87eaa0db9f708aded4e2024846

Author

Tobias Bengfort <tobias.bengfort@posteo.de>

Date

2023-07-04 19:59

add styling for ::file-selector-button

Diffstat

2 files changed, 21 insertions, 0 deletions

diff --git a/examples/styleguide.html b/examples/styleguide.html

@@ -172,6 +172,10 @@
  172   172         <input type="search" id="search" pattern="^a.*" />
  173   173       </p>
  174   174       <p>
   -1   175         <label for="file">Example file</label>
   -1   176         <input type="file" id="file" />
   -1   177       </p>
   -1   178       <p>
  175   179         <label for="output">Example output</label>
  176   180         <output name="result" id="output">100</output>
  177   181       </p>

diff --git a/sass/form.scss b/sass/form.scss

@@ -69,3 +69,20 @@ button,
   69    69 
   70    70     @include button-color($color-link, $color-bg, $color-link-focus);
   71    71 }
   -1    72 
   -1    73 input[type="file"]::file-selector-button {
   -1    74     @extend %inputBase;
   -1    75     background: $color-bg-tint;
   -1    76     color: $color-fg;
   -1    77     border: 0;
   -1    78     cursor: pointer;
   -1    79 
   -1    80     margin-block: -0.3em;
   -1    81     margin-inline: -0.75em 0.75em;
   -1    82     border-inline-end: 1px solid $color-border;
   -1    83 }
   -1    84 input[type="file"]:disabled::file-selector-button {
   -1    85     background: transparent;
   -1    86     color: inherit;
   -1    87     cursor: not-allowed;
   -1    88 }