feat: Add Chrome Network Monitor extension with popup UI and request handling
- Implemented popup.html for user interface with search functionality and request display. - Developed popup.js to manage search items, matched requests, and clipboard operations. - Created mergeConflictManager.js for automated git operations in specified repositories. - Added projects.txt to maintain a list of relevant projects. - Introduced pushReleaseBranches.js for managing release branches across multiple projects. - Developed releasePrepper.js to prepare projects for release with branch management. - Created stashUpdater.js to update git origins for projects. - Added updatedProjects.txt to track projects that have been updated.
This commit is contained in:
Greg Jacobs
243
src/styles/rbc-global-variables.scss
Normal file
243
src/styles/rbc-global-variables.scss
Normal file
@@ -0,0 +1,243 @@
|
||||
@import "./rbc-global-color.scss";
|
||||
@import "./rbc-global-mixins.scss";
|
||||
@import "./rbc-global-font.scss";
|
||||
@import "./rbc-global-functions.scss";
|
||||
|
||||
//*************** UI & LAYOUT *********************************/
|
||||
|
||||
$margin-2: 0.13em;
|
||||
$margin-4: 0.25em;
|
||||
$margin-small: 8px;
|
||||
$margin-8: 0.5em;
|
||||
$margin-10: 10px;
|
||||
$margin-12: 0.75em;
|
||||
$margin-medium: 20px;
|
||||
$margin-24: 1.5em;
|
||||
$margin-28: 1.75em;
|
||||
$margin-32: 2em;
|
||||
$margin-large: 32px;
|
||||
$margin-xl: 40px;
|
||||
|
||||
// Padding Sizes
|
||||
$padding-xs: 5px;
|
||||
$padding-4: 0.25em;
|
||||
$padding-8: 0.5em;
|
||||
$padding-sm: 10px;
|
||||
$padding-12: 12px;
|
||||
$padding-md: 15px;
|
||||
$padding-16: 1em; // ems scale on the font-size set on the nearest parent, 1 em/rem = 16px at default font-size settings
|
||||
$padding-lg: 20px;
|
||||
$padding-24: 24px;
|
||||
$padding-xl: 30px;
|
||||
$padding-28: 1.75em;
|
||||
$padding-32: 2em;
|
||||
$padding-40: 2.5em; // 40px
|
||||
$padding-48: 3.00em;
|
||||
$padding-62: 3.88em;
|
||||
|
||||
$analyze-page-item-height: 42px;
|
||||
$modal-z-index: 10001;
|
||||
|
||||
//*************** UI & LAYOUT - SCREEN SIZES *********************************/
|
||||
|
||||
$screen-size-xxs : 375px;
|
||||
$screen-size-xs : 575px;
|
||||
$screen-size-sm : 767px;
|
||||
$screen-size-md : 991px;
|
||||
$screen-size-lg : 1183px;
|
||||
$screen-size-xl : 1383px;
|
||||
$screen-size-xxl : 1919px;
|
||||
|
||||
//*************** UI & LAYOUT - MOBILE *********************************/
|
||||
|
||||
$mobile-result-container-height: 44px;
|
||||
$mobile-result-container-max-height: 132px;
|
||||
|
||||
//******************************* All Links **********************/
|
||||
$text-link: #002888; // - Link
|
||||
|
||||
// - Negative/Positive Values
|
||||
$text-neg: #B91A0E; // - Negative
|
||||
$text-pos: #097B24; // - Positive
|
||||
|
||||
// - Panel Colors
|
||||
$text-panel-sub-header: #365D84; // - Panel Sub-Header
|
||||
|
||||
// - Main Text Colors
|
||||
$text-header: #5E7487; // - Header
|
||||
$text-black: #000000; // - Black(Body Copy)
|
||||
$text-black-secondary: #333333; // - Black Secondary
|
||||
$text-black-tertiary: #666666; // - Black Tertiary
|
||||
|
||||
// - Text State Colors
|
||||
$text-disabled: #444; //- Disabled
|
||||
|
||||
//***************************** INTERFACE-SPECIFIC COLORS **************/
|
||||
// - Primary Brand Colors
|
||||
$brand-blue: #002888; // - RBC Blue
|
||||
|
||||
// - Negative / Positive Elements
|
||||
$change-negative: #9C0000; // - Change Negative
|
||||
$change-positive: #005A00; // - Change Positive
|
||||
|
||||
// - Buttons
|
||||
$btn-prime: #002888; // - Button Prime
|
||||
$btn-prime-hover: #0051A5; // - Button Prime Hover
|
||||
$btn-prime-border: #002888; // - Button Prime Border
|
||||
$btn-disabled: #EAEAEA; // - Disabled Button Fill
|
||||
$btn-disabled-border: #B3B3B3; // - Disabled Button Stroke
|
||||
$btn-focus-border: #2C9CDD; // - Focus Border
|
||||
$btn-focus-shadow: #0597FF; // - Focus Shadow
|
||||
|
||||
// - Main Table Colors
|
||||
$table-border: #7E94C2; // - Border
|
||||
$table-options-expanded-border: #00177E;
|
||||
|
||||
// - Practice Account Table
|
||||
$table-practice: #F4F1E5; // - Practice Primary Stripe
|
||||
$table-practice-alt: #E2DFCF; // - Practice Alternating Stripe
|
||||
|
||||
// - Dropdown
|
||||
$dropdown-line-breaks: #999999; // - Line Breaks
|
||||
|
||||
// - Unfilled progress bar
|
||||
$RBC_LightGrey: #D2DADE;
|
||||
|
||||
// - Confirmation
|
||||
$confirmation-pos-border: #005A00; // - Positive Border
|
||||
$confirmation-neg-border: #9C0000; // - Negative Border
|
||||
|
||||
$chart-ext-carbon: #50585F; // - Ext Carbon
|
||||
$chart-reverse-sun: #FCA311; // - Reverse Sun
|
||||
|
||||
/******************** MD Research ************************/
|
||||
|
||||
$technicals_bullish_event: #005a00;
|
||||
$RBC_DarkGrey: #999;
|
||||
$technicals_bearish_event: #b91a0e;
|
||||
|
||||
// - TECHNICALS ICONS
|
||||
|
||||
|
||||
$technicals_other_event: #50585f;
|
||||
$technicals_table_row: #f7f9fa;
|
||||
|
||||
/************************************** P & CB Colour ****************************/
|
||||
|
||||
// - BRANDS
|
||||
$interactive-1: $rbc-blue-tint-1;
|
||||
$interactive-1-hover: $rbc-blue;
|
||||
$interactive-1-active: $dark-blue-tint-1;
|
||||
$interactive-1-text: $white;
|
||||
$interactive-accent: $rbc-yellow;
|
||||
$interactive-accent-hover: $dark-yellow-tint-1;
|
||||
$interactive-accent-active: $dark-yellow;
|
||||
$interactive-accent-text: $black-tint-1;
|
||||
$interactive-opposite: $rbc-yellow;
|
||||
$interactive-opposite-hover: $dark-yellow-tint-1;
|
||||
$interactive-opposite-active: $dark-yellow;
|
||||
$interactive-opposite-text: $black-tint-1;
|
||||
$link: $rbc-blue-tint-1;
|
||||
$link-hover: $rbc-blue;
|
||||
$link-active: $dark-blue-tint-1;
|
||||
$link-opposite: $white;
|
||||
$link-opposite-hover: $white;
|
||||
$link-opposite-active: $white;
|
||||
|
||||
// - TEXT & FOREGROUND
|
||||
$text-default: $black-tint-1;
|
||||
$text-low-emphasis: $grey-tint-1;
|
||||
$text-disabled: $grey-tint-2;
|
||||
$text-opposite-1: $white;
|
||||
$text-opposite-2: $white;
|
||||
|
||||
// - BACKGROUNDS
|
||||
$background-1: $white;
|
||||
$background-2: $grey-light-tint-1;
|
||||
$background-3: $grey-light-tint-2;
|
||||
$background-highlight: $tundra-tint-3;
|
||||
$background-opposite-1: $rbc-blue-tint-1;
|
||||
$background-overlay: $black-tint-1;
|
||||
$background-overlay-inline: $white;
|
||||
$background-page: $white;
|
||||
$background-disabled: $grey-light-tint-3;
|
||||
|
||||
// - BORDERS
|
||||
$border_width_1: 1px;
|
||||
$border_width_2: 2px;
|
||||
$border_width_3: 3px;
|
||||
|
||||
$rounded-circle-1: 1px solid #6F6F6F;
|
||||
$rounded-circle-2: 2px solid #6F6F6F;
|
||||
$rounded-circle-3: 3px solid #6F6F6F;
|
||||
$rounded-circle-4: 4px solid #6F6F6F;
|
||||
|
||||
$border-radius-1: 1px;
|
||||
$border-radius-2: 2px;
|
||||
$border-radius-3: 3px;
|
||||
$border-radius-4: 4px;
|
||||
$border-radius-8: 8px;
|
||||
$border-radius-12: 12px;
|
||||
$border-radius-16: 16px;
|
||||
$border-radius-20: 20px;
|
||||
$border-radius-24: 24px;
|
||||
$border-radius-32: 32px;
|
||||
|
||||
$border-1: $grey-tint-1;
|
||||
$border-2: $black-tint-1;
|
||||
$border-3: $grey-tint-3;
|
||||
$border-4: $grey-light-tint-4;
|
||||
$border-opposite-1: $white;
|
||||
$border-1-grey-light-tint: 1px solid $grey-light-tint-4;
|
||||
|
||||
$border-selected: 0.125rem solid $rbc-blue-tint-1;
|
||||
$border-focus-visible: 0.125rem solid $rbc-blue-tint-1;
|
||||
|
||||
// - BOX SHADOWS
|
||||
$modal-box-shadow: 0px 3.59106px 7.84712px rgba(37, 37, 37, 0.12);
|
||||
$divider-box-shadow: 0.125rem 0px 0.25rem 0px rgba(0, 0, 0, 0.20);
|
||||
$dropdown-box-shadow: 0px 3.591px 7.847px 0px rgba(37, 37, 37, 0.08), 0px 12.062px 26.357px 0px rgba(37, 37, 37, 0.06), 0px 50.25rem 110.5rem 0px rgba(37, 37, 37, 0.04);
|
||||
|
||||
$component-bg-1: $white;
|
||||
$component-bg-2: $sky-tint-3;
|
||||
$component-bg-3: $tundra-tint-2;
|
||||
$component-bg-opposite-1: $white; //transparent
|
||||
|
||||
// - SELECTED STATES
|
||||
$selected-1: $rbc-blue-tint-1;
|
||||
$selected-2: $rbc-blue-tint-4;
|
||||
$selected-opposite-1: $white;
|
||||
|
||||
// - ACTION STATES
|
||||
$action-success : $alert-success;
|
||||
$action-error: $alert-error;
|
||||
$action-warning: $alert-warning;
|
||||
$action-information :$alert-info;
|
||||
$action-neutral: $grey-light-tint-4;
|
||||
|
||||
// - AVATARS
|
||||
$avatar-1: $dark-blue;
|
||||
$avatar-2: $ocean;
|
||||
$avatar-3: $warm-yellow;
|
||||
$avatar-4: $sun;
|
||||
$avatar-5: $beige;
|
||||
$avatar-6: $seaweed;
|
||||
$avatar-8: $warm-grey;
|
||||
|
||||
/*
|
||||
Based on the design: the breakpoints are device breakpoints instead of page breakpoints
|
||||
To get real page breakpoints we use device breakpoints (from the design) - margins
|
||||
*/
|
||||
// TODO: this is a placeholder and it will be adjusted based on the design.
|
||||
$grid-breakpoints: (
|
||||
xxs: 0,
|
||||
xs: 377px,
|
||||
sm: 576px,
|
||||
md: 768px,
|
||||
lg: 992px,
|
||||
xl: 1184px,
|
||||
xxl: 1384px
|
||||
);
|
||||
|
||||
$grid-gap-sm: 1em;
|
||||
$grid-gap: 3em; // 48px
|
||||
Reference in New Issue
Block a user