Skip to:
Content

BuddyPress.org

Changeset 9823


Ignore:
Timestamp:
04/30/2015 05:58:56 PM (11 years ago)
Author:
hnla
Message:

Updates to twentyfourteen complimentary styles

General style updates & corrections

  • Updates various user account screen elements
  • Updates general form styles
  • Corrects item-body background

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

    r9816 r9823  
    105105  margin-top: 0; }
    106106
     107@media screen and (max-width: 783px) {
     108  #buddypress div#subnav.item-list-tabs {
     109    margin-bottom: 40px; } }
     110
    107111/*__ Vertical Menu User Account Screens __*/
    108112@media screen and (min-width: 783px) {
    109   #buddypress {
     113  .bp-user #buddypress, .single-item.groups #buddypress {
    110114    background: #d8d8d8; }
    111     #buddypress #item-header, #buddypress #item-body {
    112       background: #fff; }
    113     #buddypress #item-body {
    114       border-right: 1px solid #bebebe; }
    115     #buddypress #object-nav {
    116       background: #d8d8d8;
    117       border-left: 1px solid #bebebe;
    118       float: right;
    119       margin-left: -1px;
    120       width: 200px; }
    121       #buddypress #object-nav ul {
    122         border-bottom: 0;
    123         border-top: 1px solid #bebebe;
    124         padding: 0; }
    125         #buddypress #object-nav ul li {
    126           float: none;
    127           overflow: hidden; }
    128           #buddypress #object-nav ul li:focus, #buddypress #object-nav ul li:hover {
    129             background: #bebebe; }
    130           #buddypress #object-nav ul li span {
    131             border-radius: 10%;
    132             float: left;
    133             margin-left: 15px; }
    134         #buddypress #object-nav ul li.current {
    135           background: #f1f1f1; }
    136     #buddypress #item-body {
    137       overflow: hidden;
    138       padding: 0 20px;
    139       width: auto; }
    140       #buddypress #item-body #subnav {
    141         border: 1px solid #bebebe;
    142         border-right: 0;
    143         border-left: 0;
    144         margin: 0 -20px 40px; }
    145         #buddypress #item-body #subnav li:focus, #buddypress #item-body #subnav li:hover {
     115  #buddypress #item-header, #buddypress #item-body {
     116    background: #fff; }
     117  #buddypress #item-body {
     118    border-right: 1px solid #bebebe; }
     119  #buddypress #object-nav {
     120    background: #d8d8d8;
     121    border-left: 1px solid #bebebe;
     122    float: right;
     123    margin-left: -1px;
     124    width: 200px; }
     125    #buddypress #object-nav ul {
     126      border-bottom: 0;
     127      border-top: 1px solid #bebebe;
     128      padding: 0; }
     129      #buddypress #object-nav ul li {
     130        float: none;
     131        overflow: hidden; }
     132        #buddypress #object-nav ul li:focus, #buddypress #object-nav ul li:hover {
    146133          background: #bebebe; }
    147         #buddypress #item-body #subnav li.current {
    148           background: #f1f1f1; } }
     134        #buddypress #object-nav ul li span {
     135          border-radius: 10%;
     136          float: left;
     137          margin-left: 15px; }
     138      #buddypress #object-nav ul li.current {
     139        background: #f1f1f1; }
     140  #buddypress #item-body {
     141    overflow: hidden;
     142    padding: 0 20px;
     143    width: auto; }
     144    #buddypress #item-body #subnav {
     145      border: 1px solid #bebebe;
     146      border-right: 0;
     147      border-left: 0;
     148      margin: 0 -20px 40px; }
     149      #buddypress #item-body #subnav li:focus, #buddypress #item-body #subnav li:hover {
     150        background: #bebebe; }
     151      #buddypress #item-body #subnav li.current {
     152        background: #f1f1f1; } }
    149153
    150154/**
    … …  
    153157*----------------------------------------------------------
    154158*/
     159#buddypress div.pagination .pag-count {
     160  margin-right: 0; }
     161
    155162/**
    156163*-------------------------------------------------------------------------------
    … …  
    237244*-------------------------------------------------
    238245*/
    239 #buddypress #whats-new-form {
     246#buddypress form#whats-new-form {
    240247  margin: 40px 0; }
    241   #buddypress #whats-new-form textarea#whats-new {
     248  #buddypress form#whats-new-form p.activity-greeting {
     249    line-height: inherit; }
     250  #buddypress form#whats-new-form textarea#whats-new {
    242251    width: 100%; }
    243252
    … …  
    472481        * 6.2.2.2 - Extended Profiles
    473482        *------------------------------
     483        */
     484  /**
     485        *------------------------------
     486        * @subsection 6.2.2.5 - Messaging
     487        *------------------------------
     488        */
     489  /**
     490        *------------------------------
     491        * @subsection 6.2.2.6 - Settings
     492        *------------------------------
    474493        */ }
    475494  #buddypress .profile {
    … …  
    506525      color: #fff;
    507526      padding: 0.2em 0.5em; }
     527  #buddypress table#message-threads .bulk-select-check {
     528    width: 5%; }
     529  #buddypress table#message-threads .thread-from, #buddypress table#message-threads .thread-info {
     530    width: 35%; }
     531  #buddypress table#message-threads .thread-options {
     532    width: 25%; }
     533  #buddypress table#message-threads tr td {
     534    background: #ebf0ff; }
     535  #buddypress table#message-threads tr.alt td {
     536    background: #dbe5ff; }
     537  #buddypress table#message-threads tr.unread td {
     538    background: #cddaff;
     539    border-bottom: 1px solid #e4cdff;
     540    border-top: 1px solid #e4cdff; }
     541  #buddypress table#message-threads tr.read td {
     542    opacity: 0.5; }
     543  #buddypress table.profile-settings {
     544    width: 100%; }
     545    #buddypress table.profile-settings th, #buddypress table.profile-settings td {
     546      clear: none;
     547      width: 50%; }
    508548
    509549/*------------------------------------------------------------------------------
    … …  
    511551*-------------------------------------------------------------------------------
    512552*/
    513 #buddypress .standard-form input[type="text"], #buddypress .standard-form textarea {
     553#buddypress input[type="text"], #buddypress input[type="email"], #buddypress input[type="password"], #buddypress input[type="submit"], #buddypress select, #buddypress textarea {
     554  border: 1px solid rgba(0, 0, 0, 0.2); }
     555#buddypress .standard-form input[type="text"], #buddypress .standard-form input[type="email"], #buddypress .standard-form input[type="password"], #buddypress .standard-form input[type="submit"], #buddypress .standard-form textarea {
    514556  width: 100%; }
    515557#buddypress div.activity-comments form .ac-textarea {
    … …  
    519561    background: none;
    520562    border: 0; }
    521 #buddypress select {
    522   border: 1px solid rgba(0, 0, 0, 0.5); }
    523563
    524564#buddypress div.dir-search, #buddypress div.message-search {
     565  clear: both;
    525566  float: none;
    526567  margin: 10px 0; }
    … …  
    534575      float: right;
    535576      margin: 0;
    536       width: 100%; }
     577      width: 80%; }
    537578    #buddypress div.dir-search form input[type='text'], #buddypress div.dir-search form input[type='submit'], #buddypress div.message-search form input[type='text'], #buddypress div.message-search form input[type='submit'] {
    538579      border: 0;
    … …  
    552593@media screen and (min-width: 401px) {
    553594  #buddypress div.dir-search, #buddypress div.message-search {
     595    clear: none;
    554596    float: left;
    555597    margin: 0; }

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

    r9816 r9823  
    105105  margin-top: 0; }
    106106
     107@media screen and (max-width: 783px) {
     108  #buddypress div#subnav.item-list-tabs {
     109    margin-bottom: 40px; } }
     110
    107111/*__ Vertical Menu User Account Screens __*/
    108112@media screen and (min-width: 783px) {
    109   #buddypress {
     113  .bp-user #buddypress, .single-item.groups #buddypress {
    110114    background: #d8d8d8; }
    111     #buddypress #item-header, #buddypress #item-body {
    112       background: #fff; }
    113     #buddypress #item-body {
    114       border-left: 1px solid #bebebe; }
    115     #buddypress #object-nav {
    116       background: #d8d8d8;
    117       border-right: 1px solid #bebebe;
    118       float: left;
    119       margin-right: -1px;
    120       width: 200px; }
    121       #buddypress #object-nav ul {
    122         border-bottom: 0;
    123         border-top: 1px solid #bebebe;
    124         padding: 0; }
    125         #buddypress #object-nav ul li {
    126           float: none;
    127           overflow: hidden; }
    128           #buddypress #object-nav ul li:focus, #buddypress #object-nav ul li:hover {
    129             background: #bebebe; }
    130           #buddypress #object-nav ul li span {
    131             border-radius: 10%;
    132             float: right;
    133             margin-right: 15px; }
    134         #buddypress #object-nav ul li.current {
    135           background: #f1f1f1; }
    136     #buddypress #item-body {
    137       overflow: hidden;
    138       padding: 0 20px;
    139       width: auto; }
    140       #buddypress #item-body #subnav {
    141         border: 1px solid #bebebe;
    142         border-left: 0;
    143         border-right: 0;
    144         margin: 0 -20px 40px; }
    145         #buddypress #item-body #subnav li:focus, #buddypress #item-body #subnav li:hover {
     115  #buddypress #item-header, #buddypress #item-body {
     116    background: #fff; }
     117  #buddypress #item-body {
     118    border-left: 1px solid #bebebe; }
     119  #buddypress #object-nav {
     120    background: #d8d8d8;
     121    border-right: 1px solid #bebebe;
     122    float: left;
     123    margin-right: -1px;
     124    width: 200px; }
     125    #buddypress #object-nav ul {
     126      border-bottom: 0;
     127      border-top: 1px solid #bebebe;
     128      padding: 0; }
     129      #buddypress #object-nav ul li {
     130        float: none;
     131        overflow: hidden; }
     132        #buddypress #object-nav ul li:focus, #buddypress #object-nav ul li:hover {
    146133          background: #bebebe; }
    147         #buddypress #item-body #subnav li.current {
    148           background: #f1f1f1; } }
     134        #buddypress #object-nav ul li span {
     135          border-radius: 10%;
     136          float: right;
     137          margin-right: 15px; }
     138      #buddypress #object-nav ul li.current {
     139        background: #f1f1f1; }
     140  #buddypress #item-body {
     141    overflow: hidden;
     142    padding: 0 20px;
     143    width: auto; }
     144    #buddypress #item-body #subnav {
     145      border: 1px solid #bebebe;
     146      border-left: 0;
     147      border-right: 0;
     148      margin: 0 -20px 40px; }
     149      #buddypress #item-body #subnav li:focus, #buddypress #item-body #subnav li:hover {
     150        background: #bebebe; }
     151      #buddypress #item-body #subnav li.current {
     152        background: #f1f1f1; } }
    149153
    150154/**
    … …  
    153157*----------------------------------------------------------
    154158*/
     159#buddypress div.pagination .pag-count {
     160  margin-left: 0; }
     161
    155162/**
    156163*-------------------------------------------------------------------------------
    … …  
    237244*-------------------------------------------------
    238245*/
    239 #buddypress #whats-new-form {
     246#buddypress form#whats-new-form {
    240247  margin: 40px 0; }
    241   #buddypress #whats-new-form textarea#whats-new {
     248  #buddypress form#whats-new-form p.activity-greeting {
     249    line-height: inherit; }
     250  #buddypress form#whats-new-form textarea#whats-new {
    242251    width: 100%; }
    243252
    … …  
    472481        * 6.2.2.2 - Extended Profiles
    473482        *------------------------------
     483        */
     484  /**
     485        *------------------------------
     486        * @subsection 6.2.2.5 - Messaging
     487        *------------------------------
     488        */
     489  /**
     490        *------------------------------
     491        * @subsection 6.2.2.6 - Settings
     492        *------------------------------
    474493        */ }
    475494  #buddypress .profile {
    … …  
    506525      color: #fff;
    507526      padding: 0.2em 0.5em; }
     527  #buddypress table#message-threads .bulk-select-check {
     528    width: 5%; }
     529  #buddypress table#message-threads .thread-from, #buddypress table#message-threads .thread-info {
     530    width: 35%; }
     531  #buddypress table#message-threads .thread-options {
     532    width: 25%; }
     533  #buddypress table#message-threads tr td {
     534    background: #ebf0ff; }
     535  #buddypress table#message-threads tr.alt td {
     536    background: #dbe5ff; }
     537  #buddypress table#message-threads tr.unread td {
     538    background: #cddaff;
     539    border-bottom: 1px solid #e4cdff;
     540    border-top: 1px solid #e4cdff; }
     541  #buddypress table#message-threads tr.read td {
     542    opacity: 0.5; }
     543  #buddypress table.profile-settings {
     544    width: 100%; }
     545    #buddypress table.profile-settings th, #buddypress table.profile-settings td {
     546      clear: none;
     547      width: 50%; }
    508548
    509549/*------------------------------------------------------------------------------
    … …  
    511551*-------------------------------------------------------------------------------
    512552*/
    513 #buddypress .standard-form input[type="text"], #buddypress .standard-form textarea {
     553#buddypress input[type="text"], #buddypress input[type="email"], #buddypress input[type="password"], #buddypress input[type="submit"], #buddypress select, #buddypress textarea {
     554  border: 1px solid rgba(0, 0, 0, 0.2); }
     555#buddypress .standard-form input[type="text"], #buddypress .standard-form input[type="email"], #buddypress .standard-form input[type="password"], #buddypress .standard-form input[type="submit"], #buddypress .standard-form textarea {
    514556  width: 100%; }
    515557#buddypress div.activity-comments form .ac-textarea {
    … …  
    519561    background: none;
    520562    border: 0; }
    521 #buddypress select {
    522   border: 1px solid rgba(0, 0, 0, 0.5); }
    523563
    524564#buddypress div.dir-search, #buddypress div.message-search {
     565  clear: both;
    525566  float: none;
    526567  margin: 10px 0; }
    … …  
    534575      float: left;
    535576      margin: 0;
    536       width: 100%; }
     577      width: 80%; }
    537578    #buddypress div.dir-search form input[type='text'], #buddypress div.dir-search form input[type='submit'], #buddypress div.message-search form input[type='text'], #buddypress div.message-search form input[type='submit'] {
    538579      border: 0;
    … …  
    552593@media screen and (min-width: 401px) {
    553594  #buddypress div.dir-search, #buddypress div.message-search {
     595    clear: none;
    554596    float: right;
    555597    margin: 0; }

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

    r9821 r9823  
    116116$notice-warning:         #d05656;
    117117$notice-info:            #9fd1e2;
     118$stripe-odd:             #ebf0ff;
     119$stripe-even:            #dbe5ff;
     120$unread:                 #cddaff;
    118121
    119122// 2014 font family
    … …  
    269272}
    270273
     274// Add a little bottom margin to subnav up to vert nav display point
     275// for user/group screens
     276// @todo object nav/subnav needs display solution/styling for stacked views
     277@media screen and (max-width: 783px) {
     278        #buddypress {
     279                div#subnav.item-list-tabs {
     280                        margin-bottom: $spacing-val-lg;
     281                }
     282        }
     283}
     284
    271285/*__ Vertical Menu User Account Screens __*/
    272286
    … …  
    279293
    280294@media screen and (min-width: 783px) {
     295
     296        .bp-user,
     297        .single-item.groups {
     298                #buddypress {
     299                        background: lighten($nav-background-border, 10%);
     300                }
     301        }
     302
    281303        #buddypress {
    282                 background: lighten($nav-background-border, 10%);
    283304
    284305                #item-header,
    … …  
    344365                        }
    345366                }
    346         } // close .bp-user #buddypress
     367        } // close #buddypress
    347368} // close @media
    348369
    … …  
    352373*----------------------------------------------------------
    353374*/
     375
     376#buddypress {
     377        div.pagination {
     378                .pag-count {
     379                        margin-left: 0;
     380                }
     381        }
     382}
    354383
    355384/**
    … …  
    510539*/
    511540#buddypress {
    512         #whats-new-form {
     541        form#whats-new-form {
    513542                margin: $spacing-val-lg 0;
     543
     544                // Line-height issue inherited from BP rules, override.
     545                p.activity-greeting {
     546                        line-height: inherit;
     547                }
    514548
    515549                textarea#whats-new {
    … …  
    939973        } // close .profile
    940974
     975/**
     976        *------------------------------
     977        * @subsection 6.2.2.5 - Messaging
     978        *------------------------------
     979        */
     980
     981        table#message-threads {
     982
     983                .bulk-select-check {
     984                        width: 5%;
     985                }
     986
     987                .thread-from,
     988                .thread-info {
     989                        width: 35%;
     990                }
     991
     992                .thread-options {
     993                        width: 25%;
     994                }
     995
     996                tr {
     997                        td {
     998                                background: $stripe-odd;
     999                        }
     1000                }
     1001
     1002                tr.alt {
     1003                        td {
     1004                                background: $stripe-even;
     1005                        }
     1006                }
     1007
     1008                tr.unread {
     1009                        td {
     1010                                background: $unread;
     1011                                border-bottom: 1px solid #e4cdff;
     1012                                border-top: 1px solid #e4cdff;
     1013                        }
     1014                }
     1015
     1016                tr.read {
     1017                        td {
     1018                                opacity: 0.5;
     1019                        }
     1020                }
     1021        }
     1022
     1023/**
     1024        *------------------------------
     1025        * @subsection 6.2.2.6 - Settings
     1026        *------------------------------
     1027        */
     1028
     1029        // Profile table td widths
     1030        table.profile-settings {
     1031                width: 100%;
     1032
     1033                th,
     1034                td {
     1035                        clear: none;
     1036                        width: 50%;
     1037                }
     1038        }
     1039
    9411040} // close #buddypress - user acounts item-body
    9421041/*------------------------------------------------------------------------------
    … …  
    9491048#buddypress {
    9501049
     1050        input[type="text"],
     1051        input[type="email"],
     1052        input[type="password"],
     1053        input[type="submit"],
     1054        select,
     1055        textarea {
     1056                border: 1px solid $border-med;
     1057        }
     1058
    9511059        .standard-form {
    9521060                input[type="text"],
     1061                input[type="email"],
     1062                input[type="password"],
     1063                input[type="submit"],
    9531064                textarea {
    9541065                        width: 100%;
    … …  
    9701081        }
    9711082
    972         select {border: 1px solid rgba($border-color, 0.5);}
    973 
    9741083} // close #buddypress
    9751084
    … …  
    9771086        div.dir-search,
    9781087        div.message-search {
     1088                clear: both;
    9791089                float: none;
    9801090                margin: $spacing-val-sm 0;
    … …  
    9941104                                float: left;
    9951105                                margin: 0;
    996                                 width: 100%;
     1106                                width: 80%;
    9971107                        }
    9981108
    … …  
    10261136                div.dir-search,
    10271137                div.message-search {
     1138                        clear: none;
    10281139                        float: right;
    10291140                        margin: 0;
Note: See TracChangeset for help on using the changeset viewer.