decentraland-ui/dist/components/ModalNavigation/ModalNavigation.css

Decentraland's UI components and styles

.dcl.modal-navigation {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 24px 0px 24px;
  position: relative;
}

.dcl.modal-navigation-title {
  color: var(--text);
  font-size: 21px;
  line-height: 30px;
  letter-spacing: 0.3px;
  margin-bottom: 8px;
}

.dcl.modal-navigation-subtitle {
  color: var(--secondary-text);
  font-size: 17px;
  line-height: 26px;
  letter-spacing: -0.2px;
  text-align: center;
}

.dcl.modal-navigation-button {
  position: absolute;
  width: 24px;
  height: 24px;
  top: 24px;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  filter: var(--brightness);
  margin-top: 3.5px;
}

.dcl.modal-navigation-button.modal-navigation-close {
  right: 24px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M-5-5h24v24H-5z'/%3E%3Cpath fill='%23FFF' d='M13.706.363l-.069-.069a1 1 0 0 0-1.414 0L7 5.517 1.777.294a1 1 0 0 0-1.414 0L.294.363a1 1 0 0 0 0 1.414L5.517 7 .294 12.223a1 1 0 0 0 0 1.414l.069.069a1 1 0 0 0 1.414 0L7 8.483l5.223 5.223a1 1 0 0 0 1.414 0l.069-.069a1 1 0 0 0 0-1.414L8.483 7l5.223-5.223a1 1 0 0 0 0-1.414z'/%3E%3C/g%3E%3C/svg%3E");
}

.dcl.modal-navigation-button.modal-navigation-back {
  left: 24px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='14' viewBox='0 0 8 14'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0-5h8v24H0z'/%3E%3Cpath fill='%23FFF' d='M0 7l6.379 6.228a.966.966 0 0 0 1.343 0 .912.912 0 0 0 0-1.31L2.686 7l5.036-4.917a.912.912 0 0 0 0-1.311.966.966 0 0 0-1.343 0L0 7z'/%3E%3C/g%3E%3C/svg%3E");
}

.dcl.modal-navigation-button.modal-navigation-info {
  right: 55px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 8.99992C0 4.03736 4.03736 0 8.99992 0C13.9625 0 17.9998 4.03736 17.9998 8.99992C17.9998 13.9625 13.9625 17.9998 8.99992 17.9998C4.03736 17.9998 0 13.9625 0 8.99992ZM1.79998 8.99992C1.79998 12.9698 5.03006 16.1999 8.99992 16.1999C12.9698 16.1999 16.1999 12.9698 16.1999 8.99992C16.1999 5.03006 12.9698 1.79998 8.99992 1.79998C5.03006 1.79998 1.79998 5.03006 1.79998 8.99992ZM6.87991 4.96142C7.44237 4.34685 8.20494 4.0011 9.00038 4C9.79581 4.00088 10.5584 4.34659 11.1208 4.96123C11.6832 5.57587 11.9994 6.40921 12 7.27833C12 8.60834 11.103 9.40218 10.5089 9.92803L10.5067 9.93C10.4962 9.93922 10.4858 9.94841 10.4754 9.95756C10.3371 10.0792 10.205 10.1954 10.0986 10.3117C9.78747 10.6508 9.76306 10.9592 9.7623 10.9725L9.76306 11.5H8.2377V10.9442C8.2377 10.8458 8.25982 9.96333 9.02097 9.1325C9.18897 8.95668 9.36486 8.79008 9.54799 8.63333C10.1086 8.13833 10.4754 7.77667 10.4754 7.27833C10.4754 6.38917 9.8134 5.66667 9.00038 5.66667C8.18736 5.66667 7.52536 6.38917 7.52536 7.27833H6C6.00101 6.4092 6.31744 5.57599 6.87991 4.96142ZM9.76306 14V12.3333H8.2377V14H9.76306Z' fill='white'/%3E%3C/svg%3E");
}