mail/src/sass/views/_add-account.scss

.view-add-account {
    height: 100%;
    background-color: $color-grey-lightest;
    color: $color-grey-dark;
    overflow-y: auto;

    h1 {
        padding: 60px 0 50px 0;
        text-align: center;
        margin: 0;
        font-size: 32px;
        line-height: 64px;

        @include respond-to(mobile) {
            padding: 30px 0 20px 0;
        }
    }

    ul {
        list-style-type: none;
        width: 320px;
        margin: 0 auto 30px auto;
        padding: 0;
        border-width: 1px;
        border-style: solid;
        border-color: $color-grey-lighter;

        li {
            position: relative;
            height: 68px;
            cursor: pointer;

            &.google {
                background-color: white;

                div {
                    width: 164px;
                    height: 58px;
                    margin: 0px auto;
                    padding: 8px 0;

                    img {
                        width: 164px;
                        height: 58px;
                    }
                }
            }

            &.whiteout {
                background-color: $color-grey-lightest;

                div {
                    width: 210px;
                    margin: 0 auto;
                    padding: 15px 0;

                    img {
                        width: 100%;
                    }
                }
            }

            &.outlook {
                background-color: white;

                div {
                    width: 256px;
                    margin: 0 auto;
                    padding: 13px 0;

                    img {
                        width: 100%;
                    }
                }
            }

            &.yahoo {
                background-color: $color-grey-lightest;

                div {
                    width: 181px;
                    margin: 0 auto;

                    img {
                        width: 100%;
                    }
                }
            }

            &.tonline {
                background-color: white;

                div {
                    width: 271px;
                    margin: 0 auto;

                    img {
                        width: 100%;
                    }
                }
            }

            &.other {
                h3 {
                    margin: 0;
                    line-height: 68px;
                    font-size: 21px;
                    text-align: center;
                }
            }

            &.disabled {
                opacity: 0.2;
            }

            &.enabled {
                &:hover,
                &:focus {
                    opacity: 0.6;
                }

                &:active {
                    opacity: 1;
                    top: 1px;
                    left: 1px;
                }
            }
        }
    }
}