Switched to SASS
This commit is contained in:
mmk2410
parent
b0fb34a4ab
commit
61c56cc177
4 changed files with 200 additions and 93 deletions
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
/res/css/.sass-cache
|
||||
/res/css/*.map
|
||||
|
|
@ -1,105 +1,98 @@
|
|||
body{
|
||||
font-family: 'Roboto', sans-serif;
|
||||
body {
|
||||
font-family: "Roboto", sans-serif;
|
||||
background: #f4f4f4;
|
||||
margin: 0px;
|
||||
}
|
||||
.actionbar{
|
||||
margin: 0px; }
|
||||
|
||||
.actionbar {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
position: fixed;
|
||||
background: #03A9F4;
|
||||
background: #03a9f4;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
padding-left: 340px;
|
||||
color: #fff;
|
||||
font-size: 25px;
|
||||
line-height: 60px;
|
||||
box-shadow: 4px 4px 4px 0px #999;
|
||||
}
|
||||
-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; }
|
||||
|
||||
.drawer{
|
||||
.drawer {
|
||||
width: 320px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
background: #FFF;
|
||||
background: #fff;
|
||||
border-right-width: 1px;
|
||||
border-right-color: #cecece;
|
||||
border-right-style: solid;
|
||||
}
|
||||
border-right-style: solid; }
|
||||
|
||||
.drawerimg{
|
||||
width: 100%;
|
||||
}
|
||||
.drawerimg {
|
||||
width: 100%; }
|
||||
|
||||
.draweritem{
|
||||
.draweritem {
|
||||
height: 72px;
|
||||
line-height: 72px;
|
||||
font-size: 18px;
|
||||
padding-left: 16px;
|
||||
}
|
||||
padding-left: 16px; }
|
||||
|
||||
.draweritem:hover{
|
||||
background: #e0e0e0;
|
||||
}
|
||||
.draweritem:hover {
|
||||
background: #e0e0e0; }
|
||||
|
||||
.drawerdivider{
|
||||
.drawerdivider, .carddivider {
|
||||
border-top-color: #cecece;
|
||||
border-top-width: 1px;
|
||||
border-top-style: solid;
|
||||
}
|
||||
border-top-style: solid; }
|
||||
|
||||
.main{
|
||||
.main {
|
||||
width: calc(100% - 320px);
|
||||
height: 100%;
|
||||
margin-left: 320px;
|
||||
margin-top: 60px;
|
||||
}
|
||||
margin-top: 60px; }
|
||||
|
||||
.card{
|
||||
.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;
|
||||
}
|
||||
float: left; }
|
||||
|
||||
.input{
|
||||
.input {
|
||||
width: 100%;
|
||||
resize: none;
|
||||
border: 0px;
|
||||
height: 100px;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-size: 16px;
|
||||
padding: 20px;
|
||||
}
|
||||
padding: 20px; }
|
||||
|
||||
.carddivider{
|
||||
width: 100%;
|
||||
border-top-color: #cecece;
|
||||
border-top-width: 1px;
|
||||
border-top-style: solid;
|
||||
}
|
||||
.carddivider {
|
||||
width: 100%; }
|
||||
|
||||
.cardtext{
|
||||
margin: 20px;
|
||||
}
|
||||
.cardtext {
|
||||
padding: 20px; }
|
||||
|
||||
.cardbuttons{
|
||||
.cardbuttons {
|
||||
float: right;
|
||||
padding: 20px;
|
||||
}
|
||||
padding: 20px; }
|
||||
|
||||
.cardbutton{
|
||||
.cardbutton {
|
||||
min-width: 64px;
|
||||
margin-left: 8px;
|
||||
color: #000000;
|
||||
padding: 5px;
|
||||
}
|
||||
padding: 5px; }
|
||||
|
||||
.cardbutton:hover{
|
||||
background: #e0e0e0;
|
||||
}
|
||||
.cardbutton:hover {
|
||||
background: #e0e0e0; }
|
||||
|
||||
/*# sourceMappingURL=main.css.map */
|
||||
|
|
|
|||
112
res/css/main.sass
Normal file
112
res/css/main.sass
Normal 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
|
||||
Reference in a new issue