Skip to:
Content

BuddyPress.org

Changeset 9806


Ignore:
Timestamp:
04/26/2015 10:44:51 AM (11 years ago)
Author:
hnla
Message:

Commit updates twentyfifteen companion style files

  • Adds border-radius mixins
  • Update Sections / section numbering
  • Addresses single group screens styling headers for responsive breakpoints
  • Item-body component styling, settings sub screens
  • Removes Avatar upload nav tabbed styles from twentyfifteen to avatar.css to provide tabbed styles theme independent.

See #6291

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

    r9770 r9806  
    33335.0 - Directories - Members, Groups, Blogs, Forums
    34346.0 - Single Group Screens
     35 6.1 - Item-header
     36 6.2 - Management settings screens
     37 6.3 - Group members list
    35387.0 - Single User Account Screens
    36         7.1 - Notifications
    37         7.2 - Private Messaging Threads
    38         7.3 - Extended Profiles
    39         7.4 - Settings
     39        7.1 - Item Header
     40        7.2 - Extended Profiles
     41        7.3 - Groups
     42        7.4 - friends
     43        7.5 - Private Messaging Threads
     44        7.6 - Settings
    40458.0 - Forms  -  General
    41469.0 - Tables -  General
    … …  
    148153/*__ Vertical menu User account screens __*/
    149154@media screen and (min-width: 55em) {
    150   .bp-user #buddypress {
     155  /*.bp-user*/
     156  #buddypress {
    151157    background: #f7f7f7; }
    152     .bp-user #buddypress #item-header, .bp-user #buddypress #item-body {
     158    #buddypress #item-header, #buddypress #item-body {
    153159      background: #fff; }
    154     .bp-user #buddypress #object-nav {
     160    #buddypress #object-nav {
    155161      border-left: 1px solid rgba(153, 153, 153, 0.1);
    156162      float: right;
    157163      margin-left: -1px;
    158164      width: 200px; }
    159       .bp-user #buddypress #object-nav ul {
     165      #buddypress #object-nav ul {
    160166        border-bottom: 0;
    161167        padding: 0; }
    162         .bp-user #buddypress #object-nav ul li {
     168        #buddypress #object-nav ul li {
    163169          float: none;
    164170          overflow: hidden; }
    165           .bp-user #buddypress #object-nav ul li span {
     171          #buddypress #object-nav ul li span {
    166172            border-radius: 10%;
    167173            float: left;
    168174            margin-left: 15px; }
    169     .bp-user #buddypress #item-body {
     175    #buddypress #item-body {
    170176      border-right: 1px solid #ddd;
    171177      overflow: hidden;
    172178      padding: 0 10px;
    173179      width: auto; }
    174       .bp-user #buddypress #item-body #subnav {
     180      #buddypress #item-body #subnav {
    175181        margin: 0 -10px; } }
    176182
    … …  
    365371*-------------------------------------------------------------------------------
    366372*/
    367 #buddypress #members-list {
    368   /*
    369                 li {
    370                         .item {
    371                                 .update {
    372                                         border-left: 1px solid rgba($border-color, .4);
    373                                         display: block;
    374                                         margin: .5em 0;
    375                                         padding-left: .3em;
    376                                 }
    377                         }
    378                 }
    379 */ }
    380   @media screen and (min-width: 59.6875em) {
    381     #buddypress #members-list li .item-avatar, #buddypress #members-list li .item {
     373@media screen and (min-width: 59.6875em) {
     374  #buddypress #members-list li .item-avatar, #buddypress #members-list li .item {
     375    float: right; }
     376  #buddypress #members-list li .action {
     377    float: left; } }
     378
     379/**
     380*-------------------------------------------------------------------------------
     381* @section 6.0 - Single Group Screens
     382*-------------------------------------------------------------------------------
     383*/
     384/**
     385        *------------------------------------------------------
     386        * @subsection 6.1 - item-header
     387        *------------------------------------------------------
     388        */
     389@media screen and (max-width: 38.75em) {
     390  .groups #buddypress div#item-header {
     391    display: flex;
     392    flex-direction: column; }
     393    .groups #buddypress div#item-header #item-header-avatar {
     394      order: 1;
     395      text-align: center; }
     396      .groups #buddypress div#item-header #item-header-avatar a {
     397        border-bottom: 0; }
     398        .groups #buddypress div#item-header #item-header-avatar a img {
     399          display: inline-block;
     400          float: none; }
     401    .groups #buddypress div#item-header #item-header-content {
     402      order: 2; }
     403    .groups #buddypress div#item-header #item-actions {
     404      order: 3; } }
     405.groups #buddypress div#item-header {
     406  padding-bottom: 40px; }
     407  .groups #buddypress div#item-header div#item-actions {
     408    margin: 0;
     409    width: 100%; }
     410    @media screen and (min-width: 38.75em) {
     411      .groups #buddypress div#item-header div#item-actions {
     412        clear: none;
     413        float: left;
     414        width: 50%; } }
     415    .groups #buddypress div#item-header div#item-actions h3 {
     416      background: #555;
     417      color: #fff;
     418      font-size: 14px;
     419      font-size: 1.4rem;
     420      padding: 0.2em; }
     421      @media screen and (min-width: 46.25em) {
     422        .groups #buddypress div#item-header div#item-actions h3 {
     423          font-size: 16px;
     424          font-size: 1.6rem; } }
     425  @media screen and (min-width: 46.25em) {
     426    .groups #buddypress div#item-header #item-header-avatar, .groups #buddypress div#item-header #item-header-content {
    382427      float: right; }
    383     #buddypress #members-list li .action {
    384       float: left; } }
     428    .groups #buddypress div#item-header #item-header-avatar {
     429      width: 21%; }
     430    .groups #buddypress div#item-header #item-header-content {
     431      margin-right: 4%;
     432      width: 40%; }
     433    .groups #buddypress div#item-header div#item-actions {
     434      float: left;
     435      width: 28%; } }
     436
     437/**
     438*-------------------------------------------------------
     439* @subsection 6.2 - Management settings screens
     440*-------------------------------------------------------
     441*/
     442.groups #group-settings-form h4 {
     443  background: #555;
     444  color: #fff;
     445  padding: 0.2em; }
     446
     447.groups.edit-details #group-settings-form label {
     448  background: #555;
     449  border-top-left-radius: 4px;
     450  border-top-right-radius: 4px;
     451  background-clip: padding-box;
     452  color: #fff;
     453  display: inline-block;
     454  margin-bottom: 0;
     455  padding: 0.2em;
     456  width: 80%; }
     457  @media screen and (min-width: 38.75em) {
     458    .groups.edit-details #group-settings-form label {
     459      width: 60%; } }
     460.groups.edit-details #group-settings-form textarea + p label {
     461  background: none;
     462  color: inherit;
     463  font-size: 14px;
     464  font-size: 1.4rem;
     465  width: auto; }
     466
     467.groups.group-settings #group-settings-form div.radio label {
     468  border: 1px solid #eaeaea;
     469  padding: 0.2em; }
     470  .groups.group-settings #group-settings-form div.radio label ul {
     471    color: rgba(51, 51, 51, 0.6);
     472    font-size: 14px;
     473    font-size: 1.4rem; }
     474
     475.groups.group-avatar form > p {
     476  margin-top: 20px; }
     477
     478.groups.manage-members #group-settings-form .item-list li {
     479  border-bottom: 1px solid #eaeaea; }
     480  .groups.manage-members #group-settings-form .item-list li img, .groups.manage-members #group-settings-form .item-list li h5 {
     481    float: right; }
     482    .groups.manage-members #group-settings-form .item-list li img > a, .groups.manage-members #group-settings-form .item-list li h5 > a {
     483      border-bottom: 0; }
     484  .groups.manage-members #group-settings-form .item-list li span.small {
     485    clear: right;
     486    display: block;
     487    float: none;
     488    margin-top: 10px; }
     489    .groups.manage-members #group-settings-form .item-list li span.small a {
     490      display: inline-block;
     491      margin: 5px 0;
     492      width: 100%; }
     493      @media screen and (min-width: 38.75em) {
     494        .groups.manage-members #group-settings-form .item-list li span.small a {
     495          width: auto; } }
     496  .groups.manage-members #group-settings-form .item-list li h5 {
     497    margin: 0; }
     498
     499/**
     500*------------------------------------------------------
     501* @subsection 6.3 - Group Members list
     502*------------------------------------------------------
     503*/
     504.groups.group-members #subnav li {
     505  width: 100%; }
     506  @media screen and (max-width: 38.75em) {
     507    .groups.group-members #subnav li {
     508      background: #fff;
     509      padding: 20px 0; } }
     510  .groups.group-members #subnav li #search-members-form {
     511    float: left;
     512    margin: 5px 0 0 5px; }
     513    @media screen and (max-width: 38.75em) {
     514      .groups.group-members #subnav li #search-members-form {
     515        margin: 0;
     516        width: 100%; }
     517        .groups.group-members #subnav li #search-members-form label input[type="text"] {
     518          width: 100%; } }
    385519
    386520/**
    … …  
    393527.bp-user #buddypress {
    394528  /* General elements & classes, pagination, filters */
    395   /* Item Header */
    396   /* Profile */
    397   /* Groups */
    398   /* Messages / Notifications */ }
     529  /**
     530        *-----------------------------------------------------
     531        * @subsection 7.1 - Item Header
     532        *-----------------------------------------------------
     533        */
     534  /**
     535        *-----------------------------------------------------
     536        * @subsection 7.2 - Extended Profile
     537        *-----------------------------------------------------
     538        */
     539  /**
     540        *-----------------------------------------------------
     541        * @subsection 7.3 - Groups
     542        *-----------------------------------------------------
     543        */ }
    399544  .bp-user #buddypress table th {
    400545    font-size: 14px;
    … …  
    468613  .bp-user #buddypress .profile .bp-widget table {
    469614    margin-top: 0; }
    470   .bp-user #buddypress .bp-avatar-nav ul:before, .bp-user #buddypress .bp-avatar-nav ul:after {
    471     content: " ";
    472     display: table; }
    473   .bp-user #buddypress .bp-avatar-nav ul:after {
    474     clear: both; }
    475   .bp-user #buddypress .bp-avatar-nav ul {
    476     border-bottom: 1px solid rgba(153, 153, 153, 0.5);
    477     margin-bottom: 20px; }
    478     .bp-user #buddypress .bp-avatar-nav ul li.current {
    479       border: 1px solid rgba(153, 153, 153, 0.5);
    480       border-bottom-color: #fff;
    481       border-top-right-radius: 4px;
    482       border-top-left-radius: 4px;
    483       margin-bottom: -1px; }
    484       .bp-user #buddypress .bp-avatar-nav ul li.current a {
    485         background: none;
    486         outline: 0; }
    487615  @media screen and (min-width: 77.5em) {
    488616    .bp-user #buddypress #groups-list li .item {
    … …  
    508636#buddypress #item-body .standard-form input[type='text'], #buddypress #item-body .standard-form textarea {
    509637  width: 100%; }
    510 #buddypress div.dir-search, #buddypress div.message-search {
     638#buddypress div.dir-search, #buddypress div.message-search, #buddypress li.groups-members-search {
    511639  float: none;
    512640  margin: 10px 0; }
    513   #buddypress div.dir-search form, #buddypress div.message-search form {
     641  #buddypress div.dir-search form, #buddypress div.message-search form, #buddypress li.groups-members-search form {
    514642    border: 1px solid rgba(153, 153, 153, 0.4);
    515643    overflow: hidden; }
    516     #buddypress div.dir-search form label, #buddypress div.message-search form label {
     644    #buddypress div.dir-search form label, #buddypress div.message-search form label, #buddypress li.groups-members-search form label {
    517645      float: right;
    518646      width: 80%; }
    519     #buddypress div.dir-search form input[type='text'], #buddypress div.message-search form input[type='text'] {
     647    #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'] {
    520648      float: right;
    521649      margin: 0;
    522650      width: 80%; }
    523     #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'] {
     651    #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'] {
    524652      font-size: 14px;
    525653      font-size: 1.4rem;
    526654      border: 0;
    527655      line-height: inherit; }
    528     #buddypress div.dir-search form input[type='text'], #buddypress div.message-search form input[type='text'] {
     656    #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'] {
    529657      border-left: 1px solid rgba(153, 153, 153, 0.4);
    530658      padding: 0.2em 0.2em 0.2em 0; }
    531     #buddypress div.dir-search form input[type='submit'], #buddypress div.message-search form input[type='submit'] {
     659    #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'] {
    532660      float: left;
    533661      font-weight: normal;
    … …  
    537665      width: 20%; }
    538666@media screen and (min-width: 38.75em) {
    539   #buddypress div.dir-search, #buddypress div.message-search {
     667  #buddypress div.dir-search, #buddypress div.message-search, #buddypress li.groups-members-search {
    540668    float: left;
    541669    margin-bottom: 5px !important; }
    542     #buddypress div.dir-search form label, #buddypress div.dir-search form input[type='text'], #buddypress div.dir-search form input[type='submit'], #buddypress div.message-search form label, #buddypress div.message-search form input[type='text'], #buddypress div.message-search form input[type='submit'] {
     670    #buddypress div.dir-search form label, #buddypress div.dir-search form input[type='text'], #buddypress div.dir-search form input[type='submit'], #buddypress div.message-search form label, #buddypress div.message-search form input[type='text'], #buddypress div.message-search form input[type='submit'], #buddypress li.groups-members-search form label, #buddypress li.groups-members-search form input[type='text'], #buddypress li.groups-members-search form input[type='submit'] {
    543671      width: auto; }
    544672  #buddypress div.message-search {

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

    r9770 r9806  
    33335.0 - Directories - Members, Groups, Blogs, Forums
    34346.0 - Single Group Screens
     35 6.1 - Item-header
     36 6.2 - Management settings screens
     37 6.3 - Group members list
    35387.0 - Single User Account Screens
    36         7.1 - Notifications
    37         7.2 - Private Messaging Threads
    38         7.3 - Extended Profiles
    39         7.4 - Settings
     39        7.1 - Item Header
     40        7.2 - Extended Profiles
     41        7.3 - Groups
     42        7.4 - friends
     43        7.5 - Private Messaging Threads
     44        7.6 - Settings
    40458.0 - Forms  -  General
    41469.0 - Tables -  General
    … …  
    148153/*__ Vertical menu User account screens __*/
    149154@media screen and (min-width: 55em) {
    150   .bp-user #buddypress {
     155  /*.bp-user*/
     156  #buddypress {
    151157    background: #f7f7f7; }
    152     .bp-user #buddypress #item-header, .bp-user #buddypress #item-body {
     158    #buddypress #item-header, #buddypress #item-body {
    153159      background: #fff; }
    154     .bp-user #buddypress #object-nav {
     160    #buddypress #object-nav {
    155161      border-right: 1px solid rgba(153, 153, 153, 0.1);
    156162      float: left;
    157163      margin-right: -1px;
    158164      width: 200px; }
    159       .bp-user #buddypress #object-nav ul {
     165      #buddypress #object-nav ul {
    160166        border-bottom: 0;
    161167        padding: 0; }
    162         .bp-user #buddypress #object-nav ul li {
     168        #buddypress #object-nav ul li {
    163169          float: none;
    164170          overflow: hidden; }
    165           .bp-user #buddypress #object-nav ul li span {
     171          #buddypress #object-nav ul li span {
    166172            border-radius: 10%;
    167173            float: right;
    168174            margin-right: 15px; }
    169     .bp-user #buddypress #item-body {
     175    #buddypress #item-body {
    170176      border-left: 1px solid #ddd;
    171177      overflow: hidden;
    172178      padding: 0 10px;
    173179      width: auto; }
    174       .bp-user #buddypress #item-body #subnav {
     180      #buddypress #item-body #subnav {
    175181        margin: 0 -10px; } }
    176182
    … …  
    365371*-------------------------------------------------------------------------------
    366372*/
    367 #buddypress #members-list {
    368   /*
    369                 li {
    370                         .item {
    371                                 .update {
    372                                         border-left: 1px solid rgba($border-color, .4);
    373                                         display: block;
    374                                         margin: .5em 0;
    375                                         padding-left: .3em;
    376                                 }
    377                         }
    378                 }
    379 */ }
    380   @media screen and (min-width: 59.6875em) {
    381     #buddypress #members-list li .item-avatar, #buddypress #members-list li .item {
     373@media screen and (min-width: 59.6875em) {
     374  #buddypress #members-list li .item-avatar, #buddypress #members-list li .item {
     375    float: left; }
     376  #buddypress #members-list li .action {
     377    float: right; } }
     378
     379/**
     380*-------------------------------------------------------------------------------
     381* @section 6.0 - Single Group Screens
     382*-------------------------------------------------------------------------------
     383*/
     384/**
     385        *------------------------------------------------------
     386        * @subsection 6.1 - item-header
     387        *------------------------------------------------------
     388        */
     389@media screen and (max-width: 38.75em) {
     390  .groups #buddypress div#item-header {
     391    display: flex;
     392    flex-direction: column; }
     393    .groups #buddypress div#item-header #item-header-avatar {
     394      order: 1;
     395      text-align: center; }
     396      .groups #buddypress div#item-header #item-header-avatar a {
     397        border-bottom: 0; }
     398        .groups #buddypress div#item-header #item-header-avatar a img {
     399          display: inline-block;
     400          float: none; }
     401    .groups #buddypress div#item-header #item-header-content {
     402      order: 2; }
     403    .groups #buddypress div#item-header #item-actions {
     404      order: 3; } }
     405.groups #buddypress div#item-header {
     406  padding-bottom: 40px; }
     407  .groups #buddypress div#item-header div#item-actions {
     408    margin: 0;
     409    width: 100%; }
     410    @media screen and (min-width: 38.75em) {
     411      .groups #buddypress div#item-header div#item-actions {
     412        clear: none;
     413        float: right;
     414        width: 50%; } }
     415    .groups #buddypress div#item-header div#item-actions h3 {
     416      background: #555;
     417      color: #fff;
     418      font-size: 14px;
     419      font-size: 1.4rem;
     420      padding: 0.2em; }
     421      @media screen and (min-width: 46.25em) {
     422        .groups #buddypress div#item-header div#item-actions h3 {
     423          font-size: 16px;
     424          font-size: 1.6rem; } }
     425  @media screen and (min-width: 46.25em) {
     426    .groups #buddypress div#item-header #item-header-avatar, .groups #buddypress div#item-header #item-header-content {
    382427      float: left; }
    383     #buddypress #members-list li .action {
    384       float: right; } }
     428    .groups #buddypress div#item-header #item-header-avatar {
     429      width: 21%; }
     430    .groups #buddypress div#item-header #item-header-content {
     431      margin-left: 4%;
     432      width: 40%; }
     433    .groups #buddypress div#item-header div#item-actions {
     434      float: right;
     435      width: 28%; } }
     436
     437/**
     438*-------------------------------------------------------
     439* @subsection 6.2 - Management settings screens
     440*-------------------------------------------------------
     441*/
     442.groups #group-settings-form h4 {
     443  background: #555;
     444  color: #fff;
     445  padding: 0.2em; }
     446
     447.groups.edit-details #group-settings-form label {
     448  background: #555;
     449  border-top-right-radius: 4px;
     450  border-top-left-radius: 4px;
     451  background-clip: padding-box;
     452  color: #fff;
     453  display: inline-block;
     454  margin-bottom: 0;
     455  padding: 0.2em;
     456  width: 80%; }
     457  @media screen and (min-width: 38.75em) {
     458    .groups.edit-details #group-settings-form label {
     459      width: 60%; } }
     460.groups.edit-details #group-settings-form textarea + p label {
     461  background: none;
     462  color: inherit;
     463  font-size: 14px;
     464  font-size: 1.4rem;
     465  width: auto; }
     466
     467.groups.group-settings #group-settings-form div.radio label {
     468  border: 1px solid #eaeaea;
     469  padding: 0.2em; }
     470  .groups.group-settings #group-settings-form div.radio label ul {
     471    color: rgba(51, 51, 51, 0.6);
     472    font-size: 14px;
     473    font-size: 1.4rem; }
     474
     475.groups.group-avatar form > p {
     476  margin-top: 20px; }
     477
     478.groups.manage-members #group-settings-form .item-list li {
     479  border-bottom: 1px solid #eaeaea; }
     480  .groups.manage-members #group-settings-form .item-list li img, .groups.manage-members #group-settings-form .item-list li h5 {
     481    float: left; }
     482    .groups.manage-members #group-settings-form .item-list li img > a, .groups.manage-members #group-settings-form .item-list li h5 > a {
     483      border-bottom: 0; }
     484  .groups.manage-members #group-settings-form .item-list li span.small {
     485    clear: left;
     486    display: block;
     487    float: none;
     488    margin-top: 10px; }
     489    .groups.manage-members #group-settings-form .item-list li span.small a {
     490      display: inline-block;
     491      margin: 5px 0;
     492      width: 100%; }
     493      @media screen and (min-width: 38.75em) {
     494        .groups.manage-members #group-settings-form .item-list li span.small a {
     495          width: auto; } }
     496  .groups.manage-members #group-settings-form .item-list li h5 {
     497    margin: 0; }
     498
     499/**
     500*------------------------------------------------------
     501* @subsection 6.3 - Group Members list
     502*------------------------------------------------------
     503*/
     504.groups.group-members #subnav li {
     505  width: 100%; }
     506  @media screen and (max-width: 38.75em) {
     507    .groups.group-members #subnav li {
     508      background: #fff;
     509      padding: 20px 0; } }
     510  .groups.group-members #subnav li #search-members-form {
     511    float: right;
     512    margin: 5px 5px 0 0; }
     513    @media screen and (max-width: 38.75em) {
     514      .groups.group-members #subnav li #search-members-form {
     515        margin: 0;
     516        width: 100%; }
     517        .groups.group-members #subnav li #search-members-form label input[type="text"] {
     518          width: 100%; } }
    385519
    386520/**
    … …  
    393527.bp-user #buddypress {
    394528  /* General elements & classes, pagination, filters */
    395   /* Item Header */
    396   /* Profile */
    397   /* Groups */
    398   /* Messages / Notifications */ }
     529  /**
     530        *-----------------------------------------------------
     531        * @subsection 7.1 - Item Header
     532        *-----------------------------------------------------
     533        */
     534  /**
     535        *-----------------------------------------------------
     536        * @subsection 7.2 - Extended Profile
     537        *-----------------------------------------------------
     538        */
     539  /**
     540        *-----------------------------------------------------
     541        * @subsection 7.3 - Groups
     542        *-----------------------------------------------------
     543        */ }
    399544  .bp-user #buddypress table th {
    400545    font-size: 14px;
    … …  
    468613  .bp-user #buddypress .profile .bp-widget table {
    469614    margin-top: 0; }
    470   .bp-user #buddypress .bp-avatar-nav ul:before, .bp-user #buddypress .bp-avatar-nav ul:after {
    471     content: " ";
    472     display: table; }
    473   .bp-user #buddypress .bp-avatar-nav ul:after {
    474     clear: both; }
    475   .bp-user #buddypress .bp-avatar-nav ul {
    476     border-bottom: 1px solid rgba(153, 153, 153, 0.5);
    477     margin-bottom: 20px; }
    478     .bp-user #buddypress .bp-avatar-nav ul li.current {
    479       border: 1px solid rgba(153, 153, 153, 0.5);
    480       border-bottom-color: #fff;
    481       border-top-left-radius: 4px;
    482       border-top-right-radius: 4px;
    483       margin-bottom: -1px; }
    484       .bp-user #buddypress .bp-avatar-nav ul li.current a {
    485         background: none;
    486         outline: 0; }
    487615  @media screen and (min-width: 77.5em) {
    488616    .bp-user #buddypress #groups-list li .item {
    … …  
    508636#buddypress #item-body .standard-form input[type='text'], #buddypress #item-body .standard-form textarea {
    509637  width: 100%; }
    510 #buddypress div.dir-search, #buddypress div.message-search {
     638#buddypress div.dir-search, #buddypress div.message-search, #buddypress li.groups-members-search {
    511639  float: none;
    512640  margin: 10px 0; }
    513   #buddypress div.dir-search form, #buddypress div.message-search form {
     641  #buddypress div.dir-search form, #buddypress div.message-search form, #buddypress li.groups-members-search form {
    514642    border: 1px solid rgba(153, 153, 153, 0.4);
    515643    overflow: hidden; }
    516     #buddypress div.dir-search form label, #buddypress div.message-search form label {
     644    #buddypress div.dir-search form label, #buddypress div.message-search form label, #buddypress li.groups-members-search form label {
    517645      float: left;
    518646      width: 80%; }
    519     #buddypress div.dir-search form input[type='text'], #buddypress div.message-search form input[type='text'] {
     647    #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'] {
    520648      float: left;
    521649      margin: 0;
    522650      width: 80%; }
    523     #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'] {
     651    #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'] {
    524652      font-size: 14px;
    525653      font-size: 1.4rem;
    526654      border: 0;
    527655      line-height: inherit; }
    528     #buddypress div.dir-search form input[type='text'], #buddypress div.message-search form input[type='text'] {
     656    #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'] {
    529657      border-right: 1px solid rgba(153, 153, 153, 0.4);
    530658      padding: 0.2em 0 0.2em 0.2em; }
    531     #buddypress div.dir-search form input[type='submit'], #buddypress div.message-search form input[type='submit'] {
     659    #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'] {
    532660      float: right;
    533661      font-weight: normal;
    … …  
    537665      width: 20%; }
    538666@media screen and (min-width: 38.75em) {
    539   #buddypress div.dir-search, #buddypress div.message-search {
     667  #buddypress div.dir-search, #buddypress div.message-search, #buddypress li.groups-members-search {
    540668    float: right;
    541669    margin-bottom: 5px !important; }
    542     #buddypress div.dir-search form label, #buddypress div.dir-search form input[type='text'], #buddypress div.dir-search form input[type='submit'], #buddypress div.message-search form label, #buddypress div.message-search form input[type='text'], #buddypress div.message-search form input[type='submit'] {
     670    #buddypress div.dir-search form label, #buddypress div.dir-search form input[type='text'], #buddypress div.dir-search form input[type='submit'], #buddypress div.message-search form label, #buddypress div.message-search form input[type='text'], #buddypress div.message-search form input[type='submit'], #buddypress li.groups-members-search form label, #buddypress li.groups-members-search form input[type='text'], #buddypress li.groups-members-search form input[type='submit'] {
    543671      width: auto; }
    544672  #buddypress div.message-search {

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

    r9770 r9806  
    1212
    1313// Twentyfifteen Media Queries / Breakpoints
    14 // @media screen and (min-width: 22em) // Additional for xtra small mobile
     14// @media screen and (max-width: 22em) // Additional for xtra small mobile only
     15// @media screen and (max-width: 30em) // Additional small only
    1516// @media screen and (min-width: 38.75em)
    1617// @media screen and (min-width: 46.25em)
    … …  
    3435        font-size: $rem-font-value + rem;
    3536}
     37
     38// 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
     42@mixin border-radius($radius) {
     43//      -webkit-border-radius: $radius;
     44//      -moz-border-radius: $radius;
     45//      -ms-border-radius: $radius;
     46        border-radius: $radius;
     47        background-clip: padding-box;
     48}
     49
     50@mixin border-top-radius($radius) {
     51//      -webkit-border-top-right-radius: $radius;
     52        border-top-right-radius: $radius;
     53//      -webkit-border-top-left-radius: $radius;
     54        border-top-left-radius: $radius;
     55        background-clip: padding-box;
     56}
     57
     58@mixin border-right-radius($radius) {
     59//      -webkit-border-bottom-right-radius: $radius;
     60        border-bottom-right-radius: $radius;
     61//      -webkit-border-top-right-radius: $radius;
     62        border-top-right-radius: $radius;
     63        background-clip: padding-box;
     64}
     65
     66@mixin border-bottom-radius($radius) {
     67//      -webkit-border-bottom-right-radius: $radius;
     68        border-bottom-right-radius: $radius;
     69//      -webkit-border-bottom-left-radius: $radius;
     70        border-bottom-left-radius: $radius;
     71        background-clip: padding-box;
     72}
     73
     74@mixin border-left-radius($radius) {
     75//      -webkit-border-bottom-left-radius: $radius;
     76        border-bottom-left-radius: $radius;
     77//      -webkit-border-top-left-radius: $radius;
     78        border-top-left-radius: $radius;
     79        background-clip: padding-box;
     80}
     81
     82// Box sizing
     83
     84@mixin box-model($box-model) {
     85//      -webkit-box-sizing: $box-model;
     86//      -moz-box-sizing: $box-model;
     87        box-sizing: $box-model;
     88}
     89
    3690// Variabals: color definitions
    3791$content-background: #fff;
    … …  
    771315.0 - Directories - Members, Groups, Blogs, Forums
    781326.0 - Single Group Screens
     133 6.1 - Item-header
     134 6.2 - Management settings screens
     135 6.3 - Group members list
    791367.0 - Single User Account Screens
    80         7.1 - Notifications
    81         7.2 - Private Messaging Threads
    82         7.3 - Extended Profiles
    83         7.4 - Settings
     137        7.1 - Item Header
     138        7.2 - Extended Profiles
     139        7.3 - Groups
     140        7.4 - friends
     141        7.5 - Private Messaging Threads
     142        7.6 - Settings
    841438.0 - Forms  -  General
    851449.0 - Tables -  General
    … …  
    308367
    309368@media screen and (min-width: 55em) {
    310         .bp-user #buddypress {
     369        /*.bp-user*/ #buddypress {
    311370                background: $light-background;
    312371
    … …  
    485544                                        // Provisionally lets keep the 'action' div
    486545                                        //position but inline-block the buttons
     546
    487547                                        @media screen and (min-width: 38.75em) {
    488548                                                // keep buttons to a row small tablet up
    … …  
    490550                                                width: auto;
    491551                                        } // close @media
     552
    492553                                        @media screen and (min-width: 59.6875em) {
    493554                                                // take buttons to block to stack them when floated right
    … …  
    684745                        }
    685746                }
    686 /*
    687                 li {
    688                         .item {
    689                                 .update {
    690                                         border-left: 1px solid rgba($border-color, .4);
    691                                         display: block;
    692                                         margin: .5em 0;
    693                                         padding-left: .3em;
    694                                 }
    695                         }
    696                 }
    697 */
     747
    698748        } // close #members-list
    699749} //close #BuddyPress
     750
     751/**
     752*-------------------------------------------------------------------------------
     753* @section 6.0 - Single Group Screens
     754*-------------------------------------------------------------------------------
     755*/
     756
     757
     758        /**
     759        *------------------------------------------------------
     760        * @subsection 6.1 - item-header
     761        *------------------------------------------------------
     762        */
     763
     764.groups {
     765        #buddypress {
     766
     767                // Move visual flow of avatar & item-actions at narrow width,
     768                // avatar first after group title
     769                @media screen and (max-width: 38.75em) {
     770                        div#item-header {
     771                                display: flex;
     772                                flex-direction: column;
     773
     774                                #item-header-avatar {
     775                                        order: 1;
     776                                        text-align: center;
     777
     778                                        a {
     779                                                border-bottom: 0;
     780
     781                                                img {
     782                                                        display: inline-block;
     783                                                        float: none;
     784                                                }
     785                                        }
     786                                }
     787
     788                                #item-header-content {order: 2;}
     789
     790                                #item-actions {order: 3;}
     791                        }
     792                } // close @media
     793
     794                div#item-header {
     795                        padding-bottom: $spacing-val-lg;
     796
     797                        div#item-actions {
     798                                margin: 0;
     799                                width: 100%;
     800
     801                                @media screen and (min-width: 38.75em) {
     802                                        clear: none;
     803                                        float: right;
     804                                        width: 50%;
     805                                }
     806
     807                                h3 {
     808                                        background: $dark-background;
     809                                        color: $content-background;
     810                                        @include font-size(14);
     811
     812                                        @media screen and (min-width: 46.25em) {
     813                                                @include font-size(16);
     814                                        }
     815                                        padding: 0.2em;
     816                                }
     817                        } // close item-actions
     818
     819                        @media screen and (min-width: 46.25em) {
     820
     821                                #item-header-avatar,
     822                                #item-header-content {
     823                                        float: left;
     824                                }
     825
     826                                #item-header-avatar {
     827                                        width: 21%;
     828                                }
     829
     830                                #item-header-content {
     831                                        margin-left: 4%;
     832                                        width: 40%;
     833                                }
     834
     835                                div#item-actions {
     836                                        float: right;
     837                                        width: 28%;
     838                                }
     839
     840                        } // close @media
     841
     842                } // close #item-header
     843        } // close #buddypress
     844} // close .groups
     845
     846/**
     847*-------------------------------------------------------
     848* @subsection 6.2 - Management settings screens
     849*-------------------------------------------------------
     850*/
     851
     852// headings settings screens & general global settings styles
     853.groups {
     854        #group-settings-form {
     855                h4 {
     856                        background: $dark-background;
     857                        color: $content-background;
     858                        padding: 0.2em;
     859                }
     860        }
     861}
     862
     863.groups.edit-details {
     864        #group-settings-form {
     865
     866                label {
     867                        background: $dark-background;
     868                        @include border-top-radius(4px);
     869                        color: $content-background;
     870                        display: inline-block;
     871                        margin-bottom: 0;
     872                        padding: 0.2em;
     873                        width: 80%;
     874
     875                        @media screen and (min-width: 38.75em) {
     876                                width: 60%;
     877                        }
     878
     879                }
     880
     881                textarea + p label {
     882                        background: none;
     883                        color: inherit;
     884                        @include font-size(14);
     885                        width: auto;
     886                }
     887
     888        }
     889} // close .groups.edit-details
     890
     891.groups.group-settings {
     892        #group-settings-form {
     893
     894                div.radio label {
     895                        border: 1px solid $border-light;
     896                        padding: 0.2em;
     897
     898                        ul {
     899                                color: rgba($body-text, 0.6);
     900                                @include font-size(14);
     901                        }
     902                }
     903
     904        }
     905} // close .groups.group-settings
     906
     907.groups.group-avatar {
     908
     909        form > p {
     910                margin-top: $spacing-val-md;
     911        }
     912
     913}
     914
     915.groups.manage-members {
     916        #group-settings-form {
     917                .item-list {
     918                        li {
     919                                border-bottom: 1px solid $border-light;
     920
     921                                img,
     922                                h5 {
     923                                        float: left;
     924
     925                                        > a {border-bottom: 0;}
     926                                }
     927
     928                                span.small {
     929                                        clear: left;
     930                                        display: block;
     931                                        float: none;
     932                                        margin-top: $spacing-val-sm;
     933
     934                                        a {
     935                                                display: inline-block;
     936                                                margin: $spacing-val-xs 0;
     937                                                width: 100%;
     938
     939                                                @media screen and (min-width: 38.75em) {
     940                                                        width: auto;
     941                                                }
     942                                        }
     943                                }
     944
     945                                h5 {
     946                                        margin: 0;
     947                                }
     948
     949                        }
     950                }
     951        }
     952} // close .groups.manage-members
     953
     954/**
     955*------------------------------------------------------
     956* @subsection 6.3 - Group Members list
     957*------------------------------------------------------
     958*/
     959
     960// Massage the members search for groups nav specifically
     961.groups.group-members {
     962        #subnav {
     963                li {
     964                        @media screen and (max-width: 38.75em) {
     965                                background: #fff;
     966                                padding: $spacing-val-md 0;
     967                        }
     968                        width: 100%;
     969
     970                        #search-members-form {
     971                                float: right;
     972
     973                                @media screen and (max-width: 38.75em) {
     974                                        margin: 0;
     975                                        width: 100%;
     976
     977                                        label {
     978                                                input[type="text"] {width: 100%;}
     979                                        }
     980                                }
     981
     982                                margin: $spacing-val-xs $spacing-val-xs 0 0;
     983                        }
     984                }
     985        }
     986}
    700987
    701988/**
    … …  
    7601047                } // close .notifications-options-nav
    7611048
    762         /* Item Header */
     1049        /**
     1050        *-----------------------------------------------------
     1051        * @subsection 7.1 - Item Header
     1052        *-----------------------------------------------------
     1053        */
    7631054
    7641055                #item-header {
    … …  
    7991090                } // close #item-header
    8001091
    801         /* Profile */
     1092        /**
     1093        *-----------------------------------------------------
     1094        * @subsection 7.2 - Extended Profile
     1095        *-----------------------------------------------------
     1096        */
    8021097                .profile {
    8031098                        .bp-widget {
    … …  
    8131108                } // close .profile
    8141109
    815                 .bp-avatar-nav {
    816                         ul:before,
    817                         ul:after {
    818                                 content: " ";
    819                                 display: table;
    820                         }
    821 
    822                         ul:after {
    823                                 clear: both;
    824                         }
    825 
    826                         ul {
    827                                 border-bottom: 1px solid rgba($border-color, 0.5);
    828                                 margin-bottom: $spacing-val-md;
    829 
    830                                 li.current {
    831                                         border: 1px solid rgba($border-color, 0.5);
    832                                         border-bottom-color: #fff;
    833                                         border-top-left-radius: 4px;
    834                                         border-top-right-radius: 4px;
    835                                         margin-bottom: -1px;
    836 
    837                                         a {
    838                                                 background: none;
    839                                                 outline: 0;
    840                                         }
    841                                 } // close li.current
    842                         }
    843                 } // .bp-avatar-nav
    844 
    845                 /* Groups */
     1110/**
     1111        *-----------------------------------------------------
     1112        * @subsection 7.3 - Groups
     1113        *-----------------------------------------------------
     1114        */
    8461115
    8471116                #groups-list {
    … …  
    8561125                }
    8571126
    858         /* Messages / Notifications */
    859 
    8601127        } // close #BuddyPress
    8611128
    … …  
    9061173
    9071174        div.dir-search,
    908         div.message-search {
     1175        div.message-search,
     1176        li.groups-members-search
     1177         {
    9091178                float: none;
    9101179                margin: $spacing-val-sm 0;
    … …  
    9551224        @media screen and (min-width: 38.75em) {
    9561225                div.dir-search,
    957                 div.message-search {
     1226                div.message-search,
     1227                li.groups-members-search {
    9581228                        float: right;
    9591229                        margin-bottom: 5px !important;
Note: See TracChangeset for help on using the changeset viewer.