<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[BuddyPress][9748] trunk/src/bp-templates/bp-legacy/css: Initial commit for scss stylesheet to support the Companion styles task for twentyfifteen theme.</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="http://buddypress.trac.wordpress.org/changeset/9748">9748</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"http://buddypress.trac.wordpress.org/changeset/9748","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>hnla</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2015-04-13 23:03:31 +0000 (Mon, 13 Apr 2015)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>Initial commit for scss stylesheet to support the Companion styles task for twentyfifteen theme.
Companion Styles are intended to support the default BP styles and enhance BP displayed with the standard WP themes and ensure BP is presented at it's best.
Provides the initial file format and baseline corrective styles along with breakpoint responsive layout and new user account menu layout.
An SCSS linter was previously added to Grunt in <a href="http://buddypress.trac.wordpress.org/changeset/9697">r9697</a>.
See <a href="http://buddypress.trac.wordpress.org/ticket/6291">#6291</a>
Props mercime, jjj, djpaul</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcbptemplatesbplegacycsstwentyfifteenscss">trunk/src/bp-templates/bp-legacy/css/twentyfifteen.scss</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunksrcbptemplatesbplegacycsstwentyfifteencss">trunk/src/bp-templates/bp-legacy/css/twentyfifteen.css</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcbptemplatesbplegacycsstwentyfifteencss"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: trunk/src/bp-templates/bp-legacy/css/twentyfifteen.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/bp-templates/bp-legacy/css/twentyfifteen.css (rev 0)
+++ trunk/src/bp-templates/bp-legacy/css/twentyfifteen.css 2015-04-13 23:03:31 UTC (rev 9748)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,540 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/*--------------------------------------------------------------
+
+This is the BuddyPress companion stylesheet for
+the WordPress Twentyfifteen theme.
+
+This sheet supports the primary BuddyPress styles in buddypress.css
+
+The Rulesets shadow the BP default stylesheet sectioning
+to maintain uniformity.
+
+If you are running as a child theme of twentyfifteen and wish to use
+this stylesheet then please copy it to buddypress/css/ or community/css/
+in your child theme root and rename the file to match your child theme name
+i.e. in child theme named 'twentyfifteen-child', twentyfifteen.css would become
+'twentyfifteen-child.css'
+
+----------------------------------------------------------------
+>>> TABLE OF CONTENTS:
+----------------------------------------------------------------
+1.0 Theme Structural Elements
+2.0 - Navigation - General
+ 2.1 - Navs - Object Nav / Sub Nav (item-list-tabs)
+ 2.2 - Pagination
+3.0 - Images
+4.0 - BP Lists / Loops Generic
+ 4.1 - Activity Loop
+ 4.1.1 - Activity Listing
+ 4.1.2 - Activity Comments
+ 4.2 - Members Loop
+ 4.3 - Groups Loop
+ 4.4 - Blogs Loop
+5.0 - Directories - Members, Groups, Blogs, Forums
+6.0 - Single Group Screens
+7.0 - Single User Account Screens
+ 7.1 - Notifications
+ 7.2 - Private Messaging Threads
+ 7.3 - Extended Profiles
+ 7.4 - Settings
+8.0 - Forms - General
+9.0 - Tables - General
+10.0 - Error / Success Messages
+11.0 - Ajax Loading
+12.0 - Widgets
+--------------------------------------------------------------*/
+/**
+*-------------------------------------------------------------------------------
+* @section 1.0 - Theme - Structural Elements
+*-------------------------------------------------------------------------------
+*/
+.buddypress div.clear {
+ display: none;
+}
+.buddypress main {
+ padding-top: 4%;
+}
+@media screen and (min-width: 59.6875em) {
+ .buddypress main {
+ padding-top: 0;
+ }
+}
+.buddypress main article {
+ margin: 0 4%;
+ padding-top: 8.3333%;
+}
+@media screen and (min-width: 59.6875em) {
+ .buddypress main article {
+ margin: 0 0 0 1px;
+ }
+}
+@media screen and (min-width: 87.6875em) {
+ .buddypress main article {
+ margin: 0 4.3333% 0 8.3333%;
+ }
+}
+.buddypress main article .entry-header,
+.buddypress main article .entry-content {
+ padding: 0 2rem 2rem;
+}
+.buddypress main article #buddypress {
+ margin-bottom: 40px;
+}
+.buddypress .site-footer {
+ margin: 0 4%;
+}
+@media screen and (min-width: 59.6875em) {
+ .buddypress .site-footer {
+ margin: 0 0 0 35.2941%;
+ width: 61.8235%;
+ }
+}
+
+/**
+*-------------------------------------------------------------------------------
+* @section 2.0 - Navigation - General
+*-------------------------------------------------------------------------------
+*/
+.buddypress #buddypress .item-list-tabs a,
+.buddypress #buddypress .activity-header a,
+.buddypress #buddypress .activity-inner a,
+.buddypress #buddypress .activity-comments a,
+.buddypress #buddypress .item-title a,
+.buddypress #buddypress .load-more a,
+.buddypress #buddypress .field-visibility-settings-toggle a,
+.buddypress #buddypress #latest-update a,
+.buddypress #buddypress table a {
+ border-bottom: 0;
+}
+.buddypress #buddypress .pagination-links a,
+.buddypress #buddypress .pagination-links span {
+ border-bottom: 0;
+}
+
+/**
+*-------------------------------------------------------------------------------
+* @section 2.1 - Navs - Object Nav / Sub Nav (item-list-tabs)
+*-------------------------------------------------------------------------------
+*
+* @description The main navigational elements for BP screens
+*/
+#buddypress {
+ /*__ Horizontal menus __*/
+}
+#buddypress div.item-list-tabs ul li.selected a {
+ background: #555;
+ color: #fff;
+ opacity: 1;
+}
+#buddypress div.item-list-tabs ul {
+ background-color: #f7f7f7;
+ border-bottom: 1px solid rgba(153, 153, 153, 0.4);
+ overflow: hidden;
+ padding: 5px 0;
+}
+#buddypress #object-nav ul {
+ overflow: hidden;
+}
+#buddypress #object-nav ul li {
+ float: none;
+}
+#buddypress #object-nav ul li:not(.selected) a {
+ opacity: 0.7;
+}
+@media screen and (min-width: 38.75em) {
+ #buddypress #object-nav ul li {
+ float: left;
+ }
+}
+#buddypress div#subnav.item-list-tabs {
+ margin-top: 0;
+}
+#buddypress div#subnav.item-list-tabs ul {
+ background-color: #f7f7f7;
+ border-bottom: 0;
+ padding: 0;
+}
+#buddypress div#subnav.item-list-tabs ul li.last {
+ background: #fff;
+ margin-top: 0;
+ padding: 5px 5px 5px 0;
+ width: 100%;
+}
+#buddypress div#subnav.item-list-tabs ul li.last select,
+#buddypress div#subnav.item-list-tabs ul li.last select:focus {
+ background: transparent;
+ border: 0;
+ outline: 0;
+}
+#buddypress div#subnav.item-list-tabs ul li.last select,
+#buddypress div#subnav.item-list-tabs ul li.last label,
+#buddypress div#subnav.item-list-tabs ul li.last option {
+ font-size: 14px;
+ font-size: 1.4rem;
+}
+#buddypress div#subnav.item-list-tabs ul li.last select {
+ font-style: italic;
+}
+@media screen and (min-width: 38.75em) {
+ #buddypress div#subnav.item-list-tabs ul li.last {
+ text-align: right;
+ }
+}
+#buddypress div.item-list-tabs ul li.selected a,
+#buddypress div.item-list-tabs ul li.current a {
+ background: #555;
+ color: #fff;
+ opacity: 1;
+}
+
+/*__ Vertical menu User account screens __*/
+@media screen and (min-width: 55em) {
+ .bp-user #buddypress {
+ background: #f7f7f7;
+ }
+ .bp-user #buddypress #item-header,
+ .bp-user #buddypress #item-body {
+ background: #fff;
+ }
+ .bp-user #buddypress #object-nav {
+ border-right: 1px solid rgba(153, 153, 153, 0.1);
+ float: left;
+ margin-right: -1px;
+ width: 200px;
+ }
+ .bp-user #buddypress #object-nav ul {
+ border-bottom: 0;
+ padding: 0;
+ }
+ .bp-user #buddypress #object-nav ul li {
+ float: none;
+ overflow: hidden;
+ }
+ .bp-user #buddypress #object-nav ul li span {
+ border-radius: 10%;
+ float: right;
+ margin-right: 15px;
+ }
+ .bp-user #buddypress #item-body {
+ border-left: 1px solid #ddd;
+ overflow: hidden;
+ padding: 0 10px;
+ width: auto;
+ }
+ .bp-user #buddypress #item-body #subnav {
+ margin: 0 -10px;
+ }
+}
+/**
+*-------------------------------------------------------------------------------
+* @section 2.2 - Pagination
+*-------------------------------------------------------------------------------
+*/
+#buddypress div.pagination {
+ box-shadow: none;
+}
+#buddypress div.pagination .pag-count {
+ margin-left: 0;
+}
+#buddypress div.pagination .pagination-links {
+ margin-right: 0;
+}
+#buddypress div.pagination .pagination-links span,
+#buddypress div.pagination .pagination-links a {
+ height: auto;
+ line-height: 1;
+ padding: 5px;
+}
+#buddypress div.pagination .pagination-links .prev,
+#buddypress div.pagination .pagination-links .next {
+ background-color: transparent;
+ color: inherit;
+ overflow: visible;
+ width: auto;
+}
+#buddypress div.pagination .pagination-links .prev:before,
+#buddypress div.pagination .pagination-links .next:before {
+ display: none;
+}
+#buddypress div.pagination .pagination-links .prev {
+ left: auto;
+ position: static;
+}
+#buddypress div.pagination .pagination-links .next {
+ position: static;
+ right: auto;
+}
+
+/**
+*-------------------------------------------------------------------------------
+* @section 4.0 - BP Lists / Loops Generic
+*-------------------------------------------------------------------------------
+*/
+#buddypress ul.item-list li {
+ overflow: hidden !important;
+}
+#buddypress ul.item-list li .item .item-desc {
+ margin-left: 0;
+ width: auto;
+}
+@media screen and (min-width: 59.6875em) {
+ #buddypress ul.item-list li .item-avatar,
+ #buddypress ul.item-list li .item,
+ #buddypress ul.item-list li .action {
+ float: left;
+ }
+ #buddypress ul.item-list li .item {
+ left: 10%;
+ position: relative;
+ width: 55%;
+ }
+}
+#buddypress ul.item-list li div.action {
+ clear: left;
+ float: none;
+ margin-bottom: -20px;
+ margin-left: 0;
+ padding: 20px 0 5px;
+ position: relative;
+ text-align: left;
+ top: 0;
+}
+@media screen and (min-width: 59.6875em) {
+ #buddypress ul.item-list li div.action {
+ clear: none;
+ float: right;
+ margin-bottom: 0;
+ padding: 0;
+ }
+}
+#buddypress ul.item-list li div.action div {
+ display: inline-block;
+ margin: 10px 0;
+ width: 100%;
+}
+#buddypress ul.item-list li div.action div a {
+ display: block;
+ width: 100%;
+}
+@media screen and (min-width: 38.75em) {
+ #buddypress ul.item-list li div.action div {
+ margin: 0 10px 10px 0;
+ width: auto;
+ }
+}
+@media screen and (min-width: 59.6875em) {
+ #buddypress ul.item-list li div.action div {
+ clear: right;
+ float: right;
+ margin: 0 0 10px 0;
+ }
+}
+#buddypress ul.item-list li div.action .meta {
+ font-style: italic;
+}
+
+/**
+*-------------------------------------------------------------------------------
+* @section 4.1 - Activity
+*-------------------------------------------------------------------------------
+*/
+/**
+*-------------------------------------------------------------------------------
+* @section 4.1.2 - Activity Whats New
+*-------------------------------------------------------------------------------
+*/
+#buddypress form#whats-new-form textarea {
+ width: 100%;
+}
+#buddypress form#whats-new-form #whats-new-options[style] {
+ min-height: 6rem;
+}
+#buddypress #item-body form#whats-new-form {
+ margin: 40px 0;
+}
+
+/**
+*-------------------------------------------------------------------------------
+* @section 4.1.2 - Activity Listing
+*-------------------------------------------------------------------------------
+*/
+#buddypress .activity-list .activity-content {
+ margin-top: -12px;
+}
+#buddypress .activity-list .activity-content .activity-header img.avatar {
+ display: inline-block;
+}
+#buddypress .activity-list .load-more a {
+ display: block;
+}
+
+/**
+*-------------------------------------------------------------------------------
+* @section 4.2 - Members Loop
+*-------------------------------------------------------------------------------
+*/
+@media screen and (min-width: 59.6875em) {
+ #buddypress #members-list li .item-avatar,
+ #buddypress #members-list li .item {
+ float: left;
+ }
+ #buddypress #members-list li .action {
+ float: right;
+ }
+}
+
+/**
+*-------------------------------------------------------------------------------
+* @section 7.0 - Single User Account Screens
+*-------------------------------------------------------------------------------
+*/
+.bp-user .entry-title {
+ margin-bottom: .5em;
+}
+@media screen and (min-width: 77.5em) {
+ .bp-user #buddypress #groups-list li .item {
+ left: 5%;
+ width: 50%;
+ }
+}
+
+/**
+*-------------------------------------------------------------------------------
+* @section 8.0 - Forms - General
+*-------------------------------------------------------------------------------
+*/
+#buddypress #item-body .standard-form li {
+ float: none;
+}
+#buddypress #item-body .standard-form input[type='text'],
+#buddypress #item-body .standard-form textarea {
+ width: 100%;
+}
+#buddypress div.dir-search,
+#buddypress div.message-search {
+ float: none;
+ margin: 10px 0;
+}
+#buddypress div.dir-search form,
+#buddypress div.message-search form {
+ border: 1px solid rgba(153, 153, 153, 0.4);
+ overflow: hidden;
+}
+#buddypress div.dir-search form label,
+#buddypress div.message-search form label {
+ float: left;
+ width: 80%;
+}
+#buddypress div.dir-search form input[type='text'],
+#buddypress div.message-search form input[type='text'] {
+ float: left;
+ margin: 0;
+ width: 80%;
+}
+#buddypress div.dir-search form input[type='text'],
+#buddypress div.dir-search form input[type='submit'],
+#buddypress div.message-search form input[type='text'],
+#buddypress div.message-search form input[type='submit'] {
+ font-size: 14px;
+ font-size: 1.4rem;
+ border: 0;
+ line-height: inherit;
+}
+#buddypress div.dir-search form input[type='text'],
+#buddypress div.message-search form input[type='text'] {
+ border-right: 1px solid rgba(153, 153, 153, 0.4);
+ padding: 0.2em 0 0.2em 0.2em;
+}
+#buddypress div.dir-search form input[type='submit'],
+#buddypress div.message-search form input[type='submit'] {
+ float: right;
+ font-weight: normal;
+ padding: 0.2em 1em;
+ text-align: center;
+ text-transform: none;
+ width: 20%;
+}
+@media screen and (min-width: 38.75em) {
+ #buddypress div.dir-search,
+ #buddypress div.message-search {
+ float: right;
+ margin-bottom: 5px !important;
+ }
+ #buddypress div.dir-search form label,
+ #buddypress div.dir-search form input[type='text'],
+ #buddypress div.dir-search form input[type='submit'],
+ #buddypress div.message-search form label,
+ #buddypress div.message-search form input[type='text'],
+ #buddypress div.message-search form input[type='submit'] {
+ width: auto;
+ }
+ #buddypress div.message-search {
+ margin-right: 10px;
+ }
+}
+@media screen and (min-width: 77.5em) {
+ #buddypress .dir-search form input[type='text'],
+ #buddypress .message-search form input[type='text'] {
+ font-size: 16px;
+ font-size: 1.6rem;
+ }
+ #buddypress .dir-search form input[type='submit'],
+ #buddypress .message-search form input[type='submit'] {
+ font-size: 16px;
+ font-size: 1.6rem;
+ }
+}
+
+/**
+*-------------------------------------------------------------------------------
+* @section 9.0 - Tables - General
+*-------------------------------------------------------------------------------
+*/
+#buddypress table {
+ font-size: 14px;
+ font-size: 1.4rem;
+ margin: 20px 0;
+}
+@media screen and (min-width: 55em) {
+ #buddypress table {
+ font-size: 16px;
+ font-size: 1.6rem;
+ }
+}
+
+/*__ User Account tables __*/
+#buddypress .notifications th,
+#buddypress .messages-notices th {
+ width: 30%;
+}
+#buddypress .notifications th.bulk-select-all,
+#buddypress .messages-notices th.bulk-select-all {
+ text-align: center;
+ width: 10%;
+}
+#buddypress .notifications .bulk-select-check,
+#buddypress .messages-notices .bulk-select-check {
+ text-align: center;
+}
+#buddypress .notifications .notification-actions,
+#buddypress .notifications td.thread-options,
+#buddypress .messages-notices .notification-actions,
+#buddypress .messages-notices td.thread-options {
+ text-align: center;
+}
+#buddypress .notifications .notification-actions a,
+#buddypress .notifications td.thread-options a,
+#buddypress .messages-notices .notification-actions a,
+#buddypress .messages-notices td.thread-options a {
+ display: inline-block;
+ margin: 0;
+ padding: 0;
+}
+#buddypress .notifications td .button,
+#buddypress .messages-notices td .button {
+ border: 0;
+ display: block;
+ padding: 0;
+ text-align: center;
+}
+
+/*# sourceMappingURL=twentyfifteen.css.map */
</ins></span></pre></div>
<a id="trunksrcbptemplatesbplegacycsstwentyfifteenscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/bp-templates/bp-legacy/css/twentyfifteen.scss</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/bp-templates/bp-legacy/css/twentyfifteen.scss 2015-04-13 22:11:07 UTC (rev 9747)
+++ trunk/src/bp-templates/bp-legacy/css/twentyfifteen.scss 2015-04-13 23:03:31 UTC (rev 9748)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,731 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+// Stylesheet Guidence Notes
+// Table of content represents a guide to sections of the sheet.
+// Note that not all sections may be described in the body of the
+// rulesets only those that require styles for a given theme.
+// Sub sections might not exist but can be added as required
+// as per BP Lists - 'activity' section.
+
+// We follow the dictats of the parent theme in respect of media queries,
+// font sizing etc. Media queries are used in a modular sense (OOCSS)
+// rather than described as blocks to the end of the sheet, this aids ease
+// of managing media queries, scalability & flexibility .
+
+// Twentyfifteen Media Queries / Breakpoints
+// @media screen and (min-width: 38.75em)
+// @media screen and (min-width: 46.25em)
+// @media screen and (min-width: 55em)
+// @media screen and (min-width: 59.6875em)
+// @media screen and (min-width: 77.5em)
+// @media screen and (min-width: 87.6875em)
+
+// Mixins and Variabals
+
+// Common margin values
+$spacing-val-lg: 40px;
+$spacing-val-md: 20px;
+$spacing-val-sm: 10px;
+$spacing-val-xs: 5px;
+
+// A simple mixin to handle font-sizing to match 2015 62.5% approach
+@mixin font-size($font-size: 16) {
+ $rem-font-value: ($font-size / 10);
+ font-size: ($font-size * 1px);
+ font-size: $rem-font-value + rem;
+}
+// Variabals: color definitions
+$content-background: #fff;
+$light-background: #f7f7f7;
+$medium-background: #ccc;
+$dark-background: #555;
+$border-color: #999; // border color is varied using rgba
+$border-light: #eaeaea; // BP dividers
+
+/*--------------------------------------------------------------
+
+This is the BuddyPress companion stylesheet for
+the WordPress Twentyfifteen theme.
+
+This sheet supports the primary BuddyPress styles in buddypress.css
+
+The Rulesets shadow the BP default stylesheet sectioning
+to maintain uniformity.
+
+If you are running as a child theme of twentyfifteen and wish to use
+this stylesheet then please copy it to buddypress/css/ or community/css/
+in your child theme root and rename the file to match your child theme name
+i.e. in child theme named 'twentyfifteen-child', twentyfifteen.css would become
+'twentyfifteen-child.css'
+
+----------------------------------------------------------------
+>>> TABLE OF CONTENTS:
+----------------------------------------------------------------
+1.0 Theme Structural Elements
+2.0 - Navigation - General
+ 2.1 - Navs - Object Nav / Sub Nav (item-list-tabs)
+ 2.2 - Pagination
+3.0 - Images
+4.0 - BP Lists / Loops Generic
+ 4.1 - Activity Loop
+ 4.1.1 - Activity Listing
+ 4.1.2 - Activity Comments
+ 4.2 - Members Loop
+ 4.3 - Groups Loop
+ 4.4 - Blogs Loop
+5.0 - Directories - Members, Groups, Blogs, Forums
+6.0 - Single Group Screens
+7.0 - Single User Account Screens
+ 7.1 - Notifications
+ 7.2 - Private Messaging Threads
+ 7.3 - Extended Profiles
+ 7.4 - Settings
+8.0 - Forms - General
+9.0 - Tables - General
+10.0 - Error / Success Messages
+11.0 - Ajax Loading
+12.0 - Widgets
+--------------------------------------------------------------*/
+
+/**
+*-------------------------------------------------------------------------------
+* @section 1.0 - Theme - Structural Elements
+*-------------------------------------------------------------------------------
+*/
+
+// As BP screens have specific content lets adjust the themes primary elements
+// to maximise the screen real estate for BP pages.
+
+.buddypress {
+ div.clear {display: none;}
+ .site-content {
+ @media screen and (min-width: 77.5em) {
+ }
+ }
+
+ main {
+ padding-top: 4%;
+ @media screen and (min-width: 59.6875em) {
+ padding-top: 0;
+ }
+
+ article {
+ margin: 0 4%;
+ padding-top: 8.3333%;
+ @media screen and (min-width: 59.6875em) {
+ margin: 0 0 0 1px;
+ }
+ @media screen and (min-width: 87.6875em) {
+ margin: 0 4.3333% 0 8.3333%;
+ }
+
+ .entry-header,
+ .entry-content {
+ padding: 0 2rem 2rem;
+ }
+
+ #buddypress {
+ margin-bottom: $spacing-val-lg;
+ }
+ } // .article
+ } // .main
+ .site-footer {
+ margin: 0 4%;
+ @media screen and (min-width: 59.6875em) {
+ margin: 0 0 0 35.2941%;
+ width: 61.8235%;
+ }
+ }
+} // .buddypress (body class)
+
+/**
+*-------------------------------------------------------------------------------
+* @section 2.0 - Navigation - General
+*-------------------------------------------------------------------------------
+*/
+
+// Remove 2015 border bottom on BP links/spans
+
+.buddypress #buddypress {
+ .item-list-tabs,
+ .activity-header,
+ .activity-inner,
+ .activity-comments,
+ .item-title,
+ .load-more,
+ .field-visibility-settings-toggle,
+ #latest-update,
+ table, {
+ a { border-bottom: 0; }
+ }
+
+ .pagination-links {
+ a,
+ span { border-bottom: 0; }
+ }
+} // close .buddypress #buddypress
+
+/**
+*-------------------------------------------------------------------------------
+* @section 2.1 - Navs - Object Nav / Sub Nav (item-list-tabs)
+*-------------------------------------------------------------------------------
+*
+* @description The main navigational elements for BP screens
+*/
+
+// We have a need to override BP specifity
+// so some rulesets sets are seemingly over weighted in selectors
+
+#buddypress {
+
+ // active/current states all navs
+ div.item-list-tabs {
+ ul {
+ li.selected {
+ a {
+ background: $dark-background;
+ color: #fff;
+ opacity: 1;
+ }
+ }
+ }
+ }
+ // Global Nav Styles
+ div.item-list-tabs {
+ ul {
+ background-color: $light-background;
+ border-bottom: 1px solid rgba($border-color, 0.4);
+ overflow: hidden;
+ padding: $spacing-val-xs 0;
+ }
+ }
+ /*__ Horizontal menus __*/
+ #object-nav {
+ ul {
+ // background-color: #eee;
+ // border-bottom: 1px solid #ddd;
+ overflow: hidden;
+ li {float: none;}
+ li:not(.selected) {
+ a {opacity: 0.7;}
+ }
+
+ @media screen and (min-width: 38.75em) {
+ li {
+ float: left;
+ }
+ // li:nth-child(1n+7) {clear: left;}
+ }
+ }
+ }
+
+ div#subnav.item-list-tabs {
+ margin-top: 0;
+
+ ul {
+ background-color: $light-background;
+ border-bottom: 0;
+ padding: 0;
+
+ li.last {
+ background: $content-background;
+ margin-top: 0;
+ padding: $spacing-val-xs $spacing-val-xs $spacing-val-xs 0;
+ width: 100%;
+
+ select,
+ select:focus {
+ background: transparent;
+ border: 0;
+ outline: 0;
+ }
+
+ select,
+ label,
+ option {
+ @include font-size(14);
+ }
+
+ select {
+ font-style: italic;
+ }
+ }
+
+ @media screen and (min-width: 38.75em) {
+ li.last {
+ text-align: right;
+ }
+ }
+ } // close ul
+ } // close #subnav
+
+ // active/current states all navs
+ div.item-list-tabs {
+ ul {
+ li.selected,
+ li.current {
+ a {
+ background: $dark-background;
+ color: #fff;
+ opacity: 1;
+ }
+ }
+ }
+ }
+
+} // close #buddypress
+
+ /*__ Vertical menu User account screens __*/
+
+// This block contains the rules to re-factor the item-body structural element
+// to sit alongside the vert menu
+// Structural layout and faux column styling of backgrounds is more suited
+// to the earlier section. todo: re-position sort out when known what styles
+// are being used.
+
+@media screen and (min-width: 55em) {
+ .bp-user #buddypress {
+ background: $light-background;
+
+ #item-header,
+ #item-body {
+ background: $content-background;
+ }
+
+ #object-nav {
+ border-right: 1px solid rgba($border-color, .1);
+ float: left;
+ margin-right: -1px;
+ width: 200px;
+
+ ul {
+ border-bottom: 0;
+ padding: 0;
+
+ li {
+ float: none;
+ overflow: hidden;
+
+ span {
+ border-radius: 10%;
+ float: right;
+ margin-right: 15px;
+ }
+ }
+ }
+ }
+
+ #item-body {
+ border-left: 1px solid #ddd;
+ overflow: hidden;
+ padding: 0 $spacing-val-sm;
+ width: auto;
+
+ #subnav {
+ margin: 0 (-$spacing-val-sm);
+ }
+ }
+
+ } // close .bp-user #buddypress
+} // close @media
+
+/**
+*-------------------------------------------------------------------------------
+* @section 2.2 - Pagination
+*-------------------------------------------------------------------------------
+*/
+
+#buddypress {
+ div.pagination {
+ box-shadow: none;
+ .pag-count {margin-left: 0;}
+ .pagination-links {
+ margin-right: 0;
+
+ span,
+ a {
+ height: auto;
+ line-height: 1;
+ padding: 5px;
+ }
+
+ .prev,
+ .next {
+ background-color: transparent;
+ color: inherit;
+ overflow: visible;
+ width: auto;
+ &:before {display: none;}
+ }
+
+ .prev {
+ left: auto;
+ position: static;
+ }
+
+ .next {
+ position: static;
+ right: auto;
+ }
+ } // close .pagination-links
+ } // close .pagination
+} // close #buddypress
+
+/**
+*-------------------------------------------------------------------------------
+* @section 4.0 - BP Lists / Loops Generic
+*-------------------------------------------------------------------------------
+*/
+
+// Trying to position the action div absolute has bad consequences where
+// aditional items are displayed, floating is an alternative but may need
+// to reconsider this approach. All li items floated left at wide screen.
+// Initialy override the BP absolute positioning, allow natural flow position
+// mobile up.
+
+#buddypress {
+ ul.item-list {
+ li {
+ overflow: hidden !important;
+
+ .item {
+ .item-desc {
+ margin-left: 0;
+ width: auto;
+ }
+ }
+
+ @media screen and (min-width: 59.6875em) {
+ .item-avatar,
+ .item,
+ .action {
+ float: left;
+ }
+
+ .item {
+ left: 10%;
+ position: relative;
+ width: 55%;
+ }
+ }// close @media
+
+ div.action {
+ clear: left;
+ float: none;
+ margin-bottom: -$spacing-val-md;
+ // remove BP margin left
+ margin-left: 0;
+ padding: $spacing-val-md 0 $spacing-val-xs;
+ // push the actions to the right
+ @media screen and (min-width: 59.6875em) {
+ clear: none;
+ float: right;
+ margin-bottom: 0;
+ padding: 0;
+ }
+ position: relative;
+ text-align: left;
+ top: 0;
+
+ div {
+ display: inline-block;
+ margin: $spacing-val-sm 0;
+ width: 100%;
+
+ a {
+ display: block;
+ width: 100%;
+ }
+ // Provisionally lets keep the 'action' div
+ //position but inline-block the buttons
+ @media screen and (min-width: 38.75em) {
+ // keep buttons to a row small tablet up
+ margin: 0 $spacing-val-sm $spacing-val-sm 0;
+ width: auto;
+ } // close @media
+ @media screen and (min-width: 59.6875em) {
+ // take buttons to block to stack them when floated right
+ clear: right;
+ float: right;
+ margin: 0 0 $spacing-val-sm 0;
+ } // close @media
+
+ } // close div
+
+ .meta {
+ font-style: italic;
+ }
+
+ } // close .action
+
+ } // close li
+ } // close .item-list
+} // close #buddypress
+
+/**
+*-------------------------------------------------------------------------------
+* @section 4.1 - Activity
+*-------------------------------------------------------------------------------
+*/
+
+/**
+*-------------------------------------------------------------------------------
+* @section 4.1.2 - Activity Whats New
+*-------------------------------------------------------------------------------
+*/
+
+#buddypress {
+ form#whats-new-form {
+ textarea {width: 100%;}
+ // corrective measure for clipped elements due to JS inline styling
+ #whats-new-options[style] {
+ min-height: 6rem; // unit open to debate px value might be better.
+ }
+ }
+ // User account form requires matching bp default specificity
+ #item-body {
+ form#whats-new-form {
+ margin: $spacing-val-lg 0;
+ }
+ }
+} // close #buddypress
+
+/**
+*-------------------------------------------------------------------------------
+* @section 4.1.2 - Activity Listing
+*-------------------------------------------------------------------------------
+*/
+
+#buddypress {
+ .activity-list {
+ .activity-content {
+ margin-top: -12px;
+
+ .activity-header {
+ img.avatar {
+ display: inline-block;
+ }
+ } // close .activity-header
+ } // close .activity-content
+ .load-more a {display: block;}
+ } // close .activity-list
+
+} // close #buddypress
+
+/**
+*-------------------------------------------------------------------------------
+* @section 4.2 - Members Loop
+*-------------------------------------------------------------------------------
+*/
+
+#buddypress {
+ #members-list {
+ @media screen and (min-width: 59.6875em) {
+ li {
+ .item-avatar,
+ .item {
+ float: left;
+ }
+
+ .action {
+ float: right;
+ }
+ }
+ }
+ }
+} //close #BuddyPress
+
+/**
+*-------------------------------------------------------------------------------
+* @section 7.0 - Single User Account Screens
+*-------------------------------------------------------------------------------
+*/
+
+.bp-user {
+ .entry-title {margin-bottom: .5em;}
+
+ #buddypress {
+ #groups-list {
+ li {
+ .item {
+ @media screen and (min-width: 77.5em) {
+ left: 5%;
+ width: 50%;
+ }
+ }
+ }
+ }
+ }
+} // close .bp-user
+
+/**
+*-------------------------------------------------------------------------------
+* @section 8.0 - Forms - General
+*-------------------------------------------------------------------------------
+*/
+
+// 2015 applies 100% width to form element, remove this initially for BP search
+
+#buddypress {
+
+ // Manage form control widths under #item-body in user account screens
+ #item-body {
+ .standard-form {
+ li {float: none;}
+ input[type='text'],
+ textarea {
+ width: 100%;
+ }
+ }
+ }
+
+ div.dir-search,
+ div.message-search {
+ float: none;
+ margin: $spacing-val-sm 0;
+
+ // Stylise the seach form elements, in part this deals with padding
+ // issues on the submit & sizing issues between bp styles & twentyfifteen
+
+ form { // *sigh* only to bludgeon over specified rules
+ border: 1px solid rgba($border-color, 0.4);
+ overflow: hidden;
+
+ label {
+ float: left;
+ width: 80%;
+ }
+
+ input[type='text'] {
+ float: left;
+ margin: 0;
+ width: 80%;
+ }
+
+ input[type='text'],
+ input[type='submit'] {
+ @include font-size(14);
+ border: 0;
+ line-height: inherit;
+ }
+
+ input[type='text'] {
+ border-right: 1px solid rgba($border-color, 0.4);
+ padding: 0.2em 0 0.2em 0.2em;
+ }
+
+ input[type='submit'] {
+ float: right;
+ font-weight: normal;
+ padding: 0.2em 1em;
+ text-align: center;
+ text-transform: none;
+ width: 20%;
+ }
+ }// close form
+
+ } // close .dir-search, .message-search
+
+ // Shift the search parent to the right and allow to shrinkwrap
+ @media screen and (min-width: 38.75em) {
+ div.dir-search,
+ div.message-search {
+ float: right;
+ margin-bottom: 5px !important;
+
+ form {
+ label,
+ input[type='text'],
+ input[type='submit'] {
+ width: auto;
+ }
+ }
+ }
+
+ div.message-search {margin-right: $spacing-val-sm;}
+ } // close @media
+
+ // Attempt to replicate the 2015 breakpoint font resizing for buttons/submits
+// @media screen and (min-width: 59.6875em) {
+// .dir-search,
+// .message-search {
+ // form {
+ // input[type='text'] { @include font-size(14) ;}
+ // input[type='submit'] {@include font-size(14);}
+ // }
+ // }
+// }
+
+ @media screen and (min-width: 77.5em) {
+
+ .dir-search,
+ .message-search {
+ form {
+ input[type='text'] { @include font-size(16) ;}
+ input[type='submit'] { @include font-size(16) ;}
+ }
+ }
+ }
+
+} // close #buddypress
+
+/**
+*-------------------------------------------------------------------------------
+* @section 9.0 - Tables - General
+*-------------------------------------------------------------------------------
+*/
+
+// Adjust table font sizes, default too large proportionally
+// This approach will require refinement and perhaps re-location to
+// a more general typography section to manage BP elements grouped under
+// breakpoints. Provide top/bottom margins for tables, lacking in BP styles
+#buddypress {
+ table {
+ @include font-size(14);
+ margin: $spacing-val-md 0;
+ }
+
+ @media screen and (min-width: 55em) {
+ table {@include font-size(16);}
+ }
+}
+
+/*__ User Account tables __*/
+
+#buddypress {
+
+ // Manage some table cells widths that are disproportionate to their content
+ .notifications,
+ .messages-notices {
+ th {
+ width: 30%;
+
+ &.bulk-select-all {
+ text-align: center;
+ width: 10%;
+ }
+ }
+
+ .bulk-select-check {text-align: center;}
+ .notification-actions,
+ td.thread-options {
+ text-align: center;
+
+ a {
+ display: inline-block;
+ margin: 0;
+ padding: 0;
+ }
+ }
+
+ // Notices action buttons, this maybe better moved, temp for now to address
+ // styling issues - this will need styling ideas
+ td {
+ .button {
+ border: 0;
+ display: block;
+ padding: 0;
+ text-align: center;
+ }
+ }
+
+ } // .notifications, .message-notices
+} // #buddypress
</ins></span></pre>
</div>
</div>
</body>
</html>