Skip to content

Commit

Permalink
EZP-28543: Editing view styling of buttons and form fields (#196)
Browse files Browse the repository at this point in the history 
* EZP-28543: Editing view styling of buttons and form fields

* remove semicolon

* change rem to px
  • Loading branch information
@inakijv
inakijv authored and Łukasz Serwatka committed Dec 18, 2017
1 parent e126b83 commit 2129c48
Show file tree
Hide file tree
Showing 9 changed files with 85 additions and 22 deletions.
12 changes: 12 additions & 0 deletions src/bundle/Resources/public/scss/_forms.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,4 +18,16 @@

@include label-required();
}

.form-control {
background-color: $ez-white;
}

.form-control[readonly] {
background-color: $ez-white;
}

.form-control:focus {
border-color: $ez-color-secondary;
}
}
12 changes: 6 additions & 6 deletions src/bundle/Resources/public/scss/_mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@
position: relative;
width: $size;
height: calc(#{$size} + .25rem);
background-color: $ez-ground-base-dark;
background-color: $ez-color-base-pale;
margin-left: calc((#{$size} + .25rem) / 2);
cursor: pointer;

Expand All @@ -71,7 +71,7 @@
width: $size;
height: $size;
display: block;
background-color: $ez-ground-base-pale;
background-color: $ez-white;
border-radius: 50%;
position: absolute;
top: 2px;
Expand All @@ -82,18 +82,18 @@
}

&.is-checked {
background-color: $ez-color-secondary;
background-color: $ez-secondary-ground;

.ez-data-source__indicator {
transform: translateX(50%);
}

&:before {
background-color: $ez-color-secondary;
background-color: $ez-secondary-ground;
}

&:after {
background-color: $ez-color-secondary;
background-color: $ez-secondary-ground;
}
}

Expand All @@ -105,7 +105,7 @@
border-radius: 50%;
position: absolute;
top: 50%;
background-color: $ez-ground-base-dark;
background-color: $ez-color-base-pale;
z-index: -1;
cursor: pointer;
}
Expand Down
25 changes: 19 additions & 6 deletions src/bundle/Resources/public/scss/fieldType/_base-preview.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@

.ez-field-edit__data {
border-radius: .25rem;
border: 1px dashed $ez-color-primary;
border: 2px dashed $ez-color-base-pale;
padding: 1rem;
text-align: center;
position: relative;
Expand All @@ -26,15 +26,18 @@
cursor: pointer;
letter-spacing: .5px;
color: $ez-white;
font-size: .875rem;
font-size: 1rem;
font-weight: 700;
border: 1px solid $ez-color-primary;
background-color: $ez-color-primary;
transition: background .3s ease-in-out;
align-items: center;

.ez-icon {
margin-top: -2px;
margin-right: .5rem;
width: 1.5rem;
height: 1.5rem;
}
}

Expand Down Expand Up @@ -84,26 +87,36 @@
transition: background .3s $ez-admin-transition;
text-align: center;
display: block;

.ez-icon {
margin-top: 7px;
height: 1.5rem;
width: 1.5rem;
}
}

&__action--preview {
@include preview-action;
background: $ez-color-base-pale;
background: $ez-color-base-medium;
margin-top: 1.25rem;

&:hover,
&:focus {
background: $ez-color-base-light;
background: darken($ez-color-base-medium, 15%);
}
}

&__action--remove {
@include preview-action;
background: $ez-color-danger;
background: $ez-color-secondary;

.ez-icon {
margin-top: 8px;
}

&:hover,
&:focus {
background: $ez-color-danger-hover;
background: $ez-color-secondary-hover;
}
}
}
Expand Down
12 changes: 10 additions & 2 deletions src/bundle/Resources/public/scss/fieldType/_ezauthor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,18 @@
.ez-data-source__actions {
display: flex;
align-items: center;
padding-top: 1.5rem;
padding-top: 2.5rem;

button {
margin: 0 .5rem;
margin: 0 .35rem;
height: 2.5rem;
width: 2.5rem;
padding-top: .25rem;

.ez-icon {
width: 1.5rem;
height: 1.5rem;
}
}
}

Expand Down
8 changes: 8 additions & 0 deletions src/bundle/Resources/public/scss/fieldType/_ezgmaplocation.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,5 +65,13 @@

.btn--search-by-address {
border-radius: 0 .25rem .25rem 0;
padding: .3rem .5rem;
cursor: pointer;

.ez-icon {
width: 1.4rem;
height: 1.4rem;
margin-top: 2px;
}
}
}
2 changes: 2 additions & 0 deletions src/bundle/Resources/public/scss/fieldType/_ezkeyword.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,12 +31,14 @@
padding: 4px 0 4px 8px;
color: $ez-white;
margin: 0 8px 8px 0;
border-radius: .25rem;
}

.taggify__btn--remove {
color: $ez-white;
background: none;
border: 0 none;
margin-left: .375rem;
}

&.is-invalid {
Expand Down
2 changes: 1 addition & 1 deletion src/bundle/Resources/public/scss/fieldType/_ezmedia.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@
top: 0;
left: -20px;
width: 20px;
background: red;
background: $ez-color-danger;
color: white;
text-align: center;
font-size: 1.5rem;
Expand Down
17 changes: 17 additions & 0 deletions src/bundle/Resources/public/scss/fieldType/_ezobjectrelationlist.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,23 @@
text-align: center;
}

.btn {
padding: .4rem 1.25rem;
font-weight: bold;

.ez-icon {
margin-top: .1rem;
margin-right: .25rem;
width: 1.5rem;
height: 1.5rem;
}

.ez-relations__cta-btn-label {
display: inline-block;
vertical-align: 25%;
}
}

.ez-relations__order-input {
width: 6ch;
text-align: center;
Expand Down
17 changes: 10 additions & 7 deletions src/bundle/Resources/public/scss/fieldType/_ezselection.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,19 +10,20 @@
padding-left: 0;
margin-bottom: 0;
width: 50%;
border: 1px solid $ez-ground-primary;
border: 1px solid $ez-color-base-pale;
padding: .1rem 2rem .1rem .1rem;
border-radius: 5px;
border-radius: .25rem;
position: relative;
min-height: 2.8rem;
background-color: $ez-white;

&:after {
content: '';
width: 2rem;
height: 100%;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
background-color: $ez-ground-primary;
background-color: $ez-color-secondary;
position: absolute;
right: 0;
top: 0;
Expand All @@ -43,13 +44,14 @@
}

.selected-item {
background: $ez-ground-primary;
background: $ez-color-secondary;
width: auto;
display: inline-block;
padding: .3rem 1.5rem .3rem .3rem;
padding: .3rem 2.25rem .3rem .5rem;
margin: .2rem;
border-radius: 5px;
border-radius: .25rem;
position: relative;
color: $ez-white;

.remove-selection {
width: 1rem;
Expand All @@ -65,7 +67,7 @@
content: '';
width: .1rem;
height: 1rem;
background-color: $ez-color-base-dark;
background-color: $ez-white;
content: '';
position: absolute;
top: 50%;
Expand Down Expand Up @@ -95,6 +97,7 @@
width: 50%;
border: 1px solid $ez-ground-primary;
background-color: $ez-white;
color: $ez-black;

&--hidden {
transform: scaleY(0);
Expand Down

0 comments on commit 2129c48

Please sign in to comment.