Working on header section styling

buddyboss · Jan 14, 2025 · fdb0e1b · fdb0e1b
1 parent 5d5e37f
commit fdb0e1b
Show file tree

Hide file tree

Showing 9 changed files with 451 additions and 4 deletions.
diff --git a/src/bp-core/classes/class-bb-readylaunch.php b/src/bp-core/classes/class-bb-readylaunch.php
@@ -84,6 +84,9 @@ public function __construct() {
 
 				add_action( 'wp_enqueue_scripts', array( $this, 'bb_enqueue_scripts' ) );
 
+				// dequeue theme styles
+				add_action( 'wp_enqueue_scripts', array( $this, 'bb_dequeue_styles' ), 99999 );
+
 				add_action( 'wp_ajax_bb_fetch_header_messages', array( $this, 'bb_fetch_header_messages' ) );
 				add_action( 'wp_ajax_bb_fetch_header_notifications', array( $this, 'bb_fetch_header_notifications' ) );
 			}
@@ -396,7 +399,6 @@ public function bb_enqueue_scripts() {
 
 			wp_enqueue_style( 'bb-readylaunch-style-main', buddypress()->plugin_url . "bp-templates/bp-nouveau/readylaunch/assets/css/main{$min}.css", array(), bp_get_version() );
 
-			//enque styles
 			wp_localize_script(
 				'bb-readylaunch-front',
 				'bbReadyLaunchFront',
@@ -407,6 +409,11 @@ public function bb_enqueue_scripts() {
 			);
 		}
 
+		public function bb_dequeue_styles() {
+			wp_dequeue_style( 'buddyboss-theme-css-css' );
+			wp_dequeue_style( 'buddyboss-theme-template-css' );
+		}
+
 		/**
 		 * Fetch header messages.
 		 *

diff --git a/src/bp-templates/bp-nouveau/readylaunch/assets/css/activity-rtl.min.css b/src/bp-templates/bp-nouveau/readylaunch/assets/css/activity-rtl.min.css
diff --git a/src/bp-templates/bp-nouveau/readylaunch/assets/css/main-rtl.css b/src/bp-templates/bp-nouveau/readylaunch/assets/css/main-rtl.css
@@ -14,6 +14,7 @@
   --bbrl-background-brand-primary-hover-color: #4937f4;
   --bbrl-background-brand-secondary-color: #dde4ff;
   --bbrl-background-brand-secondary-hover-color: #c2cdff;
+  --bbrl-background-brand-disabled-color: #767eff;
   --bbrl-background-positive-primary-color: #14ae5c;
   --bbrl-background-positive-primary-hover-color: #009951;
   --bbrl-background-positive-secondary-color: #ebffee;
@@ -30,13 +31,17 @@
   --bbrl-border-secondary-color: #e7e7e7;
   --bbrl-border-tertiary-color: #dbdbdb;
   --bbrl-border-disabled-color: #f3f3f3;
+  --bbrl-border-quinery-color: #6d6d6e;
+  --bbrl-border-brand-primary-color: #0300c3;
+  --bbrl-border-brand-secondary-color: #4946fe;
   --bbrl-border-positive-primary-color: #02542d;
   --bbrl-border-positive-secondary-color: #14ae5c;
   --bbrl-border-warning-primary-color: #522504;
   --bbrl-border-warning-secondary-color: #e8b931;
   --bbrl-border-danger-primary-color: #900b09;
   --bbrl-border-danger-secondary-color: #ec221f;
   --bbrl-text-color: #242425;
+  --bbrl-text-white-color: #fff;
   --bbrl-text-secondary-color: #555556;
   --bbrl-text-tertiary-color: #858586;
   --bbrl-text-disabled-color: #b6b6b6;
@@ -373,3 +378,195 @@
 <button class="ellipsis-button ellipsis-button--small ellipsis-button--disabled" disabled>...</button>
 
 */
+.bbrl-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1rem;
+  text-align: center;
+  cursor: pointer;
+  border-radius: var(--bbrl-radius-sm);
+  padding: var(--bbrl-space-100) var(--bbrl-space-200);
+  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+}
+
+.bbrl-button.bbrl-button--small {
+  padding: 4px var(--bbrl-space-100);
+  font-size: 0.875rem;
+}
+
+.bbrl-button.bbrl-button--brandFill {
+  background-color: var(--bbrl-background-brand-primary-color);
+  color: var(--bbrl-text-white-color);
+  border: 1px solid var(--bbrl-background-brand-primary-color);
+}
+
+.bbrl-button.bbrl-button--brandFill:hover {
+  background-color: var(--bbrl-background-brand-primary-hover-color);
+}
+
+.bbrl-button.bbrl-button--brandFill:focus-within {
+  outline: 2px solid var(--bbrl-border-brand-primary-color);
+}
+
+.bbrl-button.bbrl-button--brandFill:disabled {
+  background-color: var(--bbrl-background-brand-disabled-color);
+  cursor: not-allowed;
+}
+
+.bbrl-button.bbrl-button--brandOutline {
+  background-color: transparent;
+  color: var(--bbrl-text-brand-primary-color);
+  border: 1px solid var(--bbrl-text-brand-primary-color);
+}
+
+.bbrl-button.bbrl-button--brandOutline:hover {
+  border-color: var(--bbrl-background-brand-primary-color);
+}
+
+.bbrl-button.bbrl-button--brandOutline:focus {
+  outline: 2px solid var(--bbrl-border-brand-primary-color);
+}
+
+.bbrl-button.bbrl-button--brandOutline:disabled {
+  border-color: var(--bbrl-background-brand-disabled-color);
+  color: var(--bbrl-background-brand-disabled-color);
+  cursor: not-allowed;
+}
+
+.bbrl-button.bbrl-button--secondaryFill {
+  background-color: var(--bbrl-background-tertiary-color);
+  color: var(--bbrl-text-color);
+  border: 1px solid transparent;
+}
+
+.bbrl-button.bbrl-button--secondaryFill:hover {
+  background-color: var(--bbrl-background-tertiary-hover-color);
+}
+
+.bbrl-button.bbrl-button--secondaryFill:focus {
+  outline: 2px solid var(--bbrl-border-quinery-color);
+}
+
+.bbrl-button.bbrl-button--secondaryFill:disabled {
+  background-color: var(--bbrl-background-tertiary-color);
+  color: var(--bbrl-text-disabled-color);
+  cursor: not-allowed;
+}
+
+.bbrl-button.bbrl-button--secondaryOutline {
+  background-color: transparent;
+  color: var(--bbrl-text-color);
+  border: 1px solid var(--bbrl-border-tertiary-color);
+}
+
+.bbrl-button.bbrl-button--secondaryOutline:hover {
+  background-color: var(--bbrl-background-secondary-color);
+}
+
+.bbrl-button.bbrl-button--secondaryOutline:focus {
+  outline: 2px solid var(--bbrl-border-quinery-color);
+}
+
+.bbrl-button.bbrl-button--secondaryOutline:disabled {
+  border-color: var(--bbrl-border-tertiary-color);
+  color: var(--bbrl-text-disabled-color);
+  cursor: not-allowed;
+}
+
+.bbrl-button.bbrl-button--dangerFill {
+  background-color: var(--bbrl-background-danger-primary-color);
+  color: var(--bbrl-text-white-color);
+  border: 1px solid transparent;
+}
+
+.bbrl-button.bbrl-button--dangerFill:hover {
+  background-color: var(--bbrl-background-danger-primary-hover-color);
+}
+
+.bbrl-button.bbrl-button--dangerFill:focus {
+  outline: 2px solid var(--bbrl-border-danger-primary-color);
+}
+
+.bbrl-button.bbrl-button--dangerFill:disabled {
+  background-color: var(--bbrl-background-danger-secondary-hover-color);
+  cursor: not-allowed;
+}
+
+.bbrl-button.bbrl-button--tertiaryText {
+  background-color: transparent;
+  color: var(--bbrl-text-color);
+  border: none;
+}
+
+.bbrl-button.bbrl-button--tertiaryText:hover {
+  background-color: var(--bbrl-background-secondary-hover-color);
+}
+
+.bbrl-button.bbrl-button--tertiaryText:focus {
+  outline: 2px solid var(--bbrl-border-quinery-color);
+}
+
+.bbrl-button.bbrl-button--tertiaryText:disabled {
+  color: var(--bbrl-text-disabled-color);
+  cursor: not-allowed;
+}
+
+.bbrl-button.bbrl-button--tertiaryLink {
+  background-color: transparent;
+  color: var(--bbrl-text-brand-primary-color);
+  border: none;
+  border-radius: 0;
+  border-bottom: 1px solid transparent;
+}
+
+.bbrl-button.bbrl-button--tertiaryLink:hover {
+  border-bottom-color: var(--bbrl-link-primary-hover-color);
+}
+
+.bbrl-button.bbrl-button--tertiaryLink:disabled {
+  color: var(--bbrl-background-brand-disabled-color);
+  border-bottom-color: transparent;
+  cursor: not-allowed;
+}
+
+.bbrl-header {
+  background-color: var(--bbrl-background-color);
+  border-bottom: 1px solid var(--bbrl-border-tertiary-color);
+  padding: var(--bbrl-space-200) var(--bbrl-space-400);
+}
+
+.bb-readylaunch-menu {
+  list-style: none;
+  margin: 0;
+  display: flex;
+  align-items: center;
+}
+
+.bb-readylaunch-menu li a {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1rem;
+  text-align: center;
+  cursor: pointer;
+  border-radius: var(--bbrl-radius-sm);
+  padding: var(--bbrl-space-100) var(--bbrl-space-200);
+  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+  background-color: transparent;
+  color: var(--bbrl-text-color);
+  border: none;
+}
+
+.bb-readylaunch-menu li a:hover {
+  background-color: var(--bbrl-background-secondary-hover-color);
+}
+
+.bb-readylaunch-menu li a:focus {
+  outline: 2px solid var(--bbrl-border-quinery-color);
+}
+
+.bb-readylaunch-menu li a:disabled {
+  color: var(--bbrl-text-disabled-color);
+  cursor: not-allowed;
+}
diff --git a/src/bp-templates/bp-nouveau/readylaunch/assets/css/main-rtl.min.css b/src/bp-templates/bp-nouveau/readylaunch/assets/css/main-rtl.min.css