Skip to:
Content

BuddyPress.org

Changeset 9859


Ignore:
Timestamp:
05/09/2015 06:54:33 PM (9 years ago)
Author:
hnla
Message:

Update twentyfifteen companion styles
commit adds:
Additions provided by r-a-y for message thread layout, single headers, spacing, fonts.
Various style updates and scss additions.

  • Re-factor message thread layout - cheers r-a-y.
  • Add default fonts mixins
  • Port over updated vendor prefix mixin scss-lint disable rules block.
  • Update small screen responsive view for activity stream items.
  • Provide minor styling for activity-permalink views.
  • Updates single-item screens header responsive styles - cheers r-a-y.

See #6291 Props r-a-y

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

Legend:

Unmodified
Added
Removed

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

    r9852 r9859  
    7777        margin: 0 8.3333% 0 4.3333%; } }
    7878    .buddypress main article .entry-header, .buddypress main article .entry-content {
    79       padding: 0 2rem 2rem; }
     79      padding: 0 3rem 3rem 3rem; }
    8080    .buddypress main article #buddypress {
    8181      margin-bottom: 40px; }
    … …  
    112112  #buddypress div.item-list-tabs ul {
    113113    background-color: #f7f7f7;
    114     border-bottom: 1px solid rgba(153, 153, 153, 0.4);
     114    border-bottom: 1px solid rgba(234, 234, 234, 0.9);
     115    border-top: 1px solid rgba(234, 234, 234, 0.9);
    115116    overflow: hidden;
    116117    padding: 5px 0; }
    … …  
    172173        overflow: hidden; }
    173174        #buddypress #object-nav ul li span {
     175          background: #fff;
    174176          border-radius: 10%;
    175177          float: left;
    176           margin-left: 15px; }
     178          margin-left: 2px; }
    177179  #buddypress #item-body {
    178180    border-right: 1px solid #ddd;
    179181    overflow: hidden;
    180     padding: 0 10px;
     182    padding: 0 20px 0 0;
    181183    width: auto; }
    182184    #buddypress #item-body #subnav {
    183       margin: 0 -10px; } }
     185      margin: 0 -20px 0 0; } }
    184186
    185187/**
    … …  
    217219*-------------------------------------------------------------------------------
    218220*/
     221#buddypress .item-list .activity-header, #buddypress .item-list .activity-meta {
     222  font-family: "Noto Sans", sans-serif; }
     223
    219224#buddypress ul.item-list li {
    220225  overflow: hidden !important; }
    … …  
    332337*-----------------------------------------------------
    333338*/
    334 #buddypress .activity-list li .activity-avatar a img.avatar {
    335   height: 60px;
    336   margin-right: 0;
    337   width: 60px; }
    338 #buddypress .activity-list li.mini .activity-avatar a img.avatar {
     339#buddypress #activity-stream li {
     340  padding: 25px 0 15px; }
     341  #buddypress #activity-stream li .activity-avatar {
     342    float: none;
     343    text-align: center; }
     344    #buddypress #activity-stream li .activity-avatar a {
     345      display: inline-block; }
     346      #buddypress #activity-stream li .activity-avatar a img.avatar {
     347        display: inline;
     348        float: none;
     349        height: 60px;
     350        margin-bottom: 20px;
     351        margin-right: 0;
     352        width: 60px; }
     353  #buddypress #activity-stream li .activity-content {
     354    margin-right: 0; }
     355    #buddypress #activity-stream li .activity-content .activity-header {
     356      font-size: 14px;
     357      font-size: 1.4rem; }
     358  @media screen and (min-width: 46.25em) {
     359    #buddypress #activity-stream li .activity-avatar {
     360      float: right;
     361      margin-left: 10px;
     362      text-align: right; }
     363      #buddypress #activity-stream li .activity-avatar a {
     364        border-bottom: 0; }
     365    #buddypress #activity-stream li .activity-content {
     366      margin: 0;
     367      overflow: hidden; }
     368      #buddypress #activity-stream li .activity-content .activity-header {
     369        font-size: 16px;
     370        font-size: 1.6rem; } }
     371#buddypress #activity-stream li.mini .activity-avatar a img.avatar {
    339372  height: 30px;
    340373  margin-right: 15px;
    341374  width: 30px; }
    342 #buddypress .activity-list li.mini .activity-content .activity-header {
     375#buddypress #activity-stream li.mini .activity-content .activity-header {
    343376  font-size: 13px;
    344377  font-size: 1.3rem; }
    345 #buddypress .activity-list .activity-content {
     378#buddypress #activity-stream .activity-content {
    346379  margin-top: -12px; }
    347   #buddypress .activity-list .activity-content .activity-header {
    348     font-size: 16px;
    349     font-size: 1.6rem;
     380  #buddypress #activity-stream .activity-content .activity-header {
    350381    line-height: inherit;
    351382    margin-left: 0; }
    352     #buddypress .activity-list .activity-content .activity-header p {
     383    #buddypress #activity-stream .activity-content .activity-header p {
    353384      background-color: #f7f7f7;
    354385      border: 1px solid rgba(234, 234, 234, 0.6);
    355386      padding: 0 0.2em; }
    356     #buddypress .activity-list .activity-content .activity-header img.avatar {
     387    #buddypress #activity-stream .activity-content .activity-header img.avatar {
    357388      display: inline-block;
    358389      margin-bottom: 0 !important; }
    359   #buddypress .activity-list .activity-content .activity-meta a {
     390  #buddypress #activity-stream .activity-content .activity-meta a {
    360391    display: block;
    361392    margin-bottom: 5px; }
    362393    @media screen and (min-width: 38.75em) {
    363       #buddypress .activity-list .activity-content .activity-meta a {
     394      #buddypress #activity-stream .activity-content .activity-meta a {
    364395        display: inline-block;
    365396        margin-bottom: 0; } }
    366 #buddypress .activity-list .load-more a {
    367   display: block; }
     397#buddypress #activity-stream .load-more {
     398  background: #f7f7f7;
     399  border: 1px solid transparent;
     400  padding: 10px; }
     401  #buddypress #activity-stream .load-more:focus, #buddypress #activity-stream .load-more:hover {
     402    background: #f4f4f4;
     403    border: 1px solid rgba(159, 209, 226, 0.3); }
     404    #buddypress #activity-stream .load-more:focus a, #buddypress #activity-stream .load-more:hover a {
     405      font-style: italic; }
     406  #buddypress #activity-stream .load-more a {
     407    display: block; }
     408
     409/* Single activity view  - activity permalink */
     410.activity-permalink #buddypress #activity-stream li.activity-item {
     411  padding: 20px; }
     412.activity-permalink #buddypress #activity-stream li.mini .activity-header {
     413  font-size: 16px;
     414  font-size: 1.6rem;
     415  margin-bottom: 40px; }
     416  @media screen and (min-width: 46.25em) {
     417    .activity-permalink #buddypress #activity-stream li.mini .activity-header {
     418      font-size: 20px;
     419      font-size: 2rem; } }
     420  .activity-permalink #buddypress #activity-stream li.mini .activity-header p {
     421    padding: 20px; }
    368422
    369423/**
    … …  
    372426*-----------------------------------------------------
    373427*/
    374 #buddypress .activity .activity-comments {
     428#buddypress #activity-stream .activity-comments {
    375429  border-right: 1px solid #eaeaea;
    376430  margin-top: 5px; }
    377   #buddypress .activity .activity-comments ul {
     431  #buddypress #activity-stream .activity-comments ul {
    378432    background: rgba(247, 247, 247, 0.6);
    379     margin: 30px 2px 0 0; }
    380   #buddypress .activity .activity-comments .ac-form input[type="submit"], #buddypress .activity .activity-comments .ac-form .ac-reply-cancel {
     433    margin: 15px 2px 0 0; }
     434  #buddypress #activity-stream .activity-comments .ac-form input[type="submit"], #buddypress #activity-stream .activity-comments .ac-form .ac-reply-cancel {
    381435    color: rgba(51, 51, 51, 0.8);
    382436    display: inline-block;
    … …  
    389443    text-transform: lowercase;
    390444    width: 100px; }
    391   #buddypress .activity .activity-comments .ac-form .ac-reply-cancel {
     445  #buddypress #activity-stream .activity-comments .ac-form .ac-reply-cancel {
    392446    border: 1px solid rgba(153, 153, 153, 0.7);
    393447    text-align: center; }
    394     #buddypress .activity .activity-comments .ac-form .ac-reply-cancel:focus, #buddypress .activity .activity-comments .ac-form .ac-reply-cancel:hover {
     448    #buddypress #activity-stream .activity-comments .ac-form .ac-reply-cancel:focus, #buddypress #activity-stream .activity-comments .ac-form .ac-reply-cancel:hover {
    395449      background: #ededed; }
    396450
    … …  
    416470*-----------------------------------------------------------
    417471*/
     472@media screen and (max-width: 46.25em) {
     473  .bp-user main header.entry-header, .single-item.groups main header.entry-header {
     474    padding-bottom: 1rem; } }
     475@media screen and (max-width: 38.75em) {
     476  .bp-user h1, .bp-user #item-header-content, .single-item.groups h1, .single-item.groups #item-header-content {
     477    text-align: center; } }
     478@media screen and (max-width: 46.25em) {
     479  .bp-user #buddypress #item-header .generic-button, .single-item.groups #buddypress #item-header .generic-button {
     480    float: none;
     481    margin: 1.5em 0 0 0; } }
     482@media screen and (max-width: 38.75em) {
     483  .bp-user #buddypress h1, .single-item.groups #buddypress h1 {
     484    margin-bottom: 0; }
     485  .bp-user #buddypress #item-header-avatar img.avatar, .single-item.groups #buddypress #item-header-avatar img.avatar {
     486    margin-left: 0; }
     487  .bp-user #buddypress #item-header-content, .single-item.groups #buddypress #item-header-content {
     488    width: 100%; } }
     489
    418490/**
    419491*-----------------------------------------------------
    … …  
    423495*-----------------------------------------------------
    424496*/
     497@media screen and (max-width: 46.25em) {
     498  .single-item.groups #buddypress #item-header #item-meta {
     499    margin-bottom: 20px; } }
    425500@media screen and (max-width: 38.75em) {
    426501  .single-item.groups #buddypress div#item-header {
    … …  
    523598.groups.edit-details #group-settings-form label {
    524599  background: #555;
     600  -webkit-border-top-left-radius: 4px;
    525601  border-top-left-radius: 4px;
     602  -webkit-border-top-right-radius: 4px;
    526603  border-top-right-radius: 4px;
    527604  background-clip: padding-box;
    … …  
    744821    margin: 10px 0 0 0;
    745822    padding: 0.3em; }
    746   .bp-user #buddypress table#message-threads .bulk-select-check, .bp-user #buddypress table#message-threads .thread-star {
    747     width: 10%; }
    748   .bp-user #buddypress table#message-threads .thread-star a {
    749     outline: none; }
    750   .bp-user #buddypress table#message-threads .thread-from, .bp-user #buddypress table#message-threads .thread-info {
    751     width: 30%; }
    752   .bp-user #buddypress table#message-threads .thread-options {
    753     width: 20%; }
    754   .bp-user #buddypress table#message-threads tr td {
    755     background: #ebf0ff; }
    756   .bp-user #buddypress table#message-threads tr.alt td {
    757     background: #dbe5ff; }
    758   .bp-user #buddypress table#message-threads tr.unread td {
    759     background: #cddaff;
    760     border-bottom: 1px solid #e4cdff;
    761     border-top: 1px solid #e4cdff; }
    762   .bp-user #buddypress table#message-threads tr.read td {
    763     background: #f7f7f7; }
     823  .bp-user #buddypress #message-thread #send-reply .message-content {
     824    background: #fff;
     825    border: 0; }
     826  .bp-user #buddypress #message-thread .alt {
     827    background: #fff; }
     828  .bp-user #buddypress #message-threads {
     829    display: block; }
     830    .bp-user #buddypress #message-threads thead tr {
     831      background: #6e6e6e; }
     832    .bp-user #buddypress #message-threads tr td {
     833      background: #fff;
     834      display: inline-block;
     835      float: right; }
     836    .bp-user #buddypress #message-threads tr td.thread-star, .bp-user #buddypress #message-threads tr td.thread-options {
     837      border-bottom-color: #ccc;
     838      border-bottom-width: 2px;
     839      height: 2.4em;
     840      padding-bottom: 0.2em;
     841      padding-top: 0.2em; }
     842      @media screen and (max-width: 46.25em) {
     843        .bp-user #buddypress #message-threads tr td.thread-star, .bp-user #buddypress #message-threads tr td.thread-options {
     844          padding-top: 0; } }
     845    .bp-user #buddypress #message-threads tr td.bulk-select-check, .bp-user #buddypress #message-threads tr td.thread-from {
     846      height: 2.6em; }
     847      @media screen and (max-width: 38.75em) {
     848        .bp-user #buddypress #message-threads tr td.bulk-select-check, .bp-user #buddypress #message-threads tr td.thread-from {
     849          height: 5.2em; } }
     850    .bp-user #buddypress #message-threads tr td.thread-from, .bp-user #buddypress #message-threads tr td.thread-options {
     851      border-right: 0 !important;
     852      width: -webkit-calc(100% - 30px);
     853      width: -moz-calc(100% - 30px);
     854      width: calc(100% - 30px);
     855      margin-right: 0; }
     856    .bp-user #buddypress #message-threads tr td.thread-info {
     857      padding-right: 41px;
     858      width: 100%; }
     859      .bp-user #buddypress #message-threads tr td.thread-info a::after {
     860        content: " \2013 \00a0" attr(title);
     861        font-size: 12px;
     862        font-size: 1.2rem; }
     863    .bp-user #buddypress #message-threads tr td.thread-options {
     864      text-align: left; }
     865      .bp-user #buddypress #message-threads tr td.thread-options a {
     866        font-size: 12px;
     867        font-size: 1.2rem;
     868        line-height: 2.2; }
     869    .bp-user #buddypress #message-threads tr span.from {
     870      display: none; }
     871    .bp-user #buddypress #message-threads tr span.activity {
     872      display: block;
     873      float: left;
     874      line-height: 2; }
     875      @media screen and (max-width: 38.75em) {
     876        .bp-user #buddypress #message-threads tr span.activity {
     877          clear: both;
     878          font-size: 11px;
     879          font-size: 1.1rem;
     880          width: 100%; } }
     881    .bp-user #buddypress #message-threads tr.unread td {
     882      background: #dce5ff;
     883      border-color: #999; }
     884    .bp-user #buddypress #message-threads th {
     885      display: none; }
     886    .bp-user #buddypress #message-threads th.bulk-select-all {
     887      border-bottom: 0;
     888      display: inline-block;
     889      text-align: right; }
     890    .bp-user #buddypress #message-threads th.bulk-select-all, .bp-user #buddypress #message-threads td.bulk-select-check, .bp-user #buddypress #message-threads td.thread-star {
     891      border-left: 0;
     892      width: 30px; }
    764893  .bp-user #buddypress .acfb-holder li.friend-tab {
    765894    margin-left: 0; }

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

    r9852 r9859  
    7777        margin: 0 4.3333% 0 8.3333%; } }
    7878    .buddypress main article .entry-header, .buddypress main article .entry-content {
    79       padding: 0 2rem 2rem; }
     79      padding: 0 3rem 3rem 3rem; }
    8080    .buddypress main article #buddypress {
    8181      margin-bottom: 40px; }
    … …  
    112112  #buddypress div.item-list-tabs ul {
    113113    background-color: #f7f7f7;
    114     border-bottom: 1px solid rgba(153, 153, 153, 0.4);
     114    border-bottom: 1px solid rgba(234, 234, 234, 0.9);
     115    border-top: 1px solid rgba(234, 234, 234, 0.9);
    115116    overflow: hidden;
    116117    padding: 5px 0; }
    … …  
    172173        overflow: hidden; }
    173174        #buddypress #object-nav ul li span {
     175          background: #fff;
    174176          border-radius: 10%;
    175177          float: right;
    176           margin-right: 15px; }
     178          margin-right: 2px; }
    177179  #buddypress #item-body {
    178180    border-left: 1px solid #ddd;
    179181    overflow: hidden;
    180     padding: 0 10px;
     182    padding: 0 0 0 20px;
    181183    width: auto; }
    182184    #buddypress #item-body #subnav {
    183       margin: 0 -10px; } }
     185      margin: 0 0 0 -20px; } }
    184186
    185187/**
    … …  
    217219*-------------------------------------------------------------------------------
    218220*/
     221#buddypress .item-list .activity-header, #buddypress .item-list .activity-meta {
     222  font-family: "Noto Sans", sans-serif; }
     223
    219224#buddypress ul.item-list li {
    220225  overflow: hidden !important; }
    … …  
    332337*-----------------------------------------------------
    333338*/
    334 #buddypress .activity-list li .activity-avatar a img.avatar {
    335   height: 60px;
    336   margin-left: 0;
    337   width: 60px; }
    338 #buddypress .activity-list li.mini .activity-avatar a img.avatar {
     339#buddypress #activity-stream li {
     340  padding: 25px 0 15px; }
     341  #buddypress #activity-stream li .activity-avatar {
     342    float: none;
     343    text-align: center; }
     344    #buddypress #activity-stream li .activity-avatar a {
     345      display: inline-block; }
     346      #buddypress #activity-stream li .activity-avatar a img.avatar {
     347        display: inline;
     348        float: none;
     349        height: 60px;
     350        margin-bottom: 20px;
     351        margin-left: 0;
     352        width: 60px; }
     353  #buddypress #activity-stream li .activity-content {
     354    margin-left: 0; }
     355    #buddypress #activity-stream li .activity-content .activity-header {
     356      font-size: 14px;
     357      font-size: 1.4rem; }
     358  @media screen and (min-width: 46.25em) {
     359    #buddypress #activity-stream li .activity-avatar {
     360      float: left;
     361      margin-right: 10px;
     362      text-align: left; }
     363      #buddypress #activity-stream li .activity-avatar a {
     364        border-bottom: 0; }
     365    #buddypress #activity-stream li .activity-content {
     366      margin: 0;
     367      overflow: hidden; }
     368      #buddypress #activity-stream li .activity-content .activity-header {
     369        font-size: 16px;
     370        font-size: 1.6rem; } }
     371#buddypress #activity-stream li.mini .activity-avatar a img.avatar {
    339372  height: 30px;
    340373  margin-left: 15px;
    341374  width: 30px; }
    342 #buddypress .activity-list li.mini .activity-content .activity-header {
     375#buddypress #activity-stream li.mini .activity-content .activity-header {
    343376  font-size: 13px;
    344377  font-size: 1.3rem; }
    345 #buddypress .activity-list .activity-content {
     378#buddypress #activity-stream .activity-content {
    346379  margin-top: -12px; }
    347   #buddypress .activity-list .activity-content .activity-header {
    348     font-size: 16px;
    349     font-size: 1.6rem;
     380  #buddypress #activity-stream .activity-content .activity-header {
    350381    line-height: inherit;
    351382    margin-right: 0; }
    352     #buddypress .activity-list .activity-content .activity-header p {
     383    #buddypress #activity-stream .activity-content .activity-header p {
    353384      background-color: #f7f7f7;
    354385      border: 1px solid rgba(234, 234, 234, 0.6);
    355386      padding: 0 0.2em; }
    356     #buddypress .activity-list .activity-content .activity-header img.avatar {
     387    #buddypress #activity-stream .activity-content .activity-header img.avatar {
    357388      display: inline-block;
    358389      margin-bottom: 0 !important; }
    359   #buddypress .activity-list .activity-content .activity-meta a {
     390  #buddypress #activity-stream .activity-content .activity-meta a {
    360391    display: block;
    361392    margin-bottom: 5px; }
    362393    @media screen and (min-width: 38.75em) {
    363       #buddypress .activity-list .activity-content .activity-meta a {
     394      #buddypress #activity-stream .activity-content .activity-meta a {
    364395        display: inline-block;
    365396        margin-bottom: 0; } }
    366 #buddypress .activity-list .load-more a {
    367   display: block; }
     397#buddypress #activity-stream .load-more {
     398  background: #f7f7f7;
     399  border: 1px solid transparent;
     400  padding: 10px; }
     401  #buddypress #activity-stream .load-more:focus, #buddypress #activity-stream .load-more:hover {
     402    background: #f4f4f4;
     403    border: 1px solid rgba(159, 209, 226, 0.3); }
     404    #buddypress #activity-stream .load-more:focus a, #buddypress #activity-stream .load-more:hover a {
     405      font-style: italic; }
     406  #buddypress #activity-stream .load-more a {
     407    display: block; }
     408
     409/* Single activity view  - activity permalink */
     410.activity-permalink #buddypress #activity-stream li.activity-item {
     411  padding: 20px; }
     412.activity-permalink #buddypress #activity-stream li.mini .activity-header {
     413  font-size: 16px;
     414  font-size: 1.6rem;
     415  margin-bottom: 40px; }
     416  @media screen and (min-width: 46.25em) {
     417    .activity-permalink #buddypress #activity-stream li.mini .activity-header {
     418      font-size: 20px;
     419      font-size: 2rem; } }
     420  .activity-permalink #buddypress #activity-stream li.mini .activity-header p {
     421    padding: 20px; }
    368422
    369423/**
    … …  
    372426*-----------------------------------------------------
    373427*/
    374 #buddypress .activity .activity-comments {
     428#buddypress #activity-stream .activity-comments {
    375429  border-left: 1px solid #eaeaea;
    376430  margin-top: 5px; }
    377   #buddypress .activity .activity-comments ul {
     431  #buddypress #activity-stream .activity-comments ul {
    378432    background: rgba(247, 247, 247, 0.6);
    379     margin: 30px 0 0 2px; }
    380   #buddypress .activity .activity-comments .ac-form input[type="submit"], #buddypress .activity .activity-comments .ac-form .ac-reply-cancel {
     433    margin: 15px 0 0 2px; }
     434  #buddypress #activity-stream .activity-comments .ac-form input[type="submit"], #buddypress #activity-stream .activity-comments .ac-form .ac-reply-cancel {
    381435    color: rgba(51, 51, 51, 0.8);
    382436    display: inline-block;
    … …  
    389443    text-transform: lowercase;
    390444    width: 100px; }
    391   #buddypress .activity .activity-comments .ac-form .ac-reply-cancel {
     445  #buddypress #activity-stream .activity-comments .ac-form .ac-reply-cancel {
    392446    border: 1px solid rgba(153, 153, 153, 0.7);
    393447    text-align: center; }
    394     #buddypress .activity .activity-comments .ac-form .ac-reply-cancel:focus, #buddypress .activity .activity-comments .ac-form .ac-reply-cancel:hover {
     448    #buddypress #activity-stream .activity-comments .ac-form .ac-reply-cancel:focus, #buddypress #activity-stream .activity-comments .ac-form .ac-reply-cancel:hover {
    395449      background: #ededed; }
    396450
    … …  
    416470*-----------------------------------------------------------
    417471*/
     472@media screen and (max-width: 46.25em) {
     473  .bp-user main header.entry-header, .single-item.groups main header.entry-header {
     474    padding-bottom: 1rem; } }
     475@media screen and (max-width: 38.75em) {
     476  .bp-user h1, .bp-user #item-header-content, .single-item.groups h1, .single-item.groups #item-header-content {
     477    text-align: center; } }
     478@media screen and (max-width: 46.25em) {
     479  .bp-user #buddypress #item-header .generic-button, .single-item.groups #buddypress #item-header .generic-button {
     480    float: none;
     481    margin: 1.5em 0 0 0; } }
     482@media screen and (max-width: 38.75em) {
     483  .bp-user #buddypress h1, .single-item.groups #buddypress h1 {
     484    margin-bottom: 0; }
     485  .bp-user #buddypress #item-header-avatar img.avatar, .single-item.groups #buddypress #item-header-avatar img.avatar {
     486    margin-right: 0; }
     487  .bp-user #buddypress #item-header-content, .single-item.groups #buddypress #item-header-content {
     488    width: 100%; } }
     489
    418490/**
    419491*-----------------------------------------------------
    … …  
    423495*-----------------------------------------------------
    424496*/
     497@media screen and (max-width: 46.25em) {
     498  .single-item.groups #buddypress #item-header #item-meta {
     499    margin-bottom: 20px; } }
    425500@media screen and (max-width: 38.75em) {
    426501  .single-item.groups #buddypress div#item-header {
    … …  
    523598.groups.edit-details #group-settings-form label {
    524599  background: #555;
     600  -webkit-border-top-right-radius: 4px;
    525601  border-top-right-radius: 4px;
     602  -webkit-border-top-left-radius: 4px;
    526603  border-top-left-radius: 4px;
    527604  background-clip: padding-box;
    … …  
    744821    margin: 10px 0 0 0;
    745822    padding: 0.3em; }
    746   .bp-user #buddypress table#message-threads .bulk-select-check, .bp-user #buddypress table#message-threads .thread-star {
    747     width: 10%; }
    748   .bp-user #buddypress table#message-threads .thread-star a {
    749     outline: none; }
    750   .bp-user #buddypress table#message-threads .thread-from, .bp-user #buddypress table#message-threads .thread-info {
    751     width: 30%; }
    752   .bp-user #buddypress table#message-threads .thread-options {
    753     width: 20%; }
    754   .bp-user #buddypress table#message-threads tr td {
    755     background: #ebf0ff; }
    756   .bp-user #buddypress table#message-threads tr.alt td {
    757     background: #dbe5ff; }
    758   .bp-user #buddypress table#message-threads tr.unread td {
    759     background: #cddaff;
    760     border-bottom: 1px solid #e4cdff;
    761     border-top: 1px solid #e4cdff; }
    762   .bp-user #buddypress table#message-threads tr.read td {
    763     background: #f7f7f7; }
     823  .bp-user #buddypress #message-thread #send-reply .message-content {
     824    background: #fff;
     825    border: 0; }
     826  .bp-user #buddypress #message-thread .alt {
     827    background: #fff; }
     828  .bp-user #buddypress #message-threads {
     829    display: block; }
     830    .bp-user #buddypress #message-threads thead tr {
     831      background: #6e6e6e; }
     832    .bp-user #buddypress #message-threads tr td {
     833      background: #fff;
     834      display: inline-block;
     835      float: left; }
     836    .bp-user #buddypress #message-threads tr td.thread-star, .bp-user #buddypress #message-threads tr td.thread-options {
     837      border-bottom-color: #ccc;
     838      border-bottom-width: 2px;
     839      height: 2.4em;
     840      padding-bottom: 0.2em;
     841      padding-top: 0.2em; }
     842      @media screen and (max-width: 46.25em) {
     843        .bp-user #buddypress #message-threads tr td.thread-star, .bp-user #buddypress #message-threads tr td.thread-options {
     844          padding-top: 0; } }
     845    .bp-user #buddypress #message-threads tr td.bulk-select-check, .bp-user #buddypress #message-threads tr td.thread-from {
     846      height: 2.6em; }
     847      @media screen and (max-width: 38.75em) {
     848        .bp-user #buddypress #message-threads tr td.bulk-select-check, .bp-user #buddypress #message-threads tr td.thread-from {
     849          height: 5.2em; } }
     850    .bp-user #buddypress #message-threads tr td.thread-from, .bp-user #buddypress #message-threads tr td.thread-options {
     851      border-left: 0 !important;
     852      width: -webkit-calc(100% - 30px);
     853      width: -moz-calc(100% - 30px);
     854      width: calc(100% - 30px);
     855      margin-left: 0; }
     856    .bp-user #buddypress #message-threads tr td.thread-info {
     857      padding-left: 41px;
     858      width: 100%; }
     859      .bp-user #buddypress #message-threads tr td.thread-info a::after {
     860        content: " \2013 \00a0" attr(title);
     861        font-size: 12px;
     862        font-size: 1.2rem; }
     863    .bp-user #buddypress #message-threads tr td.thread-options {
     864      text-align: right; }
     865      .bp-user #buddypress #message-threads tr td.thread-options a {
     866        font-size: 12px;
     867        font-size: 1.2rem;
     868        line-height: 2.2; }
     869    .bp-user #buddypress #message-threads tr span.from {
     870      display: none; }
     871    .bp-user #buddypress #message-threads tr span.activity {
     872      display: block;
     873      float: right;
     874      line-height: 2; }
     875      @media screen and (max-width: 38.75em) {
     876        .bp-user #buddypress #message-threads tr span.activity {
     877          clear: both;
     878          font-size: 11px;
     879          font-size: 1.1rem;
     880          width: 100%; } }
     881    .bp-user #buddypress #message-threads tr.unread td {
     882      background: #dce5ff;
     883      border-color: #999; }
     884    .bp-user #buddypress #message-threads th {
     885      display: none; }
     886    .bp-user #buddypress #message-threads th.bulk-select-all {
     887      border-bottom: 0;
     888      display: inline-block;
     889      text-align: left; }
     890    .bp-user #buddypress #message-threads th.bulk-select-all, .bp-user #buddypress #message-threads td.bulk-select-check, .bp-user #buddypress #message-threads td.thread-star {
     891      border-right: 0;
     892      width: 30px; }
    764893  .bp-user #buddypress .acfb-holder li.friend-tab {
    765894    margin-right: 0; }

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

    r9852 r9859  
    3636}
    3737
     38// To allow mixins to pass VendorPrefix scss-lint tests we disable lint-test
     39// for specific blocks / rulesets
     40// until such time as exemption lists can be built for the scss-lint.yml?
     41// Any vendor prefix properties / mixins need to be in this block
     42// scss-lint:disable VendorPrefix
     43
    3844// 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 
    4245@mixin border-radius($radius) {
    43 //  -webkit-border-radius: $radius;
    44 //  -moz-border-radius: $radius;
    45 //  -ms-border-radius: $radius;
     46    -webkit-border-radius: $radius;
     47    -moz-border-radius: $radius;
     48    -ms-border-radius: $radius;
    4649    border-radius: $radius;
    4750    background-clip: padding-box;
    … …  
    4952
    5053@mixin border-top-radius($radius) {
    51 //  -webkit-border-top-right-radius: $radius;
     54    -webkit-border-top-right-radius: $radius;
    5255    border-top-right-radius: $radius;
    53 //  -webkit-border-top-left-radius: $radius;
     56    -webkit-border-top-left-radius: $radius;
    5457    border-top-left-radius: $radius;
    5558    background-clip: padding-box;
    … …  
    5760
    5861@mixin border-right-radius($radius) {
    59 //  -webkit-border-bottom-right-radius: $radius;
     62    -webkit-border-bottom-right-radius: $radius;
    6063    border-bottom-right-radius: $radius;
    61 //  -webkit-border-top-right-radius: $radius;
     64    -webkit-border-top-right-radius: $radius;
    6265    border-top-right-radius: $radius;
    6366    background-clip: padding-box;
    … …  
    6568
    6669@mixin border-bottom-radius($radius) {
    67 //  -webkit-border-bottom-right-radius: $radius;
     70    -webkit-border-bottom-right-radius: $radius;
    6871    border-bottom-right-radius: $radius;
    69 //  -webkit-border-bottom-left-radius: $radius;
     72    -webkit-border-bottom-left-radius: $radius;
    7073    border-bottom-left-radius: $radius;
    7174    background-clip: padding-box;
    … …  
    7376
    7477@mixin border-left-radius($radius) {
    75 //  -webkit-border-bottom-left-radius: $radius;
     78    -webkit-border-bottom-left-radius: $radius;
    7679    border-bottom-left-radius: $radius;
    77 //  -webkit-border-top-left-radius: $radius;
     80    -webkit-border-top-left-radius: $radius;
    7881    border-top-left-radius: $radius;
    7982    background-clip: padding-box;
    … …  
    8285// Box sizing
    8386@mixin box-model($box-model) {
    84 //  -webkit-box-sizing: $box-model;
    85 //  -moz-box-sizing: $box-model;
     87    -webkit-box-sizing: $box-model;
     88    -moz-box-sizing: $box-model;
    8689    box-sizing: $box-model;
    8790}
     91
     92// Calc
     93@mixin calc($property, $expression) {
     94    #{$property}: -webkit-calc(#{$expression});
     95    #{$property}: -moz-calc(#{$expression});
     96    #{$property}: calc(#{$expression});
     97}
     98
     99// Re-enable the VendorPrefix lint test
     100// scss-lint:enable VendorPrefix
    88101
    89102// BP message boxes
    … …  
    94107}
    95108
    96 // Variabals: color definitions
     109// 2015 font family
     110@mixin default-font-sans() {
     111    font-family: "Noto Sans", sans-serif;
     112}
     113
     114@mixin default-font-serif() {
     115    font-family: "Noto Serif", serif;
     116}
     117
     118// Variables: color definitions
    97119$content-background: #fff;
    98120$light-background:   #f7f7f7;
    99121$medium-background:  #ccc;
    100122$dark-background:    #555;
    101 $border-color:       #999; // border color is varied using rgba
     123$border-color:       #999;    // border color is varied using rgba
    102124$border-light:       #eaeaea; // BP dividers
    103125$border-med:         #ddd;
    104 $body-text:          #333; // 2015 body text color
     126$body-text:          #333;    // 2015 body text color
    105127$bp-button-hover:    #ededed; // this is the default BP button hover background
    106128$notice-error:       #c85a6e;
    … …  
    110132$stripe-odd:         #ebf0ff;
    111133$stripe-even:        #dbe5ff;
    112 $unread:             #cddaff;
     134$unread:             #dce5ff;
    113135
    114136/*--------------------------------------------------------------
    … …  
    214236            .entry-header,
    215237            .entry-content {
    216                 padding: 0 2rem 2rem;
     238                padding: 0 3rem 3rem 3rem;
    217239            }
    218240
    … …  
    289311        ul {
    290312            background-color: $light-background;
    291             border-bottom: 1px solid rgba($border-color, 0.4);
     313            border-bottom: 1px solid rgba($border-light, 0.9);
     314            border-top: 1px solid rgba($border-light, 0.9);
    292315            overflow: hidden;
    293316            padding: $spacing-val-xs 0;
    … …  
    303326    /*__ Horizontal menus __*/
    304327    #object-nav {
     328
    305329        ul {
    306330            overflow: hidden;
    … …  
    314338                    float: left;
    315339                }
    316                 //  li:nth-child(1n+7) {clear: left;}
    317340            }
    318341        }
    … …  
    407430
    408431                    span {
     432                        background: $content-background;
    409433                        border-radius: 10%;
    410434                        float: right;
    411                         margin-right: 15px;
     435                        margin-right: 2px;
    412436                    }
    413437                }
    … …  
    418442            border-left: 1px solid $border-med;
    419443            overflow: hidden;
    420             padding: 0 $spacing-val-sm;
     444            padding: 0 0 0 $spacing-val-md;
    421445            width: auto;
    422446
    423447            #subnav {
    424                 margin: 0 (-$spacing-val-sm);
     448                margin: 0 0 0 (-$spacing-val-md);
    425449            }
    426450        }
    … …  
    477501*/
    478502
     503// Adjusts Meta items and various elements to match 2015 font-family
     504#buddypress {
     505    .item-list {
     506        .activity-header,
     507        .activity-meta {
     508            @include default-font-sans();
     509        }
     510    }
     511}
     512
    479513// Trying to position the action div absolute has bad consequences where
    480514// aditional items are displayed, floating is an alternative that
    … …  
    482516// This block:
    483517// * Manages li items, Stacks them small screen, floated left at wider screens.
    484 // * Adjusts display of action buttons at small screen
    485 // mobile up.
     518// * Adjusts display of action buttons at small screen mobile up.
     519// Adjusts Meta items to match 2015 font-family
    486520
    487521#buddypress {
    … …  
    489523        li {
    490524            overflow: hidden !important;
     525
    491526            // Undo BP floats to center avatars initially mobile up
    492527            .item-avatar {
    … …  
    672707#buddypress {
    673708
    674     .activity-list {
    675 
    676         // re-size activity avatars
     709    #activity-stream {
     710
     711        // re-size activity avatars and stack small screen
     712        // refactor main elements positioning medium up.
    677713        li {
     714            padding: 25px 0 15px;
     715
    678716            .activity-avatar {
     717                float: none;
     718                text-align: center;
     719
    679720                a {
     721                    display: inline-block;
     722
    680723                    img.avatar {
     724                        display: inline;
     725                        float: none;
    681726                        height: 60px;
     727                        margin-bottom: $spacing-val-md;
    682728                        margin-left: 0;
    683729                        width: 60px;
    684730                    }
    685731                }
    686             }
    687         }
     732            } // close .activity-avatar
     733
     734            .activity-content {
     735                margin-left: 0;
     736
     737                .activity-header {
     738                    @include font-size(14);
     739                }
     740            }
     741
     742            @media screen and (min-width: 46.25em) {
     743
     744                .activity-avatar {
     745                    float: left;
     746                    margin-right: $spacing-val-sm;
     747                    text-align: left;
     748                    a {border-bottom: 0;}
     749                }
     750
     751                .activity-content {
     752                    margin: 0;
     753                    overflow: hidden;
     754
     755                    .activity-header {
     756                        @include font-size(16);
     757                    }
     758                }
     759
     760            } // close @media
     761
     762        } // close li
    688763
    689764        li.mini {
    … …  
    709784
    710785            .activity-header {
    711                 @include font-size(16);
    712786                line-height: inherit;
    713787                margin-right: 0;
    … …  
    724798                }
    725799            } // close .activity-header
     800
    726801            .activity-meta {
    727802                a {
    … …  
    737812        } // close .activity-content
    738813
    739         .load-more a {display: block;}
    740 
    741     } // close .activity-list
     814        .load-more {
     815            background: $light-background;
     816            border: 1px solid transparent;
     817            padding: $spacing-val-sm;
     818
     819            &:focus,
     820            &:hover {
     821                background: darken($light-background, 1%);
     822                border: 1px solid rgba(#9fd1e2, 0.3);
     823                a { font-style: italic; }
     824            }
     825
     826            a {
     827                display: block;
     828            }
     829        }
     830
     831    } // close #activity-stream
    742832} // close #buddypress
     833
     834/* Single activity view  - activity permalink */
     835
     836.activity-permalink {
     837    #buddypress {
     838        #activity-stream {
     839
     840            li.activity-item {
     841                padding: $spacing-val-md;
     842            }
     843
     844            li.mini {
     845                .activity-header {
     846                    @include font-size(16);
     847                    @media screen and (min-width: 46.25em) {
     848                        @include font-size(20);
     849                    }
     850                    margin-bottom: $spacing-val-lg;
     851                    p {padding: $spacing-val-md;}
     852                }
     853            }
     854        }
     855    }
     856}
    743857
    744858/**
    … …  
    748862*/
    749863#buddypress {
    750     .activity {
     864
     865    #activity-stream {
    751866        .activity-comments {
    752867            border-left: 1px solid $border-light;
    … …  
    755870            ul {
    756871                background: rgba($light-background, 0.6);
    757                 margin: 30px 0 0 2px;
     872                margin: 15px 0 0 2px;
    758873            }
    759874
    … …  
    828943*/
    829944
     945.bp-user,
     946.single-item.groups {
     947    @media screen and (max-width: 46.25em) {
     948        main {
     949            header.entry-header {
     950                padding-bottom: 1rem;
     951            }
     952        }
     953    }
     954
     955    @media screen and (max-width: 38.75em) {
     956        h1,
     957        #item-header-content {
     958            text-align: center;
     959        }
     960    }
     961
     962    #buddypress {
     963        @media screen and (max-width: 46.25em) {
     964            #item-header {
     965                .generic-button {
     966                    float: none;
     967                    margin: 1.5em 0 0 0;
     968                }
     969            }
     970        }
     971
     972        @media screen and (max-width: 38.75em) {
     973            h1 {
     974                margin-bottom: 0;
     975            }
     976
     977            #item-header-avatar {
     978                img.avatar {
     979                    margin-right: 0;
     980                }
     981            }
     982
     983            #item-header-content {
     984                width: 100%;
     985            }
     986        }
     987    }
     988}
     989
    830990/**
    831991*-----------------------------------------------------
    … …  
    838998.single-item.groups {
    839999    #buddypress {
     1000        @media screen and (max-width: 46.25em) {
     1001            #item-header {
     1002                #item-meta {
     1003                    margin-bottom: $spacing-val-md;
     1004                }
     1005            }
     1006        }
    8401007
    8411008        // Move visual flow of avatar & item-actions at narrow width,
    … …  
    11011268        li {
    11021269            @media screen and (max-width: 38.75em) {
    1103                 background: #fff;
     1270                background: $content-background;
    11041271                padding: $spacing-val-md 0;
    11051272            }
    … …  
    13241491                    position: static;
    13251492                }
    1326             }
     1493            } // close .message-meta
    13271494
    13281495            .message-content {
    … …  
    13321499                padding: 0.3em;
    13331500            }
    1334         }
    1335 
    1336         table#message-threads {
    1337 
    1338             .bulk-select-check,
    1339             .thread-star {
    1340                 width: 10%;
    1341             }
    1342 
    1343             .thread-star a {
    1344                 outline: none;
    1345             }
    1346 
    1347             .thread-from,
    1348             .thread-info {
    1349                 width: 30%;
    1350             }
    1351 
    1352             .thread-options {
    1353                 width: 20%;
     1501
     1502            #send-reply {
     1503                .message-content {
     1504                    background: $content-background;
     1505                    border: 0;
     1506                }
     1507            }
     1508
     1509            .alt {
     1510                background: $content-background;
     1511            }
     1512
     1513        } // close message-thread  Singular view!
     1514
     1515        #message-threads {
     1516            display: block;
     1517
     1518            thead {
     1519                tr {
     1520                    background: lighten($dark-background, 10%);
     1521                }
    13541522            }
    13551523
    13561524            tr {
    1357 
    13581525                td {
    1359                     background: $stripe-odd;
    1360                 }
    1361             }
    1362 
    1363             tr.alt {
    1364                 td {
    1365                     background: $stripe-even;
     1526                    background: $content-background;
     1527                    display: inline-block;
     1528                    float: left;
     1529                }
     1530
     1531                td.thread-star,
     1532                td.thread-options {
     1533                    border-bottom-color: $medium-background;
     1534                    border-bottom-width: 2px;
     1535                    height: 2.4em;
     1536                    padding-bottom: 0.2em;
     1537                    padding-top: 0.2em;
     1538
     1539                    @media screen and (max-width: 46.25em) {
     1540                        padding-top: 0;
     1541                    }
     1542                }
     1543
     1544                td.bulk-select-check,
     1545                td.thread-from {
     1546                    height: 2.6em;
     1547                    @media screen and (max-width: 38.75em) {
     1548                        height: 5.2em;
     1549                    }
     1550                }
     1551
     1552                td.thread-from,
     1553                td.thread-options {
     1554                    border-left: 0 !important;
     1555                    @include calc(width, "100% - 30px");
     1556                    margin-left: 0;
     1557                }
     1558
     1559                td.thread-info {
     1560                    padding-left: 41px;
     1561                    width: 100%;
     1562
     1563                    a::after {
     1564                        content: " \2013 \00a0"attr(title);
     1565                        @include font-size(12);
     1566                    }
     1567                }
     1568
     1569                td.thread-options {
     1570                    text-align: right;
     1571
     1572                    a {
     1573                        @include font-size(12);
     1574                        line-height: 2.2;
     1575                    }
     1576                }
     1577
     1578                span.from {
     1579                    display: none;
     1580                }
     1581
     1582                span.activity {
     1583                    display: block;
     1584                    float: right;
     1585                    line-height: 2;
     1586                    @media screen and (max-width: 38.75em) {
     1587                        clear: both;
     1588                        @include font-size(11);
     1589                        width: 100%;
     1590                    }
    13661591                }
    13671592            }
    … …  
    13701595                td {
    13711596                    background: $unread;
    1372                     border-bottom: 1px solid #e4cdff;
    1373                     border-top: 1px solid #e4cdff;
    1374                 }
    1375             }
    1376 
    1377             tr.read {
    1378                 td {
    1379                     background: $light-background;
    1380                 }
     1597                    border-color: $border-color;
     1598                }
     1599            }
     1600
     1601            th {
     1602                display: none;
     1603            }
     1604
     1605            th.bulk-select-all {
     1606                border-bottom: 0;
     1607                display: inline-block;
     1608                text-align: left;
     1609            }
     1610
     1611            th.bulk-select-all,
     1612            td.bulk-select-check,
     1613            td.thread-star {
     1614                border-right: 0;
     1615                width: 30px;
    13811616            }
    13821617        }
Note: See TracChangeset for help on using the changeset viewer.