Skip to:
Content

BuddyPress.org

Changeset 9842


Ignore:
Timestamp:
05/06/2015 11:49:26 AM (9 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.