Skip to:
Content

BuddyPress.org

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

File twentyfifteen-comp-style.14.patch, 10.1 KB (added by hnla, 9 years ago)

Update .13 patch to remove Avatar sub nav tabbed styles -moved to avatar.css

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

     
    1111// of managing media queries, scalability & flexibility .
    1212
    1313// Twentyfifteen Media Queries / Breakpoints
    14 // @media screen and (min-width: 22em) // Additional for xtra small mobile
     14// @media screen and (max-width: 22em) // Additional for xtra small mobile only
     15// @media screen and (max-width: 30em) // Additional small only
    1516// @media screen and (min-width: 38.75em)
    1617// @media screen and (min-width: 46.25em)
    1718// @media screen and (min-width: 55em)
    … …  
    3334        font-size: ($font-size * 1px);
    3435        font-size: $rem-font-value + rem;
    3536}
     37
     38// Border border-radius mixins
     39// To allow mixins to pass cscc-lint tests we will not provide vendor prefix
     40// until such time as exemption lists can be built for the scss-lint.yml
     41
     42@mixin border-radius($radius) {
     43//      -webkit-border-radius: $radius;
     44//      -moz-border-radius: $radius;
     45//      -ms-border-radius: $radius;
     46        border-radius: $radius;
     47        background-clip: padding-box;
     48}
     49
     50@mixin border-top-radius($radius) {
     51//      -webkit-border-top-right-radius: $radius;
     52        border-top-right-radius: $radius;
     53//      -webkit-border-top-left-radius: $radius;
     54        border-top-left-radius: $radius;
     55        background-clip: padding-box;
     56}
     57
     58@mixin border-right-radius($radius) {
     59//      -webkit-border-bottom-right-radius: $radius;
     60        border-bottom-right-radius: $radius;
     61//      -webkit-border-top-right-radius: $radius;
     62        border-top-right-radius: $radius;
     63        background-clip: padding-box;
     64}
     65
     66@mixin border-bottom-radius($radius) {
     67//      -webkit-border-bottom-right-radius: $radius;
     68        border-bottom-right-radius: $radius;
     69//      -webkit-border-bottom-left-radius: $radius;
     70        border-bottom-left-radius: $radius;
     71        background-clip: padding-box;
     72}
     73
     74@mixin border-left-radius($radius) {
     75//      -webkit-border-bottom-left-radius: $radius;
     76        border-bottom-left-radius: $radius;
     77//      -webkit-border-top-left-radius: $radius;
     78        border-top-left-radius: $radius;
     79        background-clip: padding-box;
     80}
     81
     82// Box sizing
     83
     84@mixin box-model($box-model) {
     85//      -webkit-box-sizing: $box-model;
     86//      -moz-box-sizing: $box-model;
     87        box-sizing: $box-model;
     88}
     89
    3690// Variabals: color definitions
    3791$content-background: #fff;
    3892$light-background:   #f7f7f7;
    … …  
    76130        4.4 - Blogs Loop
    771315.0 - Directories - Members, Groups, Blogs, Forums
    781326.0 - Single Group Screens
     133 6.1 - Item-header
     134 6.2 - Management settings screens
     135 6.3 - Group members list
    791367.0 - Single User Account Screens
    80         7.1 - Notifications
    81         7.2 - Private Messaging Threads
    82         7.3 - Extended Profiles
    83         7.4 - Settings
     137        7.1 - Item Header
     138        7.2 - Extended Profiles
     139        7.3 - Groups
     140        7.4 - friends
     141        7.5 - Private Messaging Threads
     142        7.6 - Settings
    841438.0 - Forms  -  General
    851449.0 - Tables -  General
    8614510.0 - Error / Success Messages
    … …  
    307366// are being used.
    308367
    309368@media screen and (min-width: 55em) {
    310         .bp-user #buddypress {
     369        /*.bp-user*/ #buddypress {
    311370                background: $light-background;
    312371
    313372                #item-header,
    … …  
    484543                                        }
    485544                                        // Provisionally lets keep the 'action' div
    486545                                        //position but inline-block the buttons
     546
    487547                                        @media screen and (min-width: 38.75em) {
    488548                                                // keep buttons to a row small tablet up
    489549                                                margin: 0 $spacing-val-sm $spacing-val-sm 0;
    490550                                                width: auto;
    491551                                        } // close @media
     552
    492553                                        @media screen and (min-width: 59.6875em) {
    493554                                                // take buttons to block to stack them when floated right
    494555                                                clear: right;
    … …  
    683744                                }
    684745                        }
    685746                }
    686 /*
    687                 li {
    688                         .item {
    689                                 .update {
    690                                         border-left: 1px solid rgba($border-color, .4);
     747
     748        } // close #members-list
     749} //close #BuddyPress
     750
     751/**
     752*-------------------------------------------------------------------------------
     753* @section 6.0 - Single Group Screens
     754*-------------------------------------------------------------------------------
     755*/
     756
     757
     758        /**
     759        *------------------------------------------------------
     760        * @subsection 6.1 - item-header
     761        *------------------------------------------------------
     762        */
     763
     764.groups {
     765        #buddypress {
     766
     767                // Move visual flow of avatar & item-actions at narrow width,
     768                // avatar first after group title
     769                @media screen and (max-width: 38.75em) {
     770                        div#item-header {
     771                                display: flex;
     772                                flex-direction: column;
     773
     774                                #item-header-avatar {
     775                                        order: 1;
     776                                        text-align: center;
     777
     778                                        a {
     779                                                border-bottom: 0;
     780
     781                                                img {
     782                                                        display: inline-block;
     783                                                        float: none;
     784                                                }
     785                                        }
     786                                }
     787
     788                                #item-header-content {order: 2;}
     789
     790                                #item-actions {order: 3;}
     791                        }
     792                } // close @media
     793
     794                div#item-header {
     795                        padding-bottom: $spacing-val-lg;
     796
     797                        div#item-actions {
     798                                margin: 0;
     799                                width: 100%;
     800
     801                                @media screen and (min-width: 38.75em) {
     802                                        clear: none;
     803                                        float: right;
     804                                        width: 50%;
     805                                }
     806
     807                                h3 {
     808                                        background: $dark-background;
     809                                        color: $content-background;
     810                                        @include font-size(14);
     811
     812                                        @media screen and (min-width: 46.25em) {
     813                                                @include font-size(16);
     814                                        }
     815                                        padding: 0.2em;
     816                                }
     817                        } // close item-actions
     818
     819                        @media screen and (min-width: 46.25em) {
     820
     821                                #item-header-avatar,
     822                                #item-header-content {
     823                                        float: left;
     824                                }
     825
     826                                #item-header-avatar {
     827                                        width: 21%;
     828                                }
     829
     830                                #item-header-content {
     831                                        margin-left: 4%;
     832                                        width: 40%;
     833                                }
     834
     835                                div#item-actions {
     836                                        float: right;
     837                                        width: 28%;
     838                                }
     839
     840                        } // close @media
     841
     842                } // close #item-header
     843        } // close #buddypress
     844} // close .groups
     845
     846/**
     847*-------------------------------------------------------
     848* @subsection 6.2 - Management settings screens
     849*-------------------------------------------------------
     850*/
     851
     852// headings settings screens & general global settings styles
     853.groups {
     854        #group-settings-form {
     855                h4 {
     856                        background: $dark-background;
     857                        color: $content-background;
     858                        padding: 0.2em;
     859                }
     860        }
     861}
     862
     863.groups.edit-details {
     864        #group-settings-form {
     865
     866                label {
     867                        background: $dark-background;
     868                        @include border-top-radius(4px);
     869                        color: $content-background;
     870                        display: inline-block;
     871                        margin-bottom: 0;
     872                        padding: 0.2em;
     873                        width: 80%;
     874
     875                        @media screen and (min-width: 38.75em) {
     876                                width: 60%;
     877                        }
     878
     879                }
     880
     881                textarea + p label {
     882                        background: none;
     883                        color: inherit;
     884                        @include font-size(14);
     885                        width: auto;
     886                }
     887
     888        }
     889} // close .groups.edit-details
     890
     891.groups.group-settings {
     892        #group-settings-form {
     893
     894                div.radio label {
     895                        border: 1px solid $border-light;
     896                        padding: 0.2em;
     897
     898                        ul {
     899                                color: rgba($body-text, 0.6);
     900                                @include font-size(14);
     901                        }
     902                }
     903
     904        }
     905} // close .groups.group-settings
     906
     907.groups.group-avatar {
     908
     909        form > p {
     910                margin-top: $spacing-val-md;
     911        }
     912
     913}
     914
     915.groups.manage-members {
     916        #group-settings-form {
     917                .item-list {
     918                        li {
     919                                border-bottom: 1px solid $border-light;
     920
     921                                img,
     922                                h5 {
     923                                        float: left;
     924
     925                                        > a {border-bottom: 0;}
     926                                }
     927
     928                                span.small {
     929                                        clear: left;
    691930                                        display: block;
    692                                         margin: .5em 0;
    693                                         padding-left: .3em;
     931                                        float: none;
     932                                        margin-top: $spacing-val-sm;
     933
     934                                        a {
     935                                                display: inline-block;
     936                                                margin: $spacing-val-xs 0;
     937                                                width: 100%;
     938
     939                                                @media screen and (min-width: 38.75em) {
     940                                                        width: auto;
     941                                                }
     942                                        }
    694943                                }
     944
     945                                h5 {
     946                                        margin: 0;
     947                                }
     948
    695949                        }
    696950                }
     951        }
     952} // close .groups.manage-members
     953
     954/**
     955*------------------------------------------------------
     956* @subsection 6.3 - Group Members list
     957*------------------------------------------------------
    697958*/
    698         } // close #members-list
    699 } //close #BuddyPress
    700959
     960// Massage the members search for groups nav specifically
     961.groups.group-members {
     962        #subnav {
     963                li {
     964                        @media screen and (max-width: 38.75em) {
     965                                background: #fff;
     966                                padding: $spacing-val-md 0;
     967                        }
     968                        width: 100%;
     969
     970                        #search-members-form {
     971                                float: right;
     972
     973                                @media screen and (max-width: 38.75em) {
     974                                        margin: 0;
     975                                        width: 100%;
     976
     977                                        label {
     978                                                input[type="text"] {width: 100%;}
     979                                        }
     980                                }
     981
     982                                margin: $spacing-val-xs $spacing-val-xs 0 0;
     983                        }
     984                }
     985        }
     986}
     987
    701988/**
    702989*-------------------------------------------------------------------------------
    703990* @section 7.0 - Single User Account Screens
    … …  
    7591046
    7601047                } // close .notifications-options-nav
    7611048
    762         /* Item Header */
     1049        /**
     1050        *-----------------------------------------------------
     1051        * @subsection 7.1 - Item Header
     1052        *-----------------------------------------------------
     1053        */
    7631054
    7641055                #item-header {
    7651056                        padding: $spacing-val-md 0;
    … …  
    7981089
    7991090                } // close #item-header
    8001091
    801         /* Profile */
     1092        /**
     1093        *-----------------------------------------------------
     1094        * @subsection 7.2 - Extended Profile
     1095        *-----------------------------------------------------
     1096        */
    8021097                .profile {
    8031098                        .bp-widget {
    8041099                                h4 {
    … …  
    8121107                        }
    8131108                } // close .profile
    8141109
    815                 .bp-avatar-nav {
    816                         ul:before,
    817                         ul:after {
    818                                 content: " ";
    819                                 display: table;
    820                         }
     1110/**
     1111        *-----------------------------------------------------
     1112        * @subsection 7.3 - Groups
     1113        *-----------------------------------------------------
     1114        */
    8211115
    822                         ul:after {
    823                                 clear: both;
    824                         }
    825 
    826                         ul {
    827                                 border-bottom: 1px solid rgba($border-color, 0.5);
    828                                 margin-bottom: $spacing-val-md;
    829 
    830                                 li.current {
    831                                         border: 1px solid rgba($border-color, 0.5);
    832                                         border-bottom-color: #fff;
    833                                         border-top-left-radius: 4px;
    834                                         border-top-right-radius: 4px;
    835                                         margin-bottom: -1px;
    836 
    837                                         a {
    838                                                 background: none;
    839                                                 outline: 0;
    840                                         }
    841                                 } // close li.current
    842                         }
    843                 } // .bp-avatar-nav
    844 
    845                 /* Groups */
    846 
    8471116                #groups-list {
    8481117                        li {
    8491118                                .item {
    … …  
    8551124                        }
    8561125                }
    8571126
    858         /* Messages / Notifications */
    859 
    8601127        } // close #BuddyPress
    8611128
    8621129} // close .bp-user
    … …  
    9051172        }
    9061173
    9071174        div.dir-search,
    908         div.message-search {
     1175        div.message-search,
     1176        li.groups-members-search
     1177         {
    9091178                float: none;
    9101179                margin: $spacing-val-sm 0;
    9111180
    … …  
    9541223        // Shift the search parent to the right and allow to shrinkwrap
    9551224        @media screen and (min-width: 38.75em) {
    9561225                div.dir-search,
    957                 div.message-search {
     1226                div.message-search,
     1227                li.groups-members-search {
    9581228                        float: right;
    9591229                        margin-bottom: 5px !important;
    9601230