Chris@0: /**
Chris@0:  * @file
Chris@0:  * Styling for Quick Edit module.
Chris@0:  */
Chris@0: 
Chris@0: /**
Chris@0:  * Editable.
Chris@0:  */
Chris@0: .quickedit-field.quickedit-editable,
Chris@0: .quickedit-field .quickedit-editable {
Chris@0:   box-shadow: 0 0 0 2px #74b7ff;
Chris@0: }
Chris@0: 
Chris@0: /**
Chris@0:  * Highlighted (hovered) editable.
Chris@0:  */
Chris@0: .quickedit-field.quickedit-highlighted,
Chris@0: .quickedit-form.quickedit-highlighted,
Chris@0: .quickedit-field .quickedit-highlighted {
Chris@0:   box-shadow: 0 0 0 1px #74b7ff, 0 0 0 2px #007fff;
Chris@0: }
Chris@0: .quickedit-field.quickedit-changed,
Chris@0: .quickedit-form.quickedit-changed,
Chris@0: .quickedit-field .quickedit-changed {
Chris@0:   box-shadow: 0 0 0 1px #fec17e, 0 0 0 2px #f7870a;
Chris@0: }
Chris@0: .quickedit-editing.quickedit-validation-error,
Chris@0: .quickedit-form.quickedit-validation-error {
Chris@14:   box-shadow: 0 0 0 1px #ee8b74, 0 0 0 2px #fa2209;
Chris@0: }
Chris@0: .quickedit-editing.quickedit-editor-is-popup {
Chris@0:   box-shadow: none;
Chris@0: }
Chris@0: .quickedit-form .form-item .error {
Chris@0:   border: 1px solid #eea0a0;
Chris@0: }
Chris@0: 
Chris@0: /**
Chris@0:  * Default form styling overrides.
Chris@0:  */
Chris@0: .quickedit-form form {
Chris@0:   padding: 0.5em;
Chris@0: }
Chris@0: .quickedit-form .form-item {
Chris@0:   margin: 0;
Chris@0: }
Chris@0: .quickedit-form .form-wrapper {
Chris@14:   margin: 0.5em;
Chris@0: }
Chris@0: 
Chris@0: /**
Chris@0:  * Animations.
Chris@0:  */
Chris@0: .quickedit-animate-invisible {
Chris@0:   opacity: 0;
Chris@0: }
Chris@0: .quickedit-animate-default {
Chris@14:   -webkit-transition: all 0.4s ease;
Chris@14:   transition: all 0.4s ease;
Chris@0: }
Chris@0: .quickedit-animate-slow {
Chris@14:   -webkit-transition: all 0.6s ease;
Chris@14:   transition: all 0.6s ease;
Chris@0: }
Chris@0: .quickedit-animate-delay-veryfast {
Chris@14:   -webkit-transition-delay: 0.05s;
Chris@14:   transition-delay: 0.05s;
Chris@0: }
Chris@0: .quickedit-animate-delay-fast {
Chris@14:   -webkit-transition-delay: 0.2s;
Chris@14:   transition-delay: 0.2s;
Chris@0: }
Chris@0: .quickedit-animate-disable-width {
Chris@0:   -webkit-transition: width 0s;
Chris@0:   transition: width 0s;
Chris@0: }
Chris@0: .quickedit-animate-only-visibility {
Chris@14:   -webkit-transition: opacity 0.2s ease;
Chris@14:   transition: opacity 0.2s ease;
Chris@0: }
Chris@0: 
Chris@0: /**
Chris@0:  * In-place editors that don't use a popup.
Chris@0:  */
Chris@0: .quickedit-validation-errors .messages.error {
Chris@18:   background-color: white;
Chris@14:   box-shadow: 0 0 1px 1px red, 0 0 3px 3px rgba(153, 153, 153, 0.5);
Chris@0: }
Chris@0: 
Chris@0: /**
Chris@0:  * Styling specific to the 'form' in-place editor.
Chris@0:  */
Chris@0: .quickedit-form {
Chris@18:   background-color: white;
Chris@0:   box-shadow: 0 0 30px 4px #4f4f4f;
Chris@0: }
Chris@0: 
Chris@0: /**
Chris@0:  * Toolbars.
Chris@0:  */
Chris@0: .quickedit-toolbar-container {
Chris@18:   padding-top: 7px;
Chris@0:   padding-bottom: 7px;
Chris@0:   -webkit-transition: all 1s;
Chris@0:   transition: all 1s;
Chris@18:   font-family: "Source Sans Pro", "Lucida Grande", sans-serif;
Chris@0: }
Chris@0: .quickedit-toolbar-container > .quickedit-toolbar-content {
Chris@18:   position: relative;
Chris@18:   z-index: 2;
Chris@0:   box-sizing: border-box;
Chris@0:   padding: 0.1667em;
Chris@0:   -webkit-user-select: none;
Chris@0:   -moz-user-select: none;
Chris@0:   -ms-user-select: none;
Chris@0:   user-select: none;
Chris@18:   color: black;
Chris@18:   background-image: -webkit-linear-gradient(top, #fff, #e4e4e4);
Chris@18:   background-image: linear-gradient(to bottom, #fff, #e4e4e4);
Chris@0: }
Chris@0: .quickedit-toolbar-container > .quickedit-toolbar-pointer {
Chris@18:   position: absolute;
Chris@18:   z-index: 1;
Chris@0:   bottom: 2px;
Chris@18:   left: 18px; /* LTR */
Chris@0:   display: block;
Chris@18:   width: 16px;
Chris@0:   height: 16px;
Chris@0:   -webkit-transform: rotate(45deg);
Chris@0:   -ms-transform: rotate(45deg);
Chris@0:   transform: rotate(45deg);
Chris@18:   background-color: #e4e4e4;
Chris@18:   box-shadow: 0 0 0 1px #818181, 0 0 0 4px rgba(150, 150, 150, 0.5);
Chris@0: }
Chris@0: [dir="rtl"] .quickedit-toolbar-container > .quickedit-toolbar-pointer {
Chris@18:   right: 18px;
Chris@0:   left: auto;
Chris@0: }
Chris@0: .quickedit-toolbar-container.quickedit-toolbar-pointer-top > .quickedit-toolbar-pointer {
Chris@18:   top: 2px;
Chris@0:   bottom: auto;
Chris@0: }
Chris@0: .quickedit-toolbar-container > .quickedit-toolbar-lining {
Chris@18:   position: absolute;
Chris@18:   z-index: 0;
Chris@18:   top: 7px;
Chris@18:   right: 0;
Chris@0:   bottom: 7px;
Chris@18:   left: 0;
Chris@18:   display: block;
Chris@14:   box-shadow: 0 0 0 1px #818181, 0 3px 0 1px rgba(150, 150, 150, 0.5);
Chris@0: }
Chris@0: 
Chris@0: .quickedit-toolbar-label {
Chris@0:   overflow: hidden;
Chris@0:   padding: 0.333em 0.4em;
Chris@18:   white-space: nowrap;
Chris@0:   text-overflow: ellipsis;
Chris@18:   font-style: italic;
Chris@0: }
Chris@0: .quickedit-toolbar-label .field:after {
Chris@18:   content: " → "; /* LTR */
Chris@0: }
Chris@0: 
Chris@0: [dir="rtl"] .quickedit-toolbar-label .field:after {
Chris@18:   content: " ← ";
Chris@0: }
Chris@0: 
Chris@0: /* The toolbar; these are not necessarily visible. */
Chris@0: .quickedit-toolbar {
Chris@18:   font-family: "Droid sans", "Lucida Grande", sans-serif;
Chris@0: }
Chris@0: .quickedit-toolbar-entity {
Chris@0:   padding: 0.1667em 0.2em;
Chris@0: }
Chris@0: 
Chris@0: /**
Chris@0:  * Info toolgroup.
Chris@0:  */
Chris@0: .quickedit-toolbar-fullwidth {
Chris@0:   width: 100%;
Chris@0: }
Chris@0: .quickedit-toolgroup.wysiwyg-floated {
Chris@0:   float: right; /* LTR */
Chris@0: }
Chris@0: [dir="rtl"] .quickedit-toolgroup.wysiwyg-floated {
Chris@0:   float: left;
Chris@0: }
Chris@0: .quickedit-toolgroup.wysiwyg-main {
Chris@0:   clear: both;
Chris@0:   width: 100%;
Chris@0:   padding-left: 0; /* LTR */
Chris@0: }
Chris@0: [dir="rtl"] .quickedit-toolgroup.wysiwyg-main {
Chris@18:   padding-right: 0;
Chris@0:   padding-left: 0;
Chris@0: }
Chris@0: 
Chris@0: /**
Chris@0:  * Buttons.
Chris@0:  */
Chris@0: .quickedit-button {
Chris@0:   display: inline-block;
Chris@0:   margin: 0;
Chris@0:   padding: 0.345em;
Chris@18:   cursor: pointer;
Chris@14:   -webkit-transition: opacity 0.1s ease;
Chris@14:   transition: opacity 0.1s ease;
Chris@18:   opacity: 1;
Chris@18:   color: #5a5a5a;
Chris@18:   border: 1px solid #d2d2d2;
Chris@18:   background-color: #e4e4e4;
Chris@0: }
Chris@0: .quickedit-button[aria-hidden="true"] {
Chris@0:   visibility: hidden;
Chris@0:   opacity: 0;
Chris@0: }
Chris@0: .quickedit-button + .quickedit-button {
Chris@0:   margin-left: 0.2em; /* LTR */
Chris@0: }
Chris@0: [dir="rtl"] .quickedit-button + .quickedit-button {
Chris@18:   margin-right: 0.25em;
Chris@0:   margin-left: auto;
Chris@0: }
Chris@0: /* Button with icons. */
Chris@0: .quickedit-button:hover,
Chris@0: .quickedit-button:active {
Chris@18:   color: #2e2e2e;
Chris@18:   border: 1px solid #a0a0a0;
Chris@0:   background-color: #c8c8c8;
Chris@0: }
Chris@0: .quickedit-toolbar-container .quickedit-button.action-cancel {
Chris@18:   border: 1px solid transparent;
Chris@0:   background-color: transparent;
Chris@0: }
Chris@0: .quickedit-button.action-save {
Chris@0:   color: white;
Chris@18:   border: 1px solid transparent;
Chris@0:   background-color: #50a0e9;
Chris@0:   background-image: -webkit-linear-gradient(top, #50a0e9, #4481dc);
Chris@14:   background-image: linear-gradient(to bottom, #50a0e9, #4481dc);
Chris@0: }
Chris@0: .quickedit-button.action-save:hover,
Chris@0: .quickedit-button.action-save:active {
Chris@0:   border: 1px solid #a0a0a0;
Chris@0: }
Chris@0: .quickedit-button.action-saving,
Chris@0: .quickedit-button.action-saving:hover,
Chris@0: .quickedit-button.action-saving:active {
Chris@18:   color: #5a5a5a;
Chris@18:   border-color: #d2d2d2;
Chris@0:   background-color: #e4e4e4;
Chris@0:   background-image: none;
Chris@0: }