filespread/res/css/main.sass

// Variables
// COPYRIGHT (c) 2016 Marcel Kapfer (mmk2410)
// MIT License

$primaryColor: #9c27b0


/*      BODY        */

body
    font-family: "Roboto", sans-serif
    background: #f6f6f6
    color: #383838
    margin-top: 94px

.main
    height: 100%
    width: 100%
    margin-left: 0px

/*      HEADER      */
.header
    background-color: $primaryColor
    position: fixed
    top: 0px
    right: 0px
    left: 0px
    width: 100%
    height: 64px
    box-shadow: 2px 0px 2px 2px rgba(62, 62, 62, 0.45)

.title
    color: #fff
    font-size: 23px
    text-decoration: none
    line-height: 64px
    vertical-align: middle
    left: 75px
    position: absolute

/*      MAIN            */

.card
    margin-right: auto
    margin-left: auto
    width: 75%
    background: #fff
    border-radius: 2px
    padding: 24px
    box-shadow: 0px 1px 1.5px 1.5px rgba(62, 62, 62, 0.3)
    margin-bottom: 40px
    max-width: 1160px


.headline
    font-size: 24px
    color: #383838!important
    text-decoration: none
    display: block
    padding-bottom: 8px
    border-bottom: none!important

.card > p
    font-size: 14px
    line-height: 24px

.table-content
    max-height: 200px
    overflow: auto

/*      FOOTER          */

.footer
    font-size: 12px
    text-align: center

.footer a
    color: #383838
    text-decoration: none
    border-bottom: 1px solid transparent
    border-bottom-color: transparent
    transition: border-bottom-color 150ms ease-in-out 100ms

.footer a:hover
    border-bottom-color: #383838

/*      BUTTON          */

.button
    text-decoration: none
    color: #fff
    background-color: $primaryColor
    line-height: 36px
    min-width: 64px
    text-align: center
    height: 36px
    padding: 8px
    border-width: 1px
    border-style: solid
    border-color: $primaryColor
    box-shadow: 0.4px 1px 1.5px 1px #aaa
    -moz-box-shadow: 0.4px 1px 1.5px 1px #aaa
    -webkit-box-shadow: 0.4px 1px 1.5px 1px #aaa
    border-radius: 2px
    margin-top: 4px
    margin-bottom: 5px
    letter-spacing: 0.4px
    font-weight: 700
    font-size: 14px
    transition-property: box-shadow
    transition-delay: 50ms
    transition-duration: 125ms
    transition-timing-function: ease
    -moz-transition-property: box-shadow
    -moz-transition-delay: 50ms
    -moz-transition-duration: 125ms
    -moz-transition-timing-function: ease
    -webkit-transition-property: box-shadow
    -webkit-transition-delay: 50ms
    -webkit-transition-duration: 125ms
    -webkit-transition-timing-function: ease
    cursor: pointer

.button:hover, .button:hover
    box-shadow: 0.5px 1.8px 2.1px 1.4px #aaa
    -moz-box-shadow: 0.5px 1.8px 2.1px 1.4px #aaa
    -webkit-box-shadow: 0.5px 1.8px 2.1px 1.4px #aaa

input.button
    padding: 0px 8px

/*      INPUT FIELD     */

.itextfield
    border-color: transparent
    border-width: 1px
    font-size: 16px
    line-height: 22px
    width: 50%
    border-bottom-color: #aaa
    transition-property: border-bottom-color
    transition-delay: 50ms
    transition-duration: 125ms
    transition-timing-function: ease
    -moz-transition-property: border-bottom-color
    -moz-transition-delay: 50ms
    -moz-transition-duration: 125ms
    -moz-transition-timing-function: ease
    -webkit-transition-property: border-bottom-color
    -webkit-transition-delay: 50ms
    -webkit-transition-duration: 125ms
    -webkit-transition-timing-function: ease

.itextfield:focus
    border-bottom-color: #E91E63
    border-width: 2px
    outline: none

.itextarea
    @extend .itextfield
    min-height: 150px

.itextarea:focus
    @extend  .itextfield

/*      FILESPREAD      */

.edit_template
    display: none

.edit_list
    display: none

.remove_template
    display: none

.edit_address
    display: none

.remove_list
    display: none

/*      FORM            */
form
    margin-top: 20px

@media screen and (min-width: 1440px)

    .card
        width: 1160px

@media screen and (max-width: 720px)

    .card
        width: 82%

    .title
        left: 25px

    .itextfield
        width: 100%