Ticket #6291: twentyfifteen-comp-style.13.patch

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

@@ -11 +11 @@
 // of managing media queries, scalability & flexibility .
 
 // Twentyfifteen Media Queries / Breakpoints
-// @media screen and (min-width: 22em) // Additional for xtra small mobile
+// @media screen and (max-width: 22em) // Additional for xtra small mobile only
+// @media screen and (max-width: 30em) // Additional small only
 // @media screen and (min-width: 38.75em)
 // @media screen and (min-width: 46.25em)
 // @media screen and (min-width: 55em)
@@ -33 +34 @@
         font-size: ($font-size * 1px);
         font-size: $rem-font-value + rem;
 }
+
+// Border border-radius mixins
+// To allow mixins to pass cscc-lint tests we will not provide vendor prefix
+// until such time as exemption lists can be built for the scss-lint.yml
+
+@mixin border-radius($radius) {
+//      -webkit-border-radius: $radius;
+//      -moz-border-radius: $radius;
+//      -ms-border-radius: $radius;
+        border-radius: $radius;
+        background-clip: padding-box;
+}
+
+@mixin border-top-radius($radius) {
+//      -webkit-border-top-right-radius: $radius;
+        border-top-right-radius: $radius;
+//      -webkit-border-top-left-radius: $radius;
+        border-top-left-radius: $radius;
+        background-clip: padding-box;
+}
+
+@mixin border-right-radius($radius) {
+//      -webkit-border-bottom-right-radius: $radius;
+        border-bottom-right-radius: $radius;
+//      -webkit-border-top-right-radius: $radius;
+        border-top-right-radius: $radius;
+        background-clip: padding-box;
+}
+
+@mixin border-bottom-radius($radius) {
+//      -webkit-border-bottom-right-radius: $radius;
+        border-bottom-right-radius: $radius;
+//      -webkit-border-bottom-left-radius: $radius;
+        border-bottom-left-radius: $radius;
+        background-clip: padding-box;
+}
+
+@mixin border-left-radius($radius) {
+//      -webkit-border-bottom-left-radius: $radius;
+        border-bottom-left-radius: $radius;
+//      -webkit-border-top-left-radius: $radius;
+        border-top-left-radius: $radius;
+        background-clip: padding-box;
+}
+
+// Box sizing
+
+@mixin box-model($box-model) {
+//      -webkit-box-sizing: $box-model;
+//      -moz-box-sizing: $box-model;
+        box-sizing: $box-model;
+}
+
 // Variabals: color definitions
 $content-background: #fff;
 $light-background:   #f7f7f7;
@@ -76 +130 @@
         4.4 - Blogs Loop
 5.0 - Directories - Members, Groups, Blogs, Forums
 6.0 - Single Group Screens
+ 6.1 - Item-header
+ 6.2 - Management settings screens
+ 6.3 - Group members list
 7.0 - Single User Account Screens
         7.1 - Notifications
         7.2 - Private Messaging Threads
@@ -307 +364 @@
 // are being used.
 
 @media screen and (min-width: 55em) {
-        .bp-user #buddypress {
+        /*.bp-user*/ #buddypress {
                 background: $light-background;
 
                 #item-header,
@@ -484 +541 @@
                                         }
                                         // Provisionally lets keep the 'action' div
                                         //position but inline-block the buttons
+
                                         @media screen and (min-width: 38.75em) {
                                                 // keep buttons to a row small tablet up
                                                 margin: 0 $spacing-val-sm $spacing-val-sm 0;
                                                 width: auto;
                                         } // close @media
+
                                         @media screen and (min-width: 59.6875em) {
                                                 // take buttons to block to stack them when floated right
                                                 clear: right;
@@ -683 +742 @@
                                 }
                         }
                 }
-/*
-                li {
-                        .item {
-                                .update {
-                                        border-left: 1px solid rgba($border-color, .4);
+
+        } // close #members-list
+} //close #BuddyPress
+
+/**
+*-------------------------------------------------------------------------------
+* @section 6.0 - Single Group Screens
+*-------------------------------------------------------------------------------
+*/
+
+
+        /**
+        *------------------------------------------------------
+        * @subsection 6.1 - item-header
+        *------------------------------------------------------
+        */
+
+.groups {
+        #buddypress {
+
+                // Move visual flow of avatar & item-actions at narrow width,
+                // avatar first after group title
+                @media screen and (max-width: 38.75em) {
+                        div#item-header {
+                                display: flex;
+                                flex-direction: column;
+
+                                #item-header-avatar {
+                                        order: 1;
+                                        text-align: center;
+
+                                        a {
+                                                border-bottom: 0;
+
+                                                img {
+                                                        display: inline-block;
+                                                        float: none;
+                                                }
+                                        }
+                                }
+
+                                #item-header-content {order: 2;}
+
+                                #item-actions {order: 3;}
+                        }
+                } // close @media
+
+                div#item-header {
+
+                        div#item-actions {
+                                margin: 0;
+                                width: 100%;
+
+                                @media screen and (min-width: 38.75em) {
+                                        clear: none;
+                                        float: right;
+                                        width: 50%;
+                                }
+
+                                h3 {
+                                        background: $dark-background;
+                                        color: $content-background;
+                                        @include font-size(14);
+
+                                        @media screen and (min-width: 46.25em) {
+                                                @include font-size(16);
+                                        }
+                                        padding: 0.2em;
+                                }
+                        } // close item-actions
+
+                        @media screen and (min-width: 46.25em) {
+
+                                #item-header-avatar,
+                                #item-header-content {
+                                        float: left;
+                                }
+
+                                #item-header-avatar {
+                                        width: 21%;
+                                }
+
+                                #item-header-content {
+                                        margin-left: 4%;
+                                        width: 40%;
+                                }
+
+                                div#item-actions {
+                                        float: right;
+                                        width: 28%;
+                                }
+
+                        } // close @media
+
+                } // close #item-header
+        } // close #buddypress
+} // close .groups
+
+/**
+*-------------------------------------------------------
+* @subsection 6.2 - Management settings screens
+*-------------------------------------------------------
+*/
+
+        // headings settings screens & general global settings styles
+.groups {
+        #group-settings-form {
+                h4 {
+                        background: $dark-background;
+                        color: $content-background;
+                        padding: 0.2em;
+                }
+        }
+}
+
+.groups.edit-details {
+        #group-settings-form {
+
+                label {
+                        background: $dark-background;
+                        @include border-top-radius(4px);
+                        color: $content-background;
+                        display: inline-block;
+                        margin-bottom: 0;
+                        padding: 0.2em;
+                        width: 80%;
+
+                        @media screen and (min-width: 38.75em) {
+                                width: 40%;
+                        }
+
+                }
+
+                textarea + p label {
+                        background: none;
+                        color: inherit;
+                        @include font-size(14);
+                        width: auto;
+                }
+
+        }
+} // close .groups.edit-details
+
+.groups.group-settings {
+        #group-settings-form {
+
+                div.radio label {
+                        border: 1px solid $border-light;
+                        padding: 0.2em;
+
+                        ul {
+                                color: rgba($body-text, 0.6);
+                                @include font-size(14);
+                        }
+                }
+
+        }
+} // close .groups.group-settings
+
+.groups.manage-members {
+        #group-settings-form {
+                .item-list {
+                        li {
+                                border-bottom: 1px solid $border-light;
+
+                                img,
+                                h5 {
+                                        float: left;
+
+                                        > a {border-bottom: 0;}
+                                }
+
+                                span.small {
+                                        clear: left;
                                         display: block;
-                                        margin: .5em 0;
-                                        padding-left: .3em;
+                                        float: none;
+                                        margin-top: $spacing-val-sm;
+
+                                        a {
+                                                display: inline-block;
+                                                margin: $spacing-val-xs 0;
+                                                width: 100%;
+
+                                                @media screen and (min-width: 38.75em) {
+                                                        width: auto;
+                                                }
+                                        }
                                 }
+
+                                h5 {
+                                        margin: 0;
+                                }
+
                         }
                 }
+        }
+} // close .groups.manage-members
+
+/**
+*------------------------------------------------------
+* @subsection 6.3 - Group Members list
+*------------------------------------------------------
 */
-        } // close #members-list
-} //close #BuddyPress
 
+// Massage the members search for groups nav specifically
+.groups.group-members {
+        #subnav {
+                li {
+                        @media screen and (max-width: 38.75em) {
+                                background: #fff;
+                                padding: $spacing-val-md 0;
+                        }
+                        width: 100%;
+
+                        #search-members-form {
+                                float: right;
+
+                                @media screen and (max-width: 38.75em) {
+                                        margin: 0;
+                                        width: 100%;
+
+                                        label {
+                                                input[type="text"] {width: 100%;}
+                                        }
+                                }
+
+                                margin: $spacing-val-xs $spacing-val-xs 0 0;
+                        }
+                }
+        }
+}
+
 /**
 *-------------------------------------------------------------------------------
 * @section 7.0 - Single User Account Screens
@@ -905 +1181 @@
         }
 
         div.dir-search,
-        div.message-search {
+        div.message-search,
+        li.groups-members-search
+         {
                 float: none;
                 margin: $spacing-val-sm 0;
 
@@ -954 +1232 @@
         // Shift the search parent to the right and allow to shrinkwrap
         @media screen and (min-width: 38.75em) {
                 div.dir-search,
-                div.message-search {
+                div.message-search,
+                li.groups-members-search {
                         float: right;
                         margin-bottom: 5px !important;