CRM-15789 - Cleanup submit button styles

[civicrm-core.git] / css / civicrm.css

diff --git a/css/civicrm.css b/css/civicrm.css
index 7a9823efb7acd1188f623cf8f96b311feef04875..b94deb4b82f60f74e13a579424c36ab8e477dc54 100644 (file)
--- a/css/civicrm.css
+++ b/css/civicrm.css
@@ -217,38 +217,6 @@ input.crm-form-entityref {
   color: #3E3E3E;
 }
 
-.crm-container .replace-plain,
-.crm-container textarea,
-.crm-container select.crm-form-multiselect {
-  border: 1px solid #999;
-}
-
-.crm-container .replace-plain {
-  cursor: pointer;
-  background: rgba(255,255,255,0.6);
-  min-height: 2em;
-  position: relative;
-  padding: 2px;
-}
-
-.crm-container .replace-plain:focus,
-.crm-container .replace-plain:hover {
-  box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
-  background: rgba(255,255,255,0.8);
-}
-
-.crm-container .replace-plain .icon.edit-icon {
-  position: absolute;
-  top: .5em;
-  right: .5em;
-}
-
-.crm-container .replace-plain a:active .icon.edit-icon,
-.crm-container .replace-plain:focus .icon.edit-icon,
-.crm-container .replace-plain:hover .icon.edit-icon {
-  background-image: url("../i/icons/jquery-ui-2786C2.png");
-}
-
 /*
 ** class for hiding the text box;
   it is used in the OtherActivity template
@@ -324,7 +292,7 @@ input.crm-form-entityref {
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#eeeeee', GradientType = 0);
   background-image: linear-gradient(top, #fff 0%, #eee 50%);
 }
-.crm-container input.crm-form-text.ng-invalid {
+.crm-container input.crm-form-text.ng-invalid.ng-dirty {
     border: 1px solid #FF0000;
 }
 .crm-container input.crm-form-text,
@@ -351,10 +319,6 @@ input.crm-form-entityref {
   margin: .25em 0.5em 0.25em 0;
 }
 
-.crm-container .crm-form-submit-inline {
-  margin: 0em 0.5em 0.25em 0em;
-}
-
 .crm-container div.crm-inline-button {
   padding-left: 6px;
   padding-top: 6px;
@@ -715,13 +679,6 @@ input.crm-form-entityref {
   padding: 4px;
 }
 
-.crm-container div.view-data {
-  padding: .25em .5em .25em .5em;
-  border: 1px solid DimGray;
-  width: auto;
-  background-color: #ffffff;
-}
-
 .crm-container .crm-footer {
   font-size: 0.8em;
 }
@@ -1148,6 +1105,7 @@ input.crm-form-entityref {
   width: auto;
   line-height: normal;
   border-top: 3px solid #bbb;
+  text-align: center;
 }
 
 #crm-container ul.wizard-bar li {
@@ -1155,7 +1113,7 @@ input.crm-form-entityref {
   background-color: #FAFAFA;
   border: 1px solid #999999;
   height: auto;
-  margin-right: 1em;
+  margin: -2px;
   padding: .5em 1em .5em;
   text-decoration: none;
   font-size: .95em;
@@ -1163,8 +1121,9 @@ input.crm-form-entityref {
 }
 
 #crm-container ul.wizard-bar li.current-step {
-  background-color: #FAFAFA;
-  border-color: #999999;
+  background-color: #4A89DC;
+  border-color: #4A89DC;
+  color: #ffffff;
   font-weight: bold;
 }
 
@@ -1173,6 +1132,14 @@ input.crm-form-entityref {
   color: #666;
 }
 
+#crm-container ul.wizard-bar li:first-child {
+  border-radius: 8px 0px 0px 8px;
+}
+
+#crm-container ul.wizard-bar li:last-child {
+  border-radius: 0px 8px 8px 0px;
+}
+
 /* Recently Viewed bar */
 #crm-recently-viewed ul {
   list-style-image: none;
@@ -2322,8 +2289,7 @@ div.grippie {
   margin-left: .5em;
 }
 
-.crm-container .crm-button,
-#crm-container .crm-button {
+.crm-container .crm-button {
   border: medium none;
   cursor: pointer;
   display: block;
@@ -2331,12 +2297,9 @@ div.grippie {
   overflow: hidden;
   text-shadow: 0 1px 0 black;
   margin: 0px 12px 0 0;
-  padding: 0px 4px;
-  cursor: pointer;
 }
 
-.crm-container .crm-button input,
-#crm-container .crm-button input {
+.crm-container .crm-button input {
   background: none;
   _background: #6C6C6C;
   /* IE6 only */
@@ -2345,30 +2308,29 @@ div.grippie {
   cursor: pointer;
   font-size: 13px;
   font-weight: normal;
-  margin: 0 0 0 0px;
+  margin: 0;
   padding: 1px 8px 2px 4px;
 }
 
 .crm-container .crm-button-type-cancel,
-.crm-container .crm-button-type-back,
-#crm-container .crm-button-type-cancel,
-#crm-container .crm-button-type-back {
+.crm-container .crm-button-type-back {
   margin-left: 20px;
 }
-.crm-container .crm-button-type-cancel input,
-#crm-container .crm-button-type-cancel input {
+.crm-container .crm-button-type-cancel input {
   color: #E6E6DC!important;
 }
 
 .crm-container a.button,
+.crm-container a.crm-invoiceButton,
+.crm-container a.crm-invoiceButton:link,
+.crm-container a.crm-invoiceButton:visited,
 .crm-container a.button:link,
 .crm-container a.button:visited,
 .crm-container input.crm-form-submit,
 .crm-container .crm-button,
 .crm-container .ui-dialog-buttonset .ui-button,
-#crm-container input[type=button],
-#crm-container input.crm-form-submit-inline,
-#crm-container .crm-button {
+.crm-container input[type=button],
+.crm-container .crm-button {
   text-shadow: 0 1px 0 black;
   background: #70716B url(../i/crm-button-bg.gif) repeat-x top left;
   color: #FFF;
@@ -2382,32 +2344,24 @@ div.grippie {
 }
 
 .crm-container input.crm-form-submit[disabled],
-.crm-container .crm-button[disabled],
-#crm-container input[type=button][disabled],
-#crm-container input.crm-form-submit-inline[disabled],
-#crm-container .crm-button[disabled] {
+.crm-container input[type=button][disabled],
+.crm-container .crm-button[disabled] {
     color: #999;
 }
 
-.crm-container .crm-button,
-#crm-container .crm-button {
+.crm-container .crm-button {
   padding: 1px;
 }
 
 .crm-container input.crm-form-submit,
-#crm-container input[type=button],
-#crm-container input.crm-form-submit-inline {
+.crm-container input[type=button] {
   padding: 2px 6px;
 }
 
 .crm-container .crm-button input[type=button],
-.crm-container .crm-button input.crm-form-submit,
-.crm-container .crm-button input.crm-form-submit-inline,
-#crm-container .crm-button input[type=button],
-#crm-container .crm-button input.crm-form-submit,
-#crm-container .crm-button input.crm-form-submit-inline {
-  padding: 2px 4px;
-  margin: 0px;
+.crm-container .crm-button input.crm-form-submit {
+  padding: 3px 5px 2px;
+  margin: 0;
   background: none;
   _background: #6C6C6C;
   /* IE6 only */
@@ -2415,23 +2369,26 @@ div.grippie {
 }
 
 .crm-container a.button,
+.crm-container a.crm-invoiceButton,
+.crm-container a.crm-invoiceButton:link,
+.crm-container a.crm-invoiceButton:visited,
 .crm-container a.button:link,
 .crm-container a.button:visited {
   display: block;
   float: left;
 }
 
-.crm-container a.button span {
+.crm-container a.button .crm-container a.crm-invoiceButton span {
   display: block;
   line-height: 14px;
-  padding: 2px 0px;
+  padding: 2px 0;
 }
 
-.crm-container .button .red {
+.crm-container .button .red .crm-invoiceButton{
   background-image: url(../i/icons/jquery-ui-FFFFFF.png);
 }
 
-.crm-container a.button:active {
+.crm-container a.button:active .crm-container a.crm-invoiceButton:active,{
   color: #000;
   outline: none;
   /* hide dotted outline in Firefox */
@@ -2444,8 +2401,10 @@ div.grippie {
 .crm-container .ui-dialog-buttonset .ui-button:hover,
 .crm-container .ui-dialog-buttonset .ui-button:focus,
 .crm-container a.button:hover,
+.crm-container a.crm-invoiceButton:hover,
+.crm-container a.crm-invoiceButton:focus,
 .crm-container a.button:focus {
-  background-position: 0px -25px;
+  background-position: 0 -25px;
 }
 
 .crm-container .ui-dialog-buttonpane {
@@ -2464,8 +2423,8 @@ div.grippie {
 #crm-container input#_qf_Register_upload_express,
 #crm-container input#_qf_Main_upload_express {
   background: none;
-  margin: 0px;
-  padding: 0px;
+  margin: 0;
+  padding: 0;
   border: none;
 }
 
@@ -2586,6 +2545,7 @@ div.grippie {
 }
 
 .crm-container .button .icon,
+.crm-container a.invoiceButton .icon,
 .crm-container .crm-button .icon,
 .crm-accordion-header .icon {
   position: relative;
@@ -2601,30 +2561,29 @@ div.grippie {
   margin-top: 3px;
 }
 
-.crm-container .dark-icon {
-  background-image: url("../packages/jquery/jquery-ui/images/ui-icons_222222_256x240.png")
-}
-.crm-container .edit-icon {
-  background-position: -64px -112px;
-}
-.crm-container .previous-icon {
-  background-position: -80px -160px;
+.crm-container input.crm-button.crm-icon-button {
+  position: relative;
 }
-.crm-container .next-icon {
-  background-position: -64px -160px;
+
+.crm-container .crm-button.crm-icon-button input {
+  padding-left: 18px;
 }
-.crm-container .add-icon {
-  background-position: 0 -192px;
+
+.crm-container .crm-button-icon {
+  background-image: url("../i/icons/jquery-ui-FFFFFF.png");
+  height: 16px;
+  width: 16px;
+  display: block;
+  position: absolute;
+  pointer-events: none;
 }
-.crm-container .back-icon {
-  background-position: 0 -64px;
+
+.crm-container .dark-icon {
+  background-image: url("../packages/jquery/jquery-ui/images/ui-icons_222222_256x240.png")
 }
 .crm-container .delete-icon {
   background-position: -176px -96px;
 }
-.crm-container .details-icon {
-  background-position: -128px -112px;
-}
 .crm-container .red-icon,
 .crm-container a:hover .icon.delete-icon,
 .crm-container span:hover .icon.delete-icon {
@@ -2639,73 +2598,11 @@ div.grippie {
   background-image: url("../i/icons/jquery-ui-91CE00.png");
 }
 
-.crm-container .vcard-icon {
-  background-position: -32px -80px;
-}
-
-.crm-container .print-icon {
-  background-position: -160px -96px;
-}
-
-.crm-container .dashboard-icon {
-  background-position: -192px -128px;
-}
-
-.crm-container .Individual-profile-icon,
-.crm-container .user-record-icon {
-  background-position: -144px -96px;
-}
-.crm-container .Household-profile-icon {
-  background-position: 0 -112px;
-}
-.crm-container .Organization-profile-icon {
-  background-position: -112px -112px;
-}
 .crm-container .inform-icon {
   background-position: -16px -144px;
   margin-right: 5px;
 }
 
-.crm-container .dropdown-icon {
-  background-position: -48px -32px;
-  float: right;
-}
-
-.crm-container .tip-icon {
-  background-position: -128px -128px;
-}
-
-.crm-container .alert-icon {
-  background-position: 0 -144px;
-}
-.crm-container .check-icon {
-  background-position: -64px -144px;
-}
-.crm-container .refresh-icon {
-  background-position: -64px -80px;
-}
-.crm-container .settings-icon {
-  background-position: -176px -112px;
-}
-.crm-container .search-icon {
-  background-position: -160px -112px;
-}
-.crm-container .email-icon {
-  background-position: -80px -96px;
-}
-.crm-container .preview-icon {
-  background-position: -224px -128px;
-}
-.crm-container .play-icon {
-  background-position: 0 -160px;
-}
-.crm-container .close-icon {
-  background-position: -80px -128px;
-}
-.crm-container .swap-icon {
-  background-position: -80px -80px;
-}
-
 #crm-container .geotag {
   padding: 2px 0 2px 20px !important;
   background: url('../i/geotag_16.png') left center no-repeat;
@@ -3539,13 +3436,14 @@ tbody.scrollContent tr.alternateRow {
   color: #E43D2B !important;
 }
 
-/* rounded corners - we will call dd_roundies on all this */
+/* rounded corners */
 .crm-container .crm-button,
 .crm-container a.button,
+.crm-container a.crm-invoiceButton,
+.crm-container a.crm-invoiceButton:link,
 .crm-container a.button:link,
 .crm-container input.crm-form-submit,
-.crm-container input[type=button],
-.crm-container input.crm-form-submit-inline {
+.crm-container input[type=button] {
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   -khtml-border-radius: 3px;
@@ -3691,6 +3589,36 @@ div.m ul#civicrm-menu,
 .crm-container .select2-dropdown-open .select2-choice .select2-arrow b {
   background-position: -18px 1px;
 }
+.select2-drop .crm-entityref-links {
+  border-top: 1px solid #d3d3d3;
+  margin-top: 9px;
+}
+.select2-drop .crm-entityref-filters {
+  margin-top: 4px;
+}
+.select2-drop .crm-entityref-filters select {
+  border-radius: 3px;
+  border: 1px solid #f2f2f2;
+  background-color: #f6f6f6;
+  color: #494949;
+  font-size: 11px;
+  max-width: 70%;
+}
+.select2-drop .crm-entityref-filters select:hover,
+.select2-drop .crm-entityref-filters select:focus,
+.select2-drop .crm-entityref-filters select.active {
+  border: 1px solid #808080;
+}
+/* Icons used by entityRef create buttons */
+.crm-container .Individual-profile-icon {
+  background-position: -144px -96px;
+}
+.crm-container .Household-profile-icon {
+  background-position: 0 -112px;
+}
+.crm-container .Organization-profile-icon {
+  background-position: -112px -112px;
+}
 /* Style autocomplete results */
 .crm-container .select2-results {
   font-size: 12px;
@@ -3764,18 +3692,6 @@ div.m ul#civicrm-menu,
   box-sizing: border-box;
 }
 
-/* Special styling for specific form buttons */
-#crm-container span.crm-button_qf_Main_upload input,
-#crm-container span.crm-button_qf_Confirm_next input,
-#crm-container span.crm-button_qf_Register_upload input {
-  font-size: 1.2em;
-}
-
-/* Match font size on 'Continue' button on event participant form (no specific class) */
-#crm-container .crm-event-additionalparticipant-form-block span.crm-button input.crm-form-submit.default {
-  font-size: 1.2em;
-}
-
 /* jQuery UI styles */
 .crm-container .ui-progressbar-value {
   background-image: url("../packages/jquery/css/images/pbar-ani.gif");
@@ -4019,6 +3935,40 @@ div.m ul#civicrm-menu,
   width: 100%;
 }
 
+/* editable placeholder containers - share some styles with crm-editable below */
+
+.crm-container .replace-plain,
+.crm-container textarea,
+.crm-container select.crm-form-multiselect {
+  border: 1px solid #999;
+}
+
+.crm-container .replace-plain {
+  cursor: pointer;
+  background: rgba(255,255,255,0.6);
+  min-height: 1.4em;
+  position: relative;
+  padding: .4em 1.5em .3em .4em;
+}
+
+.crm-container .replace-plain p {
+  padding: .2em 0;
+  margin: 0;
+}
+
+.crm-container .replace-plain:focus,
+.crm-container .replace-plain:hover {
+  box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
+  background: rgba(255,255,255,0.8);
+}
+
+.crm-container .replace-plain:before {
+  content: "";
+  position: absolute;
+  top: .4em;
+  right: .5em;
+}
+
 /* in place edit  */
 .crm-container .crm-editable-enabled {
   white-space: nowrap;
@@ -4026,39 +3976,46 @@ div.m ul#civicrm-menu,
   border: 2px dashed transparent;
 }
 .crm-container .crm-editable-textarea-enabled {
-  padding-left: 2px;
-  border: 2px dashed transparent;
+  white-space: normal;
 }
 
-.crm-container .crm-editable-enabled:hover,
-.crm-container .crm-editable-textarea-enabled:hover {
-  border: 2px dashed lightgrey;
+.crm-container .crm-editable-enabled:hover {
+  border: 2px dashed #d1d1d1;
   cursor: pointer;
 }
 
+.crm-container .crm-editable-enabled.crm-editable-editing:hover {
+  border: 2px dashed transparent;
+  cursor: auto;
+}
+
 .crm-container span.crm-editable-textarea-enabled {
-  display: inline-block !important;
   width: 96%;
 }
 .crm-container span.crm-editable-enabled {
   display: inline-block !important;
 }
 
-.crm-container .crm-editable-placeholder {
-  background: url("../i/icons/jquery-ui-2786C2.png") -66px -114px no-repeat;
+.crm-container .crm-editable-placeholder,
+.crm-container .replace-plain:before {
+  background: url("../i/icons/jquery-ui-3E3E3E.png") -66px -114px no-repeat;
   text-indent: -10000px;
   display: block;
-  width: 12px;
+  height: 16px;
+  width: 16px;
+  opacity: .5;
 }
 
-.crm-container .crm-editable-saving {
-  background: #FFFFCC!important;
-  opacity: 0.8;
+.crm-container .replace-plain a:active:before,
+.crm-container .replace-plain:focus:before,
+.crm-container .replace-plain:hover:before,
+.crm-container .crm-editable-enabled:hover .crm-editable-placeholder {
+  background-image: url("../i/icons/jquery-ui-2786C2.png");
+  opacity: 1;
 }
 
-.crm-container .crm-editable-error,
-.crm-container .crm-editable-error input {
-  background: red!important;
+.crm-container .crm-editable-saving {
+  background: #FFFFCC!important;
   opacity: 0.8;
 }
 
@@ -4069,6 +4026,33 @@ div.m ul#civicrm-menu,
   min-height: 5em;
 }
 
+.crm-editable-form {
+  margin: 0 !important;
+  padding: 0 !important;
+  width: auto !important;
+  position: relative;
+  overflow: visible;
+}
+
+.crm-editable-form input,
+.crm-editable-form textarea {
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+
+.crm-editable-form button {
+  position: absolute;
+  bottom: -22px;
+  left: 0;
+  text-align: center;
+  height: 23px;
+  width: 32px;
+}
+
+.crm-editable-form button[type=cancel] {
+  left: 32px;
+}
+
 /*crm-10345*/
 .crm-container .field-action {
   word-wrap: normal;
@@ -4251,8 +4235,10 @@ span.crm-status-icon {
   max-width: 100%;
 }
 
-#crm-container.crm-public .label {
+#crm-container.crm-public .label,
+#crm-container.crm-public .price-field-amount {
   padding-top: 6px;
+  font-size: 15px;
 }
 
 .crm-container.crm-public .select2-container,
@@ -4284,7 +4270,8 @@ span.crm-status-icon {
   padding-top: 6px;
 }
 
-#crm-container.crm-public .calc-value {
+#crm-container.crm-public .calc-value,
+#crm-container.crm-public .content {
   padding-top: 6px;
   font-size: 15px;
 }
@@ -4413,13 +4400,13 @@ span.crm-status-icon {
 }
 
 #crm-container.crm-public .price-set-row .crm-price-amount-amount {
-  font-weight: bold;
   min-width: 2em;
   color: #333333;
 }
 
 #crm-container.crm-public .price-set-row .crm-price-amount-label {
   color: #444444;
+  font-weight: bold;
 }
 
 #crm-container.crm-public .price-set-row .highlight label {
@@ -4431,6 +4418,18 @@ span.crm-status-icon {
   color: #222222;
 }
 
+#crm-container.crm-public .price-set-option-content > tt {
+  display: none;
+}
+
+#crm-container .sold-out-option,
+#crm-container .price-set-row span.sold-out-option .crm-price-amount-label,
+#crm-container .price-set-row span.sold-out-option .crm-price-amount-amount {
+  font-style: italic !important;
+  font-weight: normal !important;
+  font-size: 15px;
+  color: #666 !important;
+}
 #crm-container .crm-extensions-upgrade {
   background: #ffb;
   border: 1px solid #000;
@@ -4517,3 +4516,30 @@ span.crm-status-icon {
 .crm-container .blockUI.blockOverlay {
   background: url("../i/loading-overlay.gif") center center no-repeat white !important;
 }
+
+/* Recurring Dialog */
+.crm-container .recurring-dialog-inner-wrapper {
+  display: inline-block;
+  width: 100%;
+}
+.crm-container .recurring-dialog-inner-left{
+  width: 30%;
+  float: left;
+}
+.crm-container .recurring-dialog-inner-right{
+  width: 70%;
+  float: left;
+}
+.crm-container .recurring-dialog-button{
+  background: #f5f5f5;
+  background-image: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1);
+  border: 1px solid rgba(0,0,0,0.1);
+  padding: 5px 8px;
+  text-align: center;
+  border-radius: 2px;
+  cursor: pointer;
+  font-size: 11px !important;
+}
+.crm-container table.mergecontact thead th {
+  width:30%;
+}