Commander1024/lostplaces-frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

sync

Browse Source
This commit is contained in:
Leonhard Strohmidel 2020-07-31 19:52:57 +02:00
parent 10c3b3179e
commit 6413492586
4 changed files with 140 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
components/01_Atoms/input/_input.scss
View File

@ -1,3 +1,7 @@
.LP-Input:has( .LP-Input__Field:disabled){
background-color: red;
}
.LP-Input{ .LP-Input{
$-margin-bottom: 30px; $-margin-bottom: 30px;
display: flex; display: flex;
@ -17,11 +21,29 @@
background-color: $-secondary-background-color; background-color: $-secondary-background-color;
border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
} }
&:disabled{
background-color: transparent;
border-bottom: 1px dashed $-secondary-color;
cursor: not-allowed;
&:active{
margin-bottom: $-margin-bottom;
border-radius: 0;
}
~.LP-Input__Message{
visibility: hidden;
}
}
} }
.LP-Input__Label{ .LP-Input__Label{
font-family: $-primary-sans-serif-font; font-family: $-primary-sans-serif-font;
font-size: 18px; font-size: 18px;
} }
.LP-Input__Message{ .LP-Input__Message{
font-family: $-primary-sans-serif-font; font-family: $-primary-sans-serif-font;
font-style: italic; font-style: italic;

5
components/01_Atoms/input/input.hbs
View File

@ -2,4 +2,9 @@
<label for="input123" class="LP-Input__Label">First name</label> <label for="input123" class="LP-Input__Label">First name</label>
<input type="text" id="input123" class="LP-Input__Field"/> <input type="text" id="input123" class="LP-Input__Field"/>
<span class="LP-Input__Message">Field is required</span> <span class="LP-Input__Message">Field is required</span>
</div>
<div class="LP-Input">
<label for="input123" class="LP-Input__Label">First name</label>
<input type="text" id="input123" class="LP-Input__Field" disabled="disabled"/>
<span class="LP-Input__Message">Field is required</span>
</div> </div>

5
components/02_Molecules/form/form.hbs
View File

@ -25,6 +25,11 @@
<input type="text" id="input123" class="LP-Input__Field"/> <input type="text" id="input123" class="LP-Input__Field"/>
<span class="LP-Input__Message">Field is required</span> <span class="LP-Input__Message">Field is required</span>
</span> </span>
<span class="LP-Form__Field LP-Form__Field--narrower LP-Input">
<label for="input123" class="LP-Input__Label">Disabled</label>
<input type="text" id="input123" class="LP-Input__Field" disabled="disabled"/>
<span class="LP-Input__Message">Field is required</span>
</span>
</div> </div>
<div class="LP-Form__Composition"> <div class="LP-Form__Composition">

113
public/components.css
View File

@ -1,3 +1,11 @@
@font-face {
font-family: Crimson;
src: url("fonts/Crimson/CrimsonText-Regular.ttf"), url("fonts/Crimson/CrimsonText-Bold.ttf"), url("fonts/Crimson/CrimsonText-Italic.ttf"); }
@font-face {
font-family: Montserrat;
src: url("fonts/Montserrat/Montserrat-Regular.ttf"), url("fonts/Montserrat/Montserrat-Bold.ttf"), url("fonts/Montserrat/Montserrat-Italic.ttf"); }
.LP-Link { .LP-Link {
color: #565656; color: #565656;
text-decoration: none; text-decoration: none;
@ -13,7 +21,7 @@
display: inline; } display: inline; }
.LP-Headline { .LP-Headline {
font-family: "Trebuchet MS", Helvetica, sans-serif; font-family: Montserrat, Helvetica, sans-serif;
color: #565656; color: #565656;
font-size: 1.7rem; font-size: 1.7rem;
padding-top: 0px; padding-top: 0px;
@ -29,7 +37,7 @@
.LP-Text { .LP-Text {
color: black; color: black;
font-family: "Times New Roman", Times, serif; font-family: Crimson, Times, serif;
font-size: 1.2rem; } font-size: 1.2rem; }
.LP-Icon { .LP-Icon {
@ -45,6 +53,62 @@
.LP-Icon__List .LP-Icon__Item { .LP-Icon__List .LP-Icon__Item {
padding: 0 3px; } padding: 0 3px; }
.LP-Input:has(.LP-Input__Field:disabled) {
background-color: red; }
.LP-Input {
display: flex;
flex-direction: column;
margin-bottom: -30px;
padding: 10px 0; }
.LP-Input .LP-Input__Field {
border: none;
border-bottom: 1px solid #565656;
padding: 8px;
margin-bottom: 30px; }
.LP-Input .LP-Input__Field:focus, .LP-Input .LP-Input__Field:active {
margin-bottom: 29px;
border-bottom: 2px solid #76323F;
background-color: #f9f9f9;
border-radius: 3px 3px 0 0; }
.LP-Input .LP-Input__Field:disabled {
background-color: transparent;
border-bottom: 1px dashed #565656;
cursor: not-allowed; }
.LP-Input .LP-Input__Field:disabled:active {
margin-bottom: 30px;
border-radius: 0; }
.LP-Input .LP-Input__Field:disabled ~ .LP-Input__Message {
visibility: hidden; }
.LP-Input .LP-Input__Label {
font-family: Montserrat, Helvetica, sans-serif;
font-size: 18px; }
.LP-Input .LP-Input__Message {
font-family: Montserrat, Helvetica, sans-serif;
font-style: italic;
font-size: 13px;
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;
margin-bottom: 29px; }
.LP-Input--error .LP-Input__Message {
color: #76323F; }
@media (max-width: 650px) {
.LP-Input .LP-Input__Label {
font-family: Montserrat, Helvetica, sans-serif;
font-size: 2.5vw; } }
@media (max-width: 390px) {
.LP-Input .LP-Input__Label {
font-family: Montserrat, Helvetica, sans-serif;
font-size: 18px; } }
.LP-Logo { .LP-Logo {
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
@ -75,7 +139,7 @@
padding-bottom: 10px; } padding-bottom: 10px; }
.LP-Place .LP-Place__Info .LP-Place__Title { .LP-Place .LP-Place__Info .LP-Place__Title {
font-family: "Trebuchet MS", Helvetica, sans-serif; font-family: Montserrat, Helvetica, sans-serif;
color: #565656; color: #565656;
font-size: 1rem; font-size: 1rem;
padding: 0px; padding: 0px;
@ -86,7 +150,7 @@
color: #565656; } color: #565656; }
.LP-Place .LP-Place__Info .LP-Place__Detail { .LP-Place .LP-Place__Info .LP-Place__Detail {
font-family: "Trebuchet MS", Helvetica, sans-serif; font-family: Montserrat, Helvetica, sans-serif;
padding: 0; padding: 0;
margin: 0; margin: 0;
margin-top: 5px; margin-top: 5px;
@ -103,9 +167,48 @@
background-color: #D7CEC7; background-color: #D7CEC7;
border-radius: 2px; } border-radius: 2px; }
.LP-SecurityMeasure__List .LP-SecurityMeasure__Item .LP-Text { .LP-SecurityMeasure__List .LP-SecurityMeasure__Item .LP-Text {
font-family: "Trebuchet MS", Helvetica, sans-serif; font-family: Montserrat, Helvetica, sans-serif;
font-size: 1.2rem; } font-size: 1.2rem; }
.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: 0 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%; }
@media (max-width: 650px) {
.LP-Form .LP-Form__Fieldset .LP-Form__Composition--breakable {
display: flex;
flex-direction: column;
justify-content: space-between; } }
@media (max-width: 390px) {
.LP-Form .LP-Form__Fieldset .LP-Form__Composition {
display: flex;
flex-direction: column;
justify-content: space-between; }
.LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field {
flex: 3 1 100px; } }
.LP-Header { .LP-Header {
display: flex; display: flex;
align-items: center; align-items: center;