Skip to:
Content

BuddyPress.org

Changeset 9806


Ignore:
Timestamp:
04/26/2015 10:44:51 AM (9 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.