Changeset 11379 for trunk/src/bp-templates/bp-legacy/css/twentyseventeen.scss

Timestamp:

01/11/2017 10:42:23 AM (9 years ago)

Author:

hnla

Message:

Commit Twentyseventeen companion style sheets

Commit adds final revision for style adjustments including rules to account for dark/light schemes.

Fixes #7338
Props hnla, offereins

File:

• trunk/src/bp-templates/bp-legacy/css/twentyseventeen.scss (modified) (61 diffs)

trunk/src/bp-templates/bp-legacy/css/twentyseventeen.scss

@@ -155 +155 @@
 }
 
+@mixin border-radius-none() {
+    -webkit-border-radius: none;
+    -moz-border-radius: none;
+    -ms-border-radius: none;
+    border-radius: none;
+}
+
 // Box sizing
 @mixin box-model($box-model) {
@@ -193 +200 @@
 
 // Variables: color definitions
-$body-text:          #141412;
+
+$dark-grey:     #555;
+$medium-grey:   #878787;
+$light-grey:    #dcdcdc;
+$x-light-grey:  #f7f7f7;
+$white:         #fff;
+
+$body-text:          #333;
+$bp-light-text:      $medium-grey;
+$bp-xlight-text:     #eee;
 $content-background: #fff;
-$off-white:          lighten(#f9f8ee, 0.7);
+$off-white:          #fafafa;
 $cream-background:   #f7f5e7;
-$light-background:   #f7f7f7;
-$medium-background:  #ccc;
-$dark-background:    #555;
-$border-color:       #d4d0ba;    // border color is varied using rgba
+$light-background:   $x-light-grey;
+$medium-background:  $medium-grey;
+$dark-background:    $dark-grey;
+$border-color:       #bebebe;
 $border-light:       #eaeaea; // BP dividers
 $border-med:         #ddd;
@@ -207 +223 @@
 $notice-error:       #c85a6e;
 $notice-warning:     #d05656;
-$notice-info:        #9fd1e2;
+$notice-info:        #7dd4ff;
 $notice-update:      #ced98c;
 $stripe-odd:         #ebf0ff;
 $stripe-even:        #dbe5ff;
-$unread:             #eee;
+$unread:             $x-light-grey;
 $link-action:        #c82b2b;
 /*--------------------------------------------------------------
@@ -278 +294 @@
     div.clear {display: none;}
 
+    // deal with global clearing property set on heading elements
+    // - for the moment we'll just specify this on  lists ul only
+
+    ul.item-list {
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+            clear: none;
+            padding: 0;
+        }
+    }
+
     // Ensure no text decoration or box shadow causing underlined effect.
     #page a {
@@ -294 +325 @@
 } // close .buddypress
 
-    // reduce the overlarge entry title margins
+// reduce the overlarge entry title margins
 @include medium-up {
 
@@ -311 +342 @@
     }
 }
-// 2017 has very small page entry title headings
-// enlarge slightly for BP screens.
-.buddypress {
-    article.page {
-        .entry-header {
-            .entry-title {
-                @include font-size(22);
-
-                @include medium-up {
-                    @include font-size(28);
-                }
-            }
-        }
-    }
-}
 
 // Open up the content width areas for BP screens to allow max widths.
-// This takes into account the ability to add/remove sidebars in 2017.
+// This takes into account the ability to columnize pages in 2017.
 // Only effect changes based on breakpoints.
 
-@include medium-up {
+@include med-small-up {
 
     body.buddypress.page.page-two-column {
@@ -338 +354 @@
 
             .entry-header {
-                width: 20%;
+                width: 30%;
             }
 
             .entry-content {
-                width: 80%;
+                width: 68%;
             }
         }
@@ -358 +374 @@
                 margin-left: 0;
                 margin-right: 0;
-//              width: auto;
             }
         }
@@ -370 +385 @@
 
     } // body.buddypress
+}
+
+// 2017 allows for selecting two distinct color schemes.
+// Our companion styles respect themes colors & inherit or avoid
+// setting backgrounds/colors so selecting the dark scheme generally
+// allows the theme to reset the BP text/headings etc to white
+// In places we do set backgrounds, Navs, search forms etc these
+// are added here under the themes body class to enable changing
+
+// Some element colors are inherited from BP original sheet so need to
+// to be reset under the dark scheme, where set in this sheet we simply state them
+// only for the light scheme, additionally elements such as BP form styles
+// need styles removing & are handled later in 'Forms' section
+body.colors-dark {
+
+    #buddypress {
+
+        //tabs border bottom color needs to match dark background
+        #group-create-tabs.item-list-tabs {
+
+            li.selected,
+            li.current {
+                border-bottom-color: #222;
+
+                a {
+                    color: inherit;
+                }
+            }
+        }
+
+        div.item-list-tabs {
+
+            ul {
+
+                li.selected,
+                li.current {
+
+                    a {
+                        background: none;
+                        color: inherit;
+                    }
+                }
+            }
+        }
+
+        #object-nav {
+
+            li:not(.current):focus,
+            li:not(.current):hover {
+
+                a {
+                    color: #555;
+                }
+            }
+        }
+
+        // With the dark scheme the subnav links lose definition as
+        // nav menu links, add a border top to clarify the li.last element seperated from links.
+        #subnav.item-list-tabs {
+
+            ul {
+                border-bottom: 1px solid rgba($border-light, 0.9);
+                margin-bottom: $spacing-val-md;
+
+                li.last {
+                    border-top: 1px solid rgba($border-light, 0.9);
+                }
+            }
+        }
+
+        // lists text: descr, meta, etc
+        .item-list {
+
+            div.meta {
+                color: #ddd;
+            }
+
+            div.item-desc,
+            .activity-header p,
+            .activity-comments ul,
+            .acomment-meta {
+                color: $bp-xlight-text;
+            }
+
+            .activity-meta,
+            .action {
+                a {
+                    background: $off-white;
+
+                    &:focus,
+                    &:hover {
+                        background: $white;
+                    }
+                }
+            }
+        }
+
+        #latest-update {
+            color: $bp-xlight-text;
+        }
+
+        div.pagination * {
+            color: #ddd;
+        }
+
+        #item-header {
+            .user-nicename {
+                color: $bp-xlight-text;
+            }
+        }
+
+        #item-body {
+
+            table {
+
+                thead {
+
+                    tr,
+                    th {
+                        background: none;
+                        color: $bp-xlight-text;
+                    }
+                }
+
+                tr.alt {
+
+                    td {
+                        background: none;
+                        color: $bp-xlight-text;
+                    }
+                }
+
+                .field-visibility-settings,
+                .field-visibility-settings-notoggle {
+                    color: #eee;
+                }
+
+            }
+
+            fieldset {
+                background: none;
+            }
+
+            .checkbox,
+            .radio {
+
+                label {
+                    color: #eee;
+                }
+            }
+
+            div#invite-list {
+                background: none;
+            }
+        }
+
+    } // close #buddypress
+}
+
+
+body.colors-dark.group-members {
+
+    #buddypress {
+
+        #subnav {
+
+            li {background: none;}
+
+            .groups-members-search {
+
+                form {
+                    margin-bottom: $spacing-val-md;
+                    margin-top: 0;
+                }
+            }
+        }
+    }
+}
+
+// remove borders for dir component screens.
+.directory.colors-dark {
+
+    #buddypress {
+
+        #subnav.item-list-tabs {
+
+            ul {
+                border-bottom: 0;
+                border-top: 0;
+
+                li.last.filter {
+                    border-top: 0;
+                }
+            }
+        }
+
+        div.activity {
+
+            ul.item-list {
+                border-top: 0;
+            }
+        }
+    }
+}
+
+body.colors-light {
+
+    #buddypress {
+
+        div.item-list-tabs {
+
+            ul {
+                background-color: $off-white;
+            }
+        }
+
+        div#subnav.item-list-tabs {
+
+            ul {
+                background-color: $light-background;
+
+                li.last {
+                    background: $content-background;
+                }
+            }
+        }
+
+        .item-list {
+
+            .activity-header {
+
+                p {
+                    background-color: $light-background;
+                    color: $bp-light-text;
+                }
+            }
+
+            .activity-comments {
+
+                .acomment-meta {
+                    color: #737373;
+                }
+            }
+        }
+
+        #item-body {
+
+            .profile {
+
+                h2 {
+                    background: $medium-grey;
+                    color: #fff;
+                }
+            }
+        }
+
+        table {
+
+            tr.alt {
+
+                td {
+                    background: #f5f5f5;
+                    color: $body-text;
+                }
+            }
+        }
+
+        div#invite-list {
+            background: $off-white;
+        }
+    } // close #buddypress
 }
 
@@ -410 +696 @@
 
         ul {
-            background-color: $off-white;
             border-bottom: 1px solid rgba($border-light, 0.9);
-            border-top: 1px solid rgba($border-light, 0.9);
             overflow: hidden;
             padding: 0;
@@ -419 +703 @@
 
                 a {
-                    color: #0073c1;
 
                     span {border-radius: 25%;}
@@ -429 +712 @@
 } // close #buddypress
 
-// .bp-user #object-nav @ small screen as a dropdown
-
-.bp-user {
-
-    #buddypress {
-
-        @include small-only {
-
-            #object-nav {
-                background: $off-white;
-                border: 1px solid $border-light;
-                overflow: visible;
-                padding: $spacing-val-sm;
-
-                ul {
-                    border: 0;
-                    height: 0;
-                    // all latest vendor releases handle transitions, so no prefixes used.
-                    transition: height 0.3s ease-in-out 0.7s;
-                    visibility: hidden;
-                }
-
-                &:before {
-                    content: "Menu \021E9";
-                    display: inline;
-                    opacity: 0.7;
-                }
-
-                &:hover,
-                &:focus {
-                    &:before {content: "Menu \021E7";}
-
-                    ul {
-                        height: 320px;
-                        opacity: 1;
-                        overflow-y: auto;
-                        visibility: visible;
-                    }
-                }
-            }
-
-            #subnav {
-                clear: both;
-            }
-
-        } // close @media
-    }
-}
 
 /*__ Horizontal menus __*/
@@ -520 +755 @@
 
         ul {
-            background-color: $light-background;
             border-bottom: 0;
             margin-top: $spacing-val-xs;
@@ -526 +760 @@
 
             li.last {
-                background: $content-background;
                 margin-top: 0;
                 padding: $spacing-val-xs $spacing-val-xs $spacing-val-xs 0;
@@ -570 +803 @@
 // to sit alongside the vert menu
 // 2017 right sidebar is displayed if the widget sidebar has widgets;
-// we'll only display object nav as a vert menu if sidebar not present.
+// we'll only display object nav as a vert menu if not .two-column-page.
 
 @include medium-up {
 
-    body.no-sidebar {
+    body:not(.page-two-column) {
 
         #buddypress {
-
-            #item-header,
-            #item-body {
-                background: $content-background;
-            }
 
             #object-nav {
@@ -631 +859 @@
 @include med-small-up {
 
-    #main {
-
-        #buddypress {
-
-            #group-create-tabs.item-list-tabs {
-
-                ul:before,
-                ul:after {
-                    content: " ";
-                    display: table;
-                }
-
-                ul:after {
-                    clear: both;
-                }
-
-                ul {
-                    background: none;
-                    border: 0;
-                    border-bottom: 1px solid $border-med;
-                    overflow: visible;
-                    padding-bottom: 0;
-
-                    li {
-                        float: left;
-                        width: auto;
-                    }
-
-                    li.selected,
-                    li.current {
-                        border: 1px solid $border-med;
-                        border-bottom-color: $content-background;
-                        @include border-top-radius(4px);
-                        margin-bottom: -1px;
-
-                        a {
-                            background: none;
-                            color: $body-text;
-                            outline: none;
-                        }
-                    }
-                }
-
-            } // close .item-list-tabs
-
-            #subnav {
-                ul {
-                    border-bottom: 0;
-                }
-
-            } // close #subnav
-        } // close #buddypress
-    }
+    #buddypress {
+
+        #group-create-tabs.item-list-tabs {
+
+            ul:before,
+            ul:after {
+                content: " ";
+                display: table;
+            }
+
+            ul:after {
+                clear: both;
+            }
+
+            ul {
+                background: none;
+                border: 0;
+                border-bottom: 1px solid $border-med;
+                overflow: visible;
+                padding-bottom: 0;
+
+                li {
+                    float: left;
+                    width: auto;
+                }
+
+                li.selected,
+                li.current {
+                    border: 1px solid $border-med;
+                    border-bottom-color: $content-background;
+                    @include border-top-radius(4px);
+                    margin-bottom: -1px;
+
+                    a {
+                        background: none;
+                        color: $body-text;
+                        outline: none;
+                    }
+                }
+            }
+
+        } // close .item-list-tabs
+
+        #subnav {
+            ul {
+                border-bottom: 0;
+            }
+
+        } // close #subnav
+    } // close #buddypress
+
 } // close @media
 
@@ -771 +997 @@
 
     .action {
+
         .generic-button {
+
             a {
+
                 &:focus,
                 &:hover {
@@ -852 +1081 @@
                     .update {
                         display: block;
-                        @include font-size(12);
+                        @include font-size(13);
 
                         @include medium-up {
@@ -893 +1122 @@
                 margin-left: 0;
                 padding: $spacing-val-md 0 $spacing-val-xs;
+
                 // push the actions to the right
-
                 @include medium-up {
                     clear: none;
@@ -918 +1147 @@
                     // position but inline-block the buttons
 
-                    @include med-small-up {
+                    @include small-up {
                         // keep buttons to a row small tablet up
                         margin: 0 $spacing-val-sm $spacing-val-sm 0;
@@ -1089 +1318 @@
 
             .activity-avatar {
+
                 a {
+
                     img.avatar {
                         height: 30px;
@@ -1110 +1341 @@
 
             .activity-header {
-                line-height: inherit;
                 margin-right: 0;
 
                 p {
-                    background-color: $light-background;
                     border: 1px solid rgba($border-light, 0.6);
-                    color: #727272;
                     margin-top: 0;
                     padding: 0 0.2em;
@@ -1122 +1350 @@
 
                 img.avatar {
+                    box-shadow: none;
                     display: inline-block;
-                    margin-bottom: 0 !important; // have to match to BP
+                    margin: 0 5px !important; // have to match to BP
+                    vertical-align: middle;
                 }
             } // close .activity-header
 
             .activity-meta {
+
                 a {
                     display: block;
                     margin-bottom: $spacing-val-xs;
 
-                    @include small-up-bp {
+                    @include small-up {
                         display: inline-block;
                         margin-bottom: 0;
+                        width: auto;
                     }
                 }
@@ -1198 +1430 @@
         .activity-comments {
             border-left: 1px solid $border-light;
-            margin-top: 5px;
+            margin: $spacing-val-md 0 $spacing-val-md;
+
+            @include small-up {
+                margin-left: $spacing-val-md;
+            }
 
             ul {
-                background: rgba($light-background, 0.6);
-                color: #737373;
                 margin: 15px 0 0 2px;
+
+                li {
+                    border-top: 1px solid $border-color;
+                }
 
                 a {
@@ -1211 +1449 @@
 
             .acomment-meta {
-                color: #737373;
+                border-bottom: 1px solid $border-light;
             }
 
@@ -1257 +1495 @@
 
         @include medium-up {
+
             li {
                 .item-avatar,
@@ -1265 +1504 @@
                 .action {
                     float: right;
+                }
+            }
+
+            li.is-current-user {
+
+                .item {
+                    float: none;
+                    left: 0;
+                    padding-left: 5%;
+                    width: auto;
                 }
             }
@@ -1319 +1568 @@
 *-----------------------------------------------------------
 */
+@include med-small-up {
+
+
+    .bp-user.page-two-column {
+
+        #buddypress {
+
+            #cover-image-container {
+
+                #item-header-cover-image {
+
+                    #item-header-content {
+                        margin-left: 140px;
+                        margin-top: -100px;
+                    }
+                }
+            }
+        }
+    }
+
+    .single-item.groups.page-two-column {
+
+        #buddypress {
+
+            #cover-image-container {
+
+                #item-header-cover-image {
+
+                    #item-header-content {
+                        margin-left: 10px;
+                    }
+                }
+            }
+        }
+    }
+
+} // close media
 
 .bp-user,
@@ -1324 +1610 @@
 
     #buddypress {
+
+        // we need to remove the cover image dec styles
+        // & reset them for med up  only.
+        #item-header-cover-image {
+            .user-nicename {
+                color: $body-text;
+                text-shadow: none;
+            }
+        }
+
+        @include med-small-up {
+
+            #item-header-cover-image {
+
+                .user-nicename {
+                    color: $white;
+                    text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
+                }
+            }
+        }
 
         #item-header-content {
@@ -1418 +1724 @@
 
                     a {
-                        border-bottom: 0;
 
                         img {
@@ -1525 +1830 @@
 
                 a {
-                    border-bottom: 0;
                     display: inline-block;
                     float: none;
@@ -1560 +1864 @@
 *-----------------------------------------------------------
 */
+
 
 /**
@@ -1569 +1874 @@
 */
 
+.groups.single-item.members {
+
+    #buddypress {
+
+        #subnav.item-list-tabs {
+
+            ul {
+                background: none;
+                border-top: 0;
+            }
+
+        }
+    }
+
+}
+
 /**
 *-----------------------------------------
@@ -1710 +2031 @@
                 }
 
-                margin: $spacing-val-xs $spacing-val-xs 0 0;
+                margin: $spacing-val-xs 0 0;
             }
         }
@@ -1779 +2100 @@
         .pag-count {font-style: italic;}
 
-        .notifications-options-nav {
-            border: 1px solid rgba($border-color, 0.5);
+        .notifications-options-nav,
+        .messages-options-nav {
+
             float: left;
             width: 100%;
@@ -1794 +2116 @@
             select,
             input {
-                border: 0;
+
                 @include font-size(14);
                 outline: 0;
@@ -1802 +2124 @@
             select {
                 float: left;
-                margin-right: 0;
-                width: 60%;
+                margin-right: 1%;
+                width: 59%;
             }
 
@@ -1813 +2135 @@
             }
 
-        } // close .notifications-options-nav
+            input[disabled="disabled"]:focus,
+            input[disabled="disabled"]:hover {
+                background: none;
+            }
+
+
+        } // close .notifications-options-nav/.messages-options-nav
 
     } //close #buddypress
@@ -1829 +2157 @@
 
         .profile {
-            .bp-widget {
+
                 h2 {
-                    background: lighten($dark-background, 15%);
-                    color: #fff;
                     margin: $spacing-val-lg 0 $spacing-val-sm;
                     padding: 0.1em 0 0.1em 0.4em;
@@ -1838 +2164 @@
 
                 table {margin-top: 0;}
-            }
+
+                .profile-fields {
+
+                    tr.alt {
+
+                        td {
+                            color: $body-text;
+                        }
+                    }
+
+                    tr:last-child {
+                        border-bottom: 0;
+                    }
+                }
+
             /* Edit profile */
 
@@ -1875 +2215 @@
 
                 .field-visibility-settings-toggle,
+                .field-visibility-settings-notoggle,
                 .field-visibility-settings {
                     @include font-size(14);
+                    margin-top: $spacing-val-sm;
                 }
 
@@ -1882 +2224 @@
                 .visibility-toggle-link {
                     background: $dark-background;
+                    @include border-radius(3px);
                     color: #fff;
                     padding: 0.2em 0.5em;
@@ -1933 +2276 @@
         #message-thread {
             //Single message view
+
             a {
                 border-bottom: 0;
@@ -1980 +2324 @@
 
             #send-reply {
+
                 .message-content {
                     background: $content-background;
@@ -1995 +2340 @@
 
             thead {
+
                 tr {
-                    background: lighten($dark-background, 10%);
+                    background: none;
+                    border-bottom: 1px solid $border-color;
+
+
+                    th {
+                        background: #555;
+                    }
                 }
             }
 
             tr {
+                border-bottom: 5px solid $medium-grey;
+
                 td {
-                    background: $content-background;
                     display: inline-block;
                     float: left;
@@ -2009 +2362 @@
                 td.thread-star,
                 td.thread-options {
-                    border-bottom-color: $medium-background;
-                    border-bottom-width: 2px;
+                    border-bottom-color: $border-color;
+                    border-bottom-width: 1px;
                     height: 2.4em;
                     padding-bottom: 0.2em;
@@ -2018 +2371 @@
                         padding-top: 0;
                     }
+                }
+
+                td.bulk-select-check,
+                td.thread-star,
+                td.thread-from,
+                td.thread-info,
+                td.thread-options {
+                    border-top: 0;
                 }
 
@@ -2081 +2442 @@
 
             tr.unread {
+
                 td {
-                    background: $unread;
+                    background: none;
                     border-color: $border-color;
                 }
@@ -2102 +2464 @@
                 border-right: 0;
                 width: 30px;
-            }
-        }
-
-        .messages-options-nav {
-            select {
-                height: auto;
             }
         }
@@ -2296 +2652 @@
 // Attempt to reset form control widths
 #main {
+
     #buddypress {
+
         .standard-form {
 
-            li {float: none;}
+            li {
+                float: none;
+            }
+
             input[type='text'],
             input[type='email'],
@@ -2309 +2670 @@
     }
 }
-
 
 #buddypress {
@@ -2365 +2725 @@
 
 #buddypress {
+
     div.dir-search,
     div.message-search,
@@ -2376 +2737 @@
         form { // *sigh* only to bludgeon over specified rules
             border: 1px solid rgba($border-color, 0.6);
+            @include border-radius(2px);
             overflow: hidden;
 
@@ -2381 +2743 @@
                 float: left;
                 margin: 0;
-            }
-
-            input[type='text'] {
+                width: 70%;
+            }
+
+            input[type="text"] {
                 float: left;
                 margin: 0;
-                width: 70%;
-            }
-
-            input[type='text'],
-            input[type='submit'] {
+                width: 100%;
+            }
+
+            input[type="text"],
+            input[type="submit"] {
+                border: 0;
                 @include font-size(14);
-                border: 0;
                 line-height: inherit;
             }
 
-            input[type='text'] {
+            input[type="text"] {
                 border-right: 1px solid rgba($border-color, 0.6);
+                font-weight: 400;
                 padding: 0.2em 0 0.2em 0.2em;
             }
 
-            input[type='submit'] {
+            input[type="submit"] {
+                @include border-radius-none();
                 float: right;
                 font-weight: normal;
@@ -2413 +2778 @@
     } // close .dir-search, .message-search
 
+    // Dirs & certain components hide search hides labels so can't width the label element
+    // adjust so that the input takes reduced width.
+
+    div.dir-search {
+        margin-top: 0;
+    }
+
+    .dir-search #search-members-form,
+    #search-groups-form,
+    #search-message-form {
+
+        input[type='text'] {
+            float: left;
+            margin: 0;
+            width: 70%;
+        }
+    }
+
     // Shift the search parent to the right and allow to shrinkwrap
 
@@ -2421 +2804 @@
             float: right;
             margin-bottom: 5px !important;
-
-            form {
-                label,
-                input[type='text'],
-                input[type='submit'] {
-                    width: auto;
-                }
-            }
         }
 
@@ -2437 +2812 @@
 
         .dir-search,
-
-        .message-search {
+        .message-search,
+        li.groups-members-search {
 
             form {
@@ -2455 +2830 @@
 } // close #buddypress
 
+// Adjustments for form elements colors, backgrounds, borders under the dark scheme.
+body.colors-dark {
+
+    #page { // for weight
+
+        #buddypress {
+
+            .dir-search,
+            .groups-members-search,
+            .message-search {
+
+                form {
+                    background: #333;
+                    border-color: #555;
+                    @include border-radius(2px);
+                    padding: 1px;
+                }
+
+                input[type="text"] {
+                    background: none;
+                }
+
+                input[type="submit"] {
+                    @include border-radius(2px);
+                }
+            }
+        }
+
+        .message-search {
+            margin-top: 0;
+        }
+    }
+}
 /**
 *-------------------------------------------------------------------------------
@@ -2473 +2881 @@
 
         tr th {
-            background: lighten($dark-background, 10%);
-            border-color: darken($border-light, 20%);
-            color: $content-background;
+            background: $light-background;
+            border-color: $border-light;
+            color: $body-text;
         }
 
@@ -2537 +2945 @@
 
     } // .notifications, .message-notices
+
+    .notifications { // table element
+        .actions { // th element
+            text-align: center;
+        }
+    }
 } // #buddypress
 
@@ -2574 +2988 @@
     } // close #message
 
+    .bp-avatar-status,
+    .bp-cover-image-status {
+
+        .warning {
+            background: #7dd4ff;
+            border: 1px solid #000;
+            color: $body-text;
+            @include font-size(16);
+        }
+    }
+
 } // close  #buddypress