Skip to:
Content

BuddyPress.org

Ticket #6291: twentyfifteen-comp-style.patch

File twentyfifteen-comp-style.patch, 13.4 KB (added by hnla, 10 years ago)

Initial sass/css files

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

     
     1/*--------------------------------------------------------------
     2
     3This is the BuddyPress companion stylesheet for
     4the WordPress Twentyfifteen theme.
     5
     6This sheet supports the primary BuddyPress styles in buddypress.css
     7
     8The Rulesets shadow the BP default stylesheet sectioning
     9to maintain uniformity.
     10
     11----------------------------------------------------------------
     12>>> TABLE OF CONTENTS:
     13----------------------------------------------------------------
     141.0 Theme Structural Elements
     152.0 - Navigation - General
     16        2.1 - Navs - Object Nav / Sub Nav (item-list-tabs)
     17        2.2 - Pagination
     183.0 - Images
     194.0 - BP Lists / Loops Generic
     20        4.1 - Activity Loop
     21                4.1.1 - Activity Listing
     22                4.1.2 - Activity Comments
     23        4.2 - Members Loop
     24        4.3 - Groups Loop
     25        4.4 - Blogs Loop
     265.0 - Directories - Members, Groups, Blogs, Forums
     276.0 - Single Group Screens
     287.0 - Single User Account Screens
     29        7.1 - Notifications
     30        7.2 - Private Messaging Threads
     31        7.3 - Extended Profiles
     32        7.4 - Settings 
     338.0 - Forms  -  General
     349.0 - Tables -  General
     3510.0 - Error / Success Messages
     3611.0 - Ajax Loading
     3712.0 - Widgets
     38--------------------------------------------------------------*/
     39/*--------------------------------------------------------------
     401.0 - Theme - structural elements
     41--------------------------------------------------------------*/
     42/* line 79, twentyfifteen.scss */
     43.buddypress main article {
     44  padding-top: 1rem;
     45}
     46@media screen and (min-width: 59.6875em) {
     47  /* line 79, twentyfifteen.scss */
     48  .buddypress main article {
     49    margin: 0 0 0 1px;
     50  }
     51}
     52@media screen and (min-width: 87.6875em) {
     53  /* line 79, twentyfifteen.scss */
     54  .buddypress main article {
     55    margin: 0  6.3333%;
     56  }
     57}
     58/* line 87, twentyfifteen.scss */
     59.buddypress main article .entry-header, .buddypress main article .entry-content {
     60  padding: 2rem;
     61}
     62
     63/*--------------------------------------------------------------
     642.0 - Navigation - General
     65--------------------------------------------------------------*/
     66/* line 109, twentyfifteen.scss */
     67.buddypress #buddypress .item-list-tabs a,
     68.buddypress #buddypress .activity-header a,
     69.buddypress #buddypress .activity-inner a,
     70.buddypress #buddypress .activity-comments a,
     71.buddypress #buddypress .item-title a,
     72.buddypress #buddypress .load-more a,
     73.buddypress #buddypress .field-visibility-settings-toggle a,
     74.buddypress #buddypress #latest-update a,
     75.buddypress #buddypress table a {
     76  border-bottom: 0;
     77}
     78/* line 113, twentyfifteen.scss */
     79.buddypress #buddypress .pagination-links a,
     80.buddypress #buddypress .pagination-links span {
     81  border-bottom: 0;
     82}
     83
     84/*--------------------------------------------------------------
     852.1 - Navs - Object Nav / Sub Nav (item-list-tabs)
     86--------------------------------------------------------------*/
     87/*--------------------------------------------------------------
     882.2 - Pagination
     89--------------------------------------------------------------*/
     90/* line 126, twentyfifteen.scss */
     91#buddypress div.pagination {
     92  box-shadow: none;
     93}
     94/* line 128, twentyfifteen.scss */
     95#buddypress div.pagination .pagination-links {
     96  margin-right: 0;
     97}
     98/* line 131, twentyfifteen.scss */
     99#buddypress div.pagination .pagination-links span,
     100#buddypress div.pagination .pagination-links a {
     101  height: auto;
     102  line-height: 1;
     103  padding: 5px;
     104}
     105/* line 137, twentyfifteen.scss */
     106#buddypress div.pagination .pagination-links .prev,
     107#buddypress div.pagination .pagination-links .next {
     108  background-color: transparent;
     109  color: inherit;
     110  overflow: visible;
     111  width: auto;
     112}
     113/* line 142, twentyfifteen.scss */
     114#buddypress div.pagination .pagination-links .prev:before,
     115#buddypress div.pagination .pagination-links .next:before {
     116  display: none;
     117}
     118/* line 144, twentyfifteen.scss */
     119#buddypress div.pagination .pagination-links .prev {
     120  position: static;
     121  left: auto;
     122}
     123/* line 148, twentyfifteen.scss */
     124#buddypress div.pagination .pagination-links .next {
     125  position: static;
     126  right: auto;
     127}
     128
     129/*--------------------------------------------------------------
     1304.0 - BP Lists / Loops Generic
     131--------------------------------------------------------------*/
     132/*--------------------------------------------------------------
     1334.1 - Activity
     134--------------------------------------------------------------*/
     135/*--------------------------------------------------------------
     1364.1.2 - Activity Whats New
     137--------------------------------------------------------------*/
     138/*--------------------------------------------------------------
     1394.1.2 - Activity Listing
     140--------------------------------------------------------------*/
     141/* line 181, twentyfifteen.scss */
     142#buddypress .activity-list .activity-content {
     143  margin-top: -12px;
     144}
     145/* line 184, twentyfifteen.scss */
     146#buddypress .activity-list .activity-content .activity-header img.avatar {
     147  display: inline-block;
     148}
     149/* line 189, twentyfifteen.scss */
     150#buddypress .activity-list .load-more a {
     151  display: block;
     152}
     153
     154/*--------------------------------------------------------------
     1558.0 - Forms  - General
     156--------------------------------------------------------------*/
     157/* line 201, twentyfifteen.scss */
     158#buddypress .dir-search input[type="text"],
     159#buddypress .message-search input[type="text"] {
     160  padding: 0;
     161  width: auto;
     162}
     163
     164/*--------------------------------------------------------------
     1659.0 - Tables - General
     166--------------------------------------------------------------*/
     167/*__ User Account tables __*/
     168/* line 218, twentyfifteen.scss */
     169#buddypress .notifications th,
     170#buddypress .messages-notices th {
     171  width: 30%;
     172}
     173/* line 220, twentyfifteen.scss */
     174#buddypress .notifications th.bulk-select-all,
     175#buddypress .messages-notices th.bulk-select-all {
     176  text-align: center;
     177  width: 10%;
     178}
     179/* line 225, twentyfifteen.scss */
     180#buddypress .notifications .bulk-select-check,
     181#buddypress .messages-notices .bulk-select-check {
     182  text-align: center;
     183}
     184/* line 228, twentyfifteen.scss */
     185#buddypress .notifications .notification-actions a,
     186#buddypress .notifications .thread-options a,
     187#buddypress .messages-notices .notification-actions a,
     188#buddypress .messages-notices .thread-options a {
     189  display: inline-block;
     190  margin: 0;
     191  padding: 0;
     192}

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

     
     1// Stylesheet Guidence Notes
     2// Table of content represents a guide to sections of the sheet.
     3// Note that not all sections may be described in the body of the
     4// rulesets only those that require styles for a given theme.
     5// Sub sections might not exist but can be added as required
     6// as per BP Lists - 'activity' section.
     7
     8// We follow the dictats of the parent theme in respect of media queries,
     9// font sizing etc. Media queries are used in a modular sense (OOCSS)
     10// rather than described as blocks to the end of the sheet, this aids ease
     11// of managing media queries, scalability & flexibility .
     12
     13// Twentyfifteen Media Queries / breakpoints
     14// @media screen and (min-width: 38.75em)
     15// @media screen and (min-width: 46.25em)
     16// @media screen and (min-width: 55em)
     17// @media screen and (min-width: 59.6875em)
     18// @media screen and (min-width: 77.5em)
     19// @media screen and (min-width: 87.6875em)
     20
     21// A simple mixin to handle font-sizing to match 2015 62.5% approach
     22@mixin font-size($font-size: 16){
     23        $RemFontValue: ($font-size / 10);
     24        font-size: ($font-size * 1px);
     25        font-size: $RemFontValue + rem;
     26}
     27/*--------------------------------------------------------------
     28
     29This is the BuddyPress companion stylesheet for
     30the WordPress Twentyfifteen theme.
     31
     32This sheet supports the primary BuddyPress styles in buddypress.css
     33
     34The Rulesets shadow the BP default stylesheet sectioning
     35to maintain uniformity.
     36
     37----------------------------------------------------------------
     38>>> TABLE OF CONTENTS:
     39----------------------------------------------------------------
     401.0 Theme Structural Elements
     412.0 - Navigation - General
     42        2.1 - Navs - Object Nav / Sub Nav (item-list-tabs)
     43        2.2 - Pagination
     443.0 - Images
     454.0 - BP Lists / Loops Generic
     46        4.1 - Activity Loop
     47                4.1.1 - Activity Listing
     48                4.1.2 - Activity Comments
     49        4.2 - Members Loop
     50        4.3 - Groups Loop
     51        4.4 - Blogs Loop
     525.0 - Directories - Members, Groups, Blogs, Forums
     536.0 - Single Group Screens
     547.0 - Single User Account Screens
     55        7.1 - Notifications
     56        7.2 - Private Messaging Threads
     57        7.3 - Extended Profiles
     58        7.4 - Settings 
     598.0 - Forms  -  General
     609.0 - Tables -  General
     6110.0 - Error / Success Messages
     6211.0 - Ajax Loading
     6312.0 - Widgets
     64--------------------------------------------------------------*/
     65
     66/*--------------------------------------------------------------
     671.0 - Theme - structural elements
     68--------------------------------------------------------------*/
     69
     70// As BP screens have specific content lets adjust the themes primary elements to
     71// maximise the screen real estate for BP pages
     72
     73.buddypress {
     74                .site-content {
     75                        @media screen and (min-width: 77.5em) {
     76                        }
     77                }
     78         main {
     79                        article {
     80                                padding-top: 1rem;             
     81                                        @media screen and (min-width: 59.6875em) {
     82                                                margin: 0 0 0 1px;
     83                                        }
     84                                        @media screen and (min-width: 87.6875em) {
     85                                                margin: 0  6.3333%;
     86                                        }
     87                                        .entry-header, .entry-content {
     88                                                padding: 2rem;
     89                                        }
     90                        } // .article
     91                } // .main
     92} // .buddypress ( body class )
     93
     94/*--------------------------------------------------------------
     952.0 - Navigation - General
     96--------------------------------------------------------------*/
     97
     98// Remove 2015 border bottom on BP links/spans
     99.buddypress #buddypress {
     100        .item-list-tabs,
     101        .activity-header,
     102        .activity-inner,
     103        .activity-comments,
     104        .item-title,
     105        .load-more,
     106        .field-visibility-settings-toggle,
     107        #latest-update,
     108        table, {
     109                a { border-bottom: 0; }
     110        }       
     111        .pagination-links {
     112                a,
     113                span { border-bottom: 0; }
     114        }
     115} // close .buddypress #buddypress
     116
     117/*--------------------------------------------------------------
     1182.1 - Navs - Object Nav / Sub Nav (item-list-tabs)
     119--------------------------------------------------------------*/
     120
     121/*--------------------------------------------------------------
     1222.2 - Pagination
     123--------------------------------------------------------------*/
     124
     125#buddypress {
     126 div.pagination {
     127        box-shadow: none;
     128  .pagination-links {
     129                margin-right: 0;
     130    span,
     131    a {
     132                height: auto;
     133                line-height: 1;
     134                padding: 5px;
     135        }
     136    .prev,
     137    .next {
     138                background-color: transparent;
     139                color: inherit;
     140                overflow: visible;
     141                width: auto;
     142                                                &:before {display: none;}
     143        }
     144        .prev {
     145                position: static;
     146                left: auto;                             
     147        }
     148        .next {
     149                position: static;
     150                right: auto;
     151        }
     152                } // close .pagination-links
     153        } // close .pagination
     154} // close #buddypress
     155
     156/*--------------------------------------------------------------
     1574.0 - BP Lists / Loops Generic
     158--------------------------------------------------------------*/
     159
     160
     161/*--------------------------------------------------------------
     1624.1 - Activity
     163--------------------------------------------------------------*/
     164
     165/*--------------------------------------------------------------
     1664.1.2 - Activity Whats New
     167--------------------------------------------------------------*/
     168#buddypress {
     169        #whats-new-form {
     170                #whats-new-options {
     171
     172                }
     173        }
     174} // close #buddypress
     175
     176/*--------------------------------------------------------------
     1774.1.2 - Activity Listing
     178--------------------------------------------------------------*/
     179#buddypress {
     180        .activity-list {
     181                .activity-content {
     182                        margin-top: -12px;
     183                .activity-header  {
     184                                img.avatar {
     185                                        display: inline-block;
     186                                }
     187                        } // close .activity-header
     188                } // close .activity-content
     189                .load-more a {display: block;}
     190        } // close .activity-list
     191
     192} // close #buddypress
     193
     194/*--------------------------------------------------------------
     1958.0 - Forms  - General
     196--------------------------------------------------------------*/
     197        // 2015 applies 100% width to form element, remove this initially for BP search
     198        #buddypress {
     199                .dir-search,
     200                .message-search {
     201                        input[type="text"] {
     202                                padding: 0;
     203                                width: auto;
     204                        }
     205                }
     206        }
     207
     208/*--------------------------------------------------------------
     2099.0 - Tables - General
     210--------------------------------------------------------------*/
     211
     212/*__ User Account tables __*/
     213
     214#buddypress {
     215        // Manage some table cells widths that are disproportionate to their content
     216        .notifications,
     217        .messages-notices {
     218                th {
     219                        width: 30%;
     220                                &.bulk-select-all {
     221                                        text-align: center;
     222                                        width: 10%;
     223                                }
     224                }
     225                .bulk-select-check {text-align: center;}
     226                .notification-actions,
     227                .thread-options {
     228                        a {
     229                                display: inline-block;
     230                                margin: 0;
     231                                padding: 0;
     232                        }
     233                }
     234        } // .notifications, .message-notices
     235} // #buddypress
     236 No newline at end of file