Merge pull request #395 from ezsystems/ezp-28932-fix-selection-fieldtype

EZP-28932: Broken empty option design after selecting it from ezselection fieldtype
ezsystems · Mar 19, 2018 · 818005b · 818005b
2 parents ed38f6d + 727b426
commit 818005b
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 0 deletions.
diff --git a/src/bundle/Resources/public/scss/fieldType/edit/_ezselection.scss b/src/bundle/Resources/public/scss/fieldType/edit/_ezselection.scss
@@ -16,6 +16,9 @@
             position: relative;
             min-height: 2.8rem;
             background-color: $ez-white;
+            display: flex;
+            align-items: center;
+            flex-wrap: wrap;
 
             &:after {
                 content: '';
@@ -52,6 +55,7 @@
                 border-radius: .25rem;
                 position: relative;
                 color: $ez-white;
+                min-height: 34px;
 
                 .remove-selection {
                     width: 1rem;
@@ -115,6 +119,11 @@
                 &.option-selected {
                     background-color: $ez-ground-primary;
                 }
+
+                &:not(.option-selected):hover,
+                &:not(.option-selected):focus {
+                    background: $ez-secondary-ground-pale;
+                }
             }
         }
     }

diff --git a/src/bundle/Resources/public/scss/fieldType/preview/_ezselection.scss b/src/bundle/Resources/public/scss/fieldType/preview/_ezselection.scss
@@ -2,13 +2,17 @@
     list-style: none;
     padding-left: 0;
     margin-bottom: 0;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
 
     .ez-selection__item {
         display: inline-block;
         padding: .5rem 1rem;
         background: $ez-ground-primary;
         border-radius: 5px;
         margin: .25rem;
+        min-height: 40px;
     }
 }