Index: .scss-lint.yml =================================================================== --- .scss-lint.yml (revision 10712) +++ .scss-lint.yml (nonexistent) @@ -1,193 +0,0 @@ -# Default application configuration that all configurations inherit from. - -scss_files: "**/*.scss" - -linters: - BangFormat: - enabled: true - space_before_bang: true - space_after_bang: false - - BorderZero: - enabled: true - convention: zero # or `none` - - ColorKeyword: - enabled: true - - ColorVariable: - enabled: false - - Comment: - enabled: false - - DebugStatement: - enabled: true - - DeclarationOrder: - enabled: false - - DuplicateProperty: - enabled: false - - ElsePlacement: - enabled: true - style: same_line # or 'new_line' - - EmptyLineBetweenBlocks: - enabled: true - ignore_single_line_blocks: true - - EmptyRule: - enabled: true - - FinalNewline: - enabled: true - present: true - - HexLength: - enabled: true - style: short # or 'long' - - HexNotation: - enabled: true - style: lowercase # or 'uppercase' - - HexValidation: - enabled: true - - IdSelector: - enabled: false - - ImportantRule: - enabled: false - - ImportPath: - enabled: true - leading_underscore: false - filename_extension: false - - Indentation: - enabled: true - allow_non_nested_indentation: false - character: tab # or 'space' - width: 1 - - LeadingZero: - enabled: true - style: include_zero # or 'include_zero' - - MergeableSelector: - enabled: false - force_nesting: true - - NameFormat: - enabled: true - allow_leading_underscore: true - convention: hyphenated_lowercase # or 'BEM', or a regex pattern - - NestingDepth: - enabled: true - max_depth: 7 - - PlaceholderInExtend: - enabled: true - - PropertyCount: - enabled: false - include_nested: false - max_properties: 10 - - PropertySortOrder: - enabled: true - ignore_unspecified: false - separate_groups: false - - PropertySpelling: - enabled: true - extra_properties: [] - - PseudoElement: - enabled: false - - QualifyingElement: - enabled: false - allow_element_with_attribute: false - allow_element_with_class: false - allow_element_with_id: false - - SelectorDepth: - enabled: true - max_depth: 6 - - SelectorFormat: - enabled: true - convention: hyphenated_lowercase # or 'BEM', or 'hyphenated_BEM', or 'snake_case', or 'camel_case', or a regex pattern - ignored_names: ['signup_form', 'send_message_form', 'ac_results'] - - Shorthand: - enabled: false - - SingleLinePerProperty: - enabled: true - allow_single_line_rule_sets: true - - SingleLinePerSelector: - enabled: true - - SpaceAfterComma: - enabled: true - - SpaceAfterPropertyColon: - enabled: true - style: one_space # or 'no_space', or 'at_least_one_space', or 'aligned' - - SpaceAfterPropertyName: - enabled: true - - SpaceBeforeBrace: - enabled: true - style: space # or 'new_line' - allow_single_line_padding: false - - SpaceBetweenParens: - enabled: true - spaces: 0 - - StringQuotes: - enabled: true - style: double_quotes - - TrailingSemicolon: - enabled: true - - TrailingZero: - enabled: false - - UnnecessaryMantissa: - enabled: true - - UnnecessaryParentReference: - enabled: true - - UrlFormat: - enabled: true - - UrlQuotes: - enabled: true - - VariableForProperty: - enabled: false - properties: [] - - VendorPrefix: - enabled: true - identifier_list: base - additional_identifiers: [] - excluded_identifiers: [] - - ZeroUnit: - enabled: true - - Compass::*: - enabled: false Index: Gruntfile.js =================================================================== --- Gruntfile.js (revision 10712) +++ Gruntfile.js (working copy) @@ -19,8 +19,12 @@ BP_EXCLUDED_MISC = [ '!bp-forums/bbpress/**/*' - ]; + ], + // PostCSS + stylelint = require('stylelint'), + reporter = require('postcss-reporter'); + require( 'matchdep' ).filterDev( ['grunt-*', '!grunt-legacy-util'] ).forEach( grunt.loadNpmTasks ); grunt.util = require( 'grunt-legacy-util' ); @@ -75,6 +79,32 @@ } } }, + postcss: { + options: { + map: false, + processors: [], + failOnError: false + }, + lint: { + options: { + syntax: require('postcss-scss'), + processors: [ + stylelint(), + reporter({ + clearMessages: true, + throwError: true + } + ) + ] + }, + expand: true, + cwd: SOURCE_DIR, + dest: SOURCE_DIR, + src: [ [ BP_CSS.concat( BP_EXCLUDED_CSS, BP_EXCLUDED_MISC ) ], + '!bp-templates/bp-legacy/css/twenty*.css', + 'bp-templates/bp-legacy/css/*.scss' ] + } + }, sass: { styles: { cwd: SOURCE_DIR, @@ -180,14 +210,6 @@ src: BP_JS } }, - scsslint: { - options: { - bundleExec: false, - colorizeOutput: true, - config: '.scss-lint.yml' - }, - core: [ SOURCE_DIR + 'bp-templates/bp-legacy/css/*.scss' ] - }, cssmin: { minify: { cwd: BUILD_DIR, @@ -248,7 +270,7 @@ /** * Register tasks. */ - grunt.registerTask( 'src', ['checkDependencies', 'jsvalidate:src', 'jshint', 'scsslint', 'sass', 'cssjanus'] ); + grunt.registerTask( 'src', ['checkDependencies', 'jsvalidate:src', 'jshint', 'postcss:lint', 'sass', 'cssjanus'] ); grunt.registerTask( 'commit', ['src', 'checktextdomain', 'imagemin'] ); grunt.registerTask( 'build', ['commit', 'clean:all', 'copy:files', 'uglify', 'jsvalidate:build', 'cssmin', 'makepot', 'exec:bpdefault'] ); grunt.registerTask( 'release', ['build', 'exec:bbpress'] ); Index: package.json =================================================================== --- package.json (revision 10712) +++ package.json (working copy) @@ -18,12 +18,15 @@ "grunt-exec": "~0.4.6", "grunt-check-dependencies": "~0.12.0", "grunt-jsvalidate": "~0.2.2", + "grunt-postcss": "~0.8.0", "grunt-legacy-util": "^0.2.0", "grunt-patch-wordpress": "~0.3.0", "grunt-sass": "~1.1.0", - "grunt-scss-lint": "~0.3.8", "grunt-wp-i18n": "~0.5.3", - "matchdep": "~1.0.0" + "matchdep": "~1.0.0", + "postcss-reporter": "~1.3.3", + "postcss-scss": "~0.1.7", + "stylelint": "~6.1.1" }, "engines": { "node": ">=4.2.1" Index: src/bp-activity/admin/css/admin-rtl.css =================================================================== --- src/bp-activity/admin/css/admin-rtl.css (revision 10712) +++ src/bp-activity/admin/css/admin-rtl.css (working copy) @@ -1,16 +1,20 @@ .akismet-status { float: left; } + .akismet-status a { - color: #AAA; + color: #aaa; font-style: italic; } + .akismet-history { margin: 13px; } + .akismet-history div { margin-bottom: 13px; } + .akismet-history span { color: #999; } @@ -18,30 +22,36 @@ #wp-bp-activities-wrap { padding: 5px 0; } + #bp-activities { height: 120px; } + #bp-replyhead { font-size: 1em; line-height: 1.4em; margin: 0; } + #bp-replysubmit { margin: 0; padding: 0 0 3px; text-align: center; } + #bp-replysubmit .error { - color: red; + color: #f00; line-height: 21px; text-align: center; vertical-align: center; } + #bp-replysubmit img.waiting { float: left; padding: 4px 10px 0; vertical-align: top; } + #bp-activities-form .column-response img { float: right; margin-bottom: 5px; @@ -48,6 +58,7 @@ margin-left: 10px; margin-top: 1px; } + .activity-errors { list-style-type: disc; margin-right: 2em; @@ -57,31 +68,38 @@ #bp_activity_content div.inside { line-height: 0; } + #bp_activity_action h3, #bp_activity_content h3 { cursor: auto; } + #bp_activity_action td.mceIframeContainer, #bp_activity_content td.mceIframeContainer { - background-color: white; + background-color: #fff; } + #post-body #bp-activities-action_resize, #post-body #bp-activities-content_resize { position: inherit; margin-top: -2px; } + #bp_activity_link input { width: 99%; } + #bp-activities-primaryid { margin-bottom: 1em; } + .column-action { width: 12%; } @media screen and (max-width: 782px) { + body.toplevel_page_bp-activity .wp-list-table tr:not(.inline-edit-row):not(.no-items) td:not(.check-column) { display: table-cell; } -} \ No newline at end of file +} Index: src/bp-activity/admin/css/admin.css =================================================================== --- src/bp-activity/admin/css/admin.css (revision 10712) +++ src/bp-activity/admin/css/admin.css (working copy) @@ -1,16 +1,20 @@ .akismet-status { float: right; } + .akismet-status a { - color: #AAA; + color: #aaa; font-style: italic; } + .akismet-history { margin: 13px; } + .akismet-history div { margin-bottom: 13px; } + .akismet-history span { color: #999; } @@ -18,30 +22,36 @@ #wp-bp-activities-wrap { padding: 5px 0; } + #bp-activities { height: 120px; } + #bp-replyhead { font-size: 1em; line-height: 1.4em; margin: 0; } + #bp-replysubmit { margin: 0; padding: 0 0 3px; text-align: center; } + #bp-replysubmit .error { - color: red; + color: #f00; line-height: 21px; text-align: center; vertical-align: center; } + #bp-replysubmit img.waiting { float: right; padding: 4px 10px 0; vertical-align: top; } + #bp-activities-form .column-response img { float: left; margin-bottom: 5px; @@ -48,6 +58,7 @@ margin-right: 10px; margin-top: 1px; } + .activity-errors { list-style-type: disc; margin-left: 2em; @@ -57,31 +68,38 @@ #bp_activity_content div.inside { line-height: 0; } + #bp_activity_action h3, #bp_activity_content h3 { cursor: auto; } + #bp_activity_action td.mceIframeContainer, #bp_activity_content td.mceIframeContainer { - background-color: white; + background-color: #fff; } + #post-body #bp-activities-action_resize, #post-body #bp-activities-content_resize { position: inherit; margin-top: -2px; } + #bp_activity_link input { width: 99%; } + #bp-activities-primaryid { margin-bottom: 1em; } + .column-action { width: 12%; } @media screen and (max-width: 782px) { + body.toplevel_page_bp-activity .wp-list-table tr:not(.inline-edit-row):not(.no-items) td:not(.check-column) { display: table-cell; } -} \ No newline at end of file +} Index: src/bp-activity/css/mentions-rtl.css =================================================================== --- src/bp-activity/css/mentions-rtl.css (revision 10712) +++ src/bp-activity/css/mentions-rtl.css (working copy) @@ -2,8 +2,8 @@ background: rgba(204, 204, 204, 0.8); border-radius: 2px; border: 1px solid rgb(204, 204, 204); - box-shadow: 0 0 5px rgba(204, 204, 204, 0.25), 0 0 1px #FFF; - color: #D84800; + box-shadow: 0 0 5px rgba(204, 204, 204, 0.25), 0 0 1px #fff; + color: #d84800; display: none; font-family: sans-serif; margin-top: 18px; @@ -13,16 +13,18 @@ } /* @noflip */ .atwho-view { - left: 0; + left: 0; } + .atwho-view ul { - background: #FFF; + background: #fff; list-style: none; margin: auto; padding: 0; } + .atwho-view ul li { - border-bottom: 1px solid #EFEFEF; + border-bottom: 1px solid #efefef; box-sizing: content-box; cursor: pointer; display: block; @@ -33,48 +35,58 @@ overflow: hidden; padding: 5px 10px; } + .atwho-view img { border-radius: 2px; float: left; height: 20px; - margin-top:0; + margin-top: 0; width: 20px; } + .atwho-view strong { - background: #EFEFEF; + background: #efefef; font-weight: bold; } + .atwho-view .username strong { - color: #D54E21; + color: #d54e21; } + .atwho-view small { - color: #AAA; + color: #aaa; float: left; font-size: smaller; font-weight: normal; margin: 0 40px 0 10px; } + .atwho-view .cur { background: rgba(239, 239, 239, 0.5); } @media (max-width: 900px) { + .atwho-view img { float: right; margin: 0 0 0 10px; } } + @media (max-width: 400px) { + .atwho-view ul li { font-size: 16px; line-height: 23px; padding: 13px; } + .atwho-view ul li img { height: 30px; margin-top: -5px; width: 30px; } + .atwho-view { border-radius: 0; height: 100%; @@ -81,11 +93,13 @@ right: 0 !important; width: 100%; } + .atwho-view ul li .username { display: inline-block; margin: -10px 0 0 0; padding: 10px 0; } + .atwho-view ul li small { display: inline-block; margin-right: 20px; Index: src/bp-activity/css/mentions.css =================================================================== --- src/bp-activity/css/mentions.css (revision 10712) +++ src/bp-activity/css/mentions.css (working copy) @@ -2,8 +2,8 @@ background: rgba(204, 204, 204, 0.8); border-radius: 2px; border: 1px solid rgb(204, 204, 204); - box-shadow: 0 0 5px rgba(204, 204, 204, 0.25), 0 0 1px #FFF; - color: #D84800; + box-shadow: 0 0 5px rgba(204, 204, 204, 0.25), 0 0 1px #fff; + color: #d84800; display: none; font-family: sans-serif; margin-top: 18px; @@ -13,16 +13,18 @@ } /* @noflip */ .atwho-view { - left: 0; + left: 0; } + .atwho-view ul { - background: #FFF; + background: #fff; list-style: none; margin: auto; padding: 0; } + .atwho-view ul li { - border-bottom: 1px solid #EFEFEF; + border-bottom: 1px solid #efefef; box-sizing: content-box; cursor: pointer; display: block; @@ -33,48 +35,58 @@ overflow: hidden; padding: 5px 10px; } + .atwho-view img { border-radius: 2px; float: right; height: 20px; - margin-top:0; + margin-top: 0; width: 20px; } + .atwho-view strong { - background: #EFEFEF; + background: #efefef; font-weight: bold; } + .atwho-view .username strong { - color: #D54E21; + color: #d54e21; } + .atwho-view small { - color: #AAA; + color: #aaa; float: right; font-size: smaller; font-weight: normal; margin: 0 10px 0 40px; } + .atwho-view .cur { background: rgba(239, 239, 239, 0.5); } @media (max-width: 900px) { + .atwho-view img { float: left; margin: 0 10px 0 0; } } + @media (max-width: 400px) { + .atwho-view ul li { font-size: 16px; line-height: 23px; padding: 13px; } + .atwho-view ul li img { height: 30px; margin-top: -5px; width: 30px; } + .atwho-view { border-radius: 0; height: 100%; @@ -81,11 +93,13 @@ left: 0 !important; width: 100%; } + .atwho-view ul li .username { display: inline-block; margin: -10px 0 0 0; padding: 10px 0; } + .atwho-view ul li small { display: inline-block; margin-left: 20px; Index: src/bp-core/admin/css/common-rtl.css =================================================================== --- src/bp-core/admin/css/common-rtl.css (revision 10712) +++ src/bp-core/admin/css/common-rtl.css (working copy) @@ -33,7 +33,7 @@ .bp-badge { color: #d84800; display: inline-block; - font: normal 150px/1 'dashicons' !important; + font: normal 150px/1 "dashicons" !important; } .bp-badge:before { @@ -47,6 +47,7 @@ } @media only screen and (max-width: 500px) { + .about-wrap .bp-badge { position: relative; margin: 10px auto; @@ -154,15 +155,17 @@ .dashboard_page_bp-about .about-wrap .changelog .changelog-title { font-size: 1.25em; line-height: 1.5em; - margin: 1.25em 0 .6em; + margin: 1.25em 0 0.6em; text-align: center; } @media screen and ( max-width: 782px ) { + .index_page_bp-about .about-wrap .headline-feature, .dashboard_page_bp-about .about-wrap .headline-feature { max-width: 100%; } + .index_page_bp-about .about-wrap .headline-feature h3, .dahsboard_page_bp-about .about-wrap .headline-feature h3, .index_page_bp-about .about-wrap .headline-feature .headline-title, @@ -169,14 +172,17 @@ .dashboard_page_bp-about .about-wrap .headline-feature .headline-title { font-size: 2em; } + .index_page_bp-about .bp-features-section, .dashboard_page_bp-about .bp-features-section { margin-bottom: 0; } + .index_page_bp-about .about-wrap .feature-section, .dashboard_page_bp-about .about-wrap .feature-section { margin-top: 0; } + .index_page_bp-about .about-wrap .two-col > div, .dashboard_page_bp-about .about-wrap .two-col > div { border-bottom: 1px solid rgba(0, 0, 0, 0.1); @@ -184,11 +190,13 @@ padding-bottom: 1em; width: 100%; } + .index_page_bp-about .changelog .two-col > div, .dashboard_page_bp-about .changelog .two-col > div { margin-top: 0; padding-bottom: 0; } + .index_page_bp-about .about-wrap .changelog .changelog-title, .dashboard_page_bp-about .about-wrap .changelog .changelog-title { text-align: right; @@ -229,7 +237,7 @@ #adminmenu #toplevel_page_bp-friends .wp-menu-image:before, #adminmenu #toplevel_page_bp-friends_user .wp-menu-image:before, -#adminmenu #toplevel_page_bp-friends_network .wp-menu-image:before{ +#adminmenu #toplevel_page_bp-friends_network .wp-menu-image:before { content: "\f454"; } @@ -255,7 +263,7 @@ } .settings_page_bp-components td.plugin-title span:before { - font-family: 'dashicons'; + font-family: dashicons; font-size: 18px; } @@ -308,13 +316,16 @@ } @media screen and ( max-width: 782px ) { + .settings_page_bp-components td.plugin-title span { margin-top: 5px; } + #bp-admin-component-form .wp-list-table.plugins .plugin-title { display: block; width: auto; } + #bp-admin-component-form .subsubsub { margin-bottom: 0; padding-bottom: 35px; Index: src/bp-core/admin/css/common.css =================================================================== --- src/bp-core/admin/css/common.css (revision 10712) +++ src/bp-core/admin/css/common.css (working copy) @@ -33,7 +33,7 @@ .bp-badge { color: #d84800; display: inline-block; - font: normal 150px/1 'dashicons' !important; + font: normal 150px/1 "dashicons" !important; } .bp-badge:before { @@ -47,6 +47,7 @@ } @media only screen and (max-width: 500px) { + .about-wrap .bp-badge { position: relative; margin: 10px auto; @@ -154,15 +155,17 @@ .dashboard_page_bp-about .about-wrap .changelog .changelog-title { font-size: 1.25em; line-height: 1.5em; - margin: 1.25em 0 .6em; + margin: 1.25em 0 0.6em; text-align: center; } @media screen and ( max-width: 782px ) { + .index_page_bp-about .about-wrap .headline-feature, .dashboard_page_bp-about .about-wrap .headline-feature { max-width: 100%; } + .index_page_bp-about .about-wrap .headline-feature h3, .dahsboard_page_bp-about .about-wrap .headline-feature h3, .index_page_bp-about .about-wrap .headline-feature .headline-title, @@ -169,14 +172,17 @@ .dashboard_page_bp-about .about-wrap .headline-feature .headline-title { font-size: 2em; } + .index_page_bp-about .bp-features-section, .dashboard_page_bp-about .bp-features-section { margin-bottom: 0; } + .index_page_bp-about .about-wrap .feature-section, .dashboard_page_bp-about .about-wrap .feature-section { margin-top: 0; } + .index_page_bp-about .about-wrap .two-col > div, .dashboard_page_bp-about .about-wrap .two-col > div { border-bottom: 1px solid rgba(0, 0, 0, 0.1); @@ -184,11 +190,13 @@ padding-bottom: 1em; width: 100%; } + .index_page_bp-about .changelog .two-col > div, .dashboard_page_bp-about .changelog .two-col > div { margin-top: 0; padding-bottom: 0; } + .index_page_bp-about .about-wrap .changelog .changelog-title, .dashboard_page_bp-about .about-wrap .changelog .changelog-title { text-align: left; @@ -229,7 +237,7 @@ #adminmenu #toplevel_page_bp-friends .wp-menu-image:before, #adminmenu #toplevel_page_bp-friends_user .wp-menu-image:before, -#adminmenu #toplevel_page_bp-friends_network .wp-menu-image:before{ +#adminmenu #toplevel_page_bp-friends_network .wp-menu-image:before { content: "\f454"; } @@ -255,7 +263,7 @@ } .settings_page_bp-components td.plugin-title span:before { - font-family: 'dashicons'; + font-family: dashicons; font-size: 18px; } @@ -308,13 +316,16 @@ } @media screen and ( max-width: 782px ) { + .settings_page_bp-components td.plugin-title span { margin-top: 5px; } + #bp-admin-component-form .wp-list-table.plugins .plugin-title { display: block; width: auto; } + #bp-admin-component-form .subsubsub { margin-bottom: 0; padding-bottom: 35px; Index: src/bp-core/admin/css/customizer-controls-rtl.css =================================================================== --- src/bp-core/admin/css/customizer-controls-rtl.css (revision 10712) +++ src/bp-core/admin/css/customizer-controls-rtl.css (working copy) @@ -1,7 +1,7 @@ .customize-control-range output { - background-color: #FFF; - border: 1px solid #DDD; - box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.07 ); + background-color: #fff; + border: 1px solid #ddd; + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07); float: right; margin-left: 10px; margin-top: -4px; Index: src/bp-core/admin/css/customizer-controls.css =================================================================== --- src/bp-core/admin/css/customizer-controls.css (revision 10712) +++ src/bp-core/admin/css/customizer-controls.css (working copy) @@ -1,7 +1,7 @@ .customize-control-range output { - background-color: #FFF; - border: 1px solid #DDD; - box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.07 ); + background-color: #fff; + border: 1px solid #ddd; + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07); float: left; margin-right: 10px; margin-top: -4px; Index: src/bp-core/css/admin-bar-rtl.css =================================================================== --- src/bp-core/css/admin-bar-rtl.css (revision 10712) +++ src/bp-core/css/admin-bar-rtl.css (working copy) @@ -16,6 +16,7 @@ #wpadminbar .quicklinks li#wp-admin-bar-group-admin-with-avatar ul { right: 0; } + #wpadminbar .quicklinks li#wp-admin-bar-group-admin-with-avatar ul ul { right: 0; } @@ -24,7 +25,7 @@ #wpadminbar .quicklinks li#wp-admin-bar-my-account a span.count, #wpadminbar .quicklinks li#wp-admin-bar-my-account-with-avatar a span.count, #wpadminbar .quicklinks li#wp-admin-bar-bp-notifications #ab-pending-notifications { - background: #21759B; + background: #21759b; color: #fff; text-shadow: none; display: inline; @@ -40,7 +41,7 @@ #wpadminbar .quicklinks li#wp-admin-bar-bp-notifications #ab-pending-notifications { background: #ddd; color: #333; - margin: 0 + margin: 0; } #wpadminbar .quicklinks li#wp-admin-bar-bp-notifications #ab-pending-notifications.alert { @@ -49,7 +50,7 @@ } #wpadminbar .quicklinks li#wp-admin-bar-bp-notifications > a { - padding: 0 .5em; + padding: 0 0.5em; } #wp-admin-bar-user-info img.avatar { Index: src/bp-core/css/admin-bar.css =================================================================== --- src/bp-core/css/admin-bar.css (revision 10712) +++ src/bp-core/css/admin-bar.css (working copy) @@ -16,6 +16,7 @@ #wpadminbar .quicklinks li#wp-admin-bar-group-admin-with-avatar ul { left: 0; } + #wpadminbar .quicklinks li#wp-admin-bar-group-admin-with-avatar ul ul { left: 0; } @@ -24,7 +25,7 @@ #wpadminbar .quicklinks li#wp-admin-bar-my-account a span.count, #wpadminbar .quicklinks li#wp-admin-bar-my-account-with-avatar a span.count, #wpadminbar .quicklinks li#wp-admin-bar-bp-notifications #ab-pending-notifications { - background: #21759B; + background: #21759b; color: #fff; text-shadow: none; display: inline; @@ -40,7 +41,7 @@ #wpadminbar .quicklinks li#wp-admin-bar-bp-notifications #ab-pending-notifications { background: #ddd; color: #333; - margin: 0 + margin: 0; } #wpadminbar .quicklinks li#wp-admin-bar-bp-notifications #ab-pending-notifications.alert { @@ -49,7 +50,7 @@ } #wpadminbar .quicklinks li#wp-admin-bar-bp-notifications > a { - padding: 0 .5em; + padding: 0 0.5em; } #wp-admin-bar-user-info img.avatar { Index: src/bp-core/css/avatar-rtl.css =================================================================== --- src/bp-core/css/avatar-rtl.css (revision 10712) +++ src/bp-core/css/avatar-rtl.css (working copy) @@ -70,7 +70,7 @@ div.bp-avatar-nav { background: transparent; clear: both; - margin: 10px 0 10px; + margin: 10px 0; overflow: hidden; } @@ -176,6 +176,7 @@ } @supports (-ms-accelerator:true) { + .drag-drop-inside p.drag-drop-info { display: block; } @@ -182,7 +183,7 @@ } #avatar-to-crop { - margin: 0 auto 20px ; + margin: 0 auto 20px; text-align: right; } @@ -222,6 +223,7 @@ } @media screen and (min-width: 801px) { + #bp-webcam-avatar #avatar-to-crop { max-width: 64%; width: 64%; @@ -234,7 +236,7 @@ #bp-webcam-avatar #avatar-crop-actions { float: right; - margin: 0 0 20px 0; + margin: 0 0 20px; width: 50%; } @@ -299,7 +301,7 @@ } .bp-avatar .item { - overflow:hidden; + overflow: hidden; } .bp-avatar .avatar-crop-management.adjust { @@ -324,7 +326,7 @@ margin: 0 auto 10px; } - #bp-webcam-avatar .avatar-crop-management #avatar-crop-actions { + #bp-webcam-avatar .avatar-crop-management #avatar-crop-actions { width: auto; } @@ -368,9 +370,11 @@ float: right; margin: 0; } + .wp-admin #TB_window .bp-avatar #bp-webcam-avatar #avatar-to-crop { margin-bottom: 20px; } + @media screen and (min-width: 783px) { .wp-admin #TB_window .bp-avatar .avatar-crop-management { @@ -385,8 +389,8 @@ } .wp-admin #TB_window .bp-avatar #avatar-to-crop video { - width: 100%; - } + width: 100%; +} .wp-admin #TB_window .bp-avatar .avatar-crop-management a.button { height: auto; @@ -394,6 +398,7 @@ } @media screen and (min-width: 810px) { + .wp-admin #TB_window .bp-avatar #bp-webcam-avatar #avatar-to-crop { max-width: none; width: 76%; Index: src/bp-core/css/avatar.css =================================================================== --- src/bp-core/css/avatar.css (revision 10712) +++ src/bp-core/css/avatar.css (working copy) @@ -70,7 +70,7 @@ div.bp-avatar-nav { background: transparent; clear: both; - margin: 10px 0 10px; + margin: 10px 0; overflow: hidden; } @@ -176,6 +176,7 @@ } @supports (-ms-accelerator:true) { + .drag-drop-inside p.drag-drop-info { display: block; } @@ -182,7 +183,7 @@ } #avatar-to-crop { - margin: 0 auto 20px ; + margin: 0 auto 20px; text-align: left; } @@ -222,6 +223,7 @@ } @media screen and (min-width: 801px) { + #bp-webcam-avatar #avatar-to-crop { max-width: 64%; width: 64%; @@ -234,7 +236,7 @@ #bp-webcam-avatar #avatar-crop-actions { float: left; - margin: 0 0 20px 0; + margin: 0 0 20px; width: 50%; } @@ -299,7 +301,7 @@ } .bp-avatar .item { - overflow:hidden; + overflow: hidden; } .bp-avatar .avatar-crop-management.adjust { @@ -324,7 +326,7 @@ margin: 0 auto 10px; } - #bp-webcam-avatar .avatar-crop-management #avatar-crop-actions { + #bp-webcam-avatar .avatar-crop-management #avatar-crop-actions { width: auto; } @@ -368,9 +370,11 @@ float: left; margin: 0; } + .wp-admin #TB_window .bp-avatar #bp-webcam-avatar #avatar-to-crop { margin-bottom: 20px; } + @media screen and (min-width: 783px) { .wp-admin #TB_window .bp-avatar .avatar-crop-management { @@ -385,8 +389,8 @@ } .wp-admin #TB_window .bp-avatar #avatar-to-crop video { - width: 100%; - } + width: 100%; +} .wp-admin #TB_window .bp-avatar .avatar-crop-management a.button { height: auto; @@ -394,6 +398,7 @@ } @media screen and (min-width: 810px) { + .wp-admin #TB_window .bp-avatar #bp-webcam-avatar #avatar-to-crop { max-width: none; width: 76%; Index: src/bp-core/css/buddybar-rtl.css =================================================================== --- src/bp-core/css/buddybar-rtl.css (revision 10712) +++ src/bp-core/css/buddybar-rtl.css (working copy) @@ -1,6 +1,7 @@ body:not(.wp-admin) { padding-top: 25px !important; } + #wp-admin-bar { position: fixed; top: 0; @@ -10,28 +11,34 @@ width: 100%; z-index: 9999; } + #wp-admin-bar .padder { position: relative; padding: 0; width: 100%; margin: 0 auto; - background: url('../images/60pc_black.png'); + background: url(../images/60pc_black.png); height: 25px; } + body#bp-default #wp-admin-bar .padder { max-width: 1250px; } + #wp-admin-bar * { z-index: 999; } + #wp-admin-bar div#admin-bar-logo { position: absolute; top: 5px; right: 10px; } + #wp-admin-bar a img { border: none; } + #wp-admin-bar li { list-style: none; margin: 0; @@ -39,25 +46,31 @@ line-height: 100%; text-align: right; } + #wp-admin-bar li a { - padding: 7px 15px 7px 15px; + padding: 7px 15px; color: #eee; text-decoration: none; font-size: 11px; } + #wp-admin-bar li.alt { border: none; } + #wp-admin-bar li.no-arrow a { padding-left: 15px; } + #wp-admin-bar ul li ul li a span { display: none; } + #wp-admin-bar li:hover, #wp-admin-bar li.hover { position: static; } + #admin-bar-logo { float: right; font-weight: bold; @@ -67,6 +80,7 @@ text-decoration: none; color: #fff; } + body#bp-default #admin-bar-logo { padding: 2px 8px; } @@ -86,23 +100,28 @@ padding: 0; float: right; position: relative; - background: url('../images/admin-menu-arrow.gif') 12% 53% no-repeat; + background: url(../images/admin-menu-arrow.gif) 12% 53% no-repeat; padding-left: 11px; } + #wp-admin-bar ul li.no-arrow { background: none; padding-left: 0; } + #wp-admin-bar ul li ul li { background-image: none; } + #wp-admin-bar ul li.align-right { position: absolute; left: 0; } + #wp-admin-bar ul li a { display: block; } + #wp-admin-bar ul.main-nav li:hover, #wp-admin-bar ul.main-nav li.sfhover, #wp-admin-bar ul.main-nav li ul li.sfhover { @@ -126,23 +145,29 @@ -moz-border-radius-topright: 0; -webkit-border-top-left-radius: 0; } + #wp-admin-bar ul li > ul { border-top: none; } + #wp-admin-bar ul li ul a { color: #eee; } + #wp-admin-bar ul li ul li { float: right; width: 174px; margin: 0; } + #wp-admin-bar ul li ul li:hover a { color: #fff; } + #wp-admin-bar ul li div.admin-bar-clear { clear: both; } + #wp-admin-bar ul.main-nav li ul li:hover, #wp-admin-bar ul.main-nav li ul li.sfhover, #wp-admin-bar ul.main-nav li ul li.sfhover { @@ -155,12 +180,15 @@ -moz-border-radius: 3px; -webkit-border-radius: 3px; } + #wp-admin-bar ul li ul li:hover ul li a { color: #eee; } + #wp-admin-bar ul li ul li ul li:hover a { color: #fff; } + #wp-admin-bar ul li:hover ul, #wp-admin-bar ul li ul li:hover ul, #wp-admin-bar ul li.sfhover ul, @@ -167,9 +195,11 @@ #wp-admin-bar ul li ul li.sfhover ul { right: auto; } + #wp-admin-bar ul li.align-right:hover ul { left: 0; } + #wp-admin-bar ul li:hover ul ul, #wp-admin-bar li.sfhover ul li ul { right: -999em; @@ -180,14 +210,17 @@ float: right; margin-left: 8px; } + #wp-admin-bar span.activity { display: block; margin-right: 34px; padding: 0; } + #wp-admin-bar ul.author-list li a { height: 17px; } + #wp-admin-bar ul li#bp-adminbar-notifications-menu a span { padding: 0 6px; margin-right: 2px; @@ -197,6 +230,7 @@ -webkit-border-radius: 3px; border-radius: 3px; } + #wp-admin-bar-user-info img.avatar { height: 64px; width: 64px; Index: src/bp-core/css/buddybar.css =================================================================== --- src/bp-core/css/buddybar.css (revision 10712) +++ src/bp-core/css/buddybar.css (working copy) @@ -1,6 +1,7 @@ body:not(.wp-admin) { padding-top: 25px !important; } + #wp-admin-bar { position: fixed; top: 0; @@ -10,28 +11,34 @@ width: 100%; z-index: 9999; } + #wp-admin-bar .padder { position: relative; padding: 0; width: 100%; margin: 0 auto; - background: url('../images/60pc_black.png'); + background: url(../images/60pc_black.png); height: 25px; } + body#bp-default #wp-admin-bar .padder { max-width: 1250px; } + #wp-admin-bar * { z-index: 999; } + #wp-admin-bar div#admin-bar-logo { position: absolute; top: 5px; left: 10px; } + #wp-admin-bar a img { border: none; } + #wp-admin-bar li { list-style: none; margin: 0; @@ -39,25 +46,31 @@ line-height: 100%; text-align: left; } + #wp-admin-bar li a { - padding: 7px 15px 7px 15px; + padding: 7px 15px; color: #eee; text-decoration: none; font-size: 11px; } + #wp-admin-bar li.alt { border: none; } + #wp-admin-bar li.no-arrow a { padding-right: 15px; } + #wp-admin-bar ul li ul li a span { display: none; } + #wp-admin-bar li:hover, #wp-admin-bar li.hover { position: static; } + #admin-bar-logo { float: left; font-weight: bold; @@ -67,6 +80,7 @@ text-decoration: none; color: #fff; } + body#bp-default #admin-bar-logo { padding: 2px 8px; } @@ -86,23 +100,28 @@ padding: 0; float: left; position: relative; - background: url('../images/admin-menu-arrow.gif') 88% 53% no-repeat; + background: url(../images/admin-menu-arrow.gif) 88% 53% no-repeat; padding-right: 11px; } + #wp-admin-bar ul li.no-arrow { background: none; padding-right: 0; } + #wp-admin-bar ul li ul li { background-image: none; } + #wp-admin-bar ul li.align-right { position: absolute; right: 0; } + #wp-admin-bar ul li a { display: block; } + #wp-admin-bar ul.main-nav li:hover, #wp-admin-bar ul.main-nav li.sfhover, #wp-admin-bar ul.main-nav li ul li.sfhover { @@ -126,23 +145,29 @@ -moz-border-radius-topright: 0; -webkit-border-top-right-radius: 0; } + #wp-admin-bar ul li > ul { border-top: none; } + #wp-admin-bar ul li ul a { color: #eee; } + #wp-admin-bar ul li ul li { float: left; width: 174px; margin: 0; } + #wp-admin-bar ul li ul li:hover a { color: #fff; } + #wp-admin-bar ul li div.admin-bar-clear { clear: both; } + #wp-admin-bar ul.main-nav li ul li:hover, #wp-admin-bar ul.main-nav li ul li.sfhover, #wp-admin-bar ul.main-nav li ul li.sfhover { @@ -155,12 +180,15 @@ -moz-border-radius: 3px; -webkit-border-radius: 3px; } + #wp-admin-bar ul li ul li:hover ul li a { color: #eee; } + #wp-admin-bar ul li ul li ul li:hover a { color: #fff; } + #wp-admin-bar ul li:hover ul, #wp-admin-bar ul li ul li:hover ul, #wp-admin-bar ul li.sfhover ul, @@ -167,9 +195,11 @@ #wp-admin-bar ul li ul li.sfhover ul { left: auto; } + #wp-admin-bar ul li.align-right:hover ul { right: 0; } + #wp-admin-bar ul li:hover ul ul, #wp-admin-bar li.sfhover ul li ul { left: -999em; @@ -180,14 +210,17 @@ float: left; margin-right: 8px; } + #wp-admin-bar span.activity { display: block; margin-left: 34px; padding: 0; } + #wp-admin-bar ul.author-list li a { height: 17px; } + #wp-admin-bar ul li#bp-adminbar-notifications-menu a span { padding: 0 6px; margin-left: 2px; @@ -197,6 +230,7 @@ -webkit-border-radius: 3px; border-radius: 3px; } + #wp-admin-bar-user-info img.avatar { height: 64px; width: 64px; Index: src/bp-groups/admin/css/admin-rtl.css =================================================================== --- src/bp-groups/admin/css/admin-rtl.css (revision 10712) +++ src/bp-groups/admin/css/admin-rtl.css (working copy) @@ -12,62 +12,78 @@ margin-left: 10px; margin-top: 1px; } + #bp-groups-edit-form input { outline: medium none; } + #bp-groups-edit-form input#bp-groups-name { font-size: 1.7em; width: 100%; margin-bottom: 6px; } + #bp-groups-edit-form input#bp-groups-new-members { width: 100%; max-width: 90%; border: 0; } + #bp-groups-new-members-list { margin: 0; } + #bp_group_settings legend { margin: 10px 0; font-weight: bold; } + #bp_group_settings ul { margin: 0; } + .bp-groups-settings-section { margin-top: 10px; } + #bp-groups-permalink-box { line-height: 24px; color: #666; } + .bp-groups-member-type { position: relative; } + .bp-groups-member-type > h4 { - margin-bottom: .5em; + margin-bottom: 0.5em; } + ul.bp-group-delete-list { list-style-type: disc; margin: 4px 26px; } + .bp-group-admin-pagination { position: absolute; text-align: left; width: 100%; } + .bp-group-admin-pagination.table-top { top: 0; } + .bp-group-admin-pagination.table-bottom { bottom: 0; } + .bp-group-admin-pagination-viewing { color: #777; font-size: 12px; font-style: italic; } + .bp-group-admin-pagination-links { white-space: nowrap; padding-right: 15px; @@ -77,9 +93,11 @@ padding-right: 20px; padding-left: 20px; } + table.bp-group-members .uname-column { width: 70%; } + table.bp-group-members .urole-column { padding-right: 20px; padding-left: 20px; Index: src/bp-groups/admin/css/admin.css =================================================================== --- src/bp-groups/admin/css/admin.css (revision 10712) +++ src/bp-groups/admin/css/admin.css (working copy) @@ -12,62 +12,78 @@ margin-right: 10px; margin-top: 1px; } + #bp-groups-edit-form input { outline: medium none; } + #bp-groups-edit-form input#bp-groups-name { font-size: 1.7em; width: 100%; margin-bottom: 6px; } + #bp-groups-edit-form input#bp-groups-new-members { width: 100%; max-width: 90%; border: 0; } + #bp-groups-new-members-list { margin: 0; } + #bp_group_settings legend { margin: 10px 0; font-weight: bold; } + #bp_group_settings ul { margin: 0; } + .bp-groups-settings-section { margin-top: 10px; } + #bp-groups-permalink-box { line-height: 24px; color: #666; } + .bp-groups-member-type { position: relative; } + .bp-groups-member-type > h4 { - margin-bottom: .5em; + margin-bottom: 0.5em; } + ul.bp-group-delete-list { list-style-type: disc; margin: 4px 26px; } + .bp-group-admin-pagination { position: absolute; text-align: right; width: 100%; } + .bp-group-admin-pagination.table-top { top: 0; } + .bp-group-admin-pagination.table-bottom { bottom: 0; } + .bp-group-admin-pagination-viewing { color: #777; font-size: 12px; font-style: italic; } + .bp-group-admin-pagination-links { white-space: nowrap; padding-left: 15px; @@ -77,9 +93,11 @@ padding-left: 20px; padding-right: 20px; } + table.bp-group-members .uname-column { width: 70%; } + table.bp-group-members .urole-column { padding-left: 20px; padding-right: 20px; Index: src/bp-members/admin/css/admin-rtl.css =================================================================== --- src/bp-members/admin/css/admin-rtl.css (revision 10712) +++ src/bp-members/admin/css/admin-rtl.css (working copy) @@ -6,7 +6,7 @@ } div#profile-page.wrap form#your-profile h3:first-of-type { - margin-top:5em; + margin-top: 5em; } div#profile-page.wrap form#your-profile #profile-nav { @@ -22,6 +22,7 @@ #bp_members_admin_user_stats ul { margin-bottom: 0; } + div#community-profile-page li.bp-members-profile-stats:before, div#community-profile-page li.bp-friends-profile-stats:before, div#community-profile-page li.bp-groups-profile-stats:before, @@ -28,7 +29,7 @@ div#community-profile-page li.bp-blogs-profile-stats:before, div#community-profile-page a.bp-xprofile-avatar-user-admin:before, div#community-profile-page a.bp-xprofile-avatar-user-edit:before { - font: normal 20px/1 'dashicons'; + font: normal 20px/1 "dashicons"; speak: none; display: inline-block; padding: 0 0 0 2px; @@ -59,7 +60,7 @@ } div#community-profile-page a.bp-xprofile-avatar-user-admin:before { - content:"\f182"; + content: "\f182"; } div#community-profile-page a.bp-xprofile-avatar-user-edit:before { @@ -67,8 +68,8 @@ } div#community-profile-page div#bp_xprofile_user_admin_avatar div.avatar { - width:150px; - margin:0 auto; + width: 150px; + margin: 0 auto; } div#community-profile-page div#bp_xprofile_user_admin_avatar div.avatar img { @@ -77,15 +78,15 @@ } div#community-profile-page div#bp_xprofile_user_admin_avatar a { - display:block; - margin:1em 0; - text-decoration:none; - color:#888; + display: block; + margin: 1em 0; + text-decoration: none; + color: #888; } div#community-profile-page p.not-activated { - margin:1em 1em 0; - color:red; + margin: 1em 1em 0; + color: #f00; } #community-profile-page #submitdiv #publishing-action { @@ -100,6 +101,7 @@ .alt { background: none; } + .bp-profile-field { border-bottom: dotted 1px #ccc; font-size: 14px; @@ -106,12 +108,15 @@ margin: 15px 0; padding: 10px; } + .bp-profile-field:last-child { border-bottom: 0; } + .bp-profile-field p { font-size: 14px; } + .bp-profile-field .datebox > label, .bp-profile-field .radio > label, .bp-profile-field > label { /* label takes on left side 200px */ @@ -128,38 +133,47 @@ .field_type_checkbox .checkbox > label { /* these fields are usually pretty tall, so align the label for better consistency */ vertical-align: top; } + .bp-profile-field .description { /* description also sits in the right side column */ margin: 10px 200px 10px 0; text-align: right; } + .clear-value { /* 'clear value' option also sits in the right side column */ display: block; font-size: 12px; margin-right: 200px; } + .field_type_checkbox .checkbox > label + label { /* force checkboxes to new lines, in the right side column */ display: block; margin-right: 200px; width: auto; } + .field_type_radio .radio div:not(.field-visibility-settings) label { /* force radio buttons to new lines */ display: block; } + .field_type_radio .radio div:not(.field-visibility-settings) { /* make the radio buttons sit in the right side column */ display: inline-block; } + .field-visibility-settings-notoggle, .field-visibility-settings-toggle { /* visibility settings go in the left column */ margin: 10px 200px 10px 0; text-align: right; } + .field-visibility-settings { /* visibility settings go in the left column */ display: none; margin-right: 200px; } + .field-visibility-settings .button { /* visibility setting close button */ margin-bottom: 15px; } + #normal-sortables .field-visibility-settings legend { /* id required for css selector weight */ font-size: 16px; margin-bottom: 10px; Index: src/bp-members/admin/css/admin.css =================================================================== --- src/bp-members/admin/css/admin.css (revision 10712) +++ src/bp-members/admin/css/admin.css (working copy) @@ -6,7 +6,7 @@ } div#profile-page.wrap form#your-profile h3:first-of-type { - margin-top:5em; + margin-top: 5em; } div#profile-page.wrap form#your-profile #profile-nav { @@ -22,6 +22,7 @@ #bp_members_admin_user_stats ul { margin-bottom: 0; } + div#community-profile-page li.bp-members-profile-stats:before, div#community-profile-page li.bp-friends-profile-stats:before, div#community-profile-page li.bp-groups-profile-stats:before, @@ -28,7 +29,7 @@ div#community-profile-page li.bp-blogs-profile-stats:before, div#community-profile-page a.bp-xprofile-avatar-user-admin:before, div#community-profile-page a.bp-xprofile-avatar-user-edit:before { - font: normal 20px/1 'dashicons'; + font: normal 20px/1 "dashicons"; speak: none; display: inline-block; padding: 0 2px 0 0; @@ -59,7 +60,7 @@ } div#community-profile-page a.bp-xprofile-avatar-user-admin:before { - content:"\f182"; + content: "\f182"; } div#community-profile-page a.bp-xprofile-avatar-user-edit:before { @@ -67,8 +68,8 @@ } div#community-profile-page div#bp_xprofile_user_admin_avatar div.avatar { - width:150px; - margin:0 auto; + width: 150px; + margin: 0 auto; } div#community-profile-page div#bp_xprofile_user_admin_avatar div.avatar img { @@ -77,15 +78,15 @@ } div#community-profile-page div#bp_xprofile_user_admin_avatar a { - display:block; - margin:1em 0; - text-decoration:none; - color:#888; + display: block; + margin: 1em 0; + text-decoration: none; + color: #888; } div#community-profile-page p.not-activated { - margin:1em 1em 0; - color:red; + margin: 1em 1em 0; + color: #f00; } #community-profile-page #submitdiv #publishing-action { @@ -100,6 +101,7 @@ .alt { background: none; } + .bp-profile-field { border-bottom: dotted 1px #ccc; font-size: 14px; @@ -106,12 +108,15 @@ margin: 15px 0; padding: 10px; } + .bp-profile-field:last-child { border-bottom: 0; } + .bp-profile-field p { font-size: 14px; } + .bp-profile-field .datebox > label, .bp-profile-field .radio > label, .bp-profile-field > label { /* label takes on left side 200px */ @@ -128,38 +133,47 @@ .field_type_checkbox .checkbox > label { /* these fields are usually pretty tall, so align the label for better consistency */ vertical-align: top; } + .bp-profile-field .description { /* description also sits in the right side column */ margin: 10px 0 10px 200px; text-align: left; } + .clear-value { /* 'clear value' option also sits in the right side column */ display: block; font-size: 12px; margin-left: 200px; } + .field_type_checkbox .checkbox > label + label { /* force checkboxes to new lines, in the right side column */ display: block; margin-left: 200px; width: auto; } + .field_type_radio .radio div:not(.field-visibility-settings) label { /* force radio buttons to new lines */ display: block; } + .field_type_radio .radio div:not(.field-visibility-settings) { /* make the radio buttons sit in the right side column */ display: inline-block; } + .field-visibility-settings-notoggle, .field-visibility-settings-toggle { /* visibility settings go in the left column */ margin: 10px 0 10px 200px; text-align: left; } + .field-visibility-settings { /* visibility settings go in the left column */ display: none; margin-left: 200px; } + .field-visibility-settings .button { /* visibility setting close button */ margin-bottom: 15px; } + #normal-sortables .field-visibility-settings legend { /* id required for css selector weight */ font-size: 16px; margin-bottom: 10px; Index: src/bp-messages/css/autocomplete/jquery.autocompletefb-rtl.css =================================================================== --- src/bp-messages/css/autocomplete/jquery.autocompletefb-rtl.css (revision 10712) +++ src/bp-messages/css/autocomplete/jquery.autocompletefb-rtl.css (working copy) @@ -1,5 +1,5 @@ .ac_results { - padding: 0px; + padding: 0; overflow: hidden; z-index: 99999; background: #fff; @@ -13,27 +13,29 @@ -webkit-border-bottom-left-radius: 3px; border-bottom-left-radius: 3px; } - .ac_results ul { - width: 100%; - list-style-position: outside; - list-style: none; - padding: 0; - margin: 0; - } - .ac_results li { - margin: 0px; - padding: 5px 10px; - cursor: pointer; - display: block; - font-size: 1em; - line-height: 16px; - overflow: hidden; - } - .ac_results li img { - margin-left: 5px; - } +.ac_results ul { + width: 100%; + list-style-position: outside; + list-style: none; + padding: 0; + margin: 0; +} +.ac_results li { + margin: 0; + padding: 5px 10px; + cursor: pointer; + display: block; + font-size: 1em; + line-height: 16px; + overflow: hidden; +} + +.ac_results li img { + margin-left: 5px; +} + .ac_odd { background-color: #f0f0f0; } @@ -44,37 +46,41 @@ } ul.acfb-holder { - margin : 0; - height : auto !important; - height : 1%; + margin: 0; + height: auto !important; + height: 1%; overflow: hidden; padding: 0; list-style: none; } - ul.acfb-holder li { - float : right; - margin : 0 0 4px 5px; - list-style-type: none; - } - ul.acfb-holder li.friend-tab { - border-radius : 3px; - -moz-border-radius : 3px; - -webkit-border-radius : 3px; - border : 1px solid #ffe7c7; - padding : 2px 7px 2px; - background : #FFF9DF; - font-size: 1em; - } - li.friend-tab img.avatar { - border-width: 2px !important; - vertical-align: middle; - } +ul.acfb-holder li { + float: right; + margin: 0 0 4px 5px; + list-style-type: none; +} - li.friend-tab span.p { - padding-right: 5px; - font-size: 0.8em; - cursor: pointer; - } +ul.acfb-holder li.friend-tab { + border-radius: 3px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border: 1px solid #ffe7c7; + padding: 2px 7px; + background: #fff9df; + font-size: 1em; +} -input#send-to-input { width: 275px; } +li.friend-tab img.avatar { + border-width: 2px !important; + vertical-align: middle; +} + +li.friend-tab span.p { + padding-right: 5px; + font-size: 0.8em; + cursor: pointer; +} + +input#send-to-input { + width: 275px; +} Index: src/bp-messages/css/autocomplete/jquery.autocompletefb.css =================================================================== --- src/bp-messages/css/autocomplete/jquery.autocompletefb.css (revision 10712) +++ src/bp-messages/css/autocomplete/jquery.autocompletefb.css (working copy) @@ -1,5 +1,5 @@ .ac_results { - padding: 0px; + padding: 0; overflow: hidden; z-index: 99999; background: #fff; @@ -13,27 +13,29 @@ -webkit-border-bottom-right-radius: 3px; border-bottom-right-radius: 3px; } - .ac_results ul { - width: 100%; - list-style-position: outside; - list-style: none; - padding: 0; - margin: 0; - } - .ac_results li { - margin: 0px; - padding: 5px 10px; - cursor: pointer; - display: block; - font-size: 1em; - line-height: 16px; - overflow: hidden; - } - .ac_results li img { - margin-right: 5px; - } +.ac_results ul { + width: 100%; + list-style-position: outside; + list-style: none; + padding: 0; + margin: 0; +} +.ac_results li { + margin: 0; + padding: 5px 10px; + cursor: pointer; + display: block; + font-size: 1em; + line-height: 16px; + overflow: hidden; +} + +.ac_results li img { + margin-right: 5px; +} + .ac_odd { background-color: #f0f0f0; } @@ -44,37 +46,41 @@ } ul.acfb-holder { - margin : 0; - height : auto !important; - height : 1%; + margin: 0; + height: auto !important; + height: 1%; overflow: hidden; padding: 0; list-style: none; } - ul.acfb-holder li { - float : left; - margin : 0 5px 4px 0; - list-style-type: none; - } - ul.acfb-holder li.friend-tab { - border-radius : 3px; - -moz-border-radius : 3px; - -webkit-border-radius : 3px; - border : 1px solid #ffe7c7; - padding : 2px 7px 2px; - background : #FFF9DF; - font-size: 1em; - } - li.friend-tab img.avatar { - border-width: 2px !important; - vertical-align: middle; - } +ul.acfb-holder li { + float: left; + margin: 0 5px 4px 0; + list-style-type: none; +} - li.friend-tab span.p { - padding-left: 5px; - font-size: 0.8em; - cursor: pointer; - } +ul.acfb-holder li.friend-tab { + border-radius: 3px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border: 1px solid #ffe7c7; + padding: 2px 7px; + background: #fff9df; + font-size: 1em; +} -input#send-to-input { width: 275px; } +li.friend-tab img.avatar { + border-width: 2px !important; + vertical-align: middle; +} + +li.friend-tab span.p { + padding-left: 5px; + font-size: 0.8em; + cursor: pointer; +} + +input#send-to-input { + width: 275px; +} Index: src/bp-templates/bp-legacy/css/buddypress-rtl.css =================================================================== --- src/bp-templates/bp-legacy/css/buddypress-rtl.css (revision 10712) +++ src/bp-templates/bp-legacy/css/buddypress-rtl.css (working copy) @@ -47,28 +47,35 @@ width: 100%; padding: 10px 0; } + #buddypress div.pagination .pag-count { float: right; margin-right: 10px; } + #buddypress div.pagination .pagination-links { float: left; margin-left: 10px; } + #buddypress div.pagination .pagination-links span, #buddypress div.pagination .pagination-links a { font-size: 90%; padding: 0 5px; } + #buddypress div.pagination .pagination-links a:hover { font-weight: bold; } + #buddypress noscript div.pagination { margin-bottom: 15px; } + #buddypress #nav-above { display: none; } + #buddypress .paged #nav-above { display: block; } @@ -85,6 +92,7 @@ margin: 0 !important; padding: 0 !important; } + #buddypress .clear { clear: right; } @@ -107,22 +115,27 @@ margin: 0; padding: 0; } + #buddypress .home-page form#whats-new-form { border-bottom: none; padding-bottom: 0; } + #buddypress form#whats-new-form #whats-new-avatar { float: right; } + #buddypress form#whats-new-form #whats-new-content { margin-right: 55px; padding: 0 20px 20px 0; } + #buddypress form#whats-new-form p.activity-greeting { line-height: 0.5em; margin-bottom: 15px; margin-right: 75px; } + #buddypress form#whats-new-form textarea { background: #fff; box-sizing: border-box; @@ -134,25 +147,31 @@ padding: 6px; width: 100%; } + body.no-js #buddypress form#whats-new-form textarea { height: 50px; } + #buddypress form#whats-new-form #whats-new-options select { max-width: 200px; margin-top: 12px; } + #buddypress form#whats-new-form #whats-new-submit { float: left; margin-top: 12px; } + #buddypress #whats-new-options:after { clear: both; content: ""; display: table; } + body.no-js #buddypress #whats-new-options { height: auto; } + #buddypress #whats-new:focus { border-color: rgba(31, 179, 221, 0.9) !important; outline-color: rgba(31, 179, 221, 0.9); @@ -166,19 +185,24 @@ padding: 15px 0 0; list-style: none; } + #buddypress .activity-list .activity-avatar { float: right; } + #buddypress ul.item-list.activity-list li.has-comments { padding-bottom: 15px; } + body.activity-permalink #buddypress ul.activity-list li.has-comments { padding-bottom: 0; } + #buddypress .activity-list li.mini { font-size: 80%; position: relative; } + #buddypress .activity-list li.mini .activity-avatar img.avatar, #buddypress .activity-list li.mini .activity-avatar img.FB_profile_pic { height: 20px; @@ -185,6 +209,7 @@ margin-right: 30px; width: 20px; } + #buddypress .activity-permalink .activity-list li.mini .activity-avatar img.avatar, #buddypress .activity-permalink .activity-list li.mini .activity-avatar img.FB_profile_pic { height: auto; @@ -191,30 +216,38 @@ margin-right: 0; width: auto; } + body.activity-permalink #buddypress .activity-list > li:first-child { padding-top: 0; } + #buddypress .activity-list li .activity-content { position: relative; } + #buddypress .activity-list li.mini .activity-content p { margin: 0; } + #buddypress .activity-list li.mini .activity-comments { clear: both; font-size: 120%; } + body.activity-permalink #buddypress li.mini .activity-meta { margin-top: 4px; } + #buddypress .activity-list li .activity-inreplyto { color: #767676; font-size: 80%; } + #buddypress .activity-list li .activity-inreplyto > p { margin: 0; display: inline; } + #buddypress .activity-list li .activity-inreplyto blockquote, #buddypress .activity-list li .activity-inreplyto div.activity-inner { background: none; @@ -224,9 +257,11 @@ overflow: hidden; padding: 0; } + #buddypress .activity-list .activity-content { margin: 0 70px 0 0; } + body.activity-permalink #buddypress .activity-list li .activity-content { border: none; font-size: 100%; @@ -235,27 +270,33 @@ margin-left: 0; padding: 0; } + body.activity-permalink #buddypress .activity-list li .activity-header > p { margin: 0; - padding: 5px 0 0 0; + padding: 5px 0 0; } + #buddypress .activity-list .activity-content .activity-header, #buddypress .activity-list .activity-content .comment-header { color: #767676; line-height: 220%; } + #buddypress .activity-header { margin-left: 20px; } + #buddypress .activity-header a, #buddypress .comment-meta a, #buddypress .acomment-meta a { text-decoration: none; } + #buddypress .activity-list .activity-content .activity-header img.avatar { float: none !important; margin: 0 0 -8px 5px !important; } + #buddypress a.bp-secondary-action, #buddypress span.highlight { font-size: 80%; @@ -263,40 +304,49 @@ margin-left: 5px; text-decoration: none; } + #buddypress .activity-list .activity-content .activity-inner, #buddypress .activity-list .activity-content blockquote { margin: 10px 0 5px 10px; overflow: hidden; } + #buddypress .activity-list li.new_forum_post .activity-content .activity-inner, #buddypress .activity-list li.new_forum_topic .activity-content .activity-inner { - border-right: 2px solid #EAEAEA; + border-right: 2px solid #eaeaea; margin-right: 5px; padding-right: 10px; } + body.activity-permalink #buddypress .activity-content .activity-inner, body.activity-permalink #buddypress .activity-content blockquote { margin-right: 0; margin-top: 5px; } + #buddypress .activity-inner > p { word-wrap: break-word; } + #buddypress .activity-inner > .activity-inner { margin: 0; } + #buddypress .activity-inner > blockquote { margin: 0; } + #buddypress .activity-list .activity-content img.thumbnail { border: 2px solid #eee; float: right; margin: 0 0 5px 10px; } + #buddypress .activity-read-more { margin-right: 1em; white-space: nowrap; } + #buddypress .activity-list li.load-more, #buddypress .activity-list li.load-newest { background: #f0f0f0; @@ -305,9 +355,10 @@ padding: 10px 15px; text-align: center; } + #buddypress .activity-list li.load-more a, #buddypress .activity-list li.load-newest a { - color: #4D4D4D; + color: #4d4d4d; } @@ -317,20 +368,25 @@ #buddypress div.activity-meta { margin: 18px 0 0; } + body.activity-permalink #buddypress div.activity-meta { margin-bottom: 6px; } + #buddypress div.activity-meta a { padding: 4px 8px; } + #buddypress a.activity-time-since { color: #767676; text-decoration: none; } + #buddypress a.activity-time-since:hover { color: #767676; text-decoration: underline; } + #buddypress a.bp-primary-action, #buddypress #reply-title small a { font-size: 80%; @@ -337,6 +393,7 @@ margin-left: 5px; text-decoration: none; } + #buddypress a.bp-primary-action span, #buddypress #reply-title small a span { background: #767676; @@ -345,11 +402,13 @@ margin-right: 2px; padding: 0 5px; } + #buddypress a.bp-primary-action:hover span, #buddypress #reply-title small a:hover span { background: #555; color: #fff; } + #buddypress div.activity-comments { margin: 0 70px 0 0; overflow: hidden; /* IE fix */ @@ -357,52 +416,65 @@ width: auto; clear: both; } + body.activity-permalink #buddypress div.activity-comments { background: none; margin-right: 170px; width: auto; } + #buddypress div.activity-comments > ul { padding: 0 10px 0 0; } + #buddypress div.activity-comments ul, #buddypress div.activity-comments ul li { border: none; list-style: none; } + #buddypress div.activity-comments ul { clear: both; margin: 0; } + #buddypress div.activity-comments ul li { border-top: 1px solid #eee; padding: 10px 0 0; } + body.activity-permalink #buddypress .activity-list li.mini .activity-comments { clear: none; margin-top: 0; } + body.activity-permalink #buddypress div.activity-comments ul li { border-width: 1px; - padding: 10px 0 0 0; + padding: 10px 0 0; } + #buddypress div.activity-comments > ul > li:first-child { border-top: none; } + #buddypress div.activity-comments ul li:last-child { margin-bottom: 0; } + #buddypress div.activity-comments ul li > ul { margin-right: 30px; margin-top: 0; padding-right: 10px; } + body.activity-permalink #buddypress div.activity-comments ul li > ul { margin-top: 10px; } + body.activity-permalink #buddypress div.activity-comments > ul { padding: 0 15px 0 10px; } + #buddypress div.activity-comments div.acomment-avatar img { border-width: 1px; float: right; @@ -410,37 +482,46 @@ margin-left: 10px; width: 25px; } + #buddypress div.activity-comments div.acomment-content { font-size: 80%; margin: 5px 40px 0 0; } + #buddypress div.acomment-content .time-since, #buddypress div.acomment-content .activity-delete-link, #buddypress div.acomment-content .comment-header { display: none; } + body.activity-permalink #buddypress div.activity-comments div.acomment-content { font-size: 90%; } + #buddypress div.activity-comments div.acomment-meta { color: #767676; font-size: 80%; } + #buddypress div.activity-comments form.ac-form { display: none; padding: 10px; } + #buddypress div.activity-comments li form.ac-form { margin-left: 15px; clear: both; } + #buddypress div.activity-comments form.root { margin-right: 0; } + #buddypress div.activity-comments div#message { margin-top: 15px; margin-bottom: 0; } + #buddypress div.activity-comments form .ac-textarea { background: #fff; border: 1px inset #ccc; @@ -447,6 +528,7 @@ margin-bottom: 10px; padding: 8px; } + #buddypress div.activity-comments form textarea { border: none; background: transparent; @@ -460,30 +542,38 @@ margin: 0; width: 100%; } + #buddypress div.activity-comments form input { margin-top: 5px; } + #buddypress div.activity-comments form div.ac-reply-avatar { float: right; } + #buddypress div.ac-reply-avatar img { border: 1px solid #eee; } + #buddypress div.activity-comments form div.ac-reply-content { color: #767676; margin-right: 50px; padding-right: 15px; } + #buddypress div.activity-comments form div.ac-reply-content a { text-decoration: none; } + #buddypress .acomment-options { float: right; margin: 5px 40px 5px 0; } + #buddypress .acomment-options a { color: #767676; } + #buddypress .acomment-options a:hover { color: inherit; } @@ -495,14 +585,17 @@ float: left; margin: -39px 0 0 0; } + #buddypress div.dir-search input[type=text], #buddypress li.groups-members-search input[type=text] { font-size: 90%; padding: 1px 3px; } + #buddypress .current-member-type { font-style: italic; } + #buddypress .dir-form { clear: both; } @@ -513,13 +606,16 @@ #buddypress div#message { margin: 0 0 15px; } + #buddypress #message.info { margin-bottom: 0; } + #buddypress div#message.updated { clear: both; display: block; } + #buddypress div#message p, #sitewide-notice p { font-size: 90%; @@ -526,6 +622,7 @@ display: block; padding: 10px 15px; } + #buddypress div#message.error p { background-color: #fdc; border: 1px solid #a00; @@ -532,6 +629,7 @@ clear: right; color: #800; } + #buddypress div#message.warning p { background-color: #ffe0af; border: 1px solid #ffd087; @@ -538,11 +636,13 @@ clear: right; color: #800; } + #buddypress div#message.updated p { background-color: #efc; border: 1px solid #591; color: #250; } + #buddypress #pass-strength-result { background-color: #eee; border-color: #ddd; @@ -554,9 +654,11 @@ text-align: center; width: 150px; } + #buddypress .standard-form #basic-details-section #pass-strength-result { width: 35%; } + #buddypress #pass-strength-result.error, #buddypress #pass-strength-result.bad { background-color: #ffb78c; @@ -563,41 +665,49 @@ border-color: #ff853c !important; display: block; } + #buddypress #pass-strength-result.good { background-color: #ffec8b; border-color: #fc0 !important; display: block; } + #buddypress #pass-strength-result.short { background-color: #ffa0a0; border-color: #f04040 !important; display: block; } + #buddypress #pass-strength-result.strong { background-color: #c3ff88; border-color: #8dff1c !important; display: block; } + #buddypress .standard-form#signup_form div div.error { background: #faa; color: #a00; - margin: 0 0 10px 0; + margin: 0 0 10px; padding: 6px; width: 90%; } + #buddypress div.accept, #buddypress div.reject { float: right; margin-right: 10px; } + #buddypress ul.button-nav li { float: right; margin: 0 0 10px 10px; list-style: none; } + #buddypress ul.button-nav li.current a { font-weight: bold; } + #sitewide-notice #message { right: 2%; position: fixed; @@ -605,9 +715,11 @@ width: 96%; z-index: 9999; } + #sitewide-notice.admin-bar-on #message { top: 3.3em; } + #sitewide-notice strong { display: block; margin-bottom: -1em; @@ -646,47 +758,57 @@ font-size: 100%; padding: 6px; } + #buddypress .standard-form select { padding: 3px; } + #buddypress .standard-form input[type=password] { margin-bottom: 5px; } + #buddypress .standard-form label, #buddypress .standard-form span.label, #buddypress .standard-form legend { display: block; font-weight: bold; - margin: 15px 0 5px 0; + margin: 15px 0 5px; width: auto; } + #buddypress .standard-form p label, #buddypress .standard-form #invite-list label { font-weight: normal; margin: auto; } + #buddypress .standard-form .checkbox label, #buddypress .standard-form .radio label { color: #767676; font-size: 100%; font-weight: normal; - margin: 5px 0 0 0; + margin: 5px 0 0; } + #buddypress .standard-form#sidebar-login-form label { margin-top: 5px; } + #buddypress .standard-form input[type=text] { width: 75%; } + #buddypress .standard-form#sidebar-login-form input[type=text], #buddypress .standard-form#sidebar-login-form input[type=password] { padding: 4px; width: 95%; } + #buddypress .standard-form #basic-details-section input[type=password], #buddypress .standard-form #blog-details-section input#signup_blog_url { width: 35%; } + #buddypress .standard-form#signup_form input[type=text], #buddypress .standard-form#signup_form textarea, #buddypress .form-allowed-tags, @@ -694,50 +816,63 @@ #buddypress #commentform textarea { width: 90%; } + #buddypress .standard-form#signup_form div.submit { float: left; } + #buddypress div#signup-avatar img { margin: 0 0 10px 15px; } + #buddypress .standard-form textarea { width: 75%; height: 120px; } + #buddypress .standard-form textarea#message_content { height: 200px; } + #buddypress .standard-form#send-reply textarea { width: 97.5%; } + #buddypress .standard-form p.description { color: #767676; font-size: 80%; margin: 5px 0; } + #buddypress .standard-form div.submit { clear: both; - padding: 15px 0 0 0; + padding: 15px 0 0; } + #buddypress .standard-form p.submit { margin-bottom: 0; - padding: 15px 0 0 0; + padding: 15px 0 0; } + #buddypress .standard-form div.submit input { margin-left: 15px; } + #buddypress .standard-form div.radio ul { margin: 10px 38px 15px 0; list-style: disc; } + #buddypress .standard-form div.radio ul li { margin-bottom: 5px; } + #buddypress .standard-form a.clear-value { display: block; margin-top: 5px; outline: none; } + #buddypress .standard-form #basic-details-section, #buddypress .standard-form #blog-details-section, #buddypress .standard-form #profile-details-section { @@ -744,13 +879,16 @@ float: right; width: 48%; } + #buddypress .standard-form #profile-details-section { float: left; } + #buddypress .standard-form #blog-details-section, #buddypress #notifications-bulk-management { clear: right; } + body.no-js #buddypress #notifications-bulk-management #select-all-notifications, body.no-js #buddypress label[for="message-type-select"], body.no-js #buddypress #message-type-select, @@ -759,6 +897,7 @@ body.no-js #buddypress #messages-bulk-management #select-all-messages { display: none; } + #buddypress .standard-form input:focus, #buddypress .standard-form textarea:focus, #buddypress .standard-form select:focus { @@ -765,9 +904,11 @@ background: #fafafa; color: #555; } + #buddypress form#send-invite-form { margin-top: 20px; } + #buddypress div#invite-list { background: #f5f5f5; height: 400px; @@ -776,6 +917,7 @@ padding: 5px; width: 160px; } + #buddypress button, #buddypress a.button, #buddypress input[type=submit], @@ -795,6 +937,7 @@ text-align: center; text-decoration: none; } + #buddypress button:hover, #buddypress a.button:hover, #buddypress a.button:focus, @@ -816,13 +959,13 @@ float: right; } -#buddypress form.standard-form .left-menu #invite-list ul{ - margin:1%; +#buddypress form.standard-form .left-menu #invite-list ul { + margin: 1%; list-style: none; } #buddypress form.standard-form .left-menu #invite-list ul li { - margin:0 1% 0 0; + margin: 0 1% 0 0; } #buddypress form.standard-form .main-column { @@ -830,12 +973,12 @@ } #buddypress form.standard-form .main-column ul#friend-list { - clear:none; + clear: none; float: right; } #buddypress form.standard-form .main-column ul#friend-list h4 { - clear:none; + clear: none; } /* Overrides for embedded WP editors */ @@ -848,9 +991,9 @@ } /* Form classes & generic attr styling */ -#buddypress form *[disabled="disabled"]{ +#buddypress form *[disabled="disabled"] { cursor: default; - opacity: .4; + opacity: 0.4; } .bp-screen-reader-text { @@ -870,16 +1013,19 @@ --------------------------------------------------------------*/ #buddypress a.loading, #buddypress input.loading { - -webkit-animation: loader-pulsate .5s infinite ease-in-out alternate; - -moz-animation: loader-pulsate .5s infinite ease-in-out alternate; + -webkit-animation: loader-pulsate 0.5s infinite ease-in-out alternate; + -moz-animation: loader-pulsate 0.5s infinite ease-in-out alternate; border-color: #aaa; } + @-webkit-keyframes loader-pulsate { + from { border-color: #aaa; -webkit-box-shadow: 0 0 6px #ccc; box-shadow: 0 0 6px #ccc; } + to { border-color: #ccc; -webkit-box-shadow: 0 0 6px #f8f8f8; @@ -886,12 +1032,15 @@ box-shadow: 0 0 6px #f8f8f8; } } + @-moz-keyframes loader-pulsate { + from { border-color: #aaa; -moz-box-shadow: 0 0 6px #ccc; box-shadow: 0 0 6px #ccc; } + to { border-color: #ccc; -moz-box-shadow: 0 0 6px #f8f8f8; @@ -903,6 +1052,7 @@ #buddypress input.loading:hover { color: #767676; } + #buddypress input[type="submit"].pending, #buddypress input[type="button"].pending, #buddypress input[type="reset"].pending, @@ -918,6 +1068,7 @@ color: #bbb; cursor: default; } + #buddypress input[type="submit"]:hover.pending, #buddypress input[type="button"]:hover.pending, #buddypress input[type="reset"]:hover.pending, @@ -939,23 +1090,29 @@ margin: 0; width: auto; } + #buddypress ul#topic-post-list li { padding: 15px; position: relative; } + #buddypress ul#topic-post-list li.alt { background: #f5f5f5; } + #buddypress ul#topic-post-list li div.poster-meta { color: #767676; margin-bottom: 10px; } + #buddypress ul#topic-post-list li div.post-content { margin-right: 54px; } + #buddypress div.topic-tags { font-size: 80%; } + #buddypress div.admin-links { color: #767676; font-size: 80%; @@ -963,23 +1120,28 @@ top: 15px; left: 25px; } + #buddypress div#topic-meta { margin: 0; padding: 5px 19px 30px; position: relative; } + #buddypress div#topic-meta div.admin-links { left: 19px; top: -36px; } + #buddypress div#topic-meta h3 { margin: 5px 0; } + #buddypress div#new-topic-post { display: none; - margin: 20px 0 0 0; - padding: 1px 0 0 0; + margin: 20px 0 0; + padding: 1px 0 0; } + #buddypress table.notifications, #buddypress table.notifications-settings, #buddypress table.profile-settings, @@ -989,6 +1151,7 @@ #buddypress table.forum { width: 100%; } + #buddypress table.notifications thead tr, #buddypress table.notifications-settings thead tr, #buddypress table.profile-settings thead tr, @@ -998,21 +1161,27 @@ #buddypress table.forum thead tr { background: #eaeaea; } + #buddypress table#message-threads { clear: both; } + #buddypress table.profile-fields { margin-bottom: 20px; } + #buddypress table.profile-fields:last-child { margin-bottom: 0; } + #buddypress table.profile-fields p { margin: 0; } + #buddypress table.profile-fields p:last-child { margin-top: 0; } + #buddypress table.notifications tr td, #buddypress table.notifications-settings tr td, #buddypress table.profile-settings tr td, @@ -1029,6 +1198,7 @@ padding: 8px; vertical-align: middle; } + #buddypress table.notifications tr td.label, #buddypress table.notifications-settings tr td.label, #buddypress table.profile-fields tr td.label, @@ -1039,20 +1209,25 @@ font-weight: bold; width: 25%; } + #buddypress #message-threads .thread-info { min-width: 40%; } + #buddypress table tr td.thread-info p { margin: 0; } + #buddypress table tr td.thread-info p.thread-excerpt { color: #767676; font-size: 80%; margin-top: 3px; } + #buddypress table.forum td { text-align: center; } + #buddypress table.notifications tr.alt td, #buddypress table.notifications-settings tr.alt td, #buddypress table.profile-settings tr.alt td, @@ -1062,13 +1237,16 @@ #buddypress table.forum tr.alt td { background: #f5f5f5; } + #buddypress table.notification-settings { margin-bottom: 20px; text-align: right; } + #buddypress #groups-notification-settings { margin-bottom: 0; } + #buddypress table.notifications th.icon, #buddypress table.notifications td:first-child, #buddypress table.notification-settings th.icon, @@ -1075,20 +1253,24 @@ #buddypress table.notification-settings td:first-child { display: none; } + #buddypress table.notification-settings th.title, #buddypress table.profile-settings th.title { width: 80%; } + #buddypress table.notification-settings .yes, #buddypress table.notification-settings .no { text-align: center; width: 40px; } + #buddypress table.forum { margin: 0; width: auto; clear: both; } + #buddypress table.forum tr.sticky td { font-size: 110%; background: #fff9db; @@ -1095,21 +1277,26 @@ border-top: 1px solid #ffe8c4; border-bottom: 1px solid #ffe8c4; } + #buddypress table.forum tr.closed td.td-title { padding-right: 35px; } + #buddypress table.forum td p.topic-text { color: #767676; font-size: 100%; } + #buddypress table.forum tr > td:first-child, #buddypress table.forum tr > th:first-child { padding-right: 15px; } + #buddypress table.forum tr > td:last-child, #buddypress table.forum tr > th:last-child { padding-left: 15px; } + #buddypress table.forum tr th#th-title, #buddypress table.forum tr th#th-poster, #buddypress table.forum tr th#th-group, @@ -1118,36 +1305,45 @@ #buddypress table.forum td.td-title { text-align: right; } + #buddypress table.forum tr td.td-title a.topic-title { font-size: 110%; } + #buddypress table.forum td.td-freshness { white-space: nowrap; } + #buddypress table.forum td.td-freshness span.time-since { font-size: 80%; color: #767676; } + #buddypress table.forum td img.avatar { float: none; margin: 0 0 -8px 5px; } + #buddypress table.forum td.td-poster, #buddypress table.forum td.td-group { min-width: 140px; } + #buddypress table.forum th#th-title { width: 80%; } + #buddypress table.forum th#th-freshness { width: 25%; } + #buddypress table.forum th#th-postcount { width: 15%; } + #buddypress table.forum p.topic-meta { font-size: 80%; - margin: 5px 0 0 0; + margin: 5px 0 0; } /*------------------------------------------------------------------------- @@ -1156,6 +1352,7 @@ #buddypress .item-body { margin: 20px 0; } + #buddypress span.activity { display: inline-block; font-size: small; @@ -1162,6 +1359,7 @@ opacity: 0.8; padding: 0; } + #buddypress span.user-nicename { color: #767676; display: inline-block; @@ -1168,6 +1366,7 @@ font-size: 120%; font-weight: bold; } + #buddypress div#message p, #sitewide-notice p { font-weight: normal; @@ -1177,30 +1376,37 @@ border: 1px solid #cb2; color: #440; } + #buddypress #item-header:after { clear: both; content: ""; display: table; } + #buddypress div#item-header div#item-header-content { float: right; margin-right: 0; } + #buddypress div#item-header h2 { line-height: 120%; - margin: 0 0 15px 0; + margin: 0 0 15px; } + #buddypress div#item-header h2 a { color: #767676; text-decoration: none; } + #buddypress div#item-header img.avatar { float: right; margin: 0 0 19px 15px; } + #buddypress div#item-header h2 { margin-bottom: 5px; } + #buddypress div#item-header h2 span.highlight { font-size: 60%; font-weight: normal; @@ -1208,6 +1414,7 @@ vertical-align: middle; display: inline-block; } + #buddypress div#item-header h2 span.highlight span { background: #a1dcfa; color: #fff; @@ -1221,13 +1428,15 @@ top: -2px; vertical-align: middle; } + #buddypress div#item-header div#item-meta { font-size: 80%; color: #767676; overflow: hidden; - margin: 15px 0 5px 0; + margin: 15px 0 5px; padding-bottom: 10px; } + #buddypress div#item-header div#item-actions { float: left; margin: 0 15px 15px 0; @@ -1234,22 +1443,27 @@ text-align: left; width: 20%; } + #buddypress div#item-header div#item-actions h3 { - margin: 0 0 5px 0; + margin: 0 0 5px; } + #buddypress div#item-header ul { margin-bottom: 15px; overflow: hidden; } + #buddypress div#item-header ul h5, #buddypress div#item-header ul span, #buddypress div#item-header ul hr { display: none; } + #buddypress div#item-header ul li { float: left; list-style: none; } + #buddypress div#item-header ul img.avatar, #buddypress div#item-header ul.avatars img.avatar { height: 30px; @@ -1256,17 +1470,21 @@ margin: 2px; width: 30px; } + #buddypress div#item-header div.generic-button, #buddypress div#item-header a.button { float: right; margin: 10px 0 0 10px; } + body.no-js #buddypress div#item-header .js-self-profile-button { - display:none; + display: none; } + #buddypress div#item-header div#message.info { line-height: 80%; } + #buddypress ul.item-list { border-top: 1px solid #eaeaea; width: 100%; @@ -1275,10 +1493,12 @@ margin: 0; padding: 0; } + body.activity-permalink #buddypress ul.item-list, body.activity-permalink #buddypress ul.item-list li.activity-item { border: none; } + #buddypress ul.item-list li { border-bottom: 1px solid #eaeaea; padding: 15px 0; @@ -1286,13 +1506,16 @@ position: relative; list-style: none; } + #buddypress ul.single-line li { border: none; } + #buddypress ul.item-list li img.avatar { float: right; margin: 0 0 0 10px; } + #buddypress ul.item-list li div.item-title, #buddypress ul.item-list li h4 { font-weight: normal; @@ -1300,10 +1523,12 @@ margin: 0; width: 75%; } + #buddypress ul.item-list li div.item-title span { color: #767676; font-size: 80%; } + #buddypress ul.item-list li div.item-desc { color: #767676; font-size: 80%; @@ -1310,9 +1535,11 @@ margin: 10px 60px 0 0; width: 50%; } + #buddypress ul.item-list li.group-no-avatar div.item-desc { margin-right: 0; } + #buddypress ul.item-list li div.action { position: absolute; top: 15px; @@ -1319,16 +1546,19 @@ left: 0; text-align: left; } + #buddypress ul.item-list li div.meta { color: #767676; font-size: 80%; margin-top: 10px; } + #buddypress ul.item-list li h5 span.small { float: left; font-size: 80%; font-weight: normal; } + #buddypress div.item-list-tabs { background: transparent; clear: right; @@ -1339,24 +1569,30 @@ margin: 0; padding: 0; } + #buddypress div.item-list-tabs ul li { float: right; margin: 0; list-style: none; } + #buddypress div.item-list-tabs#subnav ul li { margin-top: 0; } + #buddypress div.item-list-tabs ul li.last { float: left; margin: 7px 0 0; } + #buddypress div.item-list-tabs#subnav ul li.last { margin-top: 4px; } + #buddypress div.item-list-tabs ul li.last select { max-width: 185px; } + #buddypress div.item-list-tabs ul li a, #buddypress div.item-list-tabs ul li span { display: block; @@ -1363,6 +1599,7 @@ padding: 5px 10px; text-decoration: none; } + #buddypress div.item-list-tabs ul li a span { background: #eee; border-radius: 50%; @@ -1375,33 +1612,40 @@ text-align: center; vertical-align: middle; } + #buddypress div.item-list-tabs ul li.selected a, #buddypress div.item-list-tabs ul li.current a { background-color: #eee; color: #555; - opacity: .8; + opacity: 0.8; font-weight: bold; } + #buddypress div.item-list-tabs ul li.selected a span, #buddypress div.item-list-tabs ul li.current a span, #buddypress div.item-list-tabs ul li a:hover span { background-color: #eee; } + #buddypress div.item-list-tabs ul li.selected a span, #buddypress div.item-list-tabs ul li.current a span { background-color: #fff; } + #buddypress div#item-nav ul li.loading a { background-position: 12% 50%; } + #buddypress div.item-list-tabs#object-nav { margin-top: 0; } + #buddypress div.item-list-tabs#subnav { background: transparent; - margin: 10px 0 10px; + margin: 10px 0; overflow: hidden; } + #buddypress #admins-list li, #buddypress #mods-list li, #buddypress #members-list li { @@ -1408,6 +1652,7 @@ overflow: auto; list-style: none; } + #buddypress #item-buttons:empty { display: none; } @@ -1452,59 +1697,74 @@ border-bottom: 1px solid #ffe8c4; font-weight: bold; } + #buddypress table#message-threads tr.unread td .thread-excerpt, #buddypress table#message-threads tr.unread td .activity, #buddypress table#message-threads tr.unread td.thread-options { font-weight: normal; } + #buddypress li span.unread-count, #buddypress tr.unread span.unread-count { - background: #dd0000; + background: #d00; color: #fff; font-weight: bold; padding: 2px 8px; } + #buddypress div.item-list-tabs ul li a span.unread-count { padding: 1px 6px; color: #fff; } + #buddypress div#message-thread div.message-box { margin: 0; padding: 15px; } + #buddypress div#message-thread div.alt { background: #f4f4f4; } + #buddypress div#message-thread p#message-recipients { - margin: 10px 0 20px 0; + margin: 10px 0 20px; } + #buddypress div#message-thread img.avatar { float: right; margin: 0 0 0 10px; vertical-align: middle; } + #buddypress div#message-thread strong { font-size: 100%; margin: 0; } + #buddypress div#message-thread strong a { text-decoration: none; } + #buddypress div#message-thread strong span.activity { margin-top: 4px; } + #buddypress div#message-thread div.message-metadata { overflow: hidden; } + #buddypress div#message-thread div.message-content { margin-right: 45px; } + #buddypress div#message-thread div.message-options { text-align: left; } + #buddypress #message-threads img.avatar { max-width: none; } + #buddypress div.message-search { float: left; margin: 0 20px; @@ -1513,11 +1773,13 @@ .message-metadata { position: relative; } + .message-star-actions { position: absolute; left: 0; top: 0; } + #buddypress a.message-action-star, #buddypress a.message-action-unstar { border-bottom: 0; @@ -1524,21 +1786,26 @@ text-decoration: none; outline: none; } + a.message-action-star { - opacity: .7; + opacity: 0.7; } + a.message-action-star:hover { opacity: 1; } + .message-action-star span.icon:before, .message-action-unstar span.icon:before { font-family: dashicons; font-size: 18px; } + .message-action-star span.icon:before { color: #767676; content: "\f154"; } + .message-action-unstar span.icon:before { color: #fcdd77; content: "\f155"; @@ -1552,54 +1819,68 @@ margin-bottom: auto; margin-top: 15px; } + #buddypress #profile-edit-form ul.button-nav { margin-top: 15px; } + body.no-js #buddypress .field-visibility-settings-toggle, body.no-js #buddypress .field-visibility-settings-close { display: none; } + #buddypress .field-visibility-settings { display: none; margin-top: 10px; } - body.no-js #buddypress .field-visibility-settings { - display: block; - } + +body.no-js #buddypress .field-visibility-settings { + display: block; +} + #buddypress .current-visibility-level { font-weight: bold; font-style: normal; } + #buddypress .field-visibility-settings, #buddypress .field-visibility-settings-toggle, #buddypress .field-visibility-settings-notoggle { color: #767676; } + #buddypress .field-visibility-settings-toggle a, #buddypress .field-visibility-settings a { font-size: 80%; } + body.register #buddypress div.page ul { list-style: none; } + #buddypress .standard-form .field-visibility-settings label { margin: 0; font-weight: normal; } + #buddypress .field-visibility-settings legend, #buddypress .field-visibility-settings-toggle { font-style: italic; } + #buddypress .field-visibility-settings .radio { list-style: none; margin-bottom: 0; } + #buddypress .field-visibility select { margin: 0; } + #buddypress .wp-editor-container { border: 1px solid #dedede; } + #buddypress .html-active button.switch-html { border-bottom-color: transparent; border-bottom-right-radius: 0; @@ -1606,6 +1887,7 @@ border-bottom-left-radius: 0; background: #f5f5f5; } + #buddypress .tmce-active button.switch-tmce { border-bottom-color: transparent; border-bottom-right-radius: 0; @@ -1612,6 +1894,7 @@ border-bottom-left-radius: 0; background: #f5f5f5; } + #buddypress .standard-form .wp-editor-container textarea { width: 100%; padding-top: 0; @@ -1636,12 +1919,12 @@ .widget.buddypress div.item-options { font-size: 90%; - margin: 0 0 1em 0; + margin: 0 0 1em; padding: 1em 0; } -.widget.buddypress div.item{ - margin:0 0 1em 0; +.widget.buddypress div.item { + margin: 0 0 1em; } .widget.buddypress div.item-meta, @@ -1655,6 +1938,7 @@ margin-left: 10px; width: 40px; } + .widget.buddypress div.item-avatar img { height: 40px; margin: 1px; @@ -1661,13 +1945,13 @@ width: 40px; } -.widget.buddypress div.avatar-block{ +.widget.buddypress div.avatar-block { overflow: hidden; } .widget.buddypress #bp-login-widget-form label { display: block; - margin: 1rem 0 .5rem; + margin: 1rem 0 0.5rem; } .widget.buddypress #bp-login-widget-form #bp-login-widget-submit { @@ -1688,7 +1972,7 @@ } .widget.buddypress .bp-login-widget-user-links > div { - margin-bottom: .5rem; + margin-bottom: 0.5rem; } .widget.buddypress .bp-login-widget-user-links > div.bp-login-widget-user-link a { @@ -1715,25 +1999,30 @@ /*-------------------------------------------------------------- 4.1 - Smartphones - landscape --------------------------------------------------------------*/ -@media only screen and (max-width: 480px ){ +@media only screen and (max-width: 480px) { + #buddypress div.dir-search { float: left; margin-top: -50px; text-align: left; } + #buddypress div.dir-search input[type="text"] { margin-bottom: 1em; width: 50%; } + a.bp-title-button { margin-right: 10px; } - #buddypress form.standard-form .main-column div.action{ + + #buddypress form.standard-form .main-column div.action { position: relative; - margin-bottom:1em; + margin-bottom: 1em; } - #buddypress form.standard-form .main-column ul#friend-list h4{ - width:100%; + + #buddypress form.standard-form .main-column ul#friend-list h4 { + width: 100%; } } @@ -1741,6 +2030,7 @@ 4.2 - Smartphones - portrait --------------------------------------------------------------*/ @media only screen and (max-width: 320px) { + #buddypress div.dir-search { clear: right; float: right; @@ -1747,10 +2037,12 @@ margin-top: 0; text-align: right; } + #buddypress li#groups-order-select { clear: right; float: right; } + #buddypress ul.item-list li div.action { clear: right; float: right; @@ -1761,6 +2053,7 @@ left: 0; text-align: right; } + #buddypress ul.item-list li div.item-desc { clear: right; float: right; @@ -1767,16 +2060,20 @@ margin: 10px 0 0; width: auto; } + #buddypress li div.item { margin-right: 70px; width: auto; } + #buddypress ul.item-list li div.meta { margin-top: 0; } + #buddypress .item-desc p { margin: 0 0 10px; } + #buddypress div.pagination .pag-count { margin-right: 0; } @@ -1786,24 +2083,30 @@ 4.2 - Smartphones - smaller screen sizes --------------------------------------------------------------*/ @media only screen and (max-width: 240px) { + #buddypress div.dir-search { float: right; margin: 0; } + #buddypress div.dir-search input[type="text"] { width: 50%; } + #buddypress li#groups-order-select { float: right; } + #buddypress ul.item-list li img.avatar { width: 30px; height: auto; } + #buddypress ul.item-list li div.action, - #buddypress li div.item{ + #buddypress li div.item { margin-right: 45px; } + h1 a.bp-title-button { clear: right; float: right; Index: src/bp-templates/bp-legacy/css/buddypress.css =================================================================== --- src/bp-templates/bp-legacy/css/buddypress.css (revision 10712) +++ src/bp-templates/bp-legacy/css/buddypress.css (working copy) @@ -47,28 +47,35 @@ width: 100%; padding: 10px 0; } + #buddypress div.pagination .pag-count { float: left; margin-left: 10px; } + #buddypress div.pagination .pagination-links { float: right; margin-right: 10px; } + #buddypress div.pagination .pagination-links span, #buddypress div.pagination .pagination-links a { font-size: 90%; padding: 0 5px; } + #buddypress div.pagination .pagination-links a:hover { font-weight: bold; } + #buddypress noscript div.pagination { margin-bottom: 15px; } + #buddypress #nav-above { display: none; } + #buddypress .paged #nav-above { display: block; } @@ -85,6 +92,7 @@ margin: 0 !important; padding: 0 !important; } + #buddypress .clear { clear: left; } @@ -107,22 +115,27 @@ margin: 0; padding: 0; } + #buddypress .home-page form#whats-new-form { border-bottom: none; padding-bottom: 0; } + #buddypress form#whats-new-form #whats-new-avatar { float: left; } + #buddypress form#whats-new-form #whats-new-content { margin-left: 55px; padding: 0 0 20px 20px; } + #buddypress form#whats-new-form p.activity-greeting { line-height: 0.5em; margin-bottom: 15px; margin-left: 75px; } + #buddypress form#whats-new-form textarea { background: #fff; box-sizing: border-box; @@ -134,25 +147,31 @@ padding: 6px; width: 100%; } + body.no-js #buddypress form#whats-new-form textarea { height: 50px; } + #buddypress form#whats-new-form #whats-new-options select { max-width: 200px; margin-top: 12px; } + #buddypress form#whats-new-form #whats-new-submit { float: right; margin-top: 12px; } + #buddypress #whats-new-options:after { clear: both; content: ""; display: table; } + body.no-js #buddypress #whats-new-options { height: auto; } + #buddypress #whats-new:focus { border-color: rgba(31, 179, 221, 0.9) !important; outline-color: rgba(31, 179, 221, 0.9); @@ -166,19 +185,24 @@ padding: 15px 0 0; list-style: none; } + #buddypress .activity-list .activity-avatar { float: left; } + #buddypress ul.item-list.activity-list li.has-comments { padding-bottom: 15px; } + body.activity-permalink #buddypress ul.activity-list li.has-comments { padding-bottom: 0; } + #buddypress .activity-list li.mini { font-size: 80%; position: relative; } + #buddypress .activity-list li.mini .activity-avatar img.avatar, #buddypress .activity-list li.mini .activity-avatar img.FB_profile_pic { height: 20px; @@ -185,6 +209,7 @@ margin-left: 30px; width: 20px; } + #buddypress .activity-permalink .activity-list li.mini .activity-avatar img.avatar, #buddypress .activity-permalink .activity-list li.mini .activity-avatar img.FB_profile_pic { height: auto; @@ -191,30 +216,38 @@ margin-left: 0; width: auto; } + body.activity-permalink #buddypress .activity-list > li:first-child { padding-top: 0; } + #buddypress .activity-list li .activity-content { position: relative; } + #buddypress .activity-list li.mini .activity-content p { margin: 0; } + #buddypress .activity-list li.mini .activity-comments { clear: both; font-size: 120%; } + body.activity-permalink #buddypress li.mini .activity-meta { margin-top: 4px; } + #buddypress .activity-list li .activity-inreplyto { color: #767676; font-size: 80%; } + #buddypress .activity-list li .activity-inreplyto > p { margin: 0; display: inline; } + #buddypress .activity-list li .activity-inreplyto blockquote, #buddypress .activity-list li .activity-inreplyto div.activity-inner { background: none; @@ -224,9 +257,11 @@ overflow: hidden; padding: 0; } + #buddypress .activity-list .activity-content { margin: 0 0 0 70px; } + body.activity-permalink #buddypress .activity-list li .activity-content { border: none; font-size: 100%; @@ -235,27 +270,33 @@ margin-right: 0; padding: 0; } + body.activity-permalink #buddypress .activity-list li .activity-header > p { margin: 0; - padding: 5px 0 0 0; + padding: 5px 0 0; } + #buddypress .activity-list .activity-content .activity-header, #buddypress .activity-list .activity-content .comment-header { color: #767676; line-height: 220%; } + #buddypress .activity-header { margin-right: 20px; } + #buddypress .activity-header a, #buddypress .comment-meta a, #buddypress .acomment-meta a { text-decoration: none; } + #buddypress .activity-list .activity-content .activity-header img.avatar { float: none !important; margin: 0 5px -8px 0 !important; } + #buddypress a.bp-secondary-action, #buddypress span.highlight { font-size: 80%; @@ -263,40 +304,49 @@ margin-right: 5px; text-decoration: none; } + #buddypress .activity-list .activity-content .activity-inner, #buddypress .activity-list .activity-content blockquote { margin: 10px 10px 5px 0; overflow: hidden; } + #buddypress .activity-list li.new_forum_post .activity-content .activity-inner, #buddypress .activity-list li.new_forum_topic .activity-content .activity-inner { - border-left: 2px solid #EAEAEA; + border-left: 2px solid #eaeaea; margin-left: 5px; padding-left: 10px; } + body.activity-permalink #buddypress .activity-content .activity-inner, body.activity-permalink #buddypress .activity-content blockquote { margin-left: 0; margin-top: 5px; } + #buddypress .activity-inner > p { word-wrap: break-word; } + #buddypress .activity-inner > .activity-inner { margin: 0; } + #buddypress .activity-inner > blockquote { margin: 0; } + #buddypress .activity-list .activity-content img.thumbnail { border: 2px solid #eee; float: left; margin: 0 10px 5px 0; } + #buddypress .activity-read-more { margin-left: 1em; white-space: nowrap; } + #buddypress .activity-list li.load-more, #buddypress .activity-list li.load-newest { background: #f0f0f0; @@ -305,9 +355,10 @@ padding: 10px 15px; text-align: center; } + #buddypress .activity-list li.load-more a, #buddypress .activity-list li.load-newest a { - color: #4D4D4D; + color: #4d4d4d; } @@ -317,20 +368,25 @@ #buddypress div.activity-meta { margin: 18px 0 0; } + body.activity-permalink #buddypress div.activity-meta { margin-bottom: 6px; } + #buddypress div.activity-meta a { padding: 4px 8px; } + #buddypress a.activity-time-since { color: #767676; text-decoration: none; } + #buddypress a.activity-time-since:hover { color: #767676; text-decoration: underline; } + #buddypress a.bp-primary-action, #buddypress #reply-title small a { font-size: 80%; @@ -337,6 +393,7 @@ margin-right: 5px; text-decoration: none; } + #buddypress a.bp-primary-action span, #buddypress #reply-title small a span { background: #767676; @@ -345,11 +402,13 @@ margin-left: 2px; padding: 0 5px; } + #buddypress a.bp-primary-action:hover span, #buddypress #reply-title small a:hover span { background: #555; color: #fff; } + #buddypress div.activity-comments { margin: 0 0 0 70px; overflow: hidden; /* IE fix */ @@ -357,52 +416,65 @@ width: auto; clear: both; } + body.activity-permalink #buddypress div.activity-comments { background: none; margin-left: 170px; width: auto; } + #buddypress div.activity-comments > ul { padding: 0 0 0 10px; } + #buddypress div.activity-comments ul, #buddypress div.activity-comments ul li { border: none; list-style: none; } + #buddypress div.activity-comments ul { clear: both; margin: 0; } + #buddypress div.activity-comments ul li { border-top: 1px solid #eee; padding: 10px 0 0; } + body.activity-permalink #buddypress .activity-list li.mini .activity-comments { clear: none; margin-top: 0; } + body.activity-permalink #buddypress div.activity-comments ul li { border-width: 1px; - padding: 10px 0 0 0; + padding: 10px 0 0; } + #buddypress div.activity-comments > ul > li:first-child { border-top: none; } + #buddypress div.activity-comments ul li:last-child { margin-bottom: 0; } + #buddypress div.activity-comments ul li > ul { margin-left: 30px; margin-top: 0; padding-left: 10px; } + body.activity-permalink #buddypress div.activity-comments ul li > ul { margin-top: 10px; } + body.activity-permalink #buddypress div.activity-comments > ul { padding: 0 10px 0 15px; } + #buddypress div.activity-comments div.acomment-avatar img { border-width: 1px; float: left; @@ -410,37 +482,46 @@ margin-right: 10px; width: 25px; } + #buddypress div.activity-comments div.acomment-content { font-size: 80%; margin: 5px 0 0 40px; } + #buddypress div.acomment-content .time-since, #buddypress div.acomment-content .activity-delete-link, #buddypress div.acomment-content .comment-header { display: none; } + body.activity-permalink #buddypress div.activity-comments div.acomment-content { font-size: 90%; } + #buddypress div.activity-comments div.acomment-meta { color: #767676; font-size: 80%; } + #buddypress div.activity-comments form.ac-form { display: none; padding: 10px; } + #buddypress div.activity-comments li form.ac-form { margin-right: 15px; clear: both; } + #buddypress div.activity-comments form.root { margin-left: 0; } + #buddypress div.activity-comments div#message { margin-top: 15px; margin-bottom: 0; } + #buddypress div.activity-comments form .ac-textarea { background: #fff; border: 1px inset #ccc; @@ -447,6 +528,7 @@ margin-bottom: 10px; padding: 8px; } + #buddypress div.activity-comments form textarea { border: none; background: transparent; @@ -460,30 +542,38 @@ margin: 0; width: 100%; } + #buddypress div.activity-comments form input { margin-top: 5px; } + #buddypress div.activity-comments form div.ac-reply-avatar { float: left; } + #buddypress div.ac-reply-avatar img { border: 1px solid #eee; } + #buddypress div.activity-comments form div.ac-reply-content { color: #767676; margin-left: 50px; padding-left: 15px; } + #buddypress div.activity-comments form div.ac-reply-content a { text-decoration: none; } + #buddypress .acomment-options { float: left; margin: 5px 0 5px 40px; } + #buddypress .acomment-options a { color: #767676; } + #buddypress .acomment-options a:hover { color: inherit; } @@ -495,14 +585,17 @@ float: right; margin: -39px 0 0 0; } + #buddypress div.dir-search input[type=text], #buddypress li.groups-members-search input[type=text] { font-size: 90%; padding: 1px 3px; } + #buddypress .current-member-type { font-style: italic; } + #buddypress .dir-form { clear: both; } @@ -513,13 +606,16 @@ #buddypress div#message { margin: 0 0 15px; } + #buddypress #message.info { margin-bottom: 0; } + #buddypress div#message.updated { clear: both; display: block; } + #buddypress div#message p, #sitewide-notice p { font-size: 90%; @@ -526,6 +622,7 @@ display: block; padding: 10px 15px; } + #buddypress div#message.error p { background-color: #fdc; border: 1px solid #a00; @@ -532,6 +629,7 @@ clear: left; color: #800; } + #buddypress div#message.warning p { background-color: #ffe0af; border: 1px solid #ffd087; @@ -538,11 +636,13 @@ clear: left; color: #800; } + #buddypress div#message.updated p { background-color: #efc; border: 1px solid #591; color: #250; } + #buddypress #pass-strength-result { background-color: #eee; border-color: #ddd; @@ -554,9 +654,11 @@ text-align: center; width: 150px; } + #buddypress .standard-form #basic-details-section #pass-strength-result { width: 35%; } + #buddypress #pass-strength-result.error, #buddypress #pass-strength-result.bad { background-color: #ffb78c; @@ -563,41 +665,49 @@ border-color: #ff853c !important; display: block; } + #buddypress #pass-strength-result.good { background-color: #ffec8b; border-color: #fc0 !important; display: block; } + #buddypress #pass-strength-result.short { background-color: #ffa0a0; border-color: #f04040 !important; display: block; } + #buddypress #pass-strength-result.strong { background-color: #c3ff88; border-color: #8dff1c !important; display: block; } + #buddypress .standard-form#signup_form div div.error { background: #faa; color: #a00; - margin: 0 0 10px 0; + margin: 0 0 10px; padding: 6px; width: 90%; } + #buddypress div.accept, #buddypress div.reject { float: left; margin-left: 10px; } + #buddypress ul.button-nav li { float: left; margin: 0 10px 10px 0; list-style: none; } + #buddypress ul.button-nav li.current a { font-weight: bold; } + #sitewide-notice #message { left: 2%; position: fixed; @@ -605,9 +715,11 @@ width: 96%; z-index: 9999; } + #sitewide-notice.admin-bar-on #message { top: 3.3em; } + #sitewide-notice strong { display: block; margin-bottom: -1em; @@ -646,47 +758,57 @@ font-size: 100%; padding: 6px; } + #buddypress .standard-form select { padding: 3px; } + #buddypress .standard-form input[type=password] { margin-bottom: 5px; } + #buddypress .standard-form label, #buddypress .standard-form span.label, #buddypress .standard-form legend { display: block; font-weight: bold; - margin: 15px 0 5px 0; + margin: 15px 0 5px; width: auto; } + #buddypress .standard-form p label, #buddypress .standard-form #invite-list label { font-weight: normal; margin: auto; } + #buddypress .standard-form .checkbox label, #buddypress .standard-form .radio label { color: #767676; font-size: 100%; font-weight: normal; - margin: 5px 0 0 0; + margin: 5px 0 0; } + #buddypress .standard-form#sidebar-login-form label { margin-top: 5px; } + #buddypress .standard-form input[type=text] { width: 75%; } + #buddypress .standard-form#sidebar-login-form input[type=text], #buddypress .standard-form#sidebar-login-form input[type=password] { padding: 4px; width: 95%; } + #buddypress .standard-form #basic-details-section input[type=password], #buddypress .standard-form #blog-details-section input#signup_blog_url { width: 35%; } + #buddypress .standard-form#signup_form input[type=text], #buddypress .standard-form#signup_form textarea, #buddypress .form-allowed-tags, @@ -694,50 +816,63 @@ #buddypress #commentform textarea { width: 90%; } + #buddypress .standard-form#signup_form div.submit { float: right; } + #buddypress div#signup-avatar img { margin: 0 15px 10px 0; } + #buddypress .standard-form textarea { width: 75%; height: 120px; } + #buddypress .standard-form textarea#message_content { height: 200px; } + #buddypress .standard-form#send-reply textarea { width: 97.5%; } + #buddypress .standard-form p.description { color: #767676; font-size: 80%; margin: 5px 0; } + #buddypress .standard-form div.submit { clear: both; - padding: 15px 0 0 0; + padding: 15px 0 0; } + #buddypress .standard-form p.submit { margin-bottom: 0; - padding: 15px 0 0 0; + padding: 15px 0 0; } + #buddypress .standard-form div.submit input { margin-right: 15px; } + #buddypress .standard-form div.radio ul { margin: 10px 0 15px 38px; list-style: disc; } + #buddypress .standard-form div.radio ul li { margin-bottom: 5px; } + #buddypress .standard-form a.clear-value { display: block; margin-top: 5px; outline: none; } + #buddypress .standard-form #basic-details-section, #buddypress .standard-form #blog-details-section, #buddypress .standard-form #profile-details-section { @@ -744,13 +879,16 @@ float: left; width: 48%; } + #buddypress .standard-form #profile-details-section { float: right; } + #buddypress .standard-form #blog-details-section, #buddypress #notifications-bulk-management { clear: left; } + body.no-js #buddypress #notifications-bulk-management #select-all-notifications, body.no-js #buddypress label[for="message-type-select"], body.no-js #buddypress #message-type-select, @@ -759,6 +897,7 @@ body.no-js #buddypress #messages-bulk-management #select-all-messages { display: none; } + #buddypress .standard-form input:focus, #buddypress .standard-form textarea:focus, #buddypress .standard-form select:focus { @@ -765,9 +904,11 @@ background: #fafafa; color: #555; } + #buddypress form#send-invite-form { margin-top: 20px; } + #buddypress div#invite-list { background: #f5f5f5; height: 400px; @@ -776,6 +917,7 @@ padding: 5px; width: 160px; } + #buddypress button, #buddypress a.button, #buddypress input[type=submit], @@ -795,6 +937,7 @@ text-align: center; text-decoration: none; } + #buddypress button:hover, #buddypress a.button:hover, #buddypress a.button:focus, @@ -816,13 +959,13 @@ float: left; } -#buddypress form.standard-form .left-menu #invite-list ul{ - margin:1%; +#buddypress form.standard-form .left-menu #invite-list ul { + margin: 1%; list-style: none; } #buddypress form.standard-form .left-menu #invite-list ul li { - margin:0 0 0 1%; + margin: 0 0 0 1%; } #buddypress form.standard-form .main-column { @@ -830,12 +973,12 @@ } #buddypress form.standard-form .main-column ul#friend-list { - clear:none; + clear: none; float: left; } #buddypress form.standard-form .main-column ul#friend-list h4 { - clear:none; + clear: none; } /* Overrides for embedded WP editors */ @@ -848,9 +991,9 @@ } /* Form classes & generic attr styling */ -#buddypress form *[disabled="disabled"]{ +#buddypress form *[disabled="disabled"] { cursor: default; - opacity: .4; + opacity: 0.4; } .bp-screen-reader-text { @@ -870,16 +1013,19 @@ --------------------------------------------------------------*/ #buddypress a.loading, #buddypress input.loading { - -webkit-animation: loader-pulsate .5s infinite ease-in-out alternate; - -moz-animation: loader-pulsate .5s infinite ease-in-out alternate; + -webkit-animation: loader-pulsate 0.5s infinite ease-in-out alternate; + -moz-animation: loader-pulsate 0.5s infinite ease-in-out alternate; border-color: #aaa; } + @-webkit-keyframes loader-pulsate { + from { border-color: #aaa; -webkit-box-shadow: 0 0 6px #ccc; box-shadow: 0 0 6px #ccc; } + to { border-color: #ccc; -webkit-box-shadow: 0 0 6px #f8f8f8; @@ -886,12 +1032,15 @@ box-shadow: 0 0 6px #f8f8f8; } } + @-moz-keyframes loader-pulsate { + from { border-color: #aaa; -moz-box-shadow: 0 0 6px #ccc; box-shadow: 0 0 6px #ccc; } + to { border-color: #ccc; -moz-box-shadow: 0 0 6px #f8f8f8; @@ -903,6 +1052,7 @@ #buddypress input.loading:hover { color: #767676; } + #buddypress input[type="submit"].pending, #buddypress input[type="button"].pending, #buddypress input[type="reset"].pending, @@ -918,6 +1068,7 @@ color: #bbb; cursor: default; } + #buddypress input[type="submit"]:hover.pending, #buddypress input[type="button"]:hover.pending, #buddypress input[type="reset"]:hover.pending, @@ -939,23 +1090,29 @@ margin: 0; width: auto; } + #buddypress ul#topic-post-list li { padding: 15px; position: relative; } + #buddypress ul#topic-post-list li.alt { background: #f5f5f5; } + #buddypress ul#topic-post-list li div.poster-meta { color: #767676; margin-bottom: 10px; } + #buddypress ul#topic-post-list li div.post-content { margin-left: 54px; } + #buddypress div.topic-tags { font-size: 80%; } + #buddypress div.admin-links { color: #767676; font-size: 80%; @@ -963,23 +1120,28 @@ top: 15px; right: 25px; } + #buddypress div#topic-meta { margin: 0; padding: 5px 19px 30px; position: relative; } + #buddypress div#topic-meta div.admin-links { right: 19px; top: -36px; } + #buddypress div#topic-meta h3 { margin: 5px 0; } + #buddypress div#new-topic-post { display: none; - margin: 20px 0 0 0; - padding: 1px 0 0 0; + margin: 20px 0 0; + padding: 1px 0 0; } + #buddypress table.notifications, #buddypress table.notifications-settings, #buddypress table.profile-settings, @@ -989,6 +1151,7 @@ #buddypress table.forum { width: 100%; } + #buddypress table.notifications thead tr, #buddypress table.notifications-settings thead tr, #buddypress table.profile-settings thead tr, @@ -998,21 +1161,27 @@ #buddypress table.forum thead tr { background: #eaeaea; } + #buddypress table#message-threads { clear: both; } + #buddypress table.profile-fields { margin-bottom: 20px; } + #buddypress table.profile-fields:last-child { margin-bottom: 0; } + #buddypress table.profile-fields p { margin: 0; } + #buddypress table.profile-fields p:last-child { margin-top: 0; } + #buddypress table.notifications tr td, #buddypress table.notifications-settings tr td, #buddypress table.profile-settings tr td, @@ -1029,6 +1198,7 @@ padding: 8px; vertical-align: middle; } + #buddypress table.notifications tr td.label, #buddypress table.notifications-settings tr td.label, #buddypress table.profile-fields tr td.label, @@ -1039,20 +1209,25 @@ font-weight: bold; width: 25%; } + #buddypress #message-threads .thread-info { min-width: 40%; } + #buddypress table tr td.thread-info p { margin: 0; } + #buddypress table tr td.thread-info p.thread-excerpt { color: #767676; font-size: 80%; margin-top: 3px; } + #buddypress table.forum td { text-align: center; } + #buddypress table.notifications tr.alt td, #buddypress table.notifications-settings tr.alt td, #buddypress table.profile-settings tr.alt td, @@ -1062,13 +1237,16 @@ #buddypress table.forum tr.alt td { background: #f5f5f5; } + #buddypress table.notification-settings { margin-bottom: 20px; text-align: left; } + #buddypress #groups-notification-settings { margin-bottom: 0; } + #buddypress table.notifications th.icon, #buddypress table.notifications td:first-child, #buddypress table.notification-settings th.icon, @@ -1075,20 +1253,24 @@ #buddypress table.notification-settings td:first-child { display: none; } + #buddypress table.notification-settings th.title, #buddypress table.profile-settings th.title { width: 80%; } + #buddypress table.notification-settings .yes, #buddypress table.notification-settings .no { text-align: center; width: 40px; } + #buddypress table.forum { margin: 0; width: auto; clear: both; } + #buddypress table.forum tr.sticky td { font-size: 110%; background: #fff9db; @@ -1095,21 +1277,26 @@ border-top: 1px solid #ffe8c4; border-bottom: 1px solid #ffe8c4; } + #buddypress table.forum tr.closed td.td-title { padding-left: 35px; } + #buddypress table.forum td p.topic-text { color: #767676; font-size: 100%; } + #buddypress table.forum tr > td:first-child, #buddypress table.forum tr > th:first-child { padding-left: 15px; } + #buddypress table.forum tr > td:last-child, #buddypress table.forum tr > th:last-child { padding-right: 15px; } + #buddypress table.forum tr th#th-title, #buddypress table.forum tr th#th-poster, #buddypress table.forum tr th#th-group, @@ -1118,36 +1305,45 @@ #buddypress table.forum td.td-title { text-align: left; } + #buddypress table.forum tr td.td-title a.topic-title { font-size: 110%; } + #buddypress table.forum td.td-freshness { white-space: nowrap; } + #buddypress table.forum td.td-freshness span.time-since { font-size: 80%; color: #767676; } + #buddypress table.forum td img.avatar { float: none; margin: 0 5px -8px 0; } + #buddypress table.forum td.td-poster, #buddypress table.forum td.td-group { min-width: 140px; } + #buddypress table.forum th#th-title { width: 80%; } + #buddypress table.forum th#th-freshness { width: 25%; } + #buddypress table.forum th#th-postcount { width: 15%; } + #buddypress table.forum p.topic-meta { font-size: 80%; - margin: 5px 0 0 0; + margin: 5px 0 0; } /*------------------------------------------------------------------------- @@ -1156,6 +1352,7 @@ #buddypress .item-body { margin: 20px 0; } + #buddypress span.activity { display: inline-block; font-size: small; @@ -1162,6 +1359,7 @@ opacity: 0.8; padding: 0; } + #buddypress span.user-nicename { color: #767676; display: inline-block; @@ -1168,6 +1366,7 @@ font-size: 120%; font-weight: bold; } + #buddypress div#message p, #sitewide-notice p { font-weight: normal; @@ -1177,30 +1376,37 @@ border: 1px solid #cb2; color: #440; } + #buddypress #item-header:after { clear: both; content: ""; display: table; } + #buddypress div#item-header div#item-header-content { float: left; margin-left: 0; } + #buddypress div#item-header h2 { line-height: 120%; - margin: 0 0 15px 0; + margin: 0 0 15px; } + #buddypress div#item-header h2 a { color: #767676; text-decoration: none; } + #buddypress div#item-header img.avatar { float: left; margin: 0 15px 19px 0; } + #buddypress div#item-header h2 { margin-bottom: 5px; } + #buddypress div#item-header h2 span.highlight { font-size: 60%; font-weight: normal; @@ -1208,6 +1414,7 @@ vertical-align: middle; display: inline-block; } + #buddypress div#item-header h2 span.highlight span { background: #a1dcfa; color: #fff; @@ -1221,13 +1428,15 @@ top: -2px; vertical-align: middle; } + #buddypress div#item-header div#item-meta { font-size: 80%; color: #767676; overflow: hidden; - margin: 15px 0 5px 0; + margin: 15px 0 5px; padding-bottom: 10px; } + #buddypress div#item-header div#item-actions { float: right; margin: 0 0 15px 15px; @@ -1234,22 +1443,27 @@ text-align: right; width: 20%; } + #buddypress div#item-header div#item-actions h3 { - margin: 0 0 5px 0; + margin: 0 0 5px; } + #buddypress div#item-header ul { margin-bottom: 15px; overflow: hidden; } + #buddypress div#item-header ul h5, #buddypress div#item-header ul span, #buddypress div#item-header ul hr { display: none; } + #buddypress div#item-header ul li { float: right; list-style: none; } + #buddypress div#item-header ul img.avatar, #buddypress div#item-header ul.avatars img.avatar { height: 30px; @@ -1256,17 +1470,21 @@ margin: 2px; width: 30px; } + #buddypress div#item-header div.generic-button, #buddypress div#item-header a.button { float: left; margin: 10px 10px 0 0; } + body.no-js #buddypress div#item-header .js-self-profile-button { - display:none; + display: none; } + #buddypress div#item-header div#message.info { line-height: 80%; } + #buddypress ul.item-list { border-top: 1px solid #eaeaea; width: 100%; @@ -1275,10 +1493,12 @@ margin: 0; padding: 0; } + body.activity-permalink #buddypress ul.item-list, body.activity-permalink #buddypress ul.item-list li.activity-item { border: none; } + #buddypress ul.item-list li { border-bottom: 1px solid #eaeaea; padding: 15px 0; @@ -1286,13 +1506,16 @@ position: relative; list-style: none; } + #buddypress ul.single-line li { border: none; } + #buddypress ul.item-list li img.avatar { float: left; margin: 0 10px 0 0; } + #buddypress ul.item-list li div.item-title, #buddypress ul.item-list li h4 { font-weight: normal; @@ -1300,10 +1523,12 @@ margin: 0; width: 75%; } + #buddypress ul.item-list li div.item-title span { color: #767676; font-size: 80%; } + #buddypress ul.item-list li div.item-desc { color: #767676; font-size: 80%; @@ -1310,9 +1535,11 @@ margin: 10px 0 0 60px; width: 50%; } + #buddypress ul.item-list li.group-no-avatar div.item-desc { margin-left: 0; } + #buddypress ul.item-list li div.action { position: absolute; top: 15px; @@ -1319,16 +1546,19 @@ right: 0; text-align: right; } + #buddypress ul.item-list li div.meta { color: #767676; font-size: 80%; margin-top: 10px; } + #buddypress ul.item-list li h5 span.small { float: right; font-size: 80%; font-weight: normal; } + #buddypress div.item-list-tabs { background: transparent; clear: left; @@ -1339,24 +1569,30 @@ margin: 0; padding: 0; } + #buddypress div.item-list-tabs ul li { float: left; margin: 0; list-style: none; } + #buddypress div.item-list-tabs#subnav ul li { margin-top: 0; } + #buddypress div.item-list-tabs ul li.last { float: right; margin: 7px 0 0; } + #buddypress div.item-list-tabs#subnav ul li.last { margin-top: 4px; } + #buddypress div.item-list-tabs ul li.last select { max-width: 185px; } + #buddypress div.item-list-tabs ul li a, #buddypress div.item-list-tabs ul li span { display: block; @@ -1363,6 +1599,7 @@ padding: 5px 10px; text-decoration: none; } + #buddypress div.item-list-tabs ul li a span { background: #eee; border-radius: 50%; @@ -1375,33 +1612,40 @@ text-align: center; vertical-align: middle; } + #buddypress div.item-list-tabs ul li.selected a, #buddypress div.item-list-tabs ul li.current a { background-color: #eee; color: #555; - opacity: .8; + opacity: 0.8; font-weight: bold; } + #buddypress div.item-list-tabs ul li.selected a span, #buddypress div.item-list-tabs ul li.current a span, #buddypress div.item-list-tabs ul li a:hover span { background-color: #eee; } + #buddypress div.item-list-tabs ul li.selected a span, #buddypress div.item-list-tabs ul li.current a span { background-color: #fff; } + #buddypress div#item-nav ul li.loading a { background-position: 88% 50%; } + #buddypress div.item-list-tabs#object-nav { margin-top: 0; } + #buddypress div.item-list-tabs#subnav { background: transparent; - margin: 10px 0 10px; + margin: 10px 0; overflow: hidden; } + #buddypress #admins-list li, #buddypress #mods-list li, #buddypress #members-list li { @@ -1408,6 +1652,7 @@ overflow: auto; list-style: none; } + #buddypress #item-buttons:empty { display: none; } @@ -1452,59 +1697,74 @@ border-bottom: 1px solid #ffe8c4; font-weight: bold; } + #buddypress table#message-threads tr.unread td .thread-excerpt, #buddypress table#message-threads tr.unread td .activity, #buddypress table#message-threads tr.unread td.thread-options { font-weight: normal; } + #buddypress li span.unread-count, #buddypress tr.unread span.unread-count { - background: #dd0000; + background: #d00; color: #fff; font-weight: bold; padding: 2px 8px; } + #buddypress div.item-list-tabs ul li a span.unread-count { padding: 1px 6px; color: #fff; } + #buddypress div#message-thread div.message-box { margin: 0; padding: 15px; } + #buddypress div#message-thread div.alt { background: #f4f4f4; } + #buddypress div#message-thread p#message-recipients { - margin: 10px 0 20px 0; + margin: 10px 0 20px; } + #buddypress div#message-thread img.avatar { float: left; margin: 0 10px 0 0; vertical-align: middle; } + #buddypress div#message-thread strong { font-size: 100%; margin: 0; } + #buddypress div#message-thread strong a { text-decoration: none; } + #buddypress div#message-thread strong span.activity { margin-top: 4px; } + #buddypress div#message-thread div.message-metadata { overflow: hidden; } + #buddypress div#message-thread div.message-content { margin-left: 45px; } + #buddypress div#message-thread div.message-options { text-align: right; } + #buddypress #message-threads img.avatar { max-width: none; } + #buddypress div.message-search { float: right; margin: 0 20px; @@ -1513,11 +1773,13 @@ .message-metadata { position: relative; } + .message-star-actions { position: absolute; right: 0; top: 0; } + #buddypress a.message-action-star, #buddypress a.message-action-unstar { border-bottom: 0; @@ -1524,21 +1786,26 @@ text-decoration: none; outline: none; } + a.message-action-star { - opacity: .7; + opacity: 0.7; } + a.message-action-star:hover { opacity: 1; } + .message-action-star span.icon:before, .message-action-unstar span.icon:before { font-family: dashicons; font-size: 18px; } + .message-action-star span.icon:before { color: #767676; content: "\f154"; } + .message-action-unstar span.icon:before { color: #fcdd77; content: "\f155"; @@ -1552,54 +1819,68 @@ margin-bottom: auto; margin-top: 15px; } + #buddypress #profile-edit-form ul.button-nav { margin-top: 15px; } + body.no-js #buddypress .field-visibility-settings-toggle, body.no-js #buddypress .field-visibility-settings-close { display: none; } + #buddypress .field-visibility-settings { display: none; margin-top: 10px; } - body.no-js #buddypress .field-visibility-settings { - display: block; - } + +body.no-js #buddypress .field-visibility-settings { + display: block; +} + #buddypress .current-visibility-level { font-weight: bold; font-style: normal; } + #buddypress .field-visibility-settings, #buddypress .field-visibility-settings-toggle, #buddypress .field-visibility-settings-notoggle { color: #767676; } + #buddypress .field-visibility-settings-toggle a, #buddypress .field-visibility-settings a { font-size: 80%; } + body.register #buddypress div.page ul { list-style: none; } + #buddypress .standard-form .field-visibility-settings label { margin: 0; font-weight: normal; } + #buddypress .field-visibility-settings legend, #buddypress .field-visibility-settings-toggle { font-style: italic; } + #buddypress .field-visibility-settings .radio { list-style: none; margin-bottom: 0; } + #buddypress .field-visibility select { margin: 0; } + #buddypress .wp-editor-container { border: 1px solid #dedede; } + #buddypress .html-active button.switch-html { border-bottom-color: transparent; border-bottom-left-radius: 0; @@ -1606,6 +1887,7 @@ border-bottom-right-radius: 0; background: #f5f5f5; } + #buddypress .tmce-active button.switch-tmce { border-bottom-color: transparent; border-bottom-left-radius: 0; @@ -1612,6 +1894,7 @@ border-bottom-right-radius: 0; background: #f5f5f5; } + #buddypress .standard-form .wp-editor-container textarea { width: 100%; padding-top: 0; @@ -1636,12 +1919,12 @@ .widget.buddypress div.item-options { font-size: 90%; - margin: 0 0 1em 0; + margin: 0 0 1em; padding: 1em 0; } -.widget.buddypress div.item{ - margin:0 0 1em 0; +.widget.buddypress div.item { + margin: 0 0 1em; } .widget.buddypress div.item-meta, @@ -1655,6 +1938,7 @@ margin-right: 10px; width: 40px; } + .widget.buddypress div.item-avatar img { height: 40px; margin: 1px; @@ -1661,13 +1945,13 @@ width: 40px; } -.widget.buddypress div.avatar-block{ +.widget.buddypress div.avatar-block { overflow: hidden; } .widget.buddypress #bp-login-widget-form label { display: block; - margin: 1rem 0 .5rem; + margin: 1rem 0 0.5rem; } .widget.buddypress #bp-login-widget-form #bp-login-widget-submit { @@ -1688,7 +1972,7 @@ } .widget.buddypress .bp-login-widget-user-links > div { - margin-bottom: .5rem; + margin-bottom: 0.5rem; } .widget.buddypress .bp-login-widget-user-links > div.bp-login-widget-user-link a { @@ -1715,25 +1999,30 @@ /*-------------------------------------------------------------- 4.1 - Smartphones - landscape --------------------------------------------------------------*/ -@media only screen and (max-width: 480px ){ +@media only screen and (max-width: 480px) { + #buddypress div.dir-search { float: right; margin-top: -50px; text-align: right; } + #buddypress div.dir-search input[type="text"] { margin-bottom: 1em; width: 50%; } + a.bp-title-button { margin-left: 10px; } - #buddypress form.standard-form .main-column div.action{ + + #buddypress form.standard-form .main-column div.action { position: relative; - margin-bottom:1em; + margin-bottom: 1em; } - #buddypress form.standard-form .main-column ul#friend-list h4{ - width:100%; + + #buddypress form.standard-form .main-column ul#friend-list h4 { + width: 100%; } } @@ -1741,6 +2030,7 @@ 4.2 - Smartphones - portrait --------------------------------------------------------------*/ @media only screen and (max-width: 320px) { + #buddypress div.dir-search { clear: left; float: left; @@ -1747,10 +2037,12 @@ margin-top: 0; text-align: left; } + #buddypress li#groups-order-select { clear: left; float: left; } + #buddypress ul.item-list li div.action { clear: left; float: left; @@ -1761,6 +2053,7 @@ right: 0; text-align: left; } + #buddypress ul.item-list li div.item-desc { clear: left; float: left; @@ -1767,16 +2060,20 @@ margin: 10px 0 0; width: auto; } + #buddypress li div.item { margin-left: 70px; width: auto; } + #buddypress ul.item-list li div.meta { margin-top: 0; } + #buddypress .item-desc p { margin: 0 0 10px; } + #buddypress div.pagination .pag-count { margin-left: 0; } @@ -1786,24 +2083,30 @@ 4.2 - Smartphones - smaller screen sizes --------------------------------------------------------------*/ @media only screen and (max-width: 240px) { + #buddypress div.dir-search { float: left; margin: 0; } + #buddypress div.dir-search input[type="text"] { width: 50%; } + #buddypress li#groups-order-select { float: left; } + #buddypress ul.item-list li img.avatar { width: 30px; height: auto; } + #buddypress ul.item-list li div.action, - #buddypress li div.item{ + #buddypress li div.item { margin-left: 45px; } + h1 a.bp-title-button { clear: left; float: left; Index: src/bp-templates/bp-legacy/css/twentyfifteen-rtl.css =================================================================== --- src/bp-templates/bp-legacy/css/twentyfifteen-rtl.css (revision 10712) +++ src/bp-templates/bp-legacy/css/twentyfifteen-rtl.css (working copy) @@ -1,4 +1,6 @@ @charset "UTF-8"; +/* stylelint-disable declaration-colon-space-after */ +/* stylelint-enable */ /*------------------------------------------------------------------------------ This is the BuddyPress companion stylesheet for @@ -101,7 +103,7 @@ .buddypress main article .entry-header, .buddypress main article .entry-content { - padding: 0 3rem 3rem 3rem; + padding: 0 3rem 3rem; } .buddypress main article #buddypress { @@ -821,7 +823,7 @@ .bp-user #buddypress #item-header .generic-button, .single-item.groups #buddypress #item-header .generic-button { float: none; - margin: 1.5em 0 0 0; + margin: 1.5em 0 0; } } @@ -1506,7 +1508,7 @@ width: 100%; } -.bp-user #buddypress #message-threads tr td.thread-info a::after { +.bp-user #buddypress #message-threads tr td.thread-info a:after { content: " – " attr(title); font-size: 12px; font-size: 1.2rem; @@ -1640,7 +1642,7 @@ text-indent: -999em; } -.bp-user #buddypress #message-threads.sitewide-notices td:last-child a:last-child::after { +.bp-user #buddypress #message-threads.sitewide-notices td:last-child a:last-child:after { content: attr(title); display: block; line-height: initial; @@ -1742,9 +1744,9 @@ list-style: none; } -#buddypress .standard-form input[type='text'], +#buddypress .standard-form input[type="text"], #buddypress .standard-form textarea, -#buddypress .group-create-form input[type='text'], +#buddypress .group-create-form input[type="text"], #buddypress .group-create-form textarea { width: 100%; } @@ -1770,20 +1772,20 @@ width: 80%; } -#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'] { +#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"] { float: right; margin: 0; width: 80%; } -#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'] { +#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"] { font-size: 14px; font-size: 1.4rem; border: 0; @@ -1790,16 +1792,16 @@ line-height: inherit; } -#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'] { +#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"] { border-left: 1px solid rgba(153, 153, 153, 0.4); padding: 0.2em 0.2em 0.2em 0; } -#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'] { +#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"] { float: left; font-weight: normal; padding: 0.2em 1em; @@ -1816,26 +1818,26 @@ margin-bottom: 5px !important; } #buddypress div.dir-search form label, - #buddypress div.dir-search form input[type='text'], - #buddypress div.dir-search form input[type='submit'], + #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 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'] { + #buddypress li.groups-members-search form input[type="text"], + #buddypress li.groups-members-search form input[type="submit"] { width: auto; } } @media screen and (min-width: 77.5em) { - #buddypress .dir-search form input[type='text'], - #buddypress .message-search form input[type='text'] { + #buddypress .dir-search form input[type="text"], + #buddypress .message-search form input[type="text"] { font-size: 16px; font-size: 1.6rem; } - #buddypress .dir-search form input[type='submit'], - #buddypress .message-search form input[type='submit'] { + #buddypress .dir-search form input[type="submit"], + #buddypress .message-search form input[type="submit"] { font-size: 16px; font-size: 1.6rem; } Index: src/bp-templates/bp-legacy/css/twentyfifteen.css =================================================================== --- src/bp-templates/bp-legacy/css/twentyfifteen.css (revision 10712) +++ src/bp-templates/bp-legacy/css/twentyfifteen.css (working copy) @@ -1,4 +1,6 @@ @charset "UTF-8"; +/* stylelint-disable declaration-colon-space-after */ +/* stylelint-enable */ /*------------------------------------------------------------------------------ This is the BuddyPress companion stylesheet for @@ -101,7 +103,7 @@ .buddypress main article .entry-header, .buddypress main article .entry-content { - padding: 0 3rem 3rem 3rem; + padding: 0 3rem 3rem; } .buddypress main article #buddypress { @@ -821,7 +823,7 @@ .bp-user #buddypress #item-header .generic-button, .single-item.groups #buddypress #item-header .generic-button { float: none; - margin: 1.5em 0 0 0; + margin: 1.5em 0 0; } } @@ -1506,7 +1508,7 @@ width: 100%; } -.bp-user #buddypress #message-threads tr td.thread-info a::after { +.bp-user #buddypress #message-threads tr td.thread-info a:after { content: " – " attr(title); font-size: 12px; font-size: 1.2rem; @@ -1640,7 +1642,7 @@ text-indent: -999em; } -.bp-user #buddypress #message-threads.sitewide-notices td:last-child a:last-child::after { +.bp-user #buddypress #message-threads.sitewide-notices td:last-child a:last-child:after { content: attr(title); display: block; line-height: initial; @@ -1742,9 +1744,9 @@ list-style: none; } -#buddypress .standard-form input[type='text'], +#buddypress .standard-form input[type="text"], #buddypress .standard-form textarea, -#buddypress .group-create-form input[type='text'], +#buddypress .group-create-form input[type="text"], #buddypress .group-create-form textarea { width: 100%; } @@ -1770,20 +1772,20 @@ width: 80%; } -#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'] { +#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"] { float: left; margin: 0; width: 80%; } -#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'] { +#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"] { font-size: 14px; font-size: 1.4rem; border: 0; @@ -1790,16 +1792,16 @@ line-height: inherit; } -#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'] { +#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"] { border-right: 1px solid rgba(153, 153, 153, 0.4); padding: 0.2em 0 0.2em 0.2em; } -#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'] { +#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"] { float: right; font-weight: normal; padding: 0.2em 1em; @@ -1816,26 +1818,26 @@ margin-bottom: 5px !important; } #buddypress div.dir-search form label, - #buddypress div.dir-search form input[type='text'], - #buddypress div.dir-search form input[type='submit'], + #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 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'] { + #buddypress li.groups-members-search form input[type="text"], + #buddypress li.groups-members-search form input[type="submit"] { width: auto; } } @media screen and (min-width: 77.5em) { - #buddypress .dir-search form input[type='text'], - #buddypress .message-search form input[type='text'] { + #buddypress .dir-search form input[type="text"], + #buddypress .message-search form input[type="text"] { font-size: 16px; font-size: 1.6rem; } - #buddypress .dir-search form input[type='submit'], - #buddypress .message-search form input[type='submit'] { + #buddypress .dir-search form input[type="submit"], + #buddypress .message-search form input[type="submit"] { font-size: 16px; font-size: 1.6rem; } Index: src/bp-templates/bp-legacy/css/twentyfifteen.scss =================================================================== --- src/bp-templates/bp-legacy/css/twentyfifteen.scss (revision 10712) +++ src/bp-templates/bp-legacy/css/twentyfifteen.scss (working copy) @@ -105,7 +105,9 @@ @if $text-color { // if a param was passed through $text-color: $text-color; - } @else { + } + + @else { $text-color: darken($background, 50%); } @@ -124,6 +126,7 @@ } // Variables: color definitions +/* stylelint-disable declaration-colon-space-after */ $content-background: #fff; $light-background: #f7f7f7; $medium-background: #ccc; @@ -141,6 +144,7 @@ $stripe-even: #dbe5ff; $unread: #dce5ff; $link-action: #c82b2b; +/* stylelint-enable */ /*------------------------------------------------------------------------------ @@ -208,6 +212,7 @@ // for all heading h# elements this is problematic where floats are concerned // We reset this here under our #buddypress namespace #buddypress { + h1, h2, h3, @@ -222,8 +227,13 @@ // to maximise the screen real estate for BP pages. .buddypress { - div.clear {display: none;} + + div.clear { + display: none; + } + .site-content { + @media screen and (min-width: 77.5em) { } } @@ -249,7 +259,7 @@ .entry-header, .entry-content { - padding: 0 3rem 3rem 3rem; + padding: 0 3rem 3rem; } #buddypress { @@ -277,6 +287,7 @@ // Remove 2015 border bottom on BP links/spans .buddypress #buddypress { + .item-list-tabs, .activity-header, .activity-inner, @@ -287,12 +298,19 @@ #latest-update, table, .avatar-nav-items { - a { border-bottom: 0; } + + a { + border-bottom: 0; + } } .pagination-links { + a, - span { border-bottom: 0; } + + span { + border-bottom: 0; + } } } // close .buddypress #buddypress @@ -311,8 +329,11 @@ // active/current states all navs div.item-list-tabs { + ul { + li.selected { + a { background: $dark-background; color: #fff; @@ -323,6 +344,7 @@ } // Global Nav Styles div.item-list-tabs { + ul { background-color: $light-background; border-bottom: 1px solid rgba($border-light, 0.9); @@ -331,8 +353,12 @@ padding: $spacing-val-xs 0; li { + a { - span {border-radius: 25%;} + + span { + border-radius: 25%; + } } } } @@ -343,12 +369,20 @@ ul { overflow: hidden; - li {float: none;} + + li { + float: none; + } + li:not(.selected) { - a {opacity: 0.7;} + + a { + opacity: 0.7; + } } @media screen and (min-width: 38.75em) { + li { float: left; } @@ -380,6 +414,7 @@ select, label, option { + @include font-size(14); } @@ -389,6 +424,7 @@ } @media screen and (min-width: 38.75em) { + li.last { text-align: right; } @@ -398,9 +434,12 @@ // active/current states all navs div.item-list-tabs { + ul { + li.selected, li.current { + a { background: $dark-background; color: #fff; @@ -412,12 +451,13 @@ } // close #buddypress - /*__ Vertical menu User Account / Group single screens __*/ +/*__ Vertical menu User Account / Group single screens __*/ // This block contains rules to re-factor the item-body structural element // to sit alongside the vert menu @media screen and (min-width: 55em) { + .bp-user #buddypress, .single-item.groups #buddypress { background: $light-background; @@ -424,6 +464,7 @@ } #buddypress { + #item-header, #item-body { background: $content-background; @@ -474,9 +515,15 @@ */ #buddypress { + div.pagination { + box-shadow: none; - .pag-count {margin-left: 0;} + + .pag-count { + margin-left: 0; + } + .pagination-links { margin-right: 0; @@ -493,7 +540,10 @@ color: inherit; overflow: visible; width: auto; - &:before {display: none;} + + &:before { + display: none; + } } .prev { @@ -517,9 +567,12 @@ // Adjusts Meta items and various elements to match 2015 font-family #buddypress { + .item-list { + .activity-header, .activity-meta { + @include default-font-sans(); } } @@ -534,7 +587,9 @@ // Adjusts Meta items to match 2015 font-family #buddypress { + ul.item-list { + li { overflow: hidden !important; @@ -541,9 +596,17 @@ // Undo BP floats to center avatars initially mobile up .item-avatar { margin-bottom: $spacing-val-sm; - @media screen and (min-width: 38.75em) { margin-bottom: 0; } + + @media screen and (min-width: 38.75em) { + margin-bottom: 0; + } + text-align: center; - a {border-bottom: 0;} + + a { + border-bottom: 0; + } + img.avatar { display: inline-block; float: none; @@ -558,7 +621,9 @@ .item { margin-left: 25%; - span.activity {font-style: italic;} + span.activity { + font-style: italic; + } .item-desc { margin-left: 0; @@ -567,6 +632,7 @@ } @media screen and (min-width: 59.6875em) { + .item-avatar, .item, .action { @@ -650,6 +716,7 @@ */ #buddypress { + form#whats-new-form { // Line-height issue inherited from BP rules, override. @@ -660,8 +727,11 @@ // corrective measure for clipped elements due to JS inline styling @media screen and (max-width: 30em) { + #whats-new-post-in-box { + select { + @include font-size(14); max-width: 120px; } @@ -669,6 +739,7 @@ } @media screen and (max-width: 38.75em) { + #whats-new-content { clear: left; margin: $spacing-val-sm 0 $spacing-val-lg; @@ -677,7 +748,9 @@ #whats-new-submit { float: none; - input {width: 100%;} + input { + width: 100%; + } } } @@ -685,12 +758,18 @@ display: flex; flex-direction: column; - #whats-new-submit {order: 2;} - #whats-new-post-in-box {order: 1;} + #whats-new-submit { + order: 2; + } + + #whats-new-post-in-box { + order: 1; + } } } // close @media #whats-new-options[style] { + #whats-new-post-in-box { border: 1px solid rgba($border-color, 0.5); float: left; @@ -711,6 +790,7 @@ } @media screen and (min-width: 30em) { + #whats-new-post-in-box { width: auto; } @@ -726,6 +806,7 @@ // User account form requires matching bp default specificity #item-body { + form#whats-new-form { margin: $spacing-val-lg 0; } @@ -769,6 +850,7 @@ margin-left: 0; .activity-header { + @include font-size(14); } } @@ -779,7 +861,10 @@ float: left; margin-right: $spacing-val-sm; text-align: left; - a {border-bottom: 0;} + + a { + border-bottom: 0; + } } .activity-content { @@ -787,6 +872,7 @@ overflow: hidden; .activity-header { + @include font-size(16); } } @@ -796,8 +882,11 @@ } // close li li.mini { + .activity-avatar { + a { + img.avatar { height: 30px; margin-left: 15px; @@ -807,7 +896,9 @@ } .activity-content { + .activity-header { + @include font-size(13); } } @@ -833,6 +924,7 @@ } // close .activity-header .activity-meta { + a { display: block; margin: 0 0 $spacing-val-xs; @@ -855,7 +947,10 @@ &:hover { background: darken($light-background, 1%); border: 1px solid rgba(#9fd1e2, 0.3); - a { font-style: italic; } + + a { + font-style: italic; + } } a { @@ -869,6 +964,7 @@ /* Single activity view - activity permalink */ .activity-permalink { + #buddypress { background: none; // counter the .bp-user faux column background #activity-stream { @@ -878,14 +974,21 @@ } li.mini { + .activity-header { + @include font-size(16); + @media screen and (min-width: 46.25em) { + @include font-size(20); } margin-bottom: $spacing-val-lg; - p {padding: $spacing-val-md;} + + p { + padding: $spacing-val-md; + } } } } @@ -900,6 +1003,7 @@ #buddypress { #activity-stream { + .activity-comments { margin: $spacing-val-sm 0 0; @@ -936,17 +1040,24 @@ padding-left: 0.2em; } - .acomment-meta {border-bottom: 1px solid $border-light; font-style: italic;} + .acomment-meta { + border-bottom: 1px solid $border-light; + font-style: italic; + } // Display the user avatar stacked up to 30em // reduce/widen the content margins @media screen and (max-width: 38.75em) { + .acomment-avatar { display: block; text-align: center; a, - img.avatar {display: inline; float: none;} + img.avatar { + display: inline; + float: none; + } } .acomment-content, @@ -955,12 +1066,16 @@ margin: $spacing-val-xs; } - .acomment-content {padding: 0 $spacing-val-sm;} + .acomment-content { + padding: 0 $spacing-val-sm; + } } // close @media } // close the ul li comments construct - .ac-reply-avatar {display: none;} + .ac-reply-avatar { + display: none; + } .ac-reply-content { margin-left: 0; @@ -968,8 +1083,11 @@ } @media screen and (min-width: 38.75em) { - .ac-reply-avatar {display: block;} + .ac-reply-avatar { + display: block; + } + .ac-reply-content { overflow: hidden; } @@ -982,6 +1100,7 @@ color: rgba($body-text, 0.8); display: inline-block; font-family: inherit; + @include font-size(12); font-weight: normal; line-height: 1.2; @@ -1014,10 +1133,13 @@ */ #buddypress { + #members-list { @media screen and (min-width: 59.6875em) { + li { + .item-avatar, .item { float: left; @@ -1047,8 +1169,11 @@ .bp-user, .single-item.groups { + @media screen and (max-width: 46.25em) { + main { + header.entry-header { padding-bottom: 1rem; } @@ -1056,6 +1181,7 @@ } @media screen and (max-width: 38.75em) { + h1, #item-header-content { text-align: center; @@ -1063,21 +1189,26 @@ } #buddypress { + @media screen and (max-width: 46.25em) { + #item-header { + .generic-button { float: none; - margin: 1.5em 0 0 0; + margin: 1.5em 0 0; } } } @media screen and (max-width: 38.75em) { + h1 { margin-bottom: 0; } #item-header-avatar { + img.avatar { margin-right: 0; } @@ -1099,9 +1230,13 @@ */ .single-item.groups { + #buddypress { + @media screen and (max-width: 46.25em) { + #item-header { + #item-meta { margin-bottom: $spacing-val-md; } @@ -1111,6 +1246,7 @@ // 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; @@ -1129,9 +1265,13 @@ } } - #item-header-content {order: 2;} + #item-header-content { + order: 2; + } - #item-actions {order: 3;} + #item-actions { + order: 3; + } } } // close @media @@ -1151,9 +1291,11 @@ h3 { background: $dark-background; color: $content-background; + @include font-size(14); @media screen and (min-width: 46.25em) { + @include font-size(16); } @@ -1197,7 +1339,9 @@ */ .bp-user { + #buddypress { + #item-header { padding: $spacing-val-md 0; @@ -1213,6 +1357,7 @@ } @media screen and (min-width: 46.25em) { + #item-header-avatar { float: left; width: 20%; @@ -1244,6 +1389,7 @@ // Manage the margins inherited from 2015 inside the item-body sections // generally far too large a top margin for headings in our lists #item-body { + h1, h2, h3, @@ -1252,7 +1398,9 @@ h6 { margin: 1em 0; - a {border-bottom: 0;} + a { + border-bottom: 0; + } } } /** @@ -1272,7 +1420,9 @@ // headings settings screens & general global settings styles .groups { + #group-settings-form { + h4 { background: $dark-background; color: $content-background; @@ -1280,6 +1430,7 @@ } // remove backgrounds from request list member names. #request-list { + h4 { background: none; color: inherit; @@ -1289,10 +1440,12 @@ } .groups.edit-details { + #group-settings-form { label { background: $dark-background; + @include border-top-radius(4px); color: $content-background; display: inline-block; @@ -1309,6 +1462,7 @@ textarea + p label { background: none; color: inherit; + @include font-size(14); width: auto; } @@ -1317,10 +1471,12 @@ } // close .groups.edit-details .groups.group-settings { + #group-settings-form, #create-group-form { div.radio { + label { border: 1px solid $border-light; padding: 0.2em; @@ -1328,6 +1484,7 @@ ul { color: rgba($body-text, 0.6); + @include font-size(14); } } @@ -1344,8 +1501,11 @@ } .groups.manage-members { + #group-settings-form { + .item-list { + li { border-bottom: 1px solid $border-light; @@ -1353,7 +1513,9 @@ h5 { float: left; - > a {border-bottom: 0;} + > a { + border-bottom: 0; + } } span.small { @@ -1391,11 +1553,15 @@ /* Members loop */ .groups.group-members { + #buddypress { + #members-group-list { + li { @media screen and (max-width: 30em) { + > a { border-bottom: 0; display: block; @@ -1411,18 +1577,23 @@ h5 { display: inline-block; + @include font-size(14); @media screen and (min-width: 59.6875em) { + @include font-size(16); } margin: 0; - a {border-bottom: 0;} + a { + border-bottom: 0; + } } // close h5 span.activity { + @include font-size(12); } @@ -1436,8 +1607,11 @@ // Massage the members search for groups nav specifically. .groups.group-members { + #subnav { + li { + @media screen and (max-width: 38.75em) { background: $content-background; padding: $spacing-val-md 0; @@ -1453,7 +1627,10 @@ width: 100%; label { - input[type="text"] {width: 100%;} + + input[type="text"] { + width: 100%; + } } } @@ -1470,8 +1647,11 @@ */ .groups.group-invites { + #item-body { + .item-list { + .action { margin-bottom: 0; } @@ -1479,8 +1659,11 @@ } @media screen and (min-width: 46.25em) { + #buddypress { + #item-body { + #message { margin-top: 0; } @@ -1489,13 +1672,19 @@ } @media screen and (min-width: 55em) { + #buddypress { - #send-invite-form { margin-top: 0;} + + #send-invite-form { + margin-top: 0; + } } } #item-body { + @media screen and (max-width: 46.25em) { + .left-menu { float: none; margin: $spacing-val-sm 0; @@ -1511,6 +1700,7 @@ } .submit { + input { display: inline-block; width: 100%; @@ -1531,6 +1721,7 @@ */ .bp-user { + .entry-title { margin-bottom: 0.5em; } @@ -1547,21 +1738,47 @@ #buddypress { table { - th {@include font-size(14)} - td {@include font-size(12)} + th { + + @include font-size(14); + } + + td { + + @include font-size(12); + } + @media screen and (min-width: 46.25em) { - th {@include font-size(16)} - td {@include font-size(14)} + + th { + + @include font-size(16); + } + + td { + + @include font-size(14); + } } @media screen and (min-width: 77.5em) { - th {@include font-size(18)} - td {@include font-size(16)} + + th { + + @include font-size(18); + } + + td { + + @include font-size(16); + } } } - .pag-count {font-style: italic;} + .pag-count { + font-style: italic; + } .notifications-options-nav, .messages-options-nav { @@ -1574,6 +1791,7 @@ select, input { + @include font-size(14); outline: 0; padding: 0; @@ -1591,12 +1809,15 @@ input { float: right; + @include default-font-serif(); line-height: 1.5; margin-top: $spacing-val-sm; width: 100%; - &[disabled]:hover {background: none;} + &[disabled]:hover { + background: none; + } @media screen and (min-width: 30em) { margin-top: 0; @@ -1617,9 +1838,13 @@ */ .bp-user { + #buddypress { + .profile { + .bp-widget { + h4 { background: lighten($dark-background, 10%); color: #fff; @@ -1627,7 +1852,9 @@ padding: 0.4em; } - table {margin-top: 0;} + table { + margin-top: 0; + } } } } @@ -1635,10 +1862,13 @@ /* Edit Profile */ .bp-user { + #buddypress { .profile { + #profile-edit-form { + .button-nav:before, .button-nav:after { content: " "; @@ -1667,12 +1897,14 @@ a { background: none; border: 0; - @include font-size(18) + + @include font-size(18); } } //.button-nav .field-visibility-settings-toggle, .field-visibility-settings { + @include font-size(14); } @@ -1685,8 +1917,12 @@ } // close profile form .bp-avatar { + #bp-delete-avatar { - a {font-size: inherit; } + + a { + font-size: inherit; + } } } } // close .profile @@ -1704,8 +1940,11 @@ #buddypress { #groups-list { + li { + .item { + @media screen and (min-width: 77.5em) { left: 5%; width: 50%; @@ -1757,6 +1996,7 @@ } @media screen and (min-width: 46.25em) { + img.avatar { float: left; } @@ -1777,6 +2017,7 @@ } #send-reply { + .message-content { background: $content-background; border: 0; @@ -1790,7 +2031,9 @@ } // close message-thread Singular view! #message-threads { + thead { + tr { background: lighten($dark-background, 10%); } @@ -1797,6 +2040,7 @@ } tr { + td { background: $content-background; display: inline-block; @@ -1828,6 +2072,7 @@ td.thread-from, td.thread-options { border-left: 0 !important; + @include calc(width, "100% - 30px"); margin-left: 0; } @@ -1836,8 +2081,9 @@ padding-left: 41px; width: 100%; - a::after { + a:after { content: " \2013 \00a0"attr(title); + @include font-size(12); } } @@ -1846,6 +2092,7 @@ text-align: right; a { + @include font-size(12); line-height: 2.2; } @@ -1862,6 +2109,7 @@ @media screen and (max-width: 38.75em) { clear: both; + @include font-size(11); width: 100%; } @@ -1869,6 +2117,7 @@ } tr.unread { + td { background: $unread; border-bottom-color: darken($border-light, 20%); @@ -1897,7 +2146,9 @@ .acfb-holder { list-style: none; - li {margin-left: 0;} + li { + margin-left: 0; + } li.friend-tab { background: lighten($notice-info, 20%); @@ -1932,6 +2183,7 @@ } #message-threads.sitewide-notices { + td { width: 100%; @@ -1974,7 +2226,7 @@ text-indent: -999em; } - a:last-child::after { + a:last-child:after { content: attr(title); display: block; line-height: initial; @@ -1990,7 +2242,9 @@ background: #eee; padding-left: $spacing-val-sm; - ul { margin: 0; } + ul { + margin: 0; + } li { margin: $spacing-val-sm 0; @@ -2011,11 +2265,13 @@ */ .bp-user { + #buddypress { #settings-form { // 'p' = email notification screen sub heading > p { + @include font-size(20); margin: $spacing-val-md 0 $spacing-val-sm; } @@ -2022,7 +2278,11 @@ } table.notification-settings { - th.title {width: 75%;} + + th.title { + width: 75%; + } + td.yes, td.no { vertical-align: middle; @@ -2038,6 +2298,7 @@ } @media screen and (min-width: 46.25em) { + th.field-group-name, td.field-name { width: 70%; @@ -2050,7 +2311,10 @@ } td.field-visibility { - select {width: 100%;} + + select { + width: 100%; + } } } @@ -2070,7 +2334,9 @@ // are not inherited or being overriden. div.activity-comments { + form { + .ac-textarea { background: $light-background; border: 1px solid rgba($border-color, 0.3); @@ -2083,10 +2349,13 @@ } } - select {border: 1px solid rgba($border-color, 0.5);} + select { + border: 1px solid rgba($border-color, 0.5); + } // Overrides for embedded WP editors. .wp-editor-wrap { + a.button, button, input[type=submit], @@ -2105,12 +2374,13 @@ .standard-form, .group-create-form { + li { float: none; list-style: none; } - input[type='text'], + input[type="text"], textarea { width: 100%; } @@ -2134,25 +2404,26 @@ width: 80%; } - input[type='text'] { + input[type="text"] { float: left; margin: 0; width: 80%; } - input[type='text'], - input[type='submit'] { + input[type="text"], + input[type="submit"] { + @include font-size(14); border: 0; line-height: inherit; } - input[type='text'] { + input[type="text"] { border-right: 1px solid rgba($border-color, 0.4); padding: 0.2em 0 0.2em 0.2em; } - input[type='submit'] { + input[type="submit"] { float: right; font-weight: normal; padding: 0.2em 1em; @@ -2166,6 +2437,7 @@ // Shift the search parent to the right and allow to shrinkwrap @media screen and (min-width: 38.75em) { + div.dir-search, div.message-search, li.groups-members-search { @@ -2173,9 +2445,10 @@ margin-bottom: 5px !important; form { + label, - input[type='text'], - input[type='submit'] { + input[type="text"], + input[type="submit"] { width: auto; } } @@ -2186,9 +2459,18 @@ .dir-search, .message-search { + form { - input[type='text'] { @include font-size(16) ;} - input[type='submit'] { @include font-size(16) ;} + + input[type="text"] { + + @include font-size(16); + } + + input[type="submit"] { + + @include font-size(16); + } } } } @@ -2206,7 +2488,9 @@ // a more general typography section to manage BP elements grouped under // breakpoints. Provide top/bottom margins for tables, lacking in BP styles #buddypress { + table { + @include font-size(14); margin: $spacing-val-md 0; @@ -2217,11 +2501,17 @@ } // Reduce the themes inherited paragraph margins in tables - p {margin-bottom: 0.5em;} + p { + margin-bottom: 0.5em; + } } @media screen and (min-width: 55em) { - table {@include font-size(16);} + + table { + + @include font-size(16); + } } } @@ -2232,6 +2522,7 @@ // Manage some table cells widths that are disproportionate to their content .notifications, .messages-notices { + th { width: 30%; @@ -2260,6 +2551,7 @@ // Notices action buttons, this maybe better moved, temp for now to address // styling issues - this will need styling ideas td { + .button { border: 0; display: block; @@ -2282,7 +2574,9 @@ // to background color darker by 50% #buddypress { + #item-body { + div#message { margin-top: $spacing-val-md; @@ -2293,19 +2587,25 @@ } div#message { + p { + @include font-size(18); font-weight: bold; } &.info { + p { + @include message-box($notice-info); } } &.updated { + p { + @include message-box($notice-update); } } @@ -2317,10 +2617,13 @@ // Without direct classes on our mesages ( 'warning' ) // we need to use the body classes .delete-group { + #buddypress { + div#message.info { p { + @include message-box($notice-warning); } } Index: src/bp-templates/bp-legacy/css/twentyfourteen-rtl.css =================================================================== --- src/bp-templates/bp-legacy/css/twentyfourteen-rtl.css (revision 10712) +++ src/bp-templates/bp-legacy/css/twentyfourteen-rtl.css (working copy) @@ -1,4 +1,6 @@ @charset "UTF-8"; +/* stylelint-disable declaration-colon-space-after */ +/* stylelint-enable */ /*------------------------------------------------------------------------------ This is the BuddyPress companion stylesheet for @@ -1118,7 +1120,7 @@ width: 100%; } -#buddypress table#message-threads tr td.thread-info a::after { +#buddypress table#message-threads tr td.thread-info a:after { content: " – " attr(title); font-size: 12px; font-size: 0.75rem; @@ -1272,7 +1274,7 @@ text-indent: -999em; } -#buddypress #message-threads.sitewide-notices td:last-child a:last-child::after { +#buddypress #message-threads.sitewide-notices td:last-child a:last-child:after { content: attr(title); display: block; line-height: initial; @@ -1388,20 +1390,20 @@ width: 80%; } -#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'] { +#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"] { float: right; margin: 0; width: 80%; } -#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'] { +#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"] { border: 0; font-size: 14px; font-size: 0.875rem; @@ -1408,16 +1410,16 @@ line-height: inherit; } -#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'] { +#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"] { border-left: 1px solid #ccc; padding: 0.2em 0.2em 0.2em 0; } -#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'] { +#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"] { float: left; font-weight: normal; padding: 0.2em 1em; @@ -1433,11 +1435,11 @@ float: left; } #buddypress div.dir-search form label, - #buddypress div.dir-search form input[type='submit'], - #buddypress div.dir-search form input[type='text'], + #buddypress div.dir-search form input[type="submit"], + #buddypress div.dir-search form input[type="text"], #buddypress div.message-search form label, - #buddypress div.message-search form input[type='submit'], - #buddypress div.message-search form input[type='text'] { + #buddypress div.message-search form input[type="submit"], + #buddypress div.message-search form input[type="text"] { width: auto; } #buddypress div.message-search { @@ -1444,8 +1446,8 @@ margin: 3px 0 0; } #buddypress li.groups-members-search form label, - #buddypress li.groups-members-search form input[type='submit'], - #buddypress li.groups-members-search form input[type='text'] { + #buddypress li.groups-members-search form input[type="submit"], + #buddypress li.groups-members-search form input[type="text"] { width: auto; } } Index: src/bp-templates/bp-legacy/css/twentyfourteen.css =================================================================== --- src/bp-templates/bp-legacy/css/twentyfourteen.css (revision 10712) +++ src/bp-templates/bp-legacy/css/twentyfourteen.css (working copy) @@ -1,4 +1,6 @@ @charset "UTF-8"; +/* stylelint-disable declaration-colon-space-after */ +/* stylelint-enable */ /*------------------------------------------------------------------------------ This is the BuddyPress companion stylesheet for @@ -1118,7 +1120,7 @@ width: 100%; } -#buddypress table#message-threads tr td.thread-info a::after { +#buddypress table#message-threads tr td.thread-info a:after { content: " – " attr(title); font-size: 12px; font-size: 0.75rem; @@ -1272,7 +1274,7 @@ text-indent: -999em; } -#buddypress #message-threads.sitewide-notices td:last-child a:last-child::after { +#buddypress #message-threads.sitewide-notices td:last-child a:last-child:after { content: attr(title); display: block; line-height: initial; @@ -1388,20 +1390,20 @@ width: 80%; } -#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'] { +#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"] { float: left; margin: 0; width: 80%; } -#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'] { +#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"] { border: 0; font-size: 14px; font-size: 0.875rem; @@ -1408,16 +1410,16 @@ line-height: inherit; } -#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'] { +#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"] { border-right: 1px solid #ccc; padding: 0.2em 0 0.2em 0.2em; } -#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'] { +#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"] { float: right; font-weight: normal; padding: 0.2em 1em; @@ -1433,11 +1435,11 @@ float: right; } #buddypress div.dir-search form label, - #buddypress div.dir-search form input[type='submit'], - #buddypress div.dir-search form input[type='text'], + #buddypress div.dir-search form input[type="submit"], + #buddypress div.dir-search form input[type="text"], #buddypress div.message-search form label, - #buddypress div.message-search form input[type='submit'], - #buddypress div.message-search form input[type='text'] { + #buddypress div.message-search form input[type="submit"], + #buddypress div.message-search form input[type="text"] { width: auto; } #buddypress div.message-search { @@ -1444,8 +1446,8 @@ margin: 3px 0 0; } #buddypress li.groups-members-search form label, - #buddypress li.groups-members-search form input[type='submit'], - #buddypress li.groups-members-search form input[type='text'] { + #buddypress li.groups-members-search form input[type="submit"], + #buddypress li.groups-members-search form input[type="text"] { width: auto; } } Index: src/bp-templates/bp-legacy/css/twentyfourteen.scss =================================================================== --- src/bp-templates/bp-legacy/css/twentyfourteen.scss (revision 10712) +++ src/bp-templates/bp-legacy/css/twentyfourteen.scss (working copy) @@ -107,7 +107,9 @@ @if $text-color { // if a param was passed through $text-color: $text-color; - } @else { + } + + @else { $text-color: darken($background, 50%); } @@ -123,6 +125,7 @@ } // Variabals: color definitions +/* stylelint-disable declaration-colon-space-after */ $content-background: #fff; $dark-back-text-color: #fff; $light-background: #f7f7f7; @@ -140,6 +143,7 @@ $stripe-even: #dbe5ff; $unread: #cddaff; $link-action: #c82b2b; +/* stylelint-enable */ // 2014 font family @mixin default-font() { @@ -213,6 +217,7 @@ // for all heading h# elements this is problematic where floats are concerned // We reset this here under our #buddypress namespace #buddypress { + h1, h2, h3, @@ -268,7 +273,9 @@ *---------------------------------------------------------- */ #buddypress { + .item-list-tabs { + ul { li { @@ -276,6 +283,7 @@ } @media screen and (min-width: 400px) { + li { width: 50%; } @@ -282,6 +290,7 @@ } @media screen and (min-width: 594px) { + li { width: auto; } @@ -291,6 +300,7 @@ } .directory #buddypress { + .item-list-tabs { ul:before, @@ -309,6 +319,7 @@ } @media screen and (min-width: 783px) { + ul { padding-bottom: 0; @@ -315,6 +326,7 @@ li.selected { border: 1px solid $border-med; border-bottom-color: $content-background; + @include border-top-radius(4px); margin-bottom: -1px; @@ -328,6 +340,7 @@ } // close .item-list-tabs #subnav { + ul { border-bottom: 0; } @@ -337,7 +350,9 @@ /* List last filters global */ #buddypress { + #subnav { + li#activity-filter-select.last { line-height: 2.1; margin-top: 0; @@ -351,7 +366,9 @@ @media screen and (max-width: 783px) { #buddypress { + #object-nav { + ul { border-bottom: 1px solid $border-med; overflow: hidden; @@ -363,6 +380,7 @@ margin-bottom: $spacing-val-lg; ul { + li { width: auto; } @@ -385,6 +403,7 @@ .bp-user, .single-item.groups { + #buddypress { background: lighten($nav-background-border, 10%); } @@ -397,7 +416,9 @@ background: #fff; } - #item-body {border-left: 1px solid $nav-background-border;} + #item-body { + border-left: 1px solid $nav-background-border; + } #object-nav { background: lighten($nav-background-border, 10%); @@ -477,7 +498,9 @@ */ #buddypress { + div.pagination { + .pag-count { margin-left: 0; } @@ -490,11 +513,14 @@ *------------------------------------------------------------------------------- */ #buddypress { + .item-list { + .item-title { a { display: block; + @include font-size(22); text-decoration: none; } @@ -501,6 +527,7 @@ span.update, span a { + @include font-size(12); } } @@ -512,7 +539,9 @@ // - Adjusts display of action buttons at small screen #buddypress { + ul.item-list { + li { overflow: hidden !important; // buddypress styles over specified @@ -522,6 +551,7 @@ text-align: center; a { + img.avatar { float: none; } @@ -532,7 +562,9 @@ float: none; width: 100%; - > a {text-align: center;} + > a { + text-align: center; + } } .item { @@ -572,12 +604,15 @@ } @media screen and (min-width: 594px) { + .item-avatar { float: left; margin-bottom: 0; } - div.item-title > a {text-align: left;} + div.item-title > a { + text-align: left; + } .item { float: right; @@ -598,6 +633,7 @@ } // close @media @media screen and (min-width: 783px) { + .item { float: left; width: 55%; @@ -618,6 +654,7 @@ display: block; a { + @include box-model(border-box); display: block; width: 100%; @@ -652,6 +689,7 @@ *------------------------------------------------- */ #buddypress { + form#whats-new-form { margin: $spacing-val-lg 0; @@ -675,7 +713,9 @@ } #whats-new-content { + @media screen and (max-width: 594px) { + #whats-new-options { display: flex; flex-direction: column; @@ -703,6 +743,7 @@ } // close whats-new-content.active @media screen and (min-width: 594px) { + #whats-new-avatar { float: left; } @@ -725,10 +766,15 @@ */ #buddypress { - #activity-stream {margin-top: $spacing-val-lg;} + + #activity-stream { + margin-top: $spacing-val-lg; + } + .activity-list { li.activity-item:not(.mini) { + .activity-avatar { float: none; margin-bottom: $spacing-val-sm; @@ -742,7 +788,9 @@ } li.mini { + .activity-avatar { + img.avatar { margin-left: 0; } @@ -749,7 +797,11 @@ } .activity-meta { - a {@include font-size(12);} + + a { + + @include font-size(12); + } } } @@ -771,11 +823,15 @@ } } - .activity-inner {margin: $spacing-val-sm 0;} + .activity-inner { + margin: $spacing-val-sm 0; + } } @media screen and (min-width: 594px) { + li.activity-item:not(.mini) { + .activity-avatar { float: left; margin: 0 $spacing-val-md 0 0; @@ -788,6 +844,7 @@ } li.mini { + .activity-avatar { margin: 0 $spacing-val-sm 0 5%; } @@ -804,13 +861,17 @@ // Activity Single Item 'Permalink' Page body.activity-permalink { + #buddypress { // remove user account faux column background background: transparent; .activity-list { + li { + @media screen and (max-width: 760px) { + .activity-content, .activity-comments { margin-left: 0; @@ -828,7 +889,9 @@ */ #buddypress { + .activity { + .activity-comments { margin-left: 0; margin-top: 5px; @@ -850,12 +913,16 @@ // Display the user avatar stacked up to 594px // reduce/widen the content margins @media screen and (max-width: 400px) { + .acomment-avatar { display: block; text-align: center; a, - img.avatar {display: inline; float: none;} + img.avatar { + display: inline; + float: none; + } } .acomment-content, @@ -864,7 +931,9 @@ margin: $spacing-val-xs; } - .acomment-content {padding: 0 $spacing-val-sm;} + .acomment-content { + padding: 0 $spacing-val-sm; + } } // close @media .ac-form { @@ -874,6 +943,7 @@ color: rgba($body-text, 0.8); display: inline-block; font-family: inherit; + @include font-size(12); font-weight: normal; line-height: 1.2; @@ -907,7 +977,6 @@ */ - /* *------------------------------------------------------------------------------- * @section 6.0 - Single Item screens @@ -918,6 +987,7 @@ .bp-user { .entry-title { + @include title-background-dark(); @include font-size(22); margin-bottom: $spacing-val-sm; @@ -925,7 +995,9 @@ } @media screen and (min-width: 673px) { + .entry-title { + @include font-size(28); } } @@ -938,6 +1010,7 @@ */ // override BP margins - users/groups manage their own styles later on #buddypress { + div#item-header { padding-bottom: $spacing-val-sm; @@ -951,7 +1024,9 @@ margin-bottom: $spacing-val-xs; padding-top: $spacing-val-sm; - p {margin-bottom: 0;} + p { + margin-bottom: 0; + } } } } @@ -962,9 +1037,11 @@ *------------------------------------------------- */ .single-item.groups { + #buddypress { @media screen and (max-width: 594px) { + div#item-header { display: flex; flex-direction: column; @@ -983,7 +1060,9 @@ } } - #item-header-content {order: 2;} + #item-header-content { + order: 2; + } #item-actions { margin-left: 0; @@ -1014,6 +1093,7 @@ width: auto; h3 { + @include font-size(20); } } @@ -1028,6 +1108,7 @@ } @media screen and (min-width: 594px) { + #item-actions { float: right; } @@ -1053,6 +1134,7 @@ */ .bp-user #buddypress { + #item-header { #item-header-avatar { @@ -1069,7 +1151,9 @@ } @media screen and (max-width: 594px) { + #item-buttons { + div.generic-button { display: inline-block; float: none; @@ -1077,6 +1161,7 @@ width: 100%; a { + @include box-model(); display: block; width: 100%; @@ -1086,6 +1171,7 @@ } @media screen and (min-width: 673px) { + #item-header-avatar { float: left; overflow: hidden; @@ -1131,7 +1217,9 @@ #create-group-form { .radio { + strong { + @include font-size(18); } @@ -1140,14 +1228,19 @@ } } - #group-creation-previous {margin: $spacing-val-sm 0;} + #group-creation-previous { + margin: $spacing-val-sm 0; + } } /* Manage Members */ .groups.manage-members { + #group-settings-form { - h4 {margin-top: $spacing-val-lg;} + h4 { + margin-top: $spacing-val-lg; + } .item-list { background: $light-background; @@ -1156,13 +1249,19 @@ li { border-bottom: 1px solid $border-light; - &:last-child {border-bottom: 0;} + &:last-child { + border-bottom: 0; + } + img, h5 { clear: none; float: left; - > a {border-bottom: 0;} + + > a { + border-bottom: 0; + } } span.small { @@ -1198,8 +1297,11 @@ */ #buddypress { + #members-group-list { + .item-list { + h5 { display: inline-block; margin: 0; @@ -1213,8 +1315,11 @@ } // close #buddypress #buddypress { + #item-body { + #subnav { + li.groups-members-search:focus, li.groups-members-search:hover, li.last:focus, @@ -1227,6 +1332,7 @@ // Need to target groups members via body classes .groups.group-members { + #subnav { ul:before, @@ -1235,7 +1341,9 @@ display: table; } - ul:after {clear: both; } + ul:after { + clear: both; + } ul { padding: $spacing-val-xs 0; @@ -1251,6 +1359,7 @@ } #search-members-form { + @include box-model(border-box); float: left; @@ -1259,7 +1368,10 @@ width: 100%; label { - input[type="text"] {width: 100%;} + + input[type="text"] { + width: 100%; + } } } @@ -1280,13 +1392,17 @@ */ .send-invites { + #buddypress { + #item-body { + @media screen and (min-width: 783px) { border-top: 1px solid $nav-background-border; } @media screen and (max-width: 400px) { + .left-menu { float: none; @@ -1302,6 +1418,7 @@ } li { + img.avatar { display: block; float: none; @@ -1320,10 +1437,17 @@ } @media screen and (min-width: 594px) { - #invite-list {width: 160px;} - .main-column {margin-left: 190px;} + #invite-list { + width: 160px; + } + + .main-column { + margin-left: 190px; + } + li { + img.avatar { float: left; margin: 0 $spacing-val-sm 0 0; @@ -1350,9 +1474,11 @@ #buddypress { + .profile { .bp-widget { + h4 { background: $medium-background; color: #fff; @@ -1363,6 +1489,7 @@ // Edit profile #profile-edit-form { + .button-nav:before, .button-nav:after { content: " "; @@ -1391,12 +1518,14 @@ a { background: none; border: 0; - @include font-size(18) + + @include font-size(18); } } //.button-nav .field-visibility-settings-toggle, .field-visibility-settings { + @include font-size(14); } @@ -1436,6 +1565,7 @@ td { background: $content-background; border-right: 0 !important; + @include box-model(border-box); display: inline-block; float: left; @@ -1468,6 +1598,7 @@ td.thread-from, td.thread-options { border-left: 0; + @include calc(width, "100% - 30px"); margin-left: 0; } @@ -1477,8 +1608,9 @@ padding-left: 41px; width: 100%; - a::after { + a:after { content: " \2013 \00a0"attr(title); + @include font-size(12); } } @@ -1487,6 +1619,7 @@ text-align: right; a { + @include font-size(12); line-height: 2.2; } @@ -1503,6 +1636,7 @@ @media screen and (max-width: 320px) { clear: both; + @include font-size(11); width: 100%; } @@ -1510,6 +1644,7 @@ } tr.unread { + td { background: lighten($unread, 7%); border-color: $border-med; @@ -1540,11 +1675,13 @@ #message-thread { #message-subject { + @include title-background-dark(); padding: 0.5em; } .message-box { + .message-metadata { margin-bottom: $spacing-val-sm; } @@ -1560,7 +1697,9 @@ list-style: none; margin: 0; - li {margin-left: 0;} + li { + margin-left: 0; + } li.friend-tab { background: lighten($notice-info, 20%); @@ -1595,10 +1734,12 @@ } #message-threads.sitewide-notices { + td { width: 100%; strong { + @include title-background-dark(); @include font-size(16); display: block; @@ -1638,7 +1779,7 @@ text-indent: -999em; } - a:last-child::after { + a:last-child:after { content: attr(title); display: block; line-height: initial; @@ -1656,7 +1797,9 @@ background: #eee; padding-left: $spacing-val-sm; - ul { margin: 0; } + ul { + margin: 0; + } li { margin: $spacing-val-sm 0; @@ -1677,12 +1820,17 @@ */ #buddypress { + #settings-form { // 'p' = email notification screen sub heading - > p { @include font-size(20); } + > p { + + @include font-size(20); + } } table.notification-settings { + td.yes, td.no { vertical-align: middle; @@ -1698,6 +1846,7 @@ } @media screen and (min-width: 401px) { + th.field-group-name, td.field-name { width: 70%; @@ -1705,7 +1854,10 @@ } td.field-visibility { - select {width: 100%;} + + select { + width: 100%; + } } } } // close #buddypress - user acounts item-body @@ -1729,6 +1881,7 @@ } .standard-form { + input[type="text"], input[type="email"], input[type="password"], @@ -1739,10 +1892,14 @@ } // BP :( - #send-reply.standard-form textarea {width: 100%;} + #send-reply.standard-form textarea { + width: 100%; + } div.activity-comments { + form { + .ac-textarea { background: $light-background; border: 1px solid $border-med; @@ -1777,25 +1934,26 @@ width: 80%; } - input[type='text'] { + input[type="text"] { float: left; margin: 0; width: 80%; } - input[type='text'], - input[type='submit'] { + input[type="text"], + input[type="submit"] { border: 0; + @include font-size(14); line-height: inherit; } - input[type='text'] { + input[type="text"] { border-right: 1px solid #ccc; padding: 0.2em 0 0.2em 0.2em; } - input[type='submit'] { + input[type="submit"] { float: right; font-weight: normal; padding: 0.2em 1em; @@ -1810,6 +1968,7 @@ // Shift the search parent to the right and allow to shrinkwrap @media screen and (min-width: 401px) { + div.dir-search, div.message-search { clear: none; @@ -1816,21 +1975,26 @@ float: right; form { + label, - input[type='submit'], - input[type='text'] { + input[type="submit"], + input[type="text"] { width: auto; } } } - div.message-search { margin: 3px 0 0;} + div.message-search { + margin: 3px 0 0; + } li.groups-members-search { + form { + label, - input[type='submit'], - input[type='text'] { + input[type="submit"], + input[type="text"] { width: auto; } } @@ -1846,6 +2010,7 @@ *------------------------------------------------------------------------------- */ #buddypress { + table { border-color: $border-med; } @@ -1863,19 +2028,25 @@ #buddypress { div#message { + p { + @include font-size(18); font-weight: bold; } &.info { + p { + @include message-box($notice-info); } } &.updated { + p { + @include message-box($notice-update); } } @@ -1888,9 +2059,13 @@ // we need to use the body classes // todo: If this is class .warning is included in main BP styles remove from here .delete-group { + #buddypress { + div#message.info { + p { + @include message-box($notice-warning); } } Index: src/bp-templates/bp-legacy/css/twentysixteen-rtl.css =================================================================== --- src/bp-templates/bp-legacy/css/twentysixteen-rtl.css (revision 10712) +++ src/bp-templates/bp-legacy/css/twentysixteen-rtl.css (working copy) @@ -1,4 +1,6 @@ @charset "UTF-8"; +/* stylelint-disable declaration-colon-space-after */ +/* stylelint-enable */ /*-------------------------------------------------------------- This is the BuddyPress companion stylesheet for @@ -884,7 +886,7 @@ .bp-user #buddypress #item-header .generic-button, .single-item.groups #buddypress #item-header .generic-button { float: none; - margin: 1.5em 0 0 0; + margin: 1.5em 0 0; } } @@ -1457,7 +1459,7 @@ width: 100%; } -.bp-user #buddypress #message-threads tr td.thread-info a::after { +.bp-user #buddypress #message-threads tr td.thread-info a:after { content: " ‖ " attr(title); font-size: 12px; font-size: 0.75rem; @@ -1594,7 +1596,7 @@ text-indent: -999em; } -.bp-user #buddypress #message-threads.sitewide-notices td:last-child a:last-child::after { +.bp-user #buddypress #message-threads.sitewide-notices td:last-child a:last-child:after { content: attr(title); display: block; line-height: initial; @@ -1668,9 +1670,9 @@ float: none; } -#main #buddypress .standard-form input[type='text'], -#main #buddypress .standard-form input[type='email'], -#main #buddypress .standard-form input[type='password'], +#main #buddypress .standard-form input[type="text"], +#main #buddypress .standard-form input[type="email"], +#main #buddypress .standard-form input[type="password"], #main #buddypress .standard-form textarea { width: 100%; } @@ -1724,20 +1726,20 @@ width: 70%; } -#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'] { +#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"] { float: right; margin: 0; width: 100%; } -#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'] { +#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"] { font-size: 14px; font-size: 0.875rem; border: 0; @@ -1744,16 +1746,16 @@ line-height: inherit; } -#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'] { +#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"] { border-left: 1px solid rgba(212, 208, 186, 0.6); padding: 0.2em 0.2em 0.2em 0; } -#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'] { +#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"] { float: left; font-weight: normal; padding: 0.2em 1em; @@ -1770,26 +1772,26 @@ margin-bottom: 5px !important; } #buddypress div.dir-search form label, - #buddypress div.dir-search form input[type='text'], - #buddypress div.dir-search form input[type='submit'], + #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 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'] { + #buddypress li.groups-members-search form input[type="text"], + #buddypress li.groups-members-search form input[type="submit"] { width: auto; } } @media screen and (min-width: 75em) { - #buddypress .dir-search form input[type='text'], - #buddypress .message-search form input[type='text'] { + #buddypress .dir-search form input[type="text"], + #buddypress .message-search form input[type="text"] { font-size: 16px; font-size: 1rem; } - #buddypress .dir-search form input[type='submit'], - #buddypress .message-search form input[type='submit'] { + #buddypress .dir-search form input[type="submit"], + #buddypress .message-search form input[type="submit"] { font-size: 16px; font-size: 1rem; } Index: src/bp-templates/bp-legacy/css/twentysixteen.css =================================================================== --- src/bp-templates/bp-legacy/css/twentysixteen.css (revision 10712) +++ src/bp-templates/bp-legacy/css/twentysixteen.css (working copy) @@ -1,4 +1,6 @@ @charset "UTF-8"; +/* stylelint-disable declaration-colon-space-after */ +/* stylelint-enable */ /*-------------------------------------------------------------- This is the BuddyPress companion stylesheet for @@ -884,7 +886,7 @@ .bp-user #buddypress #item-header .generic-button, .single-item.groups #buddypress #item-header .generic-button { float: none; - margin: 1.5em 0 0 0; + margin: 1.5em 0 0; } } @@ -1457,7 +1459,7 @@ width: 100%; } -.bp-user #buddypress #message-threads tr td.thread-info a::after { +.bp-user #buddypress #message-threads tr td.thread-info a:after { content: " ‖ " attr(title); font-size: 12px; font-size: 0.75rem; @@ -1594,7 +1596,7 @@ text-indent: -999em; } -.bp-user #buddypress #message-threads.sitewide-notices td:last-child a:last-child::after { +.bp-user #buddypress #message-threads.sitewide-notices td:last-child a:last-child:after { content: attr(title); display: block; line-height: initial; @@ -1668,9 +1670,9 @@ float: none; } -#main #buddypress .standard-form input[type='text'], -#main #buddypress .standard-form input[type='email'], -#main #buddypress .standard-form input[type='password'], +#main #buddypress .standard-form input[type="text"], +#main #buddypress .standard-form input[type="email"], +#main #buddypress .standard-form input[type="password"], #main #buddypress .standard-form textarea { width: 100%; } @@ -1724,20 +1726,20 @@ width: 70%; } -#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'] { +#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"] { float: left; margin: 0; width: 100%; } -#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'] { +#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"] { font-size: 14px; font-size: 0.875rem; border: 0; @@ -1744,16 +1746,16 @@ line-height: inherit; } -#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'] { +#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"] { border-right: 1px solid rgba(212, 208, 186, 0.6); padding: 0.2em 0 0.2em 0.2em; } -#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'] { +#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"] { float: right; font-weight: normal; padding: 0.2em 1em; @@ -1770,26 +1772,26 @@ margin-bottom: 5px !important; } #buddypress div.dir-search form label, - #buddypress div.dir-search form input[type='text'], - #buddypress div.dir-search form input[type='submit'], + #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 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'] { + #buddypress li.groups-members-search form input[type="text"], + #buddypress li.groups-members-search form input[type="submit"] { width: auto; } } @media screen and (min-width: 75em) { - #buddypress .dir-search form input[type='text'], - #buddypress .message-search form input[type='text'] { + #buddypress .dir-search form input[type="text"], + #buddypress .message-search form input[type="text"] { font-size: 16px; font-size: 1rem; } - #buddypress .dir-search form input[type='submit'], - #buddypress .message-search form input[type='submit'] { + #buddypress .dir-search form input[type="submit"], + #buddypress .message-search form input[type="submit"] { font-size: 16px; font-size: 1rem; } Index: src/bp-templates/bp-legacy/css/twentysixteen.scss =================================================================== --- src/bp-templates/bp-legacy/css/twentysixteen.scss (revision 10712) +++ src/bp-templates/bp-legacy/css/twentysixteen.scss (working copy) @@ -36,19 +36,25 @@ // @mixin small-up { + @media screen and (min-width: 44.375em) { + @content; } } @mixin medium-up { + @media screen and (min-width: 61.5625em) { + @content; } } @mixin large-up { + @media screen and (min-width: 75em) { + @content; } } @@ -139,7 +145,9 @@ @if $text-color { // if a param was passed through $text-color: $text-color; - } @else { + } + + @else { $text-color: darken($background, 50%); } @@ -154,15 +162,16 @@ } // Variables: color definitions -$body-text: #141412; +/* stylelint-disable declaration-colon-space-after */ +$body-text: #141412; $content-background: #fff; -$off-white: lighten(#f9f8ee, 0.7); -$cream-background: #f7f5e7; -$light-background: #f7f7f7; -$medium-background: #ccc; -$dark-background: #555; -$border-color: #d4d0ba; // border color is varied using rgba -$border-light: #eaeaea; // BP dividers +$off-white: lighten(#f9f8ee, 0.7); +$cream-background: #f7f5e7; +$light-background: #f7f7f7; +$medium-background: #ccc; +$dark-background: #555; +$border-color: #d4d0ba; // border color is varied using rgba +$border-light: #eaeaea; // BP dividers $border-med: #ddd; $background-hover: #db572f; // 2016 link background hover $bp-button-hover: #ededed; // this is the default BP button hover background @@ -174,6 +183,7 @@ $stripe-even: #dbe5ff; $unread: #dce5ff; $link-action: #c82b2b; +/* stylelint-enable */ /*-------------------------------------------------------------- This is the BuddyPress companion stylesheet for @@ -236,10 +246,11 @@ */ - .buddypress { // Remove any empty clearing elements, CSS provides clearing. - div.clear {display: none;} + div.clear { + display: none; + } // Ensure no text decoration or box shadow causing underlined effect. #page a { @@ -259,6 +270,7 @@ // but margins & padding still in effect for sidebar style.css L:2781. @include small-up { + #primary { float: none; margin: 0; @@ -284,6 +296,7 @@ } @include medium-up { + #primary { float: left; margin-right: -100%; @@ -327,7 +340,6 @@ */ - /** *---------------------------------------------------------- * @section 2.1 - Navs Object Nav / Sub Nav (item-list-tabs) @@ -343,8 +355,11 @@ // active/current states all navs div.item-list-tabs { + ul { + li.selected { + a { background: inherit; opacity: 1; @@ -354,6 +369,7 @@ } // global nav styles div.item-list-tabs { + ul { background-color: $cream-background; border-bottom: 1px solid rgba($border-light, 0.9); @@ -362,8 +378,12 @@ padding: 0; li { + a { - span {border-radius: 25%;} + + span { + border-radius: 25%; + } } } } @@ -401,8 +421,11 @@ &:hover, &:focus { - &:before {content: "Menu \021E7";} + &:before { + content: "Menu \021E7"; + } + ul { height: 320px; opacity: 1; @@ -433,6 +456,7 @@ } @media screen and (max-width: 38.75em) { + li:not(:last-child) { border-bottom: 1px solid $border-light; } @@ -439,9 +463,13 @@ } li:not(.selected) { - a {opacity: 0.7;} + a { + opacity: 0.7; + } + @media screen and (max-width: 38.75em) { + &:focus, &:hover { background: darken($cream-background, 2%); @@ -450,6 +478,7 @@ } @media screen and (min-width: 38.75em) { + li { float: left; } @@ -482,6 +511,7 @@ select, label, option { + @include font-size(14); } @@ -491,6 +521,7 @@ } @media screen and (min-width: 38.75em) { + li.last { text-align: right; } @@ -511,6 +542,7 @@ @media screen and (min-width: 55em) { body.no-sidebar { + #buddypress { #item-header, @@ -552,7 +584,9 @@ #subnav { margin: 0 0 0 (-$spacing-val-md); - ul {margin-top: 0;} + ul { + margin-top: 0; + } } } @@ -565,7 +599,9 @@ // Primarilly used for group create screens & ? directory nav. @media screen and (min-width: 46.25em) { + #main { + #buddypress { #group-create-tabs.item-list-tabs { @@ -596,6 +632,7 @@ li.current { border: 1px solid $border-med; border-bottom-color: $content-background; + @include border-top-radius(4px); margin-bottom: -1px; @@ -610,6 +647,7 @@ } // close .item-list-tabs #subnav { + ul { border-bottom: 0; } @@ -637,7 +675,10 @@ width: 0; } - .pag-count {margin-left: 0;} + .pag-count { + margin-left: 0; + } + .pagination-links { margin-right: 0; @@ -654,7 +695,10 @@ color: inherit; overflow: visible; width: auto; - &:before {display: none;} + + &:before { + display: none; + } } .prev { @@ -678,9 +722,12 @@ // Adjusts Meta items and various elements to match 2016 font-family #buddypress { + .item-list { + .activity-header, .activity-meta { + @include default-font-sans(); } } @@ -687,8 +734,11 @@ } #buddypress { + .activity-meta { + .button { + &:focus, &:hover { background: inherit; @@ -698,8 +748,11 @@ } .action { + .generic-button { + a { + &:focus, &:hover { background: inherit; @@ -719,7 +772,9 @@ // Adjusts Meta items to match 2016 font-family #buddypress { + ul.item-list { + li { overflow: hidden !important; @@ -733,7 +788,9 @@ text-align: center; - a {border-bottom: 0;} + a { + border-bottom: 0; + } img.avatar { display: inline-block; @@ -765,6 +822,7 @@ } .item-title { + @include font-size(18); line-height: 1.2; text-align: center; @@ -777,9 +835,11 @@ .update { display: block; + @include font-size(12); @include medium-up { + @include font-size(14); } @@ -791,6 +851,7 @@ } @include medium-up { + .item-avatar, .item, .action { @@ -804,10 +865,10 @@ width: 55%; .item-title { - @include font-size(22) + + @include font-size(22); } } - }// close medium-up div.action { @@ -880,6 +941,7 @@ */ #buddypress { + form#whats-new-form { // Line-height issue inherited from BP rules, override. @@ -890,6 +952,7 @@ // corrective measure for clipped elements due to JS inline styling @media screen and (max-width: 46.25em) { + #whats-new-content { clear: left; margin: $spacing-val-sm 0 $spacing-val-md; @@ -898,7 +961,9 @@ } #whats-new-content.active { + #whats-new-options[style] { + #whats-new-post-in-box { border: 1px solid rgba($border-color, 0.5); float: left; @@ -918,6 +983,7 @@ } @media screen and (min-width: 30em) { + #whats-new-post-in-box { width: auto; } @@ -934,6 +1000,7 @@ // User account form requires matching bp default specificity #item-body { + form#whats-new-form { margin: $spacing-val-lg 0; } @@ -977,6 +1044,7 @@ margin-left: 0; .activity-header { + @include font-size(14); } } @@ -987,7 +1055,10 @@ float: left; margin-right: $spacing-val-sm; text-align: left; - a {border-bottom: 0;} + + a { + border-bottom: 0; + } } .activity-content { @@ -995,6 +1066,7 @@ overflow: hidden; .activity-header { + @include font-size(16); } } @@ -1004,8 +1076,11 @@ } // close li li.mini { + .activity-avatar { + a { + img.avatar { height: 30px; margin-left: 15px; @@ -1015,7 +1090,9 @@ } .activity-content { + .activity-header { + @include font-size(14); } } @@ -1042,6 +1119,7 @@ } // close .activity-header .activity-meta { + a { display: block; margin-bottom: $spacing-val-xs; @@ -1064,7 +1142,10 @@ &:hover { background: darken($light-background, 1%); border: 1px solid rgba(#9fd1e2, 0.3); - a { font-style: italic; } + + a { + font-style: italic; + } } a { @@ -1078,7 +1159,9 @@ /* Single activity view - activity permalink */ .activity-permalink { + #buddypress { + #activity-stream { li.activity-item { @@ -1086,14 +1169,21 @@ } li.mini { + .activity-header { + @include font-size(16); + @media screen and (min-width: 46.25em) { + @include font-size(20); } margin-bottom: $spacing-val-lg; - p {padding: $spacing-val-md;} + + p { + padding: $spacing-val-md; + } } } } @@ -1108,6 +1198,7 @@ #buddypress { #activity-stream { + .activity-comments { border-left: 1px solid $border-light; margin-top: 5px; @@ -1124,6 +1215,7 @@ color: rgba($body-text, 0.8); display: inline-block; font-family: inherit; + @include font-size(12); font-weight: normal; line-height: 1.2; @@ -1156,10 +1248,13 @@ */ #buddypress { + #members-list { @include medium-up { + li { + .item-avatar, .item { float: left; @@ -1187,6 +1282,7 @@ */ #buddypress { + #signup_form.standard-form { #profile-details-section, @@ -1201,8 +1297,14 @@ } @media screen and (min-width: 38.75em) { - #profile-details-section {float: right;} - #basic-details-section {float: left;} + + #profile-details-section { + float: right; + } + + #basic-details-section { + float: left; + } } } @@ -1223,19 +1325,27 @@ .bp-user, .single-item.groups { + #buddypress { + #item-header-content { + #item-meta { + @include font-size(14); text-align: left; - p {margin-bottom: 0.5em;} + p { + margin-bottom: 0.5em; + } } } } @media screen and (max-width: 46.25em) { + main { + header.entry-header { padding-bottom: 1rem; } @@ -1243,6 +1353,7 @@ } @media screen and (max-width: 38.75em) { + h1, #item-header-content { text-align: center; @@ -1250,21 +1361,26 @@ } #buddypress { + @media screen and (max-width: 46.25em) { + #item-header { + .generic-button { float: none; - margin: 1.5em 0 0 0; + margin: 1.5em 0 0; } } } @media screen and (max-width: 38.75em) { + h1 { margin-bottom: 0; } #item-header-avatar { + img.avatar { margin-right: 0; } @@ -1286,9 +1402,13 @@ */ .single-item.groups { + #buddypress { + @media screen and (max-width: 46.25em) { + #item-header { + #item-meta { margin-bottom: $spacing-val-md; } @@ -1298,6 +1418,7 @@ // 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; @@ -1358,9 +1479,11 @@ h3 { //background: $dark-background; //color: $content-background; + @include font-size(14); @media screen and (min-width: 46.25em) { + @include font-size(16); } @@ -1404,7 +1527,9 @@ */ .bp-user { + #buddypress { + #item-header { padding: $spacing-val-md 0; @@ -1421,6 +1546,7 @@ } @media screen and (min-width: 46.25em) { + #item-header-avatar { float: left; width: 20%; @@ -1465,7 +1591,9 @@ // headings settings screens & general global settings styles .groups { + #group-settings-form { + h4 { background: $dark-background; color: $content-background; @@ -1475,6 +1603,7 @@ } .groups.edit-details { + #group-settings-form { label { @@ -1486,6 +1615,7 @@ textarea + p label { background: none; color: inherit; + @include font-size(14); width: auto; } @@ -1499,6 +1629,7 @@ } // close .groups.edit-details .groups.group-settings { + #group-settings-form { div.radio label { @@ -1507,6 +1638,7 @@ ul { color: rgba($body-text, 0.6); + @include font-size(14); } } @@ -1523,8 +1655,11 @@ } .groups.manage-members { + #group-settings-form { + .item-list { + li { border-bottom: 1px solid $border-light; @@ -1532,7 +1667,9 @@ h5 { float: left; - > a {border-bottom: 0;} + > a { + border-bottom: 0; + } } span.small { @@ -1569,8 +1706,11 @@ // Massage the members search for groups nav specifically. .groups.group-members { + #subnav { + li { + @media screen and (max-width: 38.75em) { background: $content-background; padding: $spacing-val-md 0; @@ -1586,7 +1726,10 @@ width: 100%; label { - input[type="text"] {width: 100%;} + + input[type="text"] { + width: 100%; + } } } @@ -1605,7 +1748,10 @@ */ .bp-user { - .entry-title {margin-bottom: 0.5em;} + + .entry-title { + margin-bottom: 0.5em; + } } /** @@ -1618,21 +1764,47 @@ #buddypress { table { - th {@include font-size(14)} - td {@include font-size(12)} + th { + + @include font-size(14); + } + + td { + + @include font-size(12); + } + @include medium-up { - th {@include font-size(16)} - td {@include font-size(14)} + + th { + + @include font-size(16); + } + + td { + + @include font-size(14); + } } @include large-up { - th {@include font-size(18)} - td {@include font-size(16)} + + th { + + @include font-size(18); + } + + td { + + @include font-size(16); + } } } - .pag-count {font-style: italic;} + .pag-count { + font-style: italic; + } .notifications-options-nav { border: 1px solid rgba($border-color, 0.5); @@ -1646,6 +1818,7 @@ select, input { border: 0; + @include font-size(14); outline: 0; padding: 0; @@ -1680,7 +1853,9 @@ #buddypress { .profile { + .bp-widget { + h4 { background: lighten($dark-background, 10%); color: #fff; @@ -1688,11 +1863,14 @@ padding: 0.4em; } - table {margin-top: 0;} + table { + margin-top: 0; + } } /* Edit profile */ #profile-edit-form { + .button-nav:before, .button-nav:after { content: " "; @@ -1721,12 +1899,14 @@ a { background: none; border: 0; - @include font-size(18) + + @include font-size(18); } } //.button-nav .field-visibility-settings-toggle, .field-visibility-settings { + @include font-size(14); } @@ -1739,8 +1919,12 @@ } // close profile form .bp-avatar { + #bp-delete-avatar { - a {font-size: inherit; } + + a { + font-size: inherit; + } } } } // close .profile @@ -1759,8 +1943,11 @@ #buddypress { #groups-list { + li { + .item { + @media screen and (min-width: 77.5em) { left: 5%; width: 50%; @@ -1811,6 +1998,7 @@ } @media screen and (min-width: 46.25em) { + img.avatar { float: left; } @@ -1831,6 +2019,7 @@ } #send-reply { + .message-content { background: $content-background; border: 0; @@ -1846,6 +2035,7 @@ #message-threads { thead { + tr { background: lighten($dark-background, 10%); } @@ -1852,6 +2042,7 @@ } tr { + td { background: $content-background; display: inline-block; @@ -1891,6 +2082,7 @@ td.thread-from, td.thread-options { border-left: 0 !important; + @include calc(width, "100% - 30px"); margin-left: 0; } @@ -1899,8 +2091,9 @@ padding-left: 41px; width: 100%; - a::after { + a:after { content: " \2016 \00a0"attr(title); + @include font-size(12); } } @@ -1909,6 +2102,7 @@ text-align: right; a { + @include font-size(12); line-height: 2.2; } @@ -1925,6 +2119,7 @@ @media screen and (max-width: 38.75em) { clear: both; + @include font-size(11); width: 100%; } @@ -1932,6 +2127,7 @@ } tr.unread { + td { background: $unread; border-color: $border-color; @@ -1959,7 +2155,9 @@ .acfb-holder { list-style: none; - li {margin-left: 0;} + li { + margin-left: 0; + } li.friend-tab { background: lighten($notice-info, 20%); @@ -2016,6 +2214,7 @@ } td:nth-child(2) { + strong { margin: -8px -8px 8px; } @@ -2043,7 +2242,7 @@ text-indent: -999em; } - a:last-child::after { + a:last-child:after { content: attr(title); display: block; line-height: initial; @@ -2059,7 +2258,9 @@ background: #eee; padding-left: $spacing-val-sm; - ul { margin: 0; } + ul { + margin: 0; + } li { margin: $spacing-val-sm 0; @@ -2086,6 +2287,7 @@ #settings-form { // 'p' = email notification screen sub heading > p { + @include font-size(20); margin: $spacing-val-md 0 $spacing-val-sm; } @@ -2092,6 +2294,7 @@ } table.notification-settings { + td.yes, td.no { vertical-align: middle; @@ -2107,6 +2310,7 @@ } @media screen and (min-width: 46.25em) { + th.field-group-name, td.field-name { width: 70%; @@ -2119,7 +2323,10 @@ } td.field-visibility { - select {width: 100%;} + + select { + width: 100%; + } } } @@ -2135,13 +2342,18 @@ // Attempt to reset form control widths #main { + #buddypress { + .standard-form { - li {float: none;} - input[type='text'], - input[type='email'], - input[type='password'], + li { + float: none; + } + + input[type="text"], + input[type="email"], + input[type="password"], textarea { width: 100%; } @@ -2157,6 +2369,7 @@ div.activity-comments { form { + .ac-textarea { background: $light-background; border: 1px solid rgba($border-color, 0.5); @@ -2185,10 +2398,13 @@ } // close .standard-form #signup_form.standard-form { + div.submit { float: none; - input {margin-right: 0;} + input { + margin-right: 0; + } } } @@ -2195,6 +2411,7 @@ } // close #buddypress #buddypress { + div.dir-search, div.message-search, li.groups-members-search { @@ -2213,25 +2430,26 @@ width: 70%; } - input[type='text'] { + input[type="text"] { float: left; margin: 0; width: 100%; } - input[type='text'], - input[type='submit'] { + input[type="text"], + input[type="submit"] { + @include font-size(14); border: 0; line-height: inherit; } - input[type='text'] { + input[type="text"] { border-right: 1px solid rgba($border-color, 0.6); padding: 0.2em 0 0.2em 0.2em; } - input[type='submit'] { + input[type="submit"] { float: right; font-weight: normal; padding: 0.2em 1em; @@ -2246,6 +2464,7 @@ // Shift the search parent to the right and allow to shrinkwrap @media screen and (min-width: 38.75em) { + div.dir-search, div.message-search, li.groups-members-search { @@ -2253,9 +2472,10 @@ margin-bottom: 5px !important; form { + label, - input[type='text'], - input[type='submit'] { + input[type="text"], + input[type="submit"] { width: auto; } } @@ -2268,9 +2488,18 @@ .dir-search, .message-search { + form { - input[type='text'] { @include font-size(16) ;} - input[type='submit'] { @include font-size(16) ;} + + input[type="text"] { + + @include font-size(16); + } + + input[type="submit"] { + + @include font-size(16); + } } } } @@ -2288,7 +2517,9 @@ // a more general typography section to manage BP elements grouped under // breakpoints. Provide top/bottom margins for tables, lacking in BP styles #buddypress { + table { + @include font-size(14); margin: $spacing-val-md 0; @@ -2299,11 +2530,17 @@ } // Reduce the themes inherited paragraph margins in tables - p {margin-bottom: 0.5em;} + p { + margin-bottom: 0.5em; + } } @media screen and (min-width: 55em) { - table {@include font-size(16);} + + table { + + @include font-size(16); + } } } @@ -2314,6 +2551,7 @@ // Manage some table cells widths that are disproportionate to their content .notifications, .messages-notices { + th { width: 30%; @@ -2342,6 +2580,7 @@ // Notices action buttons, this maybe better moved, temp for now to address // styling issues - this will need styling ideas td { + .button { border: 0; display: block; @@ -2364,20 +2603,27 @@ // to background color darker by 50% #buddypress { + div#message { + p { + @include font-size(18); font-weight: bold; } &.info { + p { + @include message-box($notice-info); } } &.updated { + p { + @include message-box($notice-update); } } @@ -2390,9 +2636,13 @@ // we need to use the body classes // todo: If this is class .warning is included in main BP styles remove from here .delete-group { + #buddypress { + div#message.info { + p { + @include message-box($notice-warning); } } Index: src/bp-templates/bp-legacy/css/twentythirteen-rtl.css =================================================================== --- src/bp-templates/bp-legacy/css/twentythirteen-rtl.css (revision 10712) +++ src/bp-templates/bp-legacy/css/twentythirteen-rtl.css (working copy) @@ -858,7 +858,7 @@ .bp-user #buddypress #item-header .generic-button, .single-item.groups #buddypress #item-header .generic-button { float: none; - margin: 1.5em 0 0 0; + margin: 1.5em 0 0; } } @@ -1526,7 +1526,7 @@ width: 100%; } -.bp-user #buddypress #message-threads tr td.thread-info a::after { +.bp-user #buddypress #message-threads tr td.thread-info a:after { content: " – " attr(title); font-size: 12px; font-size: 0.75rem; @@ -1710,9 +1710,9 @@ float: none; } -#main #buddypress .standard-form input[type='text'], -#main #buddypress .standard-form input[type='email'], -#main #buddypress .standard-form input[type='password'], +#main #buddypress .standard-form input[type="text"], +#main #buddypress .standard-form input[type="email"], +#main #buddypress .standard-form input[type="password"], #main #buddypress .standard-form textarea { width: 100%; } @@ -1774,20 +1774,20 @@ } } -#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'] { +#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"] { float: right; margin: 0; width: 100%; } -#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'] { +#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"] { font-size: 14px; font-size: 0.875rem; border: 0; @@ -1794,16 +1794,16 @@ line-height: inherit; } -#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'] { +#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"] { border-left: 1px solid rgba(212, 208, 186, 0.6); padding: 0.2em 0.2em 0.2em 0; } -#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'] { +#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"] { float: left; font-weight: normal; padding: 0.2em 1em; @@ -1813,9 +1813,9 @@ } @media screen and (min-width: 46.25em) { - #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'] { + #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"] { width: 20%; } } @@ -1828,26 +1828,26 @@ margin-bottom: 5px !important; } #buddypress div.dir-search form label, - #buddypress div.dir-search form input[type='text'], - #buddypress div.dir-search form input[type='submit'], + #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 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'] { + #buddypress li.groups-members-search form input[type="text"], + #buddypress li.groups-members-search form input[type="submit"] { width: auto; } } @media screen and (min-width: 77.5em) { - #buddypress .dir-search form input[type='text'], - #buddypress .message-search form input[type='text'] { + #buddypress .dir-search form input[type="text"], + #buddypress .message-search form input[type="text"] { font-size: 16px; font-size: 1rem; } - #buddypress .dir-search form input[type='submit'], - #buddypress .message-search form input[type='submit'] { + #buddypress .dir-search form input[type="submit"], + #buddypress .message-search form input[type="submit"] { font-size: 16px; font-size: 1rem; } Index: src/bp-templates/bp-legacy/css/twentythirteen.css =================================================================== --- src/bp-templates/bp-legacy/css/twentythirteen.css (revision 10712) +++ src/bp-templates/bp-legacy/css/twentythirteen.css (working copy) @@ -858,7 +858,7 @@ .bp-user #buddypress #item-header .generic-button, .single-item.groups #buddypress #item-header .generic-button { float: none; - margin: 1.5em 0 0 0; + margin: 1.5em 0 0; } } @@ -1526,7 +1526,7 @@ width: 100%; } -.bp-user #buddypress #message-threads tr td.thread-info a::after { +.bp-user #buddypress #message-threads tr td.thread-info a:after { content: " – " attr(title); font-size: 12px; font-size: 0.75rem; @@ -1710,9 +1710,9 @@ float: none; } -#main #buddypress .standard-form input[type='text'], -#main #buddypress .standard-form input[type='email'], -#main #buddypress .standard-form input[type='password'], +#main #buddypress .standard-form input[type="text"], +#main #buddypress .standard-form input[type="email"], +#main #buddypress .standard-form input[type="password"], #main #buddypress .standard-form textarea { width: 100%; } @@ -1774,20 +1774,20 @@ } } -#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'] { +#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"] { float: left; margin: 0; width: 100%; } -#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'] { +#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"] { font-size: 14px; font-size: 0.875rem; border: 0; @@ -1794,16 +1794,16 @@ line-height: inherit; } -#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'] { +#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"] { border-right: 1px solid rgba(212, 208, 186, 0.6); padding: 0.2em 0 0.2em 0.2em; } -#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'] { +#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"] { float: right; font-weight: normal; padding: 0.2em 1em; @@ -1813,9 +1813,9 @@ } @media screen and (min-width: 46.25em) { - #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'] { + #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"] { width: 20%; } } @@ -1828,26 +1828,26 @@ margin-bottom: 5px !important; } #buddypress div.dir-search form label, - #buddypress div.dir-search form input[type='text'], - #buddypress div.dir-search form input[type='submit'], + #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 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'] { + #buddypress li.groups-members-search form input[type="text"], + #buddypress li.groups-members-search form input[type="submit"] { width: auto; } } @media screen and (min-width: 77.5em) { - #buddypress .dir-search form input[type='text'], - #buddypress .message-search form input[type='text'] { + #buddypress .dir-search form input[type="text"], + #buddypress .message-search form input[type="text"] { font-size: 16px; font-size: 1rem; } - #buddypress .dir-search form input[type='submit'], - #buddypress .message-search form input[type='submit'] { + #buddypress .dir-search form input[type="submit"], + #buddypress .message-search form input[type="submit"] { font-size: 16px; font-size: 1rem; } Index: src/bp-templates/bp-legacy/css/twentythirteen.scss =================================================================== --- src/bp-templates/bp-legacy/css/twentythirteen.scss (revision 10712) +++ src/bp-templates/bp-legacy/css/twentythirteen.scss (working copy) @@ -117,7 +117,9 @@ @if $text-color { // if a param was passed through $text-color: $text-color; - } @else { + } + + @else { $text-color: darken($background, 50%); } @@ -132,27 +134,27 @@ } // Variables: color definitions -$body-text: #141412; -$light-body: lighten(#141412, 45%); +$body-text: #141412; +$light-body: lighten(#141412, 45%); $content-background: #fff; -$off-white: lighten(#f9f8ee, 10%); -$cream-background: #f7f5e7; -$light-background: #f7f7f7; -$medium-background: #ccc; -$dark-background: #555; -$border-color: #d4d0ba; // border color is varied using rgba -$border-light: #eaeaea; // BP dividers -$border-med: #ddd; -$background-hover: #db572f; // 2013 link background hover -$bp-button-hover: #ededed; // this is the default BP button hover background -$notice-error: #c85a6e; -$notice-warning: #d05656; -$notice-info: #9fd1e2; -$notice-update: #ced98c; -$stripe-odd: #ebf0ff; -$stripe-even: #dbe5ff; -$unread: #dce5ff; -$link-action: #c82b2b; +$off-white: lighten(#f9f8ee, 10%); +$cream-background: #f7f5e7; +$light-background: #f7f7f7; +$medium-background: #ccc; +$dark-background: #555; +$border-color: #d4d0ba; // border color is varied using rgba +$border-light: #eaeaea; // BP dividers +$border-med: #ddd; +$background-hover: #db572f; // 2013 link background hover +$bp-button-hover: #ededed; // this is the default BP button hover background +$notice-error: #c85a6e; +$notice-warning: #d05656; +$notice-info: #9fd1e2; +$notice-update: #ced98c; +$stripe-odd: #ebf0ff; +$stripe-even: #dbe5ff; +$unread: #dce5ff; +$link-action: #c82b2b; /*-------------------------------------------------------------- @@ -220,15 +222,24 @@ // to maximise the screen real estate for BP pages. .buddypress { - div.clear {display: none;} + div.clear { + display: none; + } + // re-factor main themes primary elements widths for BP screens @media (max-width: 999px) { - #content {padding: 0 $spacing-val-md;} + + #content { + padding: 0 $spacing-val-md; + } } @media (max-width: 643px) { - #content {padding: 0;} + + #content { + padding: 0; + } } .entry-header, @@ -247,7 +258,6 @@ */ - /** *---------------------------------------------------------- * @section 2.1 - Navs Object Nav / Sub Nav (item-list-tabs) @@ -263,6 +273,7 @@ // Global Nav Styles div.item-list-tabs { + ul { background-color: $cream-background; border-bottom: 1px solid rgba($border-light, 0.9); @@ -271,8 +282,12 @@ padding: 0; li { + a { - span {border-radius: 25%;} + + span { + border-radius: 25%; + } } } } @@ -281,7 +296,9 @@ // .bp-user #object-nav @ small screen as a dropdown .bp-user { + #buddypress { + @media screen and (max-width: 38.75em) { #object-nav { @@ -306,8 +323,11 @@ &:hover, &:focus { - &:before {content: "Menu \021E7";} + &:before { + content: "Menu \021E7"; + } + ul { height: 320px; opacity: 1; @@ -317,7 +337,9 @@ } } - #subnav {clear: both;} + #subnav { + clear: both; + } } // close @media } @@ -332,7 +354,9 @@ overflow: hidden; li { + @media screen and (max-width: 38.75em) { + &:focus, &:hover { background: darken($cream-background, 2%); @@ -343,6 +367,7 @@ } @media screen and (max-width: 38.75em) { + li:not(:last-child) { border-bottom: 1px solid $border-light; } @@ -349,10 +374,14 @@ } li:not(.selected) { - a {opacity: 0.7;} + + a { + opacity: 0.7; + } } @media screen and (min-width: 38.75em) { + li { float: left; } @@ -385,6 +414,7 @@ select, label, option { + @include font-size(14); } @@ -394,6 +424,7 @@ } @media screen and (min-width: 38.75em) { + li.last { text-align: right; } @@ -403,9 +434,12 @@ // active/current states all navs div.item-list-tabs { + ul { + li.selected, li.current { + a { background: none; opacity: 1; @@ -426,6 +460,7 @@ @media screen and (min-width: 55em) { body:not(.sidebar) { + #buddypress { #item-header, @@ -467,7 +502,9 @@ #subnav { margin: 0 0 0 (-$spacing-val-md); - ul {margin-top: 0;} + ul { + margin-top: 0; + } } } @@ -480,7 +517,9 @@ // Primarilly used for group create screens & ? directory nav. @media screen and (min-width: 46.25em) { + #main { + #buddypress { #group-create-tabs.item-list-tabs { @@ -511,6 +550,7 @@ li.current { border: 1px solid $border-med; border-bottom-color: $content-background; + @include border-top-radius(4px); margin-bottom: -1px; @@ -525,6 +565,7 @@ } // close .item-list-tabs #subnav { + ul { border-bottom: 0; } @@ -541,9 +582,14 @@ */ #buddypress { + div.pagination { box-shadow: none; - .pag-count {margin-left: 0;} + + .pag-count { + margin-left: 0; + } + .pagination-links { margin-right: 0; @@ -560,7 +606,10 @@ color: inherit; overflow: visible; width: auto; - &:before {display: none;} + + &:before { + display: none; + } } .prev { @@ -584,9 +633,12 @@ // Adjusts Meta items and various elements to match 2013 font-family #buddypress { + .item-list { + .activity-header, .activity-meta { + @include default-font-sans(); } } @@ -593,8 +645,11 @@ } #buddypress { + .activity-meta { + .button { + &:focus, &:hover { background: lighten($background-hover, 10%); @@ -604,8 +659,11 @@ } .action { + .generic-button { + a { + &:focus, &:hover { background: lighten($background-hover, 10%); @@ -625,7 +683,9 @@ // Adjusts Meta items to match 2013 font-family #buddypress { + ul.item-list { + li { overflow: hidden !important; @@ -639,7 +699,9 @@ text-align: center; - a {border-bottom: 0;} + a { + border-bottom: 0; + } img.avatar { display: inline-block; @@ -670,6 +732,7 @@ } .item-title { + @include font-size(18); line-height: 1.2; margin: 0 auto; @@ -682,10 +745,12 @@ width: 100%; .update { + @include font-size(12); display: block; @media screen and (min-width: 59.6875em) { + @include font-size(14); } @@ -698,6 +763,7 @@ } @media screen and (min-width: 59.6875em) { + .item-avatar, .item, .action { @@ -711,7 +777,8 @@ width: 55%; .item-title { - @include font-size(22) + + @include font-size(22); } } @@ -787,6 +854,7 @@ */ #buddypress { + form#whats-new-form { // Line-height issue inherited from BP rules, override. @@ -797,6 +865,7 @@ // corrective measure for clipped elements due to JS inline styling @media screen and (max-width: 46.25em) { + #whats-new-content { clear: left; margin: $spacing-val-sm 0 $spacing-val-md; @@ -805,7 +874,9 @@ } #whats-new-content.active { + #whats-new-options[style] { + #whats-new-post-in-box { border: 1px solid rgba($border-color, 0.5); float: left; @@ -825,6 +896,7 @@ } @media screen and (min-width: 30em) { + #whats-new-post-in-box { width: auto; } @@ -841,7 +913,9 @@ // User account form requires matching bp default specificity #item-body { + form#whats-new-form { + margin: $spacing-val-lg 0; } } @@ -884,6 +958,7 @@ margin-left: 0; .activity-header { + @include font-size(14); } } @@ -894,7 +969,10 @@ float: left; margin-right: $spacing-val-sm; text-align: left; - a {border-bottom: 0;} + + a { + border-bottom: 0; + } } .activity-content { @@ -902,6 +980,7 @@ overflow: hidden; .activity-header { + @include font-size(16); } } @@ -911,8 +990,11 @@ } // close li li.mini { + .activity-avatar { + a { + img.avatar { height: 30px; margin-left: 15px; @@ -922,7 +1004,9 @@ } .activity-content { + .activity-header { + @include font-size(14); } } @@ -949,6 +1033,7 @@ } // close .activity-header .activity-meta { + a { display: block; margin-bottom: $spacing-val-xs; @@ -971,7 +1056,10 @@ &:hover { background: darken($light-background, 1%); border: 1px solid rgba(#9fd1e2, 0.3); - a { font-style: italic; } + + a { + font-style: italic; + } } a { @@ -985,7 +1073,9 @@ /* Single activity view - activity permalink */ .activity-permalink { + #buddypress { + #activity-stream { li.activity-item { @@ -993,14 +1083,21 @@ } li.mini { + .activity-header { + @include font-size(16); + @media screen and (min-width: 46.25em) { + @include font-size(20); } margin-bottom: $spacing-val-lg; - p {padding: $spacing-val-md;} + + p { + padding: $spacing-val-md; + } } } } @@ -1015,7 +1112,9 @@ #buddypress { #activity-stream { + .activity-comments { + border-left: 1px solid $border-light; margin-top: 5px; @@ -1031,6 +1130,7 @@ color: rgba($body-text, 0.8); display: inline-block; font-family: inherit; + @include font-size(12); font-weight: normal; line-height: 1.2; @@ -1063,10 +1163,13 @@ */ #buddypress { + #members-list { @media screen and (min-width: 59.6875em) { + li { + .item-avatar, .item { float: left; @@ -1094,6 +1197,7 @@ */ #buddypress { + #signup_form.standard-form { #profile-details-section, @@ -1108,8 +1212,14 @@ } @media screen and (min-width: 38.75em) { - #profile-details-section {float: right;} - #basic-details-section {float: left;} + + #profile-details-section { + float: right; + } + + #basic-details-section { + float: left; + } } } @@ -1136,6 +1246,7 @@ .entry-title { color: $light-body; + @include font-size(32); margin-bottom: $spacing-val-sm; text-align: center; @@ -1147,18 +1258,25 @@ } #buddypress { + #item-header-content { + #item-meta { + @include font-size(14); text-align: left; - p {margin-bottom: 0.5em;} + p { + margin-bottom: 0.5em; + } } } } @media screen and (max-width: 46.25em) { + main { + header.entry-header { padding-bottom: 1rem; } @@ -1166,6 +1284,7 @@ } @media screen and (max-width: 38.75em) { + h1, #item-header-content { text-align: center; @@ -1173,21 +1292,26 @@ } #buddypress { + @media screen and (max-width: 46.25em) { + #item-header { + .generic-button { float: none; - margin: 1.5em 0 0 0; + margin: 1.5em 0 0; } } } @media screen and (max-width: 38.75em) { + h1 { margin-bottom: 0; } #item-header-avatar { + img.avatar { margin-right: 0; } @@ -1209,9 +1333,13 @@ */ .single-item.groups { + #buddypress { + @media screen and (max-width: 46.25em) { + #item-header { + #item-meta { margin-bottom: $spacing-val-md; } @@ -1221,6 +1349,7 @@ // 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; @@ -1279,9 +1408,11 @@ } h3 { + @include font-size(14); @media screen and (min-width: 46.25em) { + @include font-size(16); } @@ -1311,6 +1442,7 @@ width: 28%; h3 { + @include font-size(14); } } @@ -1331,6 +1463,7 @@ } @media screen and (min-width: 46.25em) { + #item-header-content { padding-left: $spacing-val-sm; @@ -1365,6 +1498,7 @@ .bp-user { #buddypress { + #item-header { padding: $spacing-val-md 0; @@ -1381,6 +1515,7 @@ } #item-header-content { + .user-nicename, span.activity { display: block; @@ -1389,6 +1524,7 @@ } @media screen and (min-width: 46.25em) { + #item-header-avatar { float: left; width: auto; @@ -1419,7 +1555,9 @@ #item-header-cover-image { #item-header-content { + @media screen and (min-width: 46.25em) { + .user-nicename { margin-bottom: $spacing-val-md; } @@ -1456,7 +1594,9 @@ // headings settings screens & general global settings styles .groups { + #group-settings-form { + h4 { background: $dark-background; color: $content-background; @@ -1466,6 +1606,7 @@ } .groups.edit-details { + #group-settings-form { label { @@ -1477,6 +1618,7 @@ textarea + p label { background: none; color: inherit; + @include font-size(14); width: auto; } @@ -1490,6 +1632,7 @@ } // close .groups.edit-details .groups.group-settings { + #group-settings-form { div.radio label { @@ -1498,6 +1641,7 @@ ul { color: rgba($body-text, 0.6); + @include font-size(14); } } @@ -1514,8 +1658,11 @@ } .groups.manage-members { + #group-settings-form { + .item-list { + li { border-bottom: 1px solid $border-light; @@ -1523,7 +1670,9 @@ h5 { float: left; - > a {border-bottom: 0;} + > a { + border-bottom: 0; + } } span.small { @@ -1560,8 +1709,11 @@ // Massage the members search for groups nav specifically. .groups.group-members { + #subnav { + li { + @media screen and (max-width: 38.75em) { background: $content-background; padding: $spacing-val-md 0; @@ -1577,7 +1729,10 @@ width: 100%; label { - input[type="text"] {width: 100%;} + + input[type="text"] { + width: 100%; + } } } @@ -1595,6 +1750,7 @@ #buddypress { div.invite { + .left-menu { float: none; @@ -1639,7 +1795,10 @@ */ .bp-user { - .entry-title {margin-bottom: 0.5em;} + + .entry-title { + margin-bottom: 0.5em; + } } /** @@ -1653,21 +1812,47 @@ #buddypress { table { - th {@include font-size(14)} - td {@include font-size(13)} + th { + + @include font-size(14); + } + + td { + + @include font-size(13); + } + @media screen and (min-width: 46.25em) { - th {@include font-size(16)} - td {@include font-size(14)} + + th { + + @include font-size(16); + } + + td { + + @include font-size(14); + } } @media screen and (min-width: 77.5em) { - th {@include font-size(18)} - td {@include font-size(16)} + + th { + + @include font-size(18); + } + + td { + + @include font-size(16); + } } } - .pag-count {font-style: italic;} + .pag-count { + font-style: italic; + } .notifications-options-nav { border: 1px solid rgba($border-color, 0.5); @@ -1681,6 +1866,7 @@ select, input { border: 0; + @include font-size(14); outline: 0; padding: 0; @@ -1714,7 +1900,9 @@ #buddypress { .profile { + .bp-widget { + h4 { background: lighten($dark-background, 10%); color: #fff; @@ -1722,7 +1910,9 @@ padding: 0.4em; } - table {margin-top: 0;} + table { + margin-top: 0; + } } #profile-edit-form { @@ -1756,12 +1946,14 @@ a { background: none; border: 0; - @include font-size(18) + + @include font-size(18); } } //.button-nav .field-visibility-settings-toggle, .field-visibility-settings { + @include font-size(14); } @@ -1774,8 +1966,12 @@ } // close profile form .bp-avatar { + #bp-delete-avatar { - a {font-size: inherit; } + + a { + font-size: inherit; + } } } } // close .profile @@ -1793,9 +1989,13 @@ #buddypress { #groups-list { + li { + .item { + @media screen and (min-width: 77.5em) { + left: 5%; width: 50%; } @@ -1844,6 +2044,7 @@ } @media screen and (min-width: 46.25em) { + img.avatar { float: left; } @@ -1864,6 +2065,7 @@ } #send-reply { + .message-content { background: $content-background; border: 0; @@ -1877,7 +2079,9 @@ } // close message-thread Singular view! #message-threads { + thead { + tr { background: lighten($dark-background, 10%); } @@ -1884,6 +2088,7 @@ } tr { + td { background: $content-background; display: inline-block; @@ -1900,7 +2105,10 @@ @media screen and (max-width: 46.25em) { padding-top: 0; - span.icon:before {font-size: 14px;} + + span.icon:before { + font-size: 14px; + } } } @@ -1920,6 +2128,7 @@ td.thread-from, td.thread-options { border-left: 0 !important; + @include calc(width, "100% - 30px"); margin-left: 0; } @@ -1928,12 +2137,15 @@ padding-left: 41px; width: 100%; - a::after { + a:after { + content: " \2013 \00a0"attr(title); + @include font-size(12); } .thread-excerpt { + @include font-size(14); } } @@ -1942,6 +2154,7 @@ text-align: right; a { + @include font-size(12); line-height: 2.2; } @@ -1958,6 +2171,7 @@ @media screen and (max-width: 38.75em) { clear: both; + @include font-size(12); width: 100%; } @@ -1965,6 +2179,7 @@ } tr.unread { + td { background: $unread; border-color: $border-color; @@ -1994,7 +2209,9 @@ margin: 0; padding: 0; - li {margin-left: 0;} + li { + margin-left: 0; + } li.friend-tab { background: lighten($notice-info, 20%); @@ -2029,7 +2246,9 @@ } .sitewide-notices { + tr { + td:first-child { display: none; } @@ -2036,6 +2255,7 @@ } td { + strong { background: lighten($dark-background, 10%); color: $content-background; @@ -2083,6 +2303,7 @@ padding: 0 $spacing-val-sm; // 'p' = email notification screen sub heading > p { + @include font-size(20); margin: $spacing-val-md 0 $spacing-val-sm; } @@ -2089,6 +2310,7 @@ } table.notification-settings { + td.yes, td.no { vertical-align: middle; @@ -2104,6 +2326,7 @@ } @media screen and (min-width: 46.25em) { + th.field-group-name, td.field-name { width: 70%; @@ -2116,7 +2339,10 @@ } td.field-visibility { - select {width: 100%;} + + select { + width: 100%; + } } } @@ -2131,13 +2357,18 @@ */ // Attempt to reset form control widths #main { + #buddypress { + .standard-form { - li {float: none;} - input[type='text'], - input[type='email'], - input[type='password'], + li { + float: none; + } + + input[type="text"], + input[type="email"], + input[type="password"], textarea { width: 100%; } @@ -2153,6 +2384,7 @@ div.activity-comments { form { + .ac-textarea { background: $light-background; border: 1px solid rgba($border-color, 0.5); @@ -2181,10 +2413,13 @@ } // close .standard-form #signup_form.standard-form { + div.submit { float: none; - input {margin-right: 0;} + input { + margin-right: 0; + } } } @@ -2191,6 +2426,7 @@ } // close #buddypress #buddypress { + div.dir-search, div.message-search, li.groups-members-search { @@ -2213,25 +2449,26 @@ } } - input[type='text'] { + input[type="text"] { float: left; margin: 0; width: 100%; } - input[type='text'], - input[type='submit'] { + input[type="text"], + input[type="submit"] { + @include font-size(14); border: 0; line-height: inherit; } - input[type='text'] { + input[type="text"] { border-right: 1px solid rgba($border-color, 0.6); padding: 0.2em 0 0.2em 0.2em; } - input[type='submit'] { + input[type="submit"] { float: right; font-weight: normal; padding: 0.2em 1em; @@ -2250,6 +2487,7 @@ // Shift the search parent to the right and allow to shrinkwrap @media screen and (min-width: 38.75em) { + div.dir-search, div.message-search, li.groups-members-search { @@ -2257,9 +2495,10 @@ margin-bottom: 5px !important; form { + label, - input[type='text'], - input[type='submit'] { + input[type="text"], + input[type="submit"] { width: auto; } } @@ -2272,9 +2511,18 @@ .dir-search, .message-search { + form { - input[type='text'] { @include font-size(16) ;} - input[type='submit'] { @include font-size(16) ;} + + input[type="text"] { + + @include font-size(16); + } + + input[type="submit"] { + + @include font-size(16); + } } } } @@ -2295,6 +2543,7 @@ #buddypress { table { + @include font-size(14); margin: $spacing-val-md 0; @@ -2311,11 +2560,17 @@ } // Reduce the themes inherited paragraph margins in tables - p {margin-bottom: 0.5em;} + p { + margin-bottom: 0.5em; + } } @media screen and (min-width: 55em) { - table {@include font-size(16);} + + table { + + @include font-size(16); + } } } @@ -2326,6 +2581,7 @@ // Manage some table cells widths that are disproportionate to their content .notifications, .messages-notices { + th { width: 30%; @@ -2354,6 +2610,7 @@ // Notices action buttons, this maybe better moved, temp for now to address // styling issues - this will need styling ideas td { + .button { border: 0; display: block; @@ -2376,20 +2633,27 @@ // to background color darker by 50% #buddypress { + div#message { + p { + @include font-size(18); font-weight: bold; } &.info { + p { + @include message-box($notice-info); } } &.updated { + p { + @include message-box($notice-update); } } @@ -2402,9 +2666,13 @@ // we need to use the body classes // todo: If this is class .warning is included in main BP styles remove from here .delete-group { + #buddypress { + div#message.info { + p { + @include message-box($notice-warning); } } Index: src/bp-templates/bp-legacy/css/twentytwelve.scss =================================================================== --- src/bp-templates/bp-legacy/css/twentytwelve.scss (revision 10712) +++ src/bp-templates/bp-legacy/css/twentytwelve.scss (working copy) @@ -14,11 +14,9 @@ // 2012 Media Queries / Breakpoints. // 2012 works two breakpoints 600px/960px -// @media screen and (min-width: 37.500em) +// @media screen and (min-width: 37.5em) // @media screen and (min-width: 61.5625em) - - // In addition BP can use the em breakpoints as referenced below to provide // a series of finer breakpoints. // @media screen and (max-width: 20em) xtra small mobile only 320px @@ -32,23 +30,29 @@ // written as: // @include medium-up { // body {property: value;} -// } +// // 600px @mixin small-up { - @media screen and (min-width: 37.500em) { + + @media screen and (min-width: 37.5em) { + @content; } } // 960px @mixin medium-up { + @media screen and (min-width: 60em) { + @content; } } // 1200px @mixin large-up { + @media screen and (min-width: 75em) { + @content; } } @@ -123,13 +127,6 @@ box-sizing: $box-model; } -// Calc -@mixin calc($property, $expression) { - #{$property}: -webkit-calc(#{$expression}); - #{$property}: -moz-calc(#{$expression}); - #{$property}: calc(#{$expression}); -} - // Re-enable the VendorPrefix lint test // scss-lint:enable VendorPrefix @@ -139,7 +136,10 @@ @if $text-color { // if a param was passed through $text-color: $text-color; - } @else { + } + + @else { + $text-color: darken($background, 50%); } @@ -153,7 +153,8 @@ font-family: "Source Sans Pro", Helvetica, sans-serif; } -// Variables: color definitions +// Variables: color definitions; +/* stylelint-disable declaration-colon-space-after */ $body-text: #141412; $content-background: #fff; $off-white: lighten(#f9f8ee, 0.7); @@ -174,6 +175,8 @@ $stripe-even: #dbe5ff; $unread: #9dc3c8; $link-action: #c82b2b; +/* stylelint-enable */ + /*-------------------------------------------------------------- This is the BuddyPress companion stylesheet for @@ -236,11 +239,12 @@ *------------------------------------------------------------------------------- */ +.buddypress { - -.buddypress { // Remove any empty clearing elements, CSS provides clearing. - div.clear {display: none;} + div.clear { + display: none; + } } // .buddypress (body class) @@ -267,9 +271,12 @@ // active/current states all navs div.item-list-tabs { + ul { + li.selected, li.current { + a { background: inherit; opacity: 1; @@ -277,13 +284,16 @@ } } } + // global nav styles div.item-list-tabs { + ul { overflow: hidden; padding: 0; li { + a { &:focus, @@ -295,12 +305,13 @@ color: #21759b; } - span {border-radius: 25%;} + span { + border-radius: 25%; + } } - } } - } // close item-list-tabs + } } // close #buddypress @@ -333,8 +344,11 @@ &:hover, &:focus { - &:before {content: "Menu \021E7";} + &:before { + content: "Menu \021E7"; + } + ul { height: 320px; opacity: 1; @@ -348,7 +362,7 @@ clear: both; } - } // close @media + } } } @@ -364,7 +378,8 @@ float: none; } - @media screen and (max-width: 37.500em) { + @media screen and (max-width: 37.5em) { + li:not(:last-child) { border-bottom: 1px solid $border-light; } @@ -372,7 +387,8 @@ li:not(.selected) { - @media screen and (max-width: 37.500em) { + @media screen and (max-width: 37.5em) { + &:focus, &:hover { background: darken($light-background, 2%); @@ -380,7 +396,8 @@ } } - @media screen and (min-width: 37.500em) { + @media screen and (min-width: 37.5em) { + li { float: left; } @@ -421,6 +438,7 @@ select, label, option { + @include font-size(14); } @@ -433,14 +451,17 @@ } } - } // close ul - } // close #subnav + } + } } // close #buddypress .bp-user { + #buddypress { + div#subnav.item-list-tabs { + li.last { margin-left: 0; text-align: right; @@ -458,14 +479,11 @@ /*__ Vertical menu User Account / Group single screens __*/ -// This block contains rules to re-factor the item-body structural element -// to sit alongside the vert menu -// 2012 right sidebar is displayed if the widget sidebar has widgets; -// we'll only display object nav as a vert menu if sidebar not present. @media screen and (min-width: 60em) { body.full-width { + #buddypress { #item-header, @@ -507,12 +525,14 @@ #subnav { margin: 0 0 0 (-$spacing-val-md); - ul {margin-top: 0;} + ul { + margin-top: 0; + } } } - } // close #buddypress - } // close body:not(.sidebar) + } + } } // close @media @@ -520,7 +540,9 @@ // Primarilly used for group create screens & ? directory nav. @media screen and (min-width: 46.25em) { + #main { + #buddypress { #group-create-tabs.item-list-tabs { @@ -551,6 +573,7 @@ li.current { border: 1px solid $border-med; border-bottom-color: $content-background; + @include border-top-radius(4px); margin-bottom: -1px; @@ -565,12 +588,13 @@ } // close .item-list-tabs #subnav { + ul { border-bottom: 0; } - } // close #subnav - } // close #buddypress + } + } } } // close @media @@ -592,7 +616,10 @@ width: 0; } - .pag-count {margin-left: 0;} + .pag-count { + margin-left: 0; + } + .pagination-links { margin-right: 0; @@ -609,7 +636,10 @@ color: inherit; overflow: visible; width: auto; - &:before {display: none;} + + &:before { + display: none; + } } .prev { @@ -640,6 +670,7 @@ // Adjusts Meta items to match 2012 font-family #buddypress { + ul.item-list { border-top: 0; @@ -650,13 +681,15 @@ .item-avatar { margin-bottom: $spacing-val-sm; - @media screen and (min-width: 37.500em) { + @media screen and (min-width: 37.5em) { margin-bottom: 0; } text-align: center; - a {border-bottom: 0;} + a { + border-bottom: 0; + } img.avatar { display: inline-block; @@ -700,6 +733,7 @@ } .item-title { + @include font-size(16); line-height: 1.2; text-align: center; @@ -713,14 +747,18 @@ > a { text-decoration: none; - &:visited { color: #21759b;} + &:visited { + color: #21759b; + } } .update { display: block; + @include font-size(12); @include medium-up { + @include font-size(14); } @@ -732,6 +770,7 @@ } // close .item @include medium-up { + .item-avatar, .item, .action { @@ -745,7 +784,8 @@ width: 55%; .item-title { - @include font-size(18) + + @include font-size(18); } } @@ -782,7 +822,7 @@ // Provisionally lets keep the 'action' div //position but inline-block the buttons - @media screen and (min-width: 37.500em) { + @media screen and (min-width: 37.5em) { // keep buttons to a row small tablet up margin: 0 $spacing-val-sm $spacing-val-sm 0; width: auto; @@ -820,6 +860,7 @@ */ #buddypress { + form#whats-new-form { // Line-height issue inherited from BP rules, override. @@ -830,6 +871,7 @@ // corrective measure for clipped elements due to JS inline styling @media screen and (max-width: 46.25em) { + #whats-new-content { clear: left; margin: $spacing-val-sm 0 $spacing-val-md; @@ -838,7 +880,9 @@ } #whats-new-content.active { + #whats-new-options[style] { + #whats-new-post-in-box { border: 1px solid rgba($border-color, 0.5); float: left; @@ -858,6 +902,7 @@ } @media screen and (min-width: 30em) { + #whats-new-post-in-box { width: auto; } @@ -878,6 +923,7 @@ // User account form requires matching bp default specificity #item-body { + form#whats-new-form { margin: $spacing-val-lg 0; } @@ -923,6 +969,7 @@ } .activity-header { + @include font-size(14); a:visited { @@ -931,7 +978,10 @@ } .activity-inner { - img {height: auto;} + + img { + height: auto; + } } @media screen and (min-width: 46.25em) { @@ -951,6 +1001,7 @@ overflow: hidden; .activity-header { + @include font-size(16); } } @@ -964,8 +1015,11 @@ } // close li li.mini { + .activity-avatar { + a { + img.avatar { height: 30px; margin-left: 15px; @@ -975,12 +1029,16 @@ } .activity-content { + .activity-header { + @include font-size(14); } .activity-meta { + a { + @include font-size(12); } } @@ -1007,12 +1065,14 @@ } // close .activity-header .activity-meta { + a { display: block; + @include font-size(14); margin-bottom: $spacing-val-xs; - @media screen and (min-width: 37.500em) { + @media screen and (min-width: 37.5em) { float: left; margin-bottom: 0; } @@ -1045,7 +1105,9 @@ /* Single activity view - activity permalink */ .activity-permalink { + #buddypress { + #activity-stream { li.activity-item { @@ -1053,14 +1115,21 @@ } li.mini { + .activity-header { + @include font-size(16); + @media screen and (min-width: 46.25em) { + @include font-size(20); } margin-bottom: $spacing-val-lg; - p {padding: $spacing-val-md;} + + p { + padding: $spacing-val-md; + } } } // close li.mini @@ -1096,6 +1165,7 @@ .acomment-meta, .acomment-content { + @include font-size(12); } @@ -1114,6 +1184,7 @@ color: rgba($body-text, 0.8); display: inline-block; font-family: inherit; + @include font-size(12); font-weight: normal; line-height: 1.2; @@ -1147,10 +1218,13 @@ */ #buddypress { + #members-list { @include medium-up { + li { + .item-avatar, .item { float: left; @@ -1178,6 +1252,7 @@ */ #buddypress { + #signup_form.standard-form { #profile-details-section, @@ -1186,14 +1261,20 @@ float: none; width: 100%; - @media screen and (min-width: 37.500em) { + @media screen and (min-width: 37.5em) { width: 48%; } } - @media screen and (min-width: 37.500em) { - #profile-details-section {float: right;} - #basic-details-section {float: left;} + @media screen and (min-width: 37.5em) { + + #profile-details-section { + float: right; + } + + #basic-details-section { + float: left; + } } } @@ -1206,10 +1287,12 @@ */ .bp-user { + #buddypress { // On object nav links, table links (notifications etc) we don't really need :visited // inheritance, so set pseudo class to :link color. a { + &:visited { color: #21759b; } @@ -1225,18 +1308,25 @@ .bp-user, .single-item.groups { + #buddypress { + #item-header-content { + #item-meta { + @include font-size(14); text-align: left; - p {margin-bottom: 0.5em;} + p { + margin-bottom: 0.5em; + } } } } - @media screen and (max-width: 37.500em) { + @media screen and (max-width: 37.5em) { + h1, #item-header-content { text-align: center; @@ -1244,7 +1334,9 @@ } @media screen and (max-width: 46.25em) { + main { + header.entry-header { padding-bottom: 1rem; } @@ -1252,12 +1344,15 @@ } #buddypress { - @media screen and (max-width: 37.500em) { + + @media screen and (max-width: 37.5em) { + h1 { margin-bottom: 0; } #item-header-avatar { + img.avatar { margin-right: 0; } @@ -1269,10 +1364,12 @@ } // close @media @media screen and (max-width: 46.25em) { + #item-header { + .generic-button { float: none; - margin: 1.5em 0 0 0; + margin: 1.5em 0 0; } } } @@ -1289,9 +1386,13 @@ */ .single-item.groups { + #buddypress { + @media screen and (max-width: 46.25em) { + #item-header { + #item-meta { margin-bottom: $spacing-val-md; } @@ -1301,6 +1402,7 @@ // Move visual flow of avatar & item-actions at narrow width, // avatar first after group title @media screen and (max-width: 50em) { + div#item-header { display: flex; flex-direction: column; @@ -1338,6 +1440,7 @@ padding-bottom: $spacing-val-lg; #item-header-content { + @include box-model(border-box); } @@ -1363,6 +1466,7 @@ } h3 { + @include font-size(14); padding: 0.2em; } @@ -1369,6 +1473,7 @@ #group-admins, #group-mods { + li { margin: 0; } @@ -1396,6 +1501,7 @@ } // close @media @media screen and (min-width: 64em) { + #item-header-content { width: 40%; } @@ -1409,7 +1515,9 @@ // Due to cover image styles being applied via embedded styles & thus carrying // heavier weight than linked styles the use of !important to override may be required. #buddypress { + #cover-image-container { + #item-header-cover-image { #item-actions { @@ -1417,6 +1525,7 @@ } @media screen and (min-width: 50em) and (max-width: 60em) { + #item-header-content { max-width: 60% !important; width: 60% !important; @@ -1433,7 +1542,9 @@ padding-top: 0 !important; width: auto; - h3 {border-bottom: 1px solid $border-light;} + h3 { + border-bottom: 1px solid $border-light; + } } } // @media @@ -1453,7 +1564,9 @@ */ .bp-user { + #buddypress { + #item-header { padding: $spacing-val-md 0; @@ -1469,7 +1582,9 @@ } #item-header-content { + #item-buttons { + .generic-button { margin-right: 5px; } @@ -1477,6 +1592,7 @@ } @media screen and (min-width: 46.25em) { + #item-header-avatar { float: left; @@ -1520,7 +1636,9 @@ // headings settings screens & general global settings styles .groups { + #group-settings-form { + h4 { background: $dark-background; color: $content-background; @@ -1530,6 +1648,7 @@ } .groups.edit-details { + #group-settings-form { label { @@ -1541,6 +1660,7 @@ textarea + p label { background: none; color: inherit; + @include font-size(14); width: auto; } @@ -1554,6 +1674,7 @@ } // close .groups.edit-details .groups.group-settings { + #group-settings-form { div.radio label { @@ -1562,6 +1683,7 @@ ul { color: rgba($body-text, 0.6); + @include font-size(14); } } @@ -1578,8 +1700,11 @@ } .groups.manage-members { + #group-settings-form { + .item-list { + li { border-bottom: 1px solid $border-light; @@ -1587,7 +1712,9 @@ h5 { float: left; - > a {border-bottom: 0;} + > a { + border-bottom: 0; + } } span.small { @@ -1601,7 +1728,7 @@ margin: $spacing-val-xs 0; width: 100%; - @media screen and (min-width: 37.500em) { + @media screen and (min-width: 37.5em) { width: auto; } } @@ -1624,9 +1751,12 @@ // Massage the members search for groups nav specifically. .groups.group-members { + #subnav { + li { - @media screen and (max-width: 37.500em) { + + @media screen and (max-width: 37.5em) { background: $content-background; padding: $spacing-val-md 0; } @@ -1636,12 +1766,15 @@ #search-members-form { float: right; - @media screen and (max-width: 37.500em) { + @media screen and (max-width: 37.5em) { margin: 0; width: 100%; label { - input[type="text"] {width: 100%;} + + input[type="text"] { + width: 100%; + } } } @@ -1660,7 +1793,10 @@ */ .bp-user { - .entry-title {margin-bottom: 0.5em;} + + .entry-title { + margin-bottom: 0.5em; + } } /** @@ -1673,16 +1809,34 @@ #buddypress { table { - th {@include font-size(13)} - td {@include font-size(12)} + th { + + @include font-size(13); + } + + td { + + @include font-size(12); + } + @include medium-up { - th {@include font-size(16)} - td {@include font-size(14)} + + th { + + @include font-size(16); + } + + td { + + @include font-size(14); + } } } - .pag-count {font-style: italic;} + .pag-count { + font-style: italic; + } .notifications-options-nav, .messages-options-nav { @@ -1689,12 +1843,13 @@ float: left; width: 100%; - @media screen and (min-width: 37.500em) { + @media screen and (min-width: 37.5em) { width: 40%; } select, input { + @include font-size(14); outline: 0; padding: 0; @@ -1705,7 +1860,7 @@ margin-right: 0; width: 49%; - @media screen and (min-width: 37.500em) { + @media screen and (min-width: 37.5em) { width: auto; } } @@ -1717,7 +1872,7 @@ margin-left: 1%; width: 50%; - @media screen and (min-width: 37.500em) { + @media screen and (min-width: 37.5em) { width: auto; } @@ -1743,7 +1898,9 @@ #buddypress { .profile { + .bp-widget { + h4 { background: lighten($dark-background, 10%); color: #fff; @@ -1751,11 +1908,14 @@ padding: 0.4em; } - table {margin-top: 0;} + table { + margin-top: 0; + } } /* Edit profile */ #profile-edit-form { + .button-nav:before, .button-nav:after { content: " "; @@ -1784,7 +1944,8 @@ a { background: none; border: 0; - @include font-size(18) + + @include font-size(18); } } //.button-nav @@ -1794,6 +1955,7 @@ .field-visibility-settings-toggle, .field-visibility-settings { + @include font-size(14); } @@ -1800,6 +1962,7 @@ .field-visibility-settings-close, .visibility-toggle-link { background: lighten($dark-background, 10%); + @include border-radius(2px); color: #eee; font-weight: bold; @@ -1814,8 +1977,12 @@ } // close profile form .bp-avatar { + #bp-delete-avatar { - a {font-size: inherit; } + + a { + font-size: inherit; + } } } } // close .profile @@ -1834,9 +2001,13 @@ #buddypress { #groups-list { + li { + .item { + @media screen and (min-width: 77.5em) { + left: 5%; width: 50%; } @@ -1890,6 +2061,7 @@ } @media screen and (min-width: 46.25em) { + img.avatar { float: left; } @@ -1910,6 +2082,7 @@ } #send-reply { + .message-content { background: $content-background; border: 0; @@ -1925,6 +2098,7 @@ #message-threads { thead { + tr { background: lighten($dark-background, 10%); } @@ -1931,6 +2105,7 @@ } tr { + td { background: $content-background; box-sizing: border-box; @@ -1959,6 +2134,7 @@ } span.icon:before { + @include font-size(14); } } @@ -1967,7 +2143,8 @@ td.thread-from { height: 3em; - @media screen and (max-width: 37.500em) { + @media screen and (max-width: 37.5em) { + height: 5.2em; } } @@ -1983,8 +2160,9 @@ padding-left: 41px; width: 100%; - a::after { + a:after { content: " \2016 \00a0"attr(title); + @include font-size(12); } } @@ -1993,6 +2171,7 @@ text-align: right; a { + @include font-size(12); line-height: 1.2; } @@ -2007,8 +2186,9 @@ float: right; line-height: 2; - @media screen and (max-width: 37.500em) { + @media screen and (max-width: 37.5em) { clear: both; + @include font-size(11); width: 100%; } @@ -2016,6 +2196,7 @@ } tr.unread { + td { border-color: $border-light; } @@ -2040,6 +2221,7 @@ } #send_message_form { + input, textarea { box-sizing: border-box; @@ -2049,7 +2231,9 @@ .acfb-holder { list-style: none; - li {margin-left: 0;} + li { + margin-left: 0; + } li.friend-tab { background: lighten($notice-info, 20%); @@ -2084,7 +2268,11 @@ } #message-threads.sitewide-notices { - tr {margin: 3em 0;} + + tr { + margin: 3em 0; + } + td { width: 100%; @@ -2112,6 +2300,7 @@ } td:nth-child(2) { + strong { margin: -8px -8px 8px; } @@ -2139,7 +2328,7 @@ text-indent: -999em; } - a:last-child::after { + a:last-child:after { content: attr(title); display: block; line-height: initial; @@ -2163,7 +2352,9 @@ cursor: pointer; } - img { vertical-align: bottom;} + img { + vertical-align: bottom; + } } } @@ -2182,8 +2373,9 @@ #settings-form { - // 'p' = email notification screen sub heading + // "p" = email notification screen sub heading > p { + @include font-size(20); margin: $spacing-val-md 0 $spacing-val-sm; } @@ -2190,6 +2382,7 @@ } table.notification-settings { + td.yes, td.no { vertical-align: middle; @@ -2206,6 +2399,7 @@ } @media screen and (min-width: 46.25em) { + th.field-group-name, td.field-name { width: 70%; @@ -2218,7 +2412,10 @@ } td.field-visibility { - select {width: 100%;} + + select { + width: 100%; + } } } @@ -2241,13 +2438,18 @@ // Attempt to reset form control widths #main { + #buddypress { + .standard-form { - li {float: none;} - input[type='text'], - input[type='email'], - input[type='password'], + li { + float: none; + } + + input[type="text"], + input[type="email"], + input[type="password"], textarea { width: 100%; } @@ -2263,6 +2465,7 @@ div.activity-comments { form { + .ac-textarea { background: $light-background; border: 1px solid rgba($border-color, 0.5); @@ -2291,10 +2494,13 @@ } // close .standard-form #signup_form.standard-form { + div.submit { float: none; - input {margin-right: 0;} + input { + margin-right: 0; + } } } @@ -2301,6 +2507,7 @@ } // close #buddypress #buddypress { + div.dir-search, div.message-search, li.groups-members-search { @@ -2319,8 +2526,9 @@ width: 70%; } - input[type='text'], - input[type='submit'] { + input[type="text"], + input[type="submit"] { + @include font-size(14); border: 0; border-radius: 0; @@ -2328,15 +2536,15 @@ min-height: 2rem; } - input[type='text'] { + input[type="text"] { border-right: 1px solid rgba($border-color, 0.6); float: left; margin: 0; - padding: 0 0.2em 0; + padding: 0 0.2em; width: 100%; } - input[type='submit'] { + input[type="submit"] { float: right; font-weight: normal; padding: 0 1em; @@ -2350,7 +2558,8 @@ // Shift the search parent to the right and allow to shrinkwrap - @media screen and (min-width: 37.500em) { + @media screen and (min-width: 37.5em) { + div.dir-search, div.message-search, li.groups-members-search { @@ -2358,9 +2567,10 @@ margin-bottom: 5px !important; form { + label, - input[type='text'], - input[type='submit'] { + input[type="text"], + input[type="submit"] { width: auto; } } @@ -2373,9 +2583,18 @@ .dir-search, .message-search { + form { - input[type='text'] { @include font-size(16) ;} - input[type='submit'] { @include font-size(16) ;} + + input[type="text"] { + + @include font-size(16) ; + } + + input[type="submit"] { + + @include font-size(16) ; + } } } } @@ -2388,9 +2607,11 @@ *------------------------------------------------------------------------------- */ .bp-user { + #buddypress { table { + @include font-size(14); margin: $spacing-val-md 0; @@ -2406,16 +2627,23 @@ } // Reduce the themes inherited paragraph margins in tables - p {margin-bottom: 0.5em;} + p { + margin-bottom: 0.5em; + } } @media screen and (min-width: 55em) { - table {@include font-size(16);} + + table { + + @include font-size(16); + } } // Manage some table cells widths that are disproportionate to their content .notifications, .messages-notices { + th { width: 30%; @@ -2448,7 +2676,9 @@ // Notices action buttons, this maybe better moved, temp for now to address // styling issues - this will need styling ideas td { + .button { + border: 0; display: block; padding: 0; @@ -2472,20 +2702,27 @@ // to background color darker by 50% #buddypress { + div#message { + p { + @include font-size(18); font-weight: bold; } &.info { + p { + @include message-box($notice-info); } } &.updated { + p { + @include message-box($notice-update); } } @@ -2494,13 +2731,17 @@ } // close #buddypress -// Without direct classes on our mesages ( 'warning' ) +// Without direct classes on our mesages ( "warning" ); // we need to use the body classes // todo: If this is class .warning is included in main BP styles remove from here .delete-group { + #buddypress { + div#message.info { + p { + @include message-box($notice-warning); } } Index: src/bp-xprofile/admin/css/admin-rtl.css =================================================================== --- src/bp-xprofile/admin/css/admin-rtl.css (revision 10712) +++ src/bp-xprofile/admin/css/admin-rtl.css (working copy) @@ -1,20 +1,28 @@ /* Profile field group main admin page */ +/* stylelint-disable + rule-nested-empty-line-before, + block-opening-brace-newline-after, + block-closing-brace-newline-before, + block-opening-brace-space-before +*/ @-o-keyframes tab-throb { - from { box-shadow: 0 0 10px #1e8cbe; } - 50% { box-shadow: 0 0 0 #1e8cbe; } - to { box-shadow: 0 0 10px #1e8cbe; } + from { box-shadow: 0 0 10px #1e8cbe; } + 50% { box-shadow: 0 0 0 #1e8cbe; } + to { box-shadow: 0 0 10px #1e8cbe; } } + @-webkit-keyframes tab-throb { - from { box-shadow: 0 0 10px #1e8cbe; } - 50% { box-shadow: 0 0 0 #1e8cbe; } - to { box-shadow: 0 0 10px #1e8cbe; } + from { box-shadow: 0 0 10px #1e8cbe; } + 50% { box-shadow: 0 0 0 #1e8cbe; } + to { box-shadow: 0 0 10px #1e8cbe; } } @-moz-keyframes tab-throb { - from { box-shadow: 0 0 10px #1e8cbe; } - 50% { box-shadow: 0 0 0 #1e8cbe; } - to { box-shadow: 0 0 10px #1e8cbe; } + from { box-shadow: 0 0 10px #1e8cbe; } + 50% { box-shadow: 0 0 0 #1e8cbe; } + to { box-shadow: 0 0 10px #1e8cbe; } } +/* stylelint-enable */ #profile-field-form { margin-top: 12px; @@ -22,198 +30,219 @@ #tabs { position: relative; - } - p.nofields { - margin: 20px 0 0; - } +} - /* Field group tabs */ - ul#field-group-tabs { - float: right; - padding: 0 15px 0 0; - margin: 0; - display: none; - } - ul#field-group-tabs li { - float: right; - margin-left: 8px; - margin-bottom: -1px; - } - ul#field-group-tabs li.ui-state-hover a.ui-tab { - color: #d54e21; - } - ul#field-group-tabs li.ui-state-acceptable:not(.ui-state-active) a.ui-tab { - -webkit-animation: tab-throb 2s infinite; - -moz-animation: tab-throb 2s infinite; - -o-animation: tab-throb 2s infinite; - animation: tab-throb 2s infinite; - } - ul#field-group-tabs li.drop-candidate.ui-state-acceptable:not(.ui-state-active) a.ui-tab { - -webkit-box-shadow: 0 0 10px green; - -moz-box-shadow: 0 0 10px green; - -o-box-shadow: 0 0 10px green; - box-shadow: 0 0 10px green; - -webkit-animation: none; - -moz-animation: none; - -o-animation: none; - animation: none; - color: #000; - } - ul#field-group-tabs li a.ui-tab { - font-size: 14px; - display: block; - margin-top: 3px; - padding: 5px 10px 6px; - border: 1px solid #e5e5e5; - background-color: #f5f5f5; - text-decoration: none; - color: #000; - outline: none; - } +p.nofields { + margin: 20px 0 0; +} - /* Selected tab */ - ul#field-group-tabs li.ui-state-active a.ui-tab { - background-color: #fff; - margin-top: 0; - padding: 7px 10px 7px; - border-bottom: 1px solid transparent; - color: #000; - } +/* Field group tabs */ +ul#field-group-tabs { + float: right; + padding: 0 15px 0 0; + margin: 0; + display: none; +} - /* Toolbar */ - .tab-toolbar { - clear: right; - background: #fff; - border-width: 1px; - border-color: #e5e5e5; - border-style: solid; - -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04); - box-shadow: 0 1px 1px rgba(0,0,0,0.04); - padding: 10px; - margin-bottom: 10px; - } +ul#field-group-tabs li { + float: right; + margin-left: 8px; + margin-bottom: -1px; +} - .bp-option a.delete, - .field-wrapper a.deletion, - .tab-toolbar a.deletion { - color: #f00; - border-bottom: 1px solid #f00; - text-decoration: none; - padding: 0; - } +ul#field-group-tabs li.ui-state-hover a.ui-tab { + color: #d54e21; +} - div.delete-button { - float: left; - line-height: 28px; - } +ul#field-group-tabs li.ui-state-acceptable:not(.ui-state-active) a.ui-tab { + -webkit-animation: tab-throb 2s infinite; + -moz-animation: tab-throb 2s infinite; + -o-animation: tab-throb 2s infinite; + animation: tab-throb 2s infinite; +} - div.field-group { - clear: right; - } +ul#field-group-tabs li.drop-candidate.ui-state-acceptable:not(.ui-state-active) a.ui-tab { + -webkit-box-shadow: 0 0 10px #0f0; + -moz-box-shadow: 0 0 10px #0f0; + -o-box-shadow: 0 0 10px #0f0; + box-shadow: 0 0 10px #0f0; + -webkit-animation: none; + -moz-animation: none; + -o-animation: none; + animation: none; + color: #000; +} - .field-group { - cursor: default; - border: 1px solid #e5e5e5; - background: #fff; - -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04); - box-shadow: 0 1px 1px rgba(0,0,0,0.04); - margin-top: 10px; - padding: 0 20px 20px; - } - .field-group .xprofile-field { - position: relative; - } - .field-group fieldset { - position: relative; - border: 1px solid #ddd; - margin: 20px 0 0; - cursor: move; - background: #fafafa; - padding: 10px 0 0 ; - } - .field-group fieldset legend { - position: absolute; - top: 10px; - right: 10px; - padding: 0; - } - fieldset.radio div div label, - fieldset.checkbox div label { - margin-left: 20px; - } +ul#field-group-tabs li a.ui-tab { + font-size: 14px; + display: block; + margin-top: 3px; + padding: 5px 10px 6px; + border: 1px solid #e5e5e5; + background-color: #f5f5f5; + text-decoration: none; + color: #000; + outline: none; +} - fieldset.clear-value { - margin-right: 10px; - } - fieldset div.field-wrapper { - padding: 25px 10px 10px; - } - .field-group div.actions { - float: none; - border-top: 1px solid #ddd; - margin: 10px 0 0; - padding-top: 10px; - } - .field-group div.actions a, - .field-group div.actions button, - .field-group div.actions input { - float: none; - } - .field-group fieldset:hover { - border-color: #999; - } - .field-group fieldset:hover div.actions { - display: block; - } +/* Selected tab */ +ul#field-group-tabs li.ui-state-active a.ui-tab { + background-color: #fff; + margin-top: 0; + padding: 7px 10px; + border-bottom: 1px solid transparent; + color: #000; +} - .bp-options-box .ui-sortable-placeholder, - #field-group-tabs .ui-sortable-placeholder, - .field-group fieldset.ui-sortable-placeholder { - border: 1px dashed #999; - background-color: #fff; - visibility: visible !important; - } +/* Toolbar */ +.tab-toolbar { + clear: right; + background: #fff; + border-width: 1px; + border-color: #e5e5e5; + border-style: solid; + -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); + padding: 10px; + margin-bottom: 10px; +} - #field-group-tabs .ui-sortable-placeholder { - background: transparent; - border-bottom: none; - margin: -1px 0 -1px 6px; - } +.bp-option a.delete, +.field-wrapper a.deletion, +.tab-toolbar a.deletion { + color: #f00; + border-bottom: 1px solid #f00; + text-decoration: none; + padding: 0; +} - ul.forTab { - list-style: none; - padding: 0; - margin: 0 1em 0 0; - } - ul.forTab li { - margin: 0 0 1em 0; - } - ul.forTab li label { - display: block; - } +div.delete-button { + float: left; + line-height: 28px; +} - ul.forTab li input { - font-size: 1.4em; - } +div.field-group { + clear: right; +} - p.success { background: green;} - p.err { - border-top: 2px solid red; - border-bottom: 2px solid red; - color: red; - padding: 5px 0; - width: 40%; - } +.field-group { + cursor: default; + border: 1px solid #e5e5e5; + background: #fff; + -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); + margin-top: 10px; + padding: 0 20px 20px; +} - span.desc, span.signup-description { - display: block; - font-size: 11px; - color: #555; - } +.field-group .xprofile-field { + position: relative; +} +.field-group fieldset { + position: relative; + border: 1px solid #ddd; + margin: 20px 0 0; + cursor: move; + background: #fafafa; + padding: 10px 0 0; +} + +.field-group fieldset legend { + position: absolute; + top: 10px; + right: 10px; + padding: 0; +} + +fieldset.radio div div label, +fieldset.checkbox div label { + margin-left: 20px; +} + +fieldset.clear-value { + margin-right: 10px; +} + +fieldset div.field-wrapper { + padding: 25px 10px 10px; +} + +.field-group div.actions { + float: none; + border-top: 1px solid #ddd; + margin: 10px 0 0; + padding-top: 10px; +} + +.field-group div.actions a, +.field-group div.actions button, +.field-group div.actions input { + float: none; +} + +.field-group fieldset:hover { + border-color: #999; +} + +.field-group fieldset:hover div.actions { + display: block; +} + +.bp-options-box .ui-sortable-placeholder, +#field-group-tabs .ui-sortable-placeholder, +.field-group fieldset.ui-sortable-placeholder { + border: 1px dashed #999; + background-color: #fff; + visibility: visible !important; +} + +#field-group-tabs .ui-sortable-placeholder { + background: transparent; + border-bottom: none; + margin: -1px 0 -1px 6px; +} + +ul.forTab { + list-style: none; + padding: 0; + margin: 0 1em 0 0; +} + +ul.forTab li { + margin: 0 0 1em; +} + +ul.forTab li label { + display: block; +} + +ul.forTab li input { + font-size: 1.4em; +} + +p.success { + background: #0f0; +} + +p.err { + border-top: 2px solid #f00; + border-bottom: 2px solid #f00; + color: #f00; + padding: 5px 0; + width: 40%; +} + +span.desc, +span.signup-description { + display: block; + font-size: 11px; + color: #555; +} + ul.multi-checkbox { margin: 0 0 0 5px; - padding: .5em .9em; + padding: 0.5em 0.9em; height: 10em; overflow: auto; list-style: none; @@ -238,7 +267,7 @@ } .bp-option-icon { - font: normal 20px/1 'dashicons'; + font: normal 20px/1 "dashicons"; speak: none; display: inline-block; padding: 0 2px 0 0; @@ -271,6 +300,7 @@ #bp-xprofile-add-field-group .titlewrap { margin-bottom: 20px; } + #bp-xprofile-add-field #post-body-content { margin-bottom: 0; } Index: src/bp-xprofile/admin/css/admin.css =================================================================== --- src/bp-xprofile/admin/css/admin.css (revision 10712) +++ src/bp-xprofile/admin/css/admin.css (working copy) @@ -1,20 +1,28 @@ /* Profile field group main admin page */ +/* stylelint-disable + rule-nested-empty-line-before, + block-opening-brace-newline-after, + block-closing-brace-newline-before, + block-opening-brace-space-before +*/ @-o-keyframes tab-throb { - from { box-shadow: 0 0 10px #1e8cbe; } - 50% { box-shadow: 0 0 0 #1e8cbe; } - to { box-shadow: 0 0 10px #1e8cbe; } + from { box-shadow: 0 0 10px #1e8cbe; } + 50% { box-shadow: 0 0 0 #1e8cbe; } + to { box-shadow: 0 0 10px #1e8cbe; } } + @-webkit-keyframes tab-throb { - from { box-shadow: 0 0 10px #1e8cbe; } - 50% { box-shadow: 0 0 0 #1e8cbe; } - to { box-shadow: 0 0 10px #1e8cbe; } + from { box-shadow: 0 0 10px #1e8cbe; } + 50% { box-shadow: 0 0 0 #1e8cbe; } + to { box-shadow: 0 0 10px #1e8cbe; } } @-moz-keyframes tab-throb { - from { box-shadow: 0 0 10px #1e8cbe; } - 50% { box-shadow: 0 0 0 #1e8cbe; } - to { box-shadow: 0 0 10px #1e8cbe; } + from { box-shadow: 0 0 10px #1e8cbe; } + 50% { box-shadow: 0 0 0 #1e8cbe; } + to { box-shadow: 0 0 10px #1e8cbe; } } +/* stylelint-enable */ #profile-field-form { margin-top: 12px; @@ -22,198 +30,219 @@ #tabs { position: relative; - } - p.nofields { - margin: 20px 0 0; - } +} - /* Field group tabs */ - ul#field-group-tabs { - float: left; - padding: 0 0 0 15px; - margin: 0; - display: none; - } - ul#field-group-tabs li { - float: left; - margin-right: 8px; - margin-bottom: -1px; - } - ul#field-group-tabs li.ui-state-hover a.ui-tab { - color: #d54e21; - } - ul#field-group-tabs li.ui-state-acceptable:not(.ui-state-active) a.ui-tab { - -webkit-animation: tab-throb 2s infinite; - -moz-animation: tab-throb 2s infinite; - -o-animation: tab-throb 2s infinite; - animation: tab-throb 2s infinite; - } - ul#field-group-tabs li.drop-candidate.ui-state-acceptable:not(.ui-state-active) a.ui-tab { - -webkit-box-shadow: 0 0 10px green; - -moz-box-shadow: 0 0 10px green; - -o-box-shadow: 0 0 10px green; - box-shadow: 0 0 10px green; - -webkit-animation: none; - -moz-animation: none; - -o-animation: none; - animation: none; - color: #000; - } - ul#field-group-tabs li a.ui-tab { - font-size: 14px; - display: block; - margin-top: 3px; - padding: 5px 10px 6px; - border: 1px solid #e5e5e5; - background-color: #f5f5f5; - text-decoration: none; - color: #000; - outline: none; - } +p.nofields { + margin: 20px 0 0; +} - /* Selected tab */ - ul#field-group-tabs li.ui-state-active a.ui-tab { - background-color: #fff; - margin-top: 0; - padding: 7px 10px 7px; - border-bottom: 1px solid transparent; - color: #000; - } +/* Field group tabs */ +ul#field-group-tabs { + float: left; + padding: 0 0 0 15px; + margin: 0; + display: none; +} - /* Toolbar */ - .tab-toolbar { - clear: left; - background: #fff; - border-width: 1px; - border-color: #e5e5e5; - border-style: solid; - -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04); - box-shadow: 0 1px 1px rgba(0,0,0,0.04); - padding: 10px; - margin-bottom: 10px; - } +ul#field-group-tabs li { + float: left; + margin-right: 8px; + margin-bottom: -1px; +} - .bp-option a.delete, - .field-wrapper a.deletion, - .tab-toolbar a.deletion { - color: #f00; - border-bottom: 1px solid #f00; - text-decoration: none; - padding: 0; - } +ul#field-group-tabs li.ui-state-hover a.ui-tab { + color: #d54e21; +} - div.delete-button { - float: right; - line-height: 28px; - } +ul#field-group-tabs li.ui-state-acceptable:not(.ui-state-active) a.ui-tab { + -webkit-animation: tab-throb 2s infinite; + -moz-animation: tab-throb 2s infinite; + -o-animation: tab-throb 2s infinite; + animation: tab-throb 2s infinite; +} - div.field-group { - clear: left; - } +ul#field-group-tabs li.drop-candidate.ui-state-acceptable:not(.ui-state-active) a.ui-tab { + -webkit-box-shadow: 0 0 10px #0f0; + -moz-box-shadow: 0 0 10px #0f0; + -o-box-shadow: 0 0 10px #0f0; + box-shadow: 0 0 10px #0f0; + -webkit-animation: none; + -moz-animation: none; + -o-animation: none; + animation: none; + color: #000; +} - .field-group { - cursor: default; - border: 1px solid #e5e5e5; - background: #fff; - -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04); - box-shadow: 0 1px 1px rgba(0,0,0,0.04); - margin-top: 10px; - padding: 0 20px 20px; - } - .field-group .xprofile-field { - position: relative; - } - .field-group fieldset { - position: relative; - border: 1px solid #ddd; - margin: 20px 0 0; - cursor: move; - background: #fafafa; - padding: 10px 0 0 ; - } - .field-group fieldset legend { - position: absolute; - top: 10px; - left: 10px; - padding: 0; - } - fieldset.radio div div label, - fieldset.checkbox div label { - margin-right: 20px; - } +ul#field-group-tabs li a.ui-tab { + font-size: 14px; + display: block; + margin-top: 3px; + padding: 5px 10px 6px; + border: 1px solid #e5e5e5; + background-color: #f5f5f5; + text-decoration: none; + color: #000; + outline: none; +} - fieldset.clear-value { - margin-left: 10px; - } - fieldset div.field-wrapper { - padding: 25px 10px 10px; - } - .field-group div.actions { - float: none; - border-top: 1px solid #ddd; - margin: 10px 0 0; - padding-top: 10px; - } - .field-group div.actions a, - .field-group div.actions button, - .field-group div.actions input { - float: none; - } - .field-group fieldset:hover { - border-color: #999; - } - .field-group fieldset:hover div.actions { - display: block; - } +/* Selected tab */ +ul#field-group-tabs li.ui-state-active a.ui-tab { + background-color: #fff; + margin-top: 0; + padding: 7px 10px; + border-bottom: 1px solid transparent; + color: #000; +} - .bp-options-box .ui-sortable-placeholder, - #field-group-tabs .ui-sortable-placeholder, - .field-group fieldset.ui-sortable-placeholder { - border: 1px dashed #999; - background-color: #fff; - visibility: visible !important; - } +/* Toolbar */ +.tab-toolbar { + clear: left; + background: #fff; + border-width: 1px; + border-color: #e5e5e5; + border-style: solid; + -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); + padding: 10px; + margin-bottom: 10px; +} - #field-group-tabs .ui-sortable-placeholder { - background: transparent; - border-bottom: none; - margin: -1px 6px -1px 0; - } +.bp-option a.delete, +.field-wrapper a.deletion, +.tab-toolbar a.deletion { + color: #f00; + border-bottom: 1px solid #f00; + text-decoration: none; + padding: 0; +} - ul.forTab { - list-style: none; - padding: 0; - margin: 0 0 0 1em; - } - ul.forTab li { - margin: 0 0 1em 0; - } - ul.forTab li label { - display: block; - } +div.delete-button { + float: right; + line-height: 28px; +} - ul.forTab li input { - font-size: 1.4em; - } +div.field-group { + clear: left; +} - p.success { background: green;} - p.err { - border-top: 2px solid red; - border-bottom: 2px solid red; - color: red; - padding: 5px 0; - width: 40%; - } +.field-group { + cursor: default; + border: 1px solid #e5e5e5; + background: #fff; + -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); + margin-top: 10px; + padding: 0 20px 20px; +} - span.desc, span.signup-description { - display: block; - font-size: 11px; - color: #555; - } +.field-group .xprofile-field { + position: relative; +} +.field-group fieldset { + position: relative; + border: 1px solid #ddd; + margin: 20px 0 0; + cursor: move; + background: #fafafa; + padding: 10px 0 0; +} + +.field-group fieldset legend { + position: absolute; + top: 10px; + left: 10px; + padding: 0; +} + +fieldset.radio div div label, +fieldset.checkbox div label { + margin-right: 20px; +} + +fieldset.clear-value { + margin-left: 10px; +} + +fieldset div.field-wrapper { + padding: 25px 10px 10px; +} + +.field-group div.actions { + float: none; + border-top: 1px solid #ddd; + margin: 10px 0 0; + padding-top: 10px; +} + +.field-group div.actions a, +.field-group div.actions button, +.field-group div.actions input { + float: none; +} + +.field-group fieldset:hover { + border-color: #999; +} + +.field-group fieldset:hover div.actions { + display: block; +} + +.bp-options-box .ui-sortable-placeholder, +#field-group-tabs .ui-sortable-placeholder, +.field-group fieldset.ui-sortable-placeholder { + border: 1px dashed #999; + background-color: #fff; + visibility: visible !important; +} + +#field-group-tabs .ui-sortable-placeholder { + background: transparent; + border-bottom: none; + margin: -1px 6px -1px 0; +} + +ul.forTab { + list-style: none; + padding: 0; + margin: 0 0 0 1em; +} + +ul.forTab li { + margin: 0 0 1em; +} + +ul.forTab li label { + display: block; +} + +ul.forTab li input { + font-size: 1.4em; +} + +p.success { + background: #0f0; +} + +p.err { + border-top: 2px solid #f00; + border-bottom: 2px solid #f00; + color: #f00; + padding: 5px 0; + width: 40%; +} + +span.desc, +span.signup-description { + display: block; + font-size: 11px; + color: #555; +} + ul.multi-checkbox { margin: 0 5px 0 0; - padding: .5em .9em; + padding: 0.5em 0.9em; height: 10em; overflow: auto; list-style: none; @@ -238,7 +267,7 @@ } .bp-option-icon { - font: normal 20px/1 'dashicons'; + font: normal 20px/1 "dashicons"; speak: none; display: inline-block; padding: 0 0 0 2px; @@ -271,6 +300,7 @@ #bp-xprofile-add-field-group .titlewrap { margin-bottom: 20px; } + #bp-xprofile-add-field #post-body-content { margin-bottom: 0; }