Skip to:
Content

BuddyPress.org

Changeset 9842


Ignore:
Timestamp:
05/06/2015 11:49:26 AM (11 years ago)
Author:
hnla
Message:

Updates to twentyfourteen companion styles
Re-factor general nav rules

  • Mobile/tablet li widths to better display links, all navs
  • Adjust styles medium screen widths borders, margins.

Adjust various elements

  • Activity stream margining.
  • Update user settings tables for better layout small screens.

See #6338

Location:
trunk/src/bp-templates/bp-legacy/css
Files:
3 edited

Legend:

Unmodified
Added
Removed

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

    r9835 r9842  
    6363    .buddypress .site-content article .entry-header, .buddypress .site-content article .entry-content {
    6464      max-width: 100%;
    65       padding: 0 20px; }
     65      padding: 0; }
    6666    .buddypress .site-content article #buddypress {
    6767      margin-bottom: 40px; }
    … …  
    7979*----------------------------------------------------------
    8080*/
     81#buddypress .item-list-tabs ul li {
     82  width: 100%; }
     83@media screen and (min-width: 400px) {
     84  #buddypress .item-list-tabs ul li {
     85    width: 50%; } }
     86@media screen and (min-width: 594px) {
     87  #buddypress .item-list-tabs ul li {
     88    width: auto; } }
     89
    8190.directory #buddypress .item-list-tabs ul:before, .directory #buddypress .item-list-tabs ul:after {
    8291  content: " ";
    … …  
    8594  clear: both; }
    8695.directory #buddypress .item-list-tabs ul {
    87   border-bottom: 1px solid rgba(0, 0, 0, 0.2); }
    88 @media screen and (max-width: 400px) {
    89   .directory #buddypress .item-list-tabs ul li {
    90     float: none;
    91     overflow: hidden;
    92     width: 100%; } }
     96  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
     97  padding-bottom: 10px; }
    9398@media screen and (min-width: 783px) {
    94   .directory #buddypress .item-list-tabs ul li.selected {
    95     border: 1px solid rgba(0, 0, 0, 0.2);
    96     border-bottom-color: #fff;
    97     border-top-left-radius: 4px;
    98     border-top-right-radius: 4px;
    99     background-clip: padding-box;
    100     margin-bottom: -1px; }
    101     .directory #buddypress .item-list-tabs ul li.selected a {
    102       background: none;
    103       outline: none; } }
     99  .directory #buddypress .item-list-tabs ul {
     100    padding-bottom: 0; }
     101    .directory #buddypress .item-list-tabs ul li.selected {
     102      border: 1px solid rgba(0, 0, 0, 0.2);
     103      border-bottom-color: #fff;
     104      border-top-left-radius: 4px;
     105      border-top-right-radius: 4px;
     106      background-clip: padding-box;
     107      margin-bottom: -1px; }
     108      .directory #buddypress .item-list-tabs ul li.selected a {
     109        background: none;
     110        outline: none; } }
    104111.directory #buddypress #subnav ul {
    105112  border-bottom: 0; }
    … …  
    111118
    112119@media screen and (max-width: 783px) {
     120  #buddypress #object-nav ul {
     121    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
     122    overflow: hidden;
     123    padding-bottom: 10px; }
    113124  #buddypress div#subnav.item-list-tabs {
    114     margin-bottom: 40px; } }
     125    margin-bottom: 40px; }
     126    #buddypress div#subnav.item-list-tabs ul li {
     127      width: auto; } }
    115128
    116129/*__ Vertical Menu User Account Screens __*/
    … …  
    155168        background: #bebebe; }
    156169      #buddypress #item-body #subnav li.current {
    157         background: #f1f1f1; } }
     170        background: #f1f1f1; }
     171      #buddypress #item-body #subnav li#activity-filter-select:focus, #buddypress #item-body #subnav li#activity-filter-select:hover {
     172        background: none; }
     173      #buddypress #item-body #subnav li#activity-filter-select select {
     174        max-width: 130px; } }
    158175
    159176/**
    … …  
    295312*-------------------------------------------------
    296313*/
     314#buddypress #activity-stream {
     315  margin-top: 40px; }
    297316#buddypress .activity-list li.activity-item:not(.mini) .activity-avatar {
    298317  float: none;
    … …  
    387406  font-size: 22px;
    388407  font-size: 1.375rem;
     408  margin-bottom: 10px;
    389409  padding: 0.2em; }
    390410@media screen and (min-width: 673px) {
    … …  
    617637  #buddypress table#message-threads tr.read td {
    618638    opacity: 0.5; }
     639  #buddypress #settings-form > p {
     640    font-size: 20px;
     641    font-size: 1.25rem; }
     642  #buddypress table.notification-settings td.yes, #buddypress table.notification-settings td.no {
     643    vertical-align: middle; }
    619644  #buddypress table.profile-settings {
    620645    width: 100%; }
    621     #buddypress table.profile-settings th, #buddypress table.profile-settings td {
    622       clear: none;
     646    #buddypress table.profile-settings th.field-group-name, #buddypress table.profile-settings td.field-name {
    623647      width: 50%; }
     648    @media screen and (min-width: 401px) {
     649      #buddypress table.profile-settings th.field-group-name, #buddypress table.profile-settings td.field-name {
     650        width: 70%; } }
     651    #buddypress table.profile-settings td.field-visibility select {
     652      width: 100%; }
    624653
    625654/*------------------------------------------------------------------------------
    … …  
    674703      width: auto; }
    675704  #buddypress div.message-search {
    676     margin-top: 2px; } }
     705    margin: 3px 0 0; } }
    677706
    678707/**

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

    r9835 r9842  
    6363    .buddypress .site-content article .entry-header, .buddypress .site-content article .entry-content {
    6464      max-width: 100%;
    65       padding: 0 20px; }
     65      padding: 0; }
    6666    .buddypress .site-content article #buddypress {
    6767      margin-bottom: 40px; }
    … …  
    7979*----------------------------------------------------------
    8080*/
     81#buddypress .item-list-tabs ul li {
     82  width: 100%; }
     83@media screen and (min-width: 400px) {
     84  #buddypress .item-list-tabs ul li {
     85    width: 50%; } }
     86@media screen and (min-width: 594px) {
     87  #buddypress .item-list-tabs ul li {
     88    width: auto; } }
     89
    8190.directory #buddypress .item-list-tabs ul:before, .directory #buddypress .item-list-tabs ul:after {
    8291  content: " ";
    … …  
    8594  clear: both; }
    8695.directory #buddypress .item-list-tabs ul {
    87   border-bottom: 1px solid rgba(0, 0, 0, 0.2); }
    88 @media screen and (max-width: 400px) {
    89   .directory #buddypress .item-list-tabs ul li {
    90     float: none;
    91     overflow: hidden;
    92     width: 100%; } }
     96  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
     97  padding-bottom: 10px; }
    9398@media screen and (min-width: 783px) {
    94   .directory #buddypress .item-list-tabs ul li.selected {
    95     border: 1px solid rgba(0, 0, 0, 0.2);
    96     border-bottom-color: #fff;
    97     border-top-right-radius: 4px;
    98     border-top-left-radius: 4px;
    99     background-clip: padding-box;
    100     margin-bottom: -1px; }
    101     .directory #buddypress .item-list-tabs ul li.selected a {
    102       background: none;
    103       outline: none; } }
     99  .directory #buddypress .item-list-tabs ul {
     100    padding-bottom: 0; }
     101    .directory #buddypress .item-list-tabs ul li.selected {
     102      border: 1px solid rgba(0, 0, 0, 0.2);
     103      border-bottom-color: #fff;
     104      border-top-right-radius: 4px;
     105      border-top-left-radius: 4px;
     106      background-clip: padding-box;
     107      margin-bottom: -1px; }
     108      .directory #buddypress .item-list-tabs ul li.selected a {
     109        background: none;
     110        outline: none; } }
    104111.directory #buddypress #subnav ul {
    105112  border-bottom: 0; }
    … …  
    111118
    112119@media screen and (max-width: 783px) {
     120  #buddypress #object-nav ul {
     121    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
     122    overflow: hidden;
     123    padding-bottom: 10px; }
    113124  #buddypress div#subnav.item-list-tabs {
    114     margin-bottom: 40px; } }
     125    margin-bottom: 40px; }
     126    #buddypress div#subnav.item-list-tabs ul li {
     127      width: auto; } }
    115128
    116129/*__ Vertical Menu User Account Screens __*/
    … …  
    155168        background: #bebebe; }
    156169      #buddypress #item-body #subnav li.current {
    157         background: #f1f1f1; } }
     170        background: #f1f1f1; }
     171      #buddypress #item-body #subnav li#activity-filter-select:focus, #buddypress #item-body #subnav li#activity-filter-select:hover {
     172        background: none; }
     173      #buddypress #item-body #subnav li#activity-filter-select select {
     174        max-width: 130px; } }
    158175
    159176/**
    … …  
    295312*-------------------------------------------------
    296313*/
     314#buddypress #activity-stream {
     315  margin-top: 40px; }
    297316#buddypress .activity-list li.activity-item:not(.mini) .activity-avatar {
    298317  float: none;
    … …  
    387406  font-size: 22px;
    388407  font-size: 1.375rem;
     408  margin-bottom: 10px;
    389409  padding: 0.2em; }
    390410@media screen and (min-width: 673px) {
    … …  
    617637  #buddypress table#message-threads tr.read td {
    618638    opacity: 0.5; }
     639  #buddypress #settings-form > p {
     640    font-size: 20px;
     641    font-size: 1.25rem; }
     642  #buddypress table.notification-settings td.yes, #buddypress table.notification-settings td.no {
     643    vertical-align: middle; }
    619644  #buddypress table.profile-settings {
    620645    width: 100%; }
    621     #buddypress table.profile-settings th, #buddypress table.profile-settings td {
    622       clear: none;
     646    #buddypress table.profile-settings th.field-group-name, #buddypress table.profile-settings td.field-name {
    623647      width: 50%; }
     648    @media screen and (min-width: 401px) {
     649      #buddypress table.profile-settings th.field-group-name, #buddypress table.profile-settings td.field-name {
     650        width: 70%; } }
     651    #buddypress table.profile-settings td.field-visibility select {
     652      width: 100%; }
    624653
    625654/*------------------------------------------------------------------------------
    … …  
    674703      width: auto; }
    675704  #buddypress div.message-search {
    676     margin-top: 2px; } }
     705    margin: 3px 0 0; } }
    677706
    678707/**

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

    r9835 r9842  
    200200                        .entry-content {
    201201                                max-width: 100%;
    202                                 padding: 0 $spacing-val-md;
     202                                padding: 0;
    203203                        }
    204204
    … …  
    221221*----------------------------------------------------------
    222222*/
     223#buddypress {
     224        .item-list-tabs {
     225                ul {
     226
     227                        li {
     228                                width: 100%;
     229                        }
     230
     231                        @media screen and (min-width: 400px) {
     232                                li {
     233                                        width: 50%;
     234                                }
     235                        }
     236                        @media screen and (min-width: 594px) {
     237                                li {
     238                                        width: auto;
     239                                }
     240                        }
     241                }
     242        }
     243}
    223244
    224245.directory #buddypress {
    … …  
    235256                }
    236257
    237                 ul {border-bottom: 1px solid $border-med;}
    238 
    239                 @media screen and (max-width: 400px) {
    240                         ul {
    241                                 li {
    242                                         float: none;
    243                                         overflow: hidden;
    244                                         width: 100%;
    245                                 }
    246                         }
     258                ul {
     259                        border-bottom: 1px solid $border-med;
     260                        padding-bottom: $spacing-val-sm;
    247261                }
    248262
    249263                @media screen and (min-width: 783px) {
    250264                        ul {
     265                                padding-bottom: 0;
    251266
    252267                                li.selected {
    … …  
    269284                        border-bottom: 0;
    270285                }
     286
    271287        } // close #subnav
    272288} // close .directory #buddypress
    … …  
    282298}
    283299
    284 // Add a little bottom margin to subnav up to vert nav display point
    285 // for user/group screens
    286 // @todo object nav/subnav needs display solution/styling for stacked views
     300// Add a little bottom margin & border seperation to object/subnav
     301// & keep subnav to horizontal up to vert nav display for user/group screens
     302
    287303@media screen and (max-width: 783px) {
     304
    288305        #buddypress {
     306                #object-nav {
     307                        ul {
     308                                border-bottom: 1px solid $border-med;
     309                                overflow: hidden;
     310                                padding-bottom: $spacing-val-sm;
     311                        }
     312                }
     313
    289314                div#subnav.item-list-tabs {
    290315                        margin-bottom: $spacing-val-lg;
    291                 }
    292         }
    293 }
     316
     317                        ul {
     318                                li {
     319                                        width: auto;
     320                                }
     321                        }
     322                }
     323        }
     324
     325} // close @media
    294326
    295327/*__ Vertical Menu User Account Screens __*/
    … …  
    373405                                        background: lighten($nav-background-border, 20%);
    374406                                }
     407
     408                                li#activity-filter-select {
     409
     410                                        &:focus,
     411                                        &:hover {
     412                                                background: none;
     413                                        }
     414
     415                                        select {
     416                                                max-width: 130px;
     417                                        }
     418                                }
     419
    375420                        }
    376421                }
    … …  
    635680
    636681#buddypress {
     682        #activity-stream {margin-top: $spacing-val-lg;}
    637683        .activity-list {
    638684
    … …  
    800846                @include title-background-dark();
    801847                @include font-size(22);
     848                margin-bottom: $spacing-val-sm;
    802849                padding: 0.2em;
    803850        }
    … …  
    11791226        */
    11801227
     1228        #settings-form {
     1229                // 'p' = email notification screen sub heading
     1230                > p { @include font-size(20); }
     1231        }
     1232
     1233        table.notification-settings {
     1234                td.yes,
     1235                td.no {
     1236                        vertical-align: middle;
     1237                }
     1238        }
    11811239        // Profile table td widths
    11821240        table.profile-settings {
    11831241                width: 100%;
    11841242
    1185                 th,
    1186                 td {
    1187                         clear: none;
     1243                th.field-group-name,
     1244                td.field-name {
    11881245                        width: 50%;
    11891246                }
     1247
     1248                @media screen and (min-width: 401px) {
     1249                        th.field-group-name,
     1250                        td.field-name {
     1251                                width: 70%;
     1252                        }
     1253                }
     1254
     1255                td.field-visibility {
     1256                        select {width: 100%;}
     1257                }
    11901258        }
    11911259
    11921260} // close #buddypress - user acounts item-body
     1261
    11931262/*------------------------------------------------------------------------------
    11941263* @section - 7.0 - Forms  - General
    … …  
    13001369                }
    13011370
    1302                 div.message-search { margin-top: 2px;}
     1371                div.message-search { margin: 3px 0 0;}
    13031372        } // close @media
    13041373} // close #buddypress
Note: See TracChangeset for help on using the changeset viewer.