mirror of
https://github.com/bitwarden/browser
synced 2025-12-17 00:33:44 +00:00
[CL-265] CL/extension refresh feature branch (#8696)
* [CL-245] Update palette to new light and dark theme colors (#8633) * [CL-245] Add new color swatches to storybook (#8697) * [CL-238] update typography (#8997) * [CL-230] [CL-296] Update button styles (#9345) * [CL-237] Update menu styles for extension refresh (#9525) * [CL-267] Add 100-level color variants and update primary-600 (#9550) * [CL-286] Update badge to use focus-visible instead of focus (#9551) * [CL-250] Update badge styles for extension refresh (#9572) * [CL-234] callout style refresh (#9920) * [CL-233] Update form field styles (#9776) * [CL-239][CL-251][CL-342] dialog style refresh (#10096) * [CL-239] simple dialog style refresh * [CL-342] fix text overflow in dialog; add story * [CL-244] readonly fields (#10164) * [CL-352] Fix Angular errors related to form element changes (#10211) * [CL-273] Update styles for checkbox and form control (#10146) * [CL-274] Update styling for radio button (#10333) * [CL-338] Remove extra space in item content when end slot is empty (#10350) * [CL-377] Fix extension style conflict for input background (#10351) * [CL-271] Update styles for toggle (#10377) * [CL-381] Update spacing around form elements (#10432) * [CL-229] Update icon button styles (#10405) * [CL-380] Remove hover state from disabled form fields (#10639) * [CL-405] Allow toggle group input to be full width (#10658) * [CL-389] Exclude end slot label content from truncation (#10508) * [CL-383] Remove manual focus when password toggle is clicked (#10749) * [CL-278][CL-391] misc bit-item style fixes (#10758) * [CL-391] use pointer cursor on hover when link or button * [CL-210] Change base font size from 14px to 16px (#10779) * [CL-291] Finalize styling for chip select (#10771) * [CL-257] update banner component styles (#10766) * [CL-443] Fix sizing issues (#10893) * [CL-445] Fix small sizing and spacing issues (#10962) * [CL-382] Reduce element shifting on readonly hover (#10956) * [CL-396] Update theme colors to new hexes (#10968) * [CL-395] Remove text headers color (#10997) * [CL-404] Switch to primary-600 for all focus indicators (#11015) * [CL-397] Remove primary-500 (#11036) * [CL-447] Ensure DM Sans displays correctly at all font weights (#11041) * [CL-448] Scrollbar Styles (#11111) * CL-252/update toast (#10996) * [CL-275] Update link styles (#11174) * [CL-446] Update hover state for unselected chip selects (#11172) * [CL-454] Improve color a11y for toast and banner interactive elements (#11200) * [CL-457] Center input text for select and multiselect (#11239) * [CL-455] Do not use responsive margin for sections in dialogs or extension (#11243) * [CL-459] Fix chip behavior when opening menu while item is selected (#11227) * [CL-388] Update vertical nav colors for new palette (#11226) * scope styled scrollbar to only select elements (#11247) * edit radio buttons to be block inputs and update spacing (#11291) * [CL-453] Fix multiselect chip spacing and truncation (#11300) * [PM-11131] Prevent duplicated sr labels on form field icon buttons (#11383) * [CL-303] Prevent chip menu from running offscreen (#11348) * [CL-476] Fix DM Sans font on Windows (#11409) * implements scrollbar styles for firefox/chrome and safari (#11447) * [CL-472] Fix search background color in extension (#11466) * [CL-481] Style updates for bit-item, bit-card, and primary-100 (#11473) * [CL-478] Remove underline on hover for most components (#11477) * [CL-477] Remove focus styles for readonly input (#11510) * [CL-487] Fix vault items virtual scroll height (#11581) * [PM-8625] Increase popup width (#11686) * [CL-494] Wrap long words in toggle group (#11659) * [CL-13820] Add class to remove link underline (#11762) * [CL-435] Prevent Windows extension from shifting (#11851) * [CL-503] Add notification color variables (#11802) * [PM-14043] Update size of toggle group label to fit more content (#11881) * [CL-498] Set chip menu width minimum to chip select width (#11905) --------- Co-authored-by: Will Martin <contact@willmartian.com> Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com> Co-authored-by: Nick Krantz <125900171+nick-livefront@users.noreply.github.com> Co-authored-by: Merissa Weinstein <merissa.k.weinstein@gmail.com> Co-authored-by: Danielle Flinn <43477473+danielleflinn@users.noreply.github.com>
This commit is contained in:
Victoria League
GitHub
@@ -9,19 +9,18 @@ $ng-select-highlight: rgb(var(--color-primary-700)) !default;
|
||||
$ng-select-primary-text: rgb(var(--color-text-main)) !default;
|
||||
$ng-select-disabled-text: rgb(var(--color-secondary-100)) !default;
|
||||
$ng-select-border: rgb(var(--color-secondary-600)) !default;
|
||||
$ng-select-border-radius: 4px !default;
|
||||
$ng-select-bg: rgb(var(--color-background-alt)) !default;
|
||||
$ng-select-border-radius: 0.5rem !default;
|
||||
$ng-select-bg: rgb(var(--color-background)) !default;
|
||||
$ng-select-selected: transparent !default;
|
||||
$ng-select-selected-alt: rgb(var(--color-text-main) / 0.06) !default;
|
||||
$ng-select-selected-text: $ng-select-primary-text !default;
|
||||
|
||||
$ng-select-marked: rgb(var(--color-text-main) / 0.12) !default;
|
||||
$ng-select-marked: rgb(var(--color-primary-100)) !default;
|
||||
$ng-select-marked-text: $ng-select-primary-text !default;
|
||||
|
||||
$ng-select-box-shadow: none !default;
|
||||
$ng-select-placeholder: rgb(var(--color-text-muted)) !default;
|
||||
$ng-select-height: 35px !default;
|
||||
$ng-select-value-padding-left: 10px !default;
|
||||
$ng-select-height: 100%;
|
||||
$ng-select-value-padding-left: 1rem !default;
|
||||
$ng-select-value-font-size: 0.9em !default;
|
||||
$ng-select-value-text: $ng-select-primary-text !default;
|
||||
|
||||
@@ -31,7 +30,7 @@ $ng-select-dropdown-optgroup-text: rgb(var(--color-text-muted)) !default;
|
||||
$ng-select-dropdown-optgroup-marked: $ng-select-dropdown-optgroup-text !default;
|
||||
$ng-select-dropdown-option-bg: $ng-select-dropdown-bg !default;
|
||||
$ng-select-dropdown-option-text: $ng-select-primary-text !default;
|
||||
$ng-select-dropdown-option-disabled: rgb(var(--color-text-muted) / 0.6) !default;
|
||||
$ng-select-dropdown-option-disabled: rgb(var(--color-secondary-300)) !default;
|
||||
|
||||
$ng-select-input-text: $ng-select-primary-text !default;
|
||||
|
||||
@@ -41,12 +40,12 @@ $ng-clear-icon-hover: rgb(var(--color-text-main)) !default;
|
||||
$ng-dropdown-shadow: rgb(var(--color-secondary-100)) !default;
|
||||
|
||||
.ng-select {
|
||||
height: $ng-select-height;
|
||||
&.ng-select-opened {
|
||||
> .ng-select-container {
|
||||
background: $ng-select-bg;
|
||||
border-color: $ng-select-border;
|
||||
background: transparent;
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
box-shadow: $ng-select-box-shadow;
|
||||
}
|
||||
.ng-arrow {
|
||||
top: -2px;
|
||||
@@ -100,15 +99,15 @@ $ng-dropdown-shadow: rgb(var(--color-secondary-100)) !default;
|
||||
color: $ng-select-primary-text;
|
||||
background-color: $ng-select-bg;
|
||||
border-radius: $ng-select-border-radius;
|
||||
border: 1px solid $ng-select-border;
|
||||
min-height: $ng-select-height;
|
||||
border: none;
|
||||
height: $ng-select-height;
|
||||
align-items: center;
|
||||
&:hover {
|
||||
box-shadow: 0 1px 0 $ng-dropdown-shadow;
|
||||
box-shadow: $ng-select-box-shadow;
|
||||
}
|
||||
.ng-value-container {
|
||||
align-items: center;
|
||||
padding-left: $ng-select-value-padding-left;
|
||||
padding: 6px 0px 5px $ng-select-value-padding-left;
|
||||
@include rtl {
|
||||
padding-right: $ng-select-value-padding-left;
|
||||
padding-left: 0;
|
||||
@@ -118,6 +117,7 @@ $ng-dropdown-shadow: rgb(var(--color-secondary-100)) !default;
|
||||
}
|
||||
|
||||
.ng-input {
|
||||
padding-top: 2px;
|
||||
> input {
|
||||
color: $ng-select-input-text;
|
||||
}
|
||||
@@ -128,8 +128,9 @@ $ng-dropdown-shadow: rgb(var(--color-secondary-100)) !default;
|
||||
.ng-select-container {
|
||||
height: $ng-select-height;
|
||||
.ng-value-container {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
.ng-input {
|
||||
top: 5px;
|
||||
left: 0;
|
||||
padding-left: $ng-select-value-padding-left;
|
||||
padding-right: 50px;
|
||||
@@ -153,19 +154,16 @@ $ng-dropdown-shadow: rgb(var(--color-secondary-100)) !default;
|
||||
}
|
||||
.ng-select-container {
|
||||
.ng-value-container {
|
||||
padding-top: 5px;
|
||||
padding-left: 7px;
|
||||
height: 100%;
|
||||
@include rtl {
|
||||
padding-right: 7px;
|
||||
padding-left: 0;
|
||||
}
|
||||
.ng-value {
|
||||
font-size: $ng-select-value-font-size;
|
||||
margin-bottom: 5px;
|
||||
color: $ng-select-value-text;
|
||||
background-color: $ng-select-selected;
|
||||
border-radius: 2px;
|
||||
margin-right: 5px;
|
||||
margin: 4px 5px 4px 0px;
|
||||
@include rtl {
|
||||
margin-right: 0;
|
||||
margin-left: 5px;
|
||||
@@ -206,21 +204,6 @@ $ng-dropdown-shadow: rgb(var(--color-secondary-100)) !default;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ng-input {
|
||||
padding: 0 0 3px 3px;
|
||||
@include rtl {
|
||||
padding: 0 3px 3px 0;
|
||||
}
|
||||
}
|
||||
.ng-placeholder {
|
||||
top: 5px;
|
||||
padding-bottom: 5px;
|
||||
padding-left: 3px;
|
||||
@include rtl {
|
||||
padding-right: 3px;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -230,6 +213,8 @@ $ng-dropdown-shadow: rgb(var(--color-secondary-100)) !default;
|
||||
&:hover .ng-clear {
|
||||
color: $ng-clear-icon-hover;
|
||||
}
|
||||
border-radius: $ng-select-border-radius;
|
||||
text-align: center;
|
||||
}
|
||||
.ng-spinner-zone {
|
||||
padding: 5px 5px 0 0;
|
||||
@@ -262,7 +247,8 @@ $ng-dropdown-shadow: rgb(var(--color-secondary-100)) !default;
|
||||
z-index: 2050 !important;
|
||||
background-color: $ng-select-dropdown-bg;
|
||||
border: 1px solid $ng-select-dropdown-border;
|
||||
box-shadow: 0 1px 0 $ng-dropdown-shadow;
|
||||
border-radius: $ng-select-border-radius;
|
||||
box-shadow: $ng-select-box-shadow;
|
||||
left: 0;
|
||||
&.ng-select-top {
|
||||
bottom: 100%;
|
||||
@@ -335,6 +321,8 @@ $ng-dropdown-shadow: rgb(var(--color-secondary-100)) !default;
|
||||
padding: 5px 7px;
|
||||
}
|
||||
.ng-dropdown-panel-items {
|
||||
border-radius: $ng-select-border-radius;
|
||||
background: $ng-select-bg;
|
||||
.ng-optgroup {
|
||||
user-select: none;
|
||||
padding: 8px 10px;
|
||||
@@ -357,10 +345,7 @@ $ng-dropdown-shadow: rgb(var(--color-secondary-100)) !default;
|
||||
.ng-option {
|
||||
background-color: $ng-select-dropdown-option-bg;
|
||||
color: $ng-select-dropdown-option-text;
|
||||
padding: 8px 10px;
|
||||
&.ng-option-selected {
|
||||
background-color: $ng-select-selected-alt;
|
||||
}
|
||||
padding: 0.375rem 0.75rem;
|
||||
&.ng-option-selected.ng-option-marked {
|
||||
background-color: $ng-select-marked;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user