Skip to:
Content

Ticket #6338: twentyfourteen-comp-style.01.patch

File twentyfourteen-comp-style.01.patch, 15.1 KB (added by hnla, 3 years ago)

Update twentyfourteen scss file to initial commit point

  • 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        $rem-font-value: ($font-size / 16);
     36        font-size: ($font-size * 1px);
     37        font-size: $rem-font-value + rem;
     38}
     39
     40// Border border-radius mixins
     41// To allow mixins to pass cscc-lint tests we will not provide vendor prefix
     42// until such time as exemption lists can be built for the scss-lint.yml
     43
     44@mixin border-radius($radius) {
     45//      -webkit-border-radius: $radius;
     46//      -moz-border-radius: $radius;
     47//      -ms-border-radius: $radius;
     48        border-radius: $radius;
     49        background-clip: padding-box;
     50}
     51
     52@mixin border-top-radius($radius) {
     53//      -webkit-border-top-right-radius: $radius;
     54        border-top-right-radius: $radius;
     55//      -webkit-border-top-left-radius: $radius;
     56        border-top-left-radius: $radius;
     57        background-clip: padding-box;
     58}
     59
     60@mixin border-right-radius($radius) {
     61//      -webkit-border-bottom-right-radius: $radius;
     62        border-bottom-right-radius: $radius;
     63//      -webkit-border-top-right-radius: $radius;
     64        border-top-right-radius: $radius;
     65        background-clip: padding-box;
     66}
     67
     68@mixin border-bottom-radius($radius) {
     69//      -webkit-border-bottom-right-radius: $radius;
     70        border-bottom-right-radius: $radius;
     71//      -webkit-border-bottom-left-radius: $radius;
     72        border-bottom-left-radius: $radius;
     73        background-clip: padding-box;
     74}
     75
     76@mixin border-left-radius($radius) {
     77//      -webkit-border-bottom-left-radius: $radius;
     78        border-bottom-left-radius: $radius;
     79//      -webkit-border-top-left-radius: $radius;
     80        border-top-left-radius: $radius;
     81        background-clip: padding-box;
     82}
     83
     84// Box sizing
     85
     86@mixin box-model($box-model) {
     87//      -webkit-box-sizing: $box-model;
     88//      -moz-box-sizing: $box-model;
     89        box-sizing: $box-model;
     90}
     91
     92// Variabals: color definitions
     93$content-background: #fff;
     94$light-background:   #f7f7f7;
     95$medium-background:  #999;
     96$dark-background:    #000;
     97$border-color:       #000; // border color can be varied using rgba
     98$border-med:         rgba(#000, 0.2);
     99$border-light:       rgba(#000, 0.1); // BP dividers
     100$body-text:          #2b2b2b; // 2015 body text color
     101$bp-button-hover:    #ededed; // this is the default BP button hover background
     102
     103// 2014 font family
     104@mixin default-font() {
     105        font-family: Lato, sans-serif;
     106}
     107
     108/*--------------------------------------------------------------
     109
     110This is the BuddyPress companion stylesheet for
     111the WordPress Twentyfourteen theme.
     112
     113This sheet supports the primary BuddyPress styles in buddypress.css
     114
     115The Rulesets shadow the BP default stylesheet sectioning
     116to maintain uniformity.
     117
     118--------------------------------------------------------------------------------
     119>>> TABLE OF CONTENTS:
     120--------------------------------------------------------------------------------
     1211.0 Theme Structural Elements
     1222.0 - Navigation - General
     123        2.1 - Navs - Object Nav / Sub Nav (item-list-tabs)
     124        2.2 - Pagination
     1253.0 - Images
     1264.0 - BP Lists / Loops Generic
     127        4.1 - Activity Loop
     128                4.1.1 - Activity Whats new
     129                4.1.2 - Activity Listing
     130                4.1.3 - Activity Comments
     131        4.2 - Members Loop
     132        4.3 - Groups Loop
     133        4.4 - Blogs Loop
     1345.0 - Directories - Members, Groups, Blogs, Forums
     1356.0 - Single Group Screens
     1367.0 - Single User Account Screens
     137        7.1 - Notifications
     138        7.2 - Private Messaging Threads
     139        7.3 - Extended Profiles
     140        7.4 - Settings
     1418.0 - Forms  -  General
     1429.0 - Tables -  General
     14310.0 - Error / Success Messages
     14411.0 - Ajax Loading
     14512.0 - Widgets
     146------------------------------------------------------------------------------*/
     147
     148/**
     149*-------------------------------------------------------------------------------
     150* @section - 1.0 - Theme - Structural Elements
     151*-------------------------------------------------------------------------------
     152*/
     153
     154// As BP screens have specific content lets adjust the themes primary elements
     155// to maximise the screen real estate for BP pages.
     156
     157.buddypress {
     158
     159        .site-content {
     160                padding-top: 4%;
     161
     162                @media screen and (min-width: 59.6875em) {
     163                        padding-top: 0;
     164                }
     165
     166                article {
     167                        margin: 0 4%;
     168                        padding-top: 0;
     169
     170                        .entry-header,
     171                        .entry-content {
     172                                max-width: 100%;
     173                                padding: 0 $spacing-val-md;
     174                        }
     175
     176                        #buddypress { margin-bottom: $spacing-val-lg; }
     177                        } // .article
     178                } // .content
     179} // .buddypress ( body class )
     180
     181/**
     182* ------------------------------------------------------------------------------
     183* @section 2.0 - Navigation - General
     184*-------------------------------------------------------------------------------
     185*/
     186
     187/**
     188* ------------------------------------------------------------------------------
     189* @section 2.1 - Navs - Object Nav / Sub Nav (item-list-tabs)
     190*-------------------------------------------------------------------------------
     191*/
     192
     193.directory #buddypress {
     194        .item-list-tabs {
     195
     196                ul:before,
     197                ul:after {
     198                        content: " ";
     199                        display: table;
     200                }
     201
     202                ul:after {
     203                        clear: both;
     204                }
     205
     206                ul {border-bottom: 1px solid $border-med;}
     207
     208                @media screen and (min-width: 783px) {
     209                        ul {
     210
     211                                li.selected {
     212                                        border: 1px solid $border-med;
     213                                        border-bottom-color: $content-background;
     214                                        @include border-top-radius(4px);
     215                                        margin-bottom: -1px;
     216
     217                                        a {
     218                                                background: none;
     219                                                outline: none;
     220                                        }
     221                                }
     222                        }
     223                } // close @media
     224        } // close .item-list-tabs
     225
     226        #subnav {
     227                ul {
     228                        border-bottom: 0;
     229                }
     230        } // close #subnav
     231} // close .directory #buddypress
     232
     233        /*__ Vertical Menu User Account Screens __*/
     234
     235// This block contains the rules to re-factor the item-body structural element
     236// to sit alongside the vert menu
     237
     238@media screen and (min-width: 783px) {
     239        .bp-user #buddypress {
     240                background: #eee;
     241
     242                #item-header,
     243                #item-body {
     244                        background: #fff;
     245                }
     246
     247                #item-body {border-left: 1px solid #ddd;}
     248
     249                #object-nav {
     250                        background: #eee;
     251                        border-right: 1px solid #ddd;
     252                        float: left;
     253                        margin-right: -1px;
     254                        width: 200px;
     255
     256                        ul {
     257                                border-bottom: 0;
     258                                padding: 0;
     259
     260                                li {
     261                                        float: none;
     262                                        overflow: hidden;
     263
     264                                        span {
     265                                                border-radius: 10%;
     266                                                float: right;
     267                                                margin-right: 15px;
     268                                        }
     269                                }
     270                        }
     271                }
     272
     273                #item-body {
     274                        overflow: hidden;
     275                        padding: 0 $spacing-val-md;
     276                        width: auto;
     277
     278                        #subnav {
     279                                border: 1px solid #ddd;
     280                                border-left: 0;
     281                                border-right: 0;
     282                                margin: 0 (-$spacing-val-md) $spacing-val-lg;
     283                        }
     284                }
     285        } // close .bp-user #buddypress
     286} // close @media
     287
     288/**
     289*-------------------------------------------------------------------------------
     290* @section 2.2 - Pagination
     291*-------------------------------------------------------------------------------
     292*/
     293
     294/**
     295*-------------------------------------------------------------------------------
     296* @section 4.0 - BP Lists / Loops Generic
     297*-------------------------------------------------------------------------------
     298*/
     299#buddypress {
     300        .item-list {
     301                .item-title {
     302
     303                        a {
     304                                display: block;
     305                                @include font-size(22);
     306                                text-decoration: none;
     307                        }
     308
     309                        span.update,
     310                        span a {
     311                                @include font-size(12);
     312                        }
     313                }
     314        }
     315}
     316
     317// Trying to position the action div absolute has bad consequences where
     318// aditional items are displayed, floating is an alternative that
     319// allows natural flow expansion.
     320// This block:
     321// * Manages li items, Stacks them small screen, floated left at wider screens.
     322// * Adjusts display of action buttons at small screen
     323
     324#buddypress {
     325        ul.item-list {
     326                li {
     327                        overflow: hidden !important; // buddypress styles over specified
     328
     329                        .item-avatar {
     330                                float: none;
     331                                margin-bottom: $spacing-val-md;
     332                                text-align: center;
     333
     334                                a {
     335                                        img.avatar {
     336                                                float: none;
     337                                        }
     338                                }
     339                        }
     340
     341                        div.item-title {
     342                                float: none;
     343                                width: 100%;
     344                        }
     345
     346                        // groups group description
     347                        div.item-desc {
     348                                margin-left: 0;
     349                                width: auto;
     350                        }
     351
     352                        div.action {
     353                                position: relative;
     354                                text-align: left;
     355                                top: 0;
     356
     357                                div {
     358                                        margin: 0 0 $spacing-val-sm;
     359                                }
     360
     361                        } // close .action
     362
     363                        // item-list buttons blocked/full width for mobile/small screens
     364
     365                        .activity-meta,
     366                        .action {
     367                                float: none;
     368
     369                                a,
     370                                div {
     371                                        display: block;
     372                                        margin: $spacing-val-xs 0;
     373                                }
     374                        }
     375
     376                        @media screen and (min-width: 594px) {
     377                                .item-avatar {
     378                                        float: left;
     379                                        margin-bottom: 0;
     380                                }
     381
     382                                .item {
     383                                        float: right;
     384                                        width: 80%;
     385                                }
     386
     387                                .activity-meta,
     388                                .action {
     389                                        clear: both;
     390
     391                                        a,
     392                                        div {
     393                                                display: inline-block;
     394                                                margin: spacing-val-xs $spacing-val-xs 0 0;
     395                                        }
     396                                }
     397                        } // close @media
     398
     399                        @media screen and (min-width: 783px) {
     400                                .item {
     401                                        float: left;
     402                                        margin-left: 5%;
     403                                        width: 60%;
     404
     405                                        div.item-desc {
     406                                                margin: 0;
     407                                                width: auto;
     408                                        }
     409                                }
     410
     411                                .action {
     412                                        clear: none;
     413                                        float: right;
     414                                        width: 25%;
     415
     416                                        div {
     417                                                display: block;
     418
     419                                                a {
     420                                                        @include box-model(border-box);
     421                                                        display: block;
     422                                                        width: 100%;
     423                                                }
     424                                        }
     425
     426                                        .meta {
     427                                                text-align: center;
     428                                        }
     429                                }
     430                        } // close @media
     431                        .meta,
     432                        .item-meta .activity {
     433                                font-style: italic;
     434                        }
     435                } // close li
     436        } // ul.item-list
     437} // close #budypress
     438
     439/**
     440*-------------------------------------------------------------------------------
     441* @section 4.0 - BP Lists / Loops Generic
     442*-------------------------------------------------------------------------------
     443*/
     444
     445/**
     446*-------------------------------------------------------------------------------
     447* @section 4.1 - Activity
     448*-------------------------------------------------------------------------------
     449*/
     450
     451/**
     452*-------------------------------------------------------------------------------
     453* @section 4.1.1 - Activity What's New
     454*-------------------------------------------------------------------------------
     455*/
     456#buddypress {
     457        #whats-new-form {
     458                margin: $spacing-val-lg 0;
     459
     460                textarea#whats-new {
     461                        width: 100%;
     462                }
     463        }
     464}
     465
     466/**
     467*-------------------------------------------------------------------------------
     468* @section 4.1.2 - Activity Listing
     469*-------------------------------------------------------------------------------
     470*/
     471
     472/**
     473*-------------------------------------------------------------------------------
     474* @section 4.1.3 - Activity Comments
     475*-------------------------------------------------------------------------------
     476*/
     477
     478#buddypress {
     479        .activity {
     480                .activity-comments {
     481                        border-left: 1px solid $border-light;
     482                        margin-top: 5px;
     483
     484                        ul {
     485                                background: rgba($light-background, 0.6);
     486                                margin: 30px 0 0 2px;
     487                        }
     488
     489                        .ac-form {
     490
     491                                input[type="submit"],
     492                                .ac-reply-cancel {
     493                                        color: rgba($body-text, 0.8);
     494                                        display: inline-block;
     495                                        font-family: inherit;
     496                                        @include font-size(12);
     497                                        font-weight: normal;
     498                                        line-height: 1.2;
     499                                        padding: 4px 10px;
     500                                        text-transform: lowercase;
     501                                        width: 100px;
     502                                }
     503
     504                                .ac-reply-cancel {
     505                                        border: 1px solid $border-med;
     506                                        text-align: center;
     507
     508                                        &:focus,
     509                                        &:hover {
     510                                                background: $bp-button-hover;
     511                                        }
     512                                }
     513
     514                        } // close .ac-form
     515
     516                } // close .activity-comments
     517        } // close .activity
     518
     519} // close #buddypress
     520
     521
     522/**
     523*-------------------------------------------------------------------------------
     524* @section 4.2 - Members Loop
     525*-------------------------------------------------------------------------------
     526*/
     527
     528#buddypress {
     529        .members {
     530                .item-list {
     531                        .my-entry {
     532                                .item {
     533                                        background: $light-background;
     534                                        @include box-model(border-box);
     535                                        padding: 0 0.5em;
     536                                        @media screen and (min-width: 783px) {
     537
     538                                                float: right;
     539                                                margin-left: 0;
     540                                                padding: 0 0.5em;
     541                                                width: 88%;
     542                                        }
     543                                }
     544                        }
     545                }
     546        }
     547}
     548/*------------------------------------------------------------------------------
     549* @section - 8.0 - Forms  - General
     550*-------------------------------------------------------------------------------
     551*/
     552
     553// Match BP form elements to Themes(2014) styling where styles
     554// are not inherited or being overriden.
     555#buddypress {
     556
     557        div.activity-comments {
     558                form {
     559                        .ac-textarea {
     560                                background: $light-background;
     561                                border: 1px solid $border-med;
     562
     563                                textarea {
     564                                        background: none;
     565                                        border: 0;
     566                                }
     567                        }
     568                }
     569        }
     570
     571        select {border: 1px solid rgba($border-color, 0.5);}
     572
     573} // close #buddypress
     574
     575#buddypress {
     576        div.dir-search,
     577        div.message-search {
     578                float: none;
     579                margin: $spacing-val-sm 0;
     580
     581// Stylise the seach form elements, in part this deals with padding
     582// issues on the submit & sizing issues between bp styles & twentyfourteen
     583                form {
     584                        border: 1px solid #ccc;
     585                        overflow: hidden;
     586
     587                        label {
     588                                float: left;
     589                                width: 80%;
     590                        }
     591
     592                        input[type='text'] {
     593                                float: left;
     594                                margin: 0;
     595                                width: 100%;
     596                        }
     597
     598                        input[type='text'],
     599                        input[type='submit'] {
     600                                border: 0;
     601                                @include font-size(14);
     602                                line-height: inherit;
     603                        }
     604
     605                        input[type='text'] {
     606                                border-right: 1px solid #ccc;
     607                                padding: 0.2em 0 0.2em 0.2em;
     608                        }
     609
     610                        input[type='submit'] {
     611                                float: right;
     612                                font-weight: normal;
     613                                padding: 0.2em 1em;
     614                                text-align: center;
     615                                text-transform: none;
     616                                width: 20%;
     617                        }
     618
     619                        }// close form
     620
     621        } // close .dir-search, .message-search
     622
     623        // Shift the search parent to the right and allow to shrinkwrap
     624        @media screen and (min-width: 401px) {
     625                div.dir-search,
     626                div.message-search {
     627                        float: right;
     628                        margin: 0;
     629
     630                        form {
     631                                label,
     632                                input[type='submit'],
     633                                input[type='text'] {
     634                                        width: auto;
     635                                }
     636                        }
     637                }
     638
     639                div.message-search { margin-top: 2px;}
     640        } // close @media
     641} // close #buddypress
     642
     643/**
     644*-------------------------------------------------------------------------------
     645* @section 9.0 - Tables General
     646*-------------------------------------------------------------------------------
     647*/
     648
     649/*__ User Account tables __*/
     650