sync
This commit is contained in:
parent
10c3b3179e
commit
6413492586
@ -1,3 +1,7 @@
|
||||
.LP-Input:has( .LP-Input__Field:disabled){
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.LP-Input{
|
||||
$-margin-bottom: 30px;
|
||||
display: flex;
|
||||
@ -17,11 +21,29 @@
|
||||
background-color: $-secondary-background-color;
|
||||
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{
|
||||
font-family: $-primary-sans-serif-font;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.LP-Input__Message{
|
||||
font-family: $-primary-sans-serif-font;
|
||||
font-style: italic;
|
||||
|
@ -3,3 +3,8 @@
|
||||
<input type="text" id="input123" class="LP-Input__Field"/>
|
||||
<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>
|
@ -25,6 +25,11 @@
|
||||
<input type="text" id="input123" class="LP-Input__Field"/>
|
||||
<span class="LP-Input__Message">Field is required</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 class="LP-Form__Composition">
|
||||
|
@ -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 {
|
||||
color: #565656;
|
||||
text-decoration: none;
|
||||
@ -13,7 +21,7 @@
|
||||
display: inline; }
|
||||
|
||||
.LP-Headline {
|
||||
font-family: "Trebuchet MS", Helvetica, sans-serif;
|
||||
font-family: Montserrat, Helvetica, sans-serif;
|
||||
color: #565656;
|
||||
font-size: 1.7rem;
|
||||
padding-top: 0px;
|
||||
@ -29,7 +37,7 @@
|
||||
|
||||
.LP-Text {
|
||||
color: black;
|
||||
font-family: "Times New Roman", Times, serif;
|
||||
font-family: Crimson, Times, serif;
|
||||
font-size: 1.2rem; }
|
||||
|
||||
.LP-Icon {
|
||||
@ -45,6 +53,62 @@
|
||||
.LP-Icon__List .LP-Icon__Item {
|
||||
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 {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
@ -75,7 +139,7 @@
|
||||
padding-bottom: 10px; }
|
||||
|
||||
.LP-Place .LP-Place__Info .LP-Place__Title {
|
||||
font-family: "Trebuchet MS", Helvetica, sans-serif;
|
||||
font-family: Montserrat, Helvetica, sans-serif;
|
||||
color: #565656;
|
||||
font-size: 1rem;
|
||||
padding: 0px;
|
||||
@ -86,7 +150,7 @@
|
||||
color: #565656; }
|
||||
|
||||
.LP-Place .LP-Place__Info .LP-Place__Detail {
|
||||
font-family: "Trebuchet MS", Helvetica, sans-serif;
|
||||
font-family: Montserrat, Helvetica, sans-serif;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin-top: 5px;
|
||||
@ -103,9 +167,48 @@
|
||||
background-color: #D7CEC7;
|
||||
border-radius: 2px; }
|
||||
.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; }
|
||||
|
||||
.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 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
Loading…
Reference in New Issue
Block a user