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

Switched to SASS

Browse source
This commit is contained in:
mmk2410 2015-04-01 19:23:40 +02:00
parent b0fb34a4ab
commit 61c56cc177
4 changed files with 200 additions and 93 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.gitignore vendored Normal file
View file

@ -0,0 +1,2 @@
/res/css/.sass-cache
/res/css/*.map

2
index.html
View file

@ -26,4 +26,4 @@
</div> </div>
</div> </div>
</body> </body>
</html> </html>

177
res/css/main.css
View file

@ -1,105 +1,98 @@
body{ body {
font-family: 'Roboto', sans-serif; font-family: "Roboto", sans-serif;
background: #f4f4f4; background: #f4f4f4;
margin: 0px; margin: 0px; }
}
.actionbar{
width: 100%;
height: 60px;
position: fixed;
background: #03A9F4;
top: 0px;
left: 0px;
padding-left: 340px;
color: #fff;
font-size: 25px;
line-height: 60px;
box-shadow: 4px 4px 4px 0px #999;
}
.drawer{ .actionbar {
width: 320px; width: 100%;
top: 0px; height: 60px;
left: 0px; position: fixed;
position: absolute; background: #03a9f4;
height: 100%; top: 0px;
background: #FFF; left: 0px;
border-right-width: 1px; padding-left: 340px;
border-right-color: #cecece; color: #fff;
border-right-style: solid; 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; }
.drawerimg{ .drawer {
width: 100%; width: 320px;
} top: 0px;
left: 0px;
position: absolute;
height: 100%;
background: #fff;
border-right-width: 1px;
border-right-color: #cecece;
border-right-style: solid; }
.draweritem{ .drawerimg {
height: 72px; width: 100%; }
line-height: 72px;
font-size: 18px;
padding-left: 16px;
}
.draweritem:hover{ .draweritem {
background: #e0e0e0; height: 72px;
} line-height: 72px;
font-size: 18px;
padding-left: 16px; }
.drawerdivider{ .draweritem:hover {
border-top-color: #cecece; background: #e0e0e0; }
border-top-width: 1px;
border-top-style: solid;
}
.main{ .drawerdivider, .carddivider {
width: calc(100% - 320px); border-top-color: #cecece;
height: 100%; border-top-width: 1px;
margin-left: 320px; border-top-style: solid; }
margin-top: 60px;
}
.card{ .main {
width: calc(50% - 36px); width: calc(100% - 320px);
background: #fff; height: 100%;
border-radius: 1px; margin-left: 320px;
box-shadow: 0px 0px 2px 2px #cecece; margin-top: 60px; }
display: inline-block;
margin: 16px;
float: left;
}
.input{ .card {
width: 100%; width: calc(50% - 36px);
resize: none; background: #fff;
border: 0px; -webkit-border-radius: 1px;
height: 100px; -moz-border-radius: 1px;
font-family: 'Roboto', sans-serif; -ms-border-radius: 1px;
font-size: 16px; border-radius: 1px;
padding: 20px; -webkit-box-shadow: 0px 0px 2px 2px #cecece;
} -moz-box-shadow: 0px 0px 2px 2px #cecece;
-ms-box-shadow: 0px 0px 2px 2px #cecece;
box-shadow: 0px 0px 2px 2px #cecece;
display: inline-block;
margin: 16px;
float: left; }
.carddivider{ .input {
width: 100%; width: 100%;
border-top-color: #cecece; resize: none;
border-top-width: 1px; border: 0px;
border-top-style: solid; height: 100px;
} font-family: "Roboto", sans-serif;
font-size: 16px;
padding: 20px; }
.cardtext{ .carddivider {
margin: 20px; width: 100%; }
}
.cardbuttons{ .cardtext {
float: right; padding: 20px; }
padding: 20px;
}
.cardbutton{ .cardbuttons {
min-width: 64px; float: right;
margin-left: 8px; padding: 20px; }
color: #000000;
padding: 5px;
}
.cardbutton:hover{ .cardbutton {
background: #e0e0e0; min-width: 64px;
} margin-left: 8px;
padding: 5px; }
.cardbutton:hover {
background: #e0e0e0; }
/*# sourceMappingURL=main.css.map */

112
res/css/main.sass Normal file
View file

@ -0,0 +1,112 @@
$font-stack: 'Roboto', sans-serif
$body-color: #f4f4f4
$primary-color: #03a9f4
$drawer-width: 320px
$actionbar-height: 60px
$actionbar-shadow: #999
$divider-color: #cecece
$drawer-item-height: 72px
$drawer-item-font-size: 18px
$hovered-element-color: #e0e0e0
$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
+box-shadow(4px,4px,4px,0px,$actionbar-shadow)
.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
.drawerimg
width: 100%
.draweritem
height: $drawer-item-height
line-height: $drawer-item-height
font-size: $drawer-item-font-size
padding-left: 16px
.draweritem:hover
background: $hovered-element-color
.drawerdivider
border-top-color: $divider-color
border-top-width: 1px
border-top-style: solid
.main
width: calc(100% - 320px)
height: 100%
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
.cardbutton:hover
background: $hovered-element-color