tec3/five-for-the-future
tec3/five-for-the-future
1
0
Fork 0
mirror of https://github.com/WordPress/five-for-the-future.git synced 2025-04-21 02:23:43 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity
five-for-the-future/themes/wporg-5ftf/css/components/_team-badges.scss

233 lines
5.6 KiB
SCSS
Raw Normal View History

Theme: Single pledge view (#43) * Theme: Create template part for single pledge * Plugin: Add functions for handling xprofile data * Plugin: Add helper function for getting contributor user objects * Theme: Display aggregated contributor data on single pledge view * Theme: Add functions, markup, and styles to show team badges * Theme: Add badge for Test team * Theme: Add tentative URL for report a pledge link * Theme: Add support for post thumbnails * Theme: Add org logo to single pledge view * Theme: Update `$content_width` to 960 This matches the width of the content in the global header and the About page. * Move pledge template to a file used by the template heirarchy * Clean up some PHPCS errors * Move pledge structure out to just the list items * Create file for single pledge styles * style badge grid into a grid. * Add a custom image size for the logo * Update styles * Un-hide pledges with no confirmed contributors * Fix content width
2019-10-28 19:38:49 +02:00
/**
* Copied from the profiles.wordpress.org theme stylesheet.
*/
.team-grid {
display: flex;
flex-wrap: wrap;
margin: 0;
list-style: none;
Single Pledge: Add intro message to pledges for clarity.
2021-04-30 22:55:55 +03:00
Theme: Single pledge view (#43) * Theme: Create template part for single pledge * Plugin: Add functions for handling xprofile data * Plugin: Add helper function for getting contributor user objects * Theme: Display aggregated contributor data on single pledge view * Theme: Add functions, markup, and styles to show team badges * Theme: Add badge for Test team * Theme: Add tentative URL for report a pledge link * Theme: Add support for post thumbnails * Theme: Add org logo to single pledge view * Theme: Update `$content_width` to 960 This matches the width of the content in the global header and the About page. * Move pledge template to a file used by the template heirarchy * Clean up some PHPCS errors * Move pledge structure out to just the list items * Create file for single pledge styles * style badge grid into a grid. * Add a custom image size for the logo * Update styles * Un-hide pledges with no confirmed contributors * Fix content width
2019-10-28 19:38:49 +02:00
li {
display: flex;
align-items: center;
Tweak CSS to preserve shape of circle (#231) Previously, longer team names would cause it to be squished into more of an oval.
2023-10-19 02:45:42 +03:00
gap: 5px;
Single Pledge: Add intro message to pledges for clarity.
2021-04-30 22:55:55 +03:00
margin: 0 1em .5em 0;
width: 100%;
Theme: Single pledge view (#43) * Theme: Create template part for single pledge * Plugin: Add functions for handling xprofile data * Plugin: Add helper function for getting contributor user objects * Theme: Display aggregated contributor data on single pledge view * Theme: Add functions, markup, and styles to show team badges * Theme: Add badge for Test team * Theme: Add tentative URL for report a pledge link * Theme: Add support for post thumbnails * Theme: Add org logo to single pledge view * Theme: Update `$content_width` to 960 This matches the width of the content in the global header and the About page. * Move pledge template to a file used by the template heirarchy * Clean up some PHPCS errors * Move pledge structure out to just the list items * Create file for single pledge styles * style badge grid into a grid. * Add a custom image size for the logo * Update styles * Un-hide pledges with no confirmed contributors * Fix content width
2019-10-28 19:38:49 +02:00
}
div.dashicons {
margin-right: 0.5em;
&:before {
position: relative;
top: 2px;
font-size: 24px;
}
}
Single Pledge: Add intro message to pledges for clarity.
2021-04-30 22:55:55 +03:00
@include breakpoint( 30em ) {
Theme: Single pledge view (#43) * Theme: Create template part for single pledge * Plugin: Add functions for handling xprofile data * Plugin: Add helper function for getting contributor user objects * Theme: Display aggregated contributor data on single pledge view * Theme: Add functions, markup, and styles to show team badges * Theme: Add badge for Test team * Theme: Add tentative URL for report a pledge link * Theme: Add support for post thumbnails * Theme: Add org logo to single pledge view * Theme: Update `$content_width` to 960 This matches the width of the content in the global header and the About page. * Move pledge template to a file used by the template heirarchy * Clean up some PHPCS errors * Move pledge structure out to just the list items * Create file for single pledge styles * style badge grid into a grid. * Add a custom image size for the logo * Update styles * Un-hide pledges with no confirmed contributors * Fix content width
2019-10-28 19:38:49 +02:00
li {
Single Pledge: Add intro message to pledges for clarity.
2021-04-30 22:55:55 +03:00
width: calc( 50% - 1em);
min-width: 10em;
Theme: Single pledge view (#43) * Theme: Create template part for single pledge * Plugin: Add functions for handling xprofile data * Plugin: Add helper function for getting contributor user objects * Theme: Display aggregated contributor data on single pledge view * Theme: Add functions, markup, and styles to show team badges * Theme: Add badge for Test team * Theme: Add tentative URL for report a pledge link * Theme: Add support for post thumbnails * Theme: Add org logo to single pledge view * Theme: Update `$content_width` to 960 This matches the width of the content in the global header and the About page. * Move pledge template to a file used by the template heirarchy * Clean up some PHPCS errors * Move pledge structure out to just the list items * Create file for single pledge styles * style badge grid into a grid. * Add a custom image size for the logo * Update styles * Un-hide pledges with no confirmed contributors * Fix content width
2019-10-28 19:38:49 +02:00
}
}
}
.badge {
margin: 4px;
Tweak CSS to preserve shape of circle (#231) Previously, longer team names would cause it to be squished into more of an oval.
2023-10-19 02:45:42 +03:00
min-width: 32px;
min-height: 32px;
Theme: Single pledge view (#43) * Theme: Create template part for single pledge * Plugin: Add functions for handling xprofile data * Plugin: Add helper function for getting contributor user objects * Theme: Display aggregated contributor data on single pledge view * Theme: Add functions, markup, and styles to show team badges * Theme: Add badge for Test team * Theme: Add tentative URL for report a pledge link * Theme: Add support for post thumbnails * Theme: Add org logo to single pledge view * Theme: Update `$content_width` to 960 This matches the width of the content in the global header and the About page. * Move pledge template to a file used by the template heirarchy * Clean up some PHPCS errors * Move pledge structure out to just the list items * Create file for single pledge styles * style badge grid into a grid. * Add a custom image size for the logo * Update styles * Un-hide pledges with no confirmed contributors * Fix content width
2019-10-28 19:38:49 +02:00
width: 32px;
height: 32px;
border: 2px solid white;
border-radius: 50%;
box-sizing: border-box;
position: relative;
}
.badge-themes-reviewer {
background: rgba(78, 50, 136, 0.25);
box-shadow: 0 0 0 4px rgb(78, 50, 136);
}
.badge-themes-reviewer:before {
color: rgb(78, 50, 136);
}
.badge-plugins-reviewer {
background: rgba(240, 103, 35, 0.25);
box-shadow: 0 0 0 4px rgb(240, 103, 35);
}
.badge-plugins-reviewer:before {
color: rgb(240, 103, 35);
}
.badge-community {
background: rgba(17, 121, 157, 0.25);
box-shadow: 0 0 0 4px rgb(17, 121, 157);
}
.badge-community:before {
color: rgb(17, 121, 157);
}
.badge-meta {
background: rgba(174, 173, 173, 0.25);
box-shadow: 0 0 0 4px rgb(174, 173, 173);
}
.badge-meta:before {
color: rgb(174, 173, 173);
}
.badge-code-committer {
background: rgba(205, 0, 0, 0.25);
box-shadow: 0 0 0 4px rgb(205, 0, 0);
}
.badge-code-committer:before {
color: rgb(205, 0, 0);
}
.badge-support {
background: rgba(51, 180, 206, 0.25);
box-shadow: 0 0 0 4px rgb(51, 180, 206);
}
.badge-support:before {
color: rgb(51, 180, 206);
}
.badge-wordpress-tv {
background: rgba(115, 173, 48, 0.25);
box-shadow: 0 0 0 4px rgb(115, 173, 48);
}
.badge-wordpress-tv:before {
color: rgb(115, 173, 48);
}
.badge-accessibility {
background: rgba(17, 121, 157, 0.25);
box-shadow: 0 0 0 4px rgb(17, 121, 157);
}
.badge-accessibility:before {
color: rgb(17, 121, 157);
}
.badge-documentation {
background: rgba(59, 114, 54, 0.25);
box-shadow: 0 0 0 4px rgb(59, 114, 54);
}
.badge-documentation:before {
color: rgb(59, 114, 54);
}
.badge-mobile {
background: rgba(251, 161, 108, 0.25);
box-shadow: 0 0 0 4px rgb(251, 161, 108);
}
.badge-mobile:before {
color: rgb(251, 161, 108);
}
Theme: Add support for Openverse team, fix Themes Team badge This syncs `r17406-dotorg` to the canonical Git repo.
2022-03-18 00:13:24 +02:00
.badge-openverse {
background: rgba(103, 74, 255, 0.25);
box-shadow: 0 0 0 4px rgb(103, 74, 255);
}
.badge-openverse:before {
color: rgb(103, 74, 255);
}
Theme: Add temporary badge for Photos to fill empty icon. There isn't a badge for the Photos team yet -- see https://meta.trac.wordpress.org/ticket/5981 -- so for now I just used the `camera` dashicon that Luke Carbis suggested in https://meta.trac.wordpress.org/ticket/5988. We can update it whenever the final badge icon/colors are decided. Fixes #171
2022-03-29 01:12:45 +03:00
.badge-photos {
background: rgba(103, 74, 255, 0.25);
box-shadow: 0 0 0 4px rgb(103, 74, 255);
}
.badge-photos:before {
color: rgb(103, 74, 255);
}
Theme: Single pledge view (#43) * Theme: Create template part for single pledge * Plugin: Add functions for handling xprofile data * Plugin: Add helper function for getting contributor user objects * Theme: Display aggregated contributor data on single pledge view * Theme: Add functions, markup, and styles to show team badges * Theme: Add badge for Test team * Theme: Add tentative URL for report a pledge link * Theme: Add support for post thumbnails * Theme: Add org logo to single pledge view * Theme: Update `$content_width` to 960 This matches the width of the content in the global header and the About page. * Move pledge template to a file used by the template heirarchy * Clean up some PHPCS errors * Move pledge structure out to just the list items * Create file for single pledge styles * style badge grid into a grid. * Add a custom image size for the logo * Update styles * Un-hide pledges with no confirmed contributors * Fix content width
2019-10-28 19:38:49 +02:00
.badge-training{
background: rgba(233, 192, 45, 0.25);
box-shadow: 0 0 0 4px rgb(233, 192, 45);
}
.badge-training:before {
color: rgb(233, 192, 45);
}
.badge-translation-editor {
background: rgba(195, 34, 131, 0.25);
box-shadow: 0 0 0 4px rgb(195, 34, 131);
}
.badge-translation-editor:before {
color: rgb(195, 34, 131);
}
.badge-design {
background: rgba(238, 194, 106, 0.25);
box-shadow: 0 0 0 4px rgb(238, 194, 106);
}
.badge-design:before {
color: rgb(238, 194, 106);
}
.badge-marketing {
background: rgba(71, 190, 167, 0.25);
box-shadow: 0 0 0 4px rgb(71, 190, 167);
}
.badge-marketing:before {
color: rgb(71, 190, 167);
}
.badge-wp-cli {
background: rgba(66, 66, 66, 0.25);
box-shadow: 0 0 0 4px rgb(66, 66, 66);
}
.badge-wp-cli:before {
color: rgb(66, 66, 66);
}
.badge-hosting {
background: rgba(83, 88, 166, 0.25);
box-shadow: 0 0 0 4px rgb(83, 88, 166);
}
.badge-hosting:before {
color: rgb(83, 88, 166);
}
.badge-tide {
background: rgb(197, 201, 255);
box-shadow: 0 0 0 4px rgb(21, 38, 255);
}
.badge-tide:before {
color: rgb(21, 38, 255);
}
.badge-security-team {
background: rgba(0, 204, 58, 0.25);
box-shadow: 0 0 0 4px rgb(0, 204, 58);
}
.badge-security-team:before {
color: rgb(0, 204, 58);
}
.badge-test-team {
background: rgba(136, 79, 174, 0.25);
box-shadow: 0 0 0 4px rgb(136, 79, 174);
}
.badge-test-team:before {
color: rgb(136, 79, 174);
}
Add custom CSS for sustainability team badge. (#261) Fixes #258.
2024-06-26 15:34:00 +03:00
.badge-sustainability-team {
background: rgba(23, 127, 106, 0.25);
box-shadow: 0 0 0 4px rgb(23, 127, 106);
}
.badge-sustainability-team:before {
color: rgb(23, 127, 106);
}
Badges: add core performance team badge. (#269) Fixes #230.
2024-07-11 14:07:14 +03:00
.badge-performance-contributor {
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg version='1.1' viewBox='0 0 94 94' xmlns='http://www.w3.org/2000/svg' xmlns:cc='http://creativecommons.org/ns%23' xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23'%3E%3Cdefs%3E%3Cstyle%3Epath%7Bfill:%230073aa;%7D%3C/style%3E%3C/defs%3E%3Cpath d='m39.21 20.85h-11.69c-1.38 0-2.5 1.12-2.5 2.5v11.69c0 1.38 1.12 2.5 2.5 2.5h11.69c1.38 0 2.5-1.12 2.5-2.5v-11.69c0-1.38-1.12-2.5-2.5-2.5z'/%3E%3Cpath d='M41.71,58.96v11.69c0,.66-.26,1.3-.73,1.77-.47,.47-1.11,.73-1.77,.73h-11.69c-.66,0-1.3-.26-1.77-.73-.47-.47-.73-1.11-.73-1.77v-21.37c0-.4,.1-.79,.28-1.14,.03-.06,.07-.12,.1-.18,.21-.33,.49-.61,.83-.82l11.67-7.04c.44-.27,.95-.39,1.47-.36,.51,.03,1,.23,1.4,.55,.26,.21,.47,.46,.63,.75,.16,.29,.26,.61,.29,.94,.02,.11,.02,.22,.02,.34v5.38s0,.07,0,.11v11.08s0,.04,0,.07Z'/%3E%3Cpath d='M68.98,30.23v16.84c0,.33-.06,.65-.19,.96-.13,.3-.31,.58-.54,.81l-6.88,6.88c-.23,.23-.51,.42-.81,.54-.3,.13-.63,.19-.96,.19h-13.15c-.66,0-1.3-.26-1.77-.73-.47-.47-.73-1.11-.73-1.77v-11.69c0-.66,.26-1.3,.73-1.77,.47-.47,1.11-.73,1.77-.73h13.08s1.11,0,1.11-1.11-1.11-1.11-1.11-1.11h-13.08c-.66,0-1.3-.26-1.77-.73s-.73-1.11-.73-1.77v-11.69c0-.66,.26-1.3,.73-1.77,.47-.47,1.11-.73,1.77-.73h13.15c.33,0,.65,.06,.96,.19,.3,.13,.58,.31,.81,.54l6.88,6.88c.23,.23,.42,.51,.54,.81,.13,.3,.19,.63,.19,.96Z'/%3E%3C/svg%3E%0A");
background-position: center;
background-repeat: no-repeat;
background-color: rgba(0, 115, 170, 0.25);
box-shadow: 0 0 0 4px rgb(0, 115, 170);
}
Reference in a new issue Copy permalink