bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2026-02-17 18:09:17 +00:00
Code Issues Releases Wiki Activity

[CL-233] Update form field styles (#9776)

Browse Source
This commit is contained in:
Victoria League
2024-07-11 10:51:17 -04:00
committed by GitHub
parent 0bfbba2d03
commit e1223346a2
22 changed files with 380 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
libs/components/src/multi-select/multi-select.component.ts
View File

@@ -1,3 +1,4 @@
import { coerceBooleanProperty } from "@angular/cdk/coercion";
import { hasModifierKey } from "@angular/cdk/keycodes";
import {
Component,
@@ -39,7 +40,7 @@ export class MultiSelectComponent implements OnInit, BitFormFieldControl, Contro
@Input() removeSelectedItems = false;
@Input() placeholder: string;
@Input() loading = false;
@Input() disabled = false;
@Input({ transform: coerceBooleanProperty }) disabled?: boolean;
// Internal tracking of selected items
protected selectedItems: SelectItemView[];

53
libs/components/src/multi-select/scss/bw.theme.scss
View File

@@ -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,11 +99,11 @@ $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;
@@ -154,9 +153,7 @@ $ng-dropdown-shadow: rgb(var(--color-secondary-100)) !default;
.ng-select-container {
.ng-value-container {
padding-top: 5px;
padding-left: 7px;
@include rtl {
padding-right: 7px;
padding-left: 0;
}
.ng-value {
@@ -206,20 +203,8 @@ $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;
}
padding-bottom: 0.25rem;
}
}
}
@@ -230,6 +215,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 +249,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 +323,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 +347,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;
}