ꦫꦣꦺꦤ꧀ꦄꦤ꧀ꦠꦱꦺꦤ

PATH: home / letacommog / entrepro / wp-content / plugins / buddypress / bp-templates / bp-nouveau / common-styles

// BP Buttons, Submits, Icons and general clicky things styling.
// @version 3.0.0

// Buttons by default are styled as simple boxes but we may
// change that by adding a parent class ( on any close parent to
// the element ) .text-link-list

.buddypress {

// this doubling avoids issues applying styles from body class
	// to general theme elements - changing body class would be better though.
	.buddypress-wrap {

button,
		a.button,
		input[type="submit"],
		input[type="button"],
		input[type="reset"],
		ul.button-nav:not(.button-tabs) li a,
		.generic-button a,
		.comment-reply-link,
		a.bp-title-button,
		.activity-read-more a {
			background: $white; /* Old browsers */
			border-color: $bp-border-dark;
			border-style: solid;
			border-width: 1px;
			color: $dark-grey;
			cursor: pointer;
			font-size: inherit;
			font-weight: 400;
			outline: none;
			padding: $pad-xsml $pad-sml;
			text-align: center;
			text-decoration: none;
			width: auto;
		}

// Re-instate the quick-tag padding to avoid the above ruleset
		// causing styling issues.
		.button-small[type="button"] {
			padding: 0 8px 1px;
		}

button:hover,
		button:focus,
		a.button:focus,
		a.button:hover,
		input[type="submit"]:focus,
		input[type="submit"]:hover,
		input[type="button"]:focus,
		input[type="button"]:hover,
		input[type="reset"]:focus,
		input[type="reset"]:hover,
		.button-nav li a:focus,
		.button-nav li a:hover,
		.button-nav li.current a,
		.generic-button a:focus,
		.generic-button a:hover,
		.comment-reply-link:focus,
		.comment-reply-link:hover,
		.activity-read-more a:focus,
		.activity-read-more a:hover {
			background: $buttons-background;
			border-color: darken($bp-border-dark, 20%);
			color: $black;
			outline: none;
			text-decoration: none;
		}

input[type="submit"].pending,
		input[type="button"].pending,
		input[type="reset"].pending,
		input[type="button"].disabled,
		input[type="reset"].disabled,
		input[type="submit"][disabled="disabled"],
		button.pending,
		button.disabled,
		div.pending a,
		a.disabled {
			border-color: $bp-border-color;
			color: $light-text;
			cursor: default;
		}

input[type="submit"]:hover.pending,
		input[type="button"]:hover.pending,
		input[type="reset"]:hover.pending,
		input[type="submit"]:hover.disabled,
		input[type="button"]:hover.disabled,
		input[type="reset"]:hover.disabled,
		button.pending:hover,
		button.disabled:hover,
		div.pending a:hover,
		a.disabled:hover {
			border-color: $bp-border-color;
			color: $light-text;
		}

// provide a class to style elements as text only non button.
		button.text-button,
		input.text-button {
			background: none;
			border: 0;

@include box-shadow-none();
			color: $light-text;

&.small {

@include font-size(13);
			}

&:focus,
			&:hover {
				background: none;
				text-decoration: underline;
			}
		}

.activity-list {

a.button {
				border: none;
			}
		}

.bp-invites-content {

ul.bp-list {

li {

a.invite-button:hover {
						color: #1fb3dd;
					}
				}

li.selected,
				li {

a.invite-button:hover,
					a.group-remove-invite-button:hover {
						color: #a00;
					}
				}

}
		}

#item-buttons:empty {
			display: none;
		}

input:disabled {

&:hover,
			&:focus {
				background: none;
			}
		}

// Style action links as text links
		// .text-links-list would be stated for anchors parent wrapping element
		// Example usage on group members manage screen.

.text-links-list {

a.button {
				background: none;
				border: none;
				border-right: 1px solid $bp-border-color;
				color: $light-text-plus;
				display: inline-block;
				padding: $pad-xsml $pad-med;

&:visited {
					color: $text-link-visited;
				}

&:focus,
				&:hover {
					color: $text-link-hover;
				}

}

a:first-child {
				padding-left: 0;
			}

a:last-child {
				border-right: none;
			}

} // close text-links-list

// In grids style the basic action button a little differently

.bp-list.grid {

.action {

a,
				button {
					border: 1px solid $bp-border-dark;
					display: block;
					margin: 0;

&:focus,
					&:hover {
						background: $buttons-background;
					}
				}
			} // .action
		}

} // close .buddypress

// The group or site create link as either a button or plain link.
	// @todo this will need further classes & styles depending on nav layouts?
	// The class 'create-button' will be hardcoded for the moment on the li
	// this could be a user selected choice to style as a button though?

#buddypress {

// Style the create link as a button - this would be better served
		// as a modifier class but we need to be able to allow user selection
		// between button style & plain text. For the moment we'll force a
		// choice, vert dir navs get button style, horizontal dir navs a text link.

.create-button { // the parent, i.e li element.
			background: none;

a:focus,
			a:hover {
				text-decoration: underline;
			}

@include medium-up {
				float: right;
			}
			text-align: center;

a {
				border: 1px solid $bp-border-dark;

@include border-radius(5px);
				@include box-shadow(inset 0 0 6px 0 $light-grey);
				margin: 0.2em 0;
				width: auto;

&:focus,
				&:hover {
					background: none;
					border-color: $bp-border-dark;

@include box-shadow(inset 0 0 12px 0 $light-grey );
				}
			}

} // .create-button

&.bp-dir-vert-nav {

@include medium-up {

.create-button {
					float: none;
					padding-top: $pad-lrg;

a {
						margin-right: 0.5em;
					}
				}
			}
		}

&.bp-dir-hori-nav {

.create-button {
				float: left;

a,
				a:hover {
					background: none;
					border: 0;

@include box-shadow-none();
					margin: 0;
				}
			}
		}
	} // close #buddypress

} // close body class .buddypress @todo this should be removed in time

// ==== Icons ====

.buddypress-wrap {

// buttons that are visually rendering as icons only won't
	// want the general button styles.
	// We'll use a class hook to identify those elements.
	button {

&.bp-icons,
		&.ac-reply-cancel {

background: none;
			border: 0;
		}

&.bp-icons {

&:focus,
			&:hover {
				background: none;
			}
		}

&.ac-reply-cancel {

&:focus,
			&:hover {
				background: none;
				text-decoration: underline;
			}
		}
	}

.filter label:before,
	.feed a:before,
	.bp-invites-filters  .invite-button span.icons:before,
	.bp-messages-filters li a.messages-button:before,
	.bp-invites-content li .invite-button span.icons:before {
		font-family: dashicons;
		font-size: 18px;
	}

.bp-invites-content .item-list li .invite-button span.icons:before {

@include responsive-font(32);
	}

// If icons are required for anchors e.g '<a class="button"'
	// then we may have .button background hovers being inherited
	// Use this grouped selector ruleset to add elements that need
	// no change. As we need weight this is specific to bp-lists

// This is probably a less than optimal solution & a better one will exist to
	// implemented when time allows.
	.bp-list {

a.button.invite-button {

&:focus,
			&:hover {
				background: none;
			}
		}
	}

.filter label:before {
		content: "\f536";
	}

div.feed a:before,
	li.feed a:before {
		content: "\f303";
	}

ul.item-list {

li {

.invite-button:not(.group-remove-invite-button) {

span.icons:before {
					content: "\f502";
				}
			}
		}

li.selected .invite-button,
		li .group-remove-invite-button {

span.icons:before {
				content: "\f153";
			}
		}
	} // close ul.item-list

.bp-invites-filters ul li #bp-invites-next-page:before,
	.bp-messages-filters ul li #bp-messages-next-page:before {
		content: "\f345";
	}

.bp-invites-filters ul li #bp-invites-prev-page:before,
	.bp-messages-filters ul li #bp-messages-prev-page:before {
		content: "\f341";
	}
} // close .buddypress-wrap

[+] ..
[-] _bp_groups_activity.scss [edit]
[-] _bp_groups_management.scss [edit]
[-] _bp_registration.scss [edit]
[-] _bp_activity_entries.scss [edit]
[-] _bp_members_loop.scss [edit]
[-] _bp_groups_create.scss [edit]
[-] _bp_forms.scss [edit]
[-] _bp_comment_form.scss [edit]
[-] _bp_update_form.scss [edit]
[-] _bp_animations.scss [edit]
[-] _bp_blogs_loop.scss [edit]
[-] _bp_activity_comments.scss [edit]
[-] _bp-variables.scss [edit]
[-] _bp_layouts.scss [edit]
[-] _bp_group_header.scss [edit]
[-] _bp_messages.scss [edit]
[-] _bp_lists.scss [edit]
[-] _bp_pagination.scss [edit]
[-] _bp_tables.scss [edit]
[-] _bp_widgets.scss [edit]
[-] _bp_search.scss [edit]
[-] _bp_generic_and_typography.scss [edit]
[-] _bp_user_settings.scss [edit]
[-] _bp-mixins.scss [edit]
[-] _bp_general_classes.scss [edit]
[-] _bp_navigation.scss [edit]
[-] _bp_item_body_general.scss [edit]
[-] _bp_user_header.scss [edit]
[-] _bp_filters.scss [edit]
[-] _bp_tooltips.scss [edit]
[-] _bp_info_messages.scss [edit]
[-] _bp_item_header_general.scss [edit]
[-] _bp_buttons.scss [edit]
[-] _bp_groups_loop.scss [edit]
[-] _bp_groups_item_body.scss [edit]
[-] _bp_cover_image.scss [edit]
[-] _bp_user_profile.scss [edit]