Skip to:
Content

BuddyPress.org


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

File:
1 edited

Legend:

Unmodified
Added
Removed

  • 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 {
Note: See TracChangeset for help on using the changeset viewer.