This repository has been archived on 2022-02-10. You can view files and clone it, but cannot push or open issues or pull requests.
morse-converter-web/res/css/main.sass

169 lines
3.3 KiB
Sass
Raw Normal View History

2015-04-01 19:23:40 +02:00
$font-stack: 'Roboto', sans-serif
$body-color: #f4f4f4
$primary-color: #03a9f4
2015-04-02 10:46:06 +02:00
$drawer-width: 300px
2015-04-01 19:23:40 +02:00
$actionbar-height: 60px
$actionbar-shadow: #999
$divider-color: #cecece
2015-04-08 02:34:44 +02:00
$drawer-item-height: 58px
2015-04-01 19:23:40 +02:00
$drawer-item-font-size: 18px
$card-padding: 20px
=border-radius($radius)
-webkit-border-radius: $radius
-moz-border-radius: $radius
-ms-border-radius: $radius
border-radius: $radius
=box-shadow($horizontal, $vertical, $blur, $spread, $color)
-webkit-box-shadow: $horizontal $vertical $blur $spread $color
-moz-box-shadow: $horizontal $vertical $blur $spread $color
-ms-box-shadow: $horizontal $vertical $blur $spread $color
box-shadow: $horizontal $vertical $blur $spread $color
body
font-family: $font-stack
background: $body-color
margin: 0px
.actionbar
width: 100%
height: $actionbar-height
position: fixed
background: $primary-color
top: 0px
left: 0px
padding-left: $drawer-width + 20
color: #fff
font-size: 25px
line-height: $actionbar-height
2015-04-02 10:46:06 +02:00
+box-shadow(0px,4px,4px,0px,$actionbar-shadow)
.menuicon
height: 30px
position: fixed
top: 0px
left: 0px
padding: 15px
cursor: pointer
2015-04-01 19:23:40 +02:00
.drawer
width: $drawer-width
top: 0px
left: 0px
position: absolute
height: 100%
background: #fff
border-right-width: 1px
border-right-color: $divider-color
border-right-style: solid
2015-04-02 10:46:06 +02:00
z-index: 50
2015-04-08 02:34:44 +02:00
font-weight: 500
2015-04-01 19:23:40 +02:00
.drawerimg
width: 100%
.draweritem
height: $drawer-item-height
line-height: $drawer-item-height
font-size: $drawer-item-font-size
padding-left: 16px
cursor: pointer
2015-04-01 19:23:40 +02:00
2015-04-08 02:34:44 +02:00
.draweritembottom
@extend .draweritem
bottom: 0px
position: absolute
width: calc(100% - 16px)
2015-04-01 19:23:40 +02:00
.drawerdivider
border-top-color: $divider-color
border-top-width: 1px
border-top-style: solid
2015-04-08 02:34:44 +02:00
.drawerdividerbottom
@extend .drawerdivider
bottom: 60px
position: absolute
width: 100%
2015-04-01 19:23:40 +02:00
.main
2015-04-02 10:46:06 +02:00
width: calc(100% - 300px)
height: calc(100%-60px)
2015-04-01 19:23:40 +02:00
margin-left: $drawer-width
margin-top: $actionbar-height
.card
width: calc(50% - 36px)
background: #fff
+border-radius(1px)
+box-shadow(0px,0px,2px,2px,$divider-color)
display: inline-block
margin: 16px
float: left
.input
width: 100%
resize: none
border: 0px
height: 100px
font-family: $font-stack
font-size: 16px
padding: $card-padding
.carddivider
@extend .drawerdivider
width: 100%
.cardtext
padding: $card-padding
.cardbuttons
float: right
padding: $card-padding
.cardbutton
min-width: 64px
margin-left: 8px
padding: 5px
2015-04-02 10:46:06 +02:00
color: $primary-color
cursor: pointer
2015-04-01 19:23:40 +02:00
2015-04-02 10:46:06 +02:00
.overlay
background: #000
opacity: 0
position: fixed
top: 0px
left: 0px
width: 100%
height: 100%
z-index: 30
#output
-moz-hyphens: auto
-ms-hyphens: auto
-webkit-hyphens: auto
hyphens: auto
word-wrap: break-word
#outputcard
display: none
2015-04-02 10:46:06 +02:00
2015-04-08 02:34:44 +02:00
#writtenmorse
color: $primary-color
2015-04-02 10:46:06 +02:00
@media screen and (max-width: 1400px)
.drawer
display: none
border-right-width: 0px
.actionbar
padding-left: 60px
.main
width: 100%
margin-left: 0px
@media screen and (max-width: 750px)
.card
width: calc(100% - 36px)