mmk2410/morse-converter-web
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Responsible

Browse source
This commit is contained in:
mmk2410 2015-04-02 10:46:06 +02:00
parent 0e70a4d47f
commit 5f52be4cac
4 changed files with 223 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

57
res/css/main.css
View file

@ -10,17 +10,25 @@ body {
background: #03a9f4;
top: 0px;
left: 0px;
padding-left: 340px;
padding-left: 320px;
color: #fff;
font-size: 25px;
line-height: 60px;
-webkit-box-shadow: 4px 4px 4px 0px #999;
-moz-box-shadow: 4px 4px 4px 0px #999;
-ms-box-shadow: 4px 4px 4px 0px #999;
box-shadow: 4px 4px 4px 0px #999; }
-webkit-box-shadow: 0px 4px 4px 0px #999;
-moz-box-shadow: 0px 4px 4px 0px #999;
-ms-box-shadow: 0px 4px 4px 0px #999;
box-shadow: 0px 4px 4px 0px #999; }
.menuicon {
height: 30px;
position: fixed;
top: 0px;
left: 0px;
padding: 15px;
cursor: pointer; }
.drawer {
width: 320px;
width: 300px;
top: 0px;
left: 0px;
position: absolute;
@ -28,7 +36,8 @@ body {
background: #fff;
border-right-width: 1px;
border-right-color: #cecece;
border-right-style: solid; }
border-right-style: solid;
z-index: 50; }
.drawerimg {
width: 100%; }
@ -48,9 +57,9 @@ body {
border-top-style: solid; }
.main {
width: calc(100% - 320px);
height: 100%;
margin-left: 320px;
width: calc(100% - 300px);
height: calc(100%-60px);
margin-left: 300px;
margin-top: 60px; }
.card {
@ -90,12 +99,38 @@ body {
.cardbutton {
min-width: 64px;
margin-left: 8px;
padding: 5px; }
padding: 5px;
color: #03a9f4; }
.cardbutton:hover {
background: #e0e0e0; }
.overlay {
background: #000;
opacity: 0;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 30; }
#outputcard {
display: none; }
@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); } }
/*# sourceMappingURL=main.css.map */

42
res/css/main.sass
View file

@ -1,7 +1,7 @@
$font-stack: 'Roboto', sans-serif
$body-color: #f4f4f4
$primary-color: #03a9f4
$drawer-width: 320px
$drawer-width: 300px
$actionbar-height: 60px
$actionbar-shadow: #999
$divider-color: #cecece
@ -38,7 +38,15 @@ body
color: #fff
font-size: 25px
line-height: $actionbar-height
+box-shadow(4px,4px,4px,0px,$actionbar-shadow)
+box-shadow(0px,4px,4px,0px,$actionbar-shadow)
.menuicon
height: 30px
position: fixed
top: 0px
left: 0px
padding: 15px
cursor: pointer
.drawer
width: $drawer-width
@ -50,6 +58,7 @@ body
border-right-width: 1px
border-right-color: $divider-color
border-right-style: solid
z-index: 50
.drawerimg
width: 100%
@ -69,8 +78,8 @@ body
border-top-style: solid
.main
width: calc(100% - 320px)
height: 100%
width: calc(100% - 300px)
height: calc(100%-60px)
margin-left: $drawer-width
margin-top: $actionbar-height
@ -107,9 +116,34 @@ body
min-width: 64px
margin-left: 8px
padding: 5px
color: $primary-color
.cardbutton:hover
background: $hovered-element-color
.overlay
background: #000
opacity: 0
position: fixed
top: 0px
left: 0px
width: 100%
height: 100%
z-index: 30
#outputcard
display: none
@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)