Skip to:
Content

Changeset 9864


Ignore:
Timestamp:
05/12/2015 03:23:45 PM (3 years ago)
Author:
hnla
Message:

Updates to twentyfourteen companion styles

  • Update message-box mixin, use default text-color based on background selected if no arg passed for color, remove set color args.
  • Add override clear none to counter themes heading clearing.
  • Update group members list display general & mobile.
  • Update users/groups headers, global styles, correct messages rendering in header area.
  • Update group-member-search for style and mobile rendering.

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

    r9861 r9864  
    5353*-------------------------------------------------------------------------------
    5454*/
     55#buddypress h1, #buddypress h2, #buddypress h3, #buddypress h4, #buddypress h5, #buddypress h6 {
     56  clear: none; }
     57
    5558.buddypress .site-content {
    5659  padding-top: 4%; }
    … …  
    209212    float: none;
    210213    width: 100%; }
     214  #buddypress ul.item-list li .item {
     215    margin-right: 0; }
    211216  #buddypress ul.item-list li div.item-desc {
    212217    margin-right: 0;
    213218    width: auto; }
    214219  #buddypress ul.item-list li div.action {
     220    clear: both;
     221    float: none;
     222    margin: 0;
    215223    position: relative;
    216     text-align: right;
    217     top: 0; }
     224    text-align: right; }
    218225    #buddypress ul.item-list li div.action div {
    219226      margin: 0 0 10px; }
    … …  
    229236    #buddypress ul.item-list li .item {
    230237      float: left;
     238      margin-right: 5%;
    231239      width: 80%; }
    232     #buddypress ul.item-list li .activity-meta, #buddypress ul.item-list li .action {
     240    #buddypress ul.item-list li .activity-meta {
    233241      clear: both; }
    234       #buddypress ul.item-list li .activity-meta a, #buddypress ul.item-list li .activity-meta div, #buddypress ul.item-list li .action a, #buddypress ul.item-list li .action div {
     242      #buddypress ul.item-list li .activity-meta a, #buddypress ul.item-list li .activity-meta div {
    235243        display: inline-block;
    236244        margin: 5px 0 0 5px; } }
    … …  
    238246    #buddypress ul.item-list li .item {
    239247      float: right;
    240       margin-right: 5%;
    241248      width: 60%; }
    242249      #buddypress ul.item-list li .item div.item-desc {
    243250        margin: 0;
    244251        width: auto; }
    245     #buddypress ul.item-list li .action {
     252    #buddypress ul.item-list li div.action {
    246253      clear: none;
    247254      float: left;
     255      top: 0;
    248256      width: 25%; }
    249       #buddypress ul.item-list li .action div {
     257      #buddypress ul.item-list li div.action div {
    250258        display: block; }
    251         #buddypress ul.item-list li .action div a {
     259        #buddypress ul.item-list li div.action div a {
    252260          -webkit-box-sizing: border-box;
    253261          -moz-box-sizing: border-box;
    … …  
    255263          display: block;
    256264          width: 100%; }
    257       #buddypress ul.item-list li .action .meta {
     265      #buddypress ul.item-list li div.action .meta {
    258266        text-align: center; } }
    259267  #buddypress ul.item-list li .meta, #buddypress ul.item-list li .item-meta .activity {
    … …  
    424432*------------------------------------------------------------
    425433*/
     434#buddypress div#item-header {
     435  padding-bottom: 10px; }
     436  #buddypress div#item-header img.avatar {
     437    margin: 0 0 10px 20px; }
     438  #buddypress div#item-header #message {
     439    clear: both;
     440    margin-bottom: 5px;
     441    padding-top: 20px; }
     442    #buddypress div#item-header #message p {
     443      margin-bottom: 0; }
     444
    426445/**
    427446*-------------------------------------------------
    … …  
    455474.single-item.groups #buddypress #item-header #item-actions {
    456475  float: none;
     476  margin: 0 20px 0 0;
    457477  width: auto; }
    458478  .single-item.groups #buddypress #item-header #item-actions h3 {
    … …  
    478498*-------------------------------------------------
    479499*/
    480 .bp-user #buddypress #item-header {
    481   padding-bottom: 10px; }
     500.bp-user #buddypress #item-header #item-header-avatar {
     501  text-align: center;
     502  width: 100%; }
     503  .bp-user #buddypress #item-header #item-header-avatar img {
     504    float: none; }
     505.bp-user #buddypress #item-header #latest-update {
     506  margin-bottom: 10px; }
     507@media screen and (max-width: 594px) {
     508  .bp-user #buddypress #item-header #item-buttons div.generic-button {
     509    display: inline-block;
     510    float: none;
     511    margin: 0 0 5px 0;
     512    width: 100%; }
     513    .bp-user #buddypress #item-header #item-buttons div.generic-button a {
     514      -webkit-box-sizing: border-box;
     515      -moz-box-sizing: border-box;
     516      box-sizing: border-box;
     517      display: block;
     518      width: 100%; } }
     519@media screen and (min-width: 673px) {
    482520  .bp-user #buddypress #item-header #item-header-avatar {
    483     text-align: center;
    484     width: 100%; }
     521    float: right;
     522    overflow: hidden;
     523    text-align: right;
     524    width: 20%; }
    485525    .bp-user #buddypress #item-header #item-header-avatar img {
    486       float: none; }
    487   .bp-user #buddypress #item-header #latest-update {
    488     margin-bottom: 10px; }
    489   @media screen and (max-width: 594px) {
    490     .bp-user #buddypress #item-header #item-buttons div.generic-button {
    491       display: inline-block;
    492       float: none;
    493       margin: 0 0 5px 0;
    494       width: 100%; }
    495       .bp-user #buddypress #item-header #item-buttons div.generic-button a {
    496         -webkit-box-sizing: border-box;
    497         -moz-box-sizing: border-box;
    498         box-sizing: border-box;
    499         display: block;
    500         width: 100%; } }
    501   @media screen and (min-width: 673px) {
    502     .bp-user #buddypress #item-header #item-header-avatar {
    503       float: right;
    504       overflow: hidden;
    505       text-align: right;
    506       width: 20%; }
    507       .bp-user #buddypress #item-header #item-header-avatar img {
    508         margin: 0; }
    509     .bp-user #buddypress #item-header #item-header-content {
    510       float: left;
    511       width: 78%; }
    512       .bp-user #buddypress #item-header #item-header-content #latest-update {
    513         margin-bottom: 20px; } }
     526      margin: 0; }
     527  .bp-user #buddypress #item-header #item-header-content {
     528    float: left;
     529    width: 78%; }
     530    .bp-user #buddypress #item-header #item-header-content #latest-update {
     531      margin-bottom: 20px; } }
    514532
    515533/**
    … …  
    558576    .groups.manage-members #group-settings-form .item-list li h5 {
    559577      margin: 0; }
     578
     579/**
     580    *------------------------------
     581    * 6.2.1.2 - Group members list
     582    *------------------------------
     583    */
     584#buddypress #members-group-list .item-list h5 {
     585  display: inline-block;
     586  margin: 0; }
     587#buddypress #members-group-list .item-list span.activity {
     588  padding-right: 10px; }
     589
     590#buddypress #item-body #subnav li.groups-members-search:focus, #buddypress #item-body #subnav li.groups-members-search:hover, #buddypress #item-body #subnav li.last:focus, #buddypress #item-body #subnav li.last:hover {
     591  background: none; }
     592
     593.groups.group-members #subnav ul:before, .groups.group-members #subnav ul:after {
     594  content: " ";
     595  display: table; }
     596.groups.group-members #subnav ul:after {
     597  clear: both; }
     598.groups.group-members #subnav ul {
     599  padding: 5px 0; }
     600@media screen and (max-width: 400px) {
     601  .groups.group-members #subnav li {
     602    background: #fff;
     603    padding: 10px 0;
     604    width: 100% !important; } }
     605.groups.group-members #subnav li #search-members-form {
     606  -webkit-box-sizing: border-box;
     607  -moz-box-sizing: border-box;
     608  box-sizing: border-box;
     609  float: right; }
     610  @media screen and (max-width: 400px) {
     611    .groups.group-members #subnav li #search-members-form {
     612      margin: 0;
     613      width: 100%; }
     614      .groups.group-members #subnav li #search-members-form label input[type="text"] {
     615        width: 100%; } }
     616  @media screen and (min-width: 783px) {
     617    .groups.group-members #subnav li #search-members-form {
     618      margin-right: 3px; } }
    560619
    561620/**
    … …  
    691750    border: 0; }
    692751
    693 #buddypress div.dir-search, #buddypress div.message-search {
     752#buddypress div.dir-search, #buddypress div.message-search, #buddypress li.groups-members-search {
    694753  clear: both;
    695754  float: none;
    696755  margin: 10px 0; }
    697   #buddypress div.dir-search form, #buddypress div.message-search form {
     756  #buddypress div.dir-search form, #buddypress div.message-search form, #buddypress li.groups-members-search form {
    698757    border: 1px solid #ccc;
    699758    overflow: hidden; }
    700     #buddypress div.dir-search form label, #buddypress div.message-search form label {
     759    #buddypress div.dir-search form label, #buddypress div.message-search form label, #buddypress li.groups-members-search form label {
    701760      float: right;
    702761      width: 80%; }
    703     #buddypress div.dir-search form input[type='text'], #buddypress div.message-search form input[type='text'] {
     762    #buddypress div.dir-search form input[type='text'], #buddypress div.message-search form input[type='text'], #buddypress li.groups-members-search form input[type='text'] {
    704763      float: right;
    705764      margin: 0;
    706765      width: 80%; }
    707     #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'] {
     766    #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'], #buddypress li.groups-members-search form input[type='text'], #buddypress li.groups-members-search form input[type='submit'] {
    708767      border: 0;
    709768      font-size: 14px;
    710769      font-size: 0.875rem;
    711770      line-height: inherit; }
    712     #buddypress div.dir-search form input[type='text'], #buddypress div.message-search form input[type='text'] {
     771    #buddypress div.dir-search form input[type='text'], #buddypress div.message-search form input[type='text'], #buddypress li.groups-members-search form input[type='text'] {
    713772      border-left: 1px solid #ccc;
    714773      padding: 0.2em 0.2em 0.2em 0; }
    715     #buddypress div.dir-search form input[type='submit'], #buddypress div.message-search form input[type='submit'] {
     774    #buddypress div.dir-search form input[type='submit'], #buddypress div.message-search form input[type='submit'], #buddypress li.groups-members-search form input[type='submit'] {
    716775      float: left;
    717776      font-weight: normal;
    … …  
    727786      width: auto; }
    728787  #buddypress div.message-search {
    729     margin: 3px 0 0; } }
     788    margin: 3px 0 0; }
     789  #buddypress li.groups-members-search form label, #buddypress li.groups-members-search form input[type='submit'], #buddypress li.groups-members-search form input[type='text'] {
     790    width: auto; } }
    730791
    731792/**
    … …  
    747808  background: #c6e4ee;
    748809  border: 1px solid #78bed6;
    749   color: #fff; }
     810  color: #1e5264; }
    750811#buddypress div#message.updated p {
    751812  background: #dee6b2;
    752813  border: 1px solid #becc66;
    753   color: #fff; }
     814  color: #454d19; }
    754815
    755816.delete-group #buddypress div#message.info p {
    756817  background: #db7e7e;
    757818  border: 1px solid #be3535;
    758   color: #fff; }
     819  color: #1f0808; }
    759820
    760821/**

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

    r9861 r9864  
    5353*-------------------------------------------------------------------------------
    5454*/
     55#buddypress h1, #buddypress h2, #buddypress h3, #buddypress h4, #buddypress h5, #buddypress h6 {
     56  clear: none; }
     57
    5558.buddypress .site-content {
    5659  padding-top: 4%; }
    … …  
    209212    float: none;
    210213    width: 100%; }
     214  #buddypress ul.item-list li .item {
     215    margin-left: 0; }
    211216  #buddypress ul.item-list li div.item-desc {
    212217    margin-left: 0;
    213218    width: auto; }
    214219  #buddypress ul.item-list li div.action {
     220    clear: both;
     221    float: none;
     222    margin: 0;
    215223    position: relative;
    216     text-align: left;
    217     top: 0; }
     224    text-align: left; }
    218225    #buddypress ul.item-list li div.action div {
    219226      margin: 0 0 10px; }
    … …  
    229236    #buddypress ul.item-list li .item {
    230237      float: right;
     238      margin-left: 5%;
    231239      width: 80%; }
    232     #buddypress ul.item-list li .activity-meta, #buddypress ul.item-list li .action {
     240    #buddypress ul.item-list li .activity-meta {
    233241      clear: both; }
    234       #buddypress ul.item-list li .activity-meta a, #buddypress ul.item-list li .activity-meta div, #buddypress ul.item-list li .action a, #buddypress ul.item-list li .action div {
     242      #buddypress ul.item-list li .activity-meta a, #buddypress ul.item-list li .activity-meta div {
    235243        display: inline-block;
    236244        margin: 5px 5px 0 0; } }
    … …  
    238246    #buddypress ul.item-list li .item {
    239247      float: left;
    240       margin-left: 5%;
    241248      width: 60%; }
    242249      #buddypress ul.item-list li .item div.item-desc {
    243250        margin: 0;
    244251        width: auto; }
    245     #buddypress ul.item-list li .action {
     252    #buddypress ul.item-list li div.action {
    246253      clear: none;
    247254      float: right;
     255      top: 0;
    248256      width: 25%; }
    249       #buddypress ul.item-list li .action div {
     257      #buddypress ul.item-list li div.action div {
    250258        display: block; }
    251         #buddypress ul.item-list li .action div a {
     259        #buddypress ul.item-list li div.action div a {
    252260          -webkit-box-sizing: border-box;
    253261          -moz-box-sizing: border-box;
    … …  
    255263          display: block;
    256264          width: 100%; }
    257       #buddypress ul.item-list li .action .meta {
     265      #buddypress ul.item-list li div.action .meta {
    258266        text-align: center; } }
    259267  #buddypress ul.item-list li .meta, #buddypress ul.item-list li .item-meta .activity {
    … …  
    424432*------------------------------------------------------------
    425433*/
     434#buddypress div#item-header {
     435  padding-bottom: 10px; }
     436  #buddypress div#item-header img.avatar {
     437    margin: 0 20px 10px 0; }
     438  #buddypress div#item-header #message {
     439    clear: both;
     440    margin-bottom: 5px;
     441    padding-top: 20px; }
     442    #buddypress div#item-header #message p {
     443      margin-bottom: 0; }
     444
    426445/**
    427446*-------------------------------------------------
    … …  
    455474.single-item.groups #buddypress #item-header #item-actions {
    456475  float: none;
     476  margin: 0 0 0 20px;
    457477  width: auto; }
    458478  .single-item.groups #buddypress #item-header #item-actions h3 {
    … …  
    478498*-------------------------------------------------
    479499*/
    480 .bp-user #buddypress #item-header {
    481   padding-bottom: 10px; }
     500.bp-user #buddypress #item-header #item-header-avatar {
     501  text-align: center;
     502  width: 100%; }
     503  .bp-user #buddypress #item-header #item-header-avatar img {
     504    float: none; }
     505.bp-user #buddypress #item-header #latest-update {
     506  margin-bottom: 10px; }
     507@media screen and (max-width: 594px) {
     508  .bp-user #buddypress #item-header #item-buttons div.generic-button {
     509    display: inline-block;
     510    float: none;
     511    margin: 0 0 5px 0;
     512    width: 100%; }
     513    .bp-user #buddypress #item-header #item-buttons div.generic-button a {
     514      -webkit-box-sizing: border-box;
     515      -moz-box-sizing: border-box;
     516      box-sizing: border-box;
     517      display: block;
     518      width: 100%; } }
     519@media screen and (min-width: 673px) {
    482520  .bp-user #buddypress #item-header #item-header-avatar {
    483     text-align: center;
    484     width: 100%; }
     521    float: left;
     522    overflow: hidden;
     523    text-align: left;
     524    width: 20%; }
    485525    .bp-user #buddypress #item-header #item-header-avatar img {
    486       float: none; }
    487   .bp-user #buddypress #item-header #latest-update {
    488     margin-bottom: 10px; }
    489   @media screen and (max-width: 594px) {
    490     .bp-user #buddypress #item-header #item-buttons div.generic-button {
    491       display: inline-block;
    492       float: none;
    493       margin: 0 0 5px 0;
    494       width: 100%; }
    495       .bp-user #buddypress #item-header #item-buttons div.generic-button a {
    496         -webkit-box-sizing: border-box;
    497         -moz-box-sizing: border-box;
    498         box-sizing: border-box;
    499         display: block;
    500         width: 100%; } }
    501   @media screen and (min-width: 673px) {
    502     .bp-user #buddypress #item-header #item-header-avatar {
    503       float: left;
    504       overflow: hidden;
    505       text-align: left;
    506       width: 20%; }
    507       .bp-user #buddypress #item-header #item-header-avatar img {
    508         margin: 0; }
    509     .bp-user #buddypress #item-header #item-header-content {
    510       float: right;
    511       width: 78%; }
    512       .bp-user #buddypress #item-header #item-header-content #latest-update {
    513         margin-bottom: 20px; } }
     526      margin: 0; }
     527  .bp-user #buddypress #item-header #item-header-content {
     528    float: right;
     529    width: 78%; }
     530    .bp-user #buddypress #item-header #item-header-content #latest-update {
     531      margin-bottom: 20px; } }
    514532
    515533/**
    … …  
    558576    .groups.manage-members #group-settings-form .item-list li h5 {
    559577      margin: 0; }
     578
     579/**
     580    *------------------------------
     581    * 6.2.1.2 - Group members list
     582    *------------------------------
     583    */
     584#buddypress #members-group-list .item-list h5 {
     585  display: inline-block;
     586  margin: 0; }
     587#buddypress #members-group-list .item-list span.activity {
     588  padding-left: 10px; }
     589
     590#buddypress #item-body #subnav li.groups-members-search:focus, #buddypress #item-body #subnav li.groups-members-search:hover, #buddypress #item-body #subnav li.last:focus, #buddypress #item-body #subnav li.last:hover {
     591  background: none; }
     592
     593.groups.group-members #subnav ul:before, .groups.group-members #subnav ul:after {
     594  content: " ";
     595  display: table; }
     596.groups.group-members #subnav ul:after {
     597  clear: both; }
     598.groups.group-members #subnav ul {
     599  padding: 5px 0; }
     600@media screen and (max-width: 400px) {
     601  .groups.group-members #subnav li {
     602    background: #fff;
     603    padding: 10px 0;
     604    width: 100% !important; } }
     605.groups.group-members #subnav li #search-members-form {
     606  -webkit-box-sizing: border-box;
     607  -moz-box-sizing: border-box;
     608  box-sizing: border-box;
     609  float: left; }
     610  @media screen and (max-width: 400px) {
     611    .groups.group-members #subnav li #search-members-form {
     612      margin: 0;
     613      width: 100%; }
     614      .groups.group-members #subnav li #search-members-form label input[type="text"] {
     615        width: 100%; } }
     616  @media screen and (min-width: 783px) {
     617    .groups.group-members #subnav li #search-members-form {
     618      margin-left: 3px; } }
    560619
    561620/**
    … …  
    691750    border: 0; }
    692751
    693 #buddypress div.dir-search, #buddypress div.message-search {
     752#buddypress div.dir-search, #buddypress div.message-search, #buddypress li.groups-members-search {
    694753  clear: both;
    695754  float: none;
    696755  margin: 10px 0; }
    697   #buddypress div.dir-search form, #buddypress div.message-search form {
     756  #buddypress div.dir-search form, #buddypress div.message-search form, #buddypress li.groups-members-search form {
    698757    border: 1px solid #ccc;
    699758    overflow: hidden; }
    700     #buddypress div.dir-search form label, #buddypress div.message-search form label {
     759    #buddypress div.dir-search form label, #buddypress div.message-search form label, #buddypress li.groups-members-search form label {
    701760      float: left;
    702761      width: 80%; }
    703     #buddypress div.dir-search form input[type='text'], #buddypress div.message-search form input[type='text'] {
     762    #buddypress div.dir-search form input[type='text'], #buddypress div.message-search form input[type='text'], #buddypress li.groups-members-search form input[type='text'] {
    704763      float: left;
    705764      margin: 0;
    706765      width: 80%; }
    707     #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'] {
     766    #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'], #buddypress li.groups-members-search form input[type='text'], #buddypress li.groups-members-search form input[type='submit'] {
    708767      border: 0;
    709768      font-size: 14px;
    710769      font-size: 0.875rem;
    711770      line-height: inherit; }
    712     #buddypress div.dir-search form input[type='text'], #buddypress div.message-search form input[type='text'] {
     771    #buddypress div.dir-search form input[type='text'], #buddypress div.message-search form input[type='text'], #buddypress li.groups-members-search form input[type='text'] {
    713772      border-right: 1px solid #ccc;
    714773      padding: 0.2em 0 0.2em 0.2em; }
    715     #buddypress div.dir-search form input[type='submit'], #buddypress div.message-search form input[type='submit'] {
     774    #buddypress div.dir-search form input[type='submit'], #buddypress div.message-search form input[type='submit'], #buddypress li.groups-members-search form input[type='submit'] {
    716775      float: right;
    717776      font-weight: normal;
    … …  
    727786      width: auto; }
    728787  #buddypress div.message-search {
    729     margin: 3px 0 0; } }
     788    margin: 3px 0 0; }
     789  #buddypress li.groups-members-search form label, #buddypress li.groups-members-search form input[type='submit'], #buddypress li.groups-members-search form input[type='text'] {
     790    width: auto; } }
    730791
    731792/**
    … …  
    747808  background: #c6e4ee;
    748809  border: 1px solid #78bed6;
    749   color: #fff; }
     810  color: #1e5264; }
    750811#buddypress div#message.updated p {
    751812  background: #dee6b2;
    752813  border: 1px solid #becc66;
    753   color: #fff; }
     814  color: #454d19; }
    754815
    755816.delete-group #buddypress div#message.info p {
    756817  background: #db7e7e;
    757818  border: 1px solid #be3535;
    758   color: #fff; }
     819  color: #1f0808; }
    759820
    760821/**

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

    r9861 r9864  
    103103
    104104// BP message boxes
    105 @mixin message-box($background, $text-color: inherit) {
     105@mixin message-box($background, $text-color: null) {
     106
     107    @if($text-color) {
     108        // if a param was passed through
     109        $text-color: $text-color;
     110    } @else {
     111        $text-color: darken($background, 50%);
     112    }
     113
    106114    background: lighten($background, 10%);
    107115    border: 1px solid darken($background, 10%);
    … …  
    194202*/
    195203
     204// Twentyfourteen  adds a generic grouped ruleset of clear:both;
     205// for all heading h# elements this is problematic where floats are concerned
     206// We reset this here under our #buddypress namespace
     207#buddypress {
     208    h1,
     209    h2,
     210    h3,
     211    h4,
     212    h5,
     213    h6 {
     214        clear: none;
     215    }
     216}
     217
    196218// As BP screens have specific content lets adjust the themes primary elements
    197219// to maximise the screen real estate for BP pages.
    … …  
    502524            }
    503525
     526            .item {
     527                margin-left: 0;
     528            }
     529
    504530            // groups group description
    505531            div.item-desc {
    … …  
    509535
    510536            div.action {
     537                clear: both;
     538                float: none;
     539                margin: 0;
    511540                position: relative;
    512541                text-align: left;
    513                 top: 0;
    514542
    515543                div {
    … …  
    540568                .item {
    541569                    float: right;
     570                    margin-left: 5%;
    542571                    width: 80%;
    543572                }
    544573
    545                 .activity-meta,
    546                 .action {
     574                .activity-meta {
    547575                    clear: both;
    548576
    … …  
    558586                .item {
    559587                    float: left;
    560                     margin-left: 5%;
    561588                    width: 60%;
    562589
    … …  
    567594                }
    568595
    569                 .action {
     596                div.action {
    570597                    clear: none;
    571598                    float: right;
     599                    top: 0;
    572600                    width: 25%;
    573601
    … …  
    875903*------------------------------------------------------------
    876904*/
     905// override BP margins - users/groups manage their own styles later on
     906#buddypress {
     907    div#item-header {
     908        padding-bottom: $spacing-val-sm;
     909
     910        img.avatar {
     911            margin: 0 $spacing-val-md $spacing-val-sm 0;
     912        }
     913
     914        // Prevent messages block abutting bottom of floats, with padding-top
     915        #message {
     916            clear: both;
     917            margin-bottom: $spacing-val-xs;
     918            padding-top: $spacing-val-md;
     919
     920            p {margin-bottom: 0;}
     921        }
     922    }
     923}
    877924
    878925/**
    … …  
    930977            #item-actions {
    931978                float: none;
     979                margin: 0 0 0 $spacing-val-md;
    932980                width: auto;
    933981
    … …  
    9731021.bp-user #buddypress {
    9741022    #item-header {
    975         padding-bottom: $spacing-val-sm;
    9761023
    9771024        #item-header-avatar {
    … …  
    10971144/**
    10981145    *------------------------------
     1146    * 6.2.1.2 - Group members list
     1147    *------------------------------
     1148    */
     1149
     1150#buddypress {
     1151    #members-group-list {
     1152        .item-list {
     1153            h5 {
     1154                display: inline-block;
     1155                margin: 0;
     1156            }
     1157
     1158            span.activity {
     1159                padding-left: $spacing-val-sm;
     1160            }
     1161        }
     1162    }
     1163} // close #buddypress
     1164
     1165#buddypress {
     1166    #item-body {
     1167        #subnav {
     1168            li.groups-members-search:focus,
     1169            li.groups-members-search:hover,
     1170            li.last:focus,
     1171            li.last:hover {
     1172                background: none;
     1173            }
     1174        }
     1175    }
     1176}
     1177
     1178// Need to target groups members via body classes
     1179.groups.group-members {
     1180    #subnav {
     1181
     1182        ul:before,
     1183        ul:after {
     1184            content: " ";
     1185            display: table;
     1186        }
     1187
     1188        ul:after {clear: both; }
     1189
     1190        ul {
     1191            padding: $spacing-val-xs 0;
     1192        }
     1193
     1194
     1195        li {
     1196
     1197            @media screen and (max-width: 400px) {
     1198                background: $content-background;
     1199                padding: $spacing-val-sm 0;
     1200                width: 100% !important;
     1201            }
     1202
     1203            #search-members-form {
     1204                @include box-model(border-box);
     1205                float: left;
     1206                @media screen and (max-width: 400px) {
     1207                    margin: 0;
     1208                    width: 100%;
     1209
     1210                    label {
     1211                        input[type="text"] {width: 100%;}
     1212                    }
     1213                }
     1214                @media screen and (min-width: 783px) {
     1215                    margin-left: 3px;
     1216                }
     1217            }
     1218
     1219        }
     1220
     1221    } // close #subnav
     1222} // close .groups.group-members
     1223
     1224/**
     1225    *------------------------------
    10991226    * 6.2.1.3 - Groups Send Invites
    11001227    *------------------------------
    … …  
    13491476#buddypress {
    13501477    div.dir-search,
    1351     div.message-search {
     1478    div.message-search,
     1479    li.groups-members-search {
    13521480        clear: both;
    13531481        float: none;
    … …  
    14131541
    14141542        div.message-search { margin: 3px 0 0;}
     1543
     1544        li.groups-members-search {
     1545            form {
     1546                label,
     1547                input[type='submit'],
     1548                input[type='text'] {
     1549                    width: auto;
     1550                }
     1551            }
     1552        }
     1553
    14151554    } // close @media
     1555
    14161556} // close #buddypress
    14171557
    … …  
    14291569*-------------------------------------------------------------------------------
    14301570*/
    1431 #buddypress {
     1571// message args ($variable-color, text-color)
     1572// Leave text-color undefined to automagically set text color
     1573// to background color darker by 50%
     1574#buddypress {
     1575
    14321576    div#message {
    14331577        p {
    … …  
    14381582        &.info {
    14391583            p {
    1440                 @include message-box($notice-info, #fff);
     1584                @include message-box($notice-info);
    14411585            }
    14421586        }
    … …  
    14441588        &.updated {
    14451589            p {
    1446                 @include message-box($notice-update, #fff);
     1590                @include message-box($notice-update);
    14471591            }
    14481592        }
    … …  
    14521596} // close  #buddypress
    14531597
    1454 // Without direct classes on our mesages ( 'warning' )
     1598// Without direct classes on our messages ( 'warning' )
    14551599// we need to use the body classes
    1456 // message args ($variable-color, text-color)
    14571600// todo: If this is class .warning is included in main BP styles remove from here
    14581601.delete-group {
    … …  
    14601603        div#message.info {
    14611604            p {
    1462                 @include message-box($notice-warning, #fff);
     1605                @include message-box($notice-warning);
    14631606            }
    14641607        }
Note: See TracChangeset for help on using the changeset viewer.