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

Color Renaming

Browse Source
This commit is contained in:
reverend 2020-08-01 10:27:23 +02:00
parent 254e6aa2bd
commit d90646c9d0
10 changed files with 35 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
components/01_Atoms/button/_button.scss
View File

@ -1,13 +1,17 @@
.LP-Button{ .LP-Button{
background-color: $-secondary-accent-color; background-color: $-light-brown;
color: $-secondary-color; color: $-grey;
border: none; border: none;
padding: 8px 14px; padding: 8px 14px;
border-radius: 2px; border-radius: 2px;
font-weight: bold; font-weight: bold;
&:active { &:active{
background-color: $-primary-accent-color; background-color: $-wine-red;
color: $-secondary-accent-color; color:$-almost-white;
}
&--cancel{
background-color: $-almost-white;
} }
} }

2
components/01_Atoms/headline/_headline.scss
View File

@ -1,6 +1,6 @@
.LP-Headline{ .LP-Headline{
font-family: $-primary-sans-serif-font; font-family: $-primary-sans-serif-font;
color: $-secondary-color; color: $-grey;
font-size: 1.7rem; font-size: 1.7rem;
padding-top: 0px; padding-top: 0px;
margin-top: 0px; margin-top: 0px;

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

@ -7,14 +7,14 @@
.LP-Input__Field{ .LP-Input__Field{
border: none; border: none;
border-bottom: 1px solid $-secondary-color; border-bottom: 1px solid $-grey;
padding: 8px; padding: 8px;
margin-bottom: $-margin-bottom; margin-bottom: $-margin-bottom;
&:focus, &:active{ &:focus, &:active{
margin-bottom: $-margin-bottom - 1px; margin-bottom: $-margin-bottom - 1px;
border-bottom: 2px solid $-primary-accent-color; border-bottom: 2px solid $-wine-red;
background-color: $-secondary-background-color; background-color: $-almost-white;
border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
} }
} }
@ -40,19 +40,19 @@
&--error{ &--error{
.LP-Input__Field{ .LP-Input__Field{
margin-bottom: 25px; margin-bottom: 25px;
border-bottom: 2px solid $-primary-accent-color; border-bottom: 2px solid $-wine-red;
margin-bottom: $-margin-bottom - 1px; margin-bottom: $-margin-bottom - 1px;
} }
.LP-Input__Message{ .LP-Input__Message{
color: $-primary-accent-color; color: $-wine-red;
} }
} }
&--disabled{ &--disabled{
.LP-Input__Field, .LP-Input__Field:disabled{ .LP-Input__Field, .LP-Input__Field:disabled{
background-color: transparent; background-color: transparent;
border-bottom: 1px dashed $-secondary-color; border-bottom: 1px dashed $-grey;
cursor: not-allowed; cursor: not-allowed;
label + &{ label + &{
@ -70,7 +70,7 @@
} }
.LP-Input__Label{ .LP-Input__Label{
color: $-secondary-color; color: $-grey;
} }
} }
} }

6
components/01_Atoms/link/_link.scss
View File

@ -1,15 +1,15 @@
.LP-Link { .LP-Link {
color: $-secondary-color; color: $-grey;
text-decoration: none; text-decoration: none;
font-family: $-primary-sans-serif-accent-font; font-family: $-primary-sans-serif-accent-font;
&:hover { &:hover {
color: $-secondary-accent-color; color: $-light-brown;
} }
.LP-Text{ .LP-Text{
font-family: $-primary-sans-serif-accent-font; font-family: $-primary-sans-serif-accent-font;
&:hover{ &:hover{
color: $-secondary-accent-color; color: $-light-brown;
} }
} }
} }

4
components/03_Organisms/footer/_footer.scss
View File

@ -1,7 +1,7 @@
.LP-Footer{ .LP-Footer{
margin-top: 75px; margin-top: 75px;
width: 100%; width: 100%;
background-color: $-secondary-color; background-color: $-grey;
padding: 25px; padding: 25px;
.LP-LinkList__List{ .LP-LinkList__List{
@ -14,7 +14,7 @@
width: auto; width: auto;
.LP-Text{ .LP-Text{
color: $-secondary-background-color; color: $-almost-white;
font-size: 17px; font-size: 17px;
} }

10
components/03_Organisms/linkList/_linkList.scss
View File

@ -6,7 +6,7 @@
padding: 0; padding: 0;
.LP-LinkList__Item{ .LP-LinkList__Item{
border-left: 1px solid $-secondary-accent-color; border-left: 1px solid $-light-brown;
width: 100%; width: 100%;
margin-top: 12px; margin-top: 12px;
height: 55px; height: 55px;
@ -16,7 +16,7 @@
padding: $-link-padding 0 $-link-padding $-link-padding; padding: $-link-padding 0 $-link-padding $-link-padding;
width: calc(100% - $-link-padding); width: calc(100% - $-link-padding);
display: block; display: block;
color: $-secondary-color; color: $-grey;
&--iconized{ &--iconized{
@ -34,8 +34,8 @@
&:hover{ &:hover{
background-color: $-secondary-background-color; background-color: $-almost-white;
color: $-primary-accent-color; color: $-wine-red;
} }
.LP-Text{ .LP-Text{
@ -48,7 +48,7 @@
.LP-Link__Icon{ .LP-Link__Icon{
width: 2em; width: 2em;
height: 2em; height: 2em;
fill: $-primary-accent-color; fill: $-wine-red;
line-height: 5em; line-height: 5em;
} }

4
components/03_Organisms/navigation/_navigation.scss
View File

@ -14,11 +14,11 @@
} }
.LP-Link__Text { .LP-Link__Text {
color: $-secondary-color; color: $-grey;
font-weight: bold; font-weight: bold;
text-shadow: 0px 0px 20px white; text-shadow: 0px 0px 20px white;
&:hover{ &:hover{
color: $-primary-accent-color; color: $-wine-red;
} }
} }
} }

6
components/03_Organisms/placeList/_placeList.scss
View File

@ -4,15 +4,15 @@
.LP-Link{ .LP-Link{
.LP-Place{ .LP-Place{
&:hover{ &:hover{
color: $-secondary-color; color: $-grey;
background-color: $-secondary-background-color; background-color: $-almost-white;
$-hover-offset: 2px; $-hover-offset: 2px;
position: relative; position: relative;
left: -$-hover-offset; left: -$-hover-offset;
>.LP-Place__Image{ >.LP-Place__Image{
border-left: $-hover-offset $-secondary-color solid; border-left: $-hover-offset $-grey solid;
} }
} }
} }

2
components/04_Templates/home/_home.scss
View File

@ -4,5 +4,5 @@
} }
.LP-HorizontalLine{ .LP-HorizontalLine{
color: $-secondary-color; color: $-grey;
} }

4
components/04_Templates/placeOverview/_placeOverview.scss
View File

@ -4,7 +4,7 @@
.LP-PlaceOveriew__Image{ .LP-PlaceOveriew__Image{
width: 700px; width: 700px;
height: 450px; height: 450px;
box-shadow: 0 0 10px $-secondary-color; box-shadow: 0 0 10px $-grey;
object-fit: cover; object-fit: cover;
float: right; float: right;
@ -28,7 +28,7 @@
.LP-PlaceOverView__ImageItem{ .LP-PlaceOverView__ImageItem{
img { img {
box-shadow: 0 0 5px $-secondary-color; box-shadow: 0 0 5px $-grey;
height: 200px; height: 200px;
width: 290px; width: 290px;
object-fit: cover; object-fit: cover;