Skip to:
Content

BuddyPress.org

Ticket #6338: twentyfourteen-comp-style.patch

File twentyfourteen-comp-style.patch, 15.6 KB (added by hnla, 9 years ago)

Initial style files

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

     
     1/*--------------------------------------------------------------
     2
     3This is the BuddyPress companion stylesheet for
     4the WordPress Twentyfourteen 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.buddypress .site-content {
     43  padding-top: 4%;
     44}
     45@media screen and (min-width: 59.6875em) {
     46  .buddypress .site-content {
     47    padding-top: 0;
     48  }
     49}
     50.buddypress .site-content article {
     51  margin: 0 4%;
     52  padding-top: 0;
     53}
     54.buddypress .site-content article .entry-header,
     55.buddypress .site-content article .entry-content {
     56  max-width: 100%;
     57  padding: 0 20px;
     58}
     59.buddypress .site-content article #buddypress {
     60  margin-bottom: 40px;
     61}
     62
     63/*--------------------------------------------------------------
     642.0 - Navigation - General
     65--------------------------------------------------------------*/
     66/*--------------------------------------------------------------
     672.1 - Navs - Object Nav / Sub Nav (item-list-tabs)
     68--------------------------------------------------------------*/
     69/*__ Vertical menu User account screens __*/
     70@media screen and (min-width: 783px) {
     71  .bp-user #buddypress {
     72    background: #eee;
     73  }
     74  .bp-user #buddypress #item-header, .bp-user #buddypress #item-body {
     75    background: #fff;
     76  }
     77  .bp-user #buddypress #item-body {
     78    border-left: 1px solid #ddd;
     79  }
     80  .bp-user #buddypress #object-nav {
     81    background: #eee;
     82    border-right: 1px solid #ddd;
     83    float: left;
     84    margin-right: -1px;
     85    width: 200px;
     86  }
     87  .bp-user #buddypress #object-nav ul {
     88    border-bottom: none;
     89    padding: 0;
     90  }
     91  .bp-user #buddypress #object-nav ul li {
     92    float: none;
     93    overflow: hidden;
     94  }
     95  .bp-user #buddypress #object-nav ul li span {
     96    border-radius: 10%;
     97    float: right;
     98    margin-right: 15px;
     99  }
     100  .bp-user #buddypress #item-body {
     101    overflow: hidden;
     102    padding: 0 20px;
     103    width: auto;
     104  }
     105  .bp-user #buddypress #item-body #subnav {
     106    border: 1px solid #ddd;
     107    border-left: none;
     108    border-right: none;
     109    margin: 0 -20px 40px;
     110  }
     111}
     112/*--------------------------------------------------------------
     1132.2 - Pagination
     114--------------------------------------------------------------*/
     115/*--------------------------------------------------------------
     1164.0 - BP Lists / Loops Generic
     117--------------------------------------------------------------*/
     118#buddypress .dir-list ul.item-list li {
     119  overflow: hidden !important;
     120}
     121#buddypress .dir-list ul.item-list li .action {
     122  position: relative;
     123  top: 0;
     124}
     125#buddypress .dir-list ul.item-list li .action div {
     126  margin: 8px 0;
     127}
     128@media screen and (min-width: 401px) {
     129  #buddypress .dir-list ul.item-list li .item {
     130    float: left;
     131  }
     132  #buddypress .dir-list ul.item-list li .item .item-desc {
     133    margin-left: 20%;
     134    width: auto;
     135  }
     136  #buddypress .dir-list ul.item-list li .action {
     137    float: right;
     138  }
     139  #buddypress .dir-list ul.item-list li .action div {
     140    margin: 8px 0;
     141  }
     142}
     143
     144/*--------------------------------------------------------------
     1454.1 - Activity
     146--------------------------------------------------------------*/
     147/*--------------------------------------------------------------
     1484.1.2 - Activity Whats New
     149--------------------------------------------------------------*/
     150/*--------------------------------------------------------------
     1514.1.2 - Activity Listing
     152--------------------------------------------------------------*/
     153/*--------------------------------------------------------------
     1548.0 - Forms  - General
     155--------------------------------------------------------------*/
     156#buddypress div.dir-search,
     157#buddypress div.message-search {
     158  float: none;
     159  margin: 10px 0;
     160}
     161#buddypress div.dir-search form,
     162#buddypress div.message-search form {
     163  border: 1px solid #ccc;
     164  overflow: hidden;
     165}
     166#buddypress div.dir-search form label,
     167#buddypress div.message-search form label {
     168  float: left;
     169  width: 80%;
     170}
     171#buddypress div.dir-search form input[type='text'],
     172#buddypress div.message-search form input[type='text'] {
     173  float: left;
     174  width: 100%;
     175  margin: 0;
     176}
     177#buddypress div.dir-search form input[type='text'],
     178#buddypress div.dir-search form input[type='submit'],
     179#buddypress div.message-search form input[type='text'],
     180#buddypress div.message-search form input[type='submit'] {
     181  border: none;
     182  font-size: 14px;
     183  font-size: 0.875rem;
     184  line-height: inherit;
     185}
     186#buddypress div.dir-search form input[type='text'],
     187#buddypress div.message-search form input[type='text'] {
     188  border-right: 1px solid #ccc;
     189  padding: .2em 0 .2em .2em;
     190}
     191#buddypress div.dir-search form input[type='submit'],
     192#buddypress div.message-search form input[type='submit'] {
     193  font-weight: normal;
     194  float: right;
     195  padding: .2em 1em;
     196  text-align: center;
     197  text-transform: none;
     198  width: 20%;
     199}
     200@media screen and (min-width: 401px) {
     201  #buddypress div.dir-search,
     202  #buddypress div.message-search {
     203    float: right;
     204    margin: 0;
     205  }
     206  #buddypress div.dir-search form label,
     207  #buddypress div.dir-search form input[type='submit'],
     208  #buddypress div.dir-search form input[type='text'],
     209  #buddypress div.message-search form label,
     210  #buddypress div.message-search form input[type='submit'],
     211  #buddypress div.message-search form input[type='text'] {
     212    width: auto;
     213  }
     214  #buddypress div.message-search {
     215    margin-top: 2px;
     216  }
     217}
     218
     219/*--------------------------------------------------------------
     2209.0 - Tables - General
     221--------------------------------------------------------------*/
     222/*__ User Account tables __*/
     223
     224/*# sourceMappingURL=twentyfourteen.css.map */
  • src/bp-templates/bp-legacy/css/twentyfourteen.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// Twentyfourteen Media Queries / Breakpoints
     14//@media screen and (max-width: 400px)
     15//@media screen and (min-width: 401px)
     16//@media screen and (min-width: 594px)
     17//@media screen and (min-width: 673px)
     18//@media screen and (min-width: 783px)
     19//@media screen and (min-width: 810px)
     20//@media screen and (min-width: 846px)
     21//@media screen and (min-width: 1008px)
     22//@media screen and (min-width: 1040px)
     23//@media screen and (min-width: 1110px)
     24
     25// Mixins and Variabals
     26
     27// Common margin values
     28$spacing-val-lg: 40px;
     29$spacing-val-md: 20px;
     30$spacing-val-sm: 10px;
     31$spacing-val-xs: 5px;
     32
     33// A simple mixin to handle font-sizing to match 2014 body 100% approach
     34@mixin font-size($font-size: 16){
     35        $RemFontValue: ($font-size / 16);
     36        font-size: ($font-size * 1px);
     37        font-size: $RemFontValue + rem;
     38}
     39/*--------------------------------------------------------------
     40
     41This is the BuddyPress companion stylesheet for
     42the WordPress Twentyfourteen theme.
     43
     44This sheet supports the primary BuddyPress styles in buddypress.css
     45
     46The Rulesets shadow the BP default stylesheet sectioning
     47to maintain uniformity.
     48
     49----------------------------------------------------------------
     50>>> TABLE OF CONTENTS:
     51----------------------------------------------------------------
     521.0 Theme Structural Elements
     532.0 - Navigation - General
     54        2.1 - Navs - Object Nav / Sub Nav (item-list-tabs)
     55        2.2 - Pagination
     563.0 - Images
     574.0 - BP Lists / Loops Generic
     58        4.1 - Activity Loop
     59                4.1.1 - Activity Listing
     60                4.1.2 - Activity Comments
     61        4.2 - Members Loop
     62        4.3 - Groups Loop
     63        4.4 - Blogs Loop
     645.0 - Directories - Members, Groups, Blogs, Forums
     656.0 - Single Group Screens
     667.0 - Single User Account Screens
     67        7.1 - Notifications
     68        7.2 - Private Messaging Threads
     69        7.3 - Extended Profiles
     70        7.4 - Settings 
     718.0 - Forms  -  General
     729.0 - Tables -  General
     7310.0 - Error / Success Messages
     7411.0 - Ajax Loading
     7512.0 - Widgets
     76--------------------------------------------------------------*/
     77
     78/*--------------------------------------------------------------
     791.0 - Theme - Structural Elements
     80--------------------------------------------------------------*/
     81
     82// As BP screens have specific content lets adjust the themes primary elements
     83// to maximise the screen real estate for BP pages.
     84
     85.buddypress {
     86                .site-content {
     87                        @media screen and ( min-width: 77.5em ) {
     88                        }
     89                }
     90         .site-content {       
     91                        padding-top: 4%;
     92                        @media screen and ( min-width: 59.6875em ) {
     93                                padding-top: 0;
     94                        }
     95                        article {
     96                                margin: 0 4%;
     97                                padding-top: 0;         
     98                                        .entry-header,
     99                                        .entry-content {
     100                                                max-width: 100%;
     101                                                padding: 0 $spacing-val-md;
     102                                        }
     103                                        #buddypress { margin-bottom: $spacing-val-lg; }
     104                        } // .article
     105                } // .content
     106
     107} // .buddypress ( body class )
     108/*--------------------------------------------------------------
     1092.0 - Navigation - General
     110--------------------------------------------------------------*/
     111
     112/*--------------------------------------------------------------
     1132.1 - Navs - Object Nav / Sub Nav (item-list-tabs)
     114--------------------------------------------------------------*/
     115        /*__ Vertical menu User account screens __*/
     116
     117// This block contains the rules to re-factor the item-body structural element
     118// to sit alongside the vert menu
     119// Structural layout and faux column styling of backgrounds is more suited
     120// to the earlier section. todo: re-position sort out when known what styles
     121// are being used.
     122
     123@media screen and (min-width: 783px) {
     124 .bp-user #buddypress {
     125                 background: #eee;
     126                        #item-header, #item-body {background: #fff;}
     127                        #item-body {border-left: 1px solid #ddd;}                       
     128                #object-nav {
     129                                background: #eee;
     130                                border-right: 1px solid #ddd;
     131                        float: left;
     132                                margin-right: -1px;                     
     133                        width: 200px;
     134                        ul {
     135                                        border-bottom: none;
     136                                padding: 0;
     137                                        li {
     138                                                float: none;
     139                                                overflow: hidden;
     140                                                        span {
     141                                                                        border-radius: 10%;
     142                                                                        float: right;
     143                                                                        margin-right: 15px;
     144                                                                }
     145                                        }
     146                        }
     147                }
     148                #item-body {
     149                        overflow: hidden;
     150                        padding: 0 $spacing-val-md;
     151                        width: auto;
     152                                #subnav {
     153                                                border: 1px solid #ddd;
     154                                                border-left: none;
     155                                                border-right: none;
     156                                        margin: 0 (-$spacing-val-md) $spacing-val-lg;
     157                                }
     158                }
     159       
     160 } // close .bp-user #buddypress
     161} // close @media
     162/*--------------------------------------------------------------
     1632.2 - Pagination
     164--------------------------------------------------------------*/
     165
     166/*--------------------------------------------------------------
     1674.0 - BP Lists / Loops Generic
     168--------------------------------------------------------------*/
     169
     170// Trying to position the action div absolute has bad consequences where
     171// aditional items are displayed, floating an alternative but may need
     172// to reconsider this approach.
     173
     174#buddypress {   
     175        .dir-list {
     176                ul.item-list {
     177                        li {
     178                                overflow: hidden !important; // upsets me but buddypress styles over specified
     179
     180                .action {
     181                        position: relative;
     182                        top: 0;
     183                                div {
     184                                        margin: 8px 0;
     185                                }
     186                } // close .action
     187
     188                @media screen and (min-width: 401px) {
     189                                        .item {
     190                                                float: left;
     191                                                        .item-desc {
     192                                                                margin-left: 20%;
     193                                                                width: auto;
     194                                                        }
     195                                        }
     196                        .action {
     197                                float: right;
     198                        //                      margin-top: -50px;
     199                                div {margin: 8px 0;}
     200                        }
     201                } // close @media
     202
     203                        } // close li
     204                } // ul.item-list
     205        } // close .dir-list
     206
     207} // close #budypress
     208
     209/*--------------------------------------------------------------
     2104.1 - Activity
     211--------------------------------------------------------------*/
     212
     213/*--------------------------------------------------------------
     2144.1.2 - Activity Whats New
     215--------------------------------------------------------------*/
     216
     217/*--------------------------------------------------------------
     2184.1.2 - Activity Listing
     219--------------------------------------------------------------*/
     220
     221/*--------------------------------------------------------------
     2228.0 - Forms  - General
     223--------------------------------------------------------------*/
     224#buddypress {
     225        div.dir-search,
     226        div.message-search {
     227                float: none;
     228                margin: $spacing-val-sm 0;
     229
     230                // Stylise the seach form elements, in part this deals with padding
     231                // issues on the submit & sizing issues between bp styles & twentyfifteen
     232                form { // *sigh* only to bludgeon over specified rules
     233                border: 1px solid #ccc;   
     234                overflow: hidden;
     235                        label {
     236                                                float: left;
     237                                                width: 80%;
     238                                        }
     239                                input[type='text'] {
     240                                                float: left;
     241                                                width: 100%;
     242                                                margin: 0;
     243                                        }
     244                        input[type='text'],
     245                        input[type='submit'] {
     246                                        border: none;
     247                                                @include font-size(14);
     248                                                line-height: inherit;
     249                                }
     250                        input[type='text'] {
     251                                border-right: 1px solid #ccc;
     252                                padding: .2em 0 .2em .2em;                                     
     253                        }
     254                        input[type='submit'] {
     255                                        font-weight: normal;
     256                                float: right;
     257                                                padding: .2em 1em;
     258                                                text-align: center;
     259                                        text-transform: none;
     260                                                width: 20%;
     261                 }
     262                }// close form
     263
     264        } // close .dir-search, .message-search
     265
     266        // Shift the search parent to the right and allow to shrinkwrap
     267        @media screen and (min-width: 401px) {
     268        div.dir-search,
     269        div.message-search {
     270                        float: right;
     271                margin: 0 ;
     272                                form {
     273        label,
     274                                        input[type='submit'],
     275                                        input[type='text'] {
     276                                                width: auto;
     277        }
     278                                }
     279        }
     280                div.message-search { margin-top: 2px;}
     281        } // close @media
     282
     283} // close #buddypress
     284
     285/*--------------------------------------------------------------
     2869.0 - Tables - General
     287--------------------------------------------------------------*/
     288
     289/*__ User Account tables __*/
     290 No newline at end of file