Bert Leunis pushed to branch feature/CHANNELMGR-1391 at cms-community /
hippo-addon-channel-manager
Commits:
312648f3 by Bert Leunis at 2018-03-19T16:46:36+01:00
CHANNELMGR-1391 improved focus effect on time part fields
When the date picker field is focused or is in error, the time part fields
(mm/hh) should not get focus coloring. Padding also configured so the content
of the fields do not jump up and down when focus shifts between the three
fields.
- - - - -
2 changed files:
-
frontend-ng/src/app/channel/sidePanels/rightSidePanel/contentEditor/contentEditor.scss
-
frontend-ng/src/app/channel/sidePanels/rightSidePanel/contentEditor/fields/dateField/dateField.scss
Changes:
=====================================
frontend-ng/src/app/channel/sidePanels/rightSidePanel/contentEditor/contentEditor.scss
=====================================
---
a/frontend-ng/src/app/channel/sidePanels/rightSidePanel/contentEditor/contentEditor.scss
+++
b/frontend-ng/src/app/channel/sidePanels/rightSidePanel/contentEditor/contentEditor.scss
@@ -27,10 +27,6 @@ content-editor {
margin-bottom: $form-dense-distance;
}
- md-input-container.md-input-focused date-field .md-input {
- border-bottom-width: 0;
- }
-
// multiple fields should only have 1 error message visible
md-input-container:not(:last-child) .md-errors-spacer {
height: 0;
=====================================
frontend-ng/src/app/channel/sidePanels/rightSidePanel/contentEditor/fields/dateField/dateField.scss
=====================================
---
a/frontend-ng/src/app/channel/sidePanels/rightSidePanel/contentEditor/fields/dateField/dateField.scss
+++
b/frontend-ng/src/app/channel/sidePanels/rightSidePanel/contentEditor/fields/dateField/dateField.scss
@@ -13,10 +13,16 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
+@import 'variables';
date-field {
.md-datepicker-input-container {
z-index: 2;
+ border-bottom-width: 0;
+
+ &.md-datepicker-focused {
+ border-bottom-width: 0;
+ }
}
.md-datepicker-input {
@@ -29,6 +35,16 @@ date-field {
width: 25px;
}
+ md-input-container:not(md-input-focused) > input.timepart {
+ border-bottom: 1px solid $grey-300 !important;
+ padding-bottom: 1px !important;
+ }
+
+ md-input-container.md-input-focused > input.timepart {
+ border-bottom: 2px solid $blue-500 !important;
+ padding-bottom: 0 !important;
+ }
+
.now-button {
opacity: .54;
padding: 1px 0 0 6px !important;
View it on GitLab:
https://code.onehippo.org/cms-community/hippo-addon-channel-manager/commit/312648f385b14eaa0fb6d3e34c92abc29c5392c0
---
View it on GitLab:
https://code.onehippo.org/cms-community/hippo-addon-channel-manager/commit/312648f385b14eaa0fb6d3e34c92abc29c5392c0
You're receiving this email because of your account on code.onehippo.org.
_______________________________________________
Hippocms-svn mailing list
Hippocms-svn@lists.onehippo.org
https://lists.onehippo.org/mailman/listinfo/hippocms-svn
