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>
</body>
</html>
</html>

177
res/css/main.css
View file

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