gaf-mobile/app/styles/modules/Milestones.less

GAF mobile Web site

@import (reference) "../libs/mixins";
@import (reference) "../themes/variables";
@import "Dropdown";

/* Milestones Layout */

.Milestones-item-stateContructor(@color, @this: @this) {
  .BubbleTag,
  .BubbleTag::after {
    background: @color;
  }

  .@{this}-itemHeading {
    color: @color;
  }
}

.Milestones {
    @this: Milestones;

    color: @text-color-dark;

    &-user {
        position: static;
        margin-bottom: 16px;
        overflow: visible;
    }

    &-userInner {
        .flex();
    }

    &-userContent {
        .flex();
        flex-direction: column;
        justify-content: center;
        width: 100%;
        margin-left: 16px;

    }

    &-action {
        &-item {
            .list-unstyled();
            position: relative;
            width: 100%;
            padding-top: 10px;
            padding-left: 0;

            &--dropdown {
                display: flex;
                align-items: center;
            }
        }

        &-btn {
            margin-top: 4px;
        }

        &-icon {
            margin-left: auto;
            border: 0;
            background: none;
        }

        &-settings {
            position: absolute;
            top: 50px;
            right: 0;
        }
    }

    &-userName {
        font-size: @type-size-lge;
        margin-bottom: 4px;
    }

    &-header {
        .flex();
        .flex-align-items(center);
        .flex-justify-content(space-between);
    }

    &-list {
        padding: 0;
    }

    &-showList {
        /* Needed to override the Card position */
        position: static;
        margin-bottom: 16px;
    }

    &-itemCompleteIcon {
      display: none;
      margin-right: 4px;
      border: 2px solid @quinary-color;
      border-radius: 50%;
      padding: 2px;
      color: @quinary-color;
      font-size: @type-size-xsml;
    }

    &-itemHeading {
        font-size: @type-size-xsml;
        font-weight: @type-weight-bold;
        text-transform: uppercase;
    }

    &-itemDescription {
        .text-wrap();
    }

    &-item {
        .flex();
        .flex-justify-content(space-between);

        &.is-@{this}-item-complete {
            .Milestones-item-stateContructor(@quinary-color);

            .@{this}-itemCompleteIcon {
                display: inline;
            }
        }

        &.is-@{this}-item-current {
            .Milestones-item-stateContructor(@primary-color-xlight);

            .@{this}-itemContent,
            .@{this}-ratePrice {
                font-weight: @type-weight-bold;
            }
        }
    }

    &-itemInner {
        .flex();
    }

    &-itemContent {
        margin: 0 8px;
    }

    &-body {
        margin-bottom: 12px;
        padding: 16px;
        border: 1px solid @septenary-color-xxlight;
        background: @body-bg-light;
    }

    &-tag,
    &-rate {
        .flex-shrink(0);
    }

    &-rate {
        .flex();
        .flex-align-items(right);
        .flex-justify-content(center);
        flex-direction: column;
        text-align: right;
        font-size: @type-size-sml;
    }

    &-ratePrice {
        font-size: @type-size-lge;
        font-weight: @type-weight-medium;
    }

    &-info {
        .flex();
        .flex-align-items(flex-start);
        .flex-justify-content(space-between);
        padding: 36px;
        background: @snap-bg-dark;

        &-primary {
            margin-right: 35px;

            .Icon {
                width: 32px;
                height: 32px;
                stroke: transparent;
                fill: @septenary-color-xxxlight;
            }
        }

        &-secondary {
            color: @text-color-light;
        }
    }

    &-about {
        padding: 36px;
        background: @body-bg-light;

        &-title {
            margin-bottom: 36px;
            text-transform: capitalize;
            color: @text-color-xdark;
        }

        &-illustration {
            .flex();
            .flex-align-items(center);
            .flex-justify-content(space-between);
            margin: 36px 0;
        }

        &-step {
            .flex();
            .flex-align-items(center);
            .flex-justify-content(space-around);
            .flex-direction(column);
            color: @text-color-xdark;

            svg {
                width: 90px;
                height: 90px;
                stroke: transparent;
            }
        }

        &-details {
            .flex();
            .flex-align-items(flex-start);
            .flex-justify-content(flex-start);

            &:not(:last-child) {
                margin-bottom: 36px;
            }
        }

        &-icon {
            margin-right: 20px;

            svg {
                width: 24px;
                height: 24px;
                fill: @quinary-color;
            }
        }

        &-highlight {
            color: @quinary-color;
        }

        &-cta {
            width: 100%;
        }
    }
}