accounts-frontend/packages/app/components/dev/apps/applicationsIndex.scss

@import '~app/components/ui/fonts.scss';
@import '~app/components/ui/colors.scss';

.container {
  max-width: 500px;
  margin: 0 auto;
  background: white;
  border-bottom: 10px solid #ddd8ce;

  @media (max-width: 540px) {
    margin: 0 20px;
  }
}

.welcomeContainer {
  padding: 30px;
  background: #f5f5f5;
  text-align: center;
  border-bottom: 1px solid #eeeeee;
}

.welcomeTitle {
  font-size: 30px;
  font-family: $font-family-title;
  max-width: 245px;
  margin: 0 auto 15px;
  line-height: 1.2;
}

.welcomeTitleDelimiter {
  width: 86px;
  height: 3px;
  background: $green;
  margin: 0 auto 15px;
}

.welcomeParagraph {
  color: #666666;
  font-size: 14px;
  margin-bottom: 15px;
  line-height: 1.3;

  &:last-of-type {
    margin-bottom: 0;
  }
}

.emptyState {
  padding: 30px 30px 50px;
  text-align: center;
}

.emptyStateIcon {
  width: 120px;
  height: 120px;
  margin-bottom: 20px;
}

@mixin emptyStateAnimation($order) {
  animation: slide-in-bottom 1s // Total animation time
    0.2s + 0.2s * $order // Increase each next element delay
    cubic-bezier(0.075, 0.82, 0.165, 1) // easeOutCirc
    both;
}

.emptyStateText {
  font-family: $font-family-title;
  color: #666666;
  font-size: 16px;
  margin-bottom: 20px;
  line-height: 20px;
}

.noAppsContainer {
  visibility: hidden;
}

.noAppsAnimating {
  visibility: visible;

  .emptyStateText {
    > div {
      &:nth-child(1) {
        @include emptyStateAnimation(0);
      }

      &:nth-child(2) {
        @include emptyStateAnimation(1);
      }
    }
  }

  .emptyStateActionButton {
    @include emptyStateAnimation(2);
  }
}

@keyframes slide-in-bottom {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.appsListTitleContainer {
  display: flex;
  align-items: center;
  padding: 20px 30px;
  border-bottom: 1px solid #eee;
}

.appsListTitle {
  font-family: $font-family-title;
  font-size: 24px;
  flex-grow: 1;
}

.appsListAddNewAppBtn {
}

.appsListContainer {
  margin-bottom: 30px;
}

.appItemContainer {
  border-bottom: 1px solid #eee;
}

.appItemTile {
  padding: 15px 30px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.25s;
}

.appTileTitle {
  flex-grow: 1;
}

.appName {
  font-family: $font-family-title;
  font-size: 24px;
}

.appStats {
  color: #999;
  font-size: 14px;
}

.appItemToggle {
}

.appItemToggleIcon {
  composes: arrowRight from '~app/components/ui/icons.scss';

  position: relative;
  left: 0;

  font-size: 28px;
  color: #ebe8e1;

  transition: 0.25s;

  .appItemTile:hover & {
    color: #777;
  }

  .appExpanded & {
    color: #777;
    transform: rotate(360deg) !important; // Prevent it from hover rotating
  }
}

$appDetailsContainerRightLeftPadding: 30px;

.appDetailsContainer {
  background: #f5f5f5;
  border-top: 1px solid #eee;
  padding: 5px $appDetailsContainerRightLeftPadding;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.appDetailsInfoField {
  position: relative;
  margin-bottom: 20px;
}

.editAppLink {
  position: absolute;
  top: 4px;
  right: 0;

  font-size: 12px;
  color: #9a9a9a;
  border-bottom: 0;
}

.pencilIcon {
  composes: pencil from '~app/components/ui/icons.scss';

  font-size: 14px;
  position: relative;
  bottom: 2px;
}

.appDetailsDescription {
  font-size: 12px;
  color: #9a9a9a;
  line-height: 1.4;
  margin-bottom: 20px;
}

.appActionsButtons {
}

.appActionButton {
  margin: 0 10px 10px 0;

  &:last-of-type {
    margin-right: 0;
  }
}

.appActionContainer {
  position: absolute;
  top: 100%;
  left: 0;
  padding: 0 $appDetailsContainerRightLeftPadding;
  background: #f5f5f5;
}

.appActionDescription {
  composes: appDetailsDescription;

  margin-top: 6px;
}

.continueActionButtonWrapper {
  display: inline-block;
  margin-left: 10px;
}

.continueActionLink {
  composes: textLink from '~app/index.scss';

  font-family: $font-family-title;
  font-size: 14px;
  color: #666;
}

.performingAction {
  font-family: $font-family-title;
  font-size: 14px;
  color: #666;
}