diff --git a/css/app.css b/css/app.css index 14ca5d989..414160b80 100644 --- a/css/app.css +++ b/css/app.css @@ -856,6 +856,10 @@ a:hover .icon.out-link { background-position: -500px -14px;} /* preset form basics */ +.inspector-preset { + border-bottom: 1px solid #ccc; +} + .entity-editor-pane .preset-icon-wrap { border-bottom: 1px solid #ccc; padding: 10px 20px; @@ -886,6 +890,10 @@ a:hover .icon.out-link { background-position: -500px -14px;} .form-field { margin-bottom: 10px; width: 100%; + -webkit-transition: margin-bottom 200ms 0ms; + -moz-transition: margin-bottom 200ms 0ms; + -o-transition: margin-bottom 200ms 0ms; + transition: margin-bottom 200ms 0ms; } .form-field:last-child { @@ -925,9 +933,14 @@ a:hover .icon.out-link { background-position: -500px -14px;} .form-field .preset-input-wrap { border: 1px solid #CCC; min-height: 30px; + max-height: 300px; border-top: 0; border-radius: 0 0 4px 4px; overflow: hidden; + -webkit-transition: max-height 400ms 0ms; + -moz-transition: max-height 400ms 0ms; + -o-transition: max-height 400ms 0ms; + transition: max-height 400ms 0ms; } .form-field textarea { @@ -939,38 +952,59 @@ a:hover .icon.out-link { background-position: -500px -14px;} } /* Preset form (hover mode) */ + + .inspector-hover .header { background-color: #f6f6f6; } +.header { + -webkit-transition: background-color 400ms; + -moz-transition: background-color 400ms; + -o-transition: background-color 400ms; + transition: background-color 400ms; +} + .inspector-hover textarea, -.inspector-hover form, -.inspector-hover input[type=text], -.inspector-hover input[type=search], -.inspector-hover input[type=number], -.inspector-hover input[type=url], -.inspector-hover input[type=tel], -.inspector-hover input[type=email], +.inspector-hover input, .inspector-hover .form-label, .inspector-hover .checkselect label:last-of-type, .inspector-hover .preset-input-wrap, .inspector-hover .preset-input-wrap * { - background-color: #f6f6f6; + background-color: white; border-color: #DFDFDF; } +header, +textarea, +input, +.form-label, +.checkselect label:last-of-type, +.preset-input-wrap, +.preset-input-wrap * { + -webkit-transition: background-color 400ms, border-color 400ms; + -moz-transition: background-color 400ms, border-color 400ms; + -o-transition: background-color 400ms, border-color 400ms; + transition: background-color 400ms, border-color 400ms; +} + +.inspector-hover .form-field:last-child > input, +.inspector-hover .form-field:last-child > textarea, +.inspector-hover .form-field:last-child .preset-input-wrap { + margin-bottom: 20px; +} + /* hide and remove from layout */ -.inspector-hover .more-buttons, .inspector-hover .inspector-external-links .inspector-hidden, -.inspector-hover .checkselect input[type="checkbox"], +.inspector-hover .checkselect label input[type="checkbox"], .inspector-hover .radio-wrap button::before, .inspector-hover .preset-radio button:not(.active), .inspector-hover .tag-list { height: 0; width: 0; overflow: hidden; - opacity: 0; + opacity: 0 !important; border-width: 0; margin: 0; padding: 0; @@ -990,6 +1024,26 @@ a:hover .icon.out-link { background-position: -500px -14px;} opacity: 0; } +.modified .form-label .modified-icon, +button.minor, +.combobox-carat, +button, +.spin-control, +.hide-toggle:before, +.more-buttons, +.tag-list, +.inspector-external-links { + -webkit-transition: opacity 400ms; + -moz-transition: opacity 400ms; + -o-transition: opacity 400ms; + transition: opacity 400ms; +} + +.inspector-hover .inspector-body .more-buttons { + max-height: 0; + padding: 0; +} + /* reposition labels after stripping icons */ .inspector-hover .form-field.preset-radio button.active, .inspector-hover .hide-toggle { @@ -1020,16 +1074,20 @@ a:hover .icon.out-link { background-position: -500px -14px;} /* adding additional preset fields */ .inspector-body .more-buttons { - border-bottom: 1px solid #ccc; + max-height: 100px; + -webkit-transition: max-height 400ms, padding 400ms; + -moz-transition: max-height 400ms, padding 400ms; + -o-transition: max-height 400ms, padding 400ms; + transition: max-height 400ms, padding 400ms; } button.preset-add-field { width: 25%; height: 40px; -webkit-transition: width 200ms; - -moz-transition: width 200ms; - -o-transition: width 200ms; - transition: width 200ms; + -moz-transition: width 200ms; + -o-transition: width 200ms; + transition: width 200ms; } /* set width based on # of buttons */