Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CPS-322: Support new Button markup #473

Merged
merged 3 commits into from
Nov 5, 2020
+65 −66
Merged

CPS-322: Support new Button markup #473

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e7986e2
CPS-322: Support new button markup
deb1990 Sep 29, 2020
af736e0
CPS-332: Fix for case type buttons
deb1990 Oct 19, 2020
311fea7
CPS-332: Code refactoring
deb1990 Oct 20, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 17 additions & 6 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

7 changes: 2 additions & 5 deletions scss/bootstrap/overrides/crm/_button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,9 @@
.crm-button-type-cancel,
.crm-button-type-delete {
border-color: $gray-light;
color: $gray-darker !important;

input {
color: $gray-darker !important;
}

input:hover {
&:hover {
color: $gray-dark !important;
}
}
22 changes: 22 additions & 0 deletions scss/civicrm/administer/civi-case/_case-types.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,28 @@
}
}
}

.crm-button {
@extend %btn-civi;

&[crm-icon=fa-check] {
@extend %btn-civi-primary;
padding: 8px 19px;
}

&[crm-icon=fa-times] {
@extend %btn-civi-secondary-outline;
border: solid 1px $gray-dark;
color: $gray;
margin: 0;
padding: 7px 19px;

&:hover {
background: $gray-dark;
color: $crm-white;
}
}
}
}

table tr.forked {
Expand Down
22 changes: 0 additions & 22 deletions scss/civicrm/administer/common/_common.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,28 +59,6 @@ ul.civihr-popup {
margin-right: 0;
}
}

.crm-button {
@extend %btn-civi;

&[crm-icon=fa-check] {
@extend %btn-civi-primary;
padding: 8px 19px;
}

&[crm-icon=fa-times] {
@extend %btn-civi-secondary-outline;
border: solid 1px $gray-dark;
color: $gray;
margin: 0;
padding: 7px 19px;

&:hover {
background: $gray-dark;
color: $crm-white;
}
}
}
}

.action-link {
Expand Down
5 changes: 3 additions & 2 deletions scss/civicrm/administer/contribute/_managepremiums.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,15 @@
}

.premium-full-disabled {
input[type='button'] {
button {
background: darken($crm-copy, $crm-darken-percentage);
margin: 20px 0;
}
}

.crm-contribution-manage_premiums-form-block {
padding: 0;

.collapsible-title {
margin-bottom: 0;
}
Expand Down
7 changes: 1 addition & 6 deletions scss/civicrm/administer/display/_display.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,13 +73,8 @@
padding: 0;
}

.crm-i {
margin: 0 -25px 0 15px !important;
}

#ckeditor_config {
margin: 0 !important;
padding-left: 30px;
padding: 8px 12px;
reneolivo marked this conversation as resolved.
Show resolved Hide resolved
}
}
}
Expand Down
31 changes: 14 additions & 17 deletions scss/civicrm/common/_buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,10 +56,11 @@ $button-border-radius: 2px;
}
}

input.crm-form-submit {
button.crm-form-submit {
reneolivo marked this conversation as resolved.
Show resolved Hide resolved
background: $brand-primary;
border-color: $brand-primary;
border-radius: $border-radius-base;
box-sizing: content-box;
font-family: $font-family-base;
margin-right: 0;
padding: 8px 12px;
Expand Down Expand Up @@ -102,7 +103,7 @@ $button-border-radius: 2px;
}
}

input.crm-form-submit {
button.crm-form-submit {
color: $crm-cancel-color !important;

&:hover {
Expand Down Expand Up @@ -151,15 +152,12 @@ $button-border-radius: 2px;

.crm-button-type-cancel,
.crm-button-type-back {
input {
border: solid 1px $gray-dark;
///The default theme uses "!important"
color: $crm-cancel-color !important;

&:hover {
background: darken($crm-copy, $crm-darken-percentage);
color: $crm-white !important;
}
border: solid 1px $gray-dark;
color: $crm-cancel-color !important; // The default theme uses "!important"

&:hover {
background: darken($crm-copy, $crm-darken-percentage);
color: $crm-white !important;
}
}
}
Expand All @@ -178,8 +176,8 @@ $button-border-radius: 2px;
line-height: 35px;
}

#crm-submit-buttons input.crm-form-submit,
.crm-button input.crm-form-submit,
#crm-submit-buttons button.crm-form-submit,
button.crm-button.crm-form-submit,
.crm-hover-button,
.ui-dialog-buttonset .ui-button,
a.button,
Expand Down Expand Up @@ -254,15 +252,13 @@ $button-border-radius: 2px;
.crm-i {
background-color: transparent !important;
color: $crm-white;
padding: 2px 3px;
top: 0;
padding: 0 2px;
}
}

.crm-i {
line-height: inherit;
text-shadow: none;
vertical-align: middle;
}

.crm-button-type-refresh {
Expand Down Expand Up @@ -381,8 +377,9 @@ button {
border: 0;
border-radius: $border-radius-base;
color: $crm-white;
cursor: pointer;
font-family: $font-family-base;
line-height: 1;
line-height: $line-height-base;
padding: 11px 12px;
text-shadow: none;
text-transform: uppercase;
Expand Down
4 changes: 2 additions & 2 deletions scss/civicrm/contact/pages/_contributions.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1013,9 +1013,9 @@ form.CRM_Contribute_Form_ContributionCharts {
.form-layout-compressed {
margin: 20px 0 0;

input.crm-form-submit {
button.crm-form-submit {
margin-left: 5px;
padding: 4px 10px;
padding: 8px 11px;
reneolivo marked this conversation as resolved.
Show resolved Hide resolved
text-shadow: none;
vertical-align: middle;
}
Expand Down
2 changes: 1 addition & 1 deletion scss/civicrm/financial/_batchtransaction.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
}

.form-layout-compressed {
input.crm-form-submit {
button.crm-form-submit {
margin-left: 5px;
padding: 4px 10px;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In _contributions.scss we changed the padding values from 4px 10px to 8px 11px. Why wasn't the same change applied here?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch. the previous one also should be 4px 10px. Not sure why I made it like that.

vertical-align: middle;
Expand Down
6 changes: 1 addition & 5 deletions scss/civicrm/search/pages/_advanced-search.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,9 @@
}

.form-layout {
.crm-i-button {
.crm-form-submit {
margin-left: 20px;
margin-top: 15px;

.crm-i { /* stylelint-disable-line selector-max-compound-selectors */
top: -2px;
}
}
}
}
3 changes: 2 additions & 1 deletion scss/civicrm/search/pages/_full-text-search.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,10 @@

.CRM_Contact_Form_Search_Custom .crm-search-form-block table.form-layout-compressed {
td {
input.crm-form-submit {
button.crm-form-submit {
@extend .btn-sm;
margin-left: 20px !important;
margin-top: -8px;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

are we trying to fix a new issue or an existent one? changing from inputs to button misaligned the element?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes the position was changed after changing to button. Because we have a long tree of styles being applied from different themes/css file(reset.css, civicrm.css etc).

But I found a better way of fixing this, that is by adding

float: none;
vertical-align: initial;

}
}

Expand Down