mirror of
https://github.com/bitwarden/browser
synced 2026-01-02 00:23:35 +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
@@ -2,7 +2,7 @@
|
||||
|
||||
$dark-icon-themes: "theme_dark", "theme_solarizedDark", "theme_nord";
|
||||
|
||||
$font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
$font-family-sans-serif: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
$font-family-source-code-pro: "Source Code Pro", monospace;
|
||||
$font-size-base: 14px;
|
||||
$text-color: #212529;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<footer
|
||||
class="tw-p-3 tw-border-0 tw-border-solid tw-border-t tw-border-secondary-300 tw-bg-background"
|
||||
class="tw-p-4 tw-border-0 tw-border-solid tw-border-t tw-border-secondary-300 tw-bg-background"
|
||||
>
|
||||
<div class="tw-max-w-screen-sm tw-mx-auto tw-flex tw-justify-between tw-w-full">
|
||||
<div class="tw-flex tw-justify-start tw-gap-2">
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<header
|
||||
class="tw-p-4 tw-transition-colors tw-duration-200 tw-border-0 tw-border-b tw-border-solid"
|
||||
class="tw-px-4 tw-py-3 tw-transition-colors tw-duration-200 tw-border-0 tw-border-b tw-border-solid"
|
||||
[ngClass]="{
|
||||
'tw-bg-background-alt tw-border-transparent':
|
||||
this.background === 'alt' && !pageContentScrolled(),
|
||||
@@ -17,7 +17,7 @@
|
||||
[attr.aria-label]="'back' | i18n"
|
||||
[bitAction]="backAction"
|
||||
></button>
|
||||
<h1 *ngIf="pageTitle" bitTypography="h3" class="!tw-mb-0.5 tw-text-headers">
|
||||
<h1 *ngIf="pageTitle" bitTypography="h3" class="!tw-mb-0.5">
|
||||
{{ pageTitle }}
|
||||
</h1>
|
||||
<ng-content></ng-content>
|
||||
|
||||
@@ -39,7 +39,7 @@ class ExtensionContainerComponent {}
|
||||
@Component({
|
||||
selector: "vault-placeholder",
|
||||
template: `
|
||||
<bit-section disableMargin>
|
||||
<bit-section>
|
||||
<bit-item-group aria-label="Mock Vault Items">
|
||||
<bit-item *ngFor="let item of data; index as i">
|
||||
<button bit-item-content>
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
<ng-content select="[slot=above-scroll-area]"></ng-content>
|
||||
</div>
|
||||
<div
|
||||
class="tw-max-w-screen-sm tw-mx-auto tw-overflow-y-auto tw-flex tw-flex-col tw-w-full tw-h-full"
|
||||
class="tw-max-w-screen-sm tw-mx-auto tw-overflow-y-auto tw-flex tw-flex-col tw-w-full tw-h-full tw-styled-scrollbar"
|
||||
(scroll)="handleScroll($event)"
|
||||
[ngClass]="{ 'tw-invisible': loading }"
|
||||
>
|
||||
|
||||
@@ -104,7 +104,7 @@ import "../platform/popup/locales";
|
||||
maxOpened: 2,
|
||||
autoDismiss: true,
|
||||
closeButton: true,
|
||||
positionClass: "toast-bottom-full-width",
|
||||
positionClass: "toast-top-full-width",
|
||||
}),
|
||||
BrowserAnimationsModule,
|
||||
BrowserModule,
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100% 100%">
|
||||
<text fill="%23333333" x="50%" y="50%" font-family="\'Open Sans\', \'Helvetica Neue\', Helvetica, Arial, sans-serif"
|
||||
<text fill="%23333333" x="50%" y="50%" font-family="\'DM Sans\', \'Helvetica Neue\', Helvetica, Arial, sans-serif"
|
||||
font-size="18" text-anchor="middle">
|
||||
Loading...
|
||||
</text>
|
||||
|
||||
@@ -6,6 +6,10 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
font-family: $font-family-sans-serif;
|
||||
@@ -15,7 +19,7 @@ body {
|
||||
}
|
||||
|
||||
body {
|
||||
width: 375px !important;
|
||||
width: 380px !important;
|
||||
height: 600px !important;
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
@@ -83,9 +87,9 @@ a:not(popup-page a, popup-tab-navigation a) {
|
||||
}
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
input:not(bit-form-field input, bit-search input),
|
||||
select:not(bit-form-field select),
|
||||
textarea:not(bit-form-field textarea) {
|
||||
@include themify($themes) {
|
||||
color: themed("textColor");
|
||||
background-color: themed("inputBackgroundColor");
|
||||
@@ -95,7 +99,7 @@ textarea {
|
||||
input,
|
||||
select,
|
||||
textarea,
|
||||
button {
|
||||
button:not(bit-chip-select button) {
|
||||
font-size: $font-size-base;
|
||||
font-family: $font-family-sans-serif;
|
||||
}
|
||||
@@ -286,7 +290,7 @@ header:not(bit-callout header, bit-dialog header, popup-page header) {
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
input:not(bit-form-field input) {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
border: none;
|
||||
|
||||
@@ -306,7 +306,7 @@ input[type="password"]::-ms-reveal {
|
||||
// contrast against the background, so its inversion is also still readable)
|
||||
// and suppress user selection for most elements (to make it more app-like)
|
||||
|
||||
::selection {
|
||||
:not(bit-form-field input)::selection {
|
||||
@include themify($themes) {
|
||||
color: themed("backgroundColor");
|
||||
background-color: themed("primaryAccentColor");
|
||||
|
||||
@@ -301,7 +301,7 @@ app-fido2-v1 {
|
||||
margin-top: 32px;
|
||||
|
||||
.subtitle {
|
||||
font-family: Open Sans;
|
||||
font-family: "DM Sans";
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
|
||||
@@ -3,3 +3,24 @@
|
||||
@tailwind utilities;
|
||||
|
||||
@import "../../../../../libs/components/src/tw-theme.css";
|
||||
|
||||
@layer components {
|
||||
/** Safari Support */
|
||||
html.browser_safari .tw-styled-scrollbar::-webkit-scrollbar {
|
||||
@apply tw-overflow-auto;
|
||||
}
|
||||
html.browser_safari .tw-styled-scrollbar::-webkit-scrollbar-thumb {
|
||||
@apply tw-bg-secondary-500 tw-rounded-lg tw-border-4 tw-border-solid tw-border-transparent tw-bg-clip-content;
|
||||
}
|
||||
html.browser_safari .tw-styled-scrollbar::-webkit-scrollbar-track {
|
||||
@apply tw-bg-background-alt;
|
||||
}
|
||||
html.browser_safari .tw-styled-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
@apply tw-bg-secondary-600;
|
||||
}
|
||||
|
||||
/* FireFox & Chrome support */
|
||||
html:not(.browser_safari) .tw-styled-scrollbar {
|
||||
scrollbar-color: rgb(var(--color-secondary-500)) rgb(var(--color-background-alt));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,9 +2,9 @@
|
||||
|
||||
$dark-icon-themes: "theme_dark", "theme_solarizedDark", "theme_nord";
|
||||
|
||||
$font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
$font-family-sans-serif: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||
$font-size-base: 14px;
|
||||
$font-size-base: 16px;
|
||||
$font-size-large: 18px;
|
||||
$font-size-xlarge: 22px;
|
||||
$font-size-xxlarge: 28px;
|
||||
|
||||
@@ -58,7 +58,11 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div *ngIf="vaultState === null" cdkVirtualScrollingElement class="tw-h-full tw-p-3">
|
||||
<div
|
||||
*ngIf="vaultState === null"
|
||||
cdkVirtualScrollingElement
|
||||
class="tw-h-full tw-p-3 tw-styled-scrollbar"
|
||||
>
|
||||
<app-autofill-vault-list-items></app-autofill-vault-list-items>
|
||||
<app-vault-list-items-container
|
||||
[title]="'favorites' | i18n"
|
||||
|
||||
Reference in New Issue
Block a user