Ticket #6291: twentyfifteen-comp-style.05.patch

src/bp-templates/bp-legacy/css/twentyfifteen.scss

@@ +1 @@
+// 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;
+}
+/*--------------------------------------------------------------
+
+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
+--------------------------------------------------------------*/
+
+/*--------------------------------------------------------------
+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 {
+        .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)
+
+/*--------------------------------------------------------------
+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
+
+/*--------------------------------------------------------------
+2.1 - Navs - Object Nav / Sub Nav (item-list-tabs)
+--------------------------------------------------------------*/
+// 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: #555;
+                                        color: #fff;
+                                        opacity: 1;
+                                }
+                        }
+                }
+        }
+        // Global nav styles
+        div.item-list-tabs {
+                ul {
+                        background-color: #eee;
+                        border-bottom: 1px solid #ddd;
+                        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: #f2f2f2;
+                        border-bottom: 0;
+                        padding: 0;
+
+                        li.last {
+                                background: #fff;
+                                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;
+                                }
+                        }
+
+                        @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: #555;
+                                        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: #eee;
+
+                #item-header,
+                #item-body {
+                        background: #fff;
+                }
+
+                #object-nav {
+                        border-right: 1px solid #ddd;
+                        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
+
+/*--------------------------------------------------------------
+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
+
+/*--------------------------------------------------------------
+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.
+// Initialy override the BP absolute positioning, allow natural flow position
+// mobile up.
+
+#buddypress {
+        ul.item-list {
+                li {
+                        overflow: hidden !important;
+
+                        div.action {
+                                clear: left;
+                                @media screen and (min-width: 77.5em) {
+                                        float: right;
+                                        margin-top: -70px;
+                                }
+                                margin-top: $spacing-val-md;
+                                position: relative;
+                                text-align: left;
+                                top: 0;
+
+                                div {
+                                        // Provisionally lets keep the 'action' div position but inline-block the buttons
+                                        @media screen and (min-width: 55em) {
+                                                // keep buttons to a row small tablet up
+                                                display: inline-block;
+                                                margin-right: $spacing-val-xs;
+                                        } // close @media
+                                        @media screen and (min-width: 77.5em) {
+                                                // take buttons to block to stack them when floated right
+                                                clear: right;
+                                                display: block;
+                                                float: right;
+                                        } // close @media
+                                        margin: 4px 0;
+                                } // close div
+                        } // close .action
+                } // close li
+        } // close .item-list
+} // close #buddypress
+/*--------------------------------------------------------------
+4.1 - Activity
+--------------------------------------------------------------*/
+
+/*--------------------------------------------------------------
+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
+
+/*--------------------------------------------------------------
+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
+/*--------------------------------------------------------------
+7.0 - Single User Account Screens
+--------------------------------------------------------------*/
+
+/*--------------------------------------------------------------
+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 #ccc;
+                        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 #ccc;
+                                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
+
+/*--------------------------------------------------------------
+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