oceanprotocol/market

View on GitHub
src/components/Header/UserPreferences/index.module.css

Summary

Maintainability
Test Coverage
.preferences {
  padding: calc(var(--spacer) / 4) calc(var(--spacer) / 3);
  cursor: pointer;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  margin-left: calc(var(--spacer) / 3);
  background-color: var(--background-content);
  white-space: nowrap;
}

.preferences svg {
  display: inline-block;
  vertical-align: middle;
}

.caret {
  composes: caret from '../Menu.module.css';
}

.icon {
  fill: var(--brand-grey-light);
  transition: 0.2s ease-out;
  width: 1em;
  height: 1em;
}

.preferences:hover .icon,
.preferences:focus .icon,
.preferences:active .icon,
.preferences[aria-expanded='true'] .icon {
  fill: var(--font-color-text);
}

.preferencesDetails {
  padding: calc(var(--spacer) / 4) calc(var(--spacer) / 2);
  max-width: 20rem;
}

.preferencesDetails > li > div,
.preferencesDetails p:last-child {
  margin-bottom: 0;
}

.preferencesDetails li p {
  margin-top: calc(var(--spacer) / 8);
}

.preferencesDetails > li {
  padding-top: calc(var(--spacer) / 3);
  padding-bottom: calc(var(--spacer) / 3);
}

.preferencesDetails li:last-child,
.preferencesDetails li:last-child p {
  border-bottom: none;
  margin-bottom: 0;
}