Header and footer styles, rework homepage
This commit is contained in:
@@ -1,25 +1,21 @@
|
||||
@footer-height: 52px;
|
||||
@import "variables.less";
|
||||
@import "main.less";
|
||||
@import "header-footer.less";
|
||||
@import "forms.less";
|
||||
|
||||
html {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
}
|
||||
body {
|
||||
background-color: #fff;
|
||||
margin-bottom: @footer-height;
|
||||
}
|
||||
#page {
|
||||
padding-bottom: 60px;
|
||||
section {
|
||||
background-color: transparent;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 40px 0;
|
||||
padding: 40px;
|
||||
margin: 20px 0;
|
||||
border-width: 1px 0;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: #fff;
|
||||
box-shadow: 0 0 15px #000;
|
||||
border-radius: 4px;
|
||||
|
||||
.step-num {
|
||||
text-align: center;
|
||||
@@ -70,6 +66,7 @@ body {
|
||||
&.submit {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
padding: 40px 0;
|
||||
.btn {
|
||||
font-size: 6em;
|
||||
}
|
||||
@@ -85,36 +82,12 @@ body {
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
background-color: #eee;
|
||||
opacity: 0.5;
|
||||
opacity: 0.7;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: @footer-height;
|
||||
overflow: hidden;
|
||||
.navbar {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
.create-run-form {
|
||||
h1 {
|
||||
color: #fff;
|
||||
padding: 20px 0;
|
||||
font-size: 3em;
|
||||
text-shadow: 4px 4px 6px #000;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
.create-order-form {
|
||||
textarea {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
.run-order-status {
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
|
||||
14
assets/linker/styles/forms.less
Normal file
14
assets/linker/styles/forms.less
Normal file
@@ -0,0 +1,14 @@
|
||||
.create-run-form {
|
||||
h1 {
|
||||
color: #fff;
|
||||
padding: 20px 0;
|
||||
font-size: 3em;
|
||||
text-shadow: 4px 4px 6px #000;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
.create-order-form {
|
||||
textarea {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
27
assets/linker/styles/header-footer.less
Normal file
27
assets/linker/styles/header-footer.less
Normal file
@@ -0,0 +1,27 @@
|
||||
header.navbar {
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
footer.navbar {
|
||||
border-top: 1px solid #eee;
|
||||
border-radius: 0;
|
||||
margin-bottom: 0;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: @footer-height;
|
||||
overflow: hidden;
|
||||
}
|
||||
header, footer {
|
||||
.bg {
|
||||
background-color: white;
|
||||
opacity: 0.5;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
}
|
||||
.container {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
8
assets/linker/styles/main.less
Normal file
8
assets/linker/styles/main.less
Normal file
@@ -0,0 +1,8 @@
|
||||
html {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
}
|
||||
body {
|
||||
background-color: #fff;
|
||||
margin-bottom: @footer-height;
|
||||
}
|
||||
1
assets/linker/styles/variables.less
Normal file
1
assets/linker/styles/variables.less
Normal file
@@ -0,0 +1 @@
|
||||
@footer-height: 52px;
|
||||
@@ -1,52 +1,47 @@
|
||||
div.create-run-form(ng-controller='CreateRunCtrl')
|
||||
form(name='form',novalidate,role='form')
|
||||
form.container(name='form',novalidate,role='form')
|
||||
h1.text-center
|
||||
| start a new lunch run
|
||||
section.name
|
||||
.bg
|
||||
.container
|
||||
.row
|
||||
.col-xs-2.step-num
|
||||
span.glyphicon.glyphicon-info-sign
|
||||
.col-xs-10
|
||||
input#name.form-control(type='text',ng-model='run.name',required,placeholder='Name your run')
|
||||
.row
|
||||
.col-xs-2.step-num
|
||||
span.glyphicon.glyphicon-info-sign
|
||||
.col-xs-10
|
||||
input#name.form-control(type='text',ng-model='run.name',required,placeholder='Name your run')
|
||||
section
|
||||
.bg
|
||||
.container
|
||||
.row
|
||||
.col-xs-2.step-num
|
||||
span.glyphicon.glyphicon-user
|
||||
.col-xs-10
|
||||
input#creatorName.form-control(type='text',ng-model='run.creatorName',required,placeholder='Your name')
|
||||
input#creatorEmail.form-control(type='email',ng-model='run.creatorEmail',required,placeholder='Your email')
|
||||
.row
|
||||
.col-xs-2.step-num
|
||||
span.glyphicon.glyphicon-user
|
||||
.col-xs-10
|
||||
input#creatorName.form-control(type='text',ng-model='run.creatorName',required,placeholder='Your name')
|
||||
input#creatorEmail.form-control(type='email',ng-model='run.creatorEmail',required,placeholder='Your email')
|
||||
section
|
||||
.bg
|
||||
.container
|
||||
.row
|
||||
.col-xs-2.step-num
|
||||
span.glyphicon.glyphicon-map-marker
|
||||
.col-xs-10
|
||||
input#restaurant.form-control(type='text',ng-model='run.restaurant',placeholder='Restaurant')
|
||||
input#menuUrl.form-control(type='url',ng-model='run.menuUrl',placeholder='Menu URL')
|
||||
.row
|
||||
.col-xs-2.step-num
|
||||
span.glyphicon.glyphicon-map-marker
|
||||
.col-xs-10
|
||||
input#restaurant.form-control(type='text',ng-model='run.restaurant',placeholder='Restaurant')
|
||||
input#menuUrl.form-control(type='url',ng-model='run.menuUrl',placeholder='Menu URL')
|
||||
|
||||
section.invitees
|
||||
.bg
|
||||
.container
|
||||
.row
|
||||
.col-xs-2.step-num
|
||||
span.glyphicon.glyphicon-list
|
||||
.col-xs-10
|
||||
.invitee(ng-repeat='i in run.invitees')
|
||||
input.form-control(ng-model='i.name',required,placeholder='Name')
|
||||
input.form-control(ng-model='i.email',required,placeholder='Email')
|
||||
button.btn.btn-warning(ng-click='removeInvitee($index)')
|
||||
span.glyphicon.glyphicon-remove
|
||||
.row
|
||||
.col-xs-2.step-num
|
||||
span.glyphicon.glyphicon-list
|
||||
.col-xs-10
|
||||
.invitee(ng-repeat='i in run.invitees')
|
||||
input.form-control(ng-model='i.name',required,placeholder='Name')
|
||||
input.form-control(ng-model='i.email',required,placeholder='Email')
|
||||
button.btn.btn-warning(ng-click='removeInvitee($index)')
|
||||
span.glyphicon.glyphicon-remove
|
||||
|
||||
button.btn.btn-default(ng-click='addInvitee()')
|
||||
span.glyphicon.glyphicon-plus
|
||||
| Invite another!
|
||||
button.btn.btn-default(ng-click='addInvitee()')
|
||||
span.glyphicon.glyphicon-plus
|
||||
| Invite another!
|
||||
|
||||
section.submit
|
||||
.container
|
||||
button.btn.btn-lg.btn-primary.btn-block(ng-click="create(run)",ng-disabled="form.$invalid")
|
||||
| Create
|
||||
button.btn.btn-lg.btn-primary.btn-block(ng-click="create(run)",ng-disabled="form.$invalid")
|
||||
| Create
|
||||
|
||||
Reference in New Issue
Block a user