app.scss

* {
    /*
// 
// Copyright (c) Microsoft. All rights reserved. 
// THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF 
// ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY 
// IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR 
// PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT. 
// 
*/

    header .logo {
        background-image: app-asset-url("logo-small.png");
    }

    .header {
        margin-bottom: 8px;
    }

    .header h3.app_name, .modal-header h3 {
        font-size: 15px;
    }

    hr.split {
        margin-top: 8px;
        margin-bottom: 10px;
    }

    .linkModal .inputVsoProject {
        width: 330px;
    }

    .linkModal .results {
        margin-top: 15px;
    }

    .linkModal .inputVsoWorkItemId {
        width: calc(100% - 174px);
        box-sizing: border-box;
        height: 30px;
        display: inline-block;
    }

    .admin .closeAdmin {
        float: right;
        opacity: 0.5;
    }

    .admin .closeAdmin:hover {
        opacity: 1;
    }

    .login .closeLogin {
        float: right;
        opacity: 0.5;
    }

    .login .closeLogin:hover {
        opacity: 1;
    }

    .workItems p.help {
        font-size: 13px;
        margin-top: 27px;
        line-height: 13px;
        text-align: center;
        margin-bottom: 8px;
        color: #d1d1d1;
    }

    .workItems .action {
        position: relative;
        top: 2px;
        opacity: 0.2;
    }

    .workItems .action:hover {
        opacity: 1;
        text-decoration: none;
    }

    .workItems .workItem {
        padding: 0px 10px 17px 10px;
        border-bottom: 1px solid #dedede;
        margin-top: 18px;
        position: relative;
    }

    .workItems .workItem .avatar {
        float: left;
        position: absolute;
        left: 0px;
    }

    .workItem-title {
        line-height: 14px;
        margin-bottom: 8px;
        font-size: 14px;
    }

    .workItem-fields-list {
        margin-left: 0px;
        color: #7b7b7b;
        list-style-type: none;
    }

    .workItem-field-item {
        padding-top: 8px;
        line-height: 18px;
    }

    .workItem-field-name {
        font-weight: 500;
    }

    .workItem-field-name-icon {
        opacity: 0.5;
    }

    .workItems-header {
        font-size: 13px;
        line-height: 13px;
        border-bottom: 1px solid #dedede;
        padding-bottom: 8px;
        margin-bottom: 18px;
    }

    .center {
        text-align: center;
    }

    .buttons {
        margin: 0px 22px 0px;
    }

    .buttons li {
        display: inline-block;
        min-width: 70px;
    }

    .buttons li button {
        color: inherit;
        width: 100%;
    }

    .form-horizontal.project-selection .help {
        font-size: 13px;
        text-align: center;
    }

    .form-horizontal.project-selection .control-label {
        float: left;
        width: 140px;
        padding-top: 5px;
        text-align: left;
        margin-left: 16px;
    }
    .control-group.project-selection {
        font-size: 13px;
        padding-left: 140px;
        padding-bottom: 10px;
    }

    .notifyModal textarea {
        width: 100%;
        box-sizing: border-box;
        height: 100px;
    }

    .notifyModal .copyLastComment {
        display: block;
        margin-bottom: 20px;
    }

    .notifyModal label {
        margin-bottom: 0.5em;
    }

    .attachments img,
    .attachments input {
        vertical-align: middle;
    }

    .attachments img {
        width: 30px;
    }

    .settings {
        table-layout: fixed;

        &.table tbody tr:hover td,
        .table tbody tr:hover th {
            background-color: #f5f5f5;
        }
    }

    .settings tbody tr td:first-of-type {
        word-wrap: break-word;
    }

    .modal-header {
        display: flex;
        align-items: center;
        flex-direction: horizontal;

        .spacer {
            flex-grow: 1;
        }
        .busySpinner {
            display: none;
            width: 32px;
            height: 11px;
            background: url("data:image/gif;base64,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");
        }
    }

    .controlButtons {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        width: 100%;

        > * {
            margin-left: 4px;

            &:first-child {
                margin-left: 0;
            }
        }

        .cog {
            opacity: 0.5;
        }

        .cog:hover {
            opacity: 1;
        }

        .user {
            opacity: 0.5;
        }

        .user:hover {
            opacity: 1;
        }
    }

    .form {
        display: flex;
        flex-direction: column;
        align-items: left;
        justify-content: center;

        .form-input {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: left;

            > * {
                margin-left: 10px;

                &:first-child {
                    margin-left: 0;
                    min-width: 80px;
                }
            }
        }
    }
}