@import "library.scss";
// TODO: do we need these below if they are already included in screen.scss?
@import "reset.scss";
@import "forms.scss";

/*--------------------------------------------------------------

                    * Default Typography.

-------------------------------------------------------------- */

html {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    box-sizing: border-box;
    color: rgb(36, 48, 50);
    font-size: 16px;
    line-height: 1.42857;
    text-rendering: optimizelegibility;
    font-family: $bodyFont;
    -webkit-font-smoothing: antialiased;
}

body {
    width: 100%;
    height: 100%;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    overflow-x: hidden;
}

h1 {
    font-size: 1.5em;
}

h2 {
    color: rgb(44, 42, 116);
    font-size: 1.3em;
}

h3 {
    font-size: 1.2em;
    line-height: 1;
}

h4 {
    font-size: 1.1em;
    line-height: 1.25em;
}

h5 {
    margin-bottom: 0.5em;
    font-size: 1em;
}

h6 {
    font-size: 1em;
}

h1 img,
h2 img,
h3 img,
h4 img,
h5 img,
h6 img {
    margin: 0;
}

em {
    padding-bottom: 1em;
}

.smaller {
    font-size: 0.8em;
}

/*--------------------------------------------------------------

                    * End Default Typography.

-------------------------------------------------------------- */

/* Sliding panels
--------------------------------------------- */
section[role=main] {
    padding-top: 20px;
    padding-bottom: 20px;
    overflow: hidden;

    .nav-tabs {
        li {
            &:hover {
                cursor: pointer;
            }
        }
    }

    .panels {
        height: 100%;
        background: white;
        width: calc(100% * 2);
        overflow: hidden;

        .mypanel {
            width: calc(100% / 2);
            float: left;
            -webkit-transition: transform .6s ease-out;
            -moz-transition: transform .6s ease-out;
            -o-transition: transform .6s ease-out;
            transition: transform .6s ease-out;
            background: white;

            &.opened {
                /* visible */
                -webkit-transform: translate(-100%, 0);
                -moz-transform: translate(-100%, 0);
                -ms-transform: translate(-100%, 0);
                transform: translate(-100%, 0);
            }

            &.closed {
                /* completely offscreen */
                -webkit-transform: translate(0%, 0);
                -moz-transform: translate(0%, 0);
                -ms-transform: translate(0%, 0);
                transform: translate(0%, 0);
            }

            .panelHeader {
                padding: 20px 0 20px 0;
                margin-left: 0;
                background: rgba(212, 212, 212, 0.2);

                h4 {
                    span {
                        &.usrNm {
                            font-weight: bold;
                            color: rgba(32, 32, 36, 0.8);
                            margin-left: 5px;
                        }
                    }
                }

                .panelTitle {
                    color: rgb(182, 182, 182);
                }
            }

            .roleEditSelect {
                border-bottom: 1px solid rgb(212, 212, 212);

                select:first-child {
                    margin-right: 10px;

                    &:after {
                        content: " > ";
                        display: inline;
                        margin-right: 10px;
                    }
                }
            }
        }
    }
}

.permissionList {
    div {
        &.checkbox {
            padding: 10px 0;

            @include border-radius(3px);

            &:nth-child(2n) {
                background-color: rgb(248, 248, 248);
            }
        }
    }

    label {
        font-size: 130%;
    }
}

.btn {
    text-transform: uppercase;
}

/********************************* Tables ********************************/
table {
    &.userRoleList {
        thead {
            border-bottom: none;

            tr {
                border-bottom: none;

                th {
                    color: grey;
                }
            }
        }
    }

    &.dataTable {
        margin: 15px auto;
    }

    tr {
        &.tabHeader {
            background: $tableHeaderGrey;
            color: $yellowTableHead;
            padding: 15px 0;
            text-transform: uppercase;

            a {
                color: $yellowTableHead;
            }

            td {}
        }
    }
}

.table-striped > tbody > tr:nth-child(odd) {
    background-color: rgb(222, 222, 222);
}

/********************************* Structure ********************************/
.topMargin {
    margin-top: 15px;
}

.paddingTop {
    padding: 20px 0;

    &.dropdown {
        padding: 7px 0 10px 0;
    }
}

.userEditSection, .userRolesPerm, .apiKeySection {
    padding: 10px 5px;

    h2 {
        margin: 10px 5px;
        text-align: left;
    }
}

.userRolesPerm {
    ul.dropdown-menu {
        max-height: 220px;
        overflow-y: scroll;
    }
}

div.folderStructure {
    &:first-child {
        margin-left: 15px;
    }
}