202 lines
4.0 KiB
Sass
Executable File
202 lines
4.0 KiB
Sass
Executable File
// 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%
|