Skip to content
Permalink
Browse files

MDL-56415 message: style toggle contact button on user profile page

Changed the styles in theme_bootstrapbase for the ajax toggle
button so that the loading icon is overlaid on the element
rather than replacing it to stop the interface jarring.

Also ported those same styles to theme_boost for consistency.
  • Loading branch information...
ryanwyllie committed Oct 14, 2016
1 parent 6a69cda commit fd8eab572d1a7f31bd1450e21524c52ed0344e1e
@@ -61,6 +61,34 @@
}
}

.ajax-contact-button {
box-sizing: border-box;
position: relative;

&.loading {
.loading-icon {
display: block;
}
}

.loading-icon {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.7);

.icon {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
}

@media (max-width: 480px) {
.userprofile .profile_tree {
/** Display the profile on one column on phones@mixin */
@@ -52,20 +52,53 @@
text-align: right;
}
}

/**
* This rule has been added to duplicate the style of icons with the
* .iconsmall class for consistent rendering.
*
* Loading a pix icon using the template helper returns icons with
* the class 'smallicon' instead of 'iconsmall'.
*/
#page-user-profile {
.ajax-contact-button {
img {
&.smallicon {
margin: 0;
padding: 0.3em;
height: 12px;
width: 12px;
vertical-align: middle;
}
}
}
}

.ajax-contact-button {
height: 31px;
box-sizing: border-box;
position: relative;

&.loading {
> *:not(.loading-icon) {
display: none;
}
.loading-icon {
display: block;
}
}

.loading-icon {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.7);

.smallicon {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
}

@@ -7448,18 +7448,41 @@ body.path-question-type .mform fieldset.hidden {
.path-user .node_category .viewmore {
text-align: right;
}
/**
* This rule has been added to duplicate the style of icons with the
* .iconsmall class for consistent rendering.
*
* Loading a pix icon using the template helper returns icons with
* the class 'smallicon' instead of 'iconsmall'.
*/
#page-user-profile .ajax-contact-button img.smallicon {
margin: 0;
padding: 0.3em;
height: 12px;
width: 12px;
vertical-align: middle;
}
.ajax-contact-button {
height: 31px;
box-sizing: border-box;
}
.ajax-contact-button.loading > *:not(.loading-icon) {
display: none;
position: relative;
}
.ajax-contact-button.loading .loading-icon {
display: block;
}
.ajax-contact-button .loading-icon {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.7);
}
.ajax-contact-button .loading-icon .smallicon {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
@media (max-width: 480px) {
.userprofile .profile_tree {

0 comments on commit fd8eab5

Please sign in to comment.
You can’t perform that action at this time.