Initial commit

res/css/main.sass

@@ -0,0 +1,201 @@
+// 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%