bitshift/static/sass/index.sass

/*
 Stylesheet for index.html.
 */

@import mixins
@import variables

$resultWidth: 830px
$sidebarWidth: 30px
$codeWidth: 500px
$hiddenInfoWidth: 300px

div#search-field
    @extend .t2

    bottom: 0
    height: 50%
    left: 0
    margin: auto
    margin-top: 15%
    max-height: 100px
    position: absolute
    right: 0
    top: 0
    width: 34%

    #title
        font-size: 4em
        padding-bottom: 0.5em
        text-align: center

        #title-bit
            color: $baseColor1

        #title-angle
            color: $baseColor3

        #title-shift
            color: $baseColor2
            font-style: italic

    form#search-bar

        input[type="text"]
            @include vendor(box-sizing, border-box)

            border: 1px solid $baseColor1
            font-size: 1.1em
            margin-bottom: 0px
            padding: 6px
            width: 100%

        div#advanced-search
            display: none
            background-color: white
            border: 1px solid $baseColor2
            margin: 0px
            overflow: auto

            >div
                @include vendor(box-sizing, border-box)

                float: left
                height: 100%

            >#col1
                width: 10%

            >#col2
                width: 84%

                ul
                    list-style: none

                    li
                        margin-bottom: 0.5em

                        label
                            display: block
                            font-size: 1.1em

                input[type="text"]
                    border-color: $baseColor3
                    font-size: 1em
                    padding: 2px
                    width: 100%

                #upper-half
                    >div
                        float: left
                        width: 50%

    &.partly-visible
        height: 1%
        margin-top: 3%
        width: 60%

        #title
            display: none

div#results
    margin-left: auto
    margin-right: auto
    width: 80%

    /* TODO:
        1) Sidebar
            - Add way to cycle through hits in the code.
        2) Hidden info
            - Use effect to make it transition into view.
            - Add date modified.
            - Get rid of symbols matches.
            - Don't use monospace.
            - Add links for authors.
            - Cross out search terms based on what's in the codelet.
        3) Header
            - Remove date modified.
            - Make the title bigger.
            - Add an icon for the website.
            - Change the spacing.
        4) Code body
            - Add highlighting.*/
    div.result
        width: $resultWidth
        height: 200px
        margin-top: 2%
        margin-bottom: 6%

        #display-info
            a
                text-decoration: none

                &:hover
                    color: orange

            #title
                margin-right: 50px

            #site
                text-transform: capitalize

            #date-modified
                font-style: italic
                color: #777
                display: block

        table
            border-collapse: collapse
            border: 1px solid #ccc
            height: inherit

            tr
                height: inherit

                td
                    overflow: scroll

                #sidebar
                    width: $sidebarWidth
                    background-color: #eee
                    border-right: 1px solid #ccc
                    height: inherit

                #code
                    width: $codeWidth
                    height: inherit
                    border-right: 1px solid #ccc

                    #tablecontainer
                        overflow: scroll
                        width: 100%
                        height: inherit
                        background-color: #49483e

                        table
                            table-layout:fixed
                            border-collapse: collapse
                            border: none
                            font-family: monospace

                #hidden-info
                    width: $hiddenInfoWidth
                    text-align: center
                    font-size: 1.2em
                    font-family: monospace

                    #date-created
                        display: block

                    #language
                        display: inline-block
                        padding: 3px
                        @include vendor(border-radius, 3px)
                        background-color: #eee
                        font-weight: bold
                        color: purple

                        &:hover
                            background-color: #ddd

                    #matches
                        span
                            color: red

                    #authors
                        span
                            color: red

        &.cascade
            @extend .t3