packages/styles/scss/utilities/_opacity.scss

   1 // When adding new opacity classes, add the values also in Storybook
   2 // applications/storybook/src/stories/cssUtilities/Opacity.stories.tsx
   3
   4 .opacity-70 {
   5         opacity: 0.7;
   6 }
   7
   8 .opacity-65 {
   9         opacity: 0.65;
  10 }
  11
  12 .opacity-50 {
  13         opacity: 0.5;
  14 }
  15
  16 .opacity-40 {
  17         opacity: 0.4;
  18 }
  19
  20 .opacity-30 {
  21         opacity: 0.3;
  22 }
  23
  24 .opacity-0 {
  25         opacity: 0;
  26         pointer-events: none;
  27 }
  28
  29 .focus\:opacity-100 {
  30         &:focus,
  31         &:focus-within {
  32                 opacity: 1;
  33                 pointer-events: all;
  34         }
  35 }
  36
  37 // Make hover-only interaction focusable with keyboard
  38 // deprecated: opacity-on-hover
  39 $container-name: 'group-hover-opacity-container';
  40
  41 .group-hover\:opacity-100 {
  42         &:not([aria-expanded='true'], .is-active) {
  43                 opacity: 0; // Do not use visibility to keep it focusable even when invisible
  44         }
  45
  46         // Need a container to manage with focus-within
  47         @at-root {
  48                 .#{$container-name}:focus-within &,
  49                 .#{$container-name}:focus-within .mouse\:group-hover\:opacity-100 {
  50                         opacity: 1;
  51                 }
  52         }
  53
  54         @include media('mouse') {
  55                 .#{$container-name}:not(:hover, :focus, :focus-within) &-no-width:not([aria-expanded='true'], .is-active) {
  56                         position: absolute;
  57                         transition: none;
  58                         pointer-events: none;
  59                         visibility: hidden;
  60                 }
  61
  62                 @at-root {
  63                         .#{$container-name}:hover &,
  64                         .#{$container-name}:hover .mouse\:group-hover\:opacity-100 {
  65                                 opacity: 1;
  66                                 visibility: visible;
  67                         }
  68                 }
  69
  70                 @at-root {
  71                         &,
  72                         .mouse\:group-hover\:opacity-100 {
  73                                 opacity: 0;
  74                                 will-change: opacity;
  75                         }
  76                 }
  77         }
  78 }