Merge branch 'master' of mowoe.com:reverend/lostplaces-frontend
This commit is contained in:
commit
9e061f9566
@ -11,11 +11,12 @@
|
||||
padding: 8px;
|
||||
margin-bottom: $-margin-bottom;
|
||||
|
||||
&:focus, &:active{
|
||||
&:focus, &:active, &:invalid{
|
||||
margin-bottom: $-margin-bottom - 1px;
|
||||
border-bottom: 2px solid $-wine-red;
|
||||
background-color: $-almost-white;
|
||||
border-radius: 3px 3px 0 0;
|
||||
border-radius: 3px 3px 0 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -31,10 +32,6 @@
|
||||
padding: 3px;
|
||||
position: relative;
|
||||
top: -$-margin-bottom;
|
||||
|
||||
&:before{
|
||||
content: '* ';
|
||||
}
|
||||
}
|
||||
|
||||
&--error{
|
||||
|
@ -1,13 +1,13 @@
|
||||
.LP-Link {
|
||||
color: $-grey;
|
||||
text-decoration: none;
|
||||
font-family: $-primary-sans-serif-accent-font;
|
||||
font-family: $-primary-sans-serif-font;
|
||||
&:hover {
|
||||
color: $-light-brown;
|
||||
}
|
||||
|
||||
.LP-Text{
|
||||
font-family: $-primary-sans-serif-accent-font;
|
||||
.LP-Paragraph{
|
||||
font-family: $-primary-sans-serif-font;
|
||||
&:hover{
|
||||
color: $-light-brown;
|
||||
}
|
||||
|
@ -1,9 +1,10 @@
|
||||
.LP-Menu{
|
||||
border-left: 1px solid $-light-brown;
|
||||
.LP-Menu__List {
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
justify-content: space-around;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
@ -11,7 +12,6 @@
|
||||
.LP-Menu__Item {
|
||||
padding: 15px 0;
|
||||
margin: 0;
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
background-color: transparent;
|
||||
}
|
||||
@ -24,6 +24,24 @@
|
||||
color: $-wine-red;
|
||||
}
|
||||
}
|
||||
|
||||
&--sidebar{
|
||||
border: none;
|
||||
min-width: 80px;
|
||||
.LP-Menu__List{
|
||||
flex-direction: column;
|
||||
|
||||
.LP-Menu__Item{
|
||||
text-align: left;
|
||||
border-left: 1px solid $-light-brown;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $-viewport-medium){
|
||||
@ -32,7 +50,11 @@
|
||||
.LP-Menu__List{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start
|
||||
justify-content: flex-start;
|
||||
|
||||
.LP-Menu__Item{
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1,3 +1,11 @@
|
||||
{
|
||||
|
||||
"title": "Navigation",
|
||||
"variants": [
|
||||
{
|
||||
"name": "Sidebar",
|
||||
"context":{
|
||||
"modifier": "--sidebar"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
@ -1,4 +1,4 @@
|
||||
<nav class="LP-Menu">
|
||||
<nav class="LP-Menu LP-Menu{{modifier}}">
|
||||
<ul class="LP-Menu__List">
|
||||
<li class="LP-Menu__Item">{{> @link text='Home'}}</li>
|
||||
<li class="LP-Menu__Item">{{> @link text='About'}}</li>
|
||||
|
@ -1,11 +1,12 @@
|
||||
.LP-Form{
|
||||
max-width: 900px;
|
||||
.LP-Form__Fieldset{
|
||||
border: none;
|
||||
|
||||
.LP-Form__Legend{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding: 0;
|
||||
font-family: $-primary-sans-serif-font;
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
.LP-Form__Composition{
|
||||
@ -18,23 +19,19 @@
|
||||
padding: 6px 15px;
|
||||
|
||||
&--wider{
|
||||
flex: 5 1 200px;
|
||||
flex: 5 1;
|
||||
}
|
||||
|
||||
&--wide{
|
||||
flex: 4 1 150px;
|
||||
flex: 4 1;
|
||||
}
|
||||
|
||||
&--narrow{
|
||||
flex: 2 0 50px;
|
||||
flex: 2 0;
|
||||
}
|
||||
|
||||
&--narrower{
|
||||
flex: 1 0 25px;
|
||||
}
|
||||
|
||||
input{
|
||||
width: 100%;
|
||||
flex: 1 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -4,6 +4,10 @@
|
||||
justify-content: space-between;
|
||||
margin-bottom: 70px;
|
||||
height: 60px;
|
||||
|
||||
&__Navigation{
|
||||
flex-grow: 2;
|
||||
}
|
||||
|
||||
&__Logo {
|
||||
height: 60px;
|
||||
@ -11,6 +15,7 @@
|
||||
object-fit:cover;
|
||||
max-height: 100%;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
|
||||
.LP-Image{
|
||||
height: 60px;
|
||||
@ -18,6 +23,19 @@
|
||||
}
|
||||
}
|
||||
|
||||
.LP-Header__UserInformation{
|
||||
margin-right: 3%;
|
||||
.LP-Paragraph{
|
||||
font-family: $-primary-sans-serif-font;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.LP-Link{
|
||||
margin: 0 3px;
|
||||
padding: 4px 4px;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $-viewport-medium){
|
||||
.LP-Header__Logo{
|
||||
width: 60px;
|
||||
|
@ -2,6 +2,11 @@
|
||||
<div class="LP-Header__Logo">
|
||||
{{> @image source='/images/logo.png'}}
|
||||
</div>
|
||||
<div class="LP-Header__UserInformation">
|
||||
<span class="LP-Paragraph">
|
||||
Hi there!{{> @link url="#" text="Login"}} or {{> @link url="#" text="Sign up"}}
|
||||
</span>
|
||||
</div>
|
||||
<div class="LP-Header__Navigation">
|
||||
{{> @navigation}}
|
||||
</div>
|
||||
|
@ -1,8 +1,15 @@
|
||||
.LP-MainContainer {
|
||||
margin: 0 auto;
|
||||
max-width: 1280px;
|
||||
max-width: 1280px;
|
||||
}
|
||||
|
||||
.LP-HorizontalLine{
|
||||
color: $-grey;
|
||||
}
|
||||
|
||||
@media(max-width: $-viewport-small){
|
||||
.LP-MainContainer {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
@ -20,6 +20,7 @@
|
||||
.LP-Headline{
|
||||
position: relative;
|
||||
top: 15px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -9,12 +9,12 @@
|
||||
.LP-Link {
|
||||
color: #565656;
|
||||
text-decoration: none;
|
||||
font-family: Roboto, Arial, sans-serif; }
|
||||
font-family: Montserrat, Helvetica, sans-serif; }
|
||||
.LP-Link:hover {
|
||||
color: #C09F80; }
|
||||
.LP-Link .LP-Text {
|
||||
font-family: Roboto, Arial, sans-serif; }
|
||||
.LP-Link .LP-Text:hover {
|
||||
.LP-Link .LP-Paragraph {
|
||||
font-family: Montserrat, Helvetica, sans-serif; }
|
||||
.LP-Link .LP-Paragraph:hover {
|
||||
color: #C09F80; }
|
||||
|
||||
.LP-Link__IconWrapper {
|
||||
@ -86,11 +86,12 @@
|
||||
border-bottom: 1px solid #565656;
|
||||
padding: 8px;
|
||||
margin-bottom: 30px; }
|
||||
.LP-Input .LP-Input__Field:focus, .LP-Input .LP-Input__Field:active {
|
||||
.LP-Input .LP-Input__Field:focus, .LP-Input .LP-Input__Field:active, .LP-Input .LP-Input__Field:invalid {
|
||||
margin-bottom: 29px;
|
||||
border-bottom: 2px solid #76323F;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 3px 3px 0 0; }
|
||||
border-radius: 3px 3px 0 0;
|
||||
box-shadow: none; }
|
||||
.LP-Input .LP-Input__Label {
|
||||
font-family: Montserrat, Helvetica, sans-serif;
|
||||
font-size: 16px; }
|
||||
@ -101,8 +102,6 @@
|
||||
padding: 3px;
|
||||
position: relative;
|
||||
top: -30px; }
|
||||
.LP-Input .LP-Input__Message:before {
|
||||
content: '* '; }
|
||||
.LP-Input--error .LP-Input__Field {
|
||||
margin-bottom: 25px;
|
||||
border-bottom: 2px solid #76323F;
|
||||
@ -230,33 +229,45 @@
|
||||
.LP-TagList .LP-TagList__List .LP-TagList__Item {
|
||||
margin: 6px; }
|
||||
|
||||
.LP-Menu .LP-Menu__List {
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
margin: 0; }
|
||||
|
||||
.LP-Menu .LP-Menu__Item {
|
||||
padding: 15px 0;
|
||||
margin: 0;
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
background-color: transparent; }
|
||||
|
||||
.LP-Menu .LP-Link__Text {
|
||||
color: #565656;
|
||||
font-weight: bold;
|
||||
text-shadow: 0px 0px 20px white; }
|
||||
.LP-Menu .LP-Link__Text:hover {
|
||||
color: #76323F; }
|
||||
.LP-Menu {
|
||||
border-left: 1px solid #C09F80; }
|
||||
.LP-Menu .LP-Menu__List {
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
padding: 0;
|
||||
margin: 0; }
|
||||
.LP-Menu .LP-Menu__Item {
|
||||
padding: 15px 0;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
background-color: transparent; }
|
||||
.LP-Menu .LP-Link__Text {
|
||||
color: #565656;
|
||||
font-weight: bold;
|
||||
text-shadow: 0px 0px 20px white; }
|
||||
.LP-Menu .LP-Link__Text:hover {
|
||||
color: #76323F; }
|
||||
.LP-Menu--sidebar {
|
||||
border: none;
|
||||
min-width: 80px; }
|
||||
.LP-Menu--sidebar .LP-Menu__List {
|
||||
flex-direction: column; }
|
||||
.LP-Menu--sidebar .LP-Menu__List .LP-Menu__Item {
|
||||
text-align: left;
|
||||
border-left: 1px solid #C09F80;
|
||||
margin-bottom: 10px; }
|
||||
.LP-Menu--sidebar .LP-Menu__List .LP-Menu__Item:last-child {
|
||||
margin-bottom: 0; }
|
||||
|
||||
@media (max-width: 750px) {
|
||||
.LP-Menu .LP-Menu__List {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start; } }
|
||||
justify-content: flex-start; }
|
||||
.LP-Menu .LP-Menu__List .LP-Menu__Item {
|
||||
flex: 1 1 auto; } }
|
||||
|
||||
@media (max-width: 450px) {
|
||||
.LP-Menu .LP-Menu__List {
|
||||
@ -268,15 +279,27 @@
|
||||
justify-content: space-between;
|
||||
margin-bottom: 70px;
|
||||
height: 60px; }
|
||||
.LP-Header__Navigation {
|
||||
flex-grow: 2; }
|
||||
.LP-Header__Logo {
|
||||
height: 60px;
|
||||
margin: 25px;
|
||||
object-fit: cover;
|
||||
max-height: 100%;
|
||||
overflow: hidden; }
|
||||
overflow: hidden;
|
||||
flex-shrink: 0; }
|
||||
.LP-Header__Logo .LP-Image {
|
||||
height: 60px; }
|
||||
|
||||
.LP-Header__UserInformation {
|
||||
margin-right: 3%; }
|
||||
.LP-Header__UserInformation .LP-Paragraph {
|
||||
font-family: Montserrat, Helvetica, sans-serif;
|
||||
white-space: nowrap; }
|
||||
.LP-Header__UserInformation .LP-Link {
|
||||
margin: 0 3px;
|
||||
padding: 4px 4px; }
|
||||
|
||||
@media (max-width: 750px) {
|
||||
.LP-Header__Logo {
|
||||
width: 60px; }
|
||||
@ -376,30 +399,28 @@
|
||||
.LP-Footer .LP-LinkList__List .LP-LinkList__Item .LP-Link:hover {
|
||||
background-color: inherit; }
|
||||
|
||||
.LP-Form {
|
||||
max-width: 900px; }
|
||||
.LP-Form .LP-Form__Fieldset {
|
||||
border: none; }
|
||||
.LP-Form .LP-Form__Fieldset .LP-Form__Legend {
|
||||
margin: 0;
|
||||
padding: 0; }
|
||||
.LP-Form .LP-Form__Fieldset .LP-Form__Composition {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between; }
|
||||
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field {
|
||||
flex: 3 1 100px;
|
||||
padding: 6px 15px; }
|
||||
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--wider {
|
||||
flex: 5 1 200px; }
|
||||
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--wide {
|
||||
flex: 4 1 150px; }
|
||||
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--narrow {
|
||||
flex: 2 0 50px; }
|
||||
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--narrower {
|
||||
flex: 1 0 25px; }
|
||||
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field input {
|
||||
width: 100%; }
|
||||
.LP-Form .LP-Form__Fieldset {
|
||||
border: none; }
|
||||
.LP-Form .LP-Form__Fieldset .LP-Form__Legend {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: Montserrat, Helvetica, sans-serif;
|
||||
font-size: 21px; }
|
||||
.LP-Form .LP-Form__Fieldset .LP-Form__Composition {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between; }
|
||||
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field {
|
||||
flex: 3 1 100px;
|
||||
padding: 6px 15px; }
|
||||
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--wider {
|
||||
flex: 5 1; }
|
||||
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--wide {
|
||||
flex: 4 1; }
|
||||
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--narrow {
|
||||
flex: 2 0; }
|
||||
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--narrower {
|
||||
flex: 1 0; }
|
||||
|
||||
@media (max-width: 650px) {
|
||||
.LP-Form .LP-Form__Fieldset .LP-Form__Composition--breakable {
|
||||
@ -423,6 +444,10 @@
|
||||
.LP-HorizontalLine {
|
||||
color: #565656; }
|
||||
|
||||
@media (max-width: 650px) {
|
||||
.LP-MainContainer {
|
||||
width: 100%; } }
|
||||
|
||||
.LP-PlaceOverview .LP-PlaceOverview__Info .LP-PlaceOveriew__Image {
|
||||
width: 700px;
|
||||
box-shadow: 0 0 10px #565656;
|
||||
@ -439,7 +464,8 @@
|
||||
top: -15px; }
|
||||
.LP-PlaceOverview .LP-PlaceOverview__Info .LP-PlaceOverView__Description .LP-Headline {
|
||||
position: relative;
|
||||
top: 15px; }
|
||||
top: 15px;
|
||||
margin-bottom: 30px; }
|
||||
|
||||
.LP-PlaceOverview .LP-PlaceOverView__ImageList {
|
||||
list-style-type: none;
|
||||
|
Loading…
Reference in New Issue
Block a user